/* ── Background ───────────────────────────────────────────────── */
/* Breach art fixed behind the page (z-index -1 so header and footer paint
   over it); the embers reuse .gate-embers from sign-in-gate.css */
body {
    background: #070404;
}

/* home paints its own breach art; no site veil */
body::before {
    content: none;
}

.home-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #070404;
}

.home-backdrop-art {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: center 35%;
    animation: gateArtDrift 32s ease-in-out infinite alternate;
}

.home-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 70% at 62% 40%, rgba(4, 2, 2, 0.25) 0%, rgba(4, 2, 2, 0.72) 100%),
        linear-gradient(90deg, rgba(4, 2, 2, 0.85) 0%, rgba(4, 2, 2, 0.35) 45%, rgba(4, 2, 2, 0.2) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.85) 100%);
}

.action-bar {
    background: linear-gradient(to bottom, rgba(14, 14, 14, 1), rgba(14, 14, 14, 0));
}

/* ── Page wrapper ─────────────────────────────────────────────── */
.home-page {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
    max-width: 1280px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

/* Keep every section the same rendered width — borders inside the box so the
   hero's thicker border doesn't make it wider than the rest. */
.home-page > * {
    box-sizing: border-box;
}

/* ── Trimmed nav for logged-out visitors (html.signed-in set pre-paint) ── */
html:not(.signed-in) header nav .nav-extra { display: none; }
html.signed-in header nav .nav-trim-only { display: none; }

/* ── HERO ─ one large pane: gameplay video with breach key-art interlude ── */
.hero-play {
    position: relative;
    display: block;
    width: 100%;
    min-height: clamp(360px, 42vw, 620px);
    max-height: 660px;
    margin-bottom: 8px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    border: 3px solid #d4a017;
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.4), inset 0 0 20px rgba(212, 160, 23, 0.1),
                0 0 0 1px rgba(212, 160, 23, 0.6);
    animation: shimmerGold 3s ease-in-out infinite;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

@keyframes shimmerGold {
    0%, 100% {
        border-color: #d4a017;
        box-shadow: 0 0 20px rgba(212, 160, 23, 0.4), inset 0 0 20px rgba(212, 160, 23, 0.1),
                    0 0 0 1px rgba(212, 160, 23, 0.6);
    }
    50% {
        border-color: #ffd700;
        box-shadow: 0 0 35px rgba(212, 160, 23, 0.8), inset 0 0 30px rgba(212, 160, 23, 0.25),
                    0 0 0 1px rgba(255, 215, 0, 0.8);
    }
}

/* Video + key art stacked; the cycle crossfades the art layer over the video */
.hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
    transition: opacity 1.8s ease, transform 0.6s ease, filter 0.4s ease;
}

.hero-bg {
    opacity: 0;
    pointer-events: none;
}

.hero-play.show-art .hero-bg {
    opacity: 1;
}

/* Gold bloom that washes over the hero while the layers crossfade */
.hero-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at center,
                rgba(255, 230, 128, 0.8) 0%,
                rgba(255, 191, 0, 0.5) 45%,
                rgba(212, 160, 23, 0.2) 100%);
    box-shadow: inset 0 0 140px rgba(255, 215, 0, 0.9);
}

.hero-flash.flashing {
    animation: heroGoldFlash 1.8s ease-in-out;
}

@keyframes heroGoldFlash {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Gold overlay + glow + lettering — revealed on hover/focus */
.hero-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: radial-gradient(circle at center,
                rgba(255, 191, 0, 0.62) 0%,
                rgba(212, 160, 23, 0.45) 45%,
                rgba(120, 84, 0, 0.55) 100%);
    box-shadow: inset 0 0 120px rgba(255, 215, 0, 0.65);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hero-play-text {
    font-family: 'HwyGothic', sans-serif;
    font-weight: bold;
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 0.06em;
    color: #0e0e0e;
    text-align: center;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.25), 0 0 30px rgba(255, 215, 0, 0.6);
    transform: translateY(18px) scale(0.94);
    opacity: 0;
    /* slight delay so the lettering arrives a beat after the gold wash */
    transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.hero-play:hover,
.hero-play:focus-visible {
    transform: translateY(-2px);
    outline: none;
    /* slow on/off gold shimmer of the whole frame while hovered */
    animation: heroHoverShimmer 2.6s ease-in-out infinite;
}

@keyframes heroHoverShimmer {
    0%, 100% {
        border-color: #d4a017;
        box-shadow: 0 0 28px rgba(255, 215, 0, 0.55), inset 0 0 30px rgba(212, 160, 23, 0.2),
                    0 0 0 1px rgba(255, 215, 0, 0.7);
    }
    50% {
        border-color: #fff1a8;
        box-shadow: 0 0 60px rgba(255, 215, 0, 1), inset 0 0 55px rgba(255, 215, 0, 0.45),
                    0 0 0 2px rgba(255, 241, 168, 1);
    }
}

.hero-play:hover .hero-layer,
.hero-play:focus-visible .hero-layer {
    transform: scale(1.04);
    /* the imagery itself shimmers in/out, synced with the frame */
    animation: heroBgShimmer 2.6s ease-in-out infinite;
}

@keyframes heroBgShimmer {
    0%, 100% { filter: saturate(1.12) brightness(1); }
    50%      { filter: saturate(1.4) brightness(1.22); }
}

/* ── Cursor pixie dust ─ gold glowing motes that fall from the pointer ── */
.hero-dust {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size, 6px);
    height: var(--size, 6px);
    margin: calc(var(--size, 6px) / -2) 0 0 calc(var(--size, 6px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle,
                #fffdf2 0%, #ffe680 32%, #ffbf00 62%, rgba(212, 160, 23, 0) 100%);
    box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.85), 0 0 14px 5px rgba(255, 191, 0, 0.5);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    will-change: transform, opacity;
    animation: heroDustFall var(--life, 1100ms) ease-in forwards;
}

@keyframes heroDustFall {
    0%   { opacity: 0;   transform: translate(0, 0) scale(0.35); }
    18%  { opacity: 1; }
    60%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translate(var(--dx, 0), var(--dy, 90px)) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-play,
    .hero-play:hover,
    .hero-play:focus-visible,
    .hero-play:hover .hero-layer,
    .hero-play:focus-visible .hero-layer,
    .hero-flash.flashing,
    .hero-live {
        animation: none;
    }
}

.hero-play:hover .hero-play-overlay,
.hero-play:focus-visible .hero-play-overlay {
    opacity: 1;
}

.hero-play:hover .hero-play-text,
.hero-play:focus-visible .hero-play-text {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero-play:active {
    transform: translateY(0);
}

/* ── HERO ─ live-gameplay badge (hidden during the key-art beat) ── */
.hero-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #ffd700;
    background: rgba(14, 14, 14, 0.82);
    border: 1px solid rgba(212, 160, 23, 0.5);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    transition: opacity 1s ease;
}

.hero-play.show-art .hero-badge {
    opacity: 0;
}

.hero-live {
    font-size: 0.5rem;
    color: #4cd964;
    animation: heroLivePulse 2s ease-in-out infinite;
}

@keyframes heroLivePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ── CTA row (community band) ─────────────────────────────────── */
.intro-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}

/* ── Marketing buttons ────────────────────────────────────────── */
.hbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 8px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
}

.hbtn-gold {
    background: linear-gradient(135deg, #ffd700, #d4a017);
    color: #0e0e0e;
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.45);
}
.hbtn-gold:hover {
    background: linear-gradient(135deg, #ffe34d, #ffbf00);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(255, 215, 0, 0.6);
}

.hbtn-ghost {
    background: rgba(212, 160, 23, 0.08);
    color: #ffd700;
    border-color: rgba(212, 160, 23, 0.6);
}
.hbtn-ghost:hover {
    background: rgba(212, 160, 23, 0.2);
    border-color: #ffd700;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.hbtn:active {
    transform: translateY(-1px);
}

/* ── Centered section header variant ──────────────────────────── */
.section-header-center {
    align-items: center;
    text-align: center;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 8px;
}
.section-header-center::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 80px;
    background: linear-gradient(90deg, transparent, #d4a017, transparent);
}

/* ── COMMUNITY CTA ────────────────────────────────────────────── */
.community-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 56px 40px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(45, 32, 10, 0.96), rgba(22, 16, 8, 0.96));
    border: 1px solid rgba(212, 160, 23, 0.45);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(212, 160, 23, 0.15);
    position: relative;
    overflow: hidden;
}
.community-cta::before {
    content: '';
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.12), transparent 60%);
    pointer-events: none;
}

.community-heading {
    font-family: 'HwyGothic', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #fff;
    margin: 0;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    position: relative;
}

.community-sub {
    max-width: 620px;
    margin: 0;
    font-size: 1.05rem;
    color: #cfc6b2;
    line-height: 1.6;
    position: relative;
}

.community-social {
    display: flex;
    gap: 18px;
    margin-top: 8px;
    position: relative;
}
.community-social a {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #d4a017;
    border-radius: 50%;
    border: 1px solid rgba(212, 160, 23, 0.35);
    background: rgba(212, 160, 23, 0.08);
    text-decoration: none;
    transition: all 0.25s ease;
}
.community-social a:hover {
    color: #0e0e0e;
    background: #ffd700;
    border-color: #ffd700;
    transform: translateY(-3px);
}

/* ── TOP SECTION ──────────────────────────────────────────────── */
.home-top {
    display: block;
    width: 100%;
}

/* 16:9 responsive iframe */
.home-video-wrap {
    position: relative;
    padding-top: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.7);
    background: #000;
    width: 100%;
}
.home-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* CTA column - REMOVED */

.video-section-title {
    font-family: 'HwyGothic', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    margin: 0;
    letter-spacing: 0.05em;
}

.video-section-desc {
    font-size: 1rem;
    color: #c9a96e;
    margin: 0 0 8px;
    line-height: 1.5;
}

.quick-links {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.quick-links a {
    font-size: 0.9rem;
    color: #b8b0a0;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    transition: all 0.2s ease;
}

.quick-links a:hover {
    color: #d4a017;
    border-bottom-color: #d4a017;
}

.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 0;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-align: center;
    border: none;
    background-image: url('/img/button_hotdog.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    min-height: 32px;
    min-width: 100px;
    aspect-ratio: 5 / 2;
}

.cta-btn::before {
    display: none;
}

.cta-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    filter: brightness(1) !important;
    color: #fff !important;
}

.cta-btn:hover::before {
    display: none;
}

.cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cta-play {
    background-image: url('/img/button_hotdog.png');
}
.cta-discord {
    background-image: url('/img/button_hotdog.png');
}
.cta-shop {
    background: linear-gradient(135deg, #d4a017, #b8860b) !important;
    color: #0e0e0e !important;
    box-shadow: 0 4px 14px rgba(184, 134, 11, 0.4) !important;
    min-height: auto !important;
    min-width: auto !important;
    aspect-ratio: auto !important;
    padding: 11px 20px !important;
    font-size: 0.8rem !important;
    border-radius: 6px;
}

.cta-shop:hover {
    background: linear-gradient(135deg, #ffd700, #d4a017) !important;
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.5) !important;
}

.cta-amazon {
    background: linear-gradient(135deg, #ff9900, #ff8800) !important;
    color: #0e0e0e !important;
    box-shadow: 0 4px 14px rgba(255, 153, 0, 0.4) !important;
    min-height: auto !important;
    min-width: auto !important;
    aspect-ratio: auto !important;
    padding: 11px 20px !important;
    font-size: 0.8rem !important;
    border-radius: 6px;
}

.cta-amazon:hover {
    background: linear-gradient(135deg, #ffaa00, #ff9900) !important;
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.6) !important;
}

/* ── BOTTOM GRID ──────────────────────────────────────────────── */
.home-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}

/* Shared section card */
.home-section {
    background: linear-gradient(135deg, rgba(30, 25, 15, 0.95), rgba(20, 15, 10, 0.95));
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(212, 160, 23, 0.1);
    position: relative;
    overflow: hidden;
}

.home-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.1), transparent);
    pointer-events: none;
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 2px solid rgba(212, 160, 23, 0.4);
    padding-bottom: 16px;
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #d4a017, transparent);
}

.section-label {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: #ffd700;
    text-transform: uppercase;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(212, 160, 23, 0.3);
}

.section-subtitle {
    font-size: 0.95rem;
    color: #d4a017;
    margin: 0;
    font-weight: 500;
}

/* ── SHOP SECTION ─────────────────────────────────────────────── */
.product-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(40, 35, 20, 0.8), rgba(30, 25, 15, 0.8));
    border: 1px solid rgba(212, 160, 23, 0.2);
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(212, 160, 23, 0.25), 0 4px 16px rgba(0, 0, 0, 0.6);
    border-color: rgba(212, 160, 23, 0.5);
    background: linear-gradient(135deg, rgba(50, 40, 20, 0.9), rgba(40, 30, 15, 0.9));
}

.product-img-wrap {
    flex: 1 1 auto;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-height: 0;
    min-height: 200px;
}
.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.product-card:hover .product-img-wrap img {
    transform: scale(1.04);
}

.product-info {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.product-name {
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.8rem;
    color: #e8e0ce;
    line-height: 1.2;
}
.product-cta {
    font-size: 0.7rem;
    color: #c9a96e;
    letter-spacing: 0.08em;
    font-weight: bold;
}

/* ── BOOK SECTION ─────────────────────────────────────────────── */
.book-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
}

.book-img-wrap {
    flex: 0 0 45%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(212, 160, 23, 0.3), 0 0 20px rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(212, 160, 23, 0.3);
    transition: all 0.3s ease;
}
.book-img-wrap:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(212, 160, 23, 0.5), 0 0 30px rgba(0, 0, 0, 0.9);
    border-color: rgba(212, 160, 23, 0.6);
}
.book-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.book-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.book-title {
    font-family: 'HwyGothic', sans-serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #ffd700;
    margin: 0;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.book-links .cta-btn {
    flex: 1;
    background: linear-gradient(135deg, #d4a017, #b8860b) !important;
    color: #0e0e0e !important;
    min-height: 44px !important;
    min-width: auto !important;
    aspect-ratio: auto !important;
    padding: 12px 20px !important;
    font-size: 0.8rem !important;
    font-weight: bold !important;
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.4);
    border-radius: 8px;
    text-shadow: none;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}

.book-links .cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(212, 160, 23, 0.5);
    background: linear-gradient(135deg, #ffd700, #d4a017) !important;
    filter: brightness(1.1);
}

.book-links .cta-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

.book-tagline {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #e8e0ce;
    line-height: 1.6;
}

/* ── MOBILE ───────────────────────────────────────────────────── */
@media only screen and (max-width: 767px), only screen and (hover: none) {
    .home-page {
        padding: 16px 12px 90px;
        gap: 36px;
    }

    /* Hero: one pane, shorter on small screens */
    .hero-play {
        min-height: 44vh;
        max-height: 440px;
        animation: none;
    }

    /* No hover on touch — slowly flash the gold wash + PLAY NOW on and off */
    .hero-play .hero-play-overlay {
        background: radial-gradient(circle at center,
                    rgba(255, 191, 0, 0.55) 0%,
                    rgba(212, 160, 23, 0.4) 50%,
                    rgba(120, 84, 0, 0.5) 100%);
        animation: heroPulse 3.6s ease-in-out infinite;
    }

    .hero-play .hero-play-text {
        transform: none;
        animation: heroPulse 3.6s ease-in-out infinite;
    }

    @keyframes heroPulse {
        0%, 100% { opacity: 0; }
        45%, 55% { opacity: 1; }
    }

    .community-cta {
        padding: 40px 20px;
    }

    /* Social icons shrink to fit the row on narrow screens (cap at full size) */
    .community-social {
        gap: 10px;
        width: 100%;
        justify-content: center;
    }

    .community-social a {
        flex: 1 1 0;
        min-width: 0;
        max-width: 46px;
        height: auto;
        aspect-ratio: 1;
        font-size: 1.05rem;
    }

    .intro-ctas {
        width: 100%;
    }

    .intro-ctas .hbtn {
        flex: 1 1 100%;
    }

    .quick-links {
        flex-direction: column;
        gap: 8px;
    }

    .quick-links a {
        padding: 8px 0;
    }

    /* Stack shop and book vertically */
    .home-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Side-by-side product cards stay 2-col on mobile */
    .product-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-img-wrap {
        flex: 1 1 auto;
        min-height: 120px;
        max-height: 120px;
    }

    .product-name {
        font-size: 0.75rem;
    }

    .product-cta {
        font-size: 0.65rem;
    }

    /* Book: reset to compact proportions on mobile */
    .book-content {
        flex: none;
    }
    .book-img-wrap {
        flex: 0 0 40%;
        max-height: 200px;
    }

    .book-links {
        gap: 6px;
    }

    .book-links .cta-btn {
        margin: 0;
        padding: 6px 10px !important;
        font-size: 0.6rem !important;
        min-height: 22px !important;
    }

    .action-bar {
        background-color: #0e0e0e;
    }
}

/* ═══════════ the little black hole (easter egg → /abyss) ═══════════
   Unlabeled, faint, drifting above the footer. Every so often it
   swallows a coin. Nobody talks about it. */

.home-abyss {
    position: fixed;
    right: 26px;
    bottom: 92px;
    width: 44px;
    height: 44px;
    z-index: 500;
    opacity: 0.45;
    animation: home-abyss-drift 9s ease-in-out infinite;
    transition: opacity 0.4s, transform 0.4s;
}

.home-abyss:hover {
    opacity: 1;
    transform: scale(1.2);
}

.home-abyss-disk {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(255,191,0,0.5) 70deg, transparent 160deg,
        rgba(160,80,230,0.35) 230deg, transparent 320deg);
    filter: blur(2px);
    animation: home-abyss-spin 7s linear infinite;
}

.home-abyss-core {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #000;
    box-shadow:
        0 0 8px 2px rgba(255,150,0,0.35),
        0 0 18px 6px rgba(120,50,200,0.2);
}

/* a lone coin falls in every twelve seconds; it is not coming back */
.home-abyss-coin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: #ffbf00;
    box-shadow: 0 0 5px rgba(255,191,0,0.9);
    opacity: 0;
    animation: home-abyss-coin 12s linear infinite;
}

@keyframes home-abyss-spin {
    to { transform: rotate(360deg); }
}

@keyframes home-abyss-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* hover suspends the drift so the swell doesn't fight it */
.home-abyss:hover { animation: none; }

@keyframes home-abyss-coin {
    0% { transform: translate(30px, -34px) scale(1); opacity: 0; }
    2% { opacity: 1; }
    12% { transform: translate(0, 0) scale(0.1) rotate(300deg); opacity: 0; }
    100% { transform: translate(30px, -34px) scale(1); opacity: 0; }
}

/* ── Retailers strip under the physical products grid ─────────── */
.home-retailers-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    margin-top: 18px;
    padding: 10px 18px;
    border: 1px solid rgba(212, 160, 23, 0.3);
    border-radius: 10px;
    font-family: 'HwyGothic', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffd700;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-retailers-link:hover {
    background: rgba(212, 160, 23, 0.08);
    border-color: rgba(212, 160, 23, 0.6);
    color: #fff;
    transform: none;
}

/* ═══════════ Home revamp (10/22/2026) ═══════════
   Same world as the sign-in gate and the play menu: breach backdrop, molten
   gold, ember accents, smoked glass. The first screen sells the game and asks
   once (PLAY FREE); everything below gives a reason to stay and sign up. */

.home-page {
    gap: 84px;
    max-width: 1240px;
    padding-top: 8px;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 60px);
    min-height: min(calc(100vh - 150px), 760px);
    padding: 12px 0 56px;
}

.home-hero-copy {
    text-align: left;
    animation: gateRiseIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-hero-logo {
    display: block;
    width: min(290px, 70%);
    height: auto;
    margin: 0 0 12px -6px;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 26px rgba(255, 74, 28, 0.35));
}

.home-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.74rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #ff4a1c;
    text-shadow: 0 0 12px rgba(255, 74, 28, 0.6);
}

.home-kicker::before {
    content: '';
    flex: 0 0 36px;
    height: 2px;
    background: linear-gradient(90deg, #ff4a1c, rgba(255, 191, 0, 0.8));
    box-shadow: 0 0 8px rgba(255, 74, 28, 0.8);
}

.home-headline {
    margin: 0 0 16px;
    font-family: 'DragonSlayer', serif;
    font-weight: normal;
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: 1px;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 48%, #ff7a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.8));
    text-wrap: balance;
}

.home-lead {
    max-width: 520px;
    margin: 0 0 28px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(240, 236, 230, 0.74);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.home-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* Signed-in visitors (html.signed-in, set before first paint) skip the sign-up asks */
html.signed-in .home-signed-out {
    display: none !important;
}

/* ── Hero buttons ── */
.hbtn {
    border-radius: 999px;
}

.hbtn-xl {
    padding: 18px 40px;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
}

/* Molten primary with a glint that crosses on its own every few seconds */
.hbtn-blaze {
    position: relative;
    overflow: hidden;
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 10px 30px rgba(255, 140, 20, 0.45), 0 0 0 1px rgba(255, 220, 140, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: homeBlazePulse 2.8s ease-in-out infinite;
}

.hbtn-blaze::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: gateGlint 4.5s ease-in-out 1.2s infinite;
    pointer-events: none;
}

.hbtn-blaze:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.06) saturate(1.1);
    box-shadow: 0 16px 40px rgba(255, 120, 20, 0.6), 0 0 50px rgba(255, 150, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@keyframes homeBlazePulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(255, 140, 20, 0.4), 0 0 0 1px rgba(255, 220, 140, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
    50%      { box-shadow: 0 12px 38px rgba(255, 120, 20, 0.6), 0 0 34px rgba(255, 150, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}

.hbtn-ghost {
    color: #ffd45e;
    background: rgba(255, 191, 0, 0.05);
    border: 1px solid rgba(255, 191, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hbtn-ghost:hover {
    color: #fff2c2;
    background: rgba(255, 191, 0, 0.14);
    border-color: #ffbf00;
}

/* ── Hero stage: the gameplay video in a ringed frame ── */
@property --stage-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.home-hero-stage {
    position: relative;
    animation: gateRiseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Ember light pooled behind the frame */
.home-stage-glow {
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 110, 30, 0.32) 0%, rgba(255, 74, 28, 0.1) 45%, rgba(255, 74, 28, 0) 70%);
    filter: blur(10px);
    animation: homeStageGlow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes homeStageGlow {
    0%, 100% { opacity: 0.7; transform: scale(0.97); }
    50%      { opacity: 1;   transform: scale(1.03); }
}

/* Turning gold/ember ring on the frame edge (masked conic, like the gate card) */
.home-hero-stage::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: -2px;
    padding: 2px;
    border-radius: 20px;
    background: conic-gradient(from var(--stage-angle), rgba(255, 191, 0, 0.12) 0deg, rgba(255, 191, 0, 0.95) 50deg, rgba(255, 74, 28, 0.95) 95deg, rgba(255, 191, 0, 0.12) 160deg, rgba(255, 191, 0, 0.12) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: homeStageRing 7s linear infinite;
    pointer-events: none;
}

@keyframes homeStageRing {
    to { --stage-angle: 360deg; }
}

.home-hero-stage .hero-play {
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 10;
    margin: 0;
    border: 0;
    border-radius: 18px;
    background: #070404;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 74, 28, 0.18);
    animation: none;
}

.home-hero-stage .hero-play:hover,
.home-hero-stage .hero-play:focus-visible {
    animation: none;
    transform: translateY(-4px);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.75), 0 0 80px rgba(255, 140, 30, 0.4);
}

.home-hero-stage .hero-badge {
    border-color: rgba(255, 191, 0, 0.45);
    background: rgba(10, 6, 4, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Right half of the hero: the video, then (signed-out) the sign-up card beneath it */
.home-hero-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* Under the video the Google Play strip spans the column, content centred */
.home-hero-side .home-android {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    justify-content: center;
}

/* ── Section titles ──────────────────────────────────────────────── */
.home-section-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 28px;
}

.home-section-head::before,
.home-section-head::after {
    content: '';
    flex: 0 1 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 74, 28, 0), #ff4a1c, rgba(255, 191, 0, 0.9));
    box-shadow: 0 0 8px rgba(255, 74, 28, 0.6);
}

.home-section-head::after {
    transform: scaleX(-1);
}

.home-section-title {
    margin: 0;
    font-family: 'DragonSlayer', serif;
    font-weight: normal;
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    letter-spacing: 1.5px;
    text-align: center;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 50%, #ff7a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85));
}

/* The trailer / news headers take the same big title */
.section-header-center::after {
    display: none;
}

.section-header-center .section-label {
    font-family: 'DragonSlayer', serif;
    font-weight: normal;
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    letter-spacing: 1.5px;
    text-transform: none;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 50%, #ff7a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85));
}

/* ── Modes: four tall art cards ───────────────────────────────────── */
.home-modes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.home-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    background: linear-gradient(180deg, #2a1206 0%, #120906 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 191, 0, 0.18), 0 18px 40px rgba(0, 0, 0, 0.55);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2), box-shadow 0.3s ease;
}

.home-mode-arena    { background: radial-gradient(ellipse 80% 55% at 50% 28%, rgba(255, 110, 20, 0.45), rgba(255, 110, 20, 0) 70%), linear-gradient(180deg, #2c1206 0%, #110806 100%); }
.home-mode-campaign { background: radial-gradient(ellipse 80% 55% at 50% 28%, rgba(80, 160, 255, 0.28), rgba(80, 160, 255, 0) 70%), linear-gradient(180deg, #121826 0%, #0b0a0c 100%); }
.home-mode-tutorials { background: radial-gradient(ellipse 80% 55% at 50% 28%, rgba(255, 191, 0, 0.32), rgba(255, 191, 0, 0) 70%), linear-gradient(180deg, #241a08 0%, #0e0a06 100%); }

.home-mode-art {
    position: absolute;
    z-index: -1;
    top: 8%;
    left: 50%;
    height: 56%;
    width: auto;
    transform: translateX(-50%) rotate(-6deg);
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(255, 120, 30, 0.35));
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2), filter 0.4s ease;
}

.home-mode-campaign .home-mode-art,
.home-mode-tutorials .home-mode-art {
    height: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
}

.home-mode-campaign .home-mode-art {
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 24px rgba(80, 160, 255, 0.45));
}

/* Ranked: the live board itself fills the card, fading into the copy */
.home-mode-ranked .home-mode-art {
    top: 0;
    left: 0;
    width: 100%;
    height: 72%;
    object-fit: cover;
    object-position: 40% center;
    transform: none;
    opacity: 0.85;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    filter: saturate(1.15);
}

.home-mode-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 70px 20px 22px;
    background: linear-gradient(180deg, rgba(8, 5, 4, 0) 0%, rgba(8, 5, 4, 0.88) 38%, rgba(8, 5, 4, 0.96) 100%);
}

.home-mode-kicker {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.66rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #ff7a3c;
    text-shadow: 0 0 10px rgba(255, 74, 28, 0.55);
}

.home-mode-kicker i {
    margin-right: 4px;
}

.home-mode-title {
    font-family: 'DragonSlayer', serif;
    font-size: 1.55rem;
    line-height: 1.05;
    text-transform: uppercase;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 55%, #ff8a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.home-mode-desc {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(240, 236, 230, 0.66);
}

.home-mode:hover {
    transform: translateY(-8px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 191, 0, 0.75), 0 26px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 120, 30, 0.3);
}

.home-mode:hover .home-mode-art {
    transform: translateX(-50%) translateY(-6%) rotate(-2deg) scale(1.08);
}

.home-mode-campaign:hover .home-mode-art,
.home-mode-tutorials:hover .home-mode-art {
    transform: translateX(-50%) translateY(-6%) scale(1.08) rotate(6deg);
}

.home-mode-ranked:hover .home-mode-art {
    transform: scale(1.06);
    opacity: 1;
}

/* ── Sign-up card under the hero video (signed-out only) ── */
.home-join-card {
    width: 100%;
    max-width: none;
    animation: gateRiseIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.home-join-card .gate-card-inner {
    padding: 20px 24px 22px;
}

#home-join-gate {
    text-align: center;
}

#home-join-gate .sign-in-panel-text {
    margin: 0 0 14px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(240, 236, 230, 0.7);
}

#home-join-gate .gate-google {
    display: flex;
    justify-content: center;
    min-height: 44px;
    margin: 0 0 14px;
}

#home-join-gate.no-google .gate-google {
    display: none;
}

/* Sign In / Create Account side by side under the Google button */
#home-join-gate .sign-in-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#home-join-gate .sign-in-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 999px;
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
}

#home-join-gate .sign-in-panel-primary {
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 6px 22px rgba(255, 150, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#home-join-gate .sign-in-panel-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 150, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#home-join-gate .sign-in-panel-ghost {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.4);
}

#home-join-gate .sign-in-panel-ghost:hover {
    transform: translateY(-2px);
    background: rgba(255, 191, 0, 0.12);
    border-color: #ffbf00;
}

/* ── Existing sections, re-dressed in smoked glass ──────────────────── */
.news-section,
.home-section,
.community-cta {
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 120, 30, 0.1) 0%, rgba(255, 120, 30, 0) 100%),
        linear-gradient(180deg, rgba(16, 11, 9, 0.84) 0%, rgba(8, 6, 6, 0.9) 100%);
    border: 1px solid rgba(255, 191, 0, 0.16);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 220, 150, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.community-cta {
    background:
        radial-gradient(ellipse 60% 90% at 50% 0%, rgba(255, 120, 30, 0.22) 0%, rgba(255, 120, 30, 0) 70%),
        linear-gradient(180deg, rgba(20, 12, 8, 0.88) 0%, rgba(8, 6, 6, 0.92) 100%);
}

