/* ============================================================
   THE WHEEL — Saturday Game scorer
   Aesthetic: vintage country-club scorecard. Cream card stock,
   pine green felt, brass accents, classic serif display type.
   ============================================================ */

:root {
  --pine-deep: #0d2217;
  --pine: #14311f;
  --felt: #1c4128;
  --felt-light: #26543a;
  --cream: #f4ecd7;
  --cream-dim: #e9dfc4;
  --paper-line: #d8cba8;
  --ink: #22301f;
  --ink-soft: #5a624f;
  --brass: #c9a227;
  --brass-bright: #e6c14a;
  --money-up: #2e7d4f;
  --money-down: #b3402e;
  --chip-zero: #8a8464;
  --radius: 10px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--felt) 0%, var(--pine) 55%, var(--pine-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* subtle felt grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  z-index: 0;
}

#app { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 0 12px; }

/* ---------- header ---------- */

.masthead {
  text-align: center;
  padding: 20px 0 14px;
  color: var(--cream);
}
.masthead .club {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 4px;
}
.masthead h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.masthead h1 .amp { color: var(--brass-bright); font-style: italic; font-weight: 400; }
.masthead .rule {
  width: 130px; height: 1px; margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass) 70%, transparent);
}
.masthead .sub {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 236, 215, 0.55);
}

/* ---------- cards ---------- */

.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40px),
    var(--cream);
  border-radius: var(--radius);
  border: 1px solid rgba(13, 34, 23, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255,255,255,0.25);
  padding: 16px;
  margin-bottom: 14px;
}

.card h2 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 8px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.card h2 .hint { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11px; color: var(--ink-soft); }

/* ---------- buttons & inputs ---------- */

button {
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--felt-light), var(--felt));
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn:active { transform: translateY(1px); }
.btn.brass {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  color: var(--pine-deep);
}
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.danger { background: linear-gradient(180deg, #c4553f, var(--money-down)); }

.text-input, .num-input, select.sel {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}
.num-input { font-family: var(--font-mono); text-align: center; }
.text-input:focus, .num-input:focus, select.sel:focus {
  outline: 2px solid var(--brass);
  outline-offset: -1px;
}

/* segmented control */
.seg {
  display: flex;
  background: rgba(34, 48, 31, 0.08);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  overflow: hidden;
}
.seg button {
  flex: 1;
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--ink-soft);
  border-right: 1px solid var(--paper-line);
}
.seg button:last-child { border-right: none; }
.seg button.on {
  background: var(--pine);
  color: var(--cream);
}

/* chips (player select, greenies, pairs) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--paper-line);
  background: rgba(255,255,255,0.5);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pchip.on {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--cream);
}
.pchip.brass-on {
  background: linear-gradient(180deg, var(--brass-bright), var(--brass));
  border-color: var(--brass);
  color: var(--pine-deep);
}

/* per-match rows (individual matchups with per-match flags) */
.pair-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.pair-row .pchip { flex: 1; text-align: left; }
.flag-btn {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px dashed var(--paper-line);
  background: rgba(255,255,255,0.4);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.flag-btn.on {
  border-style: solid;
  border-color: var(--brass);
  background: rgba(201,162,39,0.18);
  color: #8a6d10;
}

/* toggle row */
.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.opt-row:last-child { border-bottom: none; }
.opt-row .lbl { font-size: 14px; font-weight: 600; }
.opt-row .lbl small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 11px; margin-top: 1px; }
.opt-row .num-input { width: 76px; }

.toggle {
  width: 52px; height: 30px;
  border-radius: 999px;
  background: rgba(34,48,31,0.18);
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: left 0.18s;
}
.toggle.on { background: var(--money-up); }
.toggle.on::after { left: 25px; }

/* ---------- setup: player rows ---------- */

.player-row {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.player-row .hcp-wrap { position: relative; }
.player-row .hcp-wrap::after {
  content: "HCP";
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  pointer-events: none;
}
.player-row .num-input { padding-right: 26px; }

/* course editor */
.course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px; }
.course-hole {
  display: grid;
  grid-template-columns: 24px 1fr 1fr;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
}
.course-hole .hn { font-family: var(--font-mono); color: var(--ink-soft); font-size: 12px; }
.course-hole select.sel, .course-hole .num-input { padding: 6px 4px; font-size: 14px; }
.disclose {
  width: 100%;
  background: none;
  padding: 4px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--felt);
}

/* ---------- play screen: hole header ---------- */

.hole-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cream);
  margin-bottom: 10px;
}
.hole-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(244,236,215,0.1);
  border: 1px solid rgba(244,236,215,0.25);
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
}
.hole-arrow:active { background: rgba(244,236,215,0.22); }
.hole-arrow[disabled] { opacity: 0.25; }
.hole-title { text-align: center; }
.hole-title .hn {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}
.hole-title .hn sup { font-size: 16px; font-weight: 400; font-style: italic; color: var(--brass-bright); }
.hole-title .meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,236,215,0.65);
  margin-top: 3px;
}

.hole-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
}
.hole-strip::-webkit-scrollbar { display: none; }
.hole-dot {
  min-width: 30px; height: 30px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(244,236,215,0.1);
  color: rgba(244,236,215,0.7);
  border: 1px solid rgba(244,236,215,0.16);
}
.hole-dot.done { background: rgba(201,162,39,0.25); border-color: rgba(201,162,39,0.5); color: var(--brass-bright); }
.hole-dot.cur { background: var(--cream); color: var(--pine-deep); font-weight: 700; border-color: var(--cream); }

/* ---------- score entry ---------- */

.score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.score-row:last-child { border-bottom: none; }
.score-row .who { flex: 1; min-width: 0; }
.score-row .who .nm {
  font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.score-row .who .net { font-size: 11px; color: var(--ink-soft); font-family: var(--font-mono); }
.pips { color: var(--brass); font-size: 10px; letter-spacing: 1px; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 46px; height: 46px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 600;
  background: rgba(34,48,31,0.08);
  border: 1px solid var(--paper-line);
  color: var(--felt);
}
.stepper button:active { background: rgba(34,48,31,0.2); }
.stepper .val {
  width: 46px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
}
.stepper .val.empty { color: var(--paper-line); }
.stepper .val.birdie {
  color: var(--money-up);
}
.stepper .val.circle {
  display: inline-block;
  border: 2px solid var(--money-up);
  border-radius: 50%;
  width: 40px; height: 40px; line-height: 37px;
  margin: 0 3px;
  font-size: 22px;
}
.score-clear {
  background: none;
  color: var(--ink-soft);
  font-size: 15px;
  width: 26px; height: 46px;
}

/* greenie */
.greenie-pot {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.greenie-pot b { color: var(--money-up); font-family: var(--font-mono); }

/* ---------- game cards ---------- */

.sect-head {
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 18px 2px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sect-head .who { color: var(--brass-bright); letter-spacing: 0.05em; text-transform: none; font-size: 12px; }

.game-card { padding: 12px 14px; }
.gc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.gc-head .vs {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}
.gc-head .vs small { font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--ink-soft); margin-right: 4px; }
.gc-total { font-family: var(--font-mono); font-weight: 700; font-size: 17px; }

.gc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px dashed var(--paper-line);
  font-size: 13px;
}
.gc-row .tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  width: 44px;
  flex-shrink: 0;
}
.gc-row .ladder { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.gc-row .gc-dollars { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-left: auto; }

.bet-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px dashed var(--chip-zero);
  color: var(--chip-zero);
  background: rgba(255,255,255,0.4);
  position: relative;
}
.bet-chip.pos { color: var(--money-up); border-color: var(--money-up); background: rgba(46,125,79,0.08); }
.bet-chip.neg { color: var(--money-down); border-color: var(--money-down); background: rgba(179,64,46,0.08); }
.bet-chip sup { font-size: 8px; margin-left: 2px; letter-spacing: 0; }
.slash { color: var(--paper-line); }

.gc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--paper-line);
}
.stake-ctl { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }
.stake-ctl .num-input { width: 64px; padding: 6px 8px; font-size: 15px; }
.parish-btn {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(201,162,39,0.15);
  border: 1.5px solid var(--brass);
  color: #8a6d10;
}
.parish-btn.on { background: var(--brass); color: var(--pine-deep); }
.auto-note { font-size: 10px; color: var(--ink-soft); font-style: italic; }

.extra-line { font-size: 11px; color: var(--ink-soft); padding-top: 5px; }
.extra-line b { font-family: var(--font-mono); }

/* set-all stakes bar */
.stake-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(244,236,215,0.1);
  border: 1px dashed rgba(244,236,215,0.3);
  border-radius: var(--radius);
  padding: 9px 14px;
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.stake-all .num-input { width: 76px; background: rgba(255,255,255,0.92); }

/* indiv compact rows */
.indiv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px dashed var(--paper-line);
  font-size: 13px;
}
.indiv-row:first-child { border-top: none; }
.indiv-row .names { flex: 1; font-weight: 600; min-width: 0; }
.indiv-row .names small { color: var(--ink-soft); font-weight: 400; }
.indiv-row .status { font-family: var(--font-mono); font-size: 12px; }
.indiv-row .gc-dollars { font-family: var(--font-mono); font-weight: 700; }
.indiv-row .num-input { width: 56px; padding: 5px 6px; font-size: 14px; }

