/* Host Answer View — builds on the tokens in css/style.css (loaded first) */
.host-body { padding: max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) var(--space-6) max(var(--space-5), env(safe-area-inset-left)); }
.host-page { max-width: 760px; margin: 0 auto; outline: none; }
.host-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.host-header h1 { font-size: var(--fs-xl); font-weight: 900; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-1); }
.sync-status { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.sync-status::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--warning); }
.sync-status.is-synced { color: var(--success); }
.sync-status.is-synced::before { background: var(--success); box-shadow: 0 0 10px var(--success); }

.host-current { background: var(--surface); border: 1px solid rgba(242, 181, 68, 0.5); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-lg); }
.host-empty { color: var(--text-muted); text-align: center; }
.host-current-label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; color: var(--gold); margin-bottom: var(--space-2); }
.host-current h2 { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--space-4); text-wrap: balance; }
.host-answer-list { margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: ans; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
.host-answer-list li { counter-increment: ans; display: flex; gap: var(--space-3); align-items: baseline; font-weight: 700; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); }
.host-answer-list li::before { content: counter(ans); font-family: var(--font-display); font-weight: 900; color: var(--gold); min-width: 1.2ch; }
.host-answer-list li span { margin-left: auto; color: var(--text-muted); font-weight: 600; }
.host-answer-list li.is-done { opacity: 0.4; text-decoration: line-through; }
.host-turn-line { font-weight: 800; color: var(--error); }

.host-scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.host-score-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; min-width: 0; }
.host-score-card--b { border-top-color: var(--sky); }
.host-score-card .name { display: block; font-weight: 700; color: var(--text-muted); margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.host-score-card .value { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-xl); color: var(--gold); font-variant-numeric: tabular-nums; }
.host-score-card--b .value { color: var(--sky); }

.host-upcoming h2 { font-size: var(--fs-lg); font-weight: 800; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-1); }
.host-upcoming-note { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
#host-round-list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-3); }
#host-round-list > li { background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); border-left: 3px solid transparent; }
#host-round-list > li.is-current { border-left-color: var(--gold); background: rgba(242, 181, 68, 0.1); }
#host-round-list > li.is-past { opacity: 0.45; }
#host-round-list ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); columns: 2; }
#host-round-list ul li { font-size: var(--fs-sm); color: var(--text-muted); break-inside: avoid; }

@media (max-width: 560px) { .host-answer-list, .host-scoreboard { grid-template-columns: 1fr; } #host-round-list ul { columns: 1; } }

@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .host-header .btn, .sync-status, .skip-link { display: none !important; }
  .host-current, .host-score-card, #host-round-list > li, .host-answer-list li { background: none !important; box-shadow: none !important; border: 1px solid #999 !important; color: #000 !important; backdrop-filter: none !important; }
  .host-current-label, .host-turn-line, h1, h2, .host-answer-list li::before, .host-score-card .value, .host-score-card .name, #host-round-list ul li { color: #000 !important; }
  #host-round-list > li.is-past { opacity: 1; }
  #host-round-list > li { break-inside: avoid; }
}