/* Backoffice no tema de jogo (D69): fundo azul com pontos, Fredoka, botão "gordo", cartões brancos e painéis com sombra sólida.
   Vale com `.office` no corpo (base.html.twig); os tokens do tema vêm de tokens.css. SEM animação e sem som: o único movimento
   é o botão afundar ao tocar (`:active`, sem transição). Cor e medida de design só por token; telas ao vivo não usam `.office`. */
.result { max-width: 56rem; background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); }
.result .scroll { max-height: 32rem; overflow: auto; }
.result th { position: sticky; top: 0; background: var(--color-surface); }
.result .avatar-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.result .avatar-cell .avatar { --avatar-size: var(--avatar-sm); flex: none; }
.result .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result .bar { background: var(--color-border); border-radius: .3rem; height: .9rem; overflow: hidden; min-width: 6rem; }
.result .bar > span { display: block; height: 100%; background: var(--color-muted); }
.result .bar.correct > span { background: var(--color-ok); }
.result .ok { color: var(--color-ok); font-weight: 700; }
.result .no { color: var(--color-error); font-weight: 700; }
.result .none { color: var(--color-muted); }
.result .summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: var(--space-4) 0; }
.result .summary > div { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.office .result { border-radius: var(--radius-panel); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); }
.result .summary strong { display: block; font-size: 1.75rem; font-variant-numeric: tabular-nums; }


/* Aviso de opção longa no editor: não bloqueia, só avisa. */
.option-warning { display: inline-block; margin-left: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-warn-bg); color: var(--color-warn); }

/* Lista de quizzes, editor, importação, perfil e permissões usam `.card` (cartão branco), `.table-card` (tabelas) e `.actions`
   (botões lado a lado). */
.office main { max-width: var(--office-width); padding: var(--space-3) var(--space-6) var(--space-7); overflow-wrap: anywhere; }
.office h1 { margin: 0 0 var(--space-3); font-size: 2.75rem; line-height: 1.05; }
.office h2 { margin: var(--space-5) 0 var(--space-2); font-size: 1.5rem; }
.office h3 { margin: 0 0 var(--space-2); font-size: 1.1875rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.card form + form, .card .card { margin-top: var(--space-3); }
.card fieldset { min-width: 0; margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.card legend { padding: 0 var(--space-1); color: var(--color-muted); }
.card textarea, .card input[type=text], .card input[type=number], .card select { max-width: 100%; }
.card label input[type=number] { display: block; max-width: 12rem; margin-top: var(--space-1); }
.card form .inline button { margin-right: var(--space-2); }
.card ul { padding-left: var(--space-5); }
.card p { margin: var(--space-2) 0; }
section.paper { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; box-shadow: var(--shadow-sm); }
.office section.paper { border: 0; border-radius: var(--radius-panel); padding: var(--space-4) var(--space-5); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); }

/* Tabela larga rola dentro do próprio cartão, nunca a página inteira. */
.table-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow-x: auto; margin: var(--space-4) 0; }
.office .table-card { border: 0; border-radius: var(--radius-panel); padding: var(--space-2) var(--space-4); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); }
.table-card table, .scroll table { min-width: 32rem; }
.table-card th, .scroll th { color: var(--color-muted); font-weight: 600; white-space: nowrap; }
.office th { font-family: var(--font-display); }
.office th, .office td { border-bottom: .125rem solid var(--card-line); }
.office th { border-bottom-width: var(--border-field); }
.office .table-card td:first-child, .office .table-card td.quiz-title { font-family: var(--font-display); font-weight: 600; }
.table-card tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }
main ul[data-finished-sessions] { padding-left: var(--space-5); }


@media (max-width: 40rem) {
    :is(.office, .with-menu) nav.menu { padding: var(--space-3); }
    .office main { padding: var(--space-3) var(--space-3) var(--space-6); }
    .office h1 { font-size: 2rem; }
    .office .card { padding: var(--space-3); }
}

/* ---- Fundação (D69, fatia T1) ---- */

/* Marca (imagem quadrada): dimensionada pela altura em cada contexto. */
:is(.office, .with-menu) .logo { display: block; width: auto; height: 3rem; }
.office a { color: var(--hilite); }
.office .card a, .office .table-card a, .office .result a, .office section.paper a { color: var(--card-link); font-weight: 600; text-underline-offset: .2em; }
.office .card a.button, .office .table-card a.button, .office .result a.button, .office section.paper a.button { color: var(--btn-fg); font-weight: 600; text-decoration: none; }
.office .card, .office .table-card, .office .result, .office .paper { --color-focus: var(--card-link); --color-on-accent: var(--game-text); }

/* Cabeçalho: logo, navegação em pílulas (a tela atual em amarelo, `aria-current="page"`) e apelido + avatar à direita. */
nav.menu .menu-logo { display: none; }
:is(.office, .with-menu) nav.menu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-3); max-width: var(--office-width); margin: 0 auto; padding: var(--space-4) var(--space-6); background: none; }
:is(.office, .with-menu) nav.menu .menu-logo { display: block; margin-right: var(--space-3); line-height: 0; }
:is(.office, .with-menu) nav.menu a.pill {
    display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 1.125rem;
    font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; text-decoration: none;
    color: var(--game-text); background: var(--panel); border-radius: var(--radius-chip); box-shadow: 0 var(--lift-chip) 0 var(--panel-shade);
}
:is(.office, .with-menu) nav.menu a.pill[aria-current="page"] { color: var(--on-hilite); background: var(--hilite); box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }
:is(.office, .with-menu) nav.menu a.pill-quiet { background: var(--chip); box-shadow: 0 var(--lift-chip) 0 var(--chip-shade); }
:is(.office, .with-menu) nav.menu a.pill:active { transform: translateY(var(--press)); box-shadow: 0 var(--lift-pressed) 0 var(--panel-shade); }
:is(.office, .with-menu) nav.menu a.pill[aria-current="page"]:active { box-shadow: 0 var(--lift-pressed) 0 var(--hilite-shade); }
:is(.office, .with-menu) nav.menu :focus-visible { outline-color: var(--hilite); }
:is(.office, .with-menu) nav.menu a.menu-user { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--game-text); text-decoration: none; }
:is(.office, .with-menu) nav.menu .menu-user-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.office, .with-menu) nav.menu .menu-user .avatar { --avatar-size: var(--avatar-md); --avatar-ring: var(--hilite); box-shadow: 0 var(--lift-pressed) 0 var(--hilite-shade); }
:is(.office, .with-menu) nav.menu .menu-user[aria-current="page"] .avatar { --avatar-ring: var(--good); box-shadow: 0 var(--lift-pressed) 0 var(--good-shade); }

/* Botão "gordo": cor chapada, sombra sólida, afunda ao tocar. Padrão = ação principal (amarelo); variantes por classe. Sem transição. */
.office button, .office .button {
    --btn-bg: var(--hilite); --btn-fg: var(--on-hilite); --btn-shade: var(--hilite-shade);
    min-height: var(--touch-min); padding: var(--space-2) var(--space-5); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.2;
    color: var(--btn-fg); background: var(--btn-bg); border: 0; border-radius: var(--radius-button); box-shadow: 0 var(--lift-button) 0 var(--btn-shade);
}
.office button:not(:disabled):active, .office .button:active { transform: translateY(var(--press)); box-shadow: 0 var(--lift-pressed) 0 var(--btn-shade); }
.office .btn-ok { --btn-bg: var(--good); --btn-fg: var(--on-good); --btn-shade: var(--good-shade); }
.office .btn-blue { --btn-bg: var(--secondary); --btn-fg: var(--game-text); --btn-shade: var(--secondary-shade); }
.office .btn-purple { --btn-bg: var(--tertiary); --btn-fg: var(--game-text); --btn-shade: var(--tertiary-shade); }
.office .btn-danger { --btn-bg: var(--danger); --btn-fg: var(--game-text); --btn-shade: var(--danger-shade); }
.office .btn-quiet { --btn-bg: var(--chip); --btn-fg: var(--game-text); --btn-shade: var(--chip-shade); }
.office button:disabled { opacity: .6; box-shadow: 0 var(--lift-pressed) 0 var(--btn-shade); }

/* Cartões: branco (o que se lê de perto), raio grande, sombra sólida. */
.office .card { padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-panel); box-shadow: 0 var(--lift-panel) 0 var(--panel-shade); }
.office .card .card { margin-top: var(--space-3); border: .125rem solid var(--card-line); box-shadow: none; }
.office .panel { background: var(--panel); border-radius: var(--radius-panel); box-shadow: 0 var(--lift-block) 0 var(--panel-shade); }

