:root {
  --fg: #fff;
  --cell: #3a332c;
  --cell-b: #695844;
  --accent: #c29b49;
  --accent-h: #b4842c;
  --gold: #ffdb58;
}

/* Reset bordures */
*, *::before, *::after { box-sizing: border-box; }

/* ===== FOND FIXE KIOSQUE ===== */
html, body { height: 100%; }

body {
  background-image: url("pyramide_1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  color: var(--fg);
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 100svh;
  margin: 0;
  padding: 0;

  touch-action: manipulation;
  -ms-touch-action: manipulation;
  overscroll-behavior: none;
  overflow: hidden;
}

/* ===== CONTENEUR ===== */
.container {
  position: relative;              /* permet de placer la barre du bas */
  width: 100%;
  max-width: 1280px;
  height: 100svh;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== TITRE & PANNEAUX ===== */
h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 3vw, 42px);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255,215,0,.5);
}

.panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
}

/* Barre du haut : score + temps centrés */
.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.info {
  display: flex;
  gap: 24px;
  font-weight: 600;
  font-size: clamp(16px, 1.8vw, 22px);
}

/* ===== GRILLE ===== */
#grid {
  flex: 1 1 auto;
  margin: 8px auto 80px;              /* marge en bas pour laisser la place aux boutons */
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: min(72svh, 86vw);
  height: min(72svh, 86vw);
}

/* ===== CASES ===== */
.cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  line-height: 1;

  background-color: var(--cell);
  border: 2px solid var(--cell-b);
  border-radius: 10px;
  cursor: pointer;

  font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
  font-size: clamp(20px, 3.5vw, 46px);
  color: #d4c9b2;
  user-select: none;

  transition: transform 0.05s, background-color 0.2s, filter 0.3s;
}

.cell:active { transform: scale(0.97); }

/* Case active : doré doux, moins flashy */
.cell.active {
  background: radial-gradient(circle at 50% 50%, #f6d98b 0%, #b88d3c 55%, #5a4a33 100%);
  box-shadow:
    0 0 12px rgba(255, 225, 140, 0.35),
    0 0 22px rgba(230, 190, 90, 0.25),
    inset 0 0 10px rgba(255, 230, 160, 0.4);
  border: 2px solid #d7b253;
  transform: scale(1.02);
  filter: brightness(1.05) saturate(1.05);
  transition: all 0.18s ease-out;
}

/* Piège rouge */
.cell.trap {
  background: radial-gradient(circle at 50% 50%, #7a1f1f 0%, #4d1010 60%, #330a0a 100%);
  box-shadow: 0 0 18px rgba(255,80,80,0.45) inset, 0 0 14px rgba(255,0,0,0.35);
  border-color: #b84a4a;
}

/* Bonus bleu */
.cell.bonus {
  background: radial-gradient(circle at 50% 50%, #2b7fd1 0%, #1e5fa0 60%, #143b66 100%);
  box-shadow: 0 0 18px rgba(80,160,255,0.45) inset, 0 0 14px rgba(0,150,255,0.35);
  border-color: #3a9ee9;
}

/* ===== Animations flottantes ===== */
.penalty-float,
.bonus-float {
  position: absolute;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: bold;
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
  z-index: 10;
}
.penalty-float { color: #ff4d4d; text-shadow: 0 0 8px rgba(255,0,0,0.6); }
.bonus-float   { color: #3faeff; text-shadow: 0 0 8px rgba(0,150,255,0.6); }

@keyframes floatUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-40px); opacity: 0; }
}

/* ===== BARRE DU BAS : boutons dans les coins ===== */
.bottombar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;                 /* collé en bas */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bottom-left,
.bottom-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Formulaire & boutons ===== */
.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(30,20,10,.55);
  border: 1px solid #5c4a35;
  padding: 6px 10px;
  border-radius: 10px;
}
.input-wrap input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: clamp(14px, 1.6vw, 18px);
  width: clamp(110px, 22vw, 190px);
}
.input-wrap.error { border-color: #ff6b6b; animation: shake .25s; }

@keyframes shake {
  25% { transform: translateX(2px); }
  50% { transform: translateX(-2px); }
  75% { transform: translateX(1px); }
}

button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: clamp(14px, 1.6vw, 18px);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  transition: background .2s, transform .1s;
}
button:hover  { background: var(--accent-h); }
button:active { transform: scale(0.98); }
button:disabled { filter: grayscale(.4); opacity: .7; cursor: not-allowed; }
.secondary { background: #444; }
.secondary:hover { background: #666; }

/* ===== Messages & classement ===== */
#message {
  text-align: center;
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--gold);
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(255,215,0,.4);
}

#leaderboard { margin-top: 10px; }
#leaderboard h3 { margin: 0 0 8px; text-align: center; color: var(--gold); }

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  font-size: clamp(14px, 1.4vw, 18px);
  overflow: hidden;
}
th, td { padding: 8px; text-align: left; }
th { background: rgba(30,20,10,.7); color: var(--gold); }
tr:nth-child(even) td { background: rgba(255,255,255,.03); }
tr:nth-child(odd) td  { background: rgba(255,255,255,.06); }

/* ===== Modales (Règles & Résultats) ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #c29b49;
  border-radius: 16px;
  padding: 18px 24px;
  max-width: min(92vw, 560px);
  max-height: 90svh;
  overflow: auto;
  color: #fff6dc;
  text-align: left;
  animation: fadeIn 0.3s ease-out;
  box-shadow: 0 0 25px rgba(0,0,0,0.6);
}

.modal-content h2 {
  text-align: center;
  color: var(--gold);
  margin-bottom: 10px;
  font-size: clamp(20px, 3vw, 28px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Résultats : tableau + surlignage */
#results-board table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(14px, 1.4vw, 18px);
}
#results-board th, #results-board td { padding: 8px; text-align: left; }
#results-board th { background: rgba(30,20,10,.7); color: var(--gold); }
#results-board tr:nth-child(even) td { background: rgba(255,255,255,.03); }
#results-board tr:nth-child(odd) td  { background: rgba(255,255,255,.06); }
tr.me td { background: rgba(255,215,0,.15)!important; color:#ffe29a; font-weight:700; }

/* ===== Clavier virtuel — bas droite ===== */
#keyboard-modal {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: auto;
  height: auto;
  background: transparent;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 60;
  pointer-events: none;
}

#keyboard-modal .keyboard {
  pointer-events: all;
  max-width: 480px;
  text-align: center;
}

#vk-display {
  width: 100%;
  margin: 4px 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #c29b49;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 18px;
  text-align: center;
}

.vk-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}
.vk-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.vk-key {
  min-width: 32px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #c29b49;
  background: rgba(40,30,20,0.9);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.vk-key:hover {
  background: rgba(70,50,30,1);
}
.vk-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* ===== Ajustement écrans ~1280x800 ===== */
@media (max-height: 820px) {
  #grid { width: min(70svh, 86vw); height: min(70svh, 86vw); }
}