/* 8.0.0: Live-Quiz – Handy (Spieler) und Beamer (Spielleitung) */
.lq { --lq-bg: #0E1320; color: #F4F6FB; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.lq-page { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% 0%, #26304A, #0B0F14 70%); display: flex; flex-direction: column; }
.lq-page #lq { flex: 1; max-width: 560px; width: 100%; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 14px 20px; box-sizing: border-box; }
.lq-foot { text-align: center; font-size: 12px; opacity: .55; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); } .lq-foot a { color: inherit; }
.lq-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: 22px; margin: 12px 0; }
.lq-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lq-join { display: flex; flex-direction: column; gap: 12px; margin-top: 8vh; }
.lq-logo { font: 900 26px system-ui; letter-spacing: .12em; text-align: center; } .lq-logo span { color: #FFB020; letter-spacing: .02em; font-weight: 700; }
.lq-pin-in, .lq-name-in { font-size: 26px; text-align: center; padding: 14px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .35); color: #fff; letter-spacing: .1em; width: 100%; box-sizing: border-box; }
.lq-name-in { font-size: 20px; letter-spacing: 0; }
.lq-big { font: 800 20px system-ui; padding: 16px; border-radius: 14px; border: 0; background: #FFB020; color: #111; cursor: pointer; width: 100%; }
.lq-big:disabled { opacity: .5; }
.lq-small { font-size: 13px; opacity: .7; margin: 0; } .lq-err { color: #FF8A8A; text-align: center; margin: 0; }
.lq-top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; opacity: .9; padding: 4px 2px; }
.lq-q { font: 700 20px/1.3 system-ui; margin: 12px 2px; }
.lq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lq-opt { position: relative; min-height: 92px; border: 0; border-radius: 14px; color: #fff; font: 700 17px/1.25 system-ui; padding: 12px 12px 12px 14px; text-align: left; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); overflow: hidden; }
.lq-opt.on { outline: 4px solid #fff; outline-offset: -4px; }
.lq-shape { font-size: 26px; opacity: .9; flex: 0 0 auto; }
.lq-timer { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; position: relative; margin: 6px 0; }
.lq-timer i { display: block; height: 100%; background: linear-gradient(90deg, #30A46C, #FFB020, #E5484D); transition: width .1s linear; }
.lq-count { font: 900 96px system-ui; color: #FFB020; line-height: 1; }
.lq-res.ok h2 { color: #4CE38F; } .lq-res.bad h2 { color: #FF6B6B; } .lq-res.near h2 { color: #FFB020; }
.lq-pts { font: 900 40px system-ui; }
.lq-player { display: flex; align-items: center; gap: 10px; text-align: left; } .lq-pn { display: flex; flex-direction: column; } .lq-pn span { font-size: 12px; opacity: .7; }
.lq-guest { border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 60%; flex: 0 0 auto; }
/* Beamer */
.lq-host { position: relative; min-height: 80vh; background: radial-gradient(ellipse at 50% 0%, #26304A, var(--lq-bg) 70%); border-radius: 16px; padding: 18px 26px 28px; box-sizing: border-box; }
.lq-host:fullscreen { border-radius: 0; padding: 24px 48px; overflow: auto; }
.lq-hbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; opacity: .9; margin-bottom: 10px; flex-wrap: wrap; }
.lq-btn { font: 800 16px system-ui; padding: 10px 18px; border-radius: 10px; border: 0; background: #FFB020; color: #111; cursor: pointer; } .lq-btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; } .lq-btn:disabled { opacity: .45; }
.lq-lobby { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 2vh; }
.lq-lobby h1, .lq-hq { font: 800 clamp(26px, 3.4vw, 48px)/1.2 system-ui; margin: 10px 0 16px; text-align: center; }
.lq-bigpin { font: 900 clamp(64px, 11vw, 150px) system-ui; letter-spacing: .06em; color: #FFB020; text-shadow: 0 8px 40px rgba(255, 176, 32, .35); line-height: 1; }
.lq-plist { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; max-width: 1100px; }
.lq-chip { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 4px 6px 4px 4px; animation: lqPop .35s ease-out; }
.lq-x { border: 0; background: none; color: inherit; opacity: .4; cursor: pointer; font-size: 18px; } .lq-x:hover { opacity: 1; }
@keyframes lqPop { from { transform: scale(.6); opacity: 0; } }
.lq-opts.host { gap: 16px; } .lq-opts.host .lq-opt { min-height: 120px; font-size: clamp(18px, 2vw, 30px); cursor: default; }
.lq-opt.dim { opacity: .35; } .lq-opt.right { outline: 5px solid #fff; outline-offset: -5px; }
.lq-dist { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-size: 18px; background: rgba(0, 0, 0, .25); }
.lq-dist i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .35); }
.lq-check { position: absolute; top: 8px; right: 12px; font-size: 30px; }
.lq-answered { text-align: center; font: 700 20px system-ui; margin-top: 16px; opacity: .85; }
.lq-explain { text-align: center; max-width: 900px; margin: 12px auto 0; font-size: 18px; opacity: .85; }
.lq-rank { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin: 0 auto; }
.lq-row { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 8px 14px; font-size: 18px; } .lq-row > b { margin-left: auto; font-size: 22px; }
.lq-place { width: 34px; font: 900 22px system-ui; opacity: .7; text-align: center; }
.lq-podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 10px 0 24px; }
.lq-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 200px; text-align: center; } .lq-step span { font-size: 13px; opacity: .7; }
.lq-block { width: 100%; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, rgba(255, 176, 32, .5), rgba(255, 176, 32, .15)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10px; font: 900 22px system-ui; }
.lq-block span { font-size: 34px; opacity: 1; }
.lq-step.s1 .lq-block { height: 170px; } .lq-step.s2 .lq-block { height: 120px; } .lq-step.s3 .lq-block { height: 90px; }
@media (max-width: 560px) { .lq-opt { min-height: 80px; font-size: 15px; } .lq-step { width: 110px; } }
@media (prefers-reduced-motion: reduce) { .lq-chip { animation: none; } }