/* Stratego Game Online: war-room theme */
:root{
  --bg:#0f141b;--bg-2:#151d27;--panel:#18212c;--panel-2:#1f2a37;
  --line:#2b3746;--grid:rgba(201,178,126,.12);
  --sand:#d8c9a3;--sand-hi:#ece2c4;--ink:#16110a;
  --text:#e4ded0;--muted:#a5adb6;--dim:#7c8792;
  --red:#8f2f2f;--red-hi:#a8423b;--lake:#22414a;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --cond:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --gut:16px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--sand)}
a:hover{color:var(--sand-hi)}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;z-index:50;padding:8px 12px;background:var(--sand);color:var(--ink)}
.skip:focus{left:8px;top:8px}

/* top bar */
.topbar{border-bottom:1px solid var(--line);background:var(--bg)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.brand-mark{width:28px;height:28px;flex:none}
.brand-name{font:700 1.02rem/1.1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.topnav{display:flex;gap:22px}
.topnav a{padding:8px 0;border-bottom:1px solid transparent;color:var(--muted);font:600 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.topnav a:hover{color:var(--sand);border-bottom-color:var(--sand)}

/* operations deck: H1 + player */
.ops{padding:22px 0 26px;border-bottom:1px solid var(--line);background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px}
.ops-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin:0 0 16px}
h1{margin:0;color:var(--sand-hi);font:700 clamp(1.7rem,4.2vw,2.7rem)/1.05 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.ops-sub{margin:0;color:var(--muted);font:500 .8rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}

.stage-wrap{position:relative}
.stage-wrap::before,.stage-wrap::after{content:"";position:absolute;width:22px;height:22px;border-color:var(--sand);border-style:solid;pointer-events:none}
.stage-wrap::before{top:-7px;left:-7px;border-width:2px 0 0 2px}
.stage-wrap::after{right:-7px;bottom:-7px;border-width:0 2px 2px 0}
.stage{position:relative;width:100%;aspect-ratio:16/10;max-height:calc(100vh - 150px);min-height:420px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#101810}

/* cover: real board on the left, briefing on the right */
.cover{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);background:var(--bg-2);cursor:pointer}
.stage[data-gf-state] .cover{display:none}
.cover-map{position:relative;height:100%;aspect-ratio:1/1;border-right:1px solid var(--line);background:#101611;overflow:hidden}
.cover-map img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.92)}
.cover-brief{display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0;padding:clamp(20px,4vw,48px)}
.cover-tag{margin:0;color:var(--sand);font:600 .74rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.cover-line{margin:0;max-width:15ch;color:var(--text);font:700 clamp(1.5rem,3.1vw,2.3rem)/1.08 var(--cond)}
.btn-play{display:inline-flex;align-items:center;justify-content:center;gap:12px;align-self:flex-start;padding:16px 24px;border:1px solid var(--sand-hi);border-radius:0;background:var(--sand);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);font:700 .95rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn-play:hover,.cover:hover .btn-play{background:var(--sand-hi);color:var(--ink)}
.btn-play-icon{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--ink)}
.cover-facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0;list-style:none;color:var(--muted);font:500 .76rem/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cover-facts li{display:inline-flex;align-items:center;gap:8px}
.cover-facts li::before{content:"";width:5px;height:5px;background:var(--sand)}
.cover-note{margin:0;max-width:40ch;color:var(--dim);font-size:.82rem;line-height:1.5}

/* loader: two armies deploying row by row */
.loader{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:16px;background:var(--bg-2);text-align:center}
.stage[data-gf-state="loading"] .loader{display:flex}
.loader-board{position:relative;width:min(50vmin,280px);aspect-ratio:1/1;border:1px solid var(--sand);background-color:#121a14;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:10% 10%}
.army{position:absolute;left:0;right:0;height:40%;background-image:linear-gradient(rgba(15,20,27,.92) 2px,transparent 2px),linear-gradient(90deg,rgba(15,20,27,.92) 2px,transparent 2px);background-size:10% 25%}
.army-red{top:0;background-color:rgba(143,47,47,.92);animation:deploy-down 2.8s steps(4,start) infinite}
.army-sand{bottom:0;background-color:rgba(216,201,163,.85);animation:deploy-up 2.8s steps(4,start) infinite}
.lake{position:absolute;top:40%;width:20%;height:20%;border:1px solid rgba(216,201,163,.25);background:var(--lake)}
.lake-l{left:20%}
.lake-r{left:60%}
.sweep{position:absolute;top:-1px;bottom:-1px;left:0;width:2px;background:var(--sand-hi);animation:sweep 1.9s linear infinite}
.loader-text{margin:0;color:var(--sand);font:600 .78rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.loader-text::after{content:"\25AE";margin-left:6px;animation:blink 1s steps(2,start) infinite}
@keyframes deploy-down{0%{clip-path:inset(0 0 100% 0)}70%,100%{clip-path:inset(0 0 0 0)}}
@keyframes deploy-up{0%{clip-path:inset(100% 0 0 0)}70%,100%{clip-path:inset(0 0 0 0)}}
@keyframes sweep{from{left:0}to{left:calc(100% - 2px)}}
@keyframes blink{to{visibility:hidden}}

/* action bar */
.ops-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:0;background:var(--panel);color:var(--text);font:600 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.tool:hover{border-color:var(--sand);color:var(--sand-hi)}
.tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tool[aria-pressed="true"],.tool[data-gf-liked]{border-color:var(--red-hi);background:var(--red);color:#fff}
.tool[aria-pressed="true"] svg,.tool[data-gf-liked] svg{fill:currentColor}
.tool-count{color:var(--sand);font-variant-numeric:tabular-nums}
.tool[aria-pressed="true"] .tool-count{color:#fff}
.tool-count:empty{display:none}
.tool-msg{color:var(--sand);font:500 .78rem/1.4 var(--mono)}
.tool-msg:empty{display:none}
.tool-fs{margin-left:auto}
.ops-credit{max-width:85ch;margin:14px 0 0;color:var(--dim);font-size:.82rem;line-height:1.5}

/* article */
.brief{max-width:800px;padding-top:44px;padding-bottom:16px;counter-reset:sec}
.sec{margin:0 0 52px;scroll-margin-top:16px}
.sec>h2{margin:0 0 16px;color:var(--sand-hi);font:700 clamp(1.4rem,2.7vw,1.8rem)/1.2 var(--cond);letter-spacing:.02em;counter-increment:sec}
.sec>h2::before{content:counter(sec,decimal-leading-zero) " /";display:block;margin-bottom:8px;color:var(--sand);font:600 .72rem/1 var(--mono);letter-spacing:.2em;opacity:.85}
.sec p{margin:0 0 14px}
.sec h3{margin:30px 0 12px;color:var(--text);font:700 1.1rem/1.3 var(--sans)}
.sec ul{margin:0 0 18px;padding-left:1.25em}
.sec li{margin:0 0 9px}
.sec li::marker{color:var(--sand)}
.sec ol{margin:0 0 18px;padding:0;list-style:none;counter-reset:step}
.sec ol>li{position:relative;min-height:34px;margin:0 0 14px;padding-left:50px;counter-increment:step}
.sec ol>li::before{content:counter(step);position:absolute;top:0;left:0;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--sand);color:var(--sand);font:700 .85rem/1 var(--mono)}
.sec strong{color:var(--sand-hi);font-weight:650}
.shot{margin:24px 0 28px;border:1px solid var(--line);background:var(--panel)}
.shot img{width:100%}
.shot figcaption{padding:10px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;line-height:1.5}
.ranks-wrap{margin:6px 0 16px;overflow-x:auto;border:1px solid var(--line)}
.ranks{width:100%;min-width:520px;border-collapse:collapse;font-size:.93rem}
.ranks th,.ranks td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ranks thead th{background:var(--panel);color:var(--muted);font:600 .72rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ranks td:first-child{width:4.5em;color:var(--sand);font:700 1rem/1.3 var(--mono)}
.ranks tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.ranks tfoot td{border-bottom:0;color:var(--muted);font:500 .8rem/1.4 var(--mono)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;gap:18px;padding:16px 2px;color:var(--text);font-weight:650;list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;color:var(--sand);font:700 1.15rem/1.4 var(--mono)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:hover{color:var(--sand-hi)}
.faq-a{padding:0 2px 14px}
.faq-a p{margin:0 0 10px}

/* comments */
.c-form{display:grid;gap:12px;padding:18px;border:1px solid var(--line);background:var(--panel)}
.comms:has([data-gf-off]) .c-form{display:none}
.c-field{display:grid;gap:6px;color:var(--muted);font:600 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.c-field input,.c-field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--text);font:400 1rem/1.5 var(--sans);letter-spacing:0;text-transform:none}
.c-field textarea{min-height:110px;resize:vertical}
.c-field input:focus,.c-field textarea:focus{border-color:var(--sand);outline:none}
.c-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn-post{padding:13px 20px;border:1px solid var(--sand-hi);border-radius:0;background:var(--sand);color:var(--ink);font:700 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.btn-post:hover{background:var(--sand-hi)}
.c-msg{color:var(--sand);font-size:.88rem}
.c-replying{display:none;margin:0;color:var(--muted);font-size:.9rem}
.c-form[data-gf-replying] .c-replying{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.c-cancel{padding:4px 10px;border:1px solid var(--line);background:none;color:var(--muted);font:inherit;cursor:pointer}
.c-list{display:grid;gap:14px;margin-top:22px}
.c-item{padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--line);background:var(--bg-2)}
.c-item[data-gf-owner]{border-left-color:var(--sand);background:rgba(216,201,163,.06)}
.c-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:6px}
.c-name{color:var(--sand-hi)}
.c-owner{display:none;padding:0 6px;background:var(--sand);color:var(--ink);font:700 .66rem/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.c-item[data-gf-owner]>.c-head>.c-owner{display:inline-block}
.c-to{color:var(--muted);font-size:.85rem}
.c-time{color:var(--dim);font:500 .74rem/1.4 var(--mono)}
.c-text{margin:0 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.c-reply{padding:0;border:0;background:none;color:var(--sand);font:600 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.c-replies{display:grid;gap:10px;margin-top:10px;padding-left:16px;border-left:1px dashed var(--line)}
.c-replies:empty{display:none}
.c-empty{display:none;margin:16px 0 0;padding:14px 16px;border:1px dashed var(--line);color:var(--muted)}
[data-gf-comments][data-gf-empty]+.c-empty{display:block}

/* legal and other pages */
.doc{max-width:800px;padding-top:40px;padding-bottom:56px}
.doc-kicker{margin:0 0 10px;color:var(--sand);font:600 .74rem/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.doc h1{margin-bottom:10px}
.doc-updated{margin:0 0 28px;color:var(--muted);font:500 .8rem/1.4 var(--mono)}
.doc-body h2{margin:34px 0 10px;color:var(--sand-hi);font:700 1.3rem/1.25 var(--cond);letter-spacing:.02em}
.doc-body ul{padding-left:1.25em}
.doc-body li{margin-bottom:8px}
.doc-body li::marker{color:var(--sand)}
.doc-back{margin-top:36px;font:600 .78rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.lost{padding-bottom:80px}
.lost h1{margin-bottom:14px}

/* footer */
.foot{margin-top:24px;border-top:1px solid var(--line);background:var(--bg-2)}
.foot-in{display:grid;gap:14px;padding-top:28px;padding-bottom:32px}
.foot-brand p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.foot-links a,.foot-btn{color:var(--muted);font:600 .74rem/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.foot-btn{padding:0;border:0;background:none;cursor:pointer}
.foot-links a:hover,.foot-btn:hover{color:var(--sand)}
.foot-legal{max-width:90ch;margin:0;color:var(--dim);font-size:.8rem;line-height:1.55}
.foot-copy{margin:0;color:var(--dim);font:500 .74rem/1.4 var(--mono)}

/* analytics consent bar */
.consent{position:fixed;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:760px;margin:0 auto;padding:16px 18px;border:1px solid var(--sand);background:var(--panel-2)}
.consent-text{flex:1 1 320px;margin:0;color:var(--text);font-size:.9rem;line-height:1.5}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px}
.consent-btn{min-width:110px;min-height:44px;padding:0 18px;border:1px solid var(--sand);border-radius:0;background:transparent;color:var(--sand-hi);font:700 .76rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.consent-btn:hover{background:var(--sand);color:var(--ink)}

/* phones: player fills the screen width, portrait board */
@media (max-width:720px){
  body{font-size:16px}
  .topnav{display:none}
  .ops{padding:14px 0 20px}
  .ops-head{margin-bottom:10px}
  .stage-wrap{margin:0 calc(-1*var(--gut))}
  .stage-wrap::before,.stage-wrap::after{display:none}
  .stage{aspect-ratio:10/16;max-height:none;min-height:0;border-right:0;border-left:0}
  .cover{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .cover-map{width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .cover-brief{justify-content:flex-start;gap:11px;padding:16px}
  .cover-line{max-width:none;font-size:1.4rem}
  .btn-play{align-self:stretch}
  .cover-note{display:none}
  .tool{flex:1 1 auto;justify-content:center;padding:0 12px}
  .tool-fs{margin-left:0}
  .brief{padding-top:32px}
  .consent{left:8px;right:8px;bottom:8px;gap:8px;padding:10px 12px}
  .consent-text{flex-basis:100%;font-size:.8rem;line-height:1.4}
  .consent-actions{flex:1 1 100%;gap:8px}
  .consent-btn{flex:1 1 0;min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .army,.sweep,.loader-text::after{animation:none}
  .army{clip-path:none}
}