/* ================================================================
   DESMOCHEE · UI HÍBRIDA · FASE 1+2 / MENÚ + PANTALLAS SECUNDARIAS
   ------------------------------------------------
   Capa visual independiente cargada DESPUÉS de desmoche.css.

   Reglas de estas fases:
   - No modifica HTML funcional salvo el <link> a este archivo.
   - No modifica JavaScript.
   - No cambia IDs, clases, data-*, atributos ni estructura DOM.
   - Fase 1: menú principal.
   - Fase 2: Cómo jugar, Tutorial, Perfil/Logros, Historial, Ajustes y Configuración Offline.
   - No toca mesa, drag & drop, reglas, turnos ni bots.
   - Eliminar este archivo + su <link> devuelve la apariencia v162.
   ================================================================ */

:root {
  --uih-bg: #061510;
  --uih-bg-deep: #03100c;
  --uih-panel: rgba(16, 53, 40, 0.58);
  --uih-panel-strong: rgba(12, 45, 34, 0.76);
  --uih-panel-soft: rgba(255, 255, 255, 0.045);
  --uih-line: rgba(255, 255, 255, 0.10);
  --uih-line-strong: rgba(255, 255, 255, 0.16);
  --uih-text: #f4f7f5;
  --uih-muted: #9fb5ab;
  --uih-green: #57d49a;
  --uih-green-2: #35ba82;
  --uih-gold: #f0cb72;
  --uih-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

/* ------------------------------
   ESCENA DEL MENÚ
   ------------------------------ */
body:not(.game-open) {
  background: #030c09;
}

body:not(.game-open) .game-container {
  isolation: isolate;
  padding: 26px 18px 24px;
  align-items: center;
  background:
    radial-gradient(circle at 16% 7%, rgba(81, 209, 149, 0.15), transparent 29%),
    radial-gradient(circle at 92% 12%, rgba(240, 203, 114, 0.07), transparent 23%),
    radial-gradient(circle at 52% 88%, rgba(54, 163, 116, 0.12), transparent 31%),
    linear-gradient(180deg, #0c2a20 0%, #071b15 52%, #04110d 100%);
}

/* v162 usaba una foto remota en ::before. La anulamos en esta capa para
   que el menú sea 100% offline y la estética dependa solo de CSS. */
body:not(.game-open) .game-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .50;
  filter: none;
  transform: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
}

body:not(.game-open) .bg-glow {
  z-index: 1;
  overflow: hidden;
  filter: none;
  background:
    radial-gradient(circle at 50% 31%, rgba(87, 212, 154, 0.065), transparent 35%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.22) 68%, rgba(0,0,0,.42));
}

/* Cartas ambientales: puro CSS, sin imágenes y sin tocar el DOM. */
body:not(.game-open) .bg-glow::before,
body:not(.game-open) .bg-glow::after {
  position: absolute;
  width: 132px;
  height: 188px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 211, 161, 0.10);
  border-radius: 20px;
  color: rgba(103, 211, 161, 0.10);
  background:
    linear-gradient(145deg, rgba(47, 116, 84, 0.16), rgba(4, 25, 18, 0.20)),
    rgba(255,255,255,.012);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 20px 44px rgba(0,0,0,.16);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5.4rem;
  line-height: 1;
  pointer-events: none;
}

body:not(.game-open) .bg-glow::before {
  content: "♣";
  left: -76px;
  top: 31%;
  transform: rotate(-17deg);
}

body:not(.game-open) .bg-glow::after {
  content: "♠";
  right: -75px;
  top: 25%;
  transform: rotate(14deg);
}

body:not(.game-open) .corner-ornament {
  width: 56px;
  height: 56px;
  opacity: .20;
  z-index: 3;
  filter: hue-rotate(54deg) saturate(.55) brightness(1.25);
}

body:not(.game-open) .top-logo {
  top: 34px;
  width: 44px;
  height: 44px;
  color: #eff8f3;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)),
    rgba(22, 76, 55, .66);
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 9px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 20px;
  z-index: 6;
}

/* ------------------------------
   CONTENEDOR / MARCA
   Mantiene el mismo DOM y UX v162.
   ------------------------------ */
body:not(.game-open) .desmoche-main-menu.glass-card {
  width: 100%;
  max-width: 360px;
  margin-top: 58px;
  padding: 28px 18px 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.024) 48%, rgba(76,211,151,.035)),
    rgba(8, 38, 28, .56);
  box-shadow:
    var(--uih-shadow),
    inset 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  z-index: 5;
}

body:not(.game-open) .desmoche-main-menu.glass-card::before {
  content: "";
  position: absolute;
  width: 175px;
  height: 175px;
  right: -78px;
  top: -103px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,203,114,.12), transparent 68%);
  pointer-events: none;
}

body:not(.game-open) .desmoche-wordmark.title {
  margin: 0;
  color: var(--uih-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 11.6vw, 3.55rem);
  font-weight: 400;
  letter-spacing: .022em;
  text-shadow: 0 6px 24px rgba(0,0,0,.32);
}

body:not(.game-open) .desmoche-wordmark .brand-diamond {
  color: var(--uih-gold);
  text-shadow: 0 0 14px rgba(240,203,114,.18);
}

body:not(.game-open) .menu-title-divider,
body:not(.game-open) .menu-footer-divider {
  color: rgba(240,203,114,.58);
}

body:not(.game-open) .menu-subtitle.subtitle {
  margin: 9px auto 24px;
  color: #abc2b7;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .61rem;
  font-weight: 760;
  letter-spacing: .22em;
}

/* ------------------------------
   JUGAR / CONTINUAR
   ------------------------------ */
body:not(.game-open) .menu-primary-actions {
  width: 100%;
  max-width: 318px;
  margin: 0 auto;
}

body:not(.game-open) .desmoche-main-menu .btn.menu-primary-action {
  width: 100%;
  min-height: 64px !important;
  margin: 0 0 9px !important;
  padding: 10px 13px !important;
  grid-template-columns: 40px minmax(0,1fr) 28px;
  gap: 10px;
  color: var(--uih-text);
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(9, 43, 32, .68) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 10px 26px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

body:not(.game-open) .desmoche-main-menu .btn-offline.menu-primary-action {
  color: #062217;
  border-color: rgba(125, 236, 184, .42) !important;
  background:
    linear-gradient(180deg, #69dda9, #43c98f) !important;
  box-shadow:
    0 12px 28px rgba(67,201,143,.20),
    inset 0 1px rgba(255,255,255,.46) !important;
}

body:not(.game-open) .desmoche-main-menu .btn-continue.menu-primary-action {
  border-color: rgba(255,255,255,.11) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    rgba(8, 36, 27, .66) !important;
}

body:not(.game-open) .menu-action-icon {
  width: 38px;
  height: 38px;
  color: #eaf8f1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  font-size: 14px;
}

body:not(.game-open) .btn-offline .menu-action-icon {
  color: #092b1e;
  border-color: rgba(0,0,0,.065);
  background: rgba(0,0,0,.08);
}

body:not(.game-open) .menu-action-copy strong {
  color: inherit;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .91rem !important;
  font-weight: 850;
  letter-spacing: .035em;
}

body:not(.game-open) .menu-action-copy small {
  margin-top: 3px;
  color: var(--uih-muted);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .55rem !important;
  font-weight: 650;
}

body:not(.game-open) .btn-offline .menu-action-copy small {
  color: rgba(6,34,23,.62);
}

body:not(.game-open) .menu-action-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  justify-self: end;
  color: #8aa197;
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  font-size: 17px;
}

body:not(.game-open) .btn-offline .menu-action-arrow {
  color: #0a3a28;
  background: rgba(0,0,0,.075);
}

/* ------------------------------
   TUTORIAL / PERFIL / MÁS
   ------------------------------ */
body:not(.game-open) .menu-quick-actions {
  width: 100%;
  max-width: 318px;
  margin: 11px auto 0;
  gap: 8px;
}

body:not(.game-open) .menu-quick-button {
  min-height: 66px;
  padding: 8px 4px;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  color: rgba(244,247,245,.94);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(8, 37, 27, .53);
  box-shadow: inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .68rem;
  font-weight: 760;
}

body:not(.game-open) .menu-quick-button:active {
  transform: scale(.97);
}

body:not(.game-open) .menu-quick-icon {
  width: 31px;
  height: 31px;
  color: #e8f5ef;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  font-family: Arial, sans-serif;
}

body:not(.game-open) .menu-more-toggle[aria-expanded="true"] {
  border-color: rgba(87,212,154,.25);
  background:
    linear-gradient(145deg, rgba(87,212,154,.10), rgba(255,255,255,.018)),
    rgba(8, 39, 29, .65);
}

/* ------------------------------
   PANEL MÁS
   ------------------------------ */
body:not(.game-open) .menu-more-panel {
  width: 100%;
  max-width: 318px;
  margin: 8px auto 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(5, 29, 21, .82);
  box-shadow:
    0 14px 34px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body:not(.game-open) .menu-more-row {
  min-height: 44px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(255,255,255,.065);
  color: rgba(242,247,244,.90);
  background: transparent;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
}

body:not(.game-open) .menu-more-row:active:not(:disabled) {
  background: rgba(87,212,154,.07);
}

body:not(.game-open) .menu-more-row > span:last-child {
  color: #748d82;
}

body:not(.game-open) .menu-more-online {
  color: rgba(214,226,220,.31);
}

/* ------------------------------
   PIE DEL MENÚ
   ------------------------------ */
body:not(.game-open) .menu-version-footer {
  margin-top: 16px !important;
  color: rgba(240,203,114,.55);
}

body:not(.game-open) .menu-version-footer small {
  color: #789087;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .10em;
}

body:not(.game-open) .menu-footer-suits {
  margin-top: 8px;
  gap: 17px;
  color: rgba(143,177,161,.24);
  font-size: 12px;
}

body:not(.game-open) .cards-decor {
  display: block;
  opacity: .16;
  pointer-events: none;
}

/* Mantener el menú cómodo en pantallas bajas sin reestructurar DOM. */
@media (max-height: 760px) {
  body:not(.game-open) .game-container {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  body:not(.game-open) .top-logo {
    top: 23px;
  }

  body:not(.game-open) .desmoche-main-menu.glass-card {
    margin-top: 45px;
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }

  body:not(.game-open) .menu-subtitle.subtitle {
    margin-bottom: 16px !important;
  }

  body:not(.game-open) .desmoche-main-menu .btn.menu-primary-action {
    min-height: 58px !important;
  }

  body:not(.game-open) .menu-quick-button {
    min-height: 58px;
  }

  body:not(.game-open) .menu-version-footer {
    margin-top: 10px !important;
  }
}

@media (max-width: 350px) {
  body:not(.game-open) .game-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body:not(.game-open) .desmoche-main-menu.glass-card {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* ================================================================
   FASE 2 · PANTALLAS SECUNDARIAS
   ------------------------------------------------
   Solo CSS. Se conserva íntegro el contrato HTML ↔ JavaScript.
   Incluye:
   - Cómo jugar
   - Tutorial (selector + coach)
   - Perfil + logros
   - Historial
   - Ajustes
   - Configuración de partida offline

   EXCLUIDO expresamente:
   - Mesa de juego
   - Drag & drop
   - Pausa / resultado / cambio de ronda
   - Laboratorio jugable
   ================================================================ */

/* ------------------------------
   CAPA COMÚN · OVERLAYS / MODALES
   ------------------------------ */
#howToPlayModal,
#profileModal,
#offlineModal {
  background: rgba(1, 10, 7, .74);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}

#howToPlayModal .modal-card,
#profileModal .modal-card,
#offlineModal .modal-card {
  color: var(--uih-text);
  border: 1px solid var(--uih-line-strong);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% -6%, rgba(87, 212, 154, .12), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 46%),
    rgba(5, 31, 23, .94);
  box-shadow:
    0 24px 64px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(118%);
  -webkit-backdrop-filter: blur(22px) saturate(118%);
  scrollbar-color: rgba(87,212,154,.34) transparent;
}

#howToPlayModal .rules-header,
#profileModal .rules-header,
#offlineModal .rules-header {
  border-bottom: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(180deg, rgba(13, 52, 39, .95), rgba(7, 34, 25, .92));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#howToPlayModal .rules-back,
#profileModal .rules-back,
#offlineModal .rules-back {
  color: #e9f6f0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}

#howToPlayModal .modal-title,
#profileModal .modal-title,
#offlineModal .modal-title {
  color: var(--uih-text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 850;
  letter-spacing: -.015em;
}

#howToPlayModal .modal-subtitle,
#profileModal .modal-subtitle,
#offlineModal .modal-subtitle {
  color: var(--uih-muted);
}

/* ------------------------------
   CÓMO JUGAR
   ------------------------------ */
#howToPlayModal .rules-content {
  padding: 14px;
}

#howToPlayModal .topic-list {
  gap: 8px;
}

#howToPlayModal .topic {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.047), rgba(255,255,255,.016)),
    rgba(5, 28, 21, .58);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

#howToPlayModal .topic.open {
  border-color: rgba(87,212,154,.24);
  background:
    linear-gradient(145deg, rgba(87,212,154,.075), rgba(255,255,255,.018)),
    rgba(5, 31, 23, .68);
  box-shadow:
    0 9px 23px rgba(0,0,0,.14),
    inset 0 1px rgba(255,255,255,.045);
}

#howToPlayModal .topic-button {
  min-height: 58px;
  grid-template-columns: 38px minmax(0,1fr) 22px;
  padding: 9px 11px;
  gap: 9px;
  color: var(--uih-text);
}

#howToPlayModal .topic-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 12px;
  color: #eaf7f0;
  background: rgba(255,255,255,.045);
  font-size: 1.05rem;
  filter: saturate(.72);
}

#howToPlayModal .topic-name {
  font-size: .84rem;
  font-weight: 780;
}

#howToPlayModal .topic-arrow {
  color: #789087;
}

#howToPlayModal .topic.open .topic-arrow {
  color: var(--uih-green);
}

#howToPlayModal .topic-body {
  padding: 1px 12px 13px 58px;
  color: #c2d3cb;
  font-size: .73rem;
  line-height: 1.5;
}

#howToPlayModal .short-rule {
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.027);
}

#howToPlayModal .short-rule-emoji {
  filter: saturate(.70);
  opacity: .86;
}

#howToPlayModal .suit-card {
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

#howToPlayModal .special-help-rule {
  border-color: rgba(255,255,255,.065);
  background: rgba(255,255,255,.025);
}

#howToPlayModal .optional-intro,
#howToPlayModal .optional-note {
  color: var(--uih-muted);
}

#howToPlayModal .btn-close {
  min-height: 46px;
  border: 1px solid rgba(87,212,154,.30);
  border-radius: 15px;
  color: #062217;
  background: linear-gradient(180deg, #69dda9, #43c98f);
  box-shadow:
    0 10px 26px rgba(67,201,143,.17),
    inset 0 1px rgba(255,255,255,.40);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 850;
}

/* ------------------------------
   TUTORIAL · SELECTOR
   ------------------------------ */
#tutorialSelectorOverlay {
  background: rgba(1,10,7,.76);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}

