/* ============================================================================
 * hub-arcade.css — Les BORNES et le panneau d'affichage du hub Jeux.
 *
 * L'univers lui-même (police, salle, enseigne, jetons de couleur) est dans
 * CSS/arcade.css, partagé avec les pages de jeu — à charger AVANT ce fichier.
 * Ici, uniquement ce qui n'existe que sur le hub.
 * ========================================================================== */

/* ---- 3. LES BORNES -------------------------------------------------------- */
/* liquid-glass.css impose `background: var(--glass-bg) !important` sur
   .tool-card : on ne combat pas la règle, on change ses VALEURS. */
body.lg-on[data-page="jeux"],
body.lg-on[data-page="jeux"]:not(.dark-mode) {
  --glass-bg:        linear-gradient(180deg, #1a2231 0%, #121926 58%, #0b1019 100%);
  --glass-bg-strong: #161d2a;
  --glass-border:    #2b3648;
  --radius-glass:    10px;         /* angles DURS : plus de verre arrondi */
  --glass-shadow:    0 18px 34px rgba(0, 0, 0, 0.55);
  --glow-accent:     0 0 30px rgba(55, 239, 186, 0.35);
}

body[data-page="jeux"] .tool-card {
  color: var(--on-dark-text);
  padding: 3.1rem 1.35rem 1.35rem;      /* place pour le fronton */
  gap: 0.75rem;
  border-width: 2px !important;
  border-radius: 12px 12px 5px 5px !important;
  backdrop-filter: none !important;      /* une borne n'est pas en verre */
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 0 3px var(--arc-bezel), 0 18px 34px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
body[data-page="jeux"] .tool-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 3px var(--arc-bezel),
              0 24px 40px rgba(0, 0, 0, 0.6),
              0 0 34px rgba(55, 239, 186, 0.28);
}

/* Le FRONTON : la pastille de genre devient le bandeau lumineux du haut. */
body[data-page="jeux"] .tool-card-badge {
  top: 3px; left: 3px; right: 3px; bottom: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.6rem; border-radius: 8px 8px 0 0;
  font-family: var(--arc-pixel); font-size: 0.55rem; letter-spacing: 0.08em;
  /* hub.css met les badges en capitales : ici la fonte est Press Start 2P, qui
   * n'a pas de capitales accentuées — « LUMIèRE », « DéCISIONS » retombaient
   * sur une autre fonte pour la seule lettre accentuée. Casse naturelle donc,
   * comme les titres de cartouche juste en dessous. */
  text-transform: none;
  color: #08251d;                        /* aplat vert vif → encre sombre */
  background: linear-gradient(180deg, #5ff5c9, #14c79a);
  box-shadow: 0 0 22px rgba(55, 239, 186, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

/* L'ÉCRAN : verre noir, balayage, halo. */
body[data-page="jeux"] .tool-card-icon {
  position: relative;
  width: 100%; height: 96px; border-radius: 4px;
  color: var(--on-dark-accent); font-size: 2rem;
  background: radial-gradient(ellipse at 50% 45%, #10202c 0%, var(--arc-screen) 78%);
  border: 2px solid #0a0f18;
  box-shadow: inset 0 0 26px rgba(0, 212, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  text-shadow: 0 0 14px rgba(55, 239, 186, 0.75);
  overflow: hidden;
}
body[data-page="jeux"] .tool-card-icon::after {   /* lignes de balayage */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
body[data-page="jeux"] .tool-card:hover .tool-card-icon {
  box-shadow: inset 0 0 34px rgba(0, 212, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body[data-page="jeux"] .tool-card h3 {
  font-family: var(--arc-pixel); font-size: 0.82rem; line-height: 1.5;
  color: #ffffff; text-shadow: 0 0 12px rgba(55, 239, 186, 0.35);
}
body[data-page="jeux"] .tool-card p { opacity: 0.8; font-size: 0.92rem; }

/* LE PANNEAU DE COMMANDE : bandeau bas, deux boutons, un bouton « JOUER »
   qui s'enfonce vraiment au clic. */
body[data-page="jeux"] .tool-card-cta {
  width: 100%; margin-top: 0.35rem; padding: 0.75rem 0.7rem 0.6rem;
  display: flex; align-items: center; gap: 0.6rem;
  border-top: 2px solid #0a0f18; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #1c2433, #10161f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05);
  color: var(--on-dark-accent);
}
/* Les deux boutons ronds du panneau (décor). */
body[data-page="jeux"] .tool-card-cta::before,
body[data-page="jeux"] .tool-card-cta::after {
  content: ""; width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 0 10px currentColor;
}
body[data-page="jeux"] .tool-card-cta::before { background: #ff4d6d; color: rgba(255, 77, 109, 0.5); }
body[data-page="jeux"] .tool-card-cta::after  { background: #ffd23f; color: rgba(255, 210, 63, 0.5); order: 3; }
body[data-page="jeux"] .tool-card-cta > span {
  flex: 1 1 auto; text-align: center;
  font-family: var(--arc-pixel); font-size: 0.58rem; letter-spacing: 0.06em;
  padding: 0.5rem 0.4rem; border-radius: 4px;
  color: #08251d; background: linear-gradient(180deg, #5ff5c9, #14c79a);
  box-shadow: 0 3px 0 #0a6b4f, 0 6px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
body[data-page="jeux"] .tool-card:active .tool-card-cta > span {
  transform: translateY(3px);
  box-shadow: 0 0 0 #0a6b4f, 0 2px 6px rgba(0, 0, 0, 0.45);
}
body[data-page="jeux"] .tool-card-cta i { display: none; }  /* la flèche n'a plus lieu d'être */

/* Borne dont le défi du jour est déjà relevé. */
body[data-page="jeux"] .tool-card.arc-done { border-color: rgba(55, 239, 186, 0.5) !important; }
.arc-flag {
  position: absolute; top: 3.3rem; left: 0.75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--arc-pixel); font-size: 0.55rem; letter-spacing: 0.04em;
  padding: 0.3rem 0.45rem; border-radius: 3px;
  color: var(--on-dark-accent);
  background: rgba(4, 8, 14, 0.9);
  border: 1px solid rgba(55, 239, 186, 0.45);
}

/* L'étoile « favori » est posée par js/favorites.js en bas à droite de la carte
   (.fav-star-card, style injecté à l'exécution — d'où la spécificité renforcée
   ici). Sur une borne, ce coin est le panneau de commande : elle chevauchait le
   bouton jaune. Elle devient un autocollant sur l'écran, en haut à droite ; le
   fanion « défi du jour fait » passe en face, à gauche, pour ne plus se
   disputer le même coin. */
body[data-page="jeux"] .tool-card .fav-star-card {
  top: 3.4rem; right: 0.55rem; bottom: auto; left: auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- 4. LE PANNEAU D'AFFICHAGE (défi du jour) ----------------------------- */
.arc-daily {
  position: relative;
  max-width: 1200px; margin: 0 auto 2.8rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.8rem;
  padding: 1.4rem 1.6rem;
  border: 2px solid #2b3648; border-radius: 8px;
  background: linear-gradient(180deg, #121926, #080d15);
  box-shadow: inset 0 0 0 3px var(--arc-bezel), 0 18px 44px rgba(0, 0, 0, 0.5);
  color: var(--on-dark-text);
}
.arc-daily-main { flex: 1 1 320px; min-width: 0; }
.arc-daily-title {
  display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.6rem;
  font-family: var(--arc-pixel); font-size: 0.72rem; letter-spacing: 0.06em;
  color: #ffffff; text-shadow: 0 0 14px rgba(55, 239, 186, 0.6);
}
.arc-daily-title i { color: var(--on-dark-accent); text-shadow: none; }
.arc-daily-txt { margin: 0; font-size: 0.94rem; opacity: 0.88; line-height: 1.55; }
.arc-daily-txt b { color: var(--on-dark-accent); font-weight: 700; }

/* Un jeton par jeu — inséré dans la fente quand le défi est relevé. Chaque
   jeton est un lien vers son jeu ; sa légende le dit, son titre donne le nom. */
.arc-pips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.95rem; }
.arc-pips-lbl {
  font-family: var(--arc-pixel); font-size: 0.5rem; letter-spacing: 0.04em;
  color: var(--on-dark-text); opacity: 0.7; margin-right: 0.3rem;
}
.arc-pip {
  width: 14px; height: 14px; border-radius: 50%;
  background: #0a1119; border: 2px solid #2b3648;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.arc-pip:hover, .arc-pip:focus-visible {
  transform: scale(1.35); border-color: #5ff5c9; outline: none;
}
.arc-pip.on {
  background: radial-gradient(circle at 35% 30%, #7dffd8, #14c79a);
  border-color: #5ff5c9; box-shadow: 0 0 12px rgba(55, 239, 186, 0.8);
}

.arc-daily-cta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.4rem; border-radius: 5px;
  font-family: var(--arc-pixel); font-size: 0.62rem; letter-spacing: 0.05em; line-height: 1.5;
  text-decoration: none;
  color: #08251d;
  background: linear-gradient(180deg, #5ff5c9, #14c79a);
  box-shadow: 0 4px 0 #0a6b4f, 0 8px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.arc-daily-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #0a6b4f, 0 10px 22px rgba(0, 0, 0, 0.5); }
.arc-daily-cta:active { transform: translateY(4px); box-shadow: 0 0 0 #0a6b4f, 0 3px 8px rgba(0, 0, 0, 0.45); }
.arc-daily-cta i { display: none; }

@media (max-width: 620px) {
  .arc-daily { padding: 1.15rem 1rem; }
  .arc-daily-cta { width: 100%; justify-content: center; }
}

/* ---- 5. Pieds de section -------------------------------------------------- */
body[data-page="jeux"] .jeux-note,
body[data-page="jeux"] .tools-crosslink { color: var(--on-dark-text); opacity: 0.85; }
body[data-page="jeux"] .jeux-note i { color: var(--on-dark-accent); }
body[data-page="jeux"] .tools-crosslink a { color: var(--on-dark-accent); }

/* ---- 6. L'enseigne et les allées ------------------------------------------
 * Dix-huit cartouches en une seule grille, c'est un mur : on ne sait ni combien
 * il y en a ni par où entrer. La salle se lit donc comme une vraie salle —
 * une enseigne à l'entrée qui annonce le nombre, puis des ALLÉES thématiques,
 * chacune avec son panneau et son propre compte.
 *
 * Cette scène est SOMBRE DANS LES DEUX THÈMES : uniquement --on-dark-* ici,
 * jamais --accent-text (qui est vert foncé en thème clair, donc invisible). */
.arc-marquee {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin: 0 auto 2.4rem; padding: 0;
}
.arc-chip {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(55, 239, 186, 0.35);
  border-radius: 4px;                      /* arêtes franches : c'est une borne */
  background: rgba(10, 16, 26, 0.72);
  font-family: var(--arc-pixel);
  font-size: 0.56rem; letter-spacing: 0.05em; line-height: 1.9;
  color: var(--on-dark-text);
  /* PAS de text-transform : Press Start 2P n'a pas de capitales accentuées, et
   * « ALLÉES » retombait alors sur une autre fonte pour le seul É — un « é »
   * minuscule au milieu d'un mot en capitales, qui se lit comme un bug. */
}
.arc-chip b {
  font-size: 0.84rem; font-weight: 400;
  color: var(--on-dark-accent);
  text-shadow: 0 0 10px rgba(55, 239, 186, 0.55);
}
.arc-chip-free { border-color: rgba(255, 255, 255, 0.18); opacity: 0.8; }

.arc-aisle { margin: 0 0 4.2rem; }
.arc-aisle:last-of-type { margin-bottom: 0; }
.arc-aisle-title {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 0.35rem;
  font-family: var(--arc-pixel);
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.8;
  color: var(--on-dark-text);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(55, 239, 186, 0.22);   /* le rail de l'allée */
}
.arc-aisle-title i { color: var(--on-dark-accent); font-size: 1rem; }
/* Le compte de l'allée : une pastille de score, pas une parenthèse. */
.arc-aisle-n {
  margin-left: auto; flex: 0 0 auto;
  padding: 0.28rem 0.5rem; border-radius: 3px;
  background: rgba(55, 239, 186, 0.14);
  border: 1px solid rgba(55, 239, 186, 0.32);
  font-size: 0.62rem; color: var(--on-dark-accent);
}
.arc-aisle-sub {
  margin: 0.8rem 0 1.5rem;
  font-size: 0.92rem; color: var(--on-dark-text); opacity: 0.7;
}
.arc-aisle .tools-grid { margin-top: 0; }

@media (max-width: 620px) {
  .arc-aisle-title { font-size: 0.6rem; gap: 0.5rem; }
  .arc-aisle-n { font-size: 0.55rem; }
  .arc-marquee { gap: 0.45rem; }
}