/* MansionDBG - Optimización Final de Layout y Visibilidad v5 */

:root {
  --bg: #06090e;
  --panel: #10151d;
  --panel2: #151b25;
  --line: rgba(224, 172, 64, 0.35);
  --line2: rgba(255, 255, 255, 0.10);
  --gold: #e5b548;
  --green: #45d38b;
  --red: #e44d4d;
  --text: #f4f6fa;
  --muted: #aeb6c5;
  
  --sidebar-w: 280px;
  --right-rail-w: 320px;
  --gap: 10px;
}

/* v25: celular horizontal. Mas mesa visible y boton fin de turno compacto. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(172px, 22vw, 220px) !important;
    grid-template-rows: minmax(0, 1fr) clamp(54px, 15dvh, 76px) !important;
    grid-template-areas:
      "game side"
      "game rail" !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .game-surface {
    grid-area: game !important;
    height: 100% !important;
    max-height: calc(100dvh - 6px) !important;
    display: grid !important;
    grid-template-rows: clamp(28px, 8dvh, 34px) minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .sidebar {
    grid-area: side !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .brand,
  .profile-card,
  .online-panel,
  .sidebar .history-actions {
    display: none !important;
  }

  .room-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 5px !important;
    gap: 4px !important;
    overflow: hidden auto !important;
  }

  .right-rail {
    grid-area: rail !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .right-rail .resources-panel,
  .right-rail .rules-panel,
  #chat-log {
    display: none !important;
  }

  .right-rail .chat-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 50px !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  #chat-input,
  #chat-form button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .topbar {
    height: 100% !important;
    min-height: 0 !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar .room-title {
    font-size: clamp(13px, 2.2vw, 18px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .board {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(42px, 13dvh, 58px) minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .table-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .player-card,
  .player-slot-empty {
    min-height: 0 !important;
    height: 100% !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(152px, 28%, 220px) minmax(0, 1fr) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .mansion-row,
  .deck-stack {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  #mansion-card.card-face,
  .mansion-card.card-face,
  .deck-card {
    width: auto !important;
    height: min(100%, calc(100dvh - 118px)) !important;
    max-height: calc(100dvh - 118px) !important;
    max-width: 100% !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }

  .mansion-command-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: 30px 26px !important;
    grid-template-areas:
      "actions end"
      "footer footer" !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  .mansion-command-zone .action-row {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mansion-command-zone .action-row-end {
    grid-area: end !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .turn-command.re-btn-icon,
  #end-turn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .turn-command.re-btn-icon span,
  #end-turn span {
    display: none !important;
  }

  .turn-command .re-btn-img,
  #end-turn .re-btn-img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  #end-turn {
    width: 34px !important;
    min-width: 34px !important;
    border-width: 2px !important;
  }

  .turn-footer {
    grid-area: footer !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .turn-footer .status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  #turn-timer {
    height: 24px !important;
    min-height: 24px !important;
    min-width: 52px !important;
    padding: 0 5px !important;
    font-size: 13px !important;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle at 55% 35%, #111925 0, #06090e 55%, #030508 100%);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

.hidden { display: none !important; }

/* --- ESTRUCTURA PRINCIPAL --- */
.app-shell {
  display: grid !important;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-rail-w) !important;
  grid-template-rows: 100vh !important;
  gap: var(--gap) !important;
  padding: var(--gap) !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.panel, .brand, .topbar, .table-zone, .player-card, .right-rail .panel {
  background: linear-gradient(180deg, rgba(21, 27, 37, 0.98), rgba(8, 12, 18, 0.98)) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- TOPBAR OPTIMIZATION --- */
.topbar {
  padding: 10px 20px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 80px !important;
}

.topbar > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topbar h2 {
  margin: 0 !important;
  font-size: 1.2rem !important;
  color: var(--gold) !important;
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

.volume-controls {
  display: flex !important;
  gap: 15px !important;
  background: rgba(0,0,0,0.3) !important;
  padding: 5px 15px !important;
  border-radius: 20px !important;
  border: 1px solid var(--line2) !important;
}

.volume-controls label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.8rem !important;
  color: var(--muted) !important;
}

.volume-controls input[type="range"] {
  width: 80px !important;
  height: 4px !important;
  accent-color: var(--gold) !important;
}

.turn-pill {
  background: var(--gold) !important;
  color: #000 !important;
  font-weight: bold !important;
  padding: 6px 15px !important;
  border-radius: 15px !important;
  box-shadow: 0 0 15px rgba(229, 181, 72, 0.4) !important;
}

.tutorial-button, .sound-button {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.tutorial-button {
  background: #45d38b !important;
  color: #000 !important;
  border: none !important;
}

.sound-button {
  background: #e5b548 !important;
  color: #000 !important;
  border: none !important;
}

/* --- GAME SURFACE (CENTRAL) --- */
.game-surface {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: var(--gap) !important;
  min-height: 0 !important;
}

.board {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: var(--gap) !important;
  min-height: 0 !important;
}

/* Área de Juego Principal */
.play-area {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: var(--gap) !important;
  min-height: 0 !important;
}

/* ============================================================
   CORRECCIÓN CARTA DE MANSIÓN - Visualización completa
   ============================================================ */

/* El panel de mansión necesita altura suficiente para mostrar la carta completa */
.mansion-panel {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
}

/* La fila de mansión ocupa todo el espacio disponible */
.mansion-row {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* El deck-stack ocupa la mayor parte del espacio */
.deck-stack {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
  position: relative !important;
  padding: 10px 0 !important;
}

/* La carta de mansión: tamaño proporcional al contenedor */
.mansion-card,
.deck-card {
  width: min(200px, 95%) !important;
  aspect-ratio: 5/7 !important;
  height: auto !important;
  max-height: 100% !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7) !important;
}

/* Cuando tiene imagen, mostrarla completa sin recorte */
.mansion-card.has-card-image {
  padding: 3px !important;
}

.mansion-card.has-card-image .card-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mansion-card.has-card-image .card-art img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  background: #080a0e !important;
  filter: brightness(1.15) contrast(1.1) !important;
  display: block !important;
}

/* Ocultar texto cuando hay imagen */
.mansion-card.has-card-image .card-copy {
  display: none !important;
}

/* ============================================================
   CORRECCIÓN RECURSOS - Layout 2x2 en columna derecha
   ============================================================ */

/* El panel de recursos necesita más espacio vertical */
.resources-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  flex: 1 !important;
}

/* El área de recursos con scroll */
.resource-grid {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 4px 2px !important;
}

/* Cada grupo de recursos */
.resource-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* LA GRILLA DE RECURSOS: 2 columnas x 2 filas (2x2) */
.resource-group-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: 8px !important;
  padding: 4px !important;
}

/* Cada carta de recurso */
.resource-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  padding: 5px !important;
  border: 1px solid rgba(224, 172, 64, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.03) !important;
}

.resource-card .card-face {
  width: 100% !important;
  aspect-ratio: 5/7 !important;
  height: auto !important;
}

/* La columna derecha necesita más espacio para mostrar 2x2 */
.right-rail {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gap) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* --- CHAT AND RESOURCES OPTIMIZATION --- */
.right-rail .chat-panel {
  flex: 0 0 auto !important;
  min-height: 150px !important;
  max-height: 220px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.right-rail .chat-panel .section-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.right-rail .chat-panel h2 {
  margin: 0 !important;
  font-size: 1rem !important;
  color: var(--gold) !important;
}

#chat-log {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 !important;
  list-style: none !important;
  font-size: 0.75rem !important;
}

#chat-log li {
  padding: 8px 12px !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: 8px !important;
  border-left: 3px solid var(--gold) !important;
  margin-bottom: 8px !important;
}

.chat-audio-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 4px 0 !important;
}

.chat-audio-container audio {
  height: 30px !important;
  width: 100% !important;
  max-width: 200px !important;
}

.audio-label {
  font-size: 0.6rem !important;
  color: var(--muted) !important;
  font-style: italic !important;
}

.chat-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 4px !important;
  font-size: 0.7rem !important;
}

.chat-meta strong {
  color: var(--gold) !important;
}

.chat-meta span {
  color: var(--muted) !important;
  font-size: 0.6rem !important;
}

#chat-form {
  display: flex !important;
  gap: 4px !important;
  margin-top: 8px !important;
}

#chat-input {
  flex: 1 !important;
  padding: 6px 10px !important;
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid var(--line2) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  font-size: 0.75rem !important;
}

#chat-form button {
  padding: 6px 10px !important;
  background: var(--gold) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
}

.right-rail .resources-panel {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.right-rail .resources-panel .section-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.right-rail .resources-panel h2 {
  margin: 0 !important;
  font-size: 1rem !important;
  color: var(--gold) !important;
}

#resource-types {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

#resource-types button {
  padding: 4px 10px !important;
  background: rgba(229, 181, 72, 0.15) !important;
  border: 1px solid rgba(229, 181, 72, 0.3) !important;
  border-radius: 4px !important;
  color: var(--text) !important;
  cursor: pointer !important;
  font-size: 0.7rem !important;
  transition: all 0.2s !important;
}

#resource-types button.active {
  background: var(--gold) !important;
  color: #000 !important;
  font-weight: 600 !important;
}

/* --- PLAYER ZONE OPTIMIZATION --- */
.controls-panel {
  padding: 12px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  gap: 8px !important;
  min-height: 0 !important;
}

.controls-panel .section-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

