:root {
  color-scheme: dark;
  --ink: #f1efe4;
  --muted: #9892a4;
  --violet: #ba8cff;
  --violet-hot: #dfc3ff;
  --acid: #d8ff55;
  --red: #ff476f;
  --panel: #111019;
  --black: #08070d;
  font-family: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--black); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% 38%, rgba(100, 49, 140, .18), transparent 34rem),
    radial-gradient(circle at 18% 96%, rgba(94, 130, 43, .08), transparent 26rem),
    #08070d;
}

button, a { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 64px);
  border-bottom: 1px solid #292632;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
}

.back { color: #aaa6b4; text-decoration: none; transition: color .2s; }
.back:hover { color: var(--acid); }
.back span { margin-right: 9px; font-size: 17px; vertical-align: -1px; }
.topbar__right { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.theme-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #37323f; border-radius: 2px; color: #8f8998; background: #111018; font: 700 8px/1 "Courier New", monospace; letter-spacing: .12em; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.theme-toggle:hover { color: var(--acid); border-color: #62576e; }
.theme-toggle__icon { color: var(--violet); font-size: 13px; line-height: .7; }
.status { color: #777281; }
.status i { display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); animation: pulse 1.8s infinite; }

.shell {
  width: min(1380px, calc(100% - 48px));
  min-height: calc(100vh - 116px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, .68fr) minmax(560px, 1.45fr);
  align-items: center;
  gap: clamp(38px, 6vw, 100px);
  padding: 46px 0 54px;
}

.intro { align-self: center; padding-bottom: 5vh; }
.eyebrow { margin: 0 0 21px; color: var(--violet); font-size: 10px; font-weight: 700; letter-spacing: .21em; }
h1 { margin: 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(65px, 8.2vw, 125px); font-weight: 900; line-height: .76; letter-spacing: -.045em; transform: scaleX(.82); transform-origin: left center; }
h1 span { display: block; color: transparent; -webkit-text-stroke: 2px var(--violet); text-shadow: 0 0 25px rgba(186, 140, 255, .16); }
.lede { margin: 34px 0 30px; color: #bbb6c4; font-family: Arial, sans-serif; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; }
.lede em { color: var(--acid); font-style: normal; }

.legend { border-top: 1px solid #26232d; border-bottom: 1px solid #26232d; padding: 17px 0 10px; }
.legend div { min-height: 33px; display: flex; align-items: center; gap: 7px; }
.legend span { margin-left: auto; color: #726d7b; font-size: 9px; letter-spacing: .17em; }
kbd { min-width: 34px; padding: 5px 7px; border: 1px solid #37323f; border-radius: 2px; color: #c9c4cf; background: #131119; box-shadow: inset 0 -2px #09080c; font: 700 9px/1 "Courier New", monospace; text-align: center; }
.flavor { margin-top: 28px; color: #5c5864; font-size: 9px; line-height: 1.75; letter-spacing: .08em; text-transform: uppercase; }

.cabinet {
  position: relative;
  padding: clamp(16px, 2.1vw, 30px);
  border: 1px solid #322e3a;
  background: linear-gradient(145deg, #191721, #0c0b11 72%);
  box-shadow: 0 35px 90px #000, inset 0 1px 0 rgba(255,255,255,.05), 0 0 80px rgba(122,75,161,.09);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}

.cabinet__screws i { position: absolute; z-index: 3; width: 4px; height: 4px; border-radius: 50%; background: #4c4754; box-shadow: 0 0 0 2px #09080c; }
.cabinet__screws i:nth-child(1) { top: 10px; left: 12px; }
.cabinet__screws i:nth-child(2) { top: 10px; right: 12px; }
.cabinet__screws i:nth-child(3) { bottom: 10px; left: 12px; }
.cabinet__screws i:nth-child(4) { bottom: 10px; right: 12px; }

.hud { display: grid; grid-template-columns: 1.15fr .8fr .7fr 1fr; gap: 10px; margin-bottom: 13px; padding: 1px 4px; }
.hud div { display: flex; align-items: flex-end; gap: 9px; }
.hud span { padding-bottom: 3px; color: #686371; font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.hud strong { color: var(--ink); font-size: clamp(14px, 1.3vw, 20px); font-weight: 400; line-height: 1; letter-spacing: .05em; }
.hud .ammo strong { color: var(--violet); font-size: clamp(10px, 1vw, 15px); letter-spacing: .15em; white-space: nowrap; }

.screen { position: relative; overflow: hidden; border: 1px solid #373140; background: #07070b; box-shadow: inset 0 0 35px #000, 0 0 25px rgba(180, 136, 255, .07); aspect-ratio: 15 / 11; cursor: crosshair; }
canvas { display: block; width: 100%; height: 100%; }
.scanlines { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .14; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.55) 3px 4px); mix-blend-mode: multiply; }

.overlay { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; background: radial-gradient(circle, rgba(22,17,29,.82), rgba(5,5,8,.96) 70%); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.overlay.is-visible { opacity: 1; visibility: visible; }
.overlay__tag { margin: 0 0 10px !important; color: var(--violet) !important; font-size: 8px !important; font-weight: 700; letter-spacing: .28em; }
.overlay h2 { margin: 0; color: var(--ink); font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(42px, 5.5vw, 78px); line-height: .87; letter-spacing: -.01em; }
.overlay h2 span { color: transparent; -webkit-text-stroke: 1px var(--violet); }
.overlay p { margin: 18px 0 22px; color: #9993a3; font-family: Arial, sans-serif; font-size: clamp(11px, 1.1vw, 14px); line-height: 1.55; }
.overlay small { margin-top: 11px; color: #55505b; font-size: 7px; letter-spacing: .13em; }
.sigil { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 11px; border: 1px solid #6e528e; border-radius: 50%; color: var(--acid); font-size: 20px; box-shadow: 0 0 25px rgba(186,140,255,.2); }
.sigil--red { color: var(--red); border-color: #824052; }
.primary { min-width: 205px; height: 45px; border: 1px solid var(--acid); color: #0b0d07; background: var(--acid); font: 700 10px/1 "Courier New", monospace; letter-spacing: .09em; cursor: pointer; box-shadow: 0 0 20px rgba(216,255,85,.12); transition: transform .15s, box-shadow .15s; }
.primary span { margin-left: 15px; font-size: 14px; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(216,255,85,.25); }
.primary--red { border-color: var(--red); background: var(--red); }
.overlay--pause { background: rgba(5,5,8,.9); }
.overlay--pause h2 { font-size: clamp(46px, 6vw, 80px); }

.touch-controls { display: none; grid-template-columns: 150px 1fr 1fr; align-items: center; gap: 12px; margin-top: 17px; }
.dpad { display: grid; grid-template: repeat(2, 38px) / repeat(3, 38px); gap: 3px; }
.dpad button, .touch-action { border: 1px solid #393440; color: #bbb5c4; background: #16141c; font: 700 14px "Courier New", monospace; touch-action: manipulation; }
.dpad button[data-dir="up"] { grid-area: 1 / 2; }
.dpad button[data-dir="left"] { grid-area: 2 / 1; }
.dpad button[data-dir="down"] { grid-area: 2 / 2; }
.dpad button[data-dir="right"] { grid-area: 2 / 3; }
.touch-action { height: 58px; color: var(--violet-hot); font-size: 10px; letter-spacing: .12em; }
.touch-action span { display: block; margin-bottom: 4px; font-size: 17px; }
.touch-action--dash { color: var(--acid); }

.cabinet__footer { display: flex; justify-content: space-between; padding: 16px 4px 0; color: #4c4852; font-size: 7px; letter-spacing: .11em; }
.page-footer { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); border-top: 1px solid #201e26; color: #45414b; font-size: 7px; letter-spacing: .13em; }

@keyframes pulse { 50% { opacity: .3; box-shadow: 0 0 3px var(--acid); } }
@keyframes shake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-5px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -1px); } }
.screen.shake { animation: shake .22s linear; }

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; width: min(760px, calc(100% - 32px)); gap: 28px; padding-top: 35px; }
  .intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px 30px; padding: 0; }
  .eyebrow, .intro h1 { grid-column: 1; }
  .lede, .legend { grid-column: 2; }
  .lede { grid-row: 1 / 3; align-self: end; margin-bottom: 20px; }
  .legend { grid-row: 3; }
  .flavor { display: none; }
  h1 { font-size: clamp(64px, 14vw, 105px); }
}

@media (hover: none), (pointer: coarse) { .touch-controls { display: grid; } }

@media (max-width: 620px) {
  .topbar { height: 54px; padding: 0 16px; }
  .status { font-size: 0; }
  .status i { margin: 0; }
  .topbar__right { gap: 12px; }
  .theme-toggle { padding: 7px; }
  .theme-toggle__label { display: none; }
  .shell { width: 100%; padding: 28px 0 30px; }
  .intro { display: block; padding: 0 20px; }
  .eyebrow { margin-bottom: 16px; }
  h1 { font-size: 73px; }
  .lede { margin: 27px 0 19px; font-size: 15px; }
  .legend { display: none; }
  .cabinet { padding: 14px 8px 17px; clip-path: none; border-left: 0; border-right: 0; }
  .hud { gap: 5px; }
  .hud div { display: block; }
  .hud span { display: block; margin-bottom: 5px; }
  .hud strong { font-size: 14px; }
  .screen { aspect-ratio: 15 / 12; }
  .touch-controls { padding: 0 8px; }
  .cabinet__footer { padding-inline: 8px; }
  .page-footer { padding: 0 16px; }
  .page-footer span:first-child { display: none; }
  .page-footer span:last-child { margin-left: auto; }
}

@media (max-height: 740px) and (min-width: 981px) {
  .shell { padding-top: 24px; padding-bottom: 24px; }
  .flavor { display: none; }
  .lede { margin: 23px 0 18px; }
}


html[data-theme="light"] {
  color-scheme: light;
  background: #e8e3d8;
  --ink: #1d1923;
  --muted: #6e6675;
  --violet: #7541a8;
  --violet-hot: #532478;
  --acid: #91ad11;
  --red: #d52e57;
  --panel: #ded8cc;
  --black: #eee9de;
}

html[data-theme="light"] body { background: radial-gradient(circle at 76% 38%, rgba(113, 60, 151, .12), transparent 34rem), radial-gradient(circle at 18% 96%, rgba(142, 171, 34, .10), transparent 26rem), #eee9de; }
html[data-theme="light"] .noise { opacity: .055; mix-blend-mode: multiply; }
html[data-theme="light"] .topbar { border-bottom-color: #c9c1b6; }
html[data-theme="light"] .back { color: #665f6c; }
html[data-theme="light"] .status { color: #716979; }
html[data-theme="light"] .theme-toggle { color: #554d5d; border-color: #b4a9ba; background: #e3ddd2; }
html[data-theme="light"] .theme-toggle:hover { color: #532478; border-color: #7541a8; }
html[data-theme="light"] h1 { color: #17131c; }
html[data-theme="light"] h1 span { -webkit-text-stroke-color: #7541a8; text-shadow: 0 0 25px rgba(117, 65, 168, .12); }
html[data-theme="light"] .lede { color: #4e4855; }
html[data-theme="light"] .legend { border-color: #c8c0b5; }
html[data-theme="light"] .legend span, html[data-theme="light"] .flavor { color: #79717e; }
html[data-theme="light"] kbd { color: #453d4c; border-color: #bcb2c0; background: #e4ddd2; box-shadow: inset 0 -2px #c7beb3; }
html[data-theme="light"] .cabinet { border-color: #aaa0ae; background: linear-gradient(145deg, #e2dcd2, #cfc8bd 72%); box-shadow: 0 35px 75px rgba(43, 32, 48, .2), inset 0 1px 0 rgba(255,255,255,.7), 0 0 70px rgba(101,54,139,.08); }
html[data-theme="light"] .cabinet__screws i { background: #88808d; box-shadow: 0 0 0 2px #d4cec3; }
html[data-theme="light"] .hud span { color: #6f6775; }
html[data-theme="light"] .screen { border-color: #968b9b; background: #f4efe3; box-shadow: inset 0 0 28px rgba(62,44,70,.12), 0 0 25px rgba(90,48,126,.08); }
html[data-theme="light"] .scanlines { opacity: .07; }
html[data-theme="light"] .overlay { background: radial-gradient(circle, rgba(239,233,222,.88), rgba(218,210,200,.97) 72%); }
html[data-theme="light"] .overlay h2 { color: #1d1923; }
html[data-theme="light"] .overlay h2 span { -webkit-text-stroke-color: #7541a8; }
html[data-theme="light"] .overlay p { color: #625a68; }
html[data-theme="light"] .overlay small { color: #78707c; }
html[data-theme="light"] .overlay--pause { background: rgba(232,226,215,.94); }
html[data-theme="light"] .sigil { border-color: #8962ab; box-shadow: 0 0 25px rgba(117,65,168,.16); }
html[data-theme="light"] .primary { color: #171a0d; }
html[data-theme="light"] .dpad button, html[data-theme="light"] .touch-action { border-color: #aaa0ad; background: #ddd6cb; }
html[data-theme="light"] .cabinet__footer { color: #746d77; }
html[data-theme="light"] .page-footer { color: #6f6873; border-top-color: #c9c1b7; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }