πŸ’€
REAPER SQUAD
GOD LEVEL
or
πŸ‘ΉπŸ““πŸ’€
/* ═══ SPLASH ═══ */ #splash{position:fixed;inset:0;background:#080010;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .4s ease} #splash.hide{opacity:0;pointer-events:none} .sp-skull{font-size:4.5rem;animation:spPulse 1s ease-in-out infinite alternate} .sp-title{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,#7c6fff,#4ade80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:10px;letter-spacing:1px} .sp-sub{color:rgba(255,255,255,.35);font-size:.75rem;margin-top:5px;letter-spacing:2px} .sp-bar{width:140px;height:3px;background:rgba(255,255,255,.08);border-radius:3px;margin-top:22px;overflow:hidden} .sp-fill{height:100%;width:0;background:linear-gradient(90deg,#7c6fff,#4ade80);border-radius:3px;transition:width .1s linear} @keyframes spPulse{from{transform:scale(1)}to{transform:scale(1.08)}} /* ═══ AUTH ═══ */ #authScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg)!important} .auth-box{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:26px 22px;width:100%;max-width:390px;box-shadow:0 20px 60px var(--shadow)} .auth-logo{text-align:center;margin-bottom:18px} .auth-logo .al-skull{font-size:2.8rem} .auth-logo h1{font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .auth-logo p{color:var(--muted);font-size:.73rem;margin-top:3px} .atabs{display:flex;gap:6px;margin-bottom:18px;background:rgba(255,255,255,.04);border-radius:10px;padding:4px} .atab{flex:1;padding:8px;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;font-weight:700;font-size:.82rem;transition:all .2s} .atab.active{background:var(--accent);color:#fff} .fg{margin-bottom:12px} .fg label{display:block;font-size:.72rem;color:var(--muted);margin-bottom:4px;font-weight:600} .fg input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;padding:10px 13px;color:var(--text);font-size:.86rem;outline:none;transition:border .2s;-webkit-appearance:none} .fg input:focus{border-color:var(--accent)} .auth-btn{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:11px;color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;margin-top:4px;transition:opacity .2s} .auth-btn:active{opacity:.85} .auth-tip{font-size:.68rem;color:var(--muted);text-align:center;margin-top:8px} /* ═══ LAYOUT ═══ */ .hidden{display:none!important} #mainApp{display:flex;flex-direction:column;min-height:100vh;max-width:480px;margin:0 auto;position:relative} /* HEADER */ .app-hdr{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .hdr-l{display:flex;align-items:center;gap:7px} .hdr-skull{font-size:1.3rem} .hdr-title{font-size:.95rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hdr-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end} .hdr-user{font-size:.72rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:3px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .owner-badge{background:linear-gradient(135deg,#7c6fff,#fbbf24);color:#000;font-size:.5rem;font-weight:800;padding:2px 5px;border-radius:5px;margin-left:3px;white-space:nowrap} .hdr-rank{background:rgba(124,111,255,.15);border:1px solid rgba(124,111,255,.3);color:#a99fff;font-size:.68rem;font-weight:700;padding:3px 7px;border-radius:7px;white-space:nowrap} .hdr-logout{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.2);color:#ff8a8a;font-size:.65rem;padding:4px 8px;border-radius:7px;cursor:pointer;white-space:nowrap} /* PAGES */ .pages{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:76px;-webkit-overflow-scrolling:touch;contain:content} .page{padding:14px;animation:pgFade .25s ease} @keyframes pgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .page-hdr{font-size:1.1rem;font-weight:800;margin-bottom:14px} .sec-title{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px} /* BOTTOM NAV */ .bnav-wrap{display:flex;background:var(--card);border-top:1px solid var(--border);position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:200;padding-bottom:env(safe-area-inset-bottom)} .bnav{flex:1;padding:9px 2px 7px;background:none;border:none;color:var(--muted);font-size:.54rem;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .2s;-webkit-tap-highlight-color:transparent} .bn-ico{font-size:1.2rem;line-height:1;transition:filter .2s} .bnav.active{color:var(--accent)} .bnav.active .bn-ico{filter:drop-shadow(0 0 5px var(--accent))} /* ═══ SCORE RING ═══ */ .score-sec{background:var(--card);border-radius:18px;padding:18px;margin-bottom:12px;border:1px solid var(--border);display:flex;align-items:center;gap:18px} .ring-wrap{will-change:transform;position:relative;width:96px;height:96px;flex-shrink:0} .score-ring{width:96px;height:96px;transform:rotate(-90deg)} .ring-bg{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8} .ring-fill{fill:none;stroke:url(#rg);stroke-width:8;stroke-linecap:round;stroke-dasharray:276;stroke-dashoffset:276;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)} .ring-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.7rem;font-weight:900;color:var(--text)} .ring-num.bump{animation:bump .3s ease} @keyframes bump{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.25)}} .score-info{flex:1;min-width:0} .score-title{font-size:.95rem;font-weight:700;margin-bottom:3px} .score-sub{font-size:.74rem;color:var(--muted);margin-bottom:9px} .week-strip{display:flex;gap:5px;flex-wrap:wrap} .wday{display:flex;flex-direction:column;align-items:center;gap:3px} .wday-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .3s} .wday-dot.done{background:var(--accent2);box-shadow:0 0 7px rgba(74,222,128,.5)} .wday-dot.partial{background:var(--accent);opacity:.6} .wday-dot.today-a{box-shadow:0 0 8px var(--accent);transform:scale(1.25)} .wday-lbl{font-size:.5rem;color:var(--muted);font-weight:600} .streak{font-size:.7rem;color:#fbbf24;font-weight:700;margin-top:5px} /* ═══ STEPS ═══ */ .steps-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:11px;display:flex;align-items:center;gap:12px} .steps-icon{font-size:1.8rem} .steps-body{flex:1} .steps-val{font-size:1.4rem;font-weight:800;color:var(--accent2)} .steps-lbl{font-size:.68rem;color:var(--muted)} .steps-status{font-size:.62rem;color:var(--muted);margin-top:2px} .steps-btn{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.25);color:var(--accent2);border-radius:9px;padding:7px 11px;font-size:.68rem;font-weight:700;cursor:pointer;white-space:nowrap} /* ═══ REST TIMER ═══ */ .rest-timer{background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.2);border-radius:13px;padding:12px;margin-bottom:11px;display:flex;align-items:center;gap:11px} .rt-count{font-size:1.9rem;font-weight:900;color:var(--accent2);width:46px;text-align:center} .rt-right{flex:1} .rt-lbl{font-size:.72rem;color:var(--muted);margin-bottom:5px} .rt-bar-w{background:rgba(255,255,255,.07);border-radius:4px;height:5px;overflow:hidden} .rt-bar-f{height:100%;background:var(--accent2);border-radius:4px;transition:width 1s linear} .rt-skip{background:rgba(255,255,255,.07);border:none;color:var(--muted);border-radius:7px;padding:4px 9px;font-size:.68rem;cursor:pointer;margin-top:5px} /* ═══ HABITS ═══ */ .habit-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px} .habit-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px;cursor:pointer;transition:all .22s;user-select:none;-webkit-user-select:none;position:relative;overflow:hidden} .habit-card.done{background:rgba(74,222,128,.09);border-color:rgba(74,222,128,.38)} .habit-card:active{transform:scale(.95)} .hc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px} .hc-emoji{font-size:1.4rem} .hc-chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--accent2);transition:all .2s} .habit-card.done .hc-chk{background:var(--accent2);border-color:var(--accent2);color:#000} .hc-name{font-size:.78rem;font-weight:700;margin-bottom:2px} .hc-pts{font-size:.64rem;color:var(--muted)} /* ═══ EXERCISES ═══ */ .add-ex-btn{width:100%;padding:12px;background:rgba(124,111,255,.09);border:1px dashed rgba(124,111,255,.38);border-radius:13px;color:var(--accent);font-weight:700;font-size:.84rem;cursor:pointer;transition:all .2s;margin-bottom:11px} .add-ex-btn:active{background:rgba(124,111,255,.2)} .ex-empty{text-align:center;color:var(--muted);padding:1.8rem;font-size:.82rem} .ex-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:11px;display:flex;align-items:center;gap:10px;margin-bottom:7px;animation:pgFade .3s ease both} .ex-emoji{font-size:1.5rem;width:38px;text-align:center;flex-shrink:0} .ex-body{flex:1;min-width:0} .ex-name{font-size:.84rem;font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ex-tags{display:flex;flex-wrap:wrap;gap:4px} .ex-tag{font-size:.62rem;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--muted);font-weight:600} .ex-tag.sets{background:rgba(124,111,255,.14);color:#a99fff} .ex-tag.reps{background:rgba(74,222,128,.11);color:#4ade80} .ex-tag.time{background:rgba(251,191,36,.11);color:#fbbf24} .ex-del{background:rgba(255,107,107,.11);border:none;color:#ff8a8a;border-radius:7px;padding:6px 8px;cursor:pointer;font-size:.85rem;flex-shrink:0} .ws-box{background:rgba(124,111,255,.07);border:1px solid rgba(124,111,255,.18);border-radius:13px;padding:11px;margin-bottom:11px;display:flex;justify-content:space-around} .ws-item{text-align:center} .ws-val{font-size:1.05rem;font-weight:700;color:var(--accent)} .ws-lbl{font-size:.6rem;color:var(--muted)} /* ═══ MODAL ═══ */ .modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:500;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .modal-box{background:var(--card);border-radius:22px 22px 0 0;padding:18px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slideUp .28s ease} @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .modal-title{font-size:1rem;font-weight:800} .modal-close{background:rgba(255,255,255,.08);border:none;color:var(--text);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center} .mlbl{font-size:.72rem;color:var(--muted);font-weight:600;margin-bottom:4px;margin-top:11px;display:block} .minput{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;padding:10px 13px;color:var(--text);font-size:.84rem;outline:none;transition:border .2s;-webkit-appearance:none} .minput:focus{border-color:var(--accent)} .preset-grid{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px} .pchip{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:7px;padding:5px 9px;font-size:.68rem;cursor:pointer;color:var(--text);transition:all .2s} .pchip:active{background:rgba(124,111,255,.2);border-color:var(--accent)} .tchips{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px} .tchip{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:.68rem;cursor:pointer;color:var(--text);transition:all .2s} .tchip.active{background:rgba(124,111,255,.22);border-color:var(--accent);color:var(--accent)} .modal-submit{width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:11px;color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;margin-top:14px} /* ═══ LEADERBOARD ═══ */ .lb-filters{display:flex;gap:5px;margin-bottom:13px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch} .fchip{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:9px;padding:5px 11px;font-size:.68rem;cursor:pointer;color:var(--muted);white-space:nowrap;font-weight:600;transition:all .2s} .fchip.active{background:rgba(124,111,255,.18);border-color:var(--accent);color:var(--accent)} .lb-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:18px;padding:0 2px} .pod-item{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1} .pod-item.p1{order:2} .pod-item.p2{order:1} .pod-item.p3{order:3} .pod-crown{font-size:1rem;line-height:1} .pod-av{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.84rem;font-weight:800;position:relative;border:2px solid transparent} .pod-item.p1 .pod-av{width:60px;height:60px;font-size:.96rem} .owner-pod-av{border-color:#fbbf24!important;box-shadow:0 0 18px rgba(251,191,36,.4),0 0 36px rgba(124,111,255,.25)} .skull-over{position:relative;display:inline-block;font-size:1rem;line-height:1} .skull-crown{position:absolute;top:-7px;right:-5px;font-size:.55rem} .pod-name{font-size:.62rem;font-weight:700;text-align:center;line-height:1.3;word-break:break-word} .pod-pts{font-size:.76rem;font-weight:800;color:var(--accent)} .pod-block{border-radius:7px 7px 0 0;width:100%;margin-top:3px} .pod-item.p1 .pod-block{background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(251,191,36,.07));height:46px} .pod-item.p2 .pod-block{background:linear-gradient(180deg,rgba(192,192,192,.18),rgba(192,192,192,.04));height:32px} .pod-item.p3 .pod-block{background:linear-gradient(180deg,rgba(205,127,50,.18),rgba(205,127,50,.04));height:22px} .kick-btn-pod{background:rgba(255,107,107,.13);color:#ff8a8a;border:1px solid rgba(255,107,107,.28);border-radius:7px;padding:2px 7px;font-size:.58rem;cursor:pointer;width:100%} .lb-row{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--card);border:1px solid var(--border);border-radius:13px;margin-bottom:7px;animation:pgFade .3s ease both} .lb-row.is-me{border-color:rgba(124,111,255,.38);background:rgba(124,111,255,.06)} .lb-row.owner-row{background:rgba(124,111,255,.06);border-color:rgba(251,191,36,.18)} .lb-rank{width:22px;text-align:center;font-size:.74rem;font-weight:700;color:var(--muted)} .lb-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0;position:relative} .lb-own-ico{position:absolute;top:-4px;right:-4px;font-size:.5rem} .lb-info{flex:1;min-width:0} .lb-name{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lb-name.me{color:var(--accent)} .lb-sub{font-size:.62rem;color:var(--muted);margin-top:1px} .lb-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0} .lb-pts{font-size:.84rem;font-weight:800;color:var(--accent)} .lb-bar-w{width:55px;height:4px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden} .lb-bar-f{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .5s ease} .kick-btn{background:rgba(255,107,107,.13);color:#ff8a8a;border:1px solid rgba(255,107,107,.28);border-radius:7px;padding:2px 6px;font-size:.58rem;cursor:pointer} /* ═══ STATS ═══ */ .stat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px} .stat-tile{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:11px 7px;text-align:center;animation:pgFade .3s ease both} .st-val{font-size:1.15rem;font-weight:800;color:var(--accent);margin-bottom:2px} .st-lbl{font-size:.58rem;color:var(--muted);font-weight:600;line-height:1.3} .chart-wrap{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:13px;margin-bottom:13px} .chart-title{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:11px} .hb-row{display:flex;align-items:center;gap:9px;margin-bottom:9px} .hb-icon{font-size:1rem;width:26px;text-align:center} .hb-name{font-size:.72rem;font-weight:600;width:85px;flex-shrink:0} .hb-bar-w{flex:1;height:5px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden} .hb-bar-f{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;transition:width .5s} .hb-pct{font-size:.65rem;color:var(--muted);width:28px;text-align:right} .wh-entry{margin-bottom:12px} .wh-date{font-size:.68rem;color:var(--muted);font-weight:700;margin-bottom:4px} .wh-exs{display:flex;flex-wrap:wrap;gap:4px} .wh-ex{font-size:.66rem;background:rgba(255,255,255,.06);padding:2px 7px;border-radius:5px} /* ═══ SQUAD ═══ */ .squad-code-box{background:rgba(124,111,255,.07);border:1px solid rgba(124,111,255,.22);border-radius:13px;padding:13px;margin-bottom:13px;text-align:center} .sc-lbl{font-size:.68rem;color:var(--muted);margin-bottom:5px} .sc-code{font-size:1.5rem;font-weight:900;color:var(--accent);letter-spacing:3px;margin-bottom:7px} .sc-copy{background:rgba(124,111,255,.18);border:none;color:var(--accent);border-radius:7px;padding:6px 13px;font-size:.72rem;font-weight:700;cursor:pointer} .member-list{display:flex;flex-direction:column;gap:5px;margin-bottom:13px} .member-chip{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;animation:pgFade .3s ease both;flex-wrap:wrap} .member-chip.kicked-m{opacity:.38;filter:grayscale(.6)} .m-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);flex-shrink:0;box-shadow:0 0 5px rgba(74,222,128,.5)} .m-dot.off{background:#555;box-shadow:none} .m-own-tag{font-size:.62rem;font-weight:700;background:linear-gradient(135deg,#7c6fff,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .kicked-tag{background:rgba(255,107,107,.13);color:#ff8a8a;font-size:.58rem;padding:1px 5px;border-radius:4px} .unkick-btn{background:rgba(74,222,128,.11);color:var(--accent2);border:1px solid rgba(74,222,128,.22);border-radius:5px;padding:2px 7px;font-size:.62rem;cursor:pointer} .kick-m-btn{background:rgba(255,107,107,.11);color:#ff8a8a;border:1px solid rgba(255,107,107,.22);border-radius:5px;padding:2px 7px;font-size:.62rem;cursor:pointer;margin-left:auto} .kicked-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,107,107,.09);color:#ff8a8a;padding:3px 9px;border-radius:7px;font-size:.72rem;margin:2px} .member-chip.is-me{border-color:rgba(124,111,255,.38);background:rgba(124,111,255,.06)} /* OWNER PANEL */ .owner-panel{padding:13px;border:1px solid rgba(124,111,255,.28);border-radius:15px;background:rgba(124,111,255,.03);margin-bottom:13px} .op-hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px} .op-title{font-size:.95rem;font-weight:800;background:linear-gradient(135deg,#7c6fff,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .op-sub{font-size:.68rem;color:var(--muted)} .op-stats{display:flex;gap:7px;margin-bottom:9px} .op-stat{flex:1;background:rgba(124,111,255,.09);border:1px solid rgba(124,111,255,.18);border-radius:9px;padding:9px;text-align:center} .os-val{font-size:1rem;font-weight:700;color:#a99fff} .os-lbl{font-size:.6rem;color:var(--muted);margin-top:1px} .op-tip{font-size:.7rem;color:#fbbf24;background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.18);padding:7px 11px;border-radius:7px;margin-top:7px;line-height:1.5} .op-action-btn{background:rgba(124,111,255,.11);color:#a99fff;border:1px solid rgba(124,111,255,.22);border-radius:9px;padding:6px 13px;font-size:.75rem;cursor:pointer;transition:background .2s} .op-action-btn:active{background:rgba(124,111,255,.26)} /* ═══ CHAT ═══ */ .chat-topbar{font-size:.92rem;font-weight:800;padding:10px 14px 6px;color:var(--text);letter-spacing:.3px} .chat-msgs{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;min-height:300px;max-height:calc(100vh - 260px);-webkit-overflow-scrolling:touch} .chat-empty{text-align:center;color:var(--muted);padding:2rem;font-size:.82rem;margin:auto} .chat-msg{display:flex;flex-direction:column;max-width:85%} .chat-msg.me{align-self:flex-end;align-items:flex-end} .chat-msg.other{align-self:flex-start;align-items:flex-start} .chat-msg.ai-msg{align-self:flex-start;align-items:flex-start;max-width:92%} .chat-bubble{padding:9px 12px;border-radius:16px;font-size:.82rem;line-height:1.45;position:relative;word-break:break-word} .chat-msg.me .chat-bubble{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:16px 16px 4px 16px} .chat-msg.other .chat-bubble{background:var(--card);border:1px solid var(--border);border-radius:16px 16px 16px 4px} .chat-msg.ai-msg .chat-bubble{background:rgba(124,111,255,.12);border:1px solid rgba(124,111,255,.35);border-radius:16px 16px 16px 4px;border-left:3px solid var(--accent)} .bubble-own{border:1px solid rgba(251,191,36,.3)!important} .chat-sender{font-size:.65rem;font-weight:700;color:var(--accent);margin-bottom:3px} .chat-own-badge{background:linear-gradient(135deg,#7c6fff,#fbbf24);color:#000;font-size:.52rem;font-weight:800;padding:1px 5px;border-radius:4px;margin-right:4px} .chat-text{word-break:break-word} .ai-label{font-size:.65rem;font-weight:700;color:var(--accent);margin-bottom:3px;display:flex;align-items:center;gap:4px} .ai-typing{display:flex;gap:4px;align-items:center;padding:4px 0} .ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;animation:aiDot 1.2s infinite} .ai-typing span:nth-child(2){animation-delay:.2s} .ai-typing span:nth-child(3){animation-delay:.4s} @keyframes aiDot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}} .chat-reply-prev{font-size:.68rem;color:rgba(255,255,255,.55);border-left:2px solid rgba(255,255,255,.3);padding:2px 6px;margin-bottom:5px;border-radius:0 4px 4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chat-meta{display:flex;align-items:center;gap:5px;margin-top:4px} .chat-time{font-size:.58rem;color:rgba(255,255,255,.35)} .chat-msg.other .chat-time,.chat-msg.ai-msg .chat-time{color:var(--muted)} .chat-del-btn,.chat-reply-btn{background:none;border:none;cursor:pointer;font-size:.68rem;opacity:.55;padding:2px 3px;transition:.2s} .chat-del-btn:hover,.chat-reply-btn:hover{opacity:1} .chat-reply-box{display:flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(124,111,255,.08);border-top:1px solid rgba(124,111,255,.18);font-size:.72rem;color:var(--accent)} .chat-reply-box button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;margin-left:auto} .emoji-bar{display:flex;gap:5px;padding:6px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .emoji-bar::-webkit-scrollbar{display:none} .emoji-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:7px;padding:4px 7px;font-size:1rem;cursor:pointer;flex-shrink:0;transition:.2s} .emoji-btn:active{background:rgba(124,111,255,.2)} .chat-input-row{display:flex;gap:8px;padding:8px 14px;background:var(--card);border-top:1px solid var(--border);align-items:flex-end} .chat-input-row input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:22px;padding:9px 14px;color:var(--text);font-size:.84rem;outline:none;transition:border .2s;-webkit-appearance:none} .chat-input-row input:focus{border-color:var(--accent)} .chat-send-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s} .chat-send-btn:active{opacity:.8;transform:scale(.93)} .chat-own-ctrl{padding:0 14px 4px;min-height:4px} .ai-hint{font-size:.65rem;color:var(--muted);text-align:center;padding:4px 0 8px;opacity:.7} /* ═══ THEMES PICKER ═══ */ .themes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .theme-opt{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:11px;padding:9px 5px;cursor:pointer;transition:all .2s;text-align:center} .theme-opt.active{border-color:var(--accent);background:rgba(124,111,255,.13)} .theme-preview{height:30px;border-radius:7px;margin-bottom:5px} .theme-opt-lbl{font-size:.62rem;font-weight:700} .theme-dark-preview{background:linear-gradient(135deg,#0f0f1a,#1a1a2e,#7c6fff 200%)} .theme-light-preview{background:linear-gradient(135deg,#f0f4ff,#dde8ff,#5b4fff 200%)} .theme-neon-preview{background:radial-gradient(ellipse at 30%,#bf00ff 0%,#0d0221 60%);box-shadow:inset 0 0 0 1px #bf00ff} .theme-goku-preview{background:linear-gradient(135deg,#0a0a1a,#1a0800,#ff6b00);box-shadow:inset 0 0 0 1px #ff6b00} .theme-vegeta-preview{background:linear-gradient(135deg,#0e0018,#2a0050,#9d00ff);box-shadow:inset 0 0 0 1px #9d00ff} .theme-deathnote-preview{background:linear-gradient(135deg,#080808,#200000,#cc0000);box-shadow:inset 0 0 0 1px #cc0000} .theme-reaper-preview{background:radial-gradient(ellipse at 40%,#7c6fff 0%,#080010 60%);box-shadow:inset 0 0 0 1px #7c6fff} .theme-cyber-preview{background:linear-gradient(135deg,#001a1a,#003030,#00ffcc 200%);box-shadow:inset 0 0 0 1px #00ffcc} .theme-sakura-preview{background:linear-gradient(135deg,#1a0010,#3d0030,#ff69b4);box-shadow:inset 0 0 0 1px #ff69b4} .theme-lalisa-preview{background:linear-gradient(135deg,#0a0600,#2a1800,#FFD700);box-shadow:inset 0 0 0 2px #FFD700} .theme-jennie-preview{background:radial-gradient(ellipse at 30% 30%,#FF0055 0%,#0d0005 60%);box-shadow:inset 0 0 0 2px #FF0055} .theme-rose-preview{background:linear-gradient(135deg,#0e0608,#2a1018,#FF8FAB);box-shadow:inset 0 0 0 2px #FF8FAB} /* Light theme overrides */ body.theme-light .fg input, body.theme-light .minput, body.theme-light .chat-input-row input{ background:rgba(0,0,0,.05)!important; color:#1a1a2e!important; border-color:rgba(0,0,0,.15)!important; } body.theme-light .auth-box{ box-shadow:0 20px 60px rgba(0,0,0,.15); } /* ═══ GAMIFICATION ═══ */ .gami-wrap{margin-bottom:13px} .gami-toggle-bar{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:13px;padding:9px 13px;cursor:pointer;transition:border-radius .3s;user-select:none;-webkit-user-select:none} .gami-toggle-bar.open{border-radius:13px 13px 0 0} .gami-toggle-left{display:flex;align-items:center;gap:8px} .gami-toggle-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;border:2px solid rgba(124,111,255,.35);flex-shrink:0} .gami-toggle-info{display:flex;flex-direction:column;gap:1px} .gami-toggle-name{font-size:.78rem;font-weight:800;color:var(--text)} .gami-toggle-sub{font-size:.58rem;color:var(--accent);font-weight:700} .gami-toggle-right{display:flex;align-items:center;gap:7px} .gami-toggle-xp{font-size:.62rem;color:var(--muted);white-space:nowrap} .gami-toggle-arr{font-size:.75rem;color:var(--muted);transition:transform .35s cubic-bezier(.4,0,.2,1)} .gami-toggle-bar.open .gami-toggle-arr{transform:rotate(180deg)} .gami-body{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0;background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 13px 13px;margin-bottom:0} .gami-body.open{max-height:800px;opacity:1;margin-bottom:10px} .gami-body-inner{padding:11px} .gami-profile{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:13px;display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative;overflow:hidden} .gami-profile::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,111,255,.07),transparent 60%);pointer-events:none} .gami-avatar{width:56px;height:56px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.6rem;border:2px solid rgba(124,111,255,.4);flex-shrink:0;cursor:pointer;transition:transform .2s;position:relative;animation:ringFloat 4s ease-in-out infinite} .gami-avatar:active{transform:scale(.93)} .gami-av-badge{position:absolute;bottom:0;right:0;background:var(--accent2);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.55rem;border:2px solid var(--card);color:#000;font-weight:800} .gami-info{flex:1;min-width:0} .gami-name{font-size:.88rem;font-weight:800;color:var(--text)} .gami-title{font-size:.65rem;color:var(--accent);font-weight:700;margin-bottom:5px} .gami-xp-row{display:flex;align-items:center;gap:6px} .gami-xp-bar{flex:1;height:7px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden} .gami-xp-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px;transition:width .8s cubic-bezier(.4,0,.2,1)} .gami-xp-lbl{font-size:.6rem;color:var(--muted);white-space:nowrap} .gami-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px} .gami-stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 8px;text-align:center} .gami-stat-num{font-size:1.2rem;font-weight:900;color:var(--accent)} .gami-stat-lbl{font-size:.58rem;color:var(--muted);margin-top:1px} .gami-tabs{display:flex;gap:4px;background:rgba(255,255,255,.04);border-radius:10px;padding:3px;margin-bottom:9px} .gami-tab{flex:1;padding:6px 4px;border-radius:7px;border:none;background:transparent;font-size:.68rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s} .gami-tab.active{background:var(--accent);color:#fff} .gami-panel{display:none}.gami-panel.active{display:block} .badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .badge-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 6px;text-align:center;cursor:pointer;transition:all .2s;position:relative;animation:pgFade .3s ease both} .badge-item:active{transform:scale(.93)} .badge-item.locked{opacity:.38;filter:grayscale(.9)} .badge-icon{font-size:1.5rem;margin-bottom:4px} .badge-name{font-size:.62rem;font-weight:700;color:var(--text);line-height:1.3} .badge-xp{font-size:.58rem;color:var(--accent);margin-top:2px} .badge-new-tag{position:absolute;top:-4px;right:-4px;background:var(--accent2);color:#000;font-size:.48rem;font-weight:800;padding:2px 5px;border-radius:10px} .levels-list{display:flex;flex-direction:column;gap:6px} .lv-row{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:11px;animation:pgFade .3s ease both} .lv-row.active{border-color:var(--accent);background:rgba(124,111,255,.09)} .lv-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;flex-shrink:0;background:rgba(255,255,255,.07);color:var(--muted)} .lv-row.active .lv-num{background:var(--accent);color:#fff} .lv-name{flex:1;font-size:.75rem;font-weight:700;color:var(--text)} .lv-row.active .lv-name{color:var(--accent)} .lv-xp{font-size:.62rem;color:var(--muted)} .av-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .av-item{border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .2s;animation:pgFade .3s ease both} .av-item.selected{border-color:var(--accent)} .av-item:active{transform:scale(.93)} .av-emoji{font-size:1.8rem;margin-bottom:4px} .av-name{font-size:.62rem;font-weight:700;line-height:1.2} .gami-grid-toggle{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:8px 11px;cursor:pointer;margin-bottom:0;transition:border-radius .25s;user-select:none;-webkit-user-select:none} .gami-grid-toggle:active{opacity:.8} .gami-grid-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .28s;margin-top:0} .gami-grid-body.open{max-height:700px;opacity:1;margin-top:8px} .gami-toast-inline{position:fixed;bottom:86px;left:50%;transform:translateX(-50%) translateY(16px);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;padding:8px 16px;border-radius:10px;font-size:.75rem;font-weight:700;opacity:0;transition:all .3s;z-index:8999;white-space:nowrap;pointer-events:none} .gami-toast-inline.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ═══ CHAT TAB BOXES ═══ */ .chat-tab-row{display:flex;gap:10px;margin-bottom:10px} .chat-tab-box{flex:1;background:var(--card);border:2px solid var(--border);border-radius:13px;padding:9px 8px;cursor:pointer;text-align:center;transition:all .22s;user-select:none;-webkit-user-select:none} .chat-tab-box:active{transform:scale(.96)} .chat-tab-box.active{border-color:var(--accent);background:rgba(124,111,255,.12);box-shadow:0 0 20px rgba(124,111,255,.2)} .ctb-icon{font-size:1.3rem;margin-bottom:2px;line-height:1} .ctb-name{font-size:.72rem;font-weight:800;color:var(--muted)} .chat-tab-box.active .ctb-name{color:var(--accent)} .chat-tab-content{animation:pgFade .25s ease} .chat-tab-content .chat-msgs{height:calc(100vh - 295px)} /* ═══ GOOGLE LOGIN ═══ */ .google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:11px;color:var(--text);font-size:.86rem;font-weight:600;cursor:pointer;transition:background .2s;margin-top:8px} .google-btn:active{background:rgba(255,255,255,.12)} .google-btn svg{width:18px;height:18px;flex-shrink:0} .g-divider{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:.68rem;color:var(--muted)} .g-divider::before,.g-divider::after{content:'';flex:1;height:1px;background:var(--border)} .g-user-pill{display:flex;align-items:center;gap:6px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.25);border-radius:9px;padding:5px 10px;font-size:.72rem;font-weight:700;color:var(--accent2);cursor:pointer} .g-user-av{width:22px;height:22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;color:#fff;overflow:hidden;flex-shrink:0} .g-user-av img{width:100%;height:100%;object-fit:cover} /* ═══ TOAST ═══ */ #toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--card);border:1px solid var(--border);color:var(--text);padding:9px 16px;border-radius:11px;font-size:.78rem;font-weight:600;opacity:0;transition:all .28s;z-index:9000;white-space:nowrap;max-width:88vw;pointer-events:none;box-shadow:0 6px 20px var(--shadow)} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* CONFETTI */ #confetti{position:fixed;inset:0;pointer-events:none;z-index:9998} .modal-submit::after{ content:''; position:absolute; width:200%; height:200%; background:rgba(255,255,255,.12); top:-50%; left:-120%; transform:rotate(25deg); transition:.7s; } .auth-btn:hover::after, .add-ex-btn:hover::after, .chat-send-btn:hover::after, .steps-btn:hover::after, .modal-submit:hover::after{ left:120%; } .ring-wrap{ animation:ringFloat 4s ease-in-out infinite; filter:drop-shadow(0 0 20px #7c6fff88); } @keyframes ringFloat{ 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} } .sp-skull{ animation:skullAura 2s infinite alternate; } @keyframes skullAura{ from{transform:scale(1) opacity(.9)} to {transform:scale(1.12) opacity(1)} } .chat-msg{ animation:chatPop .35s cubic-bezier(.2,.8,.2,1); } @keyframes chatPop{ from{ opacity:0; transform:translateY(25px) scale(.9); } to{ opacity:1; transform:translateY(0) scale(1); } } ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-thumb{ background:linear-gradient(#7c6fff,#4ade80); border-radius:20px; } /* position relative for shimmer effects */ .auth-btn,.add-ex-btn,.chat-send-btn,.steps-btn,.modal-submit{position:relative;overflow:hidden} /* ══════════════════════════════════════════════════════════ GOD LEVEL ANIMATIONS & NEW THEMES β€” BHAI EDITION πŸ”₯πŸ’€ ══════════════════════════════════════════════════════════ */ /* ── AURORA BACKGROUND LAYER ── */ body::before{ content:''; position:fixed; inset:0; z-index:-2; background: radial-gradient(ellipse 80% 60% at 20% 10%, var(--aurora1,transparent) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 80% 80%, var(--aurora2,transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 50%, var(--aurora3,transparent) 0%, transparent 70%); animation:auroraFade 8s ease-in-out infinite alternate; pointer-events:none; will-change:opacity; } @keyframes auroraFade{ from{opacity:.7} to {opacity:1} } /* ── SCANLINE OVERLAY for Cyber/Neon/Death Note ── */ body.theme-cyber::after, body.theme-neon::after, body.theme-deathnote::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px ); } /* ── AURORA COLORS PER THEME ── */ body.theme-dark {--aurora1:rgba(124,111,255,.06);--aurora2:rgba(74,222,128,.04);--aurora3:rgba(56,189,248,.03)} body.theme-light {--aurora1:rgba(91,79,255,.04); --aurora2:rgba(22,163,74,.03); --aurora3:rgba(56,189,248,.03)} body.theme-neon {--aurora1:rgba(191,0,255,.1); --aurora2:rgba(0,255,204,.07); --aurora3:rgba(100,0,200,.06)} body.theme-goku {--aurora1:rgba(255,107,0,.1); --aurora2:rgba(255,215,0,.07); --aurora3:rgba(30,107,255,.05)} body.theme-vegeta {--aurora1:rgba(157,0,255,.1); --aurora2:rgba(255,215,0,.06); --aurora3:rgba(80,0,160,.07)} body.theme-deathnote{--aurora1:rgba(204,0,0,.1); --aurora2:rgba(100,0,0,.07); --aurora3:rgba(60,0,0,.05)} body.theme-reaper {--aurora1:rgba(124,111,255,.1);--aurora2:rgba(255,77,255,.07); --aurora3:rgba(60,0,120,.06)} body.theme-cyber {--aurora1:rgba(0,255,204,.09); --aurora2:rgba(0,204,255,.06); --aurora3:rgba(0,120,120,.05)} body.theme-sakura {--aurora1:rgba(255,182,193,.15);--aurora2:rgba(255,105,180,.08);--aurora3:rgba(200,100,150,.06)} body.theme-lalisa {--aurora1:rgba(255,215,0,.15); --aurora2:rgba(255,107,0,.1); --aurora3:rgba(180,120,0,.07)} body.theme-jennie {--aurora1:rgba(255,0,85,.14); --aurora2:rgba(255,100,160,.08);--aurora3:rgba(120,0,50,.06)} body.theme-rose {--aurora1:rgba(255,143,171,.14);--aurora2:rgba(255,202,212,.08);--aurora3:rgba(180,80,110,.06)} /* SAKURA */ body.theme-sakura{ --bg:#1a0010;--card:#280018;--accent:#ff69b4;--accent2:#ffb6c1; --text:#ffe8f2;--muted:#cc7799;--border:rgba(255,105,180,.2);--shadow:rgba(255,105,180,.25); } /* LALISA β€” Bold Thai Gold Γ— Black */ body.theme-lalisa{ --bg:#0a0600;--card:#180e00;--accent:#FFD700;--accent2:#FF6B00; --text:#fff8e0;--muted:#aa8800;--border:rgba(255,215,0,.22);--shadow:rgba(255,165,0,.35); } /* JENNIE β€” Ruby Noir Luxury */ body.theme-jennie{ --bg:#0d0005;--card:#1c000d;--accent:#FF0055;--accent2:#FF85B3; --text:#ffe8f0;--muted:#cc4477;--border:rgba(255,0,85,.22);--shadow:rgba(255,0,85,.35); } /* ROSΓ‰ β€” Dreamy Rose Gold */ body.theme-rose{ --bg:#0e0608;--card:#1e0e12;--accent:#FF8FAB;--accent2:#FFCAD4; --text:#fff0f4;--muted:#cc7788;--border:rgba(255,143,171,.2);--shadow:rgba(255,100,140,.3); } /* ══════════════════════════════════════════════════════════ UNIQUE THEME-SPECIFIC ANIMATIONS ══════════════════════════════════════════════════════════ */ /* ── DARK β€” subtle starfield drift ── */ body.theme-dark .particles::before{ animation:particlesMove 22s linear infinite, darkPulse 8s ease-in-out infinite alternate; } @keyframes darkPulse{ from{opacity:.7}to{opacity:1} } /* ── LIGHT β€” soft floating bubbles ── */ body.theme-light .particles::before{ background-image: radial-gradient(circle,rgba(91,79,255,.12) 3px,transparent 3px), radial-gradient(circle,rgba(22,163,74,.08) 2px,transparent 2px); animation:lightFloat 20s ease-in-out infinite alternate; } @keyframes lightFloat{ from{transform:translateY(0) scale(1)} to {transform:translateY(-60px) scale(1.05)} } /* ── NEON β€” scanlines + flicker ── */ body.theme-neon .hdr-title{ animation:neonFlicker 5s ease-in-out infinite; } @keyframes neonFlicker{ 0%,94%,96%,98%,100%{opacity:1} 95%,97% {opacity:.7} } body.theme-neon .ring-wrap::before{ border-top-color:#bf00ff; border-right-color:#00ffcc; animation:ringOrbit 2s linear infinite; } /* ── GOKU β€” lightning glow on skull ── */ body.theme-goku .hdr-skull{ filter:drop-shadow(0 0 12px #ffd700) drop-shadow(0 0 24px #ff6b00); animation:gokuPower 1.5s ease-in-out infinite alternate; } @keyframes gokuPower{ from{filter:drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 16px #ff6b00);transform:translateY(0) rotate(-3deg)} to {filter:drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 40px #ff6b00);transform:translateY(-6px) rotate(3deg)} } /* ── VEGETA β€” royal purple shimmer on header ── */ body.theme-vegeta .app-hdr{ animation:vegetaShimmer 4s ease-in-out infinite alternate; } @keyframes vegetaShimmer{ from{box-shadow:0 2px 20px rgba(157,0,255,.2)} to {box-shadow:0 2px 30px rgba(255,215,0,.3)} } body.theme-vegeta .hdr-skull{ animation:skullBob 2.5s ease-in-out infinite, vegetaCrown 6s ease-in-out infinite alternate; } @keyframes vegetaCrown{ from{filter:drop-shadow(0 0 6px #9d00ff)} to {filter:drop-shadow(0 0 14px #ffd700)} } /* ── DEATH NOTE β€” red pulse + scanlines ── */ body.theme-deathnote .score-sec{ animation:dnPulse 3s ease-in-out infinite; } @keyframes dnPulse{ 0%,100%{box-shadow:0 0 0 rgba(204,0,0,0)} 50% {box-shadow:0 0 25px rgba(204,0,0,.3)} } body.theme-deathnote .hdr-skull{ animation:skullBob 2.5s ease-in-out infinite, dnRed 2s ease-in-out infinite alternate; } @keyframes dnRed{ from{filter:drop-shadow(0 0 4px #cc0000)} to {filter:drop-shadow(0 0 16px #ff4444)} } /* ── REAPER β€” portal spinning ring ── */ body.theme-reaper .ring-wrap::before{ border-top-color:#7c6fff; border-right-color:#ff4dff; animation:ringOrbit 2.5s linear infinite; box-shadow:0 0 10px #7c6fff44; } body.theme-reaper .particles::before{ background-image: radial-gradient(circle,rgba(124,111,255,.2) 1px,transparent 1px), radial-gradient(circle,rgba(255,77,255,.15) 2px,transparent 2px); animation:particlesMove 15s linear infinite; } /* ── CYBER β€” matrix-like digital rain ── */ body.theme-cyber .particles::before{ background-image: linear-gradient(180deg,rgba(0,255,204,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(0,204,255,.05) 1px,transparent 1px); background-size:30px 30px; animation:cyberScan 3s linear infinite; } @keyframes cyberScan{ from{transform:translateY(0)} to {transform:translateY(30px)} } body.theme-cyber .hdr-title{ animation:cyberGlitch 8s steps(1) infinite; } @keyframes cyberGlitch{ 0%,92%,96%,100%{opacity:1;transform:none} 93%{opacity:.7;transform:skewX(-5deg) translateX(2px)} 95%{opacity:.9;transform:skewX(3deg) translateX(-2px)} } /* ── SAKURA β€” petals floating diagonally ── */ body.theme-sakura .particles::before{ background-image: radial-gradient(circle,rgba(255,182,193,.3) 2px,transparent 2px), radial-gradient(circle,rgba(255,105,180,.2) 1px,transparent 1px); animation:sakuraDrift 12s linear infinite; } @keyframes sakuraDrift{ from{transform:translateY(0) translateX(0) rotate(0)} to {transform:translateY(-100px) translateX(40px) rotate(15deg)} } body.theme-sakura .hdr-skull{ filter:drop-shadow(0 0 10px #ff69b4); animation:skullBob 2.5s ease-in-out infinite, sakuraGlow 3s ease-in-out infinite alternate; } @keyframes sakuraGlow{ from{filter:drop-shadow(0 0 6px #ff69b4)} to {filter:drop-shadow(0 0 18px #ffb6c1)} } /* ══════════════════════════════════════════════════════════ BLACKPINK THEME ANIMATIONS β€” FULL VIBE πŸ’–βœ¨ ══════════════════════════════════════════════════════════ */ /* ── LALISA β€” Gold sparkling confetti rain ── */ body.theme-lalisa .particles::before{ background-image: radial-gradient(circle,rgba(255,215,0,.4) 2px,transparent 2px), radial-gradient(circle,rgba(255,107,0,.25) 1px,transparent 1px), radial-gradient(circle,rgba(255,255,200,.2) 1px,transparent 1px); background-size:50px 50px,70px 70px,40px 40px; animation:lalisaSparkle 8s linear infinite; } @keyframes lalisaSparkle{ 0% {transform:translateY(0) rotate(0)} 50% {transform:translateY(-60px) rotate(3deg)} 100%{transform:translateY(-120px) rotate(6deg)} } body.theme-lalisa .hdr-skull{ animation:lalisaBeat 1.2s cubic-bezier(.36,.07,.19,.97) infinite; filter:drop-shadow(0 0 12px #FFD700) drop-shadow(0 0 30px #FF6B00); } @keyframes lalisaBeat{ 0%,100%{transform:scale(1) rotate(-3deg)} 25% {transform:scale(1.2) rotate(0)} 50% {transform:scale(1) rotate(3deg)} 75% {transform:scale(1.15) rotate(0)} } body.theme-lalisa .ring-wrap::before{ border-top-color:#FFD700; border-right-color:#FF6B00; animation:ringOrbit 1.8s linear infinite; filter:drop-shadow(0 0 8px #FFD700); } body.theme-lalisa .app-hdr{ background:linear-gradient(135deg,rgba(24,14,0,.95),rgba(40,25,0,.9)); box-shadow:0 2px 30px rgba(255,215,0,.2); animation:lalisaHdr 4s ease-in-out infinite alternate; } @keyframes lalisaHdr{ from{box-shadow:0 2px 20px rgba(255,215,0,.15)} to {box-shadow:0 2px 40px rgba(255,107,0,.3)} } body.theme-lalisa .hdr-title{ background:linear-gradient(135deg,#FFD700,#FF6B00,#FFD700); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:lalisaGoldFlow 3s linear infinite; } @keyframes lalisaGoldFlow{ from{background-position:0% 50%} to {background-position:200% 50%} } body.theme-lalisa .habit-card.done{ box-shadow:0 0 20px rgba(255,215,0,.4),0 0 40px rgba(255,107,0,.2); animation:habitShine .5s ease forwards, lalisaDone 2s ease-in-out infinite alternate; } @keyframes lalisaDone{ from{border-color:rgba(255,215,0,.4)} to {border-color:rgba(255,107,0,.6)} } /* ── JENNIE β€” Ruby red neon luxury drip ── */ body.theme-jennie .particles::before{ background-image: radial-gradient(circle,rgba(255,0,85,.3) 2px,transparent 2px), radial-gradient(circle,rgba(255,133,179,.18) 1px,transparent 1px); background-size:60px 60px,40px 40px; animation:jennieFloat 10s ease-in-out infinite; } @keyframes jennieFloat{ 0%,100%{transform:translateY(0) scale(1)} 33% {transform:translateY(-40px) scale(1.02)} 66% {transform:translateY(-80px) scale(.98)} } body.theme-jennie .hdr-skull{ animation:jenniePout 3s ease-in-out infinite; filter:drop-shadow(0 0 15px #FF0055); } @keyframes jenniePout{ 0%,100%{transform:translateY(0) rotate(-3deg) scale(1)} 30% {transform:translateY(-6px) rotate(0) scale(1.12)} 60% {transform:translateY(-2px) rotate(3deg) scale(1.05)} } body.theme-jennie .ring-wrap::before{ border-top-color:#FF0055; border-right-color:#FF85B3; animation:ringOrbit 2.2s linear infinite; filter:drop-shadow(0 0 10px #FF0055); } body.theme-jennie .app-hdr{ animation:jennieHdr 5s ease-in-out infinite alternate; } @keyframes jennieHdr{ from{box-shadow:0 2px 20px rgba(255,0,85,.2)} to {box-shadow:0 2px 40px rgba(255,133,179,.35)} } body.theme-jennie .hdr-title{ background:linear-gradient(135deg,#FF0055,#FF85B3,#FF0055); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:jennieGlow 4s ease infinite; } @keyframes jennieGlow{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } body.theme-jennie .score-sec{ animation:jennieCard 4s ease-in-out infinite; } @keyframes jennieCard{ 0%,100%{box-shadow:0 0 0 rgba(255,0,85,0)} 50% {box-shadow:0 0 30px rgba(255,0,85,.25),0 0 60px rgba(255,133,179,.1)} } /* Jennie luxury scanlines */ body.theme-jennie::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:repeating-linear-gradient( to bottom,transparent 0px,transparent 4px, rgba(255,0,85,.03) 4px,rgba(255,0,85,.03) 5px ); } /* ── ROSΓ‰ β€” Dreamy glittering rose petals ── */ body.theme-rose .particles::before{ background-image: radial-gradient(circle,rgba(255,143,171,.35) 2px,transparent 2px), radial-gradient(circle,rgba(255,202,212,.2) 1px,transparent 1px), radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px); background-size:55px 55px,35px 35px,80px 80px; animation:roseDrift 14s ease-in-out infinite; } @keyframes roseDrift{ 0% {transform:translateY(0) rotate(0) scale(1)} 25% {transform:translateY(-30px) rotate(5deg) scale(1.02)} 50% {transform:translateY(-70px) rotate(2deg) scale(.99)} 75% {transform:translateY(-40px) rotate(7deg) scale(1.01)} 100%{transform:translateY(-120px) rotate(10deg) scale(1)} } body.theme-rose .hdr-skull{ animation:roseDream 3s ease-in-out infinite; filter:drop-shadow(0 0 12px #FF8FAB); } @keyframes roseDream{ 0%,100%{transform:translateY(0) rotate(-2deg);filter:drop-shadow(0 0 8px #FF8FAB)} 50% {transform:translateY(-5px) rotate(2deg);filter:drop-shadow(0 0 20px #FFCAD4)} } body.theme-rose .ring-wrap::before{ border-top-color:#FF8FAB; border-right-color:#FFCAD4; animation:ringOrbit 3s linear infinite; filter:drop-shadow(0 0 8px #FF8FAB); } body.theme-rose .app-hdr{ background:linear-gradient(135deg,rgba(30,14,18,.95),rgba(50,20,30,.9)); animation:roseHdr 6s ease-in-out infinite alternate; } @keyframes roseHdr{ from{box-shadow:0 2px 20px rgba(255,143,171,.15)} to {box-shadow:0 2px 40px rgba(255,202,212,.3)} } body.theme-rose .hdr-title{ background:linear-gradient(135deg,#FF8FAB,#FFCAD4,#FF8FAB); background-size:200% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:roseFlow 5s ease infinite; } @keyframes roseFlow{ 0%,100%{background-position:0% 50%} 50% {background-position:100% 50%} } /* Rose sparkle on done habits */ body.theme-rose .habit-card.done::after{ content:'🌹';font-size:.8rem; position:absolute;top:6px;right:6px; animation:sparkle 2s ease-out;pointer-events:none; } body.theme-rose .score-sec{ animation:rosePetal 5s ease-in-out infinite alternate; } @keyframes rosePetal{ from{box-shadow:0 0 15px rgba(255,143,171,.1)} to {box-shadow:0 0 35px rgba(255,143,171,.3),0 0 70px rgba(255,202,212,.1)} } /* ══════ GOD ANIMATIONS ══════ */ /* ── HEADER SKULL pulse ── */ .hdr-skull{ display:inline-block; animation:skullBob 2.5s ease-in-out infinite; /* filter removed for perf */ } @keyframes skullBob{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50% {transform:translateY(-4px) rotate(3deg)} } /* ── BOTTOM NAV active glow pulse ── */ .bnav.active .bn-ico{ animation:navGlow 1.8s ease-in-out infinite alternate; } @keyframes navGlow{ from{transform:scale(1); opacity:.85} to {transform:scale(1.18);opacity:1} } /* ── SCORE RING outer ring spin ── */ .ring-wrap::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid transparent; border-top-color:var(--accent); border-right-color:var(--accent2); animation:ringOrbit 3s linear infinite; pointer-events:none; } @keyframes ringOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── HABIT CARD done sparkle ── */ .habit-card.done{ animation:habitShine .5s ease forwards; } @keyframes habitShine{ 0% {transform:scale(1)} 50% {transform:scale(1.03)} 100%{transform:scale(1)} } /* ── HABIT CARD toggle bounce ── */ .habit-card:active{ animation:cardSquish .18s cubic-bezier(.36,.07,.19,.97); } @keyframes cardSquish{ 0% {transform:scale(.95)} 50% {transform:scale(1.04)} 100%{transform:scale(1)} } /* ── EX-CARD entrance ── */ .ex-card{ animation:exSlide .35s cubic-bezier(.21,1.04,.67,.98) both; } @keyframes exSlide{ from{opacity:0;transform:translateX(-20px) scale(.96)} to {opacity:1;transform:translateX(0) scale(1)} } /* ── LEADERBOARD ROW entrance ── */ .lb-row{ animation:lbDrop .4s cubic-bezier(.21,1.04,.67,.98) both; } @keyframes lbDrop{ from{opacity:0;transform:translateY(-12px) scale(.97)} to {opacity:1;transform:translateY(0) scale(1)} } /* ── PODIUM BLOCK rise animation ── */ .pod-block{ transform-origin:bottom; animation:podRise .7s cubic-bezier(.21,1.04,.67,.98) both; } @keyframes podRise{ from{transform:scaleY(0)} to {transform:scaleY(1)} } .pod-item.p1 .pod-block{animation-delay:.3s} .pod-item.p2 .pod-block{animation-delay:.1s} .pod-item.p3 .pod-block{animation-delay:.2s} /* ── CROWN BOUNCE on #1 ── */ .pod-item.p1 .pod-crown{ display:inline-block; animation:crownBounce 1.2s ease-in-out infinite; } @keyframes crownBounce{ 0%,100%{transform:translateY(0) rotate(-5deg)} 50% {transform:translateY(-5px) rotate(5deg)} } /* ── STATS TILE count-up shimmer ── */ .stat-tile{ position:relative;overflow:hidden; animation:tileIn .4s cubic-bezier(.21,1.04,.67,.98) both; } @keyframes tileIn{ from{opacity:0;transform:scale(.85)} to {opacity:1;transform:scale(1)} } .stat-tile::before{ content:''; position:absolute; top:0;left:-80%; width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); transform:skewX(-20deg); animation:tileShimmer 4s ease-in-out infinite; } @keyframes tileShimmer{ 0%{left:-80%}60%,100%{left:160%} } /* ring-num text-shadow removed for perf */ /* ── SQUAD CODE β€” just scale pulse ── */ .sc-code{ animation:codePulse 2.5s ease-in-out infinite alternate; will-change:transform; } @keyframes codePulse{ from{transform:scale(1)} to {transform:scale(1.04)} } /* ── MEMBER CHIP entrance ── */ .member-chip{ animation:chipSlide .35s cubic-bezier(.21,1.04,.67,.98) both; } @keyframes chipSlide{ from{opacity:0;transform:translateX(20px)} to {opacity:1;transform:translateX(0)} } /* ── CHAT MESSAGE entrance enhanced ── */ .chat-msg{ animation:chatPopGod .4s cubic-bezier(.175,.885,.32,1.275) both; } @keyframes chatPopGod{ from{opacity:0;transform:translateY(30px) scale(.88) rotate(-1deg)} to {opacity:1;transform:translateY(0) scale(1) rotate(0)} } /* ── SEND BUTTON ripple ── */ .chat-send-btn:active{ animation:sendRipple .3s ease; } @keyframes sendRipple{ 0% {transform:scale(1)} 50% {transform:scale(.9)} 100%{transform:scale(1)} } /* ── MODAL slide-up enhanced ── */ .modal-box{ animation:modalGod .35s cubic-bezier(.21,1.04,.67,.98); } @keyframes modalGod{ from{transform:translateY(100%) scale(.97);opacity:.4} to {transform:translateY(0) scale(1); opacity:1} } /* rtPulse removed for perf */ /* themeActiveGlow removed for perf */ /* ── SPLASH ENHANCED ── */ #splash{ background:radial-gradient(ellipse at 50% 50%,#150030 0%,#080010 60%,#000 100%); } .sp-skull{ filter:drop-shadow(0 0 30px #7c6fff); animation:splashSkull 1s ease-in-out infinite alternate; } @keyframes splashSkull{ from{transform:scale(1)} to {transform:scale(1.15)} } .sp-title{ animation:titleReveal 1s cubic-bezier(.21,1.04,.67,.98); } @keyframes titleReveal{ from{opacity:0;letter-spacing:8px;transform:translateY(10px)} to {opacity:1;letter-spacing:1px;transform:translateY(0)} } .sp-bar{ box-shadow:0 0 14px rgba(124,111,255,.4); } /* ── AUTH BOX entrance ── */ .auth-box{ animation:authIn .6s cubic-bezier(.21,1.04,.67,.98); } @keyframes authIn{ from{opacity:0;transform:translateY(40px) scale(.92)} to {opacity:1;transform:translateY(0) scale(1)} } /* ── PAGE TRANSITION enhanced ── */ .page{animation:pageSlide .3s cubic-bezier(.21,1.04,.67,.98)} @keyframes pageSlide{ from{opacity:0;transform:translateY(14px) scale(.99)} to {opacity:1;transform:translateY(0) scale(1)} } /* ── HABIT CARD RIPPLE on complete ── */ .habit-card.done::after{ content:'✨'; position:absolute; top:6px;right:6px; font-size:.8rem; animation:sparkle 1.5s ease-out; pointer-events:none; } @keyframes sparkle{ 0% {opacity:0;transform:scale(0) rotate(0)} 30% {opacity:1;transform:scale(1.4) rotate(20deg)} 100%{opacity:0;transform:scale(.8) rotate(45deg) translateY(-8px)} } /* ── GOKU LIGHTNING (goku theme) β€” handled in unique animations ── */ /* redPulse removed for perf */ /* ownerShine removed for perf */ /* ── STAT TILES stagger ── */ .stat-tile:nth-child(1){animation-delay:.05s} .stat-tile:nth-child(2){animation-delay:.10s} .stat-tile:nth-child(3){animation-delay:.15s} .stat-tile:nth-child(4){animation-delay:.20s} .stat-tile:nth-child(5){animation-delay:.25s} .stat-tile:nth-child(6){animation-delay:.30s} /* ── STREAK FIRE bounce ── */ .streak{ display:inline-block; animation:streakBounce 1.8s ease-in-out infinite; } @keyframes streakBounce{ 0%,100%{transform:scale(1)} 50% {transform:scale(1.12)} } .streak{will-change:transform} /* ── HABIT GRID stagger ── */ .habit-card:nth-child(1){animation-delay:.00s} .habit-card:nth-child(2){animation-delay:.06s} .habit-card:nth-child(3){animation-delay:.12s} .habit-card:nth-child(4){animation-delay:.18s} /* ── SCROLLBAR GOD ── */ ::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); border-radius:20px; } /* ── TOAST ENHANCED ── */ #toast.show{ animation:toastPop .3s cubic-bezier(.21,1.04,.67,.98); } @keyframes toastPop{ from{transform:translateX(-50%) translateY(16px) scale(.88);opacity:0} to {transform:translateX(-50%) translateY(0) scale(1); opacity:1} } /* ── ADD EXERCISE BUTTON pulse ── */ .add-ex-btn{ animation:addPulse 3s ease-in-out infinite; } @keyframes addPulse{ 0%,100%{opacity:.85} 50% {opacity:1} } /* ── WEEK STRIP DOT DONE bounce ── */ .wday-dot.done{ animation:dotDone .4s cubic-bezier(.21,1.04,.67,.98); } @keyframes dotDone{ from{transform:scale(0) rotate(180deg)} to {transform:scale(1) rotate(0)} } /* ── HABIT CARD general animation ── */ .habit-card{animation:pgFade .3s ease both} /* ── SAKURA PETALS β€” handled in BLACKPINK animation block above ── */ /* ── MATRIX RAIN β€” theme removed ── */ /* ── BOTTOM NAV INDICATOR DOT ── */ .bnav{position:relative} .bnav.active::after{ content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px;height:4px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:navDot .5s cubic-bezier(.21,1.04,.67,.98) both; } @keyframes navDot{ from{opacity:0;transform:translateX(-50%) scale(0)} to {opacity:1;transform:translateX(-50%) scale(1)} } /* ── HEADER accent border β€” static, no repaint ── */ .app-hdr{ border-bottom:1px solid var(--border); }
πŸ’€
REAPER SQUAD
GRIND OR DIE