:root { --bg1: #A1C4FD; --bg2: #C2E9FB; --ink: #1D2A7A; --hot: #FF3B4E; --font: "Baloo 2", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: linear-gradient(180deg, var(--bg1), var(--bg2)); color: #fff; font-family: var(--font); font-weight: 700; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; cursor: pointer; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.pop { position: absolute; transform: translate(0, -50%); font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.15), 0 0 12px rgba(0,0,0,.12); animation: rise .9s ease-out forwards; }
.pop.hot { color: #FFE14D; font-size: 38px; text-shadow: 0 0 14px #FF6A00, 0 2px 0 rgba(0,0,0,.2); }
@keyframes rise { from { opacity: 0; transform: translate(0, -20%) scale(.6); } 15% { opacity: 1; transform: translate(0, -60%) scale(1.1); } to { opacity: 0; transform: translate(0, -220%) scale(1); } }

.hud { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
.lv { grid-column: 2; display: flex; align-items: center; gap: 8px; }
.lv b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); font-size: 19px; line-height: 1; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.lv b.to { background: rgba(0,0,0,.14); color: #fff; }
.lv .bar { width: min(46vw, 230px); height: 14px; border-radius: 7px; background: rgba(0,0,0,.14); overflow: hidden; }
.lv .bar i { display: block; height: 100%; border-radius: 7px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.score { position: fixed; z-index: 5; top: calc(max(14px, env(safe-area-inset-top)) + 46px); left: 0; right: 0; margin: 0; text-align: center; font-size: 56px; font-weight: 800; line-height: 1; color: var(--ink); text-shadow: 0 0 14px rgba(255,255,255,.9); pointer-events: none; }
.ib { grid-column: 3; justify-self: end; pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.14); color: #fff; }
.ib svg { width: 22px; height: 22px; }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.banner { position: fixed; z-index: 6; left: 0; right: 0; top: 38%; margin: 0; text-align: center; font-size: clamp(40px, 11vw, 64px); font-weight: 800; color: #FFE14D; text-shadow: 0 0 22px #FF6A00, 0 4px 0 rgba(0,0,0,.15); pointer-events: none; }
.banner.go { animation: ban 1.1s ease-out forwards; }
@keyframes ban { from { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } to { opacity: 0; transform: translateY(-30px); } }

/* ready screen: no box, just type on the gradient */
.ready { position: fixed; z-index: 8; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(118px, calc(env(safe-area-inset-top) + 104px)) 20px max(22px, env(safe-area-inset-bottom)); pointer-events: none; text-align: center; }
.ready > * { pointer-events: auto; display: flex; flex-direction: column; align-items: center; }
.logo { margin: 0; font-size: clamp(64px, 17vw, 96px); font-weight: 800; line-height: .9; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 0 18px rgba(255,255,255,.8), 0 5px 0 rgba(0,0,0,.1); }
.logo span { color: var(--hot); }
.lvtag { margin: 10px 0 0; font-size: 22px; }
.lvtag b { padding: 2px 14px; border-radius: 99px; background: #fff; color: var(--ink); }
.lvtag span { margin-left: 8px; }
.hint { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 20px; border-radius: 99px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 18px; white-space: nowrap; animation: nudge 1.6s ease-in-out infinite; }
.hint svg { width: 26px; height: 26px; animation: swipe 1.6s ease-in-out infinite; }
@keyframes swipe { 0%, 100% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(8deg); } }
@keyframes nudge { 50% { transform: translateY(-3px); } }
.rule { margin: 0 0 14px; padding: 6px 14px; border-radius: 14px; background: rgba(0,0,0,.18); font-size: 15px; line-height: 1.35; }
.skins { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.skin { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 42%); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.skin.sel { border-color: #fff; transform: scale(1.15); }
.skin:disabled { cursor: default; background: rgba(255,255,255,.25); }
.skin span { font-size: 14px; color: #fff; }
.skin:focus-visible, .btn:focus-visible, .ib:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.foot { margin: 0; }
.foot a { color: #fff; font-size: 17px; padding: 2px 12px; border-radius: 99px; background: rgba(0,0,0,.18); }

/* result cards */
.card { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 340px); padding: 24px 22px 20px; border-radius: 28px; background: rgba(255,255,255,.96); color: var(--ink); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.18); animation: card .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes card { from { transform: translate(-50%, -40%) scale(.9); opacity: 0; } }
.card h2 { margin: 0; font-size: 36px; line-height: 1.05; }
.sub { margin: 4px 0 14px; opacity: .75; font-size: 17px; }
.unlock { margin: 8px auto 12px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 99px; background: #F1F1F8; font-size: 16px; }
.unlock::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 42%); }
.card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 6px 0 18px; }
.card dt { grid-row: 1; font-size: 14px; opacity: .6; }
.card dd { grid-row: 2; margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 18px; background: var(--hot); color: #fff; font-size: 24px; font-weight: 800; box-shadow: 0 5px 0 #C21F33; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #C21F33; }
.btn svg { width: 22px; height: 22px; stroke-width: 2.8; }

body.playing .ready { display: none; }
body:not(.playing) .score { opacity: 0; }
.ogmark { display: none; }
body.og .ogmark { display: block; position: fixed; z-index: 8; left: 7%; top: 50%; transform: translateY(-50%); }
body.og .ogmark .logo { font-size: 128px; }
body.og .ogmark p { margin: 14px 0 0 4px; font-size: 34px; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
body.demo .hud, body.demo .score, body.demo .ready, body.demo .card, body.demo .banner, body.demo #fx { display: none !important; }
@media (prefers-reduced-motion: reduce) { .hint, .hint svg, .banner.go, .card { animation: none; } }