/* ---------- Partida: paño azul marino mate bajo la lámpara, riel de nogal con filete de latón ---------- */
#juego{position:fixed;inset:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:radial-gradient(90% 55% at 50% -5%,rgba(var(--lampara),.16),transparent 70%),var(--grano),linear-gradient(180deg,#0d1525,#070b14)}
#hud{flex:none;display:flex;align-items:center;gap:8px;padding:6px max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px));font-family:var(--cond);min-height:54px}
#marcas{display:flex;gap:6px;flex:1;min-width:0;justify-content:center;flex-wrap:nowrap}
.marca{min-width:0;flex:0 1 180px;padding:4px 10px 5px;border-radius:12px;background:linear-gradient(180deg,rgba(38,56,92,.85),rgba(18,28,48,.85));border-bottom:3px solid var(--cl,var(--laton));box-shadow:0 4px 10px rgba(0,0,0,.35);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 6px}
.marca i{font:600 14px var(--cond);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--marfil)}
.marca b{font:400 21px var(--disp);color:var(--laton-luz);font-variant-numeric:tabular-nums;line-height:1.1}
.marca b.sube{animation:sube calc(.5s*var(--lento))}
@keyframes sube{30%{transform:scale(1.6);color:#fff}}
.fichas{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.fichas u{display:block;height:100%;background:var(--cl,var(--laton));transition:width 1s}
.marca.cerca b{animation:latido 1.4s infinite}
@keyframes latido{50%{transform:scale(1.16);color:#fff2b8}}
#info{flex:none;text-align:right;font:600 13px/1.15 var(--cond);color:var(--tenue);white-space:nowrap}
#info b{color:var(--marfil);letter-spacing:.08em;font-weight:700}
#btnVoces[aria-pressed=true]{--c1:#f3c769;--c2:#cf9a3c;--borde:#7d5414;--tx:var(--tinta)}
.riel{position:relative;flex:1;min-height:0;margin:0 clamp(4px,1vw,12px) clamp(4px,1vw,12px);padding:clamp(7px,1.3vw,15px);border-radius:clamp(18px,3vw,38px);
  background:var(--vetas),linear-gradient(160deg,#7c4f30,#4a2d19 55%,#6a4227);
  box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,220,180,.25),inset 0 -3px 6px rgba(0,0,0,.5)}
.riel::after{content:"";position:absolute;inset:calc(clamp(7px,1.3vw,15px) - 3px);border-radius:clamp(14px,2.6vw,32px);box-shadow:0 0 0 1.5px rgba(220,170,76,.55);pointer-events:none}
#mesa{position:relative;width:100%;height:100%;overflow:hidden;border-radius:clamp(12px,2.4vw,30px);
  background:radial-gradient(55% 50% at 50% 40%,rgba(var(--lampara),.17),transparent 72%),var(--grano),radial-gradient(80% 75% at 50% 42%,#24406a,#1a2f4f 52%,#0f1c31);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 70px rgba(0,0,0,.6),inset 0 10px 30px rgba(0,0,0,.35)}
.franja{position:absolute;background:var(--cl);opacity:.45;border-radius:3px;transition:opacity .7s,box-shadow .7s;pointer-events:none}
.franja.abajo{left:22%;right:22%;bottom:4px;height:4px}
.franja.arriba{left:22%;right:22%;top:4px;height:4px}
.franja.derecha{top:18%;bottom:32%;right:4px;width:4px}
.franja.izquierda{top:18%;bottom:32%;left:4px;width:4px}
.franja.turno{opacity:1;box-shadow:0 0 16px 3px var(--cl)}

/* ---------- Cartas en 3D: sombra en el paño, cuerpo que se inclina y cara que gira ---------- */
.carta{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);will-change:transform;--rad:calc(var(--cw)*.07)}
.carta .sombra{position:absolute;inset:3% 5%;border-radius:var(--rad);box-shadow:0 3px 7px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);pointer-events:none}
.carta .alza{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .26s var(--suave)}
.carta .giro{position:absolute;inset:0;border-radius:var(--rad);transform-style:preserve-3d;transform:rotateY(0deg);transition:translate .28s cubic-bezier(.3,.04,.2,1),scale .2s,box-shadow .35s}
.carta.arriba .giro{transform:rotateY(180deg)}
.carta .giro img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--rad);-webkit-user-drag:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.carta .giro .frente{transform:rotateY(180deg)}
.sin3d .carta .alza,.sin3d .carta .giro{transform-style:flat}
.sin3d .carta .giro,.sin3d .carta.arriba .giro,.sin3d .carta .giro .frente{transform:none}
.sin3d .carta .giro .frente,.sin3d .carta.arriba .giro .dorso{visibility:hidden}
.sin3d .carta.arriba .giro .frente{visibility:visible}
.carta.miCarta{cursor:grab;touch-action:none}
.carta.miCarta.activa .giro{box-shadow:0 0 0 2px rgba(246,238,220,.8),0 8px 16px rgba(0,0,0,.5)}
@media (hover:hover){.carta.miCarta.activa:hover .alza{translate:0 -8%}}
.carta.miCarta.activa:active .giro{scale:.97}
.carta.arrastrando{cursor:grabbing}
.carta.arrastrando .alza{transition:none}
.carta.arrastrando .sombra{transform:translate(10px,22px) scale(1.06);opacity:.55;transition:transform .15s,opacity .15s}
.carta.ultima .giro{box-shadow:0 0 0 3px var(--cl),0 0 14px 2px var(--cl)}
.carta.miCarta.activa.captura .giro{box-shadow:0 0 0 3px var(--laton),0 0 18px 4px rgba(220,170,76,.85)}
.carta.brillo .giro{animation:brilla calc(.55s*var(--lento))}
@keyframes brilla{40%{box-shadow:0 0 0 3px var(--laton-luz),0 0 36px 12px rgba(255,214,120,.95)}}
.carta.doblada-izq .alza{transform:perspective(600px) rotateY(34deg) rotateX(6deg)}
.carta.doblada-der .alza{transform:perspective(600px) rotateY(-34deg) rotateX(6deg)}
.carta.puente .alza{transform:perspective(600px) rotateX(-30deg) translateZ(14px)}

/* ---------- Asientos: perfil chiquito con aro de tiempo ---------- */
.asiento{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:450;--cl:#888;--av:48px}
.asiento .foto{position:relative;border-radius:50%;padding:0;pointer-events:auto;transition:transform .3s var(--resorte),box-shadow .5s}
.asiento .foto:disabled{cursor:default}
.asiento .foto:not(:disabled):hover{transform:scale(1.06)}
.asiento.turno .foto{box-shadow:0 0 0 3px var(--cl),0 0 20px 4px color-mix(in srgb,var(--cl) 60%,transparent)}
.aro-turno{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);transform:rotate(-90deg);pointer-events:none;opacity:0;transition:opacity .3s}
.aro-turno circle{fill:none;stroke-width:6}
.aro-turno .pista{stroke:rgba(0,0,0,.45)}
.aro-turno .resto{stroke:var(--cl);stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .3s}
.asiento.conreloj .aro-turno{opacity:1}
.asiento.urgente .aro-turno .resto{stroke:#ffb347}
.asiento.critico .aro-turno .resto{stroke:#ff5a4a}
.asiento.critico .foto{animation:latido-av .9s infinite}
@keyframes latido-av{50%{transform:scale(1.07)}}
.seg-turno{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);min-width:24px;padding:1px 6px;border-radius:999px;font:700 13px/1.3 var(--cond);color:var(--tinta);background:var(--marfil);box-shadow:0 2px 5px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.asiento.critico .seg-turno{background:#ff5a4a;color:#fff}
.placa{display:inline-flex;gap:5px;align-items:center;max-width:120px;padding:2px 9px;border-radius:999px;background:rgba(6,12,24,.72);border-bottom:2px solid var(--cl);font:600 13.5px/1.2 var(--cond);white-space:nowrap;transition:background-color .6s,color .6s}
.placa .nom{overflow:hidden;text-overflow:ellipsis}
.asiento.turno .placa{background:var(--cl);color:var(--tinta)}
.tag-bot{font:700 10px/1.3 var(--cond);letter-spacing:.08em;padding:0 4px;border-radius:4px;background:rgba(255,255,255,.16)}
.asiento .rep{font:700 11px/1.3 var(--cond);background:var(--marfil);color:var(--tinta);padding:0 4px;border-radius:4px}
.sello{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%) rotate(-6deg);font:400 clamp(11px,1.7vw,15px) var(--disp);color:var(--marfil);background:var(--teja);padding:1px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.sello.nuevo{animation:sella calc(.25s*var(--lento)) cubic-bezier(.2,1.5,.4,1)}
@keyframes sella{from{scale:2.2;opacity:0}}
.asiento.izquierda{transform:translate(calc(var(--av)/-2),-50%);align-items:flex-start}
.asiento.derecha{transform:translate(calc(var(--av)/2 - 100%),-50%);align-items:flex-end}
.asiento.izquierda .sello{left:0;transform:rotate(-6deg)}
.asiento.derecha .sello{left:auto;right:0;transform:rotate(-6deg)}
.asiento.mio{flex-direction:row;gap:8px}
.asiento.mio .placa .nom{display:none}
.asiento.mio .placa:has(.rep[hidden]){display:none}
.asiento.mio .sello{left:30px}

/* Reloj de tu turno: barra sobre tu mano y la cuenta regresiva */
#relojMano{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:430;pointer-events:none}
#relojMano .pista{position:relative;flex:1;height:9px;border-radius:999px;background:rgba(0,0,0,.5);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(220,170,76,.2);overflow:hidden}
#relojMano u{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,var(--laton),var(--laton-luz))}
#relojMano b{min-width:40px;padding:2px 8px;border-radius:999px;text-align:center;font:400 18px/1.15 var(--disp);color:var(--tinta);background:linear-gradient(180deg,var(--laton-luz),var(--laton));box-shadow:0 3px 0 var(--laton-hondo);font-variant-numeric:tabular-nums}
#relojMano.urgente u{background:linear-gradient(90deg,#e08a2c,#ffb347)}
#relojMano.urgente b{background:linear-gradient(180deg,#ffc070,#e08a2c);box-shadow:0 3px 0 #8a4f12}
#relojMano.critico u{background:linear-gradient(90deg,#c9301f,#ff5a4a)}
#relojMano.critico b{background:linear-gradient(180deg,#ff7a68,#d43a27);color:#fff;box-shadow:0 3px 0 #7c2014;animation:latido .8s infinite}

/* Paneles sobre la mesa */
#mano-acciones{position:absolute;display:flex;flex-direction:column;gap:6px;align-items:stretch;transform:translate(-50%,-50%);z-index:420}
#bCanto.tiene{animation:llama 1.6s infinite}
@keyframes llama{50%{box-shadow:0 6px 0 var(--borde),0 0 0 5px rgba(220,170,76,.6),0 0 24px rgba(220,170,76,.6)}}
.panel-mesa{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:900;width:min(380px,calc(100% - 28px));padding:16px;border-radius:20px;text-align:center;background:linear-gradient(180deg,rgba(40,60,98,.96),rgba(20,31,52,.97));box-shadow:0 0 0 1px rgba(220,170,76,.3),0 24px 60px rgba(0,0,0,.65)}
.panel-mesa h3{font-size:19px;color:var(--laton);margin-bottom:12px}
#listaCantos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#listaCantos .op.real{color:var(--tinta);background:linear-gradient(180deg,var(--laton-luz),var(--laton))}
.nota{font-size:13px;color:var(--marfil-3);margin:10px 0 0}
.cuentas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cuentas .b3d{flex-direction:column;min-height:70px;font:400 19px/1.1 var(--disp)}
.tiempo{height:5px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:12px;overflow:hidden;width:100%}
.tiempo u{display:block;height:100%;background:var(--laton);transition:width .1s linear}
#panelChat{top:8px;right:8px;left:auto;transform:none;width:min(360px,calc(100% - 16px))}
.chat-frases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.chat-frases .op{font-size:15px;padding:9px 8px}
.chat-emojis{display:flex;justify-content:space-between;gap:6px;margin-top:10px}
.chat-emojis .op{min-width:0;flex:1;font-size:22px;padding:6px 0}
.burbuja{position:absolute;z-index:880;max-width:180px;padding:7px 12px;border-radius:16px;background:var(--marfil);color:var(--tinta);font:600 14.5px/1.2 var(--txt);text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.45),0 0 0 2px var(--cl);pointer-events:none;transform:translate(-50%,calc(-100% - var(--avb,34px)));transform-origin:50% 100%}
.burbuja::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;margin:-7px 0 0 -6px;background:inherit;transform:rotate(45deg);box-shadow:2px 2px 0 0 var(--cl)}
.burbuja.arriba{transform:translate(-50%,var(--avb,34px));transform-origin:50% 0}
.burbuja.arriba::after{top:-5px;box-shadow:-2px -2px 0 0 var(--cl)}
.burbuja.abajo{transform:translate(-30%,calc(-100% - var(--avb,34px)))}
.burbuja.solo-emoji{font-size:28px;padding:4px 10px}

/* Avisos, cuenta de la echada y el número que flota */
#avisos{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:800;pointer-events:none;text-align:center;width:92%}
.aviso{display:inline-block;font:400 clamp(26px,6vw,58px)/1.05 var(--disp);color:var(--laton);text-shadow:2px 2px 0 var(--teja-hondo),4px 4px 0 rgba(0,0,0,.6);animation:aviso var(--d,1s) both}
.aviso small{display:block;font:700 clamp(15px,2.5vw,21px) var(--cond);letter-spacing:.06em;color:var(--marfil);text-shadow:1px 1px 0 var(--tinta)}
.aviso.malo{color:#ff9d8e}
@keyframes aviso{0%{opacity:0;transform:scale(1.8) rotate(-6deg)}14%{opacity:1;transform:scale(1) rotate(-3deg)}82%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(.96) rotate(-3deg)}}
.te-toca{position:absolute;left:50%;top:62%;z-index:790;pointer-events:none;font:400 clamp(30px,7vw,60px)/1 var(--disp);color:var(--laton-luz);text-shadow:.04em .04em 0 var(--teja),.08em .08em 0 rgba(0,0,0,.6)}
.cuenta-echada{position:absolute;z-index:770;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#f0c255 45%,#b78325);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.5);color:var(--tinta)}
.cuenta-echada b{font:400 36px/1 var(--disp)}
.cuenta-echada small{font:700 10px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.flotante{position:absolute;z-index:780;pointer-events:none;font:400 clamp(24px,4vw,36px) var(--disp);color:var(--laton-luz);text-shadow:2px 2px 0 var(--teja-hondo)}
#ticker{position:absolute;left:50%;transform:translateX(-50%);padding:2px 12px;border-radius:999px;background:rgba(6,12,24,.6);font:500 14px var(--cond);white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;color:var(--marfil);z-index:700;pointer-events:none;transition:background-color .4s,color .4s}
#ticker.tuyo{background:var(--laton);color:var(--tinta);font-weight:700;padding:3px 14px;animation:respira 2.2s ease-in-out infinite}
@keyframes respira{50%{scale:1.05}}
.onda{position:absolute;border-radius:50%;border:3px solid var(--laton);pointer-events:none;animation:onda calc(.7s*var(--lento)) ease-out both;z-index:600}
@keyframes onda{from{width:30px;height:30px;margin:-15px;opacity:1}to{width:150vmax;height:150vmax;margin:-75vmax;opacity:0}}
.polvo{position:absolute;width:5px;height:5px;background:var(--marfil);border-radius:50%;pointer-events:none;z-index:600}
.conf{position:absolute;width:9px;height:14px;z-index:790;pointer-events:none}
.vuela{position:fixed;z-index:950;font:400 clamp(26px,5vw,44px) var(--disp);color:var(--laton-luz);text-shadow:2px 2px 0 var(--tinta);pointer-events:none}

/* Escenas de los cantos */
.escena{position:absolute;inset:0;z-index:760;pointer-events:none;overflow:hidden;perspective:800px}
.cartel{position:absolute;left:50%;text-align:center;white-space:nowrap;z-index:5;padding:8px 24px 12px;border-radius:14px;background:rgba(8,14,28,.86);border-top:4px solid var(--cl);border-bottom:4px solid var(--cl);max-width:96%;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.cartel small{display:block;font:700 clamp(14px,2.4vw,20px) var(--cond);letter-spacing:.05em;color:var(--marfil)}
.cartel b{display:block;font:400 clamp(27px,7.5vw,68px)/1.08 var(--disp);color:var(--cl);text-shadow:3px 3px 0 var(--tinta)}
.fantasma{position:absolute;width:var(--cw);height:var(--ch);left:50%;z-index:3}
.fantasma img{display:block;width:100%;height:100%;border-radius:calc(var(--cw)*.07);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.guia{position:absolute;left:50%;transform:translate(-50%,-50%);border:2px dashed var(--cl);border-radius:50%;opacity:.55}
.rayos{position:absolute;left:50%;width:210vmax;height:210vmax;background:repeating-conic-gradient(var(--cl) 0 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%);z-index:1}
.escena .anillo{position:absolute;left:50%;width:90px;height:90px;border:5px solid var(--cl);border-radius:50%;z-index:2}
.sirena{position:absolute;inset:0;opacity:0;z-index:1}
.sirena.roja{background:radial-gradient(70% 70% at 0 40%,rgba(230,40,30,.85),transparent 70%)}
.sirena.azul{background:radial-gradient(70% 70% at 100% 40%,rgba(50,110,255,.85),transparent 70%)}
.faro{position:absolute;width:190vmax;height:24vmax;margin-top:-12vmax;transform-origin:0 50%;clip-path:polygon(0 50%,100% 0,100% 100%);background:linear-gradient(90deg,var(--cl),transparent 72%);z-index:1}
.ojo{position:absolute;left:50%;width:clamp(80px,18vw,140px);z-index:4}
.ojo svg,.casa svg,.lupa svg,.rayo svg{display:block;width:100%;height:auto}
.lupa{position:absolute;left:50%;margin-left:-45px;z-index:4}
.barrido{position:absolute;left:0;right:0;background:linear-gradient(180deg,transparent 93%,rgba(255,214,99,.9));z-index:2}
.estampa{position:absolute;left:50%;padding:2px 12px;font-family:var(--disp);color:#ff6b57;border:4px solid #ff6b57;border-radius:8px;z-index:6;background:rgba(8,14,28,.55);letter-spacing:.06em}
.casa{position:absolute;left:50%;transform:translate(-50%,-50%);z-index:4}
.flash{position:absolute;inset:0;background:#fff8df;opacity:0;z-index:2}
.rayo{position:absolute;top:0;width:clamp(50px,9vw,90px);transform:translateX(-50%);z-index:3}
.grietas{position:absolute;width:min(70vmin,420px);height:min(70vmin,420px);z-index:3}
.viento{position:absolute;left:0;height:3px;background:linear-gradient(90deg,transparent,#f6eedc);border-radius:2px;z-index:2}
.revela{position:absolute;display:flex;gap:6px;left:50%;top:36%;transform:translate(-50%,-50%);z-index:780;pointer-events:none}
.revela .frmini{width:calc(var(--cw)*1.05);aspect-ratio:312/478;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.revela .frmini img{display:block;width:100%;height:100%;border-radius:calc(var(--cw)*.07)}
.escena .revela{z-index:6}

/* Hojas propias de la partida */
.premios-fin{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.premios-fin>span{padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.3);font:700 16px var(--cond);letter-spacing:.02em;animation:sella .5s .2s cubic-bezier(.2,1.5,.4,1) backwards}
.premio-xp{color:#9fd3ff}.premio-rt.sube{color:#7fd68f}.premio-rt.baja{color:#ff9d8e}.premio-nivel{color:var(--laton-luz)}
.tarjeta-perfil-banner{width:calc(100% + 40px);margin:-22px -20px -46px;min-height:110px;border-radius:22px 22px 0 0}
.mini-stats{display:flex;gap:18px;justify-content:center}
.mini-stats span{display:flex;flex-direction:column;font:500 13px var(--cond);color:var(--tenue)}
.mini-stats b{font:400 22px var(--disp);color:var(--marfil)}
.reglas.en-hoja{text-align:left;max-height:60vh;overflow:auto}

@media (max-width:760px){
  .marca i{font-size:12px}.marca b{font-size:17px}.marca{padding:3px 7px 4px}
  #info{font-size:11.5px}
  .placa{font-size:12px;padding:1px 6px;max-width:92px}
  #relojMano b{font-size:15px;min-width:34px}
  .cuenta-echada{width:60px;height:60px}.cuenta-echada b{font-size:28px}
}
@media (max-width:420px){#info{display:none}}