/* Reading sizes are independent of board density: no page-wide scaling. */
body[data-screen="game"] { --muted:#b7c0b3; }
body[data-screen="game"] .game-top .eyebrow { font-size:12px; letter-spacing:1px; }
body[data-screen="game"] .game-top .status { font-size:14px; max-width:280px; }
body[data-screen="game"] .statline,
body[data-screen="game"] .deck-badge,
body[data-screen="game"] .player-panel .quiet { font-size:13px; }
body[data-screen="game"] .hand-head { font-size:12px; letter-spacing:.5px; }
body[data-screen="game"] .detail-title { font-size:25px; }
body[data-screen="game"] .detail-text { font-size:15px; line-height:1.65; }
body[data-screen="game"] .small,
body[data-screen="game"] .log p { font-size:13px; line-height:1.55; }
body[data-screen="game"] .tag { font-size:11px; }
body[data-screen="game"] .action-description { font-size:14px; line-height:1.55; }
body[data-screen="game"] .action-panel .buttons button,
body[data-screen="game"] .mode-options button { font-size:14px; }
.caster-options { display:grid; gap:8px; max-height:270px; overflow-y:auto; padding:3px; }
.caster-option { display:flex; align-items:center; gap:12px; width:100%; min-width:0; text-align:left; padding:9px; }
.caster-option img { display:block; flex:0 0 44px; width:44px; height:80px; object-fit:contain; }
.caster-option>span { display:flex; flex-direction:column; gap:6px; min-width:0; }
.caster-option strong { font-size:14px; color:var(--paper); overflow-wrap:anywhere; }
.caster-option small { font-size:12px; line-height:1.4; color:var(--muted); }
.caster-option.active { border-color:var(--gold); background:#75663755; box-shadow:inset 3px 0 var(--gold); }

@media (min-width:1000px) {
  body[data-screen="game"] {
    --hand-card-height:clamp(104px,calc(36dvh - 200px),208px);
    --table-row-height:clamp(92px,calc((100dvh - 370px - var(--hand-card-height)) / 3),280px);
    --table-card-height:calc(var(--table-row-height) - 44px);
  }
  body[data-screen="game"] .masthead { max-width:none; height:52px; padding:8px 24px; }
  body[data-screen="game"] .wordmark { font-size:27px; }
  body[data-screen="game"] .community-nav { padding:6px 24px; min-height:42px; }
  body[data-screen="game"] .community-nav button { padding:6px 10px; }
  body[data-screen="game"] main {
    max-width:none; padding:12px 24px 16px; min-height:0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,440px); gap:12px 20px;
  }
  body[data-screen="game"] .game-top { grid-column:1; grid-row:1; margin:0; gap:12px; min-width:0; }
  body[data-screen="game"] .game-top h1 { font-size:29px; white-space:nowrap; }
  body[data-screen="game"] .game-top .eyebrow { margin-bottom:3px; }
  body[data-screen="game"] .game-top .status { padding:8px 10px; }
  body[data-screen="game"] .game-top h1 button { font-size:13px; margin-left:8px; }
  body[data-screen="game"] .match-scoreboard { grid-column:2; grid-row:1; margin:0; padding:8px 14px; gap:12px; }
  body[data-screen="game"] .match-scoreboard small { font-size:10px; letter-spacing:.5px; }
  body[data-screen="game"] .match-scoreboard strong { font-size:13px; }
  body[data-screen="game"] .round-win-score { gap:10px; }
  body[data-screen="game"] .round-win-score b { font-size:30px; }
  body[data-screen="game"] .round-win-score span { font-size:12px; max-width:85px; }
  body[data-screen="game"] .game-layout {
    grid-column:1/-1; display:grid;
    grid-template-columns:clamp(200px,16vw,260px) minmax(0,1fr) clamp(260px,20vw,340px); gap:16px; align-items:start;
  }
  body[data-screen="game"] main>.result-banner,
  body[data-screen="game"] main>.previous-round { grid-column:1/-1; margin:0; }
  body[data-screen="game"] .board-column { min-width:0; }
  body[data-screen="game"] .battlefield { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-screen="game"] .battlefield>.side-title { grid-row:1; }
  body[data-screen="game"] .battlefield>[data-side-role="own"] { grid-column:1; background-color:#819c6a0b; }
  body[data-screen="game"] .battlefield>[data-side-role="opponent"] { grid-column:2; border-left:2px solid #bda36c66; }
  body[data-screen="game"] .battlefield>.row[data-row-type="diplomat"] { grid-row:2; }
  body[data-screen="game"] .battlefield>.row[data-row-type="scientist"] { grid-row:3; }
  body[data-screen="game"] .battlefield>.row[data-row-type="fighter"] { grid-row:4; }
  body[data-screen="game"] .battlefield>.middle { grid-column:1/-1; grid-row:5; }
  body[data-screen="game"] .side-title { font-size:12px; padding:6px 12px; }
  body[data-screen="game"] .middle { min-height:24px; padding:5px 10px; font-size:10px; letter-spacing:1px; }
  body[data-screen="game"] .row,
  body[data-screen="game"] .row:has(.has-attachment) { min-height:var(--table-row-height); padding:7px 10px 7px 35px; gap:8px; flex-wrap:nowrap; }
  body[data-screen="game"] .row-title { font-size:12px; letter-spacing:.5px; }
  body[data-screen="game"] .row-cards { flex:1; flex-wrap:nowrap; overflow-x:auto; padding:8px 5px; scrollbar-width:thin; }
  body[data-screen="game"] .row-cards:empty { padding:0; }
  body[data-screen="game"] .row-cards .card :is(img,video) { height:var(--table-card-height); width:auto; aspect-ratio:55/100; object-fit:contain; }
  body[data-screen="game"] .row-cards:has(.has-attachment) { padding-bottom:18px; }
  body[data-screen="game"] .row-cards .card.has-attachment { margin-bottom:0; }
  body[data-screen="game"] .row-cards:has(.has-attachment) .card :is(img,video) { height:calc(var(--table-card-height) - 12px); }
  body[data-screen="game"] .row-events { max-width:185px; gap:4px; }
  body[data-screen="game"] .field-event { padding:4px; gap:5px; }
  body[data-screen="game"] .field-event :is(img,video) { width:27px; height:48px; }
  body[data-screen="game"] .row-drop { font-size:12px; max-width:145px; padding:7px; }
  body[data-screen="game"] .hand-area { margin-top:12px; padding:11px 12px 0; }
  body[data-screen="game"] .hand-head { margin-bottom:0; gap:12px; }
  body[data-screen="game"] .hand { min-height:0; padding:15px 4px 12px; gap:9px; }
  body[data-screen="game"] .hand .card { padding:5px 5px 30px; }
  body[data-screen="game"] .hand .card :is(img,video) { width:auto; height:var(--hand-card-height); aspect-ratio:55/100; object-fit:contain; }
  body[data-screen="game"] .hand .card-name { font-size:12px; line-height:1.2; min-height:28px; }
  body[data-screen="game"] .hand-power { font-size:21px; min-width:29px; height:29px; }
  body[data-screen="game"] .players { max-height:calc(100dvh - 210px); overflow-y:auto; scrollbar-width:thin; position:sticky; top:12px; }
  body[data-screen="game"] .players>.action-panel,
  body[data-screen="game"] .players>.mulligan { margin:0; padding:14px; }
  body[data-screen="game"] .players .action-panel .buttons { flex-direction:column; }
  body[data-screen="game"] .players .action-panel .buttons button { width:100%; }
  body[data-screen="game"] .players .caster-options { max-height:190px; }
  body[data-screen="game"] .hand-area { border-left:2px solid var(--gold); }
  body[data-screen="game"] .player-panel { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:4px 8px; padding:12px; margin-bottom:12px; }
  body[data-screen="game"] .player-panel>.small,
  body[data-screen="game"] .player-name,
  body[data-screen="game"] .deck-badge { grid-column:1/-1; margin:0; }
  body[data-screen="game"] .player-name { font-size:20px; }
  body[data-screen="game"] .deck-badge { font-size:11px; margin-bottom:5px; }
  body[data-screen="game"] .score { grid-column:1; font-size:32px; line-height:1.1; }
  body[data-screen="game"] .win { grid-column:1; }
  body[data-screen="game"] .leader-thumb { grid-column:2; grid-row:4/8; align-self:center; width:48px; height:88px; margin:0; }
  body[data-screen="game"] .player-panel .statline { grid-column:1; font-size:12px; margin:0; gap:5px; }
  body[data-screen="game"] .player-panel>.small:not(:first-child) { font-size:12px; line-height:1.4; margin-top:5px; }
  body[data-screen="game"] .player-panel .quiet.full { grid-column:1/-1; margin-top:6px; padding:7px; }
  body[data-screen="game"] .right-panel {
    grid-column:auto; display:flex; flex-direction:column; gap:12px; padding:0;
    background:none; border:0; box-shadow:none; min-width:0;
    position:sticky; top:12px; max-height:calc(100dvh - 210px); overflow-y:auto; scrollbar-width:thin;
  }
  body[data-screen="game"] .right-panel>.card-inspector,
  body[data-screen="game"] .right-panel>.log,
  body[data-screen="game"] .right-panel>.last-opponent-action {
    margin:0; padding:16px; background:#1a2723; border:1px solid #74745a66; border-radius:5px;
  }
  body[data-screen="game"] .right-panel>.player-panel { margin:0; }
  body[data-screen="game"] .right-panel .detail-image { max-height:clamp(190px,27dvh,290px); margin-bottom:12px; }
  body[data-screen="game"] .right-panel .action-panel,
  body[data-screen="game"] .right-panel .mulligan { margin:0; padding:16px; }
  body[data-screen="game"] .action-panel .buttons { flex-wrap:wrap; gap:8px; }
  body[data-screen="game"] .action-panel .buttons button { padding:10px; min-width:105px; }
  body[data-screen="game"] .placement-step { margin:10px 0; padding:10px; }
  body[data-screen="game"] .placement-step p { font-size:13px; }
  body[data-screen="game"] .selected-target { flex-wrap:wrap; }
  body[data-screen="game"] .selected-target small { font-size:12px; }
  body[data-screen="game"] .row-choices button { font-size:13px; min-width:72px; padding:9px 6px; }
  body[data-screen="game"] .right-panel .mulligan h3 { font-size:23px; }
  body[data-screen="game"] .right-panel .mulligan p { font-size:14px; }
  body[data-screen="game"] footer { display:none; }
}

@media (min-width:1000px) and (max-width:1199px) {
  body[data-screen="game"] { --table-row-height:clamp(92px,calc((100dvh - 410px - var(--hand-card-height)) / 3),280px); }
  body[data-screen="game"] main { grid-template-columns:minmax(0,1fr) 360px; padding-top:8px; }
  body[data-screen="game"] .game-top .eyebrow { font-size:11px; }
}

@media (max-width:999px) {
  body[data-screen="game"] main { max-width:none; padding:18px 14px; }
  body[data-screen="game"] .right-panel { display:flex; flex-direction:column; gap:16px; }
  body[data-screen="game"] .right-panel>.action-panel,
  body[data-screen="game"] .right-panel>.mulligan { margin:0; }
  body[data-screen="game"] .right-panel>.log { margin-top:0; }
}