:root {
    --fondo: #0f0c29;
    --fondo2: #1b1446;
    --cristal: rgba(255,255,255,0.07);
    --cristal-borde: rgba(255,255,255,0.14);
    --texto: #f5f3ff;
    --texto-suave: #b8b3d9;
    --c1: #f368e0;
    --c2: #feca57;
    --acierto: #2ee59d;
    --fuente: "Fredoka", "Segoe UI", system-ui, -apple-system, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { min-height: 100%; }
  body {
    font-family: var(--fuente);
    background: var(--fondo);
    color: var(--texto);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
  }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  button:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; }

  /* Fondo animado */
  .fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background: radial-gradient(ellipse at top, var(--fondo2), var(--fondo) 70%); }
  .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .4;
    animation: flotar 18s ease-in-out infinite alternate; transition: background .8s; }
  .blob.b1 { width: 45vmax; height: 45vmax; background: var(--c1); top: -15vmax; left: -12vmax; }
  .blob.b2 { width: 38vmax; height: 38vmax; background: var(--c2); bottom: -14vmax; right: -10vmax; animation-delay: -6s; }
  @keyframes flotar {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(6vmax,4vmax) scale(1.1); }
    100% { transform: translate(-4vmax,6vmax) scale(.95); }
  }
  .punto { position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: var(--c2); opacity: .35; animation: flotarPunto linear infinite alternate; }
  @keyframes flotarPunto { from { transform: translate(0,0); } to { transform: translate(30px,-40px); } }

  /* Pantallas */
  #app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
  .pantalla { display: none; }
  .pantalla.activa { display: block; animation: entrar .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes entrar { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  /* Menú */
  .menu { max-width: 860px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 16px 32px;
    display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .titulo { text-align: center; }
  .titulo h1 { font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
  .titulo h1 span { background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .titulo p { color: var(--texto-suave); margin-top: 8px; }
  .seccion { width: 100%; }
  .seccion h2 { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
    color: var(--texto-suave); margin-bottom: 12px; padding-left: 4px; }
  .temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tarjeta-tema, .tarjeta-escena { background: var(--cristal); border: 2px solid var(--cristal-borde);
    border-radius: 18px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: transform .2s, border-color .25s, box-shadow .25s; min-height: 44px; }
  .tarjeta-tema .mini { width: 100%; height: auto; border-radius: 12px; }
  .tarjeta-tema strong, .tarjeta-escena span { font-size: .95rem; font-weight: 600; text-align: center; }
  .tarjeta-tema.activa, .tarjeta-escena.activa { border-color: var(--c1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 25%, transparent); transform: translateY(-3px); }
  @media (hover: hover) { .tarjeta-tema:hover, .tarjeta-escena:hover { transform: translateY(-3px); } }
  .escenas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .tarjeta-escena .mini { width: 100%; height: auto; border-radius: 10px; }
  .tarjeta-escena.azar { justify-content: center; }
  .tarjeta-escena.azar em { font-style: normal; font-size: 2rem; }
  .record { background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 14px;
    padding: 10px 16px; color: var(--texto-suave); text-align: center; width: 100%; }
  .record b { color: var(--texto); font-weight: 600; }
  .acciones { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
  .btn { padding: 14px 28px; border-radius: 999px; font-size: 1.15rem; font-weight: 700; min-height: 48px;
    transition: transform .15s, box-shadow .2s; }
  .btn:active { transform: scale(.96); }
  .btn.principal { color: #1a1033; background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--c1) 45%, transparent); padding: 16px 56px; font-size: 1.3rem; }
  .btn.secundario { background: var(--cristal); border: 1px solid var(--cristal-borde); }
  .btn[hidden] { display: none; }
  .subir-foto { display: inline-flex; align-items: center; cursor: pointer; }

  /* Juego */
  .contenido { max-width: 1200px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 12px 24px; display: flex; flex-direction: column; gap: 12px; }
  .barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .icono-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center;
    background: var(--cristal); border: 1px solid var(--cristal-borde); font-size: 1.2rem; transition: transform .15s, background .2s; }
  .icono-btn:active { transform: scale(.92); }
  .icono-btn:disabled { opacity: .4; }
  .grupo { display: flex; gap: 8px; }
  .titulo-juego { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .icono-tema { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem;
    background: linear-gradient(135deg, var(--c1), var(--c2)); flex-shrink: 0; }
  .titulo-juego div { display: flex; flex-direction: column; min-width: 0; }
  .titulo-juego strong { font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .titulo-juego small { font-size: .8rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .stat { background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 14px; padding: 8px 6px; text-align: center; }
  .stat span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
  .stat strong { display: block; font-size: clamp(1rem, 4vw, 1.35rem); font-weight: 600; font-variant-numeric: tabular-nums; }
  .stat.boton-pista { cursor: pointer; transition: transform .15s, border-color .2s; }
  .stat.boton-pista:disabled { opacity: .45; cursor: default; }
  .stat.boton-pista:not(:disabled):active { transform: scale(.96); }
  .progreso { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
  .progreso div { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--c1), var(--c2));
    box-shadow: 0 0 12px var(--c1); transition: width .5s cubic-bezier(.2,.8,.2,1); }
  .area { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }

  /* Tablero */
  .tablero { position: relative; border-radius: 14px; flex-shrink: 0;
    background-color: rgba(255,255,255,.04);
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: var(--cw, 50px) var(--ch, 40px);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.4); }
  .trazados { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 14px; pointer-events: none; }
  .referencia { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 14px;
    opacity: 0; transition: opacity .35s; pointer-events: none; }
  .tablero.ref .referencia { opacity: .55; }
  .tablero.completo .referencia { opacity: 1; transition: opacity 1.2s; }
  .tablero.completo { box-shadow: 0 0 0 3px var(--acierto), 0 0 40px rgba(46,229,157,.5); }
  .resaltado { position: absolute; border: 3px dashed #fff; border-radius: 10px; background: rgba(255,255,255,.18);
    box-shadow: 0 0 22px rgba(255,255,255,.7); pointer-events: none; animation: aparecerPista 1.5s ease forwards; }
  @keyframes aparecerPista { 0% { opacity: 0; transform: scale(1.08); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
  .destello { position: absolute; border-radius: 12px; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
    animation: destello .8s ease-out forwards; }
  @keyframes destello { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }

  /* Piezas */
  .pieza { touch-action: none; cursor: grab; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); display: block; }
  .tablero > .pieza { position: absolute; }
  .bandeja > .pieza { position: relative; flex-shrink: 0; }
  .pieza.arrastrando { cursor: grabbing; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
  .pieza.colocada { pointer-events: none; cursor: default; filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }
  .pieza.pista-pieza { animation: pulsoPista .5s ease infinite alternate; }
  @keyframes pulsoPista { from { filter: drop-shadow(0 0 0 #fff); } to { filter: drop-shadow(0 0 10px #fff); } }

  /* Bandeja */
  .bandeja { width: 420px; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start;
    gap: 6px; padding: 12px; background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 16px; }

  /* Modal */
  .modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px;
    background: rgba(10,6,30,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .35s; }
  .modal.visible { opacity: 1; pointer-events: auto; }
  .modal-caja { width: 100%; max-width: 400px; text-align: center; background: linear-gradient(170deg, rgba(40,30,90,.97), rgba(20,14,50,.98));
    border: 1px solid var(--cristal-borde); border-radius: 26px; padding: 26px 22px 22px; box-shadow: 0 30px 70px rgba(0,0,0,.6);
    transform: scale(.8) translateY(30px); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
  .modal.visible .modal-caja { transform: none; }
  .modal-caja h2 { font-size: 2rem; font-weight: 700; background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .modal-caja .subtitulo { color: var(--texto-suave); margin: 4px 0 14px; }
  .creditos { font-size: .72rem; color: var(--texto-suave); margin: -6px 0 12px; min-height: 1em; }
  .resultados { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .resultado { background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 14px; padding: 10px 4px; }
  .resultado span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
  .resultado strong { font-size: 1.2rem; font-weight: 600; }
  .nuevo-record { min-height: 1.4em; font-weight: 600; color: var(--c2); margin-bottom: 14px; }
  .modal-botones { display: flex; gap: 10px; }
  .modal-botones button { flex: 1; padding: 14px; border-radius: 14px; font-weight: 600; font-size: 1rem; min-height: 48px; }
  .btn-repetir { color: #1a1033; background: linear-gradient(135deg, var(--c1), var(--c2)); }
  #confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

  /* Responsive */
  @media (max-width: 800px) {
    .area { flex-direction: column; align-items: center; }
    .bandeja { width: 100%; height: auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 10px; }
    .temas { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .escenas { grid-template-columns: repeat(2, 1fr); }
    .hud { gap: 6px; }
    .stat span { font-size: .58rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }