/* Pebble teacher page: layout only. Colours, buttons, panels and the number look come from ../pebble.css (pb- classes).
 * Everything here starts with tc- . Made for a laptop, a tablet or a classroom projector (big, readable numbers). */
.tc-screen { display: none; }
.tc-screen.on { display: block; }
.tc-wrap { max-width: 1280px; margin: 0 auto; padding: 14px 18px 40px; padding-left: max(18px, var(--zb-home-space, 190px)); }
.tc-wrap > .pb-panel, .tc-wrap > .pb-h1 { margin-bottom: 16px; }
.tc-narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.tc-grow { flex: 1 1 auto; }
.tc-note { margin: 0 0 8px; font-size: 16px; }
.tc-hint { color: var(--pb-ink-soft); font-size: 15px; margin: 0 0 6px; }
.tc-h3 { font-family: "Fredoka", "Andika", sans-serif; font-size: 22px; margin: 18px 0 8px; color: var(--pb-forest); }

/* top strip */
.tc-bar { position: sticky; top: 0; z-index: 800; background: var(--pb-forest2); color: var(--pb-cream); border-bottom: 4px solid var(--pb-forest); }
.tc-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 14px; padding-left: max(14px, var(--zb-home-space, 190px)); max-width: 1500px; margin: 0 auto; }
/* the join address and code fill the bar so students can read them from across the room (Tim, 14 Oct 2026) */
.tc-bar-code { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: "Fredoka", sans-serif; line-height: 1.02; }
.tc-bar-url { font-size: clamp(20px, 2.5vw, 38px); font-weight: 600; white-space: nowrap; margin: 0; }
.tc-bar-url b { font-weight: 700; }
.tc-bar-cl { white-space: nowrap; font-size: clamp(32px, 4.8vw, 74px); font-weight: 600; letter-spacing: .03em; }
.tc-bar-cl b { letter-spacing: .14em; font-weight: 700; }
.tc-bar-pills { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.tc-bar .pb-pill { min-height: 34px; padding: 2px 12px; font-size: 15px; }
/* Every bar button is drawn here, so none of them can turn cream-on-cream. (pebble.css makes plain buttons inherit the bar's
   cream text; that is what made the music button look white and empty when it was off.) States: normal, hover, focus, on (pressed), off, disabled. */
.tc-bar .tc-tool, .tc-endmusic {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 14px 4px 10px; border-radius: 14px;
  border: 3px solid var(--pb-stone3); background: var(--pb-cream); color: var(--pb-forest); text-align: left;
  font: 700 16px/1.1 "Andika", sans-serif; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); cursor: pointer; touch-action: manipulation;
}
.tc-tool .tc-ico { width: 26px; height: 26px; flex: none; }
.tc-tool-t { display: flex; flex-direction: column; gap: 1px; }
.tc-tool-t b { font-size: 17px; }
.tc-tool-t small { font-size: 12px; font-weight: 400; color: var(--pb-ink-soft); max-width: 160px; line-height: 1.15; }
.tc-bar .tc-tool:hover, .tc-endmusic:hover { background: #fff; border-color: var(--pb-sun); }
.tc-bar .tc-tool:focus-visible, .tc-endmusic:focus-visible { outline: 3px solid var(--pb-sun); outline-offset: 2px; }
.tc-bar .tc-tool:active, .tc-endmusic:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.tc-bar .tc-tool[disabled], .tc-endmusic[disabled] { opacity: .55; cursor: not-allowed; }
/* music ON: light stone button with a green tick bar; OFF: dark button with a dashed cream border, cream text and a slashed note */
.tc-bar .tc-tool[aria-pressed="true"], .tc-endmusic[aria-pressed="true"] { background: var(--pb-cream); color: var(--pb-forest); border-color: var(--pb-moss); }
.tc-bar .tc-tool[aria-pressed="false"], .tc-endmusic[aria-pressed="false"] { background: #2b4636; color: var(--pb-cream); border: 3px dashed #e9dfc3; box-shadow: none; }
.tc-bar .tc-tool[aria-pressed="false"]:hover, .tc-endmusic[aria-pressed="false"]:hover { background: #3a5a47; border-color: var(--pb-sun); }
.tc-bar .tc-endbtn { background: #fde1e4; color: #7d1625; border-color: #e58a96; }

/* the small feedback button adds a 48px spacer under the footer; on the one-screen pages that alone would force scrolling */
body:has(#sSetup.on) #zb-feedback-room, body:has(#sJoin.on) #zb-feedback-room, body:has(#sEnd.on) #zb-feedback-room { display: none; }
body.tc-hasbar #sSetup .tc-logo-xl { width: clamp(240px, 24vw, 460px); height: auto; }
/* setup + join pages: everything on one screen (no scrolling on a laptop or an iPad lying down) */
.tc-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tc-logo { height: 84px; width: auto; }
.tc-setupwrap { padding-top: 8px; padding-bottom: 14px; padding-left: 18px; }
.tc-sethead { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; padding-left: max(0px, calc(var(--zb-home-space, 190px) - 18px)); margin-bottom: 8px; }
.tc-logo-xl { width: clamp(260px, 26vw, 460px); height: auto; flex: none; filter: drop-shadow(0 4px 0 rgba(40, 70, 30, .18)); }
.tc-settitle { margin: 0; font-size: clamp(30px, 5vh, 46px); }
.tc-setgrid { display: grid; grid-template-columns: minmax(250px, 0.7fr) minmax(0, 2.3fr); gap: 12px; align-items: start; }
.tc-setleft { display: grid; gap: 10px; }
.tc-tight { padding: 10px 14px 12px; }
.tc-tight .pb-h2 { font-size: clamp(20px, 2.6vh, 26px); margin-bottom: 4px; }
.tc-h2note { font-size: 14px; font-weight: 400; font-family: "Andika", sans-serif; margin-left: 8px; }
.tc-optgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.tc-opt2 { border: 2px solid var(--pb-stone2); border-radius: 14px; background: #fff; padding: 0 10px 5px; }
.tc-opt2 .pb-switch { min-height: 44px; gap: 8px; }
.tc-opt2 .pb-switch span { font-size: 16px; line-height: 1.15; }
.tc-opt2 input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--pb-leaf); flex: none; }
.tc-opt2 .tc-hint { font-size: 13px; margin: 0 0 1px; line-height: 1.15; }
.tc-opt2 .tc-sub { padding: 0 0 2px; gap: 4px 10px; }
.tc-opt2 .tc-sub label { font-size: 14.5px; }
.tc-opt2 .pb-select, .tc-opt2 .pb-input { min-height: 40px; font-size: 17px; padding: 2px 10px; }
.tc-opt2 .tc-num { width: 120px; }
.tc-ready { display: grid; gap: 4px; }
.tc-ready .pb-h2 { margin: 0; }
.tc-ready .tc-hint { margin: 0 0 4px; font-size: 15px; }
.tc-ready .pb-big { width: 100%; }
.tc-start-card .pb-err { min-height: 0; }
.tc-opt { border-top: 2px solid var(--pb-stone2); padding: 4px 0 2px; margin-top: 6px; }
.tc-opt .pb-switch span { font-size: 16px; line-height: 1.2; }
.tc-opt input[type=checkbox] { width: 28px; height: 28px; accent-color: var(--pb-leaf); flex: none; }
.tc-opt .tc-hint { font-size: 14px; }
.tc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 2px 0 8px 4px; }
.tc-sub.off { opacity: .45; }
.tc-sub label { font-weight: 700; }
.tc-num { width: 150px; }
#classCard .pb-select { min-height: 44px; font-size: 17px; }
#classCard .pb-label { margin-top: 0; margin-bottom: 2px; }
#botCard .tc-note { margin: 0 0 4px; font-size: 15px; }
#botCard .tc-sub { padding-bottom: 0; }
#botCard .pb-select { min-height: 44px; font-size: 17px; }
.tc-roster { margin-top: 4px; max-height: 96px; overflow: auto; min-height: 0; }
/* join page */
.tc-join { text-align: center; padding-top: 10px; padding-bottom: 10px; }
.tc-join-lab { color: var(--pb-ink-soft); font-size: 17px; }
.tc-joinurl, .tc-bigcode { font-family: "Fredoka", sans-serif; font-weight: 700; color: var(--pb-forest); line-height: 1.12; white-space: nowrap; font-size: var(--tc-joinfs, clamp(24px, 2.9vw, 44px)); }
.tc-bigcode { letter-spacing: .12em; padding-left: .12em; background: #fff4c4; border: 4px solid var(--pb-sun); border-radius: 18px; display: inline-block; padding: 0 .3em 0 .42em; margin: 2px 0 6px; }
.tc-joinurl { margin-bottom: 4px; }
.tc-qrrow { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.tc-qr { background: #fff; padding: 10px; border-radius: 12px; border: 3px solid var(--pb-stone3); width: 192px; height: 192px; display: grid; place-items: center; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; }
.tc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 2px solid var(--pb-stone3); font-weight: 700; font-size: 18px; }
.tc-chip i, .tc-card-name i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid rgba(0, 0, 0, .25); flex: none; }
.tc-start { margin-top: 14px; display: grid; gap: 6px; justify-items: start; }
.tc-startnote { font-size: 18px; font-weight: 700; color: var(--pb-forest2); }
.tc-joingrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.tc-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* round setup */
.tc-modes .pb-btn { flex: 1 1 280px; }
.tc-rsgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 10px; }
.tc-rsright { position: sticky; top: 76px; }
.tc-three { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
.tc-three .pb-input { font-size: 26px; min-height: 60px; }
.tc-levels { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tc-level { display: flex; gap: 12px; align-items: center; text-align: left; padding: 4px 12px; border-radius: 14px; border: 3px solid var(--pb-stone3); background: var(--pb-cream); min-height: 56px; font-size: 15px; line-height: 1.2; }
.tc-level-n { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--pb-leaf); color: #fff; display: grid; place-items: center; font-family: "Fredoka", sans-serif; font-size: 22px; }
.tc-level[aria-pressed="true"] { background: var(--pb-forest2); border-color: var(--pb-forest); color: var(--pb-cream); box-shadow: 0 0 0 4px var(--pb-sun); }
.tc-level[aria-pressed="true"] .tc-level-n { background: var(--pb-sun); color: #3a2300; }
.tc-trick { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fde1e4; color: #7d1625; border: 2px dashed var(--pb-bad); font-size: 15px; font-family: "Andika", sans-serif; font-weight: 700; vertical-align: middle; }
.tc-pushrow { margin-top: 12px; }
.pb-btn.pb-primary[disabled] { background: #cfd8cf; border-color: #9aa89a; border-style: dashed; color: #4b5a4f; opacity: 1; }
.tc-three .pb-input[aria-invalid="true"] { border-color: var(--pb-bad); background: #fff3f4; }
/* the reason the Push button cannot be pressed: about twice the size of the old note, red, right under the button */
.tc-why { margin-top: 10px; min-height: 36px; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; font-weight: 700; color: #9c1f2e; }
.tc-why.soft { color: var(--pb-forest2); font-weight: 400; font-size: clamp(18px, 2vw, 22px); }
.tc-why:empty { display: none; }

/* the path preview: a tick mark at each end (with its number) and the Pebble Number on a line.
   Outside the path: the number sits centered above the line, red, in a dotted outline, with no arrow. */
.tc-preview { margin: 6px 0 4px; }
.tc-pv { position: relative; height: 190px; background: linear-gradient(#e9f7da, #d3edba); border: 3px solid var(--pb-stone3); border-radius: 20px; overflow: hidden; }
.tc-pv-line { position: absolute; left: 8%; right: 8%; top: 98px; height: 14px; border-radius: 8px; background: var(--pb-stone2); border: 3px solid var(--pb-stone3); box-sizing: border-box; }
.tc-pv-end { position: absolute; top: 74px; width: 16%; text-align: center; transform: translateX(-50%); }
.tc-pv-end.l { left: 8%; } .tc-pv-end.r { left: 92%; }
.tc-pv-tick { display: block; width: 7px; height: 62px; margin: 0 auto; background: var(--pb-forest); border-radius: 4px; }
.tc-pv-lab { display: block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 30px; color: var(--pb-forest); margin-top: 2px; line-height: 1.1; }
.tc-pv-mark { position: absolute; top: 6px; transform: translateX(-50%); text-align: center; z-index: 2; }
.tc-pv-num { display: inline-block; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 38px; background: var(--pb-sun); color: #3a2300; border: 3px solid var(--pb-sun-dk); border-radius: 14px; padding: 0 14px; }
.tc-pv-arrow { display: block; color: var(--pb-sun-dk); font-size: 26px; line-height: .8; }
.tc-pv-mark.out { left: 50%; background: #fff3f4; border: 3px dotted var(--pb-bad); border-radius: 16px; padding: 2px 16px 3px; }
.tc-pv-mark.out .tc-pv-num { background: transparent; border: 0; color: #b3303f; padding: 0; display: block; line-height: 1.1; }
.tc-pv-outlab { display: block; font-family: "Andika", sans-serif; font-weight: 700; font-size: 15px; color: #9c1f2e; }
.tc-q { opacity: .45; }
.tc-three + .tc-hint { margin-top: 10px; }
.tc-bigprev .tc-pv { height: 280px; }
.tc-bigprev .tc-pv-line { top: 150px; height: 18px; }
.tc-bigprev .tc-pv-end { top: 118px; }
.tc-bigprev .tc-pv-tick { height: 84px; width: 9px; }
.tc-bigprev .tc-pv-lab { font-size: 46px; }
.tc-bigprev .tc-pv-num { font-size: 60px; }
.tc-bigprev .tc-pv-mark { top: 8px; }
.tc-bigprev .tc-pv-outlab { font-size: 20px; }

.tc-smallprev .tc-pv { height: 150px; }
.tc-smallprev .tc-pv-line { top: 88px; }
.tc-smallprev .tc-pv-end { top: 66px; }
.tc-smallprev .tc-pv-tick { height: 46px; }
.tc-smallprev .tc-pv-end .tc-pv-lab { font-size: 26px; }
.tc-smallprev .tc-pv-num { font-size: 32px; }
.tc-smallprev .tc-pv-mark { top: 4px; }

/* round open */
.tc-livecard { text-align: center; }
.tc-livetop { margin-bottom: 8px; }
.tc-bigtimer { font-size: clamp(48px, 7vw, 84px); }
.tc-count { font-family: "Fredoka", sans-serif; font-size: clamp(54px, 8vw, 96px); font-weight: 700; color: var(--pb-forest); margin: 14px 0 6px; line-height: 1.1; }
.tc-count-of { font-size: clamp(24px, 3.2vw, 38px); font-weight: 600; color: var(--pb-forest2); }
.tc-locking { margin: 12px auto; max-width: 560px; }

/* end of round: results (left) + discussion path (right) */
.tc-reviewwrap { padding-top: 6px; padding-bottom: 8px; }
body.tc-hasbar .tc-wrap { padding-left: 14px; padding-right: 14px; }
.tc-rvhead { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-bottom: 6px; }
.tc-rvhead .pb-h1 { margin: 0; font-size: clamp(24px, 3.8vh, 36px); }
.tc-rvprob { font-size: clamp(18px, 2.6vh, 24px); font-weight: 700; color: var(--pb-forest2); }
.tc-dash { display: grid; grid-template-columns: minmax(340px, 4.4fr) minmax(0, 7.6fr); gap: 12px; align-items: start; }
.tc-dash > .pb-panel { padding: 10px 12px 12px; }
.tc-resp { display: flex; flex-direction: column; gap: 8px; }
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.tc-stat { background: #fff; border: 2px solid var(--pb-stone2); border-radius: 12px; padding: 4px 8px 5px; text-align: center; }
.tc-stat b { display: block; font-family: "Fredoka", sans-serif; font-size: 24px; line-height: 1.1; color: var(--pb-forest); }
.tc-stat span { font-size: 12.5px; color: var(--pb-ink-soft); line-height: 1.1; display: block; }
.tc-dist .tc-bar-d { display: flex; height: 26px; border-radius: 13px; overflow: hidden; border: 2px solid var(--pb-stone3); background: var(--pb-stone); }
.tc-seg { display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; min-width: 0; }
.tc-seg.exact { background: #1f8a3c; } .tc-seg.close { background: #6cb44a; color: #14301c; } .tc-seg.off { background: #f5a623; color: #3a2300; }
.tc-seg.far { background: #c8453f; } .tc-seg.none { background: #9aa39a; }
.tc-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; margin-top: 3px; color: var(--pb-ink); }
.tc-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tc-legend .exact i { background: #1f8a3c; } .tc-legend .close i { background: #6cb44a; } .tc-legend .off i { background: #f5a623; }
.tc-legend .far i { background: #c8453f; } .tc-legend .none i { background: #9aa39a; }
.tc-perfect { background: linear-gradient(#fff7d0, #ffeaa0); border: 2px solid var(--pb-sun); border-radius: 14px; padding: 5px 10px 6px; }
.tc-perfect h3 { margin: 0 0 3px; font-family: "Fredoka", sans-serif; font-size: 18px; color: #6a4300; }
.tc-perfect .tc-pchips { display: flex; flex-wrap: wrap; gap: 4px 6px; max-height: 64px; overflow: auto; }
.tc-pchip { background: #fff; border: 2px solid var(--pb-sun); border-radius: 999px; padding: 0 10px; font-weight: 700; font-size: 16px; }
.tc-perfect .tc-none { font-size: 14px; color: #6a4300; }
.tc-rowhead { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; color: var(--pb-forest2); margin-top: 2px; }
.tc-rows { display: flex; flex-direction: column; gap: 4px; overflow: auto; max-height: max(130px, calc(100vh - 500px)); padding-right: 2px; }
.tc-row { background: #fff; border: 2px solid var(--pb-stone2); border-radius: 12px; padding: 3px 8px; }
.tc-row-main { display: flex; align-items: center; gap: 6px 8px; min-height: 44px; }
.tc-row-name { flex: 1 1 110px; min-width: 0; text-align: left; line-height: 1.15; }
.tc-namebtn { background: none; border: 0; padding: 4px 2px; font: 700 17px/1.15 "Andika", sans-serif; color: var(--pb-forest); text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.tc-namebtn:hover, .tc-namebtn:focus-visible { color: var(--pb-leaf-dk); }
.tc-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); flex: none; }
.tc-notetxt { display: block; font-size: 13.5px; font-weight: 400; color: var(--pb-ink-soft); overflow-wrap: anywhere; }
.tc-res { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; text-align: right; }
.tc-badge { padding: 2px 10px; border-radius: 999px; font-size: 14.5px; font-weight: 700; background: var(--pb-stone2); color: var(--pb-ink); white-space: nowrap; }
.tc-badge.exact { background: #1f8a3c; color: #fff; } .tc-badge.close { background: #d8f0c8; color: #14301c; } .tc-badge.off { background: #ffe9b8; color: #5a3800; }
.tc-badge.far { background: #fde1e4; color: #7d1625; } .tc-badge.none { background: #e6e6e0; color: #444; }
.tc-small-flag { font-size: 12px; color: #7a5200; font-weight: 700; }
.tc-dia { font-weight: 700; color: #0a5b7d; white-space: nowrap; font-size: 15px; min-width: 38px; text-align: right; }
.tc-noteb { white-space: nowrap; min-height: 40px; min-width: 40px; padding: 2px 8px; border-radius: 10px; border: 2px solid var(--pb-stone3); background: var(--pb-cream); color: var(--pb-forest); font: 700 14px "Andika", sans-serif; display: inline-flex; align-items: center; gap: 4px; }
.tc-noteb:hover, .tc-noteb:focus-visible { border-color: var(--pb-leaf); }
.tc-noteedit { display: flex; gap: 6px; padding: 2px 0 4px; }
.tc-noteedit input { flex: 1 1 auto; min-height: 42px; font: inherit; font-size: 16px; padding: 4px 10px; border: 3px solid var(--pb-leaf); border-radius: 10px; min-width: 0; }
.tc-noteedit .pb-btn { min-height: 42px; padding: 2px 12px; font-size: 15px; }
.tc-disc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px; }
.tc-disc-head .pb-h2 { margin: 0; font-size: clamp(20px, 2.8vh, 26px); }
.tc-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 260px; }
.tc-ans-text { font-size: 16px; }
.tc-answer .pb-pill { padding: 2px 10px; font-size: 14px; }
.tc-answer .pb-btn.pb-small { min-height: 40px; padding: 2px 10px; font-size: 14px; }
.tc-big { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 1.3em; }
.tc-boardhost { min-height: 160px; }
/* the discussion board: its picture is sized to the height that is left on the screen so the tools and buttons stay in view */
#rvPathBoard .pb-board { gap: 4px; }
#rvPathBoard .pb-tools { gap: 3px; justify-content: flex-start; }
#rvPathBoard .pb-tgroup { padding: 0 3px; gap: 3px; }
#rvPathBoard .pb-tool { min-height: 44px; padding: 2px 7px; font-size: 14px; gap: 3px; }
#rvPathBoard .pb-sw { width: 40px; height: 40px; border-width: 3px; }
.tc-ctls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.tc-ctls .pb-btn { min-height: 46px; padding: 4px 14px; font-size: 16px; }
.tc-ctls2 { margin-top: 6px; }
.tc-ctl-lab { font-weight: 700; font-size: 16px; }
.tc-sel { width: auto; min-width: 150px; flex: 1 1 150px; max-width: 280px; min-height: 46px; font-size: 16px; }
.tc-ctl { background: #cfeec6; border-color: var(--pb-leaf-dk); color: var(--pb-forest); }
.tc-boardsdet { margin-top: 12px; }
.tc-boardsdet > summary { cursor: pointer; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 20px; color: var(--pb-forest); min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tc-boardsdet[open] > summary { margin-bottom: 10px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tc-card { background: #fff; border: 3px solid var(--pb-stone3); border-radius: 18px; padding: 8px 10px 10px; cursor: pointer; text-align: left; }
.tc-card:hover, .tc-card:focus-visible { border-color: var(--pb-leaf); box-shadow: 0 0 0 4px rgba(47, 143, 58, .3); outline: none; }
.tc-card.blank { background: #f6f1e4; border-style: dashed; }
.tc-card-name { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.tc-card-board { pointer-events: none; min-height: 90px; }
.tc-card-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 30px; margin-top: 6px; }
.tc-flag { padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--pb-stone2); }
.tc-flag.bad { background: #fde1e4; color: #7d1625; }
.tc-flag.warn { background: #ffe9b8; color: #5a3800; }
.tc-noboard { padding: 18px; color: var(--pb-ink-soft); }
.tc-tablewrap { overflow-x: auto; }
.tc-spacer { height: 70px; }
.tc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 700; background: rgba(18, 54, 31, .96); border-top: 4px solid var(--pb-sun); }
.tc-sticky-in { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: flex-end; padding: 4px 150px calc(4px + env(safe-area-inset-bottom, 0px)) 14px; }   /* the bottom-right corner, left of the Feedback button */
.tc-sticky-in .pb-big { min-height: 50px; font-size: 20px; padding: 4px 24px; }
.tc-sticky-q { color: var(--pb-cream); font-family: "Fredoka", sans-serif; font-size: 24px; font-weight: 600; }
.tc-sticky[hidden] { display: none; }

/* full-screen board */
.tc-fs { position: fixed; inset: 0; z-index: 2000; background: linear-gradient(#d7f0c4, #a6d58b); display: flex; flex-direction: column; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
.tc-fs[hidden] { display: none; }
.tc-fs-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-left: var(--zb-home-space, 190px); }   /* room for the ZoodleBug Home button */
.tc-fs-board { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .45); border: 3px solid var(--pb-stone3); border-radius: 20px; padding: 8px; }
.tc-fs .tc-fs-board > * { width: min(100%, calc((100vh - 310px) * 2.3)); min-width: 320px; }
.tc-fs-note { text-align: center; }
body.tc-fs-open { overflow: hidden; }
body.tc-fs-open .tc-sticky { display: none; }

/* the end: a Pebble celebration (sky, sun, hills) */
body.tc-endbg { background:
  radial-gradient(circle at 88% 9%, #ffe27a 0, #f5c542 7%, rgba(245, 197, 66, 0) 17%),
  radial-gradient(1100px 380px at 20% 108%, #5eae4a 0, #5eae4a 60%, transparent 61%),
  radial-gradient(900px 320px at 90% 112%, #3f9040 0, #3f9040 60%, transparent 61%),
  linear-gradient(#7cc8f0 0%, #bfe9ff 42%, #e4f5cf 72%, #b5e39a 100%);
  background-attachment: fixed; }
#sEnd { position: relative; overflow: hidden; min-height: 100vh; }
.tc-endwrap { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 6px 18px 12px; text-align: center; }
.tc-endlogo { width: clamp(260px, 26vw, 480px); height: auto; filter: drop-shadow(0 4px 0 rgba(30, 80, 40, .25)); }
.tc-endwait { font-family: "Fredoka", sans-serif; font-size: 28px; color: var(--pb-forest); margin-top: 30px; }
.tc-endtitle { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(32px, 5.8vh, 54px); margin: 0; color: var(--pb-forest); text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(40, 90, 40, .2); letter-spacing: .01em; }
.tc-endsub { font-size: clamp(16px, 2.3vh, 20px); color: var(--pb-forest2); font-weight: 700; margin: 0 0 4px; }
.tc-endmusic { position: absolute; top: 10px; right: 12px; z-index: 5; min-height: 44px; padding: 2px 12px; font-size: 15px; }
.tc-podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 4px auto 4px; }
.tc-place { flex: 1 1 0; max-width: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: tc-rise .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.tc-place.p2 { animation-delay: .15s; } .tc-place.p1 { animation-delay: .4s; } .tc-place.p3 { animation-delay: .0s; }
.tc-who { background: #fff; border: 4px solid var(--tc-medal, var(--pb-stone3)); border-radius: 18px; padding: 2px 10px 4px; margin-bottom: 4px; width: 100%; box-shadow: 0 5px 0 rgba(40, 70, 30, .22); }
.tc-who .tc-medal { font-size: clamp(26px, 4.2vh, 38px); line-height: 1; display: block; }
.tc-who .tc-names { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(18px, 2.9vh, 27px); color: var(--pb-forest); line-height: 1.15; overflow-wrap: anywhere; }
.tc-who .tc-val { font-weight: 700; color: #0a5b7d; font-size: clamp(15px, 2.1vh, 18px); }
.tc-who .tc-tie { display: inline-block; background: var(--pb-sun); color: #3a2300; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: middle; }
.tc-step { width: 100%; border-radius: 14px 14px 0 0; display: grid; place-items: start center; padding-top: 4px; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(24px, 4.4vh, 42px); color: rgba(255, 255, 255, .95); text-shadow: 0 3px 0 rgba(0, 0, 0, .22); border: 4px solid rgba(0, 0, 0, .15); border-bottom: 0; }
.tc-place.p1 .tc-step { height: clamp(52px, 9.5vh, 90px); background: linear-gradient(#ffd84d, #e2a40f); }
.tc-place.p2 .tc-step { height: clamp(40px, 6.8vh, 66px); background: linear-gradient(#e4e8ee, #9aa5b3); }
.tc-place.p3 .tc-step { height: clamp(30px, 4.6vh, 46px); background: linear-gradient(#e0a070, #a8662f); }
.tc-place.p1 { --tc-medal: #e2a40f; } .tc-place.p2 { --tc-medal: #9aa5b3; } .tc-place.p3 { --tc-medal: #a8662f; }
.tc-rest { list-style: none; margin: 10px auto 0; padding: 0; max-width: 520px; display: grid; gap: 3px; max-height: 15vh; overflow: auto; text-align: left; }
.tc-rest li { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .92); border: 2px solid var(--pb-stone3); border-radius: 12px; padding: 0 12px; font-size: 18px; font-weight: 700; min-height: 34px; }
.tc-rest .rk { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pb-forest2); color: var(--pb-cream); display: grid; place-items: center; font-family: "Fredoka", sans-serif; }
.tc-rest .nm { flex: 1 1 auto; } .tc-rest .vl { color: #0a5b7d; }
.tc-endstats { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; margin: 8px 0 4px; }
.tc-endstat { background: rgba(255, 255, 255, .92); border: 3px solid var(--pb-stone3); border-radius: 16px; padding: 2px 14px 4px; min-width: 110px; }
.tc-endstat b { display: block; font-family: "Fredoka", sans-serif; font-size: clamp(22px, 3.4vh, 30px); color: var(--pb-forest); line-height: 1.1; }
.tc-endstat span { font-size: 13px; color: var(--pb-ink-soft); }
.tc-endactions { margin: 6px 0 4px; }
.tc-endactions .pb-btn { text-decoration: none; min-height: 56px; font-size: 21px; }
.tc-endreports { max-width: 760px; margin: 10px auto 0; }
.tc-endreports .pb-banner { font-size: clamp(14px, 2vh, 18px); padding: 4px 12px; }
.tc-reportbtn { text-decoration: none; }
.tc-saved { background: #cfeec6; border-color: var(--pb-leaf-dk); color: var(--pb-forest); }
.tc-notsaved { background: #fff1c6; font-weight: 600; }
.tc-reportbtn { margin-left: 10px; }
.tc-link { color: var(--pb-forest); text-decoration: underline; }
.great .tc-endstat { min-width: 150px; padding: 8px 20px 10px; } .great .tc-endstat b { font-size: clamp(32px, 6vh, 52px); }
.great .tc-endstats { margin-top: 24px; }
.great .tc-endtitle::before { content: "\1F389  "; }
.great .tc-endtitle::after { content: "  \1F389"; }
@keyframes tc-rise { from { transform: translateY(60px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.tc-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tc-confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; opacity: .9; animation: tc-fall linear infinite; }
@keyframes tc-fall { from { transform: translateY(-30px) rotate(0deg); } to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) {
  .tc-place { animation: none; }
  .tc-confetti { display: none; }
}

/* fractions inside headings/preview must not shrink below readable */
.tc-pv .pb-frac, .tc-ans-text .pb-frac, .tc-pnum .pb-frac { font-size: 1em; }

@media (max-width: 1250px) { #barRound { display: none; } }
@media (max-width: 1100px) {
  .tc-tool-t small { max-width: 140px; }
  .tc-bar .tc-tool { padding-right: 10px; }
  .tc-bar .tc-endbtn { padding: 4px 10px; }
  body:has(#sReview.on) #barEnd { display: none; }   /* the What next bar has End session */
}
@media (max-width: 699px) {
  .tc-optgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tc-two, .tc-joingrid { grid-template-columns: 1fr; }
  .tc-rsgrid { grid-template-columns: 1fr; }
  .tc-rsright { position: static; }
  .tc-levels { grid-template-columns: 1fr; }
  .tc-wrap { padding-left: max(14px, var(--zb-home-space, 110px)); }
  .tc-wrap.tc-setupwrap { padding-left: 14px; }
  .tc-setgrid { grid-template-columns: 1fr; }
  .tc-setleft { grid-template-columns: 1fr 1fr; grid-template-areas: "cls bots"; align-items: start; }
  .tc-setleft #classCard { grid-area: cls; } .tc-setleft #botCard { grid-area: bots; } .tc-setleft .tc-start-card { grid-area: ready; }
  .tc-settitle { font-size: 34px; }
  .tc-logo-xl { width: 260px; height: auto; }
  .tc-sethead { flex-wrap: nowrap; }
  .tc-dash { grid-template-columns: 1fr; }
  .tc-rows { max-height: none; }
}
@media (max-width: 640px) {
  .tc-pv-lab { font-size: 22px; } .tc-pv-num { font-size: 28px; }
  .tc-logo { height: 60px; }
  .tc-optgrid { grid-template-columns: 1fr; }
  .tc-podium { flex-wrap: wrap; }
}

/* setup page: who gets the Join button, and the status line on the join page */
.tc-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tc-pick input { width: 22px; height: 22px; accent-color: var(--pb-leaf); }
.tc-invstatus { margin-top: 8px; font-weight: 700; }

/* join info overlay (late joiners): the address is as big as the code */
.tc-joinov { position: fixed; inset: 0; z-index: 50; background: rgba(10,30,15,.72); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.tc-joinov[hidden] { display: none; }
.tc-joinov-card { background: var(--pb-cream); border: 5px solid var(--pb-leaf); border-radius: 26px; padding: 14px 30px 18px; text-align: center; max-width: 96vw; }
.tc-joinov-h { font-family: "Fredoka", "Andika", sans-serif; font-weight: 700; font-size: 38px; color: var(--pb-forest); }
.tc-joinov-qr { display: inline-block; margin: 6px 0; padding: 10px; min-width: 300px; min-height: 300px; background: #fff; border-radius: 16px; }
.tc-joinov-lab { color: var(--pb-ink-soft); font-size: 18px; }
.tc-joinov-u, .tc-joinov-c { font-family: "Fredoka", sans-serif; font-weight: 700; color: var(--pb-forest); white-space: nowrap; line-height: 1.12; font-size: clamp(26px, 5.2vw, 60px); }
.tc-joinov-c { letter-spacing: .14em; padding-left: .14em; margin-bottom: 8px; }

@media (max-width: 560px) { .tc-bar-url { display: none; } }

/* the Add Students button lives at the top right of the Setup page (Tim, 12 Oct 2026) */
.tc-startbox { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; max-width: 380px; }
.tc-startbox .tc-hint { margin: 0; font-size: 14px; }
.tc-startbox .pb-err { min-height: 0; font-size: 15px; }
.tc-startbox .pb-big { white-space: nowrap; }
@media (max-width: 900px) { .tc-sethead { flex-wrap: nowrap; } .tc-logo-xl { width: 200px; height: auto; } .tc-settitle { font-size: 28px; } .tc-startbox { margin-left: auto; align-items: flex-end; text-align: right; } }

/* short windows (a laptop with browser bars, about 590px tall): four columns of options and a smaller logo so Setup still fits without scrolling */
@media (max-height: 700px) and (min-width: 1100px) {
  .tc-optgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #sSetup .tc-logo-xl { width: 200px; height: auto; }
  .tc-sethead { margin-bottom: 2px; }
  .tc-startbox .pb-h2 { font-size: 22px; margin: 0; line-height: 1; }
  .tc-startbox .pb-big { min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
  .tc-startbox .tc-practicebtn { min-height: 44px; margin-top: 0; padding-top: 2px; padding-bottom: 2px; font-size: 17px; }
}

/* ================= whole-class practice (Tim, 12 Oct 2026): made for a projector or smartboard ================= */
.tc-practicebtn { min-height: 46px; font-size: 18px; padding: 4px 16px; white-space: nowrap; margin-top: 4px; }
.tc-startbox .tc-practicebtn { align-self: flex-end; }
.pb-btn.tc-practicebtn { background: #fff; border-color: var(--pb-leaf); color: var(--pb-forest); }
.tc-practicebtn:hover, .tc-practicebtn:focus-visible { background: #e6f5e1; }
/* "How will the class answer?" on the problem setup screen */
#practiceHow { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--pb-stone2); }
#practiceHow[hidden] { display: none; }
#practiceHow .tc-hint { margin: 6px 0 0; font-size: 17px; }
#practiceExit { margin-left: 12px; }

/* the practice screen: one screen, no scrolling */
body.tc-practicing .zb-site-footer { padding-top: 2px; padding-bottom: 4px; }
body.tc-practicing #zb-feedback-room { display: none; }
.tc-prwrap { max-width: 2400px; margin: 0 auto; padding: 4px 14px 2px; }
.tc-prhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-left: max(0px, calc(var(--zb-home-space, 190px) - 14px)); min-height: 54px; }
.tc-prtitle { font-family: "Fredoka", "Andika", sans-serif; font-size: 28px; white-space: nowrap; margin: 0; color: var(--pb-forest); line-height: 1.1; }
.tc-prn { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 22px; background: var(--pb-forest2); color: var(--pb-cream); border-radius: 999px; padding: 2px 16px; white-space: nowrap; }
.tc-score { order: 6; flex: 0 0 auto; margin: 0 auto; display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; background: #fff; border: 3px solid var(--pb-leaf); border-radius: 16px; padding: 2px 14px; }
.tc-score-main { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; color: var(--pb-forest); white-space: nowrap; }
.tc-score-main b { margin-left: 6px; font-size: 34px; color: var(--pb-leaf-dk); display: inline-block; min-width: 1.2ch; text-align: center; }
.tc-score-tally { font-weight: 700; font-size: 17px; color: var(--pb-ink); white-space: nowrap; }
.tc-score-streak { font-weight: 700; font-size: 17px; color: #3a2300; background: #ffe9b8; border: 2px solid var(--pb-sun-dk); border-radius: 999px; padding: 0 12px; white-space: nowrap; }
.tc-score-streak.hot { background: var(--pb-sun); }
.tc-pop .tc-score-main b { animation: tc-pop .7s ease-out; }
@keyframes tc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.5); color: var(--pb-sun-dk); } 100% { transform: scale(1); } }
.tc-prmusic { position: static; white-space: nowrap; }
.tc-prmusic .tc-tool-t { white-space: nowrap; }
.tc-prend { min-height: 48px; }
.tc-prboard { margin-top: 4px; padding: 4px; }
.tc-prboard .pb-board { gap: 4px; }
.tc-prboard .pb-challenge { font-size: clamp(18px, 3.4vh, 30px); line-height: 1.1; }
.tc-prboard .pb-tools { gap: 3px; justify-content: flex-start; }
.tc-prboard .pb-tgroup { padding: 0 3px; gap: 3px; }
.tc-prboard .pb-tool { min-height: 44px; padding: 2px 7px; font-size: 14px; gap: 3px; }
.tc-prboard .pb-sw { width: 40px; height: 40px; border-width: 3px; }
/* the line under the picture: hint, "Locked in", or the result of the problem */
.tc-prmsg { margin-top: 5px; min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px 14px;
  font-family: "Fredoka", "Andika", sans-serif; font-weight: 600; font-size: clamp(20px, 3.2vh, 28px); line-height: 1.15; color: var(--pb-forest2);
  border-radius: 16px; border: 3px solid transparent; }
.tc-prmsg.locked { background: #fff1c6; border-color: var(--pb-sun-dk); color: #3a2300; }
.tc-prmsg.res-perfect { background: #1f7a3c; color: #fff; font-size: clamp(26px, 4.4vh, 40px); font-weight: 700; }
.tc-prmsg.res-close { background: #d8f0c8; border-color: var(--pb-leaf-dk); color: #14301c; font-size: clamp(24px, 4vh, 36px); font-weight: 700; }
.tc-prmsg.res-near { background: #ffe9b8; border-color: var(--pb-sun-dk); color: #3a2300; font-size: clamp(24px, 4vh, 36px); font-weight: 700; }
.tc-prmsg.res-far { background: #fde1e4; border-color: var(--pb-bad); color: #7d1625; font-size: clamp(24px, 4vh, 36px); font-weight: 700; }
.tc-prbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 5px; min-height: 66px; padding-right: 150px; }
.tc-prbar .pb-big { min-height: 60px; font-size: 22px; padding: 6px 22px; }
.tc-prbar .tc-prout[aria-pressed="true"] { background: var(--pb-forest2); color: var(--pb-cream); }
.tc-prtimer { font-size: clamp(40px, 7vh, 60px); line-height: 1; min-width: 3.6ch; background: #fff; border: 3px solid var(--pb-stone3); border-radius: 16px; padding: 0 12px; }
.tc-prtimer[hidden] { display: none; }
.tc-prtimer.pb-low { border-color: var(--pb-bad); }
.tc-votes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tc-vote { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; min-width: 190px; padding: 4px 22px 4px 8px; border-radius: 18px;
  border: 4px solid var(--vc); background: #fff; color: var(--pb-forest); font: 700 22px/1.1 "Andika", sans-serif; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.tc-vote-l { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--vc); color: #fff; display: grid; place-items: center; font: 700 30px/1 "Fredoka", sans-serif; }
.tc-vote-t { text-align: left; }
.tc-vote:hover:not([disabled]) { background: #f1f7ff; }
.tc-vote:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.tc-vote:focus-visible { outline: 4px solid var(--pb-sun); outline-offset: 3px; }
.tc-vote[disabled] { cursor: default; opacity: 1; }
.tc-vote[disabled]:not(.chosen):not(.right) { opacity: .78; }
.tc-vote.chosen { box-shadow: 0 0 0 5px var(--pb-sun); }
.tc-vote.right { background: #d8f0c8; box-shadow: 0 0 0 5px var(--pb-good); }
.tc-vote-ok { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); background: var(--pb-forest2); color: var(--pb-cream); font: 700 13px/1 "Andika", sans-serif; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.tc-vote.right .tc-vote-ok { background: var(--pb-good); color: #fff; }
.tc-pendactions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
#sPEnd { position: relative; overflow: hidden; min-height: calc(100vh - 62px); }   /* leaves room for the page footer so nothing scrolls */
#sPEnd .tc-endwrap { padding-top: 24px; }
#sPEnd .tc-endstats { margin-top: 22px; }
#sPEnd .tc-endstat { min-width: 150px; padding: 8px 20px 10px; }
#sPEnd .tc-endstat b { font-size: clamp(32px, 6vh, 52px); }
#sPEnd .tc-endtitle::before { content: "\1F389  "; }
#sPEnd .tc-endtitle::after { content: "  \1F389"; }
body:has(#sPEnd.on) #zb-feedback-room { display: none; }
@media (prefers-reduced-motion: reduce) { .tc-pop .tc-score-main b { animation: none; } .tc-prtimer.pb-low { animation: none; } }
@media (max-width: 1100px) { .tc-prtitle { font-size: 26px; } .tc-score-tally, .tc-score-streak { font-size: 15px; } .tc-prbar { padding-right: 0; } }

/* with a session open (the top bar is showing) the Setup header is just the button: no 'Ready?' line, a smaller logo */
body.tc-hasbar #sSetup #readyTitle { display: none; }
body.tc-hasbar #sSetup .tc-logo-xl { width: 190px; height: auto; }
body.tc-hasbar #sSetup .tc-sethead { margin-bottom: 2px; }

/* the preview hides where the Pebble Number goes unless the teacher presses Peek (the class may be watching) */
.tc-pv-mark.plain { left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.tc-pv-mark.plain .tc-pv-lab2 { font-size: 14px; font-weight: 700; color: var(--pb-ink-soft); }
.tc-peek { margin-left: 10px; vertical-align: middle; font-size: 15px; }
.tc-peek[aria-pressed="true"] { background: #fff4c4; border-color: #f5a623; }

/* the choice difficulty (class vote): five numbered buttons with Easiest / Hardest at the ends */
#voteDiff { margin-top: 10px; }
#voteDiff[hidden] { display: none; }
.tc-diffrow { align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.tc-diff { min-width: 56px; padding-left: 0; padding-right: 0; }
.tc-difflabel { font-weight: 700; color: var(--pb-ink-soft); font-size: 16px; }

/* a big screen has room: the Pebble logo on the Setup page is doubled (Tim, 13 Oct 2026) */
@media (min-width: 1300px) and (min-height: 800px) {
  body:not(.tc-hasbar) #sSetup .tc-logo-xl { width: clamp(320px, 30vw, 560px); height: auto; }
  body.tc-hasbar #sSetup .tc-logo-xl { width: clamp(300px, 28vw, 520px); height: auto; }
}
/* the four class-vote buttons (three spots + the Outside card) always fit on one row */
.tc-vote { min-width: 0; gap: 8px; padding-right: 14px; }
.tc-votes { gap: 8px; flex-wrap: nowrap; }
@media (max-width: 760px) { .tc-votes { flex-wrap: wrap; } }

/* the "choose students" pop-up and its Setup summary */
.tc-invsum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-weight: 700; }
.tc-pickcard { width: min(720px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.tc-pickbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tc-pickcount { font-weight: 700; color: var(--pb-ink-soft); }
.tc-picklist { overflow: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; text-align: left; padding: 4px; }
.tc-picklist .tc-pick { font-size: 20px; min-height: 48px; background: #fff; border: 3px solid var(--pb-stone2); border-radius: 14px; padding: 4px 12px; }

/* "Send to Join Button": one link on Setup; the choices are in the pop-up */
.tc-invlink { margin-top: 4px; }
.tc-pickbox { display: block; }
.tc-pickcard .pb-select { max-width: 100%; }
.tc-pickcard .tc-pickbox[hidden] { display: none; }

/* pull-downs grow to fit their words ("10 diamonds" was cut off) */
select.tc-num, .tc-opt2 select.tc-num { width: auto; min-width: 120px; max-width: 100%; }

/* Open Store (end screen): bold, high contrast, impossible to miss */
.tc-endstore { margin: 16px auto 6px; padding: 14px 18px; max-width: 760px; border-radius: 22px; background: rgba(255, 255, 255, .55); }
.tc-storerow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pb-body .pb-btn.tc-storebtn { min-height: 66px; padding: 8px 28px; font-size: 28px; font-weight: 800; background: #ff8a00; border-color: #b35f00; color: #1b1100; box-shadow: 0 5px 0 #b35f00; }
.pb-body .pb-btn.tc-storebtn:hover { background: #ffa033; }
.tc-storemin { width: 96px; min-height: 66px; font-size: 30px; font-weight: 800; text-align: center; }
.tc-storelab { font-size: 26px; font-weight: 800; color: var(--pb-forest); }
.tc-storestat { margin-top: 10px; font-size: 21px; font-weight: 700; color: var(--pb-forest); }
#endStoreClose { margin-top: 8px; }

.tc-storehead { margin-bottom: 8px; font-size: 20px; font-weight: 800; color: var(--pb-forest); }
.tc-storepreview { margin-left: 10px; font-size: 16px; font-weight: 700; }
.tc-storenote { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--pb-ink-soft); }
.tc-endstore button:disabled { opacity: .55; cursor: not-allowed; }

/* Tutor Live (docs/tutor-live.md): one tutor, one student. No projector, music, join page or ending the session from here: the Tutor Live room ends it. */
body.tc-tutor #joinInfoBtn, body.tc-tutor #musicBtn, body.tc-tutor #barEnd, body.tc-tutor #rvEnd,
body.tc-tutor .tc-bar-url { display: none !important; }

/* ===== end of round pages (Tim, 14 Oct 2026): results, Pebble Placements, Data, Discuss Problem ===== */
.tc-reviewwrap { padding-bottom: 96px; }
.tc-hub { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); gap: 14px; align-items: stretch; margin-top: 6px; }
.tc-hub > .pb-panel { padding: 14px 18px; }
.tc-hub.solo { grid-template-columns: 1fr; }
.tc-bigavg { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.tc-avglab { font-family: "Fredoka", sans-serif; font-size: 22px; font-weight: 600; color: var(--pb-forest2); }
.tc-avgbig { font-family: "Fredoka", sans-serif; font-size: clamp(64px, 11vh, 120px); font-weight: 700; line-height: 1; color: var(--pb-forest); }
.tc-avgsub { font-size: 20px; font-weight: 700; color: var(--pb-forest2); }
.tc-avgdia { margin-top: 6px; font-size: 20px; font-weight: 700; color: #7a4a00; }
.tc-toplist h2 { margin: 0 0 6px; font-family: "Fredoka", sans-serif; font-size: 24px; color: var(--pb-forest); }
.tc-topol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 34vh; overflow-y: auto; }
.tc-topol li { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--pb-stone2); border-radius: 12px; padding: 6px 12px; font-size: 22px; font-weight: 700; }
.tc-topol .rk { width: 34px; height: 34px; border-radius: 50%; background: var(--pb-sun); color: var(--pb-forest); display: inline-flex; align-items: center; justify-content: center; font-family: "Fredoka", sans-serif; flex: none; }
.tc-topol .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-topol .vl { color: #7a4a00; white-space: nowrap; }
.tc-hubans { min-height: 30px; margin: 8px 0 0; font-size: 20px; }
.tc-hubctl, .tc-subctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.tc-subtitle { margin: 0; font-size: clamp(22px, 3.4vh, 30px); }
.tc-showans.pb-big { min-height: 56px; font-size: 22px; padding: 6px 26px; font-weight: 800; }
.tc-allbtn.pb-big { min-height: 56px; font-size: 22px; padding: 6px 26px; font-weight: 800; }
.tc-navcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.tc-navcard { min-height: clamp(110px, 20vh, 220px); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 22px 12px; border-radius: 20px; border: 4px solid var(--pb-stone3); background: #fff; color: var(--pb-forest); cursor: pointer; font-family: "Fredoka", sans-serif; box-shadow: 0 4px 0 var(--pb-stone3); }
.tc-navcard b { font-size: clamp(24px, 3.6vh, 34px); }
.tc-navcard span { font-size: 18px; font-weight: 600; color: var(--pb-forest2); }
.tc-navcard:hover, .tc-navcard:focus-visible { border-color: var(--pb-leaf); outline: none; box-shadow: 0 0 0 4px rgba(47, 143, 58, .3); }
.tc-datapanel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.tc-bigavg2 .tc-avgbig { font-size: clamp(54px, 9vh, 96px); }
.tc-dtable { width: 100%; border-collapse: collapse; font-size: 19px; }
.tc-dtable th { text-align: left; padding: 6px 10px; color: var(--pb-forest2); font-family: "Fredoka", sans-serif; border-bottom: 3px solid var(--pb-stone3); }
.tc-dtable td { padding: 6px 10px; border-bottom: 1px solid var(--pb-stone2); font-weight: 600; }
.tc-dtable .tc-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 2px solid rgba(0, 0, 0, .25); }
.tc-discwrap { padding-bottom: 86px; }
.tc-bigboard { padding: 4px; }
@media (max-width: 900px) { .tc-hub { grid-template-columns: 1fr; } .tc-navcards { grid-template-columns: 1fr; } }
@media (max-width: 1180px) {
  .tc-showans.pb-big, .tc-allbtn.pb-big { min-height: 46px; font-size: 18px; padding: 4px 16px; }
  .tc-rvhead .pb-h1 { font-size: 26px; }
  .tc-rvprob { font-size: 17px; }
  .tc-subctl { gap: 6px 8px; margin: 4px 0; }
  .tc-bigboard { --pb-stage-maxh: max(170px, calc(100vh - 570px)); }
}
#plGrid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
@media (max-width: 1100px) { .tc-bar-url { font-size: 2vw; } .tc-bar-cl { font-size: 3.6vw; } }

/* the answer on the results page: a small path in a pop-up above the bottom bar */
.tc-hubpop { pointer-events: none; position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 650; width: min(760px, 92vw); }
.tc-hubpop-card { background: var(--pb-cream); border: 4px solid var(--pb-stone3); border-radius: 20px; padding: 8px 12px 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); text-align: center; }
.tc-hubpop-card h2 { margin: 0 0 4px; }
.tc-hubboard { --pb-stage-maxh: max(150px, calc(100vh - 560px)); }

/* the Pebble logo in the header of the round pages (Tim, 14 Oct 2026) */
.tc-hdlogo { height: clamp(50px, 7.5vh, 76px); width: auto; flex: none; filter: drop-shadow(0 3px 0 rgba(40, 70, 30, .18)); }
.tc-pghead { display: flex; align-items: center; gap: 12px; }
.tc-pghead .pb-h1 { margin: 0; }
#sDisc .tc-hdlogo { height: 50px; }

/* with the top bar showing, the ZoodleBug Home button sits in the bar, so the Setup header needs no room for it (it overflowed sideways on iPads) */
body.tc-hasbar #sSetup .tc-sethead { padding-left: 0; }
#sTop { min-width: 120px; }
#sReview .tc-hdlogo { height: clamp(70px, 14vh, 130px); }

/* the three ways to play a round (Tim, 14 Oct 2026) */
.tc-modebar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.tc-modebtn.pb-big { min-height: 60px; font-size: clamp(22px, 3.2vh, 30px); font-weight: 800; }
.tc-modebtn[aria-pressed="true"] { background: var(--pb-forest); color: #fff; border-color: var(--pb-forest2); }
.tc-voteopts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 12px; background: rgba(255, 255, 255, .6); border: 2px solid var(--pb-stone2); border-radius: 14px; }
.tc-vlab { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px; color: var(--pb-forest); }
.tc-vtime { margin-left: 16px; }
.tc-vdiff { display: inline-flex; gap: 6px; }
.tc-vd { min-width: 46px; min-height: 44px; font-size: 20px; font-weight: 700; }
.tc-vd[aria-pressed="true"] { background: var(--pb-forest); color: #fff; border-color: var(--pb-forest2); }
.tc-voteopts .tc-num { width: 88px; }
body.tc-tutor .tc-modebar, body.tc-tutor .tc-voteopts { display: none !important; }
.tc-liveboard { padding: 4px; }
/* the vote results: a simple bar graph of the votes for each choice */
.tc-voted { font-family: "Fredoka", sans-serif; font-size: clamp(30px, 5vh, 46px); font-weight: 700; color: var(--pb-forest); }
.tc-vbars { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 26px); height: clamp(120px, 20vh, 200px); margin-top: 8px; }
.tc-vcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 64px; }
.tc-vbar { width: clamp(52px, 7vw, 96px); border-radius: 10px 10px 0 0; background: var(--vc, #1d6fd1); min-height: 6px; position: relative; display: flex; align-items: flex-start; justify-content: center; color: #fff; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(20px, 3vh, 30px); padding-top: 4px; }
.tc-vlet { margin-top: 4px; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(22px, 3.4vh, 34px); color: var(--vc); }
.tc-vcol small { font-size: 14px; font-weight: 700; color: var(--pb-forest2); min-height: 18px; }
.tc-vcol.right .tc-vbar { outline: 5px solid #2f8f3a; outline-offset: 2px; }
.tc-vcol.right small { color: #1f6f2a; }
.tc-navcards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the round setup page now also holds the mode buttons: keep it on one screen */
#sRound .tc-pghead .tc-hdlogo { height: clamp(46px, 6.5vh, 58px); }
#sRound .tc-modebtn.pb-big, #sRound .tc-modes .pb-big { min-height: 50px; padding-top: 4px; padding-bottom: 4px; }
#sRound .tc-modebtn.pb-big { font-size: clamp(20px, 2.8vh, 26px); }
#sRound .tc-modebar { margin-bottom: 4px; }
.tc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* whole-class practice: the logo on the left half of the first box, the two settings (smaller) on the right half (Tim, 14 Oct 2026) */
#practiceHow:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 22px; align-items: center; }
.tc-prlogo { display: flex; align-items: center; justify-content: center; }
.tc-prlogo .tc-logo { width: 100%; max-width: 440px; height: auto; filter: drop-shadow(0 4px 0 rgba(40, 70, 30, .18)); }
.tc-prsets .pb-h2 { font-size: 22px; margin: 0 0 6px; }
.tc-prsets .tc-modes .pb-btn { flex: 1 1 150px; min-height: 42px; font-size: 18px; padding: 2px 10px; }
.tc-prsets .tc-diff { min-width: 44px; min-height: 40px; font-size: 18px; padding: 0 8px; }
.tc-prsets .tc-difflabel { font-size: 14px; }
.tc-prsets #voteDiff { margin-top: 8px; }
.tc-prsets .tc-hint { font-size: 15px; margin: 4px 0 0; }
@media (max-width: 700px) { #practiceHow:not([hidden]) { grid-template-columns: 1fr; } .tc-prlogo .tc-logo { max-width: 260px; } }

/* three long mode names fit on one row */
.tc-modebtn.pb-big { font-size: clamp(15px, 2.2vh, 20px); line-height: 1.15; padding-left: 6px; padding-right: 6px; white-space: normal; }
#sRound .tc-modebtn.pb-big { font-size: clamp(15px, 2.2vh, 20px); }
/* Whole-class practice is a quiet link under the main button */
.tc-startbox .tc-practicebtn { background: none; border: 0; box-shadow: none; min-height: 0; padding: 2px 4px; font-size: 15px; font-weight: 600; text-decoration: underline; color: var(--pb-forest2); }
@media (max-width: 900px) { .tc-startbox .pb-big { white-space: normal; font-size: 19px; max-width: 250px; line-height: 1.15; } .tc-startbox { max-width: 270px; } }
.tc-joininv { margin-top: 10px; }

/* ================================================================== Fit every device (Tim, 15 Oct 2026, from classroom testing at Wildomar)
 * The top bar is one row on every screen; sizes follow the height as well as the width of the device, so a Chromebook (about 1366x625 of
 * usable screen) and an iPad both show the whole page. The Send to Join Button is a big gold button, not a small link. */
.tc-bar-in { flex-wrap: nowrap; }
.tc-bar-code { flex: 1 1 0; }
.tc-bar-url { font-size: clamp(13px, min(2.3vw, 4.4vh), 38px); }
.tc-bar-cl { font-size: clamp(26px, min(4.4vw, 9vh), 74px); }
.tc-bar-pills { flex: none; }
@media (max-width: 1100px) { .tc-bar-url { font-size: clamp(12px, min(1.9vw, 4vh), 24px); } .tc-bar-cl { font-size: clamp(24px, min(3.6vw, 8vh), 60px); } .tc-bar .tc-tool { padding-left: 8px; padding-right: 8px; } }
@media (max-width: 820px) { .tc-bar-url { display: none; } .tc-bar-cl { font-size: clamp(24px, min(6vw, 8vh), 48px); } }

/* Send to Join Button: obvious */
.tc-joininv, .tc-invbig { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 8px 16px; text-align: left; background: var(--pb-sun); border: 4px solid var(--pb-sun-dk); color: #3a2300; box-shadow: 0 5px 0 var(--pb-sun-dk); border-radius: 18px; margin: 0; }
.tc-joininv:hover, .tc-invbig:hover { background: #ffd35a; }
.tc-sendico { font-size: 34px; line-height: 1; flex: none; }
.tc-sendtxt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.tc-sendtxt b { font-family: "Fredoka", "Andika", sans-serif; font-size: clamp(19px, 3vh, 26px); font-weight: 700; }
.tc-sendtxt small { font-size: 14px; font-weight: 600; }
.tc-sendbox { margin: 0 0 10px; }
.tc-sendbox .tc-invstatus { margin-top: 6px; }
#invWrap .tc-invbig { min-height: 60px; }

/* the join page: the header and the QR code shrink with the height of the screen */
#sJoin .tc-logo-xl { width: clamp(150px, 27vh, 340px); }
#sJoin .tc-settitle { font-size: clamp(26px, 4.6vh, 44px); }
#sJoin .tc-qr { width: clamp(104px, 23vh, 192px); height: clamp(104px, 23vh, 192px); padding: 6px; }
#sJoin .tc-join-lab { font-size: clamp(14px, 2.2vh, 17px); }

@media (max-height: 700px) {
  .tc-wrap { padding-top: 6px; padding-bottom: 20px; }
  .tc-bar-in { padding-top: 2px; padding-bottom: 2px; }
  .tc-bar .tc-tool { min-height: 40px; }
  #sJoin .tc-sethead { margin-bottom: 2px; }
  #sJoin .tc-join { padding-top: 6px; padding-bottom: 6px; }
  .tc-joininv, .tc-invbig { min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
  .tc-sendico { font-size: 28px; }
  #whoCard .pb-h2 { margin: 4px 0; }
  #sJoin .tc-start { margin-top: 8px; }
  /* problem setup */
  #sRound .pb-h1 { font-size: 26px; }
  #levelGrid { max-height: calc(100vh - 330px); overflow-y: auto; padding-right: 4px; }
  .tc-level { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
  .tc-level-n { width: 34px; height: 34px; font-size: 18px; }
  #paneManual .tc-hint { display: none; }
  #preview .tc-pv { height: 150px; }
  #preview .tc-pv-line { top: 88px; } #preview .tc-pv-end { top: 66px; } #preview .tc-pv-tick { height: 46px; }
  #preview .tc-pv-end .tc-pv-lab { font-size: 26px; } #preview .tc-pv-num { font-size: 32px; } #preview .tc-pv-mark { top: 4px; }
  #tryRow .tc-note { display: none; }
  .tc-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tc-three .pb-input { font-size: 20px; min-height: 46px; }
  .tc-why { font-size: clamp(15px, 2.6vh, 20px); margin-top: 4px; min-height: 0; }
  #tryRow { margin-top: 4px; }
  /* results pages */
  .tc-hdlogo { height: 44px; width: auto; }
  .tc-rvhead { margin-bottom: 0; }
  .tc-hub { margin-top: 2px; gap: 10px; }
  .tc-hub > .pb-panel { padding: 8px 14px; }
  .tc-avgbig { font-size: clamp(46px, 9vh, 76px); }
  .tc-navcards { margin-top: 4px; gap: 10px; }
  .tc-navcard { min-height: 64px; padding: 6px 10px; }
  .tc-hubctl { margin: 4px 0; }
  #sDisc .tc-rvhead, #sPlace .tc-rvhead, #sData .tc-rvhead { display: none; }      /* the top bar already says which round it is */
  .tc-bigboard { --pb-stage-maxh: max(100px, calc(100vh - 525px)); }
  .tc-hubboard { --pb-stage-maxh: max(120px, calc(100vh - 480px)); }
  /* final standings */
  #sEnd .tc-endlogo { width: clamp(140px, 24vh, 260px); height: auto; }
  #sEnd .tc-endtitle { font-size: clamp(26px, 4.4vh, 40px); margin: 0; }
  #sEnd .tc-endstats { margin: 4px 0; }
  #sEnd .tc-endstore { padding: 6px 10px; }
  #sEnd .pb-btn.tc-storebtn, #sEnd .tc-storemin { min-height: 48px; font-size: 22px; }
}

/* the live problem page: the path sits closer to the Pebble Number, with less empty space above it (Tim, 15 Oct 2026) */
.tc-bigprev .tc-pv { height: 236px; }
.tc-bigprev .tc-pv-line { top: 128px; }
.tc-bigprev .tc-pv-end { top: 98px; }
.tc-bigprev .tc-pv-tick { height: 72px; }
.tc-bigprev .tc-pv-lab { font-size: 42px; }
.tc-bigprev .tc-pv-num { font-size: 54px; }
.tc-count { margin: 8px 0 4px; }

@media (max-height: 700px) {
  .tc-bigprev .tc-pv { height: 180px; }
  .tc-bigprev .tc-pv-line { top: 102px; height: 14px; }
  .tc-bigprev .tc-pv-end { top: 76px; }
  .tc-bigprev .tc-pv-tick { height: 54px; width: 7px; }
  .tc-bigprev .tc-pv-lab { font-size: 32px; }
  .tc-bigprev .tc-pv-num { font-size: 40px; }
  .tc-bigprev .tc-pv-mark { top: 2px; }
  .tc-count { font-size: clamp(40px, 8vh, 64px); margin: 4px 0 2px; }
  .tc-count-of { font-size: clamp(20px, 3.4vh, 28px); }
  .tc-livetop { margin-bottom: 2px; }
  .tc-livecard .pb-h1 { font-size: 28px; }
  #liveNote { display: none; }
  .tc-livecard.pb-panel { padding-top: 8px; padding-bottom: 10px; }
}

/* narrow screens (an iPad held upright): the code keeps its room in the top bar */
@media (max-width: 900px) {
  .tc-bar-pills { display: none; }
  #musicBtn .tc-tool-t { display: none; }
  .tc-bar-cl { font-size: clamp(22px, min(5vw, 8vh), 44px); }
}
/* the Setup page's narrow class card: the button text stacks nicely instead of wrapping word by word */
#invWrap .tc-invbig { flex-wrap: wrap; justify-content: center; text-align: center; gap: 4px 10px; }
#invWrap .tc-invbig .tc-sendtxt { flex: 1 1 150px; align-items: center; }
#invWrap .tc-invbig .tc-sendtxt small { display: none; }

/* the vote bars are drawn in a plot area of their own, so a bar's height is exactly its share of the tallest bar (5 votes and 6 votes no longer look alike) */
.tc-vplot { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.tc-vplot .tc-vbar { min-height: 0; }
.tc-vplot .tc-vbar[data-n="0"] { font-size: 0; padding: 0; border-radius: 0; border-bottom: 4px solid var(--vc, #1d6fd1); height: 0; }
.tc-vplot .tc-vbar[data-n="0"]::after { content: "0"; position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; color: var(--pb-forest2); font-size: clamp(20px, 3vh, 30px); }

/* the first screen: how to use Pebble */
.tc-introwrap { max-width: 900px; text-align: center; padding-top: 10px; }
.tc-intrologo { width: clamp(200px, 30vh, 360px); height: auto; margin: 0 auto 6px; display: block; filter: drop-shadow(0 4px 0 rgba(40, 70, 30, .18)); }
.tc-intro { text-align: left; }
.tc-intro .pb-h1 { font-size: clamp(24px, 4vh, 36px); margin: 0 0 8px; text-align: center; }
.tc-intro-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tc-intro-steps li { display: flex; gap: 14px; align-items: center; font-size: clamp(17px, 2.8vh, 22px); line-height: 1.3; }
.tc-intro-n { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--pb-leaf); color: #fff; display: grid; place-items: center; font-family: "Fredoka", sans-serif; font-size: 24px; font-weight: 700; }
.tc-intro-go { text-align: center; margin-top: 14px; }
@media (max-height: 700px) { .tc-intrologo { width: clamp(130px, 22vh, 220px); } .tc-intro-steps { gap: 6px; } .tc-intro-go { margin-top: 8px; } }

/* the teacher's remote QR (join page, and the Remote button in the top bar) */
.tc-remotebox { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 3px dashed var(--pb-stone3); }
.tc-qr-sm { width: 80px; height: 80px; padding: 4px; flex: none; }
.tc-remotetxt { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; color: var(--pb-ink-soft); }
.tc-remotetxt b { font-size: 17px; color: var(--pb-forest); }
body.tc-tutor #remoteBtn { display: none !important; }
@media (max-width: 1100px) { #remoteBtn .tc-tool-t { display: none; } }
@media (max-height: 700px) { .tc-remotebox { margin-top: 6px; padding-top: 6px; } .tc-remotetxt span { font-size: 13px; } }
#sJoin .tc-qr-sm { width: 60px; height: 60px; padding: 3px; }      /* the teacher-only QR is the small one */

/* the teacher remote QR sits at the right end of the join page's header (no extra height) */
#sJoin .tc-remotebox { margin: 0 0 0 auto; padding: 0; border-top: 0; max-width: 330px; background: rgba(255, 249, 232, .92); border-radius: 16px; padding: 6px 10px; border: 3px solid var(--pb-stone3); }
@media (max-width: 900px) { #sJoin .tc-remotebox { margin-left: 0; } }
#sJoin .tc-wrap { padding-bottom: 6px; }
@media (max-height: 700px) { #sJoin .tc-logo-xl { width: clamp(130px, 21vh, 220px); } #sJoin .tc-sethead { gap: 4px 16px; } }

@media (max-width: 1150px) { #sJoin .tc-remotebox { display: none; } }      /* narrower screens use the Remote button in the top bar */
@media (max-width: 900px) {
  #joinInfoBtn .tc-tool-t { display: none; }
  .tc-bar-cl { font-size: clamp(22px, min(4.4vw, 8vh), 40px); }
  .tc-bar .tc-endbtn { padding: 4px 8px; }
}
.tc-qr-sm img, .tc-qr-sm canvas { width: 100% !important; height: 100% !important; }
@media (max-height: 700px) { #sJoin .tc-qr-sm { width: 52px; height: 52px; padding: 2px; } #sJoin .tc-remotebox { padding: 4px 8px; } }

/* ================================================================== Join page, round three (Tim, 15 Oct 2026)
 * The top bar already shows the address and code in big letters, so the page's own copy is modest; the list of students who joined gets
 * the room (newest first, scrolling inside its box when the class is big) and the page itself never scrolls. */
#sJoin.on { display: flex; flex-direction: column; height: calc(100vh - var(--tc-barh, 0px) - 26px); overflow: hidden; }      /* the 26px is the © line under the page */
#sJoin .tc-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; padding-bottom: 6px; }
#sJoin .tc-sethead { flex: none; }
#sJoin .tc-logo-xl { width: clamp(110px, 17vh, 190px); }
#sJoin .tc-settitle { font-size: clamp(22px, 3.6vh, 36px); }
#sJoin .tc-joingrid { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.6fr); align-items: stretch; margin: 0; }
#sJoin .tc-join { padding: 8px 12px; align-self: start; }
#sJoin .tc-joinurl { font-size: clamp(16px, 1.7vw, 26px); margin-bottom: 0; }
#sJoin .tc-bigcode { font-size: clamp(22px, 2.4vw, 34px); border-width: 3px; }
#sJoin .tc-join-lab { font-size: clamp(12px, 1.8vh, 15px); }
#sJoin .tc-qrrow { gap: 8px; }
#sJoin .tc-qr { width: clamp(150px, 36vh, 280px); height: clamp(150px, 36vh, 280px); padding: 6px; }      /* the students' QR is the big one (Tim, 16 Oct 2026) */
#sJoin .tc-qr img, #sJoin .tc-qr canvas { width: 100% !important; height: 100% !important; }
#sJoin .tc-qrrow .pb-muted { font-size: 13px; }
#whoCard { display: flex; flex-direction: column; min-height: 0; padding: 10px 14px; }
#whoCard .tc-sendbox { flex: none; margin-bottom: 6px; }
#whoCard .pb-h2 { flex: none; margin: 2px 0 6px; }
#whoList { flex: 1 1 auto; min-height: 60px; overflow-y: auto; align-content: flex-start; padding-right: 4px; }
#whoCard .tc-start { flex: none; margin-top: 8px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
#whoCard .tc-startnote { flex: 1 1 200px; margin: 0; font-size: 15px; }
@media (max-width: 900px) { #sJoin .tc-joingrid { grid-template-columns: 1fr; } #sJoin .tc-join { align-self: stretch; } }
.tc-none.tc-held { font-size: 17px; color: var(--pb-ink-soft); font-style: italic; }

@media (max-width: 1100px) { .tc-bar-pills { display: none; } }
.tc-fshost { display: contents; }

.zb-site-footer { padding: 2px 12px 4px !important; line-height: 1.3 !important; }      /* a slim © line so it takes almost no height */

/* Review Problem / Discussion: the path first (Tim, 15 Oct 2026) */
#sDisc .tc-wrap { max-width: 98vw; padding-top: 4px; padding-bottom: 4px; }
#sDisc .tc-subctl { margin: 0 0 4px; flex-wrap: nowrap; }
#sDisc .tc-subtitle { margin: 0 0 0 6px; font-size: clamp(20px, 3.2vh, 28px); white-space: nowrap; }
#sDisc .tc-bigboard .pb-challenge { font-size: clamp(18px, 3.4vh, 30px); }
#sDisc .tc-bigboard .pb-board { gap: 3px; }
#sDisc .tc-ctls .pb-btn { min-height: 44px; }
.tc-fshost { display: inline-flex; }
.tc-bar .pb-fs.tc-tool { box-shadow: none; }
@media (max-height: 700px) {
  /* the path first: tools and the "doesn't belong" box slim down on a short screen */
  #sDisc .pb-tool { min-height: 36px; padding: 2px 8px; font-size: 13px; }
  #sDisc .pb-tool[data-act=tickplus], #sDisc .pb-tool[data-act=tickminus] { font-size: 22px; min-width: 40px; }
  #sDisc .pb-sw { width: 34px; height: 34px; }
  #sDisc .pb-tools { gap: 3px; }
  #sDisc .pb-tgroup { padding: 1px 3px; gap: 3px; }
  #sDisc .pb-outside-box { min-height: 36px; padding: 2px 12px; font-size: 15px; }
  #sDisc .pb-outside-box input { width: 22px; height: 22px; }
}
@media (max-height: 700px) {
  /* short screens (Chromebooks): a slimmer top bar and bottom bar, so the path gets the room */
  .tc-bar-url { font-size: clamp(11px, 2.3vh, 17px); }
  .tc-bar-cl { font-size: clamp(20px, 5.2vh, 34px); }
  .tc-bar .tc-tool, .tc-bar .pb-pill { min-height: 36px; }
  .tc-bar .tc-endbtn { min-height: 36px; }
  .tc-sticky-in .pb-big { min-height: 40px; font-size: 18px; padding: 2px 18px; }
  .tc-sticky { border-top-width: 3px; }
}

#sEnd { min-height: 0; }
.tc-screen { transform-origin: top left; }
body.tc-fs-open #zb-feedback-room { display: none; }

/* level tiles: two rows of five, the chosen level described underneath */
.tc-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tc-level { flex-direction: column; justify-content: center; text-align: center; gap: 2px; padding: 6px 4px; min-height: 84px; }
.tc-level-n { width: 36px; height: 36px; font-size: 20px; }
.tc-level-t { font-size: 14px; line-height: 1.1; }
.tc-level-t br, .tc-level-d { display: none; }
.tc-lvldesc { margin: 8px 2px 0; font-size: 17px; line-height: 1.3; color: var(--pb-forest2); min-height: 44px; }
@media (max-width: 900px) { .tc-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-height: 700px) { .tc-level { min-height: 64px; } .tc-level-n { width: 30px; height: 30px; font-size: 17px; } #levelGrid { max-height: none; overflow: visible; } .tc-lvldesc { font-size: 15px; min-height: 36px; margin-top: 4px; } }
/* the address and code shrink to the room the bar has (the Home button on the left, the buttons on the right) */
.tc-bar-code { overflow: hidden; }
.tc-bar-url { font-size: clamp(12px, min(1.9vw, 3.8vh), 30px); }
.tc-bar-cl { font-size: clamp(22px, min(3.7vw, 8vh), 58px); }
@media (max-width: 1500px) { #remoteBtn .tc-tool-t, .tc-bar .pb-fs .pb-fs-t { display: none; } #remoteBtn, .tc-bar .pb-fs { min-width: 46px; padding-left: 8px; padding-right: 8px; } }

/* Help */
.tc-helpq { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pb-forest); color: #fff; font: 700 17px "Fredoka", sans-serif; }
.tc-helpcard { max-width: min(760px, 94vw); text-align: left; }
.tc-helpcard .tc-joinov-h { font-size: clamp(22px, 3.4vh, 30px); text-align: center; margin: 0 0 10px; }
.tc-helpcard .pb-big { display: block; margin: 14px auto 0; }
.tc-helpsetup { display: block; margin: 0 0 6px auto; }
body.tc-tutor #helpBtn { display: none !important; }
@media (max-width: 1500px) { #helpBtn .tc-tool-t { display: none; } #helpBtn { min-width: 46px; padding-left: 8px; padding-right: 8px; } }

/* ================================================================== Slimmer top bar, smaller tools, path first (Tim, 15 Oct 2026)
 * The address and code stay readable (the join page says them big too) but the dark bar is about a third smaller, and the tool buttons under the
 * path are small: they do not need to be seen from across the room. */
.tc-bar-in { padding-top: 3px; padding-bottom: 3px; gap: 4px 8px; }
.tc-bar-url { font-size: clamp(11px, min(1.25vw, 2.6vh), 18px); }
.tc-bar-cl { font-size: clamp(20px, min(2.7vw, 5vh), 38px); }
.tc-bar .tc-tool, .tc-bar .pb-pill, .tc-bar .tc-endbtn { min-height: 36px; }
.tc-bar .tc-tool { padding-top: 2px; padding-bottom: 2px; font-size: 14px; }
.tc-bar .pb-pill { font-size: 13px; padding: 0 10px; }
.tc-bar-pills { flex-direction: row; }
#sDisc .pb-tool { min-height: 34px; padding: 2px 8px; font-size: 13px; }
#sDisc .pb-tool[data-act=tickplus], #sDisc .pb-tool[data-act=tickminus] { font-size: 22px; min-width: 40px; }
#sDisc .pb-sw { width: 30px; height: 30px; }
#sDisc .pb-tools { gap: 3px; }
#sDisc .pb-tgroup { padding: 1px 3px; gap: 3px; }
#sDisc .pb-outside-box { min-height: 32px; padding: 2px 12px; font-size: 14px; }
#sDisc .pb-outside-box input { width: 20px; height: 20px; }
#sDisc .tc-ctls .pb-btn { min-height: 40px; font-size: 16px; }
#sDisc .tc-bigboard .pb-challenge { font-size: clamp(16px, 2.8vh, 24px); }

/* the Teacher QR button keeps its words; Help and Full screen shrink to icons first */
@media (max-width: 1500px) { #remoteBtn .tc-tool-t { display: inline; } #helpBtn .tc-tool-t, .tc-bar .pb-fs .pb-fs-t { display: none; } }
@media (max-width: 1100px) { #remoteBtn .tc-tool-t { display: none; } }

/* pages with a big path use the whole width (the path itself is sized by fitScreen in teacher.js) */
#sLive .tc-wrap, #sDisc .tc-wrap, #sReview .tc-wrap, #sPlace .tc-wrap { max-width: 98vw; }
.tc-liveboard { --pb-stage-maxh: 4000px; }
#sLive .tc-livecard { padding-left: 10px; padding-right: 10px; }
/* the live Multiple Choice screen: slim everything around the path */
#sLive .tc-livetop { margin-bottom: 0; min-height: 0; }
#sLive .tc-livecard .pb-h1 { font-size: clamp(22px, 3.4vh, 30px); }
#sLive .tc-livetop .tc-hdlogo { height: 44px; width: auto; }
#sLive .tc-bigtimer { font-size: clamp(28px, 5vh, 46px); }
#sLive .tc-count { font-size: clamp(34px, 6vh, 60px); margin: 2px 0; }
#sLive .tc-count-of { font-size: clamp(18px, 2.8vh, 26px); }
#sLive #lockBtn { min-height: 44px; font-size: 19px; padding: 2px 22px; }
#sLive .pb-tool { min-height: 34px; padding: 2px 8px; font-size: 13px; }
#sLive .pb-tool[data-act=tickplus], #sLive .pb-tool[data-act=tickminus] { font-size: 22px; min-width: 40px; }
#sLive .pb-sw { width: 30px; height: 30px; }
#sLive .pb-tools { gap: 3px; }
#sLive .pb-tgroup { padding: 1px 3px; gap: 3px; }
#sLive .tc-livecard.pb-panel { padding-top: 6px; padding-bottom: 8px; }
#sLive #liveNote { display: none; }
#sLive .pb-board .pb-challenge { font-size: clamp(16px, 2.8vh, 24px); }
#sLive .pb-board { gap: 3px; }
#sLive .tc-livecard { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; }
#sLive .tc-livecard > .tc-livetop, #sLive .tc-livecard > #liveVoteBoard, #sLive .tc-livecard > #livePreview, #sLive .tc-livecard > #livePeek, #sLive .tc-livecard > .tc-locking, #sLive .tc-livecard > #liveErr { flex: 1 0 100%; }
#sLive #liveErr:empty { display: none; }
body:has(#sLive.on) #zb-feedback-room, body:has(#sDisc.on) #zb-feedback-room, body:has(#sReview.on) #zb-feedback-room, body:has(#sPlace.on) #zb-feedback-room { display: none; }
/* the page under the full-screen board is covered; with the real fonts it could be a few pixels taller than the window and make the window scroll */
body.tc-fs-open .tc-screen.on { position: fixed; inset: 0; visibility: hidden; overflow: hidden; }

/* the students' QR is big, the teacher-only QR small (Tim, 16 Oct 2026); these come last so they win over the rules above */
#sJoin .tc-qr.tc-qr-sm { width: 60px; height: 60px; padding: 3px; }
@media (max-height: 700px) { #sJoin .tc-qr.tc-qr-sm { width: 52px; height: 52px; padding: 2px; } }
/* the answer, full screen: the path takes nearly the whole width, with every tool under it */
.tc-ansfs .tc-fs-board > * { width: min(100%, calc((100vh - 250px) * 3.086)); min-width: 320px; }
.tc-ansfs .tc-fs-board { padding: 4px; }

/* Results page (Tim, 16 Oct 2026): the teacher runs this from her own computer, so Student Data, Review Problem and Pebble Placements are small buttons beside
   Show Answer, and the vote count is the biggest thing on the page with the leaderboard second. */
#sReview .tc-hubctl { flex-wrap: nowrap; margin: 6px 0 0; }
#sReview .tc-navcards { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; justify-content: flex-end; }
#sReview .tc-navcard { min-height: 0; padding: 6px 14px; border-width: 3px; border-radius: 12px; flex-direction: row; gap: 0; }
#sReview .tc-navcard b { font-size: 16px; font-weight: 700; }
#sReview .tc-hub.votes { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
#sReview .tc-hub.votes.solo { grid-template-columns: 1fr; }
#sReview .tc-hub.votes #hubAvg .tc-voted { font-size: clamp(40px, 7vh, 72px); line-height: 1.05; }
#sReview .tc-hub.votes #hubAvg .tc-vbars { height: clamp(150px, calc(100vh - 480px), 560px); gap: clamp(14px, 3vw, 44px); margin-top: 6px; }
#sReview .tc-hub.votes #hubAvg .tc-vbar { width: clamp(70px, 11vw, 170px); font-size: clamp(28px, 4.6vh, 52px); }
#sReview .tc-hub.votes #hubAvg .tc-vlet { font-size: clamp(30px, 5vh, 52px); }
#sReview .tc-hub.votes .tc-topol { max-height: calc(100vh - 470px); }
#sReview .tc-hub.votes .tc-toplist h2 { font-size: 20px; }
#sReview .tc-hub.votes .tc-topol li { font-size: 19px; padding: 4px 10px; }
@media (max-width: 900px) { #sReview .tc-hubctl { flex-wrap: wrap; } #sReview .tc-hub.votes { grid-template-columns: 1fr; } }

/* Results page, Pebble Placement (Tim, 16 Oct 2026): a very large path with every pebble on it takes the top half; the class average is next, with its small
   text big enough to read across the room; the teacher's buttons are small and share the title row. */
#sReview .tc-hdlogo { display: none; }
#sReview .tc-rvhead { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; min-height: 40px; }
#sReview .rvh-title { font-size: clamp(22px, 3.4vh, 30px); margin: 0; }
#sReview .tc-hubctl { margin: 0; gap: 8px; display: flex; align-items: center; flex-wrap: nowrap; }
#sReview .tc-showans.pb-btn { min-height: 40px; padding: 4px 18px; font-size: 17px; font-weight: 800; }
#sReview .tc-hubpath { padding: 4px; --pb-stage-maxh: max(150px, calc(100vh - 420px)); margin-bottom: 6px; }
#sReview .tc-hub:not(.votes) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); margin-top: 0; }
#sReview .tc-hub:not(.votes) .tc-avglab { font-size: clamp(24px, 3.6vh, 34px); }
#sReview .tc-hub:not(.votes) .tc-avgbig { font-size: clamp(56px, 11vh, 120px); }
#sReview .tc-hub:not(.votes) .tc-avgsub { font-size: clamp(26px, 4vh, 40px); }
#sReview .tc-hub:not(.votes) .tc-avgdia { font-size: clamp(24px, 3.6vh, 36px); margin-top: 2px; }
#sReview .tc-hub:not(.votes) > .pb-panel { padding: 6px 16px; }
/* the top players are a short list in a wide box: lay them out in a row of rank chips that wraps, best first */
#sReview .tc-hub:not(.votes) .tc-topol { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 10px; max-height: 118px; min-height: 60px; overflow-y: auto; }
#sReview .tc-hub:not(.votes) .tc-topol li { font-size: 20px; padding: 4px 12px 4px 6px; gap: 8px; }
#sReview .tc-hub:not(.votes) .tc-topol .nm { flex: none; max-width: 11em; }
#sReview .tc-hub:not(.votes) .tc-toplist h2 { font-size: 22px; margin-bottom: 4px; }
#sReview .tc-hub.votes #hubAvg .tc-vbars { height: clamp(150px, calc(100vh - 400px), 600px); }
#hubPath[hidden] { display: none; }
#sReview .tc-reviewwrap { padding-bottom: 8px; }      /* the bottom bar's room is already taken off the page's height */
#sReview .tc-hub.solo:not(.votes) { grid-template-columns: 1fr; }
/* the class average sits in one short row (the big number left, its three lines right) so the path can have the height */
#sReview .tc-hub:not(.votes) #hubAvg { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "big lab" "big sub" "big dia"; column-gap: clamp(14px, 2.4vw, 36px); align-content: center; justify-content: center; text-align: left; }
#sReview .tc-hub:not(.votes) #hubAvg .tc-avgbig { grid-area: big; align-self: center; font-size: clamp(64px, 13vh, 130px); }
#sReview .tc-hub:not(.votes) #hubAvg .tc-avglab { grid-area: lab; align-self: end; }
#sReview .tc-hub:not(.votes) #hubAvg .tc-avgsub { grid-area: sub; }
#sReview .tc-hub:not(.votes) #hubAvg .tc-avgdia { grid-area: dia; align-self: start; }
#sReview .tc-hub:not(.votes) #hubAvg > :only-child, #sReview .tc-hub:not(.votes) #hubAvg .tc-avgbig:nth-last-child(2) { grid-row: auto; }
#hubPath .pb-challenge { font-size: clamp(18px, 2.7vh, 28px); }
/* an empty bar shows only its dark 0 above the line; the bigger bar number rule above must not bring back the white 0 that landed on the letter (Tim, 16 Oct 2026) */
#sReview .tc-hub.votes #hubAvg .tc-vbar[data-n="0"] { font-size: 0; padding: 0; }
#sReview .tc-hub.votes #hubAvg .tc-vbar[data-n="0"]::after { font-size: clamp(28px, 4.6vh, 52px); bottom: 8px; }

/* =========================================================================== the final results show
   Third place, then second, then first, one screen each, with sound; then the standings page with a few moving parts (Tim, 16 Oct 2026). */
.tc-show { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 38%, var(--sa, #e0954a), var(--sb, #3a1c0c) 78%); animation: show-bg 6s ease-in-out infinite alternate; }
.tc-show[hidden] { display: none; }
.tc-show.place3 { --sa: #e8a05a; --sb: #3d1d0a; --glow: #ffb06a; }
.tc-show.place2 { --sa: #dbe6f0; --sb: #1c2b3c; --glow: #cfe3ff; }
.tc-show.place1 { --sa: #ffe680; --sb: #8a3d00; --glow: #fff2a8; }
@keyframes show-bg { from { filter: hue-rotate(0deg) brightness(1); } to { filter: hue-rotate(14deg) brightness(1.12); } }
.tc-show-rays { position: absolute; left: 50%; top: 40%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .20) 0 6deg, rgba(255, 255, 255, 0) 6deg 18deg); animation: show-spin 26s linear infinite; }
@keyframes show-spin { to { transform: rotate(360deg); } }
.tc-show-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tc-show-confetti i { position: absolute; left: 50%; top: 46%; width: 14px; height: 22px; border-radius: 3px; opacity: 0; animation: show-burst var(--t, 2.4s) cubic-bezier(.15, .7, .3, 1) var(--d, 0s) forwards; }
@keyframes show-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.tc-show-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 2vh, 22px); max-width: 94vw; }
.tc-show-kicker { font: 800 clamp(26px, 6.4vh, 70px)/1 "Fredoka", "Andika", sans-serif; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 30px var(--glow);
  animation: show-drop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.tc-show-medal { font-size: clamp(110px, 28vh, 300px); line-height: 1; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); animation: show-medal 1s cubic-bezier(.2, 1.5, .4, 1) both, show-bob 2.4s ease-in-out 1s infinite; }
.tc-show.place1 .tc-show-medal { animation: show-medal 1s cubic-bezier(.2, 1.5, .4, 1) both, show-bob 1.6s ease-in-out 1s infinite, show-glow 1.2s ease-in-out 1s infinite alternate; }
.tc-show-names { font: 800 clamp(44px, 13vh, 170px)/1.05 "Fredoka", "Andika", sans-serif; text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 40px var(--glow); overflow-wrap: anywhere; }
.tc-show-names.many { font-size: clamp(32px, 8vh, 100px); }
.tc-show-names.slam { animation: show-slam .7s cubic-bezier(.2, 1.7, .35, 1) both; }
.tc-show-names.mystery { animation: show-shake .35s linear infinite; letter-spacing: .3em; opacity: .92; }
.tc-show-val { font: 700 clamp(24px, 6vh, 70px)/1.1 "Fredoka", "Andika", sans-serif; background: rgba(0, 0, 0, .28); border: 4px solid rgba(255, 255, 255, .7); border-radius: 999px; padding: .1em .7em; animation: show-rise .7s ease-out .25s both; }
.tc-show-tie { font: 700 clamp(18px, 3.6vh, 38px)/1 "Fredoka", sans-serif; letter-spacing: .2em; opacity: .9; }
.tc-show-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.tc-show-flash.go { animation: show-flash .7s ease-out; }
.tc-show-skip { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 5; min-height: 34px; color: #2a1a00; }
@keyframes show-drop { from { transform: translateY(-80px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes show-medal { from { transform: scale(.05) rotate(-540deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes show-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes show-glow { from { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 10px #fff3a0); } to { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 50px #fff3a0); } }
@keyframes show-slam { from { transform: scale(2.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes show-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, -4px); } }
@keyframes show-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes show-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tc-show, .tc-show-rays, .tc-show-medal, .tc-show-names.mystery { animation: none !important; } .tc-show-confetti { display: none; } }

/* the standings page: a few things keep moving */
#sEnd { background: linear-gradient(120deg, rgba(255, 245, 190, .55), rgba(190, 235, 255, .45), rgba(255, 215, 235, .45), rgba(255, 245, 190, .55)); background-size: 300% 300%; animation: end-bg 14s ease-in-out infinite; }
@keyframes end-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#sEnd .tc-place { animation: end-rise .9s cubic-bezier(.2, 1.3, .4, 1) both; }
#sEnd .tc-place.p3 { animation-delay: .05s; } #sEnd .tc-place.p2 { animation-delay: .25s; } #sEnd .tc-place.p1 { animation-delay: .5s; }
#sEnd .tc-medal { display: inline-block; animation: end-bob 2.6s ease-in-out infinite; }
#sEnd .tc-place.p1 .tc-medal { animation-duration: 1.8s; filter: drop-shadow(0 0 12px #ffd54a); }
#sEnd .tc-place.p1 .tc-who { animation: end-shine 2.2s ease-in-out infinite alternate; }
#sEnd .tc-rest li { animation: end-slide .5s ease-out both; }
#sEnd .tc-rest li:nth-child(2) { animation-delay: .08s; } #sEnd .tc-rest li:nth-child(3) { animation-delay: .16s; } #sEnd .tc-rest li:nth-child(4) { animation-delay: .24s; } #sEnd .tc-rest li:nth-child(n+5) { animation-delay: .32s; }
@keyframes end-rise { from { transform: translateY(80px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes end-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes end-shine { from { box-shadow: 0 0 0 rgba(255, 213, 74, 0); } to { box-shadow: 0 0 34px rgba(255, 213, 74, .85); } }
@keyframes end-slide { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #sEnd, #sEnd .tc-place, #sEnd .tc-medal, #sEnd .tc-rest li, #sEnd .tc-place.p1 .tc-who { animation: none !important; } }
#endBody.tc-hold .tc-place, #endBody.tc-hold .tc-rest li, #endBody.tc-hold .tc-medal { animation-play-state: paused; }
/* the Open Store box on the final page is for the teacher only (the room reads the podium and the standings), so it is small (Tim, 16 Oct 2026) */
#sEnd .tc-endstore { margin: 8px auto 4px; padding: 6px 12px; max-width: 520px; border-radius: 14px; }
#sEnd .tc-storehead { margin-bottom: 4px; font-size: 15px; }
#sEnd .tc-storerow { gap: 8px; }
.pb-body #sEnd .pb-btn.tc-storebtn { min-height: 38px; padding: 4px 14px; font-size: 16px; box-shadow: 0 3px 0 #b35f00; }
#sEnd .tc-storemin { width: 64px; min-height: 38px; font-size: 18px; }
#sEnd .tc-storelab { font-size: 16px; }
#sEnd .tc-storestat { margin-top: 4px; font-size: 15px; }
#sEnd .tc-storenote { margin-top: 4px; font-size: 14px; }

/* the opening screen also explains scoring (Tim, 16 Oct 2026) */
.tc-intro-score { display: block; margin-top: 2px; font-size: clamp(14px, 2.2vh, 18px); font-weight: 600; color: var(--pb-forest2); }
.tc-intro-dia .tc-intro-n { background: #2a9df4; font-size: 24px; }
.tc-intro-steps li { align-items: flex-start; }
.tc-intro-n { margin-top: 2px; }
@media (max-height: 700px) { .tc-intro-steps { gap: 4px; } .tc-intro-steps li { font-size: 16px; } .tc-intro-score { font-size: 13px; } .tc-intro-n { width: 34px; height: 34px; } }

/* Pebble Placements: the logo sits in the middle of the sky above the student boards, as big as the two header rows allow, without moving anything (Tim, 17 Oct 2026) */
#sPlace .tc-reviewwrap, #sData .tc-reviewwrap { position: relative; }
#sPlace .tc-rvhead .tc-hdlogo, #sData .tc-rvhead .tc-hdlogo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: var(--pl-logo-h, 110px); width: auto; z-index: 1; pointer-events: none; }

/* Student Data: a list that runs down several columns, big writing, the result and points right beside each name (Tim, 17 Oct 2026) */
#sData .tc-dtable { display: block; font-size: clamp(20px, 3.3vh, 32px); }
#sData .tc-dtable thead { display: none; }
#sData .tc-dtable tbody { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--dt-rows, 1), auto); grid-template-columns: repeat(var(--dt-cols, 3), minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); }
#sData .tc-dtable tr { display: flex; align-items: center; gap: 12px; padding: 5px 6px; border-bottom: 1px solid var(--pb-stone2); min-width: 0; }
#sData .tc-dtable td { display: block; padding: 0; border: 0; white-space: nowrap; }
#sData .tc-dtable td:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sData .tc-dtable .tc-dot { width: .6em; height: .6em; margin-right: 8px; }
#sData .tc-dtable .tc-badge { font-size: .7em; padding: 1px 12px; }
#sData .tc-dtable td:nth-last-child(1):empty { display: none; }
#sData .tc-dtable td.pt { font-weight: 800; } #sData .tc-dtable td.pt::after { content: " pts"; font-size: .6em; font-weight: 600; color: var(--pb-forest2); }
#sData .tc-dtable td.fl { font-size: .6em; color: #6a5a30; } #sData .tc-dtable td.fl:empty { display: none; }
#sData .tc-rvhead .tc-hdlogo { height: var(--pl-logo-h, 94px); }   /* this page has less room above the box */

/* the podium in the results show (Tim, 17 Oct 2026): names slide down onto the pedestals, then the podium rises and 4th place and on appear under it */
.tc-show { --pod-h: 40vh; box-sizing: border-box; }
.tc-show.pod { padding-bottom: var(--pod-h); }
.tc-show.pod .tc-show-medal { font-size: clamp(70px, 17vh, 190px); }
.tc-show.pod .tc-show-names { font-size: clamp(34px, 9.5vh, 130px); }
.tc-show.pod .tc-show-names.many { font-size: clamp(26px, 6vh, 80px); }
.tc-show.pod .tc-show-kicker { font-size: clamp(22px, 5vh, 56px); }
.tc-show.pod .tc-show-val { font-size: clamp(20px, 4.6vh, 52px); }
.tc-show.final { --sa: #7b5cff; --sb: #170f45; }
.tc-show-card.leaving .tc-show-kicker, .tc-show-card.leaving .tc-show-medal, .tc-show-card.leaving .tc-show-val { opacity: 0; transition: opacity .45s ease-out; animation: none; }
.tc-show-fly { position: fixed; z-index: 6; margin: 0; transform-origin: 50% 50%; pointer-events: none; will-change: transform; text-align: center;
  font: 800 clamp(34px, 9.5vh, 130px)/1.05 "Fredoka", "Andika", sans-serif; text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 40px var(--glow); overflow-wrap: anywhere; }
.tc-show-fly.many { font-size: clamp(26px, 6vh, 80px); }
.tc-show-fly .tc-show-tie { display: none; }
/* the sheet holds the podium and, under it, the rest of the list; it starts pushed down so the podium sits at the bottom of the screen, then rises */
.tc-show-sheet { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 2vh 2vw 9vh; display: flex; flex-direction: column; align-items: center; gap: 3vh;
  transform: translateY(calc(100vh - var(--pod-h) - 2vh)); }
.tc-show-sheet.up { transform: none; }
.sp { width: min(96vw, 1180px); height: var(--pod-h); display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 1vw, 16px); flex: none; }
.sp-col { flex: 1 1 0; max-width: 380px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.sp-col.none { visibility: hidden; }
.sp-slot { visibility: hidden; display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 5px; }
.sp-col.landed .sp-slot { visibility: visible; animation: sp-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.sp-medal { font-size: clamp(30px, 6vh, 64px); line-height: 1; }
.sp-nm { font: 800 clamp(20px, 4.4vh, 46px)/1.08 "Fredoka", "Andika", sans-serif; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); overflow-wrap: anywhere; min-height: 1.1em; }
.sp-nm.many { font-size: clamp(16px, 3.2vh, 32px); }
.sp-tie { font-size: .45em; letter-spacing: .15em; opacity: .9; vertical-align: middle; }
.sp-val { font: 700 clamp(14px, 2.6vh, 28px)/1.1 "Fredoka", sans-serif; background: rgba(0, 0, 0, .28); border: 3px solid rgba(255, 255, 255, .6); border-radius: 999px; padding: .05em .7em; margin-top: 3px; }
.sp-step { width: 100%; border-radius: 14px; display: grid; place-items: start center; padding-top: .3em; font: 800 clamp(26px, 6vh, 64px)/1 "Fredoka", sans-serif; color: rgba(255, 255, 255, .95);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25); border: 4px solid rgba(0, 0, 0, .2); transform-origin: 50% 100%; }
.sp1 .sp-step { height: 24vh; background: linear-gradient(#ffd84d, #d59a0a); }
.sp2 .sp-step { height: 17vh; background: linear-gradient(#e9edf3, #939eac); }
.sp3 .sp-step { height: 11vh; background: linear-gradient(#e6a877, #a15f28); }
.sp-step.thump { animation: sp-thump .55s ease-out; }
.sp-list { list-style: none; margin: 0; padding: 0; width: min(96vw, 1180px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--r, 1), auto); grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); gap: 1vh 18px; text-align: left; flex: none; }
.sp-list li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: .1em .5em; font: 700 clamp(14px, calc(40vh / var(--r, 1) * .6), 34px)/1.15 "Fredoka", "Andika", sans-serif;
  background: rgba(255, 255, 255, .15); border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px; opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .4s ease-out, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.sp-list li.on { opacity: 1; transform: none; }
.sp-list .rk { flex: none; min-width: 1.5em; height: 1.5em; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #2a1a66; display: grid; place-items: center; font-size: .85em; }
.sp-list .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-list .vl { flex: none; font-size: .8em; opacity: .95; }
@keyframes sp-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-thump { 0% { transform: scaleY(1); } 25% { transform: scaleY(.9); } 60% { transform: scaleY(1.04); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .tc-show-sheet, .sp-list li, .sp-col.landed .sp-slot, .sp-step.thump { animation: none !important; transition: none !important; } .sp-list li { opacity: 1; transform: none; } }
body:has(#show:not([hidden])) #zb-feedback, body:has(#show:not([hidden])) #zb-feedback-room, body:has(#show:not([hidden])) .zb-site-footer { display: none; }
.pb-body .tc-show .tc-show-skip.pb-btn { color: #2a1a00; }   /* the page-wide "button { color: inherit }" would make the label white on the cream button */