/* =========================
   Kigane Smash/Pass — CSS
   ========================= */

/* ---------- Thèmes (variables) ---------- */
.ksp-theme-light {
  --ksp-text:#0f172a; --ksp-muted:#64748b;
  --ksp-accent:#2563eb; --ksp-accent-2:#3b82f6;
  --ksp-bg:transparent; --ksp-card-bg:#ffffff; --ksp-border:#d6e1f0;
  --ksp-shadow:0 10px 30px rgba(15,23,42,.08);
  --ksp-pill-bg:#f1f5f9; --ksp-pill-active-bg:#e0ecff;
  --ksp-bar-bg:#e2e8f0; --ksp-pass:#ff6f9f; --ksp-smash:#22c55e;
}
.ksp-theme-dark {
  --ksp-text:#e7ecf3; --ksp-muted:#9fb0c9;
  --ksp-accent:#2b83ff; --ksp-accent-2:#5aa0ff;
  --ksp-bg:radial-gradient(80% 60% at 50% 0%, #121722 0%, #0c1016 55%, #0a0d12 100%);
  --ksp-card-bg:linear-gradient(180deg,#141b26,#0e141d);
  --ksp-border:#2b83ff; --ksp-shadow:0 10px 30px rgba(0,0,0,.45);
  --ksp-pill-bg:#1b2230; --ksp-pill-active-bg:#dbe6ff;
  --ksp-bar-bg:#263042; --ksp-pass:#ff6f9f; --ksp-smash:#21c36a;
}

/* ---------- Base ---------- */
.ksp-wrap{ color:var(--ksp-text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; max-width:100%; }
.ksp-hub{ color:var(--ksp-text); max-width:100%; }

.ksp-app{ background:var(--ksp-bg); border-radius:18px; padding:16px; box-shadow:var(--ksp-shadow); }
.ksp-loading{ min-height:300px; display:flex; align-items:center; justify-content:center; }

.ksp-top{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:10px 0 18px; color:var(--ksp-muted); }
.ksp-chip{ background:rgba(0,0,0,.06); border-radius:12px; padding:.25rem .6rem; font-weight:700; color:inherit; }

/* ---------- Zone principale / carte ---------- */
.ksp-stage{ position:relative; margin:18px auto 8px; max-width:760px; }

.ksp-card{
  position:relative; margin:0 auto; background:var(--ksp-card-bg);
  border-radius:24px; border:3px solid var(--ksp-accent); box-shadow:var(--ksp-shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:12px; padding:16px; touch-action:none;
}

/* Cadre FIXE (commun à toutes les catégories) */
.ksp-visual{
  width:100%; max-width:720px; aspect-ratio:16/9;        /* cadre paysage constant */
  border-radius:14px; overflow:hidden; margin:6px auto 8px;
  background:#0e1520; position:relative;                 /* nécessaire pour l'absolute de l'image */
}

/* OPTION B — L'image prend 100% de HAUTEUR du cadre, centrée
   => si portrait: bandes latérales possibles (accepté)
   => si paysage: rognage haut/bas possible */
.ksp-visual img{
  position:absolute; left:50%; top:50%;
  height:100%; width:auto;                       /* hauteur 100% */
  transform:translate(-50%, -50%);               /* centrage parfait */
  display:block; max-width:none;                 /* évite les limitations */
  image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges;
}

/* (on ne dépend plus d'une classe is-portrait) */

/* Nom */
.ksp-name{
  font-size:22px; font-weight:800; text-transform:capitalize;
  color:var(--ksp-text); text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.ksp-label{ position:absolute; top:16px; left:16px; padding:8px 12px; border-radius:12px; font-weight:900; opacity:0; transform:scale(.95); color:#fff; }
.ksp-label.pass{  background:var(--ksp-pass); }
.ksp-label.smash{ background:var(--ksp-smash); }

/* ---------- Stats & historique ---------- */
.ksp-stats{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:22px auto 10px; max-width:760px; }
.ksp-bar{ height:28px; border-radius:10px; background:var(--ksp-bar-bg); overflow:hidden; }
.ksp-bar-fill{ height:100%; display:block; }
.ksp-bar.pass .ksp-bar-fill{  background:var(--ksp-pass); }
.ksp-bar.smash .ksp-bar-fill{ background:var(--ksp-smash); }
.ksp-num{ font-weight:800; text-align:center; }

.ksp-prevbox{ display:flex; align-items:center; justify-content:center; }
.ksp-prev{ width:80px; height:80px; border:3px solid var(--ksp-accent); border-radius:16px; background:#1a2230; display:flex; align-items:center; justify-content:center; margin:0 6px; }
.ksp-prev img{ width:72px; height:72px; object-fit:cover; border-radius:12px; }

.ksp-voters{ grid-column:2; text-align:center; margin-top:4px; font-weight:700; color:var(--ksp-text); opacity:.85; }
.ksp-theme-dark .ksp-voters{ color:#d5dcef; opacity:.9; }

/* ---------- Boutons ---------- */
.ksp-counter{ display:flex; gap:18px; justify-content:center; margin:18px auto 10px; }
.ksp-btn{
  position:relative; display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-width:220px; padding:14px 22px; border-radius:18px;
  border:2px solid var(--ksp-accent); box-shadow:0 0 0 3px rgba(37,99,235,.12) inset;
  cursor:pointer; background:#0a0a0a08; font-weight:800; font-size:24px; letter-spacing:.5px;
  color:var(--ksp-accent-2); user-select:none;
}
.ksp-btn .badge{ position:absolute; right:14px; top:-10px; min-width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; padding:0 8px; }
.ksp-btn.pass .badge{  background:var(--ksp-pass); }
.ksp-btn.smash .badge{ background:var(--ksp-smash); }
.ksp-card.ksp-disabled{ opacity:.7; }
.ksp-next{ display:block; margin:8px auto 0; padding:8px 12px; border-radius:10px; border:1px solid var(--ksp-border); background:#fff; color:var(--ksp-text); }
.ksp-theme-dark .ksp-next{ background:#1b2230; color:#d5dcef; }

/* ---------- Tabs (pills) ---------- */
.ksp-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:6px auto 14px; align-items:center; justify-content:center; }
.ksp-tab{
  padding:8px 14px; border-radius:9999px; background:var(--ksp-pill-bg);
  color:var(--ksp-muted); border:1px solid rgba(0,0,0,.06);
  cursor:pointer; user-select:none; transition:all .15s ease; opacity:.75;
}
.ksp-tab:hover{ opacity:.95; }
.ksp-tab.is-active{ background:var(--ksp-pill-active-bg); color:#0e1520; opacity:1; }
.ksp-tab[aria-disabled="true"]{ opacity:.35; cursor:not-allowed; }

/* ---------- Skins ---------- */
.ksp-skin-transparent .ksp-app{ background:transparent !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
.ksp-skin-transparent .ksp-wrap, .ksp-skin-transparent.ksp-wrap{ color:inherit; }

/* ---------- Utilitaires ---------- */
.ksp-hide{ display:none; }
.ksp-already{ margin-top:8px; font-weight:700; font-size:14px; color:var(--ksp-muted); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ksp-stage, .ksp-stats{ max-width:92vw; }
  .ksp-visual{ aspect-ratio:16/10; } /* un poil plus haut en mobile/tablette */
}
@media (max-width:560px){
  .ksp-btn{ min-width:42%; font-size:20px; }
  .ksp-prev{ width:68px; height:68px; }
  .ksp-prev img{ width:62px; height:62px; }
}

/* ---------- Accessibilité & confort ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}