/* ============================================================
   AMIKO PRONOS — feuille de style (mobile-first)
   Direction : stade la nuit + accents Pacifique (lagon/corail/or)
   ============================================================ */
:root{
  --ink:#0b1220;          /* fond bleu nuit profond */
  --ink-2:#121c30;        /* surfaces */
  --ink-3:#1b2942;        /* surfaces hautes */
  --line:#27374f;         /* bordures */
  --sand:#eef2f7;         /* texte principal */
  --mute:#8aa0bd;         /* texte secondaire */
  --lagon:#18c2b0;        /* accent primaire (lagon) */
  --lagon-d:#0e9a8c;
  --corail:#ff6a5a;       /* accent secondaire (corail) */
  --or:#f4c542;           /* trophée / champion */
  --ok:#2fd07a;
  --radius:14px;
  --maxw:560px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, #15233c 0%, transparent 60%),
    var(--ink);
  color:var(--sand);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px 16px 120px}
a{color:var(--lagon)}

/* ---------- Typo display ---------- */
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lagon);font-weight:700;margin:0 0 6px}
h1.display{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(34px,9vw,52px);line-height:.96;letter-spacing:.5px;
  text-transform:uppercase;margin:0 0 10px;
}
h1.display .accent{color:var(--corail)}
.lead{color:var(--mute);font-size:15px;margin:0 0 22px}
h2.round-title{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.5px;font-size:22px;margin:30px 0 4px;
}
.round-sub{color:var(--mute);font-size:13px;margin:0 0 14px}

/* ---------- Cartes ---------- */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 14px}
.match{position:relative}
.match .mtag{font-size:11px;color:var(--mute);letter-spacing:.06em;margin:0 0 10px;text-transform:uppercase}

/* ---------- Champs ---------- */
label.fld{display:block;margin:0 0 12px}
label.fld .lbl{display:block;font-size:12px;color:var(--mute);margin:0 0 5px}
select,input[type=text],input[type=email],input[type=tel]{
  width:100%;appearance:none;-webkit-appearance:none;
  background:var(--ink-3);color:var(--sand);
  border:1px solid var(--line);border-radius:11px;
  padding:13px 38px 13px 13px;font-size:16px;font-family:inherit;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa0bd' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
select:focus,input:focus{outline:2px solid var(--lagon);outline-offset:1px;border-color:transparent}
select.empty{color:var(--mute)}

/* ---------- Choix du vainqueur (seizièmes) ---------- */
.winrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.winbtn{
  border:1px solid var(--line);background:var(--ink-3);color:var(--sand);
  border-radius:11px;padding:11px 8px;font-size:14px;font-weight:600;
  text-align:center;cursor:pointer;min-height:46px;display:flex;align-items:center;justify-content:center;
}
.winbtn[disabled]{color:var(--mute);opacity:.55;cursor:not-allowed}
.winbtn.sel{border-color:var(--lagon);background:rgba(24,194,176,.14);color:#bff4ee}
.winbtn .who{font-size:10px;color:var(--mute);display:block;font-weight:500}
.qlbl{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;margin:12px 0 2px}

/* ---------- Tour knockout (1 vainqueur entre 2 équipes) ---------- */
.ko .feed{display:flex;gap:8px}
.placeholder{color:var(--mute);font-style:italic;font-size:14px;padding:6px 0}

/* ---------- Progress sticky ---------- */
.progress{position:sticky;top:0;z-index:20;background:rgba(11,18,32,.92);backdrop-filter:blur(8px);
  margin:-20px -16px 18px;padding:12px 16px;border-bottom:1px solid var(--line)}
.progress .bar{height:6px;background:var(--ink-3);border-radius:99px;overflow:hidden}
.progress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lagon),var(--or));width:0;transition:width .25s}
.progress .pmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:6px}

/* ---------- Barre submit ---------- */
.submitbar{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:linear-gradient(180deg,transparent,var(--ink) 22%);padding:14px 16px;}
.submitbar .inner{max-width:var(--maxw);margin:0 auto}
.btn{
  display:block;width:100%;border:none;border-radius:13px;padding:16px;
  font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;text-align:center;
  background:var(--lagon);color:#04231f;letter-spacing:.02em;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--ink-3);color:var(--mute);cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--sand)}
.btn.gold{background:var(--or);color:#3a2c00}

/* ---------- Champion ---------- */
.champ-card{border-color:var(--or);background:linear-gradient(180deg,rgba(244,197,66,.10),var(--ink-2))}
.champ-card h2{color:var(--or)}
.trophy{font-size:26px}

/* ---------- Divers ---------- */
.note{font-size:12.5px;color:var(--mute);background:var(--ink-2);border:1px solid var(--line);
  border-radius:11px;padding:12px;margin:14px 0}
.err{background:rgba(255,106,90,.12);border-color:var(--corail);color:#ffd0c9}
.center{text-align:center}
.pwbox{display:flex;gap:8px;margin-top:8px}
.pwbox input{flex:1;text-align:center;letter-spacing:.3em;text-transform:uppercase}
table.lb{width:100%;border-collapse:collapse;font-size:14px}
table.lb th,table.lb td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
table.lb td.pts{text-align:right;font-weight:800;color:var(--or)}
table.lb tr.me{background:rgba(24,194,176,.08)}
.rank{color:var(--mute);width:28px}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--ink-3);border:1px solid var(--line);color:var(--mute)}

/* ---------- Classement public : podium ---------- */
.lb-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 16px}
.lb-meta{font-size:12px;color:var(--mute)}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:end;margin:0 0 18px}
.pod{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center;position:relative}
.pod .medal{font-size:24px;line-height:1}
.pod .name{font-weight:700;font-size:13px;margin:6px 0 2px;word-break:break-word}
.pod .pts{font-family:'Anton',sans-serif;font-size:26px}
.pod .lbl{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.pod.g1{border-color:var(--or);background:linear-gradient(180deg,rgba(244,197,66,.14),var(--ink-2));transform:translateY(-8px)}
.pod.g1 .pts{color:var(--or)}
.pod.g2{border-color:#9fb0c4}.pod.g2 .pts{color:#cdd9e6}
.pod.g3{border-color:#c98a5a}.pod.g3 .pts{color:#e6b48c}
table.lb td.name-full{font-weight:600}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--ok);margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(47,208,122,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,208,122,.5)}70%{box-shadow:0 0 0 7px rgba(47,208,122,0)}100%{box-shadow:0 0 0 0 rgba(47,208,122,0)}}
@media (prefers-reduced-motion: reduce){.live-dot{animation:none}}