@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@500;700;900&display=swap');
:root { font-family: Inter, system-ui, sans-serif; color: white; background: #08141f; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 0, #264b60, #07131d 70%); }
#game-shell { position: relative; width: min(100vw, 520px); height: 100dvh; min-height: 580px; margin: auto; overflow: hidden; background: #89b5c4; box-shadow: 0 0 70px #000a; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; }
#hud { position: absolute; inset: 0 0 auto; padding: 18px 18px 0; pointer-events: none; text-shadow: 0 2px 3px #082236cc; }
.brand { font: 28px/1 Anton, sans-serif; letter-spacing: .04em; transform: skew(-5deg); }
.brand span { color: #8ce9ff; }
.level { position: absolute; top: 22px; right: 18px; font-size: 12px; letter-spacing: .12em; }
.progress { height: 6px; margin-top: 12px; border-radius: 10px; overflow: hidden; background: #06131e77; }
.progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #6ceeff, #fff); transition: width .15s linear; }
#card { position: absolute; inset: auto 18px 22px; padding: 25px 22px 22px; border: 1px solid #c5efff55; border-radius: 22px; background: linear-gradient(145deg, #0b2337ed, #07131ff2); box-shadow: 0 22px 50px #0009; text-align: center; transform: translateY(130%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
#card.show { transform: translateY(0); }
.kicker { margin: 0 0 7px; color: #7ee8ff; font-size: 11px; font-weight: 900; letter-spacing: .2em; }
h1 { margin: 0; font: 38px/1.05 Anton, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
#card > p:not(.kicker) { max-width: 340px; margin: 13px auto 20px; color: #b8ccda; font-size: 14px; line-height: 1.5; }
button { width: 100%; padding: 16px; border: 0; border-radius: 13px; color: #092031; background: linear-gradient(#9af3ff, #4fcbe8); box-shadow: 0 5px 0 #2787a4, 0 9px 20px #39bddd55; font: 22px Anton, sans-serif; letter-spacing: .08em; cursor: pointer; }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 #2787a4; }
#hint { position: absolute; bottom: 44px; left: 50%; width: max-content; padding: 10px 15px; border-radius: 30px; background: #06131ecc; font-size: 12px; font-weight: 900; letter-spacing: .12em; opacity: 0; transform: translateX(-50%); transition: opacity .25s; pointer-events: none; }
#hint.show { opacity: 1; animation: bob 1s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateX(-50%) translateY(-5px); } }