/* ═══════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════ */
:root {
    --blue-bg: #4a6cf7;
    --blue-dark: #3a56d4;
    --coral: #EB4229;
    --coral-dark: #f05565;
    --yellow: #e8d57e;
    --yellow-card: #FFF44E;
    --navy: #5696FC;
    --navy-deep: #141d42;
    --white: #ffffff;
    --text-dark: #1a1a2e;
    --text-body: #EB4229;
    --card-radius: 16px;
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Global bold title treatment — matches PSD thick stroked look */
[class*="title"],
.hero h1,
.about-hero h1,
.page-hero h1,
.story-section-title,
.about-team-title,
.showcase-header h2,
.gameplay-title,
.feature-text h2,
.story-card-text h2,
.team-info h3,
.content-card-title,
.legal-card h2,
.news-post-header h1,
.news-post-body h2{
    -webkit-text-stroke: 1.8px rgba(0,0,0,0.18);
    paint-order: stroke fill;
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25), 0 0 0 rgba(0,0,0,0.05);
    letter-spacing: 0.5px;
}

body {
    font-family: 'Fira Sans Condensed', sans-serif;
    background-color: #0c57d1;
    background-image: url('../assets/BG.webp');
    background-repeat: repeat;
    color: var(--white);
    overflow-x: hidden;
    position: relative;
}

.page-content {
    position: relative;
    z-index: 1;
    max-width: 50rem;
    margin: 0 auto;
}

/* Home page manages its own component widths (.hero and .available-on each
   have their own 64rem max-width + full-bleed breakout) — capping
   .page-content here would also shrink .section-wrap/.desc-card/.feature-card
   down to 800px, which isn't wanted. */
.home-page .page-content {
    max-width: 50rem;
    margin: 0 auto;
}

/* UGClevels.html manages its own full-bleed sidebar+feed layout — no cap. */
.ugc-page .page-content {
    max-width: none;
    margin: 0;
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.navbar {
    background: var(--coral);
    padding: 0 20px;
    position: sticky;
    top: 0;
    /* Above .editor-modal-overlay's z-index:1000 so the navbar stays on top
       even while the 2D/3D editor dialog is open. */
    z-index: 1100;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.navbar-inner {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    gap: 8px;
    position: relative;
}

.nav-links {
    display: flex;
    gap: 2px;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 19px;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    border-radius: 12px;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: uppercase;
}

.nav-links a:hover {
    background: rgba(255,255,255,0.15);
}

.nav-links a.active {
    background: var(--white);
    color: var(--coral);
    border-radius: 12px;
}

.nav-lang-wrapper {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-lang {
    font-family: 'Luckiest Guy', cursive;
    font-size: 11px;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-lang:hover {
    background: rgba(255,255,255,0.15);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    list-style: none;
    min-width: 180px;
    padding: 6px 0;
    z-index: 200;
    overflow: hidden;
}

.nav-lang-wrapper.open .lang-dropdown {
    display: block;
}

.lang-dropdown li a {
    display: block;
    padding: 10px 18px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.15s;
}

.lang-dropdown li a:hover {
    background: rgba(255,107,122,0.1);
    color: var(--coral);
}

/* ---- Navbar account area (desktop) ----
   Pinned to the navbar's own top-right corner via .nav-auth-wrapper,
   OUTSIDE .nav-links — the nav-links list already has enough items to wrap
   onto a second line on many widths, and appending these there just wrapped
   with it. Sitting outside as an absolutely-positioned sibling of
   .nav-links (inside .navbar-inner, which is position:relative) keeps it
   fixed in place regardless of how many nav-links items there are or how
   they wrap; z-index lifts it above .nav-links in case they ever visually
   overlap at narrow desktop widths. Same corner-pinning approach as the
   (currently unused) .nav-lang-wrapper above.
   Logged out: .nav-auth--signup ("SIGN UP"). Logged in: .nav-auth-dropdown
   ("ACCOUNT ▾" with MY PROFILE / LOG OUT) — see ugcShared.js's
   initAuthNav() for the open/close + logged-in/out toggling. On mobile
   this whole wrapper is hidden (see the media query below) in favor of
   plain nav-auth--signup/--profile/--logout links in the mobile menu,
   since a corner-pinned dropdown doesn't make sense in that layout.

   Pinned with position:fixed to the browser viewport's own top-right
   corner — not to .navbar-inner (which caps out at max-width:1024px and
   centers), so on any screen wider than that the button used to sit at
   the inner box's edge, short of the real viewport edge, instead of the
   true top-right corner. Fixed positioning also keeps it glued there
   while the sticky navbar scrolls, so it's always on top. z-index is
   above .navbar's own 1100 so it never gets covered. ---- */
.nav-auth-wrapper {
    position: fixed;
    top: 0;
    right: 20px;
    height: 60px; /* = .navbar-inner height, so the account area centers on the same line as the nav links */
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1101;
    /* No background here, an overlapping nav-links label would still show
       through underneath (opaque text on opaque text just looks garbled
       where they cross). A solid navbar-colored background occludes it. */
    background: var(--coral);
    padding-left: 12px;
}

/* Styled as an actual button, not a plain nav link — white pill against
   the coral navbar, same look .nav-links a.active already uses for the
   current page, so it reads as the nav's one real call-to-action. */
.nav-auth-wrapper .nav-auth--signup {
    color: var(--coral);
    background: var(--white);
    text-decoration: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 19px; /* same type + pill as the active .nav-links item (HOME) so it sits on the same line */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    white-space: nowrap;
}

/* LOGIN has no hover effect: it stays the same white pill */

.nav-auth-dropdown {
    position: relative;
}

.nav-auth-trigger {
    font-family: 'Luckiest Guy', cursive;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
    white-space: nowrap;
}

.nav-auth-trigger:hover {
    background: rgba(255,255,255,0.15);
}

.nav-auth-caret {
    font-size: 10px;
    transition: transform 0.2s;
}

.nav-auth-dropdown.open .nav-auth-caret {
    transform: rotate(180deg);
}

/* Logged-in navbar: display name + coins/orbs/stars pill (filled in by ugcShared.js) */
/* Same type as the .nav-links items so the name reads as one more nav entry */
.nav-auth-trigger:has(.nav-auth-name) {
    font-size: 19px;
    letter-spacing: 0.02em;
    gap: 10px;
    padding: 7px 12px;
    white-space: nowrap;
}
.nav-auth-trigger .nav-auth-name { font-size: 19px; line-height: 1; white-space: nowrap; }

.nav-auth-wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--white);
    color: #2c3e66;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.nav-wallet-item { display: inline-flex; align-items: center; gap: 4px; }
.nav-wallet-item img { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; }
.nav-wallet-item + .nav-wallet-item { padding-left: 8px; border-left: 1px solid rgba(44,62,102,.2); }

.nav-auth--profile .nav-auth-wallet { margin-left: 6px; }

/* The account wrapper is fixed to the right edge and opaque, so the pill would
   cover the last nav links. From 1380px up, the logged-in navbar reserves room
   for it (links shift left); below that only the name shows. The mobile menu
   keeps both. */
@media (min-width: 1380px) {
    html.nav-has-wallet .navbar { padding-right: 300px; }
}
@media (max-width: 1379px) {
    .nav-auth-trigger .nav-auth-wallet { display: none; }
}

.nav-auth-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    list-style: none;
    min-width: 160px;
    padding: 6px 0;
    z-index: 200;
    overflow: hidden;
}

.nav-auth-dropdown.open .nav-auth-menu {
    display: block;
}

.nav-auth-menu li a {
    display: block;
    padding: 10px 18px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.15s;
}

.nav-auth-menu li a:hover {
    background: rgba(255,107,122,0.1);
    color: var(--coral);
}

/* ═══════════════════════════════════════
   MOBILE HAMBURGER ICON
═══════════════════════════════════════ */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 110;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 20px;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger → X animation */
.mobile-toggle.active .hamburger-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-toggle.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-toggle.active .hamburger-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ═══════════════════════════════════════
   MOBILE MENU PANEL
═══════════════════════════════════════ */
.mobile-menu {
    display: none;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .feature-card,
    .feature-card.reverse {
        flex-direction: column !important;
        text-align: center;
        padding: 20px 18px;
        gap: 16px;
    }

    .feature-text {
        flex: none !important;
        width: 100% !important;
    }

    .feature-text p {
        text-align: left;
    }

    .feature-img {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        order: 2;
    }

    .feature-img img,
    .feature-img video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
    }

    .feature-text {
        order: 1;
    }

    .gameplay-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }

    .gameplay-grid-card {
        padding: 10px;
        overflow: hidden;
    }

    .gameplay-grid img {
        border-radius: 4px;
        width: 100%;
        max-width: 100%;
    }

    .key-art-section {
        margin: 20px 0;
    }

    /* Showcase table — stack on mobile */
    .showcase-table,
    .showcase-table tbody,
    .showcase-table tr,
    .showcase-table td {
        display: block !important;
        width: 100% !important;
    }

    .showcase-col {
        padding: 10px 20px;
    }

    .showcase-col-center {
        order: -1;
    }

    .showcase-col img {
        max-width: 200px !important;
        max-height: 160px !important;
        margin: 0 auto 8px;
    }

    .showcase-col-center img {
        max-width: 240px !important;
        max-height: 200px !important;
    }

    .char-caption {
        font-size: 0.7rem;
    }

    /* Hide desktop nav links */
    .nav-links {
        display: none;
    }

    /* Show hamburger */
    .mobile-toggle {
        display: block;
    }

    /* Navbar layout on mobile */
    .navbar-inner {
        justify-content: space-between;
    }

    /* Mobile menu panel */
    .mobile-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
        background: var(--coral-dark);
        padding: 0 20px;
    }

    .mobile-menu.open {
        /* Never taller than what is left of the screen under the 60px navbar: a long menu
           (logged-in extras, Community submenu) scrolls inside the panel instead of being
           clipped. 100vh first as a fallback for browsers without dynamic viewport units. */
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        overscroll-behavior: contain; /* don't scroll the page behind once the menu hits its end */
        -webkit-overflow-scrolling: touch;
        padding: 12px 20px 20px;
    }

    .mobile-menu ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-menu ul li a {
        display: block;
        padding: 12px 16px;
        color: var(--white);
        text-decoration: none;
        font-family: 'Luckiest Guy', cursive;
        font-size: 13px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .mobile-menu ul li a:hover,
    .mobile-menu ul li a.active {
        background: rgba(255,255,255,0.15);
    }

    .mobile-menu ul li a.active {
        background: var(--white);
        color: var(--coral);
    }

    /* Mobile language section */
    .mobile-lang {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    .mobile-lang-label {
        display: block;
        font-family: 'Luckiest Guy', cursive;
        font-size: 10px;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.6);
        margin-bottom: 10px;
        padding-left: 16px;
    }

    .mobile-lang-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px;
    }

    .mobile-lang-grid a {
        display: block;
        padding: 10px 16px;
        color: var(--white);
        text-decoration: none;
        font-family: 'Fira Sans Condensed', sans-serif;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .mobile-lang-grid a:hover {
        background: rgba(255,255,255,0.15);
    }

    /* Hide desktop language dropdown on mobile */
    .nav-lang-wrapper {
        display: none;
    }

    /* Hide desktop account area on mobile — the mobile menu has its own
       plain Sign Up/My Profile/Log Out links instead. */
    .nav-auth-wrapper {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-mascot,
    .hero-shape {
        display: none;
    }

    .platform-buttons {
        gap: 10px;
    }

    .platform-btn {
        padding: 10px 22px;
        font-size: 11px;
    }

    .footer-links {
        gap: 16px;
    }

    .gameplay-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .gameplay-grid-card {
        padding: 8px;
        border-radius: 12px;
    }

    .gameplay-section {
        margin: 20px 0;
    }

    .section-wrap {
        padding: 0 12px;
    }

    .feature-card,
    .feature-card.reverse {
        padding: 16px 14px;
        gap: 12px;
    }

    .feature-text h2 {
        font-size: 1.1rem;
    }

    .feature-text p {
        font-size: 0.85rem;
    }

    .mobile-menu ul li a {
        padding: 11px 14px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════ */
.hero {
    position: relative;
    text-align: center;
    padding: 40px 20px 20px;
    overflow: hidden;
}

/* Home page only — .hero-frame/.section-wrap below are also shared with
   other pages (careers/contest/story), so anything home-page-specific has
   to be scoped under body.home-page to avoid leaking there. Break out of
   .page-content's 50rem cap so .hero-inner's own 64rem max-width can
   actually create a gutter for the mascots/shapes to sit in — otherwise
   .hero gets squeezed to 800px too and they land right on top of the
   heading. */
.home-page .hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 64rem;
    margin: 0 auto;
}

/* Decorative yellow shapes + character mascots, matching the PSD hero art */
.hero-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    width: clamp(172px, 21vw, 415px);
    height: auto;
}

.hero-shape-left {
    top: -18px;
    left: -30px;
}

.hero-shape-right {
    width: clamp(168px, 20.4vw, 408px);
    top: 56%;
    right: -30px;
    transform: scaleX(-1);
}

.hero-mascot {
    position: absolute;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.28));
}

/* Pinned to the true corners of the hero (not the frame), so they read as a
   peeking accent at any width instead of sliding on top of the video frame */
.hero-mascot-left {
    width: clamp(112px, 19.2vw, 368px);
    top: 0;
    left: 0;
}

.hero-mascot-right {
    width: clamp(64px, 9.6vw, 152px);
    bottom: 0;
    right: 0;
}

/* Hopper stands just in front of the green enemy, matching the PSD grouping */
.hero-mascot-right2 {
    width: clamp(48px, 6.8vw, 104px);
    bottom: 2px;
    right: clamp(45px, 7.6vw, 120px);
    z-index: 4;
    rotate: -45deg;
}

/* Between ~480-1300px the left mascot's mockup-accurate size starts to
   overlap the heading text (both scale by vw, but hit their clamp caps at
   different widths) — dial it back in that band only. Placed after the
   base rules above so it wins the cascade at equal specificity. */
@media (max-width: 1300px) {
    .hero-mascot-left {
        width: clamp(72px, 12vw, 168px);
    }

    .hero-mascot-right {
        width: clamp(48px, 6.4vw, 104px);
    }

    .hero-mascot-right2 {
        width: clamp(37px, 4.8vw, 76px);
        right: clamp(32px, 5.6vw, 80px);
    }
}

.hero h1 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    color: var(--white);
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25), 1px 1px 0 rgba(0,0,0,0.1);
    -webkit-text-stroke: 2px rgba(0,0,0,0.12);
    paint-order: stroke fill;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
}

.hero-subtitle {
    font-size: clamp(0.85rem, 2vw, 1.05rem);
    font-weight: 600;
    color: var(--white);
    margin-bottom: 20px;
}

.hero-subtitle strong {
    color: #ffe066;
    font-weight: 800;
}

/* Platform buttons */
.platform-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.platform-btn {
    background: #111;
    color: var(--white);
    font-family: 'Luckiest Guy', cursive;
    font-size: 12px;
    padding: 12px 32px;
    border-radius: 30px;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: all 0.2s;
    border: none;
}

.platform-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Secondary variant — outlined instead of solid, for a CTA pair where one
   button is the primary action and the other a lower-emphasis alternative. */
.platform-btn--secondary {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.platform-btn--secondary:hover {
    background: rgba(255,255,255,0.12);
}

/* Hero video/image frame */
.hero-frame {
    width: 100%;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    border: 5px solid var(--coral);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    position: relative;
    background: #000;
}

/* Home page only — same 5px thickness as the shared .hero-frame border
   above, just white instead of coral; other pages (careers/contest/story)
   keep the original coral border. */
.home-page .hero-frame {
    border-radius: clamp(11px, 1.28vw, 22px);
    border: 5px solid var(--white);
}

/* Story + Contest only — flat offset shadow matching .banner's card style,
   in place of the soft blurred shadow above. careers.html keeps the
   original since it wasn't asked for. */
.story-page .hero-frame,
.contest-page .hero-frame {
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.hero-frame img {
    width: 100%;
    display: block;
}

.hero-frame .video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

/* Click-to-load YouTube facade (see ytFacade.js) — same footprint as
   the iframe it replaces/becomes, so swapping one for the other on
   click causes no layout shift. */
.yt-facade {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
}

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

.yt-facade .yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.yt-facade:hover .yt-play-btn,
.yt-facade:focus-visible .yt-play-btn {
    background: var(--coral, #EB4229);
    transform: translate(-50%, -50%) scale(1.06);
}

.trailer-label {
    font-family: 'Luckiest Guy', cursive;
    font-size: 13px;
    color: var(--white);
    text-align: center;
    margin-top: 12px;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

/* 2DEditor.html / 3DEditor.html — same .page-content 50rem cap as every
   other page. The frame itself keeps the shared .hero-frame iframe's
   16:9 aspect-ratio (horizontal, matching the home/story/contest trailer
   frame) — just needs a little breathing room below the new page-hero. */
.editor-body [class~="3d-editor-container"] {
    /* Breaks out of .page-content's 50rem cap: frame is 70% of the viewport width
       (minus 20px side padding), still 16:9. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    max-width: none;
    padding: 8px 20px 20px;
}

/* Floating fullscreen toggle on the 2D/3D editor frame — same corner
   placement as YouTube's player control, styled with the site's own
   coral circle + flat offset shadow instead of YouTube's flat black. */
.editor-fullscreen-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 4px 6px 0 rgba(0,0,0,.18);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.editor-fullscreen-btn:hover {
    background: var(--coral-dark);
    transform: translateY(-2px);
}

.editor-fullscreen-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
}

/* Editor/play frames: the border is drawn by ::after ON TOP of the iframe
   instead of by the frame itself. The embedded WebGL page isn't reliably
   clipped by overflow:hidden + border-radius, so its square corners/edges
   showed over the real border. The frame keeps the same outer size: the
   5px border becomes 5px of padding, which the overlay covers. */
.editor-body .hero-frame {
    border: 0;
    padding: 5px;
}

.editor-body .hero-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    border: 5px solid var(--coral);
    border-radius: inherit;
    pointer-events: none;
}

/* Frame fills the whole screen instead of staying locked to 16:9 once
   fullscreen is active, so the editor gets full use of the display. */
.hero-frame:fullscreen,
.hero-frame:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    display: flex;
}

.hero-frame:fullscreen iframe,
.hero-frame:-webkit-full-screen iframe {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════
   AVAILABLE ON
═══════════════════════════════════════ */
.available-on {
    /* Same breakout as .hero, but max-width lives on this element itself
       (not a separate inner wrapper) — a plain width:100vw + margin-left
       trick breaks once max-width clamps the rendered width down, since the
       margin math assumes width stays at 100vw. left:50% + translateX(-50%)
       self-centers correctly regardless of what the actual clamped width is. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 100vw;
    max-width: 64rem;
    margin-top: 24px;
    margin-bottom: 32px;
    padding: 0 20px;
    /* Plain card background (no longer the red-trap.webp image) — needed
       room to hold 2 rows of 3 store buttons instead of the 1 row the
       image's fixed aspect ratio was sized for. */
    background: var(--coral);
    border-radius: 28px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

.available-on-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 48px 15% 40px;
    text-align: center;
}

.available-on h2 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.04rem, 2.64vw, 2.72rem);
    color: var(--text-dark);
    letter-spacing: 0.05em;
    margin-bottom: 8%;
}

.store-buttons {
    /* Fixed -2rem pulled the buttons up far enough at narrow widths to
       collide with the "EARLY ACCESS ON" heading above — scale the pull
       down with viewport width instead (still -32px on desktop). */
    margin-top: clamp(-32px, -4vw, -8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 21px);
}

.store-buttons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Each row's 3 buttons must always stay in one line — wrapping pushed
       the last button onto its own line and let it overflow past the card's edge. */
    flex-wrap: nowrap;
    gap: clamp(4px, 1.12vw, 21px);
}

.store-btn {
    display: block;
    line-height: 0;
    border-radius: var(--card-radius);
}

.store-btn img {
    height: clamp(27px, 3.68vw, 70px);
    width: auto;
    display: block;
    border-radius: var(--card-radius);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

@media (max-width: 600px) {
    .available-on-content {
        padding: 26px 18px 30px;
    }

    /* Fluid instead of a flat 38px — nowrap keeps each row's 3 badges on
       one line, but a fixed size overflowed the card below ~460px, so this
       has to keep shrinking down to the smallest phones. */
    .store-btn img {
        height: clamp(18px, 6.3vw, 38px);
    }
}

/* ═══════════════════════════════════════
   DESCRIPTION CARD
═══════════════════════════════════════ */
.section-wrap {
    width: 100%;
    margin: 82px auto;
    padding: 0 20px;
    overflow: hidden;
}

/* Home page only — z-index context for .desc-card overlapping AVAILABLE ON.
   .section-wrap is shared by many other pages, so this stays scoped. */
.home-page .section-wrap {
    position: relative;
    z-index: 3;
}

.desc-card {
    position: relative;
    z-index: 2;
    background: var(--blue-bg);
    border-radius: var(--card-radius);
    padding: 32px 28px;
    margin: 24px 0;
    text-align: center;
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.desc-card p {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    font-weight: 600;
    line-height: 1.7;
    color: var(--white);
}

/* ═══════════════════════════════════════
   FEATURE CARDS
═══════════════════════════════════════ */
.feature-card {
    position: relative;
    border-radius: var(--card-radius);
    padding: 32px 28px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 28px;
    /* Flat offset shadow — same style as .banner/.hero-frame elsewhere */
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.feature-card.coral { background: var(--coral); }
.feature-card.yellow { background: var(--yellow-card); }
.feature-card.navy { background: var(--navy); }

.feature-card.reverse { flex-direction: row-reverse; }

.feature-text {
    flex: 1;
}

.feature-text h2 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.2rem, 3vw, 1.7rem);
    margin-bottom: 14px;
    line-height: 1.2;
    text-shadow: 2px 3px 0 rgba(0,0,0,0.2);
}

.feature-card.coral .feature-text h2,
.feature-card.coral .feature-text p {
    color: var(--white);
}

.feature-card.yellow .feature-text h2 {
    color: var(--coral);
}

.feature-card.yellow .feature-text p {
    color: var(--text-body);
}

.feature-card.navy .feature-text h2,
.feature-card.navy .feature-text p {
    color: var(--white);
}

.feature-text p {
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 500;
}

.feature-img {
    flex: 1;
    max-width: 430px;
}

.feature-img img,
.feature-img video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Floating "TRY IT" badge, pinned to the card's bottom-right corner */
.try-it-btn {
    position: absolute;
    z-index: 2;
    right: -19px;
    bottom: -6px;
    background: #ffffff;
    color: var(--coral);
    font-family: 'Luckiest Guy', cursive;
    font-size: 1rem;
    letter-spacing: 0.03em;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 6px 0 rgba(0,0,0,0.18);
    transition: transform 0.2s, box-shadow 0.2s;
}

.try-it-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(0,0,0,0.18);
}

/* CAR TRACK EDITOR has no real destination URL yet — hidden, not removed,
   so it's ready to re-enable once a link exists. */
.try-it-btn--hidden {
    display: none;
}

/* On yellow cards a yellow badge would disappear — flip to coral/white 
   .feature-card.yellow .try-it-btn {
    background: var(--coral);
    color: var(--white);
}
*/

/* IHP Banner placeholder (yellow empty card) */
.ihp-card {
    background: var(--yellow-card);
    border-radius: var(--card-radius);
    padding: 60px 28px;
    margin: 20px 0;
    text-align: center;
    min-height: 160px;
}

/* ═══════════════════════════════════════
   SEE WHAT'S IN THE GAME
═══════════════════════════════════════ */
.showcase-section {
    margin: 30px 0;
}

.showcase-header {
    background: var(--yellow-card);
    border-radius: var(--card-radius);
    padding: 28px 28px 20px;
    margin-bottom: 0;
    text-align: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.showcase-header h2 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: var(--coral);
    margin-bottom: 4px;
}

.showcase-header p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--coral);
    letter-spacing: 0.02em;
}

/* Characters area — TABLE LAYOUT */
.showcase-table {
    width: 100%;
    border-collapse: collapse;
}

.showcase-col {
    vertical-align: bottom;
    text-align: center;
    padding: 20px 10px;
}

.showcase-col-side {
    width: 30%;
}

.showcase-col-center {
    width: 40%;
}

.showcase-col img {
    display: block;
    margin: 0 auto 8px;
    max-width: 100%;
    height: auto;
}

.showcase-col-side img {
    width: auto;
    max-height: 180px;
}

.showcase-col-center img {
    width: auto;
    max-height: 280px;
}

.char-caption {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    color: var(--white);
    display: block;
    padding: 0 4px;
}

/* ═══════════════════════════════════════
   GAMEPLAY GRID
═══════════════════════════════════════ */
.gameplay-section {
    margin: 30px 0;
    text-align: center;
}

.gameplay-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--white);
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25);
    margin-bottom: 16px;
}

.gameplay-grid-card {
    background: var(--coral);
    border-radius: var(--card-radius);
    padding: 16px;
    overflow: hidden;
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.gameplay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.gameplay-grid img {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform 0.2s;
}

.gameplay-grid img:hover {
    transform: scale(1.03);
}

/* ═══════════════════════════════════════
   BOTTOM KEY ART
═══════════════════════════════════════ */
.key-art-section {
    margin: 30px 0;
    background: var(--navy);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Home, story, and contest pages — .key-art-section is also shared with
   ugc.html/rules.html, which weren't asked for this shadow treatment. */
.home-page .key-art-section,
.story-page .key-art-section,
.contest-page .key-art-section {
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.key-art-section img {
    width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
    padding: 50px 20px 30px;
    text-align: center;
    margin-top: 20px;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}

.footer-socials a {
    color: var(--white);
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-socials a:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}

.footer-socials svg {
    width: 32px;
    height: 32px;
    fill: var(--white);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-copyright {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 16px;
}

/* Footer content sections (for news/multi-column footer) */
.footer-content {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.footer-section {
    text-align: left;
    min-width: 150px;
}

.footer-section h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
    -webkit-text-stroke: none;
    text-shadow: none;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
    transition: opacity 0.2s, color 0.2s;
}

.footer-section ul li a:hover {
    color: var(--white);
    opacity: 1;
}

.social-links {
    display: flex;
    gap: 16px;
    align-items: center;
}

.social-links a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links a:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.social-links svg {
    width: 24px;
    height: 24px;
    fill: rgba(255,255,255,0.85);
    transition: fill 0.2s;
}

.social-links a:hover svg {
    fill: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* Footer ratings badges */
.footer-ratings {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}

.footer-ratings img {
    width: auto;
    height: 80px;
    border-radius: 4px;
}

/* Mobile footer responsive */
@media (max-width: 600px) {
    .footer-content {
        gap: 30px;
        justify-content: center;
    }

    .footer-section {
        text-align: center;
        width: 100%;
        max-width: 250px;
    }

    .footer-section h3 {
        margin-bottom: 12px;
    }

    .footer-section ul li {
        margin-bottom: 8px;
    }

    .footer-section ul li a {
        font-size: 12px;
    }

    .social-links {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════
   STORY PAGE
═══════════════════════════════════════ */

.story-section-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--white);
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25);
    text-align: center;
    margin: 30px 0 20px;
}

/* Story cards — shared base */
.story-card {
    border-radius: var(--card-radius);
    padding: 28px 24px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.story-card.coral { background: var(--coral); }
.story-card.yellow { background: var(--yellow-card); }
.story-card.navy { background: var(--navy); }

.story-card.reverse { flex-direction: row-reverse; }

/* Story card text */
.story-card-text {
    flex: 1;
}

.story-card-text h2 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    margin-bottom: 12px;
    line-height: 1.2;
    text-shadow: 2px 3px 0 rgba(0,0,0,0.2);
}

.story-card-text p {
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 500;
}

/* Coral & navy card text colors */
.story-card.coral .story-card-text h2,
.story-card.coral .story-card-text p,
.story-card.navy .story-card-text h2,
.story-card.navy .story-card-text p {
    color: var(--white);
}

/* Yellow card text colors */
.story-card.yellow .story-card-text h2 {
    color: var(--coral);
}

.story-card.yellow .story-card-text p {
    color: var(--text-body);
}

/* Story card image grids */
.story-card-images {
    flex: 1;
    max-width: 420px;
    display: grid;
    gap: 6px;
}

.story-card-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* 2x2 grid — pizza shop */
.story-grid-2x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 1x2 — two images side by side */
.story-grid-1x2 {
    grid-template-columns: 1fr 1fr;
}

/* 1x1 — single image */
.story-grid-1x1 {
    grid-template-columns: 1fr;
    max-width: 220px;
}

/* ═══════════════════════════════════════
   STORY PAGE — RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .story-card,
    .story-card.reverse {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
    }

    .story-card-images {
        max-width: 100%;
        width: 100%;
    }

    .story-grid-1x1 {
        max-width: 60%;
        margin: 0 auto;
    }

    .story-card-text h2 {
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    .story-card {
        padding: 16px 12px;
        margin: 14px 0;
    }

    .story-card-images {
        gap: 4px;
    }

    .story-card-images img {
        border-radius: 6px;
    }
}

/* ═══════════════════════════════════════
   ABOUT US PAGE
═══════════════════════════════════════ */

.about-hero {
    text-align: center;
    padding: 40px 20px 10px;
    max-width: 1024px;
    margin: 0 auto;
}

.about-hero h1 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--white);
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25);
    margin-bottom: 6px;
}

.about-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
}

.about-logo {
    width: auto;
    height: 80px;
    margin-bottom: 10px;
}

/* About description text */
.about-description {
    background-color: var(--blue-bg)
    padding: 20px 0 10px;
    max-width: 50rem;
    margin: 0 auto;
}

.about-description p {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-weight: 700;
    line-height: 1.75;
    color: var(--white);
    margin-bottom: 20px;
}

/* Team section title */
.about-team-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--white);
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25);
    text-align: center;
    margin: 20px auto;
    max-width: 50rem;
}

/* Team cards */
.team-card {
    border-radius: var(--card-radius);
    padding: 28px 24px;
    margin: 10px auto;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 50rem;
}

.team-card.coral { background: var(--coral); }
.team-card.yellow { background: var(--yellow-card); }

/* Team photo + linkedin */
.team-photo {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.team-photo img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.team-linkedin {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.team-linkedin:hover {
    transform: scale(1.1);
    background: #0077b5;
}

.team-linkedin svg {
    width: 22px;
    height: 22px;
    fill: var(--white);
}

/* Team info text */
.team-info {
    flex: 1;
}

.team-info h3 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    line-height: 1.2;
    margin-bottom: 4px;
    text-shadow: 2px 3px 0 rgba(0,0,0,0.2);
}

.team-role {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.team-info p {
    font-size: 0.92rem;
    line-height: 1.7;
    font-weight: 500;
}

/* Coral card text colors */
.team-card.coral .team-info h3,
.team-card.coral .team-role,
.team-card.coral .team-info p {
    color: var(--white);
}

/* Yellow card text colors */
.team-card.yellow .team-info h3 {
    color: var(--coral);
}

.team-card.yellow .team-role {
    color: var(--coral);
}

.team-card.yellow .team-info p {
    color: var(--text-body);
}

/* ═══════════════════════════════════════
   ABOUT PAGE — RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .team-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
    }

    .team-photo img {
        width: 140px;
        height: 140px;
    }

    .about-description {
        padding: 16px 0 0;
    }
}

@media (max-width: 480px) {
    .team-card {
        padding: 20px 12px;
        margin: 14px 0;
    }

    .team-photo img {
        width: 120px;
        height: 120px;
    }
}

/* ═══════════════════════════════════════
   SHARED PAGE STYLES (Contest, Contact, Edu, Careers, Legal)
═══════════════════════════════════════ */

/* Page hero — used across all new pages */
.page-hero {
    text-align: center;
    padding: 40px 20px 10px;
    max-width: 1024px;
    margin: 0 auto;
}

.page-hero h1 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.6rem, 4.5vw, 2.8rem);
    color: var(--white);
    text-shadow: 3px 4px 0 rgba(0,0,0,0.25);
    margin-bottom: 8px;
}

.page-hero-sub {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    opacity: 0.9;
}

/* ═══════ FAQ — accordion sections ═══════ */
.faq-section {
    margin: 20px 0 32px;
}

.faq-section-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.1rem, 2.8vw, 1.5rem);
    color: var(--white);
    text-shadow: 2px 3px 0 rgba(0,0,0,0.2);
    margin-bottom: 14px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: rgb(41 55 102 / 92%);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: var(--card-radius);
    padding: 4px 24px;
    transition: border-color 0.2s;
}

.faq-item[open] {
    border-color: var(--coral);
}

.faq-question {
    list-style: none;
    cursor: pointer;
    padding: 18px 34px 18px 0;
    position: relative;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--white);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.3rem;
    color: var(--coral);
    transition: transform 0.2s;
}

.faq-item[open] .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    padding: 0 0 20px;
}

.faq-answer a {
    color: var(--yellow-card);
    text-decoration: none;
    font-weight: 600;
}

.faq-answer a:hover { text-decoration: underline; }

.faq-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Generic content card — reusable across pages */
.content-card {
    border-radius: var(--card-radius);
    padding: 32px 28px;
    margin: 20px 0;
}

/* edu.html + contact.html — .content-card is also shared with careers.html,
   which wasn't asked for this shadow treatment. */
.edu-page .content-card,
.contact-page .content-card {
    box-shadow: 9px 14px 0 rgba(0,0,0,.18);
}

.content-card.coral { background: var(--coral); }
.content-card.yellow { background: var(--yellow-card); }
.content-card.navy { background: var(--navy); }

.content-card-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.1rem, 2.8vw, 1.6rem);
    margin-bottom: 16px;
    text-shadow: 2px 3px 0 rgba(0,0,0,0.2);
}

.content-card-body {
    font-size: 0.95rem;
    line-height: 1.75;
    font-weight: 500;
}

/* ═══════ CONTEST — Steps Grid ═══════ */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.step-item {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--coral);
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.step-item p {
    color: var(--white);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ═══════ CONTACT — Layout ═══════ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.contact-info {
    text-align: center;
}

.contact-item {
    margin-bottom: 18px;
}

.contact-label {
    display: block;
    font-family: 'Luckiest Guy', cursive;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}

.contact-value {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--white);
    text-decoration: none;
}

.contact-value:hover { text-decoration: underline; }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    color: var(--white);
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255,255,255,0.55);
}

.contact-form select {
    appearance: none;
    cursor: pointer;
}

.contact-form select option {
    background: var(--coral);
    color: var(--white);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--white);
}

/* ═══════ EDU — Features ═══════ */
.edu-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.edu-feature {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 20px 12px;
    text-align: center;
}

.edu-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.edu-feature h3 {
    font-family: 'Luckiest Guy', cursive;
    font-size: 0.85rem;
    color: var(--white);
    margin-bottom: 6px;
}

.edu-feature p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
    font-weight: 500;
}

/* EDU — Age groups */
.age-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.age-group {
    text-align: center;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 24px 16px;
}

.age-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    font-family: 'Luckiest Guy', cursive;
    font-size: 1rem;
    margin-bottom: 12px;
}

.age-badge.coral-bg { background: var(--coral); color: var(--white); }
.age-badge.yellow-bg { background: var(--yellow-card); color: var(--text-body); }

.age-group p {
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
    line-height: 1.6;
    font-weight: 500;
}

/* ═══════ LEGAL PAGES — Card ═══════ */
.legal-card {
    background: rgb(41 55 102 / 92%);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: var(--card-radius);
    padding: 36px 32px;
    margin: 20px 0;
}

.legal-card h2 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: clamp(1.5rem, 2vw, 1.15rem);
    font-weight: 500;
    text-shadow: none;
    color: var(--coral);
    margin: 28px 0 10px;
}

.legal-card h2:first-child { margin-top: 0; }

.legal-card p {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 1.3rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}

.legal-card a {
    color: var(--yellow-card);
    text-decoration: none;
    font-weight: 600;
}

.legal-card a:hover { text-decoration: underline; }

/* ─── Sub-headings within a legal card ─── */
.legal-card h3 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--yellow-card);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 26px 0 10px;
}

.legal-card h3:first-of-type { margin-top: 20px; }

/* ─── Lists within a legal card ─── */
.legal-card ul,
.legal-card ol {
    margin: 4px 0 18px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-card ul { list-style: none; }

.legal-card ul li {
    position: relative;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    padding-left: 18px;
}

.legal-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
}

.legal-card ol {
    list-style: decimal;
    padding-left: 26px;
}

.legal-card ol li {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    padding-left: 6px;
}

.legal-card em {
    color: rgba(255, 255, 255, 0.65);
    font-style: italic;
}

/* ─── Emphasis callout box (all-caps / critical clauses) ─── */
.legal-notice {
    background: rgba(255, 107, 122, 0.1);
    border-left: 4px solid var(--coral);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 18px 0 22px;
}

.legal-notice p {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ─── Softer callout for supportive / help resources ─── */
.legal-help-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 4px 0 20px;
}

.legal-help-box p {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ─── Table of contents (jump links) ─── */
.legal-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--card-radius);
    padding: 18px 22px;
    margin: 20px 0 28px;
    position: sticky;
    top: 12px;
    z-index: 20;
    backdrop-filter: blur(6px);
}

.legal-toc-label {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--yellow-card);
    margin-right: 4px;
}

.legal-toc a {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 6px 14px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.legal-toc a:hover {
    background: var(--coral);
    border-color: var(--coral);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   UGC MODERATION — Criteria Card
═══════════════════════════════════════ */

/* ─── Card container ─── */
.ugc-criteria-card {
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--card-radius);
    padding: 44px 40px;
    margin: 28px 0;
    position: relative;
    overflow: hidden;
}

/* Top accent stripe — coral fading to yellow */
.ugc-criteria-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--coral) 0%, var(--yellow-card) 100%);
}

/* ─── Header ─── */
.ugc-criteria-card h2 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--coral);
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding-bottom: 18px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.15);
}

.ugc-criteria-intro {
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 32px;
}

/* ─── Rules list ─── */
.ugc-rules {
    display: flex;
    flex-direction: column;
    gap: 22px;
    counter-reset: ugcRule;
}

.ugc-rule {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid var(--coral);
    border-radius: 14px;
    padding: 24px 28px;
    overflow: hidden;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ugc-rule:hover {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--yellow-card);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* Large faint rule number in the background of each card */
.ugc-rule::after {
    counter-increment: ugcRule;
    content: '0' counter(ugcRule);
    position: absolute;
    top: 4px;
    right: 18px;
    font-family: 'Luckiest Guy', cursive;
    font-size: 3rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 0;
}

/* ─── Rule icon badge ─── */
.ugc-rule-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 4px 12px rgba(255, 107, 122, 0.35);
}

/* ─── Rule text content ─── */
.ugc-rule-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.ugc-rule-content h3 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--white);
    letter-spacing: 0.2px;
    margin-bottom: 8px;
    line-height: 1.3;
}

.ugc-rule-content p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    margin: 0;
}

/* ─── NSFW examples — pill chip list ─── */
.ugc-nsfw-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
}

.ugc-nsfw-list li {
    background: rgba(255, 107, 122, 0.14);
    border: 1px solid rgba(255, 107, 122, 0.32);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 15px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ugc-nsfw-list li:hover {
    background: rgba(255, 107, 122, 0.26);
    border-color: rgba(255, 107, 122, 0.55);
}

/* ═══════ CAREERS — Grid ═══════ */
.careers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.career-tag {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════
   CAREERS — Internship Card
   ═══════════════════════════════════════ */

/* ─── Card container ─── */
.internship-card {
    background: var(--navy);
    color: var(--white);
    padding: 40px 36px;
    margin: 32px 0 48px;
    position: relative;
    overflow: hidden;
}

/* Decorative corner accent */
.internship-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle at top right, rgba(232, 213, 126, 0.15), transparent 70%);
    pointer-events: none;
}

/* ─── Header ─── */
.internship-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.internship-header .content-card-title {
    margin-bottom: 14px;
    line-height: 1.2;
}

/* Yellow-accent variant of the career-tag pill (overrides base white bg) */
.internship-tag {
    background: var(--yellow-card);
    color: var(--navy-deep);
    font-weight: 700;
    margin-bottom: 0;
}

/* ─── Meta row (Duration / Stipend / Location) ─── */
.internship-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 40px;
}

.internship-meta-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--white);
}

.internship-meta-item strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yellow-card);
    margin-bottom: 2px;
    margin-top: 4px;
}

/* ─── Sections (Role Overview / Scope / Skills) ─── */
.internship-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.internship-section:last-of-type {
    border-bottom: none;
}

.internship-section h3 {
    font-family: 'Luckiest Guy', cursive;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--yellow-card);
    margin-bottom: 18px;
    letter-spacing: 1px;
    -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.25);
    paint-order: stroke fill;
    text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.internship-section p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 14px;
}

.internship-section p:last-child {
    margin-bottom: 0;
}

/* ─── Scope of Work grid ─── */
.internship-scope-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 22px;
}

.scope-item {
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--coral);
    border-radius: 10px;
    padding: 20px 22px;
    display: flex;
    gap: 16px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.scope-item:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-2px);
}

.scope-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.scope-item > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scope-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--yellow-card);
    line-height: 1.3;
}

.scope-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* ─── Required Skills list ─── */
.internship-skills {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.internship-skills li {
    position: relative;
    padding: 12px 16px 12px 42px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
}

.internship-skills li::before {
    content: '✓';
    position: absolute;
    left: 14px;
    top: 12px;
    width: 20px;
    height: 20px;
    background: var(--coral);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.internship-skills li strong {
    color: var(--yellow-card);
    font-weight: 700;
}

/* ─── Apply call-to-action ─── */
.internship-apply {
    margin-top: 40px;
    padding: 24px 26px;
    background: linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(240, 85, 101, 0.35);
}

.internship-apply p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--white);
    margin-bottom: 10px;
}

.internship-apply p:last-child {
    margin-bottom: 0;
}

.internship-apply a {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.internship-apply a:hover {
    opacity: 0.85;
}

.internship-subject {
    font-size: 0.85rem !important;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9) !important;
}

.internship-subject strong {
    color: var(--yellow-card);
    font-weight: 700;
}

