/* AGEIO shared styles, used by every page. */
/* Registered so the losing side's colours can fade to grey instead of jumping. */
@property --pf{syntax:"<color>";inherits:true;initial-value:#000}
@property --pd{syntax:"<color>";inherits:true;initial-value:#000}
@property --pa{syntax:"<color>";inherits:true;initial-value:#000}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#0b1428;--panel:#14203a;--ink:#e7ecf5;--muted:#a7b3ca;--line:#26365a;
  --sq-l:#1a2238;--sq-d:#0f1524;--frame:#05070d;--grid:#c9d6ff;--sel:#4fd3c4;--last:rgba(79,211,196,.3);--danger:#ff7b6b;--threat:#e0402f;--line6:#04060c;
  --wp:#ffffff;--wp-edge:#c08a10;--wp-acc:#2f63c8;--bp:#050505;--bp-edge:#4a82ee;--bp-acc:#e53e31;--hint:rgba(40,170,155,.85);}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1428;--panel:#14203a;--ink:#e7ecf5;--muted:#a7b3ca;--line:#26365a;--frame:#0d0d0d;}}
:root[data-theme="dark"]{--bg:#0b1428;--panel:#14203a;--ink:#e7ecf5;--muted:#a7b3ca;--line:#26365a;--frame:#0d0d0d;}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}
.wrap{max-width:1040px;margin:0 auto;padding:22px 16px 48px}
header{margin-bottom:22px}
.top{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:12px}
h1{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;font-weight:700;font-size:clamp(2rem,5vw,3rem);line-height:1;letter-spacing:-.02em;margin:0}
header p{margin:0;color:var(--muted)}
h1 .sub{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-weight:400;font-size:clamp(.95rem,1.8vw,1.15rem);letter-spacing:0;color:var(--muted);white-space:nowrap}
/* Game pages: the settings column on the left, the board on the right. The column can be
   folded away with its arrow button (setupPanel in ageio-board.js), leaving a slim strip. */
.game{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start}
.game>.panel{order:-1}
.game.folded{grid-template-columns:44px minmax(0,1fr)}
html:not(.fs) .game.folded>.panel>:not(.ptoggle){display:none}
.game.folded .bwrap{justify-self:center}
.game>.panel{position:relative}
.game:not(.folded) .panel>:nth-child(2){padding-right:50px}
.ptoggle{position:absolute;top:-6px;right:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;
  border:1.5px solid var(--ink);border-radius:50%;background:var(--panel);color:var(--ink);cursor:pointer}
.ptoggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .2s ease}
.game.folded .ptoggle{position:static;align-self:center}
.game.folded .ptoggle svg{transform:none}
.ptoggle:hover{background:var(--line)}
@media (max-width:820px){
  .game,.game.folded{grid-template-columns:1fr;gap:22px}
  .game>.panel{order:0}
  .ptoggle{position:static;align-self:center}
  .game:not(.folded) .panel>:nth-child(2){padding-right:0}
  .ptoggle svg{transform:rotate(-90deg)}
  .game.folded .ptoggle svg{transform:rotate(90deg)}
}
.bwrap{width:min(100%,max(300px,calc(100vh - 230px)),720px);padding:0 10px;container-type:inline-size}
@media (max-width:820px){.bwrap{margin:0 auto}}
.tray{display:flex;flex-wrap:wrap;align-items:center;min-height:7.5cqi;gap:0 .4cqi;padding:1.5cqi 0}
.tray .pc{font-size:5.6cqi}
.tray .gap{width:1.8cqi}
.board{position:relative;width:100%;aspect-ratio:1;display:grid;--lt:1.3cqi;container-type:inline-size;border-radius:4px;overflow:hidden;box-shadow:0 0 0 10px var(--frame);margin:10px 0}
.sq{position:relative;border:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center;background:var(--sq-l);cursor:pointer;color:inherit;font:inherit}
.sq.d{background:var(--sq-d)}
.sq.last{background-image:linear-gradient(var(--last),var(--last))}
.sq.sel{box-shadow:inset 0 0 0 .6cqi var(--sel)}
.sq.threat,.sq.d.threat{background-color:#d8362a;box-shadow:inset 0 0 0 .6cqi #7d0f0a;transition:none}
.sq.threat .pc svg{filter:drop-shadow(0 0 .9cqi rgba(255,70,50,.95))}
.sq.dest::after{content:"";position:absolute;width:2.8cqi;height:2.8cqi;border-radius:50%;background:var(--hint);pointer-events:none}
.sq.dest.cap::after{width:8.5cqi;height:8.5cqi;background:transparent;border:.65cqi solid var(--hint)}
.sq:focus-visible{outline:3px solid var(--sel);outline-offset:-3px;z-index:2}
.co{position:absolute;font-size:1.6cqi;font-weight:700;line-height:1;pointer-events:none;color:var(--grid);opacity:.5;z-index:2}
.co.f{right:.5cqi;bottom:.4cqi}.co.r{left:.5cqi;top:.4cqi}
.pc{position:relative;display:inline-block;line-height:1;font-size:8cqi;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans","Apple Symbols",serif;font-variant-emoji:text;pointer-events:none;user-select:none;-webkit-user-select:none}
.pc .fill{color:var(--bp)}
.pc.b .edge{color:var(--bp-edge)}
.pc svg{display:block;width:7.7cqi;height:7.7cqi;overflow:visible}
/* Pieces: --pd the hard outline (and line details), --pf the middle of the body, which fades
   to --pa at its edges (also used for small accents).
   Light: gold outline, white body fading to blue. Dark: blue outline, black body fading to red. */
.pc.w svg{--pf:var(--wp);--pd:var(--wp-edge);--pa:var(--wp-acc)}
.pc.b svg{--pf:var(--bp);--pd:var(--bp-edge);--pa:var(--bp-acc)}
.pc svg .pb .f{fill:var(--pf);stroke:var(--pd);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.pc svg .pb .l{fill:none;stroke:var(--pd);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pc svg .pb .e{fill:var(--pa)}
.pc svg .rg .f,.pc svg .rg .e{fill:#000;stroke:none}
.pc svg .rg .l{fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tray .pc svg{width:5.4cqi;height:5.4cqi}
.mark{position:absolute;inset:7%;width:86%;height:86%;pointer-events:none}
.pc{z-index:2}
.sq::after{z-index:2}
.zodiac{position:relative;z-index:1;pointer-events:none}
.zodiac svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--grid);stroke-opacity:.2;stroke-width:3}
.zodiac .tk{stroke-width:2}
.zodiac svg{stroke-linecap:round;stroke-linejoin:round}
.zodiac .fig{stroke-width:1.8}
.zodiac .land{stroke-width:1.3}
.zodiac .pl{stroke-width:.75}
.zodiac .sign{stroke-width:1.5}
.zodiac .sign circle[r="1.5"],.zodiac .sign circle[r="1.6"]{fill:var(--grid);fill-opacity:.24;stroke:none}
.zodiac .bs{fill:var(--grid);fill-opacity:.24}
.zodiac text{fill:var(--grid);fill-opacity:.24;stroke:none;font-size:30px;text-anchor:middle;dominant-baseline:central;font-family:"Segoe UI Symbol","Noto Sans Symbols","Noto Sans Symbols 2","DejaVu Sans","Apple Symbols",sans-serif;font-variant-emoji:text}
.bline{background:var(--line6);pointer-events:none}
/* The lines and four-pointed stars of light between the squares (drawn by ageio-board.js). */
.starlines{position:absolute;inset:0;z-index:1;pointer-events:none}
.starlines svg{position:absolute;left:0;top:0;overflow:visible}
.starlines .gl{fill:none;stroke:var(--grid);stroke-opacity:.32;stroke-width:1;shape-rendering:crispEdges}
.starlines .gs{fill:var(--grid);filter:drop-shadow(0 0 1.2px var(--grid))}
.pc.w .fill{color:var(--wp)}
.pc .edge{position:absolute;left:0;top:0;color:var(--wp-edge)}
.pc.com::after{content:"";position:absolute;right:-4%;bottom:14%;width:28%;height:28%;border-radius:50%;background:var(--sel);border:.35cqi solid #0d0d0d}
.panel{display:flex;flex-direction:column;gap:22px}
.status{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-weight:700;font-size:1.45rem;line-height:1.2;margin:0}
.status.alert{color:var(--danger)}
.note{color:var(--muted);font-size:.9rem;margin:4px 0 0;min-height:1.35em}
h2{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-weight:500;font-size:1rem;margin:0 0 8px}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button{flex:1;background:transparent;color:var(--ink);border:0;padding:7px 8px;font:inherit;font-size:.95rem;cursor:pointer}
.seg button+button{border-left:1.5px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.row{display:flex;gap:10px}
.sl{display:block;margin-top:12px}
.sl b{font-variant-numeric:tabular-nums}
input[type=range]{display:block;width:100%;accent-color:var(--ink);margin:2px 0 0;height:28px;cursor:pointer}
input[type=range]:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
.act{flex:1;border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);border-radius:8px;padding:9px 6px;font:inherit;font-weight:700;font-size:.95rem;white-space:nowrap;cursor:pointer}
.act:disabled{opacity:.45;cursor:default}
.seg button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
.moves{max-height:210px;overflow:auto;background:var(--panel);border-radius:8px;padding:8px 10px;font-variant-numeric:tabular-nums;font-size:.92rem}
.moves:empty::before{content:"No moves yet.";color:var(--muted)}
.mr{display:grid;grid-template-columns:2.2em 1fr 1fr;gap:6px}
.mr span:first-child{color:var(--muted)}
.mset{color:var(--muted);font-size:.84rem;line-height:1.4;padding:2px 0 6px}
.mr+.mset{padding-top:6px}
.rules{background:var(--panel);border-radius:8px;padding:12px 14px;font-size:.92rem}
.rules ul{margin:0;padding-left:1.1em}
.rules li+li{margin-top:5px}
.rules p{margin:8px 0 0;color:var(--muted)}
.dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--sel);border:1.5px solid #fff;vertical-align:-.05em}
.nav{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.nav a{border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px;color:var(--ink);text-decoration:none;font-size:.95rem}
.nav a:hover{background:var(--panel)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.nav a:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
.nav{align-items:center}
/* The square full-screen button at the end of the page tabs. */
.fsbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;margin:0;padding:0;
  border:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer}
.fsbtn:hover{background:var(--panel)}
.fsbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fsbtn .fs-out,html.fs .fsbtn .fs-in{display:none}
.fsbtn .fs-out .x{stroke-width:2.4}
html.fs .fsbtn svg{width:21px;height:21px}
html.fs .fsbtn .fs-out{display:block}
.rulespage{max-width:62ch}
.rulespage .rules{font-size:1rem;padding:16px 18px}
.sq{transition:background-color .9s ease}
.board{transition:box-shadow .9s ease}
/* A won board takes the winner's colours: white with blue and gold for the light side,
   black with blue and red for the dark side. */
.board.win-light{--sq-l:#f6f4ee;--sq-d:#5b7fc2;--frame:#c99a2e;--line6:#c99a2e;--grid:#b8860b}
.board.win-light .pc.w svg{--pd:#a87908}
.board.win-dark{--sq-l:#10131c;--sq-d:#040405;--frame:#000;--line6:#b3261c;--grid:#ff5a4a}
.pc svg .ray{fill:none;stroke-linecap:round}
.pc.glow svg{filter:drop-shadow(0 0 1cqi rgba(255,220,120,.95))}
.pc.lost svg{--pf:#a4a8ae;--pd:#4d5157;--pa:#71757b}
.pc.w.lost svg{animation:grey-w 1.4s ease}
.pc.b.lost svg{animation:grey-b 1.4s ease}
.pc.risen{animation:rise 1.3s ease}
@keyframes grey-w{from{--pf:#ffffff;--pd:#c08a10;--pa:#2f63c8}}
@keyframes grey-b{from{--pf:#050505;--pd:#4a82ee;--pa:#e53e31}}
@keyframes rise{from{opacity:0;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.sq,.board{transition:none}.pc.risen,.pc.lost svg{animation:none}}

/* Watch page */
[hidden]{display:none!important}
.below{margin-top:6px;display:flex;flex-direction:column;gap:10px}
.below>[hidden]{display:none}
/* The game menu under the board: game buttons, then the status line (what's happening, what the
   computer saw, which game this is, separated by |), then the position buttons. */
.statline{margin:0;text-align:center;font-size:.92rem;line-height:1.45;color:var(--muted);min-height:1.45em}
.statline .part:empty{display:none}
.statline .part:not(:empty)~.part:not(:empty)::before{content:"|";margin:0 .6em;color:var(--muted);font-weight:400}
.statline .status{display:inline;font:inherit;font-weight:700;color:var(--ink);margin:0}
.statline .status.alert{color:var(--danger)}
.below .tbar{margin:-5px 0 0}
.startbtn{display:block;width:100%;padding:13px 10px;font-size:1.1rem;background:var(--ink);color:var(--bg)}
.live{display:flex;flex-direction:column;gap:12px}
.live .row .act{flex:1}
.watch .sq{cursor:default}
.ctrl{display:flex;gap:6px}
.ctrl .act{padding:9px 4px}
.ctrl .ic{flex:0 0 42px;display:flex;align-items:center;justify-content:center}
.ctrl .ic svg{width:17px;height:17px;fill:currentColor}
.tbar{height:4px;border-radius:2px;background:var(--line);margin-top:10px;overflow:hidden}
.tbar span{display:block;height:100%;width:0;background:var(--sel)}
.tbar.off{visibility:hidden}
.histnote{margin:0}
.histnote .act{display:block;width:100%;margin-top:8px}
.moves{position:relative}
.mv{background:none;border:0;color:inherit;font:inherit;text-align:left;padding:0 4px;margin:0 -4px;border-radius:4px;cursor:pointer;justify-self:start}
.mv:hover{background:var(--line)}
.mv.now{background:var(--ink);color:var(--bg)}
.fut{opacity:.45}
.side-h{display:flex;align-items:center;gap:8px}
.side-h svg{width:22px;height:22px;flex:none}
.side-h .pb .f{stroke-width:5}
/* Drop-down menus (the computer engine). */
select.pick{display:block;width:100%;background:var(--panel);color:var(--ink);border:1.5px solid var(--ink);border-radius:10px;padding:7px 34px 7px 12px;font:inherit;font-size:.95rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat}
select.pick:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
select.pick option{background:var(--panel);color:var(--ink)}
.panel .note+.seg{margin-top:10px}
/* Rules page: the piece gallery. */
.pieces-intro{margin:0 0 10px}
.pieces{display:grid;gap:10px}
.pcard{display:flex;align-items:center;gap:14px}
.pimgs{display:flex;flex:none;border-radius:4px;overflow:hidden;box-shadow:0 0 0 3px var(--frame)}
.psq{display:flex;align-items:center;justify-content:center;width:62px;height:62px;background:var(--sq-l)}
.psq.d{background:var(--sq-d)}
.psq .pc svg{width:56px;height:56px}
.pcard h3{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-weight:500;font-size:1rem;margin:0}
.rules .pcard p{margin:2px 0 0;color:var(--muted);font-size:.92rem}
@media (max-width:480px){.psq{width:50px;height:50px}.psq .pc svg{width:45px;height:45px}}
/* Four-way choice (the board view), laid out two by two. */
.seg.four{display:grid;grid-template-columns:1fr 1fr;border-radius:16px}
.seg.four button+button{border-left:0}
.seg.four button:nth-child(even){border-left:1.5px solid var(--ink)}
.seg.four button:nth-child(n+3){border-top:1.5px solid var(--ink)}
/* Turning the board (two-player page): the board turns by --spin while pieces and figures turn back. */
.board{--spin:0deg;transform:rotate(var(--spin))}
.board .pc,.board .zone svg,.board .zodiac .up{transform:rotate(calc(-1 * var(--spin)))}
.board .zodiac .up{transform-box:fill-box;transform-origin:center}
.board .co{transition:opacity .25s ease}
.board.spinning .co{opacity:0}
.board.spinning .sq{transition:none}
/* Full screen (ageio-site.js puts the class fs on the page). On a game page, only the board and
   the trays of captured pieces show. --S is the board's size: as big as fits, leaving room for
   a tray above and below (each about a tenth of the board). */
html.fs .bwrap{position:fixed;inset:0;z-index:100;width:auto;max-width:none;margin:0;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  container-type:normal;--S:min(calc(100vw - 44px),calc((100vh - 56px) / 1.22))}
@supports (height:100dvh){html.fs .bwrap{--S:min(calc(100vw - 44px),calc((100dvh - 56px) / 1.22))}}
html.fs .bwrap .board{width:var(--S);flex:none;--lt:calc(var(--S) * .013)}
html.fs .bwrap .tray{width:var(--S);flex:none;min-height:calc(var(--S) * .075);gap:0 calc(var(--S) * .004);padding:calc(var(--S) * .015) 0}
html.fs .bwrap .tray .pc{font-size:calc(var(--S) * .056)}
html.fs .bwrap .tray .pc svg{width:calc(var(--S) * .054);height:calc(var(--S) * .054)}
html.fs .bwrap .tray .gap{width:calc(var(--S) * .018)}
html.fs.gamepage,html.fs.gamepage body{overflow:hidden}
html:fullscreen{background:var(--bg)}
html::backdrop{background:var(--bg)}
/* The parts that slide in from the edges: the title and tabs from the top, the settings from
   the left, the move buttons from the bottom (watch page). */
html.fs body>.wrap>header{position:fixed;left:0;right:0;top:0;z-index:160;margin:0;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(20px,calc((100vw - 1040px) / 2 + 16px)) 16px;
  background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.45);
  transform:translateY(-102%);transition:transform .22s ease;visibility:hidden}
html.fs.show-top body>.wrap>header{transform:none;visibility:visible}
html.fs body>.wrap>header .top{margin:0}
html.fs .game>.panel{position:fixed;left:0;top:0;bottom:0;z-index:150;width:min(330px,88vw);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px));
  background:var(--bg);border-right:1px solid var(--line);box-shadow:8px 0 28px rgba(0,0,0,.45);
  transform:translateX(-102%);transition:transform .22s ease;visibility:hidden}
html.fs.show-left .game>.panel{transform:none;visibility:visible}
html.fs .game .ptoggle{display:none}
html.fs .game .panel>:nth-child(2){padding-right:0}
html.fs .bwrap>.below{position:fixed;left:50%;bottom:0;z-index:155;width:min(620px,calc(100vw - 24px));margin:0;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border:1px solid var(--line);border-bottom:0;
  border-radius:12px 12px 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.45);
  transform:translate(-50%,104%);transition:transform .22s ease;visibility:hidden}
html.fs.show-bottom .bwrap>.below{transform:translate(-50%,0);visibility:visible}
html.fs .below .live{gap:8px}
@media (prefers-reduced-motion:reduce){html.fs body>.wrap>header,html.fs .game>.panel,html.fs .bwrap>.below{transition:none}}
/* Full screen on the rules and history pages: just the page, with the tabs at the top hidden. */
html.fs:not(.gamepage) body>.wrap{padding-top:34px}
/* The mouse pointer hides while it's left alone. */
html.fs.idle,html.fs.idle .board{cursor:none}
/* Other tabs opened in full screen, each in a frame filling the screen (see ageio-site.js). */
.tabframe{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:300;background:var(--bg);display:block}
html.away,html.away body{overflow:hidden}
html.away body>.wrap,html.away .flash{display:none}
/* The virtues gloss on the captured pieces in the trays: a smaller piece and pedestal. */
.tray .pc.gl svg{width:4.8cqi;height:4.8cqi}
.tray .pc.gl svg.ped{width:7cqi;height:2.1cqi;margin-top:-.2cqi}
html.fs .bwrap .tray .pc.gl svg{width:calc(var(--S) * .048);height:calc(var(--S) * .048)}
html.fs .bwrap .tray .pc.gl svg.ped{width:calc(var(--S) * .07);height:calc(var(--S) * .021);margin-top:calc(var(--S) * -.002)}
/* Full screen on a wide screen: the trays become columns beside the board, so the board can
   use nearly the full height. In the sideways views, each side's tray goes on its own side. */
@media (min-aspect-ratio:13/10){
  html.fs .bwrap{flex-direction:row;gap:calc(var(--S) * .025);--S:min(calc(100vh - 44px),calc((100vw - 60px) / 1.3))}
  @supports (height:100dvh){html.fs .bwrap{--S:min(calc(100dvh - 44px),calc((100vw - 60px) / 1.3))}}
  html.fs .bwrap .tray{width:calc(var(--S) * .125);height:var(--S);min-height:0;padding:0;align-content:center;justify-content:center;gap:calc(var(--S) * .008) calc(var(--S) * .006)}
  html.fs .bwrap .tray .gap{width:100%;height:calc(var(--S) * .012)}
  /* With the virtues gloss, pieces and pedestals are a little slimmer so two still fit side by side. */
  html.fs .bwrap .tray .pc.gl svg{width:calc(var(--S) * .04);height:calc(var(--S) * .04)}
  html.fs .bwrap .tray .pc.gl svg.ped{width:calc(var(--S) * .058);height:calc(var(--S) * .0174)}
  html.fs .bwrap:has(.board[data-rot="1"]) #trayBot,html.fs .bwrap:has(.board[data-rot="3"]) #trayBot{order:-1}
  html.fs .bwrap:has(.board[data-rot="1"]) #trayTop,html.fs .bwrap:has(.board[data-rot="3"]) #trayTop{order:1}
}
/* The symbol flashed in the middle of the screen (pause, play, back, next). */
.flash{position:fixed;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  background:rgba(5,8,18,.62);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:200;opacity:0}
.flash svg{width:64px;height:64px;fill:#eef2ff}
.flash.go{animation:flash .75s ease-out}
@keyframes flash{0%{opacity:0;transform:scale(.75)}15%{opacity:1;transform:scale(1)}55%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){@keyframes flash{0%{opacity:0}15%{opacity:1}60%{opacity:1}100%{opacity:0}}}

/* History page */
.history{max-width:70ch;font-size:1.02rem}
.history .lead{font-size:1.12rem;line-height:1.6;color:var(--ink);background:var(--panel);border-radius:8px;padding:16px 18px;margin:0 0 18px}
.history .toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:.92rem}
.history .toc a,.history a{color:var(--sel)}
.history section{margin-top:30px}
.history h2{font-size:1.45rem;font-weight:700;margin:0 0 10px}
.history h3{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-weight:500;font-size:1.1rem;margin:22px 0 6px}
.history p{margin:0 0 12px}
.history ul{margin:0 0 12px;padding-left:1.2em}
.history li+li{margin-top:6px}
.history .sources{font-size:.92rem;color:var(--muted)}
.tscroll{overflow-x:auto;margin:6px 0 16px}
.htable{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem;background:var(--panel);border-radius:8px;overflow:hidden}
.htable th,.htable td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line)}
.htable th{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-weight:500;color:var(--muted)}
.htable tr:last-child td{border-bottom:0}
.htable td:first-child,.htable td:nth-child(2){white-space:nowrap}
.routes{margin:0 0 12px}
.routes dt{font-family:"Bricolage Grotesque","Atkinson Hyperlegible",sans-serif;font-weight:500;margin-top:14px}
.routes dd{margin:4px 0 0;color:var(--muted)}
/* Watch page: the next-game countdown */
.nextrow,.chk{display:flex;align-items:center;gap:10px;margin-top:4px;cursor:pointer}
.nextrow input,.chk input{width:18px;height:18px;accent-color:var(--ink);margin:0;cursor:pointer}
.fsblock .chk{margin-top:0}
/* The virtues gloss: the piece shrinks a little and stands on a pedestal naming its virtue or vice. */
.pc.gl{display:flex;flex-direction:column;align-items:center}
.pc.gl svg{width:6.1cqi;height:6.1cqi}
.pc.gl svg.ped{width:8.6cqi;height:2.58cqi;margin-top:-.25cqi;overflow:visible}
.pc svg.ped .pf,.pc svg.ped .pt{fill:var(--pf);stroke:var(--pd);stroke-width:1.6;stroke-linejoin:round}
.pc svg.ped .pt{fill:var(--pa)}
.pc svg.ped text{fill:var(--pd);font-family:"Bricolage Grotesque","Atkinson Hyperlegible",system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.2px}
.hmap{margin:16px 0 18px}
.hmap img{display:block;width:100%;max-width:632px;height:auto;border-radius:8px}
.hmap figcaption{margin-top:8px;font-size:.9rem;color:var(--muted)}

/* Positions: the row of position buttons, and the box for typing in a custom position. */
.posrow{margin-top:8px}
.posrow .act,.liverow .act{flex:1}
.posdlg{width:min(560px,calc(100vw - 32px));padding:20px 20px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.posdlg::backdrop{background:rgba(3,6,14,.72)}
.posdlg h2{font-size:1.25rem;font-weight:700;margin:0 0 10px}
.poslbl{display:block;color:var(--muted);font-size:.92rem;margin-bottom:8px}
.posdlg textarea{display:block;width:100%;resize:vertical;min-height:4.6em;background:var(--panel);color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;
  padding:9px 11px;font:.95rem/1.45 ui-monospace,"Cascadia Mono","Consolas","DejaVu Sans Mono",monospace;word-break:break-all}
.posdlg textarea:focus-visible{outline:3px solid var(--sel);outline-offset:2px}
.poserr{color:var(--danger);font-size:.92rem;margin:8px 0 0;min-height:1.35em}
.poshelp{margin:4px 0 14px;font-size:.9rem;color:var(--muted)}
.poshelp summary{cursor:pointer;color:var(--ink)}
.poshelp p{margin:8px 0 0}
.poshelp code{display:block;margin-top:6px;padding:7px 9px;background:var(--panel);border-radius:6px;color:var(--ink);word-break:break-all;font-family:ui-monospace,"Cascadia Mono","Consolas","DejaVu Sans Mono",monospace;font-size:.85rem}
.posdlg .row .act{flex:1}
.act.primary{background:var(--ink);color:var(--bg)}
.history .intro{margin-top:24px}