/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — One-Hand Friendly Native App Experience

   Gen-Z Mobile Design DNA:
   ┌─────────────────────────────────────────────┐
   │  ⓵ Bottom tab bar — thumb zone navigation   │
   │  ⓶ Auto-hiding top bar — content is king    │
   │  ⓷ Haptic tap feedback — physical press feel │
   │  ⓸ OLED true black — deeper, premium        │
   │  ⓹ Horizontal swipe carousels               │
   │  ⓺ Bottom-sheet modals                      │
   │  ⓻ Scroll-driven entrance animations        │
   │  ⓼ Spring transitions (0.16,1,0.3,1)        │
   │  ⓽ 48px minimum touch targets               │
   │  ⓾ Safe-area aware                          │
   └─────────────────────────────────────────────┘

   iPad layout has some touch target & grid optimizations (768px - 1024px).
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   0. GLOBAL FOUNDATION (always active)
   ══════════════════════════════════════════════════════════ */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ── Hamburger — hidden on desktop ───────────────────────── */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 200;
    position: relative;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--white);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
}

.nav-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Desktop: hide mobile-only elements ──────────────────── */
.nav-mobile-overlay { display: none; }
.bottom-bar { display: none; }


/* ══════════════════════════════════════════════════════════
   1. ULTRA-WIDE MONITORS (2560px+)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
    .loading-screen-logo { font-size: clamp(2.6rem, 3vw + 0.5rem, 4.5rem); }
    .loading-screen-bar-track { width: clamp(320px, 28vw, 520px); }
    .loading-screen-status { font-size: clamp(0.65rem, 0.4rem + 0.2vw, 1rem); }
    ::-webkit-scrollbar { width: 8px; }
}

@media (min-width: 3840px) {
    ::-webkit-scrollbar { width: 10px; }
}


/* ══════════════════════════════════════════════════════════
   2. HIGH-DPI / RETINA
   ══════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .stat-track {
        transform: scaleY(0.5);
        transform-origin: top;
    }
    .card-indicator {
        height: 1px;
    }
}


/* ══════════════════════════════════════════════════════════

   ███╗   ███╗  ██████╗  ██████╗  ██╗ ██╗      ███████╗
   ████╗ ████║ ██╔═══██╗ ██╔══██╗ ██║ ██║      ██╔════╝
   ██╔████╔██║ ██║   ██║ ██████╔╝ ██║ ██║      █████╗
   ██║╚██╔╝██║ ██║   ██║ ██╔══██╗ ██║ ██║      ██╔══╝
   ██║ ╚═╝ ██║ ╚██████╔╝ ██████╔╝ ██║ ███████╗ ███████╗
   ╚═╝     ╚═╝  ╚═════╝  ╚═════╝  ╚═╝ ╚══════╝ ╚══════╝

   ONE-HAND NATIVE APP — ≤767px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {


/* ──────────────────────────────────────────────────────────
   M.0  VIEWPORT LOCK + OLED BLACK
   ────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    background: #000;
}

body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* Space for the fixed bottom tab bar */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
    background: #000;
}


/* ──────────────────────────────────────────────────────────
   M.1  TOP BAR — slim, auto-hiding on scroll
   ────────────────────────────────────────────────────────── */
.site-nav {
    padding-top: env(safe-area-inset-top, 0px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.site-nav.nav-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.nav-inner {
    height: 48px;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    gap: 0;
}

.nav-brand .nav-logo {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
}

/* Hide desktop-only nav elements */
.nav-links,
.nav-status {
    display: none !important;
}

/* Keep nav-actions for Donate button, but hide the Play PC button */
.nav-actions {
    display: flex;
    gap: 8px;
}
.nav-actions .nav-cta {
    display: none !important;
}

/* Hide hamburger — bottom bar is the primary mobile nav */
.nav-hamburger {
    display: none !important;
}


/* ──────────────────────────────────────────────────────────
   M.2  BOTTOM TAB BAR — the one-hand navigation hub
   ────────────────────────────────────────────────────────── */
.bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: center;
    justify-content: space-around;
    /* Frosted glass */
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(40px) saturate(140%);
    -webkit-backdrop-filter: blur(40px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    /* Smooth entrance */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
}

.bottom-bar.bar-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* Individual tab */
.btab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-height: 48px;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.btab svg {
    width: 20px;
    height: 20px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btab span {
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: 0.42rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Active tab */
.btab.active {
    color: rgba(255, 255, 255, 0.95);
}

.btab.active svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px rgba(241, 201, 139, 0.3));
}

/* CTA tab — accent pill */
.btab--cta {
    color: var(--thruster, #f1c98b);
    position: relative;
}

.btab--cta::before {
    content: '';
    position: absolute;
    inset: 6px 4px;
    border-radius: 14px;
    background: rgba(241, 201, 139, 0.08);
    border: 1px solid rgba(241, 201, 139, 0.12);
    z-index: -1;
    transition: background 0.2s ease;
}

/* Haptic tap on tabs */
.btab:active {
    transform: scale(0.88);
}

.btab--cta:active::before {
    background: rgba(241, 201, 139, 0.15);
}


/* ──────────────────────────────────────────────────────────
   M.3  MOBILE NAV OVERLAY (hamburger fallback)
   ────────────────────────────────────────────────────────── */
.nav-mobile-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 150;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(48px) saturate(130%);
    -webkit-backdrop-filter: blur(48px) saturate(130%);
    padding: env(safe-area-inset-top, 24px) 24px env(safe-area-inset-bottom, 24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
}

.nav-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

.nav-mobile-logo {
    font-family: var(--font-raj);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--white) 30%, var(--thruster) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.2rem;
}

.nav-mobile-label {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.15);
    margin-bottom: 0.6rem;
}

.nav-mobile-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 280px;
}

.nav-mobile-overlay .nav-link {
    font-family: var(--font-raj);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 16px 24px;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 14px;
    transition: color 0.2s ease, background 0.2s ease;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-mobile-overlay .nav-link:active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    transform: scale(0.97);
}

.nav-mobile-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 1.2rem;
    width: 100%;
    max-width: 280px;
}

.nav-mobile-overlay .nav-cta {
    width: 100%;
    justify-content: center;
    font-size: 0.58rem !important;
    padding: 15px 20px !important;
    border-radius: 14px !important;
    min-height: 48px;
}

.nav-mobile-overlay .btn-donate--mobile {
    font-size: 0.6rem;
    padding: 13px 20px;
    border-radius: 14px;
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.nav-mobile-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.15);
}

.nav-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}

