/* ══════════════════════════════════════════════════════════════════
   app.css — Happy Light Battle.

   Two switches drive every colour and shape on these pages:

     data-theme  light or dark, stamped by theme.js before first paint
                 (the suite-wide switch shared with Maths, Sandbox, …);
     data-look   arcade, sport, event or classic: the tournament's own
                 look, picked by its organiser. Arcade is the default
                 and matches arcade.happylight.io: square pixel frames,
                 the Silkscreen pixel font and a faint CRT scanline.

   Tokens first, one block per look and theme; then the components,
   written against the tokens; then what only one look does; then the
   motion, all of which switches off under prefers-reduced-motion.

   The CSP is style-src 'self' with no 'unsafe-inline': nothing in the
   markup sets a style attribute, and the scripts only touch styles
   through the CSSOM (custom properties and the Web Animations API).
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/silkscreen-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/silkscreen-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/silkscreen-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/silkscreen-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Page-to-page morphs (home ↔ tournament) where the browser has them. */
@view-transition{navigation:auto}

/* ── tokens: shared ───────────────────────────────────────────────── */
:root{
  --font:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pixel:"Silkscreen","VT323",ui-monospace,monospace;
  --logo-glass-hi:#fffdf6; --logo-glass-lo:#f8e3b6; --logo-face:#8a6a3b;
  /* motion: arcade moves in steps, the others glide */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-pop:cubic-bezier(.2,1.5,.4,1);
  --step-in:steps(6,end);
}

/* ── arcade (default), dark ── same palette as arcade.happylight.io ── */
:root{
  --bg:#0b0a0d; --bg-2:#16131a;
  --panel:rgba(29,25,34,.9); --panel-solid:#1d1922;
  --line:rgba(184,175,164,.22); --line-hot:rgba(245,158,11,.6);
  --frame:#3a3342; --frame-hot:#f59e0b; --drop:#000;
  --ink:#f5f1ea; --ink-dim:#b8afa4; --ink-faint:#6b635a;
  --brand:#f59e0b; --brand-ink:#1a1206; --brand-2:#a78bfa;
  --fight:#f0566b; --fight-soft:rgba(240,86,107,.14);
  --ok:#4ee8a5; --warn:#fbbf24; --bad:#f87171;
  --surf:rgba(43,37,51,.78); --surf-2:rgba(55,48,64,.86);
  --shadow:4px 4px 0 rgba(0,0,0,.5);
  --logo-glow:1; --logo-glow-color:#f59e0b; --logo-bulb:#d9a441;
  --r:0px; --r-sm:0px; --pill:0px;
  --display:var(--pixel); --display-weight:700; --display-case:none; --display-ls:.02em; --display-style:normal;
  --label:var(--pixel); --score:var(--pixel);
  --px:3px; /* pixel frame thickness */
  --grid:rgba(184,175,164,.045); --scan:.06;
  --b-box:#1d1922; --b-box-line:#4a4252; --b-wire:#4a4252; --b-sc:#120f15;
  --b-win:#f5f1ea; --b-lose:#8d8479; --b-ready:#f59e0b; --b-adv:#f59e0b;
  --step:steps(6,end);
  --c1:#f0566b; --c2:#f59e0b; --c3:#4ee8a5; --c4:#a78bfa; --c5:#48c8dd;
}
:root[data-theme="light"]{
  --bg:#faf8f4; --bg-2:#f1ece2;
  --panel:rgba(255,253,247,.95); --panel-solid:#fffdf7;
  --line:rgba(90,74,54,.24); --line-hot:rgba(180,83,9,.55);
  --frame:#241f18; --frame-hot:#b45309; --drop:rgba(90,74,54,.32);
  --ink:#241f18; --ink-dim:#5b5145; --ink-faint:#7d7264;
  --brand:#b45309; --brand-ink:#fff; --brand-2:#6d28d9;
  --fight:#be123c; --fight-soft:rgba(190,18,60,.08);
  --ok:#047857; --warn:#8c6510; --bad:#b91c1c;
  --surf:rgba(241,236,226,.85); --surf-2:rgba(232,225,212,.92);
  --shadow:4px 4px 0 rgba(90,74,54,.25);
  --logo-glow:0; --logo-bulb:#a86f18;
  --logo-glass-hi:#fffaec; --logo-glass-lo:#f2d79c; --logo-face:#6b4d22;
  --grid:rgba(90,74,54,.05); --scan:0;
  --b-box:#fffdf7; --b-box-line:#241f18; --b-wire:rgba(90,74,54,.5); --b-sc:#f1ece2;
  --b-win:#241f18; --b-lose:#7d7264; --b-ready:#b45309; --b-adv:#b45309;
  --c1:#be123c; --c2:#b45309; --c3:#047857; --c4:#6d28d9; --c5:#0e7490;
}

/* ── classic: the clean rounded look, no pixels ── */
:root[data-look="classic"]{
  --r:12px; --r-sm:8px; --pill:999px;
  --display:var(--font); --display-weight:900; --display-ls:-.03em;
  --label:var(--font); --score:var(--mono);
  --frame:rgba(184,175,164,.28); --frame-hot:rgba(245,158,11,.6);
  --grid:transparent; --scan:0;
  --b-box-line:rgba(184,175,164,.28); --b-wire:rgba(184,175,164,.35); --b-sc:transparent;
  --step:var(--ease);
}
:root[data-look="classic"][data-theme="light"]{
  --frame:rgba(90,74,54,.28); --frame-hot:rgba(180,83,9,.55);
  --b-box-line:rgba(90,74,54,.3); --b-wire:rgba(90,74,54,.38);
}

/* ── sport: pitch greens, chalk lines, a stadium scoreboard ── */
:root[data-look="sport"]{
  --bg:#06120b; --bg-2:#0c1f14;
  --panel:rgba(10,30,19,.92); --panel-solid:#0e2618;
  --line:rgba(205,235,215,.18); --line-hot:rgba(250,204,21,.6);
  --frame:rgba(205,235,215,.3); --frame-hot:#facc15; --drop:rgba(0,0,0,.55);
  --ink:#f1f7f2; --ink-dim:#a9c2b2; --ink-faint:#5f7a69;
  --brand:#facc15; --brand-ink:#141000; --brand-2:#38bdf8;
  --fight:#22c55e; --fight-soft:rgba(34,197,94,.14);
  --ok:#4ade80; --warn:#facc15; --bad:#f87171;
  --surf:rgba(18,44,29,.8); --surf-2:rgba(24,56,37,.88);
  --shadow:0 10px 24px -14px rgba(0,0,0,.8);
  --logo-glow-color:#facc15;
  --r:4px; --r-sm:3px; --pill:3px;
  --display:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,var(--font);
  --display-weight:900; --display-case:uppercase; --display-ls:.01em; --display-style:italic;
  --label:var(--display); --score:var(--pixel);
  --grid:transparent; --scan:0;
  --b-box:#0b1a12; --b-box-line:rgba(205,235,215,.3); --b-wire:rgba(241,247,242,.35); --b-sc:#030805;
  --b-win:#f1f7f2; --b-lose:#7f9a89; --b-ready:#facc15; --b-adv:#facc15;
  --step:var(--ease);
  --c1:#22c55e; --c2:#facc15; --c3:#f1f7f2; --c4:#38bdf8; --c5:#fb923c;
}
:root[data-look="sport"][data-theme="light"]{
  --bg:#edf5ee; --bg-2:#e1ede3;
  --panel:rgba(255,255,255,.95); --panel-solid:#fff;
  --line:rgba(20,60,35,.2); --line-hot:rgba(161,98,7,.55);
  --frame:rgba(20,60,35,.3); --frame-hot:#a16207; --drop:rgba(20,60,35,.2);
  --ink:#0f2418; --ink-dim:#3f5a49; --ink-faint:#6b8475;
  --brand:#a16207; --brand-ink:#fff; --brand-2:#0369a1;
  --fight:#15803d; --fight-soft:rgba(21,128,61,.09);
  --ok:#15803d; --warn:#a16207; --bad:#b91c1c;
  --surf:rgba(228,240,231,.9); --surf-2:rgba(214,232,219,.95);
  --shadow:0 10px 24px -16px rgba(20,60,35,.45);
  --logo-glow:0;
  --b-box:#fff; --b-box-line:rgba(20,60,35,.3); --b-wire:rgba(20,60,35,.4); --b-sc:#0f2418;
  --b-win:#0f2418; --b-lose:#6b8475; --b-ready:#a16207; --b-adv:#15803d;
  --c1:#15803d; --c2:#a16207; --c3:#0f2418; --c4:#0369a1; --c5:#c2410c;
}

/* ── event: party colours, soft and round ── */
:root[data-look="event"]{
  --bg:#120a1f; --bg-2:#1c1030;
  --panel:rgba(33,19,54,.9); --panel-solid:#22143a;
  --line:rgba(225,205,255,.18); --line-hot:rgba(244,114,182,.6);
  --frame:rgba(225,205,255,.24); --frame-hot:#f472b6; --drop:rgba(0,0,0,.5);
  --ink:#fbf7ff; --ink-dim:#cbbbe0; --ink-faint:#7d6a96;
  --brand:#f472b6; --brand-ink:#2a0618; --brand-2:#22d3ee;
  --fight:#a78bfa; --fight-soft:rgba(167,139,250,.16);
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --surf:rgba(48,29,76,.78); --surf-2:rgba(62,38,96,.86);
  --shadow:0 14px 32px -16px rgba(236,72,153,.45);
  --logo-glow-color:#f472b6;
  --r:18px; --r-sm:12px; --pill:999px;
  --display:var(--font); --display-weight:900; --display-ls:-.03em;
  --label:var(--font); --score:var(--font);
  --grid:transparent; --scan:0;
  --b-box:#22143a; --b-box-line:rgba(225,205,255,.3); --b-wire:rgba(225,205,255,.35); --b-sc:rgba(244,114,182,.12);
  --b-win:#fbf7ff; --b-lose:#9d8bb6; --b-ready:#22d3ee; --b-adv:#f472b6;
  --step:var(--ease-pop);
  --c1:#f472b6; --c2:#22d3ee; --c3:#fbbf24; --c4:#a78bfa; --c5:#34d399;
}
:root[data-look="event"][data-theme="light"]{
  --bg:#fff7fb; --bg-2:#fbeaf3;
  --panel:rgba(255,255,255,.94); --panel-solid:#fff;
  --line:rgba(80,30,100,.16); --line-hot:rgba(219,39,119,.5);
  --frame:rgba(80,30,100,.2); --frame-hot:#db2777; --drop:rgba(80,30,100,.2);
  --ink:#2a1238; --ink-dim:#5f4a70; --ink-faint:#8d7a9d;
  --brand:#db2777; --brand-ink:#fff; --brand-2:#0891b2;
  --fight:#7c3aed; --fight-soft:rgba(124,58,237,.08);
  --ok:#059669; --warn:#b45309; --bad:#e11d48;
  --surf:rgba(250,236,246,.9); --surf-2:rgba(244,224,238,.95);
  --shadow:0 14px 30px -18px rgba(219,39,119,.4);
  --logo-glow:0;
  --b-box:#fff; --b-box-line:rgba(80,30,100,.22); --b-wire:rgba(80,30,100,.32); --b-sc:rgba(219,39,119,.08);
  --b-win:#2a1238; --b-lose:#8d7a9d; --b-ready:#0891b2; --b-adv:#db2777;
  --c1:#db2777; --c2:#0891b2; --c3:#d97706; --c4:#7c3aed; --c5:#059669;
}

/* ── base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{margin:0;min-height:100dvh;background-color:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60rem 30rem at 85% -10%,var(--fight-soft),transparent 70%),
    radial-gradient(50rem 26rem at -10% 0%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,auto,24px 24px,24px 24px;
  background-repeat:no-repeat,no-repeat,repeat,repeat;
  background-attachment:scroll,scroll,fixed,fixed}
/* The arcade's CRT: faint scanlines over everything, never in the way. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--scan);
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.9) 0 1px,transparent 1px 3px)}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3{line-height:1.15;margin:0;font-family:var(--display);font-weight:var(--display-weight);
  text-transform:var(--display-case);letter-spacing:var(--display-ls);font-style:var(--display-style)}
code{font-family:var(--mono);font-size:.9em}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--panel-solid);padding:.5rem 1rem;border-radius:var(--r-sm)}
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
.px-ico{display:block;shape-rendering:crispEdges;image-rendering:pixelated}
.px-ico .px-o{fill:var(--px-o,#0b0a0d)}
.px-ico .px-gold{fill:var(--px-gold,#f5b52b)}
.px-ico .px-hi{fill:var(--px-hi,#fff3c4)}
.px-ico .px-lo{fill:var(--px-lo,#b7741a)}
.px-ico .px-blade{fill:var(--px-blade,#dfe6ee)}
.px-ico .px-grip{fill:var(--px-grip,#f0566b)}
:root[data-theme="light"] .px-ico{--px-o:#241f18}

/* ── top bar ── */
.bt-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:72rem;margin:0 auto;padding:.85rem 1rem;view-transition-name:bt-bar}
.bt-home{text-decoration:none;color:inherit}
.wordmark{font-weight:700;letter-spacing:-.03em;line-height:1;
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;font-size:1.05rem}
.wordmark .hl-lockup{height:2em;width:auto;display:inline-block;color:var(--ink);flex:none}
.wm-b{color:var(--fight);font-family:var(--label);font-size:max(.62rem,.16em);font-weight:800;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;line-height:1}
:root:not([data-look="classic"]):not([data-look="event"]) .wm-b{letter-spacing:.18em;text-indent:.18em}
.bt-top{display:flex;align-items:center;gap:.5rem}

/* ── buttons and fields ── */
.btn{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font:inherit;font-family:var(--label);font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none;
  padding:.6rem 1.05rem;border-radius:var(--pill);border:1px solid var(--frame);background:var(--surf);color:var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),border-color .15s,background-color .15s,filter .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:hover{border-color:var(--frame-hot)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.fight{background:var(--fight);border-color:var(--fight);color:#fff}
:root[data-look="sport"] .btn.fight{color:#04130a}
:root[data-look="sport"][data-theme="light"] .btn.fight{color:#fff}
.btn.primary:hover,.btn.fight:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.small{font-size:.78rem;padding:.38rem .72rem}
.btn.ghost{background:none}
.icon-btn{appearance:none;border:1px solid transparent;background:none;color:var(--ink-dim);
  width:2rem;height:2rem;border-radius:var(--r-sm);display:inline-grid;place-items:center;cursor:pointer;font:inherit;
  transition:transform .1s,color .15s,border-color .15s}
.icon-btn:hover{border-color:var(--line);color:var(--ink)}
.icon-btn:active{transform:scale(.9)}

input[type=text],input[type=number],select,textarea{font:inherit;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--frame);border-radius:var(--r-sm);padding:.5rem .65rem;width:100%;min-width:0;
  transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:6rem;line-height:1.4}
input[type=number]{width:5.5rem}
input:focus,select:focus,textarea:focus{border-color:var(--frame-hot);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
label.field{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--ink-dim)}
label.field > span{font-weight:600;color:var(--ink)}
label.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;cursor:pointer}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}

.card{background:var(--panel);border:1px solid var(--frame);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--label);font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.18rem .55rem;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap}
.badge.live{color:var(--fight);border-color:color-mix(in srgb,var(--fight) 50%,transparent)}
.badge.live::before{content:"";width:.45rem;height:.45rem;border-radius:var(--pill);background:var(--fight);animation:blink 1.2s steps(2,jump-none) infinite}
.badge.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.badge.draft{color:var(--warn)}
.msg{font-size:.88rem;margin:.5rem 0 0}
.msg.err{color:var(--bad)}
.msg.ok{color:var(--ok)}

