/* ============================================================
   ME-RIISE QUIZ — Host / Projector (large screen)
   ============================================================ */
.host-shell { min-height:100vh; display:flex; flex-direction:column; }
.host-top { display:flex; align-items:center; justify-content:space-between; padding: 18px clamp(18px,3vw,40px); gap:16px; flex-wrap:wrap; }
.host-top .live-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.host-main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 10px clamp(18px,4vw,60px) 20px; text-align:center; }
.host-controls { padding: 16px clamp(18px,3vw,40px) 26px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ---------- Setup / pick quiz ---------- */
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; width:100%; max-width:900px; }
.pick-card { text-align:left; padding:24px; cursor:pointer; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.pick-card:hover { transform:translateY(-4px); box-shadow: var(--glow-blue); }
.pick-card h3 { margin-bottom:6px; }
.pick-card .meta { color:var(--text-300); font-size:0.85rem; }

/* ---------- Lobby (join screen) ---------- */
.lobby-wrap { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px,4vw,50px); width:100%; max-width:1080px; align-items:center; }
@media (max-width: 860px){ .lobby-wrap { grid-template-columns:1fr; } }
.join-panel { text-align:left; }
.join-panel .kicker { color:var(--text-300); letter-spacing:.14em; text-transform:uppercase; font-size:0.8rem; }
.pin-display { font-family:var(--font-display); font-weight:700; font-size: clamp(3.4rem, 11vw, 7rem); line-height:1; letter-spacing:.06em;
  background: var(--grad-primary-diag); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 8px 30px rgba(47,107,255,.4)); margin: 8px 0; }
.join-url { display:inline-flex; align-items:center; gap:10px; margin-top:6px; font-size:1.05rem; color:var(--text-200); }
.join-url b { color: var(--cyan); }
.qr-panel { display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-panel .qr-frame { padding:16px; }

.players-live { margin-top: 30px; }
.players-live .head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.players-live .count-big { font-family:var(--font-display); font-weight:700; font-size:2rem; }
.player-grid { display:flex; flex-wrap:wrap; gap:10px; }
.player-name-chip { padding:10px 16px; border-radius:var(--r-pill); font-weight:600; display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.07); border:1px solid var(--glass-border); animation: popIn .45s var(--ease-spring) both; }
.player-name-chip .av { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:#04122b;font-size:.72rem;font-weight:700; }

/* ---------- Question (projector) ---------- */
.host-q-count { font-family:var(--font-display); color:var(--text-300); font-size:1.2rem; margin-bottom:12px; }
.host-q-text { font-family:var(--font-display); font-weight:700; font-size: clamp(1.8rem, 4.6vw, 3.4rem); line-height:1.2; max-width:20ch; margin: 0 auto 10px; }
.host-q-image { max-height:230px; border-radius:var(--r-lg); margin: 10px auto 0; }
.host-timer-wrap { display:flex; align-items:center; justify-content:center; gap:24px; margin: 22px 0 26px; }
.host-timer { position:relative; width:120px; height:120px; }
.host-timer svg { transform: rotate(-90deg); }
.host-timer .track { stroke: rgba(255,255,255,.12); }
.host-timer .bar { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; filter: drop-shadow(0 0 10px rgba(34,230,255,.6)); }
.host-timer .num { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:3rem; }
.host-timer.danger .bar { stroke: var(--danger); }
.host-timer.danger .num { color: var(--danger); animation: countPulse .5s ease infinite; }
.answered-count { font-family:var(--font-display); font-weight:700; font-size:1.6rem; }
.answered-count small { display:block; font-size:.8rem; color:var(--text-300); font-weight:500; }

.host-answers { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; max-width:900px; margin-inline:auto; }
.host-answer { --c:var(--a-blue); display:flex; align-items:center; gap:16px; padding:22px 24px; border-radius:var(--r-md);
  background:var(--c); color:#fff; font-weight:600; font-size: clamp(1rem,2.2vw,1.4rem); text-align:left; position:relative; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.3); transition: opacity var(--dur), transform var(--dur); }
.host-answer .shape { font-size:1.6rem; flex:none; }
.host-answer[data-i="0"]{ --c:var(--a-red); } .host-answer[data-i="1"]{ --c:var(--a-blue); }
.host-answer[data-i="2"]{ --c:var(--a-yellow); color:#3a2b00; } .host-answer[data-i="3"]{ --c:var(--a-green); }
.host-answer .cnt { margin-left:auto; font-family:var(--font-display); font-weight:700; opacity:.9; }
.host-answer.wrong { opacity:.35; }
.host-answer.correct { box-shadow:0 0 0 4px #fff, 0 0 40px var(--success); transform:scale(1.02); }
.host-answer .distbar { position:absolute; left:0; bottom:0; height:5px; background:rgba(255,255,255,.85); width:0; transition:width .8s var(--ease-out); }

/* ---------- Leaderboard (animated bars) ---------- */
.lb-wrap { width:100%; max-width:820px; }
.lb-title { margin-bottom:20px; }
.lb-bars { display:flex; flex-direction:column; gap:12px; }
.lb-bar { display:flex; align-items:center; gap:16px; transition: transform .6s var(--ease-spring); }
.lb-bar .pos { font-family:var(--font-display); font-weight:700; font-size:1.4rem; width:48px; text-align:right; }
.lb-bar .track { flex:1; height:52px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); position:relative; overflow:hidden; }
.lb-bar .fill { height:100%; border-radius:var(--r-pill); background:var(--grad-primary); display:flex; align-items:center; padding:0 18px; gap:12px;
  transform-origin:left; animation: barGrow .8s var(--ease-out) both; min-width:150px; }
.lb-bar .fill .av { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#04122b;font-weight:700;font-size:.85rem; }
.lb-bar .fill .nm { font-weight:700; color:#04122b; }
.lb-bar .sc { font-family:var(--font-display); font-weight:700; font-size:1.3rem; width:90px; }
.lb-bar:nth-child(1) .fill { background: var(--grad-gold); }
.lb-bar:nth-child(2) .fill { background: linear-gradient(135deg,#eef3fb,#c3cede); }
.lb-bar:nth-child(3) .fill { background: linear-gradient(135deg,#f4c58c,#d98b4e); }

/* ---------- Podium (winners) ---------- */
.podium-wrap { text-align:center; width:100%; }
.podium-wrap h1 { font-size: clamp(2.2rem,6vw,4rem); margin-bottom:8px; }
.podium { display:flex; align-items:flex-end; justify-content:center; gap: clamp(12px,3vw,34px); margin-top: 40px; }
.podium .col { display:flex; flex-direction:column; align-items:center; gap:14px; animation: fadeInUp .7s var(--ease-out) both; }
.podium .col .who { text-align:center; }
.podium .col .medal { font-size: clamp(2.4rem,6vw,3.6rem); animation: float 3s ease-in-out infinite; }
.podium .col .nm { font-family:var(--font-display); font-weight:700; font-size: clamp(1rem,2.4vw,1.4rem); }
.podium .col .sc { color: var(--cyan); font-weight:700; }
.podium .stand { width: clamp(90px,20vw,180px); border-radius:16px 16px 0 0; display:grid; place-items:start center; padding-top:14px;
  font-family:var(--font-display); font-weight:700; font-size:2rem; color:#04122b; box-shadow: var(--glow-soft); }
.podium .p1 .stand { height: clamp(160px,26vh,240px); background: var(--grad-gold); }
.podium .p2 .stand { height: clamp(120px,20vh,180px); background: linear-gradient(180deg,#eef3fb,#c3cede); }
.podium .p3 .stand { height: clamp(90px,16vh,140px); background: linear-gradient(180deg,#f4c58c,#d98b4e); }
.podium .p1 { order:2; } .podium .p2 { order:1; animation-delay:.15s; } .podium .p3 { order:3; animation-delay:.3s; }

/* fullscreen button */
.fs-btn { position:fixed; bottom:16px; right:16px; z-index:40; }