/* Foundry 6 7 LIVE!: the leader's / projector screen. Same metal-and-fire look as the game. */
:root {
  --steel-950: #121316; --steel-900: #1b1d22; --steel-800: #24272e; --steel-700: #30343c; --steel-600: #444a54;
  --steel-500: #5d6470; --steel-300: #a7aeb8; --steel-100: #e3e6ea;
  --brass: #d9a441; --molten: #ff7a1a; --molten-hot: #ffd25a; --ok: #62d68f; --bad: #ff6a5c;
  --text: #f1ede4; --muted: #a39c8f;
  --fd: "Bungee", "Barlow Condensed", Impact, sans-serif; --fb: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --grit: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 7px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fb); color: var(--text); font-size: 18px; font-weight: 600;
  background: radial-gradient(ellipse at 50% 115%, rgba(255,110,20,0.35), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(255,160,60,0.12), transparent 55%), var(--grit), #0c0d10;
  min-height: 100vh;
}
body.calm { background: #111216; }
.hidden { display: none !important; }
.embers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  background-image: radial-gradient(2px 2px at 10% 90%, #ffb341, transparent), radial-gradient(2px 2px at 30% 80%, #ff7a1a, transparent),
    radial-gradient(3px 3px at 55% 95%, #ffd25a, transparent), radial-gradient(2px 2px at 75% 85%, #ff7a1a, transparent), radial-gradient(2px 2px at 90% 92%, #ffb341, transparent);
  animation: rise 9s linear infinite; opacity: 0.7; }
@keyframes rise { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 -900px, 0 -700px, 0 -1100px, 0 -800px, 0 -1000px; } }
body.calm .embers { display: none; }

.lv-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: linear-gradient(180deg, #2a2d33, #16171b); border-bottom: 3px solid #0b0c0e;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), inset 0 -6px 0 -3px #ffcc33; }
.lv-logo-sm { height: 44px; }
.lv-status { flex: 1; font-family: var(--fd); color: var(--brass); letter-spacing: 1px; }
.lv-screen { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lv-logo { width: min(460px, 80%); filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7)); }
.lv-card { width: min(560px, 100%); padding: 18px 22px; border-radius: 14px; text-align: center;
  background: var(--grit), linear-gradient(180deg, #2b2e35, #1c1e23); border: 2px solid #0b0c0e;
  box-shadow: 0 6px 0 #0b0c0e, inset 0 1px 0 rgba(255,255,255,0.08); }
.lv-card.wide { width: min(980px, 100%); }
h2, h3 { font-family: var(--fd); font-weight: 400; margin: 0 0 10px; }
h2 { color: var(--molten-hot); font-size: 26px; text-shadow: 0 2px 0 #000, 0 0 16px rgba(255,122,26,0.4); }
h3 { color: var(--brass); font-size: 15px; letter-spacing: 2px; margin-top: 8px; }
.lv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
@media (max-width: 760px) { .lv-grid { grid-template-columns: 1fr; } }
.lv-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pick { display: flex; flex-wrap: wrap; border-radius: 8px; overflow: hidden; border: 2px solid #0b0c0e; }
.pick button { border: 0; padding: 7px 12px; font: 800 15px var(--fb); background: var(--steel-700); color: var(--steel-300); cursor: pointer; }
.pick button[aria-pressed="true"] { background: var(--molten-hot); color: #2a1300; }
.lv-note { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.lv-err { color: var(--bad); min-height: 1.2em; margin: 4px 0; }
.lv-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.lvbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
  font: 400 17px var(--fd); letter-spacing: 1px; color: #f3f3f3; text-decoration: none;
  background: var(--grit), linear-gradient(180deg, #5b616b, #30343b); border: 2px solid #0b0c0e; box-shadow: 0 4px 0 #0b0c0e; }
.lvbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b0c0e; }
.lvbtn:disabled { opacity: 0.45; cursor: default; }
.lvbtn.hot { color: #2a1300; background: var(--grit), linear-gradient(180deg, #ffd25a, #ff9a2a 55%, #d8640e); }
.lvbtn.ghost { background: rgba(0,0,0,0.35); border-color: var(--steel-500); box-shadow: none; }
.lvbtn.big { font-size: 22px; padding: 12px 26px; }
/* The set-up screen (Tim, 11 Oct 2026): sized from the screen so it is easy to read on a projector or a laptop,
   and on a wide screen the logo sits on the left with the set-up card filling the right. */
#setup .lv-card.wide { font-size: clamp(17px, 2.1vh, 24px); padding: clamp(14px, 2vh, 28px) clamp(16px, 2.2vw, 40px); }
#setup h2 { font-size: clamp(24px, 4vh, 42px); margin-bottom: clamp(4px, 0.8vh, 10px); }
#setup h3 { font-size: clamp(15px, 2vh, 21px); margin: clamp(6px, 1.2vh, 12px) 0 clamp(2px, 0.6vh, 8px); }
#setup .lv-row { display: grid; justify-content: stretch; gap: clamp(3px, 0.6vh, 6px); padding: clamp(6px, 1vh, 11px) 0; }   /* the label on its own line, the choices filling the row */
#setup .pick { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }   /* even columns: 2, 3 or 4 choices across, never one left alone */
#setup .pick:has(button:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
#setup .pick:has(button:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1099px) { #setup .pick:has(button:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
#setup .pick button { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#setup .lv-row b { font-size: clamp(18px, 2.5vh, 26px); }
#setup .pick button { font-size: clamp(13px, min(2.1vh, 0.9vw), 22px); padding: clamp(6px, 1vh, 11px) clamp(3px, 0.3vw, 10px); }
@media (max-width: 1099px) { #setup .pick button { font-size: clamp(15px, 2.1vh, 22px); } }
#setup .lv-note { font-size: clamp(15px, 1.9vh, 20px); margin-top: clamp(6px, 1vh, 12px); }
#setup .lv-err { font-size: clamp(15px, 2.1vh, 21px); }
#setup .lv-actions { gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(6px, 1.2vh, 12px); }
#setup .lvbtn { font-size: clamp(17px, 2.4vh, 25px); padding: clamp(10px, 1.4vh, 16px) clamp(18px, 1.8vw, 32px); }
#setup .lvbtn.big { font-size: clamp(22px, 3.2vh, 33px); padding: clamp(12px, 1.7vh, 19px) clamp(26px, 2.6vw, 44px); }
#setup .lv-grid { gap: clamp(14px, 2.2vw, 40px); }
@media (min-width: 1100px) and (min-aspect-ratio: 4/3) {
  #setup { max-width: none; width: min(100%, 1900px); display: grid; grid-template-columns: minmax(320px, 38%) minmax(0, 62%); align-items: center;
    column-gap: clamp(24px, 3.5vw, 64px); min-height: calc(100vh - 120px); padding: 1vh 3vw 1vh; }
  #setup .lv-logo { width: min(36vw, 760px); max-height: 70vh; object-fit: contain; justify-self: center; }
  #setup .lv-card.wide { width: 100%; max-width: 1150px; justify-self: center; }
}
.lv-top .lvbtn { font-size: 13px; padding: 6px 10px; }
.lv-copyright { position: relative; z-index: 1; text-align: center; font-size: 12px; color: var(--steel-500); margin: 18px 0 8px; }
.lv-copyright a { color: inherit; }
.lvbtn[aria-pressed="false"] { opacity: 0.6; }

/* lobby (layout 7 Oct 2026: a strip at the top, the roster filling the middle, buttons at the bottom) */
.lv-lobby { min-height: calc(100vh - 66px); min-height: calc(100dvh - 66px); gap: 10px; max-width: 1400px; }
.lv-join { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, auto) minmax(190px, 1fr); align-items: center; gap: 16px; width: 100%; }
.lv-join .lv-logo { width: min(250px, 100%); justify-self: center; }
.lv-join-mid { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lv-join-right { justify-self: center; }
.lv-go { font-size: clamp(22px, 2.6vw, 32px); margin: 0; }
.lv-go b { color: var(--molten-hot); }
.lv-code { font-family: var(--fd); font-size: clamp(56px, 7.5vw, 104px); letter-spacing: 12px; color: #fff3c4; line-height: 1.05;
  text-shadow: 0 4px 0 #6b2a08, 0 0 28px rgba(255,122,26,0.7); }
.lv-sub { color: var(--steel-300); margin: 4px 0; text-align: center; }
.lv-qr { background: #fff; padding: 10px; border-radius: 12px; border: 4px solid var(--brass); }
.lv-qr img, .lv-qr canvas { display: block; }
.lv-roster-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--fd); color: var(--brass); font-size: 20px; }
.lv-roster { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
/* the join screen's roster: the big area in the middle; newest Fabricator top-left; scrolls when the class is large */
.lv-lobby .lv-roster { flex: 1 1 auto; align-content: start; grid-auto-rows: max-content; padding: 12px; border-radius: 14px;
  min-height: 32vh; max-height: max(32vh, calc(100dvh - 440px)); overflow-y: auto; background: rgba(0,0,0,0.3); border: 2px solid var(--steel-700);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lv-lobby .lv-roster:empty { border-style: dashed; }
.lv-lobby .lv-roster:empty::before { content: "Fabricators show up here as they join."; grid-column: 1 / -1; align-self: center; justify-self: center; padding: 40px 0;
  font-family: var(--fd); font-size: 20px; letter-spacing: 1px; color: var(--steel-500); }
.lv-roster li { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(180deg, #31353d, #24272d); border: 2px solid #0b0c0e; font-size: 20px; font-weight: 800; }
.lv-lobby .lv-roster li { font-size: 24px; }
.lv-roster li.new, .lv-roster.play li { animation: pop 0.35s cubic-bezier(.3,1.6,.5,1) both; }
.lv-roster li button { border: 0; background: none; color: var(--steel-300); cursor: pointer; font-size: 18px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
body.calm .lv-roster li { animation: none; }
.lv-lobby-foot { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.lv-lobby-foot > * { max-width: 100%; min-width: 0; }
.lv-lobby-foot .lv-actions { margin: 0; }
.lv-ctl .lv-sub { min-width: 0; }
.lv-lobby-foot .lv-ctl.right { justify-self: end; }
/* Send Join (Pro) above Second Classroom (Max): stacked so the row fits on smaller screens. */
.lv-lobby-foot .lv-ctl.right { flex-direction: column; align-items: stretch; gap: 6px; }
@media (max-width: 900px) {
  .lv-join { grid-template-columns: 1fr; gap: 6px; }
  .lv-join .lv-logo { width: min(200px, 60vw); }
  .lv-lobby-foot { grid-template-columns: 1fr; justify-items: center; }
  .lv-lobby-foot .lv-ctl, .lv-lobby-foot .lv-ctl.right { justify-self: center; }
  .lv-lobby .lv-roster { max-height: none; }
}
@media (max-width: 640px) { .lv-top { flex-wrap: wrap; } }   /* phone: MUSIC / FULL SCREEN drop to a second line instead of running off the edge */

/* play */
.lv-jobbar { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.lv-jobtitle { font-family: var(--fd); font-size: 28px; color: var(--brass); }
.lv-order { text-align: center; padding: 6px 24px; border-radius: 12px; background: rgba(0,0,0,0.4); border: 2px solid var(--steel-600); white-space: nowrap; }
.lv-order > span { display: block; font-size: 13px; letter-spacing: 2px; color: var(--steel-300); }   /* the ORDER label only (a repeating decimal's overbar span sits inside the <b>) */
.lv-order b { font-family: var(--fd); font-weight: 400; font-size: 48px; color: var(--molten-hot); }
.lv-clock { justify-self: end; font-family: var(--fd); font-size: 64px; color: #fff3c4; }
.lv-clock.low { color: #ff6a4a; }
.lv-count { font-family: var(--fd); font-size: 180px; color: #fff3c4; text-shadow: 0 0 40px rgba(255,122,26,0.8); line-height: 1; }
.lv-working { font-family: var(--fd); font-size: 44px; text-align: center; }
.lv-working b { color: var(--molten-hot); font-weight: 400; }
.lv-working small { display: block; font-family: var(--fb); font-size: 20px; color: var(--steel-300); }
.lv-board { width: 100%; }
.lv-board-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-vis select { font: 700 16px var(--fb); padding: 4px 8px; border-radius: 6px; background: var(--steel-800); color: var(--text); border: 1px solid var(--steel-500); }
.lv-jobstats { color: var(--steel-300); margin: 0 0 8px; }
.lv-ranks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lv-ranks li { display: grid; grid-template-columns: 64px minmax(120px, 260px) 1fr 80px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 10px;
  background: linear-gradient(180deg, #2b2e35, #1f2126); border: 2px solid #0b0c0e; font-size: 22px; font-weight: 800; }
.lv-ranks li .pl { font-family: var(--fd); color: var(--brass); }
.lv-ranks li.p1 .pl { color: #ffd25a; } .lv-ranks li.p2 .pl { color: #d8dde3; } .lv-ranks li.p3 .pl { color: #d08a4a; }
.lv-ranks li .bar { height: 16px; border-radius: 8px; background: #121316; border: 1px solid var(--steel-600); overflow: hidden; }
.lv-ranks li .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6a00, #ffd25a); }
.lv-ranks li .rv { text-align: right; font-family: var(--fd); color: #fff3c4; }
.lv-outnote { color: #ff9a7a; margin: 8px 0 0; }
.lv-solution { margin-top: 8px; display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; flex: none; }
.lv-solution figure { margin: 0; text-align: center; }
.lv-solution figcaption { font-family: var(--fd); color: var(--ok); }
.lv-solution svg { width: auto; height: min(32vh, 340px); max-width: 60vw; background: rgba(0,0,0,0.35); border-radius: 12px; border: 2px solid var(--steel-600); }
.lv-solution p { margin: 4px 0 0; color: var(--steel-300); }
/* The results screen fits on one screen (Tim, 11 Oct 2026): the leaderboard list scrolls inside its box when the
   class is long, so the solution and the buttons never push the page past the bottom. */
#play { height: calc(100dvh - 152px); min-height: 0; overflow-y: auto; }   /* the top bar and the copyright line take the rest */
#play .lv-board { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#play .lv-ranks { overflow-y: auto; min-height: 0; flex: 0 1 auto; }
#play .lv-controls { flex: none; }
.fb-rest { fill: #5d636d; stroke: #1b1d22; stroke-linejoin: round; }
.fb-sel { fill: #ff9a3a; stroke: #3a1a05; stroke-linejoin: round; }
.fb-line { stroke: #fff3c4; fill: none; stroke-linecap: round; }
.lv-prompt { text-align: center; padding: 18px; border-radius: 14px; background: rgba(0,0,0,0.5); border: 2px solid var(--brass); }
.lv-controls { padding: 10px; border-radius: 14px; background: rgba(12,13,16,0.6); }
/* leader controls during play (6 Oct 2026): PAUSE / RESUME, SKIP JOB, the roster with REMOVE */
.lvbtn.warn { background: var(--grit), linear-gradient(180deg, #8a4a2a, #4e2a17); }
.lvbtn.paused { color: #2a1300; background: var(--grit), linear-gradient(180deg, #a8f0c0, #4fc77c 60%, #2a8a52); }
.lv-count.paused { font-size: clamp(44px, 9vw, 110px); color: #a8f0c0; text-shadow: 0 0 30px rgba(98,214,143,0.6); }
.lv-count.paused small { display: block; font-family: var(--fb); font-size: 22px; color: var(--steel-300); text-shadow: none; }
.lv-roster-panel { width: 100%; padding: 10px 12px 12px; border-radius: 14px; background: rgba(12,13,16,0.7); border: 2px solid var(--steel-600); }
.lv-roster.play li { font-size: 18px; }
.lv-roster.play li .st { flex: 1; text-align: right; font-size: 14px; font-weight: 800; letter-spacing: 1px; color: var(--steel-300); }
.lv-roster.play li .st.ok { color: var(--ok); } .lv-roster.play li .st.out { color: #ff9a7a; }
.lv-roster.play li button { font-size: 16px; color: #ff9a7a; }
.lv-roster li button.rm { color: #ff9a7a; }
/* the small leader-controls QR on the join screen (7 Oct 2026) */
.lv-ctl { display: flex; align-items: center; gap: 12px; opacity: 0.9; }
.lv-ctl .lv-qr.small { padding: 6px; border-width: 3px; border-color: var(--steel-500); }
.lv-ctl .lv-sub { text-align: left; font-family: var(--fd); font-size: 14px; letter-spacing: 1px; color: var(--brass); line-height: 1.3; }
.lv-ctl .lv-sub small { font-family: var(--fb); font-size: 13px; letter-spacing: 0; color: var(--steel-300); }

/* ZoodleBug Max (7 Oct 2026): the second classroom display, teacher chat, the Full Fabricator Report */
.lv-badge { font-family: var(--fd); font-size: 13px; letter-spacing: 1px; color: #2a1300; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #b98cff, #6a3df0); color: #fff; }
.lv-second { width: min(720px, 100%); padding: 14px 18px; border-radius: 14px; background: var(--grit), linear-gradient(180deg, #2b2e35, #1c1e23); border: 2px solid #8a5cf5; box-shadow: 0 6px 0 #0b0c0e; }
.lv-second .lv-note { font-size: 15px; margin: 0 0 10px; line-height: 1.35; }
.lv-second-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lv-link { display: block; font: 700 15px/1.3 ui-monospace, Menlo, Consolas, monospace; color: #fff3c4; word-break: break-all; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.4); border: 1px solid var(--steel-600); }
.lv-ctl .lvbtn { font-size: 13px; padding: 6px 10px; }
body.display .lv-controls, body.display #rosterPanel, body.display .lv-ctl, body.display #secondCard, body.display #startBtn, body.display #cancelBtn,
body.display #otPrompt .lv-actions, body.display #revealBtn, body.display #reportBtn, body.display #reportNote, body.display .lv-roster li button,
body.display .lv-roster-head .lv-note, body.display .lv-vis { display: none !important; }
body.display .lv-top { box-shadow: 0 4px 0 rgba(0,0,0,0.4), inset 0 -6px 0 -3px #8a5cf5; }
.lv-chat { position: fixed; right: 14px; bottom: 54px; z-index: 50; width: min(340px, calc(100vw - 28px)); font-size: 15px; }
.lv-chat-head { width: 100%; border: 2px solid #0b0c0e; border-radius: 10px; padding: 8px 12px; cursor: pointer; text-align: left;
  font: 400 14px var(--fd); letter-spacing: 1px; color: #f3f3f3; background: var(--grit), linear-gradient(180deg, #5b3fa0, #352460); box-shadow: 0 4px 0 #0b0c0e; }
.lv-chat-badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--molten-hot); color: #2a1300; font: 800 12px var(--fb); text-align: center; margin-left: 6px; }
.lv-chat-body { margin-top: 6px; border-radius: 10px; background: rgba(16,17,21,0.96); border: 2px solid #0b0c0e; box-shadow: 0 6px 0 #0b0c0e; }
.lv-chat-msgs { max-height: 220px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.lv-chat-msgs .m { padding: 5px 8px; border-radius: 8px; background: #2b2e35; max-width: 92%; align-self: flex-start; }
.lv-chat-msgs .m.me { background: #3a2a6b; align-self: flex-end; }
.lv-chat-msgs .m b { display: block; font-size: 11px; letter-spacing: 1px; color: var(--steel-300); }
.lv-chat-msgs .none { color: var(--steel-300); font-size: 13px; }
.lv-chat-form { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--steel-600); }
.lv-chat-form input { flex: 1; min-width: 0; font: 600 15px var(--fb); padding: 7px 9px; border-radius: 8px; border: 2px solid var(--steel-600); background: var(--steel-900); color: var(--text); }
.lv-chat-form .lvbtn { font-size: 13px; padding: 6px 10px; }
#reportNote { text-align: center; }

/* final */
.lv-final-title { font-size: 40px; }
.lv-podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; min-height: 220px; flex-wrap: wrap; }
.lv-step { width: 230px; text-align: center; }
.lv-step .who { font-family: var(--fd); font-size: 30px; color: #fff3c4; min-height: 1.2em; animation: pop 0.6s cubic-bezier(.3,1.6,.5,1) both; }
.lv-step .blk { border-radius: 12px 12px 0 0; border: 3px solid #0b0c0e; display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-size: 54px; color: #2a1300; }
.lv-step.s1 .blk { height: 190px; background: linear-gradient(180deg, #ffe08a, #e0a12a); }
.lv-step.s2 .blk { height: 140px; background: linear-gradient(180deg, #eef1f4, #9aa3ad); }
.lv-step.s3 .blk { height: 105px; background: linear-gradient(180deg, #f0b07a, #a85f2a); }
.lv-step.hide .who { visibility: hidden; }
.lv-finalstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; width: 100%; }
.lv-finalstats div { text-align: center; padding: 10px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid var(--steel-600); }
.lv-finalstats b { display: block; font-family: var(--fd); font-weight: 400; font-size: 28px; color: var(--molten-hot); }
.lv-board-final { width: 100%; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin: 0 0.08em; font-size: 0.8em; }
.frac .fn { padding: 0 0.12em 0.06em; border-bottom: 0.08em solid currentColor; }
.frac .fd { padding: 0.06em 0.12em 0; }
.ovl { text-decoration: overline; }
/* Room for the ZoodleBug Home button (top-left on every page, /home-button.js). */
.lv-top { padding-left: var(--zb-home-space, 190px); }