/* Big, high-contrast layout for use outdoors and by older eyes. */
:root {
  --green: #0f3d2e; --green2: #1b6b4f; --gold: #e8b923; --ink: #111; --muted: #555;
  --line: #d6d6d6; --bg: #f4f5f2; --warn: #b3261e; --ok: #1b6b4f;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
button { font: inherit; border: 2px solid var(--green); background: #fff; color: var(--green);
  border-radius: 12px; padding: 12px 16px; min-height: 52px; cursor: pointer; }
button.primary { background: var(--green); color: #fff; }
button:disabled { opacity: .45; }
button.big { width: 100%; font-size: 1.2rem; margin-top: 12px; }
input, select { font: inherit; width: 100%; padding: 12px; border: 2px solid var(--line);
  border-radius: 10px; margin-top: 6px; background: #fff; }
label { display: block; margin: 14px 0; font-weight: 600; }

header { background: var(--green); color: #fff; padding: 12px 16px calc(12px) 16px;
  padding-top: max(12px, env(safe-area-inset-top)); }
.brand { font-weight: 700; font-size: 1.1rem; }
.brand .tag { background: var(--gold); color: #000; font-size: .7rem; padding: 2px 6px; border-radius: 6px; }
.sub { opacity: .9; font-size: .9rem; margin-top: 2px; }
.msg { background: #fff3cd; border-bottom: 1px solid #e0c36a; padding: 10px 16px; }

.card { background: #fff; margin: 16px; padding: 20px; border-radius: 16px; }
.card h1 { margin: 0 0 8px; font-size: 1.5rem; }
.pin { font-size: 2rem; letter-spacing: .5em; text-align: center; }
.choice { display: block; width: 100%; margin: 10px 0; font-size: 1.2rem; text-align: left; }
.fine { color: var(--muted); font-size: .8rem; }

.pairs { display: flex; gap: 8px; padding: 8px 12px; background: #e7efe9; overflow-x: auto; }
.pair { background: #fff; border-radius: 10px; padding: 6px 10px; font-size: .85rem; white-space: nowrap; }
.pair b { margin-left: 6px; color: var(--green); }
.pair .al { margin-left: 6px; color: var(--muted); }

.hole { padding: 8px 12px 150px; }
.holehead { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 4px; }
.holeno { font-size: 2.2rem; font-weight: 800; color: var(--green); }
.holemeta { font-size: 1.2rem; font-weight: 600; }
.hint { color: var(--muted); font-size: .8rem; margin: 0 4px 8px; }

.prow { background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 10px; }
.pname { font-size: 1.2rem; font-weight: 700; }
.setting { min-height: 36px; padding: 4px 10px; font-size: .85rem; border-width: 1px; margin-top: 4px; }
.setting.changed { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.pts { margin-top: 6px; color: var(--green2); font-weight: 600; }
.pts .tot { color: var(--muted); font-weight: 400; margin-left: 10px; }
.entry { display: grid; grid-template-columns: 64px 1fr 64px auto; gap: 8px; align-items: center; }
.step { font-size: 2rem; padding: 0; height: 64px; }
.num { font-size: 2.2rem; font-weight: 800; height: 64px; background: var(--green); color: #fff; }
.num.empty { background: #eee; color: #999; border-color: #ccc; }
.num.nr { background: #fff; color: var(--warn); border-color: var(--warn); font-size: 1.4rem; }
.nrbtn { font-size: .8rem; height: 64px; padding: 4px 8px; border-color: var(--warn); color: var(--warn); }

.bottom { position: fixed; left: 0; right: 0; bottom: 34px; display: grid;
  grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; padding: 8px 12px; background: var(--bg);
  border-top: 1px solid var(--line); }
.sync { position: fixed; left: 0; right: 0; bottom: 0; text-align: center; padding: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom)); font-size: .85rem; color: #fff; }
.sync.ok { background: var(--ok); }
.sync.waiting { background: var(--warn); }

.review { padding: 12px 8px 80px; }
.sc { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
.sc th, .sc td { border: 1px solid var(--line); padding: 4px; text-align: center; }
.sc thead th { font-size: .75rem; }
.sc td small { display: block; color: var(--green2); font-size: .7rem; }
.sc .m { color: var(--muted); }
.miss { color: var(--warn); font-weight: 700; }
.warn { color: var(--warn); font-weight: 700; }
.row { display: flex; gap: 10px; margin-top: 12px; }
.row button { flex: 1; }

dialog { border: none; border-radius: 16px; width: min(92vw, 420px); padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.setform h2 { margin: 0 0 4px; }