/* ===== MODALES — correctif hidden ===== */
[hidden] { display: none !important; }

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(6px);
}
.modal[hidden] { display: none !important; }

.modal__card {
  width: 100%; max-width: 440px;
  background: rgba(26, 20, 16, 0.96);
  border: 1px solid rgba(224,185,111,0.22);
  border-radius: 18px;
  padding: 2.2rem 2rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  color: #faf6ee;
}
.modal__title { font-family: 'Fraunces', serif; color: #e0b96f; margin: 0 0 0.6rem; font-size: 1.6rem; }
.modal__text { color: rgba(250,246,238,0.88); margin: 0 0 1.4rem; line-height: 1.5; }
.promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.promo-btn {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.22);
  color: #faf6ee; padding: 0.8rem; border-radius: 11px; cursor: pointer;
  font: inherit; font-weight: 600; transition: all 0.2s;
}
.promo-btn:hover { border-color: #e0b96f; color: #e0b96f; transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(135deg, #e0b96f, #b8924f);
  color: #1a1206; border: 0; padding: 0.85rem 1.4rem; border-radius: 11px;
  font: inherit; font-weight: 700; cursor: pointer; transition: transform 0.15s;
}
.btn-primary:hover { transform: translateY(-2px); }

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 70; background: rgba(26, 20, 16, 0.96); border: 1px solid #e0b96f;
  color: #faf6ee; padding: 0.8rem 1.2rem; border-radius: 11px;
  opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   VUE APPLICATION — Plateau
   =================================================================== */
