/* ════════════════════════════════════════════════════════════════
   LEVEL — Design System · global CSS entry point
   Consumers link THIS file only. It is a manifest of @imports.
   ════════════════════════════════════════════════════════════════ */
/* LEVEL — Fonts.
   ONE brand typeface: Ardela Edge X01 — full weight range, upright + italic, plus the Black
   Outline cut for the outline+fill display treatment ("THE FUTURE"). The identity uses no second
   family, so display, body and label/"mono" roles all resolve to Ardela Edge X01. */

/* ── Ardela Edge X01 — upright ─────────────────────────── */
@font-face { font-family:"Ardela Edge X01"; font-weight:100; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-100.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:200; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-200.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:300; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-300.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-400.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-500.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-600.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-700.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:800; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-800.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:900; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01-900.ttf") format("truetype"); }

/* ── Ardela Edge X01 — italic ──────────────────────────── */
@font-face { font-family:"Ardela Edge X01"; font-weight:100; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-100Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:200; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-200Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:300; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-300Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-400Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:500; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-500Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:600; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-600Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:700; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-700Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:800; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-800Italic.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01"; font-weight:900; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01-900Italic.ttf") format("truetype"); }

/* ── Ardela Edge X01 Outline — display outline+fill ────── */
@font-face { font-family:"Ardela Edge X01 Outline"; font-weight:900; font-style:normal; font-display:swap; src:url("../fonts/ArdelaEdgeX01Outline-900.ttf") format("truetype"); }
@font-face { font-family:"Ardela Edge X01 Outline"; font-weight:900; font-style:italic; font-display:swap; src:url("../fonts/ArdelaEdgeX01Outline-900Italic.ttf") format("truetype"); }

:root {
  --font-display: "Ardela Edge X01", "Arial Narrow", system-ui, sans-serif;        /* @kind font */
  --font-body:    "Ardela Edge X01", system-ui, -apple-system, sans-serif;          /* @kind font */
  --font-outline: "Ardela Edge X01 Outline", "Ardela Edge X01", sans-serif;         /* @kind font */
  /* Label / eyebrow / stat-caption role. Single-typeface system — also Ardela Edge X01.
     (Kept as --font-mono for API compatibility; the brand uses no separate mono.) */
  --font-mono:    "Ardela Edge X01", system-ui, sans-serif;                         /* @kind font */
}

/* LEVEL — Color tokens. Values extracted from the LE7EL Visual Identity Figma file. */
:root {
  /* ── Core neutrals ─────────────────────────────── */
  --ink:        #16101E; /* primary background — rgb(22,16,30) */
  --ink-deep:   #09001B; /* deepest background — rgb(9,0,27)   */
  --ink-800:    #1E1828; /* raised surface                     */
  --ink-700:    #27242F; /* card / elevated — rgb(39,36,47)    */
  --ink-600:    #322D3C; /* hairline-on-dark, hover surface    */
  --white:      #FFFFFF;
  --black:      #000000;
  --grey-200:   #C8C8C8; /* rgb(200,200,200) */
  --grey-500:   #737373; /* rgb(115,115,115) */

  /* ── Vibrant brand palette ─────────────────────── */
  --mint:        #00FFC2; /* signature neon — rgb(0,255,194)  */
  --yellow:      #EBFF00; /* rgb(235,255,0)   */
  --pink:        #E93DB0; /* rgb(233,61,176)  */
  --orange:      #EA4B2F; /* rgb(234,75,47)   */
  --magenta:     #FF3AF7; /* rgb(255,58,247)  */
  --purple:      #B93CF6; /* rgb(185,60,246)  */
  --purple-lite: #CA5CFF; /* rgb(202,92,255)  */
  --cyan:        #48FFF4; /* rgb(72,255,244)  */
  --blue:        #63C1F8; /* rgb(99,193,248)  */
  --orange-lite: #FFB661; /* rgb(255,182,97)  */

  /* ── On-light accent shades ────────────────────────
     The neon palette above is calibrated for the ink canvas; on white it falls below the
     ~3:1 contrast floor. These are the SAME hues, darkened to read on light surfaces —
     use for text/icons on light backgrounds. Fills & large shapes may still use the neon
     tokens (text-on-fill stays --ink). */
  --mint-deep:   #008F6B; /* on-light mint          */
  --cyan-deep:   #0E8FA0; /* on-light cyan          */
  --yellow-deep: #8A7700; /* on-light yellow (gold) */
  --pink-deep:   #C42E94; /* on-light pink          */
  --orange-deep: #D2401F; /* on-light orange        */

  /* ── Semantic aliases ──────────────────────────── */
  --bg:             var(--ink);
  --bg-deep:        var(--ink-deep);
  --surface:        var(--ink-700);
  --surface-raised: var(--ink-600);

  --text:           var(--white);
  --text-muted:     rgba(255,255,255,0.64);
  --text-subtle:    rgba(255,255,255,0.40);
  --text-on-bright: var(--ink);

  --accent:         var(--mint);
  --accent-text:    var(--mint);

  --border:         rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.24);
  --border-accent:  var(--mint);

  /* status — drawn from brand palette, not new hues */
  --success: var(--mint);
  --warning: var(--yellow);
  --danger:  var(--orange);
  --info:    var(--blue);

  /* ── COLOR ROLES — each hue has ONE job ─────────────────────────────────
     The vibrant palette above is the raw box of crayons. These roles are the
     RULES: every colored pixel in a LEVEL surface should resolve to a role
     token below, never a raw hue. This is what keeps "many colors" from
     becoming noise. Neutrals (ink ramp + white/grey) carry 80%+ of every
     screen; roles are the spotlight, used sparingly.

     1 · BRAND / SELECTION — the one hero color. The signature.
        Used for: the active/selected state, primary CTA, brand marks,
        focus rings. Protect it — if everything is mint, nothing is.        */
  --role-brand:        var(--mint);
  --role-brand-fill:   var(--mint);   /* large fills; text-on-fill = --ink   */
  --role-brand-onlight:var(--mint-deep);

  /* 2 · LIVE / POSITIVE — "this is happening" or "you won".
        Used for: online dots, live match, win result, positive deltas.     */
  --role-live:         var(--mint);
  --role-win:          var(--mint);

  /* 3 · NOTIFY — unread & attention counts ONLY. Never decoration.
        Kept distinct from brand so a badge never reads as "selected".       */
  --role-notify:       var(--pink);

  /* 4 · REWARD / RARE — prize, streak, countdown, scarce highlights.
        Yellow earns attention precisely because it shows up rarely.         */
  --role-reward:       var(--yellow);

  /* 5 · WARNING / LOSS — defeat, errors, destructive, expiring.             */
  --role-warning:      var(--orange);
  --role-danger:       var(--orange);

  /* 6 · NEUTRAL — the workhorse. Unselected, secondary text, structure.
        Most of the UI lives here so the roles above can punch.              */
  --role-idle:         var(--text-muted);   /* unselected / secondary        */
  --role-idle-faint:   var(--text-subtle);  /* tertiary / disabled           */
  --role-structure:    var(--border);       /* hairlines, dividers           */

  /* Surface posture: marketing may run hot (more of the vibrant spectrum,
     one hue per section); PRODUCT UI stays disciplined — brand + the five
     roles only, on a dominant neutral field. cyan/purple/magenta/blue/
     orange-lite are MARKETING-ONLY expressive hues, not product roles.      */
}

/* LEVEL — Gradients. The two hero pairs (Sunset, Acid) dominate; others are accent fills.
   Linear pairs are used as fills/strokes; radial versions paint full-bleed hero backgrounds. */
