/*

$N64X — application design system.

Extracted from "N64X Retro Redesign.dc.html". The mockup carried every rule as
an inline style attribute; this file is the same visual language expressed once,
so a colour or a border weight is changed in one place rather than 200.

Loaded by index.html. player.html keeps retro.css + main.css for the emulator
chrome; the palettes are kept in sync deliberately.

*/


/*
|-----------------------------------------
| Tokens
|-----------------------------------------
*/

:root {
    --bg: #07060c;
    --panel: #0b0910;
    --panel-2: #14111d;
    --panel-3: #1a1626;
    --raise: #1e1a2b;
    --line: #2e2842;

    --ink: #f2f0ff;
    --dim: #9b93b8;
    --faint: #8a83a6;   /* 5.65:1 on --bg. Was #6a6383 at 3.58:1, failing AA for the 8-10px labels it carries. */
    --fainter: #3b3550;

    --magenta: #d600ff;
    --cyan: #29adff;
    --acid: #00e436;
    --amber: #ffa300;
    --red: #ff3b5c;

    --display: "karma-future", "Courier New", monospace;
    --title: "karma-suture", "karma-future", monospace;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --snap: 120ms steps(3, end);
    --shell: 1280px;
    --nav-h: 64px;
}

@font-face {
    font-family: "karma-future";
    src: url("../karma future.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "karma-suture";
    src: url("../karma suture.ttf") format("truetype");
    font-display: swap;
}


/*
|-----------------------------------------
| Reset
|-----------------------------------------
*/

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(214, 0, 255, 0.16) 0%, transparent 60%),
        var(--bg);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 13px;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--magenta); }
::selection { background: var(--magenta); color: var(--bg); }
button, input { font: inherit; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

[hidden] { display: none !important; }


/*
|-----------------------------------------
| CRT atmosphere
|-----------------------------------------
| Fixed, non-interactive, and deliberately static — animated scanlines read as
| cheap and make text hard to hold.
*/

.crt-lines,
.crt-vignette {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
}

.crt-lines {
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px);
    opacity: 0.6;
}

.crt-vignette {
    background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
}

.rainbow {
    height: 3px;
    background: linear-gradient(90deg,
        var(--magenta) 0 25%, var(--cyan) 25% 50%, var(--acid) 50% 75%, var(--amber) 75% 100%);
}

.dither-rule {
    height: 4px;
    background-image: repeating-conic-gradient(var(--line) 0% 25%, transparent 0% 50%);
    background-size: 4px 4px;
}


/*
|-----------------------------------------
| Navbar
|-----------------------------------------
*/

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: rgba(11, 9, 16, 0.94);
    border-bottom: 3px solid var(--line);
    backdrop-filter: blur(6px);
}

.nav__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
}

/* image-rendering is `auto`, not `pixelated`, and that is deliberate.
   The mark LOOKS like pixel art but is not on a uniform pixel grid — sweeping
   every cell size from 26.0 to 33.5px against every phase offset, the best
   achievable cell uniformity is 9.53% (genuine pixel art scores under 2%).
   `pixelated` is nearest-neighbour, so at 34px it samples the irregular blocks
   unevenly and the cartridge's connector pins come out ragged. Checked side by
   side before changing this. */
.nav__brand img { width: 34px; height: 34px; image-rendering: auto; }

.nav__brand span {
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: 2px 2px 0 var(--magenta);
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
}

.nav__link {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    background: transparent;
    border: 2px solid transparent;
    padding: 6px 12px;
    cursor: pointer;
    transition: color var(--snap), border-color var(--snap);
}

.nav__link:hover { color: var(--ink); border-color: var(--line); }

.nav__link[aria-current="true"] {
    color: var(--bg);
    background: var(--magenta);
    border-color: var(--magenta);
}

.nav__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 2px solid var(--line);
    background: var(--panel);
    white-space: nowrap;
}

.stat-pill__k { font-size: 9px; letter-spacing: 0.18em; color: var(--faint); }
.stat-pill__v { font-size: 12px; letter-spacing: 0.08em; color: var(--acid); }


/*
|-----------------------------------------
| Buttons
|-----------------------------------------
*/

.btn {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--acid);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--bg);
    padding: 9px 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--snap), transform var(--snap), box-shadow var(--snap);
}

.btn:hover { background: var(--cyan); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bg); }

.btn:disabled {
    background: var(--raise);
    color: var(--faint);
    border-color: var(--line);
    box-shadow: none;
    cursor: not-allowed;
}

.btn--big {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.07em;
    color: var(--bg);
    background: var(--magenta);
    box-shadow: 5px 5px 0 var(--bg);
    padding: 12px 30px;
}

.btn--big:hover { background: var(--cyan); }
.btn--big:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--bg); }

