/* ===== VARIABLES GLOBALES ===== */
:root{
  /* fondo exterior (sin tocar) */
  --bg-blue-start:#0f172a; --bg-blue-end:#1e293b;
  --bg-green-start:#022c22; --bg-green-end:#064e3b;
  --bg-orange-start:#431407; --bg-orange-end:#7c2d12;
  --bg-pink-start:#3b0764; --bg-pink-end:#9d174d;

  --radius-xl:28px;
  --radius-md:16px;
  --transition-fast:0.18s ease-out;
  --font-main: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== BODY (exterior) ===== */
body{
  margin:0; padding:0;
  height:100vh; display:flex; justify-content:center; align-items:center;
  font-family:var(--font-main); color:#111;
  background: radial-gradient(circle at top, var(--bg-blue-start), var(--bg-blue-end));
  overflow:hidden;
  transition: background 0.35s ease;
}

/* ===== DECOR LAYER ===== */
.decor-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

/* ===== CONTENEDOR PRINCIPAL - UI THEMES (PASTEL) ===== */
#app-container{
  width:min(1200px, calc(100vw - 60px));
  height:min(700px, calc(100vh - 60px));
  background: #fef6ee;
  border-radius:var(--radius-xl);
  padding:32px 40px; box-sizing:border-box; position:relative; z-index:2;
  box-shadow: 0 24px 55px rgba(15,23,42,0.15);
  transition: background 0.25s ease, color 0.25s ease;
}

/* ---------- PASTEL THEMES: variables por tema ---------- */
/* Pastel gold (por defecto) */
#app-container.ui-theme-pastel-gold{
  --ui-bg: #fff9f2;
  --ui-primary: #f6c27f;
  --ui-primary-strong: #f97316;
  --ui-text: #2b2b2b;
  --ui-muted: #8d7a61;
  background: var(--ui-bg);
}

/* Pastel blue */
#app-container.ui-theme-pastel-blue{
  --ui-bg: #f3fbff;
  --ui-primary: #a9e0ff;
  --ui-primary-strong: #38bdf8;
  --ui-text: #153242;
  --ui-muted: #678ea0;
  background: var(--ui-bg);
}

/* Pastel mint */
#app-container.ui-theme-pastel-mint{
  --ui-bg: #f6fffb;
  --ui-primary: #bff8e1;
  --ui-primary-strong: #34d399;
  --ui-text: #0f3a30;
  --ui-muted: #5a8a7d;
  background: var(--ui-bg);
}

/* Pastel lavender */
#app-container.ui-theme-pastel-lavender{
  --ui-bg: #fbf7ff;
  --ui-primary: #e7d7ff;
  --ui-primary-strong: #a78bfa;
  --ui-text: #2a1338;
  --ui-muted: #7b66a8;
  background: var(--ui-bg);
}

/* ===== UTILS ===== */
.hidden{ display:none !important; }

/* THEME BUTTON (solo UI) */
#ui-theme-toggle{ position:absolute; top:18px; right:24px; z-index:20; }
#change-ui-btn{
  width:46px; height:46px; border-radius:50%; border:none;
  background: radial-gradient(circle at 30% 20%, #fff, #ffeccc);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.06); cursor:pointer; font-size:1.2rem;
}

/* TITLE / MENU */
.title-wrap{ margin-top:34px; margin-bottom:4px; text-align:center; }
.title-wrap h1{ font-size:2.8rem; margin:0; color:var(--ui-primary-strong); letter-spacing:0.06em; font-weight:800; }
.subtitle{ font-size:0.9rem; color:var(--ui-muted); margin-top:12px; margin-bottom:34px; text-align:center; }

/* LEVEL GRID */
.level-grid{ display:grid; grid-template-columns:repeat(5, minmax(110px,1fr)); gap:18px 22px; justify-items:center; }
.level-btn{
  width:120px; height:70px; border-radius:var(--radius-md); padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--ui-primary));
  color: #fff; font-weight:700; font-size:0.9rem; transition: transform .16s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.level-number{ font-size:1.4rem; font-weight:900; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.08); }
.level-label{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.12em; color: rgba(255,255,255,0.9); }
.level-btn:hover{ transform: translateY(-4px); }

/* HUD */
#game-screen{ width:100%; height:100%; }
.game-header{ display:flex; justify-content:center; gap:12px; align-items:center; margin-top:24px; margin-bottom:30px; flex-wrap:wrap; }
.info-box{
  padding:10px 16px; border-radius:999px; background: rgba(0,0,0,0.04);
  font-weight:700; font-size:0.9rem; color:var(--ui-text);
}
.objective-box{ max-width:260px; }

/* WALLET */
.wallet-box{
  padding:8px 14px; border-radius:999px; display:flex; align-items:center; gap:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,245,0.95));
  box-shadow: 0 6px 18px rgba(0,0,0,0.04); font-weight:800; position:relative;
}
.wallet-label{ text-transform:uppercase; font-size:0.7rem; color:var(--ui-text); }
.wallet-amount{ font-size:0.95rem; color:var(--ui-primary-strong); }

/* BUTTON GRID (juego) */
#button-grid{ display:grid; gap:26px; justify-content:center; justify-items:center; align-content:center; height: calc(100% - 140px); }

/* BTN base */
.game-button{ width:110px; height:110px; border-radius:50%; border:2px solid rgba(0,0,0,0.06);
  background: radial-gradient(circle at 30% 20%, #4b5563, #020617);
  box-shadow: 0 10px 22px rgba(0,0,0,0.06); cursor:pointer; position:relative; transition: all 0.08s ease-out;
}
.game-button::after{ content:""; position:absolute; inset:16px; border-radius:inherit; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent); pointer-events:none; }
.game-button.active{ animation: pulse-target 0.4s infinite alternate; }

/* colores de botón (mantener buena visibilidad) */
.game-button.color-red{ background: radial-gradient(circle at 30% 20%, #ffe5ea, #ff3b5c); box-shadow:0 10px 22px rgba(220,53,69,0.25); }
.game-button.color-blue{ background: radial-gradient(circle at 30% 20%, #e5f0ff, #2563eb); box-shadow:0 10px 22px rgba(37,99,235,0.18); }
.game-button.color-yellow{ background: radial-gradient(circle at 30% 20%, #fff7e5, #facc15); box-shadow:0 10px 22px rgba(234,179,8,0.18); }
.game-button.color-green{ background: radial-gradient(circle at 30% 20%, #e5fff2, #16a34a); box-shadow:0 10px 22px rgba(22,163,74,0.18); }

@keyframes pulse-target{ from{transform:translateY(0) scale(1);} to{transform:translateY(-2px) scale(1.06);} }

/* COUNTDOWN / MODAL / CELEBRATION */
#countdown-overlay{ position:absolute; inset:0; background: rgba(10,16,30,0.45); display:flex; justify-content:center; align-items:center; z-index:40; }
#countdown-number{ font-size:5.5rem; font-weight:800; color:var(--ui-primary-strong); text-shadow: 0 8px 18px rgba(0,0,0,0.25); }
.modal-content{ background: radial-gradient(circle at top, #111827, #020617); padding:28px 34px; border-radius:20px; min-width:280px; color:#e5e7eb; }

/* CELEBRATION */
.celebration-overlay{ position:fixed; inset:0; pointer-events:none; z-index:45; overflow:hidden; }
.confetti-piece{ position:absolute; top:-20px; width:8px; height:18px; border-radius:2px; opacity:0; animation-name: confetti-fall; animation-timing-function:ease-out; animation-fill-mode:forwards; }
@keyframes confetti-fall{ 0%{ transform: translate3d(0,-20px,0) rotateZ(0deg); opacity:0; } 15%{ opacity:1; } 100%{ transform: translate3d(0,120vh,0) rotateZ(360deg); opacity:0; } }
.balloon{ position:absolute; bottom:-80px; width:40px; height:60px; border-radius:999px 999px 40px 40px; background: radial-gradient(circle at 30% 20%, #fff, var(--balloon-color)); box-shadow: 0 10px 22px rgba(0,0,0,0.08); opacity:0; animation-name: balloon-rise; animation-fill-mode:forwards; }
@keyframes balloon-rise{ 0%{ transform: translate3d(0,40px,0) scale(0.7); opacity:0; } 20%{ opacity:1; } 100%{ transform: translate3d(0,-120vh,0) scale(1); opacity:0; } }

/* RESPONSIVE */
@media (max-width:900px){
  #app-container{ width:92vw; height:calc(100vh - 40px); padding:18px 16px; border-radius:24px; }
  .level-grid{ grid-template-columns: repeat(3, minmax(96px,1fr)); }
  #button-grid{ gap:18px; }
  .game-button{ width:88px; height:88px; }
}
@media (max-width:600px){
  .title-wrap h1{ font-size:2.2rem; }
}