/* Cross-device guardrails: one URL, consistent content on every screen. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  min-width: 0;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

main,
section,
nav,
header,
footer,
fieldset,
details,
.reading-workspace,
.chapter-panel,
.workflow-panel,
.result-page {
  min-width: 0;
}

button,
a,
input,
select,
textarea {
  max-width: 100%;
}

button,
a {
  overflow-wrap: anywhere;
}

.quick-nav,
.modal,
.onboarding {
  -webkit-backdrop-filter: blur(14px);
}

/* Tablets: keep the reading surface roomy without desktop side rails. */
@media (min-width: 801px) and (max-width: 1099px) {
  .common-reader,
  .reader,
  .common-info-page {
    padding-inline: clamp(20px, 4vw, 44px);
  }

  .reading-workspace > .chapter-tabs,
  .reading-workspace > .reading-tabs {
    max-width: 100%;
  }

  .chapter-tabs {
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }

  .modal-card,
  .guide-card,
  .onboarding-card {
    width: min(720px, calc(100vw - 40px));
    max-height: calc(100dvh - 40px);
  }
}

/* Narrow phones, including 320 px displays and enlarged browser text. */
@media (max-width: 420px) {
  body:has(.quick-nav) {
    padding-top: calc(108px + env(safe-area-inset-top, 0px));
  }

  .quick-nav {
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  }

  .quick-nav button {
    padding-inline: 3px;
    font-size: clamp(.72rem, 3.5vw, .875rem);
    line-height: 1.35;
  }

  .reader,
  .common-reader,
  .common-info-page,
  .characters {
    padding-inline: 10px;
  }

  .reading-workspace .text-panel {
    padding-inline: 14px;
  }

  .dialogue-avatar,
  .reading-workspace .dialogue-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .dialogue-bubble,
  .reading-workspace .dialogue-bubble {
    max-width: calc(100% - 44px);
  }

  .pair-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clock {
    font-size: clamp(3rem, 18vw, 5rem);
  }
}

/* Phone-scale composition: keep artwork cinematic without swallowing the page. */
@media (max-width: 800px) {
  .entrance {
    min-height: 72svh;
    padding-block: 72px 52px;
  }

  .entrance .flowers {
    width: min(38vw, 150px);
    height: min(38vw, 150px);
  }

  .land {
    min-height: 72svh;
  }

  .pair-art {
    height: clamp(220px, 42svh, 320px);
  }

  .profile {
    min-height: 0;
  }

  .countdown-step,
  .title-screen {
    min-height: 78svh;
  }

  .start-screen {
    min-height: 58svh;
  }

  .hero {
    height: auto;
    min-height: 64svh;
    max-height: 720px;
  }

  .hero-cast {
    inset-block: 18% 3%;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .start-menu {
    padding-top: 32px;
  }

  .common-start {
    min-height: 96px;
  }

  .character-confirm-card,
  .modal-card,
  .guide-card,
  .onboarding-card {
    height: auto;
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 420px) {
  .pair-art {
    height: clamp(200px, 36svh, 270px);
  }

  .character-detail-art,
  .cast-guide > img,
  .story-marker.afterword-profile > .marker-avatar {
    height: 210px !important;
  }

  .result-page[data-stage="choices"] .route-choice-card > .choice-cast,
  .result-page .gm-choice-grid .route-choice-card > .choice-cast {
    height: 170px;
  }

  .start-character-card {
    min-height: 132px;
  }

  .start-character-card img {
    height: 92px;
  }
}

/* Landscape phones and short laptop windows: prevent controls being trapped. */
@media (max-height: 520px) and (orientation: landscape) {
  .modal-card,
  .guide-card,
  .onboarding-card {
    max-height: calc(100dvh - 16px);
  }

  .pair-art {
    height: min(72dvh, 330px);
  }

  .countdown-step,
  .title-screen,
  .start-screen,
  .land {
    min-height: max(420px, 100dvh);
  }
}

/* Mouse-based Windows/Mac screens get hover; touch devices keep stable cards. */
@media (hover: none), (pointer: coarse) {
  .character-card:hover,
  .mode-card:hover,
  .start-screen .primary:hover {
    transform: none;
  }

  button,
  a,
  summary,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
}

/* Support browser zoom and user-selected large text without clipping. */
@media (min-resolution: 1.5dppx) {
  .dialogue-bubble p,
  .text-panel,
  .story-prose {
    text-rendering: optimizeLegibility;
  }
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

@supports not (height: 100dvh) {
  .modal-card,
  .guide-card,
  .onboarding-card {
    max-height: calc(100vh - 24px);
  }
}