@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@500;700;800;900&display=swap');

:root {
  --fondo: #0a0503;
  --fondo2: #2a0707;
  --panel: rgba(255, 190, 110, 0.07);
  --panel-borde: rgba(255, 201, 60, 0.22);
  --texto: #fff6e6;
  --suave: #e6c9a0;
  --oro: #ffc93c;
  --oro2: #ff9f1c;
  --rosa: #ff3b2f;
  --rojo: #e0121f;
  --verde: #3ddc84;
  --cian: #ffd27a;
  --mapri: #f08a4b;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --display: 'Bungee', 'Arial Black', Impact, sans-serif;
  --cuerpo: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(224, 18, 31, 0.35), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 170, 40, 0.12), transparent 50%),
    linear-gradient(160deg, var(--fondo2), var(--fondo) 60%);
  background-color: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
.display { font-family: var(--display); letter-spacing: 0.02em; }
.oro { color: var(--oro); }
.oculto { display: none !important; }

.boton {
  border: 0; border-radius: 14px; padding: 14px 18px;
  font-weight: 900; font-size: 17px; color: #2a0f00;
  background: linear-gradient(180deg, var(--oro), var(--oro2));
  box-shadow: 0 5px 0 #b45f00, var(--sombra);
  transition: transform .08s, box-shadow .08s;
}
.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 #b45f00; }
.boton:disabled { filter: grayscale(.8) brightness(.7); }
.boton.rosa { background: linear-gradient(180deg, #ff6a4d, var(--rosa)); color: #fff; box-shadow: 0 5px 0 #8a0f0a, var(--sombra); }
.boton.rojo { background: linear-gradient(180deg, #ff4a4a, var(--rojo)); color: #fff; box-shadow: 0 5px 0 #9a0a20, var(--sombra); }
.boton.verde { background: linear-gradient(180deg, #6ff0a8, var(--verde)); color: #062b16; box-shadow: 0 5px 0 #13824a, var(--sombra); }
.boton.morado { background: linear-gradient(180deg, #ffb27a, var(--mapri)); color: #2a0f00; box-shadow: 0 5px 0 #9a4316, var(--sombra); }
.boton.fantasma { background: var(--panel); color: var(--texto); box-shadow: none; border: 1px solid var(--panel-borde); }

.tarjeta { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 18px; padding: 16px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-weight: 800; font-size: 13px; background: rgba(0,0,0,.3); }
.chip.mapri { background: rgba(240,138,75, .25); color: #ffd9bf; }
.chip.peligro { background: rgba(255, 46, 77, .25); color: #ffc0a8; }
.ficha::before { content: '🪙'; margin-right: 4px; }

@keyframes rebote { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes latido { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
@keyframes entrar { from { opacity: 0; transform: translateY(16px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes parpadeo { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes sacudir { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) rotate(-2deg) } 75% { transform: translateX(6px) rotate(2deg) } }
.entrar { animation: entrar .35s ease-out both; }