:root{
  --court-blue: #123C56;
  --court-blue-deep: #0B2C40;
  --court-blue-light: #1E5878;
  --chalk: #F7F7F2;
  --ball: #DCEE4B;
  --ball-dim: #A9BC3E;
  --bench: #7C93A0;
  --ink: #0E1B22;
  --danger: #E4603A;
  --radius: 14px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--chalk);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Capped at phone width on purpose — everyone using this app is on a phone,
   so that's the one layout, not a shrunk-down desktop one. On an actual
   phone this is a no-op (375px is already under the cap); on a laptop
   browser it now centers as a narrow column instead of stretching wide. */
.wrap{
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* Hidden by default; JS adds .show to reveal whichever screen is active. */
.gate{ display:none; }
.gate.show{ display:block; }

/* ---------- HERO ---------- */
header.hero{
  background: linear-gradient(160deg, var(--court-blue) 0%, var(--court-blue-deep) 100%);
  border-radius: 20px;
  padding: 44px 40px 36px;
  color: var(--chalk);
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
}
header.hero::before{
  content:"";
  position:absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--ball) 0%, rgba(220,238,75,0.15) 55%, transparent 70%);
  opacity: 0.5;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ball);
  margin: 0 0 10px;
}
h1{
  font-family:'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  position: relative;
}
.hero p{
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #C9D8E1;
  margin: 0;
  position: relative;
}

/* ---------- LANDING / JOIN / LOBBY ---------- */
.landing, .join-screen, .lobby{
  background: #fff;
  border: 1px solid #E4E1D6;
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 32px;
  text-align: center;
}
.landing p, .lobby .lb-hint{
  color: var(--bench);
  font-size: 14.5px;
  margin: 0 0 18px;
}
.join-screen, .landing{ text-align: left; max-width: 360px; }
.join-screen .field-label, .landing .field-label{ margin-top: 4px; }
.name-input{
  width: 100%;
  border: 1.5px solid #DEDACB;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'IBM Plex Sans'; font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
}
.lobby h3{
  font-family:'IBM Plex Mono'; font-size: 11px; letter-spacing:0.1em;
  text-transform: uppercase; color: var(--bench); margin: 0 0 8px;
}
.share-row{
  /* No display:flex here — .gate{display:none} above must win by default.
     Same-specificity rules fall back to source order, and this rule comes
     later in the file, so an unconditional display here would always win
     regardless of .show (this was a real bug, caught by testing the player
     view — the link box showed for everyone, not just the owner). */
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 20px;
}
.share-row.gate.show{
  display: flex;
}
#shareLinkInput{
  flex: 1;
  border: 1.5px solid #DEDACB;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'IBM Plex Mono'; font-size: 13px;
  color: var(--ink);
  background: var(--chalk);
}
.copy-btn{
  border: none;
  background: var(--court-blue);
  color: var(--ball);
  border-radius: 10px;
  padding: 0 18px;
  font-family: 'IBM Plex Sans'; font-weight: 700; font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.copy-btn:hover{ background: var(--court-blue-light); }

#revealStartWrap{ margin-bottom: 20px; }

.start-panel{
  /* No unconditional display here, same reasoning as .share-row above —
     .gate{display:none} must win until .show is added. */
  max-width: 360px;
  margin: 0 auto 20px;
  text-align: left;
}
.start-panel .rounds-input{ max-width: 160px; margin-bottom: 14px; }
.start-panel .equal-msg{ margin-top: 0; margin-bottom: 16px; }
.start-panel-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-secondary{
  border: 1.5px dashed #C9C4B2;
  background: transparent;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: 'IBM Plex Sans'; font-weight: 600; font-size: 13.5px;
  color: var(--bench);
  cursor: pointer;
}
.btn-secondary:hover{ border-color: var(--court-blue); color: var(--court-blue); }

.lobby .chips{ justify-content: center; }
.lobby-chip{
  background: var(--chalk);
  border: 1.5px solid #DEDACB;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px; font-weight:500;
  color: var(--ink);
}
.lobby-chip.host{
  background: var(--court-blue);
  border-color: var(--court-blue);
  color: var(--chalk);
}
.host-badge{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ball);
  margin-left: 4px;
}

/* ---------- SETUP PANEL ---------- */
.setup{
  background: #fff;
  border: 1px solid #E4E1D6;
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  margin-bottom: 32px;
}
/* Stacked, not side-by-side — .wrap is always phone-width now, and a
   single tall column matches how a native mobile form lays out fields,
   rather than squeezing two columns into a narrow card. */
