/* ============================================================
   foryougames.com — Design System v1
   Palette: darkness opening into blood.
   #0A0A0A → #4A0510 → #8B0A1E
   ============================================================ */

/* Display font: Playfair Display (self-hosted variable font, 400-900) —
   premium editorial headings site-wide, real bold weights. Lore font:
   Cinzel (variable 400-900) — epic Roman-inscription style reserved for
   the stories/lore identity. */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/assets/fonts/playfair-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/assets/fonts/playfair-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/assets/fonts/cinzel-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/assets/fonts/cinzel-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand palette */
    --ink-0: #0A0A0A;      /* deepest black — page base */
    --ink-1: #111013;      /* raised surfaces */
    --ink-2: #1A171B;      /* cards */
    --ink-3: #262027;      /* borders, dividers */
    --wine-900: #2B040A;
    --wine-700: #4A0510;   /* bordeaux */
    --blood-500: #8B0A1E;  /* blood red — primary accent */
    --blood-400: #B01530;
    --blood-300: #D64258;  /* hover / highlights */

    /* Text */
    --text-hi: #F2EEEF;
    --text-mid: #B5ACB0;
    --text-low: #7A7276;

    /* Semantics */
    --surface: var(--ink-1);
    --card: var(--ink-2);
    --border: var(--ink-3);
    --accent: var(--blood-500);
    --accent-soft: rgba(139, 10, 30, 0.16);

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Normal headings: clean, professional sans (system UI stack). */
    --font-display: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-lore: "Cinzel", Georgia, "Times New Roman", serif;
    /* Story reading prose keeps the literary serif. */
    --font-story: "Playfair Display", Georgia, "Times New Roman", serif;

    /* Layout */
    --container: 2200px;
    --radius: 10px;
    --radius-lg: 16px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background: var(--ink-0);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 48px);
}
/* Reading-width wrapper: long-form text / forms stay legible on wide screens. */
.container--read { max-width: min(100%, 900px); }

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* ---- Page transitions (cross-document, progressive enhancement) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fyg-vt-out 0.26s var(--ease) both; }
::view-transition-new(root) { animation: fyg-vt-in 0.34s var(--ease) both; }
@keyframes fyg-vt-out { to { opacity: 0; } }
@keyframes fyg-vt-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Content cascade: top-level bands rise in, one below another ---- */
@keyframes fyg-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.site-main > * { animation: fyg-enter 0.5s var(--ease) both; }
.site-main > *:nth-child(1) { animation-delay: 0.03s; }
.site-main > *:nth-child(2) { animation-delay: 0.11s; }
.site-main > *:nth-child(3) { animation-delay: 0.19s; }
.site-main > *:nth-child(4) { animation-delay: 0.27s; }
.site-main > *:nth-child(5) { animation-delay: 0.35s; }
.site-main > *:nth-child(n+6) { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
    .site-main > * { animation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ============ Header ============ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 10, 10, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}
.nav {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    flex-wrap: nowrap;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    line-height: 1;
}
.logo-mark-img {
    height: 34px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(139, 10, 30, 0.4));
}
.logo-text { line-height: 1; }
.logo-text em { font-style: normal; color: var(--blood-300); }

/* Header search (spec §100) */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 210px;
    min-width: 0;
}
.nav-search-icon {
    position: absolute;
    left: 11px;
    font-size: 0.85rem;
    opacity: 0.7;
    pointer-events: none;
}
.nav-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border-radius: 999px;
    background: var(--ink-2);
    border: 1px solid var(--border);
    color: var(--text-hi);
    font: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-search input:focus {
    outline: none;
    border-color: var(--blood-500);
    background: var(--ink-1);
}
.nav-search input::placeholder { color: var(--text-low); }

/* Header ticker: sliding strip that fills the middle on wide screens. */
.nav-ticker { display: none; }
@media (min-width: 1280px) {
    .nav-ticker {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        margin-inline: 6px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    /* Let the ticker claim the free space instead of the nav links. */
    .nav-collapse { flex: 0 1 auto; }
}
.nav-ticker-track {
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    animation: nav-ticker-scroll 55s linear infinite;
}
.nav-ticker:hover .nav-ticker-track { animation-play-state: paused; }
@keyframes nav-ticker-scroll { to { transform: translateX(-50%); } }
.nav-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 0.84rem;
    color: var(--text-mid);
}
.nav-ticker-item:hover .tk-title { color: var(--text-hi); }
.tk-lbl {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blood-300);
    white-space: nowrap;
}
.tk-lbl--news { color: var(--text-low); }
.tk-title { color: var(--text-mid); transition: color 0.2s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .nav-ticker-track { animation: none; }
}

/* Header live-search dropdown */
.nav-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(420px, 92vw);
    max-height: min(72vh, 560px);
    overflow-y: auto;
    background: var(--ink-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6);
    padding: 6px;
    z-index: 200;
}
.ns-group + .ns-group { border-top: 1px solid var(--border); }
.ns-head {
    font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--blood-300); font-weight: 600; padding: 9px 10px 5px;
}
.ns-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--text-mid); }
.ns-row:hover { background: var(--accent-soft); color: var(--text-hi); }
.ns-thumb {
    width: 44px; height: 30px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
    background: var(--ink-2); display: grid; place-items: center; font-size: 0.95rem;
}
.ns-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ns-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ns-av img { width: 100%; height: 100%; object-fit: cover; }
.ns-av--i {
    display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; color: #fff;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
}
.ns-main { display: flex; flex-direction: column; min-width: 0; }
.ns-title { color: var(--text-hi); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-sub { color: var(--text-low); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-all {
    display: block; text-align: center; padding: 11px; margin-top: 4px;
    font-size: 0.8rem; color: var(--blood-300); border-top: 1px solid var(--border);
}
.ns-all:hover { color: var(--text-hi); }
.ns-empty { padding: 22px; text-align: center; color: var(--text-low); font-size: 0.85rem; }

.nav-collapse { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; flex-wrap: nowrap; }
/* margin-left:auto pushes the links + user actions to the right, next to
   the language switch — closing the gap after the last link. */
.nav-links { display: flex; gap: 2px; min-width: 0; flex-wrap: nowrap; margin-left: auto; }
.nav-link {
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text-mid);
    font-size: 0.9rem;
    white-space: nowrap;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-link--active { color: var(--text-hi); background: var(--accent-soft); }
a.nav-link:hover { color: var(--text-hi); background: var(--accent-soft); }
.nav-link--soon { cursor: default; opacity: 0.45; }

.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Header auth buttons: never wrap to two lines, stay compact so the
   guest header (nav + search + buttons + lang) fits on one row. */
.nav-actions .btn--sm {
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 0.88rem;
    min-width: 92px;
    text-align: center;
}
@media (max-width: 1360px) and (min-width: 1081px) {
    .nav-link { padding: 7px 7px; font-size: 0.92rem; }
    .nav-actions { gap: 8px; }
    .nav-actions .btn--sm { padding: 6px 8px; font-size: 0.85rem; min-width: 84px; }
}

/* Language switcher */
.lang-switch { position: relative; }
.lang-btn {
    background: var(--ink-2);
    color: var(--text-mid);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-btn:hover { border-color: var(--blood-500); color: var(--text-hi); }
.lang-caret { font-size: 0.7em; opacity: 0.7; }
.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 170px;
    background: var(--ink-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    animation: menu-in 0.18s var(--ease);
}
@keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.lang-flag {
    display: inline-block;
    width: 21px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: -2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.lang-btn { display: inline-flex; align-items: center; gap: 7px; }
.lang-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 0.9rem;
    color: var(--text-mid);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.lang-item:hover { background: var(--accent-soft); color: var(--text-hi); }
.lang-item--active { color: var(--blood-300); }

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius);
    border: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.btn-primary {
    background: linear-gradient(135deg, var(--wine-700) 0%, var(--blood-500) 100%);
    color: #fff;
    box-shadow: 0 4px 24px rgba(139, 10, 30, 0.35);
}
/* Green sibling of btn-primary (same metrics) — used for the header Log in. */
.btn-success {
    background: linear-gradient(135deg, #14532D 0%, #1F8A4C 100%);
    color: #fff;
    box-shadow: 0 4px 24px rgba(31, 138, 76, 0.35);
}
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(31, 138, 76, 0.5);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(139, 10, 30, 0.5);
}
.btn--disabled { opacity: 0.55; cursor: default; }
.btn--disabled:hover { transform: none; box-shadow: 0 4px 24px rgba(139, 10, 30, 0.35); }

/* ============ Hero ============ */
.hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 100px;
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(74, 5, 16, 0.55), transparent 65%),
        var(--ink-0);
}
.hero-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 30% at 70% 20%, rgba(139, 10, 30, 0.12), transparent 70%),
        radial-gradient(ellipse 30% 25% at 25% 65%, rgba(74, 5, 16, 0.18), transparent 70%);
    pointer-events: none;
}
.hero-inner { position: relative; max-width: 780px; }
.hero--wall .hero-inner {
    max-width: var(--container);
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(28px, 4vw, 52px);
}
.hero--wall .hero-copy { max-width: 620px; position: relative; z-index: 2; }
@media (min-width: 900px) {
    .hero--wall .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Hero poster wall */
.hero-posters { position: relative; display: none; height: clamp(400px, 44vw, 580px); overflow: hidden; }
@media (min-width: 900px) { .hero-posters { display: block; } }
.hero-posters-tilt {
    position: absolute; inset: -10% -6%;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    transform: perspective(1500px) rotateY(-20deg) rotateZ(6deg) scale(1.05);
    transform-origin: center;
    -webkit-mask-image: radial-gradient(125% 100% at 78% 50%, #000 42%, transparent 90%);
            mask-image: radial-gradient(125% 100% at 78% 50%, #000 42%, transparent 90%);
}
.hero-pcol { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.hero-pcol--0 { animation: hero-wall-up 42s linear infinite; }
.hero-pcol--1 { animation: hero-wall-down 50s linear infinite; }
.hero-pcol--2 { animation: hero-wall-up 58s linear infinite; }
@keyframes hero-wall-up { to { transform: translateY(-50%); } }
@keyframes hero-wall-down { from { transform: translateY(-50%); } }
.hero-poster {
    display: block; aspect-ratio: 3 / 4; flex-shrink: 0;
    border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); background: var(--ink-2);
}
.hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .hero-pcol { animation: none; } }

/* Dashboard hero: living cinematic atmosphere (drifting red aurora). */
.dash-hero-aurora {
    position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 42% 52% at 18% 28%, rgba(168, 24, 47, 0.30), transparent 60%),
        radial-gradient(ellipse 38% 48% at 82% 72%, rgba(90, 12, 30, 0.32), transparent 62%),
        radial-gradient(ellipse 34% 40% at 58% 12%, rgba(139, 10, 30, 0.20), transparent 65%);
    filter: blur(24px);
    animation: dash-aurora 18s ease-in-out infinite alternate;
}
@keyframes dash-aurora {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-1deg); opacity: 0.85; }
    50%  { transform: translate3d(2%, 3%, 0) scale(1.12) rotate(1deg); opacity: 1; }
    100% { transform: translate3d(4%, -2%, 0) scale(1.06) rotate(0deg); opacity: 0.8; }
}
.dash-hero-inner { z-index: 1; }
.dash-hero { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.dash-title { font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
@media (prefers-reduced-motion: reduce) { .dash-hero-aurora { animation: none; } }
.hero-kicker {
    color: var(--blood-300);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 20px;
    animation: rise 0.7s var(--ease) both;
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.08;
    font-weight: 700;
    margin-bottom: 24px;
    animation: rise 0.7s var(--ease) 0.1s both;
}
.hero-title-accent {
    background: linear-gradient(100deg, var(--blood-300), var(--blood-500) 60%, var(--wine-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    color: var(--text-mid);
    font-size: 1.15rem;
    max-width: 560px;
    margin-bottom: 40px;
    animation: rise 0.7s var(--ease) 0.2s both;
}
.hero-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: rise 0.7s var(--ease) 0.3s both;
}
.hero-cta-note { color: var(--text-low); font-size: 0.9rem; }

@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============ Pillars ============ */
.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(14px, 1.5vw, 22px);
    padding-block: 40px 100px;
}
.pillar-card {
    background: linear-gradient(160deg, var(--ink-2), var(--ink-1));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pillar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 10, 30, 0.55);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(139, 10, 30, 0.12);
}
.pillar-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--blood-300);
    font-size: 1.2rem;
    margin-bottom: 18px;
}
.pillar-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin-bottom: 8px;
}
.pillar-text { color: var(--text-mid); font-size: 0.92rem; }

