/* Casino Hold'em Royal y Ultimate Hold'em Royal: mesa de paño vista desde el asiento de la persona, con crupier, zapato, casillas de apuesta y riel de cuero.
   Móvil vertical primero (~390 px de ancho, ~664 de alto útil): mesa → resumen → botones → fichas. El tamaño de las cartas lo mide el JS (--cwb) para que todo quepa
   sin desplazar. Todo se dibuja por código; el arte de Andrés (fondo, mesa, crupier, zapato, dorso, fichas) se pone encima solo cuando existe. */
.hh-pantalla{background:var(--rp-fondo,none) center/cover no-repeat,radial-gradient(560px 420px at 50% 18%,#3b2a0e66 0,#0000 70%),linear-gradient(180deg,#0a0806,#120d08 55%,#050403)}
.hh-pantalla .rp-cuerpo{padding:.25rem .45rem calc(.2rem + env(safe-area-inset-bottom));gap:.25rem}
.hh-pantalla .rp-titulo{white-space:nowrap;font-size:.7rem;letter-spacing:.01em;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hh-pantalla .rp-barra .saldo{font-size:.78rem!important;padding:.2rem .5rem!important;white-space:nowrap}
.hh-pantalla .rp-barra .btn.chico{padding:.3rem .6rem}
.hh-pantalla .rp-barra{gap:.35rem;padding:.35rem .5rem}
.hh-pantalla .rp-barra{border-bottom:0}
.hh-pantalla .rp-cuerpo{padding-top:0}
/* La portada del juego es la parte de arriba de la pantalla: crupier detrás de la mesa, a todo el ancho. --H = alto de la foto, --F = alto del paño (los pone medir() en el JS). */
.hh-sala{position:relative;flex:1 1 0;min-height:150px;z-index:2;margin:0 -.45rem}
.hh-mesa,.hh-riel{position:absolute;inset:0}
.hh-pano{--cwb:40px;--cw:var(--cwb);--H:300px;--F:260px;position:absolute;inset:0}
.hh-crupier{position:absolute;left:0;right:0;top:0;height:var(--H);z-index:1;overflow:hidden;pointer-events:none;background:#0a0806}
.hh-crupier .fondo{position:absolute;inset:-12px;background:var(--foto) center/cover;filter:blur(14px) brightness(.8);display:none}
.hh-crupier img{position:absolute;left:50%;top:-18px;height:calc(100% + 18px);width:auto;max-width:none;transform:translateX(-50%);display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 94%,#0000 100%);mask-image:linear-gradient(180deg,#000 0,#000 94%,#0000 100%)}
.hh-crupier.corta .fondo{display:block}
.hh-crupier.corta img{-webkit-mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000),linear-gradient(180deg,#000 0,#000 94%,#0000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000),linear-gradient(180deg,#000 0,#000 94%,#0000 100%);mask-composite:intersect}
/* paño: arranca bajo el borde de la mesa de la foto con el mismo color de fieltro (franja de la propia foto, sin halo) */
.hh-fieltro{position:absolute;left:0;right:0;top:calc(var(--H) - 14px);bottom:0;z-index:0;background:var(--fieltro) 0 0/100% 100% no-repeat,#10392f;overflow:hidden}
.hh-fieltro::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(45deg,#ffffff07 0 1px,#0000 1px 3px),repeating-linear-gradient(-45deg,#0000001a 0 1px,#0000 1px 3px),radial-gradient(70% 55% at 50% 30%,#ffe7a51c 0,#0000 70%),linear-gradient(180deg,#0000 55%,#0009 100%),linear-gradient(180deg,#0007 0,#0000 28px)}
.hh-sello{position:absolute;left:50%;top:calc(var(--H) + var(--F)*.5);width:30%;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain;opacity:.13;pointer-events:none;filter:drop-shadow(0 1px 0 #0008)}
.hh-arcos{position:absolute;left:0;top:var(--H);width:100%;height:var(--F);pointer-events:none;z-index:1}
.hh-arco-txt{font:700 2.2px Georgia,serif;letter-spacing:.3px;fill:#e8c766;fill-opacity:.62;text-transform:uppercase}
.hh-zapato{position:absolute;right:3%;top:calc(var(--H) + 2px);width:19%;z-index:2;filter:drop-shadow(0 4px 5px #000b)}
.hh-zapato svg,.hh-zapato img{display:block;width:100%;height:auto}
/* ----- filas de cartas ----- */
.hh-fila{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:3}
.hh-banca{top:calc(var(--H) - var(--cwb)*.3)}
.hh-comunes{top:calc(var(--H) + var(--F)*.255);gap:4px}
.hh-jug{top:calc(var(--H) + var(--F)*.475);--cw:calc(var(--cwb)*1.14);gap:0}
.hh-jug .hh-hueco:first-of-type{transform:rotate(-5deg) translateX(4px)}
.hh-jug .hh-hueco:nth-of-type(2){transform:rotate(5deg) translateX(-4px) translateY(2px)}
.hh-banca{--cw:calc(var(--cwb)*.92)}
.hh-hueco{position:relative;flex:none;width:var(--cw);height:calc(var(--cw)*1.4);border-radius:calc(var(--cw)*.075);border:1px dashed #e7cf8a38;background:#0000002b}
.hh-hueco .rp-carta{position:absolute;left:0;top:0}
.hh-fila .rp-carta.brilla{box-shadow:0 0 0 2px #ffc627,0 0 18px #ffc627cc;z-index:2}
.hh-fila .rp-carta.rp-giro.brilla .cara.frente{box-shadow:0 0 0 2px #ffc627,0 0 18px #ffc627cc}
.hh-hueco.apagada{filter:brightness(.5)}
.hh-hueco.brilla{filter:drop-shadow(0 0 9px #ffc627)}
/* nombre de la mano (placa dorada al lado de cada mano) */
.hh-rot{position:absolute;top:50%;transform:translateY(-50%);left:calc(50% + var(--cw)*1.18 + 4px);max-width:30%;font:700 .6rem Georgia,serif;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;
  color:#241700;background:linear-gradient(180deg,#ffe58a,#d4a62a 60%,#a9780f);border-radius:6px;padding:.14rem .4rem;box-shadow:0 2px 5px #000b,inset 0 1px 0 #fff8;opacity:0;transition:opacity .3s;pointer-events:none;font-style:normal;text-align:center}
.hh-rot.on{opacity:1}
.hh-banca .hh-rot{background:linear-gradient(180deg,#e9e6df,#b9b4a6 60%,#8b8678)}
.hh-aviso{position:absolute;left:50%;top:calc(var(--H) + var(--F)*.205);transform:translate(-50%,-50%);z-index:6;background:#000d;border:1px solid #ffc62799;border-radius:999px;padding:.12rem .8rem;font:700 .7rem Georgia,serif;color:#ffe9a8;white-space:nowrap;box-shadow:0 4px 12px #000b;animation:hh-aparece .35s ease-out}
.hh-aviso.no{border-color:#7dff9a99;color:#bfffd0}
.hh-aviso[hidden]{display:none}
@keyframes hh-aparece{from{opacity:0;transform:translate(-50%,-30%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hh-pano.retiro .hh-hueco{filter:brightness(.6)}
.hh-pano.fin .hh-arco-txt{opacity:0}
/* ----- casillas de apuesta ----- */
.hh-spots{position:absolute;left:3%;right:3%;bottom:calc(var(--F)*.03);display:flex;justify-content:center;align-items:flex-end;gap:2.5%;z-index:4}
.hh-spot{position:relative;flex:0 0 auto;width:calc(var(--cwb)*1.5);aspect-ratio:1;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#e8c766;cursor:pointer;touch-action:manipulation;
  background:radial-gradient(circle at 50% 40%,#0000002b,#0000 70%);box-shadow:inset 0 0 0 1.5px #e2b53a99,inset 0 0 0 5px #0000,0 0 0 1px #0006;-webkit-tap-highlight-color:transparent}
.hh-spot::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px dashed #e2b53a66}
.hh-spot:disabled{cursor:default;opacity:1}
.hh-spot:not(:disabled):active{transform:scale(.95)}
.hh-sr{position:relative;z-index:1;font:700 max(8px,calc(var(--cwb)*.2)) Georgia,serif;letter-spacing:.03em;text-transform:uppercase;text-align:center;line-height:1.05;padding:0 3px;color:#e8c766;text-shadow:0 1px 2px #000}
.hh-spot.con .hh-sr{opacity:0}
.hh-sp{position:absolute;left:50%;top:50%;transform:translate(-50%,-62%);z-index:2;pointer-events:none}
.hh-sp .rp-pila{--t:24px;height:calc(var(--t) + 12px)}
.hh-sm{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);z-index:3;font:700 .62rem Georgia,serif;color:#fff3c0;background:#000c;border-radius:999px;padding:0 .35rem;line-height:1.15;text-shadow:0 1px 1px #000}
.hh-sm:empty{display:none}
.hh-sb{position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:5;font:700 .66rem Georgia,serif;font-style:normal;border-radius:999px;padding:0 .4rem;line-height:1.3;white-space:nowrap;display:none}
.hh-spot.gana .hh-sb,.hh-spot.pierde .hh-sb,.hh-spot.empata .hh-sb{display:block}
.hh-spot.gana .hh-sb{background:#0f6b2e;color:#c9ffd9;box-shadow:0 0 8px #3cff7a99}
.hh-spot.pierde .hh-sb{background:#7a1414;color:#ffd0cc}
.hh-spot.empata .hh-sb{background:#3a3a3a;color:#ddd}
.hh-spot.gana{box-shadow:inset 0 0 0 2px #7dff9a,0 0 14px #3cff7a88}
.hh-spot.pierde{box-shadow:inset 0 0 0 2px #c0392b88}
/* ----- resumen, botones y fichas ----- */
.hh-dato{flex:none;height:62px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;z-index:3}
.hh-dato .rj-res{margin:0;width:100%;max-width:24rem}.hh-dato .rj-c{padding:.1rem .2rem}
.hh-dato .rj-c small{font-size:.5rem}.hh-dato .rj-c b{font-size:.92rem;line-height:1.1}.hh-dato .rj-neto b{font-size:.8rem;line-height:1.05}
.hh-dato .rj-nota:not(.hh-verif){display:none}
.hh-pista{font:600 .76rem "Segoe UI",system-ui;text-align:center;color:#cdbf98;padding:0 .4rem}
.hh-verif{display:flex;gap:.5rem;align-items:center;justify-content:center;font-size:.64rem;color:#a99a72;margin-top:1px}
.hh-vbtn{border:1px solid #b8860b88;background:#1b1710;color:#ffe9a8;border-radius:999px;padding:.02rem .55rem;font:600 .64rem "Segoe UI"}
.hh-cod{font:600 .62rem ui-monospace,Consolas,monospace;color:#cdbf98}
.hh-mando{flex:none;display:flex;gap:6px;align-items:stretch;position:relative;z-index:6;min-height:44px}
.hh-gran{flex:1;padding:.5rem 1rem;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;display:flex;gap:.5rem;justify-content:center;align-items:baseline}
.hh-gran b{font-size:.92rem;letter-spacing:0}
.hh-dec{flex:1;padding:.5rem .4rem;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;display:flex;gap:.35rem;justify-content:center;align-items:baseline;white-space:nowrap}
.hh-dec b{font-size:.78rem;letter-spacing:0}
.hh-lado{width:44px;padding:0;font-size:1.1rem;display:grid;place-items:center}
.hh-fichas{flex:none;position:relative;z-index:6}
.hh-fichas .rp-ficha{--t:34px!important}
.hh-fichas.rp-bandeja{padding:0 0 2px}
.hh-reglas{width:30px;height:30px;padding:0;border-radius:50%;font-size:.95rem}
.hh-modal .hh-hash{word-break:break-all;font:600 .66rem ui-monospace,Consolas,monospace;color:#e8dcb5;margin:.3rem 0}
.hh-hash small{display:block;font:600 .56rem "Segoe UI";color:#a99a72;letter-spacing:.06em;text-transform:uppercase}
.hh-ok{color:#4cd37a;font-weight:700}.hh-mal{color:#ff6a5e;font-weight:700}
.hh-reg{list-style:none;margin:.25rem 0 .5rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.1rem .9rem}
.hh-reg li{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;border-bottom:1px solid #ffffff14}
.hh-reg b{color:#ffc627;font-family:Georgia,serif}
@media(prefers-reduced-motion:reduce){.hh-aviso{animation:none}.hh-rot{transition:none}}
.hh-modal{max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch}