@import url('fonts/fonts.css');

/* ============ Thème CLASSIQUE (par défaut) ============ */
:root{
  --bg:#0a1630; --panel:#112245; --panel2:#17305c; --panel3:#1e3a6e; --line:#2b4a80;
  --txt:#f1f5ff; --muted:#93a6cc;
  --orange:#e6007e;            /* couleur d'accent principale */
  --orange2:#ff4fa8;           /* accent clair */
  --accent-ink:#ffffff;        /* texte posé sur l'accent */
  --purple:#36c9f5; --green:#2fbf71; --red:#e5484d;
  --a0:#e5484d; --a1:#3b82f6; --a2:#e8a317; --a3:#2fbf71;
  --a4:#8b5cf6; --a5:#f97316; --a6:#14b8a6; --a7:#ec4899;
  --radius:14px;
  --display-font:'Lilita One',Inter,sans-serif;
  --display-color:#ffffff;
  --display-shadow:0 0 0 transparent, 3px 3px 0 #e6007e, 6px 6px 0 rgba(0,0,0,.35);
  --page-bg:
    radial-gradient(1.5px 1.5px at 20px 30px,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 120px 80px,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 200px 160px,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 60px 200px,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 250px 40px,#cfe3ff 50%,transparent 51%),
    radial-gradient(ellipse at 15% -10%, #1d3c78 0%, transparent 55%),
    radial-gradient(ellipse at 95% 110%, #3b0a35 0%, transparent 50%),
    #0a1630;
  --page-bg-size:280px 240px,280px 240px,280px 240px,280px 240px,280px 240px,auto,auto,auto;
  --t1:#e6007e; --t2:#36c9f5;  /* couleurs du chrono */
}

/* ============ Thème SPOOKY ============ */
:root[data-theme="spooky"]{
  --bg:#0b0710; --panel:#16101f; --panel2:#211730; --panel3:#2b1f3d; --line:#3a2a52;
  --txt:#efe8f7; --muted:#9d8fb3;
  --orange:#ff7a1a; --orange2:#ffb347; --accent-ink:#1a0b00;
  --purple:#8b5cf6;
  --display-font:Creepster,Inter,cursive;
  --display-color:#ff7a1a;
  --display-shadow:0 0 18px rgba(255,122,26,.45),0 3px 0 #5a2200;
  --page-bg:
    radial-gradient(ellipse at 15% -10%, #2b1640 0%, transparent 55%),
    radial-gradient(ellipse at 95% 110%, #3a1a08 0%, transparent 50%),
    #0b0710;
  --page-bg-size:auto,auto,auto;
  --t1:#ff7a1a; --t2:#8b5cf6;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--page-bg);background-size:var(--page-bg-size);background-attachment:fixed;
  color:var(--txt); font-family:Inter,system-ui,sans-serif; font-size:15px;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--orange2)}
.hidden{display:none !important}
.display,.spooky{font-family:var(--display-font);font-weight:400;letter-spacing:1.5px;color:var(--display-color);text-shadow:var(--display-shadow)}
:root[data-theme="spooky"] .display{letter-spacing:2px}
.muted{color:var(--muted)}

/* Logo + nom de l'événement */
.brand-logo{display:block;max-width:100%;height:auto;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.08)}
.brand-sub{font-family:var(--display-font);color:var(--display-color);text-shadow:var(--display-shadow)}
.only-spooky{display:none}
:root[data-theme="spooky"] .only-spooky{display:revert}
:root[data-theme="spooky"] .only-classic{display:none}

.btn{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:9px 15px;font-weight:600;transition:.15s;display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;color:var(--txt);white-space:nowrap;
}
.btn:hover{border-color:var(--orange)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--orange);border-color:var(--orange);color:var(--accent-ink)}
.btn.primary:hover{background:var(--orange2)}
.btn.danger:hover{border-color:var(--red);color:#ff9a9d}
.btn.small{padding:5px 10px;font-size:13px;border-radius:9px}
.btn.icon{padding:7px 10px}

.input, select.input, textarea.input{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;
}
.input:focus{border-color:var(--orange)}
label.field{display:block;margin-bottom:14px}
label.field > span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:6px;font-weight:600}

.card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:20px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel3);border:1px solid var(--line);
  padding:10px 18px;border-radius:12px;z-index:999;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .3s}

/* Couleurs / formes des réponses */
.ans-0{--c:var(--a0)} .ans-1{--c:var(--a1)} .ans-2{--c:var(--a2)} .ans-3{--c:var(--a3)}
.ans-4{--c:var(--a4)} .ans-5{--c:var(--a5)} .ans-6{--c:var(--a6)} .ans-7{--c:var(--a7)}
.shape{display:inline-flex;width:1.6em;justify-content:center;flex:none}

/* Fond personnalisé d'un quiz */
.bg-layer{inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-layer > div{position:absolute;inset:0}

/* ============ Avatars ============ */
.av{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:50%;background:rgba(255,255,255,.12);font-size:1em;line-height:1;flex:none;vertical-align:middle;overflow:hidden}
.av.img img{width:100%;height:100%;object-fit:cover}
.av.sm{width:1.4em;height:1.4em;font-size:.9em}

/* ============ Bilan de fin de partie ============ */
.stats{display:flex;flex-direction:column;gap:18px}
.st-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.st-card{display:flex;gap:12px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.st-card .ic{font-size:30px;flex:none}
.st-card small{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.st-card b{display:block;font-size:17px;line-height:1.25;word-break:break-word}
.st-card span{display:block;color:var(--muted);font-size:13px}
.st-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
@media (max-width:1000px){.st-cols{grid-template-columns:1fr}}
.st-sec{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.st-sec h3{margin:0 0 10px;font-size:16px}
.st-tab{width:100%;border-collapse:collapse;font-size:14px}
.st-tab th{text-align:left;color:var(--muted);font-weight:700;font-size:12px;padding:4px 6px;border-bottom:1px solid var(--line)}
.st-tab td{padding:6px;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);vertical-align:middle}
.st-tab .r{text-align:right}
.st-tab .st-rk{font-weight:900;color:var(--orange2);width:3em}
.st-tab .st-rk small{display:block;white-space:nowrap;font-size:9px;color:var(--muted);font-weight:700}
.st-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:4px;min-width:60px}
.st-bar i{display:block;height:100%;background:var(--orange)}
.st-bar i.g{background:linear-gradient(90deg,#2fbf71,#7ee2a8)}
.st-q{padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.st-q:last-child{border:none}
.st-q .qh{display:flex;gap:8px;align-items:baseline}
.st-q .n{font-weight:900;color:var(--orange2);flex:none}
.st-q .t{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-q .p{font-weight:900;flex:none}
.st-q .qm{color:var(--muted);font-size:12.5px;margin-top:4px}
.st-q .qo{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.st-q .qo span{background:rgba(255,255,255,.07);border-radius:8px;padding:2px 8px;font-size:12px;color:var(--muted)}
.st-q .qo span.ok{background:rgba(47,191,113,.2);color:#9ff0c3}
.st-q .qo b{color:var(--txt);margin-left:3px}
.st-card span.av{display:inline-flex;vertical-align:-0.25em;margin-right:4px;color:inherit;font-size:inherit}