/* ============ Footer ============ */
.site-footer {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(ellipse 60% 120% at 15% 0%, rgba(74, 5, 16, 0.35), transparent 60%),
        var(--ink-1);
    margin-top: 40px;
}
.footer-glow {
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--blood-500) 30%, var(--blood-400) 50%, var(--blood-500) 70%, transparent);
    opacity: 0.7;
}
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 36px;
    padding-block: 52px 36px;
}
.footer-brand-col { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo-img { height: 34px; width: auto; filter: drop-shadow(0 0 8px rgba(139, 10, 30, 0.4)); }
.footer-brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-hi); }
.footer-brand em { font-style: normal; color: var(--blood-300); }
.footer-tagline { color: var(--text-mid); font-size: 0.9rem; max-width: 320px; line-height: 1.6; }
.footer-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.footer-flag {
    display: block;
    width: 26px; height: 18px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
    opacity: 0.55;
    transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.footer-flag img { width: 100%; height: 100%; object-fit: cover; }
.footer-flag:hover { opacity: 1; transform: translateY(-2px); border-color: var(--blood-500); }
.footer-flag--active { opacity: 1; border-color: var(--blood-400); }

.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
    font-family: var(--font-display);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--blood-300);
    margin-bottom: 4px;
}
.footer-col a { color: var(--text-mid); font-size: 0.92rem; transition: color 0.15s var(--ease), padding-left 0.15s var(--ease); }
.footer-col a:hover { color: var(--text-hi); padding-left: 4px; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-low);
    font-size: 0.82rem;
}
.footer-credit { color: var(--text-low); }

/* ============ Mobile navigation (hamburger) ============ */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    cursor: pointer;
}
.nav-burger span {
    display: block;
    width: 20px; height: 2px;
    margin: 0 auto;
    background: var(--text-hi);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.site-header.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Collapse the crowded nav into a hamburger before the links can wrap.
   The bar holds logo + search + up to 9 links + actions + language, so it
   needs a wide runway before it fits on one row. */
/* Settings shortcut lives in the burger menu on mobile only; on desktop it's in the avatar dropdown. */
.nav-link--mobile { display: none; }

@media (max-width: 1080px) {
    .nav { gap: 12px; }
    .nav-burger { display: flex; }
    .nav-link--mobile { display: block; }
    .nav-search { flex: 1 1 auto; }
    .nav-collapse {
        display: none;
        flex: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        background: var(--ink-1);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
        padding: 12px 16px 20px;
    }
    .site-header.nav-open .nav-collapse { display: flex; }
    .nav-links {
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }
    .nav-link { padding: 13px 14px; font-size: 1rem; border-radius: 10px; }
    .nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }
    .nav-actions .btn,
    .nav-actions .nav-link { width: 100%; text-align: center; justify-content: center; }
    .nav-username { display: inline; }
    .nav-msg { align-self: center; }
    /* User menu flattens inside the hamburger: avatar row + expanded list. */
    .user-menu { width: 100%; }
    .user-menu .nav-user {
        width: 100%;
        justify-content: center;
        padding: 10px;
        background: var(--ink-2);
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .user-caret { display: none; }
    .user-menu-list,
    .user-menu-list[hidden] {
        display: block;
        position: static;
        width: 100%;
        margin-top: 8px;
        box-shadow: none;
        animation: none;
    }
    /* Language switch stays in the top bar (compact: flag + caret). */
    .lang-code { display: none; }
    .lang-menu { right: 0; left: auto; }
}
@media (max-width: 620px) {
    .logo-text { display: none; } /* keep the FY mark, give the search room */
}

@media (max-width: 760px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 40px 28px; }
    .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============ Auth pages & forms ============ */
.auth-page {
    display: flex;
    justify-content: center;
    padding-block: 72px 100px;
}
.auth-card {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(165deg, var(--ink-2), var(--ink-1));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: rise 0.5s var(--ease) both;
}
.auth-card--wide { max-width: 620px; }
.auth-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    margin-bottom: 8px;
}
.auth-sub { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 28px; }
.auth-sub strong { color: var(--text-hi); }

.auth-form { display: flex; flex-direction: column; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mid);
}
.form-input {
    background: var(--ink-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-hi);
    font: inherit;
    padding: 12px 14px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-input:focus {
    outline: none;
    border-color: var(--blood-500);
    box-shadow: 0 0 0 3px rgba(139, 10, 30, 0.22);
}
.form-input--error { border-color: var(--blood-400); }
.form-input--code {
    font-size: 1.6rem;
    letter-spacing: 0.6em;
    text-align: center;
    font-family: var(--font-display);
}
.form-hint { color: var(--text-low); font-size: 0.8rem; }
.form-error { color: var(--blood-300); font-size: 0.82rem; }

.form-alert {
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}
.form-alert--error {
    background: rgba(139, 10, 30, 0.14);
    border: 1px solid rgba(139, 10, 30, 0.5);
    color: var(--blood-300);
}
.form-alert--notice {
    background: rgba(60, 120, 60, 0.12);
    border: 1px solid rgba(90, 160, 90, 0.4);
    color: #9BC89B;
}

.btn--block { width: 100%; }
.btn--sm { padding: 8px 18px; font-size: 0.9rem; border-radius: 8px; }

.auth-switch { margin-top: 24px; text-align: center; color: var(--text-mid); font-size: 0.9rem; }
.auth-switch a { color: var(--blood-300); }
.auth-switch a:hover { text-decoration: underline; }

.auth-resend { margin-top: 18px; text-align: center; }
.link-btn {
    background: none;
    border: none;
    color: var(--blood-300);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link-btn:hover { color: var(--blood-400); }

/* Onboarding chips */
.chip-group { border: none; display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}
.chip span {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--ink-0);
    color: var(--text-mid);
    font-size: 0.9rem;
    transition: all 0.2s var(--ease);
    user-select: none;
}
.chip:hover span { border-color: var(--blood-500); color: var(--text-hi); }
.chip input:checked + span {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 14px rgba(139, 10, 30, 0.4);
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(139, 10, 30, 0.35); }

/* Auth-aware nav */
.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-mid);
    font-size: 0.92rem;
}
/* On desktop the avatar alone represents the user; the name shows in the
   mobile menu. This keeps the crowded owner nav on one row. */
.nav-username { display: none; }

