/* The two faces of the game, served with it: League Gothic is the poster voice (titles, banners, stamps, the big
   numbers of the rail), Barlow Condensed is the staff officer's voice (everything written to be read or pressed).
   One League Gothic file carries every weight, so nothing fakes a bold. */
@font-face{font-family:'League Gothic';src:url('../fonts/league-gothic.woff2') format('woff2'),url('../fonts/league-gothic.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-400.woff2') format('woff2'),url('../fonts/barlow-condensed-400.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-500.woff2') format('woff2'),url('../fonts/barlow-condensed-500.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-600.woff2') format('woff2'),url('../fonts/barlow-condensed-600.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-700.woff2') format('woff2'),url('../fonts/barlow-condensed-700.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-800.woff2') format('woff2'),url('../fonts/barlow-condensed-800.woff') format('woff');font-weight:800;font-style:normal;font-display:swap}
/* Layout: a full-bleed operational map; a command bar across the top, orders and selection along the bottom edge,
   menus as dark steel windows over the map. The in-game look follows Hearts of Iron IV: gunmetal blue-grey panels with a
   light bevel, cream text with a drop shadow, gold for what is selected or matters, green and red for good and bad numbers.
   (The title screen keeps its typed orders on paper: the paper remap, further down.) */
:root{
  color-scheme:dark;
  --ink-0:#131412; --ink-1:#1a1c19; --ink-2:#232622; --ink-3:#2d312c; --ink-4:#3a3e37;
  --steel:#575b50; --steel-2:#7b8072; --steel-hi:rgba(255,250,232,.09); --khaki:#c9b684;
  --hair:rgba(220,214,190,.14); --hair-2:rgba(220,214,190,.28);
  --paper:#f1f0e9; --paper-dim:#b6b7ae; --paper-faint:#878a7f;
  --brass:#d4b25c; --brass-2:#eed284;
  --alt:#d95744; --alt-2:#e8917e; --red:#ae3322;
  --de:#86aed3; --de-deep:#2d4e6e; --su:#e0705f; --su-deep:#6e2a22;
  --de-counter:#a9c6e2; --de-ink:#0f1c28; --su-counter:#efa496; --su-ink:#2a0f0b;
  --good:#7ccb62; --warn:#e8b24e; --bad:#e0584a;
  --grain:url('../img/grain.png');
  --f-display:"League Gothic","Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --f-ui:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-mono:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --r-s:2px; --r-m:3px;
  --f-hud:Tahoma,Verdana,"DejaVu Sans","Segoe UI",Arial,sans-serif; /* the HUD's figures and headings: the wide bold sans HOI4 sets them in */
  --tsh:0 1px 1px rgba(0,0,0,.85); /* the drop shadow under every HUD figure */
  --gut:16px; --scr-pad:20px;
  /* the keep-out corner: the host's badge (Netlify's "Powered by Netlify") sits over the bottom-right of every page, so
     nothing of the game may rest in a box this size there. Panels lift above it or stop short of it, floating tips step
     around it, the map's opening view leaves it empty. The JS reads these same two numbers (KEEPOUT) */
  --wm-w:200px; --wm-h:64px;
  --bar-h:56px;
}
html,body{height:100%}
body{background:var(--ink-0);color:var(--paper);font:500 14px/1.4 var(--f-ui);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#app{position:relative;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none}
#map{position:absolute;inset:0;background:var(--ink-0)}
#ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#app::after{content:none} /* (no vignette: HOI4's map runs clean to the edges) */
#map,#map canvas{touch-action:none} /* the map handles every touch itself: a finger in box mode draws a box, it never scrolls the page */
.glass{background:linear-gradient(rgba(46,49,44,.97),rgba(28,30,27,.97));border:1px solid var(--steel);border-radius:var(--r-s);box-shadow:inset 0 1px 0 var(--steel-hi),0 0 0 1px rgba(8,9,7,.9),0 10px 24px -12px rgba(0,0,0,.9)} /* a HOI4 window: charcoal with a light bevel inside a dark line */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--steel);border-radius:var(--r-s);
  background:linear-gradient(#3d4139,#272a25);box-shadow:inset 0 1px 0 var(--steel-hi),0 1px 0 rgba(0,0,0,.6);cursor:pointer;font:700 13.5px/1 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;text-shadow:var(--tsh)}
.btn:hover{background:linear-gradient(#4b5046,#31352f);border-color:var(--steel-2)}
.btn:disabled{opacity:.45;cursor:default}
.btn.gold{background:linear-gradient(#e0bf69,#b48d35);color:#1c1506;border-color:#7d621f;text-shadow:0 1px 0 rgba(255,240,200,.35)}
.btn.gold:hover{background:linear-gradient(#f0d07c,#c59c3d)}
.btn.icon{width:34px;padding:0}
.btn[aria-pressed="true"]{border-color:var(--brass);color:var(--brass-2);background:linear-gradient(#2d302b,#1e201d);box-shadow:inset 0 0 0 1px rgba(212,178,92,.35)}
.seg{display:inline-flex;border:1px solid var(--steel);border-radius:var(--r-s);overflow:hidden;background:linear-gradient(#2c2f2a,#1e211d);box-shadow:inset 0 1px 0 var(--steel-hi)}
.seg button{border:0;background:transparent;height:32px;min-width:38px;padding:0 10px;cursor:pointer;font:700 13px/1 var(--f-ui);letter-spacing:.04em;color:var(--paper-dim);text-shadow:var(--tsh)}
.seg button+button{border-left:1px solid rgba(6,9,12,.6);box-shadow:inset 1px 0 0 var(--steel-hi)}
.seg button[aria-pressed="true"]{background:linear-gradient(#171916,#121412);color:var(--brass-2);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.eyebrow{font:600 12px/1.3 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
*{scrollbar-width:thin;scrollbar-color:#575b50 transparent}

/* ---------- command bar ---------- */
#bar{position:absolute;left:0;right:0;top:0;z-index:10;display:flex;align-items:center;gap:14px;height:var(--bar-h);
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));
  background:linear-gradient(to bottom,#2e312c,#1b1d1a 70%,#171916);border-bottom:1px solid var(--steel);box-shadow:inset 0 1px 0 var(--steel-hi),0 2px 8px rgba(0,0,0,.6)}
/* the flag of the side you lead: a plain field in its colour inside a dark frame (no real flags are drawn) */
#sideTag{display:flex;align-items:center;gap:9px;font:700 13px/1 var(--f-hud);letter-spacing:.04em;text-transform:uppercase;text-shadow:var(--tsh)}
#sideTag i{width:36px;height:24px;border-radius:1px;display:block;border:1px solid rgba(0,0,0,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.5);background:linear-gradient(rgba(255,255,255,.14),rgba(0,0,0,.18)),var(--flag,#777)}
/* the figures: an icon and a number, as the top bar of HOI4 shows political power, manpower and the factories */
.stat{display:flex;align-items:center;gap:6px;min-width:0;cursor:default}
.stat .ico{width:19px;height:19px;flex:none;fill:none;stroke:var(--khaki);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.stat .ico .f{fill:var(--khaki);stroke:none}
.stat b{font:700 15px/1 var(--f-hud);letter-spacing:0;text-shadow:var(--tsh)}
.stat small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* the label is the tooltip; the icon says what the figure is */
.stat .inc{font:600 11px/1 var(--f-mono);color:var(--good);text-shadow:var(--tsh);margin-left:1px}
/* the alert: a round badge with the count of things that need you, ringed red or amber (HOI4's alert icons at the top) */
#sitBtn{height:30px;min-width:30px;padding:0;border-radius:50%;border:1px solid var(--steel-2);background:radial-gradient(circle at 50% 35%,#4c5046,#23261f 70%);box-shadow:inset 0 1px 0 var(--steel-hi),0 1px 0 rgba(0,0,0,.6);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--paper)}
#sitBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#sitBtn svg.quiet{display:none;color:var(--paper-dim)} #sitBtn.quiet svg.quiet{display:block} /* nothing needs you: a clipboard with a tick, not an empty box */
#sitBtn:hover{border-color:var(--brass)}
#sitBtn em,#sitTool em,.tabs em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center;font:800 12px/1 var(--f-mono);letter-spacing:0;background:transparent;color:var(--paper);text-shadow:var(--tsh)}
#sitBtn em[hidden],#sitTool em[hidden],.tabs em[hidden]{display:none}
#sitBtn.bad{border-color:var(--bad);box-shadow:0 0 0 1px rgba(224,88,74,.5),0 0 10px rgba(224,88,74,.55);animation:alertPulse 1.6s ease-in-out infinite} #sitBtn.bad em,#sitTool.bad em,.tabs em.bad{color:#ffb3a8}
#sitBtn.warn{border-color:var(--warn);box-shadow:0 0 0 1px rgba(232,178,78,.45),0 0 8px rgba(232,178,78,.4)} #sitBtn.warn em,#sitTool.warn em,.tabs em.warn{color:#f6d79a}
#sitTool.bad{border-color:rgba(224,88,74,.65);color:#f3b9ae} #sitTool.warn{border-color:rgba(232,178,78,.6);color:#f2d09c}
#sitTool em{background:var(--ink-4)} .tabs em{background:var(--ink-4)}
@keyframes alertPulse{0%,100%{box-shadow:0 0 0 1px rgba(224,88,74,.5),0 0 6px rgba(224,88,74,.35)}50%{box-shadow:0 0 0 2px rgba(224,88,74,.8),0 0 14px rgba(224,88,74,.7)}}
:root.still #sitBtn.bad{animation:none}
.tabs em{margin-left:5px;min-width:16px;height:16px;font-size:10px;vertical-align:1px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:5px 6px 6px 8px;margin:2px 0;border-radius:5px;cursor:pointer;border-left:3px solid var(--hair-2)}
.srow:hover{background:var(--ink-3)} .srow.on{background:var(--sel-tint,rgba(217,178,92,.14))}
.srow.bad{border-left-color:var(--bad)} .srow.warn{border-left-color:var(--warn)} .srow.good{border-left-color:var(--good)}
.srow b{font:600 12.5px/1.25 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .mono{font-size:11px;color:var(--paper-dim);text-align:right;white-space:nowrap}
.srow .st{grid-column:1/3;font:500 11px/1.3 var(--f-ui);color:var(--paper-faint)}
.sitHead.bad{color:var(--bad)} .sitHead.warn{color:var(--warn)} .sitHead.good{color:var(--good)} .sitHead.sub{margin-top:6px;font-size:10.5px}
.sitPic{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px}
.prow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 8px;align-items:baseline;padding:4px 6px 5px 8px;border-radius:5px;border-left:3px solid transparent}
.prow.go{cursor:pointer} .prow.go:hover{background:var(--ink-3)}
.prow .pk{font:600 10.5px/1.3 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-faint)}
.prow .pv{font:600 12.5px/1.3 var(--f-ui);color:var(--paper);min-width:0;overflow-wrap:anywhere}
.prow .pv small{display:block;font:500 11px/1.35 var(--f-ui);color:var(--paper-faint)}
.prow .pv b.bad{color:var(--bad)} .prow .pv b.good{color:var(--good)}
#sitTool{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 4px;font-size:9.5px;letter-spacing:.06em}
#sitTool em{min-width:20px;height:17px;font-size:11px}
/* the date and the speed, in one sunken box at the right, as HOI4 keeps them: the date over the day line, the pause and three
   speed pips beside it (lit green up to the speed the clock runs at, the pause red while it stands still) */
#datebox{margin-left:auto;display:flex;align-items:center;gap:0;height:42px;padding:0 4px;border:1px solid var(--steel);border-radius:21px;background:linear-gradient(#1c1e1b,#101210);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 var(--steel-hi)}
#speedSeg{display:contents}
#speedSeg button{border:0;background:transparent;box-shadow:none;height:auto;min-width:0;padding:0;color:var(--paper-dim);text-shadow:var(--tsh)}
#speedSeg button+button{border-left:0;box-shadow:none}
#speedSeg button[aria-pressed="true"]{background:transparent;box-shadow:none}
#speedSeg .stepb{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--khaki);background:radial-gradient(circle at 50% 35%,#3d4139,#1c1e1b 75%);color:var(--khaki);font:700 18px/1 var(--f-hud);display:grid;place-items:center;flex:none;box-shadow:0 1px 0 rgba(0,0,0,.7)} /* the − and + (HOI4's slower and faster) */
#speedSeg .stepb:hover{color:var(--brass-2);border-color:var(--brass-2)}
#speedSeg .stepb:disabled{opacity:.4;cursor:default}
#speedSeg .playb{width:22px;height:28px;display:grid;place-items:center;color:#8fdc6a;margin-left:6px;flex:none}
#speedSeg .playb svg{width:12px;height:12px;display:block;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
#speedSeg .playb .pause{display:none} #speedSeg[data-s="0"] .playb .pause{display:block} #speedSeg[data-s="0"] .playb .play{display:none} #speedSeg[data-s="0"] .playb{color:#ff6b5b}
#clock{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8px 0 4px;min-width:150px}
#clock b{font:700 14px/1 var(--f-hud);letter-spacing:0;text-shadow:var(--tsh);white-space:nowrap}
#clock small{display:block;font:600 9.5px/1.2 var(--f-ui);letter-spacing:.04em;color:var(--paper-dim);margin-top:2px}
/* the five speed pips under the date: lit green up to the speed the clock runs at (one per speed, 1 to 5, the fifth red-hot) */
#clock .pips{display:flex;gap:2px;margin-top:3px;height:4px}
#clock .pips i{display:block;width:20px;height:4px;border-radius:1px;background:#2a2d28;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
#speedSeg[data-sel="1"] #clock .pips i:nth-child(-n+1),#speedSeg[data-sel="2"] #clock .pips i:nth-child(-n+2),#speedSeg[data-sel="3"] #clock .pips i:nth-child(-n+3),#speedSeg[data-sel="4"] #clock .pips i:nth-child(-n+4),#speedSeg[data-sel="5"] #clock .pips i{background:linear-gradient(#9fe07e,#5cb53f);box-shadow:0 0 5px rgba(124,203,98,.6)}
#speedSeg[data-sel="5"] #clock .pips i:nth-child(5){background:linear-gradient(#ff9a7a,#d8432e);box-shadow:0 0 6px rgba(224,88,74,.7)}
#speedSeg[data-s="0"] #clock .pips{opacity:.5} /* paused: the pips keep the speed the clock will run at */
#bar .btn.icon{width:32px;height:32px;font-size:15px}
#sideTag,.stat small,.stat b,.stat .inc,#clock b,#clock small{white-space:nowrap} /* the bar never wraps: narrower screens drop the less useful parts instead */
.vsep{width:1px;align-self:stretch;margin:12px 0;background:linear-gradient(transparent,var(--hair-2),transparent)}

/* ---------- panels ---------- */
#objectives{position:absolute;left:max(var(--gut),env(safe-area-inset-left,0px));top:calc(var(--bar-h) + 12px);z-index:8;width:300px;padding:8px 12px 10px;max-height:calc(100% - var(--bar-h) - 54px - var(--sel-h,0px));overflow:auto;overscroll-behavior:contain}
.tabs{display:flex;gap:2px;margin:0 -4px 6px;border-bottom:1px solid var(--hair)}
.tabs button{flex:1 1 auto;border:0;background:transparent;color:var(--paper-faint);font:800 11px/1 var(--f-hud);letter-spacing:.08em;text-transform:uppercase;padding:9px 3px 10px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-shadow:var(--tsh)}
.tabs button[aria-selected="true"]{color:var(--brass-2);border-bottom-color:var(--brass)}
.tabs button:hover{color:var(--paper)}
/* the panel's tab row and its close button stay at the top while the list scrolls under them (a HOI4 window's header strip) */
.objTop{display:flex;align-items:stretch;gap:2px;margin:-8px -12px 8px;padding:0 8px;border-bottom:1px solid var(--steel);position:sticky;top:-8px;z-index:2;background:linear-gradient(#34372f,#232622);box-shadow:inset 0 1px 0 var(--steel-hi)}
.objTop .tabs{flex:1 1 auto;min-width:0;margin:0;border-bottom:0}
.objX{flex:0 0 auto;width:28px;border:0;border-radius:var(--r-s);background:transparent;color:var(--paper-faint);font:600 14px/1 var(--f-ui);cursor:pointer;display:grid;place-items:center;padding:0}
.objX:hover{color:var(--paper);background:var(--ink-3)}
.objX:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.frow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:5px 4px;border-radius:5px;cursor:pointer}
.frow:hover{background:var(--ink-3)}
.frow.on{background:var(--sel-tint,rgba(217,178,92,.14))}
.frow svg{width:28px;height:18px;grid-row:1/3}
.frow b{font:600 12.5px/1.2 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .mono{font-size:11px;color:var(--paper-dim);text-align:right}
.frow .st{grid-column:2/4;display:flex;gap:6px;align-items:center;font:500 11px/1.2 var(--f-ui);color:var(--paper-faint)}
.frow .st i{display:block;height:3px;width:48px;border-radius:2px;background:var(--ink-4);overflow:hidden}
.frow .st i b{display:block;height:100%;background:var(--brass)}
.grpHead{font:700 10.5px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);margin:8px 4px 2px}
.grpHead.army{display:flex;justify-content:space-between;align-items:center;gap:8px;width:calc(100% - 8px);background:none;border:0;padding:3px 0;cursor:pointer;color:var(--brass);text-align:left}
.grpHead.army .pick{font-size:9.5px;letter-spacing:.08em;color:var(--paper-dim);border:1px solid var(--hair-2);border-radius:999px;padding:2px 8px}
.grpHead.army:hover .pick,.grpHead.army:focus-visible .pick{color:var(--paper);border-color:var(--brass)}
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:6px 4px;border-radius:5px;cursor:pointer}
.trow:hover{background:var(--ink-3)}
.trow b{font:600 13px/1.2 var(--f-ui)}
.trow small{grid-column:1;color:var(--paper-dim);font:500 11.5px/1.2 var(--f-ui)}
.trow .btn{grid-row:1/3;grid-column:2;height:28px;padding:0 10px;font-size:12px}
.side2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side2 h4{margin:0 0 4px;font:700 11px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase}
.bunit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 6px;font:500 12px/1.25 var(--f-ui);padding:3px 0}
.bunit span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bunit .mono{font-size:11px;color:var(--paper-dim)}
.bunit i{grid-column:1/3;display:block;height:3px;border-radius:2px;background:var(--ink-4);overflow:hidden}
.bunit i b{display:block;height:100%;background:var(--brass)}
.prog{position:relative;height:16px;border-radius:8px;background:var(--ink-3);overflow:hidden}
.prog i{position:absolute;left:0;top:0;bottom:0}
.prog span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--f-mono);color:var(--paper)}
.mods{display:flex;flex-wrap:wrap;gap:4px}
.pinNote{margin:8px 0 0;padding-left:8px;border-left:2px solid var(--warn)}
.mods span{padding:2px 7px;border-radius:3px;background:var(--ink-3);font:600 11px/16px var(--f-ui);color:var(--paper-dim)}
.mods span.plus{color:var(--good)} .mods span.minus{color:var(--bad)} .mods button.more{align-self:center}
#objectives h3{margin:0 0 6px;font:800 11px/1.2 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);display:flex;justify-content:space-between;align-items:center;text-shadow:var(--tsh)}
.obj{display:grid;grid-template-columns:18px 1fr auto;gap:2px 8px;align-items:center;padding:4px 0;font-size:13px}
.obj .tick{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--paper-faint)}
.obj.done .tick{background:var(--good);border-color:var(--good)}
.obj.fail .tick{background:transparent;border-color:var(--bad)}
.obj.live .tick{border-color:var(--good);box-shadow:inset 0 0 0 2px rgba(147,196,125,.25)}
.obj .pv{font:500 11px/1 var(--f-mono);color:var(--paper-dim)}
.obj .det{grid-column:2/4;font:400 11px/1.25 var(--f-ui);color:var(--paper-faint);margin-top:-1px}
.obj .bar{grid-column:2/4;height:4px;background:#0e1317;border-radius:1px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.obj .bar i{display:block;height:100%;background:linear-gradient(#f0d07c,#c59c3d)}
.objHead{font:700 12px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
#feed{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));top:auto;bottom:calc(var(--wm-h) + 58px);z-index:7;width:300px;display:flex;flex-direction:column-reverse;gap:5px;pointer-events:none}
.news{padding:6px 10px 7px;font:500 13px/1.35 var(--f-ui);animation:newsIn .35s ease-out both;pointer-events:auto;cursor:pointer;border-left:3px solid var(--paper-faint)}
.news .when{font:600 10.5px/1 var(--f-mono);color:var(--paper-faint);display:flex;align-items:center;gap:6px;margin-bottom:3px}
.news .when i{display:none}
.news.de{border-left-color:var(--de)} .news.su{border-left-color:var(--su)} .news.gold{border-left-color:var(--brass)} .news.good{border-left-color:var(--good)} .news.bad{border-left-color:var(--bad)}
.news.de .when i{background:var(--de)} .news.su .when i{background:var(--su)} .news.gold .when i{background:var(--brass)}
.news.good .when i{background:var(--good)} .news.bad .when i{background:var(--bad)}
@keyframes newsIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
#sel{position:absolute;left:max(var(--gut),env(safe-area-inset-left,0px));bottom:14px;z-index:9;width:360px;max-height:46vh;display:flex;flex-direction:column;overflow:hidden}
#selHead{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-bottom:1px solid var(--steel);background:linear-gradient(#34372f,#232622);box-shadow:inset 0 1px 0 var(--steel-hi)}
#selHead h2{margin:0;font:800 17px/1.1 var(--f-hud);letter-spacing:.05em;text-transform:uppercase;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:var(--tsh)}
#selHead .btn.icon{width:28px;height:28px;font-size:13px}
#selBody{padding:10px 12px;overflow:auto;display:flex;flex-direction:column;gap:8px}
#selActs{display:flex;gap:6px;padding:0 12px 12px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:104px 1fr;gap:3px 10px;font-size:13px}
.kv span:nth-child(odd){color:var(--paper-faint);font:700 10px/1.8 var(--f-hud);letter-spacing:.03em;text-transform:uppercase;text-shadow:var(--tsh);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strength{height:9px;border-radius:1px;background:#0d1216;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 var(--steel-hi)}
.strength i{display:block;height:100%;background:linear-gradient(#9ee07f,#5aae3f)}
.strength.org{height:7px}.strength.org i{background:linear-gradient(#f3c66a,#d08f2a)!important}
.ulist{display:flex;flex-direction:column;gap:4px}
.urow{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:4px 6px;border-radius:5px;cursor:pointer}
.urow:hover{background:var(--ink-3)}
.urow canvas{width:30px;height:20px}
.urow b{font:600 13px/1.2 var(--f-ui)}
.urow .mono{font-size:11.5px;color:var(--paper-dim)}
.rec{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r-s);background:var(--ink-2)}
.rec b{font:700 14px/1.2 var(--f-ui)}
.rec small{color:var(--paper-dim);font:500 12px/1.3 var(--f-ui)}
.rec .btn{grid-row:1/3;grid-column:2}
.badge{display:inline-block;padding:1px 6px;border-radius:3px;font:700 10.5px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.badge.ok{background:rgba(147,196,125,.16);color:var(--good)}
.badge.bad{background:rgba(226,106,90,.18);color:var(--bad)}
.badge.warn{background:rgba(232,169,79,.18);color:var(--warn)}
.note{font:400 12.5px/1.45 var(--f-ui);color:var(--paper-dim)}
button.more{border:0;background:none;padding:0 2px;margin-left:4px;font:600 11px/1 var(--f-ui);color:var(--brass);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
button.more:hover{color:var(--brass-2)}
.hoi{display:block;margin-top:3px;font-size:11px;line-height:1.45;color:var(--paper-dim)}

/* ---------- the army bar: your armies as generals along the bottom, HOI4-fashion ---------- */
/* the bar centres between two insets as wide as the keep-out corner, so however many armies there are, it scrolls before
   it ever reaches the host's badge */
#armyBar{position:absolute;left:calc(var(--wm-w) + 12px);right:calc(var(--wm-w) + 12px);width:fit-content;margin-inline:auto;bottom:10px;z-index:8;display:flex;align-items:flex-end;gap:6px;padding:7px 9px;max-width:min(60vw,880px);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
:root:has(#sel:not([hidden])) #armyBar{left:calc(max(var(--gut),env(safe-area-inset-left,0px)) + 372px);max-width:760px} /* the selection panel has the bottom-left corner: the bar centres between it and the keep-out corner */
.acard{position:relative;flex:none;width:64px;border:1px solid var(--steel);border-radius:2px;background:linear-gradient(#2c2f2a,#1b1d1a);cursor:pointer;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;box-shadow:inset 0 1px 0 var(--steel-hi),0 1px 0 rgba(0,0,0,.6)}
.acard:hover{border-color:var(--steel-2)}
.acard.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass),inset 0 0 0 1px rgba(242,211,130,.35),0 6px 16px rgba(0,0,0,.5)}
.acard.part{border-color:rgba(217,180,94,.6)}
.acard canvas{display:block;width:100%;height:56px}
.acard .an{position:absolute;left:3px;top:3px;min-width:15px;height:15px;border-radius:2px;background:#121412;border:1px solid var(--brass);color:var(--brass-2);font:800 9.5px/13px var(--f-ui);text-align:center;padding:0 2px}
.acard .ac{display:block;font:700 11.5px/1 var(--f-mono);color:var(--paper-dim);text-align:center;padding:4px 0 3px;font-variant-numeric:tabular-nums}
.acard .ast{display:block;height:3px;margin:0 5px 5px;border-radius:2px;background:var(--ink-4);overflow:hidden}
.acard .ast i{display:block;height:100%}
.acard .as{position:absolute;right:3px;top:3px;font:700 8.5px/1 var(--f-ui);color:#e8c26a;letter-spacing:-.5px;text-shadow:0 1px 2px #000,0 0 3px #000} /* the general's stars */
.acard.nog canvas{filter:grayscale(1) brightness(.6)} /* an army with no general: the stand-in picture, dimmed, under a mark that opens the sheet */
.acard .ag{position:absolute;left:0;right:0;top:41px;font:700 9.5px/14px var(--f-ui);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:#f3e7c4;background:rgba(16,14,11,.84);border-top:1px solid rgba(243,231,196,.4)}
.acard .ag:hover{color:#fff;background:rgba(16,14,11,.95)}
.genBox.none canvas{filter:grayscale(1) brightness(.6)}
.genBox.none .gst{font-style:normal;color:var(--paper-dim)}
.genBox{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start;padding:8px;border:1px solid var(--hair-2);border-radius:2px;background:var(--ink-2);cursor:pointer}
.genBox:hover{border-color:var(--brass)}
.genBox canvas{width:72px;height:87px;display:block;border:1px solid rgba(0,0,0,.55)}
.gi{display:flex;flex-direction:column;gap:3px;min-width:0}
.gi .grk{font:600 10.5px/1.25 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim)}
.gi b{font:800 16px/1.1 var(--f-hud);letter-spacing:.03em;color:var(--paper);text-shadow:var(--tsh)}
.gsk{color:var(--brass-2);font-size:12px;letter-spacing:1px;white-space:nowrap}
.gtr{display:flex;flex-wrap:wrap;gap:3px}
.gt{font:600 10.5px/1 var(--f-ui);padding:3px 5px;border:1px solid var(--hair-2);border-radius:2px;color:var(--paper-dim);cursor:help}
.gxp{display:block;height:3px;background:var(--ink-4);margin-top:3px;border-radius:2px;overflow:hidden}
.gxp i{display:block;height:100%;background:var(--brass)}
.card.genCard{width:min(1000px,100%)} /* (two classes: the plain .card rule further down set every sheet to 620px, this one too, and two dozen generals need the room) */
.genGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin:14px 0 6px}
.gcard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;text-align:left;padding:9px 9px 10px;border:1px solid var(--steel);border-radius:1px;background:linear-gradient(#2c2f2a,#20231f);cursor:pointer;color:inherit;font:inherit;box-shadow:inset 0 1px 0 var(--steel-hi)}
.gcard canvas{width:64px;height:77px;display:block;box-shadow:0 1px 0 rgba(0,0,0,.3),0 4px 8px -3px rgba(0,0,0,.5);transform:rotate(-1.2deg)} /* a photograph clipped to the file */
.gcard:nth-child(even) canvas{transform:rotate(.9deg)}
.gcard:hover{border-color:var(--steel-2);background:linear-gradient(#363a33,#282b26)}
.gcard.on{border:2px solid var(--brass);padding:8px 8px 9px;background:linear-gradient(#2f322c,#242722)}
.gcard.busy .gst{color:var(--warn)}
.gst{font:italic 600 11px/1.2 var(--f-ui);color:var(--paper-faint);margin-top:2px}
.gcard.hire .gst{font-style:normal;color:var(--brass-2)} /* a man still to be hired: what he asks */
.gcard:disabled{cursor:default} .gcard:disabled canvas,.gcard:disabled .gi>:not(.gst){opacity:.45} .gcard:disabled .gst{color:var(--bad)} /* more than the side has */
.gcard:disabled:hover{border-color:var(--steel);background:linear-gradient(#2c2f2a,#20231f)}
.gtips{display:none;font:500 10.5px/1.35 var(--f-ui);color:var(--paper-dim)} /* the traits in words, where a tooltip cannot be had: a touch screen, a card under the keys */
.gtips span{display:block} .gi .gtips b{font:700 10.5px/1.35 var(--f-ui);letter-spacing:0;color:var(--paper);text-shadow:none}
@media (hover:none){ .gcard .gtr{display:none} .gcard .gtips{display:block} }
.gcard:focus-visible .gtr{display:none} .gcard:focus-visible .gtips{display:block}
.genCard:focus{outline:none}
.acard.pop{animation:acardIn .42s cubic-bezier(.2,.9,.3,1.35)}
@keyframes acardIn{from{opacity:0;transform:translateY(30px) scale(.4)}55%{transform:translateY(-4px) scale(1.07)}to{opacity:1;transform:none}}
:root.still .acard.pop{animation:none}
#armyBar .aplus{flex:none;width:40px;height:56px;align-self:center;border:1px dashed var(--steel-2);border-radius:3px;background:rgba(14,18,22,.65);color:var(--paper-faint);font:600 20px/1 var(--f-ui);cursor:pointer}
#armyBar .aplus:hover{border-color:var(--brass);color:var(--brass-2)}
@media (max-width:720px){
  #armyBar{left:10px;right:66px;width:auto;margin:0;bottom:calc(var(--wm-h) + 6px);max-width:none;justify-content:flex-start;padding:5px 7px} /* above the keep-out corner, like everything along a phone's bottom */
  :root:has(#sel:not([hidden])) #armyBar{display:none} /* the unit panel has the bottom of a phone */
  .acard{width:54px} .acard canvas{height:46px} .acard .ag{top:31px;letter-spacing:.06em} #armyBar .aplus{height:46px;width:34px;font-size:17px}
}
@media (max-height:500px) and (min-width:721px){
  #armyBar{left:auto;right:max(calc(max(var(--gut),env(safe-area-inset-right,0px)) + 60px),calc(var(--wm-w) + 12px));margin:0;bottom:10px;max-width:40vw} /* height is scarce sideways: the bar stops short of the keep-out corner instead of rising over it */
  :root:has(#sel:not([hidden])) #armyBar{display:none}
  .acard{width:54px} .acard canvas{height:46px} .acard .ag{top:31px;letter-spacing:.06em} #armyBar .aplus{height:46px}
}

/* ---------- the outliner (HOI4's list of armies at the right edge) and the map modes (its buttons at the lower right) ---------- */
#outliner{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));top:calc(var(--bar-h) + 12px);z-index:7;width:236px;max-height:calc(50% - var(--bar-h));overflow:auto;overscroll-behavior:contain;padding:0 0 3px}
.olHead{display:flex;align-items:center;gap:6px;padding:7px 10px 7px 11px;border-bottom:1px solid var(--steel);background:linear-gradient(#34372f,#232622);box-shadow:inset 0 1px 0 var(--steel-hi);font:800 11px/1 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);text-shadow:var(--tsh);position:sticky;top:0;z-index:1}
.olHead .n{margin-left:auto;color:var(--paper-dim);font:700 11px/1 var(--f-mono);letter-spacing:0}
.olRow{box-sizing:border-box;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:1px 8px;align-items:center;width:100%;padding:5px 9px 6px 8px; /* (border-box: the "In no army" row is a div, not a button, and its padding pushed its count past the edge) */border:0;border-bottom:1px solid rgba(6,9,12,.55);box-shadow:inset 0 1px 0 rgba(190,205,220,.05);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.olRow:hover{background:rgba(190,205,220,.07)}
.olRow.on{background:rgba(217,180,94,.13);box-shadow:inset 3px 0 0 var(--brass),inset 0 1px 0 rgba(190,205,220,.05)}
.olRow.part{box-shadow:inset 3px 0 0 rgba(217,180,94,.55),inset 0 1px 0 rgba(190,205,220,.05)}
.olRow canvas{width:30px;height:27px;display:block;border:1px solid rgba(0,0,0,.75);grid-row:1/3;background:#121412}
.olRow b{font:700 12.5px/1.2 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:var(--tsh)}
.olRow .cnt{font:800 12px/1 var(--f-mono);color:var(--paper);text-shadow:var(--tsh);white-space:nowrap}
.olRow .cnt small{font:600 10px/1 var(--f-ui);color:var(--paper-faint);margin-left:3px}
.olRow .bar{grid-column:2/4;height:4px;background:#0d1216;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);overflow:hidden;margin-top:1px}
.olRow .bar i{display:block;height:100%}
.olRow.rest{cursor:default} .olRow.rest canvas{display:none} .olRow.rest b{grid-column:1/3;color:var(--paper-dim);font-weight:600}
.olRow.rest:hover{background:transparent}
#mapModes{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:calc(var(--wm-h) + 10px);z-index:8;display:flex;gap:3px;padding:4px}
#mapModes button{width:34px;height:34px;padding:0;border:1px solid var(--steel);border-radius:2px;background:linear-gradient(#3d4139,#272a25);box-shadow:inset 0 1px 0 var(--steel-hi);cursor:pointer;display:grid;place-items:center;color:var(--khaki)}
#mapModes button svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
#mapModes button:hover{border-color:var(--steel-2);color:var(--paper)}
#mapModes button[aria-pressed="true"]{background:linear-gradient(#171916,#121412);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(212,178,92,.45);color:var(--brass-2);border-color:var(--brass)}
:root.tut #outliner,:root.tut #mapModes{display:none} /* the lesson's coach has the right edge */
:root:has(#deployBox:not([hidden])) #outliner{display:none}
@media (max-width:720px),(max-height:500px){ #outliner,#mapModes{display:none} #feed{top:calc(var(--bar-h) + 8px);bottom:auto;flex-direction:column} }
@media (max-width:900px){ #outliner{width:200px} }

/* touch tools */
#touchTools{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:calc(var(--wm-h) + 6px);z-index:9;display:none;flex-direction:column;gap:8px} /* the column stands on the keep-out corner, not in it */
#touchTools .btn{height:44px;min-width:44px}
#tip{position:absolute;z-index:20;pointer-events:none;padding:7px 10px;font:500 12.5px/1.35 var(--f-ui);max-width:280px;background:rgba(20,22,19,.97);border-color:var(--steel-2);text-shadow:var(--tsh)}
#tip .go{display:block;font:800 13px/1.3 var(--f-hud);letter-spacing:.03em;text-transform:uppercase;color:var(--brass-2)}
#tip .good{color:var(--good)} #tip .bad{color:var(--bad)} #tip .warn{color:var(--warn)}
#tip .mono{font-size:11px;color:var(--paper-dim)}
.fundsStat{cursor:pointer;border-radius:6px;padding:2px 6px;margin:0 -6px}
.fundsStat:hover,.fundsStat[aria-expanded="true"]{background:rgba(255,255,255,.06)}
.fundsStat:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
#incTip{position:absolute;top:calc(var(--bar-h) + 6px);z-index:21;width:320px;max-width:calc(100% - 16px);padding:10px 12px 11px;font:500 12.5px/1.35 var(--f-ui)}
#incTip .incHead{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
#incTip .incHead b{font:800 15px/1.1 var(--f-hud);letter-spacing:.05em;text-transform:uppercase;text-shadow:var(--tsh)}
#incTip .incHead span{font:500 11.5px/1.3 var(--f-ui);color:var(--paper-faint)}
.incT{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.incT td{padding:2px 0;vertical-align:baseline}
.incT td+td{text-align:right;font:500 12px/1.3 var(--f-mono);white-space:nowrap;padding-left:10px}
.incT tr:not(.sub) td{padding-top:5px;font-weight:600}
.incT tr:not(.sub) td+td{color:var(--good)}
.incT tr.sub td{color:var(--paper-dim);font-size:11.5px;padding-left:12px}
.incT tr.sub td+td{color:var(--paper-faint);padding-left:10px}
.incT tr.tot td{border-top:1px solid var(--hair-2);padding-top:6px;font-weight:700}
#incTip .incNote{margin:7px 0 0;font:500 11.5px/1.4 var(--f-ui);color:var(--paper-dim)}
#incNotes{position:absolute;top:calc(var(--bar-h) + 6px);left:8px;z-index:12;display:flex;flex-direction:column;gap:4px;pointer-events:none;max-width:min(340px,calc(100% - 16px))}
.incNote2{padding:5px 9px;border-radius:6px;background:rgba(14,18,22,.92);border:1px solid var(--hair);border-left:3px solid var(--good);font:600 12.5px/1.3 var(--f-ui);animation:newsIn .25s ease-out both}
.incNote2.bad{border-left-color:var(--bad)}
:root:has(#incTip:not([hidden])) #incNotes{display:none}
#toast{position:absolute;left:50%;top:calc(var(--bar-h) + 16px);transform:translateX(-50%);z-index:30;padding:9px 14px;font:600 14px/1.3 var(--f-ui);max-width:min(520px,calc(100% - 32px));text-align:center;pointer-events:none;text-shadow:var(--tsh)}
#banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:25;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
#banner b{display:block;font:800 clamp(34px,6.4vw,66px)/0.95 var(--f-hud);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.6),0 4px 30px rgba(0,0,0,.8)}
#banner small{display:block;margin-top:8px;font:600 15px/1.3 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);text-shadow:0 2px 10px #000}
#banner.show{opacity:1;visibility:visible;transition:opacity .3s ease-out,visibility 0s;animation:bannerIn .4s ease-out}
@keyframes bannerIn{from{transform:translate(-50%,-44%)}to{transform:translate(-50%,-50%)}}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding-top:var(--scr-pad);padding-bottom:max(var(--scr-pad),calc(var(--wm-h) + 8px));padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px)); /* a card scrolled to its end stops above the keep-out corner */
  background:radial-gradient(ellipse at 30% 20%,rgba(8,11,14,.6),rgba(8,11,14,.93) 70%);overflow:auto}
.sheet{width:min(1160px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:48px;align-items:start;margin:auto}
/* the order of battle: each side's men at the start (solid) and on the way (hatched), on one scale, so the race shows before the battle does */
.oob{margin-top:22px;display:grid;gap:12px;max-width:440px}
.oob:empty{display:none}
.oob .row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;align-items:baseline}
.oob .nm{font:400 19px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.oob .fig{font:500 13px/1.2 var(--f-ui);color:var(--paper-dim);text-align:right;font-variant-numeric:tabular-nums}
.oob .bar{grid-column:1/-1;display:flex;height:7px;background:rgba(234,226,204,.07)}
.oob .bar i{display:block;height:100%;background:var(--c)}
.oob .bar i.more{background:repeating-linear-gradient(-45deg,var(--c) 0 2px,transparent 2px 5px);opacity:.75}
/* the map of the battle picked lies under everything; the briefing on the left reads off a dark curtain drawn over that side of it */
#titleScreen{background:linear-gradient(90deg,rgba(14,11,7,.97) 0,rgba(14,11,7,.92) 40%,rgba(14,11,7,.45) 72%,rgba(14,11,7,.55) 100%);padding-bottom:var(--scr-pad)} /* the start strip keeps the corner clear itself (below), so the sheet may use the full height */
/* the briefing: the game, then the battle picked, as the heading of its own orders */
.titleBlock{position:sticky;top:0;padding-top:4px;max-width:54ch}
.titleBlock h1{margin:0;font:400 clamp(60px,8vw,106px)/0.84 var(--f-display);letter-spacing:.015em;text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.45)}
.titleBlock .sub{margin-top:14px;padding:9px 0;font:600 12.5px/1.5 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair);max-width:46ch}
.brief{margin-top:40px}
.brief h2{margin:0;font:400 clamp(34px,3.8vw,46px)/0.92 var(--f-display);letter-spacing:.03em;text-transform:uppercase}
.brief .dates{margin-top:8px;font:600 12.5px/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.brief p{margin:14px 0 0;font:400 16px/1.6 var(--f-ui);color:var(--paper-dim)}
.brief .scnNote{margin-top:10px;font-size:13px;line-height:1.45;color:var(--paper-faint)}
.brief .scnNote:empty{display:none}
.titleBlock .opts{margin-top:22px}
.titleBlock .credit{margin:28px 0 0;font:500 12px/1.45 var(--f-ui);color:var(--paper-faint)}
/* ---------- the operations folder: one typed sheet of paper on the map table ----------
   Documents are paper, instruments are steel. The battles are an index typed on the sheet, the years in its
   ledger margin; choosing is a red grease-pencil ring, the way a staff officer marks tonight's operation.
   Inside any paper panel the dark tokens are remapped to ink (the paper remap, further down), so every
   control keeps its selectors and simply changes material. */
.sides{display:grid;gap:12px}
.orders{position:relative;padding:18px 20px 18px;border:1px solid #b3a176;border-bottom-color:#9c8a5e;border-radius:1px;color:var(--paper);
  background:var(--grain),linear-gradient(168deg,#f0e5ca,#e7d9b8 58%,#ddcca6);
  box-shadow:inset 0 1px 0 rgba(255,252,240,.6),0 1px 0 rgba(0,0,0,.35),0 18px 34px -14px rgba(0,0,0,.72);
  transform:rotate(-.35deg);counter-reset:step;
  --seal:url('../img/seal.webp'); /* the wax seal (gen/seal.py): crossed swords under a star, TIDES OF STEEL round the top, 1939 * 1945 round the bottom */
  --signet:url('../img/signet.webp'); /* the signet that presses it, seen from above (gen/signet.py): a brass head and a turned wooden handle */
  --line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M3 5 C 42 2 98 6 197 3' fill='none' stroke='%23ae3322' stroke-width='2.4' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E")}
.step+.step{margin-top:16px;padding-top:13px;border-top:1px solid var(--hair)}
.step h3{margin:0 0 7px 10px;font:600 11px/1.2 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint)}
.step h3::before{counter-increment:step;content:counter(step) '.';margin-right:9px;font:700 13px/1 var(--f-ui);letter-spacing:.04em;color:var(--paper-dim)}
/* two ledger columns read across in date order; each entry carries its own red margin, so the margins run down both columns */
.scnPick{position:relative;margin:0 -8px}
.thGrid,.shelfGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
/* a theatre: a section heading of the ledger, set out across the margin with the battles hanging after it; a red pencil
   mark turns when its drawer opens, and the heading names what is inside (the battle picked underlined in pencil).
   The drawer slides open; a closed one is inert */
.thHead{display:grid;grid-template-columns:12px auto minmax(0,1fr);align-items:center;gap:4px 12px;width:100%;padding:12px 10px 12px 8px;border:0;border-bottom:1px dotted var(--hair-2);background:transparent;color:var(--paper);text-align:left;cursor:pointer}
.thHead:hover{background:rgba(45,36,22,.055)}
.thHead:focus-visible{outline:2px solid #a2321f;outline-offset:-2px}
.thMark{justify-self:center;width:0;height:0;border-left:8px solid #a2321f;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;transition:transform .22s ease}
.theatre.open .thMark{transform:rotate(90deg)}
.thHead b{font:400 23px/1 var(--f-display);letter-spacing:.09em;text-transform:uppercase}
.thHead small{justify-self:end;text-align:right;font:500 13px/1.3 var(--f-ui);color:var(--paper-dim)}
.theatre[data-th="alt"] .thHead b{color:#a2321f} /* what never happened is typed in red, as its shelf was */
.theatre:last-child:not(.open) .thHead{border-bottom-color:transparent} /* the step below draws the rule under the last drawer */
.thHead small span.on{color:var(--paper);text-decoration-line:underline;text-decoration-color:#ae3322;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-skip-ink:none} /* one stroke of the pencil: it runs straight through the tail of a y or a g */
.thBody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.3,.7,.25,1)}
.theatre.open .thBody{grid-template-rows:1fr}
.thIn{min-height:0;overflow:hidden;margin:0 -6px}
.theatre.open.unclip .thIn{overflow:visible} /* open and still: a wax seal on the top row may hang over the drawer's edge (openTheatre) */
.thGrid{padding:4px 6px 5px}
.scnPick.boot .thBody,.scnPick.boot .thMark,:root.still .thBody,:root.still .thMark{transition:none}
.scnCard{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:3px 12px;align-items:baseline;padding:8px 8px 9px 4px;border:0;border-bottom:1px dotted var(--hair-2);border-radius:0;background:transparent;cursor:pointer;text-align:left;color:var(--paper)}
.scnCard::before{content:'';position:absolute;top:0;bottom:-1px;left:50px;width:1px;background:rgba(174,51,34,.35);pointer-events:none} /* the ledger margin: the year on its left, the operation on its right */
.scnCard.end{border-bottom:0} /* the sheet's last row (set when the list is built) */
.scnCard.wide{grid-column:1/-1} /* an odd one out at the end of a shelf runs the width of the sheet */
/* the tutorial is no step of the orders: it sits apart at the head of the sheet, above "1.", with a rule under it. No
   year column and no margin line, so nothing lines it up with the step's number */
.tutPick{margin:-4px -8px 0}
.tutPick:empty{display:none}
.tutPick .scnCard{width:100%;grid-template-columns:minmax(0,1fr);padding:4px 8px 12px 10px;border-bottom:0}
.tutPick .scnCard::before,.tutPick .scnCard .yr{display:none}
.tutPick .scnCard b{grid-column:1;grid-row:1} .tutPick .scnCard small{grid-column:1;grid-row:2}
.tutPick .scnCard:hover:not([aria-pressed="true"])::after{left:10px}
.tutPick .scnCard{--sealT:-4px;--sealR:10px}
.tutPick + .step{margin-top:6px;padding-top:13px;border-top:1px solid var(--hair)}
.scnCard .yr{grid-row:1;font:600 15px/1.4 var(--f-ui);letter-spacing:.08em;color:var(--paper-faint);font-variant-numeric:tabular-nums}
.scnCard b{grid-column:2;grid-row:1;font:800 21px/1 var(--f-display);letter-spacing:.045em;text-transform:uppercase}
.scnCard b em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* the year stays in the name for screen readers; the margin shows it */
.scnCard small{grid-column:2;grid-row:2;font:500 13px/1.3 var(--f-ui);color:var(--paper-dim)}
.scnCard:hover{background:rgba(45,36,22,.055)}
.scnCard:hover:not([aria-pressed="true"])::after{content:'';position:absolute;left:58px;right:12px;bottom:5px;height:8px;background:var(--line) center/100% 100% no-repeat;pointer-events:none} /* a pencil hesitates under the line it is reading */
/* the battle and the side picked are sealed, and you see it done: the brass signet comes down on the spot and presses
   (the entry takes the knock, the wax squeezes out round it), then lifts away and leaves the seal (UI.stampSignet adds
   the signet; the seal and the knock are these rules). The seal and the signet share one placement; each battle's seal
   sits at its own angle (--sr, set when the list is built) */
.scnCard{--sealT:-9px;--sealR:-2px;--sealS:46px}
.scnCard[aria-pressed="true"]::after,.sidePick .sideCard[aria-checked="true"]::after{content:'';position:absolute;z-index:3;top:var(--sealT);right:var(--sealR);width:var(--sealS);height:var(--sealS);background:var(--seal) center/contain no-repeat;pointer-events:none;transform:rotate(var(--sr,-12deg));filter:drop-shadow(0 1.5px 1.2px rgba(48,14,6,.42));animation:sealSet .8s both}
.signet{position:absolute;z-index:4;top:calc(var(--sealT) + var(--sealS) * .07);right:calc(var(--sealR) + var(--sealS) * .07);width:calc(var(--sealS) * .86);height:calc(var(--sealS) * .86);background:var(--signet) center/contain no-repeat;pointer-events:none;animation:signetPress .8s both}
.scnCard[aria-pressed="true"],.sidePick .sideCard[aria-checked="true"]{animation:sealKnock .8s both}
@keyframes signetPress{
  0%{opacity:0;transform:translate(12px,-18px) scale(1.75);filter:drop-shadow(18px 26px 10px rgba(30,16,6,.2));animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  12%{opacity:1}
  40%{opacity:1;transform:none;filter:drop-shadow(1px 1.5px 1.2px rgba(30,16,6,.55));animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  47%{transform:scale(.94)}
  58%{transform:scale(.95);filter:drop-shadow(1px 1.5px 1.2px rgba(30,16,6,.55));animation-timing-function:cubic-bezier(.5,0,.7,.6)}
  100%{opacity:0;transform:translate(-8px,-22px) scale(1.6);filter:drop-shadow(18px 26px 12px rgba(30,16,6,.1))}
}
@keyframes sealSet{
  0%,39%{opacity:0;transform:rotate(var(--sr,-12deg)) scale(.84)}
  40%{opacity:1;transform:rotate(var(--sr,-12deg)) scale(.84);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  62%{transform:rotate(var(--sr,-12deg)) scale(1.05)}
  80%{transform:rotate(var(--sr,-12deg)) scale(.99)}
  100%{opacity:1;transform:rotate(var(--sr,-12deg)) scale(1)}
}
@keyframes sealKnock{0%,40%{translate:0 0}46%{translate:0 1.6px}56%{translate:0 -.4px}66%,100%{translate:0 0}}
:root.still .scnCard[aria-pressed="true"]::after,:root.still .sidePick .sideCard[aria-checked="true"]::after,:root.still .scnCard[aria-pressed="true"],:root.still .sidePick .sideCard[aria-checked="true"]{animation:none}
:root.still .signet{display:none}
/* the alternate-history shelf: typed in red ink under the war that was */
.scnDivide{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:13px 8px 3px;user-select:none}
.scnDivide i{flex:1;height:0;border-top:1px dashed rgba(174,51,34,.5)}
.scnDivide span{font:700 10.5px/1 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:#a2321f;white-space:nowrap}
.scnCard .altTag{display:inline-block;vertical-align:3px;margin-left:7px;padding:1.5px 5px;border:1px solid rgba(174,51,34,.75);border-radius:1px;font:700 9px/1.3 var(--f-ui);letter-spacing:.16em;color:#a2321f;font-style:normal}
#altNote{display:inline-block;margin-top:12px;padding:5px 10px 4px;border:2px solid rgba(217,87,68,.8);border-radius:3px;transform:rotate(-1.6deg);font:400 16px/1.1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--alt-2);background:rgba(217,87,68,.08)}
#altNote[hidden]{display:none}
.sideCard{display:grid;cursor:pointer;text-align:left;color:var(--paper);border:1px solid var(--hair-2);border-radius:1px;background:transparent}
.sideCard.cont{grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 14px}
.sideCard.cont:hover{background:var(--ink-2)}
.sideCard.cont svg{grid-row:1/3;width:40px;height:27px;display:block}
.sideCard.cont h2{grid-column:2;margin:0;font:800 22px/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase}
.sideCard.cont .goal{grid-column:2;font:500 13px/1.4 var(--f-ui);color:var(--paper-dim)}
.sideCard.cont .go{display:none} /* the play counter and the name say it */
.sidePick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sidePick .sideCard{position:relative;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-content:start;align-items:center;padding:10px 12px 11px;background:rgba(252,246,230,.45)}
.sidePick .sideCard:hover{background:rgba(252,246,230,.8)}
.sidePick .sideCard[aria-checked="true"]{border-color:var(--hair-2);background:rgba(252,246,230,.6)}
.sidePick .sideCard{--sealT:-15px;--sealR:-12px;--sealS:54px}
.sidePick .sideCard[data-side="de"]{--sr:-14deg} .sidePick .sideCard[data-side="su"]{--sr:11deg}
.sidePick .sideCard svg{width:40px;height:27px;display:block}
.sidePick .sideCard h2{margin:0;font:800 22px/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase}
.sidePick .sideCard .goal{grid-column:1/-1;font:500 12.5px/1.4 var(--f-ui);color:var(--paper-dim)}
.sidePick .sideCard .tick{display:none}
@media (max-width:480px){.sidePick .sideCard{grid-template-columns:minmax(0,1fr)}} /* a narrow card: the counter above the name, so a long one-word name (GERMANY) has the width */
/* the tear-off strip: how hard it is and the button, behind a perforated rule; it sticks to the bottom while the sheet scrolls */
/* its foot is a bottom margin as tall as the keep-out corner: stuck to the bottom of the screen or resting near it, the
   stamp and the buttons always sit above the host's badge, and what scrolls under the strip stays hidden behind paper */
.startRow.peek{visibility:hidden} /* pushed below the screen by its own sheet (stripPeek): unseen until the sheet comes up */
.startRow{position:sticky;bottom:calc(-1 * var(--scr-pad));z-index:2;margin:16px -20px -18px;padding:12px 20px calc(18px + var(--wm-h));border-top:1px dashed rgba(45,36,22,.42);background:var(--grain),linear-gradient(#ecdfbf,#e3d3ad)}
.rateRow{display:flex;align-items:center;min-height:50px}
.rating{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.rating[hidden],.rateHint[hidden]{display:none}
.rateHint{margin:0;font:500 13px/1.4 var(--f-ui);color:var(--paper-faint)}
.stampBox{display:grid;flex:none} /* as wide as the widest step, so the text beside it holds still when the step changes */
.stampBox>*{grid-area:1/1;justify-self:center;align-self:center}
.stamp{padding:6px 11px 5px;border:2.5px solid currentColor;border-radius:4px;font:900 22px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;color:var(--rate);background:color-mix(in srgb,currentColor 10%,transparent);transform:rotate(-4deg);white-space:nowrap;mix-blend-mode:multiply} /* ink soaks into paper */
.stamp.sz{visibility:hidden}
.stamp.land{animation:stampIn .24s cubic-bezier(.2,.9,.3,1.25)}
@keyframes stampIn{from{opacity:0;transform:rotate(-4deg) scale(1.45)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.rateInfo{flex:1;min-width:0}
.pips{display:flex;gap:3px}
.pips i{width:15px;height:5px;border-radius:1px;background:var(--ink-4)}
.pips i.on{background:var(--rate)}
.rateInfo p{margin:6px 0 0;font:500 12.5px/1.4 var(--f-ui);color:var(--paper-dim)}
/* off the scale (RATING.beyond): where Normal already wears the first or last stamp, the strength beyond it breaks the meter.
   Way too hard: the bars fill, overload white-hot and snap, the last two fly off in pieces, the stamp slams down with a ring
   and a red flash, and the box jolts. Way too easy: the bars drain, slump one by one and the first one falls off while the
   stamp wobbles in. The final state stands without motion */
.rating{position:relative;isolation:isolate}
.rateInfo p.rateLv{margin-top:4px;font-size:12px;color:var(--rate)}
.rateInfo p.rateNote{margin-top:3px;font-size:12px}
.rateInfo p.rateNote[hidden]{display:none}
.rateInfo p.rateLv b{font-weight:800}
.pips{position:relative;width:max-content}
.pips .shards{position:absolute;inset:0;pointer-events:none}
.pips .shards b{position:absolute;top:-1px;left:var(--x);width:var(--w);height:calc(100% + 2px);border-radius:1px;background:var(--rate);box-shadow:0 0 4px var(--rate);opacity:0}
.pips::after{content:'';position:absolute;top:-6px;left:calc(67% - 5px);width:10px;height:17px;background:var(--rate);clip-path:polygon(55% 0,12% 54%,46% 54%,28% 100%,90% 38%,54% 38%,80% 0);filter:drop-shadow(0 0 3px var(--rate));opacity:0;pointer-events:none}
.stamp .st1{display:block;font-size:.46em;letter-spacing:.24em;margin:0 0 1px}
.stamp .st2{display:block}
.rating.broke #rateStamp{padding-top:5px;padding-bottom:4px;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 35%,transparent),0 0 22px color-mix(in srgb,currentColor 40%,transparent)}
.rating.brokeHard #rateStamp{transform:rotate(-8deg)}
.rating.brokeHard .pips{transform:rotate(-2.5deg)}
.rating.brokeHard .pips i:nth-child(n+5){visibility:hidden}
.rating.brokeHard .pips::after{opacity:1}
.rating.brokeEasy #rateStamp{transform:rotate(7deg)}
.rating.brokeEasy .pips i{transform:translateY(var(--sy)) rotate(var(--sr))}
.rating.brokeEasy .pips i:nth-child(1){visibility:hidden}
.rating.brokeEasy .pips i:nth-child(2){--sy:3px;--sr:-14deg}
.rating.brokeEasy .pips i:nth-child(3){--sy:2px;--sr:9deg}
.rating.brokeEasy .pips i:nth-child(4){--sy:3px;--sr:-6deg}
.rating.brokeEasy .pips i:nth-child(5){--sy:1px;--sr:11deg}
.rating.brokeEasy .pips i:nth-child(6){--sy:2px;--sr:-4deg}
.rating.brokeEasy .pips::after{left:calc(15.7% - 5px);opacity:1}
.rating.brokeHard .shards b:nth-child(1){--x:68.6%;--w:7%;--dx:30px;--dy:-22px;--r:200deg}
.rating.brokeHard .shards b:nth-child(2){--x:75.7%;--w:7%;--dx:58px;--dy:9px;--r:-160deg}
.rating.brokeHard .shards b:nth-child(3){--x:85.7%;--w:7%;--dx:84px;--dy:-30px;--r:300deg}
.rating.brokeHard .shards b:nth-child(4){--x:92.8%;--w:7%;--dx:96px;--dy:18px;--r:-260deg}
.rating.brokeHard .shards b:nth-child(5){--x:94%;--w:3%;--dx:50px;--dy:-40px;--r:120deg}
.rating.brokeHard .shards b:nth-child(6){--x:80%;--w:3%;--dx:40px;--dy:30px;--r:-90deg}
.rating.brokeHard .shards b:nth-child(7){--x:88%;--w:4%;--dx:70px;--dy:-8px;--r:180deg}
.rating.brokeHard .shards b:nth-child(8){--x:72%;--w:3%;--dx:22px;--dy:-34px;--r:-140deg}
.rating.brokeEasy .shards b:nth-child(1){--x:0%;--w:7%;--dx:-6px;--dy:32px;--r:-130deg}
.rating.brokeEasy .shards b:nth-child(2){--x:7%;--w:7%;--dx:6px;--dy:38px;--r:110deg}
.rating.brokeEasy .shards b:nth-child(n+3){display:none}
.rating.broke.boom::before{content:'';position:absolute;inset:-10px -12px;z-index:-1;border-radius:14px;background:radial-gradient(ellipse at 18% 50%,color-mix(in srgb,var(--rate) 38%,transparent),transparent 70%);opacity:0;pointer-events:none;animation:flash .7s ease-out .6s both}
.rating.brokeEasy.boom::before{animation-delay:.42s}
.rating.brokeHard.boom{animation:jolt .4s ease-out .84s}
.rating.brokeHard.boom #rateStamp{animation:slam .36s cubic-bezier(.2,.9,.25,1.15) .5s both}
.rating.brokeHard.boom #stampBox::after{content:'';grid-area:1/1;align-self:center;justify-self:center;width:86%;height:150%;border:2px solid var(--rate);border-radius:50%;opacity:0;pointer-events:none;animation:ring .55s ease-out .84s forwards}
.rating.brokeHard.boom .pips{animation:overload .3s linear .32s both}
.rating.brokeHard.boom .pips i{animation:pipFill .16s ease-out both}
.rating.brokeHard.boom .pips i:nth-child(2){animation-delay:.05s}
.rating.brokeHard.boom .pips i:nth-child(3){animation-delay:.1s}
.rating.brokeHard.boom .pips i:nth-child(4){animation-delay:.15s}
.rating.brokeHard.boom .pips i:nth-child(5){visibility:visible;animation:pipFill .16s ease-out .2s both,gone .01s linear .62s forwards}
.rating.brokeHard.boom .pips i:nth-child(6){visibility:visible;animation:pipFill .16s ease-out .25s both,gone .01s linear .62s forwards}
.rating.brokeHard.boom .pips::after{animation:bolt .5s ease-out .6s both}
.rating.brokeHard.boom .shards b{animation:shard .75s cubic-bezier(.12,.7,.35,1) .62s forwards}
.rating.brokeEasy.boom #rateStamp{animation:wobble .8s ease-in-out .3s both}
.rating.brokeEasy.boom .pips i{animation:pipDrain .16s ease-in .25s both,slump .45s cubic-bezier(.3,1.7,.5,1) .5s both}
.rating.brokeEasy.boom .pips i:nth-child(6){animation-delay:0s,.5s}
.rating.brokeEasy.boom .pips i:nth-child(5){animation-delay:.05s,.58s}
.rating.brokeEasy.boom .pips i:nth-child(4){animation-delay:.1s,.66s}
.rating.brokeEasy.boom .pips i:nth-child(3){animation-delay:.15s,.74s}
.rating.brokeEasy.boom .pips i:nth-child(2){animation-delay:.2s,.82s}
.rating.brokeEasy.boom .pips i:nth-child(1){visibility:visible;animation:pipDrain .16s ease-in .25s both,drop .6s cubic-bezier(.55,0,.85,.4) .42s forwards}
.rating.brokeEasy.boom .pips::after{animation:bolt .5s ease-out .42s both}
.rating.brokeEasy.boom .shards b{animation:shard .7s cubic-bezier(.5,0,.85,.45) .44s forwards}
.rating.broke.boom .rateLv{animation:crazy .32s cubic-bezier(.2,.9,.3,1.3) .95s both}
@keyframes pipFill{from{background:var(--ink-4);transform:none}55%{transform:scaleY(2.4)}to{background:var(--rate);transform:none}}
@keyframes pipDrain{from{background:var(--rate)}to{background:var(--ink-4)}}
@keyframes slump{from{transform:none}to{transform:translateY(var(--sy)) rotate(var(--sr))}}
@keyframes gone{to{visibility:hidden}}
@keyframes overload{0%{transform:none;filter:none}15%{transform:translateX(-1.5px)}30%{transform:translateX(2px);filter:brightness(1.5) drop-shadow(0 0 4px var(--rate))}45%{transform:translateX(-2px) rotate(-.5deg)}60%{transform:translateX(2px);filter:brightness(2.2) drop-shadow(0 0 7px var(--rate))}80%{transform:translateX(-1px) rotate(-1.5deg)}100%{transform:rotate(-2.5deg);filter:none}}
@keyframes bolt{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}
@keyframes shard{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@keyframes slam{from{opacity:0;transform:rotate(-20deg) scale(2.8)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes ring{from{opacity:.9;transform:rotate(-8deg) scale(.55)}to{opacity:0;transform:rotate(-8deg) scale(1.7)}}
@keyframes flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes jolt{0%{transform:none}18%{transform:translate(-6px,2px)}36%{transform:translate(5px,-2px)}54%{transform:translate(-3px,1px)}72%{transform:translate(2px,0)}100%{transform:none}}
@keyframes wobble{0%{opacity:0;transform:rotate(26deg) scale(.2)}40%{opacity:1;transform:rotate(-10deg) scale(1.14)}65%{transform:rotate(12deg) scale(.96)}82%{transform:rotate(4deg) scale(1.02)}100%{opacity:1;transform:rotate(7deg) scale(1)}}
@keyframes drop{0%{transform:none;opacity:1}100%{transform:translate(-8px,26px) rotate(-75deg);opacity:0}}
@keyframes crazy{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}
:root.still .rating.boom,:root.still .rating.boom *,:root.still .rating.boom::before,:root.still .rating.boom .pips::after,:root.still .rating.boom #stampBox::after{animation:none!important}:root.still .rating.boom::before,:root.still .rating.boom #stampBox::after{display:none}:root.still .rating.brokeHard.boom .pips i:nth-child(n+5),:root.still .rating.brokeEasy.boom .pips i:nth-child(1){visibility:hidden}
.goRow{display:flex;gap:10px;margin-top:14px}
#diffSeg{flex:none}
#diffSeg button{min-width:64px;height:42px;padding:0 12px} /* with its border, as tall as the button beside it */
.goRow .go{flex:1;min-width:0;height:44px;padding:0 16px;font-size:15px;letter-spacing:.06em;white-space:nowrap}
.goRow .go:disabled{background:transparent;color:var(--paper-faint);border-color:var(--hair-2);opacity:1}
.sides.custom .sidePick,.sides:not(.custom) #customBox,.sides.custom #startBtn,.sides:not(.custom) #cGo{display:none}
:root.still .stamp.land{animation:none}
.opts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.customBox{padding:0;border:0;background:none}
.cGrid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
.cGrid label{font:600 12.5px/1 var(--f-ui);color:var(--paper-faint)}
.cGrid .seg{justify-self:start;flex-wrap:wrap;max-width:100%} .cGrid .seg button{min-width:0;padding:0 9px}
.cGrid select{height:32px;justify-self:stretch;max-width:280px;min-width:0}
.customBox .note{margin:12px 0 0;font:500 12.5px/1.45 var(--f-ui);color:var(--paper-dim)}
#deployBox{position:absolute;left:50%;top:calc(var(--bar-h) + 10px);transform:translateX(-50%);z-index:12;padding:10px 14px;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:min(560px,calc(100% - 24px));border-color:var(--brass)}
#deployBox[hidden]{display:none}
#deployBox .dHead{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;justify-content:center;font:600 14px/1.2 var(--f-ui)}
#deployBox .dHead b{font:800 17px/1 var(--f-hud);letter-spacing:.06em;text-transform:uppercase;color:var(--brass-2);text-shadow:var(--tsh)}
#deployBox .dBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#deployBox small{font:500 12px/1.35 var(--f-ui);color:var(--paper-dim);text-align:center}
:root:has(#deployBox:not([hidden])) #toast{top:calc(var(--bar-h) + 128px)}
:root:has(#deployBox:not([hidden])) #feed{display:none}
@media (max-width:600px){#deployBox small{display:none} #deployBox{padding:8px 10px;gap:6px} #deployBox .btn{height:34px;padding:0 10px}}
input.txt{height:34px;padding:0 10px;border-radius:var(--r-s);border:1px solid var(--hair-2);background:var(--ink-0);color:var(--paper);font:500 14px var(--f-ui);width:150px}
select.txt{border-radius:var(--r-s);border:1px solid var(--hair-2);background:var(--ink-0);color:var(--paper);font:500 14px var(--f-ui);padding:0 6px}
.card{width:min(620px,100%);padding:22px 24px;margin:auto}
.card h2{margin:0 0 4px;font:800 30px/1 var(--f-hud);letter-spacing:.05em;text-transform:uppercase;text-shadow:var(--tsh)}
.card h3{margin:18px 0 6px;font:800 16px/1.2 var(--f-hud);letter-spacing:.06em;text-transform:uppercase;color:var(--brass);text-shadow:var(--tsh)}
.card p,.card li{font:400 14.5px/1.55 var(--f-ui);color:var(--paper-dim)}
.card ul,.card ol{margin:0;padding-left:18px}
.card ol.quick li{margin-bottom:3px}
.card details{margin-top:10px;padding:8px 12px;border:1px solid var(--hair);border-radius:var(--r-s);background:rgba(14,18,22,.5)}
.card summary{cursor:pointer;font:600 13.5px/1.4 var(--f-ui);color:var(--brass-2)}
.card details[open] summary{margin-bottom:6px}
table.keys{border-collapse:collapse;width:100%;font:400 13.5px/1.4 var(--f-ui);color:var(--paper-dim)}
table.keys td{padding:4px 6px;border-bottom:1px solid var(--hair);vertical-align:top} table.keys td:first-child{white-space:nowrap;width:1%;padding-right:14px}
kbd{display:inline-block;min-width:20px;padding:1px 6px;border:1px solid var(--hair-2);border-bottom-width:2px;border-radius:4px;background:var(--ink-2);font:600 11.5px/1.5 var(--f-mono);color:var(--paper);text-align:center}
.cardActs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.menuCard{width:min(560px,100%)}
.menuMeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:8px;font:500 14px/1.4 var(--f-ui);color:var(--paper-dim)}
.menuMeta .stamp{font-size:17px;padding:5px 9px 4px;border-width:2px}
.menuMeta .stamp[hidden]{display:none}
.menuCard .opt{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);font:500 13.5px/1.45 var(--f-ui);color:var(--paper-dim);cursor:pointer}
.menuCard .opt input{flex:none;margin:3px 0 0;width:15px;height:15px;accent-color:var(--brass)}
.menuCard .note:empty{display:none}
.setCard .optList{margin-top:16px;border-top:1px solid var(--hair)}
.setCard .opt{margin-top:0;padding:12px 0;border-top:0;border-bottom:1px solid var(--hair);align-items:center;gap:12px}
.setCard .opt>span{flex:1 1 auto;color:var(--paper)}
.setCard .opt small{display:block;margin-top:2px;font-weight:400;color:var(--paper-dim)}
.setCard .opt input[type=range]{flex:1 1 120px;width:auto;height:auto;margin:0;accent-color:var(--brass)}
.setCard .opt .num{flex:none;min-width:40px;text-align:right;color:var(--paper)}
.setCard .note{margin-top:12px}
#sel .kv .ph{display:none} /* a row shown only where the .x rows are hidden (phones): a computer formation's general */
#muteBtn svg{display:block;margin:auto} #muteBtn .x{display:none} #muteBtn.off .w{display:none} #muteBtn.off .x{display:block}
#muteBtn[aria-pressed]{border-color:var(--hair-2);color:inherit;background:var(--ink-2)} #muteBtn[aria-pressed]:hover{background:var(--ink-3)} #muteBtn.off{color:var(--paper-faint);border-color:rgba(226,106,90,.45)} /* the speaker is a plain switch: quiet when on, marked when off */
.result b{display:block;font:800 clamp(40px,6.4vw,60px)/0.95 var(--f-hud);letter-spacing:.05em;text-transform:uppercase;text-shadow:var(--tsh)}
.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.tbl th,.tbl td{padding:6px 8px;border-bottom:1px solid var(--hair);text-align:right}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th{font:600 11px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint)}
#aar{position:relative;margin-top:4px}
#aar svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
#aar svg:focus{outline:none} #aar svg:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:4px}
#aar .t{font:600 11px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;fill:var(--paper-faint)}
#aar .lg{font:500 12px/1 var(--f-ui);fill:var(--paper-dim)}
#aar .tk{font:500 10.5px/1 var(--f-mono);fill:var(--paper-faint)}
#aar .ev{font:600 11.5px/1 var(--f-mono);fill:var(--paper-dim)}
#aarTip{position:absolute;z-index:2;pointer-events:none;padding:7px 10px;min-width:150px;font:500 12px/1.4 var(--f-ui);color:var(--paper-dim);background:rgba(9,12,14,.97);border:1px solid var(--hair-2);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#aarTip .h{font:600 11px/1.3 var(--f-mono);color:var(--paper-faint);margin-bottom:3px}
#aarTip .r{display:flex;align-items:center;gap:7px;white-space:nowrap} #aarTip .r i{width:12px;height:2px;border-radius:1px;flex:none} #aarTip .r b{color:var(--paper);font-weight:700}
.aarTbl{margin-top:6px} .aarTbl summary{cursor:pointer;font:600 12.5px/1.6 var(--f-ui);color:var(--brass-2)} .aarTbl .tbl{font-size:12.5px;margin-top:4px}
#howScreen{z-index:48}
#loading{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#1b232b,var(--ink-0) 70%)}
#loading b{font:400 54px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);padding:10px 6px}
#loading p{color:var(--paper-dim);margin-top:10px;text-align:center;font:600 12px/1.5 var(--f-ui);letter-spacing:.2em;text-transform:uppercase}

/* ---------- the paper remap: any panel in this list is a typed document ----------
   The dark tokens become ink on paper; every component inside (tabs, rows, buttons, kbd, tables, badges)
   keeps its selectors and simply changes material. Instruments (the command bar, the unit panel, the army
   bar, the news) stay steel. */
.orders,.sideCard.cont{
  --paper:#2d2416;--paper-dim:#51432a;--paper-faint:#6f5f42;
  --hair:rgba(45,36,22,.17);--hair-2:rgba(45,36,22,.36);
  --ink-0:#f1e7cd;--ink-1:#eadfc2;--ink-2:#e2d4b3;--ink-3:#d8c8a3;--ink-4:#c8b68c;
  --brass:#a24520;--brass-2:#8e2b1e;--sel-tint:rgba(174,51,34,.1);
  --good:#44702c;--warn:#8a5d14;--bad:#a23422;
  --de:var(--de-deep);--su:var(--su-deep); /* side names in ink weight: the map colours wash out on paper */
  color:var(--paper);color-scheme:light} /* the browser paints its own controls (selects, checkboxes) for paper too */
.orders .btn.gold:disabled{border:2px solid var(--hair-2);color:var(--paper-faint);background:transparent}
.sideCard.cont{background:var(--grain),linear-gradient(#f0e5ca,#e7d9b8);border:1px solid #b3a176;box-shadow:0 1px 0 rgba(0,0,0,.3),0 10px 22px -10px rgba(0,0,0,.6);transform:rotate(.3deg)}
.orders .btn.gold{background:transparent;border:2px solid #a83524;color:#9c2f1c;font-weight:800;letter-spacing:.1em;box-shadow:none;text-shadow:none}
.orders .btn.gold:hover:not(:disabled){background:#a83524;color:#f1e7cd}
.orders .btn,.sideCard.cont .btn{text-shadow:none;background:var(--ink-2);box-shadow:none;border-color:var(--hair-2)}
.orders .btn:hover,.sideCard.cont .btn:hover{background:var(--ink-3);border-color:rgba(162,69,32,.5)}
.orders .btn[aria-pressed="true"]{background:var(--ink-3);border-color:var(--brass);color:var(--brass-2);box-shadow:none}
.orders .seg{background:var(--ink-2);box-shadow:none;border-color:var(--hair-2)}
.orders .seg button{text-shadow:none} .orders .seg button+button{border-left:1px solid var(--hair);box-shadow:none}
.orders .seg button[aria-pressed="true"]{background:var(--ink-4);color:var(--paper);box-shadow:inset 0 -2px 0 var(--brass)}
/* a phone: still two columns (that is where scrolling costs most); the year moves above the name and the margin goes */
@media (max-width:560px){
  .thGrid,.shelfGrid{column-gap:8px}
  .thHead{grid-template-columns:12px minmax(0,1fr);row-gap:3px;padding:11px 8px 11px 6px}
  .thHead small{grid-column:2;justify-self:start;text-align:left;font-size:12.5px} /* the names under the heading on a phone */
  .scnCard{grid-template-columns:minmax(0,1fr);gap:1px;padding:7px 6px 8px}
  .scnCard::before{display:none}
  .scnCard .yr{grid-column:1;grid-row:1;font-size:11.5px;line-height:1.2;min-height:1.2em} /* an undated entry keeps the line, so names across a row stay level */
  .scnCard b{grid-column:1;grid-row:2;font-size:18px}
  .scnCard small{grid-column:1;grid-row:3;font-size:12px}
  .scnCard:hover:not([aria-pressed="true"])::after{left:6px}
  .scnCard{--sealT:-12px;--sealR:-5px;--sealS:36px} /* up on the year's line, whose right end is always empty: a long name runs under nothing */
  .sidePick .sideCard{--sealT:-5px;--sealR:-8px;--sealS:44px} /* lower than on a desktop: the step's heading runs across the top of a phone */
}

@media (max-width:900px){
  .sheet{grid-template-columns:1fr}
  #objectives{width:260px}
  #feed{width:240px}
  #sideTag span,#bar .vsep{display:none} /* the coloured square still says which side you lead */
  #bar{gap:8px}
}
@media (max-width:960px){ .stat.hideNarrow{display:none} } /* enemy losses live in the objectives panel too; the sitrep chip needs the room */
@media (max-width:780px){ #supplied{display:none} }
@media (max-width:720px){
  :root{--bar-h:50px}
  #bar{gap:7px}
  #sideTag,.hideNarrow,#sitBtn,#bar .vsep,#clock .yr{display:none}
  :root:has(#objectives.open:not([hidden])) #touchTools{display:none} /* the list has the whole width; a tap on a line, on its ✕ or on the map closes it */
  .stat b{font-size:16px} .stat .ico{width:16px;height:16px} .stat .inc{display:none} .stat{gap:4px}
  #clock b{font-size:14.5px}
  #clock small{display:none}
  #datebox{height:34px;padding:0 2px} #clock{padding:0 4px;min-width:0} #clock b{font-size:12px} #clock .pips i{width:11px;height:3px} #clock .pips{margin-top:2px}
  #speedSeg .stepb{width:24px;height:24px;font-size:15px} #speedSeg .playb{width:18px;margin-left:3px}
  .seg button{min-width:27px;padding:0 6px;height:30px}
  #bar .btn.icon{width:32px;height:32px}
  #objectives{display:none}
  #objectives.open{display:block;left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));width:auto}
  .objX{width:44px;font-size:17px} .tabs button{padding:12px 3px 13px} /* thumb-sized */
  :root:has(#objectives.open:not([hidden])) #feed{display:none}
  #feed{left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));width:auto;top:calc(var(--bar-h) + 8px);bottom:auto;flex-direction:column}
  .news{display:none;pointer-events:none}.news:first-child{display:block} /* news never catches a tap meant for the map */
  #incNotes .incNote2{display:none}#incNotes .incNote2:last-child{display:block} /* one income notice at a time, above the news card, which steps down for it */
  :root:has(#incNotes .incNote2) #feed{top:calc(var(--bar-h) + 44px)}
  #toast{top:calc(var(--bar-h) + 66px)}
  #sel{left:max(var(--gut),env(safe-area-inset-left,0px));right:calc(max(var(--gut),env(safe-area-inset-right,0px)) + 56px);bottom:calc(var(--wm-h) + 6px);width:auto;max-height:40vh} /* a phone's panel spans the width, so it rises above the keep-out corner */
  #objectives.open{max-height:calc(100% - var(--bar-h) - var(--wm-h) - 26px - var(--sel-h,0px))}
  #touchTools{display:flex}
  #sel .kv .x,#sel .side2 + .kv,#sel .prog + .note{display:none} #sel .kv .ph{display:inline} #sel .kv .note.ph{padding-right:44px} /* (the touch tools stand over the panel's right edge: the general's words wrap short of them)  a compact panel on phones: the map matters more */
  #selHead{padding:8px 10px} #selHead h2{font-size:18px} #selBody{padding:8px 10px;gap:6px} #selActs{padding:0 10px 10px}
  #selActs .btn{height:32px;padding:0 10px;font-size:12px}
}
@media (max-height:500px) and (min-width:721px){ /* a phone held sideways: small panels at the sides, one news card */
  :root{--bar-h:48px}
  #datebox{height:34px;padding:0 2px} #clock{padding:0 5px;min-width:0} #clock b{font-size:12.5px} #clock .pips i{width:12px;height:3px} #speedSeg .stepb{width:24px;height:24px;font-size:15px} .stat .ico{width:16px;height:16px}
  #objectives{display:none;width:270px;max-height:calc(100% - var(--bar-h) - var(--wm-h) - 20px)} /* the list opens on the right: it ends above the keep-out corner */
  #objectives.open{display:block;left:auto;right:calc(max(var(--gut),env(safe-area-inset-right,0px)) + 64px)} /* under the star, so a unit's panel on the left never covers the list */
  .objX{width:36px;font-size:16px} .tabs button{padding:10px 3px 11px}
  :root:has(#objectives.open:not([hidden])) #feed{display:none}
  #feed{width:250px;top:calc(var(--bar-h) + 8px);bottom:auto;flex-direction:column}
  .news{display:none;pointer-events:none}.news:first-child{display:block}
  #sel{width:300px;max-height:calc(100% - var(--bar-h) - 22px);bottom:10px}
  #sel .kv .x,#sel .side2 + .kv,#sel .prog + .note{display:none} #sel .kv .ph{display:inline}
  #selHead{padding:8px 10px} #selHead h2{font-size:18px} #selBody{padding:8px 10px;gap:6px} #selActs{padding:0 10px 10px}
  #selActs .btn{height:32px;padding:0 10px;font-size:12px}
  #touchTools{bottom:calc(var(--wm-h) + 6px);gap:6px} #touchTools .btn{height:38px}
  #toast{top:calc(var(--bar-h) + 10px)}
  #clock small{display:none}
}
@media (max-width:420px){ .hideXs{display:none} }
@media (max-width:380px){ #bar{gap:5px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))} .seg button{min-width:26px;padding:0 5px} }
@media (max-width:340px){ #bar{gap:4px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))} .seg button{min-width:22px;padding:0 3px} #bar .btn.icon{width:28px;height:28px} }
@media (pointer:coarse){#touchTools{display:flex} .news{pointer-events:none;cursor:default}} /* on a touch screen the news never catches a tap meant for the map (the Sitrep goes to things) */
:root.still .news,:root.still #banner.show{animation:none}
/* short, wide screens: the cards drop their dates (the briefing shows them) and Continue takes one line, so battle, side and start fit without scrolling */
@media (max-height:840px) and (min-width:901px){
  .scnCard{padding-top:6px;padding-bottom:7px}
  .sideCard.cont{padding:8px 14px} .sideCard.cont svg{width:34px;height:23px}
  .sideCard.cont .goal{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sideCard.cont .when{display:none}
  .step+.step{margin-top:12px;padding-top:11px}
}
/* the title screen on narrower screens: one column, the briefing short, the start bar kept in reach at the bottom */
@media (max-width:900px){
  #titleScreen{background:rgba(14,11,7,.94)}
  .sheet{grid-template-columns:minmax(0,1fr);gap:28px} /* nothing in the orders may push the page wider than the screen */
  .titleBlock{position:static;width:100%;max-width:620px;justify-self:center} /* one column: the briefing lines up with the orders under it */
  .brief{margin-top:22px}
  .sides{max-width:620px;width:100%;justify-self:center}
}
@media (max-width:560px){
  .titleBlock h1{font-size:clamp(46px,15vw,64px)}
  .titleBlock .sub{font-size:14px}
  .brief{margin-top:18px}
  .brief p{font-size:14.5px;line-height:1.55}
  .titleBlock .opts{margin-top:14px}
  .titleBlock .credit{margin-top:16px}
  .orders{padding:14px 14px 0}
  .startRow{margin:16px -14px 0;padding:12px 14px calc(12px + max(var(--wm-h),env(safe-area-inset-bottom,0px)));box-shadow:0 -10px 24px rgba(0,0,0,.4)}
  .rateRow{min-height:44px}
  .rating{gap:12px}
  .rateHint{font-size:12.5px}
  .stamp{font-size:17px;padding:5px 8px 4px;border-width:2px}
  .pips i{width:10px}
  .rateInfo p{margin-top:5px;font-size:12px;line-height:1.35}
  .rateInfo p.rateLv{margin-top:3px;font-size:11.5px}
  .goRow{gap:8px;margin-top:10px}
  #diffSeg button{min-width:0;height:40px;padding:0 10px}
  .goRow .go{height:42px;padding:0 10px;font-size:14px}
  .go .lg{display:none} /* "Start" alone: the side picked is lit up just above */
  .sidePick .sideCard h2{font-size:20px}
}
@media (max-height:420px){ #touchTools{gap:4px} #touchTools .btn{height:36px;min-width:40px} } /* a short screen: the five touch buttons still fit between the bar and the keep-out corner */
@media (max-width:359px){ .sidePick{grid-template-columns:1fr} #diffSeg button{padding:0 7px} .goRow .go{white-space:normal;line-height:1.1} } /* the smallest phones: a long label takes two lines */

/* ---------- the tutorial (TUTOR): its card and lesson list on the title screen, the coach, and the controls it points at ---------- */
.sides:not(.tut) #tutBox,.sides.tut .sidePick,.sides.tut .rateRow,.sides.tut #diffSeg{display:none}
.tutList{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.tutList li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:2px 12px;align-items:baseline;font:500 13.5px/1.35 var(--f-ui);color:var(--paper-dim)}
.tutList b{font:800 16px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.tutBox .note{margin:12px 0 0}
.sides.tut .goRow{margin-top:0}
#nextBtn[hidden]{display:none}
#coach{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));top:calc(var(--bar-h) + 12px);z-index:13;width:min(360px,calc(100% - 2 * var(--gut)));padding:11px 14px 13px;border-left:3px solid var(--brass);border-radius:4px var(--r-m) var(--r-m) 4px;box-shadow:0 16px 44px rgba(0,0,0,.5)}
#coach[hidden]{display:none}
#coach{max-height:calc(100% - var(--bar-h) - 20px);overflow-y:auto;overscroll-behavior:contain} /* a long card on a short screen scrolls inside itself, it never runs off the bottom */
/* a phone short of room (TUTOR.render): the card folded to its heading, one line of the text and the hint; a tap unfolds it */
#coach.mini{padding-top:7px;padding-bottom:8px;cursor:pointer}
#coach.mini .cTop,#coach.mini .cChecks{display:none}
#coach.mini h2{font-size:17px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#coach.mini h2::after{content:"";display:inline-block;width:6px;height:6px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-4px) rotate(45deg);opacity:.7} /* there is more underneath */
#coach.mini #coachText{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
#coach.mini:has(#coachHint[hidden]) #coachText{-webkit-line-clamp:2;line-clamp:2}
#coach.mini .cHint{margin-top:4px}
@media (pointer:coarse){ #coach .cQuit{position:relative} #coach .cQuit::before{content:"";position:absolute;inset:-9px -10px -15px -11px} } /* a finger's target for Quit: 44 by 44 */
#coach .cTop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#coach .cPips{display:flex;gap:3px;flex:1;min-width:0}
#coach .cPips i{flex:1 1 0;max-width:20px;height:4px;border-radius:2px;background:var(--ink-4)}
#coach .cPips i.done{background:rgba(217,178,92,.55)}
#coach .cPips i.now{background:var(--brass-2);box-shadow:0 0 6px rgba(240,207,134,.6)}
#coach .cNum{font:600 11px/1 var(--f-mono);color:var(--paper-faint);white-space:nowrap}
#coach .cQuit{border:0;background:none;padding:4px 0 4px 6px;margin:-4px 0;font:600 12px/1 var(--f-ui);color:var(--paper-faint);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#coach .cQuit:hover{color:var(--paper)}
#coach h2{margin:0 0 5px;font:800 22px/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--brass-2)}
#coach p{margin:0;font:500 14px/1.45 var(--f-ui);color:var(--paper)}
#coach .cHint{margin-top:8px;padding-left:9px;border-left:2px solid var(--brass);font:600 13px/1.4 var(--f-ui);color:var(--brass-2)}
#coach .cChecks{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:9px}
#coach .cChecks div{display:flex;gap:8px;align-items:center;font:600 13px/1.2 var(--f-ui);color:var(--paper-dim)}
#coach .cChecks i{flex:none;width:14px;height:14px;border-radius:3px;border:1.5px solid var(--paper-faint)}
#coach .cChecks .on{color:var(--paper)} #coach .cChecks .on i{background:var(--good);border-color:var(--good)}
#coach .cHint[hidden],#coach .cChecks[hidden],#coach .cActs[hidden]{display:none}
#coach .cActs{display:flex;justify-content:flex-end;margin-top:11px}
#coach .cActs .btn{min-width:96px}
:root.tut #feed .news:nth-child(n+4){display:none} /* the news keeps clear of the coach */
.coachGlow{animation:coachGlow 1.3s ease-in-out infinite}
@keyframes coachGlow{0%,100%{box-shadow:0 0 0 2px rgba(240,207,134,.9),0 0 0 0 rgba(240,207,134,0)}50%{box-shadow:0 0 0 2px #f0cf86,0 0 18px 5px rgba(240,207,134,.5)}}
#speedSeg button.coachGlow{animation:coachSeg 1.3s ease-in-out infinite;color:var(--paper)}
@keyframes coachSeg{0%,100%{background:rgba(217,178,92,.16);box-shadow:inset 0 0 0 2px rgba(217,178,92,.8)}50%{background:rgba(217,178,92,.42);box-shadow:inset 0 0 0 2px #f0cf86}}
#objectives.coachGlow{animation-name:coachPanel}
@keyframes coachPanel{0%,100%{box-shadow:0 0 0 1px rgba(240,207,134,.6)}50%{box-shadow:0 0 0 2px #f0cf86,0 0 22px rgba(240,207,134,.35)}}
:root.still .coachGlow,:root.still #speedSeg button.coachGlow,:root.still #objectives.coachGlow{animation:none;box-shadow:0 0 0 2px #f0cf86}:root.still #speedSeg button.coachGlow{box-shadow:inset 0 0 0 2px #f0cf86;background:rgba(217,178,92,.3)}
:root.tut #feed{top:calc(var(--bar-h) + var(--coach-h,0px) + 24px)} /* the coach sits under the command bar at the right, clear of a host's corner badge; the news moves down below it */
@media (max-width:900px) and (min-width:721px){ #coach{width:320px} } /* clear of the objectives at the other corner */
@media (max-width:720px){ /* a phone held upright: the coach across the top, and the news, notices and the ★ list below it */
  #coach{left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));top:calc(var(--bar-h) + 8px);bottom:auto;width:auto;padding:9px 12px 11px}
  #coach .cTop{margin-bottom:6px}
  #coach h2{font-size:18px;margin-bottom:3px}
  #coach p{font-size:13.5px;line-height:1.4}
  #coach .cHint{margin-top:6px;font-size:12.5px}
  #coach .cChecks{margin-top:6px;gap:4px}
  #coach .cActs{margin-top:8px} #coach .cActs .btn{height:34px}
  :root.tut #feed{display:none} /* the coach tells the story here: the map below it is too precious for news cards */
  :root.tut #incNotes{top:calc(var(--bar-h) + var(--coach-h,0px) + 14px)}
  :root.tut #toast{top:calc(var(--bar-h) + var(--coach-h,0px) + 16px)}
  :root.tut:has(#incNotes .incNote2) #toast{top:calc(var(--bar-h) + var(--coach-h,0px) + 52px)}
  :root.tut #objectives.open{top:calc(var(--bar-h) + var(--coach-h,0px) + 16px);max-height:calc(100% - var(--bar-h) - var(--coach-h,0px) - var(--wm-h) - 30px - var(--sel-h,0px))}
}
@media (max-height:500px) and (min-width:721px){ /* a phone held sideways: along the bottom between a unit's panel and the touch buttons */
  #coach{left:calc(max(var(--gut),env(safe-area-inset-left,0px)) + 312px);right:calc(max(var(--gut),env(safe-area-inset-right,0px)) + 58px);top:auto;bottom:calc(var(--wm-h) + 6px);width:auto;max-width:440px;margin:0 auto;padding:8px 12px 10px} /* along the bottom, above the keep-out corner */
  :root:has(#objectives.open:not([hidden])) #coach{left:max(var(--gut),env(safe-area-inset-left,0px));right:auto;width:300px;margin:0}
  #coach .cTop{margin-bottom:5px}
  #coach h2{font-size:17px;margin-bottom:2px}
  #coach p{font-size:13px;line-height:1.35}
  #coach .cHint{font-size:12px;margin-top:5px}
  #coach .cActs{margin-top:6px} #coach .cActs .btn{height:30px}
}
/* ---------- the game on paper: the battle is fought on the same papers as its orders ----------
   Every panel over the map is a typed document of the operations folder (the paper remap: ink on the orders' paper,
   League Gothic for what is named, letter-spaced Barlow for what is labelled, dotted ledger rules, the red grease pencil for
   what is picked). The command bar is the dark curtain the briefing is read off, its figures in the poster voice. Only the
   map and its counters keep their own colours. */
.glass{
  --paper:#2d2416;--paper-dim:#51432a;--paper-faint:#6f5f42;
  --hair:rgba(45,36,22,.17);--hair-2:rgba(45,36,22,.36);
  --ink-0:#f1e7cd;--ink-1:#eadfc2;--ink-2:#e2d4b3;--ink-3:#d8c8a3;--ink-4:#c8b68c;
  --brass:#a24520;--brass-2:#8e2b1e;--sel-tint:rgba(174,51,34,.1);
  --good:#44702c;--warn:#8a5d14;--bad:#a23422;
  --de:var(--de-deep);--su:var(--su-deep);
  --steel:#b3a176;--steel-2:#9c8a5e;--steel-hi:rgba(255,252,240,.6);--khaki:#6f5f42;--tsh:none;
  --pencil:#ae3322;
  color:var(--paper);color-scheme:light;scrollbar-color:rgba(45,36,22,.4) transparent;
  background:var(--grain),linear-gradient(168deg,#f0e5ca,#e7d9b8 58%,#ddcca6);
  border:1px solid #b3a176;border-bottom-color:#9c8a5e;border-radius:1px;
  box-shadow:inset 0 1px 0 rgba(255,252,240,.6),0 1px 0 rgba(0,0,0,.35),0 14px 28px -14px rgba(0,0,0,.75)}
/* the controls on paper are the orders' controls */
.glass .btn{text-shadow:none;background:var(--ink-2);box-shadow:none;border-color:var(--hair-2);color:var(--paper)}
.glass .btn:hover{background:var(--ink-3);border-color:rgba(162,69,32,.5)}
.glass .btn[aria-pressed="true"]{background:var(--ink-3);border-color:var(--brass);color:var(--brass-2);box-shadow:none}
.glass .btn.gold{background:transparent;border:2px solid #a83524;color:#9c2f1c;font-weight:800;letter-spacing:.1em;box-shadow:none;text-shadow:none}
.glass .btn.gold:hover:not(:disabled){background:#a83524;color:#f1e7cd}
.glass .btn.gold:disabled{border:2px solid var(--hair-2);color:var(--paper-faint);background:transparent}
.glass .seg{background:var(--ink-2);box-shadow:none;border-color:var(--hair-2)}
.glass .seg button{text-shadow:none} .glass .seg button+button{border-left:1px solid var(--hair);box-shadow:none}
.glass .seg button[aria-pressed="true"]{background:var(--ink-4);color:var(--paper);box-shadow:inset 0 -2px 0 var(--brass)}
.glass .tabs em{background:var(--ink-4);color:var(--paper)} .glass .tabs em.bad{color:var(--bad)} .glass .tabs em.warn{color:var(--warn)}
.glass input.txt,.glass select.txt{background:var(--ink-0)}

/* ---------- the command bar: the dark curtain, its figures in the poster voice ---------- */
#bar{background:linear-gradient(rgba(14,11,7,.97),rgba(14,11,7,.93));border-bottom:1px solid var(--hair-2);box-shadow:0 1px 0 rgba(0,0,0,.6),0 10px 22px -12px rgba(0,0,0,.85)}
#sideTag{font:400 22px/1 var(--f-display);letter-spacing:.08em;text-shadow:0 2px 0 rgba(0,0,0,.45)}
#sideTag i{width:30px;height:20px;border:1px solid rgba(234,226,204,.35);box-shadow:none;background:var(--flag,#777)}
.stat .ico{stroke:var(--paper-dim);filter:none} .stat .ico .f{fill:var(--paper-dim)}
.stat b{font:400 24px/1 var(--f-display);letter-spacing:.03em;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.stat .inc{font:600 12px/1 var(--f-ui);letter-spacing:.02em;color:#9fcf84;text-shadow:none}
#sitBtn{border-radius:var(--r-s);background:linear-gradient(#3d4139,#272a25);border-color:var(--steel)}
#sitBtn em{font:400 17px/1 var(--f-display);letter-spacing:.02em}
/* the clock: the date as the title block sets a date, the slower and faster buttons the curtain's own, and the speed
   in the rating's pips */
#datebox{height:auto;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:none}
#speedSeg .stepb{width:28px;height:28px;border-radius:var(--r-s);border:1px solid var(--steel);background:linear-gradient(#3d4139,#272a25);color:var(--paper);font:600 19px/1 var(--f-ui);box-shadow:inset 0 1px 0 var(--steel-hi),0 1px 0 rgba(0,0,0,.6)}
#speedSeg .stepb:hover{color:var(--paper);border-color:var(--steel-2);background:linear-gradient(#4b5046,#31352f)}
#speedSeg .playb{color:var(--paper)} #speedSeg[data-s="0"] .playb{color:var(--alt)}
#speedSeg .playb svg{filter:none}
#clock{min-width:160px;padding:0 10px}
#clock b{font:400 23px/1 var(--f-display);letter-spacing:.05em;text-shadow:0 2px 0 rgba(0,0,0,.45)}
#clock small{font:600 9.5px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim);margin-top:3px}
#clock .pips{gap:3px;margin-top:4px;height:5px}
#clock .pips i{width:15px;height:5px;border-radius:1px;background:rgba(234,226,204,.13);box-shadow:none}
#speedSeg[data-sel="1"] #clock .pips i:nth-child(-n+1),#speedSeg[data-sel="2"] #clock .pips i:nth-child(-n+2),#speedSeg[data-sel="3"] #clock .pips i:nth-child(-n+3),#speedSeg[data-sel="4"] #clock .pips i:nth-child(-n+4),#speedSeg[data-sel="5"] #clock .pips i{background:var(--paper);box-shadow:none}
#speedSeg[data-sel="5"] #clock .pips i:nth-child(5){background:var(--alt);box-shadow:none}
@media (max-width:720px){ #clock b{font-size:17px} #clock{min-width:0;padding:0 5px} #clock .pips i{width:10px;height:4px} #speedSeg .stepb{width:24px;height:24px;font-size:16px} .stat b{font-size:20px} #sideTag{font-size:19px} }
@media (max-height:500px) and (min-width:721px){ #clock b{font-size:18px} #clock .pips i{width:12px;height:4px} #speedSeg .stepb{width:24px;height:24px;font-size:16px} }

/* ---------- the objectives and the sitrep: a typed sheet, its tabs the steps of the orders ---------- */
.objTop{background:var(--grain),linear-gradient(#f0e5ca,#ebdfc1);border-bottom:1px dotted var(--hair-2);box-shadow:none}
.tabs button{font:600 11px/1 var(--f-ui);letter-spacing:.24em;color:var(--paper-faint)}
.tabs button[aria-selected="true"]{color:var(--paper);border-bottom-color:var(--pencil,#ae3322)}
#objectives h3{font:400 18px/1 var(--f-display);letter-spacing:.08em;margin:2px 0 6px}
.objHead{font:400 17px/1 var(--f-display);letter-spacing:.08em}
.obj{border-bottom:1px dotted var(--hair);padding:6px 0 7px}
.obj .tick{border-radius:1px}
.obj .bar{background:var(--ink-4);border-radius:0;box-shadow:none;height:3px}
.obj .bar i{background:var(--pencil,#ae3322)}
.obj .pv{font:600 11.5px/1 var(--f-ui)}
.grpHead{letter-spacing:.24em;font-weight:600}
.frow,.srow,.trow,.urow,.prow{border-radius:0}
.frow .st i,.bunit i,.gxp{background:var(--ink-4)}
.frow .st i b,.bunit i b,.gxp i{background:var(--pencil,#ae3322)}

/* ---------- the unit's file: its name in the poster voice, its particulars typed down a ledger ---------- */
#selHead{background:transparent;border-bottom:1px dotted var(--hair-2);box-shadow:none;padding:10px 10px 9px 14px}
#selHead h2{font:400 26px/1 var(--f-display);letter-spacing:.06em}
.kv span:nth-child(odd){font:600 10.5px/1.75 var(--f-ui);letter-spacing:.16em}
.strength{background:var(--ink-4);border-radius:0;box-shadow:none}
.strength i{background:linear-gradient(#6b9449,#44702c)}
.strength.org i{background:linear-gradient(#c79236,#9a6a16)!important}
.gi b{font:400 21px/1 var(--f-display);letter-spacing:.05em}
.genBox,.rec{border-radius:1px}

/* ---------- the armies, down the right edge: a ledger page ---------- */
.olHead{background:var(--grain),linear-gradient(#f0e5ca,#ebdfc1);border-bottom:1px dotted var(--hair-2);box-shadow:none;font:400 19px/1 var(--f-display);letter-spacing:.09em;color:var(--paper);padding:9px 10px 8px 12px}
.olHead .n{font:600 12px/1 var(--f-ui);color:var(--paper-dim)}
.olRow{border-bottom:1px dotted var(--hair-2);box-shadow:none}
.olRow:hover{background:rgba(45,36,22,.055)}
.olRow.on{background:var(--sel-tint);box-shadow:inset 3px 0 0 var(--pencil,#ae3322)}
.olRow.part{box-shadow:inset 3px 0 0 rgba(174,51,34,.45)}
.olRow canvas{border-color:rgba(45,36,22,.55)}
.olRow b{font-weight:600}
.olRow .cnt{font:400 17px/1 var(--f-display);letter-spacing:.02em}
.olRow .bar{background:var(--ink-4);box-shadow:none}

/* ---------- the news: typed slips, each with its side's mark down the margin ---------- */
.news{border-left:3px solid var(--paper-faint);border-radius:1px;font:500 13px/1.35 var(--f-ui)}
.news .when{font:600 10px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
#toast{font:600 14px/1.3 var(--f-ui)}
.incNote2{background:var(--grain),linear-gradient(168deg,#f0e5ca,#e7d9b8);border:1px solid #b3a176;border-left:3px solid #44702c;border-radius:1px;color:#2d2416;box-shadow:0 6px 14px -8px rgba(0,0,0,.7)}
.incNote2.bad{border-left-color:#a23422}

/* ---------- notes pinned to the map: the tip, the income ---------- */
#tip{background:var(--grain),linear-gradient(168deg,#f2e8ce,#e8dabb);border-color:#b3a176}
#tip .go{font:400 17px/1.1 var(--f-display);letter-spacing:.05em;color:#9c2f1c}
#incTip .incHead b{font:400 22px/1 var(--f-display);letter-spacing:.06em}
#deployBox .dHead b{font:400 22px/1 var(--f-display);letter-spacing:.06em;color:#9c2f1c}

/* ---------- the army bar: the generals' photographs clipped along a strip of paper ---------- */
.acard{border:1px solid var(--hair-2);border-radius:1px;background:var(--ink-2);box-shadow:0 1px 0 rgba(255,252,240,.5)}
.acard:hover{border-color:rgba(162,69,32,.55)}
.acard.on{border-color:var(--pencil,#ae3322);box-shadow:0 0 0 1px var(--pencil,#ae3322),0 6px 14px -6px rgba(0,0,0,.45)}
.acard.part{border-color:rgba(174,51,34,.5)}
.acard .an{background:var(--ink-0);border:1px solid #a83524;color:#9c2f1c;border-radius:1px;font:800 9.5px/13px var(--f-ui)}
.acard .ac{font:400 15px/1 var(--f-display);letter-spacing:.03em;color:var(--paper);padding:4px 0 3px}
.acard .ast{background:var(--ink-4)}
#armyBar .aplus{border:1px dashed var(--hair-2);background:transparent;color:var(--paper-faint);border-radius:1px}
#armyBar .aplus:hover{border-color:#a83524;color:#9c2f1c}

/* ---------- the map modes: the orders' three-way switch ---------- */
#mapModes{gap:0;padding:3px}
#mapModes button{border:1px solid var(--hair-2);border-radius:0;background:var(--ink-2);box-shadow:none;color:var(--paper-dim)}
#mapModes button+button{border-left:0}
#mapModes button svg{filter:none}
#mapModes button:hover{background:var(--ink-3);color:var(--paper);border-color:var(--hair-2)}
#mapModes button[aria-pressed="true"]{background:var(--ink-4);color:var(--paper);border-color:var(--hair-2);box-shadow:inset 0 -2px 0 var(--brass)}

/* ---------- the touch buttons: paper tabs on the map ---------- */
#touchTools .btn{background:var(--grain),linear-gradient(#f0e5ca,#e3d3ad);border:1px solid #b3a176;color:#2d2416;text-shadow:none;box-shadow:0 1px 0 rgba(0,0,0,.35),0 8px 16px -10px rgba(0,0,0,.8)}
#touchTools .btn:hover{background:var(--grain),linear-gradient(#f3e9d0,#e8d9b6)}
#touchTools .btn[aria-pressed="true"]{border-color:#a83524;color:#9c2f1c;box-shadow:inset 0 -2px 0 #a83524,0 8px 16px -10px rgba(0,0,0,.8)}
#sitTool em{background:#c8b68c;color:#2d2416;text-shadow:none} #sitTool.bad{border-color:#a83524;color:#9c2f1c} #sitTool.bad em{color:#a23422} #sitTool.warn{border-color:#8a5d14;color:#6b4710} #sitTool.warn em{color:#8a5d14}

/* ---------- the operation's banner: the title block's voice ---------- */
#banner b{font:400 clamp(58px,9vw,112px)/0.86 var(--f-display);letter-spacing:.015em;text-shadow:0 3px 0 rgba(0,0,0,.45),0 4px 30px rgba(0,0,0,.75)}
#banner small{margin-top:12px;font:600 13px/1.5 var(--f-ui);letter-spacing:.18em}

/* ---------- the windows: documents laid on the map table, the curtain drawn behind them ---------- */
.screen:not(#titleScreen){background:radial-gradient(ellipse at 30% 20%,rgba(14,11,7,.6),rgba(14,11,7,.93) 70%)}
.screen .card{transform:rotate(-.3deg)}
#endScreen .card{transform:none} /* (the battle's chart reads the pointer square-on) */
.card h2{font:400 clamp(34px,4.4vw,48px)/0.92 var(--f-display);letter-spacing:.03em}
.card h3{font:400 23px/1 var(--f-display);letter-spacing:.07em;margin:20px 0 8px}
.card details{border-radius:1px;background:var(--ink-1);border-color:var(--hair-2)}
table.keys td,.tbl th,.tbl td{border-bottom-style:dotted}
.result{margin:6px 0 4px}
.result b{display:inline-block;padding:6px 16px 4px;border:4px solid currentColor;border-radius:5px;font:400 clamp(48px,7vw,72px)/0.95 var(--f-display);letter-spacing:.08em;transform:rotate(-3deg);background:color-mix(in srgb,currentColor 8%,transparent);mix-blend-mode:multiply} /* the result is stamped on the file */
.gcard{border:1px solid var(--hair-2);border-radius:1px;background:var(--ink-1);box-shadow:none}
.gcard:hover{border-color:rgba(162,69,32,.5);background:var(--ink-2)}
.gcard.on{border:2px solid var(--pencil,#ae3322);background:var(--ink-2)}
.gcard:disabled:hover{border-color:var(--hair-2);background:var(--ink-1)}
#aarTip{background:var(--grain),linear-gradient(168deg,#f2e8ce,#e8dabb);border:1px solid #b3a176;border-radius:1px}
#coach .cPips i.done{background:rgba(174,51,34,.45)} #coach .cPips i.now{background:var(--pencil,#ae3322);box-shadow:none}
#coach h2{font:400 26px/1 var(--f-display);letter-spacing:.05em}
@media (max-width:720px){ #coach h2{font-size:21px} } @media (max-height:500px) and (min-width:721px){ #coach h2{font-size:20px} } /* (a phone's smaller heading, which the line above would otherwise undo) */

/* ---------- online: the match sheet (the code to send, or to type) and the bar's word on the line ---------- */
.netCard{width:min(520px,100%)}
.netCard .note{margin:10px 0 0;font-size:14px;line-height:1.5}
.netCode{margin:16px 0 2px;font:400 clamp(56px,12vw,82px)/1 var(--f-display);letter-spacing:.2em;text-indent:.2em;text-align:center;color:#9c2f1c;font-variant-numeric:tabular-nums;user-select:all} /* the code is typed in red, as the orders mark what matters */
.netCode.wait{color:var(--paper-faint);user-select:none}
.netLink{text-align:center;font-size:12.5px;color:var(--paper-dim);overflow-wrap:anywhere;user-select:all}
.netStatus{margin:14px 0 0;font:600 13.5px/1.4 var(--f-ui);color:var(--paper)}
.netStatus.bad{color:#a23422}
.netStatus:empty{display:none}
.netLabel{display:block;margin:16px 0 6px;font:600 11px/1.2 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--paper-faint)}
input.txt.netInput{box-sizing:border-box;width:100%;height:58px;padding:0 12px;font:400 38px/1 var(--f-display);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;text-align:center}
input.txt.netInput::placeholder{color:var(--paper-faint);opacity:.45}
input.txt.netInput:disabled{opacity:.6}
#netChip{display:flex;align-items:center;gap:7px;height:24px;padding:0 9px;border:1px solid var(--hair-2);border-radius:var(--r-s);font:600 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim);white-space:nowrap;cursor:default}
#netChip[hidden]{display:none}
#netChip i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--good)}
#netChip[data-st="slow"] i{background:var(--warn)}
#netChip[data-st="off"]{border-color:rgba(224,88,74,.55);color:var(--paper)}
#netChip[data-st="off"] i{background:var(--bad);animation:netBlink 1.2s steps(2,jump-none) infinite}
@keyframes netBlink{50%{opacity:.2}}
:root.still #netChip i{animation:none}
@media (max-width:720px){ #netChip{padding:0 7px} #netChip span{display:none} } /* a phone's bar keeps the light, the tooltip the words */
/* Friend sits with the computer's strengths, as the other choice of opponent; a match has no stamp, so the line under the
   start strip says what it is instead */
.orders #vsFriend{border-left:2px solid var(--hair-2)}
.sides.friend .rateHint{color:var(--paper-dim)}
#endNet{margin-top:12px}

/* ---------- the service record: campaign ribbons on the battles won, the tally on each side's card, the medal on the report ---------- */
/* a ribbon is the side's colour with a stripe of the medal's metal down the middle: bronze for Easy, silver for Normal, gold for Hard */
.ribs{display:inline-flex;gap:3px;margin-left:8px;vertical-align:3px}
.rib{display:inline-block;width:16px;height:7px;border:1px solid rgba(45,36,22,.6);border-radius:1px;--m:#b8bdc3;background:linear-gradient(90deg,var(--c) 0 35%,var(--m) 35% 65%,var(--c) 65%);box-shadow:0 1px 0 rgba(255,252,240,.5)}
.rib.bronze{--m:#b0773f} .rib.silver{--m:#c3c8cd} .rib.gold{--m:#d9ae3c}
.rib.done{width:16px;--c:#5e7f3c;--m:#d9ae3c}
.sideCard .rec{grid-column:1/-1;font:600 11.5px/1.35 var(--f-ui);letter-spacing:.02em;color:var(--paper-dim)}
.sideCard .rec[hidden]{display:none}
.endRec{display:flex;align-items:center;gap:10px;margin:2px 0 10px;font:600 14px/1.45 var(--f-ui);color:var(--paper)}
.endRec[hidden]{display:none}
.endRec.medal::before{content:'';flex:none;width:26px;height:26px;border-radius:50%;--m:#c3c8cd;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),transparent 45%),var(--m);border:2px solid rgba(45,36,22,.5);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 1px 0 rgba(0,0,0,.25)}
.endRec.bronze::before{--m:#b0773f} .endRec.silver::before{--m:#c3c8cd} .endRec.gold::before{--m:#d9ae3c}
#replayBtn{margin-top:12px;gap:8px}

/* ---------- the replay of the front: the map alone, the day running in a strip of paper along the bottom ---------- */
:root.replaying #bar,:root.replaying #objectives,:root.replaying #sel,:root.replaying #armyBar,:root.replaying #outliner,:root.replaying #feed,:root.replaying #touchTools,:root.replaying #mapModes,:root.replaying #deployBox,:root.replaying #coach,:root.replaying #tip,:root.replaying #toast,:root.replaying #incTip,:root.replaying #incNotes,:root.replaying #banner{display:none!important}
#replayBar{position:absolute;left:50%;bottom:calc(var(--wm-h) + 10px);transform:translateX(-50%);z-index:30;width:min(640px,calc(100% - 2 * max(var(--gut),env(safe-area-inset-left,0px))));padding:10px 14px 12px}
#replayBar[hidden]{display:none}
.rpHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.rpDate{font:400 26px/1 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.rpRow{display:flex;align-items:center;gap:12px}
#rpSlider{flex:1;min-width:0;accent-color:#a83524}
#rpPlay .play{display:none} #rpPlay.paused .play{display:block} #rpPlay.paused .pause{display:none}
@media (max-width:480px){ .rpDate{font-size:20px} .rpHead .eyebrow{display:none} #rpClose{padding:0 9px} }
@media (max-height:500px){ /* a short screen (a phone held sideways): one row along the bottom edge, beside the keep-out corner instead of above it, in the strip the map leaves free (MAP.fit), not across the middle of the front it replays */
  #replayBar{left:max(var(--gut),env(safe-area-inset-left,0px));right:calc(var(--wm-w) + 12px);bottom:max(8px,env(safe-area-inset-bottom,0px));transform:none;width:auto;max-width:640px;display:flex;align-items:center;gap:12px;padding:7px 12px}
  .rpHead{margin:0;min-width:0} .rpHead .eyebrow{display:none} .rpDate{font-size:18px;overflow:hidden;text-overflow:ellipsis}
  .rpRow{flex:1;min-width:0} #rpClose{padding:0 9px;white-space:nowrap}
}
@media (max-height:500px) and (max-width:720px){ #replayBar{gap:8px;padding:7px 9px} .rpDate{font-size:15px} .rpRow{gap:8px} } /* a small phone sideways: the date gives way so the slider keeps a length a thumb can use */