/* =========================================================================
   MIDNIGHT CANDY
   The website's skin for the in-game "Midnight Candy" UI kit
   (BoutZero_UI_Designs/2_Midnight_Candy, 2026-09-23).

   ⭐ A THEME LAYER, NOT A REWRITE. style.css is untouched and still defines
     every layout and component; this file is loaded after it and only
     re-skins. Remove the <link> in views/layout.php and the site is back to
     the previous look, byte for byte. A second kit becomes a second file.

   ⭐ THE PALETTE IS MEASURED, NOT EYEBALLED. Every candy colour below is the
     median of that hue's pixels across the kit's button sheets
     (PREVIEWS/90_BUTTONS_*, 91_mode_tabs_states):
        teal    #71EDE2 / #51DFD1 / #32A3A1   go & confirm   (ENTER, CREATE)
        violet  #9973F6 / #724ECE / #462897   active/selected (tabs, PLAY)
        pink    #FE6E8C / #E0467A / #A02447   exit, warnings  (EXIT, WAIT)
        orange  #FDAB4E / #F0922D / #A8621C   SHOP, SECTOR tag
        gold    #FDDD70 / #F9D866 / #9A8430   MARKET, BUY
     The navy base comes from the login and lobby screens.

   ⭐ THE OLD TOKEN NAMES KEEP THEIR ROLES. --cyan is still "the go colour"
     (now candy teal), so the ~60 rules in style.css that use it follow
     without being touched. Violet, pink and orange are new tokens for the
     roles the old palette never had.

   The signature piece is the candy slab: a slanted, lit-from-above button
   with a darker lower lip. It is drawn on ::before and skewed there, so the
   element itself -- and its text -- stays upright; the slant in the lettering
   comes from the italic face, exactly as in game.
   ========================================================================= */

/* ------------------------------------------------------------ tokens --- */
:root {
    --bg:          #11142e;
    --bg-alt:      #141836;
    --bg-band:     #161a3c;
    --surface:     #1b1f45;
    --surface-2:   #232859;
    --surface-3:   #2c3268;
    --border:      #343a7a;
    --border-soft: #252a57;

    --text:        #f1efff;
    --text-dim:    #b5b2de;
    --text-mute:   #7e81b3;

    --cyan:        #51dfd1;
    --cyan-bright: #7deee3;
    --cyan-deep:   #2f9f9c;
    --cyan-glow:   rgba(81, 223, 209, 0.18);

    --violet:        #7650e2;
    --violet-bright: #a283fa;
    --violet-deep:   #46289a;
    --violet-glow:   rgba(118, 80, 226, 0.34);
    --pink:          #fe6e8c;
    --pink-deep:     #a02447;
    --orange:        #fdab4e;
    --orange-deep:   #b3651d;
    --lime:          #9be75a;

    --gold:    #fbd865;
    --silver:  #cfd2ec;
    --bronze:  #f39a4f;
    --green:   #62e39a;
    --red:     #fe6e8c;
    --magenta: #ea4f9c;       /* Surge's class colour in the kit */
    --blue:    #7c95ff;
    --amber:   #fdab4e;

    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow:    0 24px 52px -28px rgba(3, 2, 18, 0.95);

    --font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;

    --slant:   -12deg;         /* every slab, tab and chip leans the same way */
    --ink:     #0f1733;        /* dark lettering on the bright slabs (teal, gold, orange) */
    --panel-hi: rgba(255, 255, 255, 0.035);

    /* the thin orange -> pink -> violet rule the kit draws under headers */
    --candy-rule: linear-gradient(90deg, var(--orange), var(--pink) 45%, var(--violet-bright));
}

/* -------------------------------------------------------------- base --- */
/* ⛔ The root gets its own colour ON PURPOSE. Without it the body's gradients
   propagate to the whole canvas, which tiles them: on a page shorter than the
   window a second violet glow appeared under the footer. With the root painted
   the footer's colour, the area below a short page just continues the footer. */