/* ═══════════════════════════════════════
   RESPONSIVE — NEW PAGES
═══════════════════════════════════════ */
@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .edu-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .age-groups {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .careers-grid {
        grid-template-columns: 1fr;
    }

    .content-card {
        padding: 24px 18px;
    }

    /* ─── Internship card — mobile ─── */
    .internship-card {
        padding: 28px 22px;
        margin: 24px 0 32px;
    }

    .internship-header {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    /* Meta pills stack vertically for readability */
    .internship-meta {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 28px;
    }

    .internship-meta-item {
        padding: 12px 14px;
    }

    .internship-section {
        margin-bottom: 28px;
        padding-bottom: 24px;
    }

    .internship-section h3 {
        font-size: 1.2rem;
    }

    /* Scope grid becomes single-column */
    .internship-scope-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .scope-item {
        padding: 16px 18px;
        gap: 12px;
    }

    .scope-icon {
        font-size: 1.5rem;
    }

    .internship-skills {
        gap: 10px;
    }

    .internship-skills li {
        padding: 12px 14px 12px 40px;
        font-size: 0.88rem;
    }

    .internship-apply {
        margin-top: 28px;
        padding: 20px 20px;
    }

    /* ─── UGC Criteria card — mobile ─── */
    .ugc-criteria-card {
        padding: 30px 22px;
        margin: 20px 0;
    }

    .ugc-criteria-card h2 {
        font-size: 1.3rem;
        padding-bottom: 14px;
    }

    .ugc-criteria-intro {
        margin-bottom: 24px;
    }

    .ugc-rules {
        gap: 16px;
    }

    /* Icon moves above the text on narrow screens */
    .ugc-rule {
        flex-direction: column;
        gap: 14px;
        padding: 22px 20px;
    }

    .ugc-rule-icon {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }

    .ugc-rule::after {
        font-size: 2.2rem;
        top: 6px;
        right: 14px;
    }

    .ugc-nsfw-list li {
        font-size: 0.74rem;
        padding: 5px 12px;
    }

    /* ─── EULA table of contents — mobile ─── */
    .legal-toc {
        position: static; /* sticky TOC is impractical on small screens */
        padding: 14px 16px;
        gap: 6px 8px;
    }

    .legal-toc-label {
        width: 100%;
        margin-bottom: 2px;
    }

    .legal-toc a {
        font-size: 0.72rem;
        padding: 5px 12px;
    }

    .legal-card h3 {
        font-size: 0.92rem;
        margin: 20px 0 8px;
    }

    .legal-notice,
    .legal-help-box {
        padding: 14px 16px;
    }

    .legal-card {
        padding: 24px 18px;
    }
}

@media (max-width: 480px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .edu-features {
        grid-template-columns: 1fr;
    }

    .content-card {
        padding: 20px 14px;
    }
}

/* ═══════════════════════════════════════
   CONTEST PAGE (PSD match — single bordered section)
═══════════════════════════════════════ */

  :root{
      --nav:#ff6f7a;
      --blue:#2f6fc8;
      --blue2:#255fb4;
      --card-yellow:#FFF44E;
      --card-yellow-2:#FFF44E;
      --card-shadow:rgba(0,0,0,.22);
      --ink:#ffffff;
      --ink-dark:#17325a;
      --stroke:#1b2f58;
      --btn:#ffd24f;
      --btn2:#ffb703;
    }

    *{box-sizing:border-box}

    /* Page layout — every section below fills this at 100%, so they all
       line up flush instead of each carrying its own separate width cap
       (was 1080/820/860/900px + submitSection's 90%, none of which matched) */
    .page{
      width: min(50rem, 100%);
      margin:0 auto;
      padding:18px 14px 30px;
    }

    .hero{
      position:relative;
      border-radius:18px;
      padding:18px;
      overflow:hidden;
    }

    /* Big title block */
    .titleRow{
      display:flex;
	  padding:inherit;
      justify-content:center;
      align-items:center;
      gap:14px;
      margin-top:6px;
      flex-wrap:wrap;
    }
    .star{
      width:46px; height:46px;
      filter: drop-shadow(0 6px 0 rgba(0,0,0,.16));
    }
    .titleStack{
      text-align:center;
      line-height:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
    }
    .titleMain{
      font-family: 'Luckiest Guy', cursive;
      font-size:44px;
      color:#ffd24f;
      text-shadow:
        -3px -3px 0 var(--stroke),
         3px -3px 0 var(--stroke),
        -3px  3px 0 var(--stroke),
         3px  3px 0 var(--stroke),
         0    8px 0 rgba(0,0,0,.18);
      letter-spacing:1px;
      padding:10px 18px;
      border-radius:16px;
      background:rgba(255,255,255,.08);
      box-shadow: inset 0 0 0 4px rgba(255,210,79,.25);
      display:inline-block;
    }
    .titleSub{
      font-family: 'Luckiest Guy', cursive;
      font-size:34px;
      color:#ffeaa3;
      background:#ff616f;
      padding:10px 18px;
      border-radius:16px;
      box-shadow:0 10px 0 rgba(0,0,0,.18);
      text-shadow:
        -2px -2px 0 rgba(0,0,0,.18),
         2px -2px 0 rgba(0,0,0,.18),
        -2px  2px 0 rgba(0,0,0,.18),
         2px  2px 0 rgba(0,0,0,.18);
    }

    /* Video panel */
    .videoPanel{
      margin:18px auto 12px;
      width:100%;
      border-radius:18px;
      background:#e8e8e8;
      border:4px solid rgba(255,105,115,.9);
      box-shadow:0 14px 0 rgba(0,0,0,.16);
      position:relative;
      overflow:hidden;
      aspect-ratio: 16 / 9;
    }
    .videoPanel img,
    .videoPanel video{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .playOverlay{
      position:absolute; inset:0;
      display:grid; place-items:center;
      pointer-events:none;
    }
    .playBtn{
      width:92px; height:92px;
      border-radius:999px;
      background:rgba(255,255,255,.85);
      box-shadow:0 12px 0 rgba(0,0,0,.18);
      display:grid; place-items:center;
    }
    .playBtn:before{
      content:"";
      width:0; height:0;
      border-left:22px solid rgba(0,0,0,.65);
      border-top:14px solid transparent;
      border-bottom:14px solid transparent;
      margin-left:6px;
    }

    /* Main content area (yellow card + character) */
    .contentRow{
      display:grid;
      grid-template-columns: 1.1fr .55fr;
      gap:16px;
      align-items:start;
      margin-top:10px;
    }

    .card{
      background:linear-gradient(180deg, var(--card-yellow), var(--card-yellow-2));
      color:#0d2c57;
      border-radius:18px;
      box-shadow:9px 14px 0 rgba(0,0,0,.18);
      padding:16px 16px 14px;
      position:relative;
      overflow:hidden;
    }
    .card .monoTitle{
      font-family:"Bungee", system-ui, sans-serif;
      color:#ff4a5f;
      background:rgba(255,74,95,.18);
      border-radius:12px;
      padding:8px 12px;
      display:inline-block;
      text-shadow:none;
      box-shadow: inset 0 0 0 3px rgba(255,74,95,.25);
      margin:10px 0 10px;
    }
    .card p{
      margin:10px 0;
      font-size:15px;
      line-height:1.35;
      font-weight:800;
      color:#123563;
    }
    .card .bullet{
      margin:10px 0 0 0;
      padding-left:18px;
      color:#c3002f;
    }
    .card .bullet li{
      margin:6px 0;
    }

    .charWrap{
      position:relative;
      display:flex;
      justify-content:center;
      align-items:flex-start;
      padding-top:10px;
    }
    .charWrap img{
      width:min(240px, 100%);
      height:auto;
      filter: drop-shadow(0 18px 0 rgba(0,0,0,.16));
    }

    /* Steps section */
    .stepsTitle{
      margin:18px 0 8px;
      font-family: 'Luckiest Guy', cursive;
      font-size:30px;
      color:#ffd24f;
      text-shadow:
        -2px -2px 0 var(--stroke),
         2px -2px 0 var(--stroke),
        -2px  2px 0 var(--stroke),
         2px  2px 0 var(--stroke),
         0    8px 0 rgba(0,0,0,.18);
      letter-spacing:.5px;
    }
    .steps{
      margin:0;
      padding: 10px;
      list-style:none;
      display:grid;
      gap:10px;
      width:100%;
      background: #f3d674;
      border-radius: 6px;
    }
    .step{
      display:flex;
      gap:12px;
      align-items:flex-start;
      color: #123563;
      font-size: 20px;
      line-height:1.3;
      padding:6px 2px;
    }
    .step .dot{
      width: 8px;
      height: 8px;
      border-radius:999px;
      background: #715f2c;
      box-shadow:0 5px 0 rgba(0,0,0,.16);
      margin-top:6px;
      flex:0 0 auto;
    }

    /* Banner + welcome */
    .banner{
      margin:18px auto 0;
      width:100%;
      background: var(--card-yellow);
      border-radius:18px;
      box-shadow:9px 14px 0 rgba(0,0,0,.18);
      padding:12px 14px;
      font-family: 'Luckiest Guy', cursive;
      color:#c3002f;
      text-align:center;
      letter-spacing:.6px;
      text-transform:uppercase;
      font-size:18px;
    }
    .welcomeBlock{
      margin:14px auto 0;
      width:100%;
      display:grid;
      grid-template-columns: 1fr 1.15fr 1fr;
      gap:12px;
      align-items:center;
    }
    .welcomeBlock .badge{
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .welcomeBlock .badge img{
      width:120px;
      height:auto;
      filter: drop-shadow(0 10px 0 rgba(0,0,0,.16));
      border-radius:999px;
    }
    .welcomeText{
      text-align:center;
    }
    .welcomeText .title{
      font-family: 'Luckiest Guy', cursive;
      font-size:40px;
      color:#ffd24f;
      text-shadow:
        -3px -3px 0 var(--stroke),
         3px -3px 0 var(--stroke),
        -3px  3px 0 var(--stroke),
         3px  3px 0 var(--stroke),
         0    10px 0 rgba(0,0,0,.18);
      letter-spacing:1px;
      margin:0 0 6px;
    }
    .welcomeText .mini{
      display:flex;
      justify-content:center;
      gap:18px;
      flex-wrap:wrap;
      color:#eaf2ff;
      margin-top:8px;
    }
    .miniItem{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:15px;
      opacity:.95;
    }
    .miniIcon{
      width:18px; height:18px;
      border-radius:6px;
      background:rgba(255,255,255,.16);
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
      display:grid; place-items:center;
      font-weight:900;
    }

    /* Footer / socials */
    .socials{
      display:flex;
      justify-content:center;
      gap:22px;
      padding:18px 0 8px;
      opacity:.95;
    }
    .socials a{
      width:42px; height:42px;
      border-radius:12px;
      background:rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.16), 0 10px 0 rgba(0,0,0,.12);
      display:grid; place-items:center;
      text-decoration:none;
      color:#fff;
      font-weight:900;
      user-select:none;
    }

    .footerLinks{
      display:flex;
      justify-content:center;
      gap:22px;
      flex-wrap:wrap;
      padding:8px 0 14px;
      text-transform:uppercase;
      letter-spacing:.6px;
      font-weight:900;
      font-size:12px;
      opacity:.9;
    }
    .footerLinks a{color:#fff; text-decoration:none}
    .footerLinks a:hover{opacity:1}

    .ratings{
      display:flex;
      justify-content:center;
      gap:18px;
      padding:10px 0 24px;
    }
    .ratings img{
      height:64px;
      width:auto;
      background:#fff;
      border-radius:10px;
      box-shadow:0 12px 0 rgba(0,0,0,.12);
      padding:8px;
    }

    /* ══════════════════════════════════════════
       REGISTER BUTTONS
    ══════════════════════════════════════════ */
    .registerBtnRow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* REGISTER button — keeps existing .registerBtn look from styles.css
       but also works standalone */
    button.registerBtn {
      font-family: 'Luckiest Guy', 'Fira Sans Condensed', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 0.06em;
      color: #1b2f58;
      background: #ff4a5f;
      border: none;
      border-radius: 10px;
      padding: 16px 40px;
      cursor: pointer;
      box-shadow: 0 7px 0 rgba(27,47,88,0.5);
      transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
      white-space: nowrap;
    }
    button.registerBtn:hover  { background: #ff6b7d; }
    button.registerBtn:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(27,47,88,0.5); }

    .rulesBtn {
      font-family: 'Luckiest Guy', 'Fira Sans Condensed', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      color: #1b2f58;
      background: #ffd24f;
      border: none;
      border-radius: 10px;
      padding: 14px 30px;
      cursor: pointer;
      box-shadow: 0 6px 0 rgba(27,47,88,0.5);
      transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
      white-space: nowrap;
    }
    .rulesBtn:hover  { background: #ffe580; }
    .rulesBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(27,47,88,0.5); }

    /* ══════════════════════════════════════════
       RULES + REGISTER MODAL
    ══════════════════════════════════════════ */
    .rules-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      align-items: center;
      justify-content: center;
    }
    .rules-modal.open { display: flex; }

    .rules-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(5,8,20,0.88);
      backdrop-filter: blur(4px);
    }

    .rules-modal-panel {
      position: relative;
      z-index: 1;
      background: #0e1628;
      border: 2px solid #ffd24f;
      border-radius: 16px;
      box-shadow: 0 0 60px rgba(255,210,79,0.18), 0 24px 64px rgba(0,0,0,0.7);
      width: min(860px, 94vw);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalSlideIn 0.22s ease;
    }
    @keyframes modalSlideIn {
      from { opacity:0; transform:translateY(24px) scale(0.97); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }

    /* sticky header */
    .rules-modal-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 18px 24px 14px;
      background: #0e1628;
      border-bottom: 2px solid rgba(255,210,79,0.2);
      flex-shrink: 0;
      position: relative;
    }
    .rules-modal-title {
      font-family: 'Luckiest Guy', 'Fira Sans Condensed', sans-serif;
      font-size: clamp(1rem, 3vw, 1.6rem);
      color: #ffd24f;
      letter-spacing: 0.07em;
      text-shadow: 2px 2px 0 #1b2f58;
      text-align: center;
    }
    .rules-modal-close {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,210,79,0.1);
      border: 2px solid rgba(255,210,79,0.35);
      color: #ffd24f;
      font-size: 1rem;
      width: 34px; height: 34px;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .rules-modal-close:hover { background: rgba(255,210,79,0.25); border-color: #ffd24f; }

    /* scroll progress bar */
    .rules-scroll-bar {
      height: 4px;
      background: rgba(255,210,79,0.12);
      flex-shrink: 0;
      position: relative;
    }
    .rules-scroll-fill {
      height: 100%;
      background: #ffd24f;
      width: 0%;
      transition: width 0.1s linear;
      border-radius: 0 2px 2px 0;
    }

    /* scroll hint */
    .rules-scroll-hint {
      text-align: center;
      font-family: 'Fira Sans Condensed', sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      color: #7a90b0;
      padding: 6px 0 0;
      flex-shrink: 0;
      transition: opacity 0.3s;
    }
    .rules-scroll-hint.hidden { opacity: 0; pointer-events: none; }

    /* scrollable body */
    .rules-modal-body {
      overflow-y: auto;
      padding: 20px 28px 28px;
      scroll-behavior: smooth;
      flex: 1;
    }
    .rules-modal-body::-webkit-scrollbar { width: 6px; }
    .rules-modal-body::-webkit-scrollbar-track { background: transparent; }
    .rules-modal-body::-webkit-scrollbar-thumb { background: rgba(255,210,79,0.3); border-radius: 3px; }

    .rules-organizer-note {
      text-align: center;
      font-size: 0.86rem;
      color: #7a90b0;
      font-style: italic;
      margin-bottom: 24px;
    }

    /* rule rows */
    .rules-modal-list { display: flex; flex-direction: column; }
    .rule-item {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,210,79,0.09);
    }
    .rule-item:last-child { border-bottom: none; }
    .rule-num {
      flex-shrink: 0;
      width: 32px; height: 32px; border-radius: 50%;
      background: #ffd24f; color: #1b2f58;
      font-family: 'Luckiest Guy', sans-serif; font-size: 0.82rem;
      display: flex; align-items: center; justify-content: center;
      margin-top: 3px;
      box-shadow: 0 3px 0 rgba(27,47,88,0.45);
    }
    .rule-body { flex: 1; }
    .rule-heading {
      font-family: 'Fira Sans Condensed', sans-serif;
      font-weight: 800; font-size: 0.76rem;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: #ffd24f; margin-bottom: 4px;
    }
    .rule-body p {
      font-family: 'Fira Sans Condensed', sans-serif;
      font-weight: 400; font-size: 0.93rem; line-height: 1.72;
      color: #bdd0e8; margin: 0;
    }

    /* ── Registration form at bottom of modal ── */
    .modal-register-zone {
      margin-top: 28px;
      padding: 24px 24px 20px;
      background: rgba(255,210,79,0.05);
      border: 2px solid rgba(255,210,79,0.25);
      border-radius: 12px;
    }
    .modal-register-zone h3 {
      font-family: 'Luckiest Guy', 'Fira Sans Condensed', sans-serif;
      font-size: 1.15rem;
      color: #ffd24f;
      letter-spacing: 0.06em;
      text-shadow: 1px 1px 0 #1b2f58;
      margin-bottom: 16px;
      text-align: center;
    }
    .modal-reg-field {
      display: flex; flex-direction: column; gap: 5px;
      margin-bottom: 14px;
    }
    .modal-reg-field label {
      font-family: 'Fira Sans Condensed', sans-serif;
      font-weight: 700; font-size: 0.78rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #a0b4d0;
    }
    .modal-reg-field input {
      background: #0a0f1e;
      border: 1.5px solid rgba(255,210,79,0.3);
      border-radius: 8px;
      padding: 11px 14px;
      font-family: 'Fira Sans Condensed', sans-serif;
      font-size: 0.96rem; color: #e0e8f4;
      outline: none;
      transition: border-color 0.2s;
    }
    .modal-reg-field input:focus { border-color: #ffd24f; }
    .modal-reg-field input:disabled { opacity: 0.5; cursor: not-allowed; }

    /* agree notice */
    .modal-agree-notice {
      font-family: 'Fira Sans Condensed', sans-serif;
      font-size: 0.82rem; color: #7a90b0;
      text-align: center;
      margin-bottom: 14px;
      line-height: 1.5;
    }

    /* submit button — locked until scrolled */
    .modal-reg-submit {
      width: 100%;
      font-family: 'Luckiest Guy', 'Fira Sans Condensed', sans-serif;
      font-size: 1.1rem; letter-spacing: 0.08em;
      color: #1b2f58; background: #ffd24f;
      border: none; border-radius: 10px;
      padding: 15px 0;
      cursor: pointer;
      box-shadow: 0 6px 0 rgba(27,47,88,0.5);
      transition: transform 0.1s, box-shadow 0.1s, background 0.15s, opacity 0.25s;
    }
    .modal-reg-submit:hover:not(:disabled)  { background: #ffe580; }
    .modal-reg-submit:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 rgba(27,47,88,0.5); }
    .modal-reg-submit:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      box-shadow: none;
    }

    .modal-reg-msg {
      font-family: 'Fira Sans Condensed', sans-serif;
      font-size: 0.9rem; text-align: center;
      margin-top: 10px; min-height: 1.2em;
    }

    /* lock overlay on the form zone */
    .modal-register-zone { position: relative; }

    .modal-register-zone.locked::before {
      content: '🔒 Scroll to the bottom to unlock registration';
      display: flex; align-items: center; justify-content: center;
      position: absolute; inset: 0; border-radius: 12px;
      background: rgba(8, 12, 28, 0.82);
      font-family: 'Fira Sans Condensed', sans-serif;
      font-weight: 700; font-size: 0.95rem;
      letter-spacing: 0.07em; color: #ffd24f;
      text-align: center; padding: 20px;
      /* pointer-events ON so it fully blocks clicks on inputs below */
      pointer-events: all;
      z-index: 2;
      cursor: default;
    }

    /* fade transition when unlocking */
    .modal-register-zone { transition: opacity 0.3s; }
    .modal-register-zone.locked { opacity: 0.6; }
    .modal-register-zone:not(.locked) { opacity: 1; }

    /* prevent body scroll when modal open */
    body.modal-open { overflow: hidden; }

    @media (max-width: 520px) {
      .rules-modal-panel  { border-radius:12px 12px 0 0; max-height:92vh; align-self:flex-end; width:100%; }
      .rules-modal        { align-items:flex-end; }
      .rules-modal-header { padding:14px 14px 10px; }
      .rules-modal-body   { padding:14px 14px 20px; }
      .rule-num           { width:28px; height:28px; font-size:0.72rem; }
      .rule-heading       { font-size:0.7rem; }
      .rule-body p        { font-size:0.86rem; }
      .modal-register-zone { padding:18px 14px 16px; }
    }

    /* Mission last 2 lines — dark text for contrast against the yellow card */
    .card .bullet-white{
      color: var(--text-dark);
      list-style:none;
      padding-left:0;
    }
    .card .bullet-white li{
      color: var(--text-dark);
      font-weight:800;
      font-size:15px;
      line-height:1.35;
    }

    /* Register block */
    .registerBlock{
      text-align:center;
      padding:14px 0 8px;
    }
    .registerText{
      font-size:18px;
      font-weight:700;
      color:#ffffff;
      margin-bottom:12px;
    }
    .registerArrow{
      margin-bottom:12px;
      animation:bounceDown 1.2s ease-in-out infinite;
    }
    @keyframes bounceDown{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(10px)}
    }
    .registerBtn{
      display:inline-block;
      background:var(--coral, #ff6b7a);
      color:#fff;
      font-family:'Luckiest Guy', cursive;
      font-size:20px;
      letter-spacing:1px;
      padding:14px 52px;
      border-radius:14px;
      text-decoration:none;
      text-shadow: -1px -1px 0 rgba(0,0,0,.15), 1px 1px 0 rgba(0,0,0,.15);
      box-shadow:0 10px 0 rgba(0,0,0,.18);
      transition:all .2s;
    }
    .registerBtn:hover{
      background:#f05565;
      transform:translateY(-2px);
      box-shadow:0 12px 0 rgba(0,0,0,.22);
    }

    /* Responsive */
    @media (max-width: 820px){
      .titleMain{font-size:34px}
      .titleSub{font-size:26px}
      .contentRow{grid-template-columns:1fr}
      .charWrap{order:-1}
      .welcomeBlock{grid-template-columns:1fr; gap:10px}
      .welcomeText .title{font-size:34px}
      .registerBtn{font-size:18px; padding:12px 40px}
    }
/* ═══════════════════════════════════════
   HOW TO SUBMIT YOUR LEVEL — Steps Section
═══════════════════════════════════════ */
.submitSection {
  width: 100%;
  margin: 40px 0 30px;
}

.submitHeading {
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: #fff;
  text-align: center;
  text-shadow: 3px 4px 0 rgba(0,0,0,.25);
  -webkit-text-stroke: 2px rgba(0,0,0,.12);
  paint-order: stroke fill;
  margin-bottom: 20px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(255,255,255,.3);
}

/* Individual step card */
.stepCard {
  display: flex;
  gap: 0;
  width: 100%;
  margin: 0 0 16px;
  align-items: stretch;
  /* border-radius here doesn't clip anything (no background on this
     element) — it's just so box-shadow's silhouette follows the rounded
     corners formed by .stepNumber + .stepBody instead of casting a square
     shadow behind a rounded card. */
  border-radius: 14px;
  box-shadow: 9px 14px 0 rgba(0,0,0,.18);
  /* height: 162px; */
}

.stepNumber {
  flex-shrink: 0;
  width: 52px;
  background: var(--coral, #ff6b7a);
  border-radius: 14px 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Luckiest Guy', cursive;
  font-size: 28px;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.15);
}

.stepBody {
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--card-yellow);
  border: 3px solid rgba(0,0,0,.08);
  border-left: none;
  border-radius: 0 14px 14px 0;
  padding: 16px;
  min-height: 100px;
}

