/* The realm's overlay: broadcast graphics over a night-time map. The site's
   Floodlights palette and faces (bot/theme.js, bot/webkit.js), plates that
   catch the light on their top edge, and Kanit kept for the figures that
   count down. The map is the loud thing; the overlay stays at the edges. */
@font-face { font-family:'Kanit'; src:url(./fonts/kanit-700.woff2) format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Kanit'; src:url(./fonts/kanit-600.woff2) format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'MPLUS1'; src:url(./fonts/mplus-400.woff2) format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'MPLUS1'; src:url(./fonts/mplus-500.woff2) format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'MPLUS1'; src:url(./fonts/mplus-700.woff2) format('woff2'); font-weight:700; font-display:swap; }

:root {
  --void:#05070d; --panel:rgba(11,15,25,.84); --panel-solid:#0b0f19;
  --edge:rgba(148,163,209,.13); --edge-lit:rgba(148,163,209,.26);
  --ink:#eef1f8; --dim:#9aa2b8; --faint:#646c86;
  --gold:#ffd66a; --cyan:#5fd2ee; --violet:#c39bff; --green:#6ce09a;
  --lift:inset 0 1px 0 rgba(255,255,255,.06);
  --body:'MPLUS1',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --display:'Kanit','MPLUS1',ui-sans-serif,system-ui,sans-serif;
  --gut:max(12px, var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px)));
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--void); color:var(--ink);
  font:500 14px/1.45 var(--body); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
#world { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; cursor:grab; }
#world.drag { cursor:grabbing; }
a { color:var(--cyan); text-decoration:none; }
button, input { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }

.plate { background:var(--panel); border:1px solid var(--edge); border-radius:14px;
  box-shadow:var(--lift), 0 18px 40px -22px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2); }
#hud { position:fixed; inset:0; pointer-events:none; z-index:2; }
/* HUD pieces take the mouse, unless they say otherwise. :where keeps this
   rule weak: as "#hud > *" it outranked every piece's own pointer-events:none,
   so a faded notice, the top bar's empty middle and the chat log's empty
   space all caught the mouse and stopped the camera turning there. */
:where(#hud) > * { pointer-events:auto; }
#world:focus { outline:none; }
/* a game, not a page: nothing gets selected by a stray drag or double click
   (iOS's long-press menu too), except what you type in the chat */
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
input, textarea { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
/* the minimap's size, the player's choice (app.js setMapSize); what stacks
   on it moves with it */
:root { --map:184px; }
/* Safe areas: Discord's own on its mobile app (an Activity is drawn under its
   bar, the leave button and the rest), else the device's. Inside Discord on a
   phone the top row also keeps clear of that bar when Discord says nothing. */
:root { --top0:var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px)); --bot0:var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --top:max(12px, var(--top0)); }
body.in-discord.coarse { --top:max(64px, calc(var(--top0) + 12px)); }
body[data-map="s"] { --map:130px; }
body[data-map="l"] { --map:300px; }
/* a tiny window (Discord's corner view): only the world. Discord says so
   itself (body.pip); by size only a really small window, and never while
   typing: a phone's keyboard shrinks the page to near this size, and hiding
   the panels then took the chat box away as it opened. */
