/* ==========================================================================
   Trixcity Fantasy — design system v3
   Art direction lifted verbatim from the Trixcity site so the game reads as
   part of the same family. Tokens, panel treatment, section headers, table
   bands and the nav underline are the SAME values as trixcity.lol, resolved
   from its Tailwind bundle (_next/static/chunks/14aghoasred7d.css).

   Trixcity panel  = .rounded-sm .border .border-white/6 .bg-primary/4
   Trixcity title  = .text-xs .font-bold .uppercase .text-primary
   Trixcity footer = .rounded-b-sm .bg-primary/16 .text-xs .font-bold .text-primary
   Trixcity header = h-[47px] .bg-navbar-background, active nav = 3px primary underline
   ========================================================================== */

/* ---------- webfont: the same Plus Jakarta Sans the site ships ---------- */
/* unicode-range must be the EXACT range this subset actually contains — copied
   from Trixcity's own @font-face. Declaring a wider range than the file covers
   makes the browser render tofu instead of falling back to a system font, which
   would break names like "İstanbul Wildcats", "Barcząca Esports" or any CJK. */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('fonts/jakarta.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- Trixcity core palette (identical values) --- */
  --background:#131619;
  --foreground:#fafafa;
  --card:#191c22;
  --navbar:#0d0f10;
  --primary:#ffe800;
  --primary-fg:#131619;
  --muted:#242832;
  --muted-fg:#9b9c9e;      /* 6.9:1 on --background — readable, unlike the old #6b7385 */
  --secondary:#343540;
  --border:#303133;
  --success:#4ac97e;
  --danger:#f7665e;
  --live:#ef4444;
  --legendary:#ffd47d;     /* Trixcity's own legendary token */
  --shade2:#cdcecf;
  --shade3:#b3b3b3;

  /* --- Trixcity alpha ramps (bg-primary/4, border-white/6, …) --- */
  --hair:rgba(255,255,255,.06);
  --hair2:rgba(255,255,255,.10);
  --tint4:rgba(255,232,0,.04);
  --tint8:rgba(255,232,0,.08);
  --tint16:rgba(255,232,0,.16);
  --tint28:rgba(255,232,0,.28);

  /* --- geometry --- */
  --radius:.625rem;                        /* Trixcity --radius */
  --r-sm:calc(var(--radius) - 4px);        /* .rounded-sm = 6px */
  --r-md:var(--radius);
  --shell:1152px;                          /* Trixcity --max-width-content */
  --head-h:47px;                           /* Trixcity header height */

  /* --- type --- */
  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* --- rarity language (tuned so nothing collides with brand yellow) --- */
  --r-common:#9b9c9e;
  --r-uncommon:#4ac97e;
  --r-rare:#92c5ff;
  --r-epic:#b98cff;
  --r-legendary:#ffd47d;
}

/* ==================== base ==================== */
*,*::before,*::after{box-sizing:border-box}
/* scrollbar + base weight are verbatim from Trixcity's own html/body rules:
   body{...font-weight:500}, html{scrollbar-width:thin;scrollbar-color:var(--primary) transparent}.
   Trixcity's letter-spacing is --tracking-normal = 0em, so we set none. */
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:var(--font);font-size:14px;line-height:1.5;   /* was 12.5px — the core readability fix */
  font-weight:500;
  min-height:100dvh;-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0a0c}
