/* ============================================================
   PieSMP — "Moss & Mortar"
   Stone & emerald. One accent that means something. Charcoal
   stone surfaces, hairline discipline, voxels only where
   honesty demands it.

   Layers:
   1. Design tokens (granite palette, type, motion)
   2. Global resets / typography / utilities
   3. Components (buttons, forms, cards, badges, nav, footer...)
   4. Page-specific (hero, modes, leaderboard, store, maps)
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ---- Surfaces ---- */
  --bg:#0F1114;--bg-alt:#13161B;--panel:#1A1E24;--panel-2:#1E232B;--panel-3:#242931;
  --ink-line:rgba(231,235,238,.07);   /* hairline */
  --inlay:rgba(0,0,0,.35);           /* inset bevel */
  --stroke:1px solid var(--ink-line);   /* legacy alias: border shorthand */
  --stroke-thin:1px solid rgba(231,235,238,.12);
  --hairline:1px solid var(--ink-line);
  --border:#2E333B;--border-light:#414752;  /* solid line color, chips/dashed */
  --ink:#07090C;                     /* deepest stone — shadow ink, never fills */

  /* ---- Ink (all >= 4.5:1 on panels) ---- */
  --text:#E7EBEE;                    /* 15.9:1 on bg */
  --muted:#98A2AD;                   /* 6.3:1 on panel */
  --dim:#8893A0;                     /* mono micro-labels */

  /* ---- The accent ramp — emerald, used like torchlight ---- */
  --emerald:#34D399;                 /* accent: live, clickable */
  --emerald-deep:#059669;            /* deep interactive on light */
  --emerald-tint:rgba(52,211,153,.10);
  --emerald-edge:rgba(52,211,153,.35); /* hover panel edge, per motion spec */
  --glow:rgba(110,231,183,.35);      /* <= .35 alpha, live things only */
  --bleed:rgba(52,211,153,.12);      /* ambient hero bleed, never > .12 */
  --on-accent:#05201A;

  /* ---- Semantic exceptions (badges/errors only, never decor) ---- */
  /* ---- Semantic exceptions (badges/errors only, never decor) ---- */
  --warn:#FBBF24;--danger:#F87171;--info:#60A5FA;--cyan:var(--emerald);--green:var(--emerald);--amber:#FBBF24;--purple:#c084fc;--blue:var(--info);--lime:#a3e635;--pink:#f472b6;--orange:#fb923c;
  --cyan-dim:var(--emerald-tint);--cyan-mid:rgba(52,211,153,.25);

  /* ---- Semantic aliases used by components ---- */
  --primary:var(--emerald);--on-primary:var(--on-accent);
  --success:var(--emerald);--focus:var(--emerald);

  /* ---- Type ---- */
  --font-display:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif;
  --font-body:"Onest",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Monocraft",ui-monospace,monospace;font-synthesis:none;
  --font-head:"Big Shoulders Display","Arial Narrow",ui-sans-serif,sans-serif; /* legacy alias */

  --fs-base:1rem;
  --fs-2xs:.75rem;
  --fs-xs:.8125rem;
  --fs-sm:.875rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.25rem;
  /* calc operators inside clamp() need spaces; without them the whole
     value was invalid and every h1/h2 using these fell back to 16px */
  --fs-2xl:clamp(1.6rem,1.2rem + .9vw,1.9rem);
  --fs-3xl:clamp(2rem,1.4rem + 3vw,3rem);
  --fs-display:clamp(2.55rem,1.2rem + 6.4vw,6rem);

  --lh-tight:.95;--lh-snug:1.25;--lh-body:1.6;
  --tracking-display:.01em;--tracking-tight:.01em;--tracking-wide:.05em;--tracking-kicker:.18em;
  --tracking-caps:.05em;   /* uppercase UI labels */
  --tracking-label:.12em;  /* mono micro-labels, th, stat labels */

  /* ---- Spacing: 4px base ---- */
  --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;

  /* ---- Radius: sharp stone. 2px only on micro-labels/inputs. ---- */
  --radius-sm:2px;--radius:0;--radius-lg:0;--radius-xl:0;--radius-pill:999px;

  /* ---- Motion ---- */
  --dur-fast:120ms;--dur:180ms;--dur-slow:280ms;--dur-exit:140ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.2,.8,.2,1);

  /* ---- Layering ---- */
  --z-base:0;--z-raised:10;--z-sticky:20;--z-nav:100;--z-overlay:150;--z-toast:200;--z-grain:2;

  /* ---- Elevation (soft stone shadows; no hard offset casts) ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 2px 8px rgba(0,0,0,.4);
  --shadow-3:0 8px 24px rgba(0,0,0,.45);
  --shadow-4:0 16px 40px rgba(0,0,0,.5);

  /* ---- Contrasts on accent surfaces ---- */
  --on-danger:#2A0A0B;--red:var(--danger);

  --nav-h:64px;
  --container:1280px;

  /* ---- Voxel brackets ---- */
  --voxel-size:14px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  /* Procedural SVG noise tile, ~8% opacity. No gradient slabs, no fake art. */
  background-image:
    linear-gradient(var(--bg),var(--bg)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  background-blend-mode:overlay;
  background-attachment:fixed;
}
main{position:relative;z-index:1}

h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-snug);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--primary);color:var(--on-primary)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border:4px solid var(--bg);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}
a{color:var(--primary);text-decoration:none;transition:color var(--dur) var(--ease-out)}
a:hover{color:#6EE7B7}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{touch-action:manipulation}
svg{flex-shrink:0}
[hidden]{display:none!important}

/* ---------- Focus, every interactive element ---------- */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:focus-visible,.copy-ip:focus-visible,.nav-link:focus-visible{outline-offset:4px}
.input:focus-visible{outline-offset:0}

/* ---------- Skip link ---------- */
.skip-link{
  position:fixed;left:var(--space-4);top:var(--space-4);
  z-index:var(--z-toast);
  background:var(--primary);color:var(--on-primary);font-weight:800;
  padding:var(--space-3) var(--space-5);border:var(--stroke);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-2);
  transform:translateY(calc(-100% - var(--space-8)));transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);color:var(--on-primary)}

/* Ambient hero bleed lives in the legacy .hero::before rule (§4) and is
   re-pointed top-right for the split hero in .hero-split::before. */

/* ============================================================
   2. GLOBAL / LAYOUT / UTILITIES
   ============================================================ */

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-6)}
.container-md{max-width:800px}
.container-sm{max-width:600px}
@media(max-width:640px){.container{padding-inline:var(--space-4)}}

/* Offset for the fixed nav. Applied to every routed page. */
.page{padding-top:calc(var(--nav-h) + 4px + var(--space-6));min-height:100svh}
.page.active{opacity:1;transition:opacity var(--dur) var(--ease-out)}
.section{padding-block:var(--space-20)}
.section-alt{background:var(--bg-alt)}
@media(max-width:720px){.section{padding-block:var(--space-12)}}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-6)}
@media(max-width:640px){.wrap{padding-inline:var(--space-4)}}

.stack{display:flex;flex-direction:column;gap:var(--space-2)}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.center{text-align:center}
.accent{color:var(--primary)}

/* Gap-px grid (stat grids, podium): 1px hairlines between panels */
.gap-px{display:grid;gap:1px;background:var(--ink-line)}
.gap-px > *{background:var(--bg)}

/* Mono + kickers */
.mono{font-family:var(--font-mono)}
.kicker{font:700 var(--fs-sm)/1 var(--font-mono);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--primary);margin-bottom:var(--space-2)}
.section-head{text-align:center;margin-bottom:var(--space-12);max-width:640px;margin-inline:auto}
.section-title{font-size:var(--fs-3xl);font-weight:900;letter-spacing:var(--tracking-tight);line-height:var(--lh-tight)}
.section-sub{color:var(--muted);margin-top:var(--space-3)}
.page-title{font-size:var(--fs-2xl);font-weight:900;letter-spacing:var(--tracking-tight)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}

/* Visually hidden (sr-only) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap}

/* ============================================================
   3. COMPONENTS
   ============================================================ */

/* ---------- Cards ---------- */
.neo-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.neo-card-sm{background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius);box-shadow:var(--shadow-2)}
a.neo-card,button.neo-card,.neo-card.is-interactive,a.neo-card-sm,button.neo-card-sm,.neo-card-sm.is-interactive{transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a.neo-card:hover,button.neo-card:hover,.neo-card.is-interactive:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-4)}
a.neo-card:active,button.neo-card:active,.neo-card.is-interactive:active{border-color:var(--emerald-edge);box-shadow:var(--shadow-1)}
a.neo-card-sm:hover,button.neo-card-sm:hover,.neo-card-sm.is-interactive:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-3)}
.neo-card.is-loading{pointer-events:none;opacity:.5}

/* Card variants used across pages */
.empty-state{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);padding:var(--space-16) var(--space-6);text-align:center}
.empty-icon{width:64px;height:64px;background:var(--cyan-dim);border:var(--stroke-thin);border-radius:var(--radius-sm);display:grid;place-items:center;margin:0 auto var(--space-4);box-shadow:var(--shadow-1);color:var(--primary)}
.empty-icon svg{width:28px;height:28px}
.empty-state h3{color:var(--text);font-weight:800;margin-bottom:var(--space-1)}
.empty-state p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--space-5)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-xs);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;
  padding:var(--space-3) var(--space-6);min-height:48px;
  cursor:pointer;border:var(--stroke);border-radius:var(--radius);
  box-shadow:var(--shadow-2);text-decoration:none;
  touch-action:manipulation;
  transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background-color var(--dur) var(--ease-out);
}
@media(hover:hover){.btn:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-4)}}
.btn:active{border-color:var(--emerald-edge);box-shadow:var(--shadow-1)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-secondary{background:var(--panel-2);color:var(--text)}
.btn-danger{background:var(--danger);color:var(--on-danger)}
.btn-lime{background:var(--lime);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent;box-shadow:none;padding:var(--space-2) var(--space-4)}
@media(hover:hover){.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.06);transform:none;box-shadow:none}}
.btn-ghost:active{transform:none;box-shadow:none}
.btn-sm{min-height:44px;padding:var(--space-2) var(--space-5);font-size:var(--fs-xs);box-shadow:var(--shadow-1)}
@media(hover:hover){.btn-sm:hover{box-shadow:var(--shadow-3)}}
.btn-lg{min-height:56px;padding:var(--space-4) var(--space-10);font-size:var(--fs-base)}
.btn-block{width:100%}
.btn-icon{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-1)}
.btn:disabled:hover{transform:none;box-shadow:var(--shadow-1)}
.btn-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}

