/* ==========================================================================
   player.css — page joueur (mobile first, fond blanc, accents rouges).
   Cible de référence : 360 × 640 sans scroll sur l'écran de question.
   ========================================================================== */

html, body { height: 100%; }
body {
  background: var(--white);
  overscroll-behavior-y: contain;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 8px)
           calc(env(safe-area-inset-right, 0px) + 16px)
           calc(env(safe-area-inset-bottom, 0px) + 12px)
           calc(env(safe-area-inset-left, 0px) + 16px);
}

/* -------------------------------- En-tête --------------------------------- */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  flex: 0 0 auto;
}
.hdr__logo { height: 30px; width: auto; object-fit: contain; }
@media (min-height: 700px) { .hdr__logo { height: 36px; } }

/* --------------------------------- Écrans --------------------------------- */
.main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

.scr { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.scr[hidden] { display: none; }

.scr__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  min-height: 0;
}
.scr__body--center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.scr__title { font-size: var(--fs-2xl); }
.scr__sub   { font-size: var(--fs-md); max-width: 30ch; }

/* ------------------------------ Choix langue ------------------------------ */
.lang__title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.lang__btns  { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; }
.lang__ar    { font-family: 'Noto Kufi Arabic', var(--font-head); }
#btn-lang-fr, #btn-lang-ar { min-height: 72px; font-size: var(--fs-xl); }

/* ------------------------------- Formulaire ------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-700); }
.field__input {
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--fs-md);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.field__input:focus { border-color: var(--red); outline: none; }
.field__input.is-invalid { border-color: var(--wrong); background: var(--wrong-soft); }
.field__err { font-size: var(--fs-xs); color: var(--wrong); font-weight: 600; }
.form__error {
  background: var(--wrong-soft);
  color: var(--wrong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* -------------------------------- Lobby ----------------------------------- */
.dots { display: flex; gap: 8px; }
.dots i {
  width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--red); opacity: .3;
  animation: dots 1.2s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dots { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* --------------------------- Intro de catégorie ---------------------------- */
.cat__name  { font-size: var(--fs-3xl); color: var(--red); max-width: 18ch; }
.cat__ready { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 600; color: var(--gray-500); }

/* -------------------------------- Question -------------------------------- */
.scr--q { gap: var(--sp-3); padding-top: var(--sp-2); }

.q__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.q__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
[dir="rtl"] .q__meta { align-items: flex-end; }
.q__cat {
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.q__text {
  font-size: var(--fs-lg);
  line-height: 1.3;
  flex: 0 0 auto;
  margin: var(--sp-1) 0 var(--sp-2);
}
@media (max-height: 660px) { .q__text { font-size: var(--fs-md); } }

/* ----------------------------- Boutons A/B/C/D ----------------------------- */
.opts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-3);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--text);
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.opt:active:not(:disabled) { transform: scale(.99); background: var(--gray-100); }
.opt:disabled { cursor: default; }

.opt__key {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-700);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-md);
}
.opt__text {
  flex: 1 1 auto;
  font-size: var(--fs-sm);
  line-height: 1.25;
  font-weight: 500;
  overflow-wrap: anywhere;
}
@media (min-height: 700px) { .opt__text { font-size: var(--fs-md); } }
.opt__mark {
  flex: 0 0 auto;
  width: 26px;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
}

/* Verrouillé (réponse envoyée, en attente du reveal) */
.opt.is-locked { opacity: .75; }
.opt.is-picked { border-color: var(--gray-700); opacity: 1; }
.opt.is-dim    { opacity: .45; }

/* Mon choix : juste */
.opt.is-picked-correct {
  background: var(--green); border-color: var(--green); color: var(--white); opacity: 1;
}
.opt.is-picked-correct .opt__key { background: rgba(255,255,255,.25); color: var(--white); }

/* Mon choix : faux */
.opt.is-picked-wrong {
  background: var(--wrong); border-color: var(--wrong); color: var(--white); opacity: 1;
}
.opt.is-picked-wrong .opt__key { background: rgba(255,255,255,.25); color: var(--white); }

/* La bonne réponse quand je ne l'ai pas choisie */
.opt.is-answer {
  background: var(--green-soft); border-color: var(--green); color: var(--green); opacity: 1;
}
.opt.is-answer .opt__key { background: var(--green); color: var(--white); }
/* 3 cycles puis reste vert (la keyframe 100% == état final) */
.opt.is-answer.is-blink { animation: blink-correct 600ms var(--ease) 3 both; }

/* ------------------------------ Statut / reveal ---------------------------- */
.q__status {
  flex: 0 0 auto;
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--gray-100);
  color: var(--gray-700);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: center;
}
.q__status.is-correct { background: var(--gray-100); color: var(--green); }
.q__status.is-wrong   { background: var(--wrong-soft);  color: var(--wrong); }

