/* ==========================================================================
   Modo mesa: binders en 3D sobre una mesa de nogal, con la luz de una lámpara.
   Todo vive bajo .mesa y usa el prefijo mz- para no chocar con binder.css.
   La escena es CSS 3D: .mz-view pone la perspectiva y .mz-cam (preserve-3d) es la cámara.
   ========================================================================== */

/* Letra grabada de los objetos de la mesa (tapete, tapas, lomos) y de los juegos: Cinzel (OFL). El
   marco (barra, fichas, ayuda, sala) va con la letra de la marca, var(--serif). */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

.mesa {
  --engrave: 'Cinzel', Georgia, serif;
  --display: var(--engrave);
  --mz-gold: #e9b949;
  --mz-gold-2: #f8d272;
  --mz-ink: var(--ivory, #eeece7);
  --mz-ease: cubic-bezier(.2, .8, .2, 1);
  /* El cristal de los paneles: tinta casi opaca con desenfoque */
  --mz-panel: rgba(14, 14, 16, .8);
  --mz-line: rgba(255, 255, 255, .1);
  /* El tema del juego de cartas (theme.js los pone desde G.mesa.theme): el paño del tapete, el brillo
     de la lámpara sobre él, el marco y el dibujo, la luz y el fondo de la habitación. Los RGB van sin
     comas para poder darles transparencia: rgb(var(--mz-th-trim) / .2) */
  --mz-th-felt: #141c30;
  --mz-th-sheen: 120 150 210;
  --mz-th-trim: 233 185 73;
  --mz-th-lamp: 255 196 128;
  --mz-th-room: #1b130d;
  /* El metal de las tapas (emblema, letras, regla, placa): oro por defecto; data-metal lo cambia */
  --mz-metal: 233 185 73;
  --mz-metal-1: #fff6d2;
  --mz-metal-2: #f3cd6c;
  --mz-metal-3: #b98a2c;
  --mz-metal-4: #f0cf7a;
  --mz-metal-ink: #e9c36a;
  --mz-metal-pale: #f6e2a8;
  --mz-wood-c: #2b1b11;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: #060508;
  color: var(--mz-ink);
  font-family: var(--font, 'Instrument Sans', 'Segoe UI', system-ui, sans-serif);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: opacity .42s ease, transform .42s var(--mz-ease);
}
.mesa[hidden] { display: none; }
.mesa[data-metal="silver"] {
  --mz-metal: 214 220 232;
  --mz-metal-1: #ffffff;
  --mz-metal-2: #dfe3ea;
  --mz-metal-3: #8a93a3;
  --mz-metal-4: #e8ecf2;
  --mz-metal-ink: #d3d8e1;
  --mz-metal-pale: #eef1f6;
}
.mesa[data-metal="copper"] {
  --mz-metal: 226 146 92;
  --mz-metal-1: #ffeadb;
  --mz-metal-2: #eda773;
  --mz-metal-3: #9c5a2e;
  --mz-metal-4: #f2bd92;
  --mz-metal-ink: #e9a675;
  --mz-metal-pale: #f8d8bf;
}
/* El color de la madera mientras se dibuja su textura (textures.js, WOODS) */
.mesa[data-wood="oak"] { --mz-wood-c: #4a3220; }
.mesa[data-wood="cherry"] { --mz-wood-c: #3a1a12; }
.mesa[data-wood="ebony"] { --mz-wood-c: #17151b; }
.mesa[data-wood="ash"] { --mz-wood-c: #4b4235; }
.mesa.leaving { opacity: 0; transform: scale(1.03); }
body.mesa-page { overflow: hidden; background: #060508; }
body.mesa-page::before { display: none; }

/* ---------- La habitación (fondo) ---------- */
.mz-room {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 30% 18%, rgb(var(--mz-th-lamp) / .14) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 0%, var(--mz-th-room) 0%, #0b0807 55%, #040306 100%);
}
.mz-bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .5;
}
.mz-bokeh.a { width: 180px; height: 180px; left: 72%; top: 4%; background: radial-gradient(circle, rgb(var(--mz-th-lamp) / .32), transparent 70%); }
.mz-bokeh.b { width: 120px; height: 120px; left: 86%; top: 12%; background: radial-gradient(circle, rgb(var(--mz-th-sheen) / .2), transparent 70%); }
.mz-bokeh.c { width: 260px; height: 160px; left: 6%; top: 0; background: radial-gradient(circle, rgb(var(--mz-th-lamp) / .22), transparent 70%); }
.mz-lampglow {
  position: absolute;
  left: 8%;
  top: -18%;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, rgb(var(--mz-th-lamp) / .22), transparent);
  opacity: 0;
  transition: opacity 2.2s ease .2s;
}
.mesa.lit .mz-lampglow { opacity: 1; }

/* ---------- Escena 3D ---------- */
.mz-view { position: absolute; inset: 0; perspective: 1100px; overflow: hidden; cursor: default; }
.mesa.can-grab .mz-view { cursor: grab; }
.mesa.grabbing .mz-view, .mesa.grabbing .mz-view *, .mesa.orbiting .mz-view, .mesa.orbiting .mz-view * { cursor: grabbing !important; }
.mz-cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform-origin: 0 0; }
.mz-body, .mz-lean, .mz-flip, .mz-g {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform-origin: 0 0;
}
.mz-body { outline: none; }
.mz-g[hidden] { display: none; }
.mz-f {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mz-sh {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- Mesa ---------- */
.mz-table {
  background:
    radial-gradient(34% 46% at 37% 44%, rgb(var(--mz-th-lamp) / .3), rgb(var(--mz-th-lamp) / .1) 50%, transparent 78%),
    radial-gradient(62% 74% at 44% 47%, transparent 30%, rgba(0, 0, 0, .66) 100%),
    var(--mz-wood, none) center / 100% 100% no-repeat,
    var(--mz-wood-c);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 170, .05);
}
.mz-tedge {
  background:
    linear-gradient(180deg, rgba(255, 214, 160, .2) 0, rgba(255, 214, 160, .05) 6%, transparent 18%, rgba(0, 0, 0, .55) 100%),
    var(--mz-wood, none) center / 260% 900% no-repeat,
    color-mix(in srgb, var(--mz-wood-c), #000 15%);
}
.mz-tedge.side { filter: brightness(.55); }

/* Tapete: el paño, la textura, el marco y el dibujo son del tema del juego de cartas (theme.js:
   --mz-th-* y data-texture, data-frame en .mesa). También lo usan los tapetes propios de los juegos. */
.mz-mat {
  border-radius: 9px;
  background:
    radial-gradient(70% 90% at 25% 15%, rgb(var(--mz-th-sheen) / .16), transparent 60%),
    radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45)),
    var(--mz-felt, none) 0 0 / 220px 220px,
    var(--mz-th-felt);
  background-blend-mode: normal, normal, soft-light, normal;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 50px rgba(0, 0, 0, .4);
  container-type: size;
}
/* Paño tejido: la trama, fina, sobre el fieltro */
.mesa[data-texture="cloth"] .mz-mat {
  background:
    radial-gradient(70% 90% at 25% 15%, rgb(var(--mz-th-sheen) / .16), transparent 60%),
    radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
    var(--mz-felt, none) 0 0 / 220px 220px,
    var(--mz-th-felt);
  background-blend-mode: normal, normal, normal, normal, soft-light, normal;
}
/* Neopreno (como las alfombrillas de juego): liso, con el grano grande y apenas marcado */
.mesa[data-texture="neoprene"] .mz-mat {
  background:
    radial-gradient(70% 90% at 25% 15%, rgb(var(--mz-th-sheen) / .2), transparent 60%),
    radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .4)),
    var(--mz-felt, none) 0 0 / 560px 560px,
    var(--mz-th-felt);
  background-blend-mode: normal, normal, overlay, normal;
  border-radius: 14px;
}
.mz-mat-frame {
  position: absolute;
  inset: 3.2cqh;
  border: 1.5px solid rgb(var(--mz-th-trim) / .2);
  border-radius: 6px;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0), inset 0 0 0 6.5px rgb(var(--mz-th-trim) / .08);
}
.mesa[data-frame="single"] .mz-mat-frame { border-width: 1.2px; border-color: rgb(var(--mz-th-trim) / .26); border-radius: 2.6cqh; box-shadow: none; }
/* Solo las esquinas: dos trazos en cada una */
.mesa[data-frame="corners"] .mz-mat-frame {
  --L: 9cqh;
  --w: 1.6px;
  --k: rgb(var(--mz-th-trim) / .34);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    linear-gradient(var(--k) 0 0) 0 0 / var(--L) var(--w) no-repeat,
    linear-gradient(var(--k) 0 0) 0 0 / var(--w) var(--L) no-repeat,
    linear-gradient(var(--k) 0 0) 100% 0 / var(--L) var(--w) no-repeat,
    linear-gradient(var(--k) 0 0) 100% 0 / var(--w) var(--L) no-repeat,
    linear-gradient(var(--k) 0 0) 0 100% / var(--L) var(--w) no-repeat,
    linear-gradient(var(--k) 0 0) 0 100% / var(--w) var(--L) no-repeat,
    linear-gradient(var(--k) 0 0) 100% 100% / var(--L) var(--w) no-repeat,
    linear-gradient(var(--k) 0 0) 100% 100% / var(--w) var(--L) no-repeat;
}
/* El dibujo del tapete (G.mesa.theme.art): muy suave, para que se reconozca el juego sin estorbar */
.mz-mat-art { position: absolute; inset: 0; color: rgb(var(--mz-th-trim) / .12); pointer-events: none; }
.mz-mat-art svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.mz-mat-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 1.2cqh;
  font-family: var(--engrave);
  color: rgb(var(--mz-th-trim) / .16);
  letter-spacing: .5em;
  text-align: center;
}
.mz-mat-mark span { font-size: 3.6cqh; font-weight: 600; margin-right: -.5em; }
.mz-mat-mark b { font-size: 7.5cqh; font-weight: 700; margin-right: -.5em; }
.mz-mat-edge { background: linear-gradient(180deg, color-mix(in srgb, var(--mz-th-felt), #fff 12%), color-mix(in srgb, var(--mz-th-felt), #000 60%)); }

/* ---------- Sombras ---------- */
.mz-shadow {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, .62);
  box-shadow: 0 0 30px 18px rgba(0, 0, 0, .55);
}
.mz-shadow.card { border-radius: 10px; background: rgba(0, 0, 0, .55); box-shadow: 0 0 12px 6px rgba(0, 0, 0, .45); }

/* ---------- Binder ---------- */
.mz-binder { --c: #1d2a44; }
.mz-leather-face { background: var(--c); border-radius: 5px; overflow: hidden; container-type: size; }
.mz-leather {
  position: absolute;
  inset: 0;
  background-color: var(--c);
  background-image:
    radial-gradient(130% 95% at 14% 0%, rgba(255, 255, 255, .17), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .3)),
    var(--mz-grain, none);
  background-size: auto, auto, 150px 150px;
  background-blend-mode: normal, normal, soft-light;
}
.mz-stitch {
  position: absolute;
  inset: 3.6cqw;
  border: 1.6px dashed rgba(255, 255, 255, .24);
  border-radius: 2.6cqw;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 1px 0 rgba(0, 0, 0, .25);
}
.mz-emblem {
  position: absolute;
  left: 50%;
  top: 19%;
  width: 26cqw;
  transform: translateX(-50%);
  color: rgb(var(--mz-metal) / .55);
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .5)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .12));
}
.mz-emblem svg, .mz-backmark svg { display: block; width: 100%; height: auto; }
.mz-title {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 2.6cqw;
  text-align: center;
}
.mz-title b {
  font-family: var(--engrave);
  font-weight: 700;
  font-size: clamp(9px, 7.6cqw, 60px);
  line-height: 1.12;
  letter-spacing: .07em;
  background: linear-gradient(180deg, var(--mz-metal-1) 0%, var(--mz-metal-2) 42%, var(--mz-metal-3) 70%, var(--mz-metal-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .65)) drop-shadow(0 0 10px rgb(var(--mz-metal) / .18));
  overflow-wrap: anywhere;
}
.mz-rule {
  width: 46%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgb(var(--mz-metal) / .75), transparent);
  position: relative;
}
.mz-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.8cqw;
  height: 1.8cqw;
  background: rgb(var(--mz-metal));
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 6px rgb(var(--mz-metal) / .6);
}
.mz-title span { font-size: clamp(8px, 3.7cqw, 22px); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.mz-gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 26%, transparent 40%, transparent 72%, rgba(255, 255, 255, .05) 100%);
  pointer-events: none;
}
.mz-sel {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow .25s var(--mz-ease);
}
.mz-binder.is-hover .mz-sel { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); }
.mz-binder.is-sel .mz-sel, .mz-binder:focus-visible .mz-sel {
  box-shadow: inset 0 0 0 3px rgba(248, 210, 114, .95), inset 0 0 0 7px rgba(248, 210, 114, .18), inset 0 0 60px rgba(248, 210, 114, .18);
}

