/* Phone remaster, including landscape and touch tablets. Desktop is unchanged.
   Loaded after the legacy stylesheet so page-specific desktop rules stay intact. */
@media screen and (max-width: 820px), screen and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  body[class] {
    --mobile-bg: #090b0f;
    --phone-image-dashboard-title-command-bg: url("assets/mobile/dashboard-title-command-bg.webp");
    --phone-image-dashboard-programs-command-bg: url("assets/mobile/dashboard-programs-command-bg.webp");
    --phone-image-events-card-cs2: url("assets/mobile/events-card-cs2.webp");
    --phone-image-events-card-rocket: url("assets/mobile/events-card-rocket.webp");
    --phone-image-events-card-valorant: url("assets/mobile/events-card-valorant.webp");
    --phone-image-events-community-night: url("assets/mobile/events-community-night.webp");
    --phone-image-events-hero-control-room: url("assets/mobile/events-hero-control-room.webp");
    --phone-image-join-zone-tactical-bg: url("assets/mobile/join-zone-tactical-bg.webp");
    --phone-image-zone-media-newspaper-bg: url("assets/mobile/zone-media-newspaper-bg.webp");
    --phone-image-zone-tactical-world-map: url("assets/mobile/zone-tactical-world-map.webp");
    --mobile-panel: #12151b;
    --mobile-text: #f5f6f8;
    --mobile-muted: #b8beca;
    --mobile-line: #2a2f38;
    --mobile-accent: #ff766e;
    --page-gutter: 40px;
    --section-y: 48px;
    --mobile-left: max(20px, env(safe-area-inset-left, 0px));
    --mobile-right: max(20px, env(safe-area-inset-right, 0px));
    background-color: var(--mobile-bg);
  }

  body[class].zone-light-mode {
    --mobile-bg: #f6f3ee;
    --mobile-panel: #fffdf9;
    --mobile-text: #201d1b;
    --mobile-muted: #57514d;
    --mobile-line: #d9d2c9;
    --mobile-accent: #a72720;
  }

  html { scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body[class] .container { width: calc(100% - var(--mobile-left) - var(--mobile-right)); }
  body[class] main.page-shell { overflow-wrap: anywhere; }
  body[class] main.page-shell [id] { scroll-margin-top: 16px; }
  body[class] main.page-shell :is(h1, h2, h3) { text-wrap: pretty; }
  body[class] main.page-shell h1 {
    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }
  body[class] main.page-shell h2 {
    font-size: clamp(25px, 6.6vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
  }
  body[class] main.page-shell h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }
  body[class] main.page-shell p:not([class*="kicker"]):not(.events-red-label) {
    font-size: 15px;
    line-height: 1.7;
  }
  body[class] main.page-shell .section-kicker,
  body[class] main.page-shell .events-red-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    margin-bottom: 16px;
  }
  body[class] .button {
    min-height: 50px !important;
    padding: 13px 16px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    letter-spacing: 0.045em !important;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
  }
  body[class] :is(a, button, input, summary, label) { -webkit-tap-highlight-color: #ff766e33; }
  body[class] :is(a, button, input, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mobile-accent) !important;
    outline-offset: 4px;
  }

  /* Shared, thumb-sized navigation. The disclosure remains keyboard accessible. */
  body[class] .site-header {
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--mobile-bg) !important;
    border-bottom: 1px solid var(--mobile-line) !important;
    box-shadow: 0 5px 24px #00000018 !important;
    backdrop-filter: none;
  }
  body[class] .site-header .nav-wrap {
    min-height: 72px !important;
    width: calc(100% - max(16px, env(safe-area-inset-left, 0px)) - max(16px, env(safe-area-inset-right, 0px))) !important;
    gap: 12px;
  }
  body[class] .site-header .brand { gap: 10px; min-height: 48px; }
  body[class] .site-header .brand img { width: 44px; height: 44px; object-fit: contain; }
  body[class] .site-header .brand strong { color: var(--mobile-text) !important; font-size: 17px; }
  body[class] .site-header .brand small { color: var(--mobile-muted) !important; font-size: 8px; letter-spacing: 0.1em; }
  body[class] .site-header .nav-toggle {
    display: inline-flex !important;
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 12px;
    background: var(--mobile-panel) !important;
  }
  body[class] .site-header .nav-toggle span {
    position: absolute;
    left: 13px;
    top: 22px;
    width: 20px;
    height: 2px;
    margin: 0;
    background: var(--mobile-text) !important;
    transform: none;
  }
  body[class] .site-header .nav-toggle span:first-child { transform: translateY(-6px); }
  body[class] .site-header .nav-toggle span:last-child { transform: translateY(6px); }
  body[class] .site-header .nav-toggle.open span:first-child { transform: rotate(45deg); }
  body[class] .site-header .nav-toggle.open span:nth-child(2) { opacity: 0; }
  body[class] .site-header .nav-toggle.open span:last-child { transform: rotate(-45deg); }
  body[class] .site-header .site-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    inset: calc(100% + 8px) 0 auto !important;
    width: auto !important;
    max-height: calc(100vh - 100px);
    max-height: calc(var(--mobile-viewport-height, 100dvh) - 100px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    padding: 12px;
    gap: 6px;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 16px;
    background: var(--mobile-panel) !important;
    box-shadow: 0 20px 64px #00000070 !important;
    overscroll-behavior: contain;
  }
  body[class] .site-header .site-nav.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  body[class] .site-header .site-nav a {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--mobile-text) !important;
    font-size: 13px;
    letter-spacing: 0.06em;
    background: transparent;
  }
  body[class] .site-header .site-nav a::after { display: none; }
  body[class] .site-header .site-nav a[aria-current="page"] {
    border-color: var(--mobile-line);
    background: var(--mobile-bg) !important;
    box-shadow: inset 3px 0 var(--mobile-accent) !important;
  }
  body[class] .site-header .site-nav .nav-cta {
    margin: 6px 0 0;
    color: #fff !important;
    background: #c7211d !important;
  }
  body[class] .site-header .theme-switch {
    min-height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 0;
    padding: 6px 12px;
    border-top: 1px solid var(--mobile-line);
  }
  body[class] .site-header .theme-switch::before {
    content: "Day / night mode";
    color: var(--mobile-muted);
    font: 500 13px/1.4 Arial, sans-serif;
  }
  body[class].zone-light-mode .site-header,
  body[class].zone-light-mode .site-header .site-nav {
    background: var(--mobile-panel) !important;
    border-color: var(--mobile-line) !important;
  }
  body[class].zone-light-mode .site-header { box-shadow: 0 5px 24px #00000018 !important; }
  body[class].zone-light-mode .site-header .brand strong,
  body[class].zone-light-mode .site-header .site-nav a {
    color: var(--mobile-text) !important;
  }
  body[class].zone-light-mode .site-header .brand small { color: var(--mobile-muted) !important; }
  body[class].zone-light-mode .site-header .site-nav a[aria-current="page"]:not(.nav-cta) {
    color: var(--mobile-text) !important;
    background: var(--mobile-bg) !important;
    border-color: var(--mobile-line) !important;
  }
  body[class].zone-light-mode .site-header .site-nav .nav-cta { color: #fff !important; background: #c7211d !important; }

  /* The homepage reads as a welcome screen; the interactive map has its own space. */
  body[class].page-body-dashboard .page-dashboard #home {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 0 24px !important;
    background: var(--mobile-bg) !important;
    overscroll-behavior: auto;
  }
  body[class].page-body-dashboard .page-dashboard #home::before,
  body[class].page-body-dashboard .page-dashboard #home::after { display: none !important; }
  body[class].page-body-dashboard .page-dashboard #home .hero-grid {
    order: 0;
    width: calc(100% - var(--mobile-left) - var(--mobile-right)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 36px 0 24px !important;
    min-height: 0 !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-folder-panel,
  body[class].page-body-dashboard .page-dashboard #home .hero-folder-panel.is-folder-collapsed {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-copy .hero-brief-toggle,
  body[class].page-body-dashboard .page-dashboard #home .hero-scroll-button { display: none !important; }
  body[class].page-body-dashboard .page-dashboard #home .hero-title {
    color: var(--mobile-text) !important;
    text-shadow: none !important;
    margin: 0 0 20px !important;
    font-size: clamp(36px, 10vw, 52px) !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-title::before,
  body[class].page-body-dashboard .page-dashboard #home .hero-title::after { display: none; }
  body[class].page-body-dashboard .page-dashboard #home .hero-folder-panel p {
    max-width: none !important;
    color: var(--mobile-muted) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-shadow: none !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 20px !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .button-outline {
    color: var(--mobile-text) !important;
    border-color: var(--mobile-line) !important;
    background: var(--mobile-panel) !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: none !important;
    margin: 0;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-tags span {
    width: auto;
    min-height: 28px;
    padding: 5px 10px;
    color: var(--mobile-muted) !important;
    background: var(--mobile-panel) !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 6px;
    font-size: 11px;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-overview-panel .hero-folder-toggle {
    width: 100% !important;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    margin: 0 !important;
    color: var(--mobile-text) !important;
    background: var(--mobile-panel) !important;
    border: 1px solid var(--mobile-line) !important;
    border-radius: 10px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.02em;
    cursor: pointer;
    clip-path: none;
    box-shadow: none !important;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-overview-panel .hero-folder-toggle::after {
    content: "−";
    display: block;
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    background: none;
    font: 24px/1 Arial, sans-serif;
    color: var(--mobile-accent);
  }
  body[class].page-body-dashboard .page-dashboard #home .is-folder-collapsed .hero-folder-toggle::after { content: "+"; }
  body[class].page-body-dashboard .page-dashboard #home .hero-brief-toggle__folder { display: none; }
  body[class].page-body-dashboard .page-dashboard #home .hero-brief-toggle__text {
    color: var(--mobile-text) !important;
    font-size: 12px;
    text-shadow: none;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-brief-toggle::before,
  body[class].page-body-dashboard .page-dashboard #home .hero-brief-toggle__text::after { display: none; }
  body[class].page-body-dashboard .page-dashboard #home .hero-overview-content {
    padding: 24px 4px 4px;
    color: var(--mobile-text);
    text-align: left;
  }
  body[class].page-body-dashboard .page-dashboard #home .hero-overview-content img { display: none; }
  body[class].page-body-dashboard .page-dashboard #home .hero-overview-content h2 { color: var(--mobile-text) !important; }
  body[class].page-body-dashboard .page-dashboard #home .hero-code-map {
    order: 1;
    position: relative !important;
    inset: auto !important;
    width: calc(100% - var(--mobile-left) - var(--mobile-right)) !important;
    height: clamp(220px, 44svh, 360px) !important;
    min-height: 0;
    flex: none;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--mobile-line);
    border-radius: 14px;
    isolation: isolate;
    background: linear-gradient(#03080d22, #03080d55), url("assets/zone-map-hero-mobile.webp") center / cover no-repeat #0d1519 !important;
    background-blend-mode: normal !important;
    touch-action: pan-y pinch-zoom;
  }
  body[class].page-body-dashboard .hero-code-map .zone-map-readout {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none;
    font-size: 9px;
  }
  body[class].page-body-dashboard #home .hero-code-map:not(.zone-map-ready) .zone-map-readout { display: none !important; }
  body[class].page-body-dashboard #home .zone-tactical-map {
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    filter: none !important;
  }
  body[class].page-body-dashboard #home .hero-code-map::after { display: none !important; }
  body[class].page-body-dashboard #home .hero-code-map .zone-map-readout { display: none !important; }
  body[class].page-body-dashboard #home .maplibregl-canvas { filter: none !important; }
  body[class].page-body-dashboard #home .hero-code-map.zone-map-failed .zone-tactical-map { display: none; }
  body[class].page-body-dashboard #home .hero-code-map .maplibregl-ctrl-attrib {
    font: 11px/1.5 Arial, sans-serif;
    color: #201d1b;
    background: #fffdf9;
    border: 1px solid #d9d2c9;
    border-radius: 8px;
    padding: 8px 46px 8px 10px;
    max-width: calc(100vw - var(--mobile-left) - var(--mobile-right) - 20px);
    opacity: 1;
  }
  body[class].page-body-dashboard #home .hero-code-map .maplibregl-ctrl-attrib-inner { white-space: normal; }
  body[class].page-body-dashboard #home .hero-code-map .maplibregl-ctrl-attrib a { color: #253d45 !important; }
  body[class] .hero-code-map .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; background-position: center; background-repeat: no-repeat; background-size: 20px; }
  body[class] .hero-code-map .maplibregl-ctrl-attrib.maplibregl-compact { min-width: 44px; min-height: 44px; }
  body[class].page-body-dashboard #home .mobile-map-actions:not([hidden]) {
    order: 2;
    width: calc(100% - var(--mobile-left) - var(--mobile-right));
    margin: 12px auto 0;
    display: grid;
    gap: 10px;
  }
  body[class].page-body-dashboard #home .mobile-map-status { color: var(--mobile-muted) !important; margin: 0; font-size: 13px; text-align: center; text-shadow: none; }
  body[class] .mobile-map-load:disabled { opacity: 0.8; cursor: default; }
  body[class] .mobile-map-load[aria-busy="true"]::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-right: 10px;
  }

  /* Consistent section rhythm and compact, readable cards. */
  body[class] .page-shell .section:not(.hero) { padding-block: 40px; }
  body[class] .page-shell :is(.section-heading, .hq-section-header) { margin-bottom: 24px; }
  body[class] .page-shell :is(.titles-grid, .program-grid, .programs-grid, .info-grid, .social-grid) { gap: 12px; }
  body[class] .page-shell :is(.title-card, .program-card, .info-card, .social-card, .legal-panel, .policy-panel, .channel-card) {
    padding: 22px !important;
    border-radius: 12px !important;
    min-height: 0;
  }
  body[class] .page-shell :is(.title-card, .program-card) {
    color: var(--mobile-text) !important;
    background: var(--mobile-panel) !important;
    border: 1px solid var(--mobile-line) !important;
    box-shadow: none !important;
  }
  body[class] .page-shell :is(.title-card, .program-card)::before,
  body[class] .page-shell :is(.title-card, .program-card)::after { display: none; }
  body[class] .page-shell :is(.title-card, .program-card) h3 { color: var(--mobile-text) !important; margin-bottom: 14px; }
  body[class] .page-shell .program-card p { color: var(--mobile-muted) !important; }
  body[class] .page-shell .title-list { gap: 8px; }
  body[class] .page-shell .title-list span { padding: 9px 10px; font-size: 13px; }

  body[class] .page-about-premium .about-premium-hero { padding: 0; }
  body[class] .page-about-premium .about-premium-hero__grid { padding-block: 36px; }
  body[class] .page-about-premium .about-premium-section { padding-block: 40px; }
  body[class] .page-about-premium :is(.about-signal-rail, .about-premium-pillars) { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  body[class] .page-about-premium :is(.about-signal-rail, .about-premium-pillars) span { padding: 14px 10px; font-size: 10px; }
  body[class] .page-hq .hq-status-row { display: grid; grid-template-columns: 1fr; }
  body[class] .page-hq .hq-status-row > div { padding: 14px 18px; }
  body[class] .events-reference-page { padding-top: 36px !important; }
  body[class].page-body-events .events-record-page .events-reference-hero {
    gap: 24px;
    padding-top: 0 !important;
    min-height: 0 !important;
  }
  body[class] .events-record-page .events-history-nav {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  body[class] .events-record-page .events-history-nav > * { flex: 0 0 auto; min-height: 48px; padding: 0 16px; }
  body[class] .events-record-page .events-origin-story { padding: 28px 22px; border-radius: 12px; }
  body[class] .events-record-page .events-team-history-card { min-height: 220px; padding: 22px; }
  body[class] .page-media .media-panel { padding: 22px; border-radius: 12px; }
  body[class] .page-media .media-panel h1 { font-size: 30px !important; }
  body[class] .page-media .social-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  body[class] .social-button { width: 46px; height: 46px; min-width: 46px; }
  body[class] .social-card > a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Four routes fit on one phone screen, with the selected detail directly below. */
  body[class].page-body-join .join-lobby-section { padding-top: 36px !important; }
  body[class].page-body-join .join-class-select { padding: 18px; clip-path: none; border-radius: 14px; }
  body[class].page-body-join .join-class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  body[class].page-body-join .join-class-grid label {
    min-height: 100px !important;
    padding: 16px 8px !important;
    gap: 10px;
    clip-path: none;
    border-radius: 8px;
  }
  body[class].page-body-join .join-class-grid label svg { width: 26px; height: 26px; }
  body[class].page-body-join .join-class-grid label::after { display: none; }
  body[class].page-body-join .join-class-grid label strong { font-size: 14px !important; line-height: 1.2; }
  body[class].page-body-join .join-loadout-panel { padding: 22px 4px 4px; }
  body[class].page-body-join .join-loadout-panel h2 { font-size: 24px !important; }
  body[class].page-body-join .join-comms-board { grid-template-columns: minmax(0, 1fr); }
  body[class].page-body-join .join-board-title h2 { min-width: 0; white-space: normal; }
  body[class].page-body-join .join-class-select > input:focus-visible ~ .join-class-grid label { outline: none; }
  body[class].page-body-join #join-class-player:focus-visible ~ .join-class-grid label[for="join-class-player"],
  body[class].page-body-join #join-class-creator:focus-visible ~ .join-class-grid label[for="join-class-creator"],
  body[class].page-body-join #join-class-staff:focus-visible ~ .join-class-grid label[for="join-class-staff"],
  body[class].page-body-join #join-class-volunteer:focus-visible ~ .join-class-grid label[for="join-class-volunteer"] {
    outline: 2px solid var(--mobile-accent);
    outline-offset: 2px;
  }

  /* Contact routes, policy links and dialogs retain comfortable touch targets. */
  body[class] :is(.official-actions, .contact-command-actions) { gap: 10px; }
  body[class] :is(.contact-route-list strong, .official-signal-panel dd, .channel-card a) { overflow-wrap: anywhere; }
  body[class] .channel-card a { display: inline-flex; align-items: center; min-height: 44px; }
  body[class] .legal-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  body[class] .legal-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  body[class] :is(.consent-gate, .email-choice, .zone-case-modal) {
    inset: auto 0;
    top: var(--mobile-viewport-top, 0px);
    height: 100vh;
    height: var(--mobile-viewport-height, 100dvh);
    box-sizing: border-box;
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    overflow: hidden;
  }
  /* The Join entry check needs a readable backdrop, without repeatedly blurring
     the entire page on slower phones. Keep the same red brand lighting. */
  body.page-body-join .consent-gate {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      radial-gradient(circle at 24% 18%, #ff252526, transparent 32%),
      radial-gradient(circle at 78% 74%, #ff252514, transparent 28%),
      #030607;
  }
  body[class] :is(.consent-gate__panel, .email-choice__panel) {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    border-radius: 16px;
    background: var(--mobile-panel) !important;
    color: var(--mobile-text) !important;
  }
  body[class] :is(.consent-gate__title, .email-choice h2) { font-size: 28px; line-height: 1.15; }
  body[class] :is(.consent-gate__button, .email-choice__button, .consent-gate__topic-button) { min-height: 48px; }
  body[class] .consent-gate__check { min-height: 56px; padding: 14px 12px; }
  body[class] .consent-gate__check input { width: 22px; height: 22px; flex: 0 0 22px; }
  body[class] .email-choice__close { width: 44px; height: 44px; }
  body[class] .email-choice__panel { position: relative; padding-top: 60px; }
  body[class] .email-choice__actions { grid-template-columns: 1fr; }
  body[class] .email-choice__remember { min-height: 48px; padding-block: 10px; }
  body[class] .email-choice__remember input { width: 22px; height: 22px; flex: 0 0 22px; }
  body[class] .email-choice__target { user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
  body[class] .mobile-email-status { color: var(--mobile-muted); font-size: 14px; line-height: 1.6; }
  body[class] .mobile-email-status:empty { display: none; }
  body[class] .zone-case-modal__panel { width: 100%; max-height: 100%; overflow: auto; }
  body[class] .zone-case-modal__body { padding: 20px; }
  body[class] .zone-case-answer { grid-template-columns: 1fr; }
  body[class] .zone-case-answer input { min-width: 0; font-size: 16px; min-height: 48px; }
  /* Optional saved-progress controls scroll with the page, after its content. */
  body[class] .zone-case-dock {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - var(--mobile-left) - var(--mobile-right));
    margin: 0 auto 24px;
    transform: none !important;
    z-index: auto;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body[class] .zone-case-dock:not(:has(.zone-egg-hud:not([hidden]), .zone-casebook-toggle:not([hidden]))) { display: none !important; }
  body[class] .zone-case-dock :is(.zone-egg-hud, .zone-case-controls) {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body[class] :is(.zone-case-answer button, .zone-case-modal__close, .zone-casebook__close, .zone-casebook__case button, .zone-casebook-toggle) { min-height: 44px; min-width: 44px; }
  body[class] .zone-casebook {
    inset: auto max(16px, env(safe-area-inset-right, 0px)) auto max(16px, env(safe-area-inset-left, 0px));
    top: calc(var(--mobile-viewport-top, 0px) + max(16px, env(safe-area-inset-top, 0px)));
    max-height: calc(var(--mobile-viewport-height, 100dvh) - max(32px, env(safe-area-inset-bottom, 0px) + env(safe-area-inset-top, 0px)));
    width: auto;
    max-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body[class] .mobile-announcement {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body[class].page-body-join .join-class-grid label .mobile-route-state {
    display: block;
    visibility: hidden;
    width: auto;
    height: auto;
    min-height: 16px;
    padding: 0;
    border: 0;
    background: none;
    white-space: nowrap;
    font: 600 11px/1.4 Arial, sans-serif;
  }
  body[class].page-body-join #join-class-player:checked ~ .join-class-grid label[for="join-class-player"] .mobile-route-state,
  body[class].page-body-join #join-class-creator:checked ~ .join-class-grid label[for="join-class-creator"] .mobile-route-state,
  body[class].page-body-join #join-class-staff:checked ~ .join-class-grid label[for="join-class-staff"] .mobile-route-state,
  body[class].page-body-join #join-class-volunteer:checked ~ .join-class-grid label[for="join-class-volunteer"] .mobile-route-state {
    visibility: visible;
    color: var(--mobile-accent);
  }

  body[class] .site-footer { padding-top: 40px; }
  body[class] .site-footer .footer-panel { padding: 24px; gap: 28px; border-radius: 14px; }
  body[class] .site-footer .footer-brand h2 { font-size: 23px; line-height: 1.2; }
  body[class] .site-footer .footer-brand p { font-size: 14px; line-height: 1.7; }
  body[class] .site-footer .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  body[class] .site-footer .footer-links > div:last-child { grid-column: 1 / -1; }
  body[class] .site-footer .footer-links :is(a, button) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
    font-size: 13px;
    line-height: 1.5;
    transform: none;
  }
  body[class] .site-footer .footer-bottom { padding-bottom: max(24px, env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.7; }

  /* Avoid animation work and delayed reading on touch screens. */
  body[class] .page-shell .reveal { opacity: 1; transform: none; transition: none; }
  body[class] .page-shell :is(.hero-title, .hero-card, .about-dossier, .media-paper-stage) { animation: none !important; }

  /* Feedback is short and deliberate. Scrolling does not trigger hover effects. */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes mobile-map-loading { to { rotate: 360deg; } }
    body[class] .mobile-map-load[aria-busy="true"]::before { animation: mobile-map-loading 900ms linear infinite; }
    body[class] .site-header .site-nav { transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
    body[class] .site-header .nav-toggle span { transition: transform 160ms ease, opacity 120ms ease; }
    body[class] :is(.button, .nav-toggle, .hero-folder-toggle, .email-choice__button, .consent-gate__button, .social-button, .join-class-grid label) {
      transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
    }
    body[class] :is(.button, .nav-toggle, .hero-folder-toggle, .email-choice__button, .consent-gate__button, .social-button, .join-class-grid label):active {
      transform: scale(0.98) !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body[class] *, body[class] *::before, body[class] *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
}