/* ============ Colores Felices — estilos ============ */
* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:#0e2a3a;
  font-family:-apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

#renderCanvas {
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
  outline:none;
  z-index:0;
}

/* ---------- overlays ---------- */
.overlay {
  position:fixed; inset:0;
  z-index:20;
  display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, rgba(14,42,58,.55), rgba(8,24,36,.92));
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.overlay.show { display:flex; animation:fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.card {
  text-align:center;
  background:rgba(255,255,255,.96);
  border-radius:34px;
  padding:min(4vh,28px) min(6vw,46px);
  max-width:min(92vw,640px);
  max-height:92vh;
  overflow:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  animation:pop .32s cubic-bezier(.2,1.5,.45,1);
}
@keyframes pop { from { transform:scale(.7); opacity:0 } to { transform:scale(1); opacity:1 } }

.card h1 {
  font-size:clamp(26px,5.2vh,54px);
  color:#123;
  letter-spacing:.5px;
  margin-bottom:.25em;
  text-shadow:2px 2px 0 #ffe27a;
}
.card .sub {
  font-size:clamp(14px,2.4vh,22px);
  color:#4a6;
  color:#5b7080;
  margin-bottom:1em;
}

.big-btn {
  border:none; cursor:pointer;
  font-weight:800;
  font-size:clamp(22px,4vh,40px);
  padding:.45em 1.3em;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#5ee08a,#22b95f);
  box-shadow:0 7px 0 #14924a, 0 12px 22px rgba(0,0,0,.3);
  transition:transform .08s, box-shadow .08s;
  margin:.3em;
}
.big-btn:active { transform:translateY(5px); box-shadow:0 2px 0 #14924a, 0 6px 12px rgba(0,0,0,.3); }

.level-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(54px,1fr));
  gap:10px;
  margin-top:18px;
  max-width:420px;
  margin-left:auto; margin-right:auto;
}
.level-btn {
  aspect-ratio:1/1;
  border:none; cursor:pointer;
  border-radius:18px;
  font-size:clamp(18px,3vh,26px);
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,#7fd0ff,#3aa9ef);
  box-shadow:0 5px 0 #1f7fbd;
  transition:transform .08s;
}
.level-btn:active { transform:translateY(4px); box-shadow:0 1px 0 #1f7fbd; }
.level-btn.locked { background:linear-gradient(180deg,#d8dee4,#aab4bd); box-shadow:0 5px 0 #8a939b; color:#eef2f5; }
.level-btn svg { width:1.05em; height:1.05em; }
.hint { margin-top:14px; font-size:clamp(11px,1.9vh,15px); color:#93a2ae; }

.stars { font-size:clamp(30px,7vh,64px); letter-spacing:6px; animation:pop .4s cubic-bezier(.2,1.6,.4,1); }
#celebraText { color:#ff8a1e; text-shadow:2px 2px 0 #ffe27a; }

/* ---------- rotación ---------- */
.overlay.rotate { background:linear-gradient(160deg,#1d3f57,#0d2231); z-index:60; }
.overlay.rotate .card { background:rgba(255,255,255,.95); }
.phone-ico { font-size:clamp(40px,12vh,90px); animation:girar 2s ease-in-out infinite; }
.phone-ico svg { width:1em; height:1em; display:block; }
@keyframes girar { 0%,35% { transform:rotate(0) } 55%,100% { transform:rotate(-90deg) } }

/* ---------- HUD ---------- */
.hud {
  position:fixed; inset:0;
  z-index:10;
  pointer-events:none;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px)
           calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 12px);
}
.hud.hidden { display:none; }
.hud-btn {
  pointer-events:auto;
  width:clamp(44px,7vh,62px); height:clamp(44px,7vh,62px);
  border:none; cursor:pointer;
  border-radius:50%;
  font-size:clamp(20px,3.4vh,30px);
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center;
}
.hud-btn:active { transform:scale(.92); }
.hud-btn svg { width:1.35em; height:1.35em; }
/* iconos SVG (sin emojis: regla de Kevin) */
.ico-svg { width:1em; height:1em; display:inline-block; }
h1 .ico-rainbow { width:.95em; height:.95em; vertical-align:-.08em; }
.dots { display:flex; gap:9px; align-items:center; flex-wrap:wrap; justify-content:center; }
.dot {
  width:clamp(18px,3.2vh,28px); height:clamp(18px,3.2vh,28px);
  border-radius:50%;
  background:rgba(255,255,255,.35);
  border:3px solid rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .2s, background .2s;
}
.dot.done { transform:scale(1.15); }
.dot.current { animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.28) } }

.noscript {
  position:fixed; inset:0; z-index:99;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; text-align:center; padding:20px;
}

/* ---------- etiqueta de versión (visible para confirmar que se actualizó) ---------- */
#buildTag {
  position:fixed;
  right:calc(env(safe-area-inset-right) + 8px);
  bottom:calc(env(safe-area-inset-bottom) + 6px);
  z-index:30;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.3);
  padding:2px 8px; border-radius:999px;
  pointer-events:none;
  font-variant-numeric:tabular-nums;
}

@media (max-height:420px) {
  .card { border-radius:22px; padding:14px 26px; }
}