/* ============================================================
   KICKOFF '26 — FMTG World Cup Tip Game
   Design system: Falkensteiner navy/gold/ivory × Weyland-Yutani HUD
   ============================================================ */

/* ---------- Fonts ---------- */
/* Cormorant Garamond (serif display) · Hanken Grotesk (UI sans) · JetBrains Mono (HUD/data) */

:root {
  /* type */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* brand constants */
  --gold:        #C6A664;   /* champagne brass */
  --gold-bright: #E4C988;   /* highlight gold  */
  --gold-deep:   #9A7C3E;   /* engraved gold   */

  /* radii / motion — angular HUD: zero radius, chamfered accents */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --chamfer: 10px;
  --chamfer-sm: 6px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* layout */
  --header-h: 64px;
  --maxw: 1340px;
}

/* ---------- DARK THEME (default) ---------- */
[data-theme="dark"] {
  --bg:        #08131F;          /* deep navy canvas */
  --bg-grad-a: #0A1826;
  --bg-grad-b: #06101A;
  --panel:     #0E1E2E;          /* card surface */
  --panel-2:   #122537;          /* raised surface */
  --panel-hi:  #16314A;          /* hover */
  --line:      rgba(198,166,100,.16);   /* gold hairline */
  --line-soft: rgba(180,200,220,.09);
  --ink:       #ECE7DA;          /* warm ivory text */
  --ink-2:     #B4C3D1;          /* secondary */
  --ink-3:     #97AABD;          /* tertiary / mono labels */
  --accent:    var(--gold);
  --accent-bright: var(--gold-bright);
  --on-accent: #08131F;
  --good:      #57B894;
  --bad:       #D9656B;
  --warn:      #E0A95A;
  --live:      #E5564E;
  --shadow:    0 18px 48px -22px rgba(0,0,0,.75);
  --shadow-sm: 0 6px 18px -10px rgba(0,0,0,.6);
  --scan:      rgba(255,255,255,.015);
}

/* ---------- LIGHT THEME ---------- */
[data-theme="light"] {
  --bg:        #F4EFE4;          /* warm ivory */
  --bg-grad-a: #F7F2E8;
  --bg-grad-b: #EDE6D6;
  --panel:     #FFFEFA;
  --panel-2:   #FBF7EE;
  --panel-hi:  #F2EADb;
  --line:      rgba(154,124,62,.22);
  --line-soft: rgba(20,40,60,.08);
  --ink:       #12283C;          /* navy ink */
  --ink-2:     #4A5E70;
  --ink-3:     #8A7A55;
  --accent:    #9A7C3E;
  --accent-bright: #B8954A;
  --on-accent: #FFFEFA;
  --good:      #2F8C6E;
  --bad:       #C0454B;
  --warn:      #B47A28;
  --live:      #D23A32;
  --shadow:    0 18px 44px -24px rgba(40,30,10,.30);
  --shadow-sm: 0 6px 16px -10px rgba(40,30,10,.22);
  --scan:      rgba(20,40,60,.012);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  transition: background .4s var(--ease), color .4s var(--ease);
}

/* subtle ambient navy gradient + scanlines for HUD feel */
.app-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(198,166,100,.06), transparent 60%),
    radial-gradient(900px 600px at -5% 10%, rgba(30,70,110,.18), transparent 55%),
    linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b));
}
.app-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

::selection { background: var(--accent); color: var(--on-accent); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 20px; }
*::-webkit-scrollbar-track { background: transparent; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }

/* ---------- Typography helpers ---------- */
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }

.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}

h1, h2, h3 { font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; }

/* ---------- HUD corner brackets (all four corners) ---------- */
.ticks { position: relative; }
.ticks::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2; opacity: .6;
  --b: 1.5px; --l: 12px; --c: var(--accent);
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 0 0 / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 0 100% / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--b) var(--l);
  background-repeat: no-repeat;
}

/* chamfer: cut top-right + bottom-left corners (HUD plating) */
.chamfer { clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))); }
.chamfer-sm { clip-path: polygon(0 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm))); }

/* ---------- Cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); background: var(--panel-hi); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--on-accent); border-color: transparent;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn-primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }

.btn-ghost { background: transparent; border-color: var(--line); }
.btn-ghost:hover { background: var(--panel-2); }

.btn-sm { padding: 7px 13px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* pill / chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 0;
  border: 1px solid var(--line); color: var(--ink-2);
  text-transform: uppercase;
}
.chip-gold { color: var(--accent); border-color: var(--accent); }
.chip-live { color: #fff; background: var(--live); border-color: transparent; letter-spacing:.1em;
             animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(229,86,78,.5);} 50%{ box-shadow:0 0 0 6px rgba(229,86,78,0);} }

/* divider with gold node */
.rule { height: 1px; background: var(--line); position: relative; }

/* inputs */
.field {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(198,166,100,.13); }

/* avatar — chamfered HUD plate */
.avatar {
  object-fit: cover; flex: none;
  background: var(--panel-2); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; color: var(--accent);
  overflow: hidden; letter-spacing: .02em;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

/* utility */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.muted { color: var(--ink-2); }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* slide entrance — transform-only so content is never stranded invisible
   if the animation timeline is paused (background tab / capture) */
@keyframes riseIn { from { transform: translateY(12px); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.rise { animation: riseIn .5s var(--ease) both; }

/* focus screens transition */
.screen { animation: riseIn .42s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .rise, .screen { animation: none; }
}

/* ============================================================
   SCOREBOX — signature HUD scoreboard
   ============================================================ */
.scorebox {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 16px 18px 12px;
  position: relative; overflow: hidden;
}
.scorebox[data-status="live"] { border-color: rgba(229,86,78,.4); }
.scorebox[data-status="done"] { border-color: var(--line); }
.scorebox-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.scorebox-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.scorebox-grid > :first-child { justify-self: start; }
.scorebox-grid > :last-child  { justify-self: end; }
.scoredigits {
  font-family: var(--font-mono); font-weight: 700; font-size: 30px;
  color: var(--ink); letter-spacing: .02em; min-width: 92px; text-align: center;
}
.scoredigits .sep { color: var(--accent); margin: 0 6px; }
.scoredigits .vs { font-size: 16px; color: var(--ink-3); letter-spacing: .2em; }
.scorebox-foot {
  display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- Stepper ---------- */
.stepper {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; background: var(--bg);
}
.stepper button {
  width: 36px; height: 40px; font-size: 20px; font-weight: 600; color: var(--ink-2);
  transition: all .15s var(--ease);
}
.stepper button:hover { background: var(--accent); color: var(--on-accent); }
.stepper-val {
  width: 44px; text-align: center; font-family: var(--font-mono); font-weight: 700;
  font-size: 18px; color: var(--ink);
}

/* ---------- Points tags ---------- */
.ptag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 4px 9px; white-space: nowrap; text-transform: uppercase;
  border: 1px solid transparent;
}
.ptag-exact { background: rgba(198,166,100,.14); color: var(--accent); border-color: var(--line); }
.ptag-ok    { background: rgba(87,184,148,.14); color: var(--good); }
.ptag-miss  { background: rgba(217,101,107,.12); color: var(--bad); }
.ptag-live  { background: rgba(229,86,78,.14); color: var(--live); }
.ptag-pend  { background: var(--panel-2); color: var(--ink-3); border-color: var(--line); }

/* ============================================================
   APP SHELL
   ============================================================ */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* header */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw); height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep));
  color: #08131F; font-family: var(--font-serif); font-weight: 700; font-size: 20px;
  box-shadow: 0 4px 14px -4px rgba(198,166,100,.5);
}
.brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1; white-space: nowrap; }
.brand-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em; color: var(--ink-3); text-transform: uppercase; }

.topsearch { position: relative; flex: 1; max-width: 420px; }
.topsearch .field { padding-left: 40px; background: var(--panel); }
.topsearch > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

