/* ============================================================
   Good Question — Component Styles
   Reusable UI components. Imports base.css (which imports tokens).
   ============================================================ */

@import './base.css';

/* ============================================================
   Buttons (.cp-btn)
   ============================================================ */

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.cp-btn:hover {
  text-decoration: none;
}

.cp-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

/* Colour variants */
.cp-btn-green  { background: var(--color-green);   color: #fff; }
.cp-btn-blue   { background: var(--color-blue);    color: #fff; }
.cp-btn-red    { background: var(--color-red);     color: #fff; }
.cp-btn-yellow { background: var(--color-yellow);  color: var(--color-ink); }
.cp-btn-white  { background: var(--color-surface); color: var(--color-ink); }
.cp-btn-ink    { background: var(--color-ink);     color: #fff; }

/* Size variants */
.cp-btn-lg {
  font-size: var(--text-2xl);
  padding: 14px 28px;
  box-shadow: var(--shadow-lg);
}

.cp-btn-lg:active {
  box-shadow: 2px 2px 0 var(--color-ink);
}

.cp-btn-sm {
  font-size: var(--text-base);
  padding: 7px 14px;
  box-shadow: var(--shadow-sm);
}

.cp-btn-sm:active {
  box-shadow: 1px 1px 0 var(--color-ink);
}

/* ============================================================
   Cards (.cp-card)
   ============================================================ */

.cp-card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Coloured header strips */
.cp-card-green-header,
.cp-card-blue-header,
.cp-card-red-header,
.cp-card-yellow-header,
.cp-card-ink-header {
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.cp-card-green-header  { background: var(--color-green);  color: #fff; }
.cp-card-blue-header   { background: var(--color-blue);   color: #fff; }
.cp-card-red-header    { background: var(--color-red);    color: #fff; }
.cp-card-yellow-header { background: var(--color-yellow); color: var(--color-ink); }
.cp-card-ink-header    { background: var(--color-ink);    color: #fff; }

/* ============================================================
   Inputs (.cp-input)
   ============================================================ */

.cp-input {
  width: 100%;
  padding: 12px 14px;
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-surface);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--color-ink);
}

.cp-input:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(58, 158, 74, 0.15);
}

.cp-input::placeholder {
  color: var(--color-muted);
}

/* ============================================================
   Badges (.cp-badge)
   ============================================================ */

.cp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  box-shadow: 2px 2px 0 var(--color-ink);
  white-space: nowrap;
  line-height: 1.4;
}

.cp-badge-green  { background: var(--color-green);   color: #fff; }
.cp-badge-blue   { background: var(--color-blue);    color: #fff; }
.cp-badge-red    { background: var(--color-red);     color: #fff; }
.cp-badge-yellow { background: var(--color-yellow);  color: var(--color-ink); }
.cp-badge-muted  { background: transparent; color: var(--color-muted); border-color: var(--color-muted); box-shadow: none; }

/* ============================================================
   Toggle Group (.cp-toggle)
   ============================================================ */

.cp-toggle {
  display: flex;
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cp-toggle-opt {
  flex: 1;
  padding: 7px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cp-toggle-opt + .cp-toggle-opt {
  border-left: var(--border);
}

.cp-toggle-opt.active,
.cp-toggle-opt:hover {
  background: var(--color-ink);
  color: #fff;
}

/* ============================================================
   Session Code Card (.cp-session-code)
   ============================================================ */

.cp-session-code {
  display: inline-block;
  background: var(--color-yellow);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6) var(--space-10);
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  letter-spacing: 0.15em;
  color: var(--color-ink);
  text-align: center;
}

/* ============================================================
   Avatar Circle (.cp-avatar)
   ============================================================ */

.cp-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  border: var(--border-thin);
  overflow: hidden;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.cp-avatar-lg {
  width: 80px;
  height: 80px;
}

.cp-avatar-xl {
  width: 120px;
  height: 120px;
}

.cp-avatar-selected {
  border: 3px solid var(--color-green);
  box-shadow: var(--shadow-sm);
}

.cp-avatar-taken {
  opacity: 0.35;
  cursor: not-allowed;
}

.cp-avatar-available {
  border-color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cp-avatar-available:hover {
  border-color: var(--color-green);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   Student Card (.cp-student-card)
   ============================================================ */

.cp-student-card {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  animation: cp-pop-in 250ms ease both;
  min-width: 90px;
}

.cp-student-card .cp-student-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Podium Blocks (.cp-podium-block)
   ============================================================ */

.cp-podium-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cp-podium-step {
  width: 120px;
  border: var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
}

.cp-podium-step-1 {
  height: 150px;
  background: var(--color-yellow); /* gold */
}

.cp-podium-step-2 {
  height: 100px;
  background: var(--color-silver);
}

.cp-podium-step-3 {
  height: 70px;
  background: var(--color-bronze);
}

/* ============================================================
   Timer Bar (.cp-timer-bar)
   ============================================================ */

.cp-timer-bar {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.cp-timer-fill {
  height: 100%;
  background: var(--color-green);
  border-radius: inherit;
  transition: width linear;
}

.cp-timer-fill.cp-timer-warning {
  background: var(--color-yellow);
}

.cp-timer-fill.cp-timer-danger {
  background: var(--color-red);
}

/* ============================================================
   Toast Notifications (.cp-toast)
   ============================================================ */

.cp-toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.cp-toast-item {
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-base);
  box-shadow: var(--shadow-md);
  animation: cp-slide-up 250ms ease both;
  max-width: 320px;
  pointer-events: auto;
}

.cp-toast-item.cp-toast-success { border-left: 4px solid var(--color-green); }
.cp-toast-item.cp-toast-error   { border-left: 4px solid var(--color-red); }
.cp-toast-item.cp-toast-warning { border-left: 4px solid var(--color-yellow); }

/* ============================================================
   Full-Screen Overlay (.cp-fullscreen-overlay)
   ============================================================ */

.cp-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-fullscreen);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}

/* ============================================================
   Dashboard game cards (views/dashboard.js) — UI batch 3
   3 across (all six Launch buttons on one laptop screen), 2 across on
   narrow screens, 1 on phones. Chips: the three facts (⏱ 👥 📱) from
   assets/js/game_copy.js, on the cards and in the info popup.
   ============================================================ */

.cp-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 24px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .cp-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cp-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The card. Height: --cp-card-h, set by _fitCards (218–300px, filling the
   window from 1024px wide); only the art panel grows, and the logo with it. */
.cp-game-card {
  display: flex;
  flex-direction: column;
  height: var(--cp-card-h, auto);
  /* background-color (the game's colour) and the halftone background-image
     are set per card in dashboard.js */
  background-repeat: repeat;
  border: 3px solid var(--color-ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--color-ink);
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.cp-game-card--soon { cursor: default; }

.cp-card-art {
  position: relative;
  flex: 1 0 100px;
  min-height: 100px;
  overflow: hidden;
}
.cp-card-burst {          /* flat rays, a lighter tint of the card colour */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cp-card-art img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-height: 80%;
  max-width: 80%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(4px 4px 0 #111111);   /* hard, no blur */
  transition: transform 150ms ease;
}
.cp-card-art img.cp-logo-flat { filter: none; }   /* Spotlight (glow smudges a shadow), The Horde (dark letters) */

.cp-card-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px;
}
.cp-card-hook {
  margin: 0;
  height: 2.6em;            /* always room for 2 lines, so cards line up */
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  /* colour per card (white or black, whichever passes 4.5:1) */
}
.cp-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cp-info-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--color-ink);
  background: #fff;
  border: 3px solid var(--color-ink);
  box-shadow: 3px 3px 0 var(--color-ink);
  cursor: pointer;
  transition: background 150ms ease;
}

/* Play: a chunky white button bottom-right, black Boogaloo, hard shadow. */
.cp-play-btn {
  height: 40px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--color-ink);
  background: #fff;
  border: 3px solid var(--color-ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--color-ink);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.cp-card-soon {
  height: 38px;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: #555;
  background: #e4e4e4;
  border: 3px solid var(--color-ink);
  border-radius: 8px;
  user-select: none;
}
.cp-game-card--soon .cp-card-art img {
  filter: grayscale(0.5) drop-shadow(4px 4px 0 #111111);
  opacity: 0.85;
}

/* Mouse only (nothing on touch screens): the card lifts and its hard shadow
   grows 4 → 7px, the logo grows 5%, Launch deepens; pressing Launch pushes
   it in like the student buzzer and it snaps back in 150ms. */
@media (hover: hover) and (pointer: fine) {
  .cp-game-card:not(.cp-game-card--soon):hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--color-ink);
  }
  .cp-game-card:not(.cp-game-card--soon):hover .cp-card-art img {
    transform: translate(-50%, -50%) scale(1.05);
  }
  .cp-game-card:not(.cp-game-card--soon):hover .cp-play-btn {
    background: #FFF3B0;
  }
  .cp-play-btn:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--color-ink);
  }
  .cp-info-btn:hover { background: #F5C100; }
}

/* Reduce motion: no movement or scaling, just the shadow change. */
@media (prefers-reduced-motion: reduce) {
  .cp-game-card,
  .cp-card-art img,
  .cp-play-btn { transition: box-shadow 150ms ease, background 150ms ease; }
  .cp-game-card:not(.cp-game-card--soon):hover { transform: none !important; }
  .cp-game-card:not(.cp-game-card--soon):hover .cp-card-art img { transform: translate(-50%, -50%) !important; }
  .cp-play-btn:active { transform: none !important; }
}

.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cp-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
  background: #F1EEE6;
  border: 2px solid #111111;
  border-radius: 999px;
  padding: 4px 7px;
}
.cp-chips-big .cp-chip {
  font-size: 15px;
  padding: 6px 12px;
}

/* ============================================================
   Game Info Modal (#cp-info-modal-*, .gq-info-*) — UI batch 3
   Logo, hook, three numbered steps, the chips, "For teachers".
   Fits a 1366×768 laptop without scrolling; body text stays 17px.
   ============================================================ */

#cp-info-modal-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-body);
}

#cp-info-modal-body p {
  margin: 0 0 12px;
}

.gq-info-hook,
#cp-info-modal-body em {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-blue);
  text-align: center;
}

.gq-info-steps {
  list-style: none;
  counter-reset: gq-step;
  margin: 0 0 14px;
  padding: 0;
}
.gq-info-steps li {
  counter-increment: gq-step;
  position: relative;
  min-height: 38px;
  padding: 6px 0 6px 52px;
  margin: 0 0 6px;
}
.gq-info-steps li::before {
  content: counter(gq-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-yellow, #F5C100);
  border: 3px solid #111111;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: #111111;
}

#cp-info-modal-body .cp-chips {
  justify-content: center;
  margin: 0 0 14px;
}

.gq-info-teacher {
  margin-top: 0;
  padding: 12px 18px;
  background: var(--color-bg);
  border-left: 4px solid var(--color-yellow);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-body);
}
.gq-info-teacher ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.gq-info-teacher li {
  margin: 0 0 4px;
}

/* Difficulty tick boxes (launch screen, every game): one plain GQ style.
   Unticked: white with a 3px ink border. Ticked: solid ink, white tick. */
.cp-diff-check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 3px solid #111111;
  border-radius: 5px;
  background: #ffffff center / 16px 16px no-repeat;
  cursor: pointer;
}
.cp-diff-check:checked {
  background-color: #111111;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cp-diff-check:focus-visible {
  outline: 3px solid #F5C100;
  outline-offset: 2px;
}

