/* =========================================================================
 * PIXEL QUIZ ARENA - Télécommande du présentateur
 * ========================================================================= */
body.presenter { background: radial-gradient(circle at 50% 0, var(--plum), var(--ink) 70%) var(--ink); height: 100dvh; min-height: 0; overflow: hidden; }
.presenter #screen { min-height: 0; overflow-y: auto; }
/* Dock du bas : valider / refuser et commandes de la phase, toujours sous le pouce */
#pdock { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: rgba(10, 10, 20, .85); border-top: 3px solid #000; }
#pdock:empty { display: none; }
.pundo { background: var(--ink); border: 3px dashed var(--yellow); color: var(--yellow); font-size: 22px; padding: 8px; }
#phead { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(0,0,0,.4); border-bottom: 4px solid var(--yellow); }
#phead b { font-family: var(--font-title); font-size: 12px; color: var(--yellow); }
#phead span { font-family: var(--font-title); font-size: 14px; background: var(--yellow); color: var(--ink); padding: 4px 8px; }
.presenter #screen { gap: 10px; }
.pwarn { font-size: 17px; line-height: 1.05; background: rgba(65,166,246,.15); border: 2px dashed var(--sky); padding: 4px 6px; }
.pinfo { font-size: 26px; color: var(--cyan); text-align: center; }
.pcard { background: var(--white); color: var(--ink); border: 4px solid #000; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pmeta { font-size: 19px; color: var(--g2); }
.pplayers .pmeta { color: var(--g1); }
.pquestion { font-size: 28px; line-height: 1.05; }
.pclues { margin: 0; padding-left: 24px; font-size: 22px; color: var(--g2); }
.pclues li.on { color: var(--ink); font-weight: bold; }
.pchs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 22px; }
.pchs .ok { background: var(--lime); }
.panswer { font-family: var(--font-title); font-size: 15px; background: var(--lime); padding: 8px; border: 3px solid #000; line-height: 1.4; }
.paccept { font-size: 19px; color: var(--g2); }
.panec { font-size: 22px; background: #fff3d4; padding: 6px; border-left: 6px solid var(--orange); }
.ppending { background: var(--yellow); color: var(--ink); border: 4px solid #000; padding: 8px 10px; font-size: 24px; line-height: 1.05; display: flex; flex-direction: column; gap: 8px; }
.pvalid { display: flex; gap: 8px; }
.pvalid button { flex: 1; font-family: var(--font-title); font-size: 16px; padding: 18px 4px; border: 4px solid #000; color: var(--white); box-shadow: 0 4px 0 #000; text-shadow: 2px 2px 0 #000; }
.pvalid .ok { background: var(--green); } .pvalid .ko { background: var(--red2); }
.pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Gris = commande secondaire, vert = action principale (le bleu et le rouge restent aux réponses et aux erreurs) */
.pbtns button { background: var(--g3); border: 4px solid #000; font-size: 24px; padding: 10px 4px; min-height: 52px; box-shadow: 0 4px 0 #000; }
.pbtns button.main { grid-column: 1 / -1; background: var(--green); font-family: var(--font-title); font-size: 14px; padding: 18px; text-shadow: 2px 2px 0 #000; }
.pplayers { display: flex; flex-direction: column; gap: 4px; }
.pp { display: flex; flex-direction: column; background: var(--ink); border-left: 6px solid var(--oc); }
.pph { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 6px 8px; min-height: 44px; text-align: left; }
.pp.open { outline: 3px solid var(--yellow); }
.ppts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px 8px; }
.ppts button { min-height: 48px; font-family: var(--font-title); font-size: 13px; background: var(--g3); border: 3px solid #000; box-shadow: 0 3px 0 #000; }
.pp.off { opacity: .5; }
.ppn { flex: 1; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pps { font-family: var(--font-title); font-size: 13px; color: var(--yellow); text-align: right; }
/* Choix montré du doigt par le joueur, saisi par le présentateur */
.pchoose { background: rgba(255, 205, 117, .12); border: 3px dashed var(--yellow); padding: 8px; }
.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 6px; margin-top: 6px; }
.pgrid button { background: var(--g3); border: 3px solid #000; border-left: 8px solid var(--oc, #000); font-size: 20px; padding: 10px 2px; display: flex; flex-direction: column; align-items: center; color: var(--white); }
.pgrid button small { font-size: 13px; color: var(--g1); }
.pgrid button:disabled { background: var(--ink); opacity: .45; }