/* ============================================================
   Cornucopia site v3 - "Golden Hour" redesign
   Palette + rhythm drawn from the game's own Update 10 art.
   Loads AFTER styles.css and overrides the page sections.
   Critters minigame keeps using styles.css untouched.
   ============================================================ */

:root {
    --sky: #4FB7EC;
    --cream: #FFF6E3;
    --cream-2: #FBEED0;
    --ink: #37281a;
    --ink-soft: #5d4a33;
    --brown: #6B4226;
    --wood: #8B5E3C;
    --green: #2E7D32;
    --green-bright: #58B849;
    --deep: #17402A;
    --deepest: #0E2C1C;
    --gold: #FFB627;
    --gold-deep: #E8960C;
    --red: #D9483B;
    --steam: #1B2838;
    --radius: 18px;
    --shadow-soft: 0 10px 30px rgba(55, 40, 26, 0.12);
    --shadow-pop: 0 14px 40px rgba(55, 40, 26, 0.22);
    --font-display: 'Fredoka', 'Quicksand', sans-serif;
    --font-body: 'Quicksand', sans-serif;
    --font-accent: 'Caveat', cursive;
}

/* ---------- Base overrides ---------- */
html { scroll-behavior: smooth; }
body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    margin: 0;
    overflow-x: hidden;
}
body > .bg-pattern { display: none; }
main { display: block; }
img { max-width: 100%; height: auto; }

.c3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Reveal animation — gated on html.rv-js (added by site.js) so content is
   never hidden if JS fails or is disabled (reader modes, SEO snapshots, flaky mobile) */
html.rv-js .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.rv-js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.rv-js .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.c3-btn {
    display: inline-flex; align-items: center; gap: 10px; justify-content: center;
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.06rem; line-height: 1;
    padding: 17px 30px; border-radius: 999px;
    text-decoration: none; cursor: pointer; border: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    white-space: nowrap;
}
.c3-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.c3-btn:active { transform: translateY(0); }

.c3-btn-gold {
    background: linear-gradient(180deg, #FFC64A 0%, var(--gold) 45%, var(--gold-deep) 100%);
    color: #4a2d00;
    box-shadow: 0 4px 0 #b97607, 0 12px 26px rgba(232, 150, 12, .35), inset 0 2px 0 rgba(255,255,255,.55);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.c3-btn-gold:hover { box-shadow: 0 5px 0 #b97607, 0 16px 32px rgba(232, 150, 12, .45), inset 0 2px 0 rgba(255,255,255,.55); }

.c3-btn-steam {
    background: linear-gradient(180deg, #2a3f55 0%, var(--steam) 100%);
    color: #dfeaf5;
    box-shadow: 0 4px 0 #0c141d, 0 12px 26px rgba(12, 20, 29, .4), inset 0 2px 0 rgba(255,255,255,.12);
}
.c3-btn-ghost {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .65);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.c3-btn-ghost:hover { background: rgba(255, 255, 255, .24); }
.c3-btn-wood {
    background: linear-gradient(180deg, #9c6c46 0%, var(--wood) 60%, #6d4429 100%);
    color: #ffefd6;
    box-shadow: 0 4px 0 #4c2e1a, 0 10px 22px rgba(76, 46, 26, .35), inset 0 2px 0 rgba(255,255,255,.25);
}

/* ---------- Section scaffolding ---------- */
.c3-section { padding: 88px 0; position: relative; }
.c3-eyebrow {
    font-family: var(--font-accent); font-size: 1.6rem; color: #A05E00; /* WCAG AA on cream */
    display: block; margin-bottom: 6px;
}
.c3-h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    margin: 0 0 14px; color: var(--brown); letter-spacing: .3px;
}
.c3-sub { font-size: 1.12rem; color: var(--ink-soft); max-width: 640px; margin: 0 auto; text-wrap: balance; }
.c3-h2 { text-wrap: balance; }
.c3-center { text-align: center; }

.c3-dark { background: linear-gradient(180deg, var(--deep) 0%, var(--deepest) 100%); color: #EDF7EE; }
.c3-dark .c3-h2 { color: #FFE9B8; }
.c3-dark .c3-sub { color: #BCD9C2; }
.c3-dark .c3-eyebrow { color: var(--gold); }

/* Wavy section divider */
.c3-divider { display: block; width: 100%; height: 44px; margin: -1px 0; }

/* ============================================================
   NAV
   ============================================================ */
#topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    transition: background .25s ease, box-shadow .25s ease;
    background: linear-gradient(180deg, rgba(14, 34, 22, .62), rgba(14, 34, 22, 0));
}
#topnav.solid {
    background: rgba(255, 246, 227, .96);
    box-shadow: 0 2px 18px rgba(55, 40, 26, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.c3-nav-inner {
    max-width: 1240px; margin: 0 auto; padding: 12px 22px;
    display: flex; align-items: center; gap: 18px;
}
.c3-nav-logo {
    font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
    color: #fff; text-decoration: none; letter-spacing: .4px;
    display: flex; align-items: center; gap: 8px;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
#topnav.solid .c3-nav-logo { color: var(--brown); text-shadow: none; }
.c3-nav-links {
    display: flex; align-items: center; gap: 4px; list-style: none;
    margin: 0 0 0 auto; padding: 0;
}
.c3-nav-links a, .c3-nav-links button {
    font-family: var(--font-body); font-weight: 600; font-size: .95rem;
    color: #f2efe4; text-decoration: none; padding: 9px 13px; border-radius: 10px;
    background: none; border: none; cursor: pointer;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: background .15s ease, color .15s ease;
}
#topnav.solid .c3-nav-links a, #topnav.solid .c3-nav-links button {
    color: var(--ink-soft); text-shadow: none;
}
.c3-nav-links a:hover, .c3-nav-links button:hover { background: rgba(255, 182, 39, .18); color: var(--gold); }
#topnav.solid .c3-nav-links a:hover, #topnav.solid .c3-nav-links button:hover { color: var(--gold-deep); }

.c3-nav-cta {
    margin-left: 8px;
    background: linear-gradient(180deg, #FFC64A, var(--gold-deep)) !important;
    color: #4a2d00 !important; text-shadow: none !important;
    padding: 11px 20px !important; border-radius: 999px !important;
    font-family: var(--font-display) !important;
    box-shadow: 0 3px 0 #b97607, 0 8px 18px rgba(232, 150, 12, .35);
}
.c3-nav-cta:hover { filter: brightness(1.06); background: linear-gradient(180deg, #FFC64A, var(--gold-deep)) !important; }

#c3NavToggle {
    display: none; margin-left: auto;
    background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.5);
    color: #fff; font-size: 1.3rem; border-radius: 12px; padding: 7px 13px; cursor: pointer;
}
#topnav.solid #c3NavToggle { color: var(--brown); border-color: var(--wood); background: rgba(139, 94, 60, .08); }

@media (max-width: 1020px) {
    #c3NavToggle { display: block; }
    .c3-nav-links {
        position: fixed; inset: 0; z-index: 1001;
        display: none; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
        background: rgba(14, 34, 22, .97);
    }
    .c3-nav-links.open { display: flex; }
    .c3-nav-links a, .c3-nav-links button { font-size: 1.25rem; color: #fff !important; text-shadow: none; }
    .c3-nav-close {
        position: absolute; top: 20px; right: 24px;
        font-size: 1.6rem; background: none; border: none; color: #fff; cursor: pointer;
    }
}
.c3-nav-close { display: none; }
.c3-nav-links.open .c3-nav-close { display: block; }

/* ============================================================
   HERO
   ============================================================ */
.c3-hero {
    position: relative;
    min-height: min(100vh, 1080px); /* fallback where svh is unsupported (Safari <15.4, Chrome <108) */
    min-height: min(100svh, 1080px);
    display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden;
    padding: 110px 20px 120px;
}
.c3-hero-bg {
    position: absolute; inset: 0;
    background-image: url('../images/v3/hero_cliffs.webp');
    background-size: cover; background-position: center 30%;
    image-rendering: auto;
}
@media (max-width: 700px) {
    .c3-hero-bg { background-image: url('../images/v3/hero_cliffs_960.webp'); }
}
.c3-hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(10, 30, 16, 0) 42%, rgba(10, 30, 16, .26) 100%),
        linear-gradient(180deg, rgba(10, 28, 16, .30) 0%, rgba(10, 28, 16, .03) 24%, rgba(10, 28, 16, .05) 60%, rgba(14, 44, 28, .62) 100%);
}
.c3-hero-content { position: relative; z-index: 2; max-width: 880px; }
.c3-hero-logo {
    width: min(430px, 78vw); height: auto;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45));
}
.c3-hero h1 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; /* logo carries the visual title */
}
.c3-tagline {
    font-family: var(--font-accent); font-weight: 600;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    color: #FFE9B8; margin: 18px 0 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.c3-hero-line {
    font-size: clamp(1.02rem, 2vw, 1.22rem); font-weight: 600;
    color: #F3EFDF; max-width: 640px; margin: 0 auto 26px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.c3-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.c3-hero-trailer-link {
    display: block; margin: 4px auto 26px; color: #FFE9B8; font-weight: 700;
    text-decoration: none; font-size: 1.02rem; text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.c3-hero-trailer-link:hover { color: var(--gold); }

.c3-trust {
    display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
    gap: 8px 22px; padding: 12px 26px; border-radius: 999px;
    background: rgba(10, 30, 18, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 233, 184, .25);
    font-weight: 700; font-size: .95rem; color: #FFEFCB;
}
.c3-trust .sep { opacity: .4; }
@media (max-width: 480px) { .c3-trust .sep { display: none; } } /* pipes orphan on their own lines when badges wrap */
.c3-trust .star { color: var(--gold); }

.c3-platforms {
    margin-top: 22px; display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap;
    font-size: .88rem; font-weight: 700; letter-spacing: .4px;
}
.c3-platforms a, .c3-platforms span {
    color: rgba(243, 239, 223, .85); text-decoration: none;
    padding: 5px 10px; border-radius: 8px;
}
.c3-platforms a:hover { color: var(--gold); background: rgba(255,255,255,.08); }
.c3-platforms .soon { opacity: .65; }

/* ============================================================
   ACCOLADE RIBBON
   ============================================================ */
.c3-quote { padding: 66px 0; }
.c3-quote blockquote {
    margin: 0 auto; max-width: 900px; text-align: center;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.45;
    color: #FFF3D6;
}
.c3-quote blockquote::before { content: '\201C'; color: var(--gold); font-size: 1.4em; }
.c3-quote blockquote::after { content: '\201D'; color: var(--gold); font-size: 1.4em; }
.c3-quote cite {
    display: block; margin-top: 16px; font-style: normal;
    font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: #A9CDB1;
}

/* ============================================================
   TRAILER
   ============================================================ */
.c3-video-frame {
    max-width: 940px; margin: 34px auto 0; border-radius: 22px; overflow: hidden;
    box-shadow: 0 6px 0 #5f3c22, 0 26px 60px rgba(55, 40, 26, .35);
    border: 6px solid var(--wood);
    background: #000; position: relative;
}
.c3-video-facade { position: relative; aspect-ratio: 16 / 9; cursor: pointer; overflow: hidden; }
.c3-video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.c3-video-facade:hover img { transform: scale(1.03); }
.c3-video-facade .play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.c3-video-facade .play span {
    width: 92px; height: 92px; border-radius: 50%;
    background: linear-gradient(180deg, #FFC64A, var(--gold-deep));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 0 #b97607, 0 18px 40px rgba(0, 0, 0, .45);
    transition: transform .18s ease;
}
.c3-video-facade:hover .play span { transform: scale(1.08); }
.c3-video-facade .play svg { width: 34px; height: 34px; fill: #4a2d00; margin-left: 5px; }
.c3-video-facade.playing { cursor: default; }
.c3-video-facade iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; }

/* ============================================================
   FEATURE TABS EXPLORER
   ============================================================ */
.c3-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 36px 0 30px; }
.c3-tab-btn {
    font-family: var(--font-display); font-weight: 600; font-size: 1rem;
    padding: 12px 20px; border-radius: 999px; cursor: pointer;
    background: #fff; color: var(--ink-soft);
    border: 2px solid #E8D9B8;
    box-shadow: 0 3px 0 #E8D9B8;
    transition: all .16s ease;
}
.c3-tab-btn:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-1px); }
.c3-tab-btn.active {
    background: linear-gradient(180deg, #FFC64A, var(--gold-deep));
    color: #4a2d00; border-color: var(--gold-deep);
    box-shadow: 0 3px 0 #b97607;
}
.c3-tab-panel { display: none; }
.c3-tab-panel.active { display: grid; animation: c3fade .35s ease; }
@keyframes c3fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.c3-tab-panel {
    grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
    max-width: 1080px; margin: 0 auto;
}
.c3-tab-shot {
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-pop); border: 4px solid #fff;
}
.c3-tab-shot img { display: block; width: 100%; }
.c3-tab-copy h3 {
    font-family: var(--font-display); font-size: 1.65rem; color: var(--brown); margin: 0 0 12px;
}
.c3-tab-copy p { font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 18px; }
.c3-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.c3-chip {
    background: var(--cream-2); border: 1.5px solid #E4CFA1;
    padding: 7px 13px; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--brown);
}
@media (max-width: 860px) {
    .c3-tab-panel { grid-template-columns: 1fr; gap: 22px; }
}

.c3-more-feats { margin-top: 46px; text-align: center; }
.c3-more-feats p { font-weight: 700; color: var(--ink-soft); margin-bottom: 14px; }
.c3-more-feats .c3-chiprow { justify-content: center; max-width: 860px; margin: 0 auto; }

/* ============================================================
   GALLERY
   ============================================================ */
.c3-gallery-featured {
    max-width: 1020px; margin: 36px auto 0; border-radius: 22px; overflow: hidden;
    border: 5px solid rgba(255, 233, 184, .25);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45); cursor: zoom-in;
    position: relative;
}
.c3-gallery-featured img { display: block; width: 100%; transition: opacity .25s ease; }
.c3-gallery-cap {
    text-align: center; margin: 16px auto 8px; font-size: 1rem; color: #BCD9C2; font-weight: 600;
}
.c3-thumbs {
    display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap;
    max-width: 1020px; margin: 14px auto 0; overflow-x: auto; padding: 6px;
}
.c3-thumb {
    flex: 0 0 auto; width: 132px; border-radius: 12px; overflow: hidden;
    border: 3px solid transparent; cursor: pointer; opacity: .75;
    transition: all .16s ease; background: none; padding: 0;
}
.c3-thumb img { display: block; width: 100%; }
.c3-thumb:hover { opacity: 1; transform: translateY(-2px); }
.c3-thumb.active { border-color: var(--gold); opacity: 1; }

