:root {
  --cell-size: 48px;        /* taille de base d'une cellule */
  --success: #4caf50;
  --danger: #f44336;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0a1a;
  font-family: 'Courier New', monospace;
  color: #ddd;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 10px;
}

#game-container {
  width: 100%;
  max-width: 520px;
  background: #12122a;
  border: 2px solid #444;
  border-radius: 8px;
  overflow: hidden;
}

/* ----- HUD ----- */
#hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a1a3a;
  padding: 8px 12px;
  font-size: 1em;
}

#btn-inventory {
  background: #3a3a6a;
  border: none;
  color: #e0e0ff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
#btn-inventory:hover { background: #5a5a8a; }
#btn-inventory:disabled { opacity: 0.4; cursor: not-allowed; }

/* ----- Panneau messages scrollable ----- */
#story-panel {
  background: #0d0d22;
  border-bottom: 1px solid #333;
  padding: 6px 10px;
  max-height: 110px;
  overflow-y: auto;
}
#message-list {
  list-style: none;
  font-size: 0.85em;
  line-height: 1.4;
}
#message-list::-webkit-scrollbar { width: 6px; }
#message-list::-webkit-scrollbar-track { background: #1a1a2e; }
#message-list::-webkit-scrollbar-thumb { background: #555; }
.game-msg { color: #bbb; }
.story-msg { color: #f0c040; font-weight: bold; }

/* ----- Grille ----- */
#grid-container {
  display: grid;
  gap: 2px;
  padding: 6px;
  background: #0f0f20;
  justify-content: center;
  /* Les colonnes sont définies par JS, on garde le style de base */
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  background: #1e1e3a;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

/* --- États et décors --- */
.cell.fog         { background: #2a2a46; }
.cell.player      { background: #5a4a00; color: #ffd700; }
.cell-wall        { background: #444466; }
.cell-exit        { background: #3a5a3a; color: #b0ffb0; }
.cell-potion      { background: #3a3a5a; color: #d0b0ff; }
.cell-trap        { background: #5a3a3a; color: #ff8080; }
.cell-statue      { background: #4a4a5a; color: #ddd; }
.cell-lever       { background: #5a5a3a; color: #ffff80; }
.cell-flag        { background: #5a3a00; color: #ffaa00; }

/* Couleurs des chiffres de menace */
.threat-1 { color: #a0ffa0; }
.threat-2 { color: #ffe0a0; }
.threat-3 { color: #ffa0a0; }
.threat-4 { color: #ff5050; }
.threat-5 { color: #ff2020; }
.threat-6 { color: #ff00ff; }
.threat-7 { color: #ff0080; }
.threat-8 { color: #8000ff; }

/* ----- Animation de révélation (brume qui se dissipe) ----- */
@keyframes brume-dissipe {
  0%   { background-color: rgba(80,80,120,0.9); box-shadow: inset 0 0 12px rgba(200,200,255,0.5); }
  100% { background-color: transparent; box-shadow: inset 0 0 0px transparent; }
}
.cell.just-revealed {
  animation: brume-dissipe 0.5s ease-out forwards;
}

/* ----- Mini-carte ----- */
#minimap-wrapper {
  text-align: center;
  padding: 6px;
}
#minimap-canvas {
  background: #1a1a2e;
  border: 1px solid #555;
}

/* ----- Contrôles & guide ----- */
#controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  background: #1a1a3a;
  padding: 10px;
  gap: 10px;
}
.arrow-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.middle-row {
  display: flex;
  gap: 12px;
}
.dir-btn {
  background: #3a3a6a;
  border: none;
  color: #fff;
  font-size: 1.5em;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.dir-btn:hover { background: #5a5a8a; }

/* Mini-guide (une seule instance !) */
#mini-guide {
  font-size: 0.8em;
  color: #ccc;
  background: #16213e;
  padding: 8px;
  border-radius: 6px;
  min-width: 160px;
}
#mini-guide p {
  margin: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
#mini-guide span { font-size: 1.2em; }

/* Bouton générique (fin de partie) */
.action-btn {
  background: #5a5a8a;
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 6px;
}
.action-btn:hover { background: #7a7aaa; }