:root { --neon: #38bdf8; --neon-oro: #fbbf24; --borde: #4b5563; --texto: #e0e7ff; --apagado: #8892b0; --verde: #10b981; }
.panel-neon {
  background: rgba(15, 18, 32, .82); backdrop-filter: blur(3px);
  border: 2px solid var(--neon); box-shadow: 0 0 12px rgba(56, 189, 248, .45), inset 0 0 18px rgba(56, 189, 248, .08);
  padding: 14px;
}
.hud { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.hud-der { text-align: right; }

#escena { position: relative; height: 420px; display: grid; place-items: center; }
#aura {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.30) 0%, rgba(56,189,248,.10) 45%, transparent 70%);
  animation: respira 3.2s ease-in-out infinite;
}
@keyframes respira { 50% { transform: scale(1.12); opacity: .75; } }
#avatar { width: 160px; height: 160px; image-rendering: pixelated; position: relative; filter: drop-shadow(0 0 10px rgba(56,189,248,.5)); }

#orbitales { position: absolute; inset: 0; pointer-events: none; }
.orbital {
  pointer-events: auto; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--ang)) translateX(170px) rotate(calc(-1 * var(--ang)));
  width: 64px; height: 64px; border-radius: 50%; cursor: pointer;
  background: rgba(15, 18, 32, .9); border: 2px solid var(--neon); color: var(--texto);
  font-size: 22px; box-shadow: 0 0 10px rgba(56,189,248,.5);
  animation: flota 4s ease-in-out infinite;
}
.orbital:hover { box-shadow: 0 0 22px rgba(56,189,248,.95); }
.orbital span { display: block; font: 7px 'Press Start 2P', monospace; margin-top: 4px; }
@keyframes flota { 50% { margin-top: -6px; } }

.quest-win {
  background: rgba(15, 18, 32, .82); border: 2px solid var(--neon); padding: 14px;
  box-shadow: 0 0 12px rgba(56,189,248,.45);
}
.quest-win h2 { color: var(--neon); font-size: 11px; margin-bottom: 10px; text-shadow: 0 0 8px rgba(56,189,248,.8); }
.quest-win ul { list-style: none; display: grid; gap: 8px; }
.quest-win li { display: flex; justify-content: space-between; gap: 8px; }
.quest-win li.hecha { color: var(--verde); }
.q-coins { color: var(--neon-oro); }
.q-bonus { font-size: 8px; margin-top: 10px; color: var(--apagado); }
.quest-win.completa { border-color: var(--neon-oro); box-shadow: 0 0 18px rgba(251,191,36,.6); }
.quest-win.completa h2 { color: var(--neon-oro); text-shadow: 0 0 8px rgba(251,191,36,.8); }

#overlay { position: fixed; inset: 10%; z-index: 9; }
#overlay-caja { max-height: 100%; overflow: auto; }
#overlay-caja ul { list-style: none; display: grid; gap: 10px; margin: 10px 0; }
#overlay-cerrar { background: none; border: none; color: var(--apagado); cursor: pointer; margin-top: 6px; font-family: inherit; }

#escena, #overlay { background: none; border: none; box-shadow: none; padding: 0; }

@media (max-width: 640px) {
  #escena { height: 460px; }
  .orbital { transform: translate(-50%, -50%) rotate(var(--ang)) translateX(130px) rotate(calc(-1 * var(--ang))); }
}

/* --- Restyle anime (Task 4): Rajdhani + silueta. Solo el santuario carga este css. --- */
@font-face { font-family: 'Rajdhani'; font-weight: 500; src: url('fonts/rajdhani-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Rajdhani'; font-weight: 700; src: url('fonts/rajdhani-700.woff2') format('woff2'); font-display: swap; }
body { font-family: 'Rajdhani', system-ui, sans-serif; font-size: 17px; letter-spacing: .03em; line-height: 1.45; image-rendering: auto; }
h1 { font-size: 24px; } h2 { font-size: 17px; }
h1, h2, .nivel { text-transform: uppercase; letter-spacing: .14em; }
.peq { font-size: 13px; }
.quest-win h2 { font-size: 15px; }
.q-bonus { font-size: 12px; }
.orbital { font-size: 26px; }
.orbital span { font: 600 11px 'Rajdhani', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#avatar {
  height: 340px; width: auto; image-rendering: auto;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, .35));
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at 50% 46%, #000 58%, transparent 88%);
  mask-image: radial-gradient(ellipse 70% 66% at 50% 46%, #000 58%, transparent 88%);
}

#overlay-caja form { display: grid; gap: 10px; }
#overlay-caja input, #overlay-caja textarea, #overlay-caja select {
  background: #0a0d18; border: 1px solid var(--borde); color: var(--texto);
  font: inherit; padding: 8px; border-radius: 4px;
}
#overlay-caja button[type=submit], #overlay-caja [data-comprar] {
  background: none; border: 2px solid var(--neon); color: var(--neon);
  padding: 10px; cursor: pointer; font: inherit; letter-spacing: .1em; border-radius: 4px;
}
#overlay-caja [disabled] { opacity: .4; cursor: default; }