:root {
  /* Primary pairs — Sunset = orange→pink, Acid = yellow→mint */
  --grad-sunset:  linear-gradient(135deg, #EA4B2F 0%, #E93DB0 100%); /* @kind color */
  --grad-acid:    linear-gradient(135deg, #EBFF00 0%, #00FFC2 100%); /* @kind color */

  /* Secondary pairs */
  --grad-magenta: linear-gradient(180deg, #EA4B2F 0%, #FF3AF7 100%); /* @kind color */
  --grad-ember:   linear-gradient(180deg, #FFB661 0%, #E93DB0 100%); /* @kind color */
  --grad-aurora:  linear-gradient(180deg, #EBFF00 0%, #01FFC2 100%); /* @kind color */
  --grad-ice:     linear-gradient(135deg, #00FFC2 0%, #48FFF4 100%); /* @kind color */
  --grad-violet:  linear-gradient(135deg, #B93CF6 0%, #63C1F8 100%); /* @kind color */

  /* Radial — full-bleed hero washes (corner-anchored, matches Figma) */
  --grad-sunset-radial: radial-gradient(160% 140% at 0% 0%, #EA4B2F 0%, #E93DB0 100%); /* @kind color */
  --grad-acid-radial:   radial-gradient(160% 140% at 0% 0%, #EBFF00 0%, #00FFC2 100%); /* @kind color */

  /* Text-on-gradient accent (clip to text) */
  --grad-text: var(--grad-acid); /* @kind color */
}

/* LEVEL — Typography scale & treatments.
   Display is heavy, UPPERCASE, often italic, tight tracking (-0.04em), 100% line-height.
   Labels / eyebrows / stat captions use the same family (var(--font-mono)) — uppercase, wide-tracked.
   Single-typeface system: everything is Ardela Edge X01. */
:root {
  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-x:       800; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Display scale (px) — for 1440+ canvases scale up via clamp at use site */
  --fs-display-xl: 120px;
  --fs-display-l:  88px;
  --fs-display-m:  64px;
  --fs-display-s:  44px;

  /* Headings */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;

  /* Body & UI */
  --fs-lg:    18px;
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    12px;
  --fs-2xs:   11px;

  /* Line heights */
  --lh-display: 0.95; /* @kind other */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-body:    1.55; /* @kind other */

  /* Tracking */
  --ls-display: -0.04em; /* @kind other */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-label:   0.14em;  /* @kind other */
  --ls-wide:    0.24em;   /* @kind other */
}

/* ── Reusable type classes ─────────────────────────── */
.lvl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--text);
}
.lvl-display--upright { font-style: normal; }

.lvl-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-x);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}

.lvl-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-xs);
  color: var(--accent);
}

.lvl-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--text-muted);
}

.lvl-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Acid gradient clipped to text */
.lvl-text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Neon mint glow on text */
.lvl-text-glow {
  color: var(--mint);
  text-shadow: 0 0 24px rgba(0,255,194,0.55), 0 0 2px rgba(0,255,194,0.9);
}

/* LEVEL — Spacing, radii, shape & layout tokens.
   The brand is ANGULAR: radii stay small; the signature shape language is the mark's ~37° shear /
   clipped (beveled) corner, expressed via --skew (tempered to 20° for UI) and the --bevel clip-path. */
:root {
  /* 4px base spacing scale */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — intentionally tight */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* Signature shape language — derived from the LE7EL mark: its slashes lean "/" at
     arctan(3/4) ≈ 37° from vertical (horizontal:vertical = 3:4). UI accents use a tempered
     20° of that lean for legibility; the bevel corner-cut runs at the true 3:4 mark slope. */
  --skew: -20deg;                 /* @kind other */  /* forward "/" lean, matches the mark */
  --bevel: 11px;                  /* @kind other */  /* horizontal cut */
  --bevel-y: 15px;                /* @kind other */  /* vertical cut = bevel × 4/3 (mark slope) */
  /* single top-right clipped corner — one cut only, leaning "/" like the mark.
     Apply to chips/buttons/cards. */
  --clip-bevel: polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel-y), 100% 100%, 0 100%); /* @kind other */

  /* Container widths */
  --container: 1200px;       /* @kind other */
  --container-wide: 1440px;  /* @kind other */

  /* Borders */
  --border-w: 1px;
  --border-w-bold: 2px;
}

/* LEVEL — Effects: shadows, neon glows, grids, motion.
   Neon mint glow (inset hairline + outer bloom) is the signature interactive treatment. */
:root {
  /* Elevation shadows (on dark) */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.32);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.40);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.55);

  /* Neon glows — from Figma boxShadow specs */
  --glow-mint:        inset 0 0 0 1px #00FFC2, 0 4px 32px 0 rgba(0,255,194,0.55); /* @kind shadow */
  --glow-mint-soft:   inset 0 0 0 1px #00FFC2, 0 4px 12px 0 rgba(0,255,194,0.32); /* @kind shadow */
  --glow-pink:        inset 0 0 0 1px #FF3AF7, 0 4px 24px 0 rgba(255,58,247,0.45); /* @kind shadow */
  --glow-yellow:      inset 0 0 0 1px #EBFF00, 0 4px 24px 0 rgba(235,255,0,0.40); /* @kind shadow */
  --ring-mint:        0 0 0 3px rgba(0,255,194,0.30); /* @kind shadow */

  /* Backdrop blur (glass panels over imagery) */
  --blur-panel: blur(16px); /* @kind other */

  /* Perspective neon grid — the brand background motif (pure CSS) */
  --grid-line: rgba(0,255,194,0.16); /* @kind color */
  --grid-cell: 40px; /* @kind spacing */

  /* Motion — punchy, sporty. Fast in, eased out. No bounce. */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* Repeating square grid utility (use as background layer) */
