html, body { margin: 0; height: 100%; overflow: hidden; background: #2a160b; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#app { position: fixed; inset: 0; overflow: hidden; font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif; font-weight: 900; color: #fff; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#scorebox { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); }
.scoreline { display: flex; align-items: center; gap: 10px; }
.melon { width: 54px; height: 30px; border-radius: 0 0 54px 54px; background:
  radial-gradient(circle at 50% 0%, #ff4458 0 58%, #ff6670 58% 60%, #f3f6d8 60% 72%, #2f7a24 72% 100%);
  transform: rotate(-14deg); filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); position: relative; }
.melon::after { content: ""; position: absolute; left: 14px; top: 6px; width: 4px; height: 6px; border-radius: 50%; background: #1a0c08; box-shadow: 10px 3px 0 #1a0c08, 20px 0 0 #1a0c08, 6px 11px 0 #1a0c08, 16px 10px 0 #1a0c08; }
#score { font-size: 46px; line-height: 1; color: #ffd23a; letter-spacing: 1px;
  -webkit-text-stroke: 2px #7a3a00; paint-order: stroke fill; text-shadow: 0 4px 0 #5a2600, 0 6px 14px rgba(0,0,0,.45); transition: transform .08s; display: inline-block; }
#score.bump { transform: scale(1.18); }
#score.gold { color: #fff27a; text-shadow: 0 0 18px #ffcc00, 0 4px 0 #5a2600; }
#best { margin: 4px 0 0 66px; font-size: 15px; color: #ffe9b8; opacity: .85; text-shadow: 0 2px 0 rgba(0,0,0,.5); letter-spacing: 1px; }
#lives { position: absolute; right: max(14px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); display: flex; gap: 2px; align-items: flex-start; }
#lives .x { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); transition: transform .2s; }
#lives .x:nth-child(2) { width: 46px; height: 46px; }
#lives .x:nth-child(3) { width: 54px; height: 54px; }
#lives .x path { stroke: #4fb7ff; stroke-width: 7; stroke-linecap: round; fill: none; opacity: .55; }
#lives .x.lost path { stroke: #ff2b2b; opacity: 1; }
#lives .x.lost { animation: xpop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes xpop { 0% { transform: scale(2.2) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
#timer { position: absolute; right: max(18px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); font-size: 44px; color: #fff; -webkit-text-stroke: 2px #3a1a00; paint-order: stroke fill; text-shadow: 0 4px 0 #3a1a00; }
#timer.low { color: #ff5a3a; animation: tpulse .5s infinite alternate; }
@keyframes tpulse { to { transform: scale(1.12); } }
#powers { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 10px; }
#powers .pw { padding: 6px 14px; border-radius: 20px; font-size: 15px; letter-spacing: 1px; border: 2px solid rgba(255,255,255,.7); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#powers .pw.freeze { background: linear-gradient(#7fd6ff, #2a86d8); }
#powers .pw.frenzy { background: linear-gradient(#ff8a5a, #d8261a); }
#powers .pw.double { background: linear-gradient(#ffe46a, #e8a400); color: #5a3000; text-shadow: none; }

/* ---------- popups ---------- */
#popups { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: popin 1.15s cubic-bezier(.2,1.4,.4,1) forwards; }
.pop .n { font-size: 78px; line-height: .9; color: #ffde3a; -webkit-text-stroke: 4px #7a2a00; paint-order: stroke fill; text-shadow: 0 5px 0 #5a1e00, 0 10px 24px rgba(0,0,0,.45); }
.pop .t { font-size: 28px; color: #fff3c8; -webkit-text-stroke: 3px #6a2400; paint-order: stroke fill; letter-spacing: 1px; text-shadow: 0 3px 0 #4a1800; }
.pop .p { font-size: 40px; color: #fff; -webkit-text-stroke: 3px #6a2400; paint-order: stroke fill; text-shadow: 0 4px 0 #4a1800; }
.pop.big .n { font-size: 96px; color: #ff9b2a; }
.pop.neg .n { color: #ff4a3a; }
.pop.life .t { color: #8fe0ff; }
@keyframes popin { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 14% { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
  26% { transform: translate(-50%,-50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%,-90%) scale(.96); opacity: 0; } }
.missx { position: absolute; width: 56px; height: 56px; transform: translate(-50%, -100%); animation: missx 1.1s ease-out forwards; }
.missx path { stroke: #ff2222; stroke-width: 8; stroke-linecap: round; fill: none; }
@keyframes missx { 0% { transform: translate(-50%,-60%) scale(.3); opacity: 0; } 15% { transform: translate(-50%,-100%) scale(1.25); opacity: 1; } 30% { transform: translate(-50%,-100%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%,-130%) scale(1); opacity: 0; } }

/* ---------- mode rings ---------- */
#rings { position: absolute; inset: 0; pointer-events: none; }
.ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.ring .spin { position: absolute; inset: 0; border-radius: 50%; border: 5px dashed rgba(255,232,170,.75); animation: rspin 9s linear infinite; box-shadow: 0 0 24px rgba(255,190,90,.35), inset 0 0 24px rgba(255,190,90,.25); }
.ring.main .spin { border-color: rgba(255,210,90,.95); border-width: 6px; }
.ring .bg { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(rgba(60,25,6,.0) 50%, rgba(40,15,0,.45) 100%); }
.ring .lab { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); font-size: 22px; letter-spacing: 2px; color: #ffe9a8; -webkit-text-stroke: 1.5px #4a1e00; paint-order: stroke fill; text-shadow: 0 3px 0 #3a1500; white-space: nowrap; }
.ring .sub { display: block; font-size: 12px; letter-spacing: 1px; color: #f6d8a0; -webkit-text-stroke: 0; text-align: center; opacity: .85; margin-top: 2px; font-family: Arial, sans-serif; font-weight: 700; }
.ring.fade { opacity: 0; transition: opacity .3s; }
@keyframes rspin { to { transform: rotate(360deg); } }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
#title { justify-content: flex-start; padding-top: max(4vh, 18px); }
.logo { position: relative; text-align: center; transform: rotate(-4deg); animation: logoin .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes logoin { from { transform: rotate(-4deg) scale(.4); opacity: 0; } }
.logo .l1, .logo .l2 { font-size: min(15vw, 132px); line-height: .86; letter-spacing: 2px; }
.logo .l1 { background: linear-gradient(#fff36a 5%, #ffb21a 45%, #ff5a0a 80%, #d8260a); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #5a1a00; filter: drop-shadow(0 6px 0 #3a1000) drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.logo .l2 { font-size: min(11.5vw, 100px); background: linear-gradient(#ffffff 10%, #cfe6f0 45%, #7f9aa8 55%, #e8f4f8 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #1a2a33; filter: drop-shadow(0 6px 0 #10181c) drop-shadow(0 12px 18px rgba(0,0,0,.5)); margin-top: -2px; }
.logo .slash { position: absolute; left: -8%; right: -8%; top: 47%; height: 7px; border-radius: 7px; background: linear-gradient(90deg, transparent, #fff 30%, #bfeaff 70%, transparent); box-shadow: 0 0 16px #9fe2ff, 0 0 36px #4fb7ff; transform: rotate(-9deg); animation: slashin .5s .35s both cubic-bezier(.3,1.3,.5,1); }
@keyframes slashin { from { transform: rotate(-9deg) scaleX(0); transform-origin: left; } }
.hint { position: absolute; bottom: max(3.5vh, 16px); font-size: 17px; color: #ffe9c0; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.6); animation: hint 1.4s ease-in-out infinite alternate; text-align: center; padding: 0 16px; }
.hint .keys { opacity: .7; font-size: 14px; }
@keyframes hint { from { opacity: .55; } to { opacity: 1; } }
#over { justify-content: flex-start; padding-top: max(6vh, 24px); background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.0), rgba(0,0,0,.35)); }
.ovtitle { font-size: min(13vw, 96px); color: #ff3a2a; -webkit-text-stroke: 3px #3a0600; paint-order: stroke fill; text-shadow: 0 6px 0 #2a0400, 0 14px 30px rgba(0,0,0,.6); letter-spacing: 3px; animation: logoin .6s cubic-bezier(.2,1.5,.4,1); }
.ovscore { margin-top: 6px; font-size: min(14vw, 84px); color: #ffd23a; -webkit-text-stroke: 3px #6a2a00; paint-order: stroke fill; text-shadow: 0 5px 0 #4a1a00; }
.ovbest { font-size: 20px; color: #ffe9b8; text-shadow: 0 2px 0 rgba(0,0,0,.6); letter-spacing: 2px; }
.ovnew { margin-top: 8px; font-size: 26px; color: #fff; padding: 4px 18px; border-radius: 30px; background: linear-gradient(#ff8a2a, #e83a0a); box-shadow: 0 4px 0 #6a1a00; animation: newb .6s infinite alternate; }
@keyframes newb { to { transform: scale(1.08); } }
#banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%,-50%); font-size: min(12vw, 88px); letter-spacing: 3px; color: #fff; -webkit-text-stroke: 3px #2a1000; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.5); pointer-events: none; animation: banner 1.3s cubic-bezier(.2,1.4,.4,1) forwards; white-space: nowrap; }
#banner.freeze { color: #aee8ff; } #banner.frenzy { color: #ff7a4a; } #banner.double { color: #ffe24a; }
@keyframes banner { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1.12); opacity: 1; } 30% { transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-60%) scale(1); } }
#pause { justify-content: center; background: rgba(20,8,0,.55); pointer-events: auto; }
#pause .hint { position: static; margin-top: 10px; }
#mute { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,230,180,.6); background: rgba(40,15,0,.45); color: #ffe9b8; font-size: 20px; cursor: pointer; }
#mute.off { opacity: .45; text-decoration: line-through; }

@media (max-width: 600px) {
  #score { font-size: 38px; }
  .melon { width: 44px; height: 25px; }
  #best { margin-left: 54px; font-size: 13px; }
  #lives .x { width: 30px; height: 30px; } #lives .x:nth-child(2) { width: 36px; height: 36px; } #lives .x:nth-child(3) { width: 42px; height: 42px; }
  .ring .lab { font-size: 18px; }
  .pop .n { font-size: 56px; } .pop .t { font-size: 20px; } .pop .p { font-size: 28px; }
  #timer { font-size: 36px; }
  .hint { bottom: max(64px, 7vh); font-size: 15px; }
}

/* ---------- loading ---------- */
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 45%, #6a3a18, #1e0e05 75%); transition: opacity .45s; z-index: 5; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-logo { font-size: min(11vw, 64px); color: #ffb21a; -webkit-text-stroke: 2px #5a1a00; paint-order: stroke fill; text-shadow: 0 5px 0 #3a1000; letter-spacing: 2px; }
.ld-logo span { color: #e8f4f8; -webkit-text-stroke-color: #1a2a33; }
.ld-bar { width: min(60vw, 280px); height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 40%; border-radius: 8px; background: linear-gradient(90deg, #ffde3a, #ff7a1a); animation: ld 1s ease-in-out infinite alternate; }
@keyframes ld { from { transform: translateX(-60%); } to { transform: translateX(210%); } }
@media (pointer: coarse), (max-width: 600px) { .hint .keys { display: none; } }