*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
body{margin:0;overflow:hidden;font-family:Arial,sans-serif;touch-action:none;background:#0b0d17;display:flex;justify-content:center}
#game{position:relative;width:100%;max-width:480px;height:100vh;overflow:hidden;background:linear-gradient(to bottom,#168cff 0%,#55d8ff 55%,#c5f5ff 100%);box-shadow:0 0 80px rgba(0,0,0,.55)}
#game::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.28) 0%,transparent 12%,transparent 88%,rgba(0,0,0,.22) 100%),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.18) 100%)}
.sun{position:absolute;width:90px;height:90px;right:10%;top:9%;border-radius:50%;background:#fff36b;box-shadow:0 0 30px #fff36b,0 0 70px #ffe85c;animation:sunPulse 3s infinite alternate;z-index:2}
@keyframes sunPulse{from{transform:scale(1)}to{transform:scale(1.08)}}
.sunRays{position:absolute;width:90px;height:90px;right:10%;top:9%;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,243,107,.4) 0deg,transparent 18deg,rgba(255,243,107,.4) 36deg,transparent 54deg,rgba(255,243,107,.4) 72deg,transparent 90deg,rgba(255,243,107,.4) 108deg,transparent 126deg,rgba(255,243,107,.4) 144deg,transparent 162deg,rgba(255,243,107,.4) 180deg,transparent 198deg,rgba(255,243,107,.4) 216deg,transparent 234deg,rgba(255,243,107,.4) 252deg,transparent 270deg,rgba(255,243,107,.4) 288deg,transparent 306deg,rgba(255,243,107,.4) 324deg,transparent 342deg,rgba(255,243,107,.4) 360deg);z-index:1;transform:scale(2.6);animation:sunRaysSpin 40s linear infinite;pointer-events:none;opacity:.65}
@keyframes sunRaysSpin{to{transform:scale(2.6) rotate(360deg)}}
.cloud{position:absolute;width:130px;height:45px;background:rgba(255,255,255,.85);border-radius:50px;animation:cloudMove 25s linear infinite;z-index:3}
.cloud::before,.cloud::after{content:"";position:absolute;background:rgba(255,255,255,.9);border-radius:50%}
.cloud::before{width:65px;height:65px;left:20px;bottom:10px}
.cloud::after{width:80px;height:80px;right:15px;bottom:5px}
.cloud1{top:15%;left:-180px}.cloud2{top:32%;left:-300px;transform:scale(.7);animation-delay:8s}
.cloud3{top:8%;left:-200px;transform:scale(.5);animation-delay:4s;opacity:.8}
.cloud4{top:24%;left:-260px;transform:scale(.85);animation-delay:16s;opacity:.9}
@keyframes cloudMove{from{left:-250px}to{left:120%}}

#startScreen{position:absolute;inset:0;width:100%;height:100%;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:34px 24px;text-align:center;background:radial-gradient(circle at 50% 15%,#1c3fa8 0%,#0d1a4d 55%,#060a24 100%);overflow:hidden;transition:opacity .5s ease,transform .5s ease}
#startScreen.hide{opacity:0;transform:scale(1.06);pointer-events:none}
.startGlow{position:absolute;top:-18%;left:50%;transform:translateX(-50%);width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,225,0,.35),transparent 70%);z-index:0;animation:glowPulse 4s ease-in-out infinite alternate;pointer-events:none}
@keyframes glowPulse{from{opacity:.55;transform:translateX(-50%) scale(1)}to{opacity:1;transform:translateX(-50%) scale(1.08)}}
.startCoin{position:absolute;font-size:34px;opacity:.4;filter:drop-shadow(0 0 8px #ffe600);z-index:0;animation:coinDrift 6s ease-in-out infinite;pointer-events:none}
.startCoin1{top:10%;left:10%;animation-delay:0s}
.startCoin2{top:16%;right:8%;animation-delay:1.5s;font-size:26px}
.startCoin3{bottom:32%;left:14%;animation-delay:3s;font-size:22px}
@keyframes coinDrift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(18deg)}}
.startTitle{position:relative;z-index:1;margin:0;font-size:clamp(28px,8.5vw,44px);line-height:1.12;font-weight:900;color:#fff;text-shadow:0 0 12px #fff,0 0 28px #ffd000,0 0 55px #ff9d00;letter-spacing:1px}
.startTitle span{display:block;font-size:.72em;background:linear-gradient(90deg,#ffe600,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,180,0,.65))}
.startTagline{position:relative;z-index:1;margin:0;color:#cfe0ff;font-size:14px;font-weight:600;letter-spacing:.3px}
.rulesCard{position:relative;z-index:1;width:100%;max-width:340px;background:rgba(10,15,40,.55);border:2px solid rgba(255,255,255,.22);border-radius:20px;padding:16px 18px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.rulesTitle{color:#ffe600;font-weight:900;font-size:12px;letter-spacing:2.5px;margin-bottom:10px}
.rulesList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left}
.rulesList li{color:#eef2ff;font-size:12.5px;line-height:1.4;display:flex;align-items:flex-start;gap:8px}
.ruleIcon{flex:0 0 auto;font-size:15px}
/* The last line in the list is a tease, not an instruction, so it gets a rule above
   it and its own colour rather than sitting in with the how-to. */
.ruleSecret{margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
 color:#7ef0ff!important;font-weight:800;text-shadow:0 0 9px rgba(126,240,255,.5);
 animation:ruleSecretGlow 2.6s ease-in-out infinite}
@keyframes ruleSecretGlow{0%,100%{opacity:.82}50%{opacity:1}}
#startButton{position:relative;z-index:1;border:2px solid white;border-radius:18px;padding:14px 46px;font-size:19px;font-weight:900;letter-spacing:1px;color:white;background:linear-gradient(145deg,#ffea00,#ff6a00);box-shadow:0 0 20px #ffea00,0 8px 20px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.5);cursor:pointer;animation:startPulse 1.8s ease-in-out infinite}
@keyframes startPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#tutorialButton{position:relative;z-index:1;border:2px solid white;border-radius:14px;padding:10px 28px;font-size:14px;font-weight:900;letter-spacing:1px;color:white;background:linear-gradient(145deg,#ffea00,#ff6a00);box-shadow:0 0 12px rgba(255,180,0,.6),0 5px 14px rgba(0,0,0,.4);cursor:pointer}

#scoreBox,#moneyBox,#timer{position:absolute;top:15px;padding:9px 13px;color:white;font-size:clamp(13px,4.6vw,18px);font-weight:bold;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.55);border-radius:14px;backdrop-filter:blur(10px);z-index:50}
#scoreBox{left:15px}#timer{right:15px}
/* Money grows without bound as the player earns, so this box is sized in % of the
   game (not fixed px) and kept short of the timer, and its text scales down rather
   than sliding underneath the timer the way a fixed-width box did. */
#moneyBox{left:34%;color:#fff36b;padding:9px 10px;font-size:clamp(12px,4.1vw,16px);max-width:39%}
/* Clip the amount, not the box: the floating +$ popup is a child of the box and
   rises above it, so the box itself must not have overflow:hidden. */
#moneyAmount{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moneyPopup{position:absolute;left:50%;top:0;transform:translate(-50%,0) scale(.8);color:#3aeb98;font-size:15px;font-weight:900;text-shadow:0 2px 5px rgba(0,0,0,.6);pointer-events:none;z-index:60;white-space:nowrap;animation:moneyPopupFloat .9s ease-out forwards}
.moneyPopup.spend{color:#ff5252}
/* The money box sits ~15px from the top, so the popup only has that much headroom.
   It floats a short way and fades, rather than sliding off the top of the screen. */
@keyframes moneyPopupFloat{0%{opacity:0;transform:translate(-50%,2px) scale(.8)}18%{opacity:1;transform:translate(-50%,-3px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-14px) scale(1)}}
#levelBox{position:absolute;top:54px;left:19px;color:#fff;font-size:11px;font-weight:bold;letter-spacing:1px;opacity:.8;z-index:50;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#puzzleBox{position:absolute;top:54px;right:19px;color:#7fffb0;font-size:11px;font-weight:bold;letter-spacing:1px;opacity:.9;z-index:50;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.emerald{position:absolute;width:14px;height:14px;background:linear-gradient(145deg,#7fffb0,#00c853);border:2px solid #d4ffe0;box-shadow:0 0 10px #00ff88,0 0 18px #00c853;transform:rotate(45deg);z-index:16;animation:emeraldPulse 1.4s ease-in-out infinite alternate}
@keyframes emeraldPulse{from{transform:rotate(45deg) scale(1)}to{transform:rotate(45deg) scale(1.15)}}
.emeraldPopup{position:absolute;left:50%;top:35%;transform:translate(-50%,0);color:#3aeb98;font-size:16px;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none;z-index:70;white-space:nowrap;animation:emeraldPopupFloat 1.8s ease-out forwards}
@keyframes emeraldPopupFloat{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}
#menuButton{position:absolute;top:165px;right:15px;z-index:950;border:2px solid rgba(255,255,255,.7);border-radius:10px;padding:4px 10px;font-size:11px;font-weight:bold;color:white;background:linear-gradient(145deg,#555,#222);box-shadow:0 3px 10px rgba(0,0,0,.35);cursor:pointer}
.timerDanger{background:rgba(255,0,0,.6)!important;animation:timerShake.2s infinite alternate}
@keyframes timerShake{from{transform:scale(1.05) rotate(-2deg)}to{transform:scale(1.05) rotate(2deg)}}

#shopButton{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:70;border:2px solid white;border-radius:14px;padding:8px 16px;font-size:14px;font-weight:bold;color:white;background:linear-gradient(145deg,#ffb300,#ff6d00);box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
#rebirthButton{position:absolute;top:70px;right:6px;z-index:70;border:2px solid white;border-radius:14px;padding:8px 12px;font-size:13px;font-weight:bold;color:white;background:linear-gradient(145deg,#a000ff,#00d4ff);box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}

#statusButton{position:absolute;top:70px;left:6px;z-index:70;border:2px solid white;border-radius:14px;padding:8px 14px;font-size:13px;font-weight:bold;color:white;background:linear-gradient(145deg,#8892b0,#4a5170);box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
#realShopButton{position:absolute;top:160px;left:6px;z-index:70;border:2px solid white;border-radius:13px;padding:7px 10px;font-size:12px;font-weight:bold;color:white;background:linear-gradient(145deg,#4a4a4a,#111);box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
#puzzleButton{position:absolute;top:160px;left:126px;z-index:70;border:2px solid white;border-radius:13px;padding:7px 10px;font-size:12px;font-weight:bold;color:white;background:linear-gradient(145deg,#3aeb98,#127a4a);box-shadow:0 0 12px rgba(58,235,152,.5),0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
#diamondRebirthButton{display:none;position:absolute;top:205px;left:6px;z-index:70;border:2px solid white;border-radius:13px;padding:7px 10px;font-size:12px;font-weight:bold;color:white;background:linear-gradient(145deg,#7ef0ff,#0055aa);box-shadow:0 0 14px rgba(126,240,255,.7),0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
#diamondRebirthButton.show{display:block}
#bigBangButton{display:none;position:absolute;top:250px;left:6px;z-index:70;border:2px solid white;border-radius:13px;padding:7px 12px;font-size:12px;font-weight:bold;color:white;background:linear-gradient(145deg,#ffb347,#ff2d6f 55%,#8000ff);box-shadow:0 0 16px rgba(255,90,160,.75),0 5px 15px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap;animation:bigBangPulse 2.2s ease-in-out infinite}
#bigBangButton.show{display:block}
@keyframes bigBangPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* Each world button used to be pinned at its own distance from the right edge, which
   ran the seventh one off a small phone. They now share one right-aligned row that
   closes up around whichever worlds are open, and the buttons shrink with the screen.
   row-reverse keeps the old left-to-right order: newest world furthest from the edge. */
#worldRow{position:absolute;top:115px;left:6px;right:6px;z-index:70;display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:5px;pointer-events:none}
.worldBtn{flex:0 0 auto;pointer-events:auto;border:2px solid white;border-radius:12px;padding:7px clamp(5px,2.2vw,10px);font-size:clamp(12px,4vw,15px);font-weight:bold;color:white;box-shadow:0 5px 15px rgba(0,0,0,.3);cursor:pointer;display:none}
#overworldButton{background:linear-gradient(145deg,#00c853,#009624)}
#desertButton{background:linear-gradient(145deg,#ff8c00,#c85000)}
#snowButton{background:linear-gradient(145deg,#5bd9ff,#0050b3)}
#volcanoButton{background:linear-gradient(145deg,#ff2200,#8a0000)}
#spaceButton{background:linear-gradient(145deg,#7b00ff,#000)}
#matrixButton{background:linear-gradient(145deg,#00ff41,#003300)}
#memoryButton{background:linear-gradient(145deg,#ffd6f5,#7b3fa0 55%,#2a0b3d)}
.worldBtn.show{display:block}

.ground{position:absolute;bottom:0;width:100%;height:120px;background:linear-gradient(to bottom,#43d342,#249b2a 20%,#126b1c);box-shadow:inset 0 12px 0 #73f05d;z-index:5}
.grass{position:absolute;top:-10px;width:100%;height:15px;background:repeating-linear-gradient(90deg,#4df04b 0px,#4df04b 8px,#27b82f 8px,#27b82f 16px)}

.coin{position:absolute;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffbc2,#ffe600 30%,#ffae00 70%,#ff7300);border:3px solid #fff176;box-shadow:0 0 10px #fff000,0 0 25px #ffbb00;z-index:15;animation:coinFloat.9s ease-in-out infinite alternate}
.coin::after{content:"$";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#d17b00;font-size:18px;font-weight:bold}
@keyframes coinFloat{from{transform:translateY(0) rotateY(0deg)}to{transform:translateY(-8px) rotateY(180deg)}}

.player{position:absolute;left:100px;bottom:120px;width:50px;height:90px;z-index:20;filter:drop-shadow(0 7px 4px rgba(0,0,0,.25))}
.head{position:absolute;width:34px;height:34px;left:8px;top:0;background:radial-gradient(circle at 35% 30%,#ffe0bd,#f4b183);border-radius:50%;border:2px solid #d98d62}
.head::before{content:"";position:absolute;width:35px;height:15px;left:-2px;top:-4px;background:#3a2416;border-radius:50% 50% 30% 30%}
.head::after{content:"• •";position:absolute;top:12px;left:7px;color:#222;font-size:10px;letter-spacing:4px}
.body{position:absolute;width:30px;height:38px;left:10px;top:34px;background:linear-gradient(90deg,#2454ff,#4f82ff,#173bce);border-radius:8px 8px 5px 5px;border:2px solid #1230a5}
.arms{position:absolute;width:50px;height:9px;left:0;top:40px;background:#f4b183;border-radius:10px}
.legs{position:absolute;left:11px;top:70px;display:flex;gap:7px}.leg{width:11px;height:25px;background:linear-gradient(90deg,#252525,#555,#181818);border-radius:4px 4px 7px 7px}

/* SKINS - CORRECT WITH SPACE */
.player.ninja .head{background:#222;border-color:#000}.player.ninja .head::before{background:#111}.player.ninja .body{background:linear-gradient(90deg,#111,#444,#111);border-color:#000}.player.ninja .arms{background:#222}.player.ninja .leg{background:#111}
.player.robot .head{background:#ddd;border-color:#555}.player.robot .body{background:linear-gradient(90deg,#777,#ddd,#777);border-color:#444}.player.robot .arms{background:#999}.player.robot .leg{background:#666}
.player.alien .head{background:#8f0;border-color:#440088}.player.alien .head::before{background:#440088}.player.alien .body{background:linear-gradient(90deg,#8b31ff,#d36aff,#6d1bd1);border-color:#5510a5}.player.alien .arms{background:#8f0}.player.alien .leg{background:#5a0}
.player.gold .head{background:#ffcc00;border-color:#b87900}.player.gold .body{background:linear-gradient(90deg,#b87900,#fff06a,#c88700);border-color:#9b6500}.player.gold .arms{background:#ffcc00}.player.gold .leg{background:#b87900}
.player.shadow{filter:drop-shadow(0 0 12px #9900ff)}.player.shadow .head{background:#111;border-color:#7600c9}.player.shadow .body{background:linear-gradient(90deg,#090909,#3d174f,#090909);border-color:#7600c9}.player.shadow .arms{background:#222}.player.shadow .leg{background:#111}
.player.fire{filter:drop-shadow(0 0 15px #ff5100)}.player.fire .head{background:#ff4400;border-color:#8b0000}.player.fire .body{background:linear-gradient(90deg,#8b0000,#ff4500,#ffb000);border-color:#8b0000}.player.fire .arms{background:#ff4400}.player.fire .leg{background:#8b0000}
.player.galaxy{filter:drop-shadow(0 0 15px #00eaff)}.player.galaxy .head{background:#09002a;border-color:#00eaff}.player.galaxy .body{background:linear-gradient(135deg,#09002a,#6d20c9,#00c8ff,#13002d);border-color:#00eaff}.player.galaxy .arms{background:#6d20c9}.player.galaxy .leg{background:#09002a}
.player.mummy .head{background:#e8d9b5;border-color:#8a7450}.player.mummy .body{background:repeating-linear-gradient(0deg,#e8d9b5,#e8d9b5 5px,#c9b896 5px,#c9b896 7px);border-color:#8a7450}.player.mummy .arms{background:#e8d9b5}.player.mummy .leg{background:#c9b896}
.player.pharaoh .head{background:#ffd700;border-color:#b89600}.player.pharaoh .body{background:linear-gradient(90deg,#ffd700,#fff,#ffd700);border-color:#b89600}.player.pharaoh .arms{background:#ffd700}.player.pharaoh .leg{background:#b89600}
.player.scorpion .head{background:#111;border-color:#ffcc00}.player.scorpion .body{background:#111;border-color:#ffcc00}.player.scorpion .arms{background:#ffcc00}.player.scorpion .leg{background:#111}
.player.sandstorm{filter:drop-shadow(0 0 10px #ffae00)}.player.sandstorm .head{background:#ffeab0;border-color:#c9a86a}.player.sandstorm .body{background:linear-gradient(90deg,#c9a86a,#ffeab0,#c9a86a);border-color:#c9a86a}.player.sandstorm .arms{background:#ffeab0}.player.sandstorm .leg{background:#c9a86a}
.player.anubis .head{background:#111;border-color:#ffd700}.player.anubis .body{background:linear-gradient(90deg,#111,#333,#111);border-color:#ffd700}.player.anubis .arms{background:#111}.player.anubis .leg{background:#333}
.player.yeti .head{background:#fff;border-color:#aaddff}.player.yeti .body{background:#fff;border-color:#cceaff}.player.yeti .arms{background:#fff}.player.yeti .leg{background:#cceaff}
.player.penguin .head{background:#111;border-color:#fff}.player.penguin .body{background:#111;border-color:#ffcc00}.player.penguin .arms{background:#ffcc00}.player.penguin .leg{background:#111}
.player.iceking .head{background:#aaf;border-color:#00aaff}.player.iceking .body{background:linear-gradient(90deg,#00eaff,#fff,#00eaff);border-color:#00aaff}.player.iceking .arms{background:#aaf}.player.iceking .leg{background:#00aaff}
.player.frost .head{background:#b0ffff;border-color:#fff}.player.frost .body{background:linear-gradient(135deg,#b0ffff,#0066ff);border-color:#fff}.player.frost .arms{background:#b0ffff}.player.frost .leg{background:#0066ff}
.player.blizzard{filter:drop-shadow(0 0 15px white)}.player.blizzard .head{background:#001133;border-color:#fff}.player.blizzard .body{background:linear-gradient(90deg,#001133,#66ccff,#001133);border-color:#fff}.player.blizzard .arms{background:#66ccff}.player.blizzard .leg{background:#001133}
.player.magma .head{background:#ff2200;border-color:#ffff00}.player.magma .body{background:linear-gradient(90deg,#ff0000,#ffff00,#ff0000);border-color:#ff6600}.player.magma .arms{background:#ff6600}.player.magma .leg{background:#ff0000}
.player.dragon .head{background:#ff2200;border-color:#ffae00}.player.dragon .body{background:linear-gradient(90deg,#8a0000,#ff0000,#550000);border-color:#ffae00}.player.dragon .arms{background:#ff2200}.player.dragon .leg{background:#8a0000}
.player.lava .head{background:#ff4400;border-color:#ffff00}.player.lava .body{background:#ff4400;border-color:yellow}.player.lava .arms{background:#ffae00}.player.lava .leg{background:#ff2200}
.player.inferno{filter:drop-shadow(0 0 20px #ff0000)}.player.inferno .head{background:#000;border-color:#ff0000}.player.inferno .body{background:linear-gradient(135deg,#000,#ff0000,#ffff00,#000);border-color:#ff0000}.player.inferno .arms{background:#ff0000}.player.inferno .leg{background:#000}
.player.ashgod{filter:drop-shadow(0 0 25px #ff6600)}.player.ashgod .head{background:#222;border-color:#ffae00}.player.ashgod .body{background:linear-gradient(90deg,#111,#444,#ff4400,#111);border-color:#ffae00}.player.ashgod .arms{background:#444}.player.ashgod .leg{background:#111}
.player.astro .head{background:#fff;border-color:#aaa}.player.astro .body{background:#fff;border-color:#aaa}.player.astro .arms{background:#fff}.player.astro .leg{background:#aaa}
.player.alien2 .head{background:#00ff00;border-color:#003300}.player.alien2 .body{background:linear-gradient(90deg,#00ff00,#003300);border-color:#0f0}.player.alien2 .arms{background:#00ff00}.player.alien2 .leg{background:#003300}
.player.ufo{filter:drop-shadow(0 0 20px #00ff00)}.player.ufo .head{background:#333;border-color:#00ff88}.player.ufo .body{background:linear-gradient(90deg,#333,#00ff88,#333);border-color:#00ff88}.player.ufo .arms{background:#00ff88}.player.ufo .leg{background:#333}
.player.nebula{filter:drop-shadow(0 0 25px #ff00ff)}.player.nebula .head{background:#ff00ff;border-color:#00ffff}.player.nebula .body{background:linear-gradient(135deg,#ff00ff,#00ffff,#ff00ff);border-color:#ff00ff}.player.nebula .arms{background:#ff00ff}.player.nebula .leg{background:#00ffff}
.player.cosmos{filter:drop-shadow(0 0 30px white)}.player.cosmos .head{background:#000;border-color:#fff}.player.cosmos .body{background:linear-gradient(90deg,#000,#fff,#000,#7b00ff,#000);border-color:#fff}.player.cosmos .arms{background:#fff}.player.cosmos .leg{background:#000}
.player.hacker .head{background:#111;border-color:#00ff41}.player.hacker .body{background:linear-gradient(180deg,#003300,#001a00)}.player.hacker .arms{background:#00ff41}.player.hacker .leg{background:#111}
.player.glitch{filter:drop-shadow(0 0 14px #00ff41)}.player.glitch .head{background:#000;border-color:#39ff14}.player.glitch .body{background:repeating-linear-gradient(45deg,#39ff14 0px,#39ff14 4px,#000 4px,#000 8px)}.player.glitch .arms{background:#39ff14}.player.glitch .leg{background:#000}
.player.firewall{filter:drop-shadow(0 0 16px #ff5500)}.player.firewall .head{background:#1a0500;border-color:#ff5500}.player.firewall .body{background:linear-gradient(180deg,#ff5500,#661a00)}.player.firewall .arms{background:#ff8800}.player.firewall .leg{background:#1a0500}
.player.cipher{filter:drop-shadow(0 0 18px #ffd700)}.player.cipher .head{background:#2a0a40;border-color:#ffd700}.player.cipher .body{background:linear-gradient(90deg,#6a00b3,#ffd700,#6a00b3)}.player.cipher .arms{background:#ffd700}.player.cipher .leg{background:#2a0a40}
.player.mainframegod{filter:drop-shadow(0 0 30px #00ff41)}.player.mainframegod .head{background:#000;border-color:#fff}.player.mainframegod .body{background:linear-gradient(90deg,#000,#00ff41,#000,#fff,#000);border-color:#00ff41}.player.mainframegod .arms{background:#fff}.player.mainframegod .leg{background:#000}
/* The last skin in the game: a pale figure lit from inside, every world's colour at once. */
.player.memory{filter:drop-shadow(0 0 26px #ffb3f0) drop-shadow(0 0 44px #7be0ff)}
.player.memory .head{background:radial-gradient(circle at 35% 30%,#fff,#e6d4ff);border-color:#fff}
.player.memory .body{background:linear-gradient(135deg,#ffd6f5,#7be0ff 30%,#ffe6a8 55%,#c9a8ff 80%,#ffd6f5);border-color:#fff}
.player.memory .arms{background:#f4e6ff}
.player.memory .leg{background:linear-gradient(180deg,#c9a8ff,#5a2b80)}
/* The last four, each one further gone than the one before. */
.player.ember{filter:drop-shadow(0 0 24px #ff7a18)}
.player.ember .head{background:radial-gradient(circle at 35% 30%,#fff0d0,#ffb45c);border-color:#ff7a18}
.player.ember .body{background:linear-gradient(180deg,#ffb45c,#ff7a18 55%,#8a3200);border-color:#ffd9a0}
.player.ember .arms{background:#ffc98a}.player.ember .leg{background:#8a3200}
.player.glass{filter:drop-shadow(0 0 26px #7be0ff)}
.player.glass .head{background:radial-gradient(circle at 35% 30%,#fff,#cdf3ff);border-color:#fff}
.player.glass .body{background:linear-gradient(135deg,rgba(223,246,255,.95),rgba(123,224,255,.75),rgba(59,127,212,.9));border-color:#eaffff}
.player.glass .arms{background:#dff6ff}.player.glass .leg{background:#5f9fd4}
.player.starlight{filter:drop-shadow(0 0 30px #ffe680) drop-shadow(0 0 46px #b98cff)}
.player.starlight .head{background:radial-gradient(circle at 35% 30%,#fff,#ffe680);border-color:#fff}
.player.starlight .body{background:linear-gradient(135deg,#fffbe0,#ffe680 40%,#b98cff);border-color:#fff}
.player.starlight .arms{background:#fff3b8}.player.starlight .leg{background:#8a6ad0}
.player.voidskin{filter:drop-shadow(0 0 34px #6a2bb8)}
.player.voidskin .head{background:radial-gradient(circle at 35% 30%,#3a1f5c,#000 72%);border-color:#8f5fd8}
.player.voidskin .body{background:radial-gradient(circle at 40% 25%,#2a1244,#000 75%);border-color:#8f5fd8}
.player.voidskin .arms{background:#241038}.player.voidskin .leg{background:#000}

/* Kept low enough that the cap and its base both stay inside the 120px ground strip --
   at bottom:70 the buttons rose out of the ground and overlapped the world. */
.controls-left{position:absolute;left:15px;bottom:38px;display:flex;gap:10px;z-index:60}
.controls-right{position:absolute;right:15px;bottom:38px;z-index:60}
/* Arcade buttons: a round cap sitting on a solid coloured base. Pressing does not
   shrink them -- the cap travels down onto the base and the base disappears, which is
   what a real button does and what a thumb expects to feel. */
.controlButton{position:relative;width:clamp(58px,16.5vw,66px);height:clamp(58px,16.5vw,66px);
 border:3px solid rgba(255,255,255,.92);border-radius:50%;padding:0;
 background:
  radial-gradient(circle at 34% 26%,rgba(255,255,255,.62),rgba(255,255,255,0) 52%),
  radial-gradient(circle at 50% 116%,rgba(255,255,255,.3),rgba(255,255,255,0) 58%),
  linear-gradient(165deg,#5ceaff,#2b7bff 42%,#7b1fff);
 box-shadow:0 7px 0 #2a1060,0 12px 20px rgba(0,0,0,.5),
  inset 0 -7px 14px rgba(0,0,0,.34),inset 0 5px 9px rgba(255,255,255,.4);
 touch-action:none;cursor:pointer;-webkit-appearance:none;appearance:none;
 transition:transform .07s ease,box-shadow .07s ease}
#jumpBtn{background:
  radial-gradient(circle at 34% 26%,rgba(255,255,255,.65),rgba(255,255,255,0) 52%),
  radial-gradient(circle at 50% 116%,rgba(255,255,255,.32),rgba(255,255,255,0) 58%),
  linear-gradient(165deg,#ffe680,#ff9d00 42%,#ff3d00);
 box-shadow:0 7px 0 #7a2200,0 12px 20px rgba(0,0,0,.5),
  inset 0 -7px 14px rgba(0,0,0,.3),inset 0 5px 9px rgba(255,255,255,.45)}
.controlButton:active{transform:translateY(6px);
 box-shadow:0 1px 0 #2a1060,0 3px 9px rgba(0,0,0,.5),
  inset 0 -4px 12px rgba(0,0,0,.42),inset 0 3px 8px rgba(255,255,255,.32)}
#jumpBtn:active{box-shadow:0 1px 0 #7a2200,0 3px 9px rgba(0,0,0,.5),
  inset 0 -4px 12px rgba(0,0,0,.38),inset 0 3px 8px rgba(255,255,255,.36)}
/* A light that runs around the rim. The mask cuts the middle out, so it is a ring
   sitting outside the cap and can never wash over the arrow. */
.controlButton::before{content:"";position:absolute;inset:-9px;border-radius:50%;
 background:conic-gradient(from 0deg,#00e5ff,#7b2fff,#ff2fb0,#00e5ff);
 filter:blur(3px);opacity:.6;pointer-events:none;
 -webkit-mask:radial-gradient(closest-side,transparent 74%,#000 78%);
 mask:radial-gradient(closest-side,transparent 74%,#000 78%);
 animation:ctrlRing 3.4s linear infinite}
#jumpBtn::before{background:conic-gradient(from 0deg,#ffea00,#ff6a00,#ff2fb0,#ffea00);
 animation-duration:2.6s}
.controlButton:active::before{opacity:1;filter:blur(5px)}
@keyframes ctrlRing{to{transform:rotate(360deg)}}
/* The arrows are drawn, not typed: emoji rendered as flat orange tiles and could not
   be recoloured or lit. */
.controlButton::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:40%;
 transform:translate(-50%,-50%);background:#fff;pointer-events:none;
 filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
 clip-path:polygon(4% 50%,100% 2%,100% 98%)}
#rightBtn::after{clip-path:polygon(96% 50%,0% 2%,0% 98%)}
#jumpBtn::after{width:42%;height:36%;clip-path:polygon(50% 4%,98% 100%,2% 100%)}

#message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);opacity:0;font-size:50px;font-weight:900;text-align:center;z-index:100;pointer-events:none;width:95%}
#message small{display:block;font-size:18px;margin-top:4px}
#message .winHint{display:block;max-width:230px;margin:10px auto 0;font-size:15px;line-height:1.3}
/* The reset messages are a title plus a whole sentence, and finalWin overshoots to
   scale(1.25), so at 50px they ran off both edges. They get their own smaller size and
   the sentence wraps under the title instead of stretching it. */
#message.resetMsg{font-size:clamp(21px,6.6vw,27px);width:78%}
#message .resetSub{display:block;max-width:230px;margin:9px auto 0;font-size:15px;line-height:1.3}
/* The very last message has to survive two things the others do not: a wall of
   confetti (which sits at z-index 200) and finalWin's overshoot to scale(1.25). */
#message.wonMsg{z-index:260;font-size:clamp(17px,5.1vw,23px);width:88%;text-shadow:0 0 8px #000,0 0 18px #000,0 0 34px #00ffff,0 0 60px #ff00ff}
#message.wonMsg .resetSub{max-width:280px;font-size:clamp(13px,3.9vw,17px);color:#ffe600}
#message.showWin{color:#fff200;text-shadow:0 0 10px #fff,0 0 25px #ffd000;animation:winAnim 2s forwards}
#message.showLose{color:#ff3030;text-shadow:0 0 10px #fff,0 0 25px #ff0000;animation:loseAnim 2s forwards}
#message.finalWin{color:white;text-shadow:0 0 10px white,0 0 30px #00ffff,0 0 60px #ff00ff;animation:finalAnim 4s forwards}
#message.lossReset{color:#ff4b4b;text-shadow:0 0 10px white,0 0 30px red;animation:finalAnim 4s forwards}
/* The Big Bang cinematic sits above every panel and the HUD, and swallows taps
   so the player cannot restart or open a menu mid-flight. */
#bbCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2000;display:none;background:#01030a}
#bbCanvas.show{display:block}
#matrixUnlockOverlay{position:absolute;inset:0;z-index:900;display:none;background:rgba(0,10,0,.85);pointer-events:none}
#matrixUnlockOverlay.show{display:block}
/* Buying Cosmos again reopens the way; that is a short flash, not the 5.5s puzzle
   assembly, so the pieces are hidden and the text sits in the middle instead. */
#matrixUnlockOverlay.textOnly .puzzlePieceAnim{display:none}
#matrixUnlockOverlay.textOnly #matrixUnlockText{top:50%}
.matrixWaySub{display:block;margin-top:10px;font-size:14px;font-weight:700;line-height:1.35;color:#b6ffdc;text-shadow:0 0 8px rgba(0,255,65,.5)}
.puzzlePieceAnim{position:absolute;top:50%;left:50%;font-size:60px;filter:drop-shadow(0 0 12px #00ff41)}
.pp1{animation:puzzleConverge1 5.5s ease-in-out forwards}
.pp2{animation:puzzleConverge2 5.5s ease-in-out forwards}
.pp3{animation:puzzleConverge3 5.5s ease-in-out forwards}
.pp4{animation:puzzleConverge4 5.5s ease-in-out forwards}
@keyframes puzzleConverge1{0%{transform:translate(calc(-50% - 140px),calc(-50% - 300px)) rotate(-30deg)}60%{transform:translate(calc(-50% - 140px),calc(-50% - 300px)) rotate(-30deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes puzzleConverge2{0%{transform:translate(calc(-50% + 140px),calc(-50% - 300px)) rotate(30deg)}60%{transform:translate(calc(-50% + 140px),calc(-50% - 300px)) rotate(30deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes puzzleConverge3{0%{transform:translate(calc(-50% - 140px),calc(-50% + 300px)) rotate(30deg)}60%{transform:translate(calc(-50% - 140px),calc(-50% + 300px)) rotate(30deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes puzzleConverge4{0%{transform:translate(calc(-50% + 140px),calc(-50% + 300px)) rotate(-30deg)}60%{transform:translate(calc(-50% + 140px),calc(-50% + 300px)) rotate(-30deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}
#matrixUnlockText{position:absolute;top:70%;left:50%;transform:translate(-50%,-50%);color:#00ff41;font-size:20px;font-weight:900;text-align:center;width:90%;text-shadow:0 0 10px #00ff41,0 0 25px #00c853}
@keyframes winAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes loseAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes finalAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-10deg)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(5deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

#shop,#rebirthPanel,#diamondRebirthPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:min(92%,500px);max-height:80vh;overflow-y:auto;padding:20px;border-radius:25px;z-index:500;display:none;color:white}
#shop{border:3px solid transparent;border-radius:28px;background-image:linear-gradient(165deg,#0b0f2b,#161c46 45%,#241355 100%),linear-gradient(120deg,#00eaff,#a000ff 30%,#ff2fb0 60%,#ffcc00);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 25px 80px rgba(0,0,0,.65),0 0 55px rgba(0,220,255,.35),inset 0 0 50px rgba(120,80,255,.15)}
#rebirthPanel{background:linear-gradient(145deg,#1a0033,#003366);border:3px solid #00ffff;box-shadow:0 20px 70px rgba(0,0,0,.6),0 0 40px #a000ff;z-index:600}
#diamondRebirthPanel{background:linear-gradient(145deg,#001a2e,#0a2e4a);border:3px solid #7ef0ff;box-shadow:0 20px 70px rgba(0,0,0,.6),0 0 50px #7ef0ff;z-index:600}
#bigBangPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:min(92%,500px);max-height:80vh;overflow-y:auto;padding:20px;border-radius:25px;z-index:600;display:none;color:white;background:linear-gradient(145deg,#1a0033,#3d0a2e 55%,#2a0800);border:3px solid #ff5a9e;box-shadow:0 20px 70px rgba(0,0,0,.6),0 0 55px rgba(255,90,158,.8)}
#bigBangPanel.open{display:block;animation:shopOpen.25s forwards}
#closeBigBang{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(145deg,#ff6f6f,#c81e1e);color:white;font-size:20px;box-shadow:0 4px 14px rgba(255,60,60,.5),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s ease}
#closeBigBang:active{transform:scale(.85) rotate(90deg)}
.bigBangWarning{color:#ffb3c8}
.bigBangBoost{color:#ffe08a}
/* The one hint that the ending exists. It has to catch the eye without shouting
   louder than the reset warning above it. */
.bigBangTease{color:#7ef0ff;font-weight:800;text-shadow:0 0 10px rgba(126,240,255,.55);
 background:rgba(126,240,255,.08);border:1px solid rgba(126,240,255,.35);
 border-radius:14px;padding:10px 12px;animation:bigBangTeaseGlow 2.4s ease-in-out infinite}
@keyframes bigBangTeaseGlow{0%,100%{box-shadow:0 0 0 rgba(126,240,255,0)}50%{box-shadow:0 0 16px rgba(126,240,255,.4)}}
#statBigBangRow{display:none}
#statBigBangRow.show{display:flex}
.diamondWarning{color:#ffb3b3}
#shop.open,#rebirthPanel.open,#diamondRebirthPanel.open{display:block;animation:shopOpen.25s forwards}
@keyframes shopOpen{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.shopTitle{text-align:center;font-size:22px;margin-bottom:5px}.shopMoney{text-align:center;color:#ffe600;font-size:20px;margin-bottom:15px}
#shop .shopTitle{font-size:19px;padding:0 32px;font-weight:900;letter-spacing:.4px;background:linear-gradient(90deg,#ffe600,#ff8a00,#ff2fb0,#00eaff,#ffe600);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 22px rgba(255,255,255,.25);animation:titleShimmer 6s linear infinite}
@keyframes titleShimmer{0%{background-position:0% center}100%{background-position:300% center}}
#shop .shopMoney{display:block;width:fit-content;margin:0 auto 18px;padding:7px 20px;border-radius:30px;background:rgba(255,225,0,.12);border:1px solid rgba(255,225,0,.4);box-shadow:0 0 20px rgba(255,220,0,.25);font-size:16px}
#closeShop,#closeRebirth,#closeDiamondRebirth{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:#ff3030;color:white;font-size:20px}
#closeShop{background:linear-gradient(145deg,#ff6f6f,#c81e1e);box-shadow:0 4px 14px rgba(255,60,60,.5),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s ease}
#closeShop:active{transform:scale(.85) rotate(90deg)}
.skinGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.skinCard{padding:12px;text-align:center;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);border-radius:18px}
#shop .skinGrid{gap:14px;padding-top:2px}
#shop .skinCard{position:relative;overflow:hidden;padding:14px 12px;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.2);border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .12s ease}
#shop .skinCard:active{transform:scale(.96)}
#shop .skinCard::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-130%);animation:cardShine 4s ease-in-out infinite}
#shop .skinCard:nth-child(2n)::before{animation-delay:1.3s}
#shop .skinCard:nth-child(3n)::before{animation-delay:2.4s}
@keyframes cardShine{0%,30%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
.skinPreview{width:50px;height:70px;margin:5px auto 10px;border-radius:6px;border:2px solid white;background:#2454ff}
#shop .skinPreview{position:relative;z-index:1;width:58px;height:78px;margin:2px auto 12px;border-radius:12px;border:2px solid rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,0,0,.4),0 0 18px rgba(255,255,255,.18);animation:previewFloat 3s ease-in-out infinite}
@keyframes previewFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.skinPreview.ninja{background:#111}.skinPreview.robot{background:#999}.skinPreview.alien{background:#8f0}.skinPreview.gold{background:#ffcc00}.skinPreview.shadow{background:#111}.skinPreview.fire{background:#ff4400}.skinPreview.galaxy{background:linear-gradient(135deg,#09002a,#00c8ff)}
.skinPreview.mummy{background:#e8d9b5}.skinPreview.pharaoh{background:#ffd700}.skinPreview.scorpion{background:#222}.skinPreview.sandstorm{background:#ffeab0}.skinPreview.anubis{background:#333}
.skinPreview.yeti{background:#fff}.skinPreview.penguin{background:#111}.skinPreview.iceking{background:#00eaff}.skinPreview.frost{background:#b0ffff}.skinPreview.blizzard{background:#001133}
.skinPreview.magma{background:#ff2200}.skinPreview.dragon{background:#8a0000}.skinPreview.lava{background:#ff4400}.skinPreview.inferno{background:#000}.skinPreview.ashgod{background:#444}
.skinPreview.astro{background:#fff}.skinPreview.alien2{background:#00ff00}.skinPreview.ufo{background:#00ff88}.skinPreview.nebula{background:#ff00ff}.skinPreview.cosmos{background:linear-gradient(90deg,#000,#fff)}
.skinPreview.hacker{background:linear-gradient(145deg,#111,#003300)}.skinPreview.glitch{background:repeating-linear-gradient(45deg,#39ff14 0px,#39ff14 4px,#000 4px,#000 8px)}.skinPreview.firewall{background:linear-gradient(145deg,#ff5500,#661a00)}.skinPreview.cipher{background:linear-gradient(90deg,#6a00b3,#ffd700)}.skinPreview.mainframegod{background:linear-gradient(90deg,#000,#00ff41,#fff,#000)}
.skinPreview.memory{background:linear-gradient(135deg,#ffd6f5,#7be0ff 35%,#ffe6a8 65%,#c9a8ff)}
.skinName{font-weight:bold;font-size:17px}.skinPrice{margin:5px;color:#ffe600;font-weight:bold}
#shop .skinName{position:relative;z-index:1;font-weight:800;font-size:15.5px;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,0,.4);margin-bottom:2px}
#shop .skinPrice{position:relative;z-index:1;display:block;width:fit-content;margin:6px auto;padding:3px 12px;border-radius:20px;background:rgba(255,230,0,.12);box-shadow:inset 0 0 0 1px rgba(255,230,0,.35);font-size:12.5px}
.skinButton{width:100%;padding:8px;border:0;border-radius:10px;font-weight:bold;background:#27d66d;color:white}.skinButton.locked{background:#666}.skinButton.equipped{background:#147cff}.skinButton.cantAfford{background:#c81e1e;color:#fff}
#shop .skinButton{position:relative;z-index:1;padding:10px;border-radius:14px;font-size:12.5px;letter-spacing:.3px;background:linear-gradient(145deg,#3aeb98,#18a05e);box-shadow:0 4px 14px rgba(30,200,120,.45),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .12s ease}
#shop .skinButton:active{transform:scale(.94)}
#shop .skinButton.locked{background:linear-gradient(145deg,#868da3,#4b5164);box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)}
#shop .skinButton.equipped{background:linear-gradient(145deg,#5fb2ff,#1560d8);box-shadow:0 0 16px rgba(60,150,255,.6),inset 0 1px 0 rgba(255,255,255,.4)}
#shop .skinButton.cantAfford{background:linear-gradient(145deg,#ff5f5f,#c81e1e);color:#fff;box-shadow:0 4px 14px rgba(255,60,60,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.skinHint{margin-top:6px;font-size:10.5px;color:rgba(255,255,255,.6);line-height:1.3}
#shop .skinHint{position:relative;z-index:1;font-style:italic}
.skinBonusTag{margin:3px 0 5px;font-size:11px;font-weight:800;color:#3aeb98}
#shop .skinBonusTag{position:relative;z-index:1}
.particle{position:absolute;width:8px;height:8px;pointer-events:none;z-index:80;animation:particleFly.7s forwards}
@keyframes particleFly{from{opacity:1;transform:translate(0,0)}to{opacity:0;transform:translate(var(--dx),var(--dy))}}
.confetti{position:absolute;width:10px;height:18px;z-index:200;pointer-events:none;animation:confettiFall var(--duration) linear forwards}
@keyframes confettiFall{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--rotation));opacity:0}}
.time-cloud{position:absolute;left:50%;top:25%;transform:translateX(-50%);padding:12px 22px;background:#ffe600;color:#7a4a00;font-weight:900;font-size:26px;border:3px solid white;border-radius:50px;box-shadow:0 0 15px #fff,0 0 30px #ffe600;z-index:90;cursor:pointer;display:none}
.time-cloud.show{display:block}

/* WORLDS - FIXED WITH SPACE */
#game.desert{background:linear-gradient(to bottom,#ff9a3d 0%,#ffd27a 55%,#ffe9b0 100%)!important}
#game.desert .ground{background:linear-gradient(to bottom,#e8c07a,#c9984a 20%,#8a5a1e)!important;box-shadow:inset 0 12px 0 #ffde8c!important}
#game.desert .ground .grass{background:repeating-linear-gradient(90deg,#ffe58a 0px,#ffe58a 8px,#ffb700 8px,#ffb700 16px)!important}
#game.snowy{background:linear-gradient(to bottom,#a7e9ff 0%,#e6f8ff 55%,#ffffff 100%)!important}
#game.snowy .ground{background:linear-gradient(to bottom,#e8f6ff,#a9d4f0 20%,#7fb8df)!important;box-shadow:inset 0 12px 0 #ffffff!important}
#game.snowy .ground .grass{background:repeating-linear-gradient(90deg,#ffffff 0px,#ffffff 8px,#c9eaff 8px,#c9eaff 16px)!important}
#game.volcano{background:linear-gradient(to bottom,#2a0000 0%,#8a1a00 40%,#ff4400 100%)!important}
#game.volcano .ground{background:linear-gradient(to bottom,#3a0a00,#5a1a00 20%,#1a0000)!important;box-shadow:inset 0 12px 0 #ff3300!important}
#game.volcano .ground .grass{background:repeating-linear-gradient(90deg,#ff3300 0px,#ff3300 8px,#8a0000 8px,#8a0000 16px)!important}
#game.space{background:linear-gradient(to bottom,#000000 0%,#12002e 40%,#3a0090 100%)!important}
#game.space .ground{background:linear-gradient(to bottom,#2a2a2a,#111 20%,#000)!important;box-shadow:inset 0 12px 0 #777!important}
#game.space .ground .grass{background:repeating-linear-gradient(90deg,#555 0px,#555 8px,#222 8px,#222 16px)!important}
#game.matrix{background:linear-gradient(to bottom,#000000 0%,#001a05 40%,#003300 100%)!important}
#game.matrix .ground{background:linear-gradient(to bottom,#001a05,#002200 20%,#000)!important;box-shadow:inset 0 12px 0 #00ff41!important}
#game.matrix .ground .grass{background:repeating-linear-gradient(90deg,#00ff41 0px,#00ff41 8px,#001a05 8px,#001a05 16px)!important}
/* Memory: a dusk-coloured sky with every world you have been to drifting through it. */
#game.memory{background:linear-gradient(to bottom,#1b0630 0%,#4a1a6b 38%,#a8508f 72%,#ffc0a0 100%)!important}
#game.memory .ground{background:linear-gradient(to bottom,#5a2b80,#38175a 20%,#1a0730)!important;box-shadow:inset 0 12px 0 #c98fe8!important}
#game.memory .ground .grass{background:repeating-linear-gradient(90deg,#e0b3ff 0px,#e0b3ff 8px,#7b3fa0 8px,#7b3fa0 16px)!important}
#game.memory .sun,#game.memory .cloud,#game.memory .sunRays{display:none}
.memoryHaze{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(255,190,240,.22),transparent 62%);pointer-events:none}
/* Each past world drifts up and dissolves, like a memory surfacing. */
.memoryEcho{position:absolute;font-size:40px;opacity:0;z-index:3;filter:drop-shadow(0 0 14px rgba(255,200,255,.7));animation:memoryDrift 14s ease-in-out infinite}
.me1{left:8%;bottom:150px;animation-delay:0s}
.me2{left:28%;bottom:190px;animation-delay:2.3s;font-size:32px}
.me3{left:48%;bottom:160px;animation-delay:4.6s;font-size:36px}
.me4{left:66%;bottom:200px;animation-delay:7s;font-size:30px}
.me5{left:82%;bottom:165px;animation-delay:9.3s;font-size:34px}
.me6{left:38%;bottom:230px;animation-delay:11.6s;font-size:28px}
@keyframes memoryDrift{0%{opacity:0;transform:translateY(0) scale(.85)}18%{opacity:.55}55%{opacity:.4}100%{opacity:0;transform:translateY(-130px) scale(1.1)}}
.memorySpark{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe6ff;box-shadow:0 0 10px #ffb3f0,0 0 18px #c9a8ff;z-index:4;animation:memorySparkFloat 7s ease-in-out infinite}
.ms1{left:14%;bottom:260px;animation-delay:0s}.ms2{left:33%;bottom:330px;animation-delay:1.2s}.ms3{left:52%;bottom:290px;animation-delay:2.4s}
.ms4{left:70%;bottom:350px;animation-delay:3.6s}.ms5{left:88%;bottom:270px;animation-delay:4.8s}.ms6{left:24%;bottom:400px;animation-delay:6s}
@keyframes memorySparkFloat{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(10px,-34px);opacity:1}}
.memoryHorizon{position:absolute;bottom:118px;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,rgba(255,214,245,.85),transparent);box-shadow:0 0 16px rgba(255,190,240,.8);z-index:4;pointer-events:none}
#game.volcano .sun,#game.volcano .cloud,#game.volcano .sunRays,#game.space .sun,#game.space .cloud,#game.space .sunRays,#game.matrix .sun,#game.matrix .cloud,#game.matrix .sunRays{display:none}
.matrixGlow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(0,255,65,.15),transparent 60%);pointer-events:none}
.digitalRain{position:absolute;top:-20px;width:2px;height:100%;background:linear-gradient(to bottom,transparent,#00ff41,transparent);opacity:.5;animation:rainFall 3s linear infinite}
.dr1{left:15%;animation-delay:0s}.dr2{left:32%;animation-delay:.6s}.dr3{left:50%;animation-delay:1.2s}.dr4{left:68%;animation-delay:1.8s}.dr5{left:85%;animation-delay:2.4s}
@keyframes rainFall{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.matrixGridFar,.matrixGridNear{position:absolute;left:0;width:100%;height:200px;background-image:linear-gradient(rgba(0,255,65,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,65,.15) 1px,transparent 1px);background-size:40px 40px}
.matrixGridFar{bottom:120px;opacity:.4}
.matrixGridNear{bottom:120px;opacity:.7;background-size:20px 20px}
.floatingCode{position:absolute;color:#00ff41;font-size:14px;font-weight:bold;opacity:.6;text-shadow:0 0 6px #00ff41;animation:codeFloat 4s ease-in-out infinite alternate}
.fc1{top:20%;left:20%}.fc2{top:35%;left:70%}.fc3{top:55%;left:40%}
@keyframes codeFloat{from{transform:translateY(0)}to{transform:translateY(-20px)}}
#game.desert .sun{background:#ffcf5b;box-shadow:0 0 40px #ffcf5b,0 0 90px #ff9d3d;width:100px;height:100px}

.cactus{position:absolute;bottom:120px;width:30px;height:70px;background:#2f8a2f;border-radius:15px 15px 4px 4px;border:3px solid #1a5a1a;z-index:6}.cactus1{left:10%;height:90px}.cactus2{right:15%;height:60px}
.snowman{position:absolute;bottom:120px;left:8%;font-size:60px;z-index:6}.snowPile{position:absolute;bottom:120px;right:10%;width:80px;height:40px;background:white;border-radius:50% 50% 0 0;z-index:6}
.volcanoIcon{position:absolute;bottom:120px;right:5%;font-size:70px;z-index:6}.lavaStrip{position:absolute;bottom:120px;left:0;width:100%;height:10px;background:linear-gradient(90deg,#ff0000,#ffae00,#ff0000);z-index:6}
.planet{position:absolute;bottom:140px;left:10%;font-size:80px;z-index:6}.stars{position:absolute;top:0;left:0;width:100%;height:70%;background:radial-gradient(white 1px, transparent 1px);background-size:40px 40px;opacity:.5;z-index:1}

/* extra world decor */
.tree{position:absolute;bottom:118px;font-size:58px;z-index:6;filter:drop-shadow(0 4px 3px rgba(0,0,0,.25))}
.tree1{left:12%}.tree2{right:9%;font-size:46px}.tree3{left:52%;font-size:36px;opacity:.85}
.bush{position:absolute;bottom:118px;left:38%;width:46px;height:26px;background:radial-gradient(circle,#4fd15a,#2e9e3a);border-radius:50% 50% 40% 40%;z-index:6;box-shadow:inset -3px -3px 0 rgba(0,0,0,.12)}
.bird{position:absolute;font-size:20px;z-index:4;animation:birdFly 18s linear infinite}
.bird1{top:20%;animation-delay:0s}.bird2{top:29%;font-size:15px;animation-delay:7s}
@keyframes birdFly{0%{left:-30px;transform:scaleX(-1) translateY(0)}25%{transform:scaleX(-1) translateY(-10px)}50%{transform:scaleX(-1) translateY(0)}75%{transform:scaleX(-1) translateY(-8px)}100%{left:110%;transform:scaleX(-1) translateY(0)}}

.mountainLayer{position:absolute;bottom:100px;left:0;width:100%;pointer-events:none}
.mountainFarOverworld{height:150px;bottom:110px;background:#4a7fb5;opacity:.5;z-index:2;clip-path:polygon(0% 100%,0% 55%,10% 75%,20% 40%,32% 68%,44% 25%,56% 60%,68% 30%,80% 65%,92% 38%,100% 58%,100% 100%)}
.mountainNearOverworld{height:105px;bottom:105px;background:#2e8b57;opacity:.7;z-index:3;clip-path:polygon(0% 100%,0% 70%,14% 42%,28% 66%,42% 30%,58% 62%,72% 35%,86% 60%,100% 45%,100% 100%)}
.dustMote{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#fff8d0,rgba(255,248,208,0));box-shadow:0 0 8px rgba(255,240,150,.8);z-index:4;animation:dustFloat 9s ease-in-out infinite}
.dm1{left:20%;bottom:200px;animation-delay:0s}.dm2{left:55%;bottom:280px;animation-delay:2s}.dm3{left:75%;bottom:220px;animation-delay:4s}.dm4{left:35%;bottom:340px;animation-delay:6s}
@keyframes dustFloat{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(15px,-40px);opacity:1}}
.butterfly{position:absolute;font-size:18px;z-index:6;animation:butterflyFly 12s ease-in-out infinite}
.bf1{bottom:220px;left:-30px;animation-delay:0s}.bf2{bottom:300px;left:-30px;animation-delay:6s;font-size:14px}
@keyframes butterflyFly{0%{left:-30px;transform:translateY(0) rotate(0deg)}25%{transform:translateY(-25px) rotate(8deg)}50%{transform:translateY(10px) rotate(-6deg)}75%{transform:translateY(-15px) rotate(5deg)}100%{left:110%;transform:translateY(0) rotate(0deg)}}
.flower{position:absolute;bottom:118px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#ff6fae,#e8397a);z-index:6}
.flower::before{content:"";position:absolute;top:-3px;left:-3px;width:6px;height:6px;border-radius:50%;background:#ffd23f}
.fl1{left:6%}.fl2{left:22%;background:radial-gradient(circle,#ffd23f,#e8a10e)}.fl3{left:48%}.fl4{left:66%;background:radial-gradient(circle,#8f7bff,#5a3fe0)}.fl5{left:90%}

.pyramid{position:absolute;bottom:120px;right:22%;width:0;height:0;border-left:42px solid transparent;border-right:42px solid transparent;border-bottom:56px solid #d9a256;z-index:5;opacity:.85}
.bone{position:absolute;bottom:126px;left:45%;font-size:24px;z-index:6;transform:rotate(-15deg)}
.tumbleweed{position:absolute;bottom:127px;width:24px;height:24px;border-radius:50%;background:repeating-conic-gradient(#8a6a2f 0deg 20deg,#6b4f1f 20deg 40deg);z-index:6;animation:tumbleRoll 7s linear infinite}
@keyframes tumbleRoll{0%{left:-30px;transform:rotate(0deg)}100%{left:110%;transform:rotate(900deg)}}

.duneFar{height:125px;bottom:110px;background:#e0a558;opacity:.55;z-index:2;clip-path:polygon(0% 100%,0% 65%,20% 50%,40% 68%,60% 42%,80% 64%,100% 48%,100% 100%)}
.duneNear{height:92px;bottom:104px;background:#c9843a;opacity:.75;z-index:3;clip-path:polygon(0% 100%,0% 75%,25% 55%,50% 72%,75% 50%,100% 68%,100% 100%)}
.heatHaze{position:absolute;bottom:118px;left:0;width:100%;height:55px;z-index:5;background:linear-gradient(to top,rgba(255,255,255,.28),transparent);opacity:.6;animation:heatShimmer 2s ease-in-out infinite;pointer-events:none}
@keyframes heatShimmer{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.18) translateY(-4px)}}
.vulture{position:absolute;font-size:16px;z-index:4;animation:vultureCircle 14s linear infinite}
.vu1{top:12%;left:60%}.vu2{top:18%;left:70%;animation-delay:7s;font-size:13px}
@keyframes vultureCircle{0%{transform:translate(0,0) scaleX(1)}25%{transform:translate(-40px,-15px) scaleX(1)}50%{transform:translate(-60px,0) scaleX(-1)}75%{transform:translate(-40px,15px) scaleX(-1)}100%{transform:translate(0,0) scaleX(1)}}
.obelisk{position:absolute;bottom:118px;left:60%;width:16px;height:100px;background:linear-gradient(90deg,#c9984a,#e8c07a,#a97a35);z-index:5;clip-path:polygon(0% 100%,0% 15%,50% 0%,100% 15%,100% 100%)}
.pyramidFar{position:absolute;bottom:118px;left:30%;width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-bottom:34px solid #c9984a;z-index:4;opacity:.6}
.oasis{position:absolute;bottom:118px;left:78%;z-index:5;font-size:26px}
.oasisPool{position:absolute;bottom:-6px;left:-10px;width:60px;height:14px;border-radius:50%;background:rgba(60,170,220,.6);box-shadow:0 0 10px rgba(60,170,220,.5)}
.sandParticle{position:absolute;bottom:140px;width:4px;height:4px;border-radius:50%;background:#e8c07a;opacity:.7;z-index:5;animation:sandDrift 6s linear infinite}
.sp1{left:-10px;bottom:140px;animation-delay:0s}.sp2{left:-10px;bottom:160px;animation-delay:2s}.sp3{left:-10px;bottom:180px;animation-delay:4s}
@keyframes sandDrift{0%{transform:translateX(0)}100%{transform:translateX(420px)}}

.pineTree{position:absolute;bottom:118px;left:76%;font-size:52px;z-index:6;filter:drop-shadow(0 4px 3px rgba(0,0,0,.2))}
.pine1{left:76%}.pine2{left:90%;font-size:32px;opacity:.7}
.icicles{position:absolute;top:0;left:0;width:100%;height:20px;z-index:3;background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.85) 50%),linear-gradient(225deg,transparent 48%,rgba(255,255,255,.85) 50%);background-size:30px 20px;background-repeat:repeat-x}
.snowflake{position:absolute;top:-30px;font-size:15px;color:#fff;z-index:4;opacity:.85;animation:snowFall linear infinite}
.sf1{left:15%;animation-duration:8s;animation-delay:0s}.sf2{left:40%;animation-duration:10s;animation-delay:2s;font-size:11px}.sf3{left:65%;animation-duration:7s;animation-delay:4s}.sf4{left:85%;animation-duration:9s;animation-delay:1s;font-size:12px}
.sf5{left:5%;animation-duration:9.5s;animation-delay:3s;font-size:13px}.sf6{left:55%;animation-duration:11s;animation-delay:5s}.sf7{left:96%;animation-duration:8.5s;animation-delay:2.5s;font-size:10px}
@keyframes snowFall{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:.9}100%{transform:translateY(100vh) translateX(20px) rotate(180deg);opacity:.3}}

.auroraBand{position:absolute;top:0;left:-10%;width:120%;height:130px;opacity:.35;filter:blur(6px);animation:auroraWave 8s ease-in-out infinite alternate;z-index:1;pointer-events:none}
.ab1{background:linear-gradient(90deg,transparent,#7effc0,transparent,#7ec8ff,transparent);animation-delay:0s}
.ab2{top:20px;background:linear-gradient(90deg,transparent,#c17eff,transparent,#7effc0,transparent);animation-delay:3s;opacity:.25}
@keyframes auroraWave{0%{transform:translateX(-30px) scaleY(1)}100%{transform:translateX(30px) scaleY(1.2)}}
.mountainSnowFar{height:150px;bottom:110px;background:#8fb8d9;opacity:.5;z-index:2;clip-path:polygon(0% 100%,0% 55%,10% 75%,20% 40%,32% 68%,44% 25%,56% 60%,68% 30%,80% 65%,92% 38%,100% 58%,100% 100%)}
.mountainSnowFar::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,transparent 22%);clip-path:inherit}
.mountainSnowNear{height:108px;bottom:105px;background:#5f8fb8;opacity:.75;z-index:3;clip-path:polygon(0% 100%,0% 70%,14% 42%,28% 66%,42% 30%,58% 62%,72% 35%,86% 60%,100% 45%,100% 100%)}
.mountainSnowNear::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff 0%,transparent 18%);clip-path:inherit}
.frozenLake{position:absolute;bottom:118px;left:8%;width:140px;height:22px;border-radius:50%;background:linear-gradient(120deg,#dff6ff,#a9d4f0,#dff6ff);opacity:.7;z-index:3;overflow:hidden}
.frozenLake::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.8),transparent);animation:lakeShimmer 4s ease-in-out infinite}
@keyframes lakeShimmer{0%{left:-60%}100%{left:140%}}
.igloo{position:absolute;bottom:118px;right:30%;width:60px;height:34px;background:radial-gradient(circle at 50% 0%,#fff,#dff0fa 70%);border-radius:50% 50% 0 0;z-index:5;box-shadow:inset -6px -4px 0 rgba(150,190,220,.4)}
.igloo::after{content:"";position:absolute;bottom:0;left:22px;width:16px;height:18px;background:#1a2a3a;border-radius:50% 50% 0 0}
.iceCrystal{position:absolute;width:6px;height:6px;background:#cdf3ff;z-index:4;transform:rotate(45deg);box-shadow:0 0 8px #cdf3ff;animation:sparkleTwinkle 2s ease-in-out infinite}
.ic1{bottom:200px;left:15%;animation-delay:0s}.ic2{bottom:260px;left:40%;animation-delay:.6s}.ic3{bottom:180px;left:65%;animation-delay:1.2s}.ic4{bottom:230px;left:85%;animation-delay:1.8s}

.volcanoFar{position:absolute;bottom:120px;left:8%;font-size:38px;z-index:5;opacity:.55;filter:grayscale(.2)}
.smoke{position:absolute;bottom:188px;right:8%;width:18px;height:18px;border-radius:50%;background:rgba(90,90,90,.5);z-index:4;animation:smokeRise 5s ease-out infinite}
.sm2{right:10%;animation-delay:2.5s;width:13px;height:13px}
.sm3{left:12%;bottom:170px;animation-delay:4s;width:15px;height:15px}
@keyframes smokeRise{0%{transform:translateY(0) scale(.6);opacity:.6}100%{transform:translateY(-150px) scale(1.8);opacity:0}}
.ember{position:absolute;bottom:150px;right:9%;width:5px;height:5px;border-radius:50%;background:#ffae00;box-shadow:0 0 8px #ff5500;z-index:4;animation:emberFloat 4s ease-in infinite}
.em2{right:6%;animation-name:emberFloatL;animation-delay:1.3s}.em3{right:12%;animation-name:emberFloatR;animation-delay:2.6s}
.em4{left:10%;bottom:130px;animation-name:emberFloat;animation-delay:.7s}.em5{left:15%;bottom:135px;animation-name:emberFloatL;animation-delay:2.1s}
@keyframes emberFloat{0%{transform:translate(0,0);opacity:1}100%{transform:translate(15px,-180px);opacity:0}}
@keyframes emberFloatL{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-15px,-170px);opacity:0}}
@keyframes emberFloatR{0%{transform:translate(0,0);opacity:1}100%{transform:translate(25px,-190px);opacity:0}}

.ashParticle{position:absolute;top:-20px;width:5px;height:5px;border-radius:50%;background:#3a3a3a;opacity:.8;z-index:4;animation:ashFall linear infinite}
.ap1{left:10%;animation-duration:6s;animation-delay:0s}.ap2{left:30%;animation-duration:7s;animation-delay:1.5s}.ap3{left:50%;animation-duration:5.5s;animation-delay:3s}.ap4{left:70%;animation-duration:6.5s;animation-delay:.8s}.ap5{left:88%;animation-duration:7.5s;animation-delay:2.2s}
@keyframes ashFall{0%{transform:translateY(0) translateX(0);opacity:.9}100%{transform:translateY(780px) translateX(30px);opacity:.2}}
.lavaGlowPulse{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);width:280px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,120,0,.5),transparent 70%);z-index:1;animation:lavaGlowBreathe 3s ease-in-out infinite;pointer-events:none}
@keyframes lavaGlowBreathe{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.15)}}
.mountainVolcanoFar{height:150px;bottom:110px;background:#3a0a00;opacity:.7;z-index:2;clip-path:polygon(0% 100%,0% 60%,12% 78%,22% 40%,34% 70%,46% 25%,58% 62%,70% 32%,82% 66%,94% 40%,100% 60%,100% 100%)}
.mountainVolcanoNear{height:108px;bottom:105px;background:#1a0500;opacity:.85;z-index:3;clip-path:polygon(0% 100%,0% 72%,16% 45%,32% 68%,48% 32%,64% 64%,80% 38%,100% 60%,100% 100%)}
.mountainVolcanoNear::before,.mountainVolcanoFar::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(255,90,0,.55) 100%);clip-path:inherit;animation:lavaVeinGlow 2.5s ease-in-out infinite}
@keyframes lavaVeinGlow{0%,100%{opacity:.4}50%{opacity:.9}}
.lightningFlash{position:absolute;inset:0;background:#fff;opacity:0;z-index:8;pointer-events:none;animation:lightningStrike 9s infinite}
@keyframes lightningStrike{0%,92%{opacity:0}92.5%{opacity:.5}93%{opacity:0}94%{opacity:.7}94.5%{opacity:0}100%{opacity:0}}
.charredTree{position:absolute;bottom:118px;width:6px;height:50px;background:#1a1a1a;z-index:5}
.charredTree::before{content:"";position:absolute;top:6px;left:-10px;width:14px;height:3px;background:#1a1a1a;transform:rotate(-25deg)}
.charredTree::after{content:"";position:absolute;top:14px;right:-10px;width:14px;height:3px;background:#1a1a1a;transform:rotate(25deg)}
.ct1{left:20%}.ct2{left:42%;height:36px}
.lavaCracks{position:absolute;bottom:120px;left:0;width:100%;height:10px;background:repeating-linear-gradient(90deg,rgba(255,220,0,.9) 0px,rgba(255,220,0,.9) 2px,transparent 2px,transparent 22px);z-index:7;animation:crackGlow 1.4s ease-in-out infinite;pointer-events:none}
@keyframes crackGlow{0%,100%{opacity:.4}50%{opacity:1}}

.moon{position:absolute;top:8%;left:12%;font-size:46px;z-index:2;opacity:.9;filter:drop-shadow(0 0 14px rgba(255,255,255,.5))}
.satellite{position:absolute;top:38%;font-size:22px;z-index:4;animation:satelliteDrift 20s linear infinite}
@keyframes satelliteDrift{0%{left:-30px;transform:rotate(0deg)}100%{left:110%;transform:rotate(20deg)}}
.shootingStar{position:absolute;top:12%;left:20%;width:70px;height:2px;background:linear-gradient(90deg,#fff,transparent);z-index:3;opacity:0;animation:shootStar 6s ease-in infinite}
@keyframes shootStar{0%,80%{opacity:0;transform:translate(0,0) rotate(35deg)}82%{opacity:1}90%{opacity:0;transform:translate(220px,160px) rotate(35deg)}100%{opacity:0}}
.sparkle{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;z-index:2;box-shadow:0 0 6px #fff;animation:sparkleTwinkle 2.5s ease-in-out infinite}
.spk1{top:15%;left:30%;animation-delay:0s}.spk2{top:50%;left:70%;animation-delay:.8s}.spk3{top:65%;left:20%;animation-delay:1.6s}
.spk4{top:25%;left:50%;animation-delay:.4s}.spk5{top:80%;left:45%;animation-delay:1.2s}
@keyframes sparkleTwinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.8)}}

.cosmicGlow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(123,0,255,.25),transparent 60%);z-index:0;pointer-events:none}
.nebulaCloud{position:absolute;border-radius:50%;filter:blur(18px);opacity:.5;z-index:1;pointer-events:none;animation:nebulaDrift 20s ease-in-out infinite alternate}
.neb1{width:180px;height:120px;top:10%;left:-20px;background:radial-gradient(circle,#ff2fd6,transparent 70%)}
.neb2{width:200px;height:140px;top:45%;right:-40px;background:radial-gradient(circle,#00eaff,transparent 70%);animation-delay:5s}
.neb3{width:150px;height:110px;top:70%;left:20%;background:radial-gradient(circle,#7b00ff,transparent 70%);animation-delay:10s}
@keyframes nebulaDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,-15px) scale(1.15)}}
.starsFar{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(white .8px,transparent 1px);background-size:60px 60px;opacity:.3;z-index:1}
.starsNear{position:absolute;top:0;left:0;width:100%;height:70%;background:radial-gradient(white 1.6px,transparent 2px);background-size:90px 90px;opacity:.85;z-index:2;animation:starsTwinkle 3s ease-in-out infinite alternate}
@keyframes starsTwinkle{0%{opacity:.5}100%{opacity:1}}
.planet{filter:drop-shadow(0 0 20px rgba(180,140,255,.6))}
.planet2{position:absolute;bottom:280px;right:12%;font-size:30px;z-index:5;opacity:.8;filter:drop-shadow(0 0 12px rgba(255,255,255,.4))}
.asteroid{position:absolute;width:10px;height:10px;border-radius:40% 60% 55% 45%;background:#8a8a8a;box-shadow:inset -2px -2px 0 rgba(0,0,0,.4);z-index:4;animation:asteroidDrift linear infinite}
.ast1{top:25%;left:-20px;animation-duration:14s;animation-delay:0s}.ast2{top:55%;left:-20px;width:7px;height:7px;animation-duration:18s;animation-delay:5s}.ast3{top:40%;left:-20px;width:13px;height:13px;animation-duration:22s;animation-delay:10s}
@keyframes asteroidDrift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(430px,60px) rotate(360deg)}}
.rebirthInfo{text-align:center;margin:10px 0 15px;font-size:13px;opacity:.85}
.rebirthCard{display:flex;justify-content:space-between;align-items:center;padding:14px;background:rgba(255,255,255,.08);border:2px solid rgba(0,255,255,.3);border-radius:15px;margin-bottom:10px}
.rebirthCard.done{border-color:#00ff88;background:rgba(0,255,100,.15)}.rebirthCard.locked{opacity:.5}
.rebirthName{font-weight:bold;font-size:16px}.rebirthMult{color:#00ff88;font-size:13px}
.rebirthMult b{color:#7ef0ff;font-weight:900;font-size:15px;text-shadow:0 0 8px rgba(126,240,255,.6)}
.dBoost{display:block;margin-top:2px;font-size:11px;color:rgba(255,255,255,.55)}.rebirthPrice{color:#ffe600;font-weight:bold}
.rebirthBtn{padding:8px 14px;border:0;border-radius:10px;font-weight:bold;background:#00d4ff;color:white;cursor:pointer}.rebirthBtn:disabled{background:#555}
#moneySub{position:absolute;top:54px;left:34%;display:flex;gap:6px;align-items:baseline;z-index:50;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#rebirthMult{color:#00ff88;font-size:12px;font-weight:bold}
#skinBonus{color:#ffcc00;font-size:11px;font-weight:bold;letter-spacing:.5px}
#statusPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:min(92%,500px);max-height:80vh;overflow-y:auto;padding:20px;border-radius:25px;z-index:500;display:none;color:white;background:linear-gradient(145deg,#141428,#232346);border:3px solid #8892b0;box-shadow:0 20px 70px rgba(0,0,0,.6),0 0 40px rgba(136,146,176,.5)}
#statusPanel.open{display:block;animation:shopOpen.25s forwards}
.statRow{display:flex;justify-content:space-between;align-items:center;padding:14px;background:rgba(255,255,255,.08);border:2px solid rgba(136,146,176,.35);border-radius:15px;margin-bottom:10px}
.statLabel{font-weight:bold;font-size:14px}
.statValue{color:#ffe600;font-weight:900;font-size:16px}
/* Lifetime totals and current progress are different kinds of number, so the list
   is split rather than letting a Rebirth level read as something that never resets. */
/* A skin name is words, not a short number like the other values, so it is allowed
   to wrap onto a second line instead of shoving the label off the row. */
.statSkin{text-align:right;margin-left:12px;line-height:1.25}
.statSectionTitle{margin:16px 0 9px;text-align:center;font-size:11px;font-weight:900;letter-spacing:1.6px;color:rgba(255,255,255,.55)}
#realShopPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:min(92%,500px);min-height:220px;max-height:80vh;overflow-y:auto;padding:20px;border-radius:28px;z-index:500;display:none;color:white;border:3px solid transparent;background-image:linear-gradient(165deg,#0b0f2b,#161c46 45%,#241355 100%),linear-gradient(120deg,#00eaff,#a000ff 30%,#ff2fb0 60%,#ffcc00);background-origin:border-box;background-clip:padding-box,border-box;box-shadow:0 25px 80px rgba(0,0,0,.65),0 0 55px rgba(0,220,255,.35),inset 0 0 50px rgba(120,80,255,.15)}
#realShopPanel.open{display:block;animation:shopOpen.25s forwards}
#puzzlePanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);width:min(92%,500px);max-height:80vh;overflow-y:auto;padding:20px;border-radius:25px;z-index:500;display:none;color:white;background:linear-gradient(145deg,#0a2418,#12402a);border:3px solid #3aeb98;box-shadow:0 20px 70px rgba(0,0,0,.6),0 0 40px rgba(58,235,152,.5)}
#puzzlePanel.open{display:block;animation:shopOpen.25s forwards}
#closePuzzle{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(145deg,#ff6f6f,#c81e1e);color:white;font-size:20px;box-shadow:0 4px 14px rgba(255,60,60,.5),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s ease}
#closePuzzle:active{transform:scale(.85) rotate(90deg)}
.puzzleProgress{text-align:center;color:#3aeb98;font-size:19px;font-weight:900;margin:4px 0 14px;text-shadow:0 0 12px rgba(58,235,152,.5)}
.puzzleRow{display:flex;align-items:flex-start;gap:11px;padding:13px;background:rgba(255,255,255,.07);border:2px solid rgba(58,235,152,.28);border-radius:15px;margin-bottom:10px}
.puzzleRow.got{border-color:#3aeb98;background:rgba(58,235,152,.15)}
.puzzleTick{flex:0 0 auto;font-size:17px;line-height:1.35}
.puzzleHow{font-size:13.5px;line-height:1.4}
.puzzleRow.got .puzzleHow{color:#b6ffdc}
.puzzleNote{display:block;margin-top:3px;font-size:11.5px;color:rgba(255,255,255,.55)}
.puzzleFootnote{margin:14px 0 0;font-size:11.5px;opacity:.7}
.puzzleGate{display:none}
.puzzleGate.show{display:block;margin:14px 0 0;padding:12px;text-align:center;font-size:13px;line-height:1.4;color:#ffe600;background:rgba(255,230,0,.1);border:2px solid rgba(255,230,0,.45);border-radius:15px}
.puzzleGate.open{color:#3aeb98;background:rgba(58,235,152,.12);border-color:rgba(58,235,152,.5)}
#closeRealShop{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(145deg,#ff6f6f,#c81e1e);color:white;font-size:20px;box-shadow:0 4px 14px rgba(255,60,60,.5),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s ease}
#closeRealShop:active{transform:scale(.85) rotate(90deg)}
.realShopSubtitle{text-align:center;color:#cfe0ff;font-size:12.5px;margin:-2px 0 18px;opacity:.85}
.realShopGrid{display:flex;flex-direction:column;gap:12px}
.realShopCard{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.2);border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.realShopCard.best{border-color:#ffcc00;box-shadow:0 0 20px rgba(255,204,0,.35),0 6px 18px rgba(0,0,0,.35)}
.realShopBadge{position:absolute;top:-9px;right:12px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:900;letter-spacing:.3px;background:linear-gradient(145deg,#ffea00,#ff6a00);color:#3a2200;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.realShopInfo{display:flex;flex-direction:column;gap:3px}
.realShopName{font-weight:800;font-size:15px}
.realShopAmount{color:#ffe600;font-weight:900;font-size:17px}
.realShopPrice{color:#9be9ff;font-size:12.5px;font-weight:700}
.realShopButton{flex:0 0 auto;padding:10px 18px;border:0;border-radius:14px;font-weight:900;font-size:13px;letter-spacing:.3px;color:white;background:linear-gradient(145deg,#3aeb98,#18a05e);box-shadow:0 4px 14px rgba(30,200,120,.45),inset 0 1px 0 rgba(255,255,255,.4);cursor:pointer;transition:transform .12s ease}
.realShopButton:active{transform:scale(.94)}
.realShopButton.soon{background:linear-gradient(145deg,#868da3,#4b5164);box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);cursor:default}
.realShopNote{text-align:center;margin-top:14px;font-size:11px;color:rgba(255,255,255,.55);font-style:italic}
.realShopSectionTitle{margin:16px 0 -2px;font-size:12px;font-weight:900;letter-spacing:1px;color:#ffe600;text-transform:uppercase;opacity:.85}
.realShopSectionTitle:first-child{margin-top:0}
.realShopDesc{color:#cfe0ff;font-size:12.5px;font-weight:600}
/* Two stacked buttons keep the card as narrow as the one-button cards next to it. */
.autoBtnRow{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}
.autoBtnRow .realShopButton{padding:7px 12px;font-size:11.5px}
.realShopButton.autoOff{background:linear-gradient(145deg,#ff8080,#c81e1e);box-shadow:0 4px 14px rgba(255,60,60,.4),inset 0 1px 0 rgba(255,255,255,.3)}
/* Whichever state the collector is in is the lit button; the other waits, dimmed. */
.autoBtnRow .realShopButton:not(.active){opacity:.4;box-shadow:none}
.autoBtnRow .realShopButton.active{box-shadow:0 0 14px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.4)}
/* The top of the screen is packed, so the badge sits low on the ground between the two
   control clusters -- clear of every button, and below where the player ever runs. */
#autoBadge{display:none;position:absolute;bottom:7px;left:50%;transform:translateX(-50%);z-index:50;padding:3px 11px;border-radius:12px;font-size:10px;font-weight:900;letter-spacing:1.5px;color:#7dffc4;background:rgba(0,0,0,.55);border:1px solid rgba(125,255,196,.65);box-shadow:0 0 12px rgba(58,235,152,.5);white-space:nowrap}
#autoBadge.show{display:block}
/* The last button in the game, standing in the middle of the Memory World. It sits
   above where the player ever runs and above where coins ever spawn, so it never
   steals a tap that was meant for the game. */
#finishGameButton{display:none;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);z-index:80;border:3px solid #fff;border-radius:20px;padding:14px clamp(16px,6vw,34px);font-size:clamp(15px,4.4vw,20px);font-weight:900;letter-spacing:1px;color:#fff;white-space:nowrap;background:linear-gradient(145deg,#ffd6f5,#c05cff 45%,#5a1a9e);box-shadow:0 0 26px rgba(255,150,240,.8),0 10px 26px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.5);cursor:pointer;animation:finishPulse 1.9s ease-in-out infinite}
#finishGameButton.show{display:block}
#finishGameButton:active{transform:translate(-50%,-50%) scale(.93)}
@keyframes finishPulse{0%,100%{box-shadow:0 0 26px rgba(255,150,240,.8),0 10px 26px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 44px rgba(255,190,250,1),0 10px 26px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.5)}}
.skinPreview.ember{background:linear-gradient(145deg,#ffd9a0,#ff7a18)}
.skinPreview.glass{background:linear-gradient(145deg,#dff6ff,#7be0ff 60%,#3b7fd4)}
.skinPreview.starlight{background:linear-gradient(145deg,#fffbe0,#ffe680 45%,#b98cff)}
.skinPreview.voidskin{background:radial-gradient(circle at 35% 30%,#3a1f5c,#000 70%)}

/* TUTORIAL */
#tutorialBox{position:absolute;left:50%;top:175px;transform:translateX(-50%);max-width:88%;padding:14px 22px;border-radius:18px;background:linear-gradient(145deg,#1a1a2e,#0d0d1a);border:2px solid #ffe600;box-shadow:0 0 20px rgba(255,230,0,.5),0 8px 20px rgba(0,0,0,.5);color:#fff;font-size:15px;font-weight:800;text-align:center;z-index:900;display:none}
#tutorialBox.show{display:block}
#tutorialBox.bounce{animation:tutorialBounce .5s ease}
@keyframes tutorialBounce{0%,100%{transform:translateX(-50%) translateY(0)}30%{transform:translateX(-50%) translateY(-14px)}50%{transform:translateX(-50%) translateY(4px)}70%{transform:translateX(-50%) translateY(-6px)}}
#tutorialSkipButton{position:absolute;top:-14px;right:-10px;border:0;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:bold;color:white;background:linear-gradient(145deg,#ff6f6f,#c81e1e);box-shadow:0 4px 10px rgba(255,60,60,.5);cursor:pointer}
#tutorialBackButton{position:absolute;top:-14px;left:-10px;border:0;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:bold;color:white;background:linear-gradient(145deg,#6fa8ff,#1e4ec8);box-shadow:0 4px 10px rgba(60,120,255,.5);cursor:pointer}
#tutorialBackButton:disabled{opacity:.35;cursor:default;box-shadow:none}
#tutorialArrow{position:absolute;font-size:34px;z-index:30;display:none;pointer-events:none;filter:drop-shadow(0 0 6px #fff);animation:tutArrowBounce 1s ease-in-out infinite}
#tutorialArrow.show{display:block}
@keyframes tutArrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.tutorialLocked{pointer-events:none!important;filter:grayscale(.6) brightness(.65)}
.tutorialGlow{animation:tutorialGlowPulse 1s ease-in-out infinite!important;box-shadow:0 0 25px 8px #ffe600!important;border-color:#ffe600!important}
@keyframes tutorialGlowPulse{0%,100%{box-shadow:0 0 15px 4px #ffe600}50%{box-shadow:0 0 32px 12px #fff700}}