.btn--ghost {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.07em;
    color: var(--ink);
    background: transparent;
    border: 3px solid var(--line);
    box-shadow: none;
    padding: 12px 30px;
}

.btn--ghost:hover { border-color: var(--acid); color: var(--acid); background: transparent; }
.btn--ghost:active { transform: none; }

.btn--start {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.07em;
    background: var(--acid);
    padding: 12px 32px;
}


/*
|-----------------------------------------
| Shell
|-----------------------------------------
*/

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 48px) 24px 0;
}


/*
|-----------------------------------------
| Hero
|-----------------------------------------
*/

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
    align-items: center;
    padding: 24px 0 48px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--magenta);
    padding: 4px 10px;
    margin-bottom: 20px;
}

.badge__dot { width: 7px; height: 7px; background: var(--acid); }

.badge span:last-child {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--magenta);
    white-space: nowrap;
}

.hero__title {
    font-family: var(--display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.22;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: var(--ink);
    text-shadow: -2px 0 0 var(--magenta), 2px 0 0 var(--cyan), 6px 7px 0 rgba(0, 0, 0, 0.9);
}

.hero__lede {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 28px;
    max-width: 46ch;
}

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat {
    border: 3px solid var(--line);
    background: var(--panel);
    padding: 16px;
}

.stat--gold { border-color: var(--amber); }
.stat__k { font-size: 9px; letter-spacing: 0.2em; color: var(--faint); margin-bottom: 6px; }
.stat--gold .stat__k { color: var(--amber); }

.stat__v {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.stat__v--cyan { color: var(--cyan); }
.stat__v--acid { color: var(--acid); }
.stat__v--gold { color: var(--amber); }


/*
|-----------------------------------------
| Vault toolbar
|-----------------------------------------
*/

.vault-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

.vault-head__title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.35;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    color: var(--ink);
}

.search { position: relative; flex: 1 1 280px; min-width: 0; }

.search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--faint);
    font-size: 12px;
    pointer-events: none;
}

.search input {
    width: 100%;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink);
    background: var(--panel);
    border: 3px solid var(--line);
    padding: 11px 12px 11px 32px;
    outline: none;
    transition: border-color var(--snap), background var(--snap);
}

.search input:focus { border-color: var(--magenta); background: var(--panel-2); }
.search input::placeholder { color: var(--faint); }

.vault-head__count {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acid);
    margin: 0 0 0 auto;
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chips--series { margin-bottom: 32px; }

.chip {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 12px;
    cursor: pointer;
    border: 2px solid var(--line);
    background: transparent;
    color: var(--dim);
    transition: color var(--snap), border-color var(--snap), background var(--snap);
}

.chips--series .chip { font-size: 10px; letter-spacing: 0.13em; padding: 5px 11px; }
.chip:hover { color: var(--ink); border-color: var(--faint); }
.chip[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }


/*
|-----------------------------------------
| Cartridge grid
|-----------------------------------------
*/

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 22px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.grid > li { list-style: none; perspective: 900px; }

.cart {
    position: relative;
    width: 100%;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(160deg, var(--panel-3) 0%, var(--panel) 60%);
    border: 3px solid var(--tier, var(--line));
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    padding: 8px;
    overflow: hidden;
    transition: transform var(--snap), box-shadow var(--snap);
}

.cart:hover,
.cart:focus-visible {
    transform: translateY(-8px) rotateX(7deg) rotateY(-7deg) scale(1.03);
    box-shadow: 10px 14px 0 rgba(0, 0, 0, 0.9), 0 0 34px var(--glow, transparent);
}

/* Holographic sweep, the one continuously animated element on a card. */
.cart__holo {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 44%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.14) 45%,
                rgba(41, 173, 255, 0.20) 55%, transparent 100%);
    mix-blend-mode: screen;
    animation: n64x-holo 5200ms linear infinite;
}

.cart__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px 7px;
}

.cart__tier { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tier); }
.cart__serial { font-size: 9px; letter-spacing: 0.14em; color: var(--faint); }

.cart__art {
    position: relative;
    height: 150px;
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.045) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px,
        radial-gradient(circle at 50% 42%, var(--glow) 0%, transparent 62%),
        var(--bg);
    border: 2px solid var(--line);
    overflow: hidden;
}

/* One element paints the whole sprite via its box-shadow list. */
.cart__sprite {
    position: absolute;
    left: calc(50% - 45px);
    top: calc(50% - 45px);
    width: 13px;
    height: 13px;
}

.cart__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

.cart__hash {
    position: absolute;
    bottom: 5px;
    right: 6px;
    font-size: 8px;
    letter-spacing: 0.16em;
    color: var(--faint);
    z-index: 1;
}

.cart__name {
    padding: 9px 2px 6px;
    border-bottom: 2px solid var(--line);
    min-height: 56px;
    font-family: var(--title);
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    word-break: break-word;
}

.cart__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 2px 2px;
}

.cart__row--sub { padding: 3px 2px 0; }

.cart__series {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--series);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart__own { font-size: 9px; letter-spacing: 0.1em; flex: 0 0 auto; color: var(--faint); }
.cart__own--mine { color: var(--acid); }
.cart__play { font-size: 9px; letter-spacing: 0.14em; color: var(--magenta); }

.empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 16px;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.empty b { color: var(--amber); }


/*
|-----------------------------------------
| Test ROM disclosure
|-----------------------------------------
*/

.disclose { margin: 40px 0 0; }

.disclose__toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
    background: var(--panel);
    border: 2px solid var(--line);
    padding: 12px 16px;
    cursor: pointer;
    transition: color var(--snap), border-color var(--snap);
}

.disclose__toggle[aria-expanded="true"] { color: var(--magenta); border-color: var(--magenta); }

.disclose__panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 16px 0 0;
    margin: 0;
    list-style: none;
}

.testrom {
    width: 100%;
    text-align: left;
    border: 2px dashed var(--line);
    background: var(--panel);
    padding: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color var(--snap);
}

.testrom:hover { border-color: var(--faint); }
.testrom span:first-child { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.testrom span:last-child { font-size: 8px; letter-spacing: 0.16em; color: var(--faint); }


/*
|-----------------------------------------
| Footer
|-----------------------------------------
*/

.footer {
    padding: 56px 0 96px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
}

.footer .dither-rule { margin-bottom: 28px; }
.footer a {
    color: var(--dim);
    /* Was an 11px-tall hit area. Pad it out so it is tappable. */
    display: inline-block;
    padding: 8px 4px;
}


/*
|-----------------------------------------
| Overlays: card detail, boot, player
|-----------------------------------------
*/

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(4, 3, 8, 0.94);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 84px 24px 40px;
    overflow: auto;
}

.card-modal {
    width: min(900px, 100%);
    background: var(--panel);
    border: 3px solid var(--tier, var(--line));
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.9);
}

.card-modal__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 2px solid var(--line);
}

.card-modal__tier { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tier); }

.icon-btn {
    font-size: 14px;
    line-height: 1;
    color: var(--faint);
    background: none;
    border: 0;
    cursor: pointer;
    /* Sized as a real hit area — at 0 4px this rendered ~16x17, well under any
       usable touch target, and it is the only way to close the card. */
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--snap);
}

.icon-btn:hover { color: var(--red); }

.card-modal__body {
    display: grid;
    grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
    gap: 24px;
    padding: 20px;
}

.card-modal__art {
    border: 3px solid var(--tier);
    background: linear-gradient(160deg, var(--panel-3), var(--panel));
    padding: 8px;
    position: relative;
    overflow: hidden;
    align-self: start;
}

.card-modal__plate {
    position: relative;
    height: 190px;
    background: radial-gradient(circle at 50% 42%, var(--glow) 0%, transparent 62%), var(--bg);
    border: 2px solid var(--line);
    overflow: hidden;
}

.card-modal__sprite { position: absolute; left: calc(50% - 52px); top: calc(50% - 52px); width: 15px; height: 15px; }

.card-modal__name {
    font-family: var(--title);
    font-size: 15px;
    text-transform: uppercase;
    color: var(--ink);
    padding: 10px 2px 4px;
    line-height: 1.15;
}

.card-modal__hash { font-size: 9px; letter-spacing: 0.14em; color: var(--faint); padding: 0 2px 2px; }

.card-modal__h {
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    line-height: 1.35;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--ink);
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
}

.card-modal__sub {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 20px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.metric { border: 2px solid var(--line); padding: 10px 12px; }
.metric__k { font-size: 8px; letter-spacing: 0.18em; color: var(--faint); margin-bottom: 4px; }
.metric__v { font-family: var(--display); font-size: 19px; line-height: 1.4; color: var(--ink); }

.traits { border: 2px solid var(--line); margin-bottom: 22px; }

.traits__head {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 8px 12px;
    border-bottom: 2px solid var(--line);
    background: var(--bg);
}

.trait {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--raise);
}

.trait span:first-child { color: var(--faint); }
.trait span:last-child { color: var(--ink); }

.card-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.hint {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 16px 0 0;
}


/*
|-----------------------------------------
| Boot screen
|-----------------------------------------
*/

.boot {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--bg);
    background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.boot__panel { width: min(560px, 100%); text-align: center; }

.link-back {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
    background: none;
    border: 0;
    cursor: pointer;
    margin-bottom: 36px;
    transition: color var(--snap);
}

.link-back:hover { color: var(--magenta); }

.boot__cart {
    width: 132px;
    margin: 0 auto 28px;
    border: 3px solid var(--line);
    background: var(--panel);
    padding: 6px;
    overflow: hidden;
}

.boot__notch { height: 6px; background: var(--raise); margin-bottom: 6px; }

.boot__plate {
    position: relative;
    height: 96px;
    background: radial-gradient(circle at 50% 45%, var(--glow) 0%, transparent 65%), var(--bg);
    border: 2px solid var(--tier);
    overflow: hidden;
    animation: n64x-slot 420ms steps(6, end) both;
}

.boot__sprite { position: absolute; left: calc(50% - 31px); top: calc(50% - 31px); width: 9px; height: 9px; }

.boot__meta { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tier); margin-bottom: 8px; }

.boot__title {
    font-family: var(--display);
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 18px;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.9);
}

.boot__status {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 12px;
    min-height: 1.4em;
}

.boot__track {
    height: 14px;
    background: var(--raise);
    border: 2px solid var(--line);
    margin-bottom: 36px;
    overflow: hidden;
}

.boot__bar { height: 100%; width: 0; background: var(--magenta); transition: width 200ms steps(8, end); }

.boot__start {
    font-family: var(--display);
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acid);
    background: none;
    border: 0;
    cursor: pointer;
    animation: n64x-blink 1s steps(1, end) infinite;
}

.boot__start:hover { color: var(--ink); }


/*
|-----------------------------------------
| Player
|-----------------------------------------
*/

.player {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.player__bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(11, 9, 16, 0.96);
    border-bottom: 3px solid var(--line);
}

.player__bar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.player__name {
    font-family: var(--title);
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 34ch;
}

.player__tier {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--tier);
    padding: 4px 8px;
    flex: 0 0 auto;
}

.player__serial { font-size: 9px; letter-spacing: 0.14em; color: var(--faint); flex: 0 0 auto; }
.player__tools { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.tool {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    background: transparent;
    border: 2px solid var(--line);
    padding: 7px 11px;
    cursor: pointer;
    transition: color var(--snap), border-color var(--snap);
}

.tool:hover { color: var(--ink); border-color: var(--faint); }
.tool--on { color: var(--acid); border-color: var(--acid); }

.player__stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px 64px;
    gap: 22px;
}

/* Console deck */

.deck {
    width: min(660px, 100%);
    background: linear-gradient(170deg, #221c33 0%, var(--panel-2) 55%, var(--panel) 100%);
    border: 3px solid var(--line);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.85);
    padding: 16px 20px 22px;
}

.deck__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.deck__power { display: flex; gap: 8px; align-items: center; }
.deck__led { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 8px var(--red); }
.deck__power span:last-child,
.deck__rev { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }

.deck__shoulders { display: flex; justify-content: space-between; margin-bottom: -3px; }

.pad {
    background: var(--raise);
    border: 3px solid var(--line);
    color: var(--dim);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background var(--snap), color var(--snap);
}

.pad:hover { background: var(--line); color: var(--ink); }
.pad.is-down { background: var(--magenta); color: var(--bg); }

.pad--shoulder { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; border-bottom: none; padding: 7px 34px; }
.pad--shoulder:hover { color: var(--cyan); border-color: var(--cyan); }

.deck__screen { border: 3px solid var(--line); background: var(--bg); padding: 14px; }

.deck__frame {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bg);
    overflow: hidden;
    border: 1px solid var(--raise);
}

.deck__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/*
 Kept deliberately light. At the mockup's weight this overlay sits on top of
 actual gameplay rather than a static sprite, and washes the picture out — the
 CRT effect must not cost legibility in the one place the pixels matter.
*/
.deck__scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 68%, rgba(0, 0, 0, 0.32) 100%);
}

.deck__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}

.deck__meta b { color: var(--acid); font-weight: 400; }

.deck__controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding-top: 22px;
}

.dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); justify-content: start; }
.dpad .pad { display: flex; align-items: center; justify-content: center; font-size: 15px; }
.dpad__hub { display: flex; align-items: center; justify-content: center; background: var(--panel-2); border: 3px solid var(--line); color: var(--fainter); font-size: 10px; }

.deck__mid { display: flex; flex-direction: column; gap: 8px; align-items: center; }

.pad--pill {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 18px;
    min-width: 96px;
    text-align: center;
}

.pad--pill.is-down { background: var(--acid); color: var(--bg); }

.deck__face { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

.pad--round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-family: var(--display);
    font-size: 20px;
}

.pad--b { border-color: var(--cyan); color: var(--cyan); margin-top: 26px; }
.pad--b.is-down { background: var(--cyan); color: var(--bg); }
.pad--a { border-color: var(--magenta); color: var(--magenta); }
.pad--a.is-down { background: var(--magenta); color: var(--bg); }

.legend {
    width: min(660px, 100%);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
}

.legend__key {
    border: 2px solid var(--line);
    background: var(--panel);
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legend__key b { font-family: var(--display); font-size: 14px; letter-spacing: 0.06em; color: var(--ink); font-weight: 400; }
.legend__key span { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }


/*
|-----------------------------------------
| Wallet + earnings
|-----------------------------------------
*/

.wallet-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 2px solid var(--acid);
    background: var(--panel);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--acid);
    cursor: pointer;
    white-space: nowrap;
}

.earn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 2px solid var(--line);
    background: var(--panel);
    white-space: nowrap;
}

.earn__k { font-size: 9px; letter-spacing: 0.18em; color: var(--faint); }
.earn__v { font-size: 12px; letter-spacing: 0.08em; color: var(--amber); font-variant-numeric: tabular-nums; }

/*
 The concept doc promises this balance is labelled unverified in the product,
 not only in the docs. Browser-reported play time cannot be trusted, so the
 number must never look like a claimable balance.
*/
.earn__tag {
    font-size: 8px;
    letter-spacing: 0.16em;
    color: var(--bg);
    background: var(--faint);
    padding: 2px 5px;
}

.notice {
    border: 2px solid var(--amber);
    background: rgba(255, 163, 0, 0.07);
    padding: 10px 12px;
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
}

.notice--info { border-color: var(--cyan); background: rgba(41, 173, 255, 0.07); color: var(--cyan); }

.sheet {
    width: min(560px, 100%);
    background: var(--panel);
    border: 3px solid var(--line);
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.9);
}

.sheet__body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.sheet__h {
    font-family: var(--display);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    color: var(--ink);
}

.wallet-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 2px solid var(--line);
    background: var(--panel-2);
    color: var(--ink);
    padding: 14px 16px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: border-color var(--snap);
}

.wallet-opt:hover { border-color: var(--magenta); }
.wallet-opt small { margin-left: auto; color: var(--faint); font-size: 9px; letter-spacing: 0.14em; }

.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.kv span:first-child { color: var(--faint); }
.kv span:last-child { color: var(--ink); }


/*
|-----------------------------------------
| 404
|-----------------------------------------
*/

.nf {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 64px;
}

.nf__code {
    font-family: var(--display);
    font-size: clamp(4rem, 15vw, 9rem);
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-shadow: -3px 0 0 var(--red), 3px 0 0 var(--cyan), 10px 10px 0 rgba(0, 0, 0, 0.9);
    animation: n64x-glitch 1.6s steps(2, end) infinite;
}

.nf__bar {
    width: min(300px, 80%);
    height: 14px;
    margin: 26px 0 24px;
    background: repeating-linear-gradient(90deg, var(--red) 0 10px, var(--raise) 10px 20px);
}


/*
|-----------------------------------------
| Motion
|-----------------------------------------
*/