#tutorialSelectorOverlay .tutorial-selector-card {
  border: 1px solid var(--uih-line-strong);
  border-radius: 25px;
  color: var(--uih-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(87,212,154,.13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.072), rgba(255,255,255,.018)),
    rgba(5,31,23,.95);
  box-shadow:
    0 24px 64px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.075);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#tutorialSelectorOverlay .tutorial-selector-head {
  border-bottom-color: rgba(255,255,255,.07);
}

#tutorialSelectorOverlay .tutorial-selector-icon {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  filter: saturate(.68);
}

#tutorialSelectorOverlay .tutorial-selector-head strong {
  color: var(--uih-text);
}

#tutorialSelectorOverlay .tutorial-selector-head span:not(.tutorial-selector-icon) {
  color: var(--uih-muted);
}

#tutorialSelectorOverlay .tutorial-lesson-option {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  color: var(--uih-text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
    rgba(5,29,21,.55);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}

#tutorialSelectorOverlay .tutorial-lesson-option:active {
  transform: scale(.988);
  border-color: rgba(87,212,154,.20);
  background: rgba(87,212,154,.06);
}

#tutorialSelectorOverlay .tutorial-lesson-number {
  color: #0b2d20;
  border: 1px solid rgba(109,227,174,.24);
  background: linear-gradient(180deg, #73dfad, #4fc993);
  box-shadow: inset 0 1px rgba(255,255,255,.30);
}

#tutorialSelectorOverlay .tutorial-lesson-copy strong {
  color: var(--uih-text);
}

#tutorialSelectorOverlay .tutorial-lesson-copy small {
  color: var(--uih-muted);
}

#tutorialSelectorOverlay .tutorial-lesson-arrow {
  color: #789087;
}

#tutorialSelectorOverlay .tutorial-selector-close {
  border: 1px solid rgba(255,255,255,.09);
  color: #d9e8e1;
  background: rgba(255,255,255,.04);
}

/* Tutorial durante la partida: solo el coach, no la mesa. */
#tutorialCoach {
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  color: var(--uih-text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
    rgba(5,33,24,.94);
  box-shadow:
    0 18px 48px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#tutorialCoach .tutorial-coach-progress {
  color: var(--uih-muted);
}

#tutorialCoach .tutorial-coach-icon {
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  filter: saturate(.68);
}

#tutorialCoach .tutorial-coach-copy strong {
  color: var(--uih-text);
}

#tutorialCoach .tutorial-coach-copy p {
  color: #b6c9bf;
}

#tutorialCoach .tutorial-coach-action {
  border-color: rgba(87,212,154,.25);
  color: #062217;
  background: linear-gradient(180deg, #69dda9, #43c98f);
}

#tutorialCoach .tutorial-coach-action.secondary {
  color: #dceae3;
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}

/* ------------------------------
   PERFIL + LOGROS
   ------------------------------ */
#profileModal .profile-v140 {
  padding-bottom: 15px;
}

#profileModal .profile-v140-hero {
  border: 1px solid rgba(87,212,154,.17);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(87,212,154,.075), rgba(255,255,255,.018)),
    rgba(4,29,21,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

#profileModal .profile-v140-avatar {
  color: #eaf8f1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(13,58,42,.80);
}

#profileModal .profile-v140-identity h3 {
  color: var(--uih-text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 820;
}

#profileModal .profile-v140-tags span {
  color: #a9beb4;
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.025);
}

#profileModal .profile-v140-level-line strong,
#profileModal .profile-v140-wallet strong {
  color: var(--uih-green);
}

#profileModal .profile-progress-fill {
  background: linear-gradient(90deg, var(--uih-green-2), var(--uih-green));
}

#profileModal .profile-v140-coin {
  border-color: #53c28d;
  background: radial-gradient(circle at 35% 30%, #8ce7bb, #329a6d 72%);
  box-shadow:
    inset 0 0 0 3px rgba(2,55,35,.16),
    0 4px 9px rgba(0,0,0,.20);
}

#profileModal .profile-v140-coin::after {
  color: #0b422d;
}

#profileModal .profile-v140-section {
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}

#profileModal .profile-v140-section-head strong,
#profileModal .profile-v140-section-head h3 {
  color: #e9f4ef;
}

#profileModal .profile-v140-stat {
  border-color: rgba(255,255,255,.065);
  border-radius: 14px;
  background: rgba(255,255,255,.028);
}

#profileModal .profile-v140-stat strong {
  color: #eef7f3;
}

#profileModal .profile-v140-stat small,
#profileModal .profile-local-note {
  color: var(--uih-muted);
}

#profileModal .profile-showcase-badge {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}

#profileModal .profile-v140-text-button {
  color: var(--uih-green);
  border-color: rgba(87,212,154,.18);
  background: rgba(87,212,154,.055);
}

#profileAchievementsOverlay {
  background: rgba(1,10,7,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#profileAchievementsOverlay .profile-achievements-card {
  border: 1px solid var(--uih-line-strong);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -8%, rgba(87,212,154,.12), transparent 34%),
    rgba(5,31,23,.96);
  box-shadow: 0 24px 62px rgba(0,0,0,.43);
}

#profileAchievementsOverlay .achievement-list > * {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.028);
}

/* ------------------------------
   HISTORIAL
   ------------------------------ */
#auditOverlay {
  background: rgba(1,10,7,.76);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}

#auditOverlay .audit-card {
  border: 1px solid var(--uih-line-strong);
  border-radius: 25px;
  color: var(--uih-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(87,212,154,.11), transparent 33%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.015)),
    rgba(5,31,23,.96);
  box-shadow:
    0 24px 64px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#auditOverlay .audit-head {
  border-bottom-color: rgba(255,255,255,.07);
}

#auditOverlay .audit-head h3 {
  color: var(--uih-text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 850;
}

#auditOverlay .audit-head p {
  color: var(--uih-muted);
}

#auditOverlay .audit-close {
  color: #dceae3;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}

#auditOverlay .audit-list > *,
#auditOverlay .audit-full-rounds > * {
  border-color: rgba(255,255,255,.065);
  background: rgba(255,255,255,.027);
}

#auditOverlay .audit-action {
  min-height: 44px;
  border: 1px solid rgba(87,212,154,.22);
  border-radius: 14px;
  color: #062217;
  background: linear-gradient(180deg, #69dda9, #43c98f);
  font-weight: 820;
}

/* ------------------------------
   AJUSTES
   ------------------------------ */
#displaySettings {
  background: rgba(1,10,7,.76);
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
}

#displaySettings .display-settings-card {
  border: 1px solid var(--uih-line-strong);
  border-radius: 25px;
  color: var(--uih-text);
  background:
    radial-gradient(circle at 50% -8%, rgba(87,212,154,.11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.015)),
    rgba(5,31,23,.96);
  box-shadow:
    0 24px 64px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#displaySettings .display-settings-head {
  border-bottom-color: rgba(255,255,255,.07);
}

#displaySettings .display-settings-head h3 {
  color: var(--uih-text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 850;
}

#displaySettings .display-settings-head p {
  color: var(--uih-muted);
}

#displaySettings .display-settings-close {
  color: #dceae3;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}

#displaySettings .display-mode-option,
#displaySettings .menu-volume-row {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  color: var(--uih-text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.042), rgba(255,255,255,.012)),
    rgba(5,29,21,.54);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}

#displaySettings .display-mode-option[aria-pressed="true"] {
  border-color: rgba(87,212,154,.24);
  background:
    linear-gradient(145deg, rgba(87,212,154,.09), rgba(255,255,255,.014)),
    rgba(5,32,23,.66);
}

#displaySettings .display-mode-icon {
  filter: saturate(.70);
}

#displaySettings .display-mode-copy strong,
#displaySettings .menu-volume-head strong {
  color: #ecf6f1;
}

#displaySettings .display-mode-copy small,
#displaySettings .menu-volume-head span {
  color: var(--uih-muted);
}

#displaySettings .display-mode-check {
  color: var(--uih-green);
  border-color: rgba(87,212,154,.22);
  background: rgba(87,212,154,.07);
}

#displaySettings .menu-volume-slider {
  accent-color: var(--uih-green);
}

/* ------------------------------
   CONFIGURACIÓN OFFLINE
   ------------------------------ */
#offlineModal .offline-card {
  max-width: 386px;
}

#offlineModal .offline-content {
  padding: 15px 14px 14px;
}

#offlineModal .player-preview {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
    rgba(5,29,21,.55);
}

#offlineModal .player-avatar {
  color: #eaf8f1;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

#offlineModal .player-label,
#offlineModal .config-note,
#offlineModal .game-mode-hint,
#offlineModal .bot-skill-hint {
  color: var(--uih-muted);
}

#offlineModal .player-name {
  color: var(--uih-text);
}

#offlineModal .config-title {
  color: #dcebe4;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .04em;
}

#offlineModal .offline-arrow-selector {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.044), rgba(255,255,255,.012)),
    rgba(5,29,21,.56);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}

#offlineModal .offline-arrow-button {
  color: #dceae3;
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.035);
}

#offlineModal .offline-arrow-button:active {
  background: rgba(87,212,154,.08);
}

#offlineModal .offline-arrow-value small,
#offlineModal .offline-selector-summary {
  color: var(--uih-muted);
}

#offlineModal .offline-arrow-value strong {
  color: #eff8f4;
}

#offlineModal .special-rules-collapsible {
  border-radius: 17px;
}

#offlineModal .special-rules-toggle {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  color: #edf7f2;
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(5,29,21,.54);
}

#offlineModal .special-rules-toggle-status,
#offlineModal .special-rules-toggle small {
  color: var(--uih-muted);
}

#offlineModal .special-rules-toggle-arrow {
  color: var(--uih-green);
}

#offlineModal .special-rules-open-description,
#offlineModal .special-rule-option,
#offlineModal .match-summary {
  border-color: rgba(255,255,255,.065);
  background: rgba(255,255,255,.027);
}

#offlineModal .special-rule-option {
  color: #d7e5de;
}

#offlineModal .special-rule-option.selected,
#offlineModal .special-rule-option[aria-pressed="true"] {
  color: #eaf8f1;
  border-color: rgba(87,212,154,.30);
  background:
    linear-gradient(145deg, rgba(87,212,154,.105), rgba(255,255,255,.018)),
    rgba(5,31,23,.66);
  box-shadow: 0 0 16px rgba(87,212,154,.065);
}

#offlineModal .special-rule-icon {
  filter: saturate(.70);
}

#offlineModal .summary-label,
#offlineModal .special-rules-summary {
  color: var(--uih-muted);
}

#offlineModal .summary-text strong {
  color: #edf7f2;
}

#offlineModal .start-match {
  min-height: 48px;
  border: 1px solid rgba(87,212,154,.31);
  border-radius: 15px;
  color: #062217;
  background: linear-gradient(180deg, #69dda9, #43c98f);
  box-shadow:
    0 11px 26px rgba(67,201,143,.17),
    inset 0 1px rgba(255,255,255,.42);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 860;
  letter-spacing: .035em;
}

/* Los botones de Laboratorio dentro de configuración conservan su función,
   pero reciben únicamente la misma superficie visual. */
#offlineModal .lab-config-button {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  color: #c7d8d0;
  background: rgba(255,255,255,.035);
}

/* ------------------------------
   RESPONSIVE FASE 2
   ------------------------------ */
@media (max-width: 390px) {
  #howToPlayModal .modal-card,
  #profileModal .modal-card,
  #offlineModal .modal-card,
  #tutorialSelectorOverlay .tutorial-selector-card,
  #auditOverlay .audit-card,
  #displaySettings .display-settings-card {
    border-radius: 22px;
  }

  #howToPlayModal .topic-body {
    padding-left: 12px;
  }
}

@media (max-height: 720px) {
  #tutorialSelectorOverlay .tutorial-lesson-option {
    min-height: 48px;
  }

  #offlineModal .offline-content {
    padding-top: 12px;
  }
}


/* ================================================================
   FASE 2.1 · PULIDO VISUAL
   ------------------------------------------------
   - El MISMO #btnMenuSettings se mueve visualmente al header del menú.
   - Ajustes pasa a bottom-sheet tipo Glass.
   - Se elimina gran parte del look dorado/serif heredado en las
     pantallas secundarias sin cambiar su estructura funcional.
   - Única modificación DOM: reubicar #btnMenuSettings fuera de Más.
   - Sin cambios JavaScript.
   ================================================================ */

/* ------------------------------------------------
   MENÚ · AJUSTES ARRIBA
   ------------------------------------------------ */
body:not(.game-open) .desmoche-main-menu.glass-card {
  position: relative;
}

body:not(.game-open) #btnMenuSettings {
  position: absolute;
  top: -57px;
  right: 0;
  z-index: 12;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  color: #eaf6f0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035)),
    rgba(19,65,48,.66);
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    0 9px 26px rgba(0,0,0,.23);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body:not(.game-open) #btnMenuSettings > span {
  display: none;
}

body:not(.game-open) #btnMenuSettings::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8Zm7.2 4.7c.1-.4.1-.9.1-1.3s0-.9-.1-1.3l2-1.6-2-3.4-2.4 1a8.6 8.6 0 0 0-2.2-1.3L14.2 3H9.8l-.4 2.4a8.6 8.6 0 0 0-2.2 1.3l-2.4-1-2 3.4 2 1.6c-.1.4-.1.9-.1 1.3s0 .9.1 1.3l-2 1.6 2 3.4 2.4-1c.7.6 1.4 1 2.2 1.3l.4 2.4h4.4l.4-2.4c.8-.3 1.5-.7 2.2-1.3l2.4 1 2-3.4-2-1.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8Zm7.2 4.7c.1-.4.1-.9.1-1.3s0-.9-.1-1.3l2-1.6-2-3.4-2.4 1a8.6 8.6 0 0 0-2.2-1.3L14.2 3H9.8l-.4 2.4a8.6 8.6 0 0 0-2.2 1.3l-2.4-1-2 3.4 2 1.6c-.1.4-.1.9-.1 1.3s0 .9.1 1.3l-2 1.6 2 3.4 2.4-1c.7.6 1.4 1 2.2 1.3l.4 2.4h4.4l.4-2.4c.8-.3 1.5-.7 2.2-1.3l2.4 1 2-3.4-2-1.6Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

body:not(.game-open) #btnMenuSettings:active {
  transform: scale(.96);
}

/* ------------------------------------------------
   AJUSTES · BOTTOM SHEET GLASS
   ------------------------------------------------ */
#displaySettings {
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(0, 9, 6, .58) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
}

#displaySettings .display-settings-card {
  position: relative;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  max-height: min(78svh, 700px) !important;
  margin: 0 !important;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-bottom: 0 !important;
  border-radius: 29px 29px 0 0 !important;
  background:
    radial-gradient(circle at 50% -12%, rgba(87,212,154,.15), transparent 34%),
    linear-gradient(180deg, rgba(24,76,57,.94), rgba(6,35,25,.98)) !important;
  box-shadow:
    0 -20px 58px rgba(0,0,0,.38),
    inset 0 1px rgba(255,255,255,.08) !important;
}

