:root{--pano:#0f3d2e;--pano-2:#145a40;--pano-oscuro:#0a2a20;--tinta:#f4f1e8;--tinta-suave:#b9d4c6;--oro:#ffcf3f;--oro-oscuro:#c99a10;--rojo:#ff6b5b;--verde-ok:#5fe39a;--carta:#fffdf7;--sombra:0 6px 16px #00000059;--radio:14px;--carta-w:clamp(62px, 20vw, 92px);color:var(--tinta);-webkit-tap-highlight-color:transparent;font-family:"Baloo 2",system-ui,sans-serif}*{box-sizing:border-box}html,body{background:radial-gradient(120% 80% at 50% 30%, var(--pano-2), var(--pano) 60%, var(--pano-oscuro));background-color:var(--pano);overscroll-behavior:none;min-height:100%;margin:0}body{min-height:100dvh}#app{max-width:520px;min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));margin:0 auto}.pantalla{flex-direction:column;gap:14px;min-height:calc(100dvh - 32px);display:flex}.centrada{justify-content:center;align-items:center}.btn{font:inherit;color:var(--tinta);cursor:pointer;background:#ffffff1f;border:0;border-radius:999px;padding:14px 20px;font-size:1.1rem;font-weight:700;transition:transform 80ms,filter .15s,opacity .2s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:default}.btn.principal{background:var(--oro);color:#2b2100;box-shadow:0 4px 0 var(--oro-oscuro)}.btn.secundario{background:var(--tinta);color:var(--pano)}.btn.texto{color:var(--tinta-suave);background:0 0;font-weight:500}.campo{flex-direction:column;gap:6px;display:flex}.campo span,.etiqueta{color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:.85rem}input{font:inherit;border-radius:var(--radio);color:var(--tinta);background:#00000040;border:2px solid #ffffff26;outline:none;width:100%;padding:12px 16px;font-size:1.15rem}input:focus{border-color:var(--oro)}.inicio{justify-content:center}.logo{text-align:center;margin-bottom:8px}.logo h1{white-space:nowrap;letter-spacing:-.02em;margin:6px 0 0;font-size:2.6rem;line-height:1}.logo p{color:var(--tinta-suave);margin:6px 0 0}.logo-cartas{justify-content:center;height:96px;display:flex}.logo-cartas span{background:var(--carta);width:62px;height:88px;color:var(--pano);box-shadow:var(--sombra);border-radius:10px;place-items:center;margin:0 -8px;font-size:2.2rem;font-weight:800;animation:3s ease-in-out infinite flotar;display:grid}.logo-cartas span:first-child{transform:rotate(-12deg)}.logo-cartas span:nth-child(2){background:var(--oro);z-index:1;animation-delay:.3s}.logo-cartas span:nth-child(3){animation-delay:.6s;transform:rotate(12deg)}.unirse{gap:8px;display:flex}.unirse input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:800}.unirse .btn{flex-shrink:0}.reglas{border-radius:var(--radio);background:#0003;padding:12px 16px}.reglas summary{cursor:pointer;font-weight:700}.reglas ol{color:var(--tinta-suave);margin:10px 0 0;padding-left:20px;line-height:1.45}.reglas b{color:var(--tinta)}.espera{text-align:center;justify-content:center}.codigo-grande{letter-spacing:.15em;color:var(--oro);text-shadow:0 4px #0000004d;font-size:4.5rem;font-weight:800;line-height:1}.lista-jugadores{text-align:left;gap:8px;margin:8px 0;padding:0;list-style:none;display:grid}.lista-jugadores li{border-radius:var(--radio);background:#ffffff1a;padding:12px 16px;font-size:1.15rem;font-weight:700}.lista-jugadores li.vacio{color:var(--tinta-suave);background:0 0;border:2px dashed #ffffff26;font-weight:500}.nota{color:var(--tinta-suave);text-align:center;margin:4px 0}.carta{font:inherit;width:var(--carta-w);aspect-ratio:5/7;background:var(--carta);color:var(--pano);box-shadow:var(--sombra);font-size:calc(var(--carta-w) * .52);cursor:pointer;border:0;border-radius:12px;place-items:center;padding:0;font-weight:800;transition:transform .15s,box-shadow .15s,opacity .2s;display:grid;position:relative}.carta span{line-height:1;transform:translateY(6%)}.carta:disabled{cursor:default}.carta.dorso{border:4px solid var(--carta);background:repeating-linear-gradient(45deg,#ffffff1f 0 6px,#0000 6px 12px),linear-gradient(160deg,#c0392b,#7d1f16)}.carta.hueco{box-shadow:none;cursor:default;background:0 0;border:2px dashed #ffffff26}.carta.revelada{outline:3px solid var(--rojo);outline-offset:-3px}.carta.v1,.carta.v6{color:#c0392b}.carta.v2,.carta.v7{color:#1f6feb}.carta.v3,.carta.v8{color:#0f7a4a}.carta.v4,.carta.v9{color:#8e44ad}.carta.v5,.carta.v10{color:#d35400}.carta.v10{font-size:calc(var(--carta-w) * .42)}.mi-turno .carta:not(:disabled):not(.hueco):active{transform:translateY(-6px)scale(1.04)}.carta.jugable{box-shadow:0 0 0 3px var(--oro), 0 0 22px var(--oro);animation:1.1s ease-in-out infinite latido}.mi-turno .ocultas .carta.dorso:not(:disabled){box-shadow:0 0 0 2px #ffcf3f99, var(--sombra)}.ocultas.memorizando .carta{animation:.5s both aparecer}.ocultas.memorizando .carta:nth-child(2){animation-delay:80ms}.ocultas.memorizando .carta:nth-child(3){animation-delay:.16s}.ocultas.memorizando .carta:nth-child(4){animation-delay:.24s}.mesa{gap:10px}.rivales{gap:8px;display:flex}.rival{border-radius:var(--radio);background:#00000038;border:2px solid #0000;flex:1;min-width:0;padding:8px 10px;transition:border-color .2s}.rival.activo{border-color:var(--oro)}.rival.desconectado{opacity:.5}.rival-nombre{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.rival-ocultas{gap:3px;margin:4px 0;display:flex}.mini{background:var(--carta);width:20px;height:28px;color:var(--pano);border-radius:4px;place-items:center;font-size:.8rem;font-style:normal;font-weight:800;display:grid}.mini.dorso{border:2px solid var(--carta);background:linear-gradient(160deg,#c0392b,#7d1f16)}.mini.vacia{background:0 0;border:1px dashed #fff3}.rival-mano{color:var(--tinta-suave);font-size:.85rem}.centro{--carta-w:clamp(88px, 28vw, 120px);grid-template-columns:1fr auto 1fr;place-items:center;padding:10px 0;display:grid}.pila{min-height:calc(var(--carta-w) * 1.4);place-items:center;display:grid}.pila .carta{cursor:default}.pila .carta.entra{animation:.35s cubic-bezier(.2,1.4,.5,1) both entrar}.pila-vacia{width:var(--carta-w);aspect-ratio:5/7;text-align:center;color:var(--tinta-suave);border:3px dashed #ffffff4d;border-radius:12px;place-items:center;font-weight:700;line-height:1.1;display:grid}.mazo{aspect-ratio:5/7;border:3px solid var(--carta);width:52px;box-shadow:3px 3px 0 #ddd, 6px 6px 0 #bbb, var(--sombra);background:linear-gradient(160deg,#c0392b,#7d1f16);border-radius:8px;place-items:center;font-weight:800;display:grid}.sigue{flex-direction:column;align-items:center;line-height:1;display:flex}.sigue small{color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.08em}.sigue b{color:var(--oro);font-size:2.8rem}.estado-turno{text-align:center;min-height:48px;font-size:1.1rem}.mi-turno .estado-turno b{color:var(--oro)}.barra{background:#0000004d;border-radius:99px;height:8px;margin-top:6px;overflow:hidden}.relleno{background:linear-gradient(90deg, var(--rojo), var(--oro) 40%, var(--verde-ok));transform-origin:0;height:100%;animation:linear both vaciar}.yo{flex-direction:column;gap:8px;margin-top:auto;display:flex}.yo .etiqueta{align-items:center;gap:8px;display:flex}.pts{color:var(--oro);margin-left:auto;font-weight:800}.racha{color:var(--oro);text-transform:none;letter-spacing:0;font-weight:800}.fila{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.mano{scrollbar-width:none;flex-wrap:nowrap;justify-content:safe center;margin:-8px -4px 0;padding:8px 4px 10px;overflow-x:auto}.mano::-webkit-scrollbar{display:none}.mano .carta{--carta-w:clamp(54px, 17vw, 80px);flex-shrink:0}.combo{background:var(--oro);color:#2b2100;border-radius:999px;margin-left:4px;padding:0 10px;font-weight:800;animation:.3s cubic-bezier(.2,1.4,.5,1) both entrar;display:inline-block}.comer{margin-top:6px}.btn.comer:disabled{color:var(--tinta-suave);box-shadow:none;background:#ffffff1f}.fin{z-index:5;background:#0009;place-items:center;padding:16px;animation:.3s both fundido;display:grid;position:fixed;inset:0}.fin-caja{background:var(--pano);text-align:center;border:2px solid #ffffff26;border-radius:24px;flex-direction:column;gap:10px;width:100%;max-width:380px;padding:24px;animation:.4s cubic-bezier(.2,1.4,.5,1) both entrar;display:flex}.trofeo{font-size:4rem;line-height:1}.fin h2{margin:0;font-size:2rem}.ranking{gap:6px;margin:4px 0 8px;padding:0;list-style:none;display:grid}.ranking li{background:#ffffff14;border-radius:10px;justify-content:space-between;padding:8px 12px;display:flex}.ranking li:first-child{background:#ffcf3f33}.ranking b{color:var(--oro)}#toast{left:50%;top:max(16px, env(safe-area-inset-top));opacity:0;visibility:hidden;pointer-events:none;background:var(--tinta);max-width:calc(100% - 32px);color:var(--pano);box-shadow:var(--sombra);z-index:10;text-align:center;border-radius:999px;padding:10px 18px;font-weight:700;transition:transform .25s cubic-bezier(.2,1.3,.5,1),opacity .2s,visibility .25s;position:fixed;transform:translate(-50%,-100%)}#toast.visible{opacity:1;visibility:visible;transform:translate(-50%)}#toast.bien{background:var(--verde-ok)}#toast.mal{background:var(--rojo);color:#fff}.spinner{border:5px solid #fff3;border-top-color:var(--oro);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite girar}@keyframes girar{to{transform:rotate(360deg)}}@keyframes flotar{50%{translate:0 -6px}}@keyframes latido{50%{transform:translateY(-4px)}}@keyframes entrar{0%{opacity:0;transform:scale(.4)rotate(-20deg)}}@keyframes aparecer{0%{transform:rotateY(90deg)}}@keyframes fundido{0%{opacity:0}}@keyframes vaciar{0%{transform:scaleX(var(--inicio,1))}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){:not(.relleno),:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}