/* Resolution-independent frames; HD material tiles at fixed scale, never stretched. */
:root {--neutral-ink:#172b43;--neutral-muted:#2d4560;--neutral-accent:#f4cf91;--neutral-base:#a4bedb;--neutral-material:none}
body[data-ui-theme="light"] {--neutral-ink:#203b55;--neutral-muted:#3c5163;--neutral-accent:#6493be;--neutral-base:#f4d49d;--neutral-material:none}
body {--panel-ink:var(--neutral-ink);--panel-muted:var(--neutral-muted);--panel-accent:var(--neutral-accent);--panel-base:var(--neutral-base);--panel-material:var(--neutral-material);--ui-ink:var(--neutral-ink);--ui-muted:var(--neutral-muted)}
:is(.fighter-hud,.player,.finale,.character-action,.roster-card).theme-golem {--panel-ink:#f4faef;--panel-muted:#d6e7ca;--panel-accent:#a4d67d;--panel-base:#29392a;--panel-material:linear-gradient(#12200c99,#12200c99),url('assets/golem-theme.webp')}
:is(.fighter-hud,.player,.finale,.character-action,.roster-card).theme-assassin {--panel-ink:#eefaff;--panel-muted:#c7e4ef;--panel-accent:#86d7f4;--panel-base:#182d41;--panel-material:linear-gradient(#0c203455,#0c203455),url('assets/assassin-hud-v14.png')}
:is(.fighter-hud,.player,.finale,.character-action,.roster-card).theme-mage {--panel-ink:#fff5e9;--panel-muted:#f2d5bb;--panel-accent:#ffaf73;--panel-base:#302521;--panel-material:linear-gradient(#21170b77,#21170b77),url('assets/mage-theme.png')}
/* Includes neutral screens, every existing control, and character-owned surfaces.
   IDs deliberately match the specificity of the previous appearance rules. */
button,.primary,.confirm,select,dialog,#setup,#options-dialog,#handoff,.stage,#notice,
.fighter-hud,.player h2,.player .card-choices button,.player .dial-buttons button,
.player .confirm,.player .dial-labels span,.player .coupling-hint,
.player .micro-readout,.player .inertia,.player .speed,.player .spin-box,.player .dial-tray,
.player .spin-box button,.hit-card,.finale,.ready-card,#actions p,
.camera-controls button,.header-actions button,.options-content select,
.roster-card,.setup-audio,.options-audio {
  background-color:var(--panel-base);
  background-image:var(--panel-material);
  background-size:360px 360px;
  background-position:center;
  background-repeat:repeat;
  background-clip:padding-box;
  border:1px solid var(--panel-accent);
  border-radius:9px;
  color:var(--panel-ink);
  box-shadow:var(--ui-shadow);
  text-shadow:none;
}
/* Large panels retain material detail instead of stretching one narrow strip. */
dialog,#setup,#options-dialog,#handoff,.finale,.roster-card {
  background-size:360px 360px;
  background-repeat:repeat;
  border-radius:12px;
}
.fighter-hud {border-left-width:1px}
.player,.player.theme-assassin,.player.theme-mage {
  background:none; border:0; box-shadow:none;
}
/* Nested containers stay open to the arena; only functional surfaces are skinned. */
.coupling,.card-choices,.dial-buttons,.camera-controls,.header-actions,
.select-player,.options-heading,.options-content,.options-content details {
  background:none; background-image:none; box-shadow:none;
}
.options-heading {border-bottom:1px solid color-mix(in srgb,var(--panel-accent) 35%,transparent)}
.options-content details {border-top-color:color-mix(in srgb,var(--panel-accent) 30%,transparent)}
.options-heading button {background-image:var(--panel-material);border-width:1px;border-style:solid}
.fighter-hud .health-title b,.fighter-hud .health-title>span,
.player h2,.player .speed b,.player .dial-labels output,
.player .micro-readout,.finale strong,.roster-card b,
#handoff strong,#handoff h2,#turn,.setup-heading h2,.select-player h3,
.options-heading h2,.options-content label,.options-content summary,.hit-card strong {
  color:var(--panel-ink);text-shadow:none;
}
.fighter-hud .hud-known,.player .current,.player .speed small,
.player .speed>span,.player .inertia,.player .coupling-hint,
.player .dial-labels span,.finale p,.finale-kicker,.roster-card span,
.setup-heading p,.priority-note,#phase,#handoff p,
.options-content p,.options-content #log,.options-content output {
  color:var(--panel-muted);
}
.hit-card span,.ready-card p {color:var(--panel-muted)}
.player .fighter-heading>small {color:var(--panel-accent)}
button:hover:not(:disabled),.primary:hover:not(:disabled),.player .confirm:hover:not(:disabled),
.player .card-choices button[aria-pressed="true"],.roster-card[aria-pressed="true"] {
  background-color:var(--panel-base);background-image:var(--panel-material);
  color:var(--panel-ink);border-color:var(--panel-accent);
}
button:hover:not(:disabled) {filter:brightness(1.12)}
button[aria-pressed="true"],.player .card-choices button[aria-pressed="true"],
.spin-box button[aria-pressed="true"],#setup .roster-card[aria-pressed="true"] {
  outline:2px solid var(--panel-accent);outline-offset:-4px;
  box-shadow:var(--ui-shadow),inset 0 -3px var(--panel-accent);
}
button:active:not(:disabled) {filter:brightness(.85);box-shadow:inset 0 2px 5px #0006}
button:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--panel-accent);outline-offset:2px;
}
button:disabled,.player .card-choices button:disabled,#setup .roster-card:disabled {
  opacity:.62;filter:saturate(.35);text-decoration:none;
}
.player .card-choices button:disabled[aria-pressed="true"] {opacity:1;filter:none}
.roster-card em,.lock-badge,.hp-bonus {
  background:var(--panel-accent);color:var(--panel-base);text-shadow:none;
  border:0;box-shadow:none;
}
.options-content input[type="range"] {accent-color:var(--panel-accent)}
select option {background:var(--neutral-base);color:var(--neutral-ink);text-shadow:none}
body[data-ui-theme="light"] :is(button,select,dialog,#handoff,.stage,#notice,.hit-card,#actions p),
body[data-ui-theme="light"] :is(#setup,#options-dialog) * {text-shadow:none}
/* Result summaries and handoff remain neutral, even when they name a fighter. */
.hit-card {--panel-frame:var(--neutral-frame);--panel-material:var(--neutral-material);--panel-ink:var(--neutral-ink);--panel-muted:var(--neutral-muted);--panel-base:var(--neutral-base)}

/* One fitted tray for the two dials, with no change to their SVG coordinates. */
.player .dial-tray {width:fit-content;max-width:100%;margin:4px auto;border-radius:10px;line-height:0;padding:0 3px;overflow:visible}
.player .dial-tray .coupling-svg {display:block;width:auto;max-width:100%;margin:0}
/* Compact two-player setup. Text and symbols replace portraits. */
#setup {width:min(600px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:14px;overflow:auto}
#setup .setup-heading {display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px}
#setup .game-logo {width:64px;height:44px;margin:0;object-fit:contain;border-radius:4px}
#setup .setup-heading h2 {font-size:20px;margin:0}
#setup .setup-heading p {display:none}
#fighter-selection {display:grid;gap:10px}
#setup .select-player h3 {margin:0 0 6px;font-size:14px}
#setup .roster {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#setup .roster-card {min-height:92px;padding:7px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--panel-accent);background-image:var(--panel-material);background-size:360px 360px;color:var(--panel-ink)}
#setup .roster-card b {font-size:13px;line-height:1.2;color:var(--panel-ink)}
#setup .roster-card>span:not(.fighter-symbol) {display:none}
#setup .roster-card .fighter-symbol {display:block;font:700 28px/1 system-ui,sans-serif;color:var(--panel-accent);width:auto;height:auto}
#setup .roster-card em {position:static;font-size:11px;padding:1px 4px;line-height:1.3;border-radius:3px;white-space:nowrap}
#setup .priority-note {font-size:12px;line-height:1.35;margin:10px 0}
#setup .setup-audio,#setup #start-match {min-height:36px;padding:6px 10px;margin:0;font-size:13px}
#setup #start-match {margin-top:6px}
@media (orientation:landscape) and (max-height:600px) {
 #setup {width:min(740px,calc(100vw - 20px));padding:10px}
 #fighter-selection {grid-template-columns:1fr 1fr;gap:12px}
 #setup .setup-heading {margin-bottom:4px}
 #setup .game-logo {height:28px;width:42px}
 #setup .setup-heading h2 {font-size:17px}
 #setup .roster-card {min-height:77px}
 #setup .priority-note {margin:6px 0;font-size:11px}
 #setup .setup-audio,#setup #start-match {width:auto;display:inline-block;margin:0 4px 0 0;min-height:32px}
}
/* Persistent welcome screen; only the explicit button opens the game. */
#intro {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:18px}
#intro-logo {width:min(88vw,780px);max-height:72dvh;object-fit:contain}
#intro.running {animation:none}
#intro.running #intro-logo {animation:welcome-logo 1.4s ease-out both}
#intro-continue {position:relative;z-index:1;min-width:150px;min-height:44px;font-size:16px;flex-shrink:0}
@keyframes welcome-logo {0%{opacity:0;transform:scale(.02);clip-path:circle(0%)}60%{opacity:1;transform:scale(1.02);clip-path:circle(75%);filter:brightness(1.15)}100%{opacity:1;transform:scale(1);clip-path:circle(75%);filter:none}}
@media(prefers-reduced-motion:reduce){#intro.running #intro-logo{animation:none;opacity:1;transform:none;clip-path:none}}

/* Subtle warm/cool edge accents on neutral surfaces. */
body {--panel-detail:#e9ad85}
body[data-ui-theme="light"] {--panel-detail:#8ebce0}
:is(.fighter-hud,.player,.finale,.character-action,.roster-card) {--panel-detail:var(--panel-accent)}
button,.primary,select,dialog,#setup,#options-dialog,#handoff,.stage,#notice,.fighter-hud,.player h2,.player .dial-tray {border-bottom-color:var(--panel-detail)}

/* v15: compact public header and private control grid. */
:root {--neutral-base:#172b48;--neutral-ink:#f2f5fc;--neutral-muted:#d0ddeb;--neutral-accent:#efc58b;--neutral-material:url('assets/parchment-dark.png')}
body[data-ui-theme="light"] {--neutral-base:#edcc94;--neutral-ink:#21394d;--neutral-muted:#354c5b;--neutral-accent:#628dab;--neutral-material:url('assets/parchment-light.png')}
header {top:max(6px,env(safe-area-inset-top));right:6px;height:auto;max-width:none}
.header-actions {gap:4px}
.header-actions button {font-size:12px;min-height:34px;padding:5px 7px}
.fighter-hud.hud-top {top:max(6px,env(safe-area-inset-top));left:6px;width:calc(100vw - 162px);max-width:270px;min-height:54px;padding:4px 6px}
.hud-top .health-title {grid-template-columns:24px minmax(0,1fr) auto;gap:4px}
.hud-top .health-title b {font-size:12px}
.stage {top:calc(max(6px,env(safe-area-inset-top)) + var(--top-hud-height,54px) + 5px)}
#notice {top:calc(max(6px,env(safe-area-inset-top)) + var(--top-hud-height,54px) + 10px + var(--stage-height,28px))}
.fighter-portrait,.health-title .fighter-portrait,.player h2 .fighter-portrait {background:none;border:0;border-radius:50%;object-fit:contain}
#setup .roster-card .fighter-symbol {width:34px;height:34px;object-fit:contain;filter:none}
.fighter-hud .hp-segment.alive {background:#cfd8df;background-image:linear-gradient(#eff4f7,#b4c1cd);background-size:auto;box-shadow:inset 0 1px 0 #fff9;opacity:1;filter:none}
.fighter-hud .hp-segment.scratch {background:var(--energy);background-image:linear-gradient(color-mix(in srgb,var(--energy) 45%,white),var(--energy));background-size:auto;box-shadow:0 0 4px var(--energy),inset 0 1px 0 #fff8;opacity:1;filter:none}
.fighter-hud .hp-segment.lost {background:#dc293b;background-image:linear-gradient(#f34850,#bd142b);background-size:auto;box-shadow:inset 0 1px 0 #ff949466;opacity:1;filter:none}
/* Apply directional shadows in world coordinates, outside the rotated content. */
#board .token-disc,.micro-arrow {filter:none}
#board .field-shadow {filter:drop-shadow(4px 7px 3px #020612a6)}
#board .inertia-arrows {filter:drop-shadow(1px 0 0 #10202c) drop-shadow(-1px 0 0 #10202c) drop-shadow(0 1px 0 #10202c) drop-shadow(4px 7px 3px #020612a6)}
aside:has(.player) {overflow:visible}
.player {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(110px,1fr);gap:4px;padding:2px}
.player h2 {grid-column:1/-1;margin:0;padding:3px 6px;min-height:32px;font-size:14px}
.player .current {margin-top:0;font-size:11px;line-height:1.2}
.player .card-choices {grid-column:1/-1;gap:4px}
.player .card-choices button {min-height:32px;padding:3px 5px}
.player .card-choices img {width:24px;height:24px}
.player .coupling {grid-column:1;grid-row:3/7;margin:0;align-self:start}
.player .dial-labels {gap:3px}
.player .dial-labels span {font-size:11px;padding:2px 4px}
.player .dial-tray {margin:3px auto;padding:0 2px}
.player .dial-tray .coupling-svg {width:100%;height:auto;max-height:112px;aspect-ratio:224/120}
.player .dial-buttons {gap:5px}
.player .dial-buttons>div {gap:4px}
.player .dial-buttons button {min-width:36px;min-height:32px;padding:0 6px;font-size:22px}
.player .coupling-hint {font-size:11px;padding:2px 4px;margin:3px 0;line-height:1.2}
.player .micro-readout {font-size:11px;padding:2px 4px;margin:3px 0;line-height:1.2}
.player .spin-box {grid-column:2;grid-row:3;margin:0;padding:3px;font-size:11px}
.player .spin-box>div {gap:3px;margin:2px 0 0}
.player .spin-box button {min-height:28px;font-size:11px;padding:2px}
.player .inertia {grid-column:2;grid-row:4;margin:0;padding:4px;font-size:11px;line-height:1.3;align-self:start}
.player .speed {grid-column:2;grid-row:5;margin:0;padding:4px;gap:2px;align-self:start}
.player .speed>span {letter-spacing:0;font-size:11px}
.player .speed b {font-size:20px}
.player .speed small {font-size:11px;line-height:1.2;margin-top:1px}
.player .confirm {grid-column:2;grid-row:6;min-height:36px;padding:5px;font-size:12px;align-self:end}
@media(max-height:600px) and (orientation:portrait){.player .dial-tray .coupling-svg {max-height:94px}.player .coupling-hint {font-size:10px}.player h2 {min-height:29px}}
@media(max-height:500px) and (orientation:landscape){.player {grid-template-columns:minmax(0,1.4fr) minmax(100px,1fr)}.player .dial-tray .coupling-svg {max-height:83px}.player .coupling-hint {font-size:10px}.player .dial-buttons button {min-width:30px;min-height:28px}.player h2 {min-height:27px}.player .current {display:inline}.player .card-choices button {min-height:29px}.player .card-choices img {width:20px;height:20px}}
/* v17: identical control footprint for every fiche/hour/spin choice. */
.player {height:min(300px,40dvh);width:100%;zoom:1;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,2.05fr) minmax(112px,1fr);grid-template-rows:34px 52px 38px minmax(54px,1fr) 42px;gap:4px;padding:2px;margin:0}
.player .card-choices {grid-column:1/-1;grid-row:1;height:34px;min-height:0}
.player .card-choices button {height:34px;min-height:0;overflow:hidden}
.player .coupling {grid-column:1;grid-row:2/6;display:grid;grid-template-rows:24px minmax(0,1fr) 34px 28px;gap:3px;min-height:0;height:100%;align-self:stretch}
.player .dial-labels {height:24px;min-width:0}
.player .dial-labels span {font-size:11px;white-space:nowrap;padding:3px}
.player .dial-tray {width:100%;height:100%;min-height:0;margin:0;padding:1px;display:flex;align-items:center;justify-content:center}
.player .dial-tray .coupling-svg {width:100%;height:100%;max-height:none;aspect-ratio:auto;flex:1;min-height:0}
.player .dial-buttons {height:34px;margin:0;gap:4px}
.player .dial-buttons button {height:34px;min-height:0}
.player .coupling-hint {display:none}
.player .micro-readout {height:28px;margin:0;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1.15;overflow-wrap:anywhere}
.player .spin-box {grid-column:2;grid-row:2;height:52px;margin:0;padding:3px;min-height:0;box-sizing:border-box}
.player .spin-box[hidden] {display:block;visibility:hidden;pointer-events:none}
.player .spin-box>span {font-size:11px;line-height:14px;display:block}
.player .spin-box>div {margin:2px 0 0;gap:2px}
.player .spin-box button {min-height:27px;height:27px;font-size:10px;white-space:nowrap}
.player .inertia {grid-column:2;grid-row:3;height:38px;width:100%;box-sizing:border-box;font-size:10px;line-height:1.2;margin:0;padding:4px;display:flex;align-items:center}
.player .speed {grid-column:2;grid-row:4;align-self:stretch;min-height:0;padding:4px;margin:0;grid-template-rows:22px minmax(0,1fr)}
.player .speed small {font-size:10px;line-height:1.15;align-self:center;margin:0}
.player .speed b {font-size:20px;line-height:1}
.player .confirm {grid-column:2;grid-row:5;height:42px;min-height:0;font-size:11px;padding:3px;line-height:1.2}
.player button:active:not(:disabled) {transform:none}
aside:has(.player) {overflow:visible}
.hud-bottom {bottom:calc(var(--controls-height,0px) + 3px)}
@media(min-width:900px){.player {height:min(320px,46dvh)}.hud-bottom {bottom:15px}}
@media(max-height:650px) and (orientation:portrait){.player {grid-template-rows:30px 46px 30px minmax(42px,1fr) 36px;gap:2px}.player .card-choices,.player .card-choices button{height:30px}.player .spin-box{height:46px}.player .spin-box button{height:24px;min-height:0}.player .inertia{height:30px}.player .confirm{height:36px}.player .coupling{grid-template-rows:22px minmax(0,1fr) 30px 26px;gap:2px}.player .dial-labels{height:22px}.player .dial-buttons,.player .dial-buttons button{height:30px}.player .micro-readout{height:26px;font-size:10px}}
@media(max-height:500px) and (orientation:landscape){.player {height:min(290px,62dvh);grid-template-rows:30px 46px 30px minmax(42px,1fr) 36px;gap:2px}.player .card-choices,.player .card-choices button{height:30px}.player .spin-box{height:46px}.player .spin-box button{height:24px;min-height:0}.player .dial-buttons,.player .dial-buttons button{height:30px}.player .micro-readout{height:26px}.player .inertia{height:30px}.player .confirm{height:36px}.player .coupling{grid-template-rows:22px minmax(0,1fr) 30px 26px;gap:2px}}
/* Fine stone detail is shared; life colours and the 5 × 3 segmentation stay intact. */
.fighter-hud .hp-segment.alive,.fighter-hud .hp-segment.scratch,.fighter-hud .hp-segment.lost {background-image:url('assets/life-stone.png');background-size:64px 64px;background-position:center;background-blend-mode:soft-light}
.fighter-hud .hp-segment.alive {background-color:#cfd8df}
.fighter-hud .hp-segment.scratch {background-color:var(--energy)}
.fighter-hud .hp-segment.lost {background-color:#dc293b}

/* Acceleration: fixed footprint while selections toggle, data-driven gem count. */
.health-title {grid-template-columns:24px minmax(0,1fr) auto auto!important;gap:4px}
.acceleration-meter {display:flex;align-items:center;gap:2px;background:#080a0e;border-radius:6px;padding:2px 4px;max-width:112px;min-width:0;box-shadow:inset 0 0 0 1px #ffffff12}
.acceleration-gems {display:flex;flex-wrap:wrap;max-width:80px;gap:0;align-items:center}
.acceleration-gems img {width:15px;height:15px;object-fit:contain}
.acceleration-meter .acceleration-runner {width:23px;height:20px;object-fit:contain;flex-shrink:0}
.player .speed {position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:20px 1fr 27px;gap:1px;padding:3px}
.player .speed small {grid-column:1/-1;font-size:10px;line-height:1.1}
.player .speed .accelerate-toggle {grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:4px;height:27px;min-height:27px;padding:1px 4px;font-size:11px;background:#101319;border:1px solid #71777e;border-radius:5px;color:#e1e2e5;box-shadow:none;transform:none}
.accelerate-toggle img {width:27px;height:22px;object-fit:contain}
.player .speed .accelerate-toggle[aria-pressed="true"] {border-color:#ffe382;color:#ffe382;background:#292311}
.player .speed .accelerate-toggle:disabled {opacity:.45}
.player {grid-template-rows:34px 48px 24px minmax(76px,1fr) 38px}
.player .spin-box {height:48px}.player .inertia {height:24px}.player .confirm {height:38px}
@media(max-height:650px) and (orientation:portrait),(max-height:500px) and (orientation:landscape){.player{grid-template-rows:30px 43px 22px minmax(70px,1fr) 32px;gap:2px}.player .spin-box{height:43px}.player .inertia{height:22px}.player .confirm{height:32px}}
@media(max-width:380px){.hud-top .health-title b {font-size:10px}.hud-top .acceleration-gems img {width:12px;height:12px}.hud-top .acceleration-runner {width:19px}}
.health-title>.acceleration-meter {grid-column:3;grid-row:1}
.health-title>span:last-child {grid-column:4;grid-row:1}