@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --bg: #140b07;
  --bg-glow: #2a1710;

  --wood: #4a2c17;
  --wood-light: #6b4023;
  --wood-dark: #2a1810;

  --outline: #1a0f07;

  --panel: linear-gradient(
    180deg,
    #5a3620,
    #3a2213 55%,
    #2a1810
  );

  --text: #ffe9c7;
  --muted: #c9a883;

  --amber: #ffb833;
  --amber-deep: #ff8c1a;
  --gold: #ffd76a;

  --green: #8bc34a;
  --green-deep: #4e7a1f;

  --red: #ff6a4d;
  --red-deep: #7a2a1c;

  --pixel: "Press Start 2P", monospace;
  --text-font: "VT323", ui-monospace, monospace;

  font-family: var(--text-font);
}


/* =========================================================
   RESET / BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;

  color: var(--text);
  font-size: 18px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, .12) 0 2px,
      transparent 2px 4px
    ),
    radial-gradient(
      circle at 20% 0%,
      var(--bg-glow) 0,
      transparent 45%
    ),
    radial-gradient(
      circle at 80% 10%,
      #241206 0,
      transparent 40%
    ),
    var(--bg);
}

button,
input,
select,
textarea {
  font-family: var(--text-font);
  font-size: 17px;
}


/* =========================================================
   BOUTONS
   ========================================================= */

button,
.file-btn {
  border: 3px solid var(--outline);
  background: var(--panel);
  color: var(--amber);

  border-radius: 8px;
  padding: 10px 15px;

  cursor: pointer;

  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: .5px;

  text-shadow: 2px 2px 0 #000;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .12),
    inset 0 -3px 0 rgba(0, 0, 0, .35),
    0 3px 0 var(--outline);

  transition:
    transform .08s ease,
    border-color .12s ease,
    color .12s ease,
    background .12s ease;
}

button:hover,
.file-btn:hover {
  color: var(--gold);
  border-color: var(--amber-deep);
}

button:active {
  transform: translateY(2px);

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .12),
    0 1px 0 var(--outline);
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

button.primary {
  background: linear-gradient(
    180deg,
    #ffd76a,
    #ffb833 55%,
    #d97e12
  );

  color: #3a1e07;
  border-color: var(--outline);

  text-shadow:
    1px 1px 0 rgba(255, 255, 255, .35);
}

button.primary:hover {
  color: #1f1004;
}

button.success {
  border-color: var(--green-deep);
  background: linear-gradient(
    180deg,
    #7fae3c,
    #4e7a1f
  );

  color: #eafcd0;
}

button.danger,
.dropdown-item.danger {
  border-color: var(--red-deep);
  color: #ffcabb;
}

button.danger {
  background: linear-gradient(
    180deg,
    #8c3a26,
    #5a2015
  );
}

button.ghost,
.file-btn {
  background: transparent;
  box-shadow: none;
}

button.ghost:hover {
  background: rgba(255, 184, 51, .08);
}


/* =========================================================
   INPUTS / SELECTS / TEXTAREA
   ========================================================= */

input,
select,
textarea {
  width: 100%;

  background: #1c110a;
  color: var(--text);

  border: 2px solid var(--outline);
  border-radius: 6px;

  padding: 9px 10px;

  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--amber);
}

input::placeholder,
textarea::placeholder {
  color: #8f7357;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
  padding: 18px clamp(16px, 4vw, 52px);

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  border-bottom: 4px solid var(--outline);

  background:
    linear-gradient(
      180deg,
      #3a2213,
      #241407
    );

  position: sticky;
  top: 0;
  z-index: 10;
}

h1,
h2,
h3,
h4 {
  font-family: var(--pixel);
  line-height: 1.5;
}

h1 {
  margin: 4px 0 0;

  font-size: 20px;
  color: var(--amber);

  text-shadow:
    2px 2px 0 #000,
    0 0 14px rgba(255, 184, 51, .35);
}

