@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Thai:wght@500;600;700&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ==================================================================
   MAI SHOP — Monochrome Editorial Theme
   Signature: product photography rests in grayscale and blooms into
   full colour on hover/focus — the shop's black & white identity
   opening onto the colour of the game itself.
   The single exception is --accent (gold), reserved exclusively for
   the player's points balance so the number always reads first.
   ================================================================== */

:root {
    color-scheme: light;

    --paper: #faf9f6;
    --paper-2: #f1efe9;
    --surface: #ffffff;
    --surface-2: #f4f2ec;

    --ink: #14130f;
    --ink-soft: #3c3a34;
    --ink-dim: #726e64;
    --ink-faint: #a29d90;

    --line: rgba(20, 19, 15, 0.12);
    --line-strong: rgba(20, 19, 15, 0.32);
    --line-hairline: rgba(20, 19, 15, 0.08);

    --shadow-color: 20, 19, 15;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.04);
    --shadow-md: 0 10px 28px rgba(var(--shadow-color), 0.08);
    --shadow-lg: 0 24px 60px rgba(var(--shadow-color), 0.14);

    --overlay: rgba(15, 14, 11, 0.6);

    /* Accent — used ONLY for the points balance (see "Points" sections below) */
    --accent: #9a6f00;
    --accent-strong: #7a5800;
    --accent-soft: rgba(154, 111, 0, 0.10);
    --accent-line: rgba(154, 111, 0, 0.38);
    --accent-glow: rgba(154, 111, 0, 0.22);

    --font-display: 'Noto Serif Thai', 'Sarabun', serif;
    --font-body: 'Sarabun', sans-serif;

    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 2px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.45s;

    /* ==============================================================
       TYPE SCALE — major third (1.2), fluid between 320px and 1240px.
       Before this, the stylesheet carried 38 unrelated font sizes, which
       is why the page never quite settled: every element was a one-off
       judgement instead of a note in a shared scale. New work uses these
       steps; the old ad-hoc values are retrofitted where they show most.
       ============================================================== */
    --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.76rem);
    --step--1: clamp(0.83rem, 0.80rem + 0.17vw, 0.95rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.24vw, 1.19rem);
    --step-1:  clamp(1.20rem, 1.14rem + 0.33vw, 1.48rem);
    --step-2:  clamp(1.44rem, 1.35rem + 0.45vw, 1.86rem);
    --step-3:  clamp(1.73rem, 1.60rem + 0.62vw, 2.33rem);
    --step-4:  clamp(2.07rem, 1.89rem + 0.85vw, 2.91rem);
    --step-5:  clamp(2.49rem, 2.24rem + 1.16vw, 3.63rem);
    --step-6:  clamp(2.99rem, 2.64rem + 1.58vw, 4.54rem);

    /* SPACING SCALE — same idea, applied to rhythm rather than size */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;
    --section-gap: clamp(4.5rem, 9vw, 8rem);

    /* Measure — caps line length so long Thai paragraphs stay readable */
    --measure: 68ch;
}

[data-theme="dark"] {
    color-scheme: dark;

    --paper: #0a0a08;
    --paper-2: #131210;
    --surface: #121110;
    --surface-2: #18170f;

    --ink: #f6f4ee;
    --ink-soft: #d8d5cb;
    --ink-dim: #938e81;
    --ink-faint: #57534a;

    --line: rgba(246, 244, 238, 0.14);
    --line-strong: rgba(246, 244, 238, 0.32);
    --line-hairline: rgba(246, 244, 238, 0.09);

    --shadow-color: 0, 0, 0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);

    --overlay: rgba(0, 0, 0, 0.72);

    --accent: #f0c14b;
    --accent-strong: #ffd977;
    --accent-soft: rgba(240, 193, 75, 0.12);
    --accent-line: rgba(240, 193, 75, 0.42);
    --accent-glow: rgba(240, 193, 75, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Smooth, consistent colour transition across every themed surface when the
   Light/Dark toggle fires — previously only body/nav/card had this, so most
   of the page snapped instantly and the switch felt broken. */
html { transition: background-color var(--dur) var(--ease); }
body, .glass-nav, .glass-card, .glass-item, .modal-content, .modal-overlay,
.points-box, .qr-box, hr, .close-btn, .theme-toggle, .btn-ghost, .btn-gold,
.btn-blue, .btn-emerald, .btn-danger, input, .toast, .stat-value, .stat-label,
.cmd-badge, .product-price, .field-hint, .field-warning, .site-footer,
h1, h2, h2::before, h3, h4, p, .logo::before, .accent-text::after {
    transition-property: background-color, color, border-color, box-shadow, opacity;
    transition-duration: var(--dur);
    transition-timing-function: var(--ease);
}

* { box-sizing: border-box; }

/* display:inline-flex on components must not defeat the hidden attribute */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: 0.1px;
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

p { color: var(--ink-soft); line-height: 1.7; }

a { color: inherit; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============ Nav ============ */
.glass-nav {
    background: rgba(250, 249, 246, 0.85);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid var(--line);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 500;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
[data-theme="dark"] .glass-nav { background: rgba(10, 10, 8, 0.82); }

/* logo pushes everything else to the right; .nav-right stays visible at every width */
.glass-nav .logo { margin-right: auto; }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.28em;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
}
.logo::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    background: var(--ink);
    border-radius: 50%;
    transition: background-color var(--dur) var(--ease), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease);
}
/* The mark breathes on hover — a tiny sign of life in an otherwise still nav */
.logo:hover::before {
    transform: scale(1.5);
    box-shadow: 0 0 0 4px var(--line);
}

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* ============ Theme toggle ============ */
.theme-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-toggle:hover { background: var(--surface-2); transform: rotate(14deg); }
.theme-toggle:active { transform: rotate(14deg) scale(0.92); }
.theme-toggle svg { width: 18px; height: 18px; stroke: var(--ink); transition: opacity 0.2s var(--ease); }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ============ Cards ============ */
.glass-card, .glass-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 20px;
    position: relative;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease), background-color var(--dur) var(--ease);
}

.glass-item::before,
.glass-item::after {
    content: "";
    position: absolute;
    width: 9px; height: 9px;
    border-color: var(--line-strong);
    transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
    opacity: 0;
    pointer-events: none;
}
.glass-item::before { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.glass-item::after { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }
.glass-item:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}
.glass-item:hover::before,
.glass-item:hover::after { opacity: 1; border-color: var(--ink); }

h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1.3em;
    margin-bottom: 20px;
}
h2::before {
    content: "";
    width: 3px;
    height: 1.1em;
    background: var(--ink);
    transition: background-color var(--dur) var(--ease);
}

/* ============ Bento Grid ============ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

/* ============ Buttons ============ */
button {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 0.94em;
    border: 1px solid var(--ink);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.12s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
    letter-spacing: 0.3px;
    position: relative;
}
button:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* ============ Inputs ============ */
input {
    width: 100%;
    padding: 12px 4px;
    margin-bottom: 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 1em;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
input[type="file"] {
    border: 1px dashed var(--line-strong);
    padding: 12px;
    border-radius: var(--radius-sm);
}
input::placeholder { color: var(--ink-faint); }
input:focus {
    outline: none;
    border-color: var(--ink);
}
input:focus-visible { outline: none; }

/* ============ Modal ============ */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.2s var(--ease);
    padding: 20px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    width: 92%;
    max-width: 480px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.32s var(--ease-out);
    border: 1px solid var(--line);
    padding: 30px 28px;
}

/* Small eyebrow used inside modals (e.g. "PAYMENT" above the QR section) */
.modal-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--line-strong);
    padding-right: 12px;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.close-btn {
    position: absolute;
    top: 14px; right: 16px;
    background: transparent;
    color: var(--ink-dim);
    font-size: 1em;
    font-weight: bold;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 32px; height: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.close-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; transform: rotate(90deg); }

