/* ============================================================
   Kryptyr Command — bunker console styling
   Palette: slate concrete, signal red, brass stencil
   ============================================================ */
:root{
  --ink:#0a0e12;
  --concrete:#141b22;
  --concrete-2:#1a232c;
  --line:#2a353f;
  --line-soft:#212b34;
  --red:#d9432f;
  --red-dim:#8e2b1d;
  --brass:#c8a951;
  --text:#e7e2d6;
  --muted:#8b98a4;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(200,169,81,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,169,81,.055) 1px,transparent 1px),
    radial-gradient(ellipse at 50% -10%,rgba(217,67,47,.13),transparent 58%);
  background-size:36px 36px,36px 36px,100% 700px;
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brass);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--red);color:#fff;padding:8px 12px;font-family:var(--mono);font-size:12px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:40;background:rgba(10,14,18,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.bar-inner{max-width:1080px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.brand:hover{text-decoration:none;color:#fff}
.brand-mark{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:22px;height:22px;flex:0 0 auto}
.brand-mark span{background:var(--brass);display:block}
.brand-mark span:nth-child(2),.brand-mark span:nth-child(3){background:var(--red)}
.brand-text{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.24em;line-height:1.1;display:flex;flex-direction:column}
.brand-sub{text-transform:uppercase;font-weight:400;font-size:9px;letter-spacing:.22em;color:var(--muted);margin-top:3px}
.bar-strip{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);display:none}
.bar-play{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--red);color:#fff;background:rgba(217,67,47,.16);padding:8px 14px}
.bar-play:hover{background:var(--red);text-decoration:none}
@media(min-width:820px){.bar-strip{display:block}}

