:root{
  --bg:#0a0a0c; --surface:#141417; --surface2:#1c1c20;
  --text:#f3f3f5; --muted:#a6a6b0; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.17);
  --accent:#c2ff45; --accent-ink:#0c1402; --xp:#22e3ff;
  --good:#3ddc84; --bad:#ff5066;
  --font-d:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-b:"Inter","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{font-family:var(--font-b); background:radial-gradient(120% 85% at 50% 0%, #15151f 0%, #050507 62%); color:var(--text); display:flex; align-items:center; justify-content:center; overflow:hidden; -webkit-font-smoothing:antialiased;}
@media(min-width:460px){ #app{ border:1px solid rgba(255,255,255,.07); border-radius:30px; box-shadow:0 30px 90px rgba(0,0,0,.6); } }
#app{
  width:100%; max-width:430px; height:100vh; max-height:932px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; isolation:isolate;
  background:radial-gradient(115% 55% at 50% -15%, rgba(194,255,69,.05), transparent 55%), var(--bg);
}

/* ===== Status bar ===== */
.statusbar{position:relative; z-index:2; flex:none; height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 22px;}
.sb-time{font-family:var(--font-d); font-weight:500; font-size:15px;}
.sb-icons{display:flex; align-items:center; gap:7px; opacity:.8;}

/* ===== Views ===== */
.viewport{position:relative; z-index:1; flex:1; overflow-y:auto;}
.viewport::-webkit-scrollbar{width:0;}
.view{display:none; flex-direction:column; padding:22px 22px 30px; min-height:100%;}
.view.active{display:flex;}
.view.center{justify-content:center; align-items:center; text-align:center;}
.view.active > *{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;}
.view.active > *:nth-child(2){animation-delay:.04s} .view.active > *:nth-child(3){animation-delay:.08s}
.view.active > *:nth-child(4){animation-delay:.12s} .view.active > *:nth-child(5){animation-delay:.16s}
.view.active > *:nth-child(6){animation-delay:.2s} .view.active > *:nth-child(n+7){animation-delay:.24s}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* ===== Logo ===== */
.logo{font-family:var(--font-d); font-weight:700; letter-spacing:-2.5px; line-height:.9;}
.logo .q{color:var(--text);}
.logo .sz{color:var(--accent);}
.brandtag{font-family:var(--font-d); font-size:11px; letter-spacing:3px; color:var(--muted); text-transform:uppercase; margin-top:10px;}
.brandtag b{color:var(--text); font-weight:600;}

/* ===== Buttons ===== */
.btn{width:100%; border:none; cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:16px; letter-spacing:.2px; padding:16px; border-radius:13px; color:var(--accent-ink); background:var(--accent); transition:transform .14s, opacity .14s;}
.btn:hover{opacity:.92;} .btn:active{transform:scale(.98);}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line2); margin-top:11px;}
.btn.ghost:hover{background:rgba(255,255,255,.04); opacity:1;}
.whatbtn{background:none; border:1px solid rgba(194,255,69,.35); color:var(--accent); border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer; transition:.14s; margin-top:18px;}
.whatbtn:hover{background:rgba(194,255,69,.08); border-color:var(--accent);}
.lobby-links{display:flex; gap:9px; margin-top:12px;}
.lobby-links .whatbtn{margin-top:0;}
.rules-list{list-style:none; counter-reset:r; margin-top:4px;}
.rules-list li{position:relative; padding-left:36px; margin-bottom:15px; color:var(--muted); font-size:14px; line-height:1.5;}
.rules-list li::before{counter-increment:r; content:counter(r); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:rgba(194,255,69,.12); color:var(--accent); font-family:var(--font-d); font-weight:700; font-size:12px; display:grid; place-items:center;}
.rules-list li b{color:var(--text);}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin:2px 0 20px; padding:13px 15px; border:1px solid var(--line); border-radius:13px;}
.legend span{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-size:13px; font-weight:600; color:var(--text);}
.legend .d{width:11px; height:11px; border-radius:50%; flex:none;}
.legend .d.pts{background:var(--accent);} .legend .d.xp{background:var(--xp);}
.legend small{color:var(--muted); font-weight:400; font-family:var(--font-b);}
.c-pts{color:var(--accent); font-weight:600;} .c-xp{color:var(--xp); font-weight:600;}