/* ============ Points display — the wallet ============
   The balance is the single most-checked number on the site, so it gets the
   only colour in the palette: a gold accent, a coin mark, oversized tabular
   digits and a slow light-sweep across the panel. */
.points-box {
    background:
        radial-gradient(120% 140% at 50% -20%, var(--accent-soft), transparent 62%),
        var(--surface-2);
    border: 1px solid var(--accent-line);
    padding: 30px 24px 26px;
    border-radius: var(--radius);
    text-align: center;
    margin: 18px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-sm);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow 0.3s var(--ease);
}
/* Slow light sweep — reads as "this is money" without any extra chrome */
.points-box::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, var(--accent-glow), transparent);
    opacity: 0.55;
    pointer-events: none;
    animation: pointsSweep 5.5s var(--ease) infinite;
}
@keyframes pointsSweep {
    0%   { left: -60%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}
/* Corner ticks — small editorial touch reminiscent of banknotes */
.points-box::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed var(--accent-line);
    border-radius: calc(var(--radius) - 2px);
    opacity: 0.5;
    pointer-events: none;
    transition: border-color var(--dur) var(--ease);
}

.points-box p:first-of-type {
    margin: 0;
    color: var(--ink-dim);
    font-size: 0.7em;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
}
/* Coin mark above the number */
.points-box p:first-of-type::before {
    content: "◆";
    display: block;
    font-size: 1.5em;
    letter-spacing: 0;
    color: var(--accent);
    margin-bottom: 8px;
    animation: coinSpin 6s var(--ease) infinite;
}
@keyframes coinSpin {
    0%, 70%, 100% { transform: rotateY(0deg); }
    85% { transform: rotateY(180deg); }
}
.points-box h1 {
    margin: 8px 0 6px 0;
    color: var(--accent);
    font-size: 3.6em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1.5px;
    line-height: 1;
    position: relative;
    text-shadow: 0 2px 18px var(--accent-glow);
}
.points-box p:last-of-type {
    font-size: 0.72em !important;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent) !important;
    position: relative;
}

/* Fires once the count-up finishes, so a topup/redeem visibly "lands" */
.points-pop { animation: pointsPop 0.55s var(--ease-out); }
@keyframes pointsPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ============ QR box (luxury payment frame) ============ */
.qr-box {
    text-align: center;
    margin-bottom: 15px;
    background: #ffffff;
    padding: 20px 20px 16px;
    border-radius: var(--radius);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    position: relative;
}
/* Corner ticks matching the points box — creates continuity */
.qr-box::before, .qr-box::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border-color: #cfcfcf;
}
.qr-box::before { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.qr-box::after { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }

.qr-box img {
    border-radius: 2px;
    max-width: 100%;
    animation: qrReveal 0.5s var(--ease-out);
}
@keyframes qrReveal {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

.qr-box .qr-placeholder {
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b6b6b;
    font-family: var(--font-body);
    font-size: 0.86em;
    padding: 0 16px;
    text-align: center;
    line-height: 1.6;
}
.qr-placeholder::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    border: 1.5px dashed #b8b8b8;
    border-radius: 4px;
    position: relative;
}
.qr-placeholder::after {
    content: "QR";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, calc(-50% - 8px));
    font-size: 0.62em;
    letter-spacing: 2px;
    color: #999;
    font-weight: 700;
    pointer-events: none;
}
/* PromptPay marker — quiet identifier below the QR */
.qr-box #qr-caption {
    font-family: var(--font-display);
    font-size: 0.98em !important;
    color: #14130f !important;
    margin: 12px 0 0 !important;
}
.qr-box #qr-caption::before {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: #cfcfcf;
    margin: 0 auto 10px;
}

hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 26px 0;
    transition: border-color var(--dur) var(--ease);
}

/* ============ Hero ============ */
.hero {
    position: relative;
    overflow: hidden;
    padding: 110px 20px 120px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-hairline) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(650px 380px at 50% 0%, black, transparent 75%);
    pointer-events: none;
}
.hero-inner { position: relative; max-width: 640px; margin: 0 auto; }
.hero-inner > * { animation: heroUp 0.8s var(--ease-out) both; }
.hero-eyebrow { animation-delay: 0s; }
.hero-title { animation-delay: 0.08s; }
.hero-subtitle { animation-delay: 0.16s; }
.hero-cta { animation-delay: 0.24s; }
.hero-badges { animation-delay: 0.32s; }
@keyframes heroUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ink-dim);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    padding: 7px 4px;
    margin-bottom: 26px;
}
.hero-title {
    font-size: clamp(2.1em, 4.8vw, 3.4em);
    font-weight: 700;
    margin: 0 0 18px 0;
    line-height: 1.25;
}
.accent-text {
    display: inline-block;
    position: relative;
    font-style: normal;
}
.accent-text::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 0.06em;
    height: 0.32em;
    background: var(--ink);
    opacity: 0.1;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineDraw 0.6s var(--ease-out) 0.9s forwards;
}
@keyframes underlineDraw { to { transform: scaleX(1); } }

.hero-subtitle {
    color: var(--ink-dim);
    font-size: 1.05em;
    line-height: 1.75;
    margin: 0 auto 32px;
    max-width: 480px;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }

/* hero feature strip */
.hero-badges {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--ink-dim);
    font-size: 0.85em;
    letter-spacing: 0.2px;
}
.hero-badges span { display: flex; align-items: center; gap: 7px; }

/* ============ Section heading ============ */
.section-heading {
    margin-bottom: 22px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.section-heading.in-view { opacity: 1; transform: translateY(0); }
.section-heading h2 { margin-bottom: 0; }
.section-sub { color: var(--ink-dim); font-size: 0.88em; }

/* ============ Footer ============ */
.site-footer {
    margin-top: 70px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ink-dim);
    font-size: 0.86em;
}
.footer-dim { opacity: 0.75; }

/* ============ Button variants (kept for JS/API compatibility, restyled monochrome) ============ */
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-gold {
    background: transparent;
    color: var(--ink);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    letter-spacing: 0.6px;
}
.btn-gold:hover { background: var(--ink); color: var(--paper); }

.btn-blue {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
}
.btn-blue:hover { background: transparent; color: var(--ink); }

.btn-emerald {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 10px 18px;
}
.btn-emerald:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-danger {
    background: transparent;
    color: var(--ink-dim);
    border: 1px dashed var(--line-strong);
}
.btn-danger:hover {
    color: var(--paper);
    background: var(--ink);
    border-style: solid;
    border-color: var(--ink);
    animation: shake 0.36s var(--ease);
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

#user-section { display: flex; gap: 10px; align-items: center; }

/* ============ Product card ============ */
/* ============ Product card (editorial luxury) ============
   Editorial layout: image with soft hover overlay revealing a reveal-in
   "add to cart" action; grayscale still blooms into color on hover; price
   sits on the type baseline like an editorial caption, not in a bubble. */
.product-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    background: transparent;
    border: none;
    overflow: visible;
    position: relative;
}
.product-card::before,
.product-card::after { display: none; } /* remove inventory-slot marks on product cards */
.product-card:hover { transform: none; box-shadow: none; }

.product-image-wrap {
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 18px;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    position: relative;
    isolation: isolate;
}
.product-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    filter: grayscale(1) contrast(1.02);
    transform: scale(1.001);
    transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease);
}
.product-card:hover .product-image-wrap img,
.product-card:focus-within .product-image-wrap img {
    transform: scale(1.05);
    filter: grayscale(0) contrast(1);
}

