/* ============================================================
   WOOLDOM — chrome styling
   A shepherd's hut at dusk: dark meadow ground, oiled-oak panels,
   everything written on parchment. The board is the only bright thing.
   ============================================================ */
:root{
  --night:#141a14;      /* page background                          */
  --night2:#1e281c;     /* panel background                         */
  --slate:#3a4a36;      /* borders / muted lines                    */
  --wool:#f4eeda;       /* parchment (primary text)                 */
  --lanolin:#c3b9a4;    /* dim cream                                */
  --meadow:#8cc45c;     /* success / go                             */
  --barn:#c0503a;       /* danger / accent                          */
  --barn-t:#e07a5f;     /* danger as TEXT — #c0503a is only 3.2:1 on the panel */
  --barn-hi:#ef9878;    /* danger text ON a danger-tinted ground     */
  --brook:#79b0ea;      /* info accent                              */
  --gold:#ffd86b;       /* rams / highlight                         */
  --dim:#8a917f;        /* the quietest legible grey (5.4:1 on --night) */
  --focus:#ffd86b;      /* keyboard focus ring                      */
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--night);
  background-image:radial-gradient(ellipse 90% 60% at 50% -10%, #24331f 0%, var(--night) 62%);
  color:var(--wool);
  font-family:ui-monospace,'Menlo','Consolas',monospace;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:12px;
  user-select:none;-webkit-user-select:none;
}
#stage{position:relative;width:964px;max-width:100%}

/* ---- top bar ---- */
#topbar{
  display:flex;align-items:center;gap:12px;
  background:var(--night2);border:2px solid var(--slate);border-bottom:none;
  padding:6px 12px;font-size:12px;letter-spacing:1px;
  border-radius:6px 6px 0 0;flex-wrap:wrap;
}
#topbar .gname{font-weight:bold;letter-spacing:3px;color:var(--wool);white-space:nowrap}
#topbar .stat{color:var(--lanolin);white-space:nowrap}
#topbar .stat b{color:var(--wool)}
/* the turn banner takes what is left of the row and truncates rather than
   wrapping the bar onto a second line */
#topbar #hoverinfo{margin-left:auto;color:var(--brook);text-transform:uppercase;
  font-size:11px;min-width:0;flex:1 1 auto;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- seat chips: colour, name, score, shepherds still in the satchel ---- */
#seatChips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:5px;
  background:#182016;border:2px solid var(--slate);border-radius:4px;
  padding:2px 7px;font-size:11px;letter-spacing:1px;color:var(--lanolin);
}
.chip .sw{width:9px;height:9px;border-radius:2px;border:1px solid #0008;flex:0 0 auto}
.chip .nm{color:var(--wool);max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .sc{color:var(--gold);font-weight:bold;min-width:20px;text-align:right}
.chip .pips{letter-spacing:0;font-size:10px;color:var(--lanolin);white-space:nowrap}
/* whose turn it is, said with a border rather than a colour alone */
.chip.turn{border-color:var(--wool);background:#2a3626;box-shadow:0 0 0 1px var(--wool) inset}
.chip.turn .nm{font-weight:bold}
.chip.ai .nm{font-style:italic}
/* the seat that is working, said on the chip the player is already reading.
   The dots are DOM, so the mark survives calm mode by going still rather than
   by disappearing — the state is the point, the motion only draws the eye. */
.chip.think{border-color:var(--brook)}
.chip .tk{display:inline-flex;align-items:center;gap:3px;line-height:1;
  padding-right:3px;border-right:1px solid var(--slate)}
.chip .tk i{display:block;width:4px;height:4px;border-radius:1px;
  background:var(--brook);opacity:.3;
  animation:think 1.05s ease-in-out infinite}
.chip .tk i:nth-child(2){animation-delay:.18s}
.chip .tk i:nth-child(3){animation-delay:.36s}
@keyframes think{0%,100%{opacity:.3}35%{opacity:1}}
#hModules{display:flex;gap:5px}
.modchip{font-size:10px;letter-spacing:1px;color:var(--brook);border:1px solid var(--slate);
  border-radius:3px;padding:1px 5px}

/* off-screen but spoken — the canvas banner has no text for a screen reader */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ---- keyboard focus: one unmistakable gold ring, never on mouse clicks ---- */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sbtn:focus-visible,.dbtn:focus-visible,.bigbtn:focus-visible,.hx:focus-visible,
.hs:focus-visible,.card:focus-visible,input.vol:focus-visible,#logToggle:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
.dbtn:focus-visible{outline-offset:-2px}          /* segments touch: keep the ring inside */

/* ---- the board ---- */
#wrap{position:relative;line-height:0;border:2px solid var(--slate);background:#0d120c}
canvas#cv{
  width:960px;max-width:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  cursor:grab;display:block;touch-action:none;
}
canvas#cv.panning{cursor:grabbing}
canvas#cv.placing{cursor:crosshair}
/* ---- move log: three lines in the board's corner, folded away by default ---- */
#movelog{position:absolute;left:8px;bottom:8px;z-index:5;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:60%}
#logToggle{background:rgba(20,26,20,.86);border:2px solid var(--slate);border-radius:4px;
  color:var(--lanolin);font-family:inherit;font-size:10px;letter-spacing:2px;
  padding:3px 8px;min-height:26px;cursor:pointer;line-height:1}
#logToggle:hover{color:var(--wool);border-color:var(--lanolin)}
#logLines{display:flex;flex-direction:column;gap:2px;
  background:rgba(20,26,20,.86);border:2px solid var(--slate);border-radius:4px;
  padding:5px 8px;font-size:11px;letter-spacing:.5px;line-height:1.5;color:var(--lanolin)}
#logLines:empty{display:none}
#logLines .ln b{color:var(--wool)}
#logLines .ln i{color:var(--gold);font-style:normal}
#movelog.collapsed #logLines{display:none}
/* stood down for the reveal: render.js reserves a caption band along the bottom
   of #cv for the walkthrough's arithmetic, and this overlay sits in the same
   corner with nothing left to add while the counting narrates itself */
#movelog.hidden{display:none}

/* ---- the tray: the tile in hand, its name, and what you may do with it ---- */
#tray{
  display:flex;align-items:center;gap:12px;
  background:var(--night2);border:2px solid var(--slate);border-top:none;
  padding:8px 12px;
}
#trayCv{width:96px;height:96px;image-rendering:pixelated;background:#0d120c;
  border:2px solid var(--slate);border-radius:4px;cursor:pointer;flex:0 0 auto}
#trayInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#trayInfo .tname{font-size:14px;letter-spacing:2px;color:var(--wool);font-weight:bold;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trayInfo .tsub{font-size:11px;letter-spacing:1px;color:var(--lanolin);line-height:1.6}
#trayInfo .tsub em{color:var(--brook);font-style:normal}
#trayBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ---- hint strip ---- */
#hintbar{
  display:flex;align-items:center;gap:10px;overflow:hidden;
  background:var(--night2);border:2px solid var(--slate);border-top:none;border-bottom:none;
  color:var(--brook);font-size:11px;letter-spacing:.5px;line-height:1.4;
  padding:7px 12px;min-height:34px;transition:opacity .3s ease;
}
#hintbar .ht{flex:1;min-width:0}
#hintbar .hx{background:transparent;border:none;color:var(--lanolin);font-family:inherit;
  font-size:13px;cursor:pointer;padding:2px 6px;min-height:32px;min-width:32px;flex:0 0 auto}
#hintbar .hx:hover{color:var(--wool)}
#hintbar.off{opacity:0;pointer-events:none}
/* the same strip carries the first-game teaching hints, lit differently so a
   thing being TAUGHT is never mistaken for the standing control reminder.
   No entrance animation on purpose: this element's text is rewritten as the
   game moves, and anything that replayed on each rewrite would twitch. */
#hintbar.teach{background:#20301c;color:var(--wool);
  box-shadow:inset 3px 0 0 var(--meadow), inset -3px 0 0 var(--meadow)}