::-webkit-scrollbar-thumb{background:#2e2c16;border:2px solid #0a0a0c;border-radius:var(--r-sm)}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select{font-family:inherit}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}
::selection{background:var(--tint28);color:#fff}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 16px}
@media(min-width:768px){.shell{padding:0 24px}}
#app{padding-bottom:96px}

/* ==================== header ==================== */
header{
  position:sticky;top:0;z-index:60;height:var(--head-h);
  background:var(--navbar);border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
header .shell{height:100%;display:flex;align-items:center;gap:12px}
@media(min-width:768px){header .shell{gap:20px}}

/* full header height so the logo is a real target, not a 20px-tall sliver */
.brand{display:flex;align-items:center;gap:8px;flex-shrink:0;align-self:stretch}
.brand .bolt{width:20px;height:20px;flex:0 0 20px}
.brand .wm{font-weight:800;font-size:15px;letter-spacing:.01em;line-height:1}
.brand .wm b{color:var(--primary)}
.brand .sub{
  font-size:8px;font-weight:800;letter-spacing:.22em;color:var(--muted-fg);
  border:1px solid var(--border);border-radius:3px;padding:2px 5px;line-height:1;
}
@media(max-width:400px){.brand .sub{display:none}}

/* desktop nav — Trixcity's underline treatment, verbatim geometry */
.mainnav{display:none;align-items:stretch;height:100%;gap:22px;margin-left:6px}
@media(min-width:900px){.mainnav{display:flex}}
.mainnav a{
  position:relative;display:flex;align-items:center;
  font-size:12px;font-weight:600;color:var(--muted-fg);
  transition:color .15s;margin-bottom:-2px;padding-bottom:2px;
}
.mainnav a::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:calc(100% + 12px);height:3px;border-radius:999px;background:transparent;transition:background .15s;
}
.mainnav a:hover{color:var(--primary)}
.mainnav a.on{color:var(--foreground)}
.mainnav a.on::after{background:var(--primary)}
.mainnav a.on{box-shadow:inset 0 -8px 10px -10px var(--primary)}

.hspacer{flex:1}

/* gems + identity */
.gems{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:12px;font-weight:800;color:var(--foreground);
  background:var(--tint8);border:1px solid var(--tint16);
  border-radius:999px;padding:4px 11px 4px 7px;
}
.gems .dot{
  width:12px;height:12px;border-radius:50%;flex:0 0 12px;
  background:radial-gradient(circle at 35% 30%,#8ff0ff,#22b8d8);
  box-shadow:0 0 6px rgba(34,184,216,.55);
}
.whoami{display:none;align-items:center;gap:6px;font-size:12px;color:var(--muted-fg);flex-shrink:0}
@media(min-width:768px){.whoami{display:flex}}
.whoami b{color:var(--foreground);font-weight:700}
.whoami a{cursor:pointer;transition:color .15s}
.whoami a:hover{color:var(--primary)}

.burger{
  display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;
  border:0;background:transparent;cursor:pointer;padding:0;flex-shrink:0;
}
@media(min-width:900px){.burger{display:none}}
.burger i{display:block;width:18px;height:2px;background:var(--foreground);border-radius:2px;position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--foreground);border-radius:2px}
.burger i::before{top:-6px}.burger i::after{top:6px}

/* mobile drawer — plain display flip, never a transition (a stalled
   animation timeline must not be able to strand the only navigation) */
#drawer{display:none;position:fixed;top:var(--head-h);left:0;right:0;bottom:0;z-index:59;background:rgba(0,0,0,.6)}
#drawer.on{display:block}
#drawer nav{background:var(--navbar);border-bottom:1px solid var(--border);padding:6px 0}
#drawer a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:50px;padding:0 20px;font-size:15px;font-weight:600;color:var(--foreground);
}
#drawer a.on{color:var(--primary);background:var(--tint8);box-shadow:inset 3px 0 0 var(--primary)}
#drawer a span{color:var(--muted-fg);font-size:12px;font-weight:500}

/* ==================== page furniture ==================== */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 14px}
.pagehead h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.pagehead .lead{margin:4px 0 0;font-size:13px;color:var(--muted-fg)}

/* the small uppercase yellow label Trixcity uses for section titles */
.slabel{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--primary);letter-spacing:.02em;margin:0}

.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0 12px}
.sechead h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.sechead .sub{font-size:12px;color:var(--muted-fg);font-weight:500}

/* ==================== panel (Trixcity's exact recipe) ==================== */
.panel{position:relative;border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--tint4)}
.panel.solid{background:var(--card)}
.panel > .phead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px 4px;
}
.panel > .phead h2{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--primary)}
.panel > .phead .meta{font-size:11px;font-weight:600;color:var(--muted-fg)}
.panel > .pbody{padding:12px 16px 16px}
.panel > .pfoot{
  display:block;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--tint16);padding:8px 16px;text-align:center;
  font-size:12px;font-weight:700;color:var(--primary);
}
.panel > .pfoot:hover{text-decoration:underline}