.pos { color: var(--money-up); }
.neg { color: var(--money-down); }
.zero { color: var(--chip-zero); }

/* ---------- scorecard table ---------- */

.sc-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table.scorecard { border-collapse: collapse; width: 100%; font-size: 13px; }
.scorecard th {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 5px 4px;
  border-bottom: 2px solid var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 64px;
  text-overflow: ellipsis;
}
.scorecard td {
  text-align: center;
  font-family: var(--font-mono);
  padding: 4px 3px;
  border-bottom: 1px solid var(--paper-line);
}
.scorecard td.hn { font-size: 11px; color: var(--ink-soft); }
.scorecard td .g { display: inline-block; min-width: 24px; line-height: 22px; }
.scorecard td .g.birdie { border: 1.5px solid var(--money-up); border-radius: 50%; width: 24px; height: 24px; line-height: 21px; color: var(--money-up); }
.scorecard td .g.bogey { border: 1.5px solid var(--money-down); width: 24px; height: 24px; line-height: 21px; }
.scorecard tr.sum td { font-weight: 700; border-top: 2px solid var(--ink); background: rgba(34,48,31,0.05); }
.scorecard td .pip { color: var(--brass); font-size: 8px; vertical-align: top; }

/* ---------- money screen ---------- */

.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row .nm { font-weight: 700; font-size: 16px; font-family: var(--font-display); }
.ledger-row .nm small { display:block; font-family: var(--font-body); font-weight: 400; font-size: 10px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; }
.ledger-row .amt { font-family: var(--font-mono); font-size: 22px; font-weight: 700; }

.settle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--paper-line);
}
.settle-row:last-child { border-bottom: none; }
.settle-row .arrow { color: var(--brass); }
.settle-row .amt { margin-left: auto; font-family: var(--font-mono); font-weight: 700; }

.gb-card { font-size: 13px; }
.gb-head { display: flex; justify-content: space-between; font-weight: 700; padding: 8px 0 2px; }
.gb-head .t { font-family: var(--font-display); }
.gb-sub { color: var(--ink-soft); font-size: 11px; padding-bottom: 6px; border-bottom: 1px dashed var(--paper-line); }

/* history */
.hist-row { font-size: 12px; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px dashed var(--paper-line); }
.hist-row b { color: var(--ink); }

/* ---------- bottom nav ---------- */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(13,34,23,0.6), var(--pine-deep) 40%);
  backdrop-filter: blur(8px);
}
.bottom-nav button {
  flex: 1;
  max-width: 130px;
  padding: 9px 4px 7px;
  border-radius: 10px;
  background: transparent;
  color: rgba(244,236,215,0.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bottom-nav button .ic { display: block; font-size: 19px; margin-bottom: 2px; }
.bottom-nav button.on { background: rgba(201,162,39,0.16); color: var(--brass-bright); }

/* misc */
.mt { margin-top: 12px; }
.muted { color: var(--ink-soft); font-size: 12px; }
.center { text-align: center; }
.spacer { height: 8px; }

/* ============================================================
   AUTH PAGES (login / admin) — same clubhouse language
   ============================================================ */

.auth-wrap {
  max-width: 400px;
  margin: 0 auto;
  padding: 8vh 16px 40px;
  position: relative;
  z-index: 1;
}
.auth-card { padding: 24px 20px; }
.auth-card .field { margin-bottom: 12px; }
.auth-card label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.auth-err {
  background: rgba(179,64,46,0.12);
  border: 1px solid var(--money-down);
  color: var(--money-down);
  font-size: 13px;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.auth-ok {
  background: rgba(46,125,79,0.12);
  border: 1px solid var(--money-up);
  color: var(--money-up);
  font-size: 13px;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.user-row:last-child { border-bottom: none; }
.user-row .nm { flex: 1; font-weight: 600; }
.user-row .role-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--pine-deep);
  border-radius: 4px;
  padding: 2px 6px;
}
.user-row .mini {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34,48,31,0.08);
  border: 1px solid var(--paper-line);
  color: var(--felt);
}
.user-row .mini.danger { color: var(--money-down); border-color: rgba(179,64,46,0.4); }

.topbar-link {
  color: rgba(244,236,215,0.7);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(244,236,215,0.3);
  border-radius: 999px;
  padding: 6px 12px;
  background: none;
}
.topbar-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }