:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --muted: #9fb0c5;
  --deep: #07111f;
  --panel: rgba(11, 29, 49, .82);
  --line: rgba(255, 255, 255, .11);
  --cyan: #63e6ff;
  --violet: #a784ff;
  --orange: #ffac55;
  --green: #5cf2a5;
  --red: #ff7587;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--deep);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: linear-gradient(145deg, #07111f 0%, #091827 55%, #0d1630 100%); }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.ambient { position: fixed; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .16; }
.ambient-one { top: -15rem; left: -14rem; background: var(--cyan); }
.ambient-two { right: -14rem; bottom: -18rem; background: var(--violet); }

.topbar { position: relative; z-index: 10; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .8rem; padding: .5rem 0; border: 0; background: none; font-size: 1.12rem; font-weight: 850; cursor: pointer; }
.brand-mark { width: 2.35rem; height: 2.35rem; display: flex; align-items: end; justify-content: center; gap: 3px; padding: .52rem; border-radius: .8rem; background: linear-gradient(135deg, var(--orange), #ff7c5f); box-shadow: 0 .65rem 1.6rem rgba(255, 140, 80, .18); }
.brand-mark i { display: block; width: 3px; border-radius: 2px; background: #101827; }
.brand-mark i:nth-child(1) { height: 28%; }.brand-mark i:nth-child(2) { height: 58%; }.brand-mark i:nth-child(3) { height: 88%; }
.connection { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.connection i, .live-badge i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 .8rem currentColor; }
.connection.online i, .live-badge i { background: var(--green); }.connection.online span { color: #c8ffdf; }

main { position: relative; z-index: 1; }
.screen { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.hero-screen { min-height: calc(100vh - 76px); display: flex; flex-direction: column; justify-content: center; padding: 4rem 0 3rem; }
.hero-copy { max-width: 830px; }
.eyebrow, .section-kicker { margin: 0 0 .85rem; color: var(--cyan); font-size: .73rem; line-height: 1; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(3.3rem, 8vw, 6.6rem); line-height: .93; letter-spacing: -.07em; }
h1 em { color: var(--violet); font-style: normal; }
.intro { max-width: 670px; margin: 1.6rem 0 2.6rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.65; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.choice-card { position: relative; min-height: 190px; padding: 1.55rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid var(--line); border-radius: 1.35rem; background: rgba(14, 34, 57, .72); box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .13); cursor: pointer; transition: .2s ease; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-3px); border-color: rgba(99, 230, 255, .4); background: rgba(18, 43, 70, .9); outline: none; }
.choice-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: .8rem; background: rgba(167, 132, 255, .15); color: var(--violet); font-size: 1.2rem; }
.join-choice .choice-icon { background: rgba(99, 230, 255, .12); color: var(--cyan); }
.choice-label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.choice-card strong { margin-top: .35rem; font-size: 1.5rem; }
.choice-card small { margin-top: .45rem; color: var(--muted); font-size: .92rem; }
.arrow { position: absolute; right: 1.5rem; bottom: 1.45rem; font-size: 1.4rem; color: var(--cyan); }
.promise-row { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; color: #8195ad; font-size: .83rem; }

.form-screen { min-height: calc(100vh - 76px); padding: 2.2rem 0 4rem; }
.back-button { border: 0; background: none; padding: .7rem 0; color: var(--muted); cursor: pointer; }
.form-card { width: min(100%, 520px); margin: clamp(2rem, 8vh, 5rem) auto 0; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 1.7rem; background: var(--panel); box-shadow: 0 2rem 7rem rgba(0, 0, 0, .3); backdrop-filter: blur(18px); }
.step-pill { display: inline-flex; padding: .5rem .7rem; border-radius: 999px; background: rgba(167, 132, 255, .13); color: #c7b4ff; font-size: .67rem; font-weight: 900; letter-spacing: .14em; }
.step-pill.cyan { background: rgba(99, 230, 255, .1); color: var(--cyan); }
h2 { margin: 1rem 0 .5rem; font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1; letter-spacing: -.045em; }
.form-card > p, .host-panel > p, .room-heading p, .display-top p { color: var(--muted); line-height: 1.55; }
form { margin-top: 2rem; display: grid; gap: .65rem; }
label { margin-top: .7rem; color: #dce7f4; font-size: .82rem; font-weight: 750; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: .85rem; background: rgba(4, 15, 28, .72); color: var(--ink); outline: none; }
input { padding: 1rem 1.05rem; }
select { padding: .85rem 1rem; }
input:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(99, 230, 255, .1); }
.code-input { text-align: center; font-size: 1.7rem; font-weight: 900; letter-spacing: .26em; }
.primary-button, .secondary-button { width: 100%; min-height: 50px; margin-top: 1rem; border-radius: .85rem; cursor: pointer; font-weight: 850; transition: .18s ease; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: .7rem; border: 0; background: linear-gradient(135deg, #a47fff, #825ce8); box-shadow: 0 .8rem 2rem rgba(130, 92, 232, .22); }
.cyan-button { background: linear-gradient(135deg, #4eddfb, #22a9d4); color: #05131f; box-shadow: 0 .8rem 2rem rgba(34, 169, 212, .2); }
.primary-button:hover, .secondary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: wait; }
.secondary-button { border: 1px solid var(--line); background: rgba(255, 255, 255, .05); }
.text-button { width: 100%; margin-top: .7rem; padding: .7rem; border: 0; background: none; cursor: pointer; font-size: .82rem; font-weight: 700; }
.danger { color: var(--red); }

.room-screen { padding: 3rem 0 5rem; }
.room-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.room-heading h2 { margin-top: 0; }
.room-heading p { margin: .6rem 0 0; }
.room-code-box { min-width: 270px; padding: 1rem 1.2rem; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid rgba(99, 230, 255, .22); border-radius: 1rem; background: rgba(99, 230, 255, .07); }
.room-code-box span { color: var(--cyan); font-size: .65rem; font-weight: 900; letter-spacing: .15em; }
.room-code-box strong { grid-row: span 2; font-size: 2rem; letter-spacing: .12em; }
.room-code-box button { justify-self: start; padding: .25rem 0; border: 0; background: none; color: var(--muted); font-size: .72rem; cursor: pointer; }
.room-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .65fr); gap: 1rem; align-items: start; }
.live-game-panel { grid-column: 1 / -1; border-color:rgba(167,132,255,.28); background:linear-gradient(135deg,rgba(30,25,65,.92),rgba(9,31,49,.92)); }.live-game-panel h3{max-width:900px;font-size:clamp(1.25rem,3vw,2rem);line-height:1.25}.live-game-image{width:100%;max-height:42vh;margin-top:1rem;object-fit:contain;border-radius:.8rem;background:#050b13}.live-game-hint,.live-game-answer{margin-top:1rem;padding:.85rem 1rem;border-radius:.8rem;font-weight:750}.live-game-hint{background:rgba(255,172,85,.1);color:#ffe0aa}.live-game-answer{background:rgba(92,242,165,.1);color:#baffd7;font-size:1.12rem}
.panel { padding: 1.35rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--panel); backdrop-filter: blur(16px); }
.players-panel { min-height: 320px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.panel-heading h3, .host-panel h3, .assignment-panel h3 { margin: .35rem 0 0; font-size: 1.4rem; }
.live-badge { display: flex; align-items: center; gap: .45rem; color: #a8b8ca; font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.player-grid { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.player-chip { padding: .75rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255, 255, 255, .07); border-radius: .85rem; background: rgba(255, 255, 255, .035); }
.avatar { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .65rem; background: rgba(99, 230, 255, .12); color: var(--cyan); font-weight: 900; }
.player-chip strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.player-chip small { margin-left: auto; color: var(--muted); font-size: .68rem; }
.empty-state { min-height: 210px; display: grid; place-content: center; justify-items: center; color: #71859d; text-align: center; }
.empty-state span { font-size: 2rem; color: var(--cyan); }
.host-panel label { display: block; margin: 1.2rem 0 .45rem; }
.assignment-panel { text-align: center; }
.team-orb { width: 6rem; height: 6rem; margin: .7rem auto 1rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--violet), #6e4bd6); box-shadow: 0 1rem 3rem rgba(116, 77, 216, .3); font-size: 2.3rem; font-weight: 950; }
.assignment-panel p { color: var(--muted); line-height: 1.5; }
.team-board, .display-teams { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.team-card { padding: 1.2rem; border: 1px solid var(--team-line); border-radius: 1rem; background: var(--team-bg); }
.team-card h4 { margin: 0 0 .8rem; color: var(--team-color); font-size: 1rem; }
.team-card ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.team-card li { padding: .45rem .65rem; border-radius: .55rem; background: rgba(0, 0, 0, .15); font-size: .82rem; }

.display-screen { width: 100%; min-height: calc(100vh - 76px); padding: 3vw 5vw 5vw; }
.display-exit { position: fixed; right: 1rem; bottom: 1rem; z-index: 5; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: .7rem; background: rgba(7, 17, 31, .85); color: var(--muted); cursor: pointer; }
.display-top { display: grid; grid-template-columns: 1fr auto 150px; align-items: center; gap: 2.5rem; }
.display-top h2 { font-size: clamp(2.6rem, 5vw, 5.2rem); }
.display-top p { margin-bottom: 0; }.display-top p strong { color: var(--cyan); }
.display-code { text-align: center; }.display-code span { display: block; color: var(--cyan); font-size: .8rem; font-weight: 900; letter-spacing: .2em; }.display-code strong { font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: .08em; }
.qr-wrap { width: 150px; height: 150px; padding: 10px; border-radius: 10px; background: white; }.qr-wrap img, .qr-wrap canvas { width: 100% !important; height: 100% !important; }
.display-count { margin: 4vh 0 2vh; display: flex; align-items: baseline; gap: 1rem; }.display-count strong { font-size: clamp(3rem, 8vw, 7rem); color: var(--violet); }.display-count span { color: var(--muted); font-size: clamp(1.2rem, 2.3vw, 2rem); }
.display-teams { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.display-teams .team-card { min-height: 170px; }.display-teams .team-card h4 { font-size: 1.4rem; }.display-teams .team-card li { font-size: 1rem; }

.toast { position: fixed; z-index: 50; left: 50%; bottom: 1.5rem; transform: translateX(-50%); max-width: calc(100% - 2rem); padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #13263b; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35); font-size: .86rem; }
.toast.error { border-color: rgba(255, 117, 135, .4); color: #ffd5db; }
.loading-overlay { position: fixed; z-index: 60; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; background: rgba(4, 12, 23, .84); backdrop-filter: blur(8px); color: var(--muted); }
.spinner { width: 2.7rem; height: 2.7rem; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--cyan); border-radius: 50%; animation: spin .75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .topbar, .screen { width: min(100% - 1.25rem, 1180px); }
  .topbar { height: 66px; }.connection span { display: none; }
  .hero-screen { min-height: calc(100vh - 66px); padding: 2.6rem 0 2rem; }
  .action-grid, .room-layout { grid-template-columns: 1fr; }
  .choice-card { min-height: 158px; }.choice-card strong { font-size: 1.25rem; }
  .promise-row { gap: .6rem 1rem; font-size: .75rem; }
  .room-heading { align-items: stretch; flex-direction: column; }.room-code-box { min-width: 0; }
  .player-grid { grid-template-columns: 1fr; }
  .team-board { grid-template-columns: 1fr; }
  .display-top { grid-template-columns: 1fr auto; gap: 1rem; }.display-top > div:first-child { grid-column: 1 / -1; }.qr-wrap { width: 112px; height: 112px; }.display-code strong { font-size: 3rem; }
}

.live-game-image-wrap { position:relative; width:100%; margin-top:1rem; line-height:0; overflow:hidden; border-radius:.8rem; background:#050b13; }
.live-game-image-wrap .live-game-image { width:100%; max-height:48vh; margin:0; object-fit:contain; }
.tap-instruction { margin:.7rem 0 0; color:var(--cyan); font-weight:800; text-align:center; }
.guess-marker,.correct-marker { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.guess-marker { width:22px; height:22px; border:4px solid white; background:#ff5d77; box-shadow:0 0 1rem #ff5d77; }
.correct-marker { width:var(--size); height:var(--size); border:4px solid #ffd269; box-shadow:0 0 1.5rem #ffae48; animation:phonePulse .8s infinite alternate; }
.phone-score { margin-top:1rem; padding:1rem; border-radius:.8rem; background:linear-gradient(135deg,rgba(255,203,99,.18),rgba(167,132,255,.18)); font-size:1.2rem; font-weight:900; text-align:center; }
.trivia-buzzer { margin-top:1.2rem; text-align:center; }
.trivia-buzzer button { width:min(100%,420px); min-height:118px; border:0; border-radius:1.4rem; background:linear-gradient(145deg,#ff6b7f,#d82748); color:white; box-shadow:0 1rem 2.5rem rgba(216,39,72,.35),inset 0 -8px 0 rgba(91,5,24,.25); font-size:clamp(2rem,9vw,3.6rem); font-weight:950; letter-spacing:.04em; cursor:pointer; touch-action:manipulation; }
.trivia-buzzer button:active { transform:translateY(5px); box-shadow:0 .45rem 1rem rgba(216,39,72,.28),inset 0 -3px 0 rgba(91,5,24,.25); }
.trivia-buzzer button:disabled { opacity:.38; cursor:not-allowed; }
.trivia-buzzer p { margin:.8rem 0 0; color:var(--muted); font-weight:800; }
.room-screen.buzzer-mode { width:100%; min-height:calc(100vh - 76px); padding:0; }
.room-screen.buzzer-mode .room-heading,.room-screen.buzzer-mode .players-panel,.room-screen.buzzer-mode .assignment-panel,.room-screen.buzzer-mode .team-board,.room-screen.buzzer-mode .live-game-panel>.panel-heading,.room-screen.buzzer-mode .live-game-panel>.live-game-image-wrap,.room-screen.buzzer-mode .live-game-panel>.tap-instruction,.room-screen.buzzer-mode .live-game-panel>.live-game-hint,.room-screen.buzzer-mode .live-game-panel>.live-game-answer,.room-screen.buzzer-mode .live-game-panel>.phone-score { display:none!important; }
.room-screen.buzzer-mode .room-layout { display:block; }
.room-screen.buzzer-mode .live-game-panel { min-height:calc(100vh - 76px); display:grid; place-items:center; padding:1.25rem; border:0; border-radius:0; background:radial-gradient(circle at center,rgba(255,80,105,.12),transparent 55%),#050b13; }
.room-screen.buzzer-mode .trivia-buzzer { width:100%; margin:0; }
.room-screen.buzzer-mode .trivia-buzzer button { width:min(82vw,540px); height:min(82vw,540px); min-height:260px; border-radius:50%; }
.room-screen.buzzer-mode .trivia-buzzer p { display:none; }
.host-buzzer>strong { display:block; margin-top:.7rem; padding:.9rem; border-radius:.75rem; background:rgba(99,230,255,.09); color:var(--cyan); line-height:1.35; }
.buzz-actions { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.buzz-actions button { min-height:48px; border:0; border-radius:.7rem; font-weight:900; cursor:pointer; }
.buzz-actions .buzz-correct { background:#5cf2a5; color:#062517; }
.buzz-actions .buzz-wrong { background:#ff6f83; color:#2c0610; }
@keyframes phonePulse { to { transform:translate(-50%,-50%) scale(1.12); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }