/* Estilos generales: fondo, tarjetas, botones, partida, pasaporte, logros, ventana emergente */
:root{--bg:#fff;--card:#fff;--ink:#3c3c3c;--mute:#777;--line:#e5e5e5;--green:#58cc02;--greend:#58a700;--blue:#1cb0f6;--blued:#1899d6;--red:#ff4b4b;--redd:#ea2b2b;--yel:#ffc800;--org:#ff9600;--sky1:#d9f2ff;--sky2:#ffffff;--dot:rgba(28,176,246,.28);--flagop:.5;color-scheme:light;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;--card:#1f2c33;--ink:#f1f7fb;--mute:#8fa3ad;--line:#37464f;--sky1:#0f3042;--sky2:#131f24;--dot:rgba(143,163,173,.2);--flagop:.3;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#131f24;--card:#1f2c33;--ink:#f1f7fb;--mute:#8fa3ad;--line:#37464f;--sky1:#0f3042;--sky2:#131f24;--dot:rgba(143,163,173,.2);--flagop:.3;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;min-height:100vh;padding:24px 16px 40px;display:flex;justify-content:center;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--sky1),var(--sky2) 60%)}
.bg:before{content:"";position:absolute;inset:0;background:radial-gradient(var(--dot) 2px,transparent 2.5px) 0 0/26px 26px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);animation:dots 24s linear infinite}
@keyframes dots{to{background-position:26px 26px}}
.bg i{position:absolute;width:var(--w);aspect-ratio:3/2;border-radius:6px;opacity:var(--flagop);box-shadow:0 6px 14px -6px rgba(0,0,0,.35);transform:rotate(var(--r));animation:drift var(--d) ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(26px,-48px) rotate(calc(var(--r)*-1))}}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:58;pointer-events:none}
.fxdetras{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{width:100%;max-width:440px;margin:auto 0;position:relative}
#cov{text-align:center;margin-bottom:26px}
#cov h1{margin:0;font-size:2.7rem;font-weight:900;line-height:1;letter-spacing:-1px;color:var(--ink);animation:rise .6s cubic-bezier(.2,1,.3,1) both}
.stripe{display:flex;justify-content:center;gap:5px;margin:14px 0 0;animation:rise .6s .1s cubic-bezier(.2,1,.3,1) both}
.stripe i{width:34px;height:5px;border-radius:3px}
.stripe i:nth-child(1){background:var(--green)}.stripe i:nth-child(2){background:var(--blue)}.stripe i:nth-child(3){background:var(--yel)}.stripe i:nth-child(4){background:var(--red)}
/* Mini logo mientras se descargan los scripts (se quita solo: script junto a #carga en index.html) */
#carga{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);transition:opacity .2s}
#carga.fuera{opacity:0;pointer-events:none}
#carga b{font-size:2.7rem;font-weight:900;line-height:1;letter-spacing:-1px;color:var(--ink)}
#carga .stripe{animation:none}
#carga .stripe i{animation:cargaBarra 1s ease-in-out infinite}
#carga .stripe i:nth-child(2){animation-delay:.12s}#carga .stripe i:nth-child(3){animation-delay:.24s}#carga .stripe i:nth-child(4){animation-delay:.36s}
@keyframes cargaBarra{0%,100%{opacity:.3}40%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
#cov p{margin:10px 0 0;color:var(--mute);font-size:1.05rem}
.menu{display:flex;flex-direction:column;gap:16px}
button{font:inherit;font-weight:800;font-size:1rem;letter-spacing:.8px;text-transform:uppercase;padding:14px 16px;border-radius:16px;border:2px solid var(--line);border-bottom-width:5px;background:var(--card);color:var(--blue);cursor:pointer;flex:1;transition:transform .08s,filter .15s}
button:hover{filter:brightness(1.07)}
button:active{transform:translateY(3px);border-bottom-width:2px}
button.p{background:var(--green);border-color:var(--green) var(--green) var(--greend);color:#fff}
button.b{background:var(--blue);border-color:var(--blue) var(--blue) var(--blued);color:#fff}
button.big{padding:18px 16px;font-size:1.15rem}
button:disabled{opacity:.5;cursor:default;filter:grayscale(.6)}
.tipbtn{position:relative}
.tipbtn:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:min(280px,80vw);background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:14px;font-size:.85rem;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none;text-align:left;opacity:0;pointer-events:none;transition:.15s;z-index:5;white-space:normal}
.tipbtn:hover:after,.tipbtn:focus-visible:after{opacity:1;transform:translateX(-50%)}
.enter{animation:enter .55s cubic-bezier(.2,1.3,.4,1)}
@keyframes enter{from{opacity:0;transform:translateY(34px) scale(.92)}}
.hud{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px}
.pill{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 12px;font-weight:900;min-width:70px;text-align:center}
.pill:empty{visibility:hidden}
.lives{color:var(--red);letter-spacing:3px;font-size:1.05rem}.lives i{font-style:normal;opacity:.22}
#streak{color:var(--org)}
#score:before{content:"";display:inline-block;width:1.05em;height:1.05em;vertical-align:-.2em;margin-right:.25em;background:var(--starimg) center/contain no-repeat}
.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.3) rotate(-4deg)}}
.bar{height:16px;background:var(--line);border-radius:10px;overflow:hidden;margin-bottom:22px}
#t{height:100%;width:100%;background:var(--green);border-radius:10px;position:relative}
#t:after{content:"";position:absolute;left:8px;right:8px;top:4px;height:4px;border-radius:3px;background:rgba(255,255,255,.35)}
.bar.hot #t{background:var(--red);animation:pulse .4s infinite alternate}
@keyframes pulse{to{filter:brightness(1.25)}}
.flagwrap{position:relative;background:var(--card);border:2px solid var(--line);border-bottom-width:7px;border-radius:24px;padding:12px;transition:border-color .3s}
.fire .flagwrap{border-color:var(--org);animation:fire .5s infinite alternate}
@keyframes fire{from{box-shadow:0 0 0 4px rgba(255,150,0,.25),0 0 36px rgba(255,150,0,.55)}to{box-shadow:0 0 0 8px rgba(255,150,0,.12),0 0 60px rgba(255,200,0,.85)}}
.flag{line-height:0;position:relative;overflow:hidden;border-radius:14px;background:transparent}
.flag.in{animation:flagin .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes flagin{0%{opacity:0;transform:translateY(-120px) rotate(-10deg) scale(.6)}60%{opacity:1;transform:translateY(8px) rotate(2deg)}100%{transform:none}}
.flag svg{width:100%;height:auto;display:block;transform-origin:center center;animation:wave 4.5s ease-in-out infinite}
.flag:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 48%,transparent 66%);background-size:250% 100%;animation:shine 4.5s ease-in-out infinite}
@keyframes wave{0%,100%{transform:perspective(500px) rotateY(-5deg) skewY(0) scale(1.1)}50%{transform:perspective(500px) rotateY(3deg) skewY(1.4deg) scale(1.1)}}
@keyframes shine{0%{background-position:120% 0}100%{background-position:-60% 0}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translate(-10px,3px) rotate(-1.5deg)}40%{transform:translate(9px,-3px) rotate(1.2deg)}60%{transform:translate(-6px,2px)}80%{transform:translate(4px,-1px)}}
.ink{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) rotate(-6deg);padding:8px 24px;border-radius:16px;font-size:1.7rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;opacity:0;pointer-events:none;color:#fff;border-bottom:6px solid}
.ink.ok{background:var(--green);border-color:var(--greend)}.ink.no{background:var(--red);border-color:var(--redd)}
.ink.go{animation:pop .45s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(1.9)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1)}}
.float{position:fixed;z-index:60;pointer-events:none;font-size:2.4rem;font-weight:900;animation:floatup 1.1s ease-out forwards}
.float.no{color:#ff4b4b;-webkit-text-stroke:2px #fff;paint-order:stroke fill}
.float.ok{color:var(--green);-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 4px 0 var(--greend)}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-20%) scale(.4)}20%{opacity:1;transform:translate(-50%,-90%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-300%) scale(1)}}
.flash:before{content:"";position:fixed;inset:0;z-index:40;background:var(--red);pointer-events:none;animation:flash .4s forwards}
@keyframes flash{0%{opacity:.3}100%{opacity:0}}
input{width:100%;margin-top:26px;padding:15px 20px;font:inherit;font-weight:800;font-size:1.3rem;text-align:center;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:16px;outline:0}
input:focus{border-color:var(--blue)}
input::placeholder{color:var(--mute);font-weight:700}
.row{display:flex;gap:12px;margin-top:16px}
#msg{min-height:1.5em;text-align:center;margin-top:14px;color:var(--mute);font-weight:800}
.card{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:20px;margin-top:26px}
.c{text-align:center}.mute{color:var(--mute)}
#end{margin-top:0;padding:30px 22px}
#end .emo{font-size:4rem;line-height:1;animation:drop .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes drop{from{opacity:0;transform:translateY(-80px) rotate(-30deg)}}
#end h2{font-size:2rem;font-weight:900;color:var(--red);margin:6px 0 0}
.big2{font-size:3.4rem;font-weight:900;margin:6px 0;color:var(--org)}
h2{margin:0;font-size:1.2rem;font-weight:900}
.prog{height:14px;background:var(--line);border-radius:9px;overflow:hidden;margin-top:12px}
.prog i{display:block;height:100%;width:0;background:var(--green);border-radius:9px;transition:width .5s}
summary.cat{list-style:none;cursor:pointer;display:flex;justify-content:center;gap:8px;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:10px 12px;margin-top:16px;color:var(--blue);text-transform:uppercase;letter-spacing:.8px;font-weight:800;user-select:none}
summary.cat::-webkit-details-marker{display:none}
.arr{display:inline-block;transition:transform .2s}details[open] .arr{transform:rotate(180deg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:14px 10px;margin-top:16px}
.cell{aspect-ratio:4/3;border-radius:10px;overflow:hidden;position:relative;line-height:0;border:2px solid var(--line)}
.cell svg{width:100%;height:100%;display:block}
.cell.lock svg{filter:grayscale(1);opacity:.3}
.cell.lock:after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-size:1.2rem;font-weight:900;color:var(--mute);line-height:1}
.cell.new{border-color:var(--yel);animation:bump .8s 2}
.cap{font-size:.7rem;font-weight:800;text-align:center;margin-top:5px;line-height:1.2;color:var(--mute)}
.seglabel{text-align:center;color:var(--mute);font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;font-weight:800}
.seg{display:flex;gap:8px;margin:0 0 20px}
.seg button{font-size:.9rem;padding:10px 6px;border-radius:14px;border-bottom-width:4px;color:var(--mute)}
.seg button.sel{background:var(--yel);border-color:var(--yel) var(--yel) #e5a800;color:#3c3c3c}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.count{min-width:0;padding:6px 12px;font-size:.85rem;color:var(--mute)}
.left{font-size:.85rem;margin-top:8px;font-weight:800}
#end.win h2{color:var(--green)}
.back{flex:none;width:auto;padding:6px 14px;font-size:.8rem;border-radius:12px;border-bottom-width:4px;color:var(--mute)}
h3.tier{margin:18px 0 0;font-size:.95rem;font-weight:900;text-transform:uppercase;letter-spacing:1px}
h3.tier:first-child{margin-top:6px}
.badge{--hex:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);position:relative;isolation:isolate;display:grid;place-items:center;width:var(--s,60px);height:var(--s,60px);flex:none;color:var(--ink)}
.badge .hex{position:absolute;inset:0;clip-path:var(--hex);background:linear-gradient(150deg,var(--c1),var(--c2))}
.badge .hex:before{content:"";position:absolute;inset:9%;clip-path:var(--hex);background:linear-gradient(330deg,var(--c1),var(--c2))}
.badge .hex:after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0}
.badge .ic{position:relative;width:52%;height:52%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}
.t0{--c1:var(--line);--c2:var(--line);--ink:var(--mute);opacity:.75}
.t1{--c1:#f2b983;--c2:#b8692b;--ink:#6b3a12}
.t2{--c1:#f7f9fc;--c2:#9aa7ba;--ink:#46536a}
.t3{--c1:#ffe680;--c2:#f0a800;--ink:#7a4400}
.t2 .hex:after,.t3 .hex:after{opacity:1;animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%,25%{background-position:130% 0}75%,100%{background-position:-40% 0}}
.badge.t3{filter:drop-shadow(0 0 7px rgba(255,190,0,.7))}
.badge.t3:before{content:"";position:absolute;inset:-24%;z-index:-1;border-radius:50%;background:repeating-conic-gradient(rgba(255,205,50,.6) 0 7deg,transparent 7deg 22deg);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 68%);mask-image:radial-gradient(circle,#000 30%,transparent 68%);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shelf{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.lv{font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.8px;margin-left:6px;padding:2px 7px;border-radius:8px;color:#fff;vertical-align:middle}
.lv.l1{background:#b8692b}.lv.l2{background:#8e9bb0}.lv.l3{background:#e5a800}.lv.l4{background:#1fb4ec}
.toast{position:fixed;left:50%;top:12px;z-index:70;transform:translate(-50%,-170%);display:flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;background:var(--card);border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.2,1.4,.4,1);pointer-events:none;width:max-content;max-width:92vw}
.toast.show{transform:translate(-50%,0)}
.toast:empty{display:none}
.toast small{display:block;white-space:nowrap;color:var(--mute);font-size:.68rem;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.toast b{font-size:1rem;white-space:nowrap}
#achs .left{margin-top:8px}
.t4{--c1:#e8fbff;--c2:#38bdf8;--ink:#0b4d73}
.t4 .hex{background:conic-gradient(from 20deg,#a8ecff,#2fb8f5,#ffffff,#0f8fd8,#a8ecff,#5bd0ff,#ffffff,#1ca4e6,#a8ecff)}
.t4 .hex:before{background:conic-gradient(from 200deg,#ffffff,#8fe9ff,#e8fbff,#38bdf8,#ffffff,#7fe6ff,#e8fbff,#5fd4ff,#ffffff)}
.t4 .hex:after{opacity:1;animation:sweep 2.4s ease-in-out infinite}
.badge.t4{filter:drop-shadow(0 0 6px rgba(30,160,235,.7))}
.badge.t4:before{content:"";position:absolute;inset:-26%;z-index:-1;border-radius:50%;background:repeating-conic-gradient(rgba(110,215,255,.6) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 28%,transparent 68%);mask-image:radial-gradient(circle,#000 28%,transparent 68%);animation:spin 9s linear infinite}
.badge.t4:after{content:"";position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(circle,#fff 0 30%,transparent 72%) 6% 12%/9px 9px no-repeat,radial-gradient(circle,#fff 0 30%,transparent 72%) 94% 22%/7px 7px no-repeat,radial-gradient(circle,#fff 0 30%,transparent 72%) 78% 94%/8px 8px no-repeat,radial-gradient(circle,#fff 0 30%,transparent 72%) 14% 84%/6px 6px no-repeat;animation:twinkle 1.6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.1;transform:scale(.8)}to{opacity:1;transform:scale(1.06)}}
.lv.l0{background:var(--mute)}
.agrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 6px;margin-top:16px}
button.ab{border:0;background:none;padding:4px 0;border-radius:14px;flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font-size:.6rem;font-weight:800;color:var(--mute);filter:none;min-width:0}
button.ab>span:not(.badge){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.ab:hover{filter:none;transform:translateY(-3px)}
button.ab:active{transform:scale(.92)}
.modal{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:20px;background:rgba(10,20,30,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mfade .25s both}
.modal.closing{animation:mfade .2s reverse both}
/* Con una ventana abierta, el fondo animado (puntos, banderas, murciélagos) se pausa: si se mueve, el desenfoque se recalcula en cada fotograma y la ventana va a tirones */
body:has(#modal:not([hidden])) .bg,body:has(#modal:not([hidden])) .bg *,body:has(#modal:not([hidden])) .bg:before,body:has(#modal:not([hidden])) .bg:after{animation-play-state:paused}
@keyframes mfade{from{opacity:0}}
.mcard{position:relative;width:min(360px,100%);max-height:92vh;overflow:auto;background:var(--card);border:2px solid var(--line);border-bottom-width:6px;border-radius:26px;padding:26px 20px 22px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);animation:mpop .5s cubic-bezier(.2,1.4,.4,1) backwards}   /* backwards: al acabar la entrada no se queda la animación puesta (con ella, el contenido se redibujaba peor al desplazar) */
.modal.closing .mcard{animation:mpop .2s ease-in reverse both}
@keyframes mpop{from{opacity:0;transform:translateY(46px) scale(.72) rotate(-3deg)}}
button.mx{position:absolute;top:10px;right:10px;width:36px;height:36px;padding:0;border-radius:50%;flex:none;font-size:1rem;color:var(--mute);border-bottom-width:4px}
.mbadge{display:flex;justify-content:center;margin:14px 0 20px}
.mbadge .badge{animation:badgein .9s cubic-bezier(.2,1.3,.4,1) .15s both}
@keyframes badgein{from{opacity:0;transform:scale(.2) rotate(-200deg)}}
.mcard h3{margin:0;font-size:1.5rem;font-weight:900}
.mcard .lv{display:inline-block;margin:8px 0 0;font-size:.72rem;padding:3px 10px}
.mds{margin:12px 0 0;color:var(--mute);font-size:.95rem}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:22px 0 4px}
.rung{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.7rem;font-weight:800;color:var(--mute);animation:rung .5s ease-out both;animation-delay:calc(.35s + var(--k)*.12s)}
.rung.on{color:var(--ink)}
@keyframes rung{from{opacity:0;transform:translateY(14px) scale(.8)}}
.mcard .pr{height:12px;background:var(--line);border-radius:8px;overflow:hidden;margin-top:20px}
.mcard .pr i{display:block;height:100%;width:0;background:var(--blue);border-radius:8px;transition:width 1s cubic-bezier(.2,.8,.2,1) .7s}
.mcard .pp{margin-top:9px;font-weight:800;font-size:.9rem}
.mcard .ex{margin-top:6px;color:var(--mute);font-size:.78rem;font-weight:700}
.row.r2{margin-top:12px}
.ink.sk{background:var(--blue);border-color:var(--blued)}
.lives.ptime{color:var(--blue);letter-spacing:0;font-variant-numeric:tabular-nums}
.topbar{position:relative;z-index:6;display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:-6px 0 18px}
.topbar button{flex:none;width:auto;padding:6px 12px;font-size:.75rem;border-radius:12px;border-bottom-width:4px;color:var(--mute);display:inline-flex;align-items:center;gap:6px}
.topbar button svg{width:15px;height:15px}
.snd{position:relative;flex:none}#sndbtn{padding:6px 9px}#sndbtn.off{opacity:.6}
#temabtn{padding:6px 9px;flex:none}
.sndmenu{min-width:190px;padding:12px 14px}.sndmenu label{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:.85rem;font-weight:800;color:var(--ink)}.sndmenu input{width:100%;margin:0;padding:0;border:0;background:none;accent-color:var(--green);cursor:pointer}   /* barra: sin el estilo grande de las casillas de texto */
@media(max-width:520px){#fbbtn span,#login span{display:none}#fbbtn,#login{padding:6px 9px}}   /* móvil: solo iconos, para que quepa el idioma */
@media(max-width:420px){#mebtnname{display:none}.topbar .mechip{padding:4px 5px}}   /* móvil estrecho: del jugador, solo su carita */
.lang{position:relative;flex:none}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:2px;animation:rise .15s ease-out both}
.topbar .langmenu button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:10px;padding:10px 12px;font-size:.85rem;text-transform:none;letter-spacing:0;color:var(--ink);background:none;filter:none;transform:none}
.topbar .langmenu button:hover{background:var(--line)}
.topbar .langmenu button i{font-style:normal;visibility:hidden;color:var(--green);font-weight:900}
.topbar .langmenu button.sel i{visibility:visible}
.tipdown:after{bottom:auto;top:calc(100% + 12px);left:auto;right:0;transform:translateY(-4px)}
.tipdown:hover:after,.tipdown:focus-visible:after,.tipdown.show:after{opacity:1;transform:none}
.ptitle{margin:0 0 2px}
.pmode{color:var(--mute);text-transform:uppercase;letter-spacing:1.5px;font-size:.75rem;font-weight:800;margin-bottom:16px}
.plist{display:flex;flex-direction:column;gap:12px}
.dcard{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;padding:14px 16px 15px;border-radius:18px;border:2px solid var(--c);border-bottom:6px solid var(--cd);background:var(--c);color:#fff;text-transform:none;letter-spacing:0;animation:rise .4s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--k)*80ms + 120ms)}
.dcard:active{border-bottom-width:3px}
.dcard b{font-size:1.25rem;font-weight:900;text-transform:uppercase;letter-spacing:.8px}
.dcard .chips{display:flex;flex-wrap:wrap;gap:6px}
.dcard em{font-style:normal;background:rgba(255,255,255,.25);border-radius:10px;padding:3px 9px;font-size:.78rem;font-weight:800}
.dcard small{position:absolute;right:14px;top:14px;background:rgba(0,0,0,.18);border-radius:10px;padding:3px 9px;font-size:.75rem;font-weight:800}
.dcard.d0{--c:var(--green);--cd:var(--greend)}.dcard.d1{--c:var(--org);--cd:#d17b00}.dcard.d2{--c:var(--red);--cd:var(--redd)}
.mcard:has(.modes){width:min(420px,100%)}
.prules{margin:-4px 0 14px;color:var(--mute);font-size:.78rem;font-weight:700;line-height:1.4}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{position:relative;flex:none;display:flex;flex-direction:column;gap:10px;padding:8px 8px 13px;border-radius:20px;border:2px solid var(--line);border-bottom-width:5px;background:var(--card);color:var(--ink);text-transform:none;letter-spacing:0;animation:rise .4s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--k)*80ms + 100ms)}
.mode:active{border-bottom-width:2px}
.mode b{font-size:1.05rem;font-weight:900}
.mode .soon{position:absolute;top:14px;right:14px;z-index:3;background:rgba(0,0,0,.6);color:#fff;font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:10px;font-weight:800}
.art{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.a-timed{background:linear-gradient(135deg,#1cb0f6,#1899d6)}
.a-duel{background:linear-gradient(135deg,#ff4b4b,#ff9600)}
.a-exp{background:linear-gradient(135deg,#ffc800,#ff9600)}
.a-exp img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));transition:transform .25s}
.mode:hover .a-exp img{transform:scale(1.05)}
.a-soon{background:var(--line);color:var(--mute);font-size:3.2rem;font-weight:900}
.art .fl{width:64%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;box-shadow:0 6px 14px -4px rgba(0,0,0,.45);background:#fff}
.art .fl svg{width:100%;height:100%;display:block}
.a-timed .fl{transform:rotate(-8deg) translate(-4%,-6%)}
.art .sw{position:absolute;right:9%;bottom:9%;width:42%;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(0,0,0,.4)}
.art .sw svg{width:68%;height:68%}
/* Práctica (modos/menu-jugar.js): Todos, Continentes y un continente; cada uno su color y su mapa (img/practica/) */
.mode small{margin-top:-6px;color:var(--mute);font-size:.75rem;font-weight:800}
.a-prac{background:linear-gradient(135deg,#1cb0f6,#7b5cff)}
.a-prac.z0{background:linear-gradient(135deg,#ffb300,#e5631a)}.a-prac.z1{background:linear-gradient(135deg,#ff5f6d,#c2185b)}.a-prac.z2{background:linear-gradient(135deg,#ffd54a,#ff9600)}
.a-prac.z3{background:linear-gradient(135deg,#4f8cff,#1f4fc9)}.a-prac.z4{background:linear-gradient(135deg,#26d0ce,#1a7f9c)}
.a-prac img{width:100%;height:100%;object-fit:contain;transition:transform .25s}
.mode:hover .a-prac img{transform:scale(1.05)}
.a-prac.a-cont{background:linear-gradient(135deg,#58cc02,#1a9c6b)}
/* Todos: cuatro banderas en abanico, como pegatinas (borde blanco y sombra); se abren un poco al pasar el ratón */
.a-todos .fl{position:absolute;width:44%;border:4px solid #fff;border-radius:9px;box-shadow:0 7px 14px -4px rgba(0,0,0,.4);transition:transform .25s}
.a-todos .fl:nth-child(1){left:9%;top:13%;transform:rotate(-10deg)}
.a-todos .fl:nth-child(2){right:9%;top:11%;transform:rotate(8deg)}
.a-todos .fl:nth-child(3){left:12%;bottom:12%;transform:rotate(7deg)}
.a-todos .fl:nth-child(4){right:11%;bottom:14%;transform:rotate(-6deg)}
.mode:hover .a-todos .fl:nth-child(1){transform:rotate(-14deg) translate(-4px,-3px)}.mode:hover .a-todos .fl:nth-child(2){transform:rotate(12deg) translate(4px,-3px)}
.mode:hover .a-todos .fl:nth-child(3){transform:rotate(10deg) translate(-4px,3px)}.mode:hover .a-todos .fl:nth-child(4){transform:rotate(-9deg) translate(4px,3px)}
.modes.prz .mode b{font-size:.95rem}
@media(max-width:560px){.modes.prz .mode:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}.modes.prz .mode:last-child .art{aspect-ratio:1}}   /* el quinto (Oceanía), centrado y del mismo tamaño */
.prback{display:block;width:auto;margin:14px auto 0;padding:9px 20px;font-size:.8rem}
.a-duel .fl{position:absolute;width:58%}
.a-duel .fl.l{left:5%;top:11%;transform:rotate(-10deg)}
.a-duel .fl.r{right:5%;bottom:11%;transform:rotate(10deg)}
.a-duel .vs{position:relative;z-index:2;background:#fff;color:var(--red);font-weight:900;font-size:1rem;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;box-shadow:0 6px 14px -4px rgba(0,0,0,.4)}
.duelhud{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.dl{display:flex;align-items:center;gap:8px}
.dl .nm{width:64px;font-size:.78rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbar{flex:1;height:14px;background:var(--line);border-radius:8px;overflow:hidden}
.dbar i{display:block;height:100%;width:0;border-radius:8px;transition:width .35s}
.dl.me .dbar i{background:var(--blue)}.dl.op .dbar i{background:var(--red)}
.dl b{width:46px;text-align:right;font-size:.8rem}
.av{flex:none;display:grid;place-items:center;width:var(--px);height:var(--px);border-radius:50%;font-weight:900;font-size:calc(var(--px)*.46);color:#fff;background:hsl(var(--h) 65% 48%);border:2px solid rgba(255,255,255,.75)}
.av.bot{background:#5b6b78}.av svg{width:60%;height:60%}
.av.q{background:rgba(255,255,255,.25);animation:pulse .9s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.1);opacity:.7}}
#ans[readonly]{border-color:var(--red);opacity:.65}
.vsov{position:fixed;inset:0;z-index:55;background:#0b1620;overflow:hidden;color:#fff;animation:mfade .25s both}
.vshalf{position:absolute;inset:0}
.vshalf.p1{background:linear-gradient(135deg,#35c0ff,#0e7fc0);clip-path:polygon(0 0,100% 0,0 100%);animation:vs1 .6s cubic-bezier(.2,1,.3,1) both}
.vshalf.p2{background:linear-gradient(315deg,#ff4b4b,#ff9600);clip-path:polygon(100% 0,100% 100%,0 100%);animation:vs2 .6s .1s cubic-bezier(.2,1,.3,1) both}
@keyframes vs1{from{transform:translate(-30%,-30%)}}
@keyframes vs2{from{transform:translate(30%,30%)}}
.vsline{position:absolute;inset:0;width:100%;height:100%}
.vsline line{stroke:#0b1620;stroke-width:9px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.vsslot{position:absolute;display:flex;align-items:center;gap:min(2vw,14px)}
.vsslot.s2{flex-direction:row-reverse}   /* el rival: tarjeta y, más a la derecha, su personaje */
.vsslot .pcard{width:min(54vw,250px);box-sizing:border-box}
/* Personaje 3D de pie junto a la tarjeta (modos/duelo.js, vsSlot) */
.vschar{position:relative;flex:none;width:min(30vw,300px);aspect-ratio:3/4;display:grid;place-items:center;filter:drop-shadow(0 10px 14px rgba(0,0,0,.25))}
.vschar canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Un jugador (no el bot) sale como una carta: dentro de su fondo, con su marco y su efecto (lo que lleva puesto, de la tienda). Variables de stageDeco (escenario3d.js) */
.vschar.vscard{--stimg:linear-gradient(#8fd0f2,#8fd0f2);--fw:0px;--stfr:none;box-sizing:border-box;border:max(var(--fw),3px) solid transparent;border-radius:26px;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.38),rgba(255,255,255,0) 62%) padding-box,var(--stimg) padding-box,var(--stfr) border-box;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 14px 30px -10px rgba(0,0,0,.45);filter:none}
/* Móvil: no caben uno al lado del otro sin pisar la otra mitad → el personaje de pie encima de su tarjeta */
@media(max-width:600px){
 .vsslot{flex-direction:column;align-items:flex-start;gap:0}
 .vsslot.s2{flex-direction:column;align-items:flex-end}
 .vsslot .pcard{width:min(60vw,250px)}
 .vschar{width:34vw;margin-bottom:-20px}
 .vschar.vscard{margin-bottom:8px}   /* la carta no se mete debajo de la tarjeta de datos */
}
.vsslot.s1{left:5vw;top:max(4vh,18px);animation:vsin1 .6s .25s cubic-bezier(.2,1.2,.4,1) both}
.vsslot.s2{right:5vw;bottom:max(9vh,56px);animation:vsin2 .6s .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes vsin1{from{opacity:0;transform:translate(-40px,-40px)}}
@keyframes vsin2{from{opacity:0;transform:translate(40px,40px)}}
.pcard{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);border-bottom-width:5px;border-radius:22px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.pcard.reveal{animation:popin .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes popin{from{transform:scale(.6);opacity:0}}
.pn{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.tag{font-style:normal;font-size:.62rem;letter-spacing:.8px;background:#fff;color:#3c3c3c;border-radius:8px;padding:2px 7px;font-weight:900;text-shadow:none}
.rt{font-size:.8rem;opacity:.92;font-weight:800}
.pm{display:flex;gap:8px;min-height:36px;align-items:center;justify-content:center;font-size:.72rem;opacity:.92;font-weight:800}
.vsmidw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.vsmidw span{display:inline-block;font-size:clamp(3.2rem,16vw,5.5rem);font-weight:900;line-height:1;color:#ed1c24;-webkit-text-stroke:3px #fff;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.35)}
.vsinfo{position:absolute;left:0;right:0;top:calc(50% + clamp(44px,10vw,72px));text-align:center;z-index:3;padding:0 20px;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.vsinfo b{display:block;font-size:1.15rem}.vsinfo small{display:block;margin-top:4px;font-size:.78rem;opacity:.9}
.vscancel{position:absolute;left:0;right:0;margin:auto;bottom:calc(18px + env(safe-area-inset-bottom));width:max-content;flex:none;padding:8px 22px;border-radius:14px;background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.4);font-size:.8rem;z-index:4}
.dcmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 12px}
.dcol{border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dcol.win{border-color:var(--green);background:rgba(88,204,2,.08)}
.drmsg{margin:12px 0 0;font-weight:800}.drmsg:empty{display:none}   /* revancha en vivo: "¡X quiere la revancha!", "no ha aceptado"... */
.dnm{font-size:.95rem}.dbig{font-size:1.6rem;font-weight:900}.dsm{font-size:.78rem;color:var(--mute);font-weight:800}
#dend .emo{font-size:4rem;line-height:1;animation:drop .8s cubic-bezier(.3,1.6,.5,1)}
.pcard{position:relative}
.hist{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.74rem;font-weight:800;opacity:.95}
.form{display:flex;gap:4px}.form i{width:10px;height:10px;border-radius:50%;border:2px solid rgba(0,0,0,.18)}
.form i.f-w{background:#58cc02}.form i.f-l{background:#ff4b4b}.form i.f-d{background:#c9d4dc}
.stk{display:inline-flex;align-items:center;gap:5px;border-radius:12px;padding:3px 10px;font-size:.8rem;font-weight:900;background:rgba(0,0,0,.22);color:#fff;--c1:#fff2b0;text-shadow:none}
.stk.s1{animation:popin .5s .9s cubic-bezier(.2,1.4,.4,1) both}
.stk.s2{background:rgba(255,150,0,.6)}
.stk.s3{background:linear-gradient(90deg,#ff9600,#ff4b4b);box-shadow:0 0 14px #ff9600}
.stk.s4{background:linear-gradient(90deg,#ffd54a,#fff3b0,#ffd54a);background-size:200% 100%;color:#5a3b00;animation:shine 1.6s linear infinite;box-shadow:0 0 18px #ffd54a}
@keyframes shine{to{background-position:-200% 0}}
.pcard.st3{animation:glow3 1.1s ease-in-out infinite alternate}
.pcard.st4{border-color:#ffd54a;animation:glow4 .9s ease-in-out infinite alternate}
@keyframes glow3{to{box-shadow:0 14px 30px -12px rgba(0,0,0,.5),0 0 26px 4px rgba(255,150,0,.85)}}
@keyframes glow4{to{box-shadow:0 14px 30px -12px rgba(0,0,0,.5),0 0 34px 8px rgba(255,213,74,.95)}}
.ember{position:absolute;bottom:8px;left:var(--x);width:6px;height:6px;border-radius:50%;background:#ffd54a;opacity:0;pointer-events:none;animation:ember 1.6s var(--d) infinite ease-out}
.pcard.st4 .ember{background:#fff;box-shadow:0 0 6px #ffd54a}
@keyframes ember{0%{opacity:0;transform:translateY(0) scale(1)}20%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(.3)}}
.topbar{justify-content:space-between}
.tbr{display:flex;align-items:center;gap:8px}
.topbar .mechip{padding:4px 12px 4px 5px;max-width:46vw;color:var(--ink)}
.mechip #mebtnav{display:flex;flex:none}
.mechip #mebtnname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;text-transform:none;letter-spacing:0;font-size:.82rem}
.avs{display:block;flex:none}
.nflag{display:inline-block;width:26px;height:26px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px rgba(255,255,255,.75);flex:none;vertical-align:middle}
#prof .nflag{box-shadow:0 0 0 1.5px var(--line)}
.nflag svg{width:100%;height:100%;display:block}
#prof{margin-top:0}
.phead{display:flex;gap:16px;align-items:flex-start;margin:6px 0 4px}
.pleft{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.pleft button{flex:none;width:auto;padding:7px 18px;font-size:.78rem;border-radius:12px;border-bottom-width:4px}
.pinfo{min-width:0;flex:1}
.pinfo h2{margin:2px 0 8px;font-size:1.5rem;overflow-wrap:anywhere}
.pnat{display:flex;align-items:center;gap:8px;font-weight:800}
.pmeta{color:var(--mute);font-size:.82rem;margin-top:8px;font-weight:700}
.sec{margin:18px 0 8px;font-size:.74rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);font-weight:800}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc{border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sc b{font-size:1.1rem;overflow-wrap:anywhere}.sc span{color:var(--mute);font-size:.72rem;font-weight:800}
.pacc p{margin:0 0 8px;font-size:.88rem}.pacc button{flex:none;width:auto;padding:9px 16px;font-size:.78rem;border-radius:12px;margin-top:4px}
.pacc .pdel{display:block;width:auto;padding:4px 0;margin-top:12px;color:var(--mute);font-size:.78rem;text-decoration:underline}   /* borrar la cuenta: discreto, que no se pulse sin querer */
.legalbar{margin:4px 0 0;text-align:center;font-size:.78rem}.legalbar a{color:var(--mute)}   /* pie del menú: aviso legal y privacidad (front/legal/) */
.lgagenote a.legal{color:inherit}
button.p.lgdanger{background:var(--red);border-color:var(--red) var(--red) var(--redd)}
.mcard:has(.editor){width:min(440px,100%);text-align:left}
.edprev{display:flex;justify-content:center;margin:6px 0 14px}
.edl{display:block;margin-bottom:10px;font-size:.72rem;color:var(--mute);font-weight:800;text-transform:uppercase;letter-spacing:1px}
.edl input,.edl select{display:block;width:100%;margin-top:5px;font:inherit;font-weight:800;font-size:1rem;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);text-transform:none;letter-spacing:0}
.edl input:disabled{opacity:.6;cursor:not-allowed}   /* registrado: el nombre de usuario no se edita */
.edsub{grid-column:1/-1;font-size:.72rem;color:var(--mute);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-top:6px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.ink.go{opacity:1}.flash:before{display:none}}
.edtabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px 2px 8px;margin:6px 0 4px}
.edtabs button{flex:none;width:auto;padding:6px 12px;font-size:.72rem;border-radius:12px;border-bottom-width:4px;color:var(--mute)}
.edtabs button.sel{background:var(--yel);border-color:var(--yel) var(--yel) #e5a800;color:#3c3c3c}
.edgrid{padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px;margin:6px 0 16px}
.edgrid button{flex:none;padding:2px;border-radius:50%;border:3px solid transparent;background:none;filter:none;transform:none;display:grid;place-items:center}
.edgrid button.sw{aspect-ratio:1;border:3px solid var(--line)}
.edgrid button.sel{border-color:var(--green)}