/* PreviaOnline App — estilo "figurita" del sitio, pensado para el celu (pestañas abajo como en Plato). */
:root{--ink:#15132b;--paper:#fff;--sky:#bfe3ff;--sky2:#a9d7fb;--muted:#4a4766;--tomato:#ff5a36;--sun:#ffc530;--mint:#22c3a6;--grape:#7b5cff;--bubble:#ff7ac6;--celeste:#75aadb;
  --f-d:"Bungee","Impact","Arial Black",sans-serif;--f-b:"Baloo 2","Nunito","Segoe UI",system-ui,sans-serif;--sh:4px 4px 0 var(--ink);--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--sky);color:var(--ink);font:16px/1.4 var(--f-b);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body{background-image:radial-gradient(var(--sky2) 1.6px,transparent 1.7px);background-size:22px 22px}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--grape);outline-offset:2px}
.ap{min-height:100%;display:flex;flex-direction:column;max-width:720px;margin:0 auto}
/* aviso de beta en mantenimiento (arriba de todo) */
.ap-beta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:calc(6px + var(--safe-t)) 12px 6px;background:#ff8a3d;color:#1b1030;border-bottom:3px solid var(--ink);font-size:13px;font-weight:600;text-align:center} /* franja naranja con el aviso */
.ap-beta b{font-family:var(--f-d);font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:2px 9px} /* pastilla "BETA" */
.ap-beta span{display:inline-flex;align-items:center;gap:6px} /* texto del aviso con su lucecita */
.ap-beta i{width:8px;height:8px;border-radius:50%;background:#1b1030;animation:ap-titila 1.2s ease-in-out infinite} /* lucecita que titila */
@keyframes ap-titila{50%{opacity:.25}} /* la lucecita baja y sube */
@media (prefers-reduced-motion:reduce){.ap-beta i{animation:none}} /* sin titilar si se pidió menos movimiento */
/* cabecera */
.ap-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 14px 10px;background:var(--grape);color:#fff;border-bottom:3px solid var(--ink)}
.ap-title{margin:0;flex:1;font:400 20px/1 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-back,.ap-icon{appearance:none;border:2px solid var(--ink);background:#fff;color:var(--ink);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;font:400 28px/1 var(--f-d);position:relative;box-shadow:2px 2px 0 var(--ink)}
.ap-icon svg{width:22px;height:22px}
/* contenido */
.ap-main{flex:1;padding:14px 14px calc(96px + var(--safe-b));display:flex;flex-direction:column;gap:16px}
.ap-main.full{padding:0 0 calc(70px + var(--safe-b))}
.ap-main.game{padding:0;gap:0}
h2.sec{margin:6px 0 0;font:400 20px/1 var(--f-d)}
.muted{color:var(--muted);font-weight:600}
.card{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:14px}
/* pestañas de abajo */
.ap-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;gap:2px;background:#fff;border-top:3px solid var(--ink);padding:6px 6px calc(6px + var(--safe-b))}
.ap-tabs button{appearance:none;border:0;background:none;flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:14px;font-weight:800;font-size:13px;cursor:pointer;position:relative;color:var(--muted)}
.ap-tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ap-tabs [data-tab="juegos"] svg{fill:currentColor;stroke:none}
.ap-tabs button[aria-current="page"]{background:var(--sun);color:var(--ink)}
.ap-badge{position:absolute;top:2px;right:calc(50% - 26px);min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--tomato);color:#fff;border:2px solid var(--ink);font:800 12px/16px var(--f-b);text-align:center}
.ap-icon .ap-badge{top:-8px;right:-8px}
/* botones */
.b{appearance:none;cursor:pointer;border:3px solid var(--ink);border-radius:14px;padding:10px 18px;font:800 17px var(--f-b);box-shadow:var(--sh);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .12s}
.b:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.b:disabled{opacity:.5;cursor:default}
.b.tom{background:var(--tomato);color:#fff}.b.sun{background:var(--sun)}.b.mint{background:var(--mint)}.b.grape{background:var(--grape);color:#fff}.b.sm{font-size:14px;padding:6px 12px;border-radius:11px;box-shadow:2px 2px 0 var(--ink)}
.b.wide{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.stack{display:grid;gap:10px}
input.in,textarea.in{width:100%;font:700 17px var(--f-b);padding:10px 12px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
label.lb{font-weight:800;font-size:14px;display:grid;gap:4px}
/* tarjetas de juegos (estilo Plato) */
.hello{display:flex;align-items:center;gap:12px}
.hello b{font:400 20px/1.1 var(--f-d)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.gcard{appearance:none;cursor:pointer;padding:0;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;position:relative}
.gcard .art{aspect-ratio:16/11;border-bottom:3px solid var(--ink);overflow:hidden;background:var(--grape)}
.gcard .art svg{width:100%;height:100%;display:block}
.gcard .tx{padding:8px 10px 10px;display:grid;gap:2px}
.gcard .tx b{font:400 16px/1.1 var(--f-d)}
.gcard .tx span{font-size:13px;font-weight:700;color:var(--muted)}
.gcard .tag{position:absolute;top:8px;left:8px;background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:1px 8px;font:800 11px var(--f-b);text-transform:uppercase}
.gcard.soon{opacity:.62}
.gcard.soon .tag{background:#fff}
.web{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.web a{flex:0 0 120px;scroll-snap-align:start;text-decoration:none;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.web a .art{aspect-ratio:16/11;border-bottom:2px solid var(--ink)}
.web a .art svg{width:100%;height:100%;display:block}
.web a b{display:block;padding:5px 7px;font-size:13px;font-weight:800;line-height:1.1}
/* hoja de un juego */
.sheet-art{border:3px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/9}
.sheet-art svg{width:100%;height:100%;display:block}
.modes{display:grid;gap:10px}
.mode{appearance:none;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:12px 14px;box-shadow:var(--sh)}
.mode i{width:46px;height:46px;flex:none;border-radius:14px;border:2px solid var(--ink);display:grid;place-items:center;font:400 22px var(--f-d);font-style:normal}
.mode b{display:block;font-size:17px}
.mode span{font-size:13px;font-weight:600;color:var(--muted)}
/* listas (salas, amigos, chats) */
.list{display:grid;gap:8px}
.item{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink);appearance:none;text-align:left;cursor:pointer;width:100%}
.item .grow{flex:1;min-width:0}
.item .grow b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .grow span{display:block;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .num{min-width:22px;height:22px;border-radius:999px;background:var(--tomato);color:#fff;font:800 12px/18px var(--f-b);text-align:center;border:2px solid var(--ink)}
.empty{text-align:center;color:var(--muted);font-weight:700;padding:18px 8px}
/* avatares */
.av{position:relative;flex:none;display:inline-block;vertical-align:middle;width:48px;height:48px}
.av svg{width:100%;height:100%;display:block}
.av.big{width:96px;height:96px}
.av.sm{width:34px;height:34px}
.av .dot{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:#9aa3ad}
.av .dot.on{background:#1fd06a}
.pick{display:flex;gap:6px;flex-wrap:wrap}
.pick button{appearance:none;cursor:pointer;width:38px;height:38px;border-radius:12px;border:3px solid var(--ink);background:#fff;padding:2px}
.pick button[aria-pressed="true"]{outline:3px solid var(--grape);outline-offset:2px}
/* sala */
.code{font:400 clamp(36px,11vw,54px)/1 var(--f-d);letter-spacing:6px;background:var(--sun);border:3px solid var(--ink);border-radius:18px;padding:8px 18px;box-shadow:var(--sh);text-align:center;user-select:all}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.seat{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px;min-height:62px}
.seat b{font-size:15px;line-height:1.1;word-break:break-word}
.seat small{display:block;font-weight:700;color:var(--muted)}
.seat.empty{border-style:dashed;color:var(--muted);justify-content:center;font-weight:700}
/* chat */
.chat{display:flex;flex-direction:column;gap:6px;min-height:0}
.msgs{display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding:4px 2px}
.msg{max-width:82%;align-self:flex-start;background:#fff;border:2px solid var(--ink);border-radius:14px 14px 14px 4px;padding:6px 10px;font-weight:600;word-wrap:break-word}
.msg.me{align-self:flex-end;background:#d9fff3;border-radius:14px 14px 4px 14px}
.msg.sys{align-self:center;background:transparent;border:0;color:var(--muted);font-size:13px;font-weight:700;text-align:center}
.msg small{display:block;font-size:11px;font-weight:800;color:var(--grape)}
.msg .inv{margin-top:6px}
.send{display:flex;gap:8px;position:sticky;bottom:0;background:var(--sky);padding:8px 0 calc(8px + var(--safe-b))}
.send input{flex:1}
.panel{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:720px;margin:0 auto;height:min(72vh,560px);background:var(--sky);border:3px solid var(--ink);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -6px 0 rgba(21,19,43,.25);display:flex;flex-direction:column;padding:10px 12px 0}
.panel .ph{display:flex;align-items:center;justify-content:space-between;font:400 18px var(--f-d)}
.panel .msgs{flex:1}
/* juego */
.stage{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.stage canvas{display:block;width:100%;touch-action:none}
.toastish{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:rgba(21,19,43,.86);color:#fff;font-weight:800;padding:6px 14px;border-radius:999px;font-size:14px;white-space:nowrap;pointer-events:none}
.over{position:absolute;inset:0;background:rgba(21,19,43,.78);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;z-index:5}
.over h2{margin:0;font:400 clamp(28px,8vw,40px)/1.05 var(--f-d);color:var(--sun)}
.ap-toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;font-weight:800;padding:10px 16px;border-radius:14px;max-width:90vw;text-align:center;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.login{display:grid;gap:14px;max-width:420px;margin:0 auto;width:100%;padding-top:10px}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;font:400 30px/1 var(--f-d)}
.logo span{color:var(--tomato)}
.seg{display:flex;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff}
.seg button{appearance:none;border:0;flex:1;padding:9px;font-weight:800;cursor:pointer;background:#fff}
.seg button[aria-pressed="true"]{background:var(--sun)}
.recov{font:400 22px var(--f-d);letter-spacing:2px;background:var(--sun);border:3px solid var(--ink);border-radius:12px;padding:8px;text-align:center;user-select:all}
@media (min-width:720px){.ap-main{padding-left:20px;padding-right:20px}}
/* ---------- pantalla de juego (menú, sala y partida en la misma interfaz) ---------- */
body.jugando{overflow:hidden}                                               /* la app queda quieta debajo */
.gs{position:fixed;left:0;top:0;z-index:60;background:#0f0d22;color:#fff;overflow:hidden;transform-origin:0 0;-webkit-user-select:none;user-select:none} /* ocupa toda la pantalla */
.gs-stage{position:absolute;inset:0;overflow:auto}                          /* lugar del juego (si un juego viejo es más alto, se puede deslizar) */
.gs-stage>canvas{display:block;width:100%;height:100%;touch-action:none}    /* el lienzo llena todo */
.gs-art{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#4b3ab0,#15132b)} /* dibujo de fondo si el juego no tiene portada */
.gs-art svg{width:min(70%,520px);height:auto;opacity:.55;filter:blur(1px)}  /* dibujo apagado */
.gs-top{position:absolute;left:10px;top:10px;display:flex;gap:8px;z-index:8}  /* botones de arriba */
.gs-btn{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:#fff;color:var(--ink);font:800 26px/1 var(--f-b);box-shadow:2px 3px 0 var(--ink);display:grid;place-items:center;position:relative;cursor:pointer;padding:0 0 3px} /* botón redondo */
.gs-btn:active{transform:translate(1px,2px);box-shadow:1px 1px 0 var(--ink)}  /* efecto al apretar */
.gs-btn .ap-badge{position:absolute;top:-6px;right:-6px}                    /* contador del chat */
.gs-ui{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:62px 14px 14px;overflow:auto;background:linear-gradient(90deg,rgba(15,13,34,.82),rgba(15,13,34,.35) 60%,rgba(15,13,34,.15))} /* menú encima del fondo animado */
.gs-ui[hidden]{display:none}
.gs-panel{width:min(100%,640px);display:grid;gap:12px;color:#fff;animation:gs-in .45s cubic-bezier(.2,.9,.3,1.2) both} /* caja del menú */
@keyframes gs-in{from{opacity:0;transform:translateY(18px) scale(.97)}}      /* entra deslizando */
.gs-head{text-align:left}
.gs-logo{margin:0;font:400 clamp(30px,6vw,54px)/1 var(--f-d);color:var(--sun);text-shadow:3px 3px 0 var(--ink),0 0 24px rgba(255,197,48,.35);letter-spacing:.5px} /* nombre del juego */
.gs-sub{margin:6px 0 0;font-weight:700;color:#e8e4ff;max-width:520px}      /* descripción */
.gs-h2{margin:0;font:400 clamp(20px,4vw,28px)/1.1 var(--f-d);color:var(--sun);text-shadow:2px 2px 0 var(--ink)}
.gs-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} /* opciones de 2 en 2 */
.gs-mode{appearance:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;border:3px solid var(--ink);border-radius:16px;padding:10px 12px;background:#fff;color:var(--ink);box-shadow:3px 4px 0 var(--ink);transition:transform .15s} /* botón de modo */
.gs-mode:hover{transform:translateY(-2px)}.gs-mode:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.gs-mode i{grid-row:1/3;font-style:normal;font-size:24px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--sun);border:2px solid var(--ink)} /* ícono */
.gs-mode:nth-child(2) i{background:var(--mint)}.gs-mode:nth-child(3) i{background:var(--tomato)}.gs-mode:nth-child(4) i{background:#b9a6ff} /* un color por opción */
.gs-mode b{font-size:16px;line-height:1.1}.gs-mode span{font-size:12px;font-weight:700;color:var(--muted)}
.gs-help{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);border-radius:14px;padding:8px 12px} /* cómo se juega */
.gs-help summary{cursor:pointer;font-weight:800}.gs-help p{margin:8px 0 0;font-weight:600;line-height:1.35}
.gs-lb{font-weight:800;font-size:14px;color:#e8e4ff}
.gs-chips{gap:8px}
.gs-go{justify-self:start;font-size:19px;padding:12px 26px}                  /* botón principal */
.gs-code{font:400 28px var(--f-d);letter-spacing:6px;text-transform:uppercase;text-align:center;max-width:260px}
.gs .code{justify-self:center;color:var(--ink)}
.gs .seats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gs .seat{color:var(--ink)}
.gs .seat.empty{background:rgba(255,255,255,.12);color:#ddd;border-color:rgba(255,255,255,.4)}
.gs-toast{position:absolute;bottom:16px}                                    /* avisos dentro del juego */
.gs-chatp{position:absolute;z-index:9;left:auto;right:0;top:0;bottom:0;width:min(360px,100%);height:auto;border-radius:22px 0 0 22px;border-bottom:3px solid var(--ink);color:var(--ink)} /* chat de costado */
.gs .over{z-index:6}
.gs.bajo .gs-ui{padding-top:58px;align-items:flex-start}.gs.bajo .gs-modes{grid-template-columns:repeat(4,minmax(0,1fr))}.gs.bajo .gs-mode{grid-template-columns:1fr;text-align:center;justify-items:center;row-gap:4px}.gs.bajo .gs-mode i{grid-row:auto}.gs.bajo .gs-logo{font-size:34px} /* celu acostado (pantalla baja): opciones en una fila */
/* ---------- Tanquecitos: controles encima del lienzo ---------- */
.tq-pl{position:absolute;top:10px;left:64px;right:180px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;z-index:2} /* tarjetas de los jugadores */
.tq-card{display:flex;align-items:center;gap:6px;background:rgba(15,13,34,.62);border:2px solid rgba(255,255,255,.18);border-radius:12px;padding:4px 8px;color:#fff;font-size:13px;backdrop-filter:blur(4px);transition:transform .3s,border-color .3s} /* una tarjeta */
.tq-card i{width:12px;height:12px;border-radius:50%;background:var(--c);border:2px solid #fff;flex:none} /* color del equipo */
.tq-card b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tq-card em{display:block;width:56px;height:7px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden} /* barra de vida */
.tq-card em s{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#b8f36a);transition:width .25s}
.tq-card.on{border-color:var(--c);transform:translateY(2px) scale(1.04);box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 14px var(--c)} /* el que juega brilla */
.tq-card.muerto{opacity:.45;filter:grayscale(1)}
.tq-ban{position:absolute;left:0;right:0;top:38%;display:flex;justify-content:center;pointer-events:none;z-index:3} /* cartel de turno */
.tq-ban span{font:400 clamp(24px,5vw,44px)/1 var(--f-d);color:#fff;background:linear-gradient(90deg,transparent,rgba(15,13,34,.8) 18%,rgba(15,13,34,.8) 82%,transparent);padding:12px 70px;text-shadow:3px 3px 0 var(--c),0 0 18px var(--c)}
.tq-ban.va span{animation:tq-ban 1.9s cubic-bezier(.2,.8,.2,1) both}        /* entra, se queda y se va */
@keyframes tq-ban{0%{transform:translateX(-60vw) skewX(-12deg);opacity:0}18%{transform:translateX(0) skewX(-6deg);opacity:1}26%{transform:none}80%{transform:none;opacity:1}100%{transform:translateX(60vw) skewX(10deg);opacity:0}}
.tq-msg{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(15,13,34,.72);color:#fff;font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;pointer-events:none;z-index:2;white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis} /* ayuda */
.tq-joy{position:absolute;left:18px;bottom:16px;z-index:3;display:grid;gap:6px;justify-items:center} /* joystick */
.tq-joy[hidden],.tq-arms[hidden]{display:none}
.tq-base{width:136px;height:64px;border-radius:32px;background:rgba(15,13,34,.5);border:3px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;touch-action:none;position:relative;backdrop-filter:blur(3px)} /* riel del joystick */
.tq-base::before,.tq-base::after{content:'◀';position:absolute;left:12px;color:rgba(255,255,255,.6);font-size:14px}.tq-base::after{content:'▶';left:auto;right:12px}
.tq-knob{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d6d3e8 55%,#9a95b8);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);transition:transform .08s;pointer-events:none} /* perilla */
.tq-fuel{width:120px;height:8px;border-radius:4px;background:rgba(0,0,0,.4);overflow:hidden;border:1px solid rgba(255,255,255,.4)} /* nafta */
.tq-fuel b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff9a2e,#ffd447)}
.tq-arms{position:absolute;right:12px;bottom:12px;z-index:3;display:grid;gap:6px} /* armas */
.tq-arm{appearance:none;cursor:pointer;display:grid;grid-template-columns:28px auto auto;align-items:center;gap:6px;min-width:128px;padding:5px 10px 5px 6px;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:rgba(15,13,34,.62);color:#fff;font:800 13px var(--f-b);text-align:left;backdrop-filter:blur(3px)}
.tq-arm i{font-style:normal;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.15);font-size:16px}
.tq-arm b{background:var(--sun);color:var(--ink);border-radius:8px;padding:0 6px;font-size:12px}
.tq-arm.on{border-color:var(--sun);background:rgba(255,197,48,.25);box-shadow:0 0 12px rgba(255,197,48,.5)}
.tq-arm:disabled{opacity:.35}
.tq-over h2{text-shadow:3px 3px 0 var(--ink)}
.gs.bajo .tq-arm span{display:none}.gs.bajo .tq-arm{min-width:0;grid-template-columns:28px auto}.gs.bajo .tq-arms{grid-template-columns:repeat(5,auto)} /* pantalla baja: armas en fila, solo íconos */
/* ---------- Conquista: elegir personaje ---------- */
.cq-pjs{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}       /* grilla de personajes */
.cq-pj{appearance:none;cursor:pointer;display:grid;justify-items:center;gap:2px;padding:8px 6px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:linear-gradient(#f3e6c4,#e3cf9d);color:#2b1a0a;text-align:center;font:600 11px/1.15 Georgia,serif;transition:transform .15s,box-shadow .15s} /* tarjeta de pergamino */
.cq-pj svg{width:64px;height:64px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.cq-pj b{font-size:13px}.cq-pj span{opacity:.75}
.cq-pj:hover{transform:translateY(-3px)}
.cq-pj.on{border-color:#ffd447;box-shadow:0 0 0 3px #ffd447,0 0 18px rgba(255,212,71,.6);transform:translateY(-3px) scale(1.03)} /* elegido */
.cq-pj.nuevo i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:400 34px var(--f-d);color:#7a5200;border:3px dashed #b7791f;font-style:normal}
.cq-pjs.chico{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}.cq-pjs.chico svg{width:46px;height:46px}.cq-pjs.chico .cq-pj{font-size:10px}
.cq-crear{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.cq-prev svg{width:150px;height:150px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.cq-opts{display:flex;flex-wrap:wrap;gap:6px}.cq-opt{appearance:none;cursor:pointer;width:46px;height:46px;padding:0;border-radius:50%;border:2px solid transparent;background:none}.cq-opt svg{width:100%;height:100%}.cq-opt.on{border-color:#ffd447;box-shadow:0 0 10px #ffd447}
.cq-sw{appearance:none;cursor:pointer;width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--ink)}.cq-sw.on{box-shadow:0 0 0 3px #ffd447,0 0 10px #ffd447}
.cq-lobby{display:flex;flex-wrap:wrap;gap:8px}.cq-lj{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border-radius:12px;padding:4px 10px 4px 4px}.cq-lj svg,.cq-lj>i{width:38px;height:38px;flex:none}.cq-lj>i{border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-style:normal;font-weight:800}.cq-lj b{display:block;font-size:13px}.cq-lj small{font-size:11px;opacity:.8}
/* ---------- Conquista: la partida ---------- */
.cq-top{position:absolute;top:8px;left:62px;right:58px;display:flex;gap:6px;flex-wrap:wrap;z-index:2;pointer-events:none} /* imperios */
.cq-jug{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:linear-gradient(#f3e6c4,#dcc58f);border:2px solid #7a5200;color:#2b1a0a;font-family:Georgia,serif;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .3s,box-shadow .3s} /* medallón de un jugador */
.cq-jug svg{width:32px;height:32px;flex:none}.cq-jug b{display:block;font-size:12px;line-height:1.05;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cq-jug small{font-size:10px;opacity:.8;white-space:nowrap}
.cq-jug.on{transform:translateY(2px) scale(1.06);box-shadow:0 0 0 3px var(--c),0 0 16px var(--c)} /* el que juega */
.cq-jug.muerto{opacity:.45;filter:grayscale(1)}
.cq-panel{position:absolute;left:10px;bottom:10px;max-width:min(560px,calc(100% - 80px));z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:14px;background:linear-gradient(#f6ead0,#e3cf9d);border:2px solid #7a5200;color:#2b1a0a;font:600 14px/1.2 Georgia,serif;box-shadow:0 4px 12px rgba(0,0,0,.4)} /* instrucciones y botones */
.cq-panel[hidden]{display:none}.cq-panel p{margin:0}.cq-bt{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.cq-n{font-size:18px;min-width:26px;text-align:center}
.cq-side{position:absolute;right:10px;top:58px;display:grid;gap:8px;z-index:2} /* botones del costado */
.cq-r{width:42px;height:42px;border-radius:50%;border:2px solid #7a5200;background:radial-gradient(circle at 35% 30%,#fff7df,#dcc58f);color:#2b1a0a;font:800 20px/1 Georgia,serif;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.cq-ban{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4} /* carteles */
.cq-ban.va>*{animation:cq-entra 1.9s cubic-bezier(.2,.8,.2,1) both}
@keyframes cq-entra{0%{transform:translateY(-30px) scale(.6) rotate(-4deg);opacity:0}15%{transform:none;opacity:1}82%{transform:none;opacity:1}100%{transform:translateY(20px) scale(.95);opacity:0}}
.cq-turno{display:flex;align-items:center;gap:14px;padding:12px 26px 12px 12px;border-radius:999px;background:linear-gradient(#f6ead0,#d9c08a);border:3px solid var(--c);box-shadow:0 0 0 3px #7a5200,0 10px 30px rgba(0,0,0,.5),0 0 40px var(--c);color:#2b1a0a;font-family:Georgia,serif} /* cartel de turno con retrato */
.cq-turno svg{width:84px;height:84px}.cq-turno small{display:block;font-size:13px;letter-spacing:1px;text-transform:uppercase;opacity:.75}.cq-turno b{display:block;font-size:clamp(20px,4vw,30px);line-height:1.05}.cq-turno span{font-style:italic;font-size:13px}
.cq-cartel{padding:14px 28px;border-radius:16px;background:linear-gradient(#f6ead0,#d9c08a);border:3px solid #7a5200;text-align:center;font-family:Georgia,serif;color:#2b1a0a;box-shadow:0 10px 30px rgba(0,0,0,.5)}.cq-cartel b{display:block;font-size:clamp(18px,3.5vw,26px);color:var(--c)}.cq-cartel small{font-style:italic}
.cq-mision{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;background:rgba(20,10,0,.35)} /* pergamino de la misión */
.cq-mision[hidden]{display:none}
.cq-perg{position:relative;max-width:min(440px,90%);display:grid;gap:6px;justify-items:center;text-align:center;padding:22px 26px 16px;background:linear-gradient(90deg,#d9c08a,#f6ead0 12%,#f6ead0 88%,#d9c08a);border-radius:10px;border:2px solid #7a5200;color:#2b1a0a;font-family:Georgia,serif;box-shadow:0 12px 30px rgba(0,0,0,.5);animation:gs-in .4s both}
.cq-perg b{font-size:20px}.cq-perg p{margin:4px 0;font-size:16px;font-style:italic}
.cq-sello{position:absolute;top:-16px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3,transparent 40%),var(--c);border:3px solid #7a1e1e;box-shadow:0 3px 6px rgba(0,0,0,.4)}
.cq-cartas{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.cq-carta{display:grid;justify-items:center;width:58px;padding:6px 2px;border-radius:8px;background:#fff8e7;border:2px solid #b7791f;font-size:22px}.cq-carta small{font-size:10px}
.cq-bonos{font-size:11px;opacity:.75}
.cq-over{background:radial-gradient(circle,rgba(40,20,0,.6),rgba(15,8,0,.9))}.cq-win svg{width:130px;height:130px;filter:drop-shadow(0 0 22px var(--c));animation:cq-gira 3s ease-in-out infinite}
@keyframes cq-gira{50%{transform:translateY(-8px) rotate(3deg)}}
.cq-over details{max-width:520px;font-size:13px;color:#eee}
.gs.bajo .cq-turno svg{width:60px;height:60px}.gs.bajo .cq-jug small{display:none}.gs.bajo .cq-panel{font-size:12px;padding:6px 10px}
/* ---------- El Patrón ---------- */
.pt-side{position:absolute;right:0;top:0;bottom:0;width:min(300px,max(210px,30%));display:flex;flex-direction:column;gap:8px;padding:58px 10px 10px;background:linear-gradient(90deg,rgba(10,30,20,0),rgba(10,30,20,.55) 12%);z-index:2;overflow:auto} /* panel de la derecha */
.pt-js{display:grid;gap:5px}                                                 /* jugadores */
.pt-j{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:12px;background:#fbf6e8;color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 rgba(0,0,0,.35);transition:transform .3s}
.pt-j i{font-style:normal;width:32px;height:32px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:17px;border:2px solid var(--ink);flex:none}
.pt-j span{flex:1;min-width:0}.pt-j b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-j small{font-size:11px;color:var(--muted);font-weight:700}
.pt-j em{font-style:normal;font-weight:800;font-size:15px;color:#1f7a4f}
.pt-j.on{transform:translateX(-6px);box-shadow:0 0 0 3px var(--c),3px 3px 0 rgba(0,0,0,.35)} /* el que juega */
.pt-j.fuera{opacity:.45;filter:grayscale(1)}
.pt-acc{display:grid;gap:6px;color:#fff;font-weight:700}.pt-acc p{margin:0}.pt-big{font-size:19px;padding:12px}.pt-tip{font-size:12px;color:#ffe08a}
.pt-log{display:grid;gap:3px;font-size:12px;color:#d9f0e2;font-weight:600}.pt-log div:first-child{color:#fff;font-weight:800}
.pt-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
.pt-card{width:220px;display:grid;gap:4px;text-align:center;padding:0 0 10px;border-radius:12px;background:#fffaf0;color:var(--ink);border:3px solid var(--ink);box-shadow:4px 5px 0 rgba(0,0,0,.4);overflow:hidden;animation:gs-in .3s both} /* ficha de un barrio */
.pt-card b{background:var(--g);color:#fff;padding:8px;font-size:17px;text-shadow:1px 1px 0 rgba(0,0,0,.4)}.pt-card small{padding:0 10px;font-weight:600}.pt-card em{font-style:normal;font-weight:800}
.gs.bajo .pt-j small{display:none}.gs.bajo .pt-side{padding-top:56px}
.gs-modes.uno{grid-template-columns:minmax(0,320px)}                        /* juego para uno: un solo botón grande */
.gs-mode.grande{padding:14px 18px}.gs-mode.grande b{font-size:22px}.gs-mode.grande i{background:var(--tomato);color:#fff;font-size:20px}
.gs.bajo .gs-modes.uno{grid-template-columns:minmax(0,320px)}.gs.bajo .gs-mode.grande{grid-template-columns:auto 1fr;text-align:left;justify-items:start}.gs.bajo .gs-mode.grande i{grid-row:1/3}
/* ---------- Defensa del fuerte ---------- */
.ft-hud{position:absolute;top:10px;left:64px;display:flex;gap:8px;z-index:2;pointer-events:none} /* vidas, oro y oleada */
.ft-hud span{background:linear-gradient(#6e4624,#3e2512);color:#fff;font-weight:800;font-size:15px;padding:5px 12px;border-radius:12px;border:2px solid #e0b54a;box-shadow:0 3px 0 #1d0f06,inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 2px 0 rgba(0,0,0,.5)} /* carteles de madera con borde dorado */
.ft-hud .ft-o.pop{animation:ftPop .28s ease-out} /* el contador de oro salta cuando llega una moneda */
@keyframes ftPop{40%{transform:scale(1.22);background:rgba(160,120,0,.85)}} /* salto con brillo dorado */
.ft-o{color:#ffd447!important}
.ft-bt{position:absolute;right:10px;top:10px;display:flex;gap:8px;z-index:2} /* velocidad y llamar oleada (arriba a la derecha, así no tapan el fuerte) */
.gs .ft-bt .b{border-color:#e0b54a;box-shadow:0 3px 0 #1d0f06;font-size:13px;padding:6px 12px;min-height:0} /* botones más chicos para no tapar el campo */
.ft-menu{position:absolute;width:0;height:0;z-index:3;pointer-events:none} /* menú circular: se ubica sobre el lugar tocado */
.ft-menu[hidden]{display:none}
.ft-anillo{position:absolute;left:-66px;top:-66px;width:132px;height:132px;border-radius:50%;border:3px dashed rgba(255,226,140,.85);box-shadow:0 0 0 6px rgba(20,12,4,.22),inset 0 0 18px rgba(0,0,0,.25);animation:ftGira 9s linear infinite} /* aro dorado que gira */
.ft-rb{pointer-events:auto;position:absolute;left:-27px;top:-27px;width:54px;height:54px;border-radius:50%;padding:0;cursor:pointer;border:3px solid #e0b54a;background:radial-gradient(circle at 35% 30%,#94643a,#4a2c14 72%);box-shadow:0 4px 0 #24140a,0 6px 12px rgba(0,0,0,.45);display:grid;place-items:center;transform:translate(var(--dx),var(--dy));animation:ftRb .28s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--dl)} /* botón redondo de madera */
.ft-rb img{width:46px;height:46px;margin-top:-8px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45))} /* dibujito de la defensa */
.ft-rb i{font-style:normal;font-size:24px;line-height:1;color:#fff;text-shadow:0 2px 0 #000}
.ft-rb em{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);font:800 11px/1 var(--f-b);font-style:normal;color:#ffe08a;background:#2a1a0c;border:2px solid #e0b54a;border-radius:999px;padding:2px 6px;white-space:nowrap} /* precio */
.ft-rb span{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font:800 10px/1 var(--f-b);color:#fff;text-shadow:0 1px 0 #000,0 0 4px #000;white-space:nowrap} /* nombre */
.ft-rb:disabled{filter:grayscale(.9) brightness(.7);cursor:default}
.ft-nom{position:absolute;left:50%;top:-122px;transform:translateX(-50%);white-space:nowrap;font:800 13px var(--f-b);color:#fff;background:rgba(42,26,12,.92);border:2px solid #e0b54a;border-radius:10px;padding:3px 10px} /* nombre y nivel de la defensa */
@keyframes ftRb{from{transform:translate(0,0) scale(.2);opacity:0}}
@keyframes ftGira{to{transform:rotate(360deg)}}
.ft-ban{position:absolute;left:0;right:0;top:30%;text-align:center;pointer-events:none;z-index:3;font:400 clamp(26px,5vw,46px)/1 var(--f-d);color:#fff;text-shadow:3px 3px 0 var(--ink),0 0 20px rgba(255,90,54,.8)}
.ft-ban.va{animation:cq-entra 1.8s cubic-bezier(.2,.8,.2,1) both}
/* ---------- Zapping 10 ---------- */
.zp-ui{position:absolute;inset:auto 0 0 0;display:flex;gap:10px;justify-content:center;align-items:flex-end;flex-wrap:wrap;padding:10px;z-index:2;pointer-events:none} /* panel de abajo */
.zp-ui>*{pointer-events:auto}
.zp-card{display:grid;gap:4px;justify-items:center;padding:12px 18px;border-radius:16px;background:rgba(15,13,34,.85);color:#fff;border:2px solid rgba(255,255,255,.3);animation:gs-in .3s both}.zp-card b{font:400 22px var(--f-d);color:var(--sun)}.zp-card span{font-weight:700;font-size:13px}.zp-card .gs-go{justify-self:center}
.zp-tabla{display:grid;gap:3px;min-width:180px;padding:8px 12px;border-radius:14px;background:rgba(15,13,34,.75);color:#fff;font-size:13px}.zp-tabla div{display:flex;justify-content:space-between;gap:14px}.zp-tabla span{color:var(--sun);font-weight:800}
.over .zp-tabla{margin:0 auto}
/* ---------- Comodín ---------- */
.cm{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#2f8a5a,#14452c 75%,#0b2a1a);color:#fff;font-family:var(--f-b)} /* paño verde */
.cm::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px);pointer-events:none}
.cm-top{position:absolute;top:8px;left:62px;right:10px;display:flex;gap:10px;align-items:center;z-index:2} /* datos de arriba */
.cm-ronda,.cm-pts{display:grid;justify-items:center;line-height:1;padding:5px 12px;border-radius:12px;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.2)}
.cm-ronda small,.cm-pts small{font-size:11px;font-weight:700;opacity:.8}.cm-ronda b{font:400 20px var(--f-d)}.cm-pts b{font:400 24px var(--f-d);color:var(--sun)}
.cm-calc{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;background:rgba(0,0,0,.35);transition:transform .2s} /* fichas x mult */
.cm-calc span{min-width:52px;text-align:center;font:400 22px var(--f-d);padding:4px 8px;border-radius:10px}.cm-f{background:#2563eb}.cm-m{background:#dc2626}.cm-calc i{font-style:normal;font-weight:800}.cm-calc em{font-style:normal;font-weight:800;font-size:13px;min-width:90px}
.cm-calc.brilla{transform:scale(1.08);box-shadow:0 0 18px rgba(255,212,71,.6)}
.cm-datos{margin-left:auto;display:flex;gap:6px}.cm-datos span{padding:4px 8px;border-radius:10px;background:rgba(0,0,0,.35);font-weight:800;font-size:14px}
.cm-coms{position:absolute;top:62px;left:12px;right:12px;display:flex;gap:8px;justify-content:center;z-index:2} /* comodines */
.cm-com{position:relative;width:96px;min-height:56px;display:grid;justify-items:center;align-content:center;gap:1px;padding:4px;border-radius:12px;background:linear-gradient(#fff6dd,#f0d78f);color:var(--ink);border:2px solid #7a5200;box-shadow:0 3px 0 rgba(0,0,0,.35);font-size:11px;font-weight:800;text-align:center;cursor:default}
.cm-com i{font-style:normal;font-size:22px}.cm-com.vacio{background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.25);box-shadow:none}
.cm-com.pop,.cm-c.pop{animation:cm-pop .35s ease}
@keyframes cm-pop{40%{transform:translateY(-8px) rotate(-6deg) scale(1.15)}}
.cm-mesa{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);display:flex;gap:8px;z-index:1} /* cartas jugadas */
.cm-mano{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;justify-content:center;z-index:2;padding:0 150px 0 0} /* la mano en abanico */
.cm-c{position:relative;width:62px;height:90px;flex:none;margin:0 -6px;border-radius:9px;background:linear-gradient(#fffdf6,#f1e8d2);border:2px solid var(--pc);box-shadow:0 4px 8px rgba(0,0,0,.4);color:var(--pc);display:grid;place-items:center;cursor:pointer;transition:transform .2s,box-shadow .2s;transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3deg)) translateY(calc(var(--d,0) * 1px))} /* una carta */
.cm-c b{position:absolute;top:3px;left:6px;font:800 16px/1 var(--f-b)}.cm-c b.ab{top:auto;left:auto;bottom:3px;right:6px;transform:rotate(180deg)}.cm-c i{font-style:normal;font-size:30px}
.cm-mano .cm-c:hover{--d:-6}.cm-c.sel{--d:-22;box-shadow:0 0 0 3px var(--sun),0 10px 16px rgba(0,0,0,.45)} /* elegida: sube */
.cm-c.entra{animation:cm-entra .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i) * 50ms)}
@keyframes cm-entra{from{transform:translate(260px,-120px) rotate(40deg);opacity:0}}
.cm-c.mesa{transform:none;margin:0;animation:cm-mesa .35s ease both;animation-delay:calc(var(--i) * 70ms)}.cm-c.gris{opacity:.45;filter:grayscale(.7)}
@keyframes cm-mesa{from{transform:translateY(160px) scale(.8);opacity:0}}
.cm-salto{position:absolute;transform:translate(-50%,-110%);font:400 20px var(--f-d);padding:2px 8px;border-radius:8px;pointer-events:none;animation:cm-salto .9s ease-out both;z-index:5;white-space:nowrap}.cm-salto.azul{background:#2563eb}.cm-salto.rojo{background:#dc2626}
@keyframes cm-salto{0%{opacity:0;transform:translate(-50%,-60%) scale(.6)}20%{opacity:1;transform:translate(-50%,-130%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-220%)}}
.cm-bt{position:absolute;right:12px;bottom:14px;display:grid;gap:6px;z-index:3}.cm-bt .b{min-width:132px}
.cm-cartel{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);display:grid;justify-items:center;padding:10px 26px;border-radius:16px;background:rgba(15,13,34,.85);border:2px solid var(--sun);z-index:6;pointer-events:none;animation:cq-entra 2s both}.cm-cartel b{font:400 clamp(26px,5vw,40px)/1 var(--f-d);color:var(--sun)}.cm-cartel span{font-weight:800}
.cm-tienda{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:110px 16px 16px;background:rgba(5,20,12,.82);animation:gs-in .3s both} /* tienda */
.cm-tienda[hidden]{display:none}.cm-tienda h3{margin:0;font:400 28px var(--f-d);color:var(--sun)}.cm-tienda p{margin:0;font-weight:700}
.cm-of{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cm-oferta{appearance:none;cursor:pointer;width:160px;display:grid;justify-items:center;gap:3px;padding:10px;border-radius:14px;background:linear-gradient(#fff6dd,#f0d78f);color:var(--ink);border:3px solid #7a5200;box-shadow:0 4px 0 rgba(0,0,0,.4);font-family:var(--f-b);transition:transform .15s}
.cm-oferta:hover{transform:translateY(-4px) rotate(-1deg)}.cm-oferta i{font-style:normal;font-size:30px}.cm-oferta b{font-size:15px}.cm-oferta span{font-size:12px;font-weight:600}.cm-oferta em{font-style:normal;font-weight:800;background:var(--ink);color:var(--sun);padding:2px 10px;border-radius:999px}.cm-oferta:disabled{opacity:.5}
.cm-mios{font-size:12px;opacity:.8}
.gs.bajo .cm-c{width:52px;height:76px}.gs.bajo .cm-c i{font-size:24px}.gs.bajo .cm-com{width:78px;min-height:46px;font-size:10px}.gs.bajo .cm-com span{display:none}.gs.bajo .cm-coms{top:56px}.gs.bajo .cm-calc span{min-width:40px;font-size:18px}.gs.bajo .cm-tienda{padding-top:60px}.gs.bajo .cm-oferta{width:140px;padding:6px}
/* ---------- Truco ---------- */
.tr{position:absolute;inset:0;overflow:hidden;background:#3b2414;font-family:var(--f-b)} /* mesa de madera */
.tr-mesa{position:absolute;inset:6% 4%;border-radius:50%/42%;background:radial-gradient(ellipse at 50% 40%,#2f8a5a,#17533a 70%);border:10px solid #6b3f1f;box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.6)} /* paño verde ovalado */
.tr-score{position:absolute;top:8px;left:62px;z-index:3;display:grid;gap:3px;padding:6px 10px;border-radius:12px;background:rgba(20,10,4,.75);color:#f3dfb5;border:2px solid #8a5a2b} /* tanteador */
.tr-score small{font-size:11px;opacity:.85}
.tr-eq{display:flex;align-items:center;gap:6px}.tr-eq b{width:70px;font-size:12px}.tr-eq.nos b{color:var(--sun)}.tr-eq em{font-style:normal;font-weight:800;min-width:20px;text-align:right}
.tr-fs{display:flex;gap:2px;align-items:center}.tr-f{width:20px;height:20px}.tr-sep{width:2px;height:18px;background:#f3dfb5;margin:0 3px;opacity:.6}
.tr-as{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(15,13,34,.7);color:#fff;font-size:13px;border:2px solid transparent;transition:box-shadow .3s} /* un jugador */
.tr-av{display:flex;flex:none}.tr-as .av{display:block;width:32px;height:32px}.tr-as b{white-space:nowrap}.tr-manito{font-style:normal}
.tr-as.activo{border-color:var(--sun);box-shadow:0 0 16px rgba(255,212,71,.7)}.tr-as.amigo{background:rgba(31,95,174,.75)}
.tr-as.abajo{left:12px;bottom:12px}.tr-as.arriba{top:10px;left:50%;transform:translateX(-50%)}.tr-as.der{right:10px;top:42%}.tr-as.izq{left:10px;top:42%}
.tr-dorso{display:flex;margin-left:4px}.tr-dorso i{width:16px;height:24px;margin-left:-6px;border-radius:3px;background:repeating-linear-gradient(45deg,#7a1e1e 0 3px,#a83232 3px 6px);border:1.5px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.tr-c{position:relative;width:62px;height:92px;border-radius:8px;background:linear-gradient(#fffdf6,#f1e8d2);border:2px solid var(--pc);color:var(--pc);display:grid;place-items:center;box-shadow:0 4px 8px rgba(0,0,0,.45);font-family:var(--f-b)} /* carta española */
.tr-c b{position:absolute;top:3px;left:6px;font:800 17px/1 var(--f-b)}.tr-c b.ab{top:auto;left:auto;bottom:3px;right:6px;transform:rotate(180deg)}.tr-c i{font-style:normal;font-size:30px}.tr-c small{position:absolute;bottom:14px;font-size:8px;font-weight:700;opacity:.7;white-space:nowrap}
.tr-centro{position:absolute;left:50%;top:48%;width:0;height:0;z-index:1} /* cartas jugadas */
.tr-centro .tr-c{position:absolute;left:0;top:0;--x:calc((var(--b) - 1) * 30px);transition:transform .3s,opacity .3s}
.tr-centro .en.abajo{transform:translate(calc(-50% + var(--x)),18px) rotate(calc(var(--b) * 4deg - 4deg))}.tr-centro .en.arriba{transform:translate(calc(-50% + var(--x)),-128px) rotate(calc(var(--b) * -4deg + 4deg))}
.tr-centro .en.der{transform:translate(calc(60px + var(--x) * .6),-52px) rotate(calc(var(--b) * 5deg))}.tr-centro .en.izq{transform:translate(calc(-140px + var(--x) * .6),-52px) rotate(calc(var(--b) * -5deg))}
.tr-centro .tr-c.gano{box-shadow:0 0 0 3px var(--sun),0 6px 14px rgba(0,0,0,.5);z-index:2}.tr-centro .tr-c.perdio{filter:brightness(.8)}
.tr-centro .vuela{animation:tr-vuela .45s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes tr-vuela{from{opacity:0;translate:0 140px;scale:1.3}}
.tr-mano{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;z-index:3} /* mi mano */
.tr-mano .tr-c{width:82px;height:122px;transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)) translateY(calc(var(--y, 0) * 1px));transition:transform .2s}.tr-mano .tr-c i{font-size:40px}.tr-mano .tr-c b{font-size:21px}
.tr-mano .jugable{cursor:pointer}.tr-mano .jugable:hover{transform:translateY(-14px) scale(1.04)}
.tr-mano .reparte{animation:tr-reparte .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i) * 90ms)}
@keyframes tr-reparte{from{translate:0 -220px;rotate:160deg;opacity:0}}
.tr-bt{position:absolute;right:10px;bottom:10px;z-index:4;display:grid;gap:6px;justify-items:end;max-width:210px} /* cantos */
.tr-bt .b{min-width:130px}.tr-bt .gris{opacity:.85}.tr-espera{color:#fff;font-weight:700;font-size:13px;background:rgba(15,13,34,.6);padding:6px 12px;border-radius:999px}
.tr-pide{font:400 20px var(--f-d);color:var(--sun);text-shadow:2px 2px 0 var(--ink)}
.tr-globo{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 14px;border-radius:16px;background:#fff;color:var(--ink);font:400 18px var(--f-d);box-shadow:0 4px 0 rgba(0,0,0,.35);animation:tr-globo 2.3s both;z-index:5} /* lo que dice cada uno */
.tr-globo::after{content:'';position:absolute;left:50%;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0;transform:translateX(-50%)}
.tr-as.arriba .tr-globo{bottom:auto;top:calc(100% + 8px)}.tr-as.arriba .tr-globo::after{bottom:auto;top:-8px;border-top-color:transparent;border-bottom:8px solid #fff;border-top:0}
.tr-globo.canto{background:var(--sun)}.tr-globo.canto::after{border-top-color:var(--sun)}.tr-globo.si{background:#3ddc84}.tr-globo.si::after{border-top-color:#3ddc84}.tr-globo.no{background:#ffb4a8}.tr-globo.no::after{border-top-color:#ffb4a8}
@keyframes tr-globo{0%{opacity:0;transform:translateX(-50%) scale(.4)}12%{opacity:1;transform:translateX(-50%) scale(1.15)}20%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
.tr-aviso{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);z-index:6;display:grid;justify-items:center;padding:10px 24px;border-radius:16px;background:rgba(20,10,4,.85);border:2px solid var(--sun);color:#fff;pointer-events:none}.tr-aviso b{font:400 26px var(--f-d);color:var(--sun)}.tr-aviso.va{animation:cq-entra 1.8s both}
.gs.bajo .tr-c{width:52px;height:78px}.gs.bajo .tr-c i{font-size:24px}.gs.bajo .tr-mano .tr-c{width:68px;height:100px}.gs.bajo .tr-mano .tr-c i{font-size:32px}.gs.bajo .tr-c small{display:none}
/* ---------- Chinchón ---------- */
.ch{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#7a3b2a,#3d1a10 75%);font-family:var(--f-b)} /* mesa de bar */
.ch::before{content:'';position:absolute;inset:7% 5%;border-radius:28px;background:radial-gradient(ellipse at 50% 40%,#2b6f9e,#173f5c);border:8px solid #5a2e16;box-shadow:inset 0 0 30px rgba(0,0,0,.5)} /* paño azul */
.ch-score{position:absolute;top:8px;left:62px;z-index:3;display:grid;gap:3px;min-width:170px;padding:6px 10px;border-radius:12px;background:rgba(15,8,4,.78);color:#fff;font-size:12px} /* puntos */
.ch-score div{position:relative;display:flex;justify-content:space-between;gap:10px;padding:2px 4px;border-radius:6px;overflow:hidden}.ch-score div i{position:absolute;left:0;bottom:0;height:3px;background:#ff5a36}.ch-score div.on{background:rgba(255,212,71,.2)}.ch-score div.fuera{opacity:.4;text-decoration:line-through}.ch-score span{font-weight:800;color:var(--sun)}.ch-score small{opacity:.75}
.ch-rivales{position:absolute;top:10px;left:50%;transform:translateX(-30%);display:flex;gap:12px;z-index:2} /* rivales */
.ch-riv{display:grid;justify-items:center;gap:3px;padding:4px 10px;border-radius:12px;background:rgba(15,8,4,.6);color:#fff;font-size:12px;border:2px solid transparent}.ch-riv.on{border-color:var(--sun);box-shadow:0 0 12px rgba(255,212,71,.6)}.ch-riv.fuera{opacity:.4}
.ch-riv span{display:flex}.ch-riv span i{width:14px;height:21px;margin-left:-5px;border-radius:3px;background:repeating-linear-gradient(45deg,#1e3a8a 0 3px,#2b4fb3 3px 6px);border:1.5px solid #fff}
.ch-centro{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;gap:26px;z-index:2} /* mazo y pozo */
.ch-pila{position:relative;width:66px;height:96px;cursor:pointer;border-radius:9px;transition:box-shadow .3s}.ch-pila.brilla{box-shadow:0 0 0 3px var(--sun),0 0 18px rgba(255,212,71,.8);animation:ch-latido 1.2s infinite}
@keyframes ch-latido{50%{transform:translateY(-3px)}}
.ch-dorso{position:absolute;inset:0;border-radius:9px;background:repeating-linear-gradient(45deg,#1e3a8a 0 5px,#2b4fb3 5px 10px);border:3px solid #fff;box-shadow:3px 3px 0 #0b1e4a,6px 6px 0 #0b1e4a}.ch-pila small{position:absolute;bottom:-20px;left:0;right:0;text-align:center;color:#fff;font-weight:800;font-size:12px}
.ch-vacio{width:66px;height:96px;border-radius:9px;border:2px dashed rgba(255,255,255,.4);display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:12px}
.ch-c{position:relative;width:62px;height:92px;flex:none;border-radius:8px;background:linear-gradient(#fffdf6,#f1e8d2);border:2px solid var(--pc,#7c3aed);color:var(--pc,#7c3aed);display:grid;place-items:center;box-shadow:0 4px 8px rgba(0,0,0,.45);cursor:pointer;transition:transform .2s,box-shadow .2s} /* carta */
.ch-c b{position:absolute;top:3px;left:6px;font:800 17px/1 var(--f-b)}.ch-c b.ab{top:auto;left:auto;bottom:3px;right:6px;transform:rotate(180deg)}.ch-c i{font-style:normal;font-size:28px}
.ch-c.comodin{background:linear-gradient(135deg,#fff3c4,#ffd6f0,#c9f2ff);--pc:#7c3aed}.ch-c.comodin b{position:static;font-size:10px}
.ch-pila .ch-c{width:66px;height:96px}.ch-c.cae{animation:ch-cae .4s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ch-cae{from{transform:translateY(120px) rotate(-30deg);opacity:0}}
.ch-mano{position:absolute;left:50%;bottom:10px;transform:translateX(-58%);display:flex;gap:4px;z-index:3;padding-bottom:8px} /* mi mano */
.ch-mano .ch-c{width:70px;height:104px}.ch-mano .ch-c.sel{transform:translateY(-20px);box-shadow:0 0 0 3px var(--sun),0 10px 16px rgba(0,0,0,.45)}
.ch-mano .ch-c::after{content:'';position:absolute;left:6px;right:6px;bottom:-9px;height:5px;border-radius:3px;background:transparent}.ch-mano .j1::after{background:#3ddc84}.ch-mano .j2::after{background:#ffd447}.ch-mano .j3::after{background:#ff7ac6} /* juegos marcados con una rayita de color */
.ch-mano .nueva{animation:ch-nueva .45s cubic-bezier(.2,.9,.3,1.2) both}@keyframes ch-nueva{from{transform:translate(-120px,-200px) rotate(-40deg);opacity:0}}
.ch-mano .reparte{animation:tr-reparte .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i) * 70ms)}
.ch-bt{position:absolute;right:10px;bottom:10px;z-index:4;display:grid;gap:6px;justify-items:end}.ch-bt .b{min-width:140px}.ch-sueltos{color:#fff;font-weight:700;font-size:13px}.ch-sueltos b{color:var(--sun);font-size:18px}.ch-tip{color:#ffe08a;font-size:12px;font-weight:700}
.ch-corte{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:56px 14px 14px;background:rgba(10,5,2,.82);color:#fff}.ch-corte[hidden]{display:none}.ch-corte.va{animation:gs-in .35s both} /* todos muestran las cartas */
.ch-corte h3{margin:0;font:400 clamp(22px,4vw,34px) var(--f-d);color:var(--sun)}
.ch-res{display:flex;align-items:center;gap:10px;padding:4px 10px;border-radius:12px;background:rgba(255,255,255,.08);max-width:100%}.ch-res.corta{background:rgba(255,212,71,.18)}.ch-res>b{min-width:80px;font-size:13px}.ch-res em{font-style:normal;font:400 22px var(--f-d);color:#ff9a7a;min-width:46px;text-align:right}.ch-res em.menos{color:#3ddc84}
.ch-juegos{display:flex;gap:10px;flex-wrap:wrap}.ch-j{display:flex}.ch-j .ch-c{margin-right:-14px}.ch-j.sueltas .ch-c{filter:saturate(.4) brightness(.85)}
.ch-c.mini{width:34px;height:50px;cursor:default}.ch-c.mini i{font-size:15px}.ch-c.mini b{font-size:11px;top:2px;left:3px}.ch-c.mini b.ab{display:none}
.gs.bajo .ch-mano .ch-c{width:58px;height:86px}.gs.bajo .ch-mano .ch-c i{font-size:22px}.gs.bajo .ch-c.mini{width:28px;height:42px}
/* ======================= SÚPER ACTUALIZACIÓN DE GRÁFICOS (cartas, mesas y efectos) ======================= */
.po-naipe{display:block;width:100%;height:100%}                             /* naipe dibujado que llena su carta */
.tr-c,.ch-c,.cm-c{background:none;border:0;padding:0;display:block;border-radius:9px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45));color:inherit} /* las cartas ahora son el dibujo */
.tr-c b,.tr-c i,.tr-c small,.ch-c b,.ch-c i,.cm-c b,.cm-c i{display:none}    /* (ya no se usan las letras viejas) */
.ch-c.comodin{background:none}
/* --- madera, paño, luz --- */
.tr,.ch{background:radial-gradient(ellipse at 50% 20%,rgba(255,214,150,.16),transparent 60%),repeating-linear-gradient(91deg,#4a2a14 0 7px,#56321b 7px 12px,#3d220f 12px 20px,#4f2d16 20px 27px)} /* mesa de madera con vetas */
.tr-mesa,.ch::before{background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.12),transparent 55%),radial-gradient(ellipse at 50% 45%,#2e8b58,#155636 72%,#0d3a24);border:12px solid #6b3f1f;border-image:none;box-shadow:inset 0 0 0 3px rgba(255,214,150,.25),inset 0 0 50px rgba(0,0,0,.55),0 14px 30px rgba(0,0,0,.6)} /* paño verde con borde de madera */
.ch::before{background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.12),transparent 55%),radial-gradient(ellipse at 50% 45%,#2f7fb3,#184a6d 72%,#0f2f47)} /* el chinchón, paño azul */
.tr-mesa::after,.ch-luz::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")} /* textura de paño */
.tr-luz,.ch-luz{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(255,236,190,.16),transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.45))} /* lámpara de arriba y bordes en penumbra */
.ch-luz{inset:7% 5%;border-radius:28px;z-index:0}
/* --- jugadores --- */
.tr-as,.ch-riv,.ch-score,.tr-score{background:linear-gradient(#2a1a10ee,#160d07ee);border:2px solid #8a5a2b;box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,214,150,.25)}
.tr-as.activo,.ch-riv.on{border-color:#ffd447;box-shadow:0 0 0 2px rgba(255,212,71,.4),0 0 22px rgba(255,212,71,.65);animation:po-latido 1.4s ease-in-out infinite}
@keyframes po-latido{50%{box-shadow:0 0 0 2px rgba(255,212,71,.2),0 0 10px rgba(255,212,71,.35)}}
.tr-as.amigo{background:linear-gradient(#1d3f73ee,#102545ee)}
.tr-dorso i,.ch-riv span i{background:var(--po-dorso) center/cover;border:0;border-radius:3px;width:18px;height:27px;box-shadow:0 2px 3px rgba(0,0,0,.5)}
/* --- mano de cartas: reparto con giro y brillo al pasar --- */
.tr-mano .reparte{animation:po-reparte .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes po-reparte{0%{translate:0 -240px;rotate:y 90deg;scale:.6;opacity:0}60%{rotate:y 0deg;opacity:1}}
.tr-mano .jugable:hover,.ch-mano .ch-c:hover{filter:drop-shadow(0 10px 10px rgba(0,0,0,.5)) brightness(1.04)}
.tr-centro .tr-c.gano{box-shadow:0 0 0 3px #ffd447,0 0 24px rgba(255,212,71,.8);animation:po-gana 1s ease-in-out 2}
@keyframes po-gana{50%{box-shadow:0 0 0 3px #fff3c4,0 0 34px rgba(255,212,71,1)}}
.tr-centro .vuela{animation:po-vuela .5s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes po-vuela{from{opacity:0;translate:0 160px;scale:1.35;rotate:-25deg}}
/* --- ¡TRUCO! gigante --- */
.tr-sello{position:absolute;left:50%;top:44%;z-index:7;pointer-events:none;translate:-50% -50%;animation:po-sello 1.3s cubic-bezier(.2,1.4,.4,1) both}
.tr-sello span{display:block;text-transform:uppercase;padding:22px 40px;font:400 clamp(30px,7vw,64px)/1 var(--f-d);color:#fff;background:#d62828;text-shadow:4px 4px 0 #15132b;clip-path:polygon(50% 0,61% 18%,82% 6%,78% 29%,100% 30%,85% 48%,100% 66%,77% 70%,82% 94%,60% 82%,50% 100%,40% 82%,18% 94%,23% 70%,0 66%,15% 48%,0 30%,22% 29%,18% 6%,39% 18%)} /* estallido de historieta */
.tr-sello.nos span{background:#1f5fae}
@keyframes po-sello{0%{scale:.2;rotate:-25deg;opacity:0}25%{scale:1.15;rotate:6deg;opacity:1}35%{scale:1;rotate:-3deg}45%{rotate:2deg}80%{scale:1;opacity:1}100%{scale:1.4;opacity:0}}
/* --- fósforos que se prenden --- */
.tr-f{width:22px;height:22px}.tr-prende{animation:po-prende 1.2s ease-out}
@keyframes po-prende{0%{filter:drop-shadow(0 0 6px #ffb020) brightness(2)}100%{filter:none}}
/* --- chinchón: mazo con espesor y pozo desparramado --- */
.ch-dorso{background:var(--po-dorso) center/cover;border:0;border-radius:9px;box-shadow:0 3px 6px rgba(0,0,0,.5)}.ch-dorso.d2{inset:-2px 2px 2px -2px;z-index:-1;filter:brightness(.8)}.ch-dorso.d3{inset:-4px 4px 4px -4px;z-index:-2;filter:brightness(.65)}
#chPozo{position:relative}#chPozo .ch-c{position:absolute;inset:0;transform:rotate(var(--r,0deg)) translate(calc(var(--k,0) * -4px),calc(var(--k,0) * 3px))}#chPozo .ch-c.abajo{filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)) brightness(.9)}
.ch-pila .ch-c{width:66px;height:99px}
.ch-mano .ch-c.sel{box-shadow:0 0 0 3px #ffd447,0 12px 18px rgba(0,0,0,.45)}
/* --- comodín: fondo que gira, cartas que flotan, comodines con brillo holográfico --- */
.cm{background:#071f15}.cm-fondo{position:absolute;inset:-60%;background:conic-gradient(from 0deg,#0f3d2a,#1d6b46,#0a2a1c,#14553a,#0e3a2a,#21754d,#0f3d2a);filter:blur(40px);animation:po-gira 60s linear infinite;opacity:.9}
@keyframes po-gira{to{rotate:360deg}}
.cm::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.55));z-index:8} /* líneas de pantalla y viñeta */
.cm-mano .cm-c{animation:po-flota 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.45s)}.cm-mano .cm-c.entra{animation:cm-entra .45s cubic-bezier(.2,.9,.3,1.2) both,po-flota 3.2s ease-in-out .45s infinite}
@keyframes po-flota{50%{translate:0 -5px}}
.cm-com{width:auto;min-width:90px;max-width:120px;min-height:58px;padding:5px 8px;border-radius:10px;background:linear-gradient(160deg,#fff8e1,#f4dc9a 60%,#e2bd5c);border:2px solid var(--rar,#4ade80);box-shadow:0 0 0 2px #3b2a0a,0 4px 10px rgba(0,0,0,.45),0 0 14px color-mix(in srgb,var(--rar,#4ade80) 60%,transparent);overflow:hidden} /* comodín como carta con color de rareza */
.cm-com::after{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 48%,rgba(180,140,255,.35) 52%,transparent 60%);animation:po-holo 4s linear infinite;pointer-events:none} /* brillo holográfico */
@keyframes po-holo{0%{translate:-60% 0}100%{translate:60% 0}}
.cm-com small{display:block;font-size:9px;font-weight:600;line-height:1.1;opacity:.85}.cm-com.vacio::after{display:none}
.cm-calc.brilla{box-shadow:0 0 0 2px #ffd447,0 0 26px #ff6a00,0 0 46px rgba(255,60,0,.6);animation:po-fuego .25s ease-in-out infinite alternate}
@keyframes po-fuego{to{box-shadow:0 0 0 2px #ffe08a,0 0 34px #ff9a00,0 0 60px rgba(255,90,0,.75)}}
.cm-f,.cm-m{box-shadow:inset 0 -3px 0 rgba(0,0,0,.3),0 2px 0 rgba(0,0,0,.4)}
.cm-c.sel{box-shadow:0 0 0 3px #ffd447,0 12px 18px rgba(0,0,0,.5)}
.gs.bajo .cm-com small{display:none}.gs.bajo .cm-com{min-width:64px;min-height:44px}.gs.bajo .tr-f{width:17px;height:17px}

/* Defensa del fuerte: menú con la batalla en primera persona y San Martín */
.gs[data-j="fuerte"] .gs-ui{justify-content:flex-start;background:linear-gradient(90deg,rgba(18,8,4,.85),rgba(18,8,4,.5) 42%,rgba(0,0,0,0) 60%)} /* el menú a la izquierda, la batalla se ve a la derecha */
.gs[data-j="fuerte"] .gs-panel{width:min(100%,46%,560px)}
.gs-stage canvas.ft-port{display:block;width:100%;height:100%} /* lienzo de la batalla */
.ft-dice{position:absolute;z-index:8;pointer-events:none;background:#fffbea;color:#2a1a0c;border:3px solid #2a1a0c;border-radius:16px;padding:8px 13px 10px;box-shadow:0 5px 0 rgba(0,0,0,.35);font-family:var(--f-b)} /* globo de diálogo de San Martín */
.ft-dice b{display:block;font:800 11px/1.2 var(--f-b);color:#1d3a8f;text-transform:uppercase;letter-spacing:.04em}
.ft-dice p{margin:3px 0 0;font:800 clamp(13px,1.9vw,20px)/1.2 var(--f-b);min-height:2.4em}
.ft-dice::after{content:"";position:absolute;right:-14px;bottom:14px;border:9px solid transparent;border-left:14px solid #2a1a0c} /* colita apuntando al General */
.ft-dice.va{animation:ftDice .35s cubic-bezier(.2,1.5,.4,1) both}
@keyframes ftDice{from{transform:scale(.6);opacity:0}}
.ft-son{position:absolute;z-index:9;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;border:2px solid #e0b54a;background:rgba(42,26,12,.85);font-size:20px;cursor:pointer} /* prender o apagar el sonido */
.gs:not([data-j="fuerte"]) .ft-dice,.gs:not([data-j="fuerte"]) .ft-son{display:none}

/* Defensa del fuerte: botones de madera con dorado y celeste para que combinen con el juego */
.gs[data-j="fuerte"] .gs-logo{color:#ffd447;text-shadow:3px 3px 0 #2a1406,0 0 28px rgba(255,140,40,.6)} /* título dorado con brillo de fuego */
.gs[data-j="fuerte"] .gs-sub{color:#f3e2bf}
.gs[data-j="fuerte"] .gs-mode{position:relative;overflow:hidden;border:3px solid #e0b54a;color:#ffeec4;background:repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 16px),linear-gradient(#94623a,#5a3618 55%,#3e2412);box-shadow:0 5px 0 #1d0f06,0 10px 24px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.2)} /* tabla de madera con borde dorado */
.gs[data-j="fuerte"] .gs-mode::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,240,190,.28),transparent);animation:ftBrillo 3.2s ease-in-out infinite} /* brillo que pasa por la madera */
.gs[data-j="fuerte"] .gs-mode:hover{box-shadow:0 5px 0 #1d0f06,0 0 0 4px rgba(255,212,71,.35),0 10px 24px rgba(0,0,0,.5)}
.gs[data-j="fuerte"] .gs-mode:active{box-shadow:0 1px 0 #1d0f06}
.gs[data-j="fuerte"] .gs-mode b{color:#ffe08a;font-family:var(--f-d);font-weight:400;letter-spacing:.5px;text-shadow:2px 2px 0 #1d0f06} /* «Jugar» con letra de cartel */
.gs[data-j="fuerte"] .gs-mode span{color:#ecd6a8}
.gs[data-j="fuerte"] .gs-mode i{background:linear-gradient(#75aadb 0 33%,#fff 33% 66%,#75aadb 66%);border:2px solid #e0b54a;color:#1d3a8f;text-shadow:0 1px 0 #fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)} /* ícono con la bandera */
.gs[data-j="fuerte"] .gs-help{background:linear-gradient(#f3e6c4,#e0c894);color:#3e2412;border:2px solid #8a5a2e;box-shadow:0 4px 0 rgba(29,15,6,.6)} /* «Cómo se juega» como un pergamino */
.gs[data-j="fuerte"] .gs-help summary{color:#5a3618}
.gs[data-j="fuerte"] .gs-btn{background:linear-gradient(#94623a,#4a2c14);color:#ffe08a;border-color:#e0b54a} /* botón de volver de madera */
.gs[data-j="fuerte"] .b{background:linear-gradient(#94623a,#4a2c14);color:#ffe08a;border-color:#e0b54a;box-shadow:0 3px 0 #1d0f06;text-shadow:1px 1px 0 #1d0f06} /* botones del juego y del final, de madera */
.gs[data-j="fuerte"] .b.tom{background:linear-gradient(#e0502e,#8e1f12);color:#fff} /* «¡Que vengan!» y «Otra» en rojo fuego */
.gs[data-j="fuerte"] .over{background:radial-gradient(circle,rgba(60,28,10,.8),rgba(12,5,2,.92))} /* pantalla final con luz de fogata */
.gs[data-j="fuerte"] .over h2{font-family:var(--f-d);font-weight:400;color:#ffd447;text-shadow:3px 3px 0 #2a1406}
@keyframes ftBrillo{0%,55%{left:-60%}100%{left:130%}}

/* Mesa nueva: cartas que se encimen al tirarlas, reparto con giro y adornos (mate, termo y bizcochitos) */
.tr-centro .tr-c.en{position:absolute;left:0;top:0;width:70px;height:105px;margin:-52px 0 0 -35px;transform:translate(var(--tx),var(--ty)) rotate(var(--r));transition:transform .35s,filter .3s} /* todas las cartas jugadas en el medio, encimadas */
.tr-centro .tr-c.vieja{filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)) brightness(.88)} /* las de bazas anteriores, un poco en sombra */
.tr-centro .tr-c.vuela{animation:po-tira .6s cubic-bezier(.2,.75,.3,1) both} /* la carta vuela desde la mano de quien la tira */
.tr-centro .tr-c.vuela::after{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;margin:-75% 0 0 -75%;border-radius:50%;border:3px solid rgba(255,255,255,.55);opacity:0;animation:po-golpe .5s ease-out .38s} /* onda cuando pega en el paño */
@keyframes po-tira{0%{transform:translate(calc(var(--tx) + var(--fx)),calc(var(--ty) + var(--fy))) rotate(calc(var(--r) - 220deg)) scale(1.4);opacity:.3}62%{transform:translate(var(--tx),var(--ty)) rotate(calc(var(--r) + 7deg)) scale(1.06);opacity:1}80%{transform:translate(var(--tx),var(--ty)) rotate(calc(var(--r) - 2deg)) scale(.97)}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(1)}}
@keyframes po-golpe{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.1);opacity:0}}
.tr-centro .tr-c.gano{animation:po-gana 1s ease-in-out 2;z-index:60!important} /* la que ganó la baza se ve arriba y brilla */
.tr-mano .tr-c,.ch-mano .ch-c{position:relative}
.tr-mano .reparte{animation:po-reparte2 .75s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i) * 140ms)} /* reparto: la carta viene del mazo y se da vuelta en el aire */
.tr-mano .reparte::after{content:"";position:absolute;inset:0;border-radius:8px;background:var(--po-dorso) center/100% 100%;animation:po-tapa .75s both;animation-delay:calc(var(--i) * 140ms)} /* el dorso que se ve antes de darse vuelta */
@keyframes po-reparte2{0%{transform:translate(calc((1 - var(--i)) * 70px),-46vh) rotate(-30deg) scaleX(1);opacity:0}15%{opacity:1}50%{transform:translate(0,-34px) rotate(-8deg) scaleX(.04)}100%{transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)) translateY(calc(var(--y, 0) * 1px)) scaleX(1)}}
@keyframes po-tapa{0%,49%{opacity:1}51%,100%{opacity:0}}
#chPozo .ch-c{transform:translate(var(--px,0),var(--py,0)) rotate(var(--r,0deg))} /* el pozo: cartas desparramadas y encimadas */
#chPozo .ch-c.cae{animation:po-cae .55s cubic-bezier(.2,.75,.3,1) both}
@keyframes po-cae{0%{transform:translate(0,46vh) rotate(-200deg) scale(1.35);opacity:.3}65%{transform:translate(var(--px,0),var(--py,0)) rotate(calc(var(--r,0deg) + 6deg)) scale(1.05);opacity:1}100%{transform:translate(var(--px,0),var(--py,0)) rotate(var(--r,0deg)) scale(1)}}
.po-deco{position:absolute;inset:0;pointer-events:none;z-index:1} /* adornos arriba del paño y debajo de las cartas */
.po-deco svg{display:block;width:100%;height:auto;overflow:visible}
.po-d-mate{position:absolute;width:62px;left:12%;bottom:21%;transform:rotate(-8deg)} /* el mate */
.po-d-termo{position:absolute;width:38px;left:calc(12% + 56px);bottom:20%;transform:rotate(5deg)} /* el termo al lado */
.po-d-plato{position:absolute;width:100px;right:12%;top:17%;transform:rotate(-6deg)} /* plato con bizcochitos */
.ch .po-d-mate{left:6%;bottom:auto;top:42%}.ch .po-d-termo{left:calc(6% + 56px);bottom:auto;top:36%}.ch .po-d-plato{right:6%;top:38%} /* en el Chinchón, a los costados del mazo */
.po-vapor{position:absolute;left:40%;top:-4px;width:12px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0));opacity:0;animation:po-vapor 3.2s ease-in infinite} /* vapor del mate */
.po-vapor.dos{left:52%;animation-delay:1.6s}
@keyframes po-vapor{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.85}100%{transform:translate(8px,-36px) scale(1.5);opacity:0}}
.gs.bajo .tr-centro .tr-c.en{width:56px;height:84px;margin:-42px 0 0 -28px}.gs.bajo .po-d-mate{width:46px}.gs.bajo .po-d-termo{width:28px;left:calc(12% + 42px)}.gs.bajo .ch .po-d-termo{left:calc(6% + 42px)}.gs.bajo .po-d-plato{width:76px} /* pantallas petisas */

/* ===================== INTERFAZ NUEVA: tema «noche de previa», colores, efectos al mover el celu y perfil ===================== */
:root{--gx:0;--gy:0;--neon1:#ff4fb8;--neon2:#3ee0ff;--neon3:#7b5cff} /* inclinación del celu (de -1 a 1) y colores neón */
/* fondo de fiesta: luces de boliche y dibujitos que flotan y se corren al mover el celu */
.ap-fondo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ap-fondo span{position:absolute;font-size:26px;opacity:.22;transform:translate(calc(var(--gx) * var(--d) * -38px),calc(var(--gy) * var(--d) * -38px));will-change:transform} /* cada dibujito se corre según su profundidad */
.ap-fondo span i{display:block;font-style:normal;animation:ap-flota var(--t) ease-in-out infinite alternate;rotate:var(--r)} /* y flota despacito */
@keyframes ap-flota{to{translate:0 -18px;rotate:calc(var(--r) * -1)}}
.ap-fondo .luz{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(40px);opacity:0;transform:translate(calc(var(--gx) * 30px),calc(var(--gy) * 30px))} /* manchas de luz (solo de noche) */
.ap,.ap-tabs,.ap-head{position:relative;z-index:1}.ap-tabs{position:fixed}.ap-head{position:sticky}
/* tarjeta de perfil (inicio y perfil) */
.hero{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border:3px solid var(--ink);border-radius:22px;box-shadow:var(--sh);overflow:hidden;color:#fff;min-height:118px;transform:perspective(900px) rotateX(calc(var(--gy) * -5deg)) rotateY(calc(var(--gx) * 6deg));animation:ap-entra .5s cubic-bezier(.2,1.3,.4,1) both} /* se inclina con el celu */
.hero-bg{position:absolute;inset:-20px;background:var(--banner);transform:translate(calc(var(--gx) * -14px),calc(var(--gy) * -14px))} /* el fondo elegido, con paralaje */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,25,.55),rgba(10,6,25,.1) 70%)} /* oscurece un poco detrás del texto */
.hero-brillo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--gx) * 45%) calc(35% + var(--gy) * 45%),rgba(255,255,255,.38),transparent 45%);mix-blend-mode:overlay} /* brillo que sigue la inclinación */
.hero-av{position:relative;flex:none;transform:translate(calc(var(--gx) * 8px),calc(var(--gy) * 8px));animation:ap-respira 3.2s ease-in-out infinite} /* el avatar flota un poquito */
@keyframes ap-respira{50%{translate:0 -4px}}
.hero-tx{position:relative;display:grid;gap:2px;min-width:0;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero-tx small{font-weight:800;font-size:13px;opacity:.9}
.hero-tx b{font:400 clamp(22px,6vw,30px)/1 var(--f-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-tx span{font-weight:700;font-size:14px;opacity:.95}
.hero-tx em{font-style:normal;font-weight:800;font-size:12px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:1px 9px;justify-self:start;margin-top:3px}
.hero-ed{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-size:17px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.hero.grande{flex-direction:column;text-align:center;padding:22px 16px 18px}.hero.grande .hero-tx{justify-items:center}.hero.grande .hero-tx em{justify-self:center}.hero.grande .av.big{width:124px;height:124px} /* versión grande del perfil */
.chip-mov{appearance:none;border:2px dashed var(--neon1);background:rgba(255,79,184,.12);color:inherit;border-radius:999px;padding:8px 14px;font-weight:800;cursor:pointer;align-self:center}
/* avatares: estado y marcos animados */
.av .emo{position:absolute;right:-4px;top:-4px;font-style:normal;font-size:calc(var(--avs,48px) * .34);line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))} /* emoji de estado en la esquina */
.av.big{--avs:96px}.av.sm{--avs:34px}.av.sm .emo{display:none}
.av.fx-fuego svg{animation:ap-fuego 1.2s ease-in-out infinite alternate}@keyframes ap-fuego{to{filter:drop-shadow(0 0 6px #ff8a3d) brightness(1.08)}} /* marco de fuego que late */
.av.fx-neon svg{animation:ap-neon 1.6s ease-in-out infinite alternate}@keyframes ap-neon{from{filter:drop-shadow(0 0 2px #ff4fb8)}to{filter:drop-shadow(0 0 8px #ff4fb8)}} /* marco neón que titila */
/* tarjetas de juegos de colores con efecto 3D */
.gcard{--c:var(--grape);box-shadow:4px 4px 0 var(--c);animation:ap-entra .45s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i,0) * 55ms);transition:box-shadow .2s}
.gcard .art{background:var(--c)}
.gcard .tag{background:var(--c);color:#15132b}
.gcard .tx span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard.tilt{transform:perspective(700px) rotateX(calc(var(--gy) * -7deg)) rotateY(calc(var(--gx) * 9deg)) translateZ(0)} /* se inclina con el celu */
.gcard.tilt:active{transform:perspective(700px) scale(.96)}
.gcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(50% + var(--gx) * 50%) calc(30% + var(--gy) * 50%),rgba(255,255,255,.42),transparent 48%);mix-blend-mode:overlay;border-radius:inherit} /* reflejo que se mueve */
@keyframes ap-entra{from{opacity:0;transform:translateY(18px) scale(.94)}}
.web a{animation:ap-entra .45s both;animation-delay:calc(var(--i,0) * 40ms)}
h2.sec{display:flex;align-items:center;gap:8px}h2.sec::after{content:"";flex:1;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--tomato),var(--sun),var(--mint),var(--grape),transparent)} /* subrayado de colores */
/* cabecera y pestañas con colores de previa */
.ap-head{background:linear-gradient(90deg,#ff4fb8,#7b5cff,#3ee0ff,#ff4fb8);background-size:300% 100%;animation:ap-cielo 12s linear infinite} /* degradé que se mueve */
@keyframes ap-cielo{to{background-position:300% 0}}
.ap-title{text-shadow:2px 2px 0 rgba(21,19,43,.55)}
.ap-tabs button{transition:transform .15s,background .2s}.ap-tabs button[aria-current="page"]{background:linear-gradient(135deg,#ffc530,#ff8a3d);transform:translateY(-3px);box-shadow:0 3px 0 var(--ink)} /* pestaña elegida que salta */
.ap-tabs button[aria-current="page"] svg{animation:ap-salto .4s cubic-bezier(.2,1.6,.4,1)}@keyframes ap-salto{from{transform:scale(.6)}}
/* editor del perfil */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips button{appearance:none;flex:none;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:6px 13px;font-weight:800;cursor:pointer;white-space:nowrap}
.chips button[aria-pressed="true"]{background:var(--c,var(--sun));color:#15132b;box-shadow:2px 2px 0 var(--ink);transform:translateY(-1px)}
.opciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.opciones button{appearance:none;aspect-ratio:1;border:2px solid var(--ink);border-radius:14px;background:#fff;padding:3px;cursor:pointer;transition:transform .15s}
.opciones button svg{width:100%;height:100%;display:block}
.opciones button[aria-pressed="true"]{outline:3px solid var(--neon1);outline-offset:2px;transform:scale(1.06)}
.opciones.colores{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}.opciones .color{border-radius:50%}
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.temas button{appearance:none;border:3px solid var(--ink);border-radius:14px;overflow:hidden;padding:0;cursor:pointer;background:#fff;color:var(--ink);font-weight:800;font-size:13px}
.temas button i{display:block;height:46px;background:var(--banner)}.temas button span{display:block;padding:3px}
.temas button[aria-pressed="true"]{outline:3px solid var(--neon1);outline-offset:2px}
.estados{display:flex;flex-wrap:wrap;gap:6px}
.estados button{appearance:none;width:46px;height:46px;border:2px solid var(--ink);border-radius:14px;background:#fff;font-size:24px;cursor:pointer}
.estados button[aria-pressed="true"]{background:var(--sun);transform:scale(1.1) rotate(-6deg)}
.guardar.wide{position:sticky;bottom:calc(84px + var(--safe-b));z-index:5;width:auto;align-self:flex-end;box-shadow:0 6px 18px rgba(0,0,0,.4),var(--sh)} /* botón de guardar que flota en la esquina sin tapar el editor */
.sw{display:flex;align-items:center;gap:10px;font-weight:800;cursor:pointer}.sw input{position:absolute;opacity:0;pointer-events:none}
.sw span{flex:none;width:48px;height:28px;border-radius:999px;border:2px solid var(--ink);background:#c9c4dc;position:relative;transition:background .2s}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:left .2s}
.sw input:checked+span{background:var(--mint)}.sw input:checked+span::after{left:23px}.sw input:focus-visible+span{outline:3px solid var(--grape);outline-offset:2px}
.seg button{transition:background .2s}
/* ---------- tema NOCHE DE PREVIA (el de por defecto) ---------- */
:root[data-tema="noche"]{--sky:#160f2e;--sky2:rgba(255,255,255,.06);--muted:#cfc6f2;--sh:4px 4px 0 #ff4fb8;color-scheme:dark}
:root[data-tema="noche"] body{background-color:#160f2e;color:#fff}
:root[data-tema="noche"] .ap-fondo .luz{opacity:.55}
:root[data-tema="noche"] .ap-fondo .l1{left:-20vmax;top:-10vmax;background:radial-gradient(circle,rgba(255,79,184,.55),transparent 65%);animation:ap-luz 14s ease-in-out infinite alternate}
:root[data-tema="noche"] .ap-fondo .l2{right:-25vmax;top:20vh;background:radial-gradient(circle,rgba(62,224,255,.4),transparent 65%);animation:ap-luz 18s ease-in-out infinite alternate-reverse}
:root[data-tema="noche"] .ap-fondo .l3{left:10vw;bottom:-30vmax;background:radial-gradient(circle,rgba(123,92,255,.6),transparent 65%);animation:ap-luz 16s ease-in-out infinite alternate}
@keyframes ap-luz{to{translate:12vmax 8vmax;scale:1.15}} /* las luces pasean */
:root[data-tema="noche"] .ap-fondo span{opacity:.3}
:root[data-tema="noche"] .ap .card,:root[data-tema="noche"] .ap .item,:root[data-tema="noche"] .ap .web a,:root[data-tema="noche"] .ap .mode,:root[data-tema="noche"] .ap .seat,:root[data-tema="noche"] .ap .gcard,:root[data-tema="noche"] .ap .msg{background:#231a45;color:#fff;border-color:#0b0717}
:root[data-tema="noche"] .ap .gcard{box-shadow:4px 4px 0 var(--c),0 0 22px color-mix(in srgb,var(--c) 30%,transparent)} /* sombra del color del juego */
:root[data-tema="noche"] .ap .web a{box-shadow:3px 3px 0 #3ee0ff;color:#fff}
:root[data-tema="noche"] .ap .item{box-shadow:3px 3px 0 #7b5cff}
:root[data-tema="noche"] .ap input.in,:root[data-tema="noche"] .ap textarea.in,:root[data-tema="noche"] .ap .seg,:root[data-tema="noche"] .ap .seg button,:root[data-tema="noche"] .ap .chips button,:root[data-tema="noche"] .ap .opciones button,:root[data-tema="noche"] .ap .estados button,:root[data-tema="noche"] .ap .temas button{background:#2c2157;color:#fff;border-color:#0b0717}
:root[data-tema="noche"] .ap .seg button[aria-pressed="true"],:root[data-tema="noche"] .ap .chips button[aria-pressed="true"],:root[data-tema="noche"] .ap .estados button[aria-pressed="true"]{background:var(--c,var(--sun));color:#15132b}
:root[data-tema="noche"] .ap .b{border-color:#0b0717}
:root[data-tema="noche"] .ap .b:not(.tom):not(.sun):not(.mint):not(.grape){background:#2c2157;color:#fff}
:root[data-tema="noche"] .ap .msg.me{background:#1d5c4c}
:root[data-tema="noche"] .ap .msg small{color:#ffb3e0}
:root[data-tema="noche"] .ap-tabs{background:rgba(18,11,40,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid rgba(255,79,184,.6)}
:root[data-tema="noche"] .ap-tabs button{color:#cfc6f2}
:root[data-tema="noche"] .ap-tabs button[aria-current="page"]{background:linear-gradient(135deg,#ff4fb8,#7b5cff);color:#fff;box-shadow:0 0 16px rgba(255,79,184,.6)}
:root[data-tema="noche"] .ap h2.sec{color:#fff;text-shadow:0 0 12px rgba(255,79,184,.6)}
:root[data-tema="noche"] .ap .hero{border-color:#0b0717;box-shadow:4px 4px 0 #3ee0ff,0 0 30px rgba(123,92,255,.45)}
:root[data-tema="noche"] .ap .logo{color:#fff}
:root[data-tema="noche"] .ap .send,:root[data-tema="noche"] .ap .panel{background:#160f2e}
:root[data-tema="noche"] .ap .sw span{background:#3a2f66;border-color:#0b0717}
:root[data-tema="noche"] .ap .av .dot{border-color:#231a45}
/* sin animaciones (ajuste del perfil o del sistema) */
:root[data-anim="off"] .ap-fondo{display:none}
:root[data-anim="off"] .hero,:root[data-anim="off"] .hero-av,:root[data-anim="off"] .gcard,:root[data-anim="off"] .web a,:root[data-anim="off"] .ap-head,:root[data-anim="off"] .av svg{animation:none}
@media (prefers-reduced-motion:reduce){.ap-fondo span i,.ap-fondo .luz,.hero,.hero-av,.gcard,.web a,.ap-head,.av svg{animation:none!important}}

/* ===== PO Points: monedita, medallas, misiones, logros, tienda y festejos ===== */
.po-coin{width:1.25em;height:1.25em;vertical-align:-.28em;flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))} /* monedita PO */
.po-med{--m1:#ffe680;--m2:#e0a800;--m3:#8a6200;position:relative;display:inline-grid;place-items:center;width:58px;height:58px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 6%,var(--m1) 18%,var(--m2) 62%,var(--m3));border:3px solid var(--ink);box-shadow:inset 0 0 0 4px rgba(255,255,255,.35),inset 0 -5px 0 rgba(0,0,0,.18),0 3px 0 var(--ink)} /* medalla redonda con brillo */
.po-med::before{content:"";position:absolute;left:50%;top:-14px;width:26px;height:18px;transform:translateX(-50%);z-index:-1;background:linear-gradient(90deg,#75aadb 0 33%,#fff 33% 66%,#75aadb 66%);border:2px solid var(--ink);border-bottom:0;clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)} /* cintita celeste y blanca */
.po-med i{font-style:normal;font-size:28px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.po-med.t-bronce{--m1:#ffc79a;--m2:#c46a2b;--m3:#6b3410}.po-med.t-plata{--m1:#ffffff;--m2:#b9c3cf;--m3:#5d6773}.po-med.t-oro{--m1:#fff2a0;--m2:#f2b705;--m3:#8a6200} /* bronce, plata y oro */
.po-med.t-platino{--m1:#ffffff;--m2:#9ee8ff;--m3:#6d4cc9;box-shadow:inset 0 0 0 4px rgba(255,255,255,.45),0 3px 0 var(--ink),0 0 16px rgba(110,220,255,.8);animation:po-platino 2.4s ease-in-out infinite} /* platino que brilla */
@keyframes po-platino{50%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.45),0 3px 0 var(--ink),0 0 26px rgba(200,140,255,.95)}}
.po-med.mini{width:30px;height:30px;border-width:2px;box-shadow:0 2px 0 var(--ink)}.po-med.mini::before{display:none}.po-med.mini i{font-size:15px}
.po-med.grande{width:110px;height:110px;border-width:4px}.po-med.grande::before{top:-26px;width:46px;height:32px}.po-med.grande i{font-size:56px}
.hero-tit{font-style:normal;justify-self:start;font:400 11px/1 var(--f-d);letter-spacing:.5px;padding:4px 9px 3px;border-radius:6px;color:#3a2400;background:linear-gradient(135deg,#fff2a0,#f2b705 55%,#ffe680);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);text-shadow:none;transform:rotate(-2deg)} /* título dorado debajo del nombre */
.hero-meds{position:absolute;right:10px;bottom:8px;display:flex;gap:4px;transform:translate(calc(var(--gx) * -6px),calc(var(--gy) * -6px))} /* medallas en la tarjeta */
.hero-po{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:4px;appearance:none;border:2px solid var(--ink);border-radius:999px;background:#fff8d6;color:#5a3a00;padding:3px 10px 3px 4px;font:400 15px/1 var(--f-d);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.hero:has(.hero-po) .hero-meds{bottom:46px} /* si está el saldo, las medallas van arriba */
.po-teaser{appearance:none;width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border:3px solid var(--ink);border-radius:18px;cursor:pointer;color:#fff;background:linear-gradient(120deg,#ff4fb8,#7b5cff 55%,#3ee0ff);box-shadow:var(--sh);position:relative;overflow:hidden} /* acceso a las misiones en el inicio */
.po-teaser::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);transform:translateX(-100%);animation:po-brillo 3.5s ease-in-out infinite} /* brillo que pasa */
@keyframes po-brillo{60%,100%{transform:translateX(100%)}}
.po-teaser-ic{font-size:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}.po-teaser b{display:block;font:400 15px/1.15 var(--f-d)}.po-teaser small{font-weight:700;opacity:.95}.po-teaser>i{margin-left:auto;font-style:normal;font-size:30px;font-weight:800}
.vitrina{display:flex;gap:10px;overflow-x:auto;padding:16px 4px 6px;scrollbar-width:none;align-items:flex-start;flex-wrap:wrap} /* estante de medallas del perfil */
.vit-it{display:grid;justify-items:center;gap:6px;width:76px;text-align:center;font-weight:800;font-size:11px;line-height:1.1}
.vit-ver{display:inline-flex;align-items:center;gap:6px;align-self:center}
:root[data-tema="noche"] .ap .vit-it{color:#fff}
.po-ex{position:relative}.po-ex-ic{position:absolute;right:-4px;top:-6px;font-style:normal;font-size:14px;filter:drop-shadow(0 1px 0 #000)} /* marca de exclusivo */
.opciones .bloq svg,.temas .bloq i{filter:grayscale(.75) brightness(.8)}.opciones .color.bloq{opacity:.55}.temas .bloq{opacity:.75} /* bloqueado: apagadito */
.temas .po-ex:not(.bloq){box-shadow:0 0 0 2px #ffd447,0 0 12px rgba(255,212,71,.6)}
.av.fx-oro svg{filter:drop-shadow(0 0 5px rgba(255,212,71,.9));animation:po-oro 2.2s ease-in-out infinite}@keyframes po-oro{50%{filter:drop-shadow(0 0 11px rgba(255,236,150,1))}} /* brillo dorado */
.av.fx-holo svg{animation:po-holoav 4s linear infinite}@keyframes po-holoav{to{filter:hue-rotate(360deg)}} /* holográfico que cambia de color */
/* festejo de logro o misión */
.po-pop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(circle,rgba(40,20,90,.75),rgba(5,3,15,.88));animation:po-entra .3s both;cursor:pointer;font-family:var(--f-b)}
.po-pop.chau{animation:po-sale .3s both}@keyframes po-entra{from{opacity:0}}@keyframes po-sale{to{opacity:0}}
.po-pop-c{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;color:#fff;max-width:340px;padding:42px 22px 20px;border:3px solid #ffd447;border-radius:24px;background:linear-gradient(160deg,#3a1d7a,#1a0f3a);box-shadow:0 0 0 4px #15132b,0 0 50px rgba(255,212,71,.45);animation:po-salta .55s cubic-bezier(.2,1.6,.4,1) both;overflow:hidden}
@keyframes po-salta{from{transform:scale(.4) rotate(-8deg)}}
.po-pop-c::before{content:"";position:absolute;left:50%;top:60px;width:360px;height:360px;margin:-180px 0 0 -180px;background:repeating-conic-gradient(rgba(255,212,71,.18) 0 12deg,transparent 12deg 24deg);animation:po-rayos 8s linear infinite;z-index:0} /* rayos que giran detrás de la medalla */
@keyframes po-rayos{to{transform:rotate(360deg)}}
.po-pop-c>*{position:relative;z-index:1}
.po-pop-c .po-med{animation:po-medalla .8s .15s cubic-bezier(.2,1.6,.4,1) both}@keyframes po-medalla{from{transform:scale(0) rotate(-200deg)}}
.po-pop small{font:400 14px/1 var(--f-d);color:#ffd447;letter-spacing:.5px;margin-top:8px}
.po-pop h3{margin:0;font:400 24px/1.1 var(--f-d)}.po-pop p{margin:0;font-weight:700;opacity:.9}
.po-pop strong{display:flex;align-items:center;gap:6px;font:400 28px/1 var(--f-d);color:#ffd447;text-shadow:0 3px 0 #6b4200;animation:po-late 1s .6s ease-in-out 2}@keyframes po-late{50%{transform:scale(1.15)}}
.po-pop em{font-style:normal;font-weight:800;background:rgba(255,255,255,.12);border-radius:10px;padding:4px 10px}
.po-pop .b{margin-top:6px}
.po-pop-c>b{position:absolute;top:-10px;left:var(--x);width:8px;height:14px;background:var(--c);border-radius:2px;animation:po-papel 2.4s var(--d) linear infinite;z-index:2} /* papelitos */
@keyframes po-papel{to{transform:translateY(520px) rotate(720deg)}}
/* pantalla PO */
.po-top{display:flex;align-items:center;gap:14px;padding:16px;border:3px solid var(--ink);border-radius:22px;color:#fff;background:radial-gradient(circle at 15% 30%,rgba(255,212,71,.45),transparent 40%),linear-gradient(135deg,#2a1d5c,#5b2bbf 60%,#ff4fb8);box-shadow:var(--sh);transform:perspective(900px) rotateX(calc(var(--gy) * -5deg)) rotateY(calc(var(--gx) * 6deg))}
.po-top .po-coin,.po-top>svg{width:64px;height:64px;animation:po-moneda 3s ease-in-out infinite}@keyframes po-moneda{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.08)}} /* moneda que se hamaca */
.po-top small{font-weight:800;opacity:.9}.po-top b{display:block;font:400 40px/1 var(--f-d);color:#ffd447;text-shadow:0 3px 0 #6b4200}.po-top span{font-weight:700;font-size:13px;opacity:.9}
.po-seg{margin-top:4px}
.po-lista{display:grid;gap:8px}
.po-mis{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:3px solid var(--ink);border-left:8px solid var(--c,#ff4fb8);border-radius:16px;background:linear-gradient(135deg,#2a1d5c,#1a1240);color:#fff;box-shadow:3px 3px 0 var(--ink)} /* tarjeta de misión */
.po-mis.hecha{opacity:.6;filter:saturate(.6)}
.po-mis-ic{font-size:26px;width:44px;height:44px;display:grid;place-items:center}.po-mis-ic .art{display:block;width:44px;height:44px;border-radius:12px;overflow:hidden}.po-mis-ic .art svg{width:100%;height:100%;display:block}
.po-mis b{display:block;font:400 15px/1.15 var(--f-d)}.po-mis span{font-size:13px;font-weight:600;opacity:.9}.po-mis em{font-style:normal;font:400 16px/1 var(--f-d);color:#ffd447;display:flex;align-items:center;gap:3px;white-space:nowrap}
.po-j{display:inline-block;margin-top:3px;font-weight:800;font-size:11px;background:var(--c,#7b5cff);color:#15132b;border-radius:999px;padding:0 8px}
.po-barra{display:block;height:9px;margin-top:6px;border:2px solid #0b0717;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.po-barra i{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#ffd447);border-radius:99px;transition:width .6s}
.po-va{font-weight:800;font-size:11px;opacity:.85}
.po-nota{font-size:13px;text-align:center}
.po-logros{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding-top:12px}
.po-logro{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;text-align:center;padding:22px 10px 12px;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(160deg,#2a1d5c,#140d33);color:#fff;box-shadow:3px 3px 0 var(--ink)} /* tarjeta de logro */
.po-logro:not(.ok) .po-med{filter:grayscale(1) brightness(.55)}.po-logro:not(.ok) .po-med i{opacity:.45} /* sin ganar: medalla apagada */
.po-logro.ok{background:linear-gradient(160deg,#4a2a9c,#1f1250);box-shadow:3px 3px 0 var(--ink),0 0 18px rgba(255,212,71,.35)}
.po-logro b{font:400 14px/1.15 var(--f-d);margin-top:4px}.po-logro span{font-size:12px;font-weight:600;opacity:.88}.po-logro>em{font-style:normal;font:400 14px/1 var(--f-d);color:#ffd447;display:flex;align-items:center;gap:3px}
.po-logro .po-barra{width:100%}.po-reg{font-weight:800;font-size:11px;color:#ffb3e0}
.po-tier{position:absolute;top:6px;right:8px;font-style:normal;font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.5px;opacity:.6}
.po-cats{margin:8px 0 10px}
.po-tienda{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.po-item{display:grid;justify-items:center;align-content:start;gap:6px;text-align:center;padding:10px 8px 12px;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(160deg,#2a1d5c,#140d33);color:#fff;box-shadow:3px 3px 0 var(--ink)} /* tarjeta de la tienda */
.po-item.mio{box-shadow:3px 3px 0 var(--ink),0 0 0 2px #3ddc84 inset}
.po-item.exclusivo{background:linear-gradient(160deg,#5a3a00,#1f1407)}
.po-item b{font:400 13px/1.15 var(--f-d)}.po-item small{font-size:11px;font-weight:700;opacity:.8;margin-top:-4px}
.po-item .b{display:inline-flex;align-items:center;gap:4px;margin-top:auto}.po-item .b.falta{opacity:.6}.po-item .b.seguro{background:#3ddc84!important;color:#15132b!important;animation:po-late .5s 2}
.po-pv{display:grid;place-items:center;width:100%;height:96px;border-radius:12px;background:rgba(255,255,255,.07);overflow:hidden}
.po-pv .av.big{width:80px;height:80px}.po-pv .av.big svg{width:100%;height:100%}
.po-pv.fondo{background:var(--banner);border:2px solid #0b0717}
.po-pv.carta svg{height:88px;width:auto;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.4));transform:rotate(-6deg)}
.po-pv.pano{background:repeating-linear-gradient(91deg,#4a2a14 0 7px,#56321b 7px 12px,#3d220f 12px 20px)}.po-pv.pano i{width:84%;height:74%;border-radius:50%/42%;background:var(--pano);border:6px solid #6b3f1f;box-shadow:inset 0 0 18px rgba(0,0,0,.5)}
.po-pv.mapa i{font-style:normal;font-size:44px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
.po-pv.m-map_nieve{background:radial-gradient(circle at 20% 30%,#fff 0 2px,transparent 3px) 0 0/22px 22px,radial-gradient(circle at 70% 60%,#fff 0 1.5px,transparent 2.5px) 0 0/30px 30px,linear-gradient(180deg,#bcd3e8,#eef4fa 55%,#d7e4ef)}
.po-pv.m-map_noche{background:radial-gradient(circle at 75% 25%,#fffbe0 0 8px,rgba(255,255,230,.3) 12px,transparent 22px),radial-gradient(circle at 40% 80%,rgba(255,150,50,.6),transparent 35%),linear-gradient(180deg,#0a1030,#1f3a26)}
.po-pv.m-cq_moderno{background:radial-gradient(ellipse at 30% 45%,#f4f3ee 0 18%,transparent 19%),radial-gradient(ellipse at 70% 55%,#f4f3ee 0 22%,transparent 23%),linear-gradient(#5bbce8,#1f6fb2)}
.po-pv.m-cq_noche{background:radial-gradient(circle at 30% 45%,rgba(255,214,120,.9) 0 1.5px,transparent 2px) 0 0/14px 12px,radial-gradient(ellipse at 50% 50%,#2a3452 0 40%,transparent 41%),linear-gradient(#10224a,#030814)}
/* paños de la tienda PO para el truco y el chinchón */
:root[data-pano="azul"],.pv-azul{--pano:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.12),transparent 55%),radial-gradient(ellipse at 50% 45%,#2f7fd6,#174f99 72%,#0d2f61)}
:root[data-pano="bordo"],.pv-bordo{--pano:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.12),transparent 55%),radial-gradient(ellipse at 50% 45%,#a3243a,#6b1022 72%,#3f0713)}
:root[data-pano="negro"],.pv-negro{--pano:radial-gradient(ellipse at 50% 35%,rgba(255,236,150,.12),transparent 55%),repeating-linear-gradient(45deg,rgba(255,212,71,.05) 0 2px,transparent 2px 12px),radial-gradient(ellipse at 50% 45%,#2c2c30,#141416 72%,#060607)}
:root[data-pano="neon"],.pv-neon{--pano:radial-gradient(circle at 20% 30%,rgba(255,79,184,.45),transparent 40%),radial-gradient(circle at 80% 70%,rgba(62,224,255,.4),transparent 40%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/18px 18px,radial-gradient(ellipse at 50% 45%,#2a1060,#120630)}
:root[data-pano] .tr-mesa,:root[data-pano] .ch::before{background:var(--pano)} /* la mesa con el paño elegido */
:root[data-pano="negro"] .tr-mesa,:root[data-pano="negro"] .ch::before{border-color:#b8860b} /* el negro de lujo con borde dorado */
:root[data-pano="neon"] .tr-mesa,:root[data-pano="neon"] .ch::before{box-shadow:inset 0 0 0 3px rgba(255,79,184,.6),inset 0 0 50px rgba(0,0,0,.55),0 0 30px rgba(123,92,255,.6)} /* el de boliche con luz */
/* cartas jugadas separadas: cada uno en su fila con el número de baza */
.tr-nb{position:absolute;left:-7px;top:-9px;z-index:3;font:400 10px/1 var(--f-d);font-style:normal;color:#ffd447;background:#15132b;border:1.5px solid #ffd447;border-radius:999px;padding:3px 5px 2px;box-shadow:0 2px 0 rgba(0,0,0,.4)} /* 1ª, 2ª, 3ª */
.tr-centro .tr-c.perdio{filter:brightness(.72) saturate(.7)}.tr-centro .tr-c.perdio .tr-nb{color:#bbb;border-color:#888} /* las que perdieron, apagadas */
#chPozo .ch-c.abajo{filter:brightness(.78)} /* en el pozo, las de abajo apagaditas y corridas a la izquierda: la de arriba se ve entera */
/* ===== Comodín fiestero: fondo de boliche, jefes con vida y puntajes animados ===== */
.cm{--calor:0;background:#12052b}
.cm-fondo{inset:-50%;background:conic-gradient(from 0deg,#ff2fb0,#7b2cff,#00d4ff,#00ff9c,#ffe600,#ff6a00,#ff2fb0);filter:blur(70px) saturate(1.4);opacity:calc(.32 + var(--calor) * .38);animation:cm-remolino calc(18s - var(--calor) * 10s) linear infinite} /* remolino de colores: más rápido y fuerte cuanto más cerca del jefe */
@keyframes cm-remolino{to{transform:rotate(360deg) scale(1.1)}}
.cm::before{background:radial-gradient(circle at 50% 120%,rgba(255,47,176,.35),transparent 55%),radial-gradient(circle at 50% -20%,rgba(0,212,255,.25),transparent 50%);z-index:0} /* resplandor de abajo y de arriba */
.cm-piso{position:absolute;left:-30%;right:-30%;bottom:-38%;height:80%;transform:perspective(320px) rotateX(58deg);transform-origin:50% 100%;background:conic-gradient(#ff2fb0 25%,#2a0d5c 0 50%,#00d4ff 0 75%,#2a0d5c 0) 0 0/90px 90px;opacity:.35;animation:cm-piso 1.6s steps(2) infinite;mask-image:linear-gradient(transparent,#000 60%);-webkit-mask-image:linear-gradient(transparent,#000 60%)} /* pista de baile con baldosas que titilan */
@keyframes cm-piso{50%{filter:hue-rotate(120deg) brightness(1.3)}}
.cm-luces i{position:absolute;top:-20%;width:90px;height:150%;transform-origin:50% 0;background:linear-gradient(rgba(255,255,255,.55),transparent 75%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);mix-blend-mode:screen;opacity:calc(.25 + var(--calor) * .35);animation:cm-luz 3.2s ease-in-out infinite alternate;pointer-events:none} /* haces de luz que barren */
.cm-luces i:nth-child(1){left:8%;--c1:#ff2fb0;background:linear-gradient(rgba(255,47,176,.7),transparent 75%)}.cm-luces i:nth-child(2){left:32%;background:linear-gradient(rgba(0,212,255,.7),transparent 75%);animation-delay:-1s;animation-duration:2.6s}
.cm-luces i:nth-child(3){left:62%;background:linear-gradient(rgba(255,230,0,.6),transparent 75%);animation-delay:-2s;animation-duration:3.6s}.cm-luces i:nth-child(4){left:86%;background:linear-gradient(rgba(0,255,156,.6),transparent 75%);animation-delay:-.4s}
@keyframes cm-luz{from{transform:rotate(-32deg)}to{transform:rotate(32deg)}}
.cm-confe i{position:absolute;top:-12px;left:var(--x);width:7px;height:12px;border-radius:2px;background:var(--c);opacity:.8;animation:cm-confe var(--t) linear var(--d) infinite;pointer-events:none} /* papelitos */
@keyframes cm-confe{to{transform:translateY(110vh) rotate(720deg)}}
.cm.fiesta .cm-fondo{opacity:.85;animation-duration:3s}.cm.fiesta .cm-piso{opacity:.7;animation-duration:.4s}.cm.fiesta .cm-luces i{opacity:.8;animation-duration:.7s}.cm.fiesta .cm-confe i{animation-duration:1.6s;width:10px;height:16px} /* al voltear al jefe: explota la fiesta */
.cm.temblor{animation:cm-temblor .45s}@keyframes cm-temblor{20%{transform:translate(-7px,4px)}40%{transform:translate(6px,-5px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(3px,4px)}}
/* el jefe */
.cm-boss{position:absolute;left:8px;top:96px;width:128px;z-index:3;display:grid;justify-items:center;gap:2px;text-align:center} /* columna del jefe a la izquierda */
.cm-bcara{width:96px;height:98px;filter:drop-shadow(0 0 14px rgba(255,47,176,.6)) drop-shadow(0 4px 0 rgba(0,0,0,.5));animation:cm-respira 1.6s ease-in-out infinite}.cm-bcara svg{width:100%;height:100%;display:block}
@keyframes cm-respira{50%{transform:translateY(-3px) scale(1.03)}}
.cm-boss.golpe .cm-bcara{animation:cm-golpe .5s}@keyframes cm-golpe{0%{filter:brightness(4) drop-shadow(0 0 20px #fff);transform:translateX(-10px) rotate(-8deg) scale(.92)}30%{transform:translateX(8px) rotate(6deg)}60%{transform:translateX(-4px) rotate(-3deg);filter:brightness(1.5)}}
.cm-boss.ko .cm-bcara{animation:cm-ko 1.2s both}@keyframes cm-ko{30%{transform:rotate(-25deg) translateY(4px) scale(1.1)}100%{transform:rotate(-18deg) translateY(10px);filter:grayscale(.4) drop-shadow(0 0 20px #ffe600)}}
.cm-boss.rie .cm-bcara{animation:cm-rie .22s ease-in-out infinite alternate}@keyframes cm-rie{to{transform:translateY(-5px) rotate(3deg)}}
.cm-binfo{display:grid;gap:3px;justify-items:center;width:100%;padding:5px 6px 6px;border-radius:12px;background:rgba(10,4,30,.78);border:2px solid #ff2fb0;box-shadow:0 0 14px rgba(255,47,176,.5)}
.cm-binfo small{font-weight:800;font-size:10px;opacity:.8;letter-spacing:.5px;text-transform:uppercase}.cm-binfo b{font:400 12px/1.05 var(--f-d);color:#ffe600;text-shadow:0 2px 0 #7a1f6b}
.cm-binfo em{font-style:normal;font-size:9.5px;font-weight:700;line-height:1.1;color:#ffb3e6}
.cm-hp{position:relative;width:100%;height:16px;border-radius:99px;background:#2a0d3c;border:2px solid #0b0717;overflow:hidden} /* barra de vida */
.cm-hp i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:99px;transition:width .35s ease-out}.cm-hp .lag{background:#ffe600;transition:width .7s ease-in}.cm-hp .vida{background:linear-gradient(90deg,#ff2f4f,#ff6a00);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.cm-hp span{position:absolute;inset:0;display:grid;place-items:center;font:400 11px/1 var(--f-d);color:#fff;text-shadow:0 1px 0 #000,0 0 4px #000}
.cm-globo{position:absolute;left:84%;top:2px;width:max-content;max-width:190px;padding:6px 10px;border-radius:14px 14px 14px 4px;background:#fff;color:#1a1030;font-weight:800;font-size:13px;line-height:1.15;border:2px solid #1a1030;box-shadow:3px 3px 0 #ff2fb0;z-index:6;text-align:left} /* lo que dice el jefe */
.cm-globo.sale{animation:cm-globo .35s cubic-bezier(.2,1.6,.4,1) both}@keyframes cm-globo{from{transform:scale(0);transform-origin:0 100%}}
.cm-dano{position:absolute;left:50%;top:30px;z-index:7;font:400 24px/1 var(--f-d);color:#ff2f4f;-webkit-text-stroke:1.5px #fff;text-shadow:0 3px 0 #000;pointer-events:none;animation:cm-dano 1.1s ease-out both;white-space:nowrap}.cm-dano.fuerte{font-size:34px;color:#ffe600;-webkit-text-stroke:2px #ff2f4f} /* número de daño */
@keyframes cm-dano{0%{transform:translate(-50%,10px) scale(.4);opacity:0}25%{transform:translate(-30%,-20px) scale(1.3);opacity:1}100%{transform:translate(-10%,-60px) scale(1);opacity:0}}
.cm-bola{position:absolute;left:0;top:0;z-index:9;display:grid;place-items:center;min-width:54px;height:54px;padding:0 10px;border-radius:99px;font:400 18px/1 var(--f-d);color:#fff;text-shadow:0 2px 0 #7a1f00;background:radial-gradient(circle at 35% 30%,#fff7b0,#ffb300 40%,#ff3d00 80%);box-shadow:0 0 20px #ff6a00,0 0 40px rgba(255,47,0,.7);pointer-events:none} /* bola de fuego con los puntos */
.cm-bola.grande{height:70px;min-width:70px;font-size:24px;box-shadow:0 0 30px #ffe600,0 0 70px rgba(255,47,176,.9)}
/* puntajes animados */
.cm-f.pop,.cm-m.pop{animation:cm-num .32s cubic-bezier(.2,1.8,.4,1)}@keyframes cm-num{40%{transform:scale(1.45) rotate(-6deg);filter:brightness(1.6)}}
.cm-pts b{transition:color .2s}.cm-pts b.sube{color:#fff;animation:cm-sube .18s ease-in-out infinite alternate;text-shadow:0 0 12px #ffe600}@keyframes cm-sube{to{transform:scale(1.18)}}
.cm-cartel{background:linear-gradient(135deg,rgba(123,44,255,.92),rgba(255,47,176,.92));border:3px solid #ffe600;box-shadow:0 0 30px rgba(255,47,176,.7)}.cm-cartel b{color:#fff;text-shadow:0 3px 0 #7a1f6b}
.cm-cartel.fuego{animation:cq-entra 2s both,cm-num .4s 2}.cm-cartel.fuego b{color:#ffe600;font-size:clamp(32px,7vw,54px)}
/* cartel VS al empezar la ronda */
.cm-vs{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(circle,rgba(123,44,255,.55),rgba(10,3,25,.92));animation:po-entra .25s both}.cm-vs.chau{animation:po-sale .4s both}
.cm-vs-c{display:grid;justify-items:center;gap:2px;color:#fff;text-align:center;animation:cm-vsin .55s cubic-bezier(.2,1.5,.4,1) both}@keyframes cm-vsin{from{transform:scale(2.2) rotate(8deg);opacity:0}}
.cm-vs-c small{font:400 14px/1 var(--f-d);color:#00d4ff;letter-spacing:1px}.cm-vs-cara{width:120px;height:122px;filter:drop-shadow(0 0 22px #ff2fb0)}.cm-vs-cara svg{width:100%;height:100%}
.cm-vs-c>b{font:400 44px/1 var(--f-d);color:#ffe600;-webkit-text-stroke:2px #ff2fb0;margin-top:-18px;animation:cm-num .5s .3s}
.cm-vs-c h3{margin:0;font:400 26px/1 var(--f-d);text-shadow:0 3px 0 #7a1f6b}.cm-vs-c p{margin:0;font-weight:800}.cm-vs-c strong{color:#ffe600;font-size:20px}.cm-vs-c em{font-style:normal;font-weight:700;font-size:13px;color:#ffb3e6}
.cm-fin-cara{width:120px;height:122px;margin:0 auto}.cm-fin-cara svg{width:100%;height:100%}
.cm-tienda{background:radial-gradient(circle,rgba(60,15,110,.9),rgba(10,3,25,.94))} /* la tienda también de boliche */
.gs.bajo .cm-boss{top:88px;width:118px}.gs.bajo .cm-bcara{width:80px;height:82px}.gs.bajo .cm-vs-cara{width:90px;height:92px}.gs.bajo .cm-vs-c>b{font-size:34px;margin-top:-12px}.gs.bajo .cm-vs-c h3{font-size:22px}
:root[data-anim="off"] .cm-confe,:root[data-anim="off"] .cm-luces{display:none}
@media (prefers-reduced-motion:reduce){.cm-confe,.cm-luces{display:none}.cm-fondo,.cm-piso{animation:none}}
/* botones de música y voces en el menú de cada juego */
.gs-sonido{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gs-sonido button{appearance:none;cursor:pointer;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px}
.gs-sonido button[aria-pressed="true"]{background:linear-gradient(135deg,#ff4fb8,#7b5cff);border-color:#fff;box-shadow:0 0 12px rgba(255,79,184,.5)}
.tr-centro .tr-c .tr-nb{display:block} /* el número de baza se ve (las letras viejas de las cartas siguen ocultas) */
/* premio diario con racha de 7 días */
.po-diario{display:grid;gap:10px;padding:12px 14px;border:3px solid var(--ink);border-radius:18px;color:#fff;background:radial-gradient(circle at 90% 10%,rgba(255,212,71,.5),transparent 45%),linear-gradient(135deg,#ff8a3d,#ff4fb8 55%,#7b5cff);box-shadow:var(--sh);position:relative;overflow:hidden;animation:rp-brillo 2s ease-in-out infinite}@keyframes po-latido{50%{transform:scale(1.02)}} /* tarjeta naranja-rosa que late */
.po-diario.listo{animation:none;background:linear-gradient(135deg,#2a1d5c,#1a1240)}.po-diario.grande{margin-top:8px}
.po-diario-top{display:flex;align-items:center;gap:10px}.po-diario-top>div{flex:1;min-width:0}.po-diario-top b{display:block;font:400 16px/1.15 var(--f-d)}.po-diario-top small{font-weight:700;font-size:12.5px;opacity:.95}
.po-regalo{font-size:34px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3));animation:po-regalo 1.2s ease-in-out infinite}.po-diario.listo .po-regalo{animation:none}@keyframes po-regalo{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.1)}}
.po-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.po-dias span{display:grid;justify-items:center;gap:1px;padding:5px 2px;border-radius:10px;background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.25)}
.po-dias b{font:400 14px/1 var(--f-d)}.po-dias small{font-size:9.5px;font-weight:800;opacity:.85}
.po-dias .hecho{background:#3ddc84;color:#0b3a22;border-color:#0b3a22}.po-dias .hoy:not(.hecho){background:#ffd447;color:#3a2400;border-color:#fff;box-shadow:0 0 12px rgba(255,212,71,.9);animation:po-late 1.2s ease-in-out infinite}
.po-dias .gordo:not(.hecho){background:linear-gradient(135deg,#9ee8ff,#c9a8ff);color:#15132b}
/* entrada rápida e invitación */
.rapida{border-color:#ff4fb8}.rapida .rp-tit{font:400 16px/1.1 var(--f-d)}
.rapida.invitado{background:linear-gradient(135deg,#ff8a3d,#ff4fb8 55%,#7b5cff)!important;color:#fff!important;animation:rp-brillo 1.8s ease-in-out infinite}@keyframes rp-brillo{50%{box-shadow:4px 4px 0 var(--ink),0 0 26px rgba(255,79,184,.85)}} /* brilla sin moverse (así el botón no se escapa del dedo) */
.rp-inv{display:flex;align-items:center;gap:10px}.rp-inv span{font-size:34px}.rp-inv b{display:block;font:400 18px/1.1 var(--f-d)}.rp-inv small{font-weight:800;opacity:.95}
.rapida.invitado .muted{color:#fff}
.asegurar{border-color:#ffc530!important;box-shadow:4px 4px 0 #ffc530!important}
/* QR de la sala */
.qr-sala{display:grid;justify-items:center;gap:6px;padding:10px;border-radius:16px;background:#fff;color:#15132b;border:3px solid #15132b;width:max-content;max-width:100%;margin:0 auto;box-shadow:4px 4px 0 #ff4fb8}
.qr-sala svg{width:190px;height:190px;display:block}.qr-sala small{font-weight:800;font-size:12px;text-align:center;max-width:220px}
.qr-sala[hidden]{display:none}
/* ranking semanal */
.po-seg button{font-size:13px;padding:8px 4px}
.rk-seg{margin:0 0 10px}
.rk-fila{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:10px;padding:8px 12px;margin-bottom:6px;border:3px solid var(--ink);border-radius:14px;background:linear-gradient(135deg,#2a1d5c,#1a1240);color:#fff;box-shadow:3px 3px 0 var(--ink)} /* una fila */
.rk-fila .av{width:42px;height:42px}.rk-fila .av svg{width:100%;height:100%}
.rk-pos{font:400 18px/1 var(--f-d);text-align:center}.rk-n{min-width:0;display:grid;gap:3px}.rk-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rk-n .hero-tit{font-size:9.5px;padding:2px 6px}
.rk-fila em{font-style:normal;font:400 15px/1 var(--f-d);color:#ffd447;white-space:nowrap}
.rk-fila.p1{background:linear-gradient(135deg,#7a5a00,#2a1d5c);box-shadow:3px 3px 0 var(--ink),0 0 18px rgba(255,212,71,.5)}.rk-fila.p2{background:linear-gradient(135deg,#5d6773,#2a1d5c)}.rk-fila.p3{background:linear-gradient(135deg,#6b3410,#2a1d5c)}
.rk-fila.yo{outline:3px solid #3ddc84;outline-offset:2px}
.rk-sep{text-align:center;font-weight:800;opacity:.6}
/* ===== Escoba de 15 ===== */
.es-mesa{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;width:min(64%,560px);min-height:110px} /* cartas de la mesa, separadas y en fila */
.es-mesa .tr-c{width:66px;height:99px;transform:rotate(var(--r,0deg));transition:transform .2s,filter .2s,box-shadow .2s;cursor:default}
.es-mesa.llena{gap:6px}.es-mesa.llena .tr-c{width:54px;height:81px}
.es-mesa .tr-c.sirve{cursor:pointer;filter:drop-shadow(0 0 8px rgba(255,212,71,.9))}.es-mesa .tr-c.no-sirve{filter:brightness(.55) saturate(.6)} /* con la carta elegida: las que sirven brillan */
.es-mesa .tr-c.sel{transform:translateY(-12px) rotate(0deg) scale(1.06);filter:drop-shadow(0 0 0 #ffd447) drop-shadow(0 0 12px #ffd447);border-radius:8px;outline:3px solid #ffd447;outline-offset:1px} /* marcada para llevarse */
.es-mesa .tr-c.cae{animation:es-cae .55s cubic-bezier(.2,.75,.3,1) both}@keyframes es-cae{0%{transform:translate(var(--fx),var(--fy)) rotate(-200deg) scale(1.3);opacity:.3}70%{transform:translate(0,0) rotate(calc(var(--r) + 6deg)) scale(1.05);opacity:1}}
.es-mesa .tr-c.reparte{animation:po-reparte2 .5s both;animation-delay:calc(var(--i) * 110ms)}
.es-vacia{color:rgba(255,255,255,.55);font:400 16px var(--f-d);padding:30px;border:3px dashed rgba(255,255,255,.3);border-radius:14px}
.es-fx{position:absolute;left:50%;top:45%;z-index:5;width:0;height:0;pointer-events:none} /* cartas que se levantan */
.es-fx .tr-c{position:absolute;width:66px;height:99px;margin:-50px 0 0 -33px;animation:es-lleva 1.2s cubic-bezier(.5,0,.6,1) both;animation-delay:calc(var(--k) * 40ms)}
@keyframes es-lleva{0%{transform:translate(calc((var(--k) - 1) * 30px),0) scale(1);opacity:1}35%{transform:translate(calc((var(--k) - 1) * 8px),-20px) rotate(calc(var(--k) * 8deg)) scale(1.12);opacity:1;filter:drop-shadow(0 0 14px #ffd447)}100%{transform:translate(var(--tx),var(--ty)) rotate(30deg) scale(.4);opacity:0}}
.es-mano .tr-c.sel{transform:translateY(-26px) scale(1.06)!important;filter:drop-shadow(0 0 14px #ffd447)} /* la carta elegida sube */
.es-bt{max-width:240px}.es-suma{color:#fff;font-weight:800;font-size:14px;background:rgba(15,13,34,.75);padding:5px 12px;border-radius:999px}.es-suma b{font:400 18px var(--f-d);color:var(--sun)}.es-suma.ok{background:#1d7a4a}.es-suma.pasa b{color:#ff8a7a}
.es-pila{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:7px;background:#f3dfb5;color:#3b2414;font-weight:800;font-size:12px;box-shadow:2px 2px 0 rgba(0,0,0,.4)} /* cuántas levantó */
.es-esc{font-size:12px;min-width:30px}
.es-sello span{background:#1d7a4a}.es-sello.nos span{background:#1f5fae}
.es-cuenta{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:52px 14px 14px;background:rgba(10,5,2,.84);color:#fff}.es-cuenta[hidden]{display:none}.es-cuenta.va{animation:gs-in .35s both} /* cuenta de la ronda */
.es-cuenta h3{margin:0;font:400 clamp(20px,4vw,30px) var(--f-d);color:var(--sun)}
.es-cuenta table{border-collapse:collapse;font-weight:700;font-size:14px;background:rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
.es-cuenta th,.es-cuenta td{padding:5px 14px;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)}.es-cuenta td:first-child{text-align:left}
.es-cuenta td.gana{color:#3ddc84}.es-cuenta td i{font-style:normal;color:#ffd447;font-size:12px}.es-cuenta tr.tot td{font-size:15px;color:#ffd447}
.gs.bajo .es-mesa .tr-c,.gs.bajo .es-fx .tr-c{width:54px;height:81px}.gs.bajo .es-mesa.llena .tr-c{width:46px;height:69px}.gs.bajo .es-cuenta table{font-size:12px}.gs.bajo .es-cuenta th,.gs.bajo .es-cuenta td{padding:3px 10px}
/* título con aura (el del creador) */
.hero-tit.aura{position:relative;isolation:isolate;transform:none;justify-self:stretch;max-width:100%;white-space:normal;text-align:center;padding:6px 12px 5px;font-size:11.5px;line-height:1.25;background:#15132b;border:2px solid #ffd447;border-radius:8px;box-shadow:0 0 10px #ffd447,0 0 24px rgba(255,79,184,.8),0 0 44px rgba(62,224,255,.6),inset 0 0 12px rgba(255,212,71,.5);animation:aura-latido 1.6s ease-in-out infinite} /* placa oscura con brillo que late */
.hero-tit.aura span{color:transparent;background:linear-gradient(90deg,#fff6c2,#ffd447,#ff8a3d,#ff4fb8,#c9a8ff,#3ee0ff,#fff6c2) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;animation:aura-texto 3s linear infinite} /* letras de colores que corren */
.hero-tit.aura::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:12px;background:conic-gradient(from 0deg,#ffd447,#ff4fb8,#9b5cff,#3ee0ff,#3ddc84,#ffd447);filter:blur(7px);opacity:.85;animation:aura-gira 2.4s linear infinite} /* aura de colores alrededor */
.hero-tit.aura::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:#15132b} /* placa oscura arriba del aura y abajo de las letras */
@keyframes aura-texto{to{background-position:300% 0}}@keyframes aura-latido{50%{box-shadow:0 0 16px #fff6c2,0 0 34px rgba(255,79,184,.95),0 0 64px rgba(62,224,255,.8),inset 0 0 16px rgba(255,212,71,.7)}}@keyframes aura-gira{to{filter:blur(7px) hue-rotate(360deg)}}
.hero-meds{left:12px;right:auto;bottom:6px}.hero:has(.hero-po) .hero-meds{bottom:6px} /* las medallas, como insignias abajo del avatar */
@media (prefers-reduced-motion:reduce){.hero-tit.aura,.hero-tit.aura::before,.hero-tit.aura span{animation:none}}
.es .tr-aviso{top:21%}.es .es-cuenta{z-index:8} /* en la escoba el aviso va más arriba (no tapa la mesa) y la cuenta tapa todo */
/* ===== Generala ===== */
.ge{position:absolute;inset:0;overflow:hidden;display:grid;grid-template-columns:1fr minmax(260px,38%);gap:10px;padding:56px 12px 12px;font-family:var(--f-b);color:#fff;background:radial-gradient(circle at 30% 40%,#3a1f12,#1b0c06 75%)} /* mesa de madera oscura */
.ge-fondo{position:absolute;inset:0;background:repeating-linear-gradient(91deg,rgba(255,255,255,.03) 0 6px,transparent 6px 14px);pointer-events:none}
.ge-izq{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.ge-info{display:flex;flex-direction:column;gap:2px;padding:6px 12px;border-radius:12px;background:rgba(20,10,4,.7);border:2px solid #8a5a2b;align-self:flex-start}.ge-info b{font:400 16px var(--f-d);color:var(--sun)}.ge-info span{font-size:12px;font-weight:700;opacity:.85}
.ge-pano{position:relative;flex:1;display:grid;place-items:center;border-radius:26px;border:10px solid #6b3f1f;background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.12),transparent 55%),var(--pano,radial-gradient(ellipse at 50% 45%,#2e8b58,#155636 72%,#0d3a24));box-shadow:inset 0 0 40px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.5)} /* paño (usa el que tengas puesto) */
.ge-dados{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:10px}
.ge-d{appearance:none;position:relative;width:62px;height:62px;padding:7px;border-radius:13px;border:0;cursor:pointer;background:linear-gradient(145deg,#ffffff,#e9e4f2);box-shadow:0 6px 0 #b9b2c8,0 10px 14px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s} /* un dado con volumen */
.ge-cara{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:100%;height:100%}.ge-cara i{width:11px;height:11px;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a4560,#15132b)} /* puntos */
.ge-d.guardado{transform:translateY(-10px);box-shadow:0 0 0 4px #ffd447,0 6px 0 #b9b2c8,0 0 22px rgba(255,212,71,.8)}.ge-d em{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);font-style:normal;font-size:10px;font-weight:800;color:#ffd447;white-space:nowrap} /* guardado: sube con borde dorado */
.ge-d.quieto{opacity:.55;filter:grayscale(.4)}
.ge-d.rueda{animation:ge-rueda .7s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes ge-rueda{0%{transform:translate(var(--sx),-180px) rotate(var(--rx)) scale(1.25);opacity:.2}45%{transform:translate(calc(var(--sx) * -.3),0) rotate(calc(var(--rx) * -.5)) scale(1)}62%{transform:translate(0,-26px) rotate(25deg)}78%{transform:translate(0,0) rotate(-8deg) scaleY(.88) scaleX(1.08)}88%{transform:translate(0,-6px) rotate(3deg)}100%{transform:none;opacity:1}} /* caen del cubilete, rebotan y se aplastan */
.ge-juego{position:absolute;left:50%;top:12px;transform:translateX(-50%);pointer-events:none}.ge-juego span{display:block;font:400 22px var(--f-d);color:#ffd447;text-shadow:3px 3px 0 #15132b;animation:po-late 1s ease-in-out infinite} /* lo que salió */
.ge-bt{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ge-bt small{font-weight:700;font-size:12px;opacity:.9}.ge-tirar{font-size:17px;padding:10px 22px}
.ge-planilla{overflow:auto;border-radius:14px;background:#fffaf0;color:#15132b;border:3px solid #15132b;box-shadow:5px 5px 0 rgba(0,0,0,.4)} /* planilla de papel */
.ge-planilla table{width:100%;border-collapse:collapse;font-size:12.5px;font-weight:700}
.ge-planilla th,.ge-planilla td{padding:3px 6px;text-align:center;border-bottom:1px solid #e3d8c0;border-left:1px solid #e3d8c0;height:24px}.ge-planilla td:first-child{text-align:left;border-left:0;white-space:nowrap}
.ge-planilla th{position:sticky;top:0;background:#f3e6c4;font-size:11px}.ge-planilla th.on{background:#ffd447}.ge-planilla tr.corte td{border-top:2px solid #15132b}.ge-planilla tr.tot td{font-size:14px;background:#f3e6c4;font-weight:800}
.ge-planilla td.tachado{color:#c0392b}
.ge-anotar{appearance:none;cursor:pointer;width:100%;border:2px solid #15132b;border-radius:7px;background:#3ddc84;color:#15132b;font:800 12px var(--f-b);padding:1px 4px;animation:po-latido 1.4s ease-in-out infinite}.ge-anotar.cero{background:#f1e2e2;color:#a33;animation:none;font-weight:700}
.gs.bajo .ge{padding-top:52px}.gs.bajo .ge-d{width:50px;height:50px;padding:6px}.gs.bajo .ge-cara i{width:9px;height:9px}.gs.bajo .ge-planilla table{font-size:11px}.gs.bajo .ge-planilla th,.gs.bajo .ge-planilla td{height:20px;padding:2px 4px}
/* ===== perfil de otra persona ===== */
.pv-fondo{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:14px;background:rgba(8,4,22,.78);animation:po-entra .2s both;font-family:var(--f-b)}.pv-fondo.chau{animation:po-sale .22s both} /* fondo oscuro */
.pv{position:relative;width:min(460px,100%);max-height:calc(100vh - 28px);overflow:auto;display:grid;gap:12px;padding:14px;border:3px solid #15132b;border-radius:24px;background:linear-gradient(160deg,#2a1d5c,#140d33);color:#fff;box-shadow:6px 6px 0 #ff4fb8,0 0 40px rgba(123,92,255,.5);animation:po-salta .4s cubic-bezier(.2,1.5,.4,1) both} /* la ficha */
.pv-x{position:absolute;right:10px;top:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:2px solid #15132b;background:#fff;color:#15132b;font-weight:800;font-size:16px;cursor:pointer}
.pv-hero{min-height:130px;padding-right:44px}
.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pv-stats div{display:grid;justify-items:center;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15)}.pv-stats b{font:400 22px/1 var(--f-d);color:#ffd447}.pv-stats small{font-weight:700;font-size:11.5px;opacity:.85;text-align:center}
.pv-h{margin:4px 0 0;font:400 16px var(--f-d)}.pv-h small{font-family:var(--f-b);font-size:12px;opacity:.75}
.pv-meds{display:flex;flex-wrap:wrap;gap:10px;padding-top:12px}.pv-meds .vit-it{color:#fff;width:72px}
.pv-juegos{display:flex;flex-wrap:wrap;gap:6px}.pv-juegos span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(255,255,255,.08);border:2px solid var(--c);font-weight:800;font-size:13px}.pv-juegos b{display:grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--c);color:#15132b;font:400 12px var(--f-d)}
.pv-acc{display:grid}.pv-acc .b{width:100%}
.pv-link{cursor:pointer}.item .pv-link:hover b,.seat.pv-link:hover b{text-decoration:underline}
.pv-chat{appearance:none;cursor:pointer;width:100%;margin-bottom:8px;padding:8px;border-radius:12px;border:2px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:inherit;font-weight:800}
:root[data-tema="dia"] .pv-chat{border-color:var(--ink)}
/* ===== Truco v54: mazo, tanteador grande, botones nuevos, cantos, fin de mano y emojis ===== */
.tr .tr-score{top:8px;left:58px;padding:8px 12px 10px;gap:5px;border-radius:16px;min-width:230px} /* tanteador más grande */
.tr .tr-sc-h{display:flex;justify-content:space-between;font:400 11px var(--f-d);letter-spacing:.5px;color:#ffd447;opacity:.9;text-transform:uppercase}
.tr .tr-eq b{width:84px;font-size:15px}.tr .tr-eq em{font-size:22px;min-width:28px}.tr .tr-f{width:27px;height:27px}.tr .tr-sep{height:24px}
.tr .tr-sc-t{font-size:12px;font-weight:800;color:#ffb27a}
.gs.bajo .tr .tr-score{min-width:0;padding:5px 8px}.gs.bajo .tr .tr-f{width:19px;height:19px}.gs.bajo .tr .tr-eq b{width:66px;font-size:12px}.gs.bajo .tr .tr-eq em{font-size:16px}
.tr-mazo{position:absolute;z-index:2;width:46px;height:66px;left:30%;top:68%;transition:left 1.1s cubic-bezier(.45,.05,.3,1),top 1.1s cubic-bezier(.45,.05,.3,1);pointer-events:none} /* el mazo: se desliza al siguiente que reparte */
.tr-mazo i{position:absolute;inset:0;border-radius:6px;background:var(--po-dorso,#8b1e1e) center/100% 100%;box-shadow:0 2px 3px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.5)}
.tr-mazo i:nth-child(2){transform:translate(2px,-2px)}.tr-mazo i:nth-child(3){transform:translate(4px,-4px)} /* pila de cartas */
.tr-mazo b{position:absolute;left:50%;top:100%;translate:-50% 4px;font:400 10px var(--f-d);color:#ffd447;background:#15132bcc;padding:2px 6px;border-radius:999px;white-space:nowrap}
.tr-mazo.en-abajo{left:calc(50% - 230px);top:66%}.tr-mazo.en-arriba{left:calc(50% + 150px);top:14%}.tr-mazo.en-der{left:calc(100% - 210px);top:24%}.tr-mazo.en-izq{left:150px;top:58%} /* frente a cada lugar */
.tr-mazo.mezcla i{animation:tr-mezcla .7s ease-in-out 2}.tr-mazo.mezcla i:nth-child(2){animation-delay:.1s}.tr-mazo.mezcla i:nth-child(3){animation-delay:.2s}
@keyframes tr-mezcla{50%{transform:translate(10px,-8px) rotate(12deg)}}
.tr-pie{font:400 9px/1 var(--f-d);font-style:normal;color:#15132b;background:#7ee0ff;border-radius:999px;padding:2px 5px;margin-left:3px;vertical-align:2px}
/* mi perfil redondito al lado de mis cartas (tocándolo salen los emojis) */
.tr .tr-as.abajo.yo{left:calc(50% - 205px);bottom:22px;flex-direction:column;gap:2px;padding:0;background:none!important;border:0;box-shadow:none;cursor:pointer;z-index:4}
.tr .tr-as.abajo.yo .tr-av{position:relative;width:60px;height:60px;border-radius:50%;border:3px solid #ffd447;box-shadow:0 4px 12px rgba(0,0,0,.5);background:#15132b;overflow:visible}
.tr .tr-as.abajo.yo .av{width:54px;height:54px;border-radius:50%}
.tr .tr-as.abajo.yo b{font-size:11px;background:#15132bcc;padding:2px 8px;border-radius:999px}
.tr .tr-as.abajo.yo.activo .tr-av{animation:po-latido 1.2s ease-in-out infinite;box-shadow:0 0 0 3px rgba(255,212,71,.5),0 0 22px rgba(255,212,71,.8)}
.tr-emo-ic{position:absolute;right:-6px;bottom:-4px;font-style:normal;font-size:16px;background:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.gs.bajo .tr .tr-as.abajo.yo{left:calc(50% - 165px);bottom:10px}.gs.bajo .tr .tr-as.abajo.yo .tr-av{width:48px;height:48px}.gs.bajo .tr .tr-as.abajo.yo .av{width:42px;height:42px}
.tr-emo{position:absolute;left:calc(50% - 205px);bottom:118px;z-index:9;width:250px;padding:10px;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:po-salta .3s cubic-bezier(.2,1.5,.4,1) both} /* menú de emojis */
.tr-emo::after{content:'';position:absolute;left:24px;bottom:-9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.tr-emo-g{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.tr-emo-g button{font-size:24px;line-height:1;padding:6px 0;border:0;border-radius:10px;background:#f3efff;cursor:pointer}.tr-emo-g button:active{transform:scale(.9)}
.tr-emo-f{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.tr-emo-f button{font:800 12px var(--f-b);padding:5px 9px;border:0;border-radius:999px;background:#15132b;color:#fff;cursor:pointer}
.tr-reac{position:absolute;left:50%;bottom:100%;z-index:8;pointer-events:none;translate:-50% 0;animation:tr-reac 2.6s ease-out both} /* emoji o frase que sale volando */
.tr-reac.emo{font-size:46px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}.tr-reac.frase{white-space:nowrap;font:800 14px var(--f-b);color:#15132b;background:#fff;border-radius:14px;padding:6px 12px;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.tr-as.arriba .tr-reac{bottom:auto;top:100%}
@keyframes tr-reac{0%{opacity:0;transform:translateY(10px) scale(.4)}12%{opacity:1;transform:translateY(-10px) scale(1.15)}22%{transform:translateY(-14px) scale(1)}80%{opacity:1;transform:translateY(-40px)}100%{opacity:0;transform:translateY(-60px) scale(.9)}}
/* botones de cantos nuevos */
.tr .tr-bt{right:12px;bottom:12px;max-width:min(420px,46vw);justify-items:end;gap:8px}
.tr-fila{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.tr-btn{display:inline-flex;align-items:center;gap:7px;min-height:48px;padding:8px 16px 8px 10px;border-radius:16px;border:3px solid #15132b;font:400 17px var(--f-d);color:#15132b;cursor:pointer;box-shadow:0 5px 0 #15132b,0 8px 16px rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s;background:#fff}
.tr-btn i{font-style:normal;font-size:22px;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.55)}
.tr-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #15132b,0 3px 8px rgba(0,0,0,.3)}
.tr-btn.tru{background:linear-gradient(#ff7a4d,#e0361b);color:#fff;text-shadow:1px 1px 0 #15132b}
.tr-btn.env{background:linear-gradient(#ffe27a,#ffc530)}
.tr-btn.si{background:linear-gradient(#5ff0a2,#22c37a);min-width:150px}.tr-btn.no{background:linear-gradient(#fff,#ffd1c8);min-width:150px}
.tr-btn.gris{background:#d9d4ea;font-size:14px;min-height:40px}
.tr-fila.chica .tr-btn{min-height:40px;font-size:14px;padding:6px 12px 6px 8px}.tr-fila.chica .tr-btn i{width:26px;height:26px;font-size:17px}
.tr-tutoca{font:400 14px var(--f-d);color:#ffd447;text-shadow:2px 2px 0 #15132b;animation:po-latido 1.4s ease-in-out infinite}
.tr-bt.responde{background:rgba(15,13,34,.82);padding:12px;border-radius:20px;border:2px solid #ffd447;box-shadow:0 0 30px rgba(255,212,71,.35);animation:po-salta .35s cubic-bezier(.2,1.5,.4,1) both}
.tr .tr-pide{display:grid;justify-items:end;font:inherit;color:#fff;text-shadow:none}.tr .tr-pide small{font-size:12px;opacity:.8}.tr .tr-pide b{font:400 28px/1 var(--f-d);color:#ffd447;text-shadow:3px 3px 0 #15132b}.tr .tr-pide.tru b{color:#ff8a5c}.tr .tr-pide em{font-style:normal;font-size:12px;font-weight:800;color:#7ee0ff}
.tr .tr-espera{display:inline-flex;align-items:center;gap:8px}.tr-pun{width:8px;height:8px;border-radius:50%;background:#ffd447;animation:po-latido 1s infinite}
.gs.bajo .tr-btn{min-height:40px;font-size:14px;padding:5px 11px 5px 7px}.gs.bajo .tr-btn i{width:24px;height:24px;font-size:17px}.gs.bajo .tr .tr-pide b{font-size:20px}.gs.bajo .tr-btn.si,.gs.bajo .tr-btn.no{min-width:110px}
/* cartel de canto nuevo: con la cara de quien cantó, rayos y colores según el canto */
.tr .tr-sello{display:grid;justify-items:center;animation:tr-sello2 1.9s cubic-bezier(.2,1.3,.4,1) both}
.tr .tr-sello span{position:relative;z-index:2;padding:20px 44px}
.tr .tr-sello.env span{background:#ffc530;color:#15132b;text-shadow:3px 3px 0 #fff}.tr .tr-sello.falta span{background:#7b2cff}.tr .tr-sello.ret span{background:#b0151a}.tr .tr-sello.vale span{background:#15132b;color:#ffd447}
.tr .tr-sello.nos.tru span,.tr .tr-sello.nos.ret span,.tr .tr-sello.nos.vale span{background:#1f5fae;color:#fff}
.tr-sl-av{position:relative;z-index:3;width:72px;height:72px;margin-bottom:-18px;border-radius:50%;border:4px solid #fff;overflow:hidden;background:#15132b;box-shadow:0 4px 14px rgba(0,0,0,.5);animation:tr-avsalta .5s .1s cubic-bezier(.2,1.6,.4,1) both}.tr-sl-av .av{width:100%;height:100%}
.tr .tr-sello small{position:relative;z-index:3;margin-top:-6px;font:800 13px var(--f-b);color:#fff;background:#15132b;padding:3px 10px;border-radius:999px}
.tr-sl-rayos{position:absolute;left:50%;top:55%;width:420px;height:420px;margin:-210px 0 0 -210px;z-index:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,212,71,.45) 0 8deg,transparent 8deg 20deg);animation:tr-rayos 1.9s linear both;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.tr-sello.tru .tr-sl-rayos,.tr-sello.ret .tr-sl-rayos,.tr-sello.vale .tr-sl-rayos{background:repeating-conic-gradient(from 0deg,rgba(255,90,54,.5) 0 8deg,transparent 8deg 20deg)}
@keyframes tr-sello2{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}14%{opacity:1;transform:scale(.92) rotate(2deg)}22%{transform:scale(1.04) rotate(-1deg)}30%,80%{transform:scale(1)}100%{opacity:0;transform:scale(.85) translateY(-30px)}}
@keyframes tr-rayos{0%{opacity:0;transform:rotate(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:rotate(120deg) scale(1.2)}}
@keyframes tr-avsalta{from{transform:scale(0)}}
.tr.tiembla .tr-mesa{animation:tr-tiembla .45s ease-in-out}@keyframes tr-tiembla{20%{transform:translate(-6px,2px)}40%{transform:translate(6px,-2px)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,0)}}
/* avisos más lentos y suaves */
.tr .tr-aviso.va{animation:tr-aviso2 .55s cubic-bezier(.2,1.2,.4,1) both}.tr .tr-aviso.sale{animation:tr-aviso-sale .45s ease-in both}
@keyframes tr-aviso2{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes tr-aviso-sale{to{opacity:0;transform:translate(-50%,-60%) scale(.95)}}
/* cartel grande de fin de mano */
.tr-banner{position:absolute;inset:0;z-index:7;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse at center,rgba(10,6,20,.55),rgba(10,6,20,.15) 70%);animation:tr-bn-fondo .5s ease both}
.tr-banner.sale{animation:tr-bn-fuera .55s ease both}
.tr-bn-in{display:grid;justify-items:center;gap:6px;padding:22px 40px;border-radius:26px;border:4px solid #15132b;background:linear-gradient(#ffe27a,#ffc530);color:#15132b;box-shadow:0 10px 0 #15132b,0 20px 50px rgba(0,0,0,.5);animation:tr-bn-entra .8s cubic-bezier(.2,1.25,.4,1) both}
.tr-banner.ellos .tr-bn-in{background:linear-gradient(#e7e2f5,#bfb6dd)}
.tr-bn-in i{font-style:normal;font-size:54px;line-height:1;animation:tr-bn-ic 1.2s ease-in-out .5s infinite}
.tr-bn-in b{font:400 clamp(24px,5vw,40px)/1.05 var(--f-d);text-align:center}.tr-bn-in span{font-weight:800;font-size:15px}
@keyframes tr-bn-fondo{from{opacity:0}}@keyframes tr-bn-fuera{to{opacity:0}}@keyframes tr-bn-entra{0%{opacity:0;transform:translateY(40px) scale(.6)}60%{opacity:1;transform:translateY(-6px) scale(1.04)}100%{transform:none}}@keyframes tr-bn-ic{50%{transform:translateY(-8px) rotate(-8deg)}}
.tr-globo.chau{opacity:0;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.tr-mazo{transition:none}.tr .tr-sello,.tr-bn-in,.tr.tiembla .tr-mesa{animation-duration:.01s}}
.tr-sl-av .av{display:block}                                                     /* la cara de quien cantó se ve completa */
.tr-bt.responde{animation:tr-resp .4s cubic-bezier(.2,1.4,.4,1) both}@keyframes tr-resp{from{opacity:0;transform:translateY(20px) scale(.9)}} /* el panel para contestar entra derechito */
.tr-emo{animation:tr-resp .3s cubic-bezier(.2,1.4,.4,1) both}
/* ===== Tanquecitos v54: skins, muchas tarjetas ===== */
.tq-skins{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tq-sk{display:grid;justify-items:center;gap:3px;padding:6px 2px;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:inherit;font:800 11px var(--f-b);cursor:pointer}
.tq-sk.on{border-color:#ffd447;background:rgba(255,212,71,.18);box-shadow:0 0 12px rgba(255,212,71,.4)}
.tq-sk i{width:44px;height:22px;border-radius:7px 7px 4px 4px;background:linear-gradient(var(--a),var(--b));border:2px solid #15132b;position:relative;overflow:hidden}
.tq-sk i.rayas{background:repeating-linear-gradient(60deg,var(--d) 0 3px,transparent 3px 8px),linear-gradient(var(--a),var(--b))}
.tq-sk i.manchas{background:radial-gradient(circle at 25% 40%,var(--d) 0 22%,transparent 23%),radial-gradient(circle at 70% 65%,var(--d) 0 20%,transparent 21%),linear-gradient(var(--a),var(--b))}
.tq-sk i.neon{box-shadow:inset 0 0 0 2px var(--d),0 0 8px var(--d)}
.tq-sk i.brillo{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 45%,transparent 60%),linear-gradient(var(--a),var(--b))}
.tq-pl.muchos{flex-wrap:wrap;max-width:62%}.tq-pl.muchos .tq-card{padding:2px 6px;font-size:10px}.tq-pl.muchos .tq-card em{width:36px}
.tq-card u{text-decoration:none;color:#ffd447;font-size:11px}
/* ===== Truco de a 3 y de a 6: lugares en las esquinas ===== */
.tr .tr-as.dera{right:10px;top:16%}.tr .tr-as.derb{right:10px;top:52%}.tr .tr-as.izqa{left:10px;top:24%}.tr .tr-as.izqb{left:10px;top:56%}
.tr .tr-as.fuera{opacity:.45;filter:grayscale(.8)}.tr .tr-as.fuera b::after{content:' · al mazo';font-size:10px;color:#ffb4a8}
.tr-mazo.en-dera{left:calc(100% - 230px);top:14%}.tr-mazo.en-derb{left:calc(100% - 230px);top:46%}.tr-mazo.en-izqa{left:170px;top:18%}.tr-mazo.en-izqb{left:170px;top:50%}
.tr .tr-as.izqa,.tr .tr-as.izqb{z-index:4}
/* ===== juegos de la página adentro de la app ===== */
.wv{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;background:#15132b;animation:wv-entra .25s ease both}.wv.chau{animation:wv-sale .2s ease both}
@keyframes wv-entra{from{opacity:0;transform:translateY(20px)}}@keyframes wv-sale{to{opacity:0;transform:translateY(20px)}}
.wv-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:#15132b;color:#fff;font-family:var(--f-d)}
.wv-bar b{flex:1;font-weight:400;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wv-x,.wv-ext{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid #fff;background:#ff5a36;color:#fff;font:400 24px/1 var(--f-d);text-decoration:none;cursor:pointer}.wv-ext{background:transparent;font-size:18px}
.wv-f{flex:1;width:100%;border:0;background:#fff}
.wv-carga{position:absolute;left:50%;top:50%;translate:-50% -50%;color:#fff;font:400 18px var(--f-d)}
/* ===== Trivia en la app ===== */
.tv{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px 14px 16px;color:#fff;font-family:var(--f-b);--c:#3b8eea}
.tv-fondo{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--c) 55%,transparent),transparent 55%),radial-gradient(circle at 90% 90%,rgba(255,79,184,.35),transparent 50%),linear-gradient(160deg,#1d1450,#0f0a2a);transition:background .6s}
.tv-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:52px}.tv-n{font:400 15px var(--f-d)}.tv-pts{margin-left:auto;font:400 16px var(--f-d);color:#ffd447}
.tv-cat{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;background:var(--c);color:#fff;font-weight:800;font-size:13px;border:2px solid #15132b;box-shadow:2px 2px 0 #15132b}.tv-cat i{font-style:normal;opacity:.85;font-size:11px}
.tv-reloj{height:9px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}.tv-reloj i{display:block;height:100%;background:linear-gradient(90deg,#3ddc84,#ffd447);transition:width .2s linear}.tv-reloj i.poco{background:#ff5a36;animation:po-latido .6s infinite}
.tv-card{display:grid;gap:8px;justify-items:center;text-align:center;padding:12px;border-radius:20px;background:#fff;color:#15132b;border:3px solid #15132b;box-shadow:0 6px 0 #15132b;animation:tv-entra .5s cubic-bezier(.2,1.3,.4,1) both}
.tv-card h2{margin:0;font:400 clamp(18px,4.6vw,26px)/1.15 var(--f-d)}
.tv-foto{margin:0;width:100%;max-width:520px}.tv-foto img{display:block;width:100%;max-height:30vh;object-fit:cover;border-radius:12px;border:2px solid #15132b}.tv-foto figcaption{font-size:10px;opacity:.6;margin-top:3px}
.tv-ic{font-size:48px;line-height:1}
@keyframes tv-entra{from{opacity:0;transform:translateY(16px) scale(.96)}}
.tv-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tv-op{position:relative;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 10px;border-radius:16px;border:3px solid #15132b;background:var(--b);color:#fff;font:800 15px/1.15 var(--f-b);text-align:left;text-shadow:1px 1px 0 rgba(0,0,0,.35);box-shadow:0 5px 0 #15132b;cursor:pointer;animation:tv-entra .4s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--k) * 70ms)}
.tv-op i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.3);font:400 16px var(--f-d);font-style:normal}
.tv-op:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #15132b}.tv-op:disabled{cursor:default}
.tv-op.elegida{outline:4px solid #fff;outline-offset:2px}.tv-op:disabled:not(.elegida):not(.buena):not(.mala){opacity:.6}
.tv-op.buena{background:#22c37a;animation:tv-buena .6s ease both}.tv-op.mala{background:#5a5470;opacity:.75}
.tv-op u{position:absolute;right:6px;top:-12px;display:flex;gap:2px;text-decoration:none}
@keyframes tv-buena{50%{transform:scale(1.05)}}
.tv-esp{grid-column:1/-1;margin:0;text-align:center;font-weight:800;opacity:.85}
.tv-js{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.tv-j{position:relative;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2);font-size:12px}.tv-j.yo{border-color:#ffd447}
.tv-j small{opacity:.8}.tv-j em{font-style:normal;font-weight:800}.tv-j em.si{color:#3ddc84}.tv-j em.no{color:#ff8a7a}.tv-j em.ya{color:#3ddc84}.tv-j em.pi{opacity:.6;animation:po-latido 1s infinite}
.tv-av{display:inline-flex;width:28px;height:28px}.tv-av .av{width:100%;height:100%}.tv-av.mini{width:22px;height:22px;border:2px solid #fff;border-radius:50%}.tv-av.grande{width:84px;height:84px}
.tv-tapa{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(15,10,40,.94);text-align:center;cursor:pointer}.tv-tapa div{display:grid;justify-items:center;gap:8px}.tv-tapa b{font:400 26px var(--f-d)}
.tv-podio{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}.tv-podio li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.1)}.tv-podio li b{flex:1}.tv-podio em{font-style:normal;font-size:12px;opacity:.85}
@media (min-width:700px){.tv{max-width:760px;margin:0 auto}}
.tr .tr-as.izqa{top:31%}.tr .tr-as.izqb{top:60%}.tr-mazo.en-izqa{left:180px;top:36%}.tr-mazo.en-izqb{left:180px;top:62%} /* que no tapen el tanteador */
.tv.demo{filter:blur(2px) saturate(.8);opacity:.5;pointer-events:none} /* de fondo del menú, apagadita */
/* ===== Comodín v54: escenario de cada jefe, jefe que se mueve y ataca, cartas flasheras ===== */
.cm-esc{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cm-esc i{position:absolute;left:var(--x);top:var(--y);font-style:normal;font-size:calc(34px * var(--s));opacity:.22;filter:saturate(1.3) drop-shadow(0 0 10px rgba(255,255,255,.4));animation:cm-flota var(--d) ease-in-out infinite alternate}
@keyframes cm-flota{from{transform:translateY(-10px) rotate(calc(var(--r) * -1))}to{transform:translateY(16px) rotate(var(--r)) scale(1.1)}}
.cm[data-jefe="0"] .cm-fondo{background:conic-gradient(from 0deg,#3a0f5c,#7b2cff,#1b0b3a,#ff2fb0,#3a0f5c);} /* boliche: violeta y rosa */
.cm[data-jefe="1"] .cm-fondo{background:conic-gradient(from 0deg,#ff9ec7,#ffd1a6,#c86bff,#ff6fa5,#ff9ec7)}.cm[data-jefe="1"]{background:#3b1030} /* cocina rosada del chisme */
.cm[data-jefe="2"] .cm-fondo{background:conic-gradient(from 0deg,#0b1430,#ffd447,#1d2c5c,#ff8a00,#0b1430)}.cm[data-jefe="2"]{background:#070b1c} /* la calle de noche con faroles */
.cm[data-jefe="3"] .cm-fondo{background:conic-gradient(from 0deg,#ff2fb0,#7b2cff,#00d4ff,#00ff9c,#ffe600,#ff6a00,#ff2fb0);animation-duration:6s} /* la pista del DJ: arcoíris rápido */
.cm[data-jefe="4"] .cm-fondo{background:repeating-conic-gradient(from 0deg,#1e5aa8 0 30deg,#ffd447 30deg 60deg)}.cm[data-jefe="4"]{background:#0c2347} /* tribuna azul y oro */
.cm[data-jefe="5"] .cm-fondo{background:conic-gradient(from 0deg,#0f3d2a,#2fbf71,#0a2a1c,#9be7b4,#0f3d2a)}.cm[data-jefe="5"]{background:#041a10} /* oficina verde billete */
.cm[data-jefe="6"] .cm-fondo{background:conic-gradient(from 0deg,#1a0633,#6b21a8,#0b0220,#22d3ee,#1a0633)}.cm[data-jefe="6"]{background:#08010f} /* consultorio de la bruja */
.cm[data-jefe="7"] .cm-fondo{background:conic-gradient(from 0deg,#7a0010,#ffd447,#3a0008,#ff8a00,#7a0010);animation-duration:8s}.cm[data-jefe="7"]{background:#1c0004} /* salón del Rey: rojo y oro */
.cm[data-jefe="2"] .cm-esc::after,.cm[data-jefe="6"] .cm-esc::after{content:'';position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 10% 85%,#fff,transparent);animation:po-latido 2.4s ease-in-out infinite;opacity:.8} /* estrellitas de noche */
.cm-boss{animation:cm-pasea 5s ease-in-out infinite}@keyframes cm-pasea{0%,100%{transform:translateX(0)}25%{transform:translateX(10px) rotate(1deg)}75%{transform:translateX(-6px) rotate(-1deg)}} /* el jefe camina un poco */
.cm-boss.lanza .cm-bcara{animation:cm-lanza .6s ease}@keyframes cm-lanza{30%{transform:rotate(-14deg) translateX(-8px) scale(1.05)}60%{transform:rotate(12deg) translateX(10px)}}
.cm-boss.baila .cm-bcara{animation:cm-baila .35s ease-in-out 6 alternate}@keyframes cm-baila{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(10deg) translateY(-8px)}}
.cm-boss.salta .cm-bcara{animation:cm-salta .7s cubic-bezier(.3,1.6,.5,1)}@keyframes cm-salta{40%{transform:translateY(-34px) scale(1.12,.92)}70%{transform:translateY(0) scale(.92,1.08)}}
.cm-tiro{position:absolute;left:0;top:0;z-index:9;font-size:38px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.cm-paf{position:absolute;z-index:9;translate:-50% -50%;font:400 30px var(--f-d);color:#ffe600;text-shadow:3px 3px 0 #15132b,-2px -2px 0 #ff2fb0;pointer-events:none;animation:cm-paf .8s cubic-bezier(.2,1.6,.4,1) both}@keyframes cm-paf{0%{transform:scale(.3) rotate(-15deg)}40%{transform:scale(1.3) rotate(6deg)}100%{transform:scale(1);opacity:0}}
#cmMano2.sacude{animation:cm-sacude .45s ease}@keyframes cm-sacude{20%{transform:translate(-8px,4px) rotate(-1deg)}40%{transform:translate(8px,-3px) rotate(1deg)}60%{transform:translate(-5px,2px)}80%{transform:translate(3px,0)}}
.cm-chispa{position:absolute;z-index:8;width:7px;height:7px;margin:-3px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c),0 0 18px var(--c);pointer-events:none;animation:cm-chispa .75s cubic-bezier(.1,.7,.3,1) both}@keyframes cm-chispa{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.cm-flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 20% 30%,#fff,rgba(255,230,0,.6) 30%,transparent 70%);animation:cm-flash .5s ease-out both;mix-blend-mode:screen}@keyframes cm-flash{from{opacity:1}to{opacity:0}}
/* cartas flasheras: brillo holográfico que pasa, aura al elegirlas y explosión de color al puntuar */
.cm-c{position:relative}.cm-c::after{content:'';position:absolute;inset:0;border-radius:9px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(0,212,255,.35) 50%,rgba(255,47,176,.35) 55%,transparent 70%);background-size:250% 100%;mix-blend-mode:screen;opacity:0;transition:opacity .2s}
#cmMano2 .cm-c:hover::after,#cmMano2 .cm-c.sel::after{opacity:1;animation:cm-holo 1.4s linear infinite}@keyframes cm-holo{from{background-position:120% 0}to{background-position:-120% 0}}
#cmMano2 .cm-c.sel{filter:drop-shadow(0 0 8px #ffe600) drop-shadow(0 0 18px rgba(255,47,176,.8)) drop-shadow(0 6px 6px rgba(0,0,0,.5))!important;animation:cm-sel 1.2s ease-in-out infinite}@keyframes cm-sel{50%{filter:drop-shadow(0 0 14px #00d4ff) drop-shadow(0 0 26px rgba(255,230,0,.9)) drop-shadow(0 6px 6px rgba(0,0,0,.5))}}
#cmMesa .cm-c.pop{animation:cm-cpop .45s cubic-bezier(.2,1.8,.4,1)}@keyframes cm-cpop{40%{transform:scale(1.25) rotate(-6deg);filter:brightness(1.6) drop-shadow(0 0 16px #ffe600)}}
#cmMesa .cm-c.mesa::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:3px solid rgba(255,230,0,.0);pointer-events:none}
#cmMesa .cm-c.pop::before{animation:cm-anillo .5s ease-out}@keyframes cm-anillo{from{border-color:rgba(255,230,0,.9);transform:scale(.6)}to{border-color:rgba(255,230,0,0);transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.cm-esc i,.cm-boss,#cmMano2 .cm-c.sel{animation:none}}