/* Title, floor select, briefing and overlays. */
.screen { position: absolute; inset: 0; z-index: 10; overflow: auto; background: var(--bg); }
.screen[hidden], .overlay[hidden] { display: none; }
.eyebrow { margin: 0 0 4px; font: 600 0.72rem var(--mono); letter-spacing: 0.2em; color: var(--amber); }
h2 { margin: 0; font: 800 clamp(2rem, 4vw, 3rem)/0.95 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
button.primary, .button.primary, button.ghost, .menu button, .title-menu button, .actions button, .wide-button {
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(12, 16, 25, 0.82); padding: 12px 20px; border-radius: 10px;
  font: 700 1.05rem var(--display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink);
  transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
button.primary, .button.primary { background: linear-gradient(180deg, #ffc56a, #e8912e); color: #1a0f02; border-color: #ffd18a; box-shadow: 0 0 24px rgba(255, 170, 70, 0.28); }
button:hover:not(:disabled), .button:hover { transform: translateY(-1px); border-color: rgba(255, 209, 138, 0.7); }
button:focus-visible, .button:focus-visible { box-shadow: 0 0 0 3px rgba(255, 209, 138, 0.35), 0 0 24px rgba(255, 170, 70, 0.3); }
button.ghost { background: transparent; }
button.danger { color: #ff9d92; border-color: rgba(255, 90, 74, 0.4); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---- title ---------------------------------------------------------------- */
.title-screen { display: grid; overflow: hidden; }
.key-art { position: absolute; inset: -3%; background: #05070c url('./assets/art/key-art.webp') center / cover no-repeat; animation: drift 38s ease-in-out infinite alternate; filter: saturate(1.05); }
@keyframes drift { to { transform: scale(1.07) translate(-1.2%, 0.8%); } }
.title-screen::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(2, 3, 6, 0.75) 100%), linear-gradient(180deg, transparent 55%, rgba(2, 3, 6, 0.92)); pointer-events: none; }
.static-veil { position: absolute; inset: 0; background: url('./assets/art/fx-static.webp') 0 0 / 256px; opacity: 0.07; mix-blend-mode: screen; animation: static-roll 0.35s steps(4) infinite; pointer-events: none; z-index: 1; }
@keyframes static-roll { 25% { background-position: 60px 120px; } 50% { background-position: -80px 40px; } 75% { background-position: 30px -90px; } }
.back-link { position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 3; color: var(--muted); font: 600 0.8rem var(--mono); letter-spacing: 0.08em; text-decoration: none; padding: 6px 10px; border-radius: 6px; background: rgba(4, 6, 10, 0.5); }
.back-link:hover { color: var(--ink); }
.title-block { position: relative; z-index: 2; align-self: end; justify-self: center; display: grid; justify-items: center; gap: 16px; padding: 0 20px max(64px, 9vh); text-align: center; }
.title-tag { margin: 0; max-width: 560px; font: 500 0.95rem/1.5 var(--mono); color: #cfd7df; text-shadow: 0 2px 10px #000; }
.press-start { margin: 0; font: 800 1.5rem var(--display); letter-spacing: 0.32em; text-transform: uppercase; color: var(--amber); animation: pulse 1.8s ease-in-out infinite; text-shadow: 0 0 18px rgba(255, 170, 70, 0.6); }
@keyframes pulse { 50% { opacity: 0.35; } }
.title-menu { display: grid; gap: 8px; width: min(340px, 86vw); animation: menu-in 0.45s cubic-bezier(.2,1.2,.4,1); }
.title-menu button { width: 100%; backdrop-filter: blur(3px); }
.title-menu button:not(.primary) { background: rgba(6, 9, 15, 0.8); }
@keyframes menu-in { from { opacity: 0; transform: translateY(16px); } }
.edition, .copyright { position: absolute; z-index: 2; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; font: 500 0.75rem var(--mono); letter-spacing: 0.08em; color: rgba(233, 238, 242, 0.55); }
.edition { left: max(16px, env(safe-area-inset-left)); }
.copyright { right: max(16px, env(safe-area-inset-right)); }
/* Portrait phones: "cover" kept only the middle quarter of the 16:9 key art and cut the logo to "ead A". Show the whole
   logo band at the top instead, and stack the two footer lines so they no longer run into each other. */
@media (max-aspect-ratio: 4/5) {
  .key-art { inset: 0; background-size: 185% auto; background-position: 50% 4%; animation: none; }
  .title-screen::after { background: linear-gradient(180deg, transparent 30%, rgba(2, 3, 6, 0.85) 52%, rgba(2, 3, 6, 0.96)); }
}
@media (max-width: 560px) {
  .edition, .copyright { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; font-size: 0.7rem; }
  .edition { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 18px); }
  .title-block { padding-bottom: max(72px, 9vh); }
}

/* ---- floors ---------------------------------------------------------------- */
.floors-screen, .briefing-screen { padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 28px max(20px, env(safe-area-inset-left)); }
.zone-art { position: fixed; inset: 0; background: #05070c center / cover no-repeat; opacity: 0.4; filter: blur(1px) saturate(0.9); transition: background-image 0.3s; }
.zone-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 6, 10, 0.94) 20%, rgba(4, 6, 10, 0.55)); }
.screen-head { position: relative; display: flex; align-items: end; gap: 20px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 14px; }
.screen-head .progress-note { margin: 0 0 0 auto; font: 500 0.82rem var(--mono); color: var(--muted); }
.zone-tabs, .zone-blurb, .floor-grid { position: relative; max-width: 1180px; margin-inline: auto; }
.zone-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.zone-tab { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(8, 11, 18, 0.75); padding: 8px 14px; border-radius: 999px; font: 700 0.95rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.zone-tab[aria-selected='true'] { background: var(--amber); color: #1a0f02; border-color: var(--amber); }
.zone-tab.locked::after { content: ' · full game'; font: 500 0.7rem var(--mono); letter-spacing: 0.04em; text-transform: none; opacity: 0.75; }
.zone-blurb { margin-bottom: 16px; font: 500 0.95rem/1.5 var(--mono); color: #c8d0d8; }
.floor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.floor-card { position: relative; display: grid; gap: 6px; align-content: start; min-height: 170px; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid rgba(255, 214, 150, 0.2); background: linear-gradient(160deg, rgba(20, 25, 36, 0.92), rgba(8, 10, 16, 0.92)); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.floor-card:hover, .floor-card:focus-visible { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 179, 71, 0.4); }
.floor-number { font: 600 0.72rem var(--mono); letter-spacing: 0.18em; color: var(--amber); }
.floor-title { font: 800 1.6rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.floor-teaser { color: #bcc5ce; line-height: 1.4; font-size: 0.88rem; }
.floor-status { margin-top: auto; display: flex; align-items: center; gap: 8px; font: 600 0.78rem var(--mono); color: var(--muted); }
.mini-medal { width: 30px; height: 30px; object-fit: contain; }
.floor-reward { position: absolute; top: 12px; right: 12px; font: 600 0.62rem var(--mono); letter-spacing: 0.08em; color: var(--cyan); text-transform: uppercase; }
.floor-card.locked { opacity: 0.62; }
.floor-card.full-game { opacity: 1; border-style: dashed; border-color: rgba(82, 224, 255, 0.45); background: linear-gradient(160deg, rgba(10, 22, 30, 0.9), rgba(6, 9, 14, 0.92)); }
.floor-card.full-game .floor-status { color: var(--cyan); }
.floor-card.full-game .floor-status::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.18em; background: url(./assets/art/lock.webp) center / contain no-repeat; }

/* ---- briefing -------------------------------------------------------------- */
.briefing-screen { display: grid; place-items: center; }
.brief-card { position: relative; width: min(760px, 100%); padding: clamp(20px, 4vw, 36px); border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-edge); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: panel-in 0.35s cubic-bezier(.2,1.1,.4,1); }
.brief-copy { font: 500 1.02rem/1.55 var(--body); color: #d9e0e6; }
.brief-orders { margin: 0; padding-left: 20px; display: grid; gap: 6px; font: 500 0.9rem/1.45 var(--mono); color: #cdd5dc; }
.brief-orders .best { color: var(--amber); list-style: square; }
.brief-threats { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.chip { font: 600 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(82, 224, 255, 0.35); color: var(--cyan); background: rgba(82, 224, 255, 0.06); }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.module-option { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 14, 22, 0.8); }
.module-option strong { font: 700 1rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.module-option small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.module-option[aria-pressed='true'] { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 16px rgba(82, 224, 255, 0.2); }

/* ---- overlays -------------------------------------------------------------- */
.overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(2, 3, 6, 0.72); backdrop-filter: blur(3px); overflow: auto; }
.panel { position: relative; width: min(560px, 100%); padding: clamp(20px, 4vw, 32px); border-radius: 18px; background: var(--panel); border: 1px solid var(--panel-edge); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); animation: panel-in 0.32s cubic-bezier(.2,1.2,.4,1); }
.panel.compact { width: min(380px, 100%); }
.panel.wide { width: min(980px, 100%); }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }
.close { border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; }
.menu { display: grid; gap: 8px; margin-top: 16px; }
.result-panel { text-align: center; padding-top: 20px; }
.result-panel .medal { width: 168px; height: 168px; object-fit: contain; margin: -4px auto 4px; display: block; animation: stamp 0.7s cubic-bezier(.2,1.6,.4,1) 0.25s both; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6)); }
.result-panel .medal[hidden] { display: none; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-24deg); } 60% { opacity: 1; transform: scale(0.92) rotate(4deg); } 100% { transform: scale(1) rotate(-6deg); } }
.result-panel[data-outcome='failed'] { border-color: rgba(255, 90, 74, 0.45); }
.result-panel[data-outcome='failed'] .eyebrow { color: var(--danger); }
.result-panel[data-outcome='gold'] h2 { color: #ffd66e; }
.result-copy { color: #cdd5dc; line-height: 1.5; }
.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 14px 0 6px; }
.result-stats dt { font: 600 0.66rem var(--mono); letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.result-stats dd { margin: 2px 0 0; font: 700 1.25rem var(--display); letter-spacing: 0.04em; }
.result-stats .stat { display: grid; gap: 2px; padding: 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); animation: rise 0.4s ease-out both; }
.result-stats .stat:nth-child(2) { animation-delay: 0.08s; } .result-stats .stat:nth-child(3) { animation-delay: 0.16s; }
.result-stats .stat:nth-child(4) { animation-delay: 0.24s; } .result-stats .stat:nth-child(5) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.result-rule { font: 500 0.82rem var(--mono); color: var(--amber); min-height: 1em; }
.result-panel .actions { justify-content: center; }
.transcript { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--tape); background: rgba(255, 122, 184, 0.07); text-align: left; font: 500 0.88rem/1.5 var(--mono); color: #f3d9e6; min-height: 3em; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
fieldset { min-width: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
legend { font: 700 0.95rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); padding: 0 6px; }
.slider { display: grid; grid-template-columns: minmax(64px, 100px) minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 0.9rem; }
.slider input { accent-color: var(--amber); min-width: 0; width: 100%; }
.slider output { font: 600 0.8rem var(--mono); text-align: right; }
.slider select { grid-column: 2 / 4; padding: 6px 8px; border-radius: 8px; background: #0c1119; border: 1px solid rgba(255, 255, 255, 0.2); }
.toggle { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--amber); margin-top: 2px; }
.toggle span { display: grid; gap: 2px; }
.toggle small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.controls-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 0.85rem; }
.controls-help dt { font: 700 0.9rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.controls-help dd { margin: 0; color: #cdd5dc; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 64vh; overflow: auto; }
.archive-entry { padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 122, 184, 0.3); background: rgba(255, 122, 184, 0.05); }
.archive-entry span { font: 600 0.66rem var(--mono); letter-spacing: 0.14em; color: var(--tape); }
.archive-entry h3 { margin: 4px 0; font: 800 1.2rem var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.archive-entry p { margin: 0; font: 500 0.84rem/1.5 var(--mono); color: #d8cfd6; }
.archive-entry.locked { opacity: 0.45; border-color: rgba(255, 255, 255, 0.12); background: transparent; }
.cutscene { background: #020305; }
.cutscene-text { position: relative; z-index: 2; max-width: 720px; font: 500 clamp(1.05rem, 2.2vw, 1.45rem)/1.6 var(--mono); color: #e8e2d6; text-shadow: 0 0 14px rgba(82, 224, 255, 0.35); min-height: 6em; }
.cutscene button { position: absolute; z-index: 2; right: 24px; bottom: 24px; }
.cutscene .static-veil { opacity: 0.16; }
.demo-panel { border-color: rgba(82, 224, 255, 0.4); }
.demo-list { padding-left: 20px; display: grid; gap: 6px; color: #cdd5dc; }
html.high-contrast { --muted: rgba(255, 255, 255, 0.85); --panel: rgba(0, 0, 0, 0.95); }
@media (max-width: 560px) { .floor-grid { grid-template-columns: 1fr; } .floor-card { min-height: 0; } .result-panel .medal { width: 120px; height: 120px; } }
.note { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
.file-button { position: relative; display: block; text-align: center; cursor: pointer; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 3px solid #ffd18a; outline-offset: 3px; }
.shift-panel { position: relative; max-width: 1180px; margin: -4px auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 179, 71, 0.35); background: linear-gradient(90deg, rgba(40, 26, 8, 0.85), rgba(10, 12, 18, 0.85)); }
.shift-panel div { display: grid; gap: 2px; }
.shift-panel strong { font: 800 1.2rem var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.shift-panel span { font: 500 0.85rem var(--mono); color: #d5dce3; }
.shift-panel button { flex: none; }
@media (max-width: 560px) { .shift-panel { flex-direction: column; align-items: stretch; } }
.result-shift { margin: 6px 0 0; font: 600 0.85rem var(--mono); letter-spacing: 0.04em; color: var(--cyan); }

/* ---- hints ------------------------------------------------------------------ */
.pause-tip { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(82, 224, 255, 0.4); background: rgba(8, 20, 28, 0.8); font: 500 0.92rem/1.5 var(--mono); color: #cfeaf3; }
.pause-tip[hidden], [data-show-tip][hidden] { display: none; }

/* Back controls carry a drawn chevron instead of an arrow glyph. */
.back-link::before, button.ghost[data-back]::before { content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.55em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.05em) rotate(45deg); }

/* Toggles and the close button are drawn, not browser defaults or text glyphs. */
.toggle input[type='checkbox'] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.4); background: #0a0f17; cursor: pointer; }
.toggle input[type='checkbox']::after { content: ''; width: 10px; height: 5px; margin-top: -2px; border-left: 2.5px solid #1a0f02; border-bottom: 2.5px solid #1a0f02; transform: rotate(-45deg) scale(0); transition: transform 0.12s ease-out; }
.toggle input[type='checkbox']:checked { background: var(--amber); border-color: var(--amber); }
.toggle input[type='checkbox']:checked::after { transform: rotate(-45deg) scale(1); }
.toggle input[type='checkbox']:focus-visible, .slider input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button.close { position: relative; font-size: 0; }
button.close::before, button.close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
button.close::after { transform: translate(-50%, -50%) rotate(-45deg); }