/* MINI QUIZ ARENA — thème global et overlays OBS transparents */
:root{font-family:Inter,system-ui,Arial,sans-serif;color:#f3f0ff;background:#0e1020;color-scheme:dark}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:#0e1020;color:#f3f0ff}
header{padding:20px 28px;background:#171a32;border-bottom:1px solid #333856;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
h1,h2,h3{margin:0 0 14px}h1{font-size:1.65rem}a{color:#aab7ff}
nav{display:flex;gap:14px;flex-wrap:wrap}
main{max-width:1120px;margin:28px auto;padding:0 18px}
.card{background:#191c35;border:1px solid #353a61;border-radius:16px;padding:22px;margin:14px 0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.muted{color:#a7afd0}.pill{display:inline-block;padding:5px 12px;border-radius:99px;background:#343660;color:#e4dcff;font-size:.85rem}
button,.btn{background:#7561f3;color:white;border:0;border-radius:9px;padding:11px 16px;cursor:pointer;font:inherit;font-weight:650}
button:hover{filter:brightness(1.13)}button:disabled{opacity:.4;cursor:not-allowed}
.danger{background:#a62c51}.secondary{background:#333a5d}
.choice{display:block;width:100%;text-align:left;margin:9px 0;background:#292e50;border:2px solid transparent}
.choice.selected{border-color:#ad9bff;background:#403a73}
input,select,textarea{background:#0e1229;color:white;border:1px solid #4a517a;border-radius:8px;padding:11px;font:inherit;width:100%;margin:6px 0 13px}
label{font-weight:600}textarea{min-height:80px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #363c60}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
#notice{min-height:24px;color:#f6d080}
.timer{font-size:2.5rem;font-weight:850;color:#e8d5ff}
.big{font-size:1.35rem}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hidden{display:none!important}.correct{background:#155b46!important;border-color:#44d4a0!important}
.small{font-size:.88rem}

/* IMPORTANT : seul le contenu de la carte est opaque, jamais le fond OBS. */
html:has(body.overlay){background:transparent!important;color-scheme:dark}
body.overlay{background:transparent!important;min-height:100vh;overflow:hidden}
.overlay header,.overlay nav{display:none!important}
.overlay main{margin:0!important;padding:16px!important;max-width:none!important;background:transparent!important;min-height:0}
.overlay .card{display:inline-block;vertical-align:top;width:min(100%,900px);max-width:100%;margin:0!important;padding:22px 26px;background:rgba(16,18,37,.94)!important;border:1px solid rgba(163,132,255,.55);border-radius:18px;box-shadow:0 12px 36px rgba(0,0,0,.3);backdrop-filter:blur(8px)}
.overlay .timer{font-size:2rem;margin-left:auto;font-variant-numeric:tabular-nums}
.overlay .row{gap:12px}
.overlay #question{margin-top:12px;overflow-wrap:anywhere}
.overlay #board{margin-top:12px;max-height:55vh;overflow:auto}
.overlay #board:empty,.overlay #question:empty{display:none}
.overlay .pill{background:rgba(117,97,243,.3);border:1px solid rgba(163,132,255,.25)}
/* Le mini-overlay streamer doit être discret et compact. */
body.overlay.streamer-overlay .card{width:min(100%,560px);padding:15px 18px}
body.overlay.streamer-overlay .timer{font-size:1.45rem}
body.overlay.streamer-overlay #question{font-size:.9rem}
body.overlay.streamer-overlay #status{font-size:.8rem;margin:8px 0 0}
/* Option d'affichage du leaderboard comme source navigateur OBS. */
body.overlay.leaderboard-overlay .card{width:min(100%,620px)}
body.overlay.leaderboard-overlay #board{max-height:75vh}
@media(max-width:600px){header{padding:16px}main{margin:16px auto;padding:0 12px}.card{padding:16px}.overlay main{padding:8px!important}.overlay .card{padding:14px}.overlay .timer{font-size:1.5rem}}