/* ShahGol v0.2 — readable controls, visible evidence, deliberate performance. */
:root {
  --muted: #a6b8ac;
  --line: rgba(193, 214, 194, .16);
  --focus-ring: #f5dca2;
  --cue-calm: #9bcbb4;
  --cue-warm: #e5c27d;
}
body { font-size: 15px; line-height: 1.8; }
button { touch-action: manipulation; }
button:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 4px;
}
button:disabled { cursor: not-allowed; }
button:disabled:not(.hand-button) { opacity: .48; }
.topbar { min-height: 92px; height: auto; padding-block: 19px; }
.nav-button { font-size: 14px; min-height: 46px; }
.brand-type small { font-size: 11px; }
.icon-button { width: 44px; height: 44px; padding: 11px; }
.prototype-tag { font-size: 11px; }
.game-shell { max-width: 1480px; padding-top: 26px; }
.game-heading { gap: 16px; margin-bottom: 20px; }
.eyebrow { font-size: 12px; }
h1 { font-size: clamp(24px, 2.2vw, 31px); line-height: 1.5; }
.text-button { min-height: 42px; font-size: 12px; gap: 8px; }
.text-button > span { width: 17px; height: 17px; }
.scoreboard { min-height: 100px; margin-bottom: 22px; border-color: #9fb8972e; }
.team-score small { font-size: 11px; }
.team-score strong { font-size: 17px; }
.score { font-size: 42px; }
.milie small { font-size: 11px; }
.round-center { font-size: 12px; }
.round-center > span { font-size: 12px; }
.round-center small { font-size: 11px; color: #a2b49a; }
.play-layout { grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; align-items: start; }
.play-layout > * { min-width: 0; }

/* The stage keeps the same emerald / antique-gold identity. */
.arena {
  height: 630px; min-height: 0; position: sticky; top: 18px;
  border-color: #b3c79938; border-radius: 20px;
  background-position: center 36%;
  box-shadow: 0 22px 55px #0005, inset 0 1px 0 #e9d8a614;
}
.arena-vignette {
  background: linear-gradient(180deg, #06150f15 5%, #07171222 40%, #07171265),
    linear-gradient(90deg, #07171277, transparent 24%, transparent 76%, #07171277);
}
.arena-top { top: 22px; left: 22px; right: 22px; gap: 10px; }
.turn-badge { font-size: 12px; padding: 6px 12px; line-height: 1.6; }
.elapsed { font-size: 12px; gap: 7px; }
.elapsed > span { font-size: 11px; }
.stage-caption { top: 77px; left: 24px; right: 24px; }
.caption-kicker { font-size: 11px; letter-spacing: .2px; }
.stage-caption h2 { font-size: clamp(24px, 2.4vw, 31px); line-height: 1.6; margin: 5px 0 2px; }
.stage-caption p { font-size: 12px; line-height: 1.9; color: #c0ceba; }
.motion-caption {
  position: absolute; top: 188px; left: 50%; width: max-content;
  max-width: calc(100% - 52px); transform: translateX(-50%);
  z-index: 6; padding: 7px 14px; border: 1px solid #c8b07844;
  border-radius: 10px; color: #f0e1be; background: #0a211bd9;
  box-shadow: 0 5px 20px #0003; backdrop-filter: blur(10px);
  font-size: 12px; text-align: center; line-height: 1.8;
  pointer-events: none;
}
.motion-caption:empty { display: none; }
.players { left: 6%; right: 6%; bottom: 121px; }
.player { width: 31.5%; }
.player-portrait { transform-origin: 50% 95%; will-change: auto; }
.player-name { font-size: 14px; bottom: 92%; left: 0; right: 0; line-height: 1.65; }
.player-name small { font-size: 11px; line-height: 1.7; color: #bec7b4; }
.player.selected:after { background: #e2bd7210; border-bottom-width: 3px; }
.player.performer .player-name { color: #f9e7b3; }
.player.performer .player-name small { color: #decba2; }
.hands-layer { left: 6%; right: 6%; bottom: 94px; }
.hand-pair { width: 31.5%; gap: 5px; }
.hand-button { min-height: 72px; border-radius: 18px; }
.hand-button .hand-art { transform-origin: 50% 91%; }
.hand-button .hand-label {
  bottom: -13px; font-size: 11px; line-height: 1.65; opacity: .86;
  color: #d7dfc7; text-shadow: 0 2px 5px #02170d;
}
.hand-button:hover:not(:disabled), .hand-button.selected { transform: translateY(-7px); }
.hand-button.selected:before { border-width: 2px; box-shadow: 0 0 0 4px #e4c67610, 0 0 25px #e4c67630; }
.hand-button.selected .hand-label { color: #fff0bc; font-weight: 700; }
.hand-button.eliminated .hand-label { text-decoration: line-through; }
.hand-button.raised { transform: none; }
.hand-button.lined { transform: none; }
.felt-table { height: 235px; bottom: -57px; }
.table-brand { top: 69px; color: #b8bd8159; }
.table-status { bottom: 23px; font-size: 12px; line-height: 1.7; padding-inline: 12px; }
.result-ribbon { bottom: 177px; max-width: calc(100% - 36px); padding: 15px 24px; }
.result-ribbon strong { font-size: 24px; }
.result-ribbon small { font-size: 13px; line-height: 1.8; }
.shuffle-orb { width: 16px; height: 16px; }

/* Clear hierarchy: role, current task, selected hand, one primary decision. */
.control-panel, .control-panel.defending {
  height: auto; min-height: 0; display: flex; flex-direction: column;
  padding: 23px; gap: 16px; overflow: visible;
  background: linear-gradient(155deg, #162c24, #10221c 65%);
  border-color: #a5bc9433; border-radius: 20px;
  box-shadow: 0 15px 50px #0002;
}
.panel-top { gap: 10px; }
.panel-top .eyebrow { font-size: 12px; }
.round-chip { font-size: 10px; padding: 3px 8px; color: #bdc8b5; white-space: nowrap; }
.match-brief {
  margin: 0; padding: 10px 12px; border: 1px solid #d0ba7730;
  background: #b6a36309; border-radius: 10px; font-size: 12px;
  line-height: 1.9; color: #c3cfbb;
}
.match-brief strong, .match-brief b { color: #efdfb4; font-weight: 600; }
.match-brief p { margin: 0; }
.role-switch { padding: 4px; gap: 4px; border-radius: 10px; }
.role-switch button { font-size: 12px; min-height: 44px; padding: 7px 8px; border-radius: 7px; }
.role-switch button.selected { background: #35503a; color: #f4f0de; box-shadow: inset 0 1px 0 #b9d18a20; }
.round-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.round-steps > * {
  flex: 1; text-align: center; min-width: 65px; padding: 5px 6px;
  font-size: 11px; border-radius: 7px; border: 1px solid #8b9f7f26;
  color: #8da38e; background: #071b122b; line-height: 1.8;
}
.round-steps > .active { color: #f2dfa8; border-color: #d3b66a70; background: #d3b66a12; }
.decision-title > span { font-size: 11px; color: #c4aa72; }
.decision-title h2 { font-size: 21px; line-height: 1.6; margin: 4px 0 6px; }
.decision-title p, .control-panel.defending .decision-title p {
  font-size: 13px; min-height: 0; line-height: 1.95; color: #b1c3ad;
}
.selection-box {
  min-height: 48px; padding: 10px 12px; gap: 9px; font-size: 12px;
  line-height: 1.8; border-radius: 9px; border-color: #a4b38b55; background: #061b1244;
}
.selection-box > span:first-child { width: 20px; height: 20px; flex: 0 0 20px; }
.primary-action {
  min-height: 50px; font-size: 14px; border-radius: 10px; padding: 12px 15px;
  box-shadow: 0 5px 24px #d9ad5126, inset 0 1px 0 #fff8;
}
.primary-action > i { width: 20px; height: 20px; }
.primary-action:active:not(:disabled) { transform: translateY(1px); filter: brightness(.96); }
.secondary-actions { gap: 10px; }
.secondary-actions button { min-height: 46px; border-radius: 9px; font-size: 12px; padding: 8px; gap: 8px; }
.secondary-actions b { font-size: 13px; min-width: 22px; padding-inline: 6px; }
.secondary-actions button:hover:not(:disabled) { background: #2d4730; border-color: #b2c19088; }
.action-group { display: grid; gap: 8px; min-width: 0; }
.action-group > label, .action-group > .action-label { font-size: 12px; color: #c1ceb8; }
.action-group p { margin: 0; font-size: 11px; line-height: 1.8; color: var(--muted); }
.observation-controls { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #b0c3a9; }
.observation-controls > span { width: 100%; font-size: 12px; }
.observation-controls > div { width: 100%; gap: 9px; }
.observation-controls button {
  flex: 1; justify-content: center; min-height: 44px; padding: 8px 10px;
  font-size: 12px; gap: 7px; border-radius: 8px; border-color: #819b724d;
  color: #d7dfc8; background: #20382866;
}
.observation-controls i { width: 17px; height: 17px; }
.observation-controls button:hover:not(:disabled) { background: #36523677; border-color: #c4cb8c77; }
.cube-controls { padding-top: 16px; gap: 10px; }
.cube-controls > div { gap: 10px; min-width: 0; }
.cube-face { width: 34px; height: 36px; flex: 0 0 34px; font-size: 20px; border-radius: 7px; }
.cube-controls strong { font-size: 12px; line-height: 1.7; }
.cube-controls small { max-width: none; font-size: 11px; color: #a4b695; line-height: 1.8; }
.cube-controls button { flex-shrink: 0; min-height: 44px; font-size: 12px; padding: 8px 12px; border-radius: 8px; }
.insight-box { padding: 12px; border-radius: 10px; margin-top: 0; gap: 10px; min-height: 0; }
.insight-box > span { width: 19px; height: 19px; }
.insight-box p { font-size: 12px; color: #b3c4a7; line-height: 1.95; }
.defense-styles label { font-size: 12px; color: #c8d3be; }
.style-options { gap: 6px; margin-top: 7px; }
.style-options button { min-height: 44px; border-radius: 8px; font-size: 12px; padding: 8px 5px; }
.style-options .selected { background: #b79d4720; border-color: #dac17a99; color: #f1d699; }
.style-description { margin: 9px 0 0; font-size: 12px; line-height: 1.9; color: #b6c5aa; }
.decoy-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.decoy-picker button {
  flex: 1; min-width: 70px; min-height: 44px; padding: 8px;
  border: 1px solid #78906a55; border-radius: 8px; background: #0c2018;
  color: #bccbb5; font-size: 12px;
}
.decoy-picker button.selected, .decoy-picker button[aria-pressed="true"] {
  border-color: #e1bf72; color: #f3dc9d; background: #d7b96b17;
}

/* Readouts describe observable behavior, never label a hand as certainly true. */
.focus-readout {
  border: 1px solid #c9ad6850; border-radius: 12px; padding: 13px;
  background: linear-gradient(140deg, #263c2a80, #11271e);
}
.focus-readout .readout-title { color: #ecdbb1; font-size: 13px; font-weight: 600; line-height: 1.8; }
.readout-title { display: flex; align-items: center; gap: 7px; }
.readout-title > i, .readout-title > svg { width: 18px; height: 18px; flex-shrink: 0; }
.readout-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.readout-metrics > * { min-width: 0; padding: 9px; border-radius: 8px; background: #07191066; border: 1px solid #8aa77526; }
.readout-metrics small, .readout-metrics label, .readout-metrics span { display: block; font-size: 11px; color: #a9bea2; line-height: 1.7; }
.readout-metrics strong, .readout-metrics b { display: block; font-size: 13px; font-weight: 600; line-height: 1.8; color: #f0e1b9; }
.focus-readout p { font-size: 11px; color: #b1c0a4; margin: 9px 0 0; line-height: 1.8; }
.bot-trace { display: grid; gap: 7px; margin: 12px 0 0; counter-reset: trace; }
.trace-step { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; background: #071a1360; border-radius: 8px; border: 1px solid #90a7752b; color: #bfcbb1; font-size: 12px; line-height: 1.8; }
.trace-step::before { counter-increment: trace; content: counter(trace, persian); flex: 0 0 23px; height: 23px; display: grid; place-items: center; color: #ead29b; background: #d6b56b14; border-radius: 50%; font-size: 11px; }
.trace-step.active { border-color: #d2b66b77; color: #eee0bb; }
.trace-step strong { color: #ead4a0; font-weight: 600; }

.evidence-section {
  margin-top: 24px; padding: 22px; border: 1px solid #a7ba8e30; border-radius: 18px;
  background: linear-gradient(135deg, #11271ecf, #0d2018); min-width: 0;
}
.evidence-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.evidence-header h2 { font-size: 21px; font-weight: 600; line-height: 1.7; margin: 0; }
.evidence-header p { margin: 3px 0 0; font-size: 12px; line-height: 1.9; color: #b0c1a6; max-width: 58ch; }
.evidence-header > span, .evidence-header > small { font-size: 11px; color: #cbb987; padding: 5px 10px; border: 1px solid #bba16033; border-radius: 20px; background: #c4a35408; }
.evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.evidence-person { border: 1px solid #8ba87c30; border-radius: 12px; background: #071c134d; padding: 15px; min-width: 0; }
.evidence-person.selected { border-color: #d5b97588; background: #af9a4a0b; }
.evidence-person h3 { font-size: 15px; margin: 0 0 11px; line-height: 1.8; font-weight: 600; color: #e4dfc4; }
.evidence-person > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.evidence-person > header h3 { margin: 0; }
.evidence-person > header small { color: #a7b696; font-size: 10px; }
.evidence-person p { font-size: 12px; color: #aebc9f; margin: 10px 0 0; line-height: 1.9; }
.evidence-row { display: grid; grid-template-columns: minmax(55px, .8fr) repeat(2, minmax(0, 1fr)); gap: 6px; align-items: center; margin-top: 7px; }
.evidence-row > label, .evidence-row > .cue-label { font-size: 11px; color: #b0c0a6; line-height: 1.7; }
.cue-chip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 5px 6px; border-radius: 6px; border: 1px solid #8aa27b26; background: #8aa27b0a; font-size: 11px; line-height: 1.7; color: #c4d2b8; text-align: center; }
.cue-chip[data-level="high"], .cue-chip.strong { color: #efd496; border-color: #c3a56550; background: #c3a5650f; }
.cue-chip[data-level="low"], .cue-chip.soft { color: #aac9b3; background: #86b5990b; }
.cue-chip.unknown { color: #8da38d; border-style: dashed; }
.cue-chip i { width: 12px; height: 12px; flex-shrink: 0; }
.clue-legend { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #90a67b26; font-size: 11px; line-height: 1.9; color: #a7b89e; }
.clue-legend span { display: inline-flex; align-items: center; gap: 6px; }
.clue-legend b { color: #d4c59c; font-weight: 500; }

/* Cards become a secondary shelf, so the current decision stays prominent. */
.cards-section { margin-top: 24px; }
details.cards-section { border: 1px solid #9eb38230; background: #10241bb3; border-radius: 16px; padding: 0 20px; }
details.cards-section > summary, #cardsSummary {
  list-style: none; cursor: pointer; min-height: 76px; padding-block: 15px; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details.cards-section > summary::-webkit-details-marker { display: none; }
details.cards-section > summary::after { content: '+'; flex: 0 0 29px; width: 29px; height: 29px; line-height: 26px; text-align: center; font: 23px/27px Arial, sans-serif; color: #dbc287; border: 1px solid #c8ad6c4d; border-radius: 50%; }
details.cards-section[open] > summary::after { content: '−'; }
details.cards-section > summary .section-heading { margin: 0; flex: 1; }
details.cards-section > summary h2 { font-size: 21px; margin: 0; }
details.cards-section > summary .eyebrow { font-size: 11px; }
details.cards-section[open] .card-deck { padding-bottom: 20px; }
.cards-hint { font-size: 12px; line-height: 1.7; }
.cards-hint b { font-size: 16px; }
.card-deck { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.game-card { height: 152px; padding: 14px 12px 10px; border-radius: 11px; }
.game-card strong { font-size: 14px; line-height: 1.8; }
.game-card small { font-size: 11px; line-height: 1.65; color: #a3b895; }
.card-cost { font-size: 15px; top: 12px; left: 15px; }
.card-cost span { width: 12px; height: 12px; }
.card-art { width: 35px; height: 35px; margin: 19px auto 9px; }
.card-flag { font-size: 10px; right: 12px; top: 12px; }
.game-card:hover { transform: translateY(-3px); }
.event-strip { font-size: 12px; line-height: 1.9; gap: 14px; padding-block: 17px; align-items: flex-start; }
.event-strip button { font-size: 12px; }
.event-label { padding-top: 7px; }
.event-strip p { padding-top: 7px; }
.game-footer { font-size: 11px; padding-block: 22px; color: #91a480; }
.game-footer button { font-size: 11px; color: #b3c1a6; }
.modal-frame { padding: 36px; }
.modal-frame h2 { line-height: 1.6; }
.modal-frame p, .modal-frame li { font-size: 14px; line-height: 2; }
.modal-frame h3 { font-size: 17px; }
.modal-note { font-size: 13px; }
.modal-options button { min-height: 48px; font-size: 14px; }
.modal-options button small { font-size: 11px; }
.toast { font-size: 13px; line-height: 1.9; padding: 12px 20px; border-radius: 11px; }

/* Every cue is an intentional, time-bounded gesture, not endless decoration.
   Parent transforms continue to express selection; animation uses the art only. */
.arena { --performance-duration: 1150ms; }
.arena[data-style="calm"] { --performance-duration: 1450ms; }
.arena[data-style="theatrical"] { --performance-duration: 1250ms; }
.arena[data-style="decoy"] { --performance-duration: 1150ms; }
.arena.is-performing .player.performer .player-portrait,
.arena.is-performing .player.decoy-actor .player-portrait { will-change: transform; }
.arena.is-performing .player.performer .player-portrait {
  animation: v2-calm-shoulder var(--duration, var(--performance-duration)) cubic-bezier(.35, 0, .25, 1) var(--delay, 0ms) both;
}
.arena.is-performing[data-style="theatrical"] .player.performer .player-portrait {
  animation-name: v2-theatrical-shoulder;
}
.arena.is-performing[data-style="decoy"] .player.performer .player-portrait {
  animation-name: v2-decoy-shoulder;
}
.arena.is-performing[data-style="decoy"] .player.decoy-actor .player-portrait {
  animation: v2-decoy-actor var(--duration, 1400ms) cubic-bezier(.3, 0, .25, 1) var(--delay, 90ms) both;
}
.arena.is-shuffling .hand-button:not(.motion-raise):not(.motion-line):not(.motion-empty) .hand-art {
  animation: v2-calm-hand var(--duration, var(--performance-duration)) cubic-bezier(.35, 0, .25, 1) var(--delay, 0ms) both;
}
.arena.is-shuffling[data-style="theatrical"] .hand-button:not(.motion-raise):not(.motion-line):not(.motion-empty) .hand-art {
  animation-name: v2-theatrical-hand;
}
.arena.is-shuffling[data-style="decoy"] .hand-button:not(.motion-raise):not(.motion-line):not(.motion-empty) .hand-art {
  animation-name: v2-decoy-hand;
}
.hand-button.motion-raise .hand-art {
  animation: v2-raise var(--duration, 1300ms) cubic-bezier(.28, .02, .2, 1) var(--delay, 0ms) both;
}
.hand-button.motion-line .hand-art {
  animation: v2-line var(--duration, 1500ms) cubic-bezier(.3, .02, .18, 1) var(--delay, 0ms) both;
}
.hand-button.motion-empty .hand-art {
  animation: v2-empty var(--duration, 1700ms) cubic-bezier(.25, .02, .2, 1) var(--delay, 0ms) both;
}
.hand-button.motion-raise .hand-label,
.hand-button.motion-line .hand-label,
.hand-button.motion-empty .hand-label { color: #fff0bd; opacity: 1; }
.hand-button.motion-raise::before,
.hand-button.motion-line::before,
.hand-button.motion-empty::before { border-color: #d9bd7955; background: #d9bd7909; }
.arena.is-performing .motion-caption { border-color: #d7bd7a80; }
.arena.is-performing .shuffle-orb { box-shadow: 0 0 6px #fff4c6, 0 0 26px #e2bd7277; }
@keyframes v2-calm-shoulder {
  0%, 100% { transform: translateY(0) rotate(0); }
  32%, 64% { transform: translateY(-2px) rotate(.6deg); }
}
@keyframes v2-theatrical-shoulder {
  0%, 100% { transform: translateY(0) rotate(0); }
  26% { transform: translateY(-7px) rotate(-2deg); }
  61% { transform: translateY(-3px) rotate(2.5deg); }
  82% { transform: translateY(-1px) rotate(-.6deg); }
}
@keyframes v2-decoy-shoulder {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%, 67% { transform: translateY(-3px) rotate(-.7deg); }
}
@keyframes v2-decoy-actor {
  0%, 100% { transform: translateY(0) rotate(0); }
  22% { transform: translateY(-6px) rotate(-2deg); }
  48%, 72% { transform: translateY(-9px) rotate(3deg); }
  86% { transform: translateY(-2px) rotate(-1deg); }
}
@keyframes v2-calm-hand {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%, 65% { transform: translateY(calc(var(--lift, 8px) * -1)) rotate(var(--tilt, 3deg)); }
}
@keyframes v2-theatrical-hand {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  24% { transform: translate(-5px, calc(var(--lift, 14px) * -1)) rotate(calc(var(--tilt, 8deg) * -1)); }
  55% { transform: translate(6px, calc(var(--lift, 14px) * -.65)) rotate(var(--tilt, 8deg)); }
  77% { transform: translate(-2px, -4px) rotate(-2deg); }
}
@keyframes v2-decoy-hand {
  0%, 100% { transform: translateY(0) rotate(0); }
  21% { transform: translateY(-5px) rotate(calc(var(--tilt, 6deg) * -.3)); }
  43%, 64% { transform: translateY(calc(var(--lift, 13px) * -1)) rotate(var(--tilt, 6deg)); }
  82% { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes v2-raise {
  0%, 100% { transform: translateY(0) rotate(0); }
  28%, 70% { transform: translateY(calc(-35px - var(--lift, 8px))) rotate(var(--tilt, 3deg)); }
  46% { transform: translateY(calc(-38px - var(--lift, 8px))) rotate(calc(var(--tilt, 3deg) * -.5)); }
}
@keyframes v2-line {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(0, -16px) rotate(0); }
  45%, 70% { transform: translate(13px, calc(-18px - var(--lift, 4px))) rotate(var(--tilt, 0deg)); }
  86% { transform: translate(3px, -6px) rotate(3deg); }
}
@keyframes v2-empty {
  0%, 100% { transform: translateY(0) rotate(0) scaleX(1); }
  22% { transform: translateY(-18px) rotate(-8deg) scaleX(.82); }
  40%, 66% { transform: translateY(calc(-20px - var(--lift, 7px))) rotate(var(--tilt, 4deg)) scaleX(1); }
  82% { transform: translateY(-9px) rotate(-3deg) scaleX(.88); }
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 1500px) {
  .arena { height: 680px; }
  .control-panel, .control-panel.defending { height: auto; gap: 17px; }
  .players { left: 8%; right: 8%; bottom: 125px; }
  .hands-layer { left: 8%; right: 8%; bottom: 96px; }
  .stage-caption { top: 88px; }
  .motion-caption { top: 201px; }
}
@media (max-width: 1150px) {
  .game-shell { padding-inline: 24px; }
  .play-layout { grid-template-columns: minmax(0, 1fr) 322px; gap: 16px; }
  .control-panel, .control-panel.defending { padding: 19px; }
  .arena { height: 610px; }
  .players, .hands-layer { left: 2%; right: 2%; }
  .stage-caption h2 { font-size: 25px; }
  .evidence-section { padding: 19px; }
  .evidence-grid { gap: 10px; }
  .evidence-person { padding: 12px; }
  .evidence-row { grid-template-columns: 54px repeat(2, minmax(0, 1fr)); gap: 5px; }
  .cue-chip { font-size: 10px; }
  .card-deck { gap: 10px; }
}
@media (max-width: 900px) {
  .topbar { gap: 17px; padding-inline: 20px; }
  nav { gap: 20px; }
  .prototype-tag { display: none; }
  .play-layout { grid-template-columns: 1fr; gap: 18px; }
  .arena { height: clamp(560px, calc(45vw + 230px), 640px); position: relative; top: auto; }
  .players, .hands-layer { left: 10%; right: 10%; }
  .players { bottom: 118px; }
  .hands-layer { bottom: 92px; }
  .player-name { bottom: 90%; }
  .control-panel, .control-panel.defending {
    height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 18px; padding: 22px;
  }
  .control-panel > .panel-top, .control-panel > .match-brief,
  .control-panel > .role-switch, .control-panel > .round-steps,
  .control-panel > .decision-title, .control-panel > .focus-readout,
  .control-panel > .defense-styles, .control-panel > .cube-controls,
  .control-panel > .insight-box, .control-panel > .bot-trace,
  .control-panel > .decoy-picker, .control-panel > .style-description { grid-column: 1 / -1; }
  .control-panel > .selection-box, .control-panel > .primary-action { align-self: stretch; }
  .control-panel > .secondary-actions { align-self: end; }
  .control-panel > .action-group { min-width: 0; }
  .observation-controls { height: auto; }
  .observation-controls > div { min-width: 0; }
  .observation-controls button { padding-inline: 5px; }
  .cube-controls { justify-content: space-between; }
  .evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .evidence-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence-row > label, .evidence-row > .cue-label { grid-column: 1 / -1; margin-top: 4px; }
  .cue-chip { font-size: 11px; }
  .game-footer { gap: 8px 16px; flex-wrap: wrap; }
  .game-footer p { display: none; }
}
@media (max-width: 600px) {
  .topbar { padding: 12px 14px; min-height: 76px; gap: 10px; flex-wrap: wrap; }
  .brand { gap: 8px; }
  .brand-mark { width: 29px; height: 32px; }
  .brand-type { font-size: 25px; }
  .brand-type small { display: none; }
  nav { gap: 15px; margin-inline: auto; }
  .nav-button { font-size: 12px; min-height: 44px; padding-inline: 0; }
  .top-actions { gap: 5px; }
  .top-actions .icon-button { width: 42px; height: 42px; padding: 11px; }
  #helpButton { display: none; }
  .game-shell { padding: 19px 12px 0; }
  .game-heading { gap: 9px; align-items: flex-start; }
  .game-heading h1 { font-size: 24px; }
  .game-heading .eyebrow { font-size: 10px; }
  .game-heading .text-button { font-size: 11px; white-space: nowrap; margin-top: 6px; }
  .scoreboard { min-height: 105px; grid-template-columns: 1fr 82px 1fr; padding: 13px 13px; margin-bottom: 16px; }
  .team-score { gap: 6px; flex-wrap: wrap; position: relative; padding-bottom: 23px; }
  .team-emblem { display: none; }
  .team-score > div:not(.team-emblem) { min-width: 47px; }
  .team-score strong { font-size: 13px; }
  .team-score small { font-size: 10px; }
  .score { font-size: 33px; }
  .milie { position: absolute; right: 0; bottom: -1px; padding: 0; border: 0; background: none; min-width: 0; gap: 4px; }
  .milie small { display: inline; font-size: 10px; }
  .milie b { font-size: 13px; }
  .milie i { width: 13px; height: 13px; }
  .theirs .milie { right: auto; left: 0; }
  .round-center { margin-inline: 7px; }
  .round-center > span { font-size: 10px; }
  .round-center small { font-size: 9px; }
  .arena { height: clamp(480px, calc(50vw + 300px), 590px); border-radius: 15px; }
  .arena-top { top: 16px; left: 13px; right: 13px; gap: 7px; }
  .turn-badge { font-size: 10px; padding: 5px 8px; }
  .elapsed { font-size: 11px; }
  .elapsed > span { display: none; }
  .stage-caption { top: 70px; left: 16px; right: 16px; }
  .caption-kicker { font-size: 10px; }
  .stage-caption h2 { font-size: 24px; margin: 4px 0 2px; line-height: 1.6; }
  .stage-caption p { font-size: 11px; }
  .motion-caption { top: 174px; max-width: calc(100% - 30px); font-size: 11px; padding: 5px 10px; }
  .players { left: 1%; right: 1%; bottom: 120px; }
  .player-name { font-size: 12px; bottom: 92%; line-height: 1.6; }
  .player-name small { font-size: 9px; line-height: 1.6; }
  .hands-layer { left: 1%; right: 1%; bottom: 96px; }
  .hand-pair { gap: 3px; }
  .hand-button { min-height: 57px; }
  .hand-button .hand-label { font-size: 9px; bottom: -12px; }
  .felt-table { height: 220px; bottom: -63px; left: -17%; right: -17%; border-width: 7px; }
  .table-brand { top: 68px; font-size: 18px; }
  .table-brand > span { width: 23px; height: 18px; }
  .table-brand small { font-size: 5px; letter-spacing: 1px; }
  .table-status { bottom: 22px; font-size: 11px; padding-inline: 5px; left: 8px; right: 8px; }
  .result-ribbon { bottom: 170px; min-width: 215px; padding: 12px 16px; }
  .result-ribbon strong { font-size: 21px; }
  .result-ribbon small { font-size: 12px; }
  .control-panel, .control-panel.defending { display: flex; padding: 18px; gap: 15px; border-radius: 15px; }
  .panel-top .eyebrow { font-size: 11px; }
  .decision-title h2 { font-size: 22px; }
  .decision-title p { font-size: 13px; }
  .role-switch button, .style-options button { font-size: 13px; min-height: 46px; }
  .selection-box { font-size: 13px; min-height: 48px; }
  .primary-action { min-height: 52px; font-size: 15px; }
  .secondary-actions button { min-height: 47px; font-size: 13px; }
  .observation-controls > span { display: block; }
  .observation-controls button { min-height: 46px; font-size: 13px; padding: 9px; }
  .cube-controls button { font-size: 12px; min-height: 46px; padding-inline: 12px; }
  .evidence-section { margin-top: 18px; border-radius: 15px; padding: 17px; }
  .evidence-header { gap: 10px; margin-bottom: 13px; }
  .evidence-header h2 { font-size: 21px; }
  .evidence-header p { font-size: 12px; }
  .evidence-grid { grid-template-columns: 1fr; gap: 11px; }
  .evidence-person { padding: 13px; }
  .evidence-person h3 { font-size: 15px; margin-bottom: 8px; }
  .evidence-row { grid-template-columns: minmax(65px, .75fr) repeat(2, minmax(0, 1fr)); gap: 7px; }
  .evidence-row > label, .evidence-row > .cue-label { grid-column: auto; margin-top: 0; font-size: 12px; }
  .cue-chip { min-height: 34px; font-size: 11px; }
  .clue-legend { font-size: 11px; gap: 6px 12px; }
  details.cards-section { padding-inline: 15px; border-radius: 15px; margin-top: 18px; }
  details.cards-section > summary, #cardsSummary { min-height: 77px; gap: 9px; }
  details.cards-section > summary .section-heading { display: block; }
  details.cards-section > summary h2 { font-size: 20px; }
  details.cards-section > summary .eyebrow { font-size: 10px; }
  .cards-hint { font-size: 11px; flex-wrap: wrap; gap: 4px; }
  .card-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-card { height: 155px; padding: 14px 10px 10px; }
  .game-card strong { font-size: 14px; }
  .game-card small { font-size: 11px; }
  .card-art { width: 35px; height: 35px; margin-top: 20px; margin-bottom: 8px; }
  .card-cost { font-size: 14px; top: 12px; left: 13px; }
  .card-cost span { width: 12px; height: 12px; }
  .card-flag { font-size: 9px; top: 13px; right: 12px; }
  .event-strip { flex-wrap: wrap; gap: 3px 12px; margin-top: 20px; font-size: 12px; }
  .event-label { font-size: 11px; }
  .event-strip p { font-size: 12px; min-width: min(230px, 100%); }
  .event-strip button { font-size: 12px; margin-inline-start: auto; }
  .game-footer { font-size: 10px; gap: 4px; align-items: flex-start; }
  .game-footer button { font-size: 10px; max-width: 55%; text-align: start; white-space: normal; }
  .modal-frame { padding: 28px 21px; }
  .modal-frame h2 { font-size: 23px; padding-left: 30px; }
  .modal-frame p, .modal-frame li { font-size: 13px; }
  .modal-options button { font-size: 13px; }
  .modal-close { left: 10px; top: 10px; }
  .toast { width: max-content; max-width: calc(100% - 24px); bottom: 16px; font-size: 12px; }
}
@media (max-width: 380px) {
  .topbar { gap: 7px; padding-inline: 11px; }
  nav { gap: 10px; }
  .brand-type { font-size: 23px; }
  .brand-mark { width: 25px; }
  .nav-button { font-size: 11px; }
  .game-heading { flex-wrap: wrap; gap: 2px; }
  .game-heading .text-button { margin-top: 0; }
  .arena { height: 475px; }
  .stage-caption h2 { font-size: 22px; }
  .motion-caption { top: 164px; }
  .control-panel, .control-panel.defending { padding: 15px; }
  .evidence-section { padding: 14px; }
  .cue-chip { font-size: 10px; padding-inline: 4px; }
  .evidence-row { grid-template-columns: 61px repeat(2, minmax(0, 1fr)); gap: 5px; }
  .evidence-row > label, .evidence-row > .cue-label { font-size: 11px; }
  .cube-controls strong { font-size: 11px; }
}
@media (hover: none) {
  .hand-button:hover:not(:disabled) { transform: none; }
  .hand-button.selected, .hand-button.selected:hover { transform: translateY(-7px); }
  .game-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .arena.is-performing .player-portrait, .arena.is-performing .hand-art { will-change: auto; }
  .hand-button.motion-raise .hand-art,
  .hand-button.motion-line .hand-art,
  .hand-button.motion-empty .hand-art { outline: 2px solid #d8bd78; outline-offset: -4px; border-radius: 18px; }
  .hand-button:hover:not(:disabled), .hand-button.selected { transform: none; }
}
/* Integration of observation measurements and compact decisions. */
.commit-actions {display:flex;flex-direction:column;gap:9px}
.pooch-action {min-height:44px;padding:8px 12px;border:1px solid #8ea48544;border-radius:9px;background:#21392c;color:#c8d9bf;font-size:12px}
.readout-title {justify-content:space-between;flex-wrap:wrap}
.readout-title small {font-weight:400;font-size:10px;color:#9ab29c}
.metric-track {display:block;height:4px;border-radius:4px;overflow:hidden;background:#ffffff0b;margin-top:7px;direction:rtl}
.metric-track em {display:block;height:100%;background:#b9a977;border-radius:4px}
.cue-chip small {display:block;flex-basis:100%;color:#94ad97;font-size:9px}
.cue-chip .old-cue {color:#8b9a88;font-size:9px;border-top:1px dashed #82936822;padding-top:4px}
.evidence-person header {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:13px}
.evidence-person header small {font-size:10px;color:#91a78f}
.evidence-person.focused {border-color:#ceb47777;background:#172d22}
.empty-note {font-size:11px;color:#d7c697;border-top:1px solid #bba16b22;padding-top:9px}
.decoy-picker>span {flex-basis:100%;font-size:11px;color:#b8c5ac}
.details-arrow {display:none}
.motion-tag {position:absolute;top:-54px;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid #dec48288;background:#102b21ec;border-radius:5px;padding:2px 6px;color:#f1dfb1;font-size:10px;pointer-events:none}
.motion-raise .hand-art svg,.motion-line .hand-art svg {transform:scaleX(var(--grip,1));transform-origin:center}
.arena.is-inspecting-line .hands-layer:before {content:'';position:absolute;bottom:82%;left:0;right:0;border-top:1px dashed #eddd8d88;pointer-events:none}
.match-brief p {margin:5px 0 0;font-size:11px;color:#a9b9a1}
.match-brief strong {font-size:12px;color:#e7d4a1}
.modal-options button:disabled {background:#14251d;color:#789080}
@media(max-width:600px){
  .arena {height:400px}
  .stage-caption {top:62px}
  .stage-caption h2 {font-size:22px}
  .stage-caption p {font-size:10px;line-height:1.6}
  .players {bottom:93px}
  .hands-layer {bottom:73px}
  .player-name {font-size:12px}
  .player-name small {font-size:9px}
  .motion-caption {top:158px;font-size:11px;padding:5px 9px}
  .felt-table {height:190px;bottom:-65px}
  .table-status {font-size:10px;bottom:18px}
  .evidence-person header small {font-size:9px}
  .control-panel {gap:12px}
  .control-panel .insight-box {display:none}
  .round-steps {margin-block:0}
  .game-shell {padding-top:14px}
  .game-heading {margin-bottom:12px}
  .scoreboard {margin-bottom:14px}
  .motion-tag {font-size:9px;top:-46px}
}
/* On small screens a short stage close-up keeps requested gestures visible. */
.arena-slot {min-width:0;position:sticky;top:18px;height:630px}
.arena-slot .arena {height:100%;position:relative;top:auto}
.motion-caption {top:auto;bottom:60px}
@media(max-width:900px){
  .arena-slot {position:relative;top:auto;height:520px}
  .arena-slot .arena.is-performing {position:fixed;z-index:40;left:12px;right:12px;top:12px;height:360px;width:auto;margin:0;box-shadow:0 18px 70px #000d,0 0 0 200vmax #0006;border-color:#e1bd7177}
  .arena.is-performing .stage-caption {display:none}
  .arena.is-performing .motion-caption {top:61px;bottom:auto}
  .arena.is-performing .arena-top {top:16px}
  .arena.is-performing .players {bottom:94px;left:8%;right:8%}
  .arena.is-performing .player {width:29%;max-width:125px}
  .arena.is-performing .hands-layer {bottom:66px;left:8%;right:8%}
  .arena.is-performing .hand-pair {width:29%;max-width:125px}
  .arena.is-performing .felt-table {height:190px;bottom:-60px}
  .arena.is-performing .table-status {font-size:10px;bottom:17px}
}
@media(max-width:600px){.arena-slot{height:400px}.arena.is-performing .motion-caption{top:56px;max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.arena-slot .arena.is-performing{position:relative;left:auto;right:auto;top:auto;height:100%;box-shadow:none}.arena.is-performing .stage-caption{display:block}.arena.is-performing .motion-caption{top:auto;bottom:60px}}