/* Pickleball — the look is built from the sport itself: the perforated ball's
   yellow-green, court blue, the teal kitchen, and thick white court lines on
   everything. Panels are chunky painted signs with hard offset shadows. */

:root {
  --ball: #e4ef3f;
  --ball-deep: #c3d222;
  --ball-shade: #8e9a17;
  --court: #2c7bc8;
  --court-dark: #1b558f;
  --kitchen: #16988a;
  --kitchen-dark: #0f6f65;
  --cream: #fff7e4;
  --cream-2: #f6ead0;
  --ink: #10202c;
  --ink-soft: #46606f;
  --line: #ffffff;
  --flag: #ef5b4c;
  --radius: 16px;
  --shadow: 0 6px 0 var(--ink), 0 14px 30px rgba(8, 24, 36, 0.35);
  --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #bfe0f2;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#stage { position: fixed; inset: 0; }

#stage canvas.game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  /* The reticle drawn on the HUD canvas is the cursor during play. The overlay
     above this is pointer-events:none, so the cursor resolves to here. */
  cursor: none;
}

/* Menus need a real pointer again. */
.menu-layer.open { cursor: auto; }

#overlay { position: fixed; inset: 0; pointer-events: none; }

/* ============================ HUD ============================ */

.hud-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hud-dom { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

/* Top-left, not centred: the middle of the screen is the sightline straight
   down the court and the scoreboard was sitting in it. */
.hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: flex-start;
  padding: 14px 20px 0;
}

/* The scoreboard is a hung sign: navy plate, white court-line piping. */
.scoreboard {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ink);
  border: 3px solid var(--line);
  border-radius: 999px;
  padding: 6px 18px;
  box-shadow: 0 5px 0 rgba(6, 16, 24, 0.55), 0 12px 26px rgba(6, 20, 30, 0.4);
}

.hud-dom.flip .scoreboard { flex-direction: row-reverse; }

.score-team { display: flex; align-items: center; gap: 11px; font-weight: 800; }