/* User menu (avatar dropdown: profile, settings, staff tools, logout) */
.user-menu { position: relative; }
.user-menu .nav-user {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-mid);
    padding: 3px;
    border-radius: 999px;
}
.user-menu .nav-user:hover { color: var(--text-hi); }
.user-caret { font-size: 0.7em; opacity: 0.6; }
.user-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    list-style: none;
    background: var(--ink-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    z-index: 120;
    animation: menu-in 0.18s var(--ease);
}
.user-menu-head {
    padding: 8px 12px 10px;
    font-weight: 700;
    color: var(--text-hi);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.user-menu-list a,
.user-menu-list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 7px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-mid);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.user-menu-list a:hover,
.user-menu-list button:hover { background: var(--accent-soft); color: var(--text-hi); }
.user-menu-staff { color: #E8C77B !important; }
.user-menu-sep { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.user-menu-sep button { color: var(--blood-300); }
.nav-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-logout-form { display: inline; }
.nav-link--btn {
    background: none;
    border: none;
    color: var(--text-mid);
}

/* ============ Panels (shared) ============ */
.panel {
    background: linear-gradient(165deg, var(--ink-2), var(--ink-1));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
}
.panel-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin-bottom: 16px;
    color: var(--text-hi);
}
.panel-note { color: var(--text-low); font-size: 0.88rem; margin-top: 14px; }
.panel-note--tight { margin: -6px 0 14px; }

/* ============ Profile ============ */
.profile-banner { position: relative; }
.profile-banner-bg {
    height: 220px;
    background:
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(139, 10, 30, 0.35), transparent 60%),
        linear-gradient(150deg, var(--wine-900), var(--ink-1) 70%);
    border-bottom: 1px solid var(--border);
}
.profile-head {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-top: -56px;
    position: relative;
    padding-bottom: 8px;
}
.profile-banner-bg--img { background-size: cover; background-position: center; }
.profile-avatar--lg {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border: 3px solid var(--ink-0);
    color: #fff;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.profile-avatar--lg img { width: 100%; height: 100%; object-fit: cover; }
.profile-private-tag { font-size: 0.7em; vertical-align: middle; }
.profile-about {
    color: var(--text-mid);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 720px;
    margin-top: 14px;
}

/* Profile posts (wall) */
.post-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.post-attach {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--blood-300); font-size: 0.88rem; cursor: pointer;
}
.post-attach:hover { color: var(--blood-400); }
.post-feed { display: flex; flex-direction: column; gap: 16px; }
.post-item { padding: 18px 20px; }
.post-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.post-author { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.post-author .topic-meta { display: block; }
.post-body { color: var(--text-mid); line-height: 1.7; overflow-wrap: break-word; }
.post-image {
    margin-top: 12px;
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.post-empty { text-align: center; padding: 20px; }

/* Private profile notice */
.private-notice { text-align: center; padding: 48px 24px; }
.private-lock { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.8; }

/* Settings preview */
.settings-banner-preview {
    position: relative;
    height: 150px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 70% 120% at 30% 0%, rgba(139, 10, 30, 0.3), transparent 60%),
        linear-gradient(150deg, var(--wine-900), var(--ink-1) 70%);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
    margin-bottom: 34px;
}
.settings-avatar-preview {
    position: absolute;
    bottom: -24px;
    left: 24px;
    width: 84px; height: 84px;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border: 3px solid var(--ink-1);
    color: #fff;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
}
.settings-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.profile-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.profile-joined { color: var(--text-low); font-size: 0.88rem; }

.rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(139, 10, 30, 0.45);
    color: var(--blood-300);
    font-size: 0.85rem;
    font-weight: 600;
}
.rank-num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    color: #fff;
    font-size: 0.78rem;
}

.profile-body { padding-block: 32px 90px; }
.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(16px, 1.6vw, 26px);
    align-items: start;
    max-width: 1500px;
    margin-inline: auto;
}
.profile-main, .profile-side { display: flex; flex-direction: column; gap: 20px; }

.xp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.xp-value { font-family: var(--font-display); font-size: 1.3rem; }
.xp-next { color: var(--text-low); font-size: 0.85rem; }
.xp-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--ink-0);
    border: 1px solid var(--border);
    overflow: hidden;
}
.xp-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wine-700), var(--blood-400));
    transition: width 0.6s var(--ease);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: 12px;
}
.stat {
    background: var(--ink-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-hi); }
.stat-label { color: var(--text-low); font-size: 0.78rem; }

.chips--static { margin-top: 4px; }
.chip-static {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(139, 10, 30, 0.4);
    color: var(--blood-300);
    font-size: 0.85rem;
}

/* ============ Dashboard ============ */
.dash-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 48px;
    background:
        radial-gradient(ellipse 80% 70% at 50% -20%, rgba(74, 5, 16, 0.5), transparent 65%),
        var(--ink-0);
    border-bottom: 1px solid var(--border);
}
.dash-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.dash-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    margin-bottom: 10px;
}
.dash-rank-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 14px;
    min-width: 240px;
    background: linear-gradient(165deg, var(--ink-2), var(--ink-1));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.dash-rank-card:hover { border-color: rgba(139, 10, 30, 0.55); transform: translateY(-2px); }
.dash-rank-level {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}
.dash-rank-info { display: flex; flex-direction: column; }
.dash-rank-name { font-weight: 600; }
.dash-rank-xp { color: var(--text-low); font-size: 0.82rem; }
.xp-bar--mini { grid-column: 1 / -1; height: 6px; }

.dash-body { padding-block: 36px 90px; }
.dash-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(16px, 1.6vw, 26px);
    align-items: start;
    max-width: 1500px;
    margin-inline: auto;
}
.dash-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.activity-list { display: flex; flex-direction: column; gap: 4px; }
.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 6px;
    border-radius: 8px;
    transition: background 0.15s var(--ease);
}
.activity-item:hover { background: var(--accent-soft); }
.activity-text { font-size: 0.86rem; color: var(--text-mid); line-height: 1.45; }
.activity-user { color: var(--text-hi); font-weight: 600; }
.activity-user:hover { color: var(--blood-300); }
.activity-text a:not(.activity-user) { color: var(--blood-300); }
.activity-time { display: block; margin-top: 2px; }
.suggest-row { gap: 10px; }
.suggest-row .review-user { flex: 1; min-width: 0; }
.suggest-name { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: 0.9rem; }
.suggest-name .topic-meta { font-weight: 400; }
.suggest-row .btn { flex-shrink: 0; }
.dash-col { display: flex; flex-direction: column; gap: 20px; }

.journey { display: flex; flex-direction: column; gap: 4px; }
.journey-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: var(--radius);
    color: var(--text-mid);
    font-size: 0.95rem;
}
.journey-step--done { color: var(--text-hi); }
.journey-mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink-0);
    border: 1px solid var(--border);
    color: var(--text-low);
    font-size: 0.8rem;
}
.journey-step--done .journey-mark {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
}
.journey-soon {
    font-style: normal;
    color: var(--blood-300);
    font-size: 0.78rem;
    margin-left: 6px;
    opacity: 0.85;
}

.remember-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-mid);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}
.remember-check { accent-color: var(--blood-500); width: 16px; height: 16px; }

@media (max-width: 860px) {
    .profile-grid, .dash-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .nav-username { display: none; }
}

/* ============ Page head (shared) ============ */
.page-head {
    padding: 52px 0 8px;
    background: radial-gradient(ellipse 70% 90% at 50% -30%, rgba(74, 5, 16, 0.4), transparent 65%);
}
.page-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-sub { color: var(--text-mid); margin-top: 6px; }
.section-title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 16px; }
.section-title--mp {
    background: linear-gradient(100deg, #E8C77B, var(--blood-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============ Game cards ============ */
.game-grid,
.game-grid--6,
.game-grid--3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 1.4vw, 20px);
}
/* Fixed column steps — each count (2,3,4,6,8) divides the 24-per-page total,
   so the last row always fills completely at every width. */
@media (min-width: 560px)  { .game-grid, .game-grid--6, .game-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .game-grid, .game-grid--6, .game-grid--3 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .game-grid, .game-grid--6, .game-grid--3 { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 2000px) { .game-grid, .game-grid--6, .game-grid--3 { grid-template-columns: repeat(8, 1fr); } }
.game-card {
    display: flex;
    flex-direction: column;
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 10, 30, 0.6);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.game-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink-0);
}
.game-card-media img { width: 100%; height: 100%; object-fit: cover; }
.game-card-noimg {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--wine-700);
    font-size: 2rem;
}
.game-card-score {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid var(--blood-500);
    color: var(--blood-300);
    font-weight: 700;
    font-size: 0.9rem;
}
.gd-votes--none { font-style: italic; }
.game-card-body { padding: 14px 16px 16px; }
.game-card-name { font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.game-card-sub {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    color: var(--text-low);
    font-size: 0.8rem;
}

/* Masterpiece treatment (spec §29: premium, not loud) */
.game-card--masterpiece {
    border-color: rgba(232, 199, 123, 0.45);
    box-shadow: 0 0 22px rgba(139, 10, 30, 0.18);
}
.game-card--masterpiece:hover {
    border-color: rgba(232, 199, 123, 0.8);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 28px rgba(232, 199, 123, 0.15);
}
.masterpiece-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 3px 10px;
    border-radius: 6px;
    background: linear-gradient(110deg, #2B2416, #4A3A18);
    border: 1px solid rgba(232, 199, 123, 0.6);
    color: #E8C77B;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.masterpiece-tag--lg { position: static; display: inline-block; margin-bottom: 12px; font-size: 0.75rem; }

.mp-strip { padding-block: 24px 8px; }

/* ============ Games toolbar ============ */
.games-toolbar { padding-block: 20px 4px; }
.games-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.games-search { flex: 1; min-width: 200px; }
.games-select { min-width: 150px; appearance: auto; }
.games-results { padding-block: 20px 80px; }

.pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 32px;
}
.page-link {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding-inline: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--ink-2);
    color: var(--text-mid);
    font-size: 0.9rem;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.page-link:hover { border-color: var(--blood-500); color: var(--text-hi); }
.page-link--active {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
}

.empty-state { text-align: center; padding: 70px 20px; }
.empty-title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 8px; }
.empty-text { color: var(--text-mid); }

.rawg-credit { margin-top: 28px; color: var(--text-low); font-size: 0.78rem; }
.rawg-credit--tight { margin-top: 16px; }
.rawg-credit a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }

/* ============ Game detail ============ */
.gd-hero { position: relative; overflow: hidden; }
.gd-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    filter: saturate(0.9);
    opacity: 0.45;
}
.gd-hero--masterpiece .gd-hero-bg { opacity: 0.5; }
.gd-hero-fade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.35) 40%, var(--ink-0) 96%),
        radial-gradient(ellipse 60% 80% at 20% 100%, rgba(74, 5, 16, 0.4), transparent 60%);
}
.gd-hero-inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    padding: 120px 24px 36px;
}
/* Title block lines up with the .gd-grid body below (same 1440 cap, centered). */
.gd-headline { width: 100%; max-width: 1440px; margin-inline: auto; }
.gd-cover {
    width: 200px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
}
.gd-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    line-height: 1.08;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
.gd-meta { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.gd-score {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--blood-300);
}
.gd-score small { font-size: 0.95rem; color: var(--text-mid); }
.gd-votes { color: var(--text-mid); font-size: 0.9rem; }
.gd-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.gd-platforms { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.platform-badge {
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(10, 10, 10, 0.7);
    border: 1px solid var(--ink-3);
    color: var(--text-mid);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.platform-badge--icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 32px;
    padding: 0;
    transition: border-color 0.2s var(--ease);
}
.platform-badge--icon:hover { border-color: var(--blood-500); }
.platform-logo { width: 20px; height: 20px; display: block; }

.gd-body { padding-block: 28px 90px; }
.gd-grid {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: clamp(16px, 1.8vw, 30px);
    align-items: start;
    max-width: 1440px;
    margin-inline: auto;
}
.gd-main, .gd-side { display: flex; flex-direction: column; gap: 20px; }
.gd-desc { color: var(--text-mid); font-size: 0.95rem; line-height: 1.75; }
.gd-desc p + p { margin-top: 12px; }

.gd-shots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.gd-shot {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: transform 0.25s var(--ease);
}
.gd-shot:hover { transform: scale(1.03); }

/* Rating */
.rate-form { display: flex; flex-direction: column; gap: 14px; }
.score-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.score-opt { position: relative; }
.score-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.score-opt span {
    display: grid;
    place-items: center;
    height: 36px;
    border-radius: 8px;
    background: var(--ink-0);
    border: 1px solid var(--border);
    color: var(--text-mid);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s var(--ease);
}
.score-opt:hover span { border-color: var(--blood-500); color: var(--text-hi); }
.score-opt input:checked + span {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
}

/* Status buttons */
.status-form { display: flex; flex-direction: column; gap: 8px; }
.status-btn {
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--ink-0);
    border: 1px solid var(--border);
    color: var(--text-mid);
    text-align: left;
    font-size: 0.92rem;
    transition: all 0.15s var(--ease);
}
.status-btn:hover { border-color: var(--blood-500); color: var(--text-hi); }
.status-btn--active {
    background: var(--accent-soft);
    border-color: var(--blood-500);
    color: var(--blood-300);
    font-weight: 600;
}
.status-btn--fav.status-btn--active { color: #E8879B; }

/* Info list */
.info-list { display: flex; flex-direction: column; gap: 12px; }
.info-list div { display: flex; justify-content: space-between; gap: 14px; font-size: 0.9rem; }
.info-list dt { color: var(--text-low); }
.info-list dd { color: var(--text-hi); text-align: right; }
.info-link { color: var(--blood-300); text-decoration: underline; text-underline-offset: 2px; }

/* Reviews */
.review-list { display: flex; flex-direction: column; gap: 18px; }
.review {
    background: var(--ink-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.review-user { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.92rem; }
.review-user:hover { color: var(--blood-300); }
.review-score { color: var(--blood-300); font-weight: 700; }
.review-text { color: var(--text-mid); font-size: 0.92rem; line-height: 1.65; }

/* .game-grid--3 shares the fixed column steps defined above. */
.game-grid--compact { margin-bottom: 20px; }
.game-grid--compact .game-card-body { padding: 10px 12px 12px; }
.game-grid--compact .game-card-name { font-size: 0.85rem; }
.list-subtitle {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mid);
    margin: 18px 0 12px;
}
.panel > .list-subtitle:first-of-type { margin-top: 0; }

/* Onboarding game picker */
.auth-card--rate { max-width: 760px; }
.ob-games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 10px;
}
.ob-game { position: relative; }
.ob-game input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }
.ob-game-inner {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--ink-0);
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.ob-game:hover .ob-game-inner { border-color: var(--blood-500); transform: translateY(-2px); }
.ob-game input:checked + .ob-game-inner {
    border-color: var(--blood-400);
    box-shadow: 0 0 18px rgba(139, 10, 30, 0.4);
}
.ob-game-inner img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ob-game-name {
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}
.score-picker--wide { grid-template-columns: repeat(10, 1fr); }

@media (max-width: 960px) {
    .gd-grid { grid-template-columns: 1fr; }
    .gd-hero-inner { padding-top: 80px; }
    .gd-cover { width: 150px; }
}
@media (max-width: 560px) {
    .ob-games { grid-template-columns: repeat(2, 1fr); }
    .score-picker--wide { grid-template-columns: repeat(5, 1fr); }
    .gd-hero-inner { flex-direction: column; align-items: flex-start; }
}

/* ============ Story library (spec §44-45) ============ */
.library-head {
    padding: 52px 0 8px;
    background:
        radial-gradient(ellipse 70% 90% at 50% -30%, rgba(74, 5, 16, 0.45), transparent 65%),
        radial-gradient(ellipse 40% 50% at 85% 10%, rgba(60, 40, 20, 0.25), transparent 70%);
}
.library { padding-block: 24px 90px; }
.shelf { margin-bottom: 44px; }
.shelf-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 1fr));
    gap: clamp(12px, 1.3vw, 20px);
    padding: 0 6px 14px;
}
/* Dashboard "popular stories" shelf: narrower panel → 3 books per row */
.shelf-row--dash { grid-template-columns: repeat(3, 1fr); padding: 0; }

.shelf-board {
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(180deg, #2A1D12, #17110A);
    border-top: 1px solid #3D2B1A;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}

/* Books */
.book {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform-origin: bottom center;
    transition: transform 0.3s var(--ease);
}
.book:hover { transform: translateY(-6px) rotate(-1deg); }
.book-cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 4px 10px 10px 4px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--wine-900), var(--ink-2) 80%);
    border: 1px solid var(--border);
    box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.55);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(90deg, rgba(0,0,0,0.65), rgba(255,255,255,0.06) 60%, rgba(0,0,0,0.25));
}
.book-cover-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px 18px 20px;
    text-align: center;
}
.book-cover-title {
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--text-hi);
}
.book-cover-game { color: var(--blood-300); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.book-info { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.book-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.book-sub { color: var(--text-low); font-size: 0.78rem; }
.book-sub b { color: var(--blood-300); }
.book-progress { margin-top: 6px; }

.book--masterpiece .book-cover {
    border-color: rgba(232, 199, 123, 0.5);
    box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.55), 0 0 20px rgba(232, 199, 123, 0.14);
}
.book--large { max-width: 300px; }
.book--large:hover { transform: none; }

/* ============ Book page (spec §46) ============ */
.bookpage { position: relative; padding: 56px 0 90px; }
.bookpage-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 25% 20%, rgba(74, 5, 16, 0.35), transparent 65%);
    pointer-events: none;
}
.bookpage-inner {
    position: relative;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 44px;
    align-items: start;
}
.bookpage-book { perspective: 1200px; position: sticky; top: 90px; }
.bookpage-book .book-cover { transition: transform 0.6s var(--ease); transform-style: preserve-3d; }
.bookpage-book.book-opening .book-cover { transform: rotateY(-28deg); }
.bookpage-detail { display: flex; flex-direction: column; gap: 18px; }
.bookpage-gamelink { color: var(--text-mid); font-size: 0.95rem; }
.bookpage-summary { color: var(--text-mid); line-height: 1.7; max-width: 640px; }
.bookpage-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-mid);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s var(--ease);
}
.btn-ghost:hover { border-color: var(--blood-500); color: var(--text-hi); }
.btn-ghost--active { border-color: var(--blood-500); color: var(--blood-300); background: var(--accent-soft); }

.toc { display: flex; flex-direction: column; counter-reset: none; }
.toc-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.15s var(--ease);
}
.toc-link:hover { background: var(--accent-soft); }
.toc-num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink-0);
    border: 1px solid var(--border);
    color: var(--text-low);
    font-size: 0.78rem;
}
.toc-title { flex: 1; font-size: 0.95rem; color: var(--text-hi); }
.toc-kind { color: var(--text-low); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ============ Reader (spec §47-48) ============ */
.reader { min-height: 100vh; }
.reader-top {
    position: sticky;
    top: 64px;
    z-index: 50;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.reader-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    font-size: 0.85rem;
}
.reader-back { color: var(--text-mid); }
.reader-back:hover { color: var(--blood-300); }
.reader-pos { color: var(--text-low); }
.reader-progress { height: 3px; background: var(--ink-2); }
.reader-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--wine-700), var(--blood-400));
    transition: width 0.4s var(--ease);
}

.reader-page {
    max-width: 760px;
    padding-block: 56px 30px;
    animation: page-in 0.55s var(--ease) both;
    transform-origin: left center;
}
@keyframes page-in {
    from { opacity: 0; transform: perspective(1400px) rotateY(9deg) translateX(16px); }
    to { opacity: 1; transform: perspective(1400px) rotateY(0) translateX(0); }
}
.reader-page.page-out {
    animation: page-out 0.3s var(--ease) both;
}
@keyframes page-out {
    from { opacity: 1; transform: perspective(1400px) rotateY(0); }
    to { opacity: 0; transform: perspective(1400px) rotateY(-8deg) translateX(-14px); }
}
.reader-head { text-align: center; margin-bottom: 40px; }
.reader-story {
    color: var(--blood-300);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
}
.reader-title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); }
.reader-rule { color: var(--wine-700); font-size: 1.3rem; margin-top: 18px; }

.reader-body {
    font-family: var(--font-story);
    font-size: 1.12rem;
    line-height: 1.95;
    color: #D8D2D4;
}
.reader-body p + p { margin-top: 1.2em; }
.reader-body h3, .reader-body h4 {
    font-family: var(--font-story);
    color: var(--text-hi);
    margin: 1.8em 0 0.7em;
}
.reader-body blockquote {
    margin: 1.4em 0;
    padding: 4px 22px;
    border-left: 3px solid var(--blood-500);
    color: var(--text-mid);
    font-style: italic;
}
.reader-body ul, .reader-body ol { padding-left: 1.6em; margin: 1em 0; }

/* Spoiler (spec §52) */
.spoiler { display: inline; cursor: pointer; }
.spoiler-label {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 6px;
    background: var(--accent-soft);
    border: 1px dashed rgba(139, 10, 30, 0.6);
    color: var(--blood-300);
    font-family: var(--font-body);
    font-size: 0.8em;
}
.spoiler-body { display: none; }
.spoiler.spoiler--open .spoiler-label { display: none; }
.spoiler.spoiler--open .spoiler-body {
    display: inline;
    background: rgba(139, 10, 30, 0.12);
    border-radius: 4px;
    padding: 0 4px;
}

.reader-nav {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    max-width: 760px;
    padding-block: 10px 90px;
}
.reader-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--ink-2);
    color: var(--text-mid);
    font-size: 0.92rem;
    transition: all 0.2s var(--ease);
}
.reader-nav-btn:hover { border-color: var(--blood-500); color: var(--text-hi); }
.reader-nav-btn--next { margin-left: auto; }
.reader-nav-btn--done {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
}

/* ============ Studio ============ */
.studio { padding-block: 44px 90px; display: flex; flex-direction: column; gap: 20px; }
.studio-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.studio-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.studio-table th {
    text-align: left;
    color: var(--text-low);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.studio-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--text-mid); }
.studio-table tr:last-child td { border-bottom: none; }
.studio-actions { white-space: nowrap; }
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ink-0);
    border: 1px solid var(--border);
    color: var(--text-low);
    font-size: 0.75rem;
}
.badge--ok { border-color: rgba(90, 160, 90, 0.5); color: #9BC89B; }
.badge--danger { border-color: rgba(139, 10, 30, 0.6); color: var(--blood-300); }
.badge--warn { border-color: rgba(232, 199, 123, 0.5); color: #E8C77B; }
.form-input--xs { padding: 4px 8px; font-size: 0.78rem; width: auto; }
.admin-user-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-timeout { display: inline-flex; align-items: center; gap: 4px; }
.stats-grid--admin { grid-template-columns: repeat(6, 1fr); margin-bottom: 20px; }
.report-preview { max-width: 320px; color: var(--text-mid); }
.admin-log-line { font-size: 0.88rem; color: var(--text-mid); padding: 6px 0; border-bottom: 1px solid var(--border); }
.admin-log-line:last-child { border-bottom: none; }
.site-banner {
    background: linear-gradient(90deg, var(--wine-900), var(--wine-700));
    border-bottom: 1px solid rgba(139, 10, 30, 0.5);
    color: #F2D8DC;
    text-align: center;
    padding: 9px 20px;
    font-size: 0.88rem;
}
.bar-cell { width: 28%; }
.bar {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--wine-700), var(--blood-400));
    min-width: 2px;
}
.bar--alt { background: linear-gradient(90deg, #3d3d17, #8a8a24); }
.dash-recs { padding-top: 28px; }
.mini-list { display: flex; flex-direction: column; }
.mini-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 6px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    transition: background 0.15s var(--ease);
}
.mini-item:last-child { border-bottom: none; }
.mini-item:hover { background: var(--accent-soft); }
.mini-title { font-size: 0.88rem; color: var(--text-hi); line-height: 1.4; }
.panel--event { border-color: rgba(232, 199, 123, 0.45); }
.translate-toggle {
    display: inline-block;
    background: none;
    border: none;
    color: var(--blood-300);
    font-size: 0.78rem;
    margin-top: 6px;
    padding: 0;
    cursor: pointer;
}
.translate-toggle:hover { text-decoration: underline; }
.own-delete { margin-top: 10px; }
.own-delete--center { text-align: center; margin-top: 12px; }
@media (max-width: 960px) { .stats-grid--admin { grid-template-columns: repeat(3, 1fr); } }
.studio-row { display: flex; gap: 14px; flex-wrap: wrap; }
.studio-row .form-field { flex: 1; min-width: 200px; }
.studio-narrow { max-width: 180px; }
.studio-content { font-family: ui-monospace, Consolas, monospace; font-size: 0.88rem; line-height: 1.6; }
.inline-form { display: inline; }
.studio-thumb { width: 84px; border-radius: 6px; border: 1px solid var(--border); }

/* YouTube click-to-load embed */
.yt-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-0);
    border: 1px solid var(--border);
}
.yt-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
    filter: saturate(0.85);
}
.yt-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: rgba(10, 10, 10, 0.25);
    border: none;
    color: var(--text-hi);
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.2s var(--ease);
}
.yt-play:hover { background: rgba(74, 5, 16, 0.35); }
.yt-play-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    font-size: 1.4rem;
    padding-left: 5px;
    box-shadow: 0 8px 30px rgba(139, 10, 30, 0.5);
    transition: transform 0.2s var(--ease);
}
.yt-play:hover .yt-play-icon { transform: scale(1.08); }
.yt-frame { width: 100%; height: 100%; border: none; }
.panel-note--yt { margin-top: 10px; font-size: 0.78rem; }
.studio-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.link-btn--danger { color: var(--blood-400); }
.gd-story-cta { align-self: flex-start; margin-top: 14px; }
.nav-link--studio { color: #E8C77B; opacity: 0.9; }

@media (max-width: 960px) {
    .bookpage-inner { grid-template-columns: 1fr; }
    .bookpage-book { position: static; max-width: 240px; }
}
@media (max-width: 560px) {
    /* 2 columns so covers stay big enough to keep title + rating visible. */
    .shelf-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .book-title { font-size: 0.85rem; }
    .book-sub { font-size: 0.78rem; }
    .studio-table { font-size: 0.8rem; }
}

/* ============ Forum ============ */
.forum-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.forum-body { padding-block: 20px 90px; }
.forum-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.forum-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.forum-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--ink-2);
    color: var(--text-mid);
    font-size: 0.88rem;
    transition: all 0.15s var(--ease);
}
.forum-tab:hover { border-color: var(--blood-500); color: var(--text-hi); }
.forum-tab--active {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
}
.forum-sorts { display: flex; gap: 12px; }
.forum-sort { color: var(--text-low); font-size: 0.88rem; }
.forum-sort--active { color: var(--blood-300); font-weight: 600; }

.topic-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.topic-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--ink-2);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s var(--ease);
}
.topic-row:last-child { border-bottom: none; }
.topic-row:hover { background: var(--ink-1); }
.topic-row--pinned { background: rgba(74, 5, 16, 0.14); }
.topic-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.topic-title { font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.topic-flag { font-size: 0.85em; margin-right: 2px; }
.topic-flag--solved { color: #9BC89B; font-weight: 700; font-size: 0.82em; }
.topic-meta { color: var(--text-low); font-size: 0.8rem; }
.topic-stats { display: flex; gap: 14px; color: var(--text-mid); font-size: 0.85rem; white-space: nowrap; }

.topic-page { padding-block: 36px 90px; display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.topic-breadcrumb { color: var(--text-low); font-size: 0.88rem; }
.topic-op-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; margin-bottom: 14px; }
.topic-op-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.topic-body { color: var(--text-mid); line-height: 1.75; font-size: 0.96rem; overflow-wrap: break-word; }
.topic-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.topic-actions-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topic-replies-title { margin-top: 10px; }

.vote-box { display: inline-flex; align-items: center; gap: 8px; }
.vote-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--ink-0);
    color: var(--text-mid);
    font-size: 0.8rem;
    transition: all 0.15s var(--ease);
}
.vote-btn:hover { border-color: var(--blood-500); color: var(--text-hi); }
.vote-btn--on {
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    border-color: transparent;
    color: #fff;
}
.vote-count { font-weight: 700; color: var(--text-hi); min-width: 20px; text-align: center; }

.report-box summary {
    cursor: pointer;
    color: var(--text-low);
    font-size: 0.82rem;
    list-style: none;
}
.report-box summary:hover { color: var(--blood-300); }
.report-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.form-input--sm { padding: 7px 10px; font-size: 0.85rem; }

@media (max-width: 560px) {
    .topic-stats { flex-direction: column; gap: 2px; text-align: right; }
}

/* ============ News ============ */
.news-tabs { margin-bottom: 18px; }
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(14px, 1.4vw, 20px);
}
.news-card {
    display: flex;
    flex-direction: column;
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.news-card:hover { transform: translateY(-4px); border-color: rgba(139, 10, 30, 0.55); }
.news-card-media { aspect-ratio: 16 / 9; background: var(--ink-0); }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.news-cat {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--blood-300);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.news-card-title { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.news-card-sum { color: var(--text-mid); font-size: 0.86rem; line-height: 1.55; }
.news-card-meta { color: var(--text-low); font-size: 0.78rem; margin-top: auto; }
.news-hero-img {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 18px;
}
.news-summary { margin-top: 14px; font-size: 1rem; }
.news-source-note {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: var(--text-low);
    font-size: 0.85rem;
}
.btn--sm-ghost { padding: 8px 16px; font-size: 0.85rem; }
.news-vote-form { display: flex; gap: 8px; flex-wrap: wrap; }
.news-vote-btn { text-align: center; }

/* Category shelves: one horizontal row per category */
.news-shelf { margin-bottom: 34px; }
.news-shelf-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 4px;
}
.news-shelf-head .section-title { margin-bottom: 10px; }
.news-shelf-more { font-size: 0.85rem; white-space: nowrap; }
.news-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--wine-700) var(--ink-1);
}
.news-row .news-card { scroll-snap-align: start; }
.news-row::-webkit-scrollbar { height: 8px; }
.news-row::-webkit-scrollbar-track { background: var(--ink-1); border-radius: 4px; }
.news-row::-webkit-scrollbar-thumb { background: var(--wine-700); border-radius: 4px; }

@media (max-width: 560px) {
    .news-row { grid-auto-columns: 240px; }
}

/* ============ Social: follow + messages ============ */
.profile-social-link { color: var(--text-mid); font-size: 0.88rem; }
.profile-social-link b { color: var(--text-hi); }
.profile-social-link:hover { color: var(--blood-300); }
.profile-cta { display: flex; gap: 10px; margin-left: auto; align-items: center; flex-wrap: wrap; }

.follow-list { display: flex; flex-direction: column; }
.follow-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s var(--ease);
}
.follow-row:last-child { border-bottom: none; }
.follow-row:hover { background: var(--accent-soft); }
.follow-name { flex: 1; font-weight: 600; font-size: 0.95rem; }
.follow-xp { color: var(--text-low); font-size: 0.8rem; white-space: nowrap; }
.convo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.convo-preview {
    color: var(--text-low);
    font-size: 0.83rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Group avatars can be uploaded images */
.group-avatar { overflow: hidden; }
.group-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.group-head-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.group-settings-avatar { display: flex; gap: 18px; align-items: center; }
.group-settings-avatar .form-field { flex: 1; }

/* ============ Motion layer ============
   Restrained, cinematic micro-motion. Everything runs on transform/opacity
   (GPU-composited), plays once, and is disabled for users who prefer
   reduced motion. */
@media (prefers-reduced-motion: no-preference) {

    /* 1) Scroll-reveal: below-fold cards/panels drift up as they enter.
       JS adds .rv only to elements below the fold, .rv-in when visible. */
    .rv { opacity: 0; transform: translateY(18px); }
    .rv-in {
        opacity: 1;
        transform: none;
        transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    }

    /* 2) Landing hero: curtain-style staggered entrance. */
    .hero-kicker, .hero-title, .hero-sub, .hero-cta {
        animation: fyg-rise 0.6s var(--ease) backwards;
    }
    .hero-title { animation-delay: 0.1s; }
    .hero-sub { animation-delay: 0.22s; }
    .hero-cta { animation-delay: 0.34s; }
    @keyframes fyg-rise {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: none; }
    }

    /* 3) Card hover depth: cover zooms a touch, card lifts. */
    .game-card-media img { transition: transform 0.45s var(--ease); }
    .game-card:hover .game-card-media img { transform: scale(1.05); }
    .news-card-media img { transition: transform 0.45s var(--ease); }
    .news-card:hover .news-card-media img { transform: scale(1.05); }

    /* 4) Book tilt: shelf books open slightly toward the reader. */
    .book { perspective: 900px; }
    .book .book-cover { transition: transform 0.45s var(--ease); transform-style: preserve-3d; }
    .book:hover .book-cover { transform: rotateY(-12deg); }

    /* 6) Nav links: underline grows in from the left on hover. */
    .nav-link { position: relative; }
    .nav-link::after {
        content: "";
        position: absolute;
        left: 10px; right: 10px; bottom: 3px;
        height: 2px;
        background: var(--accent);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.25s var(--ease);
    }
    .nav-link:hover::after { transform: scaleX(1); }
    .nav-link--active::after { display: none; }
}

/* ============ Section tinting ============
   The dark base never changes; each section shifts its GLOW/ACCENT hue so
   you feel where you are while the site stays one brand. Text colors are
   untouched — readability is identical everywhere. */
.sect-stories {
    --tint: #C08A2D;            /* antique gold — candlelit library */
    --tint-strong: #E8C77B;
    --tint-deep: 92, 62, 10;    /* rgb triplet for glows */
    --tint-soft: rgba(192, 138, 45, 0.14);
}
.sect-news {
    --tint: #2E6C9E;            /* steel blue — cold & current */
    --tint-strong: #6FA8D6;
    --tint-deep: 10, 42, 72;
    --tint-soft: rgba(46, 108, 158, 0.14);
}
.sect-forum {
    --tint: #C96A22;            /* ember orange — fireside talk */
    --tint-strong: #F0A067;
    --tint-deep: 96, 44, 8;
    --tint-soft: rgba(201, 106, 34, 0.14);
}
.sect-groups {
    --tint: #6D4FA3;            /* deep purple — community/mystic */
    --tint-strong: #A78BD8;
    --tint-deep: 44, 26, 84;
    --tint-soft: rgba(109, 79, 163, 0.14);
}
.sect-lb {
    --tint: #C9A227;            /* gold — victory */
    --tint-strong: #F0D584;
    --tint-deep: 100, 78, 10;
    --tint-soft: rgba(201, 162, 39, 0.14);
}

/* Shared: every tinted section recolors its page glow, tabs and links */
[class*="sect-"] .page-head {
    background: radial-gradient(ellipse 70% 90% at 50% -30%, rgba(var(--tint-deep), 0.55), transparent 65%);
}
[class*="sect-"] .forum-tab--active {
    border-color: var(--tint);
    color: var(--tint-strong);
    background: var(--tint-soft);
}
[class*="sect-"] .info-link { color: var(--tint-strong); }
[class*="sect-"] .hero-kicker { color: var(--tint-strong); }

/* Footer follows the section hue: glow, top line, logo shadow, active flag */
[class*="sect-"] .site-footer {
    background:
        radial-gradient(ellipse 60% 120% at 15% 0%, rgba(var(--tint-deep), 0.4), transparent 60%),
        var(--ink-1);
}
[class*="sect-"] .footer-glow {
    background: linear-gradient(90deg, transparent, var(--tint) 30%, var(--tint-strong) 50%, var(--tint) 70%, transparent);
}
[class*="sect-"] .footer-logo-img { filter: drop-shadow(0 0 8px rgba(var(--tint-deep), 0.55)); }
[class*="sect-"] .footer-flag--active { border-color: var(--tint); }

/* Stories: library + book page glows */
.sect-stories .library-head {
    background:
        radial-gradient(ellipse 70% 90% at 50% -30%, rgba(var(--tint-deep), 0.55), transparent 65%),
        radial-gradient(ellipse 40% 50% at 85% 10%, rgba(var(--tint-deep), 0.3), transparent 70%);
}
.sect-stories .bookpage-glow {
    background: radial-gradient(ellipse 50% 60% at 25% 20%, rgba(var(--tint-deep), 0.5), transparent 65%);
}

/* News: category chips + card hover */
.sect-news .news-cat { background: var(--tint-soft); color: var(--tint-strong); }
.sect-news .news-card:hover { border-color: var(--tint); }

/* Groups: banner glow + card hover */
.sect-groups .group-banner {
    background: radial-gradient(ellipse 70% 100% at 30% 0%, rgba(var(--tint-deep), 0.5), transparent 65%);
}
.sect-groups .group-card:hover { border-color: var(--tint); }
.sect-groups .nav-avatar--group,
.sect-groups .group-avatar { background: var(--tint-soft); color: var(--tint-strong); }

/* Leaderboard: podium rows glow gold */
.sect-lb .lb-row--top { background: rgba(var(--tint-deep), 0.16); }
.sect-lb .lb-points { color: var(--tint-strong); }

/* Lore identity: everything story-flavoured renders in Cinzel — the
   library, book pages, the reader and book cards (wherever they appear). */
.library-head .page-title,
.library-head .hero-kicker,
.shelf .section-title,
.bookpage .gd-title,
.bookpage .panel-title,
.bookpage .toc-title,
.reader .reader-title,
.reader .reader-back,
.book-cover-title,
.book-title {
    font-family: var(--font-lore);
}

/* Contact page: direct email line under the form */
.contact-direct {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #262027);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact-direct span { color: var(--text-low); font-size: 0.85rem; }
.contact-direct a {
    color: var(--blood-300, #e2586e);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.02rem;
}
.contact-direct a:hover { text-decoration: underline; }

/* PWA install banner (dismissible, bottom) */
.install-toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 140%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    max-width: 460px;
    padding: 14px 16px;
    background: #16121a;
    border: 1px solid #322833;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(214, 66, 88, 0.08);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.install-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.install-toast-icon { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.install-toast-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.install-toast-text strong { color: var(--text-hi); font-size: 0.94rem; }
.install-toast-text span { color: var(--text-low); font-size: 0.8rem; }
.install-toast-cta { flex: 0 0 auto; }
.install-toast-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--text-low);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    border-radius: 8px;
}
.install-toast-close:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.06); }
.install-toast--ios .install-toast-text span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.ios-share-glyph { color: #4c8dff; vertical-align: middle; }
@media (max-width: 520px) {
    .install-toast { bottom: 12px; gap: 11px; padding: 12px 13px; }
    .install-toast-icon { width: 38px; height: 38px; }
    .install-toast:not(.install-toast--ios) .install-toast-text span { display: none; }
    /* iOS variant keeps its steps visible — they ARE the instruction. */
    .install-toast--ios .install-toast-text span { display: inline-flex; }
}

/* Login streak */
.streak-panel { display: flex; align-items: center; gap: 14px; }
.streak-flame { font-size: 2rem; filter: drop-shadow(0 0 10px rgba(255, 120, 30, 0.5)); }
.streak-main { display: flex; flex-direction: column; }
.streak-count { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-hi); }
.streak-note { color: var(--text-low); font-size: 0.82rem; }