.app-view {
  min-height: 100vh;
  /* Fond GRIS LUXUEUX (demande user 20/07) : gris taupe chaud, assez clair pour que
     tous les textes ivoire/or ressortent nettement, assez profond pour rester premium.
     Les cartes et panneaux, plus sombres, se détachent dessus (effet écrin). */
  background: radial-gradient(circle at 30% 0%, #4a463e, #2f2c27 70%);
  color: #faf6ee;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  padding: 1rem clamp(1rem, 4vw, 2.4rem);
  border-bottom: 1px solid rgba(224,185,111,0.18);
}
.topbar__brand {
  background: none; border: 0; cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.2rem; color: #e0b96f;
}
.topbar__profile { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.topbar__name { font-weight: 600; }
.topbar__chip {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.2);
  border-radius: 100px; padding: 0.35rem 0.8rem; font-size: 0.85rem;
}
.topbar__chip b { color: #e0b96f; }
.topbar__logout {
  background: none; border: 1px solid rgba(224,185,111,0.3); color: #e0b96f;
  border-radius: 100px; padding: 0.4rem 1rem; cursor: pointer; font: inherit; font-size: 0.85rem;
  transition: background 0.2s, transform 0.2s;
}
.topbar__logout:hover { background: rgba(224,185,111,0.14); transform: translateY(-1px); }

.game {
  display: grid; grid-template-columns: 1fr 340px; gap: 1.6rem;
  max-width: 1400px; margin: 0 auto; padding: clamp(1rem, 4vw, 2.4rem);
  align-items: start;
}
.game__board-wrap {
  position: relative; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(224,185,111,0.18); border-radius: 18px; overflow: hidden;
}
.game__canvas {
  width: 100%; height: clamp(320px, 58vw, 760px); display: block;
}

/* ── Plein écran : le plateau occupe TOUT l'écran (zoom sans coupure). ──
   Deux chemins : l'API Fullscreen native, ou le repli « théâtre » (position
   fixe plein viewport) quand l'API est indisponible (iOS Safari…). */
.board-fs {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 6;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(224,185,111,0.35); border-radius: 100px;
  color: rgba(250,246,238,0.9); font: inherit; font-size: 0.8rem; padding: 0.4rem 0.9rem;
  cursor: pointer; transition: all 0.2s;
}
.board-fs:hover { border-color: #e0b96f; color: #e0b96f; }
.game__board-wrap:fullscreen,
.game__board-wrap.is-theater {
  display: flex; flex-direction: column;
  border-radius: 0; border: none;
  background: radial-gradient(circle at 30% 0%, #4a463e, #2f2c27 70%);
}
.game__board-wrap.is-theater { position: fixed; inset: 0; z-index: 80; }
.game__board-wrap:fullscreen .game__canvas,
.game__board-wrap.is-theater .game__canvas {
  flex: 1; height: auto; min-height: 0;
}
.game__status {
  margin: 0; padding: 0.9rem 1.2rem; text-align: center;
  font-family: 'Fraunces', serif; font-size: 1.05rem; color: #e0b96f;
  border-top: 1px solid rgba(224,185,111,0.18); background: rgba(0,0,0,0.3);
}

.game__panel {
  background: rgba(22, 20, 17, 0.55); border: 1px solid rgba(224,185,111,0.28);
  border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem;
}
.panel__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.panel__controls .btn { padding: 0.75rem; font-size: 0.9rem; }
.panel__controls .btn--ghost { color: #e0b96f; border-color: rgba(224,185,111,0.3); }
.panel__field {
  display: flex; flex-direction: column; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 600; color: rgba(250,246,238,0.88);
}
.panel__field select {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(224,185,111,0.22);
  border-radius: 11px; color: #faf6ee; padding: 0.6rem 0.7rem; font: inherit; cursor: pointer;
}
.panel__field select:focus { outline: none; border-color: #e0b96f; }

.panel__captures { display: flex; flex-direction: column; gap: 0.5rem; }
.cap { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.cap__label { color: rgba(250,246,238,0.8); }
.cap__glyphs { font-size: 1.2rem; color: #e0b96f; letter-spacing: 1px; min-height: 1.2em; }

.panel__moves-title { margin: 0 0 0.5rem; font-family: 'Fraunces', serif; font-size: 1.05rem; color: #e0b96f; }
.panel__moves-list {
  list-style: none; margin: 0; padding: 0.5rem; max-height: 160px; overflow-y: auto;
  background: rgba(0,0,0,0.25); border-radius: 11px; font-size: 0.88rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.panel__moves-list li { padding: 0.2rem 0.3rem; color: rgba(250,246,238,0.85); }

.shop__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.panel__record { margin: 0; text-align: center; font-size: 0.88rem; color: rgba(250,246,238,0.88); }
.panel__record b { color: #e0b96f; }

@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; }
}
/* ===================================================================
   CHROME DE L'APP — styles auparavant MANQUANTS (online.css /
   layout-guard.css référencés mais jamais créés) : onglets, overlay,
   boutons de partie, Historique, rejeu + nouveaux éléments (reprise,
   indice, nom, fin de partie enrichie, aperçus thèmes de la galerie).
   =================================================================== */

/* Onglets de l'application */
.app-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.app-tab {
  background: none; border: 1px solid transparent; cursor: pointer; font: inherit;
  color: rgba(250,246,238,0.82); font-weight: 600; font-size: 0.92rem;
  padding: 0.5rem 0.95rem; border-radius: 100px;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.app-tab:hover { color: #e0b96f; }
.app-tab.is-active {
  color: #1a1206; background: linear-gradient(135deg, #e0b96f, #b8924f);
  border-color: transparent;
}
.app-tab:focus-visible { outline: 2px solid #e0b96f; outline-offset: 2px; }

/* Overlay « Prêt à jouer ? » */
.board-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 6, 0.62); backdrop-filter: blur(4px);
}
.board-overlay__inner { text-align: center; padding: 1.5rem; }
.board-overlay__icon { font-size: 2.6rem; color: #e0b96f; display: block; margin-bottom: 0.4rem; }
.board-overlay__title { font-family: 'Fraunces', serif; font-size: 1.7rem; color: #faf6ee; margin: 0 0 0.4rem; }
.board-overlay__text { color: rgba(250,246,238,0.72); margin: 0 0 1.2rem; }

/* Boutons de partie */
.btn--full { width: 100%; }
.btn--pause {
  background: rgba(224,185,111,0.14); border: 1px solid rgba(224,185,111,0.4);
  color: #e0b96f; font-weight: 700; border-radius: 11px; padding: 0.75rem; cursor: pointer; font: inherit;
}
.btn--pause:hover { background: rgba(224,185,111,0.24); }
.btn--danger {
  background: rgba(156, 46, 46, 0.16); border: 1px solid rgba(220, 120, 110, 0.45);
  color: #e89a90; font-weight: 700; border-radius: 11px; padding: 0.75rem; cursor: pointer; font: inherit;
}
.btn--danger:hover { background: rgba(156, 46, 46, 0.3); }
.panel__game-controls { display: flex; flex-direction: column; gap: 0.6rem; }

/* Bandeau « Reprendre ma partie » */
.resume-banner {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.8rem 1.2rem; background: rgba(224,185,111,0.12);
  border-top: 1px solid rgba(224,185,111,0.25); color: #faf6ee; font-size: 0.92rem;
}

/* Édition du nom (topbar) */
.name-edit { display: inline-flex; gap: 0.4rem; align-items: center; }
.name-edit input {
  background: rgba(0,0,0,0.35); border: 1px solid rgba(224,185,111,0.35);
  border-radius: 100px; color: #faf6ee; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.85rem; width: 150px;
}
.name-edit input:focus { outline: none; border-color: #e0b96f; }

/* Fin de partie enrichie */
.end-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.end-actions .btn--ghost { color: #e0b96f; border: 1px solid rgba(224,185,111,0.3); background: none; border-radius: 11px; padding: 0.7rem; cursor: pointer; font: inherit; font-weight: 600; }
.end-actions .btn--ghost:hover { background: rgba(224,185,111,0.12); }

/* Note « mode entraînement » (En ligne / Tournois simulés) */
.demo-note {
  margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 11px;
  background: rgba(224,185,111,0.1); border: 1px dashed rgba(224,185,111,0.4);
  color: rgba(250,246,238,0.85); font-size: 0.88rem;
}

/* Historique des parties */
.history { display: flex; flex-direction: column; gap: 0.8rem; max-width: 760px; margin: 0 auto; }
.hgame {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18);
  border-radius: 14px; padding: 1rem 1.2rem;
}
.hgame__info { display: flex; flex-direction: column; gap: 0.25rem; }
.hgame__date { font-weight: 600; color: #faf6ee; }
.hgame__online { font-weight: 500; color: #7cc59a; font-size: 0.85rem; }
.end-stake { margin: 0.2rem 0 0.6rem; font-family: 'Fraunces', serif; font-size: 1.05rem; color: #e0b96f; text-align: center; }
/* ── Premium / Boutique ── */
.topbar__coins { cursor: pointer; font: inherit; }
.topbar__coins:hover { border-color: #e0b96f; color: #e0b96f; }
.premium-badge { margin-left: 0.3rem; font-size: 0.95rem; filter: drop-shadow(0 0 4px rgba(224,185,111,0.7)); }
.shop__bal { text-align: center; color: rgba(250,246,238,0.85); margin: 0 0 0.8rem; }
.shop__bal b { color: #e0b96f; }
.shop__status { text-align: center; color: #e0b96f; font-weight: 600; margin: 0 0 0.7rem; }
.shop__perks { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; color: rgba(250,246,238,0.85); font-size: 0.92rem; }
.shop__note { font-size: 0.8rem; color: rgba(250,246,238,0.6); text-align: center; margin: 0.8rem 0 0.4rem; line-height: 1.5; }
.shop__packs { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(224,185,111,0.18); }
.shop__h { margin: 0 0 0.6rem; font-size: 0.92rem; color: rgba(250,246,238,0.85); text-align: center; }
.shop__pack-row { display: flex; gap: 0.6rem; }
.shop__pack-row .btn { flex: 1; }
.shop__premium .btn--full { margin-top: 0.5rem; }
.hgame__meta { font-size: 0.85rem; color: rgba(250,246,238,0.82); }
.hgame__actions { display: flex; gap: 0.5rem; }
.hres { font-weight: 700; }
.hres.is-win { color: #8fce9a; }
.hres.is-loss { color: #e89a90; }
.hres.is-draw { color: #e0b96f; }
.history__empty { text-align: center; padding: 3rem 1rem; color: rgba(250,246,238,0.88); }
.history__empty-icon { font-size: 2.4rem; color: #e0b96f; display: block; margin-bottom: 0.6rem; }
.history__empty-sub { font-size: 0.9rem; color: rgba(250,246,238,0.72); }

/* Rejeu d'une partie */
.replay { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.4rem; max-width: 900px; margin: 0 auto; align-items: start; }
.replay__board-wrap { display: flex; flex-direction: column; gap: 0.8rem; }
.replay__controls { display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; }
.replay__count { min-width: 64px; text-align: center; font-weight: 700; color: #e0b96f; }
.replay__warn { margin: 0; font-size: 0.85rem; color: #e0b96f; text-align: center; }
.replay__moves { background: rgba(26,20,16,0.7); border: 1px solid rgba(224,185,111,0.18); border-radius: 14px; padding: 1rem; }
.replay__moves h4 { margin: 0 0 0.6rem; font-family: 'Fraunces', serif; color: #e0b96f; }
.replay__list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.replay__list li { padding: 0.2rem 0.4rem; border-radius: 7px; }
.replay__list li.is-cur { background: rgba(224,185,111,0.18); color: #e0b96f; }

/* Aperçus de thèmes de la galerie (échiquiers CSS — plus de photos hors sujet) */
.shot__board {
  width: 100%; height: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
}
.shot__piece { font-size: clamp(3.5rem, 8vw, 6.5rem); text-shadow: 0 8px 24px rgba(0,0,0,0.35); }

@media (max-width: 700px) {
  .replay { grid-template-columns: 1fr; }
  .app-tabs { order: 3; width: 100%; justify-content: center; }
}