.team-name {
  font-size: 12px;
  color: #9fc0d4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-score {
  font-size: 28px;
  line-height: 1;
  color: var(--ball);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.score-sep { color: #5b7c90; font-size: 20px; font-weight: 900; }

.serve-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.serve-dot.on {
  background: var(--ball);
  box-shadow: 0 0 0 3px rgba(228, 239, 63, 0.28), 0 0 16px var(--ball);
  transform: scale(1.12);
}

/* Bottom right, out of the way: the top right corner belongs to the gear. The
   hint sits bottom-centre, so these stack beside it rather than over it. */
.net-stats { position: absolute; bottom: 22px; right: 18px; display: flex; gap: 7px; }
.net-stats .stat {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #b9d2e2;
  font-variant-numeric: tabular-nums;
}
.net-stats .stat.good { color: #7ee89b; }
.net-stats .stat.ok { color: var(--ball); }
.net-stats .stat.bad { color: #ff8b7e; }

.hud-center {
  position: absolute;
  top: 21%;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.msg {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 30px;
  color: var(--line);
  padding: 4px 18px;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(16, 32, 44, 0.45);
  animation: smash 0.26s cubic-bezier(.16, 1.7, .4, 1);
}
.msg.big { font-size: 54px; color: var(--ball); }
.msg.warn { color: #ffcf5c; }
.msg.info { font-size: 24px; }

@keyframes smash {
  0% { transform: scale(0.55) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(-1.5deg); opacity: 1; }
}

.hud-hint {
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}
.hud-hint span {
  background: var(--ink);
  color: #cfe3ef;
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(6, 16, 24, 0.5);
}
.hud-hint b { color: var(--ball); }

/* ============================ Settings gear ============================ */

/* Lives above both the HUD and the menu layer so it is reachable from every
   screen, including mid-match. The overlay it sits in is pointer-events:none,
   so it has to opt back in. */
.gear-btn {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 40;
  pointer-events: auto;
  width: 42px; height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink), 0 9px 18px rgba(8, 24, 36, 0.3);
  transition: transform 0.18s cubic-bezier(.2, 1.5, .4, 1), background 0.18s, box-shadow 0.18s;
}
.gear-btn svg { width: 24px; height: 24px; display: block; }
.gear-btn:hover { background: var(--ball); transform: translateY(-2px); }
.gear-btn:hover svg { animation: gear-spin 3.4s linear infinite; }
.gear-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.gear-btn:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; }
.gear-btn.on { background: var(--ball); }
@keyframes gear-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .gear-btn:hover svg { animation: none; }
}


/* ======================= Player editor ======================= */

.creator { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .creator { grid-template-columns: 1fr; } }

/* Two across once three will not fit. */
@media (max-width: 560px) {
  .venues { grid-template-columns: repeat(2, 1fr); }
}

.creator-preview {
  background: var(--cream-2);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 12px 12px;
  text-align: center;
  position: sticky;
  top: 0;
}

.creator-name {
  font-weight: 900;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 4px;
}
.creator-opts { display: flex; flex-direction: column; gap: 4px; }

.opt-row { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; }
.opt-row + .opt-row { border-top: 2px dashed rgba(16, 32, 44, 0.14); }
.opt-label {
  flex: none;
  width: 92px;
  padding-top: 5px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 30px; height: 30px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.swatch:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.swatch.on { box-shadow: 0 0 0 3px var(--ball), 0 2px 0 var(--ink); }
.swatch.on i {
  position: absolute; inset: 0;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
/* A locked swatch still shows its colour -- you can see what you are playing
   for -- but it is struck through and cannot be chosen. */
.swatch.locked { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.swatch.locked i {
  position: absolute; inset: 40% -4px auto;
  height: 3px;
  background: var(--ink);
  transform: rotate(-32deg);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.chip.on { background: var(--court); color: var(--line); }
.chip.on:hover { background: var(--court-dark); }
.chip.locked { opacity: 0.45; cursor: not-allowed; }
.chip em {
  font-style: normal;
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--flag);
}

/* ======================= Season ======================= */

.menu-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .menu-grid.two { grid-template-columns: 1fr; } }
.diff-card.done { background: rgba(228, 239, 63, 0.3); }
.diff-card.done strong::after { content: ' \2714'; color: var(--kitchen-dark); }

/* Lives, as balls in the header. Spent ones stay as empty sockets so the
   count reads at a glance rather than by counting what is there. */
.lives { display: flex; gap: 6px; align-items: center; }
.lives i {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.16);
}
.lives i.on { background: var(--ball); box-shadow: 0 0 10px rgba(228, 239, 63, 0.7); }

.ladder { list-style: none; margin: 0; padding: 0; }
.rung {
  display: grid;
  grid-template-columns: 26px 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 10px;
}
.rung + .rung { border-top: 2px dashed rgba(16, 32, 44, 0.14); }
.rung canvas.mini { width: 34px; height: 40px; }
.rung-no {
  font-weight: 900;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rung-name { font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; }
.rung-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rung-state {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kitchen-dark);
}
.rung.beaten { opacity: 0.5; }
.rung.beaten .rung-name { text-decoration: line-through; }
.rung.next { background: rgba(228, 239, 63, 0.32); box-shadow: inset 0 0 0 2px var(--ink); }
/* Rivals you have not reached are silhouettes: meeting them should be the
   first time you see them. */
.rung.ahead canvas.mini { filter: brightness(0) opacity(0.28); }
.rung.ahead .rung-name, .rung.ahead .rung-title { color: var(--ink-soft); opacity: 0.6; }

.scout-face {
  background: var(--cream-2);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  place-items: center;
}
.scout-face canvas { width: 100%; max-width: 230px; height: 250px; }
.stat-bar.hot i { background: var(--flag); }

.reward-list { margin: 4px 0 10px; padding-left: 20px; }
.reward-list li { font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.7; }
.reward-list strong { color: var(--ink); }

.season-note {
  text-align: center;
  font-weight: 900;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  margin: -8px 0 14px !important;
}
.season-note.good { color: var(--kitchen-dark); }
.season-note.bad { color: var(--flag); }

/* ======================= Achievements ======================= */

.ach-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ach-bar {
  flex: 1;
  height: 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(16, 32, 44, 0.12);
  overflow: hidden;
}
.ach-bar i { display: block; height: 100%; background: var(--ball); }
.ach-progress span { font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }

.ach-list { list-style: none; margin: 0; padding: 0; }
.ach { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; }
.ach + .ach { border-top: 2px dashed rgba(16, 32, 44, 0.14); }
.ach-mark {
  flex: none;
  width: 24px; height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  background: rgba(16, 32, 44, 0.08);
}
.ach.got .ach-mark { background: var(--ball); }
.ach-text { display: flex; flex-direction: column; gap: 1px; }
.ach-text strong { font-size: 13.5px; font-weight: 900; }
.ach-text em { font-style: normal; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
/* Locked entries are legible on purpose: an achievement you cannot read is
   not a goal, it is a surprise. */
.ach:not(.got) .ach-text strong { color: var(--ink-soft); }

/* ======================= Achievement toast ======================= */

.toast-rail {
  position: absolute;
  top: 70px; right: 18px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  align-items: flex-end;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 5px 0 var(--ink), 0 12px 24px rgba(8, 24, 36, 0.35);
  animation: toast-in 0.34s cubic-bezier(.16, 1.5, .4, 1);
}
.toast.out { animation: toast-out 0.4s ease forwards; }
.toast b {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ball);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.toast span { display: flex; flex-direction: column; line-height: 1.25; }
.toast strong { font-size: 12.5px; font-weight: 900; }
.toast em { font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 900; }

@keyframes toast-in { from { opacity: 0; transform: translateX(40px) scale(0.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out { animation: none; }
}


/* ======================= Venue picker ======================= */

/* Five courts as three over two. A single row squeezed the names to the
   point of truncating them; a grid gives each one room and keeps the set
   reading as one block. */
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.venue-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 7px 6px 6px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
/* Swatch, then a text column. The requirement goes on a second line rather
   than beside the name: at three across, a name and a difficulty on one row
   left "Centre Court" reading as "Centr...". A min-height keeps the locked
   and unlocked cards the same size, so the grid does not go ragged. */
.venue-card { min-height: 42px; }
.venue-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.venue-card strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The blurb belongs to the grid above it, but sitting flush against the
   buttons it read as a caption on the bottom row rather than on the
   selection. */
.venue-blurb { margin-top: 9px !important; }
.venue-card.on { background: var(--court); color: var(--line); }
.venue-card.on:hover { background: var(--court-dark); }
.venue-card:disabled { opacity: 0.55; cursor: default; }
/* A locked court keeps its swatch and its name -- you should be able to see
   what you are playing for -- and says which season opens it. */
.venue-card.locked { opacity: 0.5; cursor: not-allowed; }
.venue-card.locked .venue-swatch { filter: grayscale(0.7); }
.venue-card em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flag);
  white-space: nowrap;
}
/* Three bands: the court, its kitchen and the ground around it. That is
   enough to tell five venues apart without rendering five thumbnails. */
.venue-swatch {
  flex: none;
  width: 34px; height: 24px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: linear-gradient(var(--c) 0 34%, var(--a) 34% 66%, var(--b) 66% 100%);
}


/* ======================= Home ======================= */

/* Eight equal buttons in a grid is a list, not a menu -- nothing tells you
   where to start or what belongs with what. Three labelled sections, with
   the season as the headline and the two utility screens demoted to the
   footer, says it without anyone having to read all eight. */
.home { display: flex; flex-direction: column; gap: 4px; }
.home-sec + .home-sec { margin-top: 13px; }

.sec-label {
  margin: 0 0 7px !important;
  font-size: 10.5px !important;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
}

.home-row { display: grid; gap: 9px; }
.home-row.lead { grid-template-columns: 1.55fr 1fr; }
.home-row.two { grid-template-columns: 1fr 1fr; }

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 13px 15px;
  text-align: left;
  cursor: pointer;
}
.tile strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* The icons take `currentColor` and their size from here, so a tile that
   inverts on hover takes its icon with it, and nothing has to be redrawn to
   fit a new slot. */
.ico {
  width: 19px;
  height: 19px;
  flex: none;
  overflow: visible;   /* round caps sit a hair outside the 24 box */
}
.home-links button { display: inline-flex; align-items: center; gap: 7px; }
.home-links .ico { width: 15px; height: 15px; }
.tile > span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.35;
}
.tile:hover > span { color: var(--ink); }

/* The headline. Bigger type and court blue, because it is the mode the whole
   game is built around -- and because the ball yellow it used to wear is the
   same yellow as the progress bar and the pips, so it read as one more meter
   rather than as the way in. */
.tile.hero {
  background: var(--court);
  padding: 15px 17px;
  justify-content: center;
  color: var(--cream);
}
.tile.hero strong { font-size: 21px; gap: 10px; }
.tile.hero .ico { width: 25px; height: 25px; }
.tile.hero > span { color: var(--cream); opacity: 0.86; }
.tile.hero:hover { background: var(--court-dark); }
.tile.hero:hover > span { color: var(--cream); }
/* A run in progress is worth shouting about. */
.tile.hero.live { box-shadow: 0 6px 0 var(--ink), 0 0 0 3px var(--ball); }

.pips { display: flex; gap: 5px; margin-top: 7px; }
.pips i {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(16, 32, 44, 0.16);
}
.pips i.on { background: var(--ball); }

/* Your own character, on the button that edits it. */
.tile.face { flex-direction: row; align-items: center; gap: 11px; }
.tile-face { width: 48px; height: 58px; flex: none; display: block; }
canvas.preview-canvas { width: 100%; height: 100%; display: block; }
/* The editor's stage: a sunlit box for the figure to turn in. */
.live-stage {
  width: 100%;
  height: 190px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(16, 32, 44, 0.16) 0 28%, transparent 60%),
    linear-gradient(#cfe6f5, #eef6ea);
  overflow: hidden;
}
.tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-text strong {
  /* Back to a block: `.tile strong` turns these into flex rows to seat an
     icon, and a flex container has no text to ellipsise. This one carries a
     name somebody typed, so the ellipsis matters more than the icon slot. */
  display: block;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-text > span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }

.tile-bar {
  width: 100%;
  height: 8px;
  margin-top: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(16, 32, 44, 0.12);
  overflow: hidden;
}
.tile-bar i { display: block; height: 100%; background: var(--ball); }

.home-foot { justify-content: space-between; align-items: center; }
.home-links { display: flex; gap: 8px; }
.home-links button { padding: 9px 15px; font-size: 12.5px; }

@media (max-width: 620px) {
  .home-row.lead, .home-row.two { grid-template-columns: 1fr; }
  .home-foot { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
  .home-links { justify-content: center; }
  .home-foot .muted { text-align: center; }
}

/* ============================ Menus ============================ */

.menu-layer {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(12, 42, 64, 0.30), rgba(8, 28, 44, 0.66));
  pointer-events: auto;
  overflow-y: auto;
}
.menu-layer.open { display: flex; }

.menu-panel {
  position: relative;          /* the confirm sheet anchors to this */
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* A confirmation, laid over the screen that asked for it rather than in a
   window of its own. The panel already clips to its own rounded border, so
   the veil covers exactly the thing being interrupted and nothing else. */
.veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 32, 44, 0.62);
  animation: veil-in 0.14s ease-out;
  z-index: 5;
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }

.ask {
  width: min(400px, 100%);
  padding: 20px 22px 18px;
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ask strong {
  display: block;
  font-size: 19px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ask p {
  margin: 7px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ask-row {
  display: flex;
  gap: 9px;
  margin-top: 16px;
  justify-content: flex-end;
}
button.danger { background: var(--flag); color: var(--cream); }
button.danger:hover { background: #d84a3c; }

/* Only on first appearance -- re-rendering the same screen must not replay it. */
.menu-panel.enter { animation: serve 0.26s cubic-bezier(.2, 1.4, .4, 1); }
.menu-panel.wide { width: min(940px, 100%); }

@keyframes serve {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Court-blue header band with the kitchen line painted under it. */
.menu-head {
  position: relative;
  padding: 18px 26px 16px;
  background: var(--court);
  border-bottom: 4px solid var(--ink);
}
.menu-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--line) 0 18px, transparent 18px 30px);
  opacity: 0.85;
}
.menu-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--line);
  text-shadow: 0 3px 0 rgba(10, 40, 70, 0.45);
}

.menu-body { padding: 18px 26px; overflow-y: auto; flex: 1; }

.menu-foot {
  padding: 16px 26px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  border-top: 3px dashed rgba(16, 32, 44, 0.22);
  background: var(--cream-2);
  flex-wrap: wrap;
}
.menu-foot .muted { margin-right: auto; }

/* ---- title screen ---- */

.title-panel .brand {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 28px 10px;
  background: var(--court);
  border-bottom: 4px solid var(--ink);
  position: relative;
}
.title-panel .brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--line) 0 18px, transparent 18px 30px);
}

/* The ball, holes and all, drawn in CSS. */
.brand-mark {
  width: 74px; height: 74px;
  border-radius: 50%;
  flex: none;
  background-color: var(--ball);
  border: 4px solid var(--ink);
  box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.13), 0 5px 0 var(--ink);
  background-image:
    radial-gradient(circle at 31% 28%, var(--ball-shade) 4.4px, transparent 5px),
    radial-gradient(circle at 69% 28%, var(--ball-shade) 4.4px, transparent 5px),
    radial-gradient(circle at 50% 50%, var(--ball-shade) 4.4px, transparent 5px),
    radial-gradient(circle at 24% 60%, var(--ball-shade) 4.4px, transparent 5px),
    radial-gradient(circle at 76% 60%, var(--ball-shade) 4.4px, transparent 5px),
    radial-gradient(circle at 50% 80%, var(--ball-shade) 3.6px, transparent 4px);
  animation: bounce 1.5s cubic-bezier(.5, .05, .5, .95) infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  45% { transform: translateY(-13px) scale(0.97, 1.03); }
  55% { transform: translateY(-13px) scale(0.97, 1.03); }
  70% { transform: translateY(0) scale(1.05, 0.95); }
  82% { transform: translateY(0) scale(1, 1); }
}

.title-panel h1 {
  margin: 0;
  font-size: 46px;
  line-height: 0.94;
  letter-spacing: 0.06em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ball);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(10, 38, 64, 0.5);
  transform: rotate(-2deg);
}
.tagline {
  margin: 10px 0 0;
  color: #d5ecff;
  letter-spacing: 0.24em;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

/* ---- buttons ---- */

button {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--line);
  border: 3px solid var(--ink);
  border-radius: 11px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.07s, box-shadow 0.07s, background 0.14s;
}
button:hover:not(:disabled) { background: var(--cream-2); }
button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 0 4px 0 rgba(16, 32, 44, 0.35); }
button:focus-visible { outline: 3px solid var(--kitchen); outline-offset: 3px; }

