:root {
  --lime: #c7ff00;
  --lime-hot: #dcff3d;
  --ink: #070b0a;
  --ink-soft: #101815;
  --forest: #15251f;
  --forest-light: #20342b;
  --cream: #f2f5ed;
  --muted: #aab5af;
  --line: rgba(199, 255, 0, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 0, rgba(64, 104, 43, .3), transparent 32rem),
    var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  z-index: 20;
  filter: invert(1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.game-header {
  min-height: 86px;
  padding: 16px clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 11, 10, .92);
}
.brand { width: clamp(138px, 14vw, 190px); border-radius: 4px; overflow: hidden; }
.brand img { width: 100%; }
.game-title {
  color: var(--lime);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 22px;
  letter-spacing: .14em;
}
.back-link { justify-self: end; padding-bottom: 4px; border-bottom: 2px solid var(--lime); font-weight: 800; }

main { padding: 64px clamp(18px, 5vw, 72px) 100px; }
.game-intro {
  width: min(1180px, 100%);
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: 1fr .65fr;
  align-items: end;
  gap: 50px;
}
.eyebrow {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lime);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Archivo Black", Impact, sans-serif; letter-spacing: -.055em; }
h1 { margin: 0; font-size: clamp(50px, 6.5vw, 94px); line-height: .9; }
h1 em { color: var(--lime); font-style: normal; }
.game-intro > p { max-width: 490px; margin: 0 0 5px; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; }

.arcade {
  width: min(1180px, 100%);
  margin: 0 auto;
  border: 2px solid var(--lime);
  background: linear-gradient(145deg, #111b17, #0a0f0d);
  box-shadow: 18px 18px 0 #1d3028, 0 0 70px rgba(199, 255, 0, .08);
}
.scoreboard {
  min-height: 92px;
  padding: 18px clamp(18px, 3vw, 34px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #070b0a;
}
.scoreboard div { display: grid; gap: 4px; }
.scoreboard span, .panel-label, .timer-row > span {
  color: #8f9d96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.scoreboard strong { color: var(--lime); font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: .03em; }
.scoreboard div:last-child strong { letter-spacing: .14em; }

.game-layout {
  padding: clamp(18px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(220px, 1fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}
.cabinet { min-width: 0; }
.screen-frame {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 10px solid #020403;
  outline: 2px solid #304139;
  background: #020403;
  box-shadow: inset 0 0 40px #000, 0 10px 28px rgba(0, 0, 0, .4);
}
canvas { width: 100%; height: 100%; display: block; outline: none; image-rendering: auto; touch-action: none; }
.screen-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.07) 4px);
}
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(24px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(5, 8, 7, .88);
  backdrop-filter: blur(5px);
}
.game-overlay.hidden { display: none; }
.game-overlay img {
  width: clamp(76px, 16vw, 125px);
  aspect-ratio: 1;
  margin-bottom: 22px;
  object-fit: cover;
  border: 3px solid var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(199,255,0,.2);
}
.overlay-label { margin-bottom: 8px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.game-overlay h2 { max-width: 500px; margin: 0; font-size: clamp(30px, 5.4vw, 62px); line-height: .94; }
.game-overlay > p:not(.overlay-label) { max-width: 440px; margin: 18px 0 24px; color: var(--muted); line-height: 1.5; }
.game-overlay button, .restart-button {
  min-height: 50px;
  padding: 0 24px;
  border: 2px solid var(--lime);
  border-radius: 100px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.game-overlay button:hover, .restart-button:hover { background: var(--lime-hot); }
.game-overlay button:focus-visible, .restart-button:focus-visible, .touch-controls button:focus-visible, .back-link:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.timer-row { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.timer-track { height: 12px; overflow: hidden; border: 1px solid #4b5a53; background: #050706; }
.timer-track i { width: 100%; height: 100%; display: block; background: var(--lime); transform-origin: left; transition: background .2s ease; }
.timer-track i.warning { background: #ff754f; }

.game-panel { display: grid; gap: 16px; }
.panel-card { padding: 23px; border: 1px solid #33433b; background: var(--forest); }
.panel-label { margin-bottom: 15px; color: var(--lime); }
.panel-card ol { margin: 0; padding-left: 22px; color: #cbd2ce; line-height: 1.55; }
.panel-card li + li { margin-top: 11px; }
.controls-card > p:last-child { margin: 15px 0 0; color: var(--muted); font-size: 14px; }
.key-guide { width: 126px; display: grid; grid-template-columns: repeat(3, 38px); gap: 6px; }
kbd {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lime);
  background: #090e0c;
  color: var(--lime);
  font: 800 19px/1 "DM Sans", sans-serif;
  box-shadow: inset 0 -3px 0 rgba(199,255,0,.13);
}
.restart-button { width: 100%; background: transparent; color: var(--lime); }
.game-message { min-height: 46px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.touch-controls { width: 228px; margin: 18px auto 0; display: none; grid-template-columns: repeat(3, 68px); gap: 10px; }
.touch-controls button {
  width: 68px;
  height: 58px;
  border: 2px solid var(--lime);
  border-radius: 12px;
  background: #0a0f0d;
  color: var(--lime);
  font-size: 26px;
  font-weight: 800;
  touch-action: manipulation;
}
.touch-controls button:active { background: var(--lime); color: var(--ink); transform: translateY(2px); }

footer {
  min-height: 120px;
  padding: 32px clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
footer > span:first-child { color: var(--lime); font-family: "Archivo Black", Impact, sans-serif; }
footer a { border-bottom: 1px solid var(--lime); }
footer > span:last-child { justify-self: end; color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .game-intro { grid-template-columns: 1fr; gap: 22px; }
  .game-intro > p { max-width: 680px; }
  .game-layout { grid-template-columns: 1fr; }
  .game-panel { grid-template-columns: 1fr 1fr; }
  .restart-button, .game-message { grid-column: 1 / -1; }
  .touch-controls { display: grid; }
}

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

@media (max-width: 600px) {
  .game-header { min-height: 72px; grid-template-columns: 1fr auto; }
  .brand { width: 130px; }
  .game-title { display: none; }
  .back-link { font-size: 14px; }
  main { padding: 44px 12px 70px; }
  .game-intro { padding-inline: 8px; margin-bottom: 30px; }
  h1 { font-size: clamp(44px, 13.5vw, 66px); }
  .arcade { box-shadow: 8px 8px 0 #1d3028; }
  .scoreboard { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
  .game-layout { padding: 10px; gap: 24px; }
  .screen-frame { border-width: 5px; }
  .game-panel { grid-template-columns: 1fr; }
  .restart-button, .game-message { grid-column: auto; }
  .panel-card { padding: 19px; }
  .game-overlay { padding: 20px; }
  .game-overlay img { margin-bottom: 15px; }
  .game-overlay > p:not(.overlay-label) { margin-block: 13px 17px; font-size: 14px; }
  .touch-controls { margin-top: 14px; }
  footer { grid-template-columns: 1fr auto; }
  footer a { display: none; }
}

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