:root {
  color-scheme: dark;
  --navy: #142433;
  --gunmetal: #354b59;
  --storm: #567787;
  --sea: #3d7981;
  --mist: #c9d4cf;
  --brass: #d8a65a;
  --ember: #d66b45;
  --line: rgba(201, 212, 207, .23);
  font-family: "Segoe UI", Tahoma, sans-serif;
  background: var(--navy);
  color: var(--mist);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: linear-gradient(180deg, #1c3544 0, var(--navy) 38rem); }
button, a { font: inherit; }
a { color: var(--mist); text-underline-offset: .22em; }
a:hover { color: var(--brass); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; z-index: 30; top: -8rem; left: 1rem; padding: .7rem 1rem; background: var(--brass); color: var(--navy); }
.skip-link:focus { top: 1rem; }
.masthead, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1440px; margin: 0 auto; padding: 1.4rem clamp(1rem, 3vw, 3rem); }
.masthead { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: .9rem; align-items: center; color: var(--brass); font-weight: 800; letter-spacing: .19em; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 2px solid var(--brass); font-size: .85rem; letter-spacing: -.08em; }
.release-label, .eyebrow, .plot-card, .device-note, .step-number, .site-footer { font-family: Consolas, "Courier New", monospace; letter-spacing: .09em; }
.release-label { color: var(--storm); font-size: .72rem; text-align: right; }
main { overflow: clip; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.13; }
h1 { margin-bottom: 1.5rem; font-size: clamp(2.9rem, 6vw, 6rem); text-transform: uppercase; letter-spacing: -.035em; }
h1 span { color: var(--brass); }
h2 { margin-bottom: .45rem; font-size: clamp(1.75rem, 3vw, 2.9rem); }
h3 { margin-bottom: .45rem; font-size: 1.05rem; color: var(--brass); }
.eyebrow { color: var(--brass); font-size: .78rem; font-weight: 700; }
.lead { max-width: 43rem; color: #e1e7e2; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; }
.intro { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); min-height: 33rem; max-width: 1440px; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 3vw, 3rem); }
.intro::before { content: ""; position: absolute; z-index: -1; inset: 0 -50vw; background: radial-gradient(ellipse at 68% 56%, rgba(61,121,129,.27), transparent 49%), linear-gradient(0deg, rgba(12,32,45,.82), transparent 48%); }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.primary-button, .secondary-button { border: 2px solid var(--brass); border-radius: 0; padding: .9rem 1.3rem; font-weight: 700; letter-spacing: .055em; }
.primary-button { min-width: 11rem; color: var(--navy); background: var(--brass); text-transform: uppercase; }
.primary-button:hover { background: #ecc27e; }
.primary-button span { margin-left: .55rem; }
.secondary-button { color: var(--mist); background: var(--gunmetal); }
.secondary-button:hover:not(:disabled) { background: var(--sea); }
.text-link { font-weight: 600; }
.device-note { margin: 1.7rem 0 0; color: #a9bab8; font-size: .72rem; line-height: 1.6; }
.plot-card { position: relative; min-height: 19rem; border: 2px solid rgba(216,166,90,.8); padding: 1rem; color: var(--brass); background: rgba(13,31,43,.72); box-shadow: 15px 15px 0 rgba(6,22,32,.48); font-size: .68rem; }
.plot-card-heading, .plot-card-bottom { display: flex; justify-content: space-between; gap: 1rem; }
.plot-card-heading { border-bottom: 1px solid var(--line); padding-bottom: .65rem; }
.plot-card-bottom { border-top: 1px solid var(--line); padding-top: .65rem; }
.plot-grid { height: 13rem; margin: .9rem 0; background-image: linear-gradient(rgba(201,212,207,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(201,212,207,.12) 1px, transparent 1px), radial-gradient(circle at 48% 39%, transparent 0 6px, var(--ember) 7px 8px, transparent 9px), radial-gradient(circle at 48% 39%, rgba(214,107,69,.17), transparent 20%); background-size: 8.333% 10%, 8.333% 10%, 100% 100%, 100% 100%; }
.game-section { padding: 3rem clamp(0px, 3vw, 3rem) 4rem; background: #0d1d29; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-heading, .game-shell, .game-status-row { max-width: 1280px; margin-left: auto; margin-right: auto; }
.section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.game-shell { position: relative; width: 100%; min-height: 650px; border: 2px solid var(--brass); background: #102636; }
.game-shell iframe { display: block; width: 100%; height: min(72vw, 800px); min-height: 650px; border: 0; background: var(--navy); }
.game-shell:fullscreen { display: grid; place-items: center; width: 100vw; height: 100vh; border: 0; background: var(--navy); }
.game-shell:fullscreen iframe { width: 100vw; height: 100vh; min-height: 0; }
.exit-fullscreen { position: absolute; z-index: 5; right: .8rem; bottom: .8rem; border: 2px solid var(--brass); padding: .5rem .7rem; color: var(--navy); background: var(--brass); font-size: .8rem; font-weight: 700; }
.exit-fullscreen:hover { background: #ecc27e; }
.game-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; background: linear-gradient(#385b68 0 45%, #265261 46%, #153447 100%); }
.game-placeholder .horizon { width: min(70%, 35rem); height: 2px; margin-bottom: 3rem; background: var(--brass); box-shadow: 0 14px 0 rgba(201,212,207,.25), 0 28px 0 rgba(201,212,207,.15); }
.placeholder-title { margin-bottom: .45rem; color: var(--brass); font-size: 1.55rem; font-weight: 700; }
.game-status-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.3rem; }
.game-status { margin: .5rem 0; font-size: .88rem; }
.status-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .88rem; }
.text-button { padding: .35rem .1rem; border: 0; color: var(--brass); background: transparent; text-decoration: underline; text-underline-offset: .2em; }
.how-section { display: grid; grid-template-columns: minmax(12rem, .42fr) 1fr; gap: 2rem; max-width: 1440px; margin: 0 auto; padding: 5rem clamp(1rem, 3vw, 3rem); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.steps li { display: flex; gap: .9rem; border-top: 2px solid var(--brass); padding-top: 1rem; line-height: 1.5; }
.steps p { margin-bottom: 0; color: #aebeba; font-size: .93rem; }
.step-number { color: var(--storm); }
.controls-note { grid-column: 2; margin-top: 1rem; border-left: 2px solid var(--sea); padding-left: 1rem; color: #aebeba; line-height: 1.55; }
.site-footer { border-top: 1px solid var(--line); color: #aebeba; font-size: .72rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-divider { color: var(--brass); padding: 0 .5rem; }
.legal-page { max-width: 60rem; margin: 0 auto; min-height: calc(100vh - 10rem); padding: 4rem clamp(1rem, 3vw, 3rem); line-height: 1.7; }
.legal-page h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.legal-page h2 { margin-top: 2.5rem; font-size: 1.4rem; color: var(--brass); }
.notice { border: 2px solid var(--brass); padding: 1rem 1.2rem; background: rgba(216,166,90,.08); }

@media (max-width: 860px) {
  .intro { grid-template-columns: 1fr; padding-top: 4rem; padding-bottom: 4rem; }
  .plot-card { display: none; }
  .how-section { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .controls-note { grid-column: auto; }
}
@media (max-width: 600px) {
  .masthead, .site-footer { flex-wrap: wrap; }
  .brand-name { font-size: .9rem; }
  .game-section { padding-left: 0; padding-right: 0; }
  .section-heading, .game-status-row { padding: 0 1rem; }
  .game-shell { border-left: 0; border-right: 0; }
  .game-shell iframe { height: 650px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }