@font-face { font-family: Arcade; src: url('assets/press-start-2p.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark; --bg: #050607; --ink: #f2eee5; --muted: #a8afb7; --gold: #f3cb69; --wall: #66869c;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --viewport-height: 100svh;
  --board-size: min(560px, max(180px, calc(var(--viewport-height) - 154px - var(--safe-top) - var(--safe-bottom))));
  font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--ink);
}
@supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: var(--viewport-height); overflow-x: hidden; }
button { font: inherit; color: var(--muted); background: transparent; border: 1px solid transparent; min-height: 44px; min-width: 44px; padding: 8px; border-radius: 4px; cursor: pointer; touch-action: manipulation; }
button:hover { color: var(--ink); background: #12181e; }
button:active { background: #26323d; color: var(--gold); }
button:focus-visible, canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button:disabled { opacity: .35; cursor: default; }
button[aria-pressed=true] { color: var(--gold); text-decoration: underline; text-underline-offset: 5px; }
[hidden] { display: none !important; }
.app { width: 100%; max-width: 1360px; margin: auto; padding: max(8px, var(--safe-top)) max(12px, env(safe-area-inset-right)) max(16px, var(--safe-bottom)) max(12px, env(safe-area-inset-left)); min-height: var(--viewport-height); }
.header { text-align: center; margin-bottom: 10px; }
.utilities { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 14px; margin-bottom: 4px; }
.languages { display: flex; gap: 2px; margin-right: 4px; }
.utilities #help { font-size: 20px; }
h1 { display: flex; justify-content: center; font: 400 clamp(24px, 3.7vw, 43px)/1.3 Arcade, monospace; margin: 0; color: #b6bdc5; white-space: nowrap; }
h1 span { display: inline-block; position: relative; padding-bottom: 8px; transition: color .15s; }
h1 span.collected { color: var(--gold); }
h1 span.collected::after { content: ''; position: absolute; bottom: 0; left: 12%; width: 76%; height: 2px; background: var(--gold); }
h1 .suffix { color: #b6bdc5; }
.game-layout { display: grid; grid-template-columns: minmax(0, var(--board-size)); grid-template-areas: "board" "scores" "history"; justify-content: center; gap: 8px; }
.scores { grid-area: scores; }
.board-column { grid-area: board; }
.history-panel { grid-area: history; }
.board-column { min-width: 0; width: 100%; }
.game-surface { position: relative; width: 100%; aspect-ratio: 1; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
canvas:focus:not(:focus-visible) { outline: none; }
.scores { display: flex; align-items: end; justify-content: space-between; gap: 8px; min-width: 0; padding-inline: 4px; }
.scores > div { min-width: 0; }
.scores > div:first-child { display: none; }
.label { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.number { display: block; font: 400 14px/1.6 Arcade, monospace; overflow-wrap: anywhere; }
.number.small { font-size: 14px; }
#score { color: var(--gold); }
.history-panel { display: none; margin-top: 24px; min-width: 0; }
#history { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; font-size: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
#history li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 30px; }
#history .rank, #history .level { color: #a8afb7; font-size: 12px; }
#history .value { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: baseline; gap: 8px; min-width: 0; color: #d6dce2; white-space: nowrap; }
#history .score { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
#history .level { margin-left: 0; white-space: nowrap; }
.local-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.game-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-height: 44px; font-size: 14px; }
#status { color: var(--muted); flex: 1; line-height: 1.4; }
#status[data-warning=true] { color: var(--gold); font-weight: bold; }
#touch-controls { display: block; flex: 0 0 44px; padding-inline: 2px; font-size: 15px; }
.power-track { position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; pointer-events: none; }
#power-fill { height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: #050607df; padding: 12px; pointer-events: auto; }
.overlay strong { max-width: 100%; font: 800 clamp(17px, 3.6vw, 32px)/1.2 Arial, Helvetica, sans-serif; letter-spacing: .04em; color: var(--gold); text-wrap: balance; }
.overlay span { font-size: 16px; font-variant-numeric: tabular-nums; }
.overlay small { font-size: 14px; line-height: 1.4; color: var(--muted); }
#score-entry { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
#score-entry label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#initials { width: 96px; min-height: 44px; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); background: #10171d; text-align: center; font: 400 16px Arcade, monospace; text-transform: uppercase; letter-spacing: .15em; }
#save-score { border-color: var(--gold); color: var(--gold); }
#skip-score { flex-basis: 100%; min-height: 36px; padding-block: 4px; color: var(--muted); font-size: 12px; }
#restart-game { border-color: var(--gold); color: var(--gold); margin-top: 4px; }
#dpad { display: none; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 8px; justify-content: center; padding-top: 6px; }
.show-controls #dpad { display: grid; }
#dpad button { border-color: var(--wall); font-size: 26px; padding: 0; color: var(--ink); background: #10171d; }
#dpad button:active { background: #344557; color: var(--gold); }
#dpad [data-dir=up] { grid-column: 2; }
#dpad [data-dir=left] { grid-row: 2; grid-column: 1; }
#dpad [data-dir=down] { grid-row: 2; grid-column: 2; }
#dpad [data-dir=right] { grid-row: 2; grid-column: 3; }
dialog { max-width: min(440px, calc(100% - 24px)); max-height: calc(100svh - 24px - var(--safe-top) - var(--safe-bottom)); overflow: auto; overscroll-behavior: contain; background: #10171d; color: var(--ink); border: 1px solid var(--wall); border-radius: 8px; padding: 24px; }
dialog::backdrop { background: #000b; }
dialog h2 { font-size: 20px; font-weight: 400; margin: 0 0 16px; }
dialog p { font-size: 16px; line-height: 1.6; white-space: pre-line; }
dialog button { border-color: var(--wall); margin-top: 8px; }
.global-heading { margin-top: 24px; }
#global-history { list-style: none; margin: 0; padding: 0; font-size: 14px; }
#global-history li { display: flex; justify-content: space-between; min-height: 30px; }
#global-history .rank { color: var(--muted); }
#global-history .value { color: var(--gold); }
.initials { margin-right: 8px; color: var(--gold); font-size: 11px; letter-spacing: .08em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 1024px) and (min-height: 551px) {
  :root { --board-size: min(61svh, 560px); }
  .app { padding-top: max(20px, var(--safe-top)); }
  .header { margin-bottom: 24px; }
  .game-layout { grid-template-columns: minmax(180px, 240px) minmax(0, var(--board-size)) minmax(180px, 240px); grid-template-areas: "scores board history"; gap: clamp(16px, 2vw, 24px); align-items: center; justify-content: center; }
  .scores { flex-direction: column; gap: 32px; }
  .scores > div:first-child { display: block; }
  .number { font-size: 18px; }
  .history-panel { display: block; margin-top: 0; }
  #history { display: block; }
  #touch-controls { display: block; }
  #dpad { display: none; }
  .show-controls #dpad { display: grid; }
}
@media (min-width: 1024px) and (min-height: 551px) and (max-height: 850px) {
  :root { --board-size: min(56svh, 500px); }
  #history li, #global-history li { min-height: 24px; }
  .local-note { margin-top: 8px; }
  .global-heading { margin-top: 14px; }
}
@media (min-width: 1024px) and (max-height: 700px) and (min-aspect-ratio: 1/1) {
  :root { --board-size: min(560px, max(180px, calc(var(--viewport-height) - 76px - var(--safe-top) - var(--safe-bottom))), calc(100vw - 292px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .app { padding-top: max(4px, var(--safe-top)); padding-bottom: max(8px, var(--safe-bottom)); }
  .header { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  h1 { font-size: 18px; }
  h1 span { padding-bottom: 4px; }
  .utilities { margin: 0; font-size: 14px; }
  .game-layout { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "scores board"; gap: 12px; align-items: start; }
  .scores { flex-direction: column; gap: 12px; }
  .scores > div:first-child { display: block; }
  .number, .number.small { font-size: 14px; }
  .board-column { display: grid; grid-template-columns: minmax(0, var(--board-size)) minmax(132px, 160px); grid-template-rows: 1fr; gap: 0 12px; justify-content: center; }
  .game-surface { grid-column: 1; grid-row: 1; }
  .game-controls { grid-column: 2; grid-row: 1; margin: 0; flex-wrap: wrap; align-content: start; align-self: start; gap: 0; }
  #status { flex-basis: 100%; min-height: 40px; }
  #touch-controls { display: block; }
  #dpad { display: none; }
  .show-controls #dpad { display: grid; grid-column: 2; grid-row: 2; align-self: start; padding-top: 8px; }
  .history-panel { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) and (max-height: 800px) and (min-aspect-ratio: 1/1) {
  :root { --board-size: min(560px, max(180px, calc(var(--viewport-height) - 76px - var(--safe-top) - var(--safe-bottom))), calc(100vw - 292px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .app { padding-top: max(4px, var(--safe-top)); padding-bottom: max(8px, var(--safe-bottom)); }
  .header { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  h1 { font-size: 18px; }
  h1 span { padding-bottom: 4px; }
  .utilities { margin: 0; font-size: 14px; }
  .game-layout { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "scores board"; gap: 12px; align-items: start; }
  .scores { flex-direction: column; gap: 12px; }
  .scores > div:first-child { display: block; }
  .number, .number.small { font-size: 14px; }
  .board-column { display: grid; grid-template-columns: minmax(0, var(--board-size)) minmax(132px, 160px); grid-template-rows: 1fr; gap: 0 12px; justify-content: center; }
  .game-surface { grid-column: 1; grid-row: 1; }
  .game-controls { grid-column: 2; grid-row: 1; margin: 0; flex-wrap: wrap; align-content: start; align-self: start; gap: 0; }
  #status { flex-basis: 100%; min-height: 40px; }
  #touch-controls { display: block; }
  #dpad { display: none; }
  .show-controls #dpad { display: grid; grid-column: 2; grid-row: 2; align-self: start; padding-top: 8px; }
  .history-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) { h1 span { transition: none; } }