/* =========================================================
   iDjems — pictionary.css
   Atelier de dessin la nuit : fond sombre du HQ, feuille de papier blanche
   au centre, pastilles de couleur façon palette, accents rose / ambre.
   S'appuie sur jeux.css (en-tête, boutons, modales, toasts). Mobile d'abord.
   ========================================================= */

body.pc {
  --pc-rose: #ec4899;
  --pc-rose-2: #f472b6;
  --pc-ambre: #f59e0b;
  --pc-vert: #22c55e;
  --pc-papier: #ffffff;
  --bg: #100c1f;
  --bg-2: #1a1230;
}
body.pc::before {
  background:
    radial-gradient(60% 40% at 15% -8%, rgba(236, 72, 153, 0.24), transparent 70%),
    radial-gradient(50% 36% at 105% 20%, rgba(245, 158, 11, 0.14), transparent 72%),
    radial-gradient(70% 45% at 50% 112%, rgba(59, 130, 246, 0.12), transparent 72%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
}
.pc .btn-principal {
  color: #fff;
  background: linear-gradient(135deg, #f472b6, #db2777);
  box-shadow: 0 10px 28px rgba(219, 39, 119, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pc .btn-principal:hover:not(:disabled) { box-shadow: 0 12px 34px rgba(219, 39, 119, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.pc .champ:focus { border-color: var(--pc-rose-2); box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2); }
.pc-logo { font-size: 1.1rem; }

/* ── Accueil ─────────────────────────────────────────────── */
.pc-hero { text-align: center; padding: 10px 0 4px; }
.pc-hero-papier {
  position: relative; width: 190px; margin: 0 auto 14px; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--pc-papier);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.06); transform: rotate(-3deg);
}
.pc-hero-papier svg { position: absolute; top: 8%; right: 8%; bottom: 8%; left: 8%; width: 84%; height: 84%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pc-hero-papier path, .pc-hero-papier circle { stroke-width: 5; stroke-dasharray: 260; stroke-dashoffset: 260; animation: trace 1.4s ease-out forwards; }
.pc-hero-papier .h1 { stroke: #2563eb; }
.pc-hero-papier .h2 { stroke: var(--pc-ambre); fill: rgba(245, 158, 11, 0.25); animation-delay: .5s; }
.pc-hero-papier .h3 { stroke: #22c55e; animation-delay: .9s; }
.pc-hero-papier .h4 { stroke: var(--pc-rose); animation-delay: 1.2s; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.pc-hero-crayon { position: absolute; right: -14px; bottom: -10px; font-size: 2.2rem; animation: crayonne 1.6s ease-in-out infinite alternate; }
@keyframes crayonne { to { transform: translate(-10px, -6px) rotate(-8deg); } }
.pc-hero .titre { font-size: clamp(2rem, 9vw, 2.6rem); }
.pc-mode-tete { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.pc-mode-ico { font-size: 1.6rem; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.pc-mode-tete h2 { font-size: 1.12rem; }
.pc-code { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.pc-mode a.btn { text-decoration: none; display: flex; align-items: center; justify-content: center; }

/* ── Réglages ────────────────────────────────────────────── */
.pc-config { display: flex; flex-direction: column; gap: 14px; }
.pc-cfg-ligne .lbl { margin-bottom: 6px; }
.pc-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-puce {
  min-height: 40px; padding: 6px 13px; border-radius: 999px; font-size: 0.9rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--muted); transition: background .15s, border-color .15s, color .15s;
}
.pc-puce.on { color: #fff; background: rgba(236, 72, 153, 0.22); border-color: rgba(244, 114, 182, 0.75); }
.pc-puce:disabled { cursor: default; }
.pc-puce:disabled:not(.on) { opacity: .55; }

/* ── Scores (toujours visibles) ──────────────────────────── */
.pc-scores { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; margin: 0 -2px; }
.pc-scores::-webkit-scrollbar { display: none; }
.ecran-salon .pc-scores { flex-wrap: wrap; overflow: visible; }
.pc-score {
  flex: none; display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 170px; padding: 6px 10px 6px 6px; border-radius: 14px;
  background: var(--surface); border: 1.5px solid var(--border); text-align: left; color: var(--text); transition: border-color .25s, background .25s;
}
.pc-score.moi { border-color: rgba(255, 255, 255, 0.28); }
.pc-score.dessine { border-color: rgba(245, 158, 11, 0.8); background: rgba(245, 158, 11, 0.1); }
.pc-score.trouve { border-color: rgba(34, 197, 94, 0.8); background: rgba(34, 197, 94, 0.12); }
.pc-score.spect, .pc-score.absent { opacity: .6; }
.pc-av { position: relative; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-size: 1.05rem; }
.pc-coche, .pc-crayon { position: absolute; right: -5px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.68rem; }
.pc-coche { background: var(--pc-vert); color: #052e16; font-weight: 800; box-shadow: 0 0 0 2px var(--bg); }
.pc-crayon { background: var(--bg-2); font-size: 0.62rem; box-shadow: 0 0 0 2px var(--bg); }
.pc-score.anim .pc-coche { animation: coche .7s cubic-bezier(.2, .9, .3, 1.6); }
.pc-score.anim { animation: eclat .9s ease-out; }
@keyframes coche { from { transform: scale(0) rotate(-90deg); } }
@keyframes eclat { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } }
.pc-sc-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.86rem; }
.pc-sc-pts { font-family: var(--titre); font-weight: 700; font-size: 0.95rem; margin-left: auto; padding-left: 2px; white-space: nowrap; }

/* ── Barre du mot : chrono + mot / indice ────────────────── */
.ecran-jeu, .ecran-local-dessin { gap: 8px; padding-top: 10px; }
.pc-barre-mot {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px;
  background: var(--carte); border: 1px solid var(--border); min-height: 58px;
}
.pc-mot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-mot-info .kicker { font-size: 0.68rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-mot-texte { font-size: 1rem; color: var(--muted); }
.pc-mot-texte b { font-family: var(--titre); color: #fff; font-size: 1.12rem; letter-spacing: 0.01em; }
.pc-mot-texte.trouve b { color: #86efac; }
.pc-indice { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: flex-end; }
.pc-indice i { width: 0.95em; height: 1.35em; border-bottom: 2.5px solid rgba(255, 255, 255, 0.55); font-style: normal; font-family: var(--titre); font-weight: 700; font-size: 1.05rem; text-align: center; line-height: 1.2; }
.pc-indice i.l { color: var(--pc-ambre); border-color: var(--pc-ambre); animation: apparait .4s ease-out; }
.pc-indice i.esp { border: 0; width: 0.5em; }
.pc-nb { font-size: 0.72rem; color: var(--dim); }
.pc-passer { flex: none; width: 44px; padding: 0; }
.pc-chrono { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; }
.pc-chrono svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: rotate(-90deg); }
.pc-chrono circle { fill: none; stroke-width: 3.4; }
.pc-chrono .fond { stroke: rgba(255, 255, 255, 0.1); }
.pc-chrono .arc { stroke: var(--pc-ambre); stroke-dasharray: 97.4; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.pc-chrono b { font-family: var(--titre); font-size: 1.02rem; }
.pc-chrono.urgent .arc { stroke: #ef4444; }
.pc-chrono.urgent b { color: #fca5a5; animation: bat 1s ease-in-out infinite; }
@keyframes bat { 50% { transform: scale(1.15); } }
@keyframes apparait { from { transform: scale(.6); opacity: 0; } }

/* ── Ardoise ─────────────────────────────────────────────── */
.pc-scene { position: relative; }
.pc-papier {
  position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--pc-papier);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.pc-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.pc-canvas.dessinable { cursor: crosshair; }
.pc-voile { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; background: rgba(16, 12, 31, 0.6); color: #fff; font-weight: 600; }
.pc-revele { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; pointer-events: none; padding: 10px; }
.pc-revele:empty { display: none; }
.pc-revele-carte {
  pointer-events: auto; text-align: center; padding: 16px 18px; border-radius: 20px; max-width: 92%;
  background: rgba(22, 15, 40, 0.92); border: 1px solid var(--border-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  animation: apparait .35s cubic-bezier(.2, .9, .3, 1.3);
}
.pc-revele-mot { font-family: var(--titre); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.01em; margin: 4px 0 8px; color: #fff; }
.pc-gains { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.pc-gains li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.4); font-size: 0.88rem; }
.pc-gains b { color: #86efac; }
.pc-revele-carte .btn { margin-top: 8px; width: auto; }

/* ── Outils de dessin ────────────────────────────────────── */
.pc-outils { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--carte); border: 1px solid var(--border); }
.pc-couleurs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.pc-coul {
  aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 2px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25); transition: transform .15s, box-shadow .15s;
}
.pc-coul.on { transform: scale(1.14); box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px #fff; }
.pc-ligne-outils { display: flex; align-items: center; gap: 6px; }
.pc-tailles { display: flex; gap: 4px; flex: 1; min-width: 0; }
.pc-taille, .pc-outil { flex: none; width: 42px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pc-taille { flex: 1 1 0; width: auto; min-width: 0; }   /* min-width 0 : sinon déborde sur la gomme à 375 px */
.pc-taille i { width: var(--t); height: var(--t); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.pc-taille.on, .pc-outil.on { border-color: rgba(244, 114, 182, 0.85); background: rgba(236, 72, 153, 0.16); color: #fff; }
.pc-outil:disabled { opacity: .35; }
.pc-outil.danger { color: #fca5a5; }

/* ── Chat ────────────────────────────────────────────────── */
.pc-chat { border-radius: 16px; background: var(--carte); border: 1px solid var(--border); overflow: hidden; }
.pc-chat-log { height: clamp(96px, 22dvh, 220px); overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.pc-dessinateur .pc-chat-log { height: clamp(70px, 14dvh, 150px); }
.pc-msg { font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere; animation: arrive .25s ease-out; }
.pc-msg b { font-weight: 600; color: var(--pc-rose-2); margin-right: 2px; }
.pc-msg.moi b { color: var(--pc-ambre); }
.pc-msg.sys { color: var(--dim); font-size: 0.82rem; font-style: italic; }
.pc-msg.trouve { color: #86efac; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pc-check { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--pc-vert); color: #052e16; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; animation: coche .6s cubic-bezier(.2, .9, .3, 1.6); }
.pc-msg.presque { color: #fcd34d; }
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } }
.pc-saisie { display: flex; gap: 8px; position: sticky; bottom: 0; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 30%); }
.pc-saisie .champ { flex: 1; min-width: 0; }
.pc-saisie .btn { width: 56px; flex: none; padding: 0; font-size: 1.2rem; }
.pc-saisie.off .btn { opacity: .4; }
.pc-saisie.off .champ { opacity: .7; }

/* ── Podium ──────────────────────────────────────────────── */
.pc-podium { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; padding-top: 20px; min-height: 280px; overflow: hidden; }
.pc-marche { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; animation: monte .8s cubic-bezier(.2, .9, .3, 1.2) both; }
.pc-marche.p1 { animation-delay: .9s; }
.pc-marche.p2 { animation-delay: .5s; }
.pc-marche.p3 { animation-delay: .2s; }
@keyframes monte { from { transform: translateY(60px); opacity: 0; } }
.pc-marche b { font-family: var(--titre); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-pod-av { font-size: 2.2rem; line-height: 1; }
.pc-marche.p1 .pc-pod-av { font-size: 2.8rem; animation: rebond 1.4s ease-in-out 1.8s infinite; }
@keyframes rebond { 50% { transform: translateY(-8px); } }
.pc-pod-pts { font-size: 0.82rem; color: var(--muted); }
.pc-bloc { width: 100%; border-radius: 14px 14px 4px 4px; display: grid; place-items: start center; padding-top: 10px; font-family: var(--titre); font-weight: 700; font-size: 1.6rem; color: rgba(255, 255, 255, 0.92); }
.p1 .pc-bloc { height: 150px; background: linear-gradient(180deg, #fbbf24, #b45309); box-shadow: 0 0 40px rgba(251, 191, 36, 0.35); }
.p2 .pc-bloc { height: 110px; background: linear-gradient(180deg, #e5e7eb, #6b7280); }
.p3 .pc-bloc { height: 80px; background: linear-gradient(180deg, #fb923c, #9a3412); }
.pc-confettis { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.pc-confettis i { position: absolute; top: -12px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: confetti 2.8s ease-in var(--d) 2 both; }
@keyframes confetti { 0% { transform: translateY(0) rotate(var(--r)); opacity: 1; } 100% { transform: translateY(320px) rotate(calc(var(--r) + 540deg)); opacity: 0; } }
.pc-classement { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pc-classement li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.pc-classement li > span:first-child { font-family: var(--titre); font-weight: 700; color: var(--dim); width: 1.4em; }
.pc-classement b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-classement em { font-style: normal; font-family: var(--titre); font-weight: 700; }

@media (min-width: 760px) {
  .pc .app { max-width: 720px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-hero-papier path, .pc-hero-papier circle { animation: none; stroke-dashoffset: 0; }
  .pc-confettis, .pc-hero-crayon { display: none; }
  .pc-marche, .pc-marche .pc-pod-av { animation: none !important; }
}

/* le dessinateur n'écrit pas : pas de barre de saisie (elle masquerait les outils) */
body.pc-dessinateur .pc-saisie { display: none; }

/* ── Téléphones quand une TV affiche la partie ───────────── */
/* les devineurs regardent surtout la TV : dessin plus petit, chat plus grand */
body.avec-tv:not(.pc-dessinateur) .pc-scene { width: 64%; margin: 0 auto; }
body.avec-tv:not(.pc-dessinateur) .pc-chat-log { height: clamp(140px, 32dvh, 300px); }

/* ── Écran TV ────────────────────────────────────────────── */
/* plein écran paysage : grand dessin à gauche, scores + réponses à droite */
body.pc-tv .app { max-width: none; padding: 0 clamp(12px, 2vw, 32px); }
body.pc-tv .entete { margin: 0 calc(-1 * clamp(12px, 2vw, 32px)); padding-left: clamp(12px, 2vw, 32px); padding-right: clamp(12px, 2vw, 32px); }
body.pc-tv .ecran { padding-top: clamp(10px, 1.4vw, 20px); }
.tv { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 420px); gap: clamp(12px, 1.6vw, 28px); align-items: start; }
.tv-principal { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 16px); min-width: 0; }
.tv-haut { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); min-height: 72px; padding: 10px clamp(12px, 1.4vw, 22px); border-radius: 20px; background: var(--carte); border: 1px solid var(--border); }
.tv-haut .pc-chrono { width: clamp(56px, 5vw, 84px); height: clamp(56px, 5vw, 84px); }
.tv-haut .pc-chrono b { font-size: clamp(1.2rem, 1.8vw, 2rem); }
.tv-qui { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-qui .kicker { margin: 0; font-size: clamp(0.72rem, 0.9vw, 0.95rem); }
.tv-dessine { font-size: clamp(1.1rem, 1.7vw, 1.9rem); color: var(--muted); }
.tv-dessine b { font-family: var(--titre); color: #fff; }
.tv-indice { margin-left: auto; display: flex; align-items: flex-end; gap: 12px; }
.tv-indice .pc-indice i { font-size: clamp(1.4rem, 2.4vw, 2.8rem); width: 0.9em; border-bottom-width: 4px; }
.tv-indice .pc-nb { font-size: clamp(0.8rem, 1vw, 1.05rem); white-space: nowrap; }
/* le dessin tient dans la hauteur de l'écran (4:3) */
.tv-scene { position: relative; width: min(100%, calc((100dvh - 230px) * 4 / 3)); margin: 0 auto; }
.tv-scene .pc-papier { border-radius: 22px; }
/* salon / podium : la feuille s'efface, l'invitation ou le podium prend toute la place */
.tv-scene.voilee .pc-papier { opacity: 0; }
.tv-scene.voilee .tv-voile { border-radius: 22px; background: var(--carte); border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.tv-voile { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; padding: clamp(10px, 2vw, 32px); }
.tv-voile:empty { display: none; }
.tv-invite { display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); max-width: 100%; }
.tv-invite-qr .invite { gap: 10px; }
.tv-invite-qr .actions-2 { display: none; }                 /* pas de bouton sur la TV */
.qr-tv { width: clamp(170px, min(22vw, calc(100dvh - 430px)), 360px); }
.tv-invite .code-geant span { font-size: clamp(1.8rem, 3vw, 3.2rem); width: 1.3em; height: 1.5em; }
.tv-invite .lien { font-size: clamp(1rem, 1.3vw, 1.4rem); }
.tv-invite-txt { max-width: 30ch; }
.tv-invite-txt h2 { font-family: var(--titre); font-size: clamp(1.4rem, 2.4vw, 2.6rem); margin-bottom: 12px; }
.tv-invite-txt .aide { font-size: clamp(0.95rem, 1.2vw, 1.3rem); color: var(--muted); }
.tv-arrivants { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tv-arrivant { padding: 6px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-2); font-size: clamp(0.95rem, 1.2vw, 1.25rem); font-weight: 600; animation: apparait .4s cubic-bezier(.2, .9, .3, 1.4); }
.tv-fin { width: min(100%, 720px); }
.tv-fin .pc-podium { min-height: clamp(280px, 40dvh, 460px); }
.tv-fin .pc-classement { display: none; }
.tv-fin .pc-pod-av { font-size: clamp(2.4rem, 4vw, 4rem); }
.tv-fin .p1 .pc-bloc { height: clamp(150px, 22dvh, 240px); }
.tv-fin .p2 .pc-bloc { height: clamp(110px, 16dvh, 180px); }
.tv-fin .p3 .pc-bloc { height: clamp(80px, 11dvh, 130px); }
.tv-revele-carte .pc-revele-mot { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.tv-revele-carte { padding: clamp(16px, 2.4vw, 36px) clamp(20px, 3vw, 48px); }
/* colonne de droite */
.tv-cote { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: 76px; }
.tv-cote-titre { font-family: var(--titre); font-size: 0.82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tv-scores { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tv-score { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); font-size: clamp(0.95rem, 1.15vw, 1.25rem); transition: border-color .25s, background .25s; }
.tv-score b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-rang { width: 1.4em; font-family: var(--titre); font-weight: 700; color: var(--dim); }
.tv-pts { font-family: var(--titre); font-weight: 700; font-size: 1.2em; }
.tv-gain { font-style: normal; font-weight: 700; color: #86efac; }
.tv-score.dessine { border-color: rgba(245, 158, 11, 0.8); background: rgba(245, 158, 11, 0.1); }
.tv-score.trouve { border-color: rgba(34, 197, 94, 0.8); background: rgba(34, 197, 94, 0.12); }
.tv-score.anim { animation: eclat .9s ease-out; }
.tv-score.anim .pc-coche { animation: coche .7s cubic-bezier(.2, .9, .3, 1.6); }
.tv-score.absent, .tv-score.spect { opacity: .6; }
.tv-fil { height: clamp(160px, calc(100dvh - 120px - var(--tv-scores-h, 300px)), 50dvh); min-height: 140px; overflow-y: auto; padding: 10px 12px; border-radius: 16px; background: var(--carte); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.tv-fil .pc-msg { font-size: clamp(0.92rem, 1.05vw, 1.15rem); }
/* bonne réponse : l'écran s'illumine en vert, prénom en grand */
.tv-flash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; display: grid; place-items: center; z-index: 40; }
.tv-flash:empty { display: none; }
.tv-flash-carte {
  display: flex; align-items: center; gap: 16px; padding: 18px 34px; border-radius: 999px;
  font-family: var(--titre); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 3.6rem); color: #052e16;
  background: linear-gradient(135deg, #86efac, #22c55e); box-shadow: 0 30px 80px rgba(34, 197, 94, 0.45);
  animation: flash-carte 1.8s cubic-bezier(.2, .9, .3, 1.2) both;
}
.tv-flash-carte .pc-check { width: 1.2em; height: 1.2em; font-size: 0.7em; background: #052e16; color: #86efac; }
@keyframes flash-carte { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.05); opacity: 1; } 75% { transform: none; opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
/* (body::after est déjà le grain de jeux.css : le liseré vert vit sur la couche du flash) */
.tv-flash:not(:empty) { animation: flash-bord 1.4s ease-out; }
@keyframes flash-bord { 0% { box-shadow: inset 0 0 0 0 rgba(34, 197, 94, 0); } 20% { box-shadow: inset 0 0 0 6px rgba(34, 197, 94, 0.9), inset 0 0 140px rgba(34, 197, 94, 0.28); } 100% { box-shadow: inset 0 0 0 0 rgba(34, 197, 94, 0); } }
/* TV en portrait (tablette debout) : tout en colonne */
@media (max-width: 900px), (orientation: portrait) {
  .tv { grid-template-columns: minmax(0, 1fr); }
  .tv-cote { position: static; }
  .tv-scene { width: min(100%, calc((100dvh - 420px) * 4 / 3)); min-width: min(100%, 320px); }
  .tv-invite { flex-direction: column; text-align: center; }
  .tv-arrivants { justify-content: center; }
  .tv-fil { height: 200px; }
}
.pc-mode-tv .btn { white-space: normal; }