/* Quiz Live : feuille de style commune (écran animateur + mobile joueur) */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
:root{
  --paper:#E6E2DC; --paper-2:#D9D4CC; --paper-3:#CCC5BB; --ink:#2B211C; --ink-soft:#6A5D55;
  --signal:#FFE100; --ok:#2E6B3F; --ko:#A3262F;
  --t-noir:#22201F; --t-cognac:#9A5A33; --t-bordeaux:#6B1E2B; --t-olive:#56603F;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#1E1916;--paper-2:#2C2521;--paper-3:#3A322D;--ink:#F1EBE4;--ink-soft:#B3A69C;--ok:#7CC98F;--ko:#F0838A;color-scheme:dark}
}
:root[data-theme="dark"]{--paper:#1E1916;--paper-2:#2C2521;--paper-3:#3A322D;--ink:#F1EBE4;--ink-soft:#B3A69C;--ok:#7CC98F;--ko:#F0838A;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-stretch:100%;
  font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:2px;background:var(--ink);color:var(--paper);
  padding:16px 26px;font-weight:700;font-size:17px;font-stretch:112%;min-height:52px;text-decoration:none}
.btn:hover{background:var(--t-bordeaux);color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed;background:var(--ink);color:var(--paper)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.alt:hover{background:var(--ink);color:var(--paper)}
.btn.quiet{background:transparent;color:var(--ink-soft);padding:10px 14px;min-height:0;font-weight:600;font-stretch:100%;font-size:15px}
.btn.quiet:hover{color:var(--ink);background:var(--paper-2)}

.field{display:block;width:100%;border:2px solid var(--ink);border-radius:2px;background:var(--paper);padding:14px 16px;font-size:20px;font-weight:600}
.field:focus{outline:none;box-shadow:0 0 0 4px var(--signal)}
.error{color:var(--ko);font-weight:600;min-height:1.4em;margin:10px 0 0;font-size:15px}

/* Tuiles de réponse : matières de la collection */
.tile{position:relative;display:flex;align-items:center;gap:16px;border:0;border-radius:6px;text-align:left;color:#fff;
  font-weight:600;line-height:1.25;padding:14px 18px 14px 14px;transition:opacity .25s,transform .12s}
.tile .key{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.75);font-weight:800;font-size:15px;font-stretch:125%}
.tile .pic{flex:none;background:#fff;border-radius:3px;overflow:hidden;display:grid;place-items:center}
.tile .pic img{width:100%;height:100%;object-fit:contain}
.tile .txt{flex:1;min-width:0}
.m0{background:linear-gradient(115deg,#3a3634 0%,var(--t-noir) 38%,#151312 62%,#343030 100%)}
.m1{background-color:var(--t-cognac);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.m2{background:radial-gradient(120% 140% at 20% 0%,#8a2c3b 0%,var(--t-bordeaux) 55%,#4f1520 100%)}
.m3{background-color:var(--t-olive);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px)}
.tile .mark{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;display:none;place-items:center;background:var(--signal);color:#22201F;font-weight:800}
.revealed .tile.right{outline:4px solid var(--signal);outline-offset:3px;box-shadow:0 0 0 9px var(--ink)}
.revealed .tile.right .mark{display:grid}
.revealed .tile:not(.right){opacity:.3}
.revealed .tile.mine:not(.right){opacity:.65}

.timer{height:10px;background:var(--paper-2);position:relative;overflow:hidden}
.timer i{position:absolute;inset:0;background:var(--signal);transform-origin:left}
.timer.low i{background:var(--ko)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}