/* Staggered entrance */
.nav-mobile-overlay .nav-mobile-logo,
.nav-mobile-overlay .nav-mobile-label,
.nav-mobile-overlay .nav-mobile-links,
.nav-mobile-overlay .nav-mobile-actions,
.nav-mobile-overlay .nav-mobile-status {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-mobile-overlay.open .nav-mobile-logo    { opacity: 1; transform: none; transition-delay: 0.05s; }
.nav-mobile-overlay.open .nav-mobile-label   { opacity: 1; transform: none; transition-delay: 0.09s; }
.nav-mobile-overlay.open .nav-mobile-links   { opacity: 1; transform: none; transition-delay: 0.14s; }
.nav-mobile-overlay.open .nav-mobile-actions { opacity: 1; transform: none; transition-delay: 0.20s; }
.nav-mobile-overlay.open .nav-mobile-status  { opacity: 1; transform: none; transition-delay: 0.26s; }


/* ──────────────────────────────────────────────────────────
   M.4  LAYOUT TOKENS — tight mobile density
   ────────────────────────────────────────────────────────── */
.section-padded {
    padding: clamp(2rem, 6vh, 4rem) 16px;
}

.max-w {
    padding-left: 16px;
    padding-right: 16px;
}

.border-top::before {
    margin-left: 16px;
    margin-right: 16px;
}


/* ──────────────────────────────────────────────────────────
   M.5  HERO — immersive full-screen launch
   ────────────────────────────────────────────────────────── */
.hero {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-align: start;
    background: #000;
}

.hero-content {
    padding-top: calc(100dvh * 0.30);
    padding-bottom: var(--s-34);
    padding-left: 20px;
    padding-right: 20px;
}

.hero-headline {
    font-size: clamp(1.9rem, 8.5vw, 3rem);
    margin-bottom: var(--s-13);
    line-height: 1.05;
}

.hero-body {
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: var(--s-34);
    max-width: 30ch;
    color: var(--steel-gray);
}

.hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.btn-trailer {
    padding: 14px 24px 14px 14px;
    gap: 10px;
    border-radius: 16px;
}

.btn-trailer-icon {
    width: 34px;
    height: 34px;
    font-size: 0.6rem;
}

.btn-trailer-label {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
}

.scroll-indicator {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
}


/* ──────────────────────────────────────────────────────────
   M.6  PHILOSOPHY — stacked card layout
   ────────────────────────────────────────────────────────── */
.philosophy {
    scroll-snap-align: start;
}

.phil-grid {
    gap: var(--s-21);
}

.phil-col {
    grid-column: span 12;
}

.phil-col--offset {
    margin-top: 0;
}

.phil-diagram {
    height: clamp(130px, 30vw, 190px);
    border-radius: 16px !important;
}

.phil-text h3 {
    font-size: clamp(0.95rem, 3.8vw, 1.2rem);
    margin-bottom: 6px;
}

.phil-text p {
    font-size: 0.8rem;
    line-height: 1.65;
}


/* ──────────────────────────────────────────────────────────
   M.7  TANK SHOWCASE — immersive 3D + bottom sheet
   ────────────────────────────────────────────────────────── */
.showcase {
    height: auto;
    min-height: auto;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #000;
    touch-action: pan-y;  /* let vertical scroll through; JS handles horizontal orbit */
}

.showcase-canvas {
    position: relative;
    width: 100%;
    height: 55vh;
    height: 55dvh;
    min-height: 300px;
    border-radius: 0 !important;
    flex-shrink: 0;
}

.showcase-canvas::after {
    border-radius: 0 !important;
}

/* Hide desktop decorations and purely desktop tooling */
.showcase-fade       { display: none; }
.showcase-ghost-name { display: none !important; }
.hud-corner          { display: none; }
.inspector-btn       { display: none !important; }
.inspector-panel     { display: none !important; }

/* Overlay — flows below canvas */
.showcase-overlay {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 20px;
    gap: 12px;
}

.showcase-top { margin-bottom: 4px; }

.showcase-top h2 {
    font-size: clamp(1.05rem, 4.5vw, 1.5rem);
}

/* Stats card — full-width bottom sheet style */
.showcase-stats {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 8px;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-top-accent { border-radius: 16px 16px 0 0; }
.stats-identity { padding: 14px 16px 0 !important; }
.stats-class-badge { font-size: 0.42rem; }
.stats-hull-name { font-size: clamp(1.05rem, 4.2vw, 1.4rem) !important; }
.stats-tagline { font-size: 0.7rem; }
.stats-divider { margin: 8px 16px; }
.detail-desc { padding: 0 16px !important; font-size: 0.78rem; line-height: 1.6; margin-bottom: 10px; }
.stat-list { padding: 0 16px 14px !important; }
.stat-row { margin-bottom: 6px; }
.stat-label-text { font-size: 0.58rem; }
.stat-val { font-size: 0.55rem; }

/* Tank selector — horizontal swipe carousel */
.showcase-bottom {
    padding-bottom: 0;
}

.class-selector {
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.class-selector::-webkit-scrollbar { display: none; }

.class-card {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    min-height: 52px;
    border-radius: 12px;
    gap: 2px;
    scroll-snap-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.class-card.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(241, 201, 139, 0.15);
}

.card-type { font-size: 0.38rem !important; letter-spacing: 0.15em; }
.card-name { font-size: clamp(0.58rem, 2.2vw, 0.75rem) !important; }


/* ──────────────────────────────────────────────────────────
   M.8  AMMO — horizontal tab pills + detail card
   ────────────────────────────────────────────────────────── */
.ammo {
    scroll-snap-align: start;
}

.ammo-layout {
    flex-direction: column;
    gap: var(--s-13);
}

.ammo-left,
.ammo-right {
    width: 100%;
}

.ammo .section-label h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
}

/* Horizontal scrollable pill tabs */
.ammo-list {
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 10px;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px;
}

.ammo-list::-webkit-scrollbar { display: none; }

.ammo-tab {
    border-left: none !important;
    border-bottom: 2px solid transparent;
    flex: 1;
    justify-content: center;
    text-align: center;
    padding: 14px 6px !important;
    min-height: 48px;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    scroll-snap-align: center;
}

.ammo-tab.active {
    border-left: none !important;
    border-bottom-color: var(--thruster);
    background: rgba(241, 201, 139, 0.05);
}

.ammo-tab:hover { border-left-color: transparent !important; }
.ammo-dot { display: none; }
.ammo-id { font-size: 0.55rem; }

.ammo-right {
    padding: 20px 16px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ammo-bg-label {
    font-size: clamp(2.5rem, 12vw, 4.5rem) !important;
    top: -8px !important;
    right: 8px !important;
}

.ammo-detail h3 { font-size: clamp(1rem, 4.2vw, 1.3rem); }
.ammo-velocity { font-size: 0.65rem; margin-bottom: 6px; }
.ammo-desc-text { font-size: 0.8rem; line-height: 1.65; }

.ammo-vis { max-height: 180px; margin-top: 12px; }
.ammo-anim { height: 160px; }


/* ──────────────────────────────────────────────────────────
   M.9  GAME MODES — horizontal peek-scroll carousel
   ────────────────────────────────────────────────────────── */
.modes {
    scroll-snap-align: start;
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

.modes .section-label h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
}

.modes-subtitle {
    font-size: 0.78rem;
    max-width: 34ch;
    line-height: 1.6;
}

/* Horizontal scrollable card feed */
.modes-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modes-col {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.modes-col::-webkit-scrollbar { display: none; }

.mode-card {
    border-radius: 18px !important;
    overflow: hidden;
    scroll-snap-align: center;
    contain: layout style paint;
}

/* Hero card stays full width */
.mode-card--hero {
    min-height: 240px;
    width: 100%;
    flex-shrink: 0;
}

/* Small cards — side-by-side swipe in the modes-col */
.mode-card--sm {
    min-height: 200px;
    min-width: 82vw;
    flex-shrink: 0;
}

.mode-card--wide {
    min-height: auto;
    width: 100%;
}

.mode-card-inner {
    padding: clamp(14px, 3vw, 24px) clamp(16px, 4vw, 28px);
}

.mode-badge { font-size: 0.48rem; padding: 4px 10px; }
.mode-format { font-size: clamp(0.7rem, 2.5vw, 0.9rem); }

.mode-title {
    font-size: clamp(0.95rem, 3.8vw, 1.4rem) !important;
    margin-bottom: 6px;
}

.mode-desc {
    font-size: 0.72rem !important;
    line-height: 1.55;
    max-width: 100%;
}

.mode-ghost-count { font-size: clamp(3rem, 14vw, 5.5rem); }
.mode-card--sm .mode-ghost-count { font-size: clamp(2.5rem, 10vw, 4rem); }

.mode-tag {
    font-size: 0.45rem !important;
    padding: 3px 8px !important;
    border-radius: 6px;
}

.mode-tags { gap: 5px; }

/* FFA wide card — stack */
.mode-wide-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    padding: 20px 18px !important;
}

.mode-wide-left { width: 100%; }
.mode-wide-right { align-items: flex-start; width: 100%; }
.mode-wide-right .mode-tags { justify-content: flex-start; }
.mode-wide-format { font-size: 1.2rem; margin-bottom: 4px; }

.mode-anim { opacity: 0.5; }


/* ──────────────────────────────────────────────────────────
   M.10  FOOTER — compact single-column
   ────────────────────────────────────────────────────────── */
.footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #000;
}

.footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
    padding: 2rem 0 1.5rem;
}

.footer-brand {
    grid-column: span 2;
    text-align: center;
    align-items: center;
    padding-right: 0;
}

.footer-logo { font-size: clamp(1.2rem, 4vw, 1.6rem); }
.footer-tagline { font-size: 0.72rem; text-align: center; }
.footer-socials { justify-content: center; gap: 10px; }

.footer-social {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.footer-col { align-items: flex-start; text-align: left; }
.footer-col-title { font-size: 0.55rem; margin-bottom: 0.75rem; }
.footer-nav { align-items: flex-start; }

.footer-nav a {
    padding: 6px 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
}

.footer-status { align-items: flex-start; }

.footer-col:last-child {
    grid-column: span 2;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
}
.footer-col:last-child .footer-status { align-items: center; }

.footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    text-align: center;
    /* Extra padding so content clears the bottom tab bar */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
}

.footer-bottom-links {
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.footer-bottom-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
}


/* ──────────────────────────────────────────────────────────
   M.11  DONATE MODAL — bottom sheet (slides from bottom)
   ────────────────────────────────────────────────────────── */
.donate-overlay {
    align-items: flex-end !important;
    padding-bottom: 0 !important;
}

.donate-modal {
    width: 100vw;
    max-width: 100vw;
    padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    border-radius: 22px 22px 0 0;
    margin: 0;
    /* Slide from bottom animation */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.donate-overlay.active .donate-modal {
    transform: translateY(0);
}

/* Drag handle indicator at top of bottom sheet */
.donate-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 auto 14px;
}

.donate-title { font-size: clamp(0.8rem, 3vw, 1rem); }
.donate-presets { gap: 6px; }

.donate-preset {
    padding: 12px 0;
    font-size: 0.58rem;
    min-height: 48px;
    border-radius: 14px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donate-input-row { border-radius: 14px !important; min-height: 48px; }
.donate-input { font-size: 1rem; }

.donate-generate {
    min-height: 48px;
    border-radius: 14px !important;
    font-size: 0.62rem;
}

.donate-close { width: 48px; height: 48px; }
.donate-back { min-height: 48px; }


/* ──────────────────────────────────────────────────────────
   M.12  TRAILER OVERLAY
   ────────────────────────────────────────────────────────── */
.trailer-close {
    width: 48px;
    height: 48px;
    top: env(safe-area-inset-top, 12px);
    right: 12px;
}

.trailer-player {
    border-radius: 0;
    width: 100vw;
    max-width: 100vw;
}

.trailer-player video { border-radius: 0; }


/* ──────────────────────────────────────────────────────────
   M.13  HAPTIC TAP FEEDBACK — physical press feel
   Every interactive element gets a micro scale-down on :active
   ────────────────────────────────────────────────────────── */
.btn-trailer:active,
.nav-cta:active,
.donate-preset:active,
.donate-generate:active,
.btn-donate:active {
    transform: scale(0.95);
    transition: transform 0.08s ease;
}

.class-card:active {
    transform: scale(0.93);
    transition: transform 0.08s ease;
}

.ammo-tab:active {
    transform: scale(0.93);
    transition: transform 0.08s ease;
}

.mode-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

.footer-social:active {
    transform: scale(0.88);
    transition: transform 0.08s ease;
}

.footer-nav a:active {
    color: var(--white);
    transition: color 0.1s ease;
}


/* ──────────────────────────────────────────────────────────
   M.14  KILL HOVER STATES — they get stuck on touch
   ────────────────────────────────────────────────────────── */
.mode-card:hover,
.phil-diagram:hover,
.class-card:hover {
    transform: none;
}

.class-card:hover         { background: transparent; }
.class-card.active:hover  { background: rgba(255, 255, 255, 0.08); }
.showcase:hover .hud-corner { animation: none; }


/* ──────────────────────────────────────────────────────────
   M.15  TOUCH TARGET ENFORCEMENT
   ────────────────────────────────────────────────────────── */
.ammo-tab,
.class-card { min-height: 48px; }

.mode-card,
.class-card,
.ammo-tab { cursor: default; }


/* ──────────────────────────────────────────────────────────
   M.16  LOADING SCREEN — compact
   ────────────────────────────────────────────────────────── */
.loading-screen-logo {
    font-size: clamp(1.1rem, 4.5vw, 1.7rem);
}

.loading-screen-bar-track {
    width: clamp(180px, 55vw, 280px);
}

.loading-screen {
    background: #000;
}


/* ──────────────────────────────────────────────────────────
   M.17  SCROLL-DRIVEN ENTRANCE ANIMATIONS (progressive)
   Modern browsers only — graceful fallback to instant reveal
   ────────────────────────────────────────────────────────── */
@supports (animation-timeline: scroll()) {
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(32px); }
        to   { opacity: 1; transform: none; }
    }

    .reveal-on-scroll {
        animation: slideUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}


/* ──  End ≤767px ─────────────────────────────────────────── */
}


/* ══════════════════════════════════════════════════════════
   TABLET / iPAD (768px–1024px) — desktop layout, tighter fit
   Uses desktop layout but with proportional spacing for
   smaller screens. No bottom bar, no mobile nav.
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
    .section-padded {
        padding-left: 24px;
        padding-right: 24px;
    }

    .max-w {
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-content {
        padding-left: clamp(24px, 5vw, 60px);
        padding-right: clamp(24px, 5vw, 60px);
    }

    .nav-inner {
        padding: 0 24px;
    }
    
    .nav-link {
        padding: 10px 12px;
    }

    .hero-headline {
        font-size: clamp(2.2rem, 5vw, 3.5rem);
    }

    .hero-body {
        max-width: 38ch;
    }

    /* Showcase — slightly shorter to suit tablet viewport */
    .showcase {
        height: 85vh;
    }

    /* Philosophy — 2 columns instead of 3, better readability */
    .phil-col {
        grid-column: span 6;
    }

    /* Mode cards — consistent padding */
    .mode-card-inner {
        padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 32px);
    }

    /* Footer — narrower grid */
    .footer-grid {
        gap: 2rem;
    }

    .footer-brand {
        padding-right: 1rem;
    }
}


/* ══════════════════════════════════════════════════════════
   SMALL PHONES (≤400px) — extra-tight density
   ══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    .hero-headline {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .hero-body { font-size: 0.8rem; }

    .hero-content {
        padding-top: calc(100dvh * 0.24);
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-padded {
        padding-left: 14px;
        padding-right: 14px;
    }

    .max-w {
        padding-left: 14px;
        padding-right: 14px;
    }

    .showcase-overlay { padding: 14px 14px 18px; }
    .card-name { font-size: 0.52rem !important; }
    .card-type { font-size: 0.35rem !important; }

    .class-card {
        padding: 10px 4px;
        min-width: 70px;
    }

    .mode-card--hero { min-height: 200px; }
    .mode-card--sm   { min-height: 160px; min-width: 78vw; }
    .mode-card--wide { min-height: auto; }

    .ammo-right { padding: 16px 14px !important; }
    .ammo-tab   { padding: 12px 4px !important; }
    .ammo-id    { font-size: 0.5rem; }

    .btn-trailer {
        padding: 12px 18px 12px 10px;
        gap: 8px;
    }

    .btn-trailer-icon { width: 28px; height: 28px; }

    .nav-mobile-overlay .nav-link {
        font-size: 0.95rem;
        padding: 12px 20px;
    }

    .nav-mobile-overlay { gap: 0.5rem; }

    .footer-grid { gap: 1.4rem; padding: 1.5rem 0 1rem; }
    .mode-card-inner { padding: 12px 14px; }
    .mode-desc { font-size: 0.68rem !important; }
    .mode-wide-inner { padding: 16px 14px !important; }

    /* Bottom bar tighter on tiny phones */
    .btab span { font-size: 0.38rem; }
    .btab svg  { width: 18px; height: 18px; }
}


/* ══════════════════════════════════════════════════════════
   LANDSCAPE MOBILE — short viewports
   ══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 100dvh;
    }

    .hero-content {
        padding-top: calc(var(--nav-h) + 16px);
        padding-bottom: 16px;
    }

    .hero-body { margin-bottom: var(--s-13); }
    .scroll-indicator { display: none; }

    .showcase {
        height: auto;
        min-height: auto;
    }

    .showcase-canvas {
        height: 70vh;
        min-height: 240px;
    }

    .showcase-overlay { position: relative; }

    /* Bottom bar — slim in landscape */
    .bottom-bar { height: calc(44px + env(safe-area-inset-bottom, 0px)); }
    .btab svg   { width: 18px; height: 18px; }
    .btab span  { display: none; }
}


/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
    .site-nav,
    .bottom-bar,
    .scroll-indicator,
    #starfield,
    .global-tint,
    .loading-screen,
    .showcase-canvas,
    .mode-anim,
    .hud-corner,
    .showcase-ghost-name,
    .inspector-btn,
    .inspector-panel {
        display: none !important;
    }

    body {
        background: #fff;
        color: #111;
        padding-bottom: 0;
    }

    h1, h2, h3, h4 { color: #111; }
    .muted { color: #666; }
    .eyebrow { color: #333; }
    .max-w { max-width: 100%; padding: 0 1rem; }
}