* {
  box-sizing: border-box;
}

:root {
  --void: #090811;
  --panel: rgba(12, 9, 22, .90);
  --panel-2: rgba(24, 15, 37, .88);
  --purple: #5b2b78;
  --purple-bright: #9c5ac5;
  --gold: #d8a83e;
  --gold-light: #ffe18a;
  --banana: #f5cf4c;
  --cream: #f5ead5;
  --muted: #b8aabf;
  --red: #c23c50;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #05050a;
  color: var(--cream);
  font-family: "Montserrat", sans-serif;
}

body {
  min-height: 100vh;
  overflow: hidden;      /* le cadre est mis à l'échelle : jamais de scroll/débordement */
}

/* ---------------------------------------------------------------------
   MISE À L'ÉCHELLE RESPONSIVE (voir js/scale.js)
   .game-stage = scène plein écran qui centre le cadre de jeu.
   Voir le commentaire complet sur .game-shell ci-dessous.
   --------------------------------------------------------------------- */
.game-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05050a;   /* couleur des bandes noires si l'écran n'est pas en 16:9 */
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.game-shell {
  /* Résolution de référence fixe (= 1920x1080, le format de ton image de fond).
     Tout le jeu est positionné pour cette taille exacte ; js/scale.js calcule
     --game-scale pour que ce cadre tienne dans n'importe quel écran, sans
     jamais changer la disposition interne (comme un jeu vidéo). */
  --game-scale: 1;         /* valeur par défaut ; recalculée en JS au chargement */
  width: 1600px;
  height: 900px;
  flex: none;               /* ne doit pas être compressé par le flex de .game-stage */
  transform: scale(var(--game-scale));
  position: relative;
  overflow: hidden;
  
  border: 1px solid rgba(216,168,62,.55);
  box-shadow:
    0 0 0 1px rgba(216,168,62,.10) inset,
    0 25px 100px rgba(0,0,0,.75);
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(216,168,62,.18);
  z-index: 20;
}

/* ---------- TOP HUD ---------- */

.top-hud {
  height: 128px;            /* header abaissé de 14px + carte joueur (92px) */
  position: absolute;
  inset: 0 0 auto;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 22px 12px;  /* 16px en haut : c'est ce qui descend la carte et les ressources */
  background: linear-gradient(180deg, rgba(5,5,10,.94), rgba(9,7,16,.70), transparent);
}

/* Le cadre profil du joueur (avatar, nom, XP, rang) est maintenant dans css/player-card.css */

/* Les ressources (Points Bananes, Tickets, Banane Dorée) et les boutons d'action sont maintenant dans css/resources.css */

/* ---------- SYSTEME DE VUES (SPA) ---------- */

.game-views {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.game-view {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.game-view.active {
  display: block;
}

.placeholder-view {
  background: radial-gradient(circle at center, #181126 0%, #08060d 100%);
  display: none;
  align-items: center;
  justify-content: center;
}

.placeholder-view.active {
  display: flex;
}

.placeholder-view h2 {
  font-family: "Cinzel", serif;
  color: var(--gold);
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 0 0 15px rgba(216, 168, 62, 0.4);
}

/* La barre de navigation du bas est maintenant dans css/nav-bar.css */