button.primary { background: var(--ball); }
button.primary:hover:not(:disabled) { background: #eef85f; }
button.ghost { background: transparent; box-shadow: none; border-width: 2px; }
button.ghost:active:not(:disabled) { transform: translateY(2px); }

button.big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
  padding: 16px 18px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
button.big::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--court);
  transition: width 0.16s, background 0.16s;
}
button.big:hover::before { width: 13px; background: var(--kitchen); }
button.big strong { font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; padding-left: 6px; }
button.big span { font-size: 12px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0; padding-left: 6px; }

.muted { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.err { color: var(--flag); font-size: 13px; font-weight: 800; min-height: 18px; }

/* ---- character select ---- */

.char-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
@media (max-width: 800px) { .char-layout { grid-template-columns: 1fr; } }

/* Always 2 rows of 3 -- auto-fill gave 4 and 2 on a wide screen, which looks
   like a mistake rather than a layout. */
.char-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.char-card {
  border: 3px solid var(--ink);
  border-radius: 13px;
  background: var(--line);
  box-shadow: 0 4px 0 var(--ink);
  padding: 8px 6px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.14s, box-shadow 0.12s;
}
.char-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); background: var(--cream); }
.char-card.sel {
  background: var(--ball);
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--ink);
}
.char-card canvas { width: 100%; height: 116px; display: block; }
.char-name { font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; }
.char-title { font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; }
.char-card.sel .char-title { color: #5c6410; }

.char-detail h2 { margin: 0 0 2px; font-size: 25px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
.char-detail h2 small { font-size: 11px; color: var(--kitchen-dark); font-weight: 900; letter-spacing: 0.12em; }
.blurb { color: var(--ink-soft); font-size: 13px; font-weight: 600; margin: 0 0 14px; min-height: 36px; line-height: 1.5; }

.stat-row {
  display: grid;
  grid-template-columns: 62px 1fr 46px;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
  color: var(--ink-soft);
}
.stat-bar {
  height: 11px;
  background: var(--line);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.stat-bar i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(135deg,
    var(--kitchen) 0 7px, var(--court) 7px 14px);
}

.stat-row { cursor: help; border-radius: 6px; padding: 1px 3px; margin-left: -3px; }
.stat-row:hover, .stat-row:focus { background: rgba(22, 152, 138, 0.12); outline: none; }
.stat-row:focus-visible { outline: 2px solid var(--kitchen); outline-offset: 1px; }
.stat-rel { text-align: right; font-size: 10.5px; color: var(--ink-soft); }
.stat-rel.up { color: var(--kitchen-dark); }
.stat-rel.down { color: #b4604f; }

/* One reused tooltip for the whole stat block. */
.tip {
  position: absolute;
  z-index: 40;
  width: 230px;
  padding: 11px 13px;
  background: var(--ink);
  color: #dceaf2;
  border: 3px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 6px 0 rgba(6, 16, 24, 0.5), 0 14px 28px rgba(6, 20, 30, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.tip.on { opacity: 1; }
.tip strong {
  display: block;
  color: var(--ball);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.tip span { display: block; font-size: 12.5px; line-height: 1.5; font-weight: 600; }

.fixed-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 600;
  font-style: italic;
}

.picker { margin-top: 14px; }
.picker-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 900;
  margin-bottom: 6px;
}
.seg { display: flex; gap: 7px; }
.seg button { flex: 1; padding: 9px 8px; font-size: 13px; }
.seg button.on { background: var(--court); color: var(--line); }
.seg button.on:hover { background: var(--court-dark); }

.field { display: block; margin-top: 14px; }
.field span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 900;
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  padding: 11px 13px;
  border-radius: 11px;
  border: 3px solid var(--ink);
  background: var(--line);
  color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(16, 32, 44, 0.08);
}
.field input:focus { outline: 3px solid var(--kitchen); outline-offset: 2px; }
.big-field input {
  font-size: 32px;
  letter-spacing: 0.3em;
  text-align: center;
  font-weight: 900;
  text-indent: 0.3em;
}

/* ---- lobby ---- */

.code-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 13px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 4px 0 rgba(16, 32, 44, 0.35);
}
.code-box .muted { color: #9fc0d4; }
.code {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.26em;
  color: var(--ball);
  flex: 1;
  text-indent: 0.26em;
  font-variant-numeric: tabular-nums;
}
.code-box .ghost { color: var(--line); border-color: rgba(255, 255, 255, 0.6); }
.code-box .ghost:hover { background: rgba(255, 255, 255, 0.12); }

.player-list { list-style: none; margin: 14px 0; padding: 0; }
.player-list li {
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--line);
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.player-list li.ready { background: #e9f9ec; box-shadow: inset 6px 0 0 var(--kitchen); }
.player-list canvas.mini { width: 40px; height: 46px; }
.pl-name { font-weight: 900; }
.pl-char, .pl-ping { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.pl-state {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--line);
  background: var(--ink-soft);
  padding: 3px 9px;
  border-radius: 999px;
}
.player-list li.ready .pl-state { background: var(--kitchen); }

/* ---- settings ---- */

.tab-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 8px 15px; font-size: 13px; }
.tab.on { background: var(--court); color: var(--line); }
/* The count riding along inside each tab. Dimmer than the label, so the tab
   still reads as its name first. */
.tab em {
  font-style: normal;
  margin-left: 7px;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
}
.tab.on em { opacity: 0.85; }
.tab.full em { color: var(--kitchen-dark); opacity: 1; }
.tab.on.full em { color: var(--ball); }
.tab.on:hover { background: var(--court-dark); }

.settings-list { display: flex; flex-direction: column; }

.set-row {
  display: grid;
  grid-template-columns: 1fr 224px;
  gap: 16px;
  align-items: center;
  padding: 12px 2px;
  border-bottom: 2px dashed rgba(16, 32, 44, 0.16);
}
@media (max-width: 600px) { .set-row { grid-template-columns: 1fr; gap: 8px; } }
.set-label span { font-size: 14px; font-weight: 800; }
.set-label small {
  display: block;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.45;
}
.set-control { display: flex; justify-content: flex-end; }

select {
  width: 100%;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--line);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
select:focus-visible { outline: 3px solid var(--kitchen); outline-offset: 2px; }

.range-wrap { display: flex; align-items: center; gap: 11px; width: 100%; }
.range-wrap input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--line);
}
.range-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--ball);
  border: 3px solid var(--ink);
  cursor: pointer;
  margin-top: -1px;
}
.range-wrap input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ball);
  border: 3px solid var(--ink);
  cursor: pointer;
}
.range-out {
  width: 76px;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.switch { position: relative; display: inline-block; width: 54px; height: 29px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute;
  inset: 0;
  background: var(--line);
  border: 3px solid var(--ink);
  border-radius: 999px;
  transition: background 0.16s;
}
.switch i::after {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  left: 3px; top: 3px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.16s, background 0.16s;
}
.switch input:checked + i { background: var(--kitchen); }
.switch input:checked + i::after { transform: translateX(25px); background: var(--line); }
.switch input:focus-visible + i { outline: 3px solid var(--kitchen); outline-offset: 3px; }

/* ---- prose ---- */

.cursor-preview {
  display: block;
  width: 224px;
  height: 76px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
}

/* ---- How to play ----
   This was a table of eight rows followed by four paragraphs, which meant the
   three shots the whole game turns on were two paragraphs you had to scroll
   to. Now they are three cards across the top, side by side, where the trade
   between them can be read at a glance -- and the keys and the rules share a
   row underneath instead of stacking. Nothing scrolls on a laptop. */
.swing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.swing-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px 12px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}
.swing-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swing-head strong {
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.swing-tag {
  align-self: flex-start;
  margin-bottom: 4px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kitchen-dark);
}
.swing-card p { margin: 0 0 6px !important; font-size: 12px !important; line-height: 1.45 !important; }
.swing-card p.cost { margin: auto 0 0 !important; padding-top: 6px; border-top: 2px dashed rgba(16, 32, 44, 0.18); }