/* ===== DESAFÍO DIARIO ===== */
#view-daily{padding-top:16px;}
.daily-hud{display:flex; align-items:center; justify-content:space-between; margin:8px 0 26px;}
.dh-score{font-family:var(--font-d); font-size:15px; color:var(--muted);}
.dh-score b{color:var(--text); font-size:22px; margin-left:4px;}
.dh-time{font-family:var(--font-d); font-weight:700; font-size:34px; font-variant-numeric:tabular-nums; color:var(--text);}
.dh-time.warn{color:var(--bad);}
.daily-body{flex:1; display:flex; flex-direction:column; justify-content:center;}
.daily-q{font-family:var(--font-d); font-size:24px; font-weight:600; line-height:1.3; margin-bottom:24px; text-align:center;}
.year-slider{margin-bottom:24px;}
.year-val{font-family:var(--font-d); font-weight:700; font-size:42px; text-align:center; color:var(--xp); margin-bottom:16px;}
.year-val.good{color:var(--good); font-size:26px;} .year-val.bad{color:var(--bad); font-size:26px;}
.year-slider input[type=range]{width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:99px; background:rgba(255,255,255,.12); outline:none;}
.year-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:28px; height:28px; border-radius:50%; background:var(--xp); cursor:pointer; box-shadow:0 2px 12px rgba(34,227,255,.5);}
.year-slider input[type=range]::-moz-range-thumb{width:28px; height:28px; border:none; border-radius:50%; background:var(--xp); cursor:pointer;}
.year-ends{display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:10px;}
.daily-end{text-align:center; margin-bottom:22px;}
.de-place{font-family:var(--font-d); font-size:25px; font-weight:700; margin-bottom:12px;}
.de-score{color:var(--muted); font-size:16px; margin-bottom:10px;} .de-score b{color:var(--text); font-family:var(--font-d); font-size:24px; margin-left:4px;}
.de-rewards{font-family:var(--font-d); font-weight:600; font-size:16px;}
.opt.opt-c{justify-content:center; font-family:var(--font-d); font-size:22px; font-weight:600;}
.streak{text-align:center; font-family:var(--font-d); font-weight:600; font-size:13px; color:var(--accent); margin-bottom:14px;}
.canje-gate{font-size:13px; line-height:1.5; color:var(--muted); border:1px solid rgba(255,80,102,.3); background:rgba(255,80,102,.06); border-radius:13px; padding:13px 15px; margin-bottom:16px;}
.canje-gate b{display:block; color:var(--bad); font-family:var(--font-d); margin-bottom:4px;}
.canje-gate.ok{border-color:rgba(194,255,69,.3); background:rgba(194,255,69,.06);}
.pu-banner{background:rgba(194,255,69,.08); border:1px solid rgba(194,255,69,.3); border-radius:14px; padding:14px 16px; margin-bottom:16px;}
.pu-h{font-family:var(--font-d); font-weight:600; font-size:15.5px; line-height:1.3; color:var(--text);}
.pu-h .c-pts{color:var(--accent); font-weight:700;}
.pu-d{color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:7px;}
.pu-d b{color:var(--text); font-weight:600;}

/* ===== RETOS menú ===== */
.reto-card{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:11px; cursor:pointer; transition:border-color .14s, transform .12s;}
.reto-card:hover{border-color:var(--line2);} .reto-card:active{transform:scale(.99);}
.reto-card.off{opacity:.45; cursor:default;}
.reto-card.weekly{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
.reto-badge{display:inline-block; margin-left:7px; font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--bg); background:var(--accent); padding:2px 7px; border-radius:999px; vertical-align:middle;}
.reto-badge:empty{display:none;}
.reto-ic{flex:none; width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.05); display:grid; place-items:center; color:var(--muted);}
.reto-ic svg{width:24px; height:24px;}
.reto-tx{flex:1; display:flex; flex-direction:column;}
.reto-nm{font-family:var(--font-d); font-weight:600; font-size:16px;}
.reto-ds{color:var(--muted); font-size:12.5px; margin-top:2px;}
.reto-go{color:var(--accent); font-family:var(--font-d); font-weight:700; font-size:22px;}

/* ===== MEMO TEST ===== */
#view-memo{padding-top:16px;}
.memo-hud{display:flex; align-items:center; justify-content:space-between; margin:8px 0 18px;}
.memo-hud #memoInfo{font-family:var(--font-d); font-weight:600; color:var(--text); font-size:16px;}
.memo-hud .memo-h2{font-family:var(--font-d); color:var(--muted); font-size:13px;}
.memo-body{flex:1; display:flex; flex-direction:column; justify-content:flex-start; padding-top:4px;}
.greet{width:100%; text-align:center; font-size:13px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin-bottom:20px; line-height:1.45;}
.greet b{color:var(--text); font-family:var(--font-d);}
.install-chip{display:none; align-items:center; gap:7px; margin:0 auto 16px; background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px; padding:10px 18px; font-family:var(--font-d); font-weight:700; font-size:13px; cursor:pointer;}
.install-chip:active{transform:scale(.97);}
.rankcard .arrow svg{width:20px; height:20px; vertical-align:middle;}

/* ===== Mensaje EN VIVO (broadcast admin) ===== */
.livemsg{display:none; position:relative; z-index:3; flex:none; align-items:center; gap:10px; padding:11px 16px;
  background:rgba(194,255,69,.1); border-bottom:1px solid rgba(194,255,69,.28);}
.livemsg.show{display:flex; animation:lmIn .4s cubic-bezier(.2,.9,.3,1);}
@keyframes lmIn{from{opacity:0; transform:translateY(-100%)} to{opacity:1; transform:none}}
.lm-tag{flex:none; font-family:var(--font-d); font-weight:700; font-size:10px; letter-spacing:1.5px; color:var(--accent-ink); background:var(--accent); padding:3px 8px; border-radius:6px;}
.lm-text{flex:1; font-size:13.5px; color:var(--text); font-weight:500; line-height:1.35;}
.lm-x{flex:none; background:none; border:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer;}
.lm-x:hover{color:var(--text);}