/* Contraportada */
.mz-backmark {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2cqw;
  width: 60%;
  color: rgba(0, 0, 0, .28);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .1));
}
.mz-backmark svg { width: 13cqw; }
.mz-backmark span { font-family: var(--engrave); font-weight: 700; font-size: clamp(7px, 3.2cqw, 18px); letter-spacing: .3em; white-space: nowrap; }

/* Cantos */
.mz-edge {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), color-mix(in srgb, var(--c) 70%, #000));
}
.mz-edge::after, .mz-pages-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--sh, .35);
  pointer-events: none;
}
.mz-pages-edge {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 6%, transparent 94%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(180deg, rgba(190, 198, 214, .34) 0 1px, rgba(255, 255, 255, .05) 1px 2px, #15171d 2px var(--sheet, 4px)),
    #121419;
}

/* Lomo */
.mz-spine-out { border-radius: 3px; }
.mz-spine-out .mz-leather {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .1) 42%, rgba(255, 255, 255, .02) 58%, rgba(0, 0, 0, .45)),
    var(--mz-grain, none);
  background-size: auto, 150px 150px;
  background-blend-mode: normal, soft-light;
}
.mz-spine-name {
  position: absolute;
  inset: 0 12%;
  display: grid;
  place-items: center;
  font-family: var(--engrave);
  font-weight: 700;
  font-size: clamp(7px, 30cqh, 26px);
  letter-spacing: .16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mz-metal-ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.mz-rivet {
  position: absolute;
  top: 50%;
  width: 3.6cqh;
  min-width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #fff, #a9b0bb 45%, #5b616b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.mz-rivet.a { left: 4.5%; }
.mz-rivet.b { right: 4.5%; }

/* Interior: la misma polipiel que fuera (como en el álbum 2D), placa con el nombre y anillas */
.mz-lining {
  background-color: color-mix(in srgb, var(--c) 86%, #000);
  background-image:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .1), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .28)),
    var(--mz-grain, none);
  background-size: auto, auto, 150px 150px;
  background-blend-mode: normal, normal, soft-light;
  border-radius: 4px;
  container-type: size;
}
.mz-spine-in.mz-lining { background-color: color-mix(in srgb, var(--c) 62%, #000); }
.mz-cover-in::before, .mz-back-in::before { /* costura interior */
  content: "";
  position: absolute;
  inset: 2.2cqw;
  border: 1.4px dashed rgba(255, 255, 255, .16);
  border-radius: 1.6cqw;
}
.mz-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 2.6cqw;
  width: 66%;
  padding: 6cqw 7cqw;
  border-radius: 2.4cqw;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 10px 30px rgba(0, 0, 0, .3);
}
.mz-plate b {
  font-family: var(--engrave);
  font-weight: 700;
  font-size: clamp(9px, 6.4cqw, 40px);
  letter-spacing: .06em;
  line-height: 1.15;
  color: var(--mz-metal-pale);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 18px rgb(var(--mz-metal) / .25);
  overflow-wrap: anywhere;
}
.mz-plate em { font-style: normal; font-size: clamp(8px, 3.6cqw, 18px); color: rgba(255, 255, 255, .7); font-weight: 600; }
.mz-meter { display: block; height: max(4px, 1.6cqw); border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.mz-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mz-metal-3), var(--mz-metal-2)); }
.mz-endnote {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--engrave);
  font-size: clamp(9px, 4cqw, 22px);
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .22);
}
.mz-mech { /* placa del mecanismo de anillas */
  position: absolute;
  left: 5%;
  right: 5%;
  top: 31%;
  bottom: 31%;
  border-radius: 6px;
  background: linear-gradient(180deg, #4e545e 0, #c4cad3 14%, #9aa1ac 46%, #8a919c 80%, #3d424a 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mz-mech::before, .mz-mech::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #8d949f 60%, #3f444c);
}
.mz-mech::before { left: 1.5%; }
.mz-mech::after { right: 1.5%; }
.mz-ring-top {
  pointer-events: none;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(120, 128, 140, 0) 0%, #8c939e 6%, #e9edf3 30%, #ffffff 50%, #d9dee6 70%, #858c97 94%, rgba(120, 128, 140, 0) 100%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 0 3px 4px rgba(0, 0, 0, .35);
}
.mz-ring {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  pointer-events: none;
  background: radial-gradient(circle at 50% 100%, transparent calc(var(--r) - 7.5px), #4f5560 calc(var(--r) - 7px), #f4f7fb calc(var(--r) - 3.6px), #7b828d calc(var(--r) - .8px), transparent var(--r));
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
}

/* ---------- Hojas ---------- */
.mz-page-top, .mz-leaf-front, .mz-leaf-back {
  background: linear-gradient(180deg, #1b1d24, #101116);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  border-radius: 3px;
  overflow: hidden;
}
.mz-page-c, .mz-page { position: absolute; inset: 0; }
.mz-page::before { /* sombra del pliegue junto a las anillas */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
  z-index: 2;
}
.mz-page.mirror::before { left: auto; right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .55), transparent); }
.mz-cast {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .08));
}
.mz-stack-l .mz-cast { background: linear-gradient(270deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .08)); }
.mz-hole {
  position: absolute;
  left: 7px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #050608 50%, #2c3038 62%, transparent 70%);
}
.mz-hole.r { left: auto; right: 7px; }
.mz-pocket {
  position: absolute;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.mz-pocket::after { /* plástico de la funda */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 20%, transparent 36%, transparent 74%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mz-pcard {
  position: absolute;
  inset: 3.2%;
  border-radius: 6px;
  overflow: hidden;
  background: #0c0e12;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
  transition: transform .28s var(--mz-ease), box-shadow .2s;
}
.mz-pcard img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.mz-pcard em, .mz-cfall {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10%;
  text-align: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, .45);
}
.mz-pocket.missing.mstyle-gray img { filter: grayscale(1) brightness(.48) contrast(.95); }
.mz-pocket.missing.mstyle-faded img { opacity: .28; }
.mz-pocket.owned { cursor: grab; }
.mesa[data-mode="reading"] .mz-pocket.owned:hover .mz-pcard { transform: translateY(-5px); box-shadow: 0 8px 14px rgba(0, 0, 0, .55); }
.mz-pocket.pulling .mz-pcard { transition: none; box-shadow: 0 12px 20px rgba(0, 0, 0, .6); }
.mz-pocket.lifting .mz-pcard { transform: translateY(-8px) scale(1.02); }
.mz-pocket.out { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.mz-pocket.out span {
  position: absolute;
  inset: 8%;
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(233, 185, 73, .38);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  color: rgba(233, 185, 73, .7);
}
.mz-pfoot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, .38);
  font-variant-numeric: tabular-nums;
}
.mz-page.mirror .mz-pfoot { flex-direction: row-reverse; }
.mz-pcount.ok { color: #3ccb8d; }
.mz-page.blank { background: transparent; }

/* ---------- Carta suelta ----------
   Sus caras miden 2,5 veces su tamaño y se reducen en 3D (ver card3d.js): todo va en unidades cq. */
/* Las esquinas van en px desde card3d.js (radio real de 3,2 mm): en cq se medirían contra la mesa */
.mz-card-front, .mz-card-back { overflow: hidden; background: #0c0e12; container-type: size; }
.mz-card-front { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mz-card-front img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.mz-cfall { font-size: 7cqw !important; }
.mz-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(farthest-corner circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .08) 30%, transparent 60%),
    linear-gradient(125deg, rgba(255, 255, 255, .16), transparent 35%);
  mix-blend-mode: overlay;
  opacity: .45;
  transition: opacity .3s;
}
.mz-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 0, 132, .5) 0%, rgba(252, 164, 0, .45) 8%, rgba(255, 255, 0, .4) 16%, rgba(0, 255, 138, .4) 24%, rgba(0, 207, 255, .45) 32%, rgba(204, 76, 250, .5) 40%, rgba(255, 0, 132, .5) 48%);
  background-size: 300% 300%;
  background-position: var(--gx, 50%) var(--gy, 50%);
  mix-blend-mode: color-dodge;
  filter: brightness(.65) contrast(1.4) saturate(1.2);
  transition: opacity .3s;
}
.mz-cardbody.holo .mz-foil { opacity: .12; }
.mz-cardbody.inspecting .mz-glare { opacity: .6; }
.mz-cardbody.holo.inspecting .mz-foil { opacity: .17; }
.mz-cardbody .mz-sel { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow .2s; }
.mz-cardbody.is-hover .mz-sel { box-shadow: inset 0 0 0 1.2cqw rgba(248, 210, 114, .75); }
.mz-cback { position: absolute; inset: 0; background: #24215b; }
.mz-cback img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El volteo (.mz-flip) y la inclinación los pinta la física en cada fotograma: sin transiciones */
.mz-cardbody .mz-flip { transition: none; }
/* Carta que se va de la mesa (cards.remove con fade): se desvanece subiendo. La opacidad va en las
   caras, nunca en los grupos preserve-3d (aplanaría el 3D) */
.mz-cardbody.mz-fading .mz-f { opacity: 0; transition: opacity .38s ease; }
.mz-shadow.mz-fading { opacity: 0 !important; transition: opacity .38s ease; }
@media (prefers-reduced-motion: reduce) {
  .mz-cardbody.mz-fading .mz-f, .mz-shadow.mz-fading { transition: none; }
}

/* ---------- Efectos de pantalla ---------- */
.mz-fx { position: absolute; inset: 0; pointer-events: none; }
.mz-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  transition: opacity .5s;
}
.mz-fog { /* el fondo de la mesa se pierde en la penumbra */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 5, 8, .92) 0%, rgba(6, 5, 8, .55) 13%, rgba(6, 5, 8, .12) 30%, transparent 42%);
  transition: opacity .8s ease;
}
.mesa[data-mode="reading"] .mz-fog, .mesa[data-mode="inspect"] .mz-fog { opacity: .35; }
.mz-focus {
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 65% at 36% 50%, rgba(3, 4, 8, .25) 30%, rgba(3, 4, 8, .82) 100%);
  opacity: 0;
  transition: opacity .5s var(--mz-ease);
}
.mesa[data-mode="inspect"] .mz-focus { opacity: 1; }
.mz-fx::after { /* telón: la lámpara se enciende al entrar */
  content: "";
  position: absolute;
  inset: 0;
  background: #050407;
  opacity: 1;
  transition: opacity 1.6s ease .1s;
}
.mesa.lit .mz-fx::after { opacity: 0; }
.mz-dust {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(60% 55% at 28% 22%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 28% 22%, #000 0%, transparent 75%);
  opacity: 0;
  transition: opacity 3s ease 1s;
}
.mesa.lit .mz-dust { opacity: 1; }
.mesa[data-mode="reading"] .mz-dust, .mesa[data-mode="inspect"] .mz-dust { opacity: .35; }
.mz-dust i {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, rgb(var(--mz-th-lamp)), #fff 45%);
  box-shadow: 0 0 6px rgb(var(--mz-th-lamp) / .6);
  animation: mz-dust linear infinite alternate;
}
@keyframes mz-dust {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--dx), var(--dy), 0); }
}

/* ---------- Interfaz ---------- */
.mz-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.mz-hud > * { pointer-events: auto; }
.mz-hint, .mz-toast, .mz-loading { pointer-events: none !important; }
.mz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--mz-line);
  background: var(--mz-panel);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--mz-ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: background .15s, border-color .15s, transform .1s, opacity .2s;
}
.mz-btn:hover { background: rgba(32, 32, 36, .92); border-color: rgba(255, 255, 255, .2); }
.mz-btn:active { transform: translateY(1px); }
.mz-btn:disabled { opacity: .35; cursor: default; transform: none; }
.mz-btn:focus-visible, .mz-mini:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mz-btn.icon { width: 38px; padding: 0; }
/* Con el dedo: 40×40 como poco */
@media (pointer: coarse) { .mz-btn { min-height: 40px; } .mz-btn.icon { width: 40px; } }
/* Idioma de la web (lang-switch.js): bandera y código; en el móvil, solo la bandera */
.mz-lang { gap: 7px; padding: 0 11px; font-size: var(--fs-xs); letter-spacing: .08em; }
.mz-lang .flag { width: 20px; height: 13px; }
/* El selector de juego (game-switch.js): el logo del juego en un botón de la mesa; el panel es el de la
   app (game-switch.css), por encima de la mesa */
