@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&family=Fredoka+One&display=swap');

:root {
  --pink:     #ffb3d1;
  --pink-d:   #e8739e;
  --lavender: #c9b0f5;
  --sky:      #b0d8f5;
  --mint:     #a8e6cf;
  --peach:    #ffd5b0;
  --yellow:   #ffe08a;
  --white:    #fff8fc;
  --dark:     #2d1b3d;
  --shadow:   rgba(180, 100, 160, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: var(--dark);
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  user-select: none;
}

/* ── GAME WRAPPER ── */
#game-wrapper {
  position: relative;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}

#gameCanvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 12px;
  box-shadow: 0 0 60px var(--shadow), 0 0 120px rgba(200, 160, 240, 0.15);
}

/* ── LOADING SCREEN ── */
#loading-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1b3d 50%, #1a0a2e 100%);
  z-index: 100;
  gap: 24px;
}
#loading-screen h1 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 6vw, 4rem);
  color: var(--pink);
  text-shadow: 0 0 20px var(--pink-d), 0 4px 0 #5a1a3a;
  letter-spacing: 2px;
  animation: pulse-title 2s ease-in-out infinite;
}
#loading-screen p {
  color: var(--lavender);
  font-size: 1rem;
  opacity: 0.8;
  animation: dots 1.5s steps(3, end) infinite;
}
#loading-bar-bg {
  width: min(400px, 70vw);
  height: 16px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  border: 2px solid var(--lavender);
  overflow: hidden;
}
#loading-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--lavender));
  border-radius: 99px;
  transition: width 0.4s ease;
  box-shadow: 0 0 12px var(--pink);
}
#loading-emoji { font-size: 3rem; animation: spin-bounce 1s ease-in-out infinite; }

/* ── OVERLAY SCREENS ── */
.screen {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  z-index: 50;
  gap: 18px;
}
.screen.active { display: flex; }

/* ── TITLE SCREEN ── */
#title-screen {
  background: radial-gradient(ellipse at 50% 30%, rgba(255,179,209,0.18) 0%, transparent 70%),
              linear-gradient(180deg, #1a0a2e 0%, #2d1b3d 100%);
}
#title-screen h1 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--pink);
  text-shadow: 0 0 30px var(--pink-d), 0 6px 0 #5a1a3a;
  letter-spacing: 4px;
  animation: pulse-title 3s ease-in-out infinite;
}
#title-screen .subtitle {
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  color: var(--lavender);
  letter-spacing: 2px;
  opacity: 0.85;
}
.kawaii-btn {
  background: linear-gradient(135deg, var(--pink), var(--pink-d));
  color: #fff;
  border: none;
  padding: 14px 48px;
  border-radius: 99px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.4rem;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 0 #8a2050, 0 0 20px rgba(255,100,160,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
  border: 3px solid rgba(255,255,255,0.3);
}
.kawaii-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #8a2050, 0 0 30px rgba(255,100,160,0.5); }
.kawaii-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a2050; }
.kawaii-btn.secondary {
  background: linear-gradient(135deg, var(--lavender), #9b7fe0);
  box-shadow: 0 6px 0 #6040a0, 0 0 20px rgba(160,120,240,0.4);
}
.kawaii-btn.secondary:hover { box-shadow: 0 8px 0 #6040a0, 0 0 30px rgba(160,120,240,0.5); }
.kawaii-btn.secondary:active { box-shadow: 0 3px 0 #6040a0; }

.floating-petals {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50% 0 50% 0;
  opacity: 0.6;
  animation: fall-petal linear infinite;
}

/* ── CINEMATIC SCREEN ── */
#cinematic-screen {
  background: #0d0515;
  flex-direction: column;
  padding: 0;
}
#cinematic-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#cinematic-skip {
  position: absolute;
  bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 56px));
  right: 30px;
  background: rgba(255,255,255,0.15);
  color: var(--lavender);
  border: 1px solid var(--lavender);
  padding: 8px 20px;
  border-radius: 99px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}
#cinematic-skip:hover { background: rgba(255,255,255,0.25); color: white; }

/* ── CHARACTER SELECT ── */
#char-select-screen {
  background: radial-gradient(ellipse at 50% 30%, rgba(200,176,245,0.18) 0%, transparent 70%),
              linear-gradient(180deg, #1a0a2e 0%, #2d1b3d 100%);
}
#char-select-screen h2 {
  font-family: 'Fredoka One', cursive;
  color: var(--lavender);
  font-size: 2rem;
  text-shadow: 0 0 15px var(--lavender);
}
.char-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.char-card {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
  backdrop-filter: blur(8px);
  position: relative;
}
.char-card:hover, .char-card.selected {
  border-color: var(--pink);
  background: rgba(255,179,209,0.15);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255,100,160,0.3);
}
.char-card.locked {
  opacity: 0.45;
  filter: grayscale(0.7);
  cursor: not-allowed;
}
.char-card.locked:hover { transform: none; }
.char-card img { width: 80px; height: 80px; object-fit: contain; image-rendering: auto; }
.char-card .char-name {
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: var(--white);
}
.char-card .char-tag {
  font-size: 0.65rem;
  color: var(--lavender);
  opacity: 0.8;
  text-align: center;
}
.char-card .lock-icon {
  position: absolute; top: 8px; right: 8px;
  font-size: 1rem;
}