/* Campos: borda grossa, raio de ficha, rótulo em fonte display. */
.office label { font-family: var(--font-display); font-weight: 600; }
.office input[type=text], .office input[type=password], .office input[type=number], .office input[type=file], .office select, .office textarea {
    min-height: 3.25rem; font-size: 1.125rem; border: var(--border-field) solid var(--color-border); border-radius: var(--radius-chip);
}
.office input[type=text]:focus, .office input[type=password]:focus, .office input[type=number]:focus, .office select:focus, .office textarea:focus { border-color: var(--card-link); }
.office input[type=checkbox], .office input[type=radio] { accent-color: var(--card-link); }
.office .hint { color: var(--color-muted); font-size: .9375rem; }

/* Avisos: sucesso verde, erro vermelho com borda grossa, aviso amarelo. Texto sempre junto da cor. */
.office .flash, .office .notice, .office .error { padding: var(--space-3) var(--space-5); border-radius: var(--radius-block); font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.office .flash-success { color: var(--on-good); background: var(--good); box-shadow: 0 var(--lift-chip) 0 var(--good-shade); }
.office .flash-error, .office .error { color: var(--alert-ink); background: var(--alert-bg); border: var(--border-dash) solid var(--danger); box-shadow: 0 var(--lift-chip) 0 var(--danger-shade); }
.office .notice { box-shadow: 0 var(--lift-chip) 0 var(--hilite-shade); }

/* Cabeçalho de página: título, frase de apoio e ações à direita. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin: var(--space-3) 0 var(--space-5); }
.page-head > div:first-child { flex: 1 1 20rem; }
.page-head h1 { margin: 0; }
.page-head .actions { margin-left: auto; }
.lead { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 1.0625rem; }

/* Selo de estado: cor + texto (jogável verde, falta algo laranja, somente leitura lilás). */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: .25rem .875rem .25rem .625rem; border-radius: var(--radius-round);
    font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--on-hilite); background: var(--badge-bg, var(--on-dark-muted));
}
.badge::before { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: var(--radius-round); background: currentColor; }
.badge-ok { --badge-bg: var(--good); color: var(--on-good); }
.badge-warn { --badge-bg: var(--state-warn); }
.badge-readonly { --badge-bg: var(--state-readonly); }

/* ---- Telas (D69, fatia T2) ---- */

/* Login: logo grande, cartão de entrada e fichas de avatar decorativas (aria-hidden) ao redor. */
.login { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); max-width: none; margin: var(--space-5) auto var(--space-6); }
.login h1 { margin: 0; line-height: 0; }
.login .logo { height: 11rem; }
.login .card { width: 100%; max-width: 28.75rem; margin: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-panel); }
.login h2 { margin: 0 0 var(--space-1); font-size: 1.75rem; }
.login .hint { margin: 0 0 var(--space-3); font-size: 1rem; }
.login input[type=text], .login input[type=password] { display: block; max-width: none; }
.login .remember { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); margin: var(--space-2) 0; font-family: var(--font-sans); font-weight: 400; }
.login .remember input { margin: 0; }
.login button { width: 100%; min-height: 3.5rem; font-size: 1.375rem; }
.login .guest { margin: var(--space-4) 0 0; text-align: center; }
.login-chips { display: none; }
@media (min-width: 64rem) {
    .login-chips { display: block; position: absolute; inset: 0; pointer-events: none; }
    .login-chip {
        position: absolute; display: flex; align-items: center; justify-content: center; width: var(--chip-size); height: var(--chip-size);
        border-radius: var(--radius-round); border: var(--ring) solid var(--hilite); box-shadow: 0 var(--lift-button) 0 var(--hilite-shade);
        font-family: var(--font-display); font-size: calc(var(--chip-size) * .4); font-weight: 700; color: var(--avatar-text); background: var(--chip-bg);
    }
    .login-chip:nth-child(1) { --chip-size: 6.875rem; --chip-bg: var(--avatar-0); top: 0; left: 4%; transform: rotate(-8deg); }
    .login-chip:nth-child(2) { --chip-size: 5.25rem; --chip-bg: var(--avatar-5); top: 22rem; left: 12%; transform: rotate(6deg); }
    .login-chip:nth-child(3) { --chip-size: 4rem; --chip-bg: var(--avatar-7); top: 12rem; left: 1%; transform: rotate(-4deg); }
    .login-chip:nth-child(4) { --chip-size: 5.75rem; --chip-bg: var(--avatar-1); top: 1rem; right: 6%; transform: rotate(7deg); }
    .login-chip:nth-child(5) { --chip-size: 7.5rem; --chip-bg: var(--avatar-3); top: 20rem; right: 10%; transform: rotate(-6deg); }
    .login-chip:nth-child(6) { --chip-size: 4.375rem; --chip-bg: var(--avatar-6); top: 11rem; right: 1%; transform: rotate(5deg); }
}

