/* Layout: one narrow column built for a phone in one hand on a sunny green. Single light look on purpose: it reads best outdoors. */
:root{
  --ground:#F3F5EF; --card:#FFFFFF; --ink:#141613; --muted:#5A6157; --line:#DCE2D5;
  --green:#3F7300; --green-2:#59A100; --green-soft:#E6EFDA; --orange:#B35A0E; --orange-soft:#F7E8DA;
  --display:'Montserrat',Arial,sans-serif; --body:'DM Sans',Arial,sans-serif;
  color-scheme:light;
}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
.wrap{max-width:560px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.15}
p{margin:0}
[hidden]{display:none!important}
.station,.result,.field,.wrap>*{min-width:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--green-2);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top img{height:34px;width:auto}
.top h1{font-size:15px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--green)}
.players{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-weight:500;font-size:15px}
.chip[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:#fff}
.chip.add{border-style:dashed;color:var(--green)}
.who{display:flex;flex-direction:column;gap:6px}
label.l,.l{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
input[type=text],textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:10px;background:var(--card);padding:12px 14px;font:inherit;font-size:18px;color:var(--ink)}
textarea{font-size:16px;min-height:76px;resize:vertical}
.ex{background:var(--orange-soft);color:#6E3708;border-radius:10px;padding:12px 14px;font-size:15px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ex button{border:0;background:var(--orange);color:#fff;border-radius:8px;padding:8px 12px;font-weight:700;font-size:14px}
.putts{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.putts p{font-size:15px;color:var(--muted)}
.station{background:var(--card);border-radius:16px;padding:20px 18px;display:flex;flex-direction:column;gap:18px;border:1.5px solid var(--line)}
.station.done{border-color:var(--green-2)}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sh h2{font-size:22px;font-weight:800}
.sh .n{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:1.5px;color:var(--green);text-transform:uppercase;white-space:nowrap}
.sh .tick{font-size:13px;font-weight:700;color:var(--green);white-space:nowrap}
.field{display:flex;flex-direction:column;gap:8px}
.field .q{font-weight:700;font-size:17px}
.field .hint{font-size:14px;color:var(--muted);margin-top:-4px}
.count{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:10px}
.count button{height:56px;border-radius:12px;border:1.5px solid var(--line);background:var(--ground);font-family:var(--display);font-size:28px;font-weight:800;color:var(--green)}
.count button:active{background:var(--green-soft)}
.count output{text-align:center;font-family:var(--display);font-weight:900;font-size:34px;font-variant-numeric:tabular-nums}
.count output small{font-size:18px;color:var(--muted);font-weight:700}
.count output.empty{color:#A9B0A4}
.seg{display:grid;gap:8px}
.seg.c3{grid-template-columns:repeat(3,1fr)}.seg.c4{grid-template-columns:repeat(4,1fr)}
.seg button{border:1.5px solid var(--line);background:var(--ground);border-radius:12px;padding:12px 6px;font-weight:700;font-size:16px;min-height:52px}
.seg button small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.seg button[aria-pressed="true"] small{color:#E6EFDA}
.speedrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sp .pm{gap:4px}
.sp{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:10px 6px;background:var(--ground)}
.sp .nm{font-weight:700;font-size:15px}
.sp output{font-family:var(--display);font-weight:900;font-size:30px;font-variant-numeric:tabular-nums}
.sp .pm{display:flex;gap:6px}
.sp .pm button{width:40px;height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);font-family:var(--display);font-weight:800;font-size:22px;color:var(--green)}
.logged{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.logged.ok{color:var(--green);font-weight:700}
.result{background:var(--ink);color:#F3F5EF;border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:18px}
.result .l{color:#AEB8A6}
.one{display:flex;flex-direction:column;gap:6px}
.one h2{font-size:44px;font-weight:900;color:#7BC424}
.one p{font-size:17px}
.bars{display:flex;flex-direction:column;gap:12px}
.bar{display:grid;grid-template-columns:92px 1fr 52px;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.bar .k{font-weight:700}
.bar .track{height:12px;border-radius:6px;background:#2B302A;overflow:hidden}
.bar .fill{height:100%;background:#59A100;border-radius:6px}
.bar.low .fill{background:#E08A3A}
.bar.low .k{color:#F0A866}
.bar .v{text-align:right;font-weight:700}
.note{background:#22271F;border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.4}
.note b{color:#7BC424}
.todo{display:flex;flex-direction:column;gap:6px;font-size:15px;color:#C9D1C3}
.todo li{margin-left:18px}
.drill{display:flex;flex-direction:column;gap:6px}
.drill textarea{background:#22271F;border-color:#3A4237;color:#F3F5EF}
.foot{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.shop{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:700;padding:14px 18px;border-radius:12px}
.clear{border:0;background:none;color:var(--muted);text-decoration:underline;padding:4px 0;font-size:14px}
.confirm{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px}
.confirm button{border-radius:8px;padding:8px 12px;font-weight:700;border:1.5px solid var(--line);background:var(--ground)}
.confirm .danger{background:var(--orange);border-color:var(--orange);color:#fff}
.small{font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.bar .fill{transition:width .3s ease}}