/* segmented control — Trixcity's Upcoming/Results toggle */
.seg{display:flex;border:1px solid var(--tint16);border-radius:var(--r-sm);overflow:hidden}
.seg button{
  border:0;cursor:pointer;background:transparent;color:var(--muted-fg);
  padding:5px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  transition:background .15s,color .15s;
}
.seg button:hover{color:var(--foreground);background:var(--tint8)}
.seg button.on{background:var(--tint16);color:#fff}

/* ==================== buttons ==================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;cursor:pointer;border-radius:var(--r-sm);
  padding:11px 18px;font-size:13px;font-weight:800;letter-spacing:.01em;
  background:var(--primary);color:var(--primary-fg);
  transition:filter .15s,transform .1s;min-height:40px;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.38;cursor:not-allowed;filter:grayscale(.4)}
.btn[disabled]:active{transform:none}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--foreground);font-weight:700}
.btn.ghost:hover{background:var(--muted);filter:none}
.btn.tint{background:var(--tint16);color:var(--primary);font-weight:700}
.btn.tint:hover{background:var(--tint28);filter:none}
.btn.sm{padding:7px 13px;font-size:12px;min-height:34px}
.btn.block{width:100%}

/* filter chips */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted-fg);
  border-radius:999px;padding:6px 13px;font-size:12px;font-weight:700;
  transition:background .15s,color .15s,border-color .15s;min-height:32px;
}
.chip:hover{color:var(--foreground);border-color:var(--hair2)}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.chip .n{opacity:.6;font-weight:600;margin-left:3px}

/* inputs */
.field{
  width:100%;background:var(--background);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--foreground);font-size:14px;padding:10px 12px;outline:none;transition:border-color .15s;min-height:42px;
}
.field::placeholder{color:var(--muted-fg)}
.field:focus{border-color:var(--tint28)}
.search{position:relative;flex:1;min-width:160px;max-width:280px}
.search .field{padding-left:34px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none}

/* ==================== tournament bar ==================== */
.tourbar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;margin:20px 0 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tourbar::-webkit-scrollbar{display:none}
.tourbar button{
  display:flex;align-items:center;gap:8px;flex-shrink:0;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 14px 8px 8px;color:var(--muted-fg);font-size:13px;font-weight:700;
  transition:border-color .15s,color .15s,background .15s;min-height:42px;
}
.tourbar button:hover{color:var(--foreground);border-color:var(--hair2)}
.tourbar button.on{background:var(--tint8);border-color:var(--tint28);color:var(--foreground)}
.tourbar button img{width:22px;height:22px;object-fit:contain;flex:0 0 22px}
.tourbar button .lg{
  width:22px;height:22px;border-radius:5px;flex:0 0 22px;display:grid;place-items:center;
  font-size:9px;font-weight:800;background:var(--secondary);color:var(--shade2);
}
.tourbar button.on .lg{background:var(--primary);color:var(--primary-fg)}
.tsub{margin:8px 0 0;font-size:12px;color:var(--muted-fg)}
.tsub b{color:var(--shade2);font-weight:700}

/* ==================== play layout ==================== */
.playgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
@media(min-width:1024px){.playgrid{grid-template-columns:minmax(0,1fr) 300px}}

.packrow{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:720px){.packrow{grid-template-columns:250px minmax(0,1fr)}}

/* pack */
.packcard{padding:20px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.sleeve{
  position:relative;width:132px;height:184px;border-radius:var(--r-md);
  background:linear-gradient(158deg,#2a2f3a,#15181f 60%,#0f1116);
  border:1px solid var(--tint28);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.sleeve::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 55% at 50% 0%,var(--tint16),transparent 68%);
}
.sleeve .sleevelogo{width:52px;height:52px;object-fit:contain;position:relative}
.sleeve .big{position:relative;font-size:19px;font-weight:800;line-height:1.05;letter-spacing:.01em;color:var(--foreground)}
.sleeve .cnt{position:absolute;bottom:12px;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--primary)}
.packcard h3{margin:0;font-size:15px;font-weight:800}
.packcard p{margin:0;font-size:12.5px;color:var(--muted-fg);max-width:210px;line-height:1.55}

/* reveal */
.reveal{display:flex;flex-direction:column;min-height:260px}
.reveal .rhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.reveal .rhead .t{font-size:13px;font-weight:700}
.reveal .rhead .s{font-size:12px;color:var(--muted-fg)}
.reveal .rhead .s.hit{color:var(--legendary);font-weight:700}
.rates{margin-top:auto;padding-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.rate{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted-fg);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px;
}
.rate i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.rate b{color:var(--shade2);font-weight:800}

