:root{--bg:#fff;--tx:#4b4b4b;--bd:#e5e5e5;--card:#fff;--sel:#ddf4ff;--selb:#84d8ff;--selt:#1899d6;--gl:#d7ffb8;--gt:#58a700;--rl:#ffdfe0;--rt:#ea2b2b;--fbg:#f0f8ff;--lk:#e5e5e5;--lks:#b7b7b7;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#131f24;--tx:#e5e5e5;--bd:#37464f;--card:#131f24;--sel:#1f3a47;--selb:#1cb0f6;--selt:#49c0f8;--gl:#1d3a0f;--gt:#89e219;--rl:#4a1f23;--rt:#ff7878;--fbg:#1b2a31;--lk:#37464f;--lks:#202f36}} :root[data-theme="dark"]{--bg:#131f24;--tx:#e5e5e5;--bd:#37464f;--card:#131f24;--sel:#1f3a47;--selb:#1cb0f6;--selt:#49c0f8;--gl:#1d3a0f;--gt:#89e219;--rl:#4a1f23;--rt:#ff7878;--fbg:#1b2a31;--lk:#37464f;--lks:#202f36} *{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)} body{margin:0;background:var(--bg);color:var(--tx);font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:700} body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10} button{font:inherit;cursor:pointer;border:0;color:inherit} #v{max-width:520px;margin:0 auto;padding-bottom:100px;min-height:100vh} .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);display:flex;justify-content:space-around;padding:12px;border-bottom:2px solid var(--bd);font-weight:900;font-size:18px} .ban{margin:20px 16px 0;border-radius:16px;padding:16px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px} .ban small{opacity:.85;font-weight:800}.ban h2{margin:2px 0 0;font-size:20px;font-weight:900} .gb{background:rgba(0,0,0,.2);color:#fff;border-radius:12px;padding:10px 12px;font-weight:900;border-bottom:3px solid rgba(0,0,0,.25)} .path{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 0 6px} .nd{width:72px;height:66px;border-radius:50%;font-size:28px;font-weight:900;color:#fff} .nd.cur,.nd.done{background:var(--c);box-shadow:0 7px 0 var(--s)}.nd.done{filter:saturate(.9)} .nd.cur{animation:pl 1.6s ease-in-out infinite}@keyframes pl{50%{transform:translateY(-4px)}} .nd.lock{background:var(--lk);box-shadow:0 7px 0 var(--lks);color:var(--lks);cursor:default} .nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:var(--bg);border-top:2px solid var(--bd);display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:9} .nav button{flex:1;background:none;font-size:26px;padding:6px;border-radius:12px;border:2px solid transparent} .nav button.on{background:var(--sel);border-color:var(--selb)} .pad{padding:20px 16px}.pad h1{font-size:26px;font-weight:900;margin:0 0 8px} .big{width:100%;background:#58cc02;color:#fff;border-radius:16px;padding:15px;font-size:17px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 4px 0 #58a700} .big:disabled{background:var(--lk);color:var(--lks);box-shadow:0 4px 0 var(--lks);cursor:default} .big.bl{background:#1cb0f6;box-shadow:0 4px 0 #1899d6}.big.rb{background:#ff4b4b;box-shadow:0 4px 0 #ea2b2b} .card{border:2px solid var(--bd);border-radius:16px;padding:14px;margin:12px 0;line-height:1.5;font-size:17px} .f{background:var(--sel);color:var(--selt);border-radius:12px;padding:10px;margin:8px 0 2px;text-align:center;font-weight:900} .st{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.st div{border:2px solid var(--bd);border-radius:16px;padding:14px;font-size:22px;font-weight:900;text-align:center}.st small{display:block;font-size:13px;opacity:.7} .lt{display:flex;align-items:center;gap:12px;padding:16px} .x{background:none;font-size:24px;color:var(--lks)} .bar{flex:1;height:16px;border-radius:8px;background:var(--lk);overflow:hidden}.bar i{display:block;height:100%;background:#58cc02;border-radius:8px;transition:width .3s} .qb{padding:8px 16px}.qb h1{font-size:24px;font-weight:900;margin:8px 0 18px}.q{font-size:20px;font-weight:800;margin:0 0 18px;line-height:1.4} .op,.in{display:block;width:100%;text-align:left;background:var(--card);border:2px solid var(--bd);border-bottom-width:4px;border-radius:16px;padding:14px 16px;margin-bottom:12px;font-size:18px;font-weight:800;font-family:inherit;color:var(--tx)} .op.sel{background:var(--sel);border-color:var(--selb);color:var(--selt)} .op.ok{background:var(--gl);border-color:#58cc02;color:var(--gt)}.op.no{background:var(--rl);border-color:#ff4b4b;color:var(--rt)} .fb{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--bd);background:var(--bg);z-index:9} .fb.g{background:var(--gl);color:var(--gt)}.fb.r{background:var(--rl);color:var(--rt)} .msg{font-size:20px;font-weight:900;margin-bottom:14px}.msg span{font-size:17px} .mid{text-align:center;padding:60px 20px 20px}.mid .em{font-size:90px}.mid h1{font-size:28px;font-weight:900} .sr{display:block;margin:10px 0}.sr input{width:100%;accent-color:#1cb0f6} .big.pu{background:#ce82ff;box-shadow:0 4px 0 #a568cc} .pm{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:flex;align-items:flex-end;justify-content:center}.pm>div{background:var(--bg);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));text-align:center}.pm h2{margin:6px 0;font-size:26px;font-weight:900}.pm ul{text-align:left;list-style:none;padding:0;margin:14px 0}.pm li{padding:6px 0;font-size:18px}.nx{display:block;width:100%;background:none;color:var(--lks);font-weight:900;padding:14px;text-transform:uppercase} body{background-image:linear-gradient(rgba(120,120,120,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,120,.09) 1px,transparent 1px);background-size:28px 28px} #v{position:relative;z-index:1}.card{background:var(--bg)} #dc{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}#dc span{position:absolute;opacity:.08;font-weight:900;animation:fl 8s ease-in-out infinite alternate}@keyframes fl{to{transform:translateY(-26px) rotate(14deg)}} .ban{position:relative;overflow:hidden}.ban>*{position:relative;z-index:1} .ban::before{content:"";position:absolute;left:-30px;top:-34px;width:150px;height:110px;border:3px solid rgba(255,255,255,.25);border-radius:50%;transform:rotate(-20deg)} .ban::after{content:attr(data-s);position:absolute;right:6px;bottom:-4px;font-size:30px;opacity:.18;font-weight:900;white-space:nowrap} #wal{background:#fff3c4;color:#b07a00;border-radius:20px;padding:2px 12px;display:inline-block} .cn{position:fixed;z-index:50;font-size:28px;pointer-events:none}.nd.lock{cursor:pointer} /* ===== Cuentas, perfil y tienda ===== */ .wl{min-height:calc(100vh - 100px);display:flex;flex-direction:column;padding:24px 20px 8px} .wl .hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:20px 0} .wl h1{font-size:34px;font-weight:900;margin:0;color:#58cc02} .wl.fm h1{font-size:26px;color:var(--tx);margin:6px 0 20px} .wl p{margin:0;font-size:19px;line-height:1.4} .bob{animation:bob 2.4s ease-in-out infinite;width:190px;height:215px}@keyframes bob{50%{transform:translateY(-8px)}} .big.wh{background:var(--bg);color:#1cb0f6;border:2px solid var(--bd);box-shadow:0 4px 0 var(--bd)} .big.rb.wh{color:var(--rt)} .ah{display:flex;align-items:center;justify-content:space-between;margin:-8px -8px 0} .ah .x{padding:8px 12px} .lnk{background:none;color:#1cb0f6;font-weight:900;text-transform:uppercase;padding:10px 12px;font-size:15px;letter-spacing:.5px;border:2px solid var(--bd);border-bottom-width:4px;border-radius:14px} .in:focus{outline:0;border-color:var(--selb);background:var(--fbg)} .kp{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}.kb{flex:1 0 17%;min-width:52px;padding:12px 0;border-radius:14px;border:2px solid var(--bd);border-bottom-width:4px;background:var(--card);color:var(--tx);font-size:20px;font-weight:800;font-family:inherit;cursor:pointer}.kb:active{transform:translateY(2px)} .pw{position:relative}.pw .in{padding-right:56px} .pw button{position:absolute;right:6px;top:8px;background:none;font-size:20px;padding:8px} .er{color:var(--rt);font-size:14px;font-weight:800;margin:-6px 0 12px 4px}.er:empty{display:none} .fine{font-size:13px;opacity:.65;text-align:center;margin:14px 0 0;line-height:1.4} .ph{position:relative;height:250px;overflow:hidden;border-bottom:2px solid var(--bd);background:#1cb0f6} .ph>svg,.pv>svg{position:absolute;inset:0;width:100%;height:100%;display:block} .gear{position:absolute;top:12px;right:12px;z-index:3;background:rgba(0,0,0,.28);color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px;padding:0} .pn{font-size:28px;font-weight:900;margin:0}.pg{opacity:.7;font-size:16px;margin:2px 0} .pr{display:flex;gap:10px;margin:16px 0 4px}.pr .big{padding:12px 6px;font-size:14px} .sh2{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;opacity:.65;margin:22px 4px 8px} .ac{display:flex;gap:12px;align-items:center;margin:8px 0}.ac .em2{font-size:34px}.ac small{opacity:.7;font-weight:800} .nav-av{display:block;width:34px;height:36px;margin:0 auto} .chips{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 4px} .chip{background:var(--bg);border:2px solid var(--bd);border-bottom-width:4px;border-radius:14px;padding:8px 14px;font-weight:900;white-space:nowrap;font-size:15px} .chip.on{background:var(--sel);border-color:var(--selb);color:var(--selt)} .shh{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;opacity:.65;margin:20px 16px 8px} .gr{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px} .it{border:2px solid var(--bd);border-bottom-width:4px;border-radius:16px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:8px;background:var(--bg)} .it.eq{border-color:#58cc02;background:var(--gl)} .it b{font-size:15px;line-height:1.2;min-height:36px;display:flex;align-items:center;justify-content:center} .pv{position:relative;overflow:hidden;border-radius:12px;background:#1cb0f6}.it .pv{aspect-ratio:1} .sbuy{background:#58cc02;color:#fff;border-radius:12px;padding:9px 4px;font-weight:900;box-shadow:0 3px 0 #58a700;font-size:15px} .sbuy.no{background:var(--lk);color:var(--lks);box-shadow:0 3px 0 var(--lks)} .sbuy.eqp{background:#1cb0f6;box-shadow:0 3px 0 #1899d6} .sbuy.on{background:transparent;color:#58cc02;border:2px solid #58cc02;box-shadow:none;padding:7px 4px} .sbuy:disabled{cursor:default} .tdg{margin:6px 0 14px;text-align:center;border:2px solid var(--bd);border-radius:16px;padding:8px 8px 10px;background:var(--card)}.tdg svg{width:100%;max-width:300px;height:auto;color:var(--tx)}.tlg{font-size:14px;font-weight:700;line-height:1.5;margin-top:2px} .dqc{padding:12px 14px}.dqh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.dqh small{opacity:.7;font-weight:700}.dqr{margin:8px 0}.dqt{display:flex;justify-content:space-between;gap:8px;font-size:15px;font-weight:700}.dqt b{white-space:nowrap}.dqb{height:12px;border-radius:8px;background:var(--bd);overflow:hidden;margin-top:4px}.dqb i{display:block;height:100%;background:linear-gradient(90deg,#1cb0f6,#58cc02);border-radius:8px;transition:width .4s}.dqr.ok .dqt{color:#58a700} .dqn{position:fixed;left:50%;transform:translateX(-50%);width:min(92%,420px);z-index:130;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#7c4dff,#1cb0f6);color:#fff;border-radius:18px;padding:12px 16px;box-shadow:0 8px 22px rgba(0,0,0,.35);animation:dqin .5s cubic-bezier(.3,1.5,.5,1)}.dqn b{display:block;font-size:17px}.dqn small{display:block;opacity:.9;font-weight:700;font-size:13px}.dqi{font-size:30px}.dqn>div{flex:1}.dqg2{font-size:24px;font-weight:900;white-space:nowrap}.dqg2 i{font-style:normal;display:inline-block;animation:dqg .8s ease-in-out 3}.dqn.out{opacity:0;transform:translateX(-50%) translateY(-30px);transition:all .45s} @keyframes dqin{from{opacity:0;transform:translateX(-50%) translateY(-60px) scale(.8)}to{opacity:1;transform:translateX(-50%)}}@keyframes dqg{50%{transform:scale(1.5) rotate(-12deg)}} .orr{text-align:center;opacity:.6;font-weight:800;margin:10px 0 2px}.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#4b4b4b;color:#fff;padding:12px 18px;border-radius:14px;z-index:60;font-weight:900;max-width:90%;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.3)} .sec{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;opacity:.65;margin:24px 4px 0} .kc b:first-child{font-size:19px} .cbtn{background:none;font-size:20px;font-weight:900;border:2px solid var(--bd);border-bottom-width:4px;border-radius:12px;padding:2px 10px;color:var(--tx)} .ctl{margin:18px 16px 0;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.6px} .crs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-bottom-width:4px;font-family:inherit;color:var(--tx)} .crs.on{background:var(--sel);border-color:var(--selb)} .ce{width:56px;height:56px;border-radius:16px;font-size:30px;display:flex;align-items:center;justify-content:center;flex:none} .cx{flex:1;display:block}.cx b{display:block;font-size:18px}.cd{display:block;font-size:13px;opacity:.75;font-weight:800;line-height:1.35;margin-top:2px} .cb{background:#58cc02;color:#fff;border-radius:10px;padding:4px 8px;font-size:12px;font-weight:900;text-transform:uppercase} .op svg{display:block;margin:0 auto;width:160px;height:160px} .q svg{display:block;margin:10px auto 0;width:200px;height:200px} /* ===== Mejora visual y efectos ===== */ :root{--pill:#f3f6f8;--glass:rgba(255,255,255,.82)} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--pill:#1c2b32;--glass:rgba(19,31,36,.82)}} :root[data-theme="dark"]{--pill:#1c2b32;--glass:rgba(19,31,36,.82)} body{background-color:var(--bg);background-image:radial-gradient(ellipse 60% 40% at 0 0,rgba(88,204,2,.13),transparent 70%),radial-gradient(ellipse 55% 40% at 100% 8%,rgba(28,176,246,.14),transparent 70%),radial-gradient(ellipse 60% 40% at 50% 105%,rgba(206,130,255,.12),transparent 70%),linear-gradient(rgba(120,120,120,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,120,120,.07) 1px,transparent 1px);background-size:auto,auto,auto,28px 28px,28px 28px;background-attachment:fixed} body::before{background:transparent} .ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;overflow:visible} .ic.i-check,.ic.i-cross{width:1em;height:1em;vertical-align:-.12em} /* barra superior */ .top{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);gap:6px;align-items:center;border-bottom:2px solid var(--bd)} .top>span{display:inline-flex;align-items:center;gap:6px;background:var(--pill);border-radius:999px;padding:5px 12px 5px 9px;font-size:17px;transition:transform .2s} .top>span:active{transform:scale(.95)} .top .i-flame{animation:flick 1.3s ease-in-out infinite;transform-origin:50% 90%} @keyframes flick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12,.94) rotate(-4deg)}60%{transform:scale(.94,1.1) rotate(3deg)}} .top .i-bolt{animation:zap 2.6s ease-in-out infinite}@keyframes zap{0%,86%,100%{transform:none;filter:none}90%{transform:scale(1.2) rotate(-8deg);filter:drop-shadow(0 0 4px #ffc800)}} .top .i-coin,.lt .i-coin{animation:spinc 4.5s ease-in-out infinite}@keyframes spinc{0%,70%,100%{transform:rotateY(0)}85%{transform:rotateY(180deg)}} #wal{background:linear-gradient(180deg,#fff7d1,#ffeba0)!important;color:#a06a00!important;box-shadow:inset 0 -2px 0 rgba(217,154,0,.35)} .cbtn{display:inline-flex;align-items:center;gap:4px;background:var(--pill);transition:transform .15s}.cbtn:active{transform:translateY(2px)} /* banners de unidad */ .ban{background-image:linear-gradient(120deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%,rgba(0,0,0,.08))!important;border-radius:20px;margin-top:26px;animation:rise .5s both} .ban h2{display:flex;align-items:center;gap:8px;text-shadow:0 2px 0 rgba(0,0,0,.12)}.ban h2 .ic{width:1.3em;height:1.3em;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))} .ban::after{display:none} .gb{display:inline-flex;align-items:center;gap:6px;transition:transform .12s,filter .12s}.gb:hover{filter:brightness(1.08)}.gb:active{transform:translateY(2px);border-bottom-width:1px} /* camino de niveles */ .path{position:relative} .nd{position:relative;display:flex;align-items:center;justify-content:center;font-size:30px;background-image:radial-gradient(circle at 32% 22%,rgba(255,255,255,.5),transparent 52%);animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;transition:filter .15s} .nd:active:not(.lock){translate:0 5px;box-shadow:0 2px 0 var(--s)!important} @keyframes pl{50%{translate:0 -4px}} .nd .ic{width:1.1em;height:1.1em;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))} .nd.lock{background-image:radial-gradient(circle at 32% 22%,rgba(255,255,255,.55),transparent 52%)} .nd.cur{animation:pop .5s both,pl 1.6s ease-in-out .5s infinite} .nd.cur::before,.nd.cur::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--c);opacity:0;animation:ripl 2.2s ease-out infinite;pointer-events:none}.nd.cur::after{animation-delay:1.1s} @keyframes ripl{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.55);opacity:0}} .nd.cur .ic{animation:twk 1.8s ease-in-out infinite}@keyframes twk{50%{transform:scale(1.2) rotate(12deg)}} .path .nd:nth-child(1){animation-delay:.05s}.path .nd:nth-child(2){animation-delay:.1s}.path .nd:nth-child(3){animation-delay:.15s}.path .nd:nth-child(4){animation-delay:.2s}.path .nd:nth-child(5){animation-delay:.25s}.path .nd:nth-child(6){animation-delay:.3s}.path .nd:nth-child(7){animation-delay:.35s} @keyframes pop{from{scale:.2;opacity:0}to{scale:1;opacity:1}} @keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}} .card,.pad>h1,.qb>*,.mid>*,.it,.crs,.ac,.st>div{animation:rise .4s both} .gr .it:nth-child(2n){animation-delay:.05s}.gr .it:nth-child(3n){animation-delay:.1s} /* navegación inferior */ .nav{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:8px} .nav button{font-size:30px;display:flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .2s;position:relative} .nav button .ic{width:34px;height:34px;transition:transform .25s cubic-bezier(.3,1.6,.5,1)} .nav button.on{background:var(--sel);box-shadow:0 3px 0 var(--selb)} .nav button.on .ic{transform:scale(1.14) translateY(-1px)}.nav button:active{transform:scale(.92)} .nav-av{animation:none}.nav button.on .nav-av{transform:scale(1.12)} /* botones */ .big,.op,.chip,.sbuy,.lnk,.crs{position:relative;overflow:hidden;transition:transform .1s,box-shadow .1s,filter .15s,background .2s,border-color .2s} .big{background-image:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%)}.big:disabled{background-image:none} .big:hover:not(:disabled){filter:brightness(1.06)} .big:active:not(:disabled),.sbuy:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 transparent!important} .big .ic{margin-right:4px} .op:hover:not(:disabled){border-color:var(--selb);transform:translateY(-1px)} .op:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px} .op.sel{animation:selp .22s cubic-bezier(.3,1.6,.5,1)}@keyframes selp{from{transform:scale(.97)}} .op.ok{animation:okp .55s cubic-bezier(.3,1.6,.5,1)}@keyframes okp{0%{transform:scale(.96)}45%{transform:scale(1.04)}100%{transform:scale(1)}} .op.no{animation:nop .45s}@keyframes nop{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}} .rp{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:rpl .6s ease-out forwards;pointer-events:none}@keyframes rpl{to{transform:scale(1);opacity:0}} /* lección */ .lt .bar{height:18px;background:var(--lk);box-shadow:inset 0 2px 0 rgba(0,0,0,.06)} .bar i{position:relative;background:linear-gradient(180deg,#7ee321,#58cc02);transition:width .5s cubic-bezier(.3,1.2,.4,1)} .bar i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:4px;background:rgba(255,255,255,.4)} .bar i::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:shn 2.4s ease-in-out infinite}@keyframes shn{60%,100%{transform:translateX(100%)}} .fb.g,.fb.r{animation:fbup .35s cubic-bezier(.3,1.3,.5,1)}@keyframes fbup{from{translate:0 100%}} .fb .msg{display:flex;align-items:center;gap:8px} .fb.g .msg .ic,.fb.r .msg .ic{width:1.3em;height:1.3em} .q{animation:rise .35s both} .pt,.cf,.fall,.fl2,.cmb,.flash{position:fixed;pointer-events:none;z-index:80} .pt{background:currentColor}.pt-s{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}.pt-d{border-radius:50%} .cf{z-index:79}.flash{inset:0;left:0!important;top:0!important;width:100vw;height:100vh;z-index:70} .fall{z-index:80;font-size:28px} .fl2{font-weight:900;font-size:20px;white-space:nowrap;text-shadow:0 2px 0 rgba(255,255,255,.7);display:flex;align-items:center;gap:4px} .cmb{z-index:85;display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#ffb02e,#ff7a00);color:#fff;padding:10px 20px;border-radius:999px;font-size:22px;font-weight:900;box-shadow:0 5px 0 #d96400,0 10px 24px rgba(255,122,0,.4);white-space:nowrap} .cmb .ic{width:1.3em;height:1.3em} /* pantalla de lección completada */ .mid{position:relative;overflow:hidden} .mid>*{position:relative;z-index:1} .rays{position:absolute!important;z-index:0!important;left:50%;top:20px;width:520px;height:520px;margin-left:-260px;background:repeating-conic-gradient(from 0deg,rgba(255,200,0,.4) 0 10deg,transparent 10deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 68%);mask-image:radial-gradient(circle,#000 0,transparent 68%);animation:spin 18s linear infinite!important}@keyframes spin{to{transform:rotate(360deg)}} .mid .em{display:inline-block;animation:trophy .9s cubic-bezier(.3,1.7,.5,1) both,flo 3s ease-in-out .9s infinite} @keyframes trophy{from{transform:scale(.1) rotate(-30deg);opacity:0}}@keyframes flo{50%{transform:translateY(-8px) rotate(2deg)}} .mid .em .ic{width:1.1em;height:1.1em;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))} .st>div{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg)} .st>div:nth-child(2){animation-delay:.12s} .st .ic{width:1.1em;height:1.1em} /* perfil, tienda y tarjetas */ .card{box-shadow:0 2px 0 var(--bd);transition:transform .2s,box-shadow .2s}.card b .ic,.sec .ic{vertical-align:-.22em;margin-right:2px} .card:hover{box-shadow:0 4px 0 var(--bd)} .sec{display:flex;align-items:center;gap:6px} .sec .ic{width:1.3em;height:1.3em} .f{background-image:linear-gradient(135deg,rgba(255,255,255,.35),transparent)} .it{transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}.it:hover{transform:translateY(-3px);box-shadow:0 8px 16px rgba(0,0,0,.09)} .ph{background-image:linear-gradient(180deg,rgba(255,255,255,.18),transparent 50%)} .ph svg{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-4px)}} .gear{display:flex;align-items:center;justify-content:center;transition:transform .5s}.gear:hover{transform:rotate(90deg)}.gear .ic{width:26px;height:26px} .ac .em2 .ic,.ac .ic{width:1.1em;height:1.1em} .ce .ic{width:1.15em;height:1.15em;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))} .crs{border-radius:18px}.crs:hover{transform:translateY(-2px)} .chip{display:inline-flex;align-items:center;gap:4px} .toast{animation:toast .35s cubic-bezier(.3,1.5,.5,1);display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#5a5a5a,#3f3f3f);border-radius:999px;padding:12px 22px} @keyframes toast{from{opacity:0;translate:0 24px}} .pm>div{animation:sheet .4s cubic-bezier(.3,1.3,.5,1)}@keyframes sheet{from{translate:0 60%;opacity:0}} .pm{animation:fadein .25s}@keyframes fadein{from{opacity:0}} .pm li{list-style:none;display:flex;align-items:center;gap:10px;padding:5px 0;text-align:left;font-weight:800}.pm ul{padding:0 6px;margin:12px auto;max-width:300px} .pm div>div:first-child .ic{width:1.15em;height:1.15em;animation:flo 3s ease-in-out infinite} .wl .hero .bob{filter:drop-shadow(0 14px 14px rgba(0,0,0,.14))} .wl h1{background:linear-gradient(90deg,#58cc02,#1cb0f6);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .6s both} .wl.fm h1{background:none;color:var(--tx)} #dc span{opacity:.07} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}} /* ===== Cofres, gemas y salto de unidad ===== */ .chs{position:relative;background:none;width:76px;height:72px;padding:0;display:flex;align-items:center;justify-content:center;flex:none} .chs .ic{width:68px;height:68px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.14));transition:transform .2s} .chs.lock .ic{filter:grayscale(1) opacity(.5) drop-shadow(0 6px 0 rgba(0,0,0,.1))} .chs.opn{opacity:.8}.chs.opn .ic{filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))} .chs.rdy .ic{animation:chb 1.4s ease-in-out infinite,glw 2s ease-in-out infinite} @keyframes chb{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-8px) rotate(-5deg)}40%{transform:translateY(0) rotate(5deg)}55%{transform:rotate(0)}} @keyframes glw{50%{filter:drop-shadow(0 0 14px #ffc800) drop-shadow(0 6px 0 rgba(0,0,0,.14))}} .chs:active .ic{transform:scale(.9)} .chtag{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#ffc800;color:#7a4a00;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.5px;padding:2px 8px;border-radius:999px;box-shadow:0 2px 0 #d99a00;white-space:nowrap} .jmpw{display:flex;flex-direction:column;align-items:center;gap:6px;margin:-2px 0 4px} .jmp{background:none;padding:0;width:58px;height:58px;border-radius:50%;box-shadow:0 5px 0 #1899d6;transition:transform .1s,box-shadow .1s} .jmp .ic{width:58px;height:58px} .jmp:active{transform:translateY(5px);box-shadow:none}.jmp:hover{filter:brightness(1.07)} .jmpw small{font-size:13px;font-weight:800;opacity:.65;text-align:center} #gem{background:linear-gradient(180deg,#e4f8ff,#c4eefe);color:#0f7fb3} .cho{position:fixed;inset:0;z-index:90;background:radial-gradient(circle at 50% 42%,#3b2a7a 0,#150f33 55%,#07061a 100%);display:flex;align-items:center;justify-content:center;animation:fadein .35s;overflow:hidden;color:#fff} .chst{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px;padding:0 18px;text-align:center} .chb{width:190px;height:190px;margin-bottom:40px}.chb .ic{width:100%;height:100%} .cht{font-size:26px;font-weight:900;min-height:34px;margin-bottom:14px;text-shadow:0 2px 0 rgba(0,0,0,.3)} .chrays{position:absolute;left:50%;top:42%;width:900px;height:900px;margin:-450px 0 0 -450px;background:repeating-conic-gradient(rgba(255,214,64,.5) 0 8deg,transparent 8deg 22deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 62%);mask-image:radial-gradient(circle,#000 0,transparent 62%);opacity:0} .rws{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:150px} .rw{width:104px;border-radius:18px;padding:12px 6px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.22);display:flex;flex-direction:column;align-items:center;gap:4px;animation:rwp .55s cubic-bezier(.3,1.7,.5,1) both} @keyframes rwp{from{transform:scale(.3) translateY(30px);opacity:0}} .rw .ic{width:46px;height:46px}.rw b{font-size:22px}.rw small{font-size:12px;font-weight:800;opacity:.85;line-height:1.2} .rw.g{background:rgba(60,196,250,.25);border-color:#6fe3ff}.rw.c{background:rgba(255,200,0,.22);border-color:#ffd84d}.rw.i{background:rgba(206,130,255,.25);border-color:#ce82ff} .rw.i .pv{width:68px;height:68px;border-radius:14px}.rw.i b{font-size:13px;line-height:1.15} .rw.no{opacity:.55;border-style:dashed}.rw.no .ic{filter:grayscale(1)} .chm{margin:16px 6px 14px;font-size:16px;font-weight:800;line-height:1.4;opacity:0;transition:opacity .5s;min-height:46px}.chm.on{opacity:1} .chok{max-width:320px;opacity:0;pointer-events:none;transition:opacity .4s}.chok.on{opacity:1;pointer-events:auto} .pm .ic{width:1.1em;height:1.1em} /* botones de volver / cerrar bien visibles */ .x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;padding:0!important;border-radius:50%;background:var(--pill);color:var(--tx);border:2px solid var(--bd);border-bottom-width:4px;font-size:22px;transition:transform .1s,background .15s,border-color .15s} .x .ic{width:22px;height:22px;vertical-align:0} .x:hover{background:var(--sel);border-color:var(--selb);color:var(--selt)} .x:active{transform:translateY(3px);border-bottom-width:2px} /* ===== Flechas de volver / cerrar bien visibles ===== */ .x{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;padding:0;border-radius:14px;background:var(--bg);color:var(--tx);border:2px solid var(--bd);border-bottom-width:4px;font-size:24px;font-weight:900;transition:transform .1s,border-color .15s,background .15s} .x .ic,.x .ic.i-cross,.x .ic.i-back{width:26px;height:26px;vertical-align:0} .x:hover{border-color:var(--selb);background:var(--sel);color:var(--selt)} .x:active{transform:translateY(2px);border-bottom-width:2px} .ah .x,.lt .x{padding:0} .lt{gap:14px} .top{gap:4px;padding-left:8px;padding-right:8px} .top>span,#wal.top-w,.top #wal{padding:5px 9px 5px 7px!important;white-space:nowrap;font-size:16px;gap:4px} .top .cbtn{padding:2px 8px;font-size:18px} /* ===== Arrastrar, errores, salida ===== */ @media(pointer:fine){#v{cursor:grab}#v input,#v textarea{cursor:text}#v button,#v .op,#v .nd{cursor:pointer}} body.drag,body.drag *{cursor:grabbing!important;user-select:none!important} .mkc{border-color:#ce82ff;box-shadow:0 3px 0 #ce82ff} .mkh{display:flex;align-items:center;gap:12px}.mkh>.ic{width:44px;height:44px}.mkh b{display:block;font-size:19px}.mkh small{opacity:.7;font-weight:800} .mkn{margin-left:auto;background:#ff4b4b;color:#fff;font-weight:900;min-width:34px;height:34px;border-radius:17px;display:flex;align-items:center;justify-content:center;padding:0 10px} .mkc p{margin:10px 0 14px;font-size:16px;line-height:1.45} .nb{position:absolute;top:2px;right:calc(50% - 30px);background:#ff4b4b;color:#fff;font-style:normal;font-size:12px;font-weight:900;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 0 #c93a3a} .nl{display:none} .qt .big{margin-top:10px}.qt h2{margin:8px 0 4px}.qt p{margin:0 0 14px;opacity:.85} .sadc{width:150px;height:170px;margin:-6px auto 0} .sadc svg{width:100%;height:100%;overflow:visible;transform-origin:50% 95%;animation:sadb 2.6s ease-in-out infinite} @keyframes sadb{0%,100%{transform:rotate(0) scale(1,1)}35%{transform:rotate(-4deg) scale(1.02,.95) translateY(4px)}70%{transform:rotate(3deg) scale(1.01,.96) translateY(3px)}} .tear{animation:tear 1.5s ease-in infinite;opacity:0}.tear.t2{animation-delay:.7s} @keyframes tear{0%{opacity:0;translate:0 0}20%{opacity:.95}100%{opacity:0;translate:0 52px}} /* ===== Escritorio: barra lateral + columna central + panel de estadísticas ===== */ @media(min-width:900px){ :root{--sb:240px;--rp:0px} #v{max-width:680px;padding-bottom:40px} #v:has(>.nav){--w:min(760px,calc(100vw - var(--sb) - 56px));width:var(--w);max-width:none;margin-left:calc(var(--sb) + (100vw - var(--sb) - var(--w))/2);margin-right:0} .nav{left:0;top:0;bottom:0;transform:none;width:var(--sb);max-width:none;flex-direction:column;justify-content:flex-start;gap:6px;padding:92px 14px 20px;border-top:0;border-right:2px solid var(--bd)} .nav::before{content:"";position:absolute;top:18px;left:18px;width:196px;height:51px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MTUgMjEwIiB3aWR0aD0iODE1IiBoZWlnaHQ9IjIxMCI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNjOGY0NWEiLz48c3RvcCBvZmZzZXQ9Ii41IiBzdG9wLWNvbG9yPSIjNThjYzAyIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMmY5ZTAwIi8+PC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNmZlMGZmIi8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iIzFjYjBmNiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzEyNzNkNiIvPjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0ibyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZDg0YSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmOTYwMCIvPjwvbGluZWFyR3JhZGllbnQ+CjxjbGlwUGF0aCBpZD0idG9wIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iODE1IiBoZWlnaHQ9IjEwMiIvPjwvY2xpcFBhdGg+CjxjbGlwUGF0aCBpZD0iYmsiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4MTUiIGhlaWdodD0iODgiLz48L2NsaXBQYXRoPgo8Y2xpcFBhdGggaWQ9ImZyIj48cmVjdCB4PSIwIiB5PSI4OCIgd2lkdGg9IjgxNSIgaGVpZ2h0PSIyMTAiLz48L2NsaXBQYXRoPgo8cGF0aCBpZD0idzEiIGQ9Ik03Ny45IC0xMDYuNVE5Ni42NDk5OTk5OTk5OTk5OSAtMTA2LjUgMTEwLjAgLTk2LjZRMTIzLjM1IC04Ni43IDEyNy44NSAtNjkuNkg5OS42NDk5OTk5OTk5OTk5OVE5Ni41IC03Ni4yIDkwLjcyNSAtNzkuNjVRODQuOTUgLTgzLjEgNzcuNiAtODMuMVE2NS43NSAtODMuMSA1OC40IC03NC44NVE1MS4wNSAtNjYuNiA1MS4wNSAtNTIuOFE1MS4wNSAtMzkuMCA1OC40IC0zMC43NVE2NS43NSAtMjIuNSA3Ny42IC0yMi41UTg0Ljk1IC0yMi41IDkwLjcyNSAtMjUuOTVROTYuNSAtMjkuNCA5OS42NDk5OTk5OTk5OTk5OSAtMzYuMEgxMjcuODVRMTIzLjM1IC0xOC45IDExMC4wIC05LjA3NVE5Ni42NDk5OTk5OTk5OTk5OSAwLjc1IDc3LjkgMC43NVE2Mi42IDAuNzUgNTAuNTI1MDAwMDAwMDAwMDA2IC02LjA3NVEzOC40NSAtMTIuOSAzMS43MDAwMDAwMDAwMDAwMDMgLTI1LjA0OTk5OTk5OTk5OTk5N1EyNC45NSAtMzcuMTk5OTk5OTk5OTk5OTk2IDI0Ljk1IC01Mi44UTI0Ljk1IC02OC4zOTk5OTk5OTk5OTk5OSAzMS43MDAwMDAwMDAwMDAwMDMgLTgwLjYyNVEzOC40NSAtOTIuODUgNTAuNTI1MDAwMDAwMDAwMDA2IC05OS42NzVRNjIuNiAtMTA2LjUgNzcuOSAtMTA2LjVaTTEzNC41IC00MS44NVExMzQuNSAtNTQuNzUgMTQwLjIgLTY0LjU3NDk5OTk5OTk5OTk5UTE0NS45IC03NC4zOTk5OTk5OTk5OTk5OSAxNTUuOCAtNzkuNjQ5OTk5OTk5OTk5OTlRMTY1LjcwMDAwMDAwMDAwMDAyIC04NC44OTk5OTk5OTk5OTk5OSAxNzguMCAtODQuODk5OTk5OTk5OTk5OTlRMTkwLjMgLTg0Ljg5OTk5OTk5OTk5OTk5IDIwMC4yMDAwMDAwMDAwMDAwMiAtNzkuNjQ5OTk5OTk5OTk5OTlRMjEwLjEwMDAwMDAwMDAwMDAyIC03NC4zOTk5OTk5OTk5OTk5OSAyMTUuOCAtNjQuNTc0OTk5OTk5OTk5OTlRMjIxLjUgLTU0Ljc1IDIyMS41IC00MS44NVEyMjEuNSAtMjguOTUgMjE1LjcyNSAtMTkuMTI1UTIwOS45NSAtOS4yOTk5OTk5OTk5OTk5OTkgMTk5Ljk3NSAtNC4wNVExOTAuMCAxLjIgMTc3LjcwMDAwMDAwMDAwMDAyIDEuMlExNjUuNCAxLjIgMTU1LjU3NSAtNC4wNVExNDUuNzUgLTkuMjk5OTk5OTk5OTk5OTk5IDE0MC4xMjUgLTE5LjA0OTk5OTk5OTk5OTk5N1ExMzQuNSAtMjguNzk5OTk5OTk5OTk5OTk3IDEzNC41IC00MS44NVpNMTk1LjQgLTQxLjg1UTE5NS40IC01MS45IDE5MC4zNzUgLTU3LjNRMTg1LjM1MDAwMDAwMDAwMDAyIC02Mi42OTk5OTk5OTk5OTk5OTYgMTc4LjAgLTYyLjY5OTk5OTk5OTk5OTk5NlExNzAuNSAtNjIuNjk5OTk5OTk5OTk5OTk2IDE2NS41NSAtNTcuMzc1UTE2MC42MDAwMDAwMDAwMDAwMiAtNTIuMDUgMTYwLjYwMDAwMDAwMDAwMDAyIC00MS44NVExNjAuNjAwMDAwMDAwMDAwMDIgLTMxLjc5OTk5OTk5OTk5OTk5NyAxNjUuNDc1MDAwMDAwMDAwMDIgLTI2LjRRMTcwLjM1MDAwMDAwMDAwMDAyIC0yMS4wIDE3Ny43MDAwMDAwMDAwMDAwMiAtMjEuMFExODUuMDUgLTIxLjAgMTkwLjIyNTAwMDAwMDAwMDAyIC0yNi40UTE5NS40IC0zMS43OTk5OTk5OTk5OTk5OTcgMTk1LjQgLTQxLjg1Wk0zMTQuNDAwMDAwMDAwMDAwMDMgLTQ4LjlWMC4wSDI4OC45MDAwMDAwMDAwMDAwM1YtNDUuNDQ5OTk5OTk5OTk5OTk2UTI4OC45MDAwMDAwMDAwMDAwMyAtNTMuODUgMjg0LjU1MDAwMDAwMDAwMDA3IC01OC41UTI4MC4yMDAwMDAwMDAwMDAwNSAtNjMuMTUgMjcyLjg1IC02My4xNVEyNjUuNSAtNjMuMTUgMjYxLjE1IC01OC41UTI1Ni44IC01My44NSAyNTYuOCAtNDUuNDQ5OTk5OTk5OTk5OTk2VjAuMEgyMzEuMTUwMDAwMDAwMDAwMDNWLTgzLjdIMjU2LjhWLTcyLjZRMjYwLjcwMDAwMDAwMDAwMDA1IC03OC4xNDk5OTk5OTk5OTk5OSAyNjcuMzAwMDAwMDAwMDAwMDcgLTgxLjM3NVEyNzMuOTAwMDAwMDAwMDAwMDMgLTg0LjYgMjgyLjE1MDAwMDAwMDAwMDAzIC04NC42UTI5Ni44NSAtODQuNiAzMDUuNjI1IC03NS4wNzQ5OTk5OTk5OTk5OVEzMTQuNDAwMDAwMDAwMDAwMDMgLTY1LjU1IDMxNC40MDAwMDAwMDAwMDAwMyAtNDguOVpNMzI1Ljg1IC0xMDYuMlEzMjUuODUgLTExMi4yIDMzMC4xMjUgLTExNi4xNzVRMzM0LjQwMDAwMDAwMDAwMDAzIC0xMjAuMTQ5OTk5OTk5OTk5OTkgMzQxLjE1MDAwMDAwMDAwMDAzIC0xMjAuMTQ5OTk5OTk5OTk5OTlRMzQ3Ljc1MDAwMDAwMDAwMDA2IC0xMjAuMTQ5OTk5OTk5OTk5OTkgMzUyLjAyNTAwMDAwMDAwMDEgLTExNi4xNzVRMzU2LjMwMDAwMDAwMDAwMDA3IC0xMTIuMiAzNTYuMzAwMDAwMDAwMDAwMDcgLTEwNi4yUTM1Ni4zMDAwMDAwMDAwMDAwNyAtMTAwLjM1IDM1Mi4wMjUwMDAwMDAwMDAxIC05Ni4zNzVRMzQ3Ljc1MDAwMDAwMDAwMDA2IC05Mi4zOTk5OTk5OTk5OTk5OSAzNDEuMTUwMDAwMDAwMDAwMDMgLTkyLjM5OTk5OTk5OTk5OTk5UTMzNC40MDAwMDAwMDAwMDAwMyAtOTIuMzk5OTk5OTk5OTk5OTkgMzMwLjEyNSAtOTYuMzc1UTMyNS44NSAtMTAwLjM1IDMyNS44NSAtMTA2LjJaTTM1My45MDAwMDAwMDAwMDAwMyAtODMuN1YwLjBIMzI4LjI1MDAwMDAwMDAwMDA2Vi04My43WiIvPjxwYXRoIGlkPSJ3MiIgZD0iTTQ0My41MDAwMDAwMDAwMDAwNiAxOC4wIDQzMC4wMDAwMDAwMDAwMDAwNiAtMC4xNVE0MjQuMDAwMDAwMDAwMDAwMDYgMS4wNSA0MTguMzAwMDAwMDAwMDAwMDcgMS4wNVE0MDMuNDUwMDAwMDAwMDAwMDUgMS4wNSAzOTEuMDc1MDAwMDAwMDAwMDUgLTUuODVRMzc4LjcwMDAwMDAwMDAwMDA1IC0xMi43NSAzNzEuNDI1MDAwMDAwMDAwMDcgLTI1LjEyNVEzNjQuMTUwMDAwMDAwMDAwMDMgLTM3LjUgMzY0LjE1MDAwMDAwMDAwMDAzIC01Mi45NDk5OTk5OTk5OTk5OTZRMzY0LjE1MDAwMDAwMDAwMDAzIC02OC4zOTk5OTk5OTk5OTk5OSAzNzEuNDI1MDAwMDAwMDAwMDcgLTgwLjY5OTk5OTk5OTk5OTk5UTM3OC43MDAwMDAwMDAwMDAwNSAtOTMuMCAzOTEuMDc1MDAwMDAwMDAwMDUgLTk5LjlRNDAzLjQ1MDAwMDAwMDAwMDA1IC0xMDYuOCA0MTguMzAwMDAwMDAwMDAwMDcgLTEwNi44UTQzMy4xNTAwMDAwMDAwMDAwMyAtMTA2LjggNDQ1LjUyNTAwMDAwMDAwMDAzIC05OS45UTQ1Ny45MDAwMDAwMDAwMDAwMyAtOTMuMCA0NjUuMDI1MDAwMDAwMDAwMDMgLTgwLjY5OTk5OTk5OTk5OTk5UTQ3Mi4xNTAwMDAwMDAwMDAwMyAtNjguMzk5OTk5OTk5OTk5OTkgNDcyLjE1MDAwMDAwMDAwMDAzIC01Mi45NDk5OTk5OTk5OTk5OTZRNDcyLjE1MDAwMDAwMDAwMDAzIC0zOS40NDk5OTk5OTk5OTk5OTYgNDY2LjY3NTAwMDAwMDAwMDA3IC0yOC4yNzVRNDYxLjIwMDAwMDAwMDAwMDA1IC0xNy4wOTk5OTk5OTk5OTk5OTggNDUxLjQ1MDAwMDAwMDAwMDA1IC05Ljc1TDQ3NC41NTAwMDAwMDAwMDAwNyAxOC4wWk00MTguMzAwMDAwMDAwMDAwMDcgLTIyLjM0OTk5OTk5OTk5OTk5OFE0MzAuOTAwMDAwMDAwMDAwMDMgLTIyLjM0OTk5OTk5OTk5OTk5OCA0MzguNDc1IC0zMC43NVE0NDYuMDUwMDAwMDAwMDAwMDcgLTM5LjE1IDQ0Ni4wNTAwMDAwMDAwMDAwNyAtNTIuOTQ5OTk5OTk5OTk5OTk2UTQ0Ni4wNTAwMDAwMDAwMDAwNyAtNjYuODk5OTk5OTk5OTk5OTkgNDM4LjQ3NSAtNzUuMjI1UTQzMC45MDAwMDAwMDAwMDAwMyAtODMuNTUgNDE4LjMwMDAwMDAwMDAwMDA3IC04My41NVE0MDUuNTUwMDAwMDAwMDAwMDcgLTgzLjU1IDM5Ny45NzUgLTc1LjNRMzkwLjQwMDAwMDAwMDAwMDAzIC02Ny4wNSAzOTAuNDAwMDAwMDAwMDAwMDMgLTUyLjk0OTk5OTk5OTk5OTk5NlEzOTAuNDAwMDAwMDAwMDAwMDMgLTM5LjAgMzk3Ljk3NSAtMzAuNjc0OTk5OTk5OTk5OTk3UTQwNS41NTAwMDAwMDAwMDAwNyAtMjIuMzQ5OTk5OTk5OTk5OTk4IDQxOC4zMDAwMDAwMDAwMDAwNyAtMjIuMzQ5OTk5OTk5OTk5OTk4Wk01NjUuMzUgLTgzLjdWMC4wSDUzOS43Vi0xMS40UTUzNS44MDAwMDAwMDAwMDAxIC01Ljg1IDUyOS4xMjUgLTIuNDc0OTk5OTk5OTk5OTk5NlE1MjIuNDUgMC44OTk5OTk5OTk5OTk5OTk5IDUxNC4zNSAwLjg5OTk5OTk5OTk5OTk5OTlRNTA0Ljc1MDAwMDAwMDAwMDA2IDAuODk5OTk5OTk5OTk5OTk5OSA0OTcuNDAwMDAwMDAwMDAwMDMgLTMuMzc1UTQ5MC4wNSAtNy42NDk5OTk5OTk5OTk5OTk1IDQ4Ni4wIC0xNS43NDk5OTk5OTk5OTk5OThRNDgxLjk1MDAwMDAwMDAwMDA1IC0yMy44NDk5OTk5OTk5OTk5OTggNDgxLjk1MDAwMDAwMDAwMDA1IC0zNC44Vi04My43SDUwNy40NTAwMDAwMDAwMDAwNVYtMzguMjVRNTA3LjQ1MDAwMDAwMDAwMDA1IC0yOS44NDk5OTk5OTk5OTk5OTggNTExLjgwMDAwMDAwMDAwMDA3IC0yNS4yUTUxNi4xNTAwMDAwMDAwMDAxIC0yMC41NSA1MjMuNSAtMjAuNTVRNTMxLjAgLTIwLjU1IDUzNS4zNSAtMjUuMlE1MzkuNyAtMjkuODQ5OTk5OTk5OTk5OTk4IDUzOS43IC0zOC4yNVYtODMuN1pNNjU4LjI1IC0zNS42OTk5OTk5OTk5OTk5OTZINjAwLjJRNjAwLjggLTI3LjkgNjA1LjIyNDk5OTk5OTk5OTkgLTIzLjc3NVE2MDkuNjUgLTE5LjY1IDYxNi4xIC0xOS42NVE2MjUuNyAtMTkuNjUgNjI5LjQ1IC0yNy43NUg2NTYuNzVRNjU0LjY1IC0xOS41IDY0OS4xNzUgLTEyLjlRNjQzLjcgLTYuMyA2MzUuNDUgLTIuNTVRNjI3LjIgMS4yIDYxNy4wIDEuMlE2MDQuNyAxLjIgNTk1LjEgLTQuMDVRNTg1LjUgLTkuMjk5OTk5OTk5OTk5OTk5IDU4MC4xIC0xOS4wNDk5OTk5OTk5OTk5OTdRNTc0LjcgLTI4Ljc5OTk5OTk5OTk5OTk5NyA1NzQuNyAtNDEuODVRNTc0LjcgLTU0LjkgNTgwLjAyNTAwMDAwMDAwMDEgLTY0LjY0OTk5OTk5OTk5OTk5UTU4NS4zNSAtNzQuMzk5OTk5OTk5OTk5OTkgNTk0Ljk1IC03OS42NDk5OTk5OTk5OTk5OVE2MDQuNTUgLTg0Ljg5OTk5OTk5OTk5OTk5IDYxNy4wIC04NC44OTk5OTk5OTk5OTk5OVE2MjkuMTUgLTg0Ljg5OTk5OTk5OTk5OTk5IDYzOC41OTk5OTk5OTk5OTk5IC03OS44UTY0OC4wNSAtNzQuNyA2NTMuMzc1IC02NS4yNVE2NTguNyAtNTUuOCA2NTguNyAtNDMuMTk5OTk5OTk5OTk5OTk2UTY1OC43IC0zOS42IDY1OC4yNSAtMzUuNjk5OTk5OTk5OTk5OTk2Wk02MzIuNDUgLTQ5Ljk0OTk5OTk5OTk5OTk5NlE2MzIuNDUgLTU2LjU1IDYyNy45NSAtNjAuNDQ5OTk5OTk5OTk5OTk2UTYyMy40NSAtNjQuMzUgNjE2LjcgLTY0LjM1UTYxMC4yNSAtNjQuMzUgNjA1LjgyNSAtNjAuNTk5OTk5OTk5OTk5OTk0UTYwMS40IC01Ni44NSA2MDAuMzUgLTQ5Ljk0OTk5OTk5OTk5OTk5NlpNNjYzLjY5OTk5OTk5OTk5OTkgLTI3LjQ1SDY4OS4wNVE2ODkuNSAtMjMuMDk5OTk5OTk5OTk5OTk4IDY5My4wOTk5OTk5OTk5OTk5IC0yMC40UTY5Ni42OTk5OTk5OTk5OTk5IC0xNy43IDcwMS45NDk5OTk5OTk5OTk5IC0xNy43UTcwNi43NSAtMTcuNyA3MDkuMzc1IC0xOS41NzVRNzEyLjAgLTIxLjQ1IDcxMi4wIC0yNC40NVE3MTIuMCAtMjguMDUgNzA4LjI1IC0yOS43NzVRNzA0LjUgLTMxLjUgNjk2LjEgLTMzLjZRNjg3LjEgLTM1LjY5OTk5OTk5OTk5OTk5NiA2ODEuMSAtMzguMDI1UTY3NS4xIC00MC4zNSA2NzAuNzUgLTQ1LjM3NVE2NjYuNCAtNTAuNCA2NjYuNCAtNTguOTQ5OTk5OTk5OTk5OTk2UTY2Ni40IC02Ni4xNDk5OTk5OTk5OTk5OSA2NzAuMzc1IC03Mi4wNzQ5OTk5OTk5OTk5OVE2NzQuMzUgLTc4LjAgNjgyLjA3NSAtODEuNDQ5OTk5OTk5OTk5OTlRNjg5LjggLTg0Ljg5OTk5OTk5OTk5OTk5IDcwMC40NDk5OTk5OTk5OTk5IC04NC44OTk5OTk5OTk5OTk5OVE3MTYuMTk5OTk5OTk5OTk5OSAtODQuODk5OTk5OTk5OTk5OTkgNzI1LjI3NSAtNzcuMVE3MzQuMzUgLTY5LjMgNzM1LjY5OTk5OTk5OTk5OTkgLTU2LjRINzEyLjBRNzExLjQgLTYwLjc1IDcwOC4xNzUgLTYzLjNRNzA0Ljk0OTk5OTk5OTk5OTkgLTY1Ljg1IDY5OS42OTk5OTk5OTk5OTk5IC02NS44NVE2OTUuMTk5OTk5OTk5OTk5OSAtNjUuODUgNjkyLjggLTY0LjEyNVE2OTAuNCAtNjIuNCA2OTAuNCAtNTkuNFE2OTAuNCAtNTUuOCA2OTQuMjI0OTk5OTk5OTk5OSAtNTQuMFE2OTguMDUgLTUyLjE5OTk5OTk5OTk5OTk5NiA3MDYuMTUgLTUwLjRRNzE1LjQ0OTk5OTk5OTk5OTkgLTQ4LjAgNzIxLjMgLTQ1LjY3NVE3MjcuMTUgLTQzLjM1IDczMS41NzUgLTM4LjE3NVE3MzYuMCAtMzMuMCA3MzYuMTUgLTI0LjNRNzM2LjE1IC0xNi45NSA3MzIuMDI1IC0xMS4xNzQ5OTk5OTk5OTk5OTlRNzI3LjkgLTUuMzk5OTk5OTk5OTk5OTk5NSA3MjAuMTc1IC0yLjA5OTk5OTk5OTk5OTk5OTZRNzEyLjQ0OTk5OTk5OTk5OTkgMS4yIDcwMi4yNSAxLjJRNjkxLjMgMS4yIDY4Mi43NSAtMi41NVE2NzQuMTk5OTk5OTk5OTk5OSAtNi4zIDY2OS4yNSAtMTIuODI1UTY2NC4zIC0xOS4zNDk5OTk5OTk5OTk5OTggNjYzLjY5OTk5OTk5OTk5OTkgLTI3LjQ1Wk03OTQuNTUwMDAwMDAwMDAwMSAtMjEuNzVWMC4wSDc4MS41UTc2Ny41NTAwMDAwMDAwMDAxIDAuMCA3NTkuNzUgLTYuODI1UTc1MS45NSAtMTMuNjUgNzUxLjk1IC0yOS4wOTk5OTk5OTk5OTk5OThWLTYyLjRINzQxLjc1Vi04My43SDc1MS45NVYtMTA0LjFINzc3LjZWLTgzLjdINzk0LjRWLTYyLjRINzc3LjZWLTI4Ljc5OTk5OTk5OTk5OTk5N1E3NzcuNiAtMjUuMDUgNzc5LjQwMDAwMDAwMDAwMDEgLTIzLjRRNzgxLjIgLTIxLjc1IDc4NS40IC0yMS43NVoiLz4KPC9kZWZzPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgtNyA0MDcuNSAxMDUpIj4KIDxlbGxpcHNlIGN4PSI0MDcuNSIgY3k9IjEwNSIgcng9IjQwMy41IiByeT0iNDQiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNvKSIgc3Ryb2tlLXdpZHRoPSI3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGNsaXAtcGF0aD0idXJsKCNiaykiLz4KPC9nPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDE1MCkiPgogPGcgZmlsbD0iIzBiNGY4NyIgc3Ryb2tlPSIjMGI0Zjg3IiBzdHJva2Utd2lkdGg9IjE2IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDkpIj48dXNlIGhyZWY9IiN3MSIgZmlsbD0iIzExNmIyYSIgc3Ryb2tlPSIjMTE2YjJhIi8+PHVzZSBocmVmPSIjdzIiLz48L2c+CiA8ZyBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjx1c2UgaHJlZj0iI3cxIi8+PHVzZSBocmVmPSIjdzIiLz48L2c+CiA8dXNlIGhyZWY9IiN3MSIgZmlsbD0idXJsKCNhKSIgc3Ryb2tlPSIjMmY5ZTAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KIDx1c2UgaHJlZj0iI3cyIiBmaWxsPSJ1cmwoI2IpIiBzdHJva2U9IiMxMjczZDYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogPGcgY2xpcC1wYXRoPSJ1cmwoI3RvcCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTE1MCkiIG9wYWNpdHk9Ii4wIj48L2c+CjwvZz4KPGcgdHJhbnNmb3JtPSJyb3RhdGUoLTcgNDA3LjUgMTA1KSI+CiA8ZWxsaXBzZSBjeD0iNDA3LjUiIGN5PSIxMDUiIHJ4PSI0MDMuNSIgcnk9IjQ0IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjbykiIHN0cm9rZS13aWR0aD0iNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBjbGlwLXBhdGg9InVybCgjZnIpIi8+CiA8Y2lyY2xlIGN4PSI4MDEiIGN5PSI5OCIgcj0iOSIgZmlsbD0iI2ZmZDg0YSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiLz4KPC9nPgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NjUsMzQpIiBmaWxsPSIjZmZkODRhIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTAgLTE3TDUgLTVMMTcgMEw1IDVMMCAxN0wtNSA1TC0xNyAwTC01IC01WiIvPjwvZz4KPC9zdmc+) no-repeat left center/contain} .nav button{flex:none;justify-content:flex-start;gap:16px;padding:12px 16px;border-radius:14px;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:var(--tx)} .nl{display:inline} .nb{top:50%;right:14px;margin-top:-10px} .nav button.on{color:var(--selt)}.nav button:hover:not(.on){background:var(--pill)} .nav-av{margin:0;width:34px;height:36px} .fb{left:0;transform:none;width:100%;max-width:none;padding-left:max(16px,calc((100vw - 680px)/2));padding-right:max(16px,calc((100vw - 680px)/2))} .pm{align-items:center}.pm>div{border-radius:24px;max-width:460px;padding-bottom:24px} .gr{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .st{grid-template-columns:repeat(3,1fr)} .ban{margin-left:0;margin-right:0} .ph{height:300px;border-radius:0 0 22px 22px} .wl{max-width:560px;margin:0 auto} } @media(min-width:1240px){ :root{--rp:340px} #v:has(>.nav){--w:min(740px,calc(100vw - var(--sb) - var(--rp) - 56px));margin-left:calc(var(--sb) + (100vw - var(--sb) - var(--rp) - var(--w))/2)} #v:has(>.nav) .top{position:fixed;top:24px;right:24px;width:calc(var(--rp) - 40px);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;border:2px solid var(--bd);border-radius:20px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;z-index:8} #v:has(>.nav) .top>span{justify-content:center} #v:has(>.nav) .top .cbtn{grid-column:1/-1;justify-content:center;padding:8px;font-size:20px} } /* ===== Decoración, carteles y botón subir ===== */ .dz{position:relative;height:0;width:100%;align-self:stretch;pointer-events:none} .deco{position:absolute;top:-70px;width:92px;pointer-events:auto;cursor:pointer;outline:0;transition:transform .2s} .deco.l{left:max(6px,calc(50% - 215px))}.deco.r{right:max(6px,calc(50% - 215px))} .deco .dsv{width:100%;display:block;overflow:visible;animation:dbob 3.4s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 4px 0 rgba(0,0,0,.06))} .deco.r .dsv{animation-delay:-1.4s} @keyframes dbob{50%{transform:translateY(-5px) rotate(1.5deg)}} .deco:hover{transform:scale(1.07)} .deco.pk .dsv{animation:dpoke .8s cubic-bezier(.3,1.6,.5,1)}@keyframes dpoke{30%{transform:translateY(-22px) rotate(-8deg) scale(1.08)}60%{transform:translateY(0) rotate(6deg)}100%{transform:none}} .deco.lk .dsv{filter:grayscale(1) opacity(.5)} .bub{position:absolute;bottom:100%;margin-bottom:4px;width:max-content;max-width:170px;background:var(--bg);border:2px solid var(--bd);border-bottom-width:4px;border-radius:14px;padding:6px 10px;text-align:left;opacity:0;pointer-events:none;transform:translateY(6px) scale(.9);transition:.18s;z-index:5;line-height:1.25} .bub b{display:block;font-size:14px}.bub span{font-size:12px;opacity:.75;font-weight:800} .deco.l .bub{left:0}.deco.r .bub{right:0} .deco:hover .bub,.deco:focus .bub,.deco.pk .bub{opacity:1;transform:none} #tip{position:fixed;z-index:85;width:300px;background:var(--bg);color:var(--tx);border:2px solid var(--bd);border-radius:18px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:tipin .18s ease-out} @keyframes tipin{from{opacity:0;translate:0 -8px}} #tip::before{content:"";position:absolute;top:-9px;left:calc(var(--ax) - 8px);width:14px;height:14px;background:var(--bg);border-left:2px solid var(--bd);border-top:2px solid var(--bd);transform:rotate(45deg)} #tip h3{margin:0 0 4px;font-size:21px;font-weight:900}#tip p{margin:0 0 6px;font-size:15.5px;line-height:1.35}#tip small{opacity:.7;font-weight:800;line-height:1.3;display:block} .tstk{position:relative}.tstk h3{color:var(--lks)}.tstk h3.hot{color:#ff9600} .tbig{position:absolute;right:2px;top:-2px}.tbig .ic{width:62px;height:62px;filter:grayscale(1) opacity(.28)}.tstk h3.hot~*{} .tweek{display:flex;justify-content:space-between;gap:4px;margin-top:12px;padding:12px 10px;border-radius:14px;background:var(--pill)} .tw{display:flex;flex-direction:column;align-items:center;gap:6px}.tw small{font-size:13px;font-weight:900;opacity:.55}.tw.td small{color:#ff9600;opacity:1} .tw i{width:30px;height:30px;border-radius:50%;background:var(--lk);display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal}.tw i.on{background:#ff9600;box-shadow:0 3px 0 #d97800}.tw i .ic{width:16px;height:16px} .tic{display:flex;gap:16px;align-items:center}.tchest{position:relative;flex:none;width:80px}.tchest .ic{width:80px;height:80px}.tchest .tg{position:absolute;width:38px;height:38px;right:-4px;top:-2px} .tl{display:inline-block;margin-top:2px;color:#1cb0f6;font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:14px;cursor:pointer}.tl:hover{text-decoration:underline} .top>span{cursor:pointer} .upb{position:fixed;right:16px;bottom:92px;z-index:30;width:50px;height:50px;border-radius:15px;background:var(--bg);color:#1cb0f6;border:2px solid var(--bd);border-bottom-width:4px;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;pointer-events:none;translate:0 16px;transition:opacity .25s,translate .25s,border-color .15s} .upb.on{opacity:1;pointer-events:auto;translate:0 0}.upb .ic{width:26px;height:26px}.upb:hover{border-color:#1cb0f6;background:var(--sel)}.upb:active{transform:translateY(2px);border-bottom-width:2px} body:has(.fb) .upb,body:has(.cho) .upb{display:none} @media(min-width:900px){.upb{right:28px;bottom:28px}} /* ===== Explicaciones, temas, estadísticas, compartir, accesibilidad ===== */ :root{--ac:#58cc02;--acd:#58a700;--ac2:#7ee321} :root[data-ac=azul]{--ac:#1cb0f6;--acd:#1899d6;--ac2:#5fcbff} :root[data-ac=violeta]{--ac:#ce82ff;--acd:#a568cc;--ac2:#e0adff} :root[data-ac=naranja]{--ac:#ff9600;--acd:#d97800;--ac2:#ffb84d} :root[data-ac=rosa]{--ac:#ff7eb3;--acd:#d6568a;--ac2:#ffa8cc} :root[data-ac]{--sel:color-mix(in srgb,var(--ac) 16%,var(--bg));--selb:var(--ac);--selt:color-mix(in srgb,var(--ac) 62%,var(--tx))} :root[data-ac] .big:not(.rb):not(.pu):not(.wh):not(:disabled),:root[data-ac] .big.bl:not(:disabled){background-color:var(--ac);box-shadow:0 4px 0 var(--acd)} :root[data-ac] .bar i{background-image:linear-gradient(180deg,var(--ac2),var(--ac))} :root[data-ac] .sbuy:not(.no):not(.eqp):not(.on){background:var(--ac);box-shadow:0 3px 0 var(--acd)} :root[data-ac] .fb.g .big{background-color:#58cc02;box-shadow:0 4px 0 #58a700} :root[data-ac] .nav button.on{background:var(--sel);border-color:var(--selb)} .swt{width:42px;height:42px;border-radius:50%;background:var(--c);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--bd),0 3px 0 rgba(0,0,0,.15);padding:0;transition:transform .15s} .swt:hover{transform:scale(1.1)}.swt.on{box-shadow:0 0 0 3px var(--tx),0 3px 0 rgba(0,0,0,.15)} .ap-l{margin:14px 0 6px;font-size:14px;opacity:.7;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.ap-r{display:flex;flex-wrap:wrap;gap:8px}.ap-sw{display:flex;gap:12px;padding:4px}.ap-h{height:14px;border-bottom:2px solid var(--bd);margin-bottom:14px} .ex{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 14px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.55);color:var(--tx);text-align:left;font-weight:700} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ex{background:rgba(0,0,0,.25)}}:root[data-theme=dark] .ex{background:rgba(0,0,0,.25)} .ex>.ic{width:30px;height:30px;flex:none}.ex b{display:block;font-size:15px;color:#d99a00}.exf{font-size:16px;font-weight:900;margin:2px 0;word-break:break-word}.ex span{font-size:14px;line-height:1.35;display:block;opacity:.9} .fb{max-height:72vh;overflow-y:auto}.qb{padding-bottom:240px} .qrow{display:flex;gap:12px;align-items:flex-start}.qrow .q{flex:1;margin-top:0} .spk{flex:none;width:44px;height:44px;border-radius:13px;background:var(--bg);color:var(--selt);border:2px solid var(--bd);border-bottom-width:4px;display:flex;align-items:center;justify-content:center;padding:0}.spk .ic{width:24px;height:24px}.spk:hover{border-color:var(--selb);background:var(--sel)}.spk:active{transform:translateY(2px);border-bottom-width:2px} :focus-visible{outline:3px solid var(--selb);outline-offset:2px;border-radius:10px} .kb,.shm{text-align:center}.kb h2,.shm h2{margin:4px 0 12px}.kbl{text-align:left;margin-bottom:14px}.kbl>div{display:flex;align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--bd)}.kbl span{margin-left:auto;font-weight:800;opacity:.8} kbd{display:inline-block;min-width:28px;padding:3px 8px;border:2px solid var(--bd);border-bottom-width:4px;border-radius:8px;background:var(--bg);font:800 14px/1.2 inherit;text-align:center} .shm img{max-width:100%;max-height:52vh;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.2);margin-bottom:14px}.shm .big{display:block;margin-top:10px;text-decoration:none;text-align:center} .stl{text-align:center}.stl p{margin:6px 0 12px;font-size:15px}.stli{position:relative;width:76px;margin:0 auto 6px}.stli .ic:first-child{width:76px;height:76px;filter:grayscale(.6) opacity(.6)}.stli .ic+.ic{position:absolute;width:34px;height:34px;right:-6px;bottom:-4px} .sc b{display:flex;align-items:center;gap:8px;font-size:18px;margin-bottom:10px}.sc b .ic{width:26px;height:26px} .ucs{margin-bottom:12px}.uct{font-weight:900;font-size:14px;opacity:.7;text-transform:uppercase;letter-spacing:.5px;margin:6px 0} .ur{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px;gap:10px;align-items:center;padding:4px 0}.un{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ub{height:12px;border-radius:6px;background:var(--lk);overflow:hidden}.ub i{display:block;height:100%;border-radius:6px;transition:width .6s}.ur small{opacity:.7;text-align:right} .tmr{display:flex;gap:10px;margin-bottom:6px}.tmr>div{flex:1;background:var(--pill);border-radius:14px;padding:10px;text-align:center}.tmr h4,.prr h4{margin:0;font-size:22px;font-weight:900}.tmr small,.prr small{opacity:.7} .cols{display:flex;gap:8px;height:130px;align-items:flex-end;margin-top:12px}.col{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}.col i{display:block;width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:#1cb0f6;min-height:4px;transition:height .6s}.col i.g{background:#58cc02}.col span{font-size:11px;font-weight:900;opacity:.8}.col small{font-weight:900;opacity:.55}.col.td small{color:var(--selt);opacity:1} .cap{display:block;text-align:center;opacity:.55;margin-top:8px} .prr{display:flex;align-items:center;gap:16px}.ring{width:110px;height:110px;flex:none;color:var(--tx)} /* ===== Estadísticas (sección aparte) y columna derecha ===== */ .lkw{position:relative;border-radius:14px;overflow:hidden}.lkb{filter:blur(5px) grayscale(.3);opacity:.7;pointer-events:none;user-select:none;min-height:150px} .lko{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--bg) 55%,transparent);padding:12px}.lko>.ic{width:42px;height:42px}.lko b{font-size:17px}.lko .big{width:auto;padding:12px 20px;font-size:14px}.lko .big .ic{width:20px;height:20px;vertical-align:-.3em} .pc{width:20px!important;height:20px!important;margin-left:auto} .ur2{border-bottom:1px solid var(--bd)}.ur2:last-child{border-bottom:0} .uh{width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 40px 26px;gap:10px;align-items:center;background:none;padding:10px 0;text-align:left;color:inherit} .uh:hover .un{color:var(--selt)}.uh small{text-align:right;opacity:.7} .chv{display:flex;transition:transform .25s}.chv .ic{width:20px;height:20px;transform:rotate(-90deg)}.ur2.open .chv{transform:rotate(180deg)} .ud{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.ur2.open .ud{grid-template-rows:1fr} .udi{overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;padding:0}.ur2.open .udi{padding:2px 0 12px} .udi>div{background:var(--pill);border-radius:12px;padding:8px;text-align:center}.udi b{display:block;font-size:17px;font-weight:900}.udi small{opacity:.65;font-weight:800} .rcol{display:none} @media(min-width:1240px){ .rcol{display:flex;flex-direction:column;gap:14px;position:fixed;top:262px;right:24px;width:calc(var(--rp) - 40px);max-height:calc(100vh - 280px);overflow-y:auto;padding:2px 2px 20px;scrollbar-width:thin;z-index:7} .rc{border:2px solid var(--bd);border-radius:20px;padding:16px 18px;background:var(--bg);animation:rise .4s both} .rh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.rh b{font-size:17px;display:flex;align-items:center;gap:6px}.rh .ic{width:22px;height:22px}.rh a,.rfoot a{color:#1cb0f6;font-size:12px;font-weight:900;letter-spacing:.5px;cursor:pointer;text-transform:uppercase}.rh a:hover,.rfoot a:hover{text-decoration:underline} .rc p{margin:0 0 8px;font-size:14.5px;line-height:1.4;opacity:.9}.rc small{opacity:.65;font-weight:800;font-size:12.5px} .rc .big{padding:12px;font-size:14px} .rpm{background:linear-gradient(135deg,rgba(206,130,255,.18),rgba(28,176,246,.14))}.rbadge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#ce82ff,#1cb0f6);color:#fff;font-size:12px;font-weight:900;letter-spacing:.6px;padding:3px 10px;border-radius:8px;margin-bottom:8px}.rbadge .ic{width:16px;height:16px}.rpt b{font-size:17px} .rl{display:flex;gap:14px;align-items:center;margin-bottom:10px}.rl b{font-size:17px;display:block}.rl p{margin:2px 0 0} .rmed .ic{width:54px;height:54px}.rce{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}.rce .ic{width:1.1em;height:1.1em} .rbar{height:12px;border-radius:6px;background:var(--lk);overflow:hidden;margin:4px 0 6px}.rbar i{display:block;height:100%;border-radius:6px;transition:width .6s} .rq{display:flex;align-items:center;gap:12px;margin:12px 0}.rqt{flex:1}.rqt b{font-size:15px}.rb2{position:relative;height:20px;margin:6px 0 0}.rb2 i{background:#ffc800}.rb2 span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900;color:var(--tx);opacity:.85} .rqi .ic{width:38px;height:38px}.rqi.d .ic{filter:none}.rqi:not(.d) .ic{filter:grayscale(.4) opacity(.8)} .rfoot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding:6px 4px} } /* ===== Ligas ===== */ .lgh{text-align:center;padding:2px 0 8px}.lgh h1{margin:6px 0 2px!important;font-size:30px!important;text-shadow:0 2px 0 rgba(0,0,0,.08)}.lgh p{margin:4px 0 8px;font-size:16px} .lgt{display:inline-flex;align-items:center;gap:6px;background:var(--pill);border-radius:20px;padding:5px 14px;font-weight:900;opacity:.9}.lgt .ic{width:16px;height:16px} .lgcar{display:flex;gap:4px;overflow-x:auto;padding:14px 4px 10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .lgcar::-webkit-scrollbar{display:none}.lgcar>div{flex:none;width:62px;text-align:center}.lgcar>div:first-child{margin-left:auto}.lgcar>div:last-child{margin-right:auto} .lgcar small{display:block;font-size:11.5px;font-weight:900;opacity:.65;margin-top:2px}.lgcar .cu small{opacity:1;color:var(--tx)} .lgb{display:block;margin:0 auto;filter:drop-shadow(0 4px 5px rgba(0,0,0,.2))}.lgb.off{filter:grayscale(1) opacity(.4)} .lgcar .cu .lgb{transform:scale(1.35) translateY(-3px);animation:lgfl 3s ease-in-out infinite}@keyframes lgfl{50%{transform:scale(1.4) translateY(-7px)}} .lgcar .cu{margin:0 8px} .lgl{padding:6px 10px 10px!important} .lgs{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:12px;margin:4px 0 10px;border-radius:14px;background:var(--pill)}.lgs b{font-size:17px}.lgs span{font-size:14.5px;opacity:.85} .lgs.good{background:rgba(88,204,2,.16);color:inherit}.lgs.good b{color:#46a302}.lgs.bad{background:rgba(255,75,75,.14)}.lgs.bad b{color:#e03c3c}.lgs.warn{background:rgba(255,200,0,.18)}.lgs .big{margin-top:6px;width:auto;padding:10px 22px;font-size:14px} .lgz{font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;text-align:center;padding:6px 0;margin:8px 0 2px;border-radius:10px} .lgz.up{color:#46a302;background:rgba(88,204,2,.14)}.lgz.dn{color:#e03c3c;background:rgba(255,75,75,.13)}.lgz.mid{background:none;color:var(--tx);opacity:.45;border-top:2px dashed var(--bd);border-radius:0;margin:6px 0} .lgr{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px;animation:rise .35s both;animation-delay:calc(var(--i,0)*30ms);transition:background .2s,transform .2s} .lgr:hover{background:var(--pill)}.lgr.me{background:color-mix(in srgb,#1cb0f6 16%,var(--bg));box-shadow:inset 0 0 0 2px #1cb0f6} .lgp{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;flex:none;opacity:.75} .lgp.p1,.lgp.p2,.lgp.p3{color:#fff;opacity:1;box-shadow:0 3px 0 rgba(0,0,0,.18)}.lgp.p1{background:linear-gradient(135deg,#ffe066,#f5b800)}.lgp.p2{background:linear-gradient(135deg,#e6ecf1,#9aa7b4)}.lgp.p3{background:linear-gradient(135deg,#f3be8a,#b8702d)} .lga{position:relative;width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--bd);background:var(--pill);display:block} .lgbg{position:absolute;inset:0}.lgbg svg{width:100%;height:100%;display:block} .lga>svg{position:absolute;left:50%;top:14%;width:100%;height:100%;transform:translateX(-50%) scale(1.15);transform-origin:50% 0} .lgn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16.5px;font-weight:900}.lgn em{font-style:normal;font-size:10.5px;background:#1cb0f6;color:#fff;border-radius:6px;padding:2px 6px;margin-left:6px;vertical-align:2px;letter-spacing:.5px} .lgx{font-weight:900;font-size:15px;opacity:.75;flex:none} .lgr.sm{padding:5px 4px;gap:8px}.lgr.sm .lga{width:34px;height:34px}.lgr.sm .lgp{width:24px;height:24px;font-size:13px}.lgr.sm .lgn{font-size:14px}.lgr.sm .lgx{font-size:13px} .lgm{margin-top:4px} .lgrules summary{cursor:pointer;font-weight:900;list-style:none}.lgrules summary::-webkit-details-marker{display:none}.lgrules summary::after{content:"＋";float:right;opacity:.6}.lgrules[open] summary::after{content:"－"} .lgrules p{font-size:15px;opacity:.85;margin:10px 0}.lgrules table{width:100%;border-collapse:collapse;font-size:14px}.lgrules th{text-align:left;opacity:.6;font-size:12px;text-transform:uppercase;letter-spacing:.6px}.lgrules td,.lgrules th{padding:5px 4px;border-bottom:1px solid var(--bd)}.lgrules td:first-child{display:flex;align-items:center;gap:6px;font-weight:900} .lgres{max-width:420px!important}.lgbig{animation:lgpop .8s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}@keyframes lgpop{from{transform:scale(.2) rotate(-25deg);opacity:0}} .lgco{display:inline-block;margin:6px 0 2px;font-size:26px;font-weight:900;color:#d99a00}.lgmsg{opacity:.8} .nav-lg{display:flex;width:34px;height:34px;align-items:center;justify-content:center}.nav-lg svg{width:30px;height:auto}.nav button.on .nav-lg{transform:scale(1.12)} .wds{display:flex;justify-content:space-between;gap:4px}.wd{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.wd i{width:30px;height:30px;border-radius:50%;background:var(--lk);display:flex;align-items:center;justify-content:center}.wd.on i{background:linear-gradient(135deg,#ffb020,#ff7a00);box-shadow:0 3px 0 #c75d00}.wd.on i .ic{width:18px;height:18px;filter:brightness(10)}.wd.td i{box-shadow:0 0 0 3px rgba(255,150,0,.35)}.wd small{font-size:12px;font-weight:900;opacity:.6} .sb{position:absolute;top:-48px;left:50%;translate:-50% 0;background:var(--bg);color:var(--c);border:2px solid var(--bd);border-radius:14px;padding:6px 14px;font-size:14px;font-weight:900;letter-spacing:.6px;white-space:nowrap;box-shadow:0 3px 0 var(--bd);animation:sbb 1.4s ease-in-out infinite;pointer-events:none} .sb::after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;background:var(--bg);border:solid var(--bd);border-width:0 2px 2px 0;transform:translateX(-50%) rotate(45deg)}@keyframes sbb{50%{translate:-50% -6px}} /* ===== Pulido general ===== */ :focus-visible{outline:3px solid #1cb0f6;outline-offset:2px;border-radius:10px} ::selection{background:rgba(28,176,246,.3)} @media(hover:hover){::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(130,130,130,.35);border-radius:10px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:rgba(130,130,130,.6);background-clip:padding-box;border:2px solid transparent}} .card:not(.sc):not(.lgl):hover{transform:translateY(-2px)} .lt .bar i{background-image:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 60%)} .big{letter-spacing:.6px}.big:hover{filter:brightness(1.06)} .top>span{transition:transform .15s,box-shadow .2s}.top>span:hover{transform:translateY(-1px)} #splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg);animation:spOut .5s ease 1s forwards;pointer-events:none} #splash b{font-size:44px;font-weight:900;background:linear-gradient(90deg,#58cc02,#1cb0f6);-webkit-background-clip:text;background-clip:text;color:transparent;animation:lgpop .7s cubic-bezier(.3,1.6,.5,1) both}#splash svg{width:96px;animation:lgfl 1.2s ease-in-out infinite} @keyframes spOut{to{opacity:0;visibility:hidden}} /* ===== Barra derecha grande ===== */ @media(min-width:1240px){ :root{--rp:380px} .rcol{top:var(--toph,212px);bottom:12px;right:20px;width:calc(var(--rp) - 36px);max-height:none;overflow-y:auto;scrollbar-width:none;padding:2px 2px 28px;gap:16px;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)} .rcol::-webkit-scrollbar{display:none} #v:has(>.nav) .top{right:20px;width:calc(var(--rp) - 36px);top:20px} .rc{padding:20px 22px;border-radius:22px;box-shadow:0 3px 0 var(--bd)} .rh b{font-size:19px}.rc p{font-size:15.5px}.rl b{font-size:18px} } @media(min-width:1480px){:root{--rp:440px}} /* ===== Bienvenida ===== */ .ob{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:18px 18px 0} .obtp{display:flex;align-items:center;gap:14px;padding:6px 0 10px}.obtp .bar{height:16px}.obtp .bar i{background:linear-gradient(#6ee01a,#58cc02);box-shadow:inset 0 3px 0 rgba(255,255,255,.3);transition:width .5s cubic-bezier(.3,1.2,.5,1)} .obk{background:none;border:0;font-size:34px;line-height:1;color:var(--tx);opacity:.55;padding:2px 8px;border-radius:12px;font-weight:900}.obk:hover{opacity:1;background:var(--pill)} .obbd{flex:1;padding-bottom:20px}.ob:not(.re) .obbd>*{animation:rise .4s both}.ob:not(.re) .obbd>*:nth-child(2){animation-delay:.06s}.ob:not(.re) .obbd>*:nth-child(3){animation-delay:.12s} .obm{display:flex;align-items:center;gap:14px;margin:6px 0 22px}.obc{width:96px;flex:none;animation:lgfl 3s ease-in-out infinite}.obc svg{width:100%;display:block} .obbb{position:relative;border:2px solid var(--bd);border-radius:18px;padding:14px 18px;font-size:20px;line-height:1.35;font-weight:700;background:var(--bg)} .obbb::before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;background:var(--bg);border:solid var(--bd);border-width:0 0 2px 2px;transform:translateY(-50%) rotate(45deg)} .obh{font-size:19px;font-weight:900;margin:0 0 12px}.obt1{font-size:28px;font-weight:900;margin:22px 0 22px;line-height:1.2} .obo{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--bg);color:var(--tx);border:2px solid var(--bd);border-radius:18px;padding:14px 16px;margin:0 0 12px;font-size:18px;box-shadow:0 3px 0 var(--bd);cursor:pointer;transition:transform .12s,background .15s,border-color .15s} .obo:hover{background:var(--pill)}.obo:active{transform:translateY(3px);box-shadow:0 0 0 var(--bd)} .obo.on{background:var(--sel);border-color:var(--selb);color:var(--selt);box-shadow:0 3px 0 var(--selb)} .obo b{flex:1;font-weight:900}.obi{font-size:30px;width:42px;display:flex;justify-content:center;align-items:center;flex:none}.obi .ic{width:32px;height:32px} .obe{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;flex:none;box-shadow:0 3px 0 rgba(0,0,0,.18)}.obe .ic{width:30px;height:30px;filter:brightness(0) invert(1)} .obx{width:28px;height:28px;border:2px solid var(--bd);border-radius:8px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;color:#fff;flex:none}.obo.on .obx{background:#1cb0f6;border-color:#1cb0f6} .obo.goal span{font-size:16px;opacity:.7;font-weight:800} .obo.big2{padding:18px 16px}.obtx{display:flex;flex-direction:column;flex:1}.obtx b{font-size:19px}.obtx small{font-size:15px;opacity:.7;font-weight:700;margin-top:2px} .obu{margin-top:6px}.obu>small{display:block;opacity:.65;margin:4px 2px 10px;font-weight:800}.obu .obo{padding:10px 14px;font-size:16px} .obs{display:flex;flex-direction:column;gap:12px}.obs div{display:flex;justify-content:space-between;gap:10px;align-items:center}.obs span{opacity:.6;font-size:15px}.obs b{text-align:right} .obn{text-align:center;opacity:.75;font-size:15.5px!important;margin:10px 0} .obf{position:sticky;bottom:0;background:var(--bg);padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--bd);margin:0 -18px;padding-left:18px;padding-right:18px} .obf .big:disabled{background:var(--lk);color:var(--lks);box-shadow:none;cursor:not-allowed} /* ===== 3D ===== */ canvas.c3l{display:block;touch-action:manipulation} .wl .hero .bob{width:250px;height:280px;animation:none;filter:none}.wl .hero .bob canvas{width:100%;height:100%;filter:drop-shadow(0 14px 14px rgba(0,0,0,.14))} .obc canvas{width:100%;aspect-ratio:200/230} .ph>canvas.c3l,.pv>canvas.c3l{position:absolute;inset:0;width:100%;height:100%;cursor:grab} .sadc canvas{width:100%;height:100%} .mid .em.c3em{width:300px;max-width:100%;height:240px;margin:0 auto;font-size:0;display:block;animation:none}.c3em canvas{width:100%;height:100%} .chb{width:300px;height:290px;margin-bottom:10px}.chb canvas{width:100%;height:100%} .chs{width:84px;height:80px}.chs .ic{width:80px;height:80px}.c3c{object-fit:contain} .deco{width:124px;top:-92px}.deco canvas.c3l{width:100%;aspect-ratio:1/1.05;cursor:pointer}.deco.lk canvas.c3l{filter:grayscale(1) opacity(.5)} .deco .c3l{filter:drop-shadow(0 4px 0 rgba(0,0,0,.05))} .nav-av svg.c3v,.lga>svg.c3v{overflow:visible} .wl h1.lgo{background:none;-webkit-text-fill-color:initial;color:inherit;animation:rise .6s both;line-height:0;margin:6px 0}.lgo img{width:min(320px,82vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}#splash img.lgsp{width:min(320px,82vw);animation:lgpop .7s cubic-bezier(.3,1.6,.5,1) both} .dqmob{display:block}@media(min-width:1240px){.dqmob{display:none}}.rc.dqc{padding:16px 18px} .tc{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;margin:6px 0 14px;text-align:left}.tc input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:#58a700}.tc a,.fine a{color:#1cb0f6;font-weight:800} .ts{display:flex;justify-content:center;margin:6px 0 10px}.ts:empty{display:none} /* ===================================================================== Pulido de interfaz (v7): barra lateral, iconos y panel derecho ===================================================================== */ .ni{--c:28,176,246;display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:15px; background:linear-gradient(150deg,rgba(var(--c),.26),rgba(var(--c),.09));border:1.5px solid rgba(var(--c),.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(var(--c),.12); transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .2s,box-shadow .2s,border-color .2s} .ni[data-k=prac]{--c:255,150,0}.ni[data-k=league]{--c:255,200,0}.ni[data-k=stats]{--c:88,204,2}.ni[data-k=me]{--c:206,130,255} .ni .nvi{width:36px;height:36px;display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18));transition:transform .25s cubic-bezier(.3,1.6,.5,1)} .ni .nav-av{margin:0;width:34px;height:37px} .nav button:hover .ni{transform:translateY(-1px)} .nav button:hover .ni .nvi{transform:scale(1.08) rotate(-3deg)} .nav button.on .ni{background:linear-gradient(150deg,rgba(var(--c),.55),rgba(var(--c),.22));border-color:rgba(var(--c),.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(var(--c),.38)} .nav button.on .ni .nvi{transform:scale(1.1)} .nav button.on .ic,.nav button.on .nav-lg{transform:none} .nav .nb{z-index:2} .cname{display:none} /* Celulares: la barra de abajo sin recuadros pesados */ @media(max-width:899px){ .ni{width:46px;height:38px;border-radius:12px;background:none;border-color:transparent;box-shadow:none} .ni .nvi{width:31px;height:31px} .ni .nav-av{width:30px;height:33px} .nav button.on .ni{background:none;border-color:transparent;box-shadow:none} .nav button.on .ni .nvi{transform:scale(1.14) translateY(-1px)} } /* Escritorio: barra lateral */ @media(min-width:900px){ .nav{--sb:252px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 60%,var(--pill) 100%);padding:100px 16px 24px;gap:8px;border-right:1.5px solid var(--bd);box-shadow:6px 0 24px rgba(0,0,0,.035)} .nav::after{content:"";position:absolute;left:20px;right:20px;top:84px;height:1.5px;background:linear-gradient(90deg,transparent,var(--bd),transparent)} .nav button{position:relative;gap:14px;padding:8px 12px 8px 8px;border-radius:18px;font-size:14px;letter-spacing:.9px;border:1.5px solid transparent; transition:background .2s,border-color .2s,transform .15s,box-shadow .2s} .nav button .nl{opacity:.82;transition:opacity .2s,letter-spacing .2s} .nav button:hover:not(.on){background:var(--pill);border-color:var(--bd)} .nav button:hover:not(.on) .nl{opacity:1} .nav button.on{background:linear-gradient(90deg,var(--sel),transparent 135%);border-color:var(--selb);box-shadow:0 3px 0 var(--selb)} .nav button.on .nl{opacity:1} .nav button.on::before{content:"";position:absolute;left:-17px;top:20%;bottom:20%;width:5px;border-radius:0 5px 5px 0;background:linear-gradient(180deg,#49c0f8,#1cb0f6)} .nav button:active{transform:scale(.97)} .nb{top:50%;right:14px;margin-top:-10px} :root{--sb:252px} } /* Escritorio ancho: panel derecho separado del borde y más prolijo */ @media(min-width:1240px){ :root{--rm:clamp(30px,3.4vw,72px);--rw:344px;--rp:calc(var(--rw) + var(--rm) + 24px)} .rcol{right:var(--rm);width:var(--rw);gap:16px} #v:has(>.nav) .top{right:var(--rm);width:var(--rw);top:24px;gap:10px;padding:14px;border-radius:24px; background:linear-gradient(180deg,var(--bg),var(--pill));border:1.5px solid var(--bd);box-shadow:0 8px 28px rgba(0,0,0,.07)} #v:has(>.nav) .top>span{display:flex;align-items:center;justify-content:center;height:46px;padding:0 12px!important;border-radius:15px;font-size:18px;font-variant-numeric:tabular-nums; box-shadow:inset 0 -2px 0 rgba(0,0,0,.05)} #v:has(>.nav) .top .cbtn{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;height:50px;padding:0 16px;border-radius:16px; font-size:15px;border:1.5px solid var(--bd);border-bottom-width:3px} #v:has(>.nav) .top .cbtn .cname{display:block;flex:1;min-width:0;text-align:left;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #v:has(>.nav) .top .cbtn:hover{border-color:var(--selb);background:var(--sel)} .rc{border-radius:22px;border:1.5px solid var(--bd);box-shadow:0 6px 22px rgba(0,0,0,.06);padding:20px 22px} .rh{padding-bottom:10px;margin-bottom:12px;border-bottom:1.5px solid var(--bd)} .rh b{font-size:17px;letter-spacing:.1px} .rcol{padding-bottom:36px} } @media(min-width:1480px){:root{--rw:376px}} @media(min-width:1240px) and (prefers-color-scheme:dark){ :root:not([data-theme=light]) .rc,:root:not([data-theme=light]) #v:has(>.nav) .top{box-shadow:0 8px 28px rgba(0,0,0,.35)} } :root[data-theme=dark] .rc,:root[data-theme=dark] #v:has(>.nav) .top{box-shadow:0 8px 28px rgba(0,0,0,.35)} #v:has(>.nav) .top .cbtn>.ic,.cbtn>.ic{position:static;flex:none;width:24px;height:24px;margin:0} /* ===================================================================== Nivel Legendario conseguido = oro con destello (máximo) · menú del nivel ===================================================================== */ .nd.done.gold{--c:#ffc800;--s:#c98300;overflow:hidden; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.75),transparent 45%),linear-gradient(150deg,#ffe98a 0%,#ffc800 52%,#f0a000 100%); box-shadow:0 7px 0 #c98300,0 10px 18px rgba(255,170,0,.28);filter:none} .nd.done.gold::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:46%;transform:skewX(-22deg);pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:ndShine 3.6s ease-in-out infinite} .nd.done.gold::before{content:"";position:absolute;top:9px;right:12px;width:11px;height:11px;pointer-events:none;background:#fff; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:ndTwinkle 3.6s ease-in-out infinite} @keyframes ndShine{0%,55%{left:-60%}100%{left:130%}} @keyframes ndTwinkle{0%,48%,100%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}75%{transform:scale(.4);opacity:.6}} .nd.done.gold:active{box-shadow:0 2px 0 #c98300} .nd .ndi{width:62%;height:62%;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));position:relative;z-index:1} #npop{position:absolute;z-index:15;box-sizing:border-box;padding:18px 18px 16px;border-radius:20px;color:var(--pt,#fff);background:var(--pc,#58cc02); box-shadow:0 5px 0 var(--ps,#46a302),0 14px 34px rgba(0,0,0,.22);animation:npIn .26s cubic-bezier(.3,1.5,.5,1) both;transform-origin:var(--ax,50%) 0} #npop::before{content:"";position:absolute;top:-9px;left:calc(var(--ax,50%) - 11px);width:22px;height:22px;background:var(--pc,#58cc02);border-radius:5px;transform:rotate(45deg)} @keyframes npIn{from{opacity:0;transform:translateY(-8px) scale(.92)}} #npop .npt{display:block;font-size:19px;font-weight:900;line-height:1.2;margin-bottom:4px;position:relative} #npop .nps{display:block;font-size:15px;font-weight:700;opacity:.92;margin-bottom:14px;position:relative} #npop .npb{position:relative;display:block;width:100%;padding:13px 10px;border-radius:14px;border:0;background:#fff;color:var(--pc,#58cc02);font:inherit;font-size:15px;font-weight:900;letter-spacing:.7px;text-transform:uppercase; box-shadow:0 4px 0 rgba(0,0,0,.18);cursor:pointer;transition:transform .1s,box-shadow .1s} #npop .npb:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)} #npop .npb+.npb{margin-top:12px} #npop .npb.npg{color:#7a4a00;background:linear-gradient(135deg,#ffe98a,#ffc800 60%,#ffb000);box-shadow:0 4px 0 #c98300;overflow:hidden} #npop .npb.npg::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:30%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:ndShine 3.2s ease-in-out infinite} #npop .npb.npg:active{box-shadow:0 1px 0 #c98300} #npop .npn{display:block;margin-top:10px;font-size:12.5px;font-weight:700;opacity:.85;text-align:center;position:relative} /* el menú se ve bien también en modo oscuro (colores propios) */ @media(min-width:900px){#npop{max-width:340px}} .path .nd.cur{margin-top:34px} /*GUIDE-START*/ /* ===== Guía con paneles y buscador ===== */ .zgw{padding:0 14px 120px} .zsm{font-size:14px;opacity:.85;line-height:1.45;margin:0 0 6px} .zside{display:none} .zgsr{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:8px 14px;margin:0 -14px} .zgin{display:flex;align-items:center;gap:8px;border:2px solid var(--bd);border-bottom-width:4px;border-radius:16px;padding:6px 8px 6px 14px;background:var(--bg);cursor:text} .zgin:focus-within{border-color:#1cb0f6} .zgin input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--tx);font:inherit;font-size:16px;font-weight:800;padding:6px 0;-webkit-appearance:none;appearance:none} .zgin input::placeholder{opacity:.5} .zgin input::-webkit-search-cancel-button{display:none} .zx{width:28px;height:28px;border-radius:50%;background:var(--bd);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;padding:0;color:var(--tx)} .zx[hidden]{display:none} .ztool{display:flex;gap:8px;margin:8px 0 2px;flex-wrap:wrap;align-items:center} .ztool .chip{font-size:13px;padding:6px 12px}.ztool .zsp{flex:1}.ztool small{opacity:.7;font-size:13px} .zjump{display:flex;gap:6px;margin:8px -14px 0;padding:0 14px 4px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.zjump::-webkit-scrollbar{display:none}.zjump .chip{flex:none} .zjump .chip{font-size:12.5px;padding:5px 10px;border-bottom-width:3px} .zres{font-size:14px;margin:10px 2px 0;opacity:.95;line-height:1.7}.zres[hidden]{display:none}.zres b{color:#e0a800} .zres .chip{font-size:13px;padding:3px 10px;border-bottom-width:3px;margin-left:2px} .zpn{border:2px solid var(--bd);border-bottom-width:4px;border-radius:18px;margin:12px 0;background:var(--bg);overflow:hidden;scroll-margin-top:84px} .zpn.zopen{border-color:var(--c,#1cb0f6)} .zph3{display:flex;align-items:center;gap:12px;padding:13px 14px;width:100%;background:none;text-align:left;font-family:inherit;color:var(--tx)} .zpi{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--c,#1cb0f6);flex:none;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)} .zpt{flex:1;min-width:0}.zpt b{display:block;font-size:17px;font-weight:900;color:var(--tx)}.zpt small{display:block;font-size:12.5px;opacity:.65;line-height:1.3;margin-top:1px;font-weight:700} .zpc{font-size:12px;border-radius:10px;padding:2px 8px;background:var(--pill);font-weight:900;flex:none;white-space:nowrap}.zpc[hidden]{display:none} .zcv{width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);margin:0 4px 4px 4px;opacity:.6;flex:none;transition:transform .2s} .zpn.zopen .zcv{transform:rotate(-135deg);margin-bottom:-4px} .zpb{display:none;padding:12px 14px 14px;font-size:16px;line-height:1.5;border-top:2px dashed var(--bd)} .zpn.zopen .zpb{display:block} .zpb .card{margin:10px 0} .zpb .card:first-child{margin-top:0} .zsub{font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;opacity:.65;margin:14px 2px 6px} .zgrp:first-child .zsub{margin-top:2px} .zex{display:flex;gap:10px;border:2px solid var(--bd);border-radius:14px;padding:10px 12px;margin:9px 0;background:var(--pill)} .zex .zn,.zejh .zn{width:26px;height:26px;border-radius:50%;background:#1cb0f6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex:none;margin-top:1px} .zex .zt{font-size:15.5px;line-height:1.4;min-width:0}.zex .zt b{font-size:16px;color:var(--tx)}.zex .zt i{display:block;font-style:normal;opacity:.8;font-size:14px;margin-top:3px} .zgo{display:inline-block;margin-top:6px;font-size:12px;font-weight:900;color:#1cb0f6;background:var(--bg);border:2px solid var(--bd);border-bottom-width:3px;border-radius:10px;padding:3px 9px;font-family:inherit} .zgo::after{content:attr(data-t)} .zex.zhot{border-color:#ffc800;background:rgba(255,200,0,.08)} .zex.zhot .zn{background:#ffc800;color:#4a3500} .ztag{display:inline-block;font-size:11px;font-weight:900;border-radius:8px;padding:1px 7px;margin-left:6px;vertical-align:1px;text-transform:uppercase;letter-spacing:.4px} .ztag.zlg{background:#ffc800;color:#4a3500}.ztag.znm{background:#1cb0f6;color:#fff} .zvo{display:grid;grid-template-columns:1fr;gap:9px} .zvt{border:2px solid var(--bd);border-radius:14px;padding:9px 12px;background:var(--pill)} .zvt b{color:#a65fe0;font-size:16px}.zvt p{margin:3px 0 0;font-size:15px;line-height:1.4} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .zvt b{color:#ce82ff}} :root[data-theme="dark"] .zvt b{color:#ce82ff} .zej{border:2px solid var(--bd);border-radius:14px;padding:10px 12px;margin:10px 0;background:var(--bg)} .zejh{display:flex;align-items:center;gap:10px}.zejh .zn{background:#58cc02;margin-top:0}.zejh b{font-size:16px;color:var(--tx)} .zstp{counter-reset:s;margin:8px 0 0;padding:0;list-style:none} .zstp li{counter-increment:s;display:flex;gap:10px;margin:8px 0;font-size:15.5px;line-height:1.45} .zstp li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:#58cc02;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex:none;margin-top:1px} .zstp li span{min-width:0;overflow-wrap:anywhere} .zres2{margin-top:10px;background:var(--gl);color:var(--gt);border-radius:12px;padding:8px 12px;font-size:15px;font-weight:800;line-height:1.4;overflow-wrap:anywhere} .zflash{animation:zfl 1.8s ease-out}@keyframes zfl{0%,55%{box-shadow:0 0 0 4px #ffc800}100%{box-shadow:0 0 0 0 rgba(255,200,0,0)}} mark.zmk{background:#ffc800;color:#222;border-radius:4px;padding:0 2px} .zhid{display:none!important} .zsrch .zsm{display:none} .zpn.zno{opacity:.5}.zpn.zno .zph3{padding:9px 14px}.zpn.zno .zpi{width:28px;height:28px;font-size:14px;border-radius:9px;box-shadow:none;background:var(--bd)} .zpn.zno .zpt b{font-size:14.5px;font-weight:800}.zpn.zno .zpt small{display:none}.zpn.zno .zpb{display:none!important} .zcta{position:fixed;bottom:0;left:0;right:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:2px solid var(--bd);z-index:9} .zcta .big{display:block;max-width:520px;margin:0 auto} @media(min-width:900px){ #v:has(.zgw){max-width:1020px} .zgw{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start;padding-bottom:110px} .zside{display:block;position:sticky;top:12px} .zsd{border:2px solid var(--bd);border-bottom-width:4px;border-radius:18px;padding:12px;background:var(--bg)} .zsd>b{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.6px;opacity:.65;margin:2px 6px 6px} .zit2{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;font-size:14.5px;margin:3px 0;font-weight:800;background:none;text-align:left;font-family:inherit;color:var(--tx)} .zit2:hover{background:var(--sel);color:var(--selt)}.zit2 i{font-style:normal;width:24px;text-align:center} .zjump{display:none} .zvo{grid-template-columns:1fr 1fr} .zcta .big{max-width:380px} } /*GUIDE-END*/ /*PAGOS*/ .plr{display:flex;gap:10px;margin:14px 0}.plc{flex:1;position:relative;border:2px solid var(--bd);border-radius:18px;background:var(--bg);color:var(--tx);padding:20px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--bd);transition:transform .12s,border-color .15s,background .15s} .plc b{font-size:16px;font-weight:900}.plc .plp{font-size:22px;font-weight:900}.plc small{opacity:.7;font-weight:800} .plc.on{border-color:#ce82ff;background:color-mix(in srgb,#ce82ff 14%,var(--bg));box-shadow:0 3px 0 #a568cc;transform:translateY(-1px)} .plb{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#ffc800;color:#7a4a00;font-size:11px;font-weight:900;border-radius:20px;padding:3px 10px;white-space:nowrap;box-shadow:0 2px 0 #c98300} .plst{margin:14px 0;text-align:center}.pm .fine{display:block;opacity:.7;margin:10px 0 2px;font-size:12px;line-height:1.4}.pm .er{min-height:18px;margin-top:8px} /*VIDAS*/ .top>span.hrt{cursor:pointer} .top .i-heart{animation:hbeat 1.8s ease-in-out infinite;transform-origin:50% 60%} @keyframes hbeat{0%,26%,100%{transform:scale(1)}12%{transform:scale(1.16)}} @media(max-width:480px){.top>span{font-size:14px;padding:4px 8px 4px 6px;gap:4px}.top .cbtn{font-size:14px;padding:6px 8px}.cname{display:none}} .lt .hrt{display:inline-flex;align-items:center;gap:5px;font-weight:900;margin-right:10px;color:#ff4b4b} .lost{background:var(--rl);color:var(--rt);border-radius:12px;padding:8px 12px;margin:8px 0 4px;font-weight:900;animation:lshk .45s} @keyframes lshk{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}} .lvc{text-align:center}.lvh{display:flex;justify-content:center;gap:8px;margin-bottom:8px}.lvh .ic{width:40px;height:40px}.lvh .off .ic{filter:grayscale(1) opacity(.3)} .lvc b{font-size:19px} .lvi{display:flex;align-items:center;gap:14px;padding:14px 2px;border-top:2px solid var(--bd)} .lvi>.ic{width:54px;height:54px;flex:none}.lvi>div{flex:1;min-width:0}.lvi b{font-size:17px}.lvi p{margin:2px 0 0;font-size:14px;opacity:.8;line-height:1.35;font-weight:700} .lvb{border:2px solid var(--bd);border-bottom-width:4px;background:var(--bg);border-radius:14px;padding:10px 14px;font-weight:900;color:var(--selt);white-space:nowrap;font-size:15px} .lvb:disabled{opacity:.45;cursor:default}.lvb.pr{color:#b865ff} .eqp{display:inline-block;margin-top:6px;background:var(--pill);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:900;opacity:.9} .pmb{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(90deg,#ce82ff,#8b5cf6);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:900;margin-left:8px;vertical-align:middle;white-space:nowrap} .pml{background:rgba(206,130,255,.14);border:2px dashed #ce82ff;border-radius:12px;padding:8px 12px;margin:10px 0 0!important;font-size:15px!important} .mid.dead .big{margin-top:10px;max-width:340px;width:100%}.mid.dead .em .ic{width:96px;height:96px} .lvshop .shh{padding:18px 2px 4px;margin:0} .lvi p b{font-size:inherit} .lt>#gem,.lt>#wal{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px 5px 9px;font-size:17px} @media(max-width:480px){.lvshop~*,.chips .chip{padding:8px 10px;font-size:14px}} /*GEMAS*/ .gbal{text-align:center;display:flex;flex-direction:column;gap:2px}.gbal b{font-size:30px} .gpl{display:flex;flex-direction:column;gap:12px;margin:14px 0} .gpk{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--bg);border:2px solid var(--bd);border-bottom-width:5px;border-radius:18px;padding:16px 14px} .gpk.on{border-color:#ce82ff;background:rgba(206,130,255,.12)} .gpi .ic{width:46px;height:46px}.gpt{flex:1;display:flex;flex-direction:column}.gpt b{font-size:21px}.gpt small{opacity:.75;font-weight:700;font-size:13px} .gpp{font-weight:900;font-size:19px;color:var(--selt)} .gpk .plb{top:-12px;left:auto;right:14px;transform:none} .chips{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chips .chip{flex:none} /*GEMAS2*/ .gbal .gsum{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:4px 0 2px} .gcur{font-size:30px}.gplus{font-size:20px;font-weight:900;color:#fff;background:linear-gradient(90deg,#58cc02,#46a302);border-radius:999px;padding:3px 12px;animation:gpop .38s cubic-bezier(.3,1.6,.5,1)} .geq{font-size:22px;font-weight:900;opacity:.9}.geq b{font-size:30px;color:#ce82ff;display:inline-block;animation:gpop .38s cubic-bezier(.3,1.6,.5,1)} @keyframes gpop{from{transform:scale(.6);opacity:0}} .gtot{display:block;margin-top:4px;font-weight:800;opacity:.8} .gfp{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid #ce82ff;border-bottom-width:5px;background:rgba(206,130,255,.12);border-radius:16px;padding:12px 14px;margin:14px 0 12px} .gfp .gpi .ic{width:42px;height:42px;animation:none}.gfp .gpt b{font-size:19px}.gfp .gpp{font-size:18px} .tbuy{display:inline-block;margin-top:10px;background:#ce82ff;color:#fff;border:0;border-radius:12px;padding:9px 20px;font-weight:900;font-size:14px;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 4px 0 #a568cc;cursor:pointer} .tbuy:hover{filter:brightness(1.07)}.tbuy:active{transform:translateY(3px);box-shadow:0 1px 0 #a568cc} /*GEMAS3*/ .pm .nx.gl{color:#1cb0f6;padding:10px}.pm .nx.gn{color:var(--tx);opacity:.65;padding:8px}.pm .nx.gl:hover,.pm .nx.gn:hover{text-decoration:underline} /*HIST*/ .hq .hchips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px} .hph{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;border-radius:10px;padding:5px 10px} .hph.g,.hph.lg{background:rgba(255,200,0,.2);color:#9a6a00}.hph.u{background:var(--sel);color:var(--selt)}.hph.rt{background:var(--rl);color:var(--rt)} :root[data-theme="dark"] .hph.g,:root[data-theme="dark"] .hph.lg{color:#ffc800} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hph.g,:root:not([data-theme="light"]) .hph.lg{color:#ffc800}} .hfree{font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;background:var(--sel);color:var(--selt);border-radius:10px;padding:5px 9px} .hcard{border:2px solid var(--bd);border-bottom-width:5px;border-radius:22px;overflow:hidden;background:var(--card);text-align:left} .hdate{position:relative;overflow:hidden;padding:26px 18px 22px;text-align:center;background:linear-gradient(135deg,#3b9ae1,#6bb7ee)} .hdate::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 120%,rgba(255,200,0,.38) 0 6deg,transparent 6deg 12deg)} .hdate span{position:relative;display:inline-block;background:var(--bg);color:var(--tx);border:2px solid var(--bd);border-radius:12px;padding:6px 14px;font-weight:900;font-size:clamp(16px,5vw,22px)} .htr .hdate span{font-size:34px;padding:6px 18px} .hbody{padding:18px 18px 22px} .hbody .hk{display:block;font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;opacity:.6} .hbody h2{font-size:26px;font-weight:900;margin:6px 0 10px;line-height:1.15} .hbody p{font-size:18px;line-height:1.55;margin:0} .hbody b{font-weight:900;background:linear-gradient(transparent 62%,rgba(255,200,0,.38) 62%)} .hq{padding-bottom:300px} .hrv{text-align:left!important}.hrv .big{margin-top:14px} .hsl{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px} .hsl li{display:flex;align-items:center;gap:10px;min-height:54px} .hn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sel);color:var(--selt);display:grid;place-items:center;font-weight:900;font-size:14px} .hph0{flex:1;height:54px;border:2px dashed var(--bd);border-radius:14px} .hchip,.hmi{flex:1;text-align:left;background:var(--card);color:var(--tx);border:2px solid var(--bd);border-bottom-width:4px;border-radius:14px;padding:12px 14px;font-weight:700;font-size:16px;font-family:inherit;cursor:pointer;line-height:1.3} .hchip:active,.hmi:active{transform:translateY(2px)} .hchip.put{border-color:var(--selb);background:var(--sel);color:var(--selt)} .hchip.put.ok,.hmi.ok{background:var(--gl);border-color:#58cc02;color:var(--gt)} .hchip.put.no,.hmi.no{background:var(--rl);border-color:#ff4b4b;color:var(--rt)} .hchip:disabled,.hmi:disabled{cursor:default} .hpool{display:grid;gap:8px}.hpool .hchip{width:100%} .hmt{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hcol{display:grid;gap:10px;align-content:start} .hmi{text-align:center;min-height:58px;display:flex;align-items:center;justify-content:center} .hmi.sel{border-color:var(--selb);background:var(--sel);color:var(--selt)} .hmi.pr.c0{border-color:#1cb0f6;background:rgba(28,176,246,.15)}.hmi.pr.c1{border-color:#ce82ff;background:rgba(206,130,255,.17)} .hmi.pr.c2{border-color:#ff9600;background:rgba(255,150,0,.16)}.hmi.pr.c3{border-color:#58cc02;background:rgba(88,204,2,.16)} .hmi.pr.ok{background:var(--gl);border-color:#58cc02}.hmi.pr.no{background:var(--rl);border-color:#ff4b4b} .fb .hwhy{margin:8px 0 10px;font-weight:700;font-size:15px;line-height:1.4;color:var(--tx)} .fb .hrev{margin-bottom:10px} .fb .msg.hlong{flex-wrap:wrap}.fb .msg.hlong span{flex-basis:100%;font-size:15px;line-height:1.35;margin-top:2px} .crs.soon{opacity:.65;border-style:dashed;cursor:default}.cb.soon{background:var(--lks)} /*UGOLD*/ .ban.ugold{position:relative;overflow:hidden} .ban.ugold h2,.ban.ugold small{color:#5a3600;text-shadow:0 1px 0 rgba(255,255,255,.45)} .ban.ugold .gb{background:rgba(255,255,255,.55);color:#5a3600;box-shadow:0 3px 0 rgba(120,76,0,.35)} .ban.ugold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:ugsh 4.5s ease-in-out infinite} @keyframes ugsh{0%,70%{left:-60%}100%{left:130%}} @media (prefers-reduced-motion:reduce){.ban.ugold::after{animation:none;display:none}} /*HREC*/ .hph.rc{background:rgba(206,130,255,.18);color:#7b3fb0} :root[data-theme="dark"] .hph.rc{color:#dcb3ff} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hph.rc{color:#dcb3ff}} /*SPK*/ .spk.on{background:#1cb0f6;color:#fff;border-color:#1899d6;animation:spkp 1s ease-in-out infinite} @keyframes spkp{50%{transform:scale(1.06)}} @media(prefers-reduced-motion:reduce){.spk.on{animation:none}} /*HBG*/ body.his{background-color:var(--bg);background-image:radial-gradient(ellipse 65% 42% at 0 0,rgba(116,172,223,.20),transparent 70%),radial-gradient(ellipse 55% 40% at 100% 6%,rgba(246,180,14,.14),transparent 70%),radial-gradient(ellipse 70% 45% at 50% 108%,rgba(176,122,62,.16),transparent 70%),linear-gradient(rgba(150,110,60,.10) 1px,transparent 1px);background-size:auto,auto,auto,100% 34px;background-attachment:fixed} body.his #dc span{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;color:#8a5a28;opacity:.09} :root[data-theme="dark"] body.his #dc span{color:#e8c48a;opacity:.07} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body.his #dc span{color:#e8c48a;opacity:.07}}