.q__reveal {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--gray-100);
  text-align: center;
}
.q__reveal-answer { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--green); }
.q__reveal-watch  { font-size: var(--fs-sm); }

/* -------------------------------- Résultat --------------------------------- */
.res__wait { text-align: center; padding: var(--sp-10) 0; color: var(--text-muted); }

.res__won {
  background: var(--red);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-lg);
  text-align: center;
  margin-bottom: var(--sp-4);
}

.res__head { text-align: center; }
.res__emoji { font-size: 56px; line-height: 1; }
.res__title { font-size: var(--fs-2xl); color: var(--red); margin-top: var(--sp-2); }

.res__scores {
  margin: var(--sp-5) 0;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--gray-100);
  text-align: center;
}
.res__score { font-family: var(--font-head); font-size: var(--fs-2xl); font-weight: 800; }
.res__rank  { font-size: var(--fs-md); font-weight: 600; }

.res__sub { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.res__cats { display: flex; flex-direction: column; gap: var(--sp-3); }
.res__cat-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-sm); margin-bottom: 5px;
}
.res__cat-name  { font-weight: 600; }
.res__cat-score { font-family: var(--font-head); font-weight: 700; direction: ltr; }

.res__thanks { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--fs-sm); }

#btn-restart { margin-top: auto; }
.field__help { color: var(--text-muted); font-size: var(--fs-xs); }
.recovery-card { width: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--gray-100); text-align: center; font-size: var(--fs-xs); }
.recovery-card strong { display: block; margin-top: 4px; color: var(--red); font-family: var(--font-head); font-size: var(--fs-xl); letter-spacing: .16em; }
.lang-switch { border: 0; background: transparent; color: var(--text-muted); text-decoration: underline; min-height: 44px; padding: 8px; font-size: var(--fs-xs); }
@media (max-height: 660px) {
  .scr--q { overflow-y: auto; }
  .opt { padding-block: 10px; }
}

/* ==========================================================================
   SHOW — micro-animations téléphone (légères, aucune sur les bas de gamme
   avec prefers-reduced-motion).
   ========================================================================== */