/* ==================== the player CARD ==================== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}
@media(min-width:640px){.cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}

.card{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,#1e222b,#131519);
  border:1px solid var(--rc,var(--border));
  box-shadow:0 6px 16px -10px rgba(0,0,0,.8);
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;
}
.card.pick{cursor:pointer}
.card.pick:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(0,0,0,.9)}
.card.used{opacity:.32}
.card.used.pick{pointer-events:none}

/* art — square, so every card ends up exactly the same height */
.card .art{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(85% 60% at 50% 0%,color-mix(in srgb,var(--rc) 26%,transparent),transparent 70%)}
.card .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.card .photo.broken{display:none}
.card .jbg{position:absolute;inset:0;display:grid;place-items:center;color:var(--rc);opacity:.32}
.card .jbg svg{width:62%;height:62%}
.card .art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0 22%,transparent 46%,rgba(10,11,14,.9))}

/* overlays */
.card .ovr{
  position:absolute;top:6px;left:7px;z-index:2;
  font-size:15px;font-weight:800;line-height:1;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);font-variant-numeric:tabular-nums;
}
.card .ovr em{display:block;font-size:7px;font-weight:800;letter-spacing:.14em;font-style:normal;color:var(--rc);margin-top:2px}
.card .info{
  position:absolute;top:5px;right:5px;z-index:5;width:24px;height:24px;border-radius:50%;
  border:0;background:rgba(10,11,14,.7);color:#fff;font-size:12px;font-weight:800;
  cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;
  transition:background .15s;
}
.card .info:hover{background:var(--primary);color:var(--primary-fg)}
/* the visible dot stays small on the card corner; the touch area does not */
.card .info::after{content:'';position:absolute;inset:-8px}
.card .role{
  position:absolute;left:7px;bottom:7px;z-index:2;
  font-size:9px;font-weight:800;letter-spacing:.12em;color:#fff;
  background:rgba(10,11,14,.7);border-radius:3px;padding:2px 5px;line-height:1.2;
}
.card .pts{
  position:absolute;right:6px;bottom:7px;z-index:2;
  font-size:10px;font-weight:800;color:var(--primary-fg);background:var(--primary);
  border-radius:3px;padding:2px 6px;line-height:1.25;font-variant-numeric:tabular-nums;
}

/* name plate — 3 legible rows: name / team + games / rarity + multiplier */
.card .plate{padding:7px 8px 8px;background:#0f1115;border-top:1px solid var(--rc)}
.card .nm{font-size:13.5px;font-weight:800;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sub{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:10.5px;font-weight:600;color:var(--muted-fg)}
.card .sub .tl{width:13px;height:13px;object-fit:contain;flex:0 0 13px}
.card .sub .tm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sub .gp{flex-shrink:0;font-variant-numeric:tabular-nums}
.card .sub .gp.thin{color:#d2a13a}   /* small sample — the average is not trustworthy yet */
.card .rr{
  display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px;
  font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--rc);
}
/* NOT .mx — that class is the 26px modal close button and would win on font-size */
.card .rr .xm{font-size:9px;font-variant-numeric:tabular-nums}

/* rarity accents */
.card.r-Legendary{box-shadow:0 6px 16px -10px rgba(0,0,0,.8),0 0 0 1px rgba(255,212,125,.4)}
.card.r-Legendary::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,transparent 42%,rgba(255,225,160,.28) 50%,transparent 58%);
  background-size:250% 100%;animation:shine 4s ease-in-out infinite;
}
@keyframes shine{0%,60%{background-position:180% 0}100%{background-position:-40% 0}}
.card.flip{animation:flipin .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes flipin{from{transform:rotateY(80deg) scale(.92);opacity:0}to{transform:none;opacity:1}}

/* coach card variant */
.card.coach .art{display:grid;place-items:center}
.card.coach .crole{position:relative;z-index:2;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--rc)}

/* ==================== team board ==================== */
/* minmax(0,1fr) — plain `1fr` is minmax(AUTO,1fr), so a long team name widens
   its own column and the six cards come out different sizes (measured 113→157px). */
/* 6 slots across only from 900px. At 640px it gave 96px-wide cards while the
   sub-900px type scale was still enlarged — measured 96x202 at a 666px viewport,
   which clipped the plate. 900px is also where the desktop type scale starts,
   so the two now switch together. */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