.eyebrow {
  color: var(--amber-deep);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;

  font-family: var(--pixel);
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.file-btn input {
  display: none;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {
  display: flex;
  gap: 8px;

  padding: 14px clamp(16px, 4vw, 52px);

  overflow-x: auto;

  border-bottom: 3px solid var(--outline);

  background: rgba(0, 0, 0, .18);
}

.nav button {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Onglet actif */
.nav button.active {
  background: linear-gradient(
    180deg,
    #ffd76a,
    #ff8c1a
  );

  color: #fff4d6;

  border-color: var(--outline);

  text-shadow:
    2px 2px 0 #000;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .22),
    inset 0 -3px 0 rgba(0, 0, 0, .25),
    0 3px 0 var(--outline);
}

.nav button.active:hover {
  color: #fff4d6;
}


/* =========================================================
   CONTENU PRINCIPAL
   ========================================================= */

main {
  max-width: 1650px;

  margin: 0 auto;

  padding:
    28px
    clamp(16px, 4vw, 52px)
    60px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  display: flex;

  justify-content: space-between;
  align-items: flex-end;

  gap: 20px;

  margin-bottom: 22px;
}

.hero h2 {
  margin: 0 0 9px;

  font-size: 18px;
  color: var(--gold);

  text-shadow: 2px 2px 0 #000;
}

.hero p {
  color: var(--muted);

  margin: 0;

  font-size: 17px;
}


/* =========================================================
   GRILLES GÉNÉRALES
   ========================================================= */

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
}

.grid-3 {
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
}

.grid-6 {
  grid-template-columns: repeat(
    3,
    minmax(0, 1fr)
  );
}


/* =========================================================
   CARTES / PANNEAUX
   ========================================================= */

.card {
  background: var(--panel);

  border: 3px solid var(--outline);
  border-radius: 12px;

  padding: 18px;

  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .08),
    0 8px 0 rgba(0, 0, 0, .35),
    0 14px 30px rgba(0, 0, 0, .4);
}

.card h3 {
  margin: 0 0 12px;

  font-size: 14px;
  color: var(--amber);

  text-shadow: 2px 2px 0 #000;
}

.card p {
  color: var(--muted);
}

.team {
  border-left: 5px solid var(--amber-deep);
}

.team-title {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 10px;
}

.small {
  font-size: 14px;
  color: var(--muted);
}


/* =========================================================
   FORMULAIRES
   ========================================================= */

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;
}

.form-row {
  margin-bottom: 10px;
}

label {
  display: block;

  font-size: 13px;
  color: var(--muted);

  margin-bottom: 5px;
}

/*
 * .row est utilisé ailleurs dans l'application.
 * On garde son comportement général simple.
 */
.row {
  display: flex;

  gap: 8px;

  align-items: center;
}


/* =========================================================
   TABLEAUX (MODIFIÉ POUR 100% SANS SCROLLBAR)
   ========================================================= */

.table-wrap {
  width: 100%;
  overflow-x: visible;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
th,
td {
  text-align: left;

  padding: 8px 2px;

  border-bottom:
    2px solid rgba(0, 0, 0, .35);

  vertical-align: middle;
}

th {
  color: var(--amber-deep);

  font-size: 10px;

  font-family: var(--pixel);

  white-space: nowrap;
}

.rank {
  font-weight: 900;
  font-size: 18px;
}

.qual {
  color: var(--green);

  text-shadow:
    1px 1px 0 #000;
}

.elim {
  color: #a08867;
}

/* Répartition des 7 colonnes pour remplir parfaitement la carte */
th:nth-child(1), td:nth-child(1) { width: 8%; text-align: center; }  /* Rang */
th:nth-child(2), td:nth-child(2) { width: 18%; }                   /* Survivant */
th:nth-child(3), td:nth-child(3) { width: 15%; }                   /* Équipe */
th:nth-child(4), td:nth-child(4) { width: 15%; text-align: center; } /* Temps */
th:nth-child(5), td:nth-child(5) { width: 18%; text-align: center; } /* Palettes */
th:nth-child(6), td:nth-child(6) { width: 15%; text-align: center; } /* Statut */
th:nth-child(7), td:nth-child(7) { width: 11%; text-align: center; } /* Joker */

/* =========================================================
   CHAMPS TEMPS DANS LES TABLEAUX (ADAPTÉS AU TABLE-LAYOUT FIXED)
   ========================================================= */

/* Dans les tableaux de poules, on adapte la taille à 100% de la cellule */
.table-wrap .time-input,
.table-wrap input[data-pallet] {
  width: 100% !important;
  min-width: 0 !important;

  height: 40px;

  padding: 6px 4px;

  font-size: 17px;

  text-align: center;

  flex: 1 1 auto;
}

/* Conservation du comportement hors-tableau pour .time-input */
.time-input {
  width: 170px;
  min-width: 170px;

  height: 46px;

  padding: 8px 12px;

  font-size: 20px;

  text-align: center;

  flex: 0 0 170px;
}

/* Conservation du comportement hors-tableau pour input[data-pallet] */
input[data-pallet] {
  width: 140px;
  min-width: 140px;

  height: 46px;

  font-size: 18px;

  text-align: center;
}


/* =========================================================
   BADGES / PASTILLES
   ========================================================= */

.badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 10px;
  font-family: var(--pixel);

  background: var(--wood-dark);
  color: var(--gold);

  border: 2px solid var(--outline);
}

