:root {
    color-scheme: dark;
    --background: #000;
    --board: #a1a1a1;
    --white: #ddd;
    --red: #ff4b4b;
    --yellow: #ffff4b;
    --green: #4bff4b;
    --cyan: #4bffff;
    --blue: #4b4bff;
    --board-width: clamp(196px, calc((100dvh - 104px) * .388889), 350px);
    font-family: "Courier New", Courier, monospace;
    font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--white); }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.opening-screen { position: relative; min-height: max(340px, 100dvh); max-width: 1288px; margin: 0 auto; overflow: hidden; text-align: center; }
.opening-screen[hidden], #game-screen[hidden] { display: none; }
.opening-title { position: absolute; top: 25.8%; left: 50%; transform: translateX(-50%); display: flex; margin: 0; color: var(--cyan); font: normal clamp(2rem, 17.25vw, 14rem)/1 "Times New Roman", Times, serif; }
.opening-title sup { position: absolute; top: .18em; right: -.34em; font: normal .15em/1 "Courier New", Courier, monospace; }
@supports (-webkit-text-stroke: 1px #4bffff) {
    .opening-title span { color: transparent; -webkit-text-stroke: clamp(.7px, .13vw, 1.6px) var(--cyan); }
}
.opening-title span, .opening-title sup, .opening-credit, .opening-origin { animation: opening-reveal 1ms step-end both; }
.opening-title span:nth-child(5) { animation-delay: 70ms; }
.opening-title span:nth-child(6) { animation-delay: 140ms; }
.opening-title span:nth-child(7) { animation-delay: 210ms; }
.opening-title span:nth-child(8) { animation-delay: 280ms; }
.opening-title span:nth-child(3) { animation-delay: 350ms; }
.opening-title span:nth-child(2) { animation-delay: 420ms; }
.opening-title span:first-child { animation-delay: 490ms; }
.opening-title sup { animation-delay: 510ms; }
.opening-credit { position: absolute; top: 62%; width: 100%; margin: 0; padding: 0 12px; color: var(--blue); font: normal clamp(1.05rem, 4.6vw, 3.7rem)/1.15 "Times New Roman", Times, serif; animation-delay: 560ms; }
.opening-origin { position: absolute; bottom: 7%; display: flex; justify-content: center; gap: 2.5em; width: 100%; margin: 0; color: #7777ff; font-size: clamp(11px, 1.6vw, 20px); font-style: italic; letter-spacing: .22em; animation-delay: 650ms; }
.opening-action { position: absolute; top: 77%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 90%; margin: 0; color: #aaa; font-size: 12px; line-height: 1.4; }
.reproduction-note { max-width: 48rem; margin: 24px auto 0; color: #888; font-size: 11px; line-height: 1.6; text-align: center; }
.opening-reproduction { position: absolute; top: 83%; left: 50%; transform: translateX(-50%); width: 90%; margin: 0; }
@keyframes opening-reveal { from { visibility: hidden; } to { visibility: visible; } }
.app { max-width: 1280px; margin: 0 auto; padding: 16px 24px 22px; }
.game-layout { display: grid; grid-template-columns: minmax(150px, 1fr) var(--board-width) minmax(225px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.stats-column { position: relative; height: calc(var(--board-width) * 18 / 7); display: flex; flex-direction: column; align-items: center; }
.header { padding-top: clamp(20px, 3.4vh, 38px); }
.brand { color: var(--white); text-decoration: none; font-size: clamp(16px, 1.8vw, 24px); font-style: italic; letter-spacing: 1px; white-space: nowrap; }
.brand sup { font-size: .65em; vertical-align: super; }
.game-over-title, .bonus-display { position: absolute; left: 0; width: 100%; margin: 0; text-align: center; }
.game-over-title { top: 14%; color: var(--green); font: normal clamp(40px, calc(var(--board-width) * .31), 108px)/1.1 "Times New Roman", Times, serif; }
@supports (-webkit-text-stroke: 1px #4bff4b) {
    .game-over-title { color: transparent; -webkit-text-stroke: 1px var(--green); }
}
.bonus-display { top: 24%; }
.bonus-label { margin-bottom: calc(var(--board-width) * .08); color: var(--red); font: normal clamp(30px, calc(var(--board-width) * .16), 56px)/1 "Times New Roman", Times, serif; }
.bonus-display .stat-number { font-size: clamp(32px, calc(var(--board-width) * .15), 54px); }
.score-panel { display: grid; justify-items: center; gap: calc(var(--board-width) * .16); width: 100%; margin-top: auto; padding-bottom: calc(var(--board-width) * .08); }
.stat-label { color: var(--blue); font-family: "Times New Roman", Times, serif; font-size: clamp(32px, calc(var(--board-width) * .16), 56px); font-weight: normal; line-height: .85; margin: 0; }
.stat-number { color: var(--yellow); font-family: "Times New Roman", Times, serif; font-size: clamp(42px, calc(var(--board-width) * .2), 70px); font-weight: normal; line-height: 1; font-variant-numeric: tabular-nums; }
@supports (-webkit-text-stroke: 1px #ffff4b) {
    .stat-number { color: transparent; -webkit-text-stroke: 1px var(--yellow); }
}
.score { max-width: 100%; overflow-wrap: anywhere; }
.play-area { min-width: 0; }
.board-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-frame { position: relative; width: 100%; aspect-ratio: 7 / 18; border: 2px solid #d0d0d0; outline: 1px solid #606060; box-shadow: inset 0 0 0 2px #292929; padding: 2px; background: var(--board); }
canvas { display: block; width: 100%; height: 100%; }
.board-caption { display: flex; justify-content: flex-end; padding: 7px 5px 0; font-size: 14px; line-height: 1; }
.board-caption span:nth-child(1) { color: #b00000; }
.board-caption span:nth-child(2) { color: #008800; }
.board-caption span:nth-child(3) { color: #aa00aa; }
.board-overlay { position: absolute; inset: 4px; display: grid; place-items: center; background: #000d; }
.board-overlay[hidden] { display: none; }
.overlay-content { width: 100%; padding: 12px; text-align: center; }
.overlay-content h1 { font-size: clamp(18px, 2vw, 24px); font-weight: normal; line-height: 1.3; margin: 22px 0; }
.overlay-content p { color: #ccc; font-size: 12px; line-height: 1.65; margin: 0 0 24px; }
.clear-message { position: absolute; pointer-events: none; left: 0; right: 0; bottom: 0; text-align: center; color: var(--yellow); font-size: clamp(12px, calc(var(--board-width) * .06), 20px); font-weight: bold; opacity: 0; }
.clear-message.show { animation: score-blink 1300ms steps(1, end) forwards; }
@keyframes score-blink { 0%, 40%, 80% { opacity: 1; } 20%, 60%, 100% { opacity: 0; } }
.dashboard { min-width: 0; }
.highscores-preview { width: 100%; max-width: 370px; margin: 0 auto; }
.highscores-heading { margin: clamp(20px, 3.4vh, 38px) 0 calc(var(--board-width) * .1); text-align: center; color: var(--white); font-size: clamp(15px, calc(var(--board-width) * .065), 23px); font-style: italic; font-weight: normal; letter-spacing: 1px; line-height: 1; }
.score-list { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.score-list li { display: grid; grid-template-columns: 2ch minmax(0, 1fr) minmax(4ch, auto); gap: 8px; align-items: baseline; counter-increment: rank; font-size: clamp(12px, calc(var(--board-width) * .062), 22px); line-height: 1.13; color: var(--blue); letter-spacing: .5px; }
.score-list li::before { content: counter(rank); }
.score-list li:nth-child(-n + 20) { color: var(--cyan); }
.score-list li:nth-child(-n + 10) { color: var(--green); }
.score-list li:nth-child(-n + 3) { color: var(--yellow); }
.score-list li:first-child { color: var(--red); }
.score-list li.is-current, .score-list li.is-editing { color: #fff; }
.record-score { text-align: right; font-weight: normal; font-style: italic; }
.record-player { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.record-entry { min-width: 0; margin: 0; }
.record-entry input { min-width: 0; width: 100%; padding: 0; color: inherit; font: inherit; background: #000; border: 0; border-bottom: 1px solid var(--cyan); border-radius: 0; }
.record-entry input:focus-visible { outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: auto 0 0; margin: 0; padding: 18px; text-align: center; color: #000; background: var(--yellow); }

@media (max-width: 980px) {
    :root { --board-width: clamp(196px, min(calc((100dvh - 145px) * .388889), 38vw), 300px); }
    .app { padding: 16px 18px 22px; }
    .game-layout { grid-template-columns: minmax(110px, 1fr) var(--board-width) minmax(170px, 1fr); gap: 20px; }
    .score-list li { font-size: clamp(11px, 1.8vw, 16px); gap: 5px; letter-spacing: 0; }
    .brand { font-size: 15px; }
    .game-over-title { font-size: clamp(28px, 6vw, 70px); }
    .bonus-label { font-size: clamp(23px, 4.25vw, 41px); }
}

@media (max-width: 620px) {
    :root { --board-width: min(62vw, 270px); }
    .app { max-width: 500px; padding: 14px 15px 22px; }
    .game-layout { grid-template-columns: minmax(0, 1fr) var(--board-width); gap: 22px 15px; }
    .stats-column { grid-column: 1; grid-row: 1; }
    .header { padding-top: 8px; }
    .brand { font-size: 11px; letter-spacing: 0; }
    .game-over-title { font-size: clamp(22px, 7.2vw, 44px); }
    .bonus-label { font-size: clamp(19px, 5.3vw, 29px); }
    .bonus-display .stat-number { font-size: clamp(24px, 7vw, 36px); }
    .score-panel { gap: 28px; padding-bottom: 22px; }
    .stat-label { font-size: clamp(22px, 5.5vw, 32px); }
    .stat-number { font-size: clamp(32px, 8vw, 43px); }
    .score { font-size: clamp(22px, 6.5vw, 35px); }
    .play-area { grid-column: 2; grid-row: 1; }
    .dashboard { grid-column: 1 / -1; grid-row: 2; }
    .highscores-preview { max-width: 325px; }
    .highscores-heading { margin: 18px 0 20px; font-size: 19px; }
    .score-list li { font-size: 15px; line-height: 1.25; gap: 10px; }
    .record-entry input { min-height: 32px; font-size: 16px; }
}

@media (max-height: 540px) {
    .opening-title { top: 16%; font-size: min(17.25vw, 28dvh, 14rem); }
    .opening-credit { top: 55%; font-size: clamp(1.05rem, min(4.6vw, 7dvh), 3.7rem); }
    .opening-action { top: 69%; }
    .opening-reproduction { top: 82%; font-size: 10px; line-height: 1.4; }
    .opening-origin { bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .opening-title span, .opening-title sup, .opening-credit, .opening-origin { animation: none; }
}