/* =========================================================================
   Accueil (et /solo) — theme "Arcade Neon Nocturne", reserve aux pages
   body.home-arcade. Le reste du site (style.css) reprend la MEME palette
   menthe/rose/violet depuis le retrait des themes de test Neon/Cartoon, mais
   sans les elements decoratifs propres a ces deux pages (grille de fond,
   glows flous) : ici c'est la vitrine, ailleurs ce sont des ecrans de jeu
   denses ou ces effets distrairaient.

   Principe : au lieu d'inventer un jeu de classes paralleles pour chaque
   composant, on redefinit ICI les memes variables (--bg, --surface, --gold,
   --line, --font-display...) que style.css declare par theme. Comme .btn,
   .card, .podium, .lb-tab, .chip etc. lisent deja ces variables, tout ce que
   home.js/solo.js construit en JS (liste des parties en cours, podium du
   classement, tuiles de jeux) herite automatiquement de la palette arcade
   sans une ligne de JS en plus. Seules les pieces vraiment nouvelles (nav,
   hero, cartes Solo/Multi, bandeau de stats, grille /solo) recoivent des
   classes dediees, prefixees "arcade-" pour ne rien faire fuiter sur les
   autres pages. */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Inter:wght@400;500;600;700;800&display=swap');

body.home-arcade {
  --bg:        #0B0A14;
  --bg-2:      #0F0D1C;
  --surface:   #16132A;
  --surface-2: #1B1733;
  --line:      rgba(124, 92, 255, 0.22);
  --ink:       #F1EEFB;
  --muted:     #9C96BE;
  --gold:      #3DFFB8;   /* accent d'action principal -> mint neon */
  --gold-2:    #B9A6FF;   /* accent de texte -> violet clair, lisible sur l'encre nocturne */
  --pink:      #FF3D81;
  --pink-2:    #FF6FA3;
  --green:     #3DFFB8;
  --red:       #FF4C61;
  --blue:      #7C5CFF;
  --violet:    #7C5CFF;

  --on-action: #05271C;
  --shadow:    0 16px 40px rgba(124, 92, 255, .25), 0 6px 18px rgba(255, 61, 129, .14);
  --shadow-sm: 0 8px 22px rgba(124, 92, 255, .22);
  --btn-shadow:        0 10px 26px rgba(61, 255, 184, .35);
  --btn-shadow-active: 0 4px 12px rgba(61, 255, 184, .28);

  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Bungee', var(--font-body);
}

/* Le bouton clair/sombre flottant n'a pas de sens ici : cette page ne suit
   plus le theme choisi ailleurs sur le site, elle EST le nouveau theme. */
body.home-arcade .theme-toggle { display: none; }

/* ---- Fond : grille arcade + deux lueurs floues ---- */
body.home-arcade .arcade-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(124, 92, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 92, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black 20%, transparent 75%);
}
body.home-arcade .arcade-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
body.home-arcade .arcade-glow-1 { width: 500px; height: 500px; background: var(--pink); top: -150px; left: -100px; }
body.home-arcade .arcade-glow-2 { width: 460px; height: 460px; background: var(--violet); top: 100px; right: -150px; }

/* ---- Page ----
   Wrapper plein ecran : le nav (plein largeur, colle aux bords) et le shell
   (contenu centre, cf. plus bas) sont deux enfants distincts empiles en
   colonne, min-height:100vh pour que la page tienne tout le viewport
   (contrainte "aucun scroll") sans que le nav soit contraint par la
   max-width du contenu central. */
body.home-arcade .arcade-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Conteneur ----
   Contenu "focus" (hero + cartes Solo/Multi + stats) : reste
   centre horizontalement avec une largeur max raisonnable (~5xl) pour ne
   pas s'etirer sur grand ecran, meme si le nav au-dessus, lui, occupe toute
   la largeur. flex:1 + justify-content:center repartissent l'espace vertical
   restant sous le nav, comme avant. */