.community-heading {
    font-family: 'DragonSlayer', serif;
    font-weight: normal;
    color: #ffbf00;
    background: linear-gradient(180deg, #fff2c2 0%, #ffbf00 48%, #ff7a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.8));
}

.community-cta .hbtn-gold {
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 10px 30px rgba(255, 140, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.home-video-wrap {
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 191, 0, 0.2), 0 0 60px rgba(255, 74, 28, 0.15);
}

/* ── Scroll reveal (html.reveal-ready is set by the page script) ── */
html.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.reveal-ready .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Mode cards stagger in once their row is revealed */
html.reveal-ready .home-modes .home-mode {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

html.reveal-ready .home-modes.is-in .home-mode {
    opacity: 1;
    transform: none;
}

html.reveal-ready .home-modes.is-in .home-mode:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s; }
html.reveal-ready .home-modes.is-in .home-mode:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s; }
html.reveal-ready .home-modes.is-in .home-mode:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s; }

html.reveal-ready .home-modes.is-in .home-mode:hover {
    transform: translateY(-8px);
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .home-backdrop-art,
    .home-backdrop .gate-embers,
    .hbtn-blaze,
    .hbtn-blaze::after,
    .home-stage-glow,
    .home-hero-stage::before,
    .home-join-card {
        animation: none;
    }

    .home-backdrop .gate-embers {
        display: none;
    }
}

/* ── Tablet ── */
@media only screen and (max-width: 1100px) {
    .home-modes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-mode {
        min-height: 320px;
    }
}

/* ── Phones / touch ── */
@media only screen and (max-width: 767px), only screen and (hover: none) {
    .home-page {
        gap: 56px;
    }

    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding-bottom: 20px;
        text-align: center;
    }

    .home-hero-copy {
        text-align: center;
    }

    .home-hero-logo {
        margin: 0 auto 12px;
        width: min(300px, 76%);
    }

    .home-kicker {
        justify-content: center;
    }

    .home-kicker::after {
        content: '';
        flex: 0 0 36px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255, 191, 0, 0.8), #ff4a1c);
    }

    .home-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero-ctas {
        justify-content: center;
    }

    .home-hero-ctas .hbtn {
        flex: 1 1 100%;
    }

    .home-hero-stage .hero-play {
        aspect-ratio: 16 / 10;
        min-height: 0;
        max-height: none;
    }

    .home-mode {
        min-height: 280px;
    }
}

@media only screen and (max-width: 520px) {
    .home-modes-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #home-join-gate .sign-in-panel-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-mode {
        min-height: 300px;
    }

    .home-mode-art {
        height: 46%;
    }
}

/* On the join band the ask is a NEW account: Create Account leads in gold, Sign In
   drops to the ghost style (the shared panel orders them the other way) */