/* ---------- topbar user autocomplete ---------- */
.ac-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
  background: var(--panel-2, var(--panel)); border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  overflow: hidden; padding: 6px;
}
.ac-panel[hidden] { display: none; }
.ac-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px 10px; background: transparent; border: 0; cursor: pointer; color: var(--ink-1);
  text-decoration: none; border-radius: 2px;
}
.ac-item:hover, .ac-item.active { background: color-mix(in oklch, var(--accent) 16%, transparent); }
.ac-item .avatar { width: 34px; height: 34px; flex: none; }
.ac-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ac-name { font-size: 13.5px; font-weight: 600; letter-spacing: .005em; line-height: 1.25; }
.ac-name mark { background: transparent; color: var(--accent); font-weight: 800; padding: 0; }
.ac-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-foot { padding: 7px 11px 5px; border-top: 1px solid var(--line); margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; }
.ac-empty { padding: 16px 12px; text-align: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .02em; }
.ac-hint { padding: 6px 6px 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.ac-count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.ac-keys { display: flex; gap: 4px; }
.ac-hint kbd { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; background: var(--panel); cursor: pointer; user-select: none; transition: background .12s, color .12s, border-color .12s; }
.ac-hint kbd:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, transparent); }
.ac-hint kbd:active { transform: translateY(1px); }

.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.iconbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--ink-2); border: 1px solid transparent; transition: all .16s var(--ease); position: relative;
}
.iconbtn:hover { background: var(--panel); color: var(--ink); border-color: var(--line); }
.iconbtn .dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; background: var(--live); border: 1.5px solid var(--bg); }

/* layout columns */
.layout {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 60px; width: 100%;
  display: grid; grid-template-columns: 244px minmax(0,1fr) 320px; gap: 24px; align-items: start;
}
.col-rail { position: sticky; top: calc(var(--header-h) + 30px + 20px); }
.center { min-width: 0; }

/* left nav */
.navlist { display: flex; flex-direction: column; gap: 3px; }
.navitem {
  display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r-md);
  color: var(--ink-2); font-weight: 600; font-size: 14.5px; transition: all .15s var(--ease);
  border: 1px solid transparent;
}
.navitem:hover { background: var(--panel); color: var(--ink); }
.navitem.active { background: var(--panel); color: var(--ink); border-color: var(--line); }
.navitem.active i { color: var(--accent); }
.navitem .badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }

/* status card (HUD) */
.hud {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 14px;
  background: var(--panel); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
}
.hud-row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--ink-3); }
.hud-row b { color: var(--accent); font-weight: 600; }
.hud-online { display: flex; align-items: center; gap: 7px; color: var(--good); }
.hud-online::before { content:""; width:6px;height:6px;background:var(--good);
  box-shadow:0 0 0 0 rgba(87,184,148,.5); animation: pulse 2s infinite; }

/* mobile bottom nav */
.botnav { display: none; }

/* hamburger trigger — only shown below desktop */
.navtrigger { display: none; }

/* slide-in navigation drawer (mobile / tablet) */
.navdrawer-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.navdrawer-scrim.open { opacity: 1; pointer-events: auto; }
.navdrawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
  width: min(84vw, 304px); display: flex; flex-direction: column; gap: 4px;
  padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
  background: var(--bg); border-right: 1px solid var(--line); box-shadow: var(--shadow);
  transform: translateX(-100%); transition: transform .3s var(--ease); overflow-y: auto;
}
.navdrawer.open { transform: none; }
.navdrawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 2px 2px 0; }
.navdrawer .navlist { gap: 2px; }
.navdrawer .navitem { font-size: 15px; padding: 12px 14px; }
.navdrawer-sep { height: 1px; background: var(--line); margin: 12px 6px; }
.navdrawer-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 0 8px 8px; }
.navdrawer-sec { display: flex; flex-direction: column; gap: 1px; }
.navdrawer-sec a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 500; font-size: 14px; transition: all .15s var(--ease); }
.navdrawer-sec a:hover { background: var(--panel); color: var(--ink); }
.navdrawer-sec a i { color: var(--ink-3); font-size: 18px; }
body.drawer-open { overflow: hidden; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0,1fr) 300px; }
  .col-left { display: none; }
  .navtrigger { display: grid; }
}
@media (min-width: 1081px) {
  .navdrawer, .navdrawer-scrim { display: none !important; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; padding: 16px 14px 96px; gap: 16px; }
  .col-right { display: none; }
  .topsearch { display: none; }
  .botnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .botnav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px;
    flex: 1 1 0; min-width: 0;
    color: var(--ink-3); font-size: 9.5px; font-family: var(--font-mono); letter-spacing: .04em;
    text-transform: uppercase;
  }
  .botnav a span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .botnav a.active { color: var(--accent); }
  .brand-name { font-size: 18px; }
}
@media (max-width: 430px) {
  .botnav a { padding: 6px 2px; }
  .botnav a span { font-size: 8.3px; letter-spacing: .01em; }
}

/* ============================================================
   FEED
   ============================================================ */
.feedscreen { display: flex; flex-direction: column; gap: 16px; }
.feedlist { display: flex; flex-direction: column; gap: 16px; }

/* hero */
.hero { padding: 26px 28px; position: relative; overflow: hidden; }
.hero-inner { position: relative; display: flex; align-items: center; gap: 24px; }
.hero-rank {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 20px; color: var(--ink);
  border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.hero-rank:hover { border-color: var(--accent); transform: translateY(-1px); }
.hero-rank-num { font-size: 38px; line-height: 1; color: var(--accent); }
.hero-rank-pts { font-size: 12px; color: var(--ink-2); letter-spacing: .04em; }
@media (max-width: 560px) { .hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; } .hero-rank { flex-direction: row; align-items: baseline; gap: 8px; align-self: stretch; justify-content: space-between; } }

/* sidebar 'today' meta card */
.metacard { padding: 14px 15px; }
.metacard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.metacard-top .kicker { display: flex; align-items: center; gap: 6px; }
.metacard-top .kicker i { color: var(--accent); font-size: 13px; }
.metacard-date { display: flex; align-items: baseline; gap: 8px; }
.metacard-dom { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--ink); }
.metacard-wm { display: flex; flex-direction: column; }
.metacard-weekday { font-size: 13px; color: var(--ink); font-weight: 600; text-transform: capitalize; }
.metacard-month { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.metacard-time { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: .04em; }

/* sidebar HUD 'duty station' card */
.hudcard { padding: 14px 15px; overflow: hidden; }
.hudcard::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 20px 20px; opacity: .55;
  -webkit-mask-image: radial-gradient(120% 95% at 88% -5%, #000, transparent 72%);
  mask-image: radial-gradient(120% 95% at 88% -5%, #000, transparent 72%); }
.hudcard > * { position: relative; z-index: 1; }
.hudcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.hudcard-top .kicker { display: flex; align-items: center; gap: 6px; }
.hudcard-top .kicker i { color: var(--accent); font-size: 13px; }
.hudcard-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--good); white-space: nowrap; }
.hudcard-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; animation: hudpulse 2.2s var(--ease) infinite; }
.hudcard-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.hudcard-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.hudcard-region { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.hudcard-region i { font-size: 12px; color: var(--accent); flex: none; }
.hudcard-region span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hudcard-stars { display: inline-flex; gap: 1px; margin-left: auto; color: var(--accent); font-size: 11px; flex: none; }
.hudcard-stars .ri-star-line { color: var(--ink-3); opacity: .45; }
.hudcard-coords { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.hudcard-coord { border: 1px solid var(--line-soft); padding: 7px 9px; background: color-mix(in oklch, var(--bg) 55%, transparent); }
.hudcard-coord-l { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 3px; }
.hudcard-coord-v { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.hudcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hudcard-node { color: var(--accent); }
@keyframes hudpulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .hudcard-dot { animation: none; } }

/* ===== top transmission HUD bar (full-width, under ticker) ===== */
.hudbar { position: relative; margin-bottom: 0; border: 1px solid var(--line); border-top: 2px solid color-mix(in oklch, var(--accent) 50%, var(--line)); border-bottom: 0; background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 5%, var(--panel)), var(--panel)); overflow: hidden; }
.hudbar::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, transparent 38%, color-mix(in oklch, var(--accent) 11%, transparent) 50%, transparent 62%);
  background-size: 260% 100%; animation: hudsweep 9s linear infinite; }