#c3Lightbox {
    position: fixed; inset: 0; z-index: 2000; display: none;
    align-items: center; justify-content: center;
    background: rgba(8, 18, 12, .93); cursor: zoom-out; padding: 4vh 4vw;
}
#c3Lightbox.open { display: flex; }
#c3Lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }

/* ============================================================
   COMPARISON
   ============================================================ */
.c3-compare-wrap { max-width: 880px; margin: 40px auto 0; overflow-x: auto; }
.c3-compare {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-soft); min-width: 560px;
}
.c3-compare th, .c3-compare td { padding: 15px 20px; text-align: left; font-size: 1rem; }
.c3-compare thead th {
    background: var(--brown); color: #FFEFD6; font-family: var(--font-display); font-weight: 600;
    font-size: 1.02rem;
}
.c3-compare thead th.hi { background: var(--green); color: #fff; }
.c3-compare tbody tr:nth-child(even) { background: #FBF4E3; }
.c3-compare tbody td { color: var(--ink-soft); border-top: 1px solid #F0E4C8; }
.c3-compare tbody td:first-child { font-weight: 700; color: var(--ink); }
.c3-compare td.hi { background: rgba(88, 184, 73, .12); font-weight: 700; color: var(--green); }

/* ============================================================
   REVIEWS
   ============================================================ */
.c3-reviews { overflow: hidden; }
.c3-review-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin: 30px 0 40px; }
.c3-rstat { text-align: center; }
.c3-rstat .v {
    font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: var(--gold);
    display: block; line-height: 1.1;
}
.c3-rstat .l { font-size: .95rem; font-weight: 700; color: #A9CDB1; }

.c3-marquee { position: relative; width: 100%; overflow: hidden; padding: 8px 0 6px; }
.c3-marquee-track {
    display: flex; gap: 22px; width: max-content;
    animation: c3scroll 55s linear infinite;
}
.c3-marquee:hover .c3-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .c3-marquee { overflow-x: auto; }
    .c3-marquee-track { animation: none; }
}
@keyframes c3scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.c3-review-card {
    flex: 0 0 350px; background: rgba(255, 251, 240, .97);
    border-radius: var(--radius); padding: 24px 26px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    border-bottom: 4px solid var(--gold);
}
.c3-review-card .stars { color: var(--gold-deep); letter-spacing: 2px; margin-bottom: 10px; font-size: 1.05rem; }
.c3-review-card p { font-size: .98rem; line-height: 1.6; color: var(--ink); margin: 0 0 14px; font-weight: 600; }
.c3-review-card .meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--ink-soft); font-weight: 700; }
.c3-reviews-cta { text-align: center; margin-top: 42px; }
.c3-reviews-cta p { font-size: 1.1rem; font-weight: 700; color: #DCEFDD; margin-bottom: 18px; }

/* ============================================================
   ROADMAP
   ============================================================ */
.c3-roadmap-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px;
}
.c3-road-card {
    background: #fff; border-radius: var(--radius); padding: 26px;
    box-shadow: var(--shadow-soft); border-top: 5px solid var(--green-bright);
    transition: transform .18s ease, box-shadow .18s ease;
}
.c3-road-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.c3-road-card .ic { font-size: 2rem; display: block; margin-bottom: 10px; }
.c3-road-card h3 { font-family: var(--font-display); font-size: 1.18rem; color: var(--brown); margin: 0 0 8px; }
.c3-road-card p { color: var(--ink-soft); font-size: .98rem; line-height: 1.55; margin: 0; }
.c3-road-card.featured { border-top-color: var(--gold); background: linear-gradient(180deg, #FFFBEF, #FFF3D3); }
@media (max-width: 900px) { .c3-roadmap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .c3-roadmap-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT / SOLO DEV
   ============================================================ */
.c3-about-grid {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; margin-top: 26px;
}
.c3-about-text p { font-size: 1.07rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 18px; }
.c3-about-text .hl { color: var(--green); font-weight: 700; }
.c3-dev-card {
    background: #fff; border-radius: 22px; padding: 34px 30px; text-align: center;
    box-shadow: var(--shadow-pop); border: 3px solid var(--cream-2);
    position: sticky; top: 96px;
}
.c3-dev-card img.dev-shot {
    width: 100%; border-radius: 14px; margin-bottom: 18px;
    border: 3px solid var(--cream-2);
}
.c3-dev-card h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 4px; color: var(--brown); }
.c3-dev-card .role { color: var(--gold-deep); font-weight: 700; margin: 0 0 2px; }
.c3-dev-card .co { color: var(--ink-soft); font-size: .92rem; margin: 0 0 18px; }
.c3-dev-links { display: flex; gap: 10px; justify-content: center; }
.c3-dev-links a {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    background: var(--cream-2); border-radius: 12px; font-size: 1.2rem; text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}
.c3-dev-links a:hover { transform: translateY(-2px); background: #FFE9B8; }
@media (max-width: 860px) { .c3-about-grid { grid-template-columns: 1fr; } .c3-dev-card { position: static; } }

/* ============================================================
   EVENTS
   ============================================================ */
.c3-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.c3-event {
    background: rgba(255, 251, 240, .07); border: 1.5px solid rgba(255, 233, 184, .22);
    border-radius: var(--radius); padding: 22px 24px; position: relative;
}
.c3-event .tag {
    position: absolute; top: -11px; right: 16px;
    font-size: .72rem; font-weight: 800; letter-spacing: .8px;
    padding: 4px 12px; border-radius: 999px;
    background: #40563F; color: #C9DFC5;
}
.c3-event .tag.up { background: var(--gold); color: #4a2d00; }
.c3-event .date { font-size: .88rem; font-weight: 700; color: #A9CDB1; margin: 0 0 6px; }
.c3-event h3 { font-family: var(--font-display); font-size: 1.15rem; color: #FFF3D6; margin: 0 0 6px; }
.c3-event .loc { font-size: .92rem; color: #BCD9C2; margin: 0; }
.c3-event.up-card { border-color: var(--gold); background: rgba(255, 182, 39, .1); }
@media (max-width: 900px) { .c3-events-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .c3-events-grid { grid-template-columns: 1fr; } }

/* ============================================================
   COMMUNITY + NEWSLETTER
   ============================================================ */
.c3-social-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 34px 0 10px; }
.c3-social-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 999px; text-decoration: none;
    font-family: var(--font-display); font-weight: 600; font-size: .98rem;
    background: #fff; color: var(--ink); box-shadow: var(--shadow-soft);
    border: 2px solid transparent;
    transition: transform .15s ease, border-color .15s ease;
}
.c3-social-btn:hover { transform: translateY(-2px); border-color: var(--gold); }
.c3-social-btn.discord { background: #5865F2; color: #fff; }
.c3-social-btn.devlog { background: var(--green); color: #fff; }

.c3-newsletter {
    max-width: 720px; margin: 48px auto 0; background: #fff;
    border-radius: 22px; padding: 38px 40px; text-align: center;
    box-shadow: var(--shadow-pop); border: 3px solid #F3E5C2;
}
.c3-newsletter h3 { font-family: var(--font-display); font-size: 1.55rem; color: var(--brown); margin: 0 0 10px; }
.c3-newsletter > p { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 22px; line-height: 1.6; }
.beehiiv-form-wrapper { display: flex; justify-content: center; max-height: 190px; overflow: hidden; }
.beehiiv-embed { width: 100%; max-width: 560px; height: 118px !important; max-height: 190px; border-radius: 12px; }
.c3-newsletter .fine { font-size: .85rem; color: #9b8a6f; margin: 14px 0 0; }

/* ============================================================
   FAQ
   ============================================================ */
.c3-faq-list { max-width: 780px; margin: 38px auto 0; display: flex; flex-direction: column; gap: 12px; }
.c3-faq-item {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-soft); border: 2px solid transparent;
    transition: border-color .18s ease;
}
.c3-faq-item.open { border-color: var(--gold); }
.c3-faq-q {
    width: 100%; text-align: left; padding: 19px 54px 19px 24px; cursor: pointer;
    background: none; border: none;
    font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--brown);
    position: relative;
}
.c3-faq-q::after {
    content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; color: var(--gold-deep); transition: transform .2s ease;
}
.c3-faq-item.open .c3-faq-q::after { content: '\2212'; }
.c3-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.c3-faq-item.open .c3-faq-a { max-height: 400px; }
.c3-faq-a p { padding: 0 24px 20px; margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: 1rem; }

/* ============================================================
   PRESS + FINAL CTA + FOOTER
   ============================================================ */
.c3-press { padding: 60px 0; background: var(--cream-2); }
.c3-press-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.c3-press-inner h2 { font-family: var(--font-display); color: var(--brown); font-size: 1.5rem; margin: 0 0 6px; }
.c3-press-inner p { color: var(--ink-soft); margin: 0; max-width: 480px; }
.c3-press-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.c3-final { text-align: center; padding: 100px 24px; }
.c3-final h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.6rem); color: #FFE9B8; margin: 0 0 12px;
}
.c3-final > .c3-wrap > p { color: #BCD9C2; font-size: 1.15rem; margin: 0 0 30px; }
.c3-final-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.c3-final .fine { margin-top: 22px; font-size: .95rem; color: #8FB99A; }

footer.c3-footer { background: var(--deepest); color: #9DBCA6; padding: 64px 0 40px; }
.c3-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.c3-footer .flogo {
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: #FFE9B8;
    text-decoration: none; display: inline-block; margin-bottom: 12px;
}
.c3-footer p { font-size: .95rem; line-height: 1.6; margin: 0; }
.c3-footer h3 { color: #E8F3E9; font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 14px; }
.c3-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.c3-footer ul a { color: #9DBCA6; text-decoration: none; font-size: .95rem; }
.c3-footer ul a:hover { color: var(--gold); }
.c3-footer-bottom {
    margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(157, 188, 166, .18);
    font-size: .82rem; line-height: 1.6; color: #93B49E; /* WCAG AA on deepest */
}
.c3-footer-bottom .tm { margin-top: 10px; font-size: .74rem; color: #8AAB95; }
.footer-secrets { margin-top: 16px; cursor: pointer; color: #93B49E; font-size: .85rem; }
.footer-secrets:hover { color: #C9DFC5; }
@media (max-width: 900px) { .c3-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .c3-footer-grid { grid-template-columns: 1fr; } }

/* Sticky email bar (kept from v2, restyled) */
.sticky-email-bar {
    position: fixed; bottom: -90px; left: 0; right: 0; z-index: 900;
    transition: bottom .35s ease;
}
.sticky-email-bar.visible { bottom: 0; }
.sticky-email-content {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    background: rgba(14, 44, 28, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 13px 48px calc(13px + env(safe-area-inset-bottom, 0px)) 20px; position: relative;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
}
.sticky-email-text { color: #FFE9B8; font-weight: 700; font-size: .98rem; }
.sticky-email-btn {
    background: linear-gradient(180deg, #FFC64A, var(--gold-deep)); color: #4a2d00;
    font-family: var(--font-display); font-weight: 600; text-decoration: none;
    padding: 9px 20px; border-radius: 999px; font-size: .95rem;
}
.sticky-email-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #9DBCA6; font-size: 1.4rem; cursor: pointer;
}
@media (max-width: 640px) { .sticky-email-text { display: none; } }

/* Critters minigame: styles.css now loads lazily WITH the minigame
   (kept off the critical path for performance). Until then, every
   critters root element stays hidden. game.js sets inline styles /
   styles.css classes once loaded, which take over from here. */
.battle-arena, .battleground, .biome-indicator, .pet-container,
.pet-modal, .pet-select-modal, .secrets-modal, .lightbox { display: none; }

/* Skip link */
.skip-link {
    position: absolute; top: -48px; left: 12px; z-index: 3000;
    background: var(--gold); color: #4a2d00; font-weight: 700;
    padding: 10px 18px; border-radius: 0 0 10px 10px; text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ============================================================
   /crit polish pass 2026-07-05 - conversion + legibility fixes
   from the 6-model OpenRouter critique. Overrides at end so they win.
   ============================================================ */

/* #1 hero CTA hierarchy: Try-Demo is the sole primary; Buy is a clear secondary */
.c3-hero-ctas .c3-btn-secondary{opacity:.96;font-weight:600;}
.c3-hero-ctas .c3-btn-gold{transform:scale(1.04);box-shadow:0 5px 0 #b97607,0 18px 36px rgba(232,150,12,.5),inset 0 2px 0 rgba(255,255,255,.55);}

/* #6 + hero body copy contrast on the busy art */
.c3-hero-line{font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.78),0 1px 3px rgba(0,0,0,.9);}
.c3-tagline{text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.85);}

/* #19 + #21 "Watch the trailer" gets real weight + a clear play glyph */
.c3-hero-trailer-link{font-weight:800;font-size:1.1rem;display:inline-flex;align-items:center;gap:9px;}
.c3-hero-trailer-link .tri{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#3a2400;font-size:.7rem;box-shadow:0 2px 8px rgba(0,0,0,.4);}

/* #17 nav: lock to ONE permanent background (no jarring transparent->cream flip) */
#topnav{background:rgba(255,246,227,.96) !important;box-shadow:0 2px 18px rgba(55,40,26,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.c3-nav-logo{color:var(--brown) !important;text-shadow:none !important;}
.c3-nav-links a,.c3-nav-links button{color:var(--ink-soft) !important;text-shadow:none !important;}
.c3-nav-links a:hover,.c3-nav-links button:hover{color:var(--gold-deep) !important;}
#c3NavToggle{color:var(--brown) !important;border-color:var(--wood) !important;background:rgba(139,94,60,.08) !important;}
/* #24 social-proof trust bar reads bigger + clearer over the (now correct) hero */
.c3-trust{font-size:1.02rem;padding:13px 28px;background:rgba(10,30,18,.66);}
.c3-trust .star{font-size:1.1em;}
/* #20 platform row: more contrast + weight so it isn't a whisper */
.c3-platforms a,.c3-platforms span{font-size:.95rem;color:rgba(255,246,227,.95);}
.c3-platforms .soon{opacity:.78;}

/* #5 feature/tab pills: clear active state + inactive still reads interactive */
.c3-tab-btn{background:#fff;border:2px solid #E7D9B4;color:var(--ink-soft);font-weight:700;transition:all .15s ease;}
.c3-tab-btn:hover{border-color:var(--gold);color:var(--gold-deep);background:#FFFBEF;}
.c3-tab-btn.active{background:linear-gradient(180deg,#FFC64A,var(--gold-deep));border-color:var(--gold-deep);color:#4a2d00;box-shadow:0 3px 0 #b97607,0 8px 16px rgba(232,150,12,.28);transform:translateY(-1px);}

/* #9 + #18 comparison table: readable hi column, matched header weight, clean scan */
.c3-compare thead th{background:#6B4226;color:#FFE9C8;font-family:var(--font-display);}
.c3-compare thead th.hi{background:var(--green-bright);color:#0E2C1C;}
.c3-compare tbody td.hi{color:#1c5a20;font-weight:700;background:#EAF7E6;}
.c3-compare tbody tr:nth-child(even) td:not(.hi){background:#FBF4E3;}
.c3-compare th,.c3-compare td{border-right:1px solid #F0E4C8;}

/* #12 outlined "view more" / secondary pills on dark -> filled, high-contrast */
.c3-dark .c3-btn-ghost,.c3-btn-wood.ghostish{background:linear-gradient(180deg,#FFC64A,var(--gold-deep));color:#4a2d00;border:none;box-shadow:0 3px 0 #b97607,0 8px 16px rgba(232,150,12,.3);}

/* #14 full-width quote section: halve the excess vertical padding */
.c3-quote{padding:44px 0 !important;}
/* #25 testimonial on dark green: bump size + a soft scrim for legibility */
.c3-quote blockquote{text-shadow:0 1px 8px rgba(0,0,0,.4);}
.c3-dark .c3-quote blockquote{font-size:1.5rem;line-height:1.5;}

/* #13 tiny helper / whisper text: real, readable UI text */
.c3-sub,.fine,.c3-note{color:var(--ink-soft);}
.c3-dark .c3-sub{color:#CFE6D2 !important;}
.fine{font-size:.9rem !important;opacity:.9 !important;}

/* #3 + #22 review cards: pad the rail so cards don't clip, bump quote legibility */
.c3-reviews .c3-wrap{padding-left:32px;padding-right:32px;}
.c3-review-card{padding:26px 24px;}
.c3-review-card p,.c3-review-card blockquote{font-size:1.05rem;line-height:1.6;}

/* #16 + #27 screenshots: kill top clip + a persistent zoom affordance on thumbs */
.c3-shot-hero,.c3-screens img{border-radius:10px;}
.c3-shot,.c3-screen-thumb{position:relative;border-radius:8px;overflow:hidden;}
.c3-shot::after,.c3-screen-thumb::after{content:'\1F50D Zoom';position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.35);pointer-events:none;opacity:.9;}

/* #2 + #28 sticky email bar: bright unmissable CTA, doesn't visually clip content */
.sticky-email-bar{border-top:2px solid rgba(255,182,39,.4);box-shadow:0 -6px 22px rgba(0,0,0,.35);}
.sticky-email-btn{background:linear-gradient(180deg,#FFA425,#FF8C00) !important;color:#3a2200 !important;font-weight:800 !important;box-shadow:0 0 10px rgba(255,140,0,.6),0 3px 0 #c96a00 !important;}
.sticky-email-btn:hover{filter:brightness(1.06);}

/* #10 roadmap cards: the featured (orange) card gets an explicit "Most Requested" badge so the
   different border reads as intentional, not random; the rest stay a consistent border */
.c3-road-card{border:2px solid #E7D9B4;}
.c3-road-card.featured{position:relative;border-color:var(--gold-deep);}
.c3-road-card.featured::before{content:'\2605 Most Requested';position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#FFC64A,var(--gold-deep));color:#3a2400;font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.3px;padding:3px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 8px rgba(232,150,12,.4);}

/* #8 + #26 emoji-as-icon: frame every emoji icon in a consistent branded badge so they read as
   deliberate iconography (not raw OS emoji that render inconsistently + undercut the pixel brand) */
.c3-road-card .ic,.c3-chip{display:inline-flex;align-items:center;gap:7px;}
.c3-road-card .ic{width:52px;height:52px;justify-content:center;font-size:1.5rem;border-radius:14px;background:linear-gradient(180deg,#FFF6E3,#FBEED0);border:2px solid #EBDCB6;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 8px rgba(107,66,38,.12);margin-bottom:6px;}
.c3-dark .c3-road-card .ic{background:linear-gradient(180deg,#1e4a30,#15321f);border-color:#2c5c3c;}
.c3-tab-btn{font-family:var(--font-display);}

/* #7 cursive eyebrow: KEEP the cozy Caveat but make it legible (bigger, bolder, more contrast) */
.c3-eyebrow{font-size:1.75rem;font-weight:700;color:#8a4f00;letter-spacing:.3px;}
.c3-dark .c3-eyebrow{color:#FFC64A;}

/* #29 dev-story wall of text: comfortable measure + rhythm + breathing room between paragraphs */
.c3-about-text p{line-height:1.8;margin-bottom:18px;}
.c3-about-text .hl{font-weight:700;color:var(--gold-deep);}

/* #3 review marquee: it's an auto-scrolling ticker, so cards are caught mid-scroll at the edges.
   A soft edge-fade mask makes them glide in/out gracefully instead of hard-clipping (the real complaint). */
.c3-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);}

/* #23 convention appearances: color-coded status badges (green=upcoming, gray=completed) with clear contrast */
.c3-event .tag{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.6px;padding:4px 11px;border-radius:999px;background:#E7E1D2;color:#6b5d44;margin-bottom:10px;}
.c3-event .tag.up{background:linear-gradient(180deg,#6BD36B,#3FA83F);color:#0e2c1c;box-shadow:0 2px 8px rgba(63,168,63,.3);}
.c3-event.up-card{border-color:var(--green-bright);}
.c3-event .date{font-weight:700;color:var(--ink);}

/* MOBILE: the 3-col comparison table shoved the winning "Cornucopia" column off-screen (needed
   horizontal scroll). Shrink cell padding + font on narrow screens so all 3 columns fit at ~360px+
   and the selling column is visible without scrolling. (/crit mobile audit 2026-07-05) */
@media (max-width:560px){
  /* force all 3 columns into the viewport (equal thirds) so the winning Cornucopia column is never
     off-screen; text wraps instead of overflowing */
  .c3-compare-wrap{overflow-x:auto;padding:0;}
  .c3-compare{table-layout:fixed;width:100%;min-width:0;}
  .c3-compare th,.c3-compare td{padding:8px 6px;font-size:.72rem;word-break:break-word;overflow-wrap:anywhere;}
  .c3-compare thead th{font-size:.68rem;letter-spacing:0;}
  .c3-compare th:first-child,.c3-compare td:first-child{width:26%;}
  .c3-compare th.hi,.c3-compare td.hi{width:40%;}
  .c3-road-card.featured::before{font-size:.66rem;padding:2px 9px;}
}

/* ============================================================
   /crit pass 2 (2026-07-05) - deeper micro-polish (30-item list)
   ============================================================ */

/* #1 review marquee: widen the edge-fade so cards clearly glide in/out (was reading as a hard crop) */
.c3-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}

/* #3 hero CTAs: sharpen primary-vs-secondary - Buy is smaller, more transparent, thinner */
.c3-hero-ctas .c3-btn-secondary{transform:scale(.94);opacity:.9;font-weight:500;border-width:1.5px;}
.c3-hero-ctas .c3-btn-secondary:hover{opacity:1;}
/* #16 price legibility on the Buy button */
.c3-hero-ctas .c3-btn-secondary{letter-spacing:.3px;}

/* #4 + #23 nav: right-edge breathing room + lighter Wishlist shadow to match the flat nav */
.c3-nav-inner{padding-right:26px;}
.c3-nav-cta{box-shadow:0 2px 0 #b97607,0 4px 12px rgba(232,150,12,.22) !important;}

/* #5 script tagline crispness: a soft dark backing so it reads sharp on the busy art */
.c3-tagline{text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.9);}
/* #11 hero body copy: tighter measure + a hair more size so it reads deliberate, not soft */
.c3-hero-line{max-width:600px;line-height:1.55;}

/* #17 hero logo: a crisp edge so its shadow doesn't melt into the cliff art behind it */
.c3-hero-logo{filter:drop-shadow(0 0 1px rgba(0,0,0,.85)) drop-shadow(0 8px 20px rgba(0,0,0,.5));}

/* #18 demo-button leaf icon sits on the text baseline */
.c3-hero-ctas .c3-btn-gold{line-height:1.05;}

/* #6 + #7 comparison table: darker legible "genre norm", desaturated (not neon) green, consistent cells */
.c3-compare tbody td:not(.hi){color:#7a6a4e;}
.c3-compare thead th.hi{background:#4EA84A;color:#0c2410;}
.c3-compare tbody td.hi{background:#E6F4E2;color:#1c5a20;vertical-align:middle;}
.c3-compare th,.c3-compare td{vertical-align:middle;}

/* #9 lock a single eyebrow -> H2 gap across every section */
.c3-eyebrow{margin-bottom:4px;line-height:1.1;}
.c3-h2{margin-top:0;}

/* #19 social-proof: command attention - bigger star, bolder 88% */
.c3-trust .star{font-size:1.25em;}
.c3-rstat .v{font-weight:800;}

/* #20 trailer video: breathing room so the sticky bar / footer never truncates the frame */
#trailer{padding-bottom:110px;}
/* #28 play button: bigger + a soft glow so it reads clearly as interactive */
.c3-video-facade .play{transform:scale(1.3);}
.c3-video-facade .play span,.c3-video-facade .play{filter:drop-shadow(0 0 12px rgba(255,182,39,.5));}

/* #21 "Most Requested" badge sits attached to the card top with a clean drop */
.c3-road-card.featured::before{top:-13px;box-shadow:0 3px 10px rgba(232,150,12,.45);}

/* #22 dev-bio social row: even grid, aligned, consistent gaps */
.c3-social-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:stretch;}
.c3-social-btn{display:inline-flex;align-items:center;gap:8px;}

/* #24 testimonial quote: room to breathe (was crowding the container edges) */
.c3-quote .c3-wrap{padding-left:40px;padding-right:40px;}
.c3-quote blockquote{max-width:760px;margin:0 auto;}
.c3-quote cite{display:block;margin-top:18px;}

/* #26 + #29 screenshot thumbnails: consistent gap + a touch larger so the gallery has impact */
.c3-thumbs{gap:14px;}
.c3-thumb{min-width:96px;}

/* #27 convention status tags align to the top of each event card */
.c3-event{display:flex;flex-direction:column;}
.c3-event .tag{align-self:flex-start;}

/* #30 review card: breathing room around the attribution line */
.c3-review-card .meta{margin-top:18px;}

/* #12 stop any faint section-description bleed between the beige + dark bands */
.c3-section{isolation:isolate;}

/* ============================================================
   Language switcher (i18n) - a globe dropdown in the nav
   ============================================================ */
.c3-lang{position:relative;display:flex;align-items:center;list-style:none;}
.c3-lang-btn{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--ink-soft) !important;background:rgba(139,94,60,.06);border:1.5px solid #E7D9B4;border-radius:999px;padding:7px 12px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
.c3-lang-btn:hover{background:rgba(255,182,39,.14);border-color:var(--gold);color:var(--gold-deep) !important;}
.c3-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid #E7D9B4;border-radius:14px;box-shadow:0 12px 34px rgba(55,40,26,.2);display:none;z-index:1002;}
.c3-lang-menu.open{display:block;}
.c3-lang-menu li{margin:0;}
.c3-lang-menu button{display:block;width:100%;text-align:left;font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--ink-soft);background:none;border:none;padding:9px 12px;border-radius:9px;cursor:pointer;}
.c3-lang-menu button:hover{background:#FFF7EA;color:var(--gold-deep);}
/* on mobile the nav goes fullscreen dark: make the switcher fit that skin */
@media (max-width:1180px){
  .c3-lang{justify-content:center;}
  .c3-lang-btn{color:#fff !important;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);}
  .c3-lang-menu{position:static;margin-top:8px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);}
  .c3-lang-menu button{color:#fff;}
  .c3-lang-menu button:hover{background:rgba(255,255,255,.12);color:var(--gold);}
}

/* ============================================================
   Nav fits every language: collapse to the hamburger earlier so
   longer translated labels (Spanish/German/etc.) never wrap, and
   tighten spacing so the full desktop nav has breathing room.
   ============================================================ */
@media (min-width:1181px){
  .c3-nav-links{gap:2px;}
  .c3-nav-links a,.c3-nav-links button{padding:8px 10px;font-size:.92rem;white-space:nowrap;}
  .c3-nav-cta{padding:10px 16px !important;}
}
/* Between 1021-1180 the translated nav would overflow -> use the fullscreen menu */
@media (max-width:1180px){
  #c3NavToggle{display:block;margin-left:auto;}
  .c3-nav-links{position:fixed;inset:0;z-index:1001;display:none;flex-direction:column;justify-content:center;align-items:center;gap:10px;background:rgba(14,34,22,.97);margin:0;}
  .c3-nav-links.open{display:flex;}
  .c3-nav-links a,.c3-nav-links button{font-size:1.25rem;color:#fff !important;text-shadow:none;padding:10px 16px;}
  .c3-nav-close{display:none;}
  .c3-nav-links.open .c3-nav-close{display:block;}
}


/* Localized "Most Requested" roadmap badge (CSS ::before, per <html lang>). Unicode-escaped = encoding-safe. */
:root[lang="zh"] .c3-road-card.featured::before{content:"\2605 \20 \6700 \53d7 \671f \5f85 ";}
:root[lang="es"] .c3-road-card.featured::before{content:"\2605 \20 \4c \6f \20 \6d \e1 \73 \20 \70 \65 \64 \69 \64 \6f ";}
:root[lang="pt"] .c3-road-card.featured::before{content:"\2605 \20 \4d \61 \69 \73 \20 \70 \65 \64 \69 \64 \6f ";}
:root[lang="de"] .c3-road-card.featured::before{content:"\2605 \20 \4d \65 \69 \73 \74 \67 \65 \77 \fc \6e \73 \63 \68 \74 ";}
:root[lang="fr"] .c3-road-card.featured::before{content:"\2605 \20 \4c \65 \20 \70 \6c \75 \73 \20 \64 \65 \6d \61 \6e \64 \e9 ";}
:root[lang="ja"] .c3-road-card.featured::before{content:"\2605 \20 \6700 \3082 \8981 \671b \306e \591a \3044 \6a5f \80fd ";}
:root[lang="ru"] .c3-road-card.featured::before{content:"\2605 \20 \421 \430 \43c \43e \435 \20 \436 \435 \43b \430 \435 \43c \43e \435 ";}
:root[lang="ko"] .c3-road-card.featured::before{content:"\2605 \20 \ac00 \c7a5 \20 \b9ce \c774 \20 \c694 \ccad \b428 ";}

/* ============================================================
   Language auto-detect notice bar (one-click back to English)
   ============================================================ */
.c3-langbar{position:fixed;top:0;left:0;right:0;z-index:1100;display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;padding:9px 16px;background:linear-gradient(180deg,#17402A,#0E2C1C);color:#EDF7EE;font-family:var(--font-body);font-weight:600;font-size:.92rem;box-shadow:0 2px 12px rgba(0,0,0,.28);}
.c3-langbar-msg{opacity:.96;}
.c3-langbar-en{background:linear-gradient(180deg,#FFC64A,var(--gold-deep));color:#4a2d00;border:none;border-radius:999px;padding:6px 16px;font-family:var(--font-display);font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(232,150,12,.35);}
.c3-langbar-en:hover{filter:brightness(1.07);}
.c3-langbar-x{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#EDF7EE;border-radius:8px;width:28px;height:28px;font-size:1.15rem;line-height:1;cursor:pointer;padding:0;}
.c3-langbar-x:hover{background:rgba(255,255,255,.22);}
body.has-langbar #topnav{top:46px;}
@media (max-width:560px){.c3-langbar{font-size:.82rem;padding:8px 12px;gap:8px;}.c3-langbar-msg{flex-basis:100%;text-align:center;}body.has-langbar #topnav{top:74px;}}

/* ============================================================
   Screen-reader-only language links: give crawlers a real internal
   <a href> path to every /LANG/ page (also declared in hreflang).
   Legit i18n alternates, not cloaking - visually hidden, keyboard/AT reachable.
   ============================================================ */
.c3-sr-langlinks{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}