:root {
  --bg: #0f1720;
  --panel: #172331;
  --card: #223249;
  --card-open: #f8fafc;
  --text: #f8fafc;
  --muted: #d8e0ea;
  --accent: #96d8ff;
  --ok: #b9f6ca;
  --danger: #ffd4d4;
  --focus: #fff176;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  width: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 12%, rgba(215, 17, 31, 0.34), transparent 28rem),
    radial-gradient(circle at 82% 88%, rgba(120, 0, 12, 0.28), transparent 30rem),
    linear-gradient(135deg, #000000 0%, #090103 35%, #230006 68%, #000000 100%);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(215, 17, 31, 0.34), transparent 28rem),
    radial-gradient(circle at 82% 88%, rgba(120, 0, 12, 0.28), transparent 30rem),
    linear-gradient(135deg, #000000 0%, #090103 35%, #230006 68%, #000000 100%);
  color: var(--text);
  overflow: hidden;
}
body::before {
  content: none;
}
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: clamp(10px, 1.8vw, 24px);
}
.panel {
  width: 100%;
  height: 100%;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: clamp(14px, 2vw, 28px);
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
  overflow: hidden;
}
.inicio {
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center;
  gap: 18px;
  text-align: center;
}
.encabezado {
  width: min(1120px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.titulo-inicio { max-width: 920px; }
.acciones-inicio {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
h1 { margin: 0 0 10px; font-size: clamp(2.4rem, 5.2vw, 4.8rem); }
h2 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 4rem); }
p { color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.45rem); line-height: 1.48; }
.controles-inicio {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1120px;
}
.niveles {
  width: min(1000px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: 12px;
}
.nivel {
  min-height: 156px;
  margin-top: 0;
  background: #f8fafc;
  color: #07111d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  border: 5px solid transparent;
}
.nivel:hover, .nivel:focus {
  transform: translateY(-2px);
  outline: 5px solid var(--focus);
  outline-offset: 4px;
}
.nivel.activo {
  border-color: var(--ok);
  background: #e8fff0;
  box-shadow: 0 0 0 6px rgba(185,246,202,.18), 0 14px 28px rgba(0,0,0,.24);
}
.nivel-numero {
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #07111d;
  color: #ffffff;
  font-size: 2.3rem;
  font-weight: 900;
}
.nivel-texto { font-size: 1.25rem; font-weight: 900; }
.nivel-cartas { font-size: 1.05rem; font-weight: 800; color: #334155; }
.nota-partida { margin: 12px 0 2px; max-width: 900px; }
.etiqueta-dificultad {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  font-weight: 900;
}
button {
  font-size: clamp(1.06rem, 1.6vw, 1.35rem);
  border-radius: 18px;
  padding: 16px 20px;
  border: 2px solid rgba(255,255,255,.24);
  cursor: pointer;
  background: var(--accent);
  color: #07111d;
  font-weight: 900;
  margin-top: 14px;
  min-height: 58px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
button:hover, button:focus { outline: 5px solid var(--focus); outline-offset: 3px; }
button:active { transform: scale(.98); }
.btn-secundario { background: #ffffff; color: #07111d; }
.btn-plano {
  background: transparent;
  color: var(--text);
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: none;
  border-radius: 12px;
  min-height: 48px;
  padding: 12px 16px;
}

.juego {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.marcador { font-size: clamp(1.05rem, 1.6vw, 1.5rem); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones button, .barra button { margin-top: 0; }
.mensaje {
  min-height: 38px;
  margin: 0;
  color: var(--text);
  font-weight: 800;
}
.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
  align-content: stretch;
  overflow: hidden;
  padding: 4px;
}
.carta {
  width: 100%;
  min-width: 0;
  min-height: 126px;
  border: 4px solid rgba(255,255,255,.26);
  border-radius: 24px;
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.3vw, 16px);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  transform: translateZ(0) scale(1);
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
  perspective: none;
  transform-style: flat;
}
.carta:hover { transform: translateZ(0) scale(1.01); }
.carta.abierta, .carta.encontrada, .carta.vista-previa {
  transform: translateZ(0) scale(1.015);
  background: var(--card-open);
  color: #0f172a;
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
.carta.animar-abrir { animation: cartaAbrirSuave .24s ease-out; }
.carta.animar-cerrar { animation: cartaCerrarSuave .22s ease-in; }
@keyframes cartaAbrirSuave {
  0% { transform: translateZ(0) scale(.94); opacity: .72; }
  60% { transform: translateZ(0) scale(1.025); opacity: 1; }
  100% { transform: translateZ(0) scale(1.015); opacity: 1; }
}
@keyframes cartaCerrarSuave {
  0% { transform: translateZ(0) scale(1.015); opacity: 1; }
  100% { transform: translateZ(0) scale(.98); opacity: .92; }
}
.carta:focus { outline: 5px solid var(--focus); outline-offset: 3px; }
.carta.encontrada { border-color: var(--ok); }
.carta img {
  width: min(86%, 170px);
  height: min(80%, 150px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}
.carta.abierta img, .carta.encontrada img, .carta.vista-previa img { display: block; }
.carta .reverso { font-size: clamp(3.2rem, 6.2vw, 5.8rem); font-weight: 900; }
.carta.abierta .reverso, .carta.encontrada .reverso, .carta.vista-previa .reverso { display: none; }
.carta.error-img::after {
  content: "Imagen no encontrada";
  color: #7f1d1d;
  background: var(--danger);
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  font-weight: 800;
}
.resultado {
  display: flex;
  align-items: center;
  justify-content: center;
}
.resultado-contenido { width: min(980px, 100%); }
.resumen-resultado { color: var(--text); font-weight: 700; }
.resultado-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.resultado-grid div {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 18px;
}
.resultado-grid strong {
  display: block;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  margin-bottom: 8px;
}
.resultado-grid span {
  display: block;
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 900;
}
.resultado-acciones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.modal-inicio, .modal-creditos {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 10, 18, .72);
  backdrop-filter: blur(4px);
}
.modal-inicio-caja, .creditos-caja {
  width: min(620px, 100%);
  background: #f8fafc;
  color: #07111d;
  border-radius: 28px;
  padding: clamp(24px, 4vw, 42px);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
}
.modal-inicio-titulo {
  margin: 0;
  color: #07111d;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
}
.contador-inicio {
  width: clamp(120px, 22vw, 190px);
  height: clamp(120px, 22vw, 190px);
  margin: 18px auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #07111d;
  color: #ffffff;
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
}
.modal-inicio-texto, .creditos-caja p {
  color: #334155;
  font-weight: 700;
}
.creditos-caja h2 { color: #07111d; }

@media (orientation: portrait) {
  .tablero { grid-template-columns: repeat(2, 1fr); }
  .resultado-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tablero[data-total="4"] { grid-template-columns: repeat(2, minmax(150px, 240px)); justify-content: center; }
  .tablero[data-total="6"] { grid-template-columns: repeat(3, minmax(145px, 220px)); justify-content: center; }
  .tablero[data-total="8"] { grid-template-columns: repeat(4, minmax(135px, 210px)); justify-content: center; }
  .tablero[data-total="12"] { grid-template-columns: repeat(4, minmax(120px, 190px)); justify-content: center; }
  .tablero[data-total="16"] { grid-template-columns: repeat(4, minmax(110px, 170px)); justify-content: center; }
}
@media (max-width: 980px) {
  .niveles { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; }
  .panel { min-height: calc(100dvh - 20px); height: auto; overflow: visible; }
  .encabezado { flex-direction: column; }
  .tablero { overflow: visible; }
  .carta { min-height: 118px; }
  .resultado-grid { grid-template-columns: 1fr; }
  .niveles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .carta, .nivel, button { transition: none !important; animation: none !important; }
  .carta.abierta, .carta.encontrada, .carta.vista-previa { transform: none; }
}

/* Ajustes solicitados: inicio limpio, créditos fijo, emergente verde 3D y cartas aleatorias visualmente estables */
.acciones-inicio { display: none !important; }
.btn-creditos-flotante {
  position: fixed;
  right: max(4px, clamp(12px, 2vw, 24px));
  bottom: max(4px, clamp(12px, 2vw, 24px));
  z-index: 18;
  min-height: 38px;
  margin-right: 4px;
  margin-bottom: 4px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  color: #ffffff;
  font-size: clamp(.88rem, 1.1vw, 1rem);
  font-weight: 800;
  box-shadow: none;
}
.btn-creditos-flotante:hover,
.btn-creditos-flotante:focus {
  background: rgba(255,255,255,.2);
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}
.btn-creditos-flotante i,
button i,
.nivel-numero i {
  margin-right: 7px;
}
.nivel-numero {
  width: auto;
  min-width: 76px;
  padding: 0 16px;
}
.nivel-numero i { font-size: 1.45rem; }
.modal-inicio {
  background: rgba(3, 32, 18, .72);
}
.modal-inicio-caja {
  background: linear-gradient(145deg, #dcfce7 0%, #86efac 52%, #22c55e 100%);
  border: 8px solid #15803d;
  color: #052e16;
  box-shadow:
    0 18px 0 #14532d,
    0 28px 55px rgba(0,0,0,.45),
    inset 0 4px 0 rgba(255,255,255,.75),
    inset 0 -8px 0 rgba(20,83,45,.22);
}
.modal-inicio-titulo,
.modal-inicio-texto {
  color: #052e16;
}
.contador-inicio {
  background: #052e16;
  color: #dcfce7;
  border: 6px solid #bbf7d0;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.22),
    0 10px 0 #14532d,
    0 20px 28px rgba(0,0,0,.26);
}
.inicio {
  align-content: center;
  justify-content: center;
}
.controles-inicio {
  margin-inline: auto;
}
.tablero {
  justify-items: center;
  align-items: center;
}
.carta {
  max-width: 100%;
}
@media (max-width: 640px) {
  .btn-creditos-flotante {
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
  }
}


/* Ajustes solicitados: cartas dinámicas, estilo 3D, niveles redondos y modal verde sin sombra */
.juego {
  min-height: 0;
}
.tablero {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  justify-items: stretch;
  align-items: stretch;
  align-content: stretch;
  justify-content: stretch;
  padding: clamp(8px, 1.2vw, 18px);
  gap: clamp(12px, 1.45vw, 22px);
  overflow: hidden;
}
.tablero[data-total="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.tablero[data-total="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.tablero[data-total="8"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.tablero[data-total="12"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.tablero[data-total="16"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.carta {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: clamp(18px, 2vw, 34px);
  border: clamp(4px, .55vw, 7px) solid rgba(255,255,255,.36);
  background: linear-gradient(145deg, #334b6d 0%, #172331 48%, #0b1320 100%);
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.18),
    inset 0 -8px 0 rgba(0,0,0,.22),
    0 12px 0 rgba(4,12,24,.78),
    0 22px 34px rgba(0,0,0,.34);
  transform: translateY(0) scale(1);
}
.carta:hover {
  transform: translateY(-2px) scale(1.008);
}
.carta.abierta,
.carta.encontrada,
.carta.vista-previa {
  background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 54%, #cbd5e1 100%);
  border-color: rgba(255,255,255,.92);
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.95),
    inset 0 -8px 0 rgba(15,23,42,.10),
    0 10px 0 rgba(148,163,184,.88),
    0 20px 30px rgba(0,0,0,.30);
  transform: translateY(-4px) scale(1.01);
}
.carta.encontrada {
  border-color: #bbf7d0;
  background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 55%, #bbf7d0 100%);
}
.carta.animar-abrir { animation: cartaAbrir3D .26s ease-out; }
.carta.animar-cerrar { animation: cartaCerrar3D .22s ease-in; }
@keyframes cartaAbrir3D {
  0% { transform: translateY(2px) scale(.985); opacity: .82; }
  55% { transform: translateY(-6px) scale(1.018); opacity: 1; }
  100% { transform: translateY(-4px) scale(1.01); opacity: 1; }
}
@keyframes cartaCerrar3D {
  0% { transform: translateY(-4px) scale(1.01); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: .96; }
}
.carta img {
  width: min(82%, 100%);
  height: min(82%, 100%);
  max-width: 100%;
  max-height: 100%;
}
.tablero[data-total="4"] .carta img { width: min(78%, 280px); height: min(78%, 280px); }
.tablero[data-total="6"] .carta img { width: min(78%, 235px); height: min(78%, 235px); }
.tablero[data-total="8"] .carta img { width: min(76%, 210px); height: min(76%, 210px); }
.tablero[data-total="12"] .carta img { width: min(74%, 175px); height: min(74%, 175px); }
.tablero[data-total="16"] .carta img { width: min(72%, 145px); height: min(72%, 145px); }
.carta .reverso {
  font-size: clamp(4.8rem, 12vmin, 10rem);
  line-height: 1;
  text-shadow: 0 5px 0 rgba(0,0,0,.28);
}
.tablero[data-total="12"] .carta .reverso { font-size: clamp(3.8rem, 8.5vmin, 7rem); }
.tablero[data-total="16"] .carta .reverso { font-size: clamp(3.2rem, 7.5vmin, 6rem); }
.nivel-numero {
  width: clamp(78px, 7vw, 96px) !important;
  height: clamp(78px, 7vw, 96px) !important;
  min-width: clamp(78px, 7vw, 96px) !important;
  min-height: clamp(78px, 7vw, 96px) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  aspect-ratio: 1 / 1;
}
.nivel-numero i {
  margin-right: 0 !important;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
}
.modal-inicio {
  background: rgba(3, 32, 18, .70);
}
.modal-inicio-caja {
  background: #16a34a;
  color: #ffffff;
  border: 8px outset #ffffff;
  box-shadow: none !important;
}
.modal-inicio-titulo,
.modal-inicio-texto {
  color: #ffffff !important;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  text-shadow: none !important;
}
.contador-inicio {
  background: #15803d;
  color: #ffffff;
  border: 6px solid #ffffff;
  box-shadow: none !important;
  -webkit-text-stroke: 2px rgba(255,255,255,.65);
  text-shadow: none !important;
}
@media (orientation: portrait) {
  .tablero[data-total="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .tablero[data-total="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .tablero[data-total="12"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .tablero[data-total="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tablero {
    height: min(78vh, 900px);
    min-height: 520px;
  }
  .carta {
    min-height: 0;
  }
}


/* Error visual cuando dos cartas no coinciden.
   Se conserva unos segundos antes de ocultarlas para reforzar memoria visual. */
.carta.pareja-incorrecta .cara-frente,
.carta.pareja-incorrecta {
  background: #b91c1c !important;
  border-color: #ffffff !important;
}

.carta.pareja-incorrecta img {
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}

/* Ajuste solicitado: color crema pastel en cartas ocultas y abiertas, conservando efecto 3D. */
:root {
  --carta-crema-claro: #fff7df;
  --carta-crema-medio: #f7df9e;
  --carta-crema-profundo: #d7aa47;
  --carta-crema-borde: #ffffff;
  --carta-crema-texto: #5a3b09;
}

.carta {
  background: linear-gradient(145deg, var(--carta-crema-claro) 0%, var(--carta-crema-medio) 55%, var(--carta-crema-profundo) 100%) !important;
  color: var(--carta-crema-texto) !important;
  border-color: rgba(255,255,255,.82) !important;
  box-shadow:
    inset 0 6px 0 rgba(255,255,255,.72),
    inset 0 -9px 0 rgba(111,78,19,.24),
    0 12px 0 rgba(135,91,20,.72),
    0 22px 34px rgba(0,0,0,.32) !important;
}

.carta.abierta,
.carta.encontrada,
.carta.vista-previa {
  background: linear-gradient(145deg, #fffdf2 0%, #fff0bd 58%, #e7bf5c 100%) !important;
  color: #3f2a05 !important;
  border-color: var(--carta-crema-borde) !important;
  box-shadow:
    inset 0 6px 0 rgba(255,255,255,.9),
    inset 0 -8px 0 rgba(122,84,18,.16),
    0 10px 0 rgba(183,132,38,.82),
    0 20px 30px rgba(0,0,0,.28) !important;
}

.carta.encontrada {
  background: linear-gradient(145deg, #fffdf2 0%, #f5ffd6 54%, #c8f08c 100%) !important;
  border-color: #ecfccb !important;
}

.carta .reverso {
  color: #6b4708 !important;
  text-shadow:
    0 2px 0 rgba(255,255,255,.65),
    0 5px 8px rgba(91,56,5,.26);
}

/* ============================================================
   Ajuste responsive integral para teléfono, tablet y desktop.
   Mejora uso táctil para personas con Parkinson y adultos mayores.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button,
.carta,
.nivel,
.btn-creditos-flotante {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button,
.nivel,
.carta {
  min-width: 48px;
  min-height: 48px;
}
.app {
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
.panel {
  max-width: 1600px;
  margin-inline: auto;
}
.inicio {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.juego {
  overflow: hidden;
}
.barra {
  flex: 0 0 auto;
}
.acciones button,
.resultado-acciones button {
  min-width: 150px;
}
.tablero {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100%;
  overflow: hidden !important;
}
.carta {
  contain: layout paint;
  will-change: transform;
  cursor: pointer;
}
.carta img {
  pointer-events: none;
}

/* Teléfonos verticales */
@media (max-width: 600px) and (orientation: portrait) {
  body { overflow: hidden; }
  .app {
    width: 100svw;
    height: 100svh;
    min-height: 100svh;
    padding: 8px;
  }
  .panel {
    height: calc(100svh - 16px) !important;
    min-height: 0 !important;
    padding: 10px;
    border-radius: 16px;
    overflow: hidden;
  }
  .inicio {
    overflow-y: auto;
    justify-content: start;
    align-content: start;
    padding-bottom: 64px;
  }
  h1 { font-size: clamp(2rem, 12vw, 3.4rem); }
  h2 { font-size: clamp(1.65rem, 8vw, 2.6rem); }
  p { font-size: clamp(1rem, 4.4vw, 1.18rem); line-height: 1.36; }
  .encabezado { gap: 8px; }
  .titulo-inicio p { margin: 0; }
  .controles-inicio { justify-content: flex-start; }
  .niveles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .nivel {
    min-height: 128px;
    border-radius: 20px;
    padding: 12px 8px;
    gap: 6px;
  }
  .nivel-numero {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    font-size: 1.75rem;
  }
  .nivel-texto { font-size: 1.02rem; }
  .nivel-cartas { font-size: .95rem; }
  .nota-partida { font-size: .98rem; margin-bottom: 14px; }
  .juego {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
  }
  .barra {
    gap: 6px;
    justify-content: center;
  }
  .marcador {
    font-size: .94rem;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 5px 7px;
  }
  .acciones {
    width: 100%;
    justify-content: center;
    gap: 7px;
  }
  .acciones button {
    min-height: 44px;
    min-width: 0;
    padding: 8px 10px;
    font-size: .9rem;
    border-radius: 12px;
  }
  .mensaje {
    min-height: 42px;
    font-size: clamp(.98rem, 4vw, 1.12rem);
    line-height: 1.25;
    text-align: center;
  }
  .tablero {
    padding: 6px;
    gap: 8px;
  }
  .tablero[data-total="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .tablero[data-total="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .tablero[data-total="12"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .tablero[data-total="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .carta {
    border-radius: clamp(14px, 4.8vw, 24px);
    border-width: 3px;
    box-shadow:
      inset 0 4px 0 rgba(255,255,255,.72),
      inset 0 -6px 0 rgba(111,78,19,.22),
      0 7px 0 rgba(135,91,20,.72),
      0 13px 18px rgba(0,0,0,.28) !important;
  }
  .carta.abierta,
  .carta.encontrada,
  .carta.vista-previa {
    transform: translateY(-2px) scale(1.006);
  }
  .carta .reverso { font-size: clamp(2.4rem, 14vw, 5.4rem); }
  .tablero[data-total="12"] .carta .reverso,
  .tablero[data-total="16"] .carta .reverso { font-size: clamp(2rem, 10vw, 4rem); }
  .carta img { width: 78%; height: 78%; }
  .resultado-contenido { height: 100%; overflow-y: auto; padding-bottom: 10px; }
  .resultado-grid { grid-template-columns: 1fr; gap: 10px; margin: 14px 0; }
  .resultado-acciones { flex-direction: column; }
  .resultado-acciones button { width: 100%; margin-top: 4px; }
  .modal-inicio,
  .modal-creditos { padding: 12px; }
  .modal-inicio-caja,
  .creditos-caja { border-radius: 22px; padding: 22px 16px; }
  .btn-creditos-flotante { right: 8px; bottom: 8px; }
}

/* Teléfonos horizontales */
@media (max-height: 520px) and (orientation: landscape) {
  body { overflow: hidden; }
  .app { height: 100svh; min-height: 100svh; padding: 6px; }
  .panel { height: calc(100svh - 12px) !important; padding: 8px; border-radius: 14px; }
  .inicio { grid-template-columns: .95fr 1.4fr; grid-template-rows: 1fr; gap: 8px; overflow: hidden; }
  .encabezado { width: 100%; }
  h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
  .titulo-inicio p, .nota-partida { font-size: .92rem; line-height: 1.28; }
  .etiqueta-dificultad { font-size: 1.15rem; margin-bottom: 8px; }
  .niveles { grid-template-columns: repeat(5, minmax(86px, 1fr)) !important; gap: 8px; }
  .nivel { min-height: 118px; padding: 8px 6px; }
  .nivel-numero { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; font-size: 1.45rem; }
  .nivel-texto { font-size: .9rem; }
  .nivel-cartas { font-size: .82rem; }
  .juego { grid-template-rows: auto auto minmax(0, 1fr); gap: 5px; }
  .barra { gap: 6px; }
  .marcador { font-size: .86rem; }
  .acciones button { min-height: 38px; padding: 6px 9px; font-size: .82rem; border-radius: 10px; }
  .mensaje { min-height: 25px; font-size: .92rem; text-align: center; }
  .tablero { gap: 7px; padding: 5px; }
  .tablero[data-total="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .tablero[data-total="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .tablero[data-total="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="12"] { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="16"] { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .carta { border-width: 3px; border-radius: 14px; }
  .carta .reverso { font-size: clamp(2rem, 10vh, 4rem); }
  .carta img { width: 76%; height: 76%; }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
  .app { padding: 12px; }
  .panel { height: calc(100dvh - 24px); padding: 16px; }
  .niveles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .nivel { min-height: 148px; }
  .juego { grid-template-rows: auto auto minmax(0, 1fr); }
  .tablero { gap: 12px; }
  .tablero[data-total="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .tablero[data-total="12"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .tablero[data-total="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .carta .reverso { font-size: clamp(3.6rem, 9vw, 7rem); }
}

/* Desktop amplio */
@media (min-width: 1025px) {
  .panel { height: calc(100dvh - clamp(20px, 3.6vw, 48px)); }
  .tablero { gap: clamp(14px, 1.4vw, 24px); }
  .tablero[data-total="4"] { max-width: min(920px, 100%); margin-inline: auto; }
  .tablero[data-total="6"] { max-width: min(1100px, 100%); margin-inline: auto; }
  .tablero[data-total="8"] { max-width: min(1260px, 100%); margin-inline: auto; }
}

/* Dispositivos sin hover real: evita cambios visuales accidentales por toque. */
@media (hover: none) and (pointer: coarse) {
  button:hover,
  .nivel:hover,
  .carta:hover {
    transform: none;
  }
  button:active,
  .nivel:active,
  .carta:active {
    transform: scale(.985);
  }
  .carta.abierta,
  .carta.encontrada,
  .carta.vista-previa {
    transform: translateY(-2px) scale(1.006);
  }
}

/* ============================================================
   Ajuste responsive del div emergente de inicio (Iniciando)
   Compatible con teléfono, tablet, desktop y rotación.
   ============================================================ */
.modal-inicio {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: hidden;
}

.modal-inicio-caja {
  width: min(92vw, 560px);
  max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8dvh, 18px);
  padding: clamp(16px, 4vw, 36px);
  border-radius: clamp(18px, 4vw, 32px);
}

.modal-inicio-titulo {
  margin: 0;
  font-size: clamp(1.8rem, 7vw, 4.2rem);
  line-height: 1.02;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.contador-inicio {
  width: min(clamp(86px, 24vw, 170px), 32dvh);
  height: min(clamp(86px, 24vw, 170px), 32dvh);
  min-width: 76px;
  min-height: 76px;
  margin: clamp(6px, 1.8dvh, 16px) auto;
  font-size: min(clamp(3rem, 15vw, 7.5rem), 20dvh);
  line-height: 1;
}

.modal-inicio-texto {
  margin: 0;
  font-size: clamp(1rem, 3.5vw, 1.35rem);
  line-height: 1.25;
  max-width: min(100%, 420px);
}

@media (max-width: 480px) and (orientation: portrait) {
  .modal-inicio { padding: 10px; }
  .modal-inicio-caja {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 18px 14px;
    gap: 10px;
  }
  .modal-inicio-titulo { font-size: clamp(1.7rem, 9vw, 2.7rem); }
  .contador-inicio {
    width: min(34vw, 122px);
    height: min(34vw, 122px);
    font-size: clamp(3.2rem, 18vw, 5.4rem);
  }
  .modal-inicio-texto { font-size: clamp(.98rem, 4vw, 1.14rem); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .modal-inicio { padding: 8px; }
  .modal-inicio-caja {
    width: min(74vw, 520px);
    max-height: calc(100svh - 16px);
    padding: 12px 18px;
    border-radius: 18px;
    gap: 6px;
  }
  .modal-inicio-titulo { font-size: clamp(1.55rem, 5.5vh, 2.4rem); }
  .contador-inicio {
    width: min(24vh, 96px);
    height: min(24vh, 96px);
    min-width: 68px;
    min-height: 68px;
    margin: 4px auto;
    font-size: min(15vh, 4.6rem);
  }
  .modal-inicio-texto {
    font-size: clamp(.88rem, 3.4vh, 1.08rem);
    line-height: 1.18;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  .modal-inicio-caja {
    width: min(82vw, 600px);
    max-height: calc(100dvh - 28px);
  }
}

/* Ajuste solicitado: indicadores agrupados en un solo fondo blanco */
.barra {
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 16px);
}

.marcadores-grupo {
  width: min(100%, 980px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1vw, 12px);
  padding: clamp(8px, 1.2vw, 14px);
  background: #ffffff;
  border: 2px solid rgba(15, 23, 32, .18);
  border-radius: clamp(16px, 2vw, 24px);
  box-shadow: inset 0 -4px 0 rgba(15, 23, 32, .12);
}

.marcadores-grupo .marcador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f7f4ea;
  color: #172331;
  border: 2px solid rgba(15, 23, 32, .18);
  box-shadow: 0 3px 0 rgba(15, 23, 32, .16);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.marcadores-grupo .marcador strong {
  color: #172331;
  margin-right: 5px;
}

.juego .acciones {
  justify-content: center;
}

@media (max-width: 640px) {
  .marcadores-grupo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
    padding: 8px;
    border-radius: 16px;
  }

  .marcadores-grupo .marcador {
    width: 100%;
    min-height: 42px;
    padding: 8px 7px;
    font-size: clamp(.8rem, 3.5vw, .98rem);
    white-space: normal;
    text-align: center;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .marcadores-grupo {
    width: auto;
    max-width: calc(100vw - 16px);
    padding: 5px 7px;
    gap: 5px;
    border-radius: 14px;
  }

  .marcadores-grupo .marcador {
    min-height: 34px;
    padding: 5px 9px;
    font-size: clamp(.72rem, 1.7vw, .86rem);
  }
}

/* ============================================================
   Ajuste solicitado: indicadores y botones en una sola fila.
   La barra completa usa un solo fondo blanco, incluyendo acciones.
   ============================================================ */
.juego .barra {
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, .9vw, 12px) !important;
  padding: clamp(7px, .9vw, 12px) !important;
  background: #ffffff !important;
  border: 2px solid rgba(15, 23, 32, .18) !important;
  border-radius: clamp(14px, 1.8vw, 22px) !important;
  box-shadow: inset 0 -4px 0 rgba(15, 23, 32, .12) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.juego .marcadores-grupo {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, .7vw, 10px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.juego .acciones {
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, .7vw, 10px) !important;
}

.juego .marcadores-grupo .marcador,
.juego .acciones button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: max-content !important;
  min-height: clamp(38px, 4.2vh, 50px) !important;
  margin: 0 !important;
  padding: clamp(6px, .8vw, 10px) clamp(9px, 1vw, 16px) !important;
  border-radius: 999px !important;
  background: #f7f4ea !important;
  color: #172331 !important;
  border: 2px solid rgba(15, 23, 32, .18) !important;
  box-shadow: 0 3px 0 rgba(15, 23, 32, .16) !important;
  font-size: clamp(.82rem, 1.15vw, 1.18rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.juego .acciones button.btn-secundario {
  background: #f7f4ea !important;
  color: #172331 !important;
}

.juego .acciones button i {
  margin-right: 6px !important;
}

@media (max-width: 640px) {
  .juego .barra {
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  .juego .marcadores-grupo {
    display: flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    gap: 5px !important;
  }

  .juego .marcadores-grupo .marcador,
  .juego .acciones button {
    width: auto !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
    font-size: clamp(.68rem, 3vw, .82rem) !important;
    border-width: 1px !important;
    box-shadow: 0 2px 0 rgba(15, 23, 32, .16) !important;
    white-space: nowrap !important;
  }

  .juego .acciones button i {
    margin-right: 4px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .juego .barra {
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 5px !important;
    max-width: 100% !important;
  }

  .juego .marcadores-grupo .marcador,
  .juego .acciones button {
    min-height: 32px !important;
    padding: 4px 7px !important;
    font-size: clamp(.64rem, 1.45vw, .78rem) !important;
  }
}

/* ============================================================
   Ajuste solicitado: indicadores sin fondo individual y colores
   diferenciados para Reiniciar y Salir.
   ============================================================ */
.juego .marcadores-grupo .marcador {
  background: transparent !important;
  color: #172331 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: clamp(4px, .6vw, 9px) !important;
  padding-right: clamp(4px, .6vw, 9px) !important;
}

.juego .marcadores-grupo .marcador strong {
  color: #334155 !important;
  font-weight: 900 !important;
}

.juego .acciones #btnReiniciar,
.resultado-acciones #btnResultadoReiniciar {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 0 #1e40af !important;
}

.juego .acciones #btnSalir,
.resultado-acciones #btnResultadoSalir {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
  box-shadow: 0 4px 0 #7f1d1d !important;
}

.juego .acciones #btnReiniciar:hover,
.juego .acciones #btnReiniciar:focus,
.resultado-acciones #btnResultadoReiniciar:hover,
.resultado-acciones #btnResultadoReiniciar:focus {
  background: #1d4ed8 !important;
}

.juego .acciones #btnSalir:hover,
.juego .acciones #btnSalir:focus,
.resultado-acciones #btnResultadoSalir:hover,
.resultado-acciones #btnResultadoSalir:focus {
  background: #b91c1c !important;
}

@media (max-width: 640px) {
  .juego .marcadores-grupo .marcador {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  .juego .acciones #btnReiniciar,
  .juego .acciones #btnSalir,
  .resultado-acciones #btnResultadoReiniciar,
  .resultado-acciones #btnResultadoSalir {
    box-shadow: 0 2px 0 rgba(15, 23, 32, .28) !important;
  }
}

/* ============================================================
   Ajuste solicitado: secciones Inicio y Juego con paleta rojo/negro
   coherente con el background principal, manteniendo contraste alto.
   ============================================================ */
.inicio.panel,
.juego.panel,
.panel.inicio,
.panel.juego {
  background:
    radial-gradient(circle at 18% 14%, rgba(215, 17, 31, 0.22), transparent 24rem),
    radial-gradient(circle at 88% 84%, rgba(120, 0, 12, 0.28), transparent 26rem),
    linear-gradient(145deg, rgba(0, 0, 0, 0.96) 0%, rgba(9, 1, 3, 0.96) 38%, rgba(35, 0, 6, 0.96) 72%, rgba(0, 0, 0, 0.98) 100%) !important;
  border: 2px solid rgba(215, 17, 31, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -8px 0 rgba(0, 0, 0, 0.34),
    0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

.inicio .encabezado,
.inicio .controles-inicio,
.juego .tablero,
.juego .mensaje {
  position: relative;
  z-index: 1;
}

.inicio h1,
.inicio h2,
.juego h1,
.juego h2,
.juego .mensaje {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

.inicio p,
.inicio .nota-partida,
.inicio .etiqueta-dificultad,
.juego p,
.juego .mensaje {
  color: #f7d7dc !important;
}

.nivel {
  background:
    linear-gradient(145deg, #fff8eb 0%, #f4dfbf 100%) !important;
  color: #1d0508 !important;
  border: 3px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.86),
    inset 0 -7px 0 rgba(120, 0, 12, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.36) !important;
}

.nivel.activo,
.nivel:hover,
.nivel:focus {
  background:
    linear-gradient(145deg, #ffffff 0%, #ffe0c7 100%) !important;
  border-color: #ffffff !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -7px 0 rgba(215, 17, 31, 0.22),
    0 0 0 5px rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.42) !important;
}

.nivel-numero {
  background:
    linear-gradient(145deg, #230006 0%, #7a0010 58%, #d7111f 100%) !important;
  color: #ffffff !important;
  border: 3px solid rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -5px 0 rgba(0, 0, 0, 0.36) !important;
}

.nivel-texto,
.nivel-cartas {
  color: #230006 !important;
}

.juego .barra {
  background:
    linear-gradient(145deg, rgba(255, 248, 235, 0.96) 0%, rgba(244, 223, 191, 0.96) 100%) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.78),
    inset 0 -5px 0 rgba(120, 0, 12, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.32) !important;
}

.juego .marcadores-grupo .marcador,
.juego .marcadores-grupo .marcador strong {
  color: #230006 !important;
}

.juego .acciones #btnReiniciar,
.resultado-acciones #btnResultadoReiniciar {
  background: linear-gradient(145deg, #315eea 0%, #1d4ed8 100%) !important;
  border-color: #dbeafe !important;
}

.juego .acciones #btnSalir,
.resultado-acciones #btnResultadoSalir {
  background: linear-gradient(145deg, #ef4444 0%, #991b1b 100%) !important;
  border-color: #fee2e2 !important;
}

.carta {
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.84),
    inset 0 -8px 0 rgba(120, 0, 12, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.38) !important;
}

@media (max-width: 700px) {
  .inicio.panel,
  .juego.panel,
  .panel.inicio,
  .panel.juego {
    border-radius: clamp(14px, 5vw, 22px) !important;
    border-width: 1px !important;
  }
}


/* ============================================================
   Ajuste solicitado: secciones transparentes sin borde y botón Inicio
   ============================================================ */
.panel,
.inicio.panel,
.juego.panel,
.resultado.panel,
.panel.inicio,
.panel.juego,
.panel.resultado {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.resultado-contenido {
  background: rgba(0, 0, 0, 0.34);
  border: 0 !important;
  box-shadow: none !important;
}

.btn-inicio-flat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  margin-top: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-inicio-flat:hover,
.btn-inicio-flat:focus {
  background: rgba(255, 255, 255, 0.20);
  outline: 4px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .btn-inicio-flat {
    width: min(260px, 92vw);
    min-height: 52px;
    font-size: 1.05rem;
  }
}

/* Ajuste solicitado: cuando dos cartas no coinciden, deben marcarse en rojo en cualquier juego/nivel,
   mantenerse visibles un momento y luego volver al color normal al cerrarse. */
.carta.pareja-incorrecta,
.carta.pareja-incorrecta.abierta,
.carta.pareja-incorrecta.vista-previa {
  background: linear-gradient(145deg, #ff6b6b 0%, #dc2626 58%, #7f1d1d 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow:
    inset 5px 5px 9px rgba(255, 255, 255, 0.38),
    inset -8px -8px 14px rgba(70, 0, 0, 0.45),
    0 8px 0 #5f0f0f !important;
}

.carta.pareja-incorrecta img {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)) !important;
}

.carta.pareja-incorrecta .reverso {
  color: #ffffff !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45) !important;
}