/* Loading: a pixel bar that fills in steps. */
#load-msg:not(.err){display:flex;align-items:center;gap:.8rem;font-family:var(--label);padding:2rem 0}
#load-msg:not(.err)::after{content:"";width:8rem;height:.7rem;border:2px solid var(--frame-hot);
  background:linear-gradient(90deg,var(--brand) 0 0) 0 0/0% 100% no-repeat;animation:load 1.2s steps(8,end) infinite}

/* ── hero ── */
.hero{text-align:center;padding:2.2rem 1rem 1.6rem}
.hero-icon{position:relative;width:5.4rem;height:5.4rem;margin:0 auto .5rem}
.hero-icon .px-ico{position:absolute;inset:0;width:100%;height:100%}
.hero-icon .sw-b{transform:scaleX(-1)}
.hero-icon .spark{position:absolute;left:50%;top:40%;width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;background:var(--warn);opacity:0}
.hero h1{font-size:clamp(2.4rem,7vw,4.4rem);letter-spacing:var(--display-ls)}
:root:not([data-look]) .hero h1,:root[data-look="arcade"] .hero h1{font-size:clamp(2.25rem,6.5vw,4rem);text-shadow:4px 4px 0 var(--fight-soft),4px 4px 0 color-mix(in srgb,var(--fight) 55%,transparent)}
.slogan{display:inline-block;margin:.75rem 0 0;font-family:var(--display);font-size:clamp(1.05rem,2.8vw,1.45rem);font-weight:800;
  font-style:italic;text-transform:none;letter-spacing:-.01em;color:var(--ink);
  padding:.35rem .95rem;border-radius:var(--r-sm);transform:rotate(-1.2deg);
  background:linear-gradient(90deg,var(--fight-soft),color-mix(in srgb,var(--brand) 14%,transparent));
  border:1px solid color-mix(in srgb,var(--fight) 40%,transparent)}
.slogan{text-wrap:balance}
.slogan b{color:var(--fight);white-space:nowrap}
.hero p.sub{max-width:38rem;margin:1rem auto 0;color:var(--ink-dim)}

