/* ── 01-base.css ── */
/* Wortknall v2: "Spieleschachtel".
   The game as a German board game opened on the table: a sky blue tabletop,
   white printed cards with an ink outline and real cardboard thickness, four
   pawn colours that also carry the grammar (blue der, red die, green das,
   yellow for the fuse and for "go"), and dark wooden letter tiles.

   Everything app.js reads is kept: element ids, the structural classes it
   queries (.bar .fuse .stage .bombwrap .tilerow .field .seg .musicwrap), the
   variables it writes (--vh --barh --beat --ba --bb --bcore --bglow --tyc
   --tys --tyb --n1 --n2) and the variables it names in inline styles
   (--flare --on-flare --good). */

/* ── tokens ──────────────────────────────────────────────────────────── */
:root{
  /* One light theme. "only" also stops Chrome's auto-darkening from
     repainting the table when the phone is in dark mode. */
  color-scheme:only light;
  --table:#CFE2FF;          /* the tabletop */
  --table-hi:#E3EEFF;
  --table-lo:#B3CEFA;
  --card:#FFFFFF;
  --card-2:#F3F7FE;         /* a printed field inside a card */
  --card-3:#E6EEFB;
  --ink:#1D1934;            /* print ink */
  --ink-2:#48436A;          /* 8.9:1 on white */
  --ink-3:#645F84;          /* 6.1:1 on white, 4.9:1 on the table */
  --line:rgba(29,25,52,.14);
  --line-2:rgba(29,25,52,.24);

  --sun:#FFCB2E;  --sun-hi:#FFE07A; --sun-lo:#E7A900; --sun-soft:#FFF3C7;
  --red:#D6372C;  --red-hi:#FF7B6E; --red-lo:#A9261D; --red-soft:#FFE3DF; --red-tx:#B82B23;
  --blue:#2F6BF0; --blue-hi:#6E98FF;--blue-lo:#1E4FC4;--blue-soft:#DEE8FF; --blue-tx:#2459D6;
  --green:#15803F;--green-hi:#4CCB85;--green-lo:#0E5E2D;--green-soft:#D9F4E4;--green-tx:#137A40;
  --gem:#2B66E0;  --gem-tx:#2261C9;

  /* names app.js uses in inline styles and SVG attributes */
  --flare:var(--red); --flare-hi:var(--red-hi); --on-flare:#FFFFFF;
  --good:var(--green);
  --plate:#FFFFFF; --space:#E3EAF7;

  /* article colours: the same three every German course uses */
  --der:var(--blue-tx);  --der-dim:var(--blue-soft);  --der-ink:#FFFFFF; --der-bg:var(--blue);
  --die:var(--red-tx);   --die-dim:var(--red-soft);   --die-ink:#FFFFFF; --die-bg:var(--red);
  --das:var(--green-tx); --das-dim:var(--green-soft); --das-ink:#FFFFFF; --das-bg:var(--green);

  /* the standard bomb skin, repainted for a light table */
  --ba:#FFD84D; --bb:#FF7A1A; --bcore:transparent; --bglow:rgba(255,122,26,.28);

  /* cardboard: an ink outline, a thickness edge, and a soft shadow under it */
  --bw:2px;
  --edge:0 4px 0 var(--ink);
  /* the edge is the cardboard; the two soft layers are the card resting on
     the table, a tight contact shadow and a wide falloff */
  --lift:0 4px 0 var(--ink), 0 9px 8px -5px rgba(29,25,52,.22), 0 22px 30px -14px rgba(29,25,52,.34);
  --lift-sm:0 3px 0 var(--ink), 0 7px 6px -4px rgba(29,25,52,.2), 0 14px 20px -10px rgba(29,25,52,.28);
  --r-lg:22px; --r:16px; --r-sm:12px; --r-xs:9px;

  --gut:clamp(16px,4.6vw,40px);
  --col:680px;
  --dockh:0px;
  --ease:cubic-bezier(.2,.9,.25,1);
  --spring:cubic-bezier(.3,1.5,.5,1);
  --display:'Bricolage Grotesque','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

/* ── base ────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{
  height:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior-y:none;
  background:var(--table);
  scrollbar-color:var(--ink-3) var(--table-hi);
}
body{
  min-height:100%;margin:0;
  background-color:var(--table);
  /* the tabletop: a faint printed grid, the way a game board is ruled */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(29,25,52,.09) 1.2px, transparent 1.6px),
    linear-gradient(180deg, var(--table-hi), var(--table) 340px);
  background-size:22px 22px, 100% 100%;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  caret-color:var(--red);
}
::selection{background:var(--sun);color:var(--ink)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(29,25,52,.28);border-radius:10px;border:2px solid var(--table)}
a{color:var(--blue-tx);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button,a,[role="button"],.fuse,.modecard,.seg button{touch-action:manipulation}
button,[role="button"],.seg,.chips,.shoptabs,.dock{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{font-family:inherit;font-size:16px;color:var(--ink)}
input::placeholder{color:var(--ink-3);opacity:1}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%}
[hidden]{display:none !important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.exp{font-variation-settings:'wdth' 100}
.lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.spacer{flex:1}

/* A card of the game: white, ink outlined, with cardboard under it. The
   original's glass class is kept as the hook and repainted. */
.glass,.panel{
  background:var(--card);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--lift);
}

.wrap{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;
  padding-bottom:calc(var(--dockh) + env(safe-area-inset-bottom,0px))}

/* ── the bar ─────────────────────────────────────────────────────────── */
.bar{
  flex:0 0 auto;position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut) 10px;
  background:color-mix(in srgb, var(--table-hi) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:var(--bw) solid var(--ink);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0;padding:4px 6px 4px 0;border-radius:12px;
  transition:transform .16s var(--ease)}
.brand:active{transform:scale(.96)}
.brand b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variation-settings:'wdth' 88;line-height:1}
.brandmark{flex:0 0 auto;overflow:visible}
.m-ring{fill:#fff;stroke:var(--ink);stroke-width:2}
.m-body{fill:var(--ink)}
.m-shine{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2;stroke-linecap:round}
.m-neck{fill:var(--ink)}
.m-cord{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.m-spark{fill:var(--red)}
.brand:hover .m-spark{fill:var(--sun-lo)}

.icobtn{
  position:relative;flex:0 0 auto;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--card);
  border:var(--bw) solid var(--ink);border-radius:14px;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease,color .15s ease;
}
.icobtn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.icobtn[aria-pressed="true"]{background:var(--sun)}
.icobtn.danger{color:var(--red-tx)}
.icobtn svg{overflow:visible}
@media (hover:hover) and (pointer:fine){
  .icobtn:hover{background:var(--sun-soft)}
  .icobtn.danger:hover{background:var(--red-soft)}
}
.who{overflow:hidden}
.who .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pip,.who .pip{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;
  background:var(--red);border:2px solid var(--ink)}
.who .pip{top:3px;right:3px;width:10px;height:10px}
.shopbtn{width:auto;min-width:42px;padding:0 10px;gap:6px;color:var(--gem-tx)}
.gemn{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.gemn:empty{display:none}

.seg{display:flex;padding:3px;gap:2px;background:var(--card);border:var(--bw) solid var(--ink);
  border-radius:14px;box-shadow:0 3px 0 var(--ink)}
.seg button{min-height:32px;padding:0 9px;border-radius:10px;font-size:12px;font-weight:800;
  color:var(--ink-2);letter-spacing:.02em;transition:background .15s ease,color .15s ease}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg.wide{width:100%}
.seg.wide button{flex:1;min-height:44px;font-size:14px}

/* music */
.musicwrap{position:relative}
#music[aria-pressed="true"]{background:var(--sun)}
.musicpop{position:absolute;top:calc(100% + 10px);right:0;z-index:45;
  width:max-content;max-width:calc(100vw - 20px);
  padding:12px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:var(--lift)}
.mp-row{display:flex;align-items:center;gap:10px}
.musicpop .lbl{font-size:11px}
.musicpop .num{font-size:12px;color:var(--ink-2);min-width:2.4ch;text-align:right}
.musicpop input[type=range]{-webkit-appearance:none;appearance:none;width:120px;height:28px;background:transparent;cursor:pointer}
.musicpop input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:var(--card-3);border:1.5px solid var(--ink)}
.musicpop input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:var(--card-3);border:1.5px solid var(--ink)}
.musicpop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.5px;border-radius:50%;background:var(--sun);border:2px solid var(--ink)}
.musicpop input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--sun);border:2px solid var(--ink)}
.mp-sw,.mp-skip{display:none;align-items:center;gap:8px;min-height:40px;padding:0 12px;
  border:var(--bw) solid var(--ink);border-radius:12px;background:var(--card);
  font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;
  transition:background .15s ease}
.mp-sw.wide{display:flex;width:100%;margin-top:8px}
.mp-skip{display:flex;width:100%;justify-content:center;margin-top:8px}
.mp-sw .off{display:none}
.mp-sw[aria-pressed="true"]{background:var(--card-3);color:var(--ink-2)}
.mp-sw[aria-pressed="true"] .on{display:none}
.mp-sw[aria-pressed="true"] .off{display:inline}
.mp-sep{height:0;margin:10px 0 2px;border-top:1.5px dashed var(--line-2)}
@media (hover:hover) and (pointer:fine){.mp-sw:hover,.mp-skip:hover{background:var(--sun-soft)}}
@media (max-width:699px){
  .musicpop{position:fixed;top:calc(var(--barh,62px) + 8px);right:10px}
  .musicpop #musicVol,.musicpop #musicNum,.musicpop #lMusic{display:none}
  .mp-sw{display:flex;flex:1 1 auto}
  .mp-row .mp-sw{margin:0}
}

/* the header on a phone: the dock carries the places, the bar keeps who you are */
@media (max-width:819px){
  .bar > #boardBtn,.bar > #vocabBtn,.bar > #friendsBtn,.bar > #shopBtn{display:none}
  .bar > .seg{display:none}
}
@media (max-width:360px){.brand b{font-size:17px}}
body.playing .bar > #boardBtn,body.playing .bar > #vocabBtn,body.playing .bar > #friendsBtn,
body.playing .bar > #shopBtn,body.playing .bar > .seg,body.playing .bar > #profileBtn{display:none}
@media (max-width:899px){body.playing .musicwrap{display:none}}

/* ── buttons ─────────────────────────────────────────────────────────── */
/* A button is a token: it sits on its own thickness and goes down when pressed. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;
  font-size:17px;font-weight:800;letter-spacing:-.005em;line-height:1.1;text-align:center;
  color:var(--ink);background:var(--sun);
  border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:0 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{background:var(--card)}
.btn.sm{min-height:42px;padding:0 16px;font-size:14px;border-radius:13px;box-shadow:0 3px 0 var(--ink)}
.btn.sm:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.btn.wide{width:100%;max-width:var(--col)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--sun-hi)}
  .btn.ghost:hover{background:var(--sun-soft)}
}
.link{min-height:44px;padding:0 10px;border-radius:12px;font-size:15px;font-weight:700;
  color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;
  text-decoration-color:var(--line-2);transition:color .15s ease,background .15s ease}
.link:active{background:rgba(29,25,52,.06)}
@media (hover:hover) and (pointer:fine){.link:hover{color:var(--ink);text-decoration-color:var(--ink)}}

/* ── confirmation ────────────────────────────────────────────────────── */
.ask{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(29,25,52,.38);animation:fadeIn .18s ease both}
@media (min-width:560px){.ask{align-items:center}}
.askbox{width:100%;max-width:420px;padding:24px 22px 20px;background:var(--card);
  border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);
  animation:sheetUp .32s var(--spring) both}
.askbox h2,.askbox h3{margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.02em}
.askbox p{margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.askrow{display:flex;gap:10px}
.askrow .btn{flex:1;min-height:52px;font-size:16px}
#askYes{background:var(--red);color:#fff}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
body:not(.motion) .ask,body:not(.motion) .askbox{animation-duration:.01ms}

/* ── home ────────────────────────────────────────────────────────────── */
.home{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:18px;padding:16px var(--gut) 40px}
.home > *{width:100%;max-width:560px}

/* the lid of the box */
.hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:26px 18px 22px;
  background:var(--sun);
  border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--lift);
  isolation:isolate;
}
/* the printed sunburst every game box has behind its title */
.hero::before{content:'';position:absolute;inset:-40%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,.34) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% 46%, #000 12%, transparent 60%);
  mask:radial-gradient(circle at 50% 46%, #000 12%, transparent 60%)}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;z-index:-1;
  background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 20px);opacity:.1}
.lid-flag{position:absolute;top:12px;padding:5px 10px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.01em;line-height:1.1;
  border:var(--bw) solid var(--ink);background:var(--card);white-space:nowrap}
.lid-flag-a{left:12px;transform:rotate(-3deg)}
.lid-flag-b{right:12px;background:var(--ink);color:#fff;transform:rotate(3deg);font-family:var(--mono);font-size:11.5px}
.heromark{width:min(78%,300px);height:auto;margin:14px 0 -2px;overflow:visible;
  transform:scale(calc(1 + var(--beat,0) * .045));transform-origin:50% 60%;
  will-change:transform}
.h-shadow{fill:rgba(29,25,52,.18)}
.h-tile rect{fill:var(--ink);stroke:var(--ink);stroke-width:2}
.h-tile text{fill:#fff;font-family:var(--display);font-weight:800;font-size:30px;text-anchor:middle}
.h-t3 text{font-size:22px}
.h-t1 rect{fill:var(--blue)}.h-t2 rect{fill:var(--red)}.h-t3 rect{fill:var(--green)}
.h-ring-bg{fill:#fff;stroke:var(--ink);stroke-width:3}
.h-ring{stroke:var(--space)}
.h-ring-cut{stroke:#fff}
.h-body{stroke:var(--ink);stroke-width:3}
.h-shine{stroke:rgba(255,255,255,.4)}
.h-neck{fill:var(--ink)}
.h-cord-u{stroke:var(--ink)}
.h-cord{stroke:#E8B86A}
.h-spark{fill:var(--red);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
/* the lit part of the fuse runs round the ring; the circle keeps its own
   rotate attribute, so it moves by dash offset, not by transform */
.heromark .glint{transform-origin:230px 34px;transform-box:view-box}
body.motion .heromark .spin{animation:ringRun 7s linear infinite}
@keyframes ringRun{from{stroke-dashoffset:0}to{stroke-dashoffset:-439.8}}
body.motion .heromark .glint{animation:glint 1.3s ease-in-out infinite}
body.motion .h-t1{animation:tileBob 4.2s ease-in-out infinite}
body.motion .h-t2{animation:tileBob 4.8s ease-in-out -1.6s infinite}
body.motion .h-t3{animation:tileBob 3.6s ease-in-out -.8s infinite}
@keyframes spinRing{to{transform:rotate(360deg)}}
@keyframes glint{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.72) rotate(40deg)}}
@keyframes tileBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
h1{margin:0;font-size:clamp(46px,14vw,86px);font-weight:800;line-height:.9;letter-spacing:-.045em;
  font-variation-settings:'wdth' 82;color:var(--ink)}
.hero h1{text-shadow:0 4px 0 rgba(255,255,255,.55)}
.hero .lede{margin:8px 0 0;font-size:clamp(17px,4.6vw,21px);font-weight:800;letter-spacing:-.01em}
.hero .tagline{margin:2px 0 0;max-width:34ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
.tagline{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:40ch}

/* quick play: two tokens, one of them hot */
.playbox{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  box-shadow:var(--lift);padding:14px}
.pb-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:2px 4px 12px}
.pb-tag{flex:0 0 auto;font-size:21px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pb-say{flex:1 1 150px;margin:0;font-size:13.5px;color:var(--ink-3);text-align:right}
@media (max-width:420px){.pb-say{text-align:left;flex-basis:100%}}
.pb-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pb-opt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  min-height:76px;padding:12px 14px;text-align:left;
  background:var(--blue);color:#fff;
  border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),filter .15s ease}
.pb-opt.hot{background:var(--red)}
.pb-opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.pb-nm{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.pb-sub{font-size:13px;font-weight:600}
@media (hover:hover) and (pointer:fine){.pb-opt:hover{filter:brightness(1.07)}}

/* the three ways in, as pawns */
/* the three ways in are dealt as a hand of cards: fanned from the middle,
   the outer two tilted out and sitting lower. rotate/translate are the
   individual properties, so the press (transform) still works on top */
.mainmodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:4px 4px 8px}
.mainmodes .mm{box-shadow:0 5px 0 var(--ink),0 12px 14px -8px rgba(29,25,52,.3);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease,rotate .3s var(--spring),translate .3s var(--spring)}
.mainmodes .mm:nth-child(1){rotate:-4deg;translate:2px 7px;transform-origin:100% 100%}
.mainmodes .mm:nth-child(2){z-index:1;translate:0 -2px}
.mainmodes .mm:nth-child(3){rotate:4deg;translate:-2px 7px;transform-origin:0 100%}
@media (hover:hover) and (pointer:fine){
  .mainmodes .mm:hover{rotate:0deg;translate:0 -4px;z-index:2}
}
.mainmodes .mm:active{box-shadow:0 1px 0 var(--ink),0 4px 6px -4px rgba(29,25,52,.3)}
body:not(.motion) .mainmodes .mm{transition:none}
.mm{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;
  min-height:98px;padding:12px 6px 12px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:0 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease}
.mm:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.mm-ic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:var(--bw) solid var(--ink);color:var(--ink);background:var(--sun)}
#playMulti .mm-ic{background:var(--blue);color:#fff}
#goRanked .mm-ic{background:var(--red);color:#fff}
.mm-ic svg{width:24px;height:24px}
.mm-nm{font-size:15px;font-weight:800;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.mm:hover{background:var(--sun-soft)}}
#playSolo{background:var(--sun)}
#playSolo .mm-ic{background:var(--card)}
@media (hover:hover) and (pointer:fine){#playSolo:hover{background:var(--sun-hi)}}

/* panels on the home screen */
.panel{overflow:hidden}
.panel h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.phead{display:flex;align-items:baseline;gap:12px;padding:16px 18px 12px;border-bottom:var(--bw) dashed var(--line-2)}
.pbody{padding:16px 18px 18px}

/* mode cards: each practice mode is a card from the deck */
.modecard{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:100%;min-height:88px;padding:14px 16px;text-align:left;
  border-top:var(--bw) dashed var(--line);
  transition:background .15s ease}
.modecard:first-of-type,.phead + .modecard{border-top:0}
.modecard:active{background:var(--card-2)}
@media (hover:hover) and (pointer:fine){
  .modecard:hover{background:var(--card-2)}
  .modecard:hover .mc-go{transform:translateX(3px);background:var(--sun)}
  .modecard:hover .mc-chips i:nth-child(1){transform:translateY(-3px) rotate(-4deg)}
  .modecard:hover .mc-chips i:nth-child(2){transform:translateY(-3px);transition-delay:.04s}
  .modecard:hover .mc-chips i:nth-child(3){transform:translateY(-3px) rotate(4deg);transition-delay:.08s}
}
.mc-chips{display:flex;gap:4px;flex-wrap:nowrap}
.mc-chips i{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:30px;padding:0 7px;border-radius:9px;
  font-style:normal;font-size:13px;font-weight:800;
  color:#fff;background:var(--gb,var(--ink));border:var(--bw) solid var(--ink);
  transition:transform .25s var(--spring)}
.mc-chips i span{color:var(--sun)!important}
.mc-chips.ws i:last-child{background:var(--card);color:var(--ink)}
.mc-chips.vb i:nth-child(1){--gb:#7C5CE0}
.mc-chips.vb i:nth-child(2){--gb:#A04FD0}
.mc-chips.vb i:nth-child(3){--gb:#C23A8F}
.mc-chips.rk i{--gb:var(--ink)}
.mc-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.mc-txt b{font-size:17px;font-weight:800;letter-spacing:-.015em}
.mc-txt span{font-size:14px;line-height:1.4;color:var(--ink-2)}
.mc-go{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;
  border:var(--bw) solid var(--ink);background:var(--card);
  transition:transform .2s var(--ease),background .15s ease}
@media (max-width:480px){
  .modecard{grid-template-columns:1fr auto;gap:8px 12px;padding:14px}
  .mc-chips{grid-column:1}
  .mc-go{grid-column:2;grid-row:1}
  .mc-txt{grid-column:1 / -1}
}
.spectate-entry .modecard{grid-template-columns:auto 1fr auto;min-height:64px}
.spectate-entry .mc-chips{color:var(--ink)}
.spectate-entry .mc-chips svg{width:30px;height:30px}
.spectate-entry .mc-txt b{font-size:17px}
/* one row on every width: the phone layout of the mode cards (chips over the
   text) must not reach this card, which has no chips row */
@media (max-width:480px){
  .spectate-entry .modecard{grid-template-columns:auto 1fr auto}
  .spectate-entry .mc-chips{grid-column:1;grid-row:1}
  .spectate-entry .mc-txt{grid-column:2;grid-row:1}
  .spectate-entry .mc-go{grid-column:3;grid-row:1}
}

/* article chips: colour and word together, never colour alone */
.g-m{--gc:var(--der);--gd:var(--der-dim);--gi:var(--der-ink);--gb:var(--der-bg)}
.g-f{--gc:var(--die);--gd:var(--die-dim);--gi:var(--die-ink);--gb:var(--die-bg)}
.g-n{--gc:var(--das);--gd:var(--das-dim);--gi:var(--das-ink);--gb:var(--das-bg)}

/* the tutorial invite */
.invite{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:12px 16px;text-align:left;
  background:var(--card);border:var(--bw) dashed var(--ink);border-radius:var(--r);
  font-size:15.5px;font-weight:600;color:var(--ink-2);
  transition:background .15s ease,transform .12s var(--ease)}
.invite b{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--sun-lo);
  text-decoration-thickness:3px;text-underline-offset:3px}
.invite svg{flex:0 0 auto;transition:transform .2s var(--ease)}
.invite:active{transform:scale(.99);background:var(--sun-soft)}
@media (hover:hover) and (pointer:fine){.invite:hover{background:var(--sun-soft)}.invite:hover svg{transform:translateX(4px)}}

/* difficulty as dice: one pip for leicht up to four for extreme */
.fuses{display:flex;flex-direction:column;width:100%}
.fuse{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:62px;
  padding:10px 16px;text-align:left;border-top:var(--bw) dashed var(--line);
  transition:background .15s ease}
.fuse:first-child{border-top:0}
.fuse::before{content:'';flex:0 0 38px;width:38px;height:38px;border-radius:10px;
  border:var(--bw) solid var(--ink);background-color:var(--card);
  box-shadow:0 3px 0 var(--ink);
  --pip:radial-gradient(circle, var(--ink) 3.4px, transparent 3.9px);
  background-image:var(--pip);background-repeat:no-repeat;background-size:12px 12px;
  background-position:center;
  transition:background-color .15s ease,transform .25s var(--spring)}
.fuse:nth-child(2)::before{background-image:var(--pip),var(--pip);background-position:25% 25%,75% 75%}
.fuse:nth-child(3)::before{background-image:var(--pip),var(--pip),var(--pip);background-position:22% 22%,center,78% 78%}
.fuse:nth-child(4)::before{background-image:var(--pip),var(--pip),var(--pip),var(--pip);background-position:25% 25%,75% 25%,25% 75%,75% 75%}
.fuse .nm{flex:0 0 auto;min-width:78px;font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.fuse .track{position:relative;flex:1;min-width:0;height:10px;border-radius:10px;background:var(--card-3);border:1.5px solid var(--line-2)}
.fuse .track i{position:absolute;inset:0 auto 0 0;border-radius:10px;background:#E8B86A;transform-origin:left;transition:background .2s ease}
.fuse .track b{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--card);border:var(--bw) solid var(--ink);transform:translate(-50%,-50%);
  transition:background .2s ease}
.fuse .secs{flex:0 0 auto;min-width:44px;text-align:right;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.fuse[aria-pressed="true"]{background:var(--sun-soft)}
.fuse[aria-pressed="true"]::before{background-color:var(--sun);transform:rotate(-8deg)}
.fuse[aria-pressed="true"] .track i{background:linear-gradient(90deg,var(--sun),var(--red))}
.fuse[aria-pressed="true"] .track b{background:var(--red)}
.fuse[aria-pressed="true"] .secs{color:var(--ink)}
.fuse:active::before{transform:translateY(2px) rotate(-8deg)}
@media (hover:hover) and (pointer:fine){.fuse:hover{background:var(--card-2)}.fuse[aria-pressed="true"]:hover{background:var(--sun-soft)}}
@media (max-width:380px){.fuse{gap:10px;padding:10px 12px}.fuse .nm{min-width:66px;font-size:15px}}

/* credits */
.credits{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 4px;text-align:center}
.credits p{margin:0;font-size:14px;color:var(--ink-2)}
.credits a{color:var(--ink);font-weight:800;text-decoration-color:var(--sun-lo);text-decoration-thickness:3px}
.credits .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
.credits .legal a,.newslink{font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:underline;
  text-decoration-color:var(--line-2);text-decoration-thickness:1.5px;min-height:32px;display:inline-flex;align-items:center}
.newslink{position:relative;padding:0}
.newdot{position:absolute;top:4px;right:-9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid var(--ink)}

/* on a phone the lid is smaller, so Solo and Quick Play both sit above the
   fold on an ordinary screen */
@media (max-width:640px){
  .home{gap:14px;padding-top:12px}
  .hero{padding:40px 14px 16px;gap:4px}
  .heromark{width:min(60%,230px);margin:0 0 -4px}
  h1{font-size:clamp(44px,13vw,60px)}
  .hero .lede{margin-top:4px;font-size:17px}
  .hero .tagline{font-size:14px}
  .playbox{padding:12px}
  .pb-opt{min-height:66px}
  .mm{min-height:88px}
}
@media (max-width:640px) and (max-height:740px){
  .hero .tagline{display:none}
  .heromark{width:min(50%,190px)}
}

/* On a phone the practice modes come straight after the ways to start a game,
   so they are not buried under the channel. The markup keeps its order for
   the wide layout and for screen readers; only the stack is rearranged. */
/* The Play button sits straight under the lid on every width: it is the one
   thing the page is for. "Never played before?" comes after it. */
.home > .hero{order:-2}
.home > #playCta{order:-1}

/* the room on a wide screen: the lid on the left, the choices on the right */
/* A wide screen is laid out as the open box on the table, in three bands:
   the lid beside the ways to start a game, the deck of practice modes across
   the whole width, then the open channel beside the dice. Each band is as
   tall as its tallest piece, so neither side is left hanging empty. */
@media (min-width:960px){
  .home{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:24px;row-gap:18px;
    grid-template-rows:auto auto auto auto 1fr auto;
    grid-template-areas:"hero play" "hero invite" "hero album" "hero funk" "hero voice" "credits credits";
    align-items:start;max-width:1180px;margin-inline:auto;width:100%;padding-top:26px}
  .home > *{max-width:none}
  .home > .hero{grid-area:hero;align-self:stretch;justify-content:center;padding:44px 26px 26px}
  .heromark{width:min(74%,300px)}
  .home > #playCta{grid-area:play}
  .home > .album-entry{grid-area:album}
  .home > #startTutor{grid-area:invite}
  .home > #funkBox{grid-area:funk}
  .home > #gvBox{grid-area:voice}
  .home > .credits{grid-area:credits}
  /* the practice modes as a spread of cards, three to a row */
  .panel:has(#goCTest){display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel:has(#goCTest) > .phead{grid-column:1 / -1}
  .panel:has(#goCTest) > .modecard{grid-template-columns:1fr auto;align-content:start;gap:10px 12px;min-height:150px;padding:18px;border-top:0}
  .panel:has(#goCTest) > .modecard .mc-chips{grid-column:1}
  .panel:has(#goCTest) > .modecard .mc-go{grid-column:2;grid-row:1}
  .panel:has(#goCTest) > .modecard .mc-txt{grid-column:1 / -1}
  .panel:has(#goCTest) > .modecard:nth-child(n+5){border-top:var(--bw) dashed var(--line)}
  .panel:has(#goCTest) > .modecard:nth-child(3n),.panel:has(#goCTest) > .modecard:nth-child(3n+1){border-left:var(--bw) dashed var(--line)}
  /* six modes: two full rows of three, so the spread has no hole */
}
@media (min-width:960px) and (max-width:1099px){
  .panel:has(#goCTest){grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel:has(#goCTest) > .modecard:nth-child(n+4){border-top:var(--bw) dashed var(--line)}
  .panel:has(#goCTest) > .modecard:nth-child(2n){border-left:0}
  .panel:has(#goCTest) > .modecard:nth-child(2n+1){border-left:var(--bw) dashed var(--line)}
}

/* ── 02-game.css ── */
/* ── tutorial ────────────────────────────────────────────────────────── */
.tutor{flex:1;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,22px);
  padding:clamp(14px,3vh,30px) var(--gut) 28px}
.tsteps{display:flex;gap:8px;width:100%;max-width:420px}
.tsteps i{flex:1;height:12px;border-radius:12px;background:var(--card);border:var(--bw) solid var(--ink);overflow:hidden}
.tsteps i b{display:block;height:100%;width:100%;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tsteps i.on b{transform:scaleX(1)}
/* each step is a page of the rulebook from the box: printed paper, square
   corners, the top right corner folded down, the step number as a stamp */
.tcopy{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  width:100%;max-width:440px;padding:18px 20px 16px;
  background:#fff;border:var(--bw) solid var(--ink);border-radius:4px 22px 4px 4px;
  box-shadow:var(--lift-sm);rotate:-.8deg;
  background-image:linear-gradient(225deg,var(--card-3) 0 16px,transparent 16px)}
.tcopy::before{content:'';position:absolute;top:-2px;right:-2px;width:24px;height:24px;
  background:linear-gradient(225deg,var(--table) 0 50%,transparent 50%);border-radius:0 22px 0 0}
.tcopy::after{content:'';position:absolute;left:16px;right:16px;bottom:8px;border-top:1.5px dashed var(--line-2)}
.tcopy .lbl{align-self:flex-start;padding:3px 9px;border-radius:999px;color:#fff;background:var(--ink);font-size:11.5px;rotate:-2deg}
.tcopy p{padding-bottom:6px}
.tcopy h2{margin:0;font-size:clamp(24px,6vw,32px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.tcopy p{margin:0;min-height:44px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.tcopy p em{font-style:normal;font-weight:800;color:var(--ink);background:var(--sun);padding:0 5px;border-radius:6px}
.tcopy p.okay{color:var(--green-tx);font-weight:700}
#tOutro .btn{min-width:240px}

/* ── playing screens ─────────────────────────────────────────────────── */
.game{flex:1;display:flex;flex-direction:column;min-height:0}
.hud{display:flex;align-items:center;gap:10px;padding:10px var(--gut);
  border-bottom:var(--bw) solid var(--ink);background:color-mix(in srgb,var(--table-hi) 70%,transparent)}
.lifewrap{display:flex;align-items:center;gap:8px}
.lifewrap .lbl{display:none}
.lives{display:flex;gap:5px;align-items:center}
/* lives are hearts printed on round tokens */
.life{position:relative;display:block;width:30px;height:30px;border-radius:50%;
  background:var(--red);border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink);
  transition:background .3s ease,transform .35s var(--spring)}
.life::after{content:'';position:absolute;inset:6px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.5-5.2-8.5-11.2A4.8 4.8 0 0 1 12 6.6a4.8 4.8 0 0 1 8.5 3.2C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.5-5.2-8.5-11.2A4.8 4.8 0 0 1 12 6.6a4.8 4.8 0 0 1 8.5 3.2C20.5 15.8 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat}
.life.gone{background:var(--card-3);transform:scale(.82)}
.life.gone::after{background:var(--ink-3);opacity:.45}
.life.lost{animation:lifeLost .6s var(--ease)}
@keyframes lifeLost{0%{transform:scale(1.35) rotate(-12deg);background:var(--red)}50%{transform:scale(.7) rotate(8deg)}100%{transform:scale(.82)}}
.stat{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:12px;
  background:var(--card);border:var(--bw) solid var(--ink);font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.stat .si{width:16px;height:16px;flex:0 0 16px;display:none;color:var(--ink)}
.stat b{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
.stat b.bump{animation:bump .5s var(--spring)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}
.hudmus .mx{opacity:0;transition:opacity .2s ease}
.hudmus[aria-pressed="false"]{color:var(--ink-3)}
.hudmus[aria-pressed="false"] .mx{opacity:1}
@media (min-width:900px){.hudmus{display:none}}
@media (max-width:620px){
  .stat span:not(.rl){display:none}
  .stat .si{display:block}
  .hud{gap:6px;flex-wrap:nowrap}
  .hud .spacer{min-width:0}
  .stat{padding:0 8px}
}
@media (max-width:380px){.life{width:26px;height:26px}.life::after{inset:5px}.stat b{font-size:14px}.hud{padding-left:12px;padding-right:12px}}
/* The narrowest phones (320 to 360 px): three lives, three counters and the
   music button have to share 300 px. Everything steps down a little and
   nothing may shrink below a comfortable tap, so the music button stays on
   screen instead of hanging 24 px off the edge. */
@media (max-width:360px){
  .hud{gap:4px;padding-left:10px;padding-right:10px}
  .hud > *{flex-shrink:0}
  .hud > .spacer{flex:1 1 0;min-width:0}
  .lives{gap:3px}
  .life{width:22px;height:22px}
  .life::after{inset:4px}
  .stat{gap:4px;min-height:34px;padding:0 6px;border-radius:10px}
  .stat .si{width:14px;height:14px;flex-basis:14px}
  .stat b{font-size:13px}
  .hud .hudmus{width:34px;height:34px;min-width:34px}
}

.stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:12px var(--gut) 0}
body.motion .stage.jolt{animation:jolt .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes jolt{0%,100%{transform:none}14%{transform:translate3d(-7px,3px,0) rotate(-.6deg)}32%{transform:translate3d(6px,-3px,0) rotate(.5deg)}52%{transform:translate3d(-4px,2px,0)}74%{transform:translate3d(2px,-1px,0)}}

/* ── the bomb ────────────────────────────────────────────────────────── */
.bombwrap{position:relative;flex:0 0 auto;width:196px;height:196px;
  filter:drop-shadow(0 8px 0 rgba(29,25,52,.16)) drop-shadow(0 0 16px var(--bglow))}
@media (min-width:520px){.bombwrap{width:236px;height:236px}.stage{gap:16px;padding-top:18px}}
@media (min-width:760px) and (min-height:720px){.stage{justify-content:center;gap:22px;padding:22px var(--gut) 18px}.bombwrap{width:300px;height:300px}.log{flex:0 0 170px}}
@media (min-width:1100px) and (min-height:880px){.bombwrap{width:336px;height:336px}}
@media (max-height:640px){.bombwrap{width:164px;height:164px}.stage{gap:8px;padding-top:8px}}
@media (max-height:460px){.bombwrap{width:124px;height:124px}}
.bombwrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bombgrp{transform-origin:100px 100px;transform-box:view-box}
.b-plate{fill:var(--plate);stroke:var(--ink);stroke-width:3}
.b-track{stroke:var(--space)}
.b-spaces{stroke:var(--plate)}
.b-rim{stroke:var(--ink);opacity:.9}
.b-tint{fill:var(--bcore);pointer-events:none}
.b-edge{stroke:var(--ink)}
.b-shine{stroke:rgba(255,255,255,.36)}
.b-neck{fill:var(--ink)}
.b-cord-u{stroke:var(--ink)}
.b-cord{stroke:#E8B86A}
.b-spark{fill:var(--sun);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
#gArc stop:first-child,#gArcT stop:first-child,#gArcM stop:first-child,#gShop stop:first-child,#gRing stop:first-child{stop-color:var(--ba)}
#gArc stop:last-child,#gArcT stop:last-child,#gArcM stop:last-child,#gShop stop:last-child,#gRing stop:last-child{stop-color:var(--bb)}
/* The free bomb was coloured for a dark table. Here it wears the fuse
   colours; every bought skin keeps exactly the colours it was sold with. */
.bombwrap[style*="FF9061"]{--ba:#FFD84D !important;--bb:#FF7A1A !important;--bglow:rgba(255,122,26,.25) !important}
#arc,#mArc,#tArc{transition:stroke-dashoffset .1s linear,stroke .3s ease,stroke-width .4s ease}
.t1 .bombgrp{animation:breathe 1.15s var(--ease) infinite}
.t2 .bombgrp{animation:breathe .6s var(--ease) infinite}
.t3 .bombgrp{animation:panic .26s var(--ease) infinite}
.t2 .b-plate{fill:#FFF6E0}
.t3 .b-plate,.t3 .b-spaces{fill:#FFE7E3}
.t3 .b-spaces{fill:none;stroke:#FFE7E3}
.t2 #syl,.t2 #mSyl,.t2 #tSyl{animation:sylBeat .6s var(--ease) infinite}
.t3 #syl,.t3 #mSyl,.t3 #tSyl{animation:sylBeat .26s var(--ease) infinite;color:var(--sun-hi)}
.t3 #secs,.t3 #mSecs{animation:sylBeatX .26s var(--ease) infinite;background:var(--red);color:#fff}
@keyframes sylBeat{0%,100%{transform:scale(1)}48%{transform:scale(1.08)}}
@keyframes sylBeatX{0%,100%{transform:translateX(-50%) scale(1)}48%{transform:translateX(-50%) scale(1.1)}}
@keyframes breathe{0%,100%{transform:scale(1)}52%{transform:scale(1.03)}}
@keyframes panic{0%,100%{transform:scale(1) translate(0,0)}30%{transform:scale(1.05) translate(-2px,1.4px)}70%{transform:scale(1.02) translate(2px,-1.4px)}}
.boom .bombgrp{animation:kick .46s var(--ease) 1}
@keyframes kick{0%{transform:scale(1)}20%{transform:scale(1.16)}100%{transform:scale(1)}}
.b-fuse .b-spark{transform-origin:center;transform-box:fill-box;animation:sparkle 1.1s ease-in-out infinite}
.t2 .b-spark{animation-duration:.4s}
.t3 .b-spark{animation-duration:.2s}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.72) rotate(45deg)}}
#sparks,.sparkset{opacity:0;transition:opacity .3s ease}
.t2 #sparks,.t2 .sparkset{opacity:.85}
.t3 #sparks,.t3 .sparkset{opacity:1}
#sparks circle,.sparkset circle{transform-box:fill-box;transform-origin:center;animation:fly .62s ease-out infinite}
.t3 #sparks circle,.t3 .sparkset circle{animation-duration:.42s}
@keyframes fly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
#syl,#mSyl,#tSyl{position:relative;font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff;
  font-variation-settings:'wdth' 85;transition:color .18s ease;text-shadow:0 3px 0 rgba(0,0,0,.35)}
#syl,#mSyl{font-size:46px}
#tSyl{font-size:42px}
@media (min-width:520px){#syl,#mSyl{font-size:56px}#tSyl{font-size:50px}}
@media (min-width:760px) and (min-height:720px){#syl,#mSyl{font-size:72px}}
@media (max-height:640px){#syl,#mSyl{font-size:40px}}
@media (max-height:460px){#syl,#mSyl{font-size:30px}}
.swap{animation:swap .36s var(--spring)}
@keyframes swap{0%{opacity:0;transform:scale(.6) rotate(-8deg)}100%{opacity:1;transform:none}}
#secs,#mSecs{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);
  padding:2px 8px;border-radius:999px;background:var(--sun);color:var(--ink);
  border:var(--bw) solid var(--ink);font-family:var(--mono);font-size:14px;font-weight:700;line-height:1.3;
  opacity:0;transition:opacity .2s ease;pointer-events:none}
#secs.on,#mSecs.on{opacity:1}
@media (min-width:760px){#secs,#mSecs{font-size:17px}}

/* the blast */
.bombwrap.blast .disc-el{animation:charDisc 1.05s var(--ease) forwards}
@keyframes charDisc{0%{fill:#FFFBEA}9%{fill:var(--sun)}34%{fill:var(--red)}100%{fill:#2B2447}}
.bombwrap.blast .syl-el{animation:sylBlast .82s var(--ease) forwards}
@keyframes sylBlast{0%{transform:scale(1);opacity:1}14%{transform:scale(1.25);opacity:1}100%{transform:scale(1.9);opacity:0;letter-spacing:.3em}}
.bombwrap.blast .arc-el{animation:arcSnap .5s var(--ease) forwards}
@keyframes arcSnap{0%{opacity:1;stroke-width:13}30%{opacity:1;stroke-width:22}100%{opacity:0;stroke-width:4}}
.shock{transform-box:view-box;transform-origin:100px 100px;opacity:0}
body.motion .shock{animation:shockOut .72s cubic-bezier(.18,.9,.3,1) forwards}
body.motion .shock.two{animation-delay:.09s;animation-duration:.86s}
body.motion .shock.three{animation-delay:.19s;animation-duration:1s}
@keyframes shockOut{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(2.1)}}
.frag{transform-box:fill-box;transform-origin:center;opacity:0;stroke:var(--ink);stroke-width:1}
body.motion .frag{animation:fragFly .78s cubic-bezier(.16,.85,.3,1) forwards}
@keyframes fragFly{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:.9}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.3) rotate(160deg)}}
body:not(.motion) .bombwrap.blast .disc-el{fill:#2B2447;animation:none}
body:not(.motion) .bombwrap.blast .syl-el{opacity:.3;animation:none}
body:not(.motion) .bombwrap.blast .arc-el{opacity:0;animation:none}
body:not(.motion) .shock,body:not(.motion) .frag{display:none}
.ripple{transform-origin:100px 100px;transform-box:view-box;animation:ripple 1.1s var(--ease) forwards}
@keyframes ripple{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}

/* the shop's bomb skins, carried over */
@keyframes bombPulse{0%,100%{filter:drop-shadow(0 8px 0 rgba(29,25,52,.16)) drop-shadow(0 0 12px var(--bglow))}50%{filter:drop-shadow(0 8px 0 rgba(29,25,52,.16)) drop-shadow(0 0 30px var(--bglow))}}
@keyframes bombFlare{0%,88%,100%{filter:drop-shadow(0 8px 0 rgba(29,25,52,.16)) drop-shadow(0 0 14px var(--bglow))}93%{filter:drop-shadow(0 8px 0 rgba(29,25,52,.16)) drop-shadow(0 0 38px var(--bglow)) brightness(1.2)}}
@keyframes bombShift{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@keyframes bombNova{0%,100%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(180deg) brightness(1.15)}}
body.motion .bombwrap[data-bmode="pulse"]{animation:bombPulse 2.4s ease-in-out infinite}
body.motion .bombwrap[data-bmode="flare"]{animation:bombFlare 3.4s ease-in-out infinite}
body.motion .bombwrap[data-bmode="shift"] #arc,body.motion .bombwrap[data-bmode="shift"] #mArc,body.motion .bombwrap[data-bmode="shift"] #tArc,body.motion .bombwrap[data-bmode="shift"] .b-tint{animation:bombShift 8s linear infinite}
body.motion .bombwrap[data-bmode="nova"] #arc,body.motion .bombwrap[data-bmode="nova"] #mArc,body.motion .bombwrap[data-bmode="nova"] #tArc,body.motion .bombwrap[data-bmode="nova"] .b-tint{animation:bombNova 4.2s ease-in-out infinite}

/* ── the pressure of a burning fuse ─────────────────────────────────── */
#tension{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .45s ease}
body.tense1 #tension{opacity:1;box-shadow:inset 0 0 0 5px rgba(214,55,44,.4)}
body.tense2 #tension{opacity:1;animation:tense2 1.1s ease-in-out infinite}
body.tense3 #tension{opacity:1;animation:tense3 .46s ease-in-out infinite}
@keyframes tense2{0%,100%{box-shadow:inset 0 0 0 6px rgba(214,55,44,.42)}50%{box-shadow:inset 0 0 0 10px rgba(214,55,44,.72)}}
@keyframes tense3{0%,100%{box-shadow:inset 0 0 0 8px rgba(214,55,44,.7),inset 0 0 60px rgba(214,55,44,.2)}50%{box-shadow:inset 0 0 0 14px var(--red),inset 0 0 90px rgba(214,55,44,.34)}}
#flash{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(255,203,46,0) 30%, rgba(255,203,46,.5) 62%, rgba(214,55,44,.5))}
#flash.hit{animation:hitFlash .62s ease-out}
@keyframes hitFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  body:not(.motion) .t3 .bombgrp{animation-name:breathe;animation-duration:.8s}
  body:not(.motion) #sparks,body:not(.motion) .sparkset{display:none}
  body:not(.motion) #tension{animation:none}
  body:not(.motion) .heromark .spin{animation:none}
}

/* ── typing: the tile rack ───────────────────────────────────────────── */
.entry{position:relative;width:100%;max-width:640px;display:flex;flex-direction:column;gap:10px}
.stage .entry{flex:0 0 auto}
.field{display:flex;gap:10px}
.wordin{flex:1;min-width:0;min-height:62px;padding:0 18px;
  color:var(--ink);background:var(--card);
  border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:inset 0 3px 0 rgba(29,25,52,.08);
  font:700 22px/1 var(--display);
  transition:box-shadow .2s ease,background .2s ease}
.wordin:focus{outline:none;box-shadow:inset 0 3px 0 rgba(29,25,52,.08),0 0 0 4px rgba(47,107,240,.28)}
.wordin.ok{background:var(--green-soft);box-shadow:inset 0 3px 0 rgba(29,25,52,.06),0 0 0 4px rgba(21,128,63,.3)}
.wordin.bad{animation:nope .34s cubic-bezier(.36,.07,.19,.97);background:var(--red-soft)}
.wordin.blocked{background:var(--card-2);border-style:dashed;cursor:default}
@keyframes nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.inwrap{position:relative;flex:1;min-width:0;display:flex}
/* the rack: a groove the tiles stand in */
.inwrap .wordin{flex:1;min-width:0;color:transparent;caret-color:transparent;
  background:linear-gradient(180deg,var(--card) 0 calc(100% - 12px),var(--card-3) calc(100% - 12px))}
.inwrap .wordin::placeholder{color:transparent}
.inwrap .wordin::selection{background:transparent}
.inwrap .wordin.ok{background:linear-gradient(180deg,var(--green-soft) 0 calc(100% - 12px),#BFE9D0 calc(100% - 12px))}
.inwrap .wordin.bad{background:linear-gradient(180deg,var(--red-soft) 0 calc(100% - 12px),#FFC9C2 calc(100% - 12px))}
.inwrap .wordin.blocked{background:var(--card-2)}
.tilerow{position:absolute;inset:0 0 6px;display:flex;align-items:center;gap:4px;padding:0 12px;pointer-events:none;overflow:hidden}
/* letter tiles, printed on ink so every bought letter colour still reads */
.tilerow span{flex:0 0 auto;min-width:30px;height:40px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;line-height:1;
  color:var(--tyc,#fff);text-shadow:var(--tys,none);
  background:var(--ink);border:var(--bw) solid var(--tyb,var(--ink));border-radius:8px;
  box-shadow:0 3px 0 rgba(29,25,52,.4);
  animation:tileIn .22s var(--spring) both}
.tilerow span.stay{animation:none}
.tilerow span.hit{background:var(--sun);color:var(--ink);border-color:var(--ink);text-shadow:none;filter:none}
.tilerow span.caret{min-width:3px;width:3px;height:30px;padding:0;border:0;border-radius:2px;background:var(--red);box-shadow:none;animation:blink 1.05s steps(1,end) infinite}
.tilerow .ghost{min-width:0;padding:0;height:auto;border:0;background:none;box-shadow:none;
  font-size:17px;font-weight:600;color:var(--ink-3);text-shadow:none;animation:none}
.tilerow.watch .ghost{color:var(--ink-3)}
@keyframes tileIn{from{opacity:0;transform:translateY(-10px) scale(.7) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (max-width:430px){.tilerow{gap:3px;padding:0 10px}.tilerow span{min-width:26px;height:36px;font-size:19px;padding:0 4px}}
/* the shop's typing effects */
.tilerow[data-tmode] span,.tyfx span{border-color:var(--tyb,var(--ink))}
body.motion .tilerow[data-tmode="pulse"] span,body.motion .tyfx-pulse span{animation:tyPulse 1.2s ease-in-out infinite}
@keyframes tyPulse{0%,100%{opacity:.82}50%{opacity:1}}
body.motion .tilerow[data-tmode="flicker"] span,body.motion .tyfx-flicker span{animation:tyFlicker 2.4s steps(1) infinite}
@keyframes tyFlicker{0%,42%,46%,100%{opacity:1}44%{opacity:.35}62%{opacity:1}64%{opacity:.5}66%{opacity:1}}
body.motion .tilerow[data-tmode="wave"] span,body.motion .tyfx-wave span{animation:tyWave 1.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .09s)}
@keyframes tyWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
body.motion .tilerow[data-tmode="cascade"] span,body.motion .tyfx-cascade span{animation:tyCascade 1.7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .085s)}
@keyframes tyCascade{0%,42%,100%{filter:none}16%{filter:brightness(1.8)}}
.tilerow[data-tmode="spectrum"] span:nth-child(6n+1),.tyfx-spectrum span:nth-child(6n+1){color:#FF7A55;border-color:#FF7A55}
.tilerow[data-tmode="spectrum"] span:nth-child(6n+2),.tyfx-spectrum span:nth-child(6n+2){color:#FFC65C;border-color:#FFC65C}
.tilerow[data-tmode="spectrum"] span:nth-child(6n+3),.tyfx-spectrum span:nth-child(6n+3){color:#7CE8A4;border-color:#7CE8A4}
.tilerow[data-tmode="spectrum"] span:nth-child(6n+4),.tyfx-spectrum span:nth-child(6n+4){color:#5FD0FF;border-color:#5FD0FF}
.tilerow[data-tmode="spectrum"] span:nth-child(6n+5),.tyfx-spectrum span:nth-child(6n+5){color:#A896FF;border-color:#A896FF}
.tilerow[data-tmode="spectrum"] span:nth-child(6n+6),.tyfx-spectrum span:nth-child(6n+6){color:#FF8FD0;border-color:#FF8FD0}
.tilerow[data-tmode] span.hit{color:var(--ink);text-shadow:none;background-image:none;border-color:var(--ink);filter:none}
.tilerow[data-tmode] span.caret{background:var(--red)}
.tyfx{display:flex;gap:3px;justify-content:center}
.tyfx span{display:grid;place-items:center;min-width:24px;height:30px;padding:0 6px;border-radius:6px;
  font-size:14px;font-weight:800;color:var(--tyc,#fff);text-shadow:var(--tys,none);
  background-color:var(--ink);border:1.5px solid var(--tyb,var(--ink))}
.bigfx{gap:5px}
.bigfx span{min-width:36px;height:46px;padding:0 8px;font-size:23px;border-radius:9px}

/* the send token and the umlaut keys */
.field > .btn{flex:0 0 auto;width:62px;min-height:62px;padding:0;border-radius:var(--r)}
.keys{display:flex;gap:6px}
.keys button{flex:1;min-height:50px;border-radius:12px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  font-size:21px;font-weight:800;color:var(--ink);
  transition:transform .08s var(--ease),box-shadow .08s var(--ease),background .12s ease}
.keys button:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);background:var(--sun)}
.keys .wide{flex:0 0 72px;display:flex;align-items:center;justify-content:center}
.keys button.nudge{animation:nudge 1.1s ease-in-out infinite;background:var(--sun)}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (hover:hover) and (pointer:fine){
  .keys{gap:5px}
  .keys button{min-height:38px;font-size:17px}
  .keys .wide{flex:0 0 58px}
  .keys button:hover{background:var(--sun-soft)}
}

/* the alphabet: 26 board spaces that fill as letters are played */
.abc{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;width:100%;max-width:640px;flex:0 0 auto}
.abc i{display:flex;align-items:center;justify-content:center;height:24px;border-radius:6px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;font-style:normal;
  color:var(--ink-3);background:rgba(255,255,255,.6);border:1.5px solid var(--line-2);
  transition:color .3s ease,background .3s ease,border-color .3s ease}
.abc i.got{color:var(--ink);background:var(--sun);border-color:var(--ink)}
body.motion .abc i.just{animation:abcGot .5s var(--spring)}
@keyframes abcGot{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-6deg)}100%{transform:scale(1)}}
body.motion .abc.full i{animation:abcFull .7s var(--ease) both}
@keyframes abcFull{0%{background:var(--sun)}45%{background:var(--green);color:#fff;transform:translateY(-6px)}100%{background:var(--sun);transform:none}}
@media (max-width:560px){.abc i{height:21px;font-size:10.5px}}
@media (max-height:600px){.abc{display:none}}

/* the words played this round, dealt like cards */
.log{width:100%;max-width:640px;flex:1 1 auto;min-height:0;overflow:hidden;padding-top:2px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.log div{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;padding:9px 14px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:12px;
  animation:slotIn .42s var(--spring) both}
@keyframes slotIn{0%{opacity:0;transform:translateY(-16px) scale(.94) rotate(-1.5deg)}100%{opacity:1;transform:none}}
.log .w{flex:1;min-width:0;font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .t{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.log mark,.picks .de mark,.couldbox .cw mark{background:var(--sun);color:var(--ink);padding:0 2px;border-radius:4px}

/* the word that pops out after a hit */
/* it rises from the top of the rack, over the foot of the bomb, so the rack
   stays clear for the next word */
.pop{position:absolute;left:50%;bottom:calc(100% + 6px);width:max-content;max-width:min(92vw,420px);transform:translate(-50%,0);z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:19px;font-weight:800;color:var(--green-tx);white-space:nowrap;opacity:0}
.pop:not(.card){padding:4px 12px;border-radius:999px;background:var(--card);border:var(--bw) solid var(--ink)}
.pop:empty{display:none}
.pop.card{padding:10px 16px 11px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--lift);color:var(--ink)}
.pop.card.miss{background:var(--red-soft)}
.pop .art{font-style:normal;font-weight:800;font-size:.7em;margin-right:.35em;padding:1px 6px;border-radius:6px;
  vertical-align:.12em;color:#fff;background:var(--ink)}
.pop .mean{font-size:14px;font-weight:600;line-height:1.3;color:var(--ink-2);white-space:normal;text-align:left;max-width:min(58vw,240px)}
/* One row, not a stack. The card rises over the foot of the bomb, and a card
   two lines tall reached the syllable: the one thing a player needs to keep
   seeing while they think of the next word. The word and what it means sit
   side by side, split by a solid rule rather than a row of dashes. */
.pop.card{flex-direction:row;align-items:center;gap:0;padding:7px 14px 7px 12px;border-radius:16px}
.pop.card .mean{margin-left:11px;padding-left:13px;background:linear-gradient(var(--line-2),var(--line-2)) left center/2px 78% no-repeat;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pop.card > span:first-child{flex:0 0 auto;display:inline-block;font-size:18px;line-height:1.15}
.pop.card.miss .mean{background-image:linear-gradient(rgba(184,43,35,.28),rgba(184,43,35,.28));color:var(--ink)}
.pop.card.miss > span:first-child{text-decoration:line-through;text-decoration-thickness:2.5px;text-decoration-color:rgba(184,43,35,.55)}
.pop.card.miss > span:first-child::before{content:'\00d7';display:inline-block;vertical-align:.14em;margin-right:7px;width:20px;height:20px;text-align:center;
  border-radius:50%;background:var(--red);color:#fff;font-size:15px;font-weight:800;line-height:19px}
.pop.miss{color:var(--red-tx)}
.pop.go{opacity:1;animation:popUp 1.05s var(--ease)}
.pop.card.go{animation:popHold 2.9s var(--ease)}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,14px) scale(.8)}18%{opacity:1;transform:translate(-50%,0) scale(1.08)}30%{transform:translate(-50%,-2px) scale(1)}100%{opacity:0;transform:translate(-50%,-44px) scale(1)}}
@keyframes popHold{0%{opacity:0;transform:translate(-50%,14px) scale(.9)}9%{opacity:1;transform:translate(-50%,-2px) scale(1.04)}15%{transform:translate(-50%,0) scale(1)}78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-28px) scale(.98)}}
@media (prefers-reduced-motion:reduce){body:not(.motion) .pop.go{animation-name:popFade}}
@keyframes popFade{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* what would have fitted */
.couldbox{position:absolute;z-index:6;left:50%;top:var(--at,50%);transform:translate(-50%,-50%);
  width:min(92vw,392px);overflow:hidden;pointer-events:none;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--lift)}
body.motion .couldbox{animation:couldIn .42s var(--spring) both}
@keyframes couldIn{from{opacity:0;transform:translate(-50%,calc(-50% + 16px)) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.couldbox.out{animation:couldOut .26s ease forwards}
@keyframes couldOut{to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(.97)}}
.couldbox .chead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--sun);border-bottom:var(--bw) solid var(--ink)}
.couldbox .ctag{font-size:14px;font-weight:800}
.couldbox .csyl{font-family:var(--mono);font-size:13px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--ink);color:#fff}
.couldbox .clist{list-style:none;margin:0;padding:6px 0}
.couldbox .clist li{display:flex;align-items:baseline;gap:9px;padding:6px 14px;opacity:0}
body.motion .couldbox .clist li{animation:couldRow .42s var(--ease) both}
body:not(.motion) .couldbox .clist li{opacity:1}
@keyframes couldRow{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.couldbox .ca{flex:0 0 auto;min-width:28px;font-size:12px;font-weight:800;color:var(--ink-3)}
.couldbox .cw{flex:0 0 auto;font-size:17px;font-weight:800}
.couldbox .cm{flex:1;min-width:0;text-align:right;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.couldbox .cwait{height:5px;background:var(--card-3)}
.couldbox .cwait i{display:block;height:100%;width:100%;transform-origin:left;background:var(--sun-lo)}
body.motion .couldbox .cwait i{animation:couldWait var(--hold,2.6s) linear forwards}
@keyframes couldWait{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ── game over ───────────────────────────────────────────────────────── */
.over{flex:1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px var(--gut) 40px}
.over > *{width:100%;max-width:var(--col)}
.score{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 18px 22px;background:var(--sun);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden;isolation:isolate}
.score::before{content:'';position:absolute;inset:-50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.34) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 55%);mask:radial-gradient(circle,#000 10%,transparent 55%)}
body.motion .score::before{animation:spinRing 40s linear infinite}
.score .lbl{color:var(--ink);font-size:13px}
.score .big{font-family:var(--display);font-size:clamp(76px,22vw,128px);font-weight:800;line-height:.85;letter-spacing:-.05em;font-variation-settings:'wdth' 80;color:var(--ink);text-shadow:0 5px 0 rgba(255,255,255,.6)}
.score > span,.score .tagline{font-size:17px;font-weight:700;color:var(--ink)}
body.motion .over:not([hidden]) .score .big{animation:scorePop .6s var(--spring) both}
@keyframes scorePop{from{transform:scale(.5) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tiles div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:14px 8px;text-align:center;border-radius:var(--r)}
.tiles div:nth-child(1){background:var(--blue-soft)}
.tiles div:nth-child(2){background:var(--red-soft)}
.tiles div:nth-child(3){background:var(--green-soft)}
.tiles b{display:block;font-family:var(--mono);font-size:clamp(18px,5.4vw,26px);font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.tiles span{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-2)}
.kept{display:flex;align-items:center;gap:14px;padding:14px 16px;text-align:left;
  background:var(--green);color:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 5px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.kept:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.kept-ic{flex:0 0 auto;display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:#fff;color:var(--green-tx);border:var(--bw) solid var(--ink)}
.kept-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kept-txt b{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1}
.kept-txt span{font-size:15px;font-weight:700;line-height:1.3}
.kept-go{flex:0 0 auto;display:flex}
body.motion .kept{animation:keptIn .5s var(--spring) .15s both}
@keyframes keptIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.missbox .phead{flex-wrap:wrap;align-items:center}
.missbox .syl{font-family:var(--mono);font-size:13px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--ink);color:#fff}
.picks{list-style:none;margin:0;padding:0}
.picks li{display:flex;align-items:baseline;gap:12px;padding:12px 18px;flex-wrap:wrap;border-top:1.5px dashed var(--line)}
.picks li:first-child{border-top:0}
body.motion .picks li{animation:fadeUp .45s var(--ease) both}
.picks .art{flex:0 0 34px;font-size:13px;font-weight:800;color:var(--gc,var(--ink-3))}
.picks .de{font-size:18px;font-weight:800}
.picks .en{margin-left:auto;font-size:14px;color:var(--ink-2);text-align:right}
@media (max-width:430px){.picks .en{margin-left:46px;width:100%;text-align:left}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;max-width:var(--col)}
.cta .btn{flex:1 1 200px}
.enter{animation:fadeUp .5s var(--ease) both}
.enter:nth-child(2){animation-delay:.05s}.enter:nth-child(3){animation-delay:.1s}.enter:nth-child(4){animation-delay:.14s}
body:not(.motion) .enter{animation:none}

/* ── playing on a phone: the screen is the visible viewport ─────────── */
body.playing{position:fixed;inset:0;width:100%;overflow:hidden}
body.playing .wrap{height:var(--vh,100dvh);min-height:0;padding-bottom:0}
body.playing .game,body.playing .tutor{height:calc(var(--vh,100dvh) - var(--barh,62px));overflow:hidden}
body.kbd .bar{display:none}
body.kbd .game,body.kbd .tutor,body.kbd .mp,body.kbd .room{height:var(--vh,100dvh)}
body.kbd .abc,body.kbd .log{display:none}
body.kbd .bombwrap{width:min(150px,30vh);height:min(150px,30vh)}

/* a phone on its side: every row gets shorter so the keys stay on screen */
@media (max-height:460px){
  .bar{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px}
  .bar .icobtn{width:36px;height:36px}
  .brand b{font-size:16px}
  .hud{padding-top:6px;padding-bottom:6px}
  .stat{min-height:30px}
  .life{width:24px;height:24px}.life::after{inset:4px}
  .bombwrap{width:100px;height:100px}
  #syl,#mSyl,#tSyl{font-size:26px}
  #secs,#mSecs{font-size:11px;padding:0 5px;bottom:14%}
  .stage{gap:6px;padding-top:6px}
  .entry{gap:6px}
  .wordin,.field > .btn{min-height:48px}
  .field > .btn{width:52px}
  .tilerow span{height:32px;min-width:24px;font-size:17px}
  .keys button{min-height:38px;font-size:17px}
  .log{display:none}
}
body.kbd #syl,body.kbd #mSyl{font-size:36px}

/* ── 03-social.css ── */
/* ── menu screens ────────────────────────────────────────────────────── */
.mp,.room{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px var(--gut) 40px}
.mp > *,.room > *{width:100%;max-width:var(--col)}
.mp > .link,.room > .link{width:auto}
.mp h1,.room h1{font-size:clamp(36px,10vw,58px);text-align:center}
#name h1,#signin h1,#hMp,#hFriends,#hBoard,#hVerben,#hArtikel,#hWort,#hNews,#hShop{position:relative}
.lede2{margin:0;max-width:42ch;text-align:center;font-size:16px;line-height:1.5;color:var(--ink-2)}
.fineprint{margin:0;max-width:40ch;text-align:center;font-size:13.5px;color:var(--ink-2)}
.quick{display:flex;flex-direction:column;gap:12px}
.quick .turnbar{min-height:0}
.quick .turnbar:empty{display:none}
.row2{display:flex;gap:10px}
.codein{flex:1;min-width:0;min-height:56px;padding:0 16px;
  color:var(--ink);background:var(--card-2);border:var(--bw) solid var(--ink);border-radius:var(--r);
  box-shadow:inset 0 3px 0 rgba(29,25,52,.07);
  font:700 18px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.codein::placeholder{letter-spacing:.04em;font-size:15px;color:var(--ink-3)}
.codein:focus{outline:none;background:#fff;box-shadow:inset 0 3px 0 rgba(29,25,52,.07),0 0 0 4px rgba(47,107,240,.28)}
.codein.plain{text-transform:none;letter-spacing:0;font:700 18px/1 var(--display)}
.turnbar{margin:0;min-height:22px;font-size:15px;font-weight:700;color:var(--ink-2);text-align:center}
.turnbar b{color:var(--ink);background:var(--sun);padding:0 5px;border-radius:6px}
.empty{padding:24px 18px;text-align:center;font-size:15px;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;
  font-size:12.5px;font-weight:800;border:var(--bw) solid var(--ink);background:var(--card);color:var(--ink)}
.chip.live{background:var(--red);color:#fff}

/* open rooms */
.rooms,.plist,.stand{list-style:none;margin:0;padding:0}
.rooms li{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap;border-top:1.5px dashed var(--line)}
.rooms li:first-child{border-top:0}
.rooms .nm{flex:1 1 160px;min-width:0}
.rooms .nm b{display:block;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rooms .nm span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.rooms .cnt{font-family:var(--mono);font-size:14px;font-weight:700}
.rooms li .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:560px){.rooms .nm{flex:1 1 100%}.rooms li .btn{margin-left:auto}}

/* the invitation code, printed like a game box serial */
.codeline{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.codeline .lbl{font-size:12px}
.codeline .row{display:flex;align-items:center;gap:12px;width:100%}
.codeline b{flex:1;min-width:0;font-family:var(--mono);font-size:clamp(22px,6vw,32px);font-weight:700;letter-spacing:.08em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codeline .btn{flex:0 0 auto}
.rankline{background:var(--sun-soft)}
.rankfuse{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--red);color:#fff;border:var(--bw) solid var(--ink)}
.ranknote{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* players: every seat gets a pawn colour, in the order people sit down */
.plist li{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1.5px dashed var(--line)}
.plist li:first-child{border-top:0}
.plist li.me{background:var(--sun-soft)}
.plist .av,.plist .pic{position:relative;overflow:hidden;flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;
  background:var(--pawn,var(--blue));border:var(--bw) solid var(--ink)}
.plist .pic{background:var(--card-3);color:var(--ink-2)}
.plist .av .avatar,.plist .pic .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#rPlayers li:nth-child(4n+1){--pawn:var(--sun)}
#rPlayers li:nth-child(4n+1) .av{color:var(--ink)}
#rPlayers li:nth-child(4n+2){--pawn:var(--blue)}
#rPlayers li:nth-child(4n+3){--pawn:var(--red)}
#rPlayers li:nth-child(4n+4){--pawn:var(--green)}
.plist .pmid{flex:1;min-width:0;display:flex;align-items:center;gap:9px}
.plist .ptags{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.plist .who{min-width:0;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .nm{flex:1;min-width:0}
.plist .nm b{display:block;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .nm span{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
@media (max-width:520px){.plist .pmid{flex-direction:column;align-items:flex-start;gap:4px}.plist .ptags{max-width:100%;flex-wrap:wrap}}
.plist .tag{flex:0 0 auto;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  border:1.5px solid var(--ink);background:var(--card);color:var(--ink);white-space:nowrap}
.plist .tag.rdy{background:var(--green);color:#fff}
.plist .tag.bot{border-style:dashed;color:var(--ink-2)}
.plist .mini{display:flex;gap:4px}
.plist .mini i{width:12px;height:12px;border-radius:50%;background:var(--red);border:1.5px solid var(--ink)}
.plist .mini i.off{background:var(--card-3)}
.plist .drop{flex:0 0 36px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  color:var(--ink-2);border:1.5px solid var(--line-2);transition:color .15s ease,background .15s ease,border-color .15s ease}
.plist .drop:active{background:var(--red-soft);color:var(--red-tx)}
@media (hover:hover) and (pointer:fine){.plist .drop:hover{color:var(--red-tx);border-color:var(--red);background:var(--red-soft)}}
.plist .act{display:flex;gap:8px;flex:0 0 auto}
.plist .act button{min-height:40px;padding:0 14px;border-radius:12px;font-size:14px;font-weight:800;
  border:var(--bw) solid var(--ink);background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .15s ease}
.plist .act button:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.plist .act button.go{background:var(--sun)}
/* two answers to a request do not fit beside a name on a phone: they take
   their own row under it, each half the width */
@media (max-width:520px){
  .plist li:has(.act button + button){flex-wrap:wrap}
  .plist li:has(.act button + button) .act{flex:1 1 100%;padding-left:52px}
  .plist li:has(.act button + button) .act button{flex:1}
}
.plist .act button[disabled]{opacity:.5;cursor:default}
.plist .empty{padding:20px 16px;font-size:14.5px;color:var(--ink-2);text-align:left}
.plist li.free .who{color:var(--ink-3);font-weight:600}
.plist li.free.quiet{opacity:.5}
.plist .av.ghost{border-style:dashed;background:var(--card-2);color:var(--ink-3);font-size:18px}
.seatadd{flex:0 0 auto;min-height:36px;padding:0 12px;border-radius:10px;
  border:var(--bw) solid var(--ink);background:var(--sun-soft);font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;
  transition:background .15s ease,transform .12s var(--ease)}
.seatadd:active{transform:scale(.96);background:var(--sun)}
@media (hover:hover) and (pointer:fine){.seatadd:hover{background:var(--sun)}}
.seatpick{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;border-top:var(--bw) dashed var(--line-2);background:var(--card-2)}
.seatpick-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.seatpick-row button{min-height:46px;padding:6px;border-radius:12px;border:var(--bw) solid var(--ink);background:var(--card);
  box-shadow:0 3px 0 var(--ink);font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .15s ease}
.seatpick-row button:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.seatpick-row button:disabled{opacity:.45;cursor:default}
.seatpick-row button[data-lv="extreme"]{background:var(--red-soft)}
@media (hover:hover) and (pointer:fine){.seatpick-row button:hover:not(:disabled){background:var(--sun-soft)}}
.seatpick .botsay{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.setlbl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
#botDrop{margin:0 0 12px 12px;align-self:flex-start}
@media (max-width:440px){.seatpick-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.phead .seatcount{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink-2)}
.setbody{display:flex;flex-direction:column;padding:0}
.setpart{display:flex;flex-direction:column;gap:10px;padding:14px 0 0}
.setpart .setlbl{padding:0 16px}
.setpart + .setpart{border-top:var(--bw) dashed var(--line-2)}

/* the room on a wide screen: table on the left, chat on the right */
@media (min-width:960px){
  .room{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px 24px;align-content:start;max-width:1160px;margin-inline:auto;width:100%}
  .room > *{max-width:none}
  .room > *:not(#roomChat){grid-column:1}
  .room .link{justify-self:start}
  #roomChat{grid-column:2;grid-row:1 / span 30;align-self:start;position:sticky;top:calc(var(--barh,64px) + 16px);height:min(72vh,640px)}
}
.room.done > *{order:3}
.room.done #rStandBox{order:0}
.room.done .cta{order:1}
.room.done #rSeatBox{order:2}
.room.done #rCodeBox,.room.done #rSetBox,.room.done #rVoiceBox{order:4;opacity:.75}

/* voice */
.voiceline{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px 16px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--lift-sm)}
.vlbl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.voiceline .vpeople,.vpeople{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.voiceline .vnote,.vnote{width:100%;margin:0;flex:1 0 100%;order:3;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.vacts{display:flex;gap:8px;flex:0 0 auto}
.vchip{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--card);font-size:13px;font-weight:700}
.vchip i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.vchip.me{background:var(--sun-soft)}
.vchip.talk{background:var(--green-soft);border-color:var(--green-lo)}
.vchip.talk i{background:var(--green);box-shadow:0 0 0 3px rgba(21,128,63,.25)}
.youtag{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-left:4px}
.vempty{font-size:14px;color:var(--ink-2)}
.hudvoice{display:flex;align-items:center;gap:7px;width:auto;padding:0 10px}
#vJoinG{width:auto;padding:0 10px;gap:6px}
#vJoinG.in{background:var(--green-soft)}
.vn{font-size:12px;font-weight:700}
.vn:empty{display:none}
.hudvoice .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.hudvoice.talk .dot{background:var(--green)}

/* seats in the room's HUD */
.seats{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.seat{position:relative;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;
  background:var(--card);border:var(--bw) solid var(--ink);transition:background .2s ease,transform .2s var(--ease)}
.seat:nth-child(4n+1){--pawn:var(--sun)}.seat:nth-child(4n+2){--pawn:var(--blue)}.seat:nth-child(4n+3){--pawn:var(--red)}.seat:nth-child(4n+4){--pawn:var(--green)}
.seat.turn{background:var(--sun);animation:seatBreathe 1.9s ease-in-out infinite}
.seat.out{opacity:.4}
.seat .av{position:relative;overflow:hidden;flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:var(--ink);
  background:var(--pawn,var(--card-3));border:1.5px solid var(--ink)}
.seat .av .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av .mark,.win-face .mark{display:block;line-height:1}
.seat b{font-size:13.5px;font-weight:800;max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .mini{display:flex;gap:3px}
.seat .mini i{width:8px;height:8px;border-radius:50%;background:var(--red);border:1px solid var(--ink)}
.seat .mini i.off{background:var(--card-3)}
.seat .botdot{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px dashed var(--ink);border-radius:5px;padding:0 4px;color:var(--ink-2)}
@keyframes seatBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
body:not(.motion) .seat.turn{animation:none}
.needlen{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.tilerow.watch span{opacity:.92}
@media (max-width:620px){
  .seats{flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
  .seats::-webkit-scrollbar{display:none}
  .seat{flex:0 0 auto}
  #mpgame .hud .stat{order:-1;padding:0 9px}
  #mpgame .hud .stat .rl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:430px){.icobtn{width:38px;height:38px;border-radius:12px}.seat b{max-width:8ch;font-size:12.5px}}

/* ── chat ────────────────────────────────────────────────────────────── */
.chat{display:flex;flex-direction:column;min-height:0}
.chatlog{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.chatlog .ln,.funk-log .ln{align-self:flex-start;max-width:92%;padding:8px 12px;border-radius:14px 14px 14px 4px;
  background:var(--card-2);border:1.5px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--ink);word-break:break-word;
  animation:fadeUp .3s var(--ease) both}
.chatlog .ln b,.funk-log .ln b{font-weight:800;margin-right:6px}
.chatlog .ln.me,.funk-log .ln.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--sun-soft);border-color:rgba(231,169,0,.45)}
.chatlog .ln.sys{align-self:center;background:none;border:0;padding:2px 8px;font-size:13px;font-style:italic;color:var(--ink-2)}
.chatlog .empty,.funk-log .empty{color:var(--ink-2);font-size:14px;text-align:center;padding:14px 0}
.chatbar{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;border-top:var(--bw) dashed var(--line-2)}
.chatbar input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:14px;
  background:var(--card-2);border:var(--bw) solid var(--ink);font-weight:600}
.chatbar input:focus{outline:none;background:#fff;box-shadow:0 0 0 4px rgba(47,107,240,.25)}
.chatbar button{flex:0 0 48px;min-height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.chatbar button:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
#roomChat{height:340px}
.chatscreen{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--card)}
.chatscreen .sheetbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px var(--gut);border-bottom:var(--bw) solid var(--ink)}
.chatscreen .sheetbar h2{margin:0;font-size:18px;font-weight:800}
.sheetrule{width:2px;height:20px;border-radius:2px;background:var(--line-2)}
.backlink{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 10px 0 4px;border-radius:12px;font-size:15px;font-weight:800;color:var(--ink)}
.backlink:active{background:var(--card-2)}
.unread{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--ink)}
#chatBtn{position:relative}
#sideChat{display:none}
@media (min-width:920px){
  #chatBtn{display:none}
  #mpgame{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr)}
  #mpgame .hud{grid-column:1 / -1}
  #mpgame .stage{grid-column:1;min-height:0}
  #sideChat{grid-column:2;grid-row:2;display:flex;min-height:0;margin:12px 16px 16px 0;
    background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden}
  #mpgame .hud .seats{display:none}
}
.roster{flex:0 0 auto;display:flex;flex-direction:column;border-bottom:var(--bw) dashed var(--line-2)}
.rrow{display:flex;align-items:center;gap:10px;padding:9px 14px;transition:background .25s ease}
.rrow:nth-child(4n+1){--pawn:var(--sun)}.rrow:nth-child(4n+2){--pawn:var(--blue)}.rrow:nth-child(4n+3){--pawn:var(--red)}.rrow:nth-child(4n+4){--pawn:var(--green)}
.rrow.turn{background:var(--sun-soft)}
.rrow.out{opacity:.45}
.rrow .av{position:relative;overflow:hidden;flex:0 0 32px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--ink);background:var(--pawn,var(--card-3));border:var(--bw) solid var(--ink)}
.rrow .av .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rwho b{font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow.out .rwho b{text-decoration:line-through}
.rwho span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rlives{display:flex;gap:3px}
.rlives i{width:9px;height:9px;border-radius:50%;background:var(--red);border:1px solid var(--ink)}
.rlives i.off{background:var(--card-3)}
.rwords{font-family:var(--mono);font-size:14px;font-weight:700;min-width:22px;text-align:right}

/* ── toasts ──────────────────────────────────────────────────────────── */
#toasts{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 24px);max-width:420px}
.toast{width:100%;display:flex;align-items:center;gap:11px;padding:12px 14px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--lift-sm);
  font-size:14.5px;font-weight:700;color:var(--ink);animation:toastIn .38s var(--spring) both}
.toast.out{animation:toastOut .3s ease forwards}
.toast i{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--red);border:1.5px solid var(--ink)}
.toast.good i{background:var(--green)}
@keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* ── the podium ──────────────────────────────────────────────────────── */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2.6vw,16px);
  padding:28px 16px 0;border-bottom:var(--bw) solid var(--ink);
  background:repeating-conic-gradient(from 0deg at 50% 100%, rgba(255,203,46,.22) 0deg 8deg, transparent 8deg 20deg)}
.podium:empty{display:none}
.pcol{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 1 clamp(86px,27vw,136px);min-width:0}
.pcap{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;opacity:0;transform:translateY(10px)}
.pcrown{width:26px;height:26px;color:var(--sun-lo);opacity:0;transform:scale(.4);filter:drop-shadow(0 2px 0 var(--ink))}
.pname{font-size:clamp(13px,3.6vw,15px);font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pwords{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.pwords b{font-family:var(--mono);font-size:clamp(16px,4.4vw,20px);font-weight:700}
.pwords i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pbadge{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  width:clamp(40px,11vw,48px);height:clamp(40px,11vw,48px);border-radius:50%;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  font-family:var(--mono);font-weight:700;font-size:clamp(15px,4.2vw,19px);opacity:0;transform:translateY(-14px) scale(.8)}
.p1 .pbadge{width:clamp(50px,13vw,60px);height:clamp(50px,13vw,60px);background:var(--sun);font-size:clamp(19px,5.2vw,24px)}
.pshine{position:absolute;inset:0;transform:translateX(-140%);background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%)}
.pchamp{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--sun);padding:2px 8px;border-radius:999px;border:1.5px solid var(--ink);opacity:0;transform:translateY(5px)}
.pbar{position:relative;width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;
  border:var(--bw) solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;background:var(--card);transform:scaleY(0);transform-origin:50% 100%}
.pbar .prank{font-family:var(--mono);font-size:clamp(17px,4.6vw,22px);font-weight:700;color:var(--ink)}
.p1 .pbar{height:clamp(80px,21vw,116px);background:var(--sun)}
.p2 .pbar{height:clamp(60px,15vw,86px);background:var(--blue-soft)}
.p3 .pbar{height:clamp(44px,11.5vw,64px);background:var(--red-soft)}
.pspark{position:absolute;left:50%;top:0;width:8px;height:8px;background:var(--sun);border:1px solid var(--ink);opacity:0;pointer-events:none}
body.motion .pbar{animation:podRise .62s cubic-bezier(.18,1.25,.34,1) forwards}
body.motion .pcap{animation:podCap .42s var(--ease) forwards}
body.motion .p1 .pcrown{animation:podCrown .5s var(--spring) forwards}
body.motion .p3 .pbar{animation-delay:.06s}body.motion .p3 .pcap{animation-delay:.42s}
body.motion .p2 .pbar{animation-delay:.3s}body.motion .p2 .pcap{animation-delay:.66s}
body.motion .p1 .pbar{animation-delay:.56s}body.motion .p1 .pcap{animation-delay:.98s}
body.motion .p1 .pcrown{animation-delay:1.3s}
body.motion .pbadge{animation:podBadge .48s var(--spring) forwards}
body.motion .p3 .pbadge{animation-delay:.5s}body.motion .p2 .pbadge{animation-delay:.74s}body.motion .p1 .pbadge{animation-delay:1.06s}
body.motion .pchamp{animation:podCap .4s var(--ease) 1.44s forwards}
body.motion .pshine{animation:podShine 1.05s cubic-bezier(.3,0,.2,1) 1.52s forwards}
body.motion .pspark{animation:podSpark .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes podRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes podCap{to{opacity:1;transform:none}}
@keyframes podCrown{to{opacity:1;transform:none}}
@keyframes podBadge{to{opacity:1;transform:none}}
@keyframes podShine{to{transform:translateX(140%)}}
@keyframes podSpark{0%{opacity:0;transform:translate(-50%,0) scale(.5)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(.3) rotate(90deg)}}
body:not(.motion) .pbar{transform:scaleY(1)}
body:not(.motion) .pcap,body:not(.motion) .p1 .pcrown,body:not(.motion) .pbadge,body:not(.motion) .pchamp{opacity:1;transform:none}
body:not(.motion) .pspark,body:not(.motion) .pshine{display:none}
.stand li{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1.5px dashed var(--line)}
.stand li:first-child{border-top:0}
.stand .pos{flex:0 0 28px;font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink-2)}
.stand li:first-child .pos{color:var(--ink);background:var(--sun);border-radius:8px;text-align:center;border:1.5px solid var(--ink)}
.stand .who{flex:1;min-width:0;font-size:16px;font-weight:700}
.stand .n{font-family:var(--mono);font-size:14px;color:var(--ink-2)}
.ratedlist{list-style:none;margin:0;padding:0;border-top:var(--bw) dashed var(--line-2)}
.ratedlist li{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1.5px dashed var(--line)}
.ratedlist li:first-child{border-top:0}
.ratedlist .rn{flex:1;min-width:0;font-size:15.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ratedlist .rd{font-family:var(--mono);font-size:14.5px;font-weight:700}
.ratedlist .rd.up{color:var(--green-tx)}
.ratedlist .rd.down{color:var(--red-tx)}
.ratedlist .rr{font-family:var(--mono);font-size:13px;color:var(--ink-2);min-width:52px;text-align:right}
.ratedlist .badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1.5px solid var(--ink)}
.ratedlist .badge.up{background:var(--green);color:#fff}
.ratedlist .badge.down{background:var(--red);color:#fff}
.ratedlist .badge.chain{background:var(--card-2);font-family:var(--mono)}
.ratedlist .badge.bot{border-style:dashed;color:var(--ink-2)}
.ratednote{margin:10px 18px 14px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ── the loading screen ─────────────────────────────────────────────── */
.loading{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--sun)}
.loading p{margin:0;font-size:16px;font-weight:800;color:var(--ink)}
.bootmark{overflow:visible;animation:bootBob 1.1s var(--ease) infinite}
@keyframes bootBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
.bootretry{margin-top:4px;min-height:50px;padding:0 24px;border-radius:var(--r);border:var(--bw) solid var(--ink);background:var(--card);
  box-shadow:0 4px 0 var(--ink);font:inherit;font-size:16px;font-weight:800;color:var(--ink);cursor:pointer}

/* ── names, sign in, profile ─────────────────────────────────────────── */
.btn.oauth{justify-content:flex-start;gap:14px;padding-left:20px;background:var(--card)}
.btn.oauth svg{flex:0 0 auto}
@media (hover:hover) and (pointer:fine){.btn.oauth:hover{background:var(--sun-soft)}}
.pcard{position:relative;overflow:hidden;padding-top:86px}
.pcard::before{content:'';position:absolute;left:0;right:0;top:0;height:86px;background:var(--blue);
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.28) 1.4px, transparent 1.8px);background-size:16px 16px;
  border-bottom:var(--bw) solid var(--ink)}
.phero{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 18px 20px;margin-top:-54px;text-align:center}
.avring{position:relative;width:clamp(108px,28vw,128px);height:clamp(108px,28vw,128px);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.avring svg{position:absolute;inset:0;width:100%;height:100%}
.avring svg circle:first-child{stroke:var(--card-3)}
#pfRing{transition:stroke-dashoffset .8s var(--ease)}
.bigpic{position:relative;width:78%;height:78%;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--sun);border:var(--bw) solid var(--ink);font-size:clamp(28px,8vw,36px);font-weight:800;color:var(--ink)}
.bigpic .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lvbadge{position:absolute;right:-2px;bottom:0;min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0 8px;
  border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink)}
#profile h1{font-size:clamp(28px,7vw,38px);margin:6px 0 0}
.handle{margin:0;font-family:var(--mono);font-size:14px;color:var(--ink-2)}
.rankrow{display:flex;gap:10px;margin-top:12px}
.rankchip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;border-radius:var(--r-sm);background:var(--card-2);border:var(--bw) solid var(--ink)}
.rankchip i{font-style:normal;font-size:17px;font-weight:700;color:var(--ink)}
.rankchip em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.rankgoal{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.rg-bar{width:min(240px,72vw);height:12px;border-radius:12px;background:var(--card-3);border:1.5px solid var(--ink);overflow:hidden}
.rg-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--sun),var(--red));transition:transform .5s var(--ease)}
.rg-txt{margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
#profile .lvxp{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.statgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--bw) solid var(--ink)}
.statgrid li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 6px;text-align:center;
  border-right:1.5px dashed var(--line-2);border-bottom:1.5px dashed var(--line-2)}
.statgrid li:nth-child(3n){border-right:0}
.statgrid li:nth-last-child(-n+3){border-bottom:0}
.statgrid b{font-family:var(--mono);font-size:23px;font-weight:700}
.statgrid span{font-size:12px;font-weight:700;line-height:1.3;color:var(--ink-2)}
.idform{display:flex;flex-direction:column;gap:18px}
.idform .field{display:flex;flex-direction:column;gap:7px}
.idform .field > span{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.idform .field input{width:100%;min-height:52px;padding:0 14px;border-radius:var(--r-sm);font-weight:700;
  background:var(--card-2);border:var(--bw) solid var(--ink)}
.idform .field input:focus{outline:none;background:#fff;box-shadow:0 0 0 4px rgba(47,107,240,.25)}
.idform .field em{font-style:normal;font-size:13px;line-height:1.45;color:var(--ink-2)}
.idform .field.bad input,.idform .field.bad .atwrap{border-color:var(--red);background:var(--red-soft)}
.idform .field.good input,.idform .field.good .atwrap{border-color:var(--green)}
.idform .field.bad em{color:var(--red-tx)}
.idform .field.good em{color:var(--green-tx)}
.atwrap{display:flex;align-items:center;border-radius:var(--r-sm);border:var(--bw) solid var(--ink);background:var(--card-2);overflow:hidden}
.atwrap i{font-style:normal;padding:0 2px 0 14px;font-size:16px;font-weight:800;color:var(--ink-2)}
.idform .atwrap input{border:0;background:none;padding-left:2px;box-shadow:none}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rowhead .num{font-size:14px;color:var(--ink-2)}
#pfOut{color:var(--red-tx)}

/* ── the leaderboard ─────────────────────────────────────────────────── */
.segbar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.segbar::-webkit-scrollbar{display:none}
.segbar .seg{flex:0 0 auto;display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  font-size:14.5px;font-weight:800;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);scroll-snap-align:start;
  transition:background .15s ease,transform .1s var(--ease),box-shadow .1s var(--ease)}
.segbar .seg:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.segbar .seg.on{background:var(--ink);color:#fff}
@media (min-width:600px){.segbar{justify-content:center;flex-wrap:wrap;overflow:visible}}
.lbtop{overflow:hidden}
.lbtop-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,3.4vw,26px);padding:26px 14px 22px;
  background:repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,203,46,.2) 0deg 8deg, transparent 8deg 20deg)}
.lbtop-row:empty{display:none}
.lbc{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 1 clamp(88px,28vw,140px);min-width:0}
.lbc .face{position:relative;width:clamp(58px,17vw,76px);height:clamp(58px,17vw,76px);border-radius:50%;overflow:visible;
  display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  font-size:clamp(18px,5vw,23px);font-weight:800}
.lbc .face .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.lbc .no{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink)}
.lbc .nm{margin-top:10px;font-size:clamp(14px,3.6vw,16px);font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbc .pts{font-family:var(--mono);font-size:clamp(15px,4.4vw,19px);font-weight:700}
.lbc .hd{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbc .crown{width:28px;height:28px;color:var(--sun-lo);margin-bottom:-2px;filter:drop-shadow(0 2px 0 var(--ink))}
.lbc.one{order:2;transform:translateY(-12px)}
.lbc.two{order:1}.lbc.three{order:3}
.lbc.one .face{width:clamp(74px,22vw,98px);height:clamp(74px,22vw,98px);background:var(--sun);color:var(--ink)}
.lbc.one .no{background:var(--sun)}
.lbc.two .face{background:var(--blue)}
.lbc.three .face{background:var(--red)}
.lbc.me .nm{text-decoration:underline;text-decoration-color:var(--sun-lo);text-decoration-thickness:3px}
body.motion .lbc{animation:lbRise .5s cubic-bezier(.18,1.2,.34,1) both}
body.motion .lbc.two{animation-delay:.06s}body.motion .lbc.three{animation-delay:.14s}
body.motion .lbc.one{animation:lbRiseOne .5s cubic-bezier(.18,1.2,.34,1) .24s both}
body.motion .lbc.one .crown{animation:podCrown .5s var(--spring) .62s both}
@keyframes lbRise{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes lbRiseOne{from{opacity:0;transform:translateY(2px) scale(.94)}to{opacity:1;transform:translateY(-12px) scale(1)}}
body:not(.motion) .lbc.one .crown{opacity:1;transform:none}
.board{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1.5px dashed var(--line)}
.board li:first-child{border-top:0}
.board li.me{background:var(--sun-soft)}
.board .pl{flex:0 0 32px;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink-2)}
.board li:nth-child(-n+3) .pl{color:var(--ink)}
.board .pic{position:relative;flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--card-3);border:var(--bw) solid var(--ink);font-size:13px;font-weight:800;color:var(--ink-2)}
.board .pic .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.board .who{flex:1;min-width:0}
.board .who b{display:block;font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .who span{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.board .rk{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto}
.board .rk i{font-style:normal;font-size:14px;font-weight:800}
.board .rk em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.board .empty{padding:22px;font-size:15px;color:var(--ink-2)}
.myrank{display:flex;align-items:center;gap:14px}
#myRankBox{background:var(--sun-soft)}
.mr-place{font-family:var(--mono);font-size:22px;font-weight:700}
.mr-name{flex:1;min-width:0}
.mr-name b{display:block;font-size:17px;font-weight:800}
.mr-name span{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.mr-rank{display:flex;flex-direction:column;align-items:flex-end}
.mr-rank i{font-style:normal;font-size:15px;font-weight:800}
.mr-rank em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}

/* every face is a playing piece: a round token with a bevel on top and its
   thickness underneath, in the pawn colours, first place in yellow */
.plist .av,.plist .pic,.board .pic,.rrow .av,.seat .av,.lbc .face,.bigpic,.sp-face{
  box-shadow:inset 0 -4px 0 rgba(29,25,52,.22),inset 0 3px 0 rgba(255,255,255,.35),0 3px 0 var(--ink)}
.seat .av{box-shadow:inset 0 -2px 0 rgba(29,25,52,.22),0 2px 0 var(--ink)}
.plist .pic,.board .pic{color:#fff}
#frList li:nth-child(4n+1) .pic,#frIn li:nth-child(4n+1) .pic,#frOut li:nth-child(4n+1) .pic,#frResults li:nth-child(4n+1) .pic{background:var(--blue)}
#frList li:nth-child(4n+2) .pic,#frIn li:nth-child(4n+2) .pic,#frOut li:nth-child(4n+2) .pic,#frResults li:nth-child(4n+2) .pic{background:var(--red)}
#frList li:nth-child(4n+3) .pic,#frIn li:nth-child(4n+3) .pic,#frOut li:nth-child(4n+3) .pic,#frResults li:nth-child(4n+3) .pic{background:var(--green)}
#frList li:nth-child(4n+4) .pic,#frIn li:nth-child(4n+4) .pic,#frOut li:nth-child(4n+4) .pic,#frResults li:nth-child(4n+4) .pic{background:var(--sun);color:var(--ink)}
.board li .pic{background:var(--blue)}
.board li:nth-child(1) .pic{background:var(--sun);color:var(--ink)}
.board li:nth-child(2) .pic{background:var(--red)}
.board li:nth-child(3) .pic{background:var(--green)}
.board li.me .pic{outline:3px solid var(--sun-lo);outline-offset:2px}

/* player names bought in the shop: printed on an ink plate so a colour made
   for a dark table still reads; the plain name is just the text around it */
.pn{color:var(--n1,inherit)}
.pn[style*="F7F3ED"]{color:inherit !important}
.pn:not([style*="F7F3ED"]):not([style*="inherit"]):not(.pn-grad):not(.pn-sweep):not(.pn-shine):not(.pn-spectrum):not(.pn-glitch):not(.pnx){
  display:inline-block;padding:0 .38em;border-radius:6px;background-color:var(--ink);line-height:1.35;max-width:100%;vertical-align:baseline;overflow:hidden;text-overflow:ellipsis}
.pn-grad,.pn-sweep,.pn-shine,.pn-glitch,.pn-spectrum{-webkit-background-clip:text;background-clip:text;color:transparent !important;background-repeat:repeat}
/* a gradient name cannot sit on a plate (the plate would paint over it), so
   it gets an ink edge instead, drawn after the glyphs */
.pn-grad,.pn-sweep,.pn-shine,.pn-spectrum,.pn-glitch{
  filter:drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))}
.pn-grad{background-image:linear-gradient(92deg,var(--n1),var(--n2))}
.pn-sweep{background-image:linear-gradient(92deg,var(--n1),var(--n2),var(--n1));background-size:300% 100%}
.pn-spectrum{background-image:linear-gradient(92deg,#FF5C2B,#FFD37A,#5FD39A,#41E0FF,#B07CFF,#FF5C2B);background-size:300% 100%}
.pn-shine{background-image:linear-gradient(100deg,var(--n1) 0%,var(--n2) 44%,var(--n2) 54%,var(--n1) 100%);background-size:280% 100%}
.pn-glitch{background-image:linear-gradient(92deg,var(--n1),var(--n2))}
body.motion .pn-sweep,body.motion .pn-spectrum{animation:pnSweep 4.6s linear infinite}
body.motion .pn-shine{animation:pnSweep 3.4s linear infinite}
@keyframes pnSweep{from{background-position:0% 0}to{background-position:-300% 0}}
body.motion .pn-cycle{animation:pnCycle 6.5s ease-in-out infinite}
@keyframes pnCycle{0%,100%{color:var(--n1)}50%{color:var(--n2)}}
body.motion .pn-glitch{animation:pnGlitch 2.6s steps(1) infinite}
@keyframes pnGlitch{0%,86%,100%{transform:none;filter:none}88%{transform:translateX(-2px) skewX(-8deg);filter:hue-rotate(60deg)}90%{transform:translateX(2px)}92%{transform:translateX(-1px) skewX(6deg);filter:hue-rotate(-50deg)}94%{transform:none}}

/* deleting the account: a quiet panel at the foot of the profile, red only once opened */
.delzone .phead h2{color:var(--red-tx)}
.delnote{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.delopen{align-self:flex-start;min-height:48px;padding:0 20px;font-size:15px;color:var(--red-tx);box-shadow:0 4px 0 var(--ink)}
.delbox{display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:var(--r-sm);background:var(--red-soft);border:var(--bw) dashed var(--red)}
.delbox .field input{background:#fff}
.delrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.delgo{min-height:50px;padding:0 22px;font-size:15.5px;background:var(--red);color:#fff}
.delgo:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 3px 0 var(--ink);transform:none}
@media (hover:hover) and (pointer:fine){.delopen:hover{background:var(--red-soft)}}

.delbox .atwrap{background:#fff}

/* ── 04-modes.css ── */
/* ── der, die, das ───────────────────────────────────────────────────── */
.artstage{justify-content:center;gap:clamp(14px,3vh,26px);padding-bottom:clamp(16px,4vh,36px)}
.artask,.wsask{margin:0;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* the question is a playing card */
.artcard,.wscard{position:relative;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:34px 18px 24px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);
  transition:background .25s ease,transform .25s var(--ease)}
.artcard::after,.wscard::after{content:'';position:absolute;inset:7px;border:1.5px dashed var(--line-2);border-radius:calc(var(--r-lg) - 6px);pointer-events:none}
.clockbar{position:absolute;left:18px;right:18px;top:14px;height:8px;border-radius:8px;background:var(--card-3);overflow:hidden;z-index:1}
.clockbar i{display:block;height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,var(--red),var(--sun));transform-origin:0 50%;transform:scaleX(1)}
.artcard.hot .clockbar i{background:var(--red)}
.artslot{display:flex;align-items:baseline;justify-content:center;gap:.34em;flex-wrap:wrap;width:100%;min-width:0}
.artart{font-size:clamp(22px,6vw,32px);font-weight:800;color:var(--gc,var(--ink-3));opacity:0;transform:translateX(6px);
  transition:opacity .28s ease,transform .28s var(--ease)}
.artcard.told .artart{opacity:1;transform:none}
.artword{font-size:clamp(30px,8.6vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.artcard.len2 .artword{font-size:clamp(25px,7vw,42px)}
.artcard.len3 .artword{font-size:clamp(21px,5.6vw,34px)}
.artmean{min-height:1.3em;font-size:15px;line-height:1.4;color:var(--ink-2);opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s var(--ease)}
.artcard.told .artmean{opacity:1;transform:none}
.artcard.right{background:color-mix(in srgb,var(--gb,var(--green)) 14%,#fff)}
.artcard.wrong{background:var(--red-soft)}
body.motion .artcard.fresh .artslot,body.motion .artcard.fresh .vbline{animation:artIn .36s var(--spring)}
@keyframes artIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
/* three coloured pawns to answer with */
.artpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2.4vw,12px);width:100%;max-width:520px}
.artpick button{position:relative;min-height:clamp(70px,15vw,86px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:#fff;background:var(--gb);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 5px 0 var(--ink);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),opacity .18s ease,filter .15s ease}
.artpick .pw{font-size:clamp(22px,6vw,28px);font-weight:800;letter-spacing:-.01em}
.artpick .pk{font-family:var(--mono);font-size:11px;font-weight:700;opacity:.7;display:none}
@media (hover:hover) and (min-width:720px){.artpick .pk{display:block}}
.artpick button:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.artpick button:disabled{cursor:default}
/* The answer given, pressed in while the server judges it, so a slow line
   reads as waiting rather than as a game that stopped listening. */
.artpick button.pending,.vbpick button.pending,.wspick button.pending{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.artpick button:hover:not(:disabled){filter:brightness(1.08)}}
.artpick button.hit{box-shadow:0 5px 0 var(--ink),0 0 0 5px color-mix(in srgb,var(--gb) 35%,transparent)}
.artpick button.show{box-shadow:0 5px 0 var(--ink),0 0 0 4px var(--sun)}
.artpick button.miss{opacity:.45}
.artpick button.dim{opacity:.35}
body.motion .artpick button.hit,body.motion .vbpick button.hit{animation:artPop .42s var(--spring)}
body.motion .artpick button.miss,body.motion .vbpick button.miss{animation:artShake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes artPop{0%{transform:scale(1)}38%{transform:scale(1.09) rotate(-2deg)}100%{transform:scale(1)}}
@keyframes artShake{0%,100%{transform:translateX(0)}22%{transform:translateX(-7px)}58%{transform:translateX(6px)}82%{transform:translateX(-2px)}}
#artover .vlist .head{cursor:default}

/* verbs */
.vbline{display:flex;align-items:baseline;justify-content:center;gap:.4em;flex-wrap:wrap;width:100%;min-width:0}
.vblead{font-size:clamp(22px,6vw,32px);font-weight:700;color:var(--ink-2)}
.vbgap{min-width:clamp(96px,28vw,170px);padding:0 .2em;border-bottom:4px solid var(--sun-lo);
  font-size:clamp(26px,7vw,42px);font-weight:800;letter-spacing:-.02em;text-align:center;overflow-wrap:anywhere;transition:border-color .3s ease}
.artcard.right .vbgap{border-bottom-color:var(--green)}
.artcard.wrong .vbgap{border-bottom-color:var(--red)}
.vbinf{display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:2px}
.vbinf b{font-size:16px;font-weight:800;padding:1px 8px;border-radius:8px;background:var(--ink);color:#fff}
.vbinf span{font-size:14.5px;color:var(--ink-2)}
.vbpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2.4vw,12px);width:100%;max-width:520px}
.vbpick button{min-height:clamp(58px,12vw,68px);display:flex;align-items:center;justify-content:center;padding:6px 12px;
  font-size:clamp(16px,4.4vw,20px);font-weight:800;overflow-wrap:anywhere;color:var(--ink);
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 5px 0 var(--ink);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .15s ease,opacity .18s ease}
.vbpick button:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.vbpick button:disabled{cursor:default}
@media (hover:hover) and (pointer:fine){.vbpick button:hover:not(:disabled){background:var(--sun-soft)}}
.vbpick button.hit{background:var(--green);color:#fff}
.vbpick button.show{background:var(--green-soft);box-shadow:0 5px 0 var(--ink),0 0 0 4px var(--green)}
.vbpick button.miss{opacity:.5;background:var(--red-soft)}
.vbpick button.dim{opacity:.35}

@media (max-width:620px){
  .artstage{justify-content:flex-start;gap:12px;padding-top:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .artstage .artask{margin-top:auto}
  .artstage .artcard{flex:0 1 auto;min-height:clamp(210px,36vh,330px);max-height:46vh;justify-content:center;padding:30px 16px 22px}
  .artstage .artword{font-size:clamp(40px,13vw,62px)}
  .artstage .artcard.len2 .artword{font-size:clamp(32px,10vw,48px)}
  .artstage .artcard.len3 .artword{font-size:clamp(25px,7.6vw,38px)}
  .artpick button{min-height:clamp(80px,13vh,110px)}
  .vbpick button{min-height:clamp(60px,8.6vh,76px)}
  #artgame .hud .spacer,#vbgame .hud .spacer,#wsgame .hud .spacer{display:block;flex:1 1 auto}
}

/* ── Wortschatz ──────────────────────────────────────────────────────── */
/* the path is a board track: stations joined by a dotted road */
.path{display:flex;flex-direction:column;padding:6px 0}
.stop{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;text-align:left;transition:background .15s ease}
.stop:disabled{cursor:default}
.stop:active:not(:disabled){background:var(--card-2)}
@media (hover:hover) and (pointer:fine){.stop:hover:not(:disabled){background:var(--card-2)}}
.stop::before{content:'';position:absolute;left:37px;top:0;bottom:0;width:0;border-left:4px dotted var(--line-2)}
.stop:first-child::before{top:50%}
.stop:last-child::before{bottom:50%}
.stop.done::before{border-left-color:var(--green)}
.st-mark{position:relative;z-index:1;flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:background .2s ease,transform .25s var(--spring)}
.stop.done .st-mark{background:var(--green);color:#fff}
.stop.here .st-mark{background:var(--sun);transform:scale(1.08)}
.st-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-txt b{font-size:16px;font-weight:800}
.st-txt span{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop[aria-disabled="true"]{opacity:.5}
.st-bar{flex:0 0 56px;height:10px;border-radius:10px;background:var(--card-3);border:1.5px solid var(--line-2);overflow:hidden}
.st-bar i{display:block;height:100%;width:100%;background:var(--sun-lo);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
.stop.done .st-bar i{background:var(--green)}
.st-lock{flex:0 0 auto;color:var(--ink-2);display:flex}
@media (max-width:400px){.stop{gap:11px;padding:11px 12px}.stop::before{left:33px}.st-bar{flex-basis:40px}}
.wsstage{justify-content:center;gap:clamp(12px,2.6vh,22px);padding-bottom:clamp(16px,4vh,36px)}
.wsrun{display:block;width:100%;max-width:520px;height:12px;border-radius:12px;background:var(--card);border:var(--bw) solid var(--ink);overflow:hidden}
.wsrun i{display:block;height:100%;width:100%;background:var(--sun);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.wscard{padding:28px 18px 24px}
.wsline{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;max-width:100%}
.wsart{font-size:clamp(18px,4.6vw,24px);font-weight:800;padding:1px 9px;border-radius:9px;color:#fff;background:var(--ink-3)}
.wscard.m .wsart{background:var(--der-bg)}
.wscard.f .wsart{background:var(--die-bg)}
.wscard.n .wsart{background:var(--das-bg)}
.wsword{font-size:clamp(32px,8.6vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.wspl{display:flex;align-items:baseline;gap:9px;font-size:15px;color:var(--ink-2)}
.wspl i{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wscard.right{background:var(--green-soft)}
body.motion .wscard.right{animation:wsRight .6s var(--spring)}
@keyframes wsRight{0%{transform:scale(1)}32%{transform:scale(1.03) rotate(-1deg)}100%{transform:scale(1)}}
.wscard.wrong{background:var(--red-soft)}
body.motion .wscard.wrong{animation:nope .34s cubic-bezier(.36,.07,.19,.97)}
.wsplus{position:absolute;left:50%;top:0;transform:translateX(-50%);pointer-events:none;padding:2px 10px;border-radius:999px;
  font-size:15px;font-weight:800;color:#fff;background:var(--green);border:1.5px solid var(--ink)}
body.motion .wsplus{animation:wsPlus 1s var(--ease) forwards}
@keyframes wsPlus{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}22%{opacity:1;transform:translate(-50%,-10px) scale(1.06)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}}
.hot #wsStreak{color:var(--red-tx)}
body.motion .hot #wsStreak{animation:sylBeat .7s var(--ease) infinite}
.wspick{position:relative;display:flex;flex-direction:column;gap:9px;width:100%;max-width:520px}
.wspick button{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;text-align:left;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--ink);
  font-size:16px;font-weight:700;color:var(--ink);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .15s ease,opacity .2s ease}
.wspick button .pk{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--card-3);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-2)}
.wspick button .pv{flex:1;min-width:0;overflow-wrap:anywhere}
.wspick button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.wspick button:disabled{cursor:default}
@media (hover:hover) and (pointer:fine){.wspick button:hover:not(:disabled){background:var(--sun-soft)}}
.wspick button.pending{background:var(--sun-soft)}
.wspick button.hit{background:var(--green);color:#fff}
.wspick button.hit .pk{background:rgba(255,255,255,.25);color:#fff}
.wspick button.show{background:var(--green-soft);box-shadow:0 4px 0 var(--ink),0 0 0 4px var(--green)}
.wspick button.wrong{background:var(--red-soft);color:var(--red-tx)}
.wspick button.dim{opacity:.35}
/* what the wrong choice actually means, as a little note under it */
.wspick button .pw{display:block;width:fit-content;max-width:100%;margin:6px 0 0;padding:3px 9px;border-radius:8px;
  background:#fff;border:1.5px dashed var(--red);font-size:14px;font-weight:700;color:var(--ink)}
.wspick button .pw i{font-style:normal;font-weight:800;margin-right:.35em;font-size:.85em;color:var(--red-tx)}
body.motion .wspick button .pw{animation:fadeUp .34s var(--ease) .16s both}
.wspick button.wrong .pv{display:block}
@media (max-width:400px){.wspick button{min-height:52px;font-size:15px;padding:9px 12px}}

/* ── the vocabulary book ─────────────────────────────────────────────── */
.counthero{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 16px 18px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.counthero b{font-size:clamp(56px,16vw,92px);font-weight:800;line-height:.9;letter-spacing:-.05em;font-variation-settings:'wdth' 80}
.counthero span{font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.mixbar{display:flex;width:min(100%,360px);height:16px;margin-top:10px;border-radius:16px;background:var(--card-3);border:var(--bw) solid var(--ink);overflow:hidden}
.mixbar i{display:block;height:100%;transition:width .6s var(--ease)}
.mixbar i + i{border-left:1.5px solid var(--ink)}
.mixbar i.m{background:var(--der-bg)}.mixbar i.f{background:var(--die-bg)}.mixbar i.n{background:var(--das-bg)}
.mixbar i.v{background:#8B5CF6}.mixbar i.o{background:var(--card-3)}
.mixkey{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:8px}
.mixkey span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.mixkey i{width:12px;height:12px;flex:0 0 12px;border-radius:4px;border:1.5px solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips button{min-height:44px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:800;
  color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:background .15s ease,color .15s ease,transform .1s var(--ease),box-shadow .1s var(--ease)}
.chips button:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.chips button.g-m,.chips button.g-f,.chips button.g-n{color:var(--gc)}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff}
.chips button.g-m[aria-pressed="true"],.chips button.g-f[aria-pressed="true"],.chips button.g-n[aria-pressed="true"]{background:var(--gb);color:#fff}
.vlist{list-style:none;margin:0;padding:4px 0}
.vlist > li{position:relative}
.vlist > li + li{border-top:1.5px dashed var(--line)}
.vlist .head{display:flex;align-items:baseline;gap:12px;width:100%;padding:13px 16px;text-align:left;cursor:pointer;transition:background .15s ease}
.vlist .head:active{background:var(--card-2)}
@media (hover:hover) and (pointer:fine){.vlist .head:hover{background:var(--card-2)}}
.vlist > li.open .head{background:var(--sun-soft)}
.vlist .tile{flex:0 0 38px;align-self:center;height:26px;display:grid;place-items:center;padding:0;border-radius:7px;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;background:var(--gb,var(--ink-3));border:0;box-shadow:none;animation:none}
.vlist .say{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vlist .wd{font-size:17px;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlist .gl{font-size:14px;color:var(--ink-2);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlist .gl .two{font-style:normal;font-size:11px;font-weight:800;padding:1px 6px;margin-left:6px;border-radius:6px;background:var(--sun);color:var(--ink);white-space:nowrap}
.vlist .ct{flex:0 0 auto;align-self:center;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.vlist .ct i{font-style:normal;font-size:10.5px;opacity:.75}
.vlist .chev{flex:0 0 auto;align-self:center;color:var(--ink-2);display:flex;transition:transform .25s var(--ease)}
.vlist .head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.vlist .body{padding:4px 16px 16px 66px}
@media (max-width:430px){.vlist .head{padding:12px 13px;gap:10px}.vlist .body{padding:4px 13px 14px 13px}.vlist .tile{flex-basis:34px}}
.vlist .body ol{margin:0;padding:0;list-style:none;counter-reset:m;display:flex;flex-direction:column;gap:6px}
.vlist .body ol li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.45}
.vlist .body ol li::before{content:counter(m);counter-increment:m;flex:0 0 auto;min-width:20px;height:20px;display:grid;place-items:center;border-radius:6px;
  background:var(--card-3);font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-2)}
.vlist .body .meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;font-size:12.5px;color:var(--ink-2)}
.vlist .body .meta span{padding:4px 9px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card-2)}
.vlist .body .meta b{color:var(--ink);font-weight:800}
.vlist .body .note{margin:0 0 10px;font-size:14px;color:var(--ink-2);line-height:1.45}
.vlist .body .note.quiet{margin:8px 0 0;font-size:13px}
.vlist .empty{padding:22px;font-size:15px;color:var(--ink-2)}
.vlist .alt{display:flex;gap:8px;align-items:baseline;margin:8px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.vlist .alt span{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:6px;background:var(--ink);color:#fff}
.senses{display:flex;flex-direction:column;gap:8px}
.sense{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--gd,var(--card-2));border:1.5px solid color-mix(in srgb,var(--gb,var(--ink)) 50%,transparent)}
.sense .sa{flex:0 0 auto;min-width:28px;font-size:13px;font-weight:800;color:var(--gc)}
.sense .sw{flex:0 0 auto;font-size:15px;font-weight:800}
.sense .sm{min-width:0;font-size:14px;color:var(--ink-2)}
@media (max-width:430px){.sense{flex-wrap:wrap;gap:6px}.sense .sm{flex:1 0 100%}}
#vocab .panel .pbody{padding:14px 14px 6px}

/* ── Funk, the open channel ──────────────────────────────────────────── */
.funk{overflow:hidden;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.funk-head{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;text-align:left;transition:background .15s ease}
.funk-head:active{background:var(--card-2)}
@media (hover:hover) and (pointer:fine){button.funk-head:hover{background:var(--card-2)}}
.funk-wave{flex:0 0 auto;display:flex;align-items:flex-end;gap:3px;width:36px;height:36px;padding:8px 7px;border-radius:12px;background:var(--card-3);border:1.5px solid var(--ink)}
.funk-wave i{flex:1;height:100%;border-radius:2px;background:var(--ink-3);transform:scaleY(.3);transform-origin:bottom;transition:background .2s ease}
.funk.live .funk-wave{background:var(--green-soft)}
.funk.live .funk-wave i{background:var(--green)}
body.motion .funk.live .funk-wave i{animation:funkBar .92s ease-in-out infinite}
body.motion .funk.live .funk-wave i:nth-child(2){animation-delay:.13s}
body.motion .funk.live .funk-wave i:nth-child(3){animation-delay:.27s}
body.motion .funk.live .funk-wave i:nth-child(4){animation-delay:.06s}
@keyframes funkBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.funk-id{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;min-width:0}
.funk-id b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.funk-id em{font-style:normal;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.funk-tick{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.funk-tick b{color:var(--ink);font-weight:800}
body.motion .funk-tick.fresh{animation:funkIn .4s var(--ease) both}
@keyframes funkIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.funk-here{flex:0 0 auto;font-family:var(--mono);font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1.5px solid var(--ink);background:var(--card)}
.funk.live .funk-here{background:var(--green);color:#fff}
.funk-here:empty{display:none}
.funk-caret{flex:0 0 auto;transition:transform .25s var(--ease)}
.funk-head[aria-expanded="true"] .funk-caret{transform:rotate(180deg)}
.funk-head[aria-expanded="true"] .funk-tick{visibility:hidden}
.funk-body{border-top:var(--bw) dashed var(--line-2)}
.funk-log{height:210px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.funk-chips{display:flex;gap:6px;padding:10px 14px 0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.funk-chips::-webkit-scrollbar{display:none}
.funk-chips button{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;padding:7px 12px;text-align:left;border-radius:12px;
  border:1.5px solid var(--ink);background:var(--sun-soft);transition:background .15s ease}
.funk-chips button:active{background:var(--sun)}
.funk-chips button b{font-size:14px;font-weight:800;white-space:nowrap}
.funk-chips button span{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.funk-tip{margin:8px 14px 0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.funk-bar{border-top:0}
.funk-gate{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:12px 14px;border-top:var(--bw) dashed var(--line-2);font-size:14px;color:var(--ink-2)}
@media (max-width:560px){.funk-id em{display:none}.funk-log{height:190px}}
.gvpanel .funk-head{cursor:default}
.gv-body{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px}

/* ── the shop ────────────────────────────────────────────────────────── */
.shop{gap:14px}
.shophead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.shophead h1{margin:0;font-size:clamp(34px,9vw,52px)}
.gembig{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--gem-tx)}
.gembig b{font-size:17px;font-weight:700;color:var(--ink)}
/* the display case: dark, so every effect shows the way it was made */
.stagebox{overflow:hidden;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.shopstage{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;padding:20px;isolation:isolate;
  background:#1D1934;color:#fff;--plate:#2A2450;--space:#3A3466;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1.2px,transparent 1.6px);background-size:18px 18px}
.shopstage::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.7;background:radial-gradient(60% 60% at 50% 48%,var(--bglow),transparent 72%)}
.shopstage .b-plate{stroke:#5B5490}
.stagefoot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:var(--bw) solid var(--ink)}
.stagenm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.stagenm b{font-size:17px;font-weight:800}
.tierchip{align-self:flex-start;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--card-3);color:var(--ink-2)}
.tierchip[data-tier="rare"]{background:#DDEBFF;color:#1F55B8}
.tierchip[data-tier="epic"]{background:#EEE2FF;color:#6A2FC0}
.tierchip[data-tier="legendary"]{background:#FFF0C7;color:#8A5A00}
.tierchip[data-tier="mythic"]{background:#FFE0EE;color:#B0215F}
.stageprice{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gem-tx);white-space:nowrap}
.stageprice:empty{display:none}
.stageprice.cant{color:var(--red-tx)}
.stagebomb{width:156px;height:156px}
.stagename-txt{font-size:34px;font-weight:800;letter-spacing:-.01em;text-align:center;word-break:break-word;max-width:100%}
.stagetiles{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.stagesfx{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.stagesfx button{min-height:42px;padding:0 15px;border-radius:12px;font-size:14px;font-weight:800;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);transition:background .15s ease}
.stagesfx button:active{background:rgba(255,255,255,.2)}
.shoptabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;overscroll-behavior-x:contain}
.shoptabs::-webkit-scrollbar{display:none}
.shoptabs button{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 14px;border-radius:14px;
  font-size:14px;font-weight:800;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:background .15s ease,transform .1s var(--ease),box-shadow .1s var(--ease)}
.shoptabs button:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.shoptabs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.shopgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shopcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 8px 11px;text-align:center;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease}
.shopcard:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.shopcard:hover{background:var(--sun-soft)}}
.shopcard[aria-pressed="true"]{background:var(--sun);box-shadow:0 4px 0 var(--ink),0 0 0 3px var(--card),0 0 0 5px var(--ink)}
.shopcard.myth{background:linear-gradient(160deg,#FFE0EE,#FFF0C7)}
.shopcard .swatch{width:100%;height:52px;display:grid;place-items:center;border-radius:10px;background:#1D1934;color:#fff;--plate:#2A2450}
.shopcard .nm{font-size:13.5px;font-weight:800;line-height:1.2}
.shopcard .cost{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--gem-tx)}
.shopcard .cost.have{color:var(--ink-2)}
.shopcard .cost.worn{color:var(--green-tx)}
.shopcard[aria-pressed="true"] .cost,.shopcard[aria-pressed="true"] .cost.worn{color:var(--ink)}
.shopcard .tierchip{font-size:10.5px;align-self:center}
.swatchname{display:inline-block;font-size:17px;font-weight:800}
.swatchwin{display:flex;align-items:center;justify-content:center;gap:7px;height:30px}
.swatchwin .wp{position:static;opacity:1;animation:none;width:var(--s,10px);height:var(--s,10px)}
.swatchwin .wp-bar{width:calc(var(--s,10px) * .5);height:calc(var(--s,10px) * 2)}
.earnlist{list-style:none;margin:0;padding:0}
.earnlist li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1.5px dashed var(--line);font-size:15px;color:var(--ink-2)}
.earnlist li:first-child{border-top:0}
.earnlist li b{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gem-tx);white-space:nowrap}
@media (max-width:640px){.shopgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.shopstage{min-height:190px;padding:16px}.stagebomb{width:130px;height:130px}.stagename-txt{font-size:28px}}
@media (max-width:420px){.stagefoot{flex-wrap:wrap}.stagefoot .btn{flex:1 0 100%;order:3}}

/* win effects: the pieces that fly */
.winfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.wp{position:absolute;left:50%;top:50%;width:var(--s,10px);height:var(--s,10px);background:var(--c,var(--red));opacity:0;will-change:transform,opacity}
.wp-dot{border-radius:50%}
.wp-bar{width:calc(var(--s,10px) * .42);height:calc(var(--s,10px) * 2.1);border-radius:2px}
.wp-ring{background:none;border:2px solid var(--c,var(--red));border-radius:50%}
.wp-coin{border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.22)}
.wp-petal{border-radius:60% 10% 60% 10%}
.wp-shard{clip-path:polygon(50% 0,100% 38%,72% 100%,28% 100%,0 38%)}
.wp-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.wp-flash{border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 68%)}
body:not(.motion) .winfx{display:none}
.winbox{position:relative;width:100%;height:100%;min-height:170px;overflow:hidden}
.winbox.winpreview{height:340px;min-height:340px}
.winpreview-profile{position:absolute;z-index:1;left:50%;top:43%;transform:translate(-50%,-43px);width:82%;text-align:center;pointer-events:none}
.winpreview-face{position:relative;width:86px;height:86px;margin:auto;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--ink);border:3px solid #fff}
.winpreview-init{font-size:30px;font-weight:800}
.winpreview-picture{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.winpreview-picture img{width:100%;height:100%;object-fit:cover}
.winpreview-tag{margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-hi)}
.winpreview-name{margin-top:4px;font-size:25px;font-weight:800;line-height:1.2;overflow-wrap:anywhere;color:#fff}
.winreplay{position:absolute;z-index:2;left:50%;bottom:10px;transform:translateX(-50%);min-height:40px;padding:0 16px;border-radius:12px;
  font-size:13px;font-weight:800;color:var(--ink);background:var(--sun);border:var(--bw) solid var(--ink)}

/* ── news ────────────────────────────────────────────────────────────── */
.news{gap:18px}
.newslist{display:flex;flex-direction:column;gap:16px}
.newsday{padding:16px 18px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift-sm)}
.newsday h2{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:800;background:var(--sun);border:1.5px solid var(--ink)}
.newsday ul{list-style:none;margin:0;padding:0}
.newsday li{position:relative;padding:0 0 12px 22px;font-size:15.5px;line-height:1.6;color:var(--ink)}
.newsday li:last-child{padding-bottom:0}
.newsday li::before{content:'';position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:3px;background:var(--blue);border:1.5px solid var(--ink);transform:rotate(45deg)}
.newsday li:nth-child(3n+2)::before{background:var(--red)}
.newsday li:nth-child(3n)::before{background:var(--green)}
.newsempty{margin:0;font-size:15px;color:var(--ink-2)}

/* ── looking for a game ──────────────────────────────────────────────── */
.seeking{position:fixed;inset:0;z-index:58;display:flex;align-items:center;justify-content:center;opacity:0;
  background:var(--sun);background-image:repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.3) 0deg 7deg, transparent 7deg 18deg)}
.seeking.go{opacity:1;animation:fadeIn .3s ease forwards}
.seeking.out{animation:fadeOut .38s ease forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.seek-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 24px 24px;text-align:center;width:min(92vw,400px);
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.seek-bomb{position:relative;width:clamp(150px,44vw,200px);height:clamp(150px,44vw,200px)}
.seek-bomb svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-body{fill:var(--ink)}
.sk-track{stroke:var(--space)}
.sk-arc{stroke:var(--red);stroke-dasharray:112 340.4;stroke-dashoffset:112}
.sk-burn{transform-box:view-box;transform-origin:100px 100px}
.sk-glow{fill:var(--sun);opacity:.5}
.sk-star{fill:var(--sun);stroke:var(--ink);stroke-width:1.5}
.sk-head{transform-box:view-box;transform-origin:172px 100px}
.sk-ember{fill:var(--red);opacity:0}
.sk-syl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,8vw,38px);font-weight:800;color:#fff}
.seek-seats{display:flex;gap:7px;margin-top:6px}
.seek-seats i{width:22px;height:22px;border-radius:50%;background:var(--card-3);border:var(--bw) solid var(--ink);transition:background .3s ease,transform .3s var(--spring)}
.seek-seats i.set:nth-child(4n+1){background:var(--sun)}.seek-seats i.set:nth-child(4n+2){background:var(--blue)}
.seek-seats i.set:nth-child(4n+3){background:var(--red)}.seek-seats i.set:nth-child(4n+4){background:var(--green)}
.seek-seats i.set{transform:translateY(-3px)}
.seek-tag{margin-top:8px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.seek-state{font-size:clamp(24px,7vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.seek-sub{font-family:var(--mono);font-size:13.5px;color:var(--ink-2)}
.seek-eta{width:min(210px,62vw);height:10px;border-radius:10px;background:var(--card-3);border:1.5px solid var(--ink);overflow:hidden}
.seek-eta i{display:block;height:100%;width:100%;background:var(--sun-lo);transform-origin:left center;transition:transform .25s linear}
#seekStop{margin-top:10px}
body.motion .seeking .sk-burn{animation:spinRing 2.1s linear infinite}
body.motion .seeking .sk-head{animation:skFlicker .62s ease-in-out infinite}
body.motion .seeking .seek-bomb{animation:breathe 1.9s var(--ease) infinite}
body.motion .seeking .sk-ember{animation:skEmber 1.05s linear infinite}
body.motion .seeking .e2{animation-duration:1.35s;animation-delay:.34s}
body.motion .seeking .e3{animation-duration:.88s;animation-delay:.61s}
@keyframes skFlicker{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}
@keyframes skEmber{0%{opacity:.95;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(11px,-15px) scale(.4)}}
.seeking.found .sk-burn{animation:none}
.seeking.found .sk-arc{stroke:var(--green);stroke-dasharray:452.4 0;transition:stroke-dasharray .5s var(--ease)}
.seeking.found .sk-ember{animation:none;opacity:0}
.seeking.found .seek-bomb{animation:none}
.seeking.found .sk-syl{color:var(--sun)}
body.motion .seeking.found .sk-head{animation:skBurst .55s var(--spring) forwards}
body.motion .seeking.found .seek-state{animation:skFound .5s var(--spring)}
body.motion .seeking.found .seek-bomb{animation:skPop .5s var(--spring)}
@keyframes skBurst{0%{transform:scale(1);opacity:1}55%{transform:scale(2.1) rotate(20deg);opacity:1}100%{transform:scale(3) rotate(45deg);opacity:0}}
@keyframes skFound{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}
@keyframes skPop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
body:not(.motion) .sk-arc{stroke-dasharray:226 226}

/* ── the moment a game is decided ────────────────────────────────────── */
.winover{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;opacity:0;
  background:var(--blue);background-image:repeating-conic-gradient(from 0deg at 50% 44%, rgba(255,255,255,.14) 0deg 7deg, transparent 7deg 18deg)}
.winover.go{opacity:1;animation:fadeIn .34s ease forwards}
.winover.out{animation:fadeOut .42s ease forwards}
.win-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 24px;text-align:center;max-width:min(92vw,440px);color:#fff}
.win-halo{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(104px,28vw,136px);height:clamp(104px,28vw,136px)}
.win-face{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--sun);color:var(--ink);border:4px solid var(--ink);box-shadow:0 0 0 6px #fff,0 8px 0 6px var(--ink);
  font-size:clamp(34px,9vw,44px);font-weight:800}
.win-face .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.win-ray{position:absolute;inset:-120%;border-radius:50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,224,122,.55) 0deg 10deg, transparent 10deg 24deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%)}
.win-wave{position:absolute;inset:0;border-radius:50%;pointer-events:none;border:4px solid var(--sun);opacity:0}
.win-spark{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;opacity:0;background:var(--sun);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.win-crown{width:40px;height:40px;color:var(--sun);margin-bottom:4px;filter:drop-shadow(0 3px 0 var(--ink))}
.win-tag{margin-top:14px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--sun);border:var(--bw) solid var(--ink)}
.win-name{font-size:clamp(34px,10vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:100%;overflow-wrap:anywhere;text-shadow:0 4px 0 var(--ink)}
.win-sub{font-family:var(--mono);font-size:14px;font-weight:600;color:#fff;opacity:.92}
.winover.go .win-face,.winover.go .win-crown,.winover.go .win-tag,.winover.go .win-name,.winover.go .win-sub{opacity:1}
.winover.premium{background:#0D0A1C}
.winover.premium .win-ray,.winover.premium .win-wave,.winover.premium .win-spark{display:none}
.winover.premium .win-face{border-color:var(--victory-accent,#fff);box-shadow:0 0 0 5px rgba(255,255,255,.1)}
.winover.premium .win-crown{color:var(--victory-accent,var(--sun))}
.winover.premium .win-tag{background:var(--victory-accent,var(--sun))}
.winover.premium .win-name{text-shadow:0 3px 18px #040713}
body.motion .winover.go .win-face{animation:winFace .62s cubic-bezier(.18,1.35,.36,1) both}
body.motion .winover.go .win-ray{animation:winRays 2.8s linear both}
body.motion .winover.go .win-wave{animation:winWave 1.5s var(--ease) .26s both}
body.motion .winover.go .win-wave.d2{animation-delay:.54s}
body.motion .winover.go .win-spark{animation:winSpark 1s var(--ease) .3s both}
body.motion .winover.go .win-crown{animation:podCrown .46s var(--spring) .38s both}
body.motion .winover.go .win-tag{animation:winUp .4s var(--ease) .46s both}
body.motion .winover.go .win-name{animation:winUp .48s var(--ease) .54s both}
body.motion .winover.go .win-sub{animation:winUp .42s var(--ease) .68s both}
@keyframes winFace{from{opacity:0;transform:scale(.6) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes winUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes winWave{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@keyframes winSpark{0%{opacity:0;transform:translate(0,0) scale(.35)}22%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(1.1) rotate(120deg)}}
@keyframes winRays{0%{opacity:0;transform:rotate(0)}18%{opacity:1}78%{opacity:1}100%{opacity:0;transform:rotate(120deg)}}
body:not(.motion) .win-ray,body:not(.motion) .win-wave,body:not(.motion) .win-spark{display:none}

/* ── C-Test ──────────────────────────────────────────────────────────── */
#ctest{width:100%;max-width:760px;margin:0 auto;padding:18px var(--gut) 48px}
.ct-top,.ct-status{display:flex;justify-content:space-between;align-items:center;gap:14px}
.ct-top{margin-bottom:18px}
.ct-top .back,.ct-top .backlink{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 12px 0 6px;border-radius:12px;border:0;background:none;font:inherit;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;text-decoration:none}
.ct-top .backlink svg{flex:none}
.ct-top .back:active,.ct-top .backlink:active{background:var(--card)}
.ct-top > .eyebrow{font-size:12.5px;font-weight:700;color:var(--ink-2);text-align:right}
.ct-title{margin:8px 0 12px;font-size:clamp(34px,8vw,56px);font-weight:800;line-height:1.02;letter-spacing:-.04em}
.ct-lead{margin:0 0 8px;max-width:58ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.ct-sample{margin:22px 0;padding:18px 20px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift-sm)}
.ct-demo{margin:8px 0;font-size:clamp(20px,4.6vw,28px);line-height:1.8;font-weight:600}
.ct-demo-answer{padding:0 3px;border-radius:5px;background:var(--sun);border-bottom:3px solid var(--sun-lo)}
.ct-sample .muted,.ct-note{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ct-settings{display:grid;gap:18px;padding:18px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.ct-settings h2{margin:0;font-size:18px;font-weight:800}
.ct-choices{display:flex;flex-wrap:wrap;gap:8px}
.ct-choice{flex:1 1 auto;min-height:48px;min-width:52px;padding:10px 14px;border-radius:12px;font:inherit;font-weight:800;cursor:pointer;
  color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transition:background .15s ease,transform .1s var(--ease),box-shadow .1s var(--ease)}
.ct-choice:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.ct-choice[aria-pressed=true]{background:var(--ink);color:#fff}
.ct-settings > .btn{justify-self:start;margin-top:4px}
.ct-text-title{margin:14px 0 20px;font-size:clamp(26px,5.6vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.ct-status{margin:12px 0;padding:10px 14px;border-radius:var(--r);background:var(--card);border:var(--bw) solid var(--ink)}
.ct-clock{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;font-weight:700}
.ct-urgent{color:var(--red-tx)}
/* the passage is a sheet of the rulebook */
.ct-sheet{padding:clamp(18px,4vw,34px);background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
/* ruled like an exercise book; the rule is measured in the passage's own
   em so it sits under every line at any text size */
.ct-passage{margin:0;font-size:19px;line-height:2.3;font-weight:500;color:var(--ink);overflow-wrap:anywhere;
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(2.3em - 1.5px),rgba(47,107,240,.16) calc(2.3em - 1.5px) 2.3em)}
@media (max-width:480px){.ct-passage{line-height:2.4;background-image:repeating-linear-gradient(180deg,transparent 0 calc(2.4em - 1.5px),rgba(47,107,240,.16) calc(2.4em - 1.5px) 2.4em)}}
.ct-word{white-space:nowrap;display:inline}
.ct-gap{font:inherit;line-height:1.35;color:var(--blue-tx);font-weight:800;background:var(--sun-soft);border:0;border-bottom:3px solid var(--sun-lo);border-radius:4px 4px 0 0;
  padding:1px 2px;min-width:2ch;max-width:100%;box-sizing:content-box}
.ct-gap:focus{outline:3px solid var(--blue);outline-offset:2px;background:#fff}
.ct-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:18px 0}
.ct-special{display:flex;gap:6px}
.ct-key{width:46px;min-height:46px;border-radius:12px;font:inherit;font-size:19px;font-weight:800;cursor:pointer;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.ct-key:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink);background:var(--sun)}
.ct-progress-label{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.ct-controls progress{width:90px;height:10px;accent-color:var(--sun-lo)}
.ct-controls > .btn{margin-left:auto}
.ct-submit-warning{margin-bottom:14px;padding:16px;border-radius:var(--r);background:var(--red-soft);border:var(--bw) solid var(--ink)}
.ct-submit-warning .btn{margin:4px 8px 4px 0}
.ct-score{margin:14px 0;font-size:clamp(66px,16vw,104px);font-weight:800;line-height:1;letter-spacing:-.05em;font-variation-settings:'wdth' 80}
.ct-right{color:var(--green-tx);background:var(--green-soft);border-radius:4px}
.ct-wrong{color:var(--red-tx);background:var(--red-soft);border-bottom:2px solid var(--red);border-radius:4px}
.ct-ref{font:700 10px/1 var(--mono);vertical-align:super;color:var(--red-tx)}
.ct-corrections{padding-left:28px}
.ct-corrections li{padding:12px 6px;border-bottom:1.5px dashed var(--line)}
.ct-corrections strong{display:block}
.ct-corrections span{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.ct-total{font-size:26px;font-weight:800}
.ct-alert{color:var(--red-tx);font-weight:700}
@media (max-width:480px){.ct-passage{font-size:17px;line-height:2.4}.ct-controls > .btn{width:100%;margin-left:0}.ct-controls progress{flex:1}.ct-top > .eyebrow{max-width:170px;line-height:1.5}}

/* ── spectating ──────────────────────────────────────────────────────── */
#spectate{width:100%;max-width:760px;margin:0 auto;padding:18px var(--gut) 48px}
#spectate .ct-title,#spectate .ct-text-title{font-size:clamp(32px,8vw,52px);letter-spacing:-.035em;line-height:1.05;margin:8px 0 12px}
#spectate .ct-lead{margin:0 0 20px}
.sp-list{display:grid;grid-template-columns:1fr;gap:12px}
.sp-room{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;padding:18px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.sp-room .sp-meta,.sp-room h2{grid-column:1/-1}
.sp-room h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.sp-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--ink-2)}
.sp-live{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--red);border:1.5px solid var(--ink)}
.sp-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
body.motion .sp-live::before{animation:tyPulse 1s ease-in-out infinite}
.sp-preview-players{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.sp-preview-players li{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:700;min-width:0;max-width:100%}
.sp-preview-players li > span:not(.sp-face){flex:1;min-width:0}
.sp-face{position:relative;flex-shrink:0;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:12.5px;font-weight:800;background:var(--sun);border:var(--bw) solid var(--ink)}
.sp-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-bot{flex:none;white-space:nowrap;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:6px;border:1.5px dashed var(--ink);color:var(--ink-2)}
.sp-room > .btn{align-self:end;margin:0}
.sp-more{grid-column:1/-1;border-top:1.5px dashed var(--line-2);padding-top:10px}
.sp-more summary{cursor:pointer;min-height:36px;padding:6px 0;font-size:14px;font-weight:700;color:var(--ink-2)}
.sp-more .sp-preview-players{padding-top:10px}
.sp-state{margin:8px 0 0;padding:24px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.sp-empty{margin:0 0 10px;padding:0;font-size:18px;font-weight:700;line-height:1.5;color:var(--ink)}
.sp-state .ct-note{margin:0 0 20px}
.sp-state .btn + .btn{margin-left:10px}
.sp-table{margin:16px 0 12px;padding:24px 18px;text-align:center;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.sp-table > .eyebrow{overflow-wrap:anywhere;line-height:1.6;font-weight:700;color:var(--ink-2)}
.sp-bomb{--remaining:360deg;position:relative;width:180px;height:180px;margin:20px auto 14px;border-radius:50%;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(var(--red) var(--remaining),var(--space) 0);border:3px solid var(--ink)}
.sp-bomb::before{content:'';position:absolute;inset:12px;z-index:-1;border-radius:50%;background:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 3px #fff}
.sp-syllable{font-size:50px;font-weight:800;letter-spacing:-.04em;color:#fff}
.sp-seconds{font-family:var(--mono);font-size:13px;color:var(--sun)}
.sp-typing{min-height:26px;margin:0;font-family:var(--mono);font-size:18px;font-weight:700;color:var(--blue-tx);overflow-wrap:anywhere}
.sp-seats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;list-style:none;margin:14px 0 24px}
.sp-seat{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border-radius:var(--r);background:var(--card);border:var(--bw) solid var(--ink)}
.sp-seat > div{flex:1;min-width:0}
.sp-seat b{display:block;font-size:15px;font-weight:800;overflow-wrap:anywhere}
.sp-seat div > span{display:block;margin-top:3px;font-size:12px;color:var(--ink-2)}
.sp-seat.current{background:var(--sun)}
.sp-seat.eliminated{opacity:.5}
.sp-lives{color:var(--red-tx);font-size:14px;letter-spacing:1px}
.sp-history-title{font-size:16px;font-weight:800}
.sp-feed{list-style:none;padding:0;margin:10px 0 24px}
.sp-feed li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1.5px dashed var(--line);overflow-wrap:anywhere;font-weight:700}
.sp-feed span{font-size:13px;font-weight:500;color:var(--ink-2);text-align:right}
.sp-winner{font-size:30px;font-weight:800;overflow-wrap:anywhere}
#spectate > .btn{margin:12px 12px 0 0}
.panel.spectate-entry{overflow:hidden}
@media (max-width:520px){.sp-room{grid-template-columns:1fr}.sp-room .sp-meta,.sp-room h2{grid-column:auto}.sp-room > .btn{justify-self:start}.sp-seats{grid-template-columns:1fr}.sp-bomb{width:156px;height:156px}.sp-syllable{font-size:44px}.sp-state{padding:20px}.sp-state .btn{margin:6px 0}.sp-state .btn + .btn{margin-left:0}}

/* ── the dock ────────────────────────────────────────────────────────── */
.dock{display:none}
@media (max-width:819px){
  :root{--dockh:74px}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;
    padding:8px max(8px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));
    background:var(--card);border-top:var(--bw) solid var(--ink);
    box-shadow:0 -10px 24px -14px rgba(29,25,52,.35)}
  body.playing .dock,body.kbd .dock,body.v2-live .dock{display:none}
  body.playing,body.v2-live{--dockh:0px}
  body.v2-live .musicwrap{display:none}
  .ask,.seeking,.winover{z-index:75}
}
.dk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:4px 2px;border-radius:14px;
  color:var(--ink-2);transition:background .15s ease,color .15s ease}
.dk-ic{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:30px;border-radius:999px;transition:background .2s var(--ease),transform .2s var(--spring)}
.dk svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk-nm{max-width:100%;font-size:11.5px;font-weight:800;line-height:1.1;font-variation-settings:'wdth' 76;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk:active .dk-ic{transform:scale(.9)}
.dk[aria-current="page"]{color:var(--ink)}
.dk[aria-current="page"] .dk-ic{background:var(--sun);box-shadow:inset 0 0 0 2px var(--ink)}
.dk-pip{position:absolute;top:-2px;right:4px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--card)}
.dk-gems{position:absolute;top:-6px;right:-8px;min-width:20px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:#fff;background:var(--gem);border:1.5px solid var(--ink)}

/* ── arriving on a screen ────────────────────────────────────────────── */
body.motion .v2-in{animation:screenIn .42s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body:not(.motion) .v2-in{animation:none}}

/* ── 05-fehler.css ── */
/* ── Fehlersuchen ────────────────────────────────────────────────────────
   A detective's desk inside the same game box: case files with coloured
   tabs, a sentence dealt as word tiles on a case card, a magnifying glass,
   a rubber stamp for the accusation. Motion follows one rule set: strong
   ease-out for things arriving, ease-in-out for the tile turning over,
   nothing longer than 300ms except the stars on the report. */
.fs{--fs-ease:cubic-bezier(0.23,1,0.32,1);flex:1;display:flex;flex-direction:column;min-height:0}
.fs-pick,.fs-done{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px var(--gut) 40px}
.fs-pick > *,.fs-done > *{width:100%;max-width:var(--col)}
.fs-pick > .backlink,.fs-done > .link{width:auto;align-self:flex-start}
.fs-done > .link{align-self:center}

/* the magnifying glass, one drawing at three sizes */
.lp-glass{fill:rgba(207,226,255,.55)}
.lp-rim{stroke:var(--ink)}
.lp-shine{stroke:#fff}
.lp-handle{stroke:var(--ink)}
.fs-herolupe .lp-handle{stroke:var(--red)}

.fs-hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fs-hero h1{font-size:clamp(40px,11vw,60px)}
.fs-herolupe{overflow:visible;rotate:-10deg}
body.motion .fs-herolupe{animation:fsPeek 3.2s var(--fs-ease) 1 both}
@keyframes fsPeek{0%{translate:-10px 4px;rotate:-24deg}35%{translate:8px -2px;rotate:4deg}70%{translate:-2px 0;rotate:-12deg}100%{translate:0 0;rotate:-10deg}}
.fs-how{margin:0;text-align:center;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ── the case files ──────────────────────────────────────────────────── */
/* room above each file for its tab, so a tab never touches the file above */
.fs-akten{display:flex;flex-direction:column;gap:28px;padding-top:16px}
.fs-akte{--tint:var(--sun);--on:var(--ink);position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;
  min-height:104px;text-align:left;background:var(--card);border:var(--bw) solid var(--ink);border-radius:6px var(--r) var(--r) var(--r);
  box-shadow:var(--lift);transition:transform .12s var(--fs-ease),box-shadow .12s var(--fs-ease)}
.fs-akte::before{content:'';position:absolute;left:-2px;top:-14px;width:44%;height:16px;border:var(--bw) solid var(--ink);border-bottom:0;
  border-radius:10px 12px 0 0;background:var(--tint)}
.fs-t-sun{--tint:var(--sun);--on:var(--ink)}
.fs-t-blue{--tint:var(--blue);--on:#fff}
.fs-t-red{--tint:var(--red);--on:#fff}
.fs-t-ink{--tint:var(--ink);--on:var(--sun)}
.fs-akte:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.fs-akte:hover:not(:disabled){background:var(--sun-soft)}.fs-akte:hover:not(:disabled) .fs-akte-go{translate:3px 0}}
.fs-akte:disabled{cursor:default;background:var(--card-2);box-shadow:0 3px 0 var(--line-2)}
.fs-akte:disabled::before{background:var(--card-3)}
.fs-akte:disabled .fs-tab{background:var(--card-3);color:var(--ink-3)}
.fs-akte:disabled .fs-akte-nm,.fs-akte:disabled .fs-akte-tx{color:var(--ink-3)}
.fs-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:76px;
  background:var(--tint);color:var(--on);border-right:var(--bw) solid var(--ink);border-radius:4px 0 0 calc(var(--r) - 2px)}
.fs-tab b{font-size:34px;font-weight:800;line-height:1;font-variation-settings:'wdth' 80}
.fs-cefr{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.02em}
.fs-akte-body{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:12px 14px}
.fs-akte-nm{font-size:18px;font-weight:800;letter-spacing:-.015em}
.fs-akte-tx{font-size:14px;line-height:1.4;color:var(--ink-2)}
.fs-akte-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.fs-best{font-size:12px;font-weight:700;color:var(--ink-2)}
.fs-akte-go{display:flex;align-items:center;justify-content:center;width:44px;color:var(--ink);transition:translate .2s var(--fs-ease)}
.fs-stars{display:flex;gap:3px}
.fs-stars i,.fs-bigstars i{display:block;width:17px;height:17px;background:var(--card-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.2l-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.6 1.3 6.7L12 17.2l-6 3.3 1.3-6.7-5-4.6 6.8-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.fs-stars i.on,.fs-bigstars i.on{background:var(--sun-lo)}
@media (max-width:380px){.fs-tab{width:62px}.fs-tab b{font-size:28px}.fs-akte-go{width:34px}.fs-akte-body{padding:10px 10px}}

/* ── playing a case ──────────────────────────────────────────────────── */
.fs-play{flex:1;display:flex;flex-direction:column;min-height:0}
.fs-hud{gap:8px}
.fs-lenses{display:flex;gap:4px;padding:0 4px}
.fs-lensico{display:block;width:30px;height:30px;background:var(--blue);transition:background .2s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='black' stroke-width='6'/%3E%3Cpath d='M29 29l11 11' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='black' stroke-width='6'/%3E%3Cpath d='M29 29l11 11' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.fs-lensico.broke{background:var(--ink-3);opacity:.45}
.fs-streakstat .si{display:block;color:var(--red)}
.fs-progress{height:6px;background:var(--card-3);border-bottom:1.5px solid var(--line-2)}
.fs-progress i{display:block;height:100%;width:100%;background:var(--green);transform-origin:left;transform:scaleX(0);transition:transform .3s var(--fs-ease)}
.fs-stage{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px var(--gut) 28px}
.fs-stage > *{width:100%;max-width:680px}

.fs-card{position:relative;padding:26px 16px 20px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);
  transition:background .3s ease}
.fs-card.hot{background:#FFF6F4}
.fs-fuse{position:absolute;left:16px;right:16px;top:12px;height:8px;border-radius:8px;background:var(--card-3);overflow:hidden}
.fs-fuse i{display:block;height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,var(--red),var(--sun));transform-origin:left;will-change:transform}
.fs-fuse i.hot{background:var(--red)}
.fs-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 2px 14px}
.fs-no{padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:800;color:#fff;background:var(--ink)}
.fs-task{font-size:15px;font-weight:800}

/* the sentence, one tile per word */
.fs-sentence{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 7px;padding:6px 0 4px;touch-action:none;-webkit-user-select:none;user-select:none}
.fs-tile{position:relative;display:inline-flex;align-items:baseline;min-height:48px;padding:9px 11px;border-radius:11px;
  font-size:21px;font-weight:700;line-height:1.2;color:var(--ink);background:var(--card-2);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);
  transform-origin:50% 100%;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.fs-tile .fs-tail{font-weight:700;color:var(--ink-2)}
.fs-tile.lensed{background:var(--sun-soft);z-index:2}
.fs-tile:active{box-shadow:0 1px 0 var(--ink)}
.fs-tile.warm{box-shadow:0 3px 0 var(--ink),0 0 0 4px rgba(255,203,46,.7)}
.fs-tile.miss{background:#fff;color:var(--ink-3);border-style:dashed;box-shadow:none;cursor:default}
.fs-tile.caught{background:var(--red-soft);border-color:var(--red)}
.fs-tile.fixed{background:var(--green);border-color:var(--ink);color:#fff}
.fs-tile.fixed .fs-tail{color:#fff}
.fs-tile.fixbad{background:var(--sun);color:var(--ink)}
.fs-tile.fixbad .fs-tail{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.fs-tile:not(.miss):not(.fixed):hover{background:var(--sun-soft)}}
@media (min-width:760px){.fs-tile{font-size:24px;min-height:52px;padding:10px 13px}}
@media (max-width:380px){.fs-tile{font-size:18px;min-height:44px;padding:8px 9px}.fs-sentence{gap:8px 5px}}
/* the stamp lands on the top edge of the tile, so the word it accuses stays readable */
.fs-stamp{position:absolute;left:50%;top:0;z-index:3;transform:translate(-50%,-50%) rotate(-9deg);pointer-events:none;
  padding:2px 7px;border:2.5px solid var(--red);border-radius:6px;background:rgba(255,255,255,.88);
  font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1.2;color:var(--red);white-space:nowrap}
.fs-tile.fixed .fs-stamp{opacity:0;transition:opacity .2s ease .35s}

/* the magnifying glass */
/* big enough that the glass frames most of a word instead of cutting it;
   the glass centre (20/48 of the drawing) sits on the point being read */
.fs-lens{position:absolute;left:0;top:0;width:128px;height:128px;margin:-53px 0 0 -53px;z-index:4;pointer-events:none;opacity:0;
  transition:opacity .15s ease;will-change:transform;filter:drop-shadow(0 6px 8px rgba(29,25,52,.25))}
.fs-lens.on{opacity:1}
.fs-lensart{display:block;width:100%;height:100%;overflow:visible}
.fs-lensart .lp-glass{fill:rgba(255,255,255,.08)}
.fs-lensart .lp-rim{stroke-width:2.2}
.fs-lensart .lp-shine{stroke-width:1.6;opacity:.8}
@media (hover:none){.fs-lens:not(.touch){display:none}}

.fs-say{min-height:24px;margin:0;text-align:center;font-size:16px;font-weight:800;color:var(--ink-2)}
.fs-say.good{color:var(--green-tx)}
.fs-say.bad{color:var(--red-tx)}
.fs-say.hint{color:var(--ink)}
.fs-say.hint::before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:var(--sun);border:1.5px solid var(--ink);vertical-align:1px}

/* the correction */
.fs-fix{padding:14px;background:var(--sun-soft);border:var(--bw) solid var(--ink);border-radius:var(--r-lg)}
.fs-fixask{margin:0 0 10px;text-align:center;font-size:15px;font-weight:800}
/* three short answers sit side by side; long phrases stack, never 2 + 1 */
.fs-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fs-opts.long{grid-template-columns:1fr}
/* A word is never broken to make it fit. Three across when the three fit
   whole, which fehler.js measures after drawing; otherwise they stack. */
.fs-opts:not(.long) .fs-opt{justify-content:center;text-align:center}
.fs-opt{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 12px;text-align:left;border-radius:var(--r);
  font-size:18px;font-weight:800;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .1s var(--fs-ease),box-shadow .1s var(--fs-ease),background .15s ease,opacity .2s ease}
.fs-opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.fs-opt:hover:not(:disabled){background:var(--sun-soft)}}
.fs-opt:disabled{cursor:default}
.fs-opt-k{flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:8px;font-size:12px;background:var(--card-3);color:var(--ink-2)}
.fs-opt-w{min-width:0;white-space:nowrap}
.fs-opts.long .fs-opt-w{white-space:normal;overflow-wrap:break-word}
/* The number keys answer from a keyboard. On a phone they are a badge that
   costs a third of every button, so they go. */
@media (hover:none) and (pointer:coarse){.fs-opt-k{display:none}.fs-opt{padding:8px 10px}}
.fs-opt.right{background:var(--green);color:#fff}
.fs-opt.right .fs-opt-k{background:rgba(255,255,255,.25);color:#fff}
.fs-opt.wrong{background:var(--red-soft);color:var(--red-tx)}
.fs-opt:disabled:not(.right):not(.wrong){opacity:.45}

/* on a phone the answers and the hint sit low, under the thumb */
@media (max-width:819px){.fs-stage > .fs-fix:not([hidden]),.fs-stage > .fs-acts:not([hidden]){margin-top:auto}}
.fs-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fs-acts .btn{flex:1 1 140px;max-width:320px;padding:0 14px;font-size:16px;white-space:nowrap}
.fs-closecase{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.fs-closecase:hover{background:#322b58}}

/* the case notes */
.fs-note{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);box-shadow:var(--lift-sm);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(47,107,240,.1) 31px 32px)}
.fs-note-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fs-note-t{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fs-verdict{padding:3px 10px;border-radius:999px;font-size:13px;font-weight:800;border:1.5px solid var(--ink)}
.fs-verdict.ok{background:var(--green);color:#fff}
.fs-verdict.no{background:var(--red-soft);color:var(--red-tx)}
.fs-note-line{margin:0;font-size:19px;font-weight:600;line-height:1.7}
.fs-note-line mark{padding:1px 5px;border-radius:6px;background:var(--green-soft);color:inherit}
.fs-note-line mark.bad{background:var(--sun-soft)}
.fs-note-line s{margin-right:5px;color:var(--red-tx);text-decoration-thickness:2px}
.fs-note-line b{color:var(--green-tx);font-weight:800}
.fs-rule{padding:10px 12px;border-radius:var(--r-sm);background:var(--card-2);border:1.5px solid var(--line-2)}
.fs-rule-t{display:inline-block;margin-bottom:4px;padding:1px 8px;border-radius:6px;font-size:13px;font-weight:800;color:#fff;background:var(--ink)}
.fs-rule-tx{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.fs-next{width:100%}

/* ── the report ──────────────────────────────────────────────────────── */
.fs-report{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px 22px;text-align:center;overflow:hidden;isolation:isolate;
  background:var(--sun);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.fs-report::before{content:'';position:absolute;inset:-50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.34) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 55%);mask:radial-gradient(circle,#000 10%,transparent 55%)}
.fs-report-k{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fs-badge{padding:10px 18px;border-radius:14px;background:var(--tint);color:var(--on);border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);rotate:-2deg}
.fs-badge-rank{font-size:clamp(26px,7vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.fs-bigstars{display:flex;gap:8px}
.fs-bigstars i{width:46px;height:46px;background:rgba(29,25,52,.18)}
.fs-bigstars i.on{background:var(--ink)}
.fs-report-sub{margin:0;font-size:16px;font-weight:700}
.fs-nums{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px}
.fs-num{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px;border-radius:var(--r);background:var(--card);border:var(--bw) solid var(--ink)}
.fs-num b{font-size:26px}
.fs-num span{font-size:13px;font-weight:700;color:var(--ink-2)}
.fs-unlock{margin:0;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:800;color:#fff;background:var(--green);border:1.5px solid var(--ink)}
.fs-learned-list{list-style:none;margin:0;padding:6px 0}
.fs-learned-list li{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-top:1.5px dashed var(--line)}
.fs-learned-list li:first-child{border-top:0}
.fs-learned-list b{font-size:15px;font-weight:800}
.fs-learned-list span{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.fs-askyes{background:var(--red);color:#fff}

/* the card on the home screen */
.fs-chips i{--gb:var(--card)}
.fs-chip-bad{background:var(--red-soft) !important;color:var(--red-tx) !important;text-decoration:line-through;text-decoration-thickness:2px}
.fs-chip-good{background:var(--green) !important}
.fs-chip-lupe{padding:0 4px !important;background:var(--sun) !important}
.fs-mini{display:block}
.fs-mini .lp-glass{fill:#fff}

/* short screens (a small phone, a phone on its side): everything tighter, so
   the case and its buttons fit without scrolling */
@media (max-height:700px){
  .fs-stage{gap:10px;padding-top:12px;padding-bottom:14px}
  .fs-card{padding:22px 12px 14px}
  .fs-card-head{margin:4px 2px 10px}
  .fs-sentence{gap:8px 5px}
  .fs-tile{min-height:42px;padding:7px 9px;font-size:19px}
  .fs-acts .btn,.fs-opt{min-height:48px}
}
/* the smallest phones: the longest Meister sentence has 14 tiles */
@media (max-width:360px) and (max-height:700px){
  .fs-tile{min-height:38px;padding:5px 7px;font-size:17px}
  .fs-sentence{gap:7px 4px}
  .fs-card-head{flex-wrap:nowrap}
  .fs-task{font-size:13.5px;text-align:right}
}
@media (max-height:460px){
  .fs-hud{padding-top:4px;padding-bottom:4px}
  .fs-stage{gap:6px;padding-top:8px;padding-bottom:6px}
  .fs-card{padding:18px 12px 10px}
  .fs-card-head{margin:2px 2px 6px}
  .fs-tile{min-height:38px;padding:5px 8px;font-size:17px}
  .fs-say{min-height:18px;font-size:14px}
  .fs-acts .btn{min-height:44px}
}

@media (prefers-reduced-motion:reduce){body:not(.motion) .fs-herolupe{animation:none}}

/* ── second pass, after the finish review ────────────────────────────── */
/* words of one mistake fold into the first tile once it is corrected */
.fs-tile.merged{display:none}
/* the tiles are pieces of the board, printed card with its thickness */
.fs-tile{background:var(--card);box-shadow:var(--lift-sm)}
.fs-tile.lensed{background:var(--sun-soft)}
/* the fuse is the bomb's own cord: segmented like board spaces, with the
   spark riding its burning end; one timer, so the separate progress line goes */
.fs-progress{display:none}
.fs-fuse{overflow:visible;height:10px;background:var(--space);border:1.5px solid var(--ink)}
.fs-fuse i{background:#E8B86A;border-radius:8px;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 16px,transparent 16px 19px);mask:repeating-linear-gradient(90deg,#000 0 16px,transparent 16px 19px)}
.fs-fuse i.hot{background:var(--red)}
.fs-fuse::after{content:'';position:absolute;top:50%;left:calc(var(--f,1) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;
  background:var(--sun);border:1.5px solid var(--ink);pointer-events:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
body.motion .fs-fuse::after{animation:fsSpark .45s ease-in-out infinite}
@keyframes fsSpark{0%,100%{scale:1;rotate:0deg}50%{scale:.78;rotate:30deg}}
/* a broken lens shows its crack: a jagged gap through the glass */
.fs-lensico.broke{opacity:1;background:
  linear-gradient(118deg,var(--ink-3) 0 44%,transparent 44% 49%,var(--ink-3) 49% 56%,transparent 56% 60%,var(--ink-3) 60%)}
/* on a phone the case sits in the middle of the table, not pinned to the top */
@media (max-width:819px){.fs-stage > .fs-card{margin-top:clamp(0px,5dvh,48px)}}
/* on a big screen the case is read from further away: larger tiles, centred */
@media (min-width:1024px) and (min-height:720px){
  .fs-stage{justify-content:center;min-height:calc(100dvh - var(--barh,64px) - 70px)}
  .fs-tile{font-size:30px;min-height:62px;padding:12px 16px}
  .fs-sentence{gap:14px 10px}
  .fs-card{padding:32px 26px 28px}
}
/* the step count is already drawn by the step bar above the rulebook page */
.tcopy .lbl{display:none}
/* the report's numbers sit in the report, not in cards of their own */
.fs-nums{display:flex;justify-content:center;gap:22px}
.fs-num{flex-direction:row;align-items:baseline;gap:6px;padding:0;background:none;border:0}

/* ── 06-album.css ── */
/* ── Stickeralbum, the level-up screen, the XP card ───────────────────
   Same box, same table: a sticker album with a blue cover and binder rings,
   pages of dashed empty slots, packets in the pawn colours that tear open
   into die-cut stickers with a white kiss-cut edge. The level-up screen is
   the lid's sunburst behind a single card. Motion is WAAPI in album.js and
   only runs with body.motion; everything here is its resting state. */

/* ── the entry on the home screen ─────────────────────────────────────── */
/* Three columns, the same as Spectate above it, so the two chevrons sit on
   one line. The "new" pip is pinned to the chevron rather than taking a
   column of its own, which left a gap where it was when it was hidden. */
.album-entry .modecard{grid-template-columns:auto 1fr auto;min-height:64px}
.album-entry .ae-art{grid-column:1;grid-row:1}
.album-entry .mc-txt{grid-column:2;grid-row:1}
.album-entry .mc-go{grid-column:3;grid-row:1}
.album-entry .ae-new{position:absolute;right:62px;top:50%;transform:translateY(-50%)}
.album-entry .modecard:has(.ae-new:not([hidden])) .mc-txt{padding-right:70px}
.ae-art{position:relative;width:60px;height:44px;flex:0 0 auto}
.ae-s{position:absolute;top:5px;width:28px;height:35px;border-radius:8px;border:3px solid #fff;
  box-shadow:0 0 0 2px var(--ink),0 4px 6px -3px rgba(29,25,52,.4);
  transition:transform .28s var(--spring)}
.ae-1{left:0;background:var(--blue);transform:rotate(-12deg)}
.ae-2{left:15px;top:1px;background:var(--red);transform:rotate(3deg)}
.ae-3{left:30px;background:var(--sun);transform:rotate(14deg)}
@media (hover:hover) and (pointer:fine){
  .alb-entry:hover .ae-1{transform:translate(-3px,-2px) rotate(-18deg)}
  .alb-entry:hover .ae-2{transform:translateY(-4px) rotate(2deg)}
  .alb-entry:hover .ae-3{transform:translate(3px,-2px) rotate(20deg)}
}
.ae-new{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;
  color:#fff;background:var(--red);border:var(--bw) solid var(--ink)}
body.motion .ae-new{animation:aeNew 2.4s var(--ease) infinite}
@keyframes aeNew{0%,70%,100%{transform:translateY(-50%)}78%{transform:translateY(-50%) scale(1.12) rotate(-4deg)}86%{transform:translateY(-50%) scale(1)}}

/* ── the album screen ─────────────────────────────────────────────────── */
.alb{flex:1;display:flex;flex-direction:column;min-height:0}
.alb-in{width:100%;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding:14px var(--gut) 48px}
.alb-in > .backlink{align-self:flex-start}

/* The cover: a blue album with its binder rings down the left. */
.alb-cover{position:relative;overflow:hidden;padding:24px 22px 24px 64px;border-radius:var(--r-lg);
  color:#fff;background-color:var(--blue);
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1.3px, transparent 1.7px);
  background-size:18px 18px;
  border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.alb-rings{position:absolute;left:0;top:0;bottom:0;width:44px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;
  background:rgba(29,25,52,.18)}
.alb-rings::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--ink)}
.alb-rings i{display:block;width:24px;height:12px;border-radius:999px;background:var(--table);border:2.5px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(29,25,52,.25)}
.alb-cv{position:relative;z-index:1;max-width:560px;display:flex;flex-direction:column;gap:6px}
.alb-kick{margin:0;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-hi)}
.alb-h{margin:0;color:#fff;font-size:clamp(30px,6.4vw,46px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variation-settings:'wdth' 90}
.alb-sub{margin:4px 0 6px;font-size:15px;line-height:1.45;color:#fff;max-width:44ch}
.alb-prog{display:flex;align-items:center;gap:12px}
.alb-pbar{position:relative;flex:1;max-width:360px;height:16px;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.2);border:var(--bw) solid var(--ink)}
.alb-pbar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--sun);
  transition:transform .6s cubic-bezier(0.23,1,0.32,1)}
.alb-prog b{font-size:18px;font-weight:700}
.alb-ptx{margin:0;font-size:13px;color:#fff;opacity:.92}
.alb-ready{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding:8px 8px 8px 12px;border-radius:14px;
  color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);align-self:flex-start;
  font-size:14px;font-weight:800}
.alb-rdot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--ink)}
body.motion .alb-rdot{animation:rdot 1.6s ease-in-out infinite}
@keyframes rdot{50%{transform:scale(1.35)}}
.alb-ready .btn.sm{min-height:38px}
/* Three stickers stuck on the cover, the way everybody decorates the front. */
.alb-deco{position:absolute;right:-6px;top:-6px;width:150px;height:130px;pointer-events:none}
.alb-deco i{position:absolute;width:62px;height:62px;border-radius:17px;border:5px solid #fff;box-shadow:0 0 0 2px var(--ink),0 8px 12px -6px rgba(29,25,52,.5)}
.ad-1{right:74px;top:30px;background:var(--sun);transform:rotate(-14deg)}
.ad-2{right:22px;top:14px;background:var(--red);transform:rotate(9deg)}
.ad-3{right:40px;top:70px;background:var(--green);transform:rotate(-4deg)}
@media (max-width:640px){
  .alb-cover{padding:20px 16px 20px 56px}
  .alb-rings{width:38px}
  .alb-deco{transform:scale(.66);transform-origin:top right;opacity:.9}
  .alb-h{padding-right:70px}
}

.alb-guest{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border-radius:var(--r-lg);
  background:var(--sun-soft);border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm)}
.alb-guest h2{margin:0;font-size:19px;font-weight:800}
.alb-guest p{margin:0 0 6px;color:var(--ink-2);font-size:15px}
.alb-err{margin:0;padding:12px 14px;border-radius:14px;background:var(--red-soft);color:var(--red-tx);font-weight:700;border:var(--bw) solid var(--ink)}

/* ── pages and slots ──────────────────────────────────────────────────── */
.alb-shelves{display:grid;gap:18px}
.alb-page{padding:16px;border-radius:var(--r-lg);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.alb-phead{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;margin:0 0 12px;
  padding-bottom:10px;border-bottom:var(--bw) dashed var(--line)}
.alb-ch{grid-column:1;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.alb-pt{grid-column:1;margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.alb-pc{grid-column:2;grid-row:1 / 3;align-self:center;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--card-2);border:var(--bw) solid var(--ink)}

.alb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:1fr;gap:12px}
@media (max-width:380px){.alb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

.alb-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:214px;padding:30px 10px 12px;
  text-align:center;border-radius:16px;color:var(--ink);font:inherit}
.alb-slot.locked{background:var(--card-2);border:var(--bw) dashed var(--line-2)}
.alb-slot.claimed{background:var(--card);border:var(--bw) solid var(--line)}
.alb-slot.ready{cursor:pointer;background:var(--sun-soft);border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.alb-slot.ready:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){
  .alb-slot.ready:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
  .alb-slot.ready:hover .alb-pack{transform:rotate(3deg) scale(1.05)}
  .alb-slot.claimed:hover .stk-gloss{background-position:0 0}
}
.alb-no{position:absolute;top:8px;left:8px;padding:1px 7px;border-radius:7px;font-size:11px;font-weight:700;line-height:1.5;
  color:var(--ink-2);background:var(--card);border:1.5px solid var(--line-2)}
.alb-rar{position:absolute;top:8px;right:8px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;line-height:1.6;
  letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink)}
.rar-r .alb-rar{color:var(--blue-tx);background:var(--blue-soft)}
.rar-e .alb-rar{color:var(--epic-tx);background:var(--epic-soft)}
.rar-l .alb-rar{color:var(--ink);background:var(--sun)}
.alb-art{position:relative;display:grid;place-items:center;width:96px;height:100px;margin-bottom:4px}
.alb-nm{max-width:100%;font-size:14.5px;font-weight:800;line-height:1.2;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:360px){
  .alb-nm{font-size:13.5px}
  .alb-rar{font-size:9px;padding:0 5px;letter-spacing:.03em;right:6px}
  .alb-no{left:6px;padding:0 5px}
}
.alb-goal{font-size:12.5px;line-height:1.35;color:var(--ink-2);min-height:2.7em}
.alb-foot{margin-top:auto;padding-top:6px;width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.alb-bar{position:relative;display:block;width:100%;height:9px;border-radius:8px;overflow:hidden;background:var(--card-3);border:1.5px solid var(--line-2)}
.alb-bar i{position:absolute;inset:0;transform-origin:left;background:var(--blue)}
.alb-have{font-size:12px;font-weight:700;color:var(--ink-3)}
.alb-claim{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;padding:0 8px;
  border-radius:12px;font-size:13px;font-weight:800;white-space:nowrap;color:#fff;background:var(--ink)}
@media (max-width:400px){
  .alb-slot{padding-left:8px;padding-right:8px}
}
.alb-gem{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink);background:var(--sun);border:1.5px solid var(--ink)}
.alb-gem svg,.alb-float svg,.lvu-gems svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.alb-date{font-size:11.5px;color:var(--ink-3)}

/* The empty slot: the outline of what goes here. */
.alb-ghost{display:grid;place-items:center;width:80px;height:80px;border-radius:22px;border:2.5px dashed var(--line-2);color:var(--ink-3)}
.alb-ghost .stk-ic{width:34px;height:34px;opacity:.55;stroke:currentColor}
.alb-ghost .stk-glyph{font-size:36px;opacity:.5;color:var(--ink-3)}

/* ── the sticker ──────────────────────────────────────────────────────── */
.stk{--sc:var(--blue);--si:#fff;position:relative;display:block;width:84px;height:84px;transform:rotate(var(--tilt,0deg))}
.stk-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:22px;background:var(--sc);
  border:5px solid #fff;box-shadow:0 0 0 2px var(--ink),0 7px 10px -5px rgba(29,25,52,.45)}
.stk-ic{width:38px;height:38px;fill:none;stroke:var(--si);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stk-glyph{font-size:40px;font-weight:800;line-height:1;color:var(--si)}
.stk-rib{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:2px 8px;border-radius:8px;white-space:nowrap;
  font-size:11.5px;font-weight:700;color:#fff;background:var(--ink);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}
.stk-gloss{position:absolute;inset:5px;border-radius:17px;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 46%,transparent 60%) 100% 0/260% 100% no-repeat;
  transition:background-position .7s cubic-bezier(0.23,1,0.32,1)}
.stk-blue{--sc:var(--blue)}
.stk-green{--sc:var(--green)}
.stk-red{--sc:var(--red)}
.stk-sun{--sc:var(--sun);--si:var(--ink)}
.stk-holo{--si:var(--ink)}
.stk-holo .stk-face{background:conic-gradient(from 210deg,var(--sun),var(--red-hi),var(--blue-hi),var(--green-hi),var(--sun))}
body.motion .stk-holo .stk-gloss{animation:holo 3.2s ease-in-out infinite}
@keyframes holo{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ── the packet it comes in ───────────────────────────────────────────── */
.alb-pack{--pc:var(--blue);--pc2:var(--blue-hi);position:relative;display:block;width:78px;height:94px;transform:rotate(-3deg);
  transition:transform .25s var(--spring);
  filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 4px 0 var(--ink))}
.pk-foil{position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(0% 4.5%,6.25% 0,12.5% 4.5%,18.75% 0,25% 4.5%,31.25% 0,37.5% 4.5%,43.75% 0,50% 4.5%,56.25% 0,62.5% 4.5%,68.75% 0,75% 4.5%,81.25% 0,87.5% 4.5%,93.75% 0,100% 4.5%,100% 95.5%,93.75% 100%,87.5% 95.5%,81.25% 100%,75% 95.5%,68.75% 100%,62.5% 95.5%,56.25% 100%,50% 95.5%,43.75% 100%,37.5% 95.5%,31.25% 100%,25% 95.5%,18.75% 100%,12.5% 95.5%,6.25% 100%,0% 95.5%);
  background:repeating-linear-gradient(135deg,var(--pc) 0 9px,var(--pc2) 9px 18px)}
.pk-foil::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 44%,transparent 58%) 120% 0/250% 100% no-repeat}
body.motion .pk-foil::after{animation:foil 2.6s ease-in-out infinite}
@keyframes foil{0%,35%{background-position:120% 0}75%,100%{background-position:-20% 0}}
.pk-seal{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);display:grid;place-items:center;
  border-radius:50%;background:#fff;border:2px solid var(--ink)}
.pk-seal .stk-ic{width:26px;height:26px;stroke:var(--ink)}
.pk-seal .stk-glyph{font-size:26px;color:var(--ink)}
.pk-tag{position:absolute;top:12px;left:-8px;padding:2px 7px;border-radius:6px;transform:rotate(-10deg);
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red);border:2px solid var(--ink)}
.pk-green{--pc:var(--green);--pc2:#23A058}
.pk-red{--pc:var(--red);--pc2:var(--red-hi)}
.pk-sun{--pc:var(--sun);--pc2:var(--sun-hi)}
.pk-holo .pk-foil{background:repeating-linear-gradient(135deg,var(--sun) 0 9px,var(--red-hi) 9px 18px,var(--blue-hi) 18px 27px,var(--green-hi) 27px 36px)}
body.motion .alb-slot.ready .alb-pack{animation:packIdle 3s ease-in-out infinite}
@keyframes packIdle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1deg) translateY(-2px)}}

/* ── rarity ───────────────────────────────────────────────────────────
   The row colour stays; rarity is the frame and the foil. Rare has a silver
   edge, epic a holographic sheen, legendary is struck in gold and twinkles.
   Violet is the one colour here not on the board: it is the Verben chips'. */
.alb{--epic:#7C5CE0;--epic-soft:#EEE8FF;--epic-tx:#5B3FC4}
.alb-slot.locked.rar-r{border-color:rgba(36,89,214,.42)}
.alb-slot.locked.rar-e{border-color:rgba(124,92,224,.5)}
.alb-slot.locked.rar-l{border-color:rgba(199,142,0,.75);background:linear-gradient(180deg,var(--sun-soft),var(--card-2) 70%)}
.alb-slot.claimed.rar-r{border-color:var(--blue-hi)}
.alb-slot.claimed.rar-e{border-color:var(--epic)}
.alb-slot.claimed.rar-l{border-color:var(--sun-lo);box-shadow:0 0 0 3px var(--sun-soft)}
.alb-slot.ready.rar-l{box-shadow:0 4px 0 var(--ink),0 0 0 4px rgba(255,203,46,.5)}
.gh-rr{border-color:rgba(36,89,214,.4)}
.gh-re{border-color:rgba(124,92,224,.5)}
.gh-rl{border-color:rgba(199,142,0,.7);background:rgba(255,243,199,.7)}

.stk-ic,.stk-glyph{position:relative;z-index:1}
.stk-glyph.sm{font-size:27px;letter-spacing:-.02em}
.alb-ghost .stk-glyph.sm,.pk-seal .stk-glyph.sm{font-size:19px}
.stk-rr .stk-face{border-color:transparent;
  background:linear-gradient(var(--sc),var(--sc)) padding-box,linear-gradient(135deg,#fff,#C6D3F0 32%,#fff 52%,#A9BDEA 80%,#fff) border-box}
.stk-re .stk-face{border-color:transparent;
  background:linear-gradient(var(--sc),var(--sc)) padding-box,conic-gradient(from 180deg,#fff,#C9B8FF,#FFB3AA,#B3CBFF,#B8F0D0,#fff) border-box}
.stk-re .stk-face::before{content:'';position:absolute;inset:0;border-radius:17px;pointer-events:none;
  background:conic-gradient(from 200deg,rgba(255,255,255,0),rgba(255,123,110,.5),rgba(110,152,255,.5),rgba(76,203,133,.5),rgba(255,255,255,0));mix-blend-mode:overlay}
.stk-re .stk-rib{background:var(--epic)}
.stk-rl{--si:var(--ink)}
.stk-rl .stk-face{border-color:transparent;
  background:radial-gradient(circle at 34% 28%,#FFF1B8,var(--sun) 46%,var(--sun-lo)) padding-box,
    linear-gradient(135deg,#FFF6D2,#E7A900 38%,#FFF6D2 58%,#C08400) border-box}
.stk-rl .stk-rib{color:var(--sun);background:var(--ink)}
.stk-twinkle{position:absolute;z-index:2;width:12px;height:12px;background:#fff;pointer-events:none;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 1px var(--ink))}
.stk-twinkle.t1{top:-7px;right:-5px}
.stk-twinkle.t2{bottom:14px;left:-9px;width:9px;height:9px}
body.motion .stk-twinkle{animation:twinkle 2.2s ease-in-out infinite}
body.motion .stk-twinkle.t2{animation-delay:1.1s}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
body.motion .stk-rl .stk-gloss,body.motion .stk-re .stk-gloss{animation:holo 3.4s ease-in-out infinite}

.pk-rr .pk-foil{background:repeating-linear-gradient(135deg,#DCE6FA 0 9px,var(--blue-hi) 9px 18px)}
.pk-re .pk-foil{background:repeating-linear-gradient(135deg,var(--epic) 0 9px,var(--red-hi) 9px 18px,var(--blue-hi) 18px 27px)}
.pk-rl .pk-foil{background:repeating-linear-gradient(135deg,var(--sun) 0 9px,#FFF1B8 9px 18px,var(--sun-lo) 18px 21px)}
.alb-slot.ready.rar-l .alb-pack{filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 0 10px rgba(255,203,46,.85))}

/* ── jumping between chapters ─────────────────────────────────────────── */
.alb-jump{position:sticky;top:calc(var(--barh,64px) + 8px);z-index:20;display:flex;gap:6px;overflow-x:auto;
  padding:7px;scrollbar-width:none;border-radius:18px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm)}
.alb-jump::-webkit-scrollbar{display:none}
.alb-jb{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:12px;
  font-size:13.5px;font-weight:800;white-space:nowrap;color:var(--ink);background:var(--card-2);border:1.5px solid var(--line)}
.alb-jb:active{background:var(--sun-soft)}
.alb-jb b{font-size:12px;font-weight:700;color:var(--ink-3)}
.alb-jb.has-new::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 1.5px var(--ink)}
@media (hover:hover) and (pointer:fine){.alb-jb:hover{background:var(--sun-soft)}}
.alb-page{scroll-margin-top:calc(var(--barh,64px) + 84px)}

/* ── what flies when a sticker lands ──────────────────────────────────── */
.alb-bit{position:absolute;left:50%;top:50%;width:9px;height:12px;border-radius:2px;border:1.5px solid var(--ink);pointer-events:none}
.bit-blue{background:var(--blue)}
.bit-green{background:var(--green)}
.bit-red{background:var(--red)}
.bit-sun{background:var(--sun)}
.alb-slap{position:absolute;left:50%;top:50%;width:96px;height:96px;border-radius:28px;border:3px solid var(--ink);pointer-events:none}
.alb-float{position:absolute;left:50%;top:38%;z-index:2;display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:999px;
  font-size:14px;font-weight:700;color:var(--sun);background:var(--ink);pointer-events:none;white-space:nowrap}

/* ── the press that opens a mode ──────────────────────────────────────── */
.osu-ghost{position:fixed;z-index:95;pointer-events:none;box-sizing:border-box;transform-origin:center}
.osu-fill{border:var(--bw) solid var(--ink)}
.osu-ring{border:3px solid var(--ink);background:transparent}
.osu-ring-2{border:4px solid var(--sun-lo)}

/* ── level up ─────────────────────────────────────────────────────────── */
.lvu{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--table) 88%,transparent);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2);overflow:hidden}
.lvu-rays{position:absolute;left:50%;top:40%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,203,46,.42) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0 18%,transparent 52%);mask:radial-gradient(circle,#000 0 18%,transparent 52%)}
body.motion .lvu-rays{animation:rays 48s linear infinite}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.lvu-card{position:relative;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 22px 22px;text-align:center;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:var(--lift)}
.lvu-kick{margin:0;min-height:1.1em;font-size:clamp(22px,6vw,30px);font-weight:800;line-height:1.05;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-tx);opacity:0;font-variation-settings:'wdth' 88}
.lvu.leveled .lvu-kick{opacity:1}
.lvu-token{position:relative;display:grid;place-items:center;width:136px;height:136px;margin:8px 0 4px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,var(--sun-hi),var(--sun) 60%,var(--sun-lo));
  border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 18px 26px -10px rgba(29,25,52,.45)}
.lvu-ring{position:absolute;inset:-14px;border-radius:50%;border:5px dotted var(--ink);opacity:.8}
body.motion .lvu-ring{animation:lvuSpin 18s linear infinite reverse}
@keyframes lvuSpin{to{transform:rotate(360deg)}}
.lvu-num{font-size:66px;font-weight:700;line-height:1;color:var(--ink)}
.lvu-xp,.lvu-rank{width:100%}
.lvu-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:13px;font-weight:800;color:var(--ink-2)}
.lvu-gain{font-size:22px;font-weight:700;color:var(--green-tx)}
.lvu-bar{position:relative;height:24px;border-radius:12px;overflow:hidden;background:var(--card-3);border:var(--bw) solid var(--ink);
  box-shadow:inset 0 2px 0 rgba(29,25,52,.08)}
.lvu-bar::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1.5px),rgba(29,25,52,.2) calc(10% - 1.5px) 10%)}
.lvu-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0)}
.lvu-new{z-index:1;background:var(--green-hi)}
.lvu-old{z-index:2;background:var(--sun)}
.lvu-flash{z-index:3;background:#fff;opacity:0;transform:none!important}
.lvu-next{margin:8px 0 0;min-height:1.4em;font-size:14.5px;font-weight:700;color:var(--ink)}
.lvu-rank{padding-top:12px;border-top:var(--bw) dashed var(--line)}
.lvu-rbar{height:14px}
.lvu-rbar .lvu-old{background:var(--blue)}
.lvu-rd{font-size:16px;color:var(--green-tx)}
.lvu-rd.down{color:var(--red-tx)}
.lvu-rnext{margin:7px 0 0;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.lvu-loot,.lvu-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s cubic-bezier(0.23,1,0.32,1)}
.lvu.done .lvu-loot,.lvu.done .lvu-acts{opacity:1;transform:none}
.lvu.done .lvu-acts{transition-delay:.08s}
.lvu-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:14px;font-weight:800;
  color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);font-family:inherit}
.lvu-gems{color:var(--sun);background:var(--ink)}
.lvu-gems svg{width:15px;height:15px}
.lvu-st{cursor:pointer;background:var(--sun-soft);box-shadow:0 3px 0 var(--ink)}
.lvu-st:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.lvu-st-art{position:relative;width:26px;height:20px}
.lvu-st-art i{position:absolute;top:1px;width:15px;height:18px;border-radius:5px;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}
.lvu-st-art i:first-child{left:0;background:var(--blue);transform:rotate(-10deg)}
.lvu-st-art i:last-child{left:10px;background:var(--red);transform:rotate(8deg)}
.lvu-go{min-width:220px}
.lvu-tile{position:absolute;left:50%;top:50%;z-index:5;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  font-style:normal;font-size:17px;font-weight:800;color:#fff;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);pointer-events:none}
.lvu-tile.bit-sun{color:var(--ink)}
@media (max-width:420px){
  .lvu-card{padding:22px 16px 18px;gap:12px}
  .lvu-token{width:114px;height:114px}
  .lvu-num{font-size:56px}
  .lvu-go{min-width:0;width:100%}
}
@media (max-height:620px){
  .lvu-token{width:96px;height:96px;margin:2px 0 0}
  .lvu-num{font-size:46px}
  .lvu-card{gap:10px;padding-top:18px}
}

/* ── the XP card after a game ─────────────────────────────────────────── */
.xpt{position:fixed;left:50%;top:calc(var(--barh,64px) + 10px + env(safe-area-inset-top,0px));z-index:70;transform:translate(-50%,0);
  width:min(460px,calc(100vw - 24px));display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px 12px;
  padding:10px 8px 10px 12px;border-radius:18px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.xpt-tok{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:18px;font-weight:700;
  background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.xpt-mid{min-width:0;display:flex;flex-direction:column}
.xpt-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.xpt-gain{font-size:16px;font-weight:700;color:var(--green-tx)}
.xpt-left{font-size:12.5px;font-weight:700;color:var(--ink-2);text-align:right}
.xpt-bar{position:relative;display:block;height:12px;margin-top:6px;border-radius:8px;overflow:hidden;background:var(--card-3);border:var(--bw) solid var(--ink)}
.xpt-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0)}
.xpt-new{z-index:1;background:var(--green-hi)}
.xpt-old{z-index:2;background:var(--sun)}
.xpt-rank{display:block;margin-top:5px;font-size:12px;font-weight:700;color:var(--ink-2)}
.xpt-st{padding:7px 11px;border-radius:11px;font-size:13px;font-weight:800;color:var(--ink);background:var(--sun);
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.xpt-st:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.xpt-x{width:34px;height:34px;border-radius:10px;font-size:22px;line-height:1;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.xpt-x:hover{background:var(--card-2);color:var(--ink)}}
@media (max-width:420px){
  .xpt{grid-template-columns:auto 1fr auto}
  .xpt-st{grid-column:1 / -1;justify-self:start;margin-left:56px}
}

@media (prefers-reduced-motion:reduce){
  body:not(.motion) .alb-pbar i,body:not(.motion) .stk-gloss{transition:none}
}

/* ── 07-stammtisch.css ── */
/* ── Stammtisch: the open voice room, under Funk ──────────────────────
   The regulars' table of a German pub, where anyone may sit down and talk.
   The seats are pawn-coloured tokens round a dashed table; whoever is
   talking gets a green ring that breathes with them. The microphone mark in
   the header turns into the moving bars of Funk while anyone is speaking. */
.stammtisch .gv-head{cursor:default}
.gv-mark{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
  color:var(--ink);background:var(--card-3);border:1.5px solid var(--line-2)}
.gv-mark .funk-wave{display:none;width:100%;height:100%;padding:8px 7px;border:0;background:none}
.stammtisch.live .gv-mark{background:var(--green-soft);border-color:var(--green-lo)}
.stammtisch.live .gv-mark > svg{display:none}
.stammtisch.live .gv-mark .funk-wave{display:flex}
.gv-ears{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--green-tx);background:var(--green-soft);border:1.5px solid var(--green-lo)}
.gv-ears::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green)}
body.motion .gv-ears::before{animation:rdot 1.6s ease-in-out infinite}
.gv-ears:empty{display:none}
.stammtisch .funk-id{flex:1;min-width:0}

.stammtisch .gv-body{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 14px 14px}
.gv-table{position:relative;padding:14px 10px;border-radius:18px;min-height:96px;display:grid;place-items:center;
  background:
    radial-gradient(circle at 1px 1px, rgba(29,25,52,.08) 1.1px, transparent 1.5px) 0 0/16px 16px,
    var(--card-2);
  border:var(--bw) dashed var(--line-2)}
.stammtisch.hearing .gv-table{border-style:solid;border-color:var(--green-lo);background-color:var(--green-soft)}
.stammtisch .vpeople{flex:none;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px}
.stammtisch .vempty{font-size:14px;font-weight:600;color:var(--ink-3);text-align:center}

/* A seat: a round token with the initial, the name under it. */
.stammtisch .vchip{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:68px;padding:0;
  border:0;border-radius:0;background:none;font-size:12px;font-weight:700;color:var(--ink)}
.stammtisch .vchip::before{content:attr(data-ini);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  font-size:19px;font-weight:800;color:#fff;background:var(--seat,var(--blue));
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:box-shadow .2s ease}
.stammtisch .vchip > span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stammtisch .vchip > i{position:absolute;top:32px;left:calc(50% + 12px);width:14px;height:14px;border-radius:50%;
  background:var(--card);border:2px solid var(--ink)}
.stammtisch .vchip.me::before{color:var(--ink);background:var(--sun)}
.stammtisch .vchip.talk::before{box-shadow:0 3px 0 var(--ink),0 0 0 4px var(--green-hi)}
.stammtisch .vchip.talk > i{background:var(--green)}
body.motion .stammtisch .vchip.talk::before{animation:seatTalk 1s ease-in-out infinite}
@keyframes seatTalk{50%{box-shadow:0 3px 0 var(--ink),0 0 0 7px rgba(76,203,133,.55)}}
.seat-blue{--seat:var(--blue)}
.seat-red{--seat:var(--red)}
.seat-green{--seat:var(--green)}
.seat-violet{--seat:#7C5CE0}

.stammtisch .vnote{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2);order:0}
.stammtisch .vacts{display:flex;flex-wrap:wrap;gap:8px}
.stammtisch .vacts .btn{flex:1 1 120px;min-height:44px}
.stammtisch #gvListen[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green-lo);color:var(--green-tx)}
@media (max-width:380px){
  .stammtisch .vchip{width:60px}
  .stammtisch .vchip::before{width:42px;height:42px}
}

/* ── 08-bild.css ── */
/* ── Bildraten: the picture guessing mode ─────────────────────────────
   A picture in a white frame on the table, under sixteen pawn-coloured
   board tiles that turn away one at a time. Everything answers in the same
   language as the rest of the box: ink outlines, cardboard edges, der blue,
   die red, das green. */
.bd-chips i{--gb:var(--card)}
.bd-chip-pic{padding:0 4px !important;background:var(--blue) !important;color:#fff}
.bd-chip-pic svg{display:block}
.bd-chip-q{background:var(--sun) !important;color:var(--ink) !important}
.bd-chip-w{background:var(--blue) !important}

.bd{flex:1;display:flex;flex-direction:column;min-height:0}
.bd-pick,.bd-done{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px var(--gut) 40px}
.bd-pick > *,.bd-done > *{width:100%;max-width:880px}
.bd-pick > .backlink{width:auto;align-self:flex-start}

/* the lid: three snapshots pinned to the table */
.bd-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:4px}
.bd-hero-art{position:relative;width:210px;height:112px;margin-bottom:6px}
.bd-pol{position:absolute;top:10px;width:84px;height:94px;padding:8px 8px 18px;background:#fff;border:var(--bw) solid var(--ink);
  border-radius:10px;box-shadow:var(--lift-sm)}
.bd-pol img{display:block;width:100%;height:100%;object-fit:contain}
.bd-pol.p0{left:0;transform:rotate(-9deg)}
.bd-pol.p1{left:63px;top:0;z-index:1;transform:rotate(2deg)}
.bd-pol.p2{right:0;transform:rotate(10deg)}
.bd-h{margin:0;font-size:clamp(32px,7vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1}
.bd-sub{margin:0;max-width:46ch;font-size:15.5px;line-height:1.45;color:var(--ink-2)}

/* the six levels */
.bd-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.bd-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bd-lv{--lc:var(--blue);position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:8px 10px;
  padding:14px;text-align:left;border-radius:var(--r-lg);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease)}
.bd-lv:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.bd-lv:hover{transform:translateY(-2px)}.bd-lv:hover .bd-peek img:nth-child(2){transform:translateY(-4px) rotate(2deg)}}
.lv-a1{--lc:#4C8BF5}.lv-a2{--lc:var(--blue)}.lv-b1{--lc:#23A058}.lv-b2{--lc:var(--green)}.lv-c1{--lc:#E8645A}.lv-c2{--lc:var(--red)}
.bd-code{grid-column:1;grid-row:1;display:grid;place-items:center;min-width:48px;height:40px;padding:0 8px;border-radius:12px;font-size:18px;font-weight:700;
  color:#fff;background:var(--lc);border:var(--bw) solid var(--ink)}
.lv-a1 .bd-code,.lv-b1 .bd-code,.lv-c1 .bd-code{color:var(--ink)}
.bd-peek{grid-column:2;grid-row:1;justify-self:end;display:flex}
.bd-peek img{width:34px;height:34px;margin-left:-8px;padding:3px;border-radius:9px;background:#fff;border:1.5px solid var(--ink);
  transition:transform .2s var(--ease)}
.bd-peek img:nth-child(1){transform:rotate(-8deg)}
.bd-peek img:nth-child(3){transform:rotate(7deg)}
/* Two cards side by side on the narrowest phones leave about 110 px inside
   each: the level code and the three peeking pictures are made to fit it
   rather than spill onto the card beside. The name and the tap area keep
   their size. */
.bd-lv{grid-template-columns:auto minmax(0,1fr)}
.bd-peek{min-width:0}
@media (max-width:380px){
  .bd-lv{column-gap:6px}
  .bd-code{min-width:42px;height:36px;padding:0 6px;font-size:16px}
  .bd-peek img{width:26px;height:26px;margin-left:-9px;padding:2px;border-radius:7px}
}
.bd-lv-mid{grid-column:1 / -1;display:flex;flex-direction:column;gap:1px;min-width:0}
.bd-lv-name{font-size:16px;font-weight:800;line-height:1.2}
.bd-lv-how{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.bd-lv-foot{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12px;font-weight:700;color:var(--ink-3)}
.bd-best{color:var(--ink-2)}
.bd-stars{display:inline-flex;gap:2px}
.bd-stars i,.bd-bigstars i{display:block;width:14px;height:14px;background:var(--card-3);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.bd-stars i.on,.bd-bigstars i.on{background:var(--sun-lo)}
.bd-how{margin:0;text-align:center;font-size:13px;color:var(--ink-3)}
.bd-credit{margin:0;text-align:center;font-size:12px}
.bd-credit a{color:var(--ink-3)}

/* ── the round ── */
.bd-play{flex:1;display:flex;flex-direction:column;gap:14px;padding:12px var(--gut) 28px;width:100%;max-width:980px;margin:0 auto}
.bd-hud{display:flex;align-items:center;gap:12px}
.bd-prog{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--ink-2)}
.bd-dots{display:flex;gap:4px}
.bd-dots i{width:10px;height:10px;border-radius:50%;background:var(--card);border:1.5px solid var(--line-2)}
.bd-dots i.now{background:var(--sun);border-color:var(--ink);transform:scale(1.25)}
.bd-dots i.ok{background:var(--green);border-color:var(--ink)}
.bd-dots i.no{background:var(--red);border-color:var(--ink)}
.bd-dots i.half{background:linear-gradient(90deg,var(--green) 50%,var(--sun) 50%);border-color:var(--ink)}
.bd-score{min-width:62px;padding:8px 12px;border-radius:12px;text-align:center;font-size:18px;font-weight:700;background:var(--card);
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}

.bd-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;justify-items:center;width:100%}
@media (min-width:860px){.bd-stage{grid-template-columns:auto minmax(0,1fr);gap:28px;justify-items:stretch}}
.bd-frame{position:relative;width:min(76vw,320px);aspect-ratio:1;padding:14px;border-radius:24px;
  background:radial-gradient(circle at 1px 1px,rgba(29,25,52,.07) 1.1px,transparent 1.5px) 0 0/14px 14px,#fff;
  border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
@media (max-height:700px) and (max-width:859px){.bd-frame{width:min(60vw,240px)}}
@media (min-width:860px){.bd-frame{width:360px}}
.bd-img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.bd-tiles{position:absolute;inset:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}
.bd-tile{display:block;border-radius:9px;border:var(--bw) solid var(--ink);box-shadow:inset 0 -4px 0 rgba(29,25,52,.18);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35) 0 3px,transparent 3.5px),var(--tc)}
.t-blue{--tc:var(--blue)}.t-green{--tc:var(--green)}.t-red{--tc:var(--red)}.t-sun{--tc:var(--sun)}
.bd-bonus{position:absolute;top:-12px;right:-12px;z-index:2;padding:4px 10px;border-radius:999px;font-size:14px;font-weight:700;
  background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.bd-float{position:absolute;left:50%;top:40%;z-index:3;padding:4px 12px;border-radius:999px;font-size:18px;font-weight:700;
  color:#fff;background:var(--green);border:var(--bw) solid var(--ink);pointer-events:none;white-space:nowrap}

.bd-side{width:100%;min-width:0;max-width:520px;display:flex;flex-direction:column;gap:12px}
@media (min-width:860px){.bd-side{max-width:none;padding-top:8px}}
.bd-answer{display:flex;flex-direction:column;gap:10px}
.bd-q{margin:0;text-align:center;font-size:18px;font-weight:800}
@media (min-width:860px){.bd-q{text-align:left}}
.bd-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bd-opt{display:flex;align-items:center;justify-content:center;gap:8px;min-height:62px;padding:8px 12px;border-radius:var(--r);
  font-size:17px;font-weight:800;text-align:center;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease}
.bd-opt span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.bd-opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.bd-opt:hover:not(:disabled){background:var(--sun-soft)}}
.bd-opt.right{background:var(--green-soft);border-color:var(--green-lo)}
.bd-opt.wrong{background:var(--red-soft);color:var(--red-tx)}
.bd-opt:disabled:not(.right):not(.wrong){opacity:.5}
.bd-art{flex:0 0 auto;display:inline-block;padding:1px 7px;border-radius:7px;font-style:normal;font-size:.78em;font-weight:800;color:#fff;
  border:1.5px solid var(--ink)}
.a-der{background:var(--der-bg)}.a-die{background:var(--die-bg)}.a-das{background:var(--das-bg)}
.bd-art.big{font-size:18px;padding:2px 10px;border-radius:9px}

.bd-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bd-artb{min-height:64px;border-radius:var(--r);font-size:21px;font-weight:800;color:#fff;border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),opacity .2s ease}
.bd-artb:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.bd-artb:disabled:not(.right):not(.wrong){opacity:.4}
.bd-artb.right{box-shadow:0 4px 0 var(--ink),0 0 0 4px var(--green-hi)}
.bd-artb.wrong{opacity:.55;text-decoration:line-through;text-decoration-thickness:3px}

.bd-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.bd-slots i{display:grid;place-items:center;width:28px;height:36px;border-radius:8px;font-style:normal;font-size:18px;font-weight:800;
  background:#fff;border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.bd-slots i.hint{color:var(--blue-tx);background:var(--blue-soft)}
.bd-slots i.dash{width:14px;border:0;box-shadow:none;background:none}
@media (max-width:400px){.bd-slots i{width:23px;height:32px;font-size:16px}}
.bd-write{display:flex;gap:8px}
.bd-in{flex:1;min-width:0;min-height:52px;padding:0 14px;border-radius:14px;font:inherit;font-size:19px;font-weight:700;color:var(--ink);
  background:#fff;border:var(--bw) solid var(--ink)}
.bd-write.right .bd-in{background:var(--green-soft);border-color:var(--green-lo)}
.bd-write.wrong .bd-in{background:var(--red-soft);color:var(--red-tx)}
.bd-write .btn.sm{min-height:52px}
.bd-keys{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bd-keys button{min-width:46px;min-height:42px;padding:0 10px;border-radius:11px;font-size:17px;font-weight:800;background:#fff;
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.bd-keys button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.bd-keys .bd-hintb{font-size:13.5px;background:var(--sun-soft)}

.bd-reveal{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border-radius:var(--r-lg);text-align:center;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.bd-reveal.good{background:linear-gradient(180deg,var(--green-soft),#fff 60%)}
.bd-reveal.bad{background:linear-gradient(180deg,var(--red-soft),#fff 60%)}
.bd-verdict{margin:0;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.bd-reveal.good .bd-verdict{color:var(--green-tx)}
.bd-reveal.bad .bd-verdict{color:var(--red-tx)}
.bd-reveal.half{background:linear-gradient(180deg,var(--sun-soft),#fff 60%)}
.bd-reveal.half .bd-verdict{color:#7A5600}
.bd-word{margin:2px 0 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:clamp(26px,6vw,34px);line-height:1.1}
.bd-word b{font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.bd-pl{margin:0;font-size:14.5px;font-weight:700;color:var(--ink-2)}
.bd-mean{margin:0;font-size:15px;color:var(--ink-2)}
.bd-artnote{margin:0;font-size:13.5px;font-weight:700;color:#7A5600}
.bd-artnote b{font-weight:800;color:var(--ink);padding:1px 6px;border-radius:6px;background:#fff;border:1.5px solid var(--line-2)}
.bd-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;width:100%}
.bd-acts .btn.sm{min-height:46px;flex:1 1 140px;gap:8px}

/* ── the end of a round ── */
.bd-dhead{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px;border-radius:var(--r-lg);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.bd-bigstars{display:flex;gap:8px}
.bd-bigstars i{width:44px;height:44px}
.bd-dt{margin:4px 0 0;font-size:clamp(24px,5vw,32px);font-weight:800}
.bd-ds{margin:0;color:var(--ink-2);font-weight:700}
.bd-rt{margin:6px 0 0;font-size:17px;font-weight:800}
.bd-review{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.bd-rc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:16px;text-align:center;cursor:pointer;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.bd-rc.ok{background:linear-gradient(180deg,var(--green-soft),#fff 55%)}
.bd-rc.no{background:linear-gradient(180deg,var(--red-soft),#fff 55%)}
.bd-rc img{width:56px;height:56px}
.bd-rn{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:5px;font-size:14px}
.bd-rn b{overflow-wrap:anywhere}
.bd-rm{font-size:12px;color:var(--ink-3)}
.bd-dacts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.bd-dacts .btn{flex:1 1 180px;max-width:280px}

/* ── 09-admin.css ── */
/* ── Spielleitung: the administrator's dashboard ──────────────────────
   The game master's screen that stands behind a board game: the same cards
   and ink as the rest of the box, set out as tiles, a player list and one
   player's card. Destructive buttons ask twice, in place, rather than with a
   browser dialog. */
.adm-btn{color:var(--ink);background:var(--sun)}
@media (hover:hover) and (pointer:fine){.adm-btn:hover{background:var(--sun-hi)}}

.adm{flex:1;display:flex;flex-direction:column;min-height:0}
.adm-in{width:100%;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:14px var(--gut) 48px}
.adm-in > .backlink{align-self:flex-start}

.adm-head{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:18px;border-radius:var(--r-lg);color:#fff;
  background:var(--ink);border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.adm-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:var(--ink);background:var(--sun);
  border:var(--bw) solid #fff}
.adm-badge svg{width:28px;height:28px}
.adm-hid{flex:1 1 200px;min-width:0}
.adm-kick{margin:0;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-hi)}
.adm-h{margin:0;font-size:clamp(26px,5vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:#fff}
.adm-sub{margin:2px 0 0;font-size:13.5px;color:#fff;opacity:.85}
.adm-live{display:flex;flex-wrap:wrap;gap:6px}
.adm-pill{display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;
  color:#fff;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.28)}
.adm-pill b{font-size:14px}
.adm-pill.on{color:var(--ink);background:var(--green-hi);border-color:#fff}

.adm-tabs{align-self:flex-start;max-width:100%;overflow-x:auto}
.adm-tabs button{white-space:nowrap}
.adm-pane{display:flex;flex-direction:column;gap:14px}

.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.adm-stat{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r);background:var(--card);
  border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm);position:relative;overflow:hidden}
.adm-stat span::before{content:'';display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:3px;vertical-align:-1px;
  background:var(--sc,var(--blue));border:1.5px solid var(--ink)}
.adm-stat b{font-size:26px;font-weight:700;line-height:1.1;margin-top:4px}
.adm-stat span{font-size:13px;font-weight:700;color:var(--ink-2)}
.st-blue{--sc:var(--blue)}
.st-green{--sc:var(--green)}
.st-red{--sc:var(--red)}
.st-sun{--sc:var(--sun)}

.adm-find{display:flex;flex-wrap:wrap;gap:8px}
.adm-find input,.adm-find select,.adm-field input,.adm-field select,.adm-pane textarea{
  min-height:44px;padding:0 12px;border-radius:12px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--card);border:var(--bw) solid var(--ink)}
.adm-find input{flex:1 1 220px}
.adm-find select{flex:0 0 auto}
.adm-split{display:grid;gap:14px;align-items:start}
@media (min-width:900px){.adm-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.adm-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px;border-radius:var(--r-lg);
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm);max-height:70vh;overflow:auto}
.adm-row-u{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;
  padding:8px 10px;border-radius:12px;text-align:left}
.adm-row-u .adm-av{grid-row:1 / 3}
.adm-row-u .adm-u-mid{grid-column:2;grid-row:1 / 3}
.adm-row-u .adm-u-tags{grid-column:3;grid-row:1;justify-self:end}
.adm-row-u .adm-u-fig{grid-column:3;grid-row:2;justify-self:end}
.adm-row-u.on{background:var(--sun-soft);box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover) and (pointer:fine){.adm-row-u:hover{background:var(--card-2)}}
.adm-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-weight:800;color:#fff;background:var(--blue);border:var(--bw) solid var(--ink)}
.adm-av.big{width:52px;height:52px;font-size:22px}
.adm-u-mid{display:flex;flex-direction:column;min-width:0}
.adm-u-mid b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.adm-u-sub{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-u-fig{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.adm-u-tags{display:flex;gap:4px}
.adm-u-tags i{font-style:normal;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink)}
.tg-admin{background:var(--sun)}
.tg-ban{color:#fff;background:var(--red)}
.tg-mute{background:var(--card-3)}
.adm-empty{margin:0;padding:18px;text-align:center;color:var(--ink-3);font-weight:600}

.adm-card{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--r-lg);background:var(--card);
  border:var(--bw) solid var(--ink);box-shadow:var(--lift);scroll-margin-top:calc(var(--barh,64px) + 12px)}
.adm-c-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.adm-c-id{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-c-id b{font-size:19px}
.adm-c-id span{font-size:12.5px;color:var(--ink-3);word-break:break-all}
.adm-flash{margin:0;padding:8px 12px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--green-tx);background:var(--green-soft);border:1.5px solid var(--green-lo)}
.adm-flash.bad{color:var(--red-tx);background:var(--red-soft);border-color:var(--red)}
.adm-figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.adm-fig{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line)}
.adm-fig span{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.adm-fig b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-group{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:var(--bw) dashed var(--line)}
.adm-group h3{margin:0;font-size:15px;font-weight:800}
.adm-field{display:grid;grid-template-columns:minmax(90px,130px) minmax(0,1fr);align-items:center;gap:6px 10px}
.adm-field > span{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.adm-field input,.adm-field select{width:100%;min-width:0}
.adm-field .adm-acts{grid-column:2}
@media (max-width:520px){
  .adm-field{grid-template-columns:1fr}
  .adm-field .adm-acts{grid-column:1}
}
.adm-acts{display:flex;flex-wrap:wrap;gap:6px}
.adm-acts .btn.sm{min-height:38px;padding:0 12px;font-size:13.5px}
.adm-acts.wide .btn.sm{flex:1 1 150px}
.btn.warn{color:var(--red-tx)}
.btn.danger{color:#fff;background:var(--red)}
.btn.arm{color:#fff;background:var(--red-tx)}

.adm-lbl{font-size:14px;font-weight:700;color:var(--ink-2)}
.adm-pane textarea{min-height:96px;padding:10px 12px;resize:vertical}
.adm-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adm-count{font-size:12.5px;color:var(--ink-3)}
.adm-note{margin:0;font-weight:700;color:var(--green-tx);min-height:1.4em}

.adm-log{list-style:none;margin:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--card);
  border:var(--bw) solid var(--ink);box-shadow:var(--lift-sm)}
.adm-log li{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;padding:10px 14px;border-top:1.5px solid var(--line)}
.adm-log li:first-child{border-top:0}
.adm-l-at{font-size:12px;color:var(--ink-3)}
.adm-l-op{font-size:13px}
.adm-l-who{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-l-d{grid-column:1 / -1;font-size:12.5px;color:var(--ink-2);word-break:break-word}

/* ── the announcement banner, for everybody ───────────────────────────── */
.wk-ann{position:fixed;left:50%;top:calc(var(--barh,64px) + 10px + env(safe-area-inset-top,0px));z-index:85;transform:translate(-50%,0);
  width:min(560px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 10px 12px 14px;border-radius:18px;background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:var(--lift)}
.wk-ann-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:var(--ink)}
.wk-ann-tx{display:flex;flex-direction:column;min-width:0}
.wk-ann-tx b{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.wk-ann-tx span{font-size:15px;font-weight:700;line-height:1.35;word-break:break-word}
.wk-ann-x{width:36px;height:36px;border-radius:10px;font-size:22px;line-height:1;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.wk-ann-x:hover{background:rgba(29,25,52,.1)}}

/* ── 10-shop2.css ── */
/* ══ The second shelf of the shop ═══════════════════════════════════════
   Everything the shop gained in its second season: recorded sound packs,
   bomb decorations and rings, name plates and effects, tile skins and the
   letters' moves. Each is a mode written into an attribute or a class by
   app.js and nothing more; the look lives here. */

/* ── recorded sound packs ─────────────────────────────────────────────── */
.swatchkit{position:relative}
.swatchkit svg{width:30px;height:30px;fill:none;stroke:var(--kc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--kc) 55%,transparent))}
.stagesfx.kitted{flex-direction:row;max-width:360px}
.stagesfx button[aria-busy="true"]{opacity:.6}
body.motion .stagesfx button[aria-busy="true"]{animation:sfxBusy 1s ease-in-out infinite}
@keyframes sfxBusy{50%{opacity:.85}}

/* ── bomb decorations ─────────────────────────────────────────────────── */
/* Drawn in the bomb's own 200 unit square; the ink outline is the same ink
   as the board, so a decoration looks printed on the same box. */
.b-deco{pointer-events:none}
.b-deco .dk{fill:var(--da,var(--ba));stroke:var(--ink,#1D1934);stroke-width:3.2;stroke-linejoin:round}
.b-deco .dp{fill:var(--db,var(--bb));stroke:var(--ink,#1D1934);stroke-width:2.4;stroke-linejoin:round}
.b-deco .dstripe{fill:none;stroke:var(--db,var(--bb));stroke-width:5;stroke-linecap:round}
.b-deco .dstem{fill:none;stroke:#2F7A3C;stroke-width:4.5;stroke-linecap:round}
.b-deco .dline{fill:none;stroke:var(--ink,#1D1934);stroke-width:3;stroke-linecap:round}
.b-deco .dshine{fill:none;stroke:rgba(255,255,255,.75);stroke-width:4;stroke-linecap:round}
.b-deco .dstring{fill:none;stroke:var(--ink,#1D1934);stroke-width:2;stroke-linecap:round}
.b-deco .dband{fill:var(--db,var(--bb));stroke:var(--ink,#1D1934);stroke-width:2.4;stroke-linejoin:round}
.b-deco .dfeather{fill:#FFF4DA;stroke:var(--ink,#1D1934);stroke-width:2.6;stroke-linejoin:round}
.b-deco .dtas{fill:none;stroke:var(--db,var(--bb));stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
/* The pretzel is dough-brown whatever the ring is: an ink stroke under a
   narrower brown one, which is how a thick outlined line is drawn. */
.b-deco .dpzo{fill:none;stroke:var(--ink,#1D1934);stroke-width:15;stroke-linejoin:round}
.b-deco .dpz{fill:none;stroke:#C0702E;stroke-width:9.5;stroke-linejoin:round}
.b-deco .dpzl{fill:none;stroke:#F2B872;stroke-width:3;stroke-linecap:round}
.b-deco .dsalt{fill:#FFFFFF}
.b-deco .dgem{fill:#FF3B5C;stroke:var(--ink,#1D1934);stroke-width:2}
.b-deco .dgem.g2{fill:#3E8FFF}
.b-deco .dtail{fill:none;stroke:var(--da,var(--ba));stroke-width:6;stroke-linecap:round}
.b-deco .dgrid{fill:none;stroke:rgba(29,25,52,.55);stroke-width:1.6}
.b-deco .dstar{fill:#FFF3B0;stroke:var(--ink,#1D1934);stroke-width:1.2}
.b-deco .dcrater{fill:rgba(29,25,52,.22)}
.b-deco .dleaf{fill:var(--da,#E0B43A)}
.b-deco .dhalo{fill:none;stroke:#FFE58A;stroke-width:7;filter:drop-shadow(0 0 6px #FFD84D)}
.b-deco .dwing{fill:#FFFFFF;stroke:var(--ink,#1D1934);stroke-width:3;stroke-linejoin:round}
.b-deco .dbat{fill:var(--da,#5B1A2A)}
.b-deco .dvein{fill:none;stroke:var(--db,#2A0A12);stroke-width:2.2;stroke-linecap:round}
.b-deco .dring{fill:none;stroke:var(--da,#FFD9A0);stroke-width:9;stroke-linecap:round}
.b-deco .dring2{fill:none;stroke:var(--db,#C79BFF);stroke-width:3;stroke-linecap:round;opacity:.9}
.b-deco .df1{fill:#FF7A1A}.b-deco .df2{fill:#FFD84D}.b-deco .df3{fill:#FF3B1F}

/* the moving ones: all transform, all behind body.motion */
.dbob,.dorbit,.dspin,.dflap,.dflame,.dstar{transform-box:view-box}
body.motion .dc-balloon .dbob{animation:dBob 3.2s ease-in-out infinite;transform-origin:12px 92px}
@keyframes dBob{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-6px)}}
.dorbit{transform-origin:100px 100px}
body.motion .dorbit{animation:dOrbit 9s linear infinite}
body.motion .dorbit.slow{animation-duration:16s}
@keyframes dOrbit{to{transform:rotate(360deg)}}
.dspin{transform-origin:-2px -2px}
body.motion .dc-disco .dspin{animation:dSpin 3s linear infinite}
@keyframes dSpin{to{transform:rotate(360deg)}}
body.motion .dstar{animation:dTwinkle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
body.motion .dstar.s2{animation-delay:.5s}body.motion .dstar.s3{animation-delay:1s}body.motion .dstar.s4{animation-delay:1.5s}
@keyframes dTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.55)}}
.dflap.dl{transform-origin:20px 100px}.dflap.dr{transform-origin:180px 100px}
body.motion .dflap{animation:dFlap 1.9s ease-in-out infinite}
@keyframes dFlap{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.8) rotate(-5deg)}}
body.motion .dflap.dr{animation-name:dFlapR}
@keyframes dFlapR{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.8) rotate(5deg)}}
.dflame{transform-origin:70px 175px}
body.motion .dc-comet .dflame{animation:dFlame .5s ease-in-out infinite alternate}
@keyframes dFlame{from{transform:scale(1) skewX(0)}to{transform:scale(1.07) skewX(-4deg)}}
/* disco: the board spaces round the ring catch the light */
body.motion .bombwrap[data-bmode="disco"] .b-spaces{animation:dDisco 1.2s steps(1) infinite}
@keyframes dDisco{0%{stroke:#FF4ECD}25%{stroke:#41E0FF}50%{stroke:#FFE14D}75%{stroke:#7CFF6B}}

/* ── shop cards: each one a small copy of what the stage will show ─────── */
.shopcard .swatch{position:relative;height:74px;overflow:hidden}
.swatchbomb .minibomb{width:78px;height:78px;overflow:visible;filter:drop-shadow(0 0 7px var(--bglow))}
.minibomb-syl{font-family:var(--display,inherit);font-size:44px;font-weight:900;fill:#fff;letter-spacing:.02em}
.swatchwin2{position:absolute;inset:0}
.swatchthumb{background:#10102A}
.swatchthumb img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.swatchwin2 .wp{opacity:1;animation:none}
.swatchscene svg{position:relative;z-index:1}
.swatchbolt{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(160,210,255,.8))}
.swatchsynth svg{stroke-width:1.6}
.shopstage .bombwrap svg{overflow:visible}
@media (prefers-reduced-motion:reduce){body.motion .b-deco *{animation-duration:0s !important}}

/* ── name styles ──────────────────────────────────────────────────────── */
/* Every one of these has to read at thirteen pixels in a chat line and at
   forty on the shop stage, on the light table, so each carries its own
   ground or its own edge. The ink edge is four one pixel shadows, the same
   trick the first shelf's gradient names use. */
.pnx{display:inline-block;max-width:100%;line-height:1.3;vertical-align:baseline;white-space:nowrap;text-overflow:ellipsis;font-weight:800;
  --edge:drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink))}
.pn-neon{padding:0 .4em;border-radius:6px;background:var(--ink);color:#fff;
  text-shadow:0 0 .12em #fff,0 0 .35em var(--n1),0 0 .7em var(--n1),0 0 1.1em var(--n2)}
.pn-sticker{color:#fff;-webkit-text-stroke:.07em var(--n1);paint-order:stroke fill;text-shadow:.07em .09em 0 var(--n2)}
.pn-retro{color:var(--n1);-webkit-text-stroke:.03em var(--ink);paint-order:stroke fill;
  text-shadow:.04em .04em 0 var(--n2),.08em .08em 0 var(--n2),.12em .12em 0 var(--ink)}
.pn-marker{color:var(--ink);padding:0 .15em;
  background:linear-gradient(100deg,transparent 2%,var(--n1) 4%,var(--n1) 94%,transparent 97%) 0 62%/100% 58% no-repeat}
.pn-stamp{padding:0 .3em;border:.12em solid var(--n1);border-radius:.2em;color:var(--n1);letter-spacing:.03em;
  transform:rotate(-3deg);background:color-mix(in srgb,var(--n1) 8%,transparent)}
.pn-tag{padding:0 .45em;border-radius:999px;background:var(--n1);color:var(--n2);border:.08em solid var(--n2)}
.pn-plate{padding:0 .5em;border-radius:7px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.14) 0 6px,transparent 6px 14px),linear-gradient(95deg,var(--n1),var(--n2));
  box-shadow:inset 0 0 0 .08em rgba(29,25,52,.55)}
.pn-sparkle{position:relative;padding:0 .45em;border-radius:6px;background:var(--ink);color:var(--n1);overflow:visible}
.pn-sparkle::before,.pn-sparkle::after{content:"";position:absolute;width:.5em;height:.5em;background:var(--n2);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.pn-sparkle::before{right:-.18em;top:-.2em}
.pn-sparkle::after{left:-.14em;bottom:-.16em;width:.36em;height:.36em}
body.motion .pn-sparkle::before{animation:pnTw 1.8s ease-in-out infinite}
body.motion .pn-sparkle::after{animation:pnTw 1.8s ease-in-out .9s infinite}
@keyframes pnTw{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.4) rotate(45deg);opacity:.5}}
.pn-frost{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(170deg,#FFFFFF 10%,var(--n1) 45%,var(--n2) 95%);
  filter:var(--edge) drop-shadow(0 0 3px color-mix(in srgb,var(--n1) 70%,transparent))}
.pn-comic{color:var(--n1);-webkit-text-stroke:.09em var(--ink);paint-order:stroke fill;text-shadow:.1em .12em 0 var(--n2);
  letter-spacing:.01em;transform:skewX(-6deg)}
.pn-fire{color:transparent;-webkit-background-clip:text;background-clip:text;background-size:100% 300%;
  background-image:linear-gradient(0deg,#FF3B1F 0%,#FF7A1A 25%,#FFD84D 45%,#FF7A1A 65%,#FF3B1F 85%,#FFD84D 100%);
  filter:var(--edge) drop-shadow(0 -2px 3px rgba(255,120,30,.7))}
body.motion .pn-fire{animation:pnFire 1.4s linear infinite}
@keyframes pnFire{from{background-position:0 0}to{background-position:0 -300%}}
.pn-wave{color:var(--n1);filter:var(--edge)}
.pn-wave i{display:inline-block;font-style:normal}
.pn-wave i:nth-child(odd){color:var(--n2)}
body.motion .pn-wave i{animation:pnWave 1.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.1s)}
@keyframes pnWave{0%,100%{transform:translateY(.06em)}50%{transform:translateY(-.14em)}}
/* a sign with bulbs: two rows of lights along the top and bottom edge that
   take turns, drawn as one repeating dot per row */
.pn-marquee{padding:.12em .6em;border-radius:6px;color:var(--n1);background-color:var(--ink);
  background-image:radial-gradient(circle,var(--n2) 0 .07em,transparent .09em),radial-gradient(circle,var(--n2) 0 .07em,transparent .09em);
  background-size:.42em .42em,.42em .42em;background-repeat:repeat-x;background-position:0 -.1em,.21em calc(100% + .1em)}
body.motion .pn-marquee{animation:pnBulbs .8s steps(1) infinite}
@keyframes pnBulbs{50%{background-position:.21em -.1em,0 calc(100% + .1em)}}
.pn-pixel{padding:0 .4em;border-radius:3px;background:var(--ink);color:var(--n1);font-family:var(--mono);letter-spacing:.04em;
  text-shadow:.08em 0 0 var(--n2),0 .08em 0 var(--n2)}
.pn-holo{color:transparent;-webkit-background-clip:text;background-clip:text;background-size:300% 300%;
  background-image:linear-gradient(115deg,#FF9AE6,#9AF2FF 20%,#FFF59A 38%,#B9A2FF 55%,#9AFFC8 72%,#FF9AE6 90%);filter:var(--edge)}
body.motion .pn-holo{animation:pnHolo 4s ease-in-out infinite alternate}
@keyframes pnHolo{from{background-position:0% 50%}to{background-position:100% 50%}}
.pn-thunder{padding:0 .45em;border-radius:6px;background:var(--ink);color:var(--n1);text-shadow:0 0 .2em var(--n2)}
body.motion .pn-thunder{animation:pnZap 3.2s steps(1) infinite}
@keyframes pnZap{0%,90%,100%{text-shadow:0 0 .2em var(--n2);transform:none}
  91%{text-shadow:0 0 .1em #fff,0 0 .6em var(--n2),0 0 1.2em var(--n2);color:#fff;transform:skewX(-8deg)}
  93%{text-shadow:0 0 .2em var(--n2);transform:none}
  95%{text-shadow:0 0 .1em #fff,0 0 .8em var(--n2);color:#fff}}
.pn-flow{padding:0 .5em;border-radius:7px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);background-size:300% 100%;
  background-image:linear-gradient(95deg,var(--n1),var(--n2),#5B8CFF,var(--n1));box-shadow:inset 0 0 0 .08em rgba(29,25,52,.55)}
body.motion .pn-flow{animation:pnSweep 6s linear infinite}
.pn-galaxy{padding:0 .5em;border-radius:7px;color:#fff;text-shadow:0 0 .3em var(--n2),0 1px 0 #000;
  background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 45% 80%,rgba(255,255,255,.8) 0 .8px,transparent 1.3px),radial-gradient(circle at 88% 22%,rgba(255,255,255,.9) 0 .8px,transparent 1.3px),
    radial-gradient(120% 140% at 30% 20%,var(--n1),#1A0B3A 70%);background-size:40px 22px,33px 19px,27px 17px,46px 23px,100% 100%;
  box-shadow:inset 0 0 0 .08em rgba(29,25,52,.6)}
body.motion .pn-galaxy{animation:pnStars 7s linear infinite}
@keyframes pnStars{to{background-position:40px 0,-33px 0,27px 0,-46px 0,0 0}}
.pn-royal{position:relative;padding-left:1.15em;color:transparent;-webkit-background-clip:text;background-clip:text;background-size:280% 100%;
  background-image:linear-gradient(100deg,var(--n1) 0%,var(--n2) 44%,#FFFFFF 50%,var(--n2) 56%,var(--n1) 100%);filter:var(--edge)}
.pn-royal::before{content:"";position:absolute;left:0;top:50%;width:.95em;height:.72em;transform:translateY(-58%);background:var(--n2);
  clip-path:polygon(0 100%,0 22%,26% 55%,50% 0,74% 55%,100% 22%,100% 100%)}
body.motion .pn-royal{animation:pnSweep 3.4s linear infinite}

/* ── letter tiles: skins ──────────────────────────────────────────────── */
/* A skin is the tile itself; the letter's colour, glow and edge still come
   from the item (--tyc --tys --tyb). A tile that is part of the syllable
   keeps the yellow it always has, whatever it is made of. */
.tilerow[data-tskin] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin] span{box-shadow:0 3px 0 rgba(29,25,52,.35)}
.tilerow[data-tskin="wood"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="wood"] span{
  background:repeating-linear-gradient(94deg,rgba(120,70,20,.10) 0 2px,transparent 2px 7px),linear-gradient(180deg,#F6DDAC,#E0B26E);box-shadow:0 3px 0 #8A5A2B}
.tilerow[data-tskin="keycap"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="keycap"] span{
  background:linear-gradient(#FFFFFF,#DCE1EA);box-shadow:inset 0 -4px 0 #C5CCD9,0 3px 0 #7E879B;border-radius:9px}
.tilerow[data-tskin="chalk"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="chalk"] span{
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.08),transparent 60%),#2E4A3B;box-shadow:0 3px 0 #6B4A2B}
.tilerow[data-tskin="candy"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="candy"] span{
  background:repeating-linear-gradient(135deg,#FFB3D9 0 6px,#FFE3F1 6px 12px);box-shadow:0 3px 0 #E07AAE;border-radius:12px}
.tilerow[data-tskin="sticky"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="sticky"] span{
  background:linear-gradient(#FFF08A,#FFE24D);border-radius:2px;box-shadow:0 4px 5px -2px rgba(29,25,52,.35)}
.tilerow[data-tskin="sticky"] span:nth-child(odd),.tyfx[data-tskin="sticky"] span:nth-child(odd){rotate:-4deg}
.tilerow[data-tskin="sticky"] span:nth-child(even),.tyfx[data-tskin="sticky"] span:nth-child(even){rotate:3deg}
.tilerow[data-tskin="bubble"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="bubble"] span{
  border-radius:50%;aspect-ratio:1;background:radial-gradient(circle at 32% 28%,#FFFFFF 0 9%,#A8ECFF 30%,#3E9BFF 100%);box-shadow:0 3px 0 #1E5FA8}
.tilerow[data-tskin="paper"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="paper"] span{border-radius:1px;font-family:Georgia,'Times New Roman',serif;background:#FFFFFF;color:#111 !important;text-shadow:none !important}
.tilerow[data-tskin="paper"] span:nth-child(5n+2):not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="paper"] span:nth-child(5n+2){background:#FFE970;rotate:4deg;font-family:var(--mono)}
.tilerow[data-tskin="paper"] span:nth-child(5n+3):not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="paper"] span:nth-child(5n+3){background:#1D1934;color:#fff !important;rotate:-5deg}
.tilerow[data-tskin="paper"] span:nth-child(5n+4):not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="paper"] span:nth-child(5n+4){background:#FF5C8A;color:#fff !important;rotate:3deg;font-style:italic}
.tilerow[data-tskin="paper"] span:nth-child(5n):not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="paper"] span:nth-child(5n){background:#BFE9FF;rotate:-2deg;font-family:var(--mono)}
.tilerow[data-tskin="ice"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="ice"] span{
  background:linear-gradient(160deg,#F4FCFF,#C6ECFF 55%,#8FD3FF);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 3px 0 #5AA6DE;border-radius:7px}
.tilerow[data-tskin="neon"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="neon"] span{
  background:#120F24;box-shadow:0 0 0 1px var(--tyb),0 0 10px var(--tyb),inset 0 0 8px color-mix(in srgb,var(--tyb) 60%,transparent)}
.tilerow[data-tskin="jelly"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="jelly"] span{
  background:radial-gradient(circle at 35% 25%,#D2FFE0 0 12%,#6BF29A 40%,#1FB463);border-radius:14px 11px 15px 10px;box-shadow:0 3px 0 #147A43}
.tilerow[data-tskin="typebar"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="typebar"] span{
  border-radius:50%;aspect-ratio:1;font-family:Georgia,'Times New Roman',serif;
  background:radial-gradient(circle,#2A2A2E 0 56%,#E4E7EE 58%,#9AA1AE 70%,#2A2A2E 73%);box-shadow:0 3px 0 #111}
.tilerow[data-tskin="gold"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="gold"] span{
  background:linear-gradient(120deg,#FFF3B8 0%,#E0B43A 30%,#A77A16 48%,#FFE58A 62%,#C9903A 100%);background-size:220% 100%;box-shadow:0 3px 0 #6E4F0C}
.tilerow[data-tskin="pixel"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="pixel"] span{
  border-radius:0;font-family:var(--mono);background:#1D1934;box-shadow:3px 3px 0 #000,inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.12)}
.tilerow[data-tskin="lava"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="lava"] span{
  background:radial-gradient(circle at 50% 110%,#FF7A1A,#B11A00 45%,#2A0700 80%);box-shadow:0 3px 0 #1A0500,0 0 10px rgba(255,90,20,.5)}
.tilerow[data-tskin="domino"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="domino"] span{
  background:#FFFDF6;border-radius:6px;box-shadow:inset 0 -3px 0 #E4DFCF,0 3px 0 #1D1934}
.tilerow[data-tskin="holo"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="holo"] span{
  background:linear-gradient(115deg,#FF9AE6,#9AF2FF 22%,#FFF59A 40%,#B9A2FF 58%,#9AFFC8 76%,#FF9AE6 94%);background-size:300% 300%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 3px 0 #6A5AA8}
.tilerow[data-tskin="rune"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="rune"] span{
  background:radial-gradient(circle at 30% 25%,#9AA0AE,#5A5F6C 60%,#3C404B);border-radius:11px 7px 12px 8px;box-shadow:0 3px 0 #23262E}
.tilerow[data-tskin="galaxy"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="galaxy"] span{
  background:radial-gradient(circle at 25% 30%,#fff 0 .8px,transparent 1.3px),radial-gradient(circle at 70% 65%,#fff 0 .7px,transparent 1.2px),
    radial-gradient(circle at 55% 20%,rgba(255,255,255,.8) 0 .6px,transparent 1.1px),radial-gradient(130% 120% at 30% 20%,#7A3CFF,#1A0B3A 70%);
  background-size:14px 14px,11px 11px,17px 17px,100% 100%;box-shadow:0 3px 0 #0B0420,0 0 10px rgba(150,90,255,.45)}
.tilerow[data-tskin="fire"] span:not(.hit):not(.caret):not(.ghost),.tyfx[data-tskin="fire"] span{
  background:linear-gradient(180deg,#4A1200,#1A0500);box-shadow:0 3px 0 #000,0 -3px 12px rgba(255,110,30,.55)}

/* ── letter tiles: how a letter arrives, and what the row keeps doing ─── */
/* Arrivals play on the newest letter only (older ones carry .stay); the
   ambient ones play on every letter, spread along the word by --i. */
.tilerow[data-tmode="drop"] span:not(.stay):not(.caret):not(.ghost),.tyfx-drop span{animation:tyDrop .44s cubic-bezier(.3,1.5,.5,1) both}
@keyframes tyDrop{0%{opacity:0;transform:translateY(-26px)}60%{opacity:1;transform:translateY(3px) scaleY(.9)}100%{transform:none}}
.tilerow[data-tmode="press"] span:not(.stay):not(.caret):not(.ghost),.tyfx-press span{animation:tyPress .2s ease-out both}
@keyframes tyPress{0%{transform:translateY(4px);box-shadow:inset 0 -1px 0 #C5CCD9,0 0 0 #7E879B}100%{transform:none}}
.tilerow[data-tmode="pop"] span:not(.stay):not(.caret):not(.ghost),.tyfx-pop span{animation:tyPop .34s cubic-bezier(.3,1.7,.5,1) both}
@keyframes tyPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
.tilerow[data-tmode="flip"] span:not(.stay):not(.caret):not(.ghost),.tyfx-flip span{animation:tyFlip .4s cubic-bezier(.23,1,.32,1) both}
@keyframes tyFlip{0%{opacity:0;transform:perspective(200px) rotateX(-95deg)}100%{opacity:1;transform:none}}
.tilerow[data-tmode="rise"] span:not(.stay):not(.caret):not(.ghost),.tyfx-rise span{animation:tyRise .5s cubic-bezier(.23,1,.32,1) both}
@keyframes tyRise{0%{opacity:0;transform:translateY(22px) scale(.6)}100%{opacity:1;transform:none}}
.tilerow[data-tmode="stamp"] span:not(.stay):not(.caret):not(.ghost),.tyfx-stamp span{animation:tyStamp .3s cubic-bezier(.5,0,.75,0) both}
@keyframes tyStamp{0%{opacity:0;transform:scale(2.2) rotate(-12deg)}80%{opacity:1;transform:scale(.94)}100%{transform:none}}
.tilerow[data-tmode="flickin"] span:not(.stay):not(.caret):not(.ghost),.tyfx-flickin span{animation:tyFlickIn .5s steps(1) both}
@keyframes tyFlickIn{0%{opacity:0}20%{opacity:1}30%{opacity:.2}45%{opacity:1}55%{opacity:.4}70%,100%{opacity:1}}
.tilerow[data-tmode="jelly"] span:not(.stay):not(.caret):not(.ghost),.tyfx-jelly span{animation:tyJelly .6s ease-out both}
@keyframes tyJelly{0%{opacity:0;transform:scale(.4,.4)}30%{opacity:1;transform:scale(1.25,.75)}45%{transform:scale(.8,1.2)}60%{transform:scale(1.1,.9)}75%{transform:scale(.96,1.04)}100%{transform:none}}
.tilerow[data-tmode="strike"] span:not(.stay):not(.caret):not(.ghost),.tyfx-strike span{animation:tyStrike .16s ease-out both}
@keyframes tyStrike{0%{transform:translateY(-8px) scale(1.1);filter:brightness(1.4)}100%{transform:none;filter:none}}
.tilerow[data-tmode="pixel"] span:not(.stay):not(.caret):not(.ghost),.tyfx-pixel span{animation:tyPixel .32s steps(4) both}
@keyframes tyPixel{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}
.tilerow[data-tmode="topple"] span:not(.stay):not(.caret):not(.ghost),.tyfx-topple span{transform-origin:0 100%;animation:tyTopple .42s cubic-bezier(.45,0,.3,1.4) both}
@keyframes tyTopple{0%{opacity:0;transform:rotate(-80deg)}40%{opacity:1}100%{transform:none}}
.tilerow[data-tmode="rune"] span:not(.stay):not(.caret):not(.ghost),.tyfx-rune span{animation:tyRune .7s ease-out both}
@keyframes tyRune{0%{opacity:0;filter:brightness(3) blur(3px)}40%{opacity:1;filter:brightness(1.8)}100%{filter:none}}
body.motion .tilerow[data-tmode="shine"] span:not(.hit),body.motion .tyfx-shine span{animation:tyShine 2.6s linear infinite;animation-delay:calc(var(--i,0) * .12s)}
@keyframes tyShine{from{background-position:130% 0}to{background-position:-90% 0}}
body.motion .tilerow[data-tmode="lava"] span:not(.hit),body.motion .tyfx-lava span{animation:tyLava 1.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.3s)}
@keyframes tyLava{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.3)}}
body.motion .tilerow[data-tmode="holo"] span:not(.hit),body.motion .tyfx-holo span{animation:tyHolo 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.2s)}
@keyframes tyHolo{from{background-position:0% 50%}to{background-position:100% 50%}}
body.motion .tilerow[data-tmode="glitch"] span,body.motion .tyfx-glitch span{animation:tyGlitch 2.2s steps(1) infinite;animation-delay:calc(var(--i,0) * -.37s)}
@keyframes tyGlitch{0%,82%,100%{transform:none;text-shadow:var(--tys,none)}84%{transform:translate(-2px,1px);text-shadow:-2px 0 #FF2D6F,2px 0 #41E0FF}
  86%{transform:translate(2px,-1px) skewX(-10deg);text-shadow:2px 0 #FF2D6F,-2px 0 #41E0FF}88%{transform:none;text-shadow:-1px 0 #FF2D6F,1px 0 #41E0FF}}
body.motion .tilerow[data-tmode="galaxy"] span:not(.hit),body.motion .tyfx-galaxy span{animation:tyStars 6s linear infinite}
@keyframes tyStars{to{background-position:14px 0,-11px 0,17px 0,0 0}}
body.motion .tilerow[data-tmode="burn"] span,body.motion .tyfx-burn span{animation:tyBurn .9s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -.21s)}
@keyframes tyBurn{from{text-shadow:0 -1px 3px #FFB020,0 -4px 8px #FF5A1A}to{text-shadow:0 -2px 5px #FFD84D,0 -8px 14px #FF3B1F,0 -12px 18px rgba(255,59,31,.5)}}
/* The arrivals are motion, and motion is optional. */
body:not(.motion) .tilerow[data-tmode] span:not(.caret),body:not(.motion) .tyfx span{animation:none !important}

/* ── narrowing the grid ─────────────────────────────────────────────── */
.shopfilter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 2px 4px;overscroll-behavior-x:contain}
.shopfilter::-webkit-scrollbar{display:none}
.shopfilter button{flex:0 0 auto;min-height:36px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:800;
  background:var(--card);border:1.5px solid var(--line-2);color:var(--ink-2);transition:background .15s ease,border-color .15s ease}
.shopfilter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.shopfilter button[data-f="new"]{border-color:#D6372C;color:#B42318}
.shopfilter button[data-f="new"][aria-pressed="true"]{background:#D6372C;color:#fff}
.shopfilter button[data-tier="rare"][aria-pressed="true"]{background:#1F55B8;border-color:#1F55B8}
.shopfilter button[data-tier="epic"][aria-pressed="true"]{background:#6A2FC0;border-color:#6A2FC0}
.shopfilter button[data-tier="legendary"][aria-pressed="true"]{background:#8A5A00;border-color:#8A5A00}
.shopfilter button[data-tier="mythic"][aria-pressed="true"]{background:#B0215F;border-color:#B0215F}
@media (hover:hover) and (pointer:fine){.shopfilter button:hover{border-color:var(--ink)}}
.shopcard .newtag{position:absolute;left:6px;top:6px;z-index:2;padding:1px 6px;border-radius:5px;font-size:10px;font-weight:900;letter-spacing:.08em;
  background:#D6372C;color:#fff;border:1.5px solid var(--ink)}

/* Names and tiles on a card are drawn nearer the size the stage shows them,
   so the card reads as the same thing, only smaller. */
.shopcard .swatchname{font-size:clamp(20px,5.6vw,25px)}
.shopcard .swatch .tyfx{gap:4px}
.shopcard .swatch .tyfx span{min-width:30px;height:38px;font-size:18px;border-radius:8px}

/* ── 11-play2.css ── */
/* ══ Stickers in play, and the round report ════════════════════════════
   The joker bar under the solo bomb, stickers pinned beside a name and
   slapped onto a table, and the report that closes every game. */

/* ── jokers ──────────────────────────────────────────────────────────── */
.jokers{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;width:100%;max-width:640px}
.jokers[hidden]{display:none}
.joker{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px 0 9px;border-radius:999px;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);font-size:13px;font-weight:800;color:var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),opacity .2s ease}
.joker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.joker b{position:absolute;right:-6px;top:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:11px}
.joker.jk-tip{background:#FFF3C4}.joker.jk-swap{background:#DDEBFF}.joker.jk-slow{background:#E6F7EA}.joker.jk-shield{background:#FFE0EE}
.joker.on{background:var(--sun);box-shadow:0 3px 0 var(--ink),0 0 0 3px #fff,0 0 0 5px var(--ink)}
.joker:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.joker:disabled{opacity:.42;box-shadow:none;transform:translateY(3px)}
@media (hover:hover) and (pointer:fine){.joker:hover:not(:disabled){filter:brightness(1.04)}}
@media (max-width:430px){.joker{min-height:36px;padding:0 10px 0 8px;font-size:12px}.joker svg{width:18px;height:18px}}
body.kbd .jokers{display:none}
.jokertip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:14px;background:#FFF3C4;
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);text-align:center}
.jokertip[hidden]{display:none}
.jokertip b{font-family:var(--mono);font-size:18px;letter-spacing:.06em}
.jokertip span{font-size:13px;color:var(--ink-2)}
.jokerflash{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  color:#fff;filter:drop-shadow(0 3px 0 var(--ink))}
.jokerflash svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jokerflash.jk-shield{color:#FF7AA8}.jokerflash.jk-slow{color:#7CE8A4}.jokerflash.jk-tip{color:#FFD84D}.jokerflash.jk-swap{color:#7CC4FF}
body.motion .jokerflash{animation:jkFlash .9s cubic-bezier(.23,1,.32,1) forwards}
@keyframes jkFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
body:not(.motion) .jokerflash{display:none}

/* ── the die-cut sticker ─────────────────────────────────────────────── */
.stk2{width:88px;height:92px;transform:rotate(var(--tilt,0deg))}
.stk2 .stk-svg{display:block;width:100%;height:100%;overflow:visible}
.stk-svg text{font-family:inherit}
.stk-sheen{transform-box:view-box}
body.motion .stk-sheen{animation:stkSheen 3.6s ease-in-out infinite}
@keyframes stkSheen{0%,55%{transform:translateX(-10px) rotate(18deg)}100%{transform:translateX(150px) rotate(18deg)}}
@media (hover:hover) and (pointer:fine){
  .alb-slot.claimed{cursor:pointer}
  .alb-slot.claimed:hover .stk2{transform:rotate(calc(var(--tilt,0deg) * -1)) scale(1.06);transition:transform .25s cubic-bezier(.23,1,.32,1)}
}
.alb-slot.claimed:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.alb-slot.pinned::after{content:'';position:absolute;right:10px;top:10px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FF8A8A,#D6372C 60%);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.alb-joker{align-self:center;margin-top:2px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:#FFF3C4;border:1.5px solid var(--ink)}

/* ── pinboard and jokers, above the pages ────────────────────────────── */
.alb-board{display:grid;grid-template-columns:1fr;gap:14px;padding:16px;background:#FFFBEF;border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--lift);
  background-image:radial-gradient(circle at 1px 1px,rgba(29,25,52,.07) 1.2px,transparent 1.6px);background-size:16px 16px}
.alb-board[hidden]{display:none}
@media (min-width:760px){.alb-board{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);padding:20px 22px}}
.alb-bt{margin:0;font-size:19px;font-weight:800}
.alb-bb{margin:4px 0 12px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.alb-pinrow{display:flex;gap:12px}
.alb-pin{position:relative;flex:0 0 auto;width:78px;height:82px;display:grid;place-items:center;border-radius:18px;
  border:2.5px dashed var(--line-2);background:rgba(255,255,255,.6)}
.alb-pin.on{border:0;background:none}
.alb-pin.on .stk-svg{width:78px;height:82px}
.alb-pin.on::before{content:'';position:absolute;left:50%;top:-4px;z-index:2;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FF8A8A,#D6372C 60%);border:2px solid var(--ink)}
.alb-pin-free{font-size:12px;font-weight:700;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.alb-pin.on:hover{transform:rotate(-4deg) scale(1.05);transition:transform .2s cubic-bezier(.23,1,.32,1)}}
.alb-joklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:520px){.alb-joklist{grid-template-columns:1fr 1fr}}
.alb-jok{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#fff;border:1.5px solid var(--line-2)}
.alb-jok-art{flex:0 0 auto;width:40px;height:42px}
.alb-jok-art .stk-svg{width:40px;height:42px}
.alb-jok:not(.have) .alb-jok-art{filter:grayscale(1);opacity:.45}
.alb-jok-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.alb-jok-tx b{font-size:14px}
.alb-jok-tx span{font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.alb-jok.have{border-color:var(--ink);box-shadow:0 2px 0 var(--ink)}

/* ── a sticker up close ─────────────────────────────────────────────── */
.alb-sheetbg{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:16px;
  background:rgba(29,25,52,.45)}
@media (min-width:640px){.alb-sheetbg{align-items:center}}
.alb-sheet{width:min(100%,380px);display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 20px 18px;text-align:center;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:0 8px 0 var(--ink)}
.alb-sheet-art{width:150px;height:156px}
.alb-sheet-art .stk-svg{width:150px;height:156px}
.alb-sheet-nm{margin:6px 0 0;font-size:24px;font-weight:800;line-height:1.15}
.alb-sheet-goal{margin:0;font-size:15px;color:var(--ink-2)}
.alb-sheet-jok{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:10px 14px;border-radius:14px;background:#FFF3C4;border:1.5px solid var(--ink)}
.alb-sheet-jok span{font-size:13.5px;color:var(--ink-2)}
.alb-sheet-acts{display:flex;gap:8px;width:100%;margin-top:10px}
.alb-sheet-acts .btn{flex:1}

/* ══ the round report ════════════════════════════════════════════════════
   A sheet that comes up from the bottom of a phone, and a card in the
   middle of a wide screen: the score card on top, the numbers, then two
   columns (records on the left, progress on the right), then the words. */
html.rp-open,html.rp-open body{overflow:hidden}
.rp{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end;justify-content:center;background:rgba(29,25,52,.5)}
.rp-card{position:relative;width:100%;max-height:calc(var(--vh,100dvh) - 18px);overflow:auto;overscroll-behavior:contain;
  padding:0 0 calc(16px + env(safe-area-inset-bottom,0px));background:var(--table-hi,#E3EEFF);
  border:var(--bw) solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -6px 0 rgba(29,25,52,.18)}
@media (min-width:760px){
  .rp{align-items:center;padding:20px}
  .rp-card{width:min(880px,100%);max-height:min(92vh,980px);border-bottom:var(--bw) solid var(--ink);border-radius:28px;box-shadow:0 10px 0 var(--ink)}
}
.rp-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* the score card, printed like the lid of the box */
.rp-head{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:22px 20px 18px;text-align:center;
  background:var(--sun);border-bottom:var(--bw) solid var(--ink);border-radius:24px 24px 0 0;overflow:hidden;isolation:isolate}
.rp-head::before{content:"";position:absolute;inset:-60%;z-index:-1;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.55) 0deg 8deg,transparent 8deg 20deg)}
body.motion .rp-head::before{animation:rpRays 30s linear infinite}
@keyframes rpRays{to{transform:rotate(360deg)}}
.rp-head.won{background:linear-gradient(160deg,#FFE066,#FFB020)}
.rp-kicker{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rp-mode{padding:2px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;margin-top:4px}
.rp-score{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.rp-big{font-size:clamp(64px,19vw,96px);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:#fff;-webkit-text-stroke:.05em var(--ink);paint-order:stroke fill;text-shadow:0 .06em 0 var(--ink)}
.rp-unit{font-size:20px;font-weight:800}
.rp-sub{margin:2px 0 0;font-size:15px;font-weight:700}
.rp-x{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.rp-x svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.rp-x:active{transform:translateY(3px);box-shadow:none}

.rp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 14px 0}
.rp-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:var(--card);
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);text-align:center;min-width:0}
.rp-stat b{font-size:20px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-stat span{font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.2}

.rp-body{display:grid;grid-template-columns:1fr;gap:12px;padding:12px 14px 0}
@media (min-width:760px){.rp-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:14px 18px 0;gap:14px}.rp-stats{padding:16px 18px 0}}
.rp-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.rp-col:empty{display:none}
.rp-sec{padding:14px;border-radius:18px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);min-width:0}
.rp-h{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* records, stamped */
.rp-recs{background:#FFFBEF}
.rp-rec{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1.5px dashed var(--line-2)}
.rp-rec + .rp-rec{margin-top:8px}
.rp-rec-l{font-size:13px;font-weight:700;color:var(--ink-2);padding-right:74px}
.rp-rec-v{display:flex;align-items:baseline;gap:10px}
.rp-rec-v s{font-size:15px;color:var(--ink-3)}
.rp-rec-v b{font-size:24px;font-weight:800}
.rp-stamp{position:absolute;right:10px;top:50%;margin-top:-17px;padding:4px 8px;border:3px solid #D6372C;border-radius:6px;color:#D6372C;
  font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-14deg);opacity:0;
  background:rgba(255,255,255,.6)}
.rp-rec.in .rp-stamp{opacity:1}

/* the bars */
.rp-bar{position:relative;height:16px;border-radius:999px;background:var(--card-3,#E6EEFB);border:var(--bw) solid var(--ink);overflow:hidden}
.rp-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);border-radius:inherit}
.rp-bar .rp-fill{background:var(--blue);z-index:2}
.rp-bar .rp-gain{background:var(--sun);z-index:1}
.rp-bar .rp-shine{z-index:3;transform:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);background-size:40% 100%;
  background-repeat:no-repeat;background-position:-40% 0}
body.motion .rp-bar .rp-shine{animation:rpShine 2.4s ease-in-out 1.2s infinite}
@keyframes rpShine{to{background-position:140% 0}}
.rp-lvrow{display:flex;align-items:center;gap:12px}
.rp-token{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:800;
  background:var(--blue);color:#fff;border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.rp-xp.up .rp-token{background:var(--sun);color:var(--ink)}
.rp-lvmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rp-lvline{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rp-gainnum{font-size:20px;font-weight:800;color:var(--blue-tx,#1F55B8)}
.rp-lvnext{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.rp-xp.up .rp-lvnext{color:var(--green-tx,#14703A)}
.rp-rkrow{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.rp-rkname{font-size:20px;font-weight:800}
.rp-rkd{font-size:16px;font-weight:800;color:var(--green-tx,#14703A)}
.rp-rkd.down{color:var(--red-tx,#B42318)}
.rp-rknext{flex-basis:100%;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.rp-rkbar .rp-fill{background:linear-gradient(90deg,var(--blue),#7A3CFF)}

/* loot and the next goal */
.rp-lootrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rp-gem{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#EAF3FF;border:var(--bw) solid var(--ink);color:var(--gem-tx)}
.rp-gem svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.rp-gem b{font-size:17px;color:var(--ink)}
.rp-stk{width:60px;height:62px}
.rp-stk .stk-svg{width:60px;height:62px}
.rp-stktx{font-size:13px;font-weight:800}
.rp-nextrow{display:flex;align-items:center;gap:12px}
.rp-nextart{flex:0 0 auto;width:54px;height:56px;filter:grayscale(.35)}
.rp-nextart .stk-svg{width:54px;height:56px}
.rp-nextmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rp-nextmid b{font-size:16px}
.rp-nextmid span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.rp-nextbar{height:12px}
.rp-nextbar .rp-fill{background:var(--green)}

/* the words: a chip each, coloured by article, that reads itself out */
.rp-words{margin:12px 14px 0}
@media (min-width:760px){.rp-words{margin:14px 18px 0}}
.rp-note{margin:-4px 0 10px;font-size:13.5px;color:var(--ink-2)}
.rp-wlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rp-w{min-width:0}
.rp-wb{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border-radius:12px;text-align:left;
  background:var(--card);border:1.5px solid var(--line-2);transition:transform .12s var(--ease),border-color .15s ease}
.rp-w.nu .rp-wb{border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);background:var(--gd,#FFFBEF)}
.rp-wb:active{transform:translateY(2px)}
@media (hover:hover) and (pointer:fine){.rp-wb:hover{border-color:var(--ink)}}
.rp-wt{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;max-width:100%}
.rp-art{font-style:normal;font-size:11.5px;font-weight:800;padding:0 5px;border-radius:5px;background:var(--gb,var(--ink));color:var(--gi,#fff)}
.rp-wt b{font-size:16px;font-weight:800;overflow-wrap:anywhere}
.rp-wt em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.08em;padding:1px 5px;border-radius:4px;background:#D6372C;color:#fff}
.rp-wm{font-size:12.5px;color:var(--ink-2);line-height:1.3;overflow-wrap:anywhere}
.rp-empty{font-size:14px;color:var(--ink-2)}

.rp-guest{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 14px 0;padding:12px 14px;border-radius:16px;
  background:#FFF3C4;border:var(--bw) solid var(--ink);font-size:14px;font-weight:700}
.rp-acts{position:sticky;bottom:0;z-index:3;display:flex;gap:10px;padding:14px;margin-top:4px;
  background:linear-gradient(transparent,var(--table-hi,#E3EEFF) 30%)}
.rp-acts .btn{flex:1}
@media (min-width:760px){.rp-acts{justify-content:flex-end;padding:16px 18px 2px}.rp-acts .btn{flex:0 0 auto;min-width:160px}}
@media (prefers-reduced-motion:reduce){body.motion .rp-head::before{animation:none}}

/* ── pins beside a name ─────────────────────────────────────────────── */
.pins{display:inline-flex;align-items:center;gap:1px;margin-left:5px;vertical-align:middle}
.pin{display:inline-block;width:22px;height:23px;font-style:normal}
.pin .stk-svg{width:22px;height:23px;display:block}
.pin:nth-child(odd){rotate:-6deg}.pin:nth-child(even){rotate:5deg}
.seat .pins{margin:2px 0 0}
.seat .pin{width:18px;height:19px}.seat .pin .stk-svg{width:18px;height:19px}
#pfName .pins{margin-left:8px}
#pfName .pin{width:30px;height:31px}#pfName .pin .stk-svg{width:30px;height:31px}

/* ── a sticker slapped on the table ─────────────────────────────────── */
.slapbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phead .slapbtn{margin-left:auto}
.slaptray{position:fixed;z-index:70;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--card);
  border:var(--bw) solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink)}
.slaptray-t{font-size:15px}
.slaptray-none{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.slaptray-row{display:flex;gap:10px;justify-content:center}
.slaptray-stk{width:70px;height:72px;border-radius:14px;transition:transform .15s cubic-bezier(.23,1,.32,1)}
.slaptray-stk .stk-svg{width:70px;height:72px}
.slaptray-stk:active{transform:scale(.9)}
@media (hover:hover) and (pointer:fine){.slaptray-stk:hover{transform:rotate(-6deg) scale(1.08)}}
.slaplayer{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}
.slap{position:absolute;width:104px;height:108px;transform:translate(-50%,-50%) rotate(var(--rot,0deg))}
.slap .stk-svg{width:104px;height:108px;display:block;filter:drop-shadow(0 6px 4px rgba(29,25,52,.25))}
.slap-who{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:2px;padding:1px 8px;border-radius:999px;white-space:nowrap;
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:800}
.slap-dust{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--ink)}
@media (max-width:560px){.slap{width:82px;height:86px}.slap .stk-svg{width:82px;height:86px}}

/* ── 12-people.css ── */
/* ══ People: the ladder, the player card, the match history ════════════
   The ladder is a podium of real steps and a list of playing pieces, each
   in the colours of the bomb its owner wears; a player card opens from any
   name; your own games are a row of tickets. Same printed-card language as
   the rest of the box: ink outline, cardboard thickness, pawn colours. */

/* ── the podium ───────────────────────────────────────────────────────── */
.lbtop-row{padding:22px 12px 0;gap:clamp(6px,2.4vw,20px);align-items:flex-end}
.lbc{gap:5px;cursor:pointer;flex:0 1 clamp(96px,30vw,168px);border-radius:14px;outline:none}
.lbc:focus-visible .face{outline:3px solid var(--blue);outline-offset:3px}
.lbc.one{transform:none}
.lbc .face{background:linear-gradient(135deg,var(--fa,#FF9061),var(--fb,#FF5C2B));color:#fff;
  text-shadow:0 1px 0 rgba(29,25,52,.35)}
.lbc.one .face,.lbc.two .face,.lbc.three .face{background:linear-gradient(135deg,var(--fa,#FF9061),var(--fb,#FF5C2B));color:#fff}
.lbc .nm{margin-top:6px;max-width:100%;font-size:clamp(13.5px,3.6vw,16px)}
.lbc .nm .pnx{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lbc .pp .pins{display:inline-flex;gap:2px}
.lbc .pp .pin{width:20px;height:20px}
.lbc .pts{font-size:clamp(14px,4vw,18px)}
.lbc .step{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;width:100%;margin-top:4px;
  border:var(--bw) solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;padding-top:6px;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -8px 0 rgba(29,25,52,.08)}
.lbc .step b{font-family:var(--mono);font-size:clamp(26px,7vw,36px);font-weight:800;line-height:1;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.6)}
.lbc.one .step{height:clamp(84px,22vw,104px);background:linear-gradient(180deg,#FFE58A,var(--sun) 55%,var(--sun-lo))}
.lbc.two .step{height:clamp(62px,16vw,78px);background:linear-gradient(180deg,#F4F7FC,#C9D3E3 60%,#A9B6CC)}
.lbc.three .step{height:clamp(48px,12vw,60px);background:linear-gradient(180deg,#FFD7B0,#E0A06A 60%,#B9733C)}
.lbc .step .mv{position:static;margin:0}
body.motion .lbc .step{transform-origin:50% 100%;animation:lbStep .55s cubic-bezier(.18,1.2,.34,1) both}
body.motion .lbc.two .step{animation-delay:.08s}body.motion .lbc.three .step{animation-delay:.16s}body.motion .lbc.one .step{animation-delay:.24s}
@keyframes lbStep{from{transform:scaleY(.2)}}
@keyframes lbRiseOne{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}

/* ── the rest of the ladder ───────────────────────────────────────────── */
.board li{display:grid;grid-template-columns:28px 38px 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 14px;cursor:pointer;
  transition:background-color .15s ease}
@media (hover:hover) and (pointer:fine){.board li[data-profile]:hover{background:var(--card-2)}}
.board li:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.board li.empty{display:block;cursor:default}
.board .pl{flex:none;font-size:15px;text-align:right;color:var(--ink)}
.board li .pic,.board li:nth-child(n) .pic{background:linear-gradient(135deg,var(--fa,#6E98FF),var(--fb,#2F6BF0));color:#fff;width:40px;height:40px;
  text-shadow:0 1px 0 rgba(29,25,52,.35)}
.board .who b{display:flex;align-items:center;gap:6px;min-width:0}
.board .who b .pnx,.board .who b > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.board .who b .pn{font-family:inherit;font-size:inherit;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.board .who .pins{flex:none;display:inline-flex;gap:2px}
.board .who .pin{width:18px;height:18px}
.board .rk em{font-size:12px}
.board li.q{box-shadow:inset 4px 0 0 var(--sun)}

/* up, down, new: since yesterday */
.mv{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:20px;padding:0 5px;border-radius:999px;
  font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.mv.up{color:var(--green-tx);background:var(--green-soft)}
.mv.down{color:var(--red-tx);background:var(--red-soft)}
.mv.nu{color:var(--blue-tx);background:var(--blue-soft)}
.mv.same{color:var(--ink-3)}
.lbc .step .mv{background:rgba(255,255,255,.7);border:1.5px solid rgba(29,25,52,.25)}

/* the rank as a coloured chip, one colour per CEFR band */
.rkchip{font-style:normal;display:inline-block;padding:2px 8px;border-radius:7px;border:1.5px solid var(--ink);font-size:13px;font-weight:800;
  background:var(--card-3);color:var(--ink);box-shadow:0 2px 0 var(--ink)}
.rkchip[data-tier="A1"]{background:#D9F4E4}.rkchip[data-tier="A2"]{background:#CFF3F0}
.rkchip[data-tier="B1"]{background:#DEE8FF}.rkchip[data-tier="B2"]{background:#EADFFF}
.rkchip[data-tier="C1"]{background:#FFE6C7}.rkchip[data-tier="C2"]{background:#FFD8E4}

/* the event's line: where the finalists end */
.board li.lbcut{display:flex;align-items:center;gap:10px;cursor:default;padding:9px 14px;border-top:2px dashed var(--sun-lo);border-bottom:2px dashed var(--sun-lo);
  background:repeating-linear-gradient(-45deg,var(--sun-soft) 0 10px,#FFF9E3 10px 20px);font-size:13px;font-weight:800;color:#7A5600}
.board li.lbcut svg{flex:none;width:20px;height:20px;fill:none;stroke:#7A5600;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.board li.lbcut + li{border-top:0}

/* you, pinned above the dock while the ladder scrolls */
#myRankBox{position:sticky;bottom:calc(var(--dockh) + 10px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:0 5px 0 var(--ink),0 12px 28px rgba(29,25,52,.18)}
.myrank .mr-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myrank .mr-name b .pn{font-family:inherit;font-size:inherit;display:inline}
.mrgoal{padding:0 16px 14px}
.mrgoal p{margin:0 0 7px;font-size:13px;font-weight:700;color:var(--ink-2)}
.mrbar:has(i[style*="scaleX(0)"]){display:none}
.mrbar{height:10px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;overflow:hidden}
.mrbar i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--red));transform-origin:0 50%;transform:scaleX(.04);
  transition:transform .6s cubic-bezier(0.23,1,0.32,1)}

/* anything that opens a player card */
[data-profile]{cursor:pointer}
.plist li[data-profile]:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}

/* ── the player card ──────────────────────────────────────────────────── */
.wk-layer{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(29,25,52,.45);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pv-card{position:relative;outline:none;width:100%;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;background:var(--card);
  border:var(--bw) solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -6px 30px rgba(29,25,52,.25);
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){
  .wk-layer{align-items:center;padding:24px}
  .pv-card{max-width:560px;border-bottom:var(--bw) solid var(--ink);border-radius:22px;box-shadow:0 7px 0 var(--ink),0 24px 60px rgba(29,25,52,.3);max-height:calc(100dvh - 48px)}
}
.pv-load{height:340px;background:linear-gradient(90deg,var(--card-2),var(--card-3),var(--card-2));background-size:200% 100%;animation:pvLoad 1.1s linear infinite}
@keyframes pvLoad{to{background-position:-200% 0}}
.pv-missing{padding:60px 24px;text-align:center;font-weight:700;color:var(--ink-2)}
.pv-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff;
  box-shadow:0 2px 0 var(--ink);display:grid;place-items:center;cursor:pointer}
.pv-x svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.pv-x:active{transform:translateY(2px);box-shadow:none}
.pv-head{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 18px 16px;text-align:center}
.pv-band{align-self:stretch;height:74px;margin:0 -18px -44px;border-bottom:var(--bw) solid var(--ink);
  background:linear-gradient(135deg,var(--pa),var(--pb));
  -webkit-mask:none;position:relative;overflow:hidden}
.pv-band::after{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 120%,rgba(255,255,255,.18) 0 9deg,transparent 9deg 20deg)}
.pv-face{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);
  background:linear-gradient(135deg,var(--pa),var(--pb));color:#fff;font-size:28px;font-weight:800;box-shadow:0 4px 0 var(--ink);overflow:visible}
.pv-face .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.pv-lv{position:absolute;right:-6px;bottom:-4px;min-width:30px;height:30px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--sun);color:var(--ink);border:var(--bw) solid var(--ink);font-size:14px;font-weight:800}
.pv-name{margin:8px 0 0;font-size:24px;font-weight:800;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pv-handle{margin:0;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.pv-pins .pins{display:inline-flex;gap:4px}
.pv-pins .pin{width:30px;height:30px}
.pv-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.pv-chip{display:flex;flex-direction:column;align-items:center;min-width:78px;padding:6px 10px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--card-2);box-shadow:0 2px 0 var(--ink)}
.pv-chip b{font-size:17px;font-weight:800}
.pv-chip em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pv-body{padding:0 18px}
.pv-stats{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--bw) solid var(--ink);border-radius:14px;overflow:hidden}
.pv-stats li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-right:1.5px dashed var(--line-2);border-bottom:1.5px dashed var(--line-2)}
.pv-stats li:nth-child(3n){border-right:0}.pv-stats li:nth-child(n+4){border-bottom:0}
.pv-stats b{font-size:19px;font-weight:800}
.pv-stats span{font-size:11.5px;font-weight:700;color:var(--ink-2);text-align:center}
.pv-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:18px 0 8px;font-size:15px;font-weight:800}
.pv-hsub{font-size:12px;font-weight:700;color:var(--ink-2)}
.pv-none{margin:0;font-size:13.5px;color:var(--ink-3)}
/* the last ten games: one even row across the card, newest first */
.pv-form{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.pv-tok{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:54px;padding:0 2px;border-radius:12px;
  border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink);background:var(--card-2)}
.pv-tok b{font-size:17px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pv-tok em{font-style:normal;font-size:10px;font-weight:700;line-height:1;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
.pv-tok.k-won{background:var(--sun)}
.pv-tok.k-won em{font-size:11px;font-weight:800;color:#6B4A00}
.pv-cup{display:block;width:20px;height:20px}
.pv-cup svg{display:block;width:100%;height:100%;fill:var(--ink)}
.pv-tok.k-mp{background:var(--blue-soft)}
.pv-tok.k-mp b{color:var(--blue-lo)}
.pv-tok.k-solo{background:var(--green-soft)}
.pv-tok.k-solo b{color:var(--green-lo)}
.pv-formkey{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:10px 0 0;font-size:12px;font-weight:700;color:var(--ink-2)}
.pv-key{display:inline-flex;align-items:center;gap:6px}
.pv-key i{width:12px;height:12px;border-radius:4px;border:1.5px solid var(--ink)}
.pv-key i.k-won{background:var(--sun)}.pv-key i.k-mp{background:var(--blue-soft)}.pv-key i.k-solo{background:var(--green-soft)}
.pv-newest{margin-left:auto;color:var(--ink-3);font-weight:600}
/* a phone: two rows of five, larger tiles */
@media (max-width:480px){
  .pv-form{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .pv-tok{height:56px}
  .pv-tok b{font-size:18px}
  .pv-newest{margin-left:0;flex-basis:100%}
  .pv-formh{flex-wrap:wrap;row-gap:2px}
  .pv-formh .pv-hsub{flex-basis:100%}
}
.pv-recs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.pv-recs li{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;background:var(--card-2);border:1.5px solid var(--line-2)}
.pv-recs li.pv-none{grid-column:1/-1;border:0;background:none;padding:0}
.pv-rk{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.pv-recs b{font-size:15px;font-weight:800}
.pv-rarbar{display:flex;height:12px;border-radius:999px;overflow:hidden;border:1.5px solid var(--ink);margin-bottom:6px}
.pv-rarbar i{display:block;height:100%;min-width:6px}
.r-l i,.pv-rarbar .r-l{background:linear-gradient(90deg,#FFD84D,#FF9A3C)}
.r-e i,.pv-rarbar .r-e{background:#A06BFF}
.r-r i,.pv-rarbar .r-r{background:#3E8FFF}
.r-c i,.pv-rarbar .r-c{background:#9DB0C8}
.pv-rarleg{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.pv-rarleg span{display:inline-flex;align-items:center;gap:5px}
.pv-rarleg i{width:10px;height:10px;border-radius:3px;border:1px solid var(--ink)}
.pv-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:12px;border-radius:14px;
  background:radial-gradient(circle at 1px 1px,rgba(29,25,52,.12) 1px,transparent 1.5px) 0 0/12px 12px,#F6F0E4;border:var(--bw) solid var(--ink)}
.pv-shelf .pv-none{grid-column:1/-1}
.pv-stk{display:block;aspect-ratio:1;transform:rotate(var(--tilt,0deg));filter:drop-shadow(0 2px 1px rgba(29,25,52,.25))}
.pv-stk svg{width:100%;height:100%;display:block}
@media (max-width:420px){.pv-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pv-foot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px}
.pv-since{margin:0;font-size:12.5px;color:var(--ink-3)}
.pv-act{width:100%}
@media (prefers-reduced-motion:reduce){.pv-load{animation:none}}

/* ── match history ────────────────────────────────────────────────────── */
.hist .hist-head{display:block}
.hist-sub{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.hist-seg{display:flex;gap:6px;padding:12px 16px 0}
.hist-segb{flex:1;min-height:38px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;font:inherit;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer}
.hist-segb[aria-pressed="true"]{background:var(--ink);color:#fff}
.hist-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;padding:12px 16px 0}
.hs{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line-2)}
.hs b{font-size:18px;font-weight:800}
.hs span{font-size:11px;font-weight:700;color:var(--ink-2);text-align:center}
.hist-chart{display:flex;align-items:flex-end;gap:3px;height:56px;margin:12px 16px 0;padding:6px 8px 0;border-bottom:2px solid var(--ink)}
.hist-chart i{flex:1;min-width:0;border-radius:4px 4px 0 0;background:var(--green-hi);transform-origin:50% 100%}
.hist-chart i.k-mp{background:var(--blue-hi)}
.hist-chart i.k-won{background:var(--sun)}
.hist-list{list-style:none;margin:0;padding:12px 16px 16px;display:grid;gap:10px}
@media (min-width:900px){.hist-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hist-empty{padding:18px;text-align:center;font-size:14px;color:var(--ink-2);border:1.5px dashed var(--line-2);border-radius:14px}

/* a ticket: a stub, a tear line, the body */
.tk{--tc:var(--green);--tsoft:var(--green-soft);display:flex;flex-direction:column;border-radius:14px;border:var(--bw) solid var(--ink);background:#fff;box-shadow:0 3px 0 var(--ink);overflow:hidden}
.tk.tk-mp{--tc:var(--blue);--tsoft:var(--blue-soft)}
.tk.tk-won{--tc:var(--sun-lo);--tsoft:var(--sun-soft)}
.tk-main{flex:1;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:stretch;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tk-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 4px;background:var(--tsoft);
  border-right:2px dashed rgba(29,25,52,.3)}
.tk-stub::before,.tk-stub::after{content:'';position:absolute;right:-8px;width:14px;height:14px;border-radius:50%;background:var(--card-2);border:var(--bw) solid var(--ink)}
.tk-stub::before{top:-9px}.tk-stub::after{bottom:-9px}
.tk-place{font-size:24px;font-weight:800;line-height:1}
.tk.tk-won .tk-place{color:#7A5600}
.tk-ico svg{width:26px;height:26px;fill:none;stroke:var(--tc);stroke-width:2;stroke-linecap:round}
.tk-stub em{font-style:normal;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);text-align:center}
.tk-mid{display:flex;flex-direction:column;gap:4px;padding:10px 10px 10px 14px;min-width:0}
.tk-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tk-words{font-size:24px;font-weight:800;line-height:1}
.tk-wl{font-size:13px;font-weight:700;color:var(--ink-2)}
.tk-kind{margin-left:auto;display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--tc)}
.tk.tk-won .tk-kind{color:#7A5600}
.tk-ranked{padding:1px 6px;border-radius:6px;background:var(--ink);color:#fff;font-size:10px}
.tk-line{display:flex;flex-wrap:wrap;align-items:center;font-size:12.5px;font-weight:700;color:var(--ink-2);min-width:0}
.tk-line span + span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45;margin:0 7px;vertical-align:middle}
.tk-long{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tk-chips{display:flex;gap:5px;flex-wrap:wrap}
.tk-chip{padding:2px 7px;border-radius:999px;font-family:var(--mono);font-size:11.5px;font-weight:800;border:1.5px solid rgba(29,25,52,.2);background:var(--card-2)}
.tk-chip.xp{background:#EADFFF}.tk-chip.gem{background:var(--blue-soft);color:var(--gem-tx)}
.tk-chip.gem::after{content:' \2666'}
.tk-chip.up{background:var(--green-soft);color:var(--green-tx)}.tk-chip.down{background:var(--red-soft);color:var(--red-tx)}
.tk-chip.nu{background:var(--sun-soft);color:#7A5600}
.tk-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:6px;padding:10px 12px 10px 4px}
.tk-ago{font-size:11.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.tk-stamp{display:inline-block;padding:2px 7px;border:2px solid var(--red);border-radius:6px;color:var(--red);font-size:10.5px;font-weight:900;
  text-transform:uppercase;letter-spacing:.08em;transform:rotate(-8deg)}
.tk.open .tk-main{border-bottom:1.5px dashed var(--line-2)}
.tk-more{padding:12px 14px 14px;display:grid;gap:10px}
.tk-words-list{display:flex;flex-wrap:wrap;gap:5px}
.tk-w{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;background:var(--card-2);border:1.5px solid var(--line-2);font-size:13px;font-weight:700}
.tk-w i{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;padding:0 4px;border-radius:4px;background:var(--ink-3)}
.tk-w.art-der i{background:var(--blue)}.tk-w.art-die i{background:var(--red)}.tk-w.art-das i{background:var(--green)}
.tk-w.nu{border-color:var(--sun-lo);background:var(--sun-soft)}
.tk-w sup{font-size:9px;font-weight:900;color:#7A5600}
.tk-recs{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px;font-weight:700}
.tk-recs li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tk-recs .tk-stamp{transform:none}
.tk-recs s{color:var(--ink-3)}
.tk-h{margin:0;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.tk-table{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.tk-table li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:4px 8px;border-radius:8px;font-size:13px;font-weight:700}
.tk-table li.me{background:var(--sun-soft)}
.tk-table span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-table em{font-style:normal;font-size:12px;color:var(--ink-2)}
.tk-stks{display:flex;gap:6px}
.tk-stk{width:40px;height:40px}
.tk-stk svg{width:100%;height:100%}
@media (max-width:380px){.tk-main{grid-template-columns:56px minmax(0,1fr) auto}.tk-words{font-size:21px}}

/* ── 13-event.css ── */
/* ══ The event: a tournament poster on the home page ═══════════════════
   An ink card with a gold trophy, the prize on a ribbon, a flip-clock to the
   end of qualification, the faces who would go through, and your own line.
   The page behind it is the screen #event, drawn below. */

.evp{position:relative;margin:0 auto 18px;width:100%;max-width:560px;padding:16px 16px 14px;border-radius:20px;border:var(--bw) solid var(--ink);
  color:#fff;background:
    radial-gradient(120% 90% at 100% 0%,rgba(255,203,46,.28),transparent 55%),
    radial-gradient(90% 80% at 0% 100%,rgba(47,107,240,.35),transparent 60%),
    #1D1934;
  box-shadow:0 5px 0 var(--ink),0 18px 40px rgba(29,25,52,.25);overflow:hidden}
.evp::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 1.5px) 0 0/14px 14px}
.evp > *{position:relative}
.evp.st-draft{outline:3px dashed var(--sun);outline-offset:3px}
.evp-top{display:flex;align-items:center;gap:12px}
.evp-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(160deg,#FFE58A,var(--sun) 55%,var(--sun-lo));
  border:var(--bw) solid #0E0B1F;box-shadow:0 3px 0 #0E0B1F}
.evp-ico svg{width:26px;height:26px;fill:none;stroke:#3A2800;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.evp-tt{min-width:0}
.evp-kick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.evp-st{font-style:normal;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;letter-spacing:.06em}
.st-live .evp-st::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#4CCB85;box-shadow:0 0 8px #4CCB85;vertical-align:1px}
body.motion .st-live .evp-st::before{animation:evpBlink 1.6s ease-in-out infinite}
@keyframes evpBlink{50%{opacity:.35}}
.evp-name{margin:2px 0 0;font-size:clamp(20px,5.6vw,26px);font-weight:900;line-height:1.1;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.evp-prize{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,var(--sun),#FFE07A);
  color:#2B1E00;border:var(--bw) solid #0E0B1F;box-shadow:0 3px 0 #0E0B1F}
.evp-pl{flex:none;font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.evp-prize b{font-size:15.5px;font-weight:900;overflow-wrap:anywhere}
.evp-mid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px}
@media (min-width:520px){.evp-mid{grid-template-columns:auto minmax(0,1fr);align-items:center}}
.evp-clock{display:flex;flex-direction:column;gap:6px}
.evp-cl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#C9C4F0}
.evp-digits{display:flex;gap:6px}
.evp-dg{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:6px 6px 4px;border-radius:10px;background:#0E0B1F;border:1.5px solid rgba(255,255,255,.18);
  box-shadow:inset 0 -12px 0 rgba(255,255,255,.04)}
.evp-dg b{font-size:24px;font-weight:800;line-height:1;color:#fff}
.evp-dg em{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;color:#9E98C8;margin-top:2px}
.evp-qs{display:flex;flex-direction:column;gap:6px;min-width:0}
.evp-faces{display:flex;flex-wrap:wrap;gap:5px 0;padding:3px 3px 3px 8px;min-width:0;isolation:isolate}
.evp-face{position:relative;flex:none;width:38px;height:38px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;overflow:visible;
  background:linear-gradient(135deg,#6E98FF,#2F6BF0);color:#fff;font-size:13px;font-weight:800;border:2px solid #0E0B1F;box-shadow:0 0 0 2px #1D1934}
.evp-face .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.evp-face.big{width:58px;height:58px;margin:0;font-size:20px;box-shadow:0 0 0 3px var(--sun)}
.evp-face.sm{width:30px;height:30px;margin:0;font-size:11px;box-shadow:none;border-width:1.5px}
.evp-x2{position:absolute;right:-6px;top:-6px;padding:0 4px;border-radius:6px;background:var(--sun);color:#2B1E00;font-style:normal;font-size:9.5px;font-weight:900;border:1.5px solid #0E0B1F}
.evp-qn{font-size:12.5px;font-weight:700;color:#C9C4F0}
.evp-winner{display:flex;align-items:center;gap:12px}
.evp-wn{display:flex;flex-direction:column;min-width:0}
.evp-wn b{font-size:20px;font-weight:900}
.evp-you{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.16)}
.evp-you.in{background:rgba(76,203,133,.16);border-color:rgba(76,203,133,.6)}
.evp-yh{display:block;font-size:14px;font-weight:900;margin-bottom:6px}
.evp-you.in .evp-yh{color:#8FF0BC}
.evp-yrows{display:flex;flex-wrap:wrap;gap:6px}
.evp-yr{display:inline-flex;align-items:baseline;gap:6px;padding:4px 9px;border-radius:999px;background:#0E0B1F;font-size:12.5px}
.evp-yr em{font-style:normal;font-weight:800;color:#9E98C8}
.evp-yr b{font-weight:800}
.evp-yr i{font-style:normal;color:#FFD37A;font-weight:700}
.evp-yr.ok b{color:#8FF0BC}
.evp-guest{margin:0;font-size:13px;color:#C9C4F0}
.evp-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;min-height:44px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:900;color:#1D1934;background:#fff;border:var(--bw) solid #0E0B1F;box-shadow:0 3px 0 #0E0B1F}
.evp-more:active{transform:translateY(3px);box-shadow:none}
@media (prefers-reduced-motion:reduce){body.motion .st-live .evp-st::before{animation:none}}
/* On the wide home grid the poster is a banner across both columns, above
   everything: name and prize, then the clock and the faces, then the way in. */
@media (min-width:960px){
  .home:has(> #eventBox:not([hidden])){grid-template-rows:auto auto auto auto auto 1fr auto;
    grid-template-areas:"event event" "hero play" "hero invite" "hero album" "hero funk" "hero voice" "credits credits"}
  .home > #eventBox{grid-area:event;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;column-gap:24px;align-items:center;padding:18px 20px}
  .home > #eventBox[hidden]{display:none}
  #eventBox .evp-top{grid-column:1;grid-row:1}
  #eventBox .evp-prize{grid-column:1;grid-row:2;justify-self:start}
  #eventBox .evp-mid{grid-column:2;grid-row:1/3;margin:0;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
  #eventBox .evp-you{grid-column:1/3;grid-row:3}
  #eventBox .evp-more{grid-column:3;grid-row:1/3;width:auto;margin:0;padding:0 22px}
}

/* ── the event page ──────────────────────────────────────────────────
   The poster grown into a page: an ink hero with a big flip-clock, then
   white cards on the table. Your road is a bar to the final line; the
   timeline is a board-game track of tokens; the final is the blue game
   table emptying to a crown; the ladders are score cards with the final
   line drawn under the last qualifying place. */
#event{width:100%;max-width:1080px;margin:0 auto;padding:10px var(--gut) 56px;box-sizing:border-box}
.evx-back{border:0;background:none;font:inherit;cursor:pointer;margin:0 0 8px -4px}
.evx-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:26px 18px 22px;border-radius:var(--r-lg);border:var(--bw) solid var(--ink);color:#fff;
  background:
    radial-gradient(70% 90% at 100% 0%,rgba(255,203,46,.32),transparent 60%),
    radial-gradient(70% 90% at 0% 100%,rgba(47,107,240,.42),transparent 62%),
    #1D1934;
  box-shadow:0 5px 0 var(--ink),0 22px 44px rgba(29,25,52,.25)}
.evx-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.13) 1px,transparent 1.5px) 0 0/14px 14px}
.evx-hero > *{position:relative}
.evx-hero.st-draft{outline:3px dashed var(--sun);outline-offset:4px}
.evx-cup{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(160deg,#FFE58A,var(--sun) 55%,var(--sun-lo));
  border:var(--bw) solid #0E0B1F;box-shadow:0 4px 0 #0E0B1F;transform:rotate(-4deg)}
.evx-cup svg{width:38px;height:38px;fill:none;stroke:#3A2800;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.evx-hero .evp-kick{justify-content:center}
.evx-name{margin:0;max-width:18ch;font-size:clamp(30px,7.4vw,52px);font-weight:900;line-height:1.02;letter-spacing:-.03em;overflow-wrap:anywhere;text-wrap:balance;color:#fff;text-shadow:0 3px 0 #0E0B1F}
.evx-prize{margin:4px 0 0;max-width:520px;transform:rotate(-1deg)}
.evx-prize b{font-size:17px}
.evx-clock{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.evp-digits.big{gap:8px}
.evp-digits.big .evp-dg{min-width:66px;padding:10px 8px 6px;border-radius:14px}
.evp-digits.big .evp-dg b{font-size:34px}
@media (max-width:400px){.evp-digits.big{gap:5px}.evp-digits.big .evp-dg{min-width:56px}.evp-digits.big .evp-dg b{font-size:27px}}
.evx-winner{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;cursor:pointer}
.evx-crown svg{width:34px;height:34px;fill:var(--sun);stroke:#0E0B1F;stroke-width:1.5;stroke-linejoin:round}
.evx-winner .evp-face.big{width:84px;height:84px;font-size:28px}
.evx-wname{font-size:26px;font-weight:900}
.evx-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.evx-acts .btn{min-width:150px}
.evx-share{color:var(--ink)}

.evx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px}
@media (min-width:900px){.evx-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.evx-competition{margin-top:24px}
.evx-info{margin-top:24px}
.evx-col{display:grid;gap:16px;min-width:0}
.evx-sec{padding:16px;border-radius:var(--r);border:var(--bw) solid var(--ink);background:var(--card);box-shadow:var(--lift-sm);min-width:0}
.evx-h{margin:0 0 4px;font-size:19px;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.evx-sub{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}

/* your road */
.evx-guest{margin:6px 0 12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.evx-stamp{display:inline-block;margin:6px 0 12px;padding:5px 12px;border-radius:10px;font-size:14px;font-weight:900;border:var(--bw) solid var(--ink);transform:rotate(-1.5deg)}
.evx-stamp.in{background:var(--green-soft);color:var(--green-tx)}
.evx-stamp.out{background:var(--sun-soft);color:#7A5600}
.evx-road + .evx-road{margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--line)}
.evx-roadh{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.evx-roadh b{font-weight:900}
.evx-roadh span{font-weight:800;color:var(--ink-2)}
.evx-bar{position:relative;height:14px;margin:8px 0 6px;border-radius:999px;background:var(--card-3);border:1.5px solid var(--line-2);overflow:hidden}
.evx-bar i{position:absolute;inset:0;transform-origin:0 50%;border-radius:999px;background:linear-gradient(90deg,var(--blue-hi),var(--blue))}
.evx-road.ok .evx-bar i{background:linear-gradient(90deg,var(--green-hi),var(--green))}
.evx-bar::after{content:'';position:absolute;right:3px;top:-1px;bottom:-1px;width:3px;background:repeating-linear-gradient(180deg,var(--ink) 0 3px,transparent 3px 5px)}
.evx-gap{margin:0;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.evx-road.ok .evx-gap{color:var(--green-tx)}

/* the track */
.evx-steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;position:relative}
.evx-steps li{position:relative;display:flex;align-items:center;gap:12px;padding:8px 0}
.evx-steps li + li::before{content:'';position:absolute;left:19px;top:-14px;height:28px;width:0;border-left:3px dotted var(--line-2)}
.evx-tok{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:900;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);z-index:1}
.evx-tok svg{width:20px;height:20px;fill:var(--sun);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.evx-steps li.now .evx-tok{background:var(--sun)}
.evx-steps li.done .evx-tok{background:var(--green-soft);color:var(--green-tx)}
.evx-stx{display:flex;flex-direction:column;min-width:0}
.evx-stx strong{font-size:15px;font-weight:900}
.evx-stx em{font-style:normal;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.evx-steps li.now .evx-stx strong::after{content:'';display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--green-hi);vertical-align:2px}

/* the final table */
.evx-table{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;padding:16px 12px 14px;border-radius:28px;
  background:radial-gradient(80% 70% at 50% 40%,var(--table-hi),var(--table) 70%,var(--table-lo));border:var(--bw) solid var(--ink);box-shadow:inset 0 -6px 0 rgba(29,25,52,.08)}
.evx-tl{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-tx)}
.evx-seats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:340px}
.evx-seats .evp-face.sm{width:34px;height:34px;box-shadow:0 2px 0 var(--ink);border-color:var(--ink)}
.evx-seat{width:30px;height:30px;border-radius:50%;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink)}
.evx-seats.fade .evx-seat{background:var(--card-2);border-style:dashed;box-shadow:none}
.evx-seat.win{width:46px;height:46px;display:grid;place-items:center;background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.evx-seat.win svg{width:26px;height:26px;fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.evx-arrow{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--ink-2);text-align:center}
.evx-last{margin:4px 0 0;font-size:14px;font-weight:900;color:var(--ink)}

/* the ladders */
.evx-boards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:600px){.evx-boards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.evx-board{border:var(--bw) solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card)}
.evx-board h3{margin:0;padding:9px 12px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--sun)}
.evx-board ol{list-style:none;margin:0;padding:4px 0 0}
.evx-board li{display:grid;grid-template-columns:24px 30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 12px;font-size:13.5px;font-weight:700;cursor:pointer}
.evx-board li + li{border-top:1.5px dashed var(--line)}
@media (hover:hover) and (pointer:fine){.evx-board li[data-profile]:hover{background:var(--card-2)}}
.evx-pl{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;background:var(--card-3)}
.evx-board li:nth-child(1) .evx-pl{background:var(--sun)}
.evx-board li:nth-child(2) .evx-pl{background:#E4E8F2}
.evx-board li:nth-child(3) .evx-pl{background:#F2D2B0}
.evx-board .evp-face.sm{border-color:var(--ink)}
.evx-board .evp-x2{right:-7px;top:-7px;font-size:8.5px}
.evx-legend{margin:10px 0 0;font-size:12.5px;color:var(--ink-2)}
.evx-legend b{display:inline-block;padding:0 4px;margin-right:4px;border-radius:5px;background:var(--sun);color:#2B1E00;font-size:10px;border:1.5px solid var(--ink)}
.evx-board li.evx-none{display:block;padding:12px;color:var(--ink-3);font-weight:600;cursor:default}
.evx-nm{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.evx-nm > :first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.evx-board em{font-style:normal;font-size:12px;color:var(--ink-2);white-space:nowrap}
.evx-cut{display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px 8px;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--red-tx)}
.evx-cut::before,.evx-cut::after{content:'';flex:1;border-top:2px dashed var(--red)}

/* rules and questions */
.evx-rl{margin:8px 0 0;padding:0;list-style:none;counter-reset:r;display:grid;gap:10px}
.evx-rl li{counter-increment:r;position:relative;padding-left:38px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.evx-rl li::before{content:counter(r);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:13px;font-weight:900;background:var(--sun-soft);border:1.5px solid var(--sun-lo)}
.evx-note{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--blue-soft);border:1.5px solid rgba(47,107,240,.35)}
.evx-note b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-tx)}
.evx-note p{margin:4px 0 0;font-size:14px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.evx-qa{border-top:1.5px dashed var(--line)}
.evx-qa:first-of-type{border-top:0}
.evx-qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;cursor:pointer;font-size:15px;font-weight:800}
.evx-qa summary::-webkit-details-marker{display:none}
.evx-qa summary::after{content:'+';flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:900;background:var(--card-2);border:1.5px solid var(--line-2);transition:transform .2s cubic-bezier(0.23, 1, 0.32, 1)}
.evx-qa[open] summary::after{transform:rotate(45deg)}
.evx-qa p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.evx-qa summary::after{transition:none}}

/* ── the admin side: events and the team ── */
.adm-ev{display:grid;gap:12px}
.adm-evform{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.adm-evform{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-evform .wide{grid-column:1/-1}}
.adm-evform label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:var(--ink-2)}
.adm-evform input,.adm-evform textarea,.adm-evform select{font:inherit;font-size:15px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:10px;border:var(--bw) solid var(--ink);background:#fff;min-width:0}
.adm-evform textarea{min-height:84px;resize:vertical}
.adm-evboards{display:flex;gap:8px;flex-wrap:wrap}
.adm-evboards label{flex-direction:row;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;font-size:14px;color:var(--ink);cursor:pointer}
.adm-evboards input{width:18px;height:18px;padding:0}
.adm-evacts{display:flex;gap:8px;flex-wrap:wrap}
.adm-evlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.adm-evlist li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--card-2)}
.adm-evlist li b{flex:1;min-width:140px}
.adm-evst{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--card-3)}
.adm-evst.live{background:var(--green-soft);color:var(--green-tx)}.adm-evst.final{background:var(--sun-soft);color:#7A5600}
.adm-evst.ended{background:var(--blue-soft);color:var(--blue-tx)}.adm-evst.cancelled{background:var(--red-soft);color:var(--red-tx)}
.adm-team{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.adm-team li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line-2)}
.adm-team li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-role{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--sun-soft);color:#7A5600}
.adm-role.appointed{background:var(--blue-soft);color:var(--blue-tx)}
.adm-msg{margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
.adm-msg.bad{color:var(--red-tx)}
.adm-fig.warn{background:var(--red-soft);border-color:var(--red)}
.adm-fig.warn b{color:var(--red-tx)}

/* ── 14-wordbook.css ── */
/* ══ The vocabulary book and the picture picker ═══════════════════════
   The book is laid out like the box it is: a lid with the count and the
   levels, the card box with its six compartments, and the words as index
   cards. The article is the colour it is everywhere else in the game (blue
   der, red die, green das); verbs are violet and adjectives teal, so the
   colour alone says what kind of word it is. One column on a phone, the box
   as a side rail beside the list on a wide screen. */

.wb{--g-v:#7A4BE0;--g-v-soft:#EFE6FF;--g-a:#0E8C86;--g-a-soft:#D8F5F2;--g-o:#645F84;--g-o-soft:#ECEAF6}
.mp.wb > .wb-grid{max-width:1120px}
.wb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:980px){.wb-grid{grid-template-columns:340px minmax(0,1fr)}.wb-aside{position:sticky;top:78px}}
.wb-aside{display:grid;gap:14px}
.wb-h{margin:14px 0 8px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}

/* the lid */
.wb-lid,.wb-box{padding:16px 16px 14px;border-radius:20px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.wb-count{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wb-count b{font-size:clamp(46px,12vw,64px);font-weight:900;line-height:.9;letter-spacing:-.04em}
.wb-count span{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.wb-week{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-tx);font-size:12.5px;font-weight:900}
.wb-spark{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:12px;padding-bottom:2px;border-bottom:2px solid var(--ink)}
.wb-spark i{flex:1;min-width:0;border-radius:3px 3px 0 0;background:var(--blue);transform-origin:50% 100%}
.wb-spark i.z{background:var(--line-2)}
.wb-levels{display:grid;gap:5px}
.wb-lv{display:grid;grid-template-columns:44px minmax(0,1fr) 42px;align-items:center;gap:8px;padding:4px 6px;border-radius:9px;border:1.5px solid transparent;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.wb-lv[aria-pressed="true"]{border-color:var(--ink);background:var(--card-2)}
@media (hover:hover) and (pointer:fine){.wb-lv:hover{background:var(--card-2)}}
.wb-lvk{font-size:12px;font-weight:900;text-align:center;padding:2px 0;border-radius:6px;color:#fff;background:var(--lvc,#9DB0C8)}
.wb-lvbar{height:10px;border-radius:999px;background:var(--card-3);overflow:hidden}
.wb-lvbar i{display:block;height:100%;background:var(--lvc,#9DB0C8);transform-origin:0 50%;transition:transform .5s cubic-bezier(0.23,1,0.32,1)}
.wb-lv b{font-size:13px;font-weight:800;text-align:right}
.lv-A1{--lvc:#15803F}.lv-A2{--lvc:#0B7A75}.lv-B1{--lvc:#2F6BF0}.lv-B2{--lvc:#7A4BE0}.lv-C1{--lvc:#B05F00}.lv-C2{--lvc:#D6372C}.lv-rare{--lvc:#6F6C8C}

/* the card box */
.wb-box h2{margin-top:0}
.wb-comps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:10px 6px 0;border-radius:12px;background:linear-gradient(#E9DCC4,#DCC9A8);border:var(--bw) solid var(--ink);box-shadow:inset 0 -8px 0 rgba(29,25,52,.08)}
.wb-comp{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding-bottom:6px;border-right:1.5px dashed rgba(29,25,52,.25)}
.wb-comp:last-child{border-right:0}
.wb-stack{position:relative;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;height:48px;width:100%}
.wb-stack i{display:block;width:78%;height:6px;margin-top:-2px;border-radius:2px;background:#fff;border:1.5px solid var(--ink);box-shadow:0 1px 0 rgba(29,25,52,.2)}
.wb-comp.c0 .wb-stack i{background:#FFF6DA}
.wb-comp.c5 .wb-stack i{background:var(--green-soft)}
.wb-comp b{font-size:14px;font-weight:900}
.wb-cl{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-2);text-align:center;line-height:1.1;min-height:2.2em}
.wb-due{margin:10px 0 8px;font-size:14px;font-weight:800}
.wb-practise{width:100%}
.wb-practise.hot{background:var(--sun)}
.wb-practise:disabled{opacity:.55}

/* the list */
.wb-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.wb-tools select{font:inherit;font-size:14px;font-weight:800;color:var(--ink);padding:0 12px;min-height:48px;border-radius:14px;border:var(--bw) solid var(--ink);background:#fff}
.wb-chips{display:flex;gap:6px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.wb-chips::-webkit-scrollbar{display:none}
.wb-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;font:inherit;font-size:13.5px;font-weight:900;color:var(--ink);cursor:pointer}
.wb-chip em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--ink-2)}
.wb-chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.wb-chip[aria-pressed="true"] em{color:#C9C4F0}
.wb-chip.g-m{color:var(--blue-tx)}.wb-chip.g-f{color:var(--red-tx)}.wb-chip.g-n{color:var(--green-tx)}
.wb-chip.g-m[aria-pressed="true"]{background:var(--blue);color:#fff}.wb-chip.g-f[aria-pressed="true"]{background:var(--red);color:#fff}.wb-chip.g-n[aria-pressed="true"]{background:var(--green);color:#fff}
.wb-countline{margin:6px 2px 8px;font-size:12px;font-weight:700;color:var(--ink-3)}
.wb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:1180px){.wb-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wb-w{position:relative;display:flex;align-items:stretch;border-radius:14px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);overflow:hidden}
.wb-w.due{box-shadow:0 3px 0 var(--sun-lo);border-color:var(--sun-lo)}
.wb-open{flex:1;min-width:0;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 6px 10px 10px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.wb-open:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.wb-tile{display:grid;place-items:center;height:40px;border-radius:10px;font-family:var(--mono);font-size:13px;font-weight:800;color:#fff;background:var(--g-o);border:1.5px solid var(--ink);box-shadow:inset 0 -3px 0 rgba(29,25,52,.25)}
.wb-tile.g-m{background:var(--blue)}.wb-tile.g-f{background:var(--red)}.wb-tile.g-n{background:var(--green)}
.wb-tile.g-v{background:var(--g-v);font-size:11px}.wb-tile.g-a{background:var(--g-a);font-size:10px}.wb-tile.g-o{background:#CFCBE3}
.wb-mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-line{display:flex;align-items:baseline;gap:8px;min-width:0}
/* the word keeps its room; the plural beside it gives way first ("die Schme…") */
.wb-word{flex:0 0 auto;max-width:100%;font-size:17px;font-weight:900;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-pl{flex:0 1 auto;min-width:0;font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-gl{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.wb-lvchip{font-size:10.5px;font-weight:900;padding:2px 6px;border-radius:6px;color:#fff;background:var(--lvc,#8A87A3)}
.wb-pips{display:inline-flex;gap:2px}
.wb-pips i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.wb-pips i.on{background:var(--green)}
.wb-say{flex:none;width:46px;border:0;border-left:1.5px dashed var(--line-2);background:var(--card-2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.wb-say svg,.wb-bigsay svg,.wb-exsay svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.wb-say:hover{background:var(--sun-soft)}}
.wb-empty{padding:22px;text-align:center;font-size:14.5px;color:var(--ink-2);border:1.5px dashed var(--line-2);border-radius:14px;background:#fff}
.wb-more{display:block;margin:14px auto 0}

/* a word's page */
.wb-head{position:relative;padding:22px 64px 16px 18px;border-bottom:var(--bw) solid var(--ink);background:var(--g-o-soft)}
.wb-head.g-m{background:var(--blue-soft)}.wb-head.g-f{background:var(--red-soft)}.wb-head.g-n{background:var(--green-soft)}.wb-head.g-v{background:var(--g-v-soft)}.wb-head.g-a{background:var(--g-a-soft)}
.wb-hl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wb-art{font-size:22px;font-weight:900}
.wb-head.g-m .wb-art,.wb-art.g-m{color:var(--blue-tx)}.wb-head.g-f .wb-art,.wb-art.g-f{color:var(--red-tx)}.wb-head.g-n .wb-art,.wb-art.g-n{color:var(--green-tx)}
.wb-big{margin:0;font-size:clamp(30px,8vw,40px);font-weight:900;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.wb-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.wb-ipa{font-family:var(--mono);font-size:14px;color:var(--ink-2)}
.wb-kind{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.wb-bigsay{position:absolute;right:62px;top:14px;width:44px;height:44px;border-radius:50%;border:var(--bw) solid var(--ink);background:#fff;box-shadow:0 2px 0 var(--ink);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.wb-card .pv-x{z-index:4}
.wb-body{padding-top:14px}
.wb-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
.wb-form{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;background:var(--card-2);border:1.5px solid var(--line-2)}
.wb-form span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.wb-form b{font-size:15px;font-weight:800;overflow-wrap:anywhere}
.wb-id{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;font-weight:800}
.wb-flag{flex:none;font-size:10.5px;font-weight:900;padding:2px 6px;border-radius:5px;background:#D6372C;color:#fff}
.wb-senses{margin:0;padding-left:22px;display:grid;gap:6px;font-size:14.5px;line-height:1.45}
.wb-senses li::marker{font-weight:900;color:var(--ink-3)}
.wb-tag{margin-left:6px;font-style:normal;font-size:11px;font-weight:800;padding:1px 6px;border-radius:5px;background:var(--card-3);color:var(--ink-2)}
.wb-ex{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wb-ex li{padding:10px 12px;border-radius:12px;background:#FFFBEF;border:1.5px solid rgba(231,169,0,.4)}
.wb-de{display:block;width:100%;text-align:left;font:inherit;font-size:15px;font-weight:700;line-height:1.45;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
.wb-de mark{background:var(--sun);color:var(--ink);border-radius:4px;padding:0 3px}
.wb-exsay{display:inline-grid;vertical-align:-4px;margin-left:6px;color:var(--ink-3)}
.wb-exsay svg{width:16px;height:16px}
.wb-en{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.wb-fam{display:flex;flex-wrap:wrap;gap:6px}
.wb-famw{font:inherit;font-size:13.5px;font-weight:800;padding:5px 10px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
@media (hover:hover) and (pointer:fine){.wb-famw:hover{background:var(--sun-soft)}}
.wb-yours{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--card-2);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.wb-inbox{display:flex;align-items:center;gap:6px}
.wb-this{width:100%;margin-top:10px}
.wb-src{margin:14px 0 0;font-size:11px;color:var(--ink-3)}

/* practice: a full-screen table with one card on it */
.wb-rev{position:fixed;inset:0;z-index:85;display:flex;flex-direction:column;background:
  radial-gradient(circle at 1px 1px,rgba(29,25,52,.08) 1px,transparent 1.5px) 0 0/16px 16px,var(--table);
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px))}
body.wb-reviewing{overflow:hidden}
.wb-revbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto 44px;align-items:center;gap:12px;max-width:640px;width:100%;margin:0 auto}
.wb-revbar .pv-x{position:static}
.wb-revt{font-size:15px;font-weight:900}
.wb-prog{height:12px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;overflow:hidden}
.wb-prog i{display:block;height:100%;background:var(--green);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s cubic-bezier(0.23,1,0.32,1)}
.wb-revn{font-size:13px;font-weight:800}
.wb-revstage{flex:1;display:grid;place-items:center;perspective:1200px;max-width:640px;width:100%;margin:0 auto;min-height:0}
.wb-revload{font-weight:800;color:var(--ink-2)}
.wb-flip{position:relative;width:min(100%,520px);height:min(62vh,440px);transform-style:preserve-3d;transition:transform .32s cubic-bezier(0.23,1,0.32,1)}
.wb-flip.on{transform:rotateY(180deg)}
.wb-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px;border-radius:24px;background:#fff;border:var(--bw) solid var(--ink);
  box-shadow:0 6px 0 var(--ink),0 22px 40px rgba(29,25,52,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden;text-align:center;overflow:auto}
.wb-front{border-top:12px solid var(--g-o)}
.wb-front.g-m{border-top-color:var(--blue)}.wb-front.g-f{border-top-color:var(--red)}.wb-front.g-n{border-top-color:var(--green)}.wb-front.g-v{border-top-color:var(--g-v)}.wb-front.g-a{border-top-color:var(--g-a)}
.wb-back{transform:rotateY(180deg);justify-content:flex-start;padding-top:28px}
.wb-fw,.wb-bw{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.wb-fword{font-size:clamp(32px,9vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.05;overflow-wrap:anywhere}
.wb-blank{font-size:clamp(24px,7vw,32px);font-weight:900;color:var(--ink-3);letter-spacing:.1em}
.wb-front .wb-bigsay{position:absolute;top:14px;right:14px}
.wb-facts{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.wb-ask{margin:0;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.wb-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:360px}
.wb-artb{min-height:58px;border-radius:14px;border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);font:inherit;font-size:20px;font-weight:900;color:#fff;cursor:pointer;transition:transform .12s ease}
.wb-artb:active{transform:translateY(3px);box-shadow:none}
.wb-artb.g-m{background:var(--blue)}.wb-artb.g-f{background:var(--red)}.wb-artb.g-n{background:var(--green)}
.wb-artb:disabled{opacity:.45}
.wb-artb.right{opacity:1;outline:4px solid var(--sun);outline-offset:2px}
.wb-artb.wrong{opacity:1;background:#3A3550}
.wb-show{min-width:200px}
.wb-bpl{margin:0;font-size:15px;font-weight:800;color:var(--ink-2)}
.wb-bmean{margin:4px 0 0;font-size:clamp(19px,5vw,23px);font-weight:900;line-height:1.3}
.wb-bmen{margin:0;font-size:14px;color:var(--ink-2)}
.wb-bex{width:100%;padding:10px 12px;border-radius:12px;background:#FFFBEF;border:1.5px solid rgba(231,169,0,.4);text-align:left}
.wb-bde{margin:0;font-size:15px;font-weight:700;line-height:1.4}
.wb-bde mark{background:var(--sun);border-radius:4px;padding:0 3px}
.wb-ben{margin:3px 0 0;font-size:13.5px;color:var(--ink-2)}
.wb-verdict{margin:0;font-size:15px;font-weight:900;min-height:1.3em}
.wb-verdict.ok{color:var(--green-tx)}.wb-verdict.bad{color:var(--red-tx)}
.wb-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;margin-top:auto}
.wb-again{background:#fff}
.wb-knew{background:var(--green);color:#fff}
.wb-keys{margin:10px auto 0;font-size:12px;color:var(--ink-3);text-align:center}
@media (hover:none){.wb-keys{display:none}}
.wb-sum{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 22px;border-radius:24px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:0 6px 0 var(--ink);text-align:center;width:min(100%,440px)}
.wb-sumico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.wb-sumico svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wb-sum h2{margin:6px 0 0;font-size:26px;font-weight:900}
.wb-sums{margin:0;font-size:16px;font-weight:800;color:var(--ink-2)}
.wb-sumxp{margin:0;font-size:22px;font-weight:900;color:#7A4BE0;min-height:1.2em}
.wb-sum .wb-grade{margin-top:10px}
@media (prefers-reduced-motion:reduce){.wb-flip{transition:none}.wb-lvbar i,.wb-prog i{transition:none}}

/* ── the picture picker ── */
.av-can{cursor:pointer}
.av-edit{position:absolute;left:-2px;bottom:-2px;z-index:3;width:34px;height:34px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--sun);box-shadow:0 2px 0 var(--ink);display:grid;place-items:center;cursor:pointer}
.av-edit svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.av-card{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.av-h{margin:0 48px 6px 0;font-size:22px;font-weight:900}
.av-pick{width:100%}
.av-own.empty .av-stage,.av-own.empty .av-zoom,.av-own.empty .av-hint,.av-own.empty .av-acts{display:none}
.av-stage{display:grid;place-items:center;margin-top:12px}
.av-frame{width:min(240px,70vw);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:var(--card-3);touch-action:none}
.av-canvas{width:100%;height:100%;display:block;cursor:grab}
.av-canvas:active{cursor:grabbing}
.av-zoom{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:12px;font-size:13px;font-weight:800;color:var(--ink-2)}
.av-zoom input{width:100%;accent-color:var(--blue)}
.av-hint{margin:6px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}
.av-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.av-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (min-width:520px){.av-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.av-char{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;border:var(--bw) solid var(--ink);background:#FFF6DA;box-shadow:0 2px 0 var(--ink);font:inherit;cursor:pointer}
.av-char img{width:100%;max-width:56px;aspect-ratio:1}
.av-char[aria-pressed="true"]{background:var(--sun);outline:3px solid var(--blue);outline-offset:2px}
.av-nm{font-size:10.5px;font-weight:800;line-height:1.15;color:var(--ink);text-align:center}
.av-nm i{font-style:normal;font-weight:900}
.av-char[data-art="der"] .av-nm i{color:var(--blue-tx)}.av-char[data-art="die"] .av-nm i{color:var(--red-tx)}.av-char[data-art="das"] .av-nm i{color:var(--green-tx)}
.av-reset{display:block;margin:14px auto 0}
.av-msg{margin:10px 0 0;text-align:center;font-size:14px;font-weight:800;min-height:1.2em}
.av-msg.good{color:var(--green-tx)}.av-msg.bad{color:var(--red-tx)}

/* a character picture anywhere on the site: the drawing inside a cream disc */
img.avatar[src*="#preset"]{object-fit:contain;padding:12%;background:#FFF6DA}

/* ── meanings by language (2026-09-25) ──
   A small EN mark where Indonesian falls back to English; the word a form
   belongs to, and the other reading of the same spelling, as tappable lines;
   the English definitions folded under the Indonesian ones. */
.wb-langtag{display:inline-block;margin-right:6px;padding:0 5px;border-radius:5px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--ink-2);background:var(--card-3);border:1px solid var(--line-2);vertical-align:1px}

.wb-formof,.wb-also{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;width:100%;margin:0 0 10px;padding:9px 12px;border-radius:12px;
  font:inherit;font-size:14px;text-align:left;color:var(--ink);background:var(--card-2);border:1.5px solid var(--line-2);cursor:pointer}
.wb-formof span,.wb-also span{font-size:12px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.wb-formof b,.wb-also b{font-weight:800}
.wb-also em{font-style:normal;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){.wb-formof:hover,.wb-also:hover{background:var(--sun-soft)}}
.wb-noid{margin:0 0 6px;font-size:13px;color:var(--ink-3)}
.wb-idsenses .wb-g{font-weight:700}
.wb-enfold{margin:4px 0 12px}
.wb-enfold summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--ink-2);min-height:36px;display:flex;align-items:center;gap:6px;list-style:none}
.wb-enfold summary::-webkit-details-marker{display:none}
.wb-enfold summary::before{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.wb-enfold[open] summary::before{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.wb-enfold summary::before{transition:none}}
.wb-enfold .wb-senses{margin-top:4px}
.wb-formof{cursor:default}

/* English words the game once took, and compounds put together from parts */
.wb-tile.g-x{background:#E9EDF5;color:var(--ink-2);font-size:12px;letter-spacing:.04em}
.wb-lvchip.lv-foreign{background:#E9EDF5;color:var(--ink-2);border-color:var(--line-2)}
.wb-foreign{margin:0 0 10px;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;color:var(--ink-2);background:#F1F3F8;border:1.5px dashed var(--line-2)}
.wb-built{margin:0 0 8px;font-size:13px;color:var(--ink-3)}


/* ── 15-pruef.css ── */
/* ── Probeprüfung ────────────────────────────────────────────────────────
   An exam booklet on the game table: white printed sheets with an ink
   outline and cardboard under them, a tab on every sheet in the colour of
   its level (A1 sun, A2 blue, B1 violet), and one of the four pawn colours
   for each module (listening blue, reading green, writing red, speaking
   sun). The module's time is a fuse that burns down along the top. Motion
   follows the rest of the game: strong ease-out for things arriving, nothing
   decorative while someone is reading. */
.pk{--pk-barh:62px;--pk-w:980px;--pk-ease:cubic-bezier(0.23,1,0.32,1);flex:1;display:flex;flex-direction:column;min-height:0}
.pk-view{flex:1;display:flex;flex-direction:column;min-height:0}

/* level colours */
.pk-lv-a1{--tint:var(--sun);--tint-soft:var(--sun-soft);--on:var(--ink)}
.pk-lv-a2{--tint:var(--blue);--tint-soft:var(--blue-soft);--on:#fff}
.pk-lv-b1{--tint:#7C5CE0;--tint-soft:#EEE8FF;--on:#fff}
.pk-lv-b2{--tint:#16A06B;--tint-soft:#DDF5EA;--on:#fff}
.pk-lv-c1{--tint:#E5484D;--tint-soft:#FDE4E5;--on:#fff}
.pk-lv-c2{--tint:#1E1B3A;--tint-soft:#E6E5F0;--on:#fff}
.pk-lv-b2{--tint:#137A40;--tint-soft:#D9F4E4;--on:#fff}
.pk-lv-c1{--tint:#B82B23;--tint-soft:#FFE3DF;--on:#fff}
.pk-lv-c2{--tint:#1D1934;--tint-soft:#E6EEFB;--on:#fff}
/* module colours */
.pk-m-hoeren,.pk-k-hoeren,.pk-mm-hoeren,.pk-st-hoeren,.pk-sm-hoeren{--mc:var(--blue);--mcs:var(--blue-soft);--mon:#fff;--mct:var(--blue-tx)}
.pk-m-lesen,.pk-k-lesen,.pk-mm-lesen,.pk-st-lesen,.pk-sm-lesen{--mc:var(--green);--mcs:var(--green-soft);--mon:#fff;--mct:var(--green-tx)}
.pk-m-schreiben,.pk-k-schreiben,.pk-mm-schreiben,.pk-st-schreiben,.pk-sm-schreiben{--mc:var(--red);--mcs:var(--red-soft);--mon:#fff;--mct:var(--red-tx)}
.pk-m-sprechen,.pk-k-sprechen,.pk-mm-sprechen,.pk-st-sprechen,.pk-sm-sprechen{--mc:var(--sun);--mcs:var(--sun-soft);--mon:var(--ink);--mct:var(--ink)}

/* the pages that are not an exam page: one centred column */
.pk-lobby,.pk-setup,.pk-done,.pk-review,.pk-intro,.pk-selfview{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px var(--gut) 44px}
.pk-lobby > *,.pk-setup > *,.pk-done > *,.pk-review > *,.pk-intro > *,.pk-selfview > *{width:100%;max-width:var(--col)}
.pk-lobby > .backlink,.pk-setup > .backlink,.pk-review > .backlink{width:auto;align-self:flex-start}
.pk-h{margin:6px 0 -4px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.pk-hint{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pk-kick{display:inline-block;align-self:flex-start;font:700 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-foot{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-3);text-align:center}
.pk-ic{display:inline-flex;flex:none}
.pk-ic svg{overflow:visible}

/* ── lobby ───────────────────────────────────────────────────────────── */
.pk-hero{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;padding-top:2px}
.pk-heroartwrap{width:min(44vw,212px)}
.pk-heroart{display:block;width:100%;height:auto;overflow:visible}
.pk-hs{fill:#fff;stroke:var(--ink);stroke-width:3}
.pk-hb{fill:var(--blue)}
.pk-hl rect{fill:var(--card-3)}
.pk-hc circle{fill:var(--green);stroke:var(--ink);stroke-width:2.5}
.pk-hc circle.is-open{fill:#fff}
.pk-hc path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pk-ht{stroke:var(--ink);stroke-width:3}
.pk-ht.a1{fill:var(--sun)}.pk-ht.a2{fill:var(--blue)}.pk-ht.b1{fill:#7C5CE0}.pk-ht.b2{fill:#16A06B}.pk-ht.c1{fill:#E5484D}.pk-ht.c2{fill:#1E1B3A}
.pk-heroart text{font:800 18px var(--display);fill:#fff}
.pk-ht.a1 + text{fill:var(--ink)}
.pk-pen{fill:var(--sun);stroke:var(--ink);stroke-width:3}
.pk-pent{fill:#F4D3A6;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.pk-penb{fill:var(--red);stroke:var(--ink);stroke-width:3}
body.motion .pk-heroart g > .pk-ht{animation:pkDeal .5s var(--pk-ease) both}
body.motion .pk-heroart g > .pk-ht.a2{animation-delay:.08s}
body.motion .pk-heroart g > .pk-ht.b1{animation-delay:.16s}
body.motion .pk-heroart g > .pk-ht.b2{animation-delay:.24s}
body.motion .pk-heroart g > .pk-ht.c1{animation-delay:.32s}
body.motion .pk-heroart g > .pk-ht.c2{animation-delay:.4s}
@keyframes pkDeal{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.pk-herotx{display:flex;flex-direction:column;gap:8px}
.pk-herotx h1{margin:0;font-size:clamp(34px,8.6vw,54px);line-height:1;letter-spacing:-.03em}
.pk-herotx .lede2{text-align:left;max-width:none;font-size:15.5px}
.pk-kicker{align-self:flex-start;margin:0 0 2px;padding:5px 11px;border-radius:8px;background:var(--ink);color:#fff;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-2deg)}
@media (max-width:540px){
  .pk-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
  .pk-herotx{align-items:center}
  .pk-herotx .lede2{text-align:center}
  .pk-kicker{align-self:center}
  .pk-heroartwrap{width:min(62vw,230px)}
}

.pk-resume{display:flex;flex-direction:column;gap:6px;padding:16px 18px 14px;background:var(--tint-soft);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.pk-resume h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.pk-resumeacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}

.pk-levels{display:flex;flex-direction:column;gap:18px}
.pk-level{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;text-align:left;min-height:118px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--lift);overflow:hidden;
  transition:transform .14s var(--pk-ease),box-shadow .14s var(--pk-ease),background .15s ease}
.pk-level:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.pk-level:hover{background:var(--tint-soft)}.pk-level:hover .pk-lvgo{translate:3px 0}}
.pk-lvtag{display:flex;align-items:center;justify-content:center;width:88px;background:var(--tint);color:var(--on);border-right:var(--bw) solid var(--ink)}
.pk-lvtag b{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variation-settings:'wdth' 80}
.pk-lvtag.big{width:78px;height:78px;border:var(--bw) solid var(--ink);border-radius:20px;box-shadow:var(--lift-sm);flex:none}
.pk-lvbody{display:flex;flex-direction:column;gap:5px;padding:13px 6px 13px 14px;min-width:0}
.pk-lvname{font-size:19px;font-weight:800;letter-spacing:-.015em}
.pk-lvtx{font-size:14px;line-height:1.4;color:var(--ink-2)}
.pk-lvfoot{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:2px;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.pk-lvbest.has{color:var(--green-tx)}
.pk-lvstamps{display:flex;gap:6px;margin-top:3px}
.pk-sm{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2)}
.pk-sm.is-on{background:var(--mc);border-color:var(--ink)}
.pk-lvgo{display:flex;align-items:center;padding:0 14px 0 6px;color:var(--ink);transition:translate .2s var(--pk-ease)}
@media (max-width:380px){.pk-lvtag{width:68px}.pk-lvtag b{font-size:30px}.pk-lvgo{padding:0 8px 0 2px}}

/* the passport: a stamp for every module passed */
.pk-pass{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.pk-pass .pk-h{margin:0}
.pk-pgrid{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.pk-prow{display:flex;align-items:center;gap:12px}
.pk-plv{flex:none;display:grid;place-items:center;width:54px;height:34px;border-radius:9px;background:var(--tint);color:var(--on);border:var(--bw) solid var(--ink);font:800 14px var(--mono)}
.pk-stamp{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2.5px dashed var(--line-2);color:var(--line-2);rotate:var(--rot,0deg);transition:transform .3s var(--spring)}
.pk-stamp.is-on{border:2.5px solid var(--mct);color:var(--mct);background:var(--mcs);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--mct)}
@media (max-width:380px){.pk-stamp{width:46px;height:46px}.pk-prow{gap:8px}}

/* the latest results */
.pk-hist{display:flex;flex-direction:column;gap:8px}
.pk-hist .pk-h{margin:0 0 2px}
.pk-histlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pk-hrow{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink)}
.pk-hmid{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pk-hmid b{font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-hmid small{font-size:12px;font-weight:700;color:var(--ink-3)}
.pk-hscore{font-size:14px;font-weight:800;white-space:nowrap}
.pk-hscore.is-pass{color:var(--green-tx)}
.pk-hrow > .pk-ic:last-child{color:var(--red)}
.pk-hscore.is-pass + .pk-ic{color:var(--green)}

/* ── setup ───────────────────────────────────────────────────────────── */
.pk-shead2{display:flex;align-items:center;gap:14px}
.pk-shead2 h1{margin:0 0 4px;font-size:clamp(28px,7vw,38px);letter-spacing:-.03em;line-height:1.05}
.pk-shead2 .lede2{text-align:left;font-size:15px;max-width:none}
.pk-sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px}
.pk-set{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-height:62px;padding:9px 12px;text-align:left;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);
  transition:transform .12s var(--pk-ease),box-shadow .12s var(--pk-ease),background .15s ease}
.pk-set b{font-size:16px;font-weight:800}
.pk-set small{font-size:12px;font-weight:700;color:var(--ink-3);line-height:1.3}
.pk-set:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.pk-set.is-done small{color:var(--green-tx)}
.pk-set.is-on{background:var(--ink);color:#fff}
.pk-set.is-on small{color:var(--sun)}
.pk-scopes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-scope.is-full{grid-column:1 / -1}
.pk-scope,.pk-mode{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:74px;padding:10px 12px;text-align:left;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);
  transition:transform .12s var(--pk-ease),box-shadow .12s var(--pk-ease),background .15s ease}
.pk-scope:active,.pk-mode:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.pk-scope.is-on,.pk-mode.is-on{background:var(--tint-soft);box-shadow:0 3px 0 var(--ink),0 0 0 3px var(--tint)}
.pk-scico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--mc,var(--ink));color:var(--mon,#fff);border:var(--bw) solid var(--ink)}
.pk-scope.is-full .pk-scico{background:var(--ink);color:var(--sun)}
.pk-mode .pk-scico{background:var(--card-3);color:var(--ink)}
.pk-scbody{display:flex;flex-direction:column;gap:1px;min-width:0}
.pk-scbody b{font-size:16px;font-weight:800}
.pk-scbody small{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.pk-scmeta{grid-column:2;font:700 11.5px var(--mono);color:var(--ink-3);margin-top:-2px}
.pk-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.pk-scopes,.pk-modes{grid-template-columns:1fr}.pk-sets{grid-template-columns:1fr 1fr}.pk-set:last-child{grid-column:1 / -1}}
/* sticky above the phone's menu, which is the page's own bottom padding */
.pk-startbar{position:sticky;bottom:var(--dockh,0px);z-index:5;display:flex;flex-direction:column;gap:6px;padding:14px 0 14px;
  background:linear-gradient(180deg,transparent,var(--table) 34%)}
.pk-startbtn{width:100%}
.pk-loadfail{margin:0;text-align:center;font-size:14px;font-weight:700;color:var(--red-tx)}

/* ── a module's introduction ─────────────────────────────────────────── */
.pk-introhero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding-top:8px}
.pk-introicon{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--mc);color:var(--mon);border:var(--bw) solid var(--ink);box-shadow:var(--lift);margin-bottom:6px}
body.motion .pk-introicon{animation:pkPop .5s var(--spring) both}
@keyframes pkPop{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
.pk-introhero h1{margin:0;font-size:clamp(36px,10vw,52px);letter-spacing:-.03em;line-height:1}
.pk-introhero .pk-kick{align-self:center}
.pk-lede{margin:0;max-width:40ch;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.pk-intrometa{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pk-chipx{padding:6px 12px;border:var(--bw) solid var(--ink);border-radius:999px;background:#fff;font:700 12.5px var(--mono)}
.pk-introcard{padding:14px 16px;background:var(--mcs);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--lift-sm)}
.pk-introcard p{margin:0;font-size:15.5px;line-height:1.55}
.pk-introsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pk-introsteps li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px}
.pk-introsteps i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mc);color:var(--mon);border:var(--bw) solid var(--ink);font:800 13px var(--mono);font-style:normal}
.pk-introsteps span{font-size:14.5px;line-height:1.35;font-weight:600;min-width:0}
.pk-introsteps small{font:700 11.5px var(--mono);color:var(--ink-3);white-space:nowrap}
.pk-introacts{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px}
.pk-introacts .btn{width:100%}

/* ── the exam: top bar with the fuse ─────────────────────────────────── */
.pk-run{flex:1;display:flex;flex-direction:column;width:100%}
.pk-top{position:sticky;top:var(--pk-barh,62px);z-index:20;background:color-mix(in srgb,var(--table-hi) 94%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);border-bottom:var(--bw) solid var(--ink)}
.pk-fuse{position:relative;height:7px;background:var(--card-3);border-bottom:var(--bw) solid var(--ink);overflow:visible}
.pk-fuse.is-off{display:none}
.pk-fuse-line{position:absolute;inset:0;transform-origin:left center;background:linear-gradient(90deg,var(--ba),var(--bb));transition:transform .3s linear}
.pk-fuse-spark{position:absolute;top:-4px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--sun-hi);
  left:clamp(7px,calc(var(--r,1) * 100%),calc(100% - 7px));
  box-shadow:0 0 0 3px rgba(255,122,26,.35),0 0 11px 4px rgba(255,203,46,.85);transition:left .3s linear}
.pk-top{overflow-x:clip}
.pk-top[data-heat="warm"] .pk-fuse-line{background:linear-gradient(90deg,var(--bb),var(--red-hi))}
.pk-top[data-heat="hot"] .pk-fuse-line{background:linear-gradient(90deg,var(--red-hi),var(--red))}
body.motion .pk-top[data-heat="hot"] .pk-fuse-spark{animation:pkSpark .5s ease-in-out infinite alternate}
@keyframes pkSpark{from{transform:scale(.85)}to{transform:scale(1.3)}}
.pk-toprow,.pk-track{max-width:var(--pk-w);margin-inline:auto}
.pk-toprow{display:flex;align-items:center;gap:10px;padding:8px var(--gut)}
.pk-ttl{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pk-ticon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mc);color:var(--mon);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.pk-tname{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.pk-tname b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.pk-tname small{font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-clock{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:86px;padding:8px 12px;background:#fff;border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:0 3px 0 var(--ink);font-size:15px;font-weight:800}
.pk-top[data-heat="warm"] .pk-clock{background:var(--sun-soft)}
.pk-top[data-heat="hot"] .pk-clock{background:var(--red-soft);color:var(--red-tx)}
.pk-sheetbtn{position:relative}
.pk-badge{position:absolute;top:-8px;right:-8px;min-width:21px;height:21px;padding:0 5px;border-radius:11px;background:var(--red);color:#fff;border:var(--bw) solid var(--ink);font:800 11px/17px var(--mono);text-align:center}
.pk-track{display:flex;align-items:center;list-style:none;margin:0 auto;padding:0 var(--gut) 9px}
.pk-node{position:relative;display:flex;justify-content:center;flex:1}
.pk-node + .pk-node::before{content:'';position:absolute;top:50%;right:50%;width:100%;height:3px;translate:0 -50%;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px)}
.pk-node.is-past + .pk-node::before,.pk-node.is-past + .pk-node.is-now::before{background:var(--ink)}
.pk-nodebtn{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:var(--bw) solid var(--ink);font:800 13px var(--mono)}
.pk-nodebtn i{font-style:normal}
.pk-node.is-past .pk-nodebtn{background:var(--ink);color:#fff}
.pk-node.is-now .pk-nodebtn{background:var(--mc);color:var(--mon);box-shadow:0 0 0 4px var(--mcs),0 3px 0 var(--ink);scale:1.12}
.pk-nodetx{display:none}
@media (min-width:720px){
  .pk-track{max-width:min(var(--pk-w),calc(112px * 5 + 2 * var(--gut)))}
  .pk-nodebtn{width:auto;min-width:32px;padding:0 13px;border-radius:999px;gap:6px;grid-auto-flow:column}
  .pk-nodetx{display:inline;font:800 12px var(--mono);letter-spacing:.02em}
  .pk-nodebtn i{display:none}
}
@media (max-width:420px){.pk-toprow{gap:8px}.pk-clock{min-width:74px;padding:7px 9px;font-size:14px}.pk-tname b{font-size:15.5px}}

/* the stage and the bar at the bottom */
.pk-stage{flex:1;width:100%;max-width:var(--pk-w);margin:0 auto;padding:16px var(--gut) 30px}
.pk-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:10px max(var(--gut),calc(50% - 490px + var(--gut))) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--table-hi) 94%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);border-top:var(--bw) solid var(--ink)}
.pk-prog{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--ink-2);min-width:0}
.pk-prog-s{display:none}
@media (max-width:440px){.pk-prog-l{display:none}.pk-prog-s{display:inline;font-size:15px;color:var(--ink)}}
.pk-next{min-height:52px;padding:0 20px;font-size:16px}
.pk-prev{min-height:46px}
@media (max-width:420px){.pk-next{padding:0 14px;font-size:15px}.pk-prev span:not(.pk-ic){display:none}.pk-prev{padding:0 12px}}

/* ── an exam page ────────────────────────────────────────────────────── */
.pk-sheet{background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);padding-bottom:22px}
.pk-shead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;background:var(--mcs);border-bottom:var(--bw) dashed var(--line-2);border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0}
.pk-teiltab{padding:5px 11px;background:var(--mc);color:var(--mon);border:var(--bw) solid var(--ink);border-radius:8px;box-shadow:0 2px 0 var(--ink);font:800 13px var(--mono)}
.pk-range{font:700 12.5px var(--mono);color:var(--ink-2)}
.pk-lvtab{margin-left:auto;padding:4px 10px;background:var(--tint,var(--ink));color:var(--on,#fff);border:var(--bw) solid var(--ink);border-radius:999px;font:800 12px var(--mono)}
.pk-ins{padding:16px 18px 4px}
.pk-ins-de{margin:0;font-size:16.5px;line-height:1.55;font-weight:600}
.pk-sheet:focus{outline:none}
.pk-trbtn{display:inline-flex;align-items:center;gap:6px;margin-top:2px;min-height:44px;padding:6px 4px;font-size:13.5px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.pk-ins-tr{margin:6px 0 0;padding:10px 12px;border-radius:12px;border:2px solid var(--line-2);background:var(--card-2);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pk-body{display:flex;flex-direction:column;gap:18px;padding:12px 18px 0}
.pk-sub{margin:0;font:800 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-two{display:flex;flex-direction:column;gap:18px}
.pk-left,.pk-right{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:940px){
  .pk-two{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:26px;align-items:start}
  .pk-left{position:sticky;top:calc(var(--pk-barh,62px) + 126px);max-height:calc(100dvh - var(--pk-barh,62px) - 250px);overflow:auto;padding:12px 8px 12px 2px;margin:-12px -8px -12px -2px}
}
.pk-group{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:var(--bw) dashed var(--line)}
.pk-group:last-child{border-bottom:0;padding-bottom:0}

/* the texts */
.pk-text{position:relative;padding:14px 16px;background:var(--card-2);border:var(--bw) solid var(--ink);border-radius:14px;font-size:16px;line-height:1.55}
.pk-p{margin:0 0 .65em}.pk-p:last-child{margin-bottom:0}
.pk-th{margin:0 0 6px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.pk-f-mail{background:#fff}
.pk-mh{margin:-2px 0 10px;padding-bottom:8px;border-bottom:var(--bw) dashed var(--line-2);font-size:13.5px}
.pk-mrow{display:grid;grid-template-columns:72px 1fr;gap:6px;padding:1px 0}
.pk-mrow b{color:var(--ink-3);font-weight:700}
.pk-mrow span{font-weight:600;min-width:0;overflow-wrap:anywhere}
.pk-f-sms{padding:0;background:none;border:0}
.pk-who{margin:0 0 4px 4px;font:700 12px var(--mono);color:var(--ink-3)}
.pk-bubble{padding:12px 15px;background:var(--blue);color:#fff;border:var(--bw) solid var(--ink);border-radius:18px 18px 18px 5px;box-shadow:0 3px 0 var(--ink)}
.pk-bubble .pk-ev{color:var(--ink)}
.pk-f-note{background:var(--sun-soft);box-shadow:3px 3px 0 var(--ink);rotate:-.4deg}
.pk-f-card{background:#fff;padding-right:78px;background-image:linear-gradient(90deg,transparent calc(100% - 1px),var(--line-2) 0)}
.pk-f-card::after{content:'';position:absolute;top:12px;right:12px;width:46px;height:56px;border:var(--bw) dashed var(--line-2);border-radius:5px;background:var(--card-2)}
.pk-f-ad{margin-top:12px;background:#fff;padding-top:18px}
.pk-tab{position:absolute;top:-13px;left:14px;min-width:32px;height:28px;padding:0 6px;background:var(--sun);border:var(--bw) solid var(--ink);border-radius:8px;box-shadow:0 2px 0 var(--ink);font:800 14px/24px var(--mono);text-align:center}
.pk-f-sign{padding:0;background:none;border:0}
.pk-plaque{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border:3px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);text-align:center}
.pk-bolt{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.75);border:2px solid var(--ink)}
.pk-signtx{margin:0;flex:1;font-size:17px;font-weight:800;line-height:1.3}
.pk-tone-a .pk-plaque{background:var(--blue);color:#fff}
.pk-tone-b .pk-plaque{background:var(--red);color:#fff}
.pk-tone-c .pk-plaque{background:var(--green);color:#fff}
.pk-tone-d .pk-plaque{background:var(--sun);color:var(--ink)}
.pk-tone-e .pk-plaque{background:var(--ink);color:var(--sun)}
.pk-tone-a .pk-ev,.pk-tone-b .pk-ev,.pk-tone-c .pk-ev,.pk-tone-e .pk-ev{background:none;box-shadow:inset 0 -3px 0 var(--sun);color:inherit}
.pk-ev{background:linear-gradient(transparent 56%,rgba(255,203,46,.9) 56%);color:inherit;padding:0 1px;border-radius:2px}

/* an item: a pawn with its number, the question, the answers */
.pk-item{display:flex;flex-direction:column;gap:10px;scroll-margin-top:calc(var(--pk-barh,62px) + 150px)}
.pk-item.is-flash{animation:pkFlash 1.2s var(--pk-ease)}
@keyframes pkFlash{0%{box-shadow:0 0 0 0 rgba(255,203,46,.9)}30%{box-shadow:0 0 0 10px rgba(255,203,46,.5)}100%{box-shadow:0 0 0 18px rgba(255,203,46,0)}}
.pk-ihead{display:flex;gap:11px;align-items:flex-start}
.pk-no{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:var(--bw) solid var(--ink);box-shadow:0 2px 0 var(--ink);font:800 14px var(--mono);font-style:normal;transition:background .2s ease,color .2s ease}
.pk-item.is-done .pk-no{background:var(--mc,var(--ink));color:var(--mon,#fff)}
.pk-item.is-ok .pk-no{background:var(--green);color:#fff}
.pk-item.is-bad .pk-no{background:var(--red);color:#fff}
.pk-q{margin:3px 0 0;font-size:16.5px;font-weight:700;line-height:1.4;min-width:0}
.pk-opts{display:flex;flex-direction:column;gap:8px;margin-left:45px}
@media (max-width:520px){.pk-opts,.pk-chosen{margin-left:0}}
.pk-opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px 8px 9px;text-align:left;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);
  transition:transform .12s var(--pk-ease),box-shadow .12s var(--pk-ease),background .15s ease}
.pk-opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
@media (hover:hover) and (pointer:fine){.pk-opt:hover:not(:disabled):not(.is-on){background:var(--sun-soft)}}
.pk-let{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--card-3);border:var(--bw) solid var(--ink);font:800 15px var(--mono);font-style:normal;text-transform:lowercase}
.pk-ol{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pk-ot{font-size:16px;font-weight:600;line-height:1.35;min-width:0}
.pk-opt.is-on{background:var(--sun-soft)}
.pk-opt.is-on .pk-let{background:var(--ink);color:var(--sun);border-color:var(--ink)}
.pk-opt > .pk-ic:last-child{margin-left:auto}
.pk-tf{flex-direction:row;gap:10px}
.pk-tf .pk-opt{flex:1;justify-content:center;gap:8px;padding:8px 12px}
.pk-lets{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,52px));gap:8px}
.pk-lt{width:auto;min-height:52px;padding:0;justify-content:center}
.pk-lt .pk-let{width:auto;height:auto;background:none;border:0;font-size:18px;text-transform:uppercase}
.pk-lt.is-on{background:var(--ink);color:var(--sun)}
.pk-lt.is-on .pk-let{background:none;color:var(--sun)}
.pk-lt.is-taken{background:var(--card-2);color:var(--ink-3);box-shadow:0 3px 0 var(--line-2);border-color:var(--line-2)}
.pk-chosen{margin:-2px 0 0 45px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.pk-picgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.pk-picgrid .pk-opt{flex-direction:column;justify-content:center;text-align:center;min-height:104px;padding:10px 6px}
.pk-pic{display:block;width:56px;height:56px}
/* the review colours */
.pk-opt.is-right{background:var(--green-soft);border-color:var(--green-lo)}
.pk-opt.is-right .pk-let{background:var(--green);color:#fff;border-color:var(--green-lo)}
.pk-opt.is-wrong{background:var(--red-soft);border-color:var(--red-lo)}
.pk-opt.is-wrong .pk-let{background:var(--red);color:#fff;border-color:var(--red-lo)}
.pk-opt:disabled{cursor:default;box-shadow:0 3px 0 var(--line-2)}
.pk-proof{margin:2px 0 0 45px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pk-proof b{display:block;margin-bottom:2px;font:800 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-noans{margin:0 0 0 45px;font-size:13.5px;font-weight:700;color:var(--red-tx)}
@media (max-width:520px){.pk-proof,.pk-noans{margin-left:0}}
.pk-tcheck{padding:16px 18px 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pk-tres{margin:0;font-size:14.5px;font-weight:800}

/* listening */
.pk-clip{display:flex;flex-direction:column;gap:14px;padding:14px;background:var(--card-2);border:var(--bw) solid var(--ink);border-radius:16px}
.pk-player{display:flex;flex-direction:column;gap:10px}
.pk-spks{display:flex;flex-wrap:wrap;gap:6px 14px}
.pk-spk{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--ink-2)}
.pk-spk i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--ink);border:var(--bw) solid var(--ink);font-style:normal;font-size:13px;transition:transform .2s var(--pk-ease),background .2s ease}
.pk-spk.is-f i{background:var(--red-soft)}
.pk-spk.is-on i{background:var(--sun);transform:scale(1.18)}
.pk-ctl{display:flex;align-items:center;gap:12px}
.pk-play{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mc);color:var(--mon);border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink);
  transition:transform .12s var(--pk-ease),box-shadow .12s var(--pk-ease)}
.pk-play:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pk-play:disabled{opacity:.45;cursor:default}
.pk-wave{flex:1;display:flex;align-items:center;gap:3px;height:36px;min-width:0}
.pk-wave i{flex:1;min-width:2px;height:var(--h);border-radius:3px;background:var(--line-2);transform-origin:center;transition:background .2s ease}
.pk-player[data-state="playing"] .pk-wave i{background:var(--mc)}
body.motion .pk-player[data-state="playing"] .pk-wave i{animation:pkBar .62s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes pkBar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.pk-pl{flex:none;min-width:104px;text-align:right;font-size:13px;font-weight:700;color:var(--ink-2)}
@media (max-width:420px){.pk-pl{min-width:84px;font-size:12.5px}.pk-wave{gap:2px}}
.pk-scriptbtn{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:6px 2px;font-size:13.5px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.pk-script{padding-top:10px;border-top:var(--bw) dashed var(--line-2)}
.pk-trans{display:flex;flex-direction:column;gap:7px}
.pk-tline{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;font-size:15px;line-height:1.5}
.pk-tspk{padding:2px 8px;border-radius:7px;background:var(--blue-soft);font:800 11.5px var(--mono);white-space:nowrap}
.pk-tspk.is-f{background:var(--red-soft)}
.pk-slow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;font-size:14px;font-weight:700;cursor:pointer}
.pk-slow input{width:24px;height:24px;accent-color:var(--blue)}
.pk-det{margin:2px 0 0 45px;font-size:14px}
.pk-det summary{cursor:pointer;font-weight:700;color:var(--ink-2);min-height:36px;display:flex;align-items:center}
@media (max-width:520px){.pk-det{margin-left:0}}

/* writing */
.pk-sit{padding:12px 14px;background:var(--sun-soft);border:var(--bw) solid var(--ink);border-radius:14px}
.pk-sit small{font:800 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-sit p{margin:3px 0 0;font-size:16.5px;line-height:1.5;font-weight:600}
.pk-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pk-pts li{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600}
.pk-writewrap{display:flex;flex-direction:column}
.pk-area{display:block;width:100%;min-height:220px;padding:14px;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:inset 0 3px 0 var(--card-3);
  font:500 17px/1.55 var(--display);resize:vertical}
.pk-area:focus-visible,.pk-inp:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:14px}
.pk-meter{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
.pk-gauge{flex:none;width:96px;height:10px;border:var(--bw) solid var(--ink);border-radius:6px;background:var(--card-3);overflow:hidden}
.pk-gauge i{display:block;width:100%;height:100%;background:var(--sun);transform-origin:left;transform:scaleX(0);transition:transform .2s ease,background .2s ease}
.pk-meter.is-ok .pk-gauge i{background:var(--green-hi)}
.pk-count{flex:1 1 140px;min-width:0;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.pk-help{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pk-helpbtn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 2px;font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.pk-chips{display:flex;flex-wrap:wrap;gap:8px}
.pk-chip{min-height:42px;padding:9px 13px;background:#fff;border:var(--bw) solid var(--ink);border-radius:999px;font-size:14px;font-weight:700;box-shadow:0 2px 0 var(--ink)}
.pk-chip:active{transform:translateY(2px);box-shadow:none}
.pk-form{display:flex;flex-direction:column;gap:4px}
.pk-field{display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:6px 14px;align-items:center;padding:5px 0}
.pk-flab{font-size:15px;font-weight:700}
.pk-inp{min-height:50px;width:100%;padding:0 13px;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:inset 0 3px 0 var(--card-3);font-size:16px;font-weight:600}
@media (max-width:520px){.pk-field{grid-template-columns:1fr}}

/* speaking */
.pk-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px 12px;padding-top:6px}
.pk-sc{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 13px 12px;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink)}
.pk-scno{position:absolute;top:-11px;left:-7px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mc);color:var(--mon);border:var(--bw) solid var(--ink);font:800 12px var(--mono)}
.pk-sck{display:block;margin-top:4px;font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-scv{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.2;overflow-wrap:anywhere}
.pk-scw{display:block;font-size:16px;font-weight:700;color:var(--ink-2)}
.pk-scm{margin-top:8px;padding-top:8px;border-top:var(--bw) dashed var(--line-2);font-size:13.5px;line-height:1.45}
.pk-scm small{display:block;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-scm p{margin:0 0 6px}
.pk-talkact{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:4px}
.pk-talkact > .btn{align-self:center}
.pk-speakrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 26px}
.pk-speakside{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:260px;text-align:center}
.pk-speakside b{font-size:17px;font-weight:800}
.pk-speakside .pk-hint{margin:0}
.pk-notice{margin:0;padding:11px 14px;border:var(--bw) solid var(--ink);border-radius:12px;background:var(--sun-soft);font-size:14px;font-weight:600;line-height:1.5}
.pk-ring{position:relative;align-self:center;width:150px;height:150px}
.pk-ring svg{display:block;width:100%;height:100%;rotate:-90deg}
.pk-rbg{fill:none;stroke:var(--card-3);stroke-width:9}
.pk-rfg{fill:none;stroke:var(--mc);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.pk-ring.is-done .pk-rfg{stroke:var(--green)}
.pk-rnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.pk-rnum b{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em}
.pk-talkact > .pk-hint{text-align:center}
.pk-model{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pk-motx{margin:0 0 4px;padding:12px 14px;border:2px solid var(--line-2);background:var(--card-2);border-radius:10px;font-size:16px;line-height:1.55}
.pk-checks{display:flex;flex-direction:column;gap:8px}
.pk-chk{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:9px 12px;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;cursor:pointer}
.pk-chk input{position:absolute;opacity:0;width:1px;height:1px}
.pk-box{flex:none;width:28px;height:28px;border:var(--bw) solid var(--ink);border-radius:8px;background:#fff;transition:background .15s ease}
.pk-chk input:checked + .pk-box{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/80% no-repeat}
.pk-chk input:focus-visible + .pk-box{outline:3px solid var(--blue);outline-offset:2px}
.pk-chk:has(input:checked){background:var(--green-soft)}
.pk-chktx{font-size:15.5px;font-weight:600;line-height:1.35}

/* the self check */
.pk-selftop{display:flex;align-items:center;gap:12px}
.pk-selftop h1{margin:0;font-size:clamp(26px,7vw,34px);letter-spacing:-.025em}
.pk-selftop .pk-ticon{width:46px;height:46px;--mc:var(--red);--mon:#fff}
.pk-selfview .pk-sheet{max-width:var(--col)}
.pk-selfsit{margin:0;padding:10px 12px;border-radius:12px;background:var(--sun-soft);font-weight:600;line-height:1.45}
.pk-ftable{display:flex;flex-direction:column;gap:7px}
.pk-frow{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:center;padding:9px 12px;border:var(--bw) solid var(--ink);border-radius:12px;font-size:14.5px}
.pk-frow.is-ok{background:var(--green-soft)}.pk-frow.is-bad{background:var(--red-soft)}
.pk-fyours{font-weight:600;min-width:0;overflow-wrap:anywhere}
.pk-fright{grid-column:3;font-weight:800;color:var(--green-tx);min-width:0;overflow-wrap:anywhere}
.pk-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pk-checklist li{display:flex;align-items:center;gap:10px;padding:8px 12px;border:var(--bw) solid var(--ink);border-radius:12px;font-size:14.5px;font-weight:600;line-height:1.35}
.pk-checklist li.is-ok{background:var(--green-soft)}.pk-checklist li.is-bad{background:var(--red-soft)}
.pk-checklist .pk-ic{flex:none}
.pk-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pk-cmpcol small{display:block;margin-bottom:5px;font:800 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-cmpbox{height:100%;padding:12px;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.pk-cmpbox p{margin:0 0 .55em}.pk-cmpbox p:last-child{margin:0}
.pk-cmpcol.is-model .pk-cmpbox{background:var(--sun-soft)}
@media (max-width:560px){.pk-cmp{grid-template-columns:1fr}}
.pk-selflang{margin:4px 0 0;font-size:15.5px;font-weight:800}
.pk-seg3{display:flex;gap:8px}
.pk-seg3b{flex:1;min-height:50px;padding:6px 8px;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);font-size:14.5px;font-weight:800;line-height:1.2}
.pk-seg3b:active{transform:translateY(3px);box-shadow:none}
.pk-seg3b.is-on{background:var(--ink);color:var(--sun)}
.pk-selfbar{position:sticky}

/* dialogs and the pause */
.pk-over{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(29,25,52,.5);animation:fadeIn .18s ease both}
.pk-overbox{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;max-height:88dvh;overflow:auto;padding:26px 22px 22px;text-align:center;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);animation:sheetUp .32s var(--spring) both}
.pk-overbox h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em}
.pk-overbox p{margin:0;color:var(--ink-2);line-height:1.5}
.pk-overbox .btn{width:100%;margin-top:6px}
.pk-bang{width:120px;height:120px;border-radius:50%;border:3px solid var(--ink);background:repeating-conic-gradient(var(--bb) 0 9deg,var(--sun) 9deg 18deg);box-shadow:inset 0 0 0 16px var(--sun-soft)}
body.motion .pk-bang{animation:pkBang .7s var(--spring) both}
@keyframes pkBang{0%{transform:scale(.2) rotate(-40deg);opacity:0}60%{transform:scale(1.15) rotate(8deg);opacity:1}100%{transform:none}}
.pk-sheetbox{align-items:stretch;text-align:left}
.pk-sheethead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pk-sheethead h2{font-size:22px}
.pk-sgrp h3{margin:6px 0 8px;font:800 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}
.pk-sno{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:56px;padding:6px 4px;background:#fff;border:var(--bw) solid var(--ink);border-radius:12px;font-family:var(--mono)}
.pk-sno i{font-style:normal;font-size:15px;font-weight:800}
.pk-sno span{font-size:12px;font-weight:700;min-height:14px;text-transform:lowercase}
.pk-sno.is-done{background:var(--mcs);box-shadow:inset 0 -4px 0 var(--mc)}
.pk-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));translate:-50% 0;z-index:90;max-width:calc(100vw - 32px);padding:10px 18px;background:var(--ink);color:#fff;border-radius:999px;box-shadow:var(--lift-sm);font-size:14px;font-weight:700;text-align:center;animation:pkToast .3s var(--pk-ease) both}
.pk-toast.is-out{opacity:0;transition:opacity .3s ease}
@keyframes pkToast{from{opacity:0;translate:-50% 14px}to{opacity:1;translate:-50% 0}}
.pk-askyes{background:var(--red);color:#fff}
.pk-askyes.is-plain{background:var(--sun);color:var(--ink)}

/* ── the result ──────────────────────────────────────────────────────── */
.pk-cert{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 22px;text-align:center;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden}
.pk-cert::before{content:'';position:absolute;inset:8px;border:var(--bw) dashed var(--line-2);border-radius:calc(var(--r-lg) - 8px);pointer-events:none}
.pk-cert > *{position:relative}
.pk-certhead{display:flex;justify-content:space-between;align-items:center;width:100%}
.pk-certset{font:700 12.5px var(--mono);color:var(--ink-3)}
.pk-certhead .pk-lvtab{margin-left:0}
.pk-cert h1{margin:0;font-size:clamp(28px,8vw,38px);letter-spacing:-.03em}
.pk-score{display:flex;align-items:baseline;justify-content:center;gap:4px;font-size:clamp(60px,18vw,92px);font-weight:800;line-height:1;letter-spacing:-.04em;font-variation-settings:'wdth' 86}
.pk-score span{font-size:.38em;letter-spacing:0;color:var(--ink-3)}
.pk-bigstamp{padding:7px 20px;border:4px double currentColor;border-radius:10px;font-size:clamp(20px,6vw,26px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;rotate:-5deg;opacity:0;scale:1.7;transition:scale .36s var(--spring),opacity .12s ease}
.pk-bigstamp.is-in{opacity:1;scale:1}
.pk-bigstamp.is-pass{color:var(--green)}
.pk-bigstamp.is-fail{color:var(--red)}
body:not(.motion) .pk-bigstamp{opacity:1;scale:1}
.pk-grade{margin:2px 0 0;font-size:19px;font-weight:800}
.pk-rows{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:6px;text-align:left}
.pk-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:11px;padding:10px 12px;background:var(--card-2);border:var(--bw) solid var(--ink);border-radius:14px}
.pk-row .pk-scico{width:38px;height:38px}
.pk-rowmid{display:flex;flex-direction:column;gap:6px;min-width:0}
.pk-rowmid b{font-size:15.5px;font-weight:800;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.pk-est{padding:2px 7px;border-radius:6px;background:var(--sun-soft);border:2px solid var(--ink);font:700 10px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.pk-rowbar{height:11px;border:var(--bw) solid var(--ink);border-radius:6px;background:#fff;overflow:hidden}
.pk-rowbar i{display:block;width:var(--w);height:100%;background:var(--mc);transform-origin:left;transform:scaleX(0)}
.pk-rowbar i.is-grow{transform:scaleX(1);transition:transform .9s var(--pk-ease) .25s}
body:not(.motion) .pk-rowbar i{transform:scaleX(1)}
.pk-rowpts{font-size:13px;font-weight:800;white-space:nowrap}
.pk-row > .pk-ic:last-child{color:var(--red)}
.pk-row.is-pass > .pk-ic:last-child{color:var(--green)}
.pk-tip{margin:2px 0 0;padding:9px 12px;border-radius:12px;background:var(--sun-soft);font-size:14.5px;font-weight:700}
.pk-newstamp{margin:0;padding:6px 12px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--sun);font-size:13.5px;font-weight:800;box-shadow:0 3px 0 var(--ink)}
@media (max-width:400px){.pk-row{grid-template-columns:auto 1fr auto;gap:8px}.pk-row .pk-rowpts{grid-column:2}.pk-row > .pk-ic:last-child{grid-row:1;grid-column:3}}
.pk-doneacts{display:flex;flex-direction:column;align-items:center;gap:10px}
.pk-doneacts .btn{width:100%}

/* the review */
.pk-review h1{margin:0;font-size:clamp(30px,8vw,40px);letter-spacing:-.03em}
.pk-filter{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;min-height:44px;padding:0 14px;background:#fff;border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:0 3px 0 var(--ink);font-size:14px;font-weight:800}
.pk-filter.is-on{background:var(--ink);color:var(--sun)}
.pk-revmod{padding:14px 16px 6px;background:#fff;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift)}
.pk-revhead{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:var(--bw) dashed var(--line-2)}
.pk-revhead h2{margin:0;flex:1;font-size:22px;font-weight:800}
.pk-revteil h3{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;font:800 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pk-allright{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--green-tx)}
.pk-revitem{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:var(--bw) dashed var(--line)}
.pk-revitem:first-of-type{border-top:0}
.pk-review.only-wrong .pk-revitem.is-ok,.pk-review.only-wrong .pk-allright{display:none}

/* the home card */
.pk-mcchips i:nth-child(1){--gb:var(--sun);color:var(--ink)}
.pk-mcchips i:nth-child(2){--gb:var(--blue)}
.pk-mcchips i:nth-child(3){--gb:#7C5CE0}
.pk-mcchips i:nth-child(4){--gb:#16A06B}
.pk-mcchips i:nth-child(5){--gb:#E5484D}
.pk-mcchips i:nth-child(6){--gb:#1E1B3A}
.pk-newtag{display:inline-block;margin-left:7px;padding:2px 7px;border:2px solid var(--ink);border-radius:6px;background:var(--red);color:#fff;font:800 10px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.pk-modecard.has-cur .pk-newtag{background:var(--sun);color:var(--ink)}

/* no animation for people who asked for none */
body:not(.motion) .pk *,body:not(.motion) .pk-over,body:not(.motion) .pk-overbox,body:not(.motion) .pk-toast{animation:none!important}
@media (prefers-reduced-motion:reduce){.pk *,.pk-over,.pk-overbox,.pk-toast{animation:none!important;transition:none!important}}

/* ── 16-modes.css ── */
/* ── Play, the list of modes, and the main game's own screen ─────────────
   The home screen has one button. It opens the list, where the main game is
   the sun-coloured card and the exam practice is the violet one, so the two
   things a newcomer should not miss cannot be missed. Motion follows the rest
   of the game: strong ease-out for things arriving, nothing decorative that
   keeps running while someone is reading, and all of it only with body.motion. */

/* ── the one button on the home screen ───────────────────────────────── */
.play-cta{display:flex;flex-direction:column;gap:10px}
.play-big{display:flex;align-items:center;gap:24px;width:100%;min-height:112px;padding:20px 28px;cursor:pointer;font:inherit;text-align:left;
  background:var(--sun);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);
  box-shadow:0 5px 0 var(--ink),0 12px 18px -12px rgba(29,25,52,.4);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.pg-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.pg-tiles{position:relative;flex:none;width:82px;height:64px}
.pg-tiles i{position:absolute;display:grid;place-items:center;width:48px;height:54px;font:800 29px var(--display);font-style:normal;
  background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink);transition:transform .18s var(--ease)}
.pg-tiles i:first-child{left:0;top:0;transform:rotate(-9deg)}
.pg-tiles i:last-child{right:0;bottom:0;transform:rotate(8deg);background:var(--blue);color:#fff}
.pg-label{font-family:var(--display);font-size:clamp(34px,9vw,44px);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variation-settings:'wdth' 86}
.pg-sub{font-size:14px;font-weight:600;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.play-big:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){
  .play-big:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink),0 14px 20px -12px rgba(29,25,52,.4)}
  .play-big:hover .pg-tiles i{transform:rotate(0)}
}
.play-big:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media (max-width:430px){.play-big{gap:18px;padding:18px;min-height:110px}.pg-tiles{width:64px;height:60px}.pg-tiles i{width:40px;height:48px;font-size:25px}.pg-sub{font-size:13px}}
@media(prefers-reduced-motion:reduce){.play-big,.pg-tiles i{transition:none}.play-big:hover{transform:none}}

/* ── the list of modes ───────────────────────────────────────────────── */
.md,.wkp{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}
.md-in,.wkp-in{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1120px;margin-inline:auto;
  padding:14px var(--gut) 48px}
.md-in > *,.wkp-in > *{width:100%}
.md-in > .backlink,.wkp-in > .backlink{width:auto;align-self:flex-start}
.md-head{display:flex;flex-direction:column;gap:6px}
.md-head h1,.wkp-ttl h1{margin:0;font-size:clamp(34px,8.4vw,54px);outline:none}
.md-sub,.wkp-ttl p{margin:0;font-size:16px;line-height:1.45;color:var(--ink-2)}
.md-feat{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
@media (min-width:760px){.md-feat{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mtile{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:clamp(76px,22vw,128px) minmax(0,1fr);
  align-items:center;gap:6px 14px;min-height:176px;padding:22px 16px 18px 12px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);
  transition:transform .14s cubic-bezier(0.23,1,0.32,1),box-shadow .14s cubic-bezier(0.23,1,0.32,1)}
.mtile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink),0 5px 8px -5px rgba(29,25,52,.3)}
@media (hover:hover) and (pointer:fine){.mtile:hover{transform:translateY(-4px)}.mtile:hover .mt-go{background:var(--ink);color:#fff}}
.mtile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mt-num{position:absolute;top:-2px;left:18px;z-index:2;width:34px;height:30px;border-radius:0 0 10px 10px;background:var(--ink);color:#fff;
  font:800 15px/30px var(--mono);text-align:center}
.mt-art{display:grid;place-items:center;align-self:center}
.mt-bomb,.mt-paper{display:block;width:100%;height:auto;overflow:visible}
.mt-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding-right:44px}
.mt-kick{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--sun);
  font:800 11.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.mt-kick .pk-newtag{margin-left:2px}
.mt-name{font-family:var(--display);font-size:clamp(28px,7.4vw,38px);font-weight:800;line-height:.95;letter-spacing:-.035em;
  font-variation-settings:'wdth' 84;overflow-wrap:anywhere}
.mt-desc{font-size:14.5px;line-height:1.4;font-weight:600}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mt-chips i{font-style:normal;padding:3px 9px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;color:var(--ink);font:800 12px var(--mono)}
.mt-go{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);
  border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:background .15s ease,color .15s ease}
.mt-go svg{width:18px;height:18px}
@media (min-width:560px){
  .mtile{grid-template-columns:clamp(110px,16vw,140px) minmax(0,1fr);min-height:196px;padding:24px 20px 22px 14px;gap:6px 18px}
  .mt-body{padding-right:52px}
  .mt-go{top:50%;translate:0 -50%;right:18px;width:44px;height:44px}
}

/* the main game: the colour of the lid */
.mt-wk{background:var(--sun);color:var(--ink)}
.mt-wk::before{content:'';position:absolute;inset:-60%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.36) 0deg 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 6%,transparent 38%);mask:radial-gradient(circle at 50% 50%,#000 6%,transparent 38%);
  translate:-22% 0}
.mt-wk .mt-desc{color:var(--ink-2)}
/* the exam: ruled violet paper */
.mt-pk{background:#5E43CF;color:#fff}
.mt-pk::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 16% 50%,rgba(255,255,255,.2),transparent 52%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.075) 0 2px,transparent 2px 26px)}
.mt-pk .mt-kick{background:#fff;color:#33208F}
.mt-pk .mt-desc{color:rgba(255,255,255,.94)}
.mt-pk .mt-chips i:nth-child(1){background:var(--sun)}
.mt-pk .mt-chips i:nth-child(2){background:#fff}
.mt-pk .mt-chips i:nth-child(3){background:#D9CFFF}
.mt-pk .mt-chips i:nth-child(4){background:#BDEBD6}
.mt-pk .mt-chips i:nth-child(5){background:#FAC9CB}
.mt-pk .mt-chips i:nth-child(6){background:#1E1B3A;color:#fff}

/* the drawings */
.mb-shadow{fill:rgba(29,25,52,.2)}
.mb-plate{fill:#fff;stroke:var(--ink);stroke-width:3}
.mb-ring{fill:none;stroke:#FF7A1A;stroke-width:10;stroke-dasharray:72 28;stroke-linecap:round;transform-box:fill-box;transform-origin:center;rotate:-90deg}
.mb-spaces{fill:none;stroke:rgba(255,255,255,.7);stroke-width:10;stroke-dasharray:2.6 15.4}
.mb-disc{fill:#272150}
.mb-shine{fill:none;stroke:rgba(255,255,255,.4);stroke-width:6;stroke-linecap:round}
.mb-neck{fill:var(--ink)}
.mb-cord{fill:none;stroke:#E8B86A;stroke-width:4;stroke-linecap:round}
.mb-spark{fill:var(--red);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.mb-tile rect{stroke:var(--ink);stroke-width:2.5}
.mb-tile text{fill:#fff;font-family:var(--display);font-weight:800;font-size:20px}
.mb-w rect{fill:var(--blue)}.mb-k rect{fill:var(--red)}
body.motion .mt-wk .mb-spark{animation:mbSpark 1.3s ease-in-out infinite}
@keyframes mbSpark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(40deg)}}
body.motion .mt-wk .mb-ring{animation:mbRun 9s linear infinite}
@keyframes mbRun{to{stroke-dashoffset:-100}}
.pp-sheet{fill:#fff;stroke:var(--ink);stroke-width:3}
.pp-head{fill:var(--ink)}
.pp-lines rect{fill:#D5DDF0}
.pp-tick{display:none}
.pp-t{stroke:var(--ink);stroke-width:2.5}
.pp-t + text,.mt-paper text{font-family:var(--display);font-weight:800;font-size:20px;fill:#fff}
.pp-a1{fill:var(--sun)}.pp-a2{fill:var(--blue)}.pp-b1{fill:#8E73F0}
.mt-paper g:nth-of-type(2) text{fill:var(--ink)}

/* ── the main game's own screen ─────────────────────────────────────── */
.wkp-head{display:flex;align-items:center;gap:16px}
.wkp-mark{flex:none;width:clamp(76px,20vw,104px)}
.wkp-ttl{min-width:0}
.wkp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.wkp-a{display:flex;flex-direction:column;gap:18px;min-width:0}
.wkp-b{min-width:0}
.wkp-a > *,.wkp-b > *{max-width:none;width:100%}
.wkp-a > .mainmodes{margin-bottom:12px}
@media (min-width:900px){.wkp-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px}}
@media (min-width:900px){.wkp-b{position:sticky;top:84px}}

/* the screens that arrive carry the same short entrance as every other */
body.motion .md.v2-in .mtile,body.motion .wkp.v2-in .wkp-a > *{animation:mdDeal .42s cubic-bezier(0.23,1,0.32,1) backwards}
body.motion .md.v2-in .mtile:nth-child(2){animation-delay:70ms}
body.motion .wkp.v2-in .wkp-a > *:nth-child(2){animation-delay:60ms}
body.motion .wkp.v2-in .wkp-a > *:nth-child(3){animation-delay:120ms}
@keyframes mdDeal{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* ── 17-event2.css ── */
/* ── the event, second half ──────────────────────────────────────────────
   Partners under the hero, the weekly challenge with its stamp card, news,
   the hall of fame by month, the sponsors, the final as it is played, and the
   bar, the countdown and the warning a finalist sees at the table. Then the
   dashboard's sponsor and final tabs. The look is the one the rest of the
   event page already has: ink outlines, cardboard edges, a sun-coloured
   accent. Motion only with body.motion. */

/* a sponsor's mark: logo, or letters on its colour */
.evx-mk{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:var(--bw) solid var(--ink);overflow:hidden;
  font-size:15px;font-weight:900;letter-spacing:-.02em;background:#fff}
.evx-mk.sm{width:32px;height:32px;border-radius:10px;font-size:12px}
.evx-mk.lg{width:56px;height:56px;border-radius:16px;font-size:20px}
.evx-mk.has-logo{padding:3px;background:#fff}
.evx-mk img{display:block;width:100%;height:100%;object-fit:contain}
.evx-mk.host{background:var(--ink);color:var(--sun)}
.evx-mk.host svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* partners */
.evx-partners{margin-top:16px;padding:12px 14px}
.evx-ph{margin:0 0 10px;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.evx-prow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.evx-pt{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 14px 6px 6px;border-radius:14px;border:var(--bw) solid var(--ink);background:var(--card-2)}
.evx-pt.t-title{background:var(--sun-soft);box-shadow:0 3px 0 var(--ink)}
.evx-ptx{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.evx-ptx b{font-size:14px;font-weight:900;overflow-wrap:anywhere}
.evx-ptx em{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3)}

/* the weekly challenge */
.evx-wh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.evx-wh .evx-h{margin:0}
.evx-wn{font:800 12px var(--mono);color:var(--ink-3);white-space:nowrap}
.evx-goal{margin:6px 0 0;font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.evx-wbar{margin-top:12px}
.evx-wbar i{background:linear-gradient(90deg,var(--sun-hi),var(--sun-lo))}
.evx-wbar.ok i{background:linear-gradient(90deg,var(--green-hi),var(--green))}
.evx-wmeta{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
.evx-wmeta b{color:var(--ink)}
.evx-stamps{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line)}
.evx-sth{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.evx-sth span{font-weight:800;color:var(--ink-2)}
.evx-sgrid{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:8px}
.evx-sgrid li{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:2px dashed var(--line-2);font:800 12px var(--mono);color:var(--ink-3)}
.evx-sgrid li.later{opacity:.55}
.evx-sgrid li.now{border:2px solid var(--ink);border-style:solid;background:var(--sun-soft);color:var(--ink)}
.evx-sgrid li.on{border:2px solid var(--ink);background:var(--green);color:#fff;box-shadow:0 2px 0 var(--ink);rotate:-6deg}
.evx-snote{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
body.motion .evx-sgrid li.on{animation:evxStamp .38s cubic-bezier(0.23,1,0.32,1) backwards}
@keyframes evxStamp{from{opacity:0;transform:scale(1.6) rotate(10deg)}to{opacity:1;transform:none}}

/* the move since yesterday */
.evx-mv{display:inline-block;margin-top:5px;font-style:normal;font-size:12px;font-weight:800}
.evx-mv.up{color:var(--green-tx)}
.evx-mv.down{color:var(--red-tx)}
.evx-sharecard{margin-top:12px}

/* news */
.evx-nl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.evx-nl li{padding:12px;border-radius:14px;border:1.5px solid var(--line-2);background:var(--card-2)}
.evx-nl li.pin{border-color:var(--ink);background:var(--sun-soft)}
.evx-nt{display:flex;align-items:center;gap:10px}
.evx-nwho{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.evx-nwho b{font-size:13px;font-weight:900;overflow-wrap:anywhere}
.evx-nwho em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.evx-nl h3{margin:8px 0 2px;font-size:16px;font-weight:900;letter-spacing:-.01em;overflow-wrap:anywhere}
.evx-nl p{margin:0;font-size:14px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}

/* the hall of fame */
.evx-month{margin-top:12px;border:var(--bw) solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card)}
.evx-mh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--ink);color:#fff;font-size:13px}
.evx-mh b{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evx-mh span{flex:none;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
.evx-month.closed .evx-mh{background:var(--sun);color:var(--ink)}
.evx-month.closed .evx-mh span{color:var(--ink)}
.evx-mt{list-style:none;margin:0;padding:0}
.evx-mt li{display:grid;grid-template-columns:24px 30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 12px;font-size:13.5px;font-weight:700;cursor:pointer}
.evx-mt li + li{border-top:1.5px dashed var(--line)}
.evx-mt li.r1 .evx-pl{background:var(--sun)}
.evx-mt li.r2 .evx-pl{background:#E4E8F2}
.evx-mt li.r3 .evx-pl{background:#F2D2B0}
.evx-mt li.evx-none{display:block;color:var(--ink-3);font-weight:600;cursor:default}
.evx-mt em{font-style:normal;font-size:12px;color:var(--ink-2);white-space:nowrap}
.evx-mt .evp-face.sm{border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.evx-mt li[data-profile]:hover{background:var(--card-2)}}

/* sponsors */
.evx-sg{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px}
@media (min-width:560px){.evx-sg{grid-template-columns:repeat(2,minmax(0,1fr))}.evx-sc.t-title{grid-column:1/-1}}
.evx-sc{--sc:#FFCB2E;position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;border-radius:16px;border:var(--bw) solid var(--ink);
  background:var(--card);box-shadow:var(--lift-sm);overflow:hidden}
.evx-sc{background:linear-gradient(180deg,color-mix(in srgb,var(--sc) 16%,#fff),var(--card) 62%)}
.evx-sc.t-title{box-shadow:0 4px 0 var(--ink),0 14px 22px -10px rgba(29,25,52,.3)}
.evx-sct{display:flex;align-items:center;gap:12px;min-width:0}
.evx-scn{display:flex;flex-direction:column;min-width:0}
.evx-scn em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3);margin-top:8px}
.evx-scn h3{margin:0;font-size:18px;font-weight:900;letter-spacing:-.01em;overflow-wrap:anywhere}
.evx-scb{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.evx-scp{margin:0;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--sun-soft);border:1.5px solid var(--sun-lo)}
.evx-scp span{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7A5600}
.evx-scp b{font-size:14px;font-weight:800;overflow-wrap:anywhere}
.evx-scl{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:var(--bw) solid var(--ink);background:#fff;
  font-size:14px;font-weight:800;color:var(--ink);text-decoration:none;box-shadow:0 3px 0 var(--ink)}
.evx-scl:active{transform:translateY(3px);box-shadow:none}
.evx-join{background:var(--blue-soft);border-style:dashed;box-shadow:none}
.evx-join{background:var(--blue-soft)}
.evx-join h3{margin:0;font-size:16px;font-weight:900}

/* the final */
.evx-fh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.evx-fh .evx-h{margin:0}
.evx-fst{flex:none;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--card-3)}
.evx-fst.live{background:var(--red);color:#fff}
.evx-fst.live::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#fff;vertical-align:1px}
body.motion .evx-fst.live::before{animation:evpBlink 1.2s ease-in-out infinite}
.evx-champ{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:12px;border-radius:14px;background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer}
.evx-champ em{display:block;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.evx-champ b{font-size:22px;font-weight:900}
.evx-fme{margin:12px 0 0;padding:12px;border-radius:14px;border:var(--bw) solid var(--ink);background:var(--green-soft)}
.evx-fme.out{background:var(--red-soft)}
.evx-fme > b{font-size:14px;font-weight:900;margin-right:10px}
.evx-fcount{font-size:12.5px;font-weight:800;margin-left:8px;color:var(--ink-2)}
.evx-fme p{margin:8px 0 0;font-size:13.5px;line-height:1.5}
.evx-fgo,.evx-fwatch{width:100%;margin-top:10px}
.evx-fr{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.evx-fr li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--card-2);font-size:14px;font-weight:700;cursor:pointer}
.evx-fr li.in{border-color:var(--green)}
.evx-fr li.out{opacity:.62}
.evx-fr em{font-style:normal;font-size:12px;color:var(--ink-2);white-space:nowrap}
.evx-fr .evp-face.sm{border-color:var(--ink)}
.evx-rounds{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.evx-rounds li{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line-2)}
.evx-rounds b{font-size:14px;font-weight:900}
.evx-rounds span{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.evx-rounds .ok{color:var(--green-tx);font-weight:800}
.evx-rounds .out{color:var(--red-tx)}

/* the sharing dialog */
.evx-shc{width:min(92vw,420px);padding:16px;outline:none}
.evx-shc canvas{display:block;width:100%;height:auto;max-height:65dvh;object-fit:contain;border-radius:14px}
.evx-shc{max-height:calc(100dvh - 32px);overflow-y:auto}
.evx-shc .evx-h{margin-bottom:12px}
.evx-sharecard{display:flex;align-items:center;gap:14px;padding:10px 16px;text-align:left;min-height:44px}
.evx-sharecard canvas{display:block;width:62px;height:auto;border-radius:6px;border:1px solid var(--ink)}
.evx-sharecard span{font-weight:800}

/* Partner recognition follows the competition, from its invitation to its final. */
.evx-credit{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding-top:14px;max-width:100%}
.evx-credit > span{font-size:12px;font-weight:700}
.evx-credit-partner{display:flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 8px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.evx-credit-partner b{overflow-wrap:anywhere;min-width:0}
.on-hero{margin-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.on-hero > span{color:#C9C4F0}
.on-poster{justify-content:flex-start;grid-column:1/-1;border-top:1px solid rgba(255,255,255,.2);margin-top:14px;color:#C9C4F0}
.on-poster .evx-credit-partner{font-size:12px}
.on-poster .evx-mk{width:26px;height:26px;font-size:10px}
.evx-pt{cursor:pointer}
.evx-partners{display:none}
.evx-sponsors{margin-top:24px;padding:24px;background:var(--card)}
.evx-sponsors > .evx-h{font-size:clamp(24px,4vw,32px);margin-bottom:8px}
.evx-sponsors > .evx-sub{max-width:65ch;margin-bottom:20px}
.evx-sg{gap:16px}
.evx-sc{padding:20px;gap:14px;background:color-mix(in srgb,var(--sc) 8%,#fff)}
.evx-sc.t-title{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:20px 32px;background:var(--ink);color:#fff;padding:28px}
.evx-sc.t-title .evx-sct{grid-column:1;grid-row:1/3;align-items:flex-start}
.evx-sc.t-title .evx-mk{width:80px;height:80px;font-size:28px;border-radius:20px}
.evx-sc.t-title .evx-scn h3{font-size:clamp(26px,4vw,36px);line-height:1.1;color:#fff;margin-top:8px}
.evx-sc.t-title .evx-scn em{color:#FFCB2E}
.evx-sc.t-title .evx-scb{grid-column:2;color:#E2DEFF}
.evx-sc.t-title .evx-scp{grid-column:2;color:var(--ink);padding:14px 16px}
.evx-sc.t-title .evx-scp b{font-size:20px;line-height:1.25}
.evx-sc.t-title .evx-scl{grid-column:2}
.evx-scn h3{font-size:23px;line-height:1.2;margin-top:4px}
.evx-join{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;background:var(--blue-soft);border-style:dashed;box-shadow:none}
.evx-join .evx-scb{flex:1;min-width:180px}
.evx-updates{margin-top:24px}
.evx-info > .evx-sec{align-self:start}
.evx-credit-partner:focus-visible,.evx-pt:focus-visible,.evx-sc:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:600px){.evx-sponsors{padding:16px}.evx-sc.t-title{display:flex;padding:20px}.evx-sc.t-title .evx-mk{width:56px;height:56px;font-size:20px}.evx-sc.t-title .evx-scn h3{font-size:26px}.evx-credit{justify-content:flex-start}.on-hero{justify-content:center}.evx-credit-partner{font-size:12px}.evx-join{flex-direction:column;align-items:stretch}.evx-join .evx-scb{min-width:0}}
.evx-shr{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.evx-shr .btn{flex:1}

/* the call to action on the home poster */
.evp-call{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22)}
.evp-call b{font-size:14.5px;font-weight:900}
.evp-call.hot{background:var(--sun);color:#2B1E00;border-color:#0E0B1F;box-shadow:0 3px 0 #0E0B1F}
.evp-call{grid-column:1/-1}
.evp-call .btn{flex:none}

/* ── at the final table ──────────────────────────────────────────────── */
.fp-dots{display:inline-flex;gap:5px;vertical-align:middle}
.fp-dots i{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;opacity:.45}
.fp-dots i.on{background:var(--red);border-color:var(--red);opacity:1}
.fp-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px var(--gut) 0;padding:7px 14px;border-radius:999px;background:var(--ink);color:#fff;
  border:var(--bw) solid #0E0B1F;box-shadow:0 3px 0 #0E0B1F;font-size:13px;white-space:nowrap;overflow:hidden}
.fp-bar .fp-dots i.on{border-color:var(--red-hi);background:var(--red-hi)}
.fp-support{width:calc(100% - 2 * var(--gut));max-width:1000px;align-self:center;min-width:0;margin:8px auto 0;padding:9px 12px;
  background:var(--card);border:var(--bw) solid var(--ink);border-radius:14px;text-align:left}
.fp-support-label{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--ink-2)}
#mSendTx{font-size:13px;font-weight:800}
#rChatGoTx,#gChatGoTx,#sChatGoTx{font-size:11px;font-weight:800}
.fp-support-list{display:flex;gap:10px;max-width:100%;min-width:0;margin:0;padding:0 0 3px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
.fp-support-list:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.fp-partner{display:flex;align-items:center;gap:8px;flex:none;max-width:240px;padding:4px 10px 4px 4px;border-radius:10px;background:var(--card-2)}
.fp-partner.primary{background:var(--sun-soft);border:1px solid var(--sun-lo)}
.fp-partner b{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.fp-partner-mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:8px;font-size:11px;font-weight:800;background:var(--blue);color:#fff;overflow:hidden}
.fp-partner-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.fp-hero .fp-support{flex-basis:100%;width:100%;margin:6px 0 0}
#spectate .fp-support{width:100%;margin:12px 0}
@media(min-width:920px){
  #mpgame.final-table{grid-template-rows:auto auto auto minmax(0,1fr)}
  #mpgame.final-table > .fp-bar,#mpgame.final-table > .fp-support{grid-column:1 / -1}
  #mpgame.final-table > .stage,#mpgame.final-table > #sideChat{grid-row:4}
}
@media(max-width:919px){
  #mpgame.final-table .hud .seats{flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
  #mpgame.final-table .hud .seat{flex:0 0 auto}
  #mpgame.final-table .hud .spacer{min-width:0;flex:0 0 0}
}
@media(max-height:600px){
  #mpgame.final-table > .fp-support{padding:4px 10px;margin-top:4px}
  #mpgame.final-table .fp-support-label{display:none}
  #mpgame.final-table .fp-bar{padding:5px 10px;font-size:11px}
}
@media(max-height:500px){
  #mpgame.final-table .bombwrap{width:104px;height:104px}
  #mpgame.final-table .stage{gap:4px;padding-top:4px}
}
body.kbd .fp-support{padding:6px 10px;margin-top:4px}
body.kbd .fp-support-label{display:none}
@media(max-width:430px){.fp-support{padding:8px 10px}.fp-partner{max-width:210px}.fp-partner b{font-size:12px}}
.fp-b-no{flex:none;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--sun)}
.fp-b-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700}
body.is-final #rCodeBox,body.is-final #rSetBox,body.is-final #rVoiceBox,body.is-final #botPick,body.is-final #botDrop,body.is-final #rCopy{display:none!important}
body.fp-nochat #roomChat,body.fp-nochat #chatBtn,body.fp-nochat #sChatLog,body.fp-nochat #sideChat .chatbar,body.fp-nochat #vJoinG{display:none!important}
.fp-hero{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px;border-radius:var(--r-lg);border:var(--bw) solid var(--ink);color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,203,46,.28),transparent 55%),#1D1934;box-shadow:0 5px 0 var(--ink),0 18px 34px rgba(29,25,52,.25)}
.fp-hero .fp-trophy{flex:none;width:52px;height:52px;border-radius:16px;background:var(--sun)}
.fp-hero .fp-trophy svg{width:28px;height:28px}
.fp-hero-tx{flex:1 1 200px;min-width:0}
.fp-hero-k{display:block;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.fp-hero h2{margin:2px 0 4px;font-size:22px;font-weight:900;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.fp-hero p{margin:0;font-size:13.5px;line-height:1.45;color:#C9C4F0}
.fp-hero .fp-support{order:4;color:var(--ink)}
.fp-hero .fp-support-label{margin:0 0 6px;color:var(--ink-2);font-size:12px}
.fp-hero .fp-dots{flex:none;align-self:flex-start;margin-top:4px}
.fp-hero .fp-dots i.on{border-color:var(--red-hi);background:var(--red-hi)}
@media (max-width:480px){.fp-hero{flex-wrap:wrap}.fp-hero .fp-dots{order:3}}
.fp-count{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(29,25,52,.62),rgba(29,25,52,.82))}
.fp-count b{font-size:clamp(120px,32vw,240px);font-weight:900;line-height:1;color:var(--sun);text-shadow:0 8px 0 #0E0B1F}
.fp-count span{font-size:18px;font-weight:800;color:#fff;letter-spacing:.04em}
.fp-invite{position:fixed;z-index:70;left:50%;translate:-50% 0;bottom:calc(var(--dockh,0px) + 16px);display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  width:min(calc(100vw - 24px),520px);padding:10px 12px;border-radius:16px;background:var(--sun);color:#2B1E00;border:var(--bw) solid #0E0B1F;box-shadow:0 5px 0 #0E0B1F,0 16px 30px rgba(29,25,52,.35)}
.fp-invite b{flex:1;min-width:180px;font-size:14.5px;font-weight:900}
.fp-trophy{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fff;border:var(--bw) solid #0E0B1F}
.fp-trophy svg{width:20px;height:20px;fill:none;stroke:#3A2800;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.motion .fp-invite{animation:fpRise .36s cubic-bezier(0.23,1,0.32,1)}
@keyframes fpRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fp-layer{z-index:120}
.fp-card{max-width:420px;padding:28px 22px 22px;text-align:center;outline:none}
.fp-card h2{margin:6px 0 8px;font-size:24px;letter-spacing:-.02em}
.fp-card p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.fp-ic{display:grid;place-items:center;margin:0 auto;width:68px;height:68px;border-radius:50%;border:var(--bw) solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.fp-ic svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fp-card.warn .fp-ic{background:var(--sun);color:var(--ink)}
.fp-card.out .fp-ic{background:var(--red);color:#fff}
.fp-card .btn{width:100%}
.fp-alerts{position:fixed;z-index:130;top:76px;right:12px;display:grid;gap:8px;width:min(380px,calc(100vw - 24px));pointer-events:none}
.fp-alert{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff;border:2px solid var(--sun);
  box-shadow:0 8px 24px rgba(29,25,52,.4);font-size:14px;font-weight:700;line-height:1.35;cursor:pointer}
.fp-alert.hot{border-color:var(--red-hi);background:#3B1115}
.fp-alert span{flex:1;min-width:0;overflow-wrap:anywhere}
.fp-alert-x{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer}

/* ── the dashboard: sponsors and the final ───────────────────────────── */
.adm-h3{margin:0 0 4px;font-size:20px;font-weight:900;letter-spacing:-.01em}
.adm-evpick{margin:10px 0}
.adm-det{margin:10px 0;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--card);overflow:hidden}
.adm-det.inner{margin:8px 0 0;border-width:1.5px;border-color:var(--line-2)}
.adm-det.fresh{background:var(--sun-soft)}
.adm-det > summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:48px;padding:10px 14px;list-style:none;cursor:pointer;font-size:15px;font-weight:800}
.adm-det > summary::-webkit-details-marker{display:none}
.adm-det > summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);translate:0 -2px;transition:transform .15s ease}
.adm-det[open] > summary::after{transform:rotate(-135deg);translate:0 2px}
.adm-detin{display:grid;gap:12px;padding:12px 14px 14px;border-top:1.5px dashed var(--line-2)}
.adm-sub2{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.adm-form{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:760px){.adm-form{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-form .wide{grid-column:1/-1}}
.adm-form label.adm-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:var(--ink-2)}
.adm-form input[type=text],.adm-form input[type=url],.adm-form input[type=number],.adm-form textarea,.adm-form select{font:inherit;font-size:15px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:10px;border:var(--bw) solid var(--ink);background:#fff;min-width:0;width:100%}
.adm-form input[type=color]{width:100%;height:44px;padding:3px;border-radius:10px;border:var(--bw) solid var(--ink);background:#fff}
.adm-form textarea{min-height:70px;resize:vertical}
.adm-check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.adm-check input{width:20px;height:20px}
.adm-logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.adm-logo .adm-note{flex-basis:100%;margin:0}
.adm-logoprev{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;border:var(--bw) solid var(--ink);overflow:hidden;font-size:20px;font-weight:900;background:#fff}
.adm-logoprev img{width:100%;height:100%;object-fit:contain}
.adm-file{font:inherit;font-size:14px;max-width:100%}
.adm-posts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.adm-posts li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line-2)}
.adm-posts li.off{opacity:.6}
.adm-posts li b{flex:1;min-width:140px;overflow-wrap:anywhere}
.adm-mh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-mh h3{margin:0}
.adm-roster{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.adm-roster li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line-2)}
.adm-roster li.in{border-color:var(--green)}
.adm-roster li.out,.adm-roster li.dq,.adm-roster li.absent{opacity:.72}
.adm-roster li b{flex:1;min-width:110px;overflow-wrap:anywhere}
.adm-flive{padding:12px;border-radius:14px;border:var(--bw) solid var(--ink);background:var(--card)}
.adm-lh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-lh h3{margin:0}
.adm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.adm-chip{padding:4px 10px;border-radius:999px;border:1.5px solid var(--green);background:var(--green-soft);font:800 12px var(--mono);color:var(--green-tx)}
.adm-chip.warn{border-color:var(--sun-lo);background:var(--sun-soft);color:#7A5600}
.adm-chip.bad{border-color:var(--red);background:var(--red-soft);color:var(--red-tx)}
.adm-result,.adm-hist{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.adm-result li,.adm-hist li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--card-2);border:1.5px solid var(--line-2)}
.adm-result li b,.adm-hist li b{flex:1;min-width:110px}
.adm-l-op.hot{color:var(--red-tx)}
.adm-help{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.adm-form .adm-field{align-items:stretch;text-align:left}
.adm-form .adm-field > span{text-align:left}

/* ── 18-eventprep.css ── */
/* Event desk: printed pass and the organiser's checklist. */
.ep-pass{margin-top:14px}
.ep-sub{margin:6px 0 18px;color:var(--ink-2);line-height:1.6}
.ep-format{font-size:14px;line-height:1.6;padding:12px 0;margin:0 0 16px;border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);font-weight:750}
.ep-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.ep-schedule{min-width:0}
.ep-schedule dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;align-items:baseline}
.ep-schedule dt{color:var(--ink-2);font-size:13px;font-weight:700}
.ep-schedule dd{margin:0;font-weight:850;line-height:1.5;font-variant-numeric:tabular-nums}
.ep-schedule .btn{display:inline-flex;margin:10px 8px 0 0;text-decoration:none;max-width:100%;white-space:normal}
.ep-desk{min-width:0;padding-left:24px;border-left:1px dashed var(--line-2)}
.ep-desk p{line-height:1.6;margin:8px 0}
.ep-hint{display:block;color:var(--ink-2);font-size:13px;line-height:1.6;margin:8px 0}
.ep-deadline{font-size:13px;font-weight:750;color:var(--ink-2)}
.ep-stamp{display:inline-block;border:2px solid var(--green-tx);color:var(--green-tx);padding:7px 12px;border-radius:8px;font-size:15px}
.ep-consent{display:flex;align-items:flex-start;gap:12px;padding:12px 0;min-height:44px;font-size:14px;line-height:1.6;cursor:pointer}
.ep-consent input{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin:2px 0 0;padding:0;accent-color:var(--blue);border-radius:4px}
.ep-consent span{flex:1;min-width:0}
.ep-feedback{font-size:14px;line-height:1.6;margin:10px 0;color:var(--green-tx);overflow-wrap:anywhere;min-height:0}
.ep-feedback:empty{display:none}
.ep-feedback.bad{color:var(--red-tx)}
.ep-notice{margin-top:14px;background:var(--blue-soft)}
.ep-notice.changed{background:var(--sun-soft)}
.ep-notice p{margin:8px 0 0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.ep-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.ep-admin-section{min-width:0;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);padding:18px;box-shadow:var(--lift-sm)}
.ep-editor form{grid-column:2;grid-row:1 / span 2}
.ep-intro{color:var(--ink-2);margin:0;line-height:1.6}
#admPrep>h2{margin:0;font-family:var(--display);font-size:clamp(25px,4vw,32px)}
.ep-admin-section h3{font-family:var(--display);font-size:22px;margin:0 0 14px}
.ep-admin-section h3:not(:first-child){margin-top:24px}
.ep-field{display:flex;flex-direction:column;gap:7px;margin:14px 0;font-size:14px;font-weight:750;min-width:0}
.ep-field input,.ep-field textarea,.ep-field select{width:100%;min-width:0;max-width:100%;min-height:44px;font:inherit;font-weight:500;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:10px 12px}
.ep-field textarea{resize:vertical;line-height:1.6}
.ep-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.ep-checklist,.ep-attendance{list-style:none;margin:0;padding:0}
.ep-checklist li{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);line-height:1.5;font-size:14px}
.ep-checklist li>span:last-child{min-width:0}
.ep-check-mark{min-width:116px;flex-shrink:0;font-weight:800;color:var(--red-tx)}
.ep-check-mark.ready{color:var(--green-tx)}
.ep-attendance li{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.ep-attendance li>div{min-width:0;overflow-wrap:anywhere}
.ep-attendance .ep-hint{margin:2px 0 0}
.ep-att-state{font-size:13px;font-weight:750;color:var(--ink-2);text-align:right}
.ep-att-state.confirmed{color:var(--green-tx)}
.ep-roster-count{font-weight:750;line-height:1.6}
.ep-pass button:disabled,.ep-admin-section button:disabled{cursor:default}
@media(max-width:700px){
  .ep-editor{grid-template-columns:minmax(0,1fr)}
  .ep-editor form{grid-column:auto;grid-row:auto}
  .ep-grid,.ep-fields{grid-template-columns:minmax(0,1fr);gap:14px}
  .ep-desk{border-left:0;border-top:1.5px dashed var(--line-2);padding:14px 0 0}
  .ep-schedule dl{grid-template-columns:minmax(0,1fr);gap:4px}
  .ep-schedule dt:not(:first-child){margin-top:10px}
  .ep-pass .btn{width:100%;justify-content:center}
  .ep-checklist li{gap:10px;align-items:flex-start}
  .ep-check-mark{min-width:96px;font-size:12px}
  .ep-fields .ep-field{margin:6px 0}
}

/* ── 19-event-redesign.css ── */
/* Turnierkarte. Existing Spieleschachtel materials, distinct task compositions. */
.play-big{background:var(--card);gap:20px;padding:22px 26px;min-height:120px}
.pg-control{display:grid;place-items:center;flex:none;width:78px;height:78px;color:var(--ink);background:var(--blue-soft);border:2px solid var(--ink);border-radius:24px;transform:rotate(-5deg);transition:transform .18s var(--ease)}
.pg-control svg{width:54px;height:54px}
.pg-copy{flex:1}.pg-start{display:grid;place-items:center;flex:none;width:52px;height:52px;background:var(--sun);border:2px solid var(--ink);border-radius:50%;box-shadow:0 3px 0 var(--ink)}
.pg-start svg{width:25px;height:25px;fill:var(--ink)}
.pg-label{font-size:clamp(32px,6vw,42px)}
@media(hover:hover) and (pointer:fine){.play-big:hover .pg-control{transform:rotate(0)}}
.funk-chat-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;color:var(--ink)}.funk-chat-icon svg{width:26px;height:26px}
.evx-art{display:grid;place-items:center;flex:none}.evx-art svg{width:28px;height:28px}
.evx-h,.evx-stamp,.evp-yh,.evx-sub,.evx-sth,.evx-wh{overflow-wrap:anywhere}.evx-wh,.evx-sth{flex-wrap:wrap}
.evx-player{display:flex;gap:10px;align-items:center;margin:18px 0 10px;font-size:17px;min-width:0}.evx-player b{overflow-wrap:anywhere}
.evx-you{padding:24px;background:var(--card)}.evx-you .evx-h{font-size:26px}
.evx-stamp{display:block;margin:12px 0 18px;padding:0;border:0;border-radius:0;background:none!important;transform:none;font-size:15px;line-height:1.45}
.evx-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--sun-soft)}
.evx-road{position:relative;min-width:0;padding:16px;background:var(--sun-soft)}
.evx-road:nth-child(even){background:var(--blue-soft)}
.evx-road + .evx-road{margin:0;padding:16px;border-top:0;border-left:2px dashed var(--ink)}
.evx-roadh{font-size:16px}.evx-position{display:flex;flex-direction:column;gap:3px;margin:12px 0}
.evx-position strong{font:800 54px/1 var(--display);letter-spacing:-.04em}.evx-position span{font-size:12px;font-weight:700;color:var(--ink-2)}
.evx-score{margin:0 0 12px;font-size:13px;color:var(--ink-2)}.evx-score b{font-size:17px;color:var(--ink)}
.evx-gap{padding-top:12px;border-top:1px solid var(--line-2);line-height:1.5;min-height:48px}
.evx-sharecard{width:100%;justify-content:center;gap:12px;margin-top:18px;background:var(--blue-soft);border-radius:12px;padding:12px;box-shadow:0 3px 0 var(--ink);font-size:15px}
.evx-credit{display:block;text-align:left;margin-top:18px;padding:16px 0 0}.evx-credit > span{display:block;margin-bottom:12px;font-size:13px}
.evx-credit-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.evx-credit-partner{width:100%;min-width:0;min-height:64px;gap:12px;padding:10px 12px;background:transparent;border:0;border-radius:0;color:inherit;text-align:left}
.evx-credit-partner b{font-size:14px;line-height:1.35;word-break:normal;overflow-wrap:break-word;text-wrap:balance}
.on-poster .evx-credit-partner{font-size:14px}.on-poster .evx-mk,.on-hero .evx-mk{width:42px;height:42px;font-size:14px;border-color:#fff;border-radius:12px}
.evx-credit-partner:hover,.evx-credit-partner:focus-visible{background:rgba(255,255,255,.08);border-radius:12px}
.evp-you{background:transparent!important;border:0!important;border-radius:0!important;padding:16px 0!important;border-top:1px solid rgba(255,255,255,.25)!important;margin-top:18px}
.evp-status{display:flex;align-items:center;gap:12px}.evp-yh{font-size:17px!important;line-height:1.4;margin:0!important}
.evp-seal{display:grid;place-items:center;flex:none;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:var(--sun);color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.evp-seal svg,.evp-rglyph svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.evp-you.in .evp-seal{background:var(--green-soft)}
.evp-yrows{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important;margin-top:16px!important}
.evp-yr{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center!important;gap:10px 18px!important;min-width:0;min-height:148px;padding:16px!important;border:2px solid var(--ink);border-radius:16px!important;background:var(--sun-soft)!important;color:var(--ink);text-align:left;font-family:inherit;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.evp-yr:nth-child(even){background:var(--blue-soft)!important}.evp-rhead{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--ink-3)}
.evp-yr em{font-size:14px!important;color:var(--ink)!important;overflow-wrap:anywhere}.evp-rglyph{display:grid;place-items:center;flex:none;color:var(--ink-2)}
.evp-rank{display:grid;place-items:center;width:72px;height:72px;border:2px solid var(--ink);border-radius:50%;background:var(--card);box-shadow:0 3px 0 var(--ink);font:800 var(--rank-size,44px)/1 var(--display);letter-spacing:-.04em}.evp-yr.ok .evp-rank{background:var(--sun)}.evp-yr.unranked .evp-rank{border-style:dashed;border-color:var(--ink-3);background:transparent;box-shadow:none;color:var(--ink-2)}.evp-yr .evp-rcaption{font-size:17px!important;line-height:1.3;color:var(--ink)!important;white-space:normal;overflow-wrap:anywhere}
.evp-yr:focus-visible{outline:3px solid var(--sun);outline-offset:5px}.evp-yr:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
@media(hover:hover) and (pointer:fine){.evp-yr:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(0,0,0,.35)}}
@media(min-width:960px){#eventBox .evp-you{grid-column:1/-1}}
@media(max-width:600px){.evp-yrows{gap:10px!important}.evp-yr{padding:12px!important;min-height:190px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;justify-items:start;gap:10px!important}.evp-rank{width:56px;height:56px;font-size:var(--rank-size-mobile,34px)}.evp-yr .evp-rcaption{font-size:13px!important}.evp-rhead{width:100%;gap:6px}.evp-yr em{font-size:12px!important}.evp-rglyph svg{width:20px;height:20px}.evp-yh{font-size:15px!important}}
.evx-sponsors{padding:28px}.evx-sponsors > .evx-sub{max-width:56ch}
.evx-sg{gap:16px}.evx-sc{padding:24px;background:var(--card);border-radius:18px;gap:14px}
.evx-sc.t-title{display:flex;flex-direction:column;gap:16px;background:var(--blue-soft);color:var(--ink);padding:28px}
.evx-sc.t-title .evx-sct{grid-column:auto;grid-row:auto;align-items:center;gap:22px}
.evx-sc .evx-mk{width:68px;height:68px;font-size:24px;border-radius:18px;box-shadow:0 4px 0 var(--ink)}
.evx-sc.t-title .evx-mk{width:96px;height:96px;font-size:32px;border-radius:24px}
.evx-scn{flex:1;min-width:0}.evx-scn h3,.evx-sc.t-title .evx-scn h3{margin:0;color:var(--ink);font-size:clamp(20px,2.7vw,34px);line-height:1.14;word-break:normal;overflow-wrap:break-word;text-wrap:balance}
.evx-sc.t-title .evx-scn em{color:var(--blue-tx)}.evx-scn em{font-size:13px;letter-spacing:0;text-transform:none}
.evx-sc.t-title .evx-scb{grid-column:auto;color:var(--ink-2);font-size:16px;max-width:60ch}
.evx-scl{border-radius:12px;background:var(--sun);margin-top:auto}.evx-join{padding:20px;background:var(--card-2);border:1px dashed var(--ink-3);gap:16px}
.evx-week{padding:24px;background:#FFFBEF}.evx-week > .evx-art{float:right;width:64px;height:64px;background:var(--sun);border:2px solid var(--ink);border-radius:18px;transform:rotate(5deg);margin:14px 0 12px 14px}
.evx-week > .evx-art svg{width:38px;height:38px}.evx-goal{font-size:22px;line-height:1.25;max-width:22ch;margin:18px 0}
.evx-wbar{clear:both}.evx-stamps{margin-top:22px;padding-top:18px}.evx-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:12px;margin-top:18px}
.evx-sgrid li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;width:auto;height:72px;aspect-ratio:auto;box-sizing:border-box;border:1.5px dashed var(--ink-3);border-radius:12px;background:transparent;color:var(--ink-3);font-size:11px}
.evx-sgrid li .evx-art svg{width:24px;height:24px}.evx-sgrid li::after,.evx-sgrid li::before{display:none!important}
.evx-sgrid li.on{background:var(--sun);border:2px solid var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink);rotate:0deg;transform:none}
body.motion .evx-sgrid li.on{animation:none}
.evx-grid.evx-single{grid-template-columns:minmax(0,1fr)}
.evx-sgrid li.on:nth-child(even){transform:none;background:var(--green-soft)}.evx-sgrid li.now{border:2px solid var(--blue);background:var(--blue-soft);color:var(--blue-tx)}
.evx-sgrid li.later{opacity:1;color:var(--ink-3)}.evx-sth{gap:8px}.evx-snote{line-height:1.5;margin-top:16px}
.evx-ladders{padding:24px}.evx-ladders > .evx-h{font-size:28px}.evx-boards{gap:20px;margin-top:20px}.evx-board{border-radius:16px}
.evx-board h3{padding:16px;background:var(--sun-soft);color:var(--ink);font-size:17px;letter-spacing:0;text-transform:none}.evx-board:nth-child(even) h3{background:var(--blue-soft)}
.evx-board li{min-height:52px;padding:10px 16px;gap:10px}.evx-pl{border-radius:50%;width:28px;height:28px}
.evx-shc{width:min(92vw,460px)}.evx-shc canvas{border-radius:12px}.evx-shc .evx-h{font-size:24px}
.ep-content{margin-top:22px}.ep-content summary{font-size:17px;font-weight:800;cursor:pointer;padding:12px 0;min-height:44px}
.ep-content-group{padding:16px 0;border-top:1px solid var(--line-2)}.ep-content-group summary{font-size:15px}.ep-content-lang{display:flex;gap:8px;align-items:center;margin:12px 0}.ep-content-lang select{min-height:44px}
.ep-content .ep-fields{margin-top:12px}.ep-content textarea{resize:vertical;min-height:86px}.ep-content label{margin-top:10px}
/* Paired desktop panels share a row; mobile keeps the original reading order. */
.evx-grid{align-items:stretch}.evx-sec{overflow-wrap:anywhere}.evx-info > .evx-sec{align-self:stretch}
@media(min-width:900px){.evx-journey > .evx-col{display:contents}.evx-journey > .evx-col > .evx-sec{order:var(--panel-order,0)}.evx-journey .evx-unpaired{grid-column:1/-1}}
@media(max-width:600px){.evx-you,.evx-week,.evx-ladders,.evx-sponsors{padding:18px}.evx-sc,.evx-sc.t-title{padding:20px}.evx-sc .evx-sct{flex-direction:column;align-items:flex-start;gap:16px}.evx-sc.t-title .evx-sct{align-items:flex-start;gap:18px}.evx-sc.t-title .evx-mk{width:76px;height:76px}.evx-scn{width:100%}.evx-scn h3,.evx-sc.t-title .evx-scn h3{font-size:clamp(20px,6.5vw,30px)}.evx-credit-wall{grid-template-columns:1fr}.evx-credit-partner{min-height:54px;padding:4px 0}.evx-credit > span{margin-bottom:8px}.evx-road,.evx-road+.evx-road{padding:13px}.evx-position strong{font-size:46px}.evx-goal{font-size:20px}.evx-board li{grid-template-columns:28px 30px minmax(0,1fr);padding:10px 12px;gap:8px}.evx-board li em{grid-column:3;white-space:normal}.evx-board li .evx-nm{white-space:normal;overflow-wrap:anywhere}.evx-board .evx-nm>:first-child{overflow:visible}.evx-board li em{font-size:12px}.play-big{padding:18px;gap:14px}.pg-control{width:60px;height:60px;border-radius:18px}.pg-control svg{width:42px;height:42px}.pg-start{width:38px;height:38px}.pg-start svg{width:20px;height:20px}.pg-sub{font-size:12px}}
@media(max-width:360px){.evx-routes{grid-template-columns:1fr}.evx-road+.evx-road{border-left:0;border-top:2px dashed var(--ink)}.pg-start{display:none}}
@media(prefers-reduced-motion:reduce){.pg-control,.evp-yr{transition:none}.play-big:hover .pg-control{transform:rotate(-5deg)}.evp-yr:hover{transform:none}}

/* ── 20-admin-layout.css ── */
/* Operate workspace inside the Spieleschachtel world. */
#admin .adm-in{max-width:1380px;gap:22px;padding-bottom:96px}
#admin .adm-head{padding:20px 24px;box-shadow:0 4px 0 var(--ink);gap:16px}
#admin .adm-h{font-size:30px;line-height:1.15}
#admin .adm-kick{display:none}
#admin .adm-workspace{display:grid;grid-template-columns:206px minmax(0,1fr);gap:24px;align-items:start}
#admin .adm-nav{position:sticky;top:84px;min-width:0;background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 var(--ink);padding:12px}
#admin .adm-tabs{display:flex;flex-direction:column;align-self:stretch;width:100%;overflow:visible;border:0;border-radius:0;padding:0;box-shadow:none;background:transparent;gap:4px}
#admin .adm-nav-label{display:block;padding:18px 10px 6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
#admin .adm-nav-label:first-child{padding-top:6px}
#admin .adm-tabs button{width:100%;min-height:42px;border:0;border-radius:10px;box-shadow:none;text-align:left;justify-content:flex-start;padding:10px 12px;font-size:14px;font-weight:700;white-space:normal;overflow-wrap:anywhere;background:transparent;color:var(--ink-2)}
#admin .adm-tabs button[aria-selected="true"]{background:var(--sun);color:var(--ink);box-shadow:none}
#admin .adm-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#admin .adm-content{display:flex;flex-direction:column;gap:20px;min-width:0}
#admin .adm-context{padding:0 0 16px;border-bottom:1.5px solid var(--line-2);scroll-margin-top:96px}
#admin .adm-context h2{margin:0 0 6px;font-size:26px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
#admin .adm-context p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;max-width:65ch}
#admin .adm-mobile-nav{display:none}
#admin[data-sponsor-only="true"] .adm-workspace{grid-template-columns:minmax(0,1fr)}
#admin .adm-pane{min-width:0;gap:18px}
#admin .adm-pane input,#admin .adm-pane textarea,#admin .adm-pane select{max-width:100%;min-width:0}
#admin .adm-row{flex-wrap:wrap}
#admin .adm-team,#admin .adm-team li{min-width:0;max-width:100%}
#admin .adm-note,#admin .adm-form-hint{font-size:14px;font-weight:500;color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere}
#admin .adm-form-hint{margin:0 0 12px;max-width:65ch}
#admin .adm-group h3{font-size:18px;line-height:1.35;overflow-wrap:anywhere}
#admin .adm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
#admin .adm-stat{box-shadow:0 3px 0 var(--ink)}
#admin .adm-stat b{font-size:28px}
#admin .adm-split{grid-template-columns:minmax(0,1fr)}
#admin .adm-list{max-height:42vh}
#admin .adm-event-editor{gap:18px;background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:22px;box-shadow:0 3px 0 var(--ink)}
#admin .adm-event-editor>h3{font-size:21px}
#admin .adm-event-state{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:10px;background:var(--blue-soft);font-size:13px;color:var(--ink-2)}
#admin .adm-event-state b{font-size:14px;color:var(--ink)}
#admin .adm-event-state.live{background:var(--green-soft)}
#admin .adm-event-state.cancelled{background:var(--card-2)}
#admin .adm-evform{display:flex;flex-direction:column;gap:22px}
#admin .adm-event-fields{min-width:0;margin:0;padding:16px;border:1.5px solid var(--line-2);border-radius:12px}
#admin .adm-event-fields legend{padding:0 7px;font-size:17px;font-weight:800}
#admin .adm-event-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#admin .adm-event-fields-grid>label{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:14px;font-weight:700}
#admin .adm-event-fields-grid>.wide{grid-column:1/-1}
#admin .adm-event-fields-grid input,#admin .adm-event-fields-grid textarea{width:100%;min-height:44px;border:1.5px solid var(--ink);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:var(--card)}
#admin .adm-event-fields-grid textarea{min-height:110px;resize:vertical;line-height:1.6}
#admin .adm-evacts,#admin .adm-publish-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#admin .adm-publish-actions{border-top:1.5px solid var(--line-2);padding-top:16px}
#admin .adm-advanced{border-top:1.5px solid var(--line-2);padding-top:16px}
#admin .adm-advanced summary{font-size:14px;font-weight:750;cursor:pointer;min-height:36px}
#admin .adm-advanced[open] summary{margin-bottom:8px}
#admin .adm-evfeedback{margin:0;font-weight:650;line-height:1.6}
#admin .adm-evfeedback:empty{display:none}
#admin .adm-evlist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:16px;min-width:0}
#admin .adm-evlist li>b{font-size:15px;overflow-wrap:anywhere}
#admin .adm-evlist li>.num{grid-column:2;font-size:12px;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
#admin .adm-evlist li>.btn{grid-column:3;grid-row:1/span 2}
#admin .ep-editor{grid-template-columns:minmax(0,1fr);gap:22px;align-items:stretch}
#admin .ep-editor form{grid-column:auto;grid-row:auto}
#admin .ep-admin-section{padding:22px;box-shadow:0 3px 0 var(--ink)}
#admin .ep-admin-section h3{font-size:19px}
#admin #admPrep>h2{display:none}
#admin .ep-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#admin .ep-checklist li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);background:var(--card-2);border-radius:10px;padding:14px;font-size:13px}
#admin .ep-check-mark{min-width:0;font-size:12px;border-radius:6px;background:var(--sun-soft);padding:3px 7px}
#admin .ep-check-mark.ready{background:var(--green-soft)}
#admin .ep-setting-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#admin .ep-settings-group{min-width:0;border:0;padding:0;margin:0}
#admin .ep-settings-group legend{padding:0;font-size:19px;line-height:1.35;font-weight:800;margin-bottom:6px}
#admin .ep-settings-group .ep-fields{grid-template-columns:minmax(0,1fr);gap:0}
#admin .ep-setting-sections>.ep-settings-group+fieldset{padding-left:24px;border-left:1.5px solid var(--line-2)}
#admin .ep-settings-group .ep-field{font-weight:700}
#admin .ep-content{margin-top:24px;border-top:1.5px solid var(--line-2);padding-top:20px}
#admin .ep-content>summary{font-size:19px;font-weight:800;min-height:40px;cursor:pointer}
#admin .ep-content-group{margin-top:12px;border:1.5px solid var(--line-2);border-radius:12px;padding:14px 16px;background:var(--card)}
#admin .ep-content-group>summary{font-size:15px;font-weight:750;cursor:pointer;min-height:32px;line-height:1.5}
#admin .ep-panel-state{display:inline-block;margin-left:12px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--green-soft);color:var(--green-tx);vertical-align:1px}
#admin .ep-panel-state.off{background:var(--card-2);color:var(--ink-3)}
#admin .ep-submitbar{position:sticky;bottom:12px;z-index:3;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;padding:14px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink)}
#admin .ep-submitbar .ep-feedback{margin:0;flex:1 1 180px}
#admin .btn.sm{min-height:40px}
#admin :is(input,textarea,select):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#admin :is(input,textarea,select):disabled{background:var(--card-2);color:var(--ink-3)}
@media(min-width:1320px){#admin .adm-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}#admin .adm-list{max-height:65vh}}
@media(hover:hover) and (pointer:fine){#admin .adm-tabs button:hover{background:var(--card-2)}#admin .adm-tabs button[aria-selected="true"]:hover{background:var(--sun-soft)}}
@media(max-width:959px){
 #admin .adm-workspace{grid-template-columns:minmax(0,1fr)}
 #admin .adm-nav{display:none}
 #admin .adm-mobile-nav{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:750;position:sticky;top:68px;z-index:5;background:var(--card);padding:12px;border-radius:12px;border:1px solid var(--line-2)}
 #admin .adm-context{scroll-margin-top:174px}
 #admin .adm-mobile-nav select{width:100%;min-height:46px;border:2px solid var(--ink);border-radius:12px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--card);box-shadow:0 3px 0 var(--ink)}
 #admin .adm-content{gap:20px}
}
@media(max-width:600px){
 #admin .adm-in{gap:18px;padding-bottom:100px}
 #admin .adm-head{padding:18px;gap:12px}
 #admin .adm-hid{flex-basis:160px}
 #admin .adm-h{font-size:26px}
 #admin .adm-badge{width:44px;height:44px}
 #admin .adm-live{gap:6px}
 #admin .adm-pill{font-size:11px;padding:5px 8px}
 #admin .adm-context h2{font-size:24px}
 #admin .adm-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #admin .adm-stat{padding:14px}
 #admin .adm-stat b{font-size:24px;overflow-wrap:anywhere}
 #admin .adm-event-editor,#admin .ep-admin-section{padding:16px}
 #admin .adm-event-fields{padding:12px}
 #admin .adm-event-fields-grid,#admin .ep-setting-sections{grid-template-columns:minmax(0,1fr)}
 #admin .adm-event-fields-grid input,#admin .adm-event-fields-grid textarea,#admin .ep-field input,#admin .ep-field select,#admin .ep-field textarea{font-size:16px}
 #admin .ep-setting-sections>.ep-settings-group+fieldset{padding:20px 0 0;border-left:0;border-top:1.5px solid var(--line-2)}
 #admin .ep-checklist{grid-template-columns:minmax(0,1fr);gap:8px}
 #admin .ep-checklist li{flex-direction:row;align-items:flex-start;gap:10px;padding:12px}
 #admin .ep-check-mark{flex:none;min-width:76px;text-align:center}
 #admin .ep-content-group{padding:12px}
 #admin .ep-panel-state{margin-left:6px}
 #admin .ep-submitbar{bottom:calc(72px + env(safe-area-inset-bottom));padding:12px}
 #admin .ep-submitbar .btn{width:100%}
 #admin .adm-evlist li{grid-template-columns:auto minmax(0,1fr)}
 #admin .adm-evlist li>.num{grid-column:1/-1}
 #admin .adm-evlist li>.btn{grid-column:1/-1;grid-row:auto;justify-self:start}
 #admin .btn.sm{min-height:44px}
 #admin .adm-team li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start}
 #admin .adm-team li b{white-space:normal;overflow-wrap:anywhere;overflow:visible}
 #admin .adm-team li .adm-role,#admin .adm-team li .btn{grid-column:2;justify-self:start}
}

/* ── 21-mobile-navigation.css ── */
/* Keep vertical scrolling, text selection, pinch zoom and browser Back.
   Reaching a game's scroll boundary must not reload the whole session. */
html,body{overscroll-behavior-y:none}

/* ── 21-onboarding.css ── */
/* First run (site/v2/onboard.js): welcome, played before, the other games, sign-in. Same table, same tokens as the rest. */
html.ob-wait #boot[hidden]{display:flex!important}
body.ob-on header.bar,body.ob-on #v2Dock{display:none}
body.ob-on .wrap{padding-top:0}
.ob{justify-content:center;min-height:100dvh;gap:16px}
.ob-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ob-brand{display:flex;align-items:center;gap:9px;font-size:19px;letter-spacing:-.02em}
.ob-brand svg{width:34px;height:34px}
.ob-bomb{width:min(52%,190px);height:auto;margin:2px 0 -4px;overflow:visible}
.ob h1{font-size:clamp(30px,8.4vw,46px);line-height:1.05;max-width:16ch;margin:0}
.ob-panel{width:100%;max-width:var(--col)}
.ob-label{margin:0;font-size:14px;font-weight:800;color:var(--ink-2);text-align:center}
.ob-langs{display:flex;flex-direction:column;gap:10px}
.ob-lang{min-height:52px;padding:0 18px;font-size:17px;font-weight:800;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s ease}
.ob-lang:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ob-lang.is-on{background:var(--ink);color:#fff}
.ob .btn{white-space:normal;padding-top:12px;padding-bottom:12px}
.ob-games{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;max-width:var(--col)}
.ob-game{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:0 3px 0 var(--ink)}
.ob-gn{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:var(--bw) solid var(--ink);background:var(--sun);font:800 14px var(--mono)}
.ob-gt{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.ob-gt b{font-size:17px;letter-spacing:-.01em}
.ob-gt span{font-size:14px;line-height:1.4;color:var(--ink-2)}
.ob-guest{align-self:center}
@media (max-width:380px){.ob h1{font-size:28px}.ob-bomb{width:44%}}

/* ── 21-pioneer.css ── */
/* The pioneer card on the home screen (site/v2/pioneer.js): a thank-you for testers of the Android app. */
.pio{margin:0 0 14px;padding:14px 16px 16px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lift);display:flex;flex-direction:column;gap:10px}
.pio-hd{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pio-kick{display:inline-block;padding:3px 10px;background:var(--sun);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:999px;font:800 11px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase}
.pio h2{margin:0;font:800 22px/1.15 var(--display);color:var(--ink)}
.pio p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.45}
.pio .pio-day{color:var(--ink);font:800 15px/1.3 var(--display)}
.pio .pio-prize{padding:8px 10px;background:var(--sun-soft);border:1.5px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink);font-size:13.5px}
.pio .pio-note{padding:10px 12px;background:var(--green-soft);border:1.5px solid var(--green);border-radius:var(--r-sm);color:var(--ink);font-size:14px}
.pio-dots{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.pio-dots i{aspect-ratio:1;border-radius:50%;background:var(--card-3);border:1.5px solid var(--line-2);transition:background-color .16s ease-out,border-color .16s ease-out}
.pio-dots i.on{background:var(--sun);border-color:var(--ink)}
.pio-claim{min-height:48px;padding:0 18px;background:var(--sun);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--edge);font:800 16px/1 var(--display);cursor:pointer;transition:transform .12s ease-out,box-shadow .12s ease-out}
.pio-claim:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pio-claim:disabled{opacity:.6;cursor:default}
.pio-claim:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.pio-dots i,.pio-claim{transition:none}.pio-claim:active{transform:none}}