/* Famili'Quiz — styles */

/* Police Fredoka hébergée avec le jeu (licence SIL OFL, voir fonts/OFL.txt) : aucun appel à un service extérieur.
   Police variable : un seul fichier couvre les graisses 300 à 700. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg1: #2a1b5e;
  --bg2: #5b2a86;
  --c1: #7c4dff;
  --c2: #00e5ff;
  --ink: #1d1442;
  --muted: #6b6390;
  --card: #ffffff;
  --gold: #ffc93c;
  --ok: #22c55e;
  --ko: #ef4444;
  --a0: #ff5a5f;
  --a1: #3d8bfd;
  --a2: #ffb020;
  --a3: #22b07d;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(20, 8, 60, .35);
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Fredoka', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  color: #fff;
  background: radial-gradient(circle at 20% 10%, var(--bg2), var(--bg1) 60%) fixed, var(--bg1);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
input, select, textarea { user-select: text; font: inherit; }
button { font: inherit; cursor: pointer; color: inherit; }
.hidden { display: none !important; }
.emoji { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }

/* ---------- Fond animé ---------- */
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, transparent), color-mix(in srgb, var(--c2) 15%, transparent));
  transition: background .8s; }
#bg span { position: absolute; font-size: 3rem; opacity: .13; animation: drift linear infinite; }
@keyframes drift {
  from { transform: translateY(110vh) rotate(0deg); }
  to   { transform: translateY(-20vh) rotate(360deg); }
}

/* ---------- Mise en page ---------- */
#app { max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px; min-height: 100vh; }
.screen { animation: enter .35s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h2.title { font-size: clamp(1.6rem, 4vw, 2.4rem); text-align: center; margin: 8px 0 18px; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.sub { text-align: center; color: rgba(255,255,255,.8); margin: -8px 0 18px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-height: 48px; padding-right: 110px; }
.topbar h2 { flex: 1; font-size: clamp(1.3rem, 3.4vw, 2rem); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.center { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.spacer { flex: 1; }
.panel { background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.15); border-radius: var(--radius); padding: 18px; backdrop-filter: blur(6px); }
.card { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }

/* ---------- Boutons ---------- */
.btn { border: 0; border-radius: 999px; padding: 14px 26px; font-size: 1.15rem; font-weight: 600;
  background: #fff; color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(180deg, #ffd84d, #ffb300); color: #4a2a00; }
.btn.green { background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; }
.btn.ghost { background: rgba(255,255,255,.15); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.2); }
.btn.danger { background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; }
.btn.big { font-size: 1.45rem; padding: 18px 36px; }
.btn.small { font-size: .95rem; padding: 9px 16px; box-shadow: 0 4px 0 rgba(0,0,0,.22); }
.btn.round { width: 48px; height: 48px; padding: 0; font-size: 1.4rem; }

#sound-bar { position: fixed; top: 12px; right: 12px; z-index: 50; display: flex; gap: 8px; }
#sound-bar button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); font-size: 1.25rem; backdrop-filter: blur(6px); }
#sound-bar button.off { opacity: .45; }

/* ---------- Accueil ---------- */
.home { display: flex; flex-direction: column; align-items: center; gap: 26px; padding-top: 4vh; text-align: center; }
.logo-icon { font-size: clamp(4rem, 12vw, 7rem); display: inline-block; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(0,0,0,.2)); }
@keyframes bob { 50% { transform: translateY(-12px) rotate(-6deg); } }
.logo h1 { font-size: clamp(3rem, 10vw, 5.5rem); letter-spacing: 1px; text-shadow: 0 6px 0 rgba(0,0,0,.25);
  background: linear-gradient(90deg, #ffd84d, #ff7eb3, #7afcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo p { font-size: 1.3rem; margin: 6px 0 0; color: rgba(255,255,255,.9); }
.menu { display: grid; gap: 14px; width: min(420px, 100%); }
.menu .btn { width: 100%; }
.home-foot { color: rgba(255,255,255,.7); font-size: .95rem; }
.cat-ribbon { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.cat-ribbon span { font-size: 1.8rem; animation: bob 3s ease-in-out infinite; }

/* ---------- Avatars et joueurs ---------- */
.avatar { --pc: #7c4dff; width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 2.2rem;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--pc) 55%, #fff), var(--pc)); box-shadow: 0 4px 0 rgba(0,0,0,.2), inset 0 -4px 0 rgba(0,0,0,.12); flex: none; }
.avatar.sm { width: 40px; height: 40px; font-size: 1.35rem; }
.avatar.lg { width: 110px; height: 110px; font-size: 4rem; }
.avatar.xl { width: 150px; height: 150px; font-size: 5.6rem; }
.players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.pcard { position: relative; border: 3px solid transparent; background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 16px 10px; text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.18); transition: transform .12s, border-color .12s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pcard:hover { transform: translateY(-3px); }
.pcard .name { font-weight: 700; font-size: 1.2rem; word-break: break-word; }
.pcard .meta { color: var(--muted); font-size: .9rem; }
.pcard.selected { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,201,60,.4), 0 6px 0 rgba(0,0,0,.18); }
.pcard .order { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #4a2a00; font-weight: 700; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.pcard.add { background: rgba(255,255,255,.12); color: #fff; border: 3px dashed rgba(255,255,255,.5); justify-content: center; min-height: 170px; font-size: 1.1rem; }
.pcard.add .plus { font-size: 2.6rem; }
.lvl-badge { display: inline-flex; gap: 4px; align-items: center; background: #f1ecff; color: #5b3fd1; border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 600; }

/* ---------- Choix chiffrés ---------- */
.count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; }
.count-btn { border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); padding: 18px 8px; box-shadow: 0 7px 0 rgba(0,0,0,.2); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .1s; }
.count-btn:hover { transform: translateY(-3px); }
.count-btn b { font-size: 2.6rem; line-height: 1; }
.count-btn small { color: var(--muted); }
.seg { display: inline-flex; background: rgba(0,0,0,.2); border-radius: 999px; padding: 5px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 1.05rem; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper b { font-size: 2.4rem; min-width: 56px; text-align: center; }
.opt-block { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: 22px; }
.opt-block label.lbl { font-size: 1.2rem; font-weight: 600; }
.opt-help { color: rgba(255,255,255,.8); max-width: 520px; line-height: 1.35; }

.cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cat-tile { border: 3px solid transparent; border-radius: 18px; padding: 14px 8px; color: #fff; text-align: center; font-weight: 600;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 6px 0 rgba(0,0,0,.22); transition: transform .12s, opacity .12s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cat-tile .ic { font-size: 2.4rem; }
.cat-tile.off { opacity: .45; filter: grayscale(.4); }
.cat-tile.on { border-color: #fff; transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 6px 0 rgba(0,0,0,.22); }
.estimate { text-align: center; color: rgba(255,255,255,.85); margin: 8px 0 18px; }

/* ---------- Tirage au sort ---------- */
.slot { width: min(380px, 90vw); aspect-ratio: 1.3; margin: 10px auto 22px; border-radius: 30px; display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, var(--t1, #7c4dff), var(--t2, #00e5ff)); box-shadow: var(--shadow), inset 0 -10px 0 rgba(0,0,0,.15); border: 6px solid #fff; }
.slot .ic { font-size: 6rem; line-height: 1; }
.slot .nm { font-size: 1.6rem; font-weight: 700; margin-top: 8px; }
.slot.landed { animation: land .5s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes land { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.drawn { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 50px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 4px 0 rgba(0,0,0,.2); animation: enter .4s; }
.chip .n { background: rgba(255,255,255,.3); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: .85rem; }

/* ---------- Annonce du tour ---------- */
.turn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 3vh; }
.theme-banner { display: inline-flex; align-items: center; gap: 12px; padding: 10px 24px; border-radius: 999px; font-size: 1.3rem; font-weight: 700;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 5px 0 rgba(0,0,0,.2); }
.theme-banner .ic { font-size: 2rem; }
.turn .avatar.xl { animation: pop .6s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
.turn h2 { font-size: clamp(2rem, 6vw, 3.4rem); text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.turn .info { color: rgba(255,255,255,.9); font-size: 1.1rem; }
.mini-board { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.mini-board .it { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); padding: 5px 12px 5px 5px; border-radius: 999px; font-weight: 600; }
.mini-board .it.cur { background: rgba(255,255,255,.3); }

/* ---------- Écran de question ---------- */
.q-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 110px; flex-wrap: wrap; }
.q-player { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; }
.q-progress { flex: 1; display: flex; gap: 5px; min-width: 140px; }
.q-progress i { flex: 1; height: 10px; border-radius: 6px; background: rgba(255,255,255,.2); }
.q-progress i.ok { background: var(--ok); }
.q-progress i.ko { background: var(--ko); }
.q-progress i.cur { background: #fff; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .5; } }
.q-score { font-weight: 700; font-size: 1.2rem; background: rgba(0,0,0,.2); padding: 6px 14px; border-radius: 999px; }
.streak-badge { font-weight: 700; background: linear-gradient(135deg, #ff8a00, #ff3d00); padding: 6px 12px; border-radius: 999px; animation: pop .4s; }

.q-stage { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: 18px; align-items: stretch; }
.q-visual { position: relative; border-radius: var(--radius); background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: var(--shadow), inset 0 -8px 0 rgba(0,0,0,.12);
  display: grid; place-items: center; min-height: 240px; overflow: hidden; border: 5px solid rgba(255,255,255,.85); }
.q-visual::before, .q-visual::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.15); }
.q-visual::before { width: 180px; height: 180px; top: -50px; left: -50px; }
.q-visual::after { width: 120px; height: 120px; bottom: -30px; right: -20px; }
.q-emoji { font-size: clamp(4rem, 10vw, 7rem); line-height: 1.1; text-align: center; z-index: 1; animation: emojiIn .6s cubic-bezier(.2, 1.6, .5, 1), float 3s ease-in-out .6s infinite; filter: drop-shadow(0 8px 0 rgba(0,0,0,.18)); word-break: break-all; }
@keyframes emojiIn { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@keyframes float { 50% { transform: translateY(-8px); } }
.q-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: rgba(0,0,0,.28); padding: 4px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.timer { position: absolute; right: 10px; top: 10px; width: 84px; height: 84px; z-index: 2; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 9; }
.timer .track { stroke: rgba(255,255,255,.3); }
.timer .bar { stroke: #fff; stroke-linecap: round; transition: stroke .3s; }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.timer.warn .bar { stroke: #ffd84d; }
.timer.danger .bar { stroke: #ff3b3b; }
.timer.danger { animation: shake .3s infinite; }
.timer.danger .num { color: #fff3; color: #fff; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

.q-right { display: flex; flex-direction: column; gap: 14px; }
.q-text { background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 22px 24px; font-size: clamp(1.3rem, 2.8vw, 1.9rem); font-weight: 600; line-height: 1.3;
  box-shadow: var(--shadow); position: relative; min-height: 110px; display: flex; align-items: center; gap: 12px; }
.q-text .speak { border: 0; background: #f1ecff; border-radius: 50%; width: 42px; height: 42px; flex: none; font-size: 1.2rem; margin-left: auto; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answers.n3 { grid-template-columns: 1fr; }
.ans { border: 0; border-radius: 18px; padding: 16px 18px; min-height: 76px; font-size: clamp(1.1rem, 2.3vw, 1.4rem); font-weight: 600; text-align: left; color: #fff;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 7px 0 rgba(0,0,0,.25); transition: transform .1s, box-shadow .1s, opacity .25s, filter .25s; animation: enter .35s backwards; }
.ans:nth-child(2) { animation-delay: .06s; } .ans:nth-child(3) { animation-delay: .12s; } .ans:nth-child(4) { animation-delay: .18s; }
.ans:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.08); }
.ans:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.ans .key { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.28); font-weight: 700; flex: none; }
.ans.a0 { background: var(--a0); } .ans.a1 { background: var(--a1); } .ans.a2 { background: var(--a2); color: #3d2600; } .ans.a3 { background: var(--a3); }
.ans:disabled { cursor: default; }
.ans.removed { opacity: .15; filter: grayscale(1); transform: scale(.96); }
.ans.dim { opacity: .35; filter: grayscale(.6); }
.ans.correct { background: var(--ok) !important; color: #fff !important; outline: 5px solid #fff; animation: bounce .5s; opacity: 1; filter: none; }
.ans.wrong { background: var(--ko) !important; color: #fff !important; animation: shake .4s 2; }
.ans.correct .key::after { content: ''; }
@keyframes bounce { 40% { transform: scale(1.06); } 70% { transform: scale(.98); } }
.q-tools { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.pts-pop { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 700; z-index: 40; pointer-events: none;
  color: #fff; text-shadow: 0 5px 0 rgba(0,0,0,.3); animation: ptsUp 1.2s ease-out forwards; }
@keyframes ptsUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

.feedback { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); z-index: 30;
  background: var(--card); color: var(--ink); border-radius: 26px; padding: 18px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: slideUp .35s cubic-bezier(.2, 1.3, .5, 1);
  border-top: 10px solid var(--ok); }
.feedback.ko { border-top-color: var(--ko); }
@keyframes slideUp { from { transform: translate(-50%, 120%); } to { transform: translate(-50%, 0); } }
.fb-title { font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-title .pts { margin-left: auto; color: #16a34a; }
.fb-answer { margin-top: 4px; font-size: 1.1rem; }
.fb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fb-chips span { background: #f1ecff; color: #5b3fd1; border-radius: 999px; padding: 3px 10px; font-size: .88rem; font-weight: 600; }
.fb-fact { margin-top: 12px; background: #fff7e0; border-radius: 16px; padding: 12px 14px; font-size: 1.05rem; line-height: 1.4; color: #4a3800; }
.fb-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.btn .autobar { position: absolute; left: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.25); border-radius: 0 0 0 999px; animation: autobar linear forwards; }
.btn.has-bar { position: relative; overflow: hidden; }
@keyframes autobar { from { width: 0; } to { width: 100%; } }

/* ---------- Pause ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(20, 8, 50, .75); backdrop-filter: blur(10px); display: grid; place-items: center; padding: 16px; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--card); color: var(--ink); border-radius: 28px; padding: 24px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--shadow); animation: enter .3s; }
.modal h3 { font-size: 1.6rem; margin-bottom: 14px; text-align: center; }
.modal .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.modal .btn.ghost { background: #ece8f7; color: var(--ink); }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-weight: 600; }
.field input[type=text] { border: 3px solid #e3ddf5; border-radius: 14px; padding: 12px 14px; font-size: 1.2rem; outline: none; }
.field input[type=text]:focus { border-color: #7c4dff; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.pick-grid button { border: 3px solid transparent; background: #f4f1fc; border-radius: 14px; font-size: 1.7rem; aspect-ratio: 1; padding: 0; }
.pick-grid button.on { border-color: #7c4dff; background: #e9e1ff; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #ddd; }
.colors button.on { box-shadow: 0 0 0 3px var(--ink); }
.age-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.age-row b { font-size: 2rem; min-width: 50px; text-align: center; }
.age-row .btn.small { background: #ece8f7; }
.lvl-preview { color: #5b3fd1; font-weight: 600; }
.preview-head { display: flex; justify-content: center; margin-bottom: 10px; }

/* ---------- Résultats ---------- */
.result { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.stars { font-size: 3.4rem; letter-spacing: 6px; }
.stars .off { filter: grayscale(1); opacity: .3; }
.big-num { font-size: clamp(3rem, 9vw, 5rem); font-weight: 700; line-height: 1; text-shadow: 0 5px 0 rgba(0,0,0,.25); }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stat { background: rgba(255,255,255,.14); border-radius: 18px; padding: 12px 18px; min-width: 120px; }
.stat b { display: block; font-size: 1.7rem; }
.stat small { color: rgba(255,255,255,.85); }

.board { width: min(640px, 100%); display: grid; gap: 10px; }
.board .line { display: flex; align-items: center; gap: 12px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 10px 16px 10px 10px; box-shadow: 0 5px 0 rgba(0,0,0,.18); animation: enter .4s backwards; }
.board .rank { font-size: 1.6rem; width: 40px; text-align: center; font-weight: 700; }
.board .nm { font-weight: 700; font-size: 1.15rem; min-width: 80px; text-align: left; }
.board .barwrap { flex: 1; height: 16px; background: #eee9fb; border-radius: 10px; overflow: hidden; }
.board .barfill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--c1), var(--c2)); width: 0; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.board .sc { font-weight: 700; font-size: 1.2rem; min-width: 70px; text-align: right; }
.board .plus { color: #16a34a; font-size: .9rem; font-weight: 600; min-width: 54px; text-align: right; }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 10px 0 6px; }
.podium .step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(170px, 30vw); }
.podium .block { width: 100%; border-radius: 18px 18px 6px 6px; display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; color: #fff; box-shadow: inset 0 -8px 0 rgba(0,0,0,.15); animation: grow .9s cubic-bezier(.2, 1.2, .4, 1) backwards; transform-origin: bottom; }
.podium .p1 .block { height: 160px; background: linear-gradient(#ffd84d, #f59e0b); animation-delay: .9s; }
.podium .p2 .block { height: 115px; background: linear-gradient(#e5e7eb, #9ca3af); animation-delay: .5s; }
.podium .p3 .block { height: 85px; background: linear-gradient(#fdba74, #c2410c); animation-delay: .2s; }
@keyframes grow { from { transform: scaleY(0); } }
.podium .who { font-weight: 700; font-size: 1.1rem; word-break: break-word; }
.podium .pts { font-size: .95rem; opacity: .9; }
.crown { font-size: 2.2rem; animation: bob 1.6s infinite; }

.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; width: 100%; }
.award { background: var(--card); color: var(--ink); border-radius: 18px; padding: 14px; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.award .ic { font-size: 2.2rem; }
.award b { display: block; }
.award small { color: var(--muted); }

.table-wrap { width: 100%; overflow-x: auto; border-radius: 18px; }
table.detail { width: 100%; border-collapse: collapse; background: var(--card); color: var(--ink); min-width: 520px; }
table.detail th, table.detail td { padding: 10px 10px; text-align: center; border-bottom: 1px solid #eee9fb; }
table.detail th { background: #f4f1fc; font-size: .95rem; }
table.detail td.pl { text-align: left; font-weight: 700; white-space: nowrap; }
table.detail td small { display: block; color: var(--muted); font-size: .8rem; }
table.detail td.tot { font-weight: 700; font-size: 1.15rem; background: #fff8e1; }
table.detail tr.win td { background: #fffbeb; }

/* ---------- Profil ---------- */
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.profile-head h2 { font-size: 2.2rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: var(--card); color: var(--ink); border-radius: 18px; padding: 14px; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.tile b { display: block; font-size: 1.8rem; }
.tile small { color: var(--muted); }
.catstats { display: grid; gap: 8px; }
.catstat { display: grid; grid-template-columns: 44px 1fr 2fr auto; gap: 10px; align-items: center; background: var(--card); color: var(--ink); border-radius: 14px; padding: 8px 12px; }
.catstat .ic { font-size: 1.6rem; text-align: center; }
.catstat .bar { height: 14px; background: #eee9fb; border-radius: 8px; overflow: hidden; }
.catstat .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--t1), var(--t2)); border-radius: 8px; }
.catstat .val { font-weight: 700; min-width: 120px; text-align: right; font-size: .95rem; }
.catstat .nm { font-weight: 600; }
.trend { font-size: .8rem; color: var(--muted); }
.spark { width: 100%; height: 110px; }
.section-title { font-size: 1.35rem; margin: 22px 0 10px; }

.hist-list { display: grid; gap: 10px; }
.hist { display: flex; align-items: center; gap: 12px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 12px 16px; box-shadow: 0 5px 0 rgba(0,0,0,.15); border: 0; text-align: left; width: 100%; flex-wrap: wrap; }
.hist .date { color: var(--muted); font-size: .9rem; min-width: 120px; }
.hist .cats { font-size: 1.3rem; }
.hist .who { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.hist .who span { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.empty { text-align: center; padding: 40px; color: rgba(255,255,255,.85); font-size: 1.15rem; }

/* ---------- Réglages ---------- */
.settings { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
.set { display: flex; align-items: center; gap: 14px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 14px 18px; flex-wrap: wrap; }
.set .txt { flex: 1; min-width: 200px; }
.set .txt b { display: block; font-size: 1.1rem; }
.set .txt small { color: var(--muted); }
.set .seg { background: #ece8f7; }
.set .seg button { color: var(--ink); }
.set .seg button.on { background: #7c4dff; color: #fff; }
.switch { width: 62px; height: 34px; border-radius: 999px; border: 0; background: #d6d0ea; position: relative; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: left .2s; }
.switch.on { background: #22c55e; }
.switch.on::after { left: 32px; }
input[type=range] { accent-color: #7c4dff; width: 160px; }
.voice-sel { font: inherit; font-size: 1rem; padding: 8px 12px; border: 3px solid #e3ddf5; border-radius: 12px; background: #fff; color: var(--ink); max-width: 260px; }
.rate-val { min-width: 54px; text-align: center; }

.rules { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.rules .card h3 { margin-bottom: 6px; font-size: 1.25rem; }
.rules .card p, .rules .card li { line-height: 1.5; }

#toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 90; pointer-events: none; }
#toast div { background: #fff; color: var(--ink); padding: 10px 20px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 600; margin-bottom: 8px; animation: enter .3s; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; }

/* ---------- Mode de jeu et équipes ---------- */
.avatar.xs { width: 28px; height: 28px; font-size: 1rem; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
/* Cadres d'avatar gagnés avec le rang */
.avatar.frame-silver { box-shadow: 0 0 0 4px #d7dce4, 0 0 0 7px #8f99a8, 0 4px 0 7px rgba(0,0,0,.2); }
.avatar.frame-gold { box-shadow: 0 0 0 4px #ffe58a, 0 0 0 7px #e0a400, 0 0 18px 6px rgba(255,201,60,.45); }
.avatar.frame-rainbow { position: relative; isolation: isolate; box-shadow: 0 0 22px 6px rgba(255,255,255,.35); }
.avatar.frame-rainbow::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#ff5a5f, #ffb020, #ffe066, #22c55e, #3d8bfd, #8b5cf6, #ff5a5f); animation: spin 4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar.sm.frame-silver, .avatar.xs.frame-silver, .avatar.sm.frame-gold, .avatar.xs.frame-gold { box-shadow: 0 0 0 3px #e0a400; }
.pick-grid button.locked { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 820px; margin: 20px auto 0; }
.mode-card { border: 4px solid transparent; border-radius: 26px; background: var(--card); color: var(--ink); padding: 26px 20px; box-shadow: 0 8px 0 rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: transform .12s; }
.mode-card:hover { transform: translateY(-4px); }
.mode-card.on { border-color: var(--gold); }
.mode-card .ic { font-size: 3.6rem; }
.mode-card b { font-size: 1.5rem; }
.mode-card small { color: var(--muted); font-size: 1rem; line-height: 1.4; }
.teams-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.team-col { background: var(--card); color: var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 6px 0 rgba(0,0,0,.2); border-top: 10px solid var(--tc); }
.team-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: color-mix(in srgb, var(--tc) 14%, #fff); }
.team-head .emoji { font-size: 1.5rem; }
.team-name { flex: 1; min-width: 0; border: 2px dashed color-mix(in srgb, var(--tc) 50%, #fff); background: transparent; border-radius: 12px; padding: 6px 10px; font-size: 1.25rem; font-weight: 700; color: var(--ink); outline: none; }
.team-name:focus { border-style: solid; background: #fff; }
.team-members { display: grid; gap: 8px; padding: 12px; }
.tmember { display: flex; align-items: center; gap: 10px; border: 0; background: #f6f3ff; border-radius: 14px; padding: 8px 12px; text-align: left; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.tmember:hover { background: #ece6ff; }
.tmember small { margin-left: auto; color: var(--muted); font-weight: 500; }
.team-empty { color: var(--muted); text-align: center; margin: 10px 0; }
.vs { align-self: center; justify-self: center; font-weight: 700; font-size: 1.6rem; background: var(--gold); color: #4a2a00; border-radius: 50%; width: 58px; height: 58px; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.team-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tc); color: #fff; padding: 5px 14px; border-radius: 999px; font-weight: 700; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.mini-board .it.team { padding: 6px 14px; background: color-mix(in srgb, var(--tc) 55%, transparent); }
.mini-board .it.team.cur { outline: 3px solid #fff; }
.board .team-line { border-left: 10px solid var(--tc); }
.board .team-line .barfill { background: var(--tc); }
.team-avs { display: flex; gap: 2px; }
.team-final { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.tf-card { position: relative; background: var(--card); color: var(--ink); border-radius: 24px; padding: 18px 22px; min-width: 220px; text-align: center; border-top: 10px solid var(--tc); box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.tf-card.win { transform: scale(1.06); box-shadow: 0 0 0 5px var(--gold), 0 8px 0 rgba(0,0,0,.2); }
.tf-card .crown { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); }
.tf-name { font-size: 1.4rem; font-weight: 700; }
.tf-avs { display: flex; justify-content: center; gap: 4px; margin: 10px 0; }
.tf-score { font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--tc); }
.tf-card small { color: var(--muted); }

/* ---------- Téléphones-manettes ---------- */
.phones { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 16px; align-items: start; }
.phones-qr { display: grid; justify-items: center; gap: 10px; text-align: center; }
.qr { width: min(320px, 100%); background: #fff; border-radius: 16px; padding: 8px; }
.qr svg { width: 100%; height: auto; display: block; }
.join-code { font-size: 2.4rem; font-weight: 700; letter-spacing: 4px; color: var(--ink); }
.join-url { word-break: break-all; }
.center-txt { text-align: center; }
.phones-side { display: grid; gap: 10px; }
.phones-side h3 { margin: 4px 0 0; font-size: 1.2rem; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; line-height: 1.4; }
.phone-line { display: flex; align-items: center; gap: 10px; background: #f4f1fc; border-radius: 14px; padding: 8px 12px; }
.phone-line span:nth-child(2) { flex: 1; }
.btn.ghost-dark { background: #ece8f7; color: var(--ink); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
@media (max-width: 820px) { .phones { grid-template-columns: 1fr; } }

/* ---------- Défis de la semaine et objectifs ---------- */
.weekly { width: min(560px, 100%); background: var(--card); color: var(--ink); border-radius: 22px; padding: 14px 18px; text-align: left; box-shadow: 0 6px 0 rgba(0,0,0,.18); display: grid; gap: 8px; }
.weekly-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.weekly-head b { font-size: 1.15rem; }
.weekly-head small, .weekly-foot { color: var(--muted); }
.weekly-row { display: grid; grid-template-columns: 28px 1fr 90px 48px; gap: 8px; align-items: center; font-size: .98rem; }
.weekly-row.done .weekly-txt { color: #16a34a; font-weight: 600; }
.weekly-bar, .goal-bar { height: 10px; background: #eee9fb; border-radius: 6px; overflow: hidden; }
.weekly-bar i, .goal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #84cc16); border-radius: 6px; }
.weekly-val { text-align: right; font-weight: 700; font-size: .9rem; }
.nb-player.weekly-done { background: #ecfdf5; }
.goal-card { background: var(--card); color: var(--ink); border-radius: 20px; padding: 14px 18px; margin-bottom: 14px; display: grid; gap: 8px; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.goal-card .goal-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.goal-list { display: grid; gap: 8px; }
.goal-list button { text-align: left; border: 0; background: #f4f1fc; border-radius: 14px; padding: 12px 14px; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.goal-list button:hover { background: #ece6ff; }
.rewards-next { display: flex; gap: 10px; flex-wrap: wrap; }
.rewards-next span { background: #f4f1fc; color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: .9rem; }
@media (max-width: 520px) { .weekly-row { grid-template-columns: 26px 1fr 54px; } .weekly-bar { display: none; } }

/* ---------- Badges et rangs ---------- */
.rank-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #ffd84d, #ff9a3c); color: #4a2a00; border-radius: 22px; padding: 14px 20px; margin-bottom: 14px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.rank-ic { font-size: 3rem; }
.rank-info { flex: 1; }
.rank-info b { font-size: 1.5rem; display: block; }
.xpbar { height: 14px; background: rgba(255,255,255,.55); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #7c4dff, #ec4899); border-radius: 8px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { background: var(--card); color: var(--ink); border-radius: 18px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.badge .bi { font-size: 2.2rem; }
.badge b { font-size: .98rem; }
.badge small { color: var(--muted); font-size: .8rem; line-height: 1.25; }
.badge small.date { color: #16a34a; font-weight: 600; }
.badge.got { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 rgba(0,0,0,.15); }
.badge.locked { opacity: .55; }
.badge.locked .bi { filter: grayscale(1); opacity: .5; }
.new-badges { display: grid; gap: 10px; width: 100%; }
.nb-player { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 10px 14px; animation: enter .5s backwards; }
.rankup { background: #ede7ff; color: #5b3fd1; border-radius: 999px; padding: 4px 12px; font-weight: 700; }
.badge-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff7e0; border: 2px solid var(--gold); border-radius: 999px; padding: 4px 12px; font-weight: 600; animation: pop .5s backwards; }

/* ---------- Questions photo ---------- */
.q-stage.has-photo { grid-template-columns: minmax(260px, 46%) 1fr; }
.q-visual.photo { background: #1d1442; min-height: 300px; }
.q-visual.photo::before, .q-visual.photo::after { display: none; }
.q-photo { width: 100%; height: 100%; max-height: 420px; object-fit: contain; cursor: zoom-in; animation: fade .4s; -webkit-user-drag: none; }
.zoom-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(10, 5, 30, .92); display: grid; place-items: center; padding: 16px; cursor: zoom-out; animation: fade .2s; }
.zoom-overlay img { max-width: 100%; max-height: calc(100vh - 70px); object-fit: contain; border-radius: 12px; box-shadow: var(--shadow); }
.zoom-overlay span { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); }
.fb-credit { margin-top: 8px; font-size: .8rem; color: var(--muted); }
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.credit { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; font-size: .78rem; line-height: 1.25; }
.credit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #eee; }

/* ---------- Tablette / iPad ---------- */
button, .pcard, .ans { touch-action: manipulation; }
body { -webkit-touch-callout: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app { min-height: 100dvh; }
#sound-bar { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }

/* ---------- Navigation à la télécommande / au clavier ---------- */
body:not(.keynav) :focus { outline: none; }
body.keynav :focus { outline: 5px solid var(--gold); outline-offset: 4px; }
body.keynav .ans:focus, body.keynav .pcard:focus, body.keynav .count-btn:focus, body.keynav .mode-card:focus,
body.keynav .cat-tile:focus, body.keynav .tmember:focus, body.keynav .hist:focus, body.keynav .btn:focus {
  transform: scale(1.05); box-shadow: 0 0 0 9px rgba(255, 201, 60, .45), 0 7px 0 rgba(0, 0, 0, .25); z-index: 1; position: relative;
}
body.keynav .switch:focus, body.keynav .seg button:focus { box-shadow: 0 0 0 6px rgba(255, 201, 60, .6); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .q-stage, .q-stage.has-photo { grid-template-columns: 1fr; }
  .q-visual.photo { min-height: 220px; }
  .q-photo { max-height: 280px; }
  .teams-grid { grid-template-columns: 1fr; }
  .q-visual { min-height: 150px; }
  .q-emoji { font-size: 4.2rem; }
  .timer { width: 70px; height: 70px; }
  .answers { grid-template-columns: 1fr; }
  .catstat { grid-template-columns: 36px 1fr auto; }
  .catstat .bar { grid-column: 1 / -1; order: 5; }
}
@media (max-width: 520px) {
  #app { padding: 12px 12px 30px; }
  .topbar, .q-top { padding-right: 100px; }
  .btn.big { font-size: 1.2rem; padding: 16px 24px; }
  .ans { min-height: 60px; padding: 12px 14px; }
  .q-text { padding: 16px; min-height: 80px; }
  .podium .block { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}