/* ============================================================
   Shared lobby (views/lobby.js) — UI batch 4a. Projected for the class:
   every size is in --lu (1% of the width, capped by the height so a 4:3
   projector fits too), so it looks the same at 1920, 1366 and 1280.
   Left third: how to join. Right: logo, settings, count, students.
   Bottom row: Mute, End Session, pack advice, Start Game.
   ============================================================ */

.cp-lobby {
  --lu: min(1vw, calc(100vh / 56.25));
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-size: cover;            /* fills the screen, cropped, never stretched */
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(var(--lu) * 2.2);
  padding: calc(var(--lu) * 2.2);
  box-sizing: border-box;
}
.cp-lobby-tint { position: absolute; inset: 0; pointer-events: none; }   /* strength: tint in GAME_THEMES */
.cp-lobby > :not(.cp-lobby-tint) { position: relative; z-index: 1; }

/* Left third: the white "How to join" card. Sized to its content and
   centred in the left column (not the full height). Laid out like a list:
   the 1 and 2 circles in one column; each label, the address and the code
   box share one left edge just right of them. The whole block is centred
   in the card. The address is as wide as the code box (it never widens the
   column itself), as big as fits (lobby.js _fitJoinUrl). */
.cp-lobby-join {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  max-height: 100%;
  min-width: 0;
  background: #fff;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1.4);
  box-shadow: 6px 6px 0 #111;
  padding: calc(var(--lu) * 2.2) calc(var(--lu) * 1);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--lu) * 0.6);
  row-gap: calc(var(--lu) * 0.6);
  overflow: hidden;
}
.cp-lobby-join-label {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--lu) * 1.6);
  line-height: 1.2;
  color: #666;
}
.cp-lobby-step-num {
  grid-column: 1;
  width: calc(var(--lu) * 2.2);
  height: calc(var(--lu) * 2.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 1.5);
  line-height: 1;
  color: #fff;
}
.cp-lobby-step-num-1 { background: var(--color-green); }
.cp-lobby-step-num-2 { background: var(--color-blue); margin-top: calc(var(--lu) * 0.8); }
.cp-lobby-join-label-2 { margin-top: calc(var(--lu) * 0.8); }   /* with the address's own space, the gaps above and below "goodq.au" match */
.cp-lobby-url {
  grid-column: 2;
  justify-self: start;
  width: 0;                              /* never widens the column... */
  min-width: 100%;                       /* ...but fills it */
  margin: 0;
  white-space: nowrap;                   /* no overflow:hidden: it cut off the tails of g, q, p */
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 12);       /* steps down to fit (lobby.js _fitJoinUrl) */
  line-height: 1;
  padding-bottom: 0.1em;                 /* room for the tails of g, q, p inside its own box */
  color: #111;
}
.cp-lobby-code {                      /* the biggest thing on screen */
  grid-column: 2;
  justify-self: start;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 9);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: #111;
  background: #F5C100;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 6px 6px 0 #111;
  padding: 0 calc(var(--lu) * 1);
  white-space: nowrap;
}

/* Right two-thirds */
.cp-lobby-main {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  min-width: 0;                       /* keep its 2/3 share: long text must not widen the column */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--lu) * 0.8);
}
.cp-lobby-logo {
  max-height: calc(var(--lu) * 8.5);
  max-width: 60%;
  object-fit: contain;
  flex-shrink: 0;
}
.cp-lobby-settings {
  margin: 0;
  max-width: 100%;                    /* never wider than its column (Spotlight then shortens to "6 categories") */
  font-family: var(--font-body);
  font-weight: 800;
  font-size: calc(var(--lu) * 1.25);
  color: #fff;
  text-shadow: 2px 2px 0 #111;
  text-align: center;
}
.cp-lobby-count {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 3);
  line-height: 1.1;
  color: #fff;
  text-shadow: 3px 3px 0 #111;
}
.cp-lobby-grid {
  --tile: calc(var(--lu) * 8);        /* set by _fitTiles: the largest that fits everyone */
  flex: 1 1 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: calc(var(--lu) * 1.2);
  overflow-y: auto;
  padding-top: calc(var(--lu) * 0.5);
}
.cp-lobby-tile {
  position: relative;
  width: var(--tile);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cp-lobby-avatar {
  width: var(--tile);
  height: var(--tile);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #111;
  background-color: #fff;
  background-size: 92%;
  background-position: center 30%;
  background-repeat: no-repeat;
  box-shadow: 3px 3px 0 #111;
}
.cp-lobby-name {
  margin-top: calc(var(--tile) * -0.08);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;            /* long names: "…" */
  font-family: var(--font-display);
  font-size: max(13px, calc(var(--tile) * 0.19));
  line-height: 1.3;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  border-radius: 6px;
  position: relative;
}
.cp-lobby-remove {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: max(22px, calc(var(--tile) * 0.24));
  height: max(22px, calc(var(--tile) * 0.24));
  padding: 0;
  border-radius: 50%;
  border: 2px solid #111;
  background: #fff;
  color: #E02B2B;
  font-size: max(14px, calc(var(--tile) * 0.16));
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .cp-lobby-tile:hover .cp-lobby-remove { display: flex; align-items: center; justify-content: center; }
}
@media (hover: none) {                /* touch-only screens: always shown, or nobody could remove */
  .cp-lobby-remove { display: flex; align-items: center; justify-content: center; }
}
@keyframes cp-lobby-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.cp-lobby-tile-new { animation: cp-lobby-pop 250ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .cp-lobby-tile-new { animation: none; }
}

/* Bottom row */
.cp-lobby-bar {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--lu) * 2.2);
  align-items: center;
}
.cp-lobby-bar-left { display: flex; gap: calc(var(--lu) * 0.8); align-items: center; }
.cp-lobby-small-btn {
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 1.3);
  line-height: 1;
  color: #111;
  background: #fff;
  border: 3px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #111;
  padding: calc(var(--lu) * 0.5) calc(var(--lu) * 1);
  cursor: pointer;
}
.cp-lobby-end { background: #E02B2B; color: #fff; }
.cp-lobby-bar-right { display: flex; align-items: center; gap: calc(var(--lu) * 1.4); }
.cp-lobby-notes { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--lu) * 0.5); }
.cp-lobby-advice {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--lu) * 1.15);
  line-height: 1.35;
  color: #111;
  background: #F5C100;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 0.7);
  box-shadow: 4px 4px 0 #111;
  padding: calc(var(--lu) * 0.5) calc(var(--lu) * 1);
  text-align: left;
}
.cp-lobby-warn { background: #E02B2B; color: #fff; }
/* Advice states (lobby.js _setAdvice): ready = white with a green tick,
   short = amber with ⚠, blocked = red (.cp-lobby-warn — only when Start is
   blocked). The second line says what was left out, smaller. */
.cp-lobby-advice--ready { background: #fff; }
.cp-lobby-advice--short { background: #F5A300; }
.cp-lobby-advice-main { display: block; font-weight: 700; }
.cp-lobby-advice-tick { color: #1E8F3A; font-weight: 800; margin-right: 0.3em; }
.cp-lobby-advice-sub { display: block; font-size: 0.85em; color: rgba(17, 17, 17, 0.7); margin-top: 0.15em; }
.cp-lobby-warn .cp-lobby-advice-sub { color: rgba(255, 255, 255, 0.85); }
.cp-lobby-start {
  flex: 0 0 auto;
  min-width: calc(var(--lu) * 24);
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.6);
  line-height: 1;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 6px 6px 0 #111;
  padding: calc(var(--lu) * 1.2) calc(var(--lu) * 2.4);
  white-space: nowrap;
  color: #fff;
  background: var(--color-green);
  cursor: pointer;
}
.cp-lobby-start--waiting {           /* below the minimum (or a pack problem) */
  color: #111;
  background: #fff;
  cursor: not-allowed;
  font-size: calc(var(--lu) * 2.1);
}
.cp-lobby-start--ready {             /* ready: green, a slow gentle pulse */
  animation: cp-lobby-ready 2.4s ease-in-out infinite;
}
@keyframes cp-lobby-ready {
  0%, 100% { transform: scale(1);    box-shadow: 6px 6px 0 #111; }
  50%      { transform: scale(1.03); box-shadow: 9px 9px 0 #111; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-lobby-start--ready { animation: none; }
}

/* ============================================================
   The Horde — "Select the Uninfected" (horde.js _selectingHtml).
   Matches the shared lobby: same picture and tint, same --lu unit, the
   lobby's student tiles (.cp-lobby-tile / -avatar / -name, sized by
   _fitSelectTiles like the lobby's _fitTiles) and its Start button look
   (.cp-lobby-start--waiting / --ready) for Confirm & Launch.
   ============================================================ */
.cp-hsel {
  --lu: min(1vw, calc(100vh / 56.25));
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-color: #0f0d0a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--lu) * 0.9);
  padding: calc(var(--lu) * 2.2);
  box-sizing: border-box;
}
.cp-hsel > :not(.cp-lobby-tint) { position: relative; z-index: 1; }
.cp-hsel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 4.4);
  line-height: 1.05;
  color: #fff;
  text-shadow: 4px 4px 0 #111;
  text-align: center;
}
.cp-hsel-toggles { display: flex; gap: calc(var(--lu) * 1.4); }
.cp-hsel-toggle {
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.2);
  line-height: 1;
  padding: calc(var(--lu) * 0.8) calc(var(--lu) * 2.8);
  color: #111;
  background: #fff;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 5px 5px 0 #111;
  cursor: pointer;
}
.cp-hsel-toggle--on {
  background: #F5C100;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #111;
}
.cp-hsel-hint {
  margin: 0;
  min-height: 1.3em;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: calc(var(--lu) * 1.3);
  color: #fff;
  text-shadow: 2px 2px 0 #111;
  text-align: center;
}
.cp-hsel-content {
  flex: 1 1 0;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.cp-hsel .cp-lobby-grid { padding-top: calc(var(--lu) * 1.2); align-content: center; }
.cp-hsel-tile { background: none; border: 0; padding: 0; cursor: pointer; transition: transform 120ms ease-out; }
.cp-hsel-tile .cp-lobby-avatar { transition: box-shadow 120ms ease-out; }
.cp-hsel-tile--on { transform: translateY(calc(var(--lu) * -0.8)) scale(1.05); z-index: 2; }
.cp-hsel-tile--on .cp-lobby-avatar {
  border: calc(var(--lu) * 0.55) solid #F5C100;
  box-shadow: 0 0 0 3px #111, 6px 10px 0 #111;
}
.cp-hsel-tile--on .cp-lobby-name { background: #F5C100; }
.cp-hsel-spin {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 7);
  line-height: 1.1;
  color: #F5C100;
  text-shadow: 5px 5px 0 #111;
  text-align: center;
}
.cp-hsel-note {
  margin: auto;
  max-width: calc(var(--lu) * 50);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(var(--lu) * 1.6);
  line-height: 1.4;
  color: #111;
  background: #fff;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 5px 5px 0 #111;
  padding: calc(var(--lu) * 1.2) calc(var(--lu) * 1.8);
  text-align: center;
}
.cp-hsel-bar {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: calc(var(--lu) * 1.4);
}
.cp-hsel-bar-gap { flex: 1 1 auto; }
.cp-hsel-btn {                        /* Spin! / Re-roll: pop-art */
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.2);
  line-height: 1;
  padding: calc(var(--lu) * 1) calc(var(--lu) * 2.2);
  color: #111;
  background: #F5C100;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 5px 5px 0 #111;
  cursor: pointer;
}
.cp-hsel-btn:disabled { background: #fff; color: #888; cursor: not-allowed; }

/* ============================================================
   Podium (views/podium.js) — matches the lobby and scales with the screen.
   --lu as in the lobby; --pu (the podium's own unit) starts at --lu and is
   reduced by _fitPodium only if the podium wouldn't fit. Ties: one block per
   PLACE, holding up to 3 students side by side (--av shrinks), "+N more".
   ============================================================ */
.cp-pod {
  --lu: min(1vw, calc(100vh / 56.25));
  --pu: var(--lu);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  gap: calc(var(--lu) * 1);
  padding: calc(var(--lu) * 1.6) calc(var(--lu) * 2.2);
  box-sizing: border-box;
}
.cp-pod-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }   /* confetti/embers: behind everything */
.cp-pod > :not(.cp-lobby-tint):not(.cp-pod-fx) { position: relative; z-index: 1; }

.cp-pod-head { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(var(--lu) * 2.4); }   /* logo and headline on one line: the height goes to the podium */
.cp-pod-logo { max-height: calc(var(--lu) * 8.5); max-width: 40%; object-fit: contain; display: block; }
.cp-pod-logo-panel {                  /* The Horde: dark letters need a light panel */
  background: #F5C100;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 5px 5px 0 #111;
  padding: calc(var(--lu) * 0.3) calc(var(--lu) * 1.6);
}
.cp-pod-logo-panel .cp-pod-logo { max-height: calc(var(--lu) * 7.2); max-width: 100%; }
.cp-pod-headline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(var(--lu) * 1.6); }
.cp-pod-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 4.8);
  line-height: 1;
  color: #fff;
  text-shadow: 4px 4px 0 #111;
  text-align: center;
}
.cp-pod-hero {                        /* The Horde: the Uninfected beside the headline */
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lu) * 0.8);
  background: #fff;
  border: 3px solid #111;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #111;
  padding: calc(var(--lu) * 0.3) calc(var(--lu) * 1.4) calc(var(--lu) * 0.3) calc(var(--lu) * 0.3);
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.4);
  color: #111;
}
.cp-pod-hero-av {
  width: calc(var(--lu) * 5);
  height: calc(var(--lu) * 5);
  border-radius: 50%;
  border: 3px solid #111;
  background: #F5C100 center 30% / 92% no-repeat;
  box-sizing: border-box;
}
.cp-pod-banner {                      /* Meltdown's class result */
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.6);
  line-height: 1;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 5px 5px 0 #111;
  padding: calc(var(--lu) * 0.6) calc(var(--lu) * 1.6);
}