/* ---------- Forms ---------- */
.form-group{margin-bottom:var(--space-5)}
.form-label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:var(--space-2);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.form-label .req{color:var(--danger);margin-left:2px}
.form-hint{display:block;font-size:var(--fs-xs);color:var(--dim);margin-top:var(--space-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}}

.input{display:block;width:100%;background:var(--bg);border:var(--stroke);color:var(--text);font-size:var(--fs-base);padding:var(--space-3) var(--space-4);min-height:48px;border-radius:var(--radius);outline:none;box-shadow:var(--shadow-2);transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.input:focus{border-color:var(--primary);box-shadow:var(--shadow-2),0 0 0 3px var(--cyan-mid)}
.input::placeholder{color:var(--dim)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:var(--shadow-2),0 0 0 3px rgba(248,113,113,.3)}
.input:disabled{opacity:.5;cursor:not-allowed;background:var(--panel-2)}
textarea.input{resize:vertical;min-height:140px;line-height:var(--lh-body);padding-block:var(--space-3)}
select.input{appearance:none;cursor:pointer;padding-right:var(--space-10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a5b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-4) center}
.field-readonly{width:100%;background:transparent;border:3px dashed var(--border);color:var(--muted);padding:var(--space-3) var(--space-4);min-height:48px;border-radius:var(--radius);display:flex;align-items:center}
.input-affix{position:relative;display:flex}
.input-affix .input{padding-right:52px}
.affix-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:none;border:none;cursor:pointer;color:var(--muted);border-radius:var(--radius-sm)}
.affix-btn:hover{color:var(--text)}
.affix-btn svg{width:20px;height:20px}
.field-error{display:flex;align-items:flex-start;gap:var(--space-2);color:var(--danger);font-size:var(--fs-xs);font-weight:600;margin-top:var(--space-2)}
.field-error svg{width:14px;height:14px;margin-top:2px}
.field-error:empty{display:none}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-2xs);font-weight:800;letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:5px var(--space-3);border-radius:var(--radius-sm);border:var(--stroke-thin);box-shadow:var(--shadow-1);white-space:nowrap}
.badge-cyan{background:var(--cyan);color:var(--on-accent)}
.badge-green{background:var(--green);color:var(--on-accent)}
.badge-red{background:var(--red);color:var(--on-danger)}
.badge-amber{background:var(--amber);color:var(--on-accent)}
.badge-purple{background:var(--purple);color:var(--on-accent)}
.badge-lime{background:var(--lime);color:var(--on-accent)}
.badge-blue{background:var(--blue);color:var(--on-accent)}
.badge-ghost{background:var(--panel-2);color:var(--muted);border-color:var(--border)}

/* ---------- Alerts ---------- */
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius);font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--space-4);border:var(--stroke);box-shadow:var(--shadow-2)}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert:empty{display:none}
.alert-info{background:var(--cyan-dim);color:var(--cyan)}
.alert-success{background:rgba(74,222,128,.12);color:var(--green)}
.alert-warning{background:rgba(251,191,36,.12);color:var(--amber)}
.alert-error{background:rgba(248,113,113,.12);color:var(--red)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:var(--space-8);z-index:var(--z-toast);display:inline-flex;align-items:center;gap:var(--space-2);background:var(--panel);border:var(--stroke);color:var(--text);font-weight:700;font-size:var(--fs-sm);padding:var(--space-3) var(--space-6);border-radius:var(--radius);box-shadow:var(--shadow-3);transform:translate(-50%,80px);opacity:0;pointer-events:none;max-width:calc(100vw - var(--space-8));transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur) var(--ease-out)}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast svg{width:18px;height:18px;color:var(--success)}
.toast.error{border-color:var(--danger)}
.toast.error svg{color:var(--danger)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:var(--z-nav);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none}
/* The bar is transparent on every page, so nav text sits directly on page art —
   including bright sky scenes where the muted grey would drop below 4.5:1. A
   tight dark shadow keeps the glyphs readable without shading the page. */
.nav-brand,.nav-link,.nav-status,.dropdown-name{text-shadow:0 1px 2px rgba(7,9,12,.6),0 0 4px rgba(7,9,12,.35)}
/* Compact by default; reaches the pointer (or keyboard focus) and breathes open a little. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:var(--nav-h)}
@media(hover:hover) and (min-width:981px){
  .nav-inner{transform:scale(.72);transform-origin:top center;transition:transform .28s var(--ease-out)}
  .nav:hover .nav-inner,.nav:focus-within .nav-inner{transform:scale(.88)}
}
@media(prefers-reduced-motion:reduce){
  .nav-inner{transition:none}
}
.nav-brand{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;font-family:var(--font-head);font-size:var(--fs-md);font-weight:900;color:var(--text);letter-spacing:.02em;text-transform:uppercase}
.nav-brand:hover{color:var(--text)}
.nav-mark{width:40px;height:40px;background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-sm);display:grid;place-items:center;box-shadow:var(--shadow-1)}
.nav-mark svg{width:24px;height:24px}

.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-link{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted);position:relative;transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
@media(hover:hover){.nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}}
.nav-link[aria-current="page"]{color:var(--primary);background:var(--cyan-dim)}
.nav-link[aria-current="page"]::after{content:'';position:absolute;left:var(--space-3);right:var(--space-3);bottom:2px;height:3px;background:var(--primary);border-radius:var(--radius-sm)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}

.nav-status{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);font-weight:700;color:var(--muted);white-space:nowrap}
.nav-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--ink);flex-shrink:0;position:relative}
.nav-dot.online{background:var(--success)}
.nav-dot.online::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--success);animation:dotPulse 2.4s ease-out infinite}
@keyframes dotPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.nav-dot.online::after{animation:none;display:none}}

.nav-toggle{display:none;width:48px;height:48px;background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-1);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--text);border-radius:var(--radius-sm);transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* User dropdown */
.dropdown{position:relative}
.dropdown-toggle{display:flex;align-items:center;gap:var(--space-2);min-height:44px;background:none;border:none;cursor:pointer;color:var(--text)}
.dropdown-toggle{border:var(--stroke-thin);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow-1);color:var(--text);transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
@media(hover:hover){.dropdown-toggle:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-2)}}
.dropdown-name{font-weight:700;font-size:var(--fs-xs);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-menu{position:absolute;top:calc(100% + var(--space-2));right:0;background:var(--panel);border:var(--stroke);border-radius:var(--radius);min-width:220px;z-index:var(--z-raised);box-shadow:var(--shadow-3);padding:var(--space-1);opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur) var(--ease-out)}
.dropdown-menu.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.dropdown-item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);min-height:44px;color:var(--text);font-size:var(--fs-sm);font-weight:600;text-align:left;cursor:pointer;background:none;border:none;border-radius:var(--radius-sm);transition:background-color var(--dur-fast) var(--ease-out)}
.dropdown-item:hover{background:var(--panel-2);color:var(--text)}
.dropdown-item svg{width:16px;height:16px;color:var(--muted)}
.dropdown-item-danger{color:var(--danger)}
.dropdown-item-danger svg{color:var(--danger)}
.dropdown-divider{height:1px;background:var(--ink-line);margin:var(--space-1) 0}

/* Mobile nav */
@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-1);background:var(--bg);border-bottom:var(--stroke);padding:var(--space-3) var(--space-4) var(--space-5);max-height:calc(100svh - var(--nav-h));overflow-y:auto;display:none}
  .nav-links.open{display:flex;animation:navDrop var(--dur) var(--ease-out) both}
  .nav-link{min-height:52px;padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);border-radius:var(--radius-sm)}
  .nav-link[aria-current="page"]::after{display:none}
  .nav-link[aria-current="page"]{border-left:4px solid var(--primary)}
  .nav-status{display:none}
}
@media(max-width:520px){.nav-brand span:not(.nav-mark){display:none}.nav-actions .btn{padding-inline:var(--space-3)}.dropdown-name{display:none}}
@keyframes navDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Avatar ---------- */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--panel-2);border:var(--stroke-thin);display:grid;place-items:center;font-weight:800;font-size:var(--fs-xs);color:var(--primary);flex-shrink:0;box-shadow:var(--shadow-1)}
.avatar-sm{width:32px;height:32px;font-size:var(--fs-2xs)}
.avatar-lg{width:56px;height:56px;font-size:var(--fs-md);background:var(--cyan-dim);box-shadow:var(--shadow-1)}

/* ---------- Skeleton / loading ---------- */
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-screen{display:flex;align-items:center;justify-content:center;min-height:60svh;flex-direction:column;gap:var(--space-4);color:var(--muted)}
.loading-block{padding:var(--space-10);text-align:center;color:var(--muted)}
.loading-block .spinner{margin:0 auto var(--space-3)}
.skeleton{background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 37%,var(--panel-2) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- Copy IP ---------- */
.copy-ip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;background:var(--panel);border:var(--stroke);border-radius:var(--radius);padding:var(--space-2) var(--space-4);cursor:pointer;box-shadow:var(--shadow-2);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--primary);touch-action:manipulation;transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur) var(--ease-out)}
@media(hover:hover){.copy-ip:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-3)}}
.copy-ip:active{border-color:var(--emerald-edge);box-shadow:var(--shadow-1)}
.copy-ip svg{width:18px;height:18px}
.copy-ip.copied{border-color:var(--success);color:var(--success)}
.copy-ip-lg{font-size:var(--fs-base);padding:var(--space-3) var(--space-6);min-height:56px}
.copy-ip-text{background:none;border:none;box-shadow:none;padding:0;min-height:44px;color:var(--primary);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;cursor:pointer;text-align:left}
.copy-ip-text:hover{transform:none;box-shadow:none;color:#6EE7B7}

/* ---------- Entrances ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-up{animation:fadeUp var(--dur-slow) var(--ease-out) both}
.fade-in{animation:fadeIn var(--dur) var(--ease-out) both}
.stagger > *{animation:fadeUp var(--dur-slow) var(--ease-out) both}
.stagger > *:nth-child(1){animation-delay:0ms}
.stagger > *:nth-child(2){animation-delay:40ms}
.stagger > *:nth-child(3){animation-delay:80ms}
.stagger > *:nth-child(4){animation-delay:120ms}
.stagger > *:nth-child(5){animation-delay:160ms}
.stagger > *:nth-child(6){animation-delay:200ms}

/* ============================================================
   4. PAGE-SPECIFIC
   ============================================================ */

/* ---------- Hero ---------- */
.hero{position:relative;text-align:center;overflow:hidden;min-height:100svh;padding-top:calc(var(--nav-h) + var(--space-12));padding-bottom:var(--space-16);display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(52,211,153,.1) 0%,transparent 60%)}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(52,211,153,.08) 1px,transparent 1px);background-size:24px 24px}
.hero-content{position:relative;z-index:1}
.hero h1{font-size:var(--fs-display);font-weight:900;letter-spacing:var(--tracking-display);line-height:.92;margin-bottom:var(--space-5)}
.hero-sub{color:var(--muted);font-size:var(--fs-md);max-width:52ch;margin:0 auto var(--space-8);line-height:var(--lh-body)}
.hero-kicker{font-size:var(--fs-sm);font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--primary);margin-bottom:var(--space-3)}
.hero-cta{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-12)}
.status-pill{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-pill);padding:6px var(--space-4);box-shadow:var(--shadow-1);font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:var(--space-4)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);max-width:800px;margin-inline:auto}
@media(max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
.stat-card{padding:var(--space-6) var(--space-4);text-align:center}
.stat-number{font-family:var(--font-head);font-size:clamp(1.75rem,4vw,3rem);font-weight:900;line-height:1;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--muted);margin-top:var(--space-2)}

/* ---------- Modes ---------- */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5)}
@media(max-width:600px){.features-grid,.modes-grid{grid-template-columns:1fr}}
.feature-card{padding:var(--space-6)}
.feature-icon,.mode-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:var(--space-4);border:var(--stroke-thin);box-shadow:var(--shadow-1)}
.feature-icon svg,.mode-icon svg{width:24px;height:24px}
.feature-card h3{font-size:var(--fs-md);font-weight:800;margin-bottom:var(--space-1)}
.feature-card p{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-body)}
.mode-card{padding:var(--space-6);text-align:left}
.mode-card.art-card{padding:0}
.mode-card .mode-body{padding:var(--space-6)}
.mode-card h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--space-1)}
.mode-card p{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-body);margin-bottom:var(--space-3)}
.mode-chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.mode-chips span{background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-pill);padding:3px var(--space-3);font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted)}
.mode-card .mode-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
@media(prefers-reduced-motion:reduce){.mode-card .mode-art img{transition:none}}
.mode-card:hover .mode-art img{transform:scale(1.03)}
.mode-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt);border-bottom:var(--stroke-thin)}
.mode-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(11,13,16,.55),transparent 45%)}
.art-label{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-6);font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--dim);text-align:center;opacity:0;transition:opacity var(--dur) var(--ease-out)}
.art-fallback img{display:none}
.art-fallback .art-label{opacity:1}
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.38}
.hero-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,13,16,.92) 0%,rgba(11,13,16,.55) 45%,rgba(11,13,16,.94) 100%)}
.hero-photo-art .hero-grid{opacity:.5}