.stepBody-full {
  flex-direction: column;
  align-items: flex-start;
}

.stepContent {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.stepContent-full {
  width: 100%;
}

.stepContent h3 {
  font-family: 'Luckiest Guy', cursive;
  font-size: 20px;
  color: #1a2455;
  margin-bottom: 6px;
  text-shadow: none;
  -webkit-text-stroke: 0;
  letter-spacing: .3px;
}

.stepContent p {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #2a2a4a;
  font-weight: 500;
}

/* Arrow */
.stepArrow {
  flex-shrink: 0;
  font-size: 24px;
  color: var(--coral, #ff6b7a);
  font-weight: 900;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

/* Visual area */
.stepVisual {
  flex-shrink: 0;
  max-width: 240px;
}

.stepScreenshot {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* Step 1 — Signup mockup */
.stepMockup {
  background: #1a2455;
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 180px;
}

.mockupHeader {
  font-family: 'Luckiest Guy', cursive;
  font-size: 13px;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.mockupInput {
  background: #2a3565;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 8px;
}

.mockupVerified {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 12px;
  color: #ff6b7a;
  font-weight: 700;
}

/* Step 2 — Editor choice */
.stepVisual-editors {
  display: flex;
  align-items: center;
  gap: 6px;
}

.editorBox {
  text-align: center;
}

.editorBox img {
  width: 100px;
  border-radius: 6px;
  display: block;
  margin-bottom: 4px;
}

.editorLabel {
  font-family: 'Luckiest Guy', cursive;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.editorLabel-3d {
  background: #3a56d4;
  color: #fff;
}

.editorLabel-2d {
  background: #ff6b7a;
  color: #fff;
}

.editorOr {
  font-family: 'Luckiest Guy', cursive;
  font-size: 16px;
  color: #1a2455;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

/* Step 3 — Level gallery */
.stepVisual-gallery {
  display: flex;
  gap: 6px;
}

.stepVisual-gallery img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* Step 6 — Winners */
.stepVisual-winners {
  display: flex;
  gap: 8px;
}

.winnerBox {
  text-align: center;
}

.winnerBox img {
  width: 100px;
  border-radius: 6px;
  display: block;
}

.winnerLabel {
  display: block;
  font-family: 'Luckiest Guy', cursive;
  font-size: 11px;
  color: #ff6b7a;
  margin-bottom: 4px;
  text-shadow: none;
  -webkit-text-stroke: 0;
  background: rgba(255,107,122,.15);
  padding: 2px 8px;
  border-radius: 4px;
}

/* Bottom CTA banner */
.submitCTA {
  background: var(--coral, #ff6b7a);
  color: #fff;
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  text-align: center;
  padding: 16px 20px;
  border-radius: 14px;
  border: 3px solid #d4a520;
  text-shadow: 2px 2px 0 rgba(0,0,0,.15);
  margin-top: 10px;
  letter-spacing: .5px;
}

/* Step 7 — Delivery Origins tags */
.deliveryOrigins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.originTag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(26,36,85,.08);
  color: #1a2455;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: all .15s;
}

.originTag:hover {
  background: var(--coral, #ff6b7a);
  color: #fff;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   DELIVERY LOCATIONS — Button + Modal
═══════════════════════════════════════ */
.deliveryBlock {
  text-align: center;
  margin: 24px 0 10px;
}

.deliveryBtn {
  display: inline-block;
  background: #e8d88a;
  color: #1a2455;
  font-family: 'Luckiest Guy', cursive;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 14px 44px;
  border: 3px solid #d4a520;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0,0,0,.15);
  transition: all .2s;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.deliveryBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 rgba(0,0,0,.18);
  background: #f0e09a;
}

/* Modal overlay */
.deliveryModal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.deliveryModal.open {
  display: flex;
}

.deliveryModal-inner {
  background: #fff;
  border-radius: 18px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.deliveryModal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--coral, #ff6b7a);
}

.deliveryModal-header h3 {
  font-family: 'Luckiest Guy', cursive;
  font-size: 18px;
  color: #fff;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.deliveryModal-close {
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}

.deliveryModal-close:hover {
  background: rgba(255,255,255,.35);
}

.deliveryModal-sub {
  padding: 14px 22px 0;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 14px;
  color: #555;
  font-weight: 600;
}

.deliveryModal-search {
  padding: 10px 22px;
}

.deliveryModal-search input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #ddd;
  border-radius: 10px;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}

.deliveryModal-search input:focus {
  border-color: var(--coral, #ff6b7a);
}

.deliveryModal-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 22px 14px;
}

.countryItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  gap: 8px;
}

.countryItem:last-child {
  border-bottom: none;
}

.countryOk {
  color: #2a9d5c;
  font-size: 15px;
  flex-shrink: 0;
}

.countryUnavailable {
  background: #fff0f0;
  border-radius: 6px;
}

.countryUnavailable span:first-child {
  color: #999;
}

.countryBadge {
  background: #ff4a5f;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .3px;
}

.deliveryModal-note {
  padding: 12px 22px;
  background: #f8f8f0;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  border-top: 1px solid #eee;
}

.deliveryModal-note a {
  color: var(--coral, #ff6b7a);
  font-weight: 700;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 600px) {
  .stepBody {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .stepVisual {
    max-width: 100%;
    width: 100%;
  }
  .stepArrow { display: none; }
  .stepMockup { min-width: auto; }
  .editorBox img { width: 80px; }
  .stepVisual-gallery { width: 100%; }
  .stepVisual-gallery img { width: 48%; }
  .winnerBox img { width: 80px; }
  .submitHeading { font-size: 1.4rem; }
  .deliveryModal-inner { max-height: 90vh; }
  .deliveryBtn { font-size: 15px; padding: 12px 32px; }
}

/* ═══════════════════════════════════════
   EDITOR MODAL — shared across every page (js/editorModal.js)
   Opens 2D/3D EDITOR links in an in-page iframe dialog instead of a new tab.
═══════════════════════════════════════ */
.editor-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.editor-modal-overlay.open {
    display: flex;
}

.editor-modal {
    position: relative;
    width: min(1400px, 100%);
    height: min(780px, 100vh);
    background: #000;
    border-radius: 16px;
    border: 2px solid #ffffff;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.editor-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.editor-modal-close {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--coral);
    color: var(--white);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.editor-modal-close:hover {
    background: var(--coral-dark);
}

@media (max-width: 600px) {
    .editor-modal {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* ═══════════════════════════════════════
   NEWS / BLOG STYLING
═══════════════════════════════════════ */

.news-index {
    padding: 2rem 1rem;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.story-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.story-card.coral {
    background: var(--coral);
}

.story-card.yellow {
    background: var(--yellow-card);
}

.story-card.navy {
    background: var(--navy);
}

.story-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.story-card-text {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Visual hierarchy, top to bottom: small "eyebrow" date, then the
   prominent title, then secondary description, then the CTA pinned to
   the card's bottom (via the description's flex:1 spacer below). */
.story-card-date {
    order: -1;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.story-card-text h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.3;
}

.story-card-text p {
    margin: 0 0 1.25rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
}

/* Explicit "read the post" CTA — cards are already fully clickable
   (the whole .story-card is an <a>), but a visible CTA at the bottom
   signals that clearly instead of relying on the entire card being a
   silent link. */
.story-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.story-card-cta span {
    transition: transform 0.2s ease;
}

.story-card:hover .story-card-cta span {
    transform: translateX(4px);
}

/* News card text colors — separate from the .story-card-text h2 rules
   above (those target story.html's cards, which use <h2>; these news
   cards use <h3>/.story-card-date, so they need their own contrast pass
   per background variant instead of inheriting plain white). */
.story-card.coral .story-card-text h3,
.story-card.navy .story-card-text h3 {
    color: var(--white);
}

.story-card.yellow .story-card-text h3 {
    color: var(--coral);
}

.story-card.coral .story-card-text p,
.story-card.navy .story-card-text p {
    color: rgba(255,255,255,0.92);
}

.story-card.yellow .story-card-text p {
    color: var(--text-dark);
}

.story-card.coral .story-card-date,
.story-card.navy .story-card-date {
    color: rgba(255,255,255,0.75);
}

.story-card.yellow .story-card-date {
    color: rgba(26,26,46,0.65);
}

.story-card.coral .story-card-cta,
.story-card.navy .story-card-cta {
    color: var(--white);
}

.story-card.yellow .story-card-cta {
    color: var(--coral);
}

/* Learn pages (index + individual guides) — solid dark navy, no tiled
   BG.webp texture, so long-form article text stays easy to read. */
.learn-page,
.learn-post-page {
    background-color: #213366;
    background-image: none;
}

/* News post page styling */
.news-post-page main {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.news-post-header {
    margin-bottom: 2rem;
    text-align: center;
}

/* Big stroked page title — same treatment as .story-section-title/
   .page-hero h1 elsewhere (see the global [class*="title"] rule), so the
   post title reads like the rest of the site instead of plain text. */
.news-post-header h1 {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--white);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.news-post-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--yellow-card);
}

.news-post-body {
    padding: 36px 32px;
    line-height: 1.8;
    font-size: 1rem;
}

.news-post-body > * {
    margin-bottom: 1.5rem;
}

.news-post-body > *:last-child {
    margin-bottom: 0;
}

.news-post-body h2 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    text-shadow: none;
    color: var(--coral);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.news-post-body h2:first-child { margin-top: 0; }

.news-post-body h3 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--yellow-card);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.news-post-body p {
    color: rgba(255,255,255,0.85);
    margin-bottom: 1rem;
}

.news-post-body ul,
.news-post-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.news-post-body ul {
    list-style: none;
    padding-left: 0.5rem;
}

.news-post-body ul li {
    position: relative;
    padding-left: 18px;
    color: rgba(255,255,255,0.85);
}

.news-post-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
}

.news-post-body ol li {
    color: rgba(255,255,255,0.85);
}

.news-post-body li {
    margin-bottom: 0.5rem;
}

.news-post-body strong {
    color: var(--white);
}

/* Images in news posts */
.news-figure {
    margin: 2rem 0;
}

.news-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.news-figure figcaption {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.5rem;
    text-align: center;
    font-style: italic;
}

/* Video and YouTube embeds in blog posts — scoped to .news-post-body so
   this doesn't leak onto the sitewide hero .yt-facade (see .hero-frame
   above), and styled to match that same hero-frame look (coral border,
   rounded corners, drop shadow, 16:9 box) instead of a bare black box, so
   embedded post videos read as part of the site rather than a generic
   embed. */
.news-post-body .yt-facade,
.news-post-body .lazy-video {
    display: block;
    width: 100%;
    /* The video's width/height HTML attributes (used so the browser can
       reserve layout space before metadata loads) become a presentational
       "height: 810px" hint that otherwise beats aspect-ratio outright,
       since aspect-ratio only drives sizing when the other dimension is
       auto — without this the box rendered 700x810 (near-square) instead
       of 700x394 (16:9), showing as huge black letterboxing. */
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    margin: 2rem auto;
    border-radius: 18px;
    border: 5px solid var(--coral);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    background: #000;
    object-fit: cover;
}

.news-post-body .yt-facade {
    position: relative;
    cursor: pointer;
    padding: 0;
}

.news-post-body .yt-facade img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-post-body .yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.news-post-body .yt-facade:hover .yt-play-btn,
.news-post-body .yt-facade:focus-visible .yt-play-btn {
    background: var(--coral, #EB4229);
    transform: translate(-50%, -50%) scale(1.06);
}

/* CTA buttons in posts (::button[] markdown) — deliberately a separate
   class from the sitewide .try-it-btn floating card badge (see above),
   styled as a coral pill to match .platform-btn's look elsewhere on the
   site rather than a generic blue button. */
.post-cta-btn {
    display: inline-block;
    margin: 0.5rem 0.75rem 0.5rem 0;
    background: var(--coral);
    color: var(--white);
    font-family: 'Luckiest Guy', cursive;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* Links in post body text — same yellow-on-hover-underline treatment as
   .faq-answer a, so inline links read consistently across the site. Not
   scoped away from .post-cta-btn/.yt-facade/.lazy-video since those are
   already-distinct classes with no shared "a" ancestry to fight over. */
.news-post-body p a,
.news-post-body li a,
.news-post-body h2 a,
.news-post-body h3 a {
    color: var(--yellow-card);
    text-decoration: none;
    font-weight: 600;
}

.news-post-body p a:hover,
.news-post-body li a:hover,
.news-post-body h2 a:hover,
.news-post-body h3 a:hover {
    text-decoration: underline;
}

/* Post footer */
.news-post-footer {
    margin-top: 2rem;
    text-align: center;
}

.back-to-news {
    display: inline-block;
    color: var(--yellow-card);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: color 0.2s ease;
}

.back-to-news:hover {
    color: var(--white);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .story-grid {
        grid-template-columns: 1fr;
    }

    .news-post-page main {
        padding: 1rem;
    }

    .news-post-header h1 {
        font-size: 1.5rem;
    }

    .news-post-body h2 {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════
   HOME HERO (tiles + trailer/contest + store icons)
═══════════════════════════════════════ */
.home-page .hero-inner {
    max-width: 72.5rem;
}

.home-page .hero { padding-top: 22px; }

.hero-tiles {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 3.4vw, 44px);
    margin-bottom: clamp(14px, 2.2vw, 28px);
}

.hero-tile {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 0 1 clamp(70px, 14.5vw, 187px);
    text-decoration: none;
    color: var(--white);
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(0.8rem, 1.9vw, 1.6rem);
    letter-spacing: 0.04em;
    text-shadow: 2px 3px 0 rgba(0,0,0,.25);
    transition: transform .15s ease;
}

.hero-tile:hover,
.hero-tile:focus-visible { transform: translateY(-4px) scale(1.03); }

.hero-tile img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: clamp(10px, 1.6vw, 18px);
    border: 3px solid var(--white);
    box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

.hero-tile span { display: block; margin-top: 10px; }

/* CTA pill under each home tile: PLAY ONLINE (platformers) / BUILD ONLINE (editors) */
.hero-tiles { align-items: stretch; }

.hero-tile .hero-tile-title {
    flex: 1;
    white-space: nowrap; /* keeps "3D PLATFORMER" on one line so the CTAs line up */
    font-size: clamp(0.7rem, 1.45vw, 1.25rem);
}

@media (max-width: 600px) {
    .hero-tile .hero-tile-title { white-space: normal; } /* tiles are too narrow to fit one line */
}

.hero-tile .hero-tile-cta {
    width: fit-content;
    margin: 8px auto 0;
    padding: 0.35em 1em;
    background: #d6322b;
    border: 2px solid var(--white);
    border-radius: 999px;
    font-size: clamp(0.5rem, 1.15vw, 1rem);
    letter-spacing: 0.03em;
    text-shadow: none;
    box-shadow: 0 4px 0 rgba(0,0,0,.2);
    white-space: nowrap;
}

.hero-main {
    display: flex;
    gap: clamp(12px, 3.2vw, 41px);
    align-items: stretch;
}

.hero-main .hero-frame {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    max-width: 55rem;
    margin: 0 auto;
}

.hero-stores {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.6vw, 18px);
    width: fit-content;
    max-width: 100%;
    margin: clamp(16px, 2.6vw, 34px) auto 3rem;
    /* translucent dark "shadow" panel instead of solid black */
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border-radius: 20px;
    padding: clamp(12px, 1.8vw, 20px) clamp(14px, 2.4vw, 28px);
}

.hero-stores-label {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1rem, 1.9vw, 1.6rem);
    letter-spacing: 0.04em;
    color: var(--white);
    white-space: nowrap;
}

.hero-stores-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(8px, 1.6vw, 20px);
}

.hero-store img {
    display: block;
    height: clamp(34px, 4.6vw, 58px);
    width: auto;
    transition: transform .15s ease;
}

.hero-store:hover img,
.hero-store:focus-visible img { transform: translateY(-3px) scale(1.05); }

@media (max-width: 600px) {
    .hero-main { flex-direction: column; }
    .hero-updates { flex-basis: auto; }
    .updates-scroll { position: static; max-height: 560px; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tighten the gap between the hero store icons and the description card */
.home-page .hero { padding-bottom: 0; }
.home-page .hero + .section-wrap { margin-top: 28px; }
.home-page .hero + .section-wrap .desc-card { margin-top: 0; }

/* ═══════════════════════════════════════
   NAVBAR — Community dropdown (desktop) / grouped links (mobile)
═══════════════════════════════════════ */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--white);
    font-family: 'Luckiest Guy', cursive;
    font-size: 19px;
    letter-spacing: 0.02em;
    padding: 7px 16px;
    border-radius: 12px;
    transition: all 0.2s;
    white-space: nowrap;
    text-transform: uppercase;
}

.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger,
.nav-dropdown-trigger:focus-visible {
    background: rgba(255,255,255,0.15);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    list-style: none;
    min-width: 170px;
    padding: 6px 0;
    z-index: 200;
    overflow: hidden;
}

/* Hover bridge so the menu doesn't close while the pointer crosses the 2px gap */
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -8px; height: 8px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu li a {
    display: block;
    padding: 9px 18px;
    color: var(--coral);
    font-size: 16px;
    border-radius: 0;
    white-space: nowrap;
}

.nav-dropdown-menu li a:hover {
    background: rgba(235,66,41,0.1);
}

.mobile-group-label {
    display: block;
    padding: 12px 16px 4px;
    color: var(--white);
    font-family: 'Luckiest Guy', cursive;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.7;
}

.mobile-menu ul.mobile-submenu { padding-left: 14px; }

/* Community trigger: same box metrics as the plain nav links so every item
   sits on one line, plus a drawn chevron in place of the tiny ▾ glyph. */
.nav-links > li { display: flex; align-items: center; }

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    line-height: normal;
}

.nav-dropdown-trigger .nav-auth-caret {
    display: inline-block;
    width: 7px;
    height: 7px;
    font-size: 0;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 1px;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s;
}

.nav-dropdown:hover .nav-auth-caret,
.nav-dropdown.open .nav-auth-caret,
.nav-dropdown:focus-within .nav-auth-caret {
    transform: translateY(1px) rotate(-135deg);
}

/* Community menu items: icon + label */
.nav-dropdown-menu li a,
.mobile-submenu li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-dropdown-menu li a svg,
.mobile-submenu li a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Mobile menu Community items: the generic ".mobile-menu ul li a" rule (display:block) is more
   specific than the flex rule above, so the icon sat on top of the label instead of beside it.
   Re-assert the row layout at higher specificity: icon in a fixed-width column so every label
   starts at the same x, and Luckiest Guy's glyphs (which sit high in their line box) get extra
   top padding so the label's ink and the icon share one vertical centre. */
.mobile-menu ul.mobile-submenu li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px 9px;
}

.mobile-menu ul.mobile-submenu li a svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    opacity: 0.9;
}

.mobile-menu ul.mobile-submenu li a:hover svg,
.mobile-menu ul.mobile-submenu li a:active svg {
    opacity: 1;
}

/* ═══════════════════════════════════════
   HOME — UPDATES panel (updatesPanel.js)
   .hero-updates takes its height from the trailer next to it (the scroller
   inside is absolutely positioned), and scrolls if the entries are taller.
═══════════════════════════════════════ */
.hero-updates {
    position: relative;
    flex: 0 0 clamp(210px, 24%, 290px);
}

.updates-scroll {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 0 clamp(10px, 1.2vw, 14px) 14px;
    background: #cfe3f6;
    border: 3px solid var(--white);
    border-radius: clamp(11px, 1.28vw, 22px);
    box-shadow: 0 6px 14px rgba(0,0,0,.2);
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: rgba(26,26,46,.35) transparent;
}

.updates-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    width: fit-content;
    margin: 0 auto 8px;
    padding: 10px 26px;
    background: var(--yellow-card);
    border: 3px solid var(--white);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(1.1rem, 2vw, 1.7rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--coral);
}

.updates-date {
    margin: 0 0 8px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(0.85rem, 1.25vw, 1.05rem);
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    color: var(--navy-deep);
}

.update-item { margin-bottom: 14px; }
.update-item:last-child { margin-bottom: 0; }

.update-title {
    margin: 0;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(0.95rem, 1.5vw, 1.25rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--coral);
}

.update-desc {
    margin: 4px 0 8px;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(0.85rem, 1.25vw, 1.05rem);
    line-height: 1.2;
    color: var(--navy-deep);
}

.update-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
}

/* styles.css's [class*="title"] rule adds a dark stroke + shadow to heading
   text; the Updates panel uses plain red on light blue instead. */
.update-title,
.updates-heading {
    -webkit-text-stroke: 0;
    text-shadow: none;
    paint-order: normal;
}

/* ═══════════════════════════════════════
   HOME HERO LAYOUT — centered main column + side bar to its right
   Tiles, trailer and store bar form one column centered on the page (58vw,
   max 880px); UPDATES sits in the right-hand margin beside the trailer, same
   height as it, without shifting the column off-center. (display: contents on
   .hero-main lets the trailer and the side bar sit directly in the grid.)
═══════════════════════════════════════ */
.home-page .hero-inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(58vw, 880px) minmax(0, 1fr);
    align-items: start;
}

.home-page .hero-tiles {
    grid-column: 2;
    grid-row: 1;
    justify-content: space-between;
}

.home-page .hero-main { display: contents; }

.home-page .hero-main .hero-frame {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 0;
    align-self: stretch;
}

.home-page .hero-updates {
    grid-column: 3;
    grid-row: 1 / 3; /* from the top of the tiles down to the trailer's bottom edge */
    align-self: stretch;
    justify-self: start;
    margin-left: clamp(12px, 3.2vw, 41px);
    width: min(250px, calc(100% - clamp(12px, 3.2vw, 41px)));
    flex: none;
}

.home-page .hero-stores {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
}

.home-page .hero-store img { height: clamp(22px, 2.8vw, 40px); }
.home-page .hero-stores-row { gap: clamp(6px, 1vw, 14px); }
.home-page .updates-scroll { overflow-x: hidden; }

/* Too narrow for a side bar: single column, UPDATES under the trailer. */
@media (max-width: 1100px) {
    .home-page .hero-inner { grid-template-columns: minmax(0, 1fr); }
    .home-page .hero-tiles,
    .home-page .hero-main .hero-frame { grid-column: 1; }
    .home-page .hero-updates {
        grid-column: 1;
        grid-row: 3;
        justify-self: stretch;
        width: auto;
        margin: 18px 0 0;
    }
    .home-page .hero-stores { grid-column: 1; grid-row: 4; }
    .home-page .hero-tiles { justify-content: center; gap: clamp(10px, 3vw, 30px); }
    .home-page .updates-scroll { position: static; max-height: none; }
    .home-page .updates-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }
    .home-page .update-item { margin-bottom: 0; }
}

/* Specificity bump so a page's generic `button { ... }` / `body.dark button`
   rules (the feedback dashboards have them) can't restyle the navbar's
   Community trigger. */
.navbar .nav-dropdown-trigger {
    height: auto;
    padding: 7px 16px;
    border: none;
    border-radius: 12px;
    background: none;
    box-shadow: none;
    color: var(--white);
    font-family: 'Luckiest Guy', cursive;
    font-size: 19px;
    font-weight: 400;
    transform: none;
}

.navbar .nav-dropdown-trigger:hover,
.navbar .nav-dropdown.open .nav-dropdown-trigger,
.navbar .nav-dropdown-trigger:focus-visible {
    background: rgba(255,255,255,0.15);
    transform: none;
}

/* No stroke/shadow on headings on the home page and the wiki (overrides the
   global bold-title treatment at the top of this file). */
body.home-page :is(h1, h2, h3, h4, h5, h6, [class*="title"]),
body.wiki-page :is(h1, h2, h3, h4, h5, h6, [class*="title"]),
body.wiki-post-page :is(h1, h2, h3, h4, h5, h6, [class*="title"]) {
    text-shadow: none;
    -webkit-text-stroke: 0;
    paint-order: normal;
}

/* ═══════════════════════════════════════
   EDITOR SPLASH — covers the embedded play.lokko.com iframe until its real
   page has loaded (editorSplash.js, editorModal.js). Same keyart + gradient
   play.lokko.com's own loading screen uses, so the handoff is seamless.
═══════════════════════════════════════ */
.editor-splash {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    /* size container: the stage below is the keyart's own 16:9 box inside this frame */
    container-type: size;
    background: center / contain no-repeat url('../loading-keyart-v4.webp'),
                linear-gradient(#bce2fa, #010101);
    opacity: 1;
    transition: opacity 0.35s ease;
}

.editor-splash.is-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s 0.35s;
}

/* Failsafe if editorSplash.js never runs (blocked/errored): fade out anyway
   after 50s rather than covering the frame forever. The script adds .is-live
   as soon as it starts, after which it alone decides when this goes. */
.hero-frame > .editor-splash:not(.is-live) { animation: editor-splash-failsafe 0.35s ease 50s forwards; }
@keyframes editor-splash-failsafe { to { opacity: 0; visibility: hidden; } }

/* The progress bar is positioned in *image* coordinates (the dark strip under the
   LOKKO blocks: ~40% wide, ~90% down) and sized in cqw of the stage, so it scales
   with the art, not with the window — same layout as Lokko_WebGL's own screen. */
.editor-splash-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100cqw, calc(100cqh * 16 / 9));
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
    container-type: inline-size;
}

.editor-splash-meter {
    position: absolute;
    left: 50%;
    top: 90.1%;
    width: 40%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.editor-splash-bar {
    width: 100%;
    height: 2cqw;
    box-sizing: border-box;
    padding: 0.25cqw;
    border-radius: 1.1cqw;
    border: 0.3cqw solid #ea4b2e;
    background: #080a18;
    box-shadow: 0 0.4cqw 0 #a82a16, 0 0.8cqw 1.2cqw rgba(0, 0, 0, 0.45);
}

.editor-splash-fill {
    /* No width transition: editorSplash.js eases the value itself, every frame. */
    width: 5%;
    height: 100%;
    border-radius: 0.6cqw;
    background: linear-gradient(#fff98a 0%, #fdee4a 50%, #f2cf2c 100%);
    box-shadow: inset 0 0.2cqw 0 rgba(255, 255, 255, 0.55);
}

.editor-splash-label {
    margin-top: 1cqw;
    font: 900 max(1.9cqw, 10px) / 1.1 system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08cqw;
    white-space: nowrap;
    color: #fdee4a;
    text-shadow: 0 0.2cqw 0 #ea4b2e;
}

/* Level failed / took too long: the bar gives way to a message and one button. */
.editor-splash-error {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.6cqw, 18px);
    padding: 6cqw;
    text-align: center;
    background: rgba(5, 8, 18, 0.8);
}

.editor-splash.is-error { pointer-events: auto; }
.editor-splash.is-error .editor-splash-meter { display: none; }
.editor-splash.is-error .editor-splash-error { display: flex; }

.editor-splash-error-title {
    margin: 0;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(20px, 3.4cqw, 44px);
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fdee4a;
    text-shadow: 0 0.12em 0 #ea4b2e;
}

.editor-splash-error-text {
    margin: 0;
    max-width: 34em;
    font: 600 clamp(13px, 1.7cqw, 18px) / 1.4 system-ui, sans-serif;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.editor-splash-error-button {
    margin-top: clamp(4px, 0.8cqw, 10px);
    padding: 0.6em 1.7em 0.4em;
    border: 3px solid #ea4b2e;
    border-radius: 999px;
    background: #fdee4a;
    box-shadow: 0 4px 0 #a82a16;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(16px, 2.1cqw, 26px);
    line-height: 1;
    text-transform: uppercase;
    color: #141d42;
    cursor: pointer;
}

.editor-splash-error-button:hover { background: #fff98a; }
.editor-splash-error-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #a82a16; }
.editor-splash-error-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ═══════════════════════════════════════
   NAVBAR TEXT CENTERING — Luckiest Guy's glyphs sit high in their line box, so
   with equal padding the label looks pushed to the top of its pill. Extra top /
   less bottom padding drops the ink to the pill's true center. One rule for all
   nav items (plain links, the active HOME pill, COMMUNITY, LOGIN, the account
   name); every page and the navbar template share this stylesheet.
═══════════════════════════════════════ */
.nav-links a,
.nav-dropdown-trigger,
.navbar .nav-dropdown-trigger, /* the page-proof rule above has higher specificity */
.nav-auth-wrapper .nav-auth--signup {
    padding-top: 10px;
    padding-bottom: 4px;
}

.nav-auth-trigger .nav-auth-name { padding-top: 6px; }

/* MY SAVES button — sits left of LOGIN/ACCOUNT in the top-right auth area.
   Always visible; the page itself prompts a signed-out visitor to log in. */
.nav-auth-wrapper .nav-auth--saves {
    color: var(--coral);
    background: var(--white);
    border: none;
    text-decoration: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 19px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 13px 21px 7px;
    border-radius: 12px;
    white-space: nowrap;
    margin-right: 8px;
}