/* Viborazo — estética arcade neón (tema oscuro único a propósito). */
:root{
  --bg:#060a14; --panel:rgba(10,16,32,.9); --panel-solid:#0b1326; --line:#26335a;
  --ink:#eef2ff; --muted:#8c97bd; --gold:#ffc531; --gold-deep:#b9820a;
  --money:#3be58f; --danger:#ff3b5c; --mid:#ffd84d; --cyan:#3ee0ff;
  --f-display:'Bungee','Impact',system-ui,sans-serif;
  --f-ui:'Chakra Petch',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--ink);font:15px/1.4 var(--f-ui);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font-family:var(--f-ui);cursor:pointer;border:0;color:inherit;background:none}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
input,select{font:600 16px var(--f-ui);color:var(--ink);background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
.c-ok{color:var(--money)} .c-bad{color:var(--danger)} .c-mid{color:var(--mid)}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;-webkit-user-select:none;user-select:none}
.hud>*{pointer-events:auto}
.val{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);text-align:center;background:var(--panel);border:1.5px solid var(--money);border-radius:12px;padding:6px 16px 7px;box-shadow:0 0 18px rgba(59,229,143,.25)}
.val small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.val b{font-family:var(--f-display);font-size:24px;color:var(--money);font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}
.board{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));width:150px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px}
.board h3{margin:0 0 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.board ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.board li{display:flex;gap:6px;font-variant-numeric:tabular-nums}
.board li span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li.me{color:var(--gold);font-weight:700}
.board li span:last-child{color:var(--money)}
#mini{position:absolute;left:max(10px,env(safe-area-inset-left,0px));top:calc(44px + env(safe-area-inset-top,0px));width:96px;height:96px;pointer-events:none;border-radius:50%;background:rgba(10,16,32,.7);border:1px solid var(--line)}
.btns{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.rb{width:74px;height:74px;border-radius:50%;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:grid;place-items:center;touch-action:none}
#bBoost{background:radial-gradient(circle at 35% 30%,#5af0ff,#0a6d86);box-shadow:0 0 0 3px rgba(62,224,255,.25),0 6px 18px rgba(0,0,0,.5)}
#bBoost.on{box-shadow:0 0 0 5px rgba(62,224,255,.6),0 0 30px var(--cyan)}
#bCash{width:auto;height:auto;border-radius:12px;padding:10px 14px;background:linear-gradient(#ffd75e,var(--gold-deep));color:#2a1a00;box-shadow:0 6px 18px rgba(0,0,0,.5);position:relative;overflow:hidden}
#bCash .bar{position:absolute;left:0;bottom:0;height:4px;width:0;background:#2a1a00}
#bCash.run{background:linear-gradient(#ff8a8a,#b3122f);color:#fff}
.mode-tag{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:calc(12px + env(safe-area-inset-top,0px));font:700 11px var(--f-ui);letter-spacing:.14em;padding:4px 8px;border-radius:6px;border:1px solid var(--cyan);color:var(--cyan);background:var(--panel)}
.mode-tag.real{border-color:var(--gold);color:var(--gold)}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:11px;color:var(--muted);pointer-events:none;text-align:center}
@media (pointer:coarse){.hint .desk{display:none}}
@media (pointer:fine){.hint .touch{display:none}}
@media (max-width:520px){.board{width:128px;font-size:11px}.val b{font-size:20px}.hint{display:none}.mode-tag{top:calc(70px + env(safe-area-inset-top,0px))}#mini{top:calc(102px + env(safe-area-inset-top,0px));width:84px;height:84px}}
.toast{position:fixed;top:calc(84px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--panel);border:1px solid var(--gold);color:var(--gold);padding:8px 14px;border-radius:8px;font-weight:700;font-size:13px;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.toast.bad{border-color:var(--danger);color:#ffd0d8}

/* Pantallas */
.screen,.sheet{position:fixed;inset:0;overflow-y:auto;padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.screen{background:radial-gradient(ellipse at center,rgba(6,10,20,.35),rgba(6,10,20,.88))}
.sheet{background:rgba(3,6,14,.75);display:grid;grid-template-rows:1fr;place-items:center;z-index:20}
#result{display:grid;place-items:center}
.lobby{width:min(760px,100%);margin:0 auto;display:grid;gap:18px}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.who{font-weight:700;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{display:flex;gap:8px}
a.chip.wa{color:#25d366;border-color:rgba(37,211,102,.55)}
.note a,.legal a{color:#25d366}
a.chip{color:var(--gold);text-decoration:none;border-color:rgba(255,197,49,.5)}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:13px}
.logo{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,13vw,76px);line-height:.95;margin:8px 0 0;text-align:center;background:linear-gradient(180deg,#ffe27a 0%,var(--gold) 45%,#ff8a1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5a2c00);text-wrap:balance}
.tag{margin:-6px 0 0;text-align:center;color:var(--muted);text-wrap:balance}
.setup{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
@media (max-width:560px){.setup{grid-template-columns:1fr}}
.f{display:grid;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.skins{display:flex;gap:8px;margin-top:6px}
.skin{flex:1;height:36px;border-radius:18px;border:2px solid transparent;min-width:0}
.skin[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 12px rgba(255,255,255,.35)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.modes{grid-template-columns:1fr}}
.mode{display:grid;gap:10px;align-content:start;padding:16px;border-radius:16px;background:var(--panel);border:1.5px solid var(--line)}
.mode.demo{border-color:rgba(62,224,255,.45)}
.mode.real{border-color:rgba(255,197,49,.55);box-shadow:0 0 30px rgba(255,197,49,.08)}
.mode-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mode h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:26px}
.mode p{margin:0;color:var(--muted);font-size:14px}
.mode p b{color:var(--ink)}
.pill{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid var(--line);justify-self:center}
.pill.cyan{color:var(--cyan);border-color:rgba(62,224,255,.5)}
.pill.gold{color:var(--gold);border-color:rgba(255,197,49,.6)}
.bal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:10px}
.bal small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bal b{font-family:var(--f-display);font-weight:400;font-size:24px;font-variant-numeric:tabular-nums}
.demo .bal b{color:var(--cyan)} .real .bal b{color:var(--gold)}
.go{font-family:var(--f-display);font-size:18px;font-weight:400;padding:13px;border-radius:14px;background:linear-gradient(#ffe07a,#d08a00);color:#2a1a00;box-shadow:0 5px 0 #6b4500,0 8px 22px rgba(255,197,49,.25);width:100%}
.go.cyan{background:linear-gradient(#7af3ff,#0a8fb0);color:#032430;box-shadow:0 5px 0 #05475a,0 8px 22px rgba(62,224,255,.25)}
.go:active{transform:translateY(3px);box-shadow:0 2px 0 #6b4500}
.go:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed;transform:none}
.link{color:var(--cyan);font-size:13px;text-decoration:underline;padding:4px;justify-self:center}
.sec{padding:12px;border-radius:12px;background:#16213f;border:1px solid var(--line);font-weight:700}
.sec.danger{border-color:var(--danger);color:#ffd0d8}
.rules{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.rules summary{cursor:pointer;font-weight:700}
.rules ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--muted);font-size:14px}
.rules b{color:var(--ink)}
.legal{margin:0;text-align:center;font-size:12px;color:var(--muted)}

.card{width:min(440px,100%);background:var(--panel-solid);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:14px}
.card.wide{width:min(560px,100%)}
.res{text-align:center}
.res h2{font-family:var(--f-display);font-weight:400;font-size:30px;margin:0;text-wrap:balance}
.res .big{font-family:var(--f-display);font-size:44px;font-variant-numeric:tabular-nums}
.math{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:left}
.math span:nth-child(even){text-align:right;color:var(--ink)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>button{flex:1;min-width:130px}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs button{padding:10px 12px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--gold)}
.form{display:grid;gap:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{margin:0;color:#ff8da0;font-size:13px;min-height:1em}
.err:empty{display:none}
.note{margin:0;color:var(--muted);font-size:13px}
.note b{color:var(--ink)}
.amounts{display:flex;gap:8px;flex-wrap:wrap}
.amounts button{flex:1;min-width:70px;padding:10px;border-radius:10px;border:1px solid var(--line);background:#111b34;font-weight:700;font-variant-numeric:tabular-nums}
.amounts button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.qrbox{display:grid;gap:12px}
.qrbox img{width:100%;max-width:300px;height:auto;justify-self:center;border-radius:12px;background:#fff}
.steps{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--muted);font-size:14px}
.steps b{color:var(--ink)}
.qr-amt{font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--gold)}
.qrmeta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;color:var(--muted)}
.qrmeta b{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.tut-open{justify-self:center;padding:12px 18px;border-radius:999px;border:1.5px solid var(--gold);color:var(--gold);font-weight:700;background:rgba(255,197,49,.08)}
.tut{text-align:center;gap:12px}
.tut-top{display:flex;justify-content:space-between;align-items:center}
.tut-art{background:#070c19;border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:16/10;max-width:100%}
.tut-art svg{display:block;width:100%;height:100%}
.tut h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:24px;text-wrap:balance}
.tut-text{margin:0;color:var(--muted);font-size:15px;line-height:1.5;text-wrap:pretty}
.tut-text b{color:var(--ink)}
.tut-dots{display:flex;gap:6px;justify-content:center}
.tut-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tut-dots i.on{background:var(--gold);width:20px;border-radius:4px}
@media (prefers-reduced-motion:no-preference){.tut-art .pulse{animation:tpulse 1.4s ease-in-out infinite}.tut-art .slide{animation:tslide 2.4s ease-in-out infinite}}
@keyframes tpulse{50%{opacity:.35}}
@keyframes tslide{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
.acc-head{display:flex;justify-content:space-between;align-items:center}
.money{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--gold);font-variant-numeric:tabular-nums}
.his{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:50vh;overflow:auto}
.his li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:#0e1730;font-size:13px}
.his li span:last-child{font-variant-numeric:tabular-nums;font-weight:700}
.his .pos{color:var(--money)} .his .neg{color:#ff8da0}
.confirm{padding:12px;border:1px solid var(--danger);border-radius:12px;display:grid;gap:10px}
.confirm p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

.payok{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,6,14,.78);backdrop-filter:blur(4px)}
.payok[hidden]{display:none}
.payok-card{width:100%;max-width:360px;text-align:center;background:#0c1426;border:2px solid #3dff8f;border-radius:20px;padding:26px 20px;box-shadow:0 0 40px rgba(61,255,143,.35);animation:payPop .35s cubic-bezier(.2,1.4,.4,1)}
.payok-ic{font-size:52px;line-height:1}
.payok h2{margin:10px 0 4px;color:#3dff8f}
.payok-amt{font-size:34px;font-weight:700;margin:6px 0;color:#ffcc33}
.payok .go{width:100%;margin-top:12px}
.payok .link{margin-top:10px}
@keyframes payPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

.chip.rank{color:var(--gold);border-color:rgba(255,197,49,.5)}
.leader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;width:100%;margin:0 0 14px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,197,49,.45);background:linear-gradient(90deg,rgba(255,197,49,.12),rgba(255,197,49,.03));font-size:14px;color:var(--ink)}
.leader[hidden]{display:none}
.leader b{color:var(--gold)}
.leader span{color:#3dff8f;font-weight:700}
.leader u{color:var(--muted);font-size:12px}
ol.rank{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(56vh,520px);overflow-y:auto}
ol.rank li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
ol.rank li.podium{background:linear-gradient(90deg,rgba(255,197,49,.13),rgba(255,197,49,.02));border-color:rgba(255,197,49,.35)}
ol.rank li.mine{outline:2px solid var(--cyan)}
ol.rank li.empty{display:block;text-align:center;color:var(--muted)}
ol.rank .pos{font-size:20px;text-align:center;font-weight:700;color:var(--muted)}
ol.rank .who{font-weight:700;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:15px;color:var(--ink)}
ol.rank .who small{display:block;font-weight:400;font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
ol.rank .amt{color:#3dff8f;font-size:15px;white-space:nowrap}
.rank-me{padding:10px 12px;border-radius:12px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.35);text-align:center;font-size:14px}
.rank-me[hidden]{display:none}

.rank-prize{padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(61,255,143,.12),rgba(61,255,143,.03));border:1px solid rgba(61,255,143,.4);font-size:14px;line-height:1.5}
.rank-prize[hidden]{display:none}
.rank-prize small{color:var(--muted)}
.bonus-note{padding:8px 10px;border-radius:10px;border:1px solid rgba(61,255,143,.4);background:rgba(61,255,143,.07)}
.bonus-note[hidden]{display:none}

.rb.snd{width:46px;height:46px;font-size:20px;background:var(--panel);border:1px solid var(--line);letter-spacing:0}
.chip.snd{padding:6px 10px;font-size:15px}
.top-actions .chip{white-space:nowrap}
@media (max-width:440px){.top-actions{gap:5px}.top-actions .chip{padding:7px 9px;font-size:12px}.top-actions .chip.snd{padding:5px 8px;font-size:14px}}
/* Celular: que nada sea más ancho que la pantalla */
.lobby>*{min-width:0}
.top{align-items:flex-start}
.top .who{padding-top:8px;flex:1 0 72px}
.top-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0;row-gap:6px}

/* ---------- Pieles con nivel ---------- */
.skins{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin}
.skins .skin{flex:0 0 74px}
.skin.locked{filter:grayscale(.85) brightness(.45);position:relative}
.skin.locked span{position:absolute;inset:0;display:grid;place-items:center;font:700 11px var(--f-ui);color:#fff;filter:none;text-shadow:0 1px 2px #000}
.skin.fx:not(.locked){box-shadow:0 0 12px rgba(255,197,49,.45)}

/* ---------- Nivel y experiencia ---------- */
.prof{display:flex;gap:10px;align-items:stretch}
.prof[hidden]{display:none}
.lvl{width:68px;flex:none;border-radius:16px;background:radial-gradient(circle at 30% 25%,#ffe27a,#d08a00);color:#2a1a00;display:grid;place-items:center;align-content:center;box-shadow:0 4px 0 #6b4500}
.lvl small{font:700 10px var(--f-ui);letter-spacing:.12em}
.lvl b{font:400 30px/1 var(--f-display)}
.xpw{flex:1;min-width:0;display:grid;gap:6px;text-align:left;padding:10px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.xpt{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:13px}
.xpt span:last-child{color:#ff8a3d}
.xpb{display:block;height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.xpb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3be58f,#3ee0ff);transition:width .8s cubic-bezier(.2,.9,.3,1)}
.xpn{font-size:12px;color:var(--muted)}

/* ---------- Misiones ---------- */
.missions{padding:14px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.missions[hidden]{display:none}
.missions h3{margin:0 0 10px;font-size:15px}
.missions ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.missions li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.missions .mt{font-weight:700;font-size:14px;min-width:0}
.missions .mr{font-size:11px;color:var(--gold);white-space:nowrap}
.missions .mb{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.missions .mb i{display:block;height:100%;background:var(--gold);border-radius:99px}
.missions .mp{font-size:12px;color:var(--muted);text-align:right}
.missions li.done .mt{color:#3be58f}
.missions li.done .mb i{background:#3be58f}
.missions .note{margin:10px 0 0;font-size:12.5px}

/* ---------- Hora loca ---------- */
.happy{width:100%;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,79,163,.5);background:linear-gradient(90deg,rgba(255,79,163,.16),rgba(161,75,255,.08));color:var(--ink);font-size:14px;line-height:1.45}
.happy[hidden]{display:none}
.happy small{color:var(--muted)}
.happy.live{border-color:#ff4fa3;animation:happyPulse 1.4s ease-in-out infinite;background:linear-gradient(90deg,rgba(255,79,163,.32),rgba(255,197,49,.14))}
.happy.live b{color:#ffd84d}
@keyframes happyPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,79,163,.0)}50%{box-shadow:0 0 22px 2px rgba(255,79,163,.45)}}

/* ---------- Resultado: progreso y compartir ---------- */
.gain{display:grid;gap:6px;padding:12px;border-radius:14px;background:rgba(59,229,143,.07);border:1px solid rgba(59,229,143,.35);font-size:14px;text-align:left}
.gain[hidden]{display:none}
.gain .g-xp{font-size:17px;color:#3be58f}
.gain .g-up{padding:8px;border-radius:10px;background:linear-gradient(90deg,rgba(255,197,49,.25),rgba(255,197,49,.05));color:#ffd84d;text-align:center;font-weight:700;animation:payPop .5s cubic-bezier(.2,1.4,.4,1)}
.gain .g-bar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.share{width:100%;margin-top:4px;padding:12px;border-radius:14px;border:1px solid rgba(37,211,102,.55);background:rgba(37,211,102,.1);color:#25d366;font-weight:700;font-size:15px}

/* ---------- En partida: avisos y combos ---------- */
.feed{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column-reverse;gap:4px;align-items:center;pointer-events:none;width:min(420px,56vw)}
.feed .fl{padding:4px 10px;border-radius:8px;background:rgba(4,8,18,.78);border:1px solid var(--line);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .5s;animation:feedIn .25s ease-out}
.feed .fl.me{border-color:#3be58f;color:#c8ffe2}
.feed .fl.bad{border-color:#ff3b5c;color:#ffd0d8}
.feed .fl.casa{border-color:#ff4fa3}
.feed .fl span{color:#3be58f;font-weight:700}
.feed .fl.out{opacity:0}
@keyframes feedIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:520px){.feed{bottom:calc(150px + env(safe-area-inset-bottom,0px));width:62vw}}
.combo{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(.6);font:400 clamp(34px,9vw,72px)/1 var(--f-display);color:#ffd84d;text-shadow:0 4px 0 #6b4500,0 0 30px rgba(255,197,49,.7);opacity:0;pointer-events:none;white-space:nowrap}
.combo.pop{animation:comboPop 1.2s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}

/* ---------- Hoja de progreso ---------- */
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.pf-stats div{padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pf-stats b{display:block;font-size:20px;color:var(--gold)}
.pf-stats small{font-size:11px;color:var(--muted)}
.pf-h{margin:6px 0 0;font-size:15px}
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:36vh;overflow-y:auto}
.ach .a{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);opacity:.55}
.ach .a.got{opacity:1;border-color:rgba(255,197,49,.5);background:rgba(255,197,49,.08)}
.ach .ai{grid-row:span 2;font-size:24px}
.ach b{font-size:13px}
.ach small{font-size:11px;color:var(--muted)}
.skinlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.skinlist .sk{display:grid;gap:4px;justify-items:center;text-align:center;opacity:.5}
.skinlist .sk.ok{opacity:1}
.skinlist .sw{width:100%;height:26px;border-radius:99px;border:2px solid rgba(255,255,255,.15)}
.skinlist small{font-size:11px;color:var(--muted)}

/* ---------- Invita ---------- */
.inv-hero{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.4)}
.inv-ic{font-size:36px}
.inv-hero p{margin:0;font-size:14px;line-height:1.45}
.chip.inst{color:#3ee0ff;border-color:rgba(62,224,255,.5)}
.setup>*{min-width:0}
.skins{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}

/* ---------- Tienda ---------- */
.shopbtn{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;text-align:left;width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,197,49,.55);background:linear-gradient(90deg,rgba(255,197,49,.16),rgba(255,79,163,.08));color:var(--ink)}
.shopbtn .sb-ic{font-size:30px;grid-row:span 2}
.shopbtn b{display:block;font-size:16px;color:var(--gold)}
.shopbtn small{display:block;font-size:12px;color:var(--muted)}
.shopbtn .sb-tag{grid-column:2;font-size:12px;font-weight:700;color:#ff8a3d}
.shopbtn .sb-tag:empty{display:none}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:52vh;overflow-y:auto;padding:2px}
.si{position:relative;display:grid;gap:8px;justify-items:center;text-align:center;padding:14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.si.own{border-color:rgba(59,229,143,.45)}
.si b{font-size:13.5px}
.si .lim{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(255,138,61,.2);color:#ff8a3d;margin-top:-6px}
.si .lim.pass{background:rgba(255,197,49,.2);color:var(--gold)}
.pv-skin{display:block;width:100%;height:30px;border-radius:99px;border:2px solid rgba(255,255,255,.15)}
.pv-trail{font-size:22px;letter-spacing:4px;height:30px;line-height:30px;animation:trailPv 1.2s ease-in-out infinite}
@keyframes trailPv{50%{transform:translateX(6px);opacity:.6}}
.pv-name{font:700 16px var(--f-ui);height:30px;line-height:30px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pv-name.anim{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbowTxt 2s linear infinite}
@keyframes rainbowTxt{to{background-position:200% 0}}
.sb{width:100%;padding:8px;border-radius:10px;font-weight:700;font-size:13px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink)}
.sb.buy{background:linear-gradient(#ffd75e,var(--gold-deep));color:#2a1a00;border:0}
.sb.buy.ok{background:linear-gradient(#5cf0a5,#16a35a);color:#022}
.sb.on{border-color:#3be58f;color:#3be58f;background:rgba(59,229,143,.08)}
.sb:disabled{opacity:.7}
.pass-hero{display:grid;gap:10px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(255,197,49,.18),rgba(161,75,255,.14));border:1px solid rgba(255,197,49,.5)}
.pass-hero.on{border-color:#3be58f}
.pass-hero .ph-t{font:400 18px var(--f-display);color:var(--gold)}
.pass-hero ul{margin:0;padding-left:4px;list-style:none;display:grid;gap:4px;font-size:14px}
.pass-hero small{color:var(--muted);font-size:12px}
.pass-hero .ph-ok{font-weight:700;color:#3be58f}
.ph-prog{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:13px;margin:12px 0 6px}
.tiers{display:grid;gap:4px;max-height:34vh;overflow-y:auto}
.tiers .tr{display:grid;grid-template-columns:30px 1fr 1fr;gap:6px;align-items:center;font-size:12.5px}
.tiers .tr>b{display:grid;place-items:center;height:30px;border-radius:8px;background:rgba(255,255,255,.06);color:var(--muted)}
.tiers .tr.got>b{background:var(--gold);color:#2a1a00}
.tiers .tf,.tiers .tp{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line);min-height:30px}
.tiers .tp{border-color:rgba(255,197,49,.35)}
.tiers .tp.lock{opacity:.55}
.tiers .tr.got .tf,.tiers .tr.got .tp:not(.lock){border-color:#3be58f;background:rgba(59,229,143,.08)}
.tiers .tz{color:var(--muted)}
.tiers-h{display:grid;grid-template-columns:30px 1fr 1fr;gap:6px;font-size:11px;color:var(--muted);text-align:center;margin-top:4px}
.missions .px{font-style:normal;font-size:10px;color:var(--gold);padding:1px 5px;border:1px solid rgba(255,197,49,.5);border-radius:6px}

.bkpay{margin:6px 0}
.bkpay .bk-alert{margin:0 0 6px;padding:8px 10px;border-radius:10px;background:rgba(255,59,92,.12);border:1px solid rgba(255,59,92,.5);color:#ffd0d8;font-weight:700;font-size:13px}
.bkpay details{padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.bkpay summary{cursor:pointer;font-weight:700;color:var(--cyan);font-size:14px}
.bkpay p{font-size:13.5px;line-height:1.45;margin:8px 0}

/* =====================================================================
   Lobby renovado: barra superior, pestañas, barra inferior y menú lateral
   ===================================================================== */
#lobby{padding-top:0;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.lobby{gap:14px;width:min(720px,100%)}
.ltab{display:grid;gap:14px}
.ltab[hidden]{display:none}

/* barra superior */
.appbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px;margin:0 -2px;
  background:linear-gradient(180deg,rgba(6,10,20,.97) 70%,rgba(6,10,20,0))}
.me-chip{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:400 18px var(--f-display);color:#2a1a00;
  background:radial-gradient(circle at 30% 25%,#ffe27a,#d08a00);box-shadow:0 0 0 2px rgba(255,197,49,.35)}
.me-txt{display:grid;min-width:0;line-height:1.15}
.me-txt .who{color:var(--ink);font-size:15px;font-weight:700;padding:0}
.me-txt small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-r{display:flex;align-items:center;gap:8px;flex:none}
.wallet{display:grid;line-height:1.05;text-align:right;padding:6px 12px;border-radius:12px;background:rgba(255,197,49,.1);border:1px solid rgba(255,197,49,.45)}
.wallet small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.wallet b{font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.iconbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--panel);border:1px solid var(--line);flex:none}

/* encabezado */
.hero{text-align:center;padding:2px 0}
.hero .logo{font-size:clamp(40px,11vw,64px);margin:0}
.hero .tag{margin:6px 0 0;font-size:14px}

/* avisos (Hora loca / líder) */
.banners{display:grid;gap:8px}
.banners:not(:has(button:not([hidden]))){display:none}
.banners .happy,.banners .leader{margin:0;padding:10px 12px;font-size:13.5px;border-radius:12px;text-align:center}

/* nombre y piel */
.setup{grid-template-columns:1fr 1.35fr;gap:12px;padding:12px 14px;border-radius:16px}
.skin-f{display:grid;gap:6px;min-width:0}
.skin-f .f{display:flex;justify-content:space-between;align-items:center}
.link.sm{font-size:12px;letter-spacing:0;text-transform:none;padding:0;color:var(--gold);text-decoration:none;font-weight:700}
.skin-f .sb-tag{font-size:11.5px;font-weight:700;color:#ff8a3d}
.skin-f .sb-tag:empty{display:none}
.skins{margin-top:0}
@media (max-width:560px){.setup{grid-template-columns:1fr}}

/* tarjetas de modo */
.mode{border-radius:18px;padding:16px;gap:12px}
.mode-h{justify-content:flex-start;gap:10px}
.mode-ic{font-size:24px;line-height:1}
.mode h2{font-size:24px}
.mode-h .pill{margin-left:auto;justify-self:auto}
.mode p{font-size:13.5px;line-height:1.45}
.mode .bal{padding-top:12px}

/* pestaña de progreso */
.ltab-h{margin:4px 0 0;font:400 22px var(--f-display);color:var(--ink)}
.sec.wide{width:100%}
.note.center{text-align:center}

/* reglas y textos legales */
.rules{border-radius:14px}
.legal{opacity:.85}

/* barra inferior */
.bottomnav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,100%);z-index:8;
  display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  background:rgba(8,12,24,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.bottomnav button{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:12px;font-size:11px;font-weight:700;color:var(--muted)}
.bottomnav button span{font-size:21px;line-height:1;filter:grayscale(.6) opacity(.75)}
.bottomnav button[aria-current]{color:var(--gold);background:rgba(255,197,49,.08)}
.bottomnav button[aria-current] span{filter:none}
.bottomnav .dot{position:absolute;top:4px;right:calc(50% - 18px);width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px rgba(8,12,24,.96)}

/* menú lateral */
.drawer{position:fixed;inset:0;z-index:40}
.drawer-bg{position:absolute;inset:0;background:rgba(2,4,10,.65)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(330px,86vw);overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--panel-solid);border-left:1px solid var(--line);animation:drawerIn .22s ease-out}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
.drawer-h{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.drawer-h b{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr{display:block;width:100%;text-align:left;padding:13px 12px;border-radius:12px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.dr:hover,.dr:focus-visible{background:rgba(255,255,255,.05)}
.dr.wa{color:#25d366}
.dr.adm{color:var(--gold)}
.drawer .legal{margin-top:auto;padding-top:14px}
.mailtip{margin:4px 0;padding:10px 12px;border-radius:12px;background:rgba(255,204,51,.1);border:1px solid rgba(255,204,51,.35);color:var(--ink);font-size:13px;line-height:1.4}
.mailtip b{color:#ffcc33}
/* Celular en horizontal: tablero y tutorial más compactos */
@media (orientation:landscape) and (max-height:500px){
  .board{width:130px;padding:6px 8px;font-size:11px}
  .board ol li:nth-child(n+4){display:none}
  .tut-art{max-height:34vh;aspect-ratio:auto}
  .hint{display:none}
}

/* =====================================================================
   Lobby premium: profundidad, brillo y señales de confianza
   ===================================================================== */
#lobby{background:
  radial-gradient(120% 60% at 50% -10%,rgba(255,197,49,.10),transparent 60%),
  radial-gradient(80% 50% at 100% 30%,rgba(62,224,255,.07),transparent 60%),
  radial-gradient(80% 50% at 0% 70%,rgba(161,75,255,.07),transparent 60%),
  var(--bg)}
.glass,.mode,.setup,.rules,.trust,.how{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) ,rgba(10,16,32,.82);
  border:1px solid rgba(140,160,220,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -18px rgba(0,0,0,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.appbar{background:linear-gradient(180deg,rgba(6,10,20,.92) 65%,rgba(6,10,20,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.iconbtn{background:rgba(255,255,255,.04);border-color:rgba(140,160,220,.18)}
.wallet{background:linear-gradient(180deg,rgba(255,197,49,.16),rgba(255,197,49,.06));box-shadow:0 0 18px -6px rgba(255,197,49,.5)}

/* héroe */
.hero2{position:relative;overflow:hidden;border-radius:24px;padding:22px 16px 18px;text-align:center;isolation:isolate;
  background:linear-gradient(160deg,#121c3a 0%,#0a1024 55%,#160d2a 100%);
  border:1px solid rgba(255,197,49,.22);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 60px -24px rgba(255,170,0,.35)}
.hero2::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:14px 14px;mask-image:linear-gradient(180deg,#000,transparent)}
.hero-snake{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
.hs-path{stroke-dasharray:60 560;animation:hsMove 5s linear infinite;filter:drop-shadow(0 0 6px rgba(255,197,49,.6))}
@keyframes hsMove{from{stroke-dashoffset:620}to{stroke-dashoffset:0}}
.hs-coins circle{fill:#ffd84d;filter:drop-shadow(0 0 4px #ffc531);animation:coinBlink 2.4s ease-in-out infinite}
.hs-coins circle:nth-child(2n){animation-delay:1.2s;fill:#3ee0ff;filter:drop-shadow(0 0 4px #3ee0ff)}
@keyframes coinBlink{50%{opacity:.35}}
.hero-in{position:relative;display:grid;justify-items:center;gap:8px}
.hero2 .logo{font-size:clamp(42px,12vw,68px);margin:2px 0 0;filter:drop-shadow(0 3px 0 #5a2c00) drop-shadow(0 0 22px rgba(255,170,0,.35))}
.hero2 .tag{margin:0;font-size:14px;color:#c4cbe6;max-width:34ch}
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;
  color:#b9ffd9;background:rgba(59,229,143,.1);border:1px solid rgba(59,229,143,.35)}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--money);box-shadow:0 0 0 0 rgba(59,229,143,.6);animation:livePulse 1.8s infinite}
.live-pill.off{color:#ffd0d8;background:rgba(255,59,92,.1);border-color:rgba(255,59,92,.35)}
.live-pill.off i{background:var(--danger);animation:none}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(59,229,143,0)}100%{box-shadow:0 0 0 0 rgba(59,229,143,0)}}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:4px}
.hero-chips span{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#dfe5ff}

/* tarjetas de modo */
.mode{position:relative;border-radius:22px;padding:18px}
.mode-h{align-items:center}
.mode-h>div{display:grid;line-height:1.1}
.mode-h small{font-size:12px;color:var(--muted);font-weight:600}
.mode-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex:none}
.mode.demo .mode-ic{background:linear-gradient(160deg,rgba(62,224,255,.25),rgba(62,224,255,.05));border:1px solid rgba(62,224,255,.35)}
.mode.real .mode-ic{background:linear-gradient(160deg,rgba(255,197,49,.3),rgba(255,197,49,.06));border:1px solid rgba(255,197,49,.45)}
.mode.demo{border-color:rgba(62,224,255,.3)}
.mode.real{border:1px solid transparent;
  background:linear-gradient(180deg,rgba(255,197,49,.07),rgba(10,16,32,.9) 40%) padding-box,
             linear-gradient(140deg,#ffe27a,#b9820a 35%,rgba(255,197,49,.15) 60%,#ffc531) border-box;
  box-shadow:0 22px 50px -22px rgba(255,170,0,.45),0 1px 0 rgba(255,255,255,.08) inset}
.mode .bal{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06)}
.mode .bal b{font-size:24px}
.go{position:relative;overflow:hidden;border-radius:16px;letter-spacing:.02em}
.go::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.8s ease-in-out infinite}
.go.cyan::after{animation-delay:1.9s}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}

/* confianza */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border-radius:22px}
.trust div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.03)}
.trust span{grid-row:1/3;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:rgba(59,229,143,.1);border:1px solid rgba(59,229,143,.25)}
.trust b{font-size:13.5px;line-height:1.2}
.trust small{font-size:11.5px;color:var(--muted);line-height:1.25}
@media (max-width:380px){.trust{grid-template-columns:1fr}}

/* cómo funciona */
.how{padding:16px;border-radius:22px}
.how h3{margin:0 0 12px;font:400 18px var(--f-display);color:var(--ink);text-align:center}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative}
.how li{display:grid;justify-items:center;text-align:center;gap:4px}
.how i{font-style:normal;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:400 16px var(--f-display);color:#2a1a00;
  background:radial-gradient(circle at 30% 25%,#ffe27a,#d08a00);box-shadow:0 0 0 4px rgba(255,197,49,.12),0 6px 16px -4px rgba(255,170,0,.6)}
.how b{font-size:14px}
.how small{font-size:11.5px;color:var(--muted);line-height:1.3}

/* medios de pago */
.paybadges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.paybadges span{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 10px;border-radius:8px;color:#cfd6f3;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.legal b{color:var(--danger);font-weight:800}

/* barra inferior */
.bottomnav{background:rgba(8,12,24,.82);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid rgba(140,160,220,.14)}
.bottomnav button[aria-current]{background:linear-gradient(180deg,rgba(255,197,49,.16),rgba(255,197,49,.04))}
.bottomnav button[aria-current]::before{content:'';position:absolute;top:-6px;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--gold);box-shadow:0 0 10px var(--gold)}
@media (prefers-reduced-motion:reduce){.hs-path,.go::after,.hs-coins circle,.live-pill i{animation:none}}

/* ======================= Nivel premium 2 ======================= */
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
/* pantalla de carga */
.splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(70% 50% at 50% 45%,#1a1430,#05080f 70%);transition:opacity .5s ease,visibility .5s}
.splash.out{opacity:0;visibility:hidden}
.splash-in{display:grid;justify-items:center;gap:16px}
.splash-logo{font:400 clamp(44px,13vw,80px)/1 var(--f-display);color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(110deg,#ff8a1f 0%,#ffc531 30%,#fff6c9 45%,#ffc531 60%,#ff8a1f 100%);background-size:250% 100%;animation:logoShine 1.6s linear infinite;
  filter:drop-shadow(0 4px 0 #5a2c00) drop-shadow(0 0 30px rgba(255,170,0,.45))}
.splash-bar{width:180px;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,#ffc531,#3ee0ff);animation:splashBar 1s ease-in-out infinite}
.splash small{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
@keyframes splashBar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@keyframes logoShine{from{background-position:120% 0}to{background-position:-120% 0}}
/* logo metálico con brillo */
.hero2 .logo{background-image:linear-gradient(110deg,#ff9a2a 0%,#ffc531 32%,#fff3c4 46%,#ffc531 58%,#ff8a1f 100%);background-size:250% 100%;animation:logoShine 4.5s linear infinite}
.hero-cv{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero2{padding:26px 16px 20px;min-height:250px;align-content:center;display:grid;
  background:radial-gradient(90% 70% at 50% 0%,rgba(255,197,49,.14),transparent 60%),linear-gradient(165deg,#111a36 0%,#080d1e 60%,#150c27 100%)}
.hero2::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,10,20,.15),rgba(6,10,20,.55) 55%,rgba(6,10,20,.2))}
.hero-chips span{display:inline-flex;align-items:center;gap:6px}
.hero-chips .ic{color:var(--gold);font-size:14px}
/* premios */
.prize{position:relative;display:grid;gap:10px;width:100%;text-align:left;padding:16px;border-radius:22px;overflow:hidden;color:var(--ink);
  background:radial-gradient(80% 90% at 100% 0%,rgba(255,197,49,.22),transparent 60%),linear-gradient(160deg,#1d1606,#0c1122 60%);
  border:1px solid rgba(255,197,49,.35);box-shadow:0 20px 50px -24px rgba(255,170,0,.55),0 1px 0 rgba(255,255,255,.08) inset}
.prize-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prize-lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.prize-cd{font-size:12px;font-weight:700;color:#ffe8a8;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,197,49,.3);font-variant-numeric:tabular-nums;white-space:nowrap}
.prize-total{font:400 38px/1 var(--f-display);color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,#fff3c4,#ffc531 55%,#d08a00)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.podium div{display:grid;gap:2px;padding:10px 8px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);text-align:center;min-width:0}
.podium em{font-style:normal;font-size:18px;line-height:1}
.podium b{font-size:15px;color:var(--gold)}
.podium small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.podium small.me{color:var(--money);font-weight:700}
.podium div:first-child{border-color:rgba(255,197,49,.45);background:linear-gradient(180deg,rgba(255,197,49,.14),rgba(0,0,0,.25))}
.prize-cta{font-size:12.5px;font-weight:700;color:#ffe8a8;justify-self:end}
/* íconos en tarjetas, confianza y barra */
.mode-ic .ic{font-size:24px}
.mode.demo .mode-ic{color:var(--cyan)} .mode.real .mode-ic{color:var(--gold)}
.trust span{color:var(--money)} .trust span .ic{font-size:19px}
.bottomnav button span .ic{font-size:22px;filter:none}
.bottomnav button span{filter:none;opacity:.7}
.bottomnav button[aria-current] span{opacity:1;filter:drop-shadow(0 0 6px rgba(255,197,49,.7))}
/* entrada suave de secciones */
.ltab:not([hidden])>*{animation:riseIn .5s cubic-bezier(.2,.8,.2,1) both}
.ltab:not([hidden])>*:nth-child(2){animation-delay:.05s}.ltab:not([hidden])>*:nth-child(3){animation-delay:.1s}
.ltab:not([hidden])>*:nth-child(4){animation-delay:.15s}.ltab:not([hidden])>*:nth-child(5){animation-delay:.2s}
.ltab:not([hidden])>*:nth-child(n+6){animation-delay:.25s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mode,.prize,.trust div,.iconbtn,.wallet{transition:transform .15s ease}
.mode:active,.prize:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.ltab>*,.hero2 .logo,.splash-logo,.splash-bar i{animation:none!important}}
.hero-cv{z-index:-2}
.prize-lbl{white-space:nowrap;letter-spacing:.08em;font-size:11.5px}
.banners .leader{display:none!important}
.prize{grid-template-columns:minmax(0,1fr)}
.prize-top{flex-wrap:wrap}
.prize-cd{font-size:11.5px}

/* ======================= Partida: ganancia, efectos, mapas ======================= */
.val{min-width:132px}
.vnet{display:block;margin-top:2px;font-size:11.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.vnet.up{color:#3be58f;text-shadow:0 0 10px rgba(59,229,143,.45)}
.vnet.down{color:#ff8a9d}
.vnet:empty{display:none}
#bCash{min-width:118px}
.mapname{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  font:400 clamp(18px,5vw,28px) var(--f-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 24px rgba(255,197,49,.6);white-space:nowrap}
.mapname.show{animation:mapIn 2.6s ease-out both}
@keyframes mapIn{0%{opacity:0;transform:translate(-50%,-30%) scale(.9)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
.killpop{position:absolute;left:50%;top:24%;transform:translateX(-50%);pointer-events:none;opacity:0;display:grid;justify-items:center;gap:2px;text-align:center}
.killpop b{font:400 clamp(15px,4.4vw,22px) var(--f-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 18px rgba(255,59,92,.7);white-space:nowrap}
.killpop span{font:400 clamp(24px,7vw,40px) var(--f-display);color:#ffd84d;text-shadow:0 3px 0 #5a2c00,0 0 26px rgba(255,197,49,.8)}
.killpop.show{animation:killIn 1.6s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes killIn{0%{opacity:0;transform:translateX(-50%) scale(.4)}12%{opacity:1;transform:translateX(-50%) scale(1.12)}22%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-20px)}}
@media (orientation:landscape) and (max-height:500px){.killpop{top:27%}.mapname{top:64%}}
/* pantalla final */
.rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.rstats div{display:grid;justify-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.rstats em{font-style:normal;font-size:18px;line-height:1}
.rstats b{font:400 20px var(--f-display);color:var(--ink)}
.rstats small{font-size:11px;color:var(--muted)}
.again-big{width:100%;font-size:20px;padding:16px}
.res .sec{width:100%}
/* vertical: el valor va a la izquierda para no chocar con el ranking */
@media (max-width:520px){
  .val{left:max(10px,env(safe-area-inset-left,0px));transform:none;text-align:left;min-width:0;padding:6px 12px 7px}
  .mode-tag{top:calc(84px + env(safe-area-inset-top,0px))}
  #mini{top:calc(112px + env(safe-area-inset-top,0px))}
}
/* HUD más liviano: tapa menos el juego */
.val{background:rgba(6,10,20,.45);border-color:rgba(59,229,143,.45);box-shadow:none;padding:4px 12px 5px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.val small{font-size:9px}
.val b{font-size:20px}
.vnet{font-size:10.5px;margin-top:0}
.board{background:rgba(6,10,20,.45);border-color:rgba(255,255,255,.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
@media (max-width:520px){
  .val b{font-size:18px}
}
@media (orientation:landscape) and (max-height:500px){
  .val small{display:none}
  .val b{font-size:18px}
  .board{width:118px;padding:5px 7px}
}
.pushask{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;text-align:left;
  background:linear-gradient(90deg,rgba(62,224,255,.12),rgba(255,197,49,.08));border:1px solid rgba(62,224,255,.35)}
.pushask .pa-ic{font-size:22px}
.pushask b{display:block;font-size:13.5px}
.pushask small{font-size:11.5px;color:var(--muted)}
.pa-yes{padding:8px 12px;border-radius:10px;font-weight:800;font-size:13px;color:#032430;background:linear-gradient(#7af3ff,#0a8fb0)}
.pa-no{color:var(--muted);font-size:16px;padding:4px}

/* ganadores en vivo */
.wins{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;overflow:hidden;
  background:linear-gradient(90deg,rgba(59,229,143,.12),rgba(10,16,32,.85) 30%);border:1px solid rgba(59,229,143,.3)}
.wins-lbl{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#b9ffd9}
.wins-lbl::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--money);animation:livePulse 1.8s infinite}
.wins-vp{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wins-track{display:inline-flex;gap:26px;white-space:nowrap;animation:winsMove 30s linear infinite}
.wi{font-size:13px;color:#dfe5ff}
.wi em{font-style:normal;margin-right:4px}
.wi b{color:#fff}
.wi i{font-style:normal;font-weight:800;color:var(--money)}
.wi u{text-decoration:none;color:var(--muted);font-size:11.5px;margin-left:4px}
@keyframes winsMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* primera visita */
.intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:hidden;padding:20px;
  background:radial-gradient(80% 60% at 50% 40%,#1b1534,#05080f 75%)}
.intro-cv{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.intro-in{position:relative;display:grid;justify-items:center;gap:12px;text-align:center;width:min(420px,100%)}
.intro-logo{font:400 clamp(48px,15vw,88px)/1 var(--f-display);color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(110deg,#ff9a2a 0%,#ffc531 32%,#fff3c4 46%,#ffc531 58%,#ff8a1f 100%);background-size:250% 100%;animation:logoShine 4s linear infinite;
  filter:drop-shadow(0 4px 0 #5a2c00) drop-shadow(0 0 30px rgba(255,170,0,.4))}
.intro-tag{margin:0;color:#d6dcf5;font-size:16px;line-height:1.45}
.intro-go{font-size:22px;padding:18px;margin-top:8px;animation:goPulse 1.6s ease-in-out infinite}
@keyframes goPulse{50%{transform:scale(1.04);box-shadow:0 5px 0 #05475a,0 0 40px rgba(62,224,255,.55)}}
.intro-note{color:var(--muted);font-size:13px}
.intro-links{display:flex;gap:18px}
.intro-links .link{color:#cfe9ff}
.intro-legal{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.intro-legal a{color:var(--muted)}
/* invitación al modo real tras el demo */
.realcta{display:grid;gap:2px;width:100%;padding:12px 14px;border-radius:14px;text-align:left;color:var(--ink);
  background:linear-gradient(90deg,rgba(255,197,49,.18),rgba(255,197,49,.05));border:1px solid rgba(255,197,49,.5)}
.realcta b{font-size:14.5px;color:var(--gold)}
.realcta small{font-size:12px;color:#d6dcf5}
@media (prefers-reduced-motion:reduce){.wins-track,.intro-go,.intro-logo{animation:none}}
.prize-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
.pz-up{font:700 12.5px var(--f-ui);color:var(--money);-webkit-text-fill-color:var(--money);letter-spacing:0}

/* ======================= Nivel "juego profesional" ======================= */
/* avatar con anillo de experiencia */
.avatar{border:3px solid transparent;width:46px;height:46px;
  background:radial-gradient(circle at 30% 25%,#ffe27a,#d08a00) padding-box,
             conic-gradient(var(--money) calc(var(--xp,0) * 1%),rgba(255,255,255,.14) 0) border-box;
  box-shadow:0 0 14px -2px rgba(59,229,143,.45)}
/* portada más alta para la mascota */
.hero2{min-height:300px;padding-bottom:64px}
.hero-cv{opacity:1}
.hero2::before{background:radial-gradient(70% 55% at 50% 38%,rgba(6,10,20,.55),rgba(6,10,20,0) 75%)}
/* títulos de sección */
.sec-h{display:flex;align-items:center;gap:10px;margin:6px 2px -4px;font:400 15px var(--f-display);letter-spacing:.04em;color:#cfd6f3;text-transform:uppercase}
.sec-h::before,.sec-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,197,49,.45))}
.sec-h::after{background:linear-gradient(90deg,rgba(255,197,49,.45),transparent)}
/* botones gruesos tipo juego móvil */
.go{border:0;text-shadow:0 2px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.18),0 6px 0 #7a4c00,0 12px 26px -6px rgba(255,170,0,.55)}
.go.cyan{text-shadow:0 2px 0 rgba(255,255,255,.3);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.18),0 6px 0 #05475a,0 12px 26px -6px rgba(62,224,255,.55)}
.go:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 #7a4c00}
.go.cyan:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 #05475a}
/* tarjetas de modo con ilustración de fondo */
.mode{overflow:hidden;isolation:isolate}
.mode::before{content:'';position:absolute;right:-30px;top:-30px;width:170px;height:170px;border-radius:50%;z-index:-1;filter:blur(2px);opacity:.5}
.mode.demo::before{background:radial-gradient(circle,rgba(62,224,255,.35),transparent 65%)}
.mode.real::before{background:radial-gradient(circle,rgba(255,197,49,.45),transparent 65%)}
.mode h2{font-size:28px;letter-spacing:.02em}
.mode.real h2{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,#fff3c4,#ffc531 60%,#e08a00)}
.mode.demo h2{color:#bff6ff}
/* barra inferior con botón central de jugar elevado */
.bottomnav{overflow:visible;align-items:end}
.bottomnav .nav-play{position:relative;top:-22px;justify-self:center;width:74px;height:74px;border-radius:50%;padding:0;gap:0;align-content:center;
  color:#2a1a00;font:400 11px var(--f-display);letter-spacing:.04em;
  background:radial-gradient(circle at 35% 25%,#fff0a8,#ffc531 45%,#d08a00);
  box-shadow:0 0 0 5px rgba(8,12,24,.95),0 0 26px rgba(255,197,49,.6),inset 0 -4px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.7)}
.bottomnav .nav-play span{opacity:1!important;filter:none!important}
.bottomnav .nav-play span .ic{font-size:28px;stroke-width:2.2}
.bottomnav .nav-play[aria-current]{background:radial-gradient(circle at 35% 25%,#fff6c9,#ffd23f 45%,#e09a00);animation:playGlow 2.4s ease-in-out infinite}
.bottomnav .nav-play[aria-current]::before{display:none}
@keyframes playGlow{50%{box-shadow:0 0 0 5px rgba(8,12,24,.95),0 0 40px rgba(255,197,49,.9),inset 0 -4px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.7)}}
@media (prefers-reduced-motion:reduce){.bottomnav .nav-play[aria-current]{animation:none}}
.bottomnav .nav-play,.bottomnav .nav-play[aria-current]{color:#3a2400}
.bottomnav .nav-play{font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.5)}
/* mascota */
.hero-mascot{width:132px;height:auto;margin:-8px 0 -6px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,170,0,.25));animation:mascotBob 3.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg) scale(1.02)}}
.intro-mascot{width:min(230px,56vw);height:auto;margin-bottom:-10px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.6));animation:mascotBob 3s ease-in-out infinite}
.splash-mascot{width:140px;height:auto;margin-bottom:-14px;animation:mascotBob 1.6s ease-in-out infinite}
.res-mascot{width:96px;height:auto;margin:-6px auto -8px;display:block;animation:mascotJump .7s cubic-bezier(.3,1.6,.5,1) both}
.res-mascot[hidden]{display:none}
@keyframes mascotJump{from{transform:translateY(30px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-mascot,.intro-mascot,.splash-mascot{animation:none}}
.rainpop{position:absolute;left:50%;top:30%;transform:translateX(-50%);pointer-events:none;opacity:0;display:grid;justify-items:center;gap:4px;text-align:center}
.rainpop b{font:400 clamp(18px,5.4vw,28px) var(--f-display);color:#bff6ff;text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 22px rgba(62,224,255,.8);white-space:nowrap}
.rainpop span{font-size:14px;font-weight:700;color:#e8fbff;text-shadow:0 1px 3px #000}
.rainpop.show{animation:killIn 2.8s cubic-bezier(.2,.9,.3,1.3) both}
@media (orientation:landscape) and (max-height:500px){.rainpop{top:34%}}
.rainpop span{white-space:nowrap}
.clipbtn{display:grid;gap:2px;width:100%;padding:12px 14px;border-radius:14px;text-align:center;color:var(--ink);
  background:linear-gradient(90deg,rgba(255,79,163,.22),rgba(161,75,255,.18));border:1px solid rgba(255,79,163,.6);box-shadow:0 0 20px -6px rgba(255,79,163,.6)}
.clipbtn b{font-size:15.5px}
.clipbtn small{font-size:12px;color:#f3d6ff}
.clipbtn[hidden]{display:none}
.clipbtn:disabled{opacity:.7}
.pv-hat{width:120px;height:96px;display:block;margin:0 auto}
.pv-snake{width:120px;height:40px;display:block;margin:4px auto}
.clipbtn.busy{opacity:.75;animation:pulseBusy 1.2s ease-in-out infinite}@keyframes pulseBusy{50%{opacity:.5}}