/* File d'attente du village : carte crème et verte sur l'image d'accueil, légère sur téléphone. */
#screen-queue.active { display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.queue-card { position: relative; width: min(460px, 100%); padding: 28px; text-align: center; }
.queue-card .brand { font: 600 26px var(--serif); color: var(--sage); margin-bottom: 8px; }
.queue-status h2 { font: 600 21px/1.25 var(--serif); color: var(--sage); margin: 6px 0 10px; }
.queue-status p { margin: 6px 0; }
.queue-pos { font-weight: 700; font-size: 17px; color: var(--ink); background: var(--cream-2); border-radius: 12px; padding: 10px 12px; }
.queue-count { font-weight: 700; color: var(--bordeaux); font-variant-numeric: tabular-nums; }
.queue-actions { display: grid; gap: 8px; margin: 16px 0 10px; }
.queue-actions .btn { min-height: 48px; }
.queue-sound { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 4px 0 10px; cursor: pointer; }
.queue-more { text-align: left; background: #fffaf2; border: 1px solid var(--panel-line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.queue-more summary { cursor: pointer; font-weight: 600; color: var(--sage); }
.queue-tip p { margin: 4px 0 6px; }
.queue-card > .hint { margin: 10px 0 0; }
.left-card { position: relative; width: min(420px, 100%); padding: 28px; text-align: center; }
#screen-left.active { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
@media (max-width: 430px) { .queue-card, .left-card { padding: 20px 16px; } .queue-status h2 { font-size: 19px; } }

/* Fond allégé (26 Kio) : la page d'attente ne charge ni le décor du monde ni l'image d'accueil complète. */
.auth-bg.queue-bg { background-image: url('/assets/00_reference_validee.sm.webp'); }