/* Banker Golf — sunlight-readable, thumb-sized, iPhone-first. */
:root {
  --paper: #f6f4ec;
  --card: #ffffff;
  --ink: #0f1f17;
  --ink-2: #44544b;
  --line: #d9d5c6;
  --green: #0b4d33;
  --green-2: #0f6a46;
  --green-soft: #e3efe7;
  --gold: #f2c230;
  --gold-soft: #fdf2c8;
  --red: #b42318;
  --red-soft: #fde7e4;
  --orange: #c2410c;
  --orange-soft: #ffeedd;
  --blue: #1d4ed8;
  --radius: 16px;
  --tap: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  font-family: ui-rounded, -apple-system, 'SF Pro Rounded', 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { padding-top: var(--safe-t); padding-bottom: calc(84px + var(--safe-b)); overscroll-behavior-y: contain; }
body.no-tabs { padding-bottom: calc(24px + var(--safe-b)); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.num, table { font-variant-numeric: tabular-nums; }
main { max-width: 720px; margin: 0 auto; padding: 12px 12px 24px; }
.boot { text-align: center; color: var(--ink-2); margin-top: 30vh; }

/* ---------- Banner ---------- */
#banner:empty { display: none; }
#banner { position: sticky; top: 0; z-index: 30; }
.bn { padding: 10px 14px; font-weight: 700; font-size: 15px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.bn-err { background: var(--red); color: #fff; }
.bn-practice { background: var(--orange); color: #fff; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; justify-content: center; }
.bn-fix { background: var(--blue); color: #fff; }
.bn button { background: #fff; color: var(--ink); border: 0; border-radius: 10px; padding: 8px 12px; font-weight: 800; }

/* ---------- Generic ---------- */
h1 { font-size: 30px; margin: 8px 4px 2px; letter-spacing: -.02em; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 22px 4px 8px; }
p { line-height: 1.45; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; }
.btn { min-height: var(--tap); border-radius: 14px; border: 2px solid var(--green); background: var(--card); color: var(--green); font-weight: 800; font-size: 18px; padding: 0 18px; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--green); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.block { width: 100%; }
.btn.slim { min-height: 44px; font-size: 16px; padding: 0 14px; }
.btn[disabled] { opacity: .45; }
.link { background: none; border: 0; color: var(--green); font-weight: 800; padding: 8px 4px; font-size: 16px; }
.tag { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 3px 6px; vertical-align: middle; }
.tag.live { background: var(--green); color: #fff; }
.tag.practice { background: var(--orange); color: #fff; }
.tag.banker { background: var(--gold); color: var(--ink); }
.tag.done { background: var(--ink); color: #fff; }
.tag.warn { background: var(--red-soft); color: var(--red); }
.tag.ok { background: var(--green-soft); color: var(--green); }
.pos { color: var(--green); }
.neg { color: var(--red); }
input[type=text], input[type=number], input[type=search], input[inputmode], select {
  width: 100%; min-height: 52px; border: 2px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; font-size: 18px; font-weight: 600;
}
input:focus, select:focus { outline: 3px solid var(--gold); border-color: var(--green); }
label.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; }
label.check input { width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--green); }
label.check.on { border-color: var(--green); background: var(--green-soft); }

/* ---------- Home ---------- */
.brand { display: flex; align-items: center; gap: 12px; margin: 6px 4px 14px; }
.brand img { width: 48px; height: 48px; border-radius: 12px; }
.brand h1 { margin: 0; }
.storage-note { font-size: 14px; }
.storage-note b { color: var(--ink); }
.round-item { width: 100%; text-align: left; display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.round-item .t { font-weight: 800; font-size: 17px; margin: 6px 0 2px; }
.round-item .s { color: var(--ink-2); font-size: 14px; }
.round-item .nets { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; font-weight: 800; font-size: 15px; }
.newround { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.newround .btn { min-height: 72px; font-size: 18px; }

/* ---------- Setup ---------- */
.seg { display: flex; background: #ebe7da; border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; min-height: 48px; border: 0; border-radius: 11px; background: transparent; font-weight: 800; font-size: 17px; color: var(--ink-2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.seg.mode button.on[data-v=live] { background: var(--green); color: #fff; }
.seg.mode button.on[data-v=practice] { background: var(--orange); color: #fff; }
.namegrid { display: grid; gap: 8px; }
.rot { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rot:last-child { border-bottom: 0; }
.rot .n { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 14px; }
.rot .nm { flex: 1; font-weight: 800; font-size: 18px; }
.rot button { width: 48px; height: 44px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font-size: 20px; font-weight: 900; }
.pargrid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.pargrid .pc { text-align: center; }
.pargrid .pc span { display: block; font-size: 11px; color: var(--ink-2); font-weight: 700; }
.pargrid select { min-height: 42px; padding: 0; text-align: center; text-align-last: center; font-size: 17px; border-width: 1.5px; -webkit-appearance: none; appearance: none; }
.pargrid select.changed { border-color: var(--orange); background: var(--orange-soft); }
.rules ol { margin: 0; padding-left: 22px; }
.rules li { margin: 6px 0; line-height: 1.35; }
.verify { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.verify.unverified { background: var(--red-soft); color: var(--red); font-weight: 700; }
.verify.provided { background: var(--green-soft); color: var(--green); }
.verify.manual { background: var(--orange-soft); color: var(--orange); font-weight: 700; }
.src { font-size: 12px; color: var(--ink-2); word-break: break-word; }

/* ---------- Hole screen ---------- */
.holehead { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; margin: 2px 0 10px; }
.holehead .nav { height: 52px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-size: 26px; font-weight: 900; color: var(--green); }
.holehead .nav[disabled] { opacity: .3; }
.hh-main { text-align: center; }
.hh-hole { font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.hh-sub { font-size: 15px; color: var(--ink-2); font-weight: 700; margin-top: 4px; }
.hh-sub b { color: var(--ink); }
.bankerbar { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--gold); border-radius: 14px; padding: 10px; font-size: 18px; font-weight: 900; margin-bottom: 12px; }
.bankerbar small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; opacity: .75; }

.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 4px 8px; }
.section-title h2 { margin: 0; }
.section-title .ok { color: var(--green); font-weight: 800; font-size: 14px; }

.quick { display: flex; gap: 8px; margin-bottom: 10px; }
.quick .btn { flex: 1; min-height: 46px; font-size: 16px; }
.match { border: 2px solid var(--line); border-radius: 14px; padding: 10px; margin-bottom: 10px; background: #fff; }
.match.done { border-color: var(--green-2); }
.match-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.match-top .who { font-weight: 900; font-size: 19px; }
.match-top .who small { font-weight: 700; color: var(--ink-2); font-size: 13px; }
.stake { font-weight: 900; font-size: 15px; white-space: nowrap; }
.stake.x4 { color: var(--red); }
.stake.x2 { color: var(--orange); }
.chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.chip { min-height: 50px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 900; font-size: 18px; }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.dbl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dbl button { min-height: 50px; border-radius: 12px; border: 2px dashed #b8b29f; background: #fff; font-weight: 900; font-size: 16px; color: var(--ink-2); }
.dbl button.on.no { border: 2px solid var(--ink); background: var(--ink); color: #fff; }
.dbl button.on.yes { border: 2px solid var(--red); background: var(--red); color: #fff; }
.dbl-label { font-size: 12px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin: 2px 2px 6px; }
.dbl-label.unset { color: var(--red); }
.bankdecl { border: 2px solid var(--gold); background: var(--gold-soft); border-radius: 14px; padding: 10px; }
.bankdecl .who { font-weight: 900; font-size: 19px; }
.hint { font-size: 13px; color: var(--ink-2); margin: 4px 2px 8px; line-height: 1.35; }

.scores { display: grid; gap: 6px; }
.scores.n3 { grid-template-columns: repeat(3, 1fr); }
.scores.n4 { grid-template-columns: repeat(4, 1fr); }
.scol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shead { text-align: center; border-radius: 12px; padding: 8px 4px 6px; background: #fff; border: 2px solid var(--line); min-height: 92px; display: flex; flex-direction: column; justify-content: center; }
.shead.banker { border-color: var(--gold); background: var(--gold-soft); }
.shead .nm { font-weight: 900; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shead .val { font-size: 30px; font-weight: 900; line-height: 1.1; }
.shead .val.blank { color: #b8b29f; }
.shead .sub { font-size: 12px; font-weight: 800; color: var(--ink-2); min-height: 15px; }
.sb { min-height: 54px; border-radius: 12px; border: 2px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.sb .r { font-size: 20px; font-weight: 900; }
.sb .g { font-size: 11px; font-weight: 700; color: var(--ink-2); margin-top: 3px; }
.sb.under { background: #eef6f1; }
.sb.par { border-color: #9cc2ad; }
.sb.on { background: var(--green); border-color: var(--green); color: #fff; }
.sb.on .g { color: #d8eadf; }
.sb.other { font-size: 14px; font-weight: 800; color: var(--green); }
.sb.other.on { color: #fff; }
.locked .sb, .locked .chip, .locked .dbl button, .locked .quick .btn { pointer-events: none; opacity: .55; }
.locked .sb.on, .locked .chip.on, .locked .dbl button.on { opacity: 1; }

.waiting { background: #fff; border: 2px dashed var(--line); border-radius: 14px; padding: 12px; margin-top: 14px; font-size: 14px; }
.waiting b { display: block; font-size: 15px; margin-bottom: 4px; }
.waiting ul { margin: 0; padding-left: 18px; color: var(--ink-2); }

.result { background: #fff; border: 3px solid var(--green); border-radius: var(--radius); padding: 12px; margin-top: 14px; }
.result h3 { margin: 0 0 8px; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }
table.res { width: 100%; border-collapse: collapse; font-size: 16px; }
table.res th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); text-align: right; padding: 4px 4px 6px; border-bottom: 1px solid var(--line); }
table.res th:first-child, table.res td:first-child { text-align: left; }
table.res td { padding: 9px 4px; text-align: right; font-weight: 800; border-bottom: 1px solid #efece2; white-space: nowrap; }
table.res tr:last-child td { border-bottom: 0; }
table.res td.net { font-size: 18px; }
.savedline { margin-top: 10px; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.savedline.ok { color: var(--green); }
.savedline.bad { color: var(--red); }

.stickynext { position: fixed; left: 0; right: 0; bottom: calc(72px + var(--safe-b)); padding: 8px 12px; z-index: 15; background: linear-gradient(to top, var(--paper) 70%, rgba(246,244,236,0)); }
.stickynext .btn { max-width: 696px; margin: 0 auto; display: block; width: 100%; min-height: 64px; font-size: 20px; box-shadow: 0 6px 20px rgba(11,77,51,.25); }
.spacer-next { height: 110px; }
.corrbar { display: flex; gap: 8px; margin-bottom: 12px; }
.corrbar .btn { flex: 1; }

/* ---------- Card / history ---------- */
.tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table.card-t { border-collapse: collapse; width: 100%; font-size: 15px; }
table.card-t th, table.card-t td { padding: 8px 6px; text-align: center; border-bottom: 1px solid #efece2; white-space: nowrap; }
table.card-t th { font-size: 11px; text-transform: uppercase; color: var(--ink-2); letter-spacing: .05em; position: sticky; top: 0; background: #fff; }
table.card-t td .m { display: block; font-size: 12px; font-weight: 800; }
table.card-t tr.draft td { background: #fbfaf5; color: var(--ink-2); }
table.card-t tr.tot td { font-weight: 900; background: var(--green-soft); }
table.card-t td.bk { background: var(--gold-soft); }
table.card-t tbody tr { cursor: pointer; }
.audit li { margin: 8px 0; font-size: 14px; line-height: 1.35; }
.audit .when { color: var(--ink-2); font-size: 12px; display: block; }

/* ---------- Totals ---------- */
.totgrid { display: grid; gap: 10px; }
.totgrid.n3 { grid-template-columns: repeat(3, 1fr); }
.totgrid.n4 { grid-template-columns: repeat(2, 1fr); }
.tot { background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 8px; text-align: center; }
.tot .nm { font-weight: 800; font-size: 16px; }
.tot .amt { font-size: 26px; font-weight: 900; margin-top: 4px; }
.owe { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; padding: 12px 0; border-bottom: 1px solid var(--line); }
.owe:last-child { border-bottom: 0; }
.owe .amt { margin-left: auto; font-size: 21px; }
.check-ok { color: var(--green); font-weight: 800; }
.check-bad { color: var(--red); font-weight: 800; }

/* ---------- Tabs ---------- */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: var(--safe-b); }
#tabs button { background: none; border: 0; min-height: 66px; font-weight: 800; font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#tabs button svg { width: 24px; height: 24px; }
#tabs button.on { color: var(--green); }

/* ---------- Sheet / toast ---------- */
#sheet { position: fixed; inset: 0; z-index: 50; background: rgba(15,31,23,.45); display: flex; align-items: flex-end; }
#sheet[hidden] { display: none; }
#tabs[hidden] { display: none; }
.sheet { background: var(--paper); width: 100%; max-width: 720px; margin: 0 auto; border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); max-height: 90vh; overflow-y: auto; }
.sheet h3 { margin: 0 0 6px; font-size: 22px; }
.sheet .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stepper { display: grid; grid-template-columns: 72px 1fr 72px; gap: 10px; align-items: center; margin: 14px 0; }
.stepper button { min-height: 72px; border-radius: 16px; border: 2px solid var(--green); background: #fff; font-size: 34px; font-weight: 900; color: var(--green); }
.stepper input { text-align: center; font-size: 40px; font-weight: 900; min-height: 72px; }
#toast { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); z-index: 60; pointer-events: none; }
#toast .t { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }

@media (max-width: 360px) {
  .shead .val { font-size: 26px; }
  .sb .r { font-size: 18px; }
  .scores.n4 .shead .nm { font-size: 14px; }
}
.tot .amt, .totgrid .amt { white-space: nowrap; }
.totgrid.n3 .tot .amt { font-size: 22px; }
.teesum .row { padding: 4px 0; }

/* ---------- v2.1 home setup ---------- */
.setupcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px 16px; }
.step-h { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; margin: 18px 0 10px; }
.step-h .sn { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; display: grid; place-items: center; flex: none; }
.seg.big3 button, .seg.big2 button { min-height: 56px; font-size: 19px; }
.seg.big3 button.on, .seg.big2 button.on { background: var(--green); color: #fff; }
.seg.mini { padding: 3px; border-radius: 11px; }
.seg.mini button { min-height: 36px; width: 44px; flex: none; font-size: 16px; border-radius: 8px; }
.prow { display: grid; grid-template-columns: 28px 1fr 74px 48px; gap: 8px; align-items: center; margin-bottom: 8px; }
.prow.head { margin-bottom: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.prow.head span:nth-child(3) { text-align: center; }
.prow .n { width: 28px; height: 28px; border-radius: 50%; background: #ebe7da; font-weight: 900; display: grid; place-items: center; font-size: 14px; }
.prow input.hcp { text-align: center; font-size: 20px; font-weight: 800; padding: 0 4px; }
.prow button { height: 52px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-size: 20px; font-weight: 900; color: var(--green); }
.prow button[disabled] { opacity: .25; }
.chips4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.chips5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.chips5 .chip, .chips4 .chip { font-size: 16px; padding: 0 2px; }
.chips.n5 { grid-template-columns: repeat(5, 1fr); }
.chips.n4 { grid-template-columns: repeat(4, 1fr); }
.chips.n2 { grid-template-columns: 1fr 1fr; }
.chips.n3 { grid-template-columns: repeat(3, 1fr); }
.chips.n1 { grid-template-columns: 1fr; }
.chips.n5 .chip { font-size: 16px; padding: 0 2px; }
.rulesum { margin: 0 0 4px; padding-left: 20px; font-size: 15px; }
.rulesum li { margin: 4px 0; }
.startbtn { min-height: 68px; font-size: 21px; margin-top: 16px; }
table.sc { width: 100%; border-collapse: collapse; margin-bottom: 6px; table-layout: fixed; }
table.sc th { font-size: 11px; color: var(--ink-2); font-weight: 800; padding: 2px 0; width: 36px; }
table.sc td { padding: 2px 1px; }
table.sc select { min-height: 36px; font-size: 15px; padding: 0; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; border-width: 1.5px; border-radius: 8px; }
table.sc select.changed { border-color: var(--orange); background: var(--orange-soft); }
.round-item.active { border: 2px solid var(--green); }
.round-item .continue { margin-top: 10px; font-weight: 900; color: var(--green); font-size: 17px; }
.pargrid .pc span + b + span { font-size: 10px; }

/* ---------- v2.1 hole extras ---------- */
.strk { background: #e8efff; color: var(--blue); font-weight: 800; font-size: 14px; border-radius: 8px; padding: 5px 8px; margin: -2px 0 8px; }
.strk.none { background: #f1efe7; color: var(--ink-2); font-weight: 700; }
.dots { color: var(--blue); font-size: 12px; font-weight: 900; min-height: 14px; letter-spacing: 2px; }
.mlines { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 8px; }
.mlines b { color: var(--ink); }
.mlines b.pos { color: var(--green); }
table.sc th:first-child { width: 30px; }
table.sc th:not(:first-child) { width: auto; }
table.sc select { width: 100%; min-width: 0; font-size: 14px; min-height: 34px; padding: 0 1px; }
.setupcard .card { padding: 6px !important; }

/* ---------- v2.2 compact setup: everything to Min bet on one screen ---------- */
.brand { margin: 2px 4px 8px; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand h1 { font-size: 24px; }
.setupcard.compact { padding: 10px 10px 14px; }
.srow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.srow .sl { width: 58px; flex: none; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); line-height: 1.1; }
.seg.tight { flex: 1; padding: 3px; border-radius: 12px; }
.seg.tight button { min-height: 44px; font-size: 16px; border-radius: 9px; }
.seg.tight button.on { background: var(--green); color: #fff; }
.seg.tight.holes { flex: none; width: 104px; }
.tightsel { flex: 1; min-height: 50px; font-size: 16px; padding: 0 8px; }
.tightin { min-height: 46px; margin: -2px 0 8px; }
.plist { border: 2px solid var(--line); border-radius: 14px; padding: 6px 8px 4px; margin: 4px 0 8px; background: #fbfaf6; }
.phead { display: grid; grid-template-columns: 1fr 60px 92px; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 4px; }
.phead .hc { text-align: center; }
.phead .seg.mini { justify-self: end; }
.prow2 { display: grid; grid-template-columns: 34px 1fr 60px 40px; gap: 6px; align-items: center; margin-bottom: 5px; }
.prow2 input { min-height: 46px; font-size: 18px; }
.prow2 input.hcp { text-align: center; font-weight: 900; padding: 0 2px; }
.prow2 .bk { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-weight: 900; font-size: 14px; padding: 0; color: var(--ink-2); }
.prow2.isbank .bk { background: var(--gold); border-color: var(--gold); color: var(--ink); font-size: 16px; }
.prow2.isbank input:not(.hcp) { border-color: var(--gold); background: var(--gold-soft); }
.prow2 .up { height: 46px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font-size: 18px; font-weight: 900; color: var(--green); padding: 0; }
.prow2 .up[disabled] { opacity: .2; }
.phint { font-size: 12px; color: var(--ink-2); margin: 2px 2px 4px; }
.bkdot { display: inline-block; background: var(--gold); border-radius: 50%; width: 18px; height: 18px; text-align: center; line-height: 18px; font-size: 11px; color: var(--ink); }
.betrow { margin-bottom: 6px; }
.chips5.tight { flex: 1; gap: 4px; }
.chips5.tight .chip { min-height: 44px; font-size: 15px; }
.summary-line { background: var(--green-soft); color: var(--green); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
.summary-line b { color: var(--ink); }
@media (max-height: 700px), (max-width: 360px) {
  .brand .muted.small { display: none; }
  .brand h1 { font-size: 21px; }
  .brand img { width: 32px; height: 32px; }
  main > h2:first-of-type { margin-top: 6px; }
  .prow2 input, .prow2 .up { min-height: 42px; height: 42px; }
  .seg.tight button { min-height: 40px; }
  .tightsel { min-height: 46px; }
  .chips5.tight .chip { min-height: 42px; font-size: 14px; }
  .phint { display: none; }
}
.gameline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 14px 2px 0; font-size: 17px; }
.gameline .sl { width: 58px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.tees { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.tee { overflow: hidden; text-overflow: ellipsis; }
.tee { min-height: 50px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font-weight: 900; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 2px; position: relative; }
.tee i { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); display: block; margin-bottom: 2px; border: 1px solid rgba(0,0,0,.15); }
.tee small { font-size: 10px; font-weight: 700; color: var(--ink-2); }
.tee.on { border-color: var(--tc); box-shadow: inset 0 0 0 2px var(--tc); background: #fff; }
table.sc.yd td { font-size: 10px; text-align: center; color: var(--ink-2); padding: 0; }
table.sc.yd { table-layout: auto; }
table.sc tr.ydrow td { font-size: 11px; text-align: center; color: var(--ink-2); font-weight: 700; padding: 3px 0 6px; }
.step-h .sn.warn { background: var(--red); }

/* ---------- v2.4 per-player tees ---------- */
.phead2 { display: grid; grid-template-columns: 1fr 52px 40px; gap: 6px; align-items: end; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin-bottom: 5px; }
.phead2.withtee { grid-template-columns: 1fr 58px 52px 36px; }
.phead2 .pl { display: flex; align-items: center; gap: 8px; }
.phead2 .hc { text-align: center; }
.phead2 .seg.mini button { min-height: 32px; width: 38px; }
.prow2 { grid-template-columns: 34px 1fr 52px 40px; }
.prow2.withtee { grid-template-columns: 34px 1fr 58px 52px 36px; gap: 5px; }
.ptee { height: 46px; border-radius: 10px; border: 2px solid var(--tc); background: #fff; font-weight: 900; font-size: 13px; padding: 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); }
.ptee i { width: 14px; height: 14px; border-radius: 50%; background: var(--tc); display: block; border: 1px solid rgba(0,0,0,.2); }
.sheet .card table.sc th:first-child { width: 38px; }

/* ---------- v2.4 score tiles + wheel ---------- */
.tiles { display: grid; gap: 6px; }
.tiles.n3 { grid-template-columns: repeat(3, 1fr); }
.tiles.n4 { grid-template-columns: repeat(4, 1fr); }
.tiles.n2 { grid-template-columns: repeat(2, 1fr); }
.stile { min-height: 150px; border-radius: 16px; border: 2px solid var(--line); background: #fff; text-align: center; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.stile:active { transform: scale(.98); }
.stile.banker { border-color: var(--gold); background: var(--gold-soft); }
.stile.set { border-color: var(--green); }
.stile.banker.set { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--green); }
.stile .nm { font-weight: 900; font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stile .val { font-size: 44px; font-weight: 900; line-height: 1; margin-top: 4px; }
.stile .val.blank { color: #c9c3b1; }
.stile .sub { font-size: 12px; font-weight: 800; color: var(--ink-2); min-height: 15px; line-height: 1.15; }
.stile.under .sub, .stile.under .val { color: var(--green); }
.stile .rel { font-size: 13px; font-weight: 900; color: var(--ink-2); min-height: 16px; }
.stile .yd { font-size: 11px; font-weight: 800; color: var(--ink-2); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.stile .yd i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.2); }
.stile.off { opacity: .75; }
#wheel[hidden] { display: none; }
#wheel { position: fixed; inset: 0; z-index: 55; touch-action: none; }
.wback { position: absolute; inset: 0; background: rgba(15,31,23,.35); }
.wpanel { position: absolute; background: #fff; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--green); }
.whead { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--green); color: #fff; font-size: 15px; }
.whead span { opacity: .8; font-size: 13px; }
.whead button { margin-left: auto; background: #fff; color: var(--green); border: 0; border-radius: 8px; font-weight: 900; padding: 4px 8px; font-size: 13px; }
.witem { height: 50px; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; border-bottom: 1px solid #efece2; }
.witem b { font-size: 17px; line-height: 1.1; }
.witem span { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.witem.under b { color: var(--green); }
.witem.par { background: #f4f9f6; }
.witem.on { background: var(--green); }
.witem.on b, .witem.on span { color: #fff; }
.witem.other b { font-size: 15px; color: var(--blue); }
.witem.on.other b { color: #fff; }
.bankerbar .lb { display:block; font-size: 11px; opacity: .8; letter-spacing: .04em; } .bankerbar { flex-wrap: wrap; }
.pcards { padding: 6px 10px 10px; }
.pcbtn { width: 100%; display: grid; grid-template-columns: 1fr auto auto 18px; gap: 10px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 4px; font-size: 17px; text-align: left; }
.pcbtn b { font-size: 18px; }
.pcbtn span { font-weight: 800; }
.pcbtn i { font-style: normal; color: var(--green); font-weight: 900; font-size: 22px; }
.sheet .pc { margin-top: 0; }

/* ---------- v2.9 welcome + games ---------- */
.welcome { font-size: 13px; font-weight: 800; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; margin-bottom: -2px; }
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game { min-height: 60px; border-radius: 14px; border: 2px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; }
.game b { font-size: 17px; }
.game small { font-size: 11px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.game.on { background: var(--green); border-color: var(--green); color: #fff; }
.game.on small { color: #d8eadf; }
.game.soon { border-style: dashed; color: #9a9483; background: #faf9f4; }
.gamecard { border: 2px solid var(--green); border-radius: 14px; padding: 10px; margin: 10px 0 8px; background: #fbfdfb; }
.gc-h { display: flex; flex-direction: column; gap: 2px; }
.gc-h b { font-size: 18px; }
.stickynext.two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.stickynext.two .btn { max-width: none; margin: 0; }
.stickynext.two .btn.danger { background: #fff; }
.leavebar { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.leavebar .link { font-size: 15px; }
.link.neg { color: var(--red); }
.chips4b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.chips4b .chip, .chips4.tight .chip { min-height: 44px; font-size: 15px; padding: 0 2px; }
.chips4.tight { flex: 1; grid-template-columns: repeat(4, 1fr); }
.ipwrap { display: grid; gap: 8px; margin-bottom: 8px; }
.ipwrap .round-item { margin-bottom: 0; }
.btn.endgame { background: transparent; border: 1.5px solid var(--neg, #b3261e); color: var(--neg, #b3261e); }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chip.pair { min-height: 44px; font-size: 14px; }
.chip.pair i { font-style: normal; opacity: .6; font-size: 12px; }
.mcards { display: grid; gap: 8px; }
.mcard, .mres { background: var(--card, #fff); border: 1.5px solid var(--line, #ddd6c6); border-radius: 14px; padding: 10px 12px; }
.mres { border: 0; padding: 6px 0; border-bottom: 1px solid var(--line, #ddd6c6); border-radius: 0; }
.mres:last-child { border-bottom: 0; }
.mbet { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 3px 0; }
.mbet span:first-child { color: var(--muted, #6b6b6b); white-space: nowrap; }
.mbet span:last-child { text-align: right; font-weight: 700; }
.mbet.won span:last-child { color: var(--pos, #0b6b3a); }
.strk2 { font-size: 13px; font-weight: 700; color: var(--accent, #0b4d33); }
.pressbtn { margin-top: 8px; }
.tot .split { font-size: 11px; color: var(--muted, #6b6b6b); margin-top: 2px; line-height: 1.3; }
.pbet { margin: 6px 0 8px; }
.pbet .pbn { font-weight: 800; font-size: 14px; margin: 0 2px 4px; }
.pbet .pbn i { font-style: normal; opacity: .6; font-weight: 600; }
.mb { font-size: 13px; font-weight: 800; color: var(--accent, #0b4d33); background: #e3efe7; border-radius: 8px; padding: 1px 6px; margin-left: 4px; }
.pbet { border: 1.5px solid var(--line, #ddd6c6); border-radius: 12px; padding: 8px 8px 4px; background: #fff; margin: 8px 0; }
.pbd { margin: 0 2px 6px; }
.mletter { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; background: var(--accent, #0b4d33); color: #fff; border-radius: 6px; padding: 2px 6px; margin-right: 4px; vertical-align: 2px; }
.mscore { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #e3efe7; }
.mscore b { font-size: 24px; font-weight: 900; color: var(--accent, #0b4d33); letter-spacing: -.01em; }
.mscore span { font-size: 14px; font-weight: 700; color: var(--muted, #4a5a51); white-space: nowrap; }
.mscore.as { background: #f1efe6; }
.mscore.as b { color: #0f1f17; }
.mscore.done { background: #0b4d33; }
.mscore.done b, .mscore.done span { color: #fff; }
.stile .mstk { font-size: 12px; font-weight: 900; color: #fff; background: #1d4ed8; border-radius: 8px; padding: 1px 5px; margin: 2px auto 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strokestrip { background: #eaf0fd; border: 1.5px solid #c5d4f7; border-radius: 12px; padding: 8px 12px; margin: 8px 0 4px; }
.strokestrip .sk-t { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #1d4ed8; margin-bottom: 4px; }
.strokestrip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.strokestrip li { font-size: 15px; }
.strokestrip li b { color: #1d4ed8; }
.strokestrip li.bk b { color: #8a5a00; }
.strokestrip small { font-weight: 600; color: var(--muted, #4a5a51); }
.strokestrip.none { background: transparent; border: 1.5px dashed var(--line, #ddd6c6); color: var(--muted, #4a5a51); font-size: 13px; font-weight: 700; text-align: center; padding: 6px; }
.callseg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.callseg button { min-height: 54px; border-radius: 12px; border: 1.5px solid var(--line, #ddd6c6); background: #fff; font: inherit; font-weight: 900; font-size: 15px; color: #0f1f17; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: 2px; }
.callseg button small { font-size: 12px; font-weight: 700; color: var(--muted, #4a5a51); margin-top: 2px; }
.callseg button.on { background: var(--accent, #0b4d33); border-color: var(--accent, #0b4d33); color: #fff; }
.callseg button.on small { color: #d8eadf; }
.callseg button.nb.on { background: #6b6b6b; border-color: #6b6b6b; }
.callseg button.db.on, .callseg button.rs.on { background: #b42318; border-color: #b42318; }
.mletter.p40 { background: #8a5a00; }
.p40card { display: grid; gap: 6px; }
.p40res { font-size: 15px; padding: 6px 10px; border-radius: 10px; background: #f1efe6; }
.p40res.won { background: #e3efe7; }
.p40res.won b { color: var(--accent, #0b4d33); }
.p40res.tie { background: #fff4d6; }
.p40pots { font-size: 13px; color: var(--muted, #4a5a51); }
.p40board { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.p40board div { text-align: center; background: #fff; border: 1.5px solid var(--line, #ddd6c6); border-radius: 10px; padding: 4px 2px; }
.p40board span { display: block; font-size: 13px; font-weight: 800; }
.p40board b { display: block; font-size: 22px; font-weight: 900; }
.p40board small { display: block; font-size: 12px; font-weight: 800; }
.p40tot table.lb { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.p40tot .lb th, .p40tot .lb td { padding: 6px 4px; text-align: center; border-bottom: 1px solid #efece2; font-size: 15px; }
.p40tot .lb th { font-size: 11px; text-transform: uppercase; color: var(--muted, #4a5a51); }
.p40tot .lb .l { text-align: left; }
.p40tot .lb td.t { font-weight: 900; font-size: 18px; }
.p40tot .lb td.w { background: #e3efe7; font-weight: 900; }
.p40tot .lb td small { display: block; font-size: 11px; color: #1d4ed8; }
.p40tot .lb .r { text-align: right; white-space: nowrap; font-size: 13px; }
.p40det { margin-top: 8px; }
.p40det summary { font-weight: 800; cursor: pointer; padding: 6px 0; }
.p40tot .lb td:last-child { white-space: nowrap; font-size: 14px; font-weight: 800; }
.p40tot .lb th, .p40tot .lb td { padding: 6px 2px; }
.chips5b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; flex: 1; }
.chips5b .chip { min-height: 44px; font-size: 14px; padding: 0 1px; }
.chip.team { display: flex; flex-direction: column; line-height: 1.1; min-height: 52px; }
.chip.team small { font-size: 11px; font-weight: 800; opacity: .85; }
.chip.team.t0 { background: #0b4d33; border-color: #0b4d33; color: #fff; }
.chip.team.t1 { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.mletter.hl { background: #1d4ed8; }
.hlcard { display: grid; gap: 4px; }
.hlpt { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; font-size: 16px; padding: 6px 10px; border-radius: 10px; background: #e3efe7; }
.hlpt > span:first-child { font-weight: 900; }
.hlpt.dead { background: #f1efe6; color: var(--muted, #4a5a51); }
.tm.t0 { color: #0b4d33; }
.tm.t1 { color: #1d4ed8; }
.hcpplus { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px; flex: 1; }
.hcpplus .chip { min-height: 44px; font-size: 15px; }
.hcpplus .chip.plus { font-size: 20px; font-weight: 900; }
.hcpplus .chip.minus { width: 44px; font-size: 20px; font-weight: 900; }
.p40board em { display: block; font-style: normal; font-size: 11px; color: var(--muted, #4a5a51); }
.p40pairs { display: grid; gap: 2px; }
.p40tot .lb td.won { font-size: 13px; color: var(--muted, #4a5a51); white-space: nowrap; }
.p40tot .lb th, .p40tot .lb td { padding: 6px 1px; font-size: 14px; }
.p40tot .lb th { font-size: 10px; letter-spacing: 0; }
.p40tot .lb td.t { font-size: 17px; }
.p40tot .lb td.won { font-size: 12px; }
.hlhole { font-size: 17px; font-weight: 900; padding: 8px 10px; border-radius: 10px; text-align: center; color: #fff; }
.hlhole.t0 { background: #0b4d33; }
.hlhole.t1 { background: #1d4ed8; }
.hlhole.dead { background: #f1efe6; color: var(--muted, #4a5a51); }
/* HiLo teams: same colour, side by side */
.stile.team { border-width: 3px; padding-top: 0; overflow: hidden; }
.stile.team.t0 { border-color: #0b4d33; }
.stile.team.t1 { border-color: #1d4ed8; }
.stile .tmband { margin: 0 -10px 4px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 2px 0; }
.stile.team.t0 .tmband { background: #0b4d33; }
.stile.team.t1 .tmband { background: #1d4ed8; }
.tiles.n4 .stile.team.t0 + .stile.team.t1 { margin-left: 6px; }
th.tmh small { display: block; font-size: 9px; color: #fff; border-radius: 4px; padding: 0 2px; }
th.tmh.t0 { border-bottom: 3px solid #0b4d33; }
th.tmh.t1 { border-bottom: 3px solid #1d4ed8; }
th.tmh.t0 small { background: #0b4d33; }
th.tmh.t1 small { background: #1d4ed8; }
.stile.team { position: relative; padding-top: 22px; }
.stile .tmband { position: absolute; top: 0; left: 0; right: 0; margin: 0; text-align: center; }
.ydrow th.teelbl { font-size: 12px; letter-spacing: -.02em; white-space: nowrap; }
.fixgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0; }
.fixgrid .chip { min-height: 54px; font-size: 18px; font-weight: 900; display: flex; flex-direction: column; line-height: 1.1; }
.fixgrid .chip small { font-size: 10px; font-weight: 700; color: var(--muted, #4a5a51); }
.fixgrid .chip.off { opacity: .4; }
.mletter.ag { background: #7c3aed; }
.pasthead { align-items: center; margin-top: 8px; }
.pasthead h2 { margin-bottom: 4px; }
.swipe { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 8px; }
.swipe .swipe-in { position: relative; z-index: 1; transition: transform .2s ease; background: var(--bg, #f6f4ec); }
.swipe .swipe-in .round-item { margin-bottom: 0; }
.swipe.open .swipe-in { transform: translateX(-104px); }
.swipe .swipe-del { position: absolute; right: 0; top: 0; bottom: 0; width: 104px; border: 0; background: #b42318; color: #fff; font: inherit; font-weight: 900; font-size: 17px; border-radius: 0 16px 16px 0; }
.editbar { display: grid; gap: 4px; background: #fff4d6; border: 1.5px solid #e8c766; border-radius: 14px; padding: 10px 12px; margin: 6px 0 12px; }
.editbar span { font-size: 14px; color: #4a5a51; }
.editbar .btn { justify-self: start; }
.btn.editgames { margin: 8px 0 0; }

/* =====================================================================
   Look & feel 2.21 — depth instead of flat: soft gradients, raised 3D
   buttons that press down, a colour per game, glassy tab bar.
   ===================================================================== */
:root {
  --paper: #f3f1e8;
  --shadow-1: 0 1px 2px rgba(15, 31, 23, .06), 0 6px 18px rgba(15, 31, 23, .08);
  --shadow-2: 0 2px 4px rgba(15, 31, 23, .08), 0 12px 28px rgba(15, 31, 23, .12);
  /* game colours */
  --g-poker: #b7791f; --g-poker-bg: #fff7e6;
  --g-blind: #9a3412; --g-blind-bg: #fff1ea;
  --g-match: #0f766e; --g-match-bg: #e8f7f5;
  --g-p40: #c2410c; --g-p40-bg: #fff3e8;
  --g-hilo: #1d4ed8; --g-hilo-bg: #eaf0ff;
  --g-agg: #7c3aed; --g-agg-bg: #f3edff;
}
body {
  background:
    radial-gradient(1200px 500px at 50% -180px, rgba(15, 106, 70, .18), transparent 70%),
    linear-gradient(#f6f4ec, #eeebe0);
  background-attachment: fixed;
}

/* ---- raised cards ---- */
.card, .setupcard, .result, .mcard, .gamecard, .match, .bankdecl, .round-item, .strokestrip, .p40tot {
  box-shadow: var(--shadow-1);
}
.card, .setupcard { border-color: rgba(15, 31, 23, .08); border-radius: 20px; }
.round-item { border-radius: 18px; }
.round-item.active { box-shadow: var(--shadow-2); }

/* ---- 3D buttons: a solid lip underneath, press = sink ---- */
.btn {
  border: 0;
  background: linear-gradient(#ffffff, #f0eee5);
  color: var(--green);
  box-shadow: 0 4px 0 #c8c2ae, 0 8px 16px rgba(15, 31, 23, .14), inset 0 1px 0 #fff;
  transition: transform .06s ease, box-shadow .06s ease;
}
.btn:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 #c8c2ae, 0 2px 6px rgba(15, 31, 23, .12), inset 0 1px 0 #fff; }
.btn.primary {
  background: linear-gradient(#17905b, #0b5a3b 60%, #094b31);
  color: #fff;
  box-shadow: 0 4px 0 #06331f, 0 10px 20px rgba(11, 77, 51, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.btn.primary:active:not([disabled]) { box-shadow: 0 1px 0 #06331f, 0 3px 8px rgba(11, 77, 51, .3), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.gold {
  background: linear-gradient(#ffe27a, #f2c230 55%, #e3ad12);
  color: #2b2100;
  box-shadow: 0 4px 0 #a97c00, 0 10px 20px rgba(169, 124, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn.gold:active:not([disabled]) { box-shadow: 0 1px 0 #a97c00, 0 3px 8px rgba(169, 124, 0, .25); }
.btn.danger { color: var(--red); box-shadow: 0 4px 0 #e2b3ad, 0 8px 16px rgba(180, 35, 24, .12), inset 0 1px 0 #fff; }
.btn[disabled] { opacity: 1; filter: grayscale(.6); color: rgba(255, 255, 255, .85); background: linear-gradient(#9fb0a6, #8a9b91); box-shadow: 0 3px 0 #6f7f75; text-shadow: none; }
.btn:not(.primary):not(.gold)[disabled] { color: #8a8f8a; background: #ece9df; box-shadow: 0 3px 0 #d3cebd; }

.chip {
  border: 0;
  background: linear-gradient(#ffffff, #f1efe6);
  box-shadow: 0 3px 0 #d0caB6, 0 5px 10px rgba(15, 31, 23, .08), inset 0 1px 0 #fff;
  transition: transform .06s ease, box-shadow .06s ease;
}
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 #d0cab6, 0 2px 4px rgba(15, 31, 23, .08); }
.chip.on {
  background: linear-gradient(#17905b, #0b5a3b);
  color: #fff;
  box-shadow: 0 3px 0 #06331f, 0 6px 12px rgba(11, 77, 51, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.chip.on:active { box-shadow: 0 1px 0 #06331f; }
.seg { background: linear-gradient(#e6e2d4, #ebe7da); box-shadow: inset 0 2px 4px rgba(15, 31, 23, .12); }
.seg button.on { background: linear-gradient(#ffffff, #f4f2ea); box-shadow: 0 2px 0 #cfc9b5, 0 4px 8px rgba(15, 31, 23, .15); }
.seg.big3 button.on, .seg.big2 button.on, .seg.tight button.on { background: linear-gradient(#17905b, #0b5a3b); color: #fff; box-shadow: 0 2px 0 #06331f, 0 4px 10px rgba(11, 77, 51, .3); }
.dbl button, .callseg button { box-shadow: 0 3px 0 #d0cab6, 0 5px 10px rgba(15, 31, 23, .08); transition: transform .06s ease; }
.dbl button:active, .callseg button:active { transform: translateY(2px); }
.callseg button.on { box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .15); }
.holehead .nav { border: 0; background: linear-gradient(#fff, #efece2); box-shadow: 0 4px 0 #cfc9b5, 0 8px 14px rgba(15, 31, 23, .12); }
.holehead .nav:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 #cfc9b5; }
.holehead .nav[disabled] { box-shadow: none; }

/* ---- hole header: number + course ---- */
.hh-hole { text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
.hh-course { font-size: 14px; font-weight: 800; color: var(--green); letter-spacing: .02em; margin: -2px 0 2px; }
.bankerbar { background: linear-gradient(#ffd75a, #f2c230); box-shadow: 0 3px 0 #c99a0a, 0 8px 18px rgba(201, 154, 10, .25); }

/* ---- score tiles: raised, the empty mark is green ---- */
.stile { border: 0; background: linear-gradient(#ffffff, #f5f3ec); box-shadow: 0 4px 0 #d0cab6, 0 10px 20px rgba(15, 31, 23, .10); }
.stile:active { transform: translateY(2px); }
.stile.set { box-shadow: 0 4px 0 #9cc2ad, 0 10px 20px rgba(11, 77, 51, .12); }
.stile.banker { background: linear-gradient(#fff8dc, #fdeeb3); box-shadow: 0 4px 0 #e0c060, 0 10px 20px rgba(201, 154, 10, .18); }
.stile.team.t0 { box-shadow: 0 4px 0 #0b4d33, 0 10px 20px rgba(11, 77, 51, .18); border: 3px solid #0b4d33; }
.stile.team.t1 { box-shadow: 0 4px 0 #1d4ed8, 0 10px 20px rgba(29, 78, 216, .18); border: 3px solid #1d4ed8; }
.stile .val.blank { color: transparent; position: relative; }
.stile .val.blank::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 10px; margin: -5px 0 0 -15px; border-radius: 6px; background: linear-gradient(#2fb87a, #0f6a46); box-shadow: 0 2px 0 #06331f; }

/* ---- tee buttons: the whole button is the tee colour ---- */
.ptee { border: 0; background: var(--tc); color: #fff; font-size: 13px; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 5px 10px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ptee.light { color: #1b2620; text-shadow: none; }
.ptee[data-tee='White'] { background: #ffffff; box-shadow: 0 3px 0 #b9b4a4, 0 5px 10px rgba(0, 0, 0, .1), inset 0 0 0 1.5px #d7d2c3; }
.ptee[data-tee='Silver'] { background: linear-gradient(#e6eaee, #b6bfc7); }
.ptee[data-tee='Gold'] { background: linear-gradient(#f6cf5a, #d99a1e); }
.ptee:active { transform: translateY(2px); }
.ptee i { display: none; }

/* ---- a colour for each game ---- */
.gamecard { border-width: 0; border-left: 6px solid var(--gc, var(--green)); background: var(--gb, #fbfaf6); border-radius: 18px; }
.gamecard.g-poker { --gc: var(--g-poker); --gb: var(--g-poker-bg); }
.gamecard.g-blind { --gc: var(--g-blind); --gb: var(--g-blind-bg); }
.gamecard.g-match { --gc: var(--g-match); --gb: var(--g-match-bg); }
.gamecard.g-p40 { --gc: var(--g-p40); --gb: var(--g-p40-bg); }
.gamecard.g-hilo { --gc: var(--g-hilo); --gb: var(--g-hilo-bg); }
.gamecard.g-agg { --gc: var(--g-agg); --gb: var(--g-agg-bg); }
.gamecard .gc-h b { color: var(--gc); }
.game { border: 0; background: linear-gradient(#fff, #f1efe6); box-shadow: 0 4px 0 #d0cab6, 0 8px 16px rgba(15, 31, 23, .08); border-radius: 16px; transition: transform .06s ease; }
.game:active { transform: translateY(3px); }
.game.g-poker { --gc: var(--g-poker); } .game.g-pokerplus { --gc: var(--g-blind); } .game.g-match { --gc: var(--g-match); }
.game.g-points40 { --gc: var(--g-p40); } .game.g-hilo { --gc: var(--g-hilo); } .game.g-aggregate { --gc: var(--g-agg); }
.game b { color: var(--gc); }
.game.on { background: linear-gradient(color-mix(in srgb, var(--gc) 80%, white), var(--gc)); box-shadow: 0 4px 0 color-mix(in srgb, var(--gc) 60%, black), 0 10px 18px color-mix(in srgb, var(--gc) 35%, transparent); }
.game.on b, .game.on small { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* hole-screen game panels, tinted per game */
.mcards .mcard { background: var(--g-match-bg); border-color: color-mix(in srgb, var(--g-match) 30%, transparent); }
.mcard.hlcard { background: var(--g-hilo-bg); border-color: color-mix(in srgb, var(--g-hilo) 25%, transparent); }
.mcard.hlcard.agcard { background: var(--g-agg-bg); border-color: color-mix(in srgb, var(--g-agg) 25%, transparent); }
.mcard.p40card { background: var(--g-p40-bg); border-color: color-mix(in srgb, var(--g-p40) 25%, transparent); }
.match, .bankdecl { border-radius: 18px; }
.match { background: linear-gradient(#ffffff, var(--g-poker-bg)); }
.section-title h2 { display: flex; align-items: center; gap: 8px; }
.section-title h2::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--green); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }

/* ---- sticky next + glassy tab bar ---- */
.stickynext .btn { min-height: 64px; font-size: 20px; }
#tabs { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 -6px 20px rgba(15, 31, 23, .08); border-top-color: rgba(15, 31, 23, .08); }
.waiting.slim { border: 0; background: transparent; padding: 4px 2px; margin-top: 8px; }
.waiting.slim:empty { display: none; }
.brand img { box-shadow: 0 4px 0 #06331f, 0 10px 20px rgba(11, 77, 51, .3); border-radius: 18px; }
.hcpplus { display: flex; gap: 4px; flex: 1; }
.hcpplus .chip { flex: 1; }
.hcpplus .chip.minus { flex: 0 0 44px; }

/* 2.22 — Golf Pinoy logo, top centre of the welcome page */
.brand.hero { display: flex; justify-content: center; margin: 4px 0 10px; }
.brand.hero img.logo { width: 150px; height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 14px rgba(11, 77, 51, .25)); }
@media (max-height: 700px) { .brand.hero img.logo { width: 120px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 2.24 — Golf Pinoy passes (sales build only) */
.lic { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; margin: 0 0 14px; border: 1px solid var(--line, #d9dfd8); background: linear-gradient(180deg, #ffffff, #f3f7f2); box-shadow: 0 2px 0 rgba(11, 77, 51, .12); }
.lic > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lic b { font-size: 15px; color: #0b4d33; }
.lic span { font-size: 13px; color: #4a5a51; }
.lic-trial { background: linear-gradient(180deg, #fffdf3, #fff4d6); border-color: #ecd58a; }
.lic-soon { background: linear-gradient(180deg, #fffdf3, #fff4d6); border-color: #ecd58a; }
.lic-off { background: linear-gradient(180deg, #fff7f6, #fde6e3); border-color: #efb8b0; }
.lic-off b { color: #9e2a2b; }
.lic-note { background: #fff4d6; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 14px; }
.plan { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px; border-radius: 16px; border: 2px solid #0b4d33; background: linear-gradient(180deg, #fff, #eef6f0); text-align: left; font: inherit; color: inherit; box-shadow: 0 3px 0 #0b4d33; cursor: pointer; }
.plan:active { transform: translateY(2px); box-shadow: 0 1px 0 #0b4d33; }
.plan b { font-size: 17px; color: #0b4d33; }
.plan .pr { font-size: 22px; font-weight: 800; color: #15241b; }
.plan .pr small { font-size: 13px; font-weight: 600; color: #4a5a51; }
.plan span { font-size: 13px; color: #4a5a51; }
.lic-input { width: 100%; font: 700 20px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 1px; text-transform: uppercase; padding: 12px; border-radius: 12px; border: 2px solid #c9d2c8; margin: 6px 0 12px; }
.lbl { display: block; font-weight: 700; font-size: 14px; margin-top: 4px; }
.row.gap { gap: 10px; }
.grow { flex: 1; }

/* 2.24 — course finder */
.findc { margin-top: 8px; }
.cq { flex: 1; font-size: 17px; padding: 10px 12px; border-radius: 12px; border: 2px solid #c9d2c8; min-width: 0; }
.clist { max-height: 52vh; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.crow { text-align: left; background: #fff; border: 1.5px solid #dfe5de; border-radius: 12px; padding: 10px 12px; font: inherit; color: inherit; }
.crow b { display: block; font-size: 16px; }
.crow span { display: block; font-size: 13px; color: #4a5a51; }
.crow.on { border-color: #1f6b3a; background: #eef6ef; }
.chome { display: inline-block !important; font-size: 11px !important; background: #1f6b3a; color: #fff !important; border-radius: 8px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.lic-home { align-items: center; }
.cunv { display: inline-block !important; font-size: 11px !important; background: #f3c94b; color: #4a3800 !important; border-radius: 8px; padding: 1px 6px; margin-left: 4px; vertical-align: middle; }
.unvnote { background: #fff6d8; border: 1.5px solid #f0d27a; border-radius: 12px; padding: 8px 10px; margin: 6px 0 10px; font-size: 13px; color: #4a3800; }
.unvnote .btn { margin-top: 6px; }
.unvok { display: flex; gap: 8px; align-items: center; font-weight: 700; margin: 8px 0 4px; font-size: 14px; }
.unvok input { width: 22px; height: 22px; }
.phint a { color: #1f6b3a; font-weight: 600; }

/* 2.25 — readable on the course (beta feedback): bigger score labels and updates */
.stile { min-height: 170px; }
.stile .sub { font-size: 16px; font-weight: 900; min-height: 19px; color: var(--ink); }
.stile .rel { font-size: 16px; }
.stile .nm { font-size: 18px; }
.stile .yd { font-size: 13px; }
.stile .mstk { font-size: 13px; }
.witem { height: 58px; }
.witem b { font-size: 20px; }
.witem span { font-size: 14px; }
.mbet { font-size: 16px; padding: 5px 0; }
.p40res { font-size: 17px; padding: 8px 12px; }
.p40pots { font-size: 15px; }
.hlpt { font-size: 17px; }
.hlhole { font-size: 16px; }
.strk, .strokestrip { font-size: 15px; }
#toast .t { font-size: 17px; padding: 12px 18px; }
.section-title h2 { font-size: 22px; }
.mcard .small, .card .small { font-size: 14px; }

/* 40 Points: corner winners at a glance */
.cstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.cs { background: #f1efe6; border-radius: 10px; padding: 5px 6px; text-align: center; }
.cs small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.cs b { display: block; font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs em { display: block; font-style: normal; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.cs.won { background: #e3efe7; }
.cs.won b { color: var(--green); }
.cs.tie { background: #fff4d6; }

/* Olympics */
.olyrow { padding: 8px 0; border-bottom: 1px solid #efece2; }
.olyrow:last-of-type { border-bottom: 0; }
.olyrow.over .olyn span { color: var(--neg, #b42318); }
.olyn { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 17px; }
.olyn em { font-style: normal; font-weight: 900; font-size: 18px; }
.olyn em.pos { color: var(--green); }
.olyb { display: grid; gap: 5px; }
.olyb.n4 { grid-template-columns: repeat(4, 1fr); }
.olyb.n5 { grid-template-columns: repeat(5, 1fr); }
.olyb.n6 { grid-template-columns: repeat(6, 1fr); }
.olyb button { height: 54px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 20px; font-weight: 900; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.olyb button small { font-size: 11px; font-weight: 800; color: var(--ink-2); margin-top: 3px; }
.olyb button.on { background: var(--green); border-color: var(--green); color: #fff; }
.olyb button.on small { color: #e6f2ea; }



/* Players sheet */
.pedit { display: grid; grid-template-columns: 1fr 74px 92px; gap: 8px; align-items: end; margin: 10px 0; }
.pedit input, .pedit select { font-size: 17px; padding: 10px; border-radius: 10px; border: 2px solid var(--line); width: 100%; box-sizing: border-box; background: #fff; }
.pedit .ptee { width: 100%; height: 46px; border-radius: 10px; }
.pe-h small { display: block; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.editplayers { margin-top: 8px; }

/* ==========================================================================
   2.25 — "Clubhouse" look (chosen by Jessie 2026-11-11): deep green header,
   cream background, soft white cards, gold banker bar.
   ========================================================================== */
:root { --paper: #f3efe3; --green: #0d4a32; --green-2: #146b47; --gold: #e3b23c; --line: #e2dccb; --radius: 18px; }
body { background: var(--paper); }
/* Hole header: a full-width green band */
.holehead { background: var(--green); color: #fff; margin: -12px -12px 14px; padding: 14px 12px 18px; border-radius: 0 0 26px 26px; box-shadow: 0 8px 22px rgba(13,74,50,.22); }
.holehead .hh-hole { color: #fff; font-size: 44px; text-shadow: none; }
.holehead .hh-course { color: #cfe6d8 !important; font-size: 16px; letter-spacing: .02em; }
.holehead .hh-sub, .holehead .hh-sub b { color: #fff !important; }
.holehead .nav { background: rgba(255,255,255,.12) !important; border: 1.5px solid rgba(255,255,255,.35) !important; color: #fff !important; box-shadow: none !important; }
.holehead .nav[disabled] { opacity: .35; }
.bankerbar { background: var(--gold) !important; box-shadow: 0 4px 0 #b88a1f !important; border-radius: 16px !important; }
/* Cards */
.card, .mcard, .mres, .gamecard { background: #fff; border: 0 !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(13,74,50,.08), 0 6px 18px rgba(13,74,50,.07) !important; }
.gamecard { border-left: 5px solid var(--green) !important; }
.gamecard.g-oly { border-left-color: #7c3aed !important; }
.section-title h2 { font-size: 15px !important; letter-spacing: .12em; text-transform: uppercase; color: #6b7a70 !important; }
/* Buttons and chips: flat, rounded */
.chip, .btn, .stile { box-shadow: none !important; background-image: none !important; }
.btn { background: #fff; border: 1.5px solid var(--line); color: var(--green); border-radius: 16px; }
.btn.slim { box-shadow: 0 1px 2px rgba(13,74,50,.08) !important; }
.chip { border: 1.5px solid var(--line) !important; background: #faf8f1 !important; border-radius: 14px !important; }
.chip.on { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.chip.team.t1.on, .chip.team.t1 { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.chip.team.t0 { background: var(--green) !important; color: #fff !important; }
/* The game picker (.game buttons) keeps its earlier look — Jessie 2026-11-11. */
/* Score boxes */
.stile { border: 0 !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 20px rgba(13,74,50,.08) !important; border-radius: 20px !important; }
.stile.set { box-shadow: inset 0 0 0 3px var(--green), 0 8px 20px rgba(13,74,50,.1) !important; }
.stile.banker { background: #fff8e6 !important; }
.stile.banker.set { box-shadow: inset 0 0 0 3px var(--gold), 0 8px 20px rgba(13,74,50,.1) !important; }
.stile .val { color: var(--green); }
.btn.primary, .stickynext .btn { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; border-radius: 18px !important; }
.stickynext { background: linear-gradient(to top, var(--paper) 70%, rgba(243,239,227,0)); }
.btn.primary[disabled], .stickynext .btn[disabled] { background: #9aa79f !important; border-color: #9aa79f !important; }
/* Tab bar */
#tabs { background: #fff; border-top: 0; box-shadow: 0 -6px 20px rgba(0,0,0,.06); }
#tabs button.on { color: var(--green); }
#tabs button.on svg { background: #e3efe7; border-radius: 12px; padding: 3px; width: 36px; height: 30px; }
.tot { border: 0 !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(13,74,50,.08), 0 6px 18px rgba(13,74,50,.07) !important; }
/* Olympics colour in the game picker and its cards (rose) */
:root { --g-oly: #be185d; --g-oly-bg: #fff1f6; }
.game.g-olympics { --gc: var(--g-oly); }
.gamecard.g-oly { --gc: var(--g-oly); --gb: var(--g-oly-bg); }
.gamecard.g-oly .gc-h b { color: var(--g-oly) !important; }
.mcard.olycard { background: var(--g-oly-bg); }
.gamecard { border-left-color: var(--gc, var(--green)) !important; }
.gamecard.g-oly { border-left-color: var(--g-oly) !important; }
/* Olympics button under each score box */
.tcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcol .stile { flex: 1; }
.olytile { min-height: 44px; border-radius: 12px; border: 1.5px dashed var(--g-oly); background: #fff; color: var(--g-oly); font-weight: 900; font-size: 15px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olytile.set { border-style: solid; background: var(--g-oly); color: #fff; }
.olytile.none { border: 0; background: none; min-height: 44px; }
.olyb.pick { margin: 8px 0 4px; }
.olyb.pick button { height: 64px; font-size: 24px; }
.olyb.pick button.on { background: var(--g-oly); border-color: var(--g-oly); color: #fff; }
.olyb.pick button[disabled] { opacity: .35; }
.olytile { min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; gap: 2px; }
.olytile b { font-size: 20px; font-weight: 900; }
.olytile small { font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.olytile.none { min-height: 50px; }
/* System 36 (slate) */
:root { --g-s36: #334155; --g-s36-bg: #f1f5f9; }
.game.g-system36 { --gc: var(--g-s36); }
.gamecard.g-s36 { --gc: var(--g-s36); --gb: var(--g-s36-bg); border-left-color: var(--g-s36) !important; }
.gamecard.g-s36 .gc-h b { color: var(--g-s36) !important; }
.mcard.s36card { background: var(--g-s36-bg); }
table.lb tr.win td { background: #fff7dc; }
/* System 6 (olive) */
:root { --g-s6: #4d7c0f; --g-s6-bg: #f3f9e8; }
.game.g-system6 { --gc: var(--g-s6); }
.gamecard.g-s6 { --gc: var(--g-s6); --gb: var(--g-s6-bg); border-left-color: var(--g-s6) !important; }
.gamecard.g-s6 .gc-h b { color: var(--g-s6) !important; }
.mcard.s6card { background: var(--g-s6-bg); }
/* Skins (sky) */
:root { --g-skins: #0369a1; --g-skins-bg: #eef7fd; }
.game.g-skins { --gc: var(--g-skins); }
.gamecard.g-skins { --gc: var(--g-skins); --gb: var(--g-skins-bg); border-left-color: var(--g-skins) !important; }
.gamecard.g-skins .gc-h b { color: var(--g-skins) !important; }
.mcard.skcard { background: var(--g-skins-bg); }
.srow.sw .sl { width: 84px; }

/* ---- 2.25-dev.6 group play: golf groups, International, leaderboards ---- */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.grpcard { display: block; width: 100%; text-align: left; border-left: 6px solid var(--g-s36, #475569); }
.grpcard.go { cursor: pointer; font: inherit; color: inherit; }
.grpcard .gc-h { display: flex; flex-direction: column; gap: 2px; }
.grpcard .gc-h b { font-size: 18px; }
.grph { margin: 6px 0 10px; font-size: 26px; }
.grptabs, .grpseg { display: flex; margin: 0 0 12px; }
.grptabs button, .grpseg button { flex: 1; }
.periodnav { align-items: center; margin: 4px 0 8px; }
.periodnav b { font-size: 18px; }
.lbt { width: 100%; border-collapse: collapse; font-size: 16px; margin: 6px 0 10px; background: var(--card); border-radius: 10px; overflow: hidden; }
.lbt th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5b6b62); padding: 8px 6px; text-align: center; border-bottom: 2px solid var(--line); }
.lbt td { padding: 9px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.lbt .l { text-align: left; }
.lbt tr.top td { background: rgba(71, 85, 105, .08); font-weight: 700; }
.lbt td.pos { color: var(--pos, #15803d); }
h3.sub { font-size: 15px; margin: 14px 0 6px; }
.mrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.joincode { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: .12em; }
.intlpick .chips4 { margin-top: 4px; }
.card.warn { border-color: #f59e0b; background: #fffbeb; }
.ixrows { margin: 6px 0; }
.ixh, .ixrow { display: grid; grid-template-columns: 1fr 96px 96px; gap: 8px; align-items: center; }
.ixh { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5b6b62); font-weight: 800; }
.ixrow { padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.ixrow small { display: block; font-weight: 500; font-size: 12px; color: var(--muted, #5b6b62); }
.ixrow input { font-size: 17px; padding: 8px; border-radius: 10px; border: 2px solid var(--line); width: 100%; box-sizing: border-box; background: #fff; }
.ixrow > span:last-child { text-align: center; font-size: 18px; }
.fbtwins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.fbtw { background: rgba(71, 85, 105, .08); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.fbtw b { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.fbtw span { font-size: 17px; font-weight: 800; }
.fbtw small { font-size: 12px; color: var(--muted, #5b6b62); }

/* 2.25-dev.9: tap the par on the hole screen to fix it */
.parbtn { font: inherit; font-weight: 800; color: inherit; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); border-radius: 8px; padding: 1px 8px; cursor: pointer; }

/* setup: type-to-search course list */
.cfind { margin: -2px 0 10px; }
.cfind input { width: 100%; box-sizing: border-box; font-size: 17px; }
.chits { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.chit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font: inherit; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.chit b { font-size: 16px; }
.chit small { font-size: 13px; color: var(--muted, #5b6b62); }

/* Poker: bets placed -> scores on top */
.betsplaced { margin: 8px 2px 4px; text-align: center; }

/* Poker standings at the top of each hole (dev.9) */
.sofar{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:6px 0 8px;padding:8px 10px;border-radius:10px;background:var(--card,#fff);border:1px solid rgba(0,0,0,.08);font-size:14px}
.sofar .sf-l{width:100%;font-size:12px;color:#667;text-transform:uppercase;letter-spacing:.04em}
.sofar .sf b{font-variant-numeric:tabular-nums}
.sofar .sf.up b{color:#1a7f37}
.sofar .sf.down b{color:#c62828}

/* Hole layouts (dev.10) */
button.hh-map{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hh-map .maptag{font-size:12px;font-weight:800;letter-spacing:0;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px 8px;vertical-align:middle}
.holemap{display:block;width:100%;max-height:62vh;object-fit:contain;border-radius:10px;background:#f4f2ea;margin:6px 0}
.nomap{padding:12px;border:1px dashed rgba(0,0,0,.18);border-radius:10px;margin:8px 0 10px}
.maplbl{display:flex!important;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:48px;cursor:pointer}
.maplink{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:10px;box-sizing:border-box;width:100%}