/* ── dashboard ── */
.dash{display:grid;gap:1rem;padding-bottom:3rem}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.t-list{list-style:none;margin:0;padding:.25rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.t-card{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;color:inherit;height:100%;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .15s}
.t-card:hover{border-color:var(--frame-hot);transform:translateY(-3px)}
.t-card:active{transform:translateY(0) scale(.99)}
.t-card h3{font-size:1.05rem}
.t-card .meta{font-size:.82rem;color:var(--ink-dim)}
.t-card .row{align-items:center;gap:.6rem}
.t-card .look-tag{font-family:var(--label);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.t-card.archived{opacity:.6}
.empty{text-align:center;color:var(--ink-dim);padding:2rem 1rem}
.signin{max-width:34rem;margin:0 auto;text-align:center;display:grid;gap:.8rem;justify-items:center}

/* ── wizard ── */
.wiz{display:grid;gap:1.2rem}
.wiz fieldset{border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin:0;display:grid;gap:.8rem;min-width:0}
.wiz legend{font-family:var(--display);font-weight:var(--display-weight);font-style:var(--display-style);
  text-transform:var(--display-case);padding:0 .4rem;font-size:1rem}
.formats,.looks{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));padding:.2rem}
.looks{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.fmt{position:relative;display:block;cursor:pointer}
.fmt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fmt .fmt-box{display:block;height:100%;border:1px solid var(--frame);border-radius:var(--r-sm);padding:.7rem .8rem;background:var(--surf);
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s}
.fmt:hover .fmt-box{transform:translateY(-2px);border-color:var(--frame-hot)}
.fmt .fmt-box b{display:block;font-family:var(--label);font-size:.92rem}
.fmt .fmt-box small{display:block;color:var(--ink-dim);font-size:.8rem;margin-top:.2rem}
.fmt input:checked + .fmt-box{border-color:var(--frame-hot);box-shadow:inset 0 0 0 1px var(--frame-hot);animation:pick .35s var(--step)}
.fmt input:focus-visible + .fmt-box{outline:2px solid var(--brand);outline-offset:3px}
/* look picker: a tiny preview of each look, drawn in CSS */
.look-swatch{display:block;height:3.4rem;margin:-.2rem -.3rem .55rem;border-radius:calc(var(--r-sm) * .7);position:relative;overflow:hidden}
.look-swatch::before,.look-swatch::after{content:"";position:absolute}
.sw-arcade{background:#0b0a0d;background-image:linear-gradient(rgba(184,175,164,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(184,175,164,.12) 1px,transparent 1px);background-size:8px 8px}
.sw-arcade::before{left:14%;top:28%;width:44%;height:44%;background:#f59e0b;box-shadow:0 -3px 0 #fff3c4,6px 6px 0 #000}
.sw-arcade::after{right:12%;top:36%;width:18%;height:28%;background:#f0566b;box-shadow:4px 4px 0 #000}
.sw-sport{background:repeating-linear-gradient(90deg,#14532d 0 18px,#166534 18px 36px)}
.sw-sport::before{left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.7)}
.sw-sport::after{left:calc(50% - 1rem);top:calc(50% - 1rem);width:2rem;height:2rem;border:2px solid rgba(255,255,255,.7);border-radius:50%}
.sw-event{background:linear-gradient(120deg,#f472b6,#a78bfa 50%,#22d3ee)}
.sw-event::before{inset:0;background-image:radial-gradient(#fff 1.5px,transparent 2px),radial-gradient(#fbbf24 1.5px,transparent 2px);background-size:18px 18px,26px 26px;background-position:0 0,9px 11px;opacity:.75}
.sw-classic{background:linear-gradient(180deg,#1d1922,#0b0a0d)}
.sw-classic::before{left:14%;right:14%;top:30%;height:40%;border-radius:8px;border:1px solid rgba(245,241,234,.3);background:rgba(43,37,51,.9)}
.opts{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:flex-end}
.people{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.person{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf)}
.person.dragging{opacity:.4}
.person.drop-above{box-shadow:0 -3px 0 var(--brand)}
.person.new{animation:slide-in .35s var(--step) both}
.person .seed{font-family:var(--score);font-size:.78rem;color:var(--ink-faint);width:2rem;text-align:right}
.person .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .who small{color:var(--ink-dim);margin-left:.4rem}
.person .grip{cursor:grab;color:var(--ink-faint);padding:0 .2rem;user-select:none}
.game-pick{display:grid;gap:.5rem}
.wiz-foot{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* ── tournament page ── */
.t-head{display:grid;gap:.5rem;padding:1rem 0 .5rem}
.t-head h1{font-size:clamp(1.6rem,4.5vw,2.6rem)}
:root:not([data-look]) .t-head h1,:root[data-look="arcade"] .t-head h1{font-size:clamp(1.4rem,4vw,2.3rem)}
.t-meta{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;color:var(--ink-dim);font-size:.9rem}
.t-slogan{justify-self:start;font-family:var(--display);font-style:italic;font-weight:800;text-transform:none;color:var(--fight);font-size:.92rem;letter-spacing:0}
.tools{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr)}
.tools .links{display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr)}
.link-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;min-width:0}
.link-row > .faint{flex:0 0 7rem}
.link-row code{flex:1 1 8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.35rem .5rem}
.look-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.look-row > .faint{flex:0 0 7rem}
.reports{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.reports li{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.45rem .6rem;border:1px solid var(--line-hot);border-radius:var(--r-sm);background:var(--surf);
  animation:slide-in .35s var(--step) both}
.reports li .what{flex:1;min-width:12rem;font-size:.9rem}

.tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:1rem 0 .9rem}
.tab{appearance:none;position:relative;font:inherit;font-family:var(--label);font-size:.86rem;font-weight:700;cursor:pointer;background:none;color:var(--ink-dim);
  border:0;padding:.55rem .85rem;margin-bottom:-1px;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink)}
.tab .ink{position:absolute;left:.5rem;right:.5rem;bottom:0;height:3px;background:var(--fight);view-transition-name:tab-ink}
:root[data-look="event"] .tab .ink{border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--fight))}
.panel{padding-bottom:3rem;view-transition-name:t-panel}

.bracket-wrap{overflow:auto;border:1px solid var(--frame);border-radius:var(--r);background:var(--panel);padding:.8rem;
  -webkit-overflow-scrolling:touch;max-width:100%}
.bracket{display:block;overflow:visible}
.bracket .round-label{fill:var(--ink-dim);font:700 11px var(--label);letter-spacing:.06em;text-transform:uppercase}
.bracket .section-label{fill:var(--fight);font:800 12px var(--label);letter-spacing:.1em;text-transform:uppercase}
.bracket .wire{fill:none;stroke:var(--b-wire);stroke-width:2}
.bracket .wire.won{stroke:color-mix(in srgb,var(--b-adv) 70%,var(--b-wire))}
:root:not([data-look="classic"]):not([data-look="event"]) .bracket .wire{shape-rendering:crispEdges}
.bracket .m rect.box{fill:var(--b-box);stroke:var(--b-box-line);stroke-width:1.5;rx:var(--r-sm);ry:var(--r-sm)}
.bracket .m rect.drop{fill:var(--drop);rx:var(--r-sm);ry:var(--r-sm)}
:root[data-look="classic"] .bracket .m rect.drop,:root[data-look="event"] .bracket .m rect.drop{display:none}
.bracket .m rect.sc-bg{fill:var(--b-sc);rx:max(0px,calc(var(--r-sm) - 3px));ry:max(0px,calc(var(--r-sm) - 3px))}
.bracket .m line.mid{stroke:var(--b-box-line);stroke-width:1}
.bracket .m text{font:600 12.5px var(--font);fill:var(--b-lose)}
.bracket .m text.score{font:700 12px var(--score);text-anchor:middle;font-variant-numeric:tabular-nums}
.bracket .m text.win{fill:var(--b-win);font-weight:800}
.bracket .m text.score.win{fill:var(--brand)}
:root[data-look="sport"] .bracket .m text.score{fill:#facc15}
:root[data-look="sport"] .bracket .m text.score:not(.win){fill:#8a7a2c}
.bracket .m text.tbd{fill:var(--ink-faint);font-style:italic;font-weight:500}
.bracket .m rect.win-bar{fill:var(--fight)}
:root[data-look="event"] .bracket .m rect.win-bar{fill:var(--brand)}
.bracket .m.ready rect.box{stroke:var(--b-ready);stroke-width:2}
.bracket .m.ready text{fill:var(--b-win)}
.bracket .m.pending{opacity:.75}
.bracket .m.bye{opacity:.55}
.bracket .m.skipped{opacity:.4}
.bracket .m.can-edit{cursor:pointer}
.bracket .m .mi{transform-box:fill-box;transform-origin:center;transition:transform .15s var(--ease)}
.bracket .m.can-edit:hover .mi{transform:translate(-1px,-2px)}
.bracket .m.can-edit:hover rect.box,.bracket .m.can-edit:focus rect.box{stroke:var(--brand);stroke-width:2.5}
.bracket .m:focus{outline:none}
.bracket .champ-tag{fill:var(--brand);font:800 11px var(--label);letter-spacing:.08em}
.bracket .runner{fill:var(--b-adv)}

table.standings{width:100%;border-collapse:collapse;font-size:.9rem}
table.standings th,table.standings td{padding:.45rem .5rem;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.standings th{font-family:var(--label);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
table.standings td{font-variant-numeric:tabular-nums}
table.standings th.name,table.standings td.name{text-align:left;width:100%;white-space:normal}
table.standings td.pts{font-family:var(--score);font-weight:800;color:var(--ink)}
table.standings tr.through td.name{box-shadow:inset 3px 0 0 var(--ok)}
table.standings tr.lead td{color:var(--ink)}
table.standings tr.lead td.name::after{content:" ★";color:var(--brand)}
table.standings tr.moved td{animation:row-flash 1.2s var(--ease)}
.tables{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));padding:.2rem}
.table-card{overflow-x:auto}
.table-card h3{font-size:1rem;margin-bottom:.4rem}

.rounds{display:grid;gap:1.2rem}
.round h3{font-family:var(--label);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.5rem;font-style:normal}
.matches{list-style:none;margin:0;padding:.15rem;display:grid;gap:.55rem}
.match{display:grid;grid-template-columns:1fr auto 1fr auto;gap:.6rem;align-items:center;
  padding:.55rem .7rem;border:1px solid var(--frame);border-radius:var(--r-sm);background:var(--panel);
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s}
.match.ready{border-color:var(--line-hot)}
.match.can-edit{cursor:pointer}
.match.can-edit:hover{border-color:var(--frame-hot);transform:translateY(-2px)}
.match.can-edit:active{transform:none}
.match .side{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match .side.b{text-align:right}
.match .side.win{font-weight:800}
.match .side.lose{color:var(--ink-dim)}
.match .sc{font-family:var(--score);font-weight:700;text-align:center;min-width:4.5rem;font-variant-numeric:tabular-nums}
:root[data-look="sport"] .match .sc{background:var(--b-sc);color:#facc15;border-radius:2px;padding:.15rem .4rem;letter-spacing:.08em}
.match .st{font-size:.72rem;color:var(--ink-faint);text-align:right;min-width:4rem}
.match.heat{grid-template-columns:1fr auto}
.match.fresh{animation:fresh 1.4s var(--ease)}
.heat-order{margin:0;padding-left:1.4rem;font-size:.9rem}
.heat-order li.first{font-weight:800}
.heat-order .pts{color:var(--ink-dim);font-family:var(--score);font-size:.78rem;margin-left:.3rem}

.podium{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.podium > .podium{flex:1 1 100%}
.podium .place{flex:1 1 9rem;text-align:center;padding:.8rem;border-radius:var(--r-sm);border:1px solid var(--frame);background:var(--surf)}
.podium .place.p1{border-color:var(--frame-hot);background:color-mix(in srgb,var(--brand) 14%,var(--surf));padding-top:1.4rem;padding-bottom:1.4rem}
.podium .place.p2{padding-top:1.05rem;padding-bottom:1.05rem}
.podium .place b{display:block;font-family:var(--display);font-style:var(--display-style);font-size:1.05rem}
.podium .place small{color:var(--ink-dim);font-family:var(--label)}
.people-grid{list-style:none;margin:0;padding:.15rem;display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.people-grid li{padding:.5rem .7rem;border:1px solid var(--frame);border-radius:var(--r-sm);background:var(--panel)}
.people-grid li small{display:block;color:var(--ink-dim)}

/* ── dialogs ── */
dialog{border:1px solid var(--frame);border-radius:var(--r);background:var(--panel-solid);color:var(--ink);
  padding:1.1rem;width:min(30rem,calc(100vw - 2rem));box-shadow:var(--shadow)}
dialog[open]{animation:pop .3s var(--step)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{font-size:1.15rem;margin-bottom:.8rem}
.score-grid{display:grid;grid-template-columns:1fr 5.5rem;gap:.5rem;align-items:center}
.score-grid .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.score-grid input{font-family:var(--score);font-size:1.15rem;text-align:center}
.dlg-foot{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1rem}
.dlg-foot .left{margin-right:auto}
.order-list{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.order-list li{display:flex;align-items:center;gap:.4rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surf)}
.order-list li .pl{font-family:var(--score);color:var(--ink-dim);width:1.8rem}
.order-list li .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── toasts ── */
.toasts{position:fixed;z-index:160;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:grid;gap:.5rem;width:min(26rem,calc(100vw - 2rem));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;font-size:.9rem;
  background:var(--panel-solid);color:var(--ink);border:1px solid var(--frame-hot);border-radius:var(--r-sm);box-shadow:var(--shadow);
  animation:toast-in .38s var(--step) both}
.toast::before{content:"";flex:none;width:.65rem;height:.65rem;background:var(--brand);border-radius:var(--pill)}
.toast.ok::before{background:var(--ok)}
.toast.err{border-color:var(--bad)}
.toast.err::before{background:var(--bad)}
.toast.out{animation:toast-out .3s var(--step) forwards}

/* ── champion ── */
.champ-banner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.8rem 1rem;margin:.5rem 0;
  border-radius:var(--r);border:1px solid var(--frame-hot);background:color-mix(in srgb,var(--brand) 12%,var(--panel));
  animation:slide-in .45s var(--step) both}
.champ-banner .px-ico{width:2.2rem;height:2.2rem;flex:none}
.champ-banner b{font-family:var(--display);font-style:var(--display-style);font-size:1.1rem}
.celebrate{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:rgba(5,4,8,.82);overflow:hidden;padding:1rem;
  animation:fade-in .25s linear}
.celebrate.out{animation:fade-out .25s linear forwards}
.celebrate-card{position:relative;z-index:2;text-align:center;width:min(30rem,100%);padding:1.6rem 1.4rem;border-radius:var(--r);
  background:var(--panel-solid);border:2px solid var(--frame-hot);box-shadow:0 0 0 6px var(--fight-soft),var(--shadow);
  animation:pop .55s var(--ease-pop) both}
/* marquee lights around the card: a dashed frame that flips colour in steps */
.celebrate-card::before{content:"";position:absolute;inset:-12px;pointer-events:none;border:4px dashed var(--brand);
  animation:marquee .5s steps(1,end) infinite}
:root[data-look="classic"] .celebrate-card::before,:root[data-look="event"] .celebrate-card::before{display:none}
.celebrate-card .trophy{width:6rem;height:6rem;margin:0 auto;animation:trophy-in .7s var(--step) both,bounce 1.1s steps(4) .7s infinite}
.celebrate-card .kicker{margin:.7rem 0 0;font-family:var(--label);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);font-weight:800;
  animation:blink 1s steps(2,jump-none) .8s 4}
.celebrate-card h2{font-size:clamp(1.8rem,7vw,2.8rem);margin:.25rem 0 .4rem;word-break:break-word;animation:stamp .5s var(--step) .25s both}
.celebrate-card .slogan{transform:none;font-size:1rem}
.celebrate-card .podium{margin-top:1rem}
.celebrate-card .podium .place{animation:rise .5s var(--step) both}
.celebrate-card .podium .place.p1{animation-delay:.55s}
.celebrate-card .podium .place.p2{animation-delay:.7s}
.celebrate-card .podium .place.p3{animation-delay:.85s}
.confetti,.fireworks{position:absolute;inset:0;pointer-events:none;z-index:1}
.confetti i{position:absolute;top:-2rem;left:var(--x);width:var(--s,.6rem);height:var(--s,.6rem);background:var(--c);
  animation:fall var(--dur,4s) linear var(--delay,0s) infinite}
:root[data-look="event"] .confetti i{border-radius:2px;height:calc(var(--s,.6rem) * 1.6)}
:root[data-look="classic"] .confetti i{border-radius:2px}
.burst{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:var(--c);opacity:0;
  animation:burst 1.3s var(--step) var(--delay,0s) infinite}

/* ── report page ── */
.rep-list{list-style:none;margin:0;padding:.15rem;display:grid;gap:.55rem}
.rep-list button{width:100%;text-align:left;justify-content:flex-start}

/* ── bar menu ── same <details>/<summary> pattern as the siblings ── */
.mx-seg{display:inline-flex;border:1px solid var(--frame);border-radius:var(--pill);overflow:hidden;background:var(--surf)}
.mx-seg button{appearance:none;background:none;border:0;color:var(--ink-dim);
  font:inherit;font-family:var(--label);font-size:.76rem;padding:.32rem .72rem;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.mx-seg button.on{background:var(--brand);color:var(--brand-ink);font-weight:700}
.hl-menu{position:relative}
.hl-menu-summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  padding:.4rem .8rem;border:1px solid var(--frame);border-radius:var(--pill);background:var(--panel);
  color:var(--ink-dim);font-family:var(--label);font-size:.78rem;user-select:none;box-shadow:var(--shadow);transition:border-color .15s,color .15s}
.hl-menu-summary::-webkit-details-marker{display:none}
.hl-menu-summary:hover{border-color:var(--frame-hot);color:var(--ink)}
.hl-menu-bars{width:.85rem;height:.7rem;flex:none;
  border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.hl-menu-bars::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);border-top:2px solid currentColor}
.hl-menu-panel{position:absolute;right:0;top:calc(100% + .45rem);z-index:60;
  min-width:15rem;display:flex;flex-direction:column;padding:.3rem;
  border:1px solid var(--frame);border-radius:var(--r-sm);background:var(--panel-solid);box-shadow:var(--shadow)}
.hl-menu[open] .hl-menu-panel{animation:drop-in .22s var(--step) both}
.hl-menu-head{margin:.45rem .55rem .2rem;font-family:var(--label);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.hl-menu-head:first-child{margin-top:.2rem}
.hl-menu-item{appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  font-size:.85rem;color:var(--ink);text-align:left;text-decoration:none;padding:.45rem .55rem;border-radius:var(--r-sm)}
.hl-menu-item:hover{background:var(--line)}
.hl-menu-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.hl-menu-seg{margin:.15rem .55rem .3rem;align-self:flex-start}

/* ── signed-in chip ── same markup and rules in every Happy Light app. ── */
.hl-me{display:inline-flex;align-items:center;gap:.4rem;flex:none;max-width:13rem;
  padding:.15rem .7rem .15rem .15rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ok) 40%,var(--line));
  background:color-mix(in srgb,var(--ok) 9%,var(--surf,transparent));
  color:var(--ink);font-size:.78rem;font-weight:600;line-height:1.2;
  text-decoration:none;white-space:nowrap}
.hl-me:hover{border-color:color-mix(in srgb,var(--ok) 65%,transparent);
  background:color-mix(in srgb,var(--ok) 16%,var(--surf,transparent))}
.hl-me-avatar{position:relative;display:grid;place-items:center;flex:none;
  width:1.45rem;height:1.45rem;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.hl-me-ghost{width:.8rem;height:.8rem;fill:currentColor;animation:hl-me-bob 2.4s steps(4) infinite}
.hl-me-dot{position:absolute;right:-1px;bottom:-1px;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px var(--bg)}
.hl-me-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--ok);animation:hl-me-ping 2.4s cubic-bezier(.22,.61,.36,1) infinite}
.hl-me-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
@keyframes hl-me-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes hl-me-ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.4);opacity:0}}

/* ── game picker: a multi-select combobox, chips, and a free-text add ── */
.field-label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field-label small{font-weight:500;margin-left:.3rem}
.combo{position:relative}
.combo input[role=combobox]{padding-right:2.2rem;background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-size:5px 5px;background-position:calc(100% - 1.1rem) 52%,calc(100% - .8rem) 52%;background-repeat:no-repeat}
.combo input[aria-expanded=true]{border-color:var(--frame-hot)}
.combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + .45rem);margin:0;padding:.3rem;list-style:none;
  max-height:min(18rem,50vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel-solid);border:1px solid var(--frame);border-radius:var(--r-sm);box-shadow:var(--shadow);
  animation:drop-in .2s var(--step) both}
.combo-opt{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:var(--r-sm);cursor:pointer;user-select:none}
.combo-opt .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-opt small{color:var(--ink-faint);font-size:.74rem;white-space:nowrap}
.combo-opt:hover,.combo-opt.active{background:color-mix(in srgb,var(--brand) 16%,transparent)}
.combo-opt.active{box-shadow:inset 3px 0 0 var(--brand)}
.combo-opt[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.combo-opt .tick{flex:none;width:1rem;height:1rem;border:2px solid var(--frame);border-radius:calc(var(--r-sm) * .4);display:grid;place-items:center;background:var(--bg-2)}
.combo-opt[aria-selected=true] .tick{background:var(--brand);border-color:var(--brand)}
.combo-opt[aria-selected=true] .tick::after{content:"";width:.5rem;height:.28rem;margin-top:-.12rem;border-left:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);transform:rotate(-45deg)}
.combo-opt[aria-selected=true] .nm{font-weight:700}
.combo-empty{padding:.6rem;color:var(--ink-dim);font-size:.85rem}
.chips-row{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.chips{list-style:none;margin:0;padding:.15rem;display:flex;flex-wrap:wrap;gap:.45rem;flex:1;min-width:0}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;padding:.2rem .25rem .2rem .3rem;font-size:.84rem;
  border:1px solid var(--frame-hot);border-radius:var(--pill);background:color-mix(in srgb,var(--brand) 12%,var(--surf));animation:pop .25s var(--step) both}
.chip.custom{border-color:var(--frame);background:var(--surf)}
.chip-n{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .2rem;border-radius:var(--pill);background:var(--brand);color:var(--brand-ink);font-family:var(--score);font-size:.7rem;font-weight:700}
.chip.custom .chip-n{background:var(--ink-faint);color:var(--bg)}
.chip-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{appearance:none;border:0;background:none;color:var(--ink-dim);font:inherit;font-size:1rem;line-height:1;width:1.4rem;height:1.4rem;border-radius:var(--pill);cursor:pointer;display:grid;place-items:center}
.chip-x:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.custom-add{display:flex;gap:.5rem;align-items:flex-end}
.custom-add .field{flex:1;min-width:0}

/* ── format step: options left, live preview right (stacked on phones) ── */
.how{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(0,25rem);align-items:start}
.how .formats{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.preview{margin:0;position:sticky;top:1rem;display:grid;gap:.6rem;padding:.8rem;min-width:0}
.pv-stage{min-height:9rem;display:grid;place-items:center;overflow:hidden}
/* Scale the schematic to the panel (up as well as down); a height cap keeps
   small ones (two heats) from turning into giant pixels. */
.pv-stage svg{display:block;width:100%;height:auto;max-height:17rem}
.pv-stage svg.pv-new{animation:pv-in .4s var(--step) both}
.preview figcaption{font-size:.84rem;color:var(--ink-dim);line-height:1.4}
.preview figcaption b{color:var(--ink);font-family:var(--label)}
.preview figcaption small{display:block;margin-top:.15rem}
.pv-problem{margin:0;padding:1rem;text-align:center;color:var(--warn);font-size:.88rem}
svg.pv{shape-rendering:crispEdges;font-family:var(--score)}
svg.pv text{shape-rendering:auto}
.pv .pv-box{fill:var(--b-box);stroke:var(--b-box-line);stroke-width:1.5}
.pv .pv-box.open{fill:none;stroke-dasharray:3 3}
.pv .pv-box.bye{opacity:.6}
.pv .pv-box.score{fill:var(--b-sc)}
.pv .pv-mid{stroke:var(--b-box-line);stroke-width:1}
.pv .pv-t{font-size:8px;fill:var(--b-win)}
.pv .pv-t.thru{fill:var(--ok);font-weight:700}
.pv .pv-t.pts{text-anchor:end;fill:var(--brand)}
.pv .pv-g{font-size:7px;fill:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em}
.pv .pv-h{font-size:8px;fill:var(--ink-dim);text-anchor:middle}
.pv .pv-q{font-size:9px;fill:var(--ink-faint);text-anchor:middle}
.pv .pv-n{font-size:8px;fill:var(--bg);text-anchor:middle;font-weight:700}
.pv .pv-thru{fill:var(--ok)}
.pv .pv-arrow{fill:none;stroke:var(--b-adv);stroke-width:2}
.pv .pv-diag{fill:var(--ink-faint);opacity:.35}
.pv .pv-cell{fill:var(--surf-2)}
.pv .pv-cell.r1{fill:var(--c1)}.pv .pv-cell.r2{fill:var(--c2)}.pv .pv-cell.r3{fill:var(--c3)}.pv .pv-cell.r4{fill:var(--c4)}.pv .pv-cell.r5{fill:var(--c5)}
.bracket.mini .m text{font:700 8px var(--score);fill:var(--b-win)}
.bracket.mini .m text.tbd{font-style:normal;fill:var(--ink-faint)}
.bracket.mini .wire{stroke-width:1.5}
.bracket.mini .section-label{font-size:7px}
@keyframes pv-in{from{opacity:0;transform:translateY(8px) scale(.96)}}

/* ── which game a round plays ── */
.round-game{color:var(--brand);text-transform:none;letter-spacing:0}
.round-play{margin-left:.5rem;font-size:.72rem;text-transform:none;letter-spacing:0}

/* ══ arcade only: pixel frames ═══════════════════════════════════════
   A frame is four box-shadows, one per side, which leaves the corners
   notched like a sprite; a fifth, offset, is the drop shadow. --f is
   the frame colour, set per component so :hover can change it. */
:root:not([data-look]),:root[data-look="arcade"]{--ease:steps(4,end)}
:is(:root:not([data-look]),:root[data-look="arcade"]) :is(.card,.btn,.fmt-box,.match,.person,.people-grid li,.podium .place,.reports li,
  .order-list li,.toast,.bracket-wrap,dialog,.hl-menu-summary,.hl-menu-panel,.mx-seg,.champ-banner,.celebrate-card,
  input[type=text],input[type=number],select,textarea,.link-row code,.slogan,.combo-list,.chip){
  --f:var(--frame);--d:var(--px) var(--px) 0 0 var(--drop);
  border-color:transparent;border-radius:0;
  box-shadow:0 calc(var(--px) * -1) 0 0 var(--f),0 var(--px) 0 0 var(--f),calc(var(--px) * -1) 0 0 0 var(--f),var(--px) 0 0 0 var(--f),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 0 var(--drop)}
:is(:root:not([data-look]),:root[data-look="arcade"]) :is(input[type=text],input[type=number],select,textarea,.link-row code,.person,.order-list li,.mx-seg,.chip){--px:2px}
:is(:root:not([data-look]),:root[data-look="arcade"]) .chip{--f:var(--frame-hot);margin:2px}
:is(:root:not([data-look]),:root[data-look="arcade"]) .chip.custom{--f:var(--frame)}
:is(:root:not([data-look]),:root[data-look="arcade"]) :is(.chip-n,.chip-x,.combo-opt .tick){border-radius:0}
:is(:root:not([data-look]),:root[data-look="arcade"]) :is(.card,.match,.fmt-box,.people-grid li,.podium .place,.bracket-wrap,.reports li){margin:var(--px)}
/* the frame margin above must not undo the sign-in card's centring */
:is(:root:not([data-look]),:root[data-look="arcade"]) .card.signin{margin:var(--px) auto}
:is(:root:not([data-look]),:root[data-look="arcade"]) :is(.btn:hover,.fmt:hover .fmt-box,.t-card:hover,.match.can-edit:hover,
  input:focus,select:focus,textarea:focus,.hl-menu-summary:hover,.fmt input:checked + .fmt-box){--f:var(--frame-hot)}
:is(:root:not([data-look]),:root[data-look="arcade"]) .btn.primary{--f:color-mix(in srgb,var(--brand) 60%,#000);
  box-shadow:0 -3px 0 0 var(--f),0 3px 0 0 var(--f),-3px 0 0 0 var(--f),3px 0 0 0 var(--f),inset -3px -3px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.3),6px 6px 0 0 var(--drop)}
:is(:root:not([data-look]),:root[data-look="arcade"]) .btn.fight{--f:color-mix(in srgb,var(--fight) 60%,#000);
  box-shadow:0 -3px 0 0 var(--f),0 3px 0 0 var(--f),-3px 0 0 0 var(--f),3px 0 0 0 var(--f),inset -3px -3px 0 rgba(0,0,0,.25),inset 3px 3px 0 rgba(255,255,255,.25),6px 6px 0 0 var(--drop)}
/* press: the button sinks into its shadow */
:is(:root:not([data-look]),:root[data-look="arcade"]) .btn:active:not(:disabled){transform:translate(var(--px),var(--px));
  box-shadow:0 -3px 0 0 var(--f),0 3px 0 0 var(--f),-3px 0 0 0 var(--f),3px 0 0 0 var(--f),3px 3px 0 0 var(--drop)}
:is(:root:not([data-look]),:root[data-look="arcade"]) .t-card:hover{transform:translate(-2px,-2px);
  box-shadow:0 -3px 0 0 var(--f),0 3px 0 0 var(--f),-3px 0 0 0 var(--f),3px 0 0 0 var(--f),10px 10px 0 0 var(--drop)}
:is(:root:not([data-look]),:root[data-look="arcade"]) .slogan{--f:var(--fight);font-family:var(--pixel);font-style:normal;font-size:clamp(.8rem,2.4vw,1.15rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.5;padding:.5rem 1rem;margin-top:1rem;
  background:color-mix(in srgb,var(--fight) 14%,var(--bg));text-shadow:2px 2px 0 rgba(0,0,0,.45)}
:is(:root:not([data-look]),:root[data-look="arcade"]) .slogan b{animation:blink 1.4s steps(2,jump-none) 1.2s infinite}
:root[data-theme="light"]:is(:not([data-look]),[data-look="arcade"]) .slogan{text-shadow:none}
:is(:root:not([data-look]),:root[data-look="arcade"]) .t-slogan{font-family:var(--pixel);font-style:normal;font-size:.72rem;text-transform:uppercase}
:is(:root:not([data-look]),:root[data-look="arcade"]) .tab .ink{height:4px}
:is(:root:not([data-look]),:root[data-look="arcade"]) .badge{border-width:2px}
:is(:root:not([data-look]),:root[data-look="arcade"]) .hl-me{border-radius:0}
:is(:root:not([data-look]),:root[data-look="arcade"]) .hero h1{text-transform:none}

/* ══ sport only ══ */
:root[data-look="sport"] body{background-image:
    radial-gradient(40rem 22rem at 6% -6%,rgba(255,255,255,.10),transparent 70%),
    radial-gradient(40rem 22rem at 94% -6%,rgba(255,255,255,.10),transparent 70%),
    repeating-linear-gradient(90deg,rgba(34,197,94,.07) 0 6rem,transparent 6rem 12rem);
  background-size:auto;background-repeat:no-repeat,no-repeat,repeat;background-attachment:scroll,scroll,fixed}
:root[data-look="sport"][data-theme="light"] body{background-image:
    radial-gradient(40rem 22rem at 6% -6%,rgba(250,204,21,.16),transparent 70%),
    radial-gradient(40rem 22rem at 94% -6%,rgba(250,204,21,.16),transparent 70%),
    repeating-linear-gradient(90deg,rgba(21,128,61,.06) 0 6rem,transparent 6rem 12rem)}
/* chalk: halfway line and centre circle, fixed behind everything */
:root[data-look="sport"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background:radial-gradient(circle at 50% 50%,transparent 9.6rem,var(--ink) 9.6rem 9.8rem,transparent 9.8rem),
             linear-gradient(90deg,transparent calc(50% - 1px),var(--ink) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
:root[data-look="sport"] .card{border-top:4px solid var(--fight)}
:root[data-look="sport"] .slogan{transform:skewX(-8deg);border-radius:2px;border:0;padding:.4rem 1.1rem;
  background:linear-gradient(90deg,var(--fight),color-mix(in srgb,var(--fight) 60%,var(--brand)));color:#04130a;text-transform:uppercase}
:root[data-look="sport"] .slogan b{color:#141000;background:var(--brand);padding:0 .3rem}
:root[data-look="sport"][data-theme="light"] .slogan{color:#fff}
:root[data-look="sport"] .t-slogan{text-transform:uppercase}
:root[data-look="sport"] .hero h1,:root[data-look="sport"] .t-head h1{text-shadow:0 2px 0 rgba(0,0,0,.25)}
:root[data-look="sport"] .tab{text-transform:uppercase;font-style:italic}
:root[data-look="sport"] table.standings td.pts{background:var(--b-sc);color:#facc15}
:root[data-look="sport"][data-theme="light"] table.standings td.pts{color:#facc15}

/* ══ event only ══ */
:root[data-look="event"] body{background-image:
    radial-gradient(50rem 28rem at 90% -10%,rgba(244,114,182,.22),transparent 70%),
    radial-gradient(44rem 26rem at -10% 10%,rgba(34,211,238,.16),transparent 70%),
    radial-gradient(circle,rgba(251,191,36,.25) 1.5px,transparent 2px),
    radial-gradient(circle,rgba(167,139,250,.25) 1.5px,transparent 2px);
  background-size:auto,auto,46px 46px,70px 70px;background-position:0 0,0 0,0 0,23px 31px;
  background-repeat:no-repeat,no-repeat,repeat,repeat;background-attachment:scroll,scroll,fixed,fixed}
:root[data-look="event"] .slogan{transform:rotate(-2deg);border:0;color:#fff;padding:.45rem 1.2rem;
  background:linear-gradient(90deg,var(--brand),var(--fight) 55%,var(--brand-2));box-shadow:0 12px 30px -12px var(--brand)}
:root[data-look="event"] .slogan b{color:#fff;text-decoration:underline wavy rgba(255,255,255,.7) 2px;text-underline-offset:4px}
:root[data-look="event"] .hero h1,:root[data-look="event"] .t-head h1{background:linear-gradient(90deg,var(--ink),var(--brand) 60%,var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-look="event"] .btn.primary{background:linear-gradient(90deg,var(--brand),var(--fight));border-color:transparent;color:#fff}
:root[data-look="event"] .card{box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}

/* ══ motion ══════════════════════════════════════════════════════════ */
@keyframes blink{50%{opacity:.2}}
@keyframes load{to{background-size:100% 100%}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes stamp{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:none}}
@keyframes rise{from{transform:translateY(1.5rem);opacity:0}}
@keyframes slide-in{from{transform:translateY(.8rem);opacity:0}}
@keyframes drop-in{from{transform:translateY(-.5rem);opacity:0}}
@keyframes card-in{from{transform:translateY(1rem) scale(.97);opacity:0}}
@keyframes pick{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes toast-in{from{transform:translateY(120%);opacity:0}}
@keyframes toast-out{to{transform:translateY(60%);opacity:0}}
@keyframes fresh{0%{box-shadow:0 0 0 0 var(--frame-hot);background:color-mix(in srgb,var(--brand) 22%,var(--panel))}100%{}}
@keyframes row-flash{0%{background:color-mix(in srgb,var(--brand) 22%,transparent)}100%{background:transparent}}
@keyframes fall{to{transform:translateY(calc(100vh + 4rem)) rotate(var(--spin,540deg))}}
@keyframes burst{0%{transform:translate(0,0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes marquee{50%{border-color:var(--fight)}}
@keyframes trophy-in{0%{transform:translateY(-3rem) scale(.4);opacity:0}70%{transform:translateY(.3rem) scale(1.1);opacity:1}100%{transform:none}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sword-l{from{transform:translate(-2.4rem,.6rem) rotate(-35deg);opacity:0}}
@keyframes sword-r{from{transform:scaleX(-1) translate(-2.4rem,.6rem) rotate(-35deg);opacity:0}}
@keyframes spark{0%,55%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(2.2) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
/* bracket */
@keyframes m-in{from{transform:translateX(-14px);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes win-flash{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes text-in{from{opacity:0;transform:translateX(-6px)}}

/* page entrance */
.hero .hero-icon .sw-a{animation:sword-l .55s var(--step) both}
.hero .hero-icon .sw-b{animation:sword-r .55s var(--step) both}
.hero .hero-icon .spark{animation:spark 1s var(--ease) .3s both}
.hero h1{animation:stamp .5s var(--step) .15s both}
.hero .slogan{animation:pop .45s var(--step) .45s both}
.hero .sub,.signin,.dash-head{animation:slide-in .45s var(--step) .5s both}
.t-list > li{animation:card-in .4s var(--step) both;animation-delay:calc(var(--i,0) * 55ms)}
.t-head h1{animation:slide-in .4s var(--step) both}
.t-head .t-slogan{animation:slide-in .4s var(--step) .12s both}
#wizard:not([hidden]){animation:slide-in .4s var(--step) both}

.bracket.reveal .m .mi{animation:m-in .42s var(--step) both;animation-delay:var(--d,0ms)}
.bracket.reveal .wire{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .45s var(--step) forwards;animation-delay:var(--d,0ms)}
.bracket .wire.adv{stroke:var(--b-adv);stroke-width:3;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .7s var(--step) .25s forwards}
.bracket .m.fresh .mi{animation:win-flash .5s var(--step)}
.bracket .m.fresh text.win{animation:text-in .4s var(--step) both}
.bracket .m.fed .mi{animation:win-flash .45s var(--step) .9s}

/* view transitions: a pixel wipe for the arcade, a slide for the rest */
::view-transition-old(t-panel){animation:.18s var(--step) both vt-out}
::view-transition-new(t-panel){animation:.28s var(--step) both vt-in}
::view-transition-group(tab-ink){animation-duration:.28s;animation-timing-function:var(--step)}
@keyframes vt-out{to{opacity:0;transform:translateY(-.4rem)}}
@keyframes vt-in{from{opacity:0;transform:translateY(.6rem)}}
:is(:root:not([data-look]),:root[data-look="arcade"])::view-transition-new(root){animation:.42s steps(7,end) both vt-wipe}
:is(:root:not([data-look]),:root[data-look="arcade"])::view-transition-old(root){animation:none}
@keyframes vt-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .confetti,.fireworks,.celebrate-card::before{display:none !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .bracket .wire{stroke-dasharray:none !important}
}

/* ── small screens ── */
@media (max-width:640px){
  .bt-bar{padding:.6rem .75rem}
  .hl-menu-word{display:none}
  .wordmark{font-size:.85rem}
  .wrap{padding:0 .75rem}
  .card{padding:.85rem}
  .match{grid-template-columns:1fr auto 1fr;gap:.4rem;padding:.5rem .55rem;font-size:.9rem}
  .match .st{grid-column:1/-1;text-align:left;min-width:0}
  .match .sc{min-width:3.2rem}
  .tables{grid-template-columns:1fr}
  table.standings th,table.standings td{padding:.4rem .3rem}
  table.standings .opt{display:none}
  .link-row > .faint,.look-row > .faint{flex-basis:100%}
  .how{grid-template-columns:1fr}
  .preview{position:static}
  .custom-add{flex-wrap:wrap}
  /* the pixel font is wide: tabs scroll sideways rather than wrap */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:.55rem .7rem}
  .hl-me{padding:.15rem}
  .hl-me-name{display:none}
  .hero-icon{width:4.4rem;height:4.4rem}
}
@media (prefers-reduced-motion:reduce){.hl-me-ghost,.hl-me-dot::after{animation:none}}
@media (max-width:900px){.how{grid-template-columns:1fr}.preview{position:static}}

/* ── joining by QR, playing in the arcade, 18+ drinking mode ── */
.qr-row{display:flex;gap:1rem;flex-wrap:wrap}
.qr-row figure{margin:0;display:grid;gap:.3rem;justify-items:center;text-align:center;font-size:.85rem;color:var(--ink-dim)}
.qr img{display:block;background:#fff;border-radius:var(--r-sm);image-rendering:pixelated;max-width:100%;height:auto}
.match-extra{grid-column:1 / -1;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--ink-dim)}
.drink-note{font-size:.9rem;color:var(--ink-dim);border-left:3px solid var(--line-hot);padding-left:.6rem}
.drink-opts{display:grid;gap:.4rem;margin-left:1.6rem}
.sit-out{color:var(--ink-dim);font-style:italic}
.join-box{display:grid;gap:.5rem}

/* ── scoreboards ── */
#b-head{margin-top:1.5rem}
.sb-table td.pts{font-size:1.1rem}
.sb-table td.sb-act{text-align:right;white-space:nowrap}
.sb-table td.sb-act .btn{margin-left:.25rem}
.sb-add .field,.sb-end-form .field{flex:1;min-width:12rem}
.sb-log-card{margin-top:1rem}
.sb-log{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}
.sb-log li{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.sb-log time{font-size:.78rem;color:var(--ink-faint);min-width:9rem}
.sb-log .sb-delta{font-family:var(--score);font-weight:800;font-variant-numeric:tabular-nums}
.sb-log li.plus .sb-delta{color:var(--ok)}
.sb-log li.minus .sb-delta{color:var(--bad, var(--ink-dim))}
.sb-log li .btn{margin-left:auto}
.adj-quick{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
@media (max-width:640px){
  .sb-table td.sb-act .icon-btn{display:none}
  .sb-log time{min-width:0;width:100%}
}
#sync-msg:empty{display:none}