/* ==========================================================================
   EnchèreMax — Pavé Tactile Mécanique & Affichage VFD
   ========================================================================== */

.keypad-console {
  background: var(--bg-panel);
  border: 2px solid var(--border-metallic);
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Console Header : Tally & Jauge de tension */
.console-top-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

@media (max-width: 768px) {
  .console-top-row {
    grid-template-columns: 1fr;
  }
}

/* Compteur Tubulaire VFD Phosphorescent */
.vfd-display-frame {
  background: #080c0e;
  border: 3px solid #1c262b;
  border-radius: 6px;
  padding: 0.8rem 1.4rem;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 255, 157, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vfd-display-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 255, 157, 0.04) 50%, rgba(0, 0, 0, 0.3) 50%);
  background-size: 100% 3px;
  pointer-events: none;
}

.vfd-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}

.vfd-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: #4e786b;
  text-transform: uppercase;
}

.player-status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  text-transform: uppercase;
}

.player-status.status-bidding {
  color: var(--vfd-green);
  background: rgba(0, 255, 157, 0.1);
}

.player-status.status-locked {
  color: #fff;
  background: #dc2626;
  animation: pulse-lock 1s infinite alternate;
}

@keyframes pulse-lock {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

.vfd-digits {
  font-family: var(--font-vfd);
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--vfd-green);
  text-shadow: 0 0 10px var(--vfd-green-glow), 0 0 25px rgba(0, 255, 157, 0.2);
  line-height: 1.1;
  text-align: right;
}

/* Jauge de Chronomètre & Tension */
.timer-gauge-container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 180px;
}

.timer-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.timer-track {
  height: 12px;
  background: var(--bg-panel-sunken);
  border: 1px solid var(--border-metallic);
  border-radius: 6px;
  overflow: hidden;
  padding: 2px;
}

.timer-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  border-radius: 4px;
  transition: width 1s linear, background-color 300ms ease;
}

.timer-bar.urgent {
  background: #ef4444 !important;
  animation: timer-flash 500ms infinite alternate;
}

