/* Hosted live games: the host's big screen (host.html) and the players' phones (join.html). */
.host, .join { position: relative; z-index: 1; padding: 8px clamp(16px, 4vw, 48px) 60px; }
.hs[hidden], .js[hidden], .jq-input[hidden] { display: none !important; }
.host-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--muted); }
.host-badge img { width: 28px; height: 28px; border-radius: 50%; }
.host-note { color: var(--muted); font-size: 14px; }
.hub-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }

/* Set up */
.host-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 18px 0 22px; }
.hg { padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; color: var(--text); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.25s var(--spring), box-shadow 0.2s; }
.hg:hover { transform: translateY(-3px); }
.hg.on { box-shadow: inset 0 0 0 2px var(--gold), 0 10px 30px rgba(0, 0, 0, 0.35); }
.hg-img { display: block; aspect-ratio: 16 / 9; background: center / cover no-repeat; }
.hg b { display: block; padding: 10px 12px; font: 600 15px var(--serif); }
.host-opts { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.host-opts label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.host-opts select { height: 44px; padding: 0 12px; border-radius: 12px; border: 0; background: var(--glass-2); color: var(--text); font: 600 15px inherit; box-shadow: inset 0 0 0 1px var(--line); }

/* Lobby */
.lobby-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.join-url { color: var(--gold); font-weight: 600; }
.join-code { font: 800 clamp(64px, 11vw, 150px) / 1 var(--serif); letter-spacing: 0.12em; color: #fff; margin: 10px 0 14px; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); }
.qr { padding: 14px; background: #fff; border-radius: 18px; }
.lobby-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.lobby-players { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lobby-players li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; border-radius: 999px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; animation: hub-in 0.5s var(--spring) both; }
.lobby-players button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--muted); cursor: pointer; }

/* Question and reveal (big screen) */
.hq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-weight: 800; color: var(--muted); }
.hq-timer { min-width: 64px; text-align: center; font: 800 40px var(--serif); color: var(--text); }
.hq-timer.low { color: var(--rose); animation: stripFlash 1s ease-in-out infinite; }
.hq-stage { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; height: calc(100vh - 180px); min-height: 460px; }
.hq-photo, .jq-photo { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: var(--shadow); }
.hq-img, .hq-fill { position: absolute; inset: 0; background: center / cover no-repeat; }
.hq-fill { display: none; inset: -40px; filter: blur(28px) brightness(0.45); }
.fit .hq-fill { display: block; }
.fit .hq-img { background-size: contain; }
.hq-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hq-q { margin: 0; font: 600 clamp(26px, 2.6vw, 42px) / 1.12 var(--serif); }
.hq-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.hq-options { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hq-options li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--glass-2); font-weight: 700; font-size: 18px; }
.hq-options b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1206; flex: none; }
#revealBtn, #nextBtn { margin-top: auto; align-self: flex-start; }
.hr-visual { position: relative; border-radius: var(--radius); overflow: hidden; background: rgba(7, 10, 18, 0.5); box-shadow: var(--shadow); }
#rGlobe { position: absolute; inset: 0; }
.hr-answer { margin: 0; font-size: 18px; color: var(--muted); }
.hr-answer b { color: var(--gold); }
.hr-fact { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.hr-board { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hr-board li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--glass); font-weight: 700; }
.hr-board li span { color: var(--faint); }
.hr-board.wide { max-width: 640px; margin: 20px auto; }
.hr-scale { position: absolute; left: 6%; right: 6%; top: 18%; height: 90px; }
.hr-line { position: absolute; left: 0; right: 0; top: 44px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); opacity: 0.5; }
.hr-mark { position: absolute; top: 36px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #8ff0b4; box-shadow: 0 0 0 3px rgba(7, 10, 18, 0.7); }
.hr-mark span { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--muted); }
.hr-mark.answer { width: 28px; height: 28px; margin-left: -14px; top: 32px; background: var(--gold); z-index: 2; }
.hr-mark.answer span { color: var(--gold); font-size: 16px; font-weight: 800; bottom: auto; top: 36px; }
.hr-ends { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: space-between; color: var(--faint); font-size: 12px; font-weight: 700; }
.hr-photo { position: absolute; left: 6%; right: 6%; bottom: 6%; top: 46%; border-radius: 16px; background: center / cover no-repeat; opacity: 0.9; }
.hr-bars { position: absolute; left: 6%; right: 6%; top: 8%; display: flex; flex-direction: column; gap: 10px; }
.hr-bar { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 40px; gap: 10px; align-items: center; font-weight: 700; }
.hr-bar i { height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.25); transition: width 0.8s var(--ease); }
.hr-bar.right { color: var(--gold); }
.hr-bar.right i { background: linear-gradient(90deg, var(--gold-3), var(--gold)); }
.podium-h { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 20px 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 180px; padding: 16px 12px; border-radius: 18px 18px 0 0; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.pod b { font: 600 22px var(--serif); } .pod span { color: var(--muted); font-weight: 700; } .pod em { font: 800 40px var(--serif); font-style: normal; color: var(--gold); }
.pod.p1 { min-height: 220px; box-shadow: inset 0 0 0 2px var(--gold); } .pod.p2 { min-height: 170px; } .pod.p3 { min-height: 140px; }

/* Phones */
.join { max-width: 560px; margin: 0 auto; padding-top: 24px; }
.join-input { display: block; width: 100%; height: 56px; margin: 0 0 12px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--glass-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); font: 700 20px var(--sans, inherit); }
#codeInput { font: 800 34px var(--serif); letter-spacing: 0.3em; text-align: center; text-transform: uppercase; }
.join-me { color: var(--gold); font-weight: 700; }
.jq-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-weight: 800; }
.jq-top .hq-timer { font-size: 30px; }
.jq-photo { height: 30vh; min-height: 180px; margin: 8px 0 12px; }
.jq-q { margin: 0 0 10px; font: 600 24px / 1.15 var(--serif); }
#jClues { margin-bottom: 12px; }
.jq-map { position: relative; margin-bottom: 10px; }
#jGlobe { height: 42vh; min-height: 260px; border-radius: 18px; overflow: hidden; background: rgba(7, 10, 18, 0.4); }
.jq-input .btn { width: 100%; }
.jq-value { font: 600 44px var(--serif); margin: 6px 0; }
#priceRange { width: 100%; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 12px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), rgba(255, 255, 255, 0.12) var(--p, 50%)); margin: 10px 0; }
#priceRange::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 6px rgba(232, 192, 122, 0.25); }
.jq-ends { display: flex; justify-content: space-between; color: var(--faint); font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.jq-options { display: grid; gap: 10px; }
.jq-options .option { opacity: 1; animation: none; display: flex; gap: 12px; align-items: center; text-align: left; padding: 18px 16px; font-size: 17px; color: var(--text); border: 0; border-radius: 16px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.jq-options .option b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1206; flex: none; }
.jr-score { display: flex; align-items: baseline; gap: 12px; margin: 10px 0; }
.jr-score b { font: 800 72px var(--serif); color: var(--gold); }
.jr-score span { color: var(--muted); font-weight: 700; }
@media (max-width: 860px) {
  .hq-stage { grid-template-columns: 1fr; height: auto; }
  .hq-photo, .hr-visual { height: 50vh; }
  .lobby-grid { grid-template-columns: 1fr; }
}
.hostpage a.brand { color: inherit; text-decoration: none; }
.invite { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; }