.controls-panel h2 {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--gold) !important;
}

/* --- LIVE TRACKERS OPTIMIZATION (UNIFIED STYLE) --- */
.live-trackers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 12px !important;
  background: rgba(0,0,0,0.4) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(229, 181, 72, 0.1) !important;
  align-items: center !important;
}

.live-trackers > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 10px 12px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  gap: 12px !important;
  transition: all 0.2s ease !important;
  width: auto !important;
  white-space: nowrap !important;
}

.live-trackers > div:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(229, 181, 72, 0.3) !important;
  transform: translateY(-2px) !important;
}

.tracker-icon {
  width: 28px !important;
  height: 28px !important;
  margin-bottom: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.tracker-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
}

.tracker-info span {
  font-size: 0.6rem !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
}

.tracker-info strong {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
}

/* Colores específicos por tipo de indicador */
.tracker-health { border-left: 3px solid #45d38b !important; }
.tracker-health strong { color: #45d38b !important; }

.tracker-action { border-left: 3px solid #e44d4d !important; }
.tracker-action strong { color: #e44d4d !important; }

.tracker-buy { border-left: 3px solid var(--gold) !important; }
.tracker-buy strong { color: var(--gold) !important; }

.tracker-explore { border-left: 3px solid #45d38b !important; }
.tracker-explore strong { color: #45d38b !important; }

.tracker-medal { border-left: 3px solid var(--gold) !important; }
.tracker-medal strong { color: var(--gold) !important; }

.tracker-damage { border-left: 3px solid #e44d4d !important; }
.tracker-damage strong { color: #e44d4d !important; }

.tracker-gold { border-left: 3px solid var(--gold) !important; }
.tracker-gold strong { color: var(--gold) !important; }

.tracker-ammo { border-left: 3px solid #c89632 !important; }
.tracker-ammo strong { color: #c89632 !important; }

/* Zonas de Mazo y Descarte */
.player-card-zones {
  height: 100px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 15px !important;
  margin-bottom: 5px !important;
}

.player-zone {
  height: 100% !important;
  background: rgba(255,255,255,0.03) !important;
  border-radius: 8px !important;
  padding: 5px !important;
}

/* --- MANSION COMMAND ZONE OPTIMIZATION --- */
.mansion-command-zone {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: 8px !important;
}

.action-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 0 !important;
}

.action-row-end {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
}

.turn-command {
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background: linear-gradient(135deg, rgba(229, 181, 72, 0.2), rgba(229, 181, 72, 0.1)) !important;
  border: 1.5px solid rgba(229, 181, 72, 0.4) !important;
  color: var(--text) !important;
  font-size: 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 70px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

.turn-command:hover {
  background: linear-gradient(135deg, rgba(229, 181, 72, 0.35), rgba(229, 181, 72, 0.25)) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(229, 181, 72, 0.3) !important;
  border-color: rgba(229, 181, 72, 0.6) !important;
}

.turn-command:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(229, 181, 72, 0.2) !important;
}

.turn-command.re-btn-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.turn-command.re-btn-icon .re-btn-img {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.turn-command.end-command {
  background: linear-gradient(135deg, var(--red), #c93a3a) !important;
  border-color: var(--red) !important;
  color: white !important;
  min-width: 120px !important;
  box-shadow: 0 4px 16px rgba(228, 77, 77, 0.4) !important;
}

.turn-command.end-command:hover {
  background: linear-gradient(135deg, #ff5555, #e44d4d) !important;
  box-shadow: 0 6px 20px rgba(228, 77, 77, 0.6) !important;
  border-color: #ff5555 !important;
}

.turn-command.end-command .re-btn-img {
  width: 32px !important;
  height: 32px !important;
}

.turn-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
}

.turn-footer strong {
  color: var(--gold) !important;
  font-size: 1rem !important;
}

/* Armas Disponibles */
.weapon-picker {
  height: 110px !important;
  background: rgba(0,0,0,0.2) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin-bottom: 5px !important;
}

.weapon-list {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  height: 80px !important;
  align-items: center !important;
}

.weapon-select-card {
  width: 55px !important;
  height: 77px !important;
  flex: 0 0 55px !important;
}

/* Mano del Jugador */
.hand {
  display: flex !important;
  gap: 8px !important;
  padding: 8px !important;
  overflow-x: auto !important;
  background: rgba(229, 181, 72, 0.03) !important;
  border: 1px dashed rgba(229, 181, 72, 0.15) !important;
  border-radius: 12px !important;
  min-height: 130px !important;
  align-items: center !important;
}

.hand .card {
  flex: 0 0 95px !important;
  height: 133px !important;
  transition: transform 0.2s !important;
}
.hand .card:hover { transform: translateY(-15px) scale(1.05) !important; z-index: 10 !important; }

/* --- SISTEMA DE LUPA (INSPECCIÓN) --- */
.inspect-btn {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(0,0,0,0.7) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 50% !important;
  color: var(--gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  font-size: 12px !important;
  opacity: 0.8 !important;
}
.inspect-btn:hover { opacity: 1 !important; transform: scale(1.1) !important; }

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.9) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}

.inspect-modal {
  background: var(--panel2) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 16px !important;
  max-width: 800px !important;
  width: 90% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 25px !important;
  padding: 25px !important;
  position: relative !important;
  box-shadow: 0 0 50px rgba(229, 181, 72, 0.3) !important;
}

.inspect-modal .close-btn {
  position: absolute !important;
  top: -15px !important;
  right: -15px !important;
  background: var(--red) !important;
  color: white !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-weight: bold !important;
}

.inspect-image {
  width: 100% !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
}

.inspect-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.inspect-info h2 { color: var(--gold) !important; margin: 0 !important; font-size: 1.8rem !important; }
.inspect-info .type-badge { 
  background: rgba(255,255,255,0.1) !important; 
  padding: 4px 12px !important; 
  border-radius: 20px !important; 
  width: fit-content !important;
  font-size: 0.8rem !important;
}
.inspect-details { font-size: 1.1rem !important; line-height: 1.6 !important; color: var(--muted) !important; }

/* ============================================================
   BOTONES DE ACCIÓN CON ICONOS RE
   ============================================================ */

/* Botón con icono RE: layout vertical con imagen pequeña arriba */
.re-btn-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 3px 2px !important;
  overflow: hidden !important;
  position: relative !important;
}

.re-btn-img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important;
}

.re-btn-icon span {
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

/* Efecto hover en botones RE */
.re-btn-icon:hover .re-btn-img {
  transform: scale(1.15) !important;
  filter: drop-shadow(0 2px 6px rgba(229, 181, 72, 0.6)) !important;
}

/* Cuando los botones están deshabilitados */
.re-btn-icon:disabled .re-btn-img {
  opacity: 0.4 !important;
  filter: grayscale(80%) !important;
}

/* ============================================================
   INDICADORES CON ICONOS RE (LIVE TRACKERS)
   ============================================================ */

/* Redefinir live-trackers para usar iconos RE */
.live-trackers {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
}

.live-trackers > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  border: 1px solid rgba(216, 168, 77, 0.25) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(216, 168, 77, 0.1), rgba(79, 191, 138, 0.05)), rgba(0, 0, 0, 0.2) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Quitar el pseudo-elemento ::before que usaba letras como iconos */
.live-trackers > div::before {
  display: none !important;
  content: none !important;
}

/* Icono RE del tracker */
.tracker-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Contenedor de texto del tracker */
.tracker-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.tracker-info span {
  display: block !important;
  color: var(--muted) !important;
  font-size: 0.44rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tracker-info strong {
  display: block !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
}

/* Colores específicos por tipo de tracker */
.tracker-health { border-color: rgba(87, 199, 137, 0.3) !important; }
.tracker-health .tracker-info strong { color: #57c789 !important; }

.tracker-damage { border-color: rgba(228, 77, 77, 0.3) !important; }
.tracker-damage .tracker-info strong { color: #e44d4d !important; }

.tracker-medal { border-color: rgba(229, 181, 72, 0.3) !important; }
.tracker-medal .tracker-info strong { color: var(--gold) !important; }

.tracker-ammo { border-color: rgba(200, 150, 50, 0.3) !important; }
.tracker-ammo .tracker-info strong { color: #c89632 !important; }

.tracker-gold { border-color: rgba(229, 181, 72, 0.4) !important; }
.tracker-gold .tracker-info strong { color: var(--gold) !important; }

.tracker-action { border-color: rgba(228, 77, 77, 0.25) !important; }
.tracker-explore { border-color: rgba(69, 211, 139, 0.25) !important; }
.tracker-buy { border-color: rgba(229, 181, 72, 0.25) !important; }

/* ============================================================
   RESPONSIVIDAD PARA ICONOS
   ============================================================ */

@media (max-width: 1200px) {
  .re-btn-img {
    width: 22px !important;
    height: 22px !important;
  }
  .tracker-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 900px) {
  .re-btn-img {
    width: 18px !important;
    height: 18px !important;
  }
  .re-btn-icon span {
    display: none !important;
  }
  .tracker-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .tracker-info span {
    display: none !important;
  }
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 1024px) {
  .inspect-modal { grid-template-columns: 1fr !important; max-height: 90vh !important; overflow-y: auto !important; }
  .inspect-image { max-width: 250px !important; margin: 0 auto !important; }
}

@media (max-width: 768px) {
  .app-shell { display: flex !important; flex-direction: column !important; height: auto !important; overflow: auto !important; }
  .mansion-card, .deck-card { width: 130px !important; }
  .resource-group-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================================
   AJUSTE RESPONSIVO FINAL SOLICITADO
   Indicadores del turno agrupados, zona central estable y chat amplio.
   ============================================================ */

:root {
  --sidebar-w: clamp(220px, 18vw, 280px);
  --right-rail-w: clamp(310px, 23vw, 360px);
  --gap: clamp(6px, 0.75vw, 10px);
}

.app-shell {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--right-rail-w) !important;
  grid-template-rows: minmax(0, 100dvh) !important;
  max-width: 100vw !important;
}

.sidebar,
.game-surface,
.right-rail,
.board,
.play-area,
.table-zone,
.controls-panel,
.mansion-panel {
  min-width: 0 !important;
  min-height: 0 !important;
}

.sidebar,
.right-rail,
.game-surface {
  height: 100% !important;
  max-height: calc(100dvh - (var(--gap) * 2)) !important;
}

.sidebar,
.right-rail {
  overflow: hidden auto !important;
}

.game-surface {
  overflow: hidden !important;
}

.board {
  overflow: hidden !important;
}

.play-area {
  grid-template-columns: minmax(210px, clamp(220px, 25%, 300px)) minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.controls-panel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: clamp(6px, 0.7vw, 10px) !important;
}

/* Bloque único de indicadores del turno. */
.live-trackers {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 3px !important;
  padding: 8px !important;
  margin: 0 !important;
  border: 1px solid rgba(69, 211, 139, 0.45) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(69, 211, 139, 0.10), rgba(229, 181, 72, 0.06)),
    rgba(0, 0, 0, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.24) !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

.live-trackers::before {
  display: none !important;
  content: none !important;
}

.live-trackers > div {
  min-height: 30px !important;
  padding: 3px 5px !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.tracker-icon {
  width: 26px !important;
  height: 26px !important;
}

.tracker-info span {
  font-size: 0.45rem !important;
  letter-spacing: 0.02em !important;
}

.tracker-info strong {
  font-size: 0.85rem !important;
}

.hand {
  flex: 1 1 auto !important;
  min-height: clamp(105px, 18dvh, 150px) !important;
  max-height: none !important;
  overflow: auto hidden !important;
}

.player-card-zones,
.action-picker,
.weapon-picker,
.played-row {
  flex: 0 0 auto !important;
}

.player-card-zones {
  height: clamp(76px, 12dvh, 105px) !important;
}

.weapon-picker {
  height: clamp(84px, 13dvh, 110px) !important;
}

.weapon-list {
  height: calc(100% - 28px) !important;
}

.action-picker,
.played-row {
  max-height: clamp(48px, 9dvh, 76px) !important;
  overflow: auto !important;
}

/* Más espacio real para el chat sin romper la columna de recursos. */
.right-rail .chat-panel {
  flex: 0 0 clamp(240px, 34dvh, 380px) !important;
  min-height: 240px !important;
  max-height: 42dvh !important;
}

#chat-log {
  min-height: 0 !important;
}

.right-rail .resources-panel {
  flex: 1 1 auto !important;
  min-height: 180px !important;
}

/* Notebooks y pantallas medianas: compactar laterales para que la zona azul respire. */
@media (max-width: 1366px) {
  :root {
    --sidebar-w: clamp(205px, 16vw, 240px);
    --right-rail-w: clamp(300px, 22vw, 330px);
    --gap: 6px;
  }

  .topbar {
    height: 68px !important;
    padding: 8px 12px !important;
  }

  .top-actions {
    gap: 8px !important;
  }

  .volume-controls {
    gap: 8px !important;
    padding: 4px 8px !important;
  }

  .volume-controls input[type="range"] {
    width: 62px !important;
  }

  .play-area {
    grid-template-columns: minmax(185px, 24%) minmax(0, 1fr) !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, 1fr) !important;
  }
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(270px, 310px) !important;
  }

  .topbar {
    align-items: flex-start !important;
    height: auto !important;
    min-height: 64px !important;
  }

  .top-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .play-area {
    grid-template-columns: minmax(160px, 32%) minmax(0, 1fr) !important;
  }

  .live-trackers {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Tablet y móvil: la zona azul pasa a ancho completo y sin cortes horizontales. */
@media (max-width: 900px) {
  html,
  body {
    overflow: auto !important;
    height: auto !important;
    min-height: 100% !important;
  }

  .app-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
    padding: 8px !important;
  }

  .sidebar,
  .game-surface,
  .right-rail {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .game-surface {
    order: 1 !important;
  }

  .right-rail {
    order: 2 !important;
  }

  .sidebar {
    order: 3 !important;
  }

  .board {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  .table-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .play-area {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  .mansion-panel,
  .controls-panel {
    overflow: visible !important;
  }

  .live-trackers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hand {
    min-height: 122px !important;
    overflow-x: auto !important;
  }

  .player-card-zones {
    height: auto !important;
    min-height: 82px !important;
  }

  .right-rail .chat-panel {
    flex: none !important;
    min-height: 320px !important;
    max-height: none !important;
    height: 42dvh !important;
  }

  .right-rail .resources-panel {
    flex: none !important;
    min-height: 420px !important;
  }
}

@media (max-width: 520px) {
  .app-shell {
    padding: 6px !important;
  }

  .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .top-actions {
    justify-content: flex-start !important;
  }

  .volume-controls {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .volume-controls label {
    flex: 1 1 130px !important;
  }

  .volume-controls input[type="range"] {
    width: 100% !important;
  }

  .table-grid {
    grid-template-columns: 1fr !important;
  }

  .live-trackers {
    grid-template-columns: 1fr 1fr !important;
    padding: 28px 6px 6px !important;
  }

  .tracker-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .tracker-info span {
    display: block !important;
    font-size: 0.42rem !important;
  }

  .right-rail .chat-panel {
    height: 46dvh !important;
    min-height: 300px !important;
  }

  #chat-form {
    flex-wrap: wrap !important;
  }

  #chat-input {
    flex-basis: 100% !important;
  }
}

/* Ajuste final del botón Fin Turno */
#end-turn {
  background: linear-gradient(135deg, #8b0000, #4a0000) !important;
  border: 1px solid #ff3333 !important;
  min-height: 42px !important;
  height: 42px !important;
  margin-top: 5px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
}

#end-turn:hover {
  background: linear-gradient(135deg, #a50000, #5a0000) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2) !important;
}

#end-turn .re-btn-img {
  width: 24px !important;
  height: 24px !important;
}

#end-turn span {
  font-size: 0.75rem !important;
  margin-top: 0 !important;
}

/* Corrección de altura de chat para asegurar visibilidad */
.chat-panel {
  display: flex !important;
  flex-direction: column !important;
  height: clamp(300px, 45dvh, 500px) !important;
  min-height: 300px !important;
}

#chat-log {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* Estilos mejorados para el descarte de la mansión (Última carta) */
.discard-slot {
  width: 100% !important;
  padding: 12px 8px !important;
  background: rgba(0,0,0,0.45) !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  margin-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-height: auto !important;
}

.discard-slot span {
  color: var(--gold) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
}

.discard-slot strong {
  color: #fff !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}

.discard-slot small {
  color: var(--muted) !important;
  font-size: 0.7rem !important;
}

/* ============================================================
   FIX v19 - Mansión completa + móvil horizontal tipo escritorio
   ============================================================ */

/* La carta revelada de Mansión debe verse completa, no recortada. */
.mansion-card.card-face.has-card-image,
#mansion-card.card-face.has-card-image {
  display: grid !important;
  grid-template-areas: "card" !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: visible !important;
  padding: 3px !important;
  aspect-ratio: 5 / 7 !important;
  height: auto !important;
}

#mansion-card.has-card-image .card-art,
.mansion-card.has-card-image .card-art {
  grid-area: card !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  border-radius: 8px !important;
  background: #05070b !important;
}

#mansion-card.has-card-image .card-art img,
.mansion-card.has-card-image .card-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 7px !important;
  background: #05070b !important;
  filter: brightness(1.12) contrast(1.08) !important;
}

#mansion-card.has-card-image .card-copy,
.mansion-card.has-card-image .card-copy {
  display: none !important;
}

/* Móvil horizontal: mantiene una distribución parecida al PC, compacta y sin cortar la carta. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 620px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: clamp(118px, 18vw, 170px) minmax(0, 1fr) clamp(154px, 23vw, 220px) !important;
    grid-template-rows: minmax(0, 100dvh) !important;
    gap: 5px !important;
    padding: 5px !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .sidebar,
  .game-surface,
  .right-rail {
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
  }

  .game-surface {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px 8px !important;
  }

  .topbar h2 { font-size: 0.82rem !important; }
  .topbar p,
  .volume-controls { display: none !important; }

  .board {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .table-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    max-height: 86px !important;
    overflow: hidden !important;
  }

  .play-area {
    display: grid !important;
    grid-template-columns: clamp(118px, 22vw, 170px) minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding: 5px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-row {
    display: grid !important;
    grid-template-rows: minmax(118px, 1fr) auto !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .deck-stack {
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  #mansion-card,
  .mansion-card,
  .deck-card {
    width: min(132px, 88%, 22dvh) !important;
    max-width: 132px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 190px) !important;
    aspect-ratio: 5 / 7 !important;
  }

  .discard-slot {
    margin-top: 0 !important;
    padding: 4px 3px !important;
    min-height: 34px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    font-size: 0.58rem !important;
  }

  .discard-slot span,
  .discard-slot small { font-size: 0.52rem !important; }
  .discard-slot strong { font-size: 0.62rem !important; }

  .mansion-command-zone {
    margin-top: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-command-zone .action-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .turn-command,
  #end-turn {
    min-height: 26px !important;
    height: 26px !important;
    padding: 2px 4px !important;
    font-size: 0.58rem !important;
  }

  .turn-command .re-btn-img,
  #end-turn .re-btn-img {
    width: 16px !important;
    height: 16px !important;
  }

  .controls-panel {
    min-height: 0 !important;
    overflow: hidden auto !important;
    gap: 5px !important;
    padding: 5px !important;
  }

  .right-rail .chat-panel {
    height: clamp(150px, 42dvh, 230px) !important;
    min-height: 0 !important;
  }

  .right-rail .resources-panel {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* ============================================================
   FIX v20 - Carta revelada de Mansión completa en móvil horizontal
   ============================================================
   Soluciona el caso donde la imagen revelada se veía como una franja
   por reglas anteriores que limitaban el tamaño con dvh muy pequeño.
*/

#mansion-card.card-face.has-card-image,
.mansion-card.card-face.has-card-image {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  padding: 4px !important;
  aspect-ratio: 2.5 / 3.5 !important;
  width: clamp(130px, 14vw, 220px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 10px !important;
}

#mansion-card.has-card-image .card-art,
.mansion-card.has-card-image .card-art {
  position: absolute !important;
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background: #05070b !important;
}

#mansion-card.has-card-image .card-art img,
.mansion-card.has-card-image .card-art img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: #05070b !important;
  filter: brightness(1.16) contrast(1.08) !important;
}

#mansion-card.has-card-image .card-copy,
.mansion-card.has-card-image .card-copy {
  display: none !important;
}

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 620px) {
  .mansion-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .mansion-row {
    grid-template-rows: minmax(0, 1fr) auto !important;
    overflow: visible !important;
    align-items: center !important;
  }

  .deck-stack {
    min-height: 0 !important;
    height: 100% !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mansion-card.card-face.has-card-image,
  .mansion-card.card-face.has-card-image {
    width: auto !important;
    height: clamp(150px, 54dvh, 245px) !important;
    max-height: calc(100dvh - 138px) !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }

  #mansion-card.card-face:not(.has-card-image),
  .mansion-card.card-face:not(.has-card-image),
  .deck-card {
    width: auto !important;
    height: clamp(150px, 54dvh, 245px) !important;
    max-height: calc(100dvh - 138px) !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 430px) {
  #mansion-card.card-face.has-card-image,
  .mansion-card.card-face.has-card-image,
  #mansion-card.card-face:not(.has-card-image),
  .mansion-card.card-face:not(.has-card-image),
  .deck-card {
    height: clamp(138px, 52dvh, 205px) !important;
    max-height: calc(100dvh - 130px) !important;
    width: auto !important;
  }
}

/* v23: escritorio mediano y notebook, sin aplastar la mesa central. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1700px) {
  :root {
    --sidebar-w: clamp(218px, 16.5vw, 272px);
    --right-rail-w: clamp(278px, 24vw, 354px);
    --gap: clamp(4px, 0.55vw, 8px);
  }

  .app-shell {
    grid-template-columns: var(--sidebar-w) minmax(520px, 1fr) var(--right-rail-w) !important;
  }

  .play-area {
    grid-template-columns: clamp(180px, 23%, 270px) minmax(0, 1fr) !important;
  }

  .right-rail .chat-panel {
    flex-basis: clamp(190px, 30dvh, 300px) !important;
    min-height: 170px !important;
  }

  .right-rail .resources-panel {
    min-height: 220px !important;
  }
}

@media (orientation: landscape) and (min-width: 901px) and (max-height: 820px) {
  .topbar {
    height: clamp(52px, 9dvh, 68px) !important;
    padding: 6px 10px !important;
  }

  .brand,
  .profile-card,
  .room-panel,
  .table-zone {
    border-radius: 8px !important;
  }

  .hand {
    min-height: clamp(88px, 16dvh, 126px) !important;
  }

  .player-card-zones {
    height: clamp(62px, 11dvh, 88px) !important;
  }
}

/* v23: móvil horizontal con scroll por zonas: juego, chat y recursos. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 620px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 360px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "game rail" !important;
    gap: 5px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  .sidebar {
    display: none !important;
  }

  .game-surface {
    grid-area: game !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .board {
    height: calc(100dvh - 54px) !important;
    min-height: 360px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: clamp(46px, 13dvh, 66px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    display: grid !important;
    grid-template-columns: clamp(132px, 23vw, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .controls-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(70px, 1fr) 42px 44px 38px minmax(0, 28px) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: clamp(42px, 10dvh, 54px) !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .action-row-end #end-turn .re-btn-img {
    width: 20px !important;
    height: 20px !important;
  }

  .turn-timer,
  #turn-timer {
    min-height: 0 !important;
    height: 34px !important;
    padding: 2px 8px !important;
    font-size: 15px !important;
  }

  .right-rail {
    grid-area: rail !important;
    width: auto !important;
    height: 100% !important;
    max-height: calc(100dvh - 10px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(122px, 34dvh, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .right-rail .chat-panel,
  .right-rail .resources-panel {
    width: 100% !important;
    display: flex !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .right-rail .chat-panel {
    height: clamp(150px, 42dvh, 230px) !important;
    min-height: 150px !important;
    flex: none !important;
    padding: 6px !important;
  }

  #chat-log {
    display: block !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px 78px !important;
    gap: 4px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  .right-rail .resources-panel {
    height: auto !important;
    min-height: 360px !important;
    flex: none !important;
  }

  .resource-list,
  #resource-list {
    min-height: 0 !important;
    overflow: auto !important;
  }
}
/* v25 final-final: phone landscape wins after legacy duplicates. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 230px) !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .play-area {
    grid-template-columns: clamp(152px, 28%, 220px) minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .mansion-command-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: 30px 26px !important;
    grid-template-areas:
      "actions end"
      "footer footer" !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  .mansion-command-zone .action-row {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mansion-command-zone .action-row-end {
    grid-area: end !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .turn-command.re-btn-icon,
  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: 30px !important;
    padding: 2px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .turn-command.re-btn-icon span,
  #end-turn span {
    display: none !important;
  }

  .turn-command .re-btn-img,
  .action-row-end #end-turn .re-btn-img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  #end-turn {
    width: 34px !important;
    min-width: 34px !important;
    border-width: 2px !important;
  }

  .turn-footer {
    grid-area: footer !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .turn-footer .status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  .right-rail {
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .right-rail .resources-panel,
  .right-rail .rules-panel,
  #chat-log {
    display: none !important;
  }

  #chat-form {
    grid-template-columns: minmax(0, 1fr) 46px 50px !important;
    gap: 3px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }
}

/* v26 final: captura real celular horizontal, chat y recursos visibles. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) clamp(190px, 23vw, 240px) !important;
    grid-template-areas: "game rail" !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .right-rail {
    display: grid !important;
    grid-template-rows: minmax(118px, 38%) minmax(0, 1fr) !important;
    gap: 3px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.offline-mode .right-rail .chat-panel,
  .right-rail .chat-panel,
  .right-rail .resources-panel {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 5px !important;
  }

  .right-rail .chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .right-rail .resources-panel {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .right-rail .rules-panel {
    display: none !important;
  }

  #chat-log {
    display: block !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 50px !important;
    gap: 3px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .resource-types {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
  }

  .resource-types button {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .resource-grid,
  #resource-area {
    min-height: 0 !important;
    overflow: hidden auto !important;
  }

  .play-area {
    grid-template-columns: clamp(150px, 24%, 186px) minmax(0, 1fr) !important;
  }

  .mansion-row,
  .deck-stack {
    display: grid !important;
    place-items: center !important;
  }

  #mansion-card.card-face,
  .mansion-card.card-face,
  .deck-card {
    width: clamp(82px, 10.5vw, 98px) !important;
    height: auto !important;
    max-height: clamp(114px, 27dvh, 146px) !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .live-trackers > div,
  .tracker {
    min-height: 28px !important;
    padding: 2px 3px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .tracker-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .tracker-info {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tracker-info span {
    display: none !important;
  }

  .tracker-info strong {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #hand.hand,
  .hand {
    grid-template-columns: repeat(5, minmax(60px, 1fr)) !important;
    gap: 4px !important;
  }

  .hand .card-face {
    min-height: 74px !important;
    max-height: 86px !important;
    padding: 3px !important;
  }

  .hand .card-art {
    min-height: 42px !important;
  }

  .hand .inspect-btn {
    top: 1px !important;
    right: 1px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }
}

/* v26: ajustes segun captura real de celular horizontal. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) clamp(190px, 23vw, 240px) !important;
    grid-template-areas: "game rail" !important;
  }

  .right-rail {
    display: grid !important;
    grid-template-rows: minmax(120px, 38%) minmax(0, 1fr) !important;
    gap: 3px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .right-rail .chat-panel,
  .right-rail .resources-panel {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 5px !important;
  }

  .right-rail .chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .right-rail .resources-panel {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .right-rail .rules-panel {
    display: none !important;
  }

  #chat-log {
    display: block !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 50px !important;
    gap: 3px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .resources-panel .section-title,
  .chat-panel .section-title {
    margin-bottom: 3px !important;
  }

  .resource-groups {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
    overflow: visible !important;
  }

  .resource-filter {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .resource-list,
  #resource-list {
    min-height: 0 !important;
    overflow: hidden auto !important;
  }

  .play-area {
    grid-template-columns: clamp(150px, 24%, 186px) minmax(0, 1fr) !important;
  }

  .mansion-panel {
    align-content: stretch !important;
  }

  .mansion-row {
    place-items: center !important;
  }

  .deck-stack {
    display: grid !important;
    place-items: center !important;
  }

  #mansion-card.card-face,
  .mansion-card.card-face,
  .deck-card {
    width: clamp(82px, 10.5vw, 98px) !important;
    height: auto !important;
    max-height: clamp(114px, 27dvh, 146px) !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .live-trackers > div,
  .tracker {
    min-height: 28px !important;
    padding: 2px 3px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
  }

  .tracker-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .tracker-info {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tracker-info span {
    display: none !important;
  }

  .tracker-info strong {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #hand.hand,
  .hand {
    grid-template-columns: repeat(5, minmax(60px, 1fr)) !important;
    gap: 4px !important;
    align-content: stretch !important;
  }

  .hand .card-face {
    min-height: 74px !important;
    max-height: 86px !important;
    padding: 3px !important;
  }

  .hand .card-art {
    min-height: 42px !important;
  }

  .hand .inspect-btn {
    top: 1px !important;
    right: 1px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    padding: 0 !important;
    font-size: 7px !important;
    line-height: 14px !important;
  }
}

/* v25 final override: celular horizontal. Mas mesa visible y boton fin de turno compacto. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 620px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(172px, 22vw, 220px) !important;
    grid-template-rows: minmax(0, 1fr) clamp(54px, 15dvh, 76px) !important;
    grid-template-areas:
      "game side"
      "game rail" !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .game-surface {
    grid-area: game !important;
    height: 100% !important;
    max-height: calc(100dvh - 6px) !important;
    display: grid !important;
    grid-template-rows: clamp(28px, 8dvh, 34px) minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .sidebar {
    grid-area: side !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .brand,
  .profile-card,
  .online-panel,
  .sidebar .history-actions {
    display: none !important;
  }

  .room-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 5px !important;
    gap: 4px !important;
    overflow: hidden auto !important;
  }

  .right-rail {
    grid-area: rail !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .right-rail .resources-panel,
  .right-rail .rules-panel,
  #chat-log {
    display: none !important;
  }

  .right-rail .chat-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 50px !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  #chat-input,
  #chat-form button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .topbar {
    height: 100% !important;
    min-height: 0 !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar .room-title {
    font-size: clamp(13px, 2.2vw, 18px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .board {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(42px, 13dvh, 58px) minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .table-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .player-card,
  .player-slot-empty {
    min-height: 0 !important;
    height: 100% !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(152px, 28%, 220px) minmax(0, 1fr) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .mansion-row,
  .deck-stack {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  #mansion-card.card-face,
  .mansion-card.card-face,
  .deck-card {
    width: auto !important;
    height: min(100%, calc(100dvh - 118px)) !important;
    max-height: calc(100dvh - 118px) !important;
    max-width: 100% !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }

  .mansion-command-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: 30px 26px !important;
    grid-template-areas:
      "actions end"
      "footer footer" !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  .mansion-command-zone .action-row {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mansion-command-zone .action-row-end {
    grid-area: end !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .turn-command.re-btn-icon,
  #end-turn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .turn-command.re-btn-icon span,
  #end-turn span {
    display: none !important;
  }

  .turn-command .re-btn-img,
  #end-turn .re-btn-img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  #end-turn {
    width: 34px !important;
    min-width: 34px !important;
    border-width: 2px !important;
  }

  .turn-footer {
    grid-area: footer !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .turn-footer .status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  #turn-timer {
    height: 24px !important;
    min-height: 24px !important;
    min-width: 52px !important;
    padding: 0 5px !important;
    font-size: 13px !important;
  }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 430px) {
  .game-surface {
    grid-template-rows: 30px minmax(0, 1fr) !important;
  }

  .board {
    height: calc(100dvh - 46px) !important;
    min-height: 330px !important;
  }

  .play-area {
    grid-template-columns: 124px minmax(0, 1fr) !important;
  }

  .action-row-end #end-turn,
  #end-turn {
    height: 38px !important;
    font-size: 11px !important;
  }

  .turn-timer,
  #turn-timer {
    height: 30px !important;
  }

  .right-rail .chat-panel {
    height: 160px !important;
    min-height: 160px !important;
  }

  .right-rail .resources-panel {
    min-height: 330px !important;
  }
}

/* v24 real final: dos columnas en movil/tablet horizontal. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 230px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "game rail" !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .sidebar {
    display: none !important;
  }

  .game-surface {
    grid-area: game !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-rows: clamp(30px, 8dvh, 44px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar h2,
  .topbar .room-title {
    font-size: clamp(15px, 2.4vw, 22px) !important;
    line-height: 1 !important;
  }

  .top-actions,
  .topbar .topbar-controls,
  .topbar .audio-controls {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .volume-controls {
    display: none !important;
  }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .board {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(48px, 14dvh, 78px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .table-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(152px, 28%, 220px) minmax(0, 1fr) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .mansion-panel,
  .controls-panel {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 5px !important;
  }

  .mansion-row {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .discard-slot,
  .mansion-helper,
  .mansion-panel .section-note {
    display: none !important;
  }

  .controls-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(64px, 1fr) 38px 38px 32px minmax(0, 24px) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
  }

  #hand.hand,
  .hand {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    overflow: hidden auto !important;
  }

  .hand .card-face {
    height: 100% !important;
    max-height: 62px !important;
  }

  .player-card-zones {
    height: 38px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-command-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: 30px 26px !important;
    grid-template-areas:
      "actions end"
      "footer footer" !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  .mansion-command-zone .action-row {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mansion-command-zone .action-row-end {
    grid-area: end !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .turn-command.re-btn-icon,
  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: 30px !important;
    padding: 2px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .turn-command.re-btn-icon span,
  #end-turn span {
    display: none !important;
  }

  .turn-command .re-btn-img,
  .action-row-end #end-turn .re-btn-img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  #end-turn {
    width: 34px !important;
    min-width: 34px !important;
    border-width: 2px !important;
  }

  .turn-footer {
    grid-area: footer !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .turn-footer .status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  .right-rail {
    grid-area: rail !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .right-rail .resources-panel {
    display: none !important;
  }

  .right-rail .rules-panel {
    display: none !important;
  }

  .right-rail .chat-panel {
    height: 100% !important;
    flex: none !important;
    padding: 5px !important;
  }

  #chat-log {
    display: none !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 50px !important;
    gap: 3px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .resource-groups,
  .resource-list,
  #resource-list {
    min-height: 0 !important;
    overflow: auto !important;
  }
}

/* v24 final cascade: esta regla va al final para ganar en celular/tablet horizontal. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 360px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "game rail" !important;
    gap: 5px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  .sidebar {
    display: none !important;
  }

  .game-surface {
    grid-area: game !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-rows: clamp(30px, 8dvh, 44px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar h2,
  .topbar .room-title {
    font-size: clamp(15px, 2.4vw, 22px) !important;
    line-height: 1 !important;
  }

  .top-actions,
  .topbar .topbar-controls,
  .topbar .audio-controls {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .volume-controls {
    display: none !important;
  }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .board {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(48px, 14dvh, 78px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .table-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .player-card,
  .player-slot-empty {
    min-height: 0 !important;
    height: 100% !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(118px, 22vw, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .mansion-panel,
  .controls-panel {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 5px !important;
  }

  .mansion-row {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .discard-slot,
  .mansion-helper,
  .mansion-panel .section-note {
    display: none !important;
  }

  .controls-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(64px, 1fr) 38px 38px 32px minmax(0, 24px) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
  }

  #hand.hand,
  .hand {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    overflow: hidden auto !important;
  }

  .hand .card-face {
    height: 100% !important;
    max-height: 62px !important;
  }

  .player-card-zones,
  .action-card-list,
  .weapon-list,
  .played-cards {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .player-card-zones {
    height: 38px !important;
  }

  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: clamp(34px, 9dvh, 44px) !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .action-row-end #end-turn .re-btn-img {
    width: 18px !important;
    height: 18px !important;
  }

  .right-rail {
    grid-area: rail !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(122px, 34dvh, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .right-rail .chat-panel,
  .right-rail .resources-panel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    overflow: hidden !important;
  }

  .right-rail .rules-panel {
    display: none !important;
  }

  .right-rail .chat-panel {
    height: 100% !important;
    flex: none !important;
    padding: 5px !important;
  }

  #chat-log {
    display: block !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 62px !important;
    gap: 4px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  .right-rail .resources-panel {
    height: 100% !important;
    flex: none !important;
  }

  .resource-groups,
  .resource-list,
  #resource-list {
    min-height: 0 !important;
    overflow: auto !important;
  }
}

/* v24: distribucion final para movil/tablet horizontal.
   Mesa grande a la izquierda; chat y recursos visibles a la derecha; panel social oculto. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 360px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "game rail" !important;
    gap: 5px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  .sidebar {
    display: none !important;
  }

  .game-surface {
    grid-area: game !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-rows: clamp(30px, 8dvh, 44px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar h2,
  .topbar .room-title {
    font-size: clamp(15px, 2.4vw, 22px) !important;
    line-height: 1 !important;
  }

  .top-actions,
  .topbar .topbar-controls,
  .topbar .audio-controls {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .volume-controls {
    display: none !important;
  }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .board {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(48px, 14dvh, 78px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .table-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .player-card,
  .player-slot-empty {
    min-height: 0 !important;
    height: 100% !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(118px, 22vw, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .mansion-panel,
  .controls-panel {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 5px !important;
  }

  .mansion-row {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .discard-slot,
  .mansion-helper,
  .mansion-panel .section-note {
    display: none !important;
  }

  .controls-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(64px, 1fr) 38px 38px 32px minmax(0, 24px) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
  }

  #hand.hand,
  .hand {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    overflow: hidden auto !important;
  }

  .hand .card-face {
    height: 100% !important;
    max-height: 62px !important;
  }

  .player-card-zones,
  .action-card-list,
  .weapon-list,
  .played-cards {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .player-card-zones {
    height: 38px !important;
  }

  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: clamp(34px, 9dvh, 44px) !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .action-row-end #end-turn .re-btn-img {
    width: 18px !important;
    height: 18px !important;
  }

  .right-rail {
    grid-area: rail !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-rows: clamp(122px, 34dvh, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .right-rail .chat-panel,
  .right-rail .resources-panel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    overflow: hidden !important;
  }

  .right-rail .rules-panel {
    display: none !important;
  }

  .right-rail .chat-panel {
    height: 100% !important;
    flex: none !important;
    padding: 5px !important;
  }

  #chat-log {
    display: block !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 62px !important;
    gap: 4px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  .right-rail .resources-panel {
    height: 100% !important;
    flex: none !important;
  }

  .resource-groups,
  .resource-list,
  #resource-list {
    min-height: 0 !important;
    overflow: auto !important;
  }
}

/* Mobile landscape: keep the playable table as the main viewport. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 620px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(210px, 30vw, 292px) !important;
    grid-template-rows: minmax(0, 1fr) clamp(82px, 22dvh, 112px) !important;
    grid-template-areas:
      "game side"
      "game rail" !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .game-surface {
    grid-area: game !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 8px) !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    min-height: 0 !important;
    height: 34px !important;
    padding: 3px 8px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar .room-title {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  .topbar .topbar-controls,
  .topbar .audio-controls {
    gap: 4px !important;
  }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .board {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: clamp(42px, 13dvh, 62px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .table-grid {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 62px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .player-card,
  .player-slot-empty {
    min-height: 0 !important;
    height: 100% !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .player-card .card-thumb,
  .player-card .avatar-card {
    width: 34px !important;
    height: 48px !important;
  }

  .play-area {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: clamp(132px, 24%, 190px) minmax(0, 1fr) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .mansion-panel,
  .controls-panel {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 5px !important;
  }

  .mansion-row {
    min-height: 0 !important;
    height: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .deck-stack {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #mansion-card.card-face,
  .mansion-card.card-face,
  .deck-card {
    width: auto !important;
    height: min(100%, calc(100dvh - 142px)) !important;
    max-height: calc(100dvh - 142px) !important;
    aspect-ratio: 2.5 / 3.5 !important;
  }

  .discard-slot,
  .mansion-helper,
  .mansion-panel .section-note {
    display: none !important;
  }

  .controls-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(70px, 1fr) 42px 44px 38px minmax(0, 28px) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  .tracker {
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 3px !important;
  }

  #hand.hand,
  .hand {
    min-height: 0 !important;
    height: 100% !important;
    grid-template-columns: repeat(5, minmax(52px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: 4px !important;
    display: grid !important;
    overflow: hidden auto !important;
  }

  .hand .card-face {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 72px !important;
  }

  .player-card-zones,
  .action-card-list,
  .weapon-list,
  .played-cards {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .player-card-zones {
    height: 42px !important;
  }

  .action-card-list,
  .weapon-list,
  .played-cards {
    max-height: 24px !important;
  }

  .sidebar {
    grid-area: side !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .brand {
    min-height: 0 !important;
    padding: 5px !important;
  }

  .profile-card {
    min-height: 0 !important;
    padding: 5px !important;
  }

  .profile-stats,
  .online-panel,
  .sidebar .history-actions {
    display: none !important;
  }

  .room-panel {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto !important;
    gap: 5px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  .invite-list {
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }

  .right-rail {
    grid-area: rail !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .right-rail .resources-panel,
  .right-rail .rules-panel {
    display: none !important;
  }

  .right-rail .chat-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 3px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  #chat-log {
    display: none !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 62px !important;
    gap: 3px !important;
    margin-top: 0 !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
  }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 430px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) 190px !important;
    grid-template-rows: minmax(0, 1fr) 76px !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .game-surface {
    grid-template-rows: 30px minmax(0, 1fr) !important;
  }

  .brand {
    display: none !important;
  }

  .sidebar {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .profile-card {
    padding: 4px !important;
  }

  .profile-card .profile-meta,
  .profile-card .profile-actions {
    display: none !important;
  }

  .room-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto !important;
    padding: 5px !important;
  }

  .room-panel label,
  .room-panel .panel-note,
  .room-panel .room-status {
    display: none !important;
  }

  .play-area {
    grid-template-columns: 124px minmax(0, 1fr) !important;
  }

  .controls-panel {
    grid-template-rows: auto auto minmax(58px, 1fr) 34px 36px 30px minmax(0, 22px) !important;
  }

  #hand.hand,
  .hand {
    grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  .hand .card-face {
    max-height: 58px !important;
  }

  #chat-form {
    grid-template-columns: minmax(0, 1fr) 48px 52px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
  }
}

/* v24 real final: dos columnas en movil/tablet horizontal. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 32vw, 360px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "game rail" !important;
    gap: 5px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  .sidebar { display: none !important; }

  .game-surface {
    grid-area: game !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-rows: clamp(30px, 8dvh, 44px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 8px !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .topbar h1,
  .topbar h2,
  .topbar .room-title {
    font-size: clamp(15px, 2.4vw, 22px) !important;
    line-height: 1 !important;
  }

  .top-actions,
  .topbar .topbar-controls,
  .topbar .audio-controls {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .volume-controls { display: none !important; }

  .topbar button,
  .topbar .pill,
  .topbar .turn-pill {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .board {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: clamp(48px, 14dvh, 78px) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .table-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .play-area {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(118px, 22vw, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .mansion-panel,
  .controls-panel {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mansion-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 5px !important;
  }

  .mansion-row {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .discard-slot,
  .mansion-helper,
  .mansion-panel .section-note { display: none !important; }

  .controls-panel {
    display: grid !important;
    grid-template-rows: auto auto minmax(64px, 1fr) 38px 38px 32px minmax(0, 24px) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  .live-trackers {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 4px !important;
  }

  #hand.hand,
  .hand {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    overflow: hidden auto !important;
  }

  .hand .card-face {
    height: 100% !important;
    max-height: 62px !important;
  }

  .player-card-zones {
    height: 38px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: clamp(34px, 9dvh, 44px) !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .action-row-end #end-turn .re-btn-img {
    width: 18px !important;
    height: 18px !important;
  }

  .right-rail {
    grid-area: rail !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(122px, 34dvh, 190px) minmax(0, 1fr) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .right-rail .chat-panel,
  .right-rail .resources-panel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    overflow: hidden !important;
  }

  .right-rail .rules-panel { display: none !important; }

  .right-rail .chat-panel {
    height: 100% !important;
    flex: none !important;
    padding: 5px !important;
  }

  #chat-log {
    display: block !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #chat-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 62px !important;
    gap: 4px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  .right-rail .resources-panel {
    height: 100% !important;
    flex: none !important;
  }

  .resource-groups,
  .resource-list,
  #resource-list {
    min-height: 0 !important;
    overflow: auto !important;
  }
}

/* v25 final-final: phone landscape wins after legacy duplicates. */
@media (orientation: landscape) and (max-width: 1180px) and (max-height: 820px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 230px) !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .play-area {
    grid-template-columns: clamp(152px, 28%, 220px) minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .mansion-command-zone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: 30px 26px !important;
    grid-template-areas:
      "actions end"
      "footer footer" !important;
    gap: 3px !important;
    min-height: 0 !important;
  }

  .mansion-command-zone .action-row {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mansion-command-zone .action-row-end {
    grid-area: end !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .turn-command.re-btn-icon,
  .action-row-end #end-turn,
  #end-turn {
    min-height: 0 !important;
    height: 30px !important;
    padding: 2px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .turn-command.re-btn-icon span,
  #end-turn span {
    display: none !important;
  }

  .turn-command .re-btn-img,
  .action-row-end #end-turn .re-btn-img {
    width: 20px !important;
    height: 20px !important;
    margin: 0 auto !important;
  }

  #end-turn {
    width: 34px !important;
    min-width: 34px !important;
    border-width: 2px !important;
  }

  .turn-footer {
    grid-area: footer !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .turn-footer .status {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  .right-rail {
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  .right-rail .resources-panel,
  .right-rail .rules-panel,
  #chat-log {
    display: none !important;
  }

  #chat-form {
    grid-template-columns: minmax(0, 1fr) 46px 50px !important;
    gap: 3px !important;
  }

  #chat-input,
  #chat-form button {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }
}


/* =========================================================
   MODO PANTALLA COMPLETA DEL JUEGO
   Oculta solo el panel izquierdo de cuenta/sala y mantiene
   visible el tablero + chat/recursos como en la referencia.
   ========================================================= */
.fullscreen-toggle {
  background: linear-gradient(135deg, #38d88d, #2ac979) !important;
  border: 1px solid rgba(84, 255, 177, 0.45) !important;
  color: #06120c !important;
  box-shadow: 0 10px 26px rgba(42, 201, 121, 0.18) !important;
}

body.focus-mode {
  overflow: hidden !important;
}

body.focus-mode .sidebar {
  display: none !important;
}

body.focus-mode .app-shell {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px) !important;
  grid-template-rows: minmax(0, 100vh) !important;
  grid-template-areas: "game rail" !important;
  gap: 10px !important;
  padding: 4px !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

body.focus-mode .game-surface {
  grid-area: game !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.focus-mode .right-rail {
  grid-area: rail !important;
  display: grid !important;
  grid-template-rows: minmax(270px, 38vh) minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: calc(100vh - 8px) !important;
  overflow: hidden !important;
}

body.focus-mode .right-rail .chat-panel,
body.focus-mode .right-rail .resources-panel {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.focus-mode .right-rail .rules-panel {
  display: none !important;
}

body.focus-mode #chat-log {
  display: block !important;
  min-height: 0 !important;
  overflow: auto !important;
}

body.focus-mode .play-area {
  grid-template-columns: clamp(250px, 26%, 340px) minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

body.focus-mode .table-grid {
  grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

body.focus-mode .topbar {
  height: 80px !important;
  min-height: 80px !important;
  padding: 10px 18px !important;
}

body.focus-mode .top-actions {
  gap: 12px !important;
}

body.focus-mode .hand-zone {
  min-height: 310px !important;
}

body.focus-mode .card-list,
body.focus-mode #hand-cards {
  align-content: flex-start !important;
  gap: 12px !important;
}

@media (max-width: 1180px) {
  body.focus-mode .app-shell {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 300px) !important;
    gap: 6px !important;
    padding: 3px !important;
  }

  body.focus-mode .play-area {
    grid-template-columns: clamp(210px, 27%, 290px) minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.focus-mode .table-grid {
    grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(160px, 1fr)) !important;
    gap: 6px !important;
  }

  body.focus-mode .right-rail {
    grid-template-rows: minmax(230px, 36vh) minmax(0, 1fr) !important;
    gap: 6px !important;
  }
}

/* === Ajuste final: cartas de la mano más grandes y nítidas === */
.hand,
#hand.hand,
.card-list#hand-cards,
#hand-cards {
  min-height: clamp(220px, 32vh, 360px) !important;
  padding: clamp(14px, 1.4vw, 22px) !important;
  gap: clamp(14px, 1.35vw, 22px) !important;
  align-items: center !important;
  align-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.hand .card,
#hand.hand .card,
#hand-cards .card {
  flex: 0 0 clamp(140px, 9.2vw, 180px) !important;
  width: clamp(140px, 9.2vw, 180px) !important;
  height: auto !important;
  aspect-ratio: 2.5 / 3.5 !important;
  min-height: 0 !important;
  border-radius: 14px !important;
}

.hand .card-face,
#hand.hand .card-face,
#hand-cards .card-face,
.hand .card.card-face,
#hand.hand .card.card-face,
#hand-cards .card.card-face {
  width: clamp(140px, 9.2vw, 180px) !important;
  height: auto !important;
  aspect-ratio: 2.5 / 3.5 !important;
  grid-template-rows: 56% 44% !important;
  padding: 7px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  image-rendering: auto !important;
}

.hand .card-art,
#hand-cards .card-art {
  min-height: 0 !important;
  border-radius: 10px !important;
  image-rendering: auto !important;
}

.hand .card-art img,
#hand-cards .card-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.hand .card-copy,
#hand-cards .card-copy {
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  min-height: 0 !important;
  padding: 2px 2px 4px !important;
}

.hand .card-copy small,
#hand-cards .card-copy small {
  font-size: clamp(0.62rem, 0.56vw, 0.78rem) !important;
  line-height: 1.05 !important;
}

.hand .card-copy strong,
#hand-cards .card-copy strong {
  font-size: clamp(0.82rem, 0.75vw, 1.02rem) !important;
  line-height: 1.08 !important;
}

.hand .card-copy span,
#hand-cards .card-copy span {
  font-size: clamp(0.66rem, 0.62vw, 0.82rem) !important;
  line-height: 1.12 !important;
}

.hand .inspect-btn,
#hand-cards .inspect-btn {
  width: clamp(26px, 1.8vw, 34px) !important;
  height: clamp(26px, 1.8vw, 34px) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.95rem) !important;
  top: 5px !important;
  right: 5px !important;
}

body.focus-mode .hand-zone {
  min-height: clamp(420px, 54vh, 620px) !important;
}

body.focus-mode .hand,
body.focus-mode #hand.hand,
body.focus-mode #hand-cards {
  min-height: clamp(280px, 38vh, 460px) !important;
  padding: clamp(20px, 1.8vw, 30px) !important;
  gap: clamp(18px, 1.5vw, 26px) !important;
}

body.focus-mode .hand .card,
body.focus-mode #hand.hand .card,
body.focus-mode #hand-cards .card,
body.focus-mode .hand .card-face,
body.focus-mode #hand.hand .card-face,
body.focus-mode #hand-cards .card-face,
body.focus-mode .hand .card.card-face,
body.focus-mode #hand.hand .card.card-face,
body.focus-mode #hand-cards .card.card-face {
  flex-basis: clamp(155px, 10.5vw, 205px) !important;
  width: clamp(155px, 10.5vw, 205px) !important;
  max-width: none !important;
}

@media (max-width: 1180px) {
  .hand .card,
  #hand.hand .card,
  #hand-cards .card,
  .hand .card-face,
  #hand.hand .card-face,
  #hand-cards .card-face,
  .hand .card.card-face,
  #hand.hand .card.card-face,
  #hand-cards .card.card-face,
  body.focus-mode .hand .card,
  body.focus-mode #hand.hand .card,
  body.focus-mode #hand-cards .card,
  body.focus-mode .hand .card-face,
  body.focus-mode #hand.hand .card-face,
  body.focus-mode #hand-cards .card-face {
    flex-basis: clamp(118px, 13.5vw, 155px) !important;
    width: clamp(118px, 13.5vw, 155px) !important;
  }

  .hand,
  #hand.hand,
  #hand-cards,
  body.focus-mode .hand,
  body.focus-mode #hand.hand,
  body.focus-mode #hand-cards {
    min-height: clamp(210px, 36vh, 330px) !important;
    padding: 12px !important;
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  .hand .card,
  #hand.hand .card,
  #hand-cards .card,
  .hand .card-face,
  #hand.hand .card-face,
  #hand-cards .card-face,
  .hand .card.card-face,
  #hand.hand .card.card-face,
  #hand-cards .card.card-face {
    flex-basis: 126px !important;
    width: 126px !important;
  }
}

