:root {
  --ink: #101711;
  --panel: #172019;
  --green: #b7f34a;
  --green-bright: #d8ff7d;
  --cream: #e7e3d2;
  --dim: #7b8a72;
  --line: rgba(183, 243, 74, 0.24);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: "Courier New", Courier, monospace; }
button, a { font: inherit; }

.site-shell {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 50% 10%, rgba(111, 160, 58, 0.15), transparent 34rem),
    radial-gradient(circle, rgba(183,243,74,.035) 0 1px, transparent 1.2px),
    var(--ink);
  background-size: auto, 5px 5px, auto;
}
.crt-noise {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .36;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.72) 3px),
    radial-gradient(circle, rgba(216,255,125,.25) 0 .7px, transparent .95px);
  background-size: 100% 3px, 3px 3px; mix-blend-mode: overlay;
}
.topbar {
  width: min(1280px, calc(100% - 64px)); height: 72px; margin: auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .13em; color: var(--dim);
}
.wordmark {
  color: var(--green); text-decoration: none; display: inline-flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: 14px; letter-spacing: .08em; text-shadow: 0 0 12px rgba(183,243,74,.28);
}
.wordmark-icon { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 2px; filter: drop-shadow(0 0 8px rgba(183,243,74,.32)); }
.topbar-actions { display: flex; align-items: center; gap: 22px; }
.topbar-actions a, .topbar-actions button, .sound-toggle {
  border: 0; padding: 9px 0; color: #a3ae9e; background: transparent; cursor: pointer;
  text-decoration: none; font-size: 11px; letter-spacing: .11em;
}
.topbar-actions a:hover, .topbar-actions a:focus-visible, .topbar-actions button:hover, .topbar-actions button:focus-visible, .sound-toggle:hover, .sound-toggle:focus-visible { color: var(--green); outline: none; }
.hero {
  width: min(1080px, calc(100% - 48px)); min-height: 500px; margin: auto; padding: 84px 0 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.eyebrow { width: 100%; display: flex; justify-content: space-between; color: var(--green); font-size: 11px; letter-spacing: .2em; }
.hero h1 {
  margin: 36px 0 22px; color: var(--cream); font-family: "Lucida Console", "Courier New", monospace;
  font-size: clamp(52px, 6.4vw, 104px); font-weight: 900; letter-spacing: -.05em; line-height: .9; text-transform: uppercase;
  color: transparent; -webkit-text-fill-color: transparent;
  background: radial-gradient(circle, var(--cream) 0 1.45px, transparent 1.75px) 0 0 / 4px 4px;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 9px rgba(231,227,210,.2));
}
.hero h1 span {
  display: inline-block; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0;
  background: radial-gradient(circle, var(--green-bright) 0 1.45px, transparent 1.75px) 0 0 / 4px 4px;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(183,243,74,.5));
}
.hero-copy { max-width: 650px; color: #b4bdae; font-size: 15px; line-height: 1.55; }
.game-select { border-top: 1px solid var(--line); padding: 48px max(32px, calc((100vw - 1280px) / 2)) 38px; background: rgba(23, 32, 25, .5); }
.section-heading { margin-bottom: 22px; }
.section-heading p { margin: 0 0 8px; color: var(--green); font-size: 12px; letter-spacing: .15em; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.05em; text-transform: uppercase; }
.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.game-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: #121914; transition: transform 180ms ease, border-color 180ms ease; }
.game-card:hover { transform: translateY(-4px); border-color: rgba(183,243,74,.7); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: #9da796; font-size: 11px; letter-spacing: .09em; }
.game-preview {
  position: relative; height: 250px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: linear-gradient(rgba(183,243,74,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(183,243,74,.025) 1px, transparent 1px), #0c110d; background-size: 18px 18px;
}
.demo-score { position: absolute; top: 18px; left: 20px; color: var(--green); font-size: 11px; letter-spacing: .12em; }
.drop-grid { width: 180px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); }
.drop-grid i { aspect-ratio: 1; border: 1px solid rgba(183,243,74,.07); }
.drop-grid i.filled {
  background-color: var(--green);
  background-image: linear-gradient(rgba(12,25,10,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(12,25,10,.42) 1px, transparent 1px);
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 2px #82aa36, 0 0 8px rgba(183,243,74,.4);
}
.preview-bricks { position: absolute; top: 68px; left: 50%; width: 75%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.preview-bricks i {
  height: 18px; border: 1px solid var(--green); background-color: rgba(183,243,74,.42);
  background-image: linear-gradient(rgba(7,16,9,.46) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.46) 1px, transparent 1px);
  background-size: 4px 4px; box-shadow: 0 0 8px rgba(183,243,74,.2);
}
.preview-ball { position: absolute; left: 61%; top: 59%; width: 10px; height: 10px; background: radial-gradient(circle, var(--green-bright) 0 1px, transparent 1.4px) 0 0 / 3px 3px, var(--green); box-shadow: 0 0 12px var(--green); }
.preview-paddle { position: absolute; left: 40%; bottom: 34px; width: 116px; height: 12px; background-color: var(--green); background-image: linear-gradient(rgba(7,16,9,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.42) 1px, transparent 1px); background-size: 4px 4px; box-shadow: 0 0 12px rgba(183,243,74,.5); }
.snake-demo { position: absolute; inset: 0; }
.snake-demo i {
  position: absolute; width: 18px; height: 18px; border: 1px solid var(--green-bright); background-color: var(--green);
  background-image: linear-gradient(rgba(7,16,9,.46) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.46) 1px, transparent 1px);
  background-size: 4px 4px; box-shadow: inset 0 0 0 2px rgba(31,56,18,.25), 0 0 8px rgba(183,243,74,.3);
}
.snake-demo i:nth-child(1) { left: calc(50% - 82px); top: 58%; }
.snake-demo i:nth-child(2) { left: calc(50% - 60px); top: 58%; }
.snake-demo i:nth-child(3) { left: calc(50% - 38px); top: 58%; }
.snake-demo i:nth-child(4) { left: calc(50% - 16px); top: 58%; }
.snake-demo i:nth-child(5) { left: calc(50% + 6px); top: 58%; }
.snake-demo i:nth-child(6) { left: calc(50% + 28px); top: 58%; }
.snake-demo i:nth-child(7) { left: calc(50% + 28px); top: calc(58% - 22px); }
.snake-demo i:nth-child(8) { left: calc(50% + 28px); top: calc(58% - 44px); }
.snake-demo i:nth-child(9) { left: calc(50% + 50px); top: calc(58% - 44px); filter: brightness(1.18); }
.snake-food { position: absolute; left: 68%; top: 31%; width: 12px; height: 12px; background: var(--green-bright); box-shadow: 0 0 14px var(--green); }
.defender-preview::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .55;
  background: radial-gradient(circle, rgba(216,255,125,.32) 0 .75px, transparent 1px) 0 0 / 4px 4px;
  mix-blend-mode: overlay;
}
.defender-numbers { position: absolute; top: 58px; left: 50%; width: 76%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.defender-numbers i {
  min-height: 46px; display: grid; place-items: center; border: 1px solid var(--green); background-color: rgba(183,243,74,.16);
  background-image: linear-gradient(rgba(7,16,9,.48) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.48) 1px, transparent 1px);
  background-size: 4px 4px; box-shadow: inset 0 0 0 3px rgba(14,31,10,.24), inset 0 0 18px rgba(183,243,74,.08), 0 0 10px rgba(183,243,74,.2); font-style: normal;
}
.defender-numbers b {
  display: inline-block; color: transparent; -webkit-text-fill-color: transparent; font-family: "Lucida Console", "Courier New", monospace; font-size: 24px;
  background: radial-gradient(circle, var(--green-bright) 0 1px, transparent 1.3px) 0 0 / 3px 3px;
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 6px rgba(183,243,74,.65));
}
.defender-shot { position: absolute; width: 4px; height: 20px; background: repeating-linear-gradient(0deg, var(--green-bright) 0 2px, transparent 2px 4px); box-shadow: 0 0 10px var(--green); }
.defender-shot.shot-one { left: 48%; bottom: 67px; }
.defender-shot.shot-two { left: 55%; bottom: 105px; }
.defender-turret { position: absolute; left: 50%; bottom: 28px; width: 68px; height: 17px; transform: translateX(-50%); background-color: var(--green); background-image: linear-gradient(rgba(7,16,9,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.5) 1px, transparent 1px); background-size: 4px 4px; box-shadow: 0 0 12px rgba(183,243,74,.45); }
.defender-turret::before { content: ""; position: absolute; left: 29px; bottom: 14px; width: 10px; height: 22px; background: repeating-linear-gradient(0deg, var(--green-bright) 0 2px, #729d2d 2px 4px); }
.race-preview { background: linear-gradient(#09140b 0 47%, #111a12 47% 100%); background-image: linear-gradient(rgba(183,243,74,.055) 2px, transparent 2px), linear-gradient(90deg, rgba(183,243,74,.055) 2px, transparent 2px); background-size: 10px 10px; }
.race-preview::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.42) 3px 4px); }
.preview-race-sun { position: absolute; right: 16%; top: 31px; width: 42px; height: 42px; clip-path: polygon(28% 0, 72% 0, 72% 14%, 86% 14%, 86% 28%, 100% 28%, 100% 72%, 86% 72%, 86% 86%, 72% 86%, 72% 100%, 28% 100%, 28% 86%, 14% 86%, 14% 72%, 0 72%, 0 28%, 14% 28%, 14% 14%, 28% 14%); background: repeating-linear-gradient(0deg, var(--green) 0 5px, transparent 5px 7px); opacity: .68; box-shadow: 0 0 20px rgba(183,243,74,.3); }
.preview-checkpoint { position: absolute; z-index: 4; left: 50%; top: 79px; width: 116px; padding: 5px 6px; transform: translateX(-50%); border: 5px solid var(--green); color: var(--ink); background-color: var(--green-bright); background-image: linear-gradient(rgba(7,16,9,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.24) 1px, transparent 1px); background-size: 5px 5px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .07em; box-shadow: 0 0 12px rgba(183,243,74,.35); }
.preview-race-road { position: absolute; left: 50%; bottom: 0; width: 84%; height: 73%; transform: translateX(-50%); overflow: hidden; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background-color: #101d12; background-image: linear-gradient(rgba(183,243,74,.09) 2px, transparent 2px), linear-gradient(90deg, rgba(183,243,74,.06) 2px, transparent 2px); background-size: 12px 12px; }
.preview-race-road::before, .preview-race-road::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(0deg, var(--green) 0 8px, transparent 8px 15px); }
.preview-race-road::before { left: 0; transform: rotate(15deg); transform-origin: bottom; }
.preview-race-road::after { right: 0; transform: rotate(-15deg); transform-origin: bottom; }
.preview-race-road i { position: absolute; top: 4%; bottom: -8%; width: 4px; background: repeating-linear-gradient(0deg, rgba(216,255,125,.72) 0 10px, transparent 10px 20px); transform-origin: bottom; }
.preview-race-road i:nth-child(1) { left: 20%; transform: rotate(9deg); }
.preview-race-road i:nth-child(2) { left: 40%; transform: rotate(3deg); }
.preview-race-road i:nth-child(3) { left: 60%; transform: rotate(-3deg); }
.preview-race-road i:nth-child(4) { left: 80%; transform: rotate(-9deg); }
.preview-race-npc { position: absolute; z-index: 3; width: 24px; height: 35px; border: 3px solid var(--green-bright); background-color: rgba(183,243,74,.58); background-image: linear-gradient(rgba(7,16,9,.42) 2px, transparent 2px), linear-gradient(90deg, rgba(7,16,9,.42) 2px, transparent 2px); background-size: 6px 6px; box-shadow: 0 0 10px rgba(183,243,74,.35); }
.preview-race-npc::before { content: ""; position: absolute; left: 5px; right: 5px; top: 7px; height: 9px; background: #101711; }
.preview-race-npc.npc-one { left: 34%; bottom: 65px; transform: scale(.72); }
.preview-race-npc.npc-two { right: 31%; bottom: 93px; transform: scale(.52); }
.preview-armored-car { position: absolute; z-index: 4; left: 50%; bottom: 17px; width: 62px; height: 58px; transform: translateX(-50%); clip-path: polygon(34% 0, 66% 0, 66% 10%, 76% 10%, 76% 24%, 88% 24%, 88% 100%, 12% 100%, 12% 24%, 24% 24%, 24% 10%, 34% 10%); background-color: var(--green); background-image: linear-gradient(rgba(7,16,9,.38) 2px, transparent 2px), linear-gradient(90deg, rgba(7,16,9,.38) 2px, transparent 2px); background-size: 7px 7px; box-shadow: 0 0 16px rgba(183,243,74,.55); }
.preview-armored-car::before { content: ""; position: absolute; left: 18px; top: 17px; width: 26px; height: 18px; border: 2px solid #101711; background: rgba(7,16,9,.42); }
.preview-armored-car::after { content: ""; position: absolute; left: 28px; top: -6px; width: 6px; height: 26px; background: var(--green-bright); box-shadow: 0 0 6px rgba(183,243,74,.55); }
.vacuum-preview { background-color: #071009; background-image: radial-gradient(circle, rgba(183,243,74,.1) 0 1px, transparent 1.2px); background-size: 14px 14px; }
.vacuum-preview-map { position: absolute; inset: 45px 32px 18px; border: 5px solid #314624; }
.vacuum-preview-map i { position: absolute; display: block; background-color: #314624; background-image: linear-gradient(rgba(216,255,125,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(216,255,125,.15) 1px, transparent 1px); background-size: 5px 5px; }
.vacuum-preview-map i:nth-child(1) { left: 12%; top: 15%; width: 26%; height: 18%; }
.vacuum-preview-map i:nth-child(2) { right: 10%; top: 10%; width: 20%; height: 34%; }
.vacuum-preview-map i:nth-child(3) { left: 38%; top: 43%; width: 23%; height: 22%; }
.vacuum-preview-map i:nth-child(4) { left: 8%; bottom: 9%; width: 18%; height: 25%; }
.vacuum-preview-map i:nth-child(5) { right: 8%; bottom: 8%; width: 28%; height: 18%; }
.vacuum-preview-map i:nth-child(6) { left: 31%; top: 9%; width: 8%; height: 25%; }
.preview-vacuum { position: absolute; z-index: 3; left: 28%; bottom: 37px; width: 34px; height: 27px; border: 3px solid var(--green-bright); background: var(--green); box-shadow: 0 0 12px rgba(183,243,74,.5); }
.preview-vacuum::before { content: ""; position: absolute; right: -13px; top: 5px; width: 12px; height: 12px; background: var(--green-bright); }
.preview-vacuum::after { content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 8px; background: #071009; }
.preview-crawler { position: absolute; z-index: 3; width: 22px; height: 19px; border: 3px solid #82b53b; background: #a2db45; box-shadow: 0 0 9px rgba(183,243,74,.34); }
.preview-crawler::before, .preview-crawler::after { content: ""; position: absolute; left: -7px; right: -7px; height: 3px; background: #82b53b; }
.preview-crawler::before { top: 2px; }.preview-crawler::after { bottom: 2px; }
.preview-crawler.crawler-one { right: 23%; top: 35%; }.preview-crawler.crawler-two { left: 47%; bottom: 36px; transform: scale(.82); }
.preview-dust { position: absolute; z-index: 2; width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 7px rgba(183,243,74,.7); }
.preview-dust.dust-one { left: 19%; top: 43%; }.preview-dust.dust-two { left: 54%; top: 30%; }.preview-dust.dust-three { right: 17%; bottom: 32%; }
.preview-battery { position: absolute; z-index: 2; right: 35%; top: 51%; width: 20px; height: 25px; display: grid; place-items: center; border: 2px solid var(--green-bright); color: #071009; background: var(--green); font-size: 17px; font-weight: 900; box-shadow: 0 0 11px rgba(183,243,74,.45); }
.tank-preview { background-color: #081109; background-image: linear-gradient(rgba(183,243,74,.045) 2px, transparent 2px), linear-gradient(90deg, rgba(183,243,74,.03) 2px, transparent 2px); background-size: 38px 38px; }
.tank-preview::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.38) 3px 4px); }
.preview-track { position: absolute; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(0deg, rgba(216,255,125,.18) 0 13px, transparent 13px 28px); }
.preview-track.track-left { left: 36%; }.preview-track.track-right { right: 36%; }
.preview-tank-player, .preview-tank-enemy { position: absolute; z-index: 3; width: 38px; height: 48px; border-left: 8px solid #26341f; border-right: 8px solid #26341f; background-color: var(--green); box-shadow: 0 0 12px rgba(183,243,74,.45); }
.preview-tank-player::before, .preview-tank-enemy::before { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 23px; background: #82b53b; }
.preview-tank-player::after, .preview-tank-enemy::after { content: ""; position: absolute; left: 9px; top: -14px; width: 4px; height: 26px; background: var(--green-bright); }
.preview-tank-player { left: 50%; bottom: 21px; transform: translateX(-50%); }
.preview-tank-enemy { background-color: #82b53b; transform: rotate(180deg) scale(.78); }
.preview-tank-enemy.enemy-one { left: 25%; top: 76px; }.preview-tank-enemy.enemy-two { right: 24%; top: 48px; transform: rotate(180deg) scale(.62); }.preview-tank-enemy.enemy-three { left: 53%; top: 103px; transform: rotate(180deg) scale(.54); }
.preview-shell { position: absolute; z-index: 4; width: 4px; height: 15px; background: var(--green-bright); box-shadow: 0 0 8px var(--green); }
.preview-shell.shell-one { left: 48%; bottom: 91px; }.preview-shell.shell-two { left: 52%; bottom: 126px; }
.puzzle-preview { display: grid; place-items: center; }
.puzzle-preview-grid { width: 206px; margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.puzzle-preview-grid i { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 1px solid rgba(183,243,74,.2); color: var(--green-bright); background: rgba(183,243,74,.035); font-style: normal; font-size: 11px; box-shadow: inset 0 0 12px rgba(183,243,74,.035); }
.puzzle-preview-grid i:not(:empty) { border-color: rgba(216,255,125,.7); background-color: rgba(183,243,74,.22); background-image: radial-gradient(circle, rgba(216,255,125,.42) 0 1px, transparent 1.2px); background-size: 4px 4px; text-shadow: 0 0 6px rgba(183,243,74,.65); }
.card-content { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.card-content h3 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.05em; text-transform: uppercase; }
.card-content > p:not(.game-number) { min-height: 42px; margin: 10px 0 15px; color: #b0b9ab; font-size: 15px; line-height: 1.45; }
.play-button { width: 100%; margin-top: auto; border: 1px solid var(--green); padding: 13px 16px; display: flex; justify-content: space-between; color: var(--green); background: transparent; cursor: pointer; font-size: 13px; letter-spacing: .12em; transition: color 160ms ease, background 160ms ease; }
.play-button:hover, .play-button:focus-visible { color: var(--ink); background: var(--green); outline: none; box-shadow: 0 0 22px rgba(183,243,74,.18); }
footer { width: min(1280px, calc(100% - 64px)); margin: auto; min-height: 58px; display: flex; align-items: center; justify-content: center; color: #94a08e; font-size: 11px; letter-spacing: .12em; }

.card-notice { padding: 0; }
.notice-button {
  width: auto; min-height: 34px; padding: 8px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid rgba(183,243,74,.34); color: #aab4a4; background: rgba(183,243,74,.025); cursor: pointer;
  text-align: left; font-size: 10px; letter-spacing: .1em; transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.notice-button span:first-child { white-space: nowrap; }
.notice-button span:last-child { color: var(--green); font-size: 15px; line-height: 1; }
.notice-button:hover, .notice-button:focus-visible { border-color: var(--green); color: var(--green); background: rgba(183,243,74,.08); outline: none; box-shadow: 0 0 18px rgba(183,243,74,.12); }
.notice-dialog {
  width: min(600px, calc(100% - 32px)); max-height: min(78vh, 560px); margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--green); color: var(--cream); background: #121914; box-shadow: 0 0 42px rgba(0,0,0,.7), 0 0 26px rgba(183,243,74,.13);
}
.notice-dialog::backdrop { background: rgba(7,16,9,.78); backdrop-filter: blur(3px); }
.notice-dialog-header {
  position: sticky; top: 0; z-index: 1; min-height: 62px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-bottom: 1px solid var(--line); background: #172019;
}
.notice-dialog-header p { margin: 0; color: var(--green); font-size: 12px; letter-spacing: .14em; }
.notice-close {
  width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(183,243,74,.35); color: var(--green);
  background: transparent; cursor: pointer; font-size: 24px; line-height: 1;
}
.notice-close:hover, .notice-close:focus-visible { border-color: var(--green); color: var(--ink); background: var(--green); outline: none; }
.notice-dialog-body { padding: 22px 20px 26px; }
.notice-dialog-body p { margin: 0; color: #aab4a4; font-size: 14px; line-height: 1.65; }
.notice-dialog-body p + p { margin-top: 16px; }
.panel-label { color: var(--green); font-size: 12px; letter-spacing: .12em; }

.game-page { min-height: 100vh; }
.game-nav {
  width: min(1280px, calc(100% - 64px)); height: 68px; margin: auto; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line);
}
.back-button {
  width: max-content; border: 0; padding: 10px 0; color: var(--dim); background: transparent;
  cursor: pointer; font-size: 12px; letter-spacing: .11em; text-decoration: none;
}
.back-button:hover, .back-button:focus-visible { color: var(--green); outline: none; }
.wordmark.compact { justify-self: center; }
.wordmark-button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.game-nav .sound-toggle { justify-self: end; }

.boot-screen, .active-game { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 44px 0 58px; }
.boot-copy { max-width: 920px; }
.boot-code, .active-game-heading p { margin: 0 0 12px; color: var(--green); font-size: 11px; letter-spacing: .16em; }
.boot-copy h1, .active-game-heading h1 {
  margin: 0; color: transparent; -webkit-text-fill-color: transparent; font-family: "Lucida Console", "Courier New", monospace;
  font-size: clamp(42px, 5.5vw, 76px); line-height: .95; letter-spacing: -.07em;
  background: radial-gradient(circle, var(--cream) 0 1.2px, transparent 1.5px) 0 0 / 3.5px 3.5px;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 7px rgba(231,227,210,.18));
}
.boot-subtitle { margin: 16px 0 0; color: #98a391; font-size: 14px; letter-spacing: .03em; }
.boot-panel {
  margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  border: 1px solid var(--line); background: rgba(9,15,10,.72);
}
.controls-guide, .control-list { padding: 24px; }
.controls-guide { border-right: 1px solid var(--line); }
.guide-copy { margin: 10px 0 0; color: #aab4a4; font-size: 14px; line-height: 1.5; }
.key-layouts { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.key-option { flex: 1; min-height: 108px; padding: 16px; border: 1px solid rgba(183,243,74,.2); color: var(--green); background: rgba(183,243,74,.035); }
.key-option strong { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .08em; }
.key-or { color: #8f9b88; font-size: 11px; letter-spacing: .1em; }
.key-cluster { display: grid; grid-template-columns: repeat(3, 28px); gap: 4px; width: max-content; }
.key-cluster kbd { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; font-size: 11px; }
.key-cluster kbd:first-child { grid-column: 2; }
.key-cluster kbd:nth-child(2) { grid-column: 1; }
.control-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(183,243,74,.09); font-size: 12px; color: #a4ae9f; }
.control-list code { color: var(--cream); font-family: inherit; }
.start-button {
  grid-column: 1 / -1; min-height: 62px; border: 0; border-top: 1px solid var(--green); padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: var(--green);
  cursor: pointer; font-weight: 700; font-size: 12px; letter-spacing: .16em;
}
.start-button:hover, .start-button:focus-visible { background: var(--green-bright); outline: none; box-shadow: 0 0 28px rgba(183,243,74,.18); }
.game-notice { margin: 18px 0 0; color: #9ca797; font-size: 12px; line-height: 1.5; }
.compact-notice { max-width: 960px; margin: 18px auto 0; color: #aab4a4; font-size: 14px; line-height: 1.55; text-align: center; }

.active-game { padding-top: 26px; }
.active-game-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 22px; }
.active-game-heading h1 { font-size: clamp(30px, 3.6vw, 48px); }
.scheme-readout { flex: 0 0 auto; text-align: right; }
.scheme-readout span { display: block; margin-bottom: 5px; color: #9ba693; font-size: 11px; letter-spacing: .11em; }
.scheme-readout strong { color: var(--green); font-size: 12px; letter-spacing: .07em; }

.crt-frame { position: relative; overflow: hidden; border: 1px solid rgba(183,243,74,.45); background: #071009; box-shadow: 0 0 52px rgba(90,160,35,.08), inset 0 0 44px rgba(0,0,0,.75); }
.crt-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .68;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.7) 3px),
    radial-gradient(circle, rgba(216,255,125,.28) 0 .7px, transparent .95px);
  background-size: 100% 3px, 3px 3px; mix-blend-mode: overlay;
}
.crt-frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 65px rgba(0,0,0,.78); }

.drop-layout { display: grid; grid-template-columns: minmax(130px, 1fr) 300px minmax(130px, 1fr); gap: 22px; align-items: start; justify-content: center; }
.drop-frame { width: 300px; padding: 12px; justify-self: center; }
.drop-board { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 7px; border: 1px solid rgba(183,243,74,.14); background: rgba(0,0,0,.25); }
.drop-cell { aspect-ratio: 1; border: 1px solid rgba(183,243,74,.055); background: rgba(183,243,74,.012); }
.drop-cell[class*="cell-"] {
  border: 1px solid rgba(224,255,154,.82); background-color: var(--green);
  background-image: linear-gradient(rgba(12,25,10,.48) 1px, transparent 1px), linear-gradient(90deg, rgba(12,25,10,.48) 1px, transparent 1px);
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 2px rgba(28,48,20,.28), 0 0 7px rgba(183,243,74,.32);
}
.drop-cell.cell-1, .mini-piece .cell-1 { opacity: .62; }
.drop-cell.cell-2, .mini-piece .cell-2 { opacity: .72; }
.drop-cell.cell-3, .mini-piece .cell-3 { opacity: .82; }
.drop-cell.cell-4, .mini-piece .cell-4 { opacity: .9; }
.drop-cell.cell-5, .mini-piece .cell-5 { filter: brightness(.76); }
.drop-cell.cell-6, .mini-piece .cell-6 { filter: brightness(.92); }
.drop-cell.cell-7, .mini-piece .cell-7 { filter: brightness(1.12); }
.game-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; background: rgba(7,16,9,.84); }
.game-overlay strong { color: var(--green); font-size: 24px; letter-spacing: .08em; text-shadow: 0 0 12px rgba(183,243,74,.5); }
.game-overlay span { margin-top: 10px; color: #9ba693; font-size: 12px; letter-spacing: .1em; }
.breaker-complete { padding: 24px; }
.breaker-complete .small-action { min-width: 190px; margin: 22px auto 0; padding: 13px 24px; color: var(--green); background: rgba(183,243,74,.06); }
.game-stats { display: flex; flex-direction: column; gap: 24px; padding-top: 6px; }
.stat { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.stat span, .next-box > span, .lives span { display: block; margin-bottom: 6px; color: #9da796; font-size: 11px; letter-spacing: .1em; }
.stat strong { color: var(--green); font-size: clamp(20px, 2.5vw, 34px); font-weight: 400; letter-spacing: .04em; text-shadow: 0 0 12px rgba(183,243,74,.18); }
.small-action { border: 1px solid var(--line); padding: 10px; color: #a2ad9d; background: transparent; cursor: pointer; font-size: 11px; letter-spacing: .07em; }
.small-action:hover, .small-action:focus-visible { border-color: var(--green); color: var(--green); outline: none; }
.next-box { min-height: 150px; padding: 18px; border: 1px solid var(--line); }
.mini-piece { width: 92px; margin: 28px auto 0; display: grid; gap: 3px; }
.mini-piece i { aspect-ratio: 1; }
.mini-piece i[class*="cell-"] { border: 1px solid var(--green-bright); background-color: var(--green); background-image: linear-gradient(rgba(12,25,10,.46) 1px, transparent 1px), linear-gradient(90deg, rgba(12,25,10,.46) 1px, transparent 1px); background-size: 4px 4px; box-shadow: inset 0 0 0 2px rgba(28,48,20,.28); }
.mini-help { color: #9ba696; font-size: 12px; line-height: 1.45; letter-spacing: .04em; }
.touch-controls { display: none; }

.breaker-layout { width: min(720px, 100%); margin: auto; }
.arcade-layout { width: min(720px, 100%); margin: auto; }
.arcade-frame { width: 100%; aspect-ratio: 640 / 460; }
.arcade-frame canvas { display: block; width: 100%; height: 100%; }
.breaker-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 10px; }
.defender-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 10px; }
.tank-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.breaker-stats .stat, .lives { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.defender-stats .stat { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.breaker-stats > *, .defender-stats > * { text-align: center; }
.breaker-stats .stat strong, .lives strong, .defender-stats .stat strong { font-size: 19px; color: var(--green); font-weight: 400; letter-spacing: .08em; }
.defender-stats [data-power] { white-space: nowrap; font-size: 14px; letter-spacing: .01em; }
.race-stats [data-scene] { font-size: 13px; letter-spacing: .01em; }
.race-stats [data-checkpoint] { white-space: nowrap; font-size: 16px; }
.race-stats .time-danger { color: var(--green-bright); animation: time-warning 420ms steps(2, jump-none) infinite; }
@keyframes time-warning { 50% { opacity: .28; text-shadow: 0 0 18px var(--green); } }
.breaker-frame { width: 100%; aspect-ratio: 640 / 460; }
.breaker-frame canvas { display: block; width: 100%; height: 100%; }
.breaker-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; margin-top: 10px; }
.breaker-actions > * { min-height: 42px; width: 100%; display: grid; place-items: center; text-align: center; }
.breaker-actions .small-action:last-child { justify-self: stretch; }
.breaker-actions > span, .status-action { color: var(--green); font-size: 12px; letter-spacing: .09em; }
.status-action { border: 1px solid transparent; background: rgba(183,243,74,.025); cursor: pointer; font-family: inherit; }
.status-action:not(:disabled):hover, .status-action:not(:disabled):focus-visible { border-color: var(--green); outline: none; }
.status-action:disabled { opacity: 1; cursor: default; }

.race-frame canvas, .vacuum-frame canvas, .tank-frame canvas { touch-action: none; }
.puzzle-layout { width: min(520px, 100%); margin: auto; }
.puzzle-frame { width: 100%; padding: 14px; background: #071009; }
.puzzle-board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid rgba(183,243,74,.2); background: rgba(183,243,74,.035); touch-action: none; user-select: none; }
.puzzle-tile { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(183,243,74,.08); color: var(--ink); background: rgba(183,243,74,.025); font-family: "Lucida Console", "Courier New", monospace; font-size: clamp(25px, 6vw, 52px); font-weight: 900; letter-spacing: -.08em; text-shadow: 0 0 7px rgba(216,255,125,.35); transition: transform 100ms ease, background 100ms ease; }
.puzzle-tile[class*="tile-"] { border-color: rgba(216,255,125,.68); background-color: var(--green); background-image: linear-gradient(rgba(7,16,9,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.18) 1px, transparent 1px); background-size: 5px 5px; box-shadow: inset 0 0 0 3px rgba(16,23,17,.1), 0 0 10px rgba(183,243,74,.16); }
.puzzle-tile.tile-1 { opacity: .48; }
.puzzle-tile.tile-2 { opacity: .56; }
.puzzle-tile.tile-3 { opacity: .64; }
.puzzle-tile.tile-4 { opacity: .72; }
.puzzle-tile.tile-5 { opacity: .8; }
.puzzle-tile.tile-6 { opacity: .86; }
.puzzle-tile.tile-7 { opacity: .91; }
.puzzle-tile.tile-8 { opacity: .96; }
.puzzle-tile.tile-9, .puzzle-tile.tile-10, .puzzle-tile.tile-11, .puzzle-tile.tile-12 { color: #071009; background-color: var(--green-bright); opacity: 1; box-shadow: inset 0 0 0 3px rgba(16,23,17,.16), 0 0 16px rgba(183,243,74,.38); }
.puzzle-tile.tile-10, .puzzle-tile.tile-11, .puzzle-tile.tile-12 { font-size: clamp(18px, 4.5vw, 38px); letter-spacing: -.11em; }
.puzzle-tile.tile-added { animation: tile-signal 150ms ease-out; }
.puzzle-overlay { padding: 22px; }
.puzzle-overlay-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.puzzle-overlay-actions .small-action { min-width: 132px; color: var(--green); background: rgba(183,243,74,.055); }
.puzzle-hint { margin: 13px 0 0; color: #94a08e; text-align: center; font-size: 11px; line-height: 1.45; letter-spacing: .06em; }
@keyframes tile-signal { from { transform: scale(.72); filter: brightness(1.8); } to { transform: scale(1); filter: brightness(1); } }

.wordmark-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .drop-layout { grid-template-columns: 1fr 300px 1fr; gap: 14px; }
  .stat strong { font-size: 18px; }
}

@media (max-height: 850px) and (min-width: 761px) {
  .topbar, .game-nav { height: 62px; }
  .hero { min-height: 448px; padding: 44px 0 34px; }
  .hero h1 { margin: 28px 0 18px; font-size: clamp(48px, 5.8vw, 88px); }
  .game-select { padding-top: 40px; }
  .boot-screen, .active-game { padding-top: 30px; padding-bottom: 40px; }
  .boot-panel { margin-top: 26px; }
  .active-game { padding-top: 18px; }
  .active-game-heading { margin-bottom: 16px; }
  .active-game-heading h1 { font-size: clamp(28px, 3.2vw, 42px); }
  .breaker-layout { width: min(620px, 100%); }
  .arcade-layout { width: min(620px, 100%); }
  .puzzle-layout { width: min(440px, 100%); }
  .compact-notice { margin-top: 20px; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .hero { min-height: 400px; padding-top: 34px; }
  .hero h1 { font-size: clamp(44px, 5vw, 76px); margin-top: 22px; }
  .active-game-heading p { margin-bottom: 8px; }
  .breaker-layout { width: min(540px, 100%); }
  .arcade-layout { width: min(540px, 100%); }
  .puzzle-layout { width: min(390px, 100%); }
  .drop-layout { grid-template-columns: 1fr 270px 1fr; }
  .drop-frame { width: 270px; padding: 9px; }
}

@media (max-width: 760px) {
  .topbar { width: calc(100% - 32px); height: 72px; grid-template-columns: 1fr auto; }
  .topbar-actions { gap: 14px; }
  .hero { width: calc(100% - 32px); min-height: 460px; padding: 60px 0 44px; }
  .hero h1 { margin-top: 34px; }
  .eyebrow span:last-child { display: none; }
  .game-select { padding: 38px 16px 32px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-preview { height: 240px; }
  .card-topline { font-size: 10px; }
  .notice-dialog-body p { font-size: 15px; line-height: 1.55; }
  .compact-notice { font-size: 15px; }
  footer { width: calc(100% - 32px); min-height: 64px; flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
  .game-nav { width: calc(100% - 32px); height: 70px; grid-template-columns: 1fr auto; }
  .game-nav .wordmark { display: none; }
  .game-nav .sound-toggle { grid-column: 2; }
  .boot-screen, .active-game { width: calc(100% - 28px); padding: 36px 0 48px; }
  .boot-copy h1 { font-size: clamp(38px, 13vw, 64px); line-height: .92; }
  .boot-panel { margin-top: 42px; grid-template-columns: 1fr; }
  .controls-guide { border-right: 0; border-bottom: 1px solid var(--line); }
  .control-list { padding-top: 22px; }
  .active-game-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .scheme-readout { text-align: left; }
  .drop-layout { grid-template-columns: 1fr; }
  .drop-frame { grid-row: 1; width: min(350px, 100%); padding: 12px; }
  .game-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(350px, 100%); margin: auto; }
  .left-stats { grid-row: 2; }
  .right-stats { display: none; }
  .stat { padding-bottom: 10px; }
  .stat strong { font-size: 16px; }
  .left-stats .small-action { grid-column: 1 / -1; }
  .touch-controls { display: grid; width: min(500px, 100%); margin: 14px auto 0; gap: 6px; }
  .touch-controls button { min-height: 48px; border: 1px solid var(--line); color: var(--green); background: rgba(183,243,74,.04); touch-action: manipulation; }
  .drop-touch { grid-template-columns: repeat(5, 1fr); }
  .breaker-touch, .defender-touch { grid-template-columns: 1fr 1.2fr 1fr; }
  .snake-touch { grid-template-columns: repeat(5, 1fr); }
  .race-touch, .puzzle-touch, .vacuum-touch { grid-template-columns: repeat(4, 1fr); }
  .tank-touch { grid-template-columns: repeat(5, 1fr); }
  .defender-stats { grid-template-columns: repeat(2, 1fr); gap: 9px 12px; }
  .tank-stats { grid-template-columns: repeat(2, 1fr); }
  .race-stats { grid-template-columns: repeat(2, 1fr); gap: 9px 12px; }
  .puzzle-layout { width: min(520px, 100%); }
  .puzzle-board { gap: 7px; padding: 8px; }
  .puzzle-frame { padding: 9px; }
  .breaker-actions { grid-template-columns: 1fr 1fr; }
  .breaker-actions .status-action { grid-column: 1 / -1; grid-row: 1; }
  .breaker-actions [data-pause] { grid-column: 1; grid-row: 2; }
  .breaker-actions [data-restart] { grid-column: 2; grid-row: 2; justify-self: stretch; }
}

@media (max-width: 440px) {
  .wordmark { font-size: 11px; }
  .topbar-actions a { display: none; }
  .hero h1 { font-size: 44px; }
  .controls-guide, .control-list { padding: 20px; }
  .key-layouts { gap: 9px; }
  .key-option { min-height: 104px; padding: 12px 10px; }
  .start-button { padding: 0 20px; }
  .start-button span:last-child { display: none; }
  .drop-touch { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }