:root {
  --pink: #FB1671;
  --pink-dark: #C5005F;
  --pink-soft: #FCE3EE;
  --bg: #F2F2F5;
  --paper: #F7F7F7;
  --ink: #0E0E0E;
  --dim: #6D6D78;
  --line: #E3E3E8;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The page fills its window or iframe exactly and never scrolls, so a drag on the court
   cannot scroll or bounce the page, or pull-to-refresh the parent. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: flex;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* phone-shaped column: fills a small iframe, and stays phone-sized on a big screen */
#app {
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 940px;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
}

/* header card (the reference's .hcard): row 1 is the lockup, then Score on the right;
   row 2 is "Aisle cleared" with the %, then the 6px bar */
.top { flex: 0 0 auto; background: var(--paper); border-radius: 16px 16px 0 0; padding: 12px 16px; }
.r1 { display: flex; align-items: center; gap: 10px; }
.lockup { display: inline-flex; align-items: center; }
.mc-sym { width: 40px; height: 25px; display: block; }
.divider { width: 1px; height: 28px; background: rgba(14, 14, 14, .25); margin: 0 14px; display: block; }
.cf-logo { height: 24px; width: auto; display: block; }
.spacer { flex: 1; }

.label {
  display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 6px;
  font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--dim); text-transform: uppercase;
}
.label b { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 14px; color: var(--ink); letter-spacing: 0; }
.bar { height: 6px; border-radius: 100px; background: #E3E3E8; overflow: hidden; }
.bar i {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--pink), var(--pink-dark));
  transition: width .25s cubic-bezier(.2, .8, .2, 1);
}
.stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stat span { font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--dim); text-transform: uppercase; }
.stat b { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 16px; color: var(--ink); letter-spacing: 0; }

