/* ==========================================================================
   game.css — Oyun ekranı: tuval + HUD
   ========================================================================== */

#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hud { position: absolute; inset: 0; pointer-events: none; padding-top: var(--safe-t); }
.hud > * { pointer-events: none; }
.hud .round-btn { pointer-events: auto; position: absolute; top: calc(12px + var(--safe-t)); right: 12px; width: 46px; height: 46px; }

.hud-left { position: absolute; top: calc(12px + var(--safe-t)); left: 12px; }
.timebox {
    display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 9px; border-radius: 99px;
    background: rgba(8, 12, 40, 0.72); border: 2px solid rgba(255, 255, 255, 0.28); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.timebox svg { width: 26px; height: 26px; }
.timebox b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.timebox.low { border-color: #ff3b52; animation: lowPulse 0.5s ease-in-out infinite alternate; }
.timebox.low b { color: #ff6b7c; }
@keyframes lowPulse { to { transform: scale(1.08); } }

.lives { display: flex; gap: 6px; padding: 9px 12px; border-radius: 99px; background: rgba(8, 12, 40, 0.72); border: 2px solid rgba(255, 255, 255, 0.28); }
.lives i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb27a, #d1560f); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4); }
.lives i.lost { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 2px #ff3b52; opacity: 0.8; position: relative; }
.lives i.lost::after { content: "✕"; position: absolute; inset: 0; color: #ff3b52; font-size: 13px; font-style: normal; display: flex; align-items: center; justify-content: center; font-weight: 900; }

.scorebox {
    position: absolute; top: calc(8px + var(--safe-t)); left: 50%; transform: translateX(-50%); min-width: 112px; text-align: center;
    padding: 6px 16px 6px; border-radius: 14px; background: linear-gradient(180deg, rgba(36, 48, 120, 0.88), rgba(10, 14, 50, 0.9));
    border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.scorebox small { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: #b9c4f5; }
.scorebox b { display: block; font-size: 38px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.scorebox em { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: #ffd34a; margin-top: 2px; }

/* Kombo rozeti (sol) */
.combo {
    position: absolute; left: 10px; top: 36%; width: 76px; height: 86px; text-align: center; color: #fff;
    background: radial-gradient(ellipse at 50% 70%, rgba(255, 150, 20, 0.95), rgba(255, 60, 0, 0.5) 60%, transparent 72%);
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; filter: drop-shadow(0 0 14px rgba(255, 120, 0, 0.9));
    display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg);
}
.combo b { font-size: 38px; line-height: 0.95; font-weight: 900; color: #ffe45c; text-shadow: 0 3px 0 #a33000, 0 0 10px #ff7a00; }
.combo span { font-size: 12px; font-weight: 900; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 #a33000; }
.combo.bump { animation: bumpIn 0.35s ease-out; }
@keyframes bumpIn { 0% { transform: rotate(-8deg) scale(0.6); } 60% { transform: rotate(-8deg) scale(1.25); } 100% { transform: rotate(-8deg) scale(1); } }

/* Çarpan çubuğu (sağ) */
.meter { position: absolute; right: 12px; top: 34%; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.85; }
.meter.on { opacity: 1; }
.meter b { font-size: 24px; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.meter.on b { color: #ffd34a; }
.meter.fire b { color: #ff9a1f; text-shadow: 0 0 12px #ff5a00, 0 2px 0 #000; }
.meter b.bump { animation: multBump 0.4s ease-out; }
@keyframes multBump { 0% { transform: scale(0.5); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }
.meter-track {
    position: relative; width: 26px; height: 150px; border-radius: 14px; background: rgba(8, 12, 40, 0.75); border: 2.5px solid rgba(255, 255, 255, 0.85);
    overflow: hidden; display: flex; align-items: flex-end;
}
.meter-track i { display: block; width: 100%; height: 0; background: linear-gradient(0deg, #ff3b1a, #ff9a1f, #ffe45c); transition: height 0.3s ease-out; }
.meter.fire .meter-track { box-shadow: 0 0 16px 2px rgba(255, 110, 0, 0.9); }

/* Puan yazıları */
#hud-popups { position: absolute; inset: 0; overflow: hidden; }
.popup { position: absolute; transform: translate(-50%, 0); text-align: center; animation: popUp 1.1s ease-out forwards; }
.popup b { display: block; font-size: 34px; font-weight: 900; color: #5be0ff; text-shadow: 0 3px 0 #0a3a9a, 0 0 12px rgba(80, 200, 255, 0.8); font-style: italic; }
.popup span { display: block; font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #0a3a9a; font-style: italic; transform: rotate(-4deg); }
.popup.swish b { color: #ffe45c; text-shadow: 0 3px 0 #a35a00, 0 0 14px rgba(255, 200, 0, 0.9); }
.popup.time b { font-size: 22px; color: #7dffb0; text-shadow: 0 2px 0 #0a6a3a; }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, 16px) scale(0.5); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -64px) scale(1); } }
.banner {
    position: absolute; left: 50%; top: 24%; transform: translateX(-50%); white-space: nowrap; font-size: 30px; font-weight: 900; font-style: italic;
    color: #ffe45c; text-shadow: 0 4px 0 #a33000, 0 0 18px #ff7a00; animation: bannerIn 1.2s ease-out forwards;
}
@keyframes bannerIn { 0% { opacity: 0; transform: translateX(-50%) scale(0.4); } 20% { opacity: 1; transform: translateX(-50%) scale(1.2); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-20px); } }

/* Öğretici */
.tutorial { position: absolute; left: 50%; bottom: 36%; transform: translateX(-50%); text-align: center; width: 78%; padding: 12px 14px; border-radius: 18px; background: rgba(6, 10, 36, 0.78); border: 2px solid rgba(255, 255, 255, 0.3); }
.tutorial p { margin: 4px 0 0; font-weight: 700; line-height: 1.4; }
.tutorial small { color: #aeb9ee; }
.tutorial .hand { font-size: 36px; animation: pullDown 1.4s ease-in-out infinite; }
@keyframes pullDown { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(14px); } }