/*
 * game_shared.css — patterns communs au live room et à l'éditeur de room
 * blueprint (boutons HUD, panels overlay/latéraux, champs de formulaire).
 * Palette distincte du design system du site (flownaely.css) : ton
 * "jeu pixel-art" sombre, pas la palette café cosy.
 */

:root {
  --game-gold:        #c8a96e;
  --game-bg-panel:     #1a1a2e;
  --game-bg-input:     #0a0a1e;
  --game-bg-button:    #2a1a0a;
  --game-overlay:      rgba(10, 10, 30, 0.95);
  --game-danger-bg:    #7a1f1f;
  --game-danger-text:  #f5d6d6;
}

/* Bouton HUD (ancré à la fenêtre, toujours visible) — chaque bouton précise
   sa propre position (top/right/left/bottom) et son padding. */
.game-hud-button {
  position: fixed;
  z-index: 5;
  background: var(--game-bg-button);
  border: 2px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  cursor: pointer;
}

/* Panel overlay plein écran, contenu centré (settings, chest, mailbox,
   portail, project_flower...). Caché par défaut, .is-open l'affiche. */
.game-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--game-overlay);
  color: var(--game-gold);
  font-family: monospace;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}
.game-panel-overlay.is-open { display: flex; }

/* Panel latéral (chat, liste de meubles) — ancré à droite, prend toute la
   hauteur. Caché par défaut, .is-open l'affiche. */
.game-side-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 5;
  flex-direction: column;
  background: var(--game-bg-panel);
  border-left: 2px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
}
.game-side-panel.is-open { display: flex; }

/* En-tête standard d'un panel (titre + bouton fermer) — settings, chest,
   mailboxes, portail, project_flower, inventaire partagent tous ce gabarit. */
.game-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--game-gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.game-panel-title {
  font-size: 1.1rem;
}

.game-panel-close {
  background: none;
  border: none;
  color: var(--game-gold);
  font-family: monospace;
  font-size: 1rem;
  cursor: pointer;
}

.game-grid-tooltip {
  min-height: 1.2em;
  font-size: 0.75rem;
  color: #aaa;
  margin-top: 0.2rem;
}

.game-section-label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: #888;
}
/* Dans un header flex (déjà espacé par le layout), pas besoin de marge basse. */
.game-section-label.is-flush { margin: 0; }

.game-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--game-bg-input);
  color: var(--game-gold);
  border: 1px solid var(--game-gold);
  font-family: monospace;
  padding: 0.3rem;
}

.game-button-danger {
  background: var(--game-danger-bg);
  color: var(--game-danger-text);
  border: 1px solid var(--game-danger-text);
  font-family: monospace;
  padding: 0.5rem;
  cursor: pointer;
}

/* Bouton pleine largeur dans une liste (meuble du sidebar, entrée de chat...). */
.game-list-item-button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: 1px solid var(--game-gold);
  color: var(--game-gold);
  font-family: monospace;
  padding: 0.4rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
}