/* ---------- Leaderboard ---------- */
.lb-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-2);border-bottom:var(--hairline)}
.lb-podium-card{background:var(--panel-2);border:var(--stroke-thin);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:var(--space-5) var(--space-4);text-align:center}
.lb-podium-card .lb-rank{margin:0 auto var(--space-3)}
.lb-podium-card .lb-name{justify-self:center}
.lb-podium-card .lb-name small{text-align:center}
.lb-podium-card.place-1{background:var(--panel-3)}
@media(max-width:560px){.lb-podium{grid-template-columns:1fr;padding:var(--space-4)}}
.leaderboard-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:var(--hairline)}
.leaderboard-row:last-child{border-bottom:none}
.leaderboard-row:nth-child(even){background:rgba(255,255,255,.02)}
.lb-rank{font-family:var(--font-head);font-size:var(--fs-md);font-weight:900;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:var(--stroke-thin);box-shadow:var(--shadow-1);background:var(--panel-2);color:var(--text);font-variant-numeric:tabular-nums}
.lb-rank.gold{background:var(--amber);color:#000}
.lb-rank.silver{background:#94a3b8;color:#000}
.lb-rank.bronze{background:var(--orange);color:#000}
.lb-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lb-name small{color:var(--dim);font-weight:400;display:block;font-size:var(--fs-xs)}
.lb-value{font-weight:800;color:var(--primary);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
@media(max-width:560px){.leaderboard-row{grid-template-columns:44px 1fr auto;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.lb-rank{width:34px;height:34px;font-size:var(--fs-sm)}}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:var(--hairline)}
th{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:var(--tracking-label)}
td{font-size:var(--fs-sm)}

/* ---------- Map ---------- */
.map-container{border:var(--stroke);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-4);background:var(--panel);aspect-ratio:16/9}
.map-container iframe{width:100%;height:100%;border:none;display:block}
.map-container.map-tall{aspect-ratio:auto;height:clamp(400px,70svh,760px)}
@media(max-width:720px){.map-container{aspect-ratio:4/3}}

/* ---------- Footer ---------- */
.footer{border-top:var(--stroke);color:var(--muted);font-size:var(--fs-sm);margin-top:var(--space-16);padding-block:var(--space-12) var(--space-8)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-8);text-align:left}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.footer-brand{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-head);font-weight:900;color:var(--text);font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.02em;margin-bottom:var(--space-3)}
.footer-brand:hover{color:var(--text)}
.footer-mark{width:36px;height:36px;background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-sm);display:grid;place-items:center;box-shadow:var(--shadow-1)}
.footer-mark svg{width:20px;height:20px}
.footer-tagline{color:var(--dim);font-size:var(--fs-sm);max-width:34ch}
.footer h2{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-label);margin-bottom:var(--space-3);color:var(--muted)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.footer-col a,.footer-col button{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-weight:600;font-size:var(--fs-sm);transition:color var(--dur) var(--ease-out)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{border-top:var(--hairline);padding-top:var(--space-5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);color:var(--dim);font-size:var(--fs-xs)}

/* ---------- Store ---------- */
.store-hero{position:relative;text-align:center;padding:var(--space-10) 0 var(--space-8);overflow:hidden}
.store-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(52,211,153,.1) 0%,transparent 60%)}
.store-hero h1{font-size:var(--fs-3xl);font-weight:900;letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3);position:relative}
.store-hero > p,.store-hero .container > p{color:var(--muted);font-size:var(--fs-md);max-width:52ch;margin-inline:auto;position:relative}
.store-login-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-xl);padding:var(--space-10);max-width:460px;margin-inline:auto;box-shadow:var(--shadow-4)}
.store-login-card h1{margin-bottom:var(--space-2);font-size:var(--fs-xl);font-weight:900}
.store-login-card > p{color:var(--muted);margin-bottom:var(--space-6);font-size:var(--fs-sm)}
@media(max-width:520px){.store-login-card{padding:var(--space-6)}}
.store-ranks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);padding-block:var(--space-5) var(--space-16)}
@media(max-width:600px){.store-ranks-grid{grid-template-columns:1fr}}
.store-rank-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-3);display:flex;flex-direction:column;transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
@media(hover:hover){.store-rank-card:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-4)}}
.store-rank-img{width:100%;aspect-ratio:1/1;background:var(--panel-2);display:grid;place-items:center;font-family:var(--font-head);font-size:var(--fs-3xl);font-weight:900;color:var(--primary);border-bottom:var(--stroke)}
img.store-rank-img{object-fit:contain;object-position:center}
.store-rank-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.store-rank-body h3{font-size:var(--fs-lg);font-weight:800}
.store-rank-price{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:900;color:var(--primary);font-variant-numeric:tabular-nums;margin-top:auto}
.coupon-list{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-4);position:relative}
.coupon-chip{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;background:var(--panel);border:2px solid var(--border);color:var(--primary);padding:4px var(--space-3);border-radius:var(--radius-sm)}
.store-checkout-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-4)}
@media(max-width:520px){.store-checkout-card{padding:var(--space-5)}}
.store-checkout-summary{background:var(--panel-2);border-radius:var(--radius);padding:var(--space-5);margin-bottom:var(--space-6);border:var(--stroke-thin)}
.store-summary-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-1) 0;font-size:var(--fs-sm)}
.store-summary-row span:last-child{font-variant-numeric:tabular-nums}
.store-summary-total{font-weight:800;font-size:var(--fs-md)}
.store-summary-divider{border:none;border-top:var(--stroke-thin);margin:var(--space-2) 0}
.store-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-6);padding-block:var(--space-5) var(--space-16)}
@media(max-width:860px){.store-layout{grid-template-columns:1fr}}
.store-sidebar{position:sticky;top:calc(var(--nav-h) + var(--space-6));align-self:start}
@media(max-width:860px){.store-sidebar{position:static}}
.store-sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1)}
.store-sidebar-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);min-height:44px;border-radius:var(--radius-sm);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted);cursor:pointer;background:none;border:none;text-align:left;width:100%;transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
@media(hover:hover){.store-sidebar-link:hover{color:var(--text);background:rgba(255,255,255,.06)}}
.store-sidebar-link[aria-selected="true"]{color:var(--primary);background:var(--cyan-dim);position:relative}
.store-sidebar-link[aria-selected="true"]::before{content:'';position:absolute;left:0;top:var(--space-2);bottom:var(--space-2);width:3px;background:var(--primary);border-radius:0 2px 2px 0}
.store-sidebar-link svg{width:18px;height:18px;flex-shrink:0}
.gems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-5)}
@media(max-width:600px){.gems-grid{grid-template-columns:1fr}}
.gem-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-3);display:flex;flex-direction:column;text-align:center;transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
@media(hover:hover){.gem-card:hover{border-color:var(--emerald-edge);box-shadow:var(--shadow-4)}}
.gem-card-img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--panel-2);border-bottom:var(--stroke);padding:var(--space-6)}
.gem-card-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.gem-card-amount{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:900;color:var(--primary)}
.gem-card-label{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:var(--tracking-caps);font-weight:700}
.gem-card-price{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:900;color:var(--text);margin-top:var(--space-1)}
.gem-card .btn{margin-top:auto}

