/* IMPATIENT CHESS · WEB · the look. The mobile game's own tokens (impatient-FinalizingSound.html :root: page, ink, mute, rule, ivory,
   the orange; Fraunces for words, Nimbus/Helvetica for small print), its cards, diamonds, locks and pills, laid out on a 16:9 stage that
   scales as one picture (as the Prologue's): every size below is in design pixels of a 1600x900 stage, through --u. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:block;src:url(assets/fonts/fraunces-roman.woff2) format("woff2");}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400 700;font-display:block;src:url(assets/fonts/fraunces-italic.woff2) format("woff2");}
:root{--page:#e4ddd2;--ink:#2b2d2f;--mute:#5f605a;--rule:rgba(43,45,47,.19);--ivory:#ebe5d8;--card:#ece6da;--hover:#e5ded1;--press:#dcd4c6;--acc:#d9703f;
  --dash:rgba(43,45,47,.35);--sq-lt:#e2dac8;--sq-dk:#d7d0bf;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Nimbus Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --u:calc(100cqw/1600);}
/* THE TABLET, the Prologue's (prologue-finalizingforfirstlaunch/index.html body): a 16:9 stage centred in the window, as large as the window
   allows with a margin, rounded corners, a hairline edge (this game's orange where the Prologue's is gold) and a deep shadow; round it,
   the room: the game's own board blurred and dimmed (assets/backdrop.jpg, baked once by tools/make-backdrop.js, never a live blur).
   The loading screens are the same tablet in the same place. */
:root{--surround:#2a2824;}
html{height:100%;background:var(--surround);}
html::before{content:"";position:fixed;inset:-60px;background:var(--surround) url(assets/backdrop.jpg) center/cover no-repeat;}
body{margin:0;height:100%;overflow:hidden;background:transparent;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;cursor:default;overscroll-behavior:none;}   /* an app, as the Prologue: nothing to highlight, nothing to drag */
img{-webkit-user-drag:none;user-select:none;}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;cursor:text;}
button{font:inherit;color:inherit;}
.frame{position:absolute;inset:0;margin:auto;--m:clamp(12px,2.2vh,52px);--tw:min(calc(100vw - 2*var(--m)),calc((100vh - 2*var(--m))*16/9));
  width:var(--tw);height:calc(var(--tw)*9/16);border-radius:clamp(8px,.6vw,18px);overflow:hidden;container-type:size;background:var(--page);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 2px rgba(217,112,63,.32),0 30px 80px rgba(0,0,0,.6);}
:focus{outline:none;} :focus-visible{outline:calc(2*var(--u)) solid var(--ink);outline-offset:calc(3*var(--u));}

/* the wordmark: "Impatient" in italic over "Chess" upright, the orange dot (the mobile's .imp-word) */
.word{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--serif);font-weight:700;line-height:.98;letter-spacing:-.01em;color:var(--ink);}
.word .w1{font-style:italic;} .word .w2{font-style:normal;}
.word .dot{display:inline-block;width:.15em;height:.15em;margin-left:.07em;border-radius:50%;background:var(--acc);}

/* THE LOADING SCREENS (the Prologue's rules): #boot first, #loader between screens. The bar is the mobile splash's three stamina bars,
   one fill under a three-part clip, so it fills across them in turn */
.ld{position:fixed;inset:0;background:transparent;}
.ld .ldbg{position:absolute;inset:0;width:100%;height:100%;display:block;}   /* the motion behind the wordmark (boot.js LDB) */
.ld .ldglow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle calc(1200*var(--u)) at 50% 50%,rgba(228,221,210,0) 40%,rgba(228,221,210,.55) 100%),radial-gradient(circle calc(576*var(--u)) at 50% 50%,rgba(228,221,210,.92) 0%,rgba(228,221,210,.55) 55%,rgba(228,221,210,0) 100%);}   /* the paper glow that keeps the wordmark clear, and the edge's soft fade */
.ld .ld-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(40*var(--u));}
.ld .word{font-size:calc(112*var(--u));}
.ld .bars{position:relative;width:calc(300*var(--u));height:calc(13*var(--u));background:rgba(43,45,47,.14);overflow:hidden;
  clip-path:polygon(0% 100%,0.966% 0%,31.648% 0%,30.682% 100%,34.091% 100%,35.057% 0%,65.739% 0%,64.773% 100%,68.182% 100%,69.148% 0%,99.83% 0%,98.864% 100%);}
