/* Fonts are served from this site: its security header allows nothing from elsewhere. */
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 500;
  font-display: swap;
  src: url('/king-of-the-court/fonts/barlow-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 600;
  font-display: swap;
  src: url('/king-of-the-court/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-display: swap;
  src: url('/king-of-the-court/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 800;
  font-display: swap;
  src: url('/king-of-the-court/fonts/barlow-condensed-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Orbitron';
  font-weight: 400;
  font-display: swap;
  src: url('/king-of-the-court/fonts/orbitron-400.woff2') format('woff2');
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

:root {
  --bg: #0b0d12;
  --board: rgba(16, 18, 24, 0.94);
  --line: rgba(255, 255, 255, 0.16);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --panel: #161922;
  --panel-line: rgba(255, 255, 255, 0.1);
  --gold: #f2c94c;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: radial-gradient(120% 70% at 50% 0%, #1b2233 0%, transparent 60%), var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.crown {
  width: 14px;
  height: 11px;
  color: var(--gold);
  flex: none;
}

/* ---------- Top bar ---------- */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 6px;
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.brand {
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--muted);
}
.brand b {
  color: var(--gold);
  font-weight: 800;
}
.top-actions {
  display: flex;
  gap: 8px;
}
.icon-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
}
.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}

/* ---------- The four panels ----------
   One layout: the board is a flex line of four panels in a fixed order
   (countdown, kingside, challenger, next up). Portrait stacks them, landscape
   puts them side by side. Each panel only adapts its own inside. */
/* Full width of the screen, so the colour strips reach its edges; the panels'
   own padding keeps text and buttons off the edge. */
.board {
  flex: 1;
  min-height: 0;
  background: var(--board);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  overflow: hidden;
}
.panel {
  --px: 18px;
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 10px var(--px);
  display: flex;
  flex-direction: column;
}
.label {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Countdown */
.clock {
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
}
.clock .time {
  font-family: 'Orbitron', monospace;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.clock .hint {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.clock.paused .time {
  opacity: 0.55;
}
.clock.ending .time {
  color: #ff6b5e;
}

/* Kingside and challenger */
.team {
  flex: 1 1 0;
  gap: 6px;
}
/* Same order as a Next up line: points, colour, name — only bigger */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.row .score {
  flex: none;
  min-width: 1.2ch;
  text-align: right;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.row .who {
  min-width: 0;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Team colour: a slanted block, as in the TV graphic, so it never looks like
   the rounded button. Every slanted shape leans by --lean (horizontal shift per
   unit of height); the stripe angle atan(1 / --lean) = 109.3deg follows it,
   so stripes run parallel to the slanted ends at any size. */
:root {
  --lean: 0.35;
}
.indicator,
.bar {
  --h: 44px;
  height: var(--h);
  clip-path: polygon(
    calc(var(--h) * var(--lean)) 0,
    100% 0,
    calc(100% - var(--h) * var(--lean)) 100%,
    0 100%
  );
}
.indicator {
  flex: none;
  width: calc(var(--h) * 1.9);
  background:
    repeating-linear-gradient(109.3deg, rgba(255, 255, 255, 0.08) 0 5px, transparent 5px 13px),
    linear-gradient(109.3deg, var(--c) 0%, var(--c) 40%, var(--c2) 100%);
}
.team.bump .score {
  animation: bump 0.45s ease-out;
}
@keyframes bump {
  0% {
    transform: scale(1.4);
    color: var(--gold);
  }
  100% {
    transform: scale(1);
  }
}
.win {
  margin: auto; /* centred in the space under the team indicator */
  width: min(100%, 300px);
  min-height: 64px;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--c), var(--c2));
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--ink, #fff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3px;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.win:active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.win .title {
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.win .effect {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* Next up */
/* Waiting teams use the same row as the playing teams, at a smaller size */
/* bottom padding holds the font's descenders, which would otherwise trigger a scrollbar */
.next ol {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 6px;
  display: grid;
  gap: 6px;
  overflow: auto;
  min-height: 0;
}
.next .row {
  gap: 10px;
  margin-top: 0;
}
.next .row .score {
  font-size: 28px;
}
.next .row .indicator {
  --h: 22px;
}
.next .row .who {
  font-size: 18px;
}
.next .empty {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
}

/* ---------- Portrait: stacked ---------- */
@media (orientation: portrait) {
  .board {
    flex-direction: column;
  }
  .panel + .panel {
    border-top: 1px solid var(--line);
  }
  .clock {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--px);
  }
  .clock .label {
    display: none;
  }
  .clock .time {
    font-size: 38px;
  }
  .row .score {
    font-size: 52px;
  }
  /* The playing teams never shrink; a long queue scrolls inside Next up */
  .team {
    flex: 1 0 auto;
  }
  .next {
    flex: 0 1 auto;
  }
}

/* ---------- Landscape: side by side, like the TV bar ---------- */
@media (orientation: landscape) {
  .board {
    flex-direction: row;
  }
  .panel + .panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--line);
  }
  .clock {
    flex: none;
    width: clamp(130px, 17vw, 240px);
    justify-content: flex-start;
    gap: 6px;
  }
  .clock .time {
    font-size: clamp(30px, 4.6vw, 64px);
    margin-top: 4px;
  }
  .row .score {
    font-size: clamp(40px, 5vw, 68px);
  }
  .next {
    flex: 1 1 0;
  }
}
/* Short landscape (phones): trim vertical space everywhere */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar {
    padding-top: 6px;
    padding-bottom: 4px;
  }
  .brand {
    font-size: 12px;
  }
  .icon-btn {
    height: 32px;
  }
  .board {
    margin-bottom: 8px;
  }
  .panel {
    --px: 16px;
    padding: 8px var(--px);
  }
  .label {
    font-size: 14px;
  }
  .indicator {
    --h: 34px;
  }
  .row .who {
    font-size: 22px;
  }
  .next .row .score {
    font-size: 24px;
  }
  .next .row .indicator {
    --h: 18px;
  }
  .next .row .who {
    font-size: 16px;
  }
  .win {
    min-height: 58px;
  }
  .win .title {
    font-size: 21px;
  }
  .win .effect {
    font-size: 13px;
  }
}
/* Big landscape screens (tablet, TV, laptop) */
@media (orientation: landscape) and (min-height: 600px) {
  .panel {
    --px: 24px;
    padding: 16px var(--px);
  }
  .label {
    font-size: 19px;
  }
  .row .who {
    font-size: 34px;
  }
  .indicator {
    --h: 50px;
  }
  .next .row .score {
    font-size: 36px;
  }
  .next .row .indicator {
    --h: 28px;
  }
  .next .row .who {
    font-size: 22px;
  }
  .next li {
    min-width: 0;
  }
  .win {
    width: min(100%, 360px);
    min-height: 84px;
  }
  .win .title {
    font-size: 30px;
  }
  .win .effect {
    font-size: 17px;
  }
}

/* A team's score, colour and name share one strip of the team colour, strong
   at the left and fading to the right. The strip spans the full width of its
   panel, reaching into the panel padding (--px) on both sides; the text keeps it. */
.row {
  margin-left: calc(-1 * var(--px));
  margin-right: calc(-1 * var(--px));
  padding: 5px var(--px);
  gap: 10px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--c) 36%, transparent) 0%,
    color-mix(in srgb, var(--c) 7%, transparent) 100%
  );
}
.next ol {
  margin-left: calc(-1 * var(--px));
  margin-right: calc(-1 * var(--px));
  gap: 3px;
}
.next .row {
  margin-left: 0;
  margin-right: 0;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ---------- Toast ---------- */
/* Shown in the top bar in place of the title, so it never covers a button */
.status {
  position: relative;
  min-width: 0;
  flex: 1;
  margin-right: 8px;
}
.toast {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand {
  transition: opacity 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status.show .toast {
  opacity: 1;
}
.status.show .brand {
  opacity: 0;
}

/* ---------- Teams sheet ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.scrim.open {
  opacity: 1;
  pointer-events: auto;
}
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92dvh;
  overflow: auto;
  background: var(--panel);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--panel-line);
  transform: translateY(105%);
  transition: transform 0.25s ease;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  max-width: 640px;
  margin: 0 auto;
}
.sheet.open {
  transform: none;
}
.sheet header {
  position: sticky;
  top: 0;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--panel-line);
  z-index: 1;
}
.sheet h2 {
  margin: 0;
  font-size: 18px;
}
.sheet section {
  padding: 12px 16px;
}
.sheet h3 {
  margin: 6px 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.team-row {
  display: grid;
  grid-template-columns: 22px 40px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-line);
}
.team-row .pos {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}
.team-row .chip {
  width: 40px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--c), var(--c2));
}
.team-row .chip[aria-expanded='true'] {
  border-color: #fff;
}
.team-row input {
  width: 100%;
  min-width: 0;
  background: #0f1218;
  border: 1px solid var(--panel-line);
  color: var(--text);
  border-radius: 8px;
  height: 38px;
  padding: 0 10px;
  font-size: 16px;
}
.adjust {
  display: flex;
  align-items: center;
  gap: 2px;
}
.adjust .val {
  min-width: 2.2ch;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mini {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--panel-line);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.remove {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
}
.remove:disabled {
  opacity: 0.25;
}
.remove svg {
  width: 18px;
  height: 18px;
}
.palette {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  padding: 4px 0 6px;
}
.palette button {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--c), var(--c2));
  padding: 0;
  position: relative;
}
.palette button.sel {
  border-color: #fff;
}
.palette button.taken::after {
  content: '';
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}
.add {
  width: 100%;
  margin-top: 12px;
  height: 44px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background: transparent;
  font-weight: 600;
}
.add:disabled {
  opacity: 0.35;
}
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-line);
}
.field select {
  background: #0f1218;
  color: var(--text);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  height: 36px;
  padding: 0 8px;
  font-size: 15px;
}
.danger {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 94, 0.5);
  background: transparent;
  color: #ff8a80;
  font-weight: 600;
  margin-top: 4px;
}
.note {
  color: var(--muted);
  font-size: 13px;
  margin: 6px 0 0;
}

/* ---------- Final standings ---------- */
.final {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(5, 6, 10, 0.85);
  padding: 16px;
  overflow: auto;
}
.final.open {
  display: grid;
}
.final .card {
  background: var(--board);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  width: min(460px, 100%);
  padding: 20px;
}
.final h2 {
  margin: 0 0 4px;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.final h2 .crown {
  width: 26px;
  height: 20px;
}
.final .subtitle {
  color: var(--muted);
}
.final ol {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.final li {
  display: grid;
  grid-template-columns: 2ch 36px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}
.final li .bar {
  --h: 16px;
  background: linear-gradient(109.3deg, var(--c) 40%, var(--c2));
}
.final li:first-child {
  color: var(--gold);
}
.final .actions {
  display: flex;
  gap: 10px;
}
.final .actions button {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.final .actions button.primary {
  background: #fff;
  color: #000;
  border-color: #fff;
}