@font-face { font-family:Nunito; src:url('/fonts/Nunito.ttf') format('truetype'); font-style:normal; font-weight:200 900; font-display:swap; }
:root {
  --paper:#f5f1e6; --surface:#fffdf6; --ink:#263e42; --muted:#64726d;
  --line:#cfc9b6; --jade:#257665; --coral:#d57b69; --gold:#b58c43; --header-height:68px;
  --move:#028abf; --step-two:#6755d5; --attack:#d13b35;
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(ellipse at 50% 35%,#fffdf7,var(--paper)); }
/* Distant islands frame a quiet, lit play surface behind the transparent
   canvas. The scenery is decorative and never participates in map picking. */
body[data-world="marble"] {
  --world-sky:#b9d5dd; --world-horizon:#e8efea; --world-ground:#c4d8d4;
  --world-light:#f4f4e9; --world-glow:#fff8df;
  --world-art:url('./art/world-marble.svg');
}
body[data-world="sun"] {
  --world-sky:#e4bf98; --world-horizon:#f5e8d1; --world-ground:#dfc097;
  --world-light:#faf0db; --world-glow:#ffe3a2;
  --world-art:url('./art/world-sun.svg');
}
body[data-world="aurora"] {
  --world-sky:#b4c6df; --world-horizon:#e9edf5; --world-ground:#c6d4e5;
  --world-light:#f2f4fb; --world-glow:#ddf6ef;
  --world-art:url('./art/world-aurora.svg');
}
body[data-world="verdant"] {
  --world-sky:#a8c8b9; --world-horizon:#e6ecd4; --world-ground:#bdcfab;
  --world-light:#f2f3df; --world-glow:#f7f0ba;
  --world-art:url('./art/world-verdant.svg');
}
body[data-world] .board-frame {
  background:
    radial-gradient(ellipse at 50% 48%,var(--world-light) 10%,color-mix(in srgb,var(--world-light) 75%,transparent) 38%,transparent 76%),
    var(--world-art) center / 100% 100% no-repeat,
    radial-gradient(ellipse at 78% 15%,var(--world-glow),transparent 48%),
    linear-gradient(180deg,var(--world-sky),var(--world-horizon) 54%,var(--world-ground));
  isolation:isolate;
}
body[data-world] .board-frame::before {
  content:''; position:absolute; inset:-5%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 12% 38%,#ffffff65,transparent 28%),radial-gradient(ellipse at 88% 59%,#fffdf45c,transparent 25%);
  opacity:.7; transform:translate3d(-1%,0,0);
}
body[data-world][data-animations="on"][data-match-result="playing"] .board-frame::before { animation:world-mist 28s ease-in-out infinite alternate; }
body[data-world][data-animations="on"][data-match-result="playing"]:has(dialog[open],#order-feedback[data-paused="true"]) .board-frame::before { animation-play-state:paused; }
body:is([data-match-result="winner"],[data-match-result="draw"]) .board-frame::before { opacity:.25; }
body[data-world] #board { background:transparent; position:relative; z-index:1; }
@keyframes world-mist { to { transform:translate3d(1%,1%,0); opacity:.45; } }
@media(prefers-reduced-motion:reduce) { body[data-world] .board-frame::before { animation:none!important; } }
.leader-thinking { position:absolute; z-index:0; right:5%; bottom:100px; width:clamp(100px,16vw,220px); pointer-events:none; text-align:center; color:var(--thinking-color,var(--ink)); }
.leader-thinking img { display:block; width:100%; height:auto; opacity:.4; filter:saturate(.7); transform:rotate(-4deg); animation:leader-plan 3s ease-in-out infinite; }
.thinking-label { color:var(--thinking-color,var(--ink)); }
.thinking-dots { display:flex; justify-content:center; gap:5px; margin:0 auto 7px; }
.thinking-dots i { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.25; animation:thinking-dot 1.5s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay:.2s; }.thinking-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes leader-plan { 50% { transform:rotate(3deg) translateY(-4px); opacity:.55; } }
@keyframes thinking-dot { 50% { opacity:.9; transform:translateY(-3px); } }
@media(max-width:600px) { .leader-thinking { bottom:110px; right:20px; width:112px; } }
@media(prefers-reduced-motion:reduce) { .leader-thinking img,.thinking-dots i { animation:none; } }
body[data-animations="off"] .leader-thinking img,body[data-animations="off"] .thinking-dots i { animation:none; }
/* A ruler's short line covers the HUD card for a moment: never the board, the
   dock or a tap (the card and Stats stay usable beneath it). */
.scorebar { position:relative; }
.leader-speech { position:absolute; z-index:2; top:0; left:0; right:0; min-height:100%; display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border:1px solid color-mix(in srgb,var(--speech-color) 45%,#f2e3bd); border-radius:14px; background:color-mix(in srgb,var(--speech-light) 30%,#fffaf2); box-shadow:0 6px 22px #1f2c2a2e; pointer-events:none; animation:leader-speech-in .26s ease-out both; }
.leader-speech[hidden] { display:none; }
.leader-speech img { flex:0 0 44px; width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 20%; background:var(--speech-light); box-shadow:0 0 0 2px #fffaf2,0 0 0 3px var(--speech-color); }
.leader-speech p { position:relative; flex:1; min-width:0; margin:0; font-size:13px; line-height:1.35; color:#2f3a35; text-wrap:pretty; }
.leader-speech strong { display:block; font-size:12px; line-height:1.3; color:var(--speech-dark); }
@keyframes leader-speech-in { from { opacity:0; transform:translateY(-6px); } }
@media(prefers-reduced-motion:reduce) { .leader-speech { animation:none; } }
body[data-animations="off"] .leader-speech { animation:none; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; border:0; }
button:disabled { cursor:default; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,summary:focus-visible { outline:3px solid #078dbc; outline-offset:3px; }
a { color:inherit; text-decoration:none; }
svg { display:block; }
[hidden] { display:none!important; }
.coin-icon { display:inline-block; flex:none; width:1em; height:1em; min-width:1em; max-width:1em; max-height:1em; padding:0; vertical-align:-.12em; }
.coin-amount { display:inline-flex; align-items:center; justify-content:center; gap:.2em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.player-resource strong .coin-amount { display:inline-flex; font-size:inherit; color:inherit; }
.player-resource strong .coin-icon { font-size:.58em; min-width:12px; min-height:12px; }
.recruit-price .coin-amount { gap:1px; }
.recruit-price .coin-icon { width:10px; height:10px; min-width:10px; max-width:10px; max-height:10px; padding:0; }
.app-shell { max-width:1480px; margin:auto; padding:0 28px; }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; border-bottom:1px solid #dcd8c7; }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:850; letter-spacing:-.5px; }
.brand-mark { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; background:#2b787e; border:2px solid #fffdf7; box-shadow:0 2px 0 #bed0c0; border-radius:12px; transform:rotate(-5deg); }
.brand-mark svg { width:25px; fill:#ffe3a0; stroke:#ffe3a0; stroke-width:1.5; }
.brand-caption { display:block; font:750 8px Nunito,sans-serif; letter-spacing:1.6px; color:#78867b; margin-top:1px; }
.topnav { display:flex; align-items:center; gap:16px; }
.text-button { padding:10px 0; background:none; color:var(--ink); font-size:12px; font-weight:650; }
.text-button span { margin-left:6px; }
.topnav .text-button { color:#405e53; }
.topnav .text-button span { color:#9b7940; }
.outline-button { background:transparent; border:1px solid #b5a27b; padding:11px 14px; color:var(--ink); border-radius:8px; font-size:12px; font-weight:650; }
.outline-button:hover { background:#e8e7d9; }
.topnav .outline-button { color:#365d54; border-color:#c6ceba; background:#fffdf7; }
.topnav .outline-button:hover { background:#e7eee0; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; align-items:start; padding-top:16px; }
.board-column { min-width:0; }
.matchbar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; margin-bottom:10px; }
.turn-summary { display:flex; align-items:center; gap:10px; }
.round-label { font-size:10px; letter-spacing:1px; font-weight:750; color:#8a662f; }
.turn-summary strong { font-size:16px; }
#turn-subtitle { font-size:12px; color:#617368; }
.scorebar { display:flex; align-items:stretch; gap:12px; }
.player-card { display:flex; align-items:center; gap:9px; flex:1; min-width:0; padding:12px; border-radius:14px; border:1px solid #d0ddcb; background:color-mix(in srgb,var(--jade-light) 50%,#fffdf7); box-shadow:0 2px 0 #d9e0cd; }
.bot-card { border-color:#e1d3c3; background:color-mix(in srgb,var(--coral-light) 50%,#fffdf7); box-shadow:0 2px 0 #e6dac8; }
.player-avatar { flex:0 0 32px; height:32px; display:grid; place-items:center; border:2px solid #fff9e5; border-radius:11px; color:#fff2cf; font-size:22px; }
.player-avatar.jade { background:var(--jade); }
.player-avatar.coral { background:var(--coral); }
.player-name { min-width:0; }
.player-name strong { display:block; font-size:14px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-name>span { display:block; margin-top:3px; font-size:10px; color:#637469; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-resource { margin-left:auto; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }
.player-resource strong { display:block; font-size:21px; font-weight:850; color:#8b621f; }
.player-resource strong span { font-size:10px; color:#8b713f; }
.player-resource>span { display:block; margin-top:1px; font-size:10px; color:#637469; }
.player-cities { display:none; }
.scorebar-divider { display:none; }
.army-summary { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:#536957; padding:10px 2px; }
.board-frame { position:relative; overflow:hidden; border:1px solid #ced7be; border-radius:18px; background:#e8efdc; box-shadow:0 6px 26px #263a4b0d; }
#board { display:block; width:100%; height:580px; touch-action:none; cursor:grab; background:radial-gradient(ellipse at 50% 48%,#f6f6e7,#dbe8ca 86%); }
#board.panning { cursor:grabbing; }
.board-loading { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; background:#e3e8dce8; backdrop-filter:blur(3px); color:#355564; }
.board-loading strong { font-size:14px; font-weight:600; text-align:center; padding:0 20px; }
.loading-orbit { width:32px; height:32px; border:2px solid #b4c9ba; border-top-color:#225a6c; border-radius:50%; animation:spin 1s linear infinite; }
.game-error { margin:6px 2px; color:#912c25; font-size:12px; line-height:1.5; }
.turn-transition { position:absolute; z-index:12; left:50%; top:42%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border:1px solid color-mix(in srgb,var(--turn-color) 40%,#fff4dc); border-radius:999px; background:#fffaf0ed; box-shadow:0 6px 32px #143d4233; backdrop-filter:blur(12px); pointer-events:none; white-space:nowrap; animation:turn-handoff var(--turn-duration,450ms) ease both; }
.turn-transition-crest { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--turn-color); color:#fff2cc; font-size:25px; border:2px solid var(--turn-accent); }
.turn-transition strong { display:block; font-size:19px; color:#234344; }
.turn-transition small { display:block; font-size:11px; color:#546b61; margin-top:2px; }
@keyframes turn-handoff { 0% { opacity:0; transform:translate(-50%,-40%) scale(.94); } 22%,72% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-58%) scale(1.02); } }
@keyframes spin { to { transform:rotate(360deg); } }
.turn-dock { display:flex; align-items:center; gap:12px; margin-top:10px; padding:12px; background:#fffaf0; border:1px solid #c8cbbb; border-radius:12px; box-shadow:0 3px 10px #213b4d0c; z-index:7; }
.turn-dock-status { flex:1; min-width:0; }
.turn-dock-status strong { display:block; font-size:13px; }
.turn-dock-status span { display:block; font-size:11px; color:#53695f; margin-top:4px; line-height:1.35; }
.next-unit { min-height:44px; border:1px solid #c0cbbc; border-radius:9px; background:#edf1e4; color:#365c49; padding:10px 13px; font-size:12px; font-weight:650; white-space:nowrap; }
.next-unit span { margin-left:5px; }
.primary-button { background:#2d7778; border:1px solid #1d6163; border-radius:11px; color:#fffbed; display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:46px; padding:12px 16px; width:100%; font-size:13px; font-weight:800; box-shadow:0 3px 0 #1e5656; }
.primary-button:hover:not(:disabled) { background:#39878a; }
.primary-button:active:not(:disabled) { transform:translateY(1px); }
.primary-button>span:last-child { font-size:20px; line-height:16px; }
.end-turn-area { flex:0 0 156px; }
.assist-turn { display:block; flex:0 0 auto; min-height:44px; padding:10px 12px; border:1px solid #c8cbbb; border-radius:10px; background:#f7f8ed; color:#365e56; font-size:12px; font-weight:800; }
.assist-turn span { color:#ae853d; margin-right:5px; }
.assist-turn:hover:not(:disabled) { background:#e9eee0; }
.text-button.small { font-size:11px; min-height:40px; padding:8px 0; }
.spectator-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.spectator-controls .primary-button { width:auto; min-width:118px; }
.spectator-steps { display:flex; gap:6px; }
.spectator-controls label { font-size:11px; }
.spectator-controls select { width:60px; }
.command-drawer { margin-top:46px; border:1px solid #c8cbbb; border-radius:12px; background:#fffaf0; overflow:hidden; }
.command-drawer>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; font-size:13px; font-weight:650; cursor:pointer; list-style:none; }
.command-drawer>summary::-webkit-details-marker { display:none; }
.command-drawer[open]>summary { border-bottom:1px solid #e0ddce; }
.command-drawer[open]>summary>span { transform:rotate(180deg); }
.command-panel { padding:18px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; }
.eyebrow { font-size:9px; letter-spacing:1.6px; font-weight:750; color:#906d34; margin:0 0 10px; }
.panel-heading .eyebrow { margin:0; }
.command-icon { color:#a98b4e; }
.selection-empty { text-align:center; padding:18px 0; }
.selection-art { width:85px; height:85px; margin:auto; }
.selection-art .tile-shadow { fill:#d4d6b9; }
.selection-art .tile-main { fill:#e7e4ca; stroke:#c5b787; }
.selection-art .tower { fill:#d4c8a4; stroke:#b0955e; }
.selection-art .tower-line { stroke:#a1844d; fill:none; }
.selection-art .cursor { fill:#284f68; stroke:#fffaf0; stroke-width:2; }
.selection-empty h2,.selection-title-row h2 { font-size:24px; font-weight:850; margin:6px 0 10px; }
.selection-empty p,.selection-description { font-size:12px; color:#5b6d60; line-height:1.7; }
.selection-details { padding-top:18px; }
.selection-kicker { font-size:10px; color:#6d7463; letter-spacing:.7px; margin-bottom:7px; }
.unit-portrait { float:right; width:72px; height:72px; margin:-8px -6px 6px 4px; }
.owner-chip { display:inline-block; padding:5px 7px; border-radius:5px; font-size:9px; color:#6d7357; background:#eeefdf; }
.owner-chip.human { color:var(--jade); background:#e8eedc; }
.owner-chip.bot { color:var(--coral); background:#f3e7d8; }
.unit-stats { display:flex; flex-wrap:wrap; gap:5px; clear:both; margin:12px 0; }
.stat { flex:1; padding:8px; background:#eeeedf; border-radius:7px; }
.stat strong { display:block; font-size:13px; }
.stat span { display:block; font-size:8px; margin-top:5px; color:#606d55; }
.stat.spent strong { color:#747c6d; }
.available-actions { display:grid; gap:6px; }
.action-button { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; min-height:44px; background:#edf2e3; border:1px solid #c4ceb7; border-radius:8px; font-size:12px; color:#325b46; text-align:left; }
.action-button small { font-size:10px; }
.action-hint { background:#eef0df; color:#536950; padding:11px; margin:0; font-size:11px; line-height:1.6; border-radius:7px; }
.action-hint.attack { background:#ffede5; color:#984c38; }
.activity-section { border-top:1px solid #dedac7; padding-top:16px; margin-top:20px; }
.activity-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.activity-heading h3 { margin:0; font-size:13px; }
.activity-heading>span { font-size:10px; color:#63745f; }
.activity-log { max-height:200px; overflow:auto; list-style:none; margin:12px 0 0; padding:0; }
.activity-log li { padding:7px 0 7px 11px; font-size:11px; line-height:1.6; color:#546a58; position:relative; }
.activity-log li::before { content:""; position:absolute; top:15px; left:0; width:4px; height:4px; background:#a58e57; border-radius:50%; }
.bot-note { display:flex; gap:8px; background:#eee8d6; padding:12px; border-radius:8px; margin-top:18px; }
.bot-note>span { color:#987c3e; }
.bot-note p { margin:0; font-size:11px; line-height:1.6; color:#6c694f; }
.site-footer { border-top:1px solid #d3cbb6; display:flex; justify-content:space-between; gap:12px; font-size:10px; color:#66725f; padding:16px 0 20px; margin-top:16px; }
.accessible-board { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; border:1px solid #c6cdb7; background:#fffaf0; border-radius:9px; padding:8px; }
.accessible-tile { min-height:44px; padding:3px; border:1px solid #bfcbb1; border-radius:5px; background:#ebeedf; color:#466043; font-size:9px; overflow-wrap:anywhere; }
.accessible-tile.jade { background:#dcecdf; color:#1c6147; }
.accessible-tile.coral { background:#f1ded2; color:#984c36; }
.accessible-tile.move { background:#cceffd; border:2px solid var(--move); }
.accessible-tile.attack { background:#ffded5; border:2px solid var(--attack); }
.accessible-tile.selected { outline:2px solid #b58521; }
.game-dialog { position:fixed; width:460px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:28px; border:1px solid #b19862; background:#fffaf0; color:var(--ink); border-radius:16px; box-shadow:0 24px 100px #0b213866; }
.game-dialog::backdrop { background:#102a4277; backdrop-filter:blur(4px); }
.dialog-close { position:absolute; right:12px; top:10px; width:44px; height:44px; color:#607369; background:transparent; font-size:26px; }
.game-dialog h2 { font-size:30px; font-weight:850; letter-spacing:-.6px; margin:0 30px 12px 0; }
.game-dialog p { color:#586f60; font-size:12px; line-height:1.7; }
.game-dialog label { display:block; margin:18px 0 8px; font-size:12px; font-weight:600; color:#4d685d; }
.game-dialog input,.game-dialog select,.spectator-controls select { display:block; width:100%; min-height:44px; padding:11px; border:1px solid #c6c6b0; border-radius:8px; background:#f5f1e3; color:#2e4f5e; font-size:14px; }
.seed-field { display:flex; gap:8px; margin-bottom:20px; }
.seed-field input { min-width:0; }
.seed-field button { flex:0 0 44px; background:#e9e2c7; color:#886b33; border-radius:8px; font-size:24px; }
.civilization-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.civilization-choices select { font-size:12px; padding:10px 8px; }
.civilization-preview { display:flex; align-items:center; gap:8px; padding:10px; margin-top:8px; background:var(--civ-light); border-radius:8px; min-height:76px; }
.civ-crest { flex:0 0 40px; height:44px; display:grid; place-items:center; background:color-mix(in srgb,var(--civ-color) 12%,transparent); border:1px solid #c4a76b; border-radius:12px; overflow:hidden; }
.civ-crest img { width:40px; height:44px; object-fit:contain; }
.civilization-preview strong { display:block; font-size:12px; font-weight:800; color:var(--civ-color); }
.civilization-preview small { display:block; font-size:10px; line-height:1.4; color:#496651; margin-top:4px; }
.help-dialog { width:590px; padding:0; overscroll-behavior:contain; scrollbar-gutter:stable; }
.help-header { padding:26px 24px 14px; }
.help-dialog h2 { font-size:30px; margin-bottom:6px; }
.help-dialog h3 { margin:0 0 12px; font-size:16px; font-weight:850; }
.help-dialog p { font-size:14px; line-height:1.5; margin:5px 0 0; }
.help-dialog .eyebrow { margin:0 0 6px; font-size:10px; color:#846b37; }
.help-goal { display:flex; align-items:center; gap:13px; margin:0 24px; padding:14px 16px; border:1px solid #b9d3c8; border-radius:12px; background:#e8f1e9; }
.help-goal>span { flex:0 0 34px; color:#267463; font-size:32px; text-align:center; }
.help-goal svg { width:34px; fill:currentColor; }
.help-goal strong { font-size:15px; }
.help-goal p { font-size:13px; }
.help-start { padding:22px 24px 18px; }
.help-steps { display:grid; gap:15px; padding:0; margin:0; list-style:none; }
.help-steps>li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; }
.help-steps>li>span { display:grid; place-items:center; height:26px; border-radius:50%; color:#376d61; background:#e6ecdf; font-size:13px; font-weight:850; }
.help-steps strong { font-size:15px; line-height:26px; }
.help-steps p { margin:2px 0 0; }
.help-control { margin:0 24px 20px; padding:16px; border:1px solid #d5daca; border-radius:12px; background:#f1f3e7; }
.help-control>div+div { border-top:1px solid #d6dece; margin-top:12px; padding-top:12px; }
.help-control strong { font-size:14px; }
.help-reference { margin:0 24px; border-top:1px solid #dcd8c7; }
.help-reference>details { border-bottom:1px solid #dcd8c7; }
.help-reference summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:12px 0; color:#314f48; font-size:15px; font-weight:800; cursor:pointer; list-style:none; }
.help-reference summary::-webkit-details-marker { display:none; }
.help-reference summary>span { display:grid; place-items:center; flex:0 0 24px; height:24px; border-radius:50%; background:#e9eddf; color:#517466; font-size:20px; font-weight:500; transition:transform .15s; }
.help-reference details[open]>summary>span { transform:rotate(45deg); }
.help-detail-body { padding:0 0 17px; }
.help-detail-body>p+p { margin-top:12px; }
.help-mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
.help-mission-grid>div { padding:12px; background:#efeee0; border-radius:10px; }
.help-mission-grid>div>span { display:inline-block; width:26px; color:#416d60; font-size:20px; vertical-align:middle; }
.help-mission-grid strong { font-size:14px; }
.help-mission-grid p { font-size:13px; }
.help-rule-list { display:grid; gap:13px; margin:0; }
.help-rule-list dt { font-size:14px; font-weight:800; }
.help-rule-list dd { font-size:14px; line-height:1.5; color:#586f60; margin:3px 0 0; }
.help-troops { display:grid; gap:10px; margin-bottom:12px; }
.help-troops>div { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#f0efe1; border-radius:10px; }
.help-troops img { width:44px; height:64px; object-fit:contain; flex-shrink:0; }
.help-troops>div>div { flex:1; min-width:0; }
.help-troops strong { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:15px; }
.help-troops strong span { font-size:13px; color:#85672d; }
.help-troops p { font-size:13px; margin:3px 0; }
.help-troops small { display:block; font-size:12px; color:#586f60; }
.help-dialog .help-key { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; margin-top:16px; }
.help-footer { position:sticky; bottom:0; padding:16px 24px 20px; background:#fffaf0; border-top:1px solid #e3dfd0; margin-top:20px; }
.help-footer .primary-button { min-height:48px; font-size:14px; }
@media(max-width:520px) {
  .game-dialog.help-dialog { padding:0; }
  .help-header { padding:22px 18px 14px; }
  .help-goal,.help-control,.help-reference { margin-left:18px; margin-right:18px; }
  .help-goal { padding:12px; gap:10px; }
  .help-start { padding:20px 18px; }
  .help-footer { padding:12px 18px 16px; }
  .help-mission-grid { grid-template-columns:1fr; }
}
@media(pointer:coarse) { .help-dialog .help-key { display:none; } }
.keycap { border:1px solid #c8cdb6; background:#edf0df; border-radius:5px; padding:5px 8px; }
.game-dialog.victory-dialog { width:480px; padding:0; text-align:center; background:var(--ending-light,#fffaf0); border-color:var(--ending-accent,#b19862); }
.victory-stage { height:155px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 100%,var(--ending-color) 0%,var(--ending-dark) 80%); }
.victory-stage::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 65%,#071b262b); pointer-events:none; }
.victory-halo { position:absolute; width:125px; height:125px; border:1px solid var(--ending-accent); border-radius:50%; left:50%; top:25px; transform:translateX(-50%); box-shadow:0 0 0 15px #ffffff08,0 0 0 16px #ffffff15; }
.victory-ruler { position:relative; z-index:1; display:block; width:170px; height:170px; object-fit:contain; margin:0 auto; filter:drop-shadow(0 8px 10px #071b2666); }
.victory-emblem { position:absolute; z-index:2; right:18px; bottom:16px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--ending-accent); background:var(--ending-dark); color:var(--ending-accent); font-size:26px; }
.victory-story { padding:18px 24px 20px; }
.victory-story .victory-ruler-name { margin:0; font-size:15px; font-weight:850; color:var(--ending-dark); }
.victory-story .victory-ruler-civ { margin:0 0 15px; font-size:11px; }
.victory-story .eyebrow { margin:0 0 6px; color:var(--ending-color); letter-spacing:2px; font-size:11px; }
.victory-dialog h2 { margin:0; font-size:32px; line-height:1.08; letter-spacing:-.6px; color:var(--ending-dark); }
.victory-dialog h2:focus { outline:none; }
.victory-story .victory-quote { margin:12px 0; font-size:14px; font-style:italic; color:var(--ending-color); line-height:1.5; }
.victory-story #victory-description { margin:0; }
.victory-story .victory-record { margin:4px 0 0; font-size:10px; }
.victory-rival { display:flex; gap:10px; align-items:center; justify-content:center; padding:12px 0; margin:12px 0; border-top:1px solid color-mix(in srgb,var(--ending-color) 18%,transparent); border-bottom:1px solid color-mix(in srgb,var(--ending-color) 18%,transparent); text-align:left; }
.victory-rival img { width:42px; height:44px; object-fit:contain; }
.victory-rival strong,.victory-rival small { display:block; }
.victory-rival strong { font-size:12px; }
.victory-rival small { margin-top:3px; font-size:10px; color:#586f60; }
.victory-dialog .primary-button { min-height:48px; background:var(--ending-color); box-shadow:0 4px 0 var(--ending-dark); }
.victory-dialog .text-button { min-height:44px; margin-top:8px; color:var(--ending-dark); }
.victory-dialog[data-outcome='defeat'] .victory-stage { background:radial-gradient(ellipse at 50% 100%,var(--ending-color),#14252b 90%); }
.victory-dialog[data-outcome='defeat'] .victory-halo { border-style:dashed; box-shadow:none; }
/* The winner's painted banner stands behind the ruler, as in the tribe codex. */
.victory-stage[data-art] { background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--ending-dark) 62%,transparent) 0 58px,transparent 120px),linear-gradient(color-mix(in srgb,var(--ending-dark) 26%,transparent),transparent 45%,color-mix(in srgb,var(--ending-dark) 55%,transparent)),var(--victory-banner) 64% 42%/cover no-repeat,var(--ending-dark); }
.victory-dialog[data-outcome='defeat'] .victory-stage[data-art] { background:radial-gradient(circle at 50% 70%,#14252bb3 0 58px,transparent 120px),linear-gradient(#14252b80,#14252b33 45%,#14252bcc),var(--victory-banner) 64% 42%/cover no-repeat,#14252b; }
.victory-dialog[data-outcome='defeat'] .victory-stage[data-art] .victory-halo { border-color:#fffaf099; }
.victory-story .victory-quote-by { margin:-8px 0 12px; font-size:12px; font-weight:750; color:var(--ending-dark); }
.victory-chronicle { margin:14px 0 2px; text-align:left; }
.victory-chronicle h3 { margin:0; font-size:13px; font-weight:850; color:var(--ending-dark); }
.victory-chronicle .match-chronicle { margin-top:8px; }
.victory-chronicle .match-chronicle li { padding-bottom:8px; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.victory-chronicle .match-chronicle li:last-child { padding-bottom:0; }
.victory-chronicle .match-chronicle li::before { box-shadow:0 0 0 2px var(--ending-light,#fffaf0),0 0 0 3px color-mix(in srgb,var(--tribe-color) 45%,transparent); }
.victory-chronicle .match-chronicle strong { display:block; font-size:12px; letter-spacing:.01em; }
.victory-chronicle .match-chronicle strong::after { content:none; }
.victory-chronicle .match-chronicle b { font-weight:800; }
@media(max-height:720px) { .victory-stage { height:160px; } .victory-ruler { width:175px; height:175px; margin-top:0; } .victory-halo { width:130px; height:130px; top:20px; } .victory-story { padding:14px 20px 16px; } }
@media(max-width:1100px) {
  .app-shell { padding:0 18px; }
  .game-layout { grid-template-columns:minmax(0,1fr) 250px; gap:16px; }
  .player-avatar { display:none; }
  .scorebar { gap:8px; }
  .player-card { padding:10px; }
  .player-name strong { font-size:12px; }
  .player-resource strong span { display:none; }
  .turn-dock { gap:8px; padding:10px; }
  .end-turn-area { flex-basis:130px; }
}
@media(max-width:800px) {
  :root { --header-height:60px; }
  .app-shell { padding:0 12px; }
  .topbar { height:60px; }
  .brand { font-size:20px; }
  .game-layout { grid-template-columns:1fr; gap:0; padding-top:8px; }
  .command-drawer { margin:4px 0 0; }
  .command-panel { padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .panel-heading,.bot-note { grid-column:1/-1; }
  .selection-empty,.selection-details { grid-column:1; }
  .activity-section { grid-column:2; margin-top:0; border:0; padding-top:0; }
  .selection-details { padding-top:0; }
  .player-avatar { display:grid; }
  #board { height:clamp(380px,60svh,560px); }
  .control-dock { position:sticky; bottom:max(8px,env(safe-area-inset-bottom)); z-index:7; }
  .turn-dock { box-shadow:0 6px 24px #173a4622; }
  .site-footer>span:nth-child(2) { display:none; }
}
@media(max-width:480px) {
  :root { --header-height:56px; }
  .app-shell { padding:0 8px; }
  .topbar { gap:8px; height:56px; }
  .brand { gap:7px; font-size:18px; }
  .brand-caption { display:none; }
  .brand-mark { width:30px; height:30px; }
  .brand-mark svg { width:22px; }
  .topnav { gap:12px; }
  .topnav .text-button { min-height:44px; font-size:11px; }
  .topnav .text-button span { display:none; }
  .topnav .outline-button { padding:10px; min-height:40px; font-size:11px; }
  .matchbar { min-height:32px; margin-bottom:7px; }
  .turn-summary { gap:8px; }
  .turn-summary strong { font-size:14px; }
  .round-label { font-size:9px; }
  #turn-subtitle { font-size:10px; max-width:130px; text-align:right; }
  .scorebar { gap:7px; }
  .player-card { flex-basis:0; gap:6px; padding:9px; border-radius:10px; }
  .player-avatar { flex-basis:25px; height:25px; font-size:17px; }
  .player-name strong { font-size:11px; }
  .player-name>span { font-size:9px; margin-top:4px; }
  .player-resource strong { font-size:16px; }
  .player-resource>span { font-size:9px; }
  .scorebar-divider { display:none; }
  .bot-card { padding-left:8px; }
  .army-summary { font-size:10px; padding:8px 2px; gap:7px; }
  #board { height:clamp(370px,57svh,490px); }
  .turn-dock { padding:8px; gap:7px; margin-top:8px; }
  .turn-dock-status strong { font-size:11px; }
  .turn-dock-status span { font-size:10px; }
  .next-unit { padding:10px; font-size:11px; }
  .next-unit span { display:none; }
  .end-turn-area { flex-basis:110px; }
  .primary-button { padding:12px; font-size:12px; min-height:46px; gap:8px; }
  .command-panel { display:block; }
  .panel-heading { margin-bottom:12px; }
  .selection-empty { padding:4px 0; }
  .selection-art { display:none; }
  .activity-section { border-top:1px solid #dedac7; padding-top:16px; margin-top:20px; }
  .game-dialog { padding:24px 20px; }
  .game-dialog input,.game-dialog select { font-size:16px; }
  .civilization-choices { gap:8px; }
  .civilization-choices select { font-size:13px; }
  .civilization-preview { padding:9px 7px; gap:6px; }
  .civilization-preview small { font-size:9px; }
  .spectator-controls { flex:1; justify-content:center; gap:6px; }
  .turn-dock:has(.spectator-controls:not([hidden])) { flex-wrap:wrap; }
  .turn-dock:has(.spectator-controls:not([hidden])) .turn-dock-status { flex-basis:100%; }
  .spectator-controls label { display:none; }
  .spectator-controls select { width:54px; padding:8px; font-size:12px; }
  .spectator-steps .outline-button { padding:10px 9px; font-size:11px; min-height:44px; }
  .spectator-controls .primary-button { min-width:100px; }
}
@media(max-width:360px) { .player-avatar { display:none; } .next-unit { padding:9px; } .end-turn-area { flex-basis:101px; } .brand { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }
.map-actions { position:absolute; z-index:5; transform:translate(-50%,-100%); pointer-events:none; }
.map-actions.offscreen { visibility:hidden; }
.combat-preview { position:absolute; z-index:8; left:50%; bottom:calc(var(--dock-height,72px) + 24px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(340px,calc(100% - 24px)); padding:12px 14px; border:1px solid #b6c8be; border-radius:18px; background:rgba(255,253,244,.96); box-shadow:0 8px 28px #203c3426; color:var(--ink); pointer-events:none; }
.combat-preview-title { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#687a71; }
.combat-preview-sides { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0; }
.combat-preview-side { display:flex; align-items:center; gap:7px; min-width:0; }
.combat-preview-side img { width:45px; height:52px; object-fit:contain; flex:none; }
.combat-preview-side strong,.combat-preview-side span { display:block; font-size:13px; white-space:nowrap; }
.combat-preview-side strong { color:var(--combat-color); }
.combat-preview-side span { font-size:12px; margin-top:3px; font-variant-numeric:tabular-nums; }
.combat-preview-result { display:flex; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid #dde3d5; font-size:13px; }
.combat-preview-result strong { color:#b24738; }
.combat-preview-danger { color:#b24738; font-weight:700; }
.combat-preview-details,.combat-preview-hint { display:block; font-size:11px; line-height:1.4; margin-top:6px; }
.combat-preview-hint { color:#718279; }
.squad-panel { padding:10px; border:1px solid var(--command-border,#b4c5b7); border-radius:13px; background:color-mix(in srgb,var(--command-light,#d2eceb) 18%,#fffdf5); max-height:min(310px,44dvh); overflow:auto; }
.squad-mission { font-size:14px; margin:4px 0 8px; color:var(--command-dark); }
.squad-status { margin:5px 0 9px; font-size:12px; line-height:1.4; }
.squad-formation-control { display:grid; gap:7px; margin:12px 0; font-size:11px; }
.formation-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.formation-heading>span { font-size:10px; color:#526c60; }
.formation-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.formation-choices button { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:44px; padding:4px 6px; font-size:14px; font-weight:700; }
.formation-choices button:disabled { opacity:.5; cursor:default; }
.formation-icon { width:20px; height:20px; flex:none; fill:currentColor; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.squad-formation-control small { font-size:12px; line-height:1.4; }
.formation-preview { position:relative; height:90px; width:100%; isolation:isolate; overflow:hidden; border-radius:6px; background:url('./art/formation-ground.svg') center bottom/100% 100% no-repeat; }
.formation-piece { position:absolute; display:block; width:20px; height:24px; transform:translate(-50%,-100%); }
.formation-piece::after { content:''; position:absolute; left:20%; right:20%; bottom:-1px; height:4px; border-radius:50%; background:#274a3a30; z-index:-1; }
.formation-piece.is-enemy::after { background:#bd423a99; }
.formation-enemy-label { position:absolute; right:0; top:0; padding:1px 3px; border-radius:4px; background:#fff0e5; color:#9b3f32; font-size:8px; font-weight:800; }
.formation-piece img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 1px #243b2728); }
.help-squad-steps { padding-left:20px; margin:14px 0; display:grid; gap:10px; font-size:14px; line-height:1.5; }
.help-formation-example { padding:14px; margin:16px 0 12px; background:#e8eddb; border:1px solid #cdd8bc; border-radius:12px; }
.help-formation-example .formation-heading { font-size:14px; }
.help-formation-example .formation-heading>span { font-size:11px; }
.help-formation-example p { font-size:13px; }
.formation-preview-large { height:145px; max-width:250px; margin:8px auto; }
.formation-preview-large .formation-piece { width:36px; height:42px; }
.formation-preview-large .formation-enemy-label { font-size:11px; }
.help-formation-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.help-formation-card { min-width:0; margin:0; padding:10px; border:1px solid #d9ddc9; border-radius:10px; background:#f3f2e5; }
.help-formation-card figcaption { font-size:14px; font-weight:800; }
.help-formation-card .formation-preview { height:110px; margin:6px 0; }
.help-formation-card .formation-piece { width:25px; height:29px; }
.help-dialog .help-formation-card p,.help-dialog .help-formation-caption { font-size:12px; }
.help-dialog .help-formation-caption { margin:12px 0 18px; }
.squad-tools { display:flex; gap:5px; }
.squad-tools { position:sticky; top:34px; z-index:2; padding:5px 0; background:color-mix(in srgb,var(--command-light,#d2eceb) 18%,#fffdf5); }
.squad-tools button { flex:1; min-width:0; min-height:44px; padding:6px; font-size:14px; border-radius:9px; }
.squad-tools button[aria-pressed="true"] { background:var(--squad-color); color:#fffdf4; }
.control-dock .squad-tools button { color:var(--command-dark); border:1px solid var(--command-border); background:color-mix(in srgb,var(--command-light) 42%,#fffaf0bd); }
.control-dock .squad-tools button[aria-pressed="true"] { background:var(--squad-color); color:#fffdf4; }
.board-frame[data-layout="sides"] .selection-controls:has(.squad-panel:not([hidden])) { width:340px; }
.selection-controls:has(.squad-panel:not([hidden])) { max-height:calc(100dvh - 210px); overflow:auto; }
@media(max-height:500px) and (min-width:650px) {
  .selection-controls:has(.squad-panel:not([hidden])) .city-menu-body { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .selection-controls:has(.squad-panel:not([hidden])) .city-menu-body:has(.army-panel[hidden]) { grid-template-columns:1fr; }
  .squad-panel { max-height:160px; }
  .squad-status { font-size:12px; }
}
.board-frame[data-layout="sides"] .combat-preview { bottom:18px; }
.board-frame .combat-preview { left:10px; top:140px; bottom:auto; transform:none; width:min(280px,calc(100% - 20px)); padding:10px 12px; border-radius:13px; background:#fffdf6fa; }
.combat-preview::after { content:''; position:absolute; width:10px; height:10px; background:#fffdf6; transform:rotate(45deg); border:1px solid #b6c8be; }
.combat-preview[data-edge="bottom"]::after { top:calc(100% - 5px); left:calc(var(--target-arrow) - 5px); border-left:0; border-top:0; }
.combat-preview[data-edge="top"]::after { top:-6px; left:calc(var(--target-arrow) - 5px); border-right:0; border-bottom:0; }
.combat-preview[data-edge="left"]::after { left:-6px; top:calc(var(--target-arrow) - 5px); border-right:0; border-top:0; }
.combat-preview[data-edge="right"]::after { left:calc(100% - 5px); top:calc(var(--target-arrow) - 5px); border-left:0; border-bottom:0; }
.combat-preview-title { font-size:12px; letter-spacing:.04em; }
.combat-preview-sides { gap:8px; margin:6px 0; }
.combat-preview-side { gap:6px; }.combat-preview-side>div { min-width:0; }
.combat-preview-side img { width:32px; height:42px; }
.combat-preview-side strong { font-size:14px; white-space:normal; line-height:1.2; }
.combat-preview-details,.combat-preview-hint { font-size:12px; line-height:1.3; }
@media(max-height:500px) {
  .board-frame .combat-preview { padding:8px 10px; }
  .combat-preview-title,.combat-preview-hint { display:none; }
  .combat-preview-sides { margin:0 0 5px; }.combat-preview-side img { width:28px; height:36px; }
  .combat-preview-result { padding-top:5px; }.combat-preview-details { margin-top:4px; }
}
.order-feedback { position:absolute; z-index:8; width:max-content; max-width:calc(100% - 20px); padding:8px 11px; border:1px solid color-mix(in srgb,var(--order-color) 45%,#d1ddd5); border-radius:10px; background:#fffdf6f5; color:var(--order-color); font-size:14px; font-weight:750; box-shadow:0 3px 12px #173a461a; pointer-events:none; }
.order-pulse { position:absolute; z-index:5; width:46px; height:24px; margin:-12px 0 0 -23px; border:3px solid var(--order-color); border-radius:50%; pointer-events:none; animation:order-accepted 650ms ease-out 2; }
@keyframes order-accepted { from { transform:scale(.6); opacity:1; } to { transform:scale(1.8); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .order-pulse { animation:none; } }
.capture-marker { display:flex; align-items:center; gap:7px; min-height:44px; padding:9px 12px; border:1.5px solid var(--capture-accent,#e5c472); border-radius:12px; background:var(--capture-color,#2b787e); color:#fff9e5; box-shadow:0 3px 0 var(--capture-dark,#1b594d),0 5px 12px #193c3930; font-size:12px; font-weight:850; white-space:nowrap; pointer-events:auto; }
.capture-marker svg { width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.capture-marker:hover { background:var(--capture-dark,#1b594d); }
.capture-marker:active { box-shadow:0 1px 0 var(--capture-dark,#1b594d); }
.recruit-tray { display:flex; gap:8px; margin-top:8px; padding:7px; border:1px solid #c8cbbb; border-radius:12px; background:#fffaf0; }
.recruit-choice { flex:1; display:grid; grid-template-columns:24px 1fr; align-items:center; column-gap:8px; min-height:48px; padding:7px 9px; color:#31584a; border:1px solid #c1ceba; border-radius:8px; background:#eef2e5; text-align:left; }
.recruit-choice svg:not(.coin-icon) { grid-row:1/3; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.recruit-choice span { font-size:12px; font-weight:650; }
.recruit-choice small { font-size:10px; margin-top:3px; }
@media(max-width:480px) { .recruit-tray { gap:5px; padding:6px; } .recruit-choice { gap:5px; grid-template-columns:20px 1fr; padding:7px; } .recruit-choice svg:not(.coin-icon) { width:20px; height:20px; } .recruit-choice span { font-size:11px; } }

@media(max-width:600px) { .turn-dock { flex-wrap:wrap; } .turn-dock-status { flex-basis:100%; } .turn-dock .next-unit,.turn-dock .assist-turn,.turn-dock .end-turn-area { flex:1 1 0; } .assist-turn { font-size:11px; padding:10px 6px; } }

/* The board is the screen; compact HUD elements float above it. */
.app-shell { max-width:none; padding:0; }
.game-layout { display:block; padding:0; }
.board-frame { min-height:100dvh; border:0; border-radius:0; box-shadow:none; }
#board { height:100dvh; --map-top:150px; --map-bottom:100px; }
.topbar { position:absolute; inset:12px 16px auto; height:44px; z-index:9; border:0; pointer-events:none; }
.topbar a,.topbar button,.topbar summary,.command-panel { pointer-events:auto; }
.brand { font-size:18px; gap:8px; background:#fffdf3dc; padding:3px 7px; border-radius:10px; }
.brand-mark { width:30px; height:30px; }
.brand-caption { display:none; }
.topnav { gap:6px; }
.topnav .outline-button,.topnav .text-button,.command-drawer>summary { min-height:44px; padding:10px 12px; border:1px solid #c6ceba90; border-radius:10px; background:#fffdf6de; font-size:12px; color:#365d54; backdrop-filter:blur(12px); }
.topnav .text-button span { display:none; }
.map-hud { position:absolute; top:64px; left:50%; transform:translateX(-50%); width:min(680px,calc(100% - 32px)); z-index:3; pointer-events:none; }
.matchbar { min-height:24px; margin-bottom:6px; padding:0 4px; }
.turn-summary,#turn-subtitle { background:#fffdf3e8; border-radius:6px; padding:3px 6px; }
.turn-summary strong { font-size:14px; }
#turn-subtitle { font-size:11px; }
.scorebar { gap:8px; }
.player-card { padding:7px 10px; gap:8px; border-radius:12px; box-shadow:0 2px 10px #203a3410; background:color-mix(in srgb,var(--jade-light) 28%,#fffdf6e8); }
.bot-card { background:color-mix(in srgb,var(--coral-light) 28%,#fffdf6e8); }
.player-avatar { display:grid; flex-basis:27px; height:27px; font-size:18px; border-radius:9px; }
.player-name strong { font-size:12px; }
.player-name>span { font-size:9px; margin-top:1px; }
.player-name small { display:block; font-size:9px; color:#536957; margin-top:1px; }
.player-resource strong { font-size:18px; }
.player-resource strong span { display:inline; font-size:9px; }
.player-resource>span { font-size:9px; }
.control-dock { position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(740px,calc(100% - 32px)); z-index:7; pointer-events:none; }
.control-dock button,.control-dock select { pointer-events:auto; }
.turn-dock { margin:0; padding:9px 10px; gap:9px; border-color:#bec9b69c; background:#fffdf3e6; backdrop-filter:blur(16px); box-shadow:0 6px 24px #173a4622; }
.turn-dock-status strong { font-size:12px; }
.turn-dock-status span { margin-top:2px; font-size:10px; }
.end-turn-area { flex-basis:132px; }
.recruit-tray { margin:0 0 7px; order:-1; background:#fffdf3e6; backdrop-filter:blur(16px); }
.control-dock { display:flex; flex-direction:column; }
.command-drawer { position:static; margin:0; border:0; overflow:visible; background:transparent; }
.command-drawer>summary { font-weight:700; gap:6px; }
.command-drawer[open]>summary { border-bottom:1px solid #c6ceba90; background:#e4ecdbe8; }
.command-panel { position:absolute; right:0; top:52px; width:300px; max-height:calc(100dvh - 180px); overflow:auto; display:block; padding:16px; border:1px solid #c8cbbb; border-radius:14px; background:#fffdf3f5; box-shadow:0 12px 40px #213b4d22; backdrop-filter:blur(16px); }
.selection-empty { padding:8px 0; }
.selection-art { display:none; }
.selection-empty h2,.selection-title-row h2 { font-size:20px; }
.selection-details { padding-top:10px; }
.activity-section { border-top:1px solid #dedac7; padding-top:12px; margin-top:12px; }
.bot-note { margin-top:12px; padding:9px; }
#seed-display { display:block; margin-top:12px; font-size:9px; color:#66725f; }
.game-error { position:absolute; bottom:90px; left:50%; transform:translateX(-50%); padding:8px 12px; background:#fff0e6e8; border-radius:8px; z-index:10; max-width:90%; }
.accessible-board { position:absolute; inset:160px 16px 110px; z-index:6; overflow:auto; }
@media(max-width:600px) {
  .topbar { inset:8px 8px auto; gap:6px; }
  .brand { font-size:15px; gap:5px; }
  .brand-mark { width:25px; height:25px; border-radius:8px; }
  .brand-mark svg { width:19px; }
  .topnav { gap:4px; }
  .topnav .text-button,.topnav .outline-button,.command-drawer>summary { padding:10px 8px; font-size:11px; }
  .command-drawer>summary>span { display:none; }
  .map-hud { top:58px; width:calc(100% - 16px); }
  .matchbar { min-height:21px; margin-bottom:4px; }
  .turn-summary { gap:7px; }
  .turn-summary strong { font-size:12px; }
  .round-label { font-size:9px; }
  #turn-subtitle { font-size:9px; max-width:none; }
  .scorebar { gap:6px; }
  .player-card { padding:6px 8px; gap:6px; }
  .player-name strong { font-size:11px; }
  .player-name>span { display:none; }
  .player-name small { font-size:8px; }
  .player-resource strong { font-size:16px; }
  .player-resource strong span { display:none; }
  .player-resource>span { font-size:8px; }
  #board { --map-top:130px; --map-bottom:145px; }
  .control-dock { width:calc(100% - 16px); bottom:max(8px,env(safe-area-inset-bottom)); }
  .turn-dock { padding:7px; gap:6px; }
  .turn-dock-status { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .turn-dock-status strong { font-size:10px; }
  .turn-dock-status span { font-size:9px; margin:0; }
  .turn-dock .next-unit,.turn-dock .assist-turn,.turn-dock .end-turn-area { flex:1 1 0; min-width:0; }
  .next-unit,.assist-turn { font-size:10px; padding:10px 5px; min-height:44px; }
  .next-unit span,.assist-turn span { display:none; }
  .end-turn-area .primary-button { font-size:11px; padding:10px 8px; min-height:44px; }
  .command-panel { right:0; width:min(300px,calc(100vw - 16px)); top:50px; max-height:calc(100dvh - 165px); }
  .accessible-board { inset:135px 8px 140px; }
  .game-error { bottom:110px; }
}
@media(max-width:360px) { .brand-mark { display:none; } .brand { font-size:14px; } .player-avatar { display:none; } .topnav .text-button,.topnav .outline-button,.command-drawer>summary { padding:10px 7px; } }

/* The ending stays visible while the final board remains interactive. */
.recap-button { pointer-events:auto; min-height:44px; padding:6px 10px; border:1px solid #bac8bc; border-radius:9px; background:#fffdf3e8; color:#365d54; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.recap-button:disabled { opacity:.6; cursor:default; }
.recap-button[aria-expanded="true"] { background:#173e56; color:#fffdf3; }
.turn-recap-panel { position:absolute; z-index:8; width:min(330px,calc(100% - 16px)); overflow:auto; padding:12px; border:1px solid #bac8bc; border-radius:14px; background:#fffdf3f2; box-shadow:0 8px 28px #173e5626; backdrop-filter:blur(12px); }
.turn-recap-panel header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.turn-recap-panel h2 { margin:0; font-size:16px; }
.turn-recap-panel header button { min-width:44px; min-height:44px; border:0; background:transparent; font-size:25px; color:#53695e; cursor:pointer; }
.turn-recap-panel header .recap-all { font-size:11px; padding:5px; border:1px solid #c7d2c4; border-radius:7px; }
#turn-recap-summary { font-size:12px; margin:0 0 8px; line-height:1.5; }
.recap-instruction,#turn-recap-empty { margin:5px 0; font-size:11px; color:#64726d; }
.recap-place { display:flex; width:100%; text-align:left; align-items:center; gap:9px; padding:9px 5px; min-height:44px; border:0; border-top:1px solid #d9dfd1; background:transparent; font:inherit; cursor:pointer; color:#263e42; }
.recap-place strong,.recap-place small { display:block; }
.recap-place strong { font-size:12px; }.recap-place small { font-size:11px; line-height:1.4; margin-top:2px; }
.recap-place-number { flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#e8d89c; font-size:11px; font-weight:900; }
.recap-place[aria-pressed="true"] { background:#e7efdf; border-radius:7px; }
.topnav .recap-button[aria-expanded="true"] { background:#173e56; color:#fffdf3; }
@media(max-width:600px) { .recap-button { padding:6px 7px; font-size:10px; } .matchbar { gap:6px; } }
.result-emblem { width:24px; height:24px; flex:none; fill:var(--result-accent); stroke:var(--result-accent); stroke-width:2; }
.turn-summary[role="button"] { pointer-events:auto; cursor:pointer; }
.turn-summary[role="button"]:focus-visible { outline:3px solid var(--result-accent); outline-offset:3px; }
body[data-match-result="winner"] .board-frame { background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--result-light) 78%,transparent),color-mix(in srgb,var(--result-color) 30%,var(--result-light))),var(--world-art) center / cover no-repeat var(--result-light); }
body[data-match-result="draw"] .board-frame { background:radial-gradient(ellipse at 50% 40%,#faf9f1,var(--result-light)); }
body:is([data-match-result="winner"],[data-match-result="draw"]) .turn-summary { min-width:0; justify-content:flex-start; padding:6px 9px; gap:7px; background:var(--result-dark); color:#fffdf3; border:1px solid var(--result-accent); border-radius:9px; }
body:is([data-match-result="winner"],[data-match-result="draw"]) #turn-label { line-height:1.2; }
.player-card[data-winner="true"] { border-color:var(--result-color); box-shadow:0 0 0 1px var(--result-color),0 2px 10px #203a3410; }
/* Use the spare margins created by the board's projected aspect ratio. */
.control-dock { width:min(590px,calc(100% - 32px)); }
.turn-dock { padding:6px; gap:6px; border-radius:12px; }
.turn-dock-status { padding:0 4px; }
.turn-dock-status strong { font-size:11px; }
.turn-dock-status span { font-size:9px; }
.next-unit,.assist-turn { padding:9px; font-size:11px; }
.end-turn-area { flex-basis:116px; }
.end-turn-area .primary-button { min-height:44px; padding:9px 12px; font-size:12px; }
.board-frame[data-layout="sides"] #board { --map-top:70px; --map-bottom:30px; --map-left:235px; --map-right:175px; }
.board-frame[data-layout="sides"] .map-hud { top:80px; left:16px; width:210px; transform:none; }
.board-frame[data-layout="sides"] .matchbar { display:block; margin-bottom:10px; }
.board-frame[data-layout="sides"] .turn-summary { justify-content:space-between; gap:6px; }
.board-frame[data-layout="sides"] #turn-subtitle { display:none; }
.board-frame[data-layout="sides"] .scorebar { flex-direction:column; gap:7px; }
.board-frame[data-layout="sides"] .control-dock { width:145px; left:auto; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); top:auto; transform:none; }
.board-frame[data-layout="sides"] .turn-dock { flex-direction:column; gap:6px; padding:6px; }
.board-frame[data-layout="sides"] .turn-dock-status { width:100%; padding:4px; }
.board-frame[data-layout="sides"] .turn-dock-status span { display:none; }
.board-frame[data-layout="sides"] .next-unit,.board-frame[data-layout="sides"] .assist-turn,.board-frame[data-layout="sides"] .end-turn-area { flex:0 0 auto; width:100%; }
.board-frame[data-layout="sides"] .recruit-tray { flex-direction:column; padding:5px; gap:5px; }
.board-frame[data-layout="sides"] .recruit-choice { flex:0 0 auto; }
.board-frame[data-layout="sides"] .accessible-board { right:175px; left:235px; top:80px; bottom:40px; }
@media(max-width:600px) {
  .control-dock { width:calc(100% - 16px); }
  .turn-dock { padding:6px; gap:5px; }
  .turn-dock-status { padding:0 2px; }
  .turn-dock-status strong { font-size:10px; }
  .turn-dock-status span { font-size:9px; }
  .next-unit,.assist-turn { font-size:10px; padding:9px 4px; }
  .end-turn-area .primary-button { font-size:11px; padding:9px 8px; }
  .end-turn-area .primary-button>span:first-child { white-space:nowrap; }
  .end-turn-area .primary-button>span:last-child { display:none; }
}
.animation-speed { min-width:44px; font-variant-numeric:tabular-nums; }
.pause-menu { --menu-color:#287b85; --menu-light:#e0efeb; --menu-dark:#173e51; width:430px; padding:26px; border:1px solid #ffffffaa; border-radius:26px; background:linear-gradient(145deg,color-mix(in srgb,var(--menu-light) 60%,#fcfbf6),#faf8f1 60%); box-shadow:0 28px 100px #071e3255,0 1px 0 #ffffff inset; }
.pause-menu::backdrop,.unit-info-dialog::backdrop { background:#102b3d80; backdrop-filter:blur(9px) saturate(.75); }
.pause-menu .dialog-close,.unit-info-dialog .dialog-close { width:44px; height:44px; top:12px; right:12px; border-radius:50%; background:#ffffff8c; color:var(--menu-dark,var(--ink)); font-size:25px; }
.pause-heading { display:flex; align-items:center; gap:14px; margin:0 30px 22px 0; }
.pause-portrait { display:block; flex:0 0 62px; width:62px; height:72px; border-radius:20px; background:color-mix(in srgb,var(--menu-color) 13%,#ffffff); overflow:hidden; box-shadow:0 0 0 1px #ffffff inset; }
.pause-portrait img { width:100%; height:100%; object-fit:contain; }
.pause-menu .pause-heading .eyebrow { margin:0 0 5px; color:var(--menu-color); font-size:9px; letter-spacing:1.3px; line-height:1.4; }
.pause-menu h2 { margin:0 0 4px; font-size:29px; color:var(--menu-dark); }
.pause-round { color:#617272; font-size:11px; }
.pause-preferences { padding:0 16px; background:#ffffffa3; border:1px solid #ffffff; border-radius:18px; }
.menu-setting { padding:14px 0; border-top:1px solid #d7e0d9; }
.menu-setting:first-child { border-top:0; }
.pause-menu .animation-setting { position:relative; display:flex; align-items:center; gap:12px; margin:0; min-height:44px; cursor:pointer; }
.animation-setting>span:first-child { flex:1; }
.animation-setting strong,.route-setting>label { display:block; color:var(--ink); font-size:15px; font-weight:800; }
.animation-setting small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.pause-menu .animation-setting input { position:absolute; right:0; width:48px; height:44px; margin:0; opacity:0; cursor:pointer; }
.setting-switch { flex:0 0 46px; height:28px; padding:3px; border:1px solid #98ab9a; border-radius:18px; background:#bec8b9; pointer-events:none; }
.setting-switch::after { content:''; display:block; width:20px; height:20px; background:#fffdf4; border-radius:50%; box-shadow:0 1px 4px #203a3422; }
.animation-setting input:checked+.setting-switch { background:var(--menu-color,#2d7473); border-color:var(--menu-color,#2d7473); }
.animation-setting input:checked+.setting-switch::after { transform:translateX(18px); }
.animation-setting input:focus-visible+.setting-switch { outline:3px solid #078dbc; outline-offset:4px; }
.pause-menu .route-setting { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; gap:8px; }
.pause-menu .route-setting>label { margin:0; }
.pause-menu .route-setting select { appearance:none; padding:10px 22px 10px 10px; min-height:44px; background:#f3f6ef; border-color:#c9d7cd; border-radius:10px; font-size:12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%23536d67' stroke-width='1.8'/%3E%3C/svg%3E"); background-size:16px; background-repeat:no-repeat; background-position:right 6px center; }
.pause-menu .route-setting p { grid-column:1/-1; font-size:11px; line-height:1.5; margin:0; }
.pause-menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.pause-menu-actions .outline-button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:46px; padding:12px; border:1px solid #d5dfd5; border-radius:13px; background:#ffffff70; color:var(--menu-dark); text-align:left; font-size:12px; }
.pause-menu-actions .outline-button:has(.pause-tool-icon) { justify-content:flex-start; }
.pause-tool-icon { display:grid; place-items:center; width:28px; height:32px; color:var(--menu-color); font-size:23px; flex:none; }
.pause-menu-actions small { display:block; margin-top:3px; color:#627775; font-weight:500; font-size:10px; }
.pause-menu-actions #friend-links { grid-column:1/-1; }
.pause-menu-actions .outline-button:hover { border-color:var(--menu-color); background:#ffffff; }
.pause-menu .save-status { margin:14px 0 10px; font-size:10px; line-height:1.5; color:#65756e; text-align:center; }
.pause-footer .primary-button { width:100%; min-height:52px; padding:13px 17px; border-radius:14px; font-size:14px; background:var(--menu-color); box-shadow:0 4px 0 var(--menu-dark); }
.turn-dock-title { display:flex; align-items:center; gap:4px; }
.turn-dock-status { text-align:left; }
.turn-dock-status>span { text-align:left; }
.turn-dock .next-unit,.turn-dock .assist-turn,.turn-dock .end-turn-area .primary-button { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; }
.turn-dock .next-unit>span,.turn-dock .end-turn-area .primary-button>span:last-child { position:absolute; right:10px; margin:0; }
@media(max-width:600px) {
 .turn-dock-status { justify-content:flex-start; flex-wrap:wrap; gap:3px 12px; }
 .turn-dock-title { flex:0 1 auto; }
 .turn-dock-status>span { flex:0 1 auto; }
}
.unit-info-button { flex:none; display:grid; place-items:center; width:44px; height:44px; margin:-8px 0; border-radius:50%; background:none; color:var(--command-color,#287b85); font-size:21px; font-weight:600; }
.unit-info-button:hover { background:#edf3e9; }
.unit-info-dialog { width:490px; border:1px solid #ffffffaa; border-radius:24px; padding:24px; background:linear-gradient(145deg,color-mix(in srgb,var(--unit-light) 65%,#fcfbf6),#fcfaf4 50%); }
.unit-info-heading { display:flex; align-items:center; gap:14px; padding-right:24px; margin-bottom:18px; }
.unit-info-heading>img { width:82px; height:90px; object-fit:contain; border-radius:20px; background:color-mix(in srgb,var(--unit-color) 12%,white); }
.unit-info-heading .eyebrow { margin:0 0 3px; font-size:9px; color:var(--unit-color); }
.unit-info-heading h2 { font-size:27px; margin:0; }
.unit-info-heading p:last-child { margin:4px 0 0; font-size:11px; }
.unit-info-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.unit-info-summary>div { padding:12px 9px; border:1px solid #ffffff; border-radius:14px; background:#ffffffa6; }
.unit-info-summary small,.unit-info-summary strong,.unit-info-summary span { display:block; }
.unit-info-summary small { color:#60736e; font-size:11px; }
.unit-info-summary strong { margin:3px 0; font-size:25px; color:var(--unit-color); font-variant-numeric:tabular-nums; }
.unit-info-summary span { font-size:9px; line-height:1.4; color:#677873; }
.unit-info-bonuses { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.unit-info-bonuses h3 { margin:0 0 8px; font-size:13px; color:var(--unit-color); }
.unit-info-bonuses dl { margin:0; }
.unit-info-bonuses dl>div { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0; padding:5px 0; font-size:11px; }
.unit-info-bonuses dd { margin:0; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.unit-info-bonuses dl>div:last-child { border-top:1px solid #cfd9cf; margin-top:4px; font-weight:800; }
.unit-info-dialog .unit-info-note { font-size:11px; line-height:1.6; margin:16px 0; }
.unit-info-dialog>.outline-button { width:100%; min-height:44px; border-color:#becfc4; }
@media(max-width:360px) {
 .pause-menu,.unit-info-dialog { padding:20px 16px; }
 .pause-heading { gap:10px; }
 .pause-portrait { flex-basis:48px; width:48px; height:62px; }
 .pause-menu h2 { font-size:25px; }
 .pause-preferences { padding:0 12px; }
 .pause-menu-actions .outline-button { padding:10px 8px; font-size:11px; }
 .pause-tool-icon { width:22px; font-size:20px; }
 .unit-info-heading>img { width:58px; height:72px; }
 .unit-info-heading h2 { font-size:23px; }
 .unit-info-bonuses { gap:10px; }
 .unit-info-bonuses dl>div { font-size:10px; }
}
.continue-panel { margin:20px 0; }
.continue-panel button { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:13px 16px; text-align:left; border-color:#8bac9c; background:#eef5eb; }
.continue-panel strong,.continue-panel small { display:block; }
.continue-panel strong { font-size:15px; }
.continue-panel small { margin-top:3px; font-size:12px; font-weight:500; }
.game-dialog .continue-error { color:#963d2f; }

/* The title screen owns its space; the battle HUD stays compact in-game. */
.game-dialog.start-screen { overflow-x:hidden; inset:0; margin:0; width:100%; max-width:none; height:100dvh; max-height:none; border:0; border-radius:0; padding:28px max(24px,calc((100vw - 1120px)/2)) 110px; background:radial-gradient(ellipse at 12% 30%,var(--tribe-light,#d2eceb),transparent 64%),#f8f4e9; box-shadow:none; }
.start-header { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:84px; margin-bottom:24px; }
/* One speaker button mutes or restores all sound on the start screen; the menu has separate switches. */
.start-sound { flex:none; display:grid; place-items:center; width:44px; height:44px; margin-left:auto; padding:0; border-radius:50%; border:1px solid #b19862; background:#fffaf0cc; color:var(--tribe-dark,#3b4f47); cursor:pointer; }
.start-header:has(#start-close:not([hidden])) .start-sound { display:none; }
.start-sound svg { width:22px; height:22px; }
.start-sound .speaker { fill:currentColor; }
.start-sound .waves, .start-sound .mute { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.start-sound .mute, .start-sound[aria-pressed="false"] .waves { display:none; }
.start-sound[aria-pressed="false"] .mute { display:inline; }
.start-header .eyebrow { font-size:9px; letter-spacing:2.5px; margin:0 0 8px; color:var(--tribe-dark); }
.start-header h1 { font-size:32px; line-height:1.05; letter-spacing:-1.4px; margin:0; font-weight:900; }
.start-header h1>span { display:block; margin-top:9px; font-size:13px; font-weight:550; letter-spacing:0; color:var(--muted); }
.start-header .dialog-close { position:static; flex:none; width:36px; height:36px; border-radius:50%; background:#ffffff88; }
.start-entry-actions { display:grid; gap:10px; margin:0 0 20px; }
.start-entry-actions .continue-panel { margin:0; }
.start-entry-actions .continue-panel button,.start-entry-actions .tutorial-entry { margin:0; min-height:52px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; width:100%; border:1px solid #b9cdbf; border-radius:14px; background:#fffdf3e6; color:var(--ink); font-size:15px; text-align:left; }
.start-entry-actions .continue-error { margin:0; }
.new-game-section { padding:22px; border:1px solid color-mix(in srgb,var(--tribe-color) 32%,#ffffff); border-radius:22px; background:#fffdf5b8; }
.new-game-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid #cad7c8; }
.new-game-heading h2 { margin:0; font-size:26px; }
/* The shuffle is a struck brass token lying on the table, not a framed tile. */
#shuffle-tribes { display:grid; place-items:center; flex:none; width:48px; height:48px; padding:0; background:none; border:0; border-radius:50%; }
.new-game-section .start-settings { padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.start-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:56px; align-items:start; }
.tribe-showcase { position:sticky; top:8px; min-width:0; }
.tribe-pickers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.tribe-pickers button { display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 3px; border:1px solid transparent; background:transparent; color:#566966; border-radius:14px; font-size:12px; transition:background .2s,border-color .2s; }
.tribe-pickers button[aria-pressed="true"] { border-color:var(--tribe-color); background:#fffdf7ba; color:var(--tribe-dark); box-shadow:0 5px 18px #173e560b; }
.tribe-pickers button>span { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:#fff0c3; font-size:25px; box-shadow:inset 0 0 0 2px #ffffff66; }
.tribe-symbol { display:block; width:72%; height:72%; fill:currentColor; flex:none; }
.tribe-art { position:relative; height:310px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr); gap:12px; margin:12px 0 0; isolation:isolate; }
.tribe-hero { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; min-height:0; margin:0; text-align:center; }
.tribe-hero>img { width:100%; height:100%; min-height:0; object-fit:contain; filter:drop-shadow(0 9px 8px #233f4022); }
.tribe-hero figcaption { padding:8px 0; min-height:60px; }
.tribe-hero strong { display:block; font-size:15px; line-height:1.25; color:var(--tribe-dark); }
.tribe-hero small { display:block; margin-top:3px; font-size:12px; color:#536761; }
.tribe-halo { position:absolute; left:50%; top:0; transform:translateX(-50%); width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,#fffdf7c9,var(--tribe-light) 60%,transparent 70%); border:1px solid #ffffff77; z-index:-1; }
#tribe-mythic-art { height:100%; width:100%; object-fit:contain; filter:drop-shadow(0 12px 8px #233f4022); }
.tribe-story { padding:14px 8px 0; }
.tribe-story>.eyebrow { margin:0 0 4px; font-size:9px; letter-spacing:2px; color:var(--tribe-color); }
.tribe-story h2 { color:var(--tribe-dark); font-size:34px; margin-bottom:8px; }
.tribe-story>p:not(.eyebrow) { font-size:13px; line-height:1.65; margin:0; }
.tribe-lore { margin-top:14px; padding:12px 0; border-top:1px solid #ffffff99; }
.tribe-lore summary { display:flex; justify-content:space-between; gap:8px; cursor:pointer; font-size:12px; color:var(--tribe-dark); font-weight:750; }
.tribe-lore h3 { font-size:13px; margin:14px 0 0; }
.tribe-lore p { margin:8px 0 0; }
.start-settings { display:grid; grid-template-columns:115px minmax(0,1fr); gap:11px 12px; padding:24px; border:1px solid #fffdfa; border-radius:22px; background:#fffdf7c9; box-shadow:0 12px 50px #1b39410c; }
.start-settings>h2,.start-settings>p,.start-settings>div,.start-settings>button,.start-settings>section { grid-column:1/-1; }
.start-settings>h2 { margin:0 0 2px; font-size:25px; }
.start-settings>.eyebrow { margin:0; font-size:9px; letter-spacing:1.8px; color:#997343; }
.start-settings>label { margin:0; align-self:center; font-size:12px; }
.start-settings>.seed-field { grid-column:2; margin:0; min-width:0; gap:6px; }
.start-settings>.seed-field input { flex:1; width:0; min-width:0; padding:9px; }
.start-settings>.seed-field button { min-height:44px; padding:6px; }
.start-settings>select { grid-column:2; font-size:12px; padding:10px 7px; min-width:0; }
.start-screen select { appearance:none; min-height:44px; height:44px; padding-right:26px!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23536b66' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.start-settings .civilization-choices label { margin:3px 0 7px; }
.start-settings .civilization-preview { min-height:48px; padding:8px; }
.start-settings .civilization-preview .civ-crest { width:32px; height:32px; }
.start-settings .civilization-preview small { display:none; }
.start-settings #army-setup-note { display:none; }
.start-settings #turn-order-field label,.start-settings #jade-policy-field label { margin:3px 0 7px; }
.start-settings #friend-setup-note,.start-settings #size-policy-note { margin:0; font-size:11px; line-height:1.5; }
.start-actions { position:fixed; right:max(24px,calc((100vw - 1120px)/2)); bottom:0; z-index:4; width:min(calc(100vw - 48px),452px); padding:14px 0 max(18px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,#f8f4e9 25%); }
.start-actions .primary-button { width:100%; margin:0; min-height:54px; border-radius:14px; background:#226777; border:1px solid #164653; box-shadow:0 4px 0 #164653; color:#fffdf3; }
.mythic-choice .recruit-figure { border-color:#c1a560; box-shadow:0 0 0 2px #f0d58a66,0 2px 7px #9e7c3433; }
.mythic-count { display:block; margin-top:3px; font-size:9px; font-weight:700; color:#8c6d2d; }
#thinking-quote { display:block; max-width:230px; font-size:11px; font-weight:600; line-height:1.5; text-wrap:pretty; margin:6px 0 0; color:var(--thinking-color); }
.player-avatar[role="button"],.seat-emblem { cursor:pointer; padding:0; overflow:hidden; }
.player-avatar>img,.seat-emblem>img { display:block; width:100%; height:100%; object-fit:contain; }
.leader-profile-dialog { background:linear-gradient(145deg,var(--tribe-light),#fffaf0); text-align:center; }
.leader-profile-dialog>.eyebrow { color:var(--tribe-color); margin-top:0; }
#leader-profile-art { width:150px; height:150px; object-fit:contain; }
.leader-profile-dialog h2 { margin:8px 0; font-size:30px; }
#leader-profile-controller { margin:0 0 16px; font-size:11px; }
#leader-profile-quote { display:block; font-size:16px; font-weight:800; line-height:1.6; color:var(--tribe-color); }
.leader-profile-mythic { display:flex; align-items:center; gap:12px; text-align:left; margin:20px 0; padding:12px; background:#fffaf0aa; border-radius:14px; }
.leader-profile-mythic>img { width:90px; height:90px; object-fit:contain; }
.leader-profile-mythic p { margin:5px 0; line-height:1.5; }
.leader-profile-mythic small { color:var(--muted); font-size:10px; }
.player-card[role="button"] { cursor:pointer; pointer-events:auto; }
.player-card[role="button"]:focus-visible { outline:3px solid #078dbc; outline-offset:3px; }
.start-screen .start-header { min-height:62px; margin-bottom:18px; }
.start-screen .tribe-art { height:300px; }

/* About sits level with the tribe's name; the motto stays tucked beneath the name. */
.start-screen .tribe-story { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; padding-top:12px; }
.start-screen .tribe-story h2 { grid-area:1/1; margin:0; font-size:28px; line-height:1.15; }
.start-screen .tribe-story>p { grid-area:2/1; margin-top:2px; font-size:12px; }
#tribe-details-button { grid-area:1/2/3/3; align-self:start; margin-top:-8px; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; font-size:14px; line-height:1.2; white-space:nowrap; border-color:var(--tribe-color); color:var(--tribe-dark); }
.tribe-about-arrow { flex:none; width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* Tribe codex: key art in the tribe's colours, then a compact read. */
.tribe-details-dialog { width:720px; padding:0 22px 18px; }
.tribe-details-dialog>.dialog-close { z-index:3; color:#fffaf0; }
.tribe-codex-hero { position:relative; display:flex; align-items:flex-end; min-height:178px; overflow:hidden; margin:0 -22px; padding:22px 22px 16px; color:#fffaf0;
  background:radial-gradient(ellipse at 78% 30%,color-mix(in srgb,var(--tribe-color) 55%,#fff 45%),transparent 52%),linear-gradient(160deg,var(--tribe-dark),var(--tribe-color));
  background-size:cover; background-position:center; }
.tribe-codex-hero[data-art] { min-height:220px; background-position:right 40%; background-image:linear-gradient(90deg,color-mix(in srgb,var(--tribe-dark) 92%,transparent),color-mix(in srgb,var(--tribe-dark) 55%,transparent) 48%,transparent 75%),var(--tribe-banner); }
.tribe-codex-hero::after { content:""; position:absolute; inset:auto 0 0; height:3px; background:linear-gradient(90deg,transparent,#f0d488,transparent); }
.tribe-codex-emblem { position:absolute; left:-30px; top:-34px; width:180px; height:180px; opacity:.12; color:#fff; pointer-events:none; }
.tribe-codex-emblem svg { width:100%; height:100%; fill:currentColor; }
.tribe-codex-title { position:relative; z-index:2; flex:1 1 auto; min-width:0; }
.tribe-codex-hero .eyebrow { margin:0 0 6px; font-size:9px; letter-spacing:.18em; color:#f6e3b0 !important; text-transform:uppercase; }
.tribe-details-dialog .tribe-codex-hero h2 { margin:0 0 4px; font-size:32px; line-height:1.02; color:#fffaf0; text-shadow:0 2px 14px #00000066; }
.tribe-details-dialog .tribe-codex-motto { margin:0; font-size:14px; font-style:italic; color:#fff3d6 !important; text-shadow:0 1px 8px #00000055; }
.tribe-codex-figures { position:relative; z-index:1; display:flex; align-items:flex-end; flex:none; height:150px; margin:-6px -10px -16px 0; pointer-events:none; }
.tribe-codex-figures img { height:100%; width:auto; max-width:150px; object-fit:contain; filter:drop-shadow(0 6px 10px #0000005c); }
.tribe-codex-figures img:first-child { height:82%; margin-right:-26px; }
/* A painted banner already shows the tribe's legend, so the cut-outs step aside. */
.tribe-codex-hero[data-art] .tribe-codex-figures { display:none; }
.tribe-codex-hero[data-art] .tribe-codex-emblem { opacity:.08; }
.tribe-way { margin:12px 0 0; padding:9px 12px; border-left:4px solid var(--tribe-color); border-radius:3px 9px 9px 3px; background:color-mix(in srgb,var(--tribe-light) 70%,transparent); font-size:14px; font-weight:700; line-height:1.4; color:var(--tribe-dark) !important; }
.tribe-codex-body { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:22px; }
.tribe-codex-section { padding:12px 0 2px; }
.tribe-codex-section h3 { margin:0 0 6px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--tribe-color); }
.tribe-codex-section p { margin:0; font-size:13px; line-height:1.5; }
.tribe-codex-section h4 { margin:0 0 3px; font-family:var(--display-face,Georgia,serif); font-size:15px; color:var(--tribe-dark); }
.tribe-codex-story::first-letter { float:left; margin:3px 6px 0 0; font-family:var(--display-face,Georgia,serif); font-size:38px; line-height:.8; font-weight:700; color:var(--tribe-dark); }
.tribe-chronicle { position:relative; margin:10px 0 0; padding:0 0 0 18px; list-style:none; }
.tribe-chronicle::before { content:""; position:absolute; left:4px; top:5px; bottom:6px; width:2px; border-radius:2px; background:linear-gradient(var(--tribe-color),color-mix(in srgb,var(--tribe-color) 20%,transparent)); }
.tribe-chronicle li { position:relative; padding:0 0 6px; font-size:12.5px; line-height:1.4; }
.tribe-chronicle li::before { content:""; position:absolute; left:-18px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--tribe-color); box-shadow:0 0 0 2px #fffaf0,0 0 0 3px color-mix(in srgb,var(--tribe-color) 45%,transparent); }
.tribe-chronicle strong { font-family:var(--display-face,Georgia,serif); color:var(--tribe-dark); }
.tribe-chronicle strong::after { content:" · "; color:var(--tribe-color); }
.tribe-chronicle span { color:var(--ink-soft,#5a4532); }
.tribe-chronicle li.illustrated { display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:10px; align-items:center; min-height:52px; }
.tribe-chronicle li.illustrated>strong,.tribe-chronicle li.illustrated>span { grid-column:2; }
.tribe-chronicle li.illustrated>strong::after { content:""; }
.tribe-chronicle li.illustrated>strong { display:block; }
.tribe-chronicle li.illustrated::before { top:50%; margin-top:-5px; }
.tribe-chronicle-scene { grid-row:1/3; width:52px; height:52px; border-radius:10px; object-fit:cover; box-shadow:0 0 0 2px #fffaf0,0 0 0 3px color-mix(in srgb,var(--tribe-color) 55%,transparent),0 4px 10px #0000002e; }
.tribe-ruler-line { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.tribe-ruler-line>img { width:52px; height:52px; flex:none; object-fit:contain; border-radius:50%; background:radial-gradient(circle,var(--tribe-light),#fffaf0 70%); box-shadow:0 0 0 2px var(--tribe-color),0 0 0 4px color-mix(in srgb,var(--tribe-color) 25%,transparent); }
.tribe-ruler-line strong { display:block; font-family:var(--display-face,Georgia,serif); font-size:15px; color:var(--tribe-dark); }
.tribe-ruler-line q { display:block; font-style:italic; font-size:13.5px; quotes:"“" "”"; }
.tribe-stat-chips { display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; padding:0; list-style:none; }
.tribe-stat-chips li { display:inline-flex; align-items:center; gap:4px; min-height:24px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; color:var(--tribe-dark); background:#fffaf0; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tribe-color) 45%,transparent); }
.tribe-chip-icon { width:13px; height:13px; flex:none; fill:var(--tribe-color); color:var(--tribe-color); }
svg.interface-icon.tribe-chip-icon { width:15px; height:15px; }
.tribe-codex-legend { font-style:italic; color:var(--ink-soft,#5a4532); }
@media(max-width:720px) {
 .tribe-codex-body { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:480px) {
 .tribe-details-dialog { padding:0 18px 14px; }
 .tribe-codex-hero { min-height:150px; margin:0 -18px; padding:18px 18px 12px; }
 .tribe-codex-hero[data-art] { min-height:168px; background-position:72% 40%; }
 .tribe-details-dialog .tribe-codex-hero h2 { font-size:25px; }
 .tribe-codex-hero .eyebrow { font-size:8px; margin-right:0; }
 .tribe-codex-figures { height:118px; margin-right:-8px; }
 .tribe-codex-figures img { max-width:104px; }
 .tribe-codex-figures img:first-child { margin-right:-30px; }
}
@media(max-width:800px) {
 .new-game-section { padding:14px; border-radius:18px; }
 .game-dialog.start-screen { padding-top:14px; }
 .start-screen .start-header { margin-bottom:12px; min-height:56px; }
 .start-screen .start-header h1 { font-size:26px; }
 .start-screen .start-header h1>span { margin-top:6px; font-size:12px; }
 .start-screen .tribe-art { height:250px; margin-top:5px; }
 .start-screen .tribe-halo { width:130px; height:130px; }
 .start-screen .tribe-story { padding-top:10px; }
 .start-screen .tribe-story h2 { font-size:23px; }
 #tribe-details-button { margin-top:-9px; }
 .start-screen .start-layout { gap:14px; }
 .start-screen .start-settings { padding:12px 14px; gap:8px 10px; }
}
@media(max-width:800px) {
 .game-dialog.start-screen { padding:20px 16px 108px; }
 .start-header { margin-bottom:18px; gap:12px; flex-wrap:nowrap; align-items:flex-start; }
 .start-header>div { min-width:0; }
 .start-header h1 { font-size:29px; }
 .start-header .eyebrow { font-size:8px; letter-spacing:1.2px; }
 .start-header .dialog-close { margin-left:auto; }
 .start-layout { display:flex; flex-direction:column; gap:22px; }
 .tribe-showcase { position:static; width:100%; }
 .tribe-pickers button { padding:8px 3px; gap:5px; }
 .tribe-art { height:220px; margin-top:8px; }
 .tribe-halo { width:180px; height:180px; }
 .tribe-story { padding:10px 0 0; }
 .tribe-story h2 { font-size:27px; margin-bottom:7px; }
 .tribe-story>p:not(.eyebrow) { font-size:12px; }
 .tribe-details-dialog .tribe-leader>img { width:68px; height:68px; }
 .tribe-legend-card>img { width:72px; height:72px; }
 .tribe-lore { margin-top:10px; padding:10px 0; }
 .start-settings { width:100%; padding:18px 14px; grid-template-columns:100px minmax(0,1fr); border-radius:18px; }
 .start-settings>select,.start-settings .civilization-choices select { font-size:14px; }
 .start-actions { left:16px; right:16px; width:auto; }
 #thinking-quote { font-size:10px; max-width:160px; }
}
/* Phones keep About on the name row with one word; screen readers still hear the full label. */
@media(max-width:480px) {
 .tribe-about-more { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 #tribe-details-button { gap:7px; padding:8px 13px; }
}
@media(max-width:360px) {
 .start-screen .tribe-story { column-gap:8px; }
 .start-screen .tribe-story h2 { font-size:21px; }
}
.army-panel { order:-3; margin-bottom:7px; padding:9px; border:1px solid #c4cbb6; border-radius:12px; background:#fffdf3ee; backdrop-filter:blur(12px); pointer-events:auto; }
.army-mission { display:flex; flex-direction:column; gap:3px; margin:3px 0 7px; }
.army-mission strong { font-size:12px; }
.army-mission span { font-size:10px; color:#526b5b; line-height:1.4; }
.order-buttons { display:flex; gap:5px; flex-wrap:wrap; }
.army-panel button { min-height:44px; flex:1; padding:7px 8px; border:1px solid #b8c9b2; border-radius:8px; background:#eff3e5; color:#31594b; font-size:11px; font-weight:750; }
.order-buttons button { padding-inline:4px; font-size:10px; white-space:nowrap; }
.army-panel button[aria-pressed="true"] { background:#2d7473; color:#fffdf1; border-color:#2d7473; }
.army-panel.compact-orders { padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; pointer-events:none; }
.sergeant-update { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:11px; color:#846023; }
.sergeant-update span { flex:1; }
.army-panel .sergeant-update button { flex:none; min-height:36px; padding:4px 7px; font-size:10px; background:#fff1cd; }
.army-panel .troop-orders-toggle { display:block; margin-left:auto; min-width:80px; background:#fffdf3e6; pointer-events:auto; }
.order-target span { display:block; font-size:12px; font-weight:750; margin:6px 0; }
.order-target>div { display:flex; gap:5px; }
.board-frame[data-layout="sides"] .army-panel { width:230px; align-self:flex-end; }
.board-frame[data-layout="sides"] .recruit-tray { width:230px; align-self:flex-end; display:grid; grid-template-columns:1fr 1fr; }
.board-frame[data-layout="sides"][data-rules="army"] #board { --map-right:260px; }
@media(max-width:800px) {
  .accessible-board { bottom:calc(var(--dock-height,90px) + 70px); }
}
#army-setup-note { color:#516c59; font-size:13px; line-height:1.5; margin:9px 0 15px; }
@media(max-width:600px) { .army-panel { padding:7px; } .army-panel button { font-size:11px; } .recruit-tray { flex-wrap:wrap; } .recruit-choice { flex-basis:40%; } }
@media(max-width:600px) {
  .board-frame[data-rules="army"] #board { --map-bottom:180px; }
  .recruit-tray[data-choices="3"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .recruit-tray[data-choices="1"] { display:grid; grid-template-columns:1fr; }
}
.topnav .animation-speed[aria-pressed="true"] { background:#286f70; color:#fffbed; border-color:#286f70; }
.board-frame[data-layout="sides"] .command-panel { right:165px; }
.board-frame[data-layout="sides"] .spectator-controls { width:100%; flex-direction:column; align-items:stretch; }
.board-frame[data-layout="sides"] .spectator-steps { flex-direction:column; }
.board-frame[data-layout="sides"] .spectator-controls label { display:none; }
.board-frame[data-layout="sides"] .spectator-controls .primary-button { min-width:0; width:100%; }
@media(max-width:600px) {
  .topnav .animation-speed { padding:10px 5px; }
  .brand-mark { display:none; }
  .brand { font-size:14px; }
}
@media(max-width:360px) {
  .brand { font-size:12px; }
  .topnav .text-button,.topnav .outline-button,.command-drawer>summary { padding:10px 5px; font-size:10px; }
}

/* Finish delegation stays beside the action, with a compact phone checklist. */
.turn-assist { position:relative; display:flex; flex:0 0 auto; min-width:0; }
.turn-assist>.assist-turn { flex:1; white-space:nowrap; }
.assist-options { flex:0 0 44px; pointer-events:auto; }
.assist-options>summary { display:grid; place-items:center; min-width:44px; min-height:44px; height:100%; cursor:pointer; list-style:none; border:1px solid #c8cbbb; border-radius:0 10px 10px 0; background:#f7f8ed; color:#365e56; }
.assist-options>summary::-webkit-details-marker { display:none; }
.turn-assist:has(.assist-options:not([hidden]))>.assist-turn { border-radius:10px 0 0 10px; border-right:0; }
.assist-choice-panel { position:absolute; bottom:calc(100% + 7px); right:0; width:290px; max-height:calc(100dvh - 130px); overflow:auto; padding:8px; border:1px solid #c4cbb6; border-radius:10px; background:#fffdf3; box-shadow:0 6px 24px #173a4622; z-index:12; }
.assist-choice-panel button { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; min-height:60px; padding:10px; border-radius:6px; background:transparent; color:#365e56; text-align:left; }
.assist-choice-panel button:hover { background:#e9eee0; }
.assist-choice-panel strong { font-size:12px; }
.assist-choice-panel small { font-size:10px; font-weight:500; line-height:1.4; color:#64726d; }
.delegation-settings { border:0; padding:0; margin:0; min-width:0; }
.delegation-settings legend { padding:5px 7px 0; font-size:14px; font-weight:900; }
.delegation-settings p { margin:4px 7px 7px; font-size:11px; color:#64726d; }
.delegation-settings label { display:flex; align-items:center; gap:10px; min-height:52px; padding:7px; border-radius:6px; cursor:pointer; }
.delegation-settings label:hover { background:#e9eee0; }
.delegation-settings input { flex:0 0 19px; width:19px; height:19px; margin:0; accent-color:#2d7473; cursor:pointer; }
.delegation-settings label span { display:flex; flex-direction:column; gap:3px; }
.delegation-settings label strong { font-size:14px; }.delegation-settings label small { font-size:12px; }
.delegate-recruit-row { display:flex; align-items:center; gap:4px; }.delegate-recruit-row>label { flex:1; min-width:0; }
.delegate-recruit-row #recruit-types-toggle { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; width:auto; min-width:80px; min-height:44px; padding:6px; border:1px solid #c5d1c7; background:#f1f5ed; font-size:12px; text-align:center; }
.delegate-recruit-types { margin:0 7px 7px 16px; padding:3px 0; border:0; border-left:2px solid #c6d5ca; min-width:0; }
.delegate-recruit-types legend { font-size:12px; font-weight:700; padding:0 8px; }
#recruit-type-choices { max-height:224px; overflow:auto; overscroll-behavior:contain; }
#recruit-type-choices label { min-height:44px; gap:8px; padding:4px 8px; font-size:14px; }
#recruit-type-choices img { width:28px; height:34px; object-fit:contain; }
#recruit-type-choices label span { display:block; }
#recruit-type-choices input:disabled~* { opacity:.5; }
.assist-choice-panel .delegation-note { display:block; margin:7px; }
.assist-choice-panel #takeover-turn { border-top:1px solid #dce1d4; border-radius:0 0 6px 6px; margin-top:8px; }
.assist-options>summary:focus-visible { outline:3px solid #078dbc; outline-offset:3px; }
.board-frame[data-layout="sides"] .turn-assist { flex:0 0 auto; width:100%; }
.board-frame[data-layout="sides"] .turn-assist>.assist-turn { flex:1 1 0; width:auto; min-width:0; font-size:10px; padding:9px 4px; }
@media(max-width:600px) {
  .turn-dock .turn-assist { flex:1.5 1 0; }
  .turn-dock .next-unit,.turn-dock .end-turn-area { flex:.8 1 0; }
  .turn-assist>.assist-turn { padding:9px 3px; font-size:10px; }
  .assist-choice-panel { right:-45px; width:min(290px,calc(100vw - 20px)); }
}

/* Private player links remain labeled before and after the guest joins. */
.friend-link-dialog {width:min(480px,calc(100vw - 28px));}
.friend-link-dialog h2 {font-size:clamp(1.6rem,6vw,2rem);}
.friend-link-dialog .current-player-seat {font-size:.85rem;font-weight:800;margin:0 0 16px;}
.player-link-section {border-left:3px solid var(--link-color);padding:8px 0 8px 12px;margin:12px 0;}
.player-link-section label {display:flex;flex-direction:column;gap:2px;margin:0;font-size:.9rem;}
.player-link-section label span {color:var(--link-color);font-size:.8rem;}
.player-link-row {display:flex;gap:8px;align-items:center;justify-content:space-between;}
.friend-link-dialog .player-link-section input {width:100%;min-width:0;font-size:.8rem;margin:8px 0 0;}
.player-link-row .outline-button {flex:none;white-space:nowrap;padding:8px 12px;font-size:.8rem;min-height:44px;}
.friend-link-dialog .primary-button {width:100%;margin-top:8px;}
#both-player-links {width:100%;margin-top:10px;min-height:110px;font-size:.8rem;}
#missing-friend-link,#seat-switch-note {font-size:.85rem;margin:8px 0;}
#friend-link-state {font-size:.86rem;min-height:1.3em;}
#friend-links {width:100%;margin-bottom:12px;}

/* One compact city panel; rally editing opens only on request. */
.selection-controls { order:-2; margin-bottom:7px; pointer-events:none; }
.selection-controls[data-city="true"] { padding:6px 8px; border:1px solid #c4cbb6; border-radius:12px; background:#fffdf3f0; backdrop-filter:blur(12px); box-shadow:0 4px 16px #173a4614; pointer-events:auto; }
.city-overview { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; }
.city-overview>.city-identity { min-width:0; border-left:3px solid var(--city-accent); padding-left:8px; }
.city-overview .city-identity strong { display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.city-switch { display:flex; align-items:center; gap:4px; max-width:100%; min-height:44px; margin:-12px 0 -10px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.city-switch>strong { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.city-switch>svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
.city-switch:disabled { cursor:default; }
.city-switch:disabled>svg { display:none; }
.city-switch:focus-visible { outline:3px solid #078dbc; outline-offset:2px; border-radius:6px; }
.city-overview small { display:block; font-size:10px; color:#526b5b; margin-top:2px; }
.city-menu-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-bottom:7px; }
.city-menu-tabs button { min-width:0; min-height:44px; padding:5px 3px; border-radius:8px; background:#edf1e4b8; border-color:#bdcdb4; color:#355d51; font-size:11px; font-weight:800; }
.city-menu-tabs button[aria-selected="true"] { background:#2e7777; border-color:#2e7777; color:#fffdf3; }
.unit-training-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; height:100%; }
.unit-training-choices button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; min-width:0; height:52px; padding:4px 2px; background:#e8efe0b8; border:1px solid #a8bc9f; border-radius:8px; color:#355d51; }
.unit-training-choices strong { font-size:11px; line-height:14px; }
.unit-upgrade-price { font-size:10px; line-height:12px; color:#82652d; }
.unit-training-choices button[aria-disabled="true"],.unit-training-choices button.unaffordable { background:#edf1e4b0; color:#6b7865; border-color:#c4cbb6; }
.unit-training-choices button.trained { color:#2d7473; border-color:#70a093; }
.unit-training-choices button.trained .unit-upgrade-price { color:inherit; }
.board-frame[data-layout="sides"] .unit-training-choices { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:52px; gap:5px; align-content:start; }
.selection-controls[data-city="true"] .city-menu-body { display:grid; grid-template-rows:var(--city-action-height,52px) var(--city-hint-height,32px); gap:4px; }
.selection-controls[data-city="true"] .city-menu-body>div { grid-area:1/1; min-width:0; }
.selection-controls[data-city="true"] .army-panel { width:auto; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.selection-controls[data-city="true"] .recruit-tray { display:grid; grid-template-columns:repeat(var(--recruit-columns,5),minmax(48px,1fr)); gap:4px; width:auto; height:100%; margin:0; padding:0 0 3px; border:0; background:transparent; backdrop-filter:none; order:0; overflow-x:auto; overscroll-behavior-x:contain; }
.selection-controls[data-city="true"]:has(.recruit-tray:not([hidden])) { --city-action-height:clamp(84px,24vw,100px); }
.city-upgrade-choices { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:0; }
.city-upgrade-choices button { display:grid; grid-template-columns:18px 1fr; gap:2px 5px; min-height:48px; padding:5px 7px; text-align:left; background:#e8efe0b8; border:1px solid #a8bc9f; border-radius:8px; color:#355d51; }
.city-upgrade-choices>button>svg { grid-row:1/3; align-self:center; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.city-upgrade-choices strong { font-size:11px; }
.city-upgrade-choices small { font-size:9px; line-height:1.3; color:#536b5d; }
.city-upgrade-choices button[aria-disabled="true"] { border-color:#c4cbb6; color:#687768; }
.city-upgrade-built { display:flex; align-items:center; gap:8px; height:52px; padding:5px 8px; border-radius:8px; background:#e8efe0b8; border:1px solid #a8bc9f; color:#355d51; }
.city-upgrade-built>svg { flex:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.city-upgrade-built strong,.city-upgrade-built small { display:block; }
.city-upgrade-built strong { font-size:11px; }
.city-upgrade-built small { margin-top:2px; font-size:9px; }
.selection-controls[data-city="true"] .city-upgrade-choices button { height:52px; min-width:0; }
/* A first-tier city shows what it has beside the second tier it can add. */
#city-upgrade-panel[data-tier="1"]:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
#city-upgrade-panel[data-tier="1"] .city-upgrade-built { order:-1; min-width:0; }
#city-upgrade-panel[data-tier="1"] .city-upgrade-choices { grid-template-columns:1fr; }
.selection-controls[data-city="true"] .order-buttons,.selection-controls[data-city="true"] .order-target>div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; height:100%; }
.selection-controls[data-city="true"] .order-target { height:100%; }
.selection-controls[data-city="true"] .order-target>div { grid-template-columns:1fr 1fr; }
.selection-controls[data-city="true"] .order-buttons button,.selection-controls[data-city="true"] .order-target button { min-width:0; padding-inline:3px; }
.selection-controls .recruit-choice { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; min-width:0; min-height:44px; padding:2px 0; text-align:center; }
.selection-controls .recruit-choice .recruit-name { font-size:11px; font-weight:800; line-height:14px; white-space:nowrap; }
.selection-controls .mythic-choice .recruit-name { white-space:normal; font-size:10px; line-height:11px; }
.selection-controls .mythic-choice .mythic-count { font-size:8px; margin-top:2px; }
.selection-controls .recruit-choice[aria-disabled="true"] { background:#f3f3e9; border-color:#d7dcce; }
.selection-controls .recruit-choice[aria-disabled="true"] svg { opacity:.4; }
.selection-controls .recruit-choice[aria-disabled="true"] .recruit-name,.selection-controls .recruit-choice[aria-disabled="true"] small { color:#798675; }
.selection-controls .recruit-choice:hover:not(:disabled) { border-color:#6c9a83; background:#e4eddd; }
.selection-controls[data-city="true"] .city-menu-body>.city-rally-footer { grid-area:2/1; display:flex; align-items:center; gap:8px; min-width:0; }
.city-menu-status { flex:1; min-width:0; display:flex; align-items:center; margin:0; font-size:10px; line-height:1.3; color:#5c7063; }
.control-dock[data-city="true"] .turn-dock-status { display:none; }
.control-dock[data-city="true"] .turn-dock { justify-content:flex-end; }
.selection-controls:not([data-city="true"]) .army-panel { margin-bottom:0; }
.board-frame[data-layout="sides"] .selection-controls { width:230px; align-self:flex-end; }
.board-frame[data-layout="sides"] .selection-controls { --city-action-height:109px; --city-hint-height:40px; }
.board-frame[data-layout="sides"] .selection-controls[data-city="true"]:has(.recruit-tray:not([hidden])) { width:380px; --city-action-height:100px; }
.board-frame[data-layout="sides"] .selection-controls[data-city="true"] .order-buttons { grid-template-columns:1fr 1fr; }
.board-frame[data-layout="sides"] .selection-controls[data-city="true"] .order-target>div { height:52px; }
@media(max-width:360px) {
  .city-overview small { font-size:9px; }
  .selection-controls .recruit-choice .recruit-name { font-size:10px; }
}
.details-tools { border-top:1px solid #dedac7; margin-top:12px; padding-top:6px; }
.details-tools .text-button { min-height:44px; }
/* Softer glass for the floating game cards, with clear action contrast. */
.player-card { background:color-mix(in srgb,var(--jade-light) 22%,#fffdf6b0); backdrop-filter:blur(12px); }
.bot-card { background:color-mix(in srgb,var(--coral-light) 22%,#fffdf6b0); }
.turn-dock { background:#fffdf3bf; backdrop-filter:blur(16px); }
.army-panel,.selection-controls[data-city="true"] { background:#fffdf3c2; border-color:#c4cbb699; backdrop-filter:blur(16px); }
.selection-controls[data-city="true"] .army-panel { background:transparent; backdrop-filter:none; }
.city-rally-toggle { background:#e9eee0b8; }
.selection-controls .recruit-choice { background:#edf1e4b8; }
.selection-controls .recruit-choice[aria-disabled="true"] { background:#f3f3e999; }
.army-panel button { background:#eff3e5bf; }
.army-panel button[aria-pressed="true"] { background:#2d7473; }
.accessible-tile.order-destination { border:2px solid #b58521; background:#fff0bd; }
.board-frame[data-order-targeting="true"] #board { cursor:crosshair; }
.order-pick-prompt { position:absolute; bottom:calc(var(--dock-height,80px) + 26px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100% - 32px); padding:11px 14px; border:1px solid #d0b66b; border-radius:12px; background:#fff6ddeb; color:#544520; box-shadow:0 4px 20px #473a2026; backdrop-filter:blur(12px); pointer-events:none; z-index:6; }
.order-pick-prompt svg { flex:none; width:26px; height:26px; fill:none; stroke:#9f7926; stroke-width:1.8; }
.order-pick-prompt strong { display:block; font-size:14px; line-height:1.3; }
.order-pick-prompt small { display:block; margin-top:3px; font-size:11px; line-height:1.4; }
.board-frame[data-layout="sides"] .order-pick-prompt { bottom:20px; }
.unit-upgrade-dialog { width:340px; padding:22px; }
.unit-upgrade-dialog .eyebrow { margin:0 30px 6px 0; color:#896d32; font-size:10px; }
.unit-upgrade-dialog h2 { font-size:24px; margin-bottom:16px; }
.unit-upgrade-stats { margin:0; padding:4px 14px; border:1px solid #d3dcc7; border-radius:10px; background:#edf2e4; }
.unit-upgrade-stats>div { display:flex; justify-content:space-between; align-items:center; padding:9px 0; font-size:14px; }
.unit-upgrade-stats>div+div { border-top:1px solid #d3dcc7; }
.unit-upgrade-stats dd { display:flex; gap:12px; margin:0; color:#607466; }
.unit-upgrade-stats>div:has(.tech-value) { gap:12px; }
.unit-upgrade-stats dt:has(+dd>.tech-value) { flex:none; }
.unit-upgrade-stats .tech-value { text-align:right; }
.unit-upgrade-stats strong { min-width:16px; text-align:right; color:#277576; }
.unit-upgrade-actions { display:flex; gap:8px; margin-top:16px; }
.unit-upgrade-actions button { min-height:44px; padding:10px 12px; font-size:12px; }
.unit-upgrade-actions .primary-button { flex:1; justify-content:center; }
#unit-upgrade-status { color:#86682f; }

/* The command cards follow the player's banner without taking more map space. */
.control-dock,.unit-upgrade-dialog { --command-color:#287e92; --command-dark:#173e56; --command-light:#d2eceb; --command-accent:#e2c888; --command-border:color-mix(in srgb,var(--command-color) 34%,#d8d2ba); --command-glass:linear-gradient(115deg,color-mix(in srgb,var(--command-light) 40%,#fffdf3d9),#fffdf3bf); }
.control-dock .turn-dock,.control-dock .selection-controls[data-city="true"],.control-dock .army-panel { background:var(--command-glass); border-color:var(--command-border); box-shadow:inset 0 2px 0 var(--command-accent),0 6px 24px #173a461f; }
.control-dock .selection-controls[data-city="true"] .army-panel { background:transparent; box-shadow:none; border:0; }
.city-crest { display:grid; place-items:center; flex:none; width:30px; height:30px; border:1px solid var(--command-accent); border-radius:9px; background:var(--command-color); color:#fff5d6; font-size:20px; box-shadow:inset 0 0 0 2px #fff8df33; }
.city-overview>.city-identity { flex:1; border-left:0; padding-left:0; }
.city-overview .city-identity strong { color:var(--command-dark); line-height:16px; }
.city-overview small { line-height:12px; max-height:24px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.control-dock .city-menu-tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px; font-size:10px; line-height:12px; }
.city-menu-tabs svg { flex:none; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.control-dock :is(.city-menu-tabs button,.army-panel button,.recruit-choice,.city-upgrade-choices button,.city-upgrade-built,.unit-training-choices button,.next-unit) { color:var(--command-dark); border-color:var(--command-border); background:color-mix(in srgb,var(--command-light) 42%,#fffaf0bd); }
.control-dock .city-menu-tabs button[aria-selected="true"],.control-dock .army-panel button[aria-pressed="true"] { background:var(--command-dark); border-color:var(--command-color); color:#fff9e8; box-shadow:inset 0 -2px 0 #0002; }
.control-dock .menu-portrait { display:block; width:22px; height:22px; object-fit:contain; border-radius:6px; background:color-mix(in srgb,var(--command-light) 72%,#fffdf3); pointer-events:none; }
.control-dock .selection-controls .recruit-choice,.control-dock .selection-controls .recruit-choice[aria-disabled="true"] { background:transparent; border:0; box-shadow:none; }
.recruit-figure { position:relative; display:block; flex:none; width:min(100%,76px); aspect-ratio:1; border:2px solid var(--command-border); border-radius:50%; background:radial-gradient(circle at 35% 25%,#fffaf0,var(--command-light)); box-shadow:0 2px 5px #173a4620; }
.control-dock .recruit-figure .menu-portrait { width:100%; height:auto; aspect-ratio:1; border-radius:50%; background:transparent; }
.selection-controls .recruit-figure>svg { width:100%; height:100%; padding:9px; fill:none; stroke:currentColor; stroke-width:1.5; }
.selection-controls .recruit-price { position:absolute; right:-2px; top:-2px; margin:0; padding:2px 4px; border:1px solid #d0b875; border-radius:8px; background:#fff3ce; color:#78541e; font-size:11px; font-weight:850; line-height:12px; }
.control-dock .recruit-choice[aria-disabled="true"] .recruit-figure { border-color:#b7c2ba; box-shadow:none; }
.control-dock .unit-training-choices button { padding:2px; gap:1px; }
.control-dock .unit-training-choices strong { line-height:12px; }
.control-dock .unit-training-choices .unit-upgrade-price { line-height:11px; }
.control-dock .unit-training-choices .menu-portrait { width:20px; height:20px; flex:none; }
.control-dock .city-upgrade-choices button[aria-disabled="true"],.control-dock .unit-training-choices button.unaffordable { color:#68756c; border-color:#d1d5c9; background:#f4f3e3a6; }
.control-dock .recruit-choice[aria-disabled="true"] .menu-portrait { opacity:.5; filter:saturate(.45); }
.control-dock .unit-training-choices button.trained { border-color:var(--command-accent); color:var(--command-dark); }
.control-dock .recruit-choice:hover:not([aria-disabled="true"]) .recruit-figure { border-color:var(--command-color); box-shadow:0 0 0 2px var(--command-light); }
.control-dock .next-unit:hover:not(:disabled) { border-color:var(--command-color); background:color-mix(in srgb,var(--command-light) 75%,#fffaf0); }
.control-dock .assist-turn,.control-dock .assist-options summary { color:var(--command-dark); background:color-mix(in srgb,var(--command-accent) 18%,#fffaf0d4); border-color:color-mix(in srgb,var(--command-accent) 65%,#bebaa5); }
.control-dock .primary-button,.unit-upgrade-dialog .primary-button { background:var(--command-dark); border-color:var(--command-color); color:#fff9e8; box-shadow:0 3px 0 color-mix(in srgb,var(--command-dark) 82%,#000); }
.control-dock .primary-button:hover:not(:disabled),.unit-upgrade-dialog .primary-button:hover:not(:disabled) { background:color-mix(in srgb,var(--command-dark) 82%,var(--command-color)); }
.unit-upgrade-dialog .unit-upgrade-stats { background:color-mix(in srgb,var(--command-light) 50%,#fffaf0); border-color:var(--command-border); }
.unit-upgrade-dialog .unit-upgrade-stats strong { color:var(--command-dark); }

/* The practice guide points at real controls; the map remains tappable. */
.tutorial-overlay { position:fixed; inset:0; z-index:80; pointer-events:none; }
.tutorial-card { position:absolute; width:min(320px,calc(100vw - 24px)); box-sizing:border-box; padding:14px 16px; border:1px solid #d4decb; border-radius:18px; background:rgba(255,252,242,.96); color:#294247; box-shadow:0 8px 28px #263c2426; pointer-events:auto; }
.tutorial-card .eyebrow { margin:0 0 5px; font-size:9px; }
.tutorial-card h2 { font-size:19px; margin:0 0 6px; }
.tutorial-card p:not(.eyebrow) { font-size:14px; line-height:1.45; margin:0; }
.tutorial-card button { margin-top:10px; min-width:44px; min-height:44px; font-size:14px; }
.tutorial-card .text-button { padding:3px 0; color:#52695c; }
.tutorial-ring { position:absolute; width:44px; height:44px; margin:-22px; border:2px solid #ffe89a; border-radius:50%; box-shadow:0 0 0 6px #ffdf752c,0 0 18px #ac7c3670; animation:guide-pulse 1.5s ease-in-out infinite; }
.tutorial-hand { position:absolute; width:42px; height:54px; margin-left:-13px; margin-top:-3px; filter:drop-shadow(0 3px 3px #263c2455); animation:guide-point 1.1s ease-in-out infinite; }
.tutorial-hand[hidden] { display:none; }
.tutorial-target { outline:2px solid #c79736 !important; outline-offset:3px; }
.tutorial-entry { margin-top:10px; display:block; }
.practice-note { display:none; }
@keyframes guide-point { 0%,100% { transform:translateY(7px) rotate(-6deg); } 50% { transform:translateY(0) rotate(-6deg); } }
@keyframes guide-pulse { 0%,100% { opacity:.65; transform:scale(.9); } 50% { opacity:1; transform:scale(1.06); } }
@media(prefers-reduced-motion:reduce) { .tutorial-hand,.tutorial-ring { animation:none; } }

/* Four compact turn actions stay on one row on phones. */
@media(max-width:600px) {
  .turn-dock .next-unit { flex:.65 1 0; font-size:9px; padding:9px 3px; }
  .turn-dock .turn-assist { flex:1.6 1 0; }
}

/* A small comparison table keeps the final result useful on phones. */
.victory-stats { width:100%; table-layout:fixed; border-collapse:collapse; margin:14px 0; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.victory-stats caption { text-align:left; font-size:13px; font-weight:850; padding-bottom:8px; }
.victory-stats th:first-child { width:44%; text-align:left; }
.victory-stats thead th { padding:0 3px 7px; font-size:10px; line-height:1.3; overflow-wrap:anywhere; }
.victory-stats tbody th { font-weight:600; }
.victory-stats td,.victory-stats tbody th { padding:5px 3px; border-top:1px solid color-mix(in srgb,var(--ending-color) 15%,transparent); }
.victory-stats td { font-weight:850; }
.victory-stats [data-stat="score"] th,.victory-stats [data-stat="score"] td { font-size:14px; font-weight:850; padding-block:8px; }
.victory-story .victory-stats-note { margin:0 0 14px; font-size:10px; line-height:1.5; text-align:left; }
.recap-place[data-kind="loss"] .recap-place-number { background:#f4c6bf; color:#9c2927; }
.recap-place[data-kind="loss"][aria-pressed="true"] { background:#f9e3db; }
/* Seats share the existing civilization palette and stay readable on phones. */
.seat-setup { margin:16px 0; display:grid; gap:10px; }
.seat-setup-row { display:grid; grid-template-columns:minmax(80px,.65fr) minmax(0,1.35fr); gap:7px; padding:10px; background:#e5eee5; border-radius:10px; min-width:0; }
.seat-setup-row>strong { grid-column:1/-1; font-size:14px; }
.seat-setup-row select { margin:0; font-size:14px; min-width:0; }
.player-roster { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.multiplayer-card { display:flex; align-items:center; gap:7px; padding:8px; min-width:0; border:1px solid color-mix(in srgb,var(--seat-color) 30%,transparent); }
.multiplayer-card>div { min-width:0; }
.multiplayer-card strong,.multiplayer-card small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.multiplayer-card strong { font-size:12px; }.multiplayer-card small { font-size:10px; margin-top:2px; }
.multiplayer-card[data-current="true"] { box-shadow:0 0 0 2px var(--seat-color); }
.multiplayer-card[data-eliminated="true"] { opacity:.6; }
.seat-emblem { flex:none; border-radius:8px; display:grid; place-items:center; width:27px; height:29px; color:#fff5c9; font-size:21px; }
.seat-resources { margin-left:auto; text-align:right; }
.seat-identity { flex:1; }
.player-card .player-heading { display:flex; align-items:center; gap:5px; overflow:visible; }
.player-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bot-badge { position:relative; display:inline-flex; align-items:center; gap:3px; flex:none; color:#365d54; border-radius:6px; }
/* Tapping a bot's symbol names it, since phones show no hover titles. */
.bot-badge[data-open]::after { content:attr(data-name); position:absolute; z-index:5; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); padding:4px 8px; border-radius:6px; background:#2b2116; color:#fbf3df; font:600 12px/1.3 var(--text-face, Georgia, serif); white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none; }
.bot-badge svg { display:block; flex:none; }
.bot-icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bot-icon circle { fill:currentColor; stroke:none; }
.extra-player-link { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin:9px 0; padding:12px; border-left:4px solid var(--link-color); border-radius:9px; background:#eef1e7; }
.extra-player-link small { display:block; margin-top:3px; font-size:11px; }.extra-player-link input { flex-basis:100%; }
.victory-stats[data-players="4"] th:first-child,.victory-stats[data-players="3"] th:first-child { width:34%; }
.victory-stats[data-players="4"] thead th,.victory-stats[data-players="3"] thead th { font-size:9px; }
@media(max-width:800px) { .multiplayer-card strong { font-size:11px; } .multiplayer-card small { font-size:9px; } .multiplayer-card { gap:5px; padding:7px; } }
.board-frame[data-layout="sides"] .player-roster { grid-template-columns:1fr; }
@media(max-width:360px) { .seat-emblem { width:22px; height:25px; font-size:17px; } .seat-setup-row { grid-template-columns:1fr; } .victory-stats[data-players="4"] { font-size:10px; } .victory-stats[data-players="4"] thead th { font-size:8px; } }

@media(max-width:600px) { .seat-setup-row select { font-size:16px; } }

/* A stable, single-line turn strip beside Menu. */
.topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; }
.topbar .topnav { grid-column:3; justify-self:end; margin-left:0; gap:4px; }
.topbar .menu-nav { grid-column:1; justify-self:start; }
.topbar .turn-summary { grid-column:2; justify-self:start; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; min-width:0; max-width:100%; min-height:44px; gap:6px; padding:6px 8px; text-align:left; background:#fffdf3de; border-radius:9px; }
.topbar .turn-summary strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:1.25; }
.topbar .round-label { flex:none; font-size:14px; line-height:1.3; letter-spacing:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.topbar .round-label::after { content:'·'; margin-left:6px; color:#65756d; }
.topnav .recap-button { width:auto; padding:8px 6px; font-size:14px; white-space:nowrap; box-shadow:none; }
.topnav .recap-button>span { font:inherit; color:inherit; margin:0; }
.topnav .recap-button .recap-full { display:inline; }
.topnav .recap-button .recap-short { display:none; }
.topnav .recap-button[aria-expanded="true"] { background:#173e56; color:#fffdf3; }
.map-hud { top:64px; }
.matchbar { min-height:0; margin:0; padding:0; justify-content:flex-end; }
#turn-subtitle { display:none; }
.player-card { min-height:50px; padding:6px 8px; gap:6px; }
.player-avatar { flex-basis:28px; height:28px; border-radius:8px; }
.player-name>span { display:none; }
.player-name strong { font-size:14px; }
.player-name small { font-size:12px; margin-top:0; }
.player-resource strong { font-size:19px; line-height:1.15; }
.player-resource>span { font-size:11px; line-height:1.25; }
.board-frame[data-layout="sides"] .topbar .turn-summary { justify-content:flex-start; }
.board-frame[data-layout="sides"] .control-dock { width:184px; }
.board-frame[data-layout="sides"] #board { --map-right:216px; }
.board-frame[data-layout="sides"] .map-hud { top:74px; }
.multiplayer-card { min-height:50px; padding:6px 8px; }
.multiplayer-card strong { font-size:14px; }
.multiplayer-card small { font-size:12px; }
.pause-menu-actions { grid-template-columns:1fr; gap:8px; }
.pause-footer .pause-new-game { margin-top:12px; width:100%; min-height:44px; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border:1px solid #d5dfd5; border-radius:13px; background:#ffffff70; color:var(--menu-dark); font-size:12px; }
@media(max-width:600px) {
  .board-frame { --hud-safe-top:env(safe-area-inset-top,0px); }
  .topbar { top:calc(28px + var(--hud-safe-top)); gap:6px; }
  .topbar .turn-summary { max-width:100%; gap:5px; padding:6px; }
  .topbar .round-label { font-size:12px; }
  .topbar .round-word { display:none; }
  .topbar .turn-summary strong { font-size:14px; }
  .topbar #thinking-label { min-width:0; font-size:14px; white-space:nowrap; line-height:1.25; }
  .topnav .text-button { min-width:44px; min-height:44px; font-size:14px; padding:8px; }
  .topnav .recap-button { width:auto; padding:8px 2px; font-size:13px; font-weight:650; line-height:1.2; white-space:nowrap; }
  .map-hud { top:calc(80px + var(--hud-safe-top)); }
  .player-card { min-height:52px; padding:6px; gap:5px; border-radius:10px; }
  .player-avatar { flex-basis:24px; height:24px; font-size:16px; }
  .player-name strong { font-size:13.5px; }
  .player-name small { font-size:11.5px; }
  .player-resource strong { font-size:18px; }
  .player-resource>span { font-size:11px; }
  #board { --map-top:152px; }
  .multiplayer-card { min-height:48px; padding:6px; }
  .multiplayer-card strong { font-size:13px; }
  .multiplayer-card small { font-size:11px; }
  .pause-menu-actions .outline-button { font-size:14px; }
  .pause-menu-actions small { font-size:12px; }
  .pause-footer .pause-new-game { font-size:14px; min-height:48px; }
  .pause-menu .route-setting select { font-size:16px; }
  body:is([data-match-result="winner"],[data-match-result="draw"]) .topbar { height:auto; }
  body:is([data-match-result="winner"],[data-match-result="draw"]) .topbar .turn-summary { grid-column:2; grid-row:1; flex-direction:row; justify-content:flex-start; }
}
@media(max-width:360px) {
  .topnav .recap-button .recap-full { display:none; }
  .topnav .recap-button .recap-short { display:inline; }
  .topnav .recap-button { padding-inline:6px; }
}

/* Keep the board's HUD personal; compare civilizations in Stats. */
.stats-button { pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:6px; flex:none; min-width:76px; min-height:50px; padding:8px 12px; border:1px solid #c6ceba90; border-radius:10px; background:#fffdf6ed; color:#365d54; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.stats-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.stats-button:focus-visible { outline:3px solid #078dbc; outline-offset:3px; }
.board-frame[data-layout="sides"] .stats-button { min-height:44px; }
.stats-dialog { width:min(460px,calc(100vw - 24px)); padding:24px; border-radius:22px; background:#fffdf5; }
.stats-dialog h2 { margin:0; font-size:28px; }
.stats-round { margin:3px 0 20px; color:#59716d; font-size:14px; }
.stats-columns { display:flex; justify-content:space-between; margin:0 12px 9px; color:#59716d; font-size:13px; font-weight:700; }
.stats-dialog .multiplayer-card { min-height:72px; padding:12px; gap:10px; border-radius:14px; }
.stats-dialog .multiplayer-card strong { font-size:16px; }
.stats-dialog .multiplayer-card small { font-size:12px; margin-top:3px; }
.stats-dialog .seat-emblem { width:40px; height:44px; }
.stats-dialog .multiplayer-card .player-score { flex:none; margin-left:auto; color:#294838; font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums; }
.stats-note { margin:18px 0 0; color:#59716d; font-size:12px; line-height:1.5; }
@media(max-width:360px) { .stats-dialog { padding:20px 16px; } .stats-dialog .multiplayer-card { padding:10px; gap:8px; } }
@media(max-width:389px) {
  .topnav .recap-button .recap-full { display:none; }
  .topnav .recap-button .recap-short { display:inline; }
}

/* Navigation stays at the edge; the kingdom's name belongs on the title screen. */
.pause-footer .pause-new-game:first-of-type { margin-top:10px; }
.topnav .menu-icon { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#game-menu-button { display:flex; align-items:center; justify-content:center; min-width:44px; }

/* Keep a shared tile tappable while its city panel is open on short screens. */
@media(max-height:500px) and (min-width:650px) and (max-width:899px) {
  .control-dock[data-city="true"] { width:calc(100% - 32px); }
  .control-dock[data-city="true"] .selection-controls { width:300px; align-self:flex-end; }
  .control-dock[data-city="true"] .turn-dock { width:min(590px,100%); align-self:center; }
  .board-frame:has(.control-dock[data-city="true"]) .map-hud { left:16px; right:332px; width:auto; transform:none; }
}

/* Let phone controls grow into two rows instead of shrinking their labels. */
.turn-dock .next-unit,.turn-assist>.assist-turn,.end-turn-area .primary-button { font-size:14px; min-height:48px; }
.turn-dock-status strong { font-size:14px; }
.turn-dock-title .unit-info-button { min-width:44px; min-height:44px; font-size:24px; }
.turn-dock-status>span { font-size:12px; }
.board-frame[data-layout="sides"] .turn-assist>.assist-turn { font-size:14px; }
@media(max-width:430px) {
  .turn-dock { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); padding:8px; gap:8px; }
  .turn-dock-status { grid-column:1/-1; gap:4px 12px; }
  .turn-dock-status strong { font-size:14px; }
  .turn-dock-status>span { font-size:12px; line-height:1.3; }
  .turn-dock .next-unit { font-size:14px; padding:10px 8px; min-height:48px; }
  .turn-dock .turn-assist,.turn-dock .end-turn-area { min-width:0; width:100%; }
  .turn-assist>.assist-turn { font-size:14px; padding:10px 3px; min-height:52px; }
  .assist-options>summary { min-width:44px; width:44px; min-height:52px; }
  .end-turn-area .primary-button { font-size:15px; padding:10px 8px; min-height:52px; }
  #board { --map-bottom:188px; }
}
.start-actions .primary-button:hover:not(:disabled) { background:#1c5968; }
.start-actions .primary-button:active:not(:disabled) { box-shadow:0 2px 0 #164653; transform:translateY(2px); }

/* One row of turn actions, with full-size navigation targets. */
.board-frame .turn-dock { display:grid; grid-template-columns:44px 92px 44px minmax(112px,1.4fr) minmax(72px,1fr); gap:6px; padding:6px; }
.board-frame .turn-dock-status,.board-frame .spectator-controls { grid-column:1/-1; }
.board-frame .control-dock:not([data-city="true"]) .turn-dock-status { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.board-frame .turn-dock .navigation-icon { display:grid; place-items:center; width:44px; min-width:44px; height:48px; padding:10px; border-radius:9px; }
.navigation-icon svg,.camera-follow svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.turn-dock .city-navigation { display:flex; gap:4px; width:92px; min-width:92px; }  /* City list and Tech */
#next-city[aria-expanded="true"],#global-rally[aria-expanded="true"],#tech-button[aria-expanded="true"] { background:var(--command-color); color:#fffdf3; }
.board-frame .turn-dock .turn-assist,.board-frame .turn-dock .end-turn-area { min-width:0; width:100%; }
.board-frame .turn-dock .assist-turn { padding:8px 3px; white-space:normal; line-height:1.15; min-height:48px; }
.board-frame .turn-dock .assist-options>summary { width:44px; min-width:44px; min-height:48px; }
.board-frame .turn-dock .end-turn-area .primary-button { min-height:48px; padding:8px 4px; font-size:14px; }
.board-frame .turn-dock .end-turn-area .primary-button>span:last-child { display:none; }
.board-frame[data-layout="sides"] .control-dock { width:310px; }
.board-frame[data-layout="sides"] .turn-dock { grid-template-columns:44px 92px minmax(112px,1fr) minmax(72px,.7fr); }
.board-frame[data-layout="sides"] .turn-dock .next-unit { width:44px; }
.board-frame .turn-dock[data-inspection="true"] { grid-template-columns:1fr; }
.turn-dock[data-inspection="true"] .turn-dock-status { display:flex; }
.navigation-icon:focus-visible { outline:3px solid #078dbc; outline-offset:2px; }
.board-frame[data-layout="sides"] .scorebar { display:flex; flex-direction:column; }
.board-frame[data-layout="sides"] .scorebar .player-card { grid-column:1/-1; }
.city-picker { position:fixed; inset:auto; margin:0; width:min(340px,calc(100vw - 24px)); max-height:420px; padding:10px; border:1px solid color-mix(in srgb,var(--city-color) 35%,#c7d1c7); border-radius:16px; background:#fffdf6fa; box-shadow:0 8px 32px #173a4633; color:var(--ink); font:inherit; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.city-picker:not(:popover-open) { display:none; }
.city-picker>header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; padding-left:4px; }
.city-picker h2 { margin:0; font-size:18px; line-height:1.25; }
.city-picker h2 small { margin-left:5px; color:var(--muted); font-size:14px; font-weight:650; }
#city-picker-close,#global-rally-close,#tech-close { flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:26px; cursor:pointer; }
.city-picker-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:5px; padding:3px; scrollbar-width:thin; }
.city-picker-row { flex:none; display:flex; align-items:center; gap:10px; width:100%; min-height:72px; padding:10px; text-align:left; border:1px solid #d7dfd5; border-radius:11px; background:#f4f6ee; color:var(--ink); font:inherit; cursor:pointer; }
.city-picker-row:hover,.city-picker-row[aria-current="location"] { background:color-mix(in srgb,var(--city-light) 60%,#fffdf6); border-color:var(--city-color); }
.city-picker-row:focus-visible,#next-city:focus-visible,#city-picker-close:focus-visible,#global-rally-close:focus-visible { outline:3px solid #078dbc; outline-offset:1px; }
.city-picker-icon { flex:none; width:34px; height:38px; display:grid; place-items:center; border-radius:9px; background:var(--city-light); color:var(--city-dark); }
.city-picker-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.city-picker-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.city-picker-info>strong { font-size:14px; font-weight:850; overflow-wrap:anywhere; }
.city-picker-info>small,.city-picker-badges { font-size:12px; line-height:1.3; color:#5b6e64; }
.city-picker-badges { display:flex; flex-wrap:wrap; gap:4px; }
.city-picker-badges>span { padding:2px 6px; border-radius:5px; background:color-mix(in srgb,var(--city-light) 70%,#f4f6ee); color:var(--city-dark); font-weight:750; }
.city-picker-badges>small { font:inherit; }
@media(max-width:360px) {
  .board-frame .turn-dock { gap:4px; padding:5px; grid-template-columns:44px 92px minmax(108px,1.4fr) minmax(70px,1fr); }
}

/* Squads are managed on the board; the sheet holds only mission and edit controls. */
.control-dock[data-squads="true"] .turn-dock-status { display:none !important; }
.control-dock .squad-sheet { order:-2; display:flex; flex-direction:column; gap:5px; width:100%; max-height:min(460px,54dvh); min-height:0; margin:0 0 8px; padding:10px; pointer-events:auto; overflow:hidden; background:#fffdf5; border:1px solid var(--command-border); box-shadow:0 6px 28px #173a4630; }
.squad-sheet button,.squad-sheet summary { min-height:44px; font:inherit; font-size:14px; cursor:pointer; border:1px solid #c4d0c7; border-radius:9px; background:#f2f5ee; color:var(--command-dark); }
.squad-sheet button:disabled { cursor:default; }
.squad-sheet-heading { display:flex; gap:4px; align-items:center; flex:none; }
.squad-sheet-heading>div { flex:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; min-width:0; }
.squad-sheet-heading strong { font-size:17px; color:var(--squad-color,var(--command-dark)); white-space:nowrap; }
.squad-sheet-heading span { font-size:12px; color:#526a62; white-space:nowrap; }
.squad-sheet-heading>button { width:44px; flex:none; padding:0; font-size:24px; background:transparent; border:0; }
.squad-sheet-heading #squad-assign { color:var(--squad-color); }
#squad-change-mission { position:relative; }
#squad-change-mission[aria-expanded="true"] { color:var(--squad-color); background:color-mix(in srgb,var(--squad-color) 10%,transparent); }
#squad-pending-indicator { position:absolute; top:2px; right:1px; width:16px; height:16px; border-radius:50%; color:#956821; background:#fff6db; }
#squad-change-mission #squad-pending-indicator svg { width:16px; height:16px; stroke-width:1.7; }
#squad-assign svg,#squad-change-mission svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.squad-detail,.squad-overview { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.squad-overview { display:flex; flex-direction:column; }
.squad-overview-card { display:flex; gap:12px; align-items:center; padding:8px 3px; text-align:left; border:0 !important; border-bottom:1px solid #dae1d8 !important; border-radius:0 !important; background:transparent !important; }
.squad-overview-card:last-child { border-bottom:0 !important; }
.squad-number { display:grid; place-items:center; width:34px; height:38px; flex:none; border-radius:7px 7px 13px 13px; background:var(--squad-color); color:#fffdf4; font-weight:900; font-size:20px; }
.squad-overview-card>span:last-child { min-width:0; flex:1; }
.squad-overview-card strong,.squad-overview-card small { display:block; }
.squad-overview-card small { font-size:12px; margin-top:3px; color:#526a62; }
.squad-sheet .squad-incoming { font-size:12px; color:#896124; margin:0 0 7px; }
.squad-sheet .squad-tools { position:static; padding:0; background:none; }
.squad-sheet .squad-status { margin:0 0 3px; font-size:14px; }
.squad-sheet .squad-formation-control { display:block; font-size:14px; margin:6px 0 0; border-top:1px solid #d5ded5; }
.squad-formation-control>summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 2px; background:transparent; border:0; cursor:pointer; }
.squad-formation-control>summary::after { content:''; width:7px; height:7px; margin:0 4px 3px 0; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); }
.squad-formation-control[open]>summary::after { margin-bottom:-3px; transform:rotate(-135deg); }
#formation-current { margin-left:auto; font-size:12px; color:#526a62; }
.squad-formation-control[open]>summary { margin-bottom:4px; }
.squad-formation-control>small { display:block; margin-top:6px; }
.squad-sheet .squad-formation-control small { font-size:12px; }
.squad-edit-footer { display:flex; justify-content:flex-end; gap:7px; flex:none; padding-top:5px; }
.squad-edit-footer button { min-width:80px; padding:8px 10px; }
.squad-edit-footer .primary-button { width:auto; justify-content:center; min-width:110px; }
.squad-error { flex:none; font-size:14px; color:#92382d; margin:0; }
.squad-sheet[data-picking="true"] :is(.squad-tools,.squad-formation-control,#squad-status) { display:none; }
.board-frame[data-layout="sides"] .control-dock[data-squads="true"] { width:380px; }
.squad-sheet button:focus-visible,.squad-sheet summary:focus-visible { outline:3px solid #078dbc; outline-offset:1px; }
@media(max-height:520px) {
 .control-dock[data-squads="true"] { width:min(380px,calc(100% - 24px)); left:auto; right:12px; transform:none; }
 .control-dock .squad-sheet { max-height:calc(100dvh - 140px); }
}
.recruit-preview-dialog { width:min(420px,calc(100vw - 24px)); padding:24px; background:#fffdf5; border-radius:22px; }
.recruit-preview-heading { display:flex; align-items:center; gap:16px; margin:10px 0; }
#recruit-preview-art { width:120px; height:140px; object-fit:contain; border-radius:18px; background:radial-gradient(circle,var(--unit-light,#e1ece6),transparent 75%); }
.recruit-preview-heading h2 { font-size:25px; margin:0 0 5px; }
#recruit-preview-cost { font-size:18px; color:#8b621f; }
#recruit-preview-ability { font-size:14px; line-height:1.45; margin:10px 0 18px; }
.recruit-preview-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0; }
.recruit-preview-stats>div { padding:9px; background:#edf2e9; border-radius:10px; }
.recruit-preview-stats dt { font-size:12px; color:#59736a; }
.recruit-preview-stats dd { font-size:21px; font-weight:850; margin:2px 0 0; }
.recruit-preview-upgrades { font-size:14px; margin-top:17px; }
.recruit-preview-upgrades h3 { margin:0 0 8px; font-size:16px; }
.recruit-preview-upgrades p { margin:7px 0; font-size:12px; color:#526a62; }
.recruit-preview-upgrades strong { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:14px; color:#294838; }
#recruit-preview-status { font-size:12px; line-height:1.4; margin:14px 0 0; color:#526a62; }
.recruit-choice { -webkit-touch-callout:none; user-select:none; }

/* A selected unit's card takes the turn bar's place: its name and status sit
   above its orders, and × (or Escape) brings the turn actions back. */
.control-dock[data-focus="unit"] { gap:0; }
.board-frame .control-dock[data-focus="unit"] .turn-dock { order:-3; position:relative; grid-template-columns:minmax(0,1fr); padding-right:50px; }
.control-dock[data-focus="unit"] .turn-dock>:is(.next-unit,.city-navigation,.turn-assist,.end-turn-area) { display:none; }
.control-dock[data-focus="unit"]:has(#selection-controls:not([hidden]) #army-panel:not([hidden])) .turn-dock { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-width:0; }
.control-dock[data-focus="unit"] #selection-controls:has(#army-panel:not([hidden])) { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }
.control-dock[data-focus="unit"] #mission-info { display:none; }
.control-dock[data-focus="city"] .turn-dock { display:none; }
.unit-close.city-close { position:static; flex:none; margin:-6px -6px -6px auto; }
.unit-close { position:absolute; top:0; right:0; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
.unit-close span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #c3b48e; border-radius:50%; background:#fffaf0; color:#3b2c1e; font-size:18px; line-height:1; }
/* An officer's card keeps one header and one close button above its squad. */
.control-dock[data-focus="unit"][data-squads="true"] .turn-dock-status { display:flex !important; }
.control-dock[data-focus="unit"] #squad-close { display:none; }
.control-dock[data-focus="unit"][data-squads="true"] .turn-dock { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-width:0; }
.control-dock[data-focus="unit"][data-squads="true"] #squad-panel { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }

/* Group rally: the flag beside the city icon opens one mission for all cities,
   all Sergeants or the Leader. Picking its destination takes the turn bar. */
.rally-picker { gap:10px; }
.rally-scope { display:flex; align-items:center; gap:10px; padding:0 4px; font-size:14px; font-weight:750; }
.rally-scope select { flex:1; min-width:0; min-height:44px; padding:0 10px; border:1px solid #c4b796; border-radius:9px; font:inherit; font-size:14px; font-weight:700; color:var(--ink); }
.rally-status { margin:0; padding:0 4px; font-size:12px; line-height:1.35; color:var(--muted); }
.rally-picker .order-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.rally-picker .order-buttons button { min-width:0; min-height:56px; font-size:13px; cursor:pointer; }
.control-dock[data-focus="rally"] .turn-dock>:is(.next-unit,.city-navigation,.turn-assist,.end-turn-area) { display:none; }
.board-frame .control-dock[data-focus="rally"] .turn-dock { grid-template-columns:minmax(0,1fr); }
.rally-target { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.rally-target[hidden] { display:none; }
.rally-target:has(#rally-auto[hidden]) { grid-template-columns:1fr; }
.rally-target button { min-height:48px; padding:8px; font-size:14px; cursor:pointer; }
/* Too narrow for five columns (phones, the side dock): icons join the
   status row and the turn actions share the next. Below 480px a fifth
   column would leave End turn too narrow for "Skip animation". The second
   row splits after the troop arrow, so the wider city/Tech pair does not
   narrow Auto-finish. */
.board-frame[data-layout="sides"] .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) { grid-template-columns:minmax(0,1fr) 44px 92px 44px; }
.board-frame[data-layout="sides"] .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) .turn-dock-status { grid-area:1/1; }
.board-frame[data-layout="sides"] .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) .turn-assist { grid-area:2/1/3/3; }
.board-frame[data-layout="sides"] .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) .end-turn-area { grid-area:2/3/3/-1; }
@media(max-width:479px) {
  .board-frame .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) { grid-template-columns:minmax(0,1fr) 44px 92px 44px; }
  .board-frame .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) .turn-dock-status { grid-area:1/1; }
  .board-frame .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) .turn-assist { grid-area:2/1/3/3; }
  .board-frame .control-dock:not([data-focus="unit"]):not([data-focus="rally"]) .turn-dock:has(>#global-rally:not([hidden])) .end-turn-area { grid-area:2/3/3/-1; }
}

/* Kingdom tech: research and training, opened from beside the city list. */
.tech-picker { gap:8px; overflow-y:auto; overscroll-behavior:contain; }
.tech-picker>header { position:sticky; top:-10px; z-index:1; margin:-10px -10px 0; padding:10px 10px 0 14px; background:#fffdf6; }  /* Close stays in reach while the list scrolls. */
.tech-picker .tech-heading { margin:2px 0 0; font-size:14px; color:var(--command-dark,#24414a); }
.tech-picker .unit-training-choices { grid-template-columns:repeat(3,minmax(0,1fr)); height:auto; gap:6px; }
.tech-picker .unit-training-choices button { height:auto; min-height:76px; padding:6px 4px; gap:3px; cursor:pointer; -webkit-touch-callout:none; user-select:none; }
.tech-picker .tech-text { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
.tech-picker .unit-training-choices strong { font-size:13px; line-height:16px; text-align:center; }
.tech-picker .unit-training-choices .unit-upgrade-price { font-size:12px; line-height:14px; }
.tech-picker .unit-training-choices .menu-portrait { width:34px; height:34px; flex:none; }
.tech-picker .tech-art { display:grid; place-items:center; width:40px; height:40px; flex:none; }
.tech-picker .tech-art img { width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 1px 1px #0000002e); }
.tech-picker .tech-art .interface-icon { width:28px; height:28px; }
.tech-picker .tech-effect { display:none; font-size:12px; line-height:16px; color:var(--command-dark,#24414a); opacity:.85; }
/* A held tile spans its row and reads out its effect. */
.tech-picker .unit-training-choices button.expanded { grid-column:1/-1; flex-direction:row; justify-content:flex-start; gap:10px; padding:8px 12px; border-color:var(--command-accent,#70a093); box-shadow:0 2px 8px #24414a1f; }
.tech-picker button.expanded .tech-text { align-items:flex-start; text-align:left; }
.tech-picker button.expanded strong { text-align:left; }
.tech-picker button.expanded .tech-effect { display:block; }
.tech-picker button.expanded .tech-art,.tech-picker button.expanded .tech-art img { width:48px; height:48px; }
.tech-picker button.expanded .menu-portrait { width:44px; height:44px; }

/* Each dock tool names itself under its icon: the four used to look alike. */
.board-frame .turn-dock .navigation-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px 2px 3px; }
.board-frame .turn-dock .navigation-icon svg { width:30px; height:22px; flex:none; }
.board-frame .turn-dock .navigation-icon>.nav-label { position:static; display:block; margin:0; font-size:11px; line-height:12px; font-weight:750; white-space:nowrap; }

/* The recap is an icon with a count of places that changed. */
.topnav .recap-button { position:relative; display:grid; place-items:center; width:44px; padding:6px; }
.topnav .recap-button svg { width:26px; height:26px; }
.topnav .recap-button>.recap-count { position:absolute; top:-6px; right:-6px; display:block; min-width:18px; height:18px; margin:0; padding:0 4px; border-radius:9px; background:#b8402d; color:#fffdf3; font-size:11px; line-height:18px; font-weight:800; text-align:center; box-shadow:0 0 0 2px #fffdf3; }
.topnav .recap-button>.recap-count[hidden] { display:none; }

/* On phones the city panel keeps more of the board in view. */
@media(max-width:480px) {
  .selection-controls[data-city="true"]:has(.recruit-tray:not([hidden])) { --city-action-height:76px; }
  .selection-controls[data-city="true"] { --city-hint-height:minmax(18px,auto); }
  .control-dock .recruit-figure { width:min(100%,56px); }
  .selection-controls[data-city="true"] .recruit-tray { overflow-y:hidden; }
  .selection-controls[data-city="true"] .city-menu-status { font-size:12px; line-height:16px; }
}