/* ---------- Dashboard / auth pages ---------- */
.nav-mark{background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-sm);display:grid;place-items:center;box-shadow:var(--shadow-1)}
.account-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);padding:var(--space-8)}
.account-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:var(--hairline)}
.account-row:last-child{border-bottom:none}

/* ---------- Tickets ---------- */
.ticket-row{background:var(--panel);border:var(--stroke);border-radius:var(--radius);padding:var(--space-6);margin-bottom:var(--space-4)}
.ticket-meta{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);font-size:var(--fs-sm);color:var(--muted)}
.ticket-status{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;padding:3px var(--space-3);border-radius:var(--radius-sm);border:var(--stroke-thin);box-shadow:var(--shadow-1)}
.ticket-status-open{background:var(--green);color:var(--on-accent)}
.ticket-status-closed{background:var(--dim);color:var(--text)}
.ticket-status-pending{background:var(--amber);color:var(--on-accent)}
.ticket-content{color:var(--text);line-height:1.6}

/* ---------- Auth ---------- */
.auth-wrapper{min-height:100svh;display:grid;place-items:center;padding:var(--space-6)}
.auth-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);padding:var(--space-10);max-width:460px;width:100%;box-shadow:var(--shadow-4)}
.auth-card h1{margin-bottom:var(--space-2);font-size:var(--fs-xl);font-weight:900}
.auth-card > p{color:var(--muted);margin-bottom:var(--space-6);font-size:var(--fs-sm)}
.auth-card .btn{width:100%}
.auth-divider{display:flex;align-items:center;gap:var(--space-4);color:var(--dim);margin:var(--space-6) 0;font-size:var(--fs-sm)}
.auth-links{margin-top:var(--space-6);text-align:center;font-size:var(--fs-sm);color:var(--muted)}
.auth-links a{color:var(--primary)}

/* ---------- Admin ---------- */
.admin-header{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-8)}
.admin-panel{background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);padding:var(--space-8)}

/* ============================================================
   4b. HOMEPAGE — "Moss & Mortar" split hero + sections
   Adds the class layer the new homepage markup emits. The legacy
   .hero block above stays for the /modes page (centered stack);
   .hero-split re-points it to the asymmetric 7/5 composition.
   ============================================================ */

/* Voxel brackets: the ONE decorative device, on the status panel
   and the copy-IP chip only. Two L-corners per surface, emerald. */
.bracket{position:relative}
.bracket::before,.bracket::after{content:'';position:absolute;width:var(--voxel-size);height:var(--voxel-size);pointer-events:none}
.bracket::before{top:-2px;left:-2px;
  background:linear-gradient(var(--emerald),var(--emerald)) 0 0/100% 2px no-repeat,
             linear-gradient(var(--emerald),var(--emerald)) 0 0/2px 100% no-repeat}
.bracket::after{bottom:-2px;right:-2px;
  background:linear-gradient(var(--emerald),var(--emerald)) 100% 100%/100% 2px no-repeat,
             linear-gradient(var(--emerald),var(--emerald)) 100% 100%/2px 100% no-repeat}

/* Split hero: content left (7), status panel over art right (5) */
.hero-split{text-align:left;align-items:center;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-12)}
.hero-split::before{inset:var(--space-16) -20% auto auto;width:70vw;height:80%;max-width:1400px;background:radial-gradient(circle at 70% 30%,var(--bleed),transparent 60%)}
.hero-split .hero-content{grid-column:1;grid-row:1;text-align:left}
.hero-split .hero-art-wrap{grid-column:2;grid-row:1}
.hero h1{line-height:.92}

/* Status panel — the voxel surface */
.hero-art-wrap{position:relative;max-width:560px;width:100%;justify-self:end}
.hero-panel{position:relative;z-index:2;width:min(88%,440px);margin-inline:auto;background:var(--panel);border:var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow-3);padding:var(--space-5) var(--space-5) var(--space-4)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);border-bottom:var(--hairline);padding-bottom:var(--space-3)}
.panel-ip{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);margin:0}
.panel-ip strong{color:var(--text)}
.panel-status{font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--tracking-caps);color:var(--muted)}
.panel-count{font-family:var(--font-mono);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;line-height:1;color:var(--emerald);font-variant-numeric:tabular-nums;margin-bottom:var(--space-4)}
.panel-count.dead{color:var(--dim)}
.panel-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.panel-stat{background:var(--panel-2);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:2px}
.panel-stat + .panel-stat{margin-left:1px}
.panel-stat-v{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.panel-stat-v.live{color:var(--emerald)}
.panel-stat-k{font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--dim)}

/* Art plate — exact aspect ratio, honest fallback, never layout shift */
.art-plate{position:relative;z-index:1;width:92%;margin-left:8%;margin-top:calc(-1*var(--space-16));aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);border:var(--stroke);background:var(--bg-alt)}
.art-plate img{width:100%;height:100%;object-fit:cover}
.art-plate .art-label{background:repeating-linear-gradient(45deg,rgba(231,235,238,.02) 0 10px,transparent 10px 20px)}