@keyframes n64x-holo  { 0% { transform: translateX(-60%); } 100% { transform: translateX(160%); } }
@keyframes n64x-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes n64x-slot  { 0% { transform: translateY(-46px); } 100% { transform: translateY(0); } }
@keyframes n64x-glitch {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, -1px); }
    80% { transform: translate(2px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    /* A stopped animation must never park an element at opacity 0. */
    .boot__start, .cart__holo { animation: none !important; opacity: 1 !important; }
    .cart:hover, .cart:focus-visible { transform: none; }
    .crt-lines { display: none; }
}


/*
|-----------------------------------------
| Responsive
|-----------------------------------------
*/

@media (max-width: 1000px) {
    .hero { grid-template-columns: 1fr; gap: 28px; }
    .card-modal__body { grid-template-columns: 1fr; }
    .card-modal__art { max-width: 260px; }
}

/* The nav's right-hand cluster needs room before the links do. Dropping both at
   the same breakpoint let the cluster run past the viewport at ~768. */
@media (max-width: 880px) {
    .stat-pill, .earn { display: none; }
}

@media (max-width: 820px) {
    /*
     The nav used to be hidden outright at this width. That was survivable when
     every section lived in one long scroll -- you could still reach anything by
     scrolling. Each section is its own page now, so hiding the nav strands a
     phone on the home page with no way to reach Games, Mint, Profile, Explore
     or Collectors at all. Hiding it now would not be a style choice; it would
     remove most of the site on a phone.

     A second row rather than a hamburger: six short labels fit a swipe strip,
     and the strip is the pattern this page already uses for the filter chips,
     so there is no new interaction to learn and no JS to go wrong. --nav-h is
     what .shell's top padding is computed from (n64x.css:317, :1422), so
     raising it here keeps content clear of the taller header automatically.

     The right-hand cluster is already thinned for this width: the earnings
     pill drops at 880px, leaving the brand and Connect on the first row.
    */
    :root { --nav-h: 106px; }

    .nav__inner {
        height: var(--nav-h);
        flex-wrap: wrap;
        align-content: center;
        row-gap: 8px;
        padding: 0 16px;
    }

    .nav__links {
        display: flex;
        order: 3;
        flex: 1 0 100%;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Bleed to the viewport edge so the next tab peeks, which is the only
           scroll affordance left once the scrollbar is hidden -- same trick,
           and the same reason, as .chips below. */
        margin: 0 -16px;
        padding: 0 16px 2px;
    }
    .nav__links::-webkit-scrollbar { display: none; }
    .nav__link { flex: 0 0 auto; }

    /*
     Touch targets, at 820 rather than 760 on purpose: a 768px tablet in
     portrait is a touch device and was falling through to the dense desktop
     treatment, leaving these controls about 12px tall.

     Measured at 390px, the controls a thumb must hit were: the marketplace link
     on every pack card at 166x11px, Explore's owner links at 54x11px, the
     leaderboard's owner links at 72x14px, and the filter chips at 119x27px
     (series chips 99x25px). WCAG 2.5.8 asks 24px as a floor.

     min-height reserves real layout space rather than overflowing an inline
     box, so hit areas grow without colliding. Desktop (>=821px) is deliberately
     dense and measures identically before and after.
    */
    .pack-card__link,
    .pack-card__links a,
    .leaderboard a,
    .profile__markets a,
    .pack-card__rows dd a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    /* 27px -> 33px without moving the label. Both selectors are needed:
       `.chips--series .chip` (n64x.css:481) sets its own shorthand padding and
       outranks a bare `.chip`, which is why the series row stayed 25px tall
       when only `.chip` was bumped. */
    .chip,
    .chips--series .chip { padding-top: 9px; padding-bottom: 9px; }
}

@media (max-width: 760px) {

    .shell { padding: calc(var(--nav-h) + 24px) 16px 0; }
    .nav__inner { padding: 0 16px; gap: 12px; }
    .overlay { padding: 76px 12px 24px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .cart__art { height: 116px; }
    .cart__name { font-size: 13px; min-height: 44px; }

    /* 19 chips wrap to six rows on a phone and bury the grid. Swipe instead. */
    .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 6px;
        margin-right: -16px;
    }
    .chips::-webkit-scrollbar { display: none; }
    .chip { flex: 0 0 auto; }

    .player__stage { padding: 16px 12px 40px; }
    .deck { padding: 12px 12px 16px; }
    .deck__controls { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
    .deck__face { justify-content: center; }
    .legend { display: none; }
}


/*
|-----------------------------------------
| Cabinet settings panel
|-----------------------------------------
|
| player.html's own menu bar is hidden while embedded, so anything it used to
| offer has to live here or become unreachable. Save export especially: losing
| access to save data is not a cosmetic regression.
*/

.panel {
    width: min(660px, 100%);
    background: var(--panel);
    border: 3px solid var(--line);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.8);
}

.panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 2px solid var(--line);
    background: var(--panel-2);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
}

.panel__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /*
     The controls reference roughly doubled this panel's height. Cap it against
     the viewport and scroll inside, so the panel never runs off the bottom of a
     laptop screen and Export saves stays reachable.
    */
    max-height: min(68vh, 620px);
    overflow-y: auto;
}

.panel__split { height: 2px; background: var(--line); }

/* ---------------- keyboard reference ---------------- */

kbd {
    display: inline-block;
    min-width: 22px;
    padding: 3px 6px;
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1;
    text-align: center;
    color: var(--ink);
    background: var(--raise);
    border: 2px solid var(--line);
    box-shadow: 2px 2px 0 var(--bg);
}

.keymap {
    width: 100%;
    border-collapse: collapse;
}

.keymap th {
    padding: 0 0 6px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: var(--faint);
}

.keymap td {
    padding: 6px 0;
    border-top: 2px solid var(--line);
    vertical-align: middle;
}

/* The button name column. Narrow and quiet so the keycaps carry the eye. */
.keymap td:first-child {
    padding-right: 12px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}

.keymap td + td { font-size: 10px; color: var(--faint); }
.keymap kbd + kbd { margin-left: 3px; }

.panel__row { display: flex; gap: 8px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }

.field--row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.field__k {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.field__k b { color: var(--acid); font-weight: 400; font-variant-numeric: tabular-nums; }
.field__k em { color: var(--faint); font-style: normal; letter-spacing: 0.1em; }

.field input[type="range"] { width: 100%; accent-color: var(--magenta); }

.field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--magenta);
    flex: 0 0 auto;
}

/* ------------------------------------------------------------- pack panel */
/*
 The mint surface. Sits between the hero stats and the vault grid so a visitor
 meets the product before the catalogue, and both #mint and #collection scroll
 here — there is no per-cartridge shelf to route to while packs are sealed.
*/

.pack {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: center;
    border: 3px solid var(--line);
    background:
        linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    padding: 28px;
    margin-bottom: 40px;
}