#home-join-gate .gate-create-link {
    order: -1;
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    border: 0;
    box-shadow: 0 6px 22px rgba(255, 150, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#home-join-gate .gate-create-link:hover {
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 10px 30px rgba(255, 150, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#home-join-gate .gate-signin-link {
    color: #ffbf00;
    background: rgba(255, 191, 0, 0.04);
    border: 1px solid rgba(255, 191, 0, 0.4);
    box-shadow: none;
}

#home-join-gate .gate-signin-link:hover {
    background: rgba(255, 191, 0, 0.12);
    border-color: #ffbf00;
    box-shadow: none;
}

/* ═══════════ Home v2 (10/23/2026): its own cosmic look ═══════════
   The home page keeps the original space backdrop (darkened) with gold stardust
   and nebula glows, so it reads as its own place rather than another ember page.
   Android sits in the hero; trailer + features share one row. */

/* ── Backdrop: the original space art, darker ── */
.home-backdrop {
    background: #05040b;
}

.home-backdrop-art {
    position: absolute;
    inset: -4%;
    background: url('https://images.squarespace-cdn.com/content/654e9f1c79033c2b2d0b18ed/27a54b0c-d97e-4a9b-b916-9af516cd4a74/FINEEEEEEE.png?content-type=image%2Fpng') center / cover no-repeat;
    animation: gateArtDrift 40s ease-in-out infinite alternate;
}

.home-backdrop::after {
    background:
        radial-gradient(ellipse 75% 65% at 50% 35%, rgba(5, 4, 12, 0.35) 0%, rgba(5, 4, 12, 0.82) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0.9) 100%);
}

/* Slow-breathing nebula glows above the darkening */
.home-nebula {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    animation: homeNebula 18s ease-in-out infinite alternate;
}

.home-nebula-a {
    top: 4%;
    left: -8%;
    width: 560px;
    height: 460px;
    background: radial-gradient(circle, rgba(140, 80, 255, 0.22) 0%, rgba(140, 80, 255, 0) 70%);
}

.home-nebula-b {
    right: -10%;
    bottom: 6%;
    width: 640px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 160, 40, 0.16) 0%, rgba(255, 160, 40, 0) 70%);
    animation-delay: -9s;
}

@keyframes homeNebula {
    from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
    to   { transform: translate3d(40px, -30px, 0) scale(1.15); opacity: 1; }
}

/* The gate's embers become slow gold stardust */
.home-backdrop .gate-embers span {
    background: radial-gradient(circle, #fffbe8 0%, #ffe08a 40%, rgba(255, 210, 120, 0) 70%);
    box-shadow: 0 0 8px 1px rgba(255, 225, 150, 0.55);
    animation-duration: calc(var(--d, 11s) * 1.7);
}

/* ── Tighter rhythm: less dead space, less scrolling ── */
.home-page {
    gap: 56px;
}

.home-hero {
    padding-bottom: 40px;
}

.home-section-head {
    margin-bottom: 20px;
}

.home-mode {
    min-height: 320px;
}

/* The rise-in leaves no fill behind, so the tilt script's inline transform wins after it */
.home-hero-stage {
    animation-fill-mode: backwards;
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── Hero flair ── */
.home-hero-logo-wrap {
    position: relative;
    width: min(290px, 70%);
    margin: 0 0 12px -6px;
}

/* width lives on the wrapper (a % of a fit-content box would be circular) */
.home-hero-logo-wrap .home-hero-logo {
    width: 100%;
    margin: 0;
}

.home-hero-logo {
    position: relative;
    animation: homeLogoFloat 6s ease-in-out infinite;
}

.home-logo-halo {
    position: absolute;
    inset: 8% 4% 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 190, 60, 0.35) 0%, rgba(140, 80, 255, 0.18) 45%, rgba(0, 0, 0, 0) 72%);
    filter: blur(18px);
    animation: homeHalo 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes homeLogoFloat {
    0%, 100% { transform: translateY(0) rotate(-0.6deg); }
    50%      { transform: translateY(-8px) rotate(0.6deg); }
}

@keyframes homeHalo {
    0%, 100% { opacity: 0.65; transform: scale(0.95); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

/* A light sweep crossing the gold headline every few seconds */
.home-headline {
    background-image:
        linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, #fff2c2 0%, #ffbf00 48%, #ff7a1c 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 160% 0, 0 0;
    background-repeat: no-repeat;
    animation: homeShine 7s ease-in-out 1.5s infinite;
}

@keyframes homeShine {
    0%, 70% { background-position: 160% 0, 0 0; }
    100%    { background-position: -60% 0, 0 0; }
}

/* ── Android, right under the CTAs ── */
.home-android {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 18px;
    padding: 8px 18px 8px 8px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 16, 34, 0.75) 0%, rgba(10, 8, 18, 0.7) 100%);
    border: 1px solid rgba(255, 191, 0, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.home-android-badge {
    flex: 0 0 auto;
    display: inline-block;
    line-height: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Google's badge has clear space baked in: only scaled, never restyled */
.home-android-badge img {
    height: 56px;
    width: auto;
}

.home-android-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.12) drop-shadow(0 0 14px rgba(120, 220, 140, 0.35));
}

.home-android-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    max-width: 300px;
    text-align: left;
}

.home-android-text strong {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: #ffd45e;
}

.home-android-text span {
    font-family: 'HwyGothic', Arial, sans-serif;
    font-size: 0.74rem;
    line-height: 1.4;
    color: rgba(240, 236, 230, 0.62);
}

/* ── Showcase: trailer beside the ad slideshow (both 16:9, bottoms aligned) ── */
.home-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 22px;
}

.home-showcase-video .home-kicker {
    margin-bottom: 12px;
}