/* === Ajuste v30: texto de cartas de mano más compacto === */
#hand-cards .card-face,
#hand-cards .card.card-face,
#hand.hand .card-face,
#hand.hand .card.card-face,
.hand .card-face,
.hand .card.card-face {
  grid-template-rows: 64% 36% !important;
  padding: 6px !important;
  gap: 4px !important;
}

#hand-cards .card-art img,
#hand.hand .card-art img,
.hand .card-art img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #05070a !important;
}

#hand-cards .card-copy,
#hand.hand .card-copy,
.hand .card-copy {
  gap: 1px !important;
  padding: 1px 2px 2px !important;
  align-content: start !important;
  overflow: hidden !important;
}

#hand-cards .card-copy small,
#hand.hand .card-copy small,
.hand .card-copy small {
  font-size: clamp(0.48rem, 0.42vw, 0.60rem) !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
}

#hand-cards .card-copy strong,
#hand.hand .card-copy strong,
.hand .card-copy strong {
  font-size: clamp(0.62rem, 0.56vw, 0.78rem) !important;
  line-height: 1.03 !important;
  margin: 0 !important;
  white-space: normal !important;
}

#hand-cards .card-copy span,
#hand.hand .card-copy span,
.hand .card-copy span {
  font-size: clamp(0.50rem, 0.46vw, 0.64rem) !important;
  line-height: 1.06 !important;
  margin: 0 !important;
}

#hand-cards .card-copy span:nth-of-type(n+2),
#hand.hand .card-copy span:nth-of-type(n+2),
.hand .card-copy span:nth-of-type(n+2) {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.focus-mode #hand-cards .card-face,
body.focus-mode #hand-cards .card.card-face,
body.focus-mode #hand.hand .card-face,
body.focus-mode .hand .card-face {
  grid-template-rows: 65% 35% !important;
}

body.focus-mode #hand-cards .card-copy small,
body.focus-mode #hand.hand .card-copy small,
body.focus-mode .hand .card-copy small {
  font-size: clamp(0.50rem, 0.44vw, 0.62rem) !important;
}

body.focus-mode #hand-cards .card-copy strong,
body.focus-mode #hand.hand .card-copy strong,
body.focus-mode .hand .card-copy strong {
  font-size: clamp(0.64rem, 0.58vw, 0.80rem) !important;
}

body.focus-mode #hand-cards .card-copy span,
body.focus-mode #hand.hand .card-copy span,
body.focus-mode .hand .card-copy span {
  font-size: clamp(0.52rem, 0.48vw, 0.66rem) !important;
}

/* === Ajuste v31: usar todo el espacio marcado en rojo del área de la mano === */
.player-board #hand.hand,
#hand.hand,
.hand#hand {
  min-height: clamp(300px, 36vh, 390px) !important;
  padding: clamp(10px, 1vw, 16px) !important;
  gap: clamp(14px, 1.1vw, 20px) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
}

