/* Pod page: the pod screen plus its join panel. Kept to CSS that iOS 12 Safari
   understands: no inset, dvh, flex gap, aspect-ratio or :is(). */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #e8eef6;
  font: 16px/1.4 -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
.muted { color: #8a97a8; }
.small { font-size: 14px; }

/* ---------- pod screen ---------- */
#pad {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: #000;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Three looks, picked on the coach's screen: body.look-beacon (default), look-target and
   look-scoreboard. #pad carries the state: st-idle, st-lit, st-dark (armed, not lit),
   st-count, st-result, st-wrong or st-note, plus "nogo" for a light not to answer.
   Beacon: a dark screen with the pod's number outlined, so it reads from across the
   court; lit, the whole screen is one colour; a hit sends a wave out from the touch. */
#podCore {
  position: relative; z-index: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
#podNum { font-weight: 900; font-size: 46vmin; line-height: 1; color: transparent; -webkit-text-stroke: 0.9vmin #2b3440; }
#podTop {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  padding: 18px;
}
#topNum { display: none; }
#podTag { color: #6b7280; font-size: 13px; font-weight: 700; }
#podRoom { display: none; }
#podDot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #6b7280; vertical-align: 1px; }
#podDot.on { background: #4ade80; }
#podUnit { margin-top: 2vmin; font-weight: 800; font-size: 5vmin; letter-spacing: 1vmin; color: #c6f432; text-transform: uppercase; }
#podIdle, #podGo, #podFoot { display: none; }
/* Below the centre without pushing it up: the middle stays still on every screen. */
#podBadge, #podSub { position: absolute; z-index: 1; left: 0; right: 0; text-align: center; }

/* ---------- Target: the number inside rings; lit, a white disc on the colour ---------- */
.look-target #topNum {
  display: block; background: #c6f432; color: #0b1117; font-weight: 900; font-size: 14px;
  padding: 4px 10px; border-radius: 999px;
}
.look-target #podTag { color: #8b9bad; }
.look-target #podCore {
  width: 70vmin; height: 70vmin; border-radius: 50%; box-sizing: border-box;
  border: 0.8vmin solid #26343f;
}
/* The outer ring: a border only, so the colour fading out behind it shows through. */
.look-target #podCore:before {
  content: ''; position: absolute; top: -10vmin; left: -10vmin; right: -10vmin; bottom: -10vmin;
  border-radius: 50%; border: 0.8vmin solid #1a2430; pointer-events: none;
}
.look-target #pad.st-lit #podCore:before { border-color: rgba(255, 255, 255, 0.3); }
.look-target #podNum { color: #e6edf3; -webkit-text-stroke: 0; font-size: 30vmin; }
.look-target #pad.st-lit #podCore {
  background: rgba(255, 255, 255, 0.92); border-color: transparent;
}
.look-target #pad.st-lit #podNum { color: rgba(11, 17, 23, 0.8) !important; }
.look-target #pad.st-lit #podTag, .look-target #pad.st-lit #podStatus { color: rgba(0, 0, 0, 0.55); }
.look-target #podSym { font-size: 34vmin; }
.look-target #pad.st-count #podCore { border: 1.6vmin solid #c6f432; border-right-color: #1f2b38; border-bottom-color: #1f2b38; }
.look-target #pad.st-result #podCore { border: 1.6vmin solid #4ade80; }
.look-target #pad.st-wrong #podCore { border: 1.6vmin solid #ef4444; }
.look-target #pad.st-result #podMsg { color: #fff !important; font-size: 17vmin; }
.look-target #pad.st-result #podUnit { color: #4ade80 !important; font-size: 5vmin; }
.look-target #podMsg.huge { font-size: 20vmin; }
.look-target #pad.st-count #podMsg.huge { font-size: 36vmin; }
.look-target #pad.st-wrong #podMsg.huge { font-size: 34vmin; }
.look-target #podSub { top: 50%; margin-top: 47vmin; color: #e6edf3; font-size: 16px; font-weight: 700; }
.look-target #pad.st-result #podUnit { letter-spacing: 0.6vmin; text-transform: uppercase; }