.ld .bars i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);will-change:transform;}
#boot{z-index:60;transition:opacity .8s ease;} #boot.gone{opacity:0;pointer-events:none;}
#bootFill{animation:btFill 3s cubic-bezier(.3,.62,.34,1) .15s forwards,btCreep 40s 3.15s linear forwards;}
@keyframes btFill{from{transform:scaleX(0);}to{transform:scaleX(.9);}} @keyframes btCreep{from{transform:scaleX(.9);}to{transform:scaleX(.985);}}
#loader{z-index:59;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .32s ease;}
#loader.on{opacity:1;pointer-events:auto;visibility:visible;} #loader.off{visibility:visible;transition-duration:.48s;} #loader.rest{visibility:hidden;}
html.booting #menu{opacity:0;} #menu{transition:opacity .9s ease .1s;}   /* the menu fades in where it stands */
@media (prefers-reduced-motion:reduce){ #bootFill{animation-duration:.01s,40s;} #menu{transition:none;} }

/* THE MENU, the user's A1b (concepts/iw-menu/menu-perms.html ?v=A1b): a dark bar with the wordmark and the links; under it, 48 above and
   below, three columns with no rules: Today (the Daily card the full height), Play online (the two buttons the column's width, Find a match
   the taller; the recent matches under them: each player's name and rating, vs., a chevron, no lines, no time), Play bots (five rows that
   share the height, the title over a quiet line, the rating in its diamond). Every name slot holds the widest legal name (WWWWWWWWWW). */
#menu{position:absolute;inset:0;}
[hidden]{display:none!important;}
.bar{position:absolute;left:0;right:0;top:0;height:calc(84*var(--u));background:var(--ink);display:grid;grid-template-columns:calc(370*var(--u)) calc(650*var(--u)) 1fr;column-gap:calc(48*var(--u));align-items:center;padding:0 calc(56*var(--u));box-sizing:border-box;color:var(--ivory);}
/* the bar keeps the columns under it: the wordmark over Today; the links from Play online's left edge, the icons at its right end; the account at Play bots' right end */
.bc{display:flex;align-items:center;min-width:0;} .bc2{gap:calc(26*var(--u));} .bc2 .ib + .ib{margin-left:calc(-12*var(--u));} .bc3{justify-content:flex-end;gap:calc(12*var(--u));}
.bc > *{flex:none;} .bc > .grow{flex:1;}
.bar .word{flex-direction:row;align-items:baseline;gap:.22em;font-size:calc(34*var(--u));line-height:1;color:var(--ivory);margin-right:calc(18*var(--u));}
.bar .word .dot{margin-left:.04em;}
/* nothing in the bar ever shrinks: the account corner holds the widest legal name (WWWWWWWWWW) beside its button */
.nav{display:inline-flex;align-items:center;gap:calc(8*var(--u));padding:calc(8*var(--u)) 0;border:0;background:none;cursor:pointer;white-space:nowrap;font:italic 600 calc(19*var(--u))/1 var(--serif);color:rgba(235,229,216,.82);}
.nav:hover{color:var(--ivory);}
.nav.tut{color:var(--ivory);} .nav.tut::after{content:"";width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;background:var(--acc);box-shadow:0 0 calc(10*var(--u)) var(--acc);}   /* every pip after its word (the user) */
.nav.tut.glow::after{animation:tutGlow 2.6s ease-in-out infinite;}
@keyframes tutGlow{0%,100%{box-shadow:0 0 calc(4*var(--u)) rgba(217,112,63,.55);}50%{box-shadow:0 0 calc(16*var(--u)) rgba(217,112,63,.95),0 0 0 calc(3*var(--u)) rgba(217,112,63,.30);}}
.nav:not(.glow).tut::after{display:none;}   /* the tutorial opened: no pip */
@media (prefers-reduced-motion:reduce){ .nav.tut.glow::after{animation:none;} }
.pip{display:inline-block;width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:var(--acc);}
.cnt{font:700 calc(11*var(--u))/1 var(--sans);font-style:normal;background:var(--acc);color:var(--ink);border-radius:999px;padding:calc(3*var(--u)) calc(7*var(--u));}
.grow{flex:1;}
/* the live count, on the Play online label: the label's own small capitals, the number in ink, its dot after */
.lab .live{display:inline-flex;align-items:center;gap:calc(7*var(--u));white-space:nowrap;} .lab .live b{color:var(--ink);font-weight:700;} .lab .live::after{content:"";width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:var(--acc);}
.ib{flex:none;width:calc(42*var(--u));height:calc(42*var(--u));display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:calc(4*var(--u));background:none;cursor:pointer;
  box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgba(235,229,216,.28);color:var(--ivory);text-decoration:none;} .ib:hover{background:rgba(235,229,216,.10);}
.ib svg{width:calc(20*var(--u));height:calc(20*var(--u));display:block;}
.ib .off{display:none;} .ib.muted .on{display:none;} .ib.muted .off{display:inline;}
.ib .fsout{display:none;} .ib.full .fsin{display:none;} .ib.full .fsout{display:inline;}   /* full screen: the corners turn in, the way back to the normal size */   /* the speaker shows the mute, in the menu as in the battle */
.prof{height:calc(42*var(--u));display:inline-flex;align-items:center;gap:calc(10*var(--u));padding:0 calc(16*var(--u));border:0;border-radius:calc(4*var(--u));cursor:pointer;white-space:nowrap;
  background:rgba(235,229,216,.10);box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgba(235,229,216,.28);font:italic 700 calc(18*var(--u))/1 var(--serif);color:var(--ivory);}
.prof:hover{background:rgba(235,229,216,.16);}
.prof .lock{display:none;width:calc(15*var(--u));height:calc(15*var(--u));color:rgba(235,229,216,.65);} .prof.locked .lock{display:block;}   /* a guest's profile is locked (the Prologue) */
/* SIGN UP / LOG IN for a guest, LOG OUT in its place once signed in (the Prologue's corner) */
.sign{height:calc(42*var(--u));padding:0 calc(16*var(--u));border:0;border-radius:calc(4*var(--u));cursor:pointer;white-space:nowrap;background:var(--ivory);color:var(--ink);font:italic 700 calc(17*var(--u))/1 var(--serif);}
.sign:hover{background:#fff8ea;} .sign:active{background:var(--press);}
.sign.quiet{background:none;box-shadow:inset 0 0 0 calc(1.5*var(--u)) rgba(235,229,216,.28);color:var(--ivory);} .sign.quiet:hover{background:rgba(235,229,216,.10);}
.under{position:absolute;left:calc(56*var(--u));right:calc(56*var(--u));top:calc(132*var(--u));bottom:calc(48*var(--u));display:grid;grid-template-columns:calc(370*var(--u)) calc(650*var(--u)) 1fr;column-gap:calc(48*var(--u));}
.col{display:flex;flex-direction:column;min-width:0;min-height:0;}
.lab{flex:none;display:flex;justify-content:space-between;margin:0 0 calc(12*var(--u));font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.sp{flex:none;height:calc(32*var(--u));}
.rows{display:flex;flex-direction:column;gap:calc(12*var(--u));} .rows.fill{flex:1;min-height:0;} .rows.fill > .row{flex:1;height:auto;}
/* the right column's two groups (PUZZLES over SPECIAL MODES), sharing its height */
.grp{flex:1;min-height:0;display:flex;flex-direction:column;} .grp + .grp{margin-top:calc(32*var(--u));}
.grp .row b{font-size:calc(30*var(--u));} .grp .row .dia{width:calc(44*var(--u));height:calc(44*var(--u));} .grp .row .dia i{font-size:calc(19*var(--u));}
/* a row is a button card: the mobile's .m8-row (ivory fill, a firm ink edge, the title in Fraunces italic) */
.row{position:relative;flex:none;display:flex;align-items:center;gap:calc(12*var(--u));width:100%;height:calc(66*var(--u));padding:0 calc(22*var(--u));box-sizing:border-box;
  border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(4*var(--u));background:var(--card);color:var(--ink);cursor:pointer;text-align:left;}
.row:hover{background:var(--hover);} .row:active{background:var(--press);}
.row b{font:italic 700 calc(26*var(--u))/1 var(--serif);white-space:nowrap;}
.row.hero{height:calc(112*var(--u));} .row.hero b{font-size:calc(34*var(--u));}
.row.soon{border-style:dashed;border-color:var(--dash);background:transparent;cursor:default;} .row.soon:hover,.row.soon:active{background:transparent;} .row.soon b{color:var(--mute);}
.row .ch{margin-left:auto;font:400 calc(30*var(--u))/1 var(--sans);color:var(--mute);}
.tagp{flex:none;font:700 calc(11*var(--u))/1 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:calc(5*var(--u)) calc(9*var(--u));border-radius:999px;background:var(--ink);color:var(--ivory);white-space:nowrap;}
.row.soon .tagp{background:var(--mute);}
.dia{flex:none;margin-left:auto;margin-right:calc(6*var(--u));width:calc(36*var(--u));height:calc(36*var(--u));box-sizing:border-box;border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(2*var(--u));
  transform:rotate(45deg);display:flex;align-items:center;justify-content:center;}
.dia i{display:block;transform:rotate(-45deg);font:italic 700 calc(16*var(--u))/1 var(--serif);font-style:italic;}
.soon .dia{border-style:dashed;border-color:var(--dash);} .soon .dia i{color:var(--mute);}
.rate{margin-left:auto;display:inline-flex;align-items:baseline;gap:calc(8*var(--u));white-space:nowrap;font:700 calc(11.5*var(--u))/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.rate i{font:italic 700 calc(22*var(--u))/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);}
.rate .prov{font:italic 700 calc(16*var(--u))/1 var(--serif);color:var(--mute);margin-left:calc(-5*var(--u));letter-spacing:0;}
/* a tall row: the title over a quiet second line (the mode's own facts), the rating on the right */
.row.t2 .tt{display:flex;flex-direction:column;align-items:flex-start;gap:calc(10*var(--u));min-width:0;}
.row.t2 b{font-size:calc(30*var(--u));} .row.t2 .sub{display:flex;align-items:center;gap:calc(10*var(--u));white-space:nowrap;font:400 calc(15*var(--u))/1 var(--sans);color:var(--mute);}
.row.t2 .sub:empty{display:none;}
.row.t2 .dia{width:calc(44*var(--u));height:calc(44*var(--u));} .row.t2 .dia i{font-size:calc(19*var(--u));}
/* Play friend beside Play bot, each half the column */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(12*var(--u));} .pair > .row{width:auto;}
.pair .car{margin-right:calc(8*var(--u));} .pair .car .lvl{min-width:calc(62*var(--u));} .pair .car .arr{width:calc(30*var(--u));}
/* Play bot: the row plays the level shown; the arrows change it (the Prologue's PLAY A BOT carousel) */
.row.carousel{padding:0;cursor:default;} .row.carousel:hover,.row.carousel:active{background:var(--card);}
.row.carousel .rowbtn{position:absolute;inset:0;display:flex;align-items:center;padding:0 calc(22*var(--u));border:0;border-radius:inherit;background:transparent;cursor:pointer;text-align:left;color:inherit;}
.row.carousel .rowbtn:hover{background:var(--hover);} .row.carousel .rowbtn:active{background:var(--press);}
.car{position:relative;z-index:1;margin-left:auto;margin-right:calc(12*var(--u));display:inline-flex;align-items:center;}
.car .lvl{min-width:calc(64*var(--u));text-align:center;font:700 calc(11.5*var(--u))/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);pointer-events:none;}   /* the level is the row's value: the grey caps of RATING on Find a match */
.car .arr{width:calc(36*var(--u));height:calc(36*var(--u));display:flex;align-items:center;justify-content:center;border:0;border-radius:calc(4*var(--u));background:transparent;cursor:pointer;color:var(--mute);}
.car .arr svg{width:calc(7*var(--u));height:calc(9*var(--u));display:block;}
.car .arr:hover{background:rgba(43,45,47,.08);color:var(--ink);} .car .arr:disabled{opacity:.28;cursor:default;background:transparent;}
/* the Daily Challenge: a card the column's full height, today's board drawn as the battle draws it */
.daily{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(14*var(--u));padding:calc(30*var(--u));box-sizing:border-box;border:calc(1.5*var(--u)) solid var(--ink);
  border-radius:calc(6*var(--u));background:var(--card);color:var(--ink);cursor:pointer;text-align:left;}
.daily:hover{background:var(--hover);} .daily:active{background:var(--press);}
.ddate{font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.dk{font:italic 700 calc(40*var(--u))/1.02 var(--serif);white-space:nowrap;}
.dname{font:italic 500 calc(22*var(--u))/1.1 var(--serif);color:var(--mute);}
.bwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.dboard{display:block;width:calc(306*var(--u));height:calc(306*var(--u));}
.dstat{display:flex;align-items:center;gap:calc(16*var(--u));white-space:nowrap;font:400 calc(15*var(--u))/1 var(--sans);color:var(--mute);}
.dstat b{font:italic 700 calc(18*var(--u))/1 var(--serif);color:var(--ink);}
.tries{display:inline-flex;gap:calc(9*var(--u));align-items:center;}
.tries i{display:block;width:calc(11*var(--u));height:calc(11*var(--u));transform:rotate(45deg);box-sizing:border-box;border:calc(1.6*var(--u)) solid var(--ink);border-radius:calc(1.5*var(--u));opacity:.3;}
.tries i.lost{background:var(--ink);opacity:1;} .tries i.won{background:var(--acc);border-color:var(--acc);opacity:1;}
.stamp{position:absolute;right:calc(-12*var(--u));top:calc(-12*var(--u));padding:calc(7*var(--u)) calc(11*var(--u));border-radius:calc(4*var(--u));background:var(--acc);color:var(--ivory);
  font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(4deg);}
/* recent matches: a row a match (one press: watch it), no lines, no time, no result */
.recent{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.rrow{flex:none;display:flex;align-items:center;gap:calc(9*var(--u));height:calc(46*var(--u));padding:0 calc(8*var(--u));box-sizing:border-box;border:0;border-radius:calc(4*var(--u));background:transparent;cursor:pointer;text-align:left;white-space:nowrap;
  font:400 calc(15*var(--u))/1 var(--sans);color:var(--mute);}
.rrow:hover{background:rgba(43,45,47,.05);} .rrow:active{background:rgba(43,45,47,.09);}
.rrow .nm{font:italic 700 calc(18*var(--u))/1 var(--serif);color:var(--ink);} .rrow .rt{font:400 calc(13*var(--u))/1 var(--sans);color:var(--mute);}
.rrow .go{margin-left:auto;font:400 calc(26*var(--u))/1 var(--sans);color:var(--mute);}
.recent .empty{height:calc(46*var(--u));display:flex;align-items:center;padding:0 calc(8*var(--u));font:400 calc(15*var(--u))/1 var(--sans);color:var(--mute);}
.lnk{padding:calc(6*var(--u)) calc(14*var(--u));border:0;background:none;cursor:pointer;text-decoration:underline;text-underline-offset:calc(4*var(--u));text-decoration-thickness:calc(1.2*var(--u));
  font:400 calc(15*var(--u))/1 var(--sans);color:var(--mute);}
.lnk:hover{color:var(--ink);}

/* THE BATTLE: the board, its header and rails are drawn on the canvas over the whole stage (view.js); the pause card is the menu's own parts */
#game{position:absolute;inset:0;}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default;}

/* THE RESULT PAGE, the mobile's (.page.e8, impatient-FinalizingSound.html): one column the mobile's own sizes x1.15 (--e is its pixel on this
   stage), centred on the paper over the whole stage; the armies' strips span the column as they span the phone's board */
.res{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;background:var(--page);animation:resIn .15s linear;}
@keyframes resIn{from{opacity:0;}to{opacity:1;}}
.e8{--e:calc(1.15*var(--u));width:calc(368*var(--e));height:100%;box-sizing:border-box;padding:calc(40*var(--e)) 0 calc(24*var(--e));display:flex;flex-direction:column;align-items:stretch;}
.e8 > *{flex:none;}
.e8 .lbl{margin:0;text-align:center;font:700 calc(11*var(--e))/calc(14*var(--e)) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.e8 h2{margin:calc(6*var(--e)) 0 0;text-align:center;white-space:nowrap;font:italic 700 calc(46*var(--e))/calc(52*var(--e)) var(--serif);color:var(--ink);}
.e8 h2 .dotc{color:var(--acc);}
.e8-climb{margin-top:calc(16*var(--e));display:flex;justify-content:center;align-items:center;}
.e8-dia{position:relative;width:calc(64*var(--e));height:calc(64*var(--e));display:flex;align-items:center;justify-content:center;}
.e8-dia::before{content:"";position:absolute;inset:calc(9*var(--e));box-sizing:border-box;border:calc(2*var(--e)) solid var(--ink);transform:rotate(45deg);background:var(--page);}
.e8-dia.new::before{background:var(--ink);}
.e8-dia b{position:relative;font:italic 700 calc(18*var(--e))/1 var(--serif);color:var(--ink);} .e8-dia.new b{color:var(--ivory);}
.e8-arrow{position:relative;width:calc(104*var(--e));height:calc(54*var(--e));}
.e8-arrow::before{content:"";position:absolute;left:calc(8*var(--e));right:calc(12*var(--e));top:calc(26*var(--e));height:calc(2*var(--e));background:var(--ink);transform-origin:0 50%;}
.e8-arrow::after{content:"";position:absolute;right:calc(8*var(--e));top:calc(21*var(--e));border-left:calc(10*var(--e)) solid var(--ink);border-top:calc(6*var(--e)) solid transparent;border-bottom:calc(6*var(--e)) solid transparent;}
.e8-arrow i{position:absolute;top:calc(14*var(--e));left:50%;transform:translateX(-50%);padding:calc(3*var(--e)) calc(9*var(--e));border-radius:999px;background:var(--acc);color:var(--ivory);
  font:italic 700 calc(15*var(--e))/calc(20*var(--e)) var(--serif);white-space:nowrap;opacity:0;}
.e8-arrow i.down{background:var(--ink);} .e8-arrow i.in{opacity:1;animation:rsPill .24s ease-out;}
@keyframes rsPill{0%{transform:translateX(-50%) scale(.6);}60%{transform:translateX(-50%) scale(1.15);}100%{transform:translateX(-50%);}}
.e8-army{margin-top:calc(18*var(--e));} .e8.noclimb .e8-army{margin-top:calc(26*var(--e));}
.e8-strip{display:grid;grid-template-columns:repeat(8,1fr);} .e8-gap{height:calc(10*var(--e));}
.e8-strip i{position:relative;display:block;aspect-ratio:1;background:var(--sq-lt);} .e8-strip i.dk{background:var(--sq-dk);}
.e8-strip img{position:absolute;inset:6%;width:88%;height:88%;display:block;} .e8-strip i.dead img{opacity:.28;}
.e8-strip svg{position:absolute;inset:18%;width:64%;height:64%;opacity:0;transition:opacity .14s;} .e8-army.xs svg{opacity:1;}
.e8-strip svg path{fill:none;stroke-width:1.3;stroke-linecap:round;}
.e8-rows{margin-top:calc(10*var(--e));}
.e8-rows .r{display:flex;justify-content:space-between;align-items:baseline;padding:calc(11*var(--e)) 0;border-top:1px solid var(--rule);font:400 calc(15*var(--e))/calc(20*var(--e)) var(--sans);color:var(--mute);}
.e8-rows .r:last-child{border-bottom:1px solid var(--rule);} .e8-rows .r b{font:italic 700 calc(17*var(--e))/calc(20*var(--e)) var(--serif);color:var(--ink);}
.e8-grow{flex:1;min-height:calc(12*var(--e));}
.e8-btns{display:flex;flex-direction:column;align-items:stretch;}
.e8-main{min-height:calc(54*var(--e));margin-top:calc(12*var(--e));padding:calc(12*var(--e)) calc(16*var(--e));border:0;border-radius:calc(4*var(--e));background:var(--ink);color:var(--ivory);cursor:pointer;
  font:700 calc(16*var(--e))/calc(20*var(--e)) var(--sans);} .e8-main:active{background:#202224;}
.e8-home{min-height:calc(44*var(--e));margin-top:calc(14*var(--e));padding:calc(8*var(--e)) calc(16*var(--e));border:0;background:none;cursor:pointer;font:400 calc(16*var(--e))/calc(22*var(--e)) var(--sans);color:var(--ink);}
/* the reveal (resSeq): each part 6 px low and clear, then in over .16 s; the headline pops; nothing pressable until it has all come */
.e8 .rv{opacity:0;transform:translateY(calc(6*var(--e)));} .e8 .rv.in{opacity:1;transform:none;transition:opacity .16s ease-out,transform .16s ease-out;}
.e8 h2.in{animation:rsPop .22s ease-out;} @keyframes rsPop{from{transform:scale(1.12);}to{transform:none;}}
.e8-arrow.rv.in::before{animation:rsGrow .22s ease-out;} @keyframes rsGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.e8 .e8-btns{pointer-events:none;} .e8.done .e8-btns{pointer-events:auto;}
@media (prefers-reduced-motion:reduce){ .res{animation:none;} .e8 .rv{opacity:1;transform:none;} .e8 h2.in,.e8-arrow.rv.in::before,.e8-arrow i.in{animation:none;} }
.gover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(228,221,210,.80);}
.gcard{display:flex;flex-direction:column;align-items:center;gap:calc(16*var(--u));min-width:calc(440*var(--u));padding:calc(38*var(--u)) calc(50*var(--u)) calc(26*var(--u));box-sizing:border-box;
  background:var(--card);border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(6*var(--u));}
.gcard h2{margin:0 0 calc(4*var(--u));font:italic 700 calc(66*var(--u))/1 var(--serif);color:var(--ink);} .gcard h2 .dotc{color:var(--acc);}
.gcard p{margin:0;font:400 calc(18*var(--u))/1.3 var(--sans);color:var(--mute);} .gcard p:empty{display:none;}
.big{width:100%;height:calc(58*var(--u));border:0;border-radius:calc(4*var(--u));background:var(--ink);color:var(--ivory);font:italic 700 calc(22*var(--u))/1 var(--serif);cursor:pointer;}
.big:hover{background:#3a3d40;} .big:active{background:#1f2123;}

/* THE RIGHT COLUMN, the user's pick (2026-11-02: "menu: use concept 1"; concepts/iw-menu/right-1.css) */
/* RIGHT COLUMN · CONCEPT 1, "SECOND INK": a newspaper's second colour, used as a printer would. The page is paper with a whisper of grain;
   Promotion wears an ochre spot ink (the crown a pawn reaches; the board's gold band), Survival a slate teal (the night its spectres come
   in; the board's teal band): each mode's pill and diamond printed in its ink, and a halftone screen of it fading in from the card's right
   edge. Ranked drops to the height of Find a match; the Discord line closes the column at its foot. */
:root{--spot-promo:#a3812f;--spot-surv:#4e7a74;}
/* the page: paper grain at a whisper, under the three columns (the bar untouched) */
#menu::before{content:"";position:absolute;left:0;right:0;top:calc(84*var(--u));bottom:0;pointer-events:none;opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .18 0 0 0 0 .18 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/240px 240px;}
/* the column: no longer stretched */
.under > .col:last-child .grp,.under > .col:last-child .rows.fill{flex:none;}
.under > .col:last-child .rows.fill > .row{flex:none;height:calc(112*var(--u));}
/* the two modes in their inks */
#mEvo{--spot:var(--spot-promo);} #mSurv{--spot:var(--spot-surv);}
#mEvo,#mSurv{overflow:hidden;}
#mEvo::before,#mSurv::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle,var(--spot) 0 calc(1.05*var(--u)),transparent calc(1.3*var(--u))) 0 0/calc(7*var(--u)) calc(7*var(--u));opacity:.42;
  -webkit-mask-image:linear-gradient(to left,#000 0,rgba(0,0,0,.55) 22%,transparent 58%);mask-image:linear-gradient(to left,#000 0,rgba(0,0,0,.55) 22%,transparent 58%);}
#mEvo > *,#mSurv > *{position:relative;}
#mEvo .tagp,#mSurv .tagp{background:var(--spot);color:var(--ivory);}
#mEvo .dia,#mSurv .dia{border-color:var(--spot);background:var(--card);} #mEvo .dia i,#mSurv .dia i{color:var(--spot);}
/* the Discord line, at the column's foot */
.dnote{flex:none;margin:calc(32*var(--u)) 0 0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:calc(7*var(--u));padding:0 calc(2*var(--u));}   /* under the Daily card, which gives up its slack for it (the tips concept 2b, the user's pick) */
.dnote .dl{font:italic 700 calc(22*var(--u))/1.1 var(--serif);color:var(--ink);}
.dnote a{color:inherit;text-decoration:underline;text-decoration-thickness:calc(1.6*var(--u));text-underline-offset:calc(4*var(--u));text-decoration-color:var(--acc);}
.dnote a:hover{color:var(--acc);}
.dnote .ds{font:400 calc(15*var(--u))/1.35 var(--sans);color:var(--mute);}

/* FREEPLAY's rank picker: the mobile's .fp, at the result page's scale (--e, its pixel x1.15) */
#freePg{z-index:6;} .fp .fph{margin:0;text-align:left;font:300 calc(29*var(--e))/calc(35*var(--e)) var(--serif);color:var(--ink);}
.fp .fpd{margin:calc(4*var(--e)) 0 0;font:400 calc(15*var(--e))/calc(21*var(--e)) var(--sans);color:var(--mute);}
.fp-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(28*var(--e)) 0 calc(20*var(--e));}
.fp-pick{display:flex;align-items:center;justify-content:center;gap:calc(14*var(--e));}
.fp-big{position:relative;flex:none;width:calc(128*var(--e));height:calc(128*var(--e));}
.fp-big::before{content:"";position:absolute;inset:calc(19*var(--e));box-sizing:border-box;border:calc(2.4*var(--e)) solid var(--ink);transform:rotate(45deg);background:var(--page);}
.fp-big b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:italic 700 calc(40*var(--e))/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;}
.fp-step{position:relative;flex:none;width:calc(48*var(--e));height:calc(48*var(--e));padding:0;border:0;border-radius:calc(4*var(--e));background:transparent;cursor:pointer;}
.fp-step:hover{background:rgba(43,45,47,.06);}
.fp-step::before,.fp-step::after{content:"";position:absolute;left:50%;top:50%;width:calc(18*var(--e));height:calc(2*var(--e));margin:calc(-1*var(--e)) 0 0 calc(-9*var(--e));border-radius:1px;background:var(--ink);}
.fp-step::after{display:none;} .fp-step.up::after{display:block;transform:rotate(90deg);}
.fp-slide{margin-top:calc(40*var(--e));}
#fpRange{--p:100%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:calc(44*var(--e));margin:0;padding:0;background:transparent;cursor:pointer;}
#fpRange::-webkit-slider-runnable-track{height:calc(2*var(--e));border-radius:1px;background:linear-gradient(to right,var(--ink) 0 var(--p),var(--rule) var(--p) 100%);}
#fpRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:calc(26*var(--e));height:calc(26*var(--e));margin-top:calc(-12*var(--e));border:0;background:var(--ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
#fpRange::-moz-range-track{height:calc(2*var(--e));border:0;background:var(--rule);} #fpRange::-moz-range-progress{height:calc(2*var(--e));background:var(--ink);}
#fpRange::-moz-range-thumb{width:calc(26*var(--e));height:calc(26*var(--e));border:0;border-radius:0;background:var(--ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.fp-ends{display:flex;justify-content:space-between;margin-top:calc(4*var(--e));}
.fp-ends span{display:flex;flex-direction:column;gap:calc(3*var(--e));font:700 calc(10.5*var(--e))/calc(14*var(--e)) var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.fp-ends span:last-child{align-items:flex-end;} .fp-ends i{font:italic 700 calc(17*var(--e))/calc(20*var(--e)) var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);}
.fp-none{margin:calc(28*var(--e)) 0 0;font:400 calc(15*var(--e))/calc(21*var(--e)) var(--sans);color:var(--mute);text-align:center;}
.fp .e8-home{align-self:center;}

/* THE TIP at the right column's foot (the Prologue's menu tip, in print): the label ruled off to the column's edge, the tip in the serif's
   italic with an arrow after its last word (a no-break space keeps the arrow off a line of its own); no box and no fill, so it never reads
   as a mode. All of it is one button: a press turns it. It keeps two lines' height so a short tip never moves what is above it */
.tipbox{flex:none;display:block;width:100%;margin:auto 0 0;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
.tipbox .tk{display:flex;align-items:center;gap:calc(14*var(--u));font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.tipbox .tk::after{content:"";flex:1;height:1px;background:var(--rule);}
.tipbox .tq{display:block;margin-top:calc(12*var(--u));min-height:calc(2*1.3*20*var(--u));font:italic 500 calc(20*var(--u))/1.3 var(--serif);color:var(--ink);transition:opacity .16s ease;}
.tipbox .nobr{white-space:nowrap;} .tipbox .tq.out{opacity:0;} .tipbox .tq.slow{transition:opacity .8s ease;}
.tipbox .nx{display:inline-block;width:calc(9*var(--u));height:calc(12*var(--u));margin-left:calc(3*var(--u));fill:var(--acc);transition:transform .15s;}
.tipbox:hover .nx,.tipbox:focus-visible .nx{transform:translateX(calc(2*var(--u)));}
.tipbox:focus{outline:none;} .tipbox:focus-visible{outline:calc(2*var(--u)) solid var(--ink);outline-offset:calc(6*var(--u));border-radius:calc(2*var(--u));}
@media (prefers-reduced-motion:reduce){ .tipbox .tq,.tipbox .nx{transition:none;} }

/* THE DUEL'S RESULT (concept 3, tale of the tape): the result over a face-off, you on the left and them on the right (the name, the rating
   and its change, the army as it began with an X on every piece taken), the counts between them, the buttons at the foot; the menu's own
   parts (the caps labels, the names in the italic, the ratings as on Find a match, the result page's change pill, boxes only for buttons) */
.dres{position:absolute;inset:0;z-index:6;background:var(--page);color:var(--ink);font-family:var(--sans);}
.dres .dr{position:absolute;left:calc(72*var(--u));right:calc(72*var(--u));top:calc(60*var(--u));bottom:calc(56*var(--u));display:flex;flex-direction:column;align-items:stretch;}
.dres .cap{font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap;}
.dres .crown{display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--u));}
.dres .head{margin:0;font:italic 700 calc(96*var(--u))/.95 var(--serif);white-space:nowrap;color:var(--ink);} .dres .head .dotc{display:inline-block;color:var(--acc);}
.dres .how{font:400 calc(16*var(--u))/1.3 var(--sans);color:var(--mute);white-space:nowrap;}
.dres .face{display:grid;grid-template-columns:1fr calc(380*var(--u)) 1fr;align-items:center;margin:auto 0;}
.dres .side{display:flex;flex-direction:column;align-items:flex-start;gap:calc(14*var(--u));} .dres .side.r{align-items:flex-end;text-align:right;}
.dres .nm{font:italic 700 calc(44*var(--u))/1 var(--serif);white-space:nowrap;color:var(--ink);}
.dres .rline{display:flex;align-items:center;gap:calc(10*var(--u));min-height:calc(26*var(--u));}
.dres .rt{font:italic 700 calc(26*var(--u))/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;color:var(--ink);} .dres .rt .prov{font-style:italic;color:var(--mute);}
.dres .chg{display:inline-block;padding:calc(4*var(--u)) calc(9*var(--u));border-radius:999px;font:700 calc(13*var(--u))/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--acc);color:var(--ivory);} .dres .chg.down{background:var(--ink);}
.dres .pcs{--sq:calc(54*var(--u));margin-top:calc(16*var(--u));display:grid;grid-template-columns:repeat(8,var(--sq));}
.dres .pcs i{position:relative;display:block;width:var(--sq);height:var(--sq);background:var(--sq-lt);} .dres .pcs i.dk{background:var(--sq-dk);}
.dres .pcs img{position:absolute;inset:6%;width:88%;height:88%;display:block;} .dres .pcs i.dead img{opacity:.28;}
.dres .pcs svg{position:absolute;inset:18%;width:64%;height:64%;} .dres .pcs svg path{fill:none;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:8;}
.dres .tape{display:flex;flex-direction:column;padding-top:calc(4*var(--u));}
.dres .tr{position:relative;display:grid;grid-template-columns:1fr calc(150*var(--u)) 1fr;align-items:center;height:calc(52*var(--u));}
.dres .tr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);}
.dres .tr:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);}
.dres .tr b{font:italic 700 calc(30*var(--u))/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);} .dres .tr b:first-child{text-align:right;} .dres .tr .cap{text-align:center;}
.dres .foot{display:flex;justify-content:center;}
.dres .btns{display:flex;align-items:center;gap:calc(12*var(--u));}
.dres .bmain,.dres .bsec{height:calc(58*var(--u));padding:0 calc(26*var(--u));border-radius:calc(4*var(--u));font:italic 700 calc(22*var(--u))/1 var(--serif);cursor:pointer;white-space:nowrap;}
.dres .bmain{border:0;background:var(--ink);color:var(--ivory);} .dres .bmain:hover{background:#202224;}
.dres .bsec{border:calc(1.5*var(--u)) solid var(--ink);background:var(--card);color:var(--ink);} .dres .bsec:hover{background:var(--hover);}
.dres .blink{display:inline-flex;align-items:center;gap:calc(8*var(--u));height:calc(58*var(--u));padding:0 calc(10*var(--u));border:0;background:none;color:var(--ink);font:400 calc(17*var(--u))/1 var(--sans);cursor:pointer;white-space:nowrap;}
.dres .blink kbd{font:700 calc(10*var(--u))/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}   /* a hint, not a box: boxes are buttons */
.dres .blink:hover{text-decoration:underline;text-underline-offset:calc(4*var(--u));}
.dres button:focus{outline:none;} .dres button:focus-visible{outline:calc(2*var(--u)) solid var(--ink);outline-offset:calc(4*var(--u));}
/* its entrance (about two seconds; each part waits for its own --d, set by duelShow): the dateline closes up; the headline's words rise
   into place out of their own line and a win's orange stop pops; how it ended; the two sides step in from either edge; the armies' squares
   ripple in and each X draws across what was taken as its piece fades; the counts' rules open from the middle while the numbers run up;
   a ranked change pops; the buttons come up last. .done (a press) shows it all at once; reduced motion, the same */
.dres .ent{animation:drUp .32s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both;}
.dres .lbl{animation:drSpace .44s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both;}
.dres .wm{display:inline-block;overflow:hidden;padding:0 .12em .16em;margin:0 -.12em -.16em;vertical-align:bottom;}
.dres .wm .w{display:inline-block;animation:drRise .58s cubic-bezier(.16,1,.3,1) var(--d,0ms) both;}
.dres .head .dotc{animation:drPop .34s cubic-bezier(.3,1.6,.5,1) var(--dd,0ms) both;}
.dres .side.l{animation:drInL .54s cubic-bezier(.2,.9,.25,1) var(--d,0ms) both;} .dres .side.r{animation:drInR .54s cubic-bezier(.2,.9,.25,1) var(--d,0ms) both;}
.dres .pcs i{animation:drSq .26s cubic-bezier(.2,.9,.3,1.25) var(--d,0ms) both;}
.dres .pcs i.dead img{animation:drDim .28s ease var(--dx,0ms) both;} .dres .pcs i.dead svg path{animation:drX .28s ease-out var(--dx,0ms) both;}
.dres .tr::before,.dres .tr:last-child::after{animation:drRule .38s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both;}
.dres .tr .cap,.dres .tr b{animation:drFade .3s ease var(--d,0ms) both;}   /* a row's words and figures come with its rule (the figures then run up) */
.dres .chg{animation:drPop .3s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both;}
.dres .btns > *{animation:drUp .34s cubic-bezier(.2,.8,.2,1) var(--d,0ms) both;}
.dres.done *:not(.late),.dres.done *::before,.dres.done *::after{animation:none!important;}   /* .late: a ranked change that arrives after the entrance still pops */
@media (prefers-reduced-motion:reduce){ .dres *,.dres *::before,.dres *::after{animation:none!important;} }
@keyframes drUp{from{opacity:0;transform:translateY(calc(10*var(--u)));}}
@keyframes drFade{from{opacity:0;}}
@keyframes drSpace{from{opacity:0;letter-spacing:.6em;}}
@keyframes drRise{from{transform:translateY(112%);}}
@keyframes drPop{0%{transform:scale(0);}62%{transform:scale(1.3);}100%{transform:scale(1);}}
@keyframes drInL{from{opacity:0;transform:translateX(calc(-64*var(--u)));}}
@keyframes drInR{from{opacity:0;transform:translateX(calc(64*var(--u)));}}
@keyframes drSq{from{opacity:0;transform:scale(.5);}}
@keyframes drDim{from{opacity:1;}}
@keyframes drX{from{stroke-dashoffset:8;}}
@keyframes drRule{from{transform:scaleX(0);}}
/* EVERY MODE'S RESULT on the duel's page (2026-11-03, modeShow): an army in its own box (data-cols: the Daily's corners, Promotion's ladder
   and field), one big square (Survival's two), a rung not reached faded, the orange diamond under the best rung, Ranked's rank in its diamond,
   a milestone's outlined pill, the crown's pill (a new best), the Daily's tries and streak, a single piece mode's counts (the word and the
   figure meeting at the middle), a counted headline in even figures */
.dres .pcs[data-cols]{grid-template-columns:repeat(var(--cols),var(--sq));}
.dres .pcs.one{--sq:calc(108*var(--u));}
.dres .pcs i.up img{opacity:.28;}
.dres .pcs .rung{position:absolute;left:50%;bottom:calc(-18*var(--u));width:calc(10*var(--u));height:calc(10*var(--u));margin-left:calc(-5*var(--u));animation:drPop .3s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + 240ms) both;}
.dres .pcs .rung::before{content:"";position:absolute;inset:0;border-radius:calc(1.5*var(--u));background:var(--acc);transform:rotate(45deg);}
.dres .rk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(34*var(--u));height:calc(34*var(--u));margin:0 calc(10*var(--u)) 0 calc(7*var(--u));box-sizing:border-box;border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(2*var(--u));transform:rotate(45deg);}
.dres .rk i{display:block;transform:rotate(-45deg);font:italic 700 calc(17*var(--u))/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);}
.dres .chg.ms{background:none;box-shadow:inset 0 0 0 calc(1.5*var(--u)) var(--acc);color:var(--acc);}
.dres .crown .chg{padding:calc(6*var(--u)) calc(13*var(--u));font-size:calc(14*var(--u));letter-spacing:.04em;}
.dres .rline .tries{gap:calc(11*var(--u));} .dres .rline .tries i{width:calc(14*var(--u));height:calc(14*var(--u));animation:drDia .3s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both;}
.dres .stk{display:inline-flex;align-items:baseline;gap:calc(8*var(--u));margin-left:calc(16*var(--u));} .dres .stk b{font:italic 700 calc(26*var(--u))/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);}
.dres .frm{font:400 calc(16*var(--u))/1 var(--sans);color:var(--mute);white-space:nowrap;}
.dres .tr.one{grid-template-columns:1fr 1fr;} .dres .tr.one .cap{text-align:right;padding-right:calc(16*var(--u));} .dres .tr.one b{text-align:left;padding-left:calc(16*var(--u));}
.dres .head .num{font-variant-numeric:lining-nums tabular-nums;}
@keyframes drDia{0%{transform:rotate(45deg) scale(0);}62%{transform:rotate(45deg) scale(1.3);}100%{transform:rotate(45deg) scale(1);}}

/* the online match's card (the link gone, a rival left, a match that could not count): the pause card's, with a line under its head */
.gcard .gnet{margin:calc(6*var(--u)) 0 calc(18*var(--u));max-width:calc(520*var(--u));font:400 calc(17*var(--u))/1.4 var(--sans);color:var(--mute);text-align:center;}

/* PLAY FRIEND and FIND A MATCH: the Freeplay picker's page; the code in the italic, big; the status under it; a code typed in a line */
#onlinePg{z-index:6;} .ol .ol-mid{align-items:center;gap:calc(16*var(--e));}
.ol-code{min-height:calc(86*var(--e));font:italic 700 calc(78*var(--e))/1 var(--serif);letter-spacing:.06em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;}
.ol-st{margin:0;min-height:calc(21*var(--e));font:400 calc(15*var(--e))/calc(21*var(--e)) var(--sans);color:var(--mute);text-align:center;}
.ol .e8-main{min-width:calc(240*var(--e));}
.ol-join{display:flex;align-items:center;gap:calc(10*var(--e));margin-top:calc(22*var(--e));}
.ol-cap{font:700 calc(11*var(--e))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
#olIn{width:calc(110*var(--e));height:calc(44*var(--e));box-sizing:border-box;padding:0 calc(10*var(--e));border:0;border-bottom:calc(2*var(--e)) solid var(--ink);background:transparent;font:italic 700 calc(26*var(--e))/1 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-align:center;outline:none;}
#olIn:focus{border-bottom-color:var(--acc);}
.ol-go{height:calc(44*var(--e));padding:0 calc(18*var(--e));border:calc(1.5*var(--e)) solid var(--ink);border-radius:calc(4*var(--e));background:var(--card);font:italic 700 calc(18*var(--e))/1 var(--serif);color:var(--ink);cursor:pointer;}
.ol-go:hover{background:var(--hover);}
.ol.search .ol-tiles,.ol.search .ol-join,.ol.invite .ol-tiles,.ol.invite .ol-join{display:none;}
.ol:not(.search) .ol-clock{display:none;}
.ol-clock{font:italic 700 calc(78*var(--e))/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;}
/* PLAY FRIEND'S TWO WAYS IN (the Prologue's tiles): a press copies; the code large in its own */
.ol-tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(12*var(--e));width:100%;}
.ol-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(7*var(--e));min-height:calc(150*var(--e));padding:calc(14*var(--e)) calc(10*var(--e));border:calc(1.5*var(--e)) solid var(--ink);border-radius:calc(6*var(--e));background:var(--card);color:var(--ink);font:inherit;cursor:pointer;}
.ol-tile:hover:not(:disabled){background:var(--hover);}
.ol-tile:disabled{cursor:default;opacity:.55;}
.ol-tile:focus-visible{outline:calc(2*var(--e)) solid var(--acc);outline-offset:calc(2*var(--e));}
.ol-tile svg{width:calc(42*var(--e));height:calc(42*var(--e));fill:currentColor;}
.ol-tile b{font:italic 700 calc(21*var(--e))/1.1 var(--serif);}
.ol-tile span{font:400 calc(13*var(--e))/1.3 var(--sans);color:var(--mute);}
.ol-tile .ol-code{min-height:calc(42*var(--e));font:italic 700 calc(40*var(--e))/1.05 var(--serif);letter-spacing:.06em;color:var(--ink);}
.dres .chg.even{background:var(--mute);}   /* ±0: neither up nor down */

/* THE PHONE PAGE (the Prologue's gate, in this game's paper): the phone's own screen, not the 16:9 stage; the wordmark, two lines, the copy
   button (a box: it is a button), the Discord link as the menu's note has it */
#phone{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:var(--page);color:var(--ink);text-align:center;}
html.phone #phone{display:flex;} html.phone #boot,html.phone #loader,html.phone #stage{display:none!important;}
html.phone,html.phone body{height:auto;min-height:100%;overflow:auto;background:var(--page);} html.phone::before{display:none;}
#phone .ph-mid{max-width:360px;display:flex;flex-direction:column;align-items:center;gap:14px;}
#phone .word{font-size:58px;margin-bottom:12px;text-align:left;}
#phone .ph-t{margin:0;font:italic 700 24px/1.25 var(--serif);text-wrap:balance;}
#phone .ph-s{margin:0;font:400 16px/1.45 var(--sans);color:var(--mute);text-wrap:balance;} #phone .ph-s b{font-weight:700;color:var(--ink);}
#phone .ph-copy{margin-top:12px;height:52px;padding:0 28px;border:0;border-radius:4px;background:var(--ink);color:var(--ivory);font:italic 700 20px/1 var(--serif);cursor:pointer;}
#phone .ph-copy:active{background:#202224;}
#phone .ph-tip{min-height:16px;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc);}
#phone .ph-dc{margin-top:6px;font:italic 700 18px/1.2 var(--serif);color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1.6px;text-underline-offset:4px;}

/* the Daily's result board: the whole board, the mobile's 312 of its pixels wide; the strip it replaces and the gap hidden */
.e8-strip.d8-board{width:min(100%,calc(312*var(--e)));margin:0 auto;} .e8-strip[hidden],.e8-gap[hidden]{display:none;}

/* THE REPLAY BAR: in the side panel's column (x 1048..1488 of the stage's 1600, under the plates), the menu's caps and buttons */
.rpbar{position:absolute;display:flex;flex-direction:column;gap:calc(12*var(--u));z-index:3;}
.rp-cap{font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.rp-track{position:relative;height:calc(18*var(--u));cursor:pointer;} .rp-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--rule);}
.rp-track i{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;background:var(--ink);width:0;}
.rp-time{font:600 calc(14*var(--u))/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);}
.rp-btns{display:flex;align-items:center;gap:calc(10*var(--u));}
.rp-b{height:calc(40*var(--u));padding:0 calc(16*var(--u));border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(4*var(--u));background:var(--card);font:italic 700 calc(17*var(--u))/1 var(--serif);color:var(--ink);cursor:pointer;} .rp-b:hover{background:var(--hover);}
.rp-l{display:inline-flex;align-items:center;gap:calc(6*var(--u));border:0;background:none;font:400 calc(15*var(--u))/1 var(--sans);color:var(--ink);cursor:pointer;} .rp-l kbd{font:700 calc(9*var(--u))/1 var(--sans);letter-spacing:.1em;color:var(--mute);}
.rp-note{font:400 calc(13*var(--u))/1.3 var(--sans);color:var(--acc);}

/* SIGN IN: the online card's page, two big buttons */
#loginPg{z-index:6;} .lg .lg-mid{align-items:center;gap:calc(14*var(--e));} .lg .lg-b{min-width:calc(300*var(--e));}
.lg-dev{border:0;background:none;font:400 calc(14*var(--e))/1 var(--sans);color:var(--mute);text-decoration:underline;cursor:pointer;}
/* THE PROFILE and THE LEADERBOARD: wide pages over the menu (the stage's width), the caps labels, the names in the italic, a ledger of
   figures, rows with no boxes (a box is a button: Watch is a word with an arrow, as the menu's recent matches) */
.wpg{position:absolute;inset:0;z-index:6;background:var(--page);color:var(--ink);font-family:var(--sans);}
.wp{position:absolute;left:calc(96*var(--u));right:calc(96*var(--u));top:calc(56*var(--u));bottom:calc(48*var(--u));display:flex;flex-direction:column;gap:calc(18*var(--u));}
.wp .cap{font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.wp-head{display:flex;flex-direction:column;gap:calc(8*var(--u));} .wp-h{margin:0;font:italic 700 calc(56*var(--u))/1 var(--serif);color:var(--ink);white-space:nowrap;}
.wp-sub{font:400 calc(16*var(--u))/1.3 var(--sans);color:var(--mute);}
.pf-stats{display:flex;gap:calc(44*var(--u));padding:calc(16*var(--u)) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.pf-stats div{display:flex;flex-direction:column;gap:calc(8*var(--u));} .pf-stats b{font:italic 700 calc(34*var(--u))/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--ink);} .pf-stats b i{font-style:italic;color:var(--mute);}
.pf-cap{margin-top:calc(6*var(--u));}
.wp-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;}
.wr{display:grid;grid-template-columns:calc(110*var(--u)) calc(170*var(--u)) 1fr calc(110*var(--u)) calc(90*var(--u)) calc(90*var(--u));align-items:center;min-height:calc(48*var(--u));border-bottom:1px solid var(--rule);font:400 calc(16*var(--u))/1.2 var(--sans);color:var(--ink);}
.wr .d{color:var(--mute);} .wr .k{font:700 calc(11*var(--u))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.wr .o b{font:italic 700 calc(22*var(--u))/1 var(--serif);} .wr .o span{margin-left:calc(8*var(--u));color:var(--mute);font-variant-numeric:tabular-nums;}
.wr .rs{font:italic 700 calc(20*var(--u))/1 var(--serif);} .wr .rs.win{color:var(--acc);}   /* rs: .res is the pages' own class */
.wr .chg{justify-self:start;padding:calc(4*var(--u)) calc(9*var(--u));border-radius:999px;font:700 calc(13*var(--u))/1 var(--sans);background:var(--acc);color:var(--ivory);} .wr .chg.down{background:var(--ink);} .wr .chg.even{background:var(--mute);}
.wr .w{justify-self:end;border:0;background:none;font:400 calc(16*var(--u))/1 var(--sans);color:var(--ink);cursor:pointer;} .wr .w:hover{text-decoration:underline;text-underline-offset:calc(4*var(--u));} .wr .w:disabled{color:var(--mute);cursor:default;text-decoration:none;}
.wp-empty{padding:calc(24*var(--u)) 0;font:400 calc(16*var(--u))/1.4 var(--sans);color:var(--mute);}
.bd-list .wr{grid-template-columns:calc(80*var(--u)) 1fr calc(140*var(--u)) calc(120*var(--u));} .bd-list .wr.me{background:var(--card);} .bd-list .wr .n{font:italic 700 calc(24*var(--u))/1 var(--serif);} .bd-list .wr .rk{font:italic 700 calc(22*var(--u))/1 var(--serif);color:var(--mute);}
.bd-list .wr.h{min-height:calc(30*var(--u));} .bd-list .wr.h span{font:700 calc(11*var(--u))/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.wp-foot{display:flex;align-items:center;gap:calc(18*var(--u));}
.wp-more{height:calc(44*var(--u));padding:0 calc(18*var(--u));border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(4*var(--u));background:var(--card);font:italic 700 calc(18*var(--u))/1 var(--serif);color:var(--ink);cursor:pointer;}
.wp-back{display:inline-flex;align-items:center;gap:calc(8*var(--u));border:0;background:none;font:400 calc(17*var(--u))/1 var(--sans);color:var(--ink);cursor:pointer;} .wp-back kbd{font:700 calc(10*var(--u))/1 var(--sans);letter-spacing:.1em;color:var(--mute);}
#namePg{z-index:7;} #nmIn{width:100%;height:calc(56*var(--e));box-sizing:border-box;padding:0;border:0;border-bottom:calc(2*var(--e)) solid var(--ink);background:transparent;font:italic 700 calc(30*var(--e))/1 var(--serif);color:var(--ink);text-align:center;outline:none;} #nmIn:focus{border-bottom-color:var(--acc);}

/* PROMOTION and SURVIVAL (lane "modes"): the result page's line under the headline (Survival's best), a headline allowed two lines (a
   Promotion loss names who got there first, at its full size), and Survival's best on its menu row */
.e8-sub{margin:calc(6*var(--e)) 0 0;text-align:center;font:400 calc(15*var(--e))/calc(20*var(--e)) var(--sans);color:var(--mute);}
.e8 h2.wrap{white-space:normal;text-wrap:balance;}
#mSurvBest{margin-left:calc(10*var(--u));font:700 calc(11*var(--u))/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;}

/* FRIENDS (lane friends): the page is the profile's (.wpg); a row: the dot, the name in the italic, where they are, what you can do;
   the section heads are the caps labels with their count, and fold. Names up to WWWWWWWWWW at full size everywhere */
.fr-add{display:flex;align-items:center;gap:calc(12*var(--u));}
#frName{width:calc(300*var(--u));height:calc(44*var(--u));box-sizing:border-box;padding:0 calc(6*var(--u));border:0;border-bottom:calc(2*var(--u)) solid var(--ink);background:transparent;font:italic 700 calc(24*var(--u))/1 var(--serif);color:var(--ink);outline:none;}
#frName::placeholder{color:var(--mute);font-weight:400;} #frName:focus{border-bottom-color:var(--acc);}
.fr-msg{font:400 calc(15*var(--u))/1.3 var(--sans);color:var(--mute);} .fr-msg.ok{color:var(--ink);} .fr-msg.bad{color:#b4462f;}
.fr-sec{display:flex;align-items:center;gap:calc(8*var(--u));margin-top:calc(14*var(--u));padding:calc(6*var(--u)) 0;border:0;background:none;font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);cursor:pointer;text-align:left;}
.fr-sec::before{content:"";width:0;height:0;border-left:calc(5*var(--u)) solid transparent;border-right:calc(5*var(--u)) solid transparent;border-top:calc(6*var(--u)) solid var(--mute);transition:transform .15s;} .fr-sec.shut::before{transform:rotate(-90deg);}
.fr-list .wr{grid-template-columns:1fr calc(240*var(--u)) calc(240*var(--u));}
.fr-who{display:flex;align-items:center;gap:calc(12*var(--u));min-width:0;} .fr-who b{font:italic 700 calc(24*var(--u))/1 var(--serif);white-space:nowrap;color:var(--ink);}
.frdot{flex:none;width:calc(9*var(--u));height:calc(9*var(--u));border-radius:50%;box-sizing:border-box;border:calc(1.5*var(--u)) solid var(--rule);} .frdot.on{border:0;background:var(--acc);} .frdot.game{border:0;background:var(--ink);}
.fr-st{color:var(--mute);} .wr.off .fr-who b{color:var(--mute);}
.fr-act{justify-self:end;display:flex;align-items:center;gap:calc(10*var(--u));}
.fr-b{height:calc(36*var(--u));padding:0 calc(14*var(--u));border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(4*var(--u));background:var(--card);font:italic 700 calc(16*var(--u))/1 var(--serif);color:var(--ink);cursor:pointer;} .fr-b:hover{background:var(--hover);}
.fr-b.warn{background:var(--ink);color:var(--ivory);}
.fr-ic{width:calc(36*var(--u));height:calc(36*var(--u));padding:0;display:inline-flex;align-items:center;justify-content:center;border:calc(1.5*var(--u)) solid var(--ink);border-radius:calc(4*var(--u));background:var(--card);cursor:pointer;} .fr-ic:hover{background:var(--hover);}
.fr-ic svg{width:calc(16*var(--u));height:calc(16*var(--u));} .fr-ic path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.fr-lnk{border:0;background:none;padding:0;font:400 calc(15*var(--u))/1 var(--sans);color:var(--ink);cursor:pointer;} .fr-lnk:hover{text-decoration:underline;text-underline-offset:calc(4*var(--u));}
.wr.rm{background:var(--card);} .fr-hint{font:400 calc(13*var(--u))/1 var(--sans);color:var(--mute);}
/* a guest's Friends is locked, as its profile (the same lock, after the word) */
.nav .lock{display:none;width:calc(13*var(--u));height:calc(13*var(--u));color:rgba(235,229,216,.65);} .nav.locked .lock{display:block;}
/* the invite cards: hung from the Friends button under the bar, in the bar's ink (the Prologue's: "under the button, over every menu screen;
   hidden in a game and behind the loader"); the name in the italic, the rail along the foot draining its 30 s */
.fr-cards{position:absolute;left:calc(800*var(--u));top:calc(96*var(--u));z-index:9;display:flex;flex-direction:column;gap:calc(10*var(--u));pointer-events:none;}
.fr-card{pointer-events:auto;position:relative;overflow:hidden;width:calc(360*var(--u));box-sizing:border-box;padding:calc(16*var(--u)) calc(20*var(--u)) calc(18*var(--u));display:flex;flex-direction:column;gap:calc(6*var(--u));
  background:var(--ink);color:var(--ivory);border-radius:calc(6*var(--u));box-shadow:0 calc(14*var(--u)) calc(36*var(--u)) rgba(0,0,0,.32);animation:frIn .22s ease-out both;}
@keyframes frIn{from{opacity:0;transform:translateY(calc(-6*var(--u)));}to{opacity:1;transform:none;}}
.fr-card .cap{font:700 calc(11*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(235,229,216,.6);}
.fr-cn{font:italic 700 calc(28*var(--u))/1.1 var(--serif);white-space:nowrap;color:var(--ivory);} .fr-cs{font:400 calc(15*var(--u))/1.3 var(--sans);color:rgba(235,229,216,.72);}
.fr-rail{position:absolute;left:0;right:0;bottom:0;height:calc(3*var(--u));background:rgba(235,229,216,.14);} .fr-rail i{display:block;height:100%;background:var(--acc);transform-origin:left center;transition:transform .25s linear;}
.fr-cb{display:flex;align-items:center;gap:calc(18*var(--u));margin-top:calc(8*var(--u));}
.fr-acc{height:calc(42*var(--u));padding:0 calc(20*var(--u));border:0;border-radius:calc(4*var(--u));background:var(--ivory);color:var(--ink);font:italic 700 calc(18*var(--u))/1 var(--serif);cursor:pointer;} .fr-acc:hover{background:#fff8ea;} .fr-acc:active{background:var(--press);}
.fr-acc:disabled{opacity:.6;cursor:default;} .fr-card .fr-lnk{color:var(--ivory);} .fr-left{margin-left:auto;font:600 calc(14*var(--u))/1 var(--sans);font-variant-numeric:tabular-nums;color:rgba(235,229,216,.6);}
@media (prefers-reduced-motion:reduce){ .fr-card{animation:none;} .fr-rail i{transition:none;} }
/* THE NEWS (the patch notes): one entry a push, newest first; the version in the italic, the date in the grey, the lines at reading width */
.nw-list{gap:0;}
.nw{display:flex;flex-direction:column;gap:calc(10*var(--u));padding:calc(20*var(--u)) 0 calc(22*var(--u));border-top:1px solid var(--rule);}
.nw:last-child{border-bottom:1px solid var(--rule);}
.nw-h{display:flex;align-items:baseline;gap:calc(16*var(--u));}
.nw-h b{font:italic 700 calc(30*var(--u))/1 var(--serif);color:var(--ink);}
.nw-h span{font:700 calc(12*var(--u))/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.nw ul{margin:0;padding:0 0 0 calc(20*var(--u));max-width:calc(760*var(--u));display:flex;flex-direction:column;gap:calc(6*var(--u));}
.nw li{font:400 calc(18*var(--u))/1.45 var(--sans);color:var(--ink);}
/* THE FOOT: a quiet line under the columns: the links in the grey, ink on hover; the privacy policy and terms at the right end */
.foot{position:absolute;left:calc(56*var(--u));right:calc(56*var(--u));bottom:calc(14*var(--u));display:flex;align-items:center;gap:calc(22*var(--u));font:400 calc(13*var(--u))/1 var(--sans);color:var(--mute);}
.foot .fl{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:none;cursor:pointer;}
.foot .fl:hover,.foot .fl:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:calc(3*var(--u));}
.foot .rt{margin-left:auto;}
.lg-pp{font:400 calc(13*var(--e))/1 var(--sans);color:var(--mute);}
.lg-pp:hover{color:var(--ink);}
/* a newer version on the site: the one filled button among the bar's links, in the accent */
.sign.upd{margin-left:calc(10*var(--u));background:var(--acc);color:var(--ivory);}
.sign.upd:hover{background:#e07d4c;}
/* THE POP-UPS (the user, 2026-11-03: "make it a pop-up that grays out the background and just appears in the middle of the screen"): sign-in,
   the name card and the online card over the menu dimmed, each card as tall as what it holds, its title over its middle */
.res.pop{align-items:center;background:rgba(26,27,29,.55);animation:popFade .16s linear;}
.res.pop > .e8{width:calc(432*var(--e));height:auto;max-height:calc(100% - 48*var(--u));padding:calc(30*var(--e)) calc(32*var(--e)) calc(16*var(--e));background:var(--page);border-radius:calc(6*var(--u));box-shadow:0 calc(18*var(--u)) calc(48*var(--u)) rgba(0,0,0,.35);animation:popIn .18s ease-out;}
.res.pop .fph{text-align:center;}
.res.pop .fp-mid{flex:none;padding:calc(24*var(--e)) 0 calc(8*var(--e));}
.res.pop .e8-home{margin-top:calc(6*var(--e));}
@keyframes popFade{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(calc(8*var(--u))) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .res.pop,.res.pop > .e8{animation:none;} }
/* HOW IT WORKS (the mobile's page: its rules one to a line, between rules) */
.hw-list{flex:1;min-height:0;margin:0;padding:0;list-style:none;}
.hw-list li{padding:calc(18*var(--u)) 0;border-top:1px solid var(--rule);font:400 calc(22*var(--u))/1.3 var(--sans);color:var(--ink);}
.hw-list li:last-child{border-bottom:1px solid var(--rule);}
/* the Leaderboard and the News as pop-ups too (the user, 2026-11-03: "its jarring to do a full screen takeover for those"): the page's column
   in a card over the menu dimmed, as tall as its list (which scrolls past that) */
.wpg.pop{display:flex;align-items:center;justify-content:center;background:rgba(26,27,29,.55);animation:popFade .16s linear;}
.wpg.pop[hidden]{display:none;}
.wpg.pop > .wp{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:calc(900*var(--u));max-height:calc(100% - 80*var(--u));box-sizing:border-box;padding:calc(34*var(--u)) calc(44*var(--u)) calc(22*var(--u));background:var(--page);border-radius:calc(6*var(--u));box-shadow:0 calc(18*var(--u)) calc(48*var(--u)) rgba(0,0,0,.35);animation:popIn .18s ease-out;}
.wpg.pop .wp-h{font-size:calc(44*var(--u));}
.wpg.pop .wp-list{flex:0 1 auto;}
@media (prefers-reduced-motion:reduce){ .wpg.pop,.wpg.pop > .wp{animation:none;} }
/* THE WAY BACK (lane rejoin): MATCH IN PROGRESS and RECONNECTING, the battle's card (.gcard) over the whole stage, above its pages */
.gover.rj{z-index:9;} .gover.rj .gnet{font-variant-numeric:tabular-nums;}