/* One screen of play. Reading is handled by the paged paper reader. */
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { min-height: 0; }
button, select, summary { touch-action: manipulation; }
button:active:not(:disabled) { filter: brightness(.88); }
main, .game-shell, .playing .game-shell { height: 100dvh; min-height: 0; }
.game-shell .workspace, .game-shell .viewport { min-height: 0; }
.game-shell .masthead { flex-shrink: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
.masthead nav { flex-wrap: nowrap; }
.masthead .wordmark { flex-shrink: 0; }
.statusbar { flex-shrink: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.welcome { overflow: hidden; padding: clamp(20px, 5vw, 60px); }
.welcome-content { max-width: 600px; }
.welcome-meta { font-size: 10px; line-height: 1.8; letter-spacing: .4px; color: #d1d4ba; margin: 18px 0 0; }
.welcome .difficulty { margin-top: 16px; }
.difficulty select { min-height: 44px; }
.touch-help { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .touch-help { display: inline; }
  .keyboard-help { display: none; }
}
#update-game { min-width: 0; min-height: 44px; background: var(--stock); color: var(--pencil); font-size: 11px; padding: 8px 10px; }
.masthead:has(#update-game:not([hidden])) .wordmark { display: none; }
.masthead:has(#update-game:not([hidden])) nav { width: 100%; }
.masthead:has(#update-game:not([hidden])) #update-game { margin-right: auto; }

/* A compact kit, with reading on its own pages instead of expanding drawers. */
#game-menu { inset: calc(64px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto auto; width: 360px; max-width: calc(100vw - 24px); max-height: none; overflow: hidden; padding: 8px 12px 12px; }
#game-menu:popover-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
#game-menu .menu-heading { grid-column: 1 / -1; min-height: 44px; }
#game-menu > .quiet, #game-menu .notebook-button { display: flex; grid-column: auto; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin: 0; padding: 10px 5px; font-size: 12px; line-height: 1.35; text-align: left; }

/* Keep the route and its cost under the thumb, and the whole survey visible. */
.field-exploration { bottom: max(10px, env(safe-area-inset-bottom)); }
.field-heading { flex-shrink: 0; }
.field-board { min-height: 0; }
.field-map-surface { inset: 18px 44px 22px; }
.field-route-card { min-width: 0; }
.field-route-options button { min-height: 56px; font-size: 12px; }
.field-route-options b { font-size: 12px; }
.field-route-options span { font-size: 11px; }
.field-go, .field-stop { min-height: 48px; font-size: 14px; }
.field-landmark { touch-action: manipulation; }
.field-go:active:not(:disabled), .field-stop:active:not(:disabled) { transform: translateY(1px); }

/* A single route action keeps the walk and its discoveries under the thumb. */
body[data-phase="guide"] .sidebar { bottom: max(12px, env(safe-area-inset-bottom)); }
body[data-phase="guide"] .sidebar .controls { display: block; max-width: 520px; }
.guide-deck { display: grid; gap: 10px; padding: 12px; background: #111914ed; border: 1px solid #505c40; }
.guide-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.guide-route li { color: #a6af93; font-size: 10px; line-height: 1.4; }
.guide-route li span { display: block; margin-bottom: 3px; font-size: 11px; }
.guide-route .current { color: #e2d79b; }
.guide-route .searched { color: #c1c7ad; }
.guide-progress { height: 2px; background: #49513a; }
.guide-progress i { display: block; height: 100%; background: var(--gold); transition: width .1s linear; }
.guide-deck > button, .guide-actions button { min-height: 48px; }
.playing .sidebar .guide-deck button.primary { justify-content: center; background: var(--gold); color: var(--dark); }
.guide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-actions .primary { grid-column: 1 / -1; justify-content: center; background: var(--gold); color: var(--dark); }
.guide-help, .guide-instruction { margin: 0; text-align: center; color: #bdc3a9; font-size: 11px; line-height: 1.4; }
.guide-instruction { font: 17px/1.4 Georgia, serif; color: var(--ink); }
.guide-message { position: relative; max-width: 520px; margin: 0 auto 10px; padding: 12px 14px; font: 16px/1.45 Georgia, serif; text-align: left; color: var(--ink); background: #111914e8; border-left: 2px solid #929775; pointer-events: none; }
.playing .tower-hud { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
.playing .tower-hud button { min-width: 108px; min-height: 52px; font-size: 13px; }
.toast { bottom: calc(82px + env(safe-area-inset-bottom)); max-width: min(460px, calc(100vw - 28px)); }

@media (max-width: 600px) {
  .field-exploration { top: calc(64px + env(safe-area-inset-top)); padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); gap: 8px; }
  .field-map-surface { inset: 18px 38px 22px; }
  .field-route-card { padding: 10px 12px; }
  .field-route-options { gap: 10px; margin: 8px 0 10px; }
  .field-route-options button { padding: 7px 4px 7px 20px; }
  .field-route-photo { width: 62px; height: 44px; margin: 0 0 6px 8px; transform: none; }
  .field-destination h3 { font-size: 22px; }
  #field-route-note { display: none; }
  #field-risk { font-size: 11px; margin: 6px 0; }
  .field-heading .eyebrow { font-size: 11px; }
  .field-exposure { font-size: 10px; }
  .field-landmark { width: 92px; min-height: 58px; padding: 5px 2px; }
  .field-landmark .field-site-icon { height: 24px; width: 30px; }
  .playing .viewport > .stats { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: calc(66px + env(safe-area-inset-top)); gap: 8px; }
  .playing .viewport > .stats .stat label { font-size: 9px; letter-spacing: .6px; }
  .guide-deck { gap: 8px; }
  .guide-actions button { padding: 8px 5px; font-size: 11px; }
}
@media (max-height: 650px) and (max-width: 600px) {
  .welcome h1 { font-size: 62px; margin: 8px 0 16px; }
  .welcome .opening { font-size: 19px; line-height: 1.5; margin-bottom: 16px; }
  .welcome-meta { margin-top: 12px; }
  .welcome .difficulty { margin-top: 10px; }
  .field-heading .field-meter { display: none; }
  .field-heading .field-exposure b { display: inline; font-size: 13px; }
  .field-map-surface { inset: 14px 38px 20px; }
  .field-landmark { min-height: 44px; }
  .field-landmark .field-site-icon { display: none; }
  .field-route-photo { display: none; }
  .guide-message { font-size: 14px; padding: 8px 10px; }
}
@media (max-height: 600px) and (max-width: 479px) {
  .welcome { padding: 16px 20px; }
  .welcome-content::before { font-size: 7px; margin-bottom: 7px; padding: 4px 7px; }
  .welcome h1 { font-size: 54px; margin: 8px 0 12px; }
  .welcome .opening { font-size: 18px; margin-bottom: 14px; }
  .welcome .start-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .welcome .start-actions:has(#resume[hidden]) { grid-template-columns: 1fr; }
  .welcome .start-actions button { min-width: 0; min-height: 48px; padding: 10px 8px; font-size: 11px; justify-content: center; }
  .welcome .start-actions .primary span { display: none; }
  .welcome .difficulty { flex-direction: row; align-items: center; gap: 12px; font-size: 9px; }
  .welcome .difficulty select { min-width: 0; max-width: 55%; }
  .welcome-meta { font-size: 9px; letter-spacing: 0; }
}
@media (max-height: 500px) and (min-width: 480px) {
  .game-shell .masthead, .playing .game-shell .masthead { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .welcome { padding: 12px 28px; }
  .welcome-content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; width: 100%; max-width: 900px; align-items: center; }
  .welcome-content::before { grid-column: 1; font-size: 8px; margin: 0; padding: 4px 8px; }
  .welcome h1 { grid-column: 1; font-size: 62px; margin: 4px 0 10px; }
  .welcome .opening { grid-column: 1; font-size: 18px; line-height: 1.4; margin: 0; }
  .welcome .start-actions { grid-column: 2; grid-row: 1 / 3; gap: 6px; }
  .welcome .start-actions button { width: 100%; min-height: 44px; padding: 10px 14px; }
  .welcome .welcome-meta { grid-column: 2; grid-row: 3; font-size: 9px; margin: 0; }
  .welcome .difficulty { grid-column: 1 / -1; flex-direction: row; align-items: center; margin: 5px 0 0; }
  .statusbar { display: none; }
  #game-menu { top: max(8px, env(safe-area-inset-top)); }
  #game-menu > .quiet, #game-menu .notebook-button { min-height: 44px; padding: 6px 5px; }
  .field-exploration { top: calc(54px + env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr); grid-template-rows: 22px minmax(0, 1fr); gap: 6px 14px; max-width: 1100px; }
  .field-heading { grid-column: 1; grid-row: 1; }
  .field-heading .eyebrow { display: block; font-size: 10px; margin: 0; }
  .field-heading .field-exposure { min-width: 0; font-size: 9px; }
  .field-heading .field-exposure b { display: inline; font-size: 12px; }
  .field-meter { display: none; }
  .field-board { grid-column: 1; grid-row: 2; min-height: 0; }
  .field-map-surface { inset: 14px 32px 20px; }
  .field-landmark { width: 82px; min-height: 44px; padding: 3px; }
  .field-landmark .field-site-icon { display: none; }
  .field-route-card { grid-column: 2; grid-row: 1 / 3; padding: 10px; align-self: center; }
  .field-route-photo, #field-route-note { display: none; }
  .field-destination h3 { font-size: 21px; }
  .field-route-options { margin: 7px 0; gap: 8px; }
  .field-route-options button { padding: 7px 3px 7px 19px; min-height: 54px; }
  .field-route-options b { font-size: 11px; }
  .field-route-options span { font-size: 10px; }
  #field-risk { margin: 5px 0; font-size: 10px; }
  .field-go, .field-stop { min-height: 44px; padding: 10px; }
  .playing .viewport > .stats { top: calc(56px + env(safe-area-inset-top)); }
  .playing .viewport > .stats .stat { padding: 4px 7px; }
  .playing .viewport > .stats .stat strong { font-size: 17px; }
  body[data-phase="guide"] .sidebar .controls { max-width: none; }
  body[data-phase="guide"] .sidebar { left: auto; width: min(310px, 40vw); }
  .guide-deck { gap: 6px; padding: 10px; }
  .guide-deck > button, .guide-actions button { min-height: 44px; }
  .guide-message { position: fixed; left: 14px; right: calc(min(310px, 40vw) + 36px); bottom: 12px; max-width: none; padding: 10px; margin: 0; font-size: 14px; }
  .guide-help { font-size: 10px; }
}
@media (min-width: 900px) and (min-height: 721px) {
  .field-board { min-height: 0; }
  .field-map-surface { inset: 28px 62px 32px; }
}

/* Let the home screen breathe on phones, including shorter displays. */
@media (max-width: 760px) and (orientation: portrait) {
  .welcome { justify-content: flex-start; overflow-y: auto; padding: 36px max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left)); }
  .welcome-content { flex-shrink: 0; margin-block: auto; width: 100%; }
  .welcome-content::before { font-size: 8px; margin-bottom: 24px; padding: 7px 10px; }
  .welcome h1 { font-size: clamp(54px, 10vw, 76px); margin: 0 0 28px; }
  .welcome .opening { font-size: 20px; line-height: 1.65; margin-bottom: 30px; }
  .welcome .start-actions { display: flex; flex-wrap: wrap; gap: 14px; }
  .welcome .start-actions button { min-height: 52px; padding: 15px 20px; font-size: 12px; }
  .welcome .start-actions .primary span { display: inline; }
  .welcome .welcome-meta { font-size: 10px; line-height: 1.9; letter-spacing: .4px; margin: 26px 0 0; }
  .welcome .difficulty { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 9px; margin-top: 28px; }
  .welcome .difficulty select { max-width: 100%; }
}

/* Keep the retreat visible between the statement and rifle controls. */
@media (min-width: 900px) and (min-height: 501px) {
  body[data-phase="guide"] .sidebar { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 380px); align-items: end; justify-content: space-between; gap: 24px; }
  body[data-phase="guide"] .sidebar .controls { width: 100%; max-width: none; margin: 0; }
  body[data-phase="guide"] .guide-message { max-width: none; margin: 0; }
}