@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Questrial&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#07070e;--text:#e8e4dc;--td:rgba(232,228,220,0.45);--th:rgba(232,228,220,0.15);--gl:rgba(255,255,255,0.06);--gb:rgba(255,255,255,0.08);--gh:rgba(255,255,255,0.14)}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Questrial',sans-serif;-webkit-user-select:none;user-select:none;touch-action:none}
canvas.layer{position:fixed;top:0;left:0;width:100%;height:100%;display:block}
#bgCanvas{z-index:1}#main{z-index:2;cursor:crosshair}

.hide-all-btn{position:fixed;top:18px;left:18px;z-index:999;width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:50%;cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .3s;color:var(--td)}
.hide-all-btn:hover{background:rgba(0,0,0,0.6);color:var(--text);border-color:rgba(255,255,255,0.2)}
.hide-all-btn svg{width:18px;height:18px}

.mode-toggle-bar{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;gap:4px;padding:6px;background:rgba(0,0,0,0.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.1);border-radius:18px;transition:all .5s ease}
.mode-toggle-bar.hidden{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(30px)}
.mode-toggle-btn{display:flex;align-items:center;gap:10px;padding:14px 20px;background:transparent;border:none;border-radius:14px;color:rgba(232,228,220,0.35);font-family:'Questrial',sans-serif;font-size:13px;letter-spacing:1px;cursor:pointer;transition:all .25s;white-space:nowrap}
.mode-toggle-btn svg{width:22px;height:22px;flex-shrink:0}
.mode-toggle-btn:hover{background:rgba(255,255,255,0.07);color:rgba(232,228,220,0.65)}
.mode-toggle-btn.active{background:rgba(255,255,255,0.12);color:#e8e4dc;border:1px solid rgba(255,255,255,0.18)}

.release-btn{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:130;display:none;align-items:center;gap:12px;padding:16px 40px;background:linear-gradient(135deg,rgba(127,119,221,0.25),rgba(93,202,165,0.25));border:1.5px solid rgba(255,255,255,0.2);border-radius:40px;color:#e8e4dc;font-family:'Questrial',sans-serif;font-size:15px;letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .3s;overflow:hidden}
.release-btn.show{display:flex}
.release-btn:hover{transform:translateX(-50%) scale(1.06);border-color:rgba(255,255,255,0.35)}
.release-btn:active{transform:translateX(-50%) scale(0.95)}
.release-btn svg{width:24px;height:24px}
.release-btn-glow{position:absolute;inset:-2px;border-radius:42px;background:linear-gradient(135deg,rgba(127,119,221,0.4),rgba(93,202,165,0.4));animation:releaseGlow 2s ease-in-out infinite;z-index:-1;filter:blur(12px)}
@keyframes releaseGlow{0%,100%{opacity:.3}50%{opacity:.7}}

.type-input-wrap{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:130;display:none;flex-direction:column;align-items:center;gap:14px}
.type-input-wrap.show{display:flex}
.type-input{width:360px;max-width:85vw;padding:16px 24px;background:rgba(0,0,0,0.5);border:1.5px solid rgba(255,255,255,0.15);border-radius:16px;outline:none;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:28px;letter-spacing:4px;text-align:center;color:#e8e4dc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.type-input::placeholder{color:rgba(232,228,220,0.2)}
.type-input:focus{border-color:rgba(127,119,221,0.4)}
.type-confirm-btn{padding:10px 28px;background:var(--gl);border:1px solid var(--gb);border-radius:24px;color:var(--td);font-family:'Questrial',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .3s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.type-confirm-btn:hover{background:var(--gh);color:var(--text)}

.charge-ring{position:fixed;pointer-events:none;z-index:60;width:80px;height:80px;border-radius:50%;border:2px solid transparent;transform:translate(-50%,-50%) scale(0);opacity:0}
.charge-ring.active{opacity:1}
.charge-inner{position:fixed;pointer-events:none;z-index:61;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);opacity:0}
.charge-inner.active{opacity:1}

.fs-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Cormorant Garamond',serif;font-weight:300;font-size:15px;color:var(--td);letter-spacing:5px;text-transform:uppercase;pointer-events:none;z-index:200;animation:hf 6s ease forwards}
@keyframes hf{0%{opacity:0}10%{opacity:.5}60%{opacity:.5}100%{opacity:0}}
.flash{position:fixed;inset:0;background:#fff;pointer-events:none;z-index:999;animation:fl .4s ease forwards}
@keyframes fl{0%{opacity:.25}100%{opacity:0}}

.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:.5px solid rgba(255,255,255,.1);padding:10px 24px;border-radius:24px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--td);pointer-events:none;z-index:300;opacity:0;transition:opacity .4s}
.toast.show{opacity:1}
.rec-dot{position:fixed;top:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:rgba(226,75,74,.15);border:1px solid rgba(226,75,74,.3);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#E24B4A;pointer-events:none;z-index:400;opacity:0;transition:opacity .3s}
.rec-dot.show{opacity:1}
.rec-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:#E24B4A;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.vol-group{display:flex;align-items:center;gap:4px}
.vol-slider{width:60px!important}

/* Lock button active state */
.mp.lock-active{background:rgba(226,75,74,.2)!important;color:#E24B4A!important;border-color:rgba(226,75,74,.4)!important}

/* Ad container */
.ad-container{position:fixed;bottom:20px;left:20px;z-index:95;opacity:1;transition:opacity .5s;pointer-events:auto}
.ad-container.hidden{opacity:0;pointer-events:none}
#carbonads{background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:.5px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;max-width:200px;font-size:11px;color:var(--th)}
#carbonads a{color:var(--td);text-decoration:none}
.carbon-placeholder{font-size:9px;letter-spacing:1px;color:var(--th);text-align:center;padding:4px 0}

/* Advanced toggle */
.adv-toggle{background:none;border:none;color:var(--th);font-family:'Questrial',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;padding:4px 12px;transition:color .3s}
.adv-toggle:hover{color:var(--td)}
.adv-panel{display:none;width:100%;animation:slideDown .3s ease}
.adv-panel.show{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){.mode-toggle-bar{right:10px;padding:3px}.mode-toggle-btn{padding:8px 12px;font-size:10px;gap:6px}.mode-toggle-btn svg{width:16px;height:16px}.release-btn{padding:10px 22px;font-size:12px;bottom:20px}.type-input{font-size:22px;width:280px}}