.setup-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
label.field-label{
  display:block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bench);
  margin-bottom: 8px;
}
.chips{
  display:flex; flex-wrap: wrap; gap: 8px;
}
.chip{
  display:flex; align-items:center; gap:6px;
  background: var(--chalk);
  border: 1.5px solid #DEDACB;
  border-radius: 999px;
  padding: 6px 6px 6px 14px;
}
.chip input{
  border:none; background:transparent; outline:none;
  font-family:'IBM Plex Sans'; font-size: 14px; font-weight:500;
  width: 92px; color: var(--ink);
}
.chip button{
  border:none; background: #E9E5D6; color: var(--bench);
  width:20px; height:20px; border-radius:50%;
  cursor:pointer; font-size: 12px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.chip button:hover{ background: var(--danger); color: white; }
.add-chip{
  border: 1.5px dashed #C9C4B2;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-family:'IBM Plex Sans'; font-size: 13px; font-weight: 600;
  color: var(--bench);
  cursor: pointer;
}
.add-chip:hover{ border-color: var(--court-blue); color: var(--court-blue); }

.equal-msg{
  display:flex; align-items:flex-start; gap: 9px;
  margin-top: 16px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--court-blue);
  background: #EFF6F1;
  border: 1px solid #D7E8DB;
  border-radius: 9px;
  padding: 10px 14px;
}
.equal-msg .dot{
  flex-shrink:0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ball-dim);
  margin-top: 5px;
}
.equal-msg.warn{
  color: var(--danger);
  background: #FBEDE9;
  border-color: #F0D2C8;
}
.equal-msg.warn .dot{ background: var(--danger); }

.rounds-input{
  display:flex; align-items:center;
  border: 1.5px solid #DEDACB; border-radius: 10px;
  overflow:hidden;
}
.rounds-input button{
  background: var(--chalk); border:none; width:38px; height:44px;
  font-size:18px; cursor:pointer; color: var(--court-blue); font-weight:700;
}
.rounds-input button:hover{ background:#EDEADC; }
.rounds-input input{
  width: 100%; text-align:center; border:none; outline:none;
  font-family:'IBM Plex Mono'; font-size: 18px; font-weight:600;
  color: var(--ink); -moz-appearance: textfield;
}
.rounds-input input::-webkit-outer-spin-button,
.rounds-input input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }

.generate-row{
  display:flex; align-items:center; justify-content: space-between;
  margin-top: 22px; flex-wrap: wrap; gap: 14px;
}
.err{
  font-family:'IBM Plex Mono'; font-size: 12.5px; color: var(--danger);
}
.btn-generate{
  background: var(--court-blue);
  color: var(--ball);
  border:none; border-radius: 999px;
  padding: 14px 30px;
  font-family:'IBM Plex Sans'; font-weight: 700; font-size: 14.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-generate:hover{ background: var(--court-blue-light); transform: translateY(-1px); }
.btn-generate:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--ball-dim);
  outline-offset: 2px;
}

/* ---------- SUMMARY ---------- */
.summary{
  display:none;
  background: #fff;
  border: 1px solid #E4E1D6;
  border-radius: var(--radius);
  padding: 22px 28px;
  margin-bottom: 32px;
}
.summary.show{ display:block; }
.summary h3{
  font-family:'IBM Plex Mono'; font-size: 11px; letter-spacing:0.1em;
  text-transform: uppercase; color: var(--bench); margin: 0 0 16px;
}
.bars{ display:flex; flex-direction:column; gap: 9px; }
.bar-row{ display:grid; grid-template-columns: 96px 1fr 34px; align-items:center; gap: 10px; }
.bar-name{ font-size: 13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ background: #EEEBDF; border-radius: 6px; height: 9px; overflow:hidden; }
.bar-fill{ background: var(--court-blue); height:100%; border-radius:6px; transition: width 0.5s ease; }
.bar-count{ font-family:'IBM Plex Mono'; font-size: 12.5px; color: var(--bench); text-align:right; }

/* ---------- LEADERBOARD ---------- */
.leaderboard{
  display:none;
  background: var(--court-blue);
  border-radius: var(--radius);
  padding: 24px 26px 22px;
  margin-bottom: 32px;
  color: var(--chalk);
}
.leaderboard.show{ display:block; }
.leaderboard h3{
  font-family:'IBM Plex Mono'; font-size: 11px; letter-spacing:0.1em;
  text-transform: uppercase; color: var(--ball); margin: 0 0 4px;
}
.lb-hint{
  font-size: 13px; color: #AEC3D0; margin: 0 0 18px;
}
/* Column widths are phone-tuned, not a breakpoint fallback — .wrap is
   always phone-width now, so this is just the row's one layout. The
   original desktop-width columns (226px of fixed columns alone) left the
   name column ~1px wide once squeezed into a narrow card; names vanished. */
.lb-row{
  display:grid;
  grid-template-columns: 20px 1fr 46px 50px 42px;
  align-items:center;
  gap: 6px;
  padding: 10px 4px;
  border-top: 1px solid rgba(201,216,225,0.15);
}
.lb-row:first-child{ border-top:none; }
.lb-row.head{
  font-family:'IBM Plex Mono'; font-size: 10px; letter-spacing:0.08em;
  text-transform: uppercase; color: #8FA8B8; padding-bottom: 8px;
}
.lb-rank{
  font-family:'Bebas Neue'; font-size: 19px; color: #7FA0B4;
}
.lb-row.top1 .lb-rank{ color: var(--ball); }
.lb-name{ font-size: 14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-record{ font-family:'IBM Plex Mono'; font-size: 11px; color: #C9D8E1; }
.lb-rate{ font-family:'IBM Plex Mono'; font-size: 11px; font-weight:600; color: var(--ball); }
.lb-diff{ font-family:'IBM Plex Mono'; font-size: 11px; color: #AEC3D0; text-align:right; }
.lb-empty{ font-size: 13px; color: #AEC3D0; padding: 6px 4px; }

/* ---------- SCORE INPUT ---------- */
.score-row{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  margin-top: 12px;
}
.score-input{
  width: 46px; height: 34px;
  text-align:center;
  border-radius: 7px; border: 1.5px solid rgba(247,247,242,0.25);
  background: rgba(247,247,242,0.08);
  color: var(--chalk);
  font-family:'IBM Plex Mono'; font-size: 14px; font-weight:600;
  -moz-appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.score-input::placeholder{ color: rgba(247,247,242,0.35); }
.score-input.win{ border-color: var(--ball); background: rgba(220,238,75,0.14); }
.score-display{
  width: 46px; height: 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 7px; border: 1.5px solid rgba(247,247,242,0.25);
  background: rgba(247,247,242,0.08);
  color: var(--chalk);
  font-family:'IBM Plex Mono'; font-size: 14px; font-weight:600;
}
.score-display.pending{ color: rgba(247,247,242,0.35); }
.score-display.win{ border-color: var(--ball); background: rgba(220,238,75,0.14); }
.score-dash{ color: #7FA0B4; font-family:'IBM Plex Mono'; font-size: 13px; }
.score-note{
  text-align:center; margin-top: 6px;
  font-family:'IBM Plex Mono'; font-size: 10.5px; color: var(--danger);
  min-height: 14px;
}

/* ---------- ROUNDS ---------- */
#rounds{
  display: none; /* #rounds.gate.show below overrides this — an ID beats a class */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
#rounds.gate.show{
  display: grid;
}
.round-card{
  background: var(--court-blue);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  opacity: 0;
  animation: rise 0.45s ease forwards;
}
@keyframes rise{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.round-head{
  display:flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.round-num{
  font-family:'Bebas Neue'; font-size: 30px; color: var(--ball);
  letter-spacing: 0.02em; line-height:1;
}
.round-label{
  font-family:'IBM Plex Mono'; font-size: 10.5px; color: #9FB4C2;
  text-transform: uppercase; letter-spacing:0.1em;
}

.court{
  background: var(--court-blue-light);
  border-radius: 10px;
  padding: 16px 14px;
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  min-height: 92px;
}
.court::before{
  content:"";
  position:absolute; left:50%; top:8%; bottom:8%;
  width:0; border-left: 2px dashed rgba(247,247,242,0.4);
}
.team{
  display:flex; flex-direction:column; gap:6px;
  width: 44%;
  text-align:center;
}
.team .p{
  background: var(--chalk);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 6px;
  font-size: 13px;
  font-weight: 600;
  line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vs{
  font-family:'IBM Plex Mono'; font-size: 11px; color: var(--ball-dim);
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  background: var(--court-blue-light);
  padding: 2px 6px; border-radius: 4px;
}

.bench{
  margin-top: 14px;
}
.bench-label{
  font-family:'IBM Plex Mono'; font-size: 10px; letter-spacing:0.1em;
  text-transform: uppercase; color: var(--bench-label, #7FA0B4);
  margin-bottom: 7px;
}
.bench-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.bench-chip{
  font-size: 12px; font-weight:500; color: #C9D8E1;
  border: 1px solid rgba(201,216,225,0.35);
  border-radius: 999px; padding: 4px 11px;
}

.empty-state{
  text-align:center; padding: 50px 20px;
  color: var(--bench);
  font-size: 14px;
}
.empty-state strong{ color: var(--ink); display:block; font-size:16px; margin-bottom:6px; }

footer{
  text-align:center; margin-top: 46px;
  font-family:'IBM Plex Mono'; font-size: 11.5px; color: var(--bench);
}