#hand.hand > .card.card-face,
#hand.hand > button.card.card-face,
.hand#hand > .card.card-face,
.hand#hand > button.card.card-face {
  flex: 0 0 clamp(205px, 13.2vw, 250px) !important;
  width: clamp(205px, 13.2vw, 250px) !important;
  height: clamp(285px, 34vh, 350px) !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  padding: clamp(8px, .7vw, 12px) !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 68%) minmax(86px, 32%) !important;
  gap: 7px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

#hand.hand > .card.card-face .card-art,
#hand.hand > button.card.card-face .card-art,
.hand#hand > .card.card-face .card-art,
.hand#hand > button.card.card-face .card-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #05070a !important;
}

#hand.hand > .card.card-face .card-art img,
#hand.hand > button.card.card-face .card-art img,
.hand#hand > .card.card-face .card-art img,
.hand#hand > button.card.card-face .card-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
}

#hand.hand > .card.card-face .card-copy,
#hand.hand > button.card.card-face .card-copy,
.hand#hand > .card.card-face .card-copy,
.hand#hand > button.card.card-face .card-copy {
  min-height: 0 !important;
  padding: 2px 4px 3px !important;
  gap: 2px !important;
  align-content: center !important;
  overflow: hidden !important;
}

#hand.hand > .card.card-face .card-copy small,
#hand.hand > button.card.card-face .card-copy small,
.hand#hand > .card.card-face .card-copy small,
.hand#hand > button.card.card-face .card-copy small {
  font-size: clamp(.58rem, .48vw, .72rem) !important;
  line-height: 1 !important;
}

#hand.hand > .card.card-face .card-copy strong,
#hand.hand > button.card.card-face .card-copy strong,
.hand#hand > .card.card-face .card-copy strong,
.hand#hand > button.card.card-face .card-copy strong {
  font-size: clamp(.90rem, .82vw, 1.12rem) !important;
  line-height: 1.04 !important;
}

#hand.hand > .card.card-face .card-copy span,
#hand.hand > button.card.card-face .card-copy span,
.hand#hand > .card.card-face .card-copy span,
.hand#hand > button.card.card-face .card-copy span {
  font-size: clamp(.68rem, .58vw, .82rem) !important;
  line-height: 1.1 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#hand.hand > .card.card-face .inspect-btn,
#hand.hand > button.card.card-face .inspect-btn,
.hand#hand > .card.card-face .inspect-btn,
.hand#hand > button.card.card-face .inspect-btn {
  width: clamp(30px, 2.2vw, 40px) !important;
  height: clamp(30px, 2.2vw, 40px) !important;
  top: 8px !important;
  right: 8px !important;
  font-size: clamp(.78rem, .85vw, 1rem) !important;
}

@media (max-width: 1180px) {
  .player-board #hand.hand,
  #hand.hand,
  .hand#hand {
    min-height: clamp(260px, 39vh, 340px) !important;
    padding: 10px !important;
    gap: 12px !important;
  }

  #hand.hand > .card.card-face,
  #hand.hand > button.card.card-face,
  .hand#hand > .card.card-face,
  .hand#hand > button.card.card-face {
    flex-basis: clamp(165px, 21vw, 220px) !important;
    width: clamp(165px, 21vw, 220px) !important;
    height: clamp(235px, 36vh, 310px) !important;
  }
}