/* Meus quizzes: um cartão por quiz (selo de estado, perguntas, motivo, botões) e o cartão tracejado "Criar um quiz novo". */
.quiz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-5); margin: var(--space-5) 0; }
.quiz-card { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.quiz-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.quiz-card .count { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--color-muted); }
.quiz-card h2 { margin: .125rem 0 0; font-size: 1.5625rem; line-height: 1.1; }
.office .quiz-card h2 a { color: var(--color-text); text-decoration: none; }
.quiz-card p { margin: 0; color: var(--color-muted); font-size: .9375rem; }
.quiz-card .problems { margin: 0; padding-left: var(--space-5); color: var(--card-warn); font-size: .9375rem; font-weight: 600; }
.quiz-card .actions { margin-top: auto; padding-top: var(--space-3); gap: var(--space-3); }
.quiz-card .actions form { margin: 0; }
.office a.create-card {
    box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 12rem; padding: var(--space-4);
    border: var(--border-dash) dashed var(--dash); border-radius: var(--radius-panel);
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-align: center; text-decoration: none; color: var(--game-text);
}
.create-card .plus { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: var(--radius-round); font-size: 2.75rem; line-height: 1; color: var(--on-hilite); background: var(--hilite); box-shadow: 0 var(--lift-button) 0 var(--hilite-shade); }

/* Minhas partidas: sete painéis de resumo e a tabela das partidas encerradas. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.stat { display: flex; flex-direction: column-reverse; justify-content: center; margin: 0; padding: var(--space-4) var(--space-2); text-align: center; background: var(--panel); border-radius: var(--radius-panel); box-shadow: 0 var(--lift-block) 0 var(--panel-shade); }
.stat dt { margin-top: .375rem; color: var(--color-muted); font-size: .9375rem; }
.stat dd { margin: 0; font-family: var(--font-display); font-size: 2.375rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat dd[data-stat="percent"], .stat dd[data-stat="best"] { color: var(--hilite); }
.stat dd[data-stat="correct"] { color: var(--good); }
.stat dd[data-stat="wrong"] { color: var(--stat-wrong); }
.stat dd[data-stat="unanswered"] { color: var(--color-muted); }
.rank-chip { display: inline-flex; padding: .1875rem .75rem; border-radius: var(--radius-round); font-family: var(--font-display); font-weight: 700; color: var(--on-hilite); background: var(--on-dark-muted); white-space: nowrap; }
.rank-chip-first { color: var(--on-good); background: var(--good); }
.rank-chip-podium { background: var(--hilite); }
.office td.score { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; }

/* Perfil: apelido e avatar lado a lado (um sob o outro no celular). */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.profile-grid .card { margin: 0; }
.profile-grid h2 { margin: 0 0 var(--space-2); font-size: 1.875rem; }
.profile-grid .card > p:not(.hint) { color: var(--color-muted); }
.profile-grid input[type=text] { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; min-height: 3.625rem; }

/* ---- Telas (D69, fatia T3) ---- */

/* Duas colunas (formulário + guia); uma só no celular. `.stack` empilha os blocos de uma coluna. */
.two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.stack > *, .two-col > .card { margin: 0; }
.office .flash .alert-title { display: block; font-size: 1.375rem; }
.office .flash p, .office .flash ul { margin: var(--space-1) 0 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 400; }
.office .flash ul { padding-left: var(--space-5); }
.dropzone { margin: var(--space-2) 0 var(--space-3); padding: var(--space-5) var(--space-4); border: var(--border-dash) dashed var(--card-border); border-radius: var(--radius-block); text-align: center; }
.dropzone input[type=file] { max-width: 100%; }
.office .card .actions { margin-top: var(--space-3); }
.office .card h2:first-child { margin-top: 0; }
@media (max-width: 56rem) {
    .two-col { grid-template-columns: minmax(0, 1fr); }
}

/* Editor: dados e estado do quiz à esquerda, perguntas à direita; uma coluna no celular. */
.back { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 600; }
.back + .page-head { margin-top: var(--space-1); }
.page-head .badge { margin-bottom: var(--space-2); }
.page-head form.actions { margin: 0; }
.editor-grid { display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.editor-grid h2 { margin: 0; font-size: 1.625rem; }
.editor-grid .card { margin: 0; }
.editor-grid .card > h2, .editor-grid form.card > h2 { margin-bottom: var(--space-2); }
.editor-grid aside .flash { margin: 0; }
.editor-grid .card input[type=text], .editor-grid .card select, .editor-grid .card textarea { display: block; width: 100%; max-width: none; }
.editor-grid textarea { min-height: 5rem; padding-top: var(--space-2); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.field-row label { flex: 1 1 10rem; }
.office .card .field-row label input[type=number] { max-width: 100%; }
.office .card form > button[type=submit] { margin-top: var(--space-2); }
.option-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.option-row input[type=text] { flex: 1 1 14rem; width: auto; min-width: 0; }
.option-row input[type=radio] { flex: none; width: 1.5rem; height: 1.5rem; }
.option-row .option-warning { margin: 0; flex-basis: 100%; }
.option-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.question-actions { margin-top: var(--space-3); }
.question-actions form { margin: 0; }
.office .card .question-actions form > button[type=submit] { margin: 0; }
.form-narrow { max-width: 40rem; }
.form-narrow input[type=text], .form-narrow select { display: block; width: 100%; max-width: none; }
@media (max-width: 56rem) {
    .editor-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Relatório do quiz: painel de sessões à esquerda, um cartão por pergunta à direita (barras por opção, só contagem). */
.badge-summary { --badge-bg: var(--hilite); margin-bottom: var(--space-2); }
.report-grid { display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.report-grid h2 { margin: 0; font-size: 1.625rem; }
.report-grid .panel { padding: var(--space-4) var(--space-4) var(--space-5); }
.report-grid .panel h2 { margin-bottom: var(--space-3); }
.report-grid .panel ul { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.report-grid .panel li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3); background: var(--chip); border-radius: var(--radius-block); box-shadow: 0 var(--lift-pressed) 0 var(--chip-shade); }
.report-grid .panel li strong { flex: 1 1 100%; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.report-grid .panel li span { color: var(--on-dark-muted); }
.report-grid .panel li a { margin-left: auto; font-weight: 600; }
.report-question { margin: 0; }
.report-question h3 { font-size: 1.3125rem; }
.report-question .meta { margin: 0 0 var(--space-2); }
.report-question ul { margin: var(--space-2) 0 0; }
.report-question table { margin-top: var(--space-1); }
.report-question td { padding: var(--space-1) var(--space-2); border-bottom: 0; }
.report-question td.num { width: 3rem; font-family: var(--font-display); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.report-question td.bar-cell { width: 45%; }
.report-question .bar { height: 1.125rem; border-radius: var(--radius-round); background: var(--card-line); overflow: hidden; }
.report-question .bar > span { display: block; height: 100%; background: var(--card-muted); }
.report-question .bar.correct > span { background: var(--good); }
.report-question .ok { color: var(--card-ok); font-weight: 700; }
@media (max-width: 56rem) {
    .report-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Telas (D69, fatia T4) ---- */

/* Resultado da sala: ranking completo (rola dentro do cartão, só apelido) à esquerda e um cartão por pergunta à direita (mesmo
   cartão `.report-question` do relatório). */
.result-grid { display: grid; grid-template-columns: 27.5rem minmax(0, 1fr); gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.result-grid h2 { margin: 0; font-size: 1.625rem; }
.result-grid .ranking-card { margin: 0; padding: var(--space-4) var(--space-4) var(--space-3); }
.result-grid .ranking-card h2 { margin-bottom: var(--space-2); }
.ranking-card .scroll { max-height: 40rem; overflow: auto; }
.ranking-card table { min-width: 0; }
.ranking-card th { position: sticky; top: 0; z-index: 1; padding: var(--space-1) var(--space-2); background: var(--card); }
.ranking-card td { padding: var(--space-1) var(--space-2); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.ranking-card td.pos { width: 3.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-card td.num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ranking-card th.num { text-align: right; }
.ranking-card .avatar-cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.ranking-card .avatar-cell .avatar { --avatar-size: var(--avatar-sm); flex: none; }
@media (max-width: 56rem) {
    .result-grid { grid-template-columns: minmax(0, 1fr); }
}
.page-head .back { margin: 0 0 var(--space-1); }

/* Permissões: selo do papel (criador amarelo, administrador lilás, jogador neutro), ação à direita, código do comando em ficha. */
.badge-role { --badge-bg: var(--hilite); }
.badge-plain { --badge-bg: var(--on-dark-muted); }
.badge + .badge { margin-left: var(--space-1); }
.office .table-card td.row-action { text-align: right; }
.row-action form { margin: 0; }
.office .lead code { padding: .125rem .5rem; font-size: .9375rem; color: var(--hilite); background: var(--chip); border-radius: var(--radius-sm); }

/* Início (D68, fatia E): à esquerda entrar numa sala e o resumo; à direita (só criador) sessões em andamento e quizzes. */
.home-grid { display: grid; grid-template-columns: minmax(0, 26.875rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
.home-grid:has(> .stack:only-child) { grid-template-columns: minmax(0, 40rem); }
.home-grid h2 { margin: 0; font-size: 1.75rem; }
.home-enter-row { display: flex; gap: var(--space-3); margin-top: var(--space-1); }
.home-enter-row input { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: .375rem; text-transform: uppercase; min-height: 3.5rem; }
.home-enter-row input::placeholder { text-transform: none; letter-spacing: .375rem; }
.home-enter-row button { flex: none; min-height: 3.5rem; padding: 0 var(--space-5); font-size: 1.375rem; }
.office .card .home-enter-row button[type=submit] { margin-top: 0; }
.stats-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-3) 0; }
.stats-compact .stat { padding: var(--space-3) var(--space-1); color: var(--card-ink); background: var(--card-hilite); box-shadow: inset 0 calc(var(--lift-button) * -1) 0 var(--card-hilite-edge); }
.stats-compact .stat dd, .stats-compact .stat dd[data-stat] { font-size: 2.375rem; color: var(--card-ink); }
.stats-compact .stat dt { color: var(--card-muted); }
.home-panel { padding: var(--space-4) var(--space-5) var(--space-5); }
.home-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.home-panel-head .actions { margin: 0 0 0 auto; }
.badge-count { --badge-bg: var(--hilite); }
.badge-count::before { content: none; }
.home-empty { margin: 0; color: var(--on-dark-muted); font-size: 1.0625rem; }
.home-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.home-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); background: var(--chip); border-radius: var(--radius-block); box-shadow: 0 var(--lift-pressed) 0 var(--chip-shade); }
.home-row-main { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.home-row-main strong, .home-row-title { overflow: hidden; font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; text-overflow: ellipsis; }
.home-row-title { flex: 1 1 10rem; min-width: 0; }
.home-row-title a { color: var(--game-text); text-decoration: none; }
.home-row-main span, .home-row .count { color: var(--on-dark-muted); }
.home-row-end { margin: 0; }
.home-row-note { flex: 1 1 14rem; margin: 0; color: var(--on-dark-muted); font-size: .9375rem; line-height: 1.4; }
.room-code { padding: .375rem var(--space-3); font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; letter-spacing: .1875rem; color: var(--card-ink); background: var(--card-hilite); border-radius: var(--radius-sm); }
@media (max-width: 56rem) {
    .home-grid, .home-grid:has(> .stack:only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* Entrada na sala (`/sala`, `/sala/{codigo}`) para quem está logado: tema de jogo com a mesma barra das telas do backoffice
   (`.with-menu` no corpo, base do bloco body_class das telas). O cabeçalho do jogo perde o logo, que já está na barra. */
.with-menu .live.game { min-height: 0; }