.badge.green {
  background: #1e3a0f;
  color: #c3ea8f;
  border-color: var(--green-deep);
}

.badge.gold {
  background: #4a340a;
  color: var(--gold);
  border-color: var(--amber-deep);
}

.badge.red {
  background: #3a170f;
  color: #ffb6a0;
  border-color: var(--red-deep);
}

.killer {
  color: var(--amber);
  font-weight: 700;
}

.survivor {
  color: var(--text);
}


/* =========================================================
   MATCHS - STRUCTURE PRINCIPALE
   ========================================================= */

/*
 * Les 3 tueurs sont maintenant de vraies colonnes
 * de taille suffisante.
 */
.match-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(280px, 1fr));

  gap: 16px;

  width: 100%;
}


/*
 * Carte individuelle d'un tueur.
 */
.match-box {
  width: 100%;
  min-width: 0;

  border: 2px solid var(--outline);
  border-radius: 10px;

  padding: 16px;

  background: var(--wood-dark);

  display: flex;
  flex-direction: column;
}


/*
 * Titre "Tueur 1", "Tueur 2", etc.
 */
.match-box h4 {
  margin: 0 0 10px;

  font-size: 12px;
  color: var(--amber);
}


/*
 * Nom du tueur.
 */
.match-box .killer {
  min-height: 24px;
}


/* =========================================================
   CHAMPS TEMPS / PALETTES DES MATCHS
   ========================================================= */

/*
 * IMPORTANT :
 * On ne laisse PAS le .row général décider de la largeur
 * des champs Temps / Palettes dans une carte de match.
 */
.match-box .row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(140px, 180px);

  gap: 12px;

  width: 100%;

  align-items: end;
}


/*
 * Tous les champs d'un match prennent leur place
 * correctement dans la carte.
 */
.match-box input.time-input,
.match-box input.multi-time,
.match-box input.multi-pal,
.match-box input.pallet-input,
.match-box input[data-pallet] {
  width: 100% !important;
  min-width: 0 !important;

  height: 48px;

  box-sizing: border-box;

  padding: 8px 10px;

  font-size: 19px;
}


/*
 * Le style inline présent dans app.js :
 *
 * style="max-width:100px"
 *
 * est volontairement annulé ici.
 */
.match-box input[data-pallet] {
  max-width: none !important;
}


/*
 * Champs Temps dans les demi-finales / finale.
 */
.match-box .multi-time {
  text-align: center;

  font-size: 21px;
}


/*
 * Champs Palettes dans les demi-finales / finale.
 */
.match-box .multi-pal {
  text-align: center;
}


/*
 * Les labels à l'intérieur des cartes ne doivent
 * jamais décaler les champs.
 */
.match-box .form-row {
  display: flex;

  flex-direction: column;

  gap: 6px;

  width: 100%;

  margin-bottom: 12px;
}

.match-box .form-row label {
  margin: 0;
}


/*
 * Quand on utilise le champ Palettes directement
 * après un label.
 */
.match-box > div:not(.small):not(.form-row) {
  width: 100%;
}


/*
 * Bouton d'enregistrement.
 */
.match-box .save-match {
  width: 100%;

  min-height: 46px;

  margin-top: 14px;
}


/* =========================================================
   CAS DU RESULT EDITOR
   ========================================================= */

/*
 * Le bloc qui contient Temps + Palettes dans les
 * qualifications doit également être propre.
 */
.match-box .row .time-input {
  flex: none;
}


/* =========================================================
   PILL / MESSAGES
   ========================================================= */

.pill {
  padding: 3px 7px;

  border-radius: 6px;

  background: var(--wood-dark);

  font-size: 11px;
}

.warning {
  border: 2px solid #8a5a12;

  background: #2e2008;
  color: #ffdf94;

  padding: 12px;

  border-radius: 10px;
}

.success-box {
  border: 2px solid var(--green-deep);

  background: #152b0a;
  color: #c3ea8f;

  padding: 12px;

  border-radius: 10px;
}

hr {
  border: 0;

  border-top:
    2px dashed var(--wood-light);

  margin: 18px 0;
}

.empty {
  text-align: center;

  padding: 50px 20px;

  color: var(--muted);
}


/* =========================================================
   TOAST / NOTIFICATIONS
   ========================================================= */

.toast {
  position: fixed;

  right: 20px;
  bottom: 20px;

  z-index: 99;

  padding: 12px 15px;

  border-radius: 99px;

  background: var(--panel);

  border: 3px solid var(--amber);

  color: var(--amber);

  font-family: var(--pixel);
  font-size: 11px;

  opacity: 0;

  transform: translateY(10px);

  pointer-events: none;

  transition: .2s;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .5);
}

