/* ==========================================================================
   Accounting Arcade - public site stylesheet
   Brand tokens are LOCKED (David, 2026-08-01): Poppins / Montserrat,
   light blue palette. Do not switch to the dark test-harness theme.
   Mobile-first: the narrowest target is 375px (David's own iPhone).
   Students are tablet users, so 768-1024px portrait is an ORDINARY case.
   ========================================================================== */

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

:root {
    --font-heading: 'Poppins', system-ui, sans-serif;
    --font-body: 'Montserrat', system-ui, sans-serif;
    --bg-page: #F8FAFC;
    --text-heading: #0F172A;
    --text-body: #334155;
    --text-muted: #64748B;
    --accent-blue: #3B82F6;
    --accent-purple: #764ba2;
    --accent-pink: #f5576c;
    --accent-green: #10B981;
    --accent-amber: #D97706;
    --border-color: #E2E8F0;
    --section-padding: 72px 20px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-body);
    line-height: 1.65;
    overflow-x: hidden;
}

a { color: var(--accent-blue); }

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: box-shadow 0.3s;
}

.nav.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nav-logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nav-links { display: flex; gap: 26px; list-style: none; align-items: center; }

.nav-links a {
    color: var(--text-body);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover { color: var(--accent-blue); }
.nav-links a.current { color: var(--accent-blue); font-weight: 700; }

.nav-cta {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white !important;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600 !important;
}

.nav-cta:hover { opacity: 0.9; }

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-heading);
    margin: 6px 0;
    transition: all 0.3s;
}

/* ===== HERO ===== */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    padding: 120px 20px 64px;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero { animation: none; }
    html { scroll-behavior: auto; }
}

.hero.hero-compact { padding: 108px 20px 48px; }

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 820px;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 8px 18px;
    border-radius: 50px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
    letter-spacing: 0.4px;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 6vw, 3.6rem);
    font-weight: 800;
    color: white;
    line-height: 1.12;
    margin-bottom: 18px;
}

.hero p {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    max-width: 640px;
    margin: 0 auto 30px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    min-height: 48px;
    transition: all 0.2s;
}

.btn-primary { background: white; color: #764ba2; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0,0,0,0.2); }

.btn-outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.55); }
.btn-outline:hover { background: rgba(255,255,255,0.15); border-color: white; }

.btn-solid { background: var(--accent-blue); color: white; }
.btn-solid:hover { background: #2563EB; }

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 44px;
    margin-top: 44px;
    flex-wrap: wrap;
}

.hero-stat { text-align: center; color: white; }
.hero-stat-value { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; line-height: 1.1; }
.hero-stat-label { font-size: 12px; opacity: 0.85; text-transform: uppercase; letter-spacing: 1px; }

/* ===== SECTIONS ===== */
.section { padding: var(--section-padding); }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-narrow { max-width: 860px; margin: 0 auto; }
.section-white { background: white; }

.section-header { text-align: center; margin-bottom: 44px; }

.section-label {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 14px;
    line-height: 1.2;
}

.section-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 640px; margin: 0 auto; }
.section-header.left { text-align: left; }
.section-header.left .section-subtitle { margin-left: 0; }

h3.block-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 14px;
}

/* ===== HONEST STATUS PANEL ===== */
.status-panel {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
}

.status-panel h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-heading);
    margin-bottom: 14px;
}

.status-facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }

.status-fact {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 12px 14px;
    background: var(--bg-page);
    border-radius: 10px;
    border-left: 4px solid var(--accent-blue);
}

.status-fact-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--text-heading);
    min-width: 62px;
}

.status-fact-text { font-size: 14px; color: var(--text-body); }

.note-line {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color);
}

/* ===== STATUS BADGES ===== */
.badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.5;
}

.badge-playable { background: #D1FAE5; color: #065F46; }
.badge-qc       { background: #DBEAFE; color: #1E40AF; }
.badge-build    { background: #FEF3C7; color: #92400E; }
.badge-final    { background: #EDE9FE; color: #5B21B6; }

/* ===== CHAPTER GRID ===== */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.chapter-card {
    display: block;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s;
}

.chapter-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(59, 130, 246, 0.12);
}

.chapter-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.chapter-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 4px 11px;
    border-radius: 20px;
}

.chapter-card h3 {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    line-height: 1.3;
}

.chapter-card p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; }

.chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12.5px;
    color: var(--text-body);
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.chapter-meta strong { font-family: var(--font-heading); color: var(--text-heading); }

/* ===== GAME LIST (per-chapter page) ===== */
.game-list { display: grid; gap: 10px; }

.game-row {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 13px 16px;
}

.game-row-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    color: var(--text-muted);
}

.game-row-name { font-size: 15px; color: var(--text-heading); font-weight: 500; }
.game-row-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.game-row-status { text-align: right; }

.game-row.is-playable { border-color: var(--accent-green); background: #F0FDF4; }
.game-row.is-build { border-style: dashed; background: #FFFBEB; border-color: #FCD34D; }

.play-link {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-blue);
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    text-decoration: underline;
}

/* ===== OUTCOMES ===== */
.outcome-list { list-style: none; display: grid; gap: 11px; }

.outcome-list li {
    position: relative;
    padding: 12px 16px 12px 44px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-body);
}

.outcome-list li::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 19px;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--accent-green);
    border-bottom: 3px solid var(--accent-green);
    transform: rotate(-45deg);
}

/* ===== LEARNING OUTCOMES PAGE (outcomes.html) =====
   Reuses .outcome-list from the chapter pages so a tick looks the same
   everywhere; these only add the per-chapter wrapper around it. */
.outcome-list-wrap { display: grid; gap: 34px; }

.outcome-chapter {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 26px 26px 22px;
    scroll-margin-top: 90px;
}

.outcome-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.outcome-head h3 {
    font-size: 21px;
    margin: 0;
    line-height: 1.25;
}

.outcome-blurb {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.outcome-lead {
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 12px;
    color: var(--text-body);
}

.outcome-optional {
    margin: 20px 0 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent-green);
    background: var(--bg-tint, #f7f7fb);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-body);
}

.outcome-more { margin: 18px 0 0; font-size: 14px; }
.outcome-more a { font-weight: 700; }

@media (max-width: 600px) {
    .outcome-chapter { padding: 20px 18px 18px; }
    .outcome-head h3 { font-size: 19px; }
}

/* ===== DEMO GAME CARDS ===== */
.games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.game-card {
    background: var(--bg-page);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.game-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.12);
}

.game-card-header { padding: 22px 22px 14px; flex: 1; }

.game-card-number {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
}

.game-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

.game-card-title {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.game-card-topic { font-size: 14px; color: var(--text-muted); }

.game-card-actions { display: flex; border-top: 1px solid var(--border-color); }

.action-btn {
    flex: 1;
    padding: 15px 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    transition: all 0.2s;
}

.action-play { background: var(--accent-blue); color: white; border-bottom-left-radius: 14px; }
.action-play:hover { background: #2563EB; }
.action-exercises { background: var(--bg-page); color: var(--accent-purple); border-left: 1px solid var(--border-color); border-bottom-right-radius: 14px; }
.action-exercises:hover { background: #F1F0FF; }
.action-btn:only-child { border-bottom-right-radius: 14px; }

/* ===== MODE FAMILIES ===== */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }

.mode-card {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mode-shot {
    height: 128px;
    background:
        repeating-linear-gradient(45deg, #EEF2FF 0 12px, #E0E7FF 12px 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6366F1;
    text-align: center;
    padding: 10px;
    overflow: hidden;
}

/* A324: the box was built for a text placeholder ("NO SCREENSHOT YET") and its
   128px height plus 10px padding would letterbox a real screenshot into a strip.
   With an image inside, the box grows to a proper banner and the padding goes —
   a screenshot needs to reach the edges or it reads as a thumbnail someone
   forgot to size. `object-fit: cover` with a top anchor keeps the part that
   matters: these games put the question and the controls at the TOP, so a
   bottom crop loses nothing and a centred crop would cut the question in half. */
.mode-shot:has(img) {
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    background: #0F172A;
}
.mode-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.mode-body { padding: 20px 22px 22px; flex: 1; }

.mode-body h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.mode-body p { font-size: 14px; color: var(--text-body); margin-bottom: 14px; }

.mode-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.mode-tag {
    font-size: 11.5px;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 3px 9px;
    border-radius: 20px;
}

.mode-count {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-purple);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: block;
}

/* ===== SCHEDULE TABLE ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.schedule-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
}

.schedule-table th {
    background: #0F172A;
    color: white;
    font-family: var(--font-heading);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: left;
    padding: 12px 14px;
}

.schedule-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tbody tr:nth-child(even) { background: #FAFBFC; }
.schedule-table td a { font-weight: 600; text-decoration: none; }
.schedule-table td a:hover { text-decoration: underline; }
.schedule-table .col-when { font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); white-space: nowrap; }

/* ===== CALLOUT ===== */
.callout {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left: 5px solid var(--accent-amber);
    border-radius: 10px;
    padding: 18px 20px;
    font-size: 14.5px;
    color: #78350F;
}

.callout strong { font-family: var(--font-heading); }
.callout.calm { background: #F0F9FF; border-color: #BAE6FD; border-left-color: var(--accent-blue); color: #0C4A6E; }

/* ===== PROSE ===== */
.prose p { margin-bottom: 16px; font-size: 15.5px; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font-family: var(--font-heading); color: var(--text-heading); font-size: 1.2rem; margin: 26px 0 12px; }

/* ===== ABOUT ===== */
.about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; }

.credential-cards { display: grid; gap: 14px; }

.credential-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 20px;
}

.credential-icon { font-size: 22px; margin-bottom: 6px; }

.credential-card h4 {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--text-heading);
    margin-bottom: 6px;
}

.credential-card p { font-size: 13.5px; color: var(--text-muted); }

/* ===== FEATURE ROW ===== */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

.feature-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 22px;
}

.feature-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.feature-card p { font-size: 14px; color: var(--text-muted); }

/* ===== CONTACT ===== */
.contact-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; }
.contact-section .section-title, .contact-section .section-label { color: white; }
.contact-section .section-subtitle { color: rgba(255,255,255,0.9); }

.contact-box { max-width: 560px; margin: 0 auto; text-align: center; }

.email-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    color: white;
    text-decoration: none;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    padding: 18px 26px;
    margin: 8px 0 18px;
    word-break: break-word;
    transition: all 0.2s;
}

.email-link:hover { background: rgba(255,255,255,0.28); border-color: white; }

.contact-note { font-size: 14px; color: rgba(255,255,255,0.88); }

/* ⛔ A320 (David, 2026-08-13): DAVID'S EMAIL ADDRESS WAS INVISIBLE.
   `.contact-note` sits on the purple gradient (#667EEA -> #764BA2), but the <a>
   inside it inherited the global link blue #3B82F6. Measured in the live page:
       link vs the gradient's top    1.00 : 1   <- identical brightness. Not faint. GONE.
       link vs the gradient's bottom 1.73 : 1
       readable body text needs      4.50 : 1
   This is the FALLBACK CONTACT ROUTE on the one section whose whole job is letting a
   customer reach him, so it is a commercial defect, not a cosmetic one.
   White measures 6.37:1 where this note actually sits (the darker end of the
   gradient). The underline is deliberate: colour alone must never be the only thing
   marking a link. */