.lvl-grid-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}

/* LEVEL — Component styles. Classes consumed by the React primitives in /components.
   Centralised here so hover/active/focus states work everywhere styles.css is linked. */

/* ───────────────────────── Button ───────────────────────── */
.lvl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 800; font-style: normal;
  text-transform: uppercase; letter-spacing: 0.04em;
  line-height: 1; white-space: nowrap;
  border: none; cursor: pointer;
  background: var(--mint); color: var(--ink);
  border-radius: var(--radius-md);
  padding: 14px 26px; font-size: 15px;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.lvl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lvl-btn:active { transform: translateY(0) scale(0.97); filter: brightness(0.95); box-shadow: none; }
.lvl-btn:focus-visible { outline: none; box-shadow: var(--ring-mint); }
.lvl-btn[disabled] { opacity: 0.4; pointer-events: none; }

.lvl-btn--sm { padding: 9px 16px; font-size: 13px; }
.lvl-btn--lg { padding: 18px 36px; font-size: 18px; }
.lvl-btn--block { display: flex; width: 100%; }
.lvl-btn--bevel { border-radius: 0; clip-path: var(--clip-bevel); }

.lvl-btn--primary   { background: var(--mint); color: var(--ink); }
.lvl-btn--primary:hover { box-shadow: 0 6px 28px -6px var(--mint); }
.lvl-btn--secondary {
  background: transparent; color: var(--white);
  box-shadow: inset 0 0 0 var(--border-w-bold) var(--border-strong);
}
.lvl-btn--secondary:hover { box-shadow: inset 0 0 0 var(--border-w-bold) var(--mint), 0 4px 18px -6px rgba(0,255,194,0.5); color: var(--mint); filter: none; }
.lvl-btn--ghost { background: transparent; color: var(--white); }
.lvl-btn--ghost:hover { background: var(--ink-600); filter: none; box-shadow: none; }
.lvl-btn--gradient { background: var(--grad-acid); color: var(--ink); }
.lvl-btn--sunset   { background: var(--grad-sunset); color: var(--white); }

/* ───────────────────────── IconButton ───────────────────── */
.lvl-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: none; cursor: pointer;
  background: var(--ink-700); color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: all var(--dur) var(--ease-out);
}
.lvl-iconbtn:hover { color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.lvl-iconbtn:active { transform: scale(0.94); }
.lvl-iconbtn:focus-visible { outline: none; box-shadow: var(--ring-mint); }
.lvl-iconbtn--sm { width: 34px; height: 34px; }
.lvl-iconbtn--ghost { background: transparent; box-shadow: none; }
.lvl-iconbtn--ghost:hover { background: var(--ink-600); color: var(--mint); }

/* ───────────────────────── Badge / Tag ──────────────────── */
.lvl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-label); white-space: nowrap;
  font-size: 11px; line-height: 1;
  padding: 0 9px; min-height: 20px; border-radius: var(--radius-sm);
  background: var(--ink-600); color: var(--white);
  /* Ardela Edge X01 has a zero descender → caps sit low in any line box. Trim the text
     box to cap height so align-items:center centres the visible glyphs exactly. */
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.lvl-badge--mint   { background: rgba(0,255,194,0.14);  color: var(--mint); box-shadow: inset 0 0 0 1px rgba(0,255,194,0.4); }
.lvl-badge--yellow { background: rgba(235,255,0,0.14);  color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(235,255,0,0.4); }
.lvl-badge--pink   { background: rgba(233,61,176,0.16); color: #FF7AD0; box-shadow: inset 0 0 0 1px rgba(233,61,176,0.5); }
.lvl-badge--solid  { background: var(--mint); color: var(--ink); }
.lvl-badge--live   { background: var(--orange); color: var(--white); }
.lvl-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: lvl-pulse 1.4s var(--ease-in-out) infinite; }
@keyframes lvl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.lvl-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--ink-700); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: default;
}
.lvl-tag--active { color: var(--ink); background: var(--mint); box-shadow: none; }

/* ───────────────────────── Card ─────────────────────────── */
.lvl-card {
  position: relative;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
  padding: var(--space-6);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lvl-card--interactive { cursor: pointer; }
.lvl-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--glow-mint-soft), var(--shadow-lg); }
.lvl-card--glow { box-shadow: var(--glow-mint), var(--shadow-md); }
.lvl-card--bevel { border-radius: 0; clip-path: var(--clip-bevel); }
.lvl-card--flush { padding: 0; overflow: hidden; }

