/* ============================================================================
   Aurenfall — site stylesheet
   Palette from client/branding/README.md: gold #C9A24B/#E3C26A/#F0D98A,
   deep navy #0E1726/#1B2A3A, teal #2E6E8E/#3FA7C4, cream #F2EFE6, red #B83A2E.
   Dark theme, gold + teal accents, Cinzel display over Inter body.
   ========================================================================== */

:root {
    --gold: #C9A24B;
    --gold-2: #E3C26A;
    --gold-3: #F0D98A;
    --navy: #0E1726;
    --navy-2: #1B2A3A;
    --bg: #0A111D;
    --bg-deep: #070C14;
    --teal: #3FA7C4;
    --teal-deep: #2E6E8E;
    --cream: #F2EFE6;
    --red: #C24A3E;
    --text: #E9E6DC;
    --muted: #97A2B3;
    --line: rgba(201, 162, 75, 0.16);
    --line-soft: rgba(255, 255, 255, 0.06);
    --card: linear-gradient(160deg, rgba(27, 42, 58, 0.66), rgba(14, 23, 38, 0.88));
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    --radius: 14px;
    --font-display: 'Cinzel', 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Reset / base ------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    background-image:
        radial-gradient(1100px 500px at 85% -100px, rgba(63, 167, 196, 0.07), transparent 60%),
        radial-gradient(900px 420px at 0% 30%, rgba(201, 162, 75, 0.05), transparent 60%);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--gold-3); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--cream); }
h4, h5 { color: var(--cream); }

::selection { background: rgba(201, 162, 75, 0.35); color: var(--cream); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--navy-2); border-radius: 8px; border: 3px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--teal-deep); }

.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.container.narrow { max-width: 820px; }
.center { text-align: center; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--gold-2); color: #101010; padding: 8px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 30px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(180deg, var(--gold-3), var(--gold) 90%);
    color: #171208;
    border-color: rgba(240, 217, 138, 0.55);
    box-shadow: 0 6px 26px rgba(201, 162, 75, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
    color: #171208;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 34px rgba(227, 194, 106, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-ghost {
    background: rgba(46, 110, 142, 0.12);
    color: #BFE3F0;
    border-color: rgba(63, 167, 196, 0.45);
}
.btn-ghost:hover { color: #E4F5FB; background: rgba(63, 167, 196, 0.2); transform: translateY(-2px); }

.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 8px; }
.btn-danger { background: rgba(194, 74, 62, 0.15); color: #F0A79D; border-color: rgba(194, 74, 62, 0.5); }
.btn-danger:hover { background: rgba(194, 74, 62, 0.3); color: #FFD3CB; }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cta-row.center { justify-content: center; }

.link-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--teal); font: inherit;
}
.link-btn:hover { color: var(--gold-3); }

/* ---- Navigation --------------------------------------------------------- */

.site-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    background: rgba(7, 12, 20, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.site-nav.scrolled { background: rgba(7, 12, 20, 0.92); border-bottom-color: var(--line); }

.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-glyph {
    width: 13px; height: 13px; flex: none;
    transform: rotate(45deg);
    border-radius: 3px;
    background: linear-gradient(135deg, var(--gold-3), var(--gold) 55%, #8C6B25);
    box-shadow: 0 0 12px rgba(227, 194, 106, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.brand-name {
    font-family: var(--font-display); font-weight: 900; font-size: 19px;
    letter-spacing: 0.12em; text-transform: uppercase;
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links > a {
    color: var(--text); font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em;
    padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-links > a:hover { color: var(--gold-3); }
.nav-account { color: var(--gold-2) !important; font-weight: 600 !important; }
.nav-admin { color: var(--teal) !important; }
.nav-cta { margin-left: 4px; }
.inline-form { display: inline; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--gold-2); margin: 5px 0; transition: 0.2s; }

/* ---- Flash messages ----------------------------------------------------- */

.flash {
    margin: 84px 0 -60px; padding: 13px 18px; border-radius: 10px; font-size: 14.5px;
    position: relative; z-index: 5;
}
.flash-ok { background: rgba(63, 167, 196, 0.12); border: 1px solid rgba(63, 167, 196, 0.4); color: #C9EAF5; }
.flash-bad { background: rgba(194, 74, 62, 0.12); border: 1px solid rgba(194, 74, 62, 0.45); color: #F5C8C1; }

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

.hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 130px 24px 90px;
}

.hero::before {
    content: ""; position: absolute; inset: -4%; z-index: -2;
    background: url('/img/hero.jpg') center 30% / cover no-repeat;
    animation: kenburns 36s ease-in-out infinite alternate;
}

.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse at center, transparent 30%, rgba(7, 12, 20, 0.55) 100%),
        linear-gradient(180deg, rgba(7, 12, 20, 0.72) 0%, rgba(10, 17, 29, 0.38) 40%, rgba(10, 17, 29, 0.55) 72%, var(--bg) 100%);
}

@keyframes kenburns {
    from { transform: scale(1) translateY(0); }
    to { transform: scale(1.07) translateY(-1.5%); }
}

/* Explicit box (not the `inset` shorthand) so the buffer sizes correctly everywhere. */
#embers {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

.hero-content { position: relative; z-index: 1; max-width: 900px; }

.hero-logo {
    /* ★ Bigger since tester report 1355 ("logo na stronie glownej moglo by byc wieksze"). The asset
       is 900x600 but its INK only spans 528x492 of that -- a wide transparent glow eats ~40% of the
       box -- so the rendered mark was far smaller than the width suggests. Widening the box is the
       cheap half of the fix; the same halo was what made the launcher icon look small. */
    width: min(760px, 86vw); margin: 0 auto 4px;
    filter: drop-shadow(0 18px 60px rgba(0, 0, 0, 0.75));
}

.hero-tagline {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(20px, 3.2vw, 30px); letter-spacing: 0.16em; text-transform: uppercase;
    background: linear-gradient(180deg, var(--gold-3) 20%, var(--gold) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin: 0 0 14px;
    text-shadow: none;
}

.hero-sub {
    color: #C7CDD8; font-size: clamp(15px, 1.8vw, 17.5px); max-width: 620px;
    margin: 0 auto 30px;
}
.hero-sub strong { color: var(--cream); }

.hero .cta-row { justify-content: center; margin-bottom: 26px; }

.scroll-cue {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 1;
    color: var(--gold-2); opacity: 0.75; animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.75; }
    50% { transform: translate(-50%, 8px); opacity: 0.35; }
}

/* ---- Status pill -------------------------------------------------------- */

.status-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 18px; border-radius: 999px;
    background: rgba(7, 12, 20, 0.6); border: 1px solid var(--line-soft);
    font-size: 13.5px; letter-spacing: 0.04em; color: var(--muted);
    backdrop-filter: blur(6px);
}

.status-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #6B7686;
    flex: none;
}
[data-status].online .status-dot { background: #58D68D; box-shadow: 0 0 10px rgba(88, 214, 141, 0.8); animation: pulse 2s infinite; }
[data-status].offline .status-dot { background: #E06A5E; box-shadow: 0 0 10px rgba(224, 106, 94, 0.7); }
[data-status].online [data-status-text] { color: #9FE8BF; }
[data-status].offline [data-status-text] { color: #F0A79D; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(88, 214, 141, 0.7); }
    50% { box-shadow: 0 0 14px rgba(88, 214, 141, 1); }
}

/* ---- Sections ----------------------------------------------------------- */

.section { padding: 96px 0; position: relative; }
.section.tight { padding: 64px 0; }

/* Header block for pages without a hero (clears the fixed nav). */
.page-head { padding: 148px 0 14px; text-align: center; }
.page-head h1 { font-size: clamp(30px, 4.4vw, 44px); margin: 12px 0 10px; }
.page-head p { color: var(--muted); max-width: 640px; margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 10px; }
.section-head p { color: var(--muted); max-width: 640px; margin: 0 auto; }

.ornament { position: relative; display: inline-block; padding: 0 66px; }
.ornament::before, .ornament::after {
    content: ""; position: absolute; top: 55%; width: 48px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament::before { left: 0; }
.ornament::after { right: 0; transform: scaleX(-1); }

.kicker {
    display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--teal); margin-bottom: 12px;
}

/* ---- Cards / features --------------------------------------------------- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    backdrop-filter: blur(6px);
}

.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.feature {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.feature:hover {
    transform: translateY(-5px);
    border-color: rgba(227, 194, 106, 0.4);
    box-shadow: var(--shadow), 0 0 0 1px rgba(227, 194, 106, 0.18);
}
.feature .icon {
    width: 52px; height: 52px; border-radius: 12px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, rgba(201, 162, 75, 0.18), rgba(201, 162, 75, 0.05));
    border: 1px solid rgba(201, 162, 75, 0.35);
    color: var(--gold-2);
}
.feature .icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 18.5px; margin: 0 0 8px; letter-spacing: 0.03em; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---- Stat strip --------------------------------------------------------- */

.stat-strip {
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(27, 42, 58, 0.35), rgba(14, 23, 38, 0.55));
    padding: 34px 0;
}
.stat-strip .grid { align-items: center; }
.stat { text-align: center; }
.stat .num {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3.4vw, 38px);
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1.1;
}
.stat .lbl { color: var(--muted); font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 6px; }

/* ---- World band --------------------------------------------------------- */

.world-band {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 120px 0;
}
.world-band::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background: url('/img/hero.jpg') center 62% / cover no-repeat fixed;
}
.world-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(7, 12, 20, 0.94) 0%, rgba(7, 12, 20, 0.72) 46%, rgba(7, 12, 20, 0.45) 100%);
}
.world-band .inner { max-width: 560px; }
.world-band h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 16px; }
.world-band p { color: #C3CAD6; }
.world-band ul { color: #C3CAD6; padding-left: 20px; margin: 18px 0 26px; }
.world-band li { margin: 8px 0; }
.world-band li::marker { color: var(--gold-2); }

/* ---- Podium (top 3) ----------------------------------------------------- */

.podium {
    display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap;
    gap: 20px; max-width: 900px; margin: 0 auto;
}

.podium-card {
    flex: 0 1 260px;
    text-align: center; padding: 30px 20px 26px; position: relative;
    transition: transform 0.22s ease;
}
.podium-card.first { flex-basis: 300px; }
.podium-card:hover { transform: translateY(-4px); }
.podium-card.first { padding-top: 44px; padding-bottom: 42px; border-color: rgba(227, 194, 106, 0.5); box-shadow: 0 0 60px rgba(201, 162, 75, 0.12), var(--shadow); }

.medal {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #171208;
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.medal.gold { background: radial-gradient(circle at 30% 25%, #FFF3C4, var(--gold-2) 55%, #8C6B25); box-shadow: 0 0 26px rgba(227, 194, 106, 0.55); }
.medal.silver { background: radial-gradient(circle at 30% 25%, #FFFFFF, #C9D2DC 55%, #76818E); box-shadow: 0 0 18px rgba(201, 210, 220, 0.35); }
.medal.bronze { background: radial-gradient(circle at 30% 25%, #F0C6A0, #C88A4E 55%, #7A4E24); box-shadow: 0 0 18px rgba(200, 138, 78, 0.35); }

.podium-card .p-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--cream); letter-spacing: 0.03em; }
.podium-card.first .p-name { font-size: 24px; color: var(--gold-3); }
.podium-card .p-meta { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.podium-card .p-guild { color: var(--teal); font-size: 13px; margin-top: 3px; }
.podium-card .p-level {
    margin-top: 14px; font-family: var(--font-display); font-weight: 900; font-size: 30px;
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.podium-card .p-level small { font-size: 12px; letter-spacing: 0.2em; color: var(--muted); -webkit-text-fill-color: var(--muted); display: block; }

/* ---- Tables / rankings -------------------------------------------------- */

.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
thead th {
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2);
    text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line);
    background: rgba(7, 12, 20, 0.45);
    white-space: nowrap;
}
tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); color: #CDD4DE; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(227, 194, 106, 0.05); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.rank-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--muted);
}
.rank-medal.r1 { background: radial-gradient(circle at 30% 25%, #FFF3C4, var(--gold-2) 60%, #8C6B25); color: #171208; box-shadow: 0 0 14px rgba(227, 194, 106, 0.5); }
.rank-medal.r2 { background: radial-gradient(circle at 30% 25%, #FFFFFF, #C9D2DC 60%, #76818E); color: #10151C; }
.rank-medal.r3 { background: radial-gradient(circle at 30% 25%, #F0C6A0, #C88A4E 60%, #7A4E24); color: #1A0F05; }

.player-name { color: var(--cream); font-weight: 600; }
.guild-tag { color: var(--teal); font-size: 13px; }

.class-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px;
    border: 1px solid var(--line-soft); color: var(--muted); white-space: nowrap;
}
.class-trojan { color: #F0B67F; border-color: rgba(240, 182, 127, 0.35); }
.class-warrior { color: #A9C5E8; border-color: rgba(169, 197, 232, 0.35); }
.class-archer { color: #A8D8A8; border-color: rgba(168, 216, 168, 0.35); }
.class-taoist { color: #C9A9E8; border-color: rgba(201, 169, 232, 0.35); }

.rebirth-star { color: var(--gold-2); letter-spacing: 0.1em; }

/* ---- Tabs --------------------------------------------------------------- */

.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.tabs a {
    padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--muted);
    border: 1px solid var(--line-soft); background: rgba(27, 42, 58, 0.35);
    transition: 0.18s ease;
}
.tabs a:hover { color: var(--gold-3); border-color: rgba(227, 194, 106, 0.35); }
.tabs a.active {
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    color: #171208; border-color: rgba(240, 217, 138, 0.6);
    box-shadow: 0 4px 18px rgba(201, 162, 75, 0.3);
}

/* ---- News --------------------------------------------------------------- */

.news-grid { grid-template-columns: repeat(3, 1fr); }

.news-card { display: flex; flex-direction: column; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.news-card:hover { transform: translateY(-5px); border-color: rgba(227, 194, 106, 0.4); box-shadow: var(--shadow); }
.news-card .meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.news-card h3 { font-size: 19px; margin: 0 0 10px; }
.news-card h3 a { color: var(--cream); }
.news-card h3 a:hover { color: var(--gold-3); }
.news-card p { color: var(--muted); font-size: 14.5px; margin: 0 0 16px; flex: 1; }
.news-card .more { font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.badge {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
/* Small qualifier beside an item name on the market board (+N, sockets, quality). */
.item-tag {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; letter-spacing: 0.06em; color: var(--gold-3);
    background: rgba(201, 162, 75, 0.12); border: 1px solid rgba(201, 162, 75, 0.32);
    white-space: nowrap;
}

.badge-news { background: rgba(63, 167, 196, 0.14); color: #8FD4E8; border: 1px solid rgba(63, 167, 196, 0.4); }
.badge-patch { background: rgba(201, 162, 75, 0.14); color: var(--gold-3); border: 1px solid rgba(201, 162, 75, 0.45); }
.badge-event { background: rgba(184, 58, 46, 0.16); color: #F0A79D; border: 1px solid rgba(184, 58, 46, 0.5); }

.date { color: var(--muted); font-size: 13px; }

/* ---- Article / markdown ------------------------------------------------- */

.article { max-width: 800px; margin: 0 auto; }
.article-head { margin-bottom: 34px; }
.article-head h1 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 12px; }
.article-head .meta { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 14px; }

.md { color: #CDD4DE; }
.md h1, .md h2 { font-size: 24px; margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.md h3 { font-size: 19px; margin: 30px 0 10px; }
.md h4 { margin: 24px 0 8px; }
.md p { margin: 0 0 16px; }
.md li { margin: 6px 0; }
.md li::marker { color: var(--gold-2); }
.md a { border-bottom: 1px dotted rgba(63, 167, 196, 0.5); }
.md code {
    background: rgba(27, 42, 58, 0.8); border: 1px solid var(--line-soft);
    padding: 1.5px 7px; border-radius: 6px; font-size: 13.5px; color: var(--gold-3);
}
.md pre { background: var(--bg-deep); border: 1px solid var(--line-soft); border-radius: 10px; padding: 18px; overflow-x: auto; }
.md pre code { background: none; border: none; padding: 0; color: #C9D2DC; }
.md blockquote {
    margin: 20px 0; padding: 4px 22px; border-left: 3px solid var(--gold);
    background: rgba(201, 162, 75, 0.06); border-radius: 0 10px 10px 0; color: #B9C1CE;
}
.md hr { border: none; height: 1px; background: var(--line); margin: 34px 0; }
.md table { font-size: 14px; margin: 18px 0; }
.md .table-wrap { border: 1px solid var(--line-soft); border-radius: 10px; margin: 18px 0; }
.md img { border-radius: 10px; margin: 18px 0; }

/* ---- Roadmap timeline ---------------------------------------------------- */

.timeline { position: relative; max-width: 780px; margin: 0 auto; padding-left: 42px; }
.timeline::before {
    content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(201, 162, 75, 0.08));
}

.milestone { position: relative; padding: 0 0 40px; }
.milestone:last-child { padding-bottom: 0; }
.milestone::before {
    content: ""; position: absolute; left: -37px; top: 5px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--muted);
}
.milestone.done::before { background: var(--gold-2); border-color: var(--gold-3); box-shadow: 0 0 12px rgba(227, 194, 106, 0.6); }
.milestone.wip::before { background: var(--teal); border-color: #8FD4E8; box-shadow: 0 0 12px rgba(63, 167, 196, 0.7); animation: pulse-teal 2s infinite; }

@keyframes pulse-teal {
    0%, 100% { box-shadow: 0 0 8px rgba(63, 167, 196, 0.55); }
    50% { box-shadow: 0 0 18px rgba(63, 167, 196, 0.95); }
}

.milestone h3 { font-size: 19px; margin: 0 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.milestone p { color: var(--muted); font-size: 14.5px; margin: 0 0 12px; }

.m-state { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; font-family: var(--font-body); font-weight: 600; }
.m-state.done { background: rgba(201, 162, 75, 0.15); color: var(--gold-3); border: 1px solid rgba(201, 162, 75, 0.4); }
.m-state.wip { background: rgba(63, 167, 196, 0.15); color: #8FD4E8; border: 1px solid rgba(63, 167, 196, 0.45); }
.m-state.todo { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--line-soft); }
.m-state.paused { background: rgba(176, 122, 60, 0.12); color: #D8A56B; border: 1px solid rgba(176, 122, 60, 0.42); }

.bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; max-width: 420px; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-3)); box-shadow: 0 0 10px rgba(227, 194, 106, 0.5); }
.milestone.wip .bar > span { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); box-shadow: 0 0 10px rgba(63, 167, 196, 0.5); }

/* ---- Forms -------------------------------------------------------------- */

.auth-card { max-width: 440px; margin: 0 auto; padding: 38px 36px; }
.auth-card h1 { font-size: 27px; margin: 0 0 6px; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 28px; }

.field { margin-bottom: 18px; }
.field label {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold-2); margin-bottom: 7px;
}
.field input[type="text"], .field input[type="password"], .field input[type="email"],
.field select, .field textarea {
    width: 100%; padding: 12px 14px; border-radius: 9px;
    background: rgba(7, 12, 20, 0.7); border: 1px solid var(--line-soft);
    color: var(--text); font: inherit; font-size: 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: rgba(227, 194, 106, 0.6);
    box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.15);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.field-error { color: #F0A79D; font-size: 13.5px; margin: 6px 0 0; }

.form-error {
    background: rgba(194, 74, 62, 0.12); border: 1px solid rgba(194, 74, 62, 0.45);
    color: #F5C8C1; border-radius: 9px; padding: 11px 14px; font-size: 14px; margin-bottom: 18px;
}
.form-ok {
    background: rgba(88, 214, 141, 0.1); border: 1px solid rgba(88, 214, 141, 0.4);
    color: #B5EACB; border-radius: 9px; padding: 11px 14px; font-size: 14px; margin-bottom: 18px;
}

.checkbox { display: flex; gap: 9px; align-items: center; font-size: 14px; color: var(--muted); }
.checkbox input { accent-color: var(--gold); width: 16px; height: 16px; }

.form-foot { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }

/* ---- Account panel ------------------------------------------------------ */

.panel-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; font-size: 14.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--cream); }

.char-card { display: flex; align-items: center; gap: 20px; }
.char-portrait {
    width: 64px; height: 64px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 900; font-size: 26px; color: #171208;
    background: radial-gradient(circle at 30% 25%, #FFF3C4, var(--gold-2) 55%, #8C6B25);
    box-shadow: 0 0 22px rgba(227, 194, 106, 0.35);
}
.char-info h3 { margin: 0 0 4px; font-size: 20px; }
.char-stats { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.char-stats b { color: var(--gold-2); font-weight: 600; }

.panel-note { border-style: dashed; text-align: center; color: var(--muted); }
.panel-note h3 { color: var(--cream); }

h2.panel-title { font-size: 21px; margin: 0 0 18px; }

/* ---- FAQ / steps -------------------------------------------------------- */

.steps { counter-reset: step; }
.step { display: flex; gap: 20px; margin-bottom: 26px; }
.step-num {
    counter-increment: step; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 900; font-size: 19px; color: #171208;
    background: radial-gradient(circle at 30% 25%, #FFF3C4, var(--gold-2) 55%, #8C6B25);
    box-shadow: 0 0 18px rgba(227, 194, 106, 0.3);
}
.step h3 { margin: 6px 0 6px; font-size: 18px; }
.step p { color: var(--muted); margin: 0; font-size: 14.5px; }

details.faq {
    border: 1px solid var(--line-soft); border-radius: 10px; padding: 0 20px;
    margin-bottom: 12px; background: rgba(27, 42, 58, 0.3);
}
details.faq summary {
    cursor: pointer; padding: 15px 0; font-weight: 600; color: var(--cream);
    list-style: none; position: relative; padding-right: 30px;
}
details.faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    color: var(--gold-2); font-size: 20px; font-weight: 400;
}
details.faq[open] summary::after { content: "–"; }
details.faq p { color: var(--muted); margin: 0 0 16px; font-size: 14.5px; }

/* ---- Captcha / honeypot --------------------------------------------------- */

.captcha-box {
    background: rgba(7, 12, 20, 0.7);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    padding: 4px;
    margin-bottom: 10px;
    display: flex; justify-content: center;
}
.captcha-box svg { display: block; }

/* The honeypot lives far off-screen; humans never see or tab into it. */
.hp-field {
    position: absolute; left: -9999px; top: -9999px;
    height: 1px; width: 1px; overflow: hidden; opacity: 0;
}

/* ---- Cookie consent ------------------------------------------------------- */

.consent-bar {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 150;
    display: flex; align-items: center; gap: 18px;
    width: max-content; max-width: min(700px, calc(100% - 32px));
    padding: 14px 20px;
    background: rgba(10, 17, 29, 0.97);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.consent-bar p { margin: 0; font-size: 13.5px; color: var(--muted); }
.consent-bar b { color: var(--cream); }

@media (max-width: 640px) {
    .consent-bar { flex-direction: column; text-align: center; gap: 12px; }
}

/* ---- Reveal animations --------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.4s; }

/* ---- Error page ---------------------------------------------------------- */

.error-page { padding-top: 180px; min-height: 70vh; }
.error-code {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(70px, 14vw, 130px);
    line-height: 1; margin: 0 0 4px;
    background: linear-gradient(180deg, rgba(240, 217, 138, 0.55), rgba(201, 162, 75, 0.12));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page .lead { color: var(--muted); margin: 14px 0 30px; }

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

.site-footer {
    margin-top: 40px;
    background: var(--bg-deep);
    border-top: 1px solid var(--line);
    padding: 56px 0 30px;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 44px; margin-bottom: 36px; }
.footer-tagline { color: var(--muted); font-size: 14px; margin: 14px 0 10px; }
.footer-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-links h4 {
    font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-2); margin: 0 0 14px; font-family: var(--font-body); font-weight: 600;
}
.footer-links a { display: block; color: var(--muted); font-size: 14px; padding: 4px 0; }
.footer-links a:hover { color: var(--gold-3); }
.footer-note { border-top: 1px solid var(--line-soft); padding-top: 22px; }
.footer-note p { color: #5F6B7C; font-size: 12.5px; margin: 4px 0; }

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

@media (max-width: 960px) {
    .grid.cols-3, .news-grid { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .panel-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .world-band::before { background-attachment: scroll; }

    .nav-toggle { display: block; }
    .nav-links {
        position: fixed; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(7, 12, 20, 0.98); border-bottom: 1px solid var(--line);
        padding: 10px 24px 20px; display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links > a, .nav-links .inline-form { padding: 12px 4px; border-bottom: 1px solid var(--line-soft); }
    .nav-cta { margin: 14px 0 0; text-align: center; }
}

@media (max-width: 640px) {
    .grid.cols-3, .grid.cols-2, .grid.cols-4, .news-grid { grid-template-columns: 1fr; }
    .section { padding: 64px 0; }
    .podium { flex-direction: column; align-items: stretch; }
    .podium-card { flex-basis: auto; }
    .podium-card.first { order: -1; }
    .kv { grid-template-columns: 120px 1fr; }
    .auth-card { padding: 28px 22px; }
    .hero { min-height: 92vh; }
    .container { width: calc(100% - 32px); }
}

/* ============================================================================
   DESIGN V2 — "a living world" layer
   Ambient mist + floating lanterns site-wide, hero parallax, ink-wash mountain
   dividers, the class showcase, card tilt/sheen, word reveals, watermarks.
   ========================================================================== */

/* ---- Ambient atmosphere (site-wide) -------------------------------------- */

/* Content stacks above the fixed ambient layer. */
main, .site-footer { position: relative; z-index: 1; }

.ambient {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}

.ambient .mist {
    position: absolute; border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}
.ambient .m1 {
    width: 55vw; height: 34vh; left: -12vw; top: 16vh;
    background: radial-gradient(ellipse, rgba(63, 167, 196, 0.07), transparent 70%);
    animation: mist-a 120s ease-in-out infinite alternate;
}
.ambient .m2 {
    width: 48vw; height: 30vh; right: -10vw; top: 58vh;
    background: radial-gradient(ellipse, rgba(201, 162, 75, 0.06), transparent 70%);
    animation: mist-b 150s ease-in-out infinite alternate;
}

@keyframes mist-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(30vw, -8vh, 0) scale(1.25); }
}
@keyframes mist-b {
    from { transform: translate3d(0, 0, 0) scale(1.15); }
    to { transform: translate3d(-26vw, 6vh, 0) scale(0.95); }
}

#lanterns { position: absolute; inset: 0; }

/* ---- Hero v2: parallax, floating logo, rays, denser atmosphere ----------- */

.hero { --par-x: 0; --par-y: 0; }

.hero-mist {
    position: absolute; z-index: 0; border-radius: 50%;
    filter: blur(60px); pointer-events: none;
}
.hero-mist.hm1 {
    width: 70vw; height: 30vh; left: -10vw; bottom: 6vh;
    background: radial-gradient(ellipse, rgba(242, 239, 230, 0.10), transparent 70%);
    animation: heromist 26s ease-in-out infinite alternate;
}
.hero-mist.hm2 {
    width: 55vw; height: 24vh; right: -8vw; bottom: 18vh;
    background: radial-gradient(ellipse, rgba(63, 167, 196, 0.08), transparent 70%);
    animation: heromist 34s ease-in-out infinite alternate-reverse;
}
@keyframes heromist {
    from { transform: translateX(0) scale(1); }
    to { transform: translateX(6vw) scale(1.15); }
}

/* Soft god-rays breathing over the valley. */
.hero-rays {
    position: absolute; inset: -10% -20%; z-index: 0; pointer-events: none;
    background: repeating-linear-gradient(
        112deg,
        transparent 0 90px,
        rgba(240, 217, 138, 0.045) 90px 130px,
        transparent 130px 260px);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 62%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 62%);
    animation: rays 11s ease-in-out infinite alternate;
}
@keyframes rays {
    from { opacity: 0.5; transform: translateX(-14px); }
    to { opacity: 1; transform: translateX(14px); }
}

.logo-float {
    animation: logofloat 7s ease-in-out infinite;
    will-change: transform;
}
@keyframes logofloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
/* The parallax tilt lives on the MARK, not the image, so the dragon's eye glow rides
   the same transform as the art it sits on. */
.hero-mark {
    position: relative; display: inline-block; line-height: 0;
    transform: rotateX(calc(var(--par-y) * 4deg)) rotateY(calc(var(--par-x) * -4deg));
    transition: transform 0.25s ease-out;
}
.hero-content { perspective: 700px; }

/* ---- The dragon wakes ------------------------------------------------------ */

/* Placed on the eye in the artwork: 900x600 source, the gold glint at (625, 146).
   Screen blending keeps it a glint on the scales rather than a sticker over them.
   Lit by JS (the .breathing class) a beat before the breath, so the eye catches
   first and the fire follows -- see the dragon block in site.js. */
.dragon-eye {
    position: absolute; left: 69.4%; top: 24.3%;
    width: 3.4%; aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    background: radial-gradient(circle,
        rgba(255, 244, 205, 0.95) 0%,
        rgba(255, 198, 84, 0.8) 28%,
        rgba(255, 150, 30, 0.35) 52%,
        rgba(255, 130, 20, 0) 72%);
    mix-blend-mode: screen; opacity: 0; pointer-events: none;
}
/* 2.9s: the eye catches first and stays lit through the whole 1.6s breath. */
.hero-mark.breathing .dragon-eye { animation: dragon-eye 2.9s ease-out; }

@keyframes dragon-eye {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    8% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    18% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.05); }
    28% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    75% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}
.hero-tagline, .hero-sub {
    transform: translate3d(calc(var(--par-x) * -6px), calc(var(--par-y) * -4px), 0);
    transition: transform 0.25s ease-out;
}

/* Primary buttons get a shine sweep. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
    content: ""; position: absolute; top: -4px; bottom: -4px; width: 45%; left: -70%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.btn-primary:hover::before { left: 135%; }

/* ---- Nav "Play Now": the one button that breathes -------------------------
   A soft golden glow pulse + the shine sweep on a TIMER (not just hover) make
   the nav CTA the eye's landing spot without shouting. Hover switches back to
   the standard button behaviour; both animations stop under
   prefers-reduced-motion, like every other effect on the site. */
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(201, 162, 75, 0.35), 0 0 26px rgba(201, 162, 75, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
    50% { box-shadow: 0 0 16px rgba(227, 194, 106, 0.62), 0 0 44px rgba(227, 194, 106, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
@keyframes cta-shine {
    0%, 72% { left: -70%; }
    88%, 100% { left: 135%; }
}
.nav-cta { animation: cta-glow 2.8s ease-in-out infinite; }
.nav-cta::before { animation: cta-shine 4.6s ease-in-out infinite; }
/* Hover: drop the timers so the standard hover shadow + sweep take over cleanly. */
.nav-cta:hover { animation: none; }
.nav-cta:hover::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .nav-cta { animation: none; }
    .nav-cta::before { animation: none; }
}

/* ---- Ink-wash mountain edges (world band only) ----------------------------
   Dark silhouettes only work where they have CONTRAST -- over the misty valley
   photo. On the flat dark page background they read as a weird faint "wave"
   (user feedback), so the standalone dividers are gone; the ridges now frame
   the world-band image itself, blending into the page background. */

.world-band .band-edge {
    position: absolute; left: 0; right: 0; height: 88px; z-index: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,90 L0,66 L140,44 L300,72 L470,26 L610,62 L760,34 L910,66 L1060,30 L1210,58 L1330,42 L1440,60 L1440,90 Z' fill='%23070C14' opacity='0.85'/%3E%3Cpath d='M0,90 L0,78 L200,58 L380,82 L560,50 L740,78 L940,54 L1140,80 L1300,62 L1440,76 L1440,90 Z' fill='%230A111D'/%3E%3C/svg%3E")
        bottom center / 100% 100% no-repeat;
    pointer-events: none;
}
.world-band .band-edge.top { top: -1px; transform: scaleY(-1); }
.world-band .band-edge.bottom { bottom: -1px; }
.world-band .container { position: relative; z-index: 1; }

/* ---- Class showcase -------------------------------------------------------- */

.classes-band {
    display: flex; gap: 12px; min-height: 210px;
}

.class-panel {
    --class-color: var(--gold-2);
    flex: 1;
    display: flex; flex-direction: column; justify-content: flex-end;
    position: relative; overflow: hidden;
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(27, 42, 58, 0.35), rgba(10, 17, 29, 0.9));
    color: var(--text);
    transition: flex 0.5s cubic-bezier(0.22, 0.8, 0.3, 1), border-color 0.3s ease,
                transform 0.3s ease, box-shadow 0.3s ease;
}
.class-panel:hover {
    flex: 2.1;
    border-color: color-mix(in srgb, var(--class-color) 55%, transparent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    color: var(--text);
}
.class-panel::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 0%,
        color-mix(in srgb, var(--class-color) 18%, transparent), transparent 62%);
    opacity: 0.4; transition: opacity 0.35s ease;
}
.class-panel:hover::before { opacity: 1; }

.class-panel .glyph {
    width: 34px; height: 34px; margin-bottom: auto;
    color: var(--class-color);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--class-color) 55%, transparent));
    transition: transform 0.35s ease;
}
.class-panel:hover .glyph { transform: translateY(-6px) scale(1.08); }

.class-panel h3 {
    font-size: 18px; margin: 14px 0 3px; letter-spacing: 0.06em;
    color: var(--cream);
}
.class-panel .tag {
    color: var(--class-color); font-size: 13px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600; margin: 0;
}
.class-panel .more-text {
    color: var(--muted); font-size: 14px; margin: 10px 0 0;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height 0.45s ease, opacity 0.4s ease 0.08s;
}
.class-panel:hover .more-text { max-height: 130px; opacity: 1; }

.panel-trojan { --class-color: #F0B67F; }
.panel-warrior { --class-color: #A9C5E8; }
.panel-archer { --class-color: #A8D8A8; }
.panel-taoist { --class-color: #C9A9E8; }

/* ---- Card tilt + sheen ----------------------------------------------------- */

.tiltable {
    transform-style: preserve-3d;
    will-change: transform;
}
.tiltable .sheen {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%),
        rgba(240, 217, 138, 0.08), transparent 45%);
    opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.tiltable:hover .sheen { opacity: 1; }
.feature, .news-card, .podium-card { position: relative; }

/* ---- Word-by-word heading reveal ------------------------------------------ */

.section-head h2 .w, .page-head h1 .w {
    display: inline-block;
    opacity: 0; transform: translateY(0.55em);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: calc(var(--i) * 80ms);
}
/* The "show" selectors must OUT-SPECIFY the hide rule above (0,3,1 vs 0,2,1) --
   a bare `.words-in .w` loses and the headings stay invisible forever. */
.section-head.visible h2 .w,
.page-head h1.words-in .w,
h1.words-in .w, h2.words-in .w {
    opacity: 1; transform: none;
}

/* ---- Emblem watermark ------------------------------------------------------ */

.watermark { position: relative; }
.watermark::before {
    content: ""; position: absolute; inset: -40px 0;
    background: url('/img/mark.png') center / contain no-repeat;
    opacity: 0.05; pointer-events: none;
    filter: saturate(0.6);
}

/* ---- Podium crown ---------------------------------------------------------- */

.crown {
    width: 40px; height: 22px;
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    color: var(--gold-3);
    filter: drop-shadow(0 0 8px rgba(240, 217, 138, 0.7));
    animation: crownfloat 3.4s ease-in-out infinite;
}
@keyframes crownfloat {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -4px); }
}
.podium-card.first { padding-top: 52px; }

/* ---- Player profile / search ----------------------------------------------- */

.profile-card { padding: 34px 32px; }
.profile-head { display: flex; align-items: center; gap: 22px; }
.profile-head .char-portrait { width: 84px; height: 84px; font-size: 34px; }
.profile-name { font-size: clamp(26px, 4vw, 34px); margin: 0 0 8px; }
.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-rank { margin-left: auto; text-align: center; }
.profile-rank .num {
    font-family: var(--font-display); font-weight: 900; font-size: 34px;
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.profile-rank .lbl { color: var(--muted); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }

.portrait-trojan { background: radial-gradient(circle at 30% 25%, #FFE3C4, #F0B67F 55%, #8C5B25); }
.portrait-warrior { background: radial-gradient(circle at 30% 25%, #E4EFFC, #A9C5E8 55%, #4A6B94); }
.portrait-archer { background: radial-gradient(circle at 30% 25%, #DFF5DF, #A8D8A8 55%, #4E7D4E); }
.portrait-taoist { background: radial-gradient(circle at 30% 25%, #EBDFF8, #C9A9E8 55%, #6E4E94); }

.player-search {
    display: flex; gap: 10px; justify-content: center;
    max-width: 420px; margin: -10px auto 34px;
}
.player-search input {
    flex: 1; padding: 10px 16px; border-radius: 999px;
    background: rgba(7, 12, 20, 0.7); border: 1px solid var(--line-soft);
    color: var(--text); font: inherit; font-size: 14px;
}
.player-search input:focus {
    outline: none; border-color: rgba(227, 194, 106, 0.6);
    box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.15);
}
.player-search .btn { border-radius: 999px; }

a.player-name:hover { color: var(--gold-3); }

/* ---- Market ------------------------------------------------------------- */
/* A price list wants a table, not cards -- but it has to belong to the rest of the site, so the
   filters are the same pills the rankings use and the money is the loudest thing in the row. */

.market-tabs { margin-bottom: 22px; }
.market-tabs .tabs-sep {
    width: 1px; align-self: stretch; margin: 4px 6px;
    background: linear-gradient(180deg, transparent, var(--line), transparent);
}

.market-meta { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.market-meta b { color: var(--gold-3); }
.market-meta span { margin-left: 4px; }

.market-table thead th.col-price, .market-table td.col-price { text-align: right; }
.market-table thead th.col-where, .market-table td.col-where { white-space: nowrap; color: var(--muted); }
.market-table tbody tr:hover { background: rgba(201, 162, 75, 0.05); }

.market-item { font-weight: 600; color: #E8EDF5; }
.market-item.q-refined { color: #BFD8E6; }
.market-item.q-unique { color: #9FD8C0; }
.market-item.q-elite { color: #C9B6F0; }
.market-item.q-super { color: var(--gold-3); }

.item-tag.q-tag-super { background: rgba(201, 162, 75, 0.18); border-color: rgba(240, 217, 138, 0.6); }
.item-tag.q-tag-elite { background: rgba(150, 120, 220, 0.14); border-color: rgba(150, 120, 220, 0.45); color: #C9B6F0; }
.item-tag.q-tag-unique { background: rgba(80, 190, 150, 0.13); border-color: rgba(80, 190, 150, 0.42); color: #9FD8C0; }
.item-tag.q-tag-refined { background: rgba(120, 170, 205, 0.13); border-color: rgba(120, 170, 205, 0.4); color: #BFD8E6; }

.market-price {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px; font-weight: 700; color: #F2E6C8;
}
.market-unit {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.market-unit.unit-silver { background: rgba(180, 195, 215, 0.12); border: 1px solid rgba(180, 195, 215, 0.3); color: #C6D2E2; }
.market-unit.unit-cp { background: rgba(63, 167, 196, 0.16); border: 1px solid rgba(63, 167, 196, 0.45); color: #8FD4E8; }
.market-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* An empty market is a state worth dressing: three different silences, three different answers. */
.market-empty { text-align: center; padding: 40px 28px; }
.market-empty-mark { display: block; font-size: 30px; margin-bottom: 10px; opacity: 0.75; }
.market-empty h3 { font-family: var(--font-display); font-size: 20px; color: var(--gold-3); margin: 0 0 8px; }
.market-empty p { color: var(--muted); max-width: 520px; margin: 0 auto 14px; line-height: 1.6; }

.market-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 26px; }
.market-foot a { color: var(--gold-2); }
.market-foot a:hover { color: var(--gold-3); }
.p-name a { color: inherit; }
.p-name a:hover { color: var(--gold-3); }

/* ---- Ticking numbers ------------------------------------------------------- */

/* ★ Anything that changes every second uses INTER's tabular figures, not Cinzel.
   Cinzel ships no tabular set -- `font-variant-numeric` is silently ignored and its
   digits run 8.4px to 13.1px wide, so a clock re-measures itself on every tick and the
   frame around it breathes (owner, 2026-08-21: "skacze o kilka milimetrów co sekundę").
   Inter's tnum makes every digit exactly the same width, so the box never moves.
   min-width keeps it steady during the brief moment before the webfont loads. */
.rc-value, .agenda-count, .cd-cell b {
    font-family: var(--font-body); font-weight: 800;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.rc-value { min-width: 5em; text-align: center; }
/* The war clock also switches format once a siege ends ("00:00:00" -> "6d 22:00:00"), so its
   box is sized for the longer form and the plaque never changes width at all. */
.rc-war .rc-value { min-width: 6.6em; }
.agenda-count { display: inline-block; min-width: 6.2em; text-align: right; }   /* fits "6d 22:00:00" too */

/* ---- Realm clock (the hero plaque under the logo) -------------------------- */

/* Hangs under the mark like its pedestal: glass, a gold hairline and a slow sweep,
   so the live numbers read as part of the emblem rather than a widget parked on it. */
.realm-clock {
    position: relative; z-index: 1; overflow: hidden;
    display: inline-flex; align-items: center; gap: 20px;
    margin: 6px auto 22px; padding: 10px 20px;
    border: 1px solid rgba(201, 162, 75, 0.28); border-radius: 14px;
    background: linear-gradient(180deg, rgba(27, 42, 58, 0.55), rgba(8, 14, 24, 0.78));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    color: var(--text);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.realm-clock:hover {
    color: var(--text); transform: translateY(-2px);
    border-color: rgba(227, 194, 106, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 194, 106, 0.16);
}

/* The same shine gesture the primary buttons use, slowed to a heartbeat. */
.realm-clock::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(240, 217, 138, 0.13), transparent);
    pointer-events: none; animation: rc-sweep 7s ease-in-out infinite;
}
@keyframes rc-sweep { 0% { left: -60%; } 55%, 100% { left: 120%; } }

/* One row, so the plaque stays a slim band under the mark instead of pushing the
   call-to-action below the fold (it cost 62px stacked, 42 like this). */
.rc-item { display: flex; align-items: center; gap: 9px; }
.rc-glyph {
    width: 19px; height: 19px; flex: none; color: var(--gold-2); opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(227, 194, 106, 0.3));
}
.rc-label {
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted);
}
.rc-value {
    font-size: 18px; line-height: 1;          /* face + tabular figures: "Ticking numbers" above */
    letter-spacing: 0.04em; white-space: nowrap;
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rc-sep { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(201, 162, 75, 0.35), transparent); }
.rc-more {
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-3); opacity: 0.72; transition: opacity 0.25s ease;
}
.rc-more svg { width: 14px; height: 14px; }
.realm-clock:hover .rc-more { opacity: 1; }

/* Siege hour: the plaque goes red, and so does the valley mist behind the logo. */
.hero.war-live .realm-clock {
    border-color: rgba(194, 74, 62, 0.5);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(194, 74, 62, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero.war-live .rc-war .rc-label { color: #F0A79D; }
.hero.war-live .rc-war .rc-glyph { color: #F0A79D; filter: drop-shadow(0 0 9px rgba(194, 74, 62, 0.5)); }
.hero.war-live .rc-war .rc-value {
    background: linear-gradient(180deg, #F7D6D0, var(--red));
    -webkit-background-clip: text; background-clip: text;
}
.hero.war-live .hero-mist.hm2 { background: radial-gradient(ellipse, rgba(194, 74, 62, 0.16), transparent 70%); }

/* ---- Events showcase ("The rhythm of the realm") --------------------------- */

/* The weekly siege: the guide's own facts on the left, a live clock on the right. */
.war-card {
    display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center;
    position: relative; overflow: hidden;
    padding: 30px 32px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    backdrop-filter: blur(6px);
}
.war-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 140% at 100% 50%, rgba(184, 58, 46, 0.16), transparent 62%);
    opacity: 0.55;
}
.war-card.live {
    border-color: rgba(194, 74, 62, 0.55);
    box-shadow: var(--shadow), 0 0 0 1px rgba(194, 74, 62, 0.22);
}
.war-card.live::before { opacity: 1; animation: war-pulse 3.6s ease-in-out infinite; }
@keyframes war-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.war-main { position: relative; }
.war-main h3 { font-size: 25px; margin: 12px 0 14px; letter-spacing: 0.04em; }
.war-main .more { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.event-facts { list-style: none; padding: 0; margin: 0 0 18px; }
.event-facts li {
    position: relative; padding-left: 18px; margin: 7px 0;
    color: var(--muted); font-size: 14.5px; line-height: 1.6;
}
.event-facts li::before {
    content: ""; position: absolute; left: 0; top: 0.72em;
    width: 6px; height: 6px; transform: rotate(45deg);
    background: var(--gold); opacity: 0.85;
}
.event-facts strong { color: var(--cream); }

.war-clock { position: relative; text-align: center; min-width: 300px; }
.cd-label {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--muted); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--red);
    animation: live-dot 1.9s ease-out infinite;
}
@keyframes live-dot {
    0% { box-shadow: 0 0 0 0 rgba(194, 74, 62, 0.6); }
    70% { box-shadow: 0 0 0 11px rgba(194, 74, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(194, 74, 62, 0); }
}

.countdown { display: flex; gap: 10px; justify-content: center; margin: 14px 0 12px; }
.cd-cell {
    min-width: 64px; padding: 11px 6px 9px; border-radius: 12px;
    background: rgba(7, 12, 20, 0.6); border: 1px solid var(--line-soft);
}
.cd-cell b {
    display: block; line-height: 1; font-size: 27px;   /* face: "Ticking numbers" above */
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.war-card.live .cd-cell b { background: linear-gradient(180deg, #F5C8C1, var(--red)); -webkit-background-clip: text; background-clip: text; }
.cd-cell small { display: block; margin-top: 7px; color: var(--muted); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.cd-when { color: var(--muted); font-size: 13px; }

/* The daily rhythm: expand-in-place cards, each quoting its own guide. */
.daily-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 46px 0 18px; }
.daily-head h3 { margin: 0; font-size: 20px; letter-spacing: 0.06em; }
.daily-reset { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.daily-reset b { color: var(--gold-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.events-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }

.event-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.event-card:hover, .event-card.open {
    border-color: rgba(227, 194, 106, 0.4);
    box-shadow: 0 0 0 1px rgba(227, 194, 106, 0.14);
}

.event-head {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 18px; background: none; border: none; cursor: pointer;
    text-align: left; color: var(--text); font: inherit;
}
.event-head:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; }
.event-glyph {
    width: 26px; height: 26px; flex: none; color: var(--gold-2);
    filter: drop-shadow(0 0 8px rgba(227, 194, 106, 0.25));
}
.event-lines { flex: 1; min-width: 0; }
.event-title { display: block; font-family: var(--font-display); font-size: 16.5px; letter-spacing: 0.04em; color: var(--cream); }
.event-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.chip {
    padding: 3px 9px; border-radius: 999px; font-size: 11px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-3); border: 1px solid var(--line); background: rgba(201, 162, 75, 0.08);
}
.chip-place { color: #8FD4E8; border-color: rgba(63, 167, 196, 0.35); background: rgba(63, 167, 196, 0.08); }
.chip-bless { color: #F0D98A; border-color: rgba(240, 217, 138, 0.4); background: rgba(240, 217, 138, 0.1); }
.event-chev { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform 0.3s ease, color 0.3s ease; }
.event-card.open .event-chev { transform: rotate(180deg); color: var(--gold-2); }

/* visibility (not just max-height) keeps a collapsed card's link out of the tab order. */
.event-body {
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height 0.38s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s linear 0.38s;
}
.event-card.open .event-body {
    max-height: 460px; visibility: visible;
    transition: max-height 0.38s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s;
}
.event-body-inner { margin: 0 18px; padding: 14px 0 18px; border-top: 1px solid var(--line-soft); }
.event-body-inner p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.event-body-inner strong { color: var(--cream); }
.event-body-inner .more { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Calendar page (/events) ---------------------------------------------- */

/* An agenda of real dates: a torn calendar plate, the entry, and its distance in time. */
.agenda { display: flex; flex-direction: column; gap: 12px; }

.agenda-row {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 18px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--line-soft);
    transition: border-color 0.22s ease, transform 0.22s ease;
}
.agenda-row:hover { border-color: rgba(227, 194, 106, 0.32); transform: translateX(2px); }
.agenda-row.next { border-color: rgba(201, 162, 75, 0.42); box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.12); }

.date-plate {
    flex: none; width: 62px; padding: 8px 0; text-align: center;
    border-radius: 10px; border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(201, 162, 75, 0.12), rgba(7, 12, 20, 0.5));
}
.dp-dow { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-3); }
.dp-day {
    display: block; margin: 2px 0 1px; line-height: 1;
    font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--cream);
}
.dp-mon { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.agenda-body { flex: 1; min-width: 0; }
.agenda-body h4 {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 5px; font-size: 17px; letter-spacing: 0.03em; color: var(--cream);
}
.agenda-when { margin: 0; color: var(--muted); font-size: 13.5px; }

.agenda-tail { flex: none; text-align: right; }
.agenda-count {
    font-size: 17px; white-space: nowrap;      /* face: "Ticking numbers" above */
    background: linear-gradient(180deg, var(--gold-3), var(--gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.agenda-far { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Placeholders: deliberately quieter than anything real, and always labelled. */
.planned-note {
    max-width: 640px; margin: 12px auto 0; padding: 12px 16px;
    border-radius: 10px; border: 1px dashed rgba(227, 194, 106, 0.35);
    background: rgba(201, 162, 75, 0.06);
    color: var(--muted); font-size: 13.5px;
}
.planned-note strong { color: var(--gold-3); }

.planned-card { border-style: dashed; opacity: 0.92; }
.planned-card .planned-head { display: flex; align-items: center; gap: 12px; }
.planned-card .event-glyph { width: 24px; height: 24px; flex: none; color: var(--gold-2); opacity: 0.75; }
.planned-card .event-title { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.03em; color: var(--cream); }
.planned-card .event-chips { margin: 12px 0 10px; }
.planned-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.chip-planned { color: #C3CAD6; border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); }

/* ---- V2 responsive --------------------------------------------------------- */

@media (max-width: 960px) {
    .classes-band { flex-direction: column; min-height: 0; }
    .class-panel { flex: none; padding: 16px 18px; }
    .class-panel .more-text { max-height: none; opacity: 1; }
    .class-panel .glyph { margin-bottom: 10px; width: 30px; height: 30px; }

    .war-card { grid-template-columns: 1fr; gap: 26px; padding: 26px 24px; }
    .war-clock { min-width: 0; }
    .events-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .profile-head { flex-wrap: wrap; }
    .profile-rank { margin-left: 0; }
    .ambient .mist { display: none; }

    /* Narrow screens stack each chip (label over digits) so the two still sit side by side. */
    .realm-clock { gap: 12px; padding: 8px 13px; }
    .rc-more { display: none; }            /* the plaque itself is the link */
    .rc-item { flex-direction: column; align-items: flex-start; gap: 3px; }
    .rc-glyph { display: none; }
    .rc-value { font-size: 16px; }
    .rc-label { font-size: 9.5px; letter-spacing: 0.12em; }

    .agenda-row { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
    .agenda-tail { width: 100%; text-align: left; padding-left: 80px; }

    .events-grid { grid-template-columns: 1fr; }
    .countdown { gap: 7px; }
    .cd-cell { min-width: 0; flex: 1; padding: 9px 4px 7px; }
    .cd-cell b { font-size: 23px; }
    .daily-reset { margin-left: 0; }
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero::before { animation: none; }
    .scroll-cue { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .section-head h2 .w, .page-head h1 .w { opacity: 1; transform: none; transition: none; }
    .ambient .mist, .hero-mist, .hero-rays, .logo-float, .crown { animation: none; }
    .war-card::before, .live-dot, .realm-clock::after { animation: none; }
    .event-body, .event-chev { transition: none; }
    * { animation-duration: 0.001s !important; }
}

/* ============================================================
   TEMPORARY /test page (open beta) — remove together with
   Pages/Test.cshtml + the nav-test link (see doc/Website.md).
   ============================================================ */
.nav-links a.nav-test { color: #E8C36A; font-weight: 600; }
.nav-links a.nav-test:hover { color: #FFE49A; }

.test-page .card { margin-bottom: 22px; }
.test-page .card h2 { font-size: 20px; margin: 0 0 14px; }

.test-priority { border-color: rgba(201, 162, 75, 0.55); background: rgba(201, 162, 75, 0.06); }
.test-empty { color: var(--muted); font-style: italic; margin: 0; }

.test-list { list-style: none; padding: 0; margin: 0; }
.test-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); }
.test-list li:last-child { border-bottom: none; }
.item-text { flex: 1; min-width: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.item-done .item-text { opacity: 0.45; text-decoration: line-through; }
.item-meta { color: var(--muted); opacity: 0.75; font-size: 12.5px; white-space: nowrap; }
.item-bug .item-text { color: #C9EAF5; }
.bug-tag { display: inline-block; background: rgba(63, 167, 196, 0.15); color: #9FDCEF; border: 1px solid rgba(63, 167, 196, 0.4); border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; vertical-align: 1px; margin-right: 4px; }

/* Staff controls: tiny icon buttons on the ROW's right edge — no extra line. */
.item-actions { display: flex; gap: 6px; flex: none; margin-left: auto; padding-top: 2px; }
.item-actions form { margin: 0; }
.btn-icon { background: transparent; border: 1px solid var(--line-soft); color: var(--muted); border-radius: 6px; width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 12px; cursor: pointer; }
.btn-icon:hover { color: #A8D8A8; border-color: rgba(96, 178, 124, 0.6); }
.btn-icon-del:hover { color: #F0A79D; border-color: rgba(194, 74, 62, 0.6); }

.test-howto ul { color: var(--muted); margin: 0; padding-left: 20px; }
.test-howto li { margin: 5px 0; }
.test-howto p { color: var(--muted); }

/* Fixes section (player-verifiable) */
.test-fixes { border-color: rgba(96, 178, 124, 0.5); background: rgba(96, 178, 124, 0.05); }
.fix-intro { color: var(--muted); font-size: 13.5px; margin: -6px 0 12px; }
.item-fix .item-text i { color: var(--muted); opacity: 0.8; font-size: 12.5px; }
.fix-verified { display: inline-block; margin-left: 8px; color: #A8D8A8; font-size: 12.5px; font-weight: 600; }
.item-note { margin-top: 6px; padding: 6px 10px; border-left: 2px solid rgba(63, 167, 196, 0.5); background: rgba(63, 167, 196, 0.07); border-radius: 0 8px 8px 0; color: #C9EAF5; font-size: 13.5px; }

/* Player mini buttons on a fix row (right side, single line) */
.btn-mini { display: inline-block; background: transparent; border: 1px solid var(--line-soft); color: var(--muted); border-radius: 6px; padding: 2px 10px; font-size: 12px; line-height: 1.5; cursor: pointer; white-space: nowrap; list-style: none; }
.btn-mini::-webkit-details-marker { display: none; }
.btn-mini-ok { color: #A8D8A8; border-color: rgba(96, 178, 124, 0.5); }
.btn-mini-ok:hover { background: rgba(96, 178, 124, 0.15); }
.btn-mini:hover { border-color: rgba(63, 167, 196, 0.6); color: #C9EAF5; }

/* "Still broken" note popover (pure CSS <details>, no JS) */
/* The prepared test character for a check. Its own block, in gold, because appended to the
   paragraph it read as more description -- which was the whole complaint. */
.item-account {
    margin-top: 8px; padding: 7px 11px; border-left: 3px solid var(--gold);
    background: rgba(201, 162, 75, 0.10); border-radius: 0 8px 8px 0;
    color: #EBDCB4; font-size: 13.5px; line-height: 1.55;
}
.item-account .account-tag {
    display: inline-block; margin-right: 8px; padding: 1px 9px; border-radius: 999px;
    background: rgba(201, 162, 75, 0.22); border: 1px solid rgba(201, 162, 75, 0.55);
    color: var(--gold-3); font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
/* The login is the thing you actually type: big, gold and monospaced, not a word in a sentence. */
.item-account .account-login {
    display: inline-block; margin-right: 8px; padding: 2px 12px; border-radius: 7px;
    background: rgba(201, 162, 75, 0.26); border: 1px solid rgba(201, 162, 75, 0.75);
    color: #F7E9C2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
}
.item-account .account-what { display: block; margin-top: 5px; color: #D9CBA6; }
.item-account .account-pass {
    margin-left: 8px; padding: 1px 8px; border-radius: 6px;
    background: rgba(7, 12, 20, 0.55); color: var(--gold-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: nowrap;
}

.test-list li { position: relative; }
.note-details { position: static; }
.note-details > summary { cursor: pointer; }
/* Inline (in-flow) so the comment form EXPANDS the row downward instead of floating absolutely
   -- an absolutely-positioned popup was clipped/covered by the next bug card (its own stacking
   context / the card's overflow:hidden), so testers couldn't reach it (Szafut, 2026-08-20). */
.note-pop { position: static; margin-top: 8px; width: 100%; max-width: 460px; background: #101B2D; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.note-pop textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); border-radius: 8px; color: inherit; padding: 8px 10px; font: inherit; font-size: 13.5px; margin-bottom: 8px; resize: vertical; }
.note-pop textarea:focus { outline: none; border-color: rgba(63, 167, 196, 0.6); }