/* Chessingo - neon arcade chess vs trash-talking bots.
   Token names inherited from the cropsicles base theme; VALUES are the
   chessingo palette (dark checkerboard + neon cyan/magenta/gold). */

:root {
    --sky: #3fd8ff;            /* neon cyan - primary glow */
    --grape: #7b2ff7;
    --grape-deep: #22104e;
    --lime: #4dffb0;           /* neon mint - CTA */
    --lime-deep: #0e8c56;
    --magenta: #ff2d78;        /* hot magenta - trash-talk accent */
    --magenta-deep: #a90e4c;
    --corn: #ffd23f;           /* arcade gold - headings */
    --tangerine: #ff9f1c;
    --berry: #b34fff;
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.82);
    --card: rgba(255, 255, 255, 0.10);
    --card-line: rgba(255, 255, 255, 0.26);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* THE `hidden` ATTRIBUTE ALWAYS WINS. Any rule that sets `display` on an element
   beats the attribute's UA style, and this repo has shipped that bug four times
   (#vs-intro, .cgl, .cgl-panel, then .clash-stage painting an empty board HUD
   under the /clash lobby on prod). Guarding each element one at a time is how it
   kept coming back, so it is guarded once, for everything. */
[hidden] { display: none !important; }

/* STICKY FOOTER. A short page (sign in, an empty table) left the footer floating
   mid-screen with bare background below it. Body is a column and the footer takes
   the slack, so it sits at the bottom of the viewport when content is short and
   after the content when it is long. The nav and cookie banner are fixed, so they
   are out of this flow. Flow children get width:100% because a flex item with
   margin:auto otherwise shrinks to its content and would lose its max-width
   centring. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > header, body > main, body > section, body > div.breadcrumb-bar, body > footer { width: 100%; flex-shrink: 0; }
body > footer { margin-top: auto; }

body {
    font-family: 'Outfit', 'Segoe UI', sans-serif;
    color: var(--text);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -8%, rgba(63, 216, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 100% 25%, rgba(255, 45, 120, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 0% 55%, rgba(77, 255, 176, 0.10) 0%, transparent 42%),
        linear-gradient(180deg, #101318 0%, #0c0e13 48%, #07080c 100%);
    background-attachment: fixed;
}

.logo, .hero h1, .world-text h3, .sec-title { font-family: 'Bangers', 'Outfit', sans-serif; font-weight: 400; letter-spacing: 0.03em; }

/* Form controls don't inherit font-family by default -> force them onto the
   Outfit body font so buttons/inputs/selects never fall back to the system
   font (the main source of cross-page font inconsistency). */
button, input, select, textarea { font-family: inherit; }

/* Nav */
nav {
    position: fixed; top: 0; width: 100%; z-index: 100;
    background: rgba(26, 28, 35, 0.82);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(166, 243, 74, 0.4);
}
.nav-inner {
    max-width: 960px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1.5rem;
}
.logo {
    text-decoration: none; color: var(--text);
    font-size: 0.8rem; letter-spacing: 0.05em;
    display: flex; align-items: center; gap: 0.5rem;
    text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
/* Sized by HEIGHT, and the wordmark is a long one: nine Cinzel caps run about
   9.9x their cap height, so the box is ~5.75:1 once the glow margin is counted.
   46px here made the mark 264px wide and crowded the links. */
.logo-img {
    display: block; height: 28px; width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-link {
    color: var(--text-dim); text-decoration: none;
    font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em;
    transition: color 0.15s;
}
.nav-link:hover { color: var(--corn); }
.nav-link.is-active { color: var(--sky); }
.nav-link.is-active::after {
    content: ''; display: block; height: 2px; margin-top: 3px;
    background: var(--sky); border-radius: 2px;
    box-shadow: 0 0 8px var(--sky);
}
.nav-signin { color: var(--text); }

/* Logged-in account chip + dropdown (shell-nav.js) */
.nav-account { position: relative; }
.nav-chip {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
    color: var(--text); border-radius: 9999px; padding: 0.35rem 0.8rem;
    font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.nav-chip:hover { border-color: var(--sky); }
.nav-chip-dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--lime), var(--lime-deep));
    box-shadow: 0 0 6px rgba(77,255,176,0.6);
}
.nav-menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px;
    display: flex; flex-direction: column;
    background: rgba(26,28,35,0.98); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px; padding: 6px; z-index: 120;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.nav-menu[hidden] { display: none; }
.nav-menu-item {
    text-align: left; background: none; border: 0; color: var(--text);
    font: inherit; font-size: 0.9rem; text-decoration: none;
    padding: 0.55rem 0.8rem; border-radius: 8px; cursor: pointer;
}
.nav-menu-item:hover { background: rgba(255,255,255,0.08); color: var(--corn); }

/* Mobile hamburger (GDD s11.6) */
.nav-burger {
    display: none; flex-direction: column; gap: 4px; cursor: pointer;
    background: none; border: 0; padding: 6px; margin-left: auto;
}
.nav-burger span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--text);
}
@media (max-width: 720px) {
    .nav-burger { display: flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0.4rem;
        background: rgba(26,28,35,0.98); border-bottom: 2px solid rgba(166,243,74,0.4);
        padding: 0.9rem 1.5rem; display: none;
    }
    .nav-links.is-open { display: flex; }
    .nav-account { align-self: stretch; }
    .nav-menu { position: static; box-shadow: none; margin-top: 6px; }
    .btn-play { text-align: center; }
}
@media (max-width: 480px) {
    .nav-link { font-size: 0.9rem; }
}
/* Glossy lime pill */
.btn-play {
    background: linear-gradient(180deg, #c4ff7a 0%, var(--lime) 45%, var(--lime-deep) 100%);
    color: #143d00;
    padding: 0.6rem 1.3rem; border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    text-decoration: none; letter-spacing: 0.02em;
    box-shadow: 0 4px 0 var(--lime-deep), 0 6px 14px rgba(0,0,0,0.3),
                inset 0 2px 2px rgba(255,255,255,0.7);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--lime-deep), 0 10px 20px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.7); }
.btn-play:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lime-deep), inset 0 2px 2px rgba(255,255,255,0.6); }

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem 3rem;
    overflow: hidden;
}
/* Hero backdrop: CSS-only for now (perspective checkerboard fading into the
   dark + neon glow). Swap background-image to hero key art from the CDN once
   the Midjourney pack (docs/ART-PROMPTS.md) is generated. */
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-color: #0a0c11;
    background-image:
        linear-gradient(180deg, rgba(10,12,17,0.06) 0%, rgba(10,12,17,0.45) 72%, rgba(10,12,17,0.9) 94%, #0a0c11 100%),
        url('https://prodmedia.tyga.host/public/tyga.cloud/landing/chessingo.com/chessingo_widescreen_splash.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}
/* Giant floating chess glyphs over the board */
.hero-pieces {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    font-family: 'Times New Roman', serif;
}
.hero-pieces span {
    position: absolute;
    color: rgba(255,255,255,0.10);
    text-shadow: 0 0 32px rgba(63,216,255,0.35);
    animation: piece-drift 8s ease-in-out infinite alternate;
}
.hero-pieces .p1 { top: 12%; left: 8%;  font-size: 7rem; }
.hero-pieces .p2 { top: 55%; left: 16%; font-size: 5rem;  color: rgba(255,45,120,0.14); animation-delay: -2.5s; }
.hero-pieces .p3 { top: 18%; right: 10%; font-size: 6rem;  color: rgba(77,255,176,0.12); animation-delay: -4s; }
.hero-pieces .p4 { top: 58%; right: 18%; font-size: 8rem;  animation-delay: -6s; }
@keyframes piece-drift { to { transform: translateY(-18px) rotate(2deg); } }

/* Hero music toggle: bottom-right, above the vignette. Default = off. */
.hero-audio-toggle {
    position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 5;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.9rem; cursor: pointer;
    border: 2px solid var(--card-line); border-radius: 9999px;
    background: rgba(20, 22, 27, 0.6); backdrop-filter: blur(6px);
    color: var(--text-dim); font-family: 'Outfit', sans-serif;
    font-size: 0.8rem; letter-spacing: 0.02em;
    transition: color 0.15s, border-color 0.15s, transform 0.12s;
}
.hero-audio-toggle:hover { transform: translateY(-1px); border-color: var(--sky); color: var(--text); }
.hero-audio-toggle .ha-icon { font-size: 1rem; line-height: 1; }
.hero-audio-toggle.is-on { color: var(--corn); border-color: var(--sky); }
.hero-audio-toggle.is-on .ha-icon { color: var(--sky); }
@media (max-width: 480px) { .hero-audio-toggle .ha-label { display: none; } }

/* Candy sparkle drift */
.stars {
    position: absolute; inset: 0;
    background:
        radial-gradient(5px 5px at 18% 26%, #fff 60%, transparent 62%),
        radial-gradient(4px 4px at 78% 18%, var(--corn) 60%, transparent 62%),
        radial-gradient(6px 6px at 64% 72%, var(--magenta) 60%, transparent 62%),
        radial-gradient(4px 4px at 30% 66%, var(--lime) 60%, transparent 62%),
        radial-gradient(5px 5px at 88% 55%, #fff 60%, transparent 62%),
        radial-gradient(4px 4px at 22% 84%, var(--berry) 60%, transparent 62%);
    opacity: 0.9;
    animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translateY(-24px); } }


.hero-bg-overlay {
    position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(20,22,27,0.05) 55%,
        rgba(20,22,27,0.22) 100%
    );
}

.hero h1 {
    font-size: 3.4rem;
    color: var(--corn);
    letter-spacing: 0.05em;
    text-shadow:
        0 0 40px rgba(255,210,63,0.5),
        3px 3px 0 var(--magenta),
        6px 6px 0 rgba(0,0,0,0.35);
    margin-bottom: 1.2rem;
}
.hero h1 .tm { font-size: 1rem; vertical-align: top; color: var(--lime); }

/* Wider than the old raster lockup because the wordmark no longer carries a
   painted plate around it: the letters ARE the asset, so the box is all word. */
.hero-logo {
    display: block;
    width: min(900px, 94vw);
    height: auto;
    /* The wordmark is WIDER than .hero-content (720px), and margin:auto cannot
       centre a block wider than its parent: the whole overflow spilled to the
       right, 90px off-centre at desktop. Centre on the parent's midpoint. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 0.6rem;
    filter: drop-shadow(0 6px 22px rgba(0,0,0,0.55));
}
@media (max-width: 600px) { .hero-logo { margin-bottom: 1.2rem; } }

.tagline {
    font-size: 1.25rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.hero-sub {
    font-size: 1rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 480px;
    /* The hero plate is deliberately light on tint so the splash art reads
       through, so dim body copy needs its own contrast rather than borrowing
       the backdrop's. */
    text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}

/* Blinking cursor */
.cursor {
    display: inline-block;
    width: 0.5em; height: 1em;
    background: var(--corn);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Glossy candy-magenta PLAY pill */
.btn-primary {
    display: inline-block;
    background: linear-gradient(180deg, #ff8cc4 0%, var(--magenta) 45%, var(--magenta-deep) 100%);
    color: #ffffff;
    padding: 1.1rem 2.8rem;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 6px 0 var(--magenta-deep), 0 10px 22px rgba(0,0,0,0.4),
                inset 0 2px 3px rgba(255,255,255,0.6);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--magenta-deep), 0 16px 30px rgba(0,0,0,0.45), inset 0 2px 3px rgba(255,255,255,0.6);
}
.btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--magenta-deep), inset 0 2px 3px rgba(255,255,255,0.5);
}

/* Hero CTA row: Play Free (primary) leads, Wishlist rides alongside as the
   secondary action. Wraps to stacked on narrow screens. */
.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-note {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 1.1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.hero-note a { color: var(--lime); font-weight: 700; text-decoration: none; }
.hero-note a:hover { text-decoration: underline; }

/* Feature tiles */
/* World cards: the four splash images as feature cards, game-feature copy laid
   over a bottom gradient (splash art has its own UFO, unlike the hero). */
.worlds {
    padding: 4rem 1.5rem;
}
.worlds-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
.world-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid var(--card-line);
    background-size: cover; background-position: center;
    background-color: #14161b;
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.world-card:hover {
    transform: translateY(-5px);
    border-color: var(--corn);
    box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 30px rgba(255,210,63,0.22);
}
.world-card.w1 { background-image: linear-gradient(135deg, #123, #0a0c11), repeating-conic-gradient(rgba(63,216,255,0.10) 0% 25%, transparent 0% 50%); background-size: cover, 48px 48px; }
.world-card.w2 { background-image: linear-gradient(135deg, #2a1030, #0a0c11), repeating-conic-gradient(rgba(255,45,120,0.10) 0% 25%, transparent 0% 50%); background-size: cover, 48px 48px; }
.world-card.w3 { background-image: linear-gradient(135deg, #0f2c22, #0a0c11), repeating-conic-gradient(rgba(77,255,176,0.10) 0% 25%, transparent 0% 50%); background-size: cover, 48px 48px; }
.world-card.w4 { background-image: linear-gradient(135deg, #2c230f, #0a0c11), repeating-conic-gradient(rgba(255,210,63,0.10) 0% 25%, transparent 0% 50%); background-size: cover, 48px 48px; }
.world-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,11,15,0.92) 0%, rgba(10,11,15,0.55) 38%, rgba(10,11,15,0) 68%);
}
.world-text {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.4rem 1.5rem;
    text-align: left;
}
.world-text h3 {
    font-size: 0.9rem; color: var(--corn);
    margin-bottom: 0.6rem; letter-spacing: 0.02em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.world-text p {
    font-size: 0.95rem; color: var(--text);
    line-height: 1.55;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Hook Section */
.hook {
    padding: 4rem 1.5rem 5rem;
    text-align: center;
}
.hook-inner { max-width: 640px; margin: 0 auto; }
.fragment {
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 auto 2rem;
    max-width: 520px;
    font-weight: 500;
    text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.fragment.last { margin-bottom: 2.5rem; }

.btn-secondary {
    display: inline-block;
    background: linear-gradient(180deg, #c4ff7a 0%, var(--lime) 45%, var(--lime-deep) 100%);
    color: #143d00;
    padding: 1rem 2.4rem;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem; font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow: 0 5px 0 var(--lime-deep), 0 8px 18px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.6);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--lime-deep), 0 14px 26px rgba(0,0,0,0.4), inset 0 2px 2px rgba(255,255,255,0.6); }
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--lime-deep), inset 0 2px 2px rgba(255,255,255,0.5); }

/* Footer */
footer {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    background: rgba(26, 28, 35, 0.7);
    border-top: 2px solid rgba(166, 243, 74, 0.28);
}
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--corn); }
footer .sep { margin: 0 0.5rem; opacity: 0.4; }
.footer-powered { margin-top: 0.6rem; }
.footer-powered a { color: var(--corn); text-decoration: underline; font-weight: 600; }
.footer-powered a:hover { color: var(--magenta); }
.footer-powered .studio { color: var(--text-dim); }

/* Mobile */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .tagline { font-size: 1rem; }
    .btn-primary { font-size: 1.05rem; padding: 0.9rem 2rem; }
    .worlds-inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.7rem; letter-spacing: 0.03em; }
    .tagline { font-size: 0.9rem; }
}

/* ── Meet the Bots band ── */
.bots { padding: 4.5rem 1.5rem; }
.bots-inner { max-width: 1080px; margin: 0 auto; }
.bots .sec-head { text-align: center; margin-bottom: 2.4rem; }
.bots-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem;
}
@media (max-width: 900px) { .bots-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bots-grid { grid-template-columns: 1fr; } }
.bot-card {
    position: relative;
    background: var(--card); border: 2px solid var(--card-line);
    border-radius: 18px; padding: 1.5rem 1.4rem 1.4rem;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.bot-card:hover {
    transform: translateY(-4px);
    border-color: var(--magenta);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 0 26px rgba(255,45,120,0.18);
}
.bot-glyph {
    font-family: 'Times New Roman', serif;
    font-size: 2.6rem; line-height: 1;
    display: block; margin-bottom: 0.7rem;
    text-shadow: 0 0 18px rgba(63,216,255,0.5);
}
.bot-name {
    font-family: 'Outfit', sans-serif; font-weight: 800;
    font-size: 1.05rem; color: var(--corn);
    margin-bottom: 0.2rem;
}
.bot-tier {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--sky);
    margin-bottom: 0.8rem;
}
.bot-bubble {
    position: relative;
    background: rgba(255, 45, 120, 0.12);
    border: 1.5px solid rgba(255, 45, 120, 0.45);
    border-radius: 12px; padding: 0.7rem 0.9rem;
    font-size: 0.95rem; font-style: italic; color: var(--text-dim);
}
.bot-bubble::before {
    content: ''; position: absolute; top: -9px; left: 22px;
    width: 14px; height: 14px; transform: rotate(45deg);
    background: inherit;
    border-left: 1.5px solid rgba(255, 45, 120, 0.45);
    border-top: 1.5px solid rgba(255, 45, 120, 0.45);
}

/* Hero content sits above the bg/overlay layers */
.hero-content { position: relative; z-index: 4; max-width: 720px; }

/* Section headings (shared by landing + league) */
.sec-kicker {
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.22em;
    color: var(--magenta); text-transform: uppercase; margin-bottom: 0.6rem;
}
.sec-title { font-size: 2rem; color: var(--corn); margin-bottom: 0.7rem; }
.sec-sub { font-size: 1rem; color: var(--text-dim); max-width: 560px; margin: 0 auto; }

/* An opponent genuinely composing a live line (8-40s upstream). Muted so it
   reads as an indicator, not as something they said. */
.ev .ev-typing { opacity: .55; font-style: italic; }