/* ───────────────────────── Avatar ───────────────────────── */
.lvl-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--ink-600); color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  overflow: hidden; flex: none; position: relative;
}
.lvl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvl-avatar--ring { box-shadow: inset 0 0 0 2px var(--acc-fill, var(--mint)); }
.lvl-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.lvl-avatar--lg { width: 64px; height: 64px; font-size: 24px; }
.lvl-avatar--round { border-radius: 999px; }

/* ───────────────────────── Inputs ───────────────────────── */
.lvl-field { display: flex; flex-direction: column; gap: 8px; }
.lvl-label {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted);
}
.lvl-input, .lvl-select {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  color: var(--white); background: var(--ink-800);
  border: none; border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border);
  padding: 13px 15px;
  transition: box-shadow var(--dur) var(--ease-out);
}
.lvl-input::placeholder { color: var(--text-subtle); }
.lvl-input:hover, .lvl-select:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.lvl-input:focus, .lvl-select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--mint), var(--ring-mint); }
.lvl-input--invalid { box-shadow: inset 0 0 0 1px var(--orange); }
.lvl-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

/* Checkbox */
.lvl-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text); user-select: none; }
.lvl-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lvl-check__box {
  width: 20px; height: 20px; border-radius: var(--radius-sm); flex: none;
  background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur) var(--ease-out); color: var(--ink);
}
.lvl-check input:checked + .lvl-check__box { background: var(--mint); box-shadow: none; }
.lvl-check input:focus-visible + .lvl-check__box { box-shadow: var(--ring-mint); }
.lvl-check__box svg { opacity: 0; transition: opacity var(--dur-fast); }
.lvl-check input:checked + .lvl-check__box svg { opacity: 1; }

/* Switch */
.lvl-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.lvl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lvl-switch__track {
  width: 46px; height: 26px; border-radius: 999px; background: var(--ink-600);
  box-shadow: inset 0 0 0 1px var(--border); transition: all var(--dur) var(--ease-out); position: relative;
}
.lvl-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 999px; background: var(--white); transition: transform var(--dur) var(--ease-out);
}
.lvl-switch input:checked + .lvl-switch__track { background: var(--mint); box-shadow: none; }
.lvl-switch input:checked + .lvl-switch__track::after { transform: translateX(20px); background: var(--ink); }
.lvl-switch input:focus-visible + .lvl-switch__track { box-shadow: var(--ring-mint); }

/* ───────────────────────── Data viz ─────────────────────── */
.lvl-stat { display: flex; flex-direction: column; gap: 4px; }
.lvl-stat__value { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--white); }
.lvl-stat__label { font-family: var(--font-mono); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-muted); }
.lvl-stat__delta { font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.lvl-stat__delta--up { color: var(--mint); }
.lvl-stat__delta--down { color: var(--orange); }

.lvl-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--ink-600); overflow: hidden; }
.lvl-progress__bar { height: 100%; border-radius: 999px; background: var(--grad-acid); transition: width var(--dur-slow) var(--ease-out); }
.lvl-progress--pink .lvl-progress__bar { background: var(--grad-sunset); }

/* RankBadge — sheared parallelogram chip with rank tier */
.lvl-rank {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.01em; font-size: 14px;
  color: var(--ink); padding: 7px 18px; transform: skewX(var(--skew));
  background: var(--grad-acid);
}
.lvl-rank > * { transform: skewX(calc(-1 * var(--skew))); }
.lvl-rank--sunset { background: var(--grad-sunset); color: var(--white); }
.lvl-rank--mono { background: var(--ink-600); color: var(--white); }

/* ───────────────────────── Tabs ─────────────────────────── */
.lvl-tabs { display: inline-flex; gap: 4px; background: var(--ink-800); padding: 4px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border); }
.lvl-tab {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 9px 16px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: transparent; color: var(--text-muted);
  transition: all var(--dur) var(--ease-out);
}
.lvl-tab:hover { color: var(--white); }
.lvl-tab--active { background: var(--mint); color: var(--ink); }

/* LEVEL — base reset & document defaults. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--mint); color: var(--ink); }

a { color: inherit; text-decoration: none; }

/* Custom scrollbar to match the dark, neon system */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--mint); }