/* Putt: grass green. The course is a canvas (mowed stripes, wooden walls,
   sand, water, a flag); around it a plain scorecard in the site's type. */

:root { --grass: #51cf66; --grass-ink: #237a37; --under: #2f9e44; --even: #e3b341; --over: #d9534f; }
.putt { --game: var(--grass); gap: 12px; padding-top: 14px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--wash); }
.mode { height: 38px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 15px var(--ui); color: var(--muted); }
.mode.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.hud { display: flex; justify-content: space-between; align-items: flex-end; }
.hud p { margin: 0; display: flex; flex-direction: column; }
.hole b { font: 700 20px/1.1 var(--slab); }
.hole span, .strokes span { font-size: 13px; color: var(--muted); }
.strokes { align-items: flex-end; }
.strokes b { font: 800 30px/1 var(--ui); font-variant-numeric: tabular-nums; }

.course-wrap { display: flex; justify-content: center; }
#course { display: block; border-radius: 12px; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
#course:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.card li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--wash); }
.card li span { font-size: 12px; color: var(--muted); }
.card li b { font: 800 20px var(--ui); font-variant-numeric: tabular-nums; }
.card li.now { outline: 2px solid var(--ink); outline-offset: -2px; background: var(--paper); }
.card li.under b { color: var(--under); }
.card li.par b { color: #9a7a12; }
.card li.over b { color: var(--over); }
.card li.wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; padding: 10px 14px; }

/* modals */
.d-big small { font-size: 22px; color: var(--muted); }
.holes { display: grid; gap: 4px; margin: 0 0 16px; }
.holes div { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.holes b { font-variant-numeric: tabular-nums; }
.holes em { font-style: normal; color: var(--muted); text-align: right; }