.pack__art {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--line);
    background: var(--bg);
    padding: 14px;
    /* The sealed art is the only image on the page that is deliberately
       unrevealing, so give it a glow rather than a tier colour. */
    box-shadow: inset 0 0 60px rgba(191, 9, 204, 0.18);
}

.pack__art img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.pack__title {
    font-family: var(--display);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.pack__copy {
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.06em;
    color: var(--dim);
    margin: 0 0 18px;
    max-width: 60ch;
}

.pack__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pack__meta .stat { padding: 12px; }

#packHint { margin-top: 12px; }
#packHint a { color: var(--cyan); }

@media (max-width: 720px) {
    .pack {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
    }
    .pack__art { max-width: 200px; margin: 0 auto; }
    .pack__title { font-size: 1.3rem; }
}

/* X / social link in the top nav. Styled as a nav link so it inherits the
   existing hover and focus treatment rather than inventing a second one. */
.nav__social {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
}

/* ---------------------------------------------------------------- profile */
/*
 The holder's shelf.

 Every card is driven by one custom property, --tier, set per card in
 renderProfile(). Border, tier chip and glow all read from it, so a card can
 never end up half-coloured, and adding a tier needs no CSS change.
*/

.profile { margin-bottom: 44px; }

.profile__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.profile__title {
    font-family: var(--display);
    font-size: 1.5rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
}

.profile__meta {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0;
}

.profile__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Wide enough that the card art is actually legible — the previous 150px
       rendered a 1000x1000 card at thumbnail size and told you nothing. */
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 18px;
}

.pack-card {
    --tier: #4a4363;
    border: 3px solid var(--tier);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tier) 7%, var(--panel-2)) 0%, var(--panel) 62%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

.pack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--tier), 0 10px 0 -4px color-mix(in srgb, var(--tier) 45%, transparent);
}

/* Sealed packs get no tier colour, because they have no tier yet. Saying so
   with a dashed edge is more honest than picking a placeholder colour. */
.pack-card--sealed { border-style: dashed; }

.pack-card__art {
    background: var(--bg);
    border-bottom: 3px solid var(--tier);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pack-card__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.pack-card__body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pack-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pack-card__tier {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--tier);
    padding: 4px 8px;
}

.pack-card--sealed .pack-card__tier {
    color: var(--tier);
    background: transparent;
    border: 2px solid var(--tier);
    padding: 2px 6px;
}

.pack-card__pack {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--faint);
}

.pack-card__title {
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: .02em;
    margin: 0;
    color: var(--fg, #fff);
}

.pack-card__rows {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    margin: 0;
    font-size: 10px;
    letter-spacing: .1em;
}

.pack-card__rows dt {
    text-transform: uppercase;
    color: var(--faint);
}

.pack-card__rows dd {
    margin: 0;
    color: var(--dim);
    text-align: right;
}

.pack-card__link {
    margin-top: auto;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tier);
    filter: brightness(1.5);
}

.profile__empty {
    grid-column: 1 / -1;
    border: 3px dashed var(--line);
    padding: 34px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--dim);
}

@media (max-width: 560px) {
    .profile__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Sell/trade routes. Holders could already list on Magic Eden and Tensor — both
   index this collection — they just had no link. */
.profile__markets {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--faint);
    margin: 6px 0 0;
    flex-basis: 100%;
}
.profile__markets a { color: var(--cyan); }

.pack-card__links {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pack-card__links .pack-card__link { margin-top: 0; }

/* Open 1 / 5 / 10. Each is a separate transaction and a separate wallet
   approval — two mintV1 instructions in one transaction trip the bot tax — so
   this is quantity, never a discount. */
.pack__qty {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.pack__qty .qty {
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: .08em;
    min-width: 56px;
    padding: 9px 0;
    color: var(--dim);
    background: var(--panel);
    border: 3px solid var(--line);
    cursor: pointer;
}
.pack__qty .qty:hover { border-color: var(--cyan); color: var(--cyan); }
.pack__qty .qty--on {
    background: var(--acid);
    border-color: var(--acid);
    color: var(--bg);
}

/*
|-----------------------------------------
| Collection explorer
|-----------------------------------------
| The buy side of the marketplace (#explore). Deliberately built almost
| entirely out of .profile / .pack-card / .stat / .chip — the same tile that
| already draws "My packs" is what draws every OTHER holder's pack here, so a
| card reads as the same object in both places rather than a second design.
*/

/* Six-plus tiles (minted/total, holders, one per tier) instead of the hero's
   fixed 2-up layout, so a tile never stretches to fill unused width. */
.explore__stats {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    margin-bottom: 20px;
}

.explore__recent-head {
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 10px;
}

/* A horizontal strip, not another grid — "recent" is meant to be skimmed in
   mint order, and a wrapping grid would reorder itself at every breakpoint. */
.explore__recent-strip {
    list-style: none;
    margin: 0 0 32px;
    padding: 2px 2px 10px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
}
.explore__recent-strip > li { flex: 0 0 200px; }

/* The connected wallet's own cards, picked out of a grid that is otherwise
   everyone else's. Outline rather than a border-color swap, because a card's
   --tier border is already load-bearing (it is the only thing distinguishing
   LEGENDARY from COMMON) and must not be overwritten to say "mine" instead. */
.explore-card--mine { outline: 3px solid var(--acid); outline-offset: 3px; }

.explore-card__mine-tag {
    font-family: var(--display);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acid);
    border: 2px solid var(--acid);
    padding: 3px 6px;
    align-self: flex-start;
}
.pack__qty .qty:disabled { opacity: .35; cursor: not-allowed; }

/*
|-----------------------------------------
| User profile page (#profile)
|-----------------------------------------
| Five sections, each labelled by whose authority the numbers in it carry --
| CHAIN (Metaplex/Solana, read-only RPC) or THIS BROWSER (localStorage, never
| sent anywhere). .profile-authority is the visual version of that label, in
| the same spirit as the earn ticker's own UNVERIFIED tag (.earn__tag above):
| a browser-only number never gets to LOOK like a chain-verified one.
*/

.profile-page { margin-bottom: 44px; }

.profile-page__head { margin-bottom: 22px; }

.profile-page__title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: var(--ink);
}

