/* Genios Family — estilos de la app sobre identidad-v1.css (Arte) + volumen tipo Pixar */
@font-face{font-family:'Baloo 2';src:url(../fonts/Baloo2.ttf) format('truetype');font-weight:400 800;font-display:swap}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overscroll-behavior:none}
body{background-attachment:fixed;user-select:none;-webkit-user-select:none}
#app{max-width:480px;margin:0 auto;padding:12px 12px calc(16px + env(safe-area-inset-bottom));min-height:100dvh}
.pantalla{display:none;flex-direction:column;gap:14px;align-items:stretch}
.pantalla.activa{display:flex;animation:entra var(--t-med) var(--ease-pop)}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h2,h3{font-family:var(--font-title);font-weight:800;margin:0}
h2{font-size:var(--fs-l)}
.centro{text-align:center}
.suave{color:var(--text-soft);margin:0}
.tarjeta{background:var(--surface);color:var(--text);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-soft)}
.tarjeta .suave{color:#6b64a8}
.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;user-select:none}
.btn.grande{min-height:64px;font-size:1.3rem;width:100%}
.btn.pequeno{min-height:var(--tap-min);padding:0 16px;font-size:var(--fs-s)}
.btn.verde{background:var(--success);box-shadow:0 5px 0 #1e9354;color:#fff}
.btn:disabled{opacity:.5}
.btn-texto{background:none;border:0;color:var(--text-soft);font:700 var(--fs-s) var(--font-ui);min-height:var(--tap-min);text-decoration:underline;cursor:pointer}
.btn-icono{width:var(--tap-min);height:var(--tap-min);border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.2rem;cursor:pointer}
input{font:800 var(--fs-m) var(--font-ui);min-height:var(--btn-h);border-radius:var(--btn-radius);border:3px solid #DCD6FA;padding:0 16px;width:100%;color:var(--text);background:var(--surface-2)}
input:focus{border-color:var(--info);outline:none}
.campo{display:flex;flex-direction:column;gap:6px;font-weight:800}
.fila{display:flex;gap:10px}
.codigo{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-family:var(--font-title);font-size:1.5rem}
.separador{display:flex;align-items:center;gap:8px;color:#8b84c4;font-size:var(--fs-s)}
.separador::before,.separador::after{content:"";flex:1;height:2px;background:#E6E1FB}
.error{color:var(--danger);margin:0;min-height:1.2em;font-weight:800;text-align:center}

/* Logo */
.logo{text-align:center;margin-top:8px;font-family:var(--font-title);font-weight:800;line-height:.85;position:relative}
.logo-piezas{display:flex;justify-content:center;gap:5px;margin-bottom:6px;transform:rotate(-6deg)}
.logo-piezas .pc{width:26px;height:26px;border-radius:9px}
.logo-piezas .pc:nth-child(2){transform:translateY(-10px) rotate(8deg)}
.logo-genios{font-size:clamp(3.2rem,17vw,4.6rem);color:#fff;-webkit-text-stroke:3px #2A1F6B;paint-order:stroke fill;
  text-shadow:0 2px 0 #CFC8FF,0 7px 0 #2A1F6B,0 14px 26px rgba(0,0,0,.45);letter-spacing:.02em}
.logo-family{font-size:clamp(2rem,10vw,2.8rem);color:var(--primary);-webkit-text-stroke:2px #7a4b00;paint-order:stroke fill;
  text-shadow:0 5px 0 var(--primary-dark),0 10px 18px rgba(0,0,0,.35);transform:rotate(-4deg);margin-top:2px}
.lema{text-align:center;margin:0;font-size:var(--fs-m);color:var(--text-soft)}
.ayuda{background:rgba(255,255,255,.08);border-radius:16px;padding:6px 14px;color:#fff}
.ayuda summary{min-height:var(--tap-min);display:flex;align-items:center;font-weight:800;cursor:pointer}
.ayuda li{margin:6px 0}

/* Cabecera */
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--tap-min)}
.chip{background:rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;font-weight:800}
.chip b{font-family:var(--font-title);font-size:1.1rem}
#juego-prorroga{background:var(--danger)}

/* Lobby */
.codigo-grande{font:800 3.2rem/1 var(--font-title);letter-spacing:.18em;color:var(--bg-2);text-align:center}
.titulo-lista{display:flex;justify-content:space-between;align-items:center;font-size:1.2rem}
.lista-jugadores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lista-jugadores li{display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--text);border-radius:16px;padding:10px 14px;min-height:60px;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.lista-jugadores li.vacio{background:rgba(255,255,255,.06);color:var(--text-soft);box-shadow:none;border:2px dashed rgba(255,255,255,.2)}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 1.2rem var(--font-title);color:#fff;box-shadow:var(--piece-shadow);flex:none}
.lista-jugadores .nombre{flex:1;font-weight:800;font-size:var(--fs-m)}
.lista-jugadores .yo{font-size:.75rem;background:var(--surface-2);border-radius:8px;padding:2px 6px;margin-left:4px;color:#6b64a8}
.estado-listo{font-weight:800;font-size:var(--fs-s);padding:6px 10px;border-radius:10px;background:#EEE;color:#888}
.estado-listo.si{background:#D9F7E5;color:#14834a}
.estado-listo.off{background:#FFE1E4;color:#c0303f}
.puntos{font:800 1.3rem var(--font-title);color:var(--bg-2)}

/* Rivales */
.rivales{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.rivales li{flex:1;min-width:0;background:rgba(255,255,255,.12);border-radius:12px;padding:6px 8px;font-size:.8rem}
.rivales li.yo{outline:2px solid var(--primary)}
.rivales .n{display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra{height:8px;border-radius:8px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:4px}
.barra i{display:block;height:100%;background:var(--success);border-radius:8px;transition:width var(--t-med) var(--ease-pop)}
.rivales li.ganador{background:var(--primary);color:var(--text)}
.rivales li.off{opacity:.45}

/* Tablero */
.zona-tablero{align-self:center;display:flex;flex-direction:column;align-items:center}
.etiquetas-col,.etiquetas-fila{display:grid;color:var(--text-soft);font:800 .75rem var(--font-title)}
.etiquetas-col{grid-template-columns:repeat(6,1fr);width:var(--tam);margin-left:18px;text-align:center;padding:0 10px 2px}
.etiquetas-fila{grid-template-rows:repeat(6,1fr);width:16px;height:var(--tam);padding:10px 0;align-items:center;margin-right:2px}
.con-filas{display:flex}
#tablero{width:var(--tam);height:var(--tam);touch-action:none;position:relative}
.zona-tablero{--tam:max(240px,min(calc(100vw - 56px),400px,calc(100dvh - 440px)))}
.cell{position:relative;display:grid;place-items:center}
.cell.blocker::before{content:"";position:absolute;width:30%;height:30%;top:14%;left:18%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(1px)}
.piece-cell{width:100%;height:100%;background:var(--c)}
.cell .piece-cell{position:absolute;inset:0}
/* previsualización: .gf-preview-ok / .gf-preview-mal (animaciones.css) */
.cell .piece-cell.sel{outline:3px solid #fff;outline-offset:-3px}
.board.complete{animation:board-win 700ms var(--ease-pop) 2}

/* Controles y bandeja */
.controles{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.bandeja{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:center;align-items:center;background:rgba(255,255,255,.08);border-radius:20px;padding:14px;min-height:120px;touch-action:none}
.bandeja .piece{display:grid;gap:3px;padding:6px;border-radius:12px;cursor:grab;touch-action:none}
.bandeja .piece.sel{background:rgba(255,255,255,.22);outline:3px solid var(--primary)}
.bandeja .piece.fantasma{opacity:.25}
.bandeja .piece .piece-cell{width:var(--m);height:var(--m);border-radius:6px;font-size:.8rem}
.bandeja .vacia{color:var(--text-soft);font-weight:800}
.flotante-cont{position:fixed;left:0;top:0;pointer-events:none;z-index:50;will-change:transform}
.piece.flotante{position:relative;display:grid;gap:var(--cell-gap);pointer-events:none}
.piece.flotante .piece-cell{width:var(--celda);height:var(--celda)}
.aviso-hecho{background:var(--success);color:#fff;text-align:center;font:800 1.3rem var(--font-title);border-radius:16px;padding:12px}

/* Resultados */
.podio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.podio li{display:flex;align-items:center;gap:12px;border-radius:18px;padding:12px 16px;background:var(--surface);color:var(--text);box-shadow:0 5px 0 rgba(0,0,0,.25);animation:entra var(--t-slow) var(--ease-pop) both}
.podio li:nth-child(2){animation-delay:.1s}.podio li:nth-child(3){animation-delay:.2s}.podio li:nth-child(4){animation-delay:.3s}
.podio li.p1{background:linear-gradient(135deg,#FFE27A,var(--primary));transform-origin:center}
.podio .medalla{font-size:2rem;width:44px;text-align:center}
.podio .nombre{flex:1;font-weight:800;font-size:var(--fs-m)}
.podio .detalle{font-size:.85rem;color:#6b64a8;display:block}
.podio .mas{font:800 1.4rem var(--font-title);color:#14834a}
.board.mini{width:min(70vw,240px);margin:8px auto 12px;--cell-gap:3px;border-width:4px}
.board.mini .cell{border-radius:5px}

/* Capas */
.capa-cuenta{position:fixed;inset:0;display:grid;place-items:center;background:rgba(20,14,60,.72);z-index:80;backdrop-filter:blur(3px)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#fff;color:var(--text);padding:12px 18px;border-radius:14px;font-weight:800;box-shadow:var(--shadow-soft);z-index:90;max-width:90vw;text-align:center}
.conexion{position:fixed;top:0;left:0;right:0;background:var(--danger);color:#fff;text-align:center;padding:6px;font-weight:800;z-index:95}
@media (min-height:820px){#app{padding-top:24px}}

/* ===== Volumen 3D tipo caramelo (Pixar) ===== */
.pc,.piece-cell{
  --hi:color-mix(in srgb,var(--c) 55%,#fff); --lo:color-mix(in srgb,var(--c) 70%,#000);
  background:
    radial-gradient(60% 45% at 32% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(120% 90% at 50% 110%,rgba(0,0,0,.25),rgba(0,0,0,0) 60%),
    linear-gradient(160deg,var(--hi),var(--c) 45%,var(--lo));
  box-shadow:inset 0 3px 1px rgba(255,255,255,.55),inset 0 -5px 2px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.08),
    0 5px 0 var(--lo),0 9px 14px rgba(20,10,60,.35);
  border-radius:var(--cell-radius)}
.piece-cell::after{color:rgba(0,0,0,.24);text-shadow:0 1px 0 rgba(255,255,255,.35);font-size:.85em}
.cell .piece-cell{box-shadow:inset 0 3px 1px rgba(255,255,255,.55),inset 0 -5px 2px rgba(0,0,0,.22),0 3px 0 var(--lo),0 5px 8px rgba(20,10,60,.25)}
.cell .piece-cell.encaja{animation:snap var(--t-med) var(--ease-pop)}
.cell.blocker{background:
  radial-gradient(40% 35% at 35% 28%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
  radial-gradient(circle at 50% 50%,var(--blocker-hi),var(--blocker) 55%,var(--blocker-lo));
  box-shadow:inset 0 -4px 3px rgba(0,0,0,.35),0 4px 0 var(--blocker-lo),0 8px 12px rgba(0,0,0,.35);transform:scale(.86)}
.cell.blocker::before{display:none}
.board{background:linear-gradient(180deg,#FBF6EC,var(--board));border-color:var(--board-frame);
  box-shadow:0 8px 0 #4f3019,0 18px 30px rgba(10,5,40,.5),inset 0 2px 6px rgba(0,0,0,.12)}
.shake{animation:shake 300ms}
/* Barras finas de rivales sobre el tablero */
.rivales{flex-direction:column;gap:5px}
.rivales li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:4px 8px;font-size:.8rem;border-radius:10px;background:rgba(255,255,255,.08)}
.rivales .dot{width:18px;height:18px;border-radius:6px;--c:var(--av)}
.rivales .barra{height:6px;margin:0;background:rgba(255,255,255,.15)}
.rivales .barra i{background:var(--av);box-shadow:0 0 8px var(--av)}
.rivales .n{display:inline;max-width:9ch}
.rivales .num{font:800 .8rem var(--font-title);min-width:3.4em;text-align:right}
.rivales li.ganador{background:rgba(255,197,49,.25);color:#fff}
.controles .btn{min-height:var(--btn-h)}

.logo{margin:4px 0 0}.logo img{display:block;width:min(88vw,380px);height:auto;margin:0 auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}

/* Partida compacta: que quepa sin scroll en 360x740 */
#pantalla-juego{gap:10px}
#pantalla-juego .cabecera{min-height:44px}
#pantalla-juego .chip{padding:6px 12px}
.bandeja{min-height:96px;padding:10px;gap:10px 12px}

/* ===== Revisión v1 (Arte) ===== */
html{background:var(--bg-1)}
body{min-height:100dvh}
#app{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* Inicio: placeholder que no parezca un valor + alturas iguales */
input::placeholder{color:#A9A3D9;font-weight:600;opacity:1}
.codigo{text-transform:uppercase}
.codigo::placeholder{letter-spacing:.05em;font-family:var(--font-ui);font-size:var(--fs-m);text-transform:none}
.fila input,.fila .btn{height:var(--btn-h);min-height:var(--btn-h)}
.ayuda summary{list-style:none;justify-content:space-between}
.ayuda summary::-webkit-details-marker{display:none}
.ayuda summary::after{content:"";width:10px;height:10px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform var(--t-med) var(--ease-pop);margin-right:6px}
.ayuda[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
/* Lobby: contraste */
.estado-listo{background:#EEEAFB;color:#5B5680}
/* Coordenadas más suaves */
.etiquetas-col,.etiquetas-fila{opacity:.6}
/* Bandeja: piezas grandes, área táctil >= 64 px */
.bandeja{gap:8px;padding:10px 8px}
.bandeja .piece{min-width:64px;min-height:64px;place-content:center;padding:6px;border-radius:14px;transition:transform var(--t-fast) var(--ease-pop),box-shadow var(--t-fast)}
.bandeja .piece.sel{outline:3px solid var(--primary);outline-offset:3px;transform:scale(1.1);background:rgba(255,197,49,.16);
  box-shadow:0 0 18px 4px rgba(255,197,49,.45);z-index:1;position:relative}
.cell .piece-cell.sel{outline:3px solid var(--primary);outline-offset:-2px;filter:brightness(1.12) drop-shadow(0 0 6px rgba(255,197,49,.9))}
/* Controles con texto */
.controles{grid-template-columns:repeat(3,1fr);gap:8px}
.controles .btn{padding:0 8px;font-size:1rem;gap:6px}
.controles .ico{font-size:24px;line-height:1}
.btn-rendirse{min-height:var(--tap-min);border:0;border-radius:999px;padding:0 14px;background:rgba(255,255,255,.14);color:#fff;font:800 var(--fs-s) var(--font-ui);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
/* Prórroga */
.chip.prorroga{background:var(--danger);color:#fff;white-space:nowrap}
.chip.prorroga.urgente{animation:latido 1s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* Banner de victoria */
.banner-victoria{background:linear-gradient(160deg,#FFE27A,var(--primary) 55%,#F59E0B);color:var(--text);border-radius:22px;padding:16px;text-align:center;
  box-shadow:0 6px 0 var(--primary-dark),var(--shadow-soft);animation:snap var(--t-slow) var(--ease-pop)}
.banner-victoria .trofeo{font-size:3rem;line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.banner-victoria .titulo{font:800 1.8rem/1.1 var(--font-title);margin-top:4px}
.banner-victoria .sub{font-weight:800;font-size:var(--fs-m);margin-top:2px}
.banner-victoria .sub b{font-family:var(--font-title);font-size:1.3rem}
/* Cuenta atrás con el tablero desenfocado detrás */
.capa-cuenta{background:rgba(20,14,60,.45);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.capa-cuenta .countdown{font-size:clamp(5rem,30vw,9rem)}
/* Modal */
.capa-modal{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:20px;background:rgba(20,14,60,.6);backdrop-filter:blur(4px)}
.capa-modal .tarjeta{max-width:360px;width:100%;animation:snap var(--t-med) var(--ease-pop)}
.capa-modal .modal-ico{font-size:2.6rem}

/* ===== Experiencia de juego (sonido, ajustes, tutorial, PWA) ===== */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{-webkit-touch-callout:none;overflow-x:hidden}
#tablero,#bandeja,.piece,.piece-cell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input{-webkit-user-select:text;user-select:text}
.cabecera.solo-derecha{margin-bottom:-36px}
.hueco-48{width:48px}
.btn-icono{display:inline-grid;place-items:center;flex:none;transition:transform var(--t-fast) var(--ease-pop),background var(--t-fast)}
.btn-icono:active,.btn-rendirse:active{transform:scale(.9);background:rgba(255,255,255,.28)}
#pantalla-juego .cabecera{gap:6px}
#pantalla-juego .chip{white-space:nowrap}
#juego-prorroga:not([hidden]) ~ .reloj{display:none}
/* Bandeja: pulso cuando hay que elegir una pieza */
.bandeja.pulso{animation:pulso-bandeja 600ms var(--ease-pop)}
@keyframes pulso-bandeja{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 4px var(--primary)}}
/* Giro de pieza */
.gira{animation:gira 220ms var(--ease-pop)}
@keyframes gira{from{transform:rotate(-70deg) scale(.85)}to{transform:none}}
.bandeja .piece.sel.gira{animation:gira-sel 220ms var(--ease-pop)}
@keyframes gira-sel{from{transform:rotate(-70deg) scale(.9)}to{transform:scale(1.1)}}
/* Toast con entrada */
.toast{animation:toast-in 260ms var(--ease-pop)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
/* Hoja de ajustes */
.capa-modal.hoja{align-items:end;padding:0}
.capa-modal.hoja .tarjeta{max-width:480px;border-radius:26px 26px 0 0;padding:12px 18px calc(18px + env(safe-area-inset-bottom));animation:sube 300ms var(--ease-pop)}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
.hoja-asa{width:44px;height:5px;border-radius:5px;background:#DCD6FA;margin:0 auto 4px}
.interruptor{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-weight:800;font-size:var(--fs-m);cursor:pointer;border-bottom:2px solid #F1EEFF}
.interruptor input{position:absolute;opacity:0;width:1px;height:1px}
.interruptor i{width:58px;height:34px;border-radius:34px;background:#D6D1F0;position:relative;transition:background var(--t-fast);flex:none}
.interruptor i::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform var(--t-med) var(--ease-pop)}
.interruptor input:checked + i{background:var(--success)}
.interruptor input:checked + i::after{transform:translateX(24px)}
.interruptor input:focus-visible + i{outline:4px solid var(--info);outline-offset:2px}
.interruptor input:disabled + i{opacity:.4}
.nota{margin:0;font-size:var(--fs-s);color:#6b64a8}
/* Tutorial */
.tuto-paso{display:none}
.tuto-paso.activo{display:block;animation:entra var(--t-med) var(--ease-pop)}
.tuto-paso h2{margin:6px 0}
.tuto-paso p{margin:0;font-size:var(--fs-m);line-height:1.35}
.tuto-dibujo{height:96px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}
.tuto-dibujo.grande{font:800 3.4rem var(--font-title);color:var(--bg-2)}
.tuto-dibujo .bola{width:44px;height:44px;border-radius:50%;background:radial-gradient(40% 35% at 35% 28%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),radial-gradient(circle,var(--blocker-hi),var(--blocker) 55%,var(--blocker-lo));box-shadow:0 4px 0 var(--blocker-lo)}
.tuto-dibujo .pc{width:44px;height:44px}
.tuto-dibujo .mano{position:absolute;font-size:2.2rem;left:55%;top:48px;animation:mano 1.4s ease-in-out infinite}
@keyframes mano{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-14px)}}
.tuto-puntos{display:flex;justify-content:center;gap:8px}
.tuto-puntos i{width:10px;height:10px;border-radius:50%;background:#DCD6FA;transition:all var(--t-med) var(--ease-pop)}
.tuto-puntos i.activo{background:var(--bg-2);width:26px;border-radius:10px}
@media (prefers-reduced-motion:reduce){.tuto-dibujo .mano{animation:none}}

/* ===== Bandeja de una fila deslizable + rivales compactos (para que todo quepa en 360x640) ===== */
.bandeja-marco{position:relative;border-radius:20px;background:rgba(255,255,255,.08)}
.bandeja-marco::before,.bandeja-marco::after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;z-index:2;opacity:0;transition:opacity var(--t-fast)}
.bandeja-marco::before{left:0;border-radius:20px 0 0 20px;background:linear-gradient(90deg,rgba(30,27,75,.95),rgba(30,27,75,0))}
.bandeja-marco::after{right:0;border-radius:0 20px 20px 0;background:linear-gradient(-90deg,rgba(30,27,75,.95),rgba(30,27,75,0))}
.bandeja-marco.mas-izq::before,.bandeja-marco.mas-der::after{opacity:1}
.bandeja{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;background:none;min-height:0;height:96px;padding:12px 14px;gap:10px;touch-action:pan-x;overscroll-behavior-x:contain;align-items:center}
.bandeja::-webkit-scrollbar{display:none}
.bandeja .piece{flex:none;scroll-snap-align:center;touch-action:pan-x}
.bandeja .vacia{width:100%;text-align:center}
.rivales{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.rivales li{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:3px;padding:4px 8px}
.rivales li .barra{grid-column:1 / -1}
.rivales li .num{grid-row:1;grid-column:2;justify-self:end}
.rivales li > span:first-child{grid-row:1;grid-column:1}
.zona-tablero{--tam:max(232px,min(calc(100vw - 56px),400px,calc(100dvh - 380px)))}
#app{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
/* Controles abajo, al alcance del pulgar */
#pantalla-juego.activa{min-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - 24px - env(safe-area-inset-bottom))}
#pantalla-juego .bandeja-marco{margin-top:auto}
/* Feedback visual de sustitución cuando no hay vibración (iOS) */
.fb-encajar #tablero{box-shadow:0 8px 0 #4f3019,0 0 0 5px rgba(46,204,113,.85),0 18px 30px rgba(10,5,40,.5)}
.fb-error #tablero{box-shadow:0 8px 0 #4f3019,0 0 0 5px rgba(255,77,94,.9),0 18px 30px rgba(10,5,40,.5)}
.fb-tic .capa-cuenta,.fb-ya .capa-cuenta{background:rgba(255,197,49,.25)}
.fb-victoria #app,.fb-rival .rivales{animation:latido 450ms var(--ease-pop)}
.fb-derrota #fin-podio{animation:shake 300ms}
@media (prefers-reduced-motion:reduce){.fb-victoria #app,.fb-rival .rivales{animation:none}}
#chip-estado .sep{margin:0 6px;opacity:.6}
.btn-rendirse{white-space:nowrap;flex:none}
#pantalla-juego .cabecera .chip{padding:6px 12px}
.bandeja .piece{height:72px;box-sizing:border-box}
/* Toasts arriba: no tapan la bandeja ni los botones */
.toast{bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 58px)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== Animaciones v1 (Arte): integración ===== */
/* Cuenta atrás: el anillo y el pulso duran lo mismo que cada paso (sincronizado con el servidor) */
#cuenta .gf-cuenta__anillo circle{animation-duration:var(--gf-paso,900ms)}
#cuenta.gf-cuenta.gf-cuenta-pulso{animation-duration:var(--gf-paso,900ms)}
/* Girar / voltear: la pieza ya girada entra con el mismo giro y overshoot de gf-girar / gf-voltear (420 ms) */
.gf-girar-entra{animation:gf-girar-entra 420ms var(--gf-ease) both}
@keyframes gf-girar-entra{0%{transform:rotate(-90deg)}62%{transform:rotate(18deg)}100%{transform:rotate(0)}}
.gf-voltear-entra{animation:gf-voltear-entra 420ms var(--gf-ease) both}
@keyframes gf-voltear-entra{0%{transform:scaleX(-1)}48%{transform:scaleX(-.08)}78%{transform:scaleX(1.1)}100%{transform:scaleX(1)}}
/* La pieza de la bandeja se eleva al tocarla */
.bandeja .piece.gf-lift{transform:scale(1.1) translateY(-6px)}
/* El reloj de prórroga en urgencia (gf-timer-urgente) sustituye al latido antiguo */
.chip.prorroga.gf-timer-urgente{animation:gf-latido 1s ease-in-out infinite}
/* Derrota amable en la pantalla de resultados */
#pantalla-fin .gf-derrota-banner{margin:8px 0}

/* reduced-motion: sustituye a la regla global de identidad-v1 (1ms a todo). Las del módulo están en animaciones.css;
   aquí, las animaciones propias del prototipo: cambios instantáneos, sin saltos ni latidos */
@media (prefers-reduced-motion:reduce){
  .pantalla.activa,.podio li,.cell .piece-cell.encaja,.shake,.board.complete,.capa-modal .tarjeta,.capa-modal.hoja .tarjeta,
  .bandeja.pulso,.gira,.bandeja .piece.sel.gira,.toast,.tuto-paso.activo,.tuto-dibujo .mano,.chip.prorroga.urgente,
  .chip.prorroga.gf-timer-urgente,.gf-girar-entra,.gf-voltear-entra,.fb-victoria #app,.fb-rival .rivales,.fb-derrota #fin-podio,
  .banner-victoria{animation:none!important}
  .bandeja .piece.gf-lift{transform:none}
  *,*::before,*::after{transition-duration:0s!important;scroll-behavior:auto!important}
}
.flotante-cont .piece{opacity:.92} /* deja intuir la previsualización de debajo */
/* En la sala y en resultados el aviso va abajo para no tapar el código ni el podio */
body:has(#pantalla-fin.activa) .toast,body:has(#pantalla-lobby.activa) .toast{top:auto;bottom:calc(max(16px, env(safe-area-inset-bottom)) + 150px)}
.toast{pointer-events:none} /* nunca bloquea un toque */
/* Bandeja deslizable: máscara de 24 px en el borde por el que hay más piezas (en vez de sombras encima) */
.bandeja-marco::before,.bandeja-marco::after{display:none}
.bandeja{scroll-snap-type:x mandatory;scroll-padding-inline:14px}
.bandeja::after{content:"";flex:0 0 4px} /* hueco final: la última pieza no queda pegada al borde */
.bandeja-marco.mas-der .bandeja{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.bandeja-marco.mas-izq .bandeja{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
.bandeja-marco.mas-izq.mas-der .bandeja{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}