.explore-page { overflow: hidden; height: 100svh; }
.explore-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.explore-page .site-header { position: relative; margin-bottom: 0; background: var(--ink); border-bottom: 1px solid var(--line); }
.explore-page .header-invite { display: none; }
.explore-page .desktop-nav { margin-left: auto; }
.explore-page main { height: calc(100svh - var(--header-height)); }
#explore-game { height: 100%; min-height: 280px; position: relative; overflow: hidden; background: #0d0906; isolation: isolate; }
#explore-game:fullscreen { height: 100%; width: 100%; }
#game-stage, #game-stage iframe, .game-cover { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-cover { object-fit: cover; object-position: 65% center; transition: opacity .35s; }
.game-panel { position: absolute; inset: 0; display: flex; align-items: center; padding: 32px max(6vw,24px); overflow-y: auto; background: linear-gradient(90deg,rgba(13,9,6,.98) 0%,rgba(13,9,6,.88) 36%,rgba(13,9,6,.27) 76%); }
.intro-copy { max-width: 510px; position: relative; padding-block: 20px; }
.intro-mark { width: 64px; height: 64px; object-fit: contain; margin-bottom: 22px; }
.intro-copy h1 { font-size: clamp(2.8rem,5vw,5rem); max-width: 11ch; margin-bottom: 20px; }
.intro-copy p { max-width: 40ch; color: var(--crema); font-size: 1rem; }
.intro-copy .trail-caption { margin-bottom: 0; color: var(--gilt); font-size: .85rem; }
.intro-stars { color: var(--gilt); letter-spacing: 14px; font-size: 25px; margin: 8px 0 22px; }
.intro-copy .button { min-width: 220px; }
.intro-copy small { display: block; max-width: 41ch; margin-top: 15px; color: #c7bca7; font-size: .78rem; line-height: 1.5; }
.intro-copy .design-note { color: #a69a85; font-size: .72rem; }
#game-load { margin-top: 20px; max-width: 280px; }
#game-load p { margin: 0 0 8px; font-size: .875rem; }
#game-progress { width: 100%; height: 8px; accent-color: var(--gilt); }
.playing .game-cover { opacity: 0; pointer-events: none; }
#game-hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { position: absolute; left: max(18px,env(safe-area-inset-left)); right: max(18px,env(safe-area-inset-right)); top: max(18px,env(safe-area-inset-top)); display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.room-picker, .hud-actions, .hud-bottom button { pointer-events: auto; }
.room-picker select, .hud-actions button, .hud-bottom button { background: rgba(13,9,6,.9); color: var(--crema); border: 1px solid rgba(212,176,106,.55); min-height: 46px; font: 450 .85rem var(--body); border-radius: 3px; }
.room-picker select { padding: 0 32px 0 14px; width: 225px; max-width: 100%; }
.hud-actions { display: flex; gap: 6px; }
.hud-actions button { width: 46px; padding: 0; font-size: 21px; }
.hud-actions button:hover, .hud-bottom button:hover { background: var(--espresso); color: var(--gilt-pale); }
#game-compass { position: absolute; top: 82px; right: 18px; width: 112px; height: 112px; }
.hud-bottom { position: absolute; bottom: max(14px,env(safe-area-inset-bottom)); left: max(18px,env(safe-area-inset-left)); right: max(18px,env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hud-bottom button { padding: 0 14px; }
.hud-bottom strong { color: var(--gilt-pale); margin-inline: 5px; font-weight: 600; }
.gold-star { color: var(--gilt); }
.keys-hint { color: #fff3db; font-size: .75rem; text-shadow: 0 2px 4px #000; background: #0d0906c9; padding: 7px 12px; }
#game-message { position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px; max-width: calc(100% - 34px); padding: 10px 18px; background: #0d0906ed; color: var(--gilt-pale); border: 1px solid var(--gilt-deep); font-size: .875rem; text-align: center; pointer-events: none; }
#game-message:empty { display: none; }
#game-dialog { width: min(520px,calc(100vw - 28px)); max-height: calc(100svh - 28px); overflow-y: auto; background: var(--ink); color: var(--crema); border: 1px solid var(--gilt); padding: 30px; }
#game-dialog::backdrop { background: #0d09069c; backdrop-filter: blur(5px); }
#game-dialog h2 { font-size: clamp(1.9rem,5vw,2.6rem); padding-right: 26px; margin-bottom: 18px; }
#game-dialog p { font-size: .875rem; color: #c9bea8; margin-bottom: 16px; }
.dialog-close { position: absolute; right: 12px; top: 10px; width: 42px; height: 42px; background: transparent; color: var(--crema); border: 0; font-size: 28px; }
.discovery-trail { margin: 18px 0 24px; border-top: 1px solid var(--line); }
.discovery-trail button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 49px; background: transparent; color: var(--crema); border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; text-align: left; font: inherit; font-size: .9rem; }
.trail-star { color: #766548; font-size: 23px; }
.found .trail-star, .trail-state { color: var(--gilt-pale); }
.trail-state { margin-left: auto; }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dialog-actions .button { min-height: 46px; padding: 10px 16px; font-size: .875rem; }
.dialog-actions a { display: inline-flex; min-height: 44px; align-items: center; font-size: .875rem; }
#game-dialog .design-note { display: block; margin-top: 20px; color: #a69a85; font-size: .72rem; }
.menu-fallback { display: inline-flex; align-items: center; margin: 10px 18px; min-height: 44px; }
.touch-help { display: none; }
@media(pointer:coarse) { .touch-help { display: block; } .desktop-help,.keys-hint { display: none; } }
@media(max-width:900px) { .touch-help { display: block; } .desktop-help,.keys-hint { display: none; } .intro-copy h1 { font-size: clamp(2.8rem,8vw,4.3rem); } }
@media(max-width:600px) {
  .explore-page { --header-height: 72px; }
  .explore-page .brand img { width: 36px; height: 36px; } .explore-page .brand span { font-size: 1.25rem; }
  .explore-page .header-inner { gap: 10px; padding-inline: 16px; } .explore-page .header-actions { margin-left: auto; }
  .game-panel { padding: 22px; align-items: center; background: linear-gradient(90deg,#0d0906f2,#0d0906b8); }
  .intro-mark { width: 47px; height: 47px; margin-bottom: 18px; }
  .intro-copy { padding-block: 0; } .intro-copy h1 { font-size: clamp(2.5rem,11vw,3.7rem); margin-bottom: 18px; }
  .intro-copy p { font-size: .9rem; margin-bottom: 18px; }
  .intro-stars { margin-bottom: 18px; } .intro-copy .button { min-width: 210px; }
  .intro-copy small { font-size: .72rem; margin-top: 12px; }
  .hud-top { left: 10px; right: 10px; top: 10px; gap: 6px; }
  .room-picker { flex: 1; min-width: 0; } .room-picker select { width: 100%; padding-left: 9px; font-size: .77rem; }
  .hud-actions { gap: 4px; } .hud-actions button { width: 42px; min-height: 46px; }
  #game-compass { top: 69px; right: 10px; width: 82px; height: 82px; }
  .hud-bottom { left: 10px; right: 10px; gap: 6px; bottom: max(10px,env(safe-area-inset-bottom)); }
  .hud-bottom button { padding: 0 9px; font-size: .73rem; }
  #game-dialog { padding: 24px 20px; } #game-message { font-size: .8rem; bottom: 68px; }
}
@media(max-height:500px) {
  .explore-page { --header-height: 60px; }
  .intro-mark,.intro-stars,.intro-copy .trail-caption,.intro-copy #download-note { display: none; }
  .game-panel { padding: 16px 32px; }
  .intro-copy { max-width: 630px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: center; }
  .intro-copy h1 { font-size: 2.6rem; grid-row: span 2; margin: 0; }
  .intro-copy p { font-size: .8rem; margin-bottom: 10px; }
  .intro-copy small { grid-column: 2; margin-top: 8px; }
  #game-load { grid-column: 2; margin-top: 6px; }
  .intro-copy .button { min-width: 0; min-height: 44px; padding: 9px 18px; }
  #game-compass { display: none; }
}
@media(prefers-reduced-motion:reduce) { .game-cover { transition: none; } }