body.pip #hud { display:none; }
@media (max-height: 260px) and (max-width: 520px) { body:not(.typing) #hud { display:none; } }
.chat .log li.sys { color:var(--gold); font-style:italic; }

/* ---- the bar ---- */
.bar { position:absolute; left:var(--gut); right:var(--gut); top:var(--top);
  display:flex; align-items:center; gap:10px; pointer-events:none; }
.bar > * { pointer-events:auto; }
.bar > .grow { pointer-events:none; }
.brand { display:flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; color:var(--ink); }
.brand img { width:30px; height:30px; border-radius:8px; }
.brand b { font:700 18px/1 var(--display); letter-spacing:-.01em; }
.brand i { font:600 11.5px/1 var(--body); font-style:normal; color:var(--gold); border:1px solid rgba(255,214,106,.4);
  padding:3px 7px; border-radius:99px; margin-left:8px; vertical-align:2px; }
.bar .grow { flex:1; }
.online { display:flex; align-items:center; gap:7px; padding:9px 13px; color:var(--dim); font-variant-numeric:tabular-nums; }
.online b { color:var(--ink); font:600 15px/1 var(--display); }
.online .dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.online.off .dot { background:var(--faint); box-shadow:none; }
.me { display:flex; align-items:center; gap:8px; padding:5px 13px 5px 5px; color:var(--ink); font-weight:700; }
.me img { width:28px; height:28px; border-radius:50%; border:2px solid var(--cyan); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border-radius:11px;
  border:1px solid var(--edge-lit); background:rgba(255,255,255,.04); color:var(--ink); font-weight:700; cursor:pointer;
  transition:background .15s, border-color .15s; white-space:nowrap; }
.btn:hover { background:rgba(255,255,255,.08); border-color:rgba(148,163,209,.4); }
.btn.gold { background:var(--gold); color:#1b1405; border-color:var(--gold); }
.btn.gold:hover { background:#ffe08a; }
.btn.cyan { border-color:rgba(95,210,238,.5); color:var(--cyan); }

/* ---- going places: find a server and the kick-offs ---- */
.go { position:absolute; right:var(--gut); top:calc(var(--top) + 58px); width:min(330px, calc(100vw - 24px));
  max-height:calc(100vh - 130px); display:flex; flex-direction:column; overflow:hidden; }
.go-h { display:flex; align-items:center; gap:8px; padding:12px 12px 8px 14px; }
.tabs { flex:1; display:flex; gap:4px; }
.tabs button { border:0; background:none; padding:4px 8px; border-radius:8px; cursor:pointer; color:var(--dim);
  font:700 15px/1.1 var(--display); letter-spacing:-.005em; }
.tabs button[aria-selected="true"] { color:var(--ink); background:rgba(255,255,255,.06); }
.go[data-tab="kick"] .p-list, .go[data-tab="people"] .k-list, .go[data-tab="people"] .ul-row,
.go[data-tab="people"] .quick, .go[data-tab="people"] .find ul { display:none; }
.p-list { list-style:none; margin:0; padding:2px 6px 8px; overflow:auto; scrollbar-width:thin; }
.p-list li button { width:100%; display:flex; align-items:center; gap:10px; padding:7px 8px; border:0; background:none;
  border-radius:10px; text-align:left; cursor:pointer; }
.p-list li button:hover, .p-list li button:focus-visible { background:rgba(255,255,255,.055); }
.p-list .pname { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-list .empty { color:var(--faint); padding:10px 8px 14px; }
.gi.round { border-radius:50%; }
.go-h .toggle { display:none; }
button.online { border:0; font:inherit; color:inherit; cursor:pointer; }
button.online:hover { background:rgba(238,241,248,.1); }
.p-list .pname small { display:block; color:var(--dim); font:500 11.5px/1.3 var(--body); margin-top:1px; }
/* folding the panel away (computers; phones have their own toggle) */
.go-h .x-close { margin-left:auto; width:30px; height:30px; border-radius:9px; border:0; background:rgba(238,241,248,.06); color:var(--dim);
  font:700 20px/1 var(--body); cursor:pointer; flex:none; }
.go-h .x-close:hover { color:var(--ink); background:rgba(238,241,248,.12); }
.go-h .x-open { display:none; }
.go.shut { width:auto; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.go.shut .tabs, .go.shut .quick, .go.shut .find, .go.shut .ul-row, .go.shut .k-list, .go.shut .p-list, .go.shut .x-close { display:none; }
.go.shut .go-h { padding:0; }
.go.shut .x-open { display:inline-flex; background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.quick { display:flex; gap:6px; padding:0 12px 10px; }
.quick .btn { padding:6px 11px; font-size:12.5px; border-radius:9px; }
.find { margin:0 12px 10px; position:relative; }
.find input { width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--edge-lit); background:rgba(0,0,0,.28); outline:none; }
.find input:focus { border-color:rgba(95,210,238,.6); }
.find ul { list-style:none; margin:6px 0 0; padding:0; }
.find li button { width:100%; text-align:left; display:flex; align-items:center; gap:9px; padding:7px 8px; border:0; background:none;
  border-radius:9px; cursor:pointer; }
.find li button:hover, .find li button:focus-visible { background:rgba(255,255,255,.06); }
.k-list { list-style:none; margin:0; padding:2px 6px 8px; overflow:auto; scrollbar-width:thin; }
.k-list li button { width:100%; display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:2px 10px; padding:8px; border:0;
  background:none; border-radius:10px; text-align:left; cursor:pointer; }
.k-list li button:hover, .k-list li button:focus-visible { background:rgba(255,255,255,.055); }
.k-list .gi { grid-row:span 2; }
.k-list .srv { font-weight:700; font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-list .vs { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.k-list .vs em { font-style:normal; color:var(--faint); font-weight:500; padding:0 4px; }
.k-list .cd { grid-row:span 2; }
.k-list .empty { color:var(--faint); padding:10px 8px 14px; }
.cd { font:600 17px/1 var(--display); color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.cd.soon { color:#ffe9a8; text-shadow:0 0 14px rgba(255,214,106,.55); }
.pill { display:inline-block; font:700 11.5px/1 var(--body); padding:4px 8px; border-radius:99px; white-space:nowrap; }
.pill.live { background:rgba(108,224,154,.14); color:var(--green); border:1px solid rgba(108,224,154,.4); }
.pill.open { color:var(--cyan); border:1px solid rgba(95,210,238,.4); }
.pill.priv { color:var(--violet); border:1px solid rgba(195,155,255,.4); }
.pill.mine { color:var(--gold); border:1px solid rgba(255,214,106,.45); }
.pill.quiet { color:var(--faint); border:1px solid var(--edge-lit); }
.gi { width:30px; height:30px; border-radius:9px; background:#161c2e; object-fit:cover; display:grid; place-items:center;
  font:700 12px/1 var(--display); color:var(--dim); flex:none; overflow:hidden; }
.ul-row { margin:0 12px 10px; padding:10px 12px; border-radius:11px; border:1px solid rgba(255,214,106,.28);
  background:linear-gradient(180deg, rgba(255,214,106,.08), rgba(255,214,106,.02)); display:grid; grid-template-columns:1fr auto; gap:2px 10px; cursor:pointer; }
.ul-row b { font:700 14px/1.2 var(--display); color:var(--gold); }
.ul-row span { color:var(--dim); font-size:12.5px; }
.ul-row .cd { grid-row:span 2; align-self:center; }

/* ---- the minimap ---- */
.map { position:absolute; left:var(--gut); bottom:max(12px, var(--bot0)); padding:6px; }
.map canvas { display:block; width:var(--map); height:var(--map); border-radius:10px; cursor:pointer; }
.mapz { position:absolute; top:10px; right:10px; display:flex; gap:4px; }
.mapz button { width:24px; height:24px; padding:0; border-radius:7px; border:1px solid rgba(238,241,248,.28); background:rgba(8,11,20,.9);
  color:var(--ink); font:700 15px/1 var(--body); cursor:pointer; opacity:.9; box-shadow:0 1px 4px rgba(0,0,0,.5); }
.mapz button:hover, .mapz button:focus-visible { opacity:1; border-color:rgba(95,210,238,.6); }
body[data-map="s"] .mapz [data-mz="-1"], body[data-map="l"] .mapz [data-mz="1"] { opacity:.25; pointer-events:none; }
.help { position:absolute; left:calc(var(--gut) + var(--map) + 22px); bottom:max(14px, var(--bot0)); margin:0; padding:8px 12px;
  color:var(--dim); font-size:12.5px; max-width:340px; transition:opacity .6s; }
.help.gone { opacity:0; pointer-events:none; }

/* ---- the ground you are at ---- */
.card { position:absolute; left:50%; bottom:max(14px, var(--bot0)); transform:translateX(-50%);
  width:min(460px, calc(100vw - 24px)); padding:10px 14px; display:grid; grid-template-columns:40px 1fr; gap:3px 12px; }
.card[hidden] { display:none; }
.card .gi { width:40px; height:40px; border-radius:11px; grid-row:span 2; font-size:14px; }
.card > :not(.gi) { grid-column:2; }
.card h3 { margin:0; font:700 17px/1.15 var(--display); letter-spacing:-.01em; display:flex; align-items:center; gap:9px; flex-wrap:wrap; cursor:pointer; }
/* folded (the usual way, kept in this browser): its name and the match that
   matters; the name or the arrow opens the rest */
.card h3::after { content:"▾"; color:var(--faint); font-size:13px; margin-left:auto; }
.card.open h3::after { content:"▴"; }
.card:not(.open) .meta, .card:not(.open) .lands, .card:not(.open) .acts, .card:not(.open) .betp, .card:not(.open) .upp { display:none; }
.card:not(.open) .nxs .nx + .nx { display:none; }
.card .meta { color:var(--dim); font-size:13px; }
.card .nx { display:flex; align-items:center; gap:10px; margin-top:4px; min-width:0; }
.card .nx .who { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.card .nx .who small { font-weight:500; color:var(--dim); font-size:12px; }
.card .nx .who em { font-style:normal; color:var(--faint); font-weight:500; padding:0 4px; }
.card .acts { grid-column:2; display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

.card .nxs { display:flex; flex-direction:column; gap:2px; }
/* where the ground stands and what it is built to: its league's land, its level */
.lands { display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.chip-l { display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 4px; border-radius:99px; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.045); border:1px solid var(--edge-lit); color:var(--ink); white-space:nowrap; }
.chip-l img { width:20px; height:20px; object-fit:contain; }
.chip-l img.lg { background:#f2f4f8; border-radius:50%; padding:2px; }
.chip-l.war { padding-left:9px; color:var(--violet); border-color:rgba(195,155,255,.4); }
.sc { font:700 15px/1 var(--display); color:var(--gold); padding:0 3px; font-variant-numeric:tabular-nums; }

/* ---- the realm's clock and the jump ---- */
.clock { padding:9px 13px; color:var(--dim); font:600 14px/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.jump-b { position:absolute; right:var(--gut); bottom:calc(max(12px, var(--bot0)) + 64px); width:74px; height:74px;
  border-radius:50%; font:700 15px/1 var(--display); color:var(--ink); cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; }
.jump-b:active { background:rgba(95,210,238,.25); border-color:rgba(95,210,238,.6); }
.jump-b[hidden] { display:none; }

/* ---- coins, the day's quests, a challenge ---- */
.coins { display:flex; align-items:center; gap:6px; padding:9px 13px; color:var(--dim); }
.coins b { color:var(--gold); font:700 15px/1 var(--display); font-variant-numeric:tabular-nums; }
.quests { position:absolute; left:var(--gut); top:calc(var(--top) + 56px); width:200px; padding:2px; border-radius:11px; }
.quests[hidden] { display:none; }
.quests .qh { width:100%; display:flex; justify-content:space-between; align-items:center; gap:6px; border:0; background:none; color:var(--dim);
  padding:6px 9px; cursor:pointer; font:700 12px/1 var(--display); }
.quests .qh b { color:var(--gold); font-variant-numeric:tabular-nums; }
.quests ol { list-style:none; margin:0; padding:0 8px 7px; display:none; flex-direction:column; gap:6px; }
.quests.open ol { display:flex; }
.quests li { display:grid; grid-template-columns:1fr auto; gap:3px 8px; font-size:11px; line-height:1.25; }
.quests li .qn { color:var(--ink); font-weight:600; }
.quests li .qr { color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.quests li .qp { grid-column:1 / -1; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.quests li .qp i { display:block; height:100%; background:var(--gold); }
.quests li.done .qn { color:var(--faint); text-decoration:line-through; }
.quests li.done .qr { color:var(--green); }
.invite { position:absolute; left:50%; top:calc(var(--top) + 62px); transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; padding:8px 8px 8px 10px; border-color:rgba(255,214,106,.5); max-width:calc(100vw - 24px); z-index:4; }
.invite[hidden] { display:none; }
.invite img { width:30px; height:30px; border-radius:50%; }
.invite span { font-weight:700; }
/* the bet panel in the ground card */
.betp { grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; margin-top:6px; padding-top:10px; border-top:1px solid var(--edge); }
.betp[hidden] { display:none; }
.betp .bh { display:flex; align-items:center; gap:10px; position:relative; padding-right:34px; }
.betp .bh span { color:var(--dim); font-size:12.5px; }
.betp .pclose { top:-6px; right:-6px; }
.bsides { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; }
.bs { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px; border-radius:11px; border:1px solid var(--edge-lit); background:rgba(255,255,255,.03);
  color:var(--ink); cursor:pointer; min-width:0; }
.bs b { font:700 14px/1.2 var(--display); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bs span { color:var(--gold); font:600 13px/1 var(--display); }
.bs.on { border-color:var(--gold); background:rgba(255,214,106,.1); }
.bstakes { display:flex; gap:6px; flex-wrap:wrap; }
.bstakes .tf { border:1px solid var(--edge-lit); background:none; color:var(--dim); border-radius:99px; padding:5px 12px; cursor:pointer; font-weight:700; font-size:12.5px; }
.bstakes .tf.on { color:var(--ink); border-color:var(--gold); background:rgba(255,214,106,.08); }
.betp .btn[disabled] { opacity:.45; cursor:default; }

/* ---- getting about: what you picked, how far, go ---- */
.travel { position:absolute; left:50%; top:calc(var(--top) + 62px); transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; padding:8px 8px 8px 16px; max-width:calc(100vw - 24px); border-color:rgba(95,210,238,.4); }
.travel[hidden] { display:none; }
.travel .tl { display:flex; flex-direction:column; min-width:0; }
.travel .tk { color:var(--cyan); font-size:11.5px; font-weight:700; }
.travel b { font:700 16px/1.2 var(--display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.travel .dist { font:600 16px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.travel .tb { display:flex; gap:6px; }
.travel .btn { padding:8px 13px; }

/* ---- shouts ---- */
.shouts { position:absolute; left:var(--gut); bottom:calc(max(12px, var(--bot0)) + 206px);
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:6px; }
.shouts[hidden] { display:none; }
.shout-b { background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.shouts .chips { display:none; flex-direction:column; gap:5px; }
.shouts.open .chips { display:flex; }
.chip { justify-content:flex-start; padding:7px 12px; font-size:13px; background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.chip kbd { font:600 11px/1 var(--body); color:var(--faint); border:1px solid var(--edge-lit); border-radius:5px; padding:2px 5px; }

/* ---- a player's card ---- */
.pcard { position:absolute; left:50%; bottom:max(14px, var(--bot0)); transform:translateX(-50%);
  width:min(440px, calc(100vw - 24px)); padding:16px; display:flex; flex-direction:column; gap:12px; }
.pcard[hidden] { display:none; }
.pclose { position:absolute; right:10px; top:8px; width:32px; height:32px; border:0; background:none; color:var(--dim);
  font:400 24px/1 var(--body); cursor:pointer; border-radius:8px; }
.pclose:hover { background:rgba(255,255,255,.06); color:var(--ink); }
.ph { display:flex; align-items:center; gap:14px; padding-right:28px; }
.pav { width:58px; height:58px; border-radius:50%; border:2px solid var(--edge-lit); flex:none; }
.ph h3 { margin:0; font:700 21px/1.15 var(--display); letter-spacing:-.01em; }
.phome { display:flex; align-items:center; gap:7px; margin-top:4px; }
.phome .gi { width:20px; height:20px; border-radius:6px; font-size:9px; }
.pstats { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.pstats > div { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px; border-radius:11px;
  background:rgba(255,255,255,.035); border:1px solid var(--edge); text-align:center; min-width:0; }
.pstats b { font:700 16px/1.1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pstats span { color:var(--dim); font-size:11.5px; }
.pstats .rank { width:26px; height:26px; object-fit:contain; }
.pbest { display:flex; align-items:center; gap:14px; padding:8px; border-radius:12px; background:rgba(255,214,106,.05); border:1px solid rgba(255,214,106,.2); }
.pbest img { width:56px; height:89px; object-fit:cover; border-radius:6px; }
.pbest > div { display:flex; flex-direction:column; gap:2px; }
.pbest b { font:700 16px/1.2 var(--display); }
.pbest .ovr { font:700 22px/1 var(--display); color:var(--gold); }
.pcard .acts { display:flex; gap:8px; flex-wrap:wrap; }
.ptro { display:flex; gap:6px; flex-wrap:wrap; }
.tchip { font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; border:1px solid var(--edge-lit); }
.tchip.ul { color:var(--gold); border-color:rgba(255,214,106,.45); background:rgba(255,214,106,.07); }
.tchip.league { color:#d6dce8; border-color:rgba(196,204,216,.4); }
.tchip.sets { color:var(--cyan); border-color:rgba(95,210,238,.4); }


/* ---- messages ---- */
.toast { position:absolute; left:50%; top:calc(var(--top) + 124px); transform:translateX(-50%);
  padding:10px 16px; font-weight:700; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.on { opacity:1; }
.veil { position:fixed; inset:0; display:grid; place-items:center; background:var(--void); z-index:5; transition:opacity .6s; }
.veil.gone { opacity:0; pointer-events:none; }
.veil p { font:600 16px/1.4 var(--display); color:var(--dim); text-align:center; padding:0 24px; max-width:460px; }
.veil .ball { width:44px; height:44px; margin:0 auto 18px; border-radius:50%; border:2px solid rgba(255,214,106,.6);
  border-top-color:transparent; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.watch { position:absolute; left:50%; top:calc(var(--top) + 58px); transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; padding:9px 10px 9px 16px; max-width:calc(100vw - 24px); }
.watch span { color:var(--dim); font-size:13px; }

/* ---- small screens and the Activity's narrow frames ---- */
/* ---- voice chat ---- */
.voice { position:absolute; left:var(--gut); bottom:calc(max(12px, var(--bot0)) + 254px); display:flex; align-items:center;
  gap:2px; padding:3px; border-radius:12px; }
.voice[hidden] { display:none; }
.voice button { display:flex; align-items:center; gap:7px; border:0; background:none; color:var(--ink); font:700 13px/1 var(--body);
  padding:8px 10px; border-radius:9px; cursor:pointer; }
.voice button:hover:not([disabled]) { background:rgba(238,241,248,.08); }
.voice button:focus-visible { outline:2px solid var(--cyan, #5fd2ee); outline-offset:1px; }
.voice button[disabled] { color:var(--dim); cursor:default; }
.voice svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.voice.on .vb { color:#6ce09a; }
.voice.on.muted .vb { color:#ff8a8a; }
.voice .vn { color:var(--dim); font:600 12px/1 var(--body); padding:0 6px 0 2px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.voice .vx { font-size:18px; padding:6px 9px; color:var(--dim); }

/* ---- the underground ---- */

/* ---- a card drop: the way to it ---- */
.dropb { position:absolute; left:50%; top:calc(var(--top) + 62px); transform:translateX(-50%); z-index:3;
  padding:10px 18px; border:1px solid rgba(255,214,106,.65); border-radius:999px; background:rgba(30,22,6,.9); color:#ffd66a;
  font:700 14px/1 var(--display); white-space:nowrap; cursor:pointer; box-shadow:0 0 18px rgba(255,214,106,.35); animation:droppulse 1.6s ease-in-out infinite; }
.dropb[hidden] { display:none; }
.dropb:focus-visible { outline:2px solid #ffd66a; outline-offset:3px; }
@keyframes droppulse { 50% { box-shadow:0 0 30px rgba(255,214,106,.65); } }
@media (prefers-reduced-motion: reduce) { .dropb { animation:none; } }

/* ---- packs ---- */
.pack-cta { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 150px); transform:translateX(-50%); z-index:3;
  padding:12px 20px; font-size:16px; animation:popin .35s cubic-bezier(.2,.8,.2,1.2); }
.pack-cta[hidden] { display:none; }
@keyframes popin { from { transform:translateX(-50%) scale(.6); opacity:0; } }
.packp { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 150px); transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:14px; }
.packp[hidden] { display:none; }
.packp span { color:var(--gold); font:700 14px/1 var(--body); white-space:nowrap; }
.packp span:empty { display:none; }

/* ---- chat ---- */
.chat { position:absolute; left:var(--gut); bottom:calc(max(12px, var(--bot0)) + var(--map) + 22px); width:min(340px, calc(100vw - 24px));
  display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.chat[hidden] { display:none; }
.chat .log { list-style:none; margin:0; padding:0; max-height:132px; overflow:hidden; display:flex; flex-direction:column; gap:3px; }
.chat .log li { font:500 13px/1.3 var(--body); color:var(--ink); text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); overflow-wrap:anywhere;
  transition:opacity .6s; }
.chat .log li b { color:var(--cyan); font-weight:700; }
.chat .log li .cav { width:16px; height:16px; border-radius:50%; vertical-align:-3px; margin-right:5px; box-shadow:0 0 0 1px rgba(0,0,0,.6); }
.chat .log li.mine b { color:var(--gold); }
.chat .log li.old { opacity:.38; }
.chat.open .log li.old { opacity:1; }
.chat .say { pointer-events:auto; }
.chat .say input { width:100%; box-sizing:border-box; padding:8px 11px; border-radius:10px; border:1px solid rgba(238,241,248,.14);
  background:rgba(8,11,20,.55); color:var(--ink); font:500 13px/1.2 var(--body); outline:none; }
.chat .say input:focus { background:rgba(8,11,20,.85); border-color:rgba(95,210,238,.6); }
.chat .say input::placeholder { color:var(--dim); }
.chat-b { position:absolute; right:var(--gut); bottom:calc(max(14px, var(--bot0)) + 140px); padding:10px; border-radius:12px; color:var(--ink); }
.chat-b[hidden] { display:none; }
.chat-b svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
/* the chat pushes the shout and voice buttons up the left side */
.shouts { bottom:calc(max(12px, var(--bot0)) + var(--map) + 208px); }
.voice { bottom:calc(max(12px, var(--bot0)) + var(--map) + 256px); }

/* ---- things to do ---- */
.pk-cta, .boat-cta { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 150px); transform:translateX(-50%); z-index:3;
  padding:11px 18px; font-size:15px; }
.pk-cta[hidden], .boat-cta[hidden] { display:none; }
.pk-cta[disabled], .boat-cta[disabled] { background:var(--panel); color:var(--dim); border-color:rgba(238,241,248,.12); }
.lapp { position:absolute; left:50%; top:calc(var(--top) + 58px); transform:translateX(-50%); display:flex; align-items:baseline;
  gap:10px; padding:8px 16px; border-radius:12px; z-index:3; }
.lapp[hidden] { display:none; }
.lapp b { font:700 22px/1 var(--display, var(--body)); color:var(--gold); font-variant-numeric:tabular-nums; min-width:76px; text-align:right; }
.lapp span { color:var(--dim); font:600 13px/1 var(--body); }
.aim { position:absolute; inset:0; z-index:5; cursor:crosshair; touch-action:none; }
.aim[hidden] { display:none; }
.aim-goal { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 120px); transform:translateX(-50%);
  width:min(420px, 80vw); aspect-ratio:2.6 / 1; }
/* the goal inside the aim's sweep: posts at -1 and 1 of +-1.3, the bar at 1 of 1.3 */
.aim-goal::before { content:""; position:absolute; left:11.5%; right:11.5%; bottom:0; height:76.9%; border:4px solid rgba(255,255,255,.92);
  border-bottom:0; border-radius:3px 3px 0 0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px); }
.aim-goal::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:rgba(255,255,255,.4); }
.aim-dot { position:absolute; width:26px; height:26px; margin:0 0 -13px -13px; border-radius:50%; border:3px solid var(--gold);
  box-shadow:0 0 14px rgba(255,214,106,.8), inset 0 0 0 4px rgba(255,214,106,.25); }
.aim.wait .aim-dot { opacity:.25; }
.aim-tip { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 84px); transform:translateX(-50%); margin:0; white-space:nowrap;
  color:var(--ink); font:600 14px/1 var(--body); text-shadow:0 1px 4px rgba(0,0,0,.9); }
.aim-x { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 30px); transform:translateX(-50%); }
.quests li.hunt .qn::before { content:"●"; color:var(--gold); margin-right:5px; font-size:10px; }

/* ---- the thumbstick (phones) ---- */
.stick { position:absolute; left:var(--gut); bottom:max(14px, var(--bot0)); width:120px; height:120px; pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; z-index:2; opacity:.55; transition:opacity .2s; }
/* a thumb a little off the ring still takes it */
.stick::before { content:""; position:absolute; inset:-22px; border-radius:50%; }
.stick[hidden] { display:none; }
.stick.on { opacity:1; transition:none; }
.stick .ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(238,241,248,.28); background:rgba(8,11,20,.28); }
.stick .knob { position:absolute; left:34px; top:34px; width:52px; height:52px; border-radius:50%; background:rgba(238,241,248,.6);
  box-shadow:0 4px 14px rgba(0,0,0,.4); }
.stick b { position:absolute; left:0; right:0; top:-22px; text-align:center; font:700 11.5px/1 var(--body); color:var(--ink); text-shadow:0 1px 4px rgba(0,0,0,.8); }
.stick.used b { display:none; }

/* ---- phones, and short landscape screens: the map and buttons along the
   top, the stick and jump at the bottom, the ground card folded above them ---- */
@media (max-width: 720px), (max-height: 500px) {
  .bar { gap:6px; }
  .brand { padding:4px; }
  .brand > span { display:none; }
  .brand img { width:30px; height:30px; }
  .online { padding:8px 10px; }
  .online span:last-child { display:none; }
  .clock { padding:8px 9px; font-size:13px; }
  .coins { padding:8px 10px; }
  .coins span { display:none; }
  .who .me span { display:none; }
  .me { padding:4px; }
  .help { display:none; }
  .map { top:calc(var(--top) + 52px); bottom:auto; padding:4px; }
  :root { --map:92px; }
  body[data-map="s"] { --map:72px; }
  body[data-map="l"] { --map:170px; }
  .mapz { top:6px; right:6px; }
  .mapz button { width:22px; height:22px; opacity:.85; }
  .quests { left:var(--gut); right:auto; top:calc(var(--top) + var(--map) + 68px); width:auto; max-width:min(240px, calc(100vw - 24px)); }
  .shouts { left:auto; right:var(--gut); top:calc(var(--top) + 52px); bottom:auto; flex-direction:column; align-items:flex-end; }
  .shouts .chips { align-items:flex-end; }
  .go { top:calc(var(--top) + 100px); bottom:auto; right:var(--gut); width:auto; max-height:72vh; }
  .go.open { left:var(--gut); top:calc(var(--top) + 52px); }
  .go:not(.open) { background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .go:not(.open) .quick, .go:not(.open) .find, .go:not(.open) .k-list, .go:not(.open) .p-list, .go:not(.open) .ul-row, .go:not(.open) .tabs { display:none; }
  .go-h { padding:9px 10px 9px 13px; }
  .go:not(.open) .go-h { padding:0; }
  .go-h .toggle { display:inline-flex; background:var(--panel); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .go-h .x-close, .go.shut .x-open { display:none; }
  .go .t-close, .go.open .t-open { display:none; }
  .go.open .t-close { display:inline; }
  .travel, .invite { top:calc(var(--top) + 52px); left:var(--gut); right:var(--gut); transform:none; max-width:none; z-index:4; }
  .travel { gap:8px; padding:7px 7px 7px 12px; }
  .travel b { max-width:none; }
  .travel .tl { flex:1; }
  .toast { top:calc(var(--top) + 112px); max-width:calc(100vw - 24px); font-size:13px; text-align:center; }
  .jump-b { bottom:max(14px, var(--bot0)); width:72px; height:72px; }
  .voice { left:auto; right:var(--gut); bottom:calc(max(14px, var(--bot0)) + 82px); }
  /* beside the voice button, below the ground card (which covered it higher up) */
  .chat-b { bottom:calc(max(14px, var(--bot0)) + 82px); right:calc(var(--gut) + 58px); }
  .shouts { bottom:auto; }
  .chat { top:calc(var(--top) + var(--map) + 114px); bottom:auto; width:min(260px, 62vw); }
  .chat .log { max-height:84px; }
  .chat .log li { font-size:12px; }
  .chat .say { display:none; }
  .chat.open .say { display:block; position:fixed; left:var(--gut); right:var(--gut); bottom:max(10px, var(--bot0)); z-index:6; }
  .chat.open .say input { font-size:16px; padding:11px 13px; background:rgba(8,11,20,.94); }
  .pk-cta, .boat-cta { bottom:calc(max(14px, var(--bot0)) + 214px); }
  .lapp { top:calc(var(--top) + 52px); }
  .voice .vb span, .voice .vn { display:none; }
  .pack-cta { bottom:calc(max(14px, var(--bot0)) + 214px); }
  .packp { bottom:calc(max(14px, var(--bot0)) + 214px); }
  .voice button { padding:10px; }
  .voice svg { width:22px; height:22px; }
  /* the ground card, folded to its name and next match; its name opens it */
  .card { bottom:calc(max(14px, var(--bot0)) + 146px); width:calc(100vw - 24px); max-width:520px; padding:9px 12px; grid-template-columns:36px 1fr; gap:2px 10px;
    max-height:calc(100vh - 300px); overflow:auto; }
  .card .gi { width:36px; height:36px; border-radius:10px; grid-row:span 2; font-size:13px; }
  .card h3 { font-size:16px; }
  .card .nx { margin-top:0; }
  .pcard { bottom:calc(max(14px, var(--bot0)) + 132px); max-height:calc(100vh - 260px); overflow:auto; }
  .pstats b { font-size:14px; }
  .lands .chip-l { font-size:11.5px; }
  .watch { flex-direction:column; align-items:stretch; text-align:center; gap:8px; padding:10px; width:calc(100vw - 24px); }
  .go.open ~ .card, .go.open ~ .map, .go.open ~ .shouts, .go.open ~ .pcard, .go.open ~ .jump-b, .go.open ~ .travel, .go.open ~ .quests, .go.open ~ .stick, .go.open ~ .voice, .go.open ~ .chat, .go.open ~ .chat-b, .go.open ~ .pk-cta, .go.open ~ .boat-cta { display:none; }
}
/* a phone on its side: little height, so the card sits low between the stick and jump */
@media (max-height: 500px) and (orientation: landscape) {
  .card, .pcard { bottom:max(14px, var(--bot0)); width:min(460px, calc(100vw - 320px)); max-height:calc(100vh - 80px); }
  :root { --map:80px; }
  body[data-map="s"] { --map:64px; }
  body[data-map="l"] { --map:140px; }
  .quests { top:calc(var(--top) + 52px); left:calc(var(--gut) + var(--map) + 28px); }
  .chat { top:calc(var(--top) + var(--map) + 66px); }
  .chat .log { max-height:58px; }
}
@media (prefers-reduced-motion: reduce) { .veil .ball { animation:none; } .toast, .veil, .help { transition:none; } }

/* ---- events: the chip in the top bar, the banner when one begins ---- */
.evc { display:flex; align-items:center; gap:7px; padding:8px 12px; cursor:pointer; color:var(--dim); font:600 13px/1 var(--display); }
.evc[hidden] { display:none; }
.evc b { color:var(--ink); font-weight:700; }
.evc span { font-variant-numeric:tabular-nums; }
.evc.golden b { color:var(--gold); }
.evc.on { border-color:rgba(255,214,106,.7); background:linear-gradient(180deg, rgba(255,214,106,.22), rgba(255,170,40,.12)); box-shadow:0 0 18px rgba(255,200,80,.35); }
.evc.on span { color:#ffe7a8; }
.banner { position:absolute; left:50%; top:calc(var(--top) + 64px); transform:translate(-50%, -8px); width:min(560px, calc(100vw - 32px));
  text-align:center; pointer-events:none; opacity:0; transition:opacity .5s, transform .5s; }
.banner[hidden] { display:none; }
.banner.on { opacity:1; transform:translate(-50%, 0); }
.banner b { display:block; font:800 clamp(30px, 6vw, 52px)/1.05 var(--display); letter-spacing:.01em; color:#ffd66a;
  text-shadow:0 2px 0 #7a4a00, 0 0 28px rgba(255,190,60,.65), 0 4px 18px rgba(0,0,0,.6); }
.banner span { display:block; margin-top:8px; font:600 15px/1.4 var(--display); color:#fff3d0; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.6); }
@media (max-width: 700px) { .evc { padding:8px 9px; } .evc b { display:none; } .banner span { font-size:13px; } }
@media (prefers-reduced-motion: reduce) { .banner { transition:none; } }
.evc svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.evc.golden svg { color:var(--gold); }

/* ---- your card buddy: the choice under a card of yours held up close ---- */
.buddyb { position:absolute; left:50%; bottom:calc(max(12px, var(--bot0)) + 26px); transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:12px; padding:8px 10px 8px 14px; pointer-events:auto; }
.buddyb[hidden] { display:none; }
.buddyb span { color:var(--dim); font:600 14px/1.2 var(--display); }

/* ---- the Keeper raid: how to shoot, and your goals ---- */
.evc.raid b, .evc.raid svg { color:#39e27a; }
.evc.raid.on { border-color:rgba(57,226,122,.7); background:linear-gradient(180deg, rgba(57,226,122,.2), rgba(20,120,60,.12)); box-shadow:0 0 18px rgba(57,226,122,.3); }
.evc.raid.on span { color:#c8f7d8; }
.raidh { position:absolute; left:50%; top:calc(var(--top) + 176px); transform:translateX(-50%); display:flex; gap:14px; align-items:center;
  padding:9px 14px; font:600 14px/1.2 var(--display); color:var(--dim); white-space:nowrap; }
.raidh[hidden] { display:none; }
.raidh b { color:#39e27a; font-weight:700; }
@media (max-width: 700px) { .raidh { top:calc(var(--top) + 100px); font-size:12.5px; white-space:normal; max-width:calc(100vw - 24px); } }
.dropb.low { top:calc(var(--top) + 118px); }

/* ---- stadium upgrades: the panel on a ground's card ---- */
.chip-l.up { color:var(--gold); border-color:rgba(255,214,106,.45); }
.upp { grid-column:1 / -1; display:flex; flex-direction:column; gap:8px; margin-top:6px; padding-top:10px; border-top:1px solid var(--edge); }
.upp[hidden] { display:none; }
.upp .uph { display:flex; align-items:baseline; gap:10px; position:relative; padding-right:34px; }
.upp .uph b { font:700 15px/1.2 var(--display); }
.upp .pclose { top:-6px; right:-6px; }
.upc { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,214,106,.5); background:rgba(255,214,106,.06); }
.upc .ut { display:flex; flex-direction:column; }
.upc .ut b { font:700 15px/1.2 var(--display); }
.upc .ut small { color:var(--dim); font-size:12.5px; }
.upw { display:flex; align-items:center; gap:10px; }
.upbar { flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; display:block; }
.upbar i { display:block; height:100%; background:linear-gradient(90deg, #ffb03a, #ffd66a); }
.upn { font:600 12.5px/1 var(--display); color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap; }
.upl { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.upl li { padding:4px 10px; border-radius:99px; border:1px solid var(--edge); color:var(--faint); font:600 12.5px/1.3 var(--display); }
.upl li.done { color:#6ce09a; border-color:rgba(108,224,154,.45); }
.upg { display:flex; gap:6px; flex-wrap:wrap; }
.upg .btn[disabled] { opacity:.45; cursor:default; }
.upt b { color:var(--ink); }
.upp p { margin:0; }

/* ---- Carry the Cup: the score, and the cup in your hands ---- */
.evc.cup b, .evc.cup svg { color:#e8f0ff; }
.evc.cup.on { border-color:rgba(232,240,255,.7); background:linear-gradient(180deg, rgba(232,240,255,.18), rgba(120,140,180,.12)); box-shadow:0 0 18px rgba(200,215,255,.3); }
.cuph { position:absolute; left:50%; top:calc(var(--top) + 176px); transform:translateX(-50%); display:flex; gap:12px; align-items:center;
  padding:8px 12px; font:600 14px/1.2 var(--display); color:var(--dim); white-space:nowrap; pointer-events:auto; }
.cuph[hidden] { display:none; }
.cuph b { color:var(--ink); }
.cuph.mine { border-color:rgba(255,214,106,.7); box-shadow:0 0 18px rgba(255,200,80,.3); }
.cuph .cy { color:var(--gold); font-weight:700; }
.cuph .btn { padding:6px 12px; }
@media (max-width: 700px) { .cuph { top:calc(var(--top) + 100px); white-space:normal; flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 24px); font-size:12.5px; } }

/* ---- the Cup Run (/cup): the desk's button and the run's panel ---- */
.cup-cta { position:absolute; left:50%; bottom:calc(max(14px, var(--bot0)) + 150px); transform:translateX(-50%); z-index:3;
  padding:12px 20px; font-size:16px; animation:popin .35s cubic-bezier(.2,.8,.2,1.2); }
.cup-cta[hidden] { display:none; }
.cupr { position:fixed; z-index:8; left:50%; top:50%; transform:translate(-50%, -50%); width:min(440px, calc(100vw - 24px));
  max-height:calc(100vh - 32px); overflow:auto; padding:16px 18px 16px; background:rgba(10,13,22,.97); }
.cupr[hidden] { display:none; }
.cupr .x-close { position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:9px; border:0; background:rgba(238,241,248,.06);
  color:var(--dim); font:700 20px/1 var(--body); cursor:pointer; }
.cupr .x-close:hover { color:var(--ink); background:rgba(238,241,248,.12); }
.cupr h3 { margin:0 36px 8px 0; font:600 19px/1.2 var(--display); color:var(--cyan); text-wrap:balance; }
.cupr h3.gold { color:var(--gold); } .cupr h3.red { color:#ff8a7a; }
.cupr p { margin:0 0 10px; color:var(--ink); }
.cupr p b { color:var(--gold); font-weight:700; }
.cr-note { color:var(--dim) !important; font-size:13px; }
.cr-rungs { list-style:none; margin:4px 0 12px; padding:0; display:grid; gap:4px; }
.cr-rungs li { display:grid; grid-template-columns:14px 1fr auto; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  padding:7px 10px; border-radius:10px; border:1px solid var(--edge); background:rgba(255,255,255,.02); }
.cr-rungs li i { grid-row:1 / 3; width:12px; height:12px; border-radius:50%; border:2px solid var(--faint); }
.cr-rungs li.won i { background:var(--green); border-color:var(--green); }
.cr-rungs li.here { border-color:rgba(95,210,238,.5); background:rgba(95,210,238,.07); }
.cr-rungs li.here i { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(95,210,238,.2); }
.cr-rungs .cr-club { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-rungs li.won .cr-club { color:var(--dim); }
.cr-rungs .prize { grid-row:1 / 3; grid-column:3; font:600 15px/1 var(--display); color:var(--gold); font-variant-numeric:tabular-nums; }
.cr-rungs .prize::before, .cr-pot .coin::before { content:""; display:inline-block; width:.8em; height:.8em; margin-right:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff2b8, var(--gold) 55%, #b98a26); vertical-align:-1px; }
.cr-rungs small { grid-column:2; color:var(--faint); font-size:11.5px; line-height:1.2; }
.cr-pot { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cr-pot span { color:var(--dim); }
.cr-pot .coin { font:600 22px/1 var(--display); color:var(--gold) !important; font-variant-numeric:tabular-nums; }
.cr-pot small { flex-basis:100%; color:var(--faint); font-size:12px; }
.cr-warn { font-size:12.5px; color:var(--dim) !important; border-left:3px solid #ff8a7a; padding:2px 0 2px 10px; }
.cr-warn b { color:#ff8a7a !important; display:block; }
.cr-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:12px; }
.cr-btns .btn { flex:1 1 auto; }
.btn.green { background:#2f9a5e; border-color:#2f9a5e; color:#fff; }
.btn.green:hover { background:#38b06c; }
.btn.red { background:#c4413a; border-color:#c4413a; color:#fff; }
.btn.red:hover { background:#d9504a; }
.btn:disabled { opacity:.5; pointer-events:none; }
.cr-banner { margin:0 36px 8px 0 !important; color:var(--gold) !important; font:600 14px/1.3 var(--display); }
.cr-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--edge); margin-bottom:8px; }
.cr-score span { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-score span:last-child { text-align:right; }
.cr-score b { font:700 26px/1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cr-score em { font-style:normal; }
.cr-score.won { border-color:rgba(108,224,154,.55); } .cr-score.lost { border-color:rgba(255,138,122,.55); }
.cr-lines { list-style:none; margin:0; padding:0; display:grid; gap:5px; min-height:40px; }
.cr-lines li { display:grid; grid-template-columns:44px 1fr; gap:8px; font-size:13px; line-height:1.4; color:var(--ink);
  animation:lineIn .3s ease-out; }
.cr-lines li time { color:var(--faint); font:600 12px/1.6 var(--display); font-variant-numeric:tabular-nums; text-align:right; }
.cr-lines li.goal span { color:var(--gold); }
.cr-lines li b { color:var(--gold); }
.cr-lines[data-done] li { animation:none; }
@keyframes lineIn { from { opacity:0; transform:translateY(4px); } }
.cupr hr { border:0; border-top:1px solid var(--edge); margin:12px 0; }
.cr-burnhead { font:700 13px/1 var(--display) !important; letter-spacing:.08em; text-transform:uppercase; color:#ff8a7a !important; }
.cr-burnt { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; margin-bottom:10px; }
.cr-burnt figure { margin:0; text-align:center; }
.cr-burnt img { width:100%; aspect-ratio:840 / 1340; object-fit:cover; border-radius:6px; filter:grayscale(.85) brightness(.75);
  box-shadow:0 0 0 2px #ff6b5a, 0 0 18px -4px #ff6b5a; }
.cr-burnt figcaption { font-size:11px; color:var(--dim); margin-top:4px; line-height:1.25; }
.cr-foot { color:var(--faint) !important; font-size:12px; }
@media (max-width: 720px), (max-height: 500px) {
  .cup-cta { bottom:calc(max(14px, var(--bot0)) + 214px); }
  .cupr { top:auto; bottom:max(10px, var(--bot0)); transform:translateX(-50%); max-height:calc(100vh - var(--top) - 30px); padding:12px 14px 0; }
  /* on a phone: the rungs a line each, and the buttons always in reach at the foot */
  .cupr p { font-size:13.5px; margin-bottom:8px; }
  .cr-rungs li { padding:5px 9px; grid-template-rows:auto; }
  .cr-rungs li i { grid-row:1; }
  .cr-rungs small { display:none; }
  .cr-rungs .prize { grid-row:1; font-size:14px; }
  .cr-btns { position:sticky; bottom:0; margin:10px -14px 0; padding:10px 14px max(12px, var(--bot0)); background:linear-gradient(180deg, rgba(11,15,25,0), rgba(11,15,25,.96) 30%); }
}
@media (prefers-reduced-motion: reduce) { .cr-lines li { animation:none; } }

/* ---- the Club: every command, played here (console.js) ---- */
.clubb { display:flex; align-items:center; gap:7px; padding:8px 13px 8px 10px; color:var(--ink); cursor:pointer; position:relative;
  font:700 14px/1 var(--display); letter-spacing:.005em; }
.clubb svg { width:18px; height:18px; fill:none; stroke:var(--gold); stroke-width:1.9; }
.clubb:hover, .clubb.on { border-color:rgba(255,214,106,.45); }
.clubb.on { background:rgba(255,214,106,.12); }
.clubb[hidden] { display:none; }
.club-n { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--gold); color:#1b1405;
  font:700 11px/18px var(--body); text-align:center; }
.clubb .club-n { position:absolute; right:-6px; top:-6px; box-shadow:0 0 0 2px var(--void); }
.club-n[hidden] { display:none; }
body.club-open .go { visibility:hidden; }

/* section.club: the Club panel itself, not any element named club (the Cup
   Run's rungs once were, and took the panel's place over the screen) */
section.club, .xip { position:absolute; z-index:7; display:flex; flex-direction:column; overflow:hidden; }
section.club { right:var(--gut); top:calc(var(--top) + 58px); bottom:max(12px, var(--bot0));
  width:min(470px, calc(100vw - 24px)); }
section.club[hidden], .xip[hidden] { display:none; }
.club-h { display:flex; align-items:center; gap:12px; padding:12px 12px 10px 16px; border-bottom:1px solid var(--edge); }
.club-h h2 { margin:0; font:700 20px/1 var(--display); letter-spacing:-.01em; }
.club-tabs { flex:1; display:flex; gap:4px; }
.club-tabs button { position:relative; border:0; background:none; padding:6px 10px; border-radius:9px; cursor:pointer; color:var(--dim);
  font:700 14px/1.1 var(--display); display:inline-flex; align-items:center; gap:6px; }
.club-tabs button[aria-selected="true"] { color:var(--ink); background:rgba(255,255,255,.07); }
.club-x { width:32px; height:32px; flex:none; border-radius:9px; border:0; background:rgba(238,241,248,.06); color:var(--dim);
  font:700 20px/1 var(--body); cursor:pointer; }
.club-x:hover { color:var(--ink); background:rgba(238,241,248,.12); }
.club-cmds, .club-form, .club-feed { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.club-cmds[hidden], .club-form[hidden], .club-feed[hidden], .club-modal[hidden] { display:none; }
.club-find { display:block; padding:12px 14px 4px; }
.club-find input, .club-form input, .club-form select, .club-form textarea, .club-modal input, .club-modal textarea, .csel select {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--edge-lit); background:rgba(5,7,13,.6); color:var(--ink); outline:none; font:500 14px/1.3 var(--body); }
.club-find input:focus, .club-form input:focus, .club-form select:focus, .club-modal input:focus, .club-modal textarea:focus { border-color:var(--cyan); }
.club-groups { padding:4px 14px 16px; }
.club-g h3 { margin:14px 2px 7px; font:600 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.club-cs { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:7px; }
.club-ci { display:flex; min-width:0; }
.club-c { flex:1; min-width:0; text-align:left; display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:11px; cursor:pointer;
  border:1px solid var(--edge); background:rgba(255,255,255,.035); color:var(--ink); }
.club-ci:has(.club-more) .club-c { border-top-right-radius:0; border-bottom-right-radius:0; }
.club-c:hover, .club-more:hover { background:rgba(255,255,255,.075); border-color:var(--edge-lit); }
.club-c b { font:700 14px/1.2 var(--display); color:var(--gold); }
.club-c small { font-size:12px; line-height:1.3; color:var(--dim); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.club-more { flex:none; width:34px; border:1px solid var(--edge); border-left:0; border-radius:0 11px 11px 0; background:rgba(255,255,255,.035);
  color:var(--dim); cursor:pointer; font:700 16px/1 var(--body); }
.club-wait { color:var(--dim); padding:18px 4px; margin:0; }

.club-form { padding:12px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.cf-h { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; margin:0 0 2px; }
.cf-h b { font:700 18px/1.2 var(--display); color:var(--gold); }
.cf-h small { grid-column:2; color:var(--dim); font-size:13px; }
.cf-back { grid-row:span 2; width:32px; height:32px; border-radius:9px; border:1px solid var(--edge-lit); background:none; color:var(--ink); cursor:pointer; font:700 20px/1 var(--body); }
.cf { display:flex; flex-direction:column; gap:4px; }
.cf label b { font-weight:700; }
.cf small { color:var(--dim); font-size:12.5px; }
.req { font-style:normal; font-size:11px; color:var(--gold); margin-left:6px; }
.cf-subs { display:grid; gap:7px; }
.cf-subs .chip { text-align:left; display:flex; flex-direction:column; gap:2px; padding:9px 11px; border-radius:11px; }
.cf-subs .chip small { color:var(--dim); font-size:12px; }
.cf-go { align-self:flex-start; padding:10px 22px; }
.cf-go:disabled { opacity:.45; cursor:default; }
.ac { position:relative; display:block; }
.ac-l { position:absolute; z-index:2; left:0; right:0; top:calc(100% + 4px); margin:0; padding:5px; list-style:none; max-height:240px; overflow:auto;
  background:var(--panel-solid); border:1px solid var(--edge-lit); border-radius:11px; box-shadow:0 18px 40px -16px rgba(0,0,0,.9); }
.ac-l[hidden] { display:none; }
.ac-l li { padding:8px 10px; border-radius:8px; cursor:pointer; }
.ac-l li:hover { background:rgba(255,255,255,.07); }
.chip { border:1px solid var(--edge-lit); background:rgba(255,255,255,.035); color:var(--ink); border-radius:999px; padding:6px 11px; cursor:pointer; font:600 13px/1.2 var(--body); }
.chip.on { border-color:var(--gold); background:rgba(255,214,106,.14); }

/* the replies, as Discord draws a channel */
.club-feed { list-style:none; margin:0; padding:10px 12px 16px; display:flex; flex-direction:column; gap:14px; -webkit-user-select:text; user-select:text; }
.cmsg { min-width:0; }
.cm-h { display:flex; align-items:center; gap:7px; margin:0 0 6px; font-size:13px; }
.cm-h img { width:22px; height:22px; border-radius:50%; }
.cm-h b { font:700 13.5px/1 var(--display); color:var(--ink); }
.cm-h time { color:var(--faint); font-size:11.5px; }
.cm-dm { font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--violet); border:1px solid rgba(195,155,255,.45); border-radius:5px; padding:1px 5px; }
.cm-think { color:var(--dim); margin:0; display:flex; align-items:center; gap:3px; }
.cm-think i { width:5px; height:5px; border-radius:50%; background:var(--dim); animation:cmdot 1.2s infinite; }
.cm-think i:nth-child(2) { animation-delay:.2s; } .cm-think i:nth-child(3) { animation-delay:.4s; }
@keyframes cmdot { 0%, 60%, 100% { opacity:.25; } 30% { opacity:1; } }
.cm-b { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cm-b p, .td p, .e-d p, .ef-v p { margin:0; }
.cm-b p.gap, .td p.gap, .e-d p.gap { height:.55em; }
.cm-b a, .emb a { color:var(--cyan); }
.emo { width:1.35em; height:1.35em; vertical-align:-.3em; object-fit:contain; }
.e-t .emo, .mdh .emo { width:1.2em; height:1.2em; }
.ment { color:#c9d4ff; background:rgba(95,120,238,.22); border-radius:4px; padding:0 3px; font-weight:600; }
.cmdm { cursor:pointer; }
.ts { background:rgba(255,255,255,.07); border-radius:4px; padding:0 3px; }
.spoil { background:#202534; color:transparent; border-radius:4px; cursor:pointer; }
.spoil.open { color:inherit; background:rgba(255,255,255,.06); }
.mdh { font:700 17px/1.25 var(--display); margin:4px 0 2px !important; }
.mdh.h1 { font-size:20px; } .mdh.h3 { font-size:15px; }
.mds { color:var(--faint); font-size:12px; }
.mdl { margin:2px 0; padding-left:20px; }
blockquote { margin:2px 0; padding:2px 0 2px 10px; border-left:3px solid var(--edge-lit); color:var(--ink); }
code { font:500 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(255,255,255,.07); border-radius:5px; padding:1px 5px; }
pre.code { margin:0; padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.35); border:1px solid var(--edge); overflow:auto;
  font:500 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.emb { border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--edge); border-left:4px solid var(--ec, var(--edge-lit));
  padding:11px 13px 12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.e-in { display:flex; gap:12px; min-width:0; }
.e-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.e-au { display:flex; align-items:center; gap:7px; margin:0; font-weight:700; font-size:13px; }
.e-au img { width:22px; height:22px; border-radius:50%; }
.e-t { margin:0; font:700 16px/1.3 var(--display); color:var(--ink); }
.e-d { font-size:13.5px; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.e-fs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px; }
.ef { grid-column:1 / -1; min-width:0; }
.ef.in { grid-column:auto; }
.ef-n { margin:0 0 2px; font-weight:700; font-size:13px; }
.ef-v { font-size:13px; overflow-wrap:anywhere; }
.e-th { width:72px; height:72px; object-fit:contain; border-radius:8px; flex:none; }
.e-img, .fimg { max-width:100%; max-height:420px; object-fit:contain; border-radius:8px; align-self:flex-start; }
.e-ft { display:flex; align-items:center; gap:7px; margin:0; font-size:11.5px; color:var(--faint); }
.e-ft img { width:18px; height:18px; border-radius:50%; }
.crow { display:flex; flex-wrap:wrap; gap:7px; }
.cb { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  font:700 13.5px/1.1 var(--body); color:var(--ink); min-height:36px; }
.cb .emo { width:1.25em; height:1.25em; vertical-align:middle; }
.cb.s1 { background:var(--gold); color:#1b1405; }
.cb.s2 { background:rgba(255,255,255,.08); border-color:var(--edge-lit); }
.cb.s3 { background:#2f9e5c; }
.cb.s4 { background:#c8404a; }
.cb.s5 { background:none; border-color:var(--edge-lit); color:var(--cyan); }
.cb:hover:not(:disabled) { filter:brightness(1.12); }
.cb:disabled { opacity:.45; cursor:default; }
.cb.busy { opacity:.65; }
.csel { display:block; max-width:420px; }
.cmulti { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cm-ph { flex-basis:100%; margin:0; color:var(--dim); font-size:12.5px; }
.cnote { margin:0; color:var(--dim); font-size:12.5px; }
.ctr { display:flex; flex-direction:column; gap:8px; padding:12px 13px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid var(--edge);
  border-left:4px solid var(--ac, var(--edge)); }
.td { display:flex; flex-direction:column; gap:2px; font-size:13.5px; overflow-wrap:anywhere; }
.sec { display:flex; gap:12px; align-items:center; }
.sec-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.sec-th, .tn { width:84px; height:84px; object-fit:contain; border-radius:8px; }
.mg { display:grid; gap:6px; }
.mg.n2, .mg.n4 { grid-template-columns:1fr 1fr; } .mg.n3 { grid-template-columns:1fr 1fr 1fr; }
.mg img, .mg video { width:100%; max-height:440px; object-fit:contain; border-radius:9px; background:rgba(0,0,0,.25); }
.mg.n1 img, .mg.n1 video { width:auto; max-width:100%; justify-self:start; }
.sep { width:100%; border:0; border-top:1px solid var(--edge); margin:2px 0; }
.sep.blank { border-color:transparent; } .sep.big { margin:8px 0; }
.file { display:inline-flex; padding:8px 12px; border-radius:9px; border:1px solid var(--edge-lit); align-self:flex-start; }
img.broken { display:none; }
.club-modal { position:absolute; inset:0; z-index:3; background:rgba(5,7,13,.72); display:flex; align-items:flex-start; justify-content:center; padding:70px 14px 14px; }
.cmodal { width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:14px; background:var(--panel-solid); border:1px solid var(--edge-lit); }
.cm-acts { display:flex; justify-content:flex-end; gap:8px; margin:0; }

/* the line-up board: the website's own, in a frame */
.xip { left:50%; transform:translateX(-50%); top:calc(var(--top) + 58px); bottom:max(12px, var(--bot0));
  width:min(1180px, calc(100vw - 24px)); }
.xip-b { flex:1; min-height:0; display:flex; }
.xip-b iframe { flex:1; width:100%; height:100%; border:0; background:transparent; }
.xip-b .club-wait { padding:24px; }
body.xi-open .go { visibility:hidden; }

@media (max-width: 720px), (max-height: 500px) {
  .clubb { padding:8px 9px; }
  .clubb span { display:none; }
  section.club, .xip { left:0; right:0; top:0; bottom:0; width:auto; transform:none; border-radius:0; border:0;
    padding-top:max(var(--top0), calc(var(--top) - 12px)); padding-bottom:var(--bot0); }
  .club-cs { grid-template-columns:1fr; }
  .e-fs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .cm-think i { animation:none; opacity:.6; } }

/* a pack card's walkout, laid over the card as it plays (packs.js) */
.walkout { position:absolute; z-index:6; pointer-events:none; object-fit:contain; filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.walkout[hidden] { display:none; }
/* an exhibition or a friendly on a pitch now, at the top of the kick-offs */
.k-list li.now button { background:rgba(108,224,154,.07); }
.k-list li.now .vs { color:var(--green); }
/* under a pack's reveal: how to hurry it */
.packskip { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(max(12px, var(--bot0)) + 14px); z-index:6; margin:0;
  padding:7px 14px; border-radius:999px; background:rgba(5,7,13,.62); color:var(--dim); font-size:13px; pointer-events:none; white-space:nowrap; }
.packskip[hidden] { display:none; }
/* while a pack turns over, the panels that would cover it step aside */
body.revealing .card, body.revealing .help, body.revealing .quests, body.revealing .shouts { visibility:hidden; }
@media (max-width: 720px), (max-height: 500px) {
  .packskip { top:calc(var(--top) + 58px); bottom:auto; white-space:normal; max-width:calc(100vw - 24px); text-align:center; }
}
.cuser { display:block; max-width:420px; }
.cuser input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--edge-lit); background:rgba(5,7,13,.6); color:var(--ink); outline:none; }
.cuser input:focus { border-color:var(--cyan); }
/* the crowd recording's credit (CC BY 4.0), under the controls */
.help small { display:block; margin-top:5px; font-size:10.5px; opacity:.55; }
/* both elevens of a match, flat on the screen (the ground card's Line-ups) */
.xis { position:absolute; z-index:6; left:50%; top:calc(var(--top) + 58px); transform:translateX(-50%); width:min(900px, calc(100vw - 24px));
  max-height:calc(100vh - var(--top) - 80px); overflow:auto; padding:12px 14px 14px; }
.xis[hidden] { display:none; }
.xis h3 { margin:0 36px 10px 2px; font:700 17px/1.2 var(--display); }
.xis h3 em { font-style:normal; color:var(--faint); font-weight:500; padding:0 4px; }
.xis-b { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.xis-b canvas { width:100%; height:auto; border-radius:12px; display:block; }
.card .btn.xs { padding:4px 9px; font-size:12px; min-height:0; flex:none; }
@media (max-width: 700px) { .xis-b { grid-template-columns:1fr; } .xis { top:calc(var(--top) + 52px); } }