/* ============================================================
   main.css — Reset, variables y estructura general
   ============================================================ */

:root {
  --font-pixel: 'Jersey10', monospace;          /* HUD, ruleta, números en canvas */
  --font-title: 'Alumni', 'Jersey10', sans-serif; /* logotipo y titulares */
  --font-ui:    'Montserrat', system-ui, sans-serif; /* textos largos y modales */

  --gold:       #FFC400;
  --gold-dim:   #A37800;
  --danger:     #E53935;
  --success:    #4CAF50;

  --ui-bg:      rgba(18, 18, 22, 0.82);
  --ui-bg-solid:#15151A;
  --ui-border:  rgba(255, 255, 255, 0.14);
  --text:       #FFFFFF;
  --text-dim:   #A9AFB8;

  --shadow-pixel: 2px 2px 0 rgba(0, 0, 0, 0.85);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  background: #0C1016;
  user-select: none;
  -webkit-user-select: none;
}

/* Cielo de respaldo por si falta la imagen de fondo */
#app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    url('../assets/bg/background.png') center center / cover no-repeat,
    linear-gradient(180deg, #7EC8F0 0%, #A6DCF5 45%, #C8E9F7 100%);
  image-rendering: pixelated;
}

/* Viñeta suave para que el HUD se lea sobre cualquier fondo */
#app-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(0deg,   rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 26%);
}

#game-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#game-canvas {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}