/* ===== БАЗОВІ СТИЛІ ===== */
:root{--bg1:#0b1220;--neon:#0ea5e9;--accent:#ec4899;--glass:rgba(15,23,42,0.6);--grad-neon:linear-gradient(90deg,#0ea5e9,#3b82f6);--grad-accent:linear-gradient(90deg,#ff006e,#ff3b5c);--grad-purple:linear-gradient(90deg,#8b5cf6,#ec4899);--grad-news:linear-gradient(90deg,#1e3a8a,#3b82f6)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',sans-serif;background:radial-gradient(circle at center,var(--bg1),#050810);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;overflow-x:hidden;line-height:1.6}
/* ===== УТІЛІТИ ===== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.game-hidden{display:none}
.hidden{display:none}
/* ===== КНОПКИ ВИБОРУ ===== */
.choose-btn{padding:25px 60px;font-size:28px;background:var(--grad-neon);border:none;border-radius:20px;color:#fff;cursor:pointer;transition:all .3s;box-shadow:0 0 40px rgba(14,165,233,.7);font-weight:700;min-width:280px;text-shadow:0 0 10px rgba(255,255,255,.5)}
.choose-btn:hover{transform:scale(1.15);box-shadow:0 0 60px rgba(14,165,233,.9)}
/* ===== ЗАГОЛОВОК ТА ВИБІР ===== */
.editable-title{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-weight:700;font-size:38px;color:#fff;text-shadow:0 0 20px var(--neon);cursor:text;user-select:text;z-index:30;white-space:nowrap}
#chooser{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;text-align:center;min-height:auto;padding-top:10px}
#chooser h2{font-size:48px;color:#fff;text-shadow:0 0 30px #0ea5e9;margin-bottom:0px}
/* ===== ГОДИННИК ===== */
.clock-base,.clock,#reverbClock{position:relative;border:10px solid var(--neon);box-shadow:0 0 50px var(--neon),0 0 100px var(--neon),inset 0 0 40px rgba(14,165,233,.15);transition:all .25s;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.clock,#reverbClock{width:380px;height:380px;border-radius:50%}
.clock.square,.clock.diamond.reverb-mode{border-radius:16px}
.clock.diamond{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.clock.oval{border-radius:50%/60%}
/* ===== СТРІЛКИ ГОДИННИКА ===== */
.hand,#reverbClock .hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom;transform:translateX(-50%) rotate(0deg);border-radius:3px}
.hour,#reverbClock .hour{width:10px;height:80px;background:#1e3a8a}
.minute,#reverbClock .minute{width:8px;height:120px;background:#1e40af}
.second,#reverbClock .second{width:4px;height:150px;background:#ff006e;box-shadow:0 0 20px #ff006e,0 0 50px #ff3366}
.second{animation:secondGlow 2s ease-in-out infinite alternate}
.center-dot,#reverbClock .center-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:#ff006e;border-radius:50%;box-shadow:0 0 30px #ff006e}
@keyframes secondGlow{from{box-shadow:0 0 20px #ff006e,0 0 50px #ff3366}to{box-shadow:0 0 30px #ff006e,0 0 70px #ff3366}}
/* ===== СИСТЕМА ВКЛАДОК ===== */
.top-tabs{position:absolute;top:78px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:20;background:rgba(15,23,42,0.9);padding:12px 24px;border-radius:50px;backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,0.7)}
.top-tabs .tab{padding:11px 20px;font-size:14px;min-width:96px;background:transparent;border:none;color:#cfeaff;cursor:pointer;border-radius:50px;transition:all .2s}
.top-tabs .tab.active{background:var(--neon);color:#000;font-weight:700}
/* ===== QR-КОД ===== */
.bare-qr{width:40px;height:40px;cursor:pointer;position:fixed;top:10px;left:20px;z-index:1000;transition:transform .2s ease;border:1px solid #ddd;border-radius:6px;background:#fff}
.bare-qr:hover{transform:scale(1.05)}
/* ===== МОДАЛЬНЕ ВІКНО ===== */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:1000}
.modal-content{background:#fff;padding:40px;border-radius:20px;text-align:center;max-width:350px;color:#000;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.large-qr{width:250px;height:250px;margin-bottom:25px;border:1px solid #ddd;border-radius:12px}
.modal-text{font-size:18px;line-height:1.5;color:#333;font-weight:500;margin-bottom:25px}
.close-btn{padding:12px 30px;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:background .3s ease}
.close-btn:hover{background:#5a6fd8}
.telegram-link{display:block;margin-top:15px;color:#667eea;text-decoration:none;font-size:14px}
.telegram-link:hover{text-decoration:underline}
/* ===== ОСНОВНА СТРУКТУРА ===== */
.container{display:flex;gap:32px;width:min(1350px,95vw);margin-top:100px}
.left-panel{width:500px;background:var(--glass);border-radius:16px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,0.7);backdrop-filter:blur(10px)}
.tab-body{min-height:580px}
.tab-page{display:none}
.tab-page.active{display:block}
/* ===== АПГРЕЙДИ (ПК ВЕРСІЯ) ===== */
.upgrades-container{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow:auto;padding-right:8px}
.upgrade-btn{background:var(--grad-neon);border:none;color:#fff;font-size:15px;padding:12px 14px;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:transform .15s,opacity .15s}
.upgrade-btn span{float:right;opacity:.9;font-weight:600}
.upgrade-btn:disabled{opacity:.45;cursor:not-allowed}
.upgrade-btn:hover:not(:disabled){transform:translateY(-4px)}
.upgrade-btn.hidden{display:none}
.multiplier-btn{background:var(--grad-purple)}
/* ===== СКІНИ ТА ДОСЯГНЕННЯ ===== */
.skins-section h4{margin:24px 0 10px 0;color:#bfe9ff;font-size:16px}
.skins-grid{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.skin{width:100px;height:100px;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.6);border:4px solid transparent;font-size:13px;text-align:center;background:#0f1724;transition:border .2s}
.skin.active{border:4px solid var(--neon);box-shadow:0 0 20px var(--neon)}
.achievements-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.achievement{background:#0f1724;padding:14px;border-radius:12px;text-align:center;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.ach-progress{position:absolute;bottom:0;left:0;height:8px;background:var(--neon);width:0%;transition:width .6s ease}
.ach-state{margin-top:12px;font-weight:700;font-size:15px;color:#ffd}
/* ===== ПРАВА ПАНЕЛЬ ===== */
.right-panel{width:560px;display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:60px}
#clockWrapper{position:relative}
/* ===== ХМАРА КЛІКІВ ТА КОМБО ===== */
.click-cloud,#clickCloud{position:absolute;width:170px;padding:12px;background:rgba(255,255,255,.05);border-radius:14px;text-align:center;font-weight:600;font-size:15px;color:#cfeaff;box-shadow:0 8px 24px rgba(0,0,0,.6);backdrop-filter:blur(6px);pointer-events:none;transition:all .4s ease}
#clickGain{font-size:18px;color:var(--accent)}
#totalCloud{font-size:13px;color:#a8d8ff;margin-top:6px}
#comboBubble{position:absolute;top:-50px;right:-50px;width:140px;height:140px;background:rgba(236,72,153,.22);border:6px solid var(--accent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;color:#fff;backdrop-filter:blur(10px);transform:scale(0);transition:transform .35s cubic-bezier(.18,.89,.32,1.28);pointer-events:none;z-index:30;box-shadow:0 0 50px rgba(236,72,153,.8)}
#comboBubble.show{transform:scale(1)}
#comboBubble.burst{animation:burstAnim .8s ease-out forwards}
#comboCount{font-size:48px;color:var(--accent);text-shadow:0 0 16px var(--accent)}
@keyframes burstAnim{0%{transform:scale(1)}50%{transform:scale(1.6)}100%{transform:scale(0);opacity:0}}
/* ===== МУЗИЧНИЙ ПЛЕЄР ===== */
#score{font-size:22px;text-shadow:0 0 14px var(--neon)}
.music-player{display:flex;gap:16px;align-items:center}
.phonk-btn,.music-switch,.reverb-btn{padding:14px 28px;border-radius:50px;border:none;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 0 24px rgba(14,165,233,.25);transition:all .2s}
.phonk-btn{background:var(--grad-neon)}
.music-switch{background:var(--grad-purple);font-size:20px;padding:14px}
.now-playing{margin-top:10px;font-size:15px;color:#cfeaff}
/* ===== ПОКРАЩЕНІ КНОПКИ МУЗИКИ ===== */
.music-player button{position:relative;overflow:hidden;z-index:1;background:var(--grad-purple);transition:all .35s;box-shadow:0 0 20px rgba(236,72,153,.5)}
.music-player button::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .8s}
.music-player button:hover::before{left:100%}
.music-player button:hover{transform:scale(1.08);box-shadow:0 0 40px rgba(236,72,153,.9),0 0 70px rgba(139,92,246,.7)}
#musicBtn{background:var(--grad-neon);padding:16px 36px;font-size:16px;box-shadow:0 0 35px #0ea5e9}
#musicBtn:hover{transform:scale(1.1);box-shadow:0 0 60px #0ea5e9,0 0 90px rgba(14,165,233,0.67)}
.music-switch{background:linear-gradient(90deg,#ec4899,#f43f5e);font-size:24px;padding:14px}
/* ===== СПОВІЩЕННЯ ===== */
#toastContainer{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:100;pointer-events:none}
.toast{background:rgba(15,23,42,.98);color:#fff;padding:22px 48px;border-radius:16px;box-shadow:0 14px 50px rgba(0,0,0,.8);border-left:7px solid #8df299;font-weight:600;font-size:18px;margin-top:16px;animation:toastIn .6s ease-out,toastOut .6s 9.4s ease-in forwards;opacity:0}
@keyframes toastIn{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastOut{to{transform:translateY(60px);opacity:0}}
/* ===== ЕКРАН БЛОКУВАННЯ ТЕЛЕФОНУ ===== */
.phone-lock-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:9999;flex-direction:column;align-items:center;justify-content:center}
.phone-lock-screen{position:relative;width:320px;height:568px;background:#000;border-radius:40px;border:8px solid #222;overflow:hidden;box-shadow:0 0 50px rgba(0,0,0,0.8);touch-action:pan-y}
.phone-lock-image{width:100%;height:100%;object-fit:cover}
.swipe-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:80px;height:5px;background:rgba(255,255,255,0.5);border-radius:10px;animation:pulseIndicator 2s infinite}
.swipe-hint{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;opacity:0;transition:opacity 0.3s;background:rgba(0,0,0,0.5);padding:8px 16px;border-radius:20px}
.swipe-hint.show{opacity:1}
.phone-unlock-notification{position:fixed;bottom:50px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(0,0,0,0.8);color:#fff;padding:15px 25px;border-radius:12px;font-size:16px;z-index:10000;opacity:0;transition:all 0.5s ease}
.phone-unlock-notification.show{transform:translateX(-50%) translateY(0);opacity:1}
@keyframes pulseIndicator{0%,100%{opacity:0.3}50%{opacity:1}}
/* ===== RSS НОВИНИ ===== */
#newsTickerContainer{position:fixed;bottom:0;left:0;right:0;height:0;overflow:hidden;transition:height 0.3s ease;background:rgba(0,0,0,0.9);z-index:1000}
#newsTickerContainer:not(.show){display:none}
#newsTickerContainer.show{display:block;height:120px}
#newsTicker{height:100%;overflow-y:auto;padding:10px}
.news-item{padding:8px 12px;margin-bottom:8px;border-left:3px solid #0066cc;background:rgba(255,255,255,0.05)}
.news-ticker-header{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px;opacity:0.8}
.news-source{font-weight:bold;color:#4dabf7}
.news-time{color:#adb5bd}
.news-ticker-title{font-weight:bold;margin-bottom:4px;color:#fff}
.news-ticker-text{font-size:14px;color:#dee2e6;line-height:1.4}
/* ===== ЕФЕКТИ КЛІКІВ ===== */
.click-effect-red{animation:clickRed .4s ease-out}
.click-effect-blue{animation:clickBlue .4s ease-out}
.click-effect-glitch{animation:glitch .6s steps(4)}
.click-effect-blackhole{animation:blackhole 1s ease-in-out}
.click-effect-ripple{animation:ripple 1s ease-out}
.click-effect-neon{animation:clickNeon .4s ease-out}
@keyframes clickRed{0%,100%{box-shadow:0 0 50px var(--neon)}50%{box-shadow:0 0 100px #ff3b5c,0 0 160px #ff3b5c;border-color:#ff3b5c;transform:scale(1.1)}}
@keyframes clickBlue{0%,100%{box-shadow:0 0 50px var(--neon)}50%{box-shadow:0 0 100px #0ea5e9,0 0 160px #0ea5e9;border-color:#0ea5e9;transform:scale(1.12)}}
@keyframes clickNeon{0%,100%{box-shadow:0 0 50px #fff}50%{box-shadow:0 0 100px #fff,0 0 160px #fff;border-color:#fff;transform:scale(1.1)}}
@keyframes glitch{0%,100%{transform:translate(0)}20%{transform:translate(-10px,10px)}40%{transform:translate(10px,-10px)}60%{transform:translate(-10px,-8px)}80%{transform:translate(10px,8px)}}
@keyframes blackhole{0%{transform:scale(1)}50%{transform:scale(.85)}100%{transform:scale(1)}}
@keyframes ripple{0%{box-shadow:0 0 50px var(--neon)}100%{box-shadow:0 0 0 160px rgba(14,165,233,0)}}
/* ===== СИСТЕМА ПЕРЕЗАПУСКУ ===== */
.time-tunnel,.reverb-overlay{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;z-index:50}
.time-tunnel.active,.reverb-overlay:not(.hidden){opacity:1;pointer-events:all}
.reverb-overlay{display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:#000;z-index:999}
.reverb-overlay::before{content:"";position:absolute;inset:-100%;background:repeating-conical-gradient(from 0deg at 50% 50%,#8b00ff 0deg,transparent 10deg,transparent 350deg,#8b00ff 360deg);animation:warpTunnel 12s linear infinite;opacity:.7}
@keyframes warpTunnel{from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(2.5)}}
.reverb-instruction{margin-bottom:60px;font-size:32px;text-shadow:0 0 30px #ff00ff;z-index:10;text-align:center}
.reverb-hint{position:absolute;top:34%;left:50%;transform:translateX(-50%);background:rgba(255,59,92,.95);color:#fff;padding:20px 40px;border-radius:50px;font-size:28px;font-weight:700;z-index:1001;animation:pulseHint 1.8s infinite}
@keyframes pulseHint{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.15)}}
#reverbClock{border:10px solid #ff00ff;box-shadow:0 0 50px #ff00ff,inset 0 0 40px rgba(255,0,255,0.4);cursor:grab;z-index:10}
/* ===== ЛІТАЮЧІ ГОДИННИКИ ТА БУЛЬБАШКИ ===== */
.flying-clock{position:absolute;background:rgba(14,165,233,0.1);border:2px solid #0ea5e9;border-radius:50%;box-shadow:0 0 20px #0ea5e9;animation:clockFloat linear forwards;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
@keyframes clockFloat{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(-100vh) rotate(360deg);opacity:0}}
.stat-bubble{position:absolute;background:rgba(236,72,153,0.9);color:#fff;padding:8px 12px;border-radius:15px;font-size:12px;box-shadow:0 0 15px rgba(236,72,153,0.7);animation:statFloat 3s ease-in forwards;text-align:center;max-width:200px}
@keyframes statFloat{0%{transform:translateY(0) scale(0.8);opacity:0}20%{transform:translateY(-20px) scale(1);opacity:1}80%{transform:translateY(-60px) scale(1);opacity:1}100%{transform:translateY(-80px) scale(0.8);opacity:0}}
/* ===== АНІМАЦІЯ РЕВЕРБУ ===== */
#reverbClock.reverb-mode{animation:reverbPulse 1.2s ease-in-out infinite}
@keyframes reverbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.reverb-overlay.hidden{display:none}
/* ===== ПРОГРЕС ПЕРЕЗАПУСКУ (ПК ВЕРСІЯ) ===== */
.prestige-progress-container{margin:20px auto;max-width:400px;background:#1e293b;border-radius:15px;padding:15px;border:2px solid #334155}
.progress-header{display:flex;justify-content:space-between;margin-bottom:8px}
.progress-label{color:#cbd5e1;font-size:14px}
.progress-text{color:#e2e8f0;font-size:14px;font-weight:bold}
.progress-bar-bg{background:#334155;border-radius:10px;height:20px;overflow:hidden}
.progress-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#ef4444,#f87171);border-radius:10px;transition:width 0.3s ease,background 0.3s ease}
.progress-footer{margin-top:8px;color:#94a3b8;font-size:12px;text-align:center}
/* ===== ХАОТИЧНІ СТРІЛКИ ===== */
.reverb-chaos .hand{animation:chaosSpin var(--duration,1s) linear infinite;animation-direction:var(--direction,normal);transform-origin:bottom center}
@keyframes chaosSpin{0%{transform:translateX(-50%)rotate(0deg)}100%{transform:translateX(-50%)rotate(360deg)}}
.reverb-chaos .hour{--duration:1.8s;--direction:normal}
.reverb-chaos .minute{--duration:0.9s;--direction:reverse}
.reverb-chaos .second{--duration:0.5s;--direction:normal}
/* ===== КНОПКА РЕВЕРБУ (ПК ВЕРСІЯ) ===== */
.reverb-btn{margin-top:30px;padding:14px 32px;background:var(--grad-accent);border:none;color:#fff;font-weight:700;font-size:16px;border-radius:14px;cursor:pointer;box-shadow:0 0 30px rgba(255,59,92,.6),0 6px 20px rgba(0,0,0,.4);transition:all .2s ease;text-shadow:0 0 10px rgba(255,255,255,.5)}
.reverb-btn:hover{transform:translateY(-4px);box-shadow:0 0 50px rgba(255,59,92,.9),0 10px 30px rgba(0,0,0,.5)}
/* ===== СКРОЛБАРИ ===== */
.upgrades-container::-webkit-scrollbar{width:10px}
.upgrades-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.upgrades-container::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
/* ===== СТИЛІ ДЛЯ RANGE INPUT ===== */
input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-track{background:#334155;height:6px;border-radius:3px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#0ea5e9;height:20px;width:20px;border-radius:50%;border:2px solid white}
/* ===== НАЛАШТУВАННЯ (ПК ВЕРСІЯ) ===== */
.settings-container{padding:20px;color:#fff;max-width:100%;overflow-y:auto;height:calc(100vh - 200px)}
.setting-item{margin-bottom:20px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.setting-item label{width:200px;font-weight:bold;color:#cbd5e1}
.setting-item input[type="range"]{flex:1;max-width:200px;height:6px;background:#334155;border-radius:3px;outline:none}
.setting-item input[type="checkbox"]{width:20px;height:20px;cursor:pointer}
.setting-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.save-btn,.export-btn,.import-btn,.reset-btn{padding:12px;border:none;border-radius:8px;color:#fff;font-weight:bold;cursor:pointer;transition:transform 0.2s;font-size:14px}
.save-btn{background:#10b981}
.export-btn{background:#3b82f6}
.import-btn{background:#8b5cf6}
.reset-btn{background:#ef4444}
.save-btn:hover,.export-btn:hover,.import-btn:hover,.reset-btn:hover{transform:translateY(-2px)}
.save-status{margin-top:10px;padding:10px;border-radius:5px;text-align:center;font-size:14px}
.save-status.success{background:#10b981;color:#fff}
.save-status.error{background:#ef4444;color:#fff}
.export-import-area{width:100%;height:120px;margin-top:20px;padding:10px;background:#1e293b;color:#fff;border:1px solid #475569;border-radius:5px;resize:vertical;font-family:monospace;font-size:12px}
.export-import-area:focus{outline:none;border-color:#0ea5e9}
/* ===== СТИЛЬ БЕЗ АНІМАЦІЙ ===== */
.no-animations *{animation:none;transition:none}
.no-animations .toast{opacity:0.9}
/* ===== КАСТОМНІ СКРОЛБАРИ ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(15,23,42,0.5);border-radius:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0ea5e9,#3b82f6);border-radius:10px;border:2px solid rgba(255,255,255,0.1)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3b82f6,#0ea5e9);box-shadow:0 0 10px rgba(14,165,233,0.7)}
::-webkit-scrollbar-corner{background:rgba(15,23,42,0.8)}
*{scrollbar-width:thin;scrollbar-color:#0ea5e9 rgba(15,23,42,0.5)}
#newsTicker::-webkit-scrollbar{width:8px}
#newsTicker::-webkit-scrollbar-track{background:rgba(30,41,59,0.6);border-radius:4px}
#newsTicker::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3b82f6,#1e3a8a);border-radius:4px;border:1px solid rgba(255,255,255,0.2)}
#newsTicker{scrollbar-width:thin;scrollbar-color:#3b82f6 rgba(30,41,59,0.6)}
#discordMessages::-webkit-scrollbar{width:8px}
#discordMessages::-webkit-scrollbar-track{background:rgba(32,34,37,0.8);border-radius:4px}
#discordMessages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7289da,#5865F2);border-radius:4px;border:1px solid rgba(255,255,255,0.2)}
#discordMessages{scrollbar-width:thin;scrollbar-color:#7289da rgba(32,34,37,0.8)}
.export-import-area::-webkit-scrollbar{width:8px}
.export-import-area::-webkit-scrollbar-track{background:rgba(30,41,59,0.8);border-radius:4px}
.export-import-area::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0ea5e9,#1e40af);border-radius:4px;border:1px solid rgba(255,255,255,0.2)}
.upgrades-container::-webkit-scrollbar{width:10px}
.upgrades-container::-webkit-scrollbar-track{background:rgba(15,23,42,0.5);border-radius:8px}
.upgrades-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;border:2px solid rgba(255,255,255,0.05)}
.upgrades-container::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
/* ===== СПЕЦІАЛЬНІ ЕФЕКТИ ===== */
body.eye-blink::before{content:"";position:fixed;inset:0;background:#000;z-index:999999;pointer-events:none;animation:realEyeBlink .5s ease-in-out forwards}
@keyframes realEyeBlink{0%,100%{opacity:0}25%,75%{opacity:1}}
#timeTunnel.intense{opacity:1;background:radial-gradient(circle at center,#8b5cf6 0%,#ec4899 30%,#ff006e 60%,#000 100%)}
#timeTunnel.reverb-complete{animation:finalFlash 1.5s ease-out forwards}
@keyframes finalFlash{0%{opacity:1;background:#fff}100%{opacity:0}}
/* ===== ДОДАТКОВІ СТИЛІ ДЛЯ СКІНІВ ===== */
#effectSkins{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:480px;margin:0 auto}
#effectSkins .skin{width:auto;height:85px;font-size:12px;padding:8px}
#clickCloud{top:20px;right:-170px;width:170px;padding:10px 16px;background:rgba(15,23,42,.8);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:20}
#clickGain{font-size:19px;color:#ff006e;text-shadow:0 0 15px #ff006e;margin-bottom:4px}
/* ===== СТАТИСТИКА ===== */
.stats-list{list-style:none;padding:0;margin:0}
.stats-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.1);color:#cfeaff;font-size:15px}
.stats-separator{margin-top:0px;padding-top:0px;border-top:2px solid #334155;font-weight:bold;color:#bfe9ff}
.combo-bubble.hidden{display:none}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes reelChange{0%{opacity:0.5;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
/* ===== ТУТОРІАЛ ТА ДІАЛОГИ ===== */
.typing-cursor{display:inline-block;width:2px;background-color:#fff;animation:cursorBlink 1s infinite;margin-left:2px;vertical-align:middle}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.highlighted-step{position:relative;z-index:15001 !important;box-shadow:0 0 30px rgba(255,255,255,0.2);transition:all 0.5s ease}
.tutorial-dialogue-box{position:fixed;left:50%;transform:translateX(-50%);width:90%;max-width:600px;background:rgba(15,23,42,0.95);border:2px solid #0ea5e9;border-radius:20px;padding:25px;z-index:16000;display:none;box-shadow:0 0 50px rgba(14,165,233,0.5);text-align:center;bottom:30px;transition:all 0.5s ease}
.tutorial-dialogue-box.dialogue-top{bottom:auto !important;top:160px}
@media (max-width:768px){.tutorial-dialogue-box{bottom:25%}.tutorial-dialogue-box.dialogue-top{top:20%}}
/* ===== МОБІЛЬНА ВЕРСІЯ ===== */
body.mobile-version .clock,body.mobile-version .hand,body.mobile-version .skin{will-change:transform,opacity;transform:translateZ(0)}
body.mobile-version .upgrades-container,body.mobile-version .skins-grid,body.mobile-version .achievements-grid{contain:layout style paint;content-visibility:auto}
body.mobile-version .top-tabs,body.mobile-version .click-cloud,body.mobile-version #comboBubble{backdrop-filter:blur(8px);background:rgba(15,23,42,0.95)}
body.mobile-version{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;overflow-x:auto}
body.mobile-version .editable-title{font-size:28px;top:6px;white-space:nowrap;overflow-x:visible;overflow-y:hidden;max-width:none;text-overflow:unset;width:auto;min-width:max-content;position:absolute;left:50%;transform:translateX(-50%);z-index:30;padding:0 20px}
body.mobile-version .top-tabs{top:60px;width:96%;padding:8px 4px;gap:4px 6px;flex-wrap:wrap;justify-content:center}
body.mobile-version .tab{flex:1 1 30%;min-width:75px;font-size:12px;padding:8px 4px}
body.mobile-version .left-panel{width:42%;max-width:320px;margin-top:20px}
body.mobile-version .right-panel{width:54%;padding-right:8px;padding-left:0}
body.mobile-version .clock{width:209px;height:209px}
body.mobile-version .hand.hour{height:50px}
body.mobile-version .hand.minute{height:74px}
body.mobile-version .hand.second{height:88px}
body.mobile-version #comboBubble{width:68px;height:68px;right:6px;top:-18px}
body.mobile-version #comboCount{font-size:26px}
body.mobile-version #comboText{font-size:9px}
body.mobile-version #clickCloud{left:-8px;top:6px;width:88px;padding:5px 8px;font-size:11px}
body.mobile-version #clickGain{font-size:13px}
body.mobile-version .upgrades-container,body.mobile-version #multipliers{display:flex;flex-direction:column;gap:10px;padding:8px 6px 16px;max-height:400px;overflow-y:auto;overflow-x:hidden}
body.mobile-version .upgrades-container::-webkit-scrollbar,body.mobile-version #multipliers::-webkit-scrollbar{display:none}
body.mobile-version .upgrade-btn{min-width:auto;padding:12px 10px;font-size:12.8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;width:100%;margin-bottom:5px}
body.mobile-version .upgrade-btn.hidden{display:none !important}
body.mobile-version .upgrade-btn span{float:none;display:block;margin-top:4px;font-size:11px;color:#cfeaff;opacity:0.9;font-weight:600;word-break:break-word}
body.mobile-version .reverb-btn{text-align:center;padding:12px 15px;font-size:10px;margin-top:15px;width:90%;max-width:250px;display:block;margin-left:auto;margin-right:auto;background:var(--grad-accent);border:none;color:#fff;font-weight:700;border-radius:14px;cursor:pointer;box-shadow:0 0 20px rgba(255,59,92,.6);transition:all .2s ease;text-shadow:0 0 8px rgba(255,255,255,.5);word-break:keep-all;white-space:normal;line-height:1.3}
body.mobile-version .skins-section>.skins-grid{display:flex;overflow-x:auto;gap:14px;padding:10px 0 24px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-behavior:smooth}
body.mobile-version .skin{min-width:96px;height:96px;flex:0 0 auto;font-size:12.5px;text-align:center;scroll-snap-align:center;padding-top:8px}
body.mobile-version .tab-body h3,.skins-section h4{margin:20px 0 12px;font-size:18px;color:#bfe9ff;text-align:center}
body.mobile-version #tab-skins .skins-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
body.mobile-version #tab-skins .skins-grid .skin{flex:0 0 auto;min-width:110px;height:110px;scroll-snap-align:center}
body.mobile-version #tab-skins .skins-grid::-webkit-scrollbar{display:none}
body.mobile-version #tab-achievements .achievements-grid{display:flex;flex-direction:column;gap:12px;padding:10px 0}
body.mobile-version #tab-achievements .achievement{width:100%;margin:0}
body.mobile-version .music-player{display:flex;gap:2px;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;max-width:270px;margin:0 auto}
body.mobile-version .phonk-btn{padding:8px 10px;font-size:11px;min-width:110px;margin:0;flex-shrink:0}
body.mobile-version .music-switch{padding:8px 8px;font-size:12px;min-width:35px;margin:0;flex-shrink:0}
body.mobile-version #musicBtn{padding:8px 10px;font-size:11px;min-width:110px;white-space:nowrap}
body.mobile-version .now-playing{font-size:10px;text-align:center;margin-top:2px}
body.mobile-version .music-player button{transform:none;transition:none}
body.mobile-version .music-player button:active{transform:none}
body.mobile-version .music-player button:hover{transform:none;box-shadow:none}
body.mobile-version #musicBtn:hover{transform:none;box-shadow:none}
body.mobile-version .prestige-progress-container{max-width:90%;margin:15px auto;padding:12px}
body.mobile-version .progress-header{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
body.mobile-version .progress-label{font-size:13px;text-align:center}
body.mobile-version .progress-text{font-size:13px;margin-top:5px;text-align:center}
body.mobile-version .progress-bar-bg{margin:10px 0}
body.mobile-version .progress-bar-fill{height:16px}
body.mobile-version .progress-footer{font-size:11px}
body.mobile-version .settings-container{padding:15px;text-align:left;max-height:500px;overflow-y:auto}
body.mobile-version .setting-item{margin-bottom:18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
body.mobile-version .setting-item label{width:100%;font-size:14px}
body.mobile-version .setting-item input[type="range"]{width:100%;max-width:none}
body.mobile-version .setting-buttons{display:flex;flex-direction:column;gap:10px;margin-top:15px}
body.mobile-version .save-btn,body.mobile-version .export-btn,body.mobile-version .import-btn,body.mobile-version .reset-btn{width:100%;padding:14px;font-size:15px;border-radius:10px}
body.mobile-version .save-status{margin-top:12px;padding:10px;border-radius:5px;font-size:13px}
body.mobile-version .export-import-area{height:100px;font-size:12px;padding:8px;margin-top:15px}
body.mobile-version .reverb-instruction{font-size:20px;margin-bottom:30px;text-align:center;line-height:1.3;padding:0 10px}
body.mobile-version .reverb-hint{padding:10px 20px;font-size:14px;top:38%}
body.mobile-version #tab-reverb{text-align:center}
body.mobile-version #reverbClock.reverb-mode,body.mobile-version #reverbClock{width:218px;height:218px}
body.mobile-version #reverbClock .hand.hour{height:50px}
body.mobile-version #reverbClock .hand.minute{height:74px}
body.mobile-version #reverbClock .hand.second{height:88px}
body.mobile-version #reverbClock .center-dot{width:12px;height:12px}
body.mobile-version #score{font-size:14px}
body.mobile-version #currentDate{font-size:12px}
body.mobile-version #restartMessage{font-size:8px}
body.mobile-version .container{gap:22px}
body.mobile-version #discordOverlay{flex-direction:row !important;overflow:hidden;padding:10px}
body.mobile-version #discordOverlay div[style*="width:240px"]{width:200% !important;height:calc(100% - 20px) !important;overflow-y:auto !important;flex-direction:column !important;padding:10px 8px !important;align-items:stretch}
body.mobile-version #discordOverlay div[style*="width:240px"] div{min-width:auto;margin:6px 0;padding:12px 8px;font-size:13px;background:#2f3136;border-radius:10px;text-align:center;word-break:break-word;transition:all 0.2s ease;border:2px solid transparent}
body.mobile-version #discordOverlay div[style*="width:240px"] div.active-channel{background:#5865F2;color:#fff;font-weight:bold;border:2px solid #7289da;box-shadow:0 0 10px rgba(114,137,218,0.5)}
body.mobile-version #discordMessages{padding:10px !important;font-size:13px !important;max-height:calc(100% - 120px);overflow-y:auto}
body.mobile-version #discordOverlay input[type="text"]{padding:10px 12px !important;font-size:14px !important;border-radius:20px;margin:0 5px;max-width:calc(100% - 100px)}
body.mobile-version #discordOverlay button{padding:10px 15px !important;font-size:14px !important;border-radius:20px;margin-right:5px}
body.mobile-version #discordChannelHeader{padding:10px 15px;font-size:14px}
body.mobile-version .discord-message{margin-bottom:10px;padding:8px;font-size:13px;max-width:100%;word-break:break-word}
body.mobile-version .discord-message-content{max-width:100%;overflow-wrap:break-word}
body.mobile-version .toast{padding:15px 25px;font-size:16px;margin-top:10px;max-width:90%}
/* ===== СУЗІР'Я (БАЗОВІ) ===== */
.constellation-border{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border:2px solid #666;border-radius:50%;pointer-events:none;z-index:5;box-shadow:0 0 20px rgba(100,100,100,0.5),inset 0 0 15px rgba(100,100,100,0.3)}
.constellation-star{position:absolute;width:15px;height:15px;background:#666;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:all 0.5s cubic-bezier(0.175,0.885,0.32,1.275);z-index:20}
.constellation-star:hover{transform:translate(-50%,-50%) scale(1.3)}
.constellation-star.active{background:#ffd700;box-shadow:0 0 20px #ffd700,0 0 40px #ffd700}
.constellation-star.can-afford{background:#888;box-shadow:0 0 15px #0ff;animation:pulse-star 2s infinite}
.constellation-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:#444;border-radius:50%;cursor:pointer;transition:all 0.3s;z-index:30}
.constellation-center.active{background:gold;box-shadow:0 0 30px gold,0 0 60px gold}
.constellation-line{position:absolute;height:2px;background:rgba(100,100,100,0.3);transform-origin:0 0;pointer-events:none;z-index:10}
.constellation-line.second-hand{width:200px;background:rgba(150,150,150,0.4)}
.constellation-line.minute-hand{width:160px;background:rgba(130,130,130,0.35)}
.constellation-line.hour-hand{width:120px;background:rgba(110,110,110,0.3)}
.constellation-line.active{background:linear-gradient(90deg,gold,transparent);box-shadow:0 0 10px gold}
.constellation-zoom{animation:constellation-zoom 2s cubic-bezier(0.175,0.885,0.32,1.275) forwards}
@keyframes pulse-star{0%{box-shadow:0 0 10px #0ff}50%{box-shadow:0 0 25px #0ff}100%{box-shadow:0 0 10px #0ff}}
/* ===== ФІКС СКРОЛУ ДЛЯ БАЗИ ЗНАНЬ (MOBILE) ===== */
body.mobile-version #tutorialContent{display:block !important;max-height:55vh !important;overflow-y:auto !important;overflow-x:hidden !important;padding-right:10px !important;margin-bottom:20px}
body.mobile-version #tutorialContent::-webkit-scrollbar{display:block !important;width:8px !important}
body.mobile-version #tutorialContent::-webkit-scrollbar-track{background:rgba(15,23,42,0.6);border-radius:4px;margin:5px 0}
body.mobile-version #tutorialContent::-webkit-scrollbar-thumb{background:var(--neon);border-radius:4px;border:1px solid rgba(255,255,255,0.2);box-shadow:0 0 10px var(--neon)}
/* СТИЛІ ДЛЯ КІНЦЯ ЧАСУ */
.broken-clock .hand{transition:transform 2s cubic-bezier(0.6,-0.28,0.735,0.045) !important;background:#444 !important;box-shadow:none !important;animation:none !important}
.broken-clock{border-color:#444 !important;box-shadow:none !important;filter:grayscale(100%)}
.stat-broken{color:#f00 !important;text-decoration:line-through;animation:glitch 0.2s infinite}
#bossCanvas{box-shadow:0 0 20px #0ea5e9;border-radius:4px}
.boss-text-anim{overflow:hidden;white-space:nowrap;animation:typing 2s steps(40,end)}
@keyframes typing{from{width:0}to{width:100%}}
.key-hole-anim{animation:rotateKey 2s ease-in-out forwards}
@keyframes rotateKey{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
@keyframes floatKey{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes fadeOut{to{opacity:0;transform:scale(0.5)}}
.key-vanish{animation:fadeOut 0.5s forwards !important;}
/* Нові правильні стилі для ключів ритуалу */
.k-ins {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    z-index: 50;
    pointer-events: none;
}/* Приховування виділення часу */
.stat-stealth{color:#cfeaff !important; text-decoration:none !important; cursor:default;}
/* ===== МОБІЛЬНА ОПТИМІЗАЦІЯ ФІНАЛУ (BETA) ===== */
@media (max-width: 1024px) {
    /* Арена Боса */
    #bossArena { justify-content: flex-start !important; padding-top: 60px; overflow: hidden; }
    
    /* Діалог зверху, щоб не перекривав гру */
    #bossDialogue { top: 10px !important; bottom: auto !important; font-size: 16px !important; height: auto !important; min-height: 40px !important; width: 95% !important; z-index: 20002; }
    
    /* Канвас гри (масштабуємо під екран) */
    #bossCanvasContainer {
        transform-origin: top center;
        transform: scale(0.45); /* Базовий масштаб, JS підправить */
        margin-top: 50px;
        border: 2px solid var(--neon);
        box-shadow: 0 0 20px rgba(14,165,233,0.3);
    }

    /* Рахунок над канвасом */
    #bossScoreBoard { top: -40px !important; font-size: 24px !important; width: 100% !important; gap: 20px !important; }

    /* Кнопки вибору (знизу, стовпчиком) */
    #bossControls { bottom: 120px !important; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; padding: 0 10px; z-index: 20003; }
    #bossControls button { padding: 12px 20px !important; font-size: 14px !important; min-width: 100px; margin: 5px; flex: 1 1 40%; }

    /* Мобільні кнопки керування */
    #mobileControls { display: none; bottom: 10px !important; height: 180px !important; width: 100% !important; pointer-events: none; z-index: 20005; }
    .ctrl-btn { pointer-events: auto; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 50%; width: 60px; height: 60px; font-size: 24px; display: flex; align-items: center; justify-content: center; active: scale(0.9); touch-action: manipulation; -webkit-user-select: none; user-select: none; backdrop-filter: blur(5px); }
    .ctrl-btn:active { background: rgba(14,165,233,0.5); }
    .fire-btn { background: rgba(255,0,0,0.2) !important; border-color: #ff4444 !important; width: 75px !important; height: 75px !important; font-size: 32px !important; position: absolute; right: 20px; bottom: 20px; }
    
    /* Джойстик для танків */
    .dpad-container { position: absolute; left: 20px; bottom: 20px; width: 160px; height: 160px; pointer-events: auto; }
    .dpad-btn { position: absolute; width: 50px; height: 50px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 20px; }
    .dpad-btn:active { background: var(--neon); }
    .db-up { top: 0; left: 55px; }
    .db-down { bottom: 0; left: 55px; }
    .db-left { top: 55px; left: 0; }
    .db-right { top: 55px; right: 0; }

    /* Записка (Legend) */
    #legendPaper { width: 90% !important; height: 80vh !important; padding: 20px !important; transform: rotate(0deg) !important; overflow-y: auto; overflow-x: hidden; }
    #legendPaper h2 { font-size: 22px !important; }
    #legendPaper p { font-size: 14px !important; }
    #paperKeyItem { bottom: 100px !important; font-size: 60px !important; left: 50% !important; }
    
    /* Панель відновлення */
    #restorePanel input { width: 60px !important; height: 60px !important; font-size: 30px !important; }
    #happyDialogue { padding: 20px; }
    #happyDialogue div { font-size: 16px !important; }
}
/* MC ADVENTURE STYLES */
.mc-btn{background:#8b8b8b;border:2px solid;border-color:#fff #555 #555 #fff;padding:5px;cursor:pointer;font-size:10px;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px;font-weight:bold;color:#111;text-shadow:1px 1px #ccc;min-height:30px}
.mc-btn:active{border-color:#555 #fff #fff #555;background:#7b7b7b;transform:translateY(1px)}
.mc-slot{width:40px;height:40px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;position:relative}
.mc-icon{font-size:18px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,0.3))}
.mc-count{position:absolute;bottom:0;right:1px;color:#fff;font-weight:bold;text-shadow:1px 1px 0 #000;font-size:9px}
#mcRecipes::-webkit-scrollbar{width:4px}
#mcRecipes::-webkit-scrollbar-thumb{background:#333}
@media(max-width:768px){#mcGUI{width:95%!important;transform:scale(0.98)}.mc-slot{width:13vw;height:13vw;max-width:42px;max-height:42px}}