/*
  Reward board mockup.
  The board is laid out on a fixed 1920x1080 stage. board.js scales the stage
  with a CSS transform so it fills any screen, letterboxed if the shape differs.
  Every temperature color below is a CSS variable that board.js rewrites a little
  each frame, which is how hot and cold fade in without a hard cut.
  Each board (the full screen one, or one tile on the wall) is an element with
  class "rb"; its color variables and its data-pace, data-temp, data-down,
  data-break and data-msg attributes sit on that element, so every tile has its
  own look.
  The wall view and its tiles are styled at the end of this file.
  Older smart TV browsers are a target, so this file avoids newer CSS such as
  inset, flex gap and :has.
*/

:root {
  --bg: rgb(19, 21, 24);
  --bg-hi: rgb(30, 33, 38);
  --ink: rgb(243, 241, 236);
  --muted: rgb(150, 150, 146);
  --track: rgb(36, 39, 44);
  --fill-a: rgb(212, 128, 30);
  --fill-b: rgb(255, 192, 82);
  --heat: 0;
  --cold: 0;
  --face: "Bahnschrift", "Segoe UI Variable Display", "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--face);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-hi) 0%, var(--bg) 64%);
}

.layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- temperature light ---------- */

.heat-glow {
  opacity: var(--heat);
  background:
    radial-gradient(70% 46% at 50% 112%, rgba(255, 104, 20, 0.55), rgba(255, 104, 20, 0) 70%),
    radial-gradient(26% 70% at -6% 62%, rgba(255, 138, 40, 0.42), rgba(255, 138, 40, 0) 70%),
    radial-gradient(26% 70% at 106% 62%, rgba(255, 138, 40, 0.42), rgba(255, 138, 40, 0) 70%);
}

.heat-flicker {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: radial-gradient(60% 40% at 50% 108%, rgba(255, 196, 70, 0.38), rgba(255, 196, 70, 0) 70%);
  animation: flicker 2.3s ease-in-out infinite alternate;
}

@keyframes flicker {
  0%   { opacity: 0.55; }
  30%  { opacity: 1; }
  55%  { opacity: 0.7; }
  80%  { opacity: 0.95; }
  100% { opacity: 0.6; }
}

.cold-glow {
  opacity: var(--cold);
  background: radial-gradient(78% 78% at 50% 50%, rgba(12, 44, 110, 0) 38%, rgba(18, 70, 160, 0.6) 100%);
}

/* ---------- board layout ---------- */

.board {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 52px 96px 48px;
  display: flex;
  flex-direction: column;
  transition: opacity 0.5s ease;
}

.k {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.station {
  font-size: 136px;
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.clock { text-align: right; }

.clock-time {
  font-size: 96px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clock-time small {
  font-size: 44px;
  font-weight: 600;
  margin-left: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.clock-date {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- the count ---------- */

.count {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.side-left { justify-self: start; }
.side-right { justify-self: end; text-align: right; }

.side-v {
  margin-top: 8px;
  font-size: 130px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.side-v small, .count-goal small {
  font-size: 44px;
  font-weight: 600;
  margin-left: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.center { text-align: center; }
.center-k { margin-bottom: 4px; }

.num-wrap { position: relative; display: inline-block; }

.count-num {
  position: relative;
  z-index: 1;
  font-size: 300px;
  font-weight: 700;
  line-height: 0.74;
  margin-top: 14px;
  margin-bottom: 34px;
  white-space: nowrap;
  letter-spacing: -0.055em;
  padding-right: 0.055em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 90;
  transform-origin: 50% 60%;
}

.count-num.bump { animation: bump 0.24s ease-out; }

@keyframes bump {
  0%   { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.count-goal {
  margin-top: 0;
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
}

.count-goal b { color: var(--ink); font-weight: 700; }
.count-goal small { font-size: 72px; font-weight: 500; margin-left: 0; letter-spacing: 0; }

/* Station down: "DOWN: <reason>" takes the place of the label above the number,
   so the layout does not move. Hidden while the station runs. */
.down-note {
  display: none;
  margin-bottom: 2px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.rb[data-down="1"] .down-note { display: block; }
.rb[data-down="1"] .center-k { display: none; }

.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  border: 12px solid var(--fill-b);
  opacity: 0;
  pointer-events: none;
}

.ring.big { border-width: 22px; }
.ring.go { animation: pulse 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); }

@keyframes pulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.chip {
  position: absolute;
  left: 100%;
  top: 2%;
  margin-left: 24px;
  font-size: 96px;
  font-weight: 700;
  color: var(--fill-b);
  white-space: nowrap;
  opacity: 0;
}

.chip.show { animation: chip 1.8s ease-out forwards; }

@keyframes chip {
  0%   { opacity: 0; transform: translateY(30px); }
  15%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ---------- pace pill ---------- */

.pill {
  display: inline-block;
  margin-top: 14px;
  height: 112px;
  line-height: 102px;
  padding: 0 40px;
  border-radius: 56px;
  border: 5px solid rgba(255, 255, 255, 0.5);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s;
}

.pill.long { font-size: 46px; padding: 0 32px; }

.rb[data-pace="ahead"] .pill,  .plant[data-pace="ahead"] .pill  { background-color: #ff7424; border-color: #ff9a4a; color: #1c0a02; }
.rb[data-pace="behind"] .pill, .plant[data-pace="behind"] .pill { background-color: #b9e0ff; border-color: #dff1ff; color: #071a36; }
.rb[data-pace="goal"] .pill,   .plant[data-pace="goal"] .pill   { background-color: #ffd24a; border-color: #ffe68f; color: #1f1400; box-shadow: 0 0 44px rgba(255, 200, 60, 0.7); }
.plant[data-pace="break"] .pill  { background-color: #3a4558; border-color: #66748c; color: #dfe6ef; }
.rb[data-pace="down"] .pill   { background-color: #5c5d60; border-color: #8a8b8e; color: #f0f0ec; }

/* ---------- progress bar ---------- */

.progress { padding-top: 60px; }

.bar {
  position: relative;
  height: 112px;
  border-radius: 18px;
  background: var(--track);
  box-shadow:
    inset 0 3px 12px rgba(0, 0, 0, 0.5),
    0 0 calc(var(--heat) * 70px) rgba(255, 110, 24, calc(var(--heat) * 0.55));
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--fill-a), var(--fill-b));
  transition: box-shadow 1s ease;
}

/* glass highlight along the top of the fill */
.bar-fill:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44%;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

/* goal met: gold glow plus a slow sheen so the bar reads as finished */
.bar.met .bar-fill {
  box-shadow: 0 0 50px rgba(255, 200, 60, 0.85), 0 0 120px rgba(255, 170, 30, 0.45);
}

.bar.met .bar-fill:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  animation: sheen 2.6s ease-in-out infinite;
}

@keyframes sheen {
  0%   { transform: translateX(0); }
  100% { transform: translateX(460%); }
}

.notch {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: rgba(0, 0, 0, 0.38);
}

.pace {
  position: absolute;
  top: -30px;
  bottom: -30px;
  width: 8px;
  margin-left: -4px;
  border-radius: 4px;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--bg);
  z-index: 2;
}

.pace span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 10px;
  transform: translateX(-50%);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.scale {
  position: relative;
  height: 34px;
  margin-top: 38px;
  font-size: 30px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.scale span { position: absolute; top: 0; transform: translateX(-50%); }
.scale span:first-child { transform: none; }
.scale span:last-child { transform: translateX(-100%); }

/* ---------- bottom strip ---------- */

.strip {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.8fr 0.95fr;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 2px solid rgba(255, 255, 255, 0.09);
}

.cell .v {
  margin-top: 10px;
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cell.mid { text-align: center; }
.cell.end { text-align: right; }

/* The streak: trusses in a row with no long idle gap. It warms at 10, glows at 25
   and burns at 50; it dims once the gap since the last truss is over the setting. */
.streak-v { transition: color 0.6s, text-shadow 0.6s, opacity 0.6s; }
.rb[data-streak="1"] .streak-v { color: #ffd36a; text-shadow: 0 0 14px rgba(255, 190, 60, 0.55); }
.rb[data-streak="2"] .streak-v { color: #ffc23a; text-shadow: 0 0 20px rgba(255, 170, 30, 0.8), 0 0 42px rgba(255, 120, 20, 0.45); }
.rb[data-streak="3"] .streak-v {
  color: #fff1b8;
  text-shadow: 0 0 18px rgba(255, 210, 90, 0.95), 0 0 46px rgba(255, 140, 30, 0.8), 0 0 80px rgba(255, 80, 10, 0.5);
  animation: streak-burn 1.6s ease-in-out infinite alternate;
}
.rb[data-streak-live="0"] .streak-v { opacity: 0.45; text-shadow: none; animation: none; }
@keyframes streak-burn {
  0%   { text-shadow: 0 0 16px rgba(255, 210, 90, 0.9), 0 0 40px rgba(255, 140, 30, 0.7); }
  100% { text-shadow: 0 0 24px rgba(255, 230, 140, 1), 0 0 64px rgba(255, 140, 30, 0.95), 0 0 96px rgba(255, 80, 10, 0.6); }
}

/* Floor message: one line across the strip, shown only while a message is set. */
.msg {
  display: none;
  grid-column: 1 / -1;
  margin-bottom: 16px;
  padding: 6px 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  overflow: hidden;
}

.rb[data-msg="1"] .msg { display: flex; align-items: center; }

.msg .k { margin-right: 28px; }

.msg-box {
  position: relative;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.msg-text {
  display: inline-block;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}

.msg-text.scroll {
  padding-left: 100%;
  animation: msg-scroll var(--msg-time, 20s) linear infinite;
}

@keyframes msg-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--msg-shift, -2000px)); }
}

/* With a message showing, the board gives up a little height elsewhere. */
.rb[data-msg="1"] .count-num { font-size: 244px; margin-bottom: 28px; }
.rb[data-msg="1"] .count-goal, .rb[data-msg="1"] .count-goal small { font-size: 64px; }
.rb[data-msg="1"] .progress { padding-top: 48px; }
.rb[data-msg="1"] .strip { margin-top: 24px; padding-top: 14px; }

/* ---------- banners and the goal headline ---------- */

.banner {
  position: absolute;
  left: 0;
  top: 350px;
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 150px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  visibility: hidden;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 3;          /* above the number, which sits at z-index 1 */
}

.banner.show {
  visibility: visible;
  animation: banner 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes banner {
  0%   { transform: translateX(-100%); }
  14%  { transform: translateX(0); }
  84%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

.banner[data-kind="milestone"] { background: #ffc845; color: #1d1200; }
.banner[data-kind="behind"]    { background: #bfe3ff; color: #06182f; }
.banner[data-kind="caught"]    { background: #ff8a2a; color: #1d0b01; }
.banner[data-kind="streak"]    { background: #1d1200; color: #ffd36a; text-shadow: 0 0 24px rgba(255, 180, 40, 0.8); }

/* A notice, such as a goal change: a thinner band in plain white, not a celebration. */
.banner[data-kind="notice"] {
  top: 404px;
  height: 120px;
  font-size: 76px;
  letter-spacing: 0.03em;
  background: #f3f1ec;
  color: #15171a;
}

.goal-headline {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 480px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffd84f;
  text-shadow:
    0 0 24px rgba(255, 200, 60, 0.9),
    0 0 80px rgba(255, 150, 30, 0.65),
    0 0 160px rgba(255, 120, 20, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.goal-headline.show {
  visibility: visible;
  animation: goal-in 4s ease forwards;
}

@keyframes goal-in {
  0%   { opacity: 0; transform: scale(0.7); }
  10%  { opacity: 1; transform: scale(1.05); }
  18%  { transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

.rb.goal-moment .board { opacity: 0.18; }

/* ---------- on break ----------
   board.js sets data-break on the board: "1" on break, "back" for the 3 seconds of
   BACK TO WORK, "0" otherwise. Colors fade by the --bg and other variables (2 seconds);
   here the number shrinks, the side figures dim and the headline fades in.
   Only transform and opacity move, which weak TV browsers handle without relayout. */

.center, .side { transition: transform 1.2s ease, opacity 1.2s ease; }

.rb[data-break="1"] .center, .rb[data-break="back"] .center { transform: translateY(96px) scale(0.5); }
.rb[data-break="1"] .side, .rb[data-break="back"] .side { opacity: 0.4; }

.break-head {
  position: absolute;
  left: 0;
  top: 176px;
  width: 100%;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.rb[data-break="1"] .break-head, .rb[data-break="back"] .break-head {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease;
}

/* A slow breathing glow behind the headline, so the screen never looks frozen. */
.break-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1400px;
  height: 460px;
  margin: -230px 0 0 -700px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(150, 178, 222, 0.32), rgba(150, 178, 222, 0) 72%);
  animation: breathe 4.5s ease-in-out infinite alternate;
}

@keyframes breathe {
  0%   { opacity: 0.25; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1.05); }
}

.break-title {
  position: relative;
  font-size: 156px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.04em;
  padding-left: 0.04em;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0 36px rgba(160, 190, 236, 0.35);
}

.break-line {
  position: relative;
  margin-top: 16px;
  min-height: 1em;
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--muted);
}

/* ---------- demo only ---------- */

.demo-hint {
  position: absolute;
  left: 0;
  width: 100%;
  top: 18px;
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.demo-hint.show { opacity: 0.8; }

.demo-help {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 640px;
  padding: 26px 32px 22px;
  border-radius: 14px;
  background: rgba(10, 11, 13, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 24px;
  line-height: 1.3;
  color: #e9e7e2;
  display: none;
}

.demo-help.open { display: block; }

.demo-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9b9b96;
  margin-bottom: 12px;
}

.demo-help table { border-collapse: collapse; width: 100%; }
.demo-help td { padding: 5px 0; vertical-align: top; }
.demo-help td:first-child { width: 120px; white-space: nowrap; }

.demo-help kbd {
  display: inline-block;
  min-width: 38px;
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--face);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.demo-status {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 21px;
  color: #b9b7b1;
}

/* ---------- wall view (wall.html): every station at once, five tiles on one 1920x1080 stage ---------- */

#wall-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  background: #0e1012;
}

/* The plant-wide strip across the top. */
.plant {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 16px;
  height: 92px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-radius: 16px;
  background: #181a1e;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.plant .k { font-size: 18px; letter-spacing: 0.18em; }

.plant-title {
  margin-right: 40px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.plant-cell { margin-right: 40px; }

.plant-cell .v {
  margin-top: 4px;
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.plant-cell .v small {
  margin-left: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--muted);
}

.plant-bar {
  position: relative;
  flex: 1;
  height: 26px;
  margin-right: 36px;
  border-radius: 8px;
  background: #24272c;
}

.plant-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #d4801e, #ffc052);
  transition: width 0.6s ease;
}

.plant[data-pace="goal"] .plant-fill { background: linear-gradient(90deg, #f09614, #ffe882); }

.plant-pace {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: #f3f1ec;
  box-shadow: 0 0 0 3px #181a1e;
}

.plant .pill {
  margin-top: 0;
  margin-right: 34px;
  height: 60px;
  line-height: 52px;
  padding: 0 24px;
  border-radius: 30px;
  border-width: 4px;
  font-size: 30px;
}

.plant .clock { min-width: 200px; }
.plant .clock-time { font-size: 50px; }
.plant .clock-time small { font-size: 24px; margin-left: 8px; }
.plant .clock-date { margin-top: 6px; font-size: 16px; }

/* One tile: a small copy of the full board with its own colors and effects. */
.tile {
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.07);
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-hi) 0%, var(--bg) 70%);
  color: var(--ink);
}

.tile .board { padding: 18px 26px 16px; }
.tile .k { font-size: 17px; letter-spacing: 0.16em; }

.tile .top { align-items: flex-start; }
.tile .station { font-size: 48px; line-height: 0.92; }

.tile-last { text-align: right; }
.tile-last .v {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 600;
  white-space: nowrap;
}

.tile-count {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tile .count-num {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 168px;
  line-height: 0.8;
}

.tile .ring {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-width: 7px;
}

.tile .ring.big { border-width: 12px; }

.tile .chip {
  top: -6%;
  margin-left: 12px;
  font-size: 46px;
}

.tile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tile .count-goal { font-size: 32px; }
.tile .count-goal small { font-size: 32px; }

.tile .pill {
  margin-top: 0;
  height: 54px;
  line-height: 46px;
  padding: 0 22px;
  border-radius: 27px;
  border-width: 4px;
  font-size: 28px;
}

.tile .pill.long { font-size: 24px; padding: 0 16px; }

.tile .down-note {
  margin-top: 8px;
  font-size: 24px;
  text-align: center;
}

/* A down tile makes room for its reason line. */
.tile[data-down="1"] .count-num { font-size: 140px; }
.tile[data-down="1"] .progress { padding-top: 12px; }
.tile[data-down="1"] .tile-foot { margin-top: 10px; }

.tile .progress { padding-top: 18px; }

.tile .bar {
  height: 40px;
  border-radius: 10px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 calc(var(--heat) * 28px) rgba(255, 110, 24, calc(var(--heat) * 0.55));
}

.tile .bar-fill, .tile .bar-fill:after { border-radius: 10px; }
.tile .bar-fill:after { border-radius: 10px 10px 0 0; }

.tile .bar.met .bar-fill { box-shadow: 0 0 22px rgba(255, 200, 60, 0.85), 0 0 48px rgba(255, 170, 30, 0.45); }

.tile .notch { width: 3px; margin-left: -1px; }

.tile .pace {
  top: -10px;
  bottom: -10px;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  box-shadow: 0 0 0 3px var(--bg);
}

.tile .pace span { display: none; }

.tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
}

.tile-foot .v {
  margin-left: 10px;
  font-size: 28px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tile-foot small { font-size: 18px; font-weight: 600; color: var(--muted); margin-left: 4px; }

.tile .banner {
  top: 36%;
  height: 92px;
  font-size: 58px;
}

.tile .banner[data-kind="notice"] {
  top: 40%;
  height: 52px;
  font-size: 25px;
}

/* On break, inside the tile: the headline sits under the station name, the number shrinks below it. */
.tile .tile-count { transition: transform 1.2s ease; }
.tile[data-break="1"] .tile-count, .tile[data-break="back"] .tile-count { transform: translateY(48px) scale(0.46); }
.tile .pill { transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s, opacity 1.2s ease; }
.tile[data-break="1"] .pill, .tile[data-break="back"] .pill { opacity: 0.4; }
.tile .break-head { top: 66px; }
.tile .break-glow { width: 520px; height: 170px; margin: -85px 0 0 -260px; }
.tile .break-title { font-size: 60px; text-shadow: 0 0 16px rgba(160, 190, 236, 0.35); }
.tile .break-line { margin-top: 6px; font-size: 22px; }

.tile .goal-headline {
  font-size: 190px;
  text-shadow:
    0 0 12px rgba(255, 200, 60, 0.9),
    0 0 36px rgba(255, 150, 30, 0.65),
    0 0 70px rgba(255, 120, 20, 0.4);
}

/* The floor message on the wall: one line along the bottom, shown only while a message is set. */
.wall-msg {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 16px;
  height: 60px;
  display: none;
  align-items: center;
  padding: 0 26px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  white-space: nowrap;
}

#wall-stage[data-msg="1"] .wall-msg { display: flex; }
#wall-stage .demo-hint { left: 24px; width: 300px; top: 760px; text-align: left; line-height: 1.5; }
.wall-msg .k { margin-right: 22px; font-size: 20px; }
.wall-msg .msg-text { font-size: 34px; }

/* ---------- live mode (served by the board server) ---------- */

/* A quiet line when the live feed is reconnecting, or a table is not found (feed.js). */
.feed-note {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 20;
  max-width: 90%;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(20, 22, 26, 0.85);
  color: #cfd3da;
  font-family: var(--face);
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
}
.feed-note.show { display: block; }
.feed-note.bad { background: rgba(138, 28, 28, 0.92); color: #fff; }