.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: linear-gradient(180deg, #24170f, #130d09);
  border-bottom: 3px solid #9a6b2c;
  box-shadow: 0 4px 16px #000a;
}

/* En partida activa: pantalla completa absoluta sin barra superior ni scroll */
body.en-partida {
  overflow: hidden !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
}

body.en-partida .nav {
  display: none !important;
}

body.en-partida #vista-jugar {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 10;
}

.nav strong {
  margin-right: 16px;
  color: #f6d27b;
  font-family: Georgia, serif;
  font-size: 20px;
  text-shadow: 0 2px 0 #542d0b, 0 0 12px #e6a53b66;
}

.nav button {
  padding: 7px 15px;
  color: #e8d9b8;
  background: linear-gradient(#4a3421, #291b12);
  border: 1px solid #805b2c;
  border-radius: 7px;
  box-shadow: inset 0 1px #ffffff19, 0 2px 4px #0008;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.175, .885, .32, 1.275), border-color .2s cubic-bezier(.175, .885, .32, 1.275);
}

.nav button:hover { transform: translateY(-2px); border-color: #f3cb72; }
.nav button.active { color: #fff5d6; background: linear-gradient(#bd8431, #704116); border-color: #f5d079; }

.menu {
  max-width: 680px;
  margin: clamp(18px, 5vh, 56px) auto;
  padding: clamp(18px, 3.5vw, 32px);
  color: #f0e4cb;
  background: linear-gradient(145deg, #49311c, #24170f 70%);
  border: 3px solid #98703b;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px #120c08, inset 0 0 24px #0008, 0 18px 45px #000a;
}

.menu h2 { margin: 0; color: #f5d17b; font-family: Georgia, serif; font-size: 1.8rem; text-shadow: 0 2px #492b0d; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 22px 0; }
.menu-grid label { display: flex; flex-direction: column; gap: 6px; color: #d6c3a1; font-size: .86rem; }
.menu select { padding: 9px; color: #f5ead2; background: #17100b; border: 1px solid #79572e; border-radius: 6px; }
.menu .grande { padding: 12px 40px; font-size: 1.15rem; }
.nota { color: #bba98c; font-size: .78rem; line-height: 1.5; }

/* ==================== TABLERO A PANTALLA COMPLETA (100% VISIBLE SIN SCROLL) ==================== */

.tablero {
  --wood-deep: #20130c;
  --wood-mid: #3a2416;
  --wood-light: #966638;
  --brass: #c9973f;
  --brass-light: #f3d27b;
  --leather: #4b321f;
  --felt: #261a12;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  color: #fff4d8;
  background:
    radial-gradient(ellipse at 50% 42%, #efb65b20, transparent 53%),
    radial-gradient(ellipse at center, transparent 36%, #080603dc 100%),
    repeating-linear-gradient(112deg, #ffffff04 0 2px, transparent 2px 14px),
    linear-gradient(145deg, #3a2416, #17100b 72%);
  perspective: 1100px;
  isolation: isolate;
  user-select: none;
  touch-action: none;
}

.tablero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 5px);
}

.contenedor {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 11.5vw, 152px) minmax(0, 1fr) clamp(114px, 13.5vw, 178px);
  align-items: stretch;
  gap: clamp(6px, 0.9vw, 14px);
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  padding: clamp(4px, 0.9dvh, 12px) clamp(6px, 1.1vw, 16px);
  background:
    radial-gradient(ellipse at center, #d39d5040, transparent 68%),
    linear-gradient(145deg, #75502d, #3a2416 28%, #24160e 76%, #130c08);
  border: clamp(4px, 0.6dvh, 7px) ridge #8c6234;
  box-shadow: inset 0 2px 0 #ffe6a755, inset 0 -8px 14px #0a0605b8, 0 8px 22px #000a;
  overflow: hidden;
}

.contenedor::before {
  position: absolute;
  z-index: 0;
  inset: 3px;
  content: "";
  border: 1px solid #f0cb8055;
  pointer-events: none;
}

/* El Campo Central reparte proporcionalmente las 6 franjas verticales sin desbordar jamás */
.campo {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-rows:
    minmax(0, 17fr)
    minmax(0, 23fr)
    clamp(6px, 0.9dvh, 11px)
    minmax(0, 23fr)
    minmax(0, 16fr)
    minmax(0, 21fr);
  align-items: center;
  gap: clamp(2px, 0.45dvh, 6px);
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: clamp(4px, 0.8dvh, 10px) clamp(8px, 1.4vw, 18px);
  background:
    radial-gradient(ellipse at 50% 42%, #bd8a4733, transparent 62%),
    repeating-linear-gradient(8deg, #fff1 0 1px, transparent 1px 5px),
    repeating-linear-gradient(98deg, #0000000c 0 2px, transparent 2px 11px),
    linear-gradient(145deg, #513722, #362319 52%, #26180f);
  border: clamp(4px, 0.7dvh, 8px) ridge #9a6b37;
  border-top-color: #d2a563;
  border-bottom-color: #513219;
  border-radius: 20px;
  box-shadow: inset 0 2px 0 #f4d59955, inset 0 -10px 22px #100904b8, 0 6px 14px #100a06a8;
  transform: rotateX(8deg);
  transform-origin: center center;
}

.campo::before {
  position: absolute;
  z-index: 0;
  inset: 6px;
  content: "";
  border: 2px solid #d5ad6a66;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffe4a733, inset 0 -2px 8px #10090466;
  pointer-events: none;
}

.campo::after {
  position: absolute;
  z-index: 5;
  inset: 3px;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle, #e7c786 0 2px, #50371f 2.5px 4px, transparent 4.5px) 6px 6px / 10px 10px,
    radial-gradient(circle, #e7c786 0 2px, #50371f 2.5px 4px, transparent 4.5px) calc(100% - 6px) 6px / 10px 10px,
    radial-gradient(circle, #e7c786 0 2px, #50371f 2.5px 4px, transparent 4.5px) 6px calc(100% - 6px) / 10px 10px,
    radial-gradient(circle, #e7c786 0 2px, #50371f 2.5px 4px, transparent 4.5px) calc(100% - 6px) calc(100% - 6px) / 10px 10px;
  background-repeat: no-repeat;
}

/* ==================== RIELES LATERALES ==================== */

.riel-izquierdo, .riel-derecho {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: clamp(4px, 0.8dvh, 10px);
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: clamp(6px, 1dvh, 12px) clamp(6px, 0.8vw, 10px);
  background:
    repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #50341f, #302014 55%, #1d120c);
  border: 3px ridge #986a38;
  border-top-color: #d2a363;
  border-bottom-color: #4b2d17;
  border-radius: 14px;
  box-shadow: inset 0 2px 0 #f2d2993d, inset 0 -8px 12px #0e0805aa, 0 7px 14px #0009;
  overflow: hidden;
}

.riel-izquierdo { justify-content: space-between; }
.riel-derecho { align-items: stretch; justify-content: space-between; }

/* Botón de Opciones (Engranaje superior derecho) */
.btn-opciones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(5px, 0.9dvh, 9px) 8px;
  color: #fff2cf;
  background: linear-gradient(180deg, #5c4028, #2e1f14);
  border: 2px ridge #c99a49;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 #ffe7a855, 0 3px 6px #000a;
  font-size: clamp(.68rem, 1.3dvh, .84rem);
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.btn-opciones:hover {
  filter: brightness(1.18);
  border-color: #ffe38f;
  transform: translateY(-1px);
}

.bandeja-historial {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, #5b4934, #33271c 42%, #21170f);
  border: 2px ridge #a18b69;
  border-top-color: #ded0b2;
  border-bottom-color: #514330;
  border-radius: 7px;
  box-shadow: inset 0 2px 4px #fff2, inset 0 -5px 8px #0009, 0 4px 7px #0008;
}

.bandeja-historial summary {
  padding: clamp(4px, 0.7dvh, 8px) 6px;
  color: #f1d69e;
  cursor: pointer;
  font-size: clamp(.62rem, 1.2dvh, .74rem);
  font-weight: 800;
  list-style-position: inside;
  text-shadow: 0 1px 2px #000;
}

.bandeja-historial[open] summary { border-bottom: 1px solid #d4b77955; }
.bandeja-historial .registro {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 52dvh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  color: #d8c7a9;
  background:
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 4px),
    linear-gradient(#30271c, #21180f);
  border: 0;
  list-style: none;
  box-shadow: inset 0 3px 8px #000a;
  font-size: clamp(.58rem, 1.1dvh, .68rem);
}

.bandeja-historial .registro li { padding: 4px 2px; border-bottom: 1px solid #c6a67122; }
.bandeja-historial .registro::-webkit-scrollbar { width: 6px; }
.bandeja-historial .registro::-webkit-scrollbar-thumb { background: linear-gradient(#bd945b, #60401e); border-radius: 4px; }

.cementerio {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  padding: clamp(5px, 0.9dvh, 10px) 5px;
  color: #d7c3a0;
  background:
    radial-gradient(ellipse at 50% 32%, #91806a44, transparent 68%),
    linear-gradient(145deg, #4c4439, #29231d 68%, #19140f);
  border: 2px ridge #817460;
  border-top-color: #c0b49c;
  border-bottom-color: #3a3025;
  border-radius: 9px;
  box-shadow: inset 0 2px 5px #fff2, inset 0 -7px 10px #0009, 0 4px 8px #0008;
  place-items: center;
}

.cementerio-icono { color: #d8c6a4; font-size: clamp(.85rem, 1.8dvh, 1.1rem); text-shadow: 0 0 8px #d8c6a455, 0 2px 2px #000; }
.cementerio-label { font-size: clamp(.58rem, 1.1dvh, .68rem); text-shadow: 0 1px 2px #000; }
.cementerio-total { position: absolute; right: -5px; bottom: -5px; display: grid; width: 22px; height: 22px; color: #fff4dc; background: linear-gradient(145deg, #8f3030, #4b1313); border: 2px ridge #d8b97b; border-radius: 50%; box-shadow: 0 2px 4px #0009; font-size: .68rem; place-items: center; }

.turno-info {
  padding: clamp(5px, 0.9dvh, 9px) 4px;
  color: #f3d27b;
  text-align: center;
  font-size: clamp(.68rem, 1.3dvh, .84rem);
  font-weight: 800;
  background: linear-gradient(145deg, #4a311b, #2a1a0e);
  border: 2px ridge #a77939;
  border-radius: 7px;
  box-shadow: inset 0 1px #ffe7aa55, inset 0 -3px 5px #140b05aa, 0 3px 6px #0007;
  text-shadow: 0 2px 3px #000;
}

.turno-info::before { display: inline-block; width: .45em; height: .45em; margin-right: .45em; content: ""; background: linear-gradient(145deg, #fff0a2, #c78b2e); border: 1px solid #f8dc87; box-shadow: 0 0 7px #e7b74c88; transform: rotate(45deg); }

button.fin-turno {
  position: relative;
  min-height: clamp(38px, 6.8dvh, 58px);
  padding: clamp(5px, 0.9dvh, 10px) 6px;
  color: #fff1c9;
  background:
    radial-gradient(ellipse at 50% 0, #ffe6a45c, transparent 62%),
    repeating-linear-gradient(90deg, #ffffff08 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #bd8437, #82501f 48%, #4d2c12);
  border: 3px ridge #e0ba66;
  border-top-color: #ffebaa;
  border-bottom-color: #543311;
  border-radius: 12px;
  box-shadow: inset 0 2px 0 #fff5cc88, inset 0 -6px 8px #271307aa, 0 5px 8px #000a;
  font-size: clamp(.72rem, 1.45dvh, .95rem);
  font-weight: 900;
  text-shadow: 0 2px 2px #38200c, 0 0 8px #ffd66b55;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.175, .885, .32, 1.275), filter .16s, box-shadow .16s;
}

.fin-turno:not(:disabled):hover {
  z-index: 2;
  filter: brightness(1.17);
  box-shadow: inset 0 2px 0 #fff8d6, inset 0 -6px 8px #271307aa, 0 0 18px #f6c45d99, 0 7px 12px #000a;
  transform: translateY(-2px);
}

.fin-turno:not(:disabled):active { transform: translateY(2px) scale(.98); }
.fin-turno:disabled, .fin-turno.espera { color: #a99b82; background: linear-gradient(180deg, #6b6255, #403a32 52%, #27231e); border-color: #837b6d; filter: saturate(.45); text-shadow: 0 1px #111; }
.fin-turno.sugerido { animation: pulso-turno 1.1s cubic-bezier(.175, .885, .32, 1.275) infinite alternate; }

.pila-mazo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 4px;
  color: #f4e6c7;
  background: radial-gradient(ellipse at center, #be904324, transparent 72%);
}

.mazo-reverso {
  position: relative;
  display: block;
  width: clamp(40px, 6.2dvh, 60px);
  height: clamp(56px, 8.6dvh, 84px);
  background:
    radial-gradient(circle at center, #d3a752 0 4%, transparent 5% 18%, #d3a752 19% 21%, transparent 22%),
    repeating-linear-gradient(45deg, #c8994b 0 2px, #34245c 2px 4px, #d5ae5e 4px 6px),
    linear-gradient(145deg, #514184, #21193a);
  border: 3px ridge #d0ad63;
  border-radius: 7px;
  box-shadow:
    0 2px 0 #38240f,
    0 4px 0 #c19446,
    0 6px 0 #503319,
    0 10px 12px #000a,
    inset 0 0 0 2px #231638;
}

.mazo-reverso::before { position: absolute; inset: 4px; content: ""; border: 1px solid #f0d184; border-radius: 3px; }
.mazo-total { margin-top: 6px; color: #fff0c7; font-size: clamp(.78rem, 1.5dvh, 1rem); text-shadow: 0 2px #26170c; }
.mazo-etiqueta { color: #cbb58e; font-size: clamp(.58rem, 1.1dvh, .68rem); text-shadow: 0 1px 2px #000; }

.msg { min-height: 18px; color: #ff9a8a; text-align: center; font-size: clamp(.64rem, 1.2dvh, .78rem); font-weight: 700; opacity: 0; transition: opacity .2s; }
.msg.visible { opacity: 1; }

/* ==================== FILAS DE HÉROE, MANO RIVAL VISUAL Y MESAS ==================== */

.fila-heroe {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 20px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(2px, 0.5dvh, 6px) clamp(6px, 1.2vw, 16px);
  background:
    radial-gradient(ellipse at 50% 0, #e8c07820, transparent 72%),
    linear-gradient(180deg, #67472855, #291a10aa);
  border: 2px ridge #a97a40;
  border-top-color: #e0b875;
  border-bottom-color: #503216;
  border-radius: 14px;
  box-shadow: inset 0 2px 0 #f9d99b44, inset 0 -5px 8px #10090477, 0 4px 8px #0006;
}

/* Abanico visual de cartas del rival arriba del todo */
.mano-rival-contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: clamp(80px, 12vw, 150px);
}

.mano-rival-abanico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(28px, 5.2dvh, 46px);
  padding: 0 6px;
}

.carta-dorso-rival {
  width: clamp(18px, 3.3dvh, 28px);
  height: clamp(26px, 4.8dvh, 40px);
  background:
    radial-gradient(circle at center, #ffd66b 0 16%, transparent 18%),
    linear-gradient(145deg, #5c4994, #221840);
  border: 2px solid #e0ba69;
  border-radius: 4px;
  box-shadow: 0 3px 6px #000b, inset 0 0 4px #000;
  transform: translateY(var(--rival-rise, 0px)) rotate(var(--rival-angle, 0deg));
  transform-origin: 50% 0%;
}

.carta-dorso-rival + .carta-dorso-rival {
  margin-left: clamp(-11px, -1.2vw, -6px);
}

.mano-rival {
  color: #e3cfa8;
  text-align: center;
  font-size: clamp(.58rem, 1.15dvh, .74rem);
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}

.fila-heroe .mana {
  min-width: clamp(84px, 10vw, 124px);
  padding: clamp(3px, 0.5dvh, 6px) clamp(5px, 0.7vw, 8px);
  background: linear-gradient(145deg, #302319, #1b130e);
  border: 2px ridge #946b39;
  border-top-color: #d2aa67;
  border-bottom-color: #4c301a;
  border-radius: 10px;
  box-shadow: inset 0 3px 6px #0009, 0 3px 6px #0008;
}

.linea {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #d5ad69, #6f4825 37%, #3c2716 70%, #b18349);
  border: 1px solid #e1bd79;
  border-right: 0;
  border-left: 0;
  border-radius: 2px;
  box-shadow: 0 3px 5px #100904aa, 0 -2px 3px #ffe4a433;
}

.linea::before {
  position: absolute;
  inset: 1px 0;
  content: "";
  background: linear-gradient(90deg, transparent, #f2d28a 15% 85%, transparent);
  opacity: .7;
}

.linea::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(16px, 2.4dvh, 24px);
  height: clamp(16px, 2.4dvh, 24px);
  content: "";
  background: radial-gradient(circle at 32% 25%, #b8f5ff, #3c91bd 35%, #205375 68%, #122b3b);
  border: 2px ridge #d5bb77;
  border-radius: 5px;
  box-shadow: 0 0 12px #59c9ffbb, inset 0 0 8px #c5f6ff88, 0 3px 5px #000a;
  transform: translate(-50%, -50%) rotate(45deg);
}

.mesa {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 12px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(2px, 0.5dvh, 6px) 8px;
  background:
    radial-gradient(ellipse at 50% 55%, #d8aa5320, transparent 72%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #302116ba, #1a120dbd);
  border: 2px ridge #986b39;
  border-top-color: #d0a260;
  border-bottom-color: #4d321b;
  border-right-color: #d2a258aa;
  border-left-color: #d2a258aa;
  border-radius: 12px;
  box-shadow: inset 0 4px 12px #0008, inset 0 1px 0 #f5d79a44, 0 3px 6px #0006;
}

/* ==================== MODALES (OPCIONES, DESCUBRIR, FIN DE PARTIDA) ==================== */

.modal {
  position: fixed;
  z-index: 8500;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 6, 4, 0.82);
  backdrop-filter: blur(5px);
}

.caja {
  max-width: min(640px, 94vw);
  max-height: 90dvh;
  overflow-y: auto;
  padding: clamp(18px, 3dvh, 30px) clamp(20px, 3vw, 34px);
  text-align: center;
  background: linear-gradient(145deg, #4a321c, #20140d);
  border: 4px ridge #d1a14a;
  border-radius: 16px;
  box-shadow: inset 0 0 20px #0008, 0 16px 42px #000d;
}

.caja h2 { margin: 0 0 14px; color: #f5d17b; font-family: Georgia, serif; font-size: clamp(1.6rem, 5dvh, 2.8rem); text-shadow: 0 3px #552d0a; }
.caja h3 { margin: 0 0 14px; color: #f5d17b; font-family: Georgia, serif; font-size: clamp(1.15rem, 3.2dvh, 1.6rem); }

.opciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.opcion { width: clamp(110px, 18vw, 145px); padding: 8px; color: #fff; background: linear-gradient(#49311c, #21160f); border: 2px solid #9a713d; border-radius: 10px; cursor: pointer; transition: transform .16s, border-color .16s; }
.opcion:hover { transform: translateY(-4px) scale(1.04); border-color: #ffe285; }
.opcion .arte { height: clamp(72px, 14dvh, 105px); overflow: hidden; border-radius: 6px; }
.opcion .arte img { width: 100%; height: 100%; object-fit: cover; }
.opcion small { display: block; margin-top: 4px; font-size: .65rem; }

.opciones-menu-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(320px, 80vw);
  margin-top: 10px;
}

.opciones-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(20, 12, 8, 0.55);
  border: 1px solid #8c6535;
  border-radius: 8px;
  font-size: .88rem;
}

.btn-peligro {
  padding: 11px 20px;
  color: #fff2f0;
  background: linear-gradient(180deg, #b82e25, #69120d);
  border: 2px ridge #ff9488;
  border-radius: 9px;
  font-weight: 900;
  font-size: .96rem;
}

.previa { position: fixed; z-index: 9800; width: min(250px, 34vw); pointer-events: none; }
.previa img { width: 100%; filter: drop-shadow(0 8px 16px #000); }
.previa-texto { padding: 8px; color: #eee; white-space: pre-wrap; background: #261b12; border: 2px solid #c9973f; border-radius: 8px; font-family: inherit; font-size: 12px; box-shadow: 0 8px 24px #000d; }

/* ==================== FOCO DE NAVEGACIÓN MANDO TV / FLECHAS TECLADO ==================== */

.foco-tv {
  outline: 4px solid #59f2ff !important;
  outline-offset: 4px !important;
  box-shadow:
    0 0 0 6px rgba(255, 198, 56, 0.85),
    0 0 26px 8px rgba(89, 242, 255, 0.9) !important;
  z-index: 60 !important;
}

.carta-mano.foco-tv {
  transform: translateY(-28px) rotate(0deg) scale(1.26) !important;
}

.barra-ayuda-tv {
  position: fixed;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  padding: 3px 14px;
  background: rgba(16, 10, 6, 0.88);
  border: 1px solid #d4a650;
  border-radius: 999px;
  color: #ffe8a3;
  font-size: clamp(.58rem, 1.1dvh, .72rem);
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px #000c;
  opacity: 0;
  transition: opacity .25s ease;
}
body.modo-mando-activo .barra-ayuda-tv {
  opacity: 1;
}

/* ==================== MODO ANDROID HORIZONTAL OBLIGATORIO ==================== */

.overlay-rotar-pantalla {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  text-align: center;
  color: #fff3d1;
  background: radial-gradient(circle at center, #3b2414, #120b07 80%);
}

.overlay-rotar-icono {
  font-size: 4.2rem;
  animation: girar-movil 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 18px #ffbe3d);
}

@keyframes girar-movil {
  0% { transform: rotate(0deg) scale(0.95); }
  100% { transform: rotate(-90deg) scale(1.08); }
}

@media (max-width: 920px) and (orientation: portrait) {
  body.en-partida .overlay-rotar-pantalla {
    display: flex;
  }
}

/* Ajustes para móviles Android en modo horizontal (altura reducida <= 520px) */
@media (max-height: 520px) and (orientation: landscape) {
  .contenedor {
    grid-template-columns: 88px minmax(0, 1fr) 104px;
    gap: 5px;
    padding: 3px 6px;
    border-width: 3px;
  }
  .campo {
    padding: 3px 6px;
    border-width: 3px;
    border-radius: 12px;
    transform: rotateX(4deg);
  }
  .riel-izquierdo, .riel-derecho {
    padding: 4px;
    gap: 4px;
    border-width: 2px;
  }
  .pila-mazo { display: none; }
  .mano-rival-abanico { height: 22px; }
}

/* Ajustes para Smart TV y Pantallas Grandes (>= 1800px) */
@media (min-width: 1800px) {
  .contenedor {
    grid-template-columns: 200px minmax(0, 1fr) 230px;
    padding: 16px 24px;
  }
  .btn-opciones, button.fin-turno, .turno-info {
    font-size: 1.1rem;
  }
}