/* Live rooms: host board (/live/) and student phone view (/join/). */
:root { --lv-red: #e2453c; --lv-blue: #2f6fd1; --lv-yellow: #d89a00; --lv-green: #3c8f37; --lv-gold: #ffd25e; }
.lv-conn { margin-left: auto; color: var(--lv-gold); font-weight: 700; }
.lv-error { color: #ffb0a6 !important; font-weight: 700; }
.lv-kbd { display: inline-block; font: 700 .7em var(--font-body); padding: 1px 6px; margin-left: 4px; border-radius: 5px; border: 1.5px solid currentColor; opacity: .6; vertical-align: middle; }
.lv-tips { text-align: center; color: rgba(244,241,232,.55); font-size: .9rem; margin: 14px 0 0; }
.lv-tips .lv-kbd { margin: 0 2px; }
.lv-note { color: rgba(244,241,232,.55); font-size: .8rem; margin: 2px 0 0; text-align: right; }
.lv-howto { list-style: none; padding: 0; margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lv-howto li { background: rgba(0,0,0,.2); border: 2px dashed var(--s-line); border-radius: 999px; padding: 5px 14px; font-weight: 700; color: rgba(244,241,232,.85); }

/* ---------- lobby ---------- */
.lv-lobby { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.lv-lobby-main { text-align: center; }
.lv-step { font: 700 clamp(1.3rem, 2.4vw, 1.9rem) var(--font-display); color: rgba(244,241,232,.9); margin: 4px 0; }
.lv-step b { color: var(--lv-gold); }
.lv-code { font: 700 clamp(4rem, 11vw, 8.5rem)/1 var(--font-display); letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.25); border: 3px dashed rgba(244,241,232,.35); border-radius: 18px; padding: 10px 28px; display: inline-block; margin: 8px 0 6px; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.lv-qr { background: #fff; border-radius: 14px; padding: 10px 10px 6px; text-align: center; color: var(--ink); font-weight: 700; width: 240px; transform: rotate(2deg); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.lv-qr svg { width: 100%; height: auto; display: block; }
.lv-lobby-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin: 16px 0 6px; padding: 12px 16px; background: rgba(0,0,0,.18); border-radius: 14px; }
.lv-lobby-bar .tool-row { margin: 0; }
.lv-big-count { font: 700 1.3rem var(--font-display); color: rgba(244,241,232,.85); display: flex; align-items: baseline; gap: 6px; }
.lv-big-count b { font-size: 3rem; line-height: 1; color: var(--lv-gold); }
.lv-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lv-opts label { display: inline-flex; gap: 8px; align-items: center; color: rgba(244,241,232,.8); font-weight: 600; }
.lv-check input { width: 20px; height: 20px; accent-color: var(--lv-gold); }
.lv-sub { color: var(--lv-gold); font: 700 1.5rem var(--font-hand); margin: 12px 0 8px; text-align: center; }
.lv-wait { animation: lvBreath 2s ease-in-out infinite; }
@keyframes lvBreath { 50% { opacity: .45; } }
.lv-players { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.tool-panel .lv-player { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.13); border: 2px solid transparent; border-radius: 999px; padding: 5px 16px 5px 6px; font: 700 1.15rem var(--font-display); transform: rotate(var(--tilt, 0deg)); animation: lvJoin .55s cubic-bezier(.3,1.6,.5,1) both; }
.tool-panel .lv-player .lv-av { font-size: 1.5rem; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(0,0,0,.2); border-radius: 50%; }
.tool-panel .lv-player:hover { background: rgba(255,107,90,.35); }
.tool-panel .lv-player.is-confirm { background: #c0392b; color: #fff; padding: 9px 16px; animation: none; }
.lv-player.is-off { opacity: .4; }
@keyframes lvJoin { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15) rotate(var(--tilt, 0deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--tilt, 0deg)); } }
.tool-panel .lv-player.team-red { border-color: var(--lv-red); } .tool-panel .lv-player.team-blue { border-color: #5aa2ff; }
.tool-panel .lv-player.team-yellow { border-color: var(--lv-gold); } .tool-panel .lv-player.team-green { border-color: #7dd87a; }

/* ---------- in-game header ---------- */
.lv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(0,0,0,.2); border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; color: rgba(244,241,232,.85); }
.lv-head b { color: #fff; }
.lv-code-sm { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .05em; color: var(--lv-gold) !important; }
.lv-count { font: 700 1.2rem var(--font-display); }

/* ---------- question ---------- */
.lv-q { display: flex; flex-direction: column; }
.lv-qtext { margin: 10px auto 14px !important; }
.lv-qtext.is-small { font-size: clamp(1.3rem, 3vw, 2.2rem) !important; margin: 4px auto 12px !important; }
.lv-getready { display: none; }
.lv-q.is-ready .qs-head { order: -2; justify-content: center; }
.lv-q.is-ready .lv-getready { display: flex; flex-direction: column; align-items: center; gap: 4px; order: -1; margin: 6px 0 0; }
.lv-getready span { font: 700 1.8rem var(--font-hand); color: var(--lv-gold); }
.lv-getready b { display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; background: var(--lv-gold); color: #3b2a00; font: 700 5rem/1 var(--font-display); box-shadow: 0 8px 0 #c99500; animation: lvBeat 1s ease-out; }
@keyframes lvBeat { 0% { transform: scale(1.5); opacity: .3; } 40% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
.lv-q.is-ready .lv-qtext { font-size: clamp(2rem, 5vw, 3.6rem); animation: pop .5s ease both; }
.lv-q.is-ready .lv-answers, .lv-q.is-ready .lv-qbar, .lv-q.is-ready .pbar, .lv-q.is-ready .lv-actions { display: none !important; }
.lv-qbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.lv-clock { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); border: 5px solid #7dd87a; transition: border-color .3s; }
.lv-clock b { font: 700 2.4rem/1 var(--font-display); color: #fff; }
.lv-clock.is-low { border-color: #ff6b5a; animation: lvShake .4s ease infinite; }
.lv-clock.is-low b { color: #ffb0a6; }
@keyframes lvShake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.lv-answered-big { margin-left: auto; text-align: center; font: 700 1rem var(--font-display); color: rgba(244,241,232,.75); }
.lv-answered-big b { display: block; font-size: 2.6rem; line-height: 1; color: var(--lv-gold); }
.lv-answered-big b.bump { animation: lvBump .35s ease; }
@keyframes lvBump { 50% { transform: scale(1.35); } }
.lv-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.lv-ans { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; color: #fff; font: 700 clamp(1.05rem, 2.2vw, 1.7rem) var(--font-display); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2); min-height: 84px; animation: pop .35s ease both; transition: opacity .4s, filter .4s; }
.lv-ans.ans-0 { background: var(--lv-red); } .lv-ans.ans-1 { background: var(--lv-blue); } .lv-ans.ans-2 { background: var(--lv-yellow); } .lv-ans.ans-3 { background: var(--lv-green); }
.lv-shape { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 10px; background: rgba(255,255,255,.18); font-size: 1.6rem; }
.lv-text { position: relative; flex: 1; }
.lv-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.16); transition: width .8s ease; }
.lv-dist { position: relative; font-size: 1.7rem; white-space: nowrap; }
.lv-ans.is-dim { opacity: .35; filter: grayscale(.5); }
.lv-ans.is-right { outline: 5px solid #fff; outline-offset: -2px; animation: lvRight .6s ease both; }
@keyframes lvRight { 30% { transform: scale(1.04); } }
.lv-actions { margin-top: 14px; }

/* ---------- reveal ---------- */
.lv-pct { font: 700 1.2rem var(--font-display); padding: 4px 14px; border-radius: 999px; background: rgba(0,0,0,.28); color: #fff; animation: pop .4s .3s ease both; }
.lv-pct.is-good { background: #3c8f37; } .lv-pct.is-low { background: #b8432f; }
.lv-reveal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.lv-reveal .lv-answers { grid-template-columns: 1fr 1fr; margin-top: 0; }
.lv-reveal .lv-ans { min-height: 66px; font-size: clamp(1rem, 1.7vw, 1.35rem); padding: 12px 14px; }
.lv-reveal .lv-shape { width: 40px; height: 40px; font-size: 1.2rem; }
.lv-fast, .lv-hint { margin: 12px 0 0; color: rgba(244,241,232,.9); font-weight: 700; font-size: 1.1rem; }
.lv-fast b { color: var(--lv-gold); }
.lv-hint { color: #ffd9a0; }
.lv-side .lv-sub { margin-top: 0; }
.lv-board { list-style: none; padding: 0; margin: 0 auto; width: 100%; max-width: 620px; text-align: left; }
.lv-board li { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.22); border-left: 5px solid transparent; border-radius: 10px; padding: 7px 12px; margin: 6px 0; font: 700 1.15rem var(--font-display); color: #fff; animation: lvSlide .45s ease both; }
.lv-board li:first-child { background: rgba(255,210,94,.18); }
@keyframes lvSlide { from { transform: translateX(-30px); opacity: 0; } }
.lv-board .lv-av { font-size: 1.35rem; }
.lv-rank { width: 30px; height: 30px; border-radius: 50%; background: var(--lv-gold); color: #3b2a00; display: grid; place-items: center; font-size: .95rem; flex: none; }
.lv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-gain { color: #7dd87a; font-size: .95rem; }
.lv-streak { font-size: .95rem; color: #ffb36b; }
.lv-up { color: #7dd87a; font-size: .85rem; }
.lv-board li.team-red { border-left-color: var(--lv-red); } .lv-board li.team-blue { border-left-color: #5aa2ff; } .lv-board li.team-yellow { border-left-color: var(--lv-gold); } .lv-board li.team-green { border-left-color: #7dd87a; }
.lv-teams { display: grid; gap: 8px; margin-bottom: 14px; }
.lv-team { display: grid; grid-template-columns: 7.5em 1fr 3.4em; align-items: center; gap: 10px; font: 700 1.05rem var(--font-display); color: #fff; }
.lv-team small { opacity: .6; }
.lv-team .lv-bar-track { height: 26px; }
.lv-team b { text-align: right; }
.lv-team.team-red i { background: var(--lv-red); } .lv-team.team-blue i { background: var(--lv-blue); } .lv-team.team-yellow i { background: var(--lv-yellow); } .lv-team.team-green i { background: var(--lv-green); }

/* ---------- final podium ---------- */
.lv-final { text-align: center; padding: 6px 0 10px; }
.lv-final-title { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); margin: 4px 0 10px; animation: lvBreath 1.2s ease-in-out infinite; }
.lv-final.is-done .lv-final-title { animation: pop .5s ease; }
.lv-teamwin { display: inline-block; font: 700 1.6rem var(--font-display); color: #fff; padding: 6px 20px; border-radius: 999px; margin: 0 0 8px; opacity: 0; }
.lv-final.is-done .lv-teamwin { opacity: 1; animation: pop .5s ease; }
.lv-teamwin.team-red { background: var(--lv-red); } .lv-teamwin.team-blue { background: var(--lv-blue); } .lv-teamwin.team-yellow { background: var(--lv-yellow); } .lv-teamwin.team-green { background: var(--lv-green); }
.lv-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; width: 100%; max-width: 680px; margin: 10px auto 14px; min-height: 300px; }
.lv-podium > div { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; font-family: var(--font-display); opacity: 0; transform: translateY(40px); transition: opacity .5s, transform .6s cubic-bezier(.3,1.5,.5,1); }
.lv-podium > div.is-shown { opacity: 1; transform: none; }
.lv-podium b { font-size: 1.35rem; word-break: break-word; text-align: center; }
.lv-pscore { color: var(--lv-gold); font-weight: 700; font-size: 1.15rem; }
.lv-medal { font-size: 2.6rem; line-height: 1; margin-bottom: 4px; position: relative; z-index: 1; }
.lv-pav { font-size: 3.2rem; line-height: 1.3; }
.lv-step-1 .lv-pav { font-size: 4.4rem; }
.lv-step-1.is-shown .lv-pav { animation: lvHop 1s ease-in-out 3; }
@keyframes lvHop { 50% { transform: translateY(-14px) rotate(-6deg); } }
.lv-podium i { display: grid; place-items: start center; padding-top: 8px; width: 100%; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.16); margin-top: 6px; font: 700 2.2rem var(--font-display); font-style: normal; color: rgba(255,255,255,.55); box-shadow: inset 0 -8px 0 rgba(0,0,0,.15); }
.lv-step-1 i { height: 160px; background: rgba(255,210,94,.5); color: #fff; } .lv-step-2 i { height: 112px; } .lv-step-3 i { height: 78px; }
.lv-step-1.team-red i, .lv-step-2.team-red i, .lv-step-3.team-red i { border-top: 6px solid var(--lv-red); }
.lv-step-1.team-blue i, .lv-step-2.team-blue i, .lv-step-3.team-blue i { border-top: 6px solid #5aa2ff; }
.lv-step-1.team-yellow i, .lv-step-2.team-yellow i, .lv-step-3.team-yellow i { border-top: 6px solid var(--lv-gold); }
.lv-step-1.team-green i, .lv-step-2.team-green i, .lv-step-3.team-green i { border-top: 6px solid #7dd87a; }
.lv-rest { opacity: 0; transition: opacity .6s .4s; }
.lv-final.is-done .lv-rest { opacity: 1; }
.lv-final.no-anim .lv-rest, .lv-final.no-anim .lv-podium > div { transition: none; }
.lv-rest .lv-board { max-width: 760px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 10px; }
.lv-rest .lv-board li { font-size: 1rem; padding: 5px 12px; margin: 4px 0; background: rgba(0,0,0,.18); }
.lv-report { max-width: 680px; margin: 14px auto 0; text-align: left; background: rgba(0,0,0,.2); border: 2px dashed var(--s-line); border-radius: 12px; padding: 8px 16px; }
.lv-report summary { cursor: pointer; font-weight: 800; color: rgba(244,241,232,.9); }
.lv-report p { margin: 8px 0 4px; color: rgba(244,241,232,.75); }
.lv-report ol { margin: 0 0 8px; padding-left: 1.3em; }
.lv-report li { margin: 4px 0; }
.lv-report li b { color: #ffb0a6; margin-right: 4px; }
.lv-report li span { color: #7dd87a; }

/* ---------- polls and word cloud ---------- */
.lv-bars { width: 100%; max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.lv-bar { display: grid; grid-template-columns: minmax(120px, 30%) 1fr 3em; align-items: center; gap: 12px; color: #fff; font: 700 1.25rem var(--font-display); }
.lv-bar-track { display: block; height: 42px; background: rgba(0,0,0,.25); border-radius: 10px; overflow: hidden; }
.lv-bar-track i { display: block; height: 100%; border-radius: 10px; transition: width .6s cubic-bezier(.3,1.3,.5,1); background: var(--lv-gold); }
.lv-bar.ans-0 i { background: var(--lv-red); } .lv-bar.ans-1 i { background: var(--lv-blue); } .lv-bar.ans-2 i { background: var(--lv-yellow); } .lv-bar.ans-3 i { background: var(--lv-green); }
.lv-bar b { text-align: right; font-size: 1.6rem; }
.lv-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 20px; width: 100%; max-width: 960px; margin: 0 auto; min-height: 200px; font-family: var(--font-display); font-weight: 700; }
.tool-panel .lv-cloud button { background: none; border: 0; padding: 0 2px; font: inherit; font-size: inherit; line-height: 1.1; transform: rotate(var(--tilt, 0deg)); animation: lvJoin .5s cubic-bezier(.3,1.6,.5,1) both; transition: font-size .5s ease; }
.tool-panel .lv-cloud button:hover { text-decoration: line-through; opacity: .6; background: none; }
.lv-cloud sup { font-size: .45em; opacity: .7; margin-left: 2px; }
.tool-panel .lv-cloud .c0 { color: var(--lv-gold); } .tool-panel .lv-cloud .c1 { color: #7dd87a; } .tool-panel .lv-cloud .c2 { color: #5aa2ff; } .tool-panel .lv-cloud .c3 { color: #ff8f80; } .tool-panel .lv-cloud .c4 { color: #c4a3ff; } .tool-panel .lv-cloud .c5 { color: #fff; }
#lv-pollform:empty { display: none; }
.lv-pollform { max-width: 680px; margin: 16px auto 0; background: rgba(0,0,0,.22); border: 2px dashed var(--s-line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; }
.lv-pollform label { display: grid; gap: 6px; color: rgba(244,241,232,.85); font-weight: 700; }
.lv-pollform input, .lv-pollform textarea { width: 100%; }
.lv-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: rgba(244,241,232,.7); font-weight: 700; font-size: .9rem; }
.tool-panel .lv-chip { padding: 4px 10px; font-size: .88rem; border-radius: 999px; }

/* ---------- spotlight and floating reactions ---------- */
.lv-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.lv-layer.is-off { display: none; }
.lv-float { position: absolute; bottom: 50px; font-size: 2.6rem; animation: lvRise 3s ease-out forwards; }
.lv-float[data-av]::before { content: attr(data-av); position: absolute; font-size: .45em; left: -.3em; bottom: -.1em; }
@keyframes lvRise { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { transform: translate(0, -40px) scale(1.1); opacity: 1; } 100% { transform: translate(var(--dx, 0), -360px) scale(1); opacity: 0; } }
.lv-spot { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(10,25,16,.65); }
.lv-spot[hidden] { display: none; }
.lv-spot-card { position: relative; text-align: center; background: var(--board); border: 4px dashed rgba(255,210,94,.7); border-radius: 22px; padding: 22px 40px; min-width: min(420px, 90%); animation: lvJoin .6s cubic-bezier(.3,1.6,.5,1) both; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.lv-spot-card p { color: rgba(244,241,232,.85); font-weight: 700; margin: 4px 0; font-size: 1.2rem; }
.lv-spot-card b { display: block; font: 700 clamp(2.4rem, 6vw, 4.2rem) var(--font-display); color: #fff; }
.lv-spot-av { font-size: 5rem; line-height: 1.1; animation: lvHop 1s ease-in-out 2; }
.tool-panel .lv-spot-x { position: absolute; top: 8px; right: 8px; border: 0; padding: 4px 10px; }

@media (max-width: 860px) { .lv-reveal { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .lv-lobby { grid-template-columns: 1fr; } .lv-qr { margin: 0 auto; width: 190px; }
  .lv-bar { grid-template-columns: 1fr 3em; } .lv-bar-label { grid-column: 1 / -1; }
  .lv-answers, .lv-reveal .lv-answers { grid-template-columns: 1fr; } .lv-ans { min-height: 60px; padding: 12px; }
  .lv-podium { min-height: 0; }
}
/* Full screen on the classroom board: use the height, and keep the bottom-right corner free for the site mark. */
.tool-panel:fullscreen .lv-code { font-size: min(18vh, 12vw); }
.tool-panel:fullscreen .lv-qr { width: min(34vh, 320px); }
.tool-panel:fullscreen .lv-ans { min-height: 13vh; }
.tool-panel:fullscreen .lv-reveal .lv-ans { min-height: 9vh; }
.tool-panel:fullscreen .lv-board li { font-size: 1.35rem; }
.tool-panel:fullscreen .lv-step-1 i { height: 15vh; } .tool-panel:fullscreen .lv-step-2 i { height: 10vh; } .tool-panel:fullscreen .lv-step-3 i { height: 7vh; }
.tool-panel:fullscreen .lv-podium { min-height: 0; margin: 4px auto 8px; }
.tool-panel:fullscreen .lv-final-title { margin: 0 0 4px; }
.tool-panel:fullscreen .lv-medal { font-size: 2rem; }
.tool-panel:fullscreen .lv-actions, .tool-panel:fullscreen .lv-tips { padding-bottom: 28px; }

/* ---------- student phone view ---------- */
.page-join { background: var(--board); }
.page-join .site-footer { display: none; }
.page-join .main-nav, .page-join .header-actions, .page-join .skip { display: none; }
.page-join .site-header { position: static; }
.jn-playing .site-header { display: none; }
.jn-wrap { min-height: calc(100vh - 80px); display: grid; place-items: start center; padding: 18px 14px 40px; background: var(--chalk-texture), radial-gradient(ellipse at 30% 10%, #3b5e48, transparent 60%), var(--board); }
.jn-playing .jn-wrap { min-height: 100vh; min-height: 100dvh; padding: 10px 12px 16px; }
.jn-card { width: min(520px, 100%); color: var(--chalk); position: relative; display: flex; flex-direction: column; }
.jn-playing .jn-card { min-height: calc(100dvh - 26px); }
.jn-form { display: grid; gap: 14px; text-align: center; background: rgba(0,0,0,.18); border: 3px dashed rgba(244,241,232,.25); border-radius: 18px; padding: 24px 18px; margin-top: 4vh; }
.jn-form h1 { color: #fff; margin: 0; font-size: 2rem; }
.jn-form p { margin: 0; color: rgba(244,241,232,.8); }
.jn-form input, .jn-text input { width: 100%; font: 700 1.5rem var(--font-display); text-align: center; padding: 14px; border-radius: 12px; border: 3px solid rgba(244,241,232,.35); background: var(--paper); color: var(--ink); }
#jn-code { letter-spacing: .25em; font-size: 2rem; }
.jn-avs { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.jn-avs legend { width: 100%; text-align: center; color: rgba(244,241,232,.8); font-weight: 700; margin-bottom: 6px; }
.jn-av { font-size: 1.55rem; line-height: 1; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; background: rgba(255,255,255,.08); cursor: pointer; }
.jn-av.is-on { background: rgba(255,210,94,.3); border-color: var(--lv-gold); transform: scale(1.12); }
.jn-small { font-size: .85rem; }
.jn-error { color: #ffb0a6 !important; font-weight: 800; }
.jn-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 8px 12px; font: 700 1.1rem var(--font-display); }
.jn-me { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jn-av-sm { font-size: 1.5rem; }
.jn-score { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.jn-score b { color: var(--lv-gold); }
.jn-fire { color: #ffb36b; animation: pop .4s ease; }
.jn-team { font-size: .78rem; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.team-red.jn-team, .jn-teamline.team-red { background: var(--lv-red); } .team-blue.jn-team, .jn-teamline.team-blue { background: var(--lv-blue); }
.team-yellow.jn-team, .jn-teamline.team-yellow { background: var(--lv-yellow); } .team-green.jn-team, .jn-teamline.team-green { background: var(--lv-green); }
.jn-teamline { display: inline-block; color: #fff !important; font: 700 1.1rem var(--font-display) !important; padding: 6px 14px; border-radius: 999px; margin-top: 10px !important; }
.jn-conn { text-align: center; color: var(--lv-gold); font-weight: 700; padding: 6px; }
.jn-center { text-align: center; padding: 7vh 10px 20px; }
.jn-center h2 { color: #fff; font-size: 2.1rem; margin: 10px 0 6px; }
.jn-center p { color: rgba(244,241,232,.88); font-size: 1.1rem; margin: 6px 0; }
.jn-muted { opacity: .7; }
.jn-big { font-size: 5.5rem; line-height: 1; animation: lvJoin .55s cubic-bezier(.3,1.6,.5,1) both; }
.jn-bob { animation: lvJoin .55s cubic-bezier(.3,1.6,.5,1) both, lvHop 1.6s 1s ease-in-out infinite; }
.jn-q { color: #fff; font: 700 1.3rem/1.3 var(--font-display); text-align: center; margin: 12px 4px; }
/* Get-ready countdown, then the answer buttons fill the screen. */
.jn-q-wrap { flex: 1; display: flex; flex-direction: column; }
.jn-ready { display: none; }
.jn-q-wrap.is-ready .jn-ready { display: block; text-align: center; padding-top: 8vh; }
.jn-q-wrap.is-ready .jn-play { display: none; }
.jn-ready h2 { color: #fff; font-size: 2.2rem; margin: 6px 0 16px; }
.jn-ready p { color: rgba(244,241,232,.8); font-weight: 700; margin: 0; }
.jn-ready b { display: inline-grid; place-items: center; width: 120px; height: 120px; margin-bottom: 14px; border-radius: 50%; background: var(--lv-gold); color: #3b2a00; font: 700 4.6rem/1 var(--font-display); box-shadow: 0 7px 0 #c99500; }
.jn-play { flex: 1; display: flex; flex-direction: column; animation: pop .3s ease; }
.jn-timer { height: 10px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; margin-top: 10px; }
.jn-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7dd87a, var(--lv-gold)); border-radius: inherit; transition: width .1s linear; }
.jn-timer i.is-low { background: #ff6b5a; }
.jn-answers { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, 1fr); gap: 12px; }
.jn-answers.n2 { grid-template-columns: 1fr; }
.jn-ans { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 0; border-radius: 18px; color: #fff; font: 700 1.15rem/1.2 var(--font-display); box-shadow: inset 0 -8px 0 rgba(0,0,0,.2); cursor: pointer; transition: transform .1s, opacity .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; word-break: break-word; }
.jn-ans span { font-size: 2.8rem; line-height: 1; }
.jn-ans:active { transform: scale(.95); }
.jn-ans.ans-0 { background: var(--lv-red); } .jn-ans.ans-1 { background: var(--lv-blue); } .jn-ans.ans-2 { background: var(--lv-yellow); } .jn-ans.ans-3 { background: var(--lv-green); }
.jn-ans.is-picked { outline: 5px solid #fff; outline-offset: -5px; transform: scale(1.02); }
.jn-ans.is-other { opacity: .35; }
.jn-voted { text-align: center; color: #7dd87a; font-weight: 800; margin: 0 0 10px; }
/* Full-colour result screens, readable from across the room. */
.jn-card.jn-locked, .jn-card.jn-result, .jn-card.jn-final.is-top { border-radius: 18px; padding: 0 0 14px; }
.jn-locked .jn-top, .jn-result .jn-top { margin: 0; }
.jn-locked.ans-0 { background: rgba(226,69,60,.35); } .jn-locked.ans-1 { background: rgba(47,111,209,.38); } .jn-locked.ans-2 { background: rgba(216,154,0,.35); } .jn-locked.ans-3 { background: rgba(60,143,55,.4); }
.jn-shape { color: #fff; font-size: 7rem; }
.jn-result.is-right { background: linear-gradient(180deg, rgba(60,143,55,.75), rgba(60,143,55,.25)); }
.jn-result.is-wrong { background: linear-gradient(180deg, rgba(184,67,47,.7), rgba(184,67,47,.2)); }
.jn-result.is-late { background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.1)); }
.jn-final.is-top { background: linear-gradient(180deg, rgba(255,210,94,.35), rgba(255,210,94,.05)); }
.jn-pts { font: 700 3rem/1 var(--font-display) !important; color: #fff !important; margin: 4px 0 8px !important; animation: lvBump .5s .2s ease; }
.jn-streak { display: inline-block; background: rgba(0,0,0,.25); border-radius: 999px; padding: 4px 14px; font-weight: 800; color: #ffd9a0 !important; }
.jn-rank { font: 700 1.5rem var(--font-hand) !important; margin-top: 16px !important; }
.jn-rank b { font-size: 1.3em; color: var(--lv-gold); }
.jn-up { color: #7dd87a; font-family: var(--font-display); font-size: .9em; }
.jn-chase { font-weight: 800; color: #fff !important; }
.jn-results { display: grid; gap: 10px; margin-top: 10px; }
.jn-res { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.25); overflow: hidden; font: 700 1.1rem var(--font-display); color: #fff; }
.jn-res span, .jn-res b { position: relative; }
.jn-res i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .6; transition: width .6s; }
.jn-res.ans-0 i { background: var(--lv-red); } .jn-res.ans-1 i { background: var(--lv-blue); } .jn-res.ans-2 i { background: var(--lv-yellow); } .jn-res.ans-3 i { background: var(--lv-green); }
.jn-res.is-mine { outline: 3px solid #fff; }
.jn-text { display: grid; gap: 12px; }
.jn-reacts { margin-top: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; background: rgba(0,0,0,.2); border-radius: 14px; }
.jn-reacts button { position: relative; font-size: 1.8rem; line-height: 1; padding: 8px 0; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); cursor: pointer; touch-action: manipulation; transition: opacity .2s, transform .1s; }
.jn-reacts button:active { transform: scale(.88); }
.jn-reacts button.is-wait { opacity: .4; }
.jn-float { position: absolute; left: 50%; top: 0; pointer-events: none; animation: jnFloat 1.1s ease-out forwards; }
@keyframes jnFloat { to { transform: translate(-50%, -120px) scale(1.6); opacity: 0; } }
.jn-spot { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; background: rgba(20,40,28,.94); }
.jn-spot h2 { color: var(--lv-gold); font-size: 2.2rem; margin: 10px 0; }
.jn-spot p { color: #fff; font-size: 1.2rem; }
.jn-wait { text-align: center; padding: 14vh 0; color: var(--chalk); }
.jn-spin { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(255,255,255,.2); border-top-color: var(--lv-gold); margin: 0 auto; animation: spin 1s linear infinite; }
.lv-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.lv-confetti i { position: absolute; top: -14px; width: 10px; height: 16px; border-radius: 2px; animation: lvFall linear forwards; }
@keyframes lvFall { to { top: 105%; transform: translateX(50px) rotate(720deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lv-player, .lv-board li, .lv-ans, .jn-big, .jn-bob, .lv-float, .lv-clock.is-low, .lv-wait, .lv-final-title { animation: none !important; }
}