.toast.show {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   MODAL CONNEXION
   ========================================================= */

.modal {
  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, .7);

  display: flex;

  align-items: center;
  justify-content: center;

  z-index: 50;
}

.modal[hidden] {
  display: none;
}

.modal-box {
  background: var(--panel);

  border: 3px solid var(--outline);
  border-radius: 12px;

  padding: 24px;

  width: min(360px, 90vw);

  box-shadow:
    0 14px 40px rgba(0, 0, 0, .6);
}

.modal-box h3 {
  color: var(--amber);
}

.modal-box input {
  width: 100%;
  margin-top: 10px;
}

.modal-actions {
  display: flex;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 16px;
}

.error {
  color: var(--red);

  min-height: 1.2em;

  margin-top: 8px;

  font-size: 14px;
}


/* =========================================================
   MENU OUTILS
   ========================================================= */

.dropdown {
  position: relative;

  display: inline-block;
}

.dropdown[hidden] {
  display: none;
}

.dropdown-panel {
  position: absolute;

  right: 0;
  top: 100%;

  margin-top: 6px;

  background: var(--panel);

  border: 3px solid var(--outline);
  border-radius: 8px;

  padding: 6px;

  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 240px;

  z-index: 40;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, .5);
}

.dropdown-panel[hidden] {
  display: none;
}

.dropdown-item {
  width: 100%;

  text-align: left;

  background: transparent;

  border: none;

  box-shadow: none;

  padding: 10px;

  border-radius: 6px;

  cursor: pointer;

  color: var(--text);

  font-family: var(--text-font);
  font-size: 16px;

  text-shadow: none;
}

.dropdown-item:hover {
  background: rgba(255, 184, 51, .12);

  color: var(--gold);
}

.dropdown-item.danger:hover {
  background: rgba(255, 106, 77, .15);
}


/* =========================================================
   SELECTEUR DE TUEURS
   ========================================================= */

.killer-picker {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 10px 0;
}

.killer-picker .chip {
  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--wood-dark);

  border: 2px solid var(--outline);

  border-radius: 20px;

  padding: 7px 13px;

  cursor: pointer;

  font-size: 15px;
}

.killer-picker .chip:has(input:checked) {
  border-color: var(--amber);

  background: #4a340a;

  color: var(--gold);
}


/* =========================================================
   GOOGLE SHEETS
   ========================================================= */

#sheetPaste {
  font-family: var(--text-font);

  font-size: 16px;

  background: #140b06;
}


/* =========================================================
   JOKER
   ========================================================= */

.use-joker {
  background:
    linear-gradient(
      180deg,
      #5a3a1a,
      #3a2410
    );

  border-color: var(--amber-deep);

  color: var(--gold);
}

.joker-used {
  color: var(--gold);

  margin-top: 4px;

  text-shadow:
    1px 1px 0 #000;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  margin-top: 40px;

  padding:
    14px
    clamp(16px, 4vw, 52px);

  border-top:
    1px solid var(--wood-light);

  text-align: center;

  opacity: .75;
}

.site-footer p {
  margin: 0;

  color: var(--muted);

  font-size: 13px;
}

.site-footer a {
  color: var(--muted);

  text-decoration: underline;

  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: var(--amber);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/*
 * Écrans moyens :
 * 3 tueurs -> 2 colonnes
 */
@media (max-width: 1100px) {

  .match-grid {
    grid-template-columns:
      repeat(2, minmax(280px, 1fr));
  }

}


/*
 * Tablettes / petits écrans
 */
@media (max-width: 950px) {

  .grid-2,
  .grid-3,
  .grid-6 {
    grid-template-columns: 1fr;
  }

  .match-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    align-items: flex-start;

    flex-direction: column;
  }

  .topbar {
    align-items: flex-start;

    flex-direction: column;
  }

}


/*
 * Téléphones
 */
@media (max-width: 700px) {

  main {
    padding-top: 20px;
  }

  .card {
    padding: 14px;
  }

  .match-box {
    padding: 14px;
  }

  /*
   * Temps + palettes passent l'un sous l'autre
   * sur petit écran.
   */
  .match-box .row {
    grid-template-columns: 1fr;
  }

  .match-box input.time-input,
  .match-box input.multi-time,
  .match-box input.multi-pal,
  .match-box input.pallet-input,
  .match-box input[data-pallet] {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    height: 48px;
  }

  .time-input {
    width: 100% !important;

    min-width: 0 !important;

    flex: 1 1 auto;
  }

  input[data-pallet] {
    width: 100% !important;

    min-width: 0 !important;
  }

}