@keyframes hudsweep { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.hudbar-inner { position: relative; z-index: 1; display: flex; align-items: stretch; min-height: 44px; }
.hudbar-sig { display: flex; align-items: center; gap: 7px; padding: 0 15px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--good); white-space: nowrap; }
.hudbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; animation: hudpulse 2.2s var(--ease) infinite; }
.hudbar-seg { display: flex; align-items: center; gap: 8px; padding: 0 15px; white-space: nowrap; border-left: 1px solid var(--line-soft); min-width: 0; }
.hudbar-station { gap: 9px; min-width: 0; flex: 0 1 auto; }
.hudbar-ico { color: var(--accent); font-size: 15px; flex: none; }
.hudbar-ico-sm { color: var(--accent); font-size: 13px; flex: none; }
.hudbar-name { font-weight: 600; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hudbar-stars { display: inline-flex; gap: 1px; color: var(--accent); font-size: 10px; flex: none; }
.hudbar-stars .ri-star-line { color: var(--ink-3); opacity: .5; }
.hudbar-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.hudbar-v { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: .02em; white-space: nowrap; }
.hudbar-spacer { flex: 1 1 auto; min-width: 12px; }
.hudbar-time { display: flex; align-items: center; gap: 9px; padding: 0 15px; white-space: nowrap; border-left: 1px solid var(--line-soft); margin-left: auto; }
.hudbar-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
.hudbar-clock { font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: .05em; }
.hudbar-tz { font-size: 9px; color: var(--ink-3); letter-spacing: .08em; }
@media (max-width: 1180px) { .hudbar-opt { display: none; } }
@media (max-width: 680px) { .hudbar-code { display: none; } .hudbar-sig-l { display: none; } .hudbar-sig { padding: 0 13px; } }
@media (max-width: 520px) { .hudbar-stars { display: none; } .hudbar-seg, .hudbar-time { padding: 0 12px; } .hudbar-name { font-size: 12.5px; } }

/* --- unconfigured / no-duty-station variant --- */
.hudbar-sig-unset, .hudbar-unset-seg { display: none; }
.hudbar.is-unset .hudbar-set, .hudbar.is-unset .hudbar-sig-set { display: none !important; }
.hudbar.is-unset .hudbar-sig-unset { display: inline; }
.hudbar.is-unset .hudbar-unset-seg { display: flex; }
.hudbar.is-unset { border-top-color: color-mix(in oklch, var(--warn) 72%, var(--line)); background: linear-gradient(180deg, color-mix(in oklch, var(--warn) 11%, var(--panel)), var(--panel)); }
.hudbar.is-unset::after { background: linear-gradient(100deg, transparent 36%, color-mix(in oklch, var(--warn) 16%, transparent) 50%, transparent 64%); background-size: 240% 100%; animation: hudsweep 5.5s linear infinite; }
.hudbar.is-unset .hudbar-sig { color: var(--warn); }
.hudbar.is-unset .hudbar-dot { background: var(--warn); animation: hudpulsewarn 1.4s var(--ease) infinite; }
@keyframes hudpulsewarn { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--warn) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hudbar-unset-seg { gap: 11px; }
.hudbar-warn-ico { color: var(--warn); font-size: 16px; flex: none; }
.hudbar-unset-name { font-weight: 600; font-size: 13.5px; color: var(--ink); letter-spacing: .01em; }
.hudbar-unset-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); }
.hudbar-cta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--on-accent); background: var(--warn); padding: 5px 11px; white-space: nowrap; transition: filter .15s var(--ease); }
.hudbar-cta::after { content: "\2192"; font-weight: 700; }
.hudbar-cta:hover { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .hudbar.is-unset .hudbar-dot { animation: none; } }
@media (max-width: 680px) { .hudbar.is-unset .hudbar-unset-hint { display: none; } }
.hero-glow {
  position: absolute; top: -40%; right: -10%; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(198,166,100,.18), transparent 65%);
  pointer-events: none;
}

/* composer */
.composer textarea { border: none; background: var(--bg); }
.composer textarea:focus { box-shadow: 0 0 0 3px rgba(198,166,100,.1); }

/* post */
.post { padding: 18px 20px; position: relative; }
.post-pinned { border-color: var(--line); }
.post-pin {
  position: absolute; top: 14px; right: 16px; font-size: 9.5px; letter-spacing: .15em;
  color: var(--accent); display: flex; align-items: center; gap: 5px;
}
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.post-head .mono { margin-top: 3px; line-height: 1.4; }
.post-title { font-size: 21px; margin-bottom: 8px; line-height: 1.2; }
.post-body { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin-bottom: 4px; }
.post .pred-inset, .post .scorebox { margin-top: 14px; }

.pred-inset {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; position: relative; overflow: hidden;
}

.post-stats {
  display: flex; gap: 16px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em;
  padding: 14px 2px 12px; margin-top: 4px;
}
.post-actions {
  display: flex; gap: 4px; border-top: 1px solid var(--line-soft); padding-top: 8px;
}
.pa {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; font-size: 13.5px;
  transition: all .15s var(--ease);
}
.pa:hover { background: var(--panel-2); color: var(--ink); }
.pa.liked { color: var(--accent); }

/* like burst */
.like-burst { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; }
.like-burst.go { animation: burst .55s var(--ease); }
@keyframes burst {
  0% { box-shadow: 0 0 0 0 rgba(198,166,100,.55); }
  100% { box-shadow: 0 0 0 16px rgba(198,166,100,0); }
}

/* comments */
.post-comments { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.comment-bubble {
  background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--line);
  padding: 9px 13px; display: inline-block;
}

/* ============================================================
   PREDICTIONS
   ============================================================ */
.predbar {
  display: flex; align-items: center; gap: 20px; padding: 16px 20px; margin-bottom: 18px; flex-wrap: wrap;
}
.predbar-stat { flex: none; }
.predbar-track { flex: 1; min-width: 140px; height: 7px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line-soft); }
.predbar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width .5s var(--ease); }

.fixlist { display: flex; flex-direction: column; gap: 12px; }
.fixrow {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 18px;
}
.fixrow-live { border-color: rgba(229,86,78,.35); }
.fixrow-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fixrow-time { font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.fixrow-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.fixrow-team { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fixrow-name { font-weight: 600; font-size: 15px; }
.fixrow-input { display: flex; justify-content: center; }
.fixrow-final { font-size: 26px; font-weight: 700; }
.fixrow-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.fixrow-venue { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .06em; }
.fixrow-save { flex: none; padding: 7px 14px; font-size: 12.5px; line-height: 1; gap: 6px; }
.fixrow-save i { font-size: 14px; }
.fixrow-save.is-saved { background: transparent; border: 1px solid var(--accent); color: var(--gold-bright); }
.fixrow-save.is-saved:hover { filter: none; background: color-mix(in oklch, var(--accent) 14%, transparent); }

/* ============================================================
   FINAL TIP  (Grand Final widget)
   ============================================================ */
.finaltip { position: relative; padding: 22px 22px 20px; margin-bottom: 18px; border-color: color-mix(in oklch, var(--accent) 32%, var(--line)); background-image: radial-gradient(60% 42% at 50% 0%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 70%); }
.finaltip > * { position: relative; }
.finaltip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.finaltip-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.finaltip-eyebrow i { font-size: 15px; }
.finaltip-deadline { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }
.finaltip-deadline i { font-size: 13px; }
.finaltip h3 { font-size: 25px; line-height: 1.15; margin: 2px 0 0; }
.finaltip-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 5px; }

.finaltip-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; margin: 20px 0 4px; }
.ftslot { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ftslot-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-left: 2px; }
.ftslot-pick { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 0 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; text-align: left; transition: border-color .15s var(--ease), background .15s var(--ease); }
.ftslot-pick:hover { border-color: var(--accent); }
.ftslot-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ftslot-pick .flag-img { flex: none; border-radius: 3px; }
.ftslot-face { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ftslot-name { font-weight: 600; font-size: 16px; letter-spacing: .01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftslot-empty { color: var(--ink-3); font-weight: 500; font-size: 15px; }
.ftslot-caret { margin-left: auto; flex: none; color: var(--ink-3); font-size: 18px; transition: transform .2s var(--ease); }
.ftslot.open .ftslot-caret { transform: rotate(180deg); }
.ftslot.filled .ftslot-pick { background: var(--panel); }

.ftslot-crown { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: transparent; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); }
.ftslot-crown i { font-size: 16px; }
.ftslot-crown:disabled { opacity: .4; cursor: not-allowed; }
.ftslot-crown:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.ftslot.champion .ftslot-pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -10px color-mix(in oklch, var(--accent) 60%, transparent); background: color-mix(in oklch, var(--accent) 10%, var(--panel)); }
.ftslot.champion .ftslot-crown { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ftslot.champion .ftslot-crown:hover { background: var(--gold-bright, var(--accent)); }

.finaltip-vs { align-self: center; margin-top: 26px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; color: var(--ink-3); }

.finaltip-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.finaltip-hint { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.finaltip-hint i { font-size: 14px; color: var(--accent); }
.finaltip-actions { display: flex; align-items: center; gap: 10px; }

/* champion banner */
.finaltip-champ { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 12px 16px; border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--line)); border-radius: var(--r-md); background: color-mix(in oklch, var(--accent) 8%, transparent); }
.finaltip-champ i { font-size: 20px; color: var(--accent); flex: none; }
.finaltip-champ .flag-img { border-radius: 3px; flex: none; }
.finaltip-champ-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.finaltip-champ-name { font-weight: 700; font-size: 16px; }
.finaltip-champ-text { display: flex; flex-direction: column; gap: 1px; }