#displaySettings .display-settings-card::before {
  content: "";
  display: block;
  width: 46px;
  height: 5px;
  margin: 1px auto 13px;
  border-radius: 99px;
  background: rgba(220,240,231,.22);
}

#displaySettings .display-settings-head {
  position: sticky;
  top: -10px;
  z-index: 3;
  margin: 0 0 2px !important;
  padding: 8px 2px 13px !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  background: linear-gradient(180deg, rgba(19,67,49,.98), rgba(14,57,42,.93)) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#displaySettings .display-settings-head h3 {
  margin: 0 !important;
  font-size: 1.04rem !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
}

#displaySettings .display-settings-head p {
  display: none !important;
}

#displaySettings .display-settings-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  font-size: 1.35rem !important;
}

#displaySettings .display-mode-option,
#displaySettings .menu-volume-row {
  margin: 0 !important;
  min-height: 62px !important;
  padding: 11px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#displaySettings .display-mode-option[aria-pressed="true"] {
  background: linear-gradient(90deg, rgba(87,212,154,.055), transparent) !important;
}

#displaySettings .display-mode-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 12px !important;
  color: #dcebe4 !important;
  background: rgba(255,255,255,.035) !important;
  font-size: 0 !important;
  filter: none !important;
}

#displaySettings .display-mode-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--uih-setting-icon) center/contain no-repeat;
          mask: var(--uih-setting-icon) center/contain no-repeat;
}

#displayModeFit .display-mode-icon {
  --uih-setting-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2.8' width='12' height='18.4' rx='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 18h4' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
#displayModeLarge .display-mode-icon {
  --uih-setting-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='11' height='15' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M9 8h5M9 11h5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
#menuMusicToggle .display-mode-icon {
  --uih-setting-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l10-2v13' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='18' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='16' r='3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}
#effectsToggle .display-mode-icon,
#effectsVolumeRow .display-mode-icon,
#menuMusicVolumeRow .display-mode-icon {
  --uih-setting-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

#displaySettings .display-mode-copy strong,
#displaySettings .menu-volume-head strong {
  font-size: .83rem !important;
  font-weight: 760 !important;
}

#displaySettings .display-mode-copy small,
#displaySettings .menu-volume-head span {
  font-size: .66rem !important;
  line-height: 1.3 !important;
}

/* Radio visual para los dos modos de pantalla */
#displayModeFit .display-mode-check,
#displayModeLarge .display-mode-check {
  position: relative;
  width: 24px !important;
  height: 24px !important;
  color: transparent !important;
  border: 1px solid rgba(190,216,204,.22) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.035) !important;
}
#displayModeFit[aria-pressed="true"] .display-mode-check::after,
#displayModeLarge[aria-pressed="true"] .display-mode-check::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--uih-green);
  box-shadow: 0 0 12px rgba(87,212,154,.30);
}

/* Switch visual para música y efectos */
#menuMusicToggle .display-mode-check,
#effectsToggle .display-mode-check {
  position: relative;
  width: 46px !important;
  height: 26px !important;
  color: transparent !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
}
#menuMusicToggle .display-mode-check::after,
#effectsToggle .display-mode-check::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8ba097;
  transition: transform .18s ease, background .18s ease;
}
#menuMusicToggle[aria-pressed="true"] .display-mode-check,
#effectsToggle[aria-pressed="true"] .display-mode-check {
  background: rgba(87,212,154,.20) !important;
  border-color: rgba(87,212,154,.23) !important;
}
#menuMusicToggle[aria-pressed="true"] .display-mode-check::after,
#effectsToggle[aria-pressed="true"] .display-mode-check::after {
  transform: translateX(20px);
  background: var(--uih-green);
}

#displaySettings .menu-volume-row {
  min-height: 70px !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
}

#displaySettings .menu-volume-slider {
  height: 4px !important;
}

/* ------------------------------------------------
   HEADERS SECUNDARIOS · MÁS LIMPIOS
   ------------------------------------------------ */
#howToPlayModal .rules-header,
#profileModal .rules-header,
#offlineModal .rules-header {
  min-height: 82px !important;
  padding: 14px 14px !important;
  grid-template-columns: 42px minmax(0,1fr) 42px !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  background: rgba(8,42,31,.88) !important;
}

#howToPlayModal .rules-heading,
#profileModal .rules-heading,
#offlineModal .rules-heading {
  text-align: left !important;
}

#howToPlayModal .modal-title,
#profileModal .modal-title,
#offlineModal .modal-title {
  margin: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.15 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 820 !important;
  letter-spacing: -.01em !important;
}

#howToPlayModal .modal-subtitle,
#profileModal .modal-subtitle,
#offlineModal .modal-subtitle {
  margin-top: 3px !important;
  font-size: .67rem !important;
  line-height: 1.25 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

#howToPlayModal .rules-back,
#profileModal .rules-back,
#offlineModal .rules-back {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  font-size: 1.15rem !important;
}

/* ------------------------------------------------
   CÓMO JUGAR · QUITAR LOOK VIEJO DORADO
   ------------------------------------------------ */
#howToPlayModal .modal-card {
  border-color: rgba(255,255,255,.13) !important;
}
#howToPlayModal .topic {
  border-color: rgba(255,255,255,.075) !important;
  border-radius: 18px !important;
}
#howToPlayModal .topic-button {
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}
#howToPlayModal .topic-name {
  color: #eef7f3 !important;
  font-size: .84rem !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 760 !important;
}
#howToPlayModal .topic-icon {
  color: transparent !important;
  font-size: 0 !important;
  filter: none !important;
}
#howToPlayModal .topic-icon::before {
  content: "♠";
  color: #dcebe4;
  font-family: Georgia, serif;
  font-size: 1.05rem;
}
#howToPlayModal .topic:nth-child(2) .topic-icon::before { content: "9"; font-family: "Segoe UI", sans-serif; font-weight: 800; }
#howToPlayModal .topic:nth-child(3) .topic-icon::before { content: "♣"; }
#howToPlayModal .topic:nth-child(4) .topic-icon::before { content: "⇄"; font-family: "Segoe UI Symbol", sans-serif; }
#howToPlayModal .topic:nth-child(5) .topic-icon::before { content: "→"; font-family: "Segoe UI Symbol", sans-serif; }
#howToPlayModal .topic:nth-child(6) .topic-icon::before { content: "10"; font-family: "Segoe UI", sans-serif; font-size: .82rem; font-weight: 800; }

#howToPlayModal .short-rule {
  color: #cbd9d2 !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 14px !important;
  background: rgba(0,18,13,.30) !important;
}
#howToPlayModal .short-rule-emoji {
  opacity: .45 !important;
  filter: grayscale(1) saturate(0) !important;
}

/* ------------------------------------------------
   TUTORIAL · DE DORADO A VERDE/GLASS
   ------------------------------------------------ */
#tutorialSelectorOverlay .tutorial-selector-card {
  border-color: rgba(255,255,255,.13) !important;
}
#tutorialSelectorOverlay .tutorial-selector-icon {
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
  filter: none !important;
}
#tutorialSelectorOverlay .tutorial-selector-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background: #e4f1eb;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5 12 3l8 2.5-8 2.7L4 5.5Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M6.5 7v5.4c0 1.8 2.4 3.2 5.5 3.2s5.5-1.4 5.5-3.2V7M20 5.5v6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5 12 3l8 2.5-8 2.7L4 5.5Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M6.5 7v5.4c0 1.8 2.4 3.2 5.5 3.2s5.5-1.4 5.5-3.2V7M20 5.5v6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#tutorialSelectorOverlay .tutorial-lesson-number {
  color: #062217 !important;
  background: linear-gradient(180deg, #69dda9, #43c98f) !important;
  border-color: rgba(87,212,154,.25) !important;
}
#tutorialSelectorOverlay .tutorial-lesson-copy strong {
  color: #edf7f2 !important;
}
#tutorialSelectorOverlay .tutorial-lesson-option {
  border-color: rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.028) !important;
}

/* ------------------------------------------------
   PERFIL · REDUCIR DORADO / SERIF
   ------------------------------------------------ */
#profileModal .profile-v140-identity h3,
#profileModal .profile-v140-section-head h3,
#profileModal .profile-v140-section-head strong,
#profileModal .profile-v140-wallet strong,
#profileModal .profile-v140-level-line strong {
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}
#profileModal .profile-v140-identity h3 {
  font-size: 1rem !important;
}
#profileModal .profile-v140-section-head small {
  color: var(--uih-green) !important;
  letter-spacing: .11em !important;
}
#profileModal .profile-v140-section-head h3 {
  color: #eef7f3 !important;
  font-size: .95rem !important;
}
#profileModal .profile-v140-wallet strong,
#profileModal .profile-v140-level-line strong {
  color: #dcebe4 !important;
}
#profileModal .profile-v140-coin {
  border-color: rgba(87,212,154,.28) !important;
  background: radial-gradient(circle at 35% 30%, #86e1b7, #2f9a6b 72%) !important;
}
#profileModal .traditional-profile-mark {
  border-color: rgba(255,255,255,.10) !important;
  color: #a9beb4 !important;
}

/* ------------------------------------------------
   HISTORIAL · TARJETAS MÁS UI HÍBRIDA
   ------------------------------------------------ */
#auditOverlay .audit-card {
  border-color: rgba(255,255,255,.13) !important;
}
#auditOverlay .audit-head h3 {
  font-size: 1.03rem !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}
#auditOverlay .audit-match-details,
#auditOverlay .audit-round-details {
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.027) !important;
}
#auditOverlay .audit-match-status,
#auditOverlay .audit-round-status {
  color: #c4d4cc !important;
}
#auditOverlay .audit-action {
  color: #062217 !important;
  border-color: rgba(87,212,154,.27) !important;
  background: linear-gradient(180deg, #69dda9, #43c98f) !important;
}

/* ------------------------------------------------
   CONFIG OFFLINE · MENOS MARCO DORADO / MÁS APP-JUEGO
   ------------------------------------------------ */
#offlineModal .offline-card {
  border-color: rgba(255,255,255,.13) !important;
}
#offlineModal .player-preview,
#offlineModal .offline-arrow-selector,
#offlineModal .special-rules-toggle,
#offlineModal .match-summary {
  border-color: rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.028) !important;
}
#offlineModal .player-label,
#offlineModal .config-title,
#offlineModal .offline-arrow-value small {
  color: var(--uih-green) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}
#offlineModal .offline-arrow-value strong,
#offlineModal .summary-text strong {
  color: #eff8f4 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}
#offlineModal .offline-arrow-button {
  color: #cfe0d7 !important;
}
#offlineModal .start-match {
  min-height: 52px !important;
  color: #062217 !important;
  border-color: rgba(87,212,154,.31) !important;
  background: linear-gradient(180deg, #69dda9, #43c98f) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .88rem !important;
  font-weight: 850 !important;
}

@media (max-width: 390px) {
  body:not(.game-open) #btnMenuSettings {
    right: 1px;
  }
  #displaySettings .display-settings-card {
    border-radius: 26px 26px 0 0 !important;
  }
}

/* ================================================================
   FASE 2.2 · PULIDO SEGÚN PRUEBA EN ANDROID
   ------------------------------------------------
   1) Los encabezados secundarios dejan de ser sticky.
   2) El engranaje del menú se integra de forma más discreta.
   3) Ajustes queda reducido a tres filas con switch:
      - Ajustar a pantalla (OFF = modo grande existente)
      - Música del menú
      - Efectos
      Las barras de volumen siguen en el DOM para conservar el
      contrato HTML/JS, pero dejan de mostrarse en esta interfaz.
   Sin cambios HTML ni JavaScript.
   ================================================================ */

/* ------------------------------------------------
   HEADERS · QUE BAJEN JUNTO CON EL CONTENIDO
   ------------------------------------------------ */
#howToPlayModal .rules-header,
#profileModal .rules-header,
#offlineModal .rules-header {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}

/* Ajustes tampoco necesita un título pegajoso: ahora solo hay 3 filas. */
#displaySettings .display-settings-head {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------
   MENÚ · ENGRANAJE MÁS DISCRETO E INTEGRADO
   ------------------------------------------------ */
body:not(.game-open) #btnMenuSettings {
  top: -50px !important;
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  color: rgba(229,244,236,.82) !important;
  border-color: rgba(255,255,255,.105) !important;
  background: rgba(17,61,46,.42) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 6px 18px rgba(0,0,0,.16) !important;
  opacity: .88;
}

body:not(.game-open) #btnMenuSettings::before {
  width: 18px !important;
  height: 18px !important;
}

body:not(.game-open) #btnMenuSettings:hover,
body:not(.game-open) #btnMenuSettings:focus-visible {
  opacity: 1;
  border-color: rgba(87,212,154,.22) !important;
  background: rgba(23,75,56,.58) !important;
}

/* ------------------------------------------------
   AJUSTES · TRES FILAS, TRES SWITCHES
   ------------------------------------------------ */
#displaySettings .display-settings-card {
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}

#displaySettings .display-mode-option {
  position: relative;
  grid-template-columns: 38px minmax(0,1fr) 48px !important;
  min-height: 66px !important;
  padding: 11px 5px !important;
}

/* El modo grande deja de ser una fila visible.
   Se conserva como botón real para que el JS de v162 siga intacto.
   Cuando FIT está ON, este botón crea una zona invisible sobre la
   primera fila; tocarla activa LARGE. Cuando FIT está OFF, vuelve a
   quedar disponible el botón FIT visible. Así el switch sí alterna
   entre los dos modos sin tocar desmoche.js. */
#displayModeLarge {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

#displayModeLarge > * {
  display: none !important;
}

#displayModeFit[aria-pressed="true"] + #displayModeLarge {
  pointer-events: auto;
}

#displayModeFit[aria-pressed="true"] + #displayModeLarge::before {
  content: "";
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: -66px;
  height: 66px;
  cursor: pointer;
  background: transparent;
}

/* Las barras continúan en HTML/JS, pero esta UI usa solo ON/OFF. */
#displaySettings #menuMusicVolumeRow,
#displaySettings #effectsVolumeRow {
  display: none !important;
}

/* Switch común: FIT, música y efectos. */
#displaySettings #displayModeFit .display-mode-check,
#displaySettings #menuMusicToggle .display-mode-check,
#displaySettings #effectsToggle .display-mode-check {
  position: relative !important;
  width: 46px !important;
  height: 27px !important;
  min-width: 46px !important;
  padding: 0 !important;
  display: block !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: rgba(255,255,255,.085) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18) !important;
  transition: background .18s ease, border-color .18s ease !important;
}

#displaySettings #displayModeFit .display-mode-check::after,
#displaySettings #menuMusicToggle .display-mode-check::after,
#displaySettings #effectsToggle .display-mode-check::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  background: #91a89d !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  transform: translateX(0) !important;
  transition: transform .18s ease, background .18s ease !important;
}

#displaySettings #displayModeFit[aria-pressed="true"] .display-mode-check,
#displaySettings #menuMusicToggle[aria-pressed="true"] .display-mode-check,
#displaySettings #effectsToggle[aria-pressed="true"] .display-mode-check {
  border-color: rgba(87,212,154,.28) !important;
  background: rgba(87,212,154,.20) !important;
}

#displaySettings #displayModeFit[aria-pressed="true"] .display-mode-check::after,
#displaySettings #menuMusicToggle[aria-pressed="true"] .display-mode-check::after,
#displaySettings #effectsToggle[aria-pressed="true"] .display-mode-check::after {
  transform: translateX(19px) !important;
  background: var(--uih-green) !important;
}

/* Ya no hace falta el resaltado tipo radio de la versión anterior. */
#displaySettings #displayModeFit[aria-pressed="true"],
#displaySettings #menuMusicToggle[aria-pressed="true"],
#displaySettings #effectsToggle[aria-pressed="true"] {
  background: transparent !important;
}

/* Copys exactamente en el espíritu del ejemplo mostrado. */
#displaySettings .display-mode-copy strong {
  font-size: .86rem !important;
  font-weight: 760 !important;
}

#displaySettings .display-mode-copy small {
  margin-top: 2px !important;
  color: rgba(219,235,226,.60) !important;
  font-size: .66rem !important;
}

/* Oculta cualquier check de texto heredado: el estado lo comunica el switch. */
#displaySettings .display-mode-check {
  text-indent: -9999px;
}

@media (max-width: 380px) {
  body:not(.game-open) #btnMenuSettings {
    top: -47px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* ================================================================
   FASE 2.3 · ESTABILIDAD DE MENÚ + AJUSTES + FONDO DINÁMICO
   ------------------------------------------------
   - Ajustes vuelve a su ubicación ORIGINAL dentro de "Más".
   - "Más" flota sobre el menú y ya no altera la altura/composición.
   - Ajustes muestra SOLO tres filas visibles, todas como switch.
   - El bottom-sheet puede cerrarse con X, tocando fuera o deslizando.
   - Lluvia sutil de mini-cartas creada por js/ui-hybrid.js.
   - No toca la mesa ni los módulos funcionales del juego.
   ================================================================ */

/* ------------------------------------------------
   MENÚ · AJUSTES VUELVE A "MÁS"
   Neutraliza únicamente los overrides visuales de Fase 2.1/2.2
   que lo convertían en engranaje flotante.
   ------------------------------------------------ */
body:not(.game-open) #menuMorePanel #btnMenuSettings {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 9px 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 0 !important;
  color: rgba(242,247,244,.90) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

body:not(.game-open) #menuMorePanel #btnMenuSettings > span {
  display: inline !important;
}

body:not(.game-open) #menuMorePanel #btnMenuSettings::before {
  content: none !important;
  display: none !important;
}

body:not(.game-open) #menuMorePanel #btnMenuSettings:active {
  transform: none !important;
  background: rgba(87,212,154,.07) !important;
}

/* ------------------------------------------------
   PANEL "MÁS" · FLOTANTE, SIN EMPUJAR EL MENÚ
   La coordenada --uih-more-top la calcula ui-hybrid.js según la
   posición real de los tres accesos rápidos.
   ------------------------------------------------ */
body:not(.game-open) .desmoche-main-menu.glass-card {
  overflow: visible !important;
}

body:not(.game-open) #menuMorePanel {
  position: absolute !important;
  z-index: 40 !important;
  top: var(--uih-more-top, 340px) !important;
  left: 50% !important;
  width: min(calc(100% - 36px), 318px) !important;
  max-width: 318px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.065) !important;
}

body:not(.game-open) #menuMorePanel[hidden] {
  display: none !important;
}

body:not(.game-open) #menuMorePanel:not([hidden]) {
  display: block !important;
  animation: uihMoreIn .16s ease-out both;
}

@keyframes uihMoreIn {
  from { opacity: 0; transform: translate(-50%, -7px) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ------------------------------------------------
   AJUSTES · BOTTOM SHEET LIMPIO
   ------------------------------------------------ */
#displaySettings[hidden] {
  display: none !important;
}

#displaySettings:not([hidden]) {
  display: flex !important;
}

#displaySettings .display-settings-card {
  max-height: none !important;
  overflow: hidden !important;
  touch-action: pan-x !important;
  transform: translate3d(0,0,0);
  transition: transform .22s cubic-bezier(.22,.75,.26,1);
  will-change: transform;
}

#displaySettings .display-settings-card.uih-sheet-dragging {
  animation: none !important;
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
}

#displaySettings:not([hidden]) .display-settings-card:not(.uih-sheet-dragging) {
  animation: uihSheetIn .22s cubic-bezier(.22,.75,.26,1) both;
}

@keyframes uihSheetIn {
  from { opacity: .78; transform: translate3d(0,34px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

/* Solo tres controles visibles. Los elementos originales siguen en DOM. */
#displaySettings #displayModeLarge,
#displaySettings #menuMusicVolumeRow,
#displaySettings #effectsVolumeRow {
  display: none !important;
}

#displaySettings .display-settings-head {
  margin-bottom: 4px !important;
  padding: 8px 2px 15px !important;
}

#displaySettings .display-settings-card::before {
  margin-bottom: 10px !important;
  cursor: grab;
}

#displaySettings .display-mode-option {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 48px !important;
  gap: 11px !important;
  min-height: 72px !important;
  padding: 11px 7px !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  background: transparent !important;
}

#displaySettings .display-mode-option:last-of-type {
  border-bottom: 0 !important;
}

#displaySettings .display-mode-copy strong {
  color: #f0f7f3 !important;
  font-size: .88rem !important;
  font-weight: 780 !important;
}

#displaySettings .display-mode-copy small {
  color: rgba(220,235,227,.62) !important;
  font-size: .65rem !important;
  line-height: 1.28 !important;
}

/* Un único patrón de switch para las tres filas. */
#displaySettings #displayModeFit .display-mode-check,
#displaySettings #menuMusicToggle .display-mode-check,
#displaySettings #effectsToggle .display-mode-check {
  position: relative !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 28px !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
  color: transparent !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.085) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18) !important;
}

#displaySettings #displayModeFit .display-mode-check::after,
#displaySettings #menuMusicToggle .display-mode-check::after,
#displaySettings #effectsToggle .display-mode-check::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #8da299 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.26) !important;
  transform: translateX(0) !important;
  transition: transform .18s ease, background .18s ease !important;
}

#displaySettings #displayModeFit[aria-pressed="true"] .display-mode-check,
#displaySettings #menuMusicToggle[aria-pressed="true"] .display-mode-check,
#displaySettings #effectsToggle[aria-pressed="true"] .display-mode-check {
  border-color: rgba(87,212,154,.30) !important;
  background: rgba(87,212,154,.21) !important;
}

#displaySettings #displayModeFit[aria-pressed="true"] .display-mode-check::after,
#displaySettings #menuMusicToggle[aria-pressed="true"] .display-mode-check::after,
#displaySettings #effectsToggle[aria-pressed="true"] .display-mode-check::after {
  transform: translateX(20px) !important;
  background: var(--uih-green) !important;
}

/* ------------------------------------------------
   LLUVIA SUTIL DE MINI-CARTAS
   ------------------------------------------------ */
.uih-card-rain {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

body.game-open .uih-card-rain {
  display: none !important;
}

.uih-falling-card {
  --uih-card-rot: 8deg;
  --uih-card-drift: 22px;
  position: absolute;
  top: -90px;
  left: var(--uih-card-left, 50%);
  width: var(--uih-card-w, 25px);
  height: calc(var(--uih-card-w, 25px) * 1.42);
  display: grid;
  place-items: center;
  border: 1px solid rgba(121,220,172,.12);
  border-radius: 5px;
  color: rgba(167,229,198,.18);
  background:
    linear-gradient(145deg, rgba(66,143,106,.11), rgba(5,29,21,.18)),
    rgba(255,255,255,.018);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--uih-card-w, 25px) * .54);
  opacity: var(--uih-card-opacity, .28);
  transform: rotate(var(--uih-card-rot));
  animation: uihCardFall var(--uih-card-duration, 13s) linear var(--uih-card-delay, 0s) infinite;
}

.uih-falling-card::before {
  content: attr(data-suit);
}

.uih-falling-card::after {
  content: attr(data-suit);
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 6px;
  opacity: .65;
}