@keyframes timer-flash {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

/* Grille des Boutons Mécaniques */
.keypad-grid-layout {
  display: grid;
  grid-template-columns: 3fr 1fr 2fr;
  gap: 1.2rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  .keypad-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* Bloc d'Ajouts (Touches Principales) */
.keypad-add-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

/* Boutons Mécaniques Tactiles */
.mech-btn {
  background: var(--btn-face);
  color: var(--text-main);
  border: 1px solid var(--border-metallic-light);
  border-bottom: 4px solid var(--btn-edge);
  border-radius: 6px;
  padding: 0.8rem 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-shadow: var(--btn-shadow);
  transition: transform var(--trans-fast), border-bottom var(--trans-fast), box-shadow var(--trans-fast), background-color var(--trans-fast);
  position: relative;
  outline: none;
}

.mech-btn:hover {
  background: var(--btn-face-hover);
  border-color: #5a6675;
}

.mech-btn:active,
.mech-btn.active-depressed {
  transform: translateY(3px);
  border-bottom: 1px solid var(--btn-edge);
  box-shadow: var(--btn-depressed-shadow);
  background: #24292f;
}

.mech-btn .btn-val {
  font-family: var(--font-vfd);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mech-btn .btn-hint {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  background: rgba(0,0,0,0.3);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
}

/* Couleurs spécifiques des touches */
.btn-tier-micro .btn-val { color: #38bdf8; }
.btn-tier-standard .btn-val { color: #34d399; }
.btn-tier-heavy .btn-val { color: #fbbf24; }

/* Bloc de Retrait / Reset */
.keypad-sub-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.mech-btn-sub {
  background: #232830;
  border-color: #3b434e;
  padding: 0.5rem 0.4rem;
}

.mech-btn-sub .btn-val {
  font-size: 0.95rem;
  color: #f87171;
}

.mech-btn-reset {
  background: #3a1c22;
  border-color: #7f1d1d;
  border-bottom-color: #450a0a;
}

.mech-btn-reset:hover {
  background: #4c222b;
}

.mech-btn-reset .btn-val {
  color: #fca5a5;
  font-size: 0.85rem;
}

/* Bouton d'Arrêt Géant / Slam Switch */
.slam-button-wrapper {
  display: flex;
  flex-direction: column;
}

.btn-slam-lock {
  flex: 1;
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  color: #fff;
  border: 2px solid #ef4444;
  border-bottom: 6px solid #450a0a;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 6px 0 #450a0a, 0 12px 20px rgba(220, 38, 38, 0.35);
  transition: transform var(--trans-fast), border-bottom var(--trans-fast), box-shadow var(--trans-fast);
  text-align: center;
}

.btn-slam-lock:hover {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 6px 0 #450a0a, 0 14px 24px rgba(239, 68, 68, 0.45);
}

.btn-slam-lock:active,
.btn-slam-lock.active-depressed {
  transform: translateY(5px);
  border-bottom: 1px solid #450a0a;
  box-shadow: 0 1px 0 #450a0a, 0 4px 8px rgba(0,0,0,0.5);
}

.btn-slam-lock.locked-in {
  background: #374151;
  border-color: #4b5563;
  border-bottom-color: #1f2937;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.8;
  transform: translateY(4px);
}

.slam-title {
  font-family: var(--font-vfd);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.slam-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

.slam-hint {
  font-size: 0.65rem;
  background: rgba(0,0,0,0.3);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-top: 0.2rem;
}

/* ==========================================================================
   Pavé Tactile — Version Mobile (ancré en bas d'écran, à portée du pouce)
   ========================================================================== */
@media (max-width: 700px) {
  /* Élément flex normal (ni fixed ni sticky) toujours ancré en bas de
     l'écran de jeu : seule .game-scroll-region défile au-dessus de lui,
     donc il ne peut jamais se superposer au contenu ni le masquer.
     Dimensions resserrées au maximum pour laisser le plus de place possible
     au dossier de l'objet et aux adversaires juste au-dessus. */
  .keypad-console {
    flex: 0 0 auto;
    z-index: 40;
    border-radius: 14px 14px 0 0;
    padding: 0.55rem calc(0.6rem + var(--safe-right)) calc(0.55rem + var(--safe-bottom)) calc(0.6rem + var(--safe-left));
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.55);
    gap: 0.4rem;
  }

  /* Tally & chrono restent côte à côte pour garder le panneau compact */
  .console-top-row {
    grid-template-columns: 1fr 88px;
    gap: 0.4rem;
    align-items: stretch;
  }

  .vfd-display-frame { padding: 0.3rem 0.6rem; }
  .vfd-label { font-size: 0.58rem; letter-spacing: 1px; }
  .player-status { font-size: 0.58rem; }
  .vfd-digits { font-size: 1.4rem; letter-spacing: 1px; }

  .timer-gauge-container { min-width: 0; gap: 0.2rem; justify-content: center; }
  .timer-label-row { font-size: 0.6rem; }
  .timer-label-row span:first-child { display: none; } /* "TEMPS RESTANT" — le chiffre suffit sur mobile */

  .keypad-grid-layout { gap: 0.35rem; }

  .keypad-add-group { gap: 0.3rem; }

  .mech-btn {
    padding: 0.4rem 0.3rem;
    min-height: 42px;
    border-radius: 7px;
  }

  .mech-btn .btn-val { font-size: 0.92rem; }

  /* Les indices de touches clavier n'ont pas de sens sans clavier physique */
  .mech-btn .btn-hint,
  .slam-hint {
    display: none;
  }

  .keypad-sub-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
  }

  .mech-btn-sub { padding: 0.35rem 0.3rem; min-height: 38px; }
  .mech-btn-sub .btn-val { font-size: 0.76rem; }
  .mech-btn-reset .btn-val { font-size: 0.64rem; }

  .btn-slam-lock {
    padding: 0.55rem;
    min-height: 48px;
    border-radius: 9px;
  }

  .slam-title { font-size: 1rem; }
  .slam-subtitle { font-size: 0.66rem; }
}

@media (max-width: 360px) {
  .vfd-digits { font-size: 1.2rem; }
  .mech-btn .btn-val { font-size: 0.82rem; }
}