/* dropdown menu */
.ftmenu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; padding: 8px; box-shadow: var(--shadow); max-height: 320px; display: flex; flex-direction: column; }
.ftmenu-search { position: relative; margin-bottom: 6px; flex: none; }
.ftmenu-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 16px; pointer-events: none; }
.ftmenu-search .field { padding: 10px 12px 10px 36px; font-size: 13.5px; }
.ftmenu-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ftmenu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: left; transition: background .12s var(--ease), color .12s var(--ease); }
.ftmenu-item .flag-img { flex: none; border-radius: 3px; }
.ftmenu-item:hover, .ftmenu-item.active { background: var(--panel-2); color: var(--ink); }
.ftmenu-item.selected { color: var(--accent); }
.ftmenu-item .ftmenu-check { margin-left: auto; color: var(--accent); font-size: 16px; }
.ftmenu-empty { padding: 14px 12px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* demo toggle */
.finaltip-demo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px dashed color-mix(in oklch, var(--accent) 45%, var(--line)); border-radius: 999px; background: transparent; color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; cursor: pointer; transition: all .15s var(--ease); }
.finaltip-demo i { font-size: 13px; }
.finaltip-demo:hover { color: var(--accent); border-color: var(--accent); }

/* locked state */
.finaltip[data-locked="true"] .ftslot-pick { cursor: default; pointer-events: none; }
.finaltip[data-locked="true"] .ftslot-caret { display: none; }
.finaltip-lockbadge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.finaltip-lockbadge i { font-size: 14px; }
.finaltip-locknote { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.finaltip-locknote i { font-size: 15px; color: var(--accent); }

@media (max-width: 560px) {
  .finaltip-match { grid-template-columns: 1fr; gap: 10px; }
  .finaltip-vs { margin: 2px auto; }
  .finaltip-foot { flex-direction: column; align-items: stretch; }
  .finaltip-actions { justify-content: flex-end; }
}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg-btn { padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: all .15s var(--ease); }
.seg-btn.active { background: var(--accent); color: var(--on-accent); }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin-bottom: 22px; }
.podium-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 12px 0;
  position: relative; overflow: hidden;
}
.podium-1 { padding-top: 26px; }
.podium-1 .podium-bar { height: 64px; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); }
.podium-2 .podium-bar { height: 44px; }
.podium-3 .podium-bar { height: 30px; }
.podium-bar { width: 100%; margin-top: 12px; background: linear-gradient(180deg, var(--panel-hi), var(--panel-2)); border-top: 1px solid var(--line); }
.podium-medal { font-size: 20px; color: var(--accent); }
.podium-name { font-weight: 700; font-size: 14px; margin-top: 2px; }
.podium-pts { font-size: 26px; color: var(--ink); }
.podium-you { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.lbtable { padding: 8px 6px; }
.lbrow {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 70px 70px 56px 70px; align-items: center;
  padding: 11px 14px; border-radius: var(--r-md); gap: 8px;
}
.lbhead { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 8px; padding-bottom: 8px; }
.lbhead .lbnum { text-align: right; }
.lbrow:not(.lbhead):hover { background: var(--panel-2); }
.lbrow-you { background: rgba(198,166,100,.08); border: 1px solid var(--line); }
.lbrank { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.lbplayer { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lbname { font-weight: 600; font-size: 14px; display: block; white-space: nowrap; }
.lbdept { display: block; margin-top: 1px; }
.lbnum { text-align: right; font-size: 13px; }
.lbpts { font-size: 17px; font-weight: 700; color: var(--accent); }

/* ============================================================
   RIGHT RAIL
   ============================================================ */
.rail-card { padding: 16px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rail-link { font-size: 10.5px; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.rail-fixtures { display: flex; flex-direction: column; gap: 8px; }
.rail-fix { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--panel-2); text-align: left; transition: all .15s var(--ease); }
.rail-fix:hover { border-color: var(--accent); }
.rail-fix-teams { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
.rail-fix-time { font-size: 10.5px; color: var(--ink-3); letter-spacing: .05em; }

.rail-lb { display: flex; flex-direction: column; gap: 2px; }
.rail-lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); }
.rail-lb-row.you { background: rgba(198,166,100,.1); }
.rail-lb-rank { width: 18px; color: var(--ink-3); font-size: 12px; }
.rail-lb-name { flex: 1; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-lb-pts { color: var(--accent); font-weight: 700; font-size: 13px; }
.rail-lb-divider { height: 1px; background: var(--line); margin: 6px 4px; }

.rankcard { padding: 16px; }
.rankcard-streak { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--warn); letter-spacing: .05em; }

/* ============================================================
   PROFILE
   ============================================================ */
.profile-cover { padding: 26px 28px; position: relative; overflow: hidden; margin-bottom: 22px; }
.profile-cover-glow { position: absolute; inset: 0; background: radial-gradient(700px 240px at 20% -30%, rgba(198,166,100,.16), transparent 60%); pointer-events: none; }
.profile-id { display: flex; align-items: center; gap: 20px; position: relative; flex-wrap: wrap; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; position: relative; }
.profile-stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.profile-stat-val { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.profile-stat-val.accent { color: var(--accent); }

.hist { display: flex; flex-direction: column; gap: 10px; }
.hist-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; gap: 14px; flex-wrap: wrap; }
.hist-match { display: flex; align-items: center; gap: 14px; }
.hist-team { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.hist-score { font-size: 22px; font-weight: 700; min-width: 60px; text-align: center; }
.hist-meta { display: flex; align-items: center; gap: 14px; }

/* ============================================================
   RESULTS
   ============================================================ */
.resgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rescard { display: flex; flex-direction: column; }
.rescard-tip { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: var(--panel); border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); margin-top: -1px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-art { position: relative; overflow: hidden; padding: 56px 56px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(155deg, #0A1826, #06101A); border-right: 1px solid var(--line); }
[data-theme="light"] .login-art { background: linear-gradient(155deg, #14283C, #0A1826); }
.login-art-glow { position: absolute; top: -10%; right: -10%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(198,166,100,.18), transparent 60%); }
.login-art-inner { position: relative; color: #ECE7DA; }
.login-headline { font-size: 48px; line-height: 1.12; margin-top: 48px; color: #fff; letter-spacing: -.01em; }
.login-tagline { color: #9FB0C0; font-size: 16px; margin-top: 16px; max-width: 420px; }
.login-marquee { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 30px; font-size: 11px; letter-spacing: .14em; color: var(--gold); }
.login-marquee span { display: inline-flex; align-items: center; gap: 6px; }
.login-flags { position: relative; font-size: 32px; letter-spacing: 6px; opacity: .9; margin-top: 30px; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-form-inner { width: 100%; max-width: 380px; }
.login-lang { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.login-lang-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 5px 11px 5px 6px; border: 1px solid var(--line); color: var(--ink-2); transition: all .15s var(--ease); }
.login-lang-btn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-3); font-size: 12px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-legal { font-size: 10px; color: var(--ink-3); margin-top: 22px; line-height: 1.6; letter-spacing: .02em; }
.login-replay { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; opacity: .65; transition: color .18s var(--ease), opacity .18s var(--ease); }
.login-replay:hover { color: var(--accent); opacity: 1; }

/* register */
.login-form-wide { max-width: 480px; }

/* social auth (Allauth: Google + Apple) */
.social-auth { display: flex; flex-direction: column; gap: 10px; }
.btn-social {
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  justify-content: center; gap: 11px;
}
.btn-social:hover { background: var(--panel-2); border-color: var(--accent); transform: translateY(-1px); }
.btn-social-apple svg { color: var(--ink); }
.login-or span { white-space: nowrap; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.reg-field { display: flex; flex-direction: column; gap: 7px; }
.reg-field-full { grid-column: 1 / -1; }
.reg-label { display: block; }
select.field { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 36px; }
.reg-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; cursor: pointer; }
.reg-check input { position: absolute; opacity: 0; pointer-events: none; }
.reg-check-box { flex: none; width: 20px; height: 20px; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; color: var(--on-accent); margin-top: 1px; transition: all .15s var(--ease); }
.reg-check input:checked + .reg-check-box { background: var(--accent); border-color: var(--accent); }
.login-switch { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; }
.login-switch-link { color: var(--accent); font-weight: 600; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.login-switch-link:hover { text-decoration: underline; }
.inline-link { color: var(--accent); font-weight: 600; }
.inline-link:hover { text-decoration: underline; }
.field[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(217,101,107,.16); }

/* ============================================================
   PAGE LOADER — present in source before first paint (no flash),
   faded out on load and back in during link navigation.
   ============================================================ */
.kf-loader {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 38%, var(--bg-grad-a), var(--bg) 72%);
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}
.kf-loading .kf-loader { opacity: 1; visibility: visible; }
.kf-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kf-loader-mark { position: relative; width: 72px; height: 72px; display: grid; place-items: center; color: var(--accent); }
.kf-loader-mark::before {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--line);
  background: linear-gradient(140deg, #C6A66426, #C6A6640a);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.kf-loader-mark::after {
  content: ""; position: absolute; inset: -32%;
  background: radial-gradient(circle, rgba(198,166,100,.30), transparent 60%);
  filter: blur(9px); animation: kfGlow 1.8s var(--ease) infinite;
}
.kf-loader-mark svg { position: relative; z-index: 1; width: 44px; height: 44px; animation: kfMarkPulse 1.8s var(--ease) infinite; }
@keyframes kfMarkPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes kfGlow { 0%, 100% { opacity: .4; } 50% { opacity: .9; } }
.kf-loader-word { text-align: center; display: flex; flex-direction: column; gap: 3px; }
.kf-loader-title { font-family: var(--font-serif); font-size: 22px; color: var(--ink); line-height: 1; }
.kf-loader-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-3); }
.kf-loader-bar { width: 144px; height: 2px; background: var(--line); overflow: hidden; position: relative; margin-top: 6px; }
.kf-loader-bar span { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: kfBar 1.1s var(--ease) infinite; }
@keyframes kfBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
  .kf-loader-mark svg, .kf-loader-mark::after, .kf-loader-bar span { animation: none; }
  .kf-loader { transition: opacity .2s linear; }
}

/* forgot password */
.fp-badge { display: inline-grid; place-items: center; width: 46px; height: 46px; color: var(--accent);
  border: 1px solid var(--line); background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.fp-channels { display: flex; flex-direction: column; gap: 10px; }
.fp-channel { display: flex; align-items: flex-start; gap: 14px; text-align: left; width: 100%;
  padding: 14px 15px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
a.fp-channel:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
.fp-channel-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent);
  border: 1px solid var(--line); background: var(--bg); }
.fp-channel-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fp-channel-label { font-weight: 600; font-size: 14.5px; }
.fp-channel-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.fp-channel-action { font-size: 11px; letter-spacing: .03em; color: var(--accent); margin-top: 3px; }
.fp-channel-chev { flex: none; color: var(--ink-3); margin-top: 4px; }

@media (max-width: 560px) {
  .reg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* ============================================================
   STATIC PAGES + FOOTER
   ============================================================ */
.staticpage { display: flex; flex-direction: column; gap: 20px; }
.back-link { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; align-self: flex-start; }
.back-link:hover { color: var(--accent); }
.static-hero { padding: 32px 34px; position: relative; }
.static-body { display: flex; flex-direction: column; gap: 26px; }
.static-block { border-left: 2px solid var(--line); padding-left: 18px; }

.footer { border-top: 1px solid var(--line); margin-top: auto; background: var(--panel); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-note { font-size: 10.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; letter-spacing: .03em; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links button { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.footer-links button:hover { color: var(--accent); }
.footer-status { font-size: 11px; }

/* ============================================================
   LIVE TICKER / SYSTEM STRIP  (FM ticker × W-Y terminal)
   ============================================================ */
.ticker {
  position: sticky; top: var(--header-h); z-index: 40;
  display: flex; align-items: stretch; height: 30px;
  background: color-mix(in srgb, var(--bg) 88%, #000);
  border-top: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  border-bottom: 1px solid var(--line);
  cursor: pointer; overflow: hidden; user-select: none;
}
.ticker:hover { border-bottom-color: var(--accent); }
.ticker-head {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; flex: none;
  background: var(--panel-2); border-right: 1px solid var(--line);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  position: relative; z-index: 2;
}
.ticker-cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ticker-livebadge { color: var(--live); font-weight: 600; letter-spacing: .1em; }
.ticker-track { position: relative; flex: 1; overflow: hidden; display: flex; }
.ticker-stream {
  display: flex; align-items: center; gap: 0; white-space: nowrap; flex: none;
  padding-left: 0; animation: tickerScroll 46s linear infinite;
}
.ticker:hover .ticker-stream { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ticker-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 6px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); letter-spacing: .02em;
}
.ticker-item.is-live { color: var(--ink); }
.ticker-item.is-sys { color: var(--ink-3); }
.ticker-tag {
  font-size: 9px; letter-spacing: .08em; padding: 2px 6px; color: var(--accent);
  border: 1px solid var(--line); text-transform: uppercase; font-weight: 600;
}
.ticker-item.is-live .ticker-tag { color: #fff; background: var(--live); border-color: transparent; }
.ticker-sep { color: var(--line); font-style: normal; padding-left: 8px; }
.ticker-item.is-sys .ticker-tag { display: none; }

@media (max-width: 820px) {
  .ticker-head { padding: 0 10px; }
  .ticker-head span:not(.ticker-cursor):not(.ticker-livebadge) { display: none; }
}

/* ============================================================
   FORM GUIDE  (FM recent results)
   ============================================================ */
.lbplayer-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.formguide { display: inline-flex; gap: 2px; }
.fg {
  width: 14px; height: 14px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; font-style: normal;
  color: #fff; border-radius: 1px;
}
.fg-W { background: var(--good); }
.fg-D { background: var(--warn); color: var(--navy); }
.fg-L { background: var(--bad); }
[data-theme="light"] .fg-D { color: #fff; }

@media (max-width: 560px) {
  .lbdept { display: none; }
}
.menu-scrim { position: fixed; inset: 0; z-index: 90; }
.langmenu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; min-width: 190px; padding: 6px; box-shadow: var(--shadow); }
.langmenu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: all .14s var(--ease); }
.langmenu-item:hover { background: var(--panel-2); color: var(--ink); }
.langmenu-item.active { color: var(--ink); }

/* ============================================================
   ANGULAR / HUD ENHANCEMENTS
   ============================================================ */
/* corner brackets on the main content frames (gated by HUD toggle) */
body:not(.no-hud) .post,
body:not(.no-hud) .rail-card,
body:not(.no-hud) .lbtable,
body:not(.no-hud) .composer {
  position: relative;
}
body:not(.no-hud) .post::after,
body:not(.no-hud) .rail-card::after,
body:not(.no-hud) .lbtable::after,
body:not(.no-hud) .composer::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2; opacity: .5;
  --b: 1.5px; --l: 11px; --c: var(--accent);
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 0 0 / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 0 100% / var(--b) var(--l),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--b),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--b) var(--l);
  background-repeat: no-repeat;
}

/* chamfer the solid accent shapes */
.seg-btn.active,
.login-lang-btn.active,
.chip-gold, .chip-live, .chip,
.ptag {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

/* sharp accent header line on key panels */
.hero, .static-hero, .profile-cover, .scorebox, .pred-inset {
  border-top: 2px solid var(--accent);
}
.hud { border-top: 2px solid var(--accent); }

/* notched section heading index */
.scoredigits .sep { animation: none; }

/* technical marker on eyebrows only */
.eyebrow::before { content: "▍ "; }

/* nav active gets a left accent bar instead of soft fill */
.navitem.active { border-left: 2px solid var(--accent); padding-left: 12px; }

/* fixrow / scorebox status accent edge */
.fixrow-live { box-shadow: inset 2px 0 0 var(--live); }
.scorebox[data-status="live"] { box-shadow: inset 0 2px 0 var(--live); border-top-color: var(--live); }

/* avatar squared ring offset for chamfer plates */
.lb-rank, .rail-lb-rank { font-variant-numeric: tabular-nums; }
.avatar-btn { width: auto; padding: 0 3px; }

/* density + hud toggles */
.no-hud .ticks::before, .no-hud .ticks::after { display: none; }
.no-hud .app-bg::after { display: none; }
.density-compact .post { padding: 14px 16px; }
.density-compact .layout { gap: 16px; }
.density-compact .feedscreen, .density-compact .feedlist { gap: 12px; }

@media (max-width: 560px) {
  .podium { gap: 8px; }
  .podium-name { font-size: 12px; }
  .lbrow { grid-template-columns: 32px minmax(0,1fr) 50px; }
  .lbrow .lbnum:nth-child(3), .lbrow .lbnum:nth-child(4) { display: none; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .login-form { padding: 28px 22px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BOOTSTRAP 5 INTEROP + PLAIN-HTML PORT HELPERS
   (Bootstrap CSS loads first; these rules win by source order.
    Kickoff's bespoke component classes stay authoritative — Bootstrap
    grid/utilities remain available for your own Django templates.)
   ============================================================ */

/* keep our type + canvas after Bootstrap reset */
body { font-family: var(--font-sans); font-size: 15px; }
:root, [data-theme] { --bs-heading-color: var(--ink); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); }
img { max-width: 100%; }

/* neutralise Bootstrap button/card variables so our skin reads cleanly */
.btn { --bs-btn-padding-x: initial; --bs-btn-padding-y: initial; --bs-btn-font-size: initial;
       --bs-btn-border-radius: 0; line-height: 1.2; }
.card { --bs-card-bg: transparent; --bs-card-border-color: var(--line); --bs-card-color: var(--ink);
        --bs-card-border-radius: 0; --bs-card-spacer-y: 0; --bs-card-spacer-x: 0; color: var(--ink); }
.badge { all: unset; }
.navitem .badge { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-left: auto; }

/* flag image (was a React <Flag> component) */
.flag-img { object-fit: cover; display: block; border: 1px solid var(--line-soft); flex: none; }

/* avatar image fill */
.avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-init { font-size: .9em; }

/* score digits separator colour */
.scoredigits .sep { color: var(--accent); }

/* small typographic helpers used inline in the React build */
.fz-13 { font-size: 13px; } .fz-14 { font-size: 14px; } .fz-15 { font-size: 15px; }
.fz-21 { font-size: 21px; } .fz-26 { font-size: 26px; } .fz-30 { font-size: 30px; }
.fz-34 { font-size: 34px; } .fz-36 { font-size: 36px; } .fz-38 { font-size: 38px; }
.fw-700 { font-weight: 700; }
.mt-6 { margin-top: 6px; } .mb-4 { margin-bottom: 4px; }

/* language menu open state (toggled by JS) */
.langmenu[hidden], .menu-scrim[hidden] { display: none !important; }

/* generic hidden helper for JS toggles */
[hidden] { display: none !important; }

/* comment composer row */
.comment-compose { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.comment-compose .field { padding: 9px 14px; }
.comment-compose .field:focus { border-color: var(--accent); }
.comment-send { flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; }

/* emoji quick-bar (plain comments, emoji-friendly — no rich formatting) */
.emoji-bar {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.emoji-bar-label {
  width: 100%; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.emoji-bar button {
  font-size: 16px; line-height: 1; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.emoji-bar button:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
.emoji-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-hero { margin-bottom: 22px; }
.search-field-wrap { position: relative; display: flex; align-items: center; }
.search-field-wrap > i { position: absolute; left: 16px; color: var(--ink-3); pointer-events: none; }
.search-big {
  width: 100%; font-family: var(--font-sans); font-size: 18px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-bottom: 2px solid var(--accent);
  padding: 16px 18px 16px 46px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.search-big::placeholder { color: var(--ink-3); }
.search-big:focus { outline: none; background: var(--panel-2); }
.search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sr-chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s var(--ease);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.sr-chip:hover { border-color: var(--accent); color: var(--ink); }
.sr-chip.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.sr-chip .sr-count { font-size: 10px; opacity: .7; }
.sr-section { margin-top: 24px; }
.sr-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sr-list { display: flex; flex-direction: column; gap: 8px; }
.sr-item {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.sr-item:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
.sr-media { flex: none; display: flex; align-items: center; }
.sr-body { flex: 1; min-width: 0; }
.sr-title { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.sr-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; color: var(--ink-3); margin-top: 2px; }
.sr-badge { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 4px; }
.sr-badge .sr-badge-k { font-size: 9px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.sr-chev { flex: none; color: var(--ink-3); }
.sr-item:hover .sr-chev { color: var(--accent); }
.sr-empty { text-align: center; color: var(--ink-3); padding: 48px 18px; font-size: 14px; }
.sr-empty > i { color: var(--ink-3); opacity: .5; margin-bottom: 10px; display: block; }

/* notification empty-state icon */
.notif-empty > i { color: var(--accent); display: block; }

/* icon alignment (Remix Icon) */
[class^="ri-"], [class*=" ri-"] { line-height: 1; vertical-align: middle; display: inline-block; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dash-grid .col-span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } .dash-grid .col-span-2 { grid-column: auto; } }

.dash-block { padding: 16px 17px; display: flex; flex-direction: column; }
.dash-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.dash-block-head .kicker { display: flex; align-items: center; gap: 7px; }
.dash-block-head .kicker i { color: var(--accent); font-size: 15px; }
.dash-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 3px; }
.dash-link:hover { text-decoration: underline; }

/* stat tiles */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
.dash-stat { padding: 15px 14px; position: relative; overflow: hidden; }
.dash-stat .ds-val { font-family: var(--font-serif); font-size: 32px; line-height: 1; color: var(--ink); }
.dash-stat .ds-val.accent { color: var(--accent); }
.dash-stat .ds-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; }
.dash-stat .ds-trend { position: absolute; top: 13px; right: 13px; font-family: var(--font-mono); font-size: 11px; display: inline-flex; align-items: center; gap: 2px; }

/* deadline / countdown */
.dash-countdown { display: flex; align-items: center; gap: 14px; }
.cd-clock { flex: none; width: 54px; height: 54px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--line); background: var(--bg); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.cd-clock i { font-size: 26px; }
.cd-digits { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.cd-digits .cd-unit { font-size: 12px; color: var(--ink-3); margin: 0 6px 0 2px; }

/* mini fixture rows */
.dash-fixrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.dash-fixrow:last-child { border-bottom: none; }
.dash-fixrow .dfx-teams { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.dash-fixrow .dfx-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.dash-fixrow .btn { padding: 6px 12px; font-size: 11px; }

/* form guide pills */
.dash-form { display: flex; align-items: center; gap: 6px; }
.dash-form .fg { width: 30px; height: 30px; }
.dash-form-summary { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* achievements */
.dash-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dash-badge { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); background: var(--panel); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.dash-badge.locked { opacity: .42; }
.dash-badge-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--line); background: linear-gradient(140deg, #C6A66426, #C6A6640a); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.dash-badge.locked .dash-badge-ico { color: var(--ink-3); background: var(--bg); }
.dash-badge-ico i { font-size: 19px; }
.dash-badge-t { font-weight: 600; font-size: 13px; color: var(--ink); }
.dash-badge-s { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; letter-spacing: .02em; }

/* recent results list */
.dash-recent-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.dash-recent-row:last-child { border-bottom: none; }
.dash-recent-row .drr-match { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-size: 13px; }
.dash-recent-row .drr-score { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.dash-recent-row .drr-score .sep { color: var(--accent); margin: 0 2px; }
/* fixed-column fixture rows (consistent flag/code/score alignment) */
.dash-recent-row .drr-fixture { flex: 0 0 auto; display: grid; grid-template-columns: 62px auto 62px; align-items: center; gap: 10px; }
.dash-recent-row .drr-team { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.dash-recent-row .drr-team.away { justify-content: flex-end; }
.dash-recent-row .drr-fixture .drr-score { text-align: center; white-space: nowrap; }
.dash-recent-row .ptag { margin-left: auto; }

/* ============================================================
   MATCH TIPS (browse colleagues' predictions on a finished match)
   ============================================================ */
.mt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mt-select-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.mt-select-wrap .kicker { display: flex; align-items: center; gap: 6px; }
.mt-select-wrap select.field { font-size: 14px; }
.mtdrop { position: relative; }
.mtdrop-trigger { display: flex; align-items: center; gap: 9px; cursor: pointer; text-align: left; min-height: 46px; }
.mtdrop-trigger:hover { border-color: var(--accent); }
.mtdrop-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mtdrop-current { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.mtdrop-current .flag-img { border-radius: 3px; }
.mtdrop-caret { margin-left: auto; flex: none; color: var(--ink-3); font-size: 18px; transition: transform .2s var(--ease); }
.mtdrop.open .mtdrop-caret { transform: rotate(180deg); }
.mt-opt { gap: 8px; }
.mtdrop-menu { right: auto; left: 0; min-width: 100%; width: max-content; max-width: 360px; }
.mtdrop-menu .ftmenu-list { overflow-x: hidden; }
.mt-opt-code { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .03em; color: inherit; }
.mt-opt-score { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; color: var(--accent); padding: 0 3px; flex: none; }
.mt-opt-grp { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); flex: none; padding-left: 8px; }
.mt-result { margin-bottom: 20px; }
.mt-list-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mt-list-head .mt-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.mt-list { display: flex; flex-direction: column; gap: 8px; }
.mt-row {
  display: grid; grid-template-columns: 28px auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--panel); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.mt-row.you { border-left: 2px solid var(--accent); }
.mt-row .mt-rank { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.mt-row .mt-who { min-width: 0; }
.mt-row .mt-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.mt-row .mt-dept { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .02em; }
.mt-row .mt-pred { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; justify-self: end; }
.mt-row .mt-pred .sep { color: var(--ink-3); margin: 0 2px; }
.mt-row .mt-pred.is-exact .sep { color: var(--accent); }
@media (max-width: 560px) {
  .mt-row { grid-template-columns: 22px 1fr auto auto; gap: 9px; }
  .mt-row .mt-media { display: none; }
}

/* report-an-issue rail widget */
.report-card { padding: 15px 15px 16px; }
.report-card .kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.report-card .kicker i { color: var(--accent); font-size: 14px; }
.report-lead { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-bottom: 13px; }
.report-actions { display: flex; flex-direction: column; gap: 8px; }
.report-act {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.report-act:hover { border-color: var(--accent); background: var(--panel-2); transform: translateY(-1px); }
.report-act-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--line); background: var(--bg); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.report-act-ico i { font-size: 16px; }
.report-act-body { min-width: 0; flex: 1; }
.report-act-label { font-weight: 600; font-size: 12.5px; color: var(--ink); display: block; }
.report-act-note { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .02em; margin-top: 2px; display: block; }

/* compact live widget (fits the narrow dashboard column) */
.dash-live-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-live-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.dash-live-team { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; min-width: 0; }
.dash-live-team.away { justify-content: flex-end; }
.dash-live-score { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: .04em; white-space: nowrap; }
.dash-live-score .sep { color: var(--live); margin: 0 4px; }
.dash-live-foot { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .05em; margin-top: 12px; display: flex; justify-content: space-between; }

/* ============================================================
   POINTS CAPTURED widget (compact = feed sidebar, extended = dashboard)
   ============================================================ */
.ptscap { padding: 15px 15px 16px; }
.ptscap .kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.ptscap .kicker i { color: var(--accent); font-size: 14px; }
.ptscap-big { display: flex; align-items: baseline; gap: 6px; }
.ptscap-earned { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--accent); }
.ptscap-of { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.ptscap-bar { position: relative; height: 7px; background: var(--bg); border: 1px solid var(--line); margin: 12px 0 9px; display: flex; overflow: hidden; }
.ptscap-seg { height: 100%; }
.ptscap-seg.exact { background: var(--accent); }
.ptscap-seg.outcome { background: var(--good); }
.ptscap-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; }
.ptscap-foot .pc-cap { color: var(--ink-2); }
.ptscap-foot .pc-cap b { color: var(--accent); }
.ptscap-foot .pc-tbl { color: var(--ink-3); }

/* extended (dashboard) */
.ptscap-x { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; }
.ptscap-x-rate { text-align: center; }
.ptscap-x-rate .pcx-pct { font-family: var(--font-serif); font-size: 52px; line-height: .9; color: var(--accent); }
.ptscap-x-rate .pcx-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.ptscap-x-body { min-width: 0; }
.ptscap-x-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 9px; }
.ptscap-x-head .pcx-earned { font-family: var(--font-mono); font-size: 21px; font-weight: 700; color: var(--ink); }
.ptscap-x-head .pcx-of { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.ptscap-x .ptscap-bar { height: 12px; margin: 0 0 14px; }
.ptscap-legend { display: flex; flex-direction: column; gap: 8px; }
.pcx-leg { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.pcx-dot { width: 11px; height: 11px; flex: none; }
.pcx-dot.exact { background: var(--accent); } .pcx-dot.outcome { background: var(--good); } .pcx-dot.table { background: var(--line); border: 1px solid var(--ink-3); }
.pcx-leg-label { color: var(--ink-2); }
.pcx-leg-val { margin-left: auto; font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.ptscap-x-insight { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .03em; display: flex; align-items: center; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ptscap-x-insight i { color: var(--accent); }
@media (max-width: 480px) { .ptscap-x { grid-template-columns: 1fr; gap: 14px; } .ptscap-x-rate { text-align: left; display: flex; align-items: baseline; gap: 12px; } }

/* ============================================================
   PROFILE EDIT
   ============================================================ */
.pe-section { margin-bottom: 22px; }
.pe-section > .kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; }
.pe-section > .kicker i { color: var(--accent); font-size: 14px; }
.pe-avatar-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pe-avatar-preview { width: 92px; height: 92px; flex: none; border: 2px solid var(--accent); overflow: hidden; background: var(--panel); display: grid; place-items: center; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.pe-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.pe-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.pe-avatar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-avatar-hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; }
.pe-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }

/* danger zone */
.pe-danger { border-color: color-mix(in oklch, var(--bad) 45%, var(--line)); border-left: 2px solid var(--bad); margin-top: 26px; padding: 16px 17px; }
.pe-danger .kicker { display: flex; align-items: center; gap: 7px; color: var(--bad); margin-bottom: 8px; }
.pe-danger .kicker i { font-size: 14px; }
.pe-danger p { color: var(--ink-2); font-size: 13px; line-height: 1.6; margin-bottom: 14px; max-width: 520px; }
.btn-danger { background: transparent; border: 1px solid var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad); color: #fff; }
.pe-deact-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* saved (bookmark) state */
.post-actions .pa.saved { color: var(--accent); }

/* ============================================================
   GENERIC ERROR PAGE
   ============================================================ */
.errpage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; position: relative; }
.err-inner { width: 100%; max-width: 580px; text-align: center; position: relative; }
.err-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.err-plate { position: relative; display: inline-block; padding: 8px 6px 4px; margin: 6px 0 4px; }
.err-code {
  font-family: var(--font-serif); font-weight: 700; line-height: .92;
  font-size: clamp(96px, 22vw, 168px); letter-spacing: -.02em;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err-scan { position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(8,19,31,.0) 0 3px, rgba(8,19,31,.35) 3px 5px);
  mix-blend-mode: multiply; }
[data-theme="light"] .err-scan { background-image: repeating-linear-gradient(0deg, rgba(244,239,228,0) 0 3px, rgba(244,239,228,.45) 3px 5px); }
.err-title { font-family: var(--font-serif); font-size: clamp(24px, 5vw, 32px); color: var(--ink); margin-bottom: 12px; }
.err-lead { color: var(--ink-2); font-size: 15px; line-height: 1.65; max-width: 440px; margin: 0 auto 28px; }
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.err-hud {
  display: inline-flex; flex-wrap: wrap; gap: 0; justify-content: center; align-items: stretch;
  border: 1px solid var(--line); background: var(--panel); font-family: var(--font-mono);
  border-top: 2px solid var(--accent);
}
.err-hud > div { padding: 9px 16px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line-soft); }
.err-hud > div:last-child { border-right: none; }
.err-hud-k { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.err-hud-v { font-size: 12.5px; color: var(--ink); letter-spacing: .04em; }
.err-hud-v.live { color: var(--live); }
.err-report { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-3); }
.err-report a { color: var(--accent); }
.err-report a:hover { text-decoration: underline; }
@media (max-width: 480px) { .err-hud { width: 100%; } .err-hud > div { flex: 1; } }

/* ============================================================
   LANGUAGE MENU — active check (parity with original)
   ============================================================ */
.langmenu-check { margin-left: auto; display: inline-flex; color: var(--accent); }

/* ============================================================
   NOTIFICATIONS DROPDOWN (bell)
   ============================================================ */
.notif-badge {
  position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--live); color: #fff; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; border: 1.5px solid var(--bg); border-radius: 9px; line-height: 1;
}
.notifmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  width: 350px; max-width: 92vw; padding: 0; overflow: hidden; box-shadow: var(--shadow);
}
.notifmenu-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-clear { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.notif-clear:hover { text-decoration: underline; }
.notif-list { max-height: 384px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft); transition: background .14s var(--ease);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--panel-2); }
.notif-ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent);
  border: 1px solid var(--line); background: var(--bg);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.notif-body { flex: 1; min-width: 0; }
.notif-title { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.notif-text { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.notif-time { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-3); margin-top: 5px; }
.notif-go { flex: none; align-self: center; color: var(--ink-3); }
.notif-item:hover .notif-go { color: var(--accent); }
.notif-empty { padding: 32px 18px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ============================================================
   TOAST / FLASH MESSAGES (Django Messages Framework)
   Floating, stacking, auto-dismiss. Dark-theme-first, HUD-styled.
   ============================================================ */
.kf-toast-region {
  position: fixed; top: calc(var(--header-h) + 14px); right: 18px; z-index: 300;
  display: flex; flex-direction: column; gap: 12px;
  width: 384px; max-width: calc(100vw - 36px); pointer-events: none;
}
.kf-toast {
  --toast-accent: var(--accent);
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--toast-accent);
  box-shadow: var(--shadow); padding: 13px 14px 14px 15px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  animation: toastIn .32s var(--ease) both;
}
.kf-toast.is-leaving { animation: toastOut .24s var(--ease) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(18px); } }

.kf-toast-success { --toast-accent: var(--good); }
.kf-toast-error   { --toast-accent: var(--bad); }
.kf-toast-warning { --toast-accent: var(--warn); }
.kf-toast-info    { --toast-accent: var(--accent); }

.kf-toast-ico {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--toast-accent);
  border: 1px solid var(--line); background: var(--bg);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.kf-toast-content { flex: 1; min-width: 0; padding-top: 1px; }
.kf-toast-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--toast-accent); margin-bottom: 3px;
}
.kf-toast-msg { font-size: 13.5px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.kf-toast-close {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-3);
  margin: -2px -4px 0 0; transition: color .15s var(--ease), background .15s var(--ease);
}
.kf-toast-close:hover { color: var(--ink); background: var(--panel-2); }
.kf-toast-close:focus-visible { outline: 2px solid var(--toast-accent); outline-offset: 1px; }
.kf-toast-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--toast-accent); opacity: .55; transform-origin: left;
  animation: toastProgress linear forwards;
}
.kf-toast:hover .kf-toast-progress { animation-play-state: paused; }
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 560px) {
  .kf-toast-region { left: 12px; right: 12px; top: 12px; width: auto; max-width: none; }
  @keyframes toastIn  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px); } }
}
@media (prefers-reduced-motion: reduce) {
  .kf-toast, .kf-toast.is-leaving { animation: none; }
  .kf-toast-progress { animation: none; opacity: 0; }
}


/* ============================================================
   icon-size + reuse utilities  (replaces repeated inline styles)
   ============================================================ */
.is-10{font-size:10px}.is-11{font-size:11px}.is-12{font-size:12px}.is-13{font-size:13px}.is-14{font-size:14px}.is-15{font-size:15px}.is-16{font-size:16px}.is-17{font-size:17px}.is-18{font-size:18px}.is-19{font-size:19px}.is-20{font-size:20px}.is-21{font-size:21px}.is-22{font-size:22px}.is-23{font-size:23px}.is-24{font-size:24px}.is-25{font-size:25px}.is-26{font-size:26px}.is-27{font-size:27px}.is-28{font-size:28px}.is-29{font-size:29px}.is-30{font-size:30px}.is-31{font-size:31px}.is-32{font-size:32px}.is-33{font-size:33px}.is-34{font-size:34px}.is-35{font-size:35px}.is-36{font-size:36px}.is-37{font-size:37px}.is-38{font-size:38px}.is-39{font-size:39px}.is-40{font-size:40px}
.brand-name { display: block; }
.brand-text { text-align: left; }
.brand-mark-lg { width: 52px; height: 52px; }
.brand-name-lg { font-size: 26px; }
.flag-round { border-radius: 50%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 34px; height: 34px; }
.rankcard-num { font-size: 38px; line-height: 1; }
.rankcard-pts { font-size: 22px; color: var(--accent); font-weight: 700; }
.hud-title { margin-bottom: 10px; font-weight: 600; }


/* ============================================================
   phase 2: svg/flag/team/avatar reuse classes
   ============================================================ */
.brand-mark svg, .kf-loader-mark svg { width: 1em; height: 1em; }
.flag-16{width:24px;height:16px}.flag-18{width:27px;height:18px}.flag-20{width:30px;height:20px}.flag-22{width:33px;height:22px}.flag-24{width:36px;height:24px}.flag-26{width:39px;height:26px}.flag-28{width:42px;height:28px}
.team-name{font-weight:600;font-size:14.5px;letter-spacing:.01em}
.team-name-lg{font-size:17px}
.avatar-24{width:24px;height:24px}.avatar-30{width:30px;height:30px}.avatar-32{width:32px;height:32px}.avatar-36{width:36px;height:36px}.avatar-38{width:38px;height:38px}.avatar-40{width:40px;height:40px}.avatar-44{width:44px;height:44px}.avatar-48{width:48px;height:48px}.avatar-56{width:56px;height:56px}.avatar-64{width:64px;height:64px}.avatar-72{width:72px;height:72px}