*{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:dark;--bg:#171312;--panel:#2f2927;--line:#4b423e;--muted:#b9b2af;--blue:#75bfff;--green:#71d981;--orange:#f4a33b}
body{min-width:320px;min-height:100vh;color:#fff;background:radial-gradient(circle at 50% -20%,#513229 0,#251b18 34rem,var(--bg) 60rem);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
button{font:inherit}
.page{width:min(100%,760px);margin:auto;padding:0 16px}
.header,.footer{text-align:center;padding:24px 0}
.eyebrow{color:var(--orange);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
h1{text-transform:uppercase;font-size:clamp(2rem,8vw,3.8rem);font-weight:950;letter-spacing:-.05em}
h1 span{color:var(--blue)}
.subtitle{font-size:1.15rem;font-weight:700;color:#ddd4d0}
.rules{min-height:3.2rem;margin:8px auto 18px;color:var(--muted);font-size:1.04rem;text-align:center}
.rules strong{color:#fff}.rules code{padding:2px 5px;border:1px solid #666;border-radius:4px;background:var(--panel)}
.game{display:flex;flex-wrap:wrap;gap:16px;max-width:544px;margin:auto;justify-content:center}
.icon,.scoreboard{position:relative;display:flex;align-items:center;justify-content:center;width:96px;height:96px;border:2px solid transparent;border-radius:10px;color:#fff}
.icon{appearance:none;background:linear-gradient(145deg,#39312e,var(--panel));border-color:var(--line);font-size:3.4rem;outline:0;cursor:default;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.icon:active{transform:none}
.icon.is-start:focus{border-color:var(--blue);background:#5d5b5a}
.with-focus .icon:focus{border-color:var(--blue);background:#5d5b5a;box-shadow:0 0 0 4px rgba(117,191,255,.14),0 10px 28px rgba(0,0,0,.2)}
.with-focus .icon.is-finish:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(113,217,129,.14),0 10px 28px rgba(0,0,0,.2)}
.no-focus .icon:not(.is-start):focus{border-color:var(--line);background:linear-gradient(145deg,#39312e,var(--panel))}
.scoreboard{flex-direction:column;text-align:center;font-size:1rem;background:rgba(0,0,0,.12)}
.scoreboard strong{text-transform:uppercase;letter-spacing:.04em}
#timer{font:1rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.badge{position:absolute;bottom:-9px;padding:0 8px;font-size:.7rem;font-weight:800;line-height:17px;text-transform:uppercase;border-radius:10px;background:var(--line)}
.is-start:focus .badge,.with-focus :focus .badge{color:#18120f;background:var(--blue)}
.with-focus .is-finish:focus .badge{background:var(--green)}
.instructions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:32px auto 0}
.instructions button,.replay{min-height:46px;padding:8px 13px;color:var(--muted);background:var(--panel);border:2px solid var(--line);border-radius:9px;cursor:pointer}
.instructions button{display:flex;align-items:center;gap:7px}
.instructions button:hover,.instructions button:focus,.replay:hover,.replay:focus{color:#fff;border-color:var(--blue);outline:0}
kbd{font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 5px;border:1px solid #746862;border-bottom-width:3px;border-radius:4px;color:#fff;background:#201b19}
.tip{max-width:560px;margin:16px auto 0;text-align:center;color:#88817e;font-size:.85rem}
.footer{margin-top:18px;color:#8f8885;font-size:.82rem}
.shake{animation:headShake .58s ease-in-out}
.level-flash .icon:not(.is-start){animation:highlight .85s ease-in-out}.level-flash .icon:nth-of-type(2n){animation-delay:.08s}.level-flash .icon:nth-of-type(3n){animation-delay:.16s}
.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.order-13{order:13}.order-14{order:14}.scoreboard.order-board{order:0}
.end{max-width:560px;min-height:440px;margin:auto;padding:48px 28px;text-align:center;border:2px solid var(--line);border-radius:18px;background:rgba(47,41,39,.72);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.pie{font-size:5rem;filter:drop-shadow(0 12px 18px rgba(0,0,0,.32))}.ending-kicker{color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.12em}.end h2{margin:8px 0 16px;font-size:clamp(1.8rem,6vw,2.7rem);line-height:1.08}.end p{margin:12px auto;color:var(--muted)}.end strong{color:#fff;font:700 1.15rem ui-monospace,SFMono-Regular,Menlo,monospace}.replay{margin-top:12px;color:#fff;font-weight:800}
@keyframes headShake{0%,50%{transform:translateX(0)}7%{transform:translateX(-7px) rotate(-2deg)}19%{transform:translateX(6px) rotate(2deg)}32%{transform:translateX(-4px)}44%{transform:translateX(2px)}}
@keyframes highlight{0%,100%{border-color:var(--line)}50%{border-color:var(--blue);background:#5d5b5a}}
@media(max-width:600px){.game{max-width:320px}.icon,.scoreboard{width:88px;height:88px}.icon{font-size:3rem}.header{padding:18px 0}.instructions{max-width:330px}.instructions button{flex:1 1 96px;justify-content:center}.instructions button span{display:none}}
@media(max-width:375px){.game{gap:12px}.icon,.scoreboard{width:80px;height:80px}.icon{font-size:2.8rem}}
@media(prefers-reduced-motion:reduce){.shake,.level-flash .icon{animation-duration:.01ms!important;animation-iteration-count:1!important}}