/*
  File: styles/app.css
  Purpose: Dark baseline styling for the vanilla VTT application shell.
  Notes: Keeps the UI clean and restrained while exposing stable class names for later design work.
*/
:root {
  color-scheme: dark;
  --color-bg: #13161b;
  --color-bg-panel: #1a1f27;
  --color-bg-panel-alt: #161b22;
  --color-border: #2c3440;
  --color-border-strong: #3b4654;
  --color-text: #e2e8f0;
  --color-text-muted: #8e9aae;
  --color-accent: #6ea8fe;
  --color-accent-strong: #8fbafc;
  --color-danger: #d26666;
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.2);
  --font-ui: "Segoe UI", "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
}

body {
  min-height: 100vh;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable]:not([contenteditable="false"]) {
  -webkit-user-select: text;
  user-select: text;
}

body[data-app-mode='player'] {
  background: #090d12;
}

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  --scene-panel-width: 340px;
  --windows-panel-width: 300px;
  --player-panel-width: 300px;
  --token-panel-width: 300px;
  --asset-panel-width: 320px;
  --audio-panel-width: min(440px, calc(100vw - 380px));
  --roll-panel-width: min(440px, calc(100vw - 380px));
  --spell-panel-width: min(560px, calc(100vw - 380px));
  --skill-panel-width: min(480px, calc(100vw - 380px));
  --item-panel-width: min(640px, calc(100vw - 24px));
  --monster-panel-width: min(760px, calc(100vw - 360px));
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
}

.app-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  align-items: start;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #191d24 0%, #14181f 100%);
}

.topbar-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-controls-block {
  display: grid;
  gap: 16px;
}

.topbar-scene-block {
  width: 100%;
  flex: 1 1 auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.topbar-project-block {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.topbar-project-actions-left,
.topbar-project-actions-right,
.topbar-object-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar-project-actions-right {
  margin-left: auto;
  justify-content: flex-end;
}

.player-panel-actions {
  padding: 0 16px 12px;
}

.topbar-selection-mode-control {
  display: none;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.topbar-selection-mode-control input {
  margin: 0;
  accent-color: var(--color-accent);
}

.scene-select-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 230px;
}

.topbar-scene-block .scene-selector {
  width: auto;
  min-width: 150px;
  flex: 1 1 180px;
}

.topbar-scene-block .control-label {
  flex: 0 0 auto;
  align-self: center;
}

.scene-action-button {
  white-space: nowrap;
}

.topbar-separator {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1;
}

.topbar-brand-block {
  max-width: 240px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.app-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-status,
.panel-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.app-status {
  width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.control-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.scene-selector,
.control-input,
.control-select,
.control-textarea {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  background: #10151b;
  color: var(--color-text);
  padding: 8px 10px;
}

.control-input:disabled,
.control-select:disabled,
.control-textarea:disabled {
  opacity: 0.55;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.control-textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.control-button {
  border: 1px solid var(--color-border-strong);
  background: #202734;
  color: var(--color-text);
  padding: 8px 12px;
  cursor: pointer;
}

.control-button:disabled {
  opacity: 0.5;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.control-button:hover,
.control-button:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

.control-button-active {
  border-color: var(--color-accent);
  background: #1d3148;
  color: var(--color-accent-strong);
}

.control-button:disabled:hover,
.control-button:disabled:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}

.control-button-warning:hover,
.control-button-warning:focus-visible {
  border-color: var(--color-danger);
  color: #ffaaaa;
}

.app-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  overflow: hidden;
  min-height: 0;
}

.app-panel {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg-panel);
}

.windows-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: var(--windows-panel-width);
  transform: translateX(-100%);
  transition: transform 180ms ease;
}
.windows-panel-content { padding: 16px; }
.windows-panel-content > p { margin: 0 0 12px; color: var(--color-text-muted); font-size: .8rem; line-height: 1.45; }

.scene-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: var(--scene-panel-width);
  transform: translateX(-100%);
  transition: transform 180ms ease;
}

.asset-library-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: var(--asset-panel-width);
  transform: translateX(-100%);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.player-list-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: var(--player-panel-width);
  transform: translateX(-100%);
  background: var(--color-bg-panel-alt);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.initiative-tool { display: grid; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); background: rgba(9, 13, 18, .58); }
.initiative-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.initiative-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.initiative-heading h3, .initiative-heading p, .initiative-empty { margin: 0; }
.initiative-heading h3 { font-size: .92rem; text-transform: uppercase; letter-spacing: .07em; }
.initiative-heading p, .initiative-empty { margin-top: 4px; color: var(--color-text-muted); font-size: .76rem; line-height: 1.4; }
.initiative-list { display: grid; gap: 5px; }
.initiative-entry { display: grid; grid-template-columns: 24px minmax(0, 1fr) 54px auto auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--color-border); background: #11161d; }
.initiative-entry-pending { border-style: dashed; opacity: .72; }
.initiative-entry-active { border: 2px solid #72df98; border-left-width: 5px; background: #183e29; opacity: 1; }
.initiative-entry-active .initiative-rank { color: #a8ffc7; font-weight: 800; }
.initiative-entry-active [data-initiative-action="play-player"] { border-color: #72df98; background: #286841; color: #fff; }
.turn-active-badge { display: inline-block; width: fit-content; margin-top: 4px; padding: 3px 8px; border-radius: 4px; background: #a8ffc7; color: #102d1b; font-size: 11px; font-weight: 800; }
#player-end-turn-button { flex-shrink: 0; }
#player-end-turn-button[hidden] { display: none; }
.initiative-rank { color: var(--color-text-muted); text-align: center; font-size: .78rem; }
.initiative-name { overflow: hidden; font-size: .83rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.initiative-name small { display: block; color: var(--color-text-muted); font-size: .67rem; font-weight: 400; }
.initiative-focus { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.initiative-focus:hover { color: var(--color-accent); text-decoration: underline; }
.initiative-start-dialog { max-height: 90vh; overflow-y: auto; }
.initiative-start-dialog h4 { margin: 0; }
.initiative-value { width: 54px; padding: 5px; text-align: center; }
.initiative-roll-extra { padding: 5px 7px; }
.initiative-remove { padding: 2px 4px; border: 0; color: var(--color-text-muted); background: transparent; cursor: pointer; font-size: 1.15rem; }
.initiative-remove:hover { color: var(--color-danger); }
.initiative-extra-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.initiative-prompt-root { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 10, .72); backdrop-filter: blur(5px); }
.initiative-prompt-root[hidden] { display: none; }
.initiative-prompt { width: min(440px, 100%); padding: 24px; border: 1px solid var(--color-accent); background: var(--color-bg-panel); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.initiative-prompt h2, .initiative-prompt p { margin: 0; }
.initiative-prompt > p:not(.player-sidebar-eyebrow) { margin-top: 7px; color: var(--color-text-muted); }
.initiative-prompt-list { display: grid; gap: 9px; margin-top: 18px; }
.initiative-prompt-list .control-button { display: flex; justify-content: space-between; gap: 16px; padding: 11px 13px; }
.initiative-start-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 6, 10, .76); backdrop-filter: blur(5px); }
.initiative-start-dialog { display: grid; gap: 14px; width: min(430px, 100%); padding: 22px; border: 1px solid var(--color-accent); background: var(--color-bg-panel); box-shadow: 0 24px 70px rgba(0,0,0,.65); }
.initiative-start-dialog h3, .initiative-start-dialog p { margin: 0; }
.initiative-start-dialog > p { color: var(--color-text-muted); font-size: .82rem; line-height: 1.45; }
.initiative-candidates { display: grid; max-height: 45vh; overflow: auto; border: 1px solid var(--color-border); }
.initiative-candidates label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.initiative-candidates label:last-child { border-bottom: 0; }
.initiative-candidates small { color: var(--color-text-muted); }
.initiative-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.audio-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: var(--audio-panel-width);
  transform: translateX(-100%);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease;
}

.roll-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--roll-panel-width); transform: translateX(-100%); box-shadow: 18px 0 40px rgba(0,0,0,.35); transition: transform 180ms ease; }
.spell-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--spell-panel-width); transform: translateX(-100%); box-shadow: 18px 0 40px rgba(0,0,0,.35); transition: transform 180ms ease; }
.skill-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--skill-panel-width); transform: translateX(-100%); box-shadow: 18px 0 40px rgba(0,0,0,.35); transition: transform 180ms ease; }
.item-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--item-panel-width); transform: translateX(-100%); box-shadow: 18px 0 40px rgba(0,0,0,.35); transition: transform 180ms ease; }
.monster-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--monster-panel-width); transform: translateX(-100%); box-shadow: 18px 0 40px rgba(0,0,0,.45); transition: transform 180ms ease; }
.monster-panel-content { display: grid; gap: 12px; padding: 16px; }
.monster-toolbar { display: grid; grid-template-columns: minmax(180px,2fr) minmax(85px,.6fr) minmax(110px,1fr) minmax(110px,1fr) auto; gap: 8px; }
.monster-list { display: grid; gap: 12px; margin-top: 8px; }
.monster-card { padding: 14px; border: 1px solid var(--color-border); background: #11161d; }
.monster-card-header, .monster-meta, .monster-combat, .monster-abilities, .monster-card-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.monster-card-header { justify-content: space-between; border-bottom: 1px solid var(--color-border); padding-bottom: 8px; }
.monster-card h3, .monster-card p, .monster-card h4 { margin: 0; }
.library-english-name { display: block; margin-top: 2px; color: var(--color-text-muted); font-weight: 400; }
.monster-meta, .monster-combat, .monster-details { margin-top: 8px; color: var(--color-text-muted); font-size: .78rem; }
.monster-abilities { display: grid; grid-template-columns: repeat(6,minmax(55px,1fr)); margin-top: 10px; padding: 8px; background: #0d1218; text-align: center; }
.monster-abilities small { display: block; color: var(--color-text-muted); }
.monster-section { margin-top: 12px; }
.monster-section h4 { margin-bottom: 6px; color: var(--color-accent-strong); }
.monster-feature { margin-top: 5px; font-size: .8rem; line-height: 1.4; }
.monster-feature p { margin-top: 2px; color: #d7dee8; }
.monster-card-actions { margin-top: 12px; }
.monster-editor { display: grid; gap: 10px; }
.monster-json-editor { min-height: 55vh; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; }
.skill-panel-content { padding: 16px; }
.skill-library-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.skill-list { display: grid; gap: 8px; }
.skill-card { padding: 8px 10px; border: 1px solid var(--color-border); background: #11161d; }
.skill-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.skill-card-header h3, .skill-card p, .player-token-skills h4 { margin: 0; }
.skill-card-header h3 { font-size: .95rem; }
.skill-card-header span, .skill-card-stats { color: var(--color-text-muted); font-size: .75rem; }
.skill-card-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.skill-card p { margin-top: 5px; color: #d7dee8; font-size: .8rem; line-height: 1.3; }
.skill-card-actions, .skill-editor-actions, .player-skill-order-actions { display: flex; gap: 7px; margin-top: 8px; }
.skill-editor, .skill-editor-fields { display: grid; gap: 10px; }
.skill-editor-fields { grid-template-columns: 1fr 1fr; }
.skill-editor-description { grid-column: 1 / -1; }
.token-skill-assignment-list { display: grid; gap: 6px; }
.token-skill-assignment { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--color-border); background: #11161d; }
.player-token-skills { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.player-token-skill-row { display: grid; gap: 4px; }
.player-token-skill-row .skill-card { padding: 7px 9px; }
.player-skill-order-actions { justify-content: flex-end; margin-top: 0; }
.player-skill-order-actions .control-button { padding: 3px 9px; }
.item-panel-content { min-width: 0; padding: 16px; overflow-x: hidden; }
.item-library-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.item-list { display: grid; gap: 8px; }
.item-card { min-width: 0; padding: 8px 10px; overflow-wrap: anywhere; border: 1px solid var(--color-border); background: #11161d; }
.item-card-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.item-card-header > div:first-child { min-width: 0; flex: 1 1 180px; }
.item-card-header h3, .item-card p { margin: 0; }
.item-card-header h3 { font-size: .95rem; }
.player-item-badge { display: block; width: fit-content; margin-top: 4px; padding: 2px 6px; border: 1px solid #aa7be8; background: rgba(111, 66, 166, .2); color: #d9baff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.item-card-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; color: var(--color-text-muted); font-size: .75rem; }
.item-card-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; color: var(--color-accent-strong); font-size: .75rem; }
.item-card p { margin-top: 5px; color: #d7dee8; font-size: .8rem; line-height: 1.3; }
.item-card-actions, .item-editor-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.item-editor, .item-editor-fields { display: grid; gap: 10px; }
.item-editor-fields { grid-template-columns: 1fr 1fr; }
.item-editor-description { grid-column: 1 / -1; }
.inventory-heading, .token-inventory-assignment { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inventory-heading strong { color: var(--color-text-muted); font-size: .75rem; }
.token-inventory-assignment-list { display: grid; gap: 6px; }
.token-inventory-assignment { padding: 6px 8px; border: 1px solid var(--color-border); background: #11161d; }
.inventory-quantity-controls { display: flex; align-items: center; gap: 5px; }
.inventory-quantity-controls .control-button { padding: 3px 7px; }
.player-token-inventory { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.player-token-facing { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.player-token-facing h4, .player-token-facing p { margin: 0; }
.player-token-range { display: grid; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.player-token-range-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.player-token-range-stepper { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.player-token-range-step { min-width: 36px; padding-inline: 10px; font-size: 1rem; }
.player-token-range-stepper input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.player-token-range-stepper input[type="number"]::-webkit-inner-spin-button,
.player-token-range-stepper input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.player-token-inventory h4 { margin: 0; }
.player-inventory-weight { color: var(--color-text-muted); font-size: .78rem; }
.spell-panel-content { padding: 16px; }
.spell-library-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.spell-list { display: grid; gap: 10px; }
.spell-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; border: 1px solid var(--color-border); background: #11161d; }
.spell-card-main { min-width: 0; }
.spell-editor { display: grid; gap: 12px; }
.spell-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.spell-card-header h3, .spell-card p, .player-token-spells h4 { margin: 0; }
.spell-card-header h3 { font-size: .95rem; }
.spell-card-header span, .spell-card-stats, .field-help { color: var(--color-text-muted); font-size: .75rem; }
.spell-card-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.spell-card p { margin-top: 5px; color: #d7dee8; font-size: .8rem; line-height: 1.3; }
.spell-card [data-spell-description][hidden] { display: none; }
.spell-description-toggle { flex: 0 0 auto; padding: 2px 6px; border: 1px solid var(--color-border-strong); background: #171e27; color: var(--color-text-muted); cursor: pointer; font-size: .68rem; line-height: 1.35; }
.spell-description-toggle:hover, .spell-description-toggle:focus-visible { border-color: var(--color-accent); color: var(--color-text); }
.spell-card-actions, .spell-editor-actions, .player-spell-order-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.rules-rich-text { min-width: 0; margin-top: 6px; color: #d7dee8; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.rules-rich-text p { margin: 0 0 .55rem; }
.rules-rich-text p:last-child { margin-bottom: 0; }

.library-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.library-list { margin-top: 10px; }
.library-legacy-filter { display:flex; align-items:center; gap:6px; margin-top:8px; color:var(--color-text-muted); font-size:.75rem; }
.library-card-heading-actions { display: flex; align-items: center; gap: 7px; }
.library-favorite-button {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  background: #11161d;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
}

.token-list-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--token-panel-width); transform: translateX(-100%); background: var(--color-bg-panel-alt); box-shadow: 18px 0 40px rgba(0, 0, 0, .28); transition: transform 180ms ease; }
.token-list-content { display: grid; gap: 18px; padding: 16px; }
.token-list-group { display: grid; gap: 7px; }
.token-list-group h3 { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--color-text-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.token-list-entry { display: grid; min-width: 0; gap: 3px; width: 100%; padding: 9px 10px; border: 1px solid var(--color-border); background: #11161d; color: var(--color-text); text-align: left; cursor: pointer; }
.token-list-entry:hover, .token-list-entry:focus-visible { border-color: var(--color-accent); background: #172131; }
.token-list-entry-name { overflow: hidden; font-size: .85rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.token-list-entry-meta { overflow-wrap: anywhere; color: var(--color-text-muted); font-size: .7rem; line-height: 1.35; }

.asset-initial-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.asset-initial-values label {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.asset-initial-values .control-input {
  width: 100%;
  margin-top: 3px;
}

.asset-save-values-button {
  width: 100%;
}
.library-favorite-button:hover, .library-favorite-button:focus-visible, .library-favorite-button-active { border-color: #b78b3a; color: #f2c66d; }
.library-favorites-section { display: grid; gap: 8px; margin-bottom: 14px; padding: 10px; border-left: 2px solid #b78b3a; background: rgba(183, 139, 58, .06); }
.library-favorites-section > h3 { margin: 0; color: #f2c66d; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.spell-hit-grid { display: grid; grid-template-columns: repeat(7, 28px); grid-template-rows: repeat(7, 28px); gap: 3px; width: max-content; }
.spell-hit-grid-compact { grid-template-columns: repeat(7, 6px); grid-template-rows: repeat(7, 6px); gap: 1px; align-self: start; }
.spell-hit-cell { width: 100%; min-width: 0; height: 100%; padding: 0; border: 1px solid #4a5564; background: #202833; }
button.spell-hit-cell { cursor: pointer; }
.spell-hit-cell-active { border-color: #8bc5ff; background: var(--color-accent); }
.spell-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spell-editor-class-field, .spell-editor-subclasses { grid-column: 1 / -1; min-width: 0; }
.spell-editor-class-field { margin: 0; padding: 10px; border: 1px solid var(--color-border); }
.spell-editor-class-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 7px 10px; margin-top: 8px; }
.spell-editor-class-options label { display: flex; align-items: center; gap: 6px; }
.spell-editor-description { grid-column: 1 / -1; }
.spell-editor-pattern { display: grid; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--color-border); }
.token-spell-assignment-list { display: grid; gap: 6px; }
.token-spell-assignment { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--color-border); background: #11161d; }
.token-resource-assignment { display: grid; gap: 7px; padding: 8px; border: 1px solid var(--color-border); background: #0d1218; }
.token-resource-assignment > .spell-card, .token-resource-assignment > .skill-card, .token-resource-assignment > .item-card { border: 0; background: #11161d; }
.token-resource-source { margin: 0; color: var(--color-accent-strong); font-size: .78rem; }
.token-resource-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.player-token-spells { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.player-token-spell-row { display: grid; gap: 4px; }
.player-token-spell-row .spell-card { padding: 7px 9px; }
.player-token-attacks { display: grid; min-width: 0; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.player-token-attacks h4 { margin: 0; }
.player-attack-card { display: grid; min-width: 0; gap: 10px; padding: 11px; overflow: hidden; border: 1px solid var(--color-border); background: #11161d; }
.player-attack-card-header { min-width: 0; }
.player-attack-card-header h3 { margin: 0; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.35; }
.player-attack-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; margin: 0; }
.player-attack-stat { min-width: 0; padding: 7px 8px; border: 1px solid rgba(59, 70, 84, .72); background: rgba(8, 12, 17, .42); }
.player-attack-stat dt { margin: 0 0 2px; color: var(--color-text-muted); font-size: .68rem; line-height: 1.25; }
.player-attack-stat dd { margin: 0; overflow-wrap: anywhere; color: #e7edf5; font-size: .78rem; font-weight: 650; line-height: 1.35; }
.player-attack-stat-wide { grid-column: 1 / -1; }
.player-attack-notes { min-width: 0; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: #d7dee8; font-size: .78rem; line-height: 1.45; }
.player-attack-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.player-attack-actions .control-button { min-width: 0; width: 100%; padding-inline: 7px; white-space: normal; }
.inspector-token-attacks { margin-top: 6px; padding-top: 0; border-top: 0; }
.player-spell-order-actions { justify-content: flex-end; margin-top: 0; }
.player-spell-order-actions .control-button { padding: 3px 9px; }
.spell-daily-editor { display: grid; grid-template-columns: auto minmax(58px, 1fr) auto minmax(58px, 1fr); gap: 6px; align-items: center; margin-top: 8px; color: var(--color-text-muted); font-size: .75rem; }
.spell-daily-editor .control-input { min-width: 0; }
.spell-indicator-prompts { position: fixed; z-index: 20; left: 18px; bottom: 18px; display: grid; gap: 8px; width: min(420px, calc(100vw - 36px)); pointer-events: none; }
.spell-indicator-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #bd3d3d; background: rgba(29, 13, 16, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: #ffe4e4; pointer-events: auto; }
.roll-panel-content { display: grid; gap: 16px; padding: 16px; }
.roll-form { display: grid; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.roll-form .control-label { display: grid; gap: 5px; }
.roll-code-input { position: relative; display: block; }
.roll-code-input .control-input { width: 100%; padding-right: 34px; }
.roll-code-clear { position: absolute; top: 50%; right: 7px; width: 24px; height: 24px; padding: 0; transform: translateY(-50%); border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.roll-code-clear:hover, .roll-code-clear:focus-visible { color: var(--color-danger); }
.roll-dice-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.roll-dice-buttons .control-button { padding: 5px 8px; }
.roll-visibility { display: flex; gap: 14px; margin: 0; padding: 9px 10px; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.roll-visibility legend { padding: 0 4px; font-size: .78rem; }
.roll-gm-log { font-size: .82rem; color: var(--color-text-muted); }
.roll-error { margin: 0; padding: 8px; border: 1px solid var(--color-danger); color: #ffaaaa; font-size: .82rem; }
.roll-history { display: grid; gap: 9px; min-height: 0; }
.roll-entry { position: relative; padding: 11px; border: 1px solid var(--color-border); background: #11161d; }
.roll-entry p { margin: 6px 0; }.roll-entry time { color: var(--color-text-muted); font-size: .72rem; }.roll-result { color: var(--color-accent-strong); font-size: 1.15rem; }
.roll-breakdown { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0; color: var(--color-text-muted); font-size: .86rem; }
.roll-breakdown-label { width: 100%; }
.roll-breakdown-term { display: inline-flex; align-items: center; gap: 4px; }
.roll-value { display: inline-block; min-width: 24px; padding: 2px 5px; border: 1px solid var(--color-border); background: #18202a; color: var(--color-text); text-align: center; }
.roll-total { margin-top: 8px; }
.roll-entry-hidden { color: var(--color-text-muted); border-style: dashed; }.roll-badge { margin-right: 8px; padding: 2px 5px; background: #263140; color: var(--color-text-muted); font-size: .68rem; text-transform: uppercase; }
.roll-delete { position: absolute; top: 5px; right: 6px; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 1.2rem; }.roll-delete:hover { color: var(--color-danger); }
.roll-empty { color: var(--color-text-muted); font-size: .85rem; }

.inspector-panel {
  grid-column: 2;
  border-right: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
}

.panel-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px 12px;
  background: rgba(22, 27, 34, 0.95);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
}

.panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.asset-library-content,
.inspector-content,
.audio-panel-content {
  padding: 16px;
}

.app-shell {
  --side-scene-offset: 0px;
  --side-windows-offset: 0px;
  --side-player-offset: 0px;
  --side-token-offset: 0px;
  --side-spell-history-offset: 0px;
  --side-asset-offset: 0px;
  --side-audio-offset: 0px;
  --side-roll-offset: 0px;
  --side-spell-offset: 0px;
  --side-skill-offset: 0px;
  --side-item-offset: 0px;
  --side-monster-offset: 0px;
}
.app-shell.scene-panel-open { --side-scene-offset: var(--scene-panel-width); }
.app-shell.windows-panel-open { --side-windows-offset: var(--windows-panel-width); }
.app-shell.windows-panel-open .windows-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset))); }
.app-shell.player-panel-open { --side-player-offset: var(--player-panel-width); }
.app-shell.token-list-panel-open { --side-token-offset: var(--token-panel-width); }
.app-shell.asset-panel-open { --side-asset-offset: var(--asset-panel-width); }
.app-shell.audio-panel-open { --side-audio-offset: var(--audio-panel-width); }
.app-shell.roll-panel-open { --side-roll-offset: var(--roll-panel-width); }
.app-shell.spell-panel-open { --side-spell-offset: var(--spell-panel-width); }
.app-shell.skill-panel-open { --side-skill-offset: var(--skill-panel-width); }
.app-shell.item-panel-open { --side-item-offset: var(--item-panel-width); }
.app-shell.monster-panel-open { --side-monster-offset: var(--monster-panel-width); }

.app-shell.scene-panel-open .scene-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset))); }
.app-shell.player-panel-open .player-list-panel { transform: translateX(0); }
.app-shell.token-list-panel-open .token-list-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset))); }
.app-shell.asset-panel-open .asset-library-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset) + var(--side-token-offset) + var(--side-spell-history-offset))); }
.app-shell.audio-panel-open .audio-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset))); }
.app-shell.roll-panel-open .roll-panel { transform: translateX(var(--side-player-offset)); }
.app-shell.spell-panel-open .spell-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset) + var(--side-token-offset) + var(--side-spell-history-offset) + var(--side-asset-offset) + var(--side-monster-offset) + var(--side-item-offset))); }
.app-shell.skill-panel-open .skill-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset) + var(--side-token-offset) + var(--side-spell-history-offset) + var(--side-asset-offset) + var(--side-monster-offset) + var(--side-item-offset) + var(--side-spell-offset))); }
.app-shell.item-panel-open .item-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset) + var(--side-token-offset) + var(--side-spell-history-offset) + var(--side-asset-offset) + var(--side-monster-offset))); }
.app-shell.monster-panel-open .monster-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset) + var(--side-token-offset) + var(--side-spell-history-offset) + var(--side-asset-offset))); }

