: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, select { 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; }
.language-control {
  position: relative; width: max-content; max-width: 100%; margin-top: 22px; display: grid;
  grid-template-columns: max-content max-content; align-items: center; gap: 16px;
  color: var(--green); font-size: 12px; letter-spacing: .14em; white-space: nowrap;
}
.language-label { font-weight: 700; text-shadow: 0 0 9px rgba(183,243,74,.34); }
.language-dropdown { position: relative; width: max-content; max-width: 100%; }
.language-trigger {
  min-width: 140px; max-width: min(330px, calc(100vw - 48px)); min-height: 52px; padding: 10px 15px 10px 17px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  border: 1px solid var(--green); border-radius: 0; color: var(--green-bright); background: rgba(7,16,9,.9); cursor: pointer;
  font-size: 17px; font-weight: 700; letter-spacing: .02em; text-align: start;
  box-shadow: inset 0 0 0 3px rgba(183,243,74,.045), inset 0 0 25px rgba(183,243,74,.05), 0 0 0 4px rgba(183,243,74,.09), 0 0 18px rgba(183,243,74,.12);
}
.language-trigger:hover, .language-trigger:focus-visible, .language-trigger[aria-expanded="true"] {
  border-color: var(--green-bright); color: var(--green-bright); outline: 2px solid rgba(183,243,74,.25); outline-offset: 4px;
  background: rgba(18,35,17,.94); box-shadow: inset 0 0 0 3px rgba(183,243,74,.065), inset 0 0 28px rgba(183,243,74,.08), 0 0 20px rgba(183,243,74,.18);
}
.language-chevron { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, 1px); }
.language-trigger[aria-expanded="true"] .language-chevron { transform: rotate(225deg) translate(-1px, 1px); }
.language-menu {
  position: absolute; z-index: 30; inset-block-start: calc(100% + 9px); inset-inline-start: 0;
  width: max-content; min-width: 100%; max-width: calc(100vw - 32px); max-height: min(440px, 58vh); overflow-y: auto;
  padding: 6px; border: 1px solid rgba(183,243,74,.8); color: var(--cream); background: rgba(7,16,9,.985);
  box-shadow: inset 0 0 30px rgba(183,243,74,.04), 0 18px 42px rgba(0,0,0,.72), 0 0 22px rgba(183,243,74,.13);
}
.language-option {
  width: 100%; min-height: 42px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  border: 0; border-bottom: 1px solid rgba(183,243,74,.09); color: #c4ccbc; background: transparent; cursor: pointer;
  font-size: 16px; font-weight: 600; letter-spacing: .02em; text-align: start;
}
.language-option:last-child { border-bottom: 0; }
.language-option > span:last-child { color: var(--green-bright); font-size: 9px; }
.language-option:hover, .language-option:focus-visible { color: var(--ink); background: var(--green); outline: none; text-shadow: none; }
.language-option[aria-selected="true"] { color: var(--green-bright); background: rgba(183,243,74,.09); }
.language-option[aria-selected="true"]:hover, .language-option[aria-selected="true"]:focus-visible { color: var(--ink); background: var(--green-bright); }
.language-menu::-webkit-scrollbar { width: 8px; }
.language-menu::-webkit-scrollbar-track { background: #071009; }
.language-menu::-webkit-scrollbar-thumb { background: #547728; border: 2px solid #071009; }
.bookmark-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 30; margin: 0; border: 1px solid var(--green);
  padding: 12px 15px; color: var(--green-bright); background: rgba(7,16,9,.96); font-size: 11px; letter-spacing: .09em;
  box-shadow: 0 0 20px rgba(183,243,74,.16);
}
.hero {
  width: min(1080px, calc(100% - 48px)); min-height: 0; margin: auto; padding: 56px 0 42px;
  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: 28px 0 16px; 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(--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 .hero-highlight {
  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: 28px; }
.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: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 36px; }
.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: 12px 18px; border-bottom: 1px solid var(--line); color: #9da796; font-size: 11px; letter-spacing: .09em; }
.game-preview {
  position: relative; aspect-ratio: 4 / 3; 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; }
.game-canvas-preview canvas { display: block; width: 100%; height: 100%; }
.preview-game-hud { position: absolute; z-index: 10; top: 7%; left: 7%; color: var(--green-bright); font-size: clamp(8px, .9vw, 11px); letter-spacing: .1em; text-shadow: 0 0 8px rgba(183,243,74,.42); }
.game-puzzle-preview { display: grid; place-items: center; }
.game-puzzle-preview .puzzle-board { --puzzle-gap: 5px; width: 58%; height: auto; padding: 7px; }
.game-puzzle-preview .puzzle-grid, .game-puzzle-preview .puzzle-tile-layer { inset: 7px; }
.game-puzzle-preview .puzzle-tile { width: calc((100% - 15px) / 4); font-size: clamp(10px, 1.1vw, 14px); }
.game-puzzle-preview .puzzle-tile.tile-10, .game-puzzle-preview .puzzle-tile.tile-11, .game-puzzle-preview .puzzle-tile.tile-12 { font-size: clamp(7px, .85vw, 11px); letter-spacing: -.1em; }
.drop-preview { background: #071009; }
.preview-drop-score { z-index: 2; }
.drop-grid { height: 86%; aspect-ratio: 1 / 2; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; position: absolute; left: 50%; bottom: 7%; 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 7px 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(#071009 0 40%, #101811 40% 100%); }
.race-preview::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.42) 3px 4px); }
.preview-race-score { z-index: 7; top: 7%; left: 7%; color: var(--green-bright); text-shadow: 0 0 8px rgba(183,243,74,.42); }
.preview-race-city { position: absolute; z-index: 1; inset: 10% 0 auto; height: 31%; display: flex; align-items: end; gap: 2.1%; padding: 0 1.5%; border-bottom: 2px solid rgba(183,243,74,.18); }
.preview-race-city i { flex: 1 1 0; min-width: 0; background-color: rgba(183,243,74,.19); background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(216,255,125,.6) 9px 13px), linear-gradient(90deg, rgba(7,16,9,.5) 3px, transparent 3px); background-size: 100% 100%, 10px 10px; box-shadow: inset 0 0 0 2px rgba(7,16,9,.5); }
.preview-race-city i:nth-child(1) { height: 38%; }.preview-race-city i:nth-child(2) { height: 75%; }.preview-race-city i:nth-child(3) { height: 48%; }.preview-race-city i:nth-child(4) { height: 65%; }.preview-race-city i:nth-child(5) { height: 43%; }.preview-race-city i:nth-child(6) { height: 88%; }.preview-race-city i:nth-child(7) { height: 57%; }.preview-race-city i:nth-child(8) { height: 70%; }.preview-race-city i:nth-child(9) { height: 45%; }.preview-race-city i:nth-child(10) { height: 82%; }
.preview-race-sun { position: absolute; z-index: 2; right: 13%; top: 12%; width: 13%; aspect-ratio: 1; 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-race-sign { position: absolute; z-index: 4; top: 34%; width: 19%; padding: 1.6% 2%; border: 3px solid var(--green); color: var(--green-bright); background: rgba(7,16,9,.85); text-align: center; font-size: clamp(7px, .85vw, 10px); font-weight: 700; letter-spacing: .08em; box-shadow: 0 0 8px rgba(183,243,74,.2); }
.preview-race-sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 22px; background: #476923; transform: translateX(-50%); }.preview-race-sign.sign-left { left: 11%; }.preview-race-sign.sign-right { right: 11%; }
.preview-race-road { position: absolute; z-index: 3; left: 50%; bottom: 0; width: 84%; height: 67%; 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: 4; width: 7%; aspect-ratio: .68; border: 2px 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: 20%; right: 20%; top: 20%; height: 26%; background: #101711; }
.preview-race-npc.npc-one { left: 33%; bottom: 27%; transform: scale(.78); }
.preview-race-npc.npc-two { right: 29%; bottom: 39%; transform: scale(.56); }
.preview-race-player-car { position: absolute; z-index: 5; left: 50%; bottom: 5%; width: 34%; aspect-ratio: 1.45; transform: translateX(-50%); filter: drop-shadow(0 0 8px rgba(183,243,74,.38)); }
.race-car-shadow { position: absolute; z-index: 0; left: -8%; right: -8%; bottom: 1%; height: 14%; background: rgba(0,0,0,.76); }
.race-car-wheel { position: absolute; z-index: 1; bottom: 6%; width: 15%; height: 39%; background: #050a07; }.race-car-wheel.wheel-left { left: 2%; }.race-car-wheel.wheel-right { right: 2%; }
.race-car-cabin { position: absolute; z-index: 2; top: 0; left: 18%; width: 64%; height: 63%; clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); background: var(--green-bright); }
.race-car-cabin::after { content: ""; position: absolute; top: 11%; left: 13%; right: 13%; bottom: 25%; background-color: #071009; background-image: linear-gradient(rgba(183,243,74,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(183,243,74,.08) 1px, transparent 1px); background-size: 5px 5px; }
.race-car-body { position: absolute; z-index: 3; right: 6%; bottom: 5%; left: 6%; height: 57%; clip-path: polygon(4% 12%, 96% 12%, 100% 61%, 88% 100%, 12% 100%, 0 61%); background-color: var(--green); background-image: linear-gradient(rgba(7,16,9,.35) 2px, transparent 2px), linear-gradient(90deg, rgba(7,16,9,.35) 2px, transparent 2px); background-size: 6px 6px; box-shadow: inset 0 6px 0 #8bc63f; }
.race-car-grille { position: absolute; z-index: 4; right: 22%; bottom: 23%; left: 22%; height: 16%; background-color: #6c9e31; background-image: repeating-linear-gradient(90deg, rgba(7,16,9,.54) 0 2px, transparent 2px 8px); }
.race-car-light { position: absolute; z-index: 5; bottom: 25%; width: 15%; height: 14%; background-color: #e7e3d2; background-image: linear-gradient(rgba(7,16,9,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,9,.22) 1px, transparent 1px); background-size: 4px 4px; box-shadow: 0 0 7px rgba(231,227,210,.65); }.race-car-light.light-left { left: 11%; }.race-car-light.light-right { right: 11%; }
.race-car-bumper { position: absolute; z-index: 6; right: 17%; bottom: 9%; left: 17%; height: 8%; background: #172218; }
.vacuum-preview { background-color: #071009; background-image: radial-gradient(circle, rgba(183,243,74,.1) 0 1px, transparent 1.2px); background-size: 14px 14px; }
.preview-vacuum-score, .preview-tank-score { z-index: 7; top: 7%; left: 7%; color: var(--green-bright); text-shadow: 0 0 8px rgba(183,243,74,.42); }
.vacuum-preview-map { position: absolute; z-index: 1; top: 8%; left: 6%; width: 88%; aspect-ratio: 27 / 19; display: grid; grid-template-columns: repeat(27, 1fr); grid-template-rows: repeat(19, 1fr); border: 3px solid #314624; background: rgba(7,16,9,.65); }
.vacuum-preview-map i { display: block; background: transparent; }.vacuum-preview-map i.wall { border: 1px solid rgba(216,255,125,.16); 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: 4px 4px; }
.preview-vacuum { position: absolute; z-index: 4; left: 13%; bottom: 15%; width: 7%; aspect-ratio: 1.25; border: 2px solid var(--green-bright); background: var(--green); box-shadow: 0 0 12px rgba(183,243,74,.5); }
.preview-vacuum::before { content: ""; position: absolute; right: -38%; top: 22%; width: 35%; height: 46%; background: var(--green-bright); }.preview-vacuum::after { content: ""; position: absolute; left: 25%; top: 28%; width: 24%; aspect-ratio: 1; background: #071009; }
.preview-crawler { position: absolute; z-index: 4; width: 5%; aspect-ratio: 1.18; border: 2px 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: 12%; top: 20%; }.preview-crawler.crawler-two { left: 48%; bottom: 17%; transform: scale(.82); }
.preview-dust { position: absolute; z-index: 2; width: 1.5%; aspect-ratio: 1; background: var(--green); box-shadow: 0 0 7px rgba(183,243,74,.7); }.preview-dust.dust-one { left: 18%; top: 32%; }.preview-dust.dust-two { left: 54%; top: 25%; }.preview-dust.dust-three { right: 15%; bottom: 25%; }
.preview-battery { position: absolute; z-index: 4; right: 16%; top: 44%; width: 5%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--green-bright); color: #071009; background: var(--green); font-size: clamp(8px, 1vw, 14px); 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::before { content: ""; position: absolute; inset: 0 6%; border-left: 2px solid rgba(216,255,125,.12); border-right: 2px solid rgba(216,255,125,.12); }
.tank-preview::after { content: ""; position: absolute; z-index: 9; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.38) 3px 4px); }
.preview-track { position: absolute; z-index: 1; 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: 35%; }.preview-track.track-right { right: 35%; }
.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: 8%; width: 11%; aspect-ratio: .78; height: auto; 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: 24px; }
.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: 12px 0 20px; color: #b0b9ab; font-size: 14px; 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 { width: min(720px, 100%); margin: auto; }
.drop-frame { width: 100%; aspect-ratio: 4 / 3; }
.drop-frame canvas { display: block; width: 100%; height: 100%; }
.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); }
.stat { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.stat 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; }
.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: 4 / 3; }
.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: 4 / 3; }
.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, .runner-frame canvas { touch-action: none; }
.puzzle-layout { width: min(720px, 100%); margin: auto; }
.puzzle-frame { width: 100%; aspect-ratio: 4 / 3; padding: 14px; display: grid; place-items: center; background: #071009; }
.puzzle-board { --puzzle-gap: 10px; position: relative; width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; padding: 12px; border: 1px solid rgba(183,243,74,.2); background: rgba(183,243,74,.035); touch-action: none; user-select: none; }
.puzzle-grid, .puzzle-tile-layer { position: absolute; inset: 12px; }
.puzzle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--puzzle-gap); }
.puzzle-slot { min-width: 0; aspect-ratio: 1; border: 1px solid rgba(183,243,74,.08); background: rgba(183,243,74,.025); box-shadow: inset 0 0 12px rgba(183,243,74,.025); }
.puzzle-tile-layer { pointer-events: none; }
.puzzle-tile { position: absolute; top: 0; left: 0; width: calc((100% - 30px) / 4); 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 160ms cubic-bezier(.18,.72,.22,1), background 160ms ease, filter 160ms ease; will-change: transform; }
.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-tile.tile-merging { filter: brightness(1.18); }
.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 { filter: brightness(1.8); } to { filter: brightness(1); } }

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

html[lang="en"] body, html[lang="fr"] body, html[lang="de"] body, html[lang="es"] body, html[lang="pt-BR"] body, html[lang="id"] body,
html[lang="en"] .hero h1, html[lang="fr"] .hero h1, html[lang="de"] .hero h1, html[lang="es"] .hero h1, html[lang="pt-BR"] .hero h1, html[lang="id"] .hero h1,
.language-option[lang="en"], .language-option[lang="fr"], .language-option[lang="de"], .language-option[lang="es"],
.language-option[lang="pt-BR"], .language-option[lang="id"] { font-family: "Pixelify Sans", "Courier New", monospace; }
html[lang="ja"] body, html[lang="ja"] .hero h1, .language-option[lang="ja"] { font-family: "DotGothic16", "MS Gothic", monospace; }
html[lang="ko"] body, html[lang="ko"] .hero h1, .language-option[lang="ko"] { font-family: "Gugi", "Malgun Gothic", sans-serif; }
html[lang="hi"] body, html[lang="hi"] .hero h1, .language-option[lang="hi"] { font-family: "Rajdhani", "Nirmala UI", sans-serif; }
html[lang="ar"] body, html[lang="ar"] .hero h1, .language-option[lang="ar"] { font-family: "Handjet", "Noto Sans Arabic", Tahoma, sans-serif; }
html[lang="ja"] .hero h1, html[lang="ko"] .hero h1 { font-weight: 400; }
.language-option[lang="ja"], .language-option[lang="ko"] { font-weight: 400; }
.language-option[lang="ar"] { font-weight: 600; }
.wordmark, .game-name, .preview-game-hud, footer, .crt-frame, .puzzle-board { font-family: "Courier New", Courier, monospace; }

html:not([lang="en"]) .hero-copy, html:not([lang="en"]) .section-heading,
html:not([lang="en"]) .card-topline, html:not([lang="en"]) .card-content > p,
html:not([lang="en"]) .notice-dialog { text-shadow: 0 0 7px rgba(183,243,74,.1); }
html:not([lang="en"]) .hero-copy { font-size: 16px; }
html:not([lang="en"]) .card-content > p, html:not([lang="en"]) .notice-dialog-body p { font-size: 15px; }
html[lang="ar"] .hero-copy, html[lang="ar"] .card-content > p, html[lang="ar"] .notice-dialog-body p { font-weight: 600; }
html[lang="ja"] .hero-copy, html[lang="ja"] .section-heading, html[lang="ja"] .card-topline,
html[lang="ko"] .hero-copy, html[lang="ko"] .section-heading, html[lang="ko"] .card-topline { letter-spacing: .04em; }

html:not([lang="en"]) .hero h1 { font-size: clamp(44px, 5.5vw, 88px); line-height: 1.02; }
html[lang="de"] .hero h1, html[lang="pt-BR"] .hero h1, html[lang="id"] .hero h1 { font-size: clamp(42px, 5vw, 80px); }
html[lang="ja"] .hero h1, html[lang="ko"] .hero h1, html[lang="hi"] .hero h1, html[lang="ar"] .hero h1 { letter-spacing: 0; line-height: 1.12; }
html[lang="ja"] .section-heading h2, html[lang="ko"] .section-heading h2, html[lang="hi"] .section-heading h2, html[lang="ar"] .section-heading h2,
html[lang="ja"] .card-content h3, html[lang="ko"] .card-content h3, html[lang="hi"] .card-content h3, html[lang="ar"] .card-content h3 { letter-spacing: 0; }
html[lang="hi"] .card-topline, html[lang="ar"] .card-topline, html[lang="hi"] .notice-button, html[lang="ar"] .notice-button,
html[lang="hi"] .play-button, html[lang="ar"] .play-button { letter-spacing: 0; }
html:not([lang="en"]) .card-topline > span:first-child { min-width: 0; line-height: 1.35; }
html:not([lang="en"]) .notice-button span:first-child { white-space: normal; }

html[dir="rtl"] .wordmark, html[dir="rtl"] .game-name, html[dir="rtl"] .game-preview,
html[dir="rtl"] .preview-game-hud, html[dir="rtl"] canvas { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .topbar { direction: ltr; }
html[dir="rtl"] .topbar .wordmark { grid-column: 2; grid-row: 1; justify-self: end; }
html[dir="rtl"] .topbar-actions { grid-column: 1; grid-row: 1; justify-self: start; direction: rtl; }
html[dir="rtl"] .game-name { text-align: right; }
html[dir="rtl"] .boot-copy h1, html[dir="rtl"] .active-game-heading h1, html[dir="rtl"] .scheme-readout strong,
html[dir="rtl"] .control-list code, html[dir="rtl"] kbd { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .bookmark-toast { right: auto; left: 24px; }
html[dir="rtl"] .play-button > span:last-child { transform: rotate(180deg); }

@media (max-width: 900px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat strong { font-size: 18px; }
}

@media (max-height: 850px) and (min-width: 761px) {
  .topbar, .game-nav { height: 62px; }
  .hero { min-height: 0; padding: 34px 0; }
  .hero h1 { margin: 28px 0 18px; font-size: clamp(48px, 5.8vw, 88px); }
  .language-control { margin-top: 18px; }
  .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(620px, 100%); }
  .compact-notice { margin-top: 20px; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .hero { min-height: 0; padding-top: 26px; padding-bottom: 30px; }
  .hero h1 { font-size: clamp(44px, 5vw, 76px); margin-top: 22px; }
  .language-control { margin-top: 16px; }
  .active-game-heading p { margin-bottom: 8px; }
  .breaker-layout { width: min(540px, 100%); }
  .arcade-layout { width: min(540px, 100%); }
  .puzzle-layout { width: min(540px, 100%); }
}

@media (max-width: 760px) {
  .topbar { width: calc(100% - 32px); height: 72px; grid-template-columns: 1fr auto; }
  .topbar-actions { gap: 14px; }
  .topbar-actions > a[href="#games"], .topbar-actions [data-bookmark-site] { display: none; }
  .card-topline > span:first-child { flex: 1 1 46%; min-width: 0; overflow-wrap: anywhere; }
  .card-topline .notice-button { flex: 1 1 54%; min-width: 0; }
  .card-topline .notice-button span:first-child { white-space: normal; overflow-wrap: anywhere; }
  .hero { width: calc(100% - 32px); min-height: 0; padding: 42px 0 36px; }
  .hero h1 { margin-top: 34px; }
  .eyebrow span:last-child { display: none; }
  .game-select { padding: 38px 16px 32px; }
  .game-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .game-preview { aspect-ratio: 4 / 3; height: auto; }
  .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 { width: 100%; }
  .stat { padding-bottom: 10px; }
  .stat strong { font-size: 16px; }
  .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); }
  .runner-touch { grid-template-columns: 1fr 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: 100%; }
  .puzzle-board { --puzzle-gap: 7px; padding: 8px; }
  .puzzle-grid, .puzzle-tile-layer { inset: 8px; }
  .puzzle-tile { width: calc((100% - 21px) / 4); }
  .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; }
  .bookmark-toast { right: 16px; bottom: 16px; left: 16px; text-align: center; }
  .hero h1, html:not([lang="en"]) .hero h1, html[lang="de"] .hero h1, html[lang="pt-BR"] .hero h1, html[lang="id"] .hero h1 { font-size: clamp(34px, 11vw, 44px); }
  .language-control { width: 100%; margin-top: 22px; grid-template-columns: 1fr; gap: 9px; text-align: start; }
  .language-dropdown, .language-trigger { width: 100%; max-width: none; }
  .language-trigger { min-height: 56px; font-size: 16px; }
  .language-menu { width: 100%; max-width: 100%; }
  .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 (max-width: 400px) {
  .wordmark > span { display: none; }
  .topbar-actions { gap: 10px; }
}

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