/* Shared navigation polish. Game board styling remains isolated. */
.mobile-direct, .mobile-play-hint { display: none; }
body[data-page] a, body[data-page] button { touch-action: manipulation; }

/* Crisp, consistent world selectors, independent of raster artwork. */
body[data-page="crossroads"] .crossroads { height: 100svh; }
body[data-page="crossroads"] header {
  top: max(28px, env(safe-area-inset-top)); width: min(660px, 70vw); height: auto;
  min-height: 72px; padding: 18px 28px; background: #061321b8;
  border-block: 1px solid #b99d635e; filter: none;
}
body[data-page="crossroads"] header h1 { font-size: clamp(18px, 2vw, 30px); letter-spacing: .17em; line-height: 1.3; text-shadow: 0 2px 8px #000; }
body[data-page="crossroads"] .crossroads-back {
  top: max(28px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left));
  width: 48px; height: 48px; clip-path: none; border-radius: 8px;
  background: #061321df; border: 1px solid #b99d6377; box-shadow: none; text-shadow: none;
}
body[data-page="crossroads"] .paths { left: 4%; right: 4%; bottom: max(30px, env(safe-area-inset-bottom)); gap: 16px; align-items: stretch; }
body[data-page="crossroads"] .path {
  min-height: 116px; padding: 20px 46px 20px 24px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 6px; background: #05111ee8;
  border: 1px solid #b99d6380; border-radius: 9px; filter: none; box-shadow: 0 8px 24px #0004;
  transform: none; transition: background .18s, border-color .18s;
}
body[data-page="crossroads"] .path .index { display: none; }
body[data-page="crossroads"] .path strong { font: 600 clamp(16px, 1.5vw, 23px)/1.25 Georgia, serif; letter-spacing: .09em; white-space: normal; text-shadow: none; }
body[data-page="crossroads"] .path small { margin: 0; font-size: 11px; line-height: 1.4; letter-spacing: .1em; white-space: normal; color: #b6c7d1; }
body[data-page="crossroads"] .path em { margin: 4px 0 0; font-size: 10px; line-height: 1.4; letter-spacing: .1em; white-space: normal; color: #d9c595; }
body[data-page="crossroads"] .path::after { content: '→'; position: absolute; inset: auto 20px auto auto; top: 50%; transform: translateY(-50%); opacity: 1; background: none; color: #d9c595; font-size: 23px; z-index: auto; animation: none; }
body[data-page="crossroads"] .path:hover, body[data-page="crossroads"] .path:focus-visible { transform: none; filter: none; background: #10283bee; border-color: #e4c382; outline: 2px solid #d3b474; outline-offset: 3px; }
body[data-page="crossroads"] .path.cards { border-color: #81b4c2; }
body[data-page="crossroads"] .crystal-title { top: 66%; }

@media (max-width: 1000px) {
  html:has(body[data-page]) { overflow-x: hidden; overflow-y: auto; height: auto; }
  body[data-page] { overflow-x: hidden; overflow-y: auto; min-height: 100svh; height: auto; }
  body[data-page] .rotate-device { display: none; }
  body[data-page] .gateway, body[data-page] .crossroads,
  body[data-page] .topbar, body[data-page] main, body[data-page] .menu-shell, body[data-page] footer { visibility: visible; }
  body[data-page] .nexus-music-control { width: 44px; height: 44px; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-page] :is(button, a, input, select):focus-visible { outline: 2px solid #8ae1ef; outline-offset: 3px; }

  /* Gateway: portrait browsing and a lightweight route around the movie. */
  body[data-page="landing"] .gateway { height: 100svh; min-height: 500px; }
  body[data-page="landing"] .world-mark { top: max(24px, env(safe-area-inset-top)); }
  body[data-page="landing"] .world-mark strong { font-size: clamp(19px, 4vw, 26px); letter-spacing: .14em; }
  body[data-page="landing"] .entrance { top: auto; bottom: 104px; width: min(320px, 86vw); height: 54px; clip-path: none; }
  body[data-page="landing"] .enter-label { position: static; translate: none; width: 100%; min-height: 54px; justify-content: center; font-size: 13px; letter-spacing: .1em; border-radius: 8px; background: #071b30ed; }
  body[data-page="landing"] .entrance:hover .enter-label { translate: none; }
  body[data-page="landing"] .mobile-direct { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 14px; bottom: 48px; left: 50%; transform: translateX(-50%); min-height: 48px; width: min(300px, 78vw); color: #e3eff4; font-size: 14px; text-decoration: none; background: #041322b8; border: 1px solid #9db6c340; border-radius: 8px; }
  body[data-page="landing"] footer { display: none; }
  body[data-page="landing"] .gateway-grade { background: linear-gradient(#04122244, transparent 40%, #041222b8); }

  /* World choice: readable panels replace invisible hover targets. */
  body[data-page="crossroads"] .crossroads { min-height: 100svh; height: auto; padding: 130px 20px 76px; }
  body[data-page="crossroads"] .hall-art { position: fixed; animation: none; }
  body[data-page="crossroads"] .hall-grade { position: fixed; background: linear-gradient(#020b17aa, #020b1720 25%, #020b17de); }
  body[data-page="crossroads"] header { top: max(22px, env(safe-area-inset-top)); left: 82px; translate: none; width: calc(100% - 102px); min-height: 64px; padding: 12px; }
  body[data-page="crossroads"] header h1 { font-size: 18px; letter-spacing: .08em; }
  body[data-page="crossroads"] .crossroads-back { top: max(30px, env(safe-area-inset-top)); left: 20px; }
  body[data-page="crossroads"] .paths { position: relative; inset: auto; grid-template-columns: 1fr; gap: 12px; margin: max(80px, 15svh) auto 0; width: min(100%, 520px); }
  body[data-page="crossroads"] .path { min-height: 100px; padding: 17px 48px 17px 20px; }
  body[data-page="crossroads"] .path strong { font-size: 20px; }
  body[data-page="crossroads"] .path small { font-size: 12px; }
  body[data-page="crossroads"] .path em { font-size: 11px; }
  body[data-page="crossroads"] .crystal-title, body[data-page="crossroads"] .portal-hit { display: none; }

  /* Authentication: one page scroll, usable with the on-screen keyboard. */
  body[data-page="login"] .topbar { height: 76px; padding: 12px max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); }
  body[data-page="login"] .brand { display: block; width: 140px; }
  body[data-page="login"] .crossroads-button { width: 44px; height: 44px; }
  body[data-page="login"] .language::before { display: none; }
  body[data-page="login"] .language select { width: 62px; height: 44px; font-size: 16px; }
  body[data-page="login"] main { display: block; height: auto; min-height: 0; overflow: visible; padding: 12px 16px 24px; }
  body[data-page="login"] .intro { display: none; }
  body[data-page="login"] .auth { width: min(100%, 480px); max-height: none; margin: 0 auto; overflow: visible; padding: 24px 20px; clip-path: none; border-radius: 10px; }
  body[data-page="login"] .auth::before, body[data-page="login"] .auth::after { clip-path: none; border-radius: 10px; }
  body[data-page="login"] .gate-crown { display: none; }
  body[data-page="login"] .auth h2 { font-size: 27px; }
  body[data-page="login"] .portal-label { font-size: 10px; letter-spacing: .2em; }
  body[data-page="login"] .auth-heading { padding-bottom: 14px; }
  body[data-page="login"] .mode-switch { margin: 16px 0 12px; }
  body[data-page="login"] .mode { height: 46px; font-size: 15px; }
  body[data-page="login"] .google-auth { height: 48px; font-size: 14px; }
  body[data-page="login"] .divider { margin: 14px 0; font-size: 12px; }
  body[data-page="login"] .field { margin-bottom: 14px; }
  body[data-page="login"] .field > label { font-size: 13px; margin-bottom: 7px; }
  body[data-page="login"] .field input { height: 48px; font-size: 16px; padding-inline: 12px; scroll-margin-block: 24px; }
  body[data-page="login"] .password-wrap input { padding-right: 86px; }
  body[data-page="login"] .text-action { top: 2px; height: 44px; font-size: 12px; }
  body[data-page="login"] .form-options { flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; font-size: 13px; }
  body[data-page="login"] .remember, body[data-page="login"] .link-button { min-height: 44px; font-size: 13px; }
  body[data-page="login"] .remember input { width: 20px; height: 20px; }
  body[data-page="login"] .auth .primary, body[data-page="login"] .auth .secondary { height: 50px; clip-path: none; border-radius: 6px; font-size: 14px; }
  body[data-page="login"] .auth #guest { margin-top: 16px; border-color: #7fc3d4; color: #e5f8ff; }
  body[data-page="login"] .status { display: block; font-size: 13px; }
  body[data-page="login"] footer { height: auto; min-height: 64px; padding: 12px 72px 24px 20px; font-size: 10px; }

  /* Main menu: full-width touch controls rather than a miniature desktop. */
  body[data-page="menu"] .topbar { height: 76px; padding: 12px 20px; }
  body[data-page="menu"] .brand-art { width: 140px; }
  body[data-page="menu"] .profile { width: auto; max-width: 48%; padding: 8px; background: #061523d9; border: 1px solid #ac93634d; border-radius: 6px; }
  body[data-page="menu"] .profile::before, body[data-page="menu"] .profile::after { display: none; }
  body[data-page="menu"] .profile-gem { display: none; }
  body[data-page="menu"] #playerName { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  body[data-page="menu"] .menu-shell { min-height: 0; padding: 18px 20px 24px; }
  body[data-page="menu"] .menu { width: min(100%, 480px); padding: 20px; margin: 0 auto; background: #041221e8; border: 1px solid #ad96675e; border-radius: 10px; }
  body[data-page="menu"] .menu::before, body[data-page="menu"] .menu::after { display: none; }
  body[data-page="menu"] .eyebrow { font-size: 10px; letter-spacing: .18em; line-height: 1.5; }
  body[data-page="menu"] h1 { font-size: 36px; line-height: 1.15; margin-bottom: 20px; }
  body[data-page="menu"] .menu-motto { display: none; }
  body[data-page="menu"] .menu-actions { width: 100%; margin: 0; gap: 10px; }
  body[data-page="menu"] .menu-actions button { height: auto; min-height: 66px; display: flex; align-items: center; padding: 12px 16px; border: 1px solid #95afbc66; border-radius: 6px; background: #0c2436; transform: none; filter: none; animation: none; }
  body[data-page="menu"] .menu-actions button::before, body[data-page="menu"] .menu-actions button::after, body[data-page="menu"] .button-icon, body[data-page="menu"] .button-sigil, body[data-page="menu"] .button-copy::after { display: none; }
  body[data-page="menu"] .menu-actions .exit { margin: 0; min-height: 60px; }
  body[data-page="menu"] .button-copy { padding: 0; gap: 5px; }
  body[data-page="menu"] .button-copy strong { font-size: 16px; line-height: 1.3; letter-spacing: .06em; }
  body[data-page="menu"] .menu-actions .button-copy small { font-size: 12px; line-height: 1.4; letter-spacing: .02em; }
  body[data-page="menu"] .menu-actions button.is-selected, body[data-page="menu"] .menu-actions button:focus-visible { border-color: #e2c282; background: #15374b; }
  body[data-page="menu"] .menu-status { margin: 16px 0 0; font-size: 10px; line-height: 1.5; letter-spacing: .05em; }
  body[data-page="menu"] footer { height: auto; min-height: 48px; padding: 12px 20px 24px; }
  body[data-page="menu"] .modal { width: min(480px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: auto; }
  body[data-page="menu"] .modal form { padding: 48px 20px 24px; }
  body[data-page="menu"] .modal h2 { font-size: 28px; }
  body[data-page="menu"] .close { width: 44px; height: 44px; right: 8px; top: 4px; }
  body[data-page="menu"] .difficulty button { min-height: 48px; font-size: 13px; }
  body[data-page="menu"] .modal-primary { min-height: 50px; }
  body[data-page="menu"] .mobile-play-hint { display: block; font-size: 13px; }
}
@media (max-width: 1000px) and (orientation: landscape) {
  body[data-page="landing"] .gateway { min-height: 100svh; }
  body[data-page="landing"] .entrance { bottom: 84px; }
  body[data-page="landing"] .mobile-direct { bottom: 26px; }
  body[data-page="crossroads"] .crossroads { padding: 102px 18px 68px; }
  body[data-page="crossroads"] .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: max(40px, 12svh); gap: 10px; }
  body[data-page="crossroads"] .path { min-height: 110px; padding: 16px 14px; }
  body[data-page="crossroads"] .path::after { display: none; }
  body[data-page="crossroads"] .path strong { font-size: 16px; }
  body[data-page="crossroads"] .path small { font-size: 10px; }
  body[data-page="menu"] .menu { width: min(560px, 100%); }
  body[data-page="menu"] .menu-actions { grid-template-columns: 1fr 1fr; }
  body[data-page="menu"] .menu-actions .exit { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  body[data-page="menu"] .profile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; aspect-ratio: auto; min-height: 44px; }
  body[data-page="menu"] .profile > :not(.profile-gem) { opacity: 1; }
  body[data-page="menu"] .profile-label { font-size: 9px; }
  body[data-page="login"] .nexus-music-control { top: 16px; bottom: auto; right: 90px; }
  body[data-page="login"] .brand { left: 76px; transform: none; width: 100px; }
}