/* === Ajuste v32: imagen de carta arriba + texto hasta el máximo del área asignada === */
#hand-cards,
#hand.hand,
.hand {
  min-height: clamp(250px, 37vh, 420px) !important;
  padding: clamp(12px, 1.2vw, 18px) !important;
  align-items: stretch !important;
}

#hand-cards .card,
#hand.hand .card,
.hand .card,
#hand-cards .card-face,
#hand.hand .card-face,
.hand .card-face,
#hand-cards .card.card-face,
#hand.hand .card.card-face,
.hand .card.card-face {
  flex: 0 0 clamp(158px, 11.2vw, 210px) !important;
  width: clamp(158px, 11.2vw, 210px) !important;
  height: clamp(255px, 30vh, 355px) !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  display: grid !important;
  grid-template-rows: minmax(0, 72%) minmax(58px, 28%) !important;
  gap: 5px !important;
  padding: 8px !important;
  overflow: hidden !important;
}

#hand-cards .card-art,
#hand.hand .card-art,
.hand .card-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  background: #05070a !important;
}

#hand-cards .card-art img,
#hand.hand .card-art img,
.hand .card-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

#hand-cards .card-copy,
#hand.hand .card-copy,
.hand .card-copy {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  padding: 2px 4px 4px !important;
  overflow: hidden !important;
}