html { background: #0d1029; }
body {
    background:
        radial-gradient(1000px 560px at 92% -6%, rgba(118, 80, 226, 0.20), transparent 70%),
        radial-gradient(760px 480px at -4% 22%, rgba(81, 223, 209, 0.06), transparent 70%),
        var(--bg);
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0.01em; }

/* The kit's display lettering: heavy, condensed, italic capitals. */
h1,
.section-head h2,
.cta-band h2 { font-style: italic; font-weight: 800; }

/* Gradient headline accent, as on the kit's SHOP header. Headings only --
   in running text .accent is a link colour and must still read as one. */
h1 .accent, h2 .accent, h3 .accent {
    background: linear-gradient(95deg, var(--orange), var(--pink) 70%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    padding-right: 0.08em;     /* keep the italic overhang of the last glyph */
}
.accent { color: var(--cyan); }
a.accent:hover { color: var(--cyan-bright); }

::selection { background: var(--violet); color: #fff; }

/* Small wide-tracked labels ("ZEROSPACE", "UNIT VIEW // 3D"), led by the
   kit's orange / pink / violet triple stripe. */
.kicker {
    font-weight: 700; font-size: 0.82rem; letter-spacing: 0.3em; color: var(--cyan);
}
.kicker::before {
    content: ""; display: inline-block; width: 19px; height: 0.95em;
    margin-right: 11px; vertical-align: -0.12em;
    background: linear-gradient(90deg,
        var(--orange) 0 3px, transparent 3px 7px,
        var(--pink) 7px 10px, transparent 10px 14px,
        var(--violet-bright) 14px 17px, transparent 17px);
    transform: skewX(-20deg);
}
.head-link { font-size: 0.92rem; letter-spacing: 0.16em; font-weight: 700; }

/* ------------------------------------------------------ candy slabs --- */
/* One drawing routine for every slanted surface. Each component only sets
   --slab (fill) and --slab-fx (its lip, highlight and glow). */
.btn, .tab, .chip, .pager a, .pager span, .chassis-chip, .order-badge,
.rank-n, .nav-bal, .cat-badge {
    position: relative; isolation: isolate;
}
.tag-badge, .enh-badge, .tier-flag, .pack-flag { isolation: isolate; }   /* already positioned */

.btn::before, .tab::before, .chip::before, .pager a::before, .pager span::before,
.chassis-chip::before, .order-badge::before, .rank-n::before, .nav-bal::before,
.cat-badge::before, .tag-badge::before, .enh-badge::before, .tier-flag::before,
.pack-flag::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    transform: skewX(var(--slant));
    border-radius: 4px;
    background: var(--slab, linear-gradient(180deg, #3e436f, #2b2f57));
    box-shadow: var(--slab-fx, inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 #191c3a);
    transition: filter .15s ease, box-shadow .2s ease;
}

/* Slab recipes, straight from the kit: light top, mid body, dark lip. */
.btn-primary {
    --slab: linear-gradient(180deg, #7ff0e5 0%, #4fd7cb 48%, #35b3ae 100%);
    --slab-fx: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 #1d7a78,
               0 10px 26px -12px rgba(81,223,209,.65);
}

/* ------------------------------------------------------------ buttons --- */
.btn {
    border: 0; border-radius: 0; background: transparent;
    font-style: italic; font-weight: 800; font-size: 1rem; letter-spacing: 0.06em;
    padding: 12px 30px;
    color: #f4f2ff; text-shadow: 0 1px 0 rgba(8, 6, 28, .6);
    box-shadow: none;
}
.btn-sm { padding: 8px 20px; font-size: 0.86rem; }
.btn-lg { padding: 16px 38px; font-size: 1.16rem; }
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { filter: brightness(1.12) saturate(1.08); }
.btn:active { transform: translateY(0); }
.btn:active::before { filter: brightness(.9); }

.btn-primary {
    background: transparent; border: 0; box-shadow: none;
    color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { box-shadow: none; }

/* EXIT-style: dark body, candy outline. */
.btn-outline {
    background: transparent; border: 0; color: var(--cyan-bright);
    --slab: linear-gradient(180deg, #262b55, #1c2047);
    --slab-fx: inset 0 0 0 1.5px var(--cyan), 0 8px 22px -14px rgba(81,223,209,.6);
}
.btn-outline:hover { background: transparent; }

/* Idle slab -- the kit's unselected tab. */
.btn-ghost {
    background: transparent; color: #e7e4ff;
    --slab: linear-gradient(180deg, #41467a, #2c3059);
    --slab-fx: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 #181b38, 0 0 0 1px #4a508f;
}
.btn-ghost:hover { border-color: transparent; color: #fff; }

/* The shop's buy button is the kit's gold BUY tag. */
.btn.buy-go {
    color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.3);
    --slab: linear-gradient(180deg, #ffe98f 0%, #f9d866 50%, #d8ab35 100%);
    --slab-fx: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 #8c6a1c,
               0 10px 24px -14px rgba(249,216,102,.7);
}

.btn[disabled], .btn.is-disabled {
    color: #8b8fb5; text-shadow: none; transform: none; cursor: not-allowed;
    --slab: linear-gradient(180deg, #414b60, #2a3044);
    --slab-fx: inset 0 -2px 0 #1e2333;
}
.btn[disabled]::before { filter: none; }

/* ---------------------------------------------------- tabs, chips, pager --- */
.tab-row { background: transparent; border: 0; padding: 0; gap: 10px; }
.tab, .chip {
    background: transparent; border: 0; border-radius: 0;
    font-family: var(--font-display); font-style: italic; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim);
}
.tab  { font-size: 0.98rem; padding: 8px 20px; }
.chip { font-size: 0.86rem; padding: 7px 16px; }
.tab:hover, .chip:hover { color: #fff; border-color: transparent; }
.tab.is-active, .chip.is-active {
    background: transparent; border-color: transparent; color: #fff;
    text-shadow: 0 1px 0 rgba(20, 8, 60, .6);
    --slab: linear-gradient(180deg, #ab8dfb 0%, #7a52e6 52%, #5b35bb 100%);
    --slab-fx: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 #3a1f86,
               0 10px 24px -12px var(--violet-glow);
}

.pager { gap: 10px; }
.pager a, .pager span {
    border: 0; background: transparent; border-radius: 0;
    font-style: italic; font-weight: 800; font-size: 0.98rem; color: var(--text-dim);
}
.pager a:hover { color: #fff; border-color: transparent; }
.pager a:hover::before { filter: brightness(1.18); }
.pager .is-active {
    background: transparent; color: #fff;
    --slab: linear-gradient(180deg, #ab8dfb, #7a52e6 52%, #5b35bb);
    --slab-fx: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 #3a1f86;
}
.pager .gap::before { display: none; }

/* ---------------------------------------------------------- badges --- */
.chassis-chip, .order-badge, .cat-badge {
    border: 0; border-radius: 0; background: transparent;
    font-family: var(--font-display); font-style: italic; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.chassis-chip { font-size: 0.74rem; padding: 2px 11px; }
/* The kit's CLASS buttons: 01 Patch teal, 02 Surge pink, 03 Ram orange. */
.chassis-patch { color: var(--ink);
    --slab: linear-gradient(180deg, #7ff0e5, #3fc2bb);  --slab-fx: inset 0 -2px 0 #1f7c79; }
.chassis-surge { color: #fff; text-shadow: 0 1px 0 rgba(60,0,30,.5);
    --slab: linear-gradient(180deg, #ff7cbc, #d93f8e);  --slab-fx: inset 0 -2px 0 #8c1f55; }
.chassis-ram   { color: var(--ink);
    --slab: linear-gradient(180deg, #ffc27a, #f0922d);  --slab-fx: inset 0 -2px 0 #a2581a; }
.chassis-none  { color: var(--text-mute); }

.order-badge { font-size: 0.74rem; padding: 3px 12px; }
.order-badge--ok    { color: var(--ink); border-color: transparent; background: transparent;
    --slab: linear-gradient(180deg, #7ff0e5, #3fc2bb); --slab-fx: inset 0 -2px 0 #1f7c79; }
.order-badge--warn  { color: var(--ink); border-color: transparent; background: transparent;
    --slab: linear-gradient(180deg, #ffc27a, #f0922d); --slab-fx: inset 0 -2px 0 #a2581a; }
.order-badge--bad   { color: #fff; border-color: transparent; background: transparent;
    --slab: linear-gradient(180deg, #ff8aa3, #e0467a); --slab-fx: inset 0 -2px 0 #8a1c3c; }
.order-badge--muted { color: var(--text-dim); }

/* Category badges sit on every shop tile: tinted, so thirty of them are not
   thirty neon signs. */
.cat-badge { font-size: 0.72rem; padding: 3px 11px; color: var(--cyan);
    --slab: rgba(81,223,209,.16); --slab-fx: inset 0 0 0 1px rgba(81,223,209,.45); }
.cat-badge[data-accent="green"]   { color: var(--green);   background: transparent;
    --slab: rgba(98,227,154,.15);  --slab-fx: inset 0 0 0 1px rgba(98,227,154,.45); }
.cat-badge[data-accent="amber"]   { color: var(--orange);  background: transparent;
    --slab: rgba(253,171,78,.15);  --slab-fx: inset 0 0 0 1px rgba(253,171,78,.45); }
.cat-badge[data-accent="magenta"] { color: var(--magenta); background: transparent;
    --slab: rgba(234,79,156,.16);  --slab-fx: inset 0 0 0 1px rgba(234,79,156,.5); }
.cat-badge[data-accent="blue"]    { color: var(--violet-bright); background: transparent;
    --slab: rgba(118,80,226,.2);   --slab-fx: inset 0 0 0 1px rgba(162,131,250,.5); }

.tag-badge, .enh-badge {
    border: 0; border-radius: 0; background: transparent;
    font-style: italic; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em;
}
.tag-badge { padding: 2px 8px; }
.tag-cyan  { color: var(--ink); background: transparent; border: 0;
    --slab: linear-gradient(180deg, #7ff0e5, #3fc2bb); --slab-fx: inset 0 -2px 0 #1f7c79; }
.tag-amber { color: var(--ink); background: transparent; border: 0;
    --slab: linear-gradient(180deg, #ffe98f, #e9bf45); --slab-fx: inset 0 -2px 0 #8c6a1c; }
.enh-badge { padding: 1px 7px; color: #fff;
    --slab: linear-gradient(180deg, #ab8dfb, #6a45d6); --slab-fx: inset 0 -2px 0 #3a1f86; }

.tier-flag, .pack-flag {
    background: transparent; border-radius: 0; color: var(--ink);
    font-style: italic; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em;
    --slab: linear-gradient(180deg, #7ff0e5, #3fc2bb);
    --slab-fx: inset 0 -2px 0 #1f7c79, 0 8px 20px -10px rgba(81,223,209,.7);
}

/* The kit's room-number chips: lilac-violet, white italic numerals. */
.rank-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 26px; padding: 0 10px;
    font-style: italic; font-weight: 800; font-size: 0.98rem; color: #fff;
    text-shadow: 0 1px 0 rgba(20, 10, 60, .55);
    --slab: linear-gradient(180deg, #9a9ee6, #6468c2);
    --slab-fx: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 #3d418a;
}
tr.top-1 .rank-n { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.35);
    --slab: linear-gradient(180deg, #ffe98f, #f2c84a); --slab-fx: inset 0 -2px 0 #8c6a1c, 0 6px 16px -8px rgba(249,216,102,.8); }
tr.top-2 .rank-n { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.35);
    --slab: linear-gradient(180deg, #eef0ff, #b6bade); --slab-fx: inset 0 -2px 0 #6f7399; }
tr.top-3 .rank-n { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.3);
    --slab: linear-gradient(180deg, #ffc27a, #e98838); --slab-fx: inset 0 -2px 0 #a2581a; }

/* ------------------------------------------------------------- nav --- */
.site-nav {
    background: rgba(15, 18, 42, 0.88);
    border-bottom: 0;
}
.site-nav::after {                         /* candy rule along the bottom edge */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--candy-rule); opacity: .55; pointer-events: none;
}
.brand-logo { height: 46px; }
.nav-links { gap: 6px; }
.nav-link {
    font-family: var(--font-display); font-weight: 700; font-size: 1.04rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 13px; isolation: isolate;
}
.nav-link.is-active { color: #fff; text-shadow: 0 1px 0 rgba(20, 8, 60, .6); }
.nav-link.is-active::after {             /* the kit's active LOBBY tab */
    left: 0; right: 0; top: 0; bottom: 0; height: auto; z-index: -1;
    transform: skewX(var(--slant)); border-radius: 4px;
    background: linear-gradient(180deg, #ab8dfb, #7a52e6 52%, #5b35bb);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 #3a1f86,
                0 8px 20px -10px var(--violet-glow);
}
.nav-cta { margin-left: 10px; }

/* ---- grouped navigation: primary links left, account right ---- */
.nav-main, .nav-account { display: flex; align-items: center; gap: 6px; }
.nav-drop { position: relative; }
.nav-drop-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; cursor: pointer; line-height: inherit;
}
.nav-chev { display: inline-block; opacity: .75; transition: transform .18s ease; }
.nav-drop.is-open > .nav-drop-toggle { color: #fff; }
.nav-drop.is-open .nav-chev { transform: rotate(180deg); opacity: 1; }
.nav-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The dropdown is a candy panel: violet bracket, candy rule along the top. */
.nav-menu {
    position: absolute; top: calc(100% + 12px); left: -8px; z-index: 60;
    min-width: 260px; margin: 0; padding: 8px; list-style: none;
    background:
        linear-gradient(var(--violet-bright), var(--violet-bright)) 7px 9px / 12px 2px no-repeat,
        linear-gradient(var(--violet-bright), var(--violet-bright)) 7px 9px / 2px 12px no-repeat,
        var(--candy-rule) top / 100% 2px no-repeat,
        var(--surface);
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 26px 50px -18px rgba(3, 2, 18, .95), 0 0 0 1px rgba(118, 80, 226, .14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* right: 0, not a negative offset: hidden or not, a menu that pokes past its
   toggle pokes past the screen when the toggle sits at the right edge, and
   the page grows a sideways scroll. */
.nav-drop--end .nav-menu { left: auto; right: 0; }
.nav-drop.is-open > .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* an invisible bridge over the gap, so the pointer can travel from the
   trigger to the panel without leaving the hover area */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.nav-menu-link {
    position: relative; display: flex; flex-direction: column; gap: 1px;
    width: 100%; padding: 9px 12px 9px 16px; border: 0; border-radius: 7px;
    background: none; color: var(--text); text-align: left; cursor: pointer;
    font: inherit; transition: background .12s;
}
.nm-label {
    font-family: var(--font-display); font-weight: 700; font-size: 1.04rem;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.nm-hint { font-size: 0.78rem; line-height: 1.35; color: var(--text-mute); }
.nav-menu-link:hover, .nav-menu-link:focus-visible { background: rgba(118, 80, 226, .18); }
.nav-menu-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.nav-menu-link:hover::before, .nav-menu-link:focus-visible::before, .nav-menu-link.is-current::before {
    content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 3px;
    border-radius: 2px; background: var(--violet-bright);
}
.nav-menu-link.is-current .nm-label { color: var(--cyan); }
.nav-menu-sep { height: 1px; margin: 6px 8px; background: var(--border-soft); }
.nav-menu .nav-logout { display: block; }
/* Sign Out is the kit's EXIT: pink, and set apart below a rule. */
.nav-menu-exit .nm-label { color: var(--pink); }
.nav-menu-exit:hover, .nav-menu-exit:focus-visible { background: rgba(254, 110, 140, .13); }
.nav-menu-exit:hover::before, .nav-menu-exit:focus-visible::before { background: var(--pink); }

@media (min-width: 861px) {
    .nav-links { flex: 1; justify-content: space-between; margin-left: 34px; gap: 18px; }
    .nav-account { gap: 10px; }
}

/* The balance chips. ⭐ THE DIGITS ARE SET IN THE BODY FACE. The condensed
   italic display face is for headings; at this size eight digits of it smear
   into each other. Inter, upright, tabular figures (every digit the same
   width, so a balance never jiggles as it changes), near-white for contrast.
   The currency is the badge -- its colour, its shape and its letter -- and the
   slab outline keeps the kit's slant. */
.nav-bal {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: transparent; border-radius: 0;
    font-family: var(--font-body); font-style: normal; font-weight: 600;
    font-size: 0.86rem; line-height: 1; letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums; color: var(--text);
    padding: 5px 13px 5px 8px;
}
.nav-cur {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 18px; height: 18px;
    font-family: var(--font-display); font-style: normal; font-weight: 800;
    font-size: 0.78rem; line-height: 1; color: var(--ink);
    box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.nav-bal--coins {
    --slab: rgba(249,216,102,.08); --slab-fx: inset 0 0 0 1px rgba(249,216,102,.42); }
.nav-bal--coins .nav-cur { border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3b8, var(--gold) 55%, #d8ab35); }
.nav-bal--gigas {
    --slab: rgba(81,223,209,.07);  --slab-fx: inset 0 0 0 1px rgba(81,223,209,.42); }
.nav-bal--gigas .nav-cur { border-radius: 5px;
    background: linear-gradient(180deg, #a6f7ee, var(--cyan) 55%, var(--cyan-deep)); }
/* ⛔ Between the phone menu (<= 860px) and 1100px, two eight-digit balances
   and six links do not fit on one row: the header ran off the screen. There
   the short form stands in (34.7M); the exact number stays in the tooltip, the
   link's label, the phone menu, wider screens and My Account. */
.nav-amt-short { display: none; }
@media (min-width: 861px) and (max-width: 1100px) {
    .nav-amt { display: none; }
    .nav-amt-short { display: inline; }
    .nav-links { margin-left: 22px; gap: 14px; }
}

/* ------------------------------------------------------- page header --- */
.page-head {
    background:
        radial-gradient(720px 360px at 88% -30%, rgba(118, 80, 226, .34), transparent 70%),
        radial-gradient(600px 300px at 4% -10%, rgba(81, 223, 209, .10), transparent 70%),
        linear-gradient(180deg, #181c42, var(--bg));
    border-bottom: 0;
}
.page-head::before {                     /* the lobby's faint diagonal hatching */
    background-image: repeating-linear-gradient(118deg,
        rgba(162,131,250,.07) 0 1px, transparent 1px 13px);
    background-size: auto; opacity: 1;
    mask-image: radial-gradient(ellipse at 70% 0%, #000, transparent 72%);
}
.page-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--candy-rule); opacity: .45;
}
.page-head h1 { font-size: clamp(2.5rem, 6vw, 3.9rem); letter-spacing: 0.015em; }
/* The kit's "/ MAIN LOBBY" slash mark. */
.page-head h1::before {
    content: ""; display: inline-block; width: 0.2em; height: 0.78em;
    margin-right: 0.34em; vertical-align: 0.02em; border-radius: 2px;
    background: linear-gradient(180deg, var(--orange), var(--pink));
    transform: skewX(-18deg);
}
.page-head p { color: var(--text-dim); }

.section-head h2 { font-size: clamp(2.05rem, 4.2vw, 2.9rem); }
.section--band { background: var(--bg-band); border-block: 1px solid var(--border-soft); }

/* ------------------------------------------------------------ panels --- */
/* The kit's panel: indigo fill, lilac hairline, a lit top edge. */
.card, .stat-tile, .status-strip, .dl-card, .item-card, .tier-card, .pack-card,
.member-strip, .news-item, .bot-viewer-card, .auth-card {
    background-color: var(--surface);
    border-color: var(--border);
    box-shadow: inset 0 1px 0 var(--panel-hi), var(--shadow);
}

/* Corner brackets -- violet top-left, teal bottom-right -- on the larger
   panels, as round the kit's room list and login box. Drawn as background
   layers, so no markup changes; inset so the rounded corner never clips them. */
.card, .dl-card, .member-card, .auth-card, .tier-card {
    background:
        linear-gradient(var(--violet-bright), var(--violet-bright)) 7px 7px / 16px 2px no-repeat,
        linear-gradient(var(--violet-bright), var(--violet-bright)) 7px 7px / 2px 16px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) right 7px bottom 7px / 16px 2px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) right 7px bottom 7px / 2px 16px no-repeat,
        linear-gradient(180deg, var(--panel-hi), transparent 42%),
        var(--surface);
}
.card--hover:hover, .item-card:hover { border-color: var(--violet); }

.dl-card.featured {
    border-color: var(--violet);
    background:
        linear-gradient(var(--violet-bright), var(--violet-bright)) 7px 7px / 16px 2px no-repeat,
        linear-gradient(var(--violet-bright), var(--violet-bright)) 7px 7px / 2px 16px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) right 7px bottom 7px / 16px 2px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) right 7px bottom 7px / 2px 16px no-repeat,
        linear-gradient(160deg, #2a2466, var(--surface) 62%);
}

.member-card {
    border-color: var(--violet);
    box-shadow: 0 0 0 1px rgba(118,80,226,.25), 0 26px 60px -36px var(--violet-glow);
}
.member-strip { border-color: var(--violet); }
.tier-card.popular, .pack-card.is-best {
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px var(--cyan-deep), 0 22px 50px -30px rgba(81,223,209,.5);
}
.news-item.is-pinned { border-color: var(--violet); }

.stat-tile .n, .tier-price, .mp-amount, .pack-coins, .rating-v {
    font-style: italic; font-weight: 800;
}
.stat-tile .n { font-size: clamp(2rem, 4vw, 2.7rem); }

/* ------------------------------------------------------------ tables --- */
.ladder { background: var(--surface); border-color: var(--border); }
.ladder thead th {
    background: rgba(9, 11, 32, .45);
    font-weight: 700; font-size: 0.82rem; letter-spacing: 0.22em; color: var(--text-dim);
    border-bottom: 2px solid var(--violet-deep);
}
.ladder tbody td { border-bottom-color: var(--border-soft); }
/* The condensed face runs smaller than the old one at the same size, so the
   numbers and guild tags that used it inherited a size that no longer reads. */
.rating-v { font-size: 1.08rem; }
.clan-tag { font-size: 0.98rem; font-weight: 600; letter-spacing: 0.04em; }
.ladder tbody tr:hover { background: rgba(118, 80, 226, .12); }
.pilot-online { background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* ------------------------------------------------------------- forms --- */
/* The kit's login fields: near-black well, teal bar down the left edge. */
.field input, .field select, .field textarea,
.search-box input, .select-field select, .market-filter-input,
.sell-form input, .sell-form select, .buy-form select {
    background: #0b0e24; color: var(--text);
    border: 1px solid var(--border); border-left: 3px solid var(--cyan);
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.search-box input:focus-visible, .select-field select:focus-visible,
.market-filter-input:focus-visible, .sell-form input:focus-visible,
.sell-form select:focus-visible, .buy-form select:focus-visible {
    outline: none; border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-glow);
}
.search-box input { padding-left: 42px; }
.field-label {
    font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
    letter-spacing: 0.22em; color: var(--cyan);
}
.field-hint { color: var(--text-mute); }
/* ⛔ minmax(0, 1fr), NEVER the implicit `auto` column. An input's natural width
   (its 20-character default, far wider with the 2FA code fields' big letter-
   spaced digits) becomes the auto column's minimum, and then every field,
   button and hint in the form is stretched past the right edge of its card. */
.auth-form, .field { grid-template-columns: minmax(0, 1fr); }
.field input, .field select, .field textarea { min-width: 0; }
.select-field {
    font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}

.form-error, .flash-error {
    color: #ffc0cd; border: 1px solid rgba(254,110,140,.4); border-left: 3px solid var(--pink);
    background: rgba(160, 36, 71, .18);
}
.flash { border-left-width: 3px; }
.flash-ok { color: #c9fbf6; border-color: rgba(81,223,209,.35); border-left-color: var(--cyan);
    background: rgba(47, 159, 156, .14); }

/* The login / register box, after the kit's login panel: bracketed corners,
   the top-right and bottom-left clipped off with a candy edge, and the
   orange-pink rule across the top. */
.auth-card {
    position: relative; border-radius: 10px; padding: 34px 32px 30px;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    background:
        linear-gradient(to top right, transparent calc(50% - 1.5px), var(--pink) calc(50% - 1.5px),
                        var(--pink) calc(50% + 1.5px), transparent calc(50% + 1.5px)) right top / 20px 20px no-repeat,
        linear-gradient(to top right, transparent calc(50% - 1.5px), var(--cyan) calc(50% - 1.5px),
                        var(--cyan) calc(50% + 1.5px), transparent calc(50% + 1.5px)) left bottom / 20px 20px no-repeat,
        linear-gradient(var(--violet-bright), var(--violet-bright)) 8px 8px / 16px 2px no-repeat,
        linear-gradient(var(--violet-bright), var(--violet-bright)) 8px 8px / 2px 16px no-repeat,
        linear-gradient(90deg, var(--orange), var(--pink) 60%, transparent) 26px 20px / calc(100% - 52px) 1.5px no-repeat,
        linear-gradient(180deg, var(--panel-hi), transparent 40%),
        var(--surface);
}
.auth-alt { border-top-color: var(--border-soft); color: var(--text-dim); }

/* ------------------------------------------------------------ footer --- */
.site-footer { position: relative; background: #0d1029; border-top: 0; }
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--candy-rule); opacity: .5;
}
.footer-col h4 {
    font-style: italic; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.08em;
    text-transform: uppercase;
}
.brand-logo--footer { height: 42px; }

/* ============================================================== pages === */

/* ---- home ---- */
.hero::before {
    background:
        radial-gradient(760px 440px at 80% 6%, rgba(118, 80, 226, .30), transparent 68%),
        radial-gradient(700px 460px at 6% 0%, rgba(81, 223, 209, .12), transparent 66%),
        radial-gradient(520px 320px at 50% 100%, rgba(254, 110, 140, .08), transparent 70%);
}
.hero::after {
    background-image: repeating-linear-gradient(118deg,
        rgba(162,131,250,.07) 0 1px, transparent 1px 13px);
    background-size: auto; opacity: 1;
}
.hero h1 { font-size: clamp(2.8rem, 6.4vw, 4.7rem); }
.hero h1 .line-2 {
    background: linear-gradient(95deg, var(--cyan), var(--violet-bright));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-art {
    border-color: var(--border);
    background:
        linear-gradient(var(--violet-bright), var(--violet-bright)) 9px 9px / 18px 2px no-repeat,
        linear-gradient(var(--violet-bright), var(--violet-bright)) 9px 9px / 2px 18px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) right 9px bottom 9px / 18px 2px no-repeat,
        linear-gradient(var(--cyan), var(--cyan)) right 9px bottom 9px / 2px 18px no-repeat,
        linear-gradient(160deg, #262a63, #151838 62%);
}
.hero-art .tag { color: var(--cyan); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.3em; }
.hero-art--bot::before {
    background:
        radial-gradient(ellipse 50% 56% at 50% 44%, rgba(118, 80, 226, .34), transparent 72%),
        radial-gradient(ellipse 36% 7% at 50% 89%, rgba(81, 223, 209, .22), transparent 75%),
        radial-gradient(ellipse 30% 6% at 50% 89%, rgba(0, 0, 0, .55), transparent 75%);
}
.hero-art-caption { font-size: 0.74rem; letter-spacing: 0.24em; }

/* The hero with the Zerospace feed: the copy on the left, and on the right a
   showcase of screenshots from the game (views/pages/home.php, js/feed.js).
   No box around it: the screenshot IS the panel, with a soft glow to sit it
   in the page, and the caption and controls read as text beneath it. The
   screen keeps the game's 4:3 and nothing is laid over it, so the game's HUD
   is never covered. */
.hero-grid--show { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
.hero-grid--show h1 { font-size: clamp(2.6rem, 5.4vw, 4.3rem); }

/* "What's new" chips under the lead */
.hero-new { margin: -6px 0 30px; }
.hero-new-label {
    display: block; margin-bottom: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan);
}
.hero-new ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-new li {
    padding: 6px 12px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; line-height: 1.2;
    color: var(--text); background: rgba(162, 131, 250, .12); border: 1px solid rgba(162, 131, 250, .28);
}
.hero-new .hero-new-more { padding: 0; background: none; border-color: rgba(81, 223, 209, .45); }
.hero-new .hero-new-more a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--cyan-bright); }
.hero-new .hero-new-more a:hover { background: var(--cyan-glow); }

.show { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
/* the glow the screenshot floats on */
.show::before {
    content: ''; position: absolute; inset: 8% -6% 18%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(118, 80, 226, .45), rgba(81, 223, 209, .12) 60%, transparent);
    filter: blur(28px);
}
.show-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.show-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--cyan);
}
.show-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(254, 110, 140, .18); }
.show-count {
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em;
    color: var(--text-mute); font-variant-numeric: tabular-nums;
}
.show-count b { color: var(--text); }
.show-screen {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px;
    background: #0b0d24; touch-action: pan-y;
    box-shadow: 0 0 0 1px rgba(162, 131, 250, .28), 0 30px 60px -28px rgba(3, 2, 18, .95);
}
.show-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.show-slide.is-active { opacity: 1; }
.show-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Story-style steps: one per screenshot, clickable. The running one fills,
   and ITS animation is the slideshow's timer (js/feed.js). */
.show-steps { display: none; gap: 6px; }
.show.is-live .show-steps { display: flex; }
.show-step { flex: 1 1 0; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.show-fill {
    position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; overflow: hidden;
    background: rgba(162, 131, 250, .22); transition: background-color .2s ease;
}
.show-step:hover .show-fill { background: rgba(162, 131, 250, .45); }
.show-fill::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--violet-bright));
    transform: scaleX(0); transform-origin: left;
}
.show-step.is-done .show-fill::after { transform: scaleX(1); }
.show-step.is-running .show-fill::after { animation: show-run 5.5s linear forwards; }
.show:hover .show-step.is-running .show-fill::after,
.show.is-paused .show-step.is-running .show-fill::after { animation-play-state: paused; }
/* Its own rule: a browser without :has() drops a whole selector list. */
.show:has(:focus-visible) .show-step.is-running .show-fill::after { animation-play-state: paused; }
@keyframes show-run { to { transform: scaleX(1); } }

.show-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.show-text { margin: 0; min-width: 0; display: grid; gap: 2px; }
.show-kicker {
    font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink);
}
.show-title { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1.15; color: var(--text); }
.show-desc { color: var(--text-dim); font-size: 0.92rem; line-height: 1.45; }
.show-nav { display: none; gap: 6px; flex-shrink: 0; padding-top: 4px; }
.show.is-live .show-nav { display: flex; }
.show-btn {
    width: 36px; height: 36px; padding: 0; cursor: pointer; display: grid; place-items: center;
    color: var(--text-dim); background: rgba(162, 131, 250, .1);
    border: 1px solid var(--border); border-radius: 10px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.show-btn:hover { color: var(--text); border-color: var(--violet-bright); background: rgba(162, 131, 250, .2); }
.show-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.show-icon-play { fill: currentColor !important; stroke: none !important; }
.show-icon-play, .show.is-paused .show-icon-pause { display: none; }
.show.is-paused .show-icon-play { display: block; }
.show-step:focus-visible, .show-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 1080px) {
    .hero-grid--show { grid-template-columns: minmax(0, 1fr); }
    .show { max-width: 640px; }
}
@media (max-width: 560px) {
    .show-title { font-size: 1.25rem; }
    .show-btn { width: 34px; height: 34px; }
}
/* No motion asked for: no fade and no running step -- and without its
   animationend the feed never moves on by itself, so there is nothing to
   pause. The arrows and steps still work. */
@media (prefers-reduced-motion: reduce) {
    .show-slide { transition: none; }
    .show-step.is-running .show-fill::after { animation: none; transform: scaleX(1); }
    .show [data-feed-toggle] { display: none; }
}

/* What's new (home) */
.new-grid { margin-bottom: 18px; }
.new-more { color: var(--text-dim); font-size: 0.95rem; margin: 0; }
.new-more strong { color: var(--text); }
.new-more a { color: var(--cyan-bright); font-weight: 600; white-space: nowrap; }

/* The trailer (home): a 16:9 player, the showcase's framing. "Watch the
   trailer" in the hero jumps to it. */
.hero-watch {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
    font-weight: 600; color: var(--text-dim); transition: color .15s ease;
}
.hero-watch:hover { color: var(--text); }
.hero-watch-icon {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    color: var(--ink); background: linear-gradient(135deg, var(--cyan), var(--violet-bright));
    box-shadow: 0 0 0 4px rgba(81, 223, 209, .16);
}
.hero-watch-icon svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
#trailer { scroll-margin-top: 90px; }
.trailer {
    position: relative; aspect-ratio: 16 / 9; max-width: 1040px; margin: 0 auto;
    overflow: hidden; border-radius: 14px; background: #0b0d24;
    box-shadow: 0 0 0 1px rgba(162, 131, 250, .28), 0 30px 60px -28px rgba(3, 2, 18, .95);
}
.trailer video, .trailer-frame, .trailer-facade, .trailer-facade img {
    display: block; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.trailer-facade { position: relative; }
.trailer-play {
    position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px;
    border-radius: 50%; display: grid; place-items: center; color: var(--ink);
    background: linear-gradient(135deg, var(--cyan), var(--violet-bright));
    box-shadow: 0 0 0 10px rgba(81, 223, 209, .18), 0 18px 40px -12px rgba(3, 2, 18, .9);
    transition: transform .2s ease, box-shadow .2s ease;
}
.trailer-play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.trailer-facade:hover .trailer-play, .trailer-facade:focus-visible .trailer-play {
    transform: scale(1.08); box-shadow: 0 0 0 14px rgba(81, 223, 209, .22), 0 18px 40px -12px rgba(3, 2, 18, .9);
}
.trailer-facade:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .trailer-play { transition: none; } }
.status-cell .s-label { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.22em; }
.status-cell .s-value { font-style: italic; font-weight: 800; font-size: 1.14rem; }
.live-dot { background: var(--lime); box-shadow: 0 0 0 0 rgba(155,231,90,.55); animation-name: candy-pulse; }
@keyframes candy-pulse {
    70%  { box-shadow: 0 0 0 10px rgba(155,231,90,0); }
    100% { box-shadow: 0 0 0 0 rgba(155,231,90,0); }
}
.feature-card .f-icon {
    background: linear-gradient(160deg, rgba(118,80,226,.35), rgba(81,223,209,.14));
    color: var(--cyan-bright);
    box-shadow: inset 0 0 0 1px rgba(162,131,250,.4);
}
.cta-band {
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(118, 80, 226, .26), transparent 70%),
        radial-gradient(700px 340px at 50% 120%, rgba(254, 110, 140, .12), transparent 70%),
        var(--bg-band);
}

/* ---- shop / market / bag ---- */
.item-art          { background: radial-gradient(circle at 50% 35%, #2b3070, #10132e); }
.item-art--icon    { background: radial-gradient(circle at 50% 40%, #323782, #10132e); }
.item-body .nm     { font-weight: 700; font-size: 0.92rem; }
.pack-coins .c, .shop-balance .c { color: var(--gold); }
.pack-price { font-style: italic; font-weight: 800; }

/* Featured in the admin panel: the kit's gold MARKET tag, top right. */
.item-card.is-featured { position: relative; border-color: rgba(251, 216, 101, .6); }
.feat-badge {
    position: absolute; top: 8px; right: 8px; z-index: 3; isolation: isolate;
    font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 0.68rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 2px 9px;
}
.feat-badge::before {
    content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--slant)); border-radius: 4px;
    background: linear-gradient(180deg, #ffe98f, #e9bf45); box-shadow: inset 0 -2px 0 #8c6a1c;
}

/* Donate page: the admin's announcement bar, membership lengths, pack bonus. */
.donate-notice {
    margin: 18px 0 0; padding: 12px 16px; border-radius: 10px; text-align: center; font-weight: 600;
    color: #fff3cf; background: linear-gradient(90deg, rgba(253,171,78,.18), rgba(254,110,140,.16));
    border: 1px solid rgba(253,171,78,.45);
}
.plan-list { display: grid; gap: 8px; margin: 4px 0 16px; }
.plan-opt {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; cursor: pointer;
    background: #141840; border: 1px solid var(--border);
}
.plan-opt:hover { border-color: var(--violet-bright); }
.plan-opt:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan-deep); }
.plan-opt input { accent-color: var(--cyan); width: 16px; height: 16px; }
.plan-opt .po-len { font-weight: 700; }
.plan-opt .po-save { margin-left: 8px; font-size: .75rem; font-weight: 700; color: var(--lime); }
.plan-opt .po-label { margin-left: 8px; font-size: .72rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.plan-opt .po-price { font-style: italic; font-weight: 800; font-size: 1.1rem; }
.pack-bonus { font-size: .82rem; font-weight: 700; color: var(--lime); margin-top: -2px; }
.pack-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* Empty bag slots: the kit's dark square with teal corner ticks and a faint +. */
.item-card--empty {
    border-style: solid; border-color: var(--border-soft); box-shadow: none;
    background:
        linear-gradient(var(--cyan-deep), var(--cyan-deep)) 5px 5px / 10px 1.5px no-repeat,
        linear-gradient(var(--cyan-deep), var(--cyan-deep)) 5px 5px / 1.5px 10px no-repeat,
        linear-gradient(var(--cyan-deep), var(--cyan-deep)) right 5px bottom 5px / 10px 1.5px no-repeat,
        linear-gradient(var(--cyan-deep), var(--cyan-deep)) right 5px bottom 5px / 1.5px 10px no-repeat,
        #121534;
}
/* ⛔ The art panel inside an empty slot must stay see-through. The .item-art
   backdrop above would otherwise paint it too, and an empty slot then looks
   like a filled one still loading its preview. */
.item-card--empty .item-art--empty {
    background:
        linear-gradient(rgba(81,223,209,.32), rgba(81,223,209,.32)) center / 18px 1.5px no-repeat,
        linear-gradient(rgba(81,223,209,.32), rgba(81,223,209,.32)) center / 1.5px 18px no-repeat,
        transparent;
}
.item-card--empty .nm { color: var(--text-mute); }

/* ---- character / account ---- */
.stat-list .sl .v { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; }
.equip-slot .sl-value { font-size: 1.02rem; font-weight: 700; }
.bot-viewer { --viewer-bg: #151939; background: var(--viewer-bg); }
.xp-track { background: #0b0e24; box-shadow: inset 0 0 0 1px var(--border-soft); }
.xp-fill  { background: linear-gradient(90deg, var(--violet), var(--cyan)); }

/* ---- wiki ---- */
.wiki-card-icon {
    background: linear-gradient(160deg, rgba(118,80,226,.35), rgba(81,223,209,.12));
    border-color: rgba(162,131,250,.45); color: var(--cyan-bright);
}
.wiki-card:hover { border-color: var(--violet); }
.wiki-card-head h2, .wiki-article h2, .wiki-article h3 { font-style: italic; font-weight: 800; }
.wiki-article h1 { font-size: clamp(2.3rem, 4.4vw, 3rem); }
.wiki-side-group a.is-active { color: #fff; border-left-color: var(--violet-bright); background: rgba(118,80,226,.18); }
.wiki-side-group h3 { font-size: 0.84rem; letter-spacing: 0.18em; }
.wiki-article a { border-bottom-color: rgba(81,223,209,.35); }
.wiki-table th { font-size: 0.82rem; letter-spacing: 0.14em; }
.wiki-note { border-left-color: var(--violet-bright); }
.wiki-pager-link:hover { border-color: var(--violet); }

/* ---- admin ---- */
.admin-tile { border-top-color: var(--violet-bright); }
.admin-tile-value { font-style: italic; font-weight: 800; font-size: 2.1rem; }
.admin-card h2 { font-size: 0.86rem; letter-spacing: 0.18em; font-style: normal; }
.admin-row-fill { background: linear-gradient(90deg, var(--violet), var(--cyan)); }

/* Rows of slabs wrap as whole slabs; a label never breaks inside one. */
.tab-row { flex-wrap: wrap; }
.btn, .tab, .chip, .pager a, .chassis-chip, .order-badge { white-space: nowrap; }
/* Shop and market tiles are narrow: less side padding so "SIGN IN TO BUY"
   stays on one line down to a phone's two-column grid. */
.item-card .btn { padding-left: 10px; padding-right: 10px; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 860px) {               /* the base stylesheet's nav breakpoint */
    .nav-links { gap: 6px; }
    .nav-link { padding: 10px 16px; }
    /* The base hides the desktop underline here; the candy marker is a slab,
       and a full-width slab in the stacked menu is exactly the kit's tab. */
    .nav-link.is-active::after { display: block; }

    /* In the hamburger panel each menu is a collapsible section, not a
       floating panel: it pushes the links below it down, and a tap on the
       heading opens or closes it. */
    .nav-main, .nav-account { flex-direction: column; align-items: stretch; gap: 6px; }
    .nav-account { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
    .nav-drop-toggle { width: 100%; justify-content: space-between; text-align: left; }
    .nav-menu {
        position: static; display: none; min-width: 0;
        margin: 4px 0 6px 12px; padding: 4px;
        background: rgba(9, 11, 32, .45);
        border: 0; border-left: 2px solid var(--violet-deep); border-radius: 0 8px 8px 0;
        box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none;
    }
    .nav-drop--end .nav-menu { right: auto; }
    .nav-drop.is-open > .nav-menu { display: block; }
    .nav-menu::before { display: none; }
    .nav-balance { padding: 2px 0 4px; }
    .nav-user-name { max-width: none; }
}
@media (max-width: 560px) {
    /* The base shares one row between the hero buttons (flex: 1). Keep that,
       but trim the padding so each label fits its slab instead of wrapping. */
    .hero-actions .btn, .cta-actions .btn { padding-left: 14px; padding-right: 14px; }
    .tab  { padding: 7px 14px; font-size: 0.9rem; }
    /* three footer columns do not fit a phone: brand on top, links below */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .btn::before { transition: none; }
}

/* =====================================================================
   ACCOUNT SECURITY -- two-factor authentication (views/pages/account_security.php)
   The QR code is black on white whatever the theme: phones read a dark code
   on a light ground, and an inverted one fails on half the apps in use.
   ===================================================================== */
.tfa-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 860px; }
.tfa-card { display: grid; gap: 14px; min-width: 0; }
.tfa-card h2, .tfa-codes h2 { margin: 0; font-size: 1.5rem; }
.tfa-state { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--text-dim); }
.tfa-state strong { color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.tfa-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-mute); flex-shrink: 0; }
.tfa-state--on .tfa-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(98, 227, 154, .16); }
.tfa-state--on strong { color: var(--green); }
.tfa-low { color: var(--orange) !important; }
.tfa-points { margin: 0; padding-left: 20px; color: var(--text-dim); line-height: 1.6; font-size: .92rem; }
.tfa-start { max-width: 380px; }
.tfa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tfa-grid .card { display: grid; gap: 10px; align-content: start; }
.tfa-grid h3 { margin: 0; }
.tfa-danger { border-color: var(--pink-deep); color: var(--pink); }
.tfa-setup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.tfa-step { display: grid; gap: 10px; align-content: start; }
.tfa-step p { margin: 0; color: var(--text-dim); line-height: 1.55; }
.tfa-num {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--violet-glow); color: var(--violet-bright);
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.tfa-qr-box { background: #fff; border-radius: var(--radius-sm); padding: 10px; width: min(236px, 100%); }
.tfa-qr { display: block; width: 100%; height: auto; }
.tfa-secret code {
    display: inline-block; font-size: 1.02rem; letter-spacing: .08em; padding: 8px 12px; word-break: break-all;
    background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); color: var(--text);
}
.tfa-code-input { font-size: 1.25rem !important; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.tfa-codes { border: 1px solid var(--orange-deep); display: grid; gap: 12px; }
.tfa-codes p { margin: 0; color: var(--text-dim); line-height: 1.55; }
.tfa-code-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 36px;
    margin: 0; padding-left: 24px; color: var(--text-mute);
}
.tfa-code-list code { font-size: 1.08rem; letter-spacing: .06em; color: var(--text); }
.tfa-required { margin-bottom: 0; border-left-color: var(--orange); }
.tfa-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.tfa-summary .field-hint { margin: 6px 0 0; }
@media (max-width: 720px) {
    .tfa-grid, .tfa-setup { grid-template-columns: minmax(0, 1fr); }
    .tfa-code-list { grid-template-columns: minmax(0, 1fr); }
}