/* ── HUD ── */
#hud {
  position: absolute;
  top: 16px; left: 0; right: 0;
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 24px;
  pointer-events: none;
  z-index: 20;
}
#hud.active { display: flex; }
.hud-panel {
  background: rgba(30, 10, 50, 0.7);
  border: 2px solid rgba(255,179,209,0.3);
  border-radius: 12px;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.hp-hearts { display: flex; gap: 4px; font-size: 1.2rem; }
.breath-bar-bg {
  width: 100px; height: 10px;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  overflow: hidden;
}
.breath-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--sky), var(--lavender));
  border-radius: 99px;
  transition: width 0.1s;
  box-shadow: 0 0 6px var(--sky);
}
.hud-label {
  font-size: 0.65rem;
  color: var(--lavender);
  font-weight: 700;
  letter-spacing: 1px;
}
.hud-score {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  color: var(--yellow);
  text-shadow: 0 2px 0 #8a6000;
}
#char-portrait {
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 2px solid var(--pink);
  object-fit: contain;
  background: rgba(255,255,255,0.05);
}

/* ── PAUSE SCREEN ── */
#pause-screen {
  background: rgba(13, 5, 21, 0.85);
  backdrop-filter: blur(12px);
}
#pause-screen h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 3rem;
  color: var(--pink);
  text-shadow: 0 0 20px var(--pink-d);
}

/* ── GAME OVER ── */
#gameover-screen {
  background: rgba(13, 5, 21, 0.92);
  backdrop-filter: blur(12px);
}
#gameover-screen h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 3.5rem;
  color: #ff6b9d;
  text-shadow: 0 0 30px #ff0055;
  animation: shake 0.5s ease-in-out;
}
#gameover-screen .score-display {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: var(--yellow);
}

/* ── LEVEL CLEAR ── */
#levelclear-screen {
  background: rgba(13, 5, 21, 0.85);
  backdrop-filter: blur(12px);
}
#levelclear-screen h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 3.5rem;
  color: var(--mint);
  text-shadow: 0 0 30px var(--mint);
  animation: bounce-in 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
#level-stars { font-size: 2.5rem; letter-spacing: 8px; }

/* ── LEVEL BADGE ── */
#level-badge {
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(30, 10, 50, 0.8);
  border: 2px solid var(--lavender);
  border-radius: 99px;
  padding: 6px 20px;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: var(--lavender);
  display: none;
  pointer-events: none;
  z-index: 20;
}
#level-badge.active { display: block; }

/* ── CONTROLS HINT ── */
#controls-hint {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.35);
  font-size: 0.7rem;
  letter-spacing: 2px;
  display: none;
  pointer-events: none;
  z-index: 20;
  text-align: center;
}
#controls-hint.active { display: block; }

/* ── TOUCH CONTROLS ── */
#touch-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 28px;
  /* Base offset + OS navigation bar safe area */
  padding-bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px));
  z-index: 25;
  margin-bottom: clamp(8px, 2vh, 20px);
}
@media (pointer: coarse) { #touch-controls { display: flex; } }
.touch-btn {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: background 0.1s, transform 0.08s;
}
.touch-btn:active {
  background: rgba(255,179,209,0.3);
  transform: scale(0.92);
}
.touch-left { display: flex; gap: 12px; align-items: center; }
.touch-right { display: flex; gap: 12px; align-items: center; }

/* ── ANIMATIONS ── */
@keyframes pulse-title {
  0%, 100% { text-shadow: 0 0 20px var(--pink-d), 0 4px 0 #5a1a3a; transform: scale(1); }
  50%       { text-shadow: 0 0 40px var(--pink-d), 0 4px 0 #5a1a3a; transform: scale(1.03); }
}
@keyframes spin-bounce {
  0%, 100% { transform: rotate(-10deg) scale(1); }
  50%       { transform: rotate(10deg) scale(1.2); }
}
@keyframes dots {
  0%   { content: 'Cargando...'; }
  33%  { content: 'Cargando.'; }
  66%  { content: 'Cargando..'; }
  100% { content: 'Cargando...'; }
}
@keyframes fall-petal {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0.7; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-10px); }
  40%       { transform: translateX(10px); }
  60%       { transform: translateX(-8px); }
  80%       { transform: translateX(8px); }
}
@keyframes bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes float-up {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0; }
}

/* ── CACHE CLEAR BUTTON (title screen) ── */
.cache-clear-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.35);
  padding: 7px 22px;
  border-radius: 99px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
.cache-clear-btn:hover {
  color: var(--lavender);
  border-color: var(--lavender);
  background: rgba(201,176,245,0.08);
}
.cache-clear-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ══════════════════════════════════════════════
   MOBILE HUD — touch devices (phones & tablets)
   ══════════════════════════════════════════════ */
@media (pointer: coarse) {

  /* ── HUD container ── */
  #hud {
    top: 8px;
    padding: 0 8px;
    gap: 6px;
  }

  /* ── Panels: more compact ── */
  .hud-panel {
    padding: 4px 8px;
    gap: 5px;
    border-radius: 10px;
    border-width: 1.5px;
  }

  /* ── Hide verbose labels (HP, ALIENTO, PUNTOS, OBJETOS) ── */
  .hud-label { display: none; }

  /* ── Portrait: smaller ── */
  #char-portrait {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border-width: 1.5px;
  }

  /* ── Hearts: smaller emoji ── */
  .hp-hearts {
    font-size: 0.85rem;
    gap: 2px;
  }

  /* ── Breath bar: narrower & thinner ── */
  .breath-bar-bg {
    width: 60px;
    height: 7px;
  }

  /* ── Score: smaller ── */
  .hud-score {
    font-size: 1rem;
  }

  /* ── Items count ── */
  #hud-items {
    font-size: 0.85rem !important;
  }

  /* ── Level badge: smaller & repositioned ── */
  #level-badge {
    font-size: 0.72rem;
    padding: 4px 12px;
    top: 8px;
    letter-spacing: 0.5px;
  }

  /* ── Hide keyboard controls hint on touch ── */
  #controls-hint { display: none !important; }
}