#hand-cards .card-copy small,
#hand.hand .card-copy small,
.hand .card-copy small {
  font-size: clamp(0.55rem, 0.48vw, 0.72rem) !important;
  line-height: 1.02 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#hand-cards .card-copy strong,
#hand.hand .card-copy strong,
.hand .card-copy strong {
  font-size: clamp(0.88rem, 0.86vw, 1.16rem) !important;
  line-height: 1.04 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

#hand-cards .card-copy span,
#hand.hand .card-copy span,
.hand .card-copy span {
  font-size: clamp(0.62rem, 0.58vw, 0.82rem) !important;
  line-height: 1.08 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body.focus-mode #hand-cards .card,
body.focus-mode #hand.hand .card,
body.focus-mode .hand .card,
body.focus-mode #hand-cards .card-face,
body.focus-mode #hand.hand .card-face,
body.focus-mode .hand .card-face,
body.focus-mode #hand-cards .card.card-face,
body.focus-mode #hand.hand .card.card-face,
body.focus-mode .hand .card.card-face {
  flex-basis: clamp(175px, 12.2vw, 230px) !important;
  width: clamp(175px, 12.2vw, 230px) !important;
  height: clamp(285px, 34vh, 385px) !important;
}

@media (max-width: 1180px) {
  #hand-cards .card,
  #hand.hand .card,
  .hand .card,
  #hand-cards .card-face,
  #hand.hand .card-face,
  .hand .card-face,
  #hand-cards .card.card-face,
  #hand.hand .card.card-face,
  .hand .card.card-face {
    flex-basis: clamp(145px, 15.5vw, 175px) !important;
    width: clamp(145px, 15.5vw, 175px) !important;
    height: clamp(235px, 31vh, 300px) !important;
  }
}

/* ============================================================
   V33 - INDICADORES DE MANO MAS GRANDES Y COMPACTOS
   - Indicadores del jugador ampliados para mejor lectura.
   - Iconos proporcionados al tamaño del indicador.
   - Elementos juntos, alineados y sin separarse.
   ============================================================ */
.controls-panel .live-trackers {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(82px, 1fr)) !important;
  gap: 6px !important;
  margin: 4px 0 10px !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(69, 211, 139, 0.32) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(13, 43, 31, 0.72), rgba(5, 17, 14, 0.88)) !important;
  box-shadow: inset 0 0 0 1px rgba(229, 181, 72, 0.08), 0 8px 18px rgba(0,0,0,0.22) !important;
}

.controls-panel .live-trackers > div {
  min-height: 50px !important;
  height: 50px !important;
  padding: 5px 7px !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  background: linear-gradient(135deg, rgba(216, 168, 77, 0.18), rgba(21, 50, 37, 0.42)), rgba(3, 7, 10, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.controls-panel .tracker-icon {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  flex: 0 0 31px !important;
  display: block !important;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55)) !important;
}

.controls-panel .tracker-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.controls-panel .tracker-info span {
  display: block !important;
  font-size: 0.54rem !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  max-width: 100% !important;
}

.controls-panel .tracker-info strong {
  font-size: 0.94rem !important;
  line-height: 1.05 !important;
  margin-top: 0 !important;
  font-weight: 950 !important;
}

@media (max-width: 1360px) {
  .controls-panel .live-trackers {
    grid-template-columns: repeat(8, minmax(70px, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
  }
  .controls-panel .live-trackers > div {
    min-height: 46px !important;
    height: 46px !important;
    padding: 4px 5px !important;
    gap: 4px !important;
  }
  .controls-panel .tracker-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
  .controls-panel .tracker-info span {
    font-size: 0.48rem !important;
  }
  .controls-panel .tracker-info strong {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 1024px) {
  .controls-panel .live-trackers {
    grid-template-columns: repeat(4, minmax(86px, 1fr)) !important;
  }
  .controls-panel .tracker-info span {
    display: block !important;
  }
}

@media (max-width: 720px) {
  .controls-panel .live-trackers {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}


/* v54: visor de cartas y botones táctiles por encima de pantalla completa */
.card-inspect-overlay,
.modal-overlay.card-inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.82);
  padding: 18px;
}
.card-inspect-overlay .inspect-modal {
  max-width: min(940px, 96vw);
  max-height: 92vh;
  overflow: auto;
}
.card-inspect-overlay .inspect-image {
  max-height: 72vh;
  object-fit: contain;
}
.resource-card button,
.inspect-btn,
.card-face-btn { touch-action: manipulation; }
.chat-panel:not(.hidden) { display: flex; }