/* Hero stat strip */
.hero-stats{grid-template-columns:repeat(3,1fr) !important;max-width:560px;margin-inline:0}
.hero-stat{background:var(--panel);padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:2px}
.hero-stat-val{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.hero-stat-val.live{color:var(--emerald)}
.hero-stat-lbl{font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--dim)}

/* Mode cards (art half + story half) */
.mode-card.art-card .mode-art{margin:0 0 1px}
.mode-card .mode-art .art-plate{width:100%;margin:0;margin-top:0;aspect-ratio:16/9;border-radius:0;border:none;border-bottom:var(--hairline)}
.mode-card .mode-art .art-label{z-index:2}
.mode-body{padding:var(--space-6);display:flex;flex-direction:column;align-items:flex-start}
.mode-body h3{font-size:var(--fs-lg);font-weight:800;font-family:var(--font-display)}
.mode-body p{color:var(--muted);font-size:var(--fs-sm);line-height:1.6;margin:var(--space-2) 0 var(--space-4)}
.mode-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0}
.mode-chips span,.mode-chips .chip{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px var(--space-3);font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted)}
.mode-cta{margin-top:auto}
.mode-cta a{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--emerald);position:relative;text-decoration:none}
.mode-cta a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-out)}
.mode-cta a:hover{color:#6EE7B7}
.mode-cta a:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.mode-cta a::after{transition:none;transform:none}}

/* Ownership grid — 2x2 hairline grid, numbers not icons row style */
.ownership-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-line);border:var(--hairline);border-radius:var(--radius);overflow:hidden}
.own-card{background:var(--panel);padding:var(--space-6)}
.own-card svg{color:var(--emerald)}
.own-card h3{font-size:var(--fs-md);font-weight:800;font-family:var(--font-display);margin:var(--space-3) 0 var(--space-1)}
.own-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
@media(max-width:600px){.ownership-grid{grid-template-columns:1fr}}

/* Live proof: leaderboard head + podium + table */
.lb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.lb-stats{color:var(--dim);font-size:var(--fs-xs)}
.lb-stat strong{color:var(--muted);font-weight:500}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-line);border:var(--hairline);border-radius:var(--radius);overflow:hidden;margin-bottom:var(--space-4)}
.podium-item{background:var(--panel-2);padding:var(--space-5) var(--space-4);text-align:center}
.podium-rank{width:40px;height:40px;display:grid;place-items:center;margin:0 auto var(--space-3);border-radius:50%;border:var(--stroke-thin);background:var(--panel-3);font-family:var(--font-mono);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.podium-rank-1{border-color:var(--emerald);color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-tint)}
.podium-name{font-weight:700;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium-score{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--dim);font-variant-numeric:tabular-nums;margin-top:2px}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--dim)}
.lb-table th:last-child,.lb-table td:last-child{text-align:right}
.lb-row td{padding:var(--space-4) var(--space-2);border-bottom:var(--hairline);font-size:var(--fs-sm)}
.lb-row:last-child td{border-bottom:none}
.rank-num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:var(--stroke-thin);background:var(--panel-2);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.player-name{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.player-score{font-family:var(--font-mono);font-weight:700;color:var(--emerald);font-variant-numeric:tabular-nums}
@media(max-width:560px){.podium{grid-template-columns:1fr}}

/* Live map */
.map-wrap{border:var(--stroke);border-radius:var(--radius);overflow:hidden;background:var(--panel);aspect-ratio:16/9}
.map-wrap iframe{width:100%;height:100%;border:none;display:block}

/* How to connect — numbered steps */
.steps{list-style:none;padding:0;display:grid;gap:var(--space-4);max-width:640px}
.step{counter-increment:step;position:relative;padding-left:calc(var(--space-12) + 6px);border-bottom:var(--hairline);padding-bottom:var(--space-4);margin-bottom:var(--space-4)}
.steps{counter-reset:step}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border:var(--stroke-thin);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--emerald);font-variant-numeric:tabular-nums}
.step h3{font-size:var(--fs-md);font-weight:800;font-family:var(--font-display)}
.step p{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--space-1)}
.step .copy-ip{width:auto}

/* Copy-IP chip internals (mono label + honest secondary sub) */
.copy-ip .label{letter-spacing:.02em}
.copy-ip .sub{font-size:var(--fs-2xs);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.copy-ip.copied .sub{color:inherit}

/* Split-hero responsive: stack, keep art visible, no horizontal scroll */
@media(max-width:960px){
  .hero-split{display:flex;flex-direction:column;gap:var(--space-8)}
  .hero-split .hero-content{order:-1;align-self:center;width:100%}
  .hero-split .hero-art-wrap{align-self:center;max-width:520px;width:100%}
}
@media(max-width:520px){
  .hero-art-wrap .hero-panel{width:100%}
  .art-plate{width:100%;margin-left:0}
  .hero-stats{grid-template-columns:1fr !important}
  .panel-grid{grid-template-columns:1fr}
  .panel-stat + .panel-stat{margin-left:0;margin-top:1px}
}
/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .spinner{animation:none;border-top-color:var(--primary);opacity:.9}
  .hero::before{display:none}
}