@media(min-width:900px){.board{grid-template-columns:repeat(6,minmax(0,1fr))}}
.slot{position:relative;border-radius:var(--r-md)}
.slot.empty{
  aspect-ratio:3/4;
  border:1px dashed var(--border);background:rgba(255,255,255,.015);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.slot.empty:hover{border-color:var(--tint28);background:var(--tint4)}
.slot.empty .rl{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted-fg)}
.slot.empty .em{font-size:10px;color:var(--muted-fg);opacity:.75}
.slot .clear{
  position:absolute;top:5px;right:5px;z-index:6;width:22px;height:22px;border-radius:5px;border:0;
  background:rgba(10,11,14,.85);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:none;place-items:center;
}
.slot:hover .clear{display:grid}
@media(hover:none){.slot .clear{display:grid}}

/* score bar */
.scorebar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;
  padding:14px 16px;border-radius:var(--r-sm);
  border:1px solid var(--tint16);background:var(--tint4);
}
.scorebar .lbl{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-fg)}
.scorebar .val{font-size:30px;font-weight:800;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.scorebar .math{font-size:12px;color:var(--muted-fg);flex:1;min-width:150px;line-height:1.5}
.scorebar .btn{margin-left:auto}

/* inventory */
.invbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.invbar h2{margin:0;font-size:16px;font-weight:800}
.invbar .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ==================== data rows / tables ==================== */
.tbl{border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.tbl .r{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--hair);font-size:13px;min-height:42px}
.tbl .r:last-child{border-bottom:0}
.tbl .r.head{
  background:var(--muted);min-height:34px;padding:7px 13px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-fg);
}
.tbl .r:not(.head):hover{background:rgba(255,255,255,.02)}
.tbl .r.me{background:var(--tint8);box-shadow:inset 3px 0 0 var(--primary)}
.tbl .rk{width:22px;flex:0 0 22px;color:var(--muted-fg);font-weight:800;font-variant-numeric:tabular-nums;text-align:center}
.tbl .r.head .rk{text-align:center}
.tbl .nm{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl .nm img{width:20px;height:20px;object-fit:contain;flex:0 0 20px}
.tbl .c{flex:0 0 52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted-fg)}
.tbl .c.b{font-weight:800;color:var(--foreground)}
.tbl .c.score{color:var(--primary);font-weight:800}
.tbl .r.head .c{color:var(--muted-fg);font-weight:800}
.wrpill{
  display:inline-block;min-width:46px;text-align:center;border-radius:999px;
  padding:2px 7px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
}
.wrpill.hi{background:rgba(74,201,126,.16);color:var(--success)}
.wrpill.mid{background:var(--muted);color:var(--shade2)}
.wrpill.lo{background:rgba(247,102,94,.14);color:var(--danger)}

/* side rail */
.rail{display:flex;flex-direction:column;gap:16px}
.rail .tbl{border-radius:0;border:0}
.rail .tbl .r{padding:8px 14px;font-size:12.5px;min-height:38px}

/* ==================== states ==================== */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  padding:34px 18px;color:var(--muted-fg);font-size:13px;
}
.empty .big{font-size:14px;font-weight:700;color:var(--shade2)}
.empty .btn{margin-top:4px}
.note{margin-top:16px;font-size:11.5px;line-height:1.65;color:var(--muted-fg)}
.note b{color:var(--shade2);font-weight:700}
.note.center{text-align:center;margin-top:32px}

/* ==================== modal ==================== */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(6,7,10,.78);display:none;place-items:center;padding:18px;overflow-y:auto}
.overlay.on{display:grid}
.modal{
  width:min(420px,100%);background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
}
.modal.wide{width:min(760px,100%)}
.modal .mbrand{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.modal .mbrand .bolt{width:22px;height:22px}
.modal .mbrand .wm{font-size:16px;font-weight:800}
.modal .mbrand .wm b{color:var(--primary)}
.modal h2{margin:0;font-size:19px;font-weight:800;text-align:center}
.modal .lead{margin:6px 0 18px;font-size:13px;color:var(--muted-fg);text-align:center;line-height:1.55}
.modal label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-fg);margin:14px 0 6px}
.modal .btn{margin-top:20px}
.modal .switch{margin-top:16px;text-align:center;font-size:12.5px;color:var(--muted-fg)}
.modal .switch a{color:var(--primary);font-weight:700;cursor:pointer}
.modal .err{margin-top:12px;min-height:18px;text-align:center;font-size:12.5px;color:var(--danger)}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.mhead h2{text-align:left}
.mx{background:transparent;border:0;color:var(--muted-fg);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.mx:hover{color:var(--foreground)}

/* coach grid */
.coachgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:14px;max-height:62vh;overflow-y:auto}
.coachcard{
  border:1px solid var(--rc,var(--border));border-radius:var(--r-sm);overflow:hidden;
  background:var(--background);cursor:pointer;transition:transform .15s;
}
.coachcard:hover{transform:translateY(-2px)}
.coachcard.locked{opacity:.4;filter:grayscale(.7);cursor:not-allowed}
.coachcard.eq{box-shadow:0 0 0 2px var(--primary)}
.coachcard .ctop{
  padding:5px 8px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.1em;
  color:var(--rc);background:rgba(255,255,255,.03);
}
.coachcard.eq .ctop{color:var(--primary-fg);background:var(--primary)}
.coachcard .cbody{padding:12px 12px 14px;text-align:center}
.coachcard .cname{font-size:14px;font-weight:800}
.coachcard .cmult{margin-top:2px;font-size:11px;font-weight:800;color:var(--rc);font-variant-numeric:tabular-nums}
.coachcard .cdesc{margin-top:9px;display:flex;flex-direction:column;gap:5px;font-size:11px;line-height:1.45;text-align:left}
.coachcard .pro{color:var(--success)}
.coachcard .con{color:var(--muted-fg)}