.home-showcase-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #0a0706;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 191, 0, 0.2), 0 0 60px rgba(255, 74, 28, 0.15);
}

.home-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity 0.8s ease, transform 5.8s ease-out, visibility 0s linear 0.8s;
}

.home-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.8s ease, transform 5.8s ease-out, visibility 0s;
}

.home-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-showcase-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    padding: 0 0 3px;
    border: 1px solid rgba(255, 191, 0, 0.35);
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    color: #ffd45e;
    background: rgba(10, 7, 6, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.home-showcase-prev { left: 12px; }
.home-showcase-next { right: 12px; }

.home-showcase-frame:hover .home-showcase-arrow,
.home-showcase-arrow:focus-visible {
    opacity: 1;
}

.home-showcase-arrow:hover {
    background: rgba(40, 22, 8, 0.85);
    border-color: rgba(255, 191, 0, 0.8);
}

.home-showcase-dots {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 10px;
    display: flex;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(10, 7, 6, 0.5);
    transform: translateX(-50%);
}

.home-showcase-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 236, 200, 0.4);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.home-showcase-dot.is-active {
    width: 22px;
    background: linear-gradient(90deg, #ffd45e, #ff8a1c);
}

.home-trademark {
    position: relative;
    margin: 4px 0 0;
    font-size: 0.62rem;
    line-height: 1.35;
    color: #8f8468;
}

@media (prefers-reduced-motion: reduce) {
    .home-nebula,
    .home-hero-logo,
    .home-logo-halo,
    .home-headline {
        animation: none;
    }
}

/* ── Tablet ── */
@media only screen and (max-width: 1100px) {
    .home-showcase {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Phones / touch ── */
@media only screen and (max-width: 767px), only screen and (hover: none) {
    .home-page {
        gap: 44px;
    }

    .home-hero-logo-wrap {
        width: min(300px, 76%);
        margin: 0 auto 12px;
    }

    .home-android {
        margin-left: auto;
        margin-right: auto;
    }

    .home-android-badge img {
        height: 48px;
    }

    /* No hover on touch: keep the arrows visible but quieter */
    .home-showcase-arrow {
        opacity: 0.75;
        width: 32px;
        height: 32px;
        margin-top: -16px;
        font-size: 1.35rem;
    }
}

@media only screen and (max-width: 520px) {
    /* Badge + headline only; the sentence would crowd the row */
    .home-android-text span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-slide,
    .home-slide.is-active {
        transform: none;
    }
}

/* ── Tighter lower sections (less scrolling to the final call to action) ── */
/* ── LATEST NEWS ─ right under the hero (cards from news-card.js / news.css) ── */
.news-section {
    position: relative;
    padding: 20px 24px 16px;
}

.news-head {
    margin-bottom: 14px;
}

.news-head .home-section-title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
}

.news-stage .news-card {
    min-height: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .news-stage {
        transition: opacity 0.35s ease;
    }

    .news-stage.fading {
        opacity: 0.2;
    }
}

.news-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.news-section[hidden],
.news-nav[hidden] {
    display: none;
}

.news-arrow {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 191, 0, 0.3);
    background: rgba(255, 191, 0, 0.06);
    color: #ffbf00;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.news-arrow:hover,
.news-arrow:focus-visible {
    border-color: #ffbf00;
    background: rgba(255, 191, 0, 0.16);
    outline: none;
}

.news-dots {
    display: flex;
    gap: 8px;
}

.news-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(240, 236, 230, 0.25);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease;
}

.news-dot[aria-current="true"] {
    width: 24px;
    border-radius: 999px;
    background: #ffbf00;
}

.news-dot:focus-visible {
    outline: 2px solid #ffbf00;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .news-section {
        padding: 16px 14px 12px;
    }

    /* no room for the flourishes beside the title: they pushed it onto two lines */
    .news-head::before,
    .news-head::after {
        display: none;
    }
}

.home-section {
    padding: 28px;
    gap: 18px;
}

.product-img-wrap {
    min-height: 170px;
}

/* The buy buttons were stretching to fill the book column */
.book-links .cta-btn {
    flex: 0 0 auto;
}

.community-cta {
    padding: 40px 32px;
}
/* ── Home A/B test, version B (home-variant.js sets html[data-home-variant]) ──
   Only the gameplay video, full width under the header, and one giant PLAY NOW in the middle. */
.home-b {
    display: none;
}

html[data-home-variant="B"] .home-page,
html[data-home-variant="B"] .home-backdrop,
html[data-home-variant="B"] .home-abyss {
    display: none;
}

html[data-home-variant="B"] .home-b {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100vh - 70px);
    min-height: calc(100svh - 70px);
    overflow: hidden;
    background: #050302;
}

.home-b-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* darkens the edges so the button reads over any frame of the video */
.home-b-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6) 100%);
}

.home-b-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 1.4em;
    border-radius: 999px;
    font-family: 'DragonSlayer', serif;
    font-size: clamp(2rem, 7vw, 4.2rem);
    letter-spacing: 2px;
    line-height: 1;
    text-decoration: none;
    color: #1a0d04;
    background: linear-gradient(180deg, #ffd45e 0%, #ffbf00 45%, #ff9a1c 100%);
    box-shadow: 0 16px 50px rgba(255, 140, 20, 0.55), 0 0 0 2px rgba(255, 220, 140, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.55);
    animation: homeBlazePulse 2.8s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.home-b-play i {
    font-size: 0.7em;
}

.home-b-play:hover {
    color: #1a0d04;
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .home-b-play {
        animation: none;
        transition: none;
    }
}