/* ===== Panel admin ===== */
.admin-input{width:100%; min-height:96px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; color:var(--text); font-family:var(--font-b); font-size:15px; line-height:1.45; resize:none; margin-bottom:14px;}
.admin-input:focus{outline:none; border-color:var(--line2);}
#view-admin .chips{margin:0; flex-wrap:wrap; overflow:visible; padding:0;}
.dash{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px;}
.dash-c{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 14px;}
.dash-c small{display:block; color:var(--muted); font-size:10.5px; margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em;}
.dash-c b{font-family:var(--font-d); font-size:20px; color:var(--accent);}
.adm-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:13px;}
.adm-h{font-family:var(--font-d); font-size:16px; font-weight:600; margin:0 0 12px;}
.adm-note{color:var(--muted); font-size:12.5px; line-height:1.4; margin:-4px 0 12px;}
.adm-lbl{display:block; color:var(--muted); font-size:12px; margin:6px 0;}
.adm-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px 12px; margin-bottom:14px;}
.adm-grid label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted);}
.adm-in{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:11px 12px; color:var(--text); font-family:var(--font-d); font-size:15px;}
.adm-in:focus{outline:none; border-color:var(--accent);}
.seg-row{display:flex; gap:8px; margin-bottom:14px;}
.seg{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:11px 6px; color:var(--muted); font-family:var(--font-d); font-weight:600; font-size:13px; cursor:pointer; transition:.14s;}
.seg.on{background:var(--accent); border-color:var(--accent); color:var(--bg);}
.catpills{display:flex; flex-wrap:wrap; gap:8px;}
.catpill{background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:8px 13px; color:var(--muted); font-size:13px; cursor:pointer; transition:.14s; opacity:.5;}
.catpill.on{color:var(--text); opacity:1; border-color:var(--line2);}
.catpill.on::before{content:"●"; color:var(--good); font-size:8px; vertical-align:middle; margin-right:6px;}
.paylist{display:flex; flex-direction:column; gap:9px;}
.payrow{display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 13px;}
.pay-u{flex:1; min-width:0;}
.pay-u b{font-family:var(--font-d); font-size:14px; display:block;}
.pay-u small{color:var(--muted); font-size:11.5px;}
.pay-amt{font-family:var(--font-d); font-weight:600; color:var(--good); font-size:14px;}
.pay-st{flex:none;}
.pay-btn{background:var(--accent); color:var(--bg); border:none; border-radius:9px; padding:8px 14px; font-family:var(--font-d); font-weight:600; font-size:12px; cursor:pointer;}
.pay-ok{color:var(--good); font-size:12px; font-weight:600;}
.pay-wait{color:var(--bad); font-size:11.5px;}
.btn.sm{display:inline-flex; align-items:center; justify-content:center; width:auto; padding:11px 18px; font-size:14px; margin:2px 8px 2px 0;}
.adm-color{width:100%; height:42px; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:4px; cursor:pointer;}
select.adm-in{appearance:none; -webkit-appearance:none; cursor:pointer;}
.qopt{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.qopt input[type="radio"]{flex:none; width:20px; height:20px; accent-color:var(--accent);}
.qopt .adm-in{flex:1;}
.qlist{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.qrow{display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:10px 12px;}
.qrow-t{flex:1; min-width:0; font-size:13px; line-height:1.35;}
.qrow-t b{color:var(--accent); font-family:var(--font-d); margin-right:4px;}
.qdel{flex:none; background:rgba(255,80,102,.12); color:var(--bad); border:1px solid rgba(255,80,102,.3); border-radius:8px; padding:6px 11px; font-size:12px; font-family:var(--font-d); cursor:pointer;}
/* Armar el domingo */
.sq-list{display:flex; flex-direction:column; gap:9px; margin-top:14px;}
.sq-row{display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 11px;}
.sq-num{flex:none; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.06); display:grid; place-items:center; font-family:var(--font-d); font-size:12px; color:var(--muted);}
.sq-body{flex:1; min-width:0;}
.sq-meta{font-size:10.5px; color:var(--muted); margin-bottom:3px;}
.sq-lvl{font-family:var(--font-d); font-weight:700; padding:1px 7px; border-radius:999px; font-size:9.5px; color:#0a0a0c;}
.sq-lvl.lf{background:#3ddc84;} .sq-lvl.lm{background:#c2ff45;} .sq-lvl.lmh{background:#ffcc33;} .sq-lvl.ld{background:#ff8a3d;} .sq-lvl.lx{background:#ff5066; color:#fff;}
.sq-q{font-size:12.5px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.sq-acts{flex:none; display:flex; flex-direction:column; gap:5px;}
.sq-btn{background:rgba(255,255,255,.06); border:1px solid var(--line2); color:var(--text); border-radius:8px; padding:6px 10px; font-size:11px; font-family:var(--font-d); cursor:pointer; white-space:nowrap;}
.sq-btn.alt{background:rgba(194,255,69,.12); border-color:rgba(194,255,69,.3); color:var(--accent);}
#sqPop{position:fixed; inset:0; z-index:131; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); padding:24px;}
#sqPop.show{display:flex;}
.lob-sponsors{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:8px 0 14px;}
.sp-lbl{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; width:100%; text-align:center; margin-bottom:2px;}
.sp-item{font-family:var(--font-d); font-size:12.5px; color:var(--text); opacity:.8; border:1px solid var(--line); border-radius:999px; padding:5px 11px;}
.sec-c{color:var(--accent); font-family:var(--font-d); font-size:13px; margin-left:6px;}
.sec-hint{color:var(--muted); font-size:11px; font-weight:400; margin-left:6px; text-transform:none; letter-spacing:0;}
.avpick{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}
.av-photo{display:flex; gap:10px; margin-bottom:14px;}
.av-photo-btn{display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--bg); border-radius:11px; padding:11px 16px; font-family:var(--font-d); font-weight:600; font-size:13.5px; cursor:pointer;}
.av-photo-rm{background:transparent; border:1px solid var(--line2); color:var(--muted); border-radius:11px; padding:11px 16px; font-family:var(--font-d); font-size:13.5px; cursor:pointer;}
/* ===== EVENTO 1v1 (Mundial) ===== */
.ev-cta{display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; border:none; cursor:pointer; border-radius:13px; padding:13px; margin-top:11px; background:linear-gradient(135deg,#74acdf,#bcdcf5 55%,#ffffff); color:#0a2a4a; font-family:var(--font-d); box-shadow:0 3px 12px rgba(116,172,223,.22);}
.ev-cta:active{transform:scale(.99);}
.ev-cta-k{font-weight:800; font-size:18px; letter-spacing:.07em;}
.ev-cta-s{font-weight:600; font-size:11.5px; opacity:.82;}
.ev-scores{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;}
.ev-side{flex:1; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px;}
.ev-side.me{border-color:var(--accent);}
.ev-side small{display:block; color:var(--muted); font-size:11.5px; margin-bottom:3px;}
.ev-side b{font-family:var(--font-d); font-size:24px;}
.ev-side.me b{color:var(--accent);}
.ev-vsmid{font-family:var(--font-d); font-weight:700; color:var(--muted); font-size:13px;}
.ev-round{text-align:center; color:var(--muted); font-size:13px; margin:16px 0 8px;}
.ev-timer{text-align:center; margin-bottom:14px;}
.ev-timer #evTime{font-family:var(--font-d); font-weight:700; font-size:30px; font-variant-numeric:tabular-nums;}
.ev-bar-bg{height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:8px;}
.ev-bar-bg i{display:block; height:100%; width:100%; background:var(--accent); border-radius:999px;}
.ev-flag{width:170px; height:113px; margin:0 auto 16px; border-radius:10px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12);}
.ev-flag svg{width:100%; height:100%; display:block;}
.ev-flag-img{width:100%; height:100%; object-fit:cover; display:block;}
.ev-q{text-align:center; font-family:var(--font-d); font-weight:600; font-size:16px; margin-bottom:14px;}
.ev-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ev-opt{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px 10px; color:var(--text); font-family:var(--font-d); font-weight:600; font-size:14px; cursor:pointer; transition:.12s;}
.ev-opt:active{transform:scale(.98);}
.ev-opt.dis{pointer-events:none;}
.ev-opt.ok{background:rgba(61,220,132,.18); border-color:var(--good); color:var(--good);}
.ev-opt.bad{background:rgba(255,80,102,.15); border-color:var(--bad); color:var(--bad);}
.ev-result{text-align:center; padding-top:28px;}
.evr-t{font-family:var(--font-d); font-weight:800; font-size:32px; margin-bottom:18px;}
.evr-t.win{color:var(--accent);} .evr-t.lose{color:var(--bad);} .evr-t.tie{color:var(--xp);}
.evr-sc{display:flex; align-items:flex-start; justify-content:center; gap:18px; margin-bottom:16px;}
.evr-p{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted);}
.evr-p b{font-family:var(--font-d); font-size:28px; color:var(--text);}
.evr-vs{color:var(--muted); font-family:var(--font-d); margin-top:6px;}
.evr-xp{color:var(--xp); font-size:14px; margin-bottom:22px;}
.ev-result .btn{margin-bottom:10px;}
/* ===== EN VIVO ===== */
.live-enter{display:inline-flex; align-items:center; gap:8px; margin-top:10px; background:var(--bad); color:#fff; border:none; border-radius:999px; padding:11px 20px; font-family:var(--font-d); font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 4px 18px rgba(255,80,102,.4); animation:lepulse 1.6s infinite;}
.le-dot{width:9px; height:9px; border-radius:50%; background:#fff;}
@keyframes lepulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.05);}}
.live-wait{text-align:center; padding-top:40px;}
.live-wait h2{font-family:var(--font-d); font-size:24px; margin-bottom:8px;}
.live-wait p{color:var(--muted); line-height:1.5;}
.live-dot2{width:16px; height:16px; border-radius:50%; background:var(--bad); margin:0 auto 18px; animation:lepulse 1.2s infinite;}
.live-head{text-align:center; color:var(--muted); font-size:13px; margin-bottom:12px;}
.live-badge{background:var(--bad); color:#fff; font-family:var(--font-d); font-weight:700; font-size:11px; padding:2px 9px; border-radius:999px; margin-right:6px;}
.live-time{text-align:center; margin-bottom:16px;}
.live-time #liveTime{font-family:var(--font-d); font-weight:700; font-size:30px; font-variant-numeric:tabular-nums;}
.live-bar-bg{height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:8px;}
.live-bar-bg i{display:block; height:100%; width:100%; background:var(--accent); border-radius:999px;}
.live-q{text-align:center; font-family:var(--font-d); font-weight:600; font-size:18px; line-height:1.35; margin-bottom:18px;}
.live-score{font-family:var(--font-d); font-size:16px; margin:14px 0; color:var(--accent);}
.live-winner{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin:16px 0 22px; font-size:15px;}
.cond-btns{display:flex; flex-direction:column; gap:8px;}
.cond-btns .btn.sm{width:100%; margin:0;}
.opt.sel{border-color:var(--accent); background:rgba(194,255,69,.1);}
/* ===== Rankings por minijuego ===== */
.rk-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.rk-chip{background:var(--surface); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:9px 14px; font-family:var(--font-d); font-weight:600; font-size:13px; cursor:pointer; transition:.14s;}
.rk-chip.sm{padding:7px 13px; font-size:12px;}
.rk-chip.on{background:var(--accent); border-color:var(--accent); color:var(--bg);}
.rk-prize{display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(194,255,69,.08); border:1px solid rgba(194,255,69,.3); border-radius:13px; padding:12px 15px; margin:6px 0 14px;}
.rk-prize-l{color:var(--muted); font-size:12px;}
.rk-prize-v{font-family:var(--font-d); font-weight:700; color:var(--accent); font-size:15px; text-align:right;}
.avsw{width:48px; height:48px; border-radius:50%; border:2px solid transparent; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:19px; cursor:pointer; transition:.14s;}
.avsw.sel{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text);}
.avsw.lock{opacity:.4; cursor:not-allowed; color:var(--muted);}
.avsw.lock svg{width:18px; height:18px;}
.trophies{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px;}
.trophy{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 8px; text-align:center; opacity:.45;}
.trophy.on{opacity:1; border-color:var(--line2);}
.tr-ic{width:38px; height:38px; margin:0 auto 7px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.05); color:var(--muted);}
.trophy.on .tr-ic{background:rgba(194,255,69,.12); color:var(--accent);}
.tr-ic svg{width:21px; height:21px;}
.tr-n{font-family:var(--font-d); font-weight:600; font-size:12.5px; line-height:1.2;}
.tr-d{color:var(--muted); font-size:10.5px; line-height:1.25; margin-top:3px;}
.avitem{display:flex; flex-direction:column; align-items:center; gap:5px; width:54px;}
.avcap{font-size:9.5px; color:var(--muted); text-align:center; line-height:1.12;}
#trophyPop{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); padding:24px;}
#trophyPop.show{display:flex; animation:tpfade .25s ease;}
@keyframes tpfade{from{opacity:0} to{opacity:1}}
.tp-card{background:var(--surface); border:1px solid var(--accent); border-radius:22px; padding:28px 26px; text-align:center; max-width:300px; box-shadow:0 0 50px rgba(194,255,69,.25); animation:tppop .42s cubic-bezier(.2,1.4,.4,1);}
@keyframes tppop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}
.tp-burst{font-family:var(--font-d); font-size:11px; letter-spacing:.12em; color:var(--accent); margin-bottom:14px;}
.tp-ic{width:74px; height:74px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:rgba(194,255,69,.14); color:var(--accent);}
.tp-ic svg{width:38px; height:38px;}
.tp-name{font-family:var(--font-d); font-weight:700; font-size:22px;}
.tp-desc{color:var(--muted); font-size:13px; margin-top:6px;}
.tp-tap{color:var(--muted); font-size:10.5px; margin-top:16px; opacity:.6;}
.streak-chip{display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:var(--accent); background:rgba(194,255,69,.08); border:1px solid rgba(194,255,69,.25); border-radius:999px; padding:8px 14px; margin:0 0 14px;}
.streak-chip svg{width:16px; height:16px;}
.streak-chip b{font-family:var(--font-d);}
.edit-btn{margin-left:auto; background:transparent; border:1px solid var(--line2); color:var(--text); border-radius:999px; padding:7px 14px; font-size:13px; font-family:var(--font-d); cursor:pointer; flex:none;}
.phead-tx{min-width:0;}
.cloud-badge{display:flex; align-items:center; gap:5px; color:var(--good); font-size:11px; margin-top:3px;}
.cloud-badge svg{width:13px; height:13px;}
.phead .avatar{cursor:pointer;}
.missions{display:flex; flex-direction:column; gap:10px;}
.mission{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 14px;}
.mission.claimed{opacity:.55;}
.mi-top{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
.mi-n{flex:1; font-size:13.5px; font-family:var(--font-d); font-weight:600; line-height:1.25;}
.mi-pts{color:var(--muted); font-family:var(--font-d); font-weight:600; font-size:13px; white-space:nowrap;}
.mi-done{color:var(--good); font-size:12.5px; font-weight:600; white-space:nowrap;}
.mi-btn{background:var(--accent); color:var(--bg); border:none; border-radius:9px; padding:7px 12px; font-family:var(--font-d); font-weight:700; font-size:12px; cursor:pointer; white-space:nowrap;}
.mi-barbg{height:7px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden;}
.mi-barbg i{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .3s;}
.mi-prog{color:var(--muted); font-size:11px; margin-top:5px; text-align:right;}
#editPop{position:fixed; inset:0; z-index:130; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); padding:24px;}
#editPop.show{display:flex;}
.ep-card{background:var(--surface); border:1px solid var(--line2); border-radius:20px; padding:22px; width:100%; max-width:320px;}
.ep-actions{display:flex; gap:8px; margin-top:18px;}
.ep-actions .btn.sm{flex:1; margin:0;}
.rg-check{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted); margin:16px 0 18px; line-height:1.4; cursor:pointer;}
.rg-check input{flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--accent);}
#view-register .adm-in{margin-bottom:2px;}
#view-register .btn{margin-bottom:10px;}
.ar-badge{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin:2px 0 4px;}
.ar-flag{width:20px; height:13px; border-radius:2px; display:block; flex:none;}

