:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1d2b53; overscroll-behavior: none; touch-action: none; }
body { position: fixed; inset: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif; color: #fff; }
#safe-probe { position: absolute; visibility: hidden; padding: var(--sat) var(--sar) var(--sab) var(--sal); }
canvas#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: none; touch-action: manipulation; }
.hbtn { width: 44px; height: 44px; border-radius: 12px; background: rgba(20,28,60,.55); color: #fff; font-size: 22px; line-height: 44px; padding: 0; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.hbtn:active { transform: scale(.94); }
#hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--sat) + 8px) calc(var(--sar) + 10px) 0 calc(var(--sal) + 10px); display: flex; align-items: center; gap: 8px; pointer-events: none; }
#hud .hbtn { pointer-events: auto; }
#hud-mid { flex: 1; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
#hud-level { font-weight: 800; font-size: 17px; }
#hud-balls { margin-top: 3px; height: 16px; display: flex; justify-content: center; gap: 5px; }
#hud-balls i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9aa3b5, #2c3140 70%); display: inline-block; box-shadow: 0 1px 0 rgba(0,0,0,.4); }
#hud-balls i.used { opacity: .25; }
#hint { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 18px); text-align: center; font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.6); pointer-events: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--sat) + 10px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px); }
#title { background: linear-gradient(180deg, rgba(29,43,83,.15), rgba(29,43,83,.65)); gap: 14px; }
.logo { display: flex; flex-direction: column; align-items: center; font-weight: 900; line-height: .95; letter-spacing: 2px; margin-bottom: 4px; transform: rotate(-4deg); }
.logo span { font-size: 58px; color: #ffd23f; text-shadow: 0 4px 0 #b5651d, 0 8px 14px rgba(0,0,0,.45); -webkit-text-stroke: 2px #6b2f0b; }
.logo span:last-child { color: #fff; text-shadow: 0 4px 0 #6d7a99, 0 8px 14px rgba(0,0,0,.45); -webkit-text-stroke: 2px #2a3352; }
.tag { font-size: 16px; font-weight: 700; opacity: .92; margin-bottom: 14px; text-shadow: 0 2px 2px rgba(0,0,0,.4); }
.big { width: 220px; height: 60px; border-radius: 18px; font-size: 26px; font-weight: 900; color: #fff; background: linear-gradient(#ffb400, #f07c00); box-shadow: inset 0 -5px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.3); }
.big.alt, .mid.alt { background: linear-gradient(#5d8dff, #3456c9); }
.big:active, .mid:active { transform: scale(.95); }
.coins-line { font-weight: 800; font-size: 18px; margin-top: 8px; }
#levels { justify-content: flex-start; background: linear-gradient(180deg, #24346b, #1d2b53); }
.lv-head { width: 100%; max-width: 460px; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lv-title { flex: 1; text-align: center; font-weight: 900; font-size: 22px; }
.lv-coins { font-weight: 800; min-width: 44px; text-align: right; }
.lv-stars { margin: 8px 0 10px; font-weight: 800; color: #ffd23f; font-size: 18px; }
#lv-grid { width: 100%; max-width: 460px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; overflow-y: auto; padding: 4px 2px 20px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.lv { aspect-ratio: 1 / 1.05; border-radius: 16px; background: linear-gradient(#ffb400, #f07c00); color: #fff; font-weight: 900; font-size: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.lv .st { font-size: 13px; letter-spacing: 1px; color: rgba(0,0,0,.25); margin-top: 2px; }
.lv .st b { color: #fff6a8; font-weight: 900; }
.lv.locked { background: linear-gradient(#59618a, #3d446b); color: rgba(255,255,255,.4); font-size: 22px; }
.dim { background: rgba(10,14,30,.55); }
.card { width: min(320px, 90vw); background: linear-gradient(#fff8e6, #f3dfb1); color: #4a2a08; border-radius: 24px; padding: 20px 16px 18px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 -5px 0 rgba(0,0,0,.12); animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
#res-title { font-size: 26px; font-weight: 900; }
#res-stars { font-size: 52px; margin: 6px 0; letter-spacing: 4px; }
#res-stars span { color: #d6c8a8; display: inline-block; }
#res-stars span.on { color: #ffc400; text-shadow: 0 3px 0 #c27c00; animation: pop .4s backwards; }
#res-stars span.on:nth-child(2) { animation-delay: .15s; }
#res-stars span.on:nth-child(3) { animation-delay: .3s; }
#res-score { font-size: 18px; font-weight: 800; }
#res-coins { font-size: 16px; font-weight: 700; margin: 6px 0 14px; min-height: 20px; }
.row { display: flex; gap: 10px; justify-content: center; }
.mid { height: 52px; min-width: 52px; padding: 0 16px; border-radius: 16px; font-size: 20px; font-weight: 900; color: #fff; background: linear-gradient(#ffb400, #f07c00); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
#hud-shots { font-size: 13px; font-weight: 700; margin-top: 3px; opacity: .95; }
#hud-targets { position: absolute; right: calc(var(--sar) + 14px); top: calc(var(--sat) + 60px); font-weight: 800; font-size: 15px; background: rgba(20,28,60,.45); padding: 4px 10px; border-radius: 10px; }
#hud-targets::before { content: "\1F451  "; }
#cross { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; pointer-events: none; will-change: transform; }
#cross::before, #cross::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.7); }
#cross::before { left: 27px; top: 4px; width: 2px; height: 48px; }
#cross::after { top: 27px; left: 4px; height: 2px; width: 48px; }
#cross i { position: absolute; inset: 10px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,.6); }
#popups { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; }
.popup { font-weight: 900; font-size: 30px; color: #ffe14d; text-shadow: 0 3px 0 #a86a00, 0 6px 10px rgba(0,0,0,.4); animation: rise .9s ease-out forwards; }
@keyframes rise { from { transform: translateY(10px) scale(.7); opacity: 0; } 20% { opacity: 1; transform: scale(1.1); } to { transform: translateY(-50px); opacity: 0; } }
#hud-balls { display: none; }
#progress { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 62px); width: min(70vw, 300px); pointer-events: none; }
#bar { height: 14px; border-radius: 8px; background: rgba(15,22,50,.55); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.7); }
#bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff9f1c); transition: width .25s ease-out; }
#bar-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; margin-top: 3px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#hud-targets, #hud-targets-wrap { display: none; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #1d2b53; font-weight: 800; font-size: 20px; }