:root { color-scheme: dark; font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #090b12; }
body { color: #f7f0dc; touch-action: none; user-select: none; }
main { width: min(100%, 760px); height: 100dvh; margin: auto; display: grid; grid-template-rows: 58px 1fr; background: #11131b; box-shadow: 0 0 70px #000; }
header { z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #ffffff20; background: #11131bee; }
header a { color: #aeb2c0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.title { font-size: 19px; font-weight: 1000; letter-spacing: -.04em; transform: skew(-5deg); }
.title span { color: #ff5147; }
.score { min-width: 66px; text-align: right; font-size: 12px; font-weight: 900; letter-spacing: .05em; }
.score span { font-size: 19px; font-variant-numeric: tabular-nums; }
.game-shell { position: relative; min-height: 0; overflow: hidden; background: #171a24; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: #090b1275; backdrop-filter: blur(3px); transition: opacity .25s; }
.overlay.hidden { opacity: 0; pointer-events: none; }
.card { width: min(420px, 100%); padding: clamp(24px, 7vw, 42px); text-align: center; color: #171820; border: 3px solid #171820; border-radius: 18px; background: #fff7e5; box-shadow: 9px 9px 0 #ff5147; transform: rotate(-1deg); }
.eyebrow { margin: 0 0 9px; color: #ef493f; font-size: 11px; font-weight: 1000; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(32px, 9vw, 54px); line-height: .9; letter-spacing: -.065em; }
#detail { margin: 17px auto 20px; max-width: 330px; color: #5c5a59; font-size: 14px; line-height: 1.45; }
button { border: 0; border-radius: 999px; padding: 13px 27px; color: white; background: #171820; box-shadow: 0 5px 0 #77736c; font: inherit; font-weight: 1000; cursor: pointer; }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #77736c; }
.controls { margin: 16px 0 0; color: #89847d; font-size: 11px; font-weight: 700; }
.mobile { display: none; }
.power { position: absolute; top: 14px; left: 50%; padding: 7px 12px; opacity: 0; border: 2px solid #fff; border-radius: 99px; color: #fff; background: #171820; box-shadow: 0 0 22px #d944ff; font-size: 10px; font-weight: 1000; letter-spacing: .08em; pointer-events: none; transform: translate(-50%, -10px); transition: .2s; }
.power.active { opacity: 1; transform: translate(-50%, 0); animation: rainbow 1s linear infinite; }
.boost { position: absolute; top: 14px; right: 14px; padding: 7px 11px; opacity: 0; border: 2px solid #ff493e; border-radius: 99px; color: #fff; background: #2a0504; box-shadow: 0 0 20px #ff2b20; font-size: 10px; font-weight: 1000; letter-spacing: .07em; pointer-events: none; transform: translateY(-10px); transition: .2s; }
.boost.active { opacity: 1; transform: translateY(0); }
.milestone { position: absolute; z-index: 2; top: 55px; left: 50%; min-width: 180px; padding: 9px 18px 10px; opacity: 0; border: 2px solid #ffb24b; border-radius: 9px; text-align: center; color: #fff7e5; background: #171820ee; box-shadow: 0 6px 24px #0009; pointer-events: none; transform: translate(-50%, -28px) scale(.92); transition: opacity .22s, transform .22s; }
.milestone.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.milestone span { display: block; color: #ffb24b; font-size: 9px; font-weight: 1000; letter-spacing: .16em; }
.milestone strong { display: block; margin-top: 1px; font-size: 20px; letter-spacing: -.03em; }
@keyframes rainbow { to { filter: hue-rotate(360deg); } }
@media (pointer: coarse), (max-width: 650px) {
  main { width: 100%; grid-template-rows: 52px 1fr; }
  header { padding: 0 12px; }
  header a { font-size: 9px; }
  .title { font-size: 17px; }
  .desktop { display: none; }
  .mobile { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .power.active { animation: none; } }