:root{color-scheme:light;--ink:#243d39;--muted:#63756f;--green:#167665;--line:#dde6df;--hit:#137766;--blow:#976014}*{box-sizing:border-box}body{margin:0;background:#f6f8f3;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;line-height:1.6}main{max-width:1000px;margin:auto;padding:40px 28px 24px}.page-header{text-align:center;margin-bottom:30px}.eyebrow{color:var(--green);font-size:12px;letter-spacing:.16em;font-weight:700}h1{font-size:46px;line-height:1.2;margin:12px 0 16px;letter-spacing:-.03em}h1>span:not(.subtitle){color:#85ad71}.subtitle{display:block;font-size:13px;letter-spacing:.15em;margin-top:10px}p{margin:0}.page-header>p{color:var(--muted);font-size:14px}.card{background:white;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 5px 20px #253e3604}h2{font-size:16px;margin:0}.settings{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding:18px 26px}.settings>div{display:flex;align-items:center;gap:22px}.digits{display:flex;gap:7px}button{font:inherit;font-weight:650;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;min-height:48px;touch-action:manipulation;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#edf4eb}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,.table-scroll:focus-visible{outline:3px solid #d89837;outline-offset:3px}.digits button{min-width:52px}.digits button[aria-pressed=true]{color:white;background:var(--green);border-color:var(--green)}.quiet{font-size:13px;padding:0 16px;background:#f6f8f3}.play-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.tag{background:#f0f4ee;color:var(--muted);font-size:12px;border-radius:20px;padding:4px 10px;white-space:nowrap}.hint{font-size:12px;color:var(--muted);margin-top:7px}.slots{display:flex;justify-content:center;gap:9px;margin-top:24px}.slot{display:flex;align-items:center;justify-content:center;width:58px;height:70px;background:#f6f8f3;border:2px solid var(--line);border-radius:12px;font-size:32px;font-weight:700;font-variant-numeric:tabular-nums}.slot.active{border-color:var(--green);background:#f1f8f0}.message{font-size:12px;min-height:40px;margin:12px 0 4px;color:var(--muted)}.message.error{color:#af3636}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.keypad button{height:54px;font-size:23px;background:#fafbf8}.keypad .edit{font-size:13px;background:white;color:var(--muted)}small{font-size:10px;display:block;line-height:1}.primary{width:100%;margin-top:16px;min-height:54px;color:white;background:var(--green);border-color:var(--green);display:flex;justify-content:center;gap:18px;align-items:center}.primary:hover:not(:disabled){background:#105f51}button:disabled{cursor:default;opacity:.42}.latest{font-size:13px;color:var(--muted);min-height:42px;margin-top:12px}.table-scroll{max-height:455px;overflow:auto;scrollbar-gutter:stable}table{width:100%;border-collapse:collapse;text-align:center;font-variant-numeric:tabular-nums}th{position:sticky;top:0;background:#f4f7f1;font-size:12px;padding:10px 5px}td{padding:12px 5px;border-bottom:1px solid #edf0e9;font-size:15px}td:nth-child(2){font-size:22px;letter-spacing:.14em;font-weight:700}td:first-child{color:var(--muted);font-size:12px}.hit{color:var(--hit)}.blow{color:var(--blow)}td.hit,td.blow{font-weight:750}.empty{text-align:center;color:var(--muted);font-size:13px;padding:65px 8px}.success{margin-top:20px;padding:18px;border-radius:14px;background:#eef6df;border:1px solid #c9dfa6}.unique{margin:0 auto 26px;padding:36px 24px;text-align:center;border:3px solid #b9d55b;border-radius:22px;background:#124e43;color:#fff;box-shadow:0 12px 32px #124e4326;animation:unique-reveal .4s ease-out;scroll-margin-block:20px}.unique h2{font-size:clamp(26px,4.1vw,42px);line-height:1.4;font-weight:800;text-wrap:balance}.unique p{font-size:clamp(17px,2.1vw,23px);line-height:1.7;margin-top:16px;text-wrap:balance}.unique-digits{font-size:clamp(40px,7vw,68px);font-weight:800;letter-spacing:.12em;color:#f4ed9d;line-height:1.3;margin:20px 0;overflow-wrap:anywhere}.unique .unique-prompt{font-size:clamp(22px,2.8vw,30px);font-weight:750;margin-top:0}@keyframes unique-reveal{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.success{text-align:center;background:#eef8f4;border-color:#b5d9ce}.answer{font-size:36px;font-weight:750;letter-spacing:.18em;margin:10px 0}.success #summary{font-size:13px;white-space:pre-line}.rules{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin:25px 0 0;padding:22px 26px;border:1px dashed #cdd9ce;border-radius:18px}.rules strong{font-size:19px}.rules p{font-size:12px;color:var(--muted)}.rules .example{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px}footer{text-align:center;font-size:11px;color:var(--muted);margin-top:22px}[hidden]{display:none!important}@keyframes reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:720px){main{padding:26px 16px 22px}.play-layout{grid-template-columns:1fr}.page-header{margin-bottom:22px}h1{font-size:38px}.settings{padding:16px;gap:12px;flex-wrap:wrap}.settings>div{gap:10px;flex-wrap:wrap}.settings h2{font-size:13px}.digits{gap:5px}.digits button{min-width:48px}.quiet{flex:1}.card{padding:22px}.settings{padding:16px}.table-scroll{max-height:360px}.rules{padding:18px;gap:12px}.slot{width:52px;height:64px}.slots{gap:7px}}@media(max-width:360px){main{padding:20px 12px}.card{padding:16px}.slot{width:44px;height:60px}.section-heading h2{font-size:14px}.rules{grid-template-columns:1fr}}

/* Celebration stays in the page flow, so all controls remain accessible. */
.settings .game-actions{display:flex;gap:8px;flex-wrap:wrap}
#sound-toggle[aria-pressed="true"]{background:#e1f1d8;border-color:#167665;color:#124e43}
.sound-status{font-size:12px;color:var(--muted);margin:-12px 4px 20px}
.success{margin:0 auto 26px;padding:36px 24px;text-align:center;border:3px solid #b9d55b;border-radius:22px;background:#124e43;color:white;box-shadow:0 12px 32px #124e4326;animation:unique-reveal .4s ease-out;scroll-margin-block:20px}
.success h2{font-size:clamp(28px,4.6vw,48px);font-weight:800;line-height:1.4;text-wrap:balance}
.success .answer{font-size:clamp(44px,7vw,72px);color:#f4ed9d;margin:14px 0;overflow-wrap:anywhere}
.success #summary{font-size:clamp(17px,2.2vw,23px);line-height:1.8}
.success .primary{max-width:320px;margin:22px auto 0;background:#fff;color:#124e43;border-color:#fff;font-size:18px}
.success .primary:hover{background:#edf4eb}
.confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20;contain:strict}
.confetti-piece{position:absolute;top:-24px;left:var(--x);width:10px;height:17px;background:var(--color);border-radius:2px;opacity:0;animation:confetti-fall var(--duration) var(--delay) linear forwards;will-change:transform,opacity}
@keyframes confetti-fall{0%{opacity:0;transform:translate3d(0,-20px,0) rotate(0)}8%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),calc(100vh + 50px),0) rotate(var(--spin))}}
@media(max-width:720px){.settings .game-actions{width:100%}.game-actions .quiet{flex:1}.success{padding:28px 18px}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.success{animation:none}}