/* Classroom Scoreboard. Each team panel is a size container, so the score
   and buttons inside it are sized against the panel, whatever the grid. */

.sb {
  display: flex; flex-direction: column;
  padding: clamp(8px, 2.2cqmin, 24px) clamp(8px, 2.2cqmin, 24px) calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
.sb-grid {
  --c: 4;
  flex: 1 1 0; min-height: 0; display: grid; gap: clamp(8px, 2cqmin, 22px);
  grid-template-columns: repeat(var(--c), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
}
/* Every team spans two half-columns, so a short last row can sit centered. */
.sb-team { grid-column: span 2; }
.sb-grid[data-n="3"], .sb-grid[data-n="5"], .sb-grid[data-n="6"] { --c: 6; }
.sb-grid[data-n="4"], .sb-grid[data-n="7"], .sb-grid[data-n="8"] { --c: 8; }
.sb-grid[data-n="5"] .sb-team:nth-child(4) { grid-column: 2 / span 2; }
.sb-grid[data-n="7"] .sb-team:nth-child(5) { grid-column: 2 / span 2; }
@container (max-aspect-ratio: 13/10) {
  .sb-grid[data-n="4"], .sb-grid[data-n="7"], .sb-grid[data-n="8"] { --c: 4; }
  .sb-grid[data-n="7"] .sb-team:nth-child(5) { grid-column: span 2; }
  .sb-grid[data-n="7"] .sb-team:nth-child(7) { grid-column: 2 / span 2; }
}
@container (max-aspect-ratio: 9/10) {
  .sb-grid[data-n="2"], .sb-grid[data-n="3"] { --c: 2; }
  .sb-grid[data-n="5"], .sb-grid[data-n="6"] { --c: 4; }
  .sb-grid[data-n="5"] .sb-team:nth-child(4) { grid-column: span 2; }
  .sb-grid[data-n="5"] .sb-team:nth-child(5) { grid-column: 2 / span 2; }
}

/* ---- a team ---- */
.sb-team {
  --tc: #1c7ed6;
  position: relative; min-width: 0; min-height: 0; container-type: size;
  border-radius: clamp(12px, 2.6cqmin, 30px); color: #fff;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--tc) 82%, #fff), var(--tc) 52%, color-mix(in srgb, var(--tc) 78%, #000));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .15), 0 6px 18px color-mix(in srgb, var(--tc) 35%, transparent);
  transition: box-shadow .35s, transform .35s;
}
.sb-in {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; justify-items: center;
  padding: 0 0 max(6px, 5cqh);
}
.sb-team.is-light { color: #1d1d22; }
.sb-team.is-leader {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 clamp(3px, .7cqmin, 7px) #ffd43b,
    0 0 clamp(14px, 4cqmin, 54px) color-mix(in srgb, #ffd43b 65%, transparent);
}

.sb-crown {
  width: min(15cqw, 12cqh); height: auto; margin-top: 2.2cqh; aspect-ratio: 64 / 44;
  fill: #ffd43b; stroke: #c98a00; stroke-width: 2.5; stroke-linejoin: round;
  filter: drop-shadow(0 .6cqh .6cqh rgba(0, 0, 0, .25));
  opacity: 0; transform: translateY(-50%) scale(.5); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
.sb-team.is-leader .sb-crown { opacity: 1; transform: none; animation: sb-bob 2.6s ease-in-out .5s infinite; }
@keyframes sb-bob { 50% { transform: translateY(-8%) rotate(-4deg); } }

.sb-head { max-width: 94%; min-width: 0; display: flex; justify-content: center; }
.sb-name {
  max-width: 100%; padding: .08em .45em; border: 0; border-radius: .35em; background: none; color: inherit; cursor: text;
  font: 650 max(13px, min(10cqh, 9cqw))/1.2 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s;
}
.sb-name:hover { background: rgba(255, 255, 255, .16); }
.sb-team .sb-name-in {
  width: 88cqw; min-height: 0; padding: .05em .35em; text-align: center; border: 0; border-radius: .35em;
  font: 650 max(13px, min(10cqh, 9cqw))/1.2 var(--font-display); background: rgba(255, 255, 255, .95); color: #18212d;
}
.sb-team .sb-name-in:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }

.sb-score {
  width: 100%; min-height: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sb-score:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: -4px; border-radius: 12px; }
.sb-digits {
  --d: 1;
  font: 700 min(50cqh, calc(80cqw / var(--d)))/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  text-shadow: 0 .025em 0 rgba(0, 0, 0, .16), 0 .05em .12em rgba(0, 0, 0, .2);
}
.sb-team.is-light .sb-digits { text-shadow: 0 .03em 0 rgba(255, 255, 255, .4); }
.sb-digits.is-up { animation: sb-bump .45s cubic-bezier(.2, 1.7, .4, 1); }
.sb-digits.is-down { animation: sb-dip .4s ease-out; }
@keyframes sb-bump { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-2deg); } 100% { transform: none; } }
@keyframes sb-dip { 0% { transform: none; } 35% { transform: translateY(6%) scale(.9); opacity: .7; } 100% { transform: none; } }

.sb-btns { display: flex; justify-content: center; align-items: center; gap: max(6px, 3cqw); width: 100%; padding: 0 4cqw; }
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .15em;
  height: max(36px, min(17cqh, 19cqw)); min-width: max(36px, min(17cqh, 19cqw)); padding: 0;
  border: 0; border-radius: 999px; cursor: pointer; color: inherit;
  font: 700 max(14px, min(8.5cqh, 8cqw))/1 var(--font-display); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
  transition: transform .08s, background .12s;
}
.sb-btn .icon { width: 1.05em; height: 1.05em; stroke-width: 3; }
.sb-btn:hover { background: rgba(255, 255, 255, .28); }
.sb-btn:active { transform: scale(.93); }
.sb-plus {
  padding: 0 .9em 0 .7em; min-width: min(40cqw, 12em);
  background: rgba(255, 255, 255, .94); color: color-mix(in srgb, var(--tc) 72%, #000);
  box-shadow: 0 .5cqh 0 rgba(0, 0, 0, .18), 0 1cqh 2cqh rgba(0, 0, 0, .15);
}
.sb-plus:hover { background: #fff; }
.sb-team.is-light .sb-minus { background: rgba(0, 0, 0, .08); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); }
.sb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.sb-keys { position: absolute; top: 3cqh; right: 3cqw; display: flex; gap: .3em; font-size: max(10px, 3.6cqh); opacity: .75; pointer-events: none; }
.sb-keys kbd { padding: .1em .45em; border: 0; border-radius: .35em; background: rgba(255, 255, 255, .2); color: inherit; font: 600 1em/1.2 var(--font); box-shadow: none; }
.sb-team.is-light .sb-keys kbd { background: rgba(0, 0, 0, .1); }

.sb-float {
  position: absolute; left: var(--x, 50%); top: 42%; pointer-events: none; z-index: 2;
  font: 800 max(16px, 13cqh)/1 var(--font-display); color: #fff;
  text-shadow: 0 .05em .1em rgba(0, 0, 0, .3);
  animation: sb-float .95s cubic-bezier(.2, .8, .3, 1) forwards;
}
.sb-team.is-light .sb-float { color: #1d1d22; text-shadow: none; }
.sb-float.is-neg { opacity: .8; }
@keyframes sb-float {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  20% { transform: translate(-50%, -6cqh) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -32cqh) scale(1); opacity: 0; }
}

@container (max-height: 280px) {
  .sb-keys { display: none; }
}
/* A small panel (a Board widget): the buttons move beside the score. */
@container (max-height: 230px) {
  .sb-in {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head head" "minus score plus"; align-items: center; column-gap: 2cqw;
    padding: 4cqh 4cqw 6cqh;
  }
  .sb-crown { position: absolute; top: 3cqh; left: 4cqw; margin: 0; width: min(18cqh, 14cqw); z-index: 1; }
  .sb-head { grid-area: head; }
  .sb-name { font-size: max(12px, min(17cqh, 9cqw)); }
  .sb-score { grid-area: score; height: 100%; }
  .sb-digits { font-size: min(64cqh, calc(52cqw / var(--d))); }
  .sb-btns { display: contents; }
  .sb-minus { grid-area: minus; }
  .sb-plus { grid-area: plus; min-width: 0; padding: 0; }
  .sb-plus span { display: none; }
  .sb-btn { height: max(32px, min(30cqh, 16cqw)); min-width: max(32px, min(30cqh, 16cqw)); }
}

/* ---- end of the game: the podium ---- */
.sb-end {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 2.4cqmin, 28px);
  padding: clamp(10px, 3cqmin, 40px);
  background: color-mix(in srgb, var(--stage-bg) 88%, transparent); backdrop-filter: blur(8px);
  animation: sb-in .3s ease-out;
}
@keyframes sb-in { from { opacity: 0; } }
.sb.is-ending .t-controls { display: none; }
.sb-end-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 94%; }
.sb-end-head .sb-crown { width: clamp(28px, 9cqmin, 120px); margin: 0 0 .2em; opacity: 1; transform: none; animation: sb-crown-in .6s cubic-bezier(.2, 1.6, .4, 1) .8s backwards; }
@keyframes sb-crown-in { from { opacity: 0; transform: translateY(-60%) scale(.4) rotate(-20deg); } }
.sb-end-title {
  font: 650 clamp(13px, 3.6cqmin, 42px)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  color: color-mix(in srgb, var(--stage-ink) 60%, transparent);
}
.sb-end-name {
  font: 750 clamp(22px, 9cqmin, 150px)/1.05 var(--font-display); overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--tc) 82%, var(--stage-ink));
  animation: t-pop .6s cubic-bezier(.2, 1.6, .4, 1) .55s backwards;
}
.sb-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 1.4cqmin, 18px);
  width: min(92cqw, 130cqh); height: min(44cqh, 40cqw); flex: none;
}
.sb-step { flex: 1 1 0; min-width: 0; max-width: 32%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sb-step-name {
  max-width: 100%; margin-bottom: .35em; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 650 clamp(12px, 3.2cqmin, 40px)/1.15 var(--font-display);
}
.sb-step-block {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: .2em; padding-top: .5em;
  border-radius: clamp(8px, 1.6cqmin, 20px) clamp(8px, 1.6cqmin, 20px) 0 0; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 80%, #fff), var(--tc) 40%, color-mix(in srgb, var(--tc) 75%, #000));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
  transform-origin: 50% 100%; animation: sb-rise .55s cubic-bezier(.2, 1.25, .4, 1) backwards;
}
.sb-step.is-light .sb-step-block { color: #1d1d22; }
.sb-step.is-p1 .sb-step-block { height: 72%; animation-delay: .34s; }
.sb-step.is-p2 .sb-step-block { height: 52%; animation-delay: .17s; }
.sb-step.is-p3 .sb-step-block { height: 36%; animation-delay: 0s; }
@keyframes sb-rise { from { transform: scaleY(0); } }
.sb-step-place { font: 800 clamp(16px, 6.4cqmin, 100px)/1 var(--font-display); text-shadow: 0 .04em .1em rgba(0, 0, 0, .2); }
.sb-step-score { font-size: clamp(11px, 2.4cqmin, 28px); font-weight: 650; opacity: .92; font-variant-numeric: tabular-nums; }
.sb-end-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.6cqmin, 18px); }

/* ---- settings ---- */
.sb-set-teams .set-body { display: grid; gap: 8px; }
.sb-swatches .swatch { width: 26px; height: 26px; }
.sb-set-help { margin: 4px 0 0; }