.record-card { margin: 1.25rem auto 0; padding: 1rem; border: 1px solid #414249; border-radius: 1rem; background: #111216; text-align: center; }
.record-label, .timer-unit { margin: 0; color: #9698a1; font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.record-score { margin: .25rem 0; color: #a6f174; font-size: clamp(2.1rem, 9vw, 3rem); font-variant-numeric: tabular-nums; font-weight: 850; letter-spacing: -.05em; }
.record-holder { margin: 0; color: #aeb0b7; font-size: .85rem; }
.play-area { display: grid; justify-items: center; padding: 1.3rem 0 .35rem; }
.timer { margin: 0; font-size: clamp(4.5rem, 20vw, 7rem); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.075em; line-height: 1.05; }
.timer-unit { margin-top: .1rem; }
.control-button, .replay-button { min-height: 3.6rem; border: 0; border-radius: .9rem; background: #a6f174; color: #151713; font-size: 1rem; font-weight: 900; letter-spacing: .09em; cursor: pointer; transition: filter 120ms ease, transform 120ms ease; }
.control-button { width: min(100%, 18rem); margin-top: 1.1rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.control-button:active, .replay-button:active { transform: scale(.98); }
.control-button:hover, .replay-button:hover { filter: brightness(1.07); }
.control-button:disabled, .replay-button:disabled { cursor: wait; opacity: .65; }
.game-hint { min-height: 1.4em; margin: .75rem 0 0; color: #898b94; font-size: .82rem; text-align: center; }
.result-card { margin-top: 1.25rem; padding: 1.25rem 1rem; border: 1px solid #43454b; border-radius: 1rem; background: #121317; text-align: center; }
.result-card[hidden] { display: none; }
.result-time { margin: .25rem 0 0; font-size: clamp(2.3rem, 9vw, 3.4rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.05em; }
.result-error { margin: .25rem 0; color: #a6f174; font-size: 1.2rem; font-weight: 800; }
.result-message { min-height: 1.5em; margin: .65rem 0 1rem; color: #c5c6ca; }
.replay-button { width: min(100%, 18rem); background: #e8e8e5; }
.status-message { min-height: 1.4em; margin: .65rem 0 0; color: #ffbd85; font-size: .82rem; text-align: center; }
.name-dialog { width: min(calc(100% - 2rem), 25rem); padding: 1.5rem; border: 1px solid #494a50; border-radius: 1.15rem; background: #1c1d22; color: #f6f5f2; box-shadow: 0 1rem 5rem #000b; }
.name-dialog::backdrop { background: #08090ccc; backdrop-filter: blur(4px); }
.name-dialog h2 { margin: 0 0 1rem; font-size: 1.6rem; }
.name-dialog label { display: block; margin-bottom: .45rem; color: #c7c8cc; font-size: .9rem; }
.name-dialog input { width: 100%; min-height: 3rem; padding: .7rem .8rem; border: 1px solid #575960; border-radius: .65rem; outline: none; background: #111216; color: #fff; }
.name-dialog input:focus-visible, button:focus-visible { outline: 3px solid #d4ffba; outline-offset: 3px; }
.name-dialog .replay-button { margin-top: .5rem; }
.form-error { min-height: 1.3em; color: #ff9c9c; font-size: .8rem; }