/* Collections */
.collections-body { padding-block: 22px 80px; }
.coll-mine-link { margin-bottom: 18px; }
.coll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.coll-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.coll-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.coll-card-covers {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 10;
    background: var(--ink-0);
}
.coll-card-cover { background-size: cover; background-position: center; background-color: var(--ink-2); }
.coll-card-private { position: absolute; top: 8px; right: 8px; font-size: 0.9rem; }
.coll-card-body { padding: 12px 14px; }
.coll-card-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.coll-card-meta { color: var(--text-low); font-size: 0.82rem; }

.coll-show-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.coll-desc { color: var(--text-mid); margin-top: 8px; max-width: 640px; }
.coll-lock { font-size: 1.2rem; }
.coll-manage summary { cursor: pointer; }
.coll-manage-actions { margin-top: 8px; }
.coll-game { position: relative; }
.coll-remove { position: absolute; top: 6px; right: 6px; }
.coll-remove-btn {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(10, 10, 10, 0.75); border: none; color: #fff; cursor: pointer;
}
.coll-remove-btn:hover { background: var(--blood-500); }

/* Game sidebar: add-to-collection widget */
.coll-toggle-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.coll-toggle {
    width: 100%; text-align: left; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; cursor: pointer;
    background: var(--ink-1); border: 1px solid var(--border); color: var(--text-mid);
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.coll-toggle:hover { color: var(--text-hi); border-color: var(--accent); }
.coll-toggle--on { color: var(--text-hi); border-color: var(--accent); background: var(--accent-soft); }
.coll-toggle-mark { font-weight: 700; color: var(--accent); }
.coll-quick-form { display: flex; gap: 8px; }
.coll-quick-form .form-input--sm { flex: 1; padding: 8px 12px; font-size: 0.88rem; }

/* Studio: AI lore drafting panel */
.panel--ai {
    border: 1px solid rgba(139, 10, 30, 0.4);
    background:
        radial-gradient(ellipse 80% 100% at 100% 0%, rgba(139, 10, 30, 0.08), transparent 60%),
        var(--card);
}
.ai-modules { margin: 6px 0 16px; }

/* Legal pages */
.page-head--center { text-align: center; }
.legal-body { padding: 26px 0 80px; max-width: 860px; margin-inline: auto; }
.legal-panel h2 { font-size: 1.05rem; margin: 22px 0 8px; font-family: var(--font-display); }
.legal-panel h2:first-child { margin-top: 0; }
.legal-panel p, .legal-panel li { color: var(--text-mid); line-height: 1.65; font-size: 0.95rem; }
.legal-panel ul { padding-left: 20px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.legal-panel--narrow { max-width: 560px; margin-inline: auto; }
.footer-legal { display: flex; gap: 8px; flex-wrap: wrap; color: var(--text-low); font-size: 0.82rem; }
.footer-legal a { color: var(--text-low); }
.footer-legal a:hover { color: var(--text-hi); }

.review-foot { margin-top: 8px; }

/* Danger zone (account deletion) */
.settings-section--danger {
    border: 1px solid rgba(139, 10, 30, 0.5);
    border-radius: 12px;
    padding: 22px;
    margin-top: 30px;
    background: rgba(139, 10, 30, 0.05);
}
.btn-danger {
    background: transparent;
    border: 1px solid var(--blood-400);
    color: var(--blood-300);
}
.btn-danger:hover { background: var(--blood-500); color: #fff; }

/* ============ Book reader (stories) ============
   A real book: parchment page ~half the screen, one chapter per page,
   3D leaf-turn animation between chapters. */
.bookr { min-height: calc(100vh - 64px); display: flex; flex-direction: column; padding-bottom: 28px; }
.bookr-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 10px;
}
.bookr-pos { color: var(--text-low); font-size: 0.85rem; }
.bookr-progress { height: 2px; background: var(--ink-2); }
.bookr-progress span { display: block; height: 100%; background: var(--tint, var(--accent)); transition: width 0.5s var(--ease); }

.bookr-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 26px 12px 8px;
}
.bookr-arrow {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--ink-1);
    color: var(--text-mid);
    font-size: 1.6rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.bookr-arrow:hover { color: var(--text-hi); border-color: var(--tint, var(--accent)); transform: scale(1.08); }
.bookr-arrow--done { border-color: #1F8A4C; color: #7ED6A2; }

.bookr-book {
    position: relative;
    width: min(660px, 50vw);
    height: min(76vh, 860px);
    perspective: 2200px;
}
.bookr-spine {
    position: absolute;
    left: -14px; top: 6px; bottom: 6px;
    width: 26px;
    background: linear-gradient(90deg, #1a1108, #3a2a14 60%, #241708);
    border-radius: 8px 0 0 8px;
    box-shadow: -6px 8px 24px rgba(0, 0, 0, 0.6);
}
.bookr-edge {
    position: absolute;
    right: -7px; top: 10px; bottom: 10px;
    width: 8px;
    background: repeating-linear-gradient(180deg, #e8dcc0 0 2px, #cfc2a4 2px 3px);
    border-radius: 0 3px 3px 0;
}
.bookr-page, .bookr-leaf-face {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 100% at 10% 0%, rgba(120, 90, 40, 0.10), transparent 55%),
        radial-gradient(ellipse 120% 100% at 95% 100%, rgba(90, 60, 20, 0.12), transparent 55%),
        #F2E8CF;
    border-radius: 4px 10px 10px 4px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), inset 4px 0 14px rgba(90, 60, 20, 0.18);
    padding: clamp(26px, 4vw, 52px);
    overflow-y: auto;
    color: #2A2118;
}
.bookr-head { text-align: center; margin-bottom: 20px; }
.bookr-title {
    font-family: var(--font-lore);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    color: #3A2A14;
    line-height: 1.25;
}
.bookr-rule { color: #8B6B35; margin-top: 10px; font-size: 1.05rem; }
.bookr-text { font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.75; }
.bookr-text p { margin-bottom: 0.9em; }
.bookr-text p:first-of-type::first-letter {
    font-family: var(--font-lore);
    font-size: 2.9em;
    float: left;
    line-height: 0.85;
    padding: 4px 8px 0 0;
    color: #6B1420;
}
.bookr-pageno { text-align: center; color: #8B7B55; font-size: 0.85rem; margin-top: 26px; }
.bookr-page::-webkit-scrollbar { width: 8px; }
.bookr-page::-webkit-scrollbar-thumb { background: #C9B98F; border-radius: 4px; }

/* The turning leaf: a copy of a page hinged on the left edge. */
.bookr-leaf {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.3, 1);
    z-index: 5;
    pointer-events: none;
}
.bookr-leaf .bookr-leaf-face { overflow: hidden; backface-visibility: hidden; }
.bookr-leaf::after { /* darkening as the page lifts */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px 10px 10px 4px;
    background: rgba(30, 18, 5, 0);
    transition: background 0.75s cubic-bezier(0.4, 0.05, 0.3, 1);
}
.bookr-leaf--turned { transform: rotateY(-150deg); }
.bookr-leaf--turned::after { background: rgba(30, 18, 5, 0.35); }

.bookr-hint { text-align: center; color: var(--text-low); font-size: 0.8rem; padding: 10px 0 4px; }

/* Leather cover leaf: opens on arrival, closes before leaving. */
.bookr-cover-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 35%, rgba(120, 80, 30, 0.25), transparent 70%),
        linear-gradient(135deg, #2A1A0A 0%, #4A3216 55%, #241503 100%) !important;
    border: 2px solid #6B4E22;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
}
.bookr-cover-title {
    font-family: var(--font-lore);
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    color: #D9B45B;
    text-align: center;
    padding: 0 30px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.bookr-cover-orn { color: #8B6B35; font-size: 1.4rem; }

/* Spoilers on parchment: keep them legible on the light page. */
.bookr-text .spoiler { background: #D9CBA8; color: #D9CBA8; border-radius: 4px; }
.bookr-text .spoiler.spoiler--open { background: transparent; color: inherit; }
.bookr-text .spoiler .spoiler-label { color: #6B5A35; }

@media (max-width: 900px) {
    /* Phone: keep a real book PAGE ratio (~5:7) instead of a tall strip;
       long chapters scroll inside the page. */
    .bookr-book {
        width: min(92vw, 660px);
        height: auto;
        aspect-ratio: 5 / 7;
        max-height: 68vh;
    }
    .bookr-stage { gap: 8px; padding-top: 14px; }
    .bookr-arrow { width: 42px; height: 42px; font-size: 1.3rem; }
    .bookr-spine { left: -8px; width: 14px; }
    .bookr-page, .bookr-leaf-face { padding: 20px 18px; }
    .bookr-text { font-size: 0.95rem; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
    .bookr-leaf { transition: none; }
    .bookr-progress span { transition: none; }
}

/* Notifications */
.notif-row { align-items: center; }
.notif-row--unread { background: var(--accent-soft); }
.notif-text { font-size: 0.92rem; }
.notif-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Settings page sections */
.settings-section { padding: 22px 0; border-top: 1px solid var(--border); margin-top: 22px; }
.settings-section:first-of-type { border-top: none; margin-top: 0; padding-top: 6px; }
.settings-section-title { font-size: 1.05rem; margin-bottom: 14px; }
.info-list--settings div { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.info-list--settings dt { min-width: 140px; color: var(--text-low); }
.info-list--settings dd { font-weight: 600; overflow-wrap: anywhere; }

/* Messages inbox: pinnable rows + group chats */
.convo-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; }
.convo-row--pinned { background: var(--accent-soft); }
.convo-pin {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0.25;
    padding: 6px;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.convo-pin:hover { opacity: 0.9; transform: scale(1.15); }
.convo-pin--on { opacity: 1; }
.convo-pin-mark { font-size: 0.8rem; margin-right: 2px; }
.msg-groups-title { margin-top: 26px; margin-bottom: 10px; }
.nav-avatar--group { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* Post social bar: like / comment / repost */
.post-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.post-action {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-low);
    cursor: pointer;
    font-size: 0.83rem;
    padding: 5px 12px;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.post-action:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.post-action--on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.post-action--static { cursor: default; }
.post-action--static:hover { color: var(--text-low); border-color: var(--border); background: none; }

/* Repost (retweet) display */
.post-repost-note { color: var(--text-low); font-size: 0.82rem; margin-bottom: 8px; }
.post-quoted {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.02);
}
.post-quoted .post-image { max-height: 320px; }

/* Post comments */
.post-comments { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.post-comment { display: flex; align-items: baseline; gap: 8px; font-size: 0.88rem; }
.post-comment-user { display: inline-flex; align-items: center; gap: 6px; color: inherit; flex-shrink: 0; }
.post-comment-body { flex: 1; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.post-comment-del { font-size: 0.75rem; opacity: 0.5; }
.post-comment-del:hover { opacity: 1; }
.post-comment-form { display: flex; gap: 8px; margin-top: 4px; }
.post-comment-form .form-input--sm { flex: 1; padding: 8px 12px; font-size: 0.88rem; }
.nav-avatar--xs { width: 22px; height: 22px; font-size: 0.65rem; }

/* @mentions */
.mention { color: var(--accent); font-weight: 600; }
.mention:hover { text-decoration: underline; }

.nav-msg {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--ink-2);
    border: 1px solid var(--border);
    color: var(--text-mid);
    font-size: 0.95rem;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-msg:hover { border-color: var(--blood-500); color: var(--text-hi); }
.unread-badge {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--blood-500);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}
.nav-msg .unread-badge { position: absolute; top: -6px; right: -6px; }

.chat-page {
    max-width: 760px;
    padding-block: 36px 90px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.chat-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chat-head .review-user { flex: 1; }
.chat-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 18px;
    background: var(--ink-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.chat-empty { color: var(--text-low); text-align: center; padding: 30px 0; }
.bubble {
    max-width: 75%;
    align-self: flex-start;
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px;
    padding: 10px 14px;
}
.bubble--mine {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--wine-900), var(--wine-700));
    border-color: rgba(139, 10, 30, 0.4);
    border-radius: 14px 14px 4px 14px;
}
.bubble-body { font-size: 0.93rem; line-height: 1.5; overflow-wrap: break-word; }
.bubble-time { display: block; margin-top: 4px; color: var(--text-low); font-size: 0.7rem; text-align: right; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-input { flex: 1; resize: vertical; }
.chat-attach {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--ink-2);
    border: 1px solid var(--border);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.2s var(--ease);
}
.chat-attach:hover { border-color: var(--blood-500); }
.chat-file-name { display: block; margin-top: 6px; color: var(--text-low); font-size: 0.8rem; min-height: 1em; }
.bubble-media {
    display: block;
    max-width: 100%;
    max-height: 320px;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.bubble-seen { color: #9BC89B; }
.panel--flush { padding: 10px 18px; }

/* ============ Groups ============ */
.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: clamp(12px, 1.3vw, 18px);
    margin-top: 18px;
}
.group-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.group-card:hover { transform: translateY(-3px); border-color: rgba(139, 10, 30, 0.55); }
.group-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--wine-700), var(--blood-500));
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}
.group-avatar--lg { width: 84px; height: 84px; font-size: 2.4rem; border-radius: 20px; }
.group-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.group-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group-desc { color: var(--text-mid); font-size: 0.85rem; }
.groups-search { margin-bottom: 6px; }

.group-banner {
    padding: 44px 0 28px;
    background: radial-gradient(ellipse 70% 100% at 30% 0%, rgba(74, 5, 16, 0.4), transparent 65%);
    border-bottom: 1px solid var(--border);
}
.group-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.group-head-main { flex: 1; min-width: 220px; }
.group-body { padding-block: 28px 90px; }
.group-grid-layout {
    display: grid;
    grid-template-columns: 3fr 1.2fr;
    gap: clamp(16px, 1.6vw, 26px);
    align-items: start;
    max-width: 1500px;
    margin-inline: auto;
}
.group-main, .group-side { display: flex; flex-direction: column; gap: 18px; }
.chat-box--group { max-height: 46vh; margin-bottom: 12px; }
.bubble-author {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--blood-300);
    margin-bottom: 3px;
}
.panel--announce { border-color: rgba(139, 10, 30, 0.45); }
.announce { padding: 10px 0; border-bottom: 1px solid var(--border); }
.announce:last-child { border-bottom: none; }
.group-member-row { gap: 10px; }
.group-member-row .review-user { flex: 1; min-width: 0; }
.member-role {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-low);
}
.member-role--owner { color: #E8C77B; }
.member-role--moderator { color: var(--blood-300); }
.member-actions { display: flex; gap: 6px; }

@media (max-width: 960px) {
    .group-grid { grid-template-columns: 1fr; }
    .group-grid-layout { grid-template-columns: 1fr; }
}

/* ============ Gamification: quests, awards, leaderboard ============ */
.quest-list { display: flex; flex-direction: column; gap: 12px; }
.quest {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--ink-0);
    border: 1px solid var(--border);
}
.quest--done { border-color: rgba(90, 160, 90, 0.45); opacity: 0.85; }
.quest-icon { font-size: 1.1rem; }
.quest-main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.quest-name { font-size: 0.88rem; font-weight: 600; }
.quest-state {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: var(--text-mid);
    font-size: 0.85rem;
    white-space: nowrap;
}
.quest--done .quest-state { color: #9BC89B; }
.quest-xp { font-style: normal; color: var(--blood-300); font-size: 0.72rem; }

.award-list { display: flex; flex-wrap: wrap; gap: 8px; }
.award {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid rgba(139, 10, 30, 0.45);
    color: var(--text-hi);
    font-size: 0.84rem;
    cursor: help;
}
.award--badge {
    background: linear-gradient(110deg, rgba(232, 199, 123, 0.12), rgba(139, 10, 30, 0.12));
    border-color: rgba(232, 199, 123, 0.5);
}

.lb-body { max-width: 860px; margin-inline: auto; }
.lb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.lb-search { display: flex; gap: 8px; }
.lb-search .form-input { padding: 8px 14px; font-size: 0.9rem; width: 200px; }
.lb-found { margin-bottom: 18px; border: 1px solid var(--tint, var(--accent)); }
.lb-row--found { background: var(--tint-soft, var(--accent-soft)); }
.lb-row { padding: 14px 12px; }
.lb-row--top { background: rgba(74, 5, 16, 0.12); }
.lb-pos {
    min-width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-low);
}
.lb-pos--1, .lb-pos--2, .lb-pos--3 { font-size: 1.4rem; }
.lb-points { font-weight: 700; color: var(--blood-300); white-space: nowrap; }
.lb-more { text-align: center; margin-top: 20px; }
.lb-row .follow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .rank-pill { flex-shrink: 0; }
@media (max-width: 560px) {
    .lb-pos { min-width: 26px; font-size: 0.95rem; }
    .lb-pos--1, .lb-pos--2, .lb-pos--3 { font-size: 1.15rem; }
    .lb-row .rank-pill { display: none; } /* rank shown on the profile; keep the row clean */
    .lb-row { gap: 10px; padding: 12px 8px; }
    .lb-points { font-size: 0.9rem; }
}

/* ============ Global search ============ */
.search-page-form { margin-top: 14px; max-width: 560px; }
.search-body { padding-block: 24px 90px; }
.search-group { margin-bottom: 36px; }
.search-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--blood-300);
    font-size: 0.75rem;
    font-family: var(--font-body);
    vertical-align: middle;
}
.search-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.search-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--ink-2);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s var(--ease);
}
.search-row:last-child { border-bottom: none; }
.search-row:hover { background: var(--ink-1); }
.search-row-icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--ink-0);
    border: 1px solid var(--border);
    font-size: 1.05rem;
}
.search-row .group-avatar { width: 34px; height: 34px; font-size: 1rem; border-radius: 8px; }
.search-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-row-title { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row-sub { color: var(--text-low); font-size: 0.82rem; }

/* ============ Error page ============ */
.error-page {
    text-align: center;
    padding: 140px 24px;
}
.error-code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 1;
    background: linear-gradient(160deg, var(--blood-300), var(--wine-700));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 12px;
}
.error-title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 10px; }
.error-text { color: var(--text-mid); margin-bottom: 32px; }

/* ============ Responsive ============ */
@media (max-width: 960px) {
    .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .pillars { grid-template-columns: 1fr; }
    .hero { padding: 80px 0 60px; }
}

/* Respect reduced-motion preferences (spec: smooth but never annoying) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
 * Heading weights for the sans display font.
 * Playfair only shipped 600/700 faces, so headings rendered semibold
 * by default; the system sans defaults to 400 and would look thin.
 * Restore a clean, professional weight hierarchy. Book/reader titles
 * (Cinzel via --font-lore) are intentionally excluded.
 * --------------------------------------------------------------- */
.logo-text,
.footer-brand,
.hero-title,
.page-title,
.profile-name,
.auth-title,
.error-code,
.lb-pos,
.stat-value,
.xp-value,
.gd-score,
.gd-title,
.dash-rank-level,
.topic-op-title {
    font-weight: 700;
}
.section-title,
.panel-title,
.pillar-title,
.footer-col-title,
.dash-title,
.empty-title,
.streak-count,
.error-title,
.masterpiece-title,
.rec-title,
.legal-panel h2,
.coll-card-title {
    font-weight: 600;
}