/* Live games: host console, join page, results.  Uses the site's colour variables. */
.lv-wrap{max-width:1200px;margin:0 auto}
.lv-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:16px}
.lv-top h1{margin:0;font-size:clamp(1.3rem,3vw,1.9rem)}
.lv-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lv-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:var(--chip-bg);color:var(--soft);font-weight:700;font-size:.85rem}
.lv-chip.ok{background:#052e22;color:#a7f3d0}.lv-chip.warn{background:#422006;color:#fde68a}
.lv-actions{display:flex;flex-wrap:wrap;gap:8px}
.lv-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:20px;align-items:start}
@media(max-width:860px){.lv-grid{grid-template-columns:1fr}}
.lv-join{text-align:center}
.lv-join .lbl{font-weight:700;color:var(--soft);font-size:.95rem}
.lv-code{font:800 clamp(2.4rem,5.4vw,4.4rem)/1 'Baloo 2','Inter',sans-serif;letter-spacing:.08em;white-space:nowrap;margin:2px 0 4px;color:var(--sky);text-shadow:3px 3px 0 var(--hard);user-select:all}
.lv-url{font-weight:800;font-size:clamp(1rem,2.2vw,1.35rem);word-break:break-all}
.lv-url small{display:block;font-weight:600;color:var(--soft);font-size:.8rem;margin-top:2px}
.lv-qr{background:#fff;border:4px solid var(--hard);border-radius:14px;padding:6px;display:inline-block;margin-top:14px;line-height:0}
.lv-qr canvas{width:min(100%,230px);height:auto;image-rendering:pixelated}
.lv-players h2{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px}
.lv-plist{display:flex;flex-wrap:wrap;gap:8px}
.lv-p{display:inline-flex;align-items:center;gap:7px;padding:7px 8px 7px 12px;border-radius:99px;background:var(--panel2);border:2px solid var(--line);font-weight:700;font-size:1rem;animation:lvpop .25s ease}
.lv-p.off{opacity:.45}
.lv-p .dot{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid var(--hard)}
.lv-p button{border:0;background:transparent;color:var(--soft);cursor:pointer;font-size:.9rem;padding:2px 5px;border-radius:6px}
.lv-p button:hover{color:var(--rose);background:var(--chip-bg)}
.lv-p select{background:transparent;color:var(--soft);border:0;font:inherit;font-size:.75rem;max-width:78px;cursor:pointer}
@keyframes lvpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.lv-teamcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.lv-teamcol{border:3px solid var(--hard);border-radius:12px;padding:10px;background:var(--panel2)}
.lv-teamcol h3{margin:0 0 8px;font-size:1rem;display:flex;align-items:center;gap:8px}
.lv-teamcol h3 .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--hard)}
.lv-set{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:16px 0 4px;padding-top:14px;border-top:2px dashed var(--line)}
.lv-set .field{min-width:130px}
.lv-big{font-size:clamp(1.05rem,2vw,1.35rem);padding:14px 28px}
.lv-hint{color:var(--soft);font-size:.88rem;margin:8px 0 0}
/* leaderboard */
.lv-board{display:flex;flex-direction:column;gap:7px}
.lv-row{display:grid;grid-template-columns:2.2em minmax(90px,1.3fr) minmax(80px,2fr) 5em 4.2em;gap:10px;align-items:center;padding:8px 12px;border:2px solid var(--line);border-radius:12px;background:var(--panel2);font-weight:700;font-size:clamp(.95rem,1.8vw,1.25rem)}
.lv-row .rk{font-weight:800;color:var(--soft);text-align:center}
.lv-row:nth-child(1) .rk{color:#fbbf24}.lv-row:nth-child(2) .rk{color:#cbd5e1}.lv-row:nth-child(3) .rk{color:#d97706}
.lv-row .nm{display:flex;align-items:center;gap:8px;min-width:0}.lv-row .nm span.t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-row .dot{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid var(--hard)}
.lv-row .bar{height:16px;border-radius:99px;background:var(--chip-bg);overflow:hidden;border:2px solid var(--hard)}
.lv-row .bar i{display:block;height:100%;background:var(--green);transition:width .6s ease}
.lv-row.done .bar i{background:var(--gold)}
.lv-row .sc{text-align:right;font-variant-numeric:tabular-nums}
.lv-row .st{text-align:right;color:var(--soft);font-size:.85em}
.lv-row.off{opacity:.55}
@media(max-width:560px){.lv-row{grid-template-columns:1.8em 1fr 4em;}.lv-row .bar,.lv-row .st{display:none}}
.lv-teams{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.lv-team{border:3px solid var(--hard);border-radius:12px;padding:10px 12px;background:var(--panel2);position:relative;overflow:hidden}
.lv-team .nm{font-weight:800;display:flex;align-items:center;gap:8px}
.lv-team .nm .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--hard)}
.lv-team .sc{font:800 1.9rem/1.1 'Baloo 2','Inter',sans-serif;font-variant-numeric:tabular-nums}
.lv-team .sub{color:var(--soft);font-size:.8rem}
.lv-team.first{box-shadow:4px 4px 0 var(--gold);border-color:var(--gold)}
.lv-timer{font:800 clamp(1.8rem,4vw,3rem)/1 'Baloo 2','Inter',sans-serif;font-variant-numeric:tabular-nums}
.lv-podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:6px 0 22px;min-height:180px}
.lv-pod{width:min(30%,200px);text-align:center}
.lv-pod .who{font-weight:800;font-size:clamp(1rem,2.4vw,1.5rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-pod .pts{color:var(--soft);font-weight:700;margin-bottom:6px}
.lv-pod .blk{border:3px solid var(--hard);border-radius:12px 12px 0 0;display:grid;place-items:center;font:800 2.4rem 'Baloo 2','Inter',sans-serif;color:var(--hard)}
.lv-pod.p1 .blk{height:130px;background:#fbbf24}.lv-pod.p2 .blk{height:94px;background:#cbd5e1}.lv-pod.p3 .blk{height:66px;background:#d97706}
.lv-countdown{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(2,6,23,.92);text-align:center}
.lv-countdown .n{font:800 min(40vw,18rem)/1 'Baloo 2','Inter',sans-serif;color:var(--sky);animation:lvbeat 1s ease infinite}
.lv-countdown p{font-size:1.4rem;font-weight:800;margin:0;color:#fff}
@keyframes lvbeat{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.lv-empty{text-align:center;color:var(--soft);padding:26px 10px;font-weight:600}
.lv-empty i{font-size:2rem;display:block;margin-bottom:8px;opacity:.6}
html.lv-full .main-header,html.lv-full .main-footer,html.lv-full .skip-link{display:none!important}
html.lv-full main{padding-top:12px}
/* create form / lists */
.lv-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:end}
.lv-tbl{width:100%;border-collapse:collapse}
.lv-tbl th,.lv-tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.lv-tbl th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--soft)}
.lv-tbl td.num,.lv-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.lv-scroll{overflow-x:auto}
.lv-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.lv-tabs a{padding:8px 16px;border:3px solid var(--hard);border-radius:10px;background:var(--panel2);font-weight:800;color:var(--text);text-decoration:none}
.lv-tabs a.on{background:var(--sky);color:var(--hard)}
.lv-mx td.c{text-align:center;font-variant-numeric:tabular-nums;min-width:64px}
.lv-mx td.miss{color:var(--soft);opacity:.5}
.lv-mx th.c{text-align:center;white-space:nowrap}
.lv-mx td.nm{font-weight:800;white-space:nowrap}
.lv-mx tr.absent td.nm{color:var(--soft)}
/* join page */
.lv-joinbox{max-width:480px;margin:30px auto}
.lv-joinbox h1{text-align:center;margin-top:0}
.lv-joinbox input.code{font:800 2.4rem 'Baloo 2','Inter',sans-serif;letter-spacing:.2em;text-align:center;text-transform:uppercase;padding:12px}
.lv-joinbox input.nick{font-size:1.5rem;font-weight:700;text-align:center;padding:12px}
.lv-err{color:#fecdd3;background:#3b0a14;border:2px solid var(--rose);border-radius:10px;padding:10px 14px;font-weight:700;margin:0 0 12px}
.lv-rules{background:var(--panel2);border-radius:10px;padding:10px 14px;font-size:.9rem;color:var(--soft);margin:14px 0 0}
/* student play shell */
body.lv-play{margin:0;background:var(--bg,#0f172a);overflow:hidden}
body.lv-play iframe{position:fixed;inset:0;width:100%;height:100%;border:0}

/* join strip while a round runs, and the big-screen join overlay */
.lv-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px;font-weight:700}
.lv-strip-t{flex:1 1 220px}.lv-strip-c{font:800 1.8rem 'Baloo 2','Inter',sans-serif;letter-spacing:.08em;color:var(--sky);margin-left:6px}
.lv-strip .lv-qr{margin:0;padding:4px}.lv-strip .lv-qr canvas{width:84px}
.lv-bigjoin{position:fixed;inset:0;z-index:290;display:grid;place-items:center;background:rgba(2,6,23,.96);text-align:center;cursor:pointer;padding:16px;overflow:auto}
.lv-bigjoin[hidden]{display:none}
.lv-bigjoin .lv-code{font-size:clamp(3rem,13vw,9rem)}.lv-bigjoin .lv-url{font-size:clamp(1.2rem,4vw,2.6rem)}
.lv-bigjoin .lv-qr canvas{width:min(70vw,40vh,380px)}

/* "I keep score": the question the teacher judges */
.lv-judge{border-color:var(--gold);margin-bottom:16px}
.lv-judge.idle{display:flex;gap:10px;align-items:center;color:var(--muted);font-weight:700}
.lv-j-top{display:flex;gap:8px;align-items:center;font-size:1.05rem}
.lv-j-q{font-size:1.5rem;font-weight:800;margin:10px 0;line-height:1.3}
.lv-j-a{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--panel2);margin-bottom:12px}
.lv-j-a span{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
.lv-j-a b{font-size:1.4rem;color:var(--gold)}
.lv-j-btns{display:flex;gap:12px;flex-wrap:wrap}
.lv-j-btns .btn{flex:1;min-width:150px;justify-content:center}
.lv-j-btns kbd{opacity:.7;font-size:.75rem;border:1px solid currentColor;border-radius:5px;padding:0 5px;margin-left:6px}
@media(max-width:480px){.lv-j-q{font-size:1.2rem}.lv-j-btns .btn{min-width:100%}.lv-j-btns kbd{display:none}}
/* The teacher's board view (live_play.php?watch=1): a slim bar above the game with the way back (it used to have no exit) */
body.lv-watch iframe{inset:44px 0 0 0;height:calc(100% - 44px)}
body.lv-watch.lv-wfs iframe{inset:44px 0 0 0}
.lv-watchbar{position:fixed;top:0;left:0;right:0;height:44px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;background:var(--panel,#fff);border-bottom:3px solid var(--hard,#1e293b);color:var(--text,inherit)}
.lv-watchbar .lv-wb-t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){.lv-watchbar .lv-wb-t{display:none}}
.lv-how{margin-top:14px;padding:12px 14px;border:3px solid var(--hard,#1e293b);border-radius:12px;background:var(--panel,#fff)}
.lv-how ol{margin:8px 0 10px;padding-left:20px;line-height:1.4}
.lv-how li{margin:4px 0}

/* 1.203.19: in the board view's full screen the bar slides away (it took 44px and made full screen look like nothing happened); move the mouse to the top edge to bring it back, or press Esc */
body.lv-watch.lv-wfs .lv-watchbar{transform:translateY(-100%);transition:transform .2s}
body.lv-watch.lv-wfs .lv-watchbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
body.lv-watch.lv-wfs .lv-watchbar:hover{transform:none}
body.lv-watch.lv-wfs iframe{inset:0;height:100%}