/* ---------- Scoreboard: a top and bottom bar like an arena clock ---------- */
.look-scoreboard #pad { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.look-scoreboard #podTop { padding: 16px 18px 12px; border-bottom: 1px solid #26262a; }
.look-scoreboard #topNum { display: block; font-weight: 900; font-size: 34px; line-height: 1; color: #ff6b2c; }
.look-scoreboard #podTag { color: #a1a1a6; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; }
.look-scoreboard #podDot { display: none; }
.look-scoreboard #podRoom { display: inline; }
.look-scoreboard #pad.st-idle #podNum { display: none; }
.look-scoreboard #pad.st-idle #podIdle { display: block; text-align: center; }
.look-scoreboard #podIdle b { display: block; font-weight: 800; font-size: 20vmin; line-height: 1; letter-spacing: 1vmin; color: #f4f4f2; text-transform: uppercase; }
.look-scoreboard #podIdle span { display: block; margin-top: 2vmin; font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; font-size: 15px; font-weight: 600; color: #a1a1a6; }
.look-scoreboard #podNum { color: #f4f4f2; -webkit-text-stroke: 0; font-size: 50vmin; }
.look-scoreboard #pad.st-lit #podGo { display: block; font-weight: 900; font-size: 44vmin; line-height: 1; color: rgba(0, 0, 0, 0.5); }
.look-scoreboard #pad.st-lit.nogo #podGo { display: none; }
.look-scoreboard #pad.st-lit #podTop, .look-scoreboard #pad.st-lit #podFoot { border-color: rgba(0, 0, 0, 0.15); }
.look-scoreboard #pad.st-lit #topNum, .look-scoreboard #pad.st-lit #podTag,
.look-scoreboard #pad.st-lit #podFoot span, .look-scoreboard #pad.st-lit #podStatus { color: rgba(0, 0, 0, 0.55); }
.look-scoreboard #podMsg { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 900; letter-spacing: 0; }
.look-scoreboard #pad.st-count #podMsg { color: #ff6b2c !important; font-size: 60vmin; }
.look-scoreboard #pad.st-result #podMsg { color: #f4f4f2 !important; font-size: 34vmin; }
.look-scoreboard #pad.st-result #podUnit { color: #a1a1a6 !important; font-size: 5vmin; letter-spacing: 1vmin; margin-top: 0; text-transform: uppercase; }
.look-scoreboard #podBadge {
  top: 50%; margin-top: 26vmin; left: 50%; right: auto; white-space: nowrap;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  padding: 6px 12px; border-radius: 6px;
  font-weight: 800; font-size: 18px; letter-spacing: 1px; text-transform: uppercase;
  background: #5be38a; color: #04130a;
}
.look-scoreboard #podBadge.slower { background: #fbbf24; color: #1f1400; }
.look-scoreboard #podBadge.first { background: #26262a; color: #f4f4f2; }
/* While a drill runs, the gaps between lights show the pod number, not "Ready". */
.look-scoreboard #pad.st-idle.running #podIdle { display: none; }
.look-scoreboard #pad.st-idle.running #podNum { display: block; color: #2a2a2e; }
.look-scoreboard #podFoot {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 12px 18px 18px; border-top: 1px solid #26262a;
  font-weight: 700; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: #a1a1a6;
}
.look-scoreboard #footBest { color: #ffd84d; }
.look-scoreboard #podStatus { bottom: 64px; font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; }
#ripples { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
/* The hit glow: a soft-edged bloom (pod.js sets its colour) that grows a little and fades. */
.glow {
  position: absolute; border-radius: 50%; opacity: 1;
  -webkit-transform: scale(0.25); transform: scale(0.25);
  -webkit-transition: -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 2.2s ease-in-out;
  transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 2.2s ease-in-out;
}
#podSym { font-weight: 900; font-size: 50vmin; line-height: 1; color: rgba(0, 0, 0, 0.45); }
#podMsg { font-weight: 800; font-size: 24vmin; line-height: 1; color: #fff; letter-spacing: -0.5vmin; font-family: ui-monospace, Menlo, Consolas, monospace; }
#podMsg.huge { font-size: 52vmin; font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; font-weight: 900; letter-spacing: 0; }
#podStatus {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1;
  padding: 0 16px; text-align: center; color: #4b5563; font-size: 13px; font-weight: 600;
}
/* Sits over the dark pad without blocking it: taps go through to the pad. */
#hint {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1;
  padding: 16px; text-align: center; color: #8a97a8; font-size: 15px;
  pointer-events: none;
}
#hint p { margin: 0 0 6px; }
#hint a { color: var(--acc); font-size: 14px; pointer-events: auto; }
#senseRow { font-size: 14px; line-height: 22px; }
#senseRow a { padding: 4px 2px; }
#senseRow a.on { color: #fff; font-weight: 700; text-decoration: underline; }
#senseMeter { display: inline-block; width: 72px; height: 8px; border-radius: 4px; background: #1f2937; vertical-align: middle; overflow: hidden; }
#senseBar { display: block; height: 100%; width: 0; background: #8ab4f8; }
#senseBar.hot, #senseLevel.hot { background: #22c55e; color: #22c55e; }
#dupe {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: #0b0f14; padding: 24px; text-align: center;
}
#dupe > * { margin: 8px 0; }
.btn {
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 12px; padding: 16px 24px;
  font: inherit; font-weight: 600; font-size: 18px;
  background: #22c55e; color: #04130a; text-decoration: none;
}

/* ---------- join panel ---------- */
#join {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
  background: #0b0f14; font-size: 17px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#join main { max-width: 480px; margin: 0 auto; padding: 24px 16px 40px; }
#join h1 { font-size: 28px; margin: 8px 0 4px; }
#join p { margin: 0 0 12px; }
#join a { color: #8ab4f8; }
.card { background: #151b23; border: 1px solid #263040; border-radius: 16px; padding: 16px; margin: 16px 0; }
#join label { display: block; font-size: 14px; color: #8a97a8; margin: 12px 0 6px; }
#join label:first-child { margin-top: 0; }
#join input {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #263040;
  background: #0e141b; color: #e8eef6; font: inherit; font-size: 22px; letter-spacing: 2px;
}
#joinBtn {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: 100%; margin-top: 20px; border: 0; border-radius: 12px; padding: 16px;
  font: inherit; font-weight: 600; font-size: 18px; background: #22c55e; color: #04130a;
}
#joinBtn:disabled { opacity: 0.4; }
.numbers { margin: 0 -4px 8px; }
.numbers .num {
  -webkit-appearance: none; appearance: none;
  display: inline-block; vertical-align: top; width: 64px; height: 56px; margin: 4px; padding: 0;
  border: 1px solid #263040; border-radius: 12px; background: #0e141b; color: #e8eef6;
  font: inherit; font-size: 22px; font-weight: 700; line-height: 1;
}
.numbers .num span { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: #8a97a8; }
.numbers .num.used { opacity: 0.45; color: #8a97a8; }
.numbers .num.chosen { background: #22c55e; border-color: #22c55e; color: #04130a; }


/* ---------- NinjaLit look (design B with A's lit screen) ----------
   Beacon is the default look: before a drill the ninja banner fills the top with "Pod N" over it and
   the number sits in a glowing standby ring; lit, the whole screen is the drill's colour with the pod
   number in the corner and GO in the middle. Target and Scoreboard keep their own look. */
#podHero { display: none; }
.look-beacon #pad.st-idle #podHero {
  display: block; position: absolute; top: 0; left: 0; right: 0; height: 30%; max-height: 260px; z-index: 0;
  background: var(--page) var(--banner) 78% 40% / cover no-repeat; pointer-events: none;
}
.look-beacon #pad.st-idle.running #podHero { display: none; }
#podHero:after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15) 45%, #000 97%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 45%, #000 97%);
}
#heroText { position: absolute; left: 18px; bottom: 6px; z-index: 1; }
#heroKick { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--acc); }
#heroNum { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 900; font-size: 44px; line-height: 1; text-transform: uppercase; color: #f1f7f3; text-shadow: 0 2px 12px #000; }
.look-beacon #pad.st-idle #podTag { color: #d7e3db; text-shadow: 0 1px 6px #000; }
.look-beacon #pad.st-idle #podCore, .look-beacon #pad.st-dark #podCore {
  width: 54vmin; height: 54vmin; margin-top: 10vh; border-radius: 50%; box-sizing: border-box;
  border: 0.8vmin solid var(--acc); background: var(--standby);
  box-shadow: 0 0 0 4vmin var(--acc12), 0 0 0 8vmin var(--acc05);
}
.look-beacon #pad.st-idle.running #podCore, .look-beacon #pad.st-dark #podCore { margin-top: 0; }
.look-beacon #pad.st-idle #podNum, .look-beacon #pad.st-dark #podNum {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic;
  color: #fff; -webkit-text-stroke: 0; font-size: 36vmin;
}
.look-beacon #pad.st-idle.running #podNum, .look-beacon #pad.st-dark #podNum { color: var(--soft); }
.look-beacon #pad.st-idle #podIdle {
  display: block; position: absolute; top: 100%; left: 50%; margin-top: 9vmin; white-space: nowrap; text-align: center;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.look-beacon #pad.st-idle.running #podIdle { display: none; }
.look-beacon #podIdle b { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; color: #f1f7f3; }
.look-beacon #podIdle span { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.look-beacon #podFoot {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 12px 18px 18px; border-top: 1px solid var(--line);
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800;
  font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.look-beacon #podStatus { bottom: 62px; }
/* The tips line sits above the footer, under the banner's title. */
.look-beacon #hint { top: auto; bottom: 84px; }
/* Lit (design A): the colour fills the screen, the number in the corner, GO in the middle. */
.look-beacon #pad.st-lit #topNum {
  display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic;
  font-weight: 900; font-size: 40px; line-height: 1; color: rgba(0, 0, 0, 0.78);
}
.look-beacon #pad.st-lit #podTag { color: rgba(0, 0, 0, 0.55); }
.look-beacon #pad.st-lit #podDot { background: rgba(0, 0, 0, 0.55); }
.look-beacon #pad.st-lit #podGo {
  display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic;
  font-weight: 900; font-size: 48vmin; line-height: 1; color: rgba(0, 0, 0, 0.8);
}
.look-beacon #pad.st-lit.nogo #podGo, .look-beacon #pad.st-lit #podSym:not(.hidden) ~ #podGo { display: none; }
.look-beacon #pad.st-lit #podFoot { color: rgba(0, 0, 0, 0.6); border-color: rgba(0, 0, 0, 0.18); }
.look-beacon #pad.st-lit #podStatus { color: rgba(0, 0, 0, 0.55); }
@media (orientation: landscape) {
  .look-beacon #pad.st-idle #podHero { display: none; }
  .look-beacon #pad.st-idle #podCore { margin-top: 0; }
  .look-beacon #pad.st-idle #podIdle { display: none; }
}

/* Join panel: the banner across the top with the title over it. */
#join { background: var(--page); }
#joinHero { position: relative; height: 31vh; max-height: 230px; min-height: 150px; background: var(--page) var(--banner) 78% 40% / cover no-repeat; }
#joinHero:after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, transparent 40%, var(--page) 96%);
  background: linear-gradient(180deg, transparent 40%, var(--page) 96%);
}
#joinHeroText { position: absolute; left: 18px; bottom: 12px; z-index: 1; max-width: 480px; }
#joinHeroText span { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--acc); }
#joinHeroText b { display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 900; font-size: 40px; line-height: 0.95; text-transform: uppercase; color: #f1f7f3; text-shadow: 0 2px 12px #000; }
#join main { padding: 4px 16px 16px; }
#join p { margin: 0 0 8px; }
#numbersNote { margin: 0 0 4px; }
#join .center { text-align: center; margin-top: 12px; }
#join label.kick { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--acc); margin: 14px 0 6px; }
#roomBar {
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
  padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
#roomBar.hidden { display: none; }
#roomBar .tick { width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: var(--acc12); border: 1.5px solid var(--acc); color: var(--acc); box-sizing: border-box; padding: 4px; }
#roomBar .tick svg { display: block; width: 100%; height: 100%; }
#roomBar .roomText { -webkit-flex: 1; flex: 1; }
#roomBar .roomText b, #roomBar .roomText span { display: block; }
#join #roomEdit { color: var(--muted); font-size: 14px; }
#join input { background: var(--panel); border-color: var(--line); }
#join label { color: var(--muted); }
/* Pod numbers: a row of tall phone-shaped tiles, swiped sideways. */
.numbers { margin: 0 -16px 8px; padding: 4px 16px 8px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.numbers .num {
  width: 50px; height: 72px; margin: 0 8px 0 0; border: 2px solid #000; border-radius: 11px;
  background: #121a16; color: #6d8277; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-style: italic; font-weight: 900; font-size: 30px;
}
.numbers .num span { font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; font-style: normal; font-size: 10px; }
.numbers .num.used { opacity: 0.35; }
.numbers .num.chosen { background: var(--acc); border-color: #000; color: var(--ink); box-shadow: 0 0 16px var(--acc60); }
#joinBtn {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 900;
  font-size: 26px; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 16px; margin-top: 10px;
  border-radius: 14px; color: var(--ink); box-shadow: 0 0 24px var(--acc45);
}
#joinBtn:disabled { box-shadow: none; }

/* Reaction times and counts in the app's type: Barlow Condensed heavy italic, seconds under. */
.look-beacon #podMsg { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 900; letter-spacing: 0; font-size: 34vmin; }
.look-beacon #pad.st-result #podMsg { color: #fff !important; }
.look-beacon #podUnit { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 6vmin; letter-spacing: 0.6vmin; color: var(--acc) !important; }

/* Colour themes, matching the app's (Court green, Arena blue, Ember orange, Black and white). */
html { --acc: #22c55e; --ink: #03140a; --standby: #134a2a; --soft: #9fdcb5; --page: #050d08; --panel: #0e1d14; --line: #1f3a2a; --muted: #9db3a5;
  --acc12: rgba(34, 197, 94, 0.12); --acc05: rgba(34, 197, 94, 0.05); --acc45: rgba(34, 197, 94, 0.45); --acc60: rgba(34, 197, 94, 0.6); --banner: url(banner-green.jpg); }
html.theme-blue { --acc: #38bdf8; --ink: #04101a; --standby: #0f3a55; --soft: #a5dcf5; --page: #060b12; --panel: #102033; --line: #26394f; --muted: #a0b1c4;
  --acc12: rgba(56, 189, 248, 0.12); --acc05: rgba(56, 189, 248, 0.05); --acc45: rgba(56, 189, 248, 0.45); --acc60: rgba(56, 189, 248, 0.6); --banner: url(banner-blue.jpg); }
html.theme-orange { --acc: #ff7a2f; --ink: #170701; --standby: #4a2410; --soft: #fcc49f; --page: #100905; --panel: #261a12; --line: #47321f; --muted: #c0ad9f;
  --acc12: rgba(255, 122, 47, 0.12); --acc05: rgba(255, 122, 47, 0.05); --acc45: rgba(255, 122, 47, 0.45); --acc60: rgba(255, 122, 47, 0.6); --banner: url(banner-orange.jpg); }
html.theme-mono { --acc: #f5f5f5; --ink: #0a0a0a; --standby: #2e2e2e; --soft: #d4d4d4; --page: #080808; --panel: #1c1c1c; --line: #333333; --muted: #a3a3a3;
  --acc12: rgba(245, 245, 245, 0.12); --acc05: rgba(245, 245, 245, 0.05); --acc45: rgba(245, 245, 245, 0.35); --acc60: rgba(245, 245, 245, 0.5); --banner: url(banner-mono.jpg); }

/* The Join button in the theme colour. */
#joinBtn { background: var(--acc); }
.look-beacon #podDot.on { background: var(--acc); }

/* The tick after a wave or slap check, in the theme colour. */
#podMsg .tick { display: block; width: 40vmin; height: 40vmin; }

/* During a drill, between lights, every look shows a quiet grey number, so only a lit pod stands out. */
#pad.running #podNum, #pad.st-dark #podNum { color: #59625d !important; -webkit-text-stroke-color: #2e3531 !important; }
.look-beacon #pad.running #podCore, .look-beacon #pad.st-dark #podCore { border-color: #2e3531; background: #0d110f; box-shadow: none; }
.look-target #pad.running #podCore, .look-target #pad.st-dark #podCore { border-color: #222826; }
.look-target #pad.running #podCore:before, .look-target #pad.st-dark #podCore:before { border-color: #161a18; }

/* ---------- Target, in the app's style: theme-coloured rings, Barlow numbers ---------- */
.look-target #topNum { background: var(--acc); color: var(--ink); font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-size: 17px; padding: 3px 12px; }
.look-target #podTag { color: var(--muted); }
.look-target #podDot.on { background: var(--acc); }
.look-target #podCore { border-color: var(--acc); background: var(--standby); box-shadow: 0 0 40px var(--acc12); }
.look-target #podCore:before { border-color: var(--acc45); }
.look-target #podNum { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; color: #fff; }
.look-target #pad.st-lit #podCore { box-shadow: none; }
.look-target #pad.st-count #podCore { border-color: var(--acc); border-right-color: var(--line); border-bottom-color: var(--line); background: transparent; }
.look-target #pad.st-result #podCore { border-color: var(--acc); background: transparent; }
.look-target #pad.st-wrong #podCore { background: transparent; }
.look-target #podMsg { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 900; letter-spacing: 0; }
.look-target #pad.st-count #podMsg { color: var(--acc) !important; }
.look-target #pad.st-result #podUnit { color: var(--acc) !important; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; }
.look-target #podSub { color: var(--muted); }

/* ---------- Scoreboard, in the app's style: theme colour instead of orange and yellow ---------- */
.look-scoreboard #pad { font-style: italic; }
.look-scoreboard #podTop, .look-scoreboard #podFoot { border-color: var(--line); }
.look-scoreboard #topNum { color: var(--acc); }
.look-scoreboard #podTag, .look-scoreboard #podFoot { color: var(--muted); }
.look-scoreboard #podIdle b { color: #fff; font-weight: 900; }
.look-scoreboard #podIdle span { font-style: normal; color: var(--muted); }
.look-scoreboard #podNum { font-style: italic; }
.look-scoreboard #footBest { color: var(--acc); }
.look-scoreboard #pad.st-count #podMsg { color: var(--acc) !important; }
.look-scoreboard #pad.st-result #podMsg { color: #fff !important; }
.look-scoreboard #pad.st-result #podUnit { color: var(--acc) !important; font-style: italic; font-weight: 800; }
.look-scoreboard #podBadge { background: var(--acc); color: var(--ink); font-style: italic; }
.look-scoreboard #podBadge.first { background: var(--panel); color: #fff; }
.look-scoreboard #podStatus { font-style: normal; }
.look-target #pad.running #podCore, .look-target #pad.st-dark #podCore { background: #0d110f; box-shadow: none; }
.look-target #pad.running #topNum, .look-target #pad.st-dark #topNum { background: #2e3531; color: #9aa39e; }
.look-scoreboard #pad.running #topNum, .look-scoreboard #pad.st-dark #topNum { color: #59625d; }