/* ── Clubhouse ───────────────────────────────────────────────────────────
   Dark pine green, cream card-stock, muted gold. Classic scorecard energy. */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-normal.woff2') format('woff2');
}

:root {
  --pine-950: #0b1f15;
  --pine-900: #0f2a1d;
  --pine-700: #1e4d33;
  --pine-600: #2a6144;
  --pine-100: #dbe5d8;
  --cream: #f4eeDE;
  --cream-2: #efe7d2;
  --card: #fbf7ec;
  --ink: #22302a;
  --ink-soft: #5c6a5f;
  --gold: #a8842c;
  --gold-bright: #c9a648;
  --gold-pale: #f0e6c8;
  --clay: #a4452e;
  --clay-soft: #c4795f;
  --line: #d9cfb4;
  --line-strong: #b9ac8a;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(28, 38, 30, .08), 0 4px 14px rgba(28, 38, 30, .07);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', 'Avenir Next', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--pine-900); margin: 0 0 .2rem; }
h1 { font-size: 1.7rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
a { color: var(--pine-700); text-decoration-color: var(--gold-bright); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
code { background: var(--cream-2); padding: .1em .35em; border-radius: 3px; font-size: .9em; }

.muted { color: var(--ink-soft); margin: 0; }
.small { font-size: .85rem; }
.strong { font-weight: 700; }
.hidden { display: none !important; }
.hint { font-weight: 400; font-size: .8rem; color: var(--ink-soft); }

/* ── Top bar ── */
.topbar {
  background: linear-gradient(180deg, var(--pine-900), var(--pine-950));
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 1px 0 rgba(201, 166, 72, .35) inset, 0 -6px 0 rgba(0,0,0,.12) inset;
}
.topbar-inner {
  max-width: 1100px; margin: 0 auto; padding: .6rem 1.2rem;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.crest { width: 30px; height: 30px; color: var(--gold-bright); }
.wordmark {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 1.35rem; color: var(--cream); letter-spacing: .02em;
}
.mainnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.mainnav a {
  color: var(--pine-100); text-decoration: none; font-size: .95rem;
  padding: .35rem .7rem; border-radius: 4px; letter-spacing: .02em;
}
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.mainnav a.active {
  color: var(--gold-bright);
  box-shadow: 0 2px 0 var(--gold-bright);
  border-radius: 4px 4px 0 0;
}
.usernav { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.usernav a { color: var(--cream); text-decoration: none; }
.usernav a:hover, .usernav a.active { color: var(--gold-bright); }
.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--pine-100); text-decoration: underline;
  text-decoration-color: rgba(201, 166, 72, .5); text-underline-offset: 3px;
}
.page .linklike, .card .linklike { color: var(--pine-700); }
.linklike:hover { color: var(--gold); }

/* ── Page scaffolding ── */
.page { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.back-link {
  display: inline-block; margin-bottom: .6rem;
  font-size: .85rem; letter-spacing: .02em;
  color: var(--ink-soft); text-decoration: none;
}
.back-link:hover { color: var(--gold); }
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.section { margin: 1.8rem 0; }
.section-title {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--pine-700); margin-bottom: .7rem;
}
.section-title::after { content: ''; flex: 1; border-top: 1px solid var(--line-strong); }
.section-gold { color: var(--gold); }
.section-gold::after { border-color: var(--gold-bright); }
.title-meta { font-family: var(--sans); font-size: .85rem; font-weight: 400; color: var(--ink-soft); letter-spacing: .02em; text-transform: none; }
.title-action { font-family: var(--sans); font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

.footer {
  max-width: 1100px; margin: 0 auto; padding: 1rem 1.2rem 2rem;
  color: var(--ink-soft); font-size: .8rem; font-style: italic;
  font-family: var(--serif); text-align: center;
}
.footer-rule { color: var(--gold); margin: 0 .5rem; }

/* ── Cards ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  position: relative;
}
.card-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft); margin-bottom: .25rem;
}
.card-foot { font-size: .8rem; color: var(--ink-soft); margin-top: .45rem; }
.empty-card { text-align: center; padding: 2.5rem 1.5rem; }
.empty-card p { max-width: 46ch; margin: .6rem auto 1.2rem; color: var(--ink-soft); }
.notes-card p { margin: .2rem 0 0; white-space: pre-wrap; }

/* ── Flash messages ── */
.flashes { max-width: 1100px; margin: .8rem auto 0; padding: 0 1.2rem; }
.flash {
  padding: .55rem .9rem; border-radius: var(--radius); margin-bottom: .5rem;
  font-size: .92rem; border: 1px solid;
}
.flash-ok { background: #e9efdd; border-color: #b5c79a; color: #3c5024; }
.flash-error { background: #f4e3dc; border-color: #d3a18e; color: #7c3014; }

/* ── Buttons & forms ── */
.btn {
  display: inline-block; padding: .5rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--pine-700); background: var(--card); color: var(--pine-700);
  font: inherit; font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  cursor: pointer; text-decoration: none; transition: all .12s ease;
}
.btn:hover { background: var(--pine-100); color: var(--pine-900); }
.btn-primary {
  background: var(--pine-700); color: var(--cream);
  border-color: var(--pine-900);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 6px rgba(15, 42, 29, .25);
}
.btn-primary:hover { background: var(--pine-600); color: #fff; }
.btn-danger { border-color: var(--clay); color: var(--clay); }
.btn-danger:hover { background: #f4e3dc; color: var(--clay); }
.btn-block { width: 100%; }
.btn-big { padding: .7rem 1.6rem; font-size: 1rem; }
.btn-small { padding: .25rem .7rem; font-size: .8rem; }
.btn-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }

label { display: block; font-size: .85rem; font-weight: 700; color: var(--pine-900); }
input, select, textarea {
  display: block; width: 100%; min-width: 0; margin-top: .25rem; padding: .5rem .6rem;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 4px;
}
input:focus, select:focus, textarea:focus, .seg:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 1px;
}
.stack > label { margin-bottom: .9rem; }
.field-row { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-end; }
.field-row label { flex: 1 1 120px; min-width: 0; }
.field-row .grow { flex: 2 1 200px; }
.field-row .btn { margin-bottom: 2px; }
.form-card { max-width: 860px; }
fieldset { border: none; margin: 0 0 1.2rem; padding: 0; }
legend {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold); padding: 0; margin-bottom: .5rem;
}

/* ── Tables ── */
.table-card { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { white-space: nowrap; }
.table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--cream); background: var(--pine-700); padding: .5rem .8rem;
  border-bottom: 2px solid var(--gold);
}
.table td { padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:nth-child(even) { background: rgba(217, 207, 180, .16); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.num { text-align: right; }
.row-dim { opacity: .55; }
.dim { color: var(--ink-soft); }

/* scorecard variant */
.scorecard-scroll { overflow-x: auto; }
.scorecard td, .scorecard th { padding: .4rem .45rem; text-align: center; }
.scorecard td:first-child, .scorecard th:first-child {
  text-align: left; font-weight: 700; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft); background: var(--card);
}
.scorecard .sep { border-left: 2px solid var(--line-strong); font-weight: 700; }
.score-row td { font-weight: 700; font-size: 1rem; }

/* classic scorecard notation: circles for birdies, squares for bogeys */
.score-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.7em; line-height: 1; padding: .1em;
}
.mk-birdie { border: 1.5px solid var(--pine-700); border-radius: 50%; }
.mk-eagle { border: 1.5px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px var(--gold); }
.mk-bogey { border: 1.5px solid var(--clay-soft); }
.mk-double { border: 1.5px solid var(--clay); box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px var(--clay-soft); }
.legend .score-mark { font-size: .85em; }

/* ── Dashboard ── */
.dash-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 1rem; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
.hcp-card { text-align: center; border-top: 3px solid var(--gold); }
.hcp-number {
  font-family: var(--serif); font-weight: 700; font-size: 4.2rem; line-height: 1.05;
  color: var(--pine-900); letter-spacing: -.02em;
}
.spark-card { display: flex; flex-direction: column; }
.spark { width: 100%; height: 120px; color: var(--pine-700); margin-top: auto; }
.spark circle { fill: var(--gold); }

.tile-row { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0 .4rem; }
.tile {
  flex: 1 1 110px; min-width: 110px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .7rem .9rem; text-align: center;
}
.tile-num { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: var(--pine-900); font-variant-numeric: tabular-nums; }
.tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.tile-label span { text-transform: none; letter-spacing: 0; }
.tile-gold { border-top: 3px solid var(--gold); }

.round-headline { display: flex; align-items: baseline; gap: .6rem; }
.round-score { font-family: var(--serif); font-weight: 700; font-size: 3rem; color: var(--pine-900); }
.round-topar { font-family: var(--serif); font-size: 1.3rem; color: var(--gold); }

/* ── Stats page ── */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .3rem .85rem; border: 1px solid var(--line-strong); border-radius: 99px;
  font-size: .85rem; text-decoration: none; color: var(--ink-soft); background: var(--card);
}
.chip:hover { border-color: var(--pine-700); color: var(--pine-700); }
.chip-active { background: var(--pine-700); border-color: var(--pine-700); color: var(--cream); }
.chip-active:hover { color: var(--cream); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.stat-card { padding: .9rem 1rem .8rem; }
.stat-value {
  font-family: var(--serif); font-weight: 600; font-size: 2rem; line-height: 1.15;
  color: var(--pine-900); font-variant-numeric: tabular-nums;
}
.stat-pinned { border-color: var(--gold-bright); border-top: 3px solid var(--gold); background: linear-gradient(180deg, #fdfaf0, var(--card)); }
.pin-form { position: absolute; top: .5rem; right: .5rem; }
.pin-btn {
  background: none; border: none; cursor: pointer; padding: .25rem; border-radius: 4px;
  color: var(--line-strong); transition: color .12s ease;
}
.pin-btn svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.pin-btn:hover { color: var(--gold); }
.pin-btn.pinned { color: var(--gold); }

.bars { margin-top: .5rem; display: grid; gap: .25rem; }
.bar-row { display: grid; grid-template-columns: 52px 1fr 40px; gap: .5rem; align-items: center; font-size: .78rem; }
.bar-label { color: var(--ink-soft); }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bar-track { height: 8px; background: var(--cream-2); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--pine-600); }
.bar-eagle { background: var(--gold); }
.bar-birdie { background: var(--gold-bright); }
.bar-par { background: var(--pine-600); }
.bar-bogey { background: var(--clay-soft); }
.bar-double { background: var(--clay); }
.bar-left, .bar-short { background: var(--pine-600); }
.bar-right, .bar-long { background: var(--clay-soft); }

/* ── Courses ── */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.course-card { display: block; text-decoration: none; color: var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.course-card:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(28,38,30,.1), 0 8px 22px rgba(28,38,30,.12); color: var(--ink); }
.course-name { margin-bottom: .1rem; }
.stars-line { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.star { color: var(--line-strong); }
.star.on { color: var(--gold); }
.stars-big { font-size: 1.4rem; letter-spacing: .1em; }
.tee-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.tee-chip {
  font-size: .75rem; padding: .15rem .55rem; border-radius: 99px;
  background: var(--pine-100); color: var(--pine-900); border: 1px solid #c2d0bd;
}
.rate-card { border-top: 3px solid var(--gold); margin-bottom: 1.4rem; }
.rate-flex { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.star-buttons { display: flex; gap: .15rem; }
.star-btn {
  background: none; border: none; font-size: 1.7rem; line-height: 1; cursor: pointer;
  color: var(--line-strong); padding: .1rem; transition: color .1s ease, transform .1s ease;
}
.star-btn.on { color: var(--gold); }
.star-btn:hover { transform: scale(1.15); color: var(--gold-bright); }
.star-btn:hover ~ .star-btn { color: var(--line-strong); }

/* course form hole grid */
.hole-grid-head, .hole-grid-row, .hole-grid-foot {
  display: grid; grid-template-columns: 44px 150px 90px 70px; gap: .6rem; align-items: center;
}
.hole-grid-head, .hole-grid-foot {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); padding: .3rem 0;
}
.hole-grid-foot { border-top: 2px solid var(--line-strong); margin-top: .4rem; font-size: .85rem; }
.hole-grid-row { padding: .18rem 0; }
.hole-grid-row.nine-break { border-top: 1px dashed var(--line-strong); margin-top: .35rem; padding-top: .5rem; }
.hole-n { font-family: var(--serif); font-weight: 600; text-align: center; color: var(--pine-700); }
.hole-grid-row input { margin-top: 0; }

/* segmented controls */
.par-seg, .seg-row { display: flex; gap: .3rem; flex-wrap: wrap; }
.seg {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  padding: .42rem .8rem; border-radius: 4px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink-soft); transition: all .1s ease;
}
.seg:hover { border-color: var(--pine-600); color: var(--pine-700); }
.seg-on, .seg.seg-on {
  background: var(--pine-700); border-color: var(--pine-900); color: var(--cream);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
}

/* ── Round entry ── */
.entry-title { margin-bottom: 1rem; }
.entry-setup { max-width: 760px; margin: 0 auto; }
.hole-progress { display: flex; gap: .3rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.hole-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: var(--card); color: var(--ink-soft); font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.hole-dot.done { background: var(--pine-100); border-color: var(--pine-600); color: var(--pine-900); }
.hole-dot.now { background: var(--pine-700); border-color: var(--pine-900); color: var(--cream); transform: scale(1.15); }
.hole-card { max-width: 640px; margin: 0 auto; padding: 1.2rem 1.4rem; }
.hole-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .7rem; margin-bottom: 1rem; }
.hole-title { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--pine-900); }
.hole-meta { color: var(--ink-soft); font-size: .9rem; }
.hole-adjust { display: flex; gap: .8rem; margin-top: .5rem; }
.hole-adjust label { font-size: .75rem; }
.hole-adjust input, .hole-adjust select { width: 90px; padding: .3rem .45rem; }
.running {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold);
  white-space: nowrap; padding-top: .3rem;
}
.ctl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
@media (max-width: 540px) { .ctl-grid { grid-template-columns: 1fr; } }
.ctl-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); margin-bottom: .35rem;
}
.auto-badge {
  display: inline-block; margin-left: .35rem; padding: .05rem .45rem;
  border: 1px solid var(--gold-bright); border-radius: 99px;
  font-size: .62rem; letter-spacing: .1em; color: var(--gold); background: var(--gold-pale);
  vertical-align: middle;
}
.ctl-hint { font-size: .72rem; color: var(--ink-soft); margin-top: .35rem; font-style: italic; }
.stepper { display: flex; align-items: center; gap: .7rem; }
.step-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--pine-700);
  background: var(--card); color: var(--pine-700); font-size: 1.4rem; line-height: 1;
  cursor: pointer; font-weight: 700; transition: all .1s ease;
}
.step-btn:hover { background: var(--pine-100); }
.step-btn:active { transform: scale(.93); }
.step-num {
  font-family: var(--serif); font-weight: 700; font-size: 2.1rem; min-width: 2ch;
  text-align: center; color: var(--pine-900); font-variant-numeric: tabular-nums;
}
.ctl-score .step-num { font-size: 2.6rem; }
.quick-row { display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap; }
.quick {
  font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 99px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-soft); cursor: pointer;
}
.quick:hover { border-color: var(--gold); color: var(--gold); }
.check-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-top: .55rem; font-weight: 400; }
.check-row input { width: auto; margin: 0; accent-color: var(--pine-700); }
.hole-nav { display: flex; justify-content: space-between; margin-top: 1.4rem; gap: .8rem; }
.hole-nav .btn { min-width: 120px; }
.entry-error {
  margin-top: 1rem; padding: .5rem .8rem; border-radius: 4px; font-size: .9rem;
  background: #f4e3dc; border: 1px solid #d3a18e; color: #7c3014;
}
.entry-review { max-width: 860px; margin: 0 auto; }
.entry-review .form-card { margin-top: 1rem; max-width: none; }
#review-tables .table-card { margin-bottom: 1rem; }
#review-tables .hole-link { cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold-bright); }

/* ── Admin ── */
.actions-cell { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.inline-details summary { cursor: pointer; color: var(--pine-700); text-decoration: underline; text-decoration-color: rgba(201,166,72,.5); }
.inline-form { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; }
.inline-form input { width: 150px; margin: 0; padding: .3rem .5rem; font-size: .85rem; }

/* ── Gate (login / setup) ── */
.gate {
  background: var(--pine-950);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(42, 97, 68, .55), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  min-height: 100vh; margin: 0;
}
.gate-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.gate-card {
  width: 100%; max-width: 400px; background: var(--card);
  border: 1px solid var(--gold); border-radius: var(--radius);
  box-shadow: 0 0 0 5px rgba(201, 166, 72, .12), 0 18px 50px rgba(0, 0, 0, .5);
  padding: 2.2rem 2rem 1.6rem; text-align: center;
}
.gate-crest { width: 52px; height: 52px; color: var(--gold); margin-bottom: .4rem; }
.gate-title { font-style: italic; font-size: 2rem; margin-bottom: .1rem; }
.gate-sub {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--gold); margin: 0 0 1.5rem;
}
.gate-card form { text-align: left; }
.gate-card .flash { text-align: left; }
.gate-foot { font-size: .8rem; color: var(--ink-soft); margin-top: 1.4rem; font-style: italic; }

@media (max-width: 640px) {
  .page { padding: 1.2rem .8rem 2.5rem; }
  .topbar-inner { padding: .55rem .8rem; gap: .6rem 1rem; }
  .usernav { gap: .6rem; }
  h1 { font-size: 1.45rem; }
  .hcp-number { font-size: 3.4rem; }
  .hole-grid-head, .hole-grid-row, .hole-grid-foot { grid-template-columns: 34px 136px 1fr 56px; gap: .4rem; }
}