@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bc-600.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bc-700.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bc-800.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/bc-600i.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;src:url(fonts/bc-700i.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url(fonts/bc-800i.woff2) format('woff2')}@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/b-500.woff2) format('woff2')}@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/b-600.woff2) format('woff2')}@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/b-700.woff2) format('woff2')}:root {
  color-scheme: dark;
  /* SMASH OUT (2.0 look) — Midnight obsidian, royal arena glass, white, and Championship Gold as the main accent. */
  --bg-0: #06090f;
  --bg-1: #0b1019;
  --bg-2: #121a27;
  --bg-3: #1b2536;
  --glass: rgba(9, 12, 17, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(245, 196, 81, 0.24);
  --fg: #f2f4f7;
  --fg-2: rgba(244, 246, 250, 0.76);
  --fg-3: rgba(244, 246, 250, 0.52);
  /* Championship Gold: the main action, your serve, what is yours */
  --accent: #d9f23f;
  --accent-ink: #0b0f14;
  --gold: #f2c443;
  --bad: #f0524a;
  --ink: #0b0f14;
  /* (names the game's indicators already use) */
  --lime: #dcff3c;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r: 6px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* the indicators: their scale (set by the game from the screen: 1 on a 390 px phone), their dark tag and edge */
  --k: 1;
  --pill: rgba(9, 12, 17, 0.86);
  --edge: rgba(0, 0, 0, 0.42);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--ui);
  font-weight: 500;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
}
#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg-0);
}
#c {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#touch {
  position: absolute;
  inset: 0;
  z-index: 2;
}
#fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
#flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: #fffbe8;
  opacity: 0;
}
[hidden] {
  display: none !important;
}
.ic {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* ---------- type ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- buttons ---------- */
button {
  font-family: var(--ui);
  font-weight: 600;
  border: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  background: none;
  touch-action: manipulation;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: var(--r);
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform 0.12s var(--ease), filter 0.15s, background-color 0.15s;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.9);
}
.btn .ic {
  width: 17px;
  height: 17px;
}
.btn small {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.7;
}
.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 28px rgba(217, 242, 63, 0.16);
}
.btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.big {
  min-height: 58px;
  font-size: 22px;
}
@media (hover: hover) {
  .btn:hover,
  .menu-list button:hover,
  .rival:not([disabled]):hover {
    filter: brightness(1.12);
  }
}
.btn-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  color: var(--fg);
  background: rgba(9, 12, 17, 0.6);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- screens ---------- */
#screens {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  pointer-events: auto;
  animation: fadein 0.2s ease-out;
}
.screen > * {
  animation: risein 0.32s var(--ease);
}
.screen.still,
.screen.still > * {
  animation: none;
}
.screen.dim {
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.7), rgba(6, 8, 12, 0.9));
}
@keyframes fadein {
  from {
    opacity: 0;
  }
}
@keyframes risein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* the wordmark */
.logo {
  text-align: center;
}
.logo .w1 {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(46px, 15vw, 86px);
  line-height: 0.9;
  letter-spacing: -0.005em;
  color: var(--fg);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.logo .tour {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  padding-left: 0.42em;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(14px, 4.4vw, 20px);
  letter-spacing: 0.42em;
  color: var(--accent);
}
.logo .tour i {
  width: 26px;
  height: 2px;
  background: currentColor;
  opacity: 0.7;
}
.logo .sub {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* the main menu: the wordmark up top, the court clear in the middle, the menu under the thumb */
.screen.home {
  justify-content: flex-start;
  gap: 12px;
  padding-top: calc(7vh + var(--safe-t));
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.8) 0%, rgba(6, 8, 12, 0.15) 26%, rgba(6, 8, 12, 0.1) 40%, rgba(6, 8, 12, 0.88) 66%, rgba(6, 8, 12, 0.97) 100%);
}
.menu-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: min(360px, 100%);
}
.screen.home .menu-col {
  margin-top: auto;
}
.home .foot {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-align: center;
}
.btn.play {
  justify-content: space-between;
  min-height: 66px;
  padding: 0 18px 0 20px;
  text-align: left;
}
.btn.play .pl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.btn.play .pl b {
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.06em;
}
.btn.play .pl small {
  font-size: 13px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn.play .ic {
  width: 22px;
  height: 22px;
}
.menu-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(11, 15, 21, 0.84);
  box-shadow: inset 0 0 0 1px var(--line);
}
.menu-list button {
  display: grid;
  grid-template-columns: 20px 1fr 16px;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 14px 0 16px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  transition: background-color 0.15s;
}
.menu-list button + button {
  border-top: 1px solid var(--line);
}
.menu-list button:active {
  background: rgba(255, 255, 255, 0.06);
}
.menu-list .ic {
  width: 20px;
  height: 20px;
  color: var(--fg-2);
}
.menu-list .ic:last-child {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}

/* ---------- panels ---------- */
.panel {
  width: min(440px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: rgba(11, 15, 21, 0.95);
  border-radius: 8px;
  padding: 0 18px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
/* the header: back arrow, the event above the title (stays put while the panel scrolls) */
.ph {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -18px 4px;
  padding: 14px 18px 12px 10px;
  background: rgba(11, 15, 21, 0.98);
  border-bottom: 1px solid var(--line);
}
.ph .back {
  flex: none;
  /* (1.0: 48 px, Play's minimum touch target) */
  width: 48px;
  height: 48px;
  margin: -4px 0 -4px -4px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  color: var(--fg);
}
.ph .back:active {
  background: rgba(255, 255, 255, 0.06);
}
.ph .back .ic {
  width: 22px;
  height: 22px;
}
.ph h2,
.panel h2 {
  margin: 1px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.panel p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
}
.panel b {
  color: var(--fg);
  font-weight: 700;
}
.panel h3 {
  margin: 18px 0 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* settings: rows of segmented choices */
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
}
.row.stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r);
  background: var(--bg-0);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button {
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  transition: background-color 0.15s, color 0.15s;
}
.seg button.on {
  background: var(--fg);
  color: var(--ink);
}
.row.stack .seg {
  flex-direction: column;
}
.row.stack .seg button {
  text-align: left;
  padding: 9px 12px;
}
.row:has(+ .set-note) {
  border-bottom: 0;
  padding-bottom: 4px;
}
.panel .set-note {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-3);
}

/* the credits (Settings) */
.panel .set-note .iid {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.02em;
  user-select: all;
  -webkit-user-select: all;
  color: var(--fg-2, #c9ced6);
  word-break: break-all;
}
.panel .set-link {
  margin: 4px 0 14px;
  font-weight: 600;
}
.panel .set-link a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--accent);
}
.panel .credits {
  margin: 0;
  padding: 0 0 6px 18px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-3);
}
.panel .credits li {
  margin: 0 0 6px;
}
.panel .credits a {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* how to play */
.court-mini {
  display: block;
  margin: 12px auto 8px;
  max-width: 100%;
}
.how-s {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.how-s .hn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: var(--accent);
}
.how-s p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.how-s p > b:first-child {
  display: block;
  margin-bottom: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- the draw (the pairs) ---------- */
.ladder {
  display: flex;
  flex-direction: column;
}
.rival {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 4px 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.rival:last-child {
  border-bottom: 0;
}
.rival.next {
  background: linear-gradient(90deg, rgba(217, 242, 63, 0.1), rgba(217, 242, 63, 0) 75%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rival.locked {
  opacity: 0.45;
  cursor: default;
}
.rival:not([disabled]):active {
  background-color: rgba(255, 255, 255, 0.05);
}
.rival .rt {
  min-width: 0;
}
.rival .rd {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rival.next .rd {
  color: var(--accent);
}
.rival .nm {
  margin-top: 1px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.seed {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 18px;
  margin-right: 7px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--fg);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  vertical-align: 2px;
}
.rival .tg {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--fg-2);
}
.rival .st {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.st .ok {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.st .ok .ic {
  width: 15px;
  height: 15px;
  color: var(--accent);
  stroke-width: 2.6;
}
.st .nx {
  padding: 3px 7px 2px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
}
.st .lk .ic {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
/* difficulty: five bars that grow, the first ones lit */
.lvl {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.lvl i {
  width: 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.lvl i:nth-child(1) {
  height: 6px;
}
.lvl i:nth-child(2) {
  height: 8px;
}
.lvl i:nth-child(3) {
  height: 10px;
}
.lvl i:nth-child(4) {
  height: 12px;
}
.lvl i:nth-child(5) {
  height: 14px;
}
.lvl i.on {
  background: var(--fg);
}
/* a player's tile: initials on dark, the kit colour as a bar under */
.av {
  width: 46px;
  height: 46px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1f2833, #121821);
  box-shadow: inset 0 -3px 0 var(--tc, var(--fg-3)), inset 0 0 0 1px var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.av .ic {
  width: 60%;
  height: 60%;
  margin-top: 8%;
  color: var(--fg-2);
}
.av.num {
  font-size: 22px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.rival .duo {
  position: relative;
  width: 46px;
  height: 46px;
}
.rival .duo .av {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 12px;
  box-shadow: inset 0 -2px 0 var(--tc, var(--fg-3)), 0 0 0 2px #0b0f15;
}
.rival .duo .av:first-child {
  left: 0;
  top: 0;
}
.rival .duo .av:last-child {
  right: 0;
  bottom: 0;
}

/* ---------- player cards (attributes 0–99): the overall big, the seven bars, the kit's colour along the top ---------- */
/* a rating's band: its number and bar (85+ lime, 75+ green, 65+ gold, under that orange) */
.t1 {
  --tier: var(--accent);
}
.t2 {
  --tier: #8fdc6a;
}
.t3 {
  --tier: var(--gold);
}
.t4 {
  --tier: #f08c4a;
}
.pcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 10px 10px 11px;
  border-radius: var(--r);
  text-align: left;
  color: var(--fg);
  background: linear-gradient(180deg, #1d2531, #121821 70%);
  box-shadow: inset 0 3px 0 var(--tc, var(--fg-3)), inset 0 0 0 1px var(--line-2), 0 10px 24px rgba(0, 0, 0, 0.32);
  transition: transform 0.12s var(--ease), filter 0.15s;
}
button.pcard:active {
  transform: scale(0.98);
  filter: brightness(1.1);
}
.pc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pc-ovr {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  min-width: 34px;
  line-height: 1;
}
.pc-ovr b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 31px;
  letter-spacing: -0.01em;
  color: var(--tier);
}
.pc-ovr small {
  margin-top: 1px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-3);
}
.pc-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.pc-id small,
.pc-id b,
.pc-st {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-id small {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-2);
}
.pc-id b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pc-st {
  margin-top: 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pc-attrs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* one attribute: its name, the bar, the number */
.pa {
  display: grid;
  grid-template-columns: 27px 1fr 19px;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
}
.pa span {
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.pa i {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.pa i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  border-radius: 2px;
  background: var(--tier);
}
.pa b {
  text-align: right;
  font-weight: 800;
  font-size: 13px;
  color: var(--tier);
}
/* the whole card (your pair, a card opened from the match card) */
.pcard.full {
  gap: 12px;
  padding: 16px 16px 18px;
}
.pcard.full .pc-top {
  gap: 12px;
}
.pcard.full .pc-ovr {
  min-width: 56px;
}
.pcard.full .pc-ovr b {
  font-size: 52px;
}
.pcard.full .pc-ovr small {
  font-size: 12px;
}
.pcard.full .pc-id small {
  font-size: 14px;
}
.pcard.full .pc-id b {
  font-size: 30px;
}
.pcard.full .pc-st {
  font-size: 12.5px;
  color: var(--fg-2);
}
.pcard.full .av {
  flex: none;
  width: 52px;
  height: 52px;
  font-size: 20px;
}
.pcard .pc-tag {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--fg-2);
}
.pc-info {
  display: block;
  margin-bottom: 3px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pcard.full .pc-attrs {
  gap: 8px;
}
.pcard.full .pa {
  grid-template-columns: 104px 1fr 28px;
  gap: 10px;
  font-size: 15px;
}
.pcard.full .pa span {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pcard.full .pa i {
  height: 7px;
  border-radius: 3px;
}
.pcard.full .pa b {
  font-size: 18px;
}
/* a card opened over the match card: a tap anywhere closes it */
.pc-modal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: rgba(6, 8, 12, 0.8);
  animation: fadein 0.15s ease-out;
}
.pc-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, 100%);
  animation: risein 0.25s var(--ease);
}
/* your pair (from the menu): the pair's overall, then the two whole cards */
.panel.team .team-o {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px 14px;
}
.team-o > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.team-o b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.team-o small {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-3);
}
.pc-two {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* a pair's overall in the draw */
.ovr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--display);
  line-height: 1;
}
.ovr-chip b {
  font-weight: 800;
  font-size: 22px;
  color: var(--tier);
}
.ovr-chip small {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}
.rival.locked .ovr-chip b {
  color: var(--fg-2);
}

/* ---------- the match card (before a match): both pairs, their overall and their players' cards ---------- */
.screen.vs-screen {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.vs-card {
  flex: none;
  width: min(440px, 100%);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.vs-head .eyebrow {
  justify-content: center;
}
.vs-round {
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(32px, 10vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}
.vs-teams {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 26px;
  width: 100%;
}
.vs-teams .x {
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  color: var(--fg-3);
}
.vt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.vt-h {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  text-align: left;
}
.vt.them .vt-h {
  flex-direction: row-reverse;
  text-align: right;
}
.vt-n {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vt-n b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.vt-n b .seed {
  margin-right: 4px;
  min-width: 16px;
  height: 15px;
  font-size: 11.5px;
  vertical-align: 1px;
}
.vt-n small {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
}
.vt-c {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vs-tag {
  max-width: 340px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--fg-2);
}
.vs-go {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(320px, 100%);
}

/* ---------- pause ---------- */
.panel.pause {
  width: min(360px, 100%);
  padding-top: 20px;
  text-align: center;
}
.pause .eyebrow {
  justify-content: center;
}
.panel.pause h2 {
  margin: 4px 0 14px;
  font-weight: 800;
  font-style: italic;
  font-size: 36px;
}
.pause-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -4px 0 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.pause-score b {
  min-width: 1.2em;
  font-size: 30px;
  font-weight: 700;
  color: var(--fg);
}
.pause-score i {
  width: 10px;
  height: 2px;
  background: var(--fg-3);
}
.pause-pts {
  margin: -12px 0 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.pause-pts b {
  margin-left: 4px;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.panel .tip {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-2);
}
.panel .tip > .ic {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--gold);
}
.panel .tip b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- end of a match (and of a challenge) ---------- */
.end {
  width: min(400px, 100%);
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  scrollbar-width: none;
}
.end-a,
.end-b {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.end .eyebrow {
  justify-content: center;
}
.result {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(50px, 16vw, 78px);
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.result.lose {
  color: var(--fg-2);
}
.final-board {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fr {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
}
.fr + .fr {
  border-top: 1px solid var(--line);
}
.fr i {
  width: 5px;
  align-self: stretch;
}
.fr .nm {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr.w .nm {
  color: var(--fg);
}
.fr .wk .ic {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  color: var(--accent);
  stroke-width: 2.6;
}
.fr .sc {
  width: 58px;
  align-self: stretch;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.06);
}
.fr.w .sc {
  color: var(--ink);
  background: var(--fg);
}
/* (the best of three: the games of each set, small, before the sets) */
.fr .st {
  width: 24px;
  align-self: stretch;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.fr .st.w {
  color: var(--fg);
}
.champ {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.champ .ic {
  width: 22px;
  height: 22px;
}
.stats {
  padding: 2px 14px 4px;
  border-radius: var(--r);
  background: rgba(11, 15, 21, 0.86);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
}
.stats h3 {
  margin: 9px 0 5px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--fg-2);
}
.sr b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.end .btn small {
  margin-left: 2px;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  top: calc(8px + var(--safe-t));
  left: calc(8px + var(--safe-l));
  right: calc(8px + var(--safe-r));
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
#hud .icon-btn {
  pointer-events: auto;
}
/* the pause button: a 44 px touch target, quiet */
#pauseBtn {
  width: 44px;
  height: 44px;
  background: rgba(9, 12, 17, 0.36);
}
#pauseBtn .ic {
  width: 15px;
  height: 15px;
  opacity: 0.92;
}
/* ---------- TV graphics ---------- */
/* (2.0) the TV package, as the circuit's broadcasts dress it: midnight navy glass, the circuit's gold, white type in
   the condensed face; the crest on the bug, the cards and the sting. Everything slides or rolls in, nothing pops. */
:root {
  --tv-navy: #0a1230;
  --tv-navy-2: #14204a;
  --tv-glass: linear-gradient(180deg, rgba(18, 28, 62, 0.95), rgba(8, 13, 32, 0.95));
  --tv-gold: linear-gradient(180deg, #ffd969, #eaa92b);
  --tv-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}
/* the flags (the country codes of the tour's players), drawn in CSS: no images */
.flag {
  display: inline-block;
  flex: none;
  width: calc(14px * var(--k));
  height: calc(10px * var(--k));
  margin-right: 5px;
  vertical-align: -0.05em;
  border-radius: 1.5px;
  background: #556;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.flag.img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.flag.ESP { background: linear-gradient(#c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%); }
.flag.ARG { background: radial-gradient(circle, #f6b40e 0 13%, transparent 15%), linear-gradient(#74acdf 0 33%, #fff 33% 67%, #74acdf 67%); }
.flag.FRA { background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 67%, #ef4135 67%); }
.flag.ITA { background: linear-gradient(90deg, #009246 0 33%, #fff 33% 67%, #ce2b37 67%); }
.flag.BEL { background: linear-gradient(90deg, #111 0 33%, #fdda24 33% 67%, #ef3340 67%); }
.flag.MEX { background: radial-gradient(circle, #8c5a2b 0 12%, transparent 14%), linear-gradient(90deg, #006847 0 33%, #fff 33% 67%, #ce1126 67%); }
.flag.NED { background: linear-gradient(#ae1c28 0 33%, #fff 33% 67%, #21468b 67%); }
.flag.PAR { background: linear-gradient(#d52b1e 0 33%, #fff 33% 67%, #0038a8 67%); }
.flag.POR { background: linear-gradient(90deg, #046a38 0 40%, #da291c 40%); }
.flag.BRA { background: radial-gradient(circle, #002776 0 18%, transparent 20%), radial-gradient(ellipse 46% 40% at 50% 50%, #ffdf00 0 96%, transparent 100%), #009c3b; }
.flag.URU { background: radial-gradient(circle at 20% 28%, #fcd116 0 13%, transparent 15%), linear-gradient(90deg, #fff 0 38%, transparent 38%) 0 0 / 100% 55% no-repeat, repeating-linear-gradient(#fff 0 11.1%, #0038a8 11.1% 22.2%); }
.flag.CHI { background: radial-gradient(circle at 17% 25%, #fff 0 9%, transparent 11%), linear-gradient(90deg, #0039a6 0 34%, transparent 34%) 0 0 / 100% 50% no-repeat, linear-gradient(#fff 0 50%, #d52b1e 50%); }
.flag.USA { background: linear-gradient(90deg, #3c3b6e 0 42%, transparent 42%) 0 0 / 100% 54% no-repeat, repeating-linear-gradient(#b22234 0 15.4%, #fff 15.4% 30.8%); }
.flag.GBR { background: linear-gradient(#c8102e, #c8102e) center / 100% 20% no-repeat, linear-gradient(#c8102e, #c8102e) center / 14% 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 36% no-repeat, linear-gradient(#fff, #fff) center / 26% 100% no-repeat, #012169; }
.flag.SWE { background: linear-gradient(#fecc00, #fecc00) 0 50% / 100% 22% no-repeat, linear-gradient(#fecc00, #fecc00) 34% 0 / 16% 100% no-repeat, #006aa7; }
svg.crest {
  width: 1em;
  height: 1em;
  flex: none;
}

/* the score bug: the crest on gold, then two rows (team colour, flags and names, serve, sets, games, points); the
   pause button stays on the right */
#hud .tvbug {
  transition: opacity 0.35s, transform 0.45s var(--ease);
}
/* (during the intro only the pause button shows) */
#hud.tv-off .tvbug {
  opacity: 0;
  transform: translateX(-24px);
}
.tvbug {
  display: flex;
  align-items: stretch;
  min-width: calc(160px * var(--k));
  max-width: min(calc(290px * var(--k)), calc(100vw - 72px));
  border-radius: 3px;
  overflow: hidden;
  background: var(--tv-glass);
  box-shadow: var(--tv-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(14.5px * var(--k));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: bugin 0.5s var(--ease);
}
.tvbug .bb {
  flex: none;
  width: calc(22px * var(--k));
  display: grid;
  place-items: center;
  background: var(--tv-gold);
  color: var(--tv-navy);
  --crest-ink: #f5c451;
  font-size: calc(15px * var(--k));
}
.tvbug .rows {
  flex: 1;
  min-width: 0;
}
.tvbug .tr {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(24px * var(--k));
  overflow: hidden;
}
.tvbug .tr + .tr {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.tvbug .tc {
  width: 4px;
  align-self: stretch;
  flex: none;
  background: var(--tc);
}
.tvbug .nm {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  /* (3 px top and bottom: the legs' bar under your name fits, 0.7) */
  padding: 3px 5px 3px 7px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-2);
}
.tvbug .nm .flag {
  margin-right: 4px;
}
.tvbug .nm span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tvbug .tr.serving .nm {
  color: var(--fg);
}
.tvbug .nm i:not(.flag) {
  font-style: normal;
  margin: 0 4px;
  opacity: 0.4;
}
/* 0.7: your legs, a thin bar under your name (main.ts sets --f, the fit 0 … 1; amber when tired) */
.tvbug .nm span.me {
  --f: 1;
  padding-bottom: 2px;
  background: linear-gradient(to right, rgba(245, 196, 81, 0.9) calc(var(--f) * 100%), rgba(255, 255, 255, 0.16) 0) no-repeat left bottom / 100% 2px;
}
.tvbug .nm span.me.tired {
  background-image: linear-gradient(to right, #ff8a3a calc(var(--f) * 100%), rgba(255, 255, 255, 0.16) 0);
}
/* (doubles: who of the two serves) */
.tvbug .tr.serving .nm span.on:not(:only-child) {
  color: var(--accent);
}
.tvbug .sv {
  flex: none;
  min-width: calc(16px * var(--k));
  padding: 0 3px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.tvbug .sv .ball {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6b0, #e8d23a 60%, #b9a21c);
  box-shadow: 0 0 6px rgba(245, 220, 80, 0.7);
  animation: srvin 0.4s var(--ease);
}
.tvbug .sv .no {
  font-size: calc(10.5px * var(--k));
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}
/* padel: the games of the set, then the points of the game (0 · 15 · 30 · 40 · AD; the tie-break's numbers), the
   points on gold */
.tvbug .sc,
.tvbug .pt,
.tvbug .st {
  flex: none;
  width: calc(25px * var(--k));
  align-self: stretch;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  font-size: calc(16.5px * var(--k));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--fg);
}
.tvbug .pt {
  width: calc(32px * var(--k));
  background: var(--tv-gold);
  color: var(--tv-navy);
  font-weight: 800;
}
.tvbug .tr + .tr .pt {
  box-shadow: inset 0 1px 0 rgba(10, 18, 48, 0.25);
}
/* padel 0.5, the best of three: a column with the sets before the games (smaller, dimmer) */
.tvbug.sets {
  max-width: min(calc(310px * var(--k)), calc(100vw - 72px));
}
.tvbug .st {
  width: calc(20px * var(--k));
  background: rgba(255, 255, 255, 0.03);
  font-size: calc(13.5px * var(--k));
  color: var(--fg-2);
}
.tvbug .st span {
  display: block;
}
.tvbug .st span.flip {
  animation: flip 0.55s var(--ease);
  color: var(--accent);
}
.tvbug.tb .pt {
  background: linear-gradient(180deg, #fff, #dfe5ee);
}
.tvbug .sc > span,
.tvbug .pt > span {
  display: grid;
  place-items: center;
}
/* (2.0) a number that changed rolls up: the old one out at the top, the new one in from below */
.tvbug .roll > * {
  grid-area: 1 / 1;
  font-weight: inherit;
  text-decoration: none;
}
.tvbug .roll s {
  animation: rollout 0.42s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.tvbug .roll b {
  animation: rollin 0.5s 0.12s var(--ease) backwards;
}
.tvbug .sc .roll b {
  color: var(--accent);
  animation: rollin 0.5s 0.12s var(--ease) backwards, gamegold 1.6s 0.2s ease-out;
}
@keyframes rollout {
  to {
    transform: translateY(-120%);
    opacity: 0;
  }
}
@keyframes rollin {
  from {
    transform: translateY(120%);
    opacity: 0;
  }
}
@keyframes gamegold {
  0%,
  60% {
    color: var(--accent);
  }
  100% {
    color: var(--fg);
  }
}
@keyframes bugin {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
}
/* the bug and, under it, what the moment of the game is (golden point, deuce, advantage, tie-break, match point) */
.bugwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.tv-state {
  display: flex;
  gap: 3px;
  animation: tagin 0.28s var(--ease);
}
.tv-state span {
  padding: 3px 8px 2px;
  border-radius: 2px;
  background: var(--tv-glass);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(11px * var(--k));
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.tv-state span.gold,
.tv-state span.mp {
  background: var(--tv-gold);
  color: var(--tv-navy);
  box-shadow: none;
}
.tv-state span.mp {
  background: linear-gradient(180deg, #ff4359, #c8142c);
  color: #fff;
}
.tv-state span.tb,
.tv-state span.sp {
  color: var(--gold);
}
/* (with that line the bug is taller: the umpire's call and the point's tag go under it) */
.bug-st .tv-call,
.bug-st #banner {
  top: calc(var(--safe-t) + 8px + 77px * var(--k));
}
/* the row that scored: a light sweeps along it; the row that won the game flashes in its colour */
.tvbug .tr.scored::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 220, 120, 0.32) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 0.75s ease-out forwards;
  pointer-events: none;
}
.tvbug .tr.won::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tc);
  opacity: 0;
  animation: wonflash 1.3s ease-out;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes wonflash {
  15% {
    opacity: 0.55;
  }
}
@keyframes flip {
  from {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@keyframes sweep {
  to {
    transform: translateX(100%);
  }
}
@keyframes srvin {
  from {
    transform: scale(0);
  }
}

.tv-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
/* the umpire's call before each serve: one slim strip under the score bug (centred; in landscape, under the bug at
   the left, over the stands: the far player stands high in that frame and the hint has the top centre) */
.tv-call {
  position: absolute;
  top: calc(var(--safe-t) + 8px + 56px * var(--k));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(26px * var(--k));
  padding: 0 11px 0 10px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--tv-glass);
  box-shadow: var(--tv-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--display);
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.25s, clip-path 0.35s var(--ease);
}
.tv-call.on {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
@media (orientation: landscape) {
  .tv-call {
    left: calc(8px + var(--safe-l));
    right: auto;
    margin: 0;
  }
}
.tv-call .nums.word {
  font-size: calc(15px * var(--k));
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tv-call .lb {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: -10px;
  padding: 0 9px;
  font-weight: 800;
  font-size: calc(11.5px * var(--k));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tv-navy);
  background: var(--tv-gold);
}
.tv-call .lb.plain {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}
.tv-call .nums {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: calc(17px * var(--k));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tv-call .nums i {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
}
.tv-call .who {
  font-weight: 600;
  font-size: calc(12.5px * var(--k));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.tv-call.mp {
  box-shadow: 0 0 16px rgba(242, 196, 67, 0.25), inset 0 0 0 1px rgba(242, 196, 67, 0.7);
}

/* the intro's title card: the circuit's crest and LIVE, the event on navy with a gold edge, the round on white, the
   two pairs under it; it wipes open from the middle */
.tv-card {
  position: absolute;
  top: calc(12% + var(--safe-t));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.5s var(--ease), opacity 0.2s;
}
.tv-card.on {
  opacity: 1;
  clip-path: inset(-20px 0 -40px 0);
}
.tv-card .t0 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 4px;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: calc(14px * var(--k));
  letter-spacing: 0.16em;
  color: var(--tv-navy);
  background: var(--tv-gold);
  --crest-ink: #f5c451;
}
.tv-card .t0 .crest {
  font-size: calc(17px * var(--k));
}
.tv-card .t0 em {
  margin-left: 4px;
  padding: 2px 6px 1px;
  font-style: normal;
  font-size: calc(10.5px * var(--k));
  letter-spacing: 0.18em;
  color: #fff;
  background: #e5213a;
  border-radius: 2px;
  animation: livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse {
  50% {
    opacity: 0.55;
  }
}
.tv-card .t1 {
  padding: 10px 26px 8px;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(32px, 9.5vw, 58px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: var(--tv-glass);
  border-top: 3px solid var(--accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.tv-card .t2 {
  padding: 5px 14px 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(13px * var(--k));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--fg);
}
.tv-card .t3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 6px 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(15px * var(--k));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(8, 13, 32, 0.82);
  border-radius: 2px;
  animation: risein 0.5s 0.35s var(--ease) backwards;
}
.tv-card .t3 i:not(.flag) {
  font-style: normal;
  margin: 0 5px;
  opacity: 0.4;
}
.tv-card .t3 b {
  font-style: italic;
  font-weight: 800;
  color: var(--accent);
}
@media (max-width: 560px) {
  .tv-card .t3 {
    flex-direction: column;
    gap: 2px;
  }
}

/* the name straps (lower third): the seed or WC on the team's colour, the two players (flag, country, first name,
   surname), the seed and ranking under them; it wipes in from the left */
.tv-strap {
  position: absolute;
  left: calc(12px + var(--safe-l));
  bottom: calc(18px + var(--safe-b));
  max-width: calc(100% - 24px - var(--safe-l) - var(--safe-r));
  display: flex;
  align-items: stretch;
  border-radius: 3px;
  overflow: hidden;
  background: var(--tv-glass);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s var(--ease), opacity 0.2s;
}
.tv-strap.on {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.tv-strap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--tv-gold);
}
.tv-strap .tc {
  flex: none;
  min-width: 6px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  font-style: normal;
}
.tv-strap .tc:empty {
  padding: 0;
}
.tv-strap .bd {
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(19px * var(--k));
  letter-spacing: 0.02em;
}
.tv-strap .sx {
  min-width: 0;
  padding: 7px 16px 9px 12px;
}
.tv-strap .nm {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(23px * var(--k));
  line-height: 1.05;
  letter-spacing: 0.03em;
}
.tv-strap .nm i {
  font-style: normal;
  color: var(--fg-3);
}
.tv-strap .tg {
  margin-top: 3px;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(12.5px * var(--k));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.tv-strap .lb {
  margin-bottom: 1px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(12px * var(--k));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.tv-strap .sc {
  margin-left: 4px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* (2.0) the intro's strap: a tile a player */
.tv-strap.intro .tc {
  padding: 0 13px;
}
.tv-strap.intro .bd {
  font-size: calc(24px * var(--k));
}
.tv-strap .pls {
  display: flex;
  gap: 0;
}
.tv-strap .pl {
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: risein 0.45s var(--ease) backwards;
}
.tv-strap .pl + .pl {
  animation-delay: 0.12s;
  margin-left: calc(16px * var(--k));
  padding-left: calc(16px * var(--k));
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.tv-strap .pl .cn {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(11px * var(--k));
  letter-spacing: 0.16em;
  color: var(--fg-3);
}
.tv-strap .pl .fn {
  margin-top: 1px;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(13px * var(--k));
  letter-spacing: 0.1em;
  color: var(--fg-2);
}
.tv-strap .pl b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: calc(27px * var(--k));
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-strap.intro .tg {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--accent);
}

/* (2.0) the moment's card: golden point, set point, match point (and the tie-break's start), under the bug for a
   moment before the serve; the words on a slanted slab, a line under it, a glint across */
.tv-moment {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s, transform 0.4s var(--ease);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  z-index: 2;
}
@media (orientation: portrait) {
  .tv-moment {
    top: calc(var(--safe-t) + 8px + 92px * var(--k));
  }
}
.tv-moment.on {
  opacity: 1;
  transform: none;
}
.tv-moment b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 24px 5px;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: calc(30px * var(--k));
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tv-navy);
  background: var(--tv-gold);
  --crest-ink: #f5c451;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  overflow: hidden;
}
.tv-moment b .crest {
  font-size: 0.8em;
}
.tv-moment.on b {
  animation: momentin 0.5s var(--ease);
}
.tv-moment b::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-120%);
}
.tv-moment.on b::after {
  animation: glint 1.1s 0.35s ease-out forwards;
}
.tv-moment small {
  margin-top: -1px;
  padding: 4px 14px 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(11.5px * var(--k));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: var(--tv-navy);
}
.tv-moment small:empty {
  display: none;
}
.tv-moment.match b {
  color: #fff;
  background: linear-gradient(180deg, #ff4359, #c5122a);
  --crest-ink: #c5122a;
}
.tv-moment.set b {
  color: var(--accent);
  background: var(--tv-glass);
  box-shadow: inset 0 0 0 2px var(--accent);
  --crest-ink: #0a1230;
}
.tv-moment .gl {
  display: none;
}
@keyframes momentin {
  from {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  }
}
@keyframes glint {
  to {
    transform: translateX(120%);
  }
}

/* (2.0) the TV stats at a changeover: the two pairs, a line a stat with its bars in the teams' colours */
.tv-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(22px + var(--safe-b));
  margin: 0 auto;
  width: min(520px, calc(100% - 24px));
  border-radius: 3px;
  overflow: hidden;
  background: var(--tv-glass);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--display);
  text-transform: uppercase;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s var(--ease), opacity 0.25s;
}
.tv-stats.on {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
.tv-stats .h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 5px;
  font-weight: 800;
  font-style: italic;
  font-size: calc(14px * var(--k));
  letter-spacing: 0.14em;
  color: var(--tv-navy);
  background: var(--tv-gold);
  --crest-ink: #f5c451;
}
.tv-stats .h em {
  margin-left: auto;
  font-style: italic;
  opacity: 0.7;
}
.tv-stats .tm {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  font-weight: 700;
  font-size: calc(14px * var(--k));
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tv-stats .tn {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-stats .tn:last-child {
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.tv-stats .tn i {
  flex: none;
  width: 4px;
  height: 1.1em;
  background: var(--tc);
}
.tv-stats .tm .sc {
  padding: 2px 8px;
  font-weight: 800;
  font-size: calc(17px * var(--k));
  color: var(--tv-navy);
  background: var(--tv-gold);
  font-variant-numeric: tabular-nums;
}
.tv-stats .r {
  display: grid;
  grid-template-columns: calc(54px * var(--k)) 1fr calc(54px * var(--k));
  align-items: center;
  padding: 5px 12px 4px;
  animation: risein 0.4s var(--ease) backwards;
}
.tv-stats .r:nth-child(3) { animation-delay: 0.1s; }
.tv-stats .r:nth-child(4) { animation-delay: 0.16s; }
.tv-stats .r:nth-child(5) { animation-delay: 0.22s; }
.tv-stats .r:nth-child(6) { animation-delay: 0.28s; }
.tv-stats .r:nth-child(7) { animation-delay: 0.34s; }
.tv-stats .r:nth-child(8) { animation-delay: 0.4s; }
.tv-stats .r + .r {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tv-stats .r > b {
  font-weight: 800;
  font-size: calc(19px * var(--k));
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.tv-stats .r > b:last-child {
  text-align: right;
}
.tv-stats .r > b.hi {
  color: var(--accent);
}
.tv-stats .r > b small {
  margin-left: 2px;
  font-size: 0.55em;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.tv-stats .l {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: calc(11.5px * var(--k));
  letter-spacing: 0.14em;
  color: var(--fg-2);
}
.tv-stats .l i {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 4px;
  gap: 2px;
}
.tv-stats .l em {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform-origin: right;
  animation: barin 0.7s 0.3s var(--ease) backwards;
}
.tv-stats .l em:first-child {
  background: var(--accent);
}
.tv-stats .l em:last-child {
  transform-origin: left;
}
@keyframes barin {
  from {
    transform: scaleX(0);
  }
}
.tv-stats .f {
  padding: 6px 12px 7px;
  text-align: center;
  font-weight: 600;
  font-size: calc(11.5px * var(--k));
  letter-spacing: 0.14em;
  color: var(--fg-3);
  background: rgba(0, 0, 0, 0.18);
}
@media (orientation: landscape) and (max-height: 560px) {
  .tv-stats .r {
    padding: 2px 12px 2px;
  }
  .tv-stats .f {
    display: none;
  }
}

/* replays: the tag in the corner (a red dot that blinks, REPLAY, the shot) and soft bars top and bottom */
.tv-replay {
  position: absolute;
  top: calc(60px + var(--safe-t));
  right: calc(8px + var(--safe-r));
  display: flex;
  align-items: stretch;
  height: 28px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--tv-glass);
  box-shadow: var(--tv-shadow);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.16em;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.25s, transform 0.3s var(--ease);
}
.tv-replay b {
  display: grid;
  place-items: center;
  width: 28px;
  color: var(--tv-navy);
  background: var(--tv-gold);
}
.tv-replay b .ic {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}
.tv-replay .sh {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--gold);
}
.tv-replay span {
  display: flex;
  align-items: center;
  padding: 0 10px 0 9px;
}
.tv-replay span:not(.sh)::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ff3b4f;
  animation: livepulse 1s ease-in-out infinite;
}
.tv-replay.on {
  opacity: 1;
  transform: none;
}
.tv-layer::before,
.tv-layer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  opacity: 0;
  transition: opacity 0.3s;
}
.tv-layer::before {
  top: 0;
  background: linear-gradient(rgba(4, 6, 14, 0.72), transparent);
}
.tv-layer::after {
  bottom: 0;
  background: linear-gradient(transparent, rgba(4, 6, 14, 0.72));
}
.tv-layer.replay::before,
.tv-layer.replay::after {
  opacity: 1;
}
.tv-skip {
  position: absolute;
  right: calc(14px + var(--safe-r));
  bottom: calc(14px + var(--safe-b));
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.tv-skip.on {
  opacity: 0.8;
}
.tv-skip::after {
  content: ' ›';
  color: var(--accent);
}
/* while the intro, a replay or the victory shot is on, a tap anywhere skips it (the pause button still works) */
.tv-skiplayer {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
}
.tv-skiplayer.on {
  display: block;
}
/* the replay sting: a white edge, a gold band and the navy wall sweep across one after another, the circuit's crest
   and the event in the middle; the cut happens while it covers the screen */
.tv-sting {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.tv-sting.run {
  visibility: visible;
}
.tv-sting i {
  position: absolute;
  top: -5%;
  bottom: -5%;
  left: 50%;
  width: calc(100vw + 80vh);
  margin-left: calc(-50vw - 40vh);
  background: radial-gradient(ellipse at 50% 50%, #1a2a5e, #0a1230 60%, #060a1c);
  transform: translateX(-130%) skewX(-18deg);
}
.tv-sting i.s2 {
  width: 34vw;
  margin-left: -17vw;
  background: var(--tv-gold);
}
.tv-sting i.s3 {
  width: 6vw;
  margin-left: -3vw;
  background: #fff;
}
.tv-sting i::before,
.tv-sting i::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
}
.tv-sting i:first-child::after {
  right: -10px;
  width: 10px;
  background: var(--accent);
}
.tv-sting.run i {
  animation: sting 0.56s cubic-bezier(0.55, 0.1, 0.45, 0.9) forwards;
}
.tv-sting.run i.s2 {
  animation: sting2 0.56s cubic-bezier(0.55, 0.1, 0.45, 0.9) forwards;
}
.tv-sting.run i.s3 {
  animation: sting3 0.56s cubic-bezier(0.55, 0.1, 0.45, 0.9) forwards;
}
.tv-sting b {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -0.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(30px, 9vw, 60px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--fg);
  opacity: 0;
  white-space: nowrap;
}
.tv-sting b .crest {
  color: var(--accent);
  --crest-ink: #0a1230;
  font-size: 0.9em;
}
.tv-sting b .e {
  padding: 0.04em 0.3em 0;
  font-size: 0.5em;
  letter-spacing: 0.12em;
  color: var(--tv-navy);
  background: var(--tv-gold);
}
.tv-sting.run b {
  animation: stingmark 0.56s ease-in-out forwards;
}
@keyframes sting {
  to {
    transform: translateX(130%) skewX(-18deg);
  }
}
/* (the gold band ahead of the wall and the white edge ahead of the gold) */
@keyframes sting2 {
  0% {
    transform: translateX(-280%) skewX(-18deg);
  }
  100% {
    transform: translateX(420%) skewX(-18deg);
  }
}
@keyframes sting3 {
  0% {
    transform: translateX(-1400%) skewX(-18deg);
  }
  100% {
    transform: translateX(2200%) skewX(-18deg);
  }
}
/* (only while the band covers the middle of the screen) */
@keyframes stingmark {
  0%,
  34% {
    opacity: 0;
    transform: translateX(-16px) scale(0.96);
  }
  44%,
  58% {
    opacity: 1;
    transform: none;
  }
  68%,
  100% {
    opacity: 0;
    transform: translateX(16px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv-sting.run i,
  .tv-sting.run i.s2,
  .tv-sting.run i.s3 {
    animation: stingfade 0.3s linear forwards;
    transform: none;
  }
  .tv-sting i.s2,
  .tv-sting i.s3 {
    display: none;
  }
  .tv-sting.run b {
    animation: stingfade 0.3s linear forwards;
  }
  .tvbug .roll s,
  .tvbug .roll b,
  .tvbug .sc .roll b,
  .tvbug .tr.won::before,
  .tvbug .tr.scored::after,
  .tv-moment.on b,
  .tv-stats .l em {
    animation: none;
  }
  .tvbug .roll s {
    display: none;
  }
  .tv-strap,
  .tv-card,
  .tv-call,
  .tv-stats {
    transition: opacity 0.2s;
    transform: none;
    clip-path: none;
  }
}
@keyframes stingfade {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* the point's result: a tag under the score bug, away from the play */
#banner {
  position: absolute;
  left: calc(8px + var(--safe-l));
  top: calc(var(--safe-t) + 8px + 56px * var(--k));
  max-width: calc(100% - 16px - var(--safe-l) - var(--safe-r));
  z-index: 6;
  pointer-events: none;
}
#banner .b1 {
  display: inline-block;
  padding: 5px 11px 4px 12px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(16px * var(--k));
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--glass);
  box-shadow: inset 4px 0 0 var(--tagc, var(--fg)), 0 6px 16px rgba(0, 0, 0, 0.3);
  animation: tagin 0.28s var(--ease);
}
#banner .b1.good {
  --tagc: var(--accent);
  color: var(--accent);
}
#banner .b1.bad {
  --tagc: var(--bad);
  color: #ff8a80;
}
/* a serve fault or a let: the point goes on (a second serve, the serve again) */
#banner .b1.warn {
  --tagc: var(--gold);
  color: var(--gold);
}
/* the line under it that says why, with a number from the point (src/explain.ts): the same tag, plain type, two
   lines at most on a narrow phone */
#banner .b1.has-why {
  padding-bottom: 6px;
}
/* whose point it is, small over the reason (the colour alone does not say it) */
#banner .b1 .who {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  font-size: calc(11px * var(--k));
  letter-spacing: 0.14em;
  opacity: 0.85;
}
#banner .b1 .why {
  display: block;
  margin-top: 3px;
  max-width: min(calc(100vw - 44px - var(--safe-l) - var(--safe-r)), calc(330px * var(--k)));
  font-family: var(--ui);
  font-weight: 600;
  font-size: calc(12.5px * var(--k));
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
#banner .b2 {
  margin: 4px 0 0 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(12px * var(--k));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8);
}
@keyframes tagin {
  from {
    transform: translateX(-14px);
    opacity: 0;
  }
}

/* a word beside the hitter's head (timing, shot): small, outlined, quick */
.fl {
  position: absolute;
  transform: translate(-50%, -100%);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: calc(15px * var(--k));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.6);
  animation: rise 0.75s ease-out forwards;
}
.fl.perfect {
  color: var(--gold);
  font-size: calc(18px * var(--k));
}
.fl.good,
.fl.early,
.fl.late {
  font-style: normal;
  font-weight: 700;
  font-size: calc(14px * var(--k));
  letter-spacing: 0.12em;
}
.fl.good {
  color: #fff;
}
.fl.early,
.fl.late {
  color: #ffb3a6;
}
/* 0.7: a flick that was read (the attack's orange), and an early or late release with the assisted swing (small, no
   cost: only so the gold can be learnt) */
.fl.attack {
  color: #ffa24a;
  font-size: calc(17px * var(--k));
}
.fl.soft {
  font-style: normal;
  font-weight: 700;
  font-size: calc(12px * var(--k));
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.82);
}
/* a shot over the head, by name (any timing: which one came out), its timing small under it */
.fl.shot {
  color: #fff;
  font-size: calc(16px * var(--k));
}
.fl small {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-weight: 700;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  text-align: center;
}
.fl.long {
  animation-duration: 1.15s;
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -70%);
  }
  18%,
  65% {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%);
  }
}

/* the timing ring around the ball: a thin ring that closes onto a small one (both with a dark edge) */
.ring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.ring.target {
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px var(--edge);
}
.ring.outer {
  border: calc(2.5px * var(--k)) solid #fff;
  box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--edge);
}
.ring.outer.gold {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--edge), 0 0 8px rgba(255, 210, 58, 0.55);
}
.ring.target.gold {
  border-color: var(--gold);
  background: rgba(255, 210, 58, 0.22);
}
.ring.outer.late {
  border-color: var(--bad);
}
/* (the assisted swing past the gold window: no fault, it plays a plain shot) */
.ring.outer.past {
  border-color: #9aa3ad;
}

/* (2.0, táctil) capas and franja's selector draws here (src/touch/selector.ts: its buttons, its band); touches go through */
.sel-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* (2.0, táctil: capas, src/touch/capas.ts) The buttons under the right thumb in the TV package's glass, each in its
   class's colour (--c: the chip's, the mark's): GOLPE always (its contour faint with no ball of yours, whole on one),
   ATAQUE and EFECTO rolled in only when the ball allows them. The one a cue asks for glows; the one held swells and the
   others fade. Translucent, under the timing ring and the chip: the ball shows through. Touches go through them (the
   selector's cells take the finger, not these boxes). */
.capas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--display);
  color: #fff;
}
.cp-b {
  --c: 255, 255, 255;
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 6px;
  border-radius: 50%;
  /* (1.8.3) Germán, 23 oct, «que no sean tan visibles»: a thinner glass and ring (0.26/0.5/0.66 and 0.9 before);
     (1.9) 25 oct, «más discretos» again: 0.16/0.3/0.42 and 0.6 → 0.1/0.18/0.28 and 0.45 */
  background: radial-gradient(120% 120% at 50% 18%, rgba(var(--c), 0.1), rgba(18, 28, 62, 0.18) 55%, rgba(8, 13, 32, 0.28));
  box-shadow: inset 0 0 0 1.25px rgba(var(--c), 0.45), inset 0 0 0 2.5px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.14);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s));
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), box-shadow 0.16s;
  will-change: transform, opacity;
}
/* the edge's tab (EFECTO in portrait): squared on the edge, round inside */
.cp-b.tab {
  border-radius: 20px 5px 5px 20px;
  padding: 0 4px;
}
.capas.lefty .cp-b.tab {
  border-radius: 5px 20px 20px 5px;
}
.cp-g {
  display: block;
  width: calc(17px * var(--k));
  height: calc(17px * var(--k));
  color: rgb(var(--c));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.cp-g svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cp-n {
  max-width: 100%;
  font-weight: 800;
  /* (1.9) a little smaller and softer, the buttons drawn smaller */
  font-size: calc(13.5px * var(--k));
  color: rgba(255, 255, 255, 0.86);
  line-height: 0.95;
  letter-spacing: 0.05em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.cp-n.long {
  font-size: calc(12.5px * var(--k));
  letter-spacing: 0.03em;
}
.cp-k {
  font-weight: 700;
  font-size: calc(10.5px * var(--k));
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgb(var(--c));
  opacity: 0.7;
  white-space: nowrap;
}
.cp-b.tab .cp-n {
  font-size: calc(12.5px * var(--k));
}
.cp-b.tab .cp-k {
  letter-spacing: 0.08em;
}
/* not on this ball: rolled out */
.cp-b[data-s='off'] {
  --s: 0.7;
  opacity: 0;
}
/* GOLPE with no ball of yours: its contour only, faint */
.cp-b[data-s='idle'] {
  opacity: 0.16;
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.cp-b[data-s='idle'] .cp-n,
.cp-b[data-s='idle'] .cp-k {
  visibility: hidden;
}
/* GOLPE sits over the near fence's banner in portrait: a fuller glass, so the banner's words do not run through it */
.cp-b.cp-place[data-s='on'] {
  background: radial-gradient(120% 120% at 50% 18%, rgba(var(--c), 0.1), rgba(14, 22, 50, 0.32) 55%, rgba(6, 10, 26, 0.4));
}
/* (2.0, capas-fix: one voice) the one held has no name: the chip by the mark says the shot and the press's state */
.cp-b.held .cp-n,
.cp-b.held .cp-k {
  visibility: hidden;
}
/* the one held swells, the others fade */
.cp-b.held {
  --s: 1.08;
  background: radial-gradient(120% 120% at 50% 18%, rgba(var(--c), 0.34), rgba(18, 28, 62, 0.42) 62%, rgba(8, 13, 32, 0.5));
  box-shadow: inset 0 0 0 2px rgba(var(--c), 0.85), 0 0 12px rgba(var(--c), 0.3), 0 4px 12px rgba(0, 0, 0, 0.22);
}
.capas.pressing .cp-b[data-s='on']:not(.held) {
  opacity: 0.22;
}
/* the ball's timing ring over it, or (ATAQUE, EFECTO) your player or your partner under it: its contour and its name
   only, faint, the ball and the players under it seen (2.0, capas-fix) */
.cp-b.clear {
  opacity: 0.42;
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.9);
}
.cp-b.clear .cp-g {
  visibility: hidden;
}
/* (2.0, capas-fix) the bands of GOLPE held, on the court: CORTA (green) from the net, GLOBO (sky blue) past their glass,
   crossed out in grey where a volley has none; the one the mark is in lit */
.cp-zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cp-z polygon {
  fill: rgba(var(--zc), 0.1);
  stroke: rgba(var(--zc), 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}
.cp-z text {
  fill: rgba(var(--zc), 0.85);
  font-family: var(--display);
  font-weight: 800;
  font-size: calc(13px * var(--k));
  letter-spacing: 0.12em;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 3px;
}
.cp-z.short {
  --zc: 110, 232, 122;
}
.cp-z.lob {
  --zc: 108, 200, 255;
}
.cp-z.on polygon {
  fill: rgba(var(--zc), 0.13);
  stroke: rgba(var(--zc), 0.4);
  stroke-width: 1;
  stroke-dasharray: none;
}
.cp-z.on text {
  fill: rgb(var(--zc));
}
/* (1.9) only the band the mark is in (capas.ts drawZones) */
.cp-z.off {
  display: none;
}
.cp-z.lob.no {
  --zc: 154, 163, 173;
}
.cp-z.lob.no text {
  text-decoration: line-through;
}
.cp-x {
  display: none;
}
.cp-z.no .cp-x {
  display: inline;
  stroke: rgba(154, 163, 173, 0.8);
  stroke-width: 2;
}
/* the cue it plays (ATACA, BAJADA, BLOQUEA): a pulse in its colour */
.cp-b.hot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: cp-hot 0.9s ease-out infinite;
}
@keyframes cp-hot {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--c), 0.8);
  }
  100% {
    box-shadow: 0 0 0 13px rgba(var(--c), 0);
  }
}
/* its name or its tint changed: a flash */
.cp-b.flip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(var(--c), 0.55);
  opacity: 0;
  animation: cp-flip 0.42s ease-out;
}
@keyframes cp-flip {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* in landscape EFECTO sits under the speed radar's pill (H2: 716, 100): the pill goes under the tactic's column instead */
@media (orientation: landscape) {
  #app:has(> #fx > .sel-layer:not([hidden]) > .capas:not([hidden])) > .pt-radar {
    top: calc(var(--safe-t) + 200px);
    right: calc(var(--safe-r) + 8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-b {
    transition: none;
  }
  .cp-b.hot::after {
    animation: none;
    box-shadow: 0 0 0 4px rgba(var(--c), 0.55);
  }
}
/* the shot's name, beside the landing mark (a dot of its colour and the word) */
.chip {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(20px * var(--k));
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 0 7px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(13px * var(--k));
  line-height: 1;
  letter-spacing: 0.1em;
  background: var(--pill);
  pointer-events: none;
  white-space: nowrap;
}
/* (1.3) the shot changed while aiming: a short flash in its colour */
.chip.flip {
  animation: chip-flip 0.4s ease-out;
}
@keyframes chip-flip {
  0% {
    box-shadow: 0 0 0 calc(3px * var(--k)) currentColor;
    background: rgba(255, 255, 255, 0.28);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    background: var(--pill);
  }
}
.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* the timing ring's small copy, in place of the dot while the big one is on (the big one sits under the thumb):
   a fixed target and a ring closing onto it, white, gold in the window, red or grey past it */
.chip .mr {
  display: none;
  position: relative;
  flex: none;
  width: calc(16px * var(--k));
  height: calc(16px * var(--k));
}
.chip.timed::before {
  display: none;
}
.chip.timed .mr {
  display: block;
}
.chip .mr::before,
.chip .mr i {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.chip .mr::before {
  width: 5px;
  height: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.chip .mr i {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #fff;
  transform: translate(-50%, -50%) scale(calc(0.42 + 0.58 * var(--r, 1)));
}
.chip .mr.gold::before {
  border-color: var(--gold);
  background: var(--gold);
}
.chip .mr.gold i {
  border-color: var(--gold);
  box-shadow: 0 0 6px rgba(255, 210, 58, 0.6);
}
.chip .mr.late i {
  border-color: var(--bad);
}
.chip .mr.past i {
  border-color: #9aa3ad;
}
/* over the head, while aiming: what each flick plays (↑ remate, ⇈ por 3, ↖↗ víbora, ↓ por 4), small, under the name */
.fan {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: calc(170px * var(--k));
  pointer-events: none;
}
.fan span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: calc(17px * var(--k));
  padding: 0 6px 0 5px;
  border-radius: 3px;
  background: var(--pill);
  color: #ffb36b;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(11px * var(--k));
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.fan b {
  color: #fff;
  font-family: var(--ui);
  font-size: calc(11px * var(--k));
  letter-spacing: 0;
}
/* the power of an attack key held (F, the right button): a bar along the bottom that fills as it is held */
.chip.pw::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, currentColor calc(var(--pw, 0.5) * 100%), rgba(255, 255, 255, 0.15) 0);
}

/* tutorial hint: one short line at the bottom, under the court and between the thumbs */
#hint {
  position: absolute;
  left: 50%;
  bottom: calc(10px + var(--safe-b));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(94vw, 520px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: 4px;
  background: var(--pill);
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
  font-weight: 600;
  font-size: calc(13px * var(--k));
  line-height: 1.25;
  text-align: left;
  z-index: 6;
  pointer-events: none;
  animation: fadein 0.3s;
}
#hint .hand,
#hint .bulb {
  display: grid;
  flex: none;
  color: var(--accent);
}
#hint .ic {
  width: calc(16px * var(--k));
  height: calc(16px * var(--k));
}
#hint .hand .ic {
  animation: tap 1.6s ease-in-out infinite;
}
/* a tip between points (the same mistake keeps coming back): an info icon and a gold edge */
#hint.tip {
  box-shadow: inset 0 0 0 1px rgba(242, 196, 67, 0.55), 0 4px 14px rgba(0, 0, 0, 0.3);
}
#hint.tip .bulb {
  color: var(--gold);
}
/* (landscape: the near player stands at the bottom edge; the hint goes to the top, between the bug and the pause) */
@media (orientation: landscape) {
  #hint {
    top: calc(8px + var(--safe-t));
    bottom: auto;
    max-width: min(calc(100vw - 2 * (150px * var(--k) + var(--safe-l))), 560px);
  }
}
.tv-held #hint,
.tv-held #banner {
  display: none;
}
/* (2.0: the moment's card has the top centre for a moment) */
@media (orientation: landscape) {
  .tv-mo #hint {
    visibility: hidden;
  }
}
@keyframes tap {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.82);
  }
}
#toast {
  position: absolute;
  top: calc(var(--safe-t) + 8px + 86px * var(--k));
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px 3px;
  border-radius: 3px;
  background: var(--pill);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
#toast.on {
  opacity: 1;
}
/* after a point: "Tap to continue", on the right (where the right thumb taps), above the thumbs */
.tap-on {
  position: absolute;
  right: calc(12px + var(--safe-r));
  bottom: calc(var(--safe-b) + 24vh);
  padding: 5px 10px 4px 11px;
  border-radius: 3px;
  background: var(--pill);
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(13px * var(--k));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.tap-on::after {
  content: ' ›';
  color: var(--accent);
}
.tap-on.on {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .tap-on {
    transform: none;
  }
}

/* ---------- the floating stick: a thin ring and a small knob ---------- */
.stick-base,
.stick-knob {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
}
.stick-base {
  width: calc(76px * var(--k));
  height: calc(76px * var(--k));
  background: rgba(10, 22, 36, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.26), 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s;
}
/* the knob: a ring, not a disc (it never hides what is under it) */
.stick-knob {
  width: calc(22px * var(--k));
  height: calc(22px * var(--k));
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s;
}
/* over your partner or yourself: fainter still */
.stick-base.dim,
.stick-knob.dim {
  opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen > * {
    animation: fadein 0.2s ease-out;
  }
  .fl {
    animation: fadeout 0.75s ease-in forwards;
  }
  #banner .b1,
  #hint,
  #hint .hand .ic {
    animation: none;
  }
}
@keyframes fadeout {
  0%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.loading small {
  font-family: var(--ui);
  letter-spacing: 0;
  text-transform: none;
}
.spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- small phones (360 × 640 and the like) ---------- */
@media (max-height: 700px) and (orientation: portrait) {
  .screen {
    gap: 14px;
  }
  .screen.home {
    padding-top: calc(5vh + var(--safe-t));
  }
  .menu-list button {
    height: 44px;
  }
  .btn.play {
    min-height: 60px;
  }
  .vs-card {
    gap: 12px;
  }
  .vs-round {
    font-size: 30px;
  }
  .pc-attrs {
    gap: 2px;
  }
  .pcard {
    gap: 5px;
    padding: 8px 9px 9px;
  }
  .pcard.full {
    gap: 9px;
    padding: 12px 14px 14px;
  }
  .pcard.full .pc-attrs {
    gap: 5px;
  }
  .result {
    font-size: 48px;
  }
  .end,
  .end-a,
  .end-b {
    gap: 11px;
  }
  .sr {
    padding: 5px 0;
  }
  .end .btn {
    min-height: 46px;
  }
}

/* ---------- landscape phones: two columns, nothing taller than the screen ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .screen {
    gap: 12px;
  }
  .screen.home {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: calc(14px + var(--safe-t)) calc(28px + var(--safe-r)) calc(14px + var(--safe-b)) calc(28px + var(--safe-l));
    background: linear-gradient(90deg, rgba(6, 8, 12, 0.88), rgba(6, 8, 12, 0.25) 38%, rgba(6, 8, 12, 0.25) 55%, rgba(6, 8, 12, 0.92) 78%);
  }
  .home-top {
    flex: 1;
  }
  .screen.home .menu-col {
    width: min(340px, 46vw);
    gap: 8px;
    margin-top: 0;
  }
  .home .foot {
    position: absolute;
    left: calc(28px + var(--safe-l));
    bottom: calc(12px + var(--safe-b));
  }
  .btn.play {
    min-height: 54px;
  }
  .btn.play .pl b {
    font-size: 23px;
  }
  .menu-list button {
    height: 40px;
  }
  .screen.vs-screen {
    padding-top: calc(10px + var(--safe-t));
    padding-bottom: calc(10px + var(--safe-b));
  }
  .vs-card {
    width: min(860px, 100%);
    gap: 9px;
  }
  .vs-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
  }
  .vs-round {
    margin-top: 0;
    font-size: 28px;
  }
  .vs-teams {
    column-gap: 40px;
  }
  .vs-teams .x {
    top: 7px;
  }
  .vt {
    gap: 6px;
  }
  .vt-h {
    min-height: 34px;
  }
  .vt-c {
    flex-direction: row;
  }
  .pcard {
    gap: 5px;
    padding: 8px 9px 9px;
  }
  .pc-attrs {
    gap: 2px;
  }
  .vs-tag {
    font-size: 13.5px;
  }
  .panel.team {
    width: min(820px, 100%);
  }
  .pc-two {
    flex-direction: row;
  }
  .panel.team .team-o {
    padding: 6px 2px 8px;
  }
  .pc-two .pcard.full {
    flex: 1;
    gap: 7px;
    padding: 10px 14px 12px;
  }
  .pc-two .pcard.full .pc-attrs {
    gap: 3px;
  }
  .pc-two .pcard.full .pa {
    font-size: 13px;
  }
  .pc-two .pcard.full .pa b {
    font-size: 15px;
  }
  .pc-two .pcard.full .pc-ovr b {
    font-size: 40px;
  }
  .pc-two .pcard.full .pc-id b {
    font-size: 24px;
  }
  .pc-two .pcard.full .av {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  /* (the style line under the name says it in short: the long line would push the bars off the screen) */
  .pc-two .pc-tag {
    font-size: 0;
  }
  .pc-two .pc-tag .pc-info {
    margin: 0;
  }
  .pc-modal .pc-sheet {
    width: min(620px, 100%);
    flex-direction: row;
    align-items: flex-end;
  }
  .pc-modal .pcard.full {
    flex: 1;
    gap: 8px;
    padding: 12px 14px 14px;
  }
  .pc-modal .pcard.full .pc-attrs {
    gap: 4px;
  }
  .vs-go {
    flex-direction: row-reverse;
    width: min(460px, 100%);
  }
  .vs-go .btn {
    flex: 1;
  }
  .vs-go .btn.big {
    min-height: 50px;
    font-size: 19px;
  }
  .end {
    width: min(720px, 100%);
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .end-a,
  .end-b {
    flex: 1;
    gap: 10px;
    min-width: 0;
  }
  .result {
    font-size: 54px;
  }
  .sr {
    padding: 3px 0;
  }
  .end .btn {
    min-height: 42px;
    font-size: 17px;
  }
  /* (the rematch and the menu side by side, under the next round: the column fits the screen) */
  .end-b .btn-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .end-b .btn-col .btn:first-child:nth-last-child(3) {
    grid-column: 1 / -1;
  }
  .panel {
    width: min(560px, 100%);
  }
  .ph {
    padding-top: 10px;
    padding-bottom: 8px;
  }
  .panel.pause {
    padding-top: 14px;
  }
  .panel.pause h2 {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .pause-score {
    margin-bottom: 10px;
  }
  .pause .btn-col {
    flex-direction: row-reverse;
  }
  .pause .btn-col .btn {
    flex: 1;
  }
  .panel .tip {
    margin-top: 12px;
  }
}

/* ---------- 0.7 · training (src/training.ts) ---------- */
.drill-sub {
  margin: 10px 0 4px !important;
  font-size: 14px !important;
  color: var(--fg-2);
}
.drill-row .rb {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.drill-row.daily .av {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.drill-row.daily .av .ic {
  width: 22px;
  height: 22px;
}
.dstars {
  display: inline-flex;
  gap: 1px;
  vertical-align: -0.1em;
}
.dstars .ic {
  width: 1em;
  height: 1em;
}
.dstars .on {
  color: var(--gold);
}
.dstars .off {
  color: rgba(255, 255, 255, 0.2);
}
.drill-row .dstars {
  font-size: 14px;
}
.drill-intro .steps {
  margin: 14px 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: st;
}
.drill-intro .steps li {
  position: relative;
  padding: 0 0 12px 32px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg-2);
  counter-increment: st;
}
.drill-intro .steps li::before {
  content: counter(st);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--bg-3);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
}
.drill-intro .dmeta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 16px;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.drill-intro .dmeta .dstars {
  font-size: 13px;
  margin-left: 4px;
}
/* the challenge's score bug: its name, which ball and the points (the pause button beside it) */
.drillbug {
  max-width: min(calc(220px * var(--k)), calc(100vw - 84px));
  padding: 5px 10px 6px 12px;
  border-radius: 4px;
  background: var(--glass);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 4px 0 0 var(--accent), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(13px * var(--k));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.drillbug .dn {
  font-weight: 600;
  font-size: calc(11px * var(--k));
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drillbug .dl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  color: var(--fg-2);
}
.drillbug .dl b {
  font-weight: 700;
  font-size: calc(16px * var(--k));
  color: var(--fg);
}
.drillbug .dstars {
  font-size: calc(11px * var(--k));
}
.pause-score.drill b {
  font-size: 22px;
}
/* ---------- 1.1 · the shot school (src/training.ts, src/sim/lesson.ts) ---------- */
.drill-row.school {
  background: linear-gradient(90deg, rgba(217, 242, 63, 0.1), rgba(217, 242, 63, 0) 75%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.drill-row.school .av {
  color: var(--accent);
}
.drill-row.school .av .ic {
  width: 24px;
  height: 24px;
}
.drill-row.school .rb .ic {
  width: 11px;
  height: 11px;
  color: var(--gold);
  vertical-align: -1px;
}
.drill-sec {
  padding: 14px 4px 4px 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}
.lesson-intro .ls-what {
  margin: 12px 0 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg-2);
}
.lesson-intro .ls-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lesson-intro .ls-how {
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
}
.lesson-intro .ls-how li {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--r);
  background: var(--bg-3);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg);
}
.lesson-intro .ls-how li b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lesson-intro .ls-goal {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-3);
}
/* on court: the score bug and, under it, what the last ball was and what the control read */
.ls-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.drillbug .ls-side {
  margin-top: 1px;
  font-size: calc(13px * var(--k));
  letter-spacing: 0.1em;
  color: var(--accent);
}
.ls-read {
  max-width: min(calc(300px * var(--k)), calc(100vw - 84px));
  padding: 6px 10px 7px 12px;
  border-radius: 4px;
  background: var(--glass);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 4px 0 0 var(--bad), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  font-size: calc(12px * var(--k));
  line-height: 1.35;
  color: var(--fg-2);
}
.ls-read.brief {
  padding: 4px 9px 4px 11px;
  opacity: 0.85;
}
.ls-read.brief .ls-hd {
  font-size: calc(12px * var(--k));
}
/* a phone upright: a narrower, smaller card (it covered half the court) */
@media (max-width: 520px) {
  .ls-read {
    max-width: calc(100vw - 110px);
    font-size: calc(11px * var(--k));
  }
  .ls-read .ls-how1 {
    display: none;
  }
}
.ls-read.ok {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 4px 0 0 var(--accent), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.ls-read.half {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 4px 0 0 var(--gold), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.ls-read .ls-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(14px * var(--k));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg);
}
.ls-read .ls-hd .ic {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--bad);
}
.ls-read.ok .ls-hd .ic {
  color: var(--accent);
}
.ls-read.half .ls-hd .ic {
  color: var(--gold);
}
.ls-read .ls-hd span {
  margin-left: auto;
  color: var(--fg-3);
}
.ls-read .ls-rd {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ls-read .ls-why {
  margin-top: 2px;
}
.ls-read .ls-how1 {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
}
/* the result: ball by ball */
.ls-log {
  border-radius: var(--r);
  background: rgba(11, 15, 21, 0.86);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ls-log summary {
  padding: 10px 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  cursor: pointer;
}
.ls-log ol {
  margin: 0;
  padding: 0 10px 8px;
  list-style: none;
  max-height: 34vh;
  overflow-y: auto;
}
.ls-log li {
  display: grid;
  grid-template-columns: 18px 14px 1fr auto;
  align-items: start;
  gap: 6px;
  padding: 6px 2px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}
.ls-log li .n {
  font-family: var(--display);
  font-weight: 700;
  color: var(--fg-3);
}
.ls-log li .ic {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--bad);
}
.ls-log li.ok .ic {
  color: var(--accent);
}
.ls-log li.half .ic {
  color: var(--gold);
}
.ls-log li .t b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ls-log li .t i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--fg-3);
}
.ls-log li .t small {
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.ls-log li .p {
  font-family: var(--display);
  font-weight: 700;
  color: var(--fg-2);
}
/* what a ball scored, rising where it landed */
.fl.pts {
  font-style: normal;
  color: var(--accent);
  font-size: calc(19px * var(--k));
}
.fl.pts.big {
  color: var(--gold);
  font-size: calc(22px * var(--k));
}
/* the result of a go */
.drill-result .dname {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(30px, 9vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}
.drill-result .dbig .dstars {
  font-size: 44px;
  gap: 6px;
}
.drill-result .dscore {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
}
.drill-result .dscore b {
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.drill-result .dscore small {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.drill-result .rec {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.drill-result .dstat {
  padding: 12px 14px;
  border-radius: var(--r);
  background: rgba(11, 15, 21, 0.86);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg-2);
}
.drill-result .dnext {
  font-size: 13.5px;
  color: var(--fg-3);
}
@media (prefers-reduced-motion: no-preference) {
  .drill-result .dbig .dstars {
    animation: starsin 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
}
@keyframes starsin {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

/* ---------- 0.7 · the career's end note and your player's card (0.10: the career's own screens are at the end) ---------- */
.end-note {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
/* your player: the attributes with a «+» each */
.improve-p .team-o {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px 12px;
}
.improve-p .team-o > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}
.skill-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--display);
  text-align: right;
}
.skill-left b {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
}
.skill-left small {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.imp-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 14px;
}
.imp-row {
  display: grid;
  grid-template-columns: 92px 1fr 34px 40px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 6px 0 12px;
  border-radius: var(--r);
  background: rgba(11, 15, 21, 0.86);
  box-shadow: inset 0 0 0 1px var(--line);
}
.imp-row .imp-n {
  font-size: 14px;
  font-weight: 600;
}
.imp-row i {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.imp-row i::after {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(var(--v, 0) * 100%);
  border-radius: 3px;
  background: currentColor;
}
.imp-row b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.imp-plus {
  width: 36px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
}
.imp-plus .ic {
  width: 18px;
  height: 18px;
}
.imp-plus.c {
  grid-auto-flow: column;
  gap: 1px;
}
.imp-plus.c .ic {
  width: 14px;
  height: 14px;
}
.imp-plus small {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.imp-plus:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-3);
  cursor: default;
}
.btn.improve {
  flex-direction: column;
  gap: 0;
  min-height: 54px;
}
.btn.improve small {
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.8;
}
@media (max-height: 700px) and (orientation: portrait) {
  .drill-result .dbig .dstars {
    font-size: 34px;
  }
  .drill-result .dscore b {
    font-size: 44px;
  }
  .menu-list button {
    height: 40px;
    font-size: 15px;
  }
}

/* ================================================================== 0.10 · the career (src/career/ui.ts, from the pickleball's 0.11) ========== */
/* the main menu: the career first, the quick match under it, the rest as a grid of tiles */
.btn.quick {
  justify-content: space-between;
  min-height: 50px;
  padding: 0 14px 0 18px;
  text-align: left;
  background: rgba(11, 15, 21, 0.86);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.quick .pl {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.btn.quick .pl b {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: 0.08em;
}
.btn.quick .pl small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.btn.quick > .ic {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(11, 15, 21, 0.84);
  box-shadow: inset 0 0 0 1px var(--line);
}
.menu-grid button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 10px 0 14px;
  text-align: left;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--fg);
  border-top: 1px solid var(--line);
  transition: background-color 0.15s;
}
.menu-grid button:nth-child(-n + 2) {
  border-top: 0;
}
.menu-grid button:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.menu-grid button:active {
  background: rgba(255, 255, 255, 0.06);
}
.menu-grid .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--fg-2);
}
.menu-grid span:not(.tbadge) {
  flex: 1;
  min-width: 0;
}
/* a tile's badge: done today (a check), a new daily challenge (a dot, the streak), a count */
.tbadge {
  flex: none;
  display: inline-grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  color: var(--fg-3);
}
.tbadge.ok .ic {
  width: 15px;
  height: 15px;
  color: var(--accent);
  stroke-width: 2.6;
}
.tbadge.new {
  min-width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
}
.tbadge.new:not(:empty) {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}
@media (hover: hover) {
  .menu-grid button:hover,
  .c-links button:hover {
    filter: brightness(1.12);
  }
}

/* panels of the career */
.panel.career h3 {
  margin: 16px 0 6px;
}
.c-note {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--fg-3);
  text-align: center;
}
.c-dim {
  color: var(--fg-3);
}
/* you: the ranking big, the points, the money */
.c-me {
  display: grid;
  grid-template-columns: 52px auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 12px 0 4px;
}
.c-me .av,
.c-big .av {
  width: 52px;
  height: 52px;
}
.c-rank small,
.sum-grid small,
.c-big small {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.c-rank b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 36px;
  line-height: 1;
}
.mv {
  margin-left: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  vertical-align: 6px;
}
.mv.up {
  color: var(--accent);
}
.mv.down {
  color: var(--bad);
}
.c-pts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 13px;
  color: var(--fg-2);
  white-space: nowrap;
}
.c-money {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
}
.c-next {
  margin-top: 12px;
  padding: 12px 12px 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.c-ev {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
}
.panel.career .c-ev h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.c-meta {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--fg-2);
}
.c-next .seg.mode {
  margin-bottom: 0;
}
.c-next .btn.big,
.drawp .btn.big {
  font-size: 19px;
}
.c-next .btn span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
/* the tier's tag: grey for the small events up to gold for the Finals */
.tier {
  flex: none;
  padding: 3px 6px 2px;
  border-radius: 3px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.1);
}
.tier.t-open250 {
  background: #2b5fa8;
}
.tier.t-open500 {
  background: #6f3b9c;
}
.tier.t-masters {
  background: var(--fg);
  color: var(--ink);
}
.tier.t-finals {
  background: var(--gold);
  color: var(--ink);
}
.c-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.c-links button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: var(--r);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}
.c-links .ic {
  width: 20px;
  height: 20px;
  color: var(--fg-2);
}
/* the calendar: one row an event */
.cal {
  display: flex;
  flex-direction: column;
}
.cal-row {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.cal-row .tier {
  justify-self: start;
}
.cal-row.cur {
  background: linear-gradient(90deg, rgba(217, 242, 63, 0.1), rgba(217, 242, 63, 0) 80%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.cal-row .cn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.cal-row .cs {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--fg-2);
  font-size: 12.5px;
}
.cal-row .cs b {
  font-family: var(--display);
  color: var(--accent);
  font-size: 14px;
}
.cal-row .ok,
.sum-top .champ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold);
  font-weight: 700;
}
.cal-row .ok .ic {
  width: 14px;
  height: 14px;
}
/* (1.1) your partner: the choice at a season's end (pk-row) and, in «Your pair», for quick matches (pk-chip) */
.pk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 4px;
}
.pk-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--tc, var(--line-2));
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.pk-row.on {
  border-color: var(--accent);
  border-left-color: var(--tc, var(--accent));
  box-shadow: 0 0 0 1px var(--accent) inset;
  background: linear-gradient(90deg, rgba(217, 242, 63, 0.1), rgba(217, 242, 63, 0) 80%), var(--bg-2);
}
.pk-row.locked {
  opacity: 0.55;
  cursor: default;
}
.pk-ovr {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--bg-3);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
}
.pk-ovr .ic {
  width: 18px;
  height: 18px;
}
.pk-n {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pk-n b {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pk-n small {
  color: var(--fg-3);
  font-size: 12.5px;
}
.pk-row em {
  font-style: normal;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.pk-now {
  color: var(--fg-2);
  border: 1px solid var(--line-2);
}
.pk-new {
  color: var(--accent-ink);
  background: var(--accent);
}
.c-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0 !important;
  color: var(--accent) !important;
  font-weight: 700;
}
.c-new .ic {
  width: 14px;
  height: 14px;
}
.pk-h {
  margin: 16px 0 8px;
  font-size: 14px;
  color: var(--fg-2);
  text-align: center;
}
.pk-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.pk-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.pk-chip b {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
}
.pk-chip small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--fg-3);
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
}
.pk-chip small .ic {
  flex: none;
  width: 11px;
  height: 11px;
}
.pk-chip.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.pk-chip.locked {
  opacity: 0.5;
  cursor: default;
}
.c-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px 0 12px;
}
.c-big b {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 40px;
  line-height: 1;
}
.intro p {
  color: var(--fg-2);
}
.intro .row {
  margin-bottom: 14px;
}
/* 1.1 · your player: the name's two fields, the starting kit, restarting the career */
.intro h3 {
  margin: 16px 0 6px;
}
.name-f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.name-f label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.name-f label span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.name-f input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 16px;
  outline: none;
}
.name-f input:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.name-f input::placeholder {
  color: var(--fg-3);
}
.name-f .name-h {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--fg-3);
}
.name-f .country-f {
  grid-column: 1 / -1;
}
.name-f .country-pick {
  position: relative;
  display: flex;
  align-items: center;
}
.name-f .cc-prev {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 1;
  display: flex;
  transform: translateY(-50%);
  pointer-events: none;
}
.name-f .cc-prev .flag {
  margin: 0;
}
.name-f select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 38px;
  border: 0;
  border-radius: var(--r);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 16px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.name-f select:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.name-f select option {
  background: var(--bg-2);
  color: var(--fg);
}
.name-f .country-pick::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.namep .name-f {
  margin: 14px 0 16px;
}
.c-kit {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: start;
  gap: 12px;
}
.c-kit-rows h4 {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.c-kit-rows h4:first-child {
  margin-top: 0;
}
.c-kit .kit-sw {
  width: 46px;
  padding: 5px 2px;
}
.c-kit .kit-sw .dot {
  width: 28px;
  height: 28px;
}
.c-reset {
  margin-top: 18px;
}
.btn.danger {
  color: var(--bad);
}
.btn.danger small {
  color: var(--fg-3);
}
.reset p {
  color: var(--fg-2);
}
/* the draw: tabs by round, two lines a match */
.seg.tabs {
  display: flex;
  margin: 12px 0 8px;
  padding: 3px;
  gap: 3px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg.tabs button {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 4px;
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.seg.tabs button.on {
  background: var(--fg);
  color: var(--ink);
}
.dlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm {
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dm.mine {
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.55);
}
.dp {
  display: grid;
  grid-template-columns: 28px 1fr auto 40px;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 0 0 6px;
  font-size: 14px;
  color: var(--fg-2);
}
.dp + .dp {
  border-top: 1px solid var(--line);
}
.dp .seed {
  margin: 0;
  font-size: 11px;
  height: 16px;
  min-width: 18px;
}
.dp .seed.wc {
  background: rgba(255, 255, 255, 0.14);
  color: var(--fg);
  font-size: 10px;
}
.dp .seed.none {
  background: none;
}
.dp .n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.dp .cc {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
.dp .sc {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.dp .sc .ic {
  width: 13px;
  height: 13px;
  color: var(--accent);
  stroke-width: 2.8;
}
.dp.w {
  color: var(--fg);
}
.dp.l {
  opacity: 0.6;
}
.dp.me .n {
  color: var(--accent);
}
.btn-col.sticky {
  position: sticky;
  bottom: -18px;
  margin-top: 12px;
  padding: 10px 0 2px;
  background: linear-gradient(180deg, rgba(11, 15, 21, 0), rgba(11, 15, 21, 0.98) 30%);
}
.btn-col.sticky:empty {
  display: none;
}
/* an event's and a season's result */
.c-reward {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.sum-top {
  margin: 16px 0 6px;
  text-align: center;
}
.sum-top .champ {
  font-size: 26px;
}
.sum-res {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
}
.sum-ch {
  margin-top: 4px;
  font-size: 14px;
  color: var(--fg-2);
}
.sum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.sum-grid > div {
  padding: 8px 10px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
}
.sum-grid b {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  white-space: nowrap;
}
.sum-grid .bonus {
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent);
}
.btn.big2 {
  min-height: 60px;
  text-align: left;
  justify-content: flex-start;
}
.btn.big2 span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.season .cal {
  margin-bottom: 14px;
}
/* the ranking */
.rk-list {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}
.rk {
  display: grid;
  grid-template-columns: 34px 4px 1fr auto 56px;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.rk .pos {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  text-align: right;
  color: var(--fg-2);
}
.rk i {
  align-self: stretch;
  margin: 8px 0;
  border-radius: 1px;
}
.rk .n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.rk.named .n {
  font-weight: 700;
}
.rk .cc {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
.rk b {
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rk.me {
  background: linear-gradient(90deg, rgba(217, 242, 63, 0.14), rgba(217, 242, 63, 0) 85%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rk.me .n,
.rk.me .pos {
  color: var(--accent);
}
.rk-gap {
  padding: 4px 0;
  text-align: center;
  color: var(--fg-3);
  letter-spacing: 0.3em;
}
/* the shop */
.shop-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdcard {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 12px 12px 12px 8px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pdcard.using {
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.55);
}
.psvg {
  width: 52px;
  height: 104px;
}
.pi {
  min-width: 0;
}
.pn {
  color: var(--fg);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pn span {
  font-size: 15px;
  color: var(--gold);
  white-space: nowrap;
}
.pfx {
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg-2);
}
.pfx li.plus::before {
  content: '+ ';
  color: var(--accent);
  font-weight: 700;
}
.pfx li.minus::before {
  content: '− ';
  color: var(--bad);
  font-weight: 700;
}
.pbars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  margin-bottom: 8px;
}
.pbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.pbar .lvl {
  height: 11px;
}
.pact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.btn.small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  gap: 6px;
}
.btn.small[disabled] {
  opacity: 0.55;
  cursor: default;
}
.btn.small.on {
  opacity: 1;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  padding-left: 0;
}
.cw {
  display: flex;
  gap: 6px;
}
.sw {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c) 50%, var(--c2) 50%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line-2);
}
.sw.on {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--accent);
}
.kit-prev {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}
.ksvg {
  width: 96px;
  height: 187px;
}
.shop-body > h3 {
  margin: 8px 0 0;
}
.sws {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kit-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 58px;
  padding: 6px 2px 4px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
}
.kit-sw.on {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.kit-sw .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c) 55%, var(--c2) 55%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line-2);
}
.kit-sw .dot.hw {
  background: #2a3442;
  overflow: hidden;
}
.kit-sw .dot.hw svg {
  display: block;
  width: 100%;
  height: 100%;
}
.kit-sw .dot.none {
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  color: var(--fg-3);
  background: none;
}
.kit-sw small {
  height: 15px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--gold);
  white-space: nowrap;
}
.kit-sw small .ic {
  width: 13px;
  height: 13px;
  color: var(--accent);
  stroke-width: 2.8;
}
.buybar {
  position: sticky;
  bottom: -18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px -18px -18px;
  padding: 10px 18px 14px;
  background: rgba(11, 15, 21, 0.98);
  border-top: 1px solid var(--line);
  font-weight: 600;
}
/* achievements */
.ach-list {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.ach {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.ach .ai .ic {
  width: 22px;
  height: 22px;
  color: var(--fg-3);
}
.ach.done .ai .ic {
  color: var(--gold);
}
.ach .at {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ach .at b {
  font-size: 14.5px;
}
.ach .at small {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--fg-2);
}
.ach:not(.done) .at b {
  color: var(--fg-2);
}
.abar {
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.abar i {
  display: block;
  height: 100%;
  background: var(--fg-2);
}
.ach .ar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
  font-size: 12px;
}
.ach .ar .ok {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.ach .ar small {
  color: var(--gold);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
}
/* the daily challenge */
.dly {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  margin: 14px 0 4px;
}
.dly .av {
  width: 52px;
  height: 52px;
}
.panel.career .dly h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.dly p {
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--fg-2);
}
.streak {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}
.streak i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.streak i.on {
  background: var(--accent);
}
.dly-done,
.dly-res {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.dly-done .ic,
.dly-res .ic {
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
}
.dly-res.no {
  color: var(--fg-2);
}
.dailyp .btn-col {
  margin-bottom: 12px;
}
.pause-daily {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: var(--r);
  text-align: left;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--fg-2);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pause-daily .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.pause-daily b {
  color: var(--accent);
  white-space: nowrap;
}
.pause .btn small {
  display: block;
  font-size: 11.5px;
}
.pause .btn-col .btn.ghost:has(small) {
  flex-direction: column;
  gap: 1px;
}
/* the notice of an achievement: small, at the top, between points (never over a rally) */
.ach-note {
  position: absolute;
  z-index: 30;
  top: calc(64px * var(--k) + var(--safe-t));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(86vw, 340px);
  padding: 7px 14px 7px 10px;
  border-radius: 4px;
  background: var(--glass);
  border-top: 2px solid var(--gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s, transform 0.3s var(--ease);
}
.ach-note.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* (over an end screen: at the very top) */
.ach-note.edge {
  top: calc(8px + var(--safe-t));
}
/* (in the menus: at the bottom, clear of the panels' headers) */
.ach-note.low {
  top: auto;
  bottom: calc(14px + var(--safe-b));
  transform: translate(-50%, 8px);
}
.ach-note.low.on {
  transform: translate(-50%, 0);
}
.ach-note > .ic {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--gold);
}
.ach-note span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ach-note b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-note small {
  font-size: 12.5px;
  color: var(--gold);
}
/* small phones: the menu and the career's panels a little tighter */
@media (max-height: 700px) and (orientation: portrait) {
  .menu-grid button {
    height: 42px;
    font-size: 14px;
  }
  .btn.quick {
    min-height: 46px;
  }
  .btn.quick .pl b {
    font-size: 17px;
  }
  .c-me {
    margin-top: 8px;
  }
  .c-rank b {
    font-size: 32px;
  }
  .cal-row {
    min-height: 34px;
  }
}
/* landscape phones: the menu's column a little narrower and tighter */
@media (orientation: landscape) and (max-height: 560px) {
  .screen.home .menu-col {
    gap: 6px;
  }
  .btn.quick {
    min-height: 40px;
  }
  .btn.quick .pl small {
    display: none;
  }
  .menu-grid button {
    height: 36px;
    font-size: 13.5px;
  }
  .c-me {
    margin: 8px 0 0;
  }
  .ach-note {
    top: calc(12px + var(--safe-t));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ach-note {
    transition: opacity 0.2s;
    transform: translate(-50%, 0);
  }
}

/* ---------- 0.10 · padel's own pieces of the career ---------- */
/* the hub's four links: your player (with its skill points), the ranking, the shop, the achievements */
.c-links.c4 {
  grid-template-columns: repeat(4, 1fr);
}
.c-links button {
  position: relative;
}
.c-links .tbadge.n {
  position: absolute;
  top: 5px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
}
/* the menu's tiles: the skill points to spend lit, the money in gold */
.menu-grid .tbadge.n:not(.m) {
  color: var(--fg-2);
}
.menu-grid .tbadge.m {
  color: var(--gold);
  font-size: 11.5px;
}
/* the shop's paddle: its shape and face, and what it adds to and takes from your card */
.pdcard .pk {
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-3);
}
.pfx li.tw {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.pfx li.tw span,
.pad-note .plus,
.pad-note .minus {
  font-weight: 700;
  white-space: nowrap;
}
.pfx li.tw .plus,
.pad-note .plus {
  color: var(--accent);
}
.pfx li.tw .minus,
.pad-note .minus {
  color: var(--bad);
}
.pad-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px !important;
}
.pad-note .ic {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--gold);
}
.pad-note span {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
}
/* the daily challenge on a training challenge: today's target */
.dmeta.daily-t span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
}
.dmeta.daily-t .ic {
  width: 15px;
  height: 15px;
}
/* the daily challenge: the pair's two tiles */
.dly .duo {
  flex: none;
}

/* ---------- 1.0: the Android app's ads and store (src/monetize; the rows only show there, or with ?fakeads=1) ---------- */
/* a video for a prize: the button with the video icon and, when the game offers one, a «No thanks» of the same size and
   style beside it (the studio's rule: the way out as visible as the offer) */
.ad-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.btn.ad-btn {
  min-height: 56px;
  padding: 6px 12px;
  gap: 8px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.4);
}
.btn.ad-btn .ic {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.btn.ad-btn[disabled] {
  opacity: 0.55;
}
/* the shop's free money: one wide button, the counter of the day under its label */
.btn.ad-btn.wide {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin: 12px 0 2px;
  padding: 8px 14px;
  text-align: left;
}
.ad-btn .ad-l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  text-align: left;
}
.ad-btn .ad-l small {
  font-size: 12px;
  opacity: 0.75;
}
.ad-btn .ad-l b {
  font-weight: 700;
  font-size: 18px;
}
.btn.ad-btn.wide .ad-n {
  margin-left: auto;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fg-2);
  text-align: right;
}
.shop-free.none {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 2px;
  font-size: 13px;
  color: var(--fg-3);
}
.shop-free.none .ic {
  width: 18px;
  height: 18px;
}
/* the store: «Remove ads» and its price from Google Play */
.shop-iap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.shop-iap .si {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.shop-iap .si b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shop-iap .si small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-2);
}
.shop-iap .btn {
  flex: none;
  min-width: 96px;
  min-height: 48px;
}
/* the event's prize money doubled */
.sum-grid > div.x2 {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.55);
}
.sum-grid .x2-tag {
  position: absolute;
  top: -8px;
  right: -4px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
}
/* Settings › Privacy: Google's ad privacy form and «Restore purchases» */
.panel .set-btn {
  width: 100%;
  min-height: 48px;
  margin: 10px 0 4px;
  font-size: 16px;
}
/* a message over the menus (the toast is the match's, under the screens): at the bottom, on two lines if needed */
#toast.menu {
  z-index: 31;
  top: auto;
  bottom: calc(18px + var(--safe-b));
  max-width: min(86vw, 360px);
  padding: 8px 14px 7px;
  border-radius: 4px;
  background: var(--glass);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--line-2);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
/* no WebGL 2: a short message instead of a black screen */
.screen.no-gl {
  justify-content: center;
}
.screen.no-gl .panel {
  padding: 22px 20px 20px;
  text-align: center;
}
.screen.no-gl .logo {
  margin-bottom: 14px;
}
.screen.no-gl h2 {
  margin: 0 0 10px;
}

/* (1.2) the warm-up: «I know how to play» beside the pause button, always at hand; its screens are the lessons' */
#hud .wu-top {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
#hud .wu-top .btn.small {
  min-height: 44px;
  padding: 0 14px;
  background: rgba(9, 12, 17, 0.42);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 14px;
}
.warm-intro .ls-what,
.warm-ready .ls-what {
  font-size: 17px;
  line-height: 1.45;
}

/* (1.2) the training in one place: each block's count of what is passed, its challenges marked as its test, and the
   skill point a go earned on the result screen */
.train-all .drill-sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.train-all .drill-sec .ds-n {
  font-size: 12px;
  opacity: 0.7;
  letter-spacing: 0.06em;
}
.train-all .drill-row.exam .av.num {
  background: rgba(214, 242, 63, 0.16);
  color: var(--lime, #d6f23f);
}
.drill-result .dpts {
  margin-top: 6px;
  font-weight: 700;
  color: var(--lime, #d6f23f);
}

/* (1.2) your style at the start of a career: the styles as a choice, then the seven attributes with − and + */
.c-styles {
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.c-attrs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.c-attrs .ca-row {
  grid-template-columns: 92px 1fr 40px 30px 40px;
  color: var(--lime);
}
.c-attrs .ca-b {
  width: 40px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.c-attrs .ca-b:disabled {
  opacity: 0.3;
}
.c-attrs b {
  text-align: center;
  color: #fff;
}
.c-attrs .c-left {
  font-size: 14px;
  font-weight: 700;
  color: var(--lime);
  text-align: center;
  padding: 4px 0;
}
.c-attrs .c-left.done {
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------ the multiplayer test (src/net/ui.ts, ?sala) */
.panel.net .name-f {
  grid-template-columns: 1fr;
  margin: 14px 0 4px;
}
.panel.net .name-f input {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
}
.net-code {
  margin: 10px 0 6px;
  font-family: var(--display);
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-align: center;
  color: var(--fg);
}
.net-err {
  color: #ff8a7a;
}
.net-note {
  color: var(--fg-2);
}
/* 1.3.1: in a phone's browser, the way into the app (with his own player) */
.net-app {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: var(--r);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  text-align: center;
}
.net-app p {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
}
.net-app .btn {
  text-decoration: none;
  justify-content: center;
}
.net-app small {
  font-size: 12px;
  color: var(--fg-3);
}
.net-route {
  font-size: 13px;
  color: var(--fg-3);
  min-height: 1.2em;
}
.panel.net .loading {
  justify-content: center;
  margin: 12px 0;
}
/* the room's two pairs (up to four people; the CPU in the free places) */
.net-pairs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 4px;
  text-align: left;
}
.net-pair .eyebrow {
  margin-bottom: 4px;
}
.net-pair ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.net-pair li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 2px 6px 2px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  font-weight: 600;
}
.net-pair li > span:first-child {
  flex: 1;
}
.net-pair li.me {
  border-color: var(--accent);
}
.net-pair li.cpu {
  color: var(--fg-3);
  font-weight: 500;
}
.net-ms {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
}
.net-mode {
  margin: 6px 0 2px;
  font-size: 14px;
  color: var(--fg-2);
}
@media (min-width: 560px) {
  .net-pairs {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 1.3: sharing a replay (src/clip.ts) ---------- */
/* the pill on a replay (bottom left; the skip hint is bottom right): above the tap-to-skip layer, under the sting */
.clip-pill {
  position: absolute;
  left: calc(14px + var(--safe-l));
  bottom: calc(12px + var(--safe-b));
  z-index: 6;
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 17px 0 14px;
  border-radius: 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.clip-pill.show {
  display: inline-flex;
  animation: clip-in 0.35s var(--ease) both;
}
.clip-pill .ic {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}
.clip-pill.on {
  color: var(--fg);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.clip-pill .spin {
  width: 14px;
  height: 14px;
}
@keyframes clip-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
/* the sheet: over everything (the replay waits behind it on its last frame) */
.clip-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));
  background: rgba(4, 6, 10, 0.62);
  animation: fadein 0.2s ease-out;
}
.panel.clip {
  padding-top: 16px;
  text-align: center;
}
.panel.clip .eyebrow {
  justify-content: center;
}
.panel.clip h2 {
  margin-bottom: 12px;
}
.clip-view {
  width: fit-content;
  max-width: 100%;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 160px;
  min-height: 220px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
.clip-view img {
  display: block;
  max-width: 100%;
  max-height: min(52vh, 460px);
}
.clip-view img:not([src]) {
  display: none;
}
/* (1.9) the play's video, once made: in the picture's place, playing on a loop without sound */
.clip-view video {
  display: block;
  max-width: 100%;
  max-height: min(52vh, 460px);
}
.clip-view video[hidden],
.clip-view img[hidden] {
  display: none;
}
/* (1.9) while the video is made: the screen behind the sheet hidden (the view draws the video's frames), and the
   progress over the picture */
.clip-sheet.making {
  background: #04060a;
}
.clip-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: center;
  padding: 28px 14px 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--fg);
  background: linear-gradient(rgba(4, 6, 10, 0), rgba(4, 6, 10, 0.88) 45%);
}
.clip-prog[hidden] {
  display: none;
}
.clip-prog b {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.clip-prog .bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}
.clip-prog .bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.15s linear;
}
.clip-wait {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-1);
}
.clip-wait.off {
  display: none;
}
.clip-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}
.clip-nav[hidden] {
  display: none;
}
.clip-nav button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 36px;
  border-radius: var(--r);
  color: var(--fg);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.clip-note {
  margin: 10px 0 12px;
  font-size: 13px;
  color: var(--fg-3);
}
.clip-note[hidden] {
  display: none;
}

/* ---------- 1.3: the badges (src/badge-ui.ts, the career's «Insignias») ---------- */
/* an emblem: a shield in its level's metal with its sign */
.bdg {
  --m1: #3a4350;
  --m2: #232a33;
  --ink-b: rgba(242, 244, 247, 0.55);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 30px;
  color: var(--ink-b);
  background: linear-gradient(160deg, var(--m1), var(--m2));
  clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%);
}
.bdg svg {
  width: 62%;
  height: 62%;
  margin-top: -6%;
}
.bdg.bronze {
  --m1: #e3a46a;
  --m2: #8a5428;
  --ink-b: #2b1708;
}
.bdg.silver {
  --m1: #eef2f6;
  --m2: #8a96a3;
  --ink-b: #1b232c;
}
.bdg.gold {
  --m1: #ffe68a;
  --m2: #c9922a;
  --ink-b: #2b1d02;
}
.bdg.big {
  width: 46px;
  height: 54px;
}
.bdg.empty {
  background: none;
  box-shadow: none;
  outline: 1.5px dashed var(--line-2);
  outline-offset: -3px;
  clip-path: none;
  border-radius: 6px;
}
.bdg.locked {
  --m1: rgba(255, 255, 255, 0.06);
  --m2: rgba(255, 255, 255, 0.03);
  color: var(--fg-3);
}
.bdg.locked .ic {
  width: 12px;
  height: 12px;
}
/* the slots at the top of the screen */
.bd-slots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px;
}
.bd-slots b {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.bd-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.bdcard {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bdcard.worn {
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.55);
}
.bdcard .bi {
  min-width: 0;
}
.bdcard .bn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bdcard .bn span {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}
.bdcard .bn .lv1 {
  color: #e3a46a;
}
.bdcard .bn .lv2 {
  color: #dfe5ec;
}
.bdcard .bn .lv3 {
  color: var(--gold);
}
.bdcard .bw {
  margin: 3px 0 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg-2);
}
.bd-next {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}
.bd-next small {
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.bd-next .btn {
  justify-self: start;
  margin-top: 4px;
}
.bd-req {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 6px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.bd-req .ic {
  width: 13px;
  height: 13px;
  color: var(--accent);
}
.bd-req:not(.ok) span {
  grid-column: 1 / -1;
}
.bd-req.ok {
  color: var(--fg);
}
.bd-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.bd-bar i {
  display: block;
  height: 100%;
  width: calc(var(--v) * 100%);
  background: var(--fg-3);
}
.bd-req.ok .bd-bar i {
  background: var(--accent);
}
.bd-max {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--gold);
}
.bd-max .ic {
  width: 14px;
  height: 14px;
}
/* the badges you wear, small (the button to them in «Tu jugador») */
.bd-row {
  display: inline-flex;
  gap: 3px;
}
.bd-row .bdg {
  width: 16px;
  height: 19px;
}
.badges-open {
  gap: 10px;
}
/* under a point's reason: the badge that helped */
.bd-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
}
.bd-tag .bdg {
  width: 15px;
  height: 18px;
}
/* (1.3) your badges on your card, under your style */
.pc-id .bd-row {
  margin-top: 4px;
}

/* ------------------------------------------------------------------ 1.3 · with friends, «Beta» (src/net/ui.ts) */
.beta-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.5;
  vertical-align: 2px;
  color: var(--ink, #0b0f14);
  background: var(--accent, #d9f23f);
}
.btn.quick.friends .pl b {
  display: flex;
  align-items: center;
}
/* your nickname, and the list to pick it from */
.net-apodo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 2px;
  font-size: 14px;
  color: var(--fg-2);
}
.net-apodo .btn {
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.net-apodo .btn small {
  font-weight: 500;
  letter-spacing: 0;
  font-size: 12px;
  text-transform: none;
  color: var(--fg-3);
}
.net-nicks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 6px;
}
/* the nicknames and the cards' two choices */
.net-chip {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.net-chip.on {
  color: var(--ink, #0b0f14);
  background: var(--accent, #d9f23f);
  box-shadow: none;
}
/* the cards (the host picks) */
.net-fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  margin: 10px 0 4px;
  font-size: 14px;
  color: var(--fg-2);
}
.net-seg {
  display: flex;
  gap: 6px;
}
.net-seg .net-chip {
  min-height: 36px;
  font-size: 13.5px;
}
/* the guest's wait for a host who left the app */
.net-away {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 40;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(86vw, 360px);
  padding: 16px 18px;
  border-radius: 14px;
  text-align: center;
  background: rgba(9, 12, 17, 0.92);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 28px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.net-away b {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.net-away span {
  font-size: 14px;
  color: var(--fg-2);
}

/* ---------- 2.0: the live HUD and broadcast telemetry ---------- */
.pt-hud-bar {
  position: absolute;
  top: calc(var(--safe-t) + 10px);
  right: calc(var(--safe-r) + 12px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(8, 13, 22, 0.86);
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.35), 0 4px 12px rgba(0, 0, 0, 0.38);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg);
  backdrop-filter: blur(8px);
}
.pt-pill b {
  color: var(--accent);
}
.pt-tactic {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(8, 13, 22, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
}
.pt-tactic button {
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  transition: background 0.16s, color 0.16s;
}
.pt-tactic button.on {
  background: var(--accent);
  color: var(--ink);
}
.pt-radar {
  position: absolute;
  top: calc(var(--safe-t) + 48px);
  right: calc(var(--safe-r) + 12px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  background: rgba(8, 13, 22, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.42);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg);
  pointer-events: none;
  animation: pt-radar-in 0.18s ease-out;
}
.pt-radar.hot {
  box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.65), 0 0 16px rgba(245, 196, 81, 0.25);
}
.pt-radar .spd b {
  font-size: 15px;
  color: var(--accent);
  margin-right: 3px;
}
.pt-radar .rpm b {
  color: #7ad7ff;
  margin-right: 3px;
}
.pt-radar small {
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.08em;
}
.pt-radar .sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
}
.pt-radar .plt {
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: #5ef2a8;
  font-size: 11.5px;
}
@keyframes pt-radar-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.fl.callout {
  font-style: normal;
  font-weight: 800;
  font-size: calc(11px * var(--k));
  letter-spacing: 0.12em;
  color: rgba(122, 215, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
@media (max-width: 560px) {
  .pt-hud-bar {
    top: auto;
    bottom: calc(var(--safe-b) + 12px);
    right: calc(var(--safe-r) + 10px);
  }
  .pt-radar {
    top: calc(var(--safe-t) + 52px);
    right: calc(var(--safe-r) + 10px);
  }
}

/* ---------- 2.0: the home dashboard and the pro shop ---------- */
.logo .crest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: rgba(9, 12, 17, 0.78);
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4);
  font-family: var(--display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: #d9f23f;
  backdrop-filter: blur(8px);
}
.logo .w1 {
  background: linear-gradient(180deg, #ffffff 0%, #e5ecf6 55%, #b8c6db 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.65));
}
.venue-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  max-width: min(520px, 96vw);
}
.v-pill {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(242, 245, 250, 0.78);
  background: rgba(9, 12, 17, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  transition: all 0.16s var(--ease);
}
.v-pill:hover {
  color: #fff;
  background: rgba(26, 34, 45, 0.88);
}
.v-pill.on {
  color: #0b0f14;
  background: linear-gradient(135deg, #d9f23f 0%, #b9d12a 100%);
  box-shadow: 0 4px 14px rgba(217, 242, 63, 0.35);
}
.hero-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn.play.career,
.hero-modes .btn.quick {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 12px 46px 12px 18px;
  border-radius: 10px;
}
.btn.play.career {
  background: linear-gradient(135deg, #d9f23f 0%, #b9d12a 100%);
  color: #0b0f14;
  box-shadow: 0 12px 32px rgba(217, 242, 63, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.hero-modes .btn.quick {
  background: linear-gradient(135deg, rgba(18, 24, 33, 0.92) 0%, rgba(11, 15, 20, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(56, 226, 180, 0.35), 0 8px 24px rgba(0, 0, 0, 0.38);
}
.btn.play.career .ic,
.hero-modes .btn.quick .ic {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.mode-tag {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.78;
}
.hero-modes .btn.quick .mode-tag {
  color: #38e2b4;
  opacity: 0.95;
}
.pb-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(217, 242, 63, 0.16);
  border: 1px solid rgba(217, 242, 63, 0.4);
  color: #d9f23f;
  font-family: var(--display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.1em;
}


/* ---------- 2.0: the menus dressed as the broadcast (the wordmark, the venues as events, the ticker, loading) ---------- */
.logo .crest {
  gap: 8px;
  padding: 5px 13px 5px 9px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.92), rgba(9, 12, 17, 0.92));
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.38), 0 8px 22px rgba(0, 0, 0, 0.45);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--fg);
  --crest-ink: #0b0f14;
}
.logo .crest .crest {
  font-size: 18px;
  color: var(--accent);
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
}
.logo .crest i {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
}
.logo .crest .ss {
  color: var(--accent);
  font-style: normal;
  letter-spacing: 0.16em;
}
.logo .w1 {
  font-size: clamp(54px, 16vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 45%, #aebcd2 52%, #e6ecf5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: wordin 0.9s var(--ease) backwards;
}
.logo .tour {
  margin-top: 6px;
  white-space: nowrap;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(16px, 5vw, 24px);
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  animation: wordin 0.9s 0.12s var(--ease) backwards;
}
.logo .tour i {
  width: clamp(22px, 8vw, 54px);
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.logo .tour i:last-child {
  background: linear-gradient(90deg, currentColor, transparent);
}
.logo .sub {
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.42em;
  color: var(--fg-3);
}
@keyframes wordin {
  from {
    opacity: 0;
    letter-spacing: 0.08em;
    filter: blur(6px);
  }
}
/* the venues as the tour's events: the event's mark over the city, the one picked on gold */
.venue-bar {
  position: relative;
  gap: 6px;
  margin-top: 12px;
}
.v-pill {
  height: auto;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  padding: 4px 11px 4px 10px;
  border-radius: 2px;
  text-align: left;
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.82), rgba(9, 12, 17, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 3px 0 0 rgba(255, 255, 255, 0.18);
}
.v-pill b {
  font-weight: 800;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
}
.v-pill span {
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--fg-2);
  white-space: nowrap;
}
.v-pill.on {
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(217, 242, 63, 0.3);
}
.v-pill.on b,
.v-pill.on span {
  color: var(--ink);
}
/* the demo match behind the menu is on the air */
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 3px 9px 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: rgba(9, 12, 17, 0.7);
  border-radius: 2px;
}
.live-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3b4f;
  box-shadow: 0 0 8px #ff3b4f;
  animation: livepulse 1.2s ease-in-out infinite;
}
.home-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* the menu comes in a piece after another */
.screen.home .menu-col > * {
  animation: risein 0.5s var(--ease) backwards;
}
.screen.home .menu-col > :nth-child(2) {
  animation-delay: 0.06s;
}
.screen.home .menu-col > :nth-child(3) {
  animation-delay: 0.12s;
}
.screen.home .menu-col > :nth-child(4) {
  animation-delay: 0.18s;
}
.btn.play.career,
.hero-modes .btn.quick {
  border-radius: 4px;
}
.btn.play.career {
  background: linear-gradient(120deg, #e8fb7a 0%, #d9f23f 40%, #b9d12a 100%);
  overflow: hidden;
}
/* (a glint runs over the main button now and then) */
.btn.play.career::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: careerglint 5s 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes careerglint {
  0% {
    transform: translateX(-120%);
  }
  22%,
  100% {
    transform: translateX(120%);
  }
}
.hero-modes .btn.quick {
  box-shadow: inset 0 0 0 1px rgba(217, 242, 63, 0.3), inset 3px 0 0 var(--accent), 0 8px 24px rgba(0, 0, 0, 0.38);
}
.hero-modes .btn.quick .mode-tag {
  color: var(--accent);
}
.menu-grid {
  border-radius: 4px;
}
/* the screen: the court clear in the middle, dark top and bottom like a broadcast's safe area */
.screen.home {
  padding-bottom: calc(16px + 30px + var(--safe-b));
  background:
    radial-gradient(ellipse 80% 55% at 50% 42%, transparent 0%, rgba(5, 7, 10, 0.35) 70%, rgba(5, 7, 10, 0.7) 100%),
    linear-gradient(180deg, rgba(6, 8, 11, 0.82) 0%, rgba(6, 8, 11, 0.12) 28%, rgba(6, 8, 11, 0.1) 40%, rgba(6, 8, 11, 0.88) 64%, rgba(6, 8, 11, 0.97) 100%);
}
/* the TV ticker along the bottom */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(28px + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(20, 26, 35, 0.96), rgba(7, 10, 14, 0.98));
  box-shadow: inset 0 2px 0 var(--accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  pointer-events: none;
  animation: none !important;
  z-index: 1;
}
.ticker .tk-l {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px 0 calc(12px + var(--safe-l));
  font-weight: 800;
  font-style: italic;
  color: #fff;
  background: linear-gradient(180deg, #ff4359, #c5122a);
}
.ticker .tk {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker .tk-in {
  display: flex;
  width: max-content;
  height: 100%;
  animation: tick 48s linear infinite;
}
.ticker .ti {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 22px 0 0;
  white-space: nowrap;
  --crest-ink: #0b0f14;
}
.ticker .ti .crest {
  color: var(--accent);
  font-size: 13px;
}
.ticker .ti b {
  font-weight: 800;
  font-style: italic;
  color: var(--accent);
}
.ticker .tk-r {
  flex: none;
  display: flex;
  align-items: center;
  padding: 2px calc(12px + var(--safe-r)) 0 12px;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--fg-3);
  background: rgba(0, 0, 0, 0.3);
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 520px) {
  .ticker .tk-r {
    display: none;
  }
}
/* portrait: the venues in one row that scrolls sideways */
@media (orientation: portrait) {
  .venue-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    max-width: calc(100vw - 16px);
    padding: 2px 8px 4px;
    touch-action: pan-x;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .venue-bar::-webkit-scrollbar {
    display: none;
  }
  .v-pill {
    flex: none;
  }
}
/* wide screens: the menu down the left like a sports game's, the court and its match to the right */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 561px) {
  .screen.home {
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding-left: calc(6vw + var(--safe-l));
    padding-top: calc(16px + var(--safe-t));
    background:
      linear-gradient(90deg, rgba(6, 8, 11, 0.94) 0%, rgba(6, 8, 11, 0.72) 30%, rgba(6, 8, 11, 0.08) 58%, rgba(6, 8, 11, 0.2) 100%),
      linear-gradient(180deg, rgba(6, 8, 11, 0.5) 0%, transparent 25%, transparent 75%, rgba(6, 8, 11, 0.7) 100%);
  }
  .screen.home .home-top {
    align-items: flex-start;
  }
  .screen.home .logo {
    text-align: left;
  }
  .screen.home .logo .tour {
    justify-content: flex-start;
    padding-left: 0;
  }
  .screen.home .logo .tour i:first-child {
    display: none;
  }
  .screen.home .venue-bar {
    justify-content: flex-start;
    max-width: 560px;
  }
  .screen.home .menu-col {
    margin-top: 0;
    width: min(400px, 40vw);
  }
}
/* the loading screen: the wordmark, the gold bar running, the ticker */
.screen.boot {
  gap: 22px;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(30, 38, 50, 0.55), rgba(6, 8, 11, 0.96) 75%);
}
.boot-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, 0.035) calc(25% - 1px) 25%),
    linear-gradient(180deg, transparent 60%, rgba(217, 242, 63, 0.07));
  animation: none !important;
}
.boot-bar {
  position: relative;
  width: min(280px, 70vw);
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.boot-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(217, 242, 63, 0.8);
  animation: bootrun 1.3s ease-in-out infinite;
}
@keyframes bootrun {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}
.screen.boot .loading {
  font-size: 12.5px;
  letter-spacing: 0.24em;
  color: var(--fg-3);
}
/* landscape phones: the ticker thinner, the wordmark smaller */
@media (orientation: landscape) and (max-height: 560px) {
  .screen.home {
    padding-bottom: calc(14px + 24px + var(--safe-b));
  }
  .ticker {
    height: calc(24px + var(--safe-b));
    font-size: 11px;
  }
  .logo .w1 {
    font-size: clamp(44px, 9vw, 72px);
  }
  .live-chip {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker .tk-in,
  .btn.play.career::after,
  .logo .w1,
  .logo .tour {
    animation: none;
  }
}
.logo .crest span {
  white-space: nowrap;
}
@media (orientation: landscape) and (min-width: 900px) and (min-height: 561px) {
  .screen.home {
    justify-content: flex-start;
    gap: 14px;
    padding-top: calc(3.5vh + var(--safe-t));
  }
  .screen.home .logo .w1 {
    font-size: clamp(60px, 7.4vw, 96px);
  }
  .screen.home .venue-bar {
    flex-wrap: nowrap;
    max-width: none;
  }
  .screen.home .v-pill {
    flex: none;
  }
  .screen.home .menu-col {
    margin-top: auto;
  }
}
@media (orientation: landscape) and (min-width: 900px) and (max-height: 760px) and (min-height: 561px) {
  .screen.home .menu-grid button {
    height: 40px;
    min-height: 40px;
  }
  .screen.home .btn.play.career,
  .screen.home .hero-modes .btn.quick {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
/* (2.0) phones in portrait: the bug keeps the names (no flags; the straps have them), the moment's card under the
   umpire's call, the stats over the camera and tactics bar */
@media (max-width: 560px) {
  .tvbug .nm .flag {
    display: none;
  }
  .tv-stats {
    bottom: calc(66px + var(--safe-b));
  }
}
@media (orientation: portrait) {
  .tv-moment {
    top: calc(var(--safe-t) + 8px + 108px * var(--k));
  }
}
/* (2.0) the end and the pause dressed as the broadcast: the final score as the bug draws it (navy glass, the winners'
   number on gold), the stats under a gold header, the result with a glint */
.logo .crest .cm {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}
.result {
  background: linear-gradient(180deg, #fff 0%, #eef2f8 48%, #b4c2d8 54%, #f2f5fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.6));
  animation: wordin 0.8s var(--ease) backwards;
}
.result.win {
  background-image: linear-gradient(180deg, #f6fdd2 0%, #e4f86a 46%, #b9d12a 54%, #eefc9a 100%);
}
.result.lose {
  color: transparent;
  opacity: 0.8;
}
.final-board,
.pause-score {
  border-radius: 3px;
  background: var(--glass);
  box-shadow: var(--tv-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.final-board {
  position: relative;
  padding-left: 30px;
}
.final-board::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 30px;
  background: var(--accent);
}
.final-board::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--ink);
  transform: scaleX(0.86) rotate(45deg);
}
.fr .sc {
  font-weight: 800;
}
.fr.w .sc {
  color: var(--ink);
  background: var(--accent);
}
.stats {
  overflow: hidden;
  padding-top: 0;
  border-radius: 3px;
  background: var(--glass);
}
.stats h3 {
  margin: 0 -14px 4px;
  padding: 6px 14px 5px;
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: var(--accent);
}
.pause-score {
  padding: 8px 12px;
  gap: 12px;
}
.pause-score b {
  min-width: 1.4em;
  padding: 1px 6px;
  font-weight: 800;
  color: var(--ink);
  background: var(--accent);
  border-radius: 2px;
}
.pause-score i {
  display: none;
}
.panel.pause {
  background: linear-gradient(180deg, rgba(20, 26, 35, 0.96), rgba(7, 10, 14, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 3px 0 var(--accent), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
/* (2.0) the match bar: line icons instead of emojis, square like the rest of the TV graphics */
.pt-pill,
.pt-tactic,
.pt-tactic button {
  border-radius: 3px;
}
.pt-pill .ic,
.pt-tactic button .ic {
  width: 14px;
  height: 14px;
}
.pt-pill .ic {
  color: var(--accent);
}
.pt-tactic button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pt-pill,
.pt-tactic,
.pt-radar {
  background: linear-gradient(180deg, rgba(18, 24, 33, 0.92), rgba(9, 12, 17, 0.92));
}
.pt-tactic button.on {
  background: var(--accent);
  color: var(--ink);
}
@media (orientation: landscape) and (max-height: 560px) {
  .tvbug .nm .flag {
    display: none;
  }
}

/* ---------- (2.0) your side (drive / revés) and the quick match's setup on its card ---------- */
.side-row .seg,
.row.stack.side-row .seg {
  flex-direction: row;
}
.row.stack.side-row .seg button {
  flex: 1;
  text-align: center;
}
.vs-setup {
  display: flex;
  flex-direction: column;
  width: min(380px, 100%);
  text-align: left;
}
.vs-setup .row {
  padding: 6px 0;
  font-size: 13px;
  color: var(--fg-2);
}
.vs-setup .row:last-child {
  border-bottom: 0;
}
.vs-setup .pk-chips {
  margin-bottom: 0;
}
.vs-setup .pk-chip {
  min-height: 42px;
}
/* (a phone on its side: the side and the partner in one row, so the card keeps its height) */
@media (orientation: landscape) and (max-height: 560px) {
  .vs-setup {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    width: min(760px, 100%);
  }
  .vs-setup .row {
    flex: 1;
    min-width: 0;
    padding: 2px 0;
    border-bottom: 0;
  }
  .vs-setup .row.vs-mates {
    flex: 1.5;
  }
  .vs-setup .row.stack {
    gap: 4px;
  }
  .vs-setup .seg button {
    padding: 6px 10px;
  }
  .vs-setup .pk-chip {
    min-height: 34px;
    padding: 3px 4px;
  }
  .vs-setup .pk-chip small {
    display: none;
  }
}

/* (2.0, cam2) the gameplay camera's choice (src/camera-ui.ts): a name and a line on what it looks like; the pause's
   settings button and panel */
.seg button.cam-opt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.seg button.cam-opt b {
  color: inherit;
  font-weight: 700;
}
.cam-opt small {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.75;
}
.panel.pause .pause-set {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  font-size: 15px;
}
.panel.pause-settings {
  text-align: left;
}
.panel.pause-settings .eyebrow,
.panel.pause-settings h2 {
  text-align: center;
}
.panel.pause-settings .btn-col {
  margin-top: 6px;
}
@media (orientation: landscape) and (max-height: 560px) {
  .panel.pause .pause-set {
    min-height: 34px;
    margin-top: 8px;
  }
  .panel.pause-settings .row.stack .seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- (2.0, táctil) the match's buttons away from the thumbs ---------- */
/* The partner's tactic (AUTO / RED / FONDO): a column under the pause button, in every orientation and for left-handers
   too. It sat over the pause button in landscape and on a PC (a tap on the pause set FONDO) and in the right thumb's
   corner in portrait (a thumb landing to aim changed the tactic); its buttons were 28 px tall, now 44. */
.pt-hud-bar {
  top: calc(var(--safe-t) + 60px);
  bottom: auto;
  right: calc(var(--safe-r) + 8px);
  flex-direction: column;
  align-items: flex-end;
}
.pt-tactic {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.pt-tactic button {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 58px;
  height: 44px;
  padding: 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  border-radius: 0;
}
.pt-tactic button + button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* the radar's pill beside the column, not under the pause */
.pt-radar {
  top: calc(var(--safe-t) + 60px);
  right: calc(var(--safe-r) + 74px);
}
/* the tutorial's hint: in portrait at the top, under the score (the thumbs cover the bottom of the screen); the banner
   keeps clear of the column */
@media (orientation: portrait) {
  #hint {
    top: calc(var(--safe-t) + 66px + 56px * var(--k));
    bottom: auto;
    max-width: min(calc(100vw - 2 * (74px + var(--safe-r))), 520px);
  }
  #banner {
    max-width: calc(100% - 90px - var(--safe-l) - var(--safe-r));
  }
}


/* ---------- (1.6, Germán 20 oct) the TV stats compact, under the score in the corner, so the court shows; the
   partner's tactic smaller on phones ---------- */
.tv-stats {
  top: calc(var(--safe-t) + 104px * var(--k));
  bottom: auto;
  left: calc(var(--safe-l) + 8px);
  right: auto;
  margin: 0;
  width: min(290px, calc(100% - 96px - var(--safe-l) - var(--safe-r)));
  background: rgba(9, 12, 17, 0.7);
  backdrop-filter: blur(6px);
  clip-path: inset(0 0 100% 0);
}
.tv-stats.on {
  clip-path: inset(0 0 0 0);
}
.tv-stats .h {
  padding: 4px 9px 3px;
  font-size: 11px;
}
.tv-stats .h em {
  display: none;
}
.tv-stats .tm {
  padding: 4px 9px 3px;
  font-size: 11px;
}
.tv-stats .tm .sc {
  font-size: 13px;
  padding: 1px 6px;
}
.tv-stats .r {
  grid-template-columns: 34px 1fr 34px;
  padding: 2px 9px 1px;
}
.tv-stats .r > b {
  font-size: 14px;
}
.tv-stats .l {
  gap: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.tv-stats .l i {
  height: 3px;
}
.tv-stats .f {
  padding: 3px 9px 4px;
  font-size: 9px;
}
@media (max-width: 560px) {
  .tv-stats {
    bottom: auto;
  }
}
@media (max-width: 900px), (max-height: 560px) {
  .pt-tactic button {
    flex-direction: row;
    gap: 3px;
    width: 46px;
    height: 28px;
    padding: 0 3px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .pt-tactic button .ic {
    display: none;
  }
  .pt-radar {
    right: calc(var(--safe-r) + 60px);
  }
}
/* (1.6) the wordmark white again, as in 1.5 (no chrome gradient) */
.logo .w1 {
  background: none;
  color: var(--fg);
  -webkit-text-fill-color: currentColor;
}

/* ------------------------------------------------------------------ 1.7 · the career: the tour's badges (docs/notas-1.7-carrera.md) */
/* a pair's badges in the draw, before its flag line */
.dp .cc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-row.dr .bdg {
  width: 13px;
  height: 16px;
}
/* a player's badges by name on his whole card */
.pcard .pc-bdg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--fg-2);
}
.pc-bdg .bdg {
  width: 18px;
  height: 21px;
  margin-right: -6px;
}
.pc-bdg small {
  color: var(--fg-3);
}
/* your partner's badges by his name (the choice of partner) */
.pk-n b .bd-row {
  margin-left: 8px;
  vertical-align: -3px;
}
/* the tour's news at a season's start */
.c-news {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 4px;
}
.c-news .nw {
  display: grid;
  grid-template-columns: 22px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
}
.c-news .nw .bdg {
  width: 20px;
  height: 24px;
}
.c-news .nw span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.c-news .nw b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-news .nw small {
  font-size: 12px;
  color: var(--fg-3);
}
.c-news .nw i {
  font-style: normal;
  font-size: 12px;
}
.c-news .nw.up i {
  color: var(--accent);
}
.c-news .nw.down i {
  color: var(--fg-3);
}
/* «Your player»: what each attribute does, under its row */
.imp-row {
  row-gap: 0;
}
.imp-row .imp-what {
  grid-column: 1 / -1;
  margin: -2px 0 8px;
  padding-right: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-3);
}

/* (1.8) the frame-rate meter (main.ts, fpsMeter): small, bottom left inside the safe area (at the top it covered the
   scoreboard upright and the camera buttons lying down), never in the way of a touch */
.fps-meter {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  left: calc(env(safe-area-inset-left, 0px) + 6px);
  z-index: 9999;
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: #d9f23f;
  font: 600 11px/1.35 ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.fps-meter[data-v='mid'] { color: #ffb020; }
.fps-meter[data-v='bad'] { color: #ff5a5a; }

/* (1.8.1) the pause before an interstitial (monetize/index.ts, quietScreen): over everything, takes every tap */
.ad-gap {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.92);
  color: #fff;
  font: 600 18px/1.3 var(--font, system-ui, sans-serif);
  letter-spacing: 0.02em;
  touch-action: none;
}

/* (1.9) the career money video on a quick match's end screen: above the buttons, the full width */
.end .end-vid { margin: 10px 0 4px; width: 100%; }