.scene-panel,
.player-list-panel,
.token-list-panel,
.asset-library-panel,
.audio-panel,
.roll-panel,
.spell-panel,
.skill-panel,
.item-panel,
.monster-panel { box-shadow: none; }

.scene-panel-content { padding: 16px; }
.scene-download-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:10px 10px 0; }
.token-stats { min-width: 0; font-size: 12px; }
.token-stats h4 { margin: 16px 0 8px; }
.token-stats-pairs { display: grid; gap: 6px; margin: 8px 0; }
.token-stats-pairs > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-border); padding-bottom: 4px; }
.token-stats-pairs dt { color: var(--color-text-muted); }
.token-stats-pairs dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.token-stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.token-stats-table th, .token-stats-table td { padding: 6px 3px; text-align: right; border-bottom: 1px solid var(--color-border); }
.token-stats-table th:first-child { text-align: left; font-weight: normal; }
.token-stats-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.scene-panel-list { display: grid; gap: 5px; }
.scene-panel-row { position: relative; display: grid; min-width: 0; gap: 5px; padding: 6px 7px; border: 1px solid var(--color-border); background: #11161d; cursor: grab; transition: margin 120ms ease, opacity 120ms ease, border-color 120ms ease; }
.scene-panel-row:active { cursor: grabbing; }
.scene-panel-row-dm { border-left: 3px solid var(--color-accent); }
.scene-panel-row-player { border-right: 3px solid #58a6ff; }
.scene-panel-row-dragging { opacity: .45; }
.scene-panel-row-drop-before { margin-top: 34px; }
.scene-panel-row-drop-after { margin-bottom: 34px; }
.scene-panel-row-drop-before::before,
.scene-panel-row-drop-after::after { content: ''; position: absolute; left: -1px; right: -1px; height: 24px; border: 1px dashed var(--color-accent-strong); background: rgba(30, 45, 63, .72); box-shadow: inset 0 0 12px rgba(108, 168, 229, .18); pointer-events: none; }
.scene-panel-row-drop-before::before { top: -30px; }
.scene-panel-row-drop-after::after { bottom: -30px; }
.scene-panel-row-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.scene-panel-row-title { display: grid; min-width: 0; gap: 1px; }
.scene-panel-row-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.scene-panel-row-title small { overflow: hidden; color: var(--color-text-muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.scene-panel-open-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.scene-panel-open-actions .control-button { padding: 4px 6px; font-size: .7rem; }
.scene-panel-sort-actions { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4,25px); gap: 2px; }
.scene-panel-sort-actions button { min-width: 0; padding: 2px; font-size: .72rem; line-height: 1.25; }

.audio-panel-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.audio-section { display: grid; grid-template-rows: auto auto auto auto minmax(160px, 1fr); min-width: 0; gap: 9px; padding: 14px; border: 1px solid var(--color-border); background: var(--color-bg-panel-alt); }
.audio-section h3, .audio-section h4, .audio-section p { margin: 0; }
.audio-section h3 { font-size: 1rem; }
.audio-section h4 { color: var(--color-text-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.audio-section-heading { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.audio-section-heading p { margin-top: 4px; color: var(--color-text-muted); font-size: .78rem; }
.audio-library-scroll { min-height: 0; max-height: 34vh; overflow: auto; border: 1px solid var(--color-border); }
.audio-folder summary { padding: 8px 10px; cursor: pointer; color: var(--color-accent-strong); background: #111720; font-size: .8rem; font-weight: 700; }
.audio-file-row, .audio-prepared-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-top: 1px solid var(--color-border); font-size: .82rem; }
.audio-file-row span, .audio-prepared-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-file-row { cursor: grab; }
.audio-library-actions { display: inline-flex; align-items: center; }
.audio-icon-button, .audio-play-button { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 3px 6px; }
.audio-icon-button:hover, .audio-play-button:hover { color: var(--color-accent-strong); }
.audio-prepared { min-height: 74px; padding: 6px; border: 1px dashed var(--color-border-strong); background: #11161d; }
.audio-prepared > p { padding: 18px 8px; text-align: center; color: var(--color-text-muted); font-size: .78rem; }
.audio-prepared-row { grid-template-columns: auto minmax(0, 1fr) auto; border: 0; border-bottom: 1px solid var(--color-border); }
.audio-prepared-row-active { border-left: 3px solid var(--color-accent); background: #1d3148; color: var(--color-accent-strong); }

.player-audio-controls { display: grid; gap: 12px; }
.audio-volume-section { padding: 12px; border: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(110, 168, 254, .08), rgba(17, 23, 31, .72)); }
.audio-volume-section .audio-section-heading { margin-bottom: 12px; }
.player-audio-control { display: grid; grid-template-columns: minmax(62px, auto) 28px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--color-text-muted); font-size: .82rem; }
.player-audio-control button { width: 28px; height: 28px; border: 1px solid var(--color-border); border-radius: 50%; background: #202734; color: var(--color-text); cursor: pointer; }
.player-audio-control button.is-muted { color: var(--color-danger); text-decoration: line-through; }
.player-audio-control input { width: 100%; accent-color: var(--color-accent); }

.signalruf-stack {
  position: fixed;
  z-index: 30;
  left: 16px;
  bottom: 16px;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 8px;
  pointer-events: none;
}

.signalruf {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(110, 168, 254, .55);
  border-radius: 7px;
  background: rgba(13, 19, 27, .96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42);
  animation: signalruf-lifetime var(--signalruf-duration, 3000ms) ease both;
  backdrop-filter: blur(8px);
}

.signalruf-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(110, 168, 254, .16); color: var(--color-accent-strong); font-size: 1.15rem; }
.signalruf-message { margin: 0; color: var(--color-text); font-size: .84rem; line-height: 1.4; }

@keyframes signalruf-lifetime {
  0% { opacity: 0; transform: translateY(8px); }
  10%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}

.tabletop-workspace {
  grid-column: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at top, #1d232d 0%, #11161b 58%);
}

.tabletop-toolbar {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(12, 15, 20, 0.7);
}

.toolbar-chip {
  border: 1px solid var(--color-border-strong);
  padding: 5px 8px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.tabletop-tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tabletop-tool-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 10px;
  font-size: 0.8rem;
  line-height: 1.15;
}

.tabletop-tool-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  pointer-events: none;
}

.ping-tool-wrap { position: relative; }
.ping-color-popover { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; display: grid; grid-template-columns: auto 42px; align-items: center; gap: 10px; min-width: 190px; padding: 10px; border: 1px solid var(--color-border-strong); background: #111821; box-shadow: 0 12px 30px rgba(0, 0, 0, .38); }
.ping-color-popover[hidden] { display: none; }
.ping-color-popover label { color: var(--color-text-muted); font-size: .78rem; }
.ping-color-popover input { width: 42px; height: 30px; padding: 2px; border: 1px solid var(--color-border); background: transparent; cursor: pointer; }
.tabletop-canvas.ping-tool-active { cursor: crosshair; touch-action: none; }
.tabletop-canvas.spray-prop-target-active { cursor: crosshair; touch-action: none; }

.spray-prop-panel { gap: 16px; }
.spray-prop-can, .spray-prop-editor { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--color-border); background: rgba(12, 16, 22, .5); }
.spray-prop-heading, .spray-prop-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spray-prop-heading h4, .spray-prop-editor h4 { margin: 0; font-size: .88rem; }
.spray-prop-entry { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--color-border); background: #171c23; }
.spray-prop-entry img { width: 42px; height: 42px; object-fit: contain; background: #0f1318; }
.spray-prop-entry div { display: grid; min-width: 0; gap: 2px; }
.spray-prop-entry strong, .spray-prop-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spray-prop-entry small, .spray-prop-panel .field small { color: var(--color-text-muted); }
.spray-prop-entry .control-button { padding: 5px 7px; font-size: .72rem; }
.spray-prop-preview { width: 100%; height: 120px; object-fit: contain; border: 1px solid var(--color-border); background: #0f1318; }
.spray-prop-checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 40px; }
.spray-prop-checkbox input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.spray-prop-start { width: 100%; min-height: 42px; }
.spray-prop-save-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.spray-prop-saved-list { display: grid; gap: 7px; }
.spray-prop-saved { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--color-border); background: #171c23; }
.spray-prop-saved-active { border-color: var(--color-accent); }
.spray-prop-saved div { display: grid; min-width: 0; gap: 2px; }
.spray-prop-saved strong, .spray-prop-saved small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spray-prop-saved small { color: var(--color-text-muted); }
.spray-prop-saved .control-button { padding: 5px 7px; font-size: .72rem; }

.tabletop-canvas-frame {
  position: relative;
  min-height: 0;
}

.tabletop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(110, 168, 254, 0.16), transparent 36%),
    linear-gradient(180deg, #131820 0%, #0b0f15 100%);
}

.player-auth-shell {
  background:
    radial-gradient(circle at top, rgba(110, 168, 254, 0.12), transparent 38%),
    linear-gradient(180deg, #111721 0%, #090d12 100%);
}

.auth-panel {
  width: min(100%, 420px);
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(180deg, rgba(24, 30, 38, 0.96) 0%, rgba(14, 18, 24, 0.98) 100%);
  box-shadow: var(--shadow-panel);
}

.auth-eyebrow {
  margin: 0;
  color: var(--color-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-title {
  margin: 0;
  font-size: 1.8rem;
}

.auth-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-error {
  margin: 0;
  color: #ffb0b0;
}

.player-shell {
  position: relative;
  display: block;
  height: 100vh;
  overflow: hidden;
}

.player-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, rgba(16, 22, 31, 0.98) 0%, rgba(9, 13, 18, 0.98) 100%),
    radial-gradient(circle at top, rgba(110, 168, 254, 0.12), transparent 42%);
}

.player-sidebar-header {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 18px 40px 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(11, 15, 21, 0.8);
}

.player-side-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: rgba(16, 22, 30, 0.92);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.player-side-panel-close:hover {
  border-color: rgba(255, 99, 99, 0.6);
  color: #ff6363;
}

.player-sidebar-eyebrow {
  margin: 0;
  color: var(--color-accent-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.player-sidebar-title {
  margin: 0;
  font-size: 1.1rem;
}

.player-token-info-content {
  min-height: 0;
  overflow: auto;
}

.player-token-sidebar-menu,
.player-token-sidebar-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.player-token-sidebar-menu {
  padding-bottom: 0;
}

.player-token-sidebar-menu-item {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  background: rgba(16, 22, 30, 0.92);
  color: var(--color-text-muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-token-sidebar-menu-item-active {
  border-color: rgba(110, 168, 254, 0.4);
  color: var(--color-accent-strong);
}

.player-token-sidebar-empty {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
}

.player-token-sidebar-empty-title,
.player-token-sidebar-empty-text {
  margin: 0;
}

.player-token-sidebar-empty-title {
  font-size: 0.92rem;
}

.player-token-sidebar-empty-text {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.player-token-info-card {
  border: 1px solid var(--color-border);
  background: rgba(16, 21, 29, 0.92);
}

.player-token-info-card[open] {
  border-color: rgba(110, 168, 254, 0.35);
  background: linear-gradient(180deg, rgba(25, 39, 58, 0.48) 0%, rgba(14, 19, 27, 0.96) 100%);
}

.player-token-info-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.player-token-info-summary::-webkit-details-marker {
  display: none;
}

.player-token-info-summary::after {
  content: '>';
  color: var(--color-text-muted);
  transform-origin: center;
  transition: transform 140ms ease, color 140ms ease;
}

.player-token-info-card[open] .player-token-info-summary::after {
  transform: rotate(90deg);
  color: var(--color-accent-strong);
}

.player-token-info-name {
  font-size: 0.92rem;
  font-weight: 600;
}

.player-token-info-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(59, 70, 84, 0.5);
}

.player-token-resource-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(59, 70, 84, 0.5);
}

.player-token-resource-body > .player-token-spells,
.player-token-resource-body > .player-token-attacks,
.player-token-resource-body > .player-token-skills,
.player-token-resource-body > .player-token-inventory {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.player-sheet-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.player-sheet-skill {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 3px 5px;
  border: 1px solid rgba(89, 104, 122, .62);
  border-radius: 3px;
  color: var(--color-text);
  background: #11161d;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.player-sheet-skill:hover,
.player-sheet-skill:focus-visible {
  border-color: var(--color-accent-strong);
  background: #18212c;
}

.player-sheet-skill-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  font-size: .7rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-sheet-skill-rank {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid #718096;
  border-radius: 50%;
}

.player-sheet-skill-rank-proficient { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.player-sheet-skill-rank-expertise { background: #e4b95f; border-color: #e4b95f; box-shadow: 0 0 0 1px #e4b95f; }

.player-sheet-skill-values {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 3px;
}

.player-sheet-skill-values strong { font-size: .76rem; }
.player-sheet-skill-values small { color: var(--color-text-muted); font-size: .57rem; }
.player-token-extra-skills { display: grid; gap: 5px; margin-top: 10px; }
.player-token-extra-skills h5 { margin: 0; color: var(--color-text-muted); font-size: .72rem; }

.player-token-resource-draggable {
  position: relative;
  cursor: grab;
  transition: opacity 120ms ease, transform 120ms ease;
}

.player-token-resource-dragging {
  opacity: .45;
  cursor: grabbing;
}

.player-token-resource-drop-target::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: auto;
  left: 0;
  top: -6px;
  height: 2px;
  background: var(--color-accent-strong);
  box-shadow: 0 0 8px rgba(110, 168, 254, .65);
}

.player-token-resource-drop-target.player-token-resource-drop-after::after {
  top: auto;
  bottom: -6px;
}

.player-token-info-text {
  margin: 12px 0 0;
  color: #d7dee8;
  font-size: 0.84rem;
  line-height: 1.6;
  word-break: break-word;
}

.player-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  min-height: 0;
  background: radial-gradient(circle at top, #18202b 0%, #0b1016 62%);
}

.player-panel-stack { position: absolute; z-index: 8; inset: var(--player-header-height, 65px) 0 var(--player-status-height, 33px) auto; display: flex; flex-direction: row-reverse; align-items: stretch; pointer-events: none; }
.player-side-panel { display: none; width: clamp(280px, 24vw, 360px); min-width: 0; min-height: 0; overflow: auto; pointer-events: auto; border-left: 1px solid var(--color-border); background: linear-gradient(180deg, rgba(16, 22, 31, .99), rgba(9, 13, 18, .99)); box-shadow: -18px 0 40px rgba(0, 0, 0, .28); }
.player-side-panel-open { display: block; }
.player-side-panel .roll-panel-content { padding: 12px; }
.player-settings-section { padding: 16px; }
.player-settings-section h3, .player-settings-section p { margin: 0; }
.player-settings-section h3 { font-size: .95rem; }
.player-settings-section p { margin: 5px 0 16px; color: var(--color-text-muted); font-size: .8rem; line-height: 1.45; }

.player-tabletop-workspace {
  grid-template-rows: 1fr;
}

.player-activity-bar {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(12, 16, 22, 0.92);
  transition: background 140ms ease, border-color 140ms ease;
}

.player-ping-tool-button { width:100%; border-color: color-mix(in srgb, var(--ping-color, #ff4d6d) 65%, var(--color-border)); }
.player-ping-tool-button.control-button-active { color: #fff; background: color-mix(in srgb, var(--ping-color, #ff4d6d) 42%, #151b23); box-shadow: 0 0 0 1px var(--ping-color, #ff4d6d), 0 0 16px color-mix(in srgb, var(--ping-color, #ff4d6d) 35%, transparent); }

.player-activity-bar-active {
  background: rgba(24, 88, 45, 0.92);
  border-color: rgba(82, 194, 112, 0.4);
}

.player-activity-title,
.player-activity-detail {
  margin: 0;
}

.player-activity-title {
  font-size: 0.95rem;
}

.player-activity-detail {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.player-activity-bar-active .player-activity-detail {
  color: #d9ffe3;
}

.player-status {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  background: rgba(9, 12, 17, 0.92);
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .player-side-panel { width: min(320px, calc(100vw - 24px)); }
  .player-activity-bar { align-items: flex-start; }
}

@media (max-width: 420px) {
  .player-token-sidebar-list { padding: 10px; }
  .player-token-resource-body { padding-inline: 10px; }
  .player-attack-stats, .player-attack-actions { grid-template-columns: minmax(0, 1fr); }
  .player-attack-stat-wide { grid-column: auto; }
}

.app-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 20;
}

.app-dialog-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.app-dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(8px);
}

.app-dialog-surface {
  position: relative;
  width: min(100%, 440px);
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(180deg, rgba(31, 37, 46, 0.98) 0%, rgba(18, 22, 29, 0.98) 100%);
  box-shadow: var(--shadow-panel);
}

.app-dialog-form {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.app-dialog-header,
.app-dialog-body,
.app-dialog-actions,
.app-dialog-fields {
  display: grid;
  gap: 12px;
}

.app-dialog-title {
  margin: 0;
}

.app-dialog-message,
.app-dialog-error {
  margin: 0;
  line-height: 1.5;
}

.app-dialog-error {
  color: #ffb0b0;
}

.app-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-dialog-field {
  gap: 6px;
}

.asset-group {
  margin-bottom: 18px;
}

.asset-tree,
.asset-tree-branch {
  display: grid;
  gap: 8px;
}

.player-list-content {
  padding: 16px;
}

.player-list {
  display: grid;
  gap: 18px;
}

.player-list-group {
  display: grid;
  gap: 12px;
}

.player-list-heading {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.player-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-border);
  background: #151b23;
}

.player-card-active {
  border-left: 5px solid #72df98;
  border-color: rgba(82, 194, 112, 0.46);
  background: linear-gradient(180deg, rgba(24, 88, 45, 0.28) 0%, rgba(17, 31, 22, 0.94) 100%);
}

.player-card-offline {
  border-style: dashed;
  opacity: 0.78;
}

.player-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.player-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-color-control { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: .78rem; }
.player-color-control input { width: 38px; height: 28px; padding: 2px; border: 1px solid var(--color-border); background: transparent; cursor: pointer; }

.player-card-title,
.player-card-subtitle {
  margin: 0;
}

.player-card-title {
  font-size: 0.95rem;
}

.player-card-subtitle {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.player-token-list {
  display: grid;
  gap: 8px;
}

.player-token-adder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.player-token-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  background: rgba(15, 20, 27, 0.88);
}

.player-token-item-assigned {
  border-color: rgba(82, 194, 112, 0.35);
}

.player-token-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.player-token-labels {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.player-token-focus {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.player-token-focus:hover .player-token-name,
.player-token-focus:focus-visible .player-token-name {
  color: var(--color-accent-strong);
}

.player-token-focus:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

.player-token-name {
  font-size: 0.88rem;
}

.player-token-meta {
  color: var(--color-text-muted);
  font-size: 0.76rem;
  word-break: break-word;
}

.player-token-remove {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border-strong);
  background: #20161a;
  color: #f0c5c5;
  cursor: pointer;
}

.player-token-remove:hover,
.player-token-remove:focus-visible {
  border-color: var(--color-danger);
  color: #ffd2d2;
}

.asset-tree-node {
  border-left: 1px solid rgba(59, 70, 84, 0.55);
  padding-left: 10px;
}

.asset-library-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: -16px -16px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(22, 27, 34, 0.96);
}

.asset-kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.asset-search-label, .asset-search { width: 100%; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.asset-favorites { margin-bottom: 14px; border-left-color: #b78b3a; }
.asset-favorites > .asset-tree-summary { color: #f2c66d; }

.asset-tree-node[open] > .asset-tree-summary {
  color: var(--color-accent-strong);
}

.asset-tree-summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.asset-tree-summary::-webkit-details-marker {
  display: none;
}

.asset-tree-summary::before {
  content: '>';
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  color: var(--color-text-muted);
  transform-origin: center;
}

.asset-tree-node[open] > .asset-tree-summary::before {
  transform: rotate(90deg);
}

.asset-group-title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--color-accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.asset-list {
  display: grid;
  gap: 10px;
}

.asset-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--color-border);
  background: #171c23;
  box-shadow: var(--shadow-panel);
}

.asset-preview {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--color-border-strong);
  background: #0f1318;
}

.asset-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.asset-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }

.asset-favorite-button {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border-strong);
  background: #11161d;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
}

.asset-favorite-button:hover,
.asset-favorite-button:focus-visible,
.asset-favorite-button-active { border-color: #b78b3a; color: #f2c66d; }
.asset-place-button { justify-self: start; }

.asset-name {
  margin: 0;
  font-size: 0.95rem;
}

.asset-card-labels {
  display: grid;
  gap: 2px;
}

.field-span-two {
  grid-column: 1 / -1;
}

.asset-actions,
.panel-actions,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-actions > .control-select,
.inline-actions > .control-input,
.inline-actions > .scene-selector {
  flex: 1 1 220px;
}

.scene-move-actions > .control-select {
  flex: 0 1 calc(50% - 4px);
  min-width: 0;
}

.scene-move-actions > .control-button {
  flex: 0 0 auto;
}

.wall-color-actions {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
}

.wall-color-actions > .control-input {
  min-width: 0;
}

.wall-color-actions > .wall-color-picker {
  padding: 4px;
}

.inspector-section {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.inspector-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.field-grid {
  display: grid;
  gap: 10px;
}

.field-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-label {
  display: grid;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.control-state-button {
  width: 100%;
  min-height: 35px;
  text-align: left;
}

.control-state-button[aria-pressed="false"] {
  color: var(--color-text-muted);
}

.inspector-schema-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.inspector-shortcut-hint {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.inspector-schema-divider {
  min-height: 1px;
  border-bottom: 1px solid var(--color-border);
  margin: 2px 0;
}

.empty-state {
  padding: 12px;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
}

.scene-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.inspector-foldout {
  border: 1px solid var(--color-border);
  background: #151a22;
}

.inspector-foldout-summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--color-text);
  list-style: none;
}

.inspector-foldout-summary::-webkit-details-marker {
  display: none;
}

.inspector-foldout-summary::before {
  content: '>';
  display: inline-block;
  width: 12px;
  margin-right: 8px;
  color: var(--color-text-muted);
}

.inspector-foldout[open] .inspector-foldout-summary::before {
  transform: rotate(90deg);
}

.inspector-foldout-content {
  display: grid;
  gap: 14px;
  padding: 0 12px 12px;
}

.token-inspector-group {
  min-width: 0;
}

.token-inspector-group + .token-inspector-group {
  margin-top: 2px;
}

.scene-object-group {
  margin: 0;
}

.scene-object-group-title {
  color: var(--color-accent-strong);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.scene-object-group-content {
  gap: 8px;
}

.scene-object-list {
  display: grid;
  gap: 8px;
}

.scene-object-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border-strong);
  background: #10151b;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.scene-object-button:hover,
.scene-object-button:focus-visible {
  border-color: var(--color-accent);
}

.scene-object-name {
  font-size: 0.9rem;
}

.scene-object-meta,
.scene-object-empty {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

@media (max-width: 1280px) {
  .app-shell { --asset-panel-width: 280px; }

  .app-topbar {
    grid-template-columns: 1fr;
  }

  .topbar-controls-block {
    gap: 12px;
  }

  .topbar-project-block {
    justify-content: flex-end;
  }

  .app-main {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

}

.multi-token-list { margin-top: 4px; }

.player-activity-copy { min-width: 0; }
.player-topbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.player-token-hp {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.player-token-hp-values {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.player-token-hp-values strong { color: var(--color-text); }

.token-hp-bar {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(8, 11, 15, 0.9);
  border-radius: 3px;
  background: #8f2530;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.token-hp-bar > span {
  display: block;
  height: 100%;
  background: #35a853;
  transition: width 160ms ease;
}

@media (max-width: 960px) {
  .app-shell {
    --player-panel-width: min(320px, calc(100vw - 24px));
    --token-panel-width: min(320px, calc(100vw - 24px));
    --asset-panel-width: min(260px, calc(100vw - 84px));
    --audio-panel-width: min(320px, calc(100vw - 24px));
  }

  .topbar-controls-block,
  .topbar-scene-block,
  .topbar-project-block {
    width: 100%;
  }

  .topbar-project-block {
    justify-content: flex-start;
  }

  .topbar-project-actions-right {
    justify-content: flex-start;
  }

  .audio-panel-content { grid-template-columns: 1fr; }

  .app-main {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 32vw, 280px);
    grid-template-rows: 1fr;
  }

  .asset-library-panel,
  .inspector-panel {
    border-left: 0;
    border-right: 0;
  }

  .tabletop-workspace {
    min-height: 55vh;
  }

}
.puzzle-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: clamp(10px, 3vw, 36px);
  background: rgba(5, 8, 12, 0.88);
}

.puzzle-overlay-panel {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid #526172;
  border-radius: 14px;
  background: #10151c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}

.puzzle-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #18212b;
}

.puzzle-overlay-header div { display: grid; gap: 2px; }
.puzzle-overlay-header span { color: #9eb0c3; font-size: 0.82rem; }
.puzzle-frame { width: 100%; height: 100%; border: 0; background: #10151c; }
.puzzle-parameter-list, .puzzle-status-card { display: grid; gap: 10px; }
.puzzle-status-card > span { color: #9eb0c3; font-size: 0.85rem; }
[data-lake-bake-feedback][data-status="working"] { color: #f4d35e; }
[data-lake-bake-feedback][data-status="success"] { color: #75d69c; }
[data-lake-bake-feedback][data-status="error"] { color: #ff8b8b; }

.token-list-type-group > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.token-list-type-group > summary span { color: var(--color-text-muted); margin-left: 6px; }
.token-list-type-content { display: grid; gap: 7px; padding-bottom: 8px; }

.panel-resizable { overflow: hidden; }
.panel-resize-content { position: absolute; inset: 0 8px 0 0; overflow: auto; }
.panel-resizable-right > .panel-resize-content { inset: 0 0 0 8px; }
.panel-resize-handle { position: absolute; z-index: 12; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; touch-action: none; user-select: none; background: var(--color-border); }
.panel-resize-handle-right { right: auto; left: 0; }
.panel-resize-handle:hover, .panel-resize-handle:focus-visible { background: var(--color-accent); opacity: .65; }

.spell-rank-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
.spell-rank-navigation > div { display: grid; gap: 4px; min-width: 0; text-align: center; }
.spell-rank-navigation span { color: var(--color-text-muted); font-size: 12px; }
.spell-rank-navigation > button { flex-shrink: 0; }
.player-attack-notes, .item-instance-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.shop-editor { display: flex; flex-direction: column; gap: 12px; }
.shop-editor h3 { margin: 8px 0 0; }
.shop-editor .empty-state { margin: 0; padding: 10px; }
.shop-editor .shop-toggle { display: flex; align-items: center; gap: 8px; }
.shop-toggle input { width: auto; margin: 0; }
.shop-editor[hidden], .inspector-content[hidden] { display: none; }
.shop-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-give { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.shop-stock-entry { padding: 12px; border: 1px solid #465365; border-radius: 8px; margin-bottom: 10px; display: grid; gap: 10px; }
.shop-catalog { display: grid; gap: 6px; max-height: 280px; overflow: auto; }
.shop-catalog .control-button { text-align: left; white-space: normal; }
.shop-overlay { width: min(720px, calc(100vw - 32px)); max-height: 85vh; padding: 0; color: #e6edf5; background: #19222e; border: 1px solid #526278; border-radius: 12px; box-shadow: 0 20px 80px #0009; }
.shop-overlay::backdrop { background: #0008; }
.shop-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #465365; }
.shop-overlay-header h2 { margin: 0; overflow-wrap: anywhere; }
.shop-overlay-body { max-height: 65vh; overflow: auto; padding: 20px; }
.shop-offer { display: flex; justify-content: space-between; gap: 20px; width: 100%; padding: 14px; margin-bottom: 8px; border: 1px solid #465365; border-radius: 8px; background: #243142; color: inherit; text-align: left; cursor: pointer; }
.shop-offer:hover { background: #31445b; }
.shop-offer strong, .shop-offer span { overflow-wrap: anywhere; }

/* Compact token combat lists in player and DM panels. */
.player-token-spells, .player-token-attacks { gap: 3px; margin-top: 6px; padding-top: 5px; }
.inspector-token-attacks { margin-top: 0; padding-top: 0; }
.token-spell-assignment-list, .player-token-spell-row { gap: 3px; }
.token-spell-assignment-list > .token-resource-assignment { gap: 2px; padding: 3px; }
.spell-card.spell-card-compact { display: flex; align-items: flex-start; gap: 4px; padding: 3px 4px; }
.spell-card-compact .spell-card-main { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.spell-card-compact .spell-card-header, .spell-card-compact .spell-card-header > div,
.spell-card-compact .spell-card-stats, .spell-card-compact .spell-card-actions { display: contents; }
.spell-card-compact .spell-card-header h3 { font-size: .8rem; line-height: 1.2; overflow-wrap: anywhere; }
.spell-card-compact .library-english-name { display: inline; margin: 0; font-size: .65rem; }
.spell-card-compact .spell-card-stats > * { color: var(--color-text-muted); font-size: .7rem; }
.spell-card-compact [data-spell-description] { flex-basis: 100%; order: 10; margin: 2px 0 0; font-size: .75rem; }
.spell-card-compact .spell-hit-grid-compact { grid-template-columns: repeat(7, 3px); grid-template-rows: repeat(7, 3px); gap: 1px; }
.player-token-spells > .spell-card-actions { gap: 3px; margin: 0; align-items: center; }
.token-spell-management { margin: 0; font-size: .7rem; color: var(--color-text-muted); }
.token-spell-management summary { cursor: pointer; width: max-content; }
.token-spell-management .spell-daily-editor { gap: 3px; margin-top: 2px; }
.token-spell-management .token-resource-actions { gap: 3px; margin-top: 2px; }
.token-spell-assignment-list .token-resource-source { margin: 0; font-size: .68rem; }
.player-attack-card { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 3px 4px; }
.player-attack-card-header h3 { font-size: .8rem; line-height: 1.2; }
.player-attack-stats { display: contents; }
.player-attack-stat { display: flex; align-items: baseline; gap: 3px; padding: 0; border: 0; background: none; }
.player-attack-stat dt, .player-attack-stat dd { margin: 0; font-size: .7rem; line-height: 1.2; }
.player-attack-actions { display: flex; flex-wrap: wrap; gap: 3px; }
.player-attack-actions .control-button { width: auto; }
.player-attack-card .attack-description { display: contents; }
.player-attack-notes { flex-basis: 100%; order: 10; font-size: .75rem; }
.player-attack-notes[hidden] { display: none; }
.spell-card-compact .control-button, .spell-card-compact .spell-description-toggle,
.player-attack-card .control-button, .token-spell-management .control-button { min-height: 24px; padding: 2px 5px; margin: 0; font-size: .7rem; line-height: 1.2; }

.token-hp-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 4px; }
.token-hp-actions .control-input { min-width: 0; width: 100%; }

.spell-history-panel { position: absolute; inset: 0 auto 0 0; z-index: 4; width: var(--roll-panel-width); transform: translateX(-100%); transition: transform 180ms ease; overflow: auto; box-shadow: none; }
.app-shell.spell-history-panel-open { --side-spell-history-offset: var(--roll-panel-width); }
.app-shell.spell-history-panel-open .spell-history-panel { transform: translateX(calc(var(--side-player-offset) + var(--side-roll-offset) + var(--side-audio-offset) + var(--side-windows-offset) + var(--side-scene-offset) + var(--side-token-offset))); }
.spell-history-counter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spell-history-entries { display: grid; gap: 10px; }
.spell-history-entry { border-bottom: 1px solid var(--color-border); padding-bottom: 10px; overflow-wrap: anywhere; }
.spell-history-entry time { display: block; color: var(--color-text-muted); font-size: .8rem; }
#shared-spell-counter { padding: 6px 10px; font-variant-numeric: tabular-nums; }

.ping-selection-panel[hidden] { display: none; }
.ping-symbol-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ping-selection-panel p { font-size: .8rem; color: var(--color-text-muted); }
.ping-inspector-color { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.ping-inspector-color[hidden] { display: none; }

.ping-symbol-options button { display: flex; align-items: center; gap: 8px; }
.ping-symbol-options svg { flex-shrink: 0; }
#player-ping-content .ping-symbol-options { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; }
#player-ping-content .ping-symbol-options button { justify-content:center; height:52px; padding:0; border-radius:8px; font-size:26px; font-weight:600; line-height:1; }
#player-ping-content .ping-symbol-options svg { width:26px; height:26px; }

/* Reusable overlay windows. Application content and expanded layouts stay separate. */
.party-inventory { background: #2b1d14; color: #f1e3cf; }
.ability-content { padding: 12px; overflow: auto; min-height: 0; font-size: .85rem; }
.ability-content p { color: #d6bea2; line-height: 1.45; }
.ability-content h3 { font-size: .95rem; margin: 16px 0 10px; }
.scrap-table { position: relative; min-height: 330px; overflow: hidden; border: 2px solid #71553d; border-radius: 10px; background: radial-gradient(circle at 50% 35%, #60452f, #2c2018); touch-action: none; }
.scrap-part, .scrap-preview img { position: absolute; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 4px #0008); }
.scrap-part { cursor: grab; }
.scrap-part.is-selected { outline: 2px solid #f1c36f; outline-offset: 2px; filter: drop-shadow(0 0 7px #f1c36f); }
.scrap-selection-box { position: absolute; border: 1px solid #f1c36f; background: #f1c36f26; pointer-events: none; z-index: 10000; }
.scrap-inventory { padding: 12px; border: 1px solid #755239; border-radius: 8px; margin: 12px 0; background: #241810; }
.scrap-pick { display: inline-flex; align-items: center; gap: 8px; margin: 4px; padding: 6px 10px; min-height: 38px; max-width: 210px; background: #4b3425; color: #f1e3cf; border: 1px solid #8d6748; border-radius: 6px; font: inherit; cursor: pointer; }
.scrap-pick:hover:not(:disabled) { background: #65472f; border-color: #bd9163; }
.scrap-pick:disabled { opacity: .45; cursor: default; }
.scrap-pick img { width: 42px; height: 42px; object-fit: contain; }
.scrap-preview { position: relative; overflow: hidden; max-width: 440px; border: 1px solid #705944; background: #0002; }
.scrap-submission { padding: 12px; margin: 12px 0; border: 1px solid #755239; border-radius: 8px; background: #241810; }
.scrap-workshop .ability-editor .ability-row > .control-select { flex: 1 1 180px; }
.scrap-workshop .ability-editor .ability-row > .control-input { flex: 0 0 82px; }
.scrap-workshop textarea.control-input { min-height: 76px; resize: vertical; }
.scrap-workspace { min-width: 0; }
.scrap-layers { display: none; min-width: 230px; padding: 0 0 0 12px; border-left: 1px solid #755239; }
.scrap-layer { display: flex; align-items: center; gap: 8px; padding: 7px; margin: 5px 0; border: 1px solid #654b35; border-radius: 6px; background: #302219; cursor: grab; }
.scrap-layer.is-selected { border-color: #bd9163; background: #563b28; }
.scrap-layer img { width: 34px; height: 34px; object-fit: contain; }
.scrap-workshop:where(.overlay-window-expanded *) { min-width: 0; }
.overlay-window-expanded .scrap-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
.overlay-window-expanded .scrap-layers { display: block; }
.ability-content .field-label { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; min-width: 0; }
.ability-content .control-input, .ability-content .control-select { width: 100%; min-width: 0; }
.ability-toggle { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.ability-tabs, .ability-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ability-tabs { position: sticky; top: -12px; padding: 8px 0; background: #2b1d14; z-index: 1; }
.ability-tabs [aria-pressed="true"] { background: #755239; border-color: #bd9163; }
.ability-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid #654b35; }
.ability-row > span { flex: 1 1 150px; overflow-wrap: anywhere; }
.ability-row small { display: block; color: #c9af91; margin-top: 5px; }
.ability-row .field-label { flex: 0 1 88px; margin: 0; }
.ability-picker { padding: 4px 0; }
.ability-picker .field-label { margin: 6px 0; }
.ability-editor { border: 1px solid #755239; border-radius: 8px; padding: 12px; margin-top: 12px; }
.ability-actions { margin-top: 16px; }
.petventure-needs { display: grid; gap: 7px; }
.petventure-need > span { display: flex; justify-content: space-between; margin-bottom: 3px; }
.petventure-track { position: relative; height: 12px; border: 1px solid #927056; border-radius: 8px; background: linear-gradient(to right, #244f32 0 var(--pet-threshold), #140e0b var(--pet-threshold) 100%); overflow: hidden; }
.petventure-track i { display: block; height: 100%; background: #286b3c; }
.petventure-track:not(.is-low)::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--pet-threshold); width: calc(var(--pet-amount) - var(--pet-threshold)); background: #b4e775; }
.petventure-track.is-low i { background: #c94540; }
.petventure-stage { position: relative; height: 125px; display: grid; place-items: center; overflow: hidden; }
.petventure-pet-button { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.petventure-pet-button:focus-visible { outline: 2px solid #b4e775; outline-offset: 3px; border-radius: 6px; }
.petventure-sprite { width: 86px; height: 86px; object-fit: contain; image-rendering: pixelated; transform-origin: center bottom; }
.petventure-idle { animation: pet-idle 2.8s ease-in-out infinite; }
.petventure-pat { animation: pet-pat .7s ease-in-out 1; }
.petventure-satiety { animation: pet-feed 1.1s ease-in-out infinite; }
.petventure-cleanliness { animation: pet-care 1.1s ease-in-out infinite; }
.petventure-happiness { animation: pet-play 2s ease-in-out infinite; }
.petventure-emote { position: absolute; width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.petventure-cookie { top: 0; left: calc(50% + var(--pet-x)); animation: pet-cookie-rain 1.55s linear infinite; }
.petventure-bubble { bottom: 0; left: calc(50% + var(--pet-x)); animation: pet-bubble-rise 1.8s ease-out infinite; }
.petventure-ball { top: 50%; left: 50%; animation: pet-ball-pass 2s linear infinite; }
.petventure-reaction { position: absolute; inset: 0; pointer-events: none; }
.petventure-reaction-emote { bottom: 4px; left: calc(50% + var(--pet-x)); animation: pet-reaction-rise 1.15s ease-out both; }
.petventure-status { text-align: center; margin: 2px 0 10px; }
.petventure-care { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.petventure-offer { margin-top: 14px; }
.petventure-offer p { margin: 5px 0; }
.petventure-adventure { position: relative; isolation: isolate; width: 100%; min-height: 40px; border: 1px solid #927056; border-radius: 6px; background: #30241c; color: #f1e3cf; font-weight: 700; overflow: hidden; }
.petventure-adventure.available::before { content: ''; position: absolute; z-index: -1; inset: 0; width: var(--offer-progress); background: #8b5b34; transition: width .25s linear; }
.petventure-adventure:disabled { cursor: default; }
.petventure-result { padding: 8px; border: 1px solid #927056; border-radius: 6px; }
.petventure-dm-pet, .petventure-assignment { display: grid; gap: 5px; padding: 10px 0; border-bottom: 1px solid #654b35; }
.petventure-dm-pet small { color: #c9af91; }
.petventure-dm-pet .field-label, .petventure-assignment .field-label { margin: 3px 0; }
.petventure-result-row { display: flex; align-items: end; gap: 6px; margin-bottom: 7px; }
.petventure-result-row > .control-select { min-width: 0; flex: 1; }
.petventure-result-row .field-label { width: 80px; margin: 0; }
.petventure-result-row > span { flex: 1; }
.petventure-repeat { display: flex; gap: 6px; align-items: center; }
.petventure-history-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding: 9px 0; border-bottom: 1px solid #654b35; }
.petventure-history-entry > strong, .petventure-history-entry > span:nth-child(3) { grid-column: 1; overflow-wrap: anywhere; }
.petventure-history-time { grid-column: 1 / -1; color: #c9af91; font-size: .72rem; }
.petventure-history-result { grid-column: 2; grid-row: 2 / 4; align-self: center; color: #c9af91; text-align: right; }
.petventure-history-result.found { color: #bddc91; font-weight: 700; }
.petventure-settings { display: grid; gap: 10px; padding: 10px 0 16px; border-bottom: 1px solid #654b35; }
.petventure-settings h3 { margin: 0; }
.petventure-settings fieldset { min-width: 0; margin: 0; padding: 8px; border: 1px solid #755239; border-radius: 6px; }
.petventure-settings legend { padding: 0 5px; font-weight: 700; }
.petventure-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.petventure-settings-grid .field-label { min-width: 0; }
@media (max-width: 380px) { .petventure-settings-grid { grid-template-columns: 1fr; } }
@keyframes pet-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pet-pat { 0%,100% { transform: translateX(0); } 18%,54% { transform: translateX(-7px); } 36%,72% { transform: translateX(7px); } }
@keyframes pet-feed { 0%,55%,100% { transform: translateX(0); } 12%,36% { transform: translateX(-8px); } 24%,48% { transform: translateX(8px); } }
@keyframes pet-care { 0%,55%,100% { transform: translateY(0); } 12%,36% { transform: translateY(-9px); } 24%,48% { transform: translateY(5px); } }
@keyframes pet-play { 0%,100% { transform: translate(0,0); } 18% { transform: translate(-18px,0); } 30% { transform: translate(-18px,-15px); } 42% { transform: translate(-18px,0); } 65% { transform: translate(18px,0); } 77% { transform: translate(18px,-15px); } 89% { transform: translate(18px,0); } }
@keyframes pet-cookie-rain { 0% { transform: translate(-50%, -24px) rotate(-12deg); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translate(-50%, 112px) rotate(18deg); opacity: 0; } }
@keyframes pet-bubble-rise { 0% { transform: translate(-50%, 24px) scale(.7); opacity: 0; } 14% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(calc(-50% + 9px), -118px) scale(1.1); opacity: 0; } }
@keyframes pet-ball-pass { 0% { transform: translate(-28px, -76px); opacity: 0; } 4% { opacity: 1; } 18% { transform: translate(-28px, -25px); opacity: 1; } 30% { transform: translate(-28px, -76px); opacity: 1; } 40%,44% { transform: translate(-28px, -76px); opacity: 0; } 45% { transform: translate(8px, -76px); opacity: 0; } 49% { opacity: 1; } 65% { transform: translate(8px, -25px); opacity: 1; } 77% { transform: translate(8px, -76px); opacity: 1; } 89%,100% { transform: translate(8px, -76px); opacity: 0; } }
@keyframes pet-reaction-rise { 0% { transform: translate(-50%, 8px) scale(.7); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -100px) scale(1.15); opacity: 0; } }
.coin-detector-player { overflow: hidden; display: flex; flex-direction: column; }
.coin-ammo { flex: 0 0 auto; display: grid; gap: 5px; padding: 2px 8px 8px; }
.coin-charge-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 13px; }
.coin-charge-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #7b2929; background: #571d1d; box-shadow: inset 0 1px 2px #0008; }
.coin-charge-dots i.charged { border-color: #70a95e; background: #55a146; box-shadow: 0 0 5px #69c65399, inset 0 1px 2px #fff4; }
.coin-charge-track { height: 7px; overflow: hidden; border: 1px solid #76583f; border-radius: 5px; background: #1b120d; }
.coin-charge-track > i { display: block; height: 100%; background: linear-gradient(90deg, #668f45, #9ac861); transition: width .25s linear; }
.coin-street { position: relative; flex: 1 1 200px; min-height: 70px; overflow: hidden; border: 2px solid #31482d; border-radius: 8px; background: linear-gradient(135deg, #263d24, #35532f 48%, #294528); isolation: isolate; }
.coin-road { position: absolute; container-type: size; left: 0; right: 0; top: 50%; height: min(200px, 100%); translate: 0 -50%; overflow: hidden; background: linear-gradient(175deg, #493326, #624632 52%, #422d22); box-shadow: inset 0 8px 18px #1b100b66, inset 0 -8px 18px #1b100b66; }
.coin-walker { position: absolute; z-index: 2; left: -10%; top: var(--coin-start-y); width: clamp(22px, 7cqh, 72px); height: auto; padding: 0; border: 0; background: none; cursor: pointer; animation: coin-cross var(--coin-duration) linear var(--coin-delay) both; transform-origin: center bottom; }
.overlay-window-expanded .coin-detector-player .coin-walker { width: clamp(44px, 14cqh, 144px); }
.coin-walker::before { content: ''; position: absolute; inset: -12px -14px; border-radius: 14px; }
.coin-walker:disabled { opacity: 1; cursor: default; }
.coin-walker.coin-from-right { animation-direction: reverse; }
.coin-walker:focus-visible { outline: 2px solid #ffe49a; outline-offset: 3px; }
.coin-bob { position: relative; display: block; animation: coin-bob 2.4s ease-in-out var(--coin-bob-delay, 0s) infinite; transform-origin: center bottom; }
.coin-facing-left { transform: scaleX(-1); }
.coin-person-sprite { position: relative; display: inline-flex; flex-direction: column; width: 100%; height: auto; vertical-align: bottom; }
.coin-sprite-part { position: relative; display: block; flex: 0 0 auto; width: 100%; overflow: hidden; }
.coin-sprite-part img { position: absolute; left: 0; width: 100%; max-width: none; image-rendering: pixelated; pointer-events: none; }
.coin-preview-sprite { flex: 0 0 40px; width: 40px; height: auto; border: 1px solid #755239; background: #8c7354; }
.ability-row > .coin-preview-sprite { flex: 0 0 28px; width: 28px; height: auto; }
.coin-emote { position: absolute; z-index: 5; left: 30%; bottom: 72%; width: 42%; image-rendering: pixelated; animation: coin-emote-rise 1.15s ease-out infinite; }
.coin-sprite-editor { display: grid; grid-template-columns: 76px 1fr; gap: 8px 15px; align-items: center; }
.coin-sprite-editor > .coin-preview-sprite { grid-row: 1 / 4; width: 48px; height: auto; }
.coin-sprite-editor > div { display: grid; grid-template-columns: 1fr 42px 42px; gap: 5px; align-items: center; }
.coin-range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coin-range { min-width: 0; padding: 7px; border: 1px solid #755239; border-radius: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coin-range legend { grid-column: 1 / -1; }
.coin-range .field-label { margin: 4px 0; }
.coin-player-settings > .field-label { flex-basis: 105px; }
.coin-totals { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 7px 4px 0; color: #cdb89e; font-size: .78rem; }
.coin-totals strong { color: #f2dfc3; }
.coin-totals .control-button { min-height: 26px; padding: 3px 8px; font-size: .72rem; }
@media (max-width: 470px) { .coin-range-grid { grid-template-columns: 1fr; } }
@keyframes coin-cross { from { left: -10%; top: var(--coin-start-y); } to { left: 105%; top: var(--coin-end-y); } }
@keyframes coin-bob { 0%,100% { rotate: -10deg; } 25%,75% { rotate: 10deg; } 50% { rotate: -10deg; } }
@keyframes coin-emote-rise { 0% { transform: translateY(10px) scale(.7); opacity: 0; } 18%,72% { opacity: 1; } 100% { transform: translateY(-55px) scale(1.15); opacity: 0; } }
.coin-result-float { position: absolute; z-index: 7; left: 50%; bottom: 85%; width: max-content; max-width: 130px; color: #f4e3c5; font-size: clamp(.65rem, 7cqh, .95rem); text-shadow: 0 2px 2px #000, 0 0 5px #000; pointer-events: none; animation: coin-result-float 1.8s ease-out both; }
.coin-result-float.success { color: #d6ef9e; }
.coin-result-float.failure { color: #efaaa0; }
@keyframes coin-result-float { from { transform: translate(-50%, 8px) scale(.8); opacity: 0; } 15%,70% { opacity: 1; } to { transform: translate(-50%, -70px) scale(1.08); opacity: 0; } }
.party-inventory-content { min-height: 0; overflow: auto; padding: 8px 8px 20px; font-size: .8rem; }
.party-inventory-content > p { margin: 0 0 7px; color: #c9af91; font-size: .72rem; }
.party-inventory-content h3 { margin: 9px 0 4px; font-size: .85rem; }
.party-inventory-currencies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.party-inventory input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.party-inventory input[type="number"]::-webkit-inner-spin-button,
.party-inventory input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.party-inventory-item, .party-inventory-add { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 6px; align-items: start; margin-top: 5px; padding: 6px; border: 1px solid #64472f; border-radius: 4px; background: #342318; }
.party-inventory-stepper { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; gap: 2px; }
.party-inventory-stepper button { padding: 0; border: 1px solid #785539; border-radius: 3px; background: #513824; color: #f1e3cf; cursor: pointer; font-size: .85rem; }
.party-inventory-stepper button:hover { background: #6a4930; }
.party-inventory-stepper .control-input { text-align: center; padding-inline: 2px; }
.party-inventory .field-label { display: grid; min-width: 0; gap: 2px; margin: 0; color: #d2b998; font-size: .68rem; line-height: 1.2; }
.party-inventory-notes { grid-column: 1 / -1; }
.party-inventory-quantity { text-align: right; color: #dcc39f; font-variant-numeric: tabular-nums; }
.party-inventory-item p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.party-inventory-item strong { overflow-wrap: anywhere; }
.party-inventory .control-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 0; padding: 3px 5px; font-size: .78rem; line-height: 1.25; background: #21170f; color: #f1e3cf; border: 1px solid #755437; border-radius: 3px; }
.party-inventory .control-input:focus { outline: 1px solid #c99a59; outline-offset: 1px; }
.party-inventory .control-input[readonly] { background: #342318; border-color: #64472f; }
.party-inventory .control-button { grid-column: 1 / -1; justify-self: end; min-height: 0; padding: 3px 7px; font-size: .72rem; line-height: 1.2; background: #513824; color: #f1e3cf; border-color: #785539; }
.party-inventory .petventure-care > .control-button { grid-column: auto; justify-self: stretch; min-width: 0; white-space: nowrap; }
.party-inventory textarea.control-input { min-height: 36px; resize: vertical; }
.dm-settings-panel { position: absolute; inset: 0 0 0 auto; z-index: 30; width: min(360px, 100%); overflow-y: auto; box-shadow: -8px 0 24px #0006; }
.dm-settings-panel[hidden] { display: none; }
.dm-settings-panel .player-settings-section { display: grid; gap: 12px; padding: 16px; }
.overlay-window { position:absolute; box-sizing:border-box; overflow:hidden; background:#171c24; color:#eee; border:1px solid #697383; border-radius:9px; box-shadow:0 10px 30px #0008; }
.overlay-window[hidden], .overlay-window [hidden] { display:none !important; }
.overlay-window.overlay-window-floating { left:var(--overlay-x, 12px); top:var(--overlay-y, 12px); width:min(var(--overlay-width, 340px), max(0px, calc(100% - 2 * var(--overlay-margin, 12px)))); height:min(var(--overlay-height, 240px), max(0px, calc(100% - 2 * var(--overlay-margin, 12px)))); }
.overlay-window-header { display:flex; align-items:center; gap:4px; }
/* Shared overlay layer bands: lower windows < side menus < upper windows. */
.app-main > .app-panel, .player-panel-stack { z-index: 1000; }
.app-main > .dm-settings-panel { z-index: 1200; }
.overlay-window .overlay-window-header .overlay-window-layer[aria-pressed="true"] { color:#ffca62; background:#3f3826; border-color:#9d8244; }
.overlay-window-layer svg { display:block; pointer-events:none; }
.overlay-window-floating .overlay-window-header { cursor:grab; user-select:none; touch-action:none; }
.overlay-window-anchored .overlay-window-header { cursor:default; }
.overlay-window-moving .overlay-window-header { cursor:grabbing; }
.overlay-window.overlay-window-floating .overlay-window-header .overlay-window-anchor[aria-pressed="true"] { color:#ffca62; background:#3f3826; border-color:#9d8244; }
.overlay-window .overlay-window-resize { position:absolute; bottom:0; right:0; width:20px; height:20px; padding:0; border:0; border-radius:4px 0 0 0; background:#171c24b3; color:#aab5c5; cursor:nwse-resize; touch-action:none; font-size:14px; line-height:20px; }

/* All VTT window chrome is defined here. Feature styles belong to content only. */
.vtt-window { display:flex; flex-direction:column; }
.vtt-window > .vtt-window-header { box-sizing:border-box; display:flex; align-items:center; gap:2px; padding:2px 5px; height:26px; flex:0 0 26px; flex-wrap:nowrap; background:#171c24; }
.vtt-window-title { flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:500; color:#aab5c5; }
.vtt-window-header > button { box-sizing:border-box; display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; min-height:0; margin:0; padding:0; border:1px solid transparent; border-radius:4px; background:transparent; color:#eee; font-family:inherit; font-size:14px; line-height:1; cursor:pointer; }
.vtt-window-header > button:hover, .vtt-window-header > button:focus-visible { background:#293240; border-color:#596579; }
.vtt-window-header > button:disabled { opacity:.4; cursor:default; }
.vtt-window-header > button[data-action-id^="petventure-"] { font-size:16px; }
.vtt-window-header > button[data-action-id^="petventure-"][data-state="good"] { color:#72d684; }
.vtt-window-header > button[data-action-id^="petventure-"][data-state="low"] { color:#ed6864; }
.vtt-window-header > button[data-action-id^="petventure-"][data-state="active"] { color:#69baff; }
.vtt-window-header > button[data-action-id="petventure-adventure"]::before { content:''; width:17px; height:17px; background:currentColor; -webkit-mask:url('/images/petventure/paw.svg') center/contain no-repeat; mask:url('/images/petventure/paw.svg') center/contain no-repeat; }
.vtt-window-header > button[data-action-id="petventure-adventure"][data-state="away"] { color:#69baff; }
.vtt-window-header > button[data-action-id="petventure-adventure"][data-state="waiting"] { color:#f1c95f; }
.vtt-window-header > button[data-action-id^="petventure-"]:disabled { opacity:1; }
.vtt-window-header > button[data-action-id^="petventure-"][data-state="neutral"] { color:#748092; }
.vtt-window-header > button:is([data-action-id="petventure-stop"], [data-action-id="coin-detector-stop"])[data-state="active"] { color:#72d684; }
.vtt-window-header > button:is([data-action-id="petventure-stop"], [data-action-id="coin-detector-stop"])[data-state="stopped"] { color:#ed6864; }
.vtt-window-content { flex:1; min-height:0; min-width:0; overflow:auto; }
.vtt-window.overlay-window-expanded { inset:12px; width:auto; height:auto; }
.vtt-window.overlay-window-expanded.vtt-window-edge-to-edge { inset:0; border:0; border-radius:0; }
.vtt-window.overlay-window-collapsed { height:28px; }
.vtt-window.overlay-window-collapsed > .vtt-window-content { display:none; }

/* Shared world map; cameras and visibility remain local to each viewer. */
.world-map { overflow:hidden; display:flex; flex-direction:column; }
.world-map[hidden], .world-map [hidden] { display:none !important; }
.world-map button, .world-map select, .world-map input { color:inherit; background:#293240; border:1px solid #596579; border-radius:4px; padding:5px; }
.world-map button { cursor:pointer; }
.world-map button[aria-pressed="true"] { background:#546d92; }
.world-map-body { display:flex; flex:1; min-height:0; }
.world-map-viewport { position:relative; flex:1; min-width:0; overflow:hidden; touch-action:none; background:#0c1119; }
.world-map-plane { position:absolute; top:0; left:0; transform-origin:0 0; pointer-events:none; }
.world-map-scene-preview { position:absolute; z-index:2; box-sizing:border-box; border:2px solid #78d5ff; background:#111a; pointer-events:auto; cursor:grab; box-shadow:0 3px 12px #000a; }
.world-map:not(.world-map-full) .world-map-scene-preview { cursor:pointer; }
.world-map-scene-preview-active { border-color:#ffca62; }
.world-map-scene-preview img { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.world-map-scene-preview-bar { position:absolute; left:0; bottom:100%; display:flex; width:max-content; min-width:100%; box-sizing:border-box; align-items:center; gap:4px; padding:3px; background:#171c24e8; transform:scale(var(--world-inverse,1)); transform-origin:left bottom; }
.world-map-scene-preview-bar strong { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.world-map-scene-preview-bar select { min-width:0; max-width:130px; padding:2px; font-size:11px; }
.world-map-scene-labels-hidden .world-map-scene-preview-bar { opacity:0; pointer-events:none; }
.world-map-scene-labels-hidden .world-map-scene-preview:hover .world-map-scene-preview-bar,
.world-map-scene-labels-hidden .world-map-scene-preview:focus-within .world-map-scene-preview-bar { opacity:1; pointer-events:auto; }
.world-map-scene-resize { position:absolute; right:-7px; bottom:-7px; width:16px; height:16px; border:2px solid #111; border-radius:50%; background:#78d5ff; cursor:nwse-resize; }
.scene-states { display:grid; gap:7px; }
.scene-state-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; gap:5px; align-items:center; }
.scene-state-add { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.scene-state-add button { grid-column:1/-1; }
.scene-state-navigation { display:flex; flex-wrap:wrap; gap:5px; }
.scene-state-navigation .control-button { flex:1 1 auto; }
.world-map-image { width:100%; height:100%; display:block; }
.world-map-marker, .world-map-bound { position:absolute; width:30px; height:30px; display:grid; place-items:center; color:#ffca62; font-size:28px; text-shadow:0 1px 4px #000; }
.world-map-marker { width:60px; height:60px; transform-origin:50% 100%; }
.world-map-full .world-map-marker { width:120px; height:120px; }
.world-map-marker img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 1px 3px #000); }
.world-map-bound { color:#78d5ff; }
.world-map-empty { padding:20px; position:absolute; inset:0; pointer-events:none; }
.world-map-editor [data-action="as-scene"] { width:100%; margin-bottom:12px; }
.world-map-editor [data-action="as-scene"][aria-pressed="true"] { background:#8c2228; border-color:#ef4444; }
.world-map-scene-active > .tabletop-canvas { visibility:hidden; pointer-events:none; }
.world-map-editor { width:220px; padding:12px; overflow:auto; border-left:1px solid #596579; }
.world-map-editor h3 { margin:0 0 12px; }
.world-map-display-options { display:grid; gap:7px; margin:0 0 12px; padding:8px; border:1px solid #596579; border-radius:5px; }
.world-map-display-options legend { padding:0 4px; color:#aab5c5; font-size:12px; }
.world-map-editor .world-map-display-options label { display:flex; align-items:center; gap:7px; margin:0; }
.world-map-editor .world-map-display-options input { width:auto; min-width:auto; }
.world-map-editor label { display:grid; gap:4px; margin-bottom:12px; }
.world-map-editor select, .world-map-editor input { width:100%; min-width:0; }
.world-map-help { font-size:12px; line-height:1.5; }
.world-map-coordinates { margin-top:12px; }
.world-map-coordinates input { font-family:monospace; }
.world-map-coordinates [data-copy-status] { display:block; margin-top:6px; }
@media(max-width:650px) { .world-map-full .world-map-body { flex-direction:column; } .world-map-editor { width:auto; max-height:40%; border-left:0; border-top:1px solid #596579; } }