body.home-arcade .arcade-shell {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

/* ---- Nav ----
   Enfant direct de .arcade-page (pas de .arcade-shell) : prend toute la
   largeur de la fenetre, logo colle a gauche / liens colles a droite, avec
   juste un padding de confort plutot qu'une max-width centree. Scope au
   selecteur ">" pour ne pas toucher le nav de /solo, qui lui reste imbrique
   dans son .arcade-shell (page differente, non concernee par cette refonte). */
body.home-arcade .arcade-page > .arcade-nav {
  width: 100%;
  padding: 22px 32px;
}
body.home-arcade .arcade-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
body.home-arcade .arcade-logo {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .5px;
  color: var(--ink);
  text-decoration: none;
}
body.home-arcade .arcade-logo span { color: var(--pink); }

/* ---- Marque dans le nav (accueil uniquement) ----
   Reprend le titre + sous-titre qui etaient avant le hero centre : meme
   police d'affichage/gradient de texte et meme sous-titre attenue que
   .h1/.arcade-subtitle ailleurs sur le site, mais dimensionnes pour tenir
   dans la ligne de nav plutot qu'en grand titre de page. */
body.home-arcade .arcade-brand { display: flex; flex-direction: column; gap: 4px; }
body.home-arcade .arcade-brand-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1;
  letter-spacing: -.3px;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #D9D4F5 60%, var(--violet) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.home-arcade .arcade-brand-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 360px;
}

body.home-arcade .arcade-nav-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

body.home-arcade .arcade-nav-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
}
body.home-arcade .arcade-nav-link:hover {
  color: var(--ink);
  background: rgba(124, 92, 255, .1);
  border-color: var(--line);
}

body.home-arcade .arcade-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-left: 8px;
  text-decoration: none;
}
body.home-arcade .arcade-user-pill:hover { border-color: rgba(124, 92, 255, .4); }
/* Avatar par defaut (avant connexion) : rond degrade rose -> violet, comme la
   maquette. Une fois connecte, home.js remplace le contenu du bouton par un
   vrai avatar (avatarNode()) qui prend le pas naturellement. */
body.home-arcade .arcade-user-pill .arcade-avatar-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  flex: 0 0 auto;
}
body.home-arcade .arcade-user-pill .ava-img { width: 24px; height: 24px; }

/* ---- Hero ----
   Le titre est passe du centre (deux lignes) au haut-gauche (une seule
   ligne, nowrap) : ca liberait la moitie de la hauteur qu'il prenait avant,
   necessaire pour tenir toute la page sans scroll. */
body.home-arcade .arcade-hero { text-align: left; }

body.home-arcade .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(61, 255, 184, .08);
  border: 1px solid rgba(61, 255, 184, .25);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
}
body.home-arcade .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

body.home-arcade h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5.6vw, 72px);
  line-height: .92;
  letter-spacing: -1px;
  margin: 0;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #D9D4F5 60%, var(--violet) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 80px rgba(124, 92, 255, .35);
}

body.home-arcade .arcade-subtitle {
  font-size: 16px;
  margin-top: 12px;
  max-width: 480px;
  margin-left: 0;
  margin-right: auto;
  line-height: 1.45;
}

body.home-arcade .arcade-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 20px;
}
/* .btn / .btn.green / .btn.ghost viennent tels quels de style.css : ils
   lisent deja --gold/--green/--line/--ink/--on-action, redefinis plus haut. */
body.home-arcade .btn.lg { padding: 15px 26px; }

/* ---- Panneau "parties en cours" (contenu genere par home.js, classes
   .card/.stack/.hidden inchangees) : juste son cadrage sur cette page. */
body.home-arcade .arcade-lobby-panel { max-width: 560px; margin: 0 auto; text-align: left; }

/* ---- Cartes Solo / Multi ----
   Devenues le contenu principal de l'accueil depuis que le hero a migre
   dans le nav : flex:1 sur .arcade-modes + hauteur en vh sur les cartes
   pour qu'elles occupent tout l'espace vertical libre ("prend tout
   l'ecran"), plutot que la hauteur fixe et modeste d'avant. */
body.home-arcade .arcade-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

body.home-arcade .arcade-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 46vh;
  padding: 40px 40px 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.home-arcade .arcade-mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}