/* ---------- shell ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:22px 18px 60px}

/* ---------- mission header ---------- */
.mission-head{margin:0 0 14px}
.eyebrow{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
h1{font-size:clamp(28px,6.4vw,46px);line-height:1.04;letter-spacing:-.02em;margin:0 0 8px;font-weight:800;text-transform:uppercase}
h1 .h1-accent{color:var(--red)}
.lede{margin:0;color:var(--muted);font-size:16px;max-width:62ch}

/* ---------- player stage ---------- */
.stage{
  position:relative;
  aspect-ratio:16/9;
  margin:16px 0 0;
  background:var(--concrete);
  border:1px solid var(--line);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 18px 40px -24px #000;
  overflow:hidden;
}
@media(max-width:760px){.stage{aspect-ratio:1/1}}

/* Cover and gameplay screenshot */
.cover {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    align-items: center;
    gap: clamp(18px, 4vw, 64px);
    padding: clamp(24px, 5vw, 72px);
    background:
        linear-gradient(90deg, #111921 10%, transparent 94%),
        repeating-linear-gradient(0deg, #c8a95116 0 1px, transparent 1px 36px),
        repeating-linear-gradient(90deg, #c8a95116 0 1px, transparent 1px 36px),
        radial-gradient(ellipse at 72% 72%, #354037, #121a23 72%);
}
.cover[hidden] { display: none; }
.cover-command { min-width: 0; }
.cover-title {
    margin: 12px 0;
    font-size: clamp(40px, 6vw, 84px);
    font-weight: 800;
    line-height: .94;
    letter-spacing: -.065em;
    color: #f5f0e4;
}
.cover-sub {
    margin: 0;
    color: var(--brass);
    font: 700 .72rem/1.5 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.cover-brief { margin: 0; max-width: 28ch; color: #bfc7cc; line-height: 1.5; }
.cover-board {
    margin: 0;
    min-width: 0;
    padding: 9px 9px 0;
    border: 1px solid #c8a9516e;
    background: #10181e;
    box-shadow: 12px 14px 0 #080d1166;
}
.cover-board img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 778;
    object-fit: cover;
}
.cover-board figcaption {
    padding: 7px 0;
    color: #bbc4ca;
    font: .66rem/1.4 var(--mono);
}
@media (max-width: 760px) {
    .stage { aspect-ratio: auto; height: clamp(370px, 105vw, 620px); }
    .cover {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
        gap: 14px;
        padding: 18px;
    }
    .cover-title { margin: 5px 0 8px; font-size: clamp(34px, 9vw, 54px); }
    .cover-brief { max-width: none; font-size: .86rem; }
    .cover .play-btn { margin-top: 12px; padding: 12px 14px; }
    .cover .cover-note { margin-top: 8px; }
    .cover-board {
        height: 100%;
        width: min(100%, 390px);
        margin: auto;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .cover-board img { height: 100%; object-position: center; }
}
.play-btn{
  margin-top:20px;padding:14px 30px;cursor:pointer;
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;background:#b73525;border:1px solid #f07a68;
  box-shadow:0 0 0 4px rgba(217,67,47,.16),0 10px 22px -14px #000;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.play-btn:hover{background:#ea4c35;transform:translateY(-1px);box-shadow:0 0 0 6px rgba(217,67,47,.2)}
.play-btn:active{transform:translateY(0)}
.play-btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.cover-note{margin:14px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#abb5bd}

/* ---------- loading ---------- */
.loader{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(180deg,#0f161d,#0a0e12)}
.stage[data-gf-state="loading"] .loader{display:flex}
.loader-block{display:flex;gap:6px}
.loader-block span{width:14px;height:14px;background:var(--line);animation:deploy 1.15s ease-in-out infinite}
.loader-block span:nth-child(2){animation-delay:.14s;background:var(--red)}
.loader-block span:nth-child(3){animation-delay:.28s}
.loader-block span:nth-child(4){animation-delay:.42s;background:var(--brass)}
@keyframes deploy{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-6px)}}
.loader-text{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.loader-bar{width:150px;height:2px;background:var(--line);overflow:hidden;position:relative}
.loader-bar::after{content:"";position:absolute;inset:0;background:var(--brass);transform-origin:left;animation:sweep 1.6s linear infinite}
@keyframes sweep{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.loader-block span,.loader-bar::after{animation-duration:2.6s}}

/* ---------- action bar ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.act{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;cursor:pointer;background:var(--concrete);color:var(--text);border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.act:hover{border-color:var(--brass);color:#fff}
.act:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.act-num{color:var(--brass);font-weight:700}
.act[aria-pressed="true"],.act[data-gf-liked]{background:rgba(217,67,47,.2);border-color:var(--red);color:#fff}
.share-msg{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--brass);min-height:1em;transition:opacity .4s ease}
.share-msg.flash{opacity:1}
.actions .spacer{flex:1 1 auto}

/* ---------- briefing (page body) ---------- */
.briefing{margin:34px 0 0;max-width:74ch}
.match-screenshots{display:grid;gap:18px;margin:22px 0 26px}
.match-screenshots figure{margin:0;border:1px solid var(--line);background:var(--concrete)}
.match-screenshots img{display:block;width:100%;height:auto}
.match-screenshots figcaption{padding:10px 12px;color:var(--text);font-size:14px;line-height:1.5}
.briefing h2{font-size:clamp(19px,3.2vw,24px);line-height:1.25;margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--line-soft);letter-spacing:-.01em;color:#fff}
.briefing > h2:first-child{margin-top:0;border-top:0;padding-top:0}
.briefing h3{font-size:16px;margin:20px 0 6px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.briefing p{margin:0 0 14px}
.briefing ul,.briefing ol{margin:0 0 16px;padding-left:22px}
.briefing li{margin:0 0 7px}
.briefing strong{color:#fff}
.briefing a{color:var(--brass);text-decoration:underline;text-decoration-color:rgba(200,169,81,.4)}
.briefing blockquote{margin:18px 0;padding:12px 16px;border-left:2px solid var(--red);background:rgba(217,67,47,.07);color:var(--text)}
.briefing blockquote p:last-child{margin:0}
.briefing code{font-family:var(--mono);font-size:.9em;background:var(--concrete-2);padding:1px 5px;border:1px solid var(--line-soft)}
.briefing table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.briefing th,.briefing td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.briefing th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- comments / comms ---------- */
.comms{margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.comms h2{font-size:clamp(19px,3.2vw,24px);margin:0 0 6px;color:#fff}
.comms-intro{margin:0 0 18px;color:var(--muted);font-size:15px}
.comms-form{display:grid;gap:10px;background:var(--concrete);border:1px solid var(--line);padding:16px}
.comms-form label{display:grid;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.comms-form input[name="name"]{max-width:260px}
.comms-form input,.comms-form textarea{width:100%;padding:10px;background:#0d141a;border:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none}
.comms-form textarea{min-height:96px;resize:vertical}
.comms-form input:focus,.comms-form textarea:focus{outline:none;border-color:var(--brass)}
.comms-form button[type="submit"]{justify-self:start;padding:11px 20px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--red);border:1px solid #f07a68}
.comms-form button[type="submit"]:hover{background:#ea4c35}
.form-msg{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--brass);min-height:1em}
.replying{display:none;gap:10px;align-items:center;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.comms-form[data-gf-replying] .replying{display:flex}
.replying button{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;cursor:pointer}

.reports{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.report{border:1px solid var(--line-soft);border-left:2px solid var(--line);background:rgba(26,35,44,.5);padding:13px 15px}
.report[data-gf-owner]{border-left-color:var(--brass);background:rgba(200,169,81,.07)}
.report-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.report-name{color:#fff;font-weight:700}
.report-owner{display:none;color:var(--brass);border:1px solid var(--brass);padding:0 5px;font-size:9px;letter-spacing:.16em}
.report[data-gf-owner] .report-owner{display:inline-block}
.report-time{color:#62707c}
.report-text{margin:0 0 8px;font-size:16px;white-space:prev-wrap;overflow-wrap:anywhere}
.report-reply{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;cursor:pointer}
.report-reply:hover{border-color:var(--brass);color:var(--brass)}
.report-replies{margin-top:10px;display:grid;gap:8px}
.report-replies .report{padding:10px 12px;background:rgba(15,21,26,.7)}
.report-to{color:var(--brass)}
.empty-note{display:none;margin:20px 0 0;padding:14px 16px;border:1px dashed var(--line);color:var(--muted);font-size:15px}
.reports[data-gf-empty] .empty-note,.comments-wrap[data-gf-empty] .empty-note{display:block}
.reports[data-gf-off] .comms-form{display:none}

/* ---------- legal / plain pages ---------- */
.doc{max-width:74ch}
.doc h1{font-size:clamp(26px,5vw,38px)}
.doc h2{font-size:20px;margin:28px 0 8px;color:#fff}
.doc ul{padding-left:22px}
.doc .updated{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- footer ---------- */
.foot{margin-top:50px;border-top:1px solid var(--line);background:rgba(12,17,21,.85)}
.foot-inner{max-width:1080px;margin:0 auto;padding:28px 18px;display:grid;gap:20px}
.foot-name{margin:0 0 6px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.24em;color:#fff}
.foot-note{margin:0;max-width:56ch;font-size:13px;line-height:1.6;color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.foot-nav a{color:var(--text)}
.foot-nav a:hover{color:var(--brass)}
.foot-copy{margin:0;font-size:12px;color:#5f6c78}
@media(min-width:880px){.foot-inner{grid-template-columns:1.4fr 1fr;align-items:start}.foot-copy{grid-column:1 / -1;padding-top:12px;border-top:1px solid var(--line-soft)}}


/* First-party Stratego player */
.stage[data-solo-stage] {
    display: grid;
    min-height: 36.75rem;
    aspect-ratio: auto;
    margin-top: 16px;
    isolation: isolate;
    color: #e7e2d6;
    background:
        radial-gradient(ellipse at 30% 45%, #273c3d, transparent 67%),
        repeating-linear-gradient(0deg, #b59c6510 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, #b59c6510 0 1px, transparent 1px 32px),
        #111a21;
}
.stage[data-solo-stage] > [hidden],
.solo-panel [hidden] {
    display: none;
}
.stage[data-solo-stage] .cover {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(18px, 4vw, 60px);
    background:
        linear-gradient(112deg, #111921 26%, #11192100 81%),
        repeating-radial-gradient(ellipse at 82% 58%, #74907823 0 1px, #31474300 1px 22px),
        radial-gradient(ellipse at 79% 62%, #344842, #101921 78%);
}
.stage[data-solo-stage] .cover-board {
    justify-self: end;
    width: min(100%, 440px);
    padding: 10px 10px 0;
    border: 1px solid #d4a95975;
    border-radius: 4px;
    box-shadow: 0 19px 46px #030609aa, inset 0 0 0 3px #c1a15b10;
}
.stage[data-solo-stage] .cover-board img {
    aspect-ratio: 1;
    border: 1px solid #384950;
    object-fit: contain;
}
.solo-panel {
    --map-ink: #262b33;
    --map-muted: #61584b;
    --map-rule: #bfb199;
    --map-red: #9e372e;
    --map-blue: #284961;
    --map-focus: #5c2f90;
    display: grid;
    grid-template-areas:
        "turn map"
        "controls map";
    grid-template-columns: minmax(230px, .76fr) minmax(0, 1.24fr);
    grid-template-rows: minmax(min-content, 2fr) minmax(min-content, 3fr);
    column-gap: clamp(24px, 4.5vw, 62px);
    row-gap: 18px;
    align-self: center;
    width: min(100%, 1050px);
    min-width: 0;
    margin-inline: auto;
    padding: 28px clamp(22px, 4.4vw, 55px);
    color: var(--map-ink);
}

.stage[data-solo-stage][data-state="playing"] {
    border-color: #ad9b7b;
    background:
        repeating-linear-gradient(0deg, #82644810 0 1px, transparent 1px 24px),
        linear-gradient(113deg, #f0e5d0 0%, #e8d9bf 63%, #deceb2 100%);
}

.solo-turn { grid-area: turn; align-self: end; }
.solo-turn h2 {
    margin: 0;
    color: var(--map-ink);
    font: 700 clamp(1.75rem, 3.35vw, 3rem)/1.02 Georgia, serif;
    letter-spacing: -.045em;
    text-wrap: balance;
}
.solo-turn p {
    margin: 11px 0 0;
    min-height: 3em;
    color: var(--map-muted);
    font-size: .94rem;
    line-height: 1.5;
}
.solo-panel[data-result="win"] .solo-turn h2 { color: var(--map-red); }
.solo-panel[data-result="loss"] .solo-turn h2 { color: var(--map-blue); }

.solo-controls {
    grid-area: controls;
    display: grid;
    align-self: start;
    gap: 15px;
    padding-top: 17px;
    border-top: 1px solid var(--map-rule);
}
.solo-level,
.solo-score {
    display: grid;
    gap: 6px;
    color: var(--map-muted);
    font: 700 .72rem/1.4 var(--mono);
    letter-spacing: .07em;
    text-transform: uppercase;
}
.solo-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.solo-controls button,
.solo-controls select,
.solo-sound {
    min-height: 43px;
    min-width: 0;
    padding: 8px 13px;
    border: 1px solid #a39377;
    border-radius: 3px;
    background: #f7edda;
    color: var(--map-ink);
    font: 700 .87rem/1.2 var(--sans);
}
.solo-controls select:disabled { color: #625748; background: #e6d8bf; }
.solo-controls button, .solo-sound { cursor: pointer; }
.solo-controls button:hover, .solo-sound:hover { background: #fffaeb; }
.solo-controls .solo-primary { background: var(--map-red); border-color: var(--map-red); color: #fff9eb; }
.solo-controls .solo-primary:hover { background: #7c2a23; }
.solo-controls button:focus-visible,
.solo-controls select:focus-visible,
.solo-sound:focus-visible {
    outline: 3px solid var(--map-focus);
    outline-offset: 2px;
}
.solo-score {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.solo-score div {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 8px 11px 6px;
    border: 1px solid var(--map-rule);
    border-left: 4px solid var(--map-red);
    background: #fff9e855;
}
.solo-score div + div { border-left-color: var(--map-blue); }
.solo-score strong {
    color: var(--map-ink);
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.solo-map {
    grid-area: map;
    align-self: center;
    justify-self: center;
    width: min(100%, 530px);
    min-width: 0;
    padding: 10px 14px 14px;
    border: 1px solid #a08f73;
    background: #f5e9d0;
    box-shadow: 5px 5px #6f513d33;
}
.solo-map-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin: 0 0 4px 16px;
    color: var(--map-ink);
    font: 700 .69rem/1.35 var(--mono);
    letter-spacing: .035em;
    text-transform: uppercase;
}
.solo-army { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.solo-army::before {
    content: '';
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--map-red);
}
.solo-army-blue::before {
    background: var(--map-blue);
    box-shadow: inset 0 0 0 2px var(--map-blue), inset 0 0 0 3px #b9cbd0;
}
.solo-sound {
    margin-left: auto;
    min-height: 38px;
    padding: 4px 9px;
    font: 700 .69rem/1.25 var(--mono);
}
.solo-sound[aria-pressed="true"] { background: #e5d5b8; }

.solo-grid-frame {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    grid-template-rows: auto auto;
}
.solo-coordinates,
.solo-rows {
    display: grid;
    color: var(--map-muted);
    font: 700 .69rem/1.8 var(--mono);
}
.solo-coordinates {
    grid-column: 2;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    text-align: center;
}
.solo-rows {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: repeat(10, minmax(0, 1fr));
    align-items: center;
}
.solo-board {
    display: grid;
    grid-row: 2;
    grid-column: 2;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: repeat(10, minmax(0, 1fr));
    aspect-ratio: 1;
    gap: 1px;
    padding: 1px;
    border: 1px solid #7e7057;
    background: #b19e7d;
}
.solo-cell {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    padding: 2px;
    appearance: none;
    border: 0;
    background: #e7d7b8;
    color: #fff9e9;
    font: 700 clamp(.75rem, 1.8vw, 1.24rem)/1 var(--mono);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .13s ease;
}
.solo-cell:nth-child(20n + 11),
.solo-cell:nth-child(20n + 12),
.solo-cell:nth-child(20n + 13),
.solo-cell:nth-child(20n + 14),
.solo-cell:nth-child(20n + 15),
.solo-cell:nth-child(20n + 16),
.solo-cell:nth-child(20n + 17),
.solo-cell:nth-child(20n + 18),
.solo-cell:nth-child(20n + 19),
.solo-cell:nth-child(20n + 20) { background: #e3d1af; }
.solo-cell[data-terrain="lake"] {
    cursor: default;
    background: repeating-linear-gradient(-26deg, #55788955 0 1px, transparent 1px 6px), #adc2c5;
}
.solo-cell span {
    display: grid;
    place-items: center;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    line-height: 1;
    transition: translate .13s ease, filter .13s ease;
}
.solo-cell[data-side="red"] span {
    border: 1px solid #772923;
    background: var(--map-red);
    box-shadow: inset 0 0 0 2px var(--map-red), inset 0 0 0 3px #e8aa8e, 0 1px 1px #49332255;
}
.solo-cell[data-side="blue"] span {
    border: 1px solid #1c3348;
    background: var(--map-blue);
    box-shadow: inset 0 0 0 2px var(--map-blue), inset 0 0 0 3px #9eb8c0, 0 1px 1px #25344355;
}
.solo-cell[data-side="blue"][data-revealed="false"] span {
    color: transparent;
    background:
        repeating-linear-gradient(126deg, transparent 0 3px, #a2bbc24a 3px 4px) center / 45% 45% no-repeat,
        var(--map-blue);
}
.solo-cell[data-last] { background: #d1a662; }
.solo-cell[data-side="red"]:hover span,
.solo-cell[data-selected] span { filter: brightness(1.13); translate: 0 -1px; }
.solo-cell[data-selected], .solo-cell[data-target] {
    z-index: 1;
    outline: 2px solid #68430d;
    outline-offset: -2px;
}
.solo-cell[data-selected] { background: #d3b16e; }
.solo-cell[data-target]:not([data-side="blue"]) span::after {
    content: '';
    width: 31%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #68430d;
}
.solo-cell:focus-visible { z-index: 2; outline: 3px solid var(--map-focus); outline-offset: -3px; }
.solo-cell[data-effect]::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    content: '';
    pointer-events: none;
}
.solo-cell[data-effect="arrive"]::after {
    border: 2px solid #68430d;
    animation: solo-arrival .47s ease-out both;
}
.solo-cell[data-effect="clash"]::after {
    border: 2px solid #bb3a26;
    border-radius: 50%;
    background: radial-gradient(circle, #fffae7dd 0%, #e9a03caa 31%, transparent 68%);
    animation: solo-clash .55s ease-out both;
}
@keyframes solo-arrival {
    from { opacity: .85; scale: .6; }
    to { opacity: 0; scale: 1.12; }
}
@keyframes solo-clash {
    0% { opacity: 0; scale: .5; }
    20% { opacity: 1; scale: 1.08; }
    100% { opacity: 0; scale: 1.65; }
}

.stage[data-solo-stage]:fullscreen,
.stage[data-solo-stage].solo-expanded {
    display: grid;
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0;
    align-content: start;
    padding-top: 48px;
}
.stage[data-solo-stage].solo-expanded {
    position: fixed;
    inset: 0;
    z-index: 1000;
}
.solo-scroll-lock { overflow: hidden; }
.solo-exit {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 10;
    min-height: 36px;
    padding: 6px 13px;
    border: 1px solid #7d6950;
    border-radius: 3px;
    background: #f7edda;
    color: #262b33;
    font: 700 .82rem/1.2 var(--sans);
    cursor: pointer;
}
.solo-exit:focus-visible { outline: 3px solid #5c2f90; outline-offset: 2px; }

@media (max-width: 760px) {
    .stage[data-solo-stage] {
        height: auto;
        min-height: clamp(545px, calc(100vw + 185px), 665px);
    }
    .stage[data-solo-stage] .cover {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 13px;
    }
    .stage[data-solo-stage] .cover-board {
        align-self: center;
        width: min(100%, 410px);
        min-height: 0;
        height: auto;
        max-height: 100%;
    }
    .stage[data-solo-stage] .cover-board img { min-height: 0; }
    .solo-panel {
        grid-template-areas: "turn" "map" "controls";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-self: start;
        gap: 12px;
        width: min(100%, 500px);
        padding: 15px 11px;
    }
    .solo-turn h2 { font-size: 1.85rem; }
    .solo-turn p { margin-top: 4px; min-height: 2.7em; font-size: .85rem; }
    .solo-controls { gap: 10px; padding-top: 9px; }
    .solo-map { padding: 5px 6px 7px; }
    .solo-map-header { gap: 3px 8px; margin-left: 12px; font-size: .58rem; }
    .solo-sound { padding-inline: 6px; font-size: .61rem; }
    .solo-grid-frame { grid-template-columns: 14px minmax(0, 1fr); }
    .solo-coordinates, .solo-rows { font-size: .58rem; }
    .solo-cell { padding: 1px; font-size: clamp(.64rem, 3.35vw, 1rem); }
}

@media (prefers-reduced-motion: reduce) {
    .solo-cell, .solo-cell span { transition: none; }
    .solo-cell[data-effect]::after { animation: none; background: none; border: 2px solid #68430d; }
}