/* Extra lives / heart counter and current fixed HUD layout. */
body { transform: scale(1); transform-origin: top left; }
#gameCanvas { width: 100%; height: 100%; position: relative; z-index: 1; }
audio, embed { position: absolute; z-index: -9999; }
.background-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-position: center center; background-repeat: no-repeat; background-size: cover; will-change: opacity; opacity: 0; transition: opacity 500ms ease; }
.background-layer.is-visible { opacity: 1; }
#gameHud,#gameControls { box-sizing: border-box; }
#gameHud { position: fixed; top: max(10px,env(safe-area-inset-top)); left: 0; width: 100%; display: grid; grid-template-columns: minmax(120px,auto) minmax(140px,auto); grid-template-areas: "score time"; align-items: start; justify-content: center; gap: 10px; z-index: 20; pointer-events: none; }
#scoreLabel,#timeLabel { position: static; display: none; box-sizing: border-box; min-width: 0; width: auto; margin: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(20,23,28,.52); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color:#fff; font:500 1rem/1.15 Gotham,Open Sans,Helvetica Neue,arial,sans-serif; text-shadow:2px 2px 4px rgba(0,0,0,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:auto; font-variant-numeric:tabular-nums; }
#scoreLabel { grid-area: score; justify-self: stretch; text-align:center; }
#timeLabel { grid-area: time; justify-self: stretch; text-align:center; }
#gameControls { position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); width:max-content; max-width:calc(100vw - 20px); transform:translateX(-50%); display:flex; gap:12px; align-items:center; justify-content:center; z-index:25; pointer-events:auto; }
.game-control-button { appearance:none; -webkit-appearance:none; box-sizing:border-box; flex:0 0 50px !important; width:50px !important; height:50px !important; min-width:50px !important; min-height:50px !important; max-width:50px !important; max-height:50px !important; aspect-ratio:1/1 !important; padding:0 !important; margin:0; border:1px solid rgba(255,255,255,.85); border-radius:50% !important; color:#fff; background:rgba(20,23,28,.56); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(0,0,0,.25); cursor:pointer; -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.game-control-button svg { width:23px; height:23px; flex:0 0 23px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.game-control-button:hover,.game-control-button:focus-visible { background:rgba(20,23,28,.78); box-shadow:0 0 2px #fff,0 0 8px rgba(67,172,201,.7); outline:none; }
.game-control-button:active { transform:translateY(1px); }
.game-control-button.music-active { border-color:rgba(130,255,165,.95); box-shadow:0 0 7px rgba(65,220,105,.48),0 0 18px rgba(65,220,105,.2); }
.game-control-button.music-inactive { border-color:rgba(255,145,145,.95); box-shadow:0 0 7px rgba(240,70,70,.45),0 0 18px rgba(240,70,70,.18); }
.game-control-button.pause-active { border-color:rgba(255,255,255,.95); }
.game-control-button.pause-inactive { border-color:rgba(255,210,110,.95); box-shadow:0 0 7px rgba(255,190,70,.42),0 0 18px rgba(255,160,40,.16); }
#gameStartScreen,#gameOverScreen,#countDownPopup { z-index:10; }
#heartCounter { position:fixed; left:max(12px,env(safe-area-inset-left)); bottom:max(14px,env(safe-area-inset-bottom)); z-index:26; display:none; align-items:center; gap:7px; width:max-content; min-width:0; max-width:calc(100vw - 24px); box-sizing:border-box; padding:6px 10px 6px 7px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:rgba(20,23,28,.58); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font:600 .95rem/1 Gotham,Open Sans,Helvetica Neue,arial,sans-serif; text-shadow:2px 2px 4px rgba(0,0,0,.8); pointer-events:none; user-select:none; box-shadow:0 4px 18px rgba(0,0,0,.2); white-space:nowrap; }
#heartCounter .heart-counter-icon { color:#ff4b61; font-size:1.15rem; line-height:1; text-shadow:0 0 7px rgba(255,64,91,.65); }
#heartCounter.heart-counter-empty { opacity:.72; }
#heartRecoveryOverlay { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; pointer-events:none; color:#fff; text-align:center; font-family:Gotham,Open Sans,Helvetica Neue,arial,sans-serif; }
#heartRecoveryOverlay .heart-recovery-card { min-width:min(260px,72vw); box-sizing:border-box; padding:20px 28px 22px; border:1px solid rgba(255,255,255,.35); border-radius:16px; background:rgba(20,23,28,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 18px 60px rgba(0,0,0,.38),0 0 24px rgba(83,223,255,.18); }
#heartRecoveryOverlay .heart-recovery-title { margin:0 0 7px; font-size:1.05rem; font-weight:500; }
#heartRecoveryOverlay .heart-recovery-count { margin:0; font-size:3.5rem; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; text-shadow:0 0 18px rgba(83,223,255,.75); }
#heartRecoveryOverlay .heart-recovery-subtitle { margin:8px 0 0; font-size:.85rem; opacity:.78; }
@media (max-width:700px) { #gameHud{top:max(7px,env(safe-area-inset-top));left:8px;right:8px;width:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;} #scoreLabel,#timeLabel{width:100%;padding:6px 9px;font-size:.82rem;border-radius:9px;} #gameControls{bottom:max(10px,env(safe-area-inset-bottom));} .game-control-button{flex-basis:46px !important;width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;max-width:46px !important;max-height:46px !important;} .game-control-button svg{width:21px;height:21px;flex-basis:21px;} #heartCounter{left:max(8px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));padding:5px 8px 5px 6px;font-size:.82rem;border-radius:10px;} #heartCounter .heart-counter-icon{font-size:1rem;} #heartRecoveryOverlay .heart-recovery-card{padding:17px 22px 19px;} #heartRecoveryOverlay .heart-recovery-count{font-size:3rem;} }
@media (max-width:380px) { #gameHud{left:6px;right:6px;} #scoreLabel,#timeLabel{padding:5px 7px;font-size:.76rem;} #gameControls{bottom:max(8px,env(safe-area-inset-bottom));} .game-control-button{flex-basis:44px !important;width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;max-width:44px !important;max-height:44px !important;} #heartCounter{left:max(6px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));padding:4px 7px 4px 5px;font-size:.76rem;} }