:root {
  --emerald: #0A5C36;
  --emerald-deep: #063D24;
  --emerald-soft: #E7F0EA;
  --gold: #D4AF37;
  --gold-deep: #A8862A;
  --gold-soft: #F7EFD5;
  --ink: #23282C;
  --ink-2: #4A5258;
  --ink-3: #7A8389;
  --line: #E6E2D6;
  --bg: #F5F2EA;
  --card: #FFFFFF;
  --good: #1F8A4C;
  --warn: #C9922B;
  --bad: #B23B2E;
  --sixers: #1D428A;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(20, 30, 25, .05), 0 8px 24px rgba(20, 30, 25, .07);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--emerald); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .2px; }
.hidden { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 10px; }

/* ---------- header ---------- */
.masthead {
  position: relative;
  background:
    radial-gradient(120% 140% at 85% -10%, rgba(212,175,55,.22), transparent 55%),
    linear-gradient(160deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: #fff;
  padding: calc(18px + var(--safe-t)) 18px 26px;
  overflow: hidden;
}
.masthead::after {
  content: ""; position: absolute; inset: auto -10% -60px -10%; height: 90px;
  background: var(--bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.masthead .inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.crest { width: 40px; height: 40px; flex: none; }
.masthead .eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.masthead h1 { font-size: 30px; line-height: 1.1; margin-top: 2px; }
.masthead .sub { opacity: .82; margin-top: 4px; font-size: 14px; }
.who-chip {
  margin-left: auto; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}

/* ---------- layout ---------- */
main { max-width: 600px; margin: -14px auto 0; padding: 0 14px calc(96px + var(--safe-b)); position: relative; z-index: 2; }
.screen { display: none; animation: rise .35s ease; }
.screen.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-title { display: flex; align-items: baseline; gap: 8px; margin: 22px 4px 10px; }
.section-title h2 { font-size: 22px; }
.section-title .tiny { color: var(--gold-deep); margin-left: auto; }

.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px; position: relative; border: 1px solid rgba(0,0,0,.02);
}
.card.tight { padding: 12px 14px; }
.card h3 { font-size: 19px; margin-bottom: 6px; }
.card .kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: 4px; }
.card.emerald { background: linear-gradient(160deg, var(--emerald), var(--emerald-deep)); color: #fff; }
.card.emerald .kicker { color: var(--gold); }
.card.emerald .muted { color: rgba(255,255,255,.7); }
.card.gold { background: linear-gradient(160deg, #FFF9E8, var(--gold-soft)); border: 1px solid #EBDDAF; }
.card.sixers { background: linear-gradient(160deg, #1D428A, #0F2756); color: #fff; }
.card.sixers .kicker { color: #F3C7CD; }
.card.sixers .muted { color: rgba(255,255,255,.72); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--emerald-soft); border-radius: 12px; padding: 10px; text-align: center; }
.stat b { display: block; font: 600 22px/1.1 var(--serif); color: var(--emerald-deep); }
.stat span { font-size: 11px; color: var(--ink-2); }
.card.emerald .stat, .card.sixers .stat { background: rgba(255,255,255,.1); }
.card.emerald .stat b, .card.sixers .stat b { color: #fff; }
.card.emerald .stat span, .card.sixers .stat span { color: rgba(255,255,255,.75); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--emerald-soft); color: var(--emerald-deep); font-weight: 500; }
.pill.gold { background: var(--gold-soft); color: #7A5F14; }
.pill.bad { background: #F8E3E0; color: var(--bad); }
.pill.warn { background: #FBF0D9; color: #8A621A; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 11px 16px; cursor: pointer; font-weight: 600;
  background: var(--emerald); color: #fff; transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); }
.btn.gold { background: linear-gradient(180deg, #E2C25A, var(--gold) 55%, var(--gold-deep)); color: #2B2206; box-shadow: 0 6px 16px rgba(168,134,42,.35); }
.btn.ghost { background: transparent; color: var(--emerald); border: 1px solid var(--line); }
.card.emerald .btn.ghost, .card.sixers .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.linkbtn { background: none; border: 0; color: var(--emerald); font-weight: 600; cursor: pointer; padding: 0; }

input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--field); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(10,92,54,.12); }
textarea { min-height: 96px; resize: vertical; }
label.field { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }
label.field > span { display: block; margin-bottom: 4px; font-weight: 500; }

/* segmented control */
.seg { display: flex; background: var(--emerald-soft); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--emerald-deep); cursor: pointer; }
.seg button.on { background: var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* list rows */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.card.emerald .list li, .card.sixers .list li { border-color: rgba(255,255,255,.14); }
.news a { text-decoration: none; color: inherit; display: block; }
.news .src { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.card.sixers .news .src { color: rgba(255,255,255,.6); }

/* ---------- gauge ---------- */
.gauge-wrap { display: flex; gap: 16px; align-items: center; }
.gauge { width: 150px; height: 150px; flex: none; }
.gauge .track { stroke: rgba(255,255,255,.12); }
.gauge .outer { stroke: var(--gold); transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.gauge .inner { stroke: #7FD1A5; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.gauge text { fill: #fff; font-family: var(--serif); }
.legend { font-size: 12px; }
.legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.verdict-title { font: 600 18px/1.15 var(--serif); color: var(--gold); letter-spacing: .04em; }
.verdict-line { font-size: 13.5px; margin-top: 4px; opacity: .92; }

/* weather tiles */
.wx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wx div { background: var(--emerald-soft); border-radius: 12px; padding: 8px 6px; text-align: center; }
.wx b { display: block; font-size: 17px; color: var(--emerald-deep); }
.wx span { font-size: 10.5px; color: var(--ink-2); }
.alert { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: #FBF0D9; color: #6E4F12; font-size: 13px; margin-top: 8px; }
.alert.bad { background: #F8E3E0; color: #8E2C21; }
.alert.good { background: var(--emerald-soft); color: var(--emerald-deep); }

/* tee time strip */
.tt-day { margin-top: 10px; }
.tt-day .label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.tt-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.tt-cells div { height: 26px; border-radius: 4px; position: relative; }
.tt-cells div.best { outline: 2px solid var(--gold); outline-offset: -2px; }
.tt-hours { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }

/* compass */
.compass { width: 180px; height: 180px; margin: 0 auto; display: block; touch-action: manipulation; }
.compass .dir { cursor: pointer; }
.compass .dir circle { fill: #fff; stroke: var(--line); }
.compass .dir.on circle { fill: var(--emerald); stroke: var(--emerald); }
.compass .dir.on text { fill: #fff; }
.compass text { font: 600 11px var(--sans); fill: var(--ink-2); }
.result-big { font: 600 44px/1 var(--serif); color: var(--emerald-deep); }

/* sliders & checks */
.slider { margin: 12px 0; }
.slider .row { font-size: 13px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--emerald) var(--p, 50%), var(--line) var(--p, 50%)); outline: none; margin: 8px 0 2px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check {
  display: flex; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 12.5px; cursor: pointer; user-select: none; background: var(--field); line-height: 1.25;
}
.check .em { font-size: 17px; }
.check .st { margin-left: auto; font-weight: 700; font-size: 11.5px; }
.check.on { border-color: var(--emerald); background: var(--emerald-soft); }
.check.on.bad { border-color: var(--bad); background: #F8E3E0; }
.hcp { font: 600 40px/1 var(--serif); color: var(--emerald-deep); }

/* swing game */
.swing svg { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.swing .msg { min-height: 40px; text-align: center; font-weight: 600; margin: 6px 0 10px; }
.swing .btn.gold { font-size: 18px; padding: 14px; letter-spacing: .12em; }

/* rounds */
.round { display: flex; align-items: center; gap: 12px; }
.score-badge { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; font: 600 22px/1 var(--serif); background: var(--emerald-soft); color: var(--emerald-deep); }
.score-badge.great { background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: #fff; }
.score-badge.good { background: var(--emerald); color: #fff; }
.reacts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.react { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 2px 8px; font-size: 12.5px; cursor: pointer; }
.react.mine { border-color: var(--gold); background: var(--gold-soft); }
.react.add { color: var(--ink-3); }
.react-picker { display: flex; gap: 4px; padding: 6px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); margin-top: 6px; width: max-content; }
.react-picker button { border: 0; background: none; font-size: 20px; cursor: pointer; padding: 2px 4px; }
svg.spark { width: 100%; height: 70px; display: block; }

/* trophies */
.trophy { display: flex; gap: 12px; align-items: center; }
.trophy svg { width: 46px; height: 46px; flex: none; }
.trophy .score { font: 600 30px/1 var(--serif); }

/* jaiden */
.age-big { font: 600 46px/1 var(--serif); }
.unit-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.unit-row:first-child { border-top: 0; }
.unit-row .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--emerald-soft); display: grid; place-items: center; font-size: 20px; flex: none; }
.bar { height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), #3FAE73); border-radius: 8px; }
.chip { display: inline-block; border: 1px dashed var(--line); border-radius: 999px; padding: 5px 10px; font-size: 12.5px; margin: 0 6px 6px 0; cursor: pointer; background: var(--card); }
.chip.done { border-style: solid; border-color: var(--gold); background: var(--gold-soft); }
.letter { border-left: 3px solid var(--gold); padding-left: 12px; }
.letter .body { white-space: pre-wrap; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.sealed { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: linear-gradient(160deg, #FFF9E8, var(--gold-soft)); }
.seal { width: 42px; height: 42px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #D9534F, #8E2C21); display: grid; place-items: center; color: #FCE9C8; font: 700 15px var(--serif); box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); }

/* countdown */
.cd { display: flex; gap: 6px; }
.cd div { background: rgba(255,255,255,.12); border-radius: 10px; padding: 6px 8px; min-width: 46px; text-align: center; }
.cd b { display: block; font: 600 20px/1 var(--serif); }
.cd span { font-size: 10px; opacity: .75; }
.card:not(.emerald):not(.sixers) .cd div { background: var(--emerald-soft); }

/* cup scorecard */
.scorecard { overflow-x: auto; margin: 0 -4px; }
.scorecard table { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; min-width: 100%; }
.scorecard th { font-weight: 600; color: var(--ink-3); font-size: 11px; padding: 2px; }
.scorecard td { text-align: center; min-width: 26px; height: 30px; border-radius: 6px; background: var(--soft); cursor: pointer; }
.scorecard td.name { text-align: left; background: none; font-weight: 600; padding-right: 6px; cursor: default; white-space: nowrap; }
.scorecard td.tot { background: var(--emerald); color: #fff; font-weight: 700; cursor: default; }
.scorecard td.filled { background: var(--emerald-soft); color: var(--emerald-deep); font-weight: 600; }
.leader { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.leader:first-child { border-top: 0; }
.leader .pos { width: 26px; font: 600 20px var(--serif); color: var(--gold-deep); }
.talk { display: flex; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background: var(--emerald); }
.bubble { background: var(--soft); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }

/* books & wine */
.covers { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.cover { flex: none; width: 96px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.cover .img { width: 96px; height: 144px; border-radius: 8px; background: linear-gradient(160deg, var(--emerald), var(--emerald-deep)); box-shadow: 0 4px 12px rgba(0,0,0,.15); overflow: hidden; display: grid; place-items: center; color: var(--gold); font: 600 13px/1.2 var(--serif); text-align: center; padding: 8px; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .t { font-size: 12px; font-weight: 600; margin-top: 6px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover .a { font-size: 11px; color: var(--ink-3); }
.pour { display: flex; gap: 14px; align-items: center; }
.pour svg { width: 54px; height: 80px; flex: none; }

/* room tiles */
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.room-tile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; cursor: pointer; border: 0; text-align: left; }
.room-tile .ic { font-size: 24px; }
.room-tile b { display: block; font: 600 18px var(--serif); margin-top: 6px; }
.room-tile span { font-size: 12px; color: var(--ink-3); }

/* activity feed */
.feed li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }

/* ---------- bottom nav ---------- */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--line); padding: 6px 6px calc(6px + var(--safe-b));
}
nav.tabs .inner { max-width: 600px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
nav.tabs button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); padding: 4px 0; cursor: pointer; }
nav.tabs svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav.tabs button.on { color: var(--emerald); }
nav.tabs button.on svg { stroke: var(--emerald); }

/* gold tee FAB */
.tee-fab {
  position: fixed; right: 16px; bottom: calc(78px + var(--safe-b)); z-index: 55; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #F2DA8A, var(--gold) 50%, var(--gold-deep)); box-shadow: 0 8px 20px rgba(168,134,42,.45);
  display: grid; place-items: center; animation: bob 3s ease-in-out infinite;
}
.tee-fab svg { width: 26px; height: 26px; }
@keyframes bob { 50% { transform: translateY(-4px); } }

/* ---------- sheets / modal ---------- */
.sheet-back { position: fixed; inset: 0; background: rgba(10, 20, 15, .45); z-index: 80; display: none; }
.sheet-back.open { display: block; animation: fade .2s ease; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 92vh; overflow-y: auto;
  background: var(--bg); border-radius: 22px 22px 0 0; padding: 10px 16px calc(20px + var(--safe-b));
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1); max-width: 640px; margin: 0 auto;
}
.sheet.open { transform: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 5px; background: #D6D0BF; margin: 4px auto 12px; }
.sheet h2 { font-size: 26px; }
@keyframes fade { from { opacity: 0; } }

/* birthday letter */
.letter-full { position: fixed; inset: 0; z-index: 120; display: none; overflow-y: auto; background: radial-gradient(120% 90% at 50% 0%, #0E7444, var(--emerald-deep) 70%); padding: calc(24px + var(--safe-t)) 16px 40px; }
.letter-full.open { display: block; animation: fade .4s ease; }
.parchment {
  max-width: 560px; margin: 0 auto; background: #FFFDF6; border-radius: 6px; padding: 30px 24px 28px; position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.35); border: 1px solid #EADFBF; transform-origin: top; animation: unfold .9s cubic-bezier(.2,.8,.2,1);
}
.parchment::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: 3px; pointer-events: none; opacity: .6; }
@keyframes unfold { from { transform: scaleY(.2) translateY(-40px); opacity: 0; } }
.parchment .crest { width: 64px; height: 64px; display: block; margin: 0 auto 8px; }
.parchment h2 { text-align: center; font-size: 26px; color: var(--emerald-deep); }
.parchment .eyebrow { text-align: center; color: var(--gold-deep); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
.parchment p { font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.parchment .sig { font-family: var(--serif); font-style: italic; font-size: 17px; }
.parchment .note { border-top: 1px solid #EFE6CC; padding-top: 12px; margin-top: 12px; }
.parchment .note .who { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.parchment .note .body { font-family: var(--serif); font-size: 17px; white-space: pre-wrap; }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 130; }
.close-x { position: fixed; top: calc(12px + var(--safe-t)); right: 14px; z-index: 125; border: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 13.5px; z-index: 200; opacity: 0; transition: all .25s ease; pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%); }

.skeleton { background: linear-gradient(90deg, #EEE9DC 25%, #F7F3E9 50%, #EEE9DC 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; height: 14px; margin: 6px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (max-width: 380px) {
  .gauge { width: 128px; height: 128px; }
  .checks { grid-template-columns: 1fr; }
  .masthead h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===================== v2 ===================== */
nav.tabs .inner { grid-template-columns: repeat(6, 1fr); }
nav.tabs button { font-size: 9.8px; letter-spacing: -.1px; }
nav.tabs svg { width: 22px; height: 22px; }

.subtabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.subtabs button.on { background: var(--emerald); border-color: var(--emerald); color: #fff; box-shadow: 0 4px 12px rgba(10,92,54,.25); }

/* gauge polish */
.gauge .outer { filter: drop-shadow(0 0 6px rgba(212,175,55,.55)); }
.gauge .inner { filter: drop-shadow(0 0 5px rgba(127,209,165,.5)); }
.card.emerald.glow { box-shadow: 0 12px 34px rgba(6,61,36,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* wind flag */
.flag { width: 46px; height: 56px; flex: none; }
.flag .cloth { transform-origin: 8px 10px; animation: wave var(--wave, 1.6s) ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.92); } }

/* conditions chart */
svg.cond-chart { width: 100%; height: 92px; display: block; }

/* course finder */
.course-row { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.cond-dot { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; font: 700 15px var(--sans); }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 12px; }
.badge-home { background: linear-gradient(160deg, var(--gold), var(--gold-deep)); color: #fff; }
#courseMap { height: 260px; border-radius: 14px; overflow: hidden; z-index: 1; }
.leaflet-container { font: 12px var(--sans); }
.passport { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stamp { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 9.5px; font-weight: 700; line-height: 1.1; padding: 6px; border: 2px dashed var(--line); color: var(--ink-3); cursor: pointer; background: var(--card); }
.stamp.got { border: 2px solid var(--emerald); color: var(--emerald-deep); background: radial-gradient(circle, #F2FAF5, #DCEFE3); transform: rotate(-6deg); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(10,92,54,.35); }
.stamp.got:nth-child(even) { transform: rotate(5deg); }

/* hole caddie */
.holes-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.holes-strip::-webkit-scrollbar { display: none; }
.holes-strip button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; }
.holes-strip button.on { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.hole-wrap { display: flex; gap: 12px; align-items: stretch; }
svg.hole { width: 46%; max-width: 200px; flex: none; background: #2F6B3C; border-radius: 14px; touch-action: manipulation; cursor: crosshair; }
.hole-info { flex: 1; min-width: 0; }

/* tracer */
.tracer canvas { width: 100%; display: block; border-radius: 14px; background: #2F6B3C; touch-action: manipulation; }
.meter { position: relative; height: 22px; border-radius: 11px; background: linear-gradient(90deg, #C9574B 0%, #E3C565 22%, #1F8A4C 40%, #1F8A4C 60%, #E3C565 78%, #C9574B 100%); margin-top: 10px; overflow: hidden; }
.meter .power { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.55); }
.meter .needle { position: absolute; top: -2px; bottom: -2px; width: 4px; background: #23282C; border-radius: 2px; }
.meter .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: .8; }

/* photos */
.photo-field img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-top: 8px; }
.thumb { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; flex: none; background: var(--emerald-soft); }
.month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.month-cell { aspect-ratio: 1; border-radius: 12px; background: var(--emerald-soft); display: grid; place-items: center; font-size: 11px; color: var(--emerald-deep); font-weight: 700; position: relative; overflow: hidden; cursor: pointer; border: 0; }
.month-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.month-cell span { position: relative; z-index: 1; background: rgba(255,255,255,.85); border-radius: 8px; padding: 2px 6px; }
.month-cell.future { opacity: .45; cursor: default; }
.month-cell.now { outline: 2px solid var(--gold); }

/* cellar */
.window-bar { position: relative; height: 6px; background: var(--line); border-radius: 6px; margin-top: 6px; }
.window-bar i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #8C2D4B, #C2566F); border-radius: 6px; }
.window-bar b { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); }
.bottle-row { display: flex; gap: 12px; align-items: center; }
.pill.wine { background: #F3E3E8; color: #7B1E3A; }
.dish { cursor: pointer; }
.dish.on { border-style: solid; border-color: #7B1E3A; background: #F3E3E8; }
.scan-cta { display: flex; gap: 12px; align-items: center; }
.scan-cta .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.14); flex: none; }

/* ===================== v3: theme, icons, home ===================== */
:root { --field: #FDFCF8; --soft: #F4F2EC; }
body.night {
  --bg: #0B1A12; --card: #12261B; --ink: #EDEBE3; --ink-2: #C6C9C2; --ink-3: #8E9A92; --line: #23402F;
  --emerald-soft: #183527; --gold-soft: #2B2612; --field: #0F2117; --soft: #183527;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
}
body.night .masthead { background: radial-gradient(120% 140% at 85% -10%, rgba(212,175,55,.18), transparent 55%), linear-gradient(160deg, #0E2A1C, #06120C); }
body.night .card.gold { background: linear-gradient(160deg, #2A2412, #1D190C); border-color: #4A3F1E; }
body.night .card.gold .muted, body.night .card.gold .small { color: #D9CFA9; }
body.night nav.tabs { background: rgba(11,26,18,.94); border-color: #23402F; }
body.night .stat b, body.night .hcp, body.night .result-big, body.night .age-big { color: #EAF4EC; }
body.night .alert { background: #2B2612; color: #F0DFA8; }
body.night .alert.good { background: #183527; color: #BFE6CB; }
body.night .alert.bad { background: #3A1A16; color: #F3BDB3; }
body.night .pill { background: #183527; color: #BFE6CB; }
body.night .pill.gold { background: #2B2612; color: #F0DFA8; }
body.night .skeleton { background: linear-gradient(90deg, #183527 25%, #1F4030 50%, #183527 75%); background-size: 200% 100%; }
body.night .parchment { color: var(--ink); }
body.night .sheet { background: var(--bg); }
body.night input, body.night select, body.night textarea { color: var(--ink); }
body.night .room-tile b { color: var(--ink); }

svg.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }
.ico-badge { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--emerald-soft); color: var(--emerald); flex: none; }
body.night .ico-badge { color: var(--gold); }
.card.emerald .ico-badge, .card.sixers .ico-badge { background: rgba(255,255,255,.1); color: var(--gold); }

nav.tabs .inner { grid-template-columns: repeat(5, 1fr); }
nav.tabs button { font-size: 10.5px; position: relative; }
nav.tabs .dot { position: absolute; top: 2px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--card); }
.masthead .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masthead .eyebrow { white-space: nowrap; }

/* bell */
.bell-fab { position: fixed; right: 16px; bottom: calc(78px + var(--safe-b)); z-index: 55; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #F2DA8A, var(--gold) 50%, var(--gold-deep)); box-shadow: 0 8px 20px rgba(168,134,42,.45); display: grid; place-items: center; }
.bell-fab svg { width: 28px; height: 28px; }
.bell-fab:active svg { animation: ring .5s ease; }
@keyframes ring { 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } }
.bell-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--bad); color: #fff; font: 700 11px/20px var(--sans); padding: 0 5px; }
.tee-fab { bottom: calc(140px + var(--safe-b)); width: 44px; height: 44px; }

/* gazette */
.gazette { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 12px; }
.gazette .gz-top { padding: 14px 16px 12px; border-bottom: 3px double var(--line); text-align: center; }
.gazette .gz-name { font: 700 24px/1 var(--serif); letter-spacing: .5px; }
.gazette .gz-meta { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.gazette .gz-head { padding: 14px 16px 4px; }
.gazette .gz-head h2 { font-size: 27px; line-height: 1.08; }
.gazette .gz-dek { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-2); margin-top: 6px; }
.gz-item { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.gz-item:first-of-type { border-top: 0; }
.gz-item b { display: block; font-size: 14.5px; }
.gz-item .small { color: var(--ink-2); }
.gz-item img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; }

/* streaks */
.streaks { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 12px; }
.streaks::-webkit-scrollbar { display: none; }
.streak { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; }
.streak .ico { color: #E0663E; }
.streak.cold .ico { color: var(--ink-3); }

/* daily tee */
.tee-card { background: linear-gradient(150deg, #0E7444, #063D24); color: #fff; border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: 0 12px 30px rgba(6,61,36,.35); position: relative; overflow: hidden; }
.tee-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(212,175,55,.12); }
.tee-card .kicker { color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.tee-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; position: relative; z-index: 1; }
.tee-step { background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px; border: 0; color: #fff; text-align: left; cursor: pointer; }
.tee-step b { display: block; font: 600 18px var(--serif); }
.tee-step.done { background: rgba(212,175,55,.22); }
.q-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 14px; margin-top: 8px; font-weight: 500; cursor: pointer; color: var(--ink); }
.q-opt.right { border-color: var(--good); background: #E3F3E8; color: #11552F; }
.q-opt.wrong { border-color: var(--bad); background: #F8E3E0; color: #7E2117; }
.share-line { font: 600 15px/1.5 ui-monospace, Menlo, monospace; background: var(--soft); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; }

/* watch row */
.vids { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.vids::-webkit-scrollbar { display: none; }
.vid { flex: none; width: 220px; scroll-snap-align: start; cursor: pointer; }
.vid .th { position: relative; width: 220px; height: 124px; border-radius: 12px; overflow: hidden; background: #000; }
.vid .th img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.vid .th::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center/22px no-repeat; }
.vid .t { font-size: 13px; font-weight: 600; margin-top: 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid .c { font-size: 11.5px; color: var(--ink-3); }
.video-frame { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* compact check-in */
.chips-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips-row::-webkit-scrollbar { display: none; }
.chips-row .check { flex: none; padding: 7px 10px; }

/* feed v3 */
.feed-item { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.feed-item:first-child { border-top: 0; }
.feed-item .thumb { width: 48px; height: 48px; }
.comment-row { display: flex; gap: 8px; margin-top: 8px; }
.comment-row .avatar { width: 26px; height: 26px; font-size: 10px; }
.reply-btn { background: none; border: 0; color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; }

/* menu */
.menu-btn { background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 4px; }

/* ===================== butler ===================== */
.butler-hero { position: relative; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #10804D, #063D24 70%); color: #fff; padding: 18px 16px 16px; text-align: center; box-shadow: 0 14px 34px rgba(6,61,36,.35); }
.butler-hero .frame { width: 220px; margin: 4px auto 0; position: relative; }
.butler-hero .arch { position: absolute; inset: 0 0 auto 0; height: 250px; border: 3px solid var(--gold); border-radius: 110px 110px 12px 12px; box-shadow: inset 0 0 0 6px rgba(212,175,55,.18); }
.butler-hero svg.body { width: 220px; height: 250px; display: block; position: relative; }
.butler-hero h2 { font-size: 34px; margin-top: 10px; color: var(--gold); font-style: italic; }
.butler-hero .tag { font-size: 13px; opacity: .85; margin-top: 2px; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 12px; text-align: left; cursor: pointer; box-shadow: var(--shadow); color: var(--ink); }
.svc .e { font-size: 26px; }
.svc b { display: block; font: 600 17px/1.15 var(--serif); margin-top: 6px; }
.svc span { font-size: 12px; color: var(--ink-3); }
.svc:active { transform: scale(.98); }
.tracker { display: flex; gap: 4px; margin: 10px 0 4px; }
.tracker i { flex: 1; height: 6px; border-radius: 6px; background: var(--line); }
.tracker i.on { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.tracker-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.butler-reply { font-family: var(--serif); font-style: italic; font-size: 17px; border-left: 3px solid var(--gold); padding-left: 10px; margin-top: 8px; }
.urg { display: flex; gap: 6px; flex-wrap: wrap; }
.urg button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.urg button.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.check { color: var(--ink); }
.streak b { font-weight: 700; }

/* ===================== v4: review round 1 ===================== */
.masthead { padding-bottom: 46px; }
.masthead .sub { margin-top: 6px; }
main { margin-top: -22px; }
.teesheet { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 12px; border-top: 4px solid var(--emerald); }
.ts-head { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 8px; }
.ts-head h2 { font-size: 24px; line-height: 1.1; margin-top: 2px; }
.ts-head .kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.ts-date { margin-left: auto; text-align: center; border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; flex: none; }
.ts-date b { display: block; font: 600 24px/1 var(--serif); color: var(--emerald-deep); }
body.night .ts-date b { color: var(--gold); }
.ts-date span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.ts-dek { padding: 0 16px 10px; font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--ink-2); }
.ts-row { display: flex; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.ts-row:nth-child(even) { background: color-mix(in srgb, var(--emerald-soft) 35%, transparent); }
.ts-label { width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--emerald); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body.night .ts-label { color: var(--gold); }
.ts-label svg.ico { width: 22px; height: 22px; }
.ts-row b { display: block; font-size: 14.5px; line-height: 1.25; }
.ts-row .small { color: var(--ink-2); margin-top: 2px; }
.ts-row img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; }
.ts-go { color: var(--ink-3); flex: none; }

/* LeBron hero */
.king { position: relative; overflow: hidden; border-radius: 22px; background: radial-gradient(120% 120% at 100% 0%, #FDB927 0%, #552583 0%, #1D428A 55%, #0B1F45 100%); color: #fff; padding: 16px; margin-bottom: 12px; box-shadow: 0 14px 32px rgba(11,31,69,.4); min-height: 210px; }
.king img.head { position: absolute; right: -18px; bottom: 0; height: 205px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.king .crown { color: #F2C14E; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.king h2 { font-size: 34px; line-height: 1; margin-top: 4px; }
.king .nums { display: flex; gap: 14px; margin-top: 14px; position: relative; z-index: 1; }
.king .nums div b { display: block; font: 600 28px/1 var(--serif); }
.king .nums div span { font-size: 10.5px; opacity: .75; text-transform: uppercase; letter-spacing: .1em; }
.king .meta { position: relative; z-index: 1; max-width: 62%; }
.ou { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ou button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 14px; padding: 12px; font-weight: 700; cursor: pointer; }
.ou button.on { background: var(--sixers); border-color: var(--sixers); color: #fff; }

/* GPS */
.gps-bar { display: flex; align-items: center; gap: 10px; background: #0B1F14; color: #fff; border-radius: 14px; padding: 10px 12px; margin-top: 10px; }
.gps-bar .dist { display: flex; gap: 12px; margin-left: auto; text-align: center; }
.gps-bar .dist b { display: block; font: 600 24px/1 var(--serif); }
.gps-bar .dist span { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .1em; }
.gps-bar .dist .mid b { color: var(--gold); font-size: 30px; }

/* voice */
.rec-btn { width: 74px; height: 74px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #F07A6A, #B23B2E); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(178,59,46,.35); }
.rec-btn.on { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(178,59,46,.15); } }
audio { width: 100%; height: 38px; margin-top: 6px; }
.quote { font-family: var(--serif); font-size: 18px; line-height: 1.4; border-left: 3px solid var(--gold); padding-left: 12px; }
.event-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.event-row:first-child { border-top: 0; }
.event-days { width: 54px; text-align: center; flex: none; }
.event-days b { display: block; font: 600 24px/1 var(--serif); color: var(--emerald-deep); }
body.night .event-days b { color: var(--gold); }
.event-days span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; }
.king .small { text-shadow: 0 1px 6px rgba(0,0,0,.7); }

/* play the hole */
.ph-seg button { min-height: 40px; }
.ph-head { margin-top: 12px; align-items: flex-start; }
.ph-head h3 { margin: 0; }
.ph-pick { margin-top: 10px; gap: 6px; }
.ph-pick select { flex: 1; min-width: 0; height: 44px; padding: 0 10px; }
.ph-pick .btn { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 18px; }
.ph-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.ph-card > div { background: var(--emerald-soft); border-radius: 10px; padding: 6px 4px 5px; text-align: center; min-width: 0; }
.ph-card b { display: block; font: 600 20px/1.1 var(--serif); color: var(--emerald-deep); font-variant-numeric: tabular-nums; }
.ph-card span { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.night .ph-card b { color: #EAF4EC; }
.ph-stage { position: relative; margin-top: 10px; }
.ph-stage canvas { width: 100%; display: block; border-radius: 14px; background: #2E6A3B; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; }
.ph-badge { position: absolute; left: 10px; top: 10px; background: rgba(8,28,18,.62); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; pointer-events: none; }
.ph-pop { position: absolute; left: 50%; top: 44px; transform: translate(-50%, -6px); background: rgba(8,28,18,.8); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.ph-pop.show { opacity: 1; transform: translate(-50%, 0); }
.ph-banner { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 10px) scale(.96); min-width: 200px; max-width: calc(100% - 24px); text-align: center; background: rgba(8,28,18,.8); color: #fff; padding: 10px 18px 9px; border-radius: 14px; opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.ph-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ph-banner b { display: block; font: 600 26px/1.1 var(--serif); color: #fff; }
.ph-banner.great b { color: #F2DA8A; }
.ph-banner span { font-size: 12px; opacity: .85; }
.ph-info { min-height: 36px; margin-top: 8px; gap: 8px; line-height: 1.3; }
.ph-info > span:last-child { text-align: right; }
.ph-clubs { margin-top: 6px; min-height: 50px; align-items: center; scroll-behavior: smooth; }
.ph-club { flex: none; min-width: 64px; min-height: 46px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; padding: 5px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; position: relative; }
.ph-club b { font-size: 13px; white-space: nowrap; }
.ph-club span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ph-club.on { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.ph-club.on span { color: rgba(255,255,255,.8); }
.ph-club.sug::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.ph-club[disabled] { opacity: .45; pointer-events: none; }
.ph-note { flex: 1; min-width: 160px; line-height: 1.3; padding-left: 4px; }
.meter.ph-pw { background: linear-gradient(90deg, #1d5c39, #2f8a55 70%, #3FAE73 88%, #C9922B 92%, #C9574B); }
.meter.ph-pw .power { background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(242,218,138,.75)); }
.ph-meter .mark { background: #F2DA8A; width: 3px; opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.ph-ml { margin-top: 4px; text-transform: none; letter-spacing: 0; }
.ph-msg { min-height: 46px; text-align: center; font-weight: 600; margin: 8px 0 10px; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ph-msg .small { font-weight: 500; }
.ph-swing { font-size: 18px; letter-spacing: .12em; padding: 15px; min-height: 54px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ph-log { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.ph-log:empty { display: none; }
.ph-log li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.ph-log li:first-child { border-top: 0; }
.ph-log .n { width: 18px; flex: none; color: var(--gold-deep); font-weight: 700; }
.ph-result { text-align: center; padding: 16px 14px; border-radius: 14px; background: linear-gradient(160deg, var(--emerald), var(--emerald-deep)); color: #fff; margin-top: 12px; }
.card .ph-result .kicker { color: var(--gold); }
.ph-result .big { font: 600 36px/1.1 var(--serif); color: #F2DA8A; margin: 2px 0 4px; }
.ph-result .small { opacity: .85; margin-bottom: 12px; }
.ph-again { justify-content: center; gap: 8px; }
.ph-result .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.ph-board { margin-top: 14px; }
.ph-board .leader.me b.grow { color: var(--gold-deep); }