body.home-arcade .arcade-mode-card.solo::before { background: radial-gradient(circle at 30% 20%, rgba(255, 61, 129, .25), transparent 60%); }
body.home-arcade .arcade-mode-card.multi::before { background: radial-gradient(circle at 30% 20%, rgba(124, 92, 255, .3), transparent 60%); }
body.home-arcade .arcade-mode-card:hover,
body.home-arcade .arcade-mode-card:focus-visible { transform: translateY(-6px); }
body.home-arcade .arcade-mode-card:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
body.home-arcade .arcade-mode-card.solo:hover { border-color: rgba(255, 61, 129, .5); box-shadow: 0 20px 60px rgba(255, 61, 129, .15); }
body.home-arcade .arcade-mode-card.multi:hover { border-color: rgba(124, 92, 255, .5); box-shadow: 0 20px 60px rgba(124, 92, 255, .15); }
body.home-arcade .arcade-mode-card:hover::before { opacity: 1; }

body.home-arcade .arcade-mode-icon {
  position: relative;
  z-index: 1;
  width: min(100%, 340px);
  min-height: 180px;
  flex: 1 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 28px 0 24px;
}
body.home-arcade .arcade-mode-icon svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 18px rgba(124, 92, 255, .2));
}
body.home-arcade .arcade-mode-card.solo .arcade-mode-icon { color: var(--pink); }
body.home-arcade .arcade-mode-card.multi .arcade-mode-icon { color: var(--gold-2); }

body.home-arcade .arcade-mode-tag {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 12px;
}
body.home-arcade .arcade-mode-card.solo .arcade-mode-tag { color: var(--pink); }
body.home-arcade .arcade-mode-card.multi .arcade-mode-tag { color: var(--violet); }

body.home-arcade .arcade-mode-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  margin-bottom: 12px;
  color: var(--ink);
}
body.home-arcade .arcade-mode-desc { position: relative; z-index: 1; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 380px; }

body.home-arcade .arcade-mode-count {
  position: absolute; top: 24px; right: 24px; z-index: 1;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: rgba(0, 0, 0, .25);
  padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--line);
}
body.home-arcade .arcade-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }

/* ---- Bandeau de stats ---- */
body.home-arcade .arcade-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
body.home-arcade .arcade-stat { background: var(--surface); padding: 14px 16px; text-align: center; }
body.home-arcade .arcade-stat-num { font-family: var(--font-display); font-size: 22px; color: var(--green); }
body.home-arcade .arcade-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .5px; }

@media (max-width: 760px) {
  body.home-arcade .arcade-shell { justify-content: flex-start; }
  body.home-arcade .arcade-modes { grid-template-columns: 1fr; }
  body.home-arcade .arcade-stats { grid-template-columns: 1fr; }
  body.home-arcade .arcade-nav { flex-direction: column; gap: 16px; }
  body.home-arcade .arcade-page > .arcade-nav { padding: 18px 20px; }
  body.home-arcade .arcade-nav-links { flex-wrap: wrap; justify-content: center; }
  body.home-arcade .arcade-mode-card { padding: 26px 22px; min-height: 170px; }
  body.home-arcade h1 { white-space: normal; }
}

/* ---- Page /solo : grille de tuiles, meme langage visuel que les cartes
   Solo/Multi de l'accueil (icone dans une pastille, glow rose au survol). ---- */
body.home-arcade .solo-hero { margin-bottom: 4px; }
body.home-arcade .arcade-solo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  flex: 1;
  align-content: center;
}
body.home-arcade .solo-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.home-arcade .solo-tile::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at 30% 20%, rgba(255, 61, 129, .22), transparent 60%);
}
body.home-arcade .solo-tile:hover,
body.home-arcade .solo-tile:focus-within {
  transform: translateY(-6px);
  border-color: rgba(255, 61, 129, .5);
  box-shadow: 0 20px 60px rgba(255, 61, 129, .15);
}
body.home-arcade .solo-tile:hover::before { opacity: 1; }
body.home-arcade .solo-tile > * { position: relative; z-index: 1; }
body.home-arcade .solo-tile .ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255, 61, 129, .12); color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px;
}
body.home-arcade .solo-tile h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 6px; color: var(--ink); }
body.home-arcade .solo-tile p { font-size: .82rem; color: var(--muted); margin: 0; }
body.home-arcade .solo-tile .solo-tile-play { margin-top: 16px; }

@media (max-width: 1100px) {
  body.home-arcade .arcade-solo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body.home-arcade .arcade-solo-grid { grid-template-columns: 1fr; }
}