:root{
  --masters:#006747; --cardinal:#a4161a; --ink:#ffffff; --muted:rgba(255,255,255,.66);
  --glass:rgba(8,18,13,.62); --glass-line:rgba(255,255,255,.14);
  --f-num:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
button{font-family:inherit}   /* buttons follow the page font, never the browser default (Arial) */
html,body{margin:0;height:100%;background:#0b130f;color:var(--ink);font-family:var(--f-body);overflow:hidden;-webkit-tap-highlight-color:transparent}
/* Maps JS sets inline position:relative on the container, so size it explicitly */
#map{width:100vw;height:100vh;height:var(--app-h)}   /* fullscreen task: --app-h (design.css) */
.glass{background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-line);box-shadow:0 8px 28px rgba(0,0,0,.35)}
small{display:block;font:600 11px/1 var(--f-body);letter-spacing:.12em;color:var(--muted)}
b{font-family:var(--f-num);font-weight:700}

/* top card */
.card{position:fixed;left:12px;right:12px;top:calc(10px + var(--safe-t));border-radius:18px;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px;padding:10px 14px;z-index:5}
.hole-no{background:var(--masters);border-radius:12px;text-align:center;padding:6px 0 4px}
.hole-no small{color:rgba(255,255,255,.8)}
.hole-no b{font-size:38px;line-height:1}
.mid{text-align:center}
.mid b{display:block;font-size:64px;line-height:.9;font-weight:800;letter-spacing:-.01em}
.mid em{display:block;font:italic 600 12px/1.2 var(--f-body);color:#ffd6d7;min-height:14px}
.side{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.side b{font-size:26px;line-height:1}
.fb{display:flex;gap:12px}
.fb span{text-align:right}
.fb b{font-size:24px}

/* not mapped */
.unmapped{position:fixed;left:24px;right:24px;top:42%;transform:translateY(-50%);border-radius:16px;padding:16px 18px;text-align:center;z-index:5}
.unmapped b{display:block;font-size:30px;letter-spacing:.02em;text-transform:uppercase}
.unmapped span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}

.gps{position:fixed;left:12px;bottom:calc(92px + var(--safe-b));border-radius:999px;padding:5px 11px;font:600 12px/1 var(--f-body);z-index:5}

/* bottom bar */
.bar{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));height:68px;border-radius:18px;display:grid;grid-template-columns:68px 1fr 68px;align-items:center;z-index:5}
.bar button{height:68px;border:0;background:transparent;color:#fff;font-size:44px;line-height:1;cursor:pointer;font-family:var(--f-num)}
.bar button:active{background:rgba(255,255,255,.08)}
.bar button:first-child{border-radius:18px 0 0 18px}.bar button:last-child{border-radius:0 18px 18px 0}
.bar-title{text-align:center}
.bar-title b{display:block;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.03em}
.bar-title small{margin-bottom:3px}

/* map overlays (AdvancedMarker content) */
.bubble{font:700 17px/1 var(--f-num);color:#fff;background:rgba(8,18,13,.82);border:1.5px solid rgba(255,255,255,.85);border-radius:999px;padding:5px 10px;white-space:nowrap;transform:translateY(50%)}
.bubble.red{background:var(--cardinal);border-color:#fff}
.xhair{width:46px;height:46px;transform:translateY(50%);touch-action:none}
.dot{width:16px;height:16px;border-radius:50%;transform:translateY(50%);border:2.5px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.5)}
.dot.golfer{background:#1f6fd1}.dot.green{background:#fff;border-color:var(--masters)}.dot.tee{background:#111;border-radius:3px}
:focus-visible{outline:2px solid #fff;outline-offset:2px}