.profile-page__sub {
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--faint);
    margin: 0;
    max-width: 62ch;
}

.profile-section {
    border: 3px solid var(--line);
    background: var(--panel);
    padding: 20px 22px 22px;
    margin-bottom: 20px;
}

.profile-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.profile-section__title {
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    color: var(--ink);
}

.profile-section__note {
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: 0.02em;
    color: var(--dim);
    margin: 0 0 16px;
    max-width: 68ch;
}

/* CHAIN: read straight off Solana, provably real. THIS BROWSER: this
   machine's own say-so, never sent anywhere and never ranked. */
.profile-authority {
    font-family: var(--display);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 8px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.profile-authority--chain { color: var(--acid); border: 2px solid var(--acid); }
.profile-authority--local { color: var(--bg); background: var(--faint); }

.identity-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Wide enough for nine tiles (packs, sealed, four tiers, score, rank) without
   any of them stretching to fill unused width — same rule .explore__stats
   already follows for its own six. */
.stats--wide {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: 18px;
}

.playrecord__list, .savedata__list {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

.playrecord__row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 4px 20px;
    align-items: baseline;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
}
.playrecord__row:last-child { border-bottom: none; }

.savedata__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 20px;
    align-items: baseline;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
}
.savedata__row:last-child { border-bottom: none; }

.playrecord__title, .savedata__title { color: var(--ink); letter-spacing: 0.02em; }

.playrecord__stat {
    color: var(--dim);
    text-align: right;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.savedata__size {
    color: var(--cyan);
    text-align: right;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .playrecord__row, .savedata__row { grid-template-columns: 1fr; gap: 2px; padding-bottom: 14px; }
    .playrecord__stat, .savedata__size { text-align: left; }
}

/* ------------------------------------------------------------- leaderboard */
/*
 The Collectors board. Ranks ownership, which the chain proves; never play,
 which a browser cannot prove. Tier chips reuse the same --tier custom property
 the pack cards use, so a LEGENDARY is the same gold everywhere on the site.
*/

.leaderboard__honesty { margin-bottom: 18px; }

.leaderboard__wrap { overflow-x: auto; border: 3px solid var(--line); background: var(--panel); }

.leaderboard {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    letter-spacing: .06em;
}

.leaderboard th {
    text-align: left;
    font-family: var(--display);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 12px 14px;
    border-bottom: 3px solid var(--line);
    white-space: nowrap;
}

.leaderboard td {
    padding: 11px 14px;
    color: var(--dim);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.leaderboard tr:last-child td { border-bottom: 0; }
.leaderboard .num { text-align: right; font-family: var(--mono); }
.leaderboard a { color: var(--cyan); font-family: var(--mono); }

/* Your own row, so a holder can find themselves without reading every line. */
.leaderboard__you td {
    background: color-mix(in srgb, var(--acid) 10%, transparent);
    color: var(--fg, #fff);
}
.leaderboard__you a { color: var(--acid); }

.leaderboard__gap td {
    text-align: center;
    color: var(--faint);
    letter-spacing: .4em;
    padding: 4px;
}

.leaderboard__empty {
    text-align: center;
    padding: 26px;
    color: var(--dim);
}

.lb-chip {
    --tier: var(--line);
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    padding: 2px 6px;
    margin-right: 4px;
    color: var(--bg);
    background: var(--tier);
}
.lb-chip--sealed {
    color: var(--faint);
    background: transparent;
    border: 1px solid var(--line);
}