/* Painel do host (D69, fatia T4), notebook, tema de jogo: sala e avanço automático à esquerda, a partida no centro e a moderação
   de avatar à direita. A tela é dirigida por `assets/controllers/host_controller.js`, que mostra e oculta por `data-phase`; aqui
   só o desenho. Sem animação. */
.host-panel .notice { margin: 0 0 var(--space-4); }
.host-grid { display: grid; grid-template-columns: 20rem minmax(0, 1fr) 24rem; gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.host-panel .host-grid h2 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.host-grid .card, .host-grid .panel { margin: 0; }
.host-grid .stack { min-width: 0; }

.host-room { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.host-room p { margin: 0; }
.host-room .code { margin: var(--space-1) 0; padding: var(--space-2) var(--space-4) var(--space-3); font-size: 3.75rem; line-height: 1; letter-spacing: .3rem; color: var(--card-ink); background: var(--card-hilite); border-radius: var(--radius-block); box-shadow: inset 0 calc(var(--lift-button) * -1) 0 var(--card-hilite-edge); }
.host-room .join-url { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; color: var(--card-link); overflow-wrap: anywhere; }
.host-room .button { margin-top: var(--space-3); }
.host-room .closing-mode { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.host-room .closing-mode label { display: flex; flex-direction: column; gap: var(--space-1); font-size: .9375rem; }
.host-room .closing-mode .button { margin-top: 0; }

.auto-advance label { display: block; margin: var(--space-3) 0 var(--space-1); }
.auto-advance label.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); margin: 0; }
.auto-advance input[type=number] { display: block; max-width: 8rem; margin-top: var(--space-1); }
.auto-advance button { margin-top: var(--space-3); }

.host-match { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-5); min-height: 24rem; }
.host-state { margin: 0; font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; line-height: 1.2; }
.host-position { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--hilite); }
.host-statement { margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--card-ink); background: var(--card); border-radius: var(--radius-block); box-shadow: 0 var(--lift-chip) 0 var(--panel-shade); }
.host-statement:empty { display: none; }
.host-count { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--on-dark-muted); }
.host-count strong { font-size: 3.5rem; line-height: 1; font-weight: 700; color: var(--game-text); font-variant-numeric: tabular-nums; }
.host-count .of { font-size: 1.625rem; }
.host-answers progress { display: block; width: 100%; height: 1.375rem; appearance: none; border: 0; border-radius: .6875rem; background: var(--chip-shade); overflow: hidden; }
.host-answers progress::-webkit-progress-bar { background: var(--chip-shade); }
.host-answers progress::-webkit-progress-value { background: var(--good); }
.host-answers progress::-moz-progress-bar { background: var(--good); }

.host-match .host-actions { margin-top: auto; align-items: center; gap: var(--space-4); padding-top: var(--space-3); }
.host-match .host-actions button { min-height: 3.625rem; padding: 0 var(--space-6); font-size: 1.375rem; }
.host-match .host-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--chip-shade); }
.host-match .host-end button { min-height: 3rem; padding: 0 var(--space-5); font-size: 1.125rem; }
.host-match .host-end .host-hint { flex: 1 1 12rem; }
.host-hint { margin: 0; color: var(--on-dark-muted); font-size: .9375rem; line-height: 1.4; }
.host-match .host-actions .host-hint { flex: 1 1 12rem; }

/* Moderação de avatar (D62): uma linha por participante (avatar estático, apelido e botão), com rolagem própria para 200 jogadores. */
.host-moderation { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4); }
.host-moderation .notice { margin: 0; }
.host-panel .moderation-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 34rem; margin: 0; padding: 0 var(--space-1) var(--space-1) 0; overflow-y: auto; list-style: none; scrollbar-color: var(--on-dark-muted) var(--chip-shade); }
.host-panel .moderation-list li { display: grid; grid-template-columns: var(--avatar-md) minmax(0, 1fr) max-content; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); background: var(--chip); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-pressed) 0 var(--chip-shade); }
.host-panel .moderation-list .nick { min-width: 0; overflow: hidden; font-family: var(--font-display); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.host-panel .moderation-list .avatar-moderate { --btn-bg: var(--danger); --btn-fg: var(--game-text); --btn-shade: var(--danger-shade); min-height: 2.75rem; padding: 0 var(--space-3); font-size: .9375rem; }
.host-panel .moderation-list li[data-avatar-hidden] .avatar-moderate { --btn-bg: var(--hilite); --btn-fg: var(--on-hilite); --btn-shade: var(--hilite-shade); }

@media (max-width: 70rem) {
    .host-grid { grid-template-columns: minmax(0, 1fr); }
    .host-panel .moderation-list { max-height: 24rem; }
}