.mz-tcg { gap: 6px; padding: 0 9px 0 11px; }
.mz-tcg .gs-logo { display: block; width: auto; height: clamp(14px, calc(76px / var(--ar, 3)), 22px); max-width: 78px; object-fit: contain; }
.mz-tcg .gs-word { display: inline; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1; white-space: nowrap; }
.mz-tcg .gs-caret { display: inline-flex; color: var(--muted); }
.mz-tcg .gs-caret .i { width: 13px; height: 13px; transition: transform .2s var(--mz-ease); }
.mz-tcg[aria-expanded="true"] { border-color: color-mix(in srgb, var(--g, var(--accent)) 60%, transparent); }
.mz-tcg[aria-expanded="true"] .gs-caret .i { transform: rotate(180deg); }
.mz-btn.primary { background: var(--ivory); border-color: transparent; color: var(--ink-950); font-weight: 620; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.mz-btn.primary:hover { background: #fff; }
.mz-btn .i, .mz-mini .i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.mz-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) 18px 14px;
  background: linear-gradient(180deg, rgba(4, 3, 6, .55), transparent);
  pointer-events: none;
}
.mz-top > * { pointer-events: auto; }
.mz-brand { display: grid; line-height: 1.1; pointer-events: none; }
.mz-brand b { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: var(--mz-ink); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.mz-brand span { margin-top: 2px; font-size: var(--fs-2xs); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.mz-top-r { margin-left: auto; display: flex; gap: 8px; }

/* Etiqueta del binder elegido */
.mz-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--r-lg);
  background: rgba(14, 14, 16, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  white-space: nowrap;
  will-change: transform;
  animation: mz-pop .22s var(--mz-ease);
}
.mz-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: rgba(14, 14, 16, .94);
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transform: translateX(-50%) rotate(45deg);
}
.mz-tag[hidden] { display: none; }
.mz-tag-sw { width: 11px; height: 15px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); display: inline-block; }
.mz-tag-t { display: grid; line-height: 1.2; }
.mz-tag-t b { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 500; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.mz-tag-t span { font-size: 11.5px; color: rgba(255, 255, 255, .55); font-weight: 600; font-variant-numeric: tabular-nums; }
.mz-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 0;
  background: var(--ivory);
  color: var(--ink-950);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 620;
  cursor: pointer;
}
.mz-mini.icon { width: 32px; padding: 0; justify-content: center; background: rgba(255, 255, 255, .08); color: var(--mz-ink); }
.mz-mini.icon:hover { background: rgba(255, 255, 255, .16); }
@keyframes mz-pop { from { opacity: 0; } }