#hintbar.teach b{color:var(--gold)}
#hintbar.teach em{color:var(--meadow);font-style:normal}
#hintbar .hs{background:transparent;border:2px solid var(--slate);border-radius:4px;
  color:var(--lanolin);font-family:inherit;font-size:10px;letter-spacing:1px;
  padding:0 8px;min-height:32px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
#hintbar .hs:hover{color:var(--wool);border-color:var(--lanolin)}
#hintbar .hs[hidden]{display:none}

/* ---- bottom panel ---- */
#panel{
  display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;
  background:var(--night2);border:2px solid var(--slate);border-top:none;
  padding:8px;border-radius:0 0 6px 6px;
}
.prow{display:contents}
.sbtn{
  background:#26301f;border:2px solid var(--slate);border-radius:4px;color:var(--lanolin);
  font-family:inherit;font-size:11px;letter-spacing:1px;padding:0 10px;cursor:pointer;min-height:44px;
}
.sbtn:hover{border-color:var(--lanolin);color:var(--wool)}
.sbtn.on{border-color:var(--brook);color:var(--brook)}
.sbtn.warn{border-color:var(--barn);color:var(--barn-t)}
.sbtn[disabled]{cursor:default;border-color:#2b3328;color:#7d8474;background:#171e16}
.sbtn.go{border-color:var(--meadow);color:var(--meadow);background:rgba(140,196,92,.10);
  box-shadow:0 0 0 1px rgba(140,196,92,.35) inset;font-weight:bold}
.sbtn.go:hover{background:rgba(140,196,92,.22);color:var(--wool)}
.sbtn.armed{border-color:var(--barn);color:var(--barn-hi);background:rgba(192,80,58,.18);
  box-shadow:0 0 0 1px rgba(192,80,58,.5) inset;font-weight:bold;animation:blink 1s steps(2) infinite}
/* a post option somebody already herds: greyed, but still a button — pressing
   it says whose it is, which a disabled control could not do */
.sbtn.off{color:#7d8474;border-color:#2b3328;background:#171e16}
.sbtn.off:hover{color:var(--lanolin);border-color:var(--slate)}
.sbtn.off .k{color:#6b7264}
.sbtn.ico{padding:0 10px;font-size:14px;line-height:1}
.sbtn .k{color:var(--dim);font-size:10px;margin-left:6px}
.sbtn.go .k,.sbtn.on .k{color:inherit;opacity:.75}
.sep{width:2px;background:var(--slate);margin:2px;border-radius:2px}
.spacer{margin-left:auto}
@keyframes blink{50%{opacity:.35}}
input.vol{width:88px;accent-color:var(--wool);cursor:pointer;align-self:center;background:transparent}

/* ---- settings popover: over the board's bottom-right corner ---- */
/* clear of the panel, so the gear that opened it stays visible and clickable */
#settings{position:absolute;right:8px;bottom:72px;z-index:12;width:250px;max-width:calc(100% - 16px)}
.setcard{
  display:flex;flex-direction:column;gap:8px;
  background:var(--night2);border:2px solid var(--slate);border-radius:6px;
  padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.55);
}
.setcard.hidden{display:none}
.settitle{font-size:11px;letter-spacing:3px;color:var(--lanolin);font-weight:bold}
.setrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1px;color:var(--lanolin)}
.setrow label,.setrow .setlbl{min-width:52px}
.setrow input.vol{flex:1;width:auto;min-height:28px}
.setrow .setval{min-width:30px;text-align:right;color:var(--wool)}
.setcard>.sbtn{align-self:stretch}

/* ---- overlays ----
   The pasture stays visible behind them: opaque under the words, thin at the
   edges, so the board you are about to play on is never fully hidden. */
.overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  /* centred while it fits, and pinned to the top when it does not. Plain
     `center` overflows a scroll container equally at BOTH ends, which put the
     first line of HOW TO PLAY above the scrollable area and out of reach; the
     `safe` keyword falls back to flex-start exactly there. The unprefixed line
     stays first for anything that does not understand it. */
  justify-content:center;
  justify-content:safe center;
  background:radial-gradient(ellipse 64% 76% at 50% 50%,
    rgba(14,18,12,.95) 0%, rgba(14,18,12,.90) 40%, rgba(14,18,12,.62) 100%);
  text-align:center;padding:20px;overflow-y:auto;
}
.overlay.hidden{display:none}
/* the end card sits denser than the menu: the walkthrough is still lit behind
   it, and the arithmetic must not read through the scoreboard */