.opt { transition: transform 120ms var(--ease), background 150ms, border-color 150ms, box-shadow 150ms; }
.opt:active:not(:disabled) { transform: scale(.965); box-shadow: 0 0 0 3px rgba(237,28,36,.18); }
.opt.is-picked { animation: pick-pop 260ms cubic-bezier(.2,1.4,.4,1); }
@keyframes pick-pop { 0% { transform: scale(.965); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
.opt.is-picked-correct { animation: correct-pop 480ms cubic-bezier(.2,1.4,.4,1); }
@keyframes correct-pop { 0% { transform: scale(.96); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.opt.is-picked-wrong { animation: wrong-shake 420ms var(--ease); }
@keyframes wrong-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.opt.is-picked-correct .opt__mark, .opt.is-picked-wrong .opt__mark, .opt.is-answer .opt__mark { animation: mark-in 300ms cubic-bezier(.2,1.5,.4,1) both; }
@keyframes mark-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Options qui arrivent en cascade à chaque question */
.opts .opt { animation-name: opt-in; animation-duration: 360ms; animation-timing-function: cubic-bezier(.2,1.1,.3,1); animation-fill-mode: both; }
.opts .opt:nth-child(1) { animation-delay: 60ms; }
.opts .opt:nth-child(2) { animation-delay: 130ms; }
.opts .opt:nth-child(3) { animation-delay: 200ms; }
.opts .opt:nth-child(4) { animation-delay: 270ms; }
.opts .opt.is-picked, .opts .opt.is-picked-correct, .opts .opt.is-picked-wrong { animation-delay: 0ms; animation-duration: 260ms; }
.opts .opt.is-picked { animation-name: pick-pop; }
.opts .opt.is-picked-correct { animation-name: correct-pop; animation-duration: 480ms; }
.opts .opt.is-picked-wrong { animation-name: wrong-shake; animation-duration: 420ms; }
@keyframes opt-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Intro catégorie */
.cat__name { animation: cat-in 520ms cubic-bezier(.2,1.2,.3,1) both; }
@keyframes cat-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

/* Lobby : avatar qui respire */
#lobby-avatar { animation: breathe 2.8s ease-in-out infinite; box-shadow: 0 0 0 6px rgba(237,28,36,.10); }
@keyframes breathe { 0%,100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(237,28,36,.10); } 50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(237,28,36,.06); } }

/* Résultat : médaille qui tombe, titre qui glisse, bandeau gagnant qui brille */
.res__emoji { animation: medal-drop 800ms cubic-bezier(.2,1.5,.3,1) 100ms both; display: inline-block; }
@keyframes medal-drop { from { transform: translateY(-40px) scale(.4) rotate(-25deg); opacity: 0; } 70% { transform: translateY(4px) scale(1.08); } to { transform: none; opacity: 1; } }
.res__title { animation: rise-in 500ms var(--ease) 350ms both; }
.res__scores { animation: rise-in 500ms var(--ease) 550ms both; }
.res__cats li { animation: rise-in 420ms var(--ease) both; }
.res__cats li:nth-child(1) { animation-delay: 700ms; }
.res__cats li:nth-child(2) { animation-delay: 800ms; }
.res__cats li:nth-child(3) { animation-delay: 900ms; }
.res__cats li:nth-child(4) { animation-delay: 1000ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.res__won { position: relative; overflow: hidden; animation: won-in 600ms cubic-bezier(.2,1.3,.3,1) both; }
.res__won::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%); animation: won-shine 2.4s linear 800ms infinite;
}
@keyframes won-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes won-shine { 0% { transform: translateX(-120%); } 40%,100% { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .opt, .opts .opt, .cat__name, #lobby-avatar, .res__emoji, .res__title, .res__scores, .res__cats li, .res__won, .res__won::after { animation: none !important; }
}

/* ======================== Direction Astra validée ======================== */
body { background: #f4f1f1; }
.app { max-width: 520px; padding: 0; background: #fff; }
.hdr {
  min-height: calc(66px + env(safe-area-inset-top, 0px));
  padding: calc(12px + env(safe-area-inset-top, 0px)) 22px 12px;
  background: var(--red);
  color: #fff;
}
.hdr__logo { width: 88px; height: auto; }
.hdr .lang-switch,
.hdr .conn { color: #fff; }
.hdr .conn__dot { background: #fff; }
.main { padding: 0 22px calc(14px + env(safe-area-inset-bottom, 0px)); }
.btn { border-radius: 10px; }
.btn--primary { background: var(--red); }
.field__input { border-radius: 10px; }

/* Bienvenue avec RED entier, comme sur la proposition approuvée. */
body[data-screen="lobby"] .main { padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
#scr-lobby .scr__body { justify-content: flex-start; gap: 0; padding: 0; }
.lobby-hero {
  position: relative;
  width: 100%;
  height: 305px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--red);
}
.lobby-hero::before,
.lobby-hero::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  top: 4px;
  left: calc(50% - 140px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
}
.lobby-hero::after { width: 224px; height: 224px; top: 32px; left: calc(50% - 112px); }
.lobby-hero__brand { position: absolute; left: 22px; top: 12px; width: 78px; z-index: 2; }
.lobby-hero__ooredoo { position: absolute; right: 22px; top: 20px; width: 82px; height: auto; z-index: 2; }
body[data-screen="lobby"] .hdr__logo { visibility: hidden; }
.lobby-hero__red {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: calc(50% - 108px);
  width: 216px;
  height: 286px;
  border-radius: 0;
  animation: none !important;
  box-shadow: none !important;
}
.lobby-copy { padding: 25px 24px 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.lobby-state { font-family: var(--font-head); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #5e5758; }
#scr-lobby .scr__title { margin: 12px 0 10px; font-size: 36px; letter-spacing: -.035em; }
#scr-lobby .scr__sub { max-width: 310px; font-size: 14px; line-height: 1.55; }
.lobby-wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-family: var(--font-head); font-size: 14px; font-weight: 650; }
.lobby-wait i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
#scr-lobby .recovery-card {
  width: auto;
  align-self: stretch;
  margin: auto 24px 0;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid #dedada;
  border-radius: 0;
  background: transparent;
}

/* Question : choix nets, touches rouges, chrono noir puis rouge urgent. */
.scr--q { padding-top: 16px; }
.badge { border-radius: 8px; }
.q__text { font-weight: 650; }
.opt { border-radius: 10px; border-width: 1px; }
.opt__key { background: var(--red); color: #fff; }
.opt.is-picked { border-color: #171313; }
.chrono { --chrono-color: #171313; }
.chrono.is-urgent { --chrono-color: var(--red); }
.q__status { border-radius: 8px; }
.q__reveal { border-radius: 8px; }

/* Résultat et catégories dans le même vocabulaire. */
.cat__name,
.res__title { color: #171313; }
.res__won { border-radius: 10px; }
.res__scores { border-radius: 10px; }
.recovery-card { border-radius: 10px; }

@media (max-height: 740px) {
  .lobby-hero { height: 245px; }
  .lobby-hero::before { width: 224px; height: 224px; left: calc(50% - 112px); top: 0; }
  .lobby-hero::after { width: 180px; height: 180px; left: calc(50% - 90px); top: 22px; }
  .lobby-hero__red { width: 176px; height: 232px; left: calc(50% - 88px); top: 3px; }
  .lobby-copy { padding-top: 16px; }
  #scr-lobby .scr__title { font-size: 30px; margin: 8px 0; }
  .lobby-wait { margin-top: 14px; }
  #scr-lobby .recovery-card { padding: 12px 0; }
}