/* Hover overlay — a whisper of ink over the image, revealing the CTA */
.product-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20,19,15,0.55) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
    z-index: 1;
}
.product-card:hover .product-image-wrap::after,
.product-card:focus-within .product-image-wrap::after { opacity: 1; }

[data-theme="dark"] .product-image-wrap::after {
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.65) 100%);
}

/* Editorial product badges — top-left, quiet but present */
.product-badges {
    position: absolute;
    top: 12px; left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}
.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-family: var(--font-body);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    animation: badgeIn 0.5s var(--ease-out) both;
}
.product-badge-inverse { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.product-badge-outline { background: transparent; color: var(--paper); border-color: var(--paper); backdrop-filter: blur(4px); }
[data-theme="dark"] .product-badge { background: var(--surface); color: var(--ink); border-color: var(--ink); }
@keyframes badgeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reveal-on-hover CTA — sits at the bottom of the image, slides up */
.product-quick-action {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 4;
    padding: 10px 16px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    font-family: var(--font-body);
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.product-card:hover .product-quick-action,
.product-card:focus-within .product-quick-action {
    opacity: 1;
    transform: translateY(0);
}
.product-quick-action:hover {
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-1px);
}
[data-theme="dark"] .product-quick-action { background: var(--surface); color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .product-quick-action:hover { background: var(--ink); color: var(--paper); }

/* Editorial caption row — name left, hairline, price right */
.product-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 0 2px;
}
.product-name {
    margin: 0;
    font-size: 1.02em;
    font-weight: 500;
    font-family: var(--font-display);
    line-height: 1.35;
    color: var(--ink);
    flex: 1;
    min-width: 0;
    letter-spacing: 0.2px;
}
.product-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--ink);
    font-weight: 700;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 1.02em;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.product-price span {
    color: var(--ink-dim);
    font-weight: 500;
    font-size: 0.68em;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* Hairline separator between name and price on hover — a subtle editorial gesture */
.product-info::after {
    content: "";
    position: absolute;
    bottom: -6px; left: 2px; right: 2px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
}
.product-card { padding-bottom: 6px; }
.product-info { position: relative; }
.product-card:hover .product-info::after,
.product-card:focus-within .product-info::after { transform: scaleX(1); }

/* Fallback add-to-cart still exists for accessibility (keyboard users get the reveal via focus-within) */
.product-card > button.btn-blue {
    margin-top: 14px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    padding: 10px 16px;
    font-size: 0.85em;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.product-card > button.btn-blue:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ============ Cart badge + micro-interactions ============ */
.cart-nav-btn {
    position: relative;
    padding-right: 22px;
}
.cart-count-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--paper);
    font-size: 0.7em;
    font-weight: 700;
    font-family: var(--font-body);
    display: none;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transform: scale(1);
    transition: transform 0.3s var(--ease-out);
}
[data-theme="dark"] .cart-count-badge { border-color: var(--paper); }
.cart-count-badge.visible { display: inline-flex; }
.cart-count-badge.bump { animation: badgeBump 0.5s var(--ease-out); }
@keyframes badgeBump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35) rotate(-8deg); }
    60%  { transform: scale(0.92) rotate(4deg); }
    100% { transform: scale(1); }
}
.cart-nav-btn.jiggle { animation: cartJiggle 0.4s var(--ease-out); }
@keyframes cartJiggle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-3px) rotate(-6deg); }
    60% { transform: translateY(0) rotate(5deg); }
}

/* Flying dot that arcs from a product card to the cart button on add-to-cart click */
.fly-dot {
    position: fixed;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--ink);
    z-index: 3000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    animation: flyToCart 0.75s cubic-bezier(0.5, -0.3, 0.7, 1) forwards;
}
@keyframes flyToCart {
    0%   { opacity: 1; transform: scale(1); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: scale(0.5); }
}

/* Button press ripple — subtle, monochrome */
button {
    overflow: hidden;
    position: relative;
}
button.ripple::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(1);
    animation: ripple 0.55s var(--ease-out);
    pointer-events: none;
}
@keyframes ripple {
    to { transform: translate(-50%, -50%) scale(30); opacity: 0; }
}

/* ============ Admin form ============ */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.stat-label { color: var(--ink-dim); font-size: 0.85em; }
.stat-value { font-family: var(--font-display); font-size: 2em; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

.field-label { display: block; margin: 4px 0 6px; color: var(--ink-dim); font-size: 0.87em; font-weight: 600; letter-spacing: 0.2px; }
.field-hint { color: var(--ink-faint); font-size: 0.8em; margin: -6px 0 18px; line-height: 1.6; }
.field-hint code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; color: var(--ink-dim); }
.field-warning {
    font-size: 0.82em;
    line-height: 1.6;
    margin: -6px 0 14px;
    padding: 8px 12px;
    border: 1px dashed var(--line-strong);
    color: var(--ink-soft);
    display: none;
}
.field-warning.show { display: block; animation: fadeIn 0.2s var(--ease); }

.cmd-badge {
    font-size: 0.76em;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    display: inline-block;
    margin: 8px 0 0;
    letter-spacing: 0.2px;
}
.cmd-on { background: var(--ink); color: var(--paper); }
.cmd-off { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }

/* ============ Toast notifications (monochrome: differentiated by icon + border style, not colour) ============ */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-md);
    font-family: var(--font-body);
    font-size: 0.92em;
    color: var(--ink);
    animation: toastIn 0.25s var(--ease-out);
}
.toast.toast-success { border-left: 3px solid var(--ink); }
.toast.toast-error { border-left: 3px dashed var(--ink); }
.toast-icon { font-size: 1.1em; line-height: 1; }
.toast-message { flex: 1; }
.toast-close {
    background: transparent; border: none; color: var(--ink-dim);
    cursor: pointer; padding: 0; margin-left: auto; font-size: 1em; line-height: 1;
    box-shadow: none;
}
.toast-close:hover { color: var(--ink); box-shadow: none; transform: none; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

/* ============ Loading states ============ */
.loading-state {
    grid-column: 1/-1;
    text-align: center;
    color: var(--ink-dim);
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.spinner {
    width: 22px; height: 22px;
    border: 2px solid var(--line);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Gacha reel ============ */
.reel-viewport {
    position: relative;
    height: 170px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.reel-marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ink);
    z-index: 5;
    transform: translateX(-50%);
}
.reel-marker::before, .reel-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transform: translateX(-50%);
}
.reel-marker::before { top: -1px; border-top: 8px solid var(--ink); }
.reel-marker::after { bottom: -1px; border-bottom: 8px solid var(--ink); }

.reel-track {
    display: flex;
    align-items: center;
    height: 100%;
    will-change: transform;
}
.reel-item {
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
    margin: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
    position: relative;
}
.reel-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 0.4s ease;
}
.reel-item.rarity-rare { border-width: 2px; border-color: var(--line-strong); }
.reel-item.rarity-legendary { border-width: 2px; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.reel-item.is-winner img { filter: grayscale(0); }

.reel-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 70px;
    pointer-events: none;
    z-index: 4;
}
.reel-fade-left { left: 0; background: linear-gradient(90deg, var(--surface-2), transparent); }
.reel-fade-right { right: 0; background: linear-gradient(270deg, var(--surface-2), transparent); }

.rarity-common { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }
.rarity-uncommon { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.rarity-rare { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.rarity-epic { background: var(--surface-2); color: var(--ink); border: 1px solid var(--ink); border-style: dashed; }
.rarity-legendary { background: var(--ink); color: var(--paper); }
.rarity-mythic {
    background: var(--ink); color: var(--paper);
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink);
    animation: mythicPulse 2s ease-in-out infinite;
}
@keyframes mythicPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
    50% { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
}

.reel-item.rarity-legendary, .reel-item.rarity-mythic {
    border-width: 2px; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.reel-item.rarity-epic { border-width: 2px; border-color: var(--line-strong); border-style: dashed; }

/* ============ Nav points badge (หน้าร้านค้า + กาชา) ============
   Always-visible wallet chip. Stays out of the burger menu on mobile so the
   balance is readable at every width. */
.nav-points-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px 8px 12px;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    background: var(--accent-soft);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
                transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease);
}
.nav-points-badge::before {
    content: "◆";
    font-size: 0.95em;
    line-height: 1;
    color: var(--accent);
}
.nav-points-badge:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 4px 14px var(--accent-glow);
}
/* Balance changed — flash the chip so the user notices without a toast */
.nav-points-badge.updated { animation: badgeFlash 0.9s var(--ease-out); }
@keyframes badgeFlash {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
    40%  { box-shadow: 0 0 0 8px transparent; transform: translateY(-2px) scale(1.04); }
    100% { box-shadow: 0 0 0 0 transparent; transform: none; }
}

.result-image-wrap {
    width: 160px; height: 160px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
}
.result-image-wrap img { width: 100%; height: 100%; object-fit: cover; animation: resultReveal 0.6s var(--ease-out); }
@keyframes resultReveal {
    from { filter: grayscale(1); transform: scale(0.9); opacity: 0.5; }
    to { filter: grayscale(0); transform: scale(1); opacity: 1; }
}

/* ============ Redeem code box ============ */
.redeem-box {
    background: var(--surface-2);
    border: 1px dashed var(--line-strong);
    padding: 16px;
    border-radius: var(--radius);
    margin-bottom: 4px;
}
.redeem-box input { text-transform: uppercase; }
.redeem-box input::placeholder { text-transform: none; }

/* ============ Password field with reveal toggle ============ */
.password-field { position: relative; }
.password-field input { padding-right: 34px; }
.password-toggle {
    position: absolute;
    right: 0;
    top: 8px;
    background: transparent;
    border: none;
    color: var(--ink-dim);
    padding: 4px;
    font-size: 0.85em;
    cursor: pointer;
    box-shadow: none;
}
.password-toggle:hover { color: var(--ink); box-shadow: none; transform: none; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }

/* ============ Cart line items ============ */
.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-right: 40px; /* เว้นที่ให้ปุ่มปิด */
}
.cart-clear-btn {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-dim);
    font-size: 0.78em;
    padding: 6px 12px;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.cart-clear-btn:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.cart-line {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 12px;
    border-radius: var(--radius-sm);
    transition: border-color 0.2s var(--ease), opacity 0.25s var(--ease);
}
.cart-line:hover { border-color: var(--line-strong); }

.cart-line-thumb {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: 4px;
    filter: grayscale(0.35);
    flex-shrink: 0;
    transition: filter 0.3s var(--ease);
}
.cart-line:hover .cart-line-thumb { filter: grayscale(0); }

.cart-line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-line-name {
    margin: 0;
    font-size: 0.95em;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-line-unit { margin: 0; color: var(--ink-dim); font-size: 0.8em; }

/* Quantity stepper */
.cart-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    width: fit-content;
    margin-top: 2px;
    overflow: hidden;
}
.cart-qty-btn {
    background: transparent;
    border: none;
    color: var(--ink);
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-qty-btn:hover { background: var(--ink); color: var(--paper); transform: none; box-shadow: none; }
.cart-qty-value {
    min-width: 32px;
    text-align: center;
    font-size: 0.88em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: 4px 0;
}

.cart-line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.cart-line-total {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cart-remove-btn {
    background: transparent;
    border: 1px dashed var(--line-strong);
    color: var(--ink-dim);
    font-size: 0.74em;
    padding: 4px 10px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.cart-remove-btn:hover {
    background: var(--ink);
    color: var(--paper);
    border-style: solid;
    border-color: var(--ink);
    transform: none;
}

@media (max-width: 480px) {
    .cart-line { flex-wrap: wrap; }
    .cart-line-right { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============ Admin badge picker ============ */
.badge-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.badge-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.84em;
    color: var(--ink-dim);
    user-select: none;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.badge-option:hover { border-color: var(--ink); color: var(--ink); }
.badge-option input { display: none; }
.badge-option.checked {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-weight: 600;
}

/* ============ Profile page (editorial layout) ============ */
.profile-hero {
    padding: 44px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    border-radius: var(--radius);
}
.profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-hairline) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(650px 380px at 50% 50%, black, transparent 75%);
    pointer-events: none;
}
.profile-hero > * { position: relative; z-index: 1; }

.profile-name {
    font-family: var(--font-display);
    font-size: clamp(1.8em, 4vw, 2.6em);
    font-weight: 700;
    margin: 12px 0 4px;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.profile-role {
    font-family: var(--font-body);
    font-size: 0.72em;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 0 0 28px;
    font-weight: 700;
}

.profile-points-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 46px 22px;
    border-top: 1px solid var(--accent-line);
    border-bottom: 1px solid var(--accent-line);
    background: radial-gradient(120% 130% at 50% 0%, var(--accent-soft), transparent 65%);
    position: relative;
}
.profile-points-block::before,
.profile-points-block::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.profile-points-block::before { left: -4px; }
.profile-points-block::after { right: -4px; }
.profile-points-block .modal-eyebrow { border-top-color: var(--accent-line); color: var(--accent); }
.profile-points {
    font-family: var(--font-display);
    font-size: 4em;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
    margin-top: 4px;
    text-shadow: 0 3px 24px var(--accent-glow);
}
/* Coin mark flanking the balance */
.profile-points::before {
    content: "◆";
    font-family: var(--font-body);
    font-size: 0.36em;
    vertical-align: middle;
    margin-right: 12px;
    letter-spacing: 0;
    opacity: 0.75;
}
.profile-points-unit {
    font-family: var(--font-body);
    font-size: 0.72em;
    letter-spacing: 3.2px;
    color: var(--accent);
    font-weight: 700;
    margin-top: 6px;
}

/* Stat cards */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.profile-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 20px 18px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.profile-stat::before, .profile-stat::after {
    content: "";
    position: absolute;
    width: 8px; height: 8px;
    border-color: var(--line-strong);
    transition: border-color 0.25s var(--ease);
    opacity: 0;
}
.profile-stat::before { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid; }
.profile-stat::after { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid; }
.profile-stat:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.profile-stat:hover::before, .profile-stat:hover::after { opacity: 1; border-color: var(--ink); }

.profile-stat-label {
    font-size: 0.68em;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 700;
}
.profile-stat-value {
    font-family: var(--font-display);
    font-size: 2.2em;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}
.profile-stat-sub {
    font-size: 0.8em;
    color: var(--ink-dim);
    letter-spacing: 0.5px;
}
.profile-stat.is-active {
    background: var(--ink);
    border-color: var(--ink);
}
.profile-stat.is-active .profile-stat-label,
.profile-stat.is-active .profile-stat-value,
.profile-stat.is-active .profile-stat-sub {
    color: var(--paper);
}
.profile-stat.is-active .profile-stat-value {
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Tabs */
.profile-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    overflow-x: auto;
    padding-bottom: 0;
}
.profile-tab {
    background: transparent;
    border: none;
    color: var(--ink-dim);
    font-family: var(--font-body);
    font-size: 0.92em;
    font-weight: 600;
    padding: 12px 20px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    letter-spacing: 0.4px;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
    border-radius: 0;
    margin-bottom: -1px;
    white-space: nowrap;
}
.profile-tab:hover { color: var(--ink); background: transparent; box-shadow: none; transform: none; }
.profile-tab.active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.profile-tab-content { display: none; animation: fadeInTab 0.35s var(--ease-out); }
.profile-tab-content.active { display: block; }
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Empty state */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--ink-dim);
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    line-height: 1.8;
}

/* Order card */
.order-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.order-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.order-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}
.order-date {
    font-family: var(--font-body);
    font-size: 0.9em;
    color: var(--ink-dim);
    margin-top: 4px;
}
.order-total {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.order-total-label {
    font-size: 0.68em;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 700;
}
.order-total-value {
    font-family: var(--font-display);
    font-size: 1.6em;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.order-total-value span {
    font-family: var(--font-body);
    font-size: 0.55em;
    letter-spacing: 2px;
    color: var(--ink-dim);
    font-weight: 500;
    margin-left: 4px;
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
.order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}
.order-item-thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--surface);
    flex-shrink: 0;
    filter: grayscale(0.4);
}
.order-item-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    color: var(--ink-dim);
}
.order-item-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.order-item-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 0.98em; }
.order-item-meta { font-size: 0.82em; color: var(--ink-dim); }
.order-item-total {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.order-item-unavailable { opacity: 0.55; }
.order-item-unavailable .order-item-name { text-decoration: line-through; }

.order-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink);
}
.delivery-done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.delivery-pending { border-style: dashed; }
.delivery-partial { background: var(--surface-2); }
.delivery-none { color: var(--ink-dim); }
.delivery-progress {
    font-size: 0.82em;
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
}