/* A key, drawn as one. */
.kbd {
  flex: none;
  padding: 3px 7px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--cream);
  box-shadow: 0 2px 0 var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.howto-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
.howto-split .sec-label { margin-top: 0 !important; }
.key-grid { display: flex; flex-direction: column; gap: 7px; }
.key-row { display: flex; align-items: baseline; gap: 9px; font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.4; }

.menu-body h3 {
  margin: 20px 0 7px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kitchen-dark);
}
.menu-body p { font-size: 13px; color: var(--ink-soft); font-weight: 600; line-height: 1.6; margin: 0 0 9px; }
.menu-body b { color: var(--ink); font-weight: 900; }
ul.rules { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-soft); font-weight: 600; line-height: 1.5; }
ul.rules li + li { margin-top: 6px; }
ul.rules b { color: var(--ink); }

.final-score {
  font-size: 62px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--ball);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(16, 32, 44, 0.3);
  margin: 10px 0 22px;
}

/* End-of-match scorecard: every player on the court, one row each. */
.scorecard {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.scorecard thead th {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  text-align: right;
  padding: 0 0 6px 8px;
  white-space: nowrap;
}
.scorecard thead th.who { text-align: left; padding-left: 0; }
.scorecard tbody tr { border-top: 2px dashed rgba(16, 32, 44, 0.16); }
.scorecard tbody tr.won { background: rgba(228, 239, 63, 0.16); }
.scorecard tbody tr.me th.who span { color: var(--kitchen-dark); }
.scorecard th.who {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-weight: 900;
  text-align: left;
}
.scorecard th.who span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
.scorecard th.who em {
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  padding: 2px 6px;
}
.scorecard canvas.mini { width: 26px; height: 30px; flex: none; }
.scorecard td {
  text-align: right;
  padding: 5px 0 5px 8px;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}
.scorecard td.bad { color: var(--flag); }
.scorecard .acc { color: var(--ink); }
.scorecard tbody td.acc { font-weight: 900; }
p.fine { font-size: 11px !important; margin-bottom: 14px !important; }

.scorecard-wrap { min-width: 0; }
.scorecard thead .sm { display: none; }

@media (max-width: 520px) {
  .scorecard { font-size: 11.5px; }
  .scorecard canvas.mini { display: none; }
  .scorecard thead th { font-size: 9px; letter-spacing: 0.04em; padding-left: 5px; }
  .scorecard td { padding-left: 5px; }
  .scorecard th.who { gap: 5px; }
  .scorecard th.who span { max-width: 6ch; }
  .scorecard th.who em { font-size: 8px; padding: 2px 4px; }
  /* "Accuracy" is the widest header by some way, and losing that column off
     the edge of a phone would hide the one number people came for. */
  .scorecard thead .lg { display: none; }
  .scorecard thead .sm { display: inline; }
}

.spinner {
  width: 40px; height: 40px;
  margin: 12px auto 18px;
  border-radius: 50%;
  background-color: var(--ball);
  border: 3px solid var(--ink);
  background-image:
    radial-gradient(circle at 32% 30%, var(--ball-shade) 3px, transparent 3.5px),
    radial-gradient(circle at 68% 30%, var(--ball-shade) 3px, transparent 3.5px),
    radial-gradient(circle at 50% 52%, var(--ball-shade) 3px, transparent 3.5px),
    radial-gradient(circle at 32% 72%, var(--ball-shade) 3px, transparent 3.5px),
    radial-gradient(circle at 68% 72%, var(--ball-shade) 3px, transparent 3.5px);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fatal {
  position: fixed;
  inset: 0;
  background: #12212e;
  color: #ffd7d2;
  padding: 40px;
  overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  pointer-events: auto;
  z-index: 100;
}
.fatal h1 { font-family: var(--font); color: var(--ball); }
.fatal pre { white-space: pre-wrap; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .msg, .menu-panel, .menu-panel.enter, .brand-mark, .spinner { animation: none; }
}