@keyframes uihCardFall {
  0% {
    transform: translate3d(0,-12vh,0) rotate(var(--uih-card-rot));
    opacity: 0;
  }
  8% {
    opacity: var(--uih-card-opacity, .28);
  }
  52% {
    transform: translate3d(var(--uih-card-drift),55vh,0) rotate(calc(var(--uih-card-rot) + 110deg));
  }
  92% {
    opacity: var(--uih-card-opacity, .28);
  }
  100% {
    transform: translate3d(calc(var(--uih-card-drift) * -.45),118vh,0) rotate(calc(var(--uih-card-rot) + 220deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uih-falling-card {
    animation: none !important;
    display: none !important;
  }
}

/* ================================================================
   FASE 2.4 · REDISEÑO EXCLUSIVO DEL HOME
   ------------------------------------------------
   - Conserva el UX y los mismos botones/IDs de v162.
   - Ajustes vuelve arriba, usando el MISMO #btnMenuSettings.
   - La lluvia de mini-cartas de Fase 2.3 se conserva.
   - Más sigue siendo flotante y no altera el layout.
   - No toca pantallas internas ni mesa.
   ================================================================ */

/* ESCENA: menos "tarjeta bancaria", más portada de juego */
body:not(.game-open) .game-container {
  padding: 18px 16px 22px !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(62, 211, 144, .12), transparent 25%),
    radial-gradient(circle at 15% 8%, rgba(87, 212, 154, .10), transparent 26%),
    radial-gradient(circle at 90% 14%, rgba(240, 203, 114, .055), transparent 22%),
    linear-gradient(180deg, #0a291f 0%, #061a14 54%, #03100c 100%) !important;
}

body:not(.game-open) .bg-glow {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(87,212,154,.075), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.18) 62%, rgba(0,0,0,.38)) !important;
}

body:not(.game-open) .corner-ornament {
  width: 48px !important;
  height: 48px !important;
  opacity: .13 !important;
}

/* Barra visual superior: símbolo a la izquierda, Ajustes a la derecha. */
body:not(.game-open) .top-logo {
  top: 24px !important;
  left: 22px !important;
  width: 42px !important;
  height: 42px !important;
  transform: none !important;
  border-radius: 14px !important;
  color: #eff8f3 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    rgba(18, 70, 51, .70) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.14),
    0 10px 26px rgba(0,0,0,.22) !important;
  font-size: 19px !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings {
  position: absolute !important;
  z-index: 70 !important;
  top: 24px !important;
  right: 22px !important;
  left: auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  color: #edf7f2 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.03)),
    rgba(12, 49, 36, .72) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.11),
    0 10px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
  transform: none !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings > span {
  display: none !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings::before {
  content: "" !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  background-color: currentColor !important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94a7.5 7.5 0 0 0 .05-.94 7.5 7.5 0 0 0-.05-.94l2.03-1.58-1.92-3.32-2.39.96a7.2 7.2 0 0 0-1.62-.94L14.88 3h-3.84l-.36 2.18a7.2 7.2 0 0 0-1.62.94l-2.39-.96-1.92 3.32 2.03 1.58a7.5 7.5 0 0 0-.05.94c0 .32.02.63.05.94l-2.03 1.58 1.92 3.32 2.39-.96c.5.39 1.04.71 1.62.94l.36 2.18h3.84l.36-2.18a7.2 7.2 0 0 0 1.62-.94l2.39.96 1.92-3.32-2.03-1.58ZM12.96 15.3a3.4 3.4 0 1 1-1.92-6.52 3.4 3.4 0 0 1 1.92 6.52Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94a7.5 7.5 0 0 0 .05-.94 7.5 7.5 0 0 0-.05-.94l2.03-1.58-1.92-3.32-2.39.96a7.2 7.2 0 0 0-1.62-.94L14.88 3h-3.84l-.36 2.18a7.2 7.2 0 0 0-1.62.94l-2.39-.96-1.92 3.32 2.03 1.58a7.5 7.5 0 0 0-.05.94c0 .32.02.63.05.94l-2.03 1.58 1.92 3.32 2.39-.96c.5.39 1.04.71 1.62.94l.36 2.18h3.84l.36-2.18a7.2 7.2 0 0 0 1.62-.94l2.39.96 1.92-3.32-2.03-1.58ZM12.96 15.3a3.4 3.4 0 1 1-1.92-6.52 3.4 3.4 0 0 1 1.92 6.52Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings:active {
  transform: scale(.94) !important;
}

/* El Home ya no es un gran bloque glass único. */
body:not(.game-open) .desmoche-main-menu.glass-card {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 360px !important;
  margin-top: 62px !important;
  padding: 26px 10px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* Dos cartas ambientales detrás de la marca. */
body:not(.game-open) .desmoche-main-menu.glass-card::before,
body:not(.game-open) .desmoche-main-menu.glass-card::after {
  position: absolute !important;
  z-index: -1 !important;
  top: -3px !important;
  width: 108px !important;
  height: 150px !important;
  border: 1px solid rgba(115, 220, 169, .08) !important;
  border-radius: 18px !important;
  color: rgba(104, 207, 158, .075) !important;
  background:
    linear-gradient(145deg, rgba(49, 122, 87, .11), rgba(4, 27, 19, .08)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 4.2rem !important;
  line-height: 150px !important;
  text-align: center !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
body:not(.game-open) .desmoche-main-menu.glass-card::before {
  content: "♣" !important;
  left: -31px !important;
  right: auto !important;
  transform: rotate(-15deg) !important;
}
body:not(.game-open) .desmoche-main-menu.glass-card::after {
  content: "♠" !important;
  right: -31px !important;
  left: auto !important;
  transform: rotate(14deg) !important;
}

/* Marca central, pero con más aire de videojuego. */
body:not(.game-open) .desmoche-wordmark.title {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto !important;
  font-size: clamp(2.35rem, 11.2vw, 3.35rem) !important;
  line-height: .95 !important;
  letter-spacing: .018em !important;
  text-shadow: 0 9px 26px rgba(0,0,0,.34) !important;
}

body:not(.game-open) .menu-title-divider {
  width: 66% !important;
  margin: 14px auto 0 !important;
}

body:not(.game-open) .menu-subtitle.subtitle {
  margin: 8px auto 28px !important;
  color: #a9c1b5 !important;
  font-size: .59rem !important;
  letter-spacing: .25em !important;
}

/* Acción principal: claramente el centro de la pantalla. */
body:not(.game-open) .menu-primary-actions {
  max-width: 326px !important;
}

body:not(.game-open) .desmoche-main-menu .btn.menu-primary-action {
  min-height: 68px !important;
  margin-bottom: 9px !important;
  padding: 10px 13px !important;
  border-radius: 19px !important;
}

body:not(.game-open) .desmoche-main-menu .btn-offline.menu-primary-action {
  min-height: 74px !important;
  border: 1px solid rgba(139, 241, 192, .50) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.19), transparent 28%),
    linear-gradient(180deg, #66dda7 0%, #3bc287 100%) !important;
  box-shadow:
    0 16px 34px rgba(43, 193, 127, .23),
    inset 0 1px rgba(255,255,255,.48) !important;
}

body:not(.game-open) .btn-offline .menu-action-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}

body:not(.game-open) .btn-offline .menu-action-copy strong {
  font-size: 1.02rem !important;
}

body:not(.game-open) .btn-continue.menu-primary-action {
  min-height: 62px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    rgba(7, 35, 26, .67) !important;
  border-color: rgba(255,255,255,.105) !important;
}

/* Accesos: compactos y claramente secundarios. */
body:not(.game-open) .menu-quick-actions {
  max-width: 326px !important;
  margin-top: 10px !important;
  gap: 8px !important;
}

body:not(.game-open) .menu-quick-button {
  min-height: 72px !important;
  padding: 9px 5px !important;
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(6, 32, 23, .55) !important;
  border-color: rgba(255,255,255,.085) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    0 9px 22px rgba(0,0,0,.10) !important;
}

body:not(.game-open) .menu-quick-icon {
  width: 33px !important;
  height: 33px !important;
  border-radius: 11px !important;
}

/* Más permanece flotante y ahora se alinea con el nuevo ancho. */
body:not(.game-open) #menuMorePanel {
  width: min(calc(100% - 20px), 326px) !important;
  max-width: 326px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    rgba(4, 27, 19, .94) !important;
  box-shadow:
    0 20px 44px rgba(0,0,0,.44),
    inset 0 1px rgba(255,255,255,.06) !important;
}

/* Ya no hay fila Ajustes dentro de Más porque el MISMO botón se movió arriba. */
body:not(.game-open) #menuMorePanel #btnMenuSettings {
  display: none !important;
}

body:not(.game-open) .menu-version-footer {
  margin-top: 17px !important;
}

/* La lluvia siempre queda detrás del Home. */
body:not(.game-open) .uih-card-rain {
  z-index: 2 !important;
  opacity: .82 !important;
}

body:not(.game-open) .uih-falling-card {
  filter: saturate(.90) brightness(.92) !important;
}

@media (max-width: 380px) {
  body:not(.game-open) .game-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body:not(.game-open) .top-logo {
    left: 16px !important;
  }

  body:not(.game-open) #btnMenuSettings.uih-home-settings {
    top: 24px !important;
    right: 16px !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  body:not(.game-open) .desmoche-main-menu.glass-card {
    margin-top: 58px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body:not(.game-open) .desmoche-main-menu.glass-card::before {
    left: -42px !important;
  }
  body:not(.game-open) .desmoche-main-menu.glass-card::after {
    right: -42px !important;
  }
}

@media (max-height: 690px) {
  body:not(.game-open) .game-container {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
  body:not(.game-open) .desmoche-main-menu.glass-card {
    margin-top: 50px !important;
    padding-top: 16px !important;
  }
  body:not(.game-open) .menu-subtitle.subtitle {
    margin-bottom: 18px !important;
  }
  body:not(.game-open) .desmoche-main-menu .btn-offline.menu-primary-action {
    min-height: 68px !important;
  }
  body:not(.game-open) .menu-quick-button {
    min-height: 64px !important;
  }
  body:not(.game-open) .menu-version-footer {
    margin-top: 11px !important;
  }
}

/* ================================================================
   FASE 2.5 · HOME: ORDEN DE JUEGO + AJUSTES NATURAL
   ------------------------------------------------
   - Elimina marcos ornamentales de las esquinas.
   - Ajustes vive realmente en la esquina superior derecha.
   - Jugar Online se reutiliza debajo de Jugar Offline y queda disabled.
   - Continuar Offline queda debajo de Online cuando el motor lo muestra.
   - Bottom sheet de Ajustes sigue el dedo al arrastrar.
   ================================================================ */

/* Sin marcos decorativos: dejamos respirar la lluvia y las cartas. */
body:not(.game-open) .corner-ornament {
  display: none !important;
}

/* El logo y Ajustes forman una barra superior real y simétrica. */
body:not(.game-open) .top-logo {
  top: 22px !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 15px !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings {
  position: absolute !important;
  z-index: 80 !important;
  top: 22px !important;
  right: 20px !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: #edf8f2 !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), transparent 42%),
    rgba(14, 58, 43, .74) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.11),
    0 10px 25px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
}

/* Ya no se superpone con la marca central. */
body:not(.game-open) .desmoche-main-menu.glass-card {
  margin-top: 72px !important;
}

/* ------------------------------------------------
   ACCIONES PRINCIPALES
   OFFLINE -> ONLINE (disabled) -> CONTINUAR (si existe)
   ------------------------------------------------ */
body:not(.game-open) .menu-primary-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body:not(.game-open) .desmoche-main-menu .btn.menu-primary-action,
body:not(.game-open) .menu-primary-actions .uih-online-primary {
  margin: 0 !important;
}

body:not(.game-open) .menu-primary-actions .uih-online-primary {
  position: relative !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 12px !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 18px !important;
  color: rgba(229,240,234,.55) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(5, 27, 20, .58) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  opacity: .78 !important;
  cursor: not-allowed !important;
  text-align: left !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

body:not(.game-open) .menu-primary-actions .uih-online-primary::before {
  content: "" !important;
  width: 38px !important;
  height: 38px !important;
  display: block !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background-color: rgba(214,232,223,.48) !important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 9h-3.03a15.7 15.7 0 0 0-1.18-5A8.03 8.03 0 0 1 18.92 11ZM12 4c.82 0 2.04 2.46 2.28 7H9.72C9.96 6.46 11.18 4 12 4ZM9.29 6A15.7 15.7 0 0 0 8.11 11H5.08A8.03 8.03 0 0 1 9.29 6ZM5.08 13h3.03a15.7 15.7 0 0 0 1.18 5A8.03 8.03 0 0 1 5.08 13ZM12 20c-.82 0-2.04-2.46-2.28-7h4.56c-.24 4.54-1.46 7-2.28 7Zm2.71-2a15.7 15.7 0 0 0 1.18-5h3.03A8.03 8.03 0 0 1 14.71 18Z'/%3E%3C/svg%3E") center/21px 21px no-repeat !important;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.92 9h-3.03a15.7 15.7 0 0 0-1.18-5A8.03 8.03 0 0 1 18.92 11ZM12 4c.82 0 2.04 2.46 2.28 7H9.72C9.96 6.46 11.18 4 12 4ZM9.29 6A15.7 15.7 0 0 0 8.11 11H5.08A8.03 8.03 0 0 1 9.29 6ZM5.08 13h3.03a15.7 15.7 0 0 0 1.18 5A8.03 8.03 0 0 1 5.08 13ZM12 20c-.82 0-2.04-2.46-2.28-7h4.56c-.24 4.54-1.46 7-2.28 7Zm2.71-2a15.7 15.7 0 0 0 1.18-5h3.03A8.03 8.03 0 0 1 14.71 18Z'/%3E%3C/svg%3E") center/21px 21px no-repeat !important;
}

body:not(.game-open) .menu-primary-actions .uih-online-primary > span:first-child {
  min-width: 0 !important;
  color: rgba(235,244,239,.62) !important;
  font-size: .84rem !important;
  font-weight: 780 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}

body:not(.game-open) .menu-primary-actions .uih-online-primary > span:last-child {
  padding: 4px 7px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 999px !important;
  color: rgba(218,232,225,.48) !important;
  background: rgba(255,255,255,.025) !important;
  font-size: .50rem !important;
  font-weight: 760 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Continuar conserva su hidden original. Cuando aparece, ya está debajo. */
body:not(.game-open) #btnContinueGame.menu-continue-action:not([hidden]) {
  display: grid !important;
  min-height: 62px !important;
}

body:not(.game-open) #btnContinueGame .continue-main {
  font-size: clamp(.76rem, 3.4vw, .92rem) !important;
  line-height: 1.08 !important;
}

/* ------------------------------------------------
   AJUSTES · ARRASTRE NATURAL
   ------------------------------------------------ */
#displaySettings {
  --uih-sheet-backdrop: .58;
  background: rgba(0, 9, 6, var(--uih-sheet-backdrop)) !important;
}

#displaySettings .display-settings-card {
  touch-action: none !important;
  overscroll-behavior: contain !important;
  overflow: hidden !important;
  max-height: none !important;
}

#displaySettings .display-settings-card::before {
  width: 52px !important;
  height: 5px !important;
  margin: 2px auto 9px !important;
  background: rgba(224,241,233,.28) !important;
  cursor: grab !important;
}

#displaySettings .display-settings-head {
  position: static !important;
  top: auto !important;
  padding-top: 6px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: grab !important;
}

#displaySettings .display-settings-card.uih-sheet-dragging,
#displaySettings .display-settings-card.uih-sheet-dragging .display-settings-head {
  cursor: grabbing !important;
}

/* En pantallas estrechas mantenemos ambos controles superiores con aire. */
@media (max-width: 380px) {
  body:not(.game-open) .top-logo {
    left: 15px !important;
  }

  body:not(.game-open) #btnMenuSettings.uih-home-settings {
    right: 15px !important;
  }

  body:not(.game-open) .desmoche-main-menu.glass-card {
    margin-top: 70px !important;
  }
}


/* ================================================================
   FASE 2.6 · HOME POLISH + MICROINTERACCIONES
   ------------------------------------------------
   - Ajustes: mismo botón original, sin marco visible y centrado.
   - Marca superior izquierda: acceso visual a Acerca de DESMOCHEE.
   - Ripple + mini-carta al tocar/clicar fondo libre del Home.
   - Todo queda por detrás de los controles y fuera de la mesa.
   ================================================================ */

/* AJUSTES: gran zona táctil invisible, engranaje desnudo y centrado. */
body:not(.game-open) #btnMenuSettings.uih-home-settings {
  top: 22px !important;
  right: 19px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  display: block !important;
  color: rgba(238,248,243,.92) !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: 50% 50% !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings:hover,
body:not(.game-open) #btnMenuSettings.uih-home-settings:focus-visible {
  border: 0 !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
  outline: none !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings:active {
  transform: none !important;
  background: rgba(87,212,154,.075) !important;
}

body:not(.game-open) #btnMenuSettings.uih-home-settings:active::before {
  transform: translate(-50%, -50%) scale(.90) !important;
}

/* Marca izquierda: conserva la identidad del palo pero se siente como
   un pequeño control de marca, no como otro botón de menú. */
body:not(.game-open) .top-logo.uih-about-trigger {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: transform .16s ease, color .16s ease, opacity .16s ease !important;
}
body:not(.game-open) .top-logo.uih-about-trigger:active {
  transform: scale(.92) !important;
}
body:not(.game-open) .top-logo.uih-about-trigger:focus-visible {
  outline: 2px solid rgba(87,212,154,.42) !important;
  outline-offset: 3px !important;
}

/* Capa de efectos nacidos del toque. Nunca intercepta interacción. */
.uih-touch-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
body.game-open .uih-touch-fx {
  display: none !important;
}

.uih-touch-ripple {
  --uih-ripple-size: 18px;
  position: absolute;
  width: var(--uih-ripple-size);
  height: var(--uih-ripple-size);
  margin-left: calc(var(--uih-ripple-size) / -2);
  margin-top: calc(var(--uih-ripple-size) / -2);
  border: 1.5px solid rgba(131,231,183,.56);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(73,207,146,.15);
  opacity: 0;
  transform: scale(.25);
  animation: uihTapRipple .62s cubic-bezier(.18,.76,.26,1) forwards;
}

@keyframes uihTapRipple {
  0%   { opacity: .72; transform: scale(.25); }
  60%  { opacity: .28; }
  100% { opacity: 0; transform: scale(4.6); }
}

.uih-touch-card {
  --uih-touch-rot: 0deg;
  --uih-touch-drift-x: 18px;
  --uih-touch-drift-y: 82px;
  position: absolute;
  width: 25px;
  height: 35px;
  margin-left: -12.5px;
  margin-top: -17.5px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(123,220,173,.24);
  border-radius: 6px;
  color: rgba(181,236,209,.52);
  background:
    linear-gradient(145deg, rgba(72,151,112,.21), rgba(5,31,22,.28)),
    rgba(255,255,255,.025);
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 8px 18px rgba(0,0,0,.15);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(var(--uih-touch-rot)) scale(.72);
  animation: uihTouchCardBirth 1.95s cubic-bezier(.18,.70,.20,1) forwards;
}

.uih-touch-card[data-suit="♥"],
.uih-touch-card[data-suit="♦"] {
  color: rgba(235,163,157,.46);
  border-color: rgba(231,136,131,.15);
}

.uih-touch-card::before { content: attr(data-suit); }
.uih-touch-card::after {
  content: attr(data-suit);
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 6px;
  opacity: .62;
}

@keyframes uihTouchCardBirth {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) rotate(var(--uih-touch-rot)) scale(.55);
  }
  16% { opacity: .58; }
  52% {
    opacity: .42;
    transform: translate3d(calc(var(--uih-touch-drift-x) * .45),30px,0)
      rotate(calc(var(--uih-touch-rot) + 28deg)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--uih-touch-drift-x),var(--uih-touch-drift-y),0)
      rotate(calc(var(--uih-touch-rot) + 82deg)) scale(.82);
  }
}

/* Acerca de DESMOCHEE: panel ligero de la misma familia Glass. */
.uih-about-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0,10,7,.54);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: uihAboutFade .18s ease-out;
}
.uih-about-overlay[hidden] { display: none !important; }

.uih-about-sheet {
  width: min(100%, 430px);
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 26px;
  padding: 9px 16px calc(20px + env(safe-area-inset-bottom));
  color: #f2f8f5;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(7,35,25,.94);
  box-shadow:
    0 24px 58px rgba(0,0,0,.44),
    inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  animation: uihAboutUp .22s cubic-bezier(.2,.78,.25,1);
}
.uih-about-handle {
  width: 42px;
  height: 4px;
  margin: 2px auto 14px;
  border-radius: 99px;
  background: rgba(255,255,255,.15);
}
.uih-about-head {
  display: grid;
  grid-template-columns: 44px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.uih-about-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #f1f8f4;
  background: rgba(87,212,154,.11);
  border: 1px solid rgba(87,212,154,.16);
  font-family: Georgia, serif;
  font-size: 22px;
}
.uih-about-title strong {
  display: block;
  font-size: .92rem;
  letter-spacing: .08em;
}
.uih-about-title small {
  display: block;
  margin-top: 2px;
  color: #91aa9e;
  font-size: .60rem;
}
.uih-about-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  color: #dce9e3;
  background: rgba(255,255,255,.045);
  font-size: 20px;
}
.uih-about-copy {
  margin: 16px 0 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.028);
  color: #b6c9c0;
  font-size: .70rem;
  line-height: 1.55;
}
.uih-about-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px 0;
  color: #718a7e;
  font-size: .56rem;
}

@keyframes uihAboutFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uihAboutUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .uih-touch-ripple,
  .uih-touch-card,
  .uih-about-overlay,
  .uih-about-sheet {
    animation: none !important;
  }
}

/* ================================================================
   FASE 3 · MESA / HUD EXTERIOR
   ------------------------------------------------
   Objetivo:
   - Llevar la identidad verde + Glass del Home a la partida.
   - SOLO presentación exterior: fondo, HUD, nombres, estado y botones.
   - NO modifica tamaños/posición de cartas, mazo, descarte ni zonas drop.
   - NO modifica HTML ni JavaScript funcional.
   ================================================================ */

/* Escena de juego: más cercana al Home sin cambiar geometría. */
.game-screen {
  background:
    radial-gradient(circle at 50% 12%, rgba(87, 212, 154, .075), transparent 28%),
    #020b08 !important;
}

.game-screen .pilot-table {
  background:
    radial-gradient(circle at 50% 35%, rgba(85, 207, 150, .105), transparent 34%),
    radial-gradient(circle at 12% 78%, rgba(240, 203, 114, .035), transparent 24%),
    linear-gradient(180deg, #0b291f 0%, #071d16 50%, #03110d 100%) !important;
}

/* Textura extremadamente sutil tipo mesa. */
.game-screen .pilot-table::before {
  background:
    linear-gradient(rgba(255,255,255,.010) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.010) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
  opacity: .48 !important;
}

/* El marco dorado antiguo se vuelve una línea verde casi invisible. */
.game-screen .pilot-table::after {
  border-left-color: rgba(95, 213, 160, .085) !important;
  border-right-color: rgba(95, 213, 160, .085) !important;
}

/* Tipografía de interfaz: moderna. No tocamos texto de las cartas. */
.game-screen,
.game-screen button:not(.playing-card),
.game-screen input,
.game-screen select {
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* ------------------------------
   HEADER / HUD SUPERIOR
   ------------------------------ */
.game-screen .pilot-header {
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(5, 31, 22, .42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.065),
    inset 0 1px rgba(255,255,255,.05),
    0 8px 20px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.game-screen .pilot-header::after {
  background: linear-gradient(90deg, transparent, rgba(87,212,154,.18), transparent) !important;
}

.game-screen .pilot-title {
  color: #f3f8f5 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: .075em !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.25) !important;
}

.game-screen .pilot-subtitle {
  color: rgba(164, 192, 178, .78) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: .025em !important;
}

.game-screen .pilot-back,
.game-screen .game-pause-button,
.game-screen .game-settings-button {
  color: #e8f4ee !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
}

.game-screen .pilot-back:active,
.game-screen .game-pause-button:not(:disabled):active,
.game-screen .game-settings-button:active {
  background: rgba(87,212,154,.095) !important;
}

.game-screen .match-clock {
  color: #d7e7df !important;
  border-color: rgba(87,212,154,.13) !important;
  background: rgba(87,212,154,.055) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

/* ------------------------------
   RIVALES / INDICADOR DE TURNO
   ------------------------------ */
.game-screen .bot-seat {
  border-color: rgba(255,255,255,.075) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    rgba(4, 29, 21, .46) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 7px 16px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.game-screen .bot-seat.active-turn {
  border-color: rgba(87,212,154,.44) !important;
  box-shadow:
    inset 0 0 0 1px rgba(87,212,154,.075),
    0 0 18px rgba(87,212,154,.075) !important;
}

.game-screen .bot-seat-title,
.game-screen .human-name {
  color: #eef7f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
}

.game-screen .bot-seat-count,
.game-screen .human-count {
  color: rgba(164, 190, 177, .70) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* ------------------------------
   CENTRO DE MESA
   No se toca pile-card / deck / discard ni drop zones.
   ------------------------------ */
.game-screen .table-center {
  border-color: rgba(255,255,255,.075) !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.024), transparent 46%),
    rgba(2, 20, 14, .27) !important;
  box-shadow:
    inset 0 0 0 1px rgba(87,212,154,.025),
    inset 0 18px 34px rgba(255,255,255,.010),
    0 12px 28px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.game-screen .turn-message {
  color: #bfe8d3 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-shadow: 0 0 14px rgba(87,212,154,.08) !important;
}

.game-screen .pile-label,
.game-screen .melds-label,
.game-screen .draft-title,
.game-screen .special-card-title {
  color: #a9c9b9 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
}

.game-screen .pile-count,
.game-screen .pilot-status,
.game-screen .hand-hint,
.game-screen .draft-count,
.game-screen .draft-hint,
.game-screen .special-card-hint {
  color: rgba(157, 185, 171, .66) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

.game-screen .pilot-status {
  text-shadow: 0 1px 8px rgba(0,0,0,.22);
}

/* Reclamos/eventos: mismo Glass, sin cambiar estructura. */
.game-screen .claim-event-banner {
  border-color: rgba(240,203,114,.17) !important;
  background:
    linear-gradient(145deg, rgba(240,203,114,.060), rgba(255,255,255,.018)),
    rgba(16, 35, 27, .72) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ------------------------------
   ZONA DEL JUGADOR
   Solo panel exterior + títulos. No cartas, draft ni drop geometry.
   ------------------------------ */
.game-screen .human-zone {
  border-color: rgba(255,255,255,.075) !important;
  background:
    linear-gradient(180deg, rgba(87,212,154,.045), rgba(255,255,255,.012)),
    rgba(3, 27, 19, .43) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.game-screen .human-zone.active-turn {
  border-color: rgba(87,212,154,.38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(87,212,154,.055),
    0 0 22px rgba(87,212,154,.055) !important;
}

.game-screen .human-title {
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
}

.game-screen .human-melds-zone,
.game-screen .human-draft-zone,
.game-screen .special-card-slot {
  border-color: rgba(255,255,255,.065) !important;
  background-color: rgba(0,0,0,.105) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.020) !important;
}

.game-screen .melds-label::after {
  background: linear-gradient(90deg, rgba(87,212,154,.16), transparent) !important;
}

.game-screen .draft-header {
  border-bottom-color: rgba(87,212,154,.10) !important;
}

/* ------------------------------
   BOTONES DE ACCIÓN
   Misma geometría actual; solo piel visual.
   ------------------------------ */
.game-screen .pilot-actions {
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.008)),
    rgba(2, 22, 15, .30) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 8px 20px rgba(0,0,0,.08) !important;
}

.game-screen .pilot-action,
.game-screen .discard-choice-button,
.game-screen .new-card-choice-button,
.game-screen .special-card-action {
  color: #e8f4ee !important;
  border-color: rgba(255,255,255,.09) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(8, 42, 30, .70) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  text-shadow: none !important;
}

.game-screen .pilot-action.primary,
.game-screen .discard-choice-button.primary,
.game-screen .new-card-choice-button.primary,
.game-screen .special-card-action.primary {
  color: #062218 !important;
  border-color: rgba(87,212,154,.32) !important;
  background: linear-gradient(180deg, #69dda9, #3fc58c) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.40),
    0 8px 20px rgba(55,190,131,.12) !important;
}

.game-screen .pilot-action.pass-game {
  border-color: rgba(143,180,162,.11) !important;
  background: rgba(255,255,255,.028) !important;
}

.game-screen .pilot-action.new-round {
  border-color: rgba(240,203,114,.13) !important;
  color: #dccb9f !important;
  background: rgba(240,203,114,.045) !important;
}

.game-screen .pilot-action.traditional-claim {
  border-color: rgba(239,111,108,.25) !important;
  color: #f2b1ad !important;
  background: rgba(239,111,108,.065) !important;
}

.game-screen .pilot-action:disabled,
.game-screen .discard-choice-button:disabled,
.game-screen .new-card-choice-button:disabled,
.game-screen .special-card-action:disabled {
  opacity: .34 !important;
  filter: saturate(.55) !important;
}

.game-screen .pilot-action:active:not(:disabled),
.game-screen .discard-choice-button:active:not(:disabled),
.game-screen .new-card-choice-button:active:not(:disabled),
.game-screen .special-card-action:active:not(:disabled) {
  filter: brightness(1.08) !important;
}

/* Decisiones contextuales en mesa. */
.game-screen .discard-choice,
.game-screen .new-card-choice {
  border-color: rgba(87,212,154,.10) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.010)),
    rgba(3, 28, 20, .78) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.game-screen .discard-choice-text,
.game-screen .new-card-choice-text {
  color: #cfdfd7 !important;
}

/* Laboratorio: solo la barra superior para que no parezca otra app. */
.game-screen .lab-toolbar {
  border-color: rgba(255,255,255,.07) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,.008)),
    rgba(4, 29, 21, .52) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

.game-screen .lab-tool-btn {
  border-color: rgba(255,255,255,.075) !important;
  color: #d8e8e0 !important;
  background: rgba(255,255,255,.028) !important;
}

.game-screen .lab-toolbar-label {
  color: #9db9ac !important;
}
/* ============================================================
   DESMOCHEE · UI HÍBRIDA · FASE 4
   Overlays de partida
   ------------------------------------------------------------
   Alcance visual únicamente:
   - Pausa
   - Resultado / victoria / derrota
   - Cambio de ronda
   - Confirmaciones internas
   - Toasts y avisos/reclamos
   No modifica geometría de cartas, drops, mano ni motor.
   ============================================================ */

:root {
  --uih-overlay-bg: rgba(0, 10, 7, .76);
  --uih-glass-card:
    linear-gradient(145deg, rgba(255,255,255,.090), rgba(255,255,255,.022) 46%, rgba(87,212,154,.030)),
    rgba(7, 35, 25, .91);
  --uih-glass-row:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
    rgba(5, 31, 22, .58);
  --uih-overlay-line: rgba(255,255,255,.095);
  --uih-overlay-line-green: rgba(87,212,154,.20);
  --uih-overlay-text: #f1f7f4;
  --uih-overlay-muted: rgba(177, 203, 190, .70);
  --uih-overlay-green: #59d59b;
  --uih-overlay-green-2: #3fc58c;
  --uih-overlay-gold: #e7c96f;
}

/* ---------- Fondo común de overlays ---------- */
.pause-overlay,
.result-overlay,
.round-overlay,
.desmoche-confirm-overlay {
  background: var(--uih-overlay-bg) !important;
  backdrop-filter: blur(13px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(13px) saturate(112%) !important;
}

/* ---------- Tarjeta Glass común ---------- */
.pause-card,
.result-card,
.round-card,
.game-screen.display-fit .round-card,
.desmoche-confirm-card {
  border: 1px solid var(--uih-overlay-line) !important;
  border-radius: 26px !important;
  color: var(--uih-overlay-text) !important;
  background: var(--uih-glass-card) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.095),
    0 24px 65px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(22px) saturate(122%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(122%) !important;
}

/* Elimina ornamentos viejos de pausa. */
.pause-card::before,
.pause-card::after {
  display: none !important;
}

/* Entrada suave: solo presentación. */
.pause-overlay:not([hidden]) .pause-card,
.round-overlay:not([hidden]) .round-card,
.desmoche-confirm-overlay:not([hidden]) .desmoche-confirm-card,
.result-overlay.show .result-card {
  animation: uihOverlayCardIn .22s cubic-bezier(.2,.78,.24,1);
}

@keyframes uihOverlayCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   PAUSA
   ============================================================ */

.pause-card {
  width: min(100%, 390px) !important;
  padding: 18px !important;
  overflow: hidden !important;
  text-align: left !important;
}

.pause-settings-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 13px !important;
  padding: 1px 1px 13px !important;
  border-bottom: 1px solid rgba(87,212,154,.11) !important;
}

.pause-settings-head h2 {
  margin: 0 !important;
  color: var(--uih-overlay-text) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.pause-settings-head p {
  margin: 4px 0 0 !important;
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .65rem !important;
  line-height: 1.36 !important;
  letter-spacing: 0 !important;
}

.pause-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(87,212,154,.17) !important;
  border-radius: 15px !important;
  color: #c9eedc !important;
  background:
    linear-gradient(145deg, rgba(87,212,154,.105), rgba(255,255,255,.025)),
    rgba(255,255,255,.025) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
}

.pause-time-option,
.pause-action {
  width: 100% !important;
  min-height: 61px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 17px !important;
  color: var(--uih-overlay-text) !important;
  background: var(--uih-glass-row) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align: left !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

.pause-time-option {
  margin: 0 0 8px !important;
}

.pause-action + .pause-action {
  margin-top: 8px !important;
}

.pause-row-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 13px;
  color: #d9eee4;
  background: rgba(255,255,255,.035);
  font-family: "Segoe UI Emoji","Segoe UI",Arial,sans-serif !important;
  font-size: .98rem !important;
  line-height: 1 !important;
}

.pause-row-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.pause-row-copy strong {
  color: #edf7f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  line-height: 1.17 !important;
}

.pause-row-copy small {
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  line-height: 1.28 !important;
}

.pause-clock {
  margin: 0 !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(87,212,154,.12) !important;
  border-radius: 999px !important;
  color: #bcebd2 !important;
  background: rgba(87,212,154,.055) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .77rem !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .03em !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.pause-row-mark {
  color: rgba(188,220,204,.55) !important;
  font-family: Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.pause-action.primary {
  border-color: rgba(87,212,154,.26) !important;
  color: #052117 !important;
  background: linear-gradient(180deg, #69dda9, #3fc58c) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.42),
    0 8px 20px rgba(55,190,131,.11) !important;
}

.pause-action.primary .pause-row-icon {
  border-color: rgba(0,0,0,.06) !important;
  color: #08291d !important;
  background: rgba(0,0,0,.08) !important;
}

.pause-action.primary .pause-row-copy strong,
.pause-action.primary .pause-row-copy small,
.pause-action.primary .pause-row-mark {
  color: #06251a !important;
}

.pause-action.danger {
  border-color: rgba(239,111,108,.20) !important;
  background:
    linear-gradient(145deg, rgba(239,111,108,.055), rgba(255,255,255,.010)),
    rgba(54,16,17,.26) !important;
}

.pause-action.danger .pause-row-copy strong {
  color: #f1b1ad !important;
}

.pause-action:hover,
.pause-action:focus-visible {
  border-color: rgba(87,212,154,.22) !important;
}

.pause-action.danger:hover,
.pause-action.danger:focus-visible {
  border-color: rgba(239,111,108,.32) !important;
}

.pause-action:active {
  transform: scale(.988) !important;
}

/* ============================================================
   RESULTADO / VICTORIA / DERROTA
   ============================================================ */

.result-overlay {
  padding:
    max(14px, env(safe-area-inset-top))
    14px
    max(14px, env(safe-area-inset-bottom)) !important;
}

.result-card {
  width: min(100%, 400px) !important;
  max-width: 400px !important;
  max-height: min(91dvh, 760px) !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(87,212,154,.25) transparent !important;
}

.result-card::-webkit-scrollbar {
  width: 4px !important;
}
.result-card::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(87,212,154,.24) !important;
}

.result-settings-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 13px !important;
  padding: 1px 1px 13px !important;
  border-bottom: 1px solid rgba(87,212,154,.11) !important;
}

.result-settings-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.result-title {
  margin: 0 !important;
  color: var(--uih-overlay-text) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.result-text {
  margin: 5px 0 0 !important;
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .66rem !important;
  line-height: 1.38 !important;
}

.result-emoji {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(231,201,111,.18) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(231,201,111,.10), rgba(255,255,255,.025)),
    rgba(255,255,255,.02) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

.result-special-badges {
  margin: 0 0 10px !important;
  padding: 9px !important;
  border: 1px solid rgba(231,201,111,.10) !important;
  border-radius: 15px !important;
  background: rgba(231,201,111,.035) !important;
}

.result-reward {
  margin: 0 0 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(87,212,154,.10) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(87,212,154,.045), rgba(255,255,255,.012)),
    rgba(2,25,17,.34) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

.result-reward-head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
}

.result-reward-pill {
  min-height: 28px !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(87,212,154,.13) !important;
  border-radius: 999px !important;
  color: #c7eedb !important;
  background: rgba(87,212,154,.055) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .62rem !important;
  font-weight: 850 !important;
}

.result-level-line {
  color: #d8e8e0 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  font-weight: 750 !important;
}

.result-progress {
  height: 7px !important;
  margin-top: 7px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.22) !important;
}

.result-progress-fill {
  border-radius: inherit !important;
  background: linear-gradient(90deg, #3fc58c, #74e3af) !important;
  box-shadow: 0 0 12px rgba(87,212,154,.20) !important;
}

.result-level-up {
  margin-top: 9px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(231,201,111,.15) !important;
  border-radius: 12px !important;
  color: #f0d98f !important;
  background: rgba(231,201,111,.05) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .63rem !important;
  font-weight: 900 !important;
  text-align: center !important;
}

.result-reward-detail {
  margin: 8px 0 0 !important;
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  line-height: 1.34 !important;
}

.result-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.result-button {
  width: 100% !important;
  min-height: 61px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 17px !important;
  color: var(--uih-overlay-text) !important;
  background: var(--uih-glass-row) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align: left !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

.result-row-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 13px !important;
  color: #d9eee4 !important;
  background: rgba(255,255,255,.035) !important;
  font-family: "Segoe UI Emoji","Segoe UI",Arial,sans-serif !important;
  font-size: .95rem !important;
}

.result-row-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.result-row-copy strong {
  color: #edf7f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  line-height: 1.17 !important;
}

.result-row-copy small {
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  line-height: 1.28 !important;
}

.result-row-mark {
  color: rgba(188,220,204,.55) !important;
  font-family: Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.result-button.primary {
  border-color: rgba(87,212,154,.26) !important;
  color: #052117 !important;
  background: linear-gradient(180deg, #69dda9, #3fc58c) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.42),
    0 8px 20px rgba(55,190,131,.10) !important;
}

.result-button.primary .result-row-icon {
  border-color: rgba(0,0,0,.06) !important;
  color: #08291d !important;
  background: rgba(0,0,0,.08) !important;
}

.result-button.primary .result-row-copy strong,
.result-button.primary .result-row-copy small,
.result-button.primary .result-row-mark {
  color: #06251a !important;
}

.result-button.view-game {
  border-color: rgba(231,201,111,.12) !important;
  background:
    linear-gradient(145deg, rgba(231,201,111,.045), rgba(255,255,255,.012)),
    rgba(5,31,22,.56) !important;
}

.result-button:hover,
.result-button:focus-visible {
  border-color: rgba(87,212,154,.20) !important;
}

.result-button:active {
  transform: scale(.988) !important;
}

/* Confeti se conserva, solo hacemos sus colores menos ajenos al UI. */
.result-confetti-piece {
  filter: saturate(.82) brightness(.94);
}

/* ============================================================
   RONDA SIN GANADOR
   ============================================================ */

.round-card,
.game-screen.display-fit .round-card {
  width: min(100%, 390px) !important;
  padding: 18px !important;
  text-align: left !important;
}

.round-settings-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 13px !important;
  padding: 1px 1px 13px !important;
  border-bottom: 1px solid rgba(87,212,154,.11) !important;
}

.round-settings-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.round-card h2 {
  margin: 0 !important;
  color: var(--uih-overlay-text) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.16 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  text-shadow: none !important;
}

.round-description {
  margin: 4px 0 0 !important;
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .64rem !important;
  line-height: 1.38 !important;
  text-align: left !important;
}

.round-emoji {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(231,201,111,.17) !important;
  border-radius: 15px !important;
  color: #f0d98f !important;
  background:
    linear-gradient(145deg, rgba(231,201,111,.085), rgba(255,255,255,.020)),
    rgba(255,255,255,.02) !important;
  font-family: "Segoe UI Emoji","Segoe UI",Arial,sans-serif !important;
  font-size: 1rem !important;
}

.round-next-box,
.round-action {
  width: 100% !important;
  min-height: 61px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 17px !important;
  color: var(--uih-overlay-text) !important;
  background: var(--uih-glass-row) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  text-align: left !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

.round-next-box {
  margin: 0 0 8px !important;
  border-color: rgba(231,201,111,.11) !important;
  background:
    linear-gradient(145deg, rgba(231,201,111,.040), rgba(255,255,255,.010)),
    rgba(5,31,22,.56) !important;
}

.round-action + .round-action {
  margin-top: 8px !important;
}

.round-row-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 13px !important;
  color: #d9eee4 !important;
  background: rgba(255,255,255,.035) !important;
  font-family: "Segoe UI Emoji","Segoe UI",Arial,sans-serif !important;
  font-size: .96rem !important;
}

.round-row-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.round-row-copy strong {
  color: #edf7f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  line-height: 1.17 !important;
}

.round-row-copy small {
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  line-height: 1.28 !important;
}

.round-multiplier {
  padding: 6px 9px !important;
  border: 1px solid rgba(231,201,111,.13) !important;
  border-radius: 999px !important;
  color: #ead384 !important;
  background: rgba(231,201,111,.045) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  font-weight: 900 !important;
  letter-spacing: .025em !important;
  white-space: nowrap !important;
}

.round-note {
  margin: 1px 2px 10px !important;
  color: rgba(177,203,190,.62) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .58rem !important;
  line-height: 1.38 !important;
  text-align: left !important;
}

.round-row-mark {
  color: rgba(188,220,204,.55) !important;
  font-family: Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.round-action.primary {
  border-color: rgba(87,212,154,.26) !important;
  color: #052117 !important;
  background: linear-gradient(180deg, #69dda9, #3fc58c) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.42),
    0 8px 20px rgba(55,190,131,.10) !important;
}

.round-action.primary .round-row-icon {
  border-color: rgba(0,0,0,.06) !important;
  color: #08291d !important;
  background: rgba(0,0,0,.08) !important;
}

.round-action.primary .round-row-copy strong,
.round-action.primary .round-row-copy small,
.round-action.primary .round-row-mark {
  color: #06251a !important;
}

.round-action:hover,
.round-action:focus-visible {
  border-color: rgba(87,212,154,.20) !important;
}

.round-action:active {
  transform: scale(.988) !important;
}

/* ============================================================
   CONFIRMACIÓN INTERNA
   ============================================================ */

.desmoche-confirm-card {
  width: min(100%, 350px) !important;
  padding: 20px 18px 18px !important;
  text-align: center !important;
}

.desmoche-confirm-symbol {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 12px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(231,201,111,.18) !important;
  border-radius: 15px !important;
  color: #eed98e !important;
  background:
    linear-gradient(145deg, rgba(231,201,111,.095), rgba(255,255,255,.020)),
    rgba(255,255,255,.02) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.05rem !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
}

.desmoche-confirm-card h3 {
  margin: 0 0 7px !important;
  color: var(--uih-overlay-text) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1.04rem !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
}

.desmoche-confirm-card p {
  margin: 0 !important;
  color: var(--uih-overlay-muted) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .68rem !important;
  line-height: 1.44 !important;
}

.desmoche-confirm-actions {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.desmoche-confirm-button {
  min-height: 46px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 15px !important;
  color: #eaf5ef !important;
  background: var(--uih-glass-row) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

.desmoche-confirm-button.primary {
  border-color: rgba(87,212,154,.25) !important;
  color: #06251a !important;
  background: linear-gradient(180deg, #69dda9, #3fc58c) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.40) !important;
}

.desmoche-confirm-button:active {
  transform: scale(.985) !important;
}

/* ============================================================
   TOAST / MENSAJES FLOTANTES / RECLAMOS
   ============================================================ */

.game-toast {
  max-width: min(88vw, 360px) !important;
  padding: 9px 13px !important;
  border: 1px solid rgba(87,212,154,.15) !important;
  border-radius: 999px !important;
  color: #e7f4ed !important;
  background:
    linear-gradient(145deg, rgba(87,212,154,.075), rgba(255,255,255,.018)),
    rgba(5,31,22,.90) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 12px 28px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .63rem !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
}

.game-toast.show {
  animation: uihToastIn .18s ease-out !important;
}

@keyframes uihToastIn {
  from { opacity: 0; transform: translate(-50%, 7px) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.game-screen .claim-event-banner {
  border: 1px solid rgba(231,201,111,.13) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(231,201,111,.055), rgba(255,255,255,.014)),
    rgba(7,34,25,.88) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 12px 26px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(14px) saturate(116%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(116%) !important;
}

.game-screen .claim-event-icon {
  border: 1px solid rgba(231,201,111,.12) !important;
  border-radius: 12px !important;
  color: #ecd78d !important;
  background: rgba(231,201,111,.045) !important;
}

.game-screen .claim-event-copy strong {
  color: #eef6f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 850 !important;
}

.game-screen .claim-event-copy span {
  color: rgba(181,204,193,.70) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* ============================================================
   TELÉFONOS PEQUEÑOS
   ============================================================ */

@media (max-width: 390px), (max-height: 700px) {
  .pause-card,
  .round-card,
  .game-screen.display-fit .round-card,
  .result-card {
    border-radius: 22px !important;
    padding: 14px !important;
  }

  .pause-time-option,
  .pause-action,
  .result-button,
  .round-next-box,
  .round-action {
    min-height: 55px !important;
    grid-template-columns: 35px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 9px !important;
  }

  .pause-row-icon,
  .result-row-icon,
  .round-row-icon {
    width: 35px !important;
    height: 35px !important;
    border-radius: 12px !important;
  }

  .result-card {
    max-height: 92dvh !important;
  }

  .desmoche-confirm-card {
    border-radius: 22px !important;
  }
}

/* Respeta reducción de movimiento sin afectar lógica. */
@media (prefers-reduced-motion: reduce) {
  .pause-overlay:not([hidden]) .pause-card,
  .round-overlay:not([hidden]) .round-card,
  .desmoche-confirm-overlay:not([hidden]) .desmoche-confirm-card,
  .result-overlay.show .result-card,
  .game-toast.show {
    animation: none !important;
  }
}

/* =====================================================================
   DESMOCHEE · UI HÍBRIDA · FASE 5
   BARRIDO / PULIDO FINAL
   ---------------------------------------------------------------------
   SOLO CSS. No modifica DOM, motor ni JavaScript.
   Corrige restos visuales detectados tras Fases 1–4.
   ===================================================================== */

/* ============================================================
   1. LABORATORIO · CREADOR DE ESCENARIOS
   Era una de las superficies que todavía conservaba casi todo
   el look dorado anterior.
   ============================================================ */
.lab-scenario-overlay {
  background: rgba(0, 10, 7, .78) !important;
  backdrop-filter: blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
}

.lab-scenario-card {
  width: min(100%, 450px) !important;
  max-height: calc(100dvh - 22px) !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 25px !important;
  color: #eef7f2 !important;
  background:
    radial-gradient(circle at 50% -5%, rgba(87,212,154,.11), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.015)),
    rgba(5,31,23,.97) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.44),
    inset 0 1px rgba(255,255,255,.06) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(87,212,154,.24) transparent !important;
}

.lab-scenario-card::-webkit-scrollbar { width: 4px !important; }
.lab-scenario-card::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(87,212,154,.24) !important;
}

.lab-scenario-header {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.lab-scenario-header strong {
  color: #eef7f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 850 !important;
}

.lab-scenario-header strong::before {
  content: "CREAR ESCENARIO";
  font-size: .79rem !important;
  letter-spacing: .025em;
}

.lab-scenario-header span {
  color: rgba(177,203,190,.68) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .54rem !important;
  line-height: 1.35 !important;
}

.lab-scenario-close {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 13px !important;
  color: #d9e9e1 !important;
  background: rgba(255,255,255,.035) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 1rem !important;
}

.lab-scenario-destination > span {
  margin-bottom: 7px !important;
  color: #72dba9 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .53rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.lab-scenario-destination-buttons {
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.lab-destination-btn {
  min-height: 38px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 12px !important;
  color: #cbdcd3 !important;
  background: rgba(255,255,255,.027) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 800 !important;
}

.lab-destination-btn::before {
  font-size: .53rem !important;
  letter-spacing: .015em;
}

.lab-destination-btn[data-lab-destination="hand"]::before     { content: "MANO"; }
.lab-destination-btn[data-lab-destination="block1"]::before   { content: "BLOQUE 1"; }
.lab-destination-btn[data-lab-destination="block2"]::before   { content: "BLOQUE 2"; }
.lab-destination-btn[data-lab-destination="block3"]::before   { content: "BLOQUE 3"; }
.lab-destination-btn[data-lab-destination="nextdeck"]::before { content: "PRÓXIMA DEL MAZO"; }
.lab-destination-btn[data-lab-destination="discard"]::before  { content: "DESCARTE"; }
.lab-destination-btn[data-lab-destination="bot1"]::before     { content: "BOT 1"; }
.lab-destination-btn[data-lab-destination="bot2"]::before     { content: "BOT 2"; }
.lab-destination-btn[data-lab-destination="bot3"]::before     { content: "BOT 3"; }

.lab-destination-btn.selected {
  border-color: rgba(87,212,154,.28) !important;
  color: #062217 !important;
  background: linear-gradient(180deg, #69dda9, #43c98f) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.35) !important;
}

.lab-destination-btn.special {
  border-color: rgba(87,212,154,.10) !important;
}

.lab-destination-btn.bot {
  border-color: rgba(255,255,255,.075) !important;
}

.lab-scenario-deck {
  margin-bottom: 10px !important;
  padding: 7px 5px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 14px !important;
  background: rgba(0,16,11,.30) !important;
}

.lab-preview-section {
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.022) !important;
}

.lab-preview-section > strong {
  color: rgba(202,224,213,.74) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 800 !important;
}

.lab-preview-section > strong::before {
  font-size: .47rem !important;
  letter-spacing: .035em;
}
.lab-preview-section:nth-child(1) > strong::before { content: "MANO"; }
.lab-preview-section:nth-child(2) > strong::before { content: "BLOQUE 1"; }
.lab-preview-section:nth-child(3) > strong::before { content: "BLOQUE 2"; }
.lab-preview-section:nth-child(4) > strong::before { content: "BLOQUE 3"; }
.lab-preview-section:nth-child(5) > strong::before { content: "PRÓXIMA DEL MAZO"; }
.lab-preview-section:nth-child(6) > strong::before { content: "DESCARTE"; }
.lab-preview-section:nth-child(7) > strong::before { content: "BOT 1"; }
.lab-preview-section:nth-child(8) > strong::before { content: "BOT 2"; }
.lab-preview-section:nth-child(9) > strong::before { content: "BOT 3"; }

.lab-preview-section.accent {
  border-color: rgba(87,212,154,.10) !important;
  background: rgba(87,212,154,.025) !important;
}

.lab-preview-section.bot {
  background: rgba(255,255,255,.018) !important;
}

.lab-preview-empty {
  color: rgba(177,203,190,.40) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

.lab-scenario-actions {
  gap: 8px !important;
  margin-top: 10px !important;
}

.lab-scenario-action {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 850 !important;
}

#btnLabScenarioClear {
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #d7e6df !important;
  background: rgba(255,255,255,.035) !important;
}
#btnLabScenarioClear::before {
  content: "LIMPIAR";
  font-size: .58rem !important;
}

#btnLabScenarioLoad {
  border: 1px solid rgba(87,212,154,.28) !important;
  color: #062217 !important;
  background: linear-gradient(180deg, #69dda9, #43c98f) !important;
}
#btnLabScenarioLoad::before {
  content: "CARGAR ESCENARIO";
  font-size: .58rem !important;
}

.lab-scenario-note {
  margin-top: 8px !important;
  color: rgba(177,203,190,.48) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .45rem !important;
  line-height: 1.4 !important;
}

/* ============================================================
   2. CONFIGURACIÓN OFFLINE · ICONOS QUE AÚN ERAN EMOJI
   ============================================================ */

/* Bot: cabeza dibujada por CSS; el número de bots ya se muestra aparte. */
#offlineModal .bot-emoji {
  position: relative !important;
  width: 25px !important;
  height: 22px !important;
  margin-inline: auto !important;
  display: block !important;
  color: transparent !important;
  font-size: 0 !important;
}

#offlineModal .bot-emoji::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px 2px 1px !important;
  border: 1.4px solid currentColor !important;
  border-color: #cfe4da !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 35% 48%, #cfe4da 0 1.4px, transparent 1.7px),
    radial-gradient(circle at 65% 48%, #cfe4da 0 1.4px, transparent 1.7px),
    rgba(255,255,255,.025) !important;
}

#offlineModal .bot-emoji::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 1px !important;
  height: 5px !important;
  background: #cfe4da !important;
  box-shadow: 0 -1px 0 1px #cfe4da !important;
}

#offlineModal .bot-option.selected .bot-emoji::before {
  border-color: #08291d !important;
  background:
    radial-gradient(circle at 35% 48%, #08291d 0 1.4px, transparent 1.7px),
    radial-gradient(circle at 65% 48%, #08291d 0 1.4px, transparent 1.7px),
    rgba(0,0,0,.06) !important;
}
#offlineModal .bot-option.selected .bot-emoji::after {
  background: #08291d !important;
  box-shadow: 0 -1px 0 1px #08291d !important;
}

/* Reglas especiales: insignias propias, sin emoji del sistema. */
#offlineModal .special-rule-icon {
  display: grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px !important;
  border: 1px solid rgba(87,212,154,.13) !important;
  border-radius: 10px !important;
  color: #bfe7d3 !important;
  background: rgba(87,212,154,.035) !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 900 !important;
}
#offlineModal .special-rule-icon::before { font-size: .58rem !important; }
#offlineModal [data-special-rule="mico"] .special-rule-icon::before       { content: "M"; }
#offlineModal [data-special-rule="color"] .special-rule-icon::before      { content: "C"; }
#offlineModal [data-special-rule="peladilla"] .special-rule-icon::before  { content: "P"; }
#offlineModal [data-special-rule="fourBodies"] .special-rule-icon::before { content: "4"; }

/* Botones extra del Laboratorio dentro de Configuración. */
#btnLabLoadOffline,
#btnLabLoadScenario {
  font-size: 0 !important;
}
#btnLabLoadOffline::before {
  content: "CARGAR PARTIDA OFFLINE";
  font-size: .55rem !important;
}
#btnLabLoadScenario::before {
  content: "CARGAR ESCENARIO GUARDADO";
  font-size: .55rem !important;
}

/* ============================================================
   3. CÓMO JUGAR · TERMINAR DE ELIMINAR EMOJIS ESTÁTICOS
   ============================================================ */

/* Los pequeños bullets pasan a ser un pip propio. */
#howToPlayModal .short-rule-emoji {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  font-size: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}

#howToPlayModal .short-rule-emoji::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border: 1px solid rgba(105,221,169,.68) !important;
  border-radius: 2px !important;
  background: rgba(87,212,154,.08) !important;
  transform: rotate(45deg) !important;
}

/* Séptimo tema, antes heredaba el icono por defecto. */
#howToPlayModal .topic:nth-child(7) .topic-icon::before {
  content: "⚙";
  color: #dcebe4;
  font-family: "Segoe UI Symbol", "Segoe UI", sans-serif;
  font-size: .95rem;
}

/* Nombres de reglas especiales sin emoji. */
#howToPlayModal .special-help-rule strong {
  font-size: 0 !important;
  color: #eaf5ef !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}
#howToPlayModal .special-help-rule strong::before {
  font-size: .70rem !important;
  font-weight: 850 !important;
}
#howToPlayModal .special-help-rule:nth-child(1) strong::before { content: "Mico"; }
#howToPlayModal .special-help-rule:nth-child(2) strong::before { content: "Color"; }
#howToPlayModal .special-help-rule:nth-child(3) strong::before { content: "Peladilla"; }
#howToPlayModal .special-help-rule:nth-child(4) strong::before { content: "Cuatro cuerpos"; }

/* ============================================================
   4. TUTORIAL · ICONO DEL COACH INDEPENDIENTE DEL EMOJI
   ============================================================ */
.tutorial-coach-icon {
  position: relative !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: none !important;
}
.tutorial-coach-icon::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  background: #dcebe4 !important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-1.4 2.4-5.2 4.8-5.2 7.8A3.7 3.7 0 0 0 12 14.2 3.7 3.7 0 0 0 17.2 11c0-3-3.8-5.4-5.2-7.8Z' fill='black'/%3E%3Cpath d='M10.3 13.6h3.4l1.2 4.2H9.1l1.2-4.2Z' fill='black'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-1.4 2.4-5.2 4.8-5.2 7.8A3.7 3.7 0 0 0 12 14.2 3.7 3.7 0 0 0 17.2 11c0-3-3.8-5.4-5.2-7.8Z' fill='black'/%3E%3Cpath d='M10.3 13.6h3.4l1.2 4.2H9.1l1.2-4.2Z' fill='black'/%3E%3C/svg%3E")
    center/contain no-repeat !important;
}

/* ============================================================
   5. LOGROS · QUITAR RESTOS DORADOS / HEADER STICKY
   ============================================================ */
#profileAchievementsOverlay .profile-achievements-card header {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: -2px 0 10px !important;
  padding: 2px 1px 11px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
}

#profileAchievementsOverlay .profile-achievements-card header small {
  color: #65d7a1 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: .10em !important;
}

