/* ==========================================================
   Yamba — Sky Catcher : styles de l'application
   ========================================================== */

:root {
  --nuit: #100826;
  --nuit-2: #1b0f3d;
  --violet: #6c4bf6;
  --violet-clair: #a48bff;
  --rose: #ff4d8d;
  --jaune: #ffd166;
  --menthe: #2ee6a8;
  --rouge: #ff5c5c;
  --texte: #f4f1ff;
  --texte-doux: #b4a9d6;
  --carte: rgba(255, 255, 255, .06);
  --carte-bord: rgba(255, 255, 255, .12);
  --ombre: 0 14px 34px rgba(6, 2, 22, .45);
  --rayon: 18px;
  --entete-h: 62px;
  --nav-h: 68px;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(108, 75, 246, .5), transparent 60%),
    radial-gradient(900px 520px at 92% 8%, rgba(255, 77, 141, .34), transparent 62%),
    linear-gradient(180deg, var(--nuit-2) 0%, var(--nuit) 55%, #08041a 100%);
  background-attachment: fixed;
  color: var(--texte);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.7rem; letter-spacing: -.4px; }
h2 { font-size: 1.1rem; }
p { margin: 0 0 .8rem; }
a { color: var(--violet-clair); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* --------------------------- En-tete --------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(16, 8, 38, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--carte-bord);
}

.entete-marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: var(--entete-h);
  padding: 0 1rem;
  max-width: 1100px;
  margin: 0 auto;
}

.entete-marque .logo { flex: 0 0 auto; }

.entete-marque strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: .3px;
}

.entete-marque span {
  display: block;
  font-size: .74rem;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.entete .btn-rond { margin-left: auto; }

/* --------------------------- Structure --------------------------- */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.1rem 1rem calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 1.6rem);
}

.vue { display: none; }
.vue.actif { display: block; animation: apparition .32s ease both; }

@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.titre-vue { margin-bottom: 1rem; }
.titre-vue h1 { font-size: 1.55rem; }
.titre-vue p { color: var(--texte-doux); margin: 0; }

/* --------------------------- Boutons --------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .95rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, background .16s ease;
}

.btn:active { transform: scale(.98); }
.btn-principal {
  background: linear-gradient(135deg, var(--violet) 0%, var(--rose) 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(108, 75, 246, .38);
}
.btn-principal:hover { filter: brightness(1.07); }
.btn-clair {
  background: rgba(255, 255, 255, .08);
  border-color: var(--carte-bord);
  color: var(--texte);
}
.btn-clair:hover { background: rgba(255, 255, 255, .14); }
.btn-large { margin-top: .9rem; }

.btn-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--carte-bord);
  background: rgba(255, 255, 255, .07);
  color: var(--texte);
  cursor: pointer;
  transition: background .16s ease;
}
.btn-rond:hover { background: rgba(255, 255, 255, .16); }
.btn-rond.coupe { color: var(--texte-doux); opacity: .65; }

.lien {
  background: none;
  border: none;
  color: var(--violet-clair);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}

/* --------------------------- Cartes --------------------------- */

.carte {
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: var(--rayon);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--ombre);
}

.carte-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .7rem;
}
.carte-titre h2 { margin: 0; }
.carte-alerte { border-color: rgba(255, 92, 92, .4); background: rgba(255, 92, 92, .1); }
.carte-info { background: rgba(46, 230, 168, .08); border-color: rgba(46, 230, 168, .3); }

.aide { color: var(--texte-doux); font-size: .82rem; margin: .5rem 0 0; }

.points-cles { margin: .6rem 0 0; }
.points-cles li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .45rem;
  color: #ddd6f5;
}
.points-cles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jaune);
}

/* --------------------------- Accueil --------------------------- */

.hero {
  text-align: center;
  padding: 1.4rem 1.1rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 22px;
  border: 1px solid var(--carte-bord);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(108, 75, 246, .35), transparent 70%),
    rgba(255, 255, 255, .04);
  box-shadow: var(--ombre);
}

.hero-badge {
  display: inline-block;
  padding: .3rem .8rem;
  margin: 0 0 .8rem;
  border-radius: 999px;
  background: rgba(46, 230, 168, .14);
  border: 1px solid rgba(46, 230, 168, .38);
  color: var(--menthe);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .3px;
}

.hero h1 {
  font-size: 2.3rem;
  background: linear-gradient(120deg, #fff 10%, var(--jaune) 50%, var(--rose) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: .4rem;
}

.hero-texte { color: #ded7f7; margin-bottom: 1.1rem; }

.bloc-pseudo { text-align: left; max-width: 380px; margin: 0 auto 1rem; }
.bloc-pseudo label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texte-doux);
  margin-bottom: .35rem;
  font-weight: 700;
}

input[type="text"], input[type="password"], input[type="email"], select {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 13px;
  border: 1px solid var(--carte-bord);
  background: rgba(10, 4, 26, .55);
  color: var(--texte);
  font: inherit;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus {
  border-color: var(--violet-clair);
  box-shadow: 0 0 0 3px rgba(108, 75, 246, .28);
}
input::placeholder { color: #8e83b5; }

.hero-actions { display: grid; gap: .6rem; max-width: 380px; margin: 0 auto; }

.stats-rapides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: 1.2rem;
}

.stat {
  background: rgba(10, 4, 26, .5);
  border: 1px solid var(--carte-bord);
  border-radius: 14px;
  padding: .7rem .5rem;
  text-align: center;
}
.stat-valeur {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--jaune);
}
.stat-label {
  display: block;
  font-size: .7rem;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* --------------------------- Classement --------------------------- */

.liste-rangs li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem .2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.liste-rangs li:last-child { border-bottom: none; }
.liste-rangs .rang {
  flex: 0 0 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  font-weight: 800;
  font-size: .85rem;
}
.liste-rangs li.top1 .rang { background: linear-gradient(135deg, #ffd166, #ff9f1c); color: #3b1d00; }
.liste-rangs li.top2 .rang { background: linear-gradient(135deg, #dfe6ff, #9aa7d6); color: #23283f; }
.liste-rangs li.top3 .rang { background: linear-gradient(135deg, #ffb27a, #c9743a); color: #38200c; }
.liste-rangs .qui { flex: 1; min-width: 0; }
.liste-rangs .qui strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-rangs .qui small { color: var(--texte-doux); font-size: .75rem; }
.liste-rangs .points { font-weight: 800; color: var(--menthe); white-space: nowrap; }
.liste-rangs .moi { color: var(--jaune); }
.chargement { color: var(--texte-doux); font-size: .9rem; padding: .6rem 0; }

/* --------------------------- Jeu --------------------------- */

.hud {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .7rem;
}
.hud-case {
  flex: 1;
  min-width: 64px;
  background: rgba(10, 4, 26, .55);
  border: 1px solid var(--carte-bord);
  border-radius: 13px;
  padding: .45rem .6rem;
  text-align: center;
}

.hud-label {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--texte-doux);
}
.hud-valeur { font-size: 1.15rem; font-weight: 800; }
.hud-vies { display: inline-flex; gap: 3px; justify-content: center; padding-top: 3px; }
.hud .btn-pause { flex: 0 0 auto; }

.barre-niveau {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  margin-bottom: .35rem;
}
.barre-niveau-remplissage {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--menthe), var(--jaune), var(--rose));
  transition: width .25s ease;
}
.barre-niveau-texte {
  text-align: center;
  font-size: .78rem;
  color: var(--texte-doux);
  margin: 0 0 .7rem;
}

.zone-jeu {
  position: relative;
  width: 100%;
  height: clamp(330px, 58vh, 560px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--carte-bord);
  box-shadow: var(--ombre);
  background: #0b0620;
  touch-action: none;
}
#canvas-jeu { display: block; width: 100%; height: 100%; }

.aide-controle {
  position: absolute;
  left: 50%;
  bottom: .8rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(6, 2, 20, .72);
  border: 1px solid var(--carte-bord);
  color: #d9d2f2;
  font-size: .74rem;
  white-space: nowrap;
  max-width: calc(100% - 1.6rem);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .4s ease;
}
.aide-controle.discret { opacity: 0; }

/* --------------------------- Reglages / menu --------------------------- */

.champ-ligne { display: flex; gap: .6rem; }
.champ-ligne input { flex: 1; }
.champ-ligne .btn { width: auto; white-space: nowrap; }

.ligne-reglage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bascule {
  position: relative;
  width: 58px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--carte-bord);
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .2s ease;
  flex: 0 0 auto;
}
.bascule span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
}
.bascule[aria-checked="true"] { background: linear-gradient(135deg, var(--violet), var(--rose)); }
.bascule[aria-checked="true"] span { transform: translateX(26px); }

.ligne-install { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn-install { text-decoration: none; }

.stores { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.store-puce {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--carte-bord);
  font-size: .78rem;
  color: #ded7f7;
}

/* --------------------------- Grille des objets --------------------------- */

.grille-objets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: .8rem;
}

.objet-puce {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: 14px;
  background: rgba(10, 4, 26, .5);
  border: 1px solid var(--carte-bord);
}
.objet-puce svg { flex: 0 0 auto; }
.objet-puce strong { display: block; font-size: .92rem; }
.objet-puce small { color: var(--texte-doux); font-size: .74rem; }
.objet-puce.danger { border-color: rgba(255, 92, 92, .45); background: rgba(255, 92, 92, .12); }

/* --------------------------- Fenetres --------------------------- */

.fenetre {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: rgba(5, 2, 16, .78);
  backdrop-filter: blur(6px);
  animation: apparition .2s ease both;
}
.fenetre-boite {
  width: 100%;
  max-width: 460px;
  max-height: 88dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #241452 0%, #170d38 100%);
  border: 1px solid var(--carte-bord);
  border-radius: 20px;
  padding: 1.4rem 1.3rem;
  box-shadow: 0 24px 60px rgba(3, 1, 12, .7);
  text-align: center;
}
.fenetre-boite p { color: #ded7f7; }
.fenetre-boite .btn { margin-top: .6rem; }
.fenetre-boite .points-cles { text-align: left; }

.bravo, .gameover-titre {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.bravo { background: rgba(46, 230, 168, .16); color: var(--menthe); border: 1px solid rgba(46, 230, 168, .4); }
.gameover-titre { background: rgba(255, 92, 92, .16); color: var(--rouge); border: 1px solid rgba(255, 92, 92, .42); }
.fenetre-fete { border-color: rgba(46, 230, 168, .38); }
.fenetre-over { border-color: rgba(255, 92, 92, .4); }

.record-message {
  margin: .8rem 0 0;
  padding: .6rem .8rem;
  border-radius: 12px;
  background: rgba(255, 209, 102, .14);
  border: 1px solid rgba(255, 209, 102, .42);
  color: var(--jaune);
  font-weight: 700;
  font-size: .88rem;
}

.etapes-install { text-align: left; display: grid; gap: .7rem; margin: .9rem 0; }
.etape { display: flex; gap: .7rem; align-items: flex-start; }
.etape-num {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--rose));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .82rem;
}
.etape p { margin: .15rem 0 0; font-size: .86rem; color: var(--texte-doux); }

/* --------------------------- Navigation basse --------------------------- */

.nav-bas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(14, 7, 34, .94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--carte-bord);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  height: var(--nav-h);
  border: none;
  background: none;
  color: var(--texte-doux);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s ease;
}
.nav-item span { letter-spacing: .2px; }
.nav-item.actif { color: #fff; }
.nav-item.actif svg { color: var(--jaune); }

/* --------------------------- Toast --------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
  transform: translateX(-50%);
  z-index: 70;
  max-width: calc(100% - 2rem);
  padding: .7rem 1.1rem;
  border-radius: 14px;
  background: rgba(20, 11, 48, .96);
  border: 1px solid var(--carte-bord);
  box-shadow: var(--ombre);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  animation: apparition .22s ease both;
}
.toast.succes { border-color: rgba(46, 230, 168, .5); color: var(--menthe); }
.toast.erreur { border-color: rgba(255, 92, 92, .5); color: #ffb4b4; }

/* --------------------------- Responsive --------------------------- */

@media (min-width: 768px) {
  body { font-size: 17px; }
  h1 { font-size: 2rem; }
  .hero h1 { font-size: 3rem; }
  .hero-actions { grid-template-columns: 1fr 1fr; max-width: 520px; }
  .grille-objets { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 2.4rem 2rem 2.6rem; }
  main { padding: 1.6rem 1.5rem calc(var(--nav-h) + 2rem); }
}

@media (max-width: 767px) {
  .grille-objets { grid-template-columns: repeat(2, 1fr); }
  .stats-rapides { grid-template-columns: repeat(2, 1fr); }
  .stats-rapides .stat:last-child { grid-column: 1 / -1; }
  .champ-ligne { flex-direction: column; }
  .champ-ligne .btn { width: 100%; }
  .hud { flex-wrap: wrap; }
  .fenetre-boite { padding: 1.2rem 1rem; }
  .liste-rangs .qui small { display: none; }
}


@media (max-width: 380px) {
  .hero h1 { font-size: 1.9rem; }
  .stat-valeur { font-size: 1.05rem; }
  .hud-valeur { font-size: 1rem; }
  .nav-item { font-size: .62rem; }
  .grille-objets { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .objet-puce { padding: .5rem; gap: .5rem; }
  .objet-puce strong { font-size: .82rem; }
}