/* ═══════════════════════════════════════════════════════ 🎈 SOUND CATCHER — 10 THEMES + DAY/NIGHT ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Bubblegum+Sans&display=swap'); *{margin:0;padding:0;box-sizing:border-box;} html,body{width:100%;height:100%;overflow:hidden;touch-action:none; -webkit-user-select:none;user-select:none;font-family:'Fredoka','Bubblegum Sans',sans-serif;} /* ═══════ GAME WORLD ═══════ */ #game-world{position:fixed;inset:0;overflow:hidden;transition:background 5s ease;} #sky-next{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 4s ease;pointer-events:none;} #ground-layer{position:absolute;bottom:0;left:0;right:0;height:8vh;min-height:40px;z-index:3;transition:background 4s ease;} #theme-decor{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;} #celestial{position:absolute;top:-15px;right:35px;width:80px;height:80px;border-radius:50%;z-index:1;transition:all 2s;} .cel-sun{background:radial-gradient(circle,#FFF176 30%,#FFEE58 50%,rgba(255,238,88,0) 70%);animation:sunP 4s ease-in-out infinite;} .cel-moon{background:radial-gradient(circle at 35% 40%,#FFF9C4 0%,#FFF176 40%,rgba(255,241,118,0) 70%);width:60px;height:60px;} @keyframes sunP{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.1);opacity:1;}} .star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;opacity:0;transition:opacity 4s ease;} #stars-container{position:absolute;inset:0;z-index:1;} /* ═══════ CLOUDS — PARALLAX (3 layers, different speeds) ═══════ */ .cloud{position:absolute;background:#fff;border-radius:50px;z-index:2;} .cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%;} .cl-1{width:130px;height:40px;top:6%;animation:cd 22s linear infinite;opacity:.85;} .cl-1::before{width:55px;height:55px;top:-28px;left:18px;}.cl-1::after{width:70px;height:62px;top:-32px;left:50px;} .cl-2{width:100px;height:32px;top:13%;animation:cd 32s linear infinite;animation-delay:-10s;opacity:.65;} .cl-2::before{width:42px;height:42px;top:-20px;left:14px;}.cl-2::after{width:55px;height:48px;top:-24px;left:40px;} .cl-3{width:160px;height:48px;top:3%;animation:cd 42s linear infinite;animation-delay:-20s;opacity:.5;} .cl-3::before{width:65px;height:60px;top:-30px;left:22px;}.cl-3::after{width:85px;height:70px;top:-36px;left:60px;} .cl-4{width:90px;height:28px;top:20%;animation:cd 28s linear infinite;animation-delay:-5s;opacity:.72;} .cl-4::before{width:38px;height:38px;top:-18px;left:10px;}.cl-4::after{width:48px;height:42px;top:-20px;left:36px;} .cl-5{width:140px;height:42px;top:9%;animation:cd 36s linear infinite;animation-delay:-16s;opacity:.58;} .cl-5::before{width:58px;height:52px;top:-26px;left:20px;}.cl-5::after{width:72px;height:58px;top:-30px;left:55px;} @keyframes cd{0%{left:-200px;}100%{left:calc(100vw + 50px);}} /* ═══════════════════════════════════════════════════════ 🌍 10 THEMES — Each with 5 sky phases ═══════════════════════════════════════════════════════ */ /* T0: JUNGLE */ .th-jungle.ph-0{background:linear-gradient(180deg,#FFE082 0%,#FFCC80 25%,#81C784 55%,#4CAF50 80%,#2E7D32 100%);} .th-jungle.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#81D4FA 30%,#A5D6A7 60%,#4CAF50 82%,#2E7D32 100%);} .th-jungle.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#AED581 35%,#66BB6A 65%,#388E3C 85%,#1B5E20 100%);} .th-jungle.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#7E57C2 30%,#4CAF50 60%,#2E7D32 85%,#1B5E20 100%);} .th-jungle.ph-4{background:linear-gradient(180deg,#1A237E 0%,#283593 35%,#1B5E20 70%,#0D3310 100%);} .th-jungle #ground-layer{background:linear-gradient(0deg,#1B5E20,#2E7D32);} /* T1: SKY */ .th-sky.ph-0{background:linear-gradient(180deg,#FFE082 0%,#FFF176 25%,#87CEEB 60%,#B3E5FC 100%);} .th-sky.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#4FC3F7 30%,#81D4FA 60%,#E1F5FE 100%);} .th-sky.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#87CEEB 40%,#FFE0B2 75%,#FFCC80 100%);} .th-sky.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#EF5350 35%,#FF8A65 60%,#FFE082 100%);} .th-sky.ph-4{background:linear-gradient(180deg,#0D1B2A 0%,#1B2838 35%,#1A237E 65%,#283593 100%);} .th-sky #ground-layer{background:linear-gradient(0deg,#90CAF9,#BBDEFB);} /* T2: OCEAN */ .th-ocean.ph-0{background:linear-gradient(180deg,#FFE082 0%,#87CEEB 35%,#4FC3F7 55%,#0288D1 80%,#01579B 100%);} .th-ocean.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#039BE5 30%,#0277BD 60%,#01579B 100%);} .th-ocean.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#FF8A65 30%,#0288D1 60%,#01579B 100%);} .th-ocean.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#EF5350 25%,#0277BD 55%,#01579B 100%);} .th-ocean.ph-4{background:linear-gradient(180deg,#0D1B2A 0%,#1A237E 40%,#01579B 70%,#002244 100%);} .th-ocean #ground-layer{background:linear-gradient(0deg,#01579B,#0277BD);} /* T3: CITY */ .th-city.ph-0{background:linear-gradient(180deg,#FFE082 0%,#FFCC80 25%,#90A4AE 55%,#607D8B 80%,#455A64 100%);} .th-city.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#4FC3F7 30%,#78909C 60%,#546E7A 100%);} .th-city.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#FFE0B2 35%,#78909C 65%,#455A64 100%);} .th-city.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#EF5350 30%,#546E7A 60%,#37474F 100%);} .th-city.ph-4{background:linear-gradient(180deg,#0D1B2A 0%,#1A237E 30%,#263238 60%,#1C1C1C 100%);} .th-city #ground-layer{background:linear-gradient(0deg,#37474F,#455A64);} /* T4: DESERT */ .th-desert.ph-0{background:linear-gradient(180deg,#FFF176 0%,#FFE082 25%,#FFCC80 50%,#F9A825 80%,#E65100 100%);} .th-desert.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#81D4FA 25%,#FFE082 55%,#F9A825 80%,#E65100 100%);} .th-desert.ph-2{background:linear-gradient(180deg,#FF8A65 0%,#FFAB91 30%,#FFE082 55%,#F9A825 80%,#BF360C 100%);} .th-desert.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#EF5350 30%,#F9A825 60%,#BF360C 100%);} .th-desert.ph-4{background:linear-gradient(180deg,#1A237E 0%,#283593 35%,#4E342E 65%,#3E2723 100%);} .th-desert #ground-layer{background:linear-gradient(0deg,#E65100,#F9A825);} /* T5: SNOW */ .th-snow.ph-0{background:linear-gradient(180deg,#FFF176 0%,#E1F5FE 30%,#B3E5FC 55%,#E8EAF6 80%,#CFD8DC 100%);} .th-snow.ph-1{background:linear-gradient(180deg,#81D4FA 0%,#B3E5FC 30%,#E8EAF6 60%,#CFD8DC 100%);} .th-snow.ph-2{background:linear-gradient(180deg,#90CAF9 0%,#FFCC80 30%,#E8EAF6 60%,#CFD8DC 100%);} .th-snow.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#7E57C2 30%,#B0BEC5 60%,#90A4AE 100%);} .th-snow.ph-4{background:linear-gradient(180deg,#1A237E 0%,#283593 35%,#455A64 65%,#37474F 100%);} .th-snow #ground-layer{background:linear-gradient(0deg,#CFD8DC,#ECEFF1);} /* T6: VILLAGE */ .th-village.ph-0{background:linear-gradient(180deg,#FFE082 0%,#FFCC80 25%,#AED581 55%,#8BC34A 80%,#689F38 100%);} .th-village.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#81D4FA 30%,#AED581 60%,#689F38 100%);} .th-village.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#FFE0B2 35%,#AED581 65%,#689F38 100%);} .th-village.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#FF8A65 30%,#689F38 60%,#33691E 100%);} .th-village.ph-4{background:linear-gradient(180deg,#1A237E 0%,#283593 40%,#33691E 70%,#1B3A00 100%);} .th-village #ground-layer{background:linear-gradient(0deg,#558B2F,#689F38);} /* T7: FARM */ .th-farm.ph-0{background:linear-gradient(180deg,#FFE082 0%,#FFF176 25%,#C5E1A5 55%,#9CCC65 80%,#7CB342 100%);} .th-farm.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#81D4FA 30%,#C5E1A5 60%,#7CB342 100%);} .th-farm.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#FFE082 35%,#C5E1A5 65%,#7CB342 100%);} .th-farm.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#FF8A65 30%,#7CB342 60%,#558B2F 100%);} .th-farm.ph-4{background:linear-gradient(180deg,#1A237E 0%,#283593 40%,#33691E 70%,#1B3A00 100%);} .th-farm #ground-layer{background:linear-gradient(0deg,#689F38,#8BC34A);} /* T8: ANIMALS (Savanna) */ .th-animals.ph-0{background:linear-gradient(180deg,#FFE082 0%,#FFCC80 25%,#FFE0B2 50%,#D7CCC8 80%,#A1887F 100%);} .th-animals.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#81D4FA 30%,#FFE0B2 55%,#BCAAA4 80%,#8D6E63 100%);} .th-animals.ph-2{background:linear-gradient(180deg,#FF8A65 0%,#FFAB91 30%,#FFE0B2 55%,#BCAAA4 80%,#795548 100%);} .th-animals.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#EF5350 30%,#A1887F 60%,#5D4037 100%);} .th-animals.ph-4{background:linear-gradient(180deg,#1A237E 0%,#283593 35%,#3E2723 65%,#1C1008 100%);} .th-animals #ground-layer{background:linear-gradient(0deg,#795548,#A1887F);} /* T9: BIRDS */ .th-birds.ph-0{background:linear-gradient(180deg,#FFF176 0%,#FFE082 20%,#81D4FA 50%,#4FC3F7 80%,#B3E5FC 100%);} .th-birds.ph-1{background:linear-gradient(180deg,#29B6F6 0%,#03A9F4 30%,#4FC3F7 60%,#B3E5FC 100%);} .th-birds.ph-2{background:linear-gradient(180deg,#4FC3F7 0%,#FFAB91 35%,#81D4FA 65%,#B3E5FC 100%);} .th-birds.ph-3{background:linear-gradient(180deg,#5C6BC0 0%,#EF5350 30%,#4FC3F7 60%,#B3E5FC 100%);} .th-birds.ph-4{background:linear-gradient(180deg,#0D1B2A 0%,#1A237E 40%,#283593 70%,#1A237E 100%);} .th-birds #ground-layer{background:linear-gradient(0deg,#80CBC4,#B2DFDB);} /* Night mode stars visible */ .ph-3 .star,.ph-4 .star{opacity:.7;} .ph-4 .cloud,.ph-3 .cloud{opacity:.2;} /* Theme emoji decorations */ .decor-item{position:absolute;font-size:clamp(1.5rem,4vw,2.5rem);z-index:2;pointer-events:none;opacity:.7;animation:decFloat 6s ease-in-out infinite;} @keyframes decFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} /* ═══════════════════════════════════════════════════════ 🎈 BALLOON + DANGLING LABEL ═══════════════════════════════════════════════════════ */ .balloon-wrap{position:absolute;cursor:pointer;z-index:10;will-change:transform; -webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;} .balloon-wrap:active .balloon-body{transform:scale(.88);} .balloon-body{ width:clamp(48px,16vw,74px);height:clamp(60px,20vw,90px); border-radius:50% 50% 50% 50%/40% 40% 60% 60%;position:relative; box-shadow:inset -8px -6px 14px rgba(0,0,0,.12),inset 10px 10px 14px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.18); transition:filter .3s,transform .15s;flex-shrink:0; } .balloon-body::before{content:'';position:absolute;top:10%;left:15%;width:30%;height:35%; background:radial-gradient(ellipse,rgba(255,255,255,.92) 0%,rgba(255,255,255,.3) 50%,transparent 70%); border-radius:50%;transform:rotate(-20deg);pointer-events:none;z-index:5;} .balloon-body::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%); width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--knot);} .balloon-string{width:2px;height:clamp(16px,3.5vw,28px); background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05));flex-shrink:0; animation:strSway 2.5s ease-in-out infinite;transform-origin:top center;} @keyframes strSway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}} .balloon-label{background:none!important;border:none!important;padding:0;text-align:center; pointer-events:none;animation:dangle 2s ease-in-out infinite;transform-origin:top center;} @keyframes dangle{0%{transform:rotate(-8deg) translateX(-3px);}25%{transform:rotate(5deg) translateX(2px);}50%{transform:rotate(7deg) translateX(4px);}75%{transform:rotate(-4deg) translateX(-2px);}100%{transform:rotate(-8deg) translateX(-3px);}} /* HUGE: emoji=14vw(88% of balloon), text=7vw(44%) */ .label-text{font-family:'Fredoka',sans-serif;font-weight:700; font-size:clamp(1.2rem,7vw,2rem);line-height:1.1;word-break:break-word; color:var(--lc,#FF1744); -webkit-text-stroke:0.5px rgba(255,255,255,0.2);paint-order:stroke fill; text-shadow:0 -1px 0 var(--bh,rgba(255,255,255,0.7)),0 2px 0 var(--bl,rgba(0,0,0,0.12)),0 4px 4px var(--bl,rgba(0,0,0,0.08)); transition:color .8s,text-shadow .8s,-webkit-text-stroke .8s;} .label-emoji{font-size:clamp(2.4rem,14vw,4rem);line-height:1;display:block; filter:drop-shadow(0 -1px 0 rgba(255,255,255,0.4)) drop-shadow(0 3px 0 rgba(0,0,0,0.1)) drop-shadow(0 5px 6px rgba(0,0,0,0.06)) drop-shadow(0 0 3px rgba(0,0,0,0.15)); transition:filter .8s;} /* Custom/images.js inside label */ .balloon-label img.label-emoji{ width:clamp(2.4rem,14vw,4rem);height:auto;max-height:clamp(2.8rem,16vw,4.5rem); object-fit:contain;border-radius:6px; filter:drop-shadow(0 -1px 0 rgba(255,255,255,0.4)) drop-shadow(0 3px 0 rgba(0,0,0,0.1)) drop-shadow(0 5px 6px rgba(0,0,0,0.06)) drop-shadow(0 0 4px rgba(0,0,0,0.2)); } /* ═══ ADAPTIVE CONTRAST — Night Neon / Day Dark ═══ */ /* Night (ph-3,ph-4): Neon glow — pops against dark sky */ [data-phase="3"] .label-text,[data-phase="4"] .label-text{ color:#FFF!important; -webkit-text-stroke:0.8px rgba(255,255,0,0.3); text-shadow:0 0 8px rgba(255,255,100,0.8),0 0 18px rgba(255,200,0,0.4),0 2px 0 rgba(0,0,0,0.3)!important;} [data-phase="3"] .label-emoji,[data-phase="4"] .label-emoji{ filter:drop-shadow(0 0 10px rgba(255,255,200,0.7)) drop-shadow(0 0 20px rgba(255,200,0,0.3)) drop-shadow(0 3px 0 rgba(0,0,0,0.15))!important;} [data-phase="3"] .balloon-body,[data-phase="4"] .balloon-body{ box-shadow:inset -8px -6px 14px rgba(0,0,0,.1),inset 10px 10px 14px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.2),0 0 14px 4px rgba(255,255,200,0.35)!important;} /* Day (ph-0,ph-1): Dark outline for bright backgrounds */ [data-phase="0"] .label-text,[data-phase="1"] .label-text{ -webkit-text-stroke:0.6px rgba(0,0,0,0.15);} /* 5 COLORS */ .bc0 .balloon-body{background:radial-gradient(circle at 35% 30%,#FF8A80,#FF1744 45%,#D50000);--knot:#D50000;} .bc0 .label-text{--lc:#FF1744;--bh:rgba(255,200,200,0.8);--bl:rgba(180,0,0,0.15);} .bc1 .balloon-body{background:radial-gradient(circle at 35% 30%,#CCFF90,#76FF03 45%,#64DD17);--knot:#64DD17;} .bc1 .label-text{--lc:#2E7D32;--bh:rgba(200,255,200,0.8);--bl:rgba(0,100,0,0.12);} .bc2 .balloon-body{background:radial-gradient(circle at 35% 30%,#B3E5FC,#29B6F6 45%,#0288D1);--knot:#0288D1;} .bc2 .label-text{--lc:#0277BD;--bh:rgba(200,230,255,0.8);--bl:rgba(0,50,120,0.12);} .bc3 .balloon-body{background:radial-gradient(circle at 35% 30%,#E1BEE7,#E040FB 45%,#AA00FF);--knot:#AA00FF;} .bc3 .label-text{--lc:#9C27B0;--bh:rgba(230,200,240,0.8);--bl:rgba(80,0,120,0.12);} .bc4 .balloon-body{background:radial-gradient(circle at 35% 30%,#FF80AB,#FF4081 45%,#F50057);--knot:#F50057;} .bc4 .label-text{--lc:#E91E63;--bh:rgba(255,200,220,0.8);--bl:rgba(150,0,50,0.12);} /* Bonus glow */ .bonus-mode .balloon-body{box-shadow:inset -8px -6px 14px rgba(0,0,0,.1),inset 10px 10px 14px rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.12),0 0 18px 5px rgba(255,215,0,.5),0 0 38px 10px rgba(255,171,0,.2);animation:bglow .8s ease-in-out infinite alternate;} @keyframes bglow{0%{box-shadow:inset -8px -6px 14px rgba(0,0,0,.1),inset 10px 10px 14px rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.12),0 0 12px 3px rgba(255,215,0,.3);}100%{box-shadow:inset -8px -6px 14px rgba(0,0,0,.1),inset 10px 10px 14px rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.12),0 0 26px 7px rgba(255,215,0,.6),0 0 48px 12px rgba(255,171,0,.2);}} .bonus-badge{position:absolute;top:-8px;right:-8px;background:#E53935;color:#fff;font-size:.6rem;font-weight:700;padding:2px 5px;border-radius:7px;z-index:20;pointer-events:none;animation:bbounce .8s ease-in-out infinite alternate;} @keyframes bbounce{0%{transform:scale(1) rotate(-5deg);}100%{transform:scale(1.1) rotate(5deg);}} #bonus-banner{position:fixed;top:clamp(6px,1.5vh,12px);right:clamp(8px,2vw,16px);background:linear-gradient(135deg,#FFD54F,#FF8F00);color:#fff;font-family:'Bubblegum Sans',cursive;font-size:clamp(.65rem,.8rem,.9rem);font-weight:700;padding:3px 12px;border-radius:11px;z-index:101;display:none;animation:bonusPulse 1s ease infinite;box-shadow:0 3px 12px rgba(255,143,0,.5);} @keyframes bonusPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}} /* States */ @keyframes wshake{0%,100%{transform:rotate(0) scale(1);}15%{transform:rotate(10deg) scale(1.04);}30%{transform:rotate(-8deg) scale(.96);}60%{transform:rotate(-4deg) scale(.98);}} .balloon-wrong{animation:wshake .6s ease-in-out!important;} .balloon-wrong .balloon-body{filter:grayscale(.5) brightness(.6)!important;} .balloon-wrong .label-text,.balloon-wrong .label-emoji{opacity:.3!important;} @keyframes bpop{0%{transform:scale(1);opacity:1;}30%{transform:scale(1.5);opacity:.7;}100%{transform:scale(0);opacity:0;}} .balloon-popping{animation:bpop .3s ease-out forwards!important;pointer-events:none!important;} .confetti-container{position:absolute;pointer-events:none;z-index:50;} .confetti-piece{position:absolute;width:8px;height:8px;animation:cfall 1.2s ease-out forwards;} @keyframes cfall{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1;}100%{transform:translate(var(--cx),var(--cy)) rotate(720deg) scale(.2);opacity:0;}} /* ═══ HUD ═══ */ #hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;gap:4px;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent);z-index:100;} .hud-box{ background:rgba(255,255,255,.28); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1.5px solid rgba(255,255,255,.55); border-radius:20px;padding:3px 10px; display:flex;align-items:center;gap:3px; font-weight:800;color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.15); font-size:clamp(.58rem,.68rem,.78rem);white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6); transition:transform .2s; } .hud-icon{font-size:clamp(.65rem,.8rem,.9rem);} .hud-score{min-width:18px;text-align:center;} #lives-display .heart{display:inline-block;font-size:clamp(.68rem,.8rem,.9rem);transition:all .3s;} #lives-display .heart.lost{opacity:.22;transform:scale(.65);filter:grayscale(1);} @keyframes hbreak{0%{transform:scale(1);}50%{transform:scale(1.5);}100%{transform:scale(.65);}} .heart-breaking{animation:hbreak .4s ease-out!important;} #combo-display{display:none;background:linear-gradient(135deg,#FFE082,#FF8F00);border:1.5px solid rgba(255,200,0,.5);font-weight:900;box-shadow:0 4px 16px rgba(255,143,0,.35);} #combo-display.active{display:flex;} .hud-btn{ background:rgba(255,255,255,.28); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.55); border-radius:50%;width:28px;height:28px; display:flex;align-items:center;justify-content:center; font-size:clamp(.65rem,.75rem,.85rem);cursor:pointer;color:#fff;flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6); transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s; } .hud-btn:active{transform:scale(.88);} /* ═══ SKIP BUTTON — Pulled OUT of HUD, fixed bottom-left glassmorphism ═══ */ #btn-skip{ /* Override ALL hud-btn styles */ position:fixed !important; bottom:max(25px, env(safe-area-inset-bottom)) !important; left:20px !important; z-index:99999 !important; background:rgba(255,255,255,0.35) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; border:2px solid rgba(255,255,255,0.6) !important; border-radius:30px !important; padding:10px 22px !important; font-size:1rem !important; font-weight:700 !important; color:#1565C0 !important; box-shadow:0 4px 15px rgba(0,0,0,0.15) !important; display:flex !important; align-items:center !important; gap:8px !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important; /* Reset hud-btn sizing */ width:auto !important; height:auto !important; transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s !important; } #btn-skip:active{ transform:scale(.94) translateY(2px) !important; box-shadow:0 2px 8px rgba(0,0,0,0.12) !important; } /* HUD — left-cluster for score/hearts/combo/level, sound-toggle pushed far-right */ #hud{justify-content:flex-start !important;} #btn-sound-toggle{margin-left:auto !important;} #theme-label{position:fixed;top:clamp(28px,5vh,38px);left:50%;transform:translateX(-50%);background:rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:clamp(.5rem,.55rem,.62rem);font-weight:700;padding:2px 12px;border-radius:20px;z-index:100;box-shadow:0 3px 12px rgba(0,0,0,.08);} #challenge-badge{position:fixed;top:clamp(42px,7vh,52px);left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.15));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:clamp(.48rem,.54rem,.62rem);font-weight:800;padding:3px 14px;border-radius:20px;z-index:161;display:none;box-shadow:0 4px 16px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.5);} /* ★ PROMPT BANNER — Top-Center, clears HUD ★ */ #prompt-banner{ position:fixed; top:max(44px, env(safe-area-inset-top, 0px) + 44px) !important; left:50%;transform:translateX(-50%); background:rgba(255,255,255,.92); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:2.5px solid rgba(255,255,255,.9); border-radius:28px; padding:10px 18px 12px!important; box-shadow: 0 8px 32px rgba(99,179,237,.18), 0 2px 8px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,1); z-index:160;text-align:center;display:none; animation:bIn .5s cubic-bezier(.34,1.56,.64,1); max-width:min(88vw,380px);min-height:80px!important; display:flex!important;flex-direction:column!important;justify-content:center!important; margin-top:0!important; } /* ★ BALLOON AREA — bottom padding so balloons never overlap skip button ★ */ #balloon-area{ padding-bottom:max(90px, env(safe-area-inset-bottom) + 90px) !important; box-sizing:border-box !important; } @keyframes bIn{0%{transform:translateX(-50%) scale(0);}100%{transform:translateX(-50%) scale(1);}} #prompt-text{ font-family:'Bubblegum Sans',cursive; font-size:clamp(.72rem,.88rem,1rem); color:#5a6a8a;padding-top:4px;margin-bottom:5px!important;line-height:1.3!important; } #prompt-word{ font-family:'Bubblegum Sans',cursive; font-size:clamp(1.1rem,1.4rem,1.6rem);font-weight:700; color:#e53935;display:block!important;margin-top:5px!important; } #btn-hear-again{ display:inline-flex;align-items:center;gap:4px;margin-top:6px; background:linear-gradient(135deg,#63B3ED,#4299E1); color:#fff;border:none;border-radius:20px; padding:5px 14px;font-size:clamp(.56rem,.64rem,.74rem);font-weight:700;cursor:pointer; box-shadow:0 4px 14px rgba(66,153,225,.35),0 2px 0 rgba(49,130,206,.6); transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s; } #btn-hear-again:active{ transform:scale(.93) translateY(1px); box-shadow:0 2px 8px rgba(66,153,225,.25),0 1px 0 rgba(49,130,206,.5); } .overlay-screen{ position:fixed;inset:0; background:rgba(15,20,40,.5); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); display:flex;align-items:center;justify-content:center;z-index:200;padding:12px; } .overlay-screen.hidden{display:none;} .screen-card{ background:rgba(255,255,255,.97); border-radius:32px; padding:clamp(14px,2.5vh,24px) clamp(14px,4vw,26px); text-align:center; box-shadow: 0 24px 64px rgba(99,140,220,.2), 0 8px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,1); max-width:min(320px,88vw);width:100%;max-height:80vh;overflow-y:auto; animation:cIn .5s cubic-bezier(.34,1.56,.64,1); border:1.5px solid rgba(255,255,255,.9); } @keyframes cIn{0%{transform:scale(.5);opacity:0;}100%{transform:scale(1);opacity:1;}} .screen-card .emoji-big{font-size:clamp(2rem,6vw,2.8rem);margin-bottom:4px;} .screen-card h1{font-family:'Bubblegum Sans',cursive;font-size:clamp(.95rem,3vw,1.3rem);color:#2d3748;margin-bottom:4px;} .screen-card p{font-size:clamp(.65rem,2vw,.8rem);color:#718096;margin-bottom:8px;} .final-score{font-family:'Bubblegum Sans',cursive;font-size:clamp(1.5rem,6vw,2.4rem);color:#F6AD55;text-shadow:2px 2px 0 #ED8936;} /* ★ BOUNCY BUTTON SYSTEM ★ */ .btn-play{ display:inline-flex;align-items:center;gap:6px; background:linear-gradient(160deg,#68D391,#38A169); color:#fff;border:none; border-radius:28px; padding:clamp(8px,1.6vh,12px) clamp(14px,3.5vw,24px); font-family:'Bubblegum Sans',cursive; font-size:clamp(.82rem,2.5vw,.98rem); cursor:pointer; box-shadow:0 6px 0 #276749,0 8px 24px rgba(56,161,105,.35); transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s; position:relative;top:0; margin:4px; } .btn-play:active{ transform:scale(.95) translateY(3px); box-shadow:0 2px 0 #276749,0 4px 12px rgba(56,161,105,.25); top:3px; } .btn-play:hover{transform:scale(1.04);} #feedback-toast{ position:fixed;top:62%;left:50%;transform:translate(-50%,-50%) scale(0); font-family:'Bubblegum Sans',cursive;font-size:clamp(1.1rem,4vw,1.7rem); color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.15);z-index:150; pointer-events:none;white-space:nowrap;opacity:0; background:rgba(255,255,255,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1.5px solid rgba(255,255,255,.5); border-radius:30px;padding:8px 24px; } #feedback-toast.show{transform:translate(-50%,-50%) scale(1);opacity:1;transition:all .3s cubic-bezier(.34,1.56,.64,1);} #feedback-toast.hide{transform:translate(-50%,-50%) scale(1.3);opacity:0;transition:all .4s ease-out;} .score-fly{position:fixed;font-family:'Bubblegum Sans',cursive;font-size:1.3rem;font-weight:700;color:#F6AD55;z-index:160;pointer-events:none;animation:sfly 1s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.15);} @keyframes sfly{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-60px) scale(1.3);}} #wrong-hint{ position:fixed;bottom:clamp(28px,5vh,42px);left:50%;transform:translateX(-50%); background:rgba(255,255,255,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1.5px solid rgba(255,255,255,.4); color:#fff;font-size:clamp(.56rem,.62rem,.72rem); padding:6px 16px;border-radius:20px;z-index:140;display:none; max-width:84vw;text-align:center; box-shadow:0 4px 16px rgba(0,0,0,.1); } #level-bar{position:fixed;bottom:0;left:0;right:0;height:5px;background:rgba(255,255,255,.15);z-index:100;} #level-fill{height:100%;background:linear-gradient(90deg,#F6E05E,#FC8181,#F687B3);border-radius:0 4px 4px 0;transition:width .6s cubic-bezier(.34,1.56,.64,1);width:0%;box-shadow:0 0 12px rgba(246,173,85,.5);} @media(max-width:360px){.balloon-body{width:44px;height:56px;}.label-emoji{font-size:2.2rem;}.label-text{font-size:1.1rem;}} @media(min-width:600px){.label-text{font-size:2rem;}.label-emoji{font-size:4rem;}} /* ═══════════════════════════════════════════════════════ 🌤️ SKY SAGA MAP DASHBOARD — Balloon / Cloud Theme ═══════════════════════════════════════════════════════ */ /* ── Overlay backdrop ── */ #dash-ov{z-index:200;background:#0B1A3D;} #dash-wrap{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;} /* ── Header ── */ #dash-header{ text-align:center; padding:clamp(8px,2vh,14px) 12px clamp(4px,1vh,7px); flex-shrink:0;z-index:5; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 100%); } #dash-emoji{ font-size:clamp(1.8rem,5.5vw,2.8rem);line-height:1;margin-bottom:2px; filter:drop-shadow(0 4px 12px rgba(255,255,255,.3)); animation:dashFloat 3s ease-in-out infinite; } @keyframes dashFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} #dash-title{ font-family:'Bubblegum Sans',cursive;font-size:clamp(1.1rem,3.8vw,1.8rem); color:#fff;text-shadow:0 2px 10px rgba(100,180,255,.6);margin-bottom:1px; } #dash-sub{font-size:clamp(.48rem,1.3vw,.65rem);color:rgba(255,255,255,.6);letter-spacing:1.5px;margin-bottom:clamp(3px,.8vh,6px);} #dash-prog-wrap{max-width:260px;margin:0 auto;} #dp-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-bottom:3px;} #dp-fill{height:100%;background:linear-gradient(90deg,#29B6F6,#80DEEA,#FFD54F);border-radius:3px;transition:width .8s ease;width:0;} #dp-text{font-size:clamp(.4rem,1.1vw,.52rem);color:rgba(255,255,255,.55);font-weight:600;} /* ── Scroll container ── */ #path-scroll{ flex:1;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:0;cursor:grab; } #path-scroll:active{cursor:grabbing;} #path-scroll::-webkit-scrollbar{width:3px;} #path-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px;} /* Sky gradient shifts from bright horizon (bottom/level 1) to deep space (top/level 5000) */ #path-container{ position:relative;width:100%;max-width:360px;margin:0 auto; background:linear-gradient(to top, #87CEEB 0%, /* horizon — Level 1 */ #42A5F5 12%, #1E88E5 28%, #1565C0 45%, #0D47A1 62%, #1A237E 78%, #0B1426 92%, #050D1A 100% /* deep space — Level 5000 */ ); } #road-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;} #day-nodes{position:absolute;top:0;left:0;width:100%;height:100%;} /* ── Atmospheric cloud decorations (non-interactive) ── */ .map-clouds{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1;} .mc{ position:absolute;font-size:clamp(2.5rem,9vw,4.5rem); opacity:.07;white-space:nowrap;pointer-events:none; animation:mcDrift linear infinite; } .mc-1{top:8%;animation-duration:55s;animation-delay:0s;} .mc-2{top:22%;animation-duration:72s;animation-delay:-18s;font-size:clamp(2rem,7vw,3.5rem);} .mc-3{top:38%;animation-duration:48s;animation-delay:-30s;font-size:clamp(3rem,10vw,5rem);} .mc-4{top:55%;animation-duration:64s;animation-delay:-8s;font-size:clamp(1.8rem,6vw,3rem);} .mc-5{top:70%;animation-duration:80s;animation-delay:-45s;} @keyframes mcDrift{0%{left:-15%;}100%{left:115%;}} /* ═══════ BALLOON NODES ═══════ */ .dnode{ position:absolute; transform:translate(-50%,-50%); /* Balloon body: taller-than-wide oval */ width:clamp(52px,14.5vw,66px); height:clamp(62px,17.5vw,78px); border-radius:50% 50% 50% 50% / 38% 38% 62% 62%; display:flex;flex-direction:column;align-items:center;justify-content:center; cursor:pointer; transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease; z-index:5; border:2px solid rgba(255,255,255,.45); box-shadow:inset -5px -4px 10px rgba(0,0,0,.12),inset 7px 7px 12px rgba(255,255,255,.32),0 8px 20px rgba(0,0,0,.3); /* Gloss highlight via pseudo-element */ overflow:visible; } /* Balloon knot */ .dnode::after{ content:'';position:absolute; bottom:-7px;left:50%;transform:translateX(-50%); width:7px;height:7px;border-radius:50%; background:rgba(0,0,0,.25); box-shadow:0 1px 3px rgba(0,0,0,.3); } /* Gloss shine */ .dnode::before{ content:'';position:absolute; top:10%;left:14%;width:28%;height:32%; background:radial-gradient(ellipse,rgba(255,255,255,.8) 0%,rgba(255,255,255,.2) 50%,transparent 72%); border-radius:50%;transform:rotate(-20deg); pointer-events:none;z-index:6; } /* Completed balloon — bright, rainbow tiers */ .dnode.unlocked{ box-shadow:inset -5px -4px 10px rgba(0,0,0,.1),inset 7px 7px 12px rgba(255,255,255,.3),0 8px 22px rgba(0,0,0,.35); } .dnode.unlocked:active{transform:translate(-50%,-50%) scale(.86);} .dnode.unlocked:hover{transform:translate(-50%,-50%) scale(1.1);} /* Current balloon — golden, prominent */ .dnode.current{ background:linear-gradient(145deg,#FFE57F,#FFD600 40%,#FF8F00) !important; border:2.5px solid rgba(255,255,255,.7) !important; box-shadow:0 0 0 0 rgba(255,214,0,.5),0 8px 28px rgba(255,150,0,.6),inset 0 3px 0 rgba(255,255,255,.5) !important; animation:balloonCurrentGlow 2.2s ease-in-out infinite alternate; z-index:8; } @keyframes balloonCurrentGlow{ 0%{box-shadow:0 0 10px 2px rgba(255,214,0,.3),0 8px 20px rgba(255,150,0,.4);} 100%{box-shadow:0 0 28px 8px rgba(255,214,0,.6),0 10px 36px rgba(255,100,0,.55);} } /* Locked balloon — grey, translucent cloud */ .dnode.locked{ background:rgba(150,180,220,.12) !important; border:1.5px dashed rgba(255,255,255,.2) !important; box-shadow:none !important; cursor:not-allowed;opacity:.38; } .dnode.locked::before,.dnode.locked::after{display:none;} /* Peek (next level) — slightly visible */ .dnode.peek{ background:rgba(180,210,255,.15) !important; border:1.5px dashed rgba(255,255,255,.25) !important; box-shadow:none !important; cursor:default !important; opacity:.5; animation:peekBreath 3s ease-in-out infinite; } .dnode.peek::before,.dnode.peek::after{display:none;} @keyframes peekBreath{0%,100%{opacity:.35;}50%{opacity:.58;}} /* ── Node interior elements ── */ .dnode-icon-top{ font-size:clamp(.95rem,3vw,1.3rem);line-height:1; margin-bottom:1px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); position:relative;z-index:7; } .dnode-icon{font-size:clamp(.88rem,2.6vw,1.15rem);line-height:1;margin-top:1px;position:relative;z-index:7;} .dnode-num{ font-family:'Bubblegum Sans',cursive; font-size:clamp(.52rem,1.7vw,.72rem);font-weight:700; color:#fff;line-height:1; text-shadow:0 1px 4px rgba(0,0,0,.5); position:relative;z-index:7; } /* ── Stars hang BELOW the balloon (like a tag on a string) ── */ .dnode-stars{ position:absolute; bottom:-22px; font-size:clamp(.5rem,1.6vw,.65rem); white-space:nowrap; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); animation:starsSwing 3s ease-in-out infinite; transform-origin:top center; } @keyframes starsSwing{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}} /* ── PLAYER AVATAR — sits above current balloon ── */ .dnode-avatar{ position:absolute; top:-34px; left:50%;transform:translateX(-50%); font-size:clamp(1.35rem,4.2vw,1.75rem); z-index:12; filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)); animation:avatarFloat 2s ease-in-out infinite; pointer-events:none; } @keyframes avatarFloat{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-7px);} } /* ── Pulse ring (current level) ── */ .dnode-pulse{ position:absolute; /* Slightly bigger than the balloon oval */ inset:-10px -8px -14px; border-radius:50% 50% 50% 50% / 40% 40% 60% 60%; border:3px solid rgba(255,214,0,.55); animation:balloonPulseRing 2s ease-out infinite; pointer-events:none; z-index:4; } @keyframes balloonPulseRing{0%{transform:scale(1);opacity:1;}100%{transform:scale(1.5);opacity:0;}} /* ── Decorative floating elements ── */ .road-decor{position:absolute;transform:translate(-50%,-50%);z-index:2;pointer-events:none;} .decor-emoji{font-size:clamp(1.4rem,4.5vw,2rem);filter:drop-shadow(0 2px 6px rgba(0,0,0,.2));display:block;} .decor-anim-0{animation:decorBob 3.5s ease-in-out infinite;} .decor-anim-1{animation:decorSpin 7s linear infinite;} .decor-anim-2{animation:decorWiggle 2.8s ease-in-out infinite;} @keyframes decorBob{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-9px);}} @keyframes decorSpin{0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);}} @keyframes decorWiggle{0%,100%{transform:translate(-50%,-50%) rotate(-9deg);}50%{transform:translate(-50%,-50%) rotate(9deg);}} /* Floating letters */ .float-letter{ position:absolute;transform:translate(-50%,-50%); font-family:'Bubblegum Sans',cursive; font-size:clamp(.8rem,2.4vw,1.1rem);font-weight:700; color:rgba(255,255,255,.06);pointer-events:none;z-index:1; animation:floatDrift linear infinite; } @keyframes floatDrift{0%{transform:translate(-50%,-50%) translateY(0) rotate(0deg);opacity:.06;}50%{opacity:.12;}100%{transform:translate(-50%,-50%) translateY(-40px) rotate(14deg);opacity:.03;}} /* Floating musical notes */ .float-note{ position:absolute;transform:translate(-50%,-50%); font-size:clamp(.65rem,2vw,.9rem);pointer-events:none;z-index:1;opacity:.18; animation:noteDrift ease-in-out infinite; } @keyframes noteDrift{0%{transform:translate(-50%,-50%) translateY(0) scale(1);opacity:.12;}50%{transform:translate(-50%,-50%) translateY(-18px) scale(1.15);opacity:.28;}100%{transform:translate(-50%,-50%) translateY(0) scale(1);opacity:.12;}} /* Altitude hint labels */ .fog-hint{ position:absolute;left:50%;transform:translateX(-50%); text-align:center;font-size:clamp(.45rem,1.4vw,.6rem); color:rgba(255,255,255,.45);font-weight:600; white-space:nowrap;letter-spacing:.5px; background:rgba(255,255,255,.06);padding:3px 10px;border-radius:10px; animation:fogFloat 2.5s ease-in-out infinite; } @keyframes fogFloat{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-5px);}} /* ── Footer & day badge ── */ #dash-footer{flex-shrink:0;text-align:center;padding:clamp(5px,1.2vh,10px);background:rgba(0,0,0,.2);} #dash-footer .pbtn{font-size:clamp(.52rem,1.5vw,.7rem);padding:6px 16px;} #day-badge{ position:fixed;bottom:clamp(8px,1.5vh,14px);left:50%;transform:translateX(-50%); background:rgba(0,0,0,.5);color:#fff;font-family:'Bubblegum Sans',cursive; font-size:clamp(.5rem,.58rem,.68rem);font-weight:700; padding:2px 10px;border-radius:10px;z-index:99; display:none;white-space:nowrap; } /* ═══════════════════════════════════════════════════════ 📍 FLOATING ACTION BUTTON — Jump to Current Level ═══════════════════════════════════════════════════════ */ #saga-fab{ position:absolute; bottom:clamp(72px,12vh,96px); right:14px; z-index:50; display:flex;align-items:center;gap:6px; background:linear-gradient(135deg,#1E88E5,#0D47A1); color:#fff;border:2px solid rgba(255,255,255,.3); padding:10px 16px; border-radius:28px; font-family:'Bubblegum Sans',cursive; font-size:clamp(.7rem,2.2vw,.85rem); font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(0,80,200,.45),0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease; -webkit-tap-highlight-color:rgba(30,136,229,.3); } #saga-fab:active{ transform:scale(.92); box-shadow:0 3px 10px rgba(0,80,200,.35),0 1px 3px rgba(0,0,0,.25); } #saga-fab:hover{ transform:scale(1.06); box-shadow:0 8px 28px rgba(0,80,200,.55),0 3px 8px rgba(0,0,0,.3); } #saga-fab-icon{font-size:clamp(1rem,3vw,1.25rem);} #saga-fab-text{white-space:nowrap;} /* ── Streak badge (dynamic, lives in dash-wrap) ── */ #streak-badge{ position:absolute;top:14px;right:50px; background:linear-gradient(135deg,#FF9800,#F44336); color:#fff;padding:4px 12px;border-radius:20px; font-family:'Bubblegum Sans',cursive; font-weight:700;font-size:clamp(.6rem,1.8vw,.75rem); box-shadow:0 3px 10px rgba(0,0,0,.3);z-index:100; animation:streakPop .5s cubic-bezier(.34,1.56,.64,1); } @keyframes streakPop{0%{transform:scale(0);}100%{transform:scale(1);}} /* ═══════════════════════════════════════════════════════ ★ SENTENCE BAR — Premium Glass style ═══════════════════════════════════════════════════════ */ #sentence-bar{ position:fixed;top:clamp(135px,23vh,175px);left:50%;transform:translateX(-50%); width:clamp(280px,88vw,420px);z-index:95; background:rgba(255,255,255,.18); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-radius:28px;padding:clamp(10px,1.8vh,16px) clamp(12px,2.5vw,20px); text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5); border:2px solid rgba(255,255,255,.4); } #sentence-text{ font-family:'Bubblegum Sans',cursive; font-size:clamp(.85rem,2.8vw,1.15rem); color:#fff;line-height:1.5; margin-bottom:8px; text-shadow:0 1px 4px rgba(0,0,0,.25); word-spacing:3px; } #sentence-text .blank-word{ display:inline-block; min-width:clamp(40px,12vw,65px); border-bottom:3px dashed rgba(255,214,0,.9); color:#FFD600;font-weight:700; margin:0 3px;padding:0 4px; transition:all .4s ease; } #sentence-text .blank-word.filled{ border-bottom-color:#68D391;color:#68D391; animation:slotFill .5s cubic-bezier(.34,1.56,.64,1); } #sentence-slots{ display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,1vw,8px); margin-top:4px; } .sent-slot{ display:inline-flex;align-items:center;justify-content:center; min-width:clamp(32px,9vw,50px);height:clamp(28px,4.5vh,38px); border:2px dashed rgba(255,255,255,.4);border-radius:14px; font-family:'Bubblegum Sans',cursive; font-size:clamp(.65rem,2vw,.85rem); color:rgba(255,255,255,.45); background:rgba(255,255,255,.08); transition:all .35s ease; padding:0 8px; } .sent-slot.filled{ border-color:#68D391;color:#68D391;font-weight:700; background:rgba(104,211,145,.15); animation:slotFill .5s cubic-bezier(.34,1.56,.64,1); } .sent-slot.wrong{ border-color:#FC8181;animation:slotShake .4s ease; } @keyframes slotFill{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}} @keyframes slotShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} /* ═══════════════════════════════════════════════════════ ★ IN-GAME CONTROLS — Premium Duolingo-style floating buttons ═══════════════════════════════════════════════════════ */ #game-ctrls{ position:fixed;top:clamp(32px,5.5vh,44px);left:6px;right:6px; display:flex;justify-content:space-between; z-index:105;pointer-events:none; } #game-ctrls.hidden{display:none;} .gc-btn{ width:40px;height:40px;border:none;border-radius:50%; font-size:1.05rem;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,opacity .3s; position:relative;pointer-events:auto; opacity:.7; } .gc-btn:hover,.gc-btn:active{opacity:1;} /* Exit button — left corner, soft coral */ #gc-exit{ background:linear-gradient(160deg,#FC8181,#E53E3E); box-shadow:0 5px 0 #C53030,0 6px 18px rgba(229,62,62,.35),inset 0 1px 0 rgba(255,255,255,.4); color:#fff; } /* Pause button — amber */ #gc-pause{ background:linear-gradient(160deg,#F6E05E,#ECC94B); box-shadow:0 5px 0 #B7791F,0 6px 18px rgba(236,201,75,.4),inset 0 1px 0 rgba(255,255,255,.5); color:#744210; } /* Press effect — bouncy */ .gc-btn:active{ transform:translateY(4px) scale(.93); box-shadow:0 1px 0 rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.3)!important; opacity:1; } /* Gloss highlight */ .gc-btn::before{ content:'';position:absolute;top:3px;left:18%;right:18%;height:36%; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,transparent 100%); pointer-events:none; } /* ═══════════════════════════════════════════════════════ ★ END-GAME WORD REPORT — Learning Summary ═══════════════════════════════════════════════════════ */ /* Make gameover card scrollable */ .go-card{ max-height:88vh!important;overflow-y:auto!important; -webkit-overflow-scrolling:touch; } #word-report{ margin:10px 0 8px; background:linear-gradient(135deg,#f5f7ff,#fffde7); border:2px solid #e0e0e0;border-radius:14px; padding:10px;text-align:left; max-height:40vh;overflow-y:auto; -webkit-overflow-scrolling:touch; } .wr-header{ font-family:'Bubblegum Sans',cursive; font-size:clamp(.85rem,2.5vw,1.05rem); color:#333;text-align:center;margin-bottom:4px; } .wr-stats{ text-align:center;font-size:clamp(.65rem,1.8vw,.78rem); color:#666;margin-bottom:8px; padding-bottom:6px;border-bottom:1px dashed #ccc; } .wr-pairs{display:flex;flex-direction:column;gap:3px;} .wr-pair{ display:flex;align-items:center;gap:5px; padding:3px 6px;border-radius:8px; font-size:clamp(.68rem,2vw,.82rem); background:rgba(255,255,255,.7); } .wr-pair.wr-missed{background:rgba(255,205,210,.3);} .wr-icon{font-size:clamp(.6rem,1.6vw,.72rem);flex-shrink:0;} .wr-target{font-weight:700;color:#333;text-transform:uppercase;} .wr-emoji{font-size:clamp(.8rem,2.2vw,1rem);flex-shrink:0;margin-left:2px;} .wr-type{font-size:clamp(.55rem,1.4vw,.65rem);color:#888;margin-left:auto;flex-shrink:0;} .pbtn{ display:inline-flex;align-items:center;gap:6px; color:#fff;border:none; border-radius:24px; padding:clamp(8px,1.6vh,12px) clamp(14px,3.5vw,22px); font-family:'Bubblegum Sans',cursive; font-size:clamp(.72rem,2vw,.88rem);font-weight:700; cursor:pointer; transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s; position:relative;top:0; } .pbtn:active{transform:scale(.94) translateY(3px);top:3px;} .wr-copy{ display:block!important;width:100%;margin-top:10px; background:linear-gradient(135deg,#7E57C2,#5C6BC0)!important; box-shadow:0 3px 12px rgba(94,53,177,.3)!important; text-align:center; } /* ═══════════════════════════════════════════════════════ 📖 LESSON PREVIEW SCREEN ═══════════════════════════════════════════════════════ */ #lesson-preview{z-index:200;background:linear-gradient(135deg,#1a237e 0%,#283593 40%,#3949ab 100%);} #lp-wrap{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;} #lp-header{ text-align:center;padding:clamp(12px,3vh,20px) 12px clamp(6px,1.5vh,10px); flex-shrink:0;z-index:5; background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 100%); } #lp-emoji{font-size:clamp(1.6rem,5vw,2.2rem);margin-bottom:2px;} #lp-title{ font-family:'Bubblegum Sans',cursive;color:#fff; font-size:clamp(1rem,3.2vw,1.4rem);font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.3); } #lp-sub{ font-family:'Bubblegum Sans',cursive;color:rgba(255,255,255,.7); font-size:clamp(.65rem,1.8vw,.8rem);margin-top:2px; } #lp-scroll{ flex:1;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch;padding:8px 12px 12px; } #lp-scroll::-webkit-scrollbar{width:4px;} #lp-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:2px;} #lp-content{max-width:340px;margin:0 auto;} /* Section headers */ .lp-section{margin-bottom:14px;} .lp-section-title{ font-family:'Bubblegum Sans',cursive; color:#FFCA28;font-size:clamp(.78rem,2.2vw,.92rem); font-weight:700;margin-bottom:6px; display:flex;align-items:center;gap:6px; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:4px; } .lp-section-title .lp-count{ background:rgba(255,202,40,.2);color:#FFCA28; font-size:clamp(.55rem,1.4vw,.65rem); padding:1px 7px;border-radius:8px;margin-left:auto; } /* Word/Sentence items */ .lp-item{ display:flex;align-items:center;gap:8px; background:rgba(255,255,255,.08); border-radius:10px;padding:7px 10px;margin-bottom:5px; border:1px solid rgba(255,255,255,.06); transition:background .2s; } .lp-item:active{background:rgba(255,255,255,.15);} .lp-num{ font-family:'Bubblegum Sans',cursive; color:rgba(255,255,255,.45);font-size:clamp(.6rem,1.5vw,.7rem); font-weight:700;min-width:22px;text-align:right;flex-shrink:0; } .lp-word{ font-family:'Bubblegum Sans',cursive; color:#fff;font-size:clamp(.78rem,2.2vw,.92rem); font-weight:700;text-transform:capitalize;flex:1; } .lp-sentence .lp-word{ text-transform:none;font-size:clamp(.68rem,1.9vw,.82rem); font-weight:600;color:rgba(255,255,255,.9); } .lp-icon{ font-size:clamp(.7rem,1.8vw,.85rem);flex-shrink:0; cursor:pointer;opacity:.6;transition:opacity .2s; } .lp-icon:active{opacity:1;transform:scale(1.2);} /* Pattern tag */ .lp-pattern-tag{ font-size:clamp(.5rem,1.3vw,.6rem); color:#81D4FA;background:rgba(129,212,250,.12); padding:1px 6px;border-radius:6px;flex-shrink:0; } /* Footer */ #lp-footer{ flex-shrink:0;text-align:center; padding:clamp(8px,2vh,14px) 12px; background:rgba(0,0,0,.2); display:flex;gap:8px;justify-content:center;flex-wrap:wrap; } #lp-footer .pbtn{font-size:clamp(.62rem,1.8vw,.78rem);padding:8px 20px;} /* Empty state */ .lp-empty{ color:rgba(255,255,255,.5);text-align:center; font-family:'Bubblegum Sans',cursive; font-size:clamp(.7rem,2vw,.85rem);padding:20px 0; } /* ★ AUTO FONT SHRINK — for long text (>25 chars) ★ */ .small-text{font-size:clamp(.72rem,2.2vw,1rem)!important;line-height:1.35!important;} #sentence-text.small-text{font-size:clamp(.7rem,2.2vw,.95rem)!important;} /* ========================================= ★ UI FIX: बॅनर आणि प्रश्न एकमेकांवर येऊ नयेत म्हणून ========================================= */ #prompt-banner { min-height: 80px !important; /* उंची वाढवली */ margin-bottom: 25px !important; /* खाली गॅप दिला */ display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 10px 14px !important; } #prompt-text { margin-bottom: 5px !important; line-height: 1.3 !important; padding-top: 5px !important; } #prompt-word { margin-top: 5px !important; display: block !important; } /* ========================================= ★ UI बदल: खालची जागा वाचवणे आणि प्रश्न वर घेणे ========================================= */ /* 1. खालच्या 'त्या दोन गोष्टी' (Sentence Bar आणि Hint) कायमच्या लपवणे */ #sentence-bar, #wrong-hint { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* 2. प्रश्नाचा बॉक्स (Prompt Banner) आणखी वर सरकवणे */ #prompt-banner { top: max(44px, env(safe-area-inset-top, 0px) + 44px) !important; } /* ======================================================= ★ FINAL UI CLEANUP: फक्त मुख्य प्रश्न आणि फुगे दिसतील ======================================================= */ /* 1. वरची 'अनावश्यक माहिती' (Theme Name & Badge) लपवणे */ #theme-label, #challenge-badge { display: none !important; } /* 2. खालच्या 'अडथळा करणाऱ्या पट्ट्या' (Sentence Bar & Hint) लपवणे */ #sentence-bar, #wrong-hint { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; } /* 3. प्रश्नाचा मुख्य बॉक्स (Prompt Banner) एकदम वर सेट करणे */ #prompt-banner { top: max(44px, env(safe-area-inset-top, 0px) + 44px) !important; margin-top: 0 !important; position: fixed !important; /* जागा फिक्स केली */ z-index: 99 !important; /* सर्वांच्या वर */ } /* ═══════════════════════════════════════════════════════ ★ INLINE SENTENCE STYLES (inside prompt-banner) sentenceFill → blank-word inside #prompt-word sentenceOrder → jumbled-hint + slots inside #prompt-word ═══════════════════════════════════════════════════════ */ #prompt-word .blank-word{ display:inline-block; min-width:clamp(40px,12vw,65px); border-bottom:3px dashed #F6AD55; color:#DD6B20;font-weight:900; margin:0 4px;padding:0 6px; border-radius:4px; transition:all .4s cubic-bezier(.34,1.56,.64,1); } #prompt-word .blank-word.filled{ border-bottom-color:#38A169;color:#276749; animation:slotPop .5s cubic-bezier(.34,1.56,.64,1); } @keyframes slotPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}} /* Jumbled words hint for sentenceOrder */ .jumbled-hint{ font-size:clamp(.7rem,2.2vw,.95rem); color:#C05621;font-weight:700; letter-spacing:.5px;word-spacing:3px; margin-bottom:8px;line-height:1.5; } /* Slots container inside prompt-word */ .prompt-slots{ display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(3px,1vw,6px); margin-top:5px; } .prompt-slots .sent-slot{ display:inline-flex;align-items:center;justify-content:center; min-width:clamp(30px,8vw,46px);height:clamp(26px,4vh,34px); border:2px dashed rgba(0,0,0,.18);border-radius:12px; font-family:'Bubblegum Sans',cursive; font-size:clamp(.6rem,1.8vw,.8rem); color:rgba(0,0,0,.28); transition:all .35s cubic-bezier(.34,1.56,.64,1); padding:0 5px; background:rgba(0,0,0,.03); } .prompt-slots .sent-slot.filled{ border-color:#38A169;color:#276749;font-weight:700; background:rgba(56,161,105,.1); animation:slotPop .5s cubic-bezier(.34,1.56,.64,1); } .prompt-slots .sent-slot.wrong{ border-color:#FC8181;color:#C53030; animation:slotShake .4s ease; } @keyframes slotShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} /* ═══════ STAR RATING DISPLAY (Game Over Screen) ═══════ */ #star-rating-display{ font-size:clamp(2rem,8vw,3.5rem); letter-spacing:8px; text-align:center; margin:8px 0 4px; filter:drop-shadow(0 2px 8px rgba(255,215,0,.6)); animation:starPulse 1.5s ease-in-out infinite; } #star-rating-display .star-empty{opacity:.35;filter:grayscale(1);} @keyframes starPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}} /* Accuracy Bar */ #accuracy-bar-wrap{ position:relative; width:80%;max-width:220px;height:20px; background:rgba(0,0,0,.06); border-radius:14px;margin:10px auto 12px; overflow:hidden; border:1.5px solid rgba(255,255,255,.5); box-shadow:inset 0 2px 4px rgba(0,0,0,.08); } #accuracy-fill{ height:100%;border-radius:14px; transition:width 1.4s cubic-bezier(.34,1.56,.64,1); background:linear-gradient(90deg,#FC8181,#F6E05E,#68D391); box-shadow:0 0 12px rgba(104,211,145,.4); } #accuracy-text{ position:absolute;top:0;left:0;right:0;bottom:0; display:flex;align-items:center;justify-content:center; font-size:clamp(.55rem,2vw,.7rem);font-weight:700;color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.4); font-family:'Bubblegum Sans',cursive; } /* ═══════════════════════════════════════════════════════ ★ GLOBAL BOUNCY BUTTON SYSTEM — Duolingo ABC style All interactive elements get spring physics ═══════════════════════════════════════════════════════ */ /* Upgrade bonus banner */ #bonus-banner{ position:fixed;top:clamp(6px,1.5vh,12px);right:clamp(8px,2vw,16px); background:linear-gradient(135deg,#F6E05E,#ED8936); color:#fff;font-family:'Bubblegum Sans',cursive; font-size:clamp(.65rem,.8rem,.9rem);font-weight:700; padding:5px 16px;border-radius:24px;z-index:101;display:none; animation:bonusPulse 1s ease infinite; box-shadow:0 5px 0 #C05621,0 6px 20px rgba(237,137,54,.45),inset 0 1px 0 rgba(255,255,255,.4); } @keyframes bonusPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.9}} /* FAB upgrade */ #saga-fab{ position:absolute; bottom:clamp(72px,12vh,96px); right:14px; z-index:50; display:flex;align-items:center;gap:6px; background:linear-gradient(160deg,#63B3ED,#3182CE); color:#fff;border:2px solid rgba(255,255,255,.45); padding:11px 18px; border-radius:30px; font-family:'Bubblegum Sans',cursive; font-size:clamp(.7rem,2.2vw,.85rem); font-weight:700; cursor:pointer; box-shadow:0 6px 0 #2C5282,0 8px 24px rgba(49,130,206,.45),inset 0 1px 0 rgba(255,255,255,.35); transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s; -webkit-tap-highlight-color:rgba(99,179,237,.3); position:relative;top:0; } #saga-fab:active{ transform:scale(.93) translateY(4px); box-shadow:0 2px 0 #2C5282,0 4px 12px rgba(49,130,206,.3); top:4px; } #saga-fab:hover{transform:scale(1.05);} #saga-fab-icon{font-size:clamp(1rem,3vw,1.25rem);} #saga-fab-text{white-space:nowrap;} /* Dashboard header button upgrades */ #play-modes button{ transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s!important; border-radius:18px!important; } #play-modes button:active{ transform:scale(.94) translateY(2px)!important; } /* Dash footer button */ #dash-footer .pbtn{ box-shadow:0 5px 0 rgba(0,0,0,.2),0 6px 18px rgba(0,0,0,.2); } #dash-footer .pbtn:active{ box-shadow:0 2px 0 rgba(0,0,0,.15),0 3px 8px rgba(0,0,0,.15); } /* Lesson preview footer */ #lp-footer .pbtn{ box-shadow:0 5px 0 rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.15); } #lp-footer .pbtn:active{ box-shadow:0 2px 0 rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.1); } /* ★ REMOVE REDUNDANT SOUND BUTTON (Clean UI) ★ */ #btn-sound-toggle { display: none !important; } /* Ensure HUD only aligns Left */ #hud { justify-content: flex-start !important; gap: 8px !important; padding-right: 60px !important; /* Prevent overlap with Pause */ } /* ★ HIDE DEV PANEL GEAR ICON FOR STUDENTS ★ */ #scg { display: none !important; } /* ★ HIDE DASHBOARD GEAR ICON FOR STUDENTS ★ */ #dash-dev-btn, #dash-settings, .dash-gear { display: none !important; } /* Backup: any button inside dash-header that triggers devTogglePanel */ #dash-header > button { display: none !important; } /* ═══════════════════════════════════════════════════════════════ 🌟 PREMIUM REDESIGN — Sound Catcher Dashboard International Educational App Level UI All overrides go here — no original logic touched ═══════════════════════════════════════════════════════════════ */ /* ── 1. IMMERSIVE SKY BACKGROUND ──────────────────────────────── */ #dash-ov { background: linear-gradient(180deg, #0a0e2e 0%, #0d2060 8%, #0e3580 18%, #1565C0 35%, #1e7ed4 52%, #4da6e8 68%, #7ec8f0 80%, #b8e4f8 90%, #dff2fc 100% ) !important; overflow: hidden; } /* Sunrise glow at the bottom (where level 1 is) */ #dash-ov::before { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 38%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 200, 80, 0.22) 0%, rgba(255, 140, 60, 0.12) 40%, transparent 72% ); pointer-events: none; z-index: 0; } /* Stars twinkling in the upper sky */ #dash-ov::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 45%; background-image: radial-gradient(1.5px 1.5px at 10% 12%, rgba(255,255,255,.9) 0%, transparent 100%), radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,.7) 0%, transparent 100%), radial-gradient(2px 2px at 42% 18%, rgba(255,255,255,.8) 0%, transparent 100%), radial-gradient(1px 1px at 58% 6%, rgba(255,255,255,.6) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 74% 14%, rgba(255,255,255,.9) 0%, transparent 100%), radial-gradient(1px 1px at 88% 9%, rgba(255,255,255,.7) 0%, transparent 100%), radial-gradient(1px 1px at 32% 3%, rgba(255,255,255,.8) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 65% 22%, rgba(255,255,255,.6) 0%, transparent 100%), radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,.5) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 82% 19%, rgba(255,255,255,.7) 0%, transparent 100%); animation: starsTwinkle 4s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } @keyframes starsTwinkle { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } /* ── 2. PREMIUM CLOUDS ────────────────────────────────────────── */ .map-clouds { z-index: 2; } .mc { opacity: 0 !important; /* hide original emoji clouds */ } /* Beautiful CSS cloud shapes — 5 layers */ .mc-cloud-layer { position: absolute; pointer-events: none; z-index: 2; } /* Inject premium clouds via #path-container pseudo — we use HTML injection instead */ /* Real clouds added via HTML patch below */ /* ── 3. PATH CONTAINER — transparent so sky shows through ──────── */ #path-container { background: transparent !important; max-width: 420px !important; } /* ── 4. PREMIUM HEADER ────────────────────────────────────────── */ #dash-header { background: linear-gradient(180deg, rgba(5, 10, 40, 0.85) 0%, rgba(10, 20, 60, 0.6) 60%, transparent 100% ) !important; padding: clamp(10px, 2.5vh, 18px) 16px clamp(6px, 1.5vh, 12px) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #dash-emoji { filter: drop-shadow(0 0 18px rgba(255, 220, 80, 0.8)) drop-shadow(0 4px 12px rgba(0,0,0,.4)) !important; animation: dashFloat 3s ease-in-out infinite, dashGlow 2s ease-in-out infinite alternate !important; } @keyframes dashGlow { 0% { filter: drop-shadow(0 0 12px rgba(255,220,80,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.4)); } 100%{ filter: drop-shadow(0 0 28px rgba(255,220,80,1.0)) drop-shadow(0 6px 18px rgba(0,0,0,.5)); } } #dash-title { font-size: clamp(1.3rem, 4.5vw, 2.2rem) !important; background: linear-gradient(135deg, #fff 0%, #FFE082 45%, #FFD740 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none !important; filter: drop-shadow(0 2px 8px rgba(255,200,0,.4)); letter-spacing: 0.5px; } #dash-sub { color: rgba(255,255,255,.75) !important; letter-spacing: 3px !important; font-size: clamp(.52rem, 1.4vw, .68rem) !important; } /* Progress bar upgrade */ #dp-bar { height: 8px !important; background: rgba(255,255,255,.08) !important; border-radius: 8px !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.3) !important; } #dp-fill { background: linear-gradient(90deg, #FF6B35, #FFD740, #69F0AE) !important; box-shadow: 0 0 12px rgba(255,215,64,.6) !important; border-radius: 8px !important; } #dp-text { color: rgba(255,255,255,.7) !important; font-size: clamp(.42rem, 1.15vw, .56rem) !important; } /* ── 5. CANDY 3D PLAY MODE BUTTONS ───────────────────────────── */ #play-modes { padding: 10px 12px 6px !important; gap: 8px !important; background: rgba(0,0,0,.15); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.07); } #play-modes button { border-radius: 22px !important; font-size: clamp(.65rem, 1.8vw, .78rem) !important; font-weight: 800 !important; padding: 10px 6px !important; letter-spacing: 0.3px; position: relative; /* 3D candy depth effect */ box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.15) !important; transform: translateY(0) !important; transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s ease !important; border: none !important; overflow: hidden; } /* Gloss shine on top of buttons */ #play-modes button::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%); border-radius: 22px 22px 0 0; pointer-events: none; } /* Word Bank — purple candy */ #play-modes button:nth-child(1) { background: linear-gradient(145deg, #9C27B0, #6A1B9A) !important; box-shadow: 0 6px 0 #4A148C, 0 8px 20px rgba(106,27,154,.45), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.15) !important; } /* Fix Mistakes — red candy */ #play-modes button:nth-child(2) { background: linear-gradient(145deg, #F44336, #C62828) !important; box-shadow: 0 6px 0 #8B1A1A, 0 8px 20px rgba(198,40,40,.45), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.15) !important; } /* Revision — blue candy */ #play-modes button:nth-child(3) { background: linear-gradient(145deg, #42A5F5, #1565C0) !important; box-shadow: 0 6px 0 #0D3B7A, 0 8px 20px rgba(21,101,192,.45), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.15) !important; } #play-modes button:hover { transform: translateY(-2px) scale(1.04) !important; filter: brightness(1.1); } #play-modes button:active { transform: translateY(4px) scale(.97) !important; box-shadow: 0 2px 0 rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.25) !important; filter: brightness(.95); } /* ── 6. BALLOON NODES — premium upgrade ───────────────────────── */ .dnode { /* Larger, more impressive */ width: clamp(56px, 15vw, 72px) !important; height: clamp(68px, 19vw, 86px) !important; box-shadow: inset -6px -5px 12px rgba(0,0,0,.14), inset 8px 8px 14px rgba(255,255,255,.38), 0 10px 28px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.2) !important; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .25s ease !important; } .dnode.unlocked:hover { transform: translate(-50%,-50%) scale(1.14) !important; filter: brightness(1.12) saturate(1.2); box-shadow: inset -6px -5px 12px rgba(0,0,0,.1), inset 8px 8px 14px rgba(255,255,255,.4), 0 16px 36px rgba(0,0,0,.4), 0 0 20px rgba(255,255,255,.15) !important; } /* Current level — golden candy with intense glow */ .dnode.current { background: linear-gradient(145deg, #FFF176, #FFD600 35%, #FF8F00 75%, #E65100) !important; border: 3px solid rgba(255,255,255,.8) !important; box-shadow: 0 0 0 4px rgba(255,214,0,.3), 0 0 30px 8px rgba(255,180,0,.5), 0 12px 32px rgba(255,100,0,.45), inset 0 3px 0 rgba(255,255,255,.6), inset -4px -4px 8px rgba(200,80,0,.2) !important; animation: balloonCurrentGlowV2 2s ease-in-out infinite alternate !important; z-index: 10 !important; } @keyframes balloonCurrentGlowV2 { 0% { box-shadow: 0 0 12px 3px rgba(255,214,0,.4), 0 0 28px 6px rgba(255,180,0,.25), 0 12px 28px rgba(255,100,0,.4), inset 0 3px 0 rgba(255,255,255,.6); } 100%{ box-shadow: 0 0 22px 8px rgba(255,214,0,.7), 0 0 48px 12px rgba(255,180,0,.45), 0 16px 40px rgba(255,100,0,.6), inset 0 3px 0 rgba(255,255,255,.7); } } /* Pulse ring — bigger and more vivid */ .dnode-pulse { inset: -12px -10px -16px !important; border: 3px solid rgba(255,220,0,.7) !important; animation: balloonPulseV2 1.8s ease-out infinite !important; } @keyframes balloonPulseV2 { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } } /* Avatar — bigger float */ .dnode-avatar { font-size: clamp(1.5rem, 4.8vw, 2rem) !important; top: -40px !important; animation: avatarFloatV2 1.8s ease-in-out infinite !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)) !important; } @keyframes avatarFloatV2 { 0%,100%{ transform: translateX(-50%) translateY(0) rotate(-3deg); } 50% { transform: translateX(-50%) translateY(-10px) rotate(3deg); } } /* ── 7. FOOTER BUTTON — candy style ──────────────────────────── */ #dash-footer { background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 100%) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.08); padding: clamp(8px, 1.8vh, 14px) !important; } #dash-footer .pbtn { background: linear-gradient(145deg, #FF7043, #E64A19) !important; border-radius: 24px !important; font-size: clamp(.6rem, 1.7vw, .78rem) !important; font-weight: 800 !important; padding: 10px 28px !important; box-shadow: 0 5px 0 #BF360C, 0 8px 20px rgba(230,74,25,.45), inset 0 2px 0 rgba(255,255,255,.3) !important; transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s !important; letter-spacing: 0.5px; position: relative; overflow: hidden; } #dash-footer .pbtn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 100%); border-radius: 24px 24px 0 0; } #dash-footer .pbtn:hover { transform: translateY(-2px) scale(1.04) !important; filter: brightness(1.1); } #dash-footer .pbtn:active { transform: translateY(4px) scale(.97) !important; box-shadow: 0 1px 0 #BF360C, 0 3px 10px rgba(230,74,25,.3), inset 0 2px 0 rgba(255,255,255,.2) !important; } /* ── 8. SAGA FAB — premium ────────────────────────────────────── */ #saga-fab { background: linear-gradient(145deg, #FFD740, #FF8F00) !important; color: #1A237E !important; border: 2px solid rgba(255,255,255,.5) !important; border-radius: 32px !important; font-weight: 900 !important; box-shadow: 0 5px 0 #E65100, 0 8px 24px rgba(255,143,0,.5), inset 0 2px 0 rgba(255,255,255,.4) !important; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important; } #saga-fab:hover { transform: scale(1.08) !important; filter: brightness(1.08); box-shadow: 0 6px 0 #E65100, 0 12px 30px rgba(255,143,0,.6), inset 0 2px 0 rgba(255,255,255,.45) !important; } #saga-fab:active { transform: scale(.94) translateY(4px) !important; box-shadow: 0 1px 0 #E65100, 0 4px 12px rgba(255,143,0,.35), inset 0 2px 0 rgba(255,255,255,.3) !important; } /* ── 9. SCROLLBAR — premium ──────────────────────────────────── */ #path-scroll::-webkit-scrollbar { width: 4px !important; } #path-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.04); } #path-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,220,80,.4), rgba(100,180,255,.3)); border-radius: 4px; } /* ── 10. PREMIUM CLOUD SHAPES (injected via HTML patch) ───────── */ .sky-cloud { position: absolute; pointer-events: none; z-index: 2; animation: cloudDriftPremium linear infinite; } .sky-cloud .cloud-body { position: relative; background: rgba(255,255,255,.88); border-radius: 50px; box-shadow: 0 4px 20px rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,100,200,.08); filter: blur(0.3px); } .sky-cloud .cloud-body::before, .sky-cloud .cloud-body::after { content: ''; position: absolute; background: rgba(255,255,255,.88); border-radius: 50%; } .sky-cloud.c1 { top: 8%; animation-duration: 45s; animation-delay: 0s; } .sky-cloud.c1 .cloud-body { width: 90px; height: 28px; left: 0; top: 14px; } .sky-cloud.c1 .cloud-body::before { width: 44px; height: 44px; top: -22px; left: 12px; } .sky-cloud.c1 .cloud-body::after { width: 32px; height: 32px; top: -14px; left: 42px; } .sky-cloud.c2 { top: 20%; animation-duration: 62s; animation-delay: -20s; } .sky-cloud.c2 .cloud-body { width: 120px; height: 32px; left: 0; top: 18px; } .sky-cloud.c2 .cloud-body::before { width: 56px; height: 56px; top: -28px; left: 18px; } .sky-cloud.c2 .cloud-body::after { width: 38px; height: 38px; top: -18px; left: 60px; } .sky-cloud.c3 { top: 36%; animation-duration: 38s; animation-delay: -12s; } .sky-cloud.c3 .cloud-body { width: 70px; height: 22px; left: 0; top: 12px; } .sky-cloud.c3 .cloud-body::before { width: 36px; height: 36px; top: -18px; left: 10px; } .sky-cloud.c3 .cloud-body::after { width: 26px; height: 26px; top: -10px; left: 34px; } .sky-cloud.c4 { top: 52%; animation-duration: 70s; animation-delay: -35s; } .sky-cloud.c4 .cloud-body { width: 100px; height: 26px; left: 0; top: 14px; } .sky-cloud.c4 .cloud-body::before { width: 48px; height: 48px; top: -24px; left: 14px; } .sky-cloud.c4 .cloud-body::after { width: 34px; height: 34px; top: -16px; left: 52px; } .sky-cloud.c5 { top: 66%; animation-duration: 55s; animation-delay: -8s; } .sky-cloud.c5 .cloud-body { width: 80px; height: 24px; left: 0; top: 13px; } .sky-cloud.c5 .cloud-body::before { width: 40px; height: 40px; top: -20px; left: 10px; } .sky-cloud.c5 .cloud-body::after { width: 28px; height: 28px; top: -12px; left: 40px; } .sky-cloud.c6 { top: 14%; animation-duration: 50s; animation-delay: -28s; } .sky-cloud.c6 .cloud-body { width: 60px; height: 18px; left: 0; top: 10px; } .sky-cloud.c6 .cloud-body::before { width: 30px; height: 30px; top: -15px; left: 8px; } .sky-cloud.c6 .cloud-body::after { width: 22px; height: 22px; top: -9px; left: 28px; } @keyframes cloudDriftPremium { 0% { left: -160px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { left: 110%; opacity: 0; } } /* ── 11. SCROLL CONTAINER ENTRY ANIMATION ─────────────────────── */ #dash-wrap { animation: dashWrapEntry .45s cubic-bezier(.22,1,.36,1) both; } @keyframes dashWrapEntry { 0% { opacity: 0; transform: scale(.97) translateY(12px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* ── 12. NODE NUMBER & STARS POLISH ──────────────────────────── */ .dnode-num { font-size: clamp(.56rem, 1.8vw, .78rem) !important; text-shadow: 0 1px 6px rgba(0,0,0,.6) !important; } .dnode-stars { bottom: -26px !important; font-size: clamp(.55rem, 1.7vw, .7rem) !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) !important; } /* ── 13. LESSON PREVIEW CANDY BUTTONS ────────────────────────── */ #lp-footer .pbtn { border-radius: 24px !important; font-weight: 800 !important; box-shadow: 0 5px 0 rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.3) !important; transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s !important; position: relative; overflow: hidden; } #lp-footer .pbtn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 100%); border-radius: 24px 24px 0 0; } #lp-footer .pbtn:hover { transform: translateY(-2px) scale(1.04) !important; filter: brightness(1.1); } #lp-footer .pbtn:active { transform: translateY(4px) scale(.97) !important; box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.2) !important; } /* ── 14. ATMOSPHERIC DEPTH on path-container ─────────────────── */ #path-container::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(0deg, rgba(255,220,100,.08) 0%, transparent 100%); pointer-events: none; z-index: 1; } /* ═══════════════════════════════════════════════════════ 🍬 PREMIUM 3D CANDY BUTTONS — Fun Zone + Saga FAB ═══════════════════════════════════════════════════════ */ /* ── Language toggle button ── */ #sc-lang-btn { transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .15s !important; } #sc-lang-btn:hover { background: rgba(255,255,255,.22) !important; transform: scale(1.06) !important; box-shadow: 0 4px 16px rgba(0,0,0,.35) !important; } #sc-lang-btn:active { transform: scale(.93) !important; } /* ── Funzone footer button — full premium candy ── */ /* sc-footer-btn — see new 3D definition below */ /* ── Saga FAB — premium gold candy ── */ #saga-fab { background: linear-gradient(160deg, #FFF176 0%, #FFD740 40%, #FF8F00 80%, #E65100 100%) !important; color: #1A237E !important; border: 2.5px solid rgba(255,255,255,.6) !important; border-radius: 32px !important; font-weight: 900 !important; font-size: clamp(.72rem, 2.2vw, .88rem) !important; padding: 11px 18px !important; letter-spacing: .3px; position: relative; overflow: hidden; /* 3D gold depth */ box-shadow: 0 6px 0 #BF6000, 0 10px 28px rgba(255,143,0,.55), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(150,70,0,.2) !important; transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s !important; } /* Gold shine */ #saga-fab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48%; background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 100%); border-radius: 32px 32px 0 0; pointer-events: none; } /* Shimmer sweep */ #saga-fab::after { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: fabShimmer 3s ease-in-out infinite; } @keyframes fabShimmer { 0%,70% { left: -80%; } 85% { left: 130%; } 100% { left: 130%; } } #saga-fab:hover { transform: scale(1.1) translateY(-2px) !important; filter: brightness(1.08) saturate(1.15) !important; box-shadow: 0 9px 0 #BF6000, 0 14px 36px rgba(255,143,0,.65), inset 0 2px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(150,70,0,.2) !important; } #saga-fab:active { transform: scale(.95) translateY(5px) !important; filter: brightness(.94) !important; box-shadow: 0 1px 0 #BF6000, 0 4px 14px rgba(255,143,0,.35), inset 0 3px 6px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35) !important; } #saga-fab-icon { font-size: clamp(1.1rem, 3.2vw, 1.35rem) !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); } #saga-fab-text { font-size: clamp(.72rem, 2.1vw, .88rem); text-shadow: 0 1px 3px rgba(0,0,0,.15); } /* Floating HUD feel — subtle ambient glow under both buttons */ #dash-footer { position: relative; } #dash-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,120,50,.12) 0%, transparent 70%); pointer-events: none; } /* ════════════════════════════════════════════════════════════ 🍬 TRUE 3D CANDY BUTTONS — 3 Layer System Layer 1: Base gradient background Layer 2: Inset shadows for convex 3D depth (glass effect) Layer 3: :active press = translateY down + shadow collapse ════════════════════════════════════════════════════════════ */ /* ── Fun Zone footer button ── */ .sc-footer-btn { /* Layer 1: Base gradient */ background: linear-gradient(175deg, #FF8A65 0%, #FF5722 40%, #E64A19 70%, #BF360C 100% ) !important; border: none !important; border-radius: 28px !important; font-size: clamp(.78rem, 2.3vw, .98rem) !important; font-weight: 900 !important; letter-spacing: .6px !important; padding: 13px 40px !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.3) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; /* Layer 2: Inset 3D depth - top inset white → convex gloss highlight - bottom inset dark → depth / grounding shadow + outer drop shadow → floating feel */ box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.22), inset 3px 0 0 rgba(255,255,255,.12), inset -3px 0 0 rgba(0,0,0,.12), 0 8px 0 #6D1F06, 0 12px 28px rgba(180,40,0,.45) !important; transform: translateY(0) !important; transition: transform .08s ease, box-shadow .08s ease, filter .08s !important; } /* Gloss pseudo-element */ .sc-footer-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48%; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 60%, transparent 100% ); border-radius: 28px 28px 50% 50%; pointer-events: none; z-index: 1; } .sc-footer-btn:hover { filter: brightness(1.07) saturate(1.08) !important; transform: translateY(-2px) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.25), inset 3px 0 0 rgba(255,255,255,.14), inset -3px 0 0 rgba(0,0,0,.14), 0 10px 0 #6D1F06, 0 16px 36px rgba(180,40,0,.55) !important; } /* Layer 3: Active press — button sinks in */ .sc-footer-btn:active { transform: translateY(6px) !important; filter: brightness(.92) !important; box-shadow: inset 0 5px 8px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.12), 0 2px 0 #6D1F06, 0 4px 12px rgba(180,40,0,.3) !important; } /* ── Saga FAB — Gold 3D Candy ── */ #saga-fab { /* Layer 1: Gold gradient */ background: linear-gradient(175deg, #FFF59D 0%, #FFD740 30%, #FF8F00 65%, #E65100 100% ) !important; color: #3E2000 !important; border: 2px solid rgba(255,255,255,.55) !important; border-radius: 32px !important; font-weight: 900 !important; font-size: clamp(.74rem, 2.2vw, .9rem) !important; padding: 11px 20px !important; text-shadow: 0 1px 2px rgba(255,255,255,.4) !important; position: relative !important; overflow: hidden !important; /* Layer 2: Inset depth — gold convex feel */ box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(100,40,0,.25), inset 3px 0 0 rgba(255,255,255,.2), inset -3px 0 0 rgba(100,40,0,.15), 0 7px 0 #7F3300, 0 10px 28px rgba(200,80,0,.5) !important; transition: transform .08s ease, box-shadow .08s ease, filter .08s !important; } /* Gold gloss */ #saga-fab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.1) 60%, transparent 100% ); border-radius: 32px 32px 50% 50%; pointer-events: none; z-index: 1; } /* Shimmer */ #saga-fab::after { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent ); transform: skewX(-18deg); animation: scFabShimmer 3.5s ease-in-out infinite; z-index: 2; } @keyframes scFabShimmer { 0%,65% { left: -80%; } 80% { left: 130%; } 100% { left: 130%; } } #saga-fab:hover { filter: brightness(1.08) saturate(1.1) !important; transform: scale(1.07) translateY(-2px) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(100,40,0,.3), inset 3px 0 0 rgba(255,255,255,.22), inset -3px 0 0 rgba(100,40,0,.18), 0 9px 0 #7F3300, 0 14px 36px rgba(200,80,0,.6) !important; } /* Layer 3: Active press */ #saga-fab:active { transform: translateY(5px) scale(.97) !important; filter: brightness(.9) !important; box-shadow: inset 0 5px 8px rgba(0,0,0,.22), inset 0 -1px 0 rgba(255,255,255,.2), 0 2px 0 #7F3300, 0 4px 12px rgba(200,80,0,.3) !important; } #saga-fab-icon { font-size: clamp(1.1rem, 3.2vw, 1.4rem) !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); position: relative; z-index: 3; } #saga-fab-text { position: relative; z-index: 3; font-size: clamp(.74rem, 2.1vw, .9rem); } /* ═══════════════════════════════════════════ PLAY MODE BUTTONS — 3D Candy (from v4) ═══════════════════════════════════════════ */ .sc-mode-btn { flex: 1; min-width: 70px; padding: clamp(10px,2.2vh,14px) 6px; border: none; border-radius: 18px; color: #fff; font-size: clamp(.68rem,2vw,.82rem); font-weight: 800; cursor: pointer; position: relative; overflow: hidden; letter-spacing: .3px; text-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s, filter .1s; } .sc-mode-btn::before { content: ''; position: absolute; top:0;left:0;right:0; height:52%; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 70%, transparent 100%); border-radius: 18px 18px 60% 60%; pointer-events: none; z-index: 1; } .sc-mode-btn:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.1) saturate(1.1); } .sc-mode-btn:active { transform: translateY(4px) scale(.97); filter: brightness(.9); } .sc-mode-wb { background: linear-gradient(170deg,#B388FF 0%,#7E57C2 30%,#5E35B1 65%,#4527A0 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(0,0,0,.25), 0 6px 0 #2A157D, 0 9px 22px rgba(94,53,177,.55); } .sc-mode-wb:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.48), inset 0 -3px 0 rgba(0,0,0,.28), 0 8px 0 #2A157D, 0 14px 30px rgba(94,53,177,.65); } .sc-mode-wb:active { box-shadow: inset 0 5px 8px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.1), 0 1px 0 #2A157D, 0 3px 10px rgba(94,53,177,.3); } .sc-mode-fix { background: linear-gradient(170deg,#FF6B6B 0%,#EF5350 30%,#D32F2F 65%,#B71C1C 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.40), inset 0 -3px 0 rgba(0,0,0,.25), 0 6px 0 #6D0000, 0 9px 22px rgba(198,40,40,.55); } .sc-mode-fix:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.46), inset 0 -3px 0 rgba(0,0,0,.28), 0 8px 0 #6D0000, 0 14px 30px rgba(198,40,40,.65); } .sc-mode-fix:active { box-shadow: inset 0 5px 8px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.1), 0 1px 0 #6D0000, 0 3px 10px rgba(198,40,40,.3); } .sc-mode-rev { background: linear-gradient(170deg,#64B5F6 0%,#42A5F5 30%,#1E88E5 65%,#1565C0 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.44), inset 0 -3px 0 rgba(0,0,0,.24), 0 6px 0 #0A3D7A, 0 9px 22px rgba(30,136,229,.55); } .sc-mode-rev:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.50), inset 0 -3px 0 rgba(0,0,0,.27), 0 8px 0 #0A3D7A, 0 14px 30px rgba(30,136,229,.65); } .sc-mode-rev:active { box-shadow: inset 0 5px 8px rgba(0,0,0,.3), inset 0 -1px 0 rgba(255,255,255,.1), 0 1px 0 #0A3D7A, 0 3px 10px rgba(30,136,229,.3); } /* Fun Zone green candy */ .sc-footer-btn, .sc-footer-btn:not(:hover):not(:active) { background: linear-gradient(170deg,#69F0AE 0%,#00E676 25%,#00C853 55%,#00962D 100%) !important; border: none !important; border-radius: 30px !important; font-size: clamp(.82rem,2.5vw,1rem) !important; font-weight: 900 !important; letter-spacing: .5px !important; padding: clamp(12px,2.5vh,16px) clamp(32px,6vw,52px) !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0,80,0,.4) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; box-shadow: inset 0 4px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.22), 0 8px 0 #005B16, 0 12px 30px rgba(0,180,50,.5) !important; transform: translateY(0) !important; transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s, filter .1s !important; } .sc-footer-btn::before { content: '' !important; position: absolute !important; top:0;left:0;right:0 !important; height:50% !important; background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 65%, transparent 100%) !important; border-radius: 30px 30px 60% 60% !important; pointer-events: none !important; z-index:1 !important; } .sc-footer-btn:hover { transform: translateY(-3px) scale(1.04) !important; filter: brightness(1.08) saturate(1.1) !important; box-shadow: inset 0 4px 0 rgba(255,255,255,.50), inset 0 -4px 0 rgba(0,0,0,.25), 0 11px 0 #005B16, 0 18px 36px rgba(0,180,50,.6) !important; } .sc-footer-btn:active { transform: translateY(6px) scale(.97) !important; filter: brightness(.9) !important; box-shadow: inset 0 6px 10px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.12), 0 2px 0 #005B16, 0 5px 14px rgba(0,180,50,.3) !important; } /* Saga FAB gold candy */ #saga-fab { background: linear-gradient(170deg,#FFE57F 0%,#FFD740 25%,#FFAB00 55%,#FF6D00 100%) !important; color: #2E1000 !important; border: 2px solid rgba(255,255,255,.6) !important; border-radius: 32px !important; font-weight: 900 !important; font-size: clamp(.76rem,2.2vw,.92rem) !important; padding: clamp(10px,2vh,13px) clamp(16px,3.5vw,22px) !important; text-shadow: 0 1px 3px rgba(255,255,255,.5) !important; position: relative !important; overflow: hidden !important; box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -4px 0 rgba(120,50,0,.28), 0 7px 0 #8B3A00, 0 11px 30px rgba(220,100,0,.55) !important; transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s, filter .1s !important; transform: translateY(0) !important; } #saga-fab::before { content: '' !important; position: absolute !important; top:0;left:0;right:0 !important; height:52% !important; background: linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.1) 65%, transparent 100%) !important; border-radius: 32px 32px 60% 60% !important; pointer-events: none !important; z-index:1 !important; } #saga-fab:hover { transform: scale(1.09) translateY(-2px) !important; filter: brightness(1.08) saturate(1.1) !important; box-shadow: inset 0 4px 0 rgba(255,255,255,.70), inset 0 -4px 0 rgba(120,50,0,.3), 0 9px 0 #8B3A00, 0 14px 36px rgba(220,100,0,.65) !important; } #saga-fab:active { transform: translateY(5px) scale(.96) !important; filter: brightness(.88) !important; box-shadow: inset 0 6px 10px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.18), 0 2px 0 #8B3A00, 0 5px 14px rgba(220,100,0,.3) !important; } #saga-fab-icon { font-size: clamp(1.15rem,3.4vw,1.45rem) !important; position:relative; z-index:3; } #saga-fab-text { position:relative; z-index:3; font-size: clamp(.76rem,2.2vw,.92rem); } /* ═══════════════════════════════════════════════════════ 🌐 LANGUAGE BUTTON — Fixed, always visible on dashboard ═══════════════════════════════════════════════════════ */ #sc-lang-btn { position: fixed; top: 12px; left: 12px; z-index: 9999; display: none; /* hidden during game, shown only on dashboard */ align-items: center; gap: 5px; padding: 7px 14px; border-radius: 22px; border: 2px solid rgba(255,255,255,.5); background: rgba(10, 20, 60, 0.75); color: #fff; font-weight: 800; font-size: .78rem; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .15s, box-shadow .15s, background .15s; letter-spacing: .3px; } /* Show only when dashboard is visible */ #dash-ov:not(.hidden) ~ #sc-lang-btn, #dash-ov.overlay-screen:not([style*="none"]) ~ #sc-lang-btn { display: flex; } /* Simpler: JS will toggle visibility */ #sc-lang-btn.sc-lang-visible { display: flex !important; } #sc-lang-btn:hover { background: rgba(30, 60, 140, 0.9); transform: scale(1.06); box-shadow: 0 6px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); } #sc-lang-btn:active { transform: scale(.94); box-shadow: 0 2px 8px rgba(0,0,0,.35); } /* ── play-modes — remove inline style dependency ── */ #play-modes { display: flex !important; gap: 8px !important; padding: 10px 10px 8px !important; flex-wrap: wrap !important; justify-content: center !important; background: rgba(0,0,0,.15) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; } /* ── sc-mode-btn (all 3 play mode buttons) ── */ .sc-mode-btn { flex: 1 !important; min-width: 70px !important; padding: clamp(10px,2.2vh,14px) 6px !important; border: none !important; border-radius: 18px !important; color: #fff !important; font-size: clamp(.68rem, 2vw, .82rem) !important; font-weight: 800 !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; letter-spacing: .3px !important; text-shadow: 0 1px 4px rgba(0,0,0,.35) !important; transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s, filter .1s !important; } .sc-mode-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52%; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 70%, transparent 100%); border-radius: 18px 18px 60% 60%; pointer-events: none; z-index: 1; } .sc-mode-btn:hover { transform: translateY(-3px) scale(1.04) !important; filter: brightness(1.1) saturate(1.1) !important; } .sc-mode-btn:active { transform: translateY(4px) scale(.97) !important; filter: brightness(.9) !important; } .sc-mode-wb { background: linear-gradient(170deg,#B388FF 0%,#7E57C2 30%,#5E35B1 65%,#4527A0 100%) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.42), inset 0 -3px 0 rgba(0,0,0,.25), 0 6px 0 #2A157D, 0 9px 22px rgba(94,53,177,.55) !important; } .sc-mode-wb:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.48), inset 0 -3px 0 rgba(0,0,0,.28), 0 8px 0 #2A157D, 0 14px 30px rgba(94,53,177,.65) !important; } .sc-mode-wb:active { box-shadow: inset 0 5px 8px rgba(0,0,0,.3), 0 1px 0 #2A157D !important; } .sc-mode-fix { background: linear-gradient(170deg,#FF6B6B 0%,#EF5350 30%,#D32F2F 65%,#B71C1C 100%) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.40), inset 0 -3px 0 rgba(0,0,0,.25), 0 6px 0 #6D0000, 0 9px 22px rgba(198,40,40,.55) !important; } .sc-mode-fix:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.46), inset 0 -3px 0 rgba(0,0,0,.28), 0 8px 0 #6D0000, 0 14px 30px rgba(198,40,40,.65) !important; } .sc-mode-fix:active { box-shadow: inset 0 5px 8px rgba(0,0,0,.3), 0 1px 0 #6D0000 !important; } .sc-mode-rev { background: linear-gradient(170deg,#64B5F6 0%,#42A5F5 30%,#1E88E5 65%,#1565C0 100%) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.44), inset 0 -3px 0 rgba(0,0,0,.24), 0 6px 0 #0A3D7A, 0 9px 22px rgba(30,136,229,.55) !important; } .sc-mode-rev:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.50), inset 0 -3px 0 rgba(0,0,0,.27), 0 8px 0 #0A3D7A, 0 14px 30px rgba(30,136,229,.65) !important; } .sc-mode-rev:active { box-shadow: inset 0 5px 8px rgba(0,0,0,.3), 0 1px 0 #0A3D7A !important; } /* जुने आणि निकामी पांढरे लँग्वेज बटण कायमचे लपवण्यासाठी */ #dash-lang-btn { display: none !important; } /* ════════════════════════════════════════════════════════ 🎯 5 PROPORTIONAL FIXES — Premium Dashboard Balance ════════════════════════════════════════════════════════ */ /* Fix 1: Level numbers — bigger, bolder, legible */ .dnode-num { font-family: 'Bubblegum Sans', cursive !important; font-size: clamp(1.0rem, 3.2vw, 1.35rem) !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; text-shadow: 0 2px 6px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.4) !important; position: relative !important; z-index: 7 !important; letter-spacing: -.5px !important; } /* Fix 1b: Balloon nodes — more convex 3D */ .dnode { box-shadow: inset -8px -7px 16px rgba(0,0,0,.18), inset 10px 10px 18px rgba(255,255,255,.45), 0 12px 32px rgba(0,0,0,.4), 0 5px 10px rgba(0,0,0,.25) !important; } /* Fix 2: Progress text — readable, prominent */ #dp-text { font-size: clamp(.78rem, 2.2vw, .92rem) !important; color: rgba(255,255,255,.92) !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0,0,0,.5) !important; letter-spacing: .2px !important; margin-top: 4px !important; } /* Fix 3: Saga FAB — compact but premium */ #saga-fab { padding: clamp(8px,1.6vh,11px) clamp(12px,2.8vw,18px) !important; font-size: clamp(.7rem, 2vw, .84rem) !important; border-radius: 28px !important; bottom: clamp(60px,10vh,80px) !important; right: 12px !important; } #saga-fab-icon { font-size: clamp(1rem, 2.8vw, 1.2rem) !important; } #saga-fab-text { font-size: clamp(.7rem, 2vw, .84rem) !important; } /* Fix 4: Fun Zone button — bigger, bouncy text */ .sc-footer-btn { font-size: clamp(1.0rem, 3vw, 1.25rem) !important; padding: clamp(12px,2.4vh,16px) clamp(28px,5.5vw,44px) !important; letter-spacing: .8px !important; } /* Fix 5: dp-bar — thicker, more visible */ #dp-bar { height: 10px !important; border-radius: 10px !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.35) !important; } #dp-fill { border-radius: 10px !important; box-shadow: 0 0 14px rgba(255,215,64,.7) !important; } #dash-prog-wrap { max-width: 300px !important; margin: 4px auto 0 !important; } /* ════════════════════════════════════════════════════════════════════ 🎪 MAGICAL CANDY OVERHAUL — Sound Catcher Dashboard v6 Theme: Magical Sky Carnival · Candy Glass · Musical Journey ════════════════════════════════════════════════════════════════════ */ /* ───── KEYFRAMES ───── */ @keyframes candyFloat { 0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(0deg);} 50%{transform:translate(-50%,-50%) translateY(-8px) rotate(1deg);} } @keyframes candyGlow { 0%{filter:drop-shadow(0 0 6px rgba(255,220,80,.5));} 100%{filter:drop-shadow(0 0 18px rgba(255,220,80,.9));} } @keyframes unlockPulse { 0%,100%{box-shadow:0 0 0 0 rgba(180,255,180,.4),0 8px 24px rgba(0,0,0,.35);} 50%{box-shadow:0 0 0 6px rgba(180,255,180,.15),0 8px 24px rgba(0,0,0,.35);} } @keyframes noteFloat { 0%{transform:translateY(0) rotate(-12deg) scale(1);opacity:.7;} 50%{transform:translateY(-14px) rotate(8deg) scale(1.1);opacity:1;} 100%{transform:translateY(0) rotate(-12deg) scale(1);opacity:.7;} } @keyframes starBurst { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.18);} } @keyframes lockedPulse { 0%,100%{opacity:.32;} 50%{opacity:.48;} } @keyframes fabPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,210,60,.5),0 6px 0 #7F3300,0 10px 24px rgba(200,80,0,.5);} 50%{box-shadow:0 0 0 8px rgba(255,210,60,.12),0 6px 0 #7F3300,0 10px 24px rgba(200,80,0,.5);} } @keyframes shimmerSlide { 0%,60%{left:-90%;} 75%{left:130%;} 100%{left:130%;} } @keyframes gradientShift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} } @keyframes balloonBob { 0%,100%{transform:translate(-50%,-50%) translateY(0) scaleX(1);} 40%{transform:translate(-50%,-50%) translateY(-5px) scaleX(1.03);} 70%{transform:translate(-50%,-50%) translateY(-3px) scaleX(.98);} } @keyframes musicDrift { 0%{transform:translate(-50%,-50%) translateY(0) rotate(-8deg) scale(1);opacity:.55;} 50%{transform:translate(-50%,-50%) translateY(-16px) rotate(10deg) scale(1.12);opacity:.85;} 100%{transform:translate(-50%,-50%) translateY(0) rotate(-8deg) scale(1);opacity:.55;} } /* ════ 1. MAGICAL BALLOONS — Nested Inner Candy Bubble ════ */ /* The dnode is the outer balloon shell — decorative glow + radial volume */ /* The dnode-num acts as the inner candy bubble */ .dnode { width: clamp(60px, 16vw, 76px) !important; height: clamp(72px, 20vw, 90px) !important; border-radius: 52% 52% 52% 52% / 40% 40% 60% 60% !important; overflow: visible !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s !important; animation: balloonBob 3.8s ease-in-out infinite !important; /* Outer shell — radial volume effect */ box-shadow: inset -8px -6px 18px rgba(0,0,0,.22), inset 10px 10px 20px rgba(255,255,255,.5), 0 14px 36px rgba(0,0,0,.38), 0 4px 8px rgba(0,0,0,.2) !important; } /* Each balloon gets random float phase via nth-child */ .dnode:nth-child(2n) { animation-delay: -.8s !important; } .dnode:nth-child(3n) { animation-delay: -1.6s !important; } .dnode:nth-child(4n) { animation-delay: -.4s !important; } /* Balloon shine — top-left radial highlight */ .dnode::before { content: '' !important; position: absolute !important; top: 8% !important; left: 12% !important; width: 32% !important; height: 36% !important; background: radial-gradient(ellipse, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 45%, transparent 75% ) !important; border-radius: 50% !important; transform: rotate(-25deg) !important; pointer-events: none !important; z-index: 8 !important; } /* Balloon knot */ .dnode::after { width: 9px !important; height: 9px !important; bottom: -9px !important; background: radial-gradient(circle, rgba(255,255,255,.4), rgba(0,0,0,.3)) !important; box-shadow: 0 2px 6px rgba(0,0,0,.4) !important; } /* ── The Inner Candy Bubble (dnode-num redesigned) ── */ .dnode-num { /* This becomes the inner candy bubble */ font-family: 'Bubblegum Sans', cursive !important; font-size: clamp(.88rem, 2.8vw, 1.1rem) !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; letter-spacing: -.3px !important; text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.3) !important; /* Inner bubble styling */ background: rgba(0,0,0,.28) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; border: 1.5px solid rgba(255,255,255,.35) !important; border-radius: 14px !important; padding: 2px 6px 3px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.35) !important; position: relative !important; z-index: 7 !important; min-width: 32px !important; text-align: center !important; } /* ── Unlocked balloons — vibrant with soft glow animation ── */ .dnode.unlocked { animation: balloonBob 3.8s ease-in-out infinite, unlockPulse 3s ease-in-out infinite !important; filter: saturate(1.1) brightness(1.05) !important; } .dnode.unlocked:hover { transform: translate(-50%,-50%) scale(1.15) !important; filter: saturate(1.3) brightness(1.12) drop-shadow(0 0 14px rgba(255,255,255,.4)) !important; animation: none !important; } .dnode.unlocked:active { transform: translate(-50%,-50%) scale(.88) !important; filter: brightness(.9) !important; } /* ── Current balloon — golden candy king ── */ .dnode.current { background: radial-gradient(ellipse at 38% 28%, #FFF9C4 0%, #FFD740 30%, #FF8F00 65%, #E65100 100% ) !important; border: 3px solid rgba(255,255,255,.85) !important; animation: balloonCurrentGlowV2 2s ease-in-out infinite alternate, balloonBob 3.2s ease-in-out infinite !important; z-index: 10 !important; filter: drop-shadow(0 0 16px rgba(255,210,0,.7)) !important; } .dnode.current .dnode-num { background: rgba(0,0,0,.32) !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; font-size: clamp(.92rem, 2.9vw, 1.15rem) !important; } /* ── Locked balloons — misty, ghostly ── */ .dnode.locked { animation: lockedPulse 4s ease-in-out infinite !important; filter: grayscale(.85) blur(.5px) !important; } /* ── Peek balloon ── */ .dnode.peek { animation: lockedPulse 3s ease-in-out infinite !important; filter: grayscale(.5) !important; } /* ── Player avatar ── */ .dnode-avatar { top: -44px !important; font-size: clamp(1.6rem, 5vw, 2.1rem) !important; animation: avatarFloatV2 1.8s ease-in-out infinite !important; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,220,80,.6)) !important; } /* ── Pulse ring ── */ .dnode-pulse { inset: -14px -12px -18px !important; border: 3px solid rgba(255,220,0,.75) !important; animation: balloonPulseV2 1.6s ease-out infinite !important; } /* ── Stars tag ── */ .dnode-stars { bottom: -28px !important; font-size: clamp(.6rem, 1.9vw, .75rem) !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)) !important; } /* ════ 2. MAGICAL MUSICAL PATH ════ */ /* Override straight road SVG with musical staff feel */ #path-container::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 100%; /* 5 horizontal dashed lines = musical staff */ background-image: repeating-linear-gradient( 180deg, transparent 0px, transparent 28px, rgba(255,255,255,.06) 28px, rgba(255,255,255,.06) 30px ); pointer-events: none; z-index: 1; } /* Musical notes floating over path */ .float-note { font-size: clamp(.9rem, 2.8vw, 1.2rem) !important; opacity: .65 !important; animation: musicDrift 4s ease-in-out infinite !important; color: rgba(255,255,255,.7) !important; text-shadow: 0 0 8px rgba(255,220,80,.6) !important; z-index: 3 !important; } .float-note:nth-child(2n) { animation-duration: 5.2s !important; animation-delay: -.8s !important; } .float-note:nth-child(3n) { animation-duration: 3.4s !important; animation-delay: -2s !important; } /* ════ 3. PROGRESS — Balloon Rider ════ */ #dash-prog-wrap { max-width: 320px !important; margin: 6px auto 0 !important; position: relative !important; } #dp-bar { height: 14px !important; border-radius: 10px !important; background: rgba(0,0,0,.25) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.1) !important; overflow: visible !important; position: relative !important; } #dp-fill { height: 100% !important; border-radius: 10px !important; background: linear-gradient(90deg, #FF6B35 0%, #FFD740 35%, #69F0AE 70%, #40C4FF 100% ) !important; background-size: 200% !important; animation: gradientShift 3s ease-in-out infinite !important; box-shadow: 0 0 16px rgba(255,215,64,.7), 0 2px 0 rgba(255,255,255,.2) !important; position: relative !important; } /* Balloon rider at the tip of the progress bar */ #dp-fill::after { content: '🎈'; position: absolute; right: -2px; top: -16px; font-size: 1.4rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); animation: candyFloat 2s ease-in-out infinite; pointer-events: none; } #dp-text { font-size: clamp(.72rem, 2vw, .88rem) !important; color: rgba(255,255,255,.88) !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(0,0,0,.5) !important; margin-top: 6px !important; letter-spacing: .2px !important; } /* ════ 4. COMPACT COMPASS FAB ════ */ #saga-fab { /* Compact circle */ width: clamp(52px, 13vw, 64px) !important; height: clamp(52px, 13vw, 64px) !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; bottom: clamp(70px,12vh,90px) !important; right: 14px !important; /* Gold candy */ background: radial-gradient(circle at 38% 32%, #FFF9C4, #FFD740 45%, #FF8F00 80%, #E65100 100% ) !important; color: #2E1000 !important; border: 2.5px solid rgba(255,255,255,.7) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.65), inset 0 -3px 0 rgba(120,50,0,.25), 0 6px 0 #7F3300, 0 10px 24px rgba(200,80,0,.5) !important; animation: fabPulse 2.5s ease-in-out infinite !important; transition: transform .15s cubic-bezier(.34,1.56,.64,1) !important; } #saga-fab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52%; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 100%); border-radius: 50%; pointer-events: none; } #saga-fab::after { display: none !important; } #saga-fab:hover { transform: scale(1.12) translateY(-3px) !important; } #saga-fab:active { transform: scale(.9) translateY(5px) !important; animation: none !important; } #saga-fab-icon { font-size: clamp(1.6rem, 4.5vw, 2rem) !important; position: relative; z-index: 3; } #saga-fab-text { display: none !important; } /* ════ 5. PLAY MODE BUTTONS — Supercell HUD Candy ════ */ #play-modes { display: flex !important; gap: 10px !important; padding: 12px 12px 10px !important; flex-wrap: wrap !important; justify-content: center !important; background: rgba(0,0,0,.18) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; } .sc-mode-btn { flex: 1 !important; min-width: 72px !important; padding: clamp(11px,2.5vh,15px) 8px !important; border: none !important; border-radius: 22px !important; color: #fff !important; font-family: 'Bubblegum Sans', cursive !important; font-size: clamp(.8rem, 2.3vw, .96rem) !important; font-weight: 800 !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; letter-spacing: .3px !important; text-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.2) !important; transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s, filter .1s !important; } /* Gloss highlight half-dome on ALL mode buttons */ .sc-mode-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52%; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.1) 60%, transparent 100% ); border-radius: 22px 22px 60% 60%; pointer-events: none; z-index: 1; } /* Shimmer on ALL */ .sc-mode-btn::after { content: ''; position: absolute; top: 0; left: -90%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg); animation: shimmerSlide 3.5s ease-in-out infinite; z-index: 2; } .sc-mode-btn:nth-child(2)::after { animation-delay: -1.2s; } .sc-mode-btn:nth-child(3)::after { animation-delay: -2.4s; } .sc-mode-btn:hover { transform: translateY(-4px) scale(1.05) !important; filter: brightness(1.12) saturate(1.15) !important; } .sc-mode-btn:active { transform: translateY(5px) scale(.96) !important; filter: brightness(.88) !important; } /* Word Bank — amethyst violet */ .sc-mode-wb { background: radial-gradient(ellipse at 40% 25%, #CE93D8, #9C27B0 40%, #6A1B9A 75%, #4A148C 100% ) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.42), inset 0 -4px 0 rgba(0,0,0,.3), 0 7px 0 #2A0060, 0 10px 26px rgba(106,27,154,.6), 0 0 0 1.5px rgba(206,147,216,.3) !important; } .sc-mode-wb:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.3), 0 9px 0 #2A0060, 0 16px 32px rgba(106,27,154,.7), 0 0 24px rgba(206,147,216,.3) !important; } .sc-mode-wb:active { box-shadow: inset 0 6px 10px rgba(0,0,0,.35), 0 1px 0 #2A0060 !important; } /* Fix Mistakes — cherry red */ .sc-mode-fix { background: radial-gradient(ellipse at 40% 25%, #EF9A9A, #E53935 40%, #C62828 75%, #8B0000 100% ) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.40), inset 0 -4px 0 rgba(0,0,0,.3), 0 7px 0 #560000, 0 10px 26px rgba(198,40,40,.6), 0 0 0 1.5px rgba(239,154,154,.3) !important; } .sc-mode-fix:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.48), inset 0 -4px 0 rgba(0,0,0,.3), 0 9px 0 #560000, 0 16px 32px rgba(198,40,40,.7), 0 0 24px rgba(239,154,154,.3) !important; } .sc-mode-fix:active { box-shadow: inset 0 6px 10px rgba(0,0,0,.35), 0 1px 0 #560000 !important; } /* Revision — sapphire blue */ .sc-mode-rev { background: radial-gradient(ellipse at 40% 25%, #90CAF9, #1E88E5 40%, #1565C0 75%, #0A3D7A 100% ) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.44), inset 0 -4px 0 rgba(0,0,0,.3), 0 7px 0 #052060, 0 10px 26px rgba(30,136,229,.6), 0 0 0 1.5px rgba(144,202,249,.3) !important; } .sc-mode-rev:hover { box-shadow: inset 0 3px 0 rgba(255,255,255,.52), inset 0 -4px 0 rgba(0,0,0,.3), 0 9px 0 #052060, 0 16px 32px rgba(30,136,229,.7), 0 0 24px rgba(144,202,249,.3) !important; } .sc-mode-rev:active { box-shadow: inset 0 6px 10px rgba(0,0,0,.35), 0 1px 0 #052060 !important; } /* ════ 6. FUN ZONE — Vibrant Lime Green ════ */ .sc-footer-btn, .sc-footer-btn:not(:hover):not(:active) { background: radial-gradient(ellipse at 40% 28%, #CCFF90 0%, #76FF03 30%, #00E676 60%, #00A040 100% ) !important; border: none !important; border-radius: 32px !important; font-family: 'Bubblegum Sans', cursive !important; font-size: clamp(1.05rem, 3.2vw, 1.3rem) !important; font-weight: 900 !important; letter-spacing: .8px !important; padding: clamp(13px,2.6vh,17px) clamp(30px,6vw,50px) !important; color: #003300 !important; text-shadow: 0 1px 0 rgba(255,255,255,.5) !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; box-shadow: inset 0 4px 0 rgba(255,255,255,.55), inset 0 -5px 0 rgba(0,0,0,.22), 0 8px 0 #005010, 0 14px 32px rgba(0,200,80,.5) !important; transform: translateY(0) !important; transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s !important; } .sc-footer-btn::before { content: '' !important; position: absolute !important; top: 0; left: 0; right: 0 !important; height: 50% !important; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5) 0%, transparent 75%) !important; border-radius: 32px 32px 60% 60% !important; pointer-events: none !important; z-index: 1 !important; } .sc-footer-btn::after { content: '' !important; position: absolute !important; top: 0; left: -90% !important; width: 55% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent) !important; transform: skewX(-18deg) !important; animation: shimmerSlide 3s ease-in-out infinite !important; z-index: 2 !important; } .sc-footer-btn:hover { transform: translateY(-3px) scale(1.05) !important; filter: brightness(1.08) !important; box-shadow: inset 0 4px 0 rgba(255,255,255,.6), inset 0 -5px 0 rgba(0,0,0,.22), 0 11px 0 #005010, 0 20px 40px rgba(0,200,80,.6) !important; } .sc-footer-btn:active { transform: translateY(7px) scale(.97) !important; filter: brightness(.88) !important; box-shadow: inset 0 7px 12px rgba(0,0,0,.3), 0 1px 0 #005010 !important; } /* ════ 7. LANG BUTTON — glassmorphic ════ */ #sc-lang-btn { background: rgba(10, 20, 60, 0.72) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1.5px solid rgba(255,255,255,.35) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) !important; font-family: 'Bubblegum Sans', cursive !important; font-size: .8rem !important; letter-spacing: .4px !important; } /* ══════════════════════════════════════════════════════ 🔧 3 SURGICAL FIXES — Clean, 3D, Professional ══════════════════════════════════════════════════════ */ /* FIX 1: dnode-num — clean pill, no ugly shadows */ .dnode-num { font-family: 'Bubblegum Sans', cursive !important; font-size: clamp(.72rem, 2.2vw, .88rem) !important; font-weight: 900 !important; color: #fff !important; line-height: 1.2 !important; letter-spacing: 0 !important; /* Soft dark pill behind number — clean, readable on any balloon color */ background: rgba(0, 0, 0, .36) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 10px !important; padding: 2px 7px 3px !important; /* NO text-shadow — clean white text on dark pill */ text-shadow: none !important; box-shadow: none !important; position: relative !important; z-index: 7 !important; min-width: 28px !important; text-align: center !important; } .dnode.current .dnode-num { background: rgba(0,0,0,.40) !important; border-color: rgba(255,255,255,.35) !important; font-size: clamp(.75rem, 2.3vw, .92rem) !important; text-shadow: none !important; } /* FIX 2: Saga FAB — pill shape, text visible, z-index fix */ #saga-fab { /* Pill shape, not circle */ width: auto !important; height: auto !important; border-radius: 32px !important; padding: clamp(9px,1.8vh,12px) clamp(14px,3.2vw,20px) !important; display: flex !important; align-items: center !important; gap: 7px !important; bottom: clamp(65px,11vh,85px) !important; right: 14px !important; /* Gold candy — kept from before */ background: radial-gradient(ellipse at 38% 30%, #FFF9C4, #FFD740 40%, #FF8F00 72%, #E65100 100% ) !important; color: #2E1000 !important; border: 2px solid rgba(255,255,255,.65) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(120,50,0,.25), 0 5px 0 #7F3300, 0 8px 22px rgba(200,80,0,.5) !important; /* Fix click: ensure pointer-events and z-index */ z-index: 100 !important; pointer-events: all !important; cursor: pointer !important; animation: fabPulse 2.5s ease-in-out infinite !important; transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s !important; font-family: 'Bubblegum Sans', cursive !important; font-weight: 900 !important; } #saga-fab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, transparent 100%); border-radius: 32px 32px 50% 50%; pointer-events: none; z-index: 1; } #saga-fab::after { display: none !important; } #saga-fab:hover { transform: scale(1.07) translateY(-2px) !important; animation: none !important; } #saga-fab:active { transform: scale(.94) translateY(5px) !important; box-shadow: inset 0 4px 8px rgba(0,0,0,.2), 0 2px 0 #7F3300 !important; } /* Icon — target emoji, compact */ #saga-fab-icon { font-size: clamp(1.1rem, 3vw, 1.3rem) !important; position: relative !important; z-index: 3 !important; display: inline-block !important; line-height: 1 !important; } /* Text — SHOW it with Level number */ #saga-fab-text { display: inline !important; font-size: clamp(.72rem, 2.1vw, .86rem) !important; font-weight: 900 !important; color: #2E1000 !important; text-shadow: 0 1px 2px rgba(255,255,255,.4) !important; position: relative !important; z-index: 3 !important; white-space: nowrap !important; } /* FIX 3: Fun Zone button — compact, clean 3D candy */ .sc-footer-btn, .sc-footer-btn:not(:hover):not(:active) { /* Compact size */ font-size: clamp(.88rem, 2.6vw, 1.05rem) !important; padding: clamp(11px,2.2vh,14px) clamp(24px,5vw,40px) !important; border-radius: 28px !important; letter-spacing: .5px !important; font-family: 'Bubblegum Sans', cursive !important; font-weight: 900 !important; /* Clean green gradient */ background: linear-gradient(160deg, #81C784 0%, #43A047 35%, #2E7D32 75%, #1B5E20 100%) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.3) !important; border: none !important; position: relative !important; overflow: hidden !important; cursor: pointer !important; /* 3D candy: top white inset + bottom dark inset + colored drop */ box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.22), 0 6px 0 #0D3B0D, 0 10px 24px rgba(46,125,50,.5) !important; transform: translateY(0) !important; transition: transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s !important; } /* Gloss */ .sc-footer-btn::before { content: '' !important; position: absolute !important; top: 0; left: 0; right: 0 !important; height: 48% !important; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 65%, transparent 100% ) !important; border-radius: 28px 28px 55% 55% !important; pointer-events: none !important; z-index: 1 !important; } .sc-footer-btn::after { content: '' !important; position: absolute !important; top: 0; left: -90% !important; width: 55% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent) !important; transform: skewX(-18deg) !important; animation: shimmerSlide 3s ease-in-out infinite !important; z-index: 2 !important; } .sc-footer-btn:hover { transform: translateY(-2px) scale(1.04) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,0,.22), 0 8px 0 #0D3B0D, 0 14px 30px rgba(46,125,50,.6) !important; } .sc-footer-btn:active { transform: translateY(5px) scale(.97) !important; box-shadow: inset 0 5px 8px rgba(0,0,0,.25), inset 0 -1px 0 rgba(255,255,255,.1), 0 1px 0 #0D3B0D, 0 3px 10px rgba(46,125,50,.3) !important; } /* ── Fix: dnode-num — remove dark box, clean text-shadow only ── */ .dnode-num { background: transparent !important; border: none !important; box-shadow: none !important; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.4) !important; padding: 0 !important; min-width: unset !important; } .dnode.current .dnode-num { background: transparent !important; border: none !important; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.4) !important; } /* ── Fix: dnode-avatar — more breathing space above number ── */ .dnode-avatar { top: -58px !important; } /* ── Trophy/Avatar — move further up ── */ .dnode-avatar { top: -72px !important; } /* ── FINAL: Trophy position — highest specificity win ── */ #day-nodes .dnode-avatar, #dash-wrap .dnode-avatar, .dnode-avatar { top: -80px !important; } /* ── Fix avatar: back close to balloon ── */ #day-nodes .dnode-avatar, #dash-wrap .dnode-avatar, .dnode-avatar { top: -42px !important; } /* ── Fix inner trophy: push up, breathing space from number ── */ .dnode-icon-top { margin-bottom: 6px !important; transform: translateY(-3px) !important; }