/* One fixed game surface. The play area's available size determines the
   screen size; control targets never depend on a page scroll position. */
:root { --app-height: 100svh; }
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }
html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; }
#console {
  --session-height: 48px;
  --screen-chrome: 30px; --screen-gutter: 14px;
  --control-deck: clamp(190px, calc(var(--app-height) * .34), 260px);
  --pad-size: min(calc((100vw - 24px) * .52), calc(var(--control-deck) - 24px), 220px);
  --action-size: min(clamp(80px, 25vw, 110px), calc((var(--control-deck) - 36px) / 1.9));
  width: min(100%, 820px); max-width: 820px; height: var(--app-height);
  min-height: 0; margin: 0 auto; overflow: hidden; touch-action: none;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 6px;
}
#console .topbar { flex: 0 0 44px; min-height: 0; margin: 0; }
#console #fullscreen { display: flex; justify-content: center; gap: 7px; width: auto; min-width: 118px; padding: 0 8px; font-size: 14px; white-space: nowrap; background: #ffffff0d; }
#console #fullscreen[aria-pressed=true] { color: var(--mint); background: #b6e4ce18; }
#console .game-tabs { flex: 0 0 48px; min-height: 0; margin: 0; padding: 3px; }
#console .game-tab { min-height: 40px; font-size: 14px; gap: 8px; }
#console .play-area {
  flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; container-type: size;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  grid-template-rows: minmax(0, 1fr) var(--session-height) var(--control-deck);
  grid-template-areas: 'screen screen' 'session session' 'dpad action'; gap: 0;
}
#console .screen-section {
  grid-area: screen; max-width: 640px; min-width: 0; margin: 0 auto; align-self: center;
  width: min(100%, calc((100cqh - var(--control-deck) - var(--session-height) - var(--screen-chrome)) * 4 / 3 + var(--screen-gutter)));
}
#console .screen-frame { padding: 6px 6px 0; border-width: 1px; border-radius: 11px; }
#console .screen-bottom { height: 22px; font-size: 11px; gap: 8px; }
#game-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#console .mode-note { flex-shrink: 0; font-size: 10px; letter-spacing: .035em; }
#console .session-bar {
  grid-area: session; width: min(100%, 640px); height: var(--session-height); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px;
}
#console .session-bar .text-button { min-width: 44px; min-height: 44px; padding: 4px; gap: 5px; font-size: 14px; }
#restart { justify-self: start; }
#pause { justify-self: end; }
#console .system-controls { grid-area: auto; margin: 0; gap: 8px; align-self: center; }
#console .system-button { min-width: 56px; min-height: 44px; gap: 6px; font-size: 11px; letter-spacing: .04em; }
#console .system-button > span { width: 44px; height: 13px; }
#console .dpad-panel { margin: 0; gap: 6px; justify-self: start; align-self: center; }
#console .dpad { width: var(--pad-size); height: var(--pad-size); }
#console .action-panel { margin: 0; justify-self: end; align-self: center; }
#console .action-buttons { display: block; position: relative; width: calc(var(--action-size) * 1.6); height: calc(var(--action-size) * 1.9 + 36px); padding: 0; }
#console .action { width: var(--action-size); height: var(--action-size); font-size: 34px; }
#console .action-cell { position: absolute; gap: 6px; }
#console .b-cell { padding: 0; left: 0; bottom: 8px; }
#console .a-cell { right: 0; top: 8px; }
#console .control-caption { font-size: 12px; letter-spacing: .06em; }
#console > .help { display: none; }
#console .notice { pointer-events: none; }
#console[data-game=duck] { --control-deck: 64px; }
#console[data-game=duck] .play-area { grid-template-areas: 'screen screen' 'session session' 'hunt hunt'; }
#console .hunt-controls { padding: 0; gap: 10px; align-self: center; }
#console .hunt-controls .aim-symbol { font-size: 32px; }
#console .hunt-controls strong { font-size: 16px; }
#console .hunt-controls p { font-size: 13px; margin: 4px 0 0; max-width: 34ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.controller-dialog { max-height: calc(var(--app-height) - 24px); overscroll-behavior: contain; touch-action: pan-y; }

@media (orientation: landscape) {
  #console {
    --control-deck: 0px; --rail-width: clamp(150px, 24vw, 224px);
    --pad-size: var(--rail-width); --preferred-action: clamp(82px, 12vw, 108px);
    width: min(100%, 1280px); max-width: 1280px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 44px minmax(0, 1fr); gap: 6px 16px;
  }
  #console .topbar, #console .game-tabs { margin: 0; min-width: 0; height: 44px; }
  #console .game-tabs { align-self: center; }
  #console .game-tab { min-height: 36px; font-size: 13px; }
  #console .wordmark { font-size: 12px; gap: 6px; }
  #console .wordmark { display: none; }
  #console .tools { gap: 0; }
  #console .topbar .icon-button { width: 36px; height: 40px; }
  #console .play-area {
    grid-column: 1 / -1; grid-row: 2; gap: 0 10px;
    grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--rail-width);
    grid-template-rows: minmax(0, 1fr) var(--session-height);
    grid-template-areas: 'dpad screen action' 'dpad session action';
  }
  #console .screen-section { max-width: 960px; width: min(100%, calc((100cqh - var(--session-height) - var(--screen-chrome)) * 4 / 3 + var(--screen-gutter))); }
  #console .dpad-panel, #console .action-panel { justify-self: center; align-self: center; }
  #console .dpad { width: min(var(--pad-size), calc(100cqh - 24px)); height: min(var(--pad-size), calc(100cqh - 24px)); }
  #console .session-bar { width: 100%; }
  #console .session-bar > .text-button { width: 44px; min-width: 44px; font-size: 0; gap: 0; }
  #console .session-bar #pause-label { display: none; }
  #console .system-controls { gap: 4px; }
  #console .system-button { min-width: 44px; }
  #console .system-button > span { width: 36px; }
  #console .action-buttons { --action-size: min(var(--preferred-action), calc(var(--rail-width) / 1.6), calc((100cqh - 36px) / 1.9)); }
  #console[data-game=duck] .play-area { grid-template-areas: 'hunt screen empty' 'hunt session empty'; }
  #console .hunt-controls { flex-direction: column; text-align: center; }
  #console .hunt-controls strong { font-size: 14px; }
  #console .hunt-controls p { -webkit-line-clamp: 4; font-size: 12px; }
}
@media (orientation: landscape) and (max-width: 540px) {
  #console { --rail-width: 130px; }
  #console .play-area { column-gap: 8px; }
  #console .session-bar, #console .system-controls { gap: 0; }
}
@media (max-width: 460px) { #console .brand-name, #console .edition { display: none; } }
@media (orientation: landscape) and (max-width: 700px) {
  #console .wordmark { font-size: 11px; gap: 5px; }
  #console .mark { font-size: 22px; margin-right: 2px; }
  #console .topbar .icon-button { width: 32px; }
  #console .tab-number { display: none; }
  #console .game-tab { font-size: 12px; gap: 3px; }
}
@media (orientation: landscape) {
  /* The visible viewport can be shorter than CSS's layout viewport while
     mobile browser bars are open. fitViewport sets this class from its height. */
  #console.compact-height {
    --session-height: 44px;
    --screen-chrome: 8px;
    grid-template-rows: 36px minmax(0, 1fr); row-gap: 4px;
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  #console.compact-height .topbar, #console.compact-height .game-tabs { height: 36px; }
  #console.compact-height .topbar .icon-button { height: 36px; }
  #console.compact-height .game-tab { min-height: 28px; }
  #console.compact-height .screen-bottom { display: none; }
  #console.compact-height .dpad-panel > .control-caption, #console.compact-height .action-cell > .control-caption { display: none; }
  #console.compact-height .dpad { width: min(var(--pad-size), calc(100cqh - 8px)); height: min(var(--pad-size), calc(100cqh - 8px)); }
  #console.compact-height .action-buttons { --action-size: min(var(--preferred-action), calc(var(--rail-width) / 1.6), calc((100cqh - 16px) / 1.9)); height: calc(var(--action-size) * 1.9 + 16px); }
}
/* Expanded play also works when the browser cannot hide its own chrome. */
#console.immersive { --screen-chrome: 0px; --screen-gutter: 0px; width: 100%; max-width: none; }
#console.immersive .game-tabs, #console.immersive .wordmark, #console.immersive .screen-bottom { display: none; }
#console.immersive .topbar { grid-column: 1 / -1; justify-content: flex-end; }
#console.immersive .screen-section { max-width: none; }
#console.immersive .screen-frame { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #000; }
#console.immersive .screen { border-radius: 0; }
@container (max-height: 160px) {
  .overlay p { display: none; }
  .overlay-content:has(.character-picker:not([hidden])) h1,
  .overlay-content:has(#back-to-hunt:not([hidden])) h1 { display: none; }
  .overlay .play-button { min-height: 40px; }
}
@container (max-height: 110px) {
  .overlay { padding: 6px; }
  .overlay h1 { display: none; }
  .overlay .character { min-height: 28px; padding: 4px; }
  .overlay .character-picker { margin-bottom: 4px; }
  .overlay .play-button { min-height: 34px; padding: 6px 8px; }
}
/* Discovered content uses the same fixed viewport and large touch targets. */
#console.contra-unlocked .game-tabs { grid-template-columns: 1.45fr 1fr .8fr; gap: 2px; }
#console.contra-unlocked .game-tab { gap: 4px; font-size: 12px; padding: 2px 4px; }
#console.contra-unlocked .tab-number { display: none; }
.peach-dot { background: #f597ce; }
#player-health { appearance: none; -webkit-appearance: none; height: 5px; width: 100%; flex-shrink: 0; border: 0; background: #43302e; }
#player-health::-webkit-progress-bar { background: #43302e; }
#player-health::-webkit-progress-value { background: #b6ffcc; }
#player-health::-moz-progress-bar { background: #b6ffcc; }
#player-hp { color: #b6ffcc; }
.boss-bottom { height: 22%; }
#genie-cheats { display: grid; gap: 8px; margin-bottom: 18px; }
.cheat-option { display: flex; gap: 14px; align-items: center; padding: 12px; min-height: 64px; background: #ffffff07; border: 1px solid #455353; border-radius: 8px; cursor: pointer; }
.cheat-option:has(input:checked) { border-color: var(--mint); background: #b6e4ce12; }
.cheat-option input { width: 26px; height: 26px; flex: 0 0 26px; accent-color: #b6e4ce; }
.cheat-option strong, .cheat-option small { display: block; }
.cheat-option small { color: #b6bfbe; line-height: 1.4; margin-top: 5px; }
#genie-game { color: var(--mint); }
#genie-dialog, #genie-dialog * { touch-action: pan-y; }
.duck-mode-picker { display: grid; gap: 6px; margin: 0 0 12px; text-align: left; }
.duck-mode-picker > span { font-size: 14px; letter-spacing: .1em; color: var(--mint); }
#duck-mode { width: 100%; min-width: 0; min-height: 48px; padding: 10px; border: 1px solid #739384; border-radius: 8px; background: #142124; color: #eaf3ee; color-scheme: dark; font: inherit; font-size: 16px; cursor: pointer; }
#duck-mode:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@container (max-height: 280px) {
  .overlay:has(#duck-options:not([hidden])) { padding: 12px; }
  .overlay-content:has(#duck-options:not([hidden])) p,
  .overlay-content:has(#duck-options:not([hidden])) .eyebrow { display: none; }
  .overlay-content:has(#duck-options:not([hidden])) h1 { font-size: 26px; margin: 0 0 10px; }
}
@container (max-height: 200px) {
  .overlay-content:has(#duck-options:not([hidden])) h1,
  .duck-mode-picker > span { display: none; }
  .duck-mode-picker { margin-bottom: 8px; }
}
@container (max-height: 110px) {
  .overlay:has(#duck-options:not([hidden])) { padding: 6px; }
  #duck-mode { min-height: 44px; padding: 6px; font-size: 14px; }
  .duck-mode-picker { margin-bottom: 4px; }
}
@container (max-height: 200px) {
  .overlay-content:has(#contra-options:not([hidden])) p { display: none; }
  .boss-bottom > span { display: none; }
}
@container (max-height: 160px) {
  .overlay-content:has(#contra-options:not([hidden])) h1 { display: none; }
  #contra-options { margin-bottom: 6px; }
  #console .character-picker { gap: 4px; }
  #console .character { padding: 6px 4px; gap: 4px; }
}