.play-page { background-color: #150f0a; }
.play-wrap { width: min(1440px, 100%); margin: auto; padding: 0 20px; }
#game-frame { position: relative; width: 100%; aspect-ratio: 520 / 256; background: #191613; border: 1px solid #856843; border-radius: 8px; overflow: hidden; }
#canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.start-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 16px; background: #191613 url('/img/desk.webp') center/cover; color: #efe6d2; }
.start-panel h1 { margin: 12px 0 0; font-size: clamp(24px, 4vw, 42px); }
.start-panel p { margin: 8px 0; }
.start-panel .key { margin-top: 12px; }
.play-caption, #status { font-size: 13px; }
#status { max-width: 600px; overflow-wrap: anywhere; }
#progress { width: min(360px, 85%); accent-color: #c9a24b; margin: 8px; }
.play-info { max-width: 840px; margin: 48px auto; line-height: 1.9; }
.play-info h2 { font-size: 24px; }
.play-info a { text-decoration: underline; }
.rotate-note { font-size: 13px; text-align: center; }
[hidden] { display: none !important; }
#game-frame:fullscreen { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
@media (max-width: 600px) and (orientation: portrait) {
  .play-wrap { padding: 0 8px; }
  #game-frame { min-height: 290px; }
  .start-panel img { display: none; }
  .start-panel h1 { font-size: 24px; }
  .start-panel p { font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .play-page .bar { padding-top: 4px; padding-bottom: 4px; min-height: 48px; }
  .play-wrap { padding: 0 max(8px, env(safe-area-inset-left)); }
  #game-frame { height: calc(100dvh - 64px); aspect-ratio: auto; }
  .start-panel img { display: none; }
}

#exit-fullscreen { display: none; position: absolute; top: 2px; right: max(8px, env(safe-area-inset-right)); z-index: 2; min-height: 44px; }
#game-frame:fullscreen #exit-fullscreen { display: inline-flex; }
#game-frame:fullscreen #canvas { margin-top: 48px; height: calc(100% - 48px); }

.rotate-note a, .guide-note a { text-decoration: underline; }
.play-info details { border-bottom: 1px solid #856843; padding: 8px 0; }
.play-info summary { cursor: pointer; min-height: 44px; padding: 8px 0; font-weight: 700; }
.play-info ol { padding-left: 1.5em; }
.play-info li { margin-bottom: 10px; }
.guide-note { font-size: 13px; }
#pwa-guide { scroll-margin-top: 60px; }
.pwa-controls { display: none; }
.pwa-mode { overscroll-behavior: none; }
.pwa-mode .pwa-controls {
  display: flex; align-items: center; gap: 12px;
  position: fixed; z-index: 5; top: env(safe-area-inset-top, 0px);
  left: max(4px, env(safe-area-inset-left)); right: env(safe-area-inset-right, 0px);
  height: 44px; background: #150f0a;
}
.pwa-controls .key { min-height: 44px; padding: 4px 12px; }
.pwa-rotate { display: none; font-size: 12px; }
.pwa-mode > .bar, .pwa-mode > .foot, .pwa-mode > .website-ad { display: none; }
.pwa-mode:not(.pwa-reading) { overflow: hidden; }
.pwa-mode:not(.pwa-reading) .play-wrap {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 44px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.pwa-mode:not(.pwa-reading) #game-frame {
  width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0;
}
.pwa-mode:not(.pwa-reading) .rotate-note, .pwa-mode:not(.pwa-reading) .play-info { display: none; }
.pwa-mode.pwa-reading .play-wrap {
  padding: calc(env(safe-area-inset-top, 0px) + 52px) max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left));
}
.pwa-mode.pwa-reading #game-frame, .pwa-mode.pwa-reading .rotate-note { display: none; }
@media (orientation: portrait) {
  .pwa-mode .pwa-rotate { display: inline; }
  .pwa-mode:not(.pwa-reading) #game-frame { height: auto; aspect-ratio: 520 / 256; margin-top: max(0px, calc((100dvh - 100vw * 256 / 520 - 88px) / 2)); overflow: visible; }
  .pwa-mode:not(.pwa-reading) .start-panel { min-height: 290px; top: 50%; bottom: auto; transform: translateY(-50%); }
}