:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --ink: #222921;
  --panel: #e4e4d4;
  --orange: #ff8049;
  --line: #b5b6a7;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box }
body { margin: 0; min-height: 100svh; padding: 0 clamp(16px, 5vw, 80px) 28px }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation }
button:focus-visible, canvas:focus-visible { outline: 3px solid #1966a7; outline-offset: 3px }
button:disabled { cursor: default }
.mast { max-width: 1200px; margin: auto; min-height: 66px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 720; letter-spacing: -.045em; font-size: 21px }
.brand-icon { width: 23px; height: 23px; background: var(--orange); clip-path: polygon(0 0, 65% 0, 65% 34%, 100% 34%, 100% 100%, 34% 100%, 34% 65%, 0 65%) }
.help { display: flex; gap: 8px; align-items: center; background: transparent; border: 0; padding: 10px 0 10px 10px; font-size: 14px; font-weight: 620 }
.help span { border: 1.5px solid currentColor; line-height: 16px; width: 18px; border-radius: 50%; font-size: 13px }
main { width: min(100%, 646px); margin: clamp(16px, 3vh, 42px) auto 0 }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px }
h1 { font-size: clamp(40px, 7.5vh, 72px); line-height: 1; margin: 0; font-weight: 850; letter-spacing: -.075em }
.status, .label, .stats b, #score { font-family: "IBM Plex Mono", Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums }
.status { display: flex; align-items: center; gap: 8px; font-size: 12px }
.status:before { content: ""; width: 7px; height: 7px; background: #467957 }
body[data-state="paused"] .status:before, body[data-state="over"] .status:before { background: #c35029 }
.console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .72fr); align-items: stretch; gap: clamp(12px, 3vw, 27px); padding: clamp(13px, 2vw, 23px); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); background: var(--panel) }
.field { position: relative; align-self: center; width: 100%; max-width: min(33vh, 330px); justify-self: center; line-height: 0; background: #18251f; border: 4px solid #30392e; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 0 #fff9 }
#board { display: block; width: 100%; aspect-ratio: 1 / 2; touch-action: none; cursor: crosshair }
.rail { display: flex; flex-direction: column; gap: clamp(12px, 3vh, 26px); min-width: 0; padding: 4px 0 2px }
.label { display: block; font-size: 11px; text-transform: uppercase; font-weight: bold; letter-spacing: .1em }
.score-box { padding-bottom: 14px; border-bottom: 1px solid var(--line) }
#score { display: block; font-size: clamp(28px, 4vw, 43px); font-weight: 750; letter-spacing: -.06em; line-height: 1.3; margin-top: 3px }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 8px; margin-top: 14px }
.stats b { display: block; margin-top: 3px; font-size: 22px; line-height: 1.15 }
.record { grid-column: 1 / -1 }
.next { border-top: 1px solid var(--line); padding-top: 14px }
#preview { display: block; width: min(120px, 100%); height: auto; margin: 5px 0 0 }
.actions { margin-top: auto }
.primary, .controls button { background: var(--paper); border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 0 3px 0 var(--ink); font-weight: 700 }
.primary { width: 100%; min-height: 48px; display: flex; justify-content: center; align-items: center; gap: 10px; background: var(--orange); font-size: 16px }
#action-icon { font-size: 13px }
.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px }
.controls button { min-height: 38px; padding: 0; font-size: 19px }
.controls button:disabled { opacity: .48; box-shadow: 0 2px 0 var(--line) }
.primary:active, .controls button:active:enabled { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink) }
.overlay { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; line-height: 1.3; background: #13231fdb; color: var(--paper); gap: 6px; text-align: center; padding: 8px }
.overlay[hidden] { display: none }
.overlay strong { font-size: clamp(18px, 4vw, 30px) }
.overlay span { font-size: 14px }
dialog { width: min(410px, calc(100% - 32px)); padding: 23px; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 5px 0 var(--ink); background: var(--paper); color: var(--ink) }
dialog::backdrop { background: #17251dc9 }
.dialog-head { display: flex; align-items: center; justify-content: space-between }
h2 { margin: 0; font-size: 24px; letter-spacing: -.04em }
.dialog-head button { background: transparent; border: 0; font-size: 27px }
dialog p, dl { font-size: 14px; line-height: 1.5 }
dialog p:last-child { margin-bottom: 0 }
dl { display: grid; grid-template-columns: 102px 1fr; padding: 12px 0; border-block: 1px solid var(--line); gap: 5px }
dt { font-family: monospace; font-weight: bold } dd { margin: 0 }
@media (max-width: 560px) {
  body { padding: 0 12px 22px }
  .mast { min-height: 52px }
  main { margin-top: 18px }
  .title-row { margin-bottom: 14px }
  .console { grid-template-columns: minmax(0,1.55fr) minmax(95px,1fr); padding: 10px; gap: 12px; border-radius: 10px }
  .rail { gap: 12px }
  .label { font-size: 9px; letter-spacing: .055em }
  .stats { gap: 10px 4px; margin-top: 10px }
  .stats b { font-size: 17px }
  .controls { grid-template-columns: repeat(2,1fr); gap: 6px }
  .primary { min-height: 41px; font-size: 14px; gap: 5px }
  .controls button { min-height: 34px }
  .score-box { padding-bottom: 8px }
  .next { padding-top: 9px }
  #preview { width: 78px }
  .status { font-size: 10px }
}
@media (max-width: 355px) {
  .console { gap: 8px; padding: 7px }
  .primary { font-size: 12px }
}