/* stage */
.stage { flex: 1 1 auto; position: relative; min-height: 0; background: var(--bg); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* portrait touch screens: lift the paddle clear of the thumb. The court is just shorter
   (its height is already a recorded game input), so replays still match. */
@media (pointer: coarse) and (orientation: portrait) {
  .stage { touch-action: none; }
  canvas { height: calc(100% - 32px); }
}

/* overlays */
.overlay {
  position: absolute; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  text-align: center; padding: 28px 26px;
  background: rgba(247, 247, 247, .94); backdrop-filter: blur(6px);
}
.hide { display: none !important; }
#app.load-failed .overlay:not(#load-error), #app.load-failed .toast { display: none; }

/* menu screens (start, win, lose, game over) fill the stage under the header card, as in the
   reference: a frosted light layer over the game, with no card behind the heading and buttons */
.panel { width: 100%; display: flex; flex-direction: column; align-items: center; }
/* screen headings are supplied PNGs (3x, tilt baked in): the width is set on each img */
.big { line-height: 0; }
.big img { display: block; margin: 0 auto; height: auto; max-width: calc(100vw - 24px); }
.overlay p { font-size: 14px; line-height: 1.45; color: var(--dim); margin-top: 14px; max-width: 290px; }

.btn {
  display: inline-block; text-decoration: none;
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .03em; color: #fff;
  background: var(--pink); border: none; border-radius: 999px; padding: 15px 40px; margin-top: 22px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(251, 22, 113, .28); transition: transform .12s ease;
}
/* buttons squash a little when pressed */
.overlay .btn { transition: transform .12s ease, box-shadow .12s ease; }
.overlay .btn:active { transform: scale(.94) translateY(1px); box-shadow: 0 3px 10px rgba(251, 22, 113, .22); }
.overlay .btn.ghost:active { box-shadow: none; background: #F2F2F5; }
.btn:active { transform: scale(.96); }
.btn.wide { width: 100%; }
.btn.ghost {
  background: transparent; border: 1.5px solid #D6D6DC; box-shadow: none; color: var(--ink);
  margin-top: 10px; padding: 13px 34px; font-size: 14px;
}
/* the keep-playing label stays on one line, as on the screens board */
#btn-keep { white-space: nowrap; padding-inline: 24px; font-size: 14px; }
.note { font-size: 10px; line-height: 1.4; color: #9A9AA2; margin-top: 20px; max-width: 280px; }
.best {
  display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pink-dark); background: var(--pink-soft);
}
.best.muted { background: #EFEFF2; color: var(--dim); }

/* consent box (entry form) */
.consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; font-size: 11px; line-height: 1.4; color: #55555E; }
.consent input { margin-top: 2px; accent-color: var(--pink); }
.consent a { color: var(--pink-dark); }

/* entry form (before the first serve) */
.entry {
  width: 100%; max-width: 330px; text-align: left;
  background: #fff; border-radius: 22px; padding: 24px 22px 22px;
  box-shadow: 0 1px 0 rgba(14, 14, 14, .04), 0 18px 40px rgba(14, 14, 14, .12);
}
.entry-lockup { display: flex; justify-content: center; margin-bottom: 16px; }
.entry-title { margin-bottom: 8px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; text-align: center; color: var(--ink); }
.entry-row { display: flex; gap: 10px; }
.entry-row .entry-field { flex: 1; min-width: 0; }
.entry-field { margin-top: 10px; }
.entry-field label {
  display: block; margin: 0 0 5px 4px;
  font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--dim); text-transform: uppercase;
}
.entry-field input {
  width: 100%; border-radius: 14px; border: 1.5px solid #D2D2D2; background: #fff;
  font: 600 15px 'Archivo', sans-serif; padding: 12px 14px; color: var(--ink);
  -webkit-user-select: text; user-select: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entry-field input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(251, 22, 113, .16); }
.entry-field input[aria-invalid=true] { border-color: var(--pink-dark); background: #FFF7FA; }
.entry-err { display: block; min-height: 15px; margin: 4px 0 0 4px; font-size: 11px; font-weight: 700; color: var(--pink-dark); }
.entry-note { margin: 2px 0 0 4px; font-size: 11px; line-height: 1.4; color: var(--dim); }
.overlay .entry-note { max-width: none; margin-top: 2px; font-size: 11px; color: var(--dim); }
.entry-check { margin-top: 10px; }
.entry-consent { margin: 0 0 0 4px; }
.entry-consent input[aria-invalid=true] { outline: 2px solid var(--pink-dark); outline-offset: 1px; }
.entry .btn { margin-top: 12px; }

/* round toast */
.toast {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247, 247, 247, .7); backdrop-filter: blur(3px);
}
.toast .card {
  background: var(--ink); color: #fff; border-radius: 16px; padding: 14px 28px;
  font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.toast .card span { color: var(--pink); }

/* leaderboard (after a game ends) */
.board-box { width: 100%; max-width: 310px; margin-top: 24px; }
.board-box:empty { display: none; }
.overlay .save-status { margin: 0 auto 14px; max-width: none; font-size: 13px; font-weight: 700; color: var(--dim); }
.overlay .save-error { margin: 0 auto 14px; max-width: none; font-size: 13px; font-weight: 700; color: #B00040; }
.save-error .btn { display: block; margin: 10px auto 0; padding: 10px 18px; font-size: 13px; }
.overlay .board-note { margin: 0 auto 14px; max-width: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.board-note .best { margin: 0 4px 0 0; vertical-align: 1px; }
.board {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: 18px; padding: 6px 8px 8px; text-align: left;
  box-shadow: 0 1px 0 rgba(14, 14, 14, .04), 0 12px 28px rgba(14, 14, 14, .10);
}
.board caption {
  caption-side: top; padding: 0 0 8px;
  font-size: 11px; letter-spacing: .14em; font-weight: 900; color: var(--pink-dark); text-transform: uppercase;
}
.board th {
  padding: 6px 8px; border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--dim); text-transform: uppercase;
}
.board td { padding: 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.board tbody tr + tr td { border-top: 1px solid #F0F0F3; }
.board .rank { width: 34px; text-align: center; font-weight: 900; color: var(--dim); }
.board tbody tr:first-child .rank { color: var(--pink); }
.board .name { overflow-wrap: anywhere; }
.board .pts { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.board tr.me td { background: var(--pink-soft); border-top-color: transparent; }
.board tr.me + tr td { border-top-color: transparent; }
.board tr.me td:first-child { border-radius: 12px 0 0 12px; color: var(--pink-dark); }
.board tr.me td:last-child { border-radius: 0 12px 12px 0; color: var(--pink-dark); }
.board .you {
  display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 100px; vertical-align: 1px;
  font-size: 9px; letter-spacing: .1em; font-weight: 900; text-transform: uppercase; color: #fff; background: var(--pink);
}
.board .empty { text-align: center; font-size: 13px; font-weight: 600; color: var(--dim); padding: 14px 8px; }