/* Barra de lectura */
.mz-read {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: var(--r-xl);
  background: rgba(14, 14, 16, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--mz-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  animation: mz-rise .35s var(--mz-ease);
}
.mz-read[hidden] { display: none; }
.mesa[data-mode="inspect"] .mz-read { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; }
.mz-read .mz-btn { box-shadow: none; }
.mz-pager { display: flex; align-items: center; gap: 6px; }
.mz-pl { display: grid; min-width: 168px; text-align: center; line-height: 1.2; }
.mz-pl b { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.mz-pl span { font-size: 11px; color: rgba(255, 255, 255, .45); font-weight: 600; }
.mz-read-n { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; font-size: 13px; font-weight: 650; color: rgba(255, 255, 255, .75); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes mz-rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Ficha de la carta */
.mz-inspect {
  position: absolute;
  right: max(24px, 4vw);
  top: 50%;
  width: min(330px, 34vw);
  transform: translateY(-50%);
  padding: 20px 20px 18px;
  border-radius: var(--r-xl);
  background: rgba(14, 14, 16, .84);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--mz-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: mz-slide .45s var(--mz-ease);
}
.mz-inspect[hidden] { display: none; }
@keyframes mz-slide { from { opacity: 0; transform: translate(24px, -50%); } }
.mz-ins-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .55); font-weight: 600; }
.mz-ins-h .rar { height: 19px; padding: 0 7px; font-size: 10.5px; }
.mz-inspect h2 { margin: 10px 0 2px; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.12; letter-spacing: -.01em; color: var(--mz-ink); }
.mz-ins-v { margin: 0 0 14px; font-size: 13px; color: rgba(255, 255, 255, .6); font-weight: 550; }
.mz-ins-d { margin: 0 0 16px; display: grid; gap: 1px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--mz-line); }
.mz-ins-d div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: rgba(255, 255, 255, .03); font-size: 13px; }
.mz-ins-d dt { color: rgba(255, 255, 255, .5); }
.mz-ins-d dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.mz-ins-d .ok { color: var(--ok); }
.mz-ins-d .bad { color: var(--bad-2); }
.mz-ins-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mz-ins-b .primary { grid-column: 1 / -1; }
.mz-ins-b .mz-btn { box-shadow: none; }