/* ===== KYC ===== */
.kyc-steps{display:flex; gap:8px; justify-content:center; margin-bottom:18px;}
.kyc-dot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:13px; background:var(--surface); border:1px solid var(--line); color:var(--muted);}
.kyc-dot.on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.kyc-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:13px;}
.kyc-t{font-family:var(--font-d); font-weight:700; font-size:19px; margin-bottom:8px;}
.kyc-d{color:var(--muted); font-size:13.5px; line-height:1.5; margin-bottom:16px;}
.kyc-d b{color:var(--text);}
.kyc-in{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:11px; padding:13px; color:var(--text); font-family:var(--font-b); font-size:15px; margin-bottom:11px;}
.kyc-in:focus{outline:none; border-color:var(--line2);}
.kyc-up{display:flex; gap:10px; flex-wrap:wrap;}
.kyc-upbtn{flex:1; min-width:130px; background:var(--bg); border:1px dashed var(--line2); border-radius:11px; padding:14px; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.14s;}
.kyc-upbtn.done{border-style:solid; border-color:var(--good); color:var(--good);}
.kyc-code{font-family:var(--font-d); font-weight:700; font-size:30px; letter-spacing:3px; text-align:center; color:var(--accent); background:var(--bg); border:1px dashed var(--accent); border-radius:12px; padding:18px; margin-bottom:14px;}
.kyc-note{font-size:12.5px; color:var(--good); margin-top:2px;}
.kyc-done{text-align:center;}
.kyc-check{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:var(--good); color:#04110a; display:grid; place-items:center; font-size:30px; font-weight:700;}

/* ===== Footer link + Términos ===== */
.footlink{background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; margin-top:18px; text-decoration:underline; text-underline-offset:3px;}
.footlink:hover{color:var(--text);}
.terms h3{font-family:var(--font-d); font-size:16px; font-weight:600; margin:18px 0 6px;}
.terms h3:first-child{margin-top:0;}
.terms p{color:var(--muted); font-size:13.5px; line-height:1.6; margin-bottom:6px;}
.terms p b{color:var(--text);}
.terms .disc{margin-top:20px; padding:13px 15px; border-radius:12px; border:1px solid rgba(255,179,64,.3); background:rgba(255,179,64,.07); color:var(--muted); font-size:12.5px; line-height:1.5;}
.memo-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px;}
.memo-card{aspect-ratio:1; border-radius:13px; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:grid; place-items:center; transition:transform .12s, border-color .2s, background .2s;}
.memo-card:active{transform:scale(.95);}
.memo-card .mc-back{font-family:var(--font-d); font-weight:700; color:var(--muted); font-size:22px;}
.memo-card .mc-face{display:none;}
.memo-card .mc-flag{display:block; width:48px; height:32px; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.18);}
.memo-card .mc-flag svg{display:block; width:100%; height:100%;}
.memo-card.flip{background:var(--surface2); border-color:var(--line2);}
.memo-card.flip .mc-back{display:none;} .memo-card.flip .mc-face{display:grid; place-items:center;}
.memo-card.matched{border-color:var(--good); background:rgba(61,220,132,.14);}
.memo-card.matched .mc-back{display:none;} .memo-card.matched .mc-face{display:grid; place-items:center;}

/* ===== Coin + chip ===== */
.coin{width:19px; height:19px; flex:none; border-radius:50%; font-family:var(--font-d); background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:11px; font-weight:700;}
.ptschip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:600; font-size:15px; background:var(--surface); border:1px solid var(--line); padding:7px 13px; border-radius:999px;}

/* ===== Headers ===== */
.vhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;}
.vhead h1{font-family:var(--font-d); font-size:27px; font-weight:700; letter-spacing:-.4px;}
.vsub{color:var(--muted); font-size:14px; margin-bottom:22px;}

/* ===== Card ===== */
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:12px;}

/* ===== LOBBY ===== */
.live{display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:1.5px; color:var(--accent); border:1px solid rgba(194,255,69,.3); background:rgba(194,255,69,.05); padding:7px 13px; border-radius:999px; margin-bottom:14px; text-transform:uppercase;}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 1.6s infinite;}
@keyframes pulse{0%{opacity:1}50%{opacity:.4}100%{opacity:1}}
#view-lobby .logo{font-size:70px;}
.tagline{color:var(--text); font-size:18px; font-weight:500; margin-top:14px;}
.tagline b{color:var(--accent); font-weight:700;}
.countdown{display:flex; flex-direction:column; align-items:center; gap:10px; margin:22px 0 4px;}
.cd-lbl{font-size:11px; letter-spacing:2.5px; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:8px;}
.cd-lbl .livedot{width:7px; height:7px; border-radius:50%; background:#ff4d6a; animation:pulse 1.4s infinite;}
.cd-grid{display:flex; gap:9px; justify-content:center;}
.cd-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 0; width:64px;}
.cd-box b{display:block; font-family:var(--font-d); font-weight:700; font-size:30px; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1;}
.cd-box small{display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:6px;}
.pozo{margin:16px 0 4px; width:100%; padding:20px; border-radius:18px; text-align:center; background:var(--surface); border:1px solid var(--line);}
.pozo .lbl{font-size:11px; letter-spacing:2.5px; color:var(--muted); text-transform:uppercase;}
.pozo .amt{font-family:var(--font-d); font-size:46px; font-weight:700; line-height:1.1; margin-top:6px; color:var(--accent);}
.social{display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13.5px; margin:14px 0 18px;}
.avs{display:flex;} .avs span{width:25px; height:25px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-d); font-size:10px; font-weight:600; color:var(--accent-ink); background:var(--accent); border:2px solid var(--bg); margin-left:-9px;}
.avs span:first-child{margin-left:0;} .social b{color:var(--text); font-weight:600;}
.persuade{color:var(--muted); font-size:13px; margin-top:14px; line-height:1.6; max-width:290px;}
.persuade b{color:var(--text); font-weight:600;}

