:root {
  --bg: #0e1726;
  --panel: #16213a;
  --accent: #2f6df6;
  --accent2: #14b8a6;
  --text: #eaf0fb;
  --muted: #8ea0c0;
  --bar-bg: #223052;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", Arial, sans-serif; }
.hidden { display: none !important; }

/* ============ PRESENTER ============ */
body.present {
  background: #000;
  color: var(--text);
  overflow: hidden;
}
#stage {
  position: absolute; inset: 0 0 56px 0;
  display: flex; align-items: center; justify-content: center;
}
#slide-image { max-width: 100%; max-height: 100%; object-fit: contain; }

/* embed slide: the tool page fills the whole stage; it manages its own scaling */
#slide-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #f4f6fa; }

#slide-interactive {
  position: relative; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 0%, #1b2b4d 0%, var(--bg) 70%);
  display: flex; flex-direction: column;
  padding: 4vh 6vw; gap: 3vh;
}
.q-prompt {
  font-size: 3.4vw; font-weight: 800; line-height: 1.15;
  text-align: center; padding-top: 1vh;
}
.q-results { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.q-count { text-align: center; color: var(--muted); font-size: 1.4vw; }

/* poll bars */
.bar-row { display: flex; align-items: center; gap: 1.2vw; margin: 1.1vh 0; }
.bar-label { width: 26%; font-size: 1.7vw; font-weight: 600; text-align: right; }
.bar-track { flex: 1; background: var(--bar-bg); border-radius: 10px; height: 5.2vh; position: relative; overflow: hidden; }
.bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 10px; transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.bar-val { position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 14px; font-weight: 800; font-size: 1.7vw; }

/* Quiz options on the PROJECTOR while voting is open (after the 5s read gate).
   For students who don't follow along in the app and just watch the board.
   Deliberately carries no counts and no bars — the distribution stays hidden
   until reveal, so the room can't read the leader and copy it. Echoes the phone's
   .opt-btn so the board and the hand show the same four things. */
.q-opts { display: grid; gap: 1.8vh 1.6vw; margin: 3vh auto 0; max-width: 88%; }
.q-opts.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-opt {
  background: var(--panel); border: 2px solid #2b3d64; border-radius: 16px;
  padding: 2.4vh 1.6vw; font-size: 2.1vw; font-weight: 600; line-height: 1.35;
  text-align: center;
}

/* scale histogram */
.scale-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 2vw; height: 46vh; }
.scale-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.scale-bar {
  width: 8vw; background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 12px 12px 0 0; transition: height .5s cubic-bezier(.2,.8,.2,1);
  display: flex; align-items: flex-start; justify-content: center; color: #fff;
  font-weight: 800; font-size: 1.8vw; padding-top: 6px; min-height: 4px;
}
.scale-num { font-size: 2.4vw; font-weight: 800; margin-top: .6vh; }
.scale-avg { text-align: center; font-size: 2vw; margin-top: 2vh; }
.scale-avg b { color: var(--accent2); font-size: 3vw; }
.scale-labels { display: flex; justify-content: space-between; color: var(--muted);
  font-size: 1.4vw; margin-top: 1vh; padding: 0 3vw; }

/* word cloud: spiral-packed by present.js, spans are absolutely positioned around the centre */
/* isolation: renderCloud gives each word z-index 100-200 so big words sit on top. Without its
   own stacking context those numbers competed with the full-stage overlays (summary/race 30,
   checkpoint 65-70) and the cloud painted over the end-of-lecture board (L01, 2026-10-18). */
.cloud { flex: 1; min-height: 0; position: relative; isolation: isolate; }
.cw {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-weight: 800; line-height: 1; text-shadow: 0 3px 14px rgba(0,0,0,.45);
  transition: left .6s cubic-bezier(.2,.8,.2,1), top .6s cubic-bezier(.2,.8,.2,1),
              font-size .6s ease, color .6s ease, opacity .6s ease;
}
.cw b { display: inline-block; font-weight: inherit; }
.cw-new b { animation: cloudIn .55s cubic-bezier(.2,.9,.2,1.25) both; }
@keyframes cloudIn {
  0%   { opacity: 0; transform: scale(.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* quiz bar states — animated reveal */
.bar-row.correct .bar-fill { background: linear-gradient(90deg, #29c07a, #14b8a6); }
.bar-row.correct .bar-label { color: #29c07a; font-weight: 800; }
.bar-row.correct { animation: correctPop .55s cubic-bezier(.2,.9,.2,1.2) both; }
.bar-row.correct .bar-track {
  box-shadow: 0 0 0 3px #29c07a, 0 0 22px rgba(41,192,122,.5);
  animation: correctGlow 1.6s ease-in-out .55s infinite;
}
.bar-row.dim { opacity: .4; transition: opacity .5s ease; }
@keyframes correctPop {
  0%   { transform: scale(.96); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes correctGlow {
  0%, 100% { box-shadow: 0 0 0 3px #29c07a, 0 0 16px rgba(41,192,122,.4); }
  50%      { box-shadow: 0 0 0 3px #29c07a, 0 0 32px rgba(41,192,122,.85); }
}

/* timer (presenter) */
.q-timer {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(22,33,58,.9); border: 1px solid #2b3d64; border-radius: 999px;
  padding: 6px 22px; font-size: 2vw; font-weight: 800; z-index: 6;
}
.q-timer.urgent { color: #fff; background: #e0564a; border-color: #e0564a; }

/* leaderboard (presenter) */
.lb-board { display: flex; flex-direction: column; gap: 1.4vh; padding: 0 4vw; }
.lb-item { display: flex; align-items: center; gap: 1.4vw; }
.lb-medal { width: 3vw; font-size: 2.4vw; text-align: center; }
.lb-track { flex: 1; position: relative; height: 6vh; background: var(--bar-bg);
  border-radius: 10px; overflow: hidden; display: flex; align-items: center; }
.lb-fill { position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 10px; transition: width .5s; }
.lb-name { position: relative; padding: 0 16px; font-size: 2vw; font-weight: 800; }
.lb-pts { position: relative; margin-right: auto; padding: 0 16px; font-size: 2vw; font-weight: 800; }
.lb-empty { text-align: center; color: var(--muted); font-size: 2vw; }
/* the crowned #1 after the reshuffle settles */
.lb-item.lb-winner .lb-fill { background: linear-gradient(90deg,#f6a623,#ffd868); }
.lb-item.lb-winner .lb-track { box-shadow: 0 0 0 3px #ffd868, 0 0 26px rgba(246,166,35,.6); animation: lbWin .9s ease-in-out; }
@keyframes lbWin { 0%,100% { transform: scale(1); } 40% { transform: scale(1.035); } }

/* join panel */
#join-panel {
  position: absolute; bottom: 68px; left: 18px; z-index: 5;
  background: rgba(22,33,58,.92); border: 1px solid #2b3d64;
  border-radius: 14px; padding: 12px; text-align: center; backdrop-filter: blur(4px);
}
.join-title { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
#join-qr { width: 120px; height: 120px; background: #fff; border-radius: 8px; padding: 6px; }
.join-url { font-size: 13px; margin-top: 6px; direction: ltr; color: var(--accent2); font-weight: 700; }

/* lobby (pre-start) */
#lobby {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.4vh; text-align: center;
  background: radial-gradient(circle at 50% 0%, #1b2b4d 0%, var(--bg) 70%);
  overflow: hidden;
}
#lobby h1 { font-size: 2.9vw; margin: 0; line-height: 1.15; max-width: 88vw; }
.lobby-sub { color: var(--muted); font-size: 1.4vw; margin: 0; }
#lobby-qr { width: 41vh; height: 41vh; background: #fff; border-radius: 18px; padding: 14px; }
#lobby .join-url { font-size: 1.6vw; }
#btn-start {
  margin-top: 1vh; padding: 16px 42px; font-size: 1.8vw; font-weight: 800; cursor: pointer;
  color: #fff; border: none; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
#btn-start:hover { filter: brightness(1.08); }
.lobby-back { margin-top: .5vh; color: var(--muted); text-decoration: none; font-size: 1.2vw; }
.lobby-back:hover { color: var(--text); }
.lobby-count { font-size: 2.2vw; font-weight: 800; color: var(--accent2); }
.players-count { color: var(--accent2); font-weight: 700; font-variant-numeric: tabular-nums;
  text-decoration: none; cursor: pointer; padding: 4px 8px; border-radius: 8px;
  border: 1px solid transparent; }
.players-count:hover { background: #22375f; border-color: #2b3d64; }

/* quiz intro ("get ready") — presenter */
#quizintro {
  position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2vh; text-align: center;
  background: radial-gradient(circle at 50% 32%, #23407a 0%, var(--bg) 72%);
}
.qi-badge { font-size: 4vw; font-weight: 800; color: var(--accent2);
  letter-spacing: .04em; animation: qiPulse 1.6s ease-in-out infinite; }
.qi-count { font-size: 13vw; font-weight: 900; line-height: 1; direction: ltr;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.qi-sub { font-size: 2.2vw; color: var(--muted); }
@keyframes qiPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

/* QR popup (presenter, toggled from control bar) */
#qr-popup {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,18,.82); backdrop-filter: blur(3px); cursor: pointer;
}
.qr-popup-inner {
  background: var(--panel); border: 1px solid #2b3d64; border-radius: 20px; padding: 30px 34px; text-align: center;
}
.qr-popup-inner .join-title { font-size: 1.4vw; margin-bottom: 12px; }
.qr-popup-inner img { width: 70vh; height: 70vh; background: #fff; border-radius: 16px; padding: 14px; }
.qr-popup-inner .join-url { font-size: 1.6vw; margin-top: 12px; }
.qr-close-hint { color: var(--muted); font-size: 1vw; margin-top: 14px; }
/* iPhone Code Scanner / QR apps open a mini-browser that is torn down on lock (L02, 2026-10-25) */
.join-ios { color: var(--muted); font-size: 1.2vw; }
.qr-popup-inner .join-ios { margin-top: 10px; }

/* quiz intro — phone */
#s-quizintro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.s-qi-badge { font-size: 64px; animation: qiPulse 1.6s ease-in-out infinite; }
#s-quizintro h1 { font-size: 30px; margin: 0; }
.s-qi-count { font-size: 54px; font-weight: 900; color: var(--accent2); direction: ltr; }
#s-quizintro p { color: var(--muted); margin: 0; }

/* admin picker */
.admin-page { background: var(--bg); color: var(--text); min-height: 100vh; }
#admin { max-width: 1000px; margin: 0 auto; padding: 6vh 24px; }
.admin-head { text-align: center; margin-bottom: 4vh; }
.admin-head h1 { font-size: 2.6rem; margin: 0 0 6px; }
.admin-sub { color: var(--muted); margin: 0; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.deck-card {
  display: block; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid #2b3d64; border-radius: 16px;
  padding: 22px; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.deck-card:hover { transform: translateY(-3px); border-color: var(--accent2);
  box-shadow: 0 8px 26px rgba(0,0,0,.35); }
.deck-card.live { border-color: var(--accent2); }
.deck-card { overflow: hidden; }
.deck-thumb { display: block; width: calc(100% + 44px); margin: -22px -22px 16px;
  aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid #2b3d64; background: #0b1424; }
.deck-num { color: var(--accent2); font-weight: 800; font-size: .95rem; }
.deck-title { font-size: 1.35rem; font-weight: 800; margin: 8px 0 10px; line-height: 1.25; }
.deck-meta { color: var(--muted); font-size: .9rem; }
.deck-badge { color: var(--accent2); font-weight: 700; font-size: .85rem; margin-top: 8px; }
.deck-go { margin-top: 16px; display: inline-block; font-weight: 700; color: var(--accent);
  background: rgba(47,109,246,.14); padding: 8px 16px; border-radius: 999px; }
.admin-empty { text-align: center; color: var(--text); margin-top: 8vh; }
.admin-empty code { background: var(--panel); padding: 2px 8px; border-radius: 6px; direction: ltr; display: inline-block; }

/* controls */
#controls {
  position: absolute; bottom: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: rgba(10,16,30,.9); border-top: 1px solid #223052;
}
#controls button {
  background: var(--panel); color: var(--text); border: 1px solid #2b3d64;
  border-radius: 8px; padding: 8px 14px; font-size: 15px; cursor: pointer;
}
#controls button:hover { background: #1e2c4d; }
/* a toggled-OFF control must read as off at a glance from the lectern */
#controls button.off { background: #3a1e28; border-color: #7d3346; color: #f0a6b4; }
#controls button.off:hover { background: #4a2532; }

/* Audience picker — which section is in the room (see correct_by_audience). Styled to
   match the control-bar buttons so it reads as one row, not a stray form control. */
#audience-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #9fb0c9; }
#audience-wrap select {
  background: #16233f; color: #dce6f5; border: 1px solid #2c3d63;
  border-radius: 6px; padding: 6px 8px; font: inherit; cursor: pointer;
}
#audience-wrap select:hover { background: #1e2c4d; }
/* Lobby session settings. Sized in vw like the rest of the lobby, since this screen is
   projected and read from the back of the room. One .cfg-row per setting; the panel is
   meant to grow, so nothing here is positioned per-item. */
/* Lobby session settings. Deliberately ONE row plus one hint line: the lobby is a
   centred stack with overflow:hidden, so anything taller pushes the lecture title off
   the top of the projector. Add a setting to the row, not a new row. */
#lobby-config {
  display: flex; flex-direction: column; align-items: center; gap: .5vh;
  margin: .2vh 0; padding: 1vh 1.8vw;
  background: rgba(10, 16, 30, .55); border: 1px solid #243459; border-radius: 14px;
}
.cfg-row { display: flex; align-items: center; gap: 1vw; }
.cfg-item { display: inline-flex; align-items: center; gap: .55vw; }
.cfg-sep { width: 1px; height: 2.4vh; background: #2c3d63; }
.cfg-label { color: var(--muted); font-size: 1.1vw; }
.cfg-control {
  background: #16233f; color: var(--text); border: 1px solid #2c3d63;
  border-radius: 8px; padding: .55vh .9vw; font-size: 1.1vw; font-family: inherit; cursor: pointer;
}
.cfg-control:hover { background: #1e2c4d; }
.cfg-toggle { min-width: 6.5vw; }
/* a toggled-OFF setting must read as off from the back of the room, same as the bar */
.cfg-toggle.off { background: #3a1e28; border-color: #7d3346; color: #f0a6b4; }
.cfg-toggle.off:hover { background: #4a2532; }
.cfg-hint { color: #6b7d99; font-size: .92vw; }
#slide-pos { color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; }
.spacer { flex: 1; }
.conn { color: #e0564a; font-size: 20px; }
.conn.ok { color: #29c07a; }

/* ============ STUDENT ============ */
body.student {
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  height: 100vh;        /* fallback */
  height: 100svh;       /* never taller than the visible area (address bar shown) — no clipping */
  overflow: hidden;
}
/* fill the viewport so the follow-image can size to the whole screen */
#s-app { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#s-header {
  background: var(--panel); padding: 14px 16px; font-weight: 700;
  border-bottom: 1px solid #223052; display: flex; align-items: center; gap: 10px;
}
#s-main { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  justify-content: center; padding: 22px; gap: 20px; }
#s-waiting { text-align: center; color: var(--muted); }
#s-wait-img { max-width: 100%; max-height: 46vh; border-radius: 12px; margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.s-wait-banner { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; }
.s-wait-banner .s-spinner { margin: 0; width: 26px; height: 26px; border-width: 3px; }
.s-spinner {
  width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  border: 5px solid #223052; border-top-color: var(--accent); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#s-question { position: relative; }
#s-prompt { font-size: 24px; line-height: 1.3; text-align: center; margin: 0 0 8px; }

#s-input { display: flex; flex-direction: column; gap: 12px; }
.opt-btn {
  background: var(--panel); color: var(--text); border: 2px solid #2b3d64;
  border-radius: 14px; padding: 18px; font-size: 20px; cursor: pointer;
  text-align: right; line-height: 1.35;
}
.opt-btn:active { transform: scale(.98); }
.opt-btn.chosen { border-color: var(--accent2); background: #17324a; }

/* multi-select poll: a checkbox affordance, so "pick several" is obvious before the first tap */
.multi-hint { color: var(--muted, #8fa3c8); font-size: 15px; text-align: center; margin-bottom: -4px; }
.opt-btn.multi { position: relative; padding-left: 52px; }
.opt-btn.multi::after {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 2px solid #2b3d64; border-radius: 6px;
}
.opt-btn.multi.chosen::after {
  content: "✓"; border-color: var(--accent2); background: var(--accent2); color: #0b1020;
  font-size: 16px; font-weight: 700; line-height: 20px; text-align: center;
}

.scale-btns { display: flex; gap: 10px; justify-content: center; }
.scale-btns button {
  flex: 1; aspect-ratio: 1; font-size: 26px; font-weight: 800;
  border-radius: 14px; border: 2px solid #2b3d64; background: var(--panel); color: var(--text);
}
.scale-btns button.chosen { border-color: var(--accent2); background: #17324a; }
.scale-ends { display: flex; justify-content: space-between; color: var(--muted);
  font-size: 14px; margin-top: 8px; }

.wc-form { display: flex; flex-direction: column; gap: 12px; }
.wc-form input {
  padding: 16px; font-size: 20px; border-radius: 14px; border: 2px solid #2b3d64;
  background: var(--panel); color: var(--text); text-align: center;
}
.wc-form button, .send-btn {
  padding: 16px; font-size: 20px; font-weight: 700; border: none; border-radius: 14px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { background: #17324a; border: 1px solid var(--accent2); border-radius: 999px;
  padding: 6px 14px; font-size: 16px; }
.s-status { text-align: center; color: var(--accent2); font-size: 17px; min-height: 22px; }

/* ranking (phone) */
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: flex; align-items: center; gap: 10px; background: var(--panel);
  border: 2px solid #2b3d64; border-radius: 14px; padding: 12px 14px; }
.rank-num { font-weight: 800; color: var(--accent2); font-size: 20px; min-width: 24px; text-align: center; }
.rank-text { flex: 1; font-size: 18px; text-align: right; line-height: 1.3; }
.rank-ctrls { display: flex; flex-direction: column; gap: 4px; }
.rank-ctrls button { width: 42px; height: 30px; font-size: 15px; border-radius: 8px;
  border: 1px solid #2b3d64; background: #17233d; color: var(--text); cursor: pointer; }
.rank-ctrls button:disabled { opacity: .35; }

/* name gate */
#s-namegate { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 20px; }
.gate-box { text-align: center; width: 100%; max-width: 340px; }
.gate-box h1 { font-size: 22px; margin: 0 0 12px; }
.gate-box p { color: var(--muted); margin: 0 0 14px; }
.gate-box input {
  width: 100%; padding: 13px; font-size: 18px; text-align: center;
  border-radius: 14px; border: 2px solid #2b3d64; background: var(--panel); color: var(--text);
}
.gate-box button {
  width: 100%; margin-top: 12px; padding: 16px; font-size: 20px; font-weight: 700;
  border: none; border-radius: 14px; background: var(--accent); color: #fff;
}

/* attendance block in the entry gate (identity + where you are sitting) */
/* Sizing here is load-bearing, not taste: with the email field showing, the הצטרפות
   button sat 126px BELOW the fold on an iPhone SE, and a primary action a student has
   to go looking for reads as "the app is broken" in a full hall. Every value below is
   the tightest that still keeps touch targets >= 40px. Re-measure after editing:
   tools/verify_attendance_gate.py covers overflow and target size, and the fold check
   is `#s-join` bottom vs innerHeight at 320x568. */
.gate-field { margin: 0 0 12px; text-align: right; }
.gate-label { display: block; font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.gate-field input { font-size: 17px; padding: 12px; text-align: right; }
.gate-note { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 6px 0 0; }
.gate-box .ios-hint { margin: 0 0 12px; }
.ios-hint a { color: var(--accent2); font-weight: 700; display: inline-block; padding: 12px 6px; line-height: 18px; }
.gate-sep {
  border-top: 1px solid #2b3d64; padding-top: 12px; margin: 0 0 10px;
  color: var(--muted); font-size: 13px;
}
/* two side-by-side choices; 40px+ tall so they are real touch targets on a phone */
.loc-pick { display: flex; gap: 10px; }
.loc-pick .loc-opt {
  flex: 1; width: auto; margin: 0; padding: 9px 6px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 23px; font-weight: 700; line-height: 1;
  background: var(--panel); color: var(--text);
  border: 2px solid #2b3d64; border-radius: 14px; cursor: pointer;
}
.loc-pick .loc-opt span { font-size: 15px; }
.loc-pick .loc-opt.on { border-color: var(--accent); background: #22375f; }
.loc-pick .loc-opt:active { transform: scale(.98); }
.gate-err {
  margin-top: 10px; color: #ffb4b4; background: #4a1f28; border: 1px solid #7a2f3c;
  border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 600;
}
#s-me {
  font: inherit; font-weight: 700; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
#s-me:hover { background: #22375f; }
#s-me.locked { cursor: default; }
#s-me.locked:hover { background: transparent; }
#s-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: #22375f; border: 1px solid #2b3d64; color: var(--text);
  padding: 11px 18px; border-radius: 12px; font-size: 15px; font-weight: 600;
  z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.45); max-width: 90vw; text-align: center;
}

/* slide-follow image — fills available space, contained in any orientation */
/* embed on the phone: the iframe gets the full follow area; the page inside scrolls itself */
#s-embed { flex: 1; min-height: 0; display: flex; padding: 0; }
#s-embed-frame { flex: 1; width: 100%; border: 0; border-radius: 10px; background: #f4f6fa; }

#s-image { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px; }
#s-slide-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; cursor: zoom-in; }
.s-img-hint {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(22,33,58,.92); color: var(--muted); padding: 6px 12px; border-radius: 999px;
  font-size: 12px; white-space: nowrap; pointer-events: none;
  animation: hintFade 6s ease forwards;   /* fade out so it stops covering the slide */
}
@keyframes hintFade { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }

/* ================= gamification ================= */
/* avatar picker in the name gate */
/* avatar and its re-roll sit SIDE BY SIDE, not stacked: stacking a 70px emoji above a
   full-width button cost ~55px of height and was the single biggest reason the join
   button fell below the fold on a small phone. */
.avatar-pick { display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 14px; margin: 0 0 10px; }
#s-avatar-big { font-size: 48px; line-height: 1; }
#s-reroll { width: auto; margin: 0; }
#s-reroll { background: var(--panel); color: var(--text); border: 2px solid #2b3d64;
  border-radius: 999px; padding: 8px 20px; font-size: 16px; font-weight: 700; cursor: pointer; }
#s-reroll:active { transform: scale(.97); }

/* reaction buttons (phone, on content slides) — tap as many times as you like */
.s-reacts { position: absolute; bottom: 14px; left: 14px; z-index: 6; display: flex; gap: 12px; }
.s-react { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 68px; padding: 8px 6px; border-radius: 16px; border: none; cursor: pointer;
  font-size: 30px; color: var(--text);
  background: rgba(22,33,58,.94); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.s-react-lbl { font-size: 12px; color: var(--muted); font-weight: 700; }
.s-react:active { transform: scale(.88); }
.float-emoji { position: fixed; z-index: 200; font-size: 30px; pointer-events: none;
  transform: translate(-50%, 0); animation: floatUp 1.05s ease-out forwards; }
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 0) scale(.8); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -120px) scale(1.5); }
}

/* read gate (phone) */
.s-read { text-align: center; margin: 18px 0; }
.s-read-ring { width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%;
  border: 5px solid var(--accent2); display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 900; color: var(--accent2); animation: qiPulse 1s ease-in-out infinite; }
.s-read p { color: var(--muted); font-size: 16px; }

/* 2x badges (phone) */
.s-2x { display: block; width: fit-content; margin: 0 auto 10px; padding: 5px 16px; font-weight: 900;
  color: #0e1726; background: linear-gradient(90deg,#ffd868,#f6a623); border-radius: 999px; font-size: 17px;
  animation: twoxPulse 1s ease-in-out infinite; }
.s-2x.hidden { display: none !important; }
.s-qi-2x { padding: 8px 20px; font-weight: 900; color: #0e1726; font-size: 20px;
  background: linear-gradient(90deg,#ffd868,#f6a623); border-radius: 999px; margin-bottom: 14px;
  animation: twoxPop .7s cubic-bezier(.2,.9,.2,1.3) both; }

/* leaderboard streak flame */
.lb-streak { color: #f6a623; font-weight: 800; }

/* fastest-finger callout (presenter) */
.q-fastest { text-align: center; font-size: 1.9vw; font-weight: 700; color: var(--accent2); }
.q-fastest b { color: var(--text); }

/* reaction race (presenter) — anonymous ❤️ vs 😮 counters */
#reacts-panel { position: absolute; bottom: 66px; right: 18px; z-index: 6; width: 20vw;
  background: rgba(22,33,58,.92); border: 1px solid #2b3d64; border-radius: 14px;
  padding: 10px 14px; backdrop-filter: blur(4px); }
.rx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rx-emoji { font-size: 1.8vw; }
.rx-n { font-size: 1.8vw; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 2.4vw; text-align: left; }
.rx-n.pop { animation: rxPop .35s cubic-bezier(.2,.9,.2,1.3); }
@keyframes rxPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: #ffd868; } 100% { transform: scale(1); } }
.rx-bar { display: flex; height: 1.4vh; margin: 6px 0; border-radius: 999px; overflow: hidden; background: var(--bar-bg); }
.rx-like { background: linear-gradient(90deg,#ff6b8a,#ff2d6f); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.rx-wow { background: linear-gradient(90deg,#f6a623,#ffd868); transition: width .5s cubic-bezier(.2,.8,.2,1); }

/* leaderboard: +delta chip + FLIP */
.lb-item { will-change: transform; }
.lb-delta { position: relative; margin-right: 10px; padding: 0 12px; font-size: 1.5vw; font-weight: 900;
  color: #29c07a; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.lb-delta.show { opacity: 1; transform: translateX(0); }

/* 2x double-points badge */
.q-2x, .qi-2x { font-weight: 900; color: #0e1726;
  background: linear-gradient(90deg,#ffd868,#f6a623); border-radius: 999px; }
.q-2x { position: absolute; top: 16px; right: 24px; z-index: 7; padding: 6px 18px; font-size: 1.8vw;
  animation: twoxPulse 1s ease-in-out infinite; }
.qi-2x { padding: 1vh 3vw; font-size: 2.6vw; margin-bottom: 1.5vh; animation: twoxPop .8s cubic-bezier(.2,.9,.2,1.3) both, twoxPulse 1s ease-in-out 1s infinite; }
#quizintro.dbl { background: radial-gradient(circle at 50% 32%, #4a3a12 0%, var(--bg) 72%); }
@keyframes twoxPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(246,166,35,.5); } 50% { transform: scale(1.06); box-shadow: 0 0 22px 4px rgba(246,166,35,.55); } }
@keyframes twoxPop { from { transform: scale(0) rotate(-12deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* read phase (presenter) */
.q-read { text-align: center; font-size: 1.9vw; font-weight: 800; color: var(--accent2); margin: 1vh 0; }
.q-read span { font-size: 2.4vw; color: #ffd868; }

/* podium finale — the 10s brawl that runs BEFORE the standings settle */
.battle { position: relative; height: 62vh; cursor: pointer; }
.battle.battle-out { animation: battleOut .42s ease forwards; }
@keyframes battleOut { to { opacity: 0; transform: scale(.96); } }
.battle-title { font-size: 2.4vw; font-weight: 900; text-align: center; margin-bottom: 1vh;
  animation: battlePulse 1.1s ease-in-out infinite; }
@keyframes battlePulse { 50% { opacity: .55; transform: scale(1.03); } }
.battle-arena { position: relative; height: 54vh; overflow: hidden; border-radius: 18px;
  background: radial-gradient(circle at 50% 45%, rgba(47,109,246,.16), transparent 70%); }
.fighter { position: absolute; top: 0; left: 0; display: flex; flex-direction: column;
  align-items: center; gap: .2vh; will-change: transform; }
.f-emoji { font-size: 4.4vw; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.f-name { font-size: 1.05vw; font-weight: 800; color: var(--text); opacity: .85; white-space: nowrap; }
.fighter.hit .f-emoji { animation: fighterHit .28s ease; }
@keyframes fighterHit { 30% { transform: scale(1.35) rotate(-12deg); } 65% { transform: scale(.9) rotate(9deg); } }
.clash { position: absolute; font-size: 3vw; pointer-events: none; transform: translate(-50%,-50%);
  animation: clashPop .62s ease forwards; }
@keyframes clashPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  35%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); } }

/* podium finale */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 2vw; height: 56vh; padding-top: 3vh; }
.podium-col { display: flex; flex-direction: column; align-items: center; width: 20vw;
  animation: podiumRise .6s cubic-bezier(.2,.9,.2,1.1) both; }
.podium-col.gold { animation-delay: .15s; }
.podium-col.bronze { animation-delay: .3s; }
@keyframes podiumRise { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.podium-avatar { font-size: 6vw; line-height: 1; }
.podium-name { font-size: 1.7vw; font-weight: 800; margin: .6vh 0; text-align: center; }
.podium-block { width: 100%; border-radius: 14px 14px 0 0; display: flex; flex-direction: column;
  align-items: center; padding-top: 1.4vh; color: #0e1726; font-weight: 900; }
.podium-col.gold .podium-block { height: 30vh; background: linear-gradient(180deg,#ffd868,#f6a623); }
.podium-col.silver .podium-block { height: 22vh; background: linear-gradient(180deg,#e9eef7,#b8c4d8); }
.podium-col.bronze .podium-block { height: 16vh; background: linear-gradient(180deg,#e8a878,#c17a49); }
.podium-medal { font-size: 3vw; }
.podium-pts { font-size: 2.1vw; }
.podium-rest { max-width: 42vw; margin: 2vh auto 0; }
.pr-row { display: flex; justify-content: space-between; gap: 2vw; font-size: 1.4vw; padding: .4vh 1vw; color: var(--muted); }

/* confetti */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.confetti span { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px;
  animation-name: confettiFall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: .85; }
}
/* fullscreen zoomable image (pinch-zoom enabled via viewport meta) */
#s-lightbox { position: fixed; inset: 0; z-index: 100; background: #000;
  display: flex; align-items: center; justify-content: center; }
#s-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* student timer */
.s-timer { text-align: center; font-size: 30px; font-weight: 800; margin-bottom: 10px; color: var(--accent2); }
.s-timer.urgent { color: #e0564a; }

/* quiz feedback on phone */
.opt-btn.correct { border-color: #29c07a; background: #12331f; }
.opt-btn.wrong { border-color: #e0564a; background: #331717; }
.opt-btn:disabled { opacity: .8; }

/* student leaderboard */
#s-leaderboard { padding: 6px 4px; }
#s-leaderboard h1 { text-align: center; font-size: 24px; margin: 6px 0 12px; }
.lb-me { text-align: center; font-size: 18px; font-weight: 800; color: var(--accent2);
  background: #17324a; border-radius: 12px; padding: 10px; margin-bottom: 14px; }
.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid #223052; border-radius: 12px; padding: 12px 14px; }
.lb-row.me { border-color: var(--accent2); background: #17324a; }
.lb-rank { width: 30px; text-align: center; font-weight: 800; font-size: 18px; }
.lb-name { flex: 1; font-weight: 700; }
/* The projector's .lb-name above sets font-size: 2vw, which on a phone is ~7px. Scoped to the
   student rows (the projector uses .lb-item, never .lb-row) so it fixes every phone board. */
.lb-row .lb-name { font-size: 17px; padding: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 800; color: var(--accent2); }

/* ============ TEAM ANIMAL RACE ============ */
/* presenter overlay (covers the stage) */
#race { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 2vh; padding: 3vh 4vw;
  background: radial-gradient(circle at 50% 0%, #14233f 0%, var(--bg) 75%); }
.race-title { font-size: 3.4vw; font-weight: 900; color: var(--accent2); margin-top: 1vh; }
.race-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20vw; font-weight: 900; z-index: 5; direction: ltr;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.race-countdown.cd-pop { animation: cdPop .5s cubic-bezier(.2,.9,.2,1.3); }
@keyframes cdPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
/* lanes shrink to fit: at 7vh each, 7-8 teams ran past the screen bottom (L02 Wed 2026-10-28).
   ~72vh is what is left under the title on the letterboxed stage; each lane also spends ~5.2vh on its name and the gap.
   --lanes is set by present.js. */
.race-track { --lanes: 4; --lane-h: clamp(2.6vh, calc(72vh / var(--lanes) - 5.2vh), 7vh);
  width: 100%; display: flex; flex-direction: column; gap: 1.6vh; margin-top: 1vh; }
.race-lane { display: flex; flex-direction: column; gap: .3vh; }
.race-name { font-size: 1.7vw; font-weight: 800; text-align: right; }
.race-strip { direction: ltr; position: relative; height: var(--lane-h); border-radius: 10px;
  background: var(--bar-bg); border: 1px dashed #33456e; }
.race-finish { position: absolute; right: .4vw; top: 50%; transform: translateY(-50%); font-size: 3vw; opacity: .5; }
.race-animal { position: absolute; top: 50%; transform: translateY(-50%); font-size: calc(var(--lane-h) * .66); line-height: 1;
  transition: left .18s linear; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.race-lane.race-won .race-strip { box-shadow: 0 0 0 3px #ffd868, 0 0 26px rgba(246,166,35,.6); }
.race-lane.race-dq .race-strip { opacity: .35; filter: grayscale(1); border-color: #e0564a; }
.race-dq-tag { color: #e0564a; font-size: .8em; }
.race-dq-msg { font-size: 22px; font-weight: 800; color: #e0564a; line-height: 1.5; }
.race-dq-msg span { font-size: 18px; color: var(--muted); }
.race-winner { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; }
.rw-inner { text-align: center; background: rgba(14,23,42,.86); border-radius: 24px; padding: 4vh 6vw; backdrop-filter: blur(4px); }
.rw-animal { font-size: 12vw; line-height: 1; animation: cdPop .6s cubic-bezier(.2,.9,.2,1.3); }
.rw-text { font-size: 3.4vw; font-weight: 900; color: #ffd868; margin-top: 1vh; }
.rw-sub { font-size: 1.7vw; color: var(--muted); margin-top: 1vh; }
#race-end { position: absolute; bottom: 3vh; padding: 14px 34px; font-size: 1.6vw; font-weight: 800;
  border: none; border-radius: 999px; cursor: pointer; color: #fff; z-index: 9;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); }

/* student takeover (fixed) */
#s-race { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 15%, #1b2b4d 0%, var(--bg) 75%); }
.s-race-team { font-size: 22px; color: var(--text); }
.s-race-team b { font-size: 30px; }
.s-race-cd { font-size: 40vw; font-weight: 900; direction: ltr; line-height: 1; color: var(--accent2); }
.s-race-tap { width: 78vw; height: 78vw; max-width: 340px; max-height: 340px; border-radius: 50%; border: none;
  font-size: 60px; font-weight: 900; color: #fff; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 35%, var(--accent2), var(--accent));
  box-shadow: 0 10px 30px rgba(0,0,0,.5); user-select: none; -webkit-tap-highlight-color: transparent; }
.s-race-tap span { font-size: 26px; }
.s-race-tap.tapped { animation: tapBump .12s ease; }
@keyframes tapBump { 50% { transform: scale(.92); } }
.s-race-mytaps { font-size: 20px; font-weight: 800; color: var(--accent2); }
/* scratch card */
.scratch { position: relative; width: 78vw; max-width: 320px; height: 40vw; max-height: 180px; margin: 0 auto;
  border-radius: 18px; overflow: hidden; }
.scratch-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 900; color: #0e1726;
  background: linear-gradient(135deg,#ffd868,#f6a623); }
.scratch-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #fff; cursor: pointer; gap: 6px;
  background: repeating-linear-gradient(45deg,#33456e 0,#33456e 12px,#2b3d64 12px,#2b3d64 24px);
  transition: opacity .4s, transform .4s; }
.scratch.scratched .scratch-cover { opacity: 0; transform: scale(1.1); pointer-events: none; }
/* Canvas cover — the real scratch-off. The .scratch-cover rules above are the OLD tap-to-fade
   div; they are kept on purpose so a phone running a cached older student.js still gets a
   cover instead of the bare number. */
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: pointer; touch-action: none; transition: opacity .45s ease, transform .45s ease; }
.scratch.scratched .scratch-canvas { opacity: 0; transform: scale(1.06); pointer-events: none; }
.scratch.scratched .scratch-val { animation: scratchPop .45s ease; }
@keyframes scratchPop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.scratch-hint { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--muted); }
.race-lose { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.5; }
.race-lose span { font-size: 18px; color: var(--muted); }

/* ================= teacher attendance view (/attendance) ================= */
#attendance { max-width: 1000px; margin: 0 auto; padding: 24px 20px 60px; }
#attendance a { color: var(--accent2); }
.att-live { background: var(--panel); border: 1px solid #2b3d64; border-radius: 16px;
  padding: 18px; margin: 0 0 26px; }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 14px; }
.att-head h2, .att-hist h2 { margin: 0; font-size: 20px; }
.att-pill { font-size: 14px; font-weight: 700; padding: 5px 13px; border-radius: 999px;
  border: 1px solid #2b3d64; }
.att-pill.on { color: #7ee2a8; background: #14321f; border-color: #2c6b45; }
.att-pill.off { color: #ffb4b4; background: #4a1f28; border-color: #7a2f3c; }
.att-counts { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.att-count { flex: 1; min-width: 120px; text-align: center; padding: 12px 8px;
  border-radius: 12px; background: #17233d; border: 1px solid #2b3d64; }
.att-count b { display: block; font-size: 30px; line-height: 1.1; }
.att-count span { font-size: 13px; color: var(--muted); }
.att-count.room b { color: #7ee2a8; }
.att-count.balcony b { color: var(--accent2); }
.att-count.unid b { color: #ffb4b4; }
.att-cols { display: flex; gap: 16px; flex-wrap: wrap; }
.att-col { flex: 1; min-width: 240px; }
.att-col h3 { font-size: 15px; margin: 0 0 8px; }
.att-col h3 small { color: var(--muted); font-weight: 400; }
.att-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.att-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px;
  border-bottom: 1px solid #22314f; font-size: 14px; }
.att-list li.att-empty { color: var(--muted); justify-content: center; border-bottom: 0; }
.att-nick { font-weight: 700; }
.att-email { color: var(--muted); font-size: 13px; direction: ltr; unicode-bidi: embed; }
.att-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 0 0; }
.att-hist { margin: 0 0 26px; }
.att-table { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 15px; }
.att-table th, .att-table td { text-align: right; padding: 9px 12px; border-bottom: 1px solid #22314f; }
.att-table th { color: var(--muted); font-size: 13px; font-weight: 700; }
.att-table tr.met td { background: #14321f; }

/* ================= classroom seating chart (/attendance/room) ================= */
.room-page { background: var(--bg); color: var(--text); }
#room { max-width: 1180px; margin: 0 auto; padding: 20px 18px 50px; }
.room-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.room-head h1 { margin: 0; font-size: 22px; }
.room-lec { color: var(--muted); font-weight: 400; font-size: 17px; }
#room a { color: var(--accent2); }
.room-tally { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.tally { background: #17233d; border: 1px solid #2b3d64; border-radius: 999px;
  padding: 6px 14px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; }
.room-tally .att-pill { white-space: nowrap; flex: 0 0 auto; }
.tally b { font-size: 18px; }
/* NOT .tally.balcony: the balcony SECTION rule below is `.balcony { width: 100% }`, and a
   pill carrying both classes inherited it, stretching to 363px and shoving the whole header
   row off the left edge. Modifier names here are prefixed so the two can never collide. */
.tally-room b { color: #7ee2a8; }
.tally-balcony b { color: var(--accent2); }

/* Seat geometry lives here as variables because room.html READS them to decide how many
   seats fit per row. Change them here only; a second copy in the JS would drift. */
.hall { display: flex; flex-direction: column; align-items: center; gap: 14px;
  --seat-w: 66px; --seat-h: 62px; --seat-gap: 7px; }
/* the front of the room: the lecturer standing beside the board */
/* --hall-w is set by room.html from the seating width, so the board and balcony scale
   with the class instead of always spanning the page. The floor keeps the board readable
   for a tiny class. */
.stage-row { display: flex; align-items: stretch; justify-content: center;
  gap: 14px; width: min(100%, max(var(--hall-w, 720px), 430px)); }
.lecturer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 14px; cursor: pointer;
  background: var(--panel); border: 1px solid #3a4f7a; border-radius: 16px;
  color: var(--text); font: inherit;
}
.lecturer:hover { background: #22375f; }
.lecturer:active { transform: scale(.97); }
.lecturer-av { font-size: 30px; line-height: 1; }
.lecturer-nm { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* the board the room faces, narrowed so the hall reads as pointing at it */
.stage {
  flex: 0 1 62%; min-width: 220px; text-align: center; padding: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2a3d63, #1a2740);
  border: 1px solid #3a4f7a; border-radius: 6px 6px 16px 16px;
  color: var(--muted); font-size: 13px; letter-spacing: 3px;
  box-shadow: 0 10px 34px rgba(47,109,246,.18);
}
.rows { display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: min(100%, max(var(--hall-w, 720px), 430px)); }
.hall-row { display: flex; justify-content: center; gap: var(--seat-gap); transform: scale(var(--s, 1)); }
.seat {
  width: var(--seat-w); height: var(--seat-h); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #141f36; border: 1px dashed #24324f;   /* empty seat */
}
.seat.taken {
  background: var(--panel); border: 1px solid #2f6df6aa;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.seat-av { font-size: 25px; line-height: 1; }
.seat-nm {
  font-size: 10px; font-weight: 700; color: var(--muted);
  max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.seat.arrive { animation: seatIn .5s cubic-bezier(.2,.9,.2,1.3) both; }
@keyframes seatIn {
  0%   { opacity: 0; transform: scale(.4) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* the balcony: above and behind the room, like a theatre's upper tier */
.balcony { width: min(100%, max(var(--hall-w, 720px), 430px)); margin-top: 16px; }
.balcony-deck {
  background: linear-gradient(180deg, #17233d, #121c30);
  border: 1px solid #2b3d64; border-bottom: 0; border-radius: 16px 16px 0 0; padding: 12px 14px;
}
.balcony-label { color: var(--accent2); font-size: 14px; font-weight: 700; margin: 0 0 9px;
  text-align: center; }
.balcony-label small { color: var(--muted); font-weight: 400; }
.balcony-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--seat-gap); }
.balcony-seats:empty::after {
  content: "אף אחד בזום"; color: var(--muted); font-size: 13px; padding: 6px 2px;
}
.balcony-rail {
  height: 10px; border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(90deg, #2b3d64 0 3px, transparent 3px 11px), #1b2740;
  border: 1px solid #2b3d64; border-top: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

.doorway { width: min(100%, max(var(--hall-w, 720px), 430px)); margin-top: 18px; padding: 12px 14px;
  border: 1px dashed #7a2f3c; border-radius: 14px; background: #2a1720; }
.doorway-label { color: #ffb4b4; font-size: 14px; font-weight: 700; margin: 0 0 9px; }
.doorway-label small { color: var(--muted); font-weight: 400; }
.doorway-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--seat-gap); }

@media (max-width: 760px) {
  .hall { --seat-w: 52px; --seat-h: 50px; }
  .seat-av { font-size: 20px; }
  .seat-nm { max-width: 48px; font-size: 9px; }
}

/* ============ presence checkpoint (ATTENDANCE.md) ============ */
/* STUDENT: a full takeover, not a banner. Missing a checkpoint costs real marks, so it
   must not be possible to scroll past it or mistake it for part of the slide. */
#s-cp {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(circle at 50% 0%, #1b2b4d 0%, var(--bg) 70%);
  padding: 24px; text-align: center;
}
#s-cp h2 { margin: 0; font-size: 22px; }
.cp-ring {
  width: 86px; height: 86px; border-radius: 50%;
  border: 5px solid var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800;
}
.cp-btn {
  width: 100%; max-width: 300px; min-height: 130px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 52px; font-weight: 800; line-height: 1;
  border: none; border-radius: 22px; background: var(--accent); color: #fff;
  box-shadow: 0 10px 30px rgba(47,109,246,.45); cursor: pointer;
}
.cp-btn span { font-size: 21px; }
.cp-btn:active { transform: scale(.97); }
.cp-btn:disabled { opacity: .6; }
.cp-done {
  font-size: 25px; font-weight: 800; color: #7ee2a8;
  background: #14321f; border: 1px solid #2c6b45; border-radius: 16px; padding: 22px 30px;
}
.cp-note { color: var(--muted); font-size: 14px; margin: 0; }

/* PRESENTER: on the projector, so the whole room reads one clock */
#cp-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh;
  background: radial-gradient(circle at 50% 0%, #1b2b4d 0%, var(--bg) 72%);
}
.cp-o-head { font-size: 3vw; font-weight: 800; }
.cp-o-ring {
  width: 22vh; height: 22vh; border-radius: 50%; border: .9vh solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 10vh; font-weight: 800;
}
.cp-o-count { font-size: 2.4vw; color: var(--muted); }
.cp-o-count b { color: #7ee2a8; font-size: 4vw; }
.cp-o-ctrls { display: flex; gap: 1.4vw; margin-top: 1vh; }
.cp-o-ctrls button {
  font-size: 1.5vw; font-weight: 700; padding: 1.1vh 2.2vw; border-radius: 999px;
  border: 2px solid #2b3d64; background: var(--panel); color: var(--text); cursor: pointer;
}
.cp-o-ctrls button:hover { background: #22375f; }
#cp-o-end { border-color: #7a2f3c; }
.cp-o-ext { color: var(--accent2); font-size: 1.4vw; font-weight: 700; }
.att-cp { font-size: 12px; font-weight: 700; color: var(--muted);
  background: #17233d; border: 1px solid #2b3d64; border-radius: 999px; padding: 2px 9px; }
.att-cp.all { color: #7ee2a8; border-color: #2c6b45; background: #14321f; }

/* ============ my attendance (student) ============ */
/* Header chip: pushed to the far (left) end, away from the nickname, which is the game. */
#s-att {
  margin-inline-start: auto; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); background: #22375f; border: 1px solid #2b3d64;
  border-radius: 999px; padding: 6px 12px; min-height: 40px; cursor: pointer; white-space: nowrap;
}
/* Below the checkpoint takeover (70): a checkpoint must always win the screen. */
#s-att-sheet {
  position: fixed; inset: 0; z-index: 65; background: rgba(5, 10, 22, .78);
  display: flex; align-items: flex-end; justify-content: center;
}
.att-sheet-box {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid #2b3d64; border-bottom: 0;
  border-radius: 18px 18px 0 0; padding: 20px 18px 24px; text-align: center;
}
.att-sheet-box h2 { margin: 0 0 8px; font-size: 20px; }
.att-sheet-x {
  position: absolute; top: 10px; left: 10px; width: 40px; height: 40px;
  font-size: 18px; color: var(--text); background: transparent; border: 0; cursor: pointer;
}
.att-sheet-big { font-size: 20px; }
.att-sheet-big b { font-size: 40px; font-weight: 800; }
.att-sheet-sub { margin: 2px 0 12px; color: var(--muted); font-size: 14px; }
.att-sheet-goal { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 15px;
  background: #1b2b4d; line-height: 1.4; }
.att-sheet-goal.ok { background: #173d2c; color: #b9f0cf; }
.att-sheet-goal.warn { background: #4a1f28; color: #ffd0d0; }
.att-sheet-list { list-style: none; margin: 0; padding: 0; text-align: start; }
.att-sheet-list li { display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid #223052; font-size: 15px; }
.att-sheet-list li.no span:last-child { color: var(--muted); }
.att-sheet-list li.yes span:last-child { color: #b9f0cf; }
.att-today { font-size: 12px; background: var(--accent); color: #fff; border-radius: 999px;
  padding: 1px 8px; margin-inline-start: 4px; }
.att-sheet-foot { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.att-sheet-list li.future span:last-child { color: var(--muted); opacity: .6; }
.att-sheet-who { margin: 14px 0 0; font-size: 14px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.link-btn { font: inherit; font-size: 14px; font-weight: 700; color: var(--accent);
  background: transparent; border: 0; padding: 8px 6px; min-height: 40px; cursor: pointer;
  text-decoration: underline; }
.att-sheet-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.att-sheet-form input { flex: 1 1 180px; min-height: 44px; font-size: 16px; direction: ltr;
  padding: 8px 12px; border-radius: 10px; border: 1px solid #2b3d64; background: var(--bg);
  color: var(--text); }
.att-sheet-form button { min-height: 44px; padding: 0 18px; font: inherit; font-weight: 700;
  border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; }
.att-sheet-form .gate-err { flex-basis: 100%; }

/* ============ end-of-lecture board + bonus points (BONUS.md) ============ */
/* PRESENTER: the top 10 in two columns of five (1-5 on the right, RTL), so ten rows fit a
   1080p projector without shrinking below what the back row can read. */
/* A popup over the slide (David, 2026-10-19: option B of two mock-ups): the card fills ~82%
   of the stage and the slide stays faintly visible around it. Smaller than this and the back
   row loses the names. The backdrop is its own element, inside the stage only, so a click
   outside the card closes it and the control bar stays at full brightness. */
#summary-backdrop { position: absolute; inset: 0; z-index: 29; background: rgba(4, 8, 18, .45);
  cursor: pointer; }
#summary { position: absolute; inset: 8vh 9vw 9vh; z-index: 30; display: flex; flex-direction: column;
  align-items: center; gap: 1.6vh; padding: 2.5vh 3vw 7vh;
  border-radius: 28px; border: 2px solid rgba(255, 216, 104, .55);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(246, 166, 35, .18);
  background: radial-gradient(circle at 50% 0%, #1f3157 0%, #0f1a30 75%);
  animation: sumPopIn .28s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes sumPopIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.sum-title { font-size: 3.4vw; font-weight: 900; color: #ffd868; }
.sum-sub { font-size: 1.6vw; color: var(--muted); min-height: 2.2vw; }
.sum-list { list-style: none; margin: 0; padding: 0; width: 100%; flex: 1; min-height: 0;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr); gap: 1.2vh 2vw; }
.sum-row { display: flex; align-items: center; gap: 1vw; min-width: 0;
  background: var(--panel); border: 2px solid #2b3d64; border-radius: 14px; padding: 0 1.2vw; }
.sum-row.won { border-color: #ffd868; background: #2a2a1a; box-shadow: 0 0 22px rgba(246,166,35,.28); }
.sum-rank { font-size: 2.2vw; font-weight: 900; min-width: 3vw; text-align: center; }
.sum-name { flex: 1; min-width: 0; font-size: 1.9vw; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-pts { font-size: 1.7vw; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; }
.sum-tag { font-size: 1.15vw; font-weight: 800; white-space: nowrap; color: var(--muted);
  border: 1px solid #2b3d64; border-radius: 999px; padding: .3vh .8vw; }
.sum-tag.won { color: #0e1726; background: linear-gradient(135deg,#ffd868,#f6a623); border-color: transparent; }
.sum-empty { grid-row: 1 / -1; align-self: center; text-align: center; color: var(--muted); font-size: 2vw; }
.sum-ctrls { display: flex; align-items: center; gap: 1.2vw; flex-wrap: wrap; justify-content: center; }
.sum-ctrls button { font-size: 1.4vw; font-weight: 800; padding: 1vh 1.8vw; border-radius: 999px;
  border: 2px solid #2b3d64; background: var(--panel); color: var(--text); cursor: pointer; }
.sum-ctrls button:hover { background: #22375f; }
#sum-award { border: none; color: #0e1726; background: linear-gradient(135deg,#ffd868,#f6a623); }
#sum-undo { border-color: #7a2f3c; }
.sum-places { display: flex; align-items: center; gap: .6vw; font-size: 1.3vw; color: var(--muted); }
.sum-places input { width: 4.5vw; font-size: 1.5vw; font-weight: 800; text-align: center; padding: .6vh .4vw;
  border-radius: 10px; border: 1px solid #2c3d63; background: #16233f; color: var(--text); }

/* STUDENT: a takeover like the race, but scrollable (a list of ten plus your own card). */
#s-sum { position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: radial-gradient(circle at 50% 0%, #1b2b4d 0%, var(--bg) 70%); }
.s-sum-box { max-width: 520px; margin: 0 auto; padding: 18px 16px 32px; }
.s-sum-h { text-align: center; font-size: 20px; margin: 18px 0 10px; }
.s-sum-pos { text-align: center; font-size: 20px; font-weight: 800; background: #17324a;
  border: 1px solid var(--accent2); border-radius: 14px; padding: 14px 12px; line-height: 1.5; }
.s-sum-pos b { font-size: 30px; color: var(--accent2); }
.s-sum-pos span { display: block; font-size: 15px; font-weight: 600; color: var(--muted); }
.s-sum-win { position: relative; overflow: hidden; text-align: center; border-radius: 18px;
  padding: 20px 14px; color: #0e1726; background: linear-gradient(135deg,#ffd868,#f6a623);
  box-shadow: 0 10px 30px rgba(246,166,35,.35); }
.s-sum-win-big { font-size: 56px; line-height: 1; animation: cdPop .6s cubic-bezier(.2,.9,.2,1.3); }
.s-sum-win-t { font-size: 26px; font-weight: 900; margin-top: 6px; }
.s-sum-win-s { font-size: 16px; font-weight: 700; margin-top: 4px; }
#s-sum .lb-row.won { border-color: #f6a623; }

/* bonus box inside the "my attendance" sheet */
.bn-box { margin: 0 0 16px; padding: 14px 12px; border-radius: 12px; background: #17233d;
  border: 1px solid #2b3d64; text-align: start; }
.bn-h { margin: 0 0 4px; font-size: 17px; text-align: center; }
.bn-total { text-align: center; font-size: 17px; margin-bottom: 8px; }
.bn-total b { font-size: 34px; font-weight: 800; color: #ffd868; }
.bn-lines, .bn-talks { list-style: none; margin: 0; padding: 0; }
.bn-lines li, .bn-talks li { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid #223052; font-size: 15px; }
.bn-talks li { font-size: 14px; color: var(--muted); }
.bn-talks li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bn-talks li span:last-child { white-space: nowrap; }
.bn-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bn-form input { min-height: 44px; font-size: 16px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid #2b3d64; background: var(--bg); color: var(--text); font-family: inherit; }
.bn-form button[type=submit] { min-height: 44px; margin-top: 4px; font: inherit; font-weight: 700;
  border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; }
.bn-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.bn-foot { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; text-align: center; }

/* teacher view: /bonus */
#bonus { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
#bonus a { color: var(--accent2); }
#bonus section { margin: 0 0 30px; }
#bonus h2 { font-size: 20px; margin: 0 0 10px; }
.bn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bn-table th, .bn-table td { padding: 7px 8px; border-bottom: 1px solid #223052; text-align: start; vertical-align: top; }
.bn-table th { color: var(--muted); font-weight: 700; }
.bn-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.bn-table .em { direction: ltr; text-align: left; unicode-bidi: isolate; }
.bn-table tr.undone td { opacity: .45; text-decoration: line-through; }
.bn-table td.tot { font-weight: 800; color: #ffd868; }
.bn-table form { display: inline; }
.bn-table button { font: inherit; font-size: 13px; color: var(--text); background: var(--panel);
  border: 1px solid #7a2f3c; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.bn-skip { color: var(--muted); font-size: 12px; }
.bn-wrap { overflow-x: auto; }

/* the checkpoint rule, stated once above the lecture list */
.att-sheet-rule { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* a verdict plus its "(3 מתוך 4 בדיקות)" tally may wrap on a small phone; keep it to the end side */
.att-sheet-list li span:last-child { text-align: end; }

/* emoji slide (2026-10-30): projector rows of distinct drawings + phone cards */
/* one line of tiles per emoji: a second line pushed the third emoji off the projector (L03 2026-11-01),
   so present.js caps the tiles at what fits across (EMO_MAX_TILES) and the rest become "+N" */
.emo-rows { display: flex; flex-direction: column; gap: 1.6vh; }
.emo-row { display: flex; align-items: center; gap: 1.4vw; background: var(--panel);
  border: 2px solid #2b3d64; border-radius: 16px; padding: 1.2vh 1.2vw; }
.emo-head { width: 15vw; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  gap: .4vh; text-align: center; }
.emo-src { font-size: 6vh; line-height: 1; }
.emo-meta { font-size: 1.15vw; color: var(--muted); line-height: 1.3; }
.emo-meta b { display: block; color: var(--text); unicode-bidi: isolate; font-size: 1.3vw; }
.emo-nvar { font-size: 1.3vw; font-weight: 800; color: var(--accent2); }
.emo-tiles { flex: 1; display: flex; flex-wrap: nowrap; overflow: hidden; gap: .8vw; align-items: stretch; }
.emo-tile { width: 8vw; background: #0e1726; border: 1px solid #2b3d64; border-radius: 12px;
  padding: .6vh .3vw; text-align: center; display: flex; flex-direction: column; align-items: center; }
.emo-tile img { width: 9vh; height: 9vh; }
.emo-cnt { font-size: 3vh; font-weight: 800; line-height: 1.1; }
.emo-devs { font-size: 1.7vh; color: var(--muted); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.emo-more { align-self: center; font-size: 1.6vw; color: var(--muted); padding: 0 1vw; }

.emo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.emo-card { background: var(--panel); border: 2px solid #2b3d64; border-radius: 14px; padding: 10px 6px; text-align: center; }
.emo-glyph { font-size: 64px; line-height: 1.15; }
.emo-code { font-family: Consolas, "Courier New", monospace; color: var(--accent2); font-size: 14px; direction: ltr; }
.emo-name { color: var(--muted); font-size: 13px; line-height: 1.3; }
.emo-ref { width: 7vh; height: 7vh; }
.emo-refcap { font-size: 1vw; color: var(--accent2); }
.emo-card-ref { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px;
  color: var(--accent2); font-size: 12px; }
.emo-card-ref img { width: 34px; height: 34px; }

/* hardware slide (2026-10-31): projector room dashboard + the phone's own report */
.hw-dash { display: flex; flex-direction: column; gap: 1.4vh; height: 100%; }
.hw-bigs { display: flex; gap: 1.2vw; justify-content: center; }
.hw-big { flex: 1; max-width: 22vw; background: var(--panel); border: 2px solid #2b3d64; border-radius: 16px;
  padding: .8vh 1vw; text-align: center; display: flex; flex-direction: column; }
.hw-big b { font-size: 4.6vh; font-weight: 900; color: var(--accent2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hw-big span { font-size: 1.15vw; color: var(--muted); }
.hw-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2vh 1vw; min-height: 0; }
.hw-card { background: var(--panel); border: 2px solid #2b3d64; border-radius: 14px; padding: 1vh 1vw;
  display: flex; flex-direction: column; gap: .5vh; min-width: 0; overflow: hidden; }
.hw-title { font-size: 1.3vw; font-weight: 800; }
.hw-bar { display: grid; grid-template-columns: 9vw 1fr 2.6vw; align-items: center; gap: .5vw; font-size: 2vh; }
.hw-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-track { height: 1.6vh; background: #0e1726; border-radius: 6px; overflow: hidden; }
.hw-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 6px; transition: width .5s; }
.hw-n { font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.hw-unk { color: var(--muted); }
.hw-unk .hw-track i { background: #4a5878; }
.hw-note { margin-top: auto; font-size: 1.6vh; color: var(--muted); }
.hw-wait { color: var(--muted); font-size: 2vh; }
.hw-teaser { text-align: center; font-size: 1.25vw; color: #ffd868; }

.hw-cap { color: var(--muted); font-size: 15px; margin-bottom: 8px; text-align: center; }
.hw-mine { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; }
.hw-mine th, .hw-mine td { padding: 9px 12px; border-bottom: 1px solid #223052; font-size: 15px; text-align: start; }
.hw-mine th { color: var(--muted); font-weight: 600; width: 42%; }
.hw-mine td { font-weight: 700; overflow-wrap: anywhere; text-align: left; }