/* History table (topups, gacha, redeem) */
.history-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.history-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1fr;
    gap: 16px;
    padding: 14px 20px;
    align-items: center;
    border-bottom: 1px solid var(--line-hairline);
    transition: background-color 0.15s var(--ease);
}
.history-row:last-child { border-bottom: none; }
.history-row:not(.history-head):hover { background: var(--surface-2); }
.history-head {
    background: var(--surface-2);
    font-size: 0.68em;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
}
.history-date { font-size: 0.9em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.history-amount, .history-points {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.history-amount em, .history-points em {
    font-style: normal;
    font-weight: 500;
    font-size: 0.7em;
    letter-spacing: 1.6px;
    color: var(--ink-dim);
    margin-left: 4px;
}
.history-points-plus { color: var(--ink); }
.history-points-minus { color: var(--ink-dim); }
.history-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ink);
    background: var(--surface-2);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    font-size: 0.9em;
}
.history-prize { display: flex; align-items: center; flex-wrap: wrap; }

/* Mobile: stack history rows */
@media (max-width: 640px) {
    .history-row { grid-template-columns: 1fr; gap: 6px; }
    .history-head { display: none; }
    .history-row { padding: 14px 16px; }
    .history-amount, .history-points { text-align: left; }
    .order-card-head { flex-direction: column; }
    .order-total { text-align: left; }
}

/* ==================================================================
   BURGER MENU — responsive navigation
   Below 860px the nav links collapse into a panel that slides out of the
   header. The theme toggle and the points chip stay outside it, in
   .nav-right, because they're glanceable state rather than navigation.
   ================================================================== */
.nav-burger {
    display: none;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: visible;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-burger:hover { background: var(--surface-2); transform: none; box-shadow: none; }
.nav-burger span {
    display: block;
    width: 17px;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.32s var(--ease-out), opacity 0.2s var(--ease), background-color var(--dur) var(--ease);
}
/* Bars morph into an X */
.nav-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
    .glass-nav { padding: 14px 18px; }
    .nav-burger { display: inline-flex; }

    .nav-actions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 16px 18px 20px;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);

        /* closed state — clipped, not display:none, so it can animate */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        pointer-events: none;
        transition: opacity 0.28s var(--ease), transform 0.32s var(--ease-out), visibility 0.32s;
    }
    .nav-actions.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
    /* Links cascade in one after another */
    .nav-actions.open > * {
        animation: navItemIn 0.4s var(--ease-out) both;
    }
    .nav-actions.open > *:nth-child(1) { animation-delay: 0.04s; }
    .nav-actions.open > *:nth-child(2) { animation-delay: 0.09s; }
    .nav-actions.open > *:nth-child(3) { animation-delay: 0.14s; }
    .nav-actions.open > *:nth-child(4) { animation-delay: 0.19s; }
    .nav-actions.open > *:nth-child(5) { animation-delay: 0.24s; }

    .nav-actions button { width: 100%; justify-content: center; }
    #user-section { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
    #user-section button { width: 100%; }

    .logo { font-size: 1.12em; }
    .nav-points-badge { font-size: 0.85em; padding: 7px 12px 7px 10px; }
    body.nav-open { overflow: hidden; }
}
@keyframes navItemIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 400px) {
    /* Very narrow screens: the balance keeps its place, the wordmark gives up space */
    .logo span { display: none; }
}

/* ==================================================================
   PAGE TRANSITIONS + SCROLL REVEAL
   ================================================================== */
/* The fade-in only hides the page when JS is confirmed running (html.js is set by
   theme.js in <head>), so a script failure can never leave a blank screen. */
body { transition: opacity 0.35s var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
html.js body { opacity: 0; }
html.js body.page-ready { opacity: 1; }
/* navigateTo() sets this just before changing location, so pages hand off softly */
body.page-leaving { opacity: 0; transition-duration: 0.22s; }

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ==================================================================
   HOVER / MICRO-INTERACTIONS
   ================================================================== */
/* Buttons get a light sweep on hover — one gesture, applied everywhere */
button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform 0.6s var(--ease-out);
    pointer-events: none;
}
button:hover::before { transform: translateX(120%); }
button:disabled::before { display: none; }
/* Ghost/outline buttons are light-on-light, so the sweep uses ink instead */
.btn-ghost::before, .btn-gold::before, .btn-emerald::before, .btn-danger::before,
.cart-clear-btn::before, .cart-remove-btn::before, .product-card > button.btn-blue::before {
    background: linear-gradient(110deg, transparent 20%, rgba(var(--shadow-color), 0.10) 50%, transparent 80%);
}
/* Elements that shouldn't shimmer */
.theme-toggle::before, .nav-burger::before, .close-btn::before,
.toast-close::before, .password-toggle::before, .profile-tab::before, .cart-qty-btn::before { display: none; }

button:hover { transform: translateY(-2px); }

/* Cards lift a touch further and get a hairline highlight */
.glass-card { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease-out), background-color var(--dur) var(--ease); }
.glass-card:hover { box-shadow: var(--shadow-md); }

/* Stat + order cards echo the product-card lift */
.stat-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.stat-value { transition: transform 0.3s var(--ease-out); }
.stat-card:hover .stat-value { transform: scale(1.04); }

/* Inputs draw an ink underline from the left on focus.
   The base border stays hairline so the drawing motion is actually visible —
   otherwise input:focus{border-color:var(--ink)} would snap the whole line at once. */
input:not([type="file"]) {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size 0.35s var(--ease-out), border-color 0.2s var(--ease);
}
input:not([type="file"]):focus {
    background-size: 100% 1.5px;
    border-bottom-color: var(--line-strong);
}
input[type="file"]:hover { border-color: var(--ink); background: var(--surface-2); }

/* Tabs get a sliding underline feel */
.profile-tab { position: relative; }
.profile-tab::after {
    content: "";
    position: absolute;
    left: 20px; right: 20px; bottom: -1px;
    height: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.32s var(--ease-out);
}
.profile-tab:hover::after { transform: scaleX(1); opacity: 0.35; }
.profile-tab.active::after { transform: scaleX(1); opacity: 1; }

/* Modal close is already rotating; give the overlay a softer entrance */
.modal-overlay { animation: fadeIn 0.24s var(--ease); }

/* Hero CTA buttons breathe once on arrival to draw the eye downward */
.hero-cta button:first-child { animation: ctaNudge 3.4s var(--ease) 1.6s 2; }
@keyframes ctaNudge {
    0%, 88%, 100% { transform: translateY(0); }
    92% { transform: translateY(-4px); }
    96% { transform: translateY(0); }
}

/* Skeleton shimmer while product data loads */
.loading-state { animation: fadeIn 0.3s var(--ease); }

/* ==================================================================
   ★ GRAND LAYER ★
   Everything below elevates the base theme: depth, scale, and motion.
   The rule throughout is that grandeur comes from those three things —
   never from adding more colour. The palette stays monochrome, and gold
   stays reserved for the points balance alone.
   ================================================================== */

/* ------------------------------------------------------------------
   1. CURTAIN PAGE TRANSITION
   Two stacked panels sweep across the viewport: an accent-tinted leader
   and an ink panel carrying the wordmark. The leaving page closes them,
   the arriving page opens them, and both move in the same direction, so
   the pair reads as one continuous camera move between pages.
   Built entirely from <html> pseudo-elements — no DOM, so the panel is
   painted on the very first frame with no flash of the incoming page.
   ------------------------------------------------------------------ */
html.curtain-out::before, html.curtain-out::after,
html.curtain-in::before,  html.curtain-in::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    will-change: clip-path;
}

/* Leading panel — a whisper of gold so the wipe has a warm edge */
html.curtain-out::before, html.curtain-in::before {
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-strong) 100%);
    opacity: 0.92;
}

/* Main panel — carries the brand */
html.curtain-out::after, html.curtain-in::after {
    content: "Mai Shop";
    background: var(--ink);
    color: var(--paper);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 3.2rem);
    letter-spacing: 0.42em;
    text-indent: 0.42em; /* offset the trailing letter-space so it reads centred */
    text-transform: uppercase;
}

/* --- Closing (leaving the page) --- */
html.curtain-out[data-transition="forward"]::before { animation: curtainCloseUp 0.44s var(--ease-out) forwards; }
html.curtain-out[data-transition="forward"]::after  { animation: curtainCloseUp 0.44s var(--ease-out) 0.10s forwards; }
html.curtain-out[data-transition="back"]::before    { animation: curtainCloseDown 0.44s var(--ease-out) forwards; }
html.curtain-out[data-transition="back"]::after     { animation: curtainCloseDown 0.44s var(--ease-out) 0.10s forwards; }

@keyframes curtainCloseUp   { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtainCloseDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* --- Opening (arriving) — ink leaves first, gold trails behind it --- */
html.curtain-in[data-transition="forward"]::after  { animation: curtainOpenUp 0.60s var(--ease-out) 0.05s forwards; }
html.curtain-in[data-transition="forward"]::before { animation: curtainOpenUp 0.60s var(--ease-out) 0.17s forwards; }
html.curtain-in[data-transition="back"]::after     { animation: curtainOpenDown 0.60s var(--ease-out) 0.05s forwards; }
html.curtain-in[data-transition="back"]::before    { animation: curtainOpenDown 0.60s var(--ease-out) 0.17s forwards; }

@keyframes curtainOpenUp   { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes curtainOpenDown { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }

/* Safety: with motion reduced the panels must never linger on screen */
@media (prefers-reduced-motion: reduce) {
    html.curtain-out::before, html.curtain-out::after,
    html.curtain-in::before,  html.curtain-in::after { display: none; }
}

/* ------------------------------------------------------------------
   2. NAV — scroll progress + condensed state
   ------------------------------------------------------------------ */
.scroll-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transform: scaleX(0);
    transform-origin: left;
    z-index: 2;
}

.glass-nav {
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                padding 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}
.glass-nav.is-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 10px 40px rgba(var(--shadow-color), 0.10);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.glass-nav .logo { transition: font-size 0.35s var(--ease-out); }
.glass-nav.is-scrolled .logo { font-size: 1.12em; }

/* ------------------------------------------------------------------
   3. HERO — depth through layered, slowly drifting light
   ------------------------------------------------------------------ */
.hero {
    padding: 150px 20px 150px;
    isolation: isolate;
}

/* Aurora: two large, soft light pools drifting on long cycles. Kept at very
   low opacity — the effect should register as depth, not as a gradient. */
.hero-aurora {
    position: absolute;
    inset: -20% -10%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(closest-side circle at 28% 34%, rgba(var(--shadow-color), 0.10), transparent 70%),
        radial-gradient(closest-side circle at 74% 62%, var(--accent-soft), transparent 72%);
    filter: blur(20px);
    animation: auroraDrift 22s var(--ease) infinite alternate;
}
[data-theme="dark"] .hero-aurora {
    background:
        radial-gradient(closest-side circle at 28% 34%, rgba(246, 244, 238, 0.07), transparent 70%),
        radial-gradient(closest-side circle at 74% 62%, var(--accent-soft), transparent 72%);
}
@keyframes auroraDrift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* Floating geometry — outlined shapes echoing the corner-tick motif */
.hero-shards { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-shards span {
    position: absolute;
    display: block;
    border: 1px solid var(--line);
    opacity: 0;
    animation: shardFloat 18s var(--ease) infinite;
}
.hero-shards span:nth-child(1) { width: 90px;  height: 90px;  top: 18%; left: 11%; animation-delay: 0s;   }
.hero-shards span:nth-child(2) { width: 54px;  height: 54px;  top: 66%; left: 18%; animation-delay: -4s;  border-radius: 50%; }
.hero-shards span:nth-child(3) { width: 130px; height: 130px; top: 24%; left: 79%; animation-delay: -8s;  }
.hero-shards span:nth-child(4) { width: 40px;  height: 40px;  top: 72%; left: 86%; animation-delay: -12s; border-radius: 50%; }
.hero-shards span:nth-child(5) { width: 68px;  height: 68px;  top: 46%; left: 92%; animation-delay: -16s; }
@keyframes shardFloat {
    0%   { opacity: 0;    transform: translateY(24px) rotate(0deg); }
    18%  { opacity: 0.75; }
    82%  { opacity: 0.75; }
    100% { opacity: 0;    transform: translateY(-46px) rotate(120deg); }
}

/* Kinetic headline — clipped rows that lift into place, one phrase at a time.
   The .line wrapper is the mask; the inner span is what actually moves.
   heroUp is switched off here so the two reveals don't fight each other. */
.hero-title { font-size: clamp(2.4em, 6.2vw, 4.4em); line-height: 1.2; animation: none; }
.hero-title .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.10em; /* room for Thai descenders inside the clip */
}
.hero-title .line > span {
    display: inline-block;
    animation: lineRise 1s var(--ease-out) both;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.10s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.22s; }
.hero-title .line:nth-child(3) > span { animation-delay: 0.34s; }
@keyframes lineRise {
    from { transform: translateY(105%); }
    to   { transform: translateY(0); }
}

.hero-eyebrow { font-size: 0.78em; letter-spacing: 3.4px; }
.hero-subtitle { font-size: 1.14em; max-width: 540px; }

/* Feature strip gains cells and separators — reads as a spec sheet */
.hero-badges {
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    max-width: 620px;
    margin: 0 auto;
}
.hero-badges span {
    padding: 0 26px;
    border-right: 1px solid var(--line);
    transition: color 0.3s var(--ease), transform 0.3s var(--ease-out);
}
.hero-badges span:last-child { border-right: none; }
.hero-badges span:hover { color: var(--ink); transform: translateY(-2px); }
@media (max-width: 620px) {
    .hero { padding: 100px 20px 90px; }
    .hero-badges { flex-direction: column; gap: 12px; padding: 14px 0; }
    .hero-badges span { border-right: none; padding: 0; }
}

/* Scroll cue at the foot of the hero */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.66em;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--ink-faint);
    pointer-events: none;
}
.scroll-cue::after {
    content: "";
    width: 1px;
    height: 42px;
    background: linear-gradient(var(--line-strong), transparent);
    animation: cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ------------------------------------------------------------------
   4. SECTION HEADINGS — editorial masthead treatment
   ------------------------------------------------------------------ */
.section-heading {
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 32px;
}
.section-heading h2 { font-size: 1.75em; }
.section-heading h2::before { width: 4px; height: 1em; }
.section-heading .section-sub { margin-left: auto; text-align: right; }
@media (max-width: 640px) {
    .section-heading .section-sub { margin-left: 0; text-align: left; }
}

/* ------------------------------------------------------------------
   5. PRODUCT CARDS — 3D tilt with a moving glare
   ------------------------------------------------------------------ */
.bento-grid { gap: 30px 24px; }

/* Applied to .product-image-wrap rather than the whole card, for two reasons:
   the caption stays flat and legible, and it avoids fighting .reveal, which
   owns the transform on the card itself. */
.tilt {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-out);
}
.tilt:hover { transition: transform 0.12s linear; }

.product-image-wrap {
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.45s var(--ease);
}
.product-card:hover .product-image-wrap { box-shadow: var(--shadow-lg); }

/* Glare follows the cursor across the image */
.product-image-wrap .glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%),
                rgba(255, 255, 255, 0.30), transparent 55%);
    transition: opacity 0.35s var(--ease);
    mix-blend-mode: overlay;
}
.product-card:hover .glare { opacity: 1; }

.product-name { font-size: 1.12em; }
.product-price { font-size: 1.14em; }

/* ------------------------------------------------------------------
   6. SKELETON LOADERS
   ------------------------------------------------------------------ */
.skeleton-card { display: flex; flex-direction: column; gap: 12px; }
.skeleton-thumb, .skeleton-line {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line-hairline);
}
.skeleton-thumb { aspect-ratio: 4 / 3; width: 100%; }
.skeleton-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.skeleton-line { height: 13px; width: 78%; border-radius: 2px; }
.skeleton-line.short { width: 40%; }
.skeleton-thumb::after, .skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(var(--shadow-color), 0.07), transparent);
    animation: shimmer 1.5s infinite;
}
[data-theme="dark"] .skeleton-thumb::after, [data-theme="dark"] .skeleton-line::after {
    background: linear-gradient(90deg, transparent, rgba(246, 244, 238, 0.06), transparent);
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------
   7. MAGNETIC BUTTONS + weightier primary action
   ------------------------------------------------------------------ */
.magnetic { transition: transform 0.28s var(--ease-out), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.magnetic:hover { transform: translate(var(--mag-x, 0), calc(var(--mag-y, 0px) - 2px)); }

.hero-cta button { padding: 15px 30px; font-size: 1em; letter-spacing: 0.8px; }
.hero-cta button:first-child { box-shadow: 0 10px 30px rgba(var(--shadow-color), 0.16); }

/* ------------------------------------------------------------------
   8. LOGIN — split stage
   ------------------------------------------------------------------ */
.auth-stage {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 0;
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.auth-visual {
    position: relative;
    overflow: hidden;
    padding: 48px 42px;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 480px;
}
.auth-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(420px 340px at 30% 20%, black, transparent 78%);
}
.auth-visual::after {
    content: "";
    position: absolute;
    width: 340px; height: 340px;
    right: -110px; bottom: -130px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-glow), transparent 68%);
    animation: auroraDrift 16s var(--ease) infinite alternate;
}
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual .hero-eyebrow { color: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.28); }
/* Overrides the global h2 treatment — no ink rule marker on a dark panel */
.auth-headline {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.7em, 3vw, 2.4em);
    font-weight: 700;
    line-height: 1.35;
    margin: 22px 0 0;
    color: var(--paper);
}
.auth-headline::before { display: none; }
.auth-points {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.94em;
    line-height: 1.6;
    animation: lineRise 0.7s var(--ease-out) both;
}
.auth-points li:nth-child(1) { animation-delay: 0.20s; }
.auth-points li:nth-child(2) { animation-delay: 0.30s; }
.auth-points li:nth-child(3) { animation-delay: 0.40s; }
.auth-points li::before { content: "◆"; color: var(--accent); font-size: 0.7em; line-height: 1.9; }
.auth-form { padding: 48px 42px; display: flex; flex-direction: column; justify-content: center; }
.auth-form .glass-card { border: none; box-shadow: none; padding: 0; margin: 0; background: transparent; }

@media (max-width: 820px) {
    .auth-stage { grid-template-columns: 1fr; max-width: 460px; }
    .auth-visual { min-height: 0; padding: 34px 28px; }
    .auth-visual .auth-points { display: none; } /* keep the mobile form above the fold */
    .auth-form { padding: 32px 26px; }
}

/* ------------------------------------------------------------------
   9. FOOTER — full masthead
   ------------------------------------------------------------------ */
.site-footer { margin-top: 110px; padding: 0; background: var(--surface); }
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
    gap: 40px;
    padding: 56px 0 44px;
}
@media (max-width: 980px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer-brand .logo { font-size: 1.4em; margin-bottom: 14px; }
.footer-tagline { color: var(--ink-dim); font-size: 0.9em; line-height: 1.8; max-width: 320px; margin: 0; }
.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.68em;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 0 0 16px;
    font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li { color: var(--ink-soft); font-size: 0.9em; }
.footer-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 1em;
    cursor: pointer;
    position: relative;
    letter-spacing: 0;
    text-align: left;
    overflow: visible;
}
.footer-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -3px;
    height: 1px;
    background: var(--ink);
    transition: right 0.35s var(--ease-out);
}
.footer-link:hover { color: var(--ink); background: none; box-shadow: none; transform: none; }
.footer-link:hover::after { right: 0; }
.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ink-dim);
    font-size: 0.84em;
}
@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 30px; }
    .site-footer { margin-top: 70px; }
}

/* ------------------------------------------------------------------
   10. MODALS — deeper entrance
   ------------------------------------------------------------------ */
.modal-overlay { backdrop-filter: blur(10px) saturate(0.9); -webkit-backdrop-filter: blur(10px) saturate(0.9); }
.modal-content {
    animation: modalRise 0.5s var(--ease-out);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.32);
}
@keyframes modalRise {
    from { opacity: 0; transform: translateY(34px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------
   11. GACHA — heavier stage presence
   ------------------------------------------------------------------ */
.reel-viewport { height: 190px; box-shadow: inset 0 0 60px rgba(var(--shadow-color), 0.08); }
.reel-marker { box-shadow: 0 0 18px var(--accent-glow); background: var(--accent); }
.reel-marker::before { border-top-color: var(--accent); }
.reel-marker::after  { border-bottom-color: var(--accent); }
.reel-item { transition: transform 0.3s var(--ease-out); }
.reel-item.is-winner { transform: scale(1.06); z-index: 3; box-shadow: 0 0 30px var(--accent-glow); }

#btn-spin { padding: 17px 42px !important; font-size: 1.12em !important; }
.result-image-wrap { width: 180px; height: 180px; box-shadow: var(--shadow-lg); }

/* Celebration confetti — monochrome with gold accents, matching the palette */
.confetti-layer {
    position: fixed;
    top: 50%; left: 50%;
    width: 0; height: 0;
    z-index: 3000;
    pointer-events: none;
}
.confetti {
    position: absolute;
    width: 8px; height: 12px;
    background: var(--ink);
    border-radius: 1px;
}
.confetti.gold { background: var(--accent); }
[data-theme="dark"] .confetti { background: var(--paper); }
[data-theme="dark"] .confetti.gold { background: var(--accent); }

/* ------------------------------------------------------------------
   12. GRAIN — a barely-there film texture over the whole page.
   This is what stops large flat areas reading as "empty browser default".
   ------------------------------------------------------------------ */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity: 0.05; }

/* ==================================================================
   ★ STRUCTURE LAYER ★
   The page had a real hole in it: a signed-out visitor saw the hero,
   then nothing (the product grid is hidden until login), then the
   footer. No explanation, no reason to sign up. These sections fill
   that gap and are visible to everyone, signed in or not.
   ================================================================== */

.container > section + section,
.container > section + div,
.container > div + section { margin-top: var(--section-gap); }

/* ---------- Signed-out call to action ---------- */
.guest-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--space-2xl) var(--space-l);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(140% 120% at 50% 0%, var(--surface-2), transparent 70%),
        var(--surface);
}
.guest-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-hairline) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-hairline) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(420px 260px at 50% 0%, black, transparent 76%);
    pointer-events: none;
}
.guest-cta > * { position: relative; }
.guest-cta h2 {
    display: block;
    font-size: var(--step-3);
    margin: var(--space-s) 0 var(--space-2xs);
}
.guest-cta h2::before { display: none; }
.guest-cta p {
    color: var(--ink-dim);
    max-width: 46ch;
    margin: 0 auto var(--space-l);
    font-size: var(--step-0);
}

/* ---------- How it works ---------- */
.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
    position: relative;
}
/* Hairline threading the three steps together */
.step-list::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--line);
}
.step {
    position: relative;
    padding-top: var(--space-xl);
}
.step-num {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--paper);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ink);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
                border-color 0.3s var(--ease), transform 0.35s var(--ease-out);
}
.step:hover .step-num {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    transform: scale(1.08);
}
.step-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    margin: 0 0 var(--space-2xs);
    color: var(--ink);
}
.step-desc {
    margin: 0;
    color: var(--ink-dim);
    font-size: var(--step--1);
    line-height: 1.8;
    max-width: 34ch;
}
@media (max-width: 760px) {
    .step-list { grid-template-columns: 1fr; gap: var(--space-xl); }
    .step-list::before { display: none; }
    .step { padding-top: 0; padding-left: 72px; min-height: 52px; }
    .step-desc { max-width: none; }
}

/* ---------- FAQ ----------
   Built on <details>/<summary>: keyboard accessible and functional with
   no JavaScript at all, which is the right default for help content. */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m) 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--ink);
    transition: color 0.25s var(--ease), padding-left 0.3s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { padding-left: var(--space-2xs); }
.faq-item summary::after {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    position: relative;
    background:
        linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat,
        linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;
    transition: transform 0.35s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-answer {
    margin: 0;
    padding: 0 0 var(--space-m);
    color: var(--ink-dim);
    font-size: var(--step-0);
    line-height: 1.85;
    max-width: var(--measure);
    animation: faqOpen 0.4s var(--ease-out);
}
@keyframes faqOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   ★ CONFIRM DIALOG ★
   Replaces window.confirm() at the two commercial moments (clearing the
   cart, placing an order). A native browser dialog is the one element a
   site cannot style, and it landed exactly where the design needed to
   feel most trustworthy.
   ================================================================== */
.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-m);
    background: var(--overlay);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fadeIn 0.2s var(--ease);
}
.dialog-overlay.open { display: flex; }
.dialog {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-l);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.34);
    animation: modalRise 0.4s var(--ease-out);
    text-align: center;
}
.dialog-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto var(--space-s);
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: var(--step-1);
}
.dialog-title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    margin: 0 0 var(--space-2xs);
    color: var(--ink);
}
.dialog-body {
    margin: 0 0 var(--space-l);
    color: var(--ink-dim);
    font-size: var(--step-0);
    line-height: 1.75;
}
/* The summary line carries the number the user is actually agreeing to */
.dialog-figure {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin: var(--space-2xs) 0;
    text-shadow: 0 2px 18px var(--accent-glow);
}
.dialog-actions { display: flex; gap: var(--space-2xs); }
.dialog-actions button { flex: 1; padding: 14px 18px; }

/* ==================================================================
   ★ POLISH ★
   ================================================================== */
::selection { background: var(--ink); color: var(--paper); }
[data-theme="dark"] ::selection { background: var(--accent); color: var(--ink); }

/* One consistent focus ring everywhere, instead of only on buttons.
   Doubled with a paper-coloured outer ring so it stays visible against
   both the light surfaces and the ink-filled ones. */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--paper);
    border-radius: 2px;
}
.auth-visual :focus-visible,
.profile-stat.is-active :focus-visible {
    outline-color: var(--paper);
    box-shadow: 0 0 0 4px var(--ink);
}

/* Empty states given the same care as populated ones */
.empty-state {
    padding: var(--space-2xl) var(--space-l);
    font-size: var(--step-0);
}
.empty-state strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--ink);
    margin-bottom: var(--space-3xs);
}

/* ==================================================================
   ★ DISCORD / CONTACT ★
   The mark sits monochrome at rest so it doesn't break the palette
   discipline, then takes Discord's own blurple on hover and focus —
   brand recognition where it counts, without a permanent third colour.
   To keep it blurple at all times, move the .btn-discord:hover colours
   up into the base rule.
   ================================================================== */
:root { --discord: #5865f2; --discord-ink: #ffffff; }
[data-theme="dark"] { --discord: #7079f5; }

.btn-discord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    /* min-height keeps it at or above the 44px minimum tap target on phones,
       whatever the fluid font size resolves to */
    padding: 12px 18px;
    min-height: 46px;
    margin-top: var(--space-s);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
                border-color 0.25s var(--ease), transform 0.25s var(--ease-out),
                box-shadow 0.25s var(--ease);
}
.btn-discord svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: currentColor;
    transition: transform 0.35s var(--ease-out);
}
.btn-discord:hover,
.btn-discord:focus-visible {
    background: var(--discord);
    border-color: var(--discord);
    color: var(--discord-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(88, 101, 242, 0.30);
}
/* The mark gives a small nod when you reach for it */
.btn-discord:hover svg { transform: rotate(-8deg) scale(1.1); }

/* Full-width variant for the footer column and the login panel */
.btn-discord-block { width: 100%; }

/* On the ink-filled login panel the resting state has to invert */
.auth-visual .btn-discord {
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.92);
}
.auth-visual .btn-discord:hover,
.auth-visual .btn-discord:focus-visible {
    background: var(--discord);
    border-color: var(--discord);
    color: var(--discord-ink);
}

/* Inline links inside body copy (FAQ answers, hints) */
.link-inline {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px;
    padding-bottom: 1px;
    transition: background-size 0.3s var(--ease-out), color 0.25s var(--ease);
}
.link-inline:hover {
    color: var(--discord);
    background-image: linear-gradient(var(--discord), var(--discord));
    background-size: 100% 2px;
}

/* Sits at the end of an order's status row, so it reads as a next step
   rather than an error message */
.order-help-link {
    margin-left: auto;
    font-size: var(--step--1);
    white-space: nowrap;
}

.footer-contact-note {
    color: var(--ink-dim);
    font-size: var(--step--1);
    line-height: 1.75;
    margin: 0;
}

/* Long paragraphs shouldn't run the full width of a 1100px container */
.hero-subtitle, .step-desc, .faq-answer, .footer-tagline { text-wrap: pretty; }

/* Retrofit: the headings that most affect how "designed" the page reads */
.section-heading h2 { font-size: var(--step-2); }
.section-sub { font-size: var(--step--1); }
.product-name { font-size: var(--step-0); }
.product-price { font-size: var(--step-0); }
.hero-subtitle { font-size: var(--step-1); }