/* ===================================================================
   Monopoly Casino & Sports — estilos de marca (sin build, sin framework)
   Colores y animaciones extraídos de monopolycasino.es / globals.css
   =================================================================== */
:root {
  --mono-red:        #E40C03;
  --mono-red-dark:   #B50900;
  --mono-red-active: #D31E1E;
  --mono-dark:       #030916;
  --mono-nav:        #040F28;
  --mono-card:       #031A41;
  --mono-card2:      #051528;
  --mono-border:     #0D2550;
  --mono-text:       #FFFFFF;
  --mono-nav-link:   #D3E1FF;
  --mono-muted:      #A4B8E5;
  --mono-muted2:     #9CD5FF;
  --mono-lime:       #D4E100;
  --mono-success:    #22c55e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:  var(--mono-dark);
  color:       var(--mono-text);
  font-family: 'Kumbh Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }

.mono-lime { color: var(--mono-lime); }
.mono-red  { color: var(--mono-red);  }

.bote-card-glass { background: var(--mono-card); border: 1px solid var(--mono-border); }
.bote-glow { box-shadow: 0 0 30px rgba(228,12,3,0.4), 0 0 70px rgba(228,12,3,0.15); }

/* ── Botones cuadrados (border-radius 0) idénticos a Monopoly ── */
.mono-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mono-red); color: #fff; font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.02em; padding: 0.75rem 2rem;
  border-radius: 0; transition: background .18s, opacity .18s; white-space: nowrap;
  cursor: pointer; border: none;
}
.mono-btn:hover { background: var(--mono-red-dark); opacity: .92; }
.mono-btn-outline {
  background: transparent; border: 2px solid rgba(255,255,255,0.35); color: #fff; border-radius: 0;
}
.mono-btn-outline:hover { border-color: var(--mono-red); background: rgba(228,12,3,0.12); }

/* ── Animaciones ── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.animate-float { animation: float 4s ease-in-out infinite; }

@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(228,12,3,.3)} 50%{box-shadow:0 0 50px rgba(228,12,3,.65)} }
.animate-pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }

@keyframes slide-up { from{opacity:0;transform:translateY(35px)} to{opacity:1;transform:translateY(0)} }
.animate-slide-up { animation: slide-up .7s ease-out forwards; }

@keyframes fade-in { from{opacity:0} to{opacity:1} }
.animate-fade-in { animation: fade-in .6s ease-out forwards; }

@keyframes carousel-belt { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.carousel-belt { animation: carousel-belt 40s linear infinite; width: max-content; display: flex; }
.carousel-belt:hover { animation-play-state: paused; }

@keyframes pp-in { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ── Utilidades de layout mínimas (por si Tailwind CDN tarda) ── */
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.hidden-load { opacity: 0; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--mono-border); border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--mono-dark); }

/* ── Tarjetas de evento (hover) ── */
.event-card { transition: transform .18s, border-color .18s, box-shadow .18s; }
.event-card:hover { transform: translateY(-4px); border-color: var(--mono-red); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(3,9,22,.82); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; }

/* ── Light mode ── */
body.light-mode {
  --mono-dark: #eef1f7; --mono-nav: #dde3f0; --mono-card: #ffffff;
  --mono-border: #c5cfe0; --mono-text: #030916; --mono-muted: #445566; --mono-nav-link: #445566;
}