:root {
  color-scheme: dark;
  --bg: #050713;
  --panel: rgba(10, 15, 34, .76);
  --line: rgba(125, 154, 214, .2);
  --cyan: #38f8ff;
  --blue: #4080ff;
  --pink: #ff3de2;
  --text: #eef7ff;
  --muted: #8793b1;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  overflow-x: hidden;
  background:
    linear-gradient(rgba(56, 248, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 248, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% -10%, #14274e 0, #080b1b 38%, var(--bg) 72%);
  background-size: 42px 42px, 42px 42px, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

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

.ambient {
  position: fixed;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(110px);
  opacity: .12;
}
.ambient-a { top: 15%; left: -24rem; background: var(--cyan); }
.ambient-b { right: -22rem; bottom: 0; background: var(--pink); }

.app-shell { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 24px 0 30px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; letter-spacing: .12em; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--cyan); color: var(--cyan); font-weight: 900; box-shadow: inset 0 0 15px rgba(56,248,255,.12), 0 0 20px rgba(56,248,255,.1); clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .92rem; }
.brand small { margin-top: 4px; color: var(--muted); font: 600 .57rem ui-monospace, monospace; }
.system-status { color: #9aa7c4; font: 700 .65rem ui-monospace, monospace; letter-spacing: .13em; }
.system-status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #42ff9e; box-shadow: 0 0 10px #42ff9e; }

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 46px 0 34px; }
.eyebrow { margin: 0 0 10px; color: var(--cyan); font: 700 .66rem ui-monospace, monospace; letter-spacing: .26em; }
h1 { margin: 0; font-size: clamp(3rem, 8vw, 6rem); line-height: .77; letter-spacing: -.075em; font-style: italic; }
h1 span { color: transparent; -webkit-text-stroke: 1.5px var(--cyan); text-shadow: 0 0 28px rgba(56,248,255,.22); }
.intro { margin: 0 0 3px; max-width: 350px; color: #aab5ce; font-size: .88rem; line-height: 1.9; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .7fr); gap: 20px; }
.game-frame { position: relative; aspect-ratio: 1; padding: 10px; border: 1px solid rgba(56,248,255,.22); background: rgba(3,7,20,.84); box-shadow: 0 25px 70px rgba(0,0,0,.38), inset 0 0 50px rgba(19,52,100,.2); overflow: hidden; }
.game-frame::before { content: "PLAY_FIELD / 24×24"; position: absolute; top: 17px; left: 20px; z-index: 3; color: rgba(159,203,231,.44); font: 600 .52rem ui-monospace, monospace; letter-spacing: .16em; pointer-events: none; }
canvas { display: block; width: 100%; height: 100%; background: #05091a; touch-action: none; }
.scanline { position: absolute; z-index: 2; inset: 10px; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(160,220,255,.018) 3px 4px); }
.corner { position: absolute; z-index: 5; width: 19px; height: 19px; border-color: var(--cyan); pointer-events: none; }
.corner-tl { top: 4px; left: 4px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: 4px; right: 4px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: 4px; left: 4px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { right: 4px; bottom: 4px; border-right: 2px solid; border-bottom: 2px solid; }

.game-overlay { position: absolute; z-index: 4; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; background: radial-gradient(circle, rgba(12,25,52,.76), rgba(3,6,18,.91)); backdrop-filter: blur(5px); transition: opacity .25s, visibility .25s; }
.game-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.overlay-code { color: var(--cyan); font: 700 .62rem ui-monospace, monospace; letter-spacing: .25em; }
.game-overlay h2 { margin: 7px 0 10px; font-size: clamp(1.5rem, 4vw, 2.45rem); letter-spacing: -.04em; }
.game-overlay > p:not(.overlay-code) { max-width: 340px; margin: 0 0 26px; color: var(--muted); font-size: .83rem; line-height: 1.7; }
.primary-btn { display: flex; align-items: center; gap: 45px; padding: 14px 15px 14px 24px; border: 0; color: #001014; background: var(--cyan); font-weight: 850; cursor: pointer; box-shadow: 0 0 28px rgba(56,248,255,.25); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); transition: transform .16s, box-shadow .16s; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 0 38px rgba(56,248,255,.42); }
.primary-btn b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(0,20,24,.35); }

.control-panel { display: flex; flex-direction: column; gap: 14px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { position: relative; min-height: 130px; padding: 18px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(16,24,50,.88), rgba(7,11,27,.78)); overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -20px; bottom: -45px; width: 90px; height: 90px; border: 1px solid rgba(94,128,197,.14); transform: rotate(45deg); }
.stat-card.active { border-color: rgba(56,248,255,.46); box-shadow: inset 0 0 25px rgba(56,248,255,.05); }
.stat-card span, .stat-card small { display: block; color: var(--muted); font-size: .67rem; }
.stat-card strong { display: block; margin: 13px 0 5px; color: var(--text); font: 800 clamp(1.45rem, 3vw, 2.15rem) ui-monospace, monospace; letter-spacing: .04em; }
.stat-card.active strong { color: var(--cyan); text-shadow: 0 0 15px rgba(56,248,255,.35); }
.stat-card small { font: 600 .5rem ui-monospace, monospace; letter-spacing: .16em; }
.stat-card.compact { min-height: 116px; }

.actions { display: grid; grid-template-columns: 1fr 48px 48px; gap: 8px; }
.secondary-btn, .icon-btn { min-height: 48px; border: 1px solid var(--line); color: #bdc8df; background: var(--panel); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.secondary-btn:hover:not(:disabled), .icon-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(56,248,255,.07); }
.secondary-btn:disabled { opacity: .42; cursor: not-allowed; }
.secondary-btn span { margin-right: 7px; color: var(--cyan); font-weight: 900; }
.icon-btn { font: 800 1.15rem ui-monospace, monospace; }
.icon-btn.muted { color: #677087; }

.instructions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 13px; border: 1px solid var(--line); background: var(--panel); }
.instructions div { display: flex; align-items: center; gap: 5px; }
kbd { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #33405e; border-bottom-width: 2px; color: #c9d7ed; background: #11182d; font: 700 .65rem ui-monospace, monospace; }
.instructions span { margin-left: 3px; color: var(--muted); font-size: .6rem; }
.dpad { display: none; grid-template: repeat(2, 48px) / repeat(3, 48px); justify-content: center; gap: 6px; padding: 8px; }
.dpad button { border: 1px solid rgba(56,248,255,.3); color: var(--cyan); background: rgba(12,25,45,.9); font-weight: 900; }
.dpad button:active { background: rgba(56,248,255,.2); }
.dpad [data-direction="up"] { grid-column: 2; }
.dpad [data-direction="left"] { grid-row: 2; grid-column: 1; }
.dpad [data-direction="down"] { grid-row: 2; grid-column: 2; }
.dpad [data-direction="right"] { grid-row: 2; grid-column: 3; }

footer { display: flex; justify-content: space-between; padding: 22px 3px 0; color: #65708c; font: 600 .52rem ui-monospace, monospace; letter-spacing: .13em; }

@media (max-width: 840px) {
  .app-shell { width: min(620px, calc(100% - 24px)); padding-top: 14px; }
  .hero { padding: 35px 2px 26px; }
  .game-layout { grid-template-columns: 1fr; }
  .control-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .stats-grid, .actions { grid-column: 1 / -1; }
  .dpad { display: grid; }
  .instructions { align-content: center; }
}

@media (max-width: 520px) {
  .system-status { font-size: .53rem; }
  .hero { align-items: flex-start; flex-direction: column; gap: 20px; }
  .intro { font-size: .78rem; }
  .game-frame { padding: 6px; }
  .game-overlay, .scanline { inset: 6px; }
  .game-frame::before { top: 13px; left: 14px; }
  .control-panel { grid-template-columns: 1fr; }
  .stats-grid, .actions { grid-column: auto; }
  .stat-card { min-height: 105px; padding: 14px; }
  .stat-card.compact { min-height: 96px; }
  .stat-card strong { margin-top: 8px; }
  .instructions { display: none; }
  footer { flex-direction: column; gap: 7px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}