.contact-note a {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.contact-note a:hover { color: #FFFFFF; opacity: 0.85; }

/* ===== FOOTER ===== */
.footer { background: #0F172A; color: #94A3B8; padding: 40px 20px; text-align: center; }
.footer p { font-size: 14px; }
.footer a { color: #94A3B8; text-decoration: none; }
.footer p a[href^="mailto:"] { display: inline-block; padding: 10px 4px; text-decoration: underline; }
.footer a:hover { color: #CBD5E1; }
.footer .footer-links { margin-top: 12px; font-size: 12px; }
.footer .footer-links a { margin: 0 8px; display: inline-block; padding: 6px 0; }

/* ===== BREADCRUMB / PAGER ===== */
.crumb { font-size: 13px; color: rgba(255,255,255,0.9); margin-bottom: 14px; }
.crumb a { color: white; text-decoration: underline; }

.pager { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

.pager a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 18px;
    color: var(--text-heading);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
}

.pager a:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

/* ===== MODALS ===== */
.terms-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000; overflow-y: auto; padding: 40px 16px; }
.terms-modal.active { display: flex; justify-content: center; align-items: flex-start; }
.terms-modal-content { background: #fff; border-radius: 12px; max-width: 800px; width: 100%; padding: 36px 26px; position: relative; margin: auto; }
.terms-modal-content h2 { font-family: var(--font-heading); color: var(--text-heading); margin-bottom: 18px; font-size: 1.4rem; }
.terms-modal-content h3 { font-family: var(--font-heading); color: var(--text-heading); margin: 20px 0 10px; font-size: 16px; }
.terms-modal-content p, .terms-modal-content li { font-size: 14px; line-height: 1.7; color: var(--text-body); margin-bottom: 8px; }
.terms-modal-content ul { padding-left: 20px; }
.terms-modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 28px; cursor: pointer; color: #64748B; min-width: 44px; min-height: 44px; }

.game-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.9); display: none; flex-direction: column; touch-action: auto; overflow: hidden; }
.game-modal.active { display: flex; }
.game-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #1E293B; color: white; }
.game-modal-title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.game-modal-close { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: white; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 14px; min-height: 44px; white-space: nowrap; }
.game-modal-close:hover { background: rgba(255,255,255,0.2); }
.game-modal iframe { flex: 1; width: 100%; border: none; touch-action: auto; -webkit-overflow-scrolling: touch; }

/* ===== RESPONSIVE =====
   768px and below covers phones AND tablet portrait, which is the ordinary
   student device - not an edge case. */
@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 768px) {
    :root { --section-padding: 56px 18px; }

    .nav-links { display: none; }
    .hamburger { display: block; }

    .nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 64px;
        left: 0; right: 0;
        background: white;
        padding: 16px 20px 20px;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        gap: 4px;
    }

    .nav-links.open a { padding: 12px 0; display: block; font-size: 15px; }
    .nav-links.open .nav-cta { text-align: center; margin-top: 6px; }

    .hero-stats { gap: 26px; margin-top: 34px; }
    .hero-stat-value { font-size: 2rem; }
    .games-grid { grid-template-columns: 1fr; }
    .status-facts { gap: 10px; }
}

@media (max-width: 520px) {
    .game-row { grid-template-columns: 34px 1fr; row-gap: 8px; padding: 12px 14px; }
    .game-row-status { grid-column: 2; text-align: left; }
    .hero-stats { gap: 20px; }
    .hero-stat { min-width: 88px; }
    .chapter-grid { grid-template-columns: 1fr; }
    .mode-grid { grid-template-columns: 1fr; }
    .terms-modal-content { padding: 32px 18px; }
}


/* ---- CONTACT FORM (restored 2026-08-11) --------------------------------
   Recovered verbatim from the pre-rebuild site at commit 3a0069bb. It posts to
   David's existing Formspree endpoint. ⚠ NOT Netlify Forms: the saved markup
   was always Formspree, and that endpoint must still be live on his account for
   submissions to arrive. Inputs are 16px to stop iOS zooming on focus, and
   >=44px tall for A3 tap targets. */
.contact-form { max-width: 640px; margin: 0 auto; display: grid; gap: 16px; text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-weight: 700; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
    font-family: inherit; font-size: 16px; padding: 12px 14px; min-height: 44px;
    border: 2px solid rgba(0,0,0,0.18); border-radius: 10px; background: #fff; width: 100%;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: 3px solid rgba(0,0,0,0.35); outline-offset: 1px;
}
.btn-submit { min-height: 48px; font-size: 16px; cursor: pointer; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }


/* ---- ARCADE GAMEPLAY SHOTS (added 2026-08-12) ---------------------------
   Eight real gameplay recordings live in assets/gifs/. Each is an animated
   WebP, 195x380 - the shape of a phone screen, because that is what they were
   recorded on. They appear twice: a compact rail in the hero, and captioned
   cards in the "Try it free" section. Same files both times, so the second
   use costs nothing but a cache hit.

   Four rules this block exists to keep:

   1. NO LAYOUT SHIFT. Every shot sits in a box that already has its final
      size before one byte of image arrives - aspect-ratio here, plus explicit
      width/height attributes on the <img> in the HTML. The image fills the box
      at 100%/100%, so a slow or failed load moves nothing on the page.

   2. LAZY LOADING. loading="lazy" is on every <img> in the HTML.

   3. REDUCED MOTION. An animated WebP cannot be paused from CSS - there is no
      property for it. So the markup uses <picture> with
      <source media="(prefers-reduced-motion: reduce)"> pointing at a static
      *-poster.webp (one still frame taken from the middle of the animation,
      so it shows real play and not the title card). A browser that does not
      understand the media attribute falls back to the animated file, which is
      the behaviour we would have had anyway.

   4. THE PAGE NEVER SCROLLS SIDEWAYS. The hero rail scrolls inside itself
      (overflow-x on the rail, not the page). .hero already carries
      overflow:hidden, so the rail's bleed cannot reach the document.

   Sizes are driven by --shot-w so the two layouts stay in step. */

:root { --shot-w: 132px; }
@media (min-width: 560px)  { :root { --shot-w: 150px; } }
@media (min-width: 768px)  { :root { --shot-w: 168px; } }
@media (min-width: 1024px) { :root { --shot-w: 182px; } }

/* ---- hero rail ---- */

/* .hero is display:flex, so .hero-content is a flex item and carries the
   default min-width:auto - it refuses to shrink below the intrinsic width of
   its widest child. A rail holding eight fixed-width shots trips exactly that:
   the item locked to its own 820px max-width inside a 375px phone, and .hero's
   overflow:hidden then quietly CLIPPED the headline and both buttons. The page
   never scrolled sideways, so nothing looked wrong to a scroll test - it was
   only visible by measuring the box. Measured on a 375px viewport 2026-08-12:
   .hero-content was 820px wide with the rail present and 335px with it removed.
   min-width:0 restores normal flex shrinking. */
.hero-content { min-width: 0; width: 100%; }
.hero-strip, .hero-strip-rail { min-width: 0; }

.hero-strip { position: relative; z-index: 1; margin-top: 38px; }

.hero-strip-label {
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    margin-bottom: 12px;
}

.hero-strip-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    /* Bleed to the edge of the phone so a half-visible shot shows there is
       more to swipe. .hero clips the overflow, so the page stays put. */
    margin-inline: -20px;
    padding-inline: 20px;
}

.hero-strip-rail::-webkit-scrollbar { height: 6px; }
.hero-strip-rail::-webkit-scrollbar-track { background: rgba(255,255,255,0.18); border-radius: 99px; }
.hero-strip-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.6); border-radius: 99px; }

.hero-shot {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: var(--shot-w);
    aspect-ratio: 195 / 380;
    border-radius: 13px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

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

/* ---- captioned cards ---- */
.arcade-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px)  { .arcade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 830px = four 195px shots plus three 16px gaps. The recordings are only 195px
   wide, so a wider grid would upscale them and make the gameplay look soft.
   Downscaling on narrower screens is fine; upscaling is not. */
@media (min-width: 768px)  { .arcade-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 830px; margin: 0 auto; } }

.arcade-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.arcade-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); }

.arcade-card-shot {
    display: block;
    width: 100%;
    aspect-ratio: 195 / 380;
    background: #0F172A;
    overflow: hidden;
}
.arcade-card-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.arcade-card-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 14px; flex: 1; }
.arcade-chapter {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--accent-blue);
}
.arcade-name {
    font-family: var(--font-heading); font-size: 14px; font-weight: 700;
    color: var(--text-heading); line-height: 1.25;
}
.arcade-what { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

.arcade-cta { text-align: center; margin-top: 30px; }
.arcade-cta .btn { min-width: 240px; }

/* On a 375x812 phone the hero stack (badge + four-line headline + six-line
   paragraph + two stacked buttons) pushed the rail so far down that only 41px
   of a 257px shot sat above the fold - a sliver, not "gameplay on landing".
   These trims are phone-only and hero-only, and they buy back 72px, which puts
   about 113px of moving gameplay above the fold. Measured, not guessed.
   ⚠ They deliberately do NOT reorder anything: the headline still comes first
   and BOTH hero buttons stay above the fold. Showing a whole shot would mean
   moving the rail above the paragraph and pushing "Try a game now" under the
   fold - that is David's call, not mine. Note .hero.hero-compact keeps its own
   padding (higher specificity), so the other pages are untouched. */
@media (max-width: 768px) {
    /* :not(.hero-compact) confines every trim below to the landing hero. The
       other sixteen pages that share this stylesheet (curriculum, modes and the
       fourteen chapter pages) all carry .hero-compact, so their spacing is
       untouched - they have no rail and no reason to be re-tuned. */
    .hero:not(.hero-compact) { padding-top: 92px; }
    .hero:not(.hero-compact) .hero-badge { margin-bottom: 14px; }
    .hero:not(.hero-compact) h1 { margin-bottom: 12px; }
    .hero:not(.hero-compact) p { margin-bottom: 20px; }
    .hero-strip { margin-top: 22px; }
    .hero-strip-label { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-strip-rail { scroll-snap-type: none; }
    .arcade-card, .arcade-card:hover { transition: none; transform: none; }
}