#profileAchievementsOverlay .profile-achievements-card header h2 {
  color: #eef7f2 !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

#profileAchievementsOverlay .profile-achievements-card header button {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  color: #d7e7df !important;
  background: rgba(255,255,255,.035) !important;
}

#profileAchievementsOverlay .achievement-row {
  min-height: 68px !important;
  padding: 9px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
}

#profileAchievementsOverlay .achievement-row.complete {
  border-color: rgba(87,212,154,.16) !important;
  background:
    linear-gradient(90deg, rgba(87,212,154,.055), rgba(255,255,255,.018)) !important;
}

#profileAchievementsOverlay .achievement-medal {
  border-color: rgba(87,212,154,.28) !important;
  background:
    radial-gradient(circle, rgba(87,212,154,.09), transparent 68%) !important;
}

#profileAchievementsOverlay .achievement-copy strong {
  color: #eaf5ef !important;
  font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

#profileAchievementsOverlay .achievement-copy small {
  color: rgba(177,203,190,.58) !important;
}

#profileAchievementsOverlay .achievement-copy > span,
#profileAchievementsOverlay .achievement-row > b {
  color: rgba(105,221,169,.68) !important;
}

#profileAchievementsOverlay .achievement-progress i {
  background: linear-gradient(90deg, #3fc58c, #72dfab) !important;
}

/* ============================================================
   6. HISTORIAL · BOTÓN COPIAR SIN EMOJI
   ============================================================ */
#auditOverlay #btnCopyAudit {
  font-size: 0 !important;
}
#auditOverlay #btnCopyAudit::before {
  content: "COPIAR RESUMEN";
  font-size: .62rem !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
}

/* ============================================================
   7. MESA · ICONOS DE ACCIÓN PROPIOS, SIN EMOJI DEL TELÉFONO
   No se toca tamaño/posición de botones ni zonas de drop.
   ============================================================ */
.game-screen .action-icon {
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  font-size: 0 !important;
}

.game-screen .action-icon::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  background: currentColor !important;
  color: #d9ebe2 !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
}

/* Entregar cambio */
#btnExchangeCard .action-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12m-3-3 3 3-3 3M20 16H8m3 3-3-3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12m-3-3 3 3-3 3M20 16H8m3 3-3-3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Bajar */
#btnLaySelection .action-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='10' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='9' y='6' width='10' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='10' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Crect x='9' y='6' width='10' height='14' rx='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") !important;
}
/* Desmochar */
#btnDesmoche .action-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='17' r='2.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='17' r='2.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m8 15 8-9M16 15 8 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='17' r='2.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='17' r='2.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m8 15 8-9M16 15 8 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
/* Paso */
#btnDeclarePass .action-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12V7.5a1.5 1.5 0 0 1 3 0V11m0-4.5a1.5 1.5 0 0 1 3 0V11m0-3a1.5 1.5 0 0 1 3 0v4m0-2a1.5 1.5 0 0 1 3 0v4.2c0 4-2.5 6.3-6.2 6.3h-1.2c-2.3 0-3.8-1.1-5-2.8L4.4 14a1.5 1.5 0 0 1 2.4-1.8L8 13.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12V7.5a1.5 1.5 0 0 1 3 0V11m0-4.5a1.5 1.5 0 0 1 3 0V11m0-3a1.5 1.5 0 0 1 3 0v4m0-2a1.5 1.5 0 0 1 3 0v4.2c0 4-2.5 6.3-6.2 6.3h-1.2c-2.3 0-3.8-1.1-5-2.8L4.4 14a1.5 1.5 0 0 1 2.4-1.8L8 13.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Repetir */
#btnRedeal .action-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h3c4 0 5 10 10 10h3M17 4l3 3-3 3M4 17h3c1.5 0 2.6-1.4 3.6-3M17 14l3 3-3 3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h3c4 0 5 10 10 10h3M17 4l3 3-3 3M4 17h3c1.5 0 2.6-1.4 3.6-3M17 14l3 3-3 3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Reclamar */
#btnTraditionalClaim .action-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 21 20H3L12 4Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5m0 3h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 21 20H3L12 4Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 9v5m0 3h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
          }

/* Botones con texto directo en HTML. */
#btnDiscard,
#btnReturnDiscard {
  font-size: 0 !important;
}
#btnDiscard::before,
#btnReturnDiscard::before {
  content: "" !important;
  width: 17px !important;
  height: 17px !important;
  display: inline-block !important;
  margin-right: 7px !important;
  vertical-align: -4px !important;
  background: currentColor !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
}
#btnDiscard::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M9 7V4h6v3m-8 0 1 13h8l1-13M10 10v7m4-7v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M9 7V4h6v3m-8 0 1 13h8l1-13M10 10v7m4-7v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
#btnDiscard::after {
  content: "DESCARTAR" !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
}

#btnReturnDiscard::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7 4 12l5 5M5 12h8a6 6 0 0 1 6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7 4 12l5 5M5 12h8a6 6 0 0 1 6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
#btnReturnDiscard::after {
  content: "REGRESAR CARTA" !important;
  font-size: .70rem !important;
  font-weight: 800 !important;
}

/* ============================================================
   8. LAB TOOLBAR · ETIQUETAS LIMPIAS
   ============================================================ */
.game-screen .lab-toolbar-label {
  font-size: 0 !important;
}
.game-screen .lab-toolbar-label::before {
  content: "LABORATORIO · LAS PRUEBAS NO CUENTAN PARA TU PROGRESO";
  font-size: .48rem !important;
}

#btnLabReshuffle,
#btnLabSave,
#btnLabScenarioBuilder {
  font-size: 0 !important;
}
#btnLabReshuffle::before {
  content: "REBARAJAR";
  font-size: .50rem !important;
}
#btnLabSave::before {
  content: "GUARDAR";
  font-size: .50rem !important;
}
#btnLabScenarioBuilder::before {
  content: "CREAR ESCENARIO";
  font-size: .50rem !important;
}

/* ============================================================
   9. PAUSA / RESULTADO / RONDA · ICONOS ESTÁTICOS
   ============================================================ */
.pause-row-icon,
.result-row-icon,
.round-row-icon,
.result-emoji,
.round-emoji {
  color: transparent !important;
  font-size: 0 !important;
}

.pause-row-icon::before,
.result-row-icon::before,
.round-row-icon::before,
.result-emoji::before,
.round-emoji::before {
  content: "" !important;
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  background: #d9eee4 !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
}

/* Genérico: pica DESMOCHEE */
.result-emoji::before,
.round-emoji::before {
  width: 22px !important;
  height: 22px !important;
  background: #e6d189 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C10 5.5 5.2 8.1 5.2 12.1A4.4 4.4 0 0 0 12 15.8 4.4 4.4 0 0 0 18.8 12.1C18.8 8.1 14 5.5 12 2Z' fill='black'/%3E%3Cpath d='M10 14.8h4l1.6 5.2H8.4L10 14.8Z' fill='black'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C10 5.5 5.2 8.1 5.2 12.1A4.4 4.4 0 0 0 12 15.8 4.4 4.4 0 0 0 18.8 12.1C18.8 8.1 14 5.5 12 2Z' fill='black'/%3E%3Cpath d='M10 14.8h4l1.6 5.2H8.4L10 14.8Z' fill='black'/%3E%3C/svg%3E") !important;
}

/* Icono guardar */
#btnPauseExit .pause-row-icon::before,
#btnSaveBetweenRounds .round-row-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h12l2 2v14H5V4Zm3 0v6h8V4M8 20v-6h8v6' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h12l2 2v14H5V4Zm3 0v6h8V4M8 20v-6h8v6' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Abandonar */
#btnAbandonGame .pause-row-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M9 7V4h6v3m-8 0 1 13h8l1-13M10 10v7m4-7v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M9 7V4h6v3m-8 0 1 13h8l1-13M10 10v7m4-7v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Ver juego */
#btnViewFinishedGame .result-row-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12s3-5 8.5-5 8.5 5 8.5 5-3 5-8.5 5-8.5-5-8.5-5Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12s3-5 8.5-5 8.5 5 8.5 5-3 5-8.5 5-8.5-5-8.5-5Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") !important;
}

#resultLevelUp {
  font-size: 0 !important;
}
#resultLevelUp::before {
  content: "¡SUBISTE DE NIVEL!";
  font-size: .63rem !important;
}

/* ============================================================
   10. ESTADOS DESHABILITADOS · CONSISTENCIA
   ============================================================ */
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

#offlineModal button:disabled,
.game-screen .pilot-action:disabled,
.game-screen .lab-tool-btn:disabled {
  opacity: .42 !important;
  filter: saturate(.55) !important;
}

@media (max-width: 390px) {
  .lab-scenario-card {
    border-radius: 21px !important;
    padding: 11px !important;
  }
  .lab-scenario-destination-buttons {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}