/* City Quiz host mode (no phones). Builds on /style.css tokens. High contrast, readable at distance. */
#intro h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
#intro p { margin-top: 8px; }
#enNote { font-size: .9rem; }
.hm-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin-top: 14px; }
.hm-panel h2 { font-size: 1.1rem; margin-bottom: 8px; }
.hm-sel { width: 100%; min-height: 48px; font-weight: 800; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); padding: 8px 12px; }
.hm-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-seg button { min-width: 56px; min-height: 48px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); font-weight: 900; cursor: pointer; }
.hm-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.hm-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 12px; }
.hm-names input { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); padding: 8px 12px; font-weight: 700; }
.hm-err { color: var(--neg); font-weight: 800; margin-top: 8px; }
.hm-gap { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* stage */
body.stage #intro, body.stage #how { display: none; }
body.stage #host { max-width: none; padding: 0; }
.hm-stage { min-height: 100dvh; display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 1.6vw, 24px); background: var(--bg); color: var(--text); }
.hm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-city { font-weight: 900; color: var(--accent); }
.hm-pos { font-weight: 800; color: var(--muted); flex: 1; font-variant-numeric: tabular-nums; }
.hm-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.hm-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.4vh, 28px); width: 100%; max-width: 1500px; margin: 0 auto; }
.hm-q { font-size: clamp(1.7rem, 4.6vw, 4.2rem); line-height: 1.15; font-weight: 900; text-align: center; overflow-wrap: anywhere; padding: 0 2vw; }
.hm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vw, 20px); list-style: none; }
.hm-opt { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); background: var(--surface); border: 3px solid var(--text); border-radius: clamp(14px, 1.8vw, 26px); padding: clamp(10px, 1.6vw, 24px); font-weight: 900; font-size: clamp(1.15rem, 2.7vw, 2.5rem); overflow-wrap: anywhere; transition: opacity .25s, transform .25s; }
.hm-opt b { flex: 0 0 auto; width: 1.7em; height: 1.7em; border-radius: .4em; background: var(--text); color: var(--bg); display: grid; place-items: center; }
.hm-opt.right { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 22%, var(--surface)); transform: scale(1.02); }
.hm-opt.right b { background: var(--pos); color: var(--state-ink); }
.hm-opt.dim { opacity: .3; }
.hm-ans { text-align: center; font-size: clamp(1rem, 1.8vw, 1.5rem); min-height: 2.4em; }
.hm-ans a { color: var(--text); font-weight: 800; }
.hm-nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hm-nav .btn { flex: 1 1 220px; max-width: 420px; font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
.hm-keys { text-align: center; color: var(--muted); font-size: .85rem; }
@media (hover: none) { .hm-keys { display: none; } }
.hm-score { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.hm-team { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 8px 14px; background: var(--surface); border: 3px solid var(--line); border-radius: 16px; cursor: pointer; text-align: left; font-weight: 900; color: var(--text); }
.hm-team .k { flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: .5em; background: var(--surface-2); display: grid; place-items: center; font-size: .95rem; }
.hm-team .nm { flex: 1; overflow-wrap: anywhere; font-size: clamp(1rem, 1.6vw, 1.5rem); }
.hm-team .pt { font-size: clamp(1.5rem, 2.8vw, 2.6rem); font-variant-numeric: tabular-nums; }
.hm-team[aria-pressed="true"] { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 20%, var(--surface)); }
.hm-team[aria-pressed="true"] .k { background: var(--pos); color: var(--state-ink); }
.hm-qr { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: grid; place-items: center; z-index: 50; padding: 16px; }
.hm-qr[hidden] { display: none; }
.hm-qrbox { background: var(--surface); border-radius: 24px; padding: 22px; max-width: 460px; text-align: center; }
.hm-qrbox svg, .hm-qrfinal svg { width: min(70vw, 320px); height: auto; display: block; margin: 12px auto; border-radius: 8px; }
.hm-qrfinal { text-align: center; }
.hm-final { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.hm-final li { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; font-size: clamp(1.1rem, 2.4vw, 1.8rem); font-weight: 900; }
.hm-final li.p1 { border: 3px solid var(--accent); font-size: clamp(1.3rem, 3vw, 2.2rem); }
.hm-final .pl { color: var(--muted); min-width: 2em; }
.hm-final .nm { flex: 1; overflow-wrap: anywhere; }
.hm-winner { text-align: center; font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.4rem); color: var(--pink); margin-top: 8px; }
@media (max-width: 640px) { .hm-opts { grid-template-columns: 1fr; } .hm-score { grid-template-columns: 1fr 1fr; } .hm-q { font-size: 1.5rem; } }
@media (max-height: 520px) and (orientation: landscape) { .hm-q { font-size: clamp(1.2rem, 3.4vw, 2rem); } .hm-opt { padding: 6px 12px; font-size: 1.1rem; } .hm-team { min-height: 48px; } }