/* Héroes de Éter: estilos. Base de botones, hojas y pantallas de Hexalia; cartas con la estética de Reinos de Éter
   (marco por esencia, cabecera, ilustración, línea de tipo y caja de texto, tipografía Georgia). */
:root {
  --bg: #120f26; --panel: #221c46; --panel2: #2e2662; --line: rgba(255,215,106,.22); --text: #f5f1ff; --muted: #bdb3e6;
  --gold: #ffd76a; --accent: #ffd76a; --accent-text: #3a2600; --mint: #47d96b; --mint2: #22a84a; --sky: #4cb8ff; --sky2: #2a7fd0; --danger: #ff5a5a;
  --font: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --display: 'Cinzel', Georgia, serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --glass: rgba(22,16,52,.86); --hud-glass: rgba(20,14,46,.72); --hud-line: rgba(255,215,106,.2);
  --zw: 300px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow: hidden; }
#app { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation;
  background: radial-gradient(ellipse at 50% 40%, rgba(70,50,140,.55), rgba(18,15,38,.2) 60%), linear-gradient(rgba(14,10,32,.78), rgba(14,10,32,.86)), url(assets/ui/mesa.webp) center / cover no-repeat, var(--bg); }
body.at-title #app { background: linear-gradient(180deg, rgba(14,10,32,.35), rgba(14,10,32,.55) 45%, rgba(14,10,32,.92)), url(assets/ui/portada.webp) center 30% / cover no-repeat, var(--bg); }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a { color: var(--gold); }
input, select { font-family: inherit; }
.good { color: #8ff0a4; } .bad { color: #ff9a9a; }

/* ---------- botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: .45em 1.2em; border-radius: 17px; font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; color: var(--accent-text); text-decoration: none;
  background: linear-gradient(180deg, #fff1b0, var(--gold) 55%, #e6a92a); box-shadow: 0 5px 0 #9a6a10, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #9a6a10, inset 0 2px 0 rgba(255,255,255,.6); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.btn small { font-size: .62em; font-weight: 600; opacity: .85; letter-spacing: 0; margin-top: .15em; }
.btn.mint { color: #06301a; background: linear-gradient(180deg, #b9ffc9, var(--mint) 55%, var(--mint2)); box-shadow: 0 5px 0 #157233, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.mint:active { box-shadow: 0 1px 0 #157233, inset 0 2px 0 rgba(255,255,255,.6); }
.btn.sky { color: #04263d; background: linear-gradient(180deg, #c8f0ff, var(--sky) 55%, var(--sky2)); box-shadow: 0 5px 0 #1d5a93, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.sky:active { box-shadow: 0 1px 0 #1d5a93, inset 0 2px 0 rgba(255,255,255,.6); }
.btn.red { color: #fff; background: linear-gradient(180deg, #ff9a7a, #f0503c 55%, #c22a1e); box-shadow: 0 5px 0 #7a160e, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.45); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.red:active { box-shadow: 0 1px 0 #7a160e, inset 0 2px 0 rgba(255,255,255,.45); }
.btn.ghost { color: var(--text); background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: translateY(2px); }
.btn.big { min-height: 58px; font-size: 1.25rem; padding: .4em 1.3em; border-radius: 20px; }
.btn.small { min-height: 44px; font-size: .92rem; padding: .3em .85em; border-radius: 13px; box-shadow: 0 3px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5); }
.btn.small.ghost { box-shadow: inset 0 0 0 2px var(--line); }
.btn[disabled], .btn.dim { filter: grayscale(.75) brightness(.75); }
.btn[disabled] { pointer-events: none; }
.icon-btn { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--text); background: var(--glass); box-shadow: inset 0 0 0 2px var(--hud-line), 0 4px 12px rgba(0,0,0,.25); flex: none; }
.icon-btn svg { width: 25px; height: 25px; }
.icon-btn:active { transform: scale(.94); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row.two > .btn { flex: 1 1 0; min-width: 0; padding: .4em .7em; }
.col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.x { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.08); flex: none; }
.x svg { width: 18px; height: 18px; }
.spin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--gold); animation: spin .8s linear infinite; vertical-align: -2px; margin-right: .4em; }
@keyframes spin { to { transform: rotate(360deg); } }
.pn { color: var(--pc); filter: brightness(1.2); }
.pn.me { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.cn { color: #fff2c4; }
.tag, .need { font-style: normal; font-size: .82em; font-weight: 600; padding: .05em .5em; border-radius: 99px; background: rgba(255,215,106,.18); color: var(--gold); white-space: nowrap; }

/* ---------- iconos de clase ---------- */
.ci { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cc) 60%, #fff), var(--cc) 55%, color-mix(in srgb, var(--cc) 55%, #000)); color: #1a1030; box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.4); flex: none; }
.ci svg { width: 66%; height: 66%; }
.ci.none { --cc: #777; color: #fff; }
.pips { display: inline-flex; gap: 3px; align-items: center; }
.pip { display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 70%, transparent); color: transparent; }
.pip svg { width: 0; height: 0; }
.pip.on { background: var(--cc); box-shadow: 0 0 6px color-mix(in srgb, var(--cc) 60%, transparent); }
.pips.big .pip { width: 20px; height: 20px; color: #1a1030; }
.pips.big .pip svg { width: 13px; height: 13px; }
.pips.big .pip:not(.on) { color: color-mix(in srgb, var(--cc) 60%, transparent); }

/* ---------- cartas (estética de Reinos de Éter) ---------- */
.cd { --w: 90px; container-type: inline-size; position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); border-radius: calc(var(--w) * .075); padding: calc(var(--w) * .042); display: flex; flex-direction: column; gap: calc(var(--w) * .025); color: #fff; overflow: hidden; font-family: var(--serif);
  background: linear-gradient(160deg, var(--c), var(--cd) 62%); border: max(2px, calc(var(--w) * .022)) solid #1a1428; box-shadow: 0 calc(var(--w) * .04) calc(var(--w) * .1) rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.22); }
.cd-top { display: flex; align-items: center; gap: calc(var(--w) * .03); min-height: calc(var(--w) * .2); flex: none; padding: calc(var(--w) * .02) calc(var(--w) * .035); border-radius: calc(var(--w) * .05); background: rgba(0,0,0,.42); }
.cd-nm { flex: 1; min-width: 0; font-size: calc(var(--w) * .1); line-height: 1.15; font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-val, .cd-win { flex: none; display: grid; place-items: center; grid-auto-flow: column; width: calc(var(--w) * .2); height: calc(var(--w) * .2); border-radius: 50%; font-family: var(--font); font-weight: 700; font-size: calc(var(--w) * .105); color: #2a1a00;
  background: radial-gradient(circle at 35% 30%, #fff6c8, var(--gold) 55%, #b77812); box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.5); }
.cd-val small, .cd-win small, .cd-lose small { font-size: .62em; margin-left: .04em; }
/* número y signo juntos en el centro de la medalla (sin repartirse en dos columnas) */
.cd-val, .cd-win, .cd-lose { justify-content: center; align-content: center; }
.cd-val.used { filter: grayscale(.9) brightness(.7); }
.cd-win { position: absolute; top: calc(var(--w) * .03); right: calc(var(--w) * .03); color: #052a10; background: radial-gradient(circle at 35% 30%, #d4ffd9, #47d96b 55%, #157233); width: calc(var(--w) * .25); height: calc(var(--w) * .25); font-size: calc(var(--w) * .12); }
.cd-crown { flex: none; width: calc(var(--w) * .2); height: calc(var(--w) * .2); color: var(--gold); filter: drop-shadow(0 1px 1px #000); }
.cd-crown svg { width: 100%; height: 100%; }
.cd-mod, .cd-chal { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: calc(var(--w) * .01) calc(var(--w) * .07); border-radius: 99px; font-family: var(--font); font-weight: 700; font-size: calc(var(--w) * .15); line-height: 1.2; color: #fff; background: rgba(8,40,36,.88); box-shadow: 0 0 0 2px var(--c), 0 3px 8px rgba(0,0,0,.6); white-space: nowrap; }
.cd-chal { background: rgba(60,12,6,.88); padding: calc(var(--w) * .025) calc(var(--w) * .06); }
.cd-chal svg { width: calc(var(--w) * .16); height: calc(var(--w) * .16); display: block; }
.cd-art { position: relative; flex: 1 1 0; min-height: 22%; border-radius: calc(var(--w) * .05); overflow: hidden; background: #0b0816; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5); }
.cd-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; pointer-events: none; }
.cd-req { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: calc(var(--w) * .02); background: linear-gradient(transparent, rgba(0,0,0,.82) 40%); }
.rqs { display: inline-flex; gap: calc(var(--w) * .025); align-items: center; flex-wrap: wrap; justify-content: center; }
.rq { display: inline-flex; align-items: center; gap: 1px; font-family: var(--font); font-weight: 700; font-size: calc(var(--w) * .1); color: #fff; padding: 0 calc(var(--w) * .025); border-radius: 99px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.rq > svg { width: calc(var(--w) * .11); height: calc(var(--w) * .11); }
.rq .ci { font-size: calc(var(--w) * .085); }
.rq.ok { box-shadow: inset 0 0 0 1.5px #6dff8e; color: #b9ffc9; }
.cd-lose { position: absolute; top: calc(var(--w) * .03); left: calc(var(--w) * .03); display: grid; place-items: center; grid-auto-flow: column; width: calc(var(--w) * .21); height: calc(var(--w) * .21); border-radius: 50%; font-family: var(--font); font-weight: 700; font-size: calc(var(--w) * .095); color: #fff; background: radial-gradient(circle at 35% 30%, #ffb3a8, #e0412e 55%, #7a160e); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cd-type { display: flex; align-items: center; gap: calc(var(--w) * .03); min-height: calc(var(--w) * .13); padding: 0 calc(var(--w) * .03); border-radius: calc(var(--w) * .04); background: rgba(0,0,0,.4); font-size: calc(var(--w) * .078); line-height: 1.05; color: #f0eaff; }
.cd-type span { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.cd-type .ci { font-size: calc(var(--w) * .085); }
.cd-type .ti { display: grid; place-items: center; width: calc(var(--w) * .12); height: calc(var(--w) * .12); color: var(--c); flex: none; }
.cd-type .ti svg { width: 100%; height: 100%; }
.cd-tx { display: none; flex: 0 1 auto; min-height: 0; overflow: hidden; padding: calc(var(--w) * .03) calc(var(--w) * .045); border-radius: calc(var(--w) * .04); background: rgba(255,250,235,.95); color: #1d1530; font-family: system-ui, -apple-system, 'Segoe UI', Verdana, sans-serif; font-size: calc(var(--w) * .088); line-height: 1.24; }
.cd-tx.more { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.cd-reqrow { display: none; flex: none; justify-content: center; }
.cd-sum { flex: none; display: block; min-height: calc(var(--w) * .2); padding: calc(var(--w) * .02) calc(var(--w) * .03); border-radius: calc(var(--w) * .04); background: rgba(255,250,235,.94); color: #1d1530; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: calc(var(--w) * .115); line-height: 1.2; overflow-wrap: anywhere; }
.cd-sum .good { color: #12702c; } .cd-sum .bad { color: #a0261a; }
/* con sitio (≥ 150 px de ancho), la carta lleva su texto de reglas completo en vez del resumen */
@container (min-width: 126px) {
  .cd-tx { display: block; }
  .cd-sum { display: none; }
  .cd-type { min-height: calc(var(--w) * .1); font-size: calc(var(--w) * .062); }
  .cd-win, .cd-lose { width: calc(var(--w) * .17); height: calc(var(--w) * .17); font-size: calc(var(--w) * .085); }
  .rq { font-size: calc(var(--w) * .075); }
  /* monstruos con texto: los requisitos en su propia fila (no encima de la ilustración) */
  .cd-monstruo .cd-req { display: none; }
  .cd-monstruo .cd-type { display: none; }
  .cd-monstruo .cd-reqrow { display: flex; }
  .cd-mod { font-size: calc(var(--w) * .11); }
  .cd-top { min-height: calc(var(--w) * .15); }
  .cd-monstruo .cd-nm { font-size: calc(var(--w) * .085); }
}
.cd-tx p { margin: 0 0 .25em; } .cd-tx p:last-child { margin: 0; }
.cd-tx .good { color: #12702c; } .cd-tx .bad { color: #a0261a; }
.cd-item { position: absolute; right: calc(var(--w) * .02); bottom: calc(var(--w) * .2); width: calc(var(--w) * .34); height: calc(var(--w) * .34); border-radius: 50%; background: #222 center / cover; box-shadow: 0 0 0 calc(var(--w) * .022) var(--gold), 0 2px 6px rgba(0,0,0,.7); z-index: 3; }
.cd-item.cursed { box-shadow: 0 0 0 calc(var(--w) * .022) #ff4f7a, 0 0 10px #ff4f7a; }
/* tamaños: en pequeño se quitan textos que no se leerían */
.cd.xs { gap: calc(var(--w) * .03); }
.cd.xs .cd-type span { display: none; }
.cd.xs .cd-sum { font-size: calc(var(--w) * .13); min-height: calc(var(--w) * .22); }
.cd.xs .cd-type { justify-content: center; min-height: calc(var(--w) * .2); }
.cd.xs .cd-type .ci { font-size: calc(var(--w) * .12); }
.cd.xs .cd-type .ti { width: calc(var(--w) * .18); height: calc(var(--w) * .18); }
.cd.xs .cd-nm { font-size: calc(var(--w) * .118); }
.cd.xs .cd-val { width: calc(var(--w) * .27); height: calc(var(--w) * .27); font-size: calc(var(--w) * .14); }
.cd.lg { --w: var(--zw); }
.cd.lg .cd-tx { display: block; }
.cd.lg .cd-sum { display: none; }
.cd.lg .cd-art { min-height: 30%; }
.cd.lg .cd-nm { font-size: calc(var(--w) * .075); }
.cd.lg .cd-val { width: calc(var(--w) * .15); height: calc(var(--w) * .15); font-size: calc(var(--w) * .075); }
.cd.lg .cd-crown { width: calc(var(--w) * .13); height: calc(var(--w) * .13); }
.cd.lg .cd-type { font-size: calc(var(--w) * .052); min-height: calc(var(--w) * .095); }
.cd.lg .cd-type .ci { font-size: calc(var(--w) * .062); }
.cd.lg .cd-type .ti { width: calc(var(--w) * .08); height: calc(var(--w) * .08); }
.cd.lg .cd-tx { font-size: max(14px, calc(var(--w) * .056)); }
.cd.lg .cd-mod { font-size: calc(var(--w) * .1); }
.cd.lg .cd-chal svg { width: calc(var(--w) * .1); height: calc(var(--w) * .1); }
.cd.lg .rq { font-size: calc(var(--w) * .062); padding: 0 calc(var(--w) * .02); }
.cd.lg .rq > svg { width: calc(var(--w) * .07); height: calc(var(--w) * .07); }
.cd.lg .rq .ci { font-size: calc(var(--w) * .055); }
.cd.lg .cd-lose { width: calc(var(--w) * .14); height: calc(var(--w) * .14); font-size: calc(var(--w) * .065); }
.cd.lg .cd-win { width: calc(var(--w) * .16); height: calc(var(--w) * .16); font-size: calc(var(--w) * .075); }
.cd.lg .cd-item { display: none; }
/* dorsos: marco oscuro con filigrana dorada y el medallón de Reinos de Éter */
.cd-back { background: radial-gradient(circle at 50% 45%, #3a2a7a, #160f33 70%); border-color: #0d0820; display: grid; place-items: center; }
.cd-back::before { content: ''; position: absolute; inset: 7%; border-radius: calc(var(--w) * .05); border: max(1px, calc(var(--w) * .018)) solid rgba(255,215,106,.7); box-shadow: inset 0 0 0 calc(var(--w) * .03) rgba(255,215,106,.12); }
.cd-back .cb-med { width: 70%; aspect-ratio: 1; border-radius: 50%; background: url(assets/ui/medallon.webp) center / cover; box-shadow: 0 0 0 max(1px, calc(var(--w) * .02)) var(--gold), 0 0 calc(var(--w) * .15) rgba(255,215,106,.4); }
.cd-back.mon .cb-med { background-image: url(assets/ui/medallon_monstruo.webp); box-shadow: 0 0 0 max(1px, calc(var(--w) * .02)) #b06cff, 0 0 calc(var(--w) * .15) rgba(176,108,255,.5); }
/* estados */
.cd.can { box-shadow: 0 0 0 2px var(--gold), 0 0 16px 3px rgba(255,215,106,.55), 0 4px 10px rgba(0,0,0,.5); cursor: pointer; animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px #fff4c4, 0 0 22px 6px rgba(255,215,106,.75), 0 4px 10px rgba(0,0,0,.5); } }
.cd.tgt { box-shadow: 0 0 0 3px #ff5ad1, 0 0 18px 5px rgba(255,90,209,.6); cursor: pointer; animation: tgt 1s ease-in-out infinite; }
@keyframes tgt { 50% { box-shadow: 0 0 0 3px #fff, 0 0 26px 8px rgba(255,90,209,.8); } }
.cd.fight { animation: fight .5s ease-in-out infinite; box-shadow: 0 0 0 3px #ff6a3c, 0 0 20px 6px rgba(255,106,60,.6); }
@keyframes fight { 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } }

/* ---------- mesa ---------- */
#hud { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: calc(4px + var(--safe-t)) calc(6px + var(--safe-r)) max(calc(6px + var(--safe-b)), var(--cookie-b, 0px)) calc(6px + var(--safe-l)); --mw: 110px; --pw: 76px; --hw: 96px; }
.tb { display: flex; align-items: flex-start; gap: 6px; flex: none; }
.tb-r { display: flex; gap: 6px; flex: none; }
.opps { flex: 1; min-width: 0; display: flex; gap: 5px; }
.opp { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 4px 6px 4px 4px; border-radius: 14px; background: var(--hud-glass); box-shadow: inset 0 0 0 1.5px var(--hud-line); text-align: left; min-height: 52px; transition: box-shadow .2s, background .2s; }
.opp.turn { box-shadow: inset 0 0 0 2.5px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 45%, transparent); background: color-mix(in srgb, var(--pc) 16%, rgba(20,14,46,.82)); }
.opp.acting { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.opp.passed .av { filter: grayscale(.4) brightness(.85); }
.opp.away { opacity: .65; }
.opp.tgt { box-shadow: inset 0 0 0 3px #ff5ad1, 0 0 14px rgba(255,90,209,.7); animation: pulse 1s infinite; }
.opp.won { box-shadow: inset 0 0 0 3px var(--gold), 0 0 20px rgba(255,215,106,.7); }
@keyframes pulse { 50% { transform: scale(1.03); } }
.av { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.av img, .av .ini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--pc, var(--gold)); }
.av .face { display: contents; }
.ini { display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 1.05rem; color: #fff; background: radial-gradient(circle at 35% 30%, #5a4aa8, #2a2058); }
.ini svg { width: 60%; height: 60%; }
.lav.face { display: grid; place-items: center; overflow: hidden; }
.lav.face .ini, .lav.face img { width: 100%; height: 100%; border-radius: 50%; box-shadow: none; object-fit: cover; }
.av .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.av .ring circle { fill: none; stroke: transparent; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 0; transition: stroke-dashoffset .15s linear, stroke .3s; }
.av.timed .ring circle { stroke: #47d96b; }
.av.timed.warn .ring circle { stroke: #ffa23a; }
.av.timed.late .ring circle { stroke: #ff4a4a; }
.av.timed.frozen .ring circle { stroke: rgba(255,255,255,.45); }
.av .secs { position: absolute; right: -6px; bottom: -4px; min-width: 20px; padding: 0 4px; border-radius: 99px; font-style: normal; font-size: .7rem; font-weight: 700; line-height: 16px; text-align: center; background: #12301c; color: #9cffb3; box-shadow: 0 0 0 1.5px #47d96b; }
.av .secs:empty { display: none; }
.av.warn .secs { background: #3a2508; color: #ffd08a; box-shadow: 0 0 0 1.5px #ffa23a; }
.av.late .secs { background: #3a0c0c; color: #ffb0b0; box-shadow: 0 0 0 1.5px #ff4a4a; animation: pulse .5s infinite; }
.av.frozen .secs { background: #2a2540; color: #ddd; box-shadow: 0 0 0 1.5px #999; }
.oi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oi .nm { font-size: .82rem; line-height: 1.05; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.os { display: flex; gap: 5px; font-style: normal; }
.os i { display: inline-flex; align-items: center; gap: 1px; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--muted); }
.os i svg { width: 13px; height: 13px; }
.os i.sk.on { color: var(--gold); }
.opp .pips .pip { width: 9px; height: 9px; }
.opp .strip { display: none; }
.bub { position: absolute; z-index: 6; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); padding: 4px 10px; border-radius: 12px; background: #fff; color: #1d1530; font-style: normal; font-weight: 700; font-size: .85rem; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.35); pointer-events: none; }
.bub.emoji { font-size: 1.5rem; padding: 2px 8px; }
.bub.pop { animation: bub .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes bub { from { transform: translateX(-50%) scale(.3); opacity: 0; } }

.board { flex: none; position: relative; display: flex; justify-content: center; }
.mons { display: flex; justify-content: center; gap: 6px; position: relative; }
.ms { flex: none; }
.ms .cd { --w: var(--mw); }
.ms.empty { width: var(--mw); height: calc(var(--mw) * 1.4); border-radius: 10px; border: 2px dashed rgba(255,255,255,.18); display: grid; place-items: center; color: var(--muted); font-size: .8rem; text-align: center; padding: 6px; }
.mdeck { position: absolute; right: -6px; top: -8px; z-index: 4; display: none; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 99px; background: var(--hud-glass); box-shadow: inset 0 0 0 1.5px rgba(176,108,255,.5); font-weight: 700; font-size: .78rem; color: #d9c2ff; }
.mdeck svg { width: 14px; height: 14px; }

.mine { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.me-head { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 99px; background: var(--hud-glass); box-shadow: inset 0 0 0 1.5px var(--hud-line); align-self: center; max-width: 100%; }
.me-head.turn { box-shadow: inset 0 0 0 2.5px var(--pc), 0 0 16px color-mix(in srgb, var(--pc) 50%, transparent); }
.me-head.tgt { box-shadow: inset 0 0 0 3px #ff5ad1, 0 0 14px rgba(255,90,209,.7); }
.me-head .av { width: 36px; height: 36px; }
.me-head .av img, .me-head .av .ini { width: 30px; height: 30px; }
.me-head .nm { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.me-head .slain { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -7px 0; padding: 0 8px; border-radius: 99px; font-weight: 700; color: var(--muted); background: rgba(0,0,0,.3); background-clip: padding-box; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.me-head .slain svg { width: 18px; height: 18px; }
.me-head .slain.on { color: var(--gold); }
.me-head .slain small { opacity: .7; font-size: .75em; }
.me-head .prot { color: #ffe9a0; display: grid; } .me-head .prot svg { width: 20px; height: 20px; filter: drop-shadow(0 0 4px #ffd76a); }
.party { display: flex; gap: 5px; justify-content: center; padding: 4px 2px 6px; overflow-x: auto; scrollbar-width: none; min-height: calc(var(--pw) * 1.4 + 10px); }
.party::-webkit-scrollbar { display: none; }
.party .cd { --w: var(--pw); }
.party.stacked { gap: 0; justify-content: flex-start; }
.party.stacked .cd + .cd { margin-left: var(--ov); }
.party.stacked .cd { box-shadow: -3px 0 8px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5); }
.party .cd.lead { box-shadow: 0 0 0 2px rgba(255,215,106,.55), 0 4px 10px rgba(0,0,0,.5); }

.status { flex: none; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 4px 6px; border-radius: 16px; background: var(--hud-glass); box-shadow: inset 0 0 0 1.5px var(--hud-line); }
.piles { flex: none; display: flex; gap: 6px; }
.pile { position: relative; display: grid; place-items: center; min-width: 44px; min-height: 52px; }
.pile .cd { --w: 34px; box-shadow: 1px 1px 0 #0d0820, 2px 2px 0 #2a2050, 0 3px 6px rgba(0,0,0,.5); }
.pile .cd .cd-top, .pile .cd .cd-type { display: none; }
.pile .dtop .empty { display: block; width: 34px; height: 48px; border-radius: 5px; border: 2px dashed rgba(255,255,255,.2); }
.pile b { position: absolute; right: -4px; bottom: -2px; min-width: 22px; padding: 0 5px; border-radius: 99px; font-size: .72rem; line-height: 17px; text-align: center; background: #120d2c; color: #fff; box-shadow: 0 0 0 1.5px var(--hud-line); }
.mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ap { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.gems { display: inline-flex; gap: 4px; }
.gem { width: 18px; height: 18px; transform: rotate(45deg); border-radius: 4px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); transition: background .2s, box-shadow .2s; }
.gem.on { background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 55%, color-mix(in srgb, var(--pc) 60%, #000)); box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 70%, transparent), inset 0 0 0 1px rgba(255,255,255,.6); }
.apn { font-size: 1.05rem; color: var(--gold); }
.hint { font-size: .86rem; line-height: 1.15; color: var(--muted); min-height: 2.3em; display: flex; align-items: center; }
.hint.own { color: #fff; }
.hint.new .ht { animation: hintin .3s ease-out; }
@keyframes hintin { from { opacity: 0; transform: translateY(4px); } }
.ht b { color: var(--gold); }
/* bandeja de dados (cubos 3D) */
.tray { flex: none; position: relative; display: flex; gap: 12px; align-items: center; justify-content: center; min-width: 136px; min-height: 64px; padding: 4px 10px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 30%, #3b2d72, #1a1238 75%); box-shadow: inset 0 3px 10px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,215,106,.35); --ds: 30px; }
.tray.duel { --ds: 22px; gap: 10px; }
.tray.old { opacity: .62; }
.tray.win { animation: trayok 1.2s ease-out; } .tray.lose { animation: trayko 1.2s ease-out; }
@keyframes trayok { 20% { box-shadow: inset 0 3px 10px rgba(0,0,0,.6), 0 0 0 3px #47d96b, 0 0 26px #47d96b; } }
@keyframes trayko { 20% { box-shadow: inset 0 3px 10px rgba(0,0,0,.6), 0 0 0 3px #ff4a4a, 0 0 26px #ff4a4a; } }
.pair { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.pair .lbl { display: flex; align-items: baseline; justify-content: center; gap: 6px; max-width: 100%; min-height: 1.3em; line-height: 1.1; white-space: nowrap; }
.pair .who { font-size: .72rem; font-weight: 700; color: var(--pc); min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.pair .who:empty { display: none; }
.pair .tot { display: inline-flex; align-items: baseline; gap: 3px; }
.pair .tot b { font-size: 1.25rem; color: #fff; text-shadow: 0 1px 0 #000; }
.pair .tot b:empty { display: none; }
.pair .tot b.bump { animation: bump .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes bump { from { transform: scale(1.7); color: var(--gold); } }
.pair .tot small { font-size: .68rem; color: var(--muted); }
.pair.ok .tot b { color: #8ff0a4; } .pair.ko .tot b { color: #ff9a9a; }
.pair .dd { display: flex; gap: calc(var(--ds) * .5); perspective: 600px; padding: 2px calc(var(--ds) * .15) calc(var(--ds) * .18); }
.pair.idle .dd { opacity: .55; }
/* cámara casi cenital: se ve la cara de arriba de frente y apenas un filo de los lados; sombra sobre el tapete */
.die { width: var(--ds); height: var(--ds); transform-style: preserve-3d; transform: rotateX(-7deg) rotateY(7deg); filter: drop-shadow(2px 4px 3px rgba(0,0,0,.55)); }
.cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.df { position: absolute; inset: 0; border-radius: 20%; background: radial-gradient(circle at 32% 26%, #ffffff, #f6eedb 62%, #e2d4b2); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -2px 3px rgba(0,0,0,.1); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 13%; backface-visibility: hidden; }
.df b { width: 78%; height: 78%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #4a2a20, #120604 70%); box-shadow: inset 0 1px 1px rgba(255,255,255,.18); }
.df .p1 { grid-area: 1 / 1; } .df .p2 { grid-area: 1 / 2; } .df .p3 { grid-area: 1 / 3; } .df .p4 { grid-area: 2 / 1; } .df .p5 { grid-area: 2 / 2; } .df .p6 { grid-area: 2 / 3; } .df .p7 { grid-area: 3 / 1; } .df .p8 { grid-area: 3 / 2; } .df .p9 { grid-area: 3 / 3; }
.df.f1 b { background: radial-gradient(circle at 40% 35%, #ff7a5a, #a01a10); width: 90%; height: 90%; }
.df.f1 { transform: translateZ(calc(var(--ds) / 2)); } .df.f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.df.f2 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); } .df.f5 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.df.f3 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); } .df.f4 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }

.acts { flex: none; display: flex; gap: 6px; }
.act { position: relative; flex: 1 1 0; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 8px; border-radius: 14px; font-weight: 700; font-size: .92rem; line-height: 1.05; color: #fff; background: linear-gradient(180deg, #4b3d98, #31276a); box-shadow: 0 3px 0 #1a1440, inset 0 0 0 1.5px rgba(255,255,255,.18); }
.act svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.act span { min-width: 0; text-align: left; }
.act .cost { flex: none; display: grid; place-items: center; width: 20px; height: 20px; transform: rotate(45deg); border-radius: 4px; font-style: normal; font-size: .72rem; background: var(--gold); color: #3a2600; }
.act .cost::first-line { }
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a1440, inset 0 0 0 1.5px rgba(255,255,255,.18); }
.act[disabled] { opacity: .38; filter: grayscale(.6); pointer-events: none; }
.act.b-end.hot { background: linear-gradient(180deg, #ffe48a, #e6a92a); color: #3a2600; box-shadow: 0 3px 0 #8d6410, 0 0 14px rgba(255,215,106,.6); }
.act.b-end.hot svg { color: #3a2600; }
.act .cost { transform: none; border-radius: 50%; }

.hand { position: relative; flex: none; height: calc(var(--hw) * 1.4 + 12px); }
.hand .cd { --w: var(--hw); position: absolute; bottom: 0; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); transform-origin: 50% 120%; transition: transform .18s, box-shadow .2s; cursor: pointer; }
.hand.scroll { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.hand.scroll::-webkit-scrollbar { display: none; }
.hand-end { position: absolute; bottom: 0; width: 1px; height: 1px; pointer-events: none; }
@media (hover: hover) { .hand .cd:hover { transform: translateY(-14px) rotate(var(--r, 0deg)) scale(1.06); z-index: 40 !important; } }

.ticker { flex: none; min-height: 22px; padding: 2px 10px; border-radius: 10px; font-size: .78rem; line-height: 1.2; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(10,6,28,.45); order: 2; }
.ticker.new { animation: hintin .35s ease-out; }
.logbox { display: none; }
.tb { order: 1; } .board { order: 3; } .mine { order: 4; } .status { order: 5; } .acts { order: 6; } .hand { order: 7; }

/* ---------- panel: ventana de reacción, elección y tirada gratis ---------- */
.panel { position: absolute; z-index: 30; left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); bottom: max(calc(6px + var(--safe-b)), var(--cookie-b, 0px)); max-height: 62%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 22px; background: linear-gradient(180deg, #30266a, #1a133c); box-shadow: 0 -10px 40px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,215,106,.35); }
.panel.pop { animation: up .28s cubic-bezier(.2,.9,.3,1.05) both; }
.panel.sent .pbtns, .panel.sent .obody { opacity: .45; pointer-events: none; }
.pn-head { display: flex; gap: 10px; align-items: center; }
.pn-head .stg { flex: none; }
.pn-head .stg .cd { --w: 70px; }
.pn-head .pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ttl { margin: 0; font-size: 1.05rem; line-height: 1.2; font-weight: 600; }
.pt small { color: var(--muted); font-size: .85rem; }
.rl { display: flex; align-items: center; gap: 10px; }
.rl em { font-style: normal; color: var(--muted); font-weight: 700; }
.rt { display: inline-flex; flex-direction: column; align-items: center; min-width: 54px; padding: 2px 10px; border-radius: 12px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 70%, transparent); }
.rt small { font-size: .7rem; color: var(--pc); font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt b { font-size: 1.7rem; line-height: 1.05; }
.rt.ok b { color: #8ff0a4; } .rt.ko b { color: #ff9a9a; }
.wbar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; flex: none; }
.wbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #47d96b, #c8ff6a); transform-origin: left; transition: transform .12s linear; }
.wbar.late i { background: linear-gradient(90deg, #ff4a4a, #ffa23a); }
.wbar.none { visibility: hidden; }
.pbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pbtns > .btn { flex: 1 1 150px; }
.mods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; flex: 1 1 100%; }
.mods .gl { flex: 1 1 100%; text-align: center; font-size: .85rem; color: var(--muted); }
.btn.mod { min-width: 82px; min-height: 58px; flex-direction: column; gap: 0; padding: .2em .7em; color: #fff; }
.btn.mod .mp { display: block; font-size: .78rem; font-weight: 600; line-height: 1.1; }
.btn.mod .mp b { font-size: 1.05em; }
.btn.mod b { font-size: 1.55rem; line-height: 1; }
.btn.mod small { font-size: .62rem; max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.mod.up { background: linear-gradient(180deg, #9cf5b2, #2fbf62 55%, #178a40); box-shadow: 0 5px 0 #0e5a29, inset 0 2px 0 rgba(255,255,255,.5); color: #032a12; }
.btn.mod.down { background: linear-gradient(180deg, #ffb0a0, #e8503e 55%, #b1291b); box-shadow: 0 5px 0 #6e140c, inset 0 2px 0 rgba(255,255,255,.4); }
.pfoot { display: flex; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.pfoot .btn { flex: 1 1 auto; max-width: 420px; }
.pfoot .sub { font-size: .9rem; }
.obody { display: flex; flex-direction: column; gap: 8px; }
.og .gl { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.ocards { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.opt { position: relative; flex: none; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.opt .cd { --w: 84px; box-shadow: 0 0 0 2px #ff5ad1, 0 0 12px rgba(255,90,209,.5); }
.opt:active .cd { transform: scale(.95); }
.opt .ow { font-size: .72rem; color: var(--muted); max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oplayers { display: flex; flex-wrap: wrap; gap: 8px; }
.opt.pl { flex: 1 1 140px; flex-direction: row; gap: 8px; min-height: 56px; padding: 6px 10px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px #ff5ad1; text-align: left; }
.opt.pl .av { width: 40px; height: 40px; } .opt.pl .av img { width: 38px; height: 38px; }
.opt.pl .pi { display: flex; flex-direction: column; min-width: 0; }
.opt.pl small { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); } .opt.pl small svg { width: 13px; height: 13px; }
.oclasses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opt.cl { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 50px; padding: 4px 10px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px var(--cc); font-weight: 700; font-size: .9rem; }
.opt.cl .ci { font-size: 1.15rem; }
.opt.cl span { min-width: 0; overflow-wrap: anywhere; text-align: left; line-height: 1.05; }

/* ventana de reacción: qué está en juego (carta y efecto o tirada y lo que necesita) y los botones en una fila */
.panel[data-kind="react"] { gap: 7px; }
.panel[data-kind="react"] .ttl { font-size: 1rem; }
.rx-body { display: flex; gap: 10px; align-items: flex-start; }
.rx-body .stg { flex: none; }
.rx-body .stg .cd { --w: 64px; cursor: pointer; }
.rx-desc { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.3; color: #f1ecff; }
.rx-desc .good { color: #9dffb0; } .rx-desc .bad { color: #ffb0a6; }
.rx-desc .rl { margin-top: 6px; }
.panel[data-kind="react"] .pbtns { gap: 6px; }
.panel[data-kind="react"] .pbtns > .btn { flex: 1 1 90px; min-height: 52px; padding: .25em .6em; font-size: 1rem; }
.panel[data-kind="react"] .pbtns > .btn.mod { flex: 1 1 82px; }
body:not(.land) .panel[data-kind="react"] { max-height: 40%; }
body:not(.land) .panel[data-kind="react"] .pbtns { position: sticky; bottom: 0; margin: 0 -12px -12px; padding: 6px 12px 12px; background: #1a133c; z-index: 2; }
body:not(.land) .panel[data-kind="react"] .pbtns > .btn.mod { flex: 1 1 22%; min-width: 0; min-height: 50px; padding: .15em .3em; }
body:not(.land) .panel[data-kind="react"] .pbtns > .btn.mod b { font-size: 1.25rem; }
body:not(.land) .panel[data-kind="react"] .pbtns > .btn.mod small { max-width: 100%; }
/* en horizontal, la ventana de reacción y la tirada gratis van en la columna derecha bajo los dados */
#hud.side-panel .acts { visibility: hidden; }
#hud.side-panel .status .piles { display: none; }
body.land .panel[data-kind="react"], body.land .panel[data-kind="offer"] { bottom: auto; padding: 8px 9px 10px; border-radius: 18px; gap: 6px; }
body.land .panel[data-kind="react"] .rx-body { flex-direction: column; align-items: stretch; gap: 6px; }
body.land .panel[data-kind="react"] .rx-body .stg { display: none; }
body.land .panel[data-kind="react"] .rx-desc { font-size: .84rem; }
body.land .panel[data-kind="react"] .pbtns > .btn { flex: 1 1 100%; min-height: 46px; }
body.land .panel[data-kind="react"] .pbtns, body.land .panel[data-kind="offer"] .pbtns { position: sticky; bottom: 0; margin: 0 -9px -10px; padding: 6px 9px 10px; background: #1a133c; z-index: 2; }
body.short #hud.side-panel .status .mid { display: none; }
body.short .panel[data-kind="react"] .rx-desc { font-size: .78rem; }
body.short .panel[data-kind="react"] .ttl { font-size: .86rem; }
body.short .panel[data-kind="react"] .pbtns > .btn, body.short .panel[data-kind="react"] .pbtns > .btn.mod { flex: 1 1 28%; min-width: 0; min-height: 44px; font-size: .86rem; padding: .15em .3em; }
body.short .panel[data-kind="react"] .btn.mod small { display: none; }
body.short .btn.mod b { font-size: 1.2rem; }
body.land .panel[data-kind="react"] .pbtns > .btn.mod { flex: 1 1 45%; }
body.desk .panel[data-kind="react"] .rx-body .stg { display: block; align-self: center; }
body.desk .panel[data-kind="react"] .rx-body .stg .cd { --w: 150px; }
body.desk .panel[data-kind="react"] .rx-desc { font-size: .95rem; }
body.desk .panel[data-kind="react"] .ttl { font-size: 1.08rem; }
body.land .panel[data-kind="offer"] .pn-head { flex-direction: column; align-items: stretch; }
body.land .panel[data-kind="offer"] .pn-head .stg { display: none; }
body.desk .panel[data-kind="offer"] .pn-head .stg { display: block; align-self: center; }
body.land .panel[data-kind="offer"] .pbtns > .btn { flex: 1 1 100%; }

/* ---------- preparación: tirada inicial y elección de líder ---------- */
.su-rolls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.su-rolls li { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 3px 8px 3px 3px; border-radius: 14px; background: rgba(0,0,0,.28); }
.su-rolls li.me { box-shadow: inset 0 0 0 2px var(--gold); }
.su-rolls .av { width: 38px; height: 38px; }
.su-rolls .snm { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sres { display: flex; align-items: center; gap: 4px; }
.sres b { min-width: 30px; padding: 0 6px; border-radius: 10px; text-align: center; font-size: 1.25rem; line-height: 1.4; color: #2a1a00; background: var(--gold); }
.sres b.old { font-size: .8rem; color: var(--muted); background: rgba(255,255,255,.1); text-decoration: line-through; }
.sres .dots { display: grid; place-items: center; width: 28px; height: 28px; color: var(--gold); animation: pulse .8s infinite; }
.sres .dots svg { width: 24px; height: 24px; }
.su-tie { margin: 0; text-align: center; font-weight: 700; color: #ffb39a; }
.su-order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; }
.su-order li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.25); font-size: .82rem; }
.su-order li.now { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255,215,106,.15); }
.su-order .pos { color: var(--muted); font-weight: 700; }
.su-order small { color: var(--gold); font-weight: 700; }
.su-order .ldot { width: 20px; height: 20px; border-radius: 50%; background: center 20% / cover; }
.su-leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sl { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-height: 44px; padding: 7px 8px 8px; border-radius: 16px; text-align: left; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 22%, rgba(20,14,46,.9)), rgba(14,10,32,.9) 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cc) 60%, transparent); transition: transform .12s, box-shadow .15s; }
.slh { display: flex; align-items: center; gap: 8px; }
.sl .slp { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #222 center 20% / cover; box-shadow: 0 0 0 2.5px var(--cc), 0 3px 8px rgba(0,0,0,.5); }
.slt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl .sln { font-family: var(--serif); font-weight: 700; font-size: .95rem; line-height: 1.1; color: #fff; }
.slc { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; color: var(--cc); filter: brightness(1.15); }
.slc .ci { font-size: .72rem; }
.sla { font-size: .8rem; line-height: 1.28; color: #f1ecff; }
@media (hover: hover) { .sl:not(.taken):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--cc), 0 0 16px color-mix(in srgb, var(--cc) 55%, transparent); } }
.sl.on { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(255,215,106,.55); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 38%, rgba(20,14,46,.9)), rgba(30,22,64,.95) 75%); }
.sl.on::before { content: '✓'; position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #3a2600; background: var(--gold); }
.sl.taken { opacity: .5; filter: grayscale(.85); cursor: default; }
.sl.taken .sln { text-decoration: line-through; text-decoration-thickness: 2px; }
.sl .who { position: absolute; top: 8px; right: 8px; max-width: 55%; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: .72rem; font-weight: 700; background: #ff5a5a; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: none; }
/* panel de la preparación: centrado y a la medida de su contenido */
#hud .panel[data-kind="setup"] { top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: fit-content; max-height: calc(100% - 12px - var(--safe-t) - var(--safe-b)); width: min(940px, calc(100% - 12px - var(--safe-l) - var(--safe-r))); }
body.land .su-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.land .su-rolls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.desk .sl .slp { width: 64px; height: 64px; }
body.desk .sl .sln { font-size: 1.15rem; }
body.desk .slc { font-size: .85rem; }
body.desk .sla { font-size: .95rem; }
body.desk .panel[data-kind="setup"] .pfoot .btn { max-width: 460px; }
body.short .panel[data-kind="setup"] { padding: 8px 10px; gap: 6px; }
body.short .sl { padding: 5px 7px 6px; gap: 3px; }
body.short .sl .slp { width: 34px; height: 34px; }
body.short .sl .sln { font-size: .82rem; }
body.short .sla { font-size: .72rem; line-height: 1.2; }
body.short .panel[data-kind="setup"] .pn-head small { display: none; }
@media (max-height: 700px) and (orientation: portrait) { .sla { font-size: .74rem; line-height: 1.22; } .sl .slp { width: 38px; height: 38px; } .panel[data-kind="setup"] .pn-head small { display: none; } }

/* ---------- carta ampliada ---------- */
.zoom-wrap { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); background: rgba(8,5,22,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.zoom-wrap.pop .zoom-box { animation: zin .25s cubic-bezier(.2,1.3,.4,1) both; }
.zoom-wrap.out { animation: fadeout .18s both; pointer-events: none; }
@keyframes zin { from { transform: scale(.7); opacity: 0; } }
.zoom-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; max-width: 100%; }
.zcards { display: flex; gap: 10px; align-items: center; justify-content: center; max-width: 100%; }
.zcards .item-z { --w: calc(var(--zw) * .72); }
.zside { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zinfo { margin: 0; max-width: min(92vw, 420px); text-align: center; color: var(--muted); font-size: .95rem; }
.zbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: min(92vw, 420px); }
.zbtns .btn { flex: 1 1 160px; }
body:not(.land) .zcards .item-z { --w: calc(var(--zw) * .62); }
.zoom-wrap .cd.lg { --w: var(--zw); }
.zside { flex: none; }
.zoom-box { overflow-y: auto; }

/* ---------- efectos ---------- */
#fx { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.hover-card { position: fixed; z-index: 70; display: flex; gap: 8px; align-items: center; pointer-events: none; --zw: min(300px, 34vh); animation: zin .14s ease-out both; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.hover-card .item-z { --w: calc(var(--zw) * .72); }
.flyer { position: fixed; z-index: 36; pointer-events: none; }
.flyer > .cd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.flyer.dying > .cd { filter: sepia(1) hue-rotate(-40deg) saturate(3) brightness(.8); }
.flyer.slaying > .cd { animation: slaying .65s ease-in both; }
@keyframes slaying { 20% { transform: translateX(-4px) rotate(-3deg); filter: brightness(2); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: scale(1.12); filter: brightness(2.5) saturate(0); } 100% { transform: scale(1.05); filter: brightness(1.4); } }
.flyer.back > .cd { --w: 34px; }
.spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: spark .8s ease-out both; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 37; pointer-events: none; white-space: nowrap; animation: banner 1.5s cubic-bezier(.2,.9,.3,1) both; }
.banner span { display: block; padding: .25em .9em; border-radius: 18px; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 7vw, 2.8rem); color: #fff; background: rgba(20,14,46,.88); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.3); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.banner.gold span { color: #3a2600; background: linear-gradient(180deg, #fff1b0, var(--gold) 60%, #e6a92a); }
.banner.red span { background: linear-gradient(180deg, #ff8a6a, #d93a28); }
@keyframes banner { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.conf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: conf 3s linear both; }
@keyframes conf { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

/* ---------- avisos, red y registro ---------- */
#toasts { position: absolute; z-index: 60; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(92vw, 440px); pointer-events: none; }
.toast { padding: 9px 16px; border-radius: 14px; background: rgba(20,14,46,.95); box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1.5px var(--hud-line); font-size: .95rem; text-align: center; animation: in .25s ease-out both; }
.toast.red { box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 2px #ff5a5a; }
.toast.gold { box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 2px var(--gold); }
.toast.dim { opacity: .9; }
.toast.out { animation: out .3s ease-in both; }
.toast svg { width: 1em; height: 1em; vertical-align: -2px; }
.netpill { position: absolute; z-index: 45; left: 50%; top: calc(60px + var(--safe-t)); transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: rgba(60,12,12,.92); font-size: .85rem; font-weight: 600; }
.away-bar { position: absolute; z-index: 46; left: 50%; bottom: calc(80px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 99px; background: rgba(20,14,46,.95); box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 0 0 2px var(--gold); white-space: nowrap; }
.drawer { position: absolute; z-index: 50; top: calc(6px + var(--safe-t)); right: calc(6px + var(--safe-r)); bottom: calc(6px + var(--safe-b)); width: min(380px, calc(100% - 12px - var(--safe-l) - var(--safe-r))); display: flex; flex-direction: column; border-radius: 20px; background: rgba(20,14,46,.97); box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 0 2px var(--hud-line); animation: in .2s ease-out both; }
.drawer header { display: flex; align-items: center; padding: 8px 8px 4px 16px; }
.drawer h3 { flex: 1; margin: 0; }
.drawer ol { list-style: none; margin: 0; padding: 4px 14px 14px; overflow-y: auto; flex: 1; font-size: .88rem; line-height: 1.3; }
.drawer li { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.drawer li.turn { color: var(--gold); text-align: center; font-weight: 700; border: 0; padding-top: 10px; }
.drawer li.dim { color: var(--muted); }
.drawer li.good { color: #c4ffd0; } .drawer li.bad { color: #ffc4c4; }

/* ---------- pantallas ---------- */
#screens { position: absolute; inset: 0; pointer-events: none; z-index: 55; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; animation: in .25s ease-out both; padding: calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l)); }
.screen.out { animation: out .2s ease-in both; pointer-events: none; }
@keyframes in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes out { to { opacity: 0; transform: scale(.98); } }
@keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.overlay { justify-content: center; background: rgba(8,5,22,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.card { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 20px 18px; border-radius: 26px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 2px var(--line), 0 20px 50px rgba(0,0,0,.5); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.card h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1.1; color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.sub { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.3; }
.sub.small { font-size: .85rem; }
.sub.big { font-size: 1.12rem; color: var(--text); }
.card.scroll { max-height: min(90vh, 760px); }

/* portada */
.title-screen { justify-content: space-between; gap: 8px; }
.logo { text-align: center; margin-top: calc(2vh + 44px); flex: none; }
.logo .lg { display: inline-block; text-wrap: balance; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 12.5vw, 5.4rem); line-height: .95; color: #ffe08a; -webkit-text-stroke: 2px #5a2f00; paint-order: stroke fill; text-shadow: 0 4px 0 #5a2f00, 0 0 30px rgba(255,190,80,.55), 0 12px 24px rgba(0,0,0,.5); letter-spacing: .01em; }
.logo p { margin: .55em auto 0; display: inline-block; padding: .3em .95em; border-radius: 99px; background: rgba(20,14,46,.82); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; font-size: 1rem; }
.title-fan { position: relative; flex: 1 1 auto; min-height: 0; width: min(560px, 100%); display: flex; justify-content: center; align-items: center; pointer-events: none; }
.title-fan .cd { --w: clamp(70px, min(22vw, 16vh), 150px); position: absolute; transform-origin: 50% 130%; animation: tfan 1s cubic-bezier(.2,.9,.3,1) both; }
.tf0 { transform: translateX(-62%) rotate(-24deg); animation-delay: .05s !important; } .tf1 { transform: translateX(-32%) rotate(-12deg); animation-delay: .12s !important; }
.tf2 { transform: translateY(-6%) rotate(0deg); z-index: 3; animation-delay: .19s !important; } .tf3 { transform: translateX(32%) rotate(12deg); animation-delay: .26s !important; } .tf4 { transform: translateX(62%) rotate(24deg); animation-delay: .33s !important; }
@keyframes tfan { from { opacity: 0; transform: translateY(40%) rotate(0deg) scale(.7); } }
.title-bottom { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(390px, 100%); flex: none; }
.title-bottom .btn.big { justify-content: flex-start; }
.join-row { display: flex; gap: 8px; }
.join-row .code { flex: 1; min-width: 0; height: 44px; border-radius: 13px; border: 0; padding: 0 14px; font-size: 1.15rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--text); background: var(--glass); box-shadow: inset 0 0 0 2px var(--line); }
.join-row .code::placeholder { color: var(--muted); letter-spacing: .12em; font-weight: 600; }
.online-count { margin: -4px 0 0; text-align: center; font-size: .85rem; font-weight: 600; color: #fff; min-height: 1em; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.online-count:empty { display: none; }
.online-count .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5bff7a; margin-right: 6px; box-shadow: 0 0 8px #5bff7a; }
.portal-link { position: absolute; z-index: 2; left: calc(10px + var(--safe-l)); top: calc(8px + var(--safe-t)); display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 99px; background: var(--glass); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.portal-link svg { width: 28px; height: 28px; }
.nick-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: 200px; padding: 0 12px 0 6px; border-radius: 99px; background: var(--glass); box-shadow: inset 0 0 0 2px var(--line); font-weight: 600; }
.nick-chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nick-chip svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.lav { display: inline-block; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #2a2050 center 20% / cover; box-shadow: 0 0 0 2px var(--cc, var(--gold)); }

/* hojas inferiores */
.sheet-wrap { position: fixed; inset: 0; z-index: 58; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.sheet-wrap.modal { pointer-events: auto; background: rgba(8,5,22,.5); animation: fade .2s both; }
.sheet-wrap.out, .sheet-wrap.out .sheet, .zoom-wrap.out, .zoom-wrap.out * { animation: fadeout .2s both; pointer-events: none; }
.sheet { pointer-events: auto; width: min(500px, 100%); max-height: 90%; overflow: auto; border-radius: 24px 24px 0 0; padding: 14px 16px max(calc(16px + var(--safe-b)), calc(var(--cookie-b, 0px) + 8px)); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0,0,0,.45), inset 0 0 0 2px var(--line); animation: up .25s cubic-bezier(.2,.9,.3,1.05) both; }
.sheet header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sheet header h3 { flex: 1; margin: 0; font-size: 1.3rem; min-width: 0; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; }
.sheet-body > .btn { align-self: stretch; }
.confirm-sheet .sheet-body { text-align: center; padding-top: 6px; }
.opts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 12px; align-items: center; text-align: left; }
.opts label { font-weight: 600; color: var(--muted); font-size: .95rem; max-width: 34vw; line-height: 1.15; }
.opts.compact { gap: 8px 10px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 14px; background: rgba(0,0,0,.28); }
.seg button { flex: 1; min-width: 0; white-space: normal; line-height: 1.05; min-height: 44px; border-radius: 10px; font-weight: 700; font-size: .95rem; color: var(--muted); padding: 0 6px; }
.seg button.on { background: var(--gold); color: var(--accent-text); box-shadow: 0 2px 0 #9a6a10; }
.seg.ro button.on { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.nick-form { display: flex; gap: 8px; }
.nick-form .nick, .setting input, .opts .nick { flex: 1; min-width: 0; height: 48px; border-radius: 13px; border: 0; padding: 0 14px; font-size: 1.1rem; font-weight: 600; color: var(--text); background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.opt-leader { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.opt-leader > label { font-weight: 600; color: var(--muted); font-size: .95rem; }
.leaders { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ldr { position: relative; aspect-ratio: 1; min-height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.ldr i { position: absolute; inset: 3px; border-radius: 50%; background: center 20% / cover; font-style: normal; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; color: var(--muted); }
.ldr span { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #1a1030; box-shadow: 0 0 0 1.5px #1a1030; }
.ldr span svg { width: 11px; height: 11px; }
.ldr.on { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(255,215,106,.6); }
.ldr[disabled] { opacity: .3; filter: grayscale(1); }
.ldr-info { min-height: 3.4em; text-align: left; }
.settings { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.setting { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-weight: 600; }
.setting > span { min-width: 0; }
.tog { display: inline-flex; align-items: center; gap: 8px; min-width: 92px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 99px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; color: var(--muted); }
.tog i { width: 30px; height: 30px; border-radius: 50%; background: #5a5080; transition: transform .2s, background .2s; }
.tog.on { color: #06301a; background: var(--mint); }
.tog.on i { background: #fff; transform: translateX(2px); }
.setting select { min-height: 44px; border-radius: 12px; border: 0; padding: 0 10px; font-size: 1rem; font-weight: 600; color: var(--text); background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); max-width: 55%; }
.row.links .btn { flex: 1 1 auto; }
/* sala */
.code-big { display: flex; justify-content: center; gap: 6px; }
.code-big b { display: grid; place-items: center; width: 44px; height: 54px; border-radius: 12px; font-size: 1.8rem; font-family: var(--display); color: var(--gold); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px var(--line); }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.seat { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 8px 4px 6px; border-radius: 14px; background: rgba(0,0,0,.22); }
.seat.me { box-shadow: inset 0 0 0 2px var(--gold); }
.seat .lav { width: 44px; height: 44px; }
.seat .lav.pick { cursor: pointer; animation: pulse 1.6s infinite; }
.seat.empty .lav { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.seat .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; line-height: 1.1; overflow: hidden; }
.seat .lname { font-size: .78rem; font-weight: 600; }
.seat em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.12); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.seat em.you { background: var(--gold); color: #3a2600; }
.seat em svg { width: 12px; height: 12px; }
.addbot-level { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); font-size: .9rem; text-align: left; }
.addbot-level .seg { flex: 1; }
.countdown { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--gold); }
/* pausa, final */
.menu-p .col .btn { justify-content: flex-start; }
.final { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.final li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 10px 4px 6px; border-radius: 14px; background: rgba(0,0,0,.25); }
.final li.win { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255,215,106,.12); }
.final li.me .nm { color: var(--gold); }
.final .pos { width: 30px; font-weight: 700; color: var(--muted); }
.final .nm { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final .brk { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.final .brk > span { display: inline-flex; align-items: center; gap: 2px; }
.final .brk svg { width: 16px; height: 16px; }
.final .pips .pip { width: 11px; height: 11px; }
.end-p .why { color: #fff; font-weight: 600; }
.end-p.win h2 { animation: bump .6s cubic-bezier(.2,1.6,.4,1); }
/* cómo se juega */
.howto-body { text-align: left; font-size: .98rem; line-height: 1.45; }
.howto-body .t1 { font-family: var(--display); font-weight: 900; color: var(--gold); font-size: 1.45rem; line-height: 1.15; margin: 0 0 .5em; }
.howto-body h2 { font-size: 1.12rem; color: var(--gold); margin: 1em 0 .3em; }
.howto-body ul { padding-left: 1.2em; margin: .3em 0; }
.howto-body p { margin: .4em 0; }
/* grupo de un jugador y descarte */
.group-sheet .sheet-body { gap: 8px; }
.grp h4 { margin: 8px 0 4px; color: var(--gold); font-size: 1rem; }
.gtop { display: flex; gap: 12px; align-items: center; }
.gtop .cd { --w: 92px; }
.gstats p { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
.gstats svg { width: 18px; height: 18px; }
.gstats .prot { color: #ffe9a0; }
.gcards { display: flex; flex-wrap: wrap; gap: 8px; }
.gcards .cd { --w: 88px; cursor: pointer; }
.gcards.disc { max-height: 60vh; overflow-y: auto; }
/* chat */
.chat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.emoji-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.emoji-row .em { min-height: 48px; font-size: 1.6rem; border-radius: 12px; background: rgba(255,255,255,.08); }
/* anuncio simulado (dev) */
.dev-ad { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.85); }
.dev-ad-box { width: min(320px, 86vw); padding: 18px; border-radius: 20px; background: #fff; color: #222; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.dev-ad-art { height: 140px; border-radius: 12px; display: grid; place-items: center; font-size: 3rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #6a5fd0, #ff7ab8); }
.dev-ad-close { color: #222 !important; }
/* cargador y texto rastreable */
#loader { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); transition: opacity .4s; }
#loader.out { opacity: 0; pointer-events: none; }
.loader-gem { width: 46px; height: 46px; transform: rotate(45deg); border-radius: 10px; background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, #b77812); animation: spin 1.4s ease-in-out infinite; }
.howto-src { display: none; }
.noscript { padding: 20px; text-align: center; }

/* ---------- horizontal (móvil tumbado y ordenador) ---------- */
body.land #hud { display: grid; gap: 6px 8px; grid-template-columns: var(--lw) minmax(0, 1fr) var(--rw); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "tb board st" "tb mine st" "tb hand ac" "tk hand ac"; }
body.land .tb { grid-area: tb; flex-direction: column; align-items: stretch; min-height: 0; }
body.land .tb > .b-menu { align-self: flex-start; }
body.land .opps { flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: 6px; scrollbar-width: none; }
body.land .opp { flex: none; }
body.land .tb-r { position: absolute; top: calc(4px + var(--safe-t)); right: calc(6px + var(--safe-r)); z-index: 6; }
body.land .board { grid-area: board; }
body.land .mine { grid-area: mine; }
body.land .hand { grid-area: hand; align-self: end; }
body.land .status { grid-area: st; align-self: start; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 6px; margin-top: 54px; }
body.land .status .piles { justify-content: center; order: 3; }
body.land .status .mid { order: 1; }
body.land .status .tray { order: 2; align-self: stretch; }
body.land .acts { align-self: end; }
body.land .acts { grid-area: ac; flex-direction: column; }
body.land .ticker { grid-area: tk; white-space: normal; text-align: left; font-size: .72rem; max-height: 3.6em; overflow: hidden; }
body.land .panel { left: calc(var(--lw) + 14px + var(--safe-l)); right: calc(var(--rw) + 14px + var(--safe-r)); max-height: 78%; }
body.land .act { min-height: 44px; justify-content: flex-start; }
body.land .zcards .item-z { --w: calc(var(--zw) * .8); }
body.land .zoom-box { flex-direction: row; align-items: center; }
body.land .zoom-box .zinfo, body.land .zoom-box .zbtns { width: min(320px, 36vw); }
body.land #toasts { top: calc(10px + var(--safe-t)); }
body.land .away-bar { bottom: calc(10px + var(--safe-b)); }
body.short .status { margin-top: 50px; gap: 4px; padding: 4px; }
body.short .hint { font-size: .78rem; min-height: 0; }
body.short .tray { min-height: 56px; --ds: 24px; }
body.short .tray.duel { --ds: 19px; }
body.short .opp { min-height: 44px; padding: 2px 4px 2px 2px; }
body.short .opp .av { width: 36px; height: 36px; } body.short .opp .av img, body.short .opp .av .ini { width: 31px; height: 31px; }
body.short .oi .nm { font-size: .74rem; }
body.short .os i { font-size: .7rem; }
body.short .me-head { padding: 1px 6px 1px 1px; gap: 6px; }
body.short .me-head .av { width: 30px; height: 30px; } body.short .me-head .av img, body.short .me-head .av .ini { width: 26px; height: 26px; }
body.short .me-head .slain { margin: -9px 0; }
body.short .pips.big .pip { width: 16px; height: 16px; } body.short .pips.big .pip svg { width: 10px; height: 10px; }
body.short .party { padding: 2px 2px 4px; min-height: calc(var(--pw) * 1.4 + 6px); }
body.short .panel { padding: 8px 10px; gap: 6px; }
body.short .pn-head .stg .cd { --w: 54px; }
body.short .btn.big { min-height: 48px; font-size: 1.05rem; }
body.short .btn.mod { min-height: 48px; }
body.short .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
body.short .acts .b-end { grid-column: 1 / -1; }
body.short .act { min-height: 44px; padding: 2px 6px; font-size: .8rem; gap: 4px; }
body.short .act svg { width: 18px; height: 18px; }
body.short .status { margin-top: 50px; }
body.short .pile { min-height: 44px; }
body.short .pile .cd { --w: 28px; }
/* ordenador: los rivales con su grupo a la vista y el registro en la columna izquierda */
body.desk #hud { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "tb board st" "tb mine st" "tb hand ac"; }
body.desk .ticker { display: none; }
body.desk .opps { flex: none; max-height: 62%; }
body.desk .logbox { display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; padding: 8px 10px; border-radius: 16px; background: var(--hud-glass); box-shadow: inset 0 0 0 1.5px var(--hud-line); }
body.desk .logbox ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; scrollbar-width: none; font-size: .84rem; line-height: 1.3; color: var(--text); }
body.desk .logbox ol::-webkit-scrollbar { display: none; }
body.desk .logbox li { padding: 2px 0; }
body.desk .logbox li.turn { color: var(--gold); font-weight: 700; padding-top: 6px; }
body.desk .logbox li.dim { color: var(--muted); }
body.desk .logbox li.good { color: #c4ffd0; } body.desk .logbox li.bad { color: #ffc4c4; }
body.desk .acts { align-self: end; }
body.desk .opp { flex-wrap: wrap; padding: 6px 8px 6px 6px; }
body.desk .opp .av { width: 52px; height: 52px; } body.desk .opp .av img, body.desk .opp .av .ini { width: 46px; height: 46px; }
body.desk .oi .nm { font-size: .95rem; }
body.desk .opp .pips .pip { width: 12px; height: 12px; }
body.desk .opp .strip { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
body.desk .opp .strip .th { width: 30px; height: 30px; border-radius: 8px; background: #222 center 25% / cover; box-shadow: 0 0 0 2px var(--cc); }
body.desk .opp .strip .th.it { box-shadow: 0 0 0 2px var(--cc), 3px 3px 0 0 var(--gold); }
body.desk .mdeck { display: inline-flex; }
body.desk .tray { min-height: 100px; --ds: 44px; }
@media (min-height: 950px) { body.desk .tray { min-height: 128px; --ds: 58px; } body.desk .tray.duel { --ds: 44px; } body.desk .hint { font-size: 1.1rem; } body.desk .gem { width: 24px; height: 24px; } }
body.desk .tray.duel { --ds: 32px; }
body.desk .pair .who { font-size: .85rem; max-width: 120px; } body.desk .pair .tot b { font-size: 1.6rem; } body.desk .pair .tot small { font-size: .8rem; }
body.desk .hint { font-size: .98rem; }
body.desk .act { min-height: 56px; font-size: 1.02rem; }
body.desk .ticker { font-size: .82rem; }
body.desk .pile .cd { --w: 46px; } body.desk .pile .dtop .empty { width: 46px; height: 64px; }
body.desk .me-head .nm { max-width: 260px; }
body.desk .panel { max-width: 760px; margin: 0 auto; }
/* opciones contra bots en horizontal: dos columnas */
body.land .sheet.opts-sheet { width: min(860px, calc(100% - 8px - var(--safe-l) - var(--safe-r))); }
body.land .opts-sheet .sheet-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
body.land .opts-sheet .sheet-body > .btn { grid-column: 1 / -1; }
body.land .settings-p .card, body.land .lobby .card { width: min(720px, 100%); }
body.land .settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
body.land .settings > .sub, body.land .settings > .row { grid-column: 1 / -1; }
body.land .lobby .seats { display: grid; grid-template-columns: 1fr 1fr; }
body.land.short .lobby .card { gap: 8px; padding: 12px 14px; }
/* sala de espera en horizontal bajo: código e invitación a la izquierda; jugadores y botones a la derecha */
body.land.short .lobby .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-auto-flow: row dense; column-gap: 16px; align-content: start; }
body.land.short .lobby .card > * { grid-column: 1; }
body.land.short .lobby .card > .seats, body.land.short .lobby .card > .addbot-level, body.land.short .lobby .card > .b-start, body.land.short .lobby .card > .waiting, body.land.short .lobby .card > .b-leave, body.land.short .lobby .card > .seats + .sub { grid-column: 2; }
body.land.short .lobby .seat { min-height: 46px; }
body.land.short .lobby .seat .lav { width: 36px; height: 36px; }
body.land.short .lobby .btn.big { min-height: 48px; font-size: 1.05rem; }
body.land.short .code-big b { height: 44px; }
/* portada en horizontal: el logo y las cartas a la izquierda, el menú a la derecha */
body.land .title-screen { flex-direction: row; align-items: center; justify-content: center; gap: 4vw; }
body.land .title-screen .logo { order: 1; margin: 0; max-width: 46vw; }
body.land .title-screen { padding-top: calc(56px + var(--safe-t)); }
body.land .title-screen .title-fan { order: 2; position: absolute; left: 0; bottom: 0; width: 50vw; height: 46vh; }
body.land .title-screen .title-fan .cd { --w: clamp(56px, 15vh, 130px); }
body.land .title-screen .title-bottom { order: 3; }
body.land .title-screen .logo .lg { font-size: clamp(1.9rem, 4.6vw, 4.4rem); white-space: nowrap; }
body.land.at-title .sheet-wrap { justify-content: flex-end; align-items: center; padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) 0; }
body.land.at-title .sheet { width: min(520px, 52vw); max-height: 100%; border-radius: 24px; }
body.land.at-title .sheet.opts-sheet { width: min(520px, 52vw); }
body.land.at-title .opts-sheet .sheet-body { display: flex; }
body.land.short .title-screen .logo .lg { font-size: clamp(1.8rem, 4.4vw, 3.4rem); }
body.land.short .title-bottom { gap: 8px; }
/* final de partida en horizontal: clasificación a la izquierda y botones a la derecha (cabe en 340 px de alto) */
body.land .end-p .card { width: min(780px, 100%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: center; }
body.land .end-p .card > h2, body.land .end-p .card > .why, body.land .end-p .card > .final { grid-column: 1; }
body.land .end-p .card > .sub.small { grid-column: 2; grid-row: 1; }
body.land .end-p .card > .col { grid-column: 2; grid-row: 2 / span 2; }
body.land.short .end-p .card { padding: 12px 14px; }
body.land.short .end-p .final li { min-height: 44px; }
/* horizontal bajo: las opciones de partida en una hoja centrada a cuatro columnas (caben sin desplazarse) */
body.land.short.at-title .sheet-wrap { justify-content: center; padding-left: calc(8px + var(--safe-l)); }
body.land.short.at-title .sheet.opts-sheet { width: min(760px, 100%); }
body.land.short .opts-sheet .opts { grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); gap: 8px 10px; }
body.land.short .opts-sheet .sheet-body { gap: 8px; }
body.land.short .opts-sheet header { margin-bottom: 4px; }
body.land.short .sheet { padding-top: 10px; }
body.land.short .title-bottom .btn.big { min-height: 50px; font-size: 1.1rem; }
body.land.short .title-screen .title-fan { display: none; }
@media (max-height: 700px) and (orientation: portrait) {
  .title-screen .logo .lg { font-size: clamp(2.3rem, 11vw, 4rem); }
  .title-bottom { gap: 9px; }
  .title-bottom .btn.big { min-height: 52px; font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* fichas.py: ficha del juego bajo la pantalla de juego (visible al desplazarse; al jugar la página vuelve arriba y no se mueve) */
html, body { height: auto !important; min-height: 100%; overflow-x: hidden !important; overflow-y: auto !important; }
html:has(body.playing), body.playing { overflow: hidden !important; }
body:not(.playing) { touch-action: pan-y; }
body:not(.playing) #wrap, body:not(.playing) #app, body:not(.playing) #app canvas, body:not(.playing) #app .screen { touch-action: pan-y !important; }   /* fuera de la partida se puede bajar a la ficha deslizando sobre el juego */
#wrap, #app { position: relative !important; inset: auto !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; }
.game-info { max-width: 860px; margin: 0 auto; padding: 26px 18px 40px; font-family: Fredoka, ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #f4f0ff; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.game-info .crumbs { font-size: .92rem; color: #b9b0d8; margin-bottom: 10px; } .game-info .crumbs a { color: #b9b0d8; } .game-info .crumbs span { margin: 0 6px; opacity: .6; }
.game-info .howto-src { display: block; } .game-info .howto { background: none; color: inherit; padding: 0; border-radius: 0; box-shadow: none; border: 0; }
.game-info h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; color: #fff; }
.game-info h2 { font-size: 1.3rem; margin: 26px 0 8px; color: #ffd23f; }
.game-info p, .game-info li { color: #e8e2fa; } .game-info ul { padding-left: 1.2em; } .game-info a { color: #ffd23f; }
.game-info details { margin: 8px 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(190,160,255,.22); }
.game-info summary { cursor: pointer; font-weight: 600; } .game-info details p { margin: 6px 0 0; }
.game-info .more { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.game-info .more a { display: block; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(190,160,255,.22); text-decoration: none; color: #fff; }
.game-info .more img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; } .game-info .more b { display: block; padding: 8px 10px 0; } .game-info .more span { display: block; padding: 0 10px 10px; font-size: .88rem; color: #c9c0e6; }
.game-info .foot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(190,160,255,.22); font-size: .92rem; } .game-info .foot a { color: #b9b0d8; }
.howto .t1 { font-size: 1.25rem; font-weight: 700; margin: .67em 0; }