/* ============================================================
   QUESTIONS EXAMEN ARBITRE — entraînement solo
   Même thème "arcade nocturne" que le reste du hub, accent carton rouge.
   ============================================================ */
:root{
  --bg:#0a0e1a;
  --surface:rgba(255,255,255,0.04);
  --surface-2:rgba(255,255,255,0.07);
  --line:rgba(255,255,255,0.10);
  --line-2:rgba(255,255,255,0.16);
  --text:#eef1f8;
  --muted:#9aa3bd;
  --dim:#626b86;
  --accent:#f43f5e;
  --accent-2:#fda4af;
  --success:#34d399;
  --warn:#fbbf24;
  --danger:#fb7185;
  --rouge:#f43f5e;
  --bleu:#3b82f6;
  --agent:#22c55e;
  --neutre:#a8a29e;
  --assassin:#111827;
  --panel-solid:#131a2c;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Garantit que l'attribut HTML "hidden" masque vraiment un élément, même si
   une règle plus bas lui donne un display explicite (.modal est en flex).
   Une feuille d'auteur l'emporte toujours sur le [hidden]{display:none} du
   navigateur : sans ce garde-fou, la modale des règles reste affichée en
   permanence et bloque toute la page. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(244,63,94,0.13), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(190,18,60,0.08), transparent 70%),
    var(--bg);
  color:var(--text);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* ===== Intégration iOS ===== */
body::before, body::after{
  content:""; position:fixed; left:0; right:0; z-index:60; pointer-events:none;
  background:rgba(0,0,0,0.18);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
}
body::before{ top:0; height:env(safe-area-inset-top); }
body::after{ bottom:0; height:env(safe-area-inset-bottom); }

.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(244,63,94,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,63,94,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 30%, transparent 75%);
}

/* ---------- Header ---------- */
.app-header{
  position:relative; z-index:1; text-align:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px 10px;
}
.app-header h1{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  letter-spacing:-0.02em;
}
.game-logo{width:30px; height:30px; color:var(--accent);}
.home-btn{
  position:absolute; left:14px; top:calc(16px + env(safe-area-inset-top));
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  text-decoration:none;
}
.home-btn svg{width:20px; height:20px;}

/* ---------- Structure ---------- */
.wrap{position:relative; z-index:1; max-width:620px; margin:0 auto; padding:8px 14px 40px;}
.screen{display:none;}
.screen.active{display:block;}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:16px; margin-bottom:14px;
}
.card h2{
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
label{display:block; font-size:0.82rem; color:var(--muted); margin:10px 0 6px;}
input[type=text], input[type=number]{
  width:100%; padding:13px 14px; border-radius:12px;
  background:rgba(0,0,0,0.28); border:1px solid var(--line-2);
  color:var(--text); font-family:var(--font-body); font-size:1rem;
}
input[type=range]{width:100%; accent-color:var(--accent);}
button{
  font-family:var(--font-body); font-size:0.95rem; cursor:pointer;
  border-radius:12px; border:1px solid transparent; padding:13px 18px;
  margin-top:10px; color:var(--text); background:var(--surface-2);
}
button.primary{
  width:100%; background:linear-gradient(120deg, var(--accent), #be123c);
  color:#3f0512; font-weight:600; border:0;
}
button.ghost{background:var(--surface); border:1px solid var(--line-2); color:var(--muted);}
button.full{width:100%;}
button.danger-btn{color:var(--danger); border-color:rgba(251,113,133,0.3);}
button:disabled{opacity:0.45;}
.hint{font-size:0.78rem; color:var(--dim); margin-top:8px; line-height:1.5;}
.val-tag{color:var(--accent); font-weight:600;}
.count-badge{
  font-size:0.72rem; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:2px 9px; color:var(--muted);
}
.or-sep{text-align:center; margin:6px 0 14px; color:var(--dim); font-size:0.8rem;}

.code-card{text-align:center;}
.code-label{font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.16em;}
.code-display{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700;
  letter-spacing:0.34em; color:var(--accent); margin:6px 0 4px; padding-left:0.34em;
}
.code-input{text-align:center; letter-spacing:0.4em; text-transform:uppercase; font-size:1.3rem;}

/* ---------- Accueil ---------- */
.intro-card{text-align:center;}
.intro-lead{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--accent-2); margin-bottom:8px;
}
.jauge{margin-top:16px;}
.jauge-barre{
  height:8px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,0.08);
}
.jauge-barre span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), #be123c);
  transition:width .35s ease;
}
.jauge-txt{font-size:0.74rem; color:var(--dim); margin-top:8px;}

/* Le bouton de tirage : c'est LE geste de l'application, il occupe
   donc toute la largeur et une bonne hauteur — on doit pouvoir le
   toucher sans regarder. */
.tirage{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; margin:0 0 14px; padding:34px 18px;
  border:0; border-radius:22px;
  background:linear-gradient(140deg, var(--accent), #be123c);
  color:#fff; cursor:pointer;
  box-shadow:0 14px 34px rgba(244,63,94,0.28);
}
.tirage:active{transform:scale(0.985);}
.tirage:disabled{opacity:0.4; box-shadow:none;}
.tirage-ico{font-size:2.4rem; line-height:1;}
.tirage-txt{font-family:var(--font-display); font-weight:700; font-size:1.2rem;}

/* ---------- Question ---------- */
.q-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:12px;
}
.q-num{
  font-family:var(--font-display); font-weight:700; font-size:0.92rem;
  color:var(--accent-2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:9px 14px;
}
.q-prog{font-size:0.74rem; color:var(--dim);}

.q-card{border-color:rgba(244,63,94,0.28);}
.q-label, .r-label{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--muted); margin-bottom:10px;
}
/* L'énoncé est le contenu principal de l'écran : gros, aéré, lisible
   à bout de bras. Certains énoncés font plus de 400 caractères, d'où
   une taille qui reste raisonnable. */
.q-text{
  font-family:var(--font-display); font-weight:600;
  font-size:1.3rem; line-height:1.45;
}
.r-card{border-color:rgba(52,211,153,0.32); background:rgba(52,211,153,0.06);}
.r-label{color:var(--success);}
.r-text{font-size:1.02rem; line-height:1.62; color:var(--text);}

button.grand{padding:17px 20px; font-size:1.02rem;}
.q-actions{margin-top:4px;}
.center{text-align:center;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translate(-50%, 24px); z-index:100;
  background:var(--panel-solid); border:1px solid var(--line-2);
  border-radius:12px; padding:12px 18px; font-size:0.85rem;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  max-width:88vw; text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---------- Petits écrans ---------- */
@media (max-width:380px){
  .q-text{font-size:1.15rem;}
  .tirage{padding:26px 18px;}
}