*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a14;--surface:#12121e;--card:#1a1a2e;--purple:#8b5cf6;
  --cyan:#06b6d4;--pink:#ec4899;--green:#10b981;--yellow:#f59e0b;
  --red:#ef4444;--text:#e2e8f0;--muted:#94a3b8;--border:#2d2d4a;
}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}

/* HEADER */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:11px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:100;box-shadow:0 2px 24px rgba(139,92,246,0.18)}
.logo{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.logo-icon{width:46px;height:46px;background:linear-gradient(135deg,#8b5cf6,#06b6d4,#ec4899);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 0 20px rgba(139,92,246,.7),0 0 40px rgba(6,182,212,.3);flex-shrink:0;animation:logoPulse 2.5s ease-in-out infinite;position:relative;overflow:hidden}
.logo-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent);border-radius:14px}
@keyframes logoPulse{0%,100%{box-shadow:0 0 20px rgba(139,92,246,.7),0 0 40px rgba(6,182,212,.3)}50%{box-shadow:0 0 30px rgba(139,92,246,1),0 0 60px rgba(236,72,153,.5),0 0 90px rgba(6,182,212,.3)}}
.logo-text{display:flex;flex-direction:column;line-height:1;gap:2px}
.logo-name{font-size:1.4rem;font-weight:900;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899,#f59e0b);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px;animation:shimmer 3s linear infinite}
.logo-sub{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:2.5px;background:linear-gradient(90deg,#8b5cf6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* Difficulty badges */
.diff{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:700;padding:2px 5px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}
.diff-1{background:rgba(34,197,94,.2);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.diff-2{background:rgba(234,179,8,.2);color:#fbbf24;border:1px solid rgba(234,179,8,.3)}
.diff-3{background:rgba(249,115,22,.2);color:#fb923c;border:1px solid rgba(249,115,22,.3)}
.diff-4{background:rgba(239,68,68,.2);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.search-wrap{flex:1;max-width:480px;position:relative}
.search-wrap input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:25px;padding:9px 18px 9px 42px;color:var(--text);font-size:0.93rem;outline:none;transition:border-color .2s,box-shadow .2s}
.search-wrap input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.search-wrap input::placeholder{color:var(--muted)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.hdr-stat{color:var(--muted);font-size:.84rem;white-space:nowrap}
.hdr-stat b{color:var(--purple)}

/* LAYOUT */
.layout{display:flex;flex:1}

/* SIDEBAR */
.sidebar{width:210px;background:var(--surface);border-right:1px solid var(--border);padding:14px 0;position:sticky;top:57px;height:calc(100vh - 57px);overflow-y:auto;flex-shrink:0}
.sb-section{padding:8px 16px 3px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 15px;cursor:pointer;transition:all .15s;border-radius:0 20px 20px 0;margin-right:8px;font-size:.88rem;color:var(--muted)}
.sb-item:hover{background:var(--card);color:var(--text)}
.sb-item.active{background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(6,182,212,.1));color:var(--purple);font-weight:600;border-left:3px solid var(--purple);padding-left:12px}
.sb-icon{font-size:1.05rem}
.sb-badge{margin-left:auto;background:var(--card);border-radius:20px;padding:2px 7px;font-size:.7rem;color:var(--muted)}

/* MAIN */
.main{flex:1;padding:22px;overflow-x:hidden}
.sec-title{font-size:1.15rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sec-badge{background:linear-gradient(135deg,var(--purple),var(--cyan));padding:2px 9px;border-radius:20px;font-size:.68rem;font-weight:700;color:white}

/* FEATURED */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.feat-card{border-radius:14px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:16/9;transition:transform .2s,box-shadow .2s}
.feat-card:hover{transform:scale(1.025);box-shadow:0 8px 30px rgba(0,0,0,.55)}
.feat-card.big{grid-column:span 2}
.feat-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.feat-icon{font-size:3.5rem;position:relative;z-index:1;filter:drop-shadow(0 0 18px currentColor)}
.feat-info{position:absolute;bottom:0;left:0;right:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.88));z-index:2}
.feat-info .ft{font-size:.98rem;font-weight:700;margin-bottom:3px}
.feat-info .fd{font-size:.76rem;color:rgba(255,255,255,.68)}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(139,92,246,.88);border:none;border-radius:50%;width:52px;height:52px;font-size:1.4rem;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s;z-index:3;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.feat-card:hover .play-btn{opacity:1;transform:translate(-50%,-50%) scale(1.1)}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.filter-lbl{color:var(--muted);font-size:.83rem}
.sort-btn{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:5px 13px;color:var(--muted);font-size:.8rem;cursor:pointer;transition:all .15s}
.sort-btn:hover,.sort-btn.active{background:var(--purple);border-color:var(--purple);color:white}
.gcount{margin-left:auto;color:var(--muted);font-size:.83rem}

/* GAME GRID */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:13px}
.gcard{border-radius:11px;overflow:hidden;cursor:pointer;background:var(--card);transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,outline-color .18s;position:relative;outline:1.5px solid transparent;will-change:transform}
.gcard::before{content:'';position:absolute;inset:-1px;border-radius:12px;padding:1.5px;background:linear-gradient(135deg,#8b5cf6,#06b6d4,#ec4899,#f59e0b);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:2}
.gcard:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 42px rgba(0,0,0,.55),0 0 0 1px rgba(139,92,246,.18)}
.gcard:hover::before{opacity:.85}
.gcard:focus-visible{outline:2.5px solid #8b5cf6;outline-offset:3px}
.gcard:active{transform:translateY(-3px) scale(1.015);transition-duration:.1s}
.gcard .thumb{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.thumb-canvas{display:block;width:100%!important;height:100%!important;object-fit:cover;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.gcard:hover .thumb-canvas{transform:scale(1.06)}
.gcard .thumb::after{content:'▶ PLAY';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.72) 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;font-size:.82rem;font-weight:800;letter-spacing:1.5px;color:white;text-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .25s ease}
.gcard:hover .thumb::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .gcard,.gcard::before,.thumb-canvas,.gcard .thumb::after{transition:none!important}
  .gcard:hover,.gcard:active{transform:none!important}
  .gcard:hover .thumb-canvas{transform:none!important}
}
.gcard .info{padding:7px 9px 9px}
.gcard .gtitle{font-size:.83rem;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .gcat{font-size:.69rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:4px}
.badge-new{position:absolute;top:7px;right:7px;background:var(--green);color:white;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:20px;text-transform:uppercase}
.badge-hot{position:absolute;top:7px;right:7px;background:var(--red);color:white;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:20px;text-transform:uppercase}

/* LOAD MORE */
.load-wrap{text-align:center;margin:30px 0 12px}
.load-btn{background:linear-gradient(135deg,var(--purple),var(--cyan));border:none;border-radius:30px;padding:13px 38px;color:white;font-size:.98rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .2s,box-shadow .2s;box-shadow:0 6px 20px rgba(139,92,246,.25)}
.load-btn:hover{opacity:.95;transform:translateY(-2px) scale(1.04);box-shadow:0 12px 30px rgba(139,92,246,.45)}
.load-btn:active{transform:translateY(0) scale(1)}
@media (prefers-reduced-motion:reduce){
  .load-btn,.load-btn:hover,.load-btn:active{transform:none!important;transition:none!important}
  .splash-logo,.splash-title{animation:none!important}
  #splash{transition:opacity .2s!important}
}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:1000;display:none;flex-direction:column}
.modal.open{display:flex}
.modal-hdr{background:var(--surface);padding:11px 18px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-size:1.08rem;font-weight:700}
.modal-cat{background:var(--card);padding:3px 11px;border-radius:20px;font-size:.76rem;color:var(--muted)}
.modal-close{margin-left:auto;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:5px 14px;color:var(--text);cursor:pointer;font-size:.88rem;transition:all .15s}
.modal-close:hover{background:var(--red);border-color:var(--red);color:white}
.modal-body{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
#game-container{width:100%;max-width:920px;height:100%;max-height:610px;background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative}

/* RESPONSIVE */
@media(max-width:900px){.sidebar{display:none}.feat-grid{grid-template-columns:1fr 1fr}.feat-card.big{grid-column:span 2}}
/* Skip-to-content link (SEO + accessibility) */
.skip-link{position:absolute;top:-999px;left:0;background:var(--purple);color:white;padding:8px 16px;border-radius:0 0 8px 0;font-size:.9rem;font-weight:700;z-index:9999;text-decoration:none}
.skip-link:focus{top:0}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}.feat-card.big{grid-column:span 1}.games-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

/* ── LOGIN WALL ── */
#login-wall{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#0a0014 0%,#0a0a14 50%,#001428 100%);display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.lw-box{background:#12121e;border:1px solid #8b5cf655;border-radius:24px;padding:36px 32px 28px;width:100%;max-width:420px;box-shadow:0 0 80px rgba(139,92,246,.3);text-align:center}
.lw-logo{font-size:3rem;margin-bottom:8px}
.lw-title{font-size:1.9rem;font-weight:900;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite;margin-bottom:4px}
.lw-sub{font-size:.88rem;color:#94a3b8;margin-bottom:24px}
.lw-tabs{display:flex;gap:4px;background:#0a0a14;border-radius:12px;padding:4px;margin-bottom:20px}
.lw-tab{flex:1;border:none;background:none;color:#94a3b8;padding:9px;border-radius:9px;cursor:pointer;font-weight:700;font-size:.88rem;transition:all .2s}
.lw-tab.active{background:#8b5cf6;color:white}
.lw-input{width:100%;background:#0d0d1e;border:1px solid #2d2d4a;border-radius:12px;padding:12px 14px;color:#e2e8f0;font-size:.95rem;outline:none;margin-bottom:12px;transition:border-color .2s;box-sizing:border-box}
.lw-input:focus{border-color:#8b5cf6}
.lw-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);border:none;border-radius:12px;color:white;font-size:1rem;font-weight:800;padding:14px;cursor:pointer;margin-top:4px;transition:opacity .2s}
.lw-btn:hover{opacity:.88}
.lw-err{color:#ef4444;font-size:.82rem;margin-bottom:10px;min-height:18px;text-align:left}
/* ── PARTICLES ── */
#particles-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35}
/* ── GAME OF THE DAY ── */
.gotd-card{background:linear-gradient(135deg,#1a0a2e,#0a1428);border:2px solid #f59e0b88;border-radius:18px;padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;gap:20px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.gotd-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at left,#f59e0b08,transparent 70%);pointer-events:none}
.gotd-card:hover{transform:translateY(-3px);box-shadow:0 8px 40px rgba(245,158,11,.3)}
.gotd-badge{background:linear-gradient(135deg,#f59e0b,#f97316);color:white;font-size:.62rem;font-weight:900;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;position:absolute;top:14px;right:14px}
.gotd-emoji{font-size:3.8rem;flex-shrink:0;filter:drop-shadow(0 0 20px #f59e0b88)}
.gotd-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#f59e0b;margin-bottom:4px}
.gotd-name{font-size:1.3rem;font-weight:900;color:#e2e8f0;margin-bottom:4px}
.gotd-desc{font-size:.82rem;color:#94a3b8}
/* ── RANDOM BTN ── */
.rnd-btn{background:linear-gradient(135deg,#ec4899,#f97316);border:none;border-radius:22px;color:white;font-weight:800;font-size:.82rem;padding:9px 16px;cursor:pointer;white-space:nowrap;box-shadow:0 0 16px rgba(236,72,153,.4);transition:transform .15s;flex-shrink:0}
.rnd-btn:hover{transform:scale(1.06)}
/* ── STAR RATINGS ── */
.star-row{display:flex;gap:2px;align-items:center;margin-top:3px}
.star{font-size:.78rem;cursor:pointer;color:#3a3a5a;transition:color .1s;line-height:1;user-select:none}
.star.lit{color:#f59e0b}
/* ── ACHIEVEMENT TOAST ── */
.ach-toast{position:fixed;bottom:28px;right:24px;background:linear-gradient(135deg,#1a1a2e,#12121e);border:1px solid #f59e0b66;border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:12px;z-index:8000;box-shadow:0 8px 40px rgba(0,0,0,.6);transform:translateX(130%);transition:transform .4s cubic-bezier(.34,1.56,.64,1);max-width:300px}
.ach-toast.show{transform:translateX(0)}
.ach-icon{font-size:2rem;flex-shrink:0}
.ach-head{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#f59e0b;margin-bottom:2px}
.ach-name-lbl{font-size:.92rem;font-weight:800;color:#e2e8f0}
/* ── USER CHIP ── */
.user-chip{display:flex;align-items:center;gap:7px;background:rgba(139,92,246,.15);border:1px solid #8b5cf644;border-radius:20px;padding:5px 12px 5px 5px;cursor:pointer;transition:all .15s;flex-shrink:0}
.user-chip:hover{background:rgba(139,92,246,.28)}
.user-avatar-sm{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:900;color:white;font-size:.82rem;flex-shrink:0}
.user-name-lbl{font-size:.8rem;font-weight:700;color:#e2e8f0;white-space:nowrap}
/* ── LEADERBOARD ── */
.lb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:700;align-items:center;justify-content:center;padding:16px}
.lb-overlay.open{display:flex}
.lb-box{background:#12121e;border:1px solid #8b5cf655;border-radius:20px;padding:28px;width:100%;max-width:440px;max-height:85vh;overflow-y:auto;box-shadow:0 0 60px rgba(139,92,246,.25)}
.lb-title{font-size:1.3rem;font-weight:900;background:linear-gradient(90deg,#f59e0b,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:18px;text-align:center}
.lb-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;margin-bottom:6px;background:#1a1a2e}
.lb-rank{font-size:1.1rem;font-weight:900;width:28px;text-align:center;flex-shrink:0}
.lb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:900;color:white;font-size:.95rem;flex-shrink:0}
.lb-info{flex:1}
.lb-uname{font-weight:700;font-size:.9rem}
.lb-stat{font-size:.72rem;color:#94a3b8}
/* ── ACHIEVEMENTS PANEL ── */
.ach-panel{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:700;align-items:center;justify-content:center;padding:16px}
.ach-panel.open{display:flex}
.ach-panel-box{background:#12121e;border:1px solid #8b5cf655;border-radius:20px;padding:28px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;box-shadow:0 0 60px rgba(139,92,246,.25)}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ach-card{background:#1a1a2e;border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;border:1px solid #2d2d4a}
.ach-card.earned{border-color:#f59e0b66;background:linear-gradient(135deg,rgba(245,158,11,.08),#1a1a2e)}
.ach-card.locked{opacity:.38}
.ach-card-icon{font-size:1.7rem;flex-shrink:0}
.ach-card-name{font-size:.78rem;font-weight:800;color:#e2e8f0}
.ach-card-desc{font-size:.67rem;color:#94a3b8;margin-top:1px}

/* ── SPLASH SCREEN ── */
#splash{position:fixed;inset:0;z-index:99999;background:#0a0014;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s ease,visibility .6s ease}
#splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{font-size:5rem;animation:logoPulse 1.5s ease-in-out infinite}
.splash-title{font-size:3rem;font-weight:900;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899,#f59e0b);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2s linear infinite;letter-spacing:2px}
.splash-bar-wrap{width:220px;height:6px;background:#1a1a2e;border-radius:10px;overflow:hidden}
.splash-bar{height:100%;width:0%;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899);border-radius:10px;transition:width .05s linear;box-shadow:0 0 12px #8b5cf6}
.splash-sub{font-size:.82rem;color:#94a3b8;letter-spacing:2px;text-transform:uppercase}
/* ── CUSTOM CURSOR ── */
*, *::before, *::after { cursor: none !important; }
/* ── CURSOR RING ── */
#custom-cursor{position:fixed;width:28px;height:28px;border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .15s,height .15s,opacity .2s,border-color .2s;border:2px solid #8b5cf6;box-shadow:0 0 10px #8b5cf6,inset 0 0 6px #8b5cf622;animation:cursorSpin 3s linear infinite}
#custom-cursor::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px;background:#8b5cf6;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #8b5cf6;transition:background .2s,box-shadow .2s}
#custom-cursor.clicking{width:38px;height:38px;border-color:#ec4899;box-shadow:0 0 18px #ec4899,inset 0 0 10px #ec489922}
#custom-cursor.clicking::after{background:#ec4899;box-shadow:0 0 12px #ec4899}
#custom-cursor.on-btn{border-color:#06b6d4;box-shadow:0 0 14px #06b6d4,inset 0 0 6px #06b6d422}
#custom-cursor.on-btn::after{background:#06b6d4;box-shadow:0 0 8px #06b6d4}
#custom-cursor.on-card{border-color:#ec4899;box-shadow:0 0 14px #ec4899,inset 0 0 6px #ec489922}
#custom-cursor.on-card::after{background:#ec4899;box-shadow:0 0 8px #ec4899}
@keyframes cursorSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* ── CURSOR TRAIL DOTS ── */
.c-trail{position:fixed;border-radius:50%;pointer-events:none;z-index:99996;transform:translate(-50%,-50%);transition:opacity .3s}
/* ── CURSOR CLICK BURST ── */
#cursor-burst{position:fixed;width:0;height:0;border-radius:50%;border:2px solid #ec4899;pointer-events:none;z-index:99995;transform:translate(-50%,-50%);opacity:0}
#cursor-burst.pop{animation:burstPop .4s ease-out forwards}
@keyframes burstPop{0%{width:0;height:0;opacity:.9;border-color:#ec4899}100%{width:60px;height:60px;opacity:0;border-color:#8b5cf6}}
/* ── XP / LEVEL BAR ── */
.xp-bar-wrap{display:flex;align-items:center;gap:7px;background:rgba(139,92,246,.1);border:1px solid #8b5cf633;border-radius:20px;padding:4px 10px 4px 6px;flex-shrink:0}
.xp-level-badge{background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:white;font-size:.65rem;font-weight:900;padding:2px 7px;border-radius:20px;white-space:nowrap}
.xp-bar{width:70px;height:5px;background:#1a1a2e;border-radius:10px;overflow:hidden}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#06b6d4);border-radius:10px;transition:width .4s ease;box-shadow:0 0 6px #8b5cf6}
.xp-text{font-size:.62rem;color:#94a3b8;white-space:nowrap}
/* ── STREAK ── */
.streak-chip{display:flex;align-items:center;gap:5px;background:rgba(245,158,11,.1);border:1px solid #f59e0b44;border-radius:20px;padding:4px 10px;flex-shrink:0}
.streak-num{font-size:.78rem;font-weight:900;color:#f59e0b}
.streak-lbl{font-size:.65rem;color:#94a3b8}
/* ── FAVOURITES ── */
.fav-btn{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.55);border:none;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;z-index:4;transition:transform .2s;backdrop-filter:blur(4px);line-height:1}
.fav-btn:hover{transform:scale(1.25)}
.fav-btn.faved{color:#ec4899;filter:drop-shadow(0 0 6px #ec4899)}
.card-stars{font-size:.65rem;margin-top:2px;letter-spacing:-.5px;line-height:1}
/* ── RECENTLY PLAYED ── */
.recent-section{margin-bottom:24px}
/* ── 3D TILT ── */
.gcard{transform-style:preserve-3d;will-change:transform}
/* ── CONFETTI ── */
.confetti-piece{position:fixed;width:10px;height:10px;pointer-events:none;z-index:9999;border-radius:2px;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}
/* ── LEVEL UP TOAST ── */
.lvlup-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) scale(0);background:linear-gradient(135deg,#1a0a2e,#0a1428);border:2px solid #f59e0b;border-radius:20px;padding:16px 28px;z-index:8500;text-align:center;box-shadow:0 0 60px rgba(245,158,11,.5);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.lvlup-toast.show{transform:translateX(-50%) scale(1)}
.lvlup-icon{font-size:2.2rem;margin-bottom:4px}
.lvlup-text{font-size:1rem;font-weight:900;background:linear-gradient(90deg,#f59e0b,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
/* ── BADGE DISPLAY (profile) ── */
.profile-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.profile-badge{font-size:1.4rem;filter:drop-shadow(0 0 6px currentColor);cursor:default}

/* ══════════════════════════════════════════
   THEME SYSTEM
   ══════════════════════════════════════════ */
body.theme-red   { --purple:#ef4444;--cyan:#f97316;--pink:#fbbf24; }
body.theme-blue  { --purple:#3b82f6;--cyan:#06b6d4;--pink:#8b5cf6; }
body.theme-green { --purple:#10b981;--cyan:#34d399;--pink:#06b6d4; }
body.theme-orange{ --purple:#f97316;--cyan:#f59e0b;--pink:#ec4899; }
/* Theme picker */
.theme-btn{background:none;border:2px solid var(--border);border-radius:50%;width:30px;height:30px;cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0;position:relative;overflow:hidden}
.theme-btn:hover{transform:scale(1.2);border-color:var(--purple)}
.theme-picker-wrap{position:relative;flex-shrink:0}
.theme-picker-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;gap:7px;z-index:500;box-shadow:0 8px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.theme-picker-panel.open{opacity:1;pointer-events:all;transform:translateY(0)}
.theme-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s}
.theme-swatch:hover{transform:scale(1.25);border-color:white}
.theme-swatch.active{border-color:white;box-shadow:0 0 8px currentColor}

/* ══════════════════════════════════════════
   SOUND TOGGLE BUTTON
   ══════════════════════════════════════════ */
.snd-btn{background:rgba(139,92,246,.15);border:1px solid var(--border);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:background .2s,transform .15s;flex-shrink:0}
.snd-btn:hover{background:rgba(139,92,246,.3);transform:scale(1.1)}

/* ══════════════════════════════════════════
   PROFILE PAGE PANEL
   ══════════════════════════════════════════ */
.profile-panel{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.profile-panel.open{opacity:1;pointer-events:all}
.profile-box{background:linear-gradient(135deg,var(--surface),#0d0d1a);border:1px solid var(--border);border-radius:24px;padding:28px;width:min(560px,95vw);max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 0 80px rgba(139,92,246,.2)}
.profile-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px;transition:color .15s,background .15s}
.profile-close:hover{color:var(--text);background:rgba(255,255,255,.08)}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;color:white;box-shadow:0 0 30px rgba(139,92,246,.5);margin:0 auto 10px;border:3px solid var(--border)}
.profile-username{font-size:1.4rem;font-weight:900;text-align:center;background:linear-gradient(90deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.profile-joined{text-align:center;color:var(--muted);font-size:.8rem;margin:2px 0 16px}
.profile-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.pstat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 8px;text-align:center}
.pstat-val{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pstat-lbl{font-size:.72rem;color:var(--muted);margin-top:2px}
.profile-section-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:14px 0 8px}
.profile-fav-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.profile-fav-scroll::-webkit-scrollbar{height:3px}
.profile-fav-card{min-width:90px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;text-align:center;cursor:pointer;transition:transform .15s;flex-shrink:0}
.profile-fav-card:hover{transform:translateY(-3px)}
.profile-fav-emoji{font-size:1.6rem;display:block;margin-bottom:3px}
.profile-fav-name{font-size:.65rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══════════════════════════════════════════
   DAILY CHALLENGE
   ══════════════════════════════════════════ */
.dc-banner{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(6,182,212,.1));border:1px solid #10b98133;border-radius:14px;padding:10px 16px;display:flex;align-items:center;gap:12px;margin:0 20px 14px;flex-wrap:wrap;cursor:pointer;transition:border-color .2s}
.dc-banner:hover{border-color:#10b98166}
.dc-banner-icon{font-size:1.5rem;flex-shrink:0}
.dc-banner-text{flex:1}
.dc-banner-title{font-size:.82rem;font-weight:800;color:#34d399}
.dc-banner-desc{font-size:.75rem;color:var(--muted)}
.dc-banner-progress{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dc-prog-bar{width:90px;height:7px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.dc-prog-fill{height:100%;background:linear-gradient(90deg,#10b981,#06b6d4);border-radius:10px;transition:width .4s}
.dc-prog-text{font-size:.75rem;font-weight:700;color:#34d399;white-space:nowrap}
/* DC modal */
.dc-overlay{position:fixed;inset:0;z-index:3500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.dc-overlay.open{opacity:1;pointer-events:all}
.dc-box{background:linear-gradient(135deg,var(--surface),#0d1a0d);border:1px solid #10b98133;border-radius:24px;padding:28px;width:min(420px,94vw);position:relative;box-shadow:0 0 80px rgba(16,185,129,.2)}
.dc-title{font-size:1.2rem;font-weight:900;color:#34d399;margin-bottom:4px;text-align:center}
.dc-subtitle{text-align:center;color:var(--muted);font-size:.8rem;margin-bottom:18px}
.dc-task{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px;transition:border-color .2s}
.dc-task.done{border-color:#10b98155;background:rgba(16,185,129,.08)}
.dc-task-icon{font-size:1.4rem;flex-shrink:0}
.dc-task-info{flex:1}
.dc-task-name{font-size:.87rem;font-weight:700}
.dc-task-name.done{text-decoration:line-through;color:var(--muted)}
.dc-task-check{font-size:1.2rem}
.dc-reward{text-align:center;margin-top:14px;padding:12px;background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(249,115,22,.1));border:1px solid #f59e0b33;border-radius:14px}
.dc-reward-btn{background:linear-gradient(135deg,#10b981,#06b6d4);border:none;border-radius:20px;color:white;font-weight:800;padding:10px 24px;cursor:pointer;font-size:.9rem;margin-top:8px;transition:transform .15s}
.dc-reward-btn:hover{transform:scale(1.05)}
.dc-reward-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ══════════════════════════════════════════
   XP BOOST BANNER
   ══════════════════════════════════════════ */
.xpboost-banner{background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(249,115,22,.15));border-bottom:1px solid #f59e0b44;padding:6px 20px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;font-weight:800;color:#fbbf24;animation:boostPulse 2s ease-in-out infinite}
@keyframes boostPulse{0%,100%{opacity:.9}50%{opacity:1;text-shadow:0 0 12px #f59e0b}}

/* ══════════════════════════════════════════
   NOW PLAYING BADGE
   ══════════════════════════════════════════ */
.now-playing-badge{position:absolute;top:6px;right:6px;background:linear-gradient(135deg,#10b981,#06b6d4);color:white;font-size:.6rem;font-weight:800;padding:3px 7px;border-radius:10px;letter-spacing:.5px;z-index:5;animation:npPulse 1.2s ease-in-out infinite;pointer-events:none}
@keyframes npPulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}

/* ══════════════════════════════════════════
   SEARCH AUTOCOMPLETE
   ══════════════════════════════════════════ */
.search-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;z-index:600;box-shadow:0 8px 30px rgba(0,0,0,.5);display:none}
.search-ac.open{display:block}
.search-ac-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;font-size:.87rem;transition:background .15s}
.search-ac-item:hover,.search-ac-item.focused{background:rgba(139,92,246,.15)}
.search-ac-emoji{font-size:1.1rem;flex-shrink:0}
.search-ac-name{font-weight:600;flex:1}
.search-ac-cat{font-size:.72rem;color:var(--muted)}

/* ══════════════════════════════════════════
   SCREEN SHAKE
   ══════════════════════════════════════════ */
@keyframes screenShake{0%,100%{transform:translate(0)}10%{transform:translate(-4px,-2px)}20%{transform:translate(4px,2px)}30%{transform:translate(-3px,3px)}40%{transform:translate(3px,-3px)}50%{transform:translate(-2px,2px)}60%{transform:translate(2px,-1px)}70%{transform:translate(-1px,2px)}80%{transform:translate(1px,-1px)}90%{transform:translate(-1px,1px)}}
body.shaking{animation:screenShake .45s ease}

/* ══════════════════════════════════════════
   ENHANCED CARD HOVER PREVIEW
   ══════════════════════════════════════════ */
.gcard:hover .thumb{background-size:110%!important}
.gcard .thumb .card-emoji{font-size:3rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .3s}
.gcard:hover .thumb .card-emoji{transform:scale(1.25) rotate(-5deg);filter:drop-shadow(0 0 12px var(--purple))}

/* ══════════════════════════════════════════
   WEEKLY LEADERBOARD TAB
   ══════════════════════════════════════════ */
.lb-tabs{display:flex;gap:6px;margin-bottom:14px}
.lb-tab{flex:1;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:7px;text-align:center;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted);transition:all .2s}
.lb-tab.active{background:linear-gradient(135deg,var(--purple),var(--cyan));color:white;border-color:transparent;box-shadow:0 0 14px rgba(139,92,246,.4)}

/* ══ AVATAR PICKER ══ */
.av-modal{position:fixed;inset:0;z-index:4500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .2s}
.av-modal.open{opacity:1;pointer-events:all}
.av-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;width:min(420px,94vw);position:relative}
.av-title{font-size:1.1rem;font-weight:900;text-align:center;margin-bottom:16px;background:linear-gradient(90deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;max-height:260px;overflow-y:auto}
.av-opt{font-size:1.6rem;text-align:center;padding:6px;border-radius:10px;cursor:pointer;transition:transform .15s,background .15s}
.av-opt:hover{transform:scale(1.25);background:rgba(139,92,246,.2)}
.av-opt.selected{background:rgba(139,92,246,.35);outline:2px solid var(--purple)}

/* ══ NOTIFICATION BELL ══ */
.notif-wrap{position:relative;flex-shrink:0}
.notif-btn{background:rgba(139,92,246,.15);border:1px solid var(--border);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:background .2s;position:relative}
.notif-btn:hover{background:rgba(139,92,246,.3)}
.notif-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:white;font-size:.6rem;font-weight:900;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.6);z-index:600;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s;max-height:360px;overflow-y:auto}
.notif-panel.open{opacity:1;pointer-events:all;transform:translateY(0)}
.notif-head{padding:12px 14px 8px;font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.notif-item:hover{background:rgba(255,255,255,.04)}
.notif-item.unread{background:rgba(139,92,246,.07)}
.notif-icon{font-size:1.3rem;flex-shrink:0;margin-top:1px}
.notif-text{font-size:.8rem;color:var(--text);line-height:1.4}
.notif-time{font-size:.7rem;color:var(--muted);margin-top:2px}
.notif-empty{padding:20px;text-align:center;color:var(--muted);font-size:.83rem}
.notif-clear{background:none;border:none;color:var(--muted);font-size:.72rem;cursor:pointer;padding:2px 6px;border-radius:6px;transition:color .15s}
.notif-clear:hover{color:var(--text)}

/* ══ COLLECTIONS ══ */
.coll-panel{position:fixed;inset:0;z-index:3200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.coll-panel.open{opacity:1;pointer-events:all}
.coll-box{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:26px;width:min(540px,95vw);max-height:88vh;overflow-y:auto;position:relative}
.coll-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.coll-title{font-size:1.15rem;font-weight:900;background:linear-gradient(90deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.coll-create{display:flex;gap:8px;margin-bottom:18px}
.coll-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 14px;color:var(--text);font-size:.87rem;outline:none}
.coll-input:focus{border-color:var(--purple)}
.coll-add-btn{background:linear-gradient(135deg,var(--purple),var(--cyan));border:none;border-radius:12px;color:white;font-weight:800;padding:9px 16px;cursor:pointer;white-space:nowrap}
.coll-list{display:flex;flex-direction:column;gap:10px}
.coll-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.coll-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.coll-item-name{font-weight:700;font-size:.9rem}
.coll-item-count{font-size:.72rem;color:var(--muted)}
.coll-item-games{display:flex;gap:6px;flex-wrap:wrap}
.coll-game-pill{display:flex;align-items:center;gap:4px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.25);border-radius:20px;padding:3px 9px;font-size:.73rem;cursor:pointer}
.coll-game-pill:hover{background:rgba(139,92,246,.3)}
.coll-del-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:3px 7px;border-radius:6px;transition:color .15s}
.coll-del-btn:hover{color:#ef4444}
.coll-add-game-btn{background:rgba(139,92,246,.12);border:1px dashed rgba(139,92,246,.3);border-radius:20px;padding:3px 10px;font-size:.72rem;color:var(--muted);cursor:pointer;transition:all .15s}
.coll-add-game-btn:hover{border-color:var(--purple);color:var(--text)}

/* ══ BACK TO TOP ══ */
#back-top{position:fixed;bottom:28px;right:24px;width:42px;height:42px;background:linear-gradient(135deg,var(--purple),var(--cyan));border:none;border-radius:50%;color:white;font-size:1.1rem;cursor:pointer;z-index:800;box-shadow:0 4px 18px rgba(139,92,246,.5);opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;pointer-events:none}
#back-top.visible{opacity:1;transform:translateY(0);pointer-events:all}
#back-top:hover{transform:translateY(-3px) scale(1.1)}

/* ══ FRIENDS & CHALLENGES ══ */
.friends-panel{position:fixed;inset:0;z-index:3300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.friends-panel.open{opacity:1;pointer-events:all}
.friends-box{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:26px;width:min(560px,95vw);max-height:88vh;overflow-y:auto;position:relative}
.friends-tabs{display:flex;gap:6px;margin-bottom:18px}
.friends-tab{flex:1;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:7px;text-align:center;cursor:pointer;font-size:.8rem;font-weight:700;color:var(--muted);transition:all .2s}
.friends-tab.active{background:linear-gradient(135deg,var(--purple),var(--cyan));color:white;border-color:transparent}
.friend-search{display:flex;gap:8px;margin-bottom:14px}
.friend-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:8px}
.friend-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.friend-info{flex:1}
.friend-name{font-weight:700;font-size:.88rem}
.friend-status{font-size:.72rem;color:var(--muted)}
.friend-actions{display:flex;gap:6px}
.friend-btn{border:none;border-radius:10px;padding:5px 11px;font-size:.75rem;font-weight:700;cursor:pointer;transition:transform .15s}
.friend-btn:hover{transform:scale(1.05)}
.friend-btn.add{background:linear-gradient(135deg,var(--purple),var(--cyan));color:white}
.friend-btn.remove{background:rgba(239,68,68,.2);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.friend-btn.challenge{background:linear-gradient(135deg,#f59e0b,#f97316);color:white}
/* Challenge card */
.challenge-card{background:var(--card);border:1px solid #f59e0b44;border-radius:14px;padding:14px;margin-bottom:10px}
.challenge-card.incoming{border-color:#10b98144}
.challenge-from{font-size:.72rem;color:var(--muted);margin-bottom:4px}
.challenge-title{font-weight:800;font-size:.92rem;margin-bottom:4px}
.challenge-desc{font-size:.78rem;color:var(--muted);margin-bottom:10px}
.challenge-btns{display:flex;gap:7px}
.chal-btn{border:none;border-radius:10px;padding:7px 16px;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .15s}
.chal-btn:hover{transform:scale(1.05)}
.chal-btn.accept{background:linear-gradient(135deg,#10b981,#06b6d4);color:white}
.chal-btn.decline{background:rgba(239,68,68,.2);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.chal-btn.send{background:linear-gradient(135deg,#f59e0b,#f97316);color:white}

/* ══ PRESTIGE BADGE ══ */
.prestige-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#f59e0b,#f97316);color:white;font-size:.65rem;font-weight:900;padding:2px 8px;border-radius:10px;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 0 12px rgba(245,158,11,.5)}

/* ══ STATUS MESSAGE ══ */
.status-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.status-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 12px;color:var(--text);font-size:.83rem;outline:none}
.status-input:focus{border-color:var(--purple)}
.status-save-btn{background:linear-gradient(135deg,var(--purple),var(--cyan));border:none;border-radius:10px;color:white;font-weight:700;padding:6px 12px;cursor:pointer;font-size:.78rem}
.profile-status{text-align:center;color:var(--cyan);font-size:.82rem;font-style:italic;margin-bottom:12px;min-height:18px}

/* ══ ZSTORE ══ */
.zstore-overlay{position:fixed;inset:0;z-index:3900;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .25s}
.zstore-overlay.open{opacity:1;pointer-events:all}
.zstore-box{background:linear-gradient(135deg,var(--surface),#0a0014);border:1px solid #a855f744;border-radius:24px;padding:24px;width:min(620px,96vw);max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 80px rgba(168,85,247,.18)}
.zstore-title{text-align:center;font-size:1.4rem;font-weight:900;margin-bottom:4px;background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.zstore-subtitle{text-align:center;font-size:.75rem;color:var(--muted);margin-bottom:16px}
.zstore-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.zstore-tab{flex:1;min-width:80px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:7px 10px;text-align:center;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--muted);transition:all .2s}
.zstore-tab.active{background:linear-gradient(135deg,#a855f7,#ec4899);color:white;border-color:transparent;box-shadow:0 0 14px rgba(168,85,247,.4)}
.zstore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.zstore-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px;text-align:center;transition:border-color .2s,transform .15s;position:relative}
.zstore-item:hover{border-color:#a855f755;transform:translateY(-2px)}
.zstore-item.owned{border-color:#a855f755;background:rgba(168,85,247,.07)}
.zstore-item.active-item{border-color:#a855f7;box-shadow:0 0 14px rgba(168,85,247,.35)}
.zstore-item-icon{font-size:2rem;margin-bottom:6px;display:block}
.zstore-item-name{font-size:.82rem;font-weight:700;margin-bottom:3px}
.zstore-item-desc{font-size:.7rem;color:var(--muted);margin-bottom:8px;line-height:1.3}
.zstore-item-price{font-size:.8rem;font-weight:900;color:#a855f7;margin-bottom:8px}
.zstore-buy-btn{width:100%;background:linear-gradient(135deg,#a855f7,#ec4899);border:none;border-radius:10px;color:white;font-weight:800;padding:7px;cursor:pointer;font-size:.78rem;transition:transform .15s,opacity .15s}
.zstore-buy-btn:hover{transform:scale(1.04)}
.zstore-buy-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.zstore-owned-badge{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#a855f7,#ec4899);color:white;border-radius:8px;font-size:.62rem;font-weight:800;padding:2px 7px}
/* ── Spin wheel ── */
.spin-section{text-align:center;padding:10px 0}
.spin-wheel-wrap{position:relative;display:inline-block;margin:10px auto}
.spin-wheel{width:220px;height:220px;border-radius:50%;border:4px solid #a855f7;position:relative;overflow:hidden;transition:transform 0s;box-shadow:0 0 30px rgba(168,85,247,.4)}
.spin-pointer{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:1.6rem;z-index:10;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.spin-result{min-height:32px;font-size:1rem;font-weight:800;margin:10px 0;color:#a855f7}
.spin-bets{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.spin-bet-btn{background:var(--card);border:1px solid #a855f744;border-radius:20px;color:var(--text);font-weight:800;padding:6px 14px;cursor:pointer;font-size:.8rem;transition:all .2s}
.spin-bet-btn:hover{border-color:#a855f7;color:#a855f7}
.spin-bet-btn.selected{background:linear-gradient(135deg,#a855f7,#ec4899);color:white;border-color:transparent}
.pet-acc-aura{font-size:1.1rem;bottom:-1.2rem;left:50%;transform:translateX(-50%);animation:auraFloat 2s ease-in-out infinite}
@keyframes auraFloat{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.15)}}
/* ── Power-up timer badges ── */
.powerup-active{display:inline-block;background:linear-gradient(135deg,#f59e0b,#f97316);color:white;border-radius:8px;font-size:.65rem;font-weight:800;padding:2px 7px;margin-left:4px}
/* ── Themes ── */
body.theme-galaxy{--bg:#060010;--surface:#100020;--card:#180030;--border:#7c3aed55;--text:#e9d5ff;--muted:#9d7dbd;--purple:#a855f7;--cyan:#818cf8}
body.theme-ocean {--bg:#00060f;--surface:#001525;--card:#002035;--border:#0891b255;--text:#cffafe;--muted:#67b8cc;--purple:#38bdf8;--cyan:#06b6d4}
body.theme-fire  {--bg:#0f0500;--surface:#1a0800;--card:#2a0e00;--border:#f9731655;--text:#fff7ed;--muted:#c08060;--purple:#f97316;--cyan:#fbbf24}
body.theme-forest{--bg:#020b04;--surface:#071a09;--card:#0d2b10;--border:#22c55e55;--text:#dcfce7;--muted:#6faa78;--purple:#22c55e;--cyan:#4ade80}
body.theme-candy {--bg:#0d0010;--surface:#1a0020;--card:#280030;--border:#ec489955;--text:#fdf2f8;--muted:#c080b0;--purple:#ec4899;--cyan:#f472b6}
body.theme-midnight{--bg:#000005;--surface:#05050f;--card:#0a0a18;--border:#3730a355;--text:#e0e7ff;--muted:#7077a0;--purple:#6366f1;--cyan:#818cf8}
body.theme-solar {--bg:#0a0800;--surface:#1a1400;--card:#2a2000;--border:#eab30855;--text:#fffbeb;--muted:#b09040;--purple:#f59e0b;--cyan:#fcd34d}
/* ══ LIGHT MODE ══ */
body.light-mode{--bg:#f0f2f8;--surface:#ffffff;--card:#e8eaf2;--border:#d0d4e8;--text:#1a1a2e;--muted:#5a6480;background:var(--bg);color:var(--text)}
body.light-mode header{background:var(--surface);box-shadow:0 2px 24px rgba(139,92,246,.12)}
body.light-mode .gcard{background:var(--card)}
body.light-mode #particles-canvas{opacity:.15}
.light-toggle{background:rgba(139,92,246,.15);border:1px solid var(--border);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:background .2s;flex-shrink:0}
.light-toggle:hover{background:rgba(139,92,246,.3)}

/* ══ VIRTUAL PET ══ */
.pet-widget{position:fixed;bottom:80px;left:20px;z-index:700;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;user-select:none}
.pet-bubble{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px 10px;font-size:.72rem;color:var(--text);white-space:nowrap;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.3);max-width:130px;text-align:center;line-height:1.3}
.pet-bubble::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--surface);border-bottom:none}
.pet-body{font-size:2.6rem;transition:transform .2s;filter:drop-shadow(0 4px 8px rgba(139,92,246,.4));animation:petFloat 2.5s ease-in-out infinite}
.pet-body:hover{transform:scale(1.15)}
@keyframes petFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pet-body.pet-bounce{animation:petBounce .4s ease}
@keyframes petBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.35) rotate(10deg)}}
/* Pet panel */
.pet-panel{position:fixed;bottom:190px;left:20px;z-index:701;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;width:210px;box-shadow:0 8px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s,transform .25s}
.pet-panel.open{opacity:1;pointer-events:all;transform:translateY(0)}
.pet-panel-name{font-weight:900;font-size:1rem;text-align:center;background:linear-gradient(90deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2px}
.pet-stage{text-align:center;font-size:.7rem;color:var(--muted);margin-bottom:10px}
.pet-stat-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pet-stat-lbl{font-size:.72rem;width:60px;color:var(--muted)}
.pet-stat-bar{flex:1;height:7px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.pet-stat-fill{height:100%;border-radius:10px;transition:width .4s}
.pet-stat-fill.hp{background:linear-gradient(90deg,#10b981,#34d399)}
.pet-stat-fill.hunger{background:linear-gradient(90deg,#f59e0b,#f97316)}
.pet-stat-fill.mood{background:linear-gradient(90deg,#ec4899,#8b5cf6)}
.pet-actions{display:flex;gap:6px;margin-top:10px}
.pet-act-btn{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 4px;font-size:.75rem;cursor:pointer;text-align:center;transition:background .15s;color:var(--text)}
.pet-act-btn:hover{background:rgba(139,92,246,.2)}
.pet-rename-row{display:flex;gap:6px;margin-top:8px}
.pet-rename-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:5px 8px;color:var(--text);font-size:.75rem;outline:none}
.pet-rename-btn{background:linear-gradient(135deg,var(--purple),var(--cyan));border:none;border-radius:8px;color:white;font-size:.72rem;font-weight:700;padding:5px 9px;cursor:pointer}

/* ══ HIGH SCORES ══ */
.hs-display{display:flex;align-items:center;gap:8px;background:rgba(245,158,11,.1);border:1px solid #f59e0b33;border-radius:10px;padding:7px 12px;margin-top:8px;font-size:.8rem}
.hs-val{font-weight:900;color:#f59e0b}
.hs-new{color:#10b981;font-weight:800;font-size:.7rem;animation:hsFlash .6s ease infinite alternate}
@keyframes hsFlash{from{opacity:1}to{opacity:.4}}

/* ══ GAME NOTES ══ */
.note-btn{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);border-radius:8px;padding:5px 10px;font-size:.75rem;color:var(--purple);cursor:pointer;transition:background .15s}
.note-btn:hover{background:rgba(139,92,246,.3)}
.note-panel{position:fixed;inset:0;z-index:3400;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .2s}
.note-panel.open{opacity:1;pointer-events:all}
.note-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;width:min(400px,94vw);position:relative}
.note-textarea{width:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;color:var(--text);font-size:.87rem;resize:vertical;min-height:100px;outline:none;font-family:inherit;margin:10px 0}
.note-textarea:focus{border-color:var(--purple)}

/* ══ COMBO XP ══ */
.combo-toast{position:fixed;top:130px;right:20px;background:linear-gradient(135deg,#f59e0b,#f97316);color:white;font-weight:900;font-size:.88rem;padding:10px 18px;border-radius:16px;z-index:7000;box-shadow:0 0 30px rgba(245,158,11,.6);transform:translateX(120%);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.combo-toast.show{transform:translateX(0)}

/* ══ SOUND PACKS ══ */
.spack-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px;z-index:600;box-shadow:0 8px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s;min-width:150px}
.spack-panel.open{opacity:1;pointer-events:all;transform:translateY(0)}
.spack-opt{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.82rem;transition:background .15s;display:flex;align-items:center;gap:8px}
.spack-opt:hover{background:rgba(139,92,246,.15)}
.spack-opt.active{color:var(--purple);font-weight:700}

/* ══ TRIVIA ══ */
.trivia-overlay{position:fixed;inset:0;z-index:3600;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}
.trivia-overlay.open{opacity:1;pointer-events:all}
.trivia-box{background:linear-gradient(135deg,var(--surface),#0d0d1a);border:1px solid var(--purple);border-radius:24px;padding:28px;width:min(460px,94vw);position:relative;box-shadow:0 0 80px rgba(139,92,246,.25)}
.trivia-q{font-size:1rem;font-weight:700;margin-bottom:18px;line-height:1.5;text-align:center}
.trivia-opts{display:flex;flex-direction:column;gap:8px}
.trivia-opt{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 16px;cursor:pointer;font-size:.87rem;transition:all .2s;text-align:left}
.trivia-opt:hover:not(.disabled){background:rgba(139,92,246,.2);border-color:var(--purple)}
.trivia-opt.correct{background:rgba(16,185,129,.2);border-color:#10b981;color:#34d399;font-weight:700}
.trivia-opt.wrong{background:rgba(239,68,68,.2);border-color:#ef4444;color:#f87171}
.trivia-opt.disabled{cursor:default}
.trivia-result{text-align:center;margin-top:14px;font-weight:800;font-size:.95rem;min-height:24px}

/* ══ PROFILE CARD ══ */
.pcard-overlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .25s}
.pcard-overlay.open{opacity:1;pointer-events:all}
.pcard{background:linear-gradient(135deg,#0a0a14,#1a0a2e,#0a1428);border:2px solid var(--purple);border-radius:24px;padding:28px 24px;width:min(340px,94vw);text-align:center;position:relative;box-shadow:0 0 80px rgba(139,92,246,.4),inset 0 0 60px rgba(139,92,246,.05)}
.pcard::before{content:'';position:absolute;inset:0;border-radius:24px;background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(6,182,212,.05),rgba(236,72,153,.05));pointer-events:none}
.pcard-avatar{font-size:3.5rem;margin-bottom:6px;filter:drop-shadow(0 0 20px var(--purple))}
.pcard-name{font-size:1.4rem;font-weight:900;background:linear-gradient(90deg,var(--purple),var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.pcard-level{display:inline-block;background:linear-gradient(135deg,var(--purple),var(--cyan));color:white;font-weight:900;font-size:.8rem;padding:4px 14px;border-radius:20px;margin-bottom:14px}
.pcard-stats{display:flex;justify-content:center;gap:20px;margin-bottom:14px}
.pcard-stat{text-align:center}
.pcard-stat-val{font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.pcard-stat-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.pcard-badges-row{display:flex;justify-content:center;gap:8px;font-size:1.6rem;margin-bottom:14px;flex-wrap:wrap}
.pcard-site{font-size:.7rem;color:var(--muted);margin-top:8px;letter-spacing:1px}
.pcard-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer}
.pcard-dl-btn{background:linear-gradient(135deg,var(--purple),var(--cyan));border:none;border-radius:14px;color:white;font-weight:800;padding:10px 24px;cursor:pointer;font-size:.87rem;width:100%;margin-top:8px;transition:transform .15s}
.pcard-dl-btn:hover{transform:scale(1.03)}

/* ══ GAME RECOMMENDATIONS ══ */
.rec-section{padding:0 20px 14px}
.rec-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.rec-scroll::-webkit-scrollbar{height:3px}

/* ══ ZAID'S PICKS ══ */
.zpicks-section{padding:0 20px 14px}

/* ══ GAME HISTORY TIMELINE ══ */
.history-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding-right:4px}
.history-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:.82rem}
.history-emoji{font-size:1.2rem;flex-shrink:0}
.history-title{font-weight:600;flex:1}
.history-date{font-size:.7rem;color:var(--muted);white-space:nowrap}

/* ══ ZCOINS ══ */
.zcoin-hdr{display:none;align-items:center;gap:5px;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(249,115,22,.1));border:1px solid #f59e0b44;border-radius:20px;padding:4px 12px;flex-shrink:0;cursor:default}
.zcoin-hdr.show{display:flex}
.zcoin-icon{font-size:1rem}
.zcoin-val{font-weight:900;font-size:.88rem;color:#f59e0b}
.zcoin-lbl{font-size:.7rem;color:var(--muted)}

/* ══ PET ACCESSORIES DISPLAY ══ */
.pet-body-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.pet-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center}
.pet-acc{position:absolute;pointer-events:none;line-height:1}
.pet-acc-hat  {font-size:1.5rem;top:-1.4rem;left:50%;transform:translateX(-50%)}
.pet-acc-face {font-size:1rem;top:10%;right:-0.8rem}
.pet-acc-back {font-size:1.2rem;top:20%;left:-1.2rem;opacity:.85}
.pet-acc-shirt{font-size:1rem;bottom:5%;left:50%;transform:translateX(-50%)}
.pet-acc-neck {font-size:.9rem;top:45%;left:50%;transform:translateX(-50%)}
.pet-acc-decor{font-size:.85rem;bottom:-0.5rem;right:-0.8rem;opacity:.75}
/* ══ PET ROOM ══ */
.room-wall{position:absolute;top:0;left:0;right:0;height:62%;background:linear-gradient(180deg,#1a0535 0%,#2d0b55 100%);border-bottom:3px solid #3d1566}
.room-floor{position:absolute;bottom:0;left:0;right:0;height:41%;background:linear-gradient(180deg,#120820 0%,#0a0414 100%)}
.room-wallpaper{position:absolute;inset:0;opacity:.15;background-size:40px 40px}
.room-item{position:absolute;text-align:center;line-height:1}
.room-item-lbl{font-size:.55rem;color:rgba(255,255,255,.5);display:block;margin-top:2px}
.room-pet-center{position:absolute;left:50%;transform:translateX(-50%);bottom:38%;display:flex;flex-direction:column;align-items:center}
.tv-screen{animation:tvGlow 2s ease-in-out infinite}
@keyframes tvGlow{0%,100%{filter:brightness(1) hue-rotate(0deg)}50%{filter:brightness(1.3) hue-rotate(20deg)}}
.room-bubble{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:3px 8px;font-size:.65rem;color:white;white-space:nowrap;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.pet-eat-anim{position:absolute;font-size:1.5rem;pointer-events:none;top:-0.5rem;right:-1.5rem;opacity:0;transition:none}
.pet-eat-anim.eating{animation:petEat .9s ease-out forwards}
@keyframes petEat{0%{opacity:1;transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(-1.8rem) scale(1.2)}100%{opacity:0;transform:translateY(-2.5rem) scale(.6)}}
.pet-drink-anim{position:absolute;font-size:1.5rem;pointer-events:none;top:-0.5rem;left:-1.8rem;opacity:0}
.pet-drink-anim.drinking{animation:petEat .9s ease-out forwards}

/* ══ PET SHOP ══ */
.shop-overlay{position:fixed;inset:0;z-index:3800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .25s}
.shop-overlay.open{opacity:1;pointer-events:all}
.shop-box{background:linear-gradient(135deg,var(--surface),#0d0d1a);border:1px solid #f59e0b44;border-radius:24px;padding:24px;width:min(580px,96vw);max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 0 80px rgba(245,158,11,.15)}
.shop-title{font-size:1.2rem;font-weight:900;text-align:center;background:linear-gradient(90deg,#f59e0b,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.shop-balance{text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:16px}
.shop-balance b{color:#f59e0b}
.shop-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.shop-tab{flex:1;min-width:70px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:6px 10px;text-align:center;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--muted);transition:all .2s}
.shop-tab.active{background:linear-gradient(135deg,#f59e0b,#f97316);color:white;border-color:transparent;box-shadow:0 0 12px rgba(245,158,11,.4)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shop-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center;transition:border-color .2s,transform .15s;position:relative}
.shop-item:hover{border-color:#f59e0b55;transform:translateY(-2px)}
.shop-item.owned{border-color:#10b98155;background:rgba(16,185,129,.06)}
.shop-item-icon{font-size:2.2rem;margin-bottom:6px;display:block}
.shop-item-name{font-size:.82rem;font-weight:700;margin-bottom:3px}
.shop-item-desc{font-size:.7rem;color:var(--muted);margin-bottom:8px;line-height:1.3}
.shop-item-price{font-size:.78rem;font-weight:900;color:#f59e0b;margin-bottom:8px}
.shop-buy-btn{width:100%;background:linear-gradient(135deg,#f59e0b,#f97316);border:none;border-radius:10px;color:white;font-weight:800;padding:7px;cursor:pointer;font-size:.78rem;transition:transform .15s,opacity .15s}
.shop-buy-btn:hover{transform:scale(1.04)}
.shop-buy-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.shop-buy-btn.owned-btn{background:linear-gradient(135deg,#10b981,#06b6d4)}
.shop-owned-badge{position:absolute;top:6px;right:8px;font-size:.62rem;font-weight:800;color:#10b981;text-transform:uppercase;letter-spacing:.5px}
/* Purchase flash */
.coin-flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,#f59e0b,#f97316);color:white;font-size:1.5rem;font-weight:900;padding:16px 32px;border-radius:20px;z-index:9999;box-shadow:0 0 60px rgba(245,158,11,.6);pointer-events:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.coin-flash.show{transform:translate(-50%,-50%) scale(1)}

/* ── ZAID BRANDING ──────────────────── */
@keyframes marquee{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}
@keyframes neonPulse{0%,100%{text-shadow:0 0 8px #8b5cf6,0 0 24px #8b5cf6,0 0 60px #8b5cf6}50%{text-shadow:0 0 4px #06b6d4,0 0 16px #06b6d4,0 0 48px #06b6d4,0 0 100px #06b6d4}}
@keyframes floatZ{0%,100%{transform:translateY(0) rotate(-8deg) scale(1)}50%{transform:translateY(-14px) rotate(8deg) scale(1.08)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes popIn{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes spin3d{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
@keyframes zaidGlow{0%,100%{box-shadow:0 0 20px #8b5cf666,0 0 60px #8b5cf633}50%{box-shadow:0 0 40px #06b6d4aa,0 0 100px #06b6d455}}

/* Ticker */
.zaid-ticker{background:linear-gradient(90deg,#1a0a2e,#0a1a2e,#1a0a2e);border-top:1px solid #8b5cf644;border-bottom:1px solid #06b6d444;padding:7px 0;overflow:hidden;white-space:nowrap;flex-shrink:0}
.zaid-ticker-inner{display:inline-block;animation:marquee 18s linear infinite}
.zaid-ticker-inner span{font-size:.78rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin:0 28px;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899,#f59e0b,#10b981,#8b5cf6);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite}

/* Hero banner */
.zaid-hero{background:linear-gradient(135deg,#0a0014 0%,#0e0028 40%,#001428 100%);padding:36px 28px 28px;margin-bottom:20px;border-radius:16px;position:relative;overflow:hidden;border:1px solid #8b5cf622;animation:zaidGlow 3s ease-in-out infinite}
.zaid-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,#8b5cf618 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,#06b6d418 0%,transparent 60%);pointer-events:none}
.zaid-hero-text{font-size:clamp(2.8rem,8vw,5.5rem);font-weight:900;letter-spacing:-.02em;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899,#f59e0b,#8b5cf6);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 3s linear infinite;line-height:1;margin-bottom:6px}
.zaid-hero-sub{font-size:1rem;color:#94a3b8;font-weight:500;margin-bottom:18px}
@keyframes pulse-hunt{0%,100%{box-shadow:0 0 30px rgba(139,92,246,.5);transform:scale(1)}50%{box-shadow:0 0 50px rgba(236,72,153,.8);transform:scale(1.04)}}
.zaid-hero-sub b{color:#e2e8f0}
.zaid-hero-letters{display:flex;gap:10px;position:absolute;right:28px;top:50%;transform:translateY(-50%)}
.zaid-letter{font-size:clamp(2rem,5vw,3.8rem);font-weight:900;animation:floatZ 2.5s ease-in-out infinite;filter:drop-shadow(0 0 16px currentColor)}
.zaid-letter:nth-child(1){color:#8b5cf6;animation-delay:0s}
.zaid-letter:nth-child(2){color:#06b6d4;animation-delay:.25s}
.zaid-letter:nth-child(3){color:#ec4899;animation-delay:.5s}
.zaid-letter:nth-child(4){color:#f59e0b;animation-delay:.75s}
.zaid-hero-badges{display:flex;gap:8px;flex-wrap:wrap}
.z-pill{padding:5px 14px;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;border:1px solid transparent}
.z-pill-1{background:rgba(139,92,246,.2);border-color:#8b5cf666;color:#c4b5fd}
.z-pill-2{background:rgba(6,182,212,.2);border-color:#06b6d466;color:#67e8f9}
.z-pill-3{background:rgba(236,72,153,.2);border-color:#ec489966;color:#f9a8d4}

/* Zaid's Picks row */
.zpicks-section{margin-bottom:28px}
.zpicks-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.zpicks-scroll::-webkit-scrollbar{height:4px}
.zpick-card{min-width:200px;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--card);border:2px solid #8b5cf644;transition:transform .2s,box-shadow .2s,border-color .2s;flex-shrink:0;position:relative}
.zpick-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(139,92,246,.35);border-color:#8b5cf6}
.zpick-badge{position:absolute;top:7px;left:7px;background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:white;font-size:.6rem;font-weight:800;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;z-index:2;box-shadow:0 0 10px #8b5cf666}
.zpick-card .thumb{aspect-ratio:16/10}
.zpick-info{padding:8px 10px 10px}
.zpick-title{font-size:.82rem;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zpick-cat{font-size:.68rem;color:var(--muted)}

/* Badge on regular cards */
.badge-zaid{position:absolute;top:7px;right:7px;background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:white;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 0 8px #8b5cf688}

/* Floating Z watermarks */
.float-z{position:fixed;pointer-events:none;z-index:0;font-weight:900;opacity:.04;user-select:none;animation:floatZ var(--fd,3s) ease-in-out infinite;animation-delay:var(--dl,0s);color:#8b5cf6;font-size:var(--fs,80px)}

/* Footer */
.zaid-footer{background:linear-gradient(135deg,#0a0014,#001428);border-top:1px solid #8b5cf633;padding:24px 28px;margin-top:32px;text-align:center}
.footer-name{font-size:2.2rem;font-weight:900;background:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899,#f59e0b);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite;letter-spacing:4px;margin-bottom:6px}
.footer-sub{color:#94a3b8;font-size:.78rem;letter-spacing:1px}

/* Sidebar ZAID crown */
.sidebar-zaid{padding:12px 16px;margin:8px 8px 4px;background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(6,182,212,.08));border-radius:12px;border:1px solid #8b5cf633;text-align:center}
.sidebar-zaid-name{font-size:1.1rem;font-weight:900;background:linear-gradient(90deg,#8b5cf6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}
.sidebar-zaid-crown{font-size:1.3rem}

/* ── ACCOUNT / CREATOR MODALS ── */
.ac-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:500;align-items:center;justify-content:center;padding:16px}
.ac-overlay.open{display:flex}
.ac-box{background:#12121e;border:1px solid #8b5cf655;border-radius:20px;padding:28px 28px 24px;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 0 60px rgba(139,92,246,.25)}
.ac-title{font-size:1.3rem;font-weight:900;background:linear-gradient(90deg,#8b5cf6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:18px;text-align:center}
.ac-tabs{display:flex;gap:4px;background:#0a0a14;border-radius:12px;padding:4px;margin-bottom:20px}
.ac-tab{flex:1;border:none;background:none;color:#94a3b8;padding:8px;border-radius:9px;cursor:pointer;font-weight:700;font-size:.85rem;transition:all .2s}
.ac-tab.active{background:#8b5cf6;color:white}
.ac-input{width:100%;background:#0d0d1e;border:1px solid #2d2d4a;border-radius:12px;padding:11px 14px;color:#e2e8f0;font-size:.93rem;outline:none;margin-bottom:12px;transition:border-color .2s}
.ac-input:focus{border-color:#8b5cf6}
.ac-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);border:none;border-radius:12px;color:white;font-size:1rem;font-weight:800;padding:13px;cursor:pointer;margin-top:4px;transition:opacity .2s}
.ac-btn:hover{opacity:.88}
.ac-err{color:#ef4444;font-size:.82rem;margin-bottom:10px;text-align:center;min-height:18px}
.ac-user-bar{display:flex;align-items:center;gap:10px;background:rgba(139,92,246,.12);border:1px solid #8b5cf633;border-radius:12px;padding:10px 14px;margin-bottom:18px}
.ac-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:900;color:white;font-size:1rem;flex-shrink:0}
/* Creator */
.cr-section{margin-bottom:18px}
.cr-label{font-size:.8rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.cr-engines{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cr-eng-btn{background:#0d0d1e;border:2px solid #2d2d4a;border-radius:12px;color:#e2e8f0;padding:10px 8px;cursor:pointer;font-size:.8rem;font-weight:700;text-align:left;transition:all .2s;display:flex;align-items:center;gap:8px}
.cr-eng-btn:hover{border-color:#8b5cf6;background:#1a1a2e}
.cr-eng-btn.selected{border-color:#8b5cf6;background:rgba(139,92,246,.15);color:#a78bfa}
.cr-colors{display:flex;flex-wrap:wrap;gap:8px}
.cr-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s,border-color .15s}
.cr-swatch.selected{border-color:white;transform:scale(1.15)}
.cr-preview{background:#0d0d1e;border:1px solid #2d2d4a;border-radius:14px;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:2.5rem;cursor:pointer;transition:transform .2s}
.cr-preview:hover{transform:scale(1.02)}
.cr-publish{width:100%;background:linear-gradient(135deg,#10b981,#06b6d4);border:none;border-radius:12px;color:white;font-size:1rem;font-weight:900;padding:14px;cursor:pointer;transition:opacity .2s;margin-top:8px;letter-spacing:.5px}
.cr-publish:hover{opacity:.88}
.badge-custom{position:absolute;top:7px;right:7px;background:linear-gradient(135deg,#10b981,#06b6d4);color:white;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 0 8px #10b98188}


/* ── SCRATCH BUILDER ── */
#scratch-modal{display:none;position:fixed;inset:0;background:#1e1e2e;z-index:600;flex-direction:column;overflow:hidden}
#scratch-modal.open{display:flex}
.sc-hdr{background:#12121e;border-bottom:1px solid #2d2d4a;padding:10px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.sc-hdr-title{font-weight:900;font-size:1.05rem;background:linear-gradient(90deg,#f97316,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sc-run-btn{background:#10b981;border:none;border-radius:10px;color:white;font-weight:800;padding:8px 18px;cursor:pointer;font-size:.88rem;display:flex;align-items:center;gap:6px;transition:opacity .2s}
.sc-run-btn:hover{opacity:.85}
.sc-stop-btn{background:#ef4444;border:none;border-radius:10px;color:white;font-weight:800;padding:8px 18px;cursor:pointer;font-size:.88rem;transition:opacity .2s}
.sc-stop-btn:hover{opacity:.85}
.sc-pub-btn{background:linear-gradient(135deg,#8b5cf6,#06b6d4);border:none;border-radius:10px;color:white;font-weight:800;padding:8px 18px;cursor:pointer;font-size:.88rem;transition:opacity .2s;margin-left:auto}
.sc-pub-btn:hover{opacity:.85}
.sc-close-btn{background:none;border:1px solid #2d2d4a;border-radius:8px;color:#94a3b8;cursor:pointer;padding:6px 12px;font-size:.85rem}
/* Body: 3 columns */
.sc-body{display:flex;flex:1;overflow:hidden;gap:0;min-height:0}
/* Left: stage + sprites */
.sc-left{width:300px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #2d2d4a;background:#12121e}
@media(max-width:900px){.sc-left{width:240px}.sc-palette{width:160px!important}}
@media(max-width:650px){.sc-body{flex-direction:column;overflow-y:auto}.sc-left{width:100%;height:260px;flex-shrink:0;flex-direction:row;border-right:none;border-bottom:1px solid #2d2d4a}.sc-stage-wrap{flex-shrink:0}.sc-sprites-area{flex:1;overflow-y:auto}.sc-palette{width:100%!important;height:160px;overflow-x:auto;overflow-y:hidden;flex-direction:row!important;flex-wrap:wrap;border-right:none!important;border-bottom:1px solid #2d2d4a}.sc-scripts{flex:1;min-height:200px}}
.sc-stage-wrap{background:#000;position:relative;flex-shrink:0}
#sc-stage{display:block;width:100%;background:#000;cursor:default}
.sc-stage-coord{position:absolute;bottom:4px;right:6px;font-size:.68rem;color:rgba(255,255,255,.5);pointer-events:none}
.sc-sprites-area{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.sc-sprites-label{font-size:.75rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.sc-sprite-list{display:flex;flex-wrap:wrap;gap:8px}
.sc-sprite-chip{width:64px;height:64px;background:#1a1a2e;border:2px solid #2d2d4a;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:1.6rem;transition:all .2s;position:relative;flex-shrink:0}
.sc-sprite-chip:hover{border-color:#f97316;transform:scale(1.05)}
.sc-sprite-chip.selected{border-color:#f59e0b;background:rgba(249,115,22,.12);box-shadow:0 0 12px rgba(249,115,22,.3)}
.sc-sprite-chip .sc-sp-name{font-size:.6rem;color:#94a3b8;margin-top:2px}
.sc-add-sprite{width:64px;height:64px;background:#0d0d1e;border:2px dashed #2d2d4a;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:1.4rem;color:#4b5563;transition:all .2s;flex-shrink:0}
.sc-add-sprite:hover{border-color:#f97316;color:#f97316}
/* Middle: block palette */
.sc-palette{width:200px;flex-shrink:0;overflow-y:auto;background:#0d0d1e;border-right:1px solid #2d2d4a;padding:8px 6px;display:flex;flex-direction:column;gap:2px}
.sc-palette-title{font-size:.7rem;font-weight:900;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px;padding:4px 6px 8px;border-bottom:1px solid #2d2d4a;margin-bottom:4px}
.sc-cat-hdr{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:5px 8px;border-radius:8px;margin-top:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:opacity .15s;user-select:none}
.sc-cat-hdr:hover{opacity:.8}
.sc-cat-hdr .sc-cat-arrow{transition:transform .2s;font-size:.6rem}
.sc-cat-blocks{display:flex;flex-direction:column;gap:2px;overflow:hidden;transition:max-height .25s ease}
.sc-cat-blocks.collapsed{max-height:0!important}
.sc-block{padding:7px 10px;border-radius:7px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;line-height:1.3;user-select:none;display:flex;align-items:center;gap:5px}
.sc-block:hover{opacity:.85;transform:scale(1.02)}
.sc-block.hat{border-radius:16px 16px 7px 7px}
.sc-block.cap{border-radius:7px 7px 16px 16px}
.sc-block.c-block{border-left:4px solid rgba(0,0,0,.25)}
/* Right: script area */
.sc-scripts{flex:1;overflow-y:auto;padding:12px 14px;background:#181828;display:flex;flex-direction:column;gap:0}
.sc-script-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.sc-script-title{font-size:.75rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;flex:1}
.sc-toolbar-btn{background:#1a1a2e;border:1px solid #2d2d4a;border-radius:8px;color:#94a3b8;cursor:pointer;font-size:.72rem;padding:4px 10px;transition:all .15s;white-space:nowrap}
.sc-toolbar-btn:hover{border-color:#f97316;color:#f97316}
/* Help panel */
.sc-help-panel{background:#12121e;border:1px solid #2d2d4a;border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:.75rem;color:#94a3b8;line-height:1.7;display:none}
.sc-help-panel.open{display:block}
.sc-help-panel b{color:#f59e0b}
.sc-script-block{padding:8px 12px;border-radius:8px;font-size:.82rem;font-weight:700;margin-bottom:3px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:opacity .2s}
.sc-script-block:hover .sc-del-btn{opacity:1}
.sc-script-block.hat{border-radius:16px 16px 8px 8px;margin-bottom:0}
.sc-script-block.c-open{border-radius:8px 8px 0 0;margin-bottom:0}
.sc-script-block.c-close{border-radius:0 0 8px 8px;margin-bottom:3px;padding-left:24px}
.sc-script-block.cap{border-radius:8px 8px 16px 16px}
.sc-c-inner{margin-left:20px;border-left:3px solid rgba(255,255,255,.18);padding-left:6px}
.sc-del-btn{background:rgba(0,0,0,.35);border:none;border-radius:4px;color:rgba(255,255,255,.7);cursor:pointer;font-size:.7rem;padding:2px 5px;opacity:0;transition:opacity .2s;flex-shrink:0}
.sc-drop-zone{border:2px dashed #2d2d4a;border-radius:8px;padding:14px;text-align:center;color:#4b5563;font-size:.82rem;margin-top:8px;transition:all .2s}
.sc-drop-zone.drag-over{border-color:#f97316;color:#f97316;background:rgba(249,115,22,.05)}
/* Param input inside block */
.sc-param{background:rgba(255,255,255,.18);border:none;border-radius:5px;color:white;font-weight:800;font-size:.78rem;padding:2px 5px;width:44px;text-align:center;outline:none;cursor:text}
.sc-param.key-param{width:56px}
.sc-param.str-param{width:72px}
/* C-block inner */
.sc-c-inner .sc-script-block{background:rgba(255,255,255,.06)!important}
.sc-c-add-hint{border:2px dashed rgba(255,255,255,.2);border-radius:7px;padding:7px 12px;font-size:.75rem;color:rgba(255,255,255,.45);cursor:pointer;text-align:center;margin:4px 0;transition:all .18s}
.sc-c-add-hint:hover{border-color:rgba(255,255,255,.6);color:rgba(255,255,255,.8);background:rgba(255,255,255,.07)}
.sc-c-add-active{border:2px solid #10b981;border-radius:7px;padding:7px 12px;font-size:.75rem;color:#10b981;cursor:pointer;text-align:center;margin:4px 0;background:rgba(16,185,129,.1);animation:sc-pulse .9s ease-in-out infinite alternate}
@keyframes sc-pulse{from{box-shadow:0 0 0 0 rgba(16,185,129,.3)}to{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
.c-target{outline:2px solid #10b981;outline-offset:2px}
.c-inner-target{border-left-color:#10b981!important}
/* Sprite emoji picker */
.sc-emoji-picker{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0}
.sc-ep-emoji{font-size:1.5rem;cursor:pointer;padding:4px;border-radius:8px;transition:background .15s}
.sc-ep-emoji:hover{background:rgba(255,255,255,.12)}
/* Says bubble on stage */
.sc-say-bubble{position:absolute;background:white;border-radius:12px;padding:6px 10px;font-size:.78rem;color:#111;font-weight:700;max-width:120px;pointer-events:none;transform:translate(-50%,-100%);margin-top:-8px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.sc-say-bubble::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white}


/* ── SCRATCH START SCREEN ── */
#sc-start{position:absolute;inset:0;background:#1e1e2e;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:28px 24px;overflow-y:auto}
#sc-start.hidden{display:none}
.sc-start-title{font-size:2rem;font-weight:900;background:linear-gradient(90deg,#f97316,#f59e0b,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px;text-align:center}
.sc-start-sub{color:#94a3b8;font-size:.9rem;margin-bottom:28px;text-align:center}
.sc-mode-row{display:flex;gap:16px;width:100%;max-width:780px;margin-bottom:30px;flex-wrap:wrap;justify-content:center}
.sc-mode-card{flex:1;min-width:260px;max-width:340px;background:#12121e;border:2px solid #2d2d4a;border-radius:18px;padding:24px 20px;cursor:pointer;transition:all .2s;text-align:center}
.sc-mode-card:hover{transform:translateY(-4px);border-color:#f97316;box-shadow:0 12px 40px rgba(249,115,22,.25)}
.sc-mode-icon{font-size:3rem;margin-bottom:12px}
.sc-mode-label{font-size:1.15rem;font-weight:900;color:#e2e8f0;margin-bottom:6px}
.sc-mode-desc{font-size:.8rem;color:#94a3b8;line-height:1.5}
/* Templates grid */
.sc-tmpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;width:100%;max-width:780px}
.sc-tmpl-card{background:#12121e;border:2px solid #2d2d4a;border-radius:14px;padding:16px 14px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:8px}
.sc-tmpl-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(139,92,246,.2)}
.sc-tmpl-icon{font-size:2rem}
.sc-tmpl-name{font-size:.9rem;font-weight:800;color:#e2e8f0}
.sc-tmpl-desc{font-size:.73rem;color:#94a3b8;line-height:1.4}
.sc-tmpl-tags{display:flex;gap:5px;flex-wrap:wrap}
.sc-tmpl-tag{font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(139,92,246,.18);color:#a78bfa}
.sc-back-btn{background:none;border:1px solid #2d2d4a;border-radius:10px;color:#94a3b8;cursor:pointer;padding:8px 18px;font-size:.85rem;margin-bottom:20px;transition:all .2s}
.sc-back-btn:hover{border-color:#f97316;color:#f97316}

/* ═══════════════════════════════════════ */
/* TREASURE HUNT MODAL                     */
/* ═══════════════════════════════════════ */
#hunt-modal{display:none;position:fixed;inset:0;z-index:9500;background:#040010;overflow-y:auto}
#hunt-modal.open{display:block}
#hunt-modal .hunt-wrap{position:relative;z-index:1;max-width:780px;margin:0 auto;padding:22px 16px 60px;color:#e2d9f3;font-family:'Segoe UI',system-ui,sans-serif}
#hunt-modal #hunt-star-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
#hunt-modal .hunt-close-x{position:fixed;top:16px;right:16px;z-index:100;background:rgba(0,0,0,.6);border:1.5px solid rgba(139,92,246,.5);border-radius:50%;width:42px;height:42px;color:#c084fc;font-size:1.3rem;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
#hunt-modal .hunt-close-x:hover{background:rgba(139,92,246,.25);transform:rotate(90deg)}

/* LOGIN */
#hunt-modal #hunt-login-screen{text-align:center}
#hunt-modal .hunt-login-logo{font-size:3rem;animation:hunt-float 3s ease-in-out infinite;display:block;margin-bottom:8px}
@keyframes hunt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
#hunt-modal .hunt-login-title{font-size:1.7rem;font-weight:900;background:linear-gradient(135deg,#c084fc,#f472b6,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
#hunt-modal .hunt-login-sub{color:#6b5a8a;font-size:.88rem;margin-bottom:28px;line-height:1.6}
#hunt-modal .hunt-login-card{background:rgba(255,255,255,.04);border:1.5px solid rgba(139,92,246,.3);border-radius:20px;padding:28px;max-width:360px;margin:0 auto}
#hunt-modal .hunt-login-card label{display:block;text-align:left;font-size:.8rem;color:#6b5a8a;margin-bottom:5px;font-weight:700;letter-spacing:.5px}
#hunt-modal .hunt-login-input{width:100%;background:#08001a;border:1.5px solid rgba(139,92,246,.4);border-radius:12px;padding:12px 16px;color:#fff;font-size:.97rem;outline:none;transition:border-color .2s;margin-bottom:16px}
#hunt-modal .hunt-login-input:focus{border-color:#a855f7}
#hunt-modal .hunt-login-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:14px;color:#fff;font-weight:800;font-size:1rem;padding:13px;cursor:pointer;transition:opacity .2s}
#hunt-modal .hunt-login-btn:hover{opacity:.85}
#hunt-modal .hunt-login-err{color:#ef4444;font-size:.82rem;margin-top:10px;min-height:18px}

/* GAME */
#hunt-modal #hunt-game-screen{display:none}
#hunt-modal .hunt-game-hdr{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px 18px;margin-bottom:18px;flex-wrap:wrap}
#hunt-modal .hunt-hdr-left{flex:1;min-width:140px}
#hunt-modal .hunt-hdr-name{font-weight:800;font-size:1rem;color:#c084fc}
#hunt-modal .hunt-hdr-sub{font-size:.75rem;color:#6b5a8a;margin-top:2px}
#hunt-modal .hunt-lives-wrap{display:flex;gap:6px;align-items:center}
#hunt-modal .hunt-life-heart{font-size:1.4rem;transition:all .3s;display:inline-block}
#hunt-modal .hunt-life-heart.lost{filter:grayscale(1) opacity(.25);transform:scale(.85)}
#hunt-modal .hunt-attempts-badge{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);border-radius:10px;padding:4px 12px;font-size:.78rem;color:#a78bfa;font-weight:700}
#hunt-modal .hunt-info-bar{text-align:center;margin-bottom:20px}
#hunt-modal .hunt-info-bar h2{font-size:1.3rem;font-weight:900;color:#fbbf24;margin-bottom:4px}
#hunt-modal .hunt-info-bar p{font-size:.84rem;color:#6b5a8a;line-height:1.5}
#hunt-modal #hunt-btn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:20px}
#hunt-modal .hunt-btn{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:11px 6px;color:#e2d9f3;font-size:.78rem;font-weight:700;cursor:pointer;text-align:center;transition:all .15s;line-height:1.35;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;overflow:hidden}
#hunt-modal .hunt-btn:hover:not([disabled]){transform:translateY(-2px);border-color:rgba(192,132,252,.5);background:rgba(139,92,246,.12)}
#hunt-modal .hunt-btn.wrong{background:rgba(239,68,68,.2)!important;border-color:#ef4444!important;animation:hunt-shake .35s ease;color:#fca5a5}
#hunt-modal .hunt-btn.correct{background:rgba(34,197,94,.2)!important;border-color:#22c55e!important;color:#86efac}
#hunt-modal .hunt-btn[disabled]{cursor:not-allowed;opacity:.45}
@keyframes hunt-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* DEAD */
#hunt-modal #hunt-dead-screen{display:none;text-align:center;padding:36px 20px;background:rgba(239,68,68,.08);border:2px solid rgba(239,68,68,.3);border-radius:20px;margin-top:8px}
#hunt-modal .hunt-dead-emoji{font-size:4rem;animation:hunt-throb 1.5s ease-in-out infinite;display:block;margin-bottom:12px}
@keyframes hunt-throb{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
#hunt-modal .hunt-dead-title{font-size:1.4rem;font-weight:900;color:#f87171;margin-bottom:8px}
#hunt-modal .hunt-dead-sub{color:rgba(255,255,255,.6);font-size:.88rem;line-height:1.6;margin-bottom:16px}
#hunt-modal .hunt-dead-timer{font-size:1.1rem;font-weight:700;color:#fbbf24}
#hunt-modal .hunt-reset-btn{background:rgba(139,92,246,.2);border:1.5px solid rgba(139,92,246,.5);border-radius:14px;color:#c084fc;font-weight:800;font-size:.88rem;padding:10px 24px;cursor:pointer;margin-top:16px;transition:background .2s}
#hunt-modal .hunt-reset-btn:hover{background:rgba(139,92,246,.35)}

/* WIN */
#hunt-win-overlay{display:none;position:fixed;inset:0;z-index:9800;background:rgba(0,0,0,.97);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;color:#e2d9f3;font-family:'Segoe UI',system-ui,sans-serif}
#hunt-win-overlay.open{display:flex}
#hunt-win-overlay .hunt-win-emoji{font-size:5rem;animation:hunt-bounce-win .9s ease-in-out infinite;display:block;margin-bottom:14px}
@keyframes hunt-bounce-win{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.08)}}
#hunt-win-overlay .hunt-win-title{font-size:2rem;font-weight:900;background:linear-gradient(135deg,#fbbf24,#f472b6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px}
#hunt-win-overlay .hunt-win-sub{color:rgba(255,255,255,.7);font-size:.93rem;max-width:420px;line-height:1.65;margin-bottom:20px}
#hunt-win-overlay .hunt-win-code-box{background:rgba(251,191,36,.12);border:2.5px solid #fbbf24;border-radius:16px;padding:16px 32px;margin-bottom:12px}
#hunt-win-overlay .hunt-win-code{font-size:2rem;font-weight:900;color:#fbbf24;letter-spacing:3px}
#hunt-win-overlay .hunt-win-hint{color:rgba(255,255,255,.5);font-size:.8rem;margin-bottom:22px;line-height:1.6;max-width:420px}
#hunt-win-overlay .hunt-win-close-btn{background:linear-gradient(135deg,#7c3aed,#db2777);border:none;border-radius:20px;color:#fff;font-weight:800;font-size:1rem;padding:12px 32px;cursor:pointer}

/* TOAST */
#hunt-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);background:#1a0035;border:1.5px solid rgba(139,92,246,.4);border-radius:14px;padding:10px 22px;color:#fff;font-weight:700;font-size:.9rem;z-index:9700;transition:transform .3s,opacity .3s;opacity:0;pointer-events:none;white-space:nowrap}
#hunt-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* CONFETTI */
#hunt-confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}


/* ═══ FOOTER SEO NAV LINKS ═══ */
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:14px 0 10px}
.footer-links a{color:rgba(139,92,246,.6);font-size:.72rem;text-decoration:none;letter-spacing:.5px;transition:color .2s;white-space:nowrap;padding:2px 0}
.footer-links a:hover{color:#8b5cf6}
@media(max-width:480px){.footer-links{gap:6px 10px}.footer-links a{font-size:.66rem}}