/* Screen layouts: setup, home, play, dialogs, and their responsive rules. */
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: none; }
#app[data-screen="setup"] #setup, #app[data-screen="home"] #home, #app[data-screen="play"] #play { display: flex; }

/* Backdrop: the theme's texture on menus; the game's ambient glow while playing. */
.backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--backdrop), var(--bg); }
#app[data-screen="play"] .backdrop { background: var(--bg); }
#glow { position: absolute; inset: -10%; width: 120%; height: 120%; opacity: 0; filter: blur(70px) saturate(1.5);
  transition: opacity .8s var(--ease); image-rendering: auto; }
#app[data-screen="play"][data-ambient="on"] #glow { opacity: .5; }

/* Setup and home */
#setup, #home { align-items: center; justify-content: center; padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); overflow-y: auto; }
.setup-card { position: relative; width: min(560px, 100%); display: grid; gap: 18px; margin: auto; }
.brand { position: relative; }
.brand .mark { display: var(--mark-display, block); width: 48px; height: 48px; margin-bottom: 18px; }
.home-layout { width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; margin: auto; }
.home-brand { grid-row: span 2; }
.home-brand .title { font-size: calc(var(--title-size) * 1.2); }
.home-actions { display: grid; gap: 12px; }
#homeLegend { padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface); border: var(--border) solid var(--line); }
.install-hint { margin: 0; text-align: center; }

/* Play */
#play { align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.stage { position: absolute; inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); display: flex; align-items: center; justify-content: center; }
.picture { position: relative; flex: none; box-shadow: var(--picture-frame, none); }
#screen { display: block; width: 100%; height: 100%; background: #000; image-rendering: pixelated; image-rendering: crisp-edges; }
#screen[data-look="smooth"] { image-rendering: auto; }
#screen:focus, #screen:focus-visible { box-shadow: none; outline: none; } /* The picture takes focus for keys; it needs no ring. */
.native-audio-hint { display: none; }
.crt-mask { position: absolute; inset: 0; pointer-events: none; display: none; }
#app[data-renderer="canvas"][data-look="crt"] .crt-mask { display: block; }
#app[data-renderer="canvas"][data-look="crt"] #screen { filter: saturate(1.15) contrast(1.06) brightness(1.08); }
#app[data-renderer="canvas"][data-look="crt"] .crt-mask {
  background: repeating-linear-gradient(180deg, transparent 0 50%, rgba(0, 0, 0, .32) 50% 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .55) 100%);
  background-size: 100% var(--scanline, 4px), 100% 100%; mix-blend-mode: multiply;
}
.hud { position: absolute; z-index: 4; top: calc(var(--space-3) + var(--safe-top)); left: calc(var(--space-3) + var(--safe-left)); display: flex; align-items: center; gap: var(--control-gap);
  transition: opacity .35s var(--ease), transform .35s var(--ease); }
#play.idle .hud { opacity: 0; transform: translateY(-6px); pointer-events: none; }
#play.idle { cursor: none; }
#play.touch-enabled .hud { opacity: 1; transform: none; pointer-events: auto; }
#play.touch-enabled { cursor: auto; }
#play.touch-enabled #muteButton, #immersiveButton .contract-view,
#immersiveButton[aria-pressed="true"] .expand-view { display: none; }
#immersiveButton[aria-pressed="true"] .contract-view { display: block; }
#play.immersive .hud { top: calc(var(--space-2) + var(--safe-top)); left: calc(var(--space-2) + var(--safe-left));
  right: calc(var(--space-2) + var(--safe-right)); justify-content: space-between; pointer-events: none; }
#play.immersive .hud-button { pointer-events: auto; }
#play.immersive .hud-meta, #play.immersive .hud-hint { display: none; }
#touchHelp { margin: 18px 0 0; max-width: 40ch; }
#muteButton .sound-off, #muteButton[aria-pressed="true"] .sound-on { display: none; }
#muteButton[aria-pressed="true"] .sound-off { display: block; }
.hud-hint { font: 500 .72rem var(--font-mono); color: var(--ink-muted); padding: 5px 10px; border-radius: var(--radius-chip);
  background: var(--hud-bg); letter-spacing: .04em; }
.hud-meta { display: none; position: absolute; z-index: 4; top: calc(var(--space-3) + var(--safe-top)); right: calc(var(--space-3) + var(--safe-right)); pointer-events: none; }
.touch-controls:not([hidden])[data-orientation="landscape"] ~ .hud-meta { right: auto; left: 50%; transform: translateX(-50%); }
#app.knows-menu-key .hud-hint { display: none; }
.loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--scrim); }
.loading p { margin: 0; color: var(--ink-muted); font: 500 .8rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
#app[data-screen="play"] .toasts { bottom: auto; top: calc(18px + var(--safe-top)); }

/* Dialogs */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  padding: calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(20px + var(--safe-left));
  background: var(--scrim); -webkit-backdrop-filter: var(--scrim-filter); backdrop-filter: var(--scrim-filter);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; animation: fade .2s var(--ease); z-index: 10; }
@keyframes fade { from { opacity: 0; } }
.overlay.covered { visibility: hidden; }
#pauseMenu { align-items: flex-start; padding-top: max(calc(20px + var(--safe-top)), 12vh); }
.menu-panel { width: min(380px, 100%); }
.menu-support { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.phone-menu-entry { width: 100%; }
#pauseMenu .menu-support #touchHelp { margin: 0; }
.controls-panel { width: min(320px, 100%); align-self: flex-start; }
.wide-panel { width: min(640px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.settings { scroll-padding-top: calc(var(--control-height) * 2 + var(--space-5)); scroll-padding-bottom: var(--space-3); }
.settings .panel-header { position: sticky; top: 0; z-index: 3; padding-bottom: var(--space-2); background: var(--metal-texture, none), var(--surface); }
/* Cover the panel's top inset too, so scrolled keys cannot peek above the heading. */
.settings .panel-header::before { content: ''; position: absolute; inset: calc(-1 * var(--space-6)) 0 0;
  z-index: -1; pointer-events: none; background: var(--metal-texture, none), var(--surface); }
.settings .tabs { position: sticky; top: calc(var(--control-height) + var(--space-2)); z-index: 2; }
.save-slots { display: grid; gap: 10px; margin: 16px 0 18px; }
.backup-row { margin-bottom: 10px; }
.file-button { position: relative; overflow: hidden; }
.file-button:focus-within { box-shadow: var(--focus); }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Responsive */
@media (min-width: 980px), (min-width: 700px) and (orientation: landscape) {
  .setup-card { width: min(1060px, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 470px); column-gap: 64px; align-items: start; }
  .setup-card > * { grid-column: 2; }
  .setup-card > .brand { grid-column: 1; grid-row: 1 / span 7; align-self: start; }
}
@media (min-width: 1600px) and (min-height: 900px) { .setup-card, .home-layout, .panel { zoom: 1.2; } }
@media (min-width: 2400px) and (min-height: 1300px) { .setup-card, .home-layout, .panel { zoom: 1.5; } }
@media (max-width: 760px) {
  .home-layout { grid-template-columns: 1fr; gap: 26px; }
  .home-brand { grid-row: auto; }
  #homeLegend, .controls-panel { display: none; }
  .panel { padding: 22px; }
}
@media (hover: none) { .hud-hint { display: none; } }
@media (pointer: coarse) { .controls-panel, #homeLegend { display: none; } }
/* Short screens, such as phones in landscape: compact two-column menus. */
@media (max-height: 540px) {
  .overlay { padding-top: calc(10px + var(--safe-top)); padding-bottom: calc(10px + var(--safe-bottom)); }
  #pauseMenu { padding-top: calc(10px + var(--safe-top)); }
  .panel { padding: 16px 18px; }
  .menu-panel { width: min(560px, 100%); }
  .menu-panel .eyebrow { display: none; }
  .menu-panel h2 { font-size: 1.2rem; margin-bottom: 10px; }
  .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-item { min-height: var(--control-height); font-size: .96rem; padding: 8px var(--space-3); }
  .controls-panel { display: none; }
  .tabs { margin: 6px 0 12px; }
  .tab-panel { min-height: 0; }
  .wide-panel { max-height: calc(100dvh - 20px); }
  .save-slots { margin: 8px 0 10px; }
  .slot .thumb { width: 78px; }
  #setup, #home { padding-top: calc(14px + var(--safe-top)); padding-bottom: calc(14px + var(--safe-bottom)); }
  .setup-card { gap: 12px; }
  .brand .mark { display: none; }
  .home-layout { grid-template-columns: 1fr 1fr; gap: 20px 32px; }
  .home-brand .title { font-size: clamp(2rem, 8vh, 3.4rem); }
  .btn.xl { min-height: var(--control-height-lg); }
  #touchHelp { max-width: none; }
  .menu-support { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-top: var(--space-2); gap: var(--space-3); }
}
/* On shorter portrait phones, leave room for the pause guidance as well as keys. */
@media (max-width: 760px) and (min-height: 541px) and (max-height: 700px) {
  #pauseMenu { padding-top: calc(var(--space-3) + var(--safe-top)); }
  #pauseMenu .menu-panel { padding: var(--space-4) var(--space-4); }
  #pauseMenu .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pauseMenu .menu-item { font-size: .96rem; padding-inline: var(--space-3); }
}