/* Pista, avisos, ayuda y carga */
.mz-hint {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  max-width: calc(100% - 32px);
  transform: translate(-50%, 10px);
  padding: 9px 16px;
  border-radius: var(--r-lg);
  background: rgba(14, 14, 16, .66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .72);
  text-align: center;
  opacity: 0;
  transition: opacity .4s, transform .4s var(--mz-ease);
}
.mz-hint b { color: var(--text); font-weight: 600; }
.mz-hint.show { opacity: 1; transform: translate(-50%, 0); }
.mesa[data-mode="reading"] .mz-hint { bottom: 88px; }
.mz-toast {
  position: absolute;
  left: 50%;
  top: 76px;
  transform: translate(-50%, -8px);
  padding: 9px 16px;
  border-radius: var(--r-lg);
  background: var(--overlay);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  font-size: 13.5px;
  font-weight: 550;
  opacity: 0;
  transition: opacity .25s, transform .25s var(--mz-ease);
}
.mz-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mz-help {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 4, 8, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: mz-pop .2s ease;
}
.mz-help[hidden] { display: none; }
.mz-help-c {
  width: min(560px, 100%);
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 22px 24px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.mz-help-c h3 { margin: 0 0 14px; font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--mz-ink); letter-spacing: -.01em; }
.mz-help-c ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.mz-help-c li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; font-size: 13.5px; line-height: 1.45; }
.mz-help-c li b { color: #fff; }
.mz-help-c li span { color: rgba(255, 255, 255, .68); }
.mz-help-c .mz-btn { width: 100%; }
.mz-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .6);
  transition: opacity .5s;
}
.mz-hud.ready .mz-loading { opacity: 0; }
.mz-spin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); animation: mz-spin .8s linear infinite; }
@keyframes mz-spin { to { transform: rotate(360deg); } }
.mz-hud:not(.ready) .mz-top-r, .mz-hud:not(.ready) .mz-hint { visibility: hidden; }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .mz-btn span { display: none; }
  .mz-btn { width: 40px; padding: 0; height: 40px; }
  .mz-read .mz-btn[data-act="close"] { width: 40px; }
  .mz-brand span { display: none; }
  .mz-read { gap: 6px; width: calc(100% - 20px); justify-content: space-between; }
  .mz-read-n { display: none; }
  .mz-pl { min-width: 0; flex: 1; }
  .mz-pager { flex: 1; justify-content: space-between; }
  .mz-inspect {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    transform: none;
    padding: 14px 16px;
    animation: mz-rise2 .4s var(--mz-ease);
  }
  .mz-inspect h2 { font-size: 19px; margin-top: 6px; }
  .mz-ins-d { display: none; }
  .mz-ins-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mz-ins-b .primary { grid-column: auto; }
  .mz-ins-b .mz-btn { width: auto; }
  .mz-help-c li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mz-tag-t b { max-width: 150px; }
  .mz-hint { font-size: 12px; }
  .mesa[data-mode="reading"] .mz-hint { bottom: 76px; }
}
@keyframes mz-rise2 { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Pantalla baja (el móvil en horizontal) ----------
   La carta de cerca va a la izquierda (mesa.inspectTransform, con la misma regla) y la ficha a su
   derecha, compacta, por debajo de la barra de arriba: abajo a lo ancho no cabría de alto. */
@media (max-height: 560px) and (orientation: landscape) {
  .mz-inspect {
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    top: calc(50% + 27px);
    bottom: auto;
    width: min(300px, 40vw);
    max-height: calc(100% - 74px - max(10px, env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-50%);
    padding: 12px 14px;
    animation: mz-slide .45s var(--mz-ease);
  }
  .mz-ins-h { font-size: 11px; }
  .mz-inspect h2 { margin: 6px 0 0; font-size: 19px; }
  .mz-ins-v { margin: 0 0 8px; font-size: 12px; }
  .mz-ins-d { display: grid; margin-bottom: 10px; }
  .mz-ins-d div { padding: 5px 10px; font-size: 12px; }
  /* Los tres botones en una fila, solo con su icono (el nombre, en el título) */
  .mz-ins-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .mz-ins-b .primary { grid-column: auto; }
  .mz-ins-b .mz-btn { width: auto; height: 38px; padding: 0; }
  .mz-ins-b .mz-btn span { display: none; }
  .mesa[data-mode="inspect"] .mz-hint { display: none; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .mz-dust { display: none; }
  .mesa, .mz-fx::after, .mz-lampglow { transition-duration: .01ms; }
}

/* Sombras que caen sobre la tapa de otro binder */
.mz-recv { overflow: hidden; pointer-events: none; border-radius: 5px; }
.mz-binder.is-open .mz-recv { display: none; }
.mz-rs {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, .5);
  box-shadow: 0 0 16px 9px rgba(0, 0, 0, .42);
  will-change: transform, opacity;
}
.mz-rs.card { border-radius: 8px; box-shadow: 0 0 7px 3px rgba(0, 0, 0, .4); }
@media (max-width: 760px) {
  .mesa[data-mode="inspect"] .mz-hint { display: none; }
}

/* ---------- Botón de la barra superior de la app (para cuando se integre) ---------- */
/* La entrada a la mesa: un botón fino con el icono en el acento (es lo que distingue a Kolekto) */
/* Que se vea: en el acento del juego, con su nombre («Mesa 3D») donde cabe y, si no, con la etiqueta
   «3D» junto al icono (nunca el icono solo, que pasaba desapercibido) */
.mesa-btn {
  flex: none;
  gap: 7px;
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 0 var(--accent-glow);
  color: var(--text);
  font-weight: 650;
  transition: background .15s, border-color .15s, box-shadow .3s;
}
.mesa-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px -4px var(--accent-glow); }
.mesa-btn .i { color: var(--accent-2); }
.mesa-btn .badge-3d { display: none; padding: 1px 5px; border-radius: var(--r-xs); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .04em; line-height: 1.4; }

/* ==========================================================================
   Sala de juegos (games/hub.js): el botón Jugar y la mesa en modo juego. Los estilos de la
   sala y de los juegos van en mesa-games.css (la carga la sala) y en css/games/<id>.css.
   ========================================================================== */
.mz-gbtn { border-color: var(--accent-line); color: var(--accent-2); }
.mz-gbtn:hover { border-color: var(--accent); }
.mz-gbtn[aria-pressed="true"], .mz-gbtn[aria-expanded="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, rgba(14, 14, 16, .8)); color: var(--text); }
.mesa[data-mode="game"] .mz-top [data-act="reset"] { display: none; }
/* El marcador de los juegos va en la fila de la barra de arriba en una pantalla baja: el título se
   queda sin subtítulo y, si aun así no cabe, se aparta (lo decide games/hub.js, fitScore) */
@media (max-height: 560px) and (orientation: landscape) {
  .mesa[data-mode="game"] .mz-brand span { display: none; }
}
.mesa.g-nosub .mz-brand span { display: none; }
.mesa.g-notitle .mz-brand { visibility: hidden; }
.mesa[data-mode="game"] .mz-hint { opacity: 0 !important; }
.mesa[data-mode="game"] .mz-fog { opacity: .3; }
.mesa[data-mode="game"] .mz-dust { opacity: .35; }
@media (max-width: 400px) {
  .mz-top { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .mz-top-r { gap: 4px; }
  /* A 320 no caben salir y los seis botones en una fila: salir no encoge y los botones bajan a otra,
     pegados a la derecha (antes la ayuda se salía de la pantalla) */
  .mz-top { align-items: flex-start; }
  .mz-top > .mz-exit { flex: none; }
  .mz-top-r { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}
/* En el móvil, el selector con el logo pequeño y sin flecha; el título no cabe con los botones: el logo
   del juego ya dice dónde estás */
@media (max-width: 760px) {
  .mz-btn.mz-tcg { width: auto; min-width: 40px; padding: 0 8px; }
  .mz-tcg .gs-logo { max-width: 54px; height: clamp(12px, calc(58px / var(--ar, 3)), 18px); }
  .mz-tcg .gs-word { font-size: 14px; }
}
@media (max-width: 480px) {
  .mz-brand { display: none; }
  .mz-tcg .gs-caret { display: none; }
}