#end{background:radial-gradient(ellipse 64% 76% at 50% 50%,
  rgba(14,18,12,.985) 0%, rgba(14,18,12,.95) 46%, rgba(14,18,12,.72) 100%)}
h1.logo{
  font-size:44px;letter-spacing:10px;color:var(--wool);font-weight:900;
  text-shadow:0 4px 0 #0a0d08, 0 0 24px rgba(244,238,218,.15);
}
.tagline{color:var(--lanolin);letter-spacing:3px;font-size:12px;text-transform:uppercase}
.ovtitle{font-size:30px;letter-spacing:6px;font-weight:900}
.ovtitle.win{color:var(--meadow)}
.ovtitle.fail{color:var(--barn-t)}
.ovsub{color:var(--lanolin);font-size:12px;letter-spacing:2px;line-height:2}
.ovsub:empty{display:none}
.hint{max-width:600px;color:var(--brook);font-size:11px;line-height:1.8;letter-spacing:.5px;font-style:italic}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btnrow.col{flex-direction:column;gap:10px;align-items:stretch;min-width:260px}
.bigbtn{
  background:var(--wool);color:#1a1a12;border:none;border-radius:4px;
  font-family:inherit;font-weight:bold;font-size:14px;letter-spacing:2px;
  padding:12px 26px;cursor:pointer;box-shadow:0 4px 0 #5c5a3a;
}
.bigbtn:hover{transform:translateY(-1px);box-shadow:0 5px 0 #5c5a3a}
.bigbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #5c5a3a}
.bigbtn.ghost{background:transparent;color:var(--wool);border:2px solid var(--slate);box-shadow:none}
.bigbtn.ghost:hover{border-color:var(--wool)}
footer{margin-top:10px;font-size:11px;color:var(--dim);letter-spacing:1px;text-align:center}

/* ---- new-game setup ---- */
#setupbox{display:flex;flex-direction:column;gap:7px;background:var(--night2);
  border:2px solid var(--slate);border-radius:6px;padding:12px 14px;
  min-width:560px;max-width:96vw;text-align:left}
.setuprow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1px;color:var(--lanolin)}
.setuprow .slbl{min-width:70px;text-align:left}
.setuprow .pdot{width:12px;height:12px;border-radius:2px;border:1px solid #0008;flex:0 0 auto}
.setuprow .dirseg{flex:1}
.setuprow.seat{border-top:1px solid #2b3328;padding-top:7px}
.setuprow .who{min-width:56px;color:var(--wool);letter-spacing:1px}
.dirseg{display:flex;gap:0;border:2px solid var(--slate);border-radius:4px;overflow:hidden}
.dbtn{background:#26301f;border:none;border-right:2px solid var(--slate);color:var(--lanolin);
  font-family:inherit;font-size:10px;letter-spacing:1px;padding:0 8px;min-height:34px;cursor:pointer;flex:1;
  white-space:nowrap}   /* a two-word name must not make its segment twice as tall */
.dbtn:last-child{border-right:none}
.dbtn:hover{color:var(--wool)}
.dbtn.on{background:#3a4a30;color:var(--wool);box-shadow:0 0 0 1px var(--wool) inset}
.tinput{background:#161d15;border:2px solid var(--slate);border-radius:4px;
  color:var(--wool);font:inherit;font-size:11px;letter-spacing:1px;padding:6px 8px;min-height:34px}
.tinput::placeholder{color:var(--dim)}
.nameinput{width:120px;text-transform:uppercase}
.seedinput{width:150px}
.setuprow .note{color:var(--dim);font-size:10px;letter-spacing:.5px}

/* ---- how to play ---- */
.help{max-width:740px;font-size:11px;color:var(--lanolin);line-height:1.85;
  letter-spacing:.5px;text-align:left}
.help b{color:var(--wool)}
.help em{color:var(--brook);font-style:normal}
.help p{margin-bottom:10px}
/* the meadow rule, drawn. Nine divs rather than a canvas: the help page is
   reachable before art.js has painted a single tile. Colours are the end
   card's own legend swatches, so the picture and the scoreboard agree. */
.mdiag{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;
  background:#182016;border:2px solid var(--slate);border-radius:5px;padding:10px 12px}
.mgrid{display:grid;grid-template-columns:repeat(3,34px);grid-auto-rows:34px;gap:2px;flex:0 0 auto}
.mc{display:flex;align-items:center;justify-content:center;border-radius:2px;
  font-size:8px;letter-spacing:.5px;font-weight:bold;line-height:1}
.mc.m{background:#7db661;color:#20300f}
.mc.f{background:#f2ecdd;color:#3a3427}
.mc.sh{color:#1b3a5c;font-size:15px;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.mcap{flex:1;min-width:190px;font-size:10px;line-height:1.7;color:var(--lanolin)}
.mcap b{color:var(--gold)}

/* ---- the end card ---- */
#eTable{display:flex;flex-direction:column;gap:3px;min-width:560px;max-width:96vw}
.erow{display:grid;grid-template-columns:24px 1fr 120px 64px;gap:8px;align-items:center;
  padding:6px 10px;font-size:11px;letter-spacing:1px;text-align:left;
  background:var(--night2);border:1px solid var(--slate);border-radius:3px}
.erow .rk{color:var(--dim);text-align:right}
.erow .who{font-weight:bold;display:flex;align-items:center;gap:6px;min-width:0}
.erow .who .sw{width:9px;height:9px;border-radius:2px;border:1px solid #0008;flex:0 0 auto}
.erow .who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erow .tot{color:var(--gold);font-weight:bold;text-align:right;font-size:13px}
.erow.ehead{background:transparent;border-color:transparent;color:var(--dim);font-size:10px}
.erow.ehead .who{font-weight:normal}
.erow.win{border-color:var(--meadow);box-shadow:0 0 0 1px rgba(140,196,92,.35) inset}
/* per-category bars: one stacked strip, legend below the table */
.bars{display:flex;height:12px;border-radius:2px;overflow:hidden;background:#171e16;
  border:1px solid #0006}
.bars span{display:block;height:100%}
.bkey{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  font-size:10px;letter-spacing:1px;color:var(--lanolin)}
.bkey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;
  border:1px solid #0006;font-style:normal}
/* the biggest single score of the game — the thing a player retells, which the
   ranked table has no row for */
#eBest{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:#1d2a18;border:2px solid var(--slate);border-radius:5px;
  padding:8px 14px;font-size:11px;letter-spacing:1px;min-width:560px;max-width:96vw}
#eBest[hidden]{display:none}
#eBest .blbl{color:var(--dim);font-size:10px;letter-spacing:2px}
#eBest .bwho{display:flex;align-items:center;gap:6px;color:var(--wool);font-weight:bold}
#eBest .bwho .sw{width:9px;height:9px;border-radius:2px;border:1px solid #0008;flex:0 0 auto}
#eBest .bval{color:var(--gold);font-size:16px;font-weight:bold}
#eBest .bwhy{color:var(--lanolin);font-style:italic;letter-spacing:.5px}

/* ---- mobile: every target clears 44px ---- */
@media (max-width:720px){
  body{padding:6px}
  #topbar{gap:8px;font-size:11px}
  #topbar #hoverinfo{min-width:0;margin-left:0;text-align:left}
  #tray{flex-wrap:wrap}
  #trayCv{width:72px;height:72px}
  #trayBtns{width:100%;justify-content:stretch}
  #trayBtns .sbtn{flex:1}
  #panel{gap:6px;padding:6px}
  .sbtn{min-height:44px;min-width:44px;padding:0 12px}
  .dbtn{min-height:44px;min-width:44px;padding:0 10px;font-size:11px}
  input.vol{width:96px;min-height:44px}
  #settings{left:6px;right:6px;bottom:64px;width:auto}
  #setupbox,#eTable,#eBest{min-width:0;width:100%}
  .setuprow{flex-wrap:wrap}
  .nameinput,.seedinput{width:100%}
  /* The breakdown used to be hidden here, which threw away the one thing the
     end card is FOR on the screen most likely to be showing it. It wraps onto
     its own row under the seat instead. */
  .erow{grid-template-columns:20px 1fr 56px;font-size:10px;letter-spacing:0;row-gap:5px}
  .erow .rk{grid-column:1;grid-row:1}
  .erow .who{grid-column:2;grid-row:1}
  .erow .tot{grid-column:3;grid-row:1}
  .erow .bars{grid-column:2/-1;grid-row:2}
  .erow .bhead{display:none}
  .erow.ehead{row-gap:0}
  #movelog{max-width:80%}
  /* the key hints are desktop furniture: there is no ESC to press on a phone,
     and dropping them is what lets the whole control row stay on ONE line
     instead of orphaning the fullscreen button onto a second */
  .sbtn .k{display:none}
  /* every remaining tap target clears the 44px floor */
  #logToggle{min-height:44px;min-width:44px;font-size:11px}
  /* the text takes the full width and the two buttons drop beneath it —
     sharing the line squeezed a four-line hint into eight */
  #hintbar{padding:6px 8px;flex-wrap:wrap;row-gap:6px}
  #hintbar .ht{flex:1 1 100%;min-width:100%}
  #hintbar .hx{min-height:44px;min-width:44px;font-size:15px;margin-left:auto}
  #hintbar .hs{min-height:44px;padding:0 10px}
  .bigbtn{min-height:44px;padding:12px 20px}
  #eBest{font-size:10px;padding:8px 10px}
}

/* ---- reduced motion: the OS preference, and the in-game CALM toggle ----
   ui.js mirrors G.calm onto body.calm so the setting works even when the OS
   preference says otherwise. Canvas-side pulsing is capped in render.js.

   THE AUDIT: this file's only moving parts are the armed-reset blink, the hint
   strip's fade, the big buttons' hover lift, and the thinking dots — all four
   are listed below under both switches. The rule every one of them follows is
   that stillness must not cost information: the armed button keeps its red, the
   hint keeps its text, and the thinking dots stay on the chip at a legible
   opacity instead of vanishing with their animation. */
@media (prefers-reduced-motion:reduce){
  .sbtn.armed{animation:none}
  .card:hover,.bigbtn:hover,.bigbtn:active{transform:none}
  #hintbar{transition:none}
  .chip .tk i{animation:none;opacity:.85}
}
body.calm .sbtn.armed{animation:none}
body.calm .bigbtn:hover,body.calm .bigbtn:active{transform:none}
body.calm #hintbar{transition:none}
body.calm .chip .tk i{animation:none;opacity:.85}

/* ---- fullscreen: the stage owns the screen, its bars centred at the board's
   width. ui.js sets --fsw to the snapped canvas width so chrome tracks it. ---- */
#stage:fullscreen{max-width:none;background:var(--night);padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
#stage:fullscreen>#topbar,#stage:fullscreen>#wrap,#stage:fullscreen>#tray,
#stage:fullscreen>#hintbar,#stage:fullscreen>#panel{width:var(--fsw,100%)}
#stage:-webkit-full-screen{max-width:none;background:var(--night);padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
#stage:-webkit-full-screen>#topbar,#stage:-webkit-full-screen>#wrap,#stage:-webkit-full-screen>#tray,
#stage:-webkit-full-screen>#hintbar,#stage:-webkit-full-screen>#panel{width:var(--fsw,100%)}