.cp-pod-main { flex: 1 1 0; min-height: 0; display: flex; gap: calc(var(--lu) * 2.5); }
.cp-pod-stage {
  flex: var(--stage-flex, 1.3) 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.cp-pod-label {
  margin: 0 0 calc(var(--lu) * 0.6);
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.4);
  line-height: 1.1;
  color: #F5C100;
  text-shadow: 3px 3px 0 #111;
  text-align: center;
}
.cp-pod-sublabel { margin: calc(var(--lu) * -0.4) 0 calc(var(--lu) * 0.6); font-family: var(--font-body); font-weight: 800; font-size: calc(var(--lu) * 1.2); color: #fff; text-shadow: 2px 2px 0 #111; text-align: center; }
.cp-pod-blocks { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--pu) * 1.6); }
.cp-pod-block { display: flex; flex-direction: column; align-items: center; animation: cp-slide-up 500ms ease both; }
.cp-pod-crown { font-size: calc(var(--pu) * 4); line-height: 1; animation: cp-float 2s infinite; }
.cp-pod-people { display: flex; align-items: flex-end; gap: calc(var(--pu) * 0.8); }
.cp-pod-person { display: flex; flex-direction: column; align-items: center; width: var(--av); }
.cp-pod-av {
  width: var(--av);
  height: var(--av);
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #111;
  background: #fff center 30% / 92% no-repeat;
  box-shadow: 4px 4px 0 #111;
}
.cp-pod-name {
  position: relative;
  margin-top: calc(var(--av) * -0.08);
  max-width: calc(var(--av) * 1.3);
  box-sizing: border-box;
  padding: 0 0.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
  font-size: max(14px, calc(var(--av) * 0.17));
  line-height: 1.3;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  border-radius: 6px;
}
.cp-pod-score {
  margin-top: calc(var(--pu) * 0.3);
  font-family: var(--font-display);
  font-size: max(14px, calc(var(--av) * 0.16));
  line-height: 1.1;
  color: #F5C100;
  text-shadow: 2px 2px 0 #111;
  white-space: nowrap;
}
.cp-pod-more { margin-top: calc(var(--pu) * 0.3); font-family: var(--font-display); font-size: calc(var(--pu) * 2); color: #fff; text-shadow: 2px 2px 0 #111; }
.cp-pod-plinth { position: relative; margin-top: calc(var(--pu) * 0.6); }
.cp-pod-plinth img { display: block; width: 100%; height: 100%; object-fit: fill; }
.cp-pod-plinth span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  text-align: center;
  font-family: var(--font-display);
  font-size: calc(var(--pu) * 2.6);
  color: #fff;
  text-shadow: 2px 2px 0 #111;
}

.cp-pod-list { flex: var(--list-flex, 1) 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cp-pod-list-grid {
  --row: calc(var(--lu) * 4);
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 8), var(--row));
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: calc(var(--lu) * 0.5) calc(var(--lu) * 1.2);
  align-content: start;
  overflow-y: auto;
}
.cp-pod-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-width: 0;
  height: var(--row);
  box-sizing: border-box;
  padding: 0 0.7em 0 0.4em;
  background: rgba(255, 255, 255, 0.94);
  color: #111;
  border: 2px solid #111;
  border-radius: 0.5em;
  box-shadow: 3px 3px 0 #111;
  font-size: calc(var(--row) * 0.42);
}
.cp-pod-row-place { flex: none; width: 2.5em; text-align: center; font-family: var(--font-display); font-size: 1.1em; white-space: nowrap; }
.cp-pod-nobody { margin: auto; font-family: var(--font-display); font-size: calc(var(--lu) * 4); line-height: 1.1; color: #111; text-align: center;
  background: #fff; border: 3px solid #111; border-radius: calc(var(--lu) * 1.2); box-shadow: 5px 5px 0 #111; padding: calc(var(--lu) * 1) calc(var(--lu) * 2.4); }
.cp-pod-row-tied { flex: none; margin-left: -0.3em; font-family: var(--font-display); font-size: 0.62em; line-height: 1.2; letter-spacing: 0.04em; color: #111; background: #fff; border: 2px solid #111; border-radius: 5px; padding: 0 0.35em; }
.cp-pod-row-av { flex: none; width: calc(var(--row) * 0.76); height: calc(var(--row) * 0.76); border-radius: 50%; border: 2px solid #111; background: #fff center 30% / 92% no-repeat; box-sizing: border-box; }
.cp-pod-row-dot { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; border: 1px solid #111; }
.cp-pod-row-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-body); font-weight: 800; }
.cp-pod-row-tag { flex: none; font-family: var(--font-display); font-size: 0.8em; background: #F5C100; border: 2px solid #111; border-radius: 6px; padding: 0 0.4em; }
.cp-pod-row-score { flex: none; font-family: var(--font-display); white-space: nowrap; }

.cp-pod-bar { flex: none; display: flex; justify-content: center; gap: calc(var(--lu) * 2.4); }
.cp-pod-btn {
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.6);
  line-height: 1;
  padding: calc(var(--lu) * 1.1) calc(var(--lu) * 3.2);
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 6px 6px 0 #111;
  cursor: pointer;
}
.cp-pod-btn--again { background: var(--color-green); color: #fff; }
.cp-pod-btn--dash { background: #fff; color: #111; }

/* ============================================================
   Shared in-game control bar + Players panel (components/control-bar.js)
   — Batch 5. Meltdown/Horde pop-art style, sized in the lobby unit so it
   grows with the screen. Right side order: Players · Pause · Skip ·
   Full screen · Mute · (gap) · End Game.
   ============================================================ */
.cp-bar {
  --lu: min(1vw, calc(100vh / 56.25));
  display: flex;
  align-items: center;
  gap: calc(var(--lu) * 1.4);
  height: calc(var(--lu) * 6.6);
  padding: 0 calc(var(--lu) * 1.4);
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}
.cp-bar-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: calc(var(--lu) * 1.4); }
.cp-bar-logo { height: calc(var(--lu) * 5.4); width: auto; max-width: calc(var(--lu) * 18); object-fit: contain; flex-shrink: 0; display: block; }
.cp-bar-logo-panel {
  flex-shrink: 0;
  background: #F5C100;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 0.7);
  box-shadow: 3px 3px 0 #111;
  padding: calc(var(--lu) * 0.15) calc(var(--lu) * 0.8);
}
.cp-bar-logo-panel .cp-bar-logo { height: calc(var(--lu) * 4.4); }
.cp-bar-status {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 2.4);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 2px 2px 0 #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-bar-right { flex: none; display: flex; align-items: center; gap: calc(var(--lu) * 0.8); }
.cp-bar-gap { width: calc(var(--lu) * 1.6); }
.cp-bar-btn {
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 1.75);
  line-height: 1;
  white-space: nowrap;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 0.7);
  box-shadow: 3px 3px 0 #111;
  padding: calc(var(--lu) * 0.75) calc(var(--lu) * 1.2);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.cp-bar-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #111; }
.cp-bar-btn--light { background: #fff; color: #111; }   /* every normal button; only Resume (green) and End Game (red) differ */
.cp-bar-btn--icon { padding-left: calc(var(--lu) * 0.9); padding-right: calc(var(--lu) * 0.9); }
.cp-bar-btn--on { background: #F5C100; }
.cp-bar-btn--resume { background: var(--color-green); color: #fff; }
.cp-bar-btn--end { background: #E02B2B; color: #fff; }
.cp-bar-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: 3px 3px 0 #111; transform: none; }   /* supported, not usable right now */

/* Players panel: a narrow teacher panel at the right, under the bar. */
.cp-pp {
  --lu: min(1vw, calc(100vh / 56.25));
  position: fixed;
  top: calc(var(--lu) * 7.4);
  right: calc(var(--lu) * 1.2);
  bottom: calc(var(--lu) * 1.2);
  width: calc(var(--lu) * 30);
  z-index: 950;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
  border: 3px solid #111;
  border-radius: calc(var(--lu) * 1);
  box-shadow: 6px 6px 0 #111;
  overflow: hidden;
  animation: cp-fade-in 0.15s ease;
}
.cp-pp-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--lu) * 1);
  padding: calc(var(--lu) * 0.8) calc(var(--lu) * 1.2);
  background: #F5C100;
  border-bottom: 3px solid #111;
}
.cp-pp-title { font-family: var(--font-display); font-size: calc(var(--lu) * 2.2); line-height: 1; }
.cp-pp-close {
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 1.4);
  background: #fff;
  color: #111;
  border: 2px solid #111;
  border-radius: calc(var(--lu) * 0.5);
  box-shadow: 2px 2px 0 #111;
  padding: calc(var(--lu) * 0.35) calc(var(--lu) * 0.8);
  cursor: pointer;
}
.cp-pp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: calc(var(--lu) * 0.5) calc(var(--lu) * 1); }
.cp-pp-empty { font-family: var(--font-body); font-size: calc(var(--lu) * 1.3); color: #666; }
.cp-pp-row {
  display: flex;
  align-items: center;
  gap: calc(var(--lu) * 0.7);
  padding: calc(var(--lu) * 0.45) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.cp-pp-av {
  flex: none;
  width: calc(var(--lu) * 3.4);
  height: calc(var(--lu) * 3.4);
  border-radius: 50%;
  border: 2px solid #111;
  background: #fff center 30% / 92% no-repeat;
  box-sizing: border-box;
}
.cp-pp-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cp-pp-name { font-family: var(--font-body); font-weight: 800; font-size: calc(var(--lu) * 1.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pp-note { font-family: var(--font-body); font-size: calc(var(--lu) * 1.1); color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pp-act, .cp-pp-remove {
  flex: none;
  font-family: var(--font-display);
  font-size: calc(var(--lu) * 1.3);
  line-height: 1;
  border: 2px solid #111;
  border-radius: calc(var(--lu) * 0.5);
  box-shadow: 2px 2px 0 #111;
  padding: calc(var(--lu) * 0.4) calc(var(--lu) * 0.6);
  cursor: pointer;
  background: #fff;
  color: #111;
}
.cp-pp-remove { color: #E02B2B; }
/* Big class: two columns of compact rows (control-bar.js _twoColClass). */
.cp-pp--two { width: calc(var(--lu) * 46); }
.cp-pp--two .cp-pp-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--lu) * 1.2); align-content: start; padding-bottom: 0; }
.cp-pp--two .cp-pp-row { padding: calc(var(--lu) * 0.25) 0; gap: calc(var(--lu) * 0.5); }
.cp-pp--two .cp-pp-av { width: calc(var(--lu) * 2.6); height: calc(var(--lu) * 2.6); }
.cp-pp--two .cp-pp-name { font-size: calc(var(--lu) * 1.3); }
.cp-pp--two .cp-pp-note { font-size: calc(var(--lu) * 1); }
.cp-pp--two .cp-pp-remove { font-size: calc(var(--lu) * 1.1); padding: calc(var(--lu) * 0.3) calc(var(--lu) * 0.5); }