/* ===================================================================
   MÉGA CULTURE G · PARTY
   Direction : "Plateau TV / arcade" néo-brutaliste — blocs vifs,
   bordures épaisses, ombres dures décalées, type Righteous.
   (Identité forte, anti-template. Tous les noms de classes conservés.)
   =================================================================== */

:root{
  /* couleurs */
  --ink:#15132b;            /* quasi-noir : texte + bordures */
  --paper:#fff3da;          /* fond crème */
  --paper-dot:rgba(21,19,43,.10);
  --surface:#fffdf6;        /* surface carte */
  --blue:#2f6bff; --red:#ff4757; --yellow:#ffc400; --green:#16b85a;
  --pink:#ff5ea8; --purple:#8b5cf6; --teal:#19c8d6; --orange:#ff8a3d;
  --muted:#6b6880;
  /* réponses (4 blocs façon plateau) */
  --c1:#ff4757; --c2:#2f6bff; --c3:#ffc400; --c4:#16b85a;
  /* système brutaliste */
  --bd:3px solid var(--ink);
  --sh:5px 5px 0 var(--ink);
  --sh-lg:8px 8px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --radius:16px; --radius-sm:10px;
  --font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Righteous','Poppins',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink); font-weight:500;
  background-color:var(--paper);
  background-image:radial-gradient(var(--paper-dot) 2.2px, transparent 2.2px);
  background-size:24px 24px;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

#app{max-width:1120px;margin:0 auto;padding:16px clamp(12px,3vw,28px) 70px}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;letter-spacing:.5px}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font)}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- Barre du haut ---------- */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 0 20px}
.logo{font-family:var(--display);font-size:clamp(22px,3.6vw,34px);display:flex;align-items:center;gap:10px;
  color:#fff;cursor:pointer;background:#4e9a2f;border:var(--bd);box-shadow:var(--sh-sm);
  padding:6px 16px 6px 10px;border-radius:14px;transform:rotate(-1.5deg);transition:transform .12s}
.logo:hover{transform:rotate(0deg) scale(1.02)}
.logo .kiwi{width:34px;height:34px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.topbar .spacer{flex:1}
.icon-btn{background:var(--surface);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;
  width:46px;height:46px;display:grid;place-items:center;font-size:20px;transition:transform .1s,box-shadow .1s}
.icon-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.icon-btn:active{transform:translate(0,0);box-shadow:var(--sh-sm)}

/* ---------- Hub ---------- */
.hub-hero{text-align:center;margin:6px 0 22px}
.hub-hero h1{font-size:clamp(34px,7vw,68px);color:var(--ink);text-shadow:4px 4px 0 var(--yellow),7px 7px 0 var(--ink)}
.hub-hero p{font-size:clamp(15px,2.2vw,18px);margin-top:18px;font-weight:600;color:var(--ink)}
.hub-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pill{background:var(--surface);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);border-radius:999px;
  padding:7px 16px;font-weight:700;font-size:14px}

.section-title{font-family:var(--display);font-size:22px;margin:26px 4px 14px;display:flex;align-items:center;gap:10px}
.section-title::after{content:"";flex:1;height:3px;background:var(--ink);border-radius:2px;opacity:.25}

/* grandes cartes "features" (Défi du jour / Mode soirée) */
.features{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.features{grid-template-columns:1fr}}
.home-feature{border:var(--bd);box-shadow:var(--sh);border-radius:var(--radius);padding:22px 22px;cursor:pointer;
  position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s;color:var(--ink)}
.home-feature:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.home-feature:active{transform:translate(0,0);box-shadow:var(--sh-sm)}
.home-feature.daily{background:var(--yellow)}
.home-feature.party{background:var(--pink)}
.home-feature .ico{font-size:40px}
.home-feature h3{font-size:26px;margin:8px 0 4px}
.home-feature p{font-weight:600;font-size:14px;max-width:34ch}
.home-feature .corner{position:absolute;top:12px;right:14px;background:var(--ink);color:#fff;font-weight:800;
  font-size:11px;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.6px}

/* grille de jeux */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.card{background:var(--surface);border:var(--bd);border-radius:var(--radius);padding:20px 18px;position:relative;
  box-shadow:var(--sh);cursor:pointer;transition:transform .12s,box-shadow .12s;overflow:hidden}
.card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-lg)}
.card:active{transform:translate(0,0);box-shadow:var(--sh-sm)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:var(--accent,var(--blue));border-bottom:var(--bd)}
.card .emoji{font-size:40px;display:grid;place-items:center;width:60px;height:60px;margin:14px 0 10px;
  background:var(--accent,var(--blue));border:var(--bd);border-radius:14px;box-shadow:var(--sh-sm)}
.card h3{font-size:20px;margin-bottom:6px;letter-spacing:.3px}
.card p{color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.4;min-height:38px}
.card .best{margin-top:12px;font-weight:800;font-size:12.5px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:3px 10px}
.card .tag{position:absolute;top:14px;right:-30px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;
  padding:4px 34px;transform:rotate(38deg);text-transform:uppercase;letter-spacing:.5px}

/* ---------- Vue jeu ---------- */
.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.back-btn{background:var(--surface);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;
  padding:10px 16px;font-weight:800;display:flex;align-items:center;gap:6px;transition:transform .1s,box-shadow .1s;font-size:15px}
.back-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.back-btn:active{transform:translate(0,0);box-shadow:var(--sh-sm)}
.game-head h2{font-size:clamp(22px,3.4vw,32px);flex:1}
.game-head .best-chip{background:var(--yellow);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);
  padding:8px 14px;border-radius:12px;font-weight:800;font-size:14px}

.panel{background:var(--surface);border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh);padding:clamp(18px,3vw,32px)}
.panel.center{text-align:center}

/* ---------- HUD ---------- */
.hud{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.hud .stat{background:var(--surface);border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;padding:9px 14px;
  font-weight:700;display:flex;align-items:center;gap:7px;font-size:14px}
.hud .stat b{font-family:var(--display);color:var(--ink);font-size:18px;font-weight:400;font-variant-numeric:tabular-nums}
.hud .spacer{flex:1}
.lives{font-size:20px;letter-spacing:2px}

/* barre de temps */
.timebar{height:18px;background:var(--surface);border:var(--bd);border-radius:999px;overflow:hidden;margin-bottom:18px;
  box-shadow:var(--sh-sm);padding:0}
.timebar>i{display:block;height:100%;width:100%;background:var(--green);transition:width .25s linear,background .3s}
.timebar.danger>i{background:var(--red)}
.timebar.danger{animation:nudge .5s infinite}
@keyframes nudge{50%{transform:translateX(-1px)}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--bd);border-radius:14px;
  padding:13px 22px;font-weight:800;font-size:16px;color:var(--ink);background:var(--surface);box-shadow:var(--sh);
  transition:transform .1s,box-shadow .1s,filter .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--sh-sm)}
.btn.lg{padding:17px 32px;font-size:19px}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--surface)}
.btn.green{background:var(--green);color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.blue{background:var(--blue);color:#fff}
.btn.amber{background:var(--yellow);color:var(--ink)}
.btn.pink{background:var(--pink);color:var(--ink)}
.btn.purple{background:var(--purple);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--sh-sm)}
/* état sélectionné (chips de catégorie/mode) */
.btn.sel{background:var(--ink);color:#fff}

/* QCM : 4 blocs */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:560px){.choices{grid-template-columns:1fr}}
.choice{display:flex;align-items:center;gap:12px;text-align:left;padding:18px 18px;border:var(--bd);border-radius:14px;
  color:#fff;font-weight:800;font-size:17px;box-shadow:var(--sh);transition:transform .1s,box-shadow .1s;min-height:66px}
.choice:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.choice:active:not(:disabled){transform:translate(2px,2px);box-shadow:var(--sh-sm)}
.choice .sym{width:32px;height:32px;flex:none;display:grid;place-items:center;border:2px solid var(--ink);border-radius:8px;
  background:rgba(255,255,255,.85);color:var(--ink);font-size:15px}
.choice.c1{background:var(--c1)} .choice.c2{background:var(--c2)}
.choice.c3{background:var(--c3);color:var(--ink)}
.choice.c4{background:var(--c4)}
.choice.correct{background:var(--green)!important;color:#fff!important;box-shadow:0 0 0 4px var(--ink),var(--sh);animation:pop .3s}
.choice.correct .sym{background:#fff;color:var(--green)}
.choice.wrong{background:var(--red)!important;color:#fff!important}
.choice.wrong .sym{background:#fff;color:var(--red)}
.choice.dim{opacity:.4}
.choice:disabled{cursor:default}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* encadré d'explication / solution */
.callout{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--surface);border:var(--bd);
  box-shadow:var(--sh-sm);border-radius:14px;padding:14px 16px;margin:16px auto 0;max-width:560px;font-weight:600;
  line-height:1.45;animation:slidein .25s}
.callout .ic{font-size:24px;line-height:1.1;flex:none}
.callout.ok{background:#eafaf1}
.callout.no{background:#ffeef0}
.callout b{font-weight:800}

/* ---------- Inputs ---------- */
.field{width:100%;padding:14px 16px;border:var(--bd);border-radius:12px;font-size:18px;font-weight:700;
  outline:none;background:var(--surface);box-shadow:inset 2px 2px 0 rgba(21,19,43,.08);transition:.12s}
.field:focus{box-shadow:var(--sh-sm)}
.field.big{font-size:24px;text-align:center;letter-spacing:1px}

/* ---------- Gros texte / questions ---------- */
.question{font-family:var(--display);font-size:clamp(22px,3.4vw,32px);font-weight:400;text-align:center;
  line-height:1.2;margin:8px 0}
.subtle{color:var(--muted);font-weight:600;text-align:center}
.cat-badge{display:inline-block;background:var(--blue);color:#fff;font-weight:800;padding:6px 14px;border:var(--bd);
  box-shadow:var(--sh-sm);border-radius:999px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;
  transform:rotate(-1.5deg)}

/* ---------- Écran de fin ---------- */
.result{text-align:center;padding:10px}
.result .big-score{font-family:var(--display);font-size:74px;color:var(--ink);line-height:1;display:inline-block;
  background:var(--yellow);border:var(--bd);box-shadow:var(--sh);border-radius:18px;padding:8px 28px;transform:rotate(-2deg);
  font-variant-numeric:tabular-nums}
.grade{font-size:24px;font-weight:800;margin:18px 0 4px}
.result .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.newbest{display:inline-block;background:var(--green);color:#fff;font-weight:800;padding:7px 16px;border:var(--bd);
  box-shadow:var(--sh-sm);border-radius:999px;margin-top:14px;transform:rotate(1.5deg);animation:pop .4s}

/* ---------- Toast ---------- */
.cg-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
  padding:13px 22px;border:var(--bd);border-color:#000;box-shadow:var(--sh);border-radius:12px;font-weight:800;opacity:0;
  transition:.25s;z-index:999;max-width:90vw}
.cg-toast.show{opacity:1;transform:translate(-50%,0)}
.cg-toast-good{background:var(--green)}
.cg-toast-bad{background:var(--red)}
.cg-toast-info{background:var(--blue)}

/* ---------- Modal ---------- */
.cg-overlay{position:fixed;inset:0;background:rgba(21,19,43,.55);display:grid;place-items:center;z-index:900;
  padding:20px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.cg-modal{background:var(--surface);border:var(--bd);border-radius:var(--radius);padding:26px;max-width:540px;width:100%;
  box-shadow:var(--sh-lg);animation:pop .25s}
.cg-modal h3{font-size:26px;margin-bottom:10px}
.cg-modal p{color:var(--muted);font-weight:600;line-height:1.5}

/* ---------- Tuiles (Motus) ---------- */
.tiles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.tile{width:54px;height:60px;border:var(--bd);border-radius:10px;display:grid;place-items:center;font-family:var(--display);
  font-weight:400;font-size:30px;text-transform:uppercase;background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.tile.ok{background:var(--green);color:#fff}
.tile.mis{background:var(--yellow);color:var(--ink)}
.tile.no{background:#9b97ad;color:#fff}
.tile.empty{color:transparent}

/* clavier */
.kbd{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:16px}
.kbd .row{display:flex;gap:5px}
.kbd button{min-width:34px;height:48px;border:2px solid var(--ink);border-radius:8px;background:var(--surface);font-weight:800;
  font-size:15px;color:var(--ink);padding:0 6px;box-shadow:2px 2px 0 var(--ink);transition:.08s}
.kbd button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.kbd button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.kbd button.ok{background:var(--green);color:#fff}
.kbd button.mis{background:var(--yellow);color:var(--ink)}
.kbd button.no{background:#9b97ad;color:#fff}
.kbd button.wide{min-width:60px;font-size:13px}

/* pendu */
.hangword{font-family:var(--display);font-size:clamp(28px,6vw,46px);letter-spacing:8px;text-align:center;margin:10px 0}
.hang-svg{display:block;margin:0 auto;max-width:220px}

/* drapeaux / geo */
.flag-img{width:min(300px,80%);border:var(--bd);border-radius:12px;box-shadow:var(--sh);display:block;margin:6px auto 4px}

/* jeux photo (Wikipédia) */
.photo-wrap{background:#fff;border:var(--bd);box-shadow:var(--sh);border-radius:14px;padding:10px;margin:10px auto;
  max-width:380px;min-height:210px;display:flex;align-items:center;justify-content:center}
.photo-img{max-width:100%;max-height:300px;object-fit:contain;display:block;border-radius:6px}

/* timeline */
.tl-card{background:var(--surface);border:var(--bd);box-shadow:var(--sh-sm);border-radius:14px;padding:18px;text-align:center;
  font-weight:800;font-size:18px;margin:10px auto;max-width:460px}

/* petit bac */
.pb-row{display:grid;grid-template-columns:1fr 2fr;gap:10px;align-items:center;margin-bottom:10px}
.pb-row label{font-weight:800}

/* pictionary */
.draw-wrap{position:relative;background:#fff;border:var(--bd);border-radius:14px;box-shadow:var(--sh);overflow:hidden;touch-action:none}
canvas.board{display:block;width:100%;background:#fff;cursor:crosshair}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.swatch{width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;box-shadow:var(--sh-sm);cursor:pointer}
.swatch.sel{box-shadow:0 0 0 3px var(--blue),var(--sh-sm)}

/* indices (qui suis-je) */
.clue{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);border-radius:10px;padding:12px 16px;margin:8px 0;
  font-weight:700;text-align:left;animation:slidein .3s}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}}

/* blindtest */
.bt-art{width:200px;height:200px;border:var(--bd);border-radius:16px;box-shadow:var(--sh);margin:10px auto;display:block;object-fit:cover}
.bt-cover{width:200px;height:200px;border:var(--bd);border-radius:16px;background:var(--purple);color:#fff;margin:10px auto;
  display:grid;place-items:center;font-size:70px;box-shadow:var(--sh)}

/* anagrammes */
.anagram{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.anagram .lt{width:48px;height:54px;border:var(--bd);border-radius:10px;background:var(--blue);color:#fff;display:grid;
  place-items:center;font-family:var(--display);font-size:28px;box-shadow:var(--sh-sm);text-transform:uppercase}

/* plus ou moins */
.pm-duo{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:14px 0}
@media(max-width:560px){.pm-duo{grid-template-columns:1fr;}}
.pm-card{background:var(--surface);border:var(--bd);box-shadow:var(--sh);border-radius:14px;padding:18px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:6px}
.pm-card .lbl{font-weight:800;font-size:18px}
.pm-card .val{font-family:var(--display);font-size:30px}
.pm-vs{display:grid;place-items:center;font-family:var(--display);font-size:24px;background:var(--ink);color:#fff;
  border-radius:50%;width:54px;height:54px;align-self:center;justify-self:center}

/* juste prix */
.price-big{font-family:var(--display);font-size:54px;background:var(--green);color:#fff;border:var(--bd);box-shadow:var(--sh);
  border-radius:16px;padding:8px 24px;display:inline-block;transform:rotate(-1.5deg);font-variant-numeric:tabular-nums}

/* profil / XP */
.profilebar{display:flex;align-items:center;gap:14px;background:var(--surface);border:var(--bd);box-shadow:var(--sh-sm);
  border-radius:14px;padding:12px 16px;margin-bottom:18px;flex-wrap:wrap}
.level-badge{font-family:var(--display);background:var(--purple);color:#fff;border:var(--bd);box-shadow:var(--sh-sm);
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:22px;line-height:1}
.xpwrap{flex:1;min-width:160px}
.xpwrap .lab{font-weight:700;font-size:13px;display:flex;justify-content:space-between;margin-bottom:4px}
.xpbar{height:14px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.xpbar>i{display:block;height:100%;background:var(--yellow);transition:width .4s}
.streak-chip{background:var(--orange);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);border-radius:999px;
  padding:6px 12px;font-weight:800;font-size:13px}

/* joueurs (soirée) */
.players{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.player-chip{display:flex;align-items:center;gap:8px;border:var(--bd);box-shadow:var(--sh-sm);border-radius:999px;
  padding:6px 8px 6px 14px;font-weight:800;background:var(--surface)}
.player-chip .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink)}
.player-chip .x{background:var(--ink);color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px;cursor:pointer}

/* podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:24px auto;max-width:520px}
.podium-step{flex:1;border:var(--bd);box-shadow:var(--sh);border-radius:14px 14px 0 0;padding:14px 8px;text-align:center;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.podium-step .who{font-weight:800;font-size:15px}
.podium-step .pts{font-family:var(--display);font-size:20px}
.podium-step .medal{font-size:30px}
.podium-step.p1{background:var(--yellow);height:200px}
.podium-step.p2{background:#e7e3f0;height:160px}
.podium-step.p3{background:var(--orange);height:130px}

/* succès */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ach{border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;padding:14px;text-align:center;background:var(--surface)}
.ach.locked{opacity:.5;filter:grayscale(.7)}
.ach .ico{font-size:24px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;border:2px solid var(--ink);line-height:1;text-align:center}
.ach.bronze .ico{background:#e3a877}
.ach.silver .ico{background:#d4dbe2}
.ach.gold .ico{background:#ffd667}
.ach.locked .ico{background:transparent;border-style:dashed}
.ach.gold{box-shadow:var(--sh-sm),0 0 0 2px #ffd667 inset}
.sel-av{box-shadow:0 0 0 3px var(--blue),var(--sh-sm)!important;transform:translate(-1px,-1px)}
.ach .name{font-weight:800;font-size:14px;margin-top:6px}
.ach .desc{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}

/* part. : partage défi du jour */
.share-box{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;padding:14px;
  font-family:'Poppins',monospace;font-weight:700;white-space:pre-wrap;text-align:center;margin:14px 0;line-height:1.6}

/* divers */
/* chat (mode soirée en ligne) */
.chat{margin:10px auto 0;max-width:540px;text-align:left}
.chat-msgs{max-height:170px;overflow-y:auto;background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);
  border-radius:12px;padding:10px 12px;font-weight:600;font-size:14px;min-height:54px}
.chat-msg{margin:3px 0;line-height:1.4}
.chat-msg b{color:var(--purple)}
.chat-form{display:flex;gap:8px;margin-top:8px}
.chat-form .field{flex:1}

.row{display:flex;gap:12px;flex-wrap:wrap}
.row.center{justify-content:center;align-items:center}
.mt{margin-top:16px}.mt2{margin-top:24px}
.hidden{display:none!important}
.spin{width:42px;height:42px;border:5px solid var(--paper);border-top-color:var(--ink);border-radius:50%;
  animation:rot 1s linear infinite;margin:24px auto}
@keyframes rot{to{transform:rotate(360deg)}}
.empty-msg{text-align:center;color:var(--muted);font-weight:700;padding:30px}

/* curseur de volume */
.volume{display:flex;align-items:center;gap:10px;justify-content:center;margin:12px auto;max-width:340px;
  background:var(--surface);border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;padding:8px 14px}
.volume input[type=range]{flex:1;accent-color:var(--blue);height:6px}
.volume .vlabel{font-weight:800;font-size:14px;min-width:46px;text-align:right;font-variant-numeric:tabular-nums}

.shake{animation:shk .32s}
@keyframes shk{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* GeoGuessr plein écran */
.gg-fs{position:fixed;inset:0;z-index:1000;background:#0b0b14;overflow:hidden}
.gg-pano{position:absolute;inset:0;width:100%;height:100%}
.gg-top{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:10px;align-items:center;z-index:6;pointer-events:none}
.gg-top>*{pointer-events:auto}
.gg-chip{background:var(--surface);border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;padding:8px 14px;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.gg-spacer{flex:1}
.gg-map{position:absolute;right:14px;bottom:74px;width:300px;height:210px;z-index:7;border:var(--bd);box-shadow:var(--sh);
  border-radius:12px;overflow:hidden;background:#dfe6ee;transition:width .22s ease,height .22s ease;opacity:.92}
.gg-map:hover,.gg-map.big{width:min(72vw,620px);height:min(62vh,460px);opacity:1}
.gg-actions{position:absolute;right:14px;bottom:16px;z-index:8;display:flex;gap:8px}
.gg-result{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:8;background:var(--ink);color:#fff;
  border:var(--bd);box-shadow:var(--sh);border-radius:12px;padding:10px 18px;font-weight:800;max-width:60vw;text-align:center}
.gg-loading{position:absolute;inset:0;display:grid;place-items:center;z-index:9;background:rgba(11,11,20,.65);color:#fff;font-weight:800;font-size:18px}
@media(max-width:560px){
  .gg-map{width:170px;height:124px;bottom:70px}
  .gg-map:hover,.gg-map.big{width:94vw;height:52vh}
  .gg-result{max-width:90vw;font-size:13px}
}

@media(max-width:560px){
  .hud .stat{padding:8px 11px;font-size:13px}
  .panel{padding:18px}
  .card .tag{right:-34px}
}

/* Micro-Mania (WarioWare) */
.mg-arena{position:relative;height:300px;border:var(--bd);box-shadow:var(--sh);border-radius:18px;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;overflow:hidden;padding:18px;box-sizing:border-box}
.mg-cmd{font-family:var(--display);font-size:clamp(30px,7vw,54px);text-align:center;animation:pop .3s}
.mg-prompt{font-family:var(--display);font-size:24px;text-align:center}
.mg-disc{position:absolute;width:80px;height:80px;border-radius:50%;border:var(--bd);box-shadow:var(--sh);cursor:pointer;
  transform:translate(-50%,-50%);animation:pop .2s}
.mg-disc:active{box-shadow:var(--sh-sm)}
.mg-light{width:132px;height:132px;border-radius:50%;border:var(--bd);box-shadow:var(--sh);cursor:pointer}
.mg-light.red{background:var(--red)}
.mg-light.green{background:var(--green)}
.mg-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;max-width:480px}
.mg-color{width:62px;height:62px;border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;cursor:pointer;transition:transform .08s}
.mg-color:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.mg-color:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.mg-numbtn{display:inline-flex;align-items:center;justify-content:center;min-width:72px;height:64px;font-family:var(--display);
  font-size:30px;border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .08s}
.mg-numbtn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.mg-numbtn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.mg-shape{width:64px;height:64px;cursor:pointer;filter:drop-shadow(4px 4px 0 var(--ink));transition:transform .08s;border:0;background:var(--blue)}
.mg-shape:hover{transform:translate(-2px,-2px)}
.mg-shape.circle{border-radius:50%}
.mg-shape.square{border-radius:8px}
.mg-shape.triangle{clip-path:polygon(50% 0,0 100%,100% 100%)}
.mg-shape.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mg-arrow{font-family:var(--display);font-size:clamp(38px,9vw,64px);line-height:1;letter-spacing:1px}
.mg-dots{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:340px}
.mg-dot{width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);display:inline-block}
.mg-track{position:relative;width:100%;max-width:440px;height:46px;border:var(--bd);box-shadow:var(--sh-sm);border-radius:12px;background:#ece9f5;overflow:hidden}
.mg-zone{position:absolute;top:0;bottom:0;background:var(--green);opacity:.6}
.mg-marker{position:absolute;top:0;left:0;width:8px;height:100%;background:var(--ink)}
.mg-gauge{width:100%;max-width:380px;height:34px;border:var(--bd);box-shadow:var(--sh-sm);border-radius:999px;overflow:hidden;background:#ece9f5}
.mg-gauge>i{display:block;height:100%;width:0;background:var(--red);transition:width .05s}
.mg-flash{position:absolute;inset:0;display:grid;place-items:center;font-size:120px;font-weight:800;pointer-events:none;
  animation:fade .5s;z-index:3;background:rgba(255,253,246,.35)}
.mg-flash.good{color:var(--green)}
.mg-flash.bad{color:var(--red)}

/* ===================================================================
   THÈME SOMBRE
   On bascule les variables : --ink (texte/bordures/ombres) devient clair,
   --paper/--surface deviennent foncés. Puis on rattrape les cas où --ink
   servait de FOND foncé, et les fonds clairs/jaunes qui ont besoin de texte foncé.
   =================================================================== */
[data-theme="dark"]{
  --paper:#141226; --paper-dot:rgba(255,255,255,.04);
  --surface:#272250; --ink:#eee9fb; --muted:#a39dc4;
  /* netteté néo-brutaliste : bordure franche (visible, pas blanche) + ombre dure quasi-noire */
  --bd:3px solid #514b85;
  --sh:5px 5px 0 #090713;
  --sh-sm:3px 3px 0 #090713;
  --sh-lg:8px 8px 0 #090713;
  --line:#352f5e;
}
/* chips à FOND foncé + texte blanc : garder un fond foncé (sinon --ink clair les efface) */
[data-theme="dark"] .home-feature .corner,
[data-theme="dark"] .card .tag,
[data-theme="dark"] .btn.sel,
[data-theme="dark"] .cg-toast,
[data-theme="dark"] .pm-vs,
[data-theme="dark"] .player-chip .x,
[data-theme="dark"] .gg-result{ background:#39336e }
/* éléments à fond clair/jaune/orange/rose : garder un texte foncé */
[data-theme="dark"] .best-chip,
[data-theme="dark"] .btn.amber,
[data-theme="dark"] .btn.pink,
[data-theme="dark"] .choice.c3,
[data-theme="dark"] .choice .sym,
[data-theme="dark"] .tile.mis,
[data-theme="dark"] .kbd button.mis,
[data-theme="dark"] .result .big-score,
[data-theme="dark"] .streak-chip,
[data-theme="dark"] .home-feature,
[data-theme="dark"] .podium-step{ color:#15132b }
/* fonds clairs codés en dur -> variantes sombres */
[data-theme="dark"] .callout.ok{ background:#143526 }
[data-theme="dark"] .callout.no{ background:#3a1622 }
[data-theme="dark"] .mg-track,
[data-theme="dark"] .mg-gauge{ background:#3a3660 }
[data-theme="dark"] .field::placeholder{ color:#8a84a6 }
/* on adoucit aussi les 2 gros blocs très saturés + le halo du titre */
[data-theme="dark"] .home-feature.daily{ background:#e3a81f }
[data-theme="dark"] .home-feature.party{ background:#e0588f }
[data-theme="dark"] .hub-hero h1{ text-shadow:3px 3px 0 rgba(0,0,0,.5) }
[data-theme="dark"] .card::before{ opacity:.85 }

/* accessibilité : mouvement réduit */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
}