*{margin:0;padding:0;box-sizing:border-box;font-family:Tahoma,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{overflow:hidden;background:#000;color:#fff;width:100%;height:100%;min-height:100dvh;touch-action:none}body{position:fixed;inset:0}body>canvas{max-width:100vw;max-height:100dvh}
canvas{display:block}

/* Loading */
#loading{position:fixed;inset:0;background:radial-gradient(ellipse at center,#1a0000,#000);display:flex;align-items:center;justify-content:center;z-index:999;flex-direction:column;padding:20px}
#loading h2{color:#ff4400;font-size:min(40px,10vw);margin-bottom:20px;text-shadow:0 0 20px #ff4400,0 0 40px #ff0000;animation:pulse 1.5s infinite}
#loading .bar{width:250px;height:8px;background:#333;border-radius:4px;overflow:hidden;margin-bottom:10px}
#loading .fill{height:100%;background:linear-gradient(90deg,#ff4400,#ffcc00);width:0%;transition:width 0.3s}
#loading .status{color:#aaa;font-size:13px;margin-top:10px}
#loading .tip{color:#ffcc00;font-size:13px;margin-top:15px;max-width:300px;text-align:center;line-height:1.5}
#loading.hidden{display:none}
#startGameBtn{margin-top:25px;padding:16px 45px;background:linear-gradient(135deg,#ff4400,#cc0000);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:20px;font-weight:bold;box-shadow:0 4px 15px rgba(255,68,0,0.5);animation:btnPulse 1.5s infinite}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
#errorDisplay{color:#f88;font-size:11px;margin-top:15px;max-width:300px;text-align:center;word-break:break-word}

/* Menu 3D Background canvas */
#menu3dCanvas{position:fixed;inset:0;z-index:99;pointer-events:none}

/* Menu - طراحی جدید حرفه‌ای */
#menu{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:100;padding:20px;overflow:hidden}
#menu.show{display:flex}
#menuBg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,rgba(58,0,0,0.7) 0%,rgba(26,0,0,0.85) 40%,rgba(0,0,0,0.95) 100%)}
.ember{position:absolute;width:4px;height:4px;background:#ff4400;border-radius:50%;box-shadow:0 0 6px #ff4400}
#menuBg::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,68,0,0.15) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,0,255,0.1) 0%,transparent 40%);animation:menuGradient 10s ease-in-out infinite}
@keyframes menuGradient{0%,100%{opacity:1}50%{opacity:0.5}}
.smoke{position:absolute;bottom:0;width:80px;height:80px;background:radial-gradient(circle,rgba(50,20,10,0.6),transparent 70%);border-radius:50%;animation:smokeRise 8s linear infinite}
@keyframes smokeRise{0%{transform:translateY(0) scale(0.5);opacity:0.6}100%{transform:translateY(-100vh) scale(2);opacity:0}}

#menuHeader{position:relative;z-index:2;text-align:center;margin-bottom:30px;animation:menuHeaderIn 1s ease-out}
@keyframes menuHeaderIn{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}
#menuHeader h1{font-size:min(72px,15vw);color:#ff4400;text-shadow:0 0 30px #ff4400,0 0 60px #ff0000,0 0 90px #ff0000;margin-bottom:10px;animation:titleGlitch 5s infinite;position:relative}
@keyframes titleGlitch{0%,90%,100%{text-shadow:0 0 30px #ff4400,0 0 60px #ff0000,0 0 90px #ff0000;transform:translate(0)}91%{text-shadow:-3px 0 #00ffff,3px 0 #ff00ff;transform:translate(2px,-2px)}93%{text-shadow:3px 0 #00ffff,-3px 0 #ff00ff;transform:translate(-2px,2px)}95%{text-shadow:0 0 30px #ff4400;transform:translate(0)}}
#menuHeader .sub{color:#ffaa88;font-size:min(15px,4vw);font-style:italic;margin-bottom:15px}
.totalScore{color:#ffcc00;font-size:16px;background:rgba(0,0,0,0.7);padding:10px 25px;border-radius:25px;border:2px solid #ffcc00;box-shadow:0 0 20px rgba(255,204,0,0.4);display:inline-block}

/* Main content layout */
#menuMain{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;animation:menuMainIn 1.2s ease-out}
@keyframes menuMainIn{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}

/* Big Play Button */
#playBtnMain{padding:22px 70px;font-size:min(28px,7vw);background:linear-gradient(135deg,#ffaa00 0%,#ff4400 50%,#cc0000 100%);color:#fff;border:none;border-radius:20px;cursor:pointer;font-weight:bold;box-shadow:0 0 40px rgba(255,170,0,0.7),inset 0 2px 20px rgba(255,255,255,0.2);text-shadow:0 2px 10px rgba(0,0,0,0.5);position:relative;overflow:hidden;min-width:280px;animation:playBtnPulse 2s infinite;border:3px solid rgba(255,255,255,0.3)}
@keyframes playBtnPulse{0%,100%{box-shadow:0 0 40px rgba(255,170,0,0.7),inset 0 2px 20px rgba(255,255,255,0.2);transform:scale(1)}50%{box-shadow:0 0 60px rgba(255,170,0,1),inset 0 2px 30px rgba(255,255,255,0.4);transform:scale(1.03)}}
#playBtnMain::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);transition:left 0.5s}
#playBtnMain:hover::before{left:100%}
#playBtnMain:active{transform:scale(0.98)}

/* Small buttons grid - 2 rows */
.menuBtnRow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.menuSmallBtn{padding:12px 22px;font-size:min(14px,3.8vw);color:#fff;border:2px solid;border-radius:12px;cursor:pointer;transition:all 0.3s;background:linear-gradient(135deg,rgba(30,30,30,0.9),rgba(10,10,10,0.9));min-width:130px;font-weight:bold;position:relative;overflow:hidden;backdrop-filter:blur(5px)}
.menuSmallBtn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.menuSmallBtn:hover::before{left:100%}
.menuSmallBtn:hover{transform:translateY(-4px);box-shadow:0 8px 20px currentColor}
.menuSmallBtn:active{transform:scale(0.95)}
.menuSmallBtn.shop{border-color:#00cc88;color:#00ff88}
.menuSmallBtn.shop:hover{background:linear-gradient(135deg,rgba(0,50,30,0.9),rgba(0,20,10,0.9));box-shadow:0 8px 25px rgba(0,255,136,0.5)}
.menuSmallBtn.stats{border-color:#0088ff;color:#00aaff}
.menuSmallBtn.stats:hover{background:linear-gradient(135deg,rgba(0,30,50,0.9),rgba(0,10,20,0.9));box-shadow:0 8px 25px rgba(0,170,255,0.5)}
.menuSmallBtn.lb{border-color:#ffcc00;color:#ffcc00}
.menuSmallBtn.lb:hover{background:linear-gradient(135deg,rgba(50,40,0,0.9),rgba(20,15,0,0.9));box-shadow:0 8px 25px rgba(255,204,0,0.5)}
.menuSmallBtn.quest{border-color:#00ff88;color:#00ff88}
.menuSmallBtn.quest:hover{background:linear-gradient(135deg,rgba(0,50,20,0.9),rgba(0,20,10,0.9));box-shadow:0 8px 25px rgba(0,255,136,0.5)}
.menuSmallBtn.slot{border-color:#ff8800;color:#ffaa00}
.menuSmallBtn.slot:hover{background:linear-gradient(135deg,rgba(50,30,0,0.9),rgba(20,10,0,0.9));box-shadow:0 8px 25px rgba(255,170,0,0.5)}
.menuSmallBtn.tut{border-color:#888;color:#ccc}
.menuSmallBtn.tut:hover{background:linear-gradient(135deg,rgba(40,40,40,0.9),rgba(20,20,20,0.9));box-shadow:0 8px 25px rgba(200,200,200,0.3)}

#credit{position:fixed;bottom:5px;left:0;right:0;text-align:center;color:#888;font-size:11px;z-index:2;pointer-events:none;text-shadow:0 0 5px #000}
#lang-switch{position:fixed;top:15px;right:15px;z-index:110;padding:8px;background:#222;color:#fff;border:1px solid #ff4400;border-radius:6px}

/* Mode Select */
#modeSelect{position:fixed;inset:0;background:radial-gradient(ellipse at center,#1a0011,#000);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:210;padding:20px;overflow-y:auto}
#modeSelect h2{color:#ff4400;font-size:min(36px,8vw);margin-bottom:30px;text-align:center;text-shadow:0 0 20px #ff4400}
.modeBtn{width:320px;padding:22px;margin:10px;background:linear-gradient(135deg,#2a2a2a,#111);border:2px solid #ff4400;border-radius:15px;cursor:pointer;color:#fff;transition:all 0.3s;position:relative;overflow:hidden}
.modeBtn:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 10px 30px rgba(255,68,0,0.6)}
.modeBtn h3{color:#ff4400;font-size:24px;margin-bottom:10px;text-shadow:0 0 10px #ff4400}
.modeBtn p{color:#ccc;font-size:13px;line-height:1.5}
.modeBtn.mode2 h3{color:#cc00ff;text-shadow:0 0 10px #cc00ff}
.modeBtn.mode2{border-color:#cc00ff}
.modeBtn.mode2:hover{box-shadow:0 10px 30px rgba(204,0,255,0.6)}
.modeBtn.bossRush h3{color:#ffcc00;text-shadow:0 0 10px #ffcc00}
.modeBtn.bossRush{border-color:#ffcc00}
.modeBtn.bossRush:hover{box-shadow:0 10px 30px rgba(255,204,0,0.6)}
.modeBtn.multiplayer h3{color:#00e5ff;text-shadow:0 0 12px #00e5ff}
.modeBtn.multiplayer{border-color:#00aaff;background:linear-gradient(135deg,#082b3a,#10121b)}
.modeBtn.multiplayer:hover{box-shadow:0 10px 30px rgba(0,200,255,0.65)}

/* Multiplayer prototype / lobby */
#multiplayerMenu,#multiLobby{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;z-index:240;padding:20px;overflow-y:auto;background:radial-gradient(ellipse at center,#062535,#03060b 72%)}
#multiplayerMenu.show,#multiLobby.show{display:flex}
.multiPanel{width:min(620px,94vw);max-height:92vh;overflow-y:auto;background:linear-gradient(145deg,rgba(13,39,54,.98),rgba(8,10,18,.98));border:2px solid #00cfff;border-radius:18px;padding:22px;box-shadow:0 0 35px rgba(0,190,255,.28);text-align:center}
.multiPanel h2{color:#00e5ff;font-size:min(32px,8vw);margin-bottom:10px;text-shadow:0 0 18px #00bfff}
.multiPanel .muted{color:#a8c3ce;font-size:12px;line-height:1.7;margin-bottom:15px}
.multiChoiceRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.multiChoice{flex:1 1 210px;min-width:180px;padding:16px 12px;background:#111c25;color:#fff;border:2px solid #315160;border-radius:12px;cursor:pointer;font-weight:bold;transition:.2s}
.multiChoice:hover,.multiChoice.active{border-color:#00e5ff;background:#06384a;box-shadow:0 0 18px rgba(0,229,255,.28)}
.multiChoice small{display:block;color:#a8c3ce;font-weight:normal;font-size:11px;line-height:1.6;margin-top:5px}
.multiInput{width:100%;padding:12px 14px;margin:6px 0;background:#0b1117;color:#fff;border:1px solid #396172;border-radius:8px;font-size:14px;text-align:right;outline:none}
.multiInput:focus{border-color:#00e5ff;box-shadow:0 0 10px rgba(0,229,255,.2)}
.multiBtn{padding:12px 22px;margin:5px;background:linear-gradient(135deg,#00d4ff,#0077aa);color:#001018;border:none;border-radius:9px;cursor:pointer;font-weight:bold;font-size:14px}
.multiBtn.secondary{background:#26353d;color:#fff;border:1px solid #55707c}
.multiBtn.danger{background:#6d2330;color:#fff;border:1px solid #e34d65}
.multiStatus{min-height:24px;color:#ffcf5a;font-size:12px;margin:10px 0;line-height:1.6}
.multiRoomList{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin:12px 0;max-height:190px;overflow-y:auto}
.multiRoom{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#101a22;border:1px solid #2b5363;padding:10px;border-radius:8px;text-align:right;font-size:12px}
.multiRoom button{padding:6px 10px;background:#00aacc;color:#001018;border:0;border-radius:6px;cursor:pointer;font-weight:bold}
.multiRoster{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:12px 0;text-align:right}
.multiChat{margin-top:14px;border:1px solid #2b5363;border-radius:10px;background:#09141b;padding:8px;text-align:right}.multiChatLog{height:90px;overflow-y:auto;font-size:11px;color:#c5dce3;line-height:1.7;padding:5px}.multiChatRow{display:flex;gap:5px}.multiChatRow input{flex:1;background:#101b23;color:#fff;border:1px solid #315565;border-radius:6px;padding:8px;min-width:0}.multiChatRow button{background:#00aacc;color:#001018;border:0;border-radius:6px;padding:0 12px;font-weight:bold}
.multiPlayer{background:#0e1820;border:1px solid #315565;border-radius:9px;padding:9px;font-size:12px;color:#fff}
.multiPlayer .role{color:#00e5ff;font-size:10px;display:block;margin-top:4px}
.readyState{font-size:10px;display:block;margin-top:3px}.readyState.ok{color:#00ff9d}.readyState.no{color:#ff6b6b}
.multiPlayer.mamad{border-color:#ff5b45;background:#2a1112}.multiPlayer.mamad .role{color:#ff9a80}
.multiRules{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:7px;margin:15px 0;text-align:right}
.multiRule{background:rgba(0,0,0,.25);border-right:3px solid #00cfff;padding:8px;font-size:11px;color:#c9e8ef;border-radius:5px}
#multiHUD{position:fixed;top:70px;right:15px;z-index:35;display:none;width:54px;height:54px;background:rgba(4,30,48,.94);border:2px solid #00d9ff;border-radius:10px;padding:0;color:#fff;pointer-events:auto;box-shadow:0 0 20px rgba(0,200,255,.32);transition:width .22s,height .22s,background .22s}
#multiHUD.active{display:block}
#multiHUD.expanded{width:min(300px,86vw);height:auto;padding:10px;background:rgba(4,14,20,.92)}
#multiHUDToggle{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:50px;border:0;border-radius:8px;background:transparent;color:#62eaff;font-size:16px;font-weight:bold;cursor:pointer;touch-action:manipulation}
#multiHUD.expanded #multiHUDToggle{height:25px;min-height:25px;justify-content:flex-start;padding:0 4px;color:#9defff;font-size:11px}
#multiHUDPanel{display:none}
#multiHUD.expanded #multiHUDPanel{display:block}
#multiMiniStats{position:absolute;top:57px;right:0;display:flex;align-items:center;gap:5px;padding:4px 7px;background:rgba(4,30,48,.94);border:1px solid #00d9ff;border-radius:8px;white-space:nowrap;font-size:11px}.miniStaminaTrack{display:inline-block;width:42px;height:6px;border-radius:4px;background:#26343a;overflow:hidden}.miniStaminaTrack i{display:block;height:100%;width:100%;background:#ffbd32}#multiDeathPanel{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:190;padding:18px}#multiDeathPanel.show{display:flex}
#multiHUD .multiTimer{font-size:21px;color:#ffcf5a;font-weight:bold;text-align:center;margin-bottom:6px}
#multiHUD .multiRole{color:#00e5ff;font-weight:bold;text-align:center;margin-bottom:6px;font-size:12px}
#multiHUD .multiPlayers{font-size:11px;color:#c5dce3;line-height:1.7;margin-top:6px}.multiHint{font-size:10px;color:#8fb4c0;text-align:center;margin:4px 0 6px}
.multiBars{display:flex;flex-direction:column;gap:6px;margin:8px 0}.multiBarLine{display:flex;align-items:center;gap:6px}.multiBar{height:9px;flex:1;background:#202a31;border-radius:6px;overflow:hidden;border:1px solid #315361}.multiBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#00ff88,#00bbff);transition:width .15s}.multiBar.stamina i{background:linear-gradient(90deg,#ffcf3e,#ff7a00)}
#multiBlackout{position:fixed;inset:0;display:none;background:rgba(0,0,0,.9);pointer-events:none;z-index:12;mix-blend-mode:multiply}
#multiTopline{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:-2px 0 13px}.multiBadge{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:18px;background:#0b202a;border:1px solid #286176;color:#c8edf4;font-size:11px}.multiBadge.online{color:#00ffb3;border-color:#00a977}.multiBadge.offline{color:#ffcf5a;border-color:#9b7430}
#multiNameModal,#multiCodeModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);z-index:700;padding:20px}.multiModalBox{width:min(430px,92vw);background:linear-gradient(145deg,#102d3a,#0b1018);border:2px solid #00e5ff;border-radius:16px;padding:22px;text-align:center;box-shadow:0 0 35px rgba(0,220,255,.35)}.multiModalBox h3{color:#00e5ff;font-size:22px;margin-bottom:8px}.multiModalBox p{color:#c5dce3;font-size:12px;line-height:1.7;margin-bottom:12px}.multiModalBtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#multiBlackout.active{display:block;animation:multiBlackoutPulse .35s infinite alternate}@keyframes multiBlackoutPulse{from{opacity:.86}to{opacity:.96}}
#multiUpgrade{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.78);z-index:305;padding:18px}
#multiUpgrade.show{display:flex}
#multiUpgrade .box{width:min(650px,94vw);background:linear-gradient(145deg,#102d3a,#0b1018);border:2px solid #00e5ff;border-radius:16px;padding:20px;text-align:center;box-shadow:0 0 35px rgba(0,220,255,.35)}
#multiUpgrade h2{color:#00e5ff;margin-bottom:8px}.multiUpgradeOptions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:15px}
.multiUpgradeCard{flex:1 1 170px;min-height:120px;padding:15px;background:#13222b;border:2px solid #286176;border-radius:11px;color:#fff;cursor:pointer}.multiUpgradeCard:hover{border-color:#00e5ff;transform:translateY(-3px)}
.multiUpgradeCard b{display:block;color:#ffcf5a;font-size:15px;margin-bottom:8px}.multiUpgradeCard small{color:#c5dce3;line-height:1.6;font-size:11px}
.upgradeKeyHint{display:none;position:absolute;top:7px;left:8px;min-width:22px;padding:2px 5px;border:1px solid #ffcf5a;border-radius:5px;color:#ffcf5a;font-size:11px;font-weight:bold;background:rgba(0,0,0,.35)}.multiUpgradeCard{position:relative}@media (hover:hover) and (pointer:fine){.upgradeKeyHint{display:inline-block}}


/* Multiplayer v4.0.0 premium lobby flow */
.multiStepTitle{margin:14px 0 8px;color:#ffcf5a;font-size:13px;font-weight:bold;text-align:right;border-right:3px solid #00e5ff;padding:7px 10px;background:rgba(0,229,255,.06);border-radius:7px}
#multiCurrentPlan{display:none;margin:10px 0 12px;padding:12px;border:1px solid rgba(0,229,255,.35);border-radius:12px;background:linear-gradient(135deg,rgba(0,229,255,.09),rgba(0,0,0,.18));text-align:right;color:#d8f7ff;font-size:12px;line-height:1.8}
#multiCurrentPlan b{color:#ffcf5a}.multiLockedHint{display:none;color:#91b4bf;font-size:10px;margin-top:5px}.multiChoice.locked{opacity:.58;filter:grayscale(.35);cursor:not-allowed}.multiChoice.locked:hover{transform:none;box-shadow:none;border-color:#315160;background:#111c25}
.multiLobbyActions{border-top:1px solid rgba(0,229,255,.16);padding-top:10px;margin-top:10px}.multiRoomCodePill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #00e5ff;border-radius:99px;background:rgba(0,229,255,.08);color:#9df3ff;font-size:11px;direction:ltr}
#gameOver.multiResult{background:radial-gradient(ellipse at 50% 25%,rgba(0,190,255,.2),rgba(0,0,0,.98) 70%),linear-gradient(145deg,rgba(3,20,33,.96),rgba(0,0,0,.98))}#gameOver.multiResult.win{background:radial-gradient(ellipse at 50% 25%,rgba(0,255,160,.22),rgba(0,0,0,.98) 70%),linear-gradient(145deg,rgba(0,35,28,.96),rgba(0,0,0,.98))}#gameOver.multiResult h2{color:#00e5ff;text-shadow:0 0 28px #00cfff}#gameOver.multiResult.win h2{color:#00ff9d;text-shadow:0 0 28px #00ff9d}

/* Character Select */
#charSelect{position:fixed;inset:0;background:#050505;display:none;flex-direction:column;align-items:center;padding:15px;z-index:220;overflow-y:auto;-webkit-overflow-scrolling:touch;isolation:isolate}
#charSelect.show{display:flex}
/* prevent main menu/footer/3d canvas from flashing through while scrolling char select */
#charSelect.show ~ #menu, body.char-selecting #menu{visibility:hidden !important;pointer-events:none !important}
body.char-selecting #menu3dCanvas, body.char-selecting #credit, body.char-selecting #version, body.char-selecting #telegramBtn, body.char-selecting #redeemBtn{display:none !important}
#charSelect h2{color:#ff4400;font-size:min(26px,7vw);margin-bottom:10px;text-align:center;text-shadow:0 0 15px #ff4400}
#charSelect .info{color:#ffcc00;font-size:13px;margin-bottom:10px}
#difficultyRow{display:flex;gap:6px;margin-bottom:15px;flex-wrap:wrap;justify-content:center}
.diffBtn{padding:6px 14px;background:#222;color:#fff;border:1px solid #ff4400;border-radius:6px;cursor:pointer;font-size:12px}
.diffBtn.active{font-weight:bold;transform:scale(1.05)}
.diffBtn.easy{border-color:#00ff88}
.diffBtn.easy.active{background:#00cc66}
.diffBtn.normal{border-color:#ffcc00}
.diffBtn.normal.active{background:#ff8800}
.diffBtn.hard{border-color:#ff4400}
.diffBtn.hard.active{background:#cc0000}
.diffBtn.hell{border-color:#ff00ff}
.diffBtn.hell.active{background:#aa00ff}
#charGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-width:1200px;width:100%;padding-bottom:80px}
.charCard{background:linear-gradient(135deg,#1a1a1a,#0a0a0a);border:2px solid #333;border-radius:12px;padding:8px;cursor:pointer;text-align:center;position:relative;transition:all 0.3s}
.charCard:hover{border-color:#ff4400;transform:translateY(-3px)}
.charCard.selected{border-color:#00ff88;box-shadow:0 0 25px #00ff88;transform:translateY(-5px)}
.charCard.locked{opacity:0.5;filter:grayscale(1);cursor:not-allowed}
.charCard.locked::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;text-shadow:0 0 10px #000}
.charCard.locked .unlockAt{position:absolute;bottom:5px;left:5px;right:5px;background:rgba(0,0,0,0.8);color:#ffcc00;padding:3px;border-radius:5px;font-size:10px}
.charCard.hiddenChar{background:linear-gradient(135deg,#1a0011,#0a0011)}
.charCard.hiddenChar h3{color:#666}
.charCard.hiddenChar p{color:#444}
.charCard img{width:100%;height:130px;object-fit:cover;border-radius:6px;margin-bottom:6px;background:#222}
.charCard h3{color:#ff4400;font-size:13px;margin-bottom:3px}
.charCard p{color:#aaa;font-size:10px;line-height:1.3}
.charCard .ability{color:#ffcc00;font-size:9px;margin-top:4px;font-style:italic}
.charCard .upgrades{color:#00ff88;font-size:9px;margin-top:3px}
#startBtn{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);padding:14px 50px;font-size:20px;background:linear-gradient(135deg,#00ff88,#00cc66);color:#000;border:none;border-radius:10px;cursor:pointer;font-weight:bold;box-shadow:0 4px 20px rgba(0,255,136,0.5);z-index:230}
#startBtn:disabled{opacity:0.3;cursor:not-allowed}
#charBack{position:fixed;top:15px;left:15px;padding:8px 15px;background:#333;color:#fff;border:1px solid #ff4400;border-radius:6px;cursor:pointer;font-size:13px;z-index:230}
#modeBackBtn{position:fixed;top:15px;left:15px;padding:8px 15px;background:#333;color:#fff;border:1px solid #ff4400;border-radius:6px;cursor:pointer;font-size:13px;z-index:106}

/* HUD */
#hud{position:fixed;top:10px;left:10px;z-index:10;display:none;pointer-events:none}
#hud.active{display:block}
.hud-item{background:rgba(0,0,0,0.7);padding:7px 12px;border-radius:8px;margin-bottom:5px;border:1px solid #ff4400;font-size:13px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(5px)}
#stamina-bar{width:120px;height:8px;background:#333;border-radius:4px;overflow:hidden}
#stamina-fill{height:100%;background:linear-gradient(90deg,#00ff88,#00cc66);width:100%;transition:width 0.1s}
#comboDisplay{background:rgba(0,0,0,0.7);padding:7px 12px;border-radius:8px;border:1px solid #ffcc00;font-size:16px;color:#ffcc00;font-weight:bold;display:none}
#comboDisplay.active{display:flex;align-items:center;gap:6px}
#rewindDisplay{background:rgba(0,0,0,0.7);padding:7px 12px;border-radius:8px;border:1px solid #00aaff;font-size:13px;color:#00aaff;display:none}
#rewindDisplay.active{display:flex;align-items:center;gap:6px}

/* Ability */
#abilityHud{position:fixed;top:70px;right:15px;z-index:30;display:none;pointer-events:auto;flex-direction:column;align-items:center;gap:5px}
#abilityHud.active{display:flex}
#abilityBtn{padding:10px 20px;font-size:14px;background:linear-gradient(135deg,#ffcc00,#ff8800);color:#000;border:none;border-radius:10px;cursor:pointer;font-weight:bold;box-shadow:0 0 20px rgba(255,204,0,0.5);touch-action:manipulation}
#abilityBtn:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(0.8)}
#abilityInfo{color:#ffcc00;font-size:11px;background:rgba(0,0,0,0.7);padding:3px 10px;border-radius:5px}

/* Pause */
#pauseBtn{position:fixed;top:15px;right:15px;width:40px;height:40px;background:rgba(0,0,0,0.7);color:#fff;border:2px solid #ff4400;border-radius:8px;cursor:pointer;font-size:18px;z-index:30;display:none;touch-action:manipulation}
#pauseBtn.active{display:block}

/* Mobile Controls */
#mobileControls{position:fixed;inset:0;z-index:20;pointer-events:none;display:none}
#mobileControls.active{display:block}
#joystick{position:absolute;bottom:80px;left:30px;width:120px;height:120px;background:rgba(255,255,255,0.15);border:2px solid rgba(255,68,0,0.6);border-radius:50%;pointer-events:auto;z-index:25;touch-action:none}
#stick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:rgba(255,68,0,0.6);border-radius:50%;border:2px solid rgba(255,255,255,0.5)}
#runBtn{position:absolute;bottom:80px;right:30px;width:75px;height:75px;background:rgba(0,255,136,0.4);border:3px solid #00ff88;border-radius:50%;pointer-events:auto;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;z-index:25;touch-action:none}
#runBtn.active{background:rgba(0,255,136,0.8)}
#lookArea{position:absolute;top:0;right:0;width:50%;height:60%;pointer-events:auto;z-index:22}
#shootBtn{position:fixed;bottom:80px;right:120px;width:75px;height:75px;background:rgba(255,50,50,0.6);border:3px solid #ff2222;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:28px;color:#fff;pointer-events:auto;z-index:25;touch-action:none}
#shootBtn.active{display:flex}
#rewindBtn{position:fixed;bottom:170px;right:30px;width:65px;height:65px;background:rgba(0,170,255,0.6);border:3px solid #00aaff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:22px;color:#fff;pointer-events:auto;z-index:25;touch-action:none}
#rewindBtn.active{display:flex}
#rewindBtn.disabled{opacity:0.4;filter:grayscale(0.8)}

/* Subtitle */
#subtitle{position:fixed;bottom:8%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.92);color:#fff;padding:14px 25px;border-radius:10px;font-size:min(20px,5vw);border:2px solid #ff4400;text-align:center;max-width:85%;display:none;z-index:200;box-shadow:0 0 30px rgba(255,68,0,0.5);pointer-events:none}
.sub-who{color:#ffcc00;font-size:12px;margin-bottom:4px;display:block;opacity:0.9}

/* Game Over */
#gameOver{position:fixed;inset:0;background:radial-gradient(ellipse,rgba(80,0,0,0.95),rgba(0,0,0,0.98));display:none;flex-direction:column;align-items:center;justify-content:center;z-index:150;padding:20px}
#gameOver.win{background:radial-gradient(ellipse,rgba(0,80,40,0.95),rgba(0,0,0,0.98))}
#gameOver h2{font-size:min(50px,10vw);color:#ff0000;text-shadow:0 0 30px #ff0000;margin-bottom:15px;text-align:center;animation:shake 0.5s}
#gameOver.win h2{color:#00ff88;text-shadow:0 0 30px #00ff88;animation:none}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
#gameOver p{font-size:min(18px,5vw);margin:6px}
#gameOver input{padding:10px;font-size:16px;margin:8px;border-radius:8px;border:2px solid #ff4400;background:#111;color:#fff;text-align:center;width:200px}
#gameOver .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.menu-btn{padding:12px 30px;font-size:min(17px,4.5vw);margin:5px;background:linear-gradient(135deg,#ff4400,#cc0000);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all 0.3s;min-width:180px}
.menu-btn:hover{transform:translateY(-3px)}

/* Slot Machine */
#slotMachine{position:fixed;inset:0;background:rgba(0,0,0,0.95);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:350;padding:20px}
#slotMachine h2{color:#ffcc00;font-size:min(36px,8vw);margin-bottom:15px;text-align:center;text-shadow:0 0 20px #ffcc00}
#slotMachine .info{color:#ccc;margin-bottom:20px;text-align:center;font-size:14px}
#slotReels{display:flex;gap:10px;margin-bottom:30px;background:linear-gradient(135deg,#3a2a00,#1a1200);padding:20px;border-radius:15px;border:3px solid #ffcc00;box-shadow:0 0 30px rgba(255,204,0,0.5)}
.slotReel{width:80px;height:100px;background:#000;border:2px solid #ffcc00;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:50px;overflow:hidden}
#slotResult{color:#00ff88;font-size:20px;margin-bottom:20px;text-align:center;min-height:30px;font-weight:bold}
#slotSpinBtn{padding:15px 40px;background:linear-gradient(135deg,#ffcc00,#ff8800);color:#000;border:none;border-radius:10px;cursor:pointer;font-size:18px;font-weight:bold;margin:5px}
#slotSpinBtn:disabled{opacity:0.4;filter:grayscale(1);cursor:not-allowed}
#slotClose{padding:12px 30px;background:#555;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:16px;margin:5px}

/* Leaderboard */
#leaderboard{position:fixed;inset:0;background:rgba(0,0,0,0.97);display:none;flex-direction:column;align-items:center;padding:20px;z-index:120;overflow-y:auto}
#leaderboard h2{color:#ffcc00;font-size:min(32px,8vw);margin-bottom:15px;text-shadow:0 0 20px #ffcc00}
#lbTabs{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap;justify-content:center}
.lbTab{padding:8px 18px;background:#222;color:#fff;border:1px solid #ff4400;border-radius:6px;cursor:pointer;font-size:13px}
.lbTab.active{background:#ff4400}
#lbList{width:100%;max-width:600px}
.lbRow{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:linear-gradient(90deg,#1a1a1a,#111);margin-bottom:5px;border-radius:8px;border-right:4px solid #ff4400;font-size:13px}
.lbRow.top{border-right-color:#ffcc00;background:linear-gradient(90deg,#2a1a00,#111)}
.lbRow.hidden-ach{background:linear-gradient(90deg,#1a0011,#000);border-right-color:#666;filter:grayscale(0.5)}
.lbRow.hidden-ach.top{border-right-color:#ff00ff;filter:none}

/* Weekly Quests */
#weeklyQuests{position:fixed;inset:0;background:rgba(0,0,0,0.95);display:none;flex-direction:column;align-items:center;padding:20px;z-index:115;overflow-y:auto}
#weeklyQuests h2{color:#00ff88;font-size:min(32px,8vw);margin-bottom:10px;text-shadow:0 0 15px #00ff88}
#weeklyQuests .timeLeft{color:#ffcc00;margin-bottom:15px}
#questList{width:100%;max-width:500px}
.questItem{background:linear-gradient(90deg,#0a2a1a,#0a1a10);border:2px solid #00ff88;border-radius:10px;padding:15px;margin-bottom:10px}
.questItem.completed{border-color:#ffcc00;background:linear-gradient(90deg,#2a2a00,#1a1a00)}
.questItem h3{color:#00ff88;font-size:16px;margin-bottom:5px}
.questItem.completed h3{color:#ffcc00}
.questItem p{color:#ccc;font-size:13px;margin-bottom:8px}
.questProgress{width:100%;height:10px;background:#222;border-radius:5px;overflow:hidden;margin-bottom:5px}
.questFill{height:100%;background:linear-gradient(90deg,#00ff88,#00cc66);width:0%;transition:width 0.3s}
.questReward{color:#ffcc00;font-size:12px}

/* Achievement popup */
#achievePopup{position:fixed;top:100px;right:-400px;background:linear-gradient(135deg,#ffcc00,#ff8800);color:#000;padding:15px 20px;border-radius:10px;z-index:400;transition:right 0.5s;max-width:300px;font-weight:bold;box-shadow:0 4px 20px rgba(255,204,0,0.5)}
#achievePopup.show{right:20px}
#achievePopup.hidden-ach{background:linear-gradient(135deg,#cc00ff,#6600aa);color:#fff}
#achievePopup h4{font-size:14px;color:#660000;margin-bottom:3px}
#achievePopup.hidden-ach h4{color:#fff}
#achievePopup p{font-size:12px}

/* Overlays */
#fireOverlay{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity 0.5s}
#fireOverlay.burn1{opacity:1;background:radial-gradient(ellipse at center,transparent 50%,rgba(255,68,0,0.3) 100%)}
#fireOverlay.burn2{opacity:1;background:radial-gradient(ellipse at center,transparent 30%,rgba(255,68,0,0.5) 100%)}
#fireOverlay.burn3{opacity:1;background:radial-gradient(ellipse at center,transparent 10%,rgba(255,0,0,0.7) 100%)}
#damageFlash{position:fixed;inset:0;pointer-events:none;z-index:6;background:rgba(255,0,0,0.5);opacity:0}
#damageFlash.hit{animation:flash 0.4s}
@keyframes flash{0%{opacity:0.7}100%{opacity:0}}
#whiteFlash{position:fixed;inset:0;pointer-events:none;z-index:7;background:#fff;opacity:0}
#whiteFlash.on{animation:whiteFlash 0.8s}
@keyframes whiteFlash{0%{opacity:1}100%{opacity:0}}
#endWhite{position:fixed;inset:0;pointer-events:none;z-index:400;background:#fff;opacity:0;transition:opacity 3s}
#endWhite.on{opacity:1}
#endText{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);color:#000;font-size:min(80px,14vw);font-weight:bold;text-shadow:0 0 40px #ffcc00;opacity:0;z-index:401;pointer-events:none;text-align:center;transition:all 2s}
#endText.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#rageOverlay{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(circle,transparent 40%,rgba(255,50,0,0.4) 100%);mix-blend-mode:screen}
#rageOverlay.active{opacity:1;animation:ragePulse 0.5s infinite alternate}
@keyframes ragePulse{0%{filter:brightness(1)}100%{filter:brightness(1.3)}}
#drugOverlay{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(circle,rgba(255,0,255,0.2),rgba(0,255,0,0.1),rgba(255,255,0,0.15));mix-blend-mode:screen}
#drugOverlay.active{opacity:1;animation:psychedelic 0.5s infinite alternate}
@keyframes psychedelic{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(180deg)}}
#weddingOverlay{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;background:linear-gradient(45deg,rgba(255,0,255,0.15),rgba(0,255,255,0.15),rgba(255,255,0,0.15),rgba(255,0,150,0.15));mix-blend-mode:screen}
#weddingOverlay.active{opacity:1;animation:discoLight 0.5s infinite alternate}
@keyframes discoLight{0%{filter:hue-rotate(0deg) brightness(1)}100%{filter:hue-rotate(360deg) brightness(1.4)}}
#bossOverlay{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity 1s;background:radial-gradient(circle,transparent 20%,rgba(255,0,0,0.3) 100%)}
#bossOverlay.active{opacity:1;animation:bossPulse 1s infinite alternate}
@keyframes bossPulse{0%{filter:brightness(0.9)}100%{filter:brightness(1.2)}}
#bossAlarm{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;background:rgba(255,0,0,0.4)}
#bossAlarm.on{animation:alarm 0.3s infinite alternate}
@keyframes alarm{0%{opacity:0}100%{opacity:0.6}}
#fpOverlay{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;display:none;background:radial-gradient(circle,transparent 50%,rgba(0,0,0,0.6) 100%);border-radius:0}
#fpOverlay.active{display:block;opacity:1}#slowmoOverlay{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity 0.2s;background:radial-gradient(circle,transparent 30%,rgba(0,100,255,0.2) 100%)}
#slowmoOverlay.active{opacity:1}

/* Notifications */
#phaseNotif{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:min(70px,14vw);color:#ffcc00;text-shadow:0 0 40px #ff4400;opacity:0;pointer-events:none;z-index:50;font-weight:bold;text-align:center}
#phaseNotif.show{animation:phaseIn 2.5s ease-out}
@keyframes phaseIn{0%{opacity:0;transform:translate(-50%,-50%) scale(0.3)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
#killstreak{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:min(50px,10vw);color:#00ff88;text-shadow:0 0 30px #00ff88;opacity:0;pointer-events:none;z-index:50;font-weight:bold}
#killstreak.show{animation:ksIn 2s ease-out}
@keyframes ksIn{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0}}
#dodgeNotif{position:fixed;top:35%;left:50%;transform:translate(-50%,-50%);color:#00ffff;text-shadow:0 0 20px #00ffff;font-size:min(36px,7vw);opacity:0;pointer-events:none;z-index:50;font-weight:bold}
#dodgeNotif.show{animation:dodgeIn 1.5s ease-out}
@keyframes dodgeIn{0%{opacity:0}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0}}
#itemHint{position:fixed;bottom:12%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.82);color:#fff;padding:8px 16px;border-radius:8px;z-index:40;display:none;font-size:12px;border:1px solid #ffcc00;max-width:80%;text-align:center;pointer-events:none}
#itemHint.show{display:block;animation:hintPulse 1s infinite alternate}
@keyframes hintPulse{0%{transform:translateX(-50%) scale(1);opacity:0.95}100%{transform:translateX(-50%) scale(1.03);opacity:1}}

/* Skip */
#cutsceneSkipBtn{position:fixed;bottom:20px;right:20px;padding:8px 20px;background:rgba(0,0,0,0.8);color:#fff;border:1px solid #ff4400;border-radius:6px;z-index:250;display:none;font-size:14px;cursor:pointer}
#cutsceneSkipBtn.active{display:block}

/* Timer */
#timer{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.8);color:#ffcc00;padding:8px 20px;border-radius:8px;font-size:20px;font-weight:bold;border:2px solid #ffcc00;z-index:15;display:none}
#timer.active{display:block}

/* Upgrade Panel */
#upgradePanel{position:fixed;inset:0;background:rgba(0,0,0,0.95);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:300;padding:20px}
#upgradePanel h2{color:#ffcc00;font-size:min(36px,8vw);margin-bottom:30px;text-align:center;text-shadow:0 0 20px #ffcc00}
#upgradeOptions{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}
.upgradeCard{width:200px;padding:20px;background:linear-gradient(135deg,#3a1a00,#1a0a00);border:2px solid #ff8800;border-radius:12px;cursor:pointer;text-align:center;transition:all 0.3s}
.upgradeCard:hover{border-color:#ffcc00;transform:translateY(-5px);box-shadow:0 10px 30px rgba(255,204,0,0.5)}
.upgradeCard .icon{font-size:50px;margin-bottom:10px}
.upgradeCard h3{color:#ffcc00;font-size:18px;margin-bottom:8px}
.upgradeCard p{color:#ccc;font-size:12px}

/* Pause Menu */
#pauseMenu{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:500;padding:20px}
#pauseMenu h2{color:#ffcc00;font-size:min(48px,10vw);margin-bottom:30px;text-shadow:0 0 20px #ffcc00}
#pauseMenu .row{display:flex;align-items:center;gap:10px;margin:10px 0;color:#fff;font-size:16px}
#pauseMenu input[type="range"]{width:150px}

/* Shop */
#shop{position:fixed;inset:0;background:linear-gradient(135deg,#0a2a1a,#000);display:none;flex-direction:column;align-items:center;padding:20px;z-index:110;overflow-y:auto}
#shop h2{color:#00ff88;font-size:min(36px,8vw);margin-bottom:10px;text-align:center;text-shadow:0 0 20px #00ff88}
#shop .balance{color:#ffcc00;font-size:16px;margin-bottom:15px;background:rgba(0,0,0,0.5);padding:8px 20px;border-radius:8px;border:1px solid #ffcc00}
#shop .info{color:#ccc;font-size:12px;margin-bottom:15px;text-align:center}
#shopCharSelect{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:10px 5px;margin-bottom:15px;-webkit-overflow-scrolling:touch;min-height:110px;width:100%;justify-content:flex-start}
#shopCharSelect::-webkit-scrollbar{height:6px}
#shopCharSelect::-webkit-scrollbar-thumb{background:#00ff88;border-radius:3px}
.shopCharBtn{min-width:90px;max-width:90px;padding:8px;background:#222;border:2px solid #444;border-radius:8px;cursor:pointer;text-align:center;color:#fff;font-size:11px;flex-shrink:0}
.shopCharBtn.selected{border-color:#00ff88;background:#0a3a2a}
.shopCharBtn img{width:60px;height:60px;object-fit:cover;border-radius:6px;background:#111}
#shopItems{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px;max-width:800px;width:100%;padding-bottom:80px}
.shopItem{background:linear-gradient(135deg,#1a1a1a,#0a0a0a);border:2px solid #333;border-radius:12px;padding:15px;text-align:center}
.shopItem.owned{border-color:#00ff88;background:linear-gradient(135deg,#0a3a2a,#001a10)}
.shopItem.maxed{border-color:#ffcc00;background:linear-gradient(135deg,#3a3a00,#1a1a00)}
.shopItem h3{color:#ffcc00;font-size:16px;margin-bottom:8px}
.shopItem .icon{font-size:36px;margin-bottom:8px}
.shopItem p{color:#ccc;font-size:12px;margin-bottom:10px}
.shopItem .lvl{color:#00ff88;font-size:13px;margin-bottom:10px}
.shopItem button{padding:8px 20px;background:linear-gradient(135deg,#00ff88,#00cc66);color:#000;border:none;border-radius:6px;cursor:pointer;font-weight:bold;font-size:13px}
.shopItem button:disabled{opacity:0.4;cursor:not-allowed;filter:grayscale(1)}

/* Stats */
#stats{position:fixed;inset:0;background:linear-gradient(135deg,#0a1a2a,#000);display:none;flex-direction:column;align-items:center;padding:20px;z-index:110;overflow-y:auto}
#stats h2{color:#0088ff;font-size:min(36px,8vw);margin-bottom:20px;text-shadow:0 0 20px #0088ff}
#statsList{width:100%;max-width:500px}
.statRow{display:flex;justify-content:space-between;padding:10px 15px;background:linear-gradient(90deg,#1a1a1a,#111);margin-bottom:5px;border-radius:8px;border-right:4px solid #0088ff;font-size:13px}


/* v4.0.0 Help Center */
#tutorial.helpCenter{background:radial-gradient(ellipse at center,rgba(0,25,42,.96),rgba(0,0,0,.97));z-index:650;overflow-y:auto;justify-content:flex-start;padding:18px;-webkit-overflow-scrolling:touch}#tutorial.helpCenter .box{width:min(920px,96vw);max-width:920px;margin:20px auto;background:linear-gradient(145deg,rgba(9,25,36,.98),rgba(7,8,14,.98));border:2px solid #00e5ff;border-radius:18px;padding:18px;box-shadow:0 0 35px rgba(0,220,255,.26);text-align:right}#helpTabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:12px 0 14px}.helpTab{padding:9px 12px;border:1px solid #286176;border-radius:999px;background:#101b24;color:#d8f7ff;cursor:pointer;font-size:12px;font-weight:bold}.helpTab.active{background:linear-gradient(135deg,#00e5ff,#0088cc);color:#001018;border-color:#00e5ff}.helpMeta{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:8px 0 12px}.helpBadge{padding:5px 9px;border-radius:999px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.35);color:#aeeeff;font-size:11px}.helpContent{max-height:62vh;overflow:auto;padding:4px 8px;line-height:1.95;color:#e9fbff}.helpContent h4{color:#ffcf5a;margin:12px 0 6px;font-size:15px;border-right:3px solid #00e5ff;padding-right:8px}.helpContent ul{padding-right:18px;margin:6px 0}.helpContent li{margin:4px 0}.helpContent .warn{color:#ffcf5a;background:rgba(255,207,90,.08);border-right:3px solid #ffcf5a;padding:7px;border-radius:7px}.helpControls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px;margin:8px 0}.helpKey{background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:8px;font-size:12px}.helpKey b{color:#00e5ff}.helpFooter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.helpFooter button{min-width:150px}@media(max-width:760px){#tutorial.helpCenter{padding:8px}#tutorial.helpCenter .box{padding:13px;margin:8px auto}.helpContent{max-height:66vh;font-size:12px}.helpTab{font-size:11px;padding:8px 10px}.helpControls{grid-template-columns:1fr}}

/* Tutorial */
#tutorial{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:600;padding:20px}
#tutorial .box{max-width:500px;background:#111;border:2px solid #ff4400;border-radius:12px;padding:30px;text-align:center}
#tutorial h3{color:#ff4400;font-size:24px;margin-bottom:15px}
#tutorial p{color:#fff;font-size:15px;margin-bottom:20px;line-height:1.6}
#tutorial button{padding:10px 30px;background:#ff4400;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px}

/* Danger Zone Canvas */
#dangerZoneCanvas{position:fixed;inset:0;pointer-events:none;z-index:9;display:none}
#dangerZoneCanvas.active{display:block}

audio{display:none}