/* Habillage des pages PHP (connexion, classement) + bandeau compte dans le jeu.
   Cohérent avec le thème sombre bleu Povataj du jeu. */
:root{
  --bleu:#2f6fed; --bleu-clair:#7fb4ff; --vert:#22c55e; --orange:#f59e0b;
  --fond:#0b1220; --panneau:#111c33; --bord:rgba(120,160,255,.25); --txt:#eef2ff; --txt2:#9db4dd;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--txt);
  background:radial-gradient(ellipse at 50% 25%,#16264a 0%,#070d1a 70%);min-height:100vh}
a{color:var(--bleu-clair)}

/* ---------- Connexion ---------- */
.page-auth{display:flex;align-items:center;justify-content:center;padding:24px}
.carte-auth{width:min(420px,94vw);background:linear-gradient(160deg,#111c33,#0b1424);
  border:1px solid var(--bord);border-radius:18px;padding:32px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);text-align:center}
.logo-jeu{font-size:30px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(90deg,#63a4ff,#22d3ee,#63a4ff);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.sous-auth{font-size:13px;color:var(--txt2);letter-spacing:1px;margin:4px 0 24px}
.erreur{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);color:#ffb4b4;
  border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.form-local{display:flex;flex-direction:column;gap:14px;text-align:left}
.form-local label{font-size:13px;font-weight:600;color:var(--txt2);display:flex;flex-direction:column;gap:6px}
.form-local .fac{font-weight:400;opacity:.7}
.form-local input{background:#0c1526;border:1px solid var(--bord);border-radius:10px;
  padding:11px 13px;color:var(--txt);font-size:15px;font-family:inherit}
.form-local input:focus{outline:none;border-color:var(--bleu)}
.btn-jouer{margin-top:6px;background:linear-gradient(160deg,var(--bleu),#1d4ed8);color:#fff;border:none;
  border-radius:12px;padding:13px;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 24px rgba(47,111,237,.4);transition:transform .15s}
.btn-jouer:hover{transform:scale(1.03)}
.btn-ms{display:flex;align-items:center;justify-content:center;gap:10px;background:#2f2f2f;color:#fff;
  text-decoration:none;border-radius:10px;padding:12px;font-size:15px;font-weight:600;transition:background .15s}
.btn-ms:hover{background:#3a3a3a}
.ms-tuiles{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:18px;height:18px}
.ms-tuiles i{display:block;width:100%;height:100%}
.ms-tuiles i:nth-child(1){background:#f25022}.ms-tuiles i:nth-child(2){background:#7fba00}
.ms-tuiles i:nth-child(3){background:#00a4ef}.ms-tuiles i:nth-child(4){background:#ffb900}
.ou{display:flex;align-items:center;gap:10px;color:var(--txt2);font-size:12px;margin:16px 0}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--bord)}
.pied-auth{margin-top:22px;font-size:14px}

/* ---------- Bandeau compte (écran intro du jeu) ---------- */
.compteInfo{margin:10px auto 0;font-size:13px;color:var(--txt2);display:flex;gap:10px;
  justify-content:center;flex-wrap:wrap;align-items:center}
.compteInfo a{color:var(--bleu-clair);text-decoration:none}
.compteInfo a:hover{text-decoration:underline}

/* Score enregistré (écran de fin) */
.rang-enreg{font-size:15px;color:var(--bleu-clair);margin:2px 0 16px;font-weight:600}

/* ---------- Classement ---------- */
.page-classement{padding:30px 18px}
.wrap-classement{max-width:820px;margin:0 auto}
.entete-classement{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.entete-classement h1{font-size:30px}
.sous-cl{color:var(--txt2);font-size:13px;margin-top:2px}
.actions-cl{display:flex;gap:8px;flex-wrap:wrap}
.actions-cl .lien{text-decoration:none;font-weight:700;background:var(--panneau);border:1px solid var(--bord);
  padding:9px 16px;border-radius:10px;display:inline-block}
.actions-cl .lien:hover{border-color:var(--bleu)}

/* Cartes de statistiques */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--panneau);border:1px solid var(--bord);border-radius:14px;padding:16px 14px;text-align:center}
.kpi .val{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .val.accent{color:var(--bleu-clair)}
.kpi .val.ok{color:var(--vert)}
.kpi .val.warn{color:var(--orange)}
.kpi .lbl{font-size:12px;color:var(--txt2);margin-top:6px;letter-spacing:.3px}

/* Filtres (groupes de pastilles) */
.filtres{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.grp{display:flex;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.03);border:1px solid var(--bord);
  border-radius:24px;padding:4px}
.pill{text-decoration:none;color:var(--txt2);padding:7px 14px;border-radius:20px;font-size:13.5px;font-weight:600;white-space:nowrap}
.pill:hover{color:var(--txt)}
.pill.actif{background:var(--bleu);color:#fff}

/* Colonne temps */
.tbl-scores .temps{white-space:nowrap;line-height:1.35}
.tbl-scores .temps .tr{display:block;font-weight:700;font-variant-numeric:tabular-nums}
.tbl-scores .temps .tu{display:block;font-size:12px;color:var(--txt2);font-variant-numeric:tabular-nums}
.note-vue{margin-top:12px;font-size:12.5px;color:var(--txt2);text-align:center}

/* Lien nom de joueur (vers la fiche) */
.lien-joueur{color:var(--txt);text-decoration:none;border-bottom:1px dotted rgba(127,180,255,.5)}
.lien-joueur:hover{color:var(--bleu-clair);border-bottom-color:var(--bleu-clair)}

/* Fiche joueur */
.tag-ech{font-size:11px;background:rgba(239,68,68,.18);color:#ffb4b4;padding:1px 7px;border-radius:20px}
.titre-bloc{font-size:14px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--txt2);
  margin:22px 0 10px}
.titre-bloc span{text-transform:none;font-weight:400;opacity:.75;letter-spacing:0}
.bloc-chart{background:var(--panneau);border:1px solid var(--bord);border-radius:14px;padding:14px 16px}
.bloc-chart .titre-bloc{margin-top:0}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:rgba(120,160,255,.14);stroke-width:1}
.chart .ylab{fill:var(--txt2);font-size:11px;text-anchor:end;font-family:inherit}
.chart .xlab{fill:var(--txt2);font-size:11px;text-anchor:middle;font-family:inherit}
.chart .vlab{fill:var(--txt);font-size:11px;text-anchor:middle;font-weight:700;font-family:inherit}
.chart .line{fill:none;stroke:var(--bleu-clair);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .pt{stroke:#0b1220;stroke-width:1.5}
.chart .pt.vic{fill:var(--vert)}
.chart .pt.ech{fill:var(--orange)}
.sous-cl sup{font-size:.6em}
.tbl-scores{width:100%;border-collapse:collapse;background:var(--panneau);border:1px solid var(--bord);
  border-radius:14px;overflow:hidden}
.tbl-scores th,.tbl-scores td{padding:12px 14px;text-align:left;font-size:14px;border-bottom:1px solid rgba(120,160,255,.12)}
.tbl-scores th{background:rgba(47,111,237,.15);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--txt2)}
.tbl-scores tr:last-child td{border-bottom:none}
.tbl-scores .rg{width:44px;text-align:center;font-weight:800}
.tbl-scores .score{font-weight:800;font-variant-numeric:tabular-nums;color:var(--bleu-clair)}
.tbl-scores .date{color:var(--txt2);font-size:12.5px;white-space:nowrap}
.tbl-scores .joueur{font-weight:600}
.podium.p1{background:rgba(255,212,53,.10)}
.podium.p2{background:rgba(203,213,225,.08)}
.podium.p3{background:rgba(205,127,50,.10)}
.badge-mode{font-size:12px;padding:2px 9px;border-radius:20px;font-weight:700}
.badge-mode.normal{background:rgba(47,111,237,.2);color:var(--bleu-clair)}
.badge-mode.difficile{background:rgba(239,68,68,.18);color:#ffb4b4}
.tag-vic{font-size:11px;background:rgba(34,197,94,.2);color:#8ff0b0;padding:1px 7px;border-radius:20px;margin-left:6px}
.vide{background:var(--panneau);border:1px solid var(--bord);border-radius:14px;padding:40px;text-align:center;color:var(--txt2)}