/* card detail modal */
.cdetail{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;margin-top:12px}
@media(max-width:520px){.cdetail{grid-template-columns:1fr}.cdetail .card{max-width:180px;margin:0 auto}}
.cstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.cstat{border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--background);padding:9px 11px}
.cstat .k{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg)}
.cstat .v{margin-top:3px;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.cstat .v small{font-size:11px;font-weight:600;color:var(--muted-fg)}
.cstat.full{grid-column:1/-1}
.cstat.full .v{font-size:13px;font-weight:600;line-height:1.5}

/* ==================== shop ==================== */
.shopgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
@media(min-width:760px){.shopgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.shopitem{padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.shopitem .gbig{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.shopitem .gbig .dot{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8ff0ff,#22b8d8)}
.shopitem .price{font-size:13px;font-weight:700;color:var(--muted-fg)}

/* ==================== toast ==================== */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:90;transform:translateX(-50%);
  display:none;align-items:center;gap:8px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--primary);
  border-radius:var(--r-sm);padding:11px 16px;font-size:13px;font-weight:600;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.9);
}
.toast.on{display:flex}
.toast.bad{border-left-color:var(--danger)}

/* ==================== mobile ====================
   Everything below lives inside a max-width query, so the desktop layout is
   untouched. Measured at a real 404px viewport before these rules: 0 horizontal
   overflow (good), but 66 text nodes under 10.5px and 17 tap targets under 40px,
   and the 6-slot board squeezed cards to 123px wide. */

/* 2 columns under 420px so a board card is ~180px, not ~113px. The 6 slots then
   read as 3 rows of 2 instead of 2 rows of 3 — taller, but legible. */
@media(max-width:419px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:899px){
  /* tap targets */
  .chip{min-height:40px;padding:9px 15px}
  .seg button{padding:9px 14px;font-size:11px}
  .btn.sm{min-height:40px;padding:9px 15px}
  .mx{padding:0 10px;min-width:40px}
  .panel > .pfoot{padding:13px 16px;font-size:13px}
  .card .info{width:32px;height:32px;font-size:14px;top:6px;right:6px}
  .slot .clear{width:30px;height:30px;font-size:16px}
  #drawer a{min-height:52px}

  /* card micro-typography — the plate carries the whole identity of a card,
     and 7-10px is not readable at arm's length on a phone */
  .card .nm{font-size:15px}
  .card .sub{font-size:11.5px;gap:6px}
  .card .sub .tl{width:15px;height:15px;flex-basis:15px}
  .card .rr{font-size:10.5px}
  .card .rr .xm{font-size:10.5px}
  .card .ovr{font-size:17px}
  .card .ovr em{font-size:8.5px}
  .card .role{font-size:10.5px;padding:3px 6px}
  .card .pts{font-size:11.5px;padding:3px 7px}
  .card .plate{padding:8px 9px 9px}

  /* headings + numbers */
  .pagehead h1{font-size:20px}
  .scorebar .val{font-size:28px}
  .tbl .r{font-size:13.5px}
  .rail .tbl .r{font-size:13.5px}
  .note{font-size:12.5px}
  .rate{font-size:11.5px}
  .sleeve .cnt{font-size:11px}
  .tourbar button .lg{font-size:10px}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}