/* ===== GAME ===== */
#view-game{padding-top:16px;}
.top{display:flex; align-items:center; justify-content:space-between;}
.top .qnum{font-family:var(--font-d); font-weight:500; font-size:15px;}
.top .qnum b{color:var(--accent);}
.top .pill{font-size:12px; color:var(--muted); border:1px solid var(--line); padding:6px 12px; border-radius:999px;}
.bar{height:4px; background:rgba(255,255,255,.08); border-radius:999px; margin:16px 0 4px; overflow:hidden;}
.bar > i{display:block; height:100%; width:100%; background:var(--accent); transition:width .1s linear;}
.timer{text-align:center; font-family:var(--font-d); font-size:30px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:1px; margin-bottom:14px;}
.timer.warn{color:var(--bad);}
.cattag{align-self:center; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-weight:500; font-size:12px; letter-spacing:.4px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); margin:2px 0 16px; text-transform:uppercase;}
.cattag .catico{display:inline-grid; place-items:center; color:var(--cc,var(--accent));}
.cattag .catico svg{width:14px; height:14px;}
.cattag b{color:var(--text); font-weight:600;} .cattag span{color:var(--muted);}
.gcontent{flex:1; display:flex; flex-direction:column; justify-content:center;}
.question{font-family:var(--font-d); font-size:25px; font-weight:600; line-height:1.3; margin:0 0 26px;}
.opts{display:flex; flex-direction:column; gap:11px;}
.opt{background:var(--surface); border:1px solid var(--line); color:var(--text); text-align:left; padding:16px 17px; border-radius:13px; font-size:16px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:13px; transition:border-color .14s, background .14s;}
.opt .key{width:26px; height:26px; flex:none; border-radius:7px; background:rgba(255,255,255,.06); display:grid; place-items:center; font-family:var(--font-d); font-size:13px; font-weight:600; color:var(--muted);}
.opt:hover{border-color:var(--line2);}
.opt.correct{background:rgba(61,220,132,.12); border-color:var(--good);}
.opt.correct .key{background:var(--good); color:#04110a;}
.opt.wrong{background:rgba(255,80,102,.1); border-color:var(--bad);}
.opt.wrong .key{background:var(--bad); color:#fff;}
.opt.disabled{opacity:.5; pointer-events:none;}

/* ===== RESULT ===== */
.emoji{margin-bottom:8px; color:var(--accent); display:grid; place-items:center;}
.emoji svg{width:66px; height:66px;}
.rtitle{font-family:var(--font-d); font-size:34px; font-weight:700; line-height:1.04;}
.rsub{color:var(--muted); font-size:15px; margin-top:10px; max-width:300px;}
.prize{margin:24px 0 8px; padding:18px 24px; border-radius:16px; width:100%; background:var(--surface); border:1px solid var(--line);}
.prize .lbl{font-size:11px; letter-spacing:2px; color:var(--muted); text-transform:uppercase;}
.prize .val{font-family:var(--font-d); font-size:27px; font-weight:700; color:var(--accent); margin-top:4px;}
.rpts{color:var(--text); font-family:var(--font-d); font-weight:500; font-size:15px; margin-bottom:22px;}
.win .prize{border-color:var(--accent);}

/* ===== PERFIL ===== */
.phead{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.avatar{width:72px; height:72px; flex:none; border-radius:20px; font-family:var(--font-d); font-size:30px; font-weight:700; color:var(--accent-ink); background:var(--accent); display:grid; place-items:center;}
.phead .nm{font-family:var(--font-d); font-size:22px; font-weight:700;}
.phead .hd{color:var(--muted); font-size:14px;}
.lvtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.lvtop .cur{font-family:var(--font-d); font-weight:600; font-size:17px; color:var(--xp);}
.lvtop .nx{font-size:13px; color:var(--muted);}
.levelbar{height:7px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden;}
.levelbar > i{display:block; height:100%; background:var(--xp); border-radius:99px; transition:width .7s cubic-bezier(.2,.8,.2,1);}
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:12px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px;}
.stat .v{font-family:var(--font-d); font-size:25px; font-weight:700;}
.stat .l{font-size:12px; color:var(--muted); margin-top:2px;}
.rankcard{display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
.rankcard:hover{border-color:var(--line2);}
.rankcard .big{font-family:var(--font-d); font-size:23px; font-weight:700;}
.rankcard .hd{color:var(--muted); font-size:13px; margin-bottom:2px;}
.rankcard .arrow{color:var(--accent); font-weight:600; font-size:14px;}
.sectitle{font-family:var(--font-d); font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:10px 2px 10px;}
.hrow{display:flex; align-items:center; gap:10px; padding:13px 4px; border-bottom:1px solid var(--line); font-size:14px;}
.hrow .hd{color:var(--muted); width:74px; flex:none; font-size:12px;}
.hrow .hr{flex:1;} .hrow .hp{font-family:var(--font-d); font-weight:500; color:var(--accent); font-size:13px;}

/* ===== CANJE ===== */
.chips{display:flex; gap:8px; overflow-x:auto; margin:0 -22px 14px; padding:2px 22px;}
.chips::-webkit-scrollbar{height:0;}
.chip{flex:none; background:var(--surface); border:1px solid var(--line); color:var(--muted); font-weight:500; font-size:13px; padding:8px 15px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:.14s;}
.chip:hover{color:var(--text);} .chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600;}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.citem{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; transition:border-color .14s;}
.citem:hover{border-color:var(--line2);}
.citem .ico{color:var(--accent); margin-bottom:10px;} .citem .ico svg{width:26px; height:26px;}
.citem .nm{font-family:var(--font-d); font-weight:600; font-size:15px; line-height:1.2;}
.citem .val{color:var(--muted); font-size:12.5px; margin-top:3px; margin-bottom:12px;}
.citem .cost{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-d); font-weight:700; color:var(--text); font-size:16px; margin-bottom:12px;}
.citem .cbtn{margin-top:auto; border:none; cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:14px; padding:10px; border-radius:10px; background:var(--accent); color:var(--accent-ink); transition:opacity .14s;}
.citem .cbtn:hover{opacity:.9;}
.citem .cbtn.off{background:transparent; border:1px solid var(--line); color:var(--muted); cursor:not-allowed;}

/* ===== RANKING ===== */
.rrow{display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:13px; margin-bottom:8px; background:var(--surface); border:1px solid var(--line);}
.rrow.me{border-color:var(--accent);}
.rrow .pos{width:22px; text-align:center; font-family:var(--font-d); font-weight:700; color:var(--muted); flex:none;}
.rrow .pos.top{color:var(--accent);}
.rav{width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; font-family:var(--font-d); font-weight:600; color:var(--muted); background:var(--surface2); font-size:14px;}
.rrow.me .rav{background:var(--accent); color:var(--accent-ink);}
.rname{flex:1; font-weight:500;} .rname small{display:block; color:var(--muted); font-weight:400; font-size:12px;}
.rpts{font-family:var(--font-d); font-weight:600; color:var(--xp);}

/* ===== NAV ===== */
.nav{position:relative; z-index:2; height:66px; flex:none; display:flex; background:rgba(12,12,14,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--line);}
.nav.hidden{display:none;}
.nav button{flex:1; background:none; border:none; color:var(--muted); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:500; transition:color .15s;}
.nav button .ni{width:22px; height:22px;}
.nav button:hover{color:var(--text);} .nav button.active{color:var(--accent);}

/* ===== TOAST ===== */
#toast{position:absolute; left:50%; top:62px; transform:translateX(-50%) translateY(-20px); z-index:40; font-family:var(--font-d); background:var(--text); color:#0a0a0c; font-weight:600; padding:12px 20px; border-radius:12px; font-size:14px; box-shadow:0 12px 36px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:all .35s cubic-bezier(.2,1.3,.4,1); white-space:nowrap; max-width:86%; text-align:center;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ===== FX ===== */
#fx{position:absolute; inset:0; z-index:45; pointer-events:none; overflow:hidden;}
.flyup{position:absolute; transform:translateX(-50%); font-family:var(--font-d); font-weight:700; font-size:28px; color:var(--accent); animation:fly 1s ease-out forwards;}
@keyframes fly{0%{opacity:0; transform:translate(-50%,0) scale(.8)}20%{opacity:1}100%{opacity:0; transform:translate(-50%,-80px) scale(1.1)}}
.confetti{position:absolute; top:-14px; width:8px; height:14px; border-radius:1px; animation:drop 2.4s linear forwards;}
@keyframes drop{0%{opacity:1}to{transform:translateY(960px) rotate(680deg); opacity:.15}}

/* ===== REVEAL ===== */
.reveal{position:absolute; inset:0; z-index:38; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:rgba(10,10,12,.97);}
.reveal.show{display:flex;}
.rv-label{font-family:var(--font-d); letter-spacing:4px; font-size:11px; color:var(--muted); text-transform:uppercase;}
.rv-icon{width:88px; height:88px; color:var(--cc,var(--accent)); display:grid; place-items:center;}
.rv-icon svg{width:74px; height:74px;}
.rv-cat{font-family:var(--font-d); font-weight:700; font-size:36px; line-height:1.05; color:var(--text);}
.rv-sub{font-family:var(--font-d); font-weight:500; font-size:19px; color:var(--cc,var(--accent));}
.reveal.locked .rv-icon, .reveal.locked .rv-cat{animation:lockpop .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes lockpop{0%{transform:scale(.8)}60%{transform:scale(1.1)}100%{transform:scale(1)}}

/* ===== ABOUT modal ===== */
.modal{position:absolute; inset:0; z-index:55; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(4,4,6,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
.modal.show{display:flex; animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.sheet{position:relative; width:100%; max-width:404px; max-height:88%; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:32px 26px 28px;}
.sheet::-webkit-scrollbar{width:0;}
.sheet-close{position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center;}
.sheet-close:hover{color:var(--text); border-color:var(--line2);} .sheet-close svg{width:14px; height:14px;}
.sheet-kicker{font-family:var(--font-d); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.sheet h2{font-family:var(--font-d); font-size:26px; font-weight:700; margin-bottom:18px; letter-spacing:-.4px;}
.sheet p{color:var(--muted); font-size:14.5px; line-height:1.62; margin-bottom:13px;}
.sheet p.lead{color:var(--text); font-size:17px; font-weight:500; line-height:1.5;}
.sheet .hl{color:var(--accent); font-weight:600;}
.sheet-sign{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--font-d); font-size:13px; color:var(--muted); letter-spacing:1px;}
.sheet-help{margin-top:20px; padding:15px 16px; border-radius:14px; border:1px solid rgba(194,255,69,.25); background:rgba(194,255,69,.05); font-size:13.5px; line-height:1.55; color:var(--muted);}
.sheet-help b{display:block; color:var(--text); font-family:var(--font-d); font-size:14px; margin-bottom:5px;}
.sheet-help span{display:block; margin-top:9px; color:var(--accent); font-family:var(--font-d); font-weight:600; font-size:13px;}
.pozo-note{font-size:11px; color:var(--muted); margin-top:8px;}

/* ===== Sound toggle ===== */
.sndtoggle{position:absolute; top:48px; right:16px; z-index:42; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; display:grid; place-items:center; transition:transform .12s;}
.sndtoggle:active{transform:scale(.9);} .sndtoggle svg{width:17px; height:17px;}

/* ===== SPLASH ===== */
.splash{position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--bg); animation:splashout .5s ease 1.05s forwards;}
.splash .logo{font-size:68px; animation:pop .6s cubic-bezier(.2,1.4,.4,1);}
@keyframes pop{from{opacity:0; transform:scale(.85)} to{opacity:1; transform:none}}
@keyframes splashout{to{opacity:0; visibility:hidden; pointer-events:none}}