/* ===== Mini golf: shared by Pythagoras Mini Golf and Trigonometry Mini Golf (js/mini-golf.js) ===== */
/* No overflow clip (the drawing clips itself, being an svg), and a layer above the game, so Set for Class's dashboard picture can drop over it */
.golf-page-header { position: relative; z-index: 10; background: linear-gradient(180deg, #eaf6ff 0%, #f4fbef 100%);
    padding: 28px 0 40px; text-align: center; color: #1e293b; margin-bottom: 1.4rem; border-bottom: 3px solid #d7ead0; }
.golf-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.golf-page-header .container { position: relative; z-index: 1; }
.golf-page-header h1 { font-size: 2.2rem; margin: 0 0 .4rem; font-weight: 700; }
.golf-page-header p { color: #475569; font-size: 1rem; margin: 0; }
.golf-top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: .6rem; text-align: left; }
/* Set for Class, in the banner like every other activity (Ken, 2026-10-21): teachers arrive via the taster and "Play the full game"
   and never saw the small chip on the hole map, so that chip is gone and this is the one way in. Frosted, in the drawing's own
   indigo, so it sits in the banner's sky rather than on top of it (Ken: the solid button didn't fit).
   Ken, 2026-10-27: at the bottom right of the banner, where it's easier to see (moved down, not across). It says what it's for,
   and resting the mouse on it drops a picture of the live dashboard, like a tooltip. Phones and iPads can't hover: words only.
   Below 1080px the subtitle would run into it, so it sits on its own line under the subtitle instead. */
.golf-setclass { position: absolute; right: 2rem; bottom: -30px; z-index: 2; }
@media (max-width: 1079px) { .golf-setclass { position: relative; right: auto; bottom: auto; display: flex; justify-content: flex-end; margin-top: 12px; } }
.golf-class-why { font-weight: 500; color: #6366f1; }
@media (max-width: 349px) { .golf-class-why { display: none; } }
.golf-class-peek { position: absolute; top: calc(100% + 8px); right: 0; width: 400px; max-width: calc(100vw - 32px); padding: 8px; box-sizing: border-box;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 14px 34px rgba(15, 23, 42, .18); text-align: left;
    opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; }
.golf-class-btn:hover + .golf-class-peek, .golf-class-btn:focus-visible + .golf-class-peek { opacity: 1; visibility: visible; transform: none; }
.golf-class-peek img { display: block; width: 100%; height: auto; border-radius: 9px; }
.golf-class-cap { margin: 7px 4px 2px; font: 500 .8rem/1.35 'Poppins', sans-serif; color: #475569; }
@media (hover: none) { .golf-class-peek { display: none; } }
.golf-class-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(124, 135, 214, .4); color: #4338ca; text-decoration: none;
    font: 600 .85rem/1 'Poppins', sans-serif; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06); transition: background .15s, border-color .15s; }
.golf-class-btn:hover { background: #fff; border-color: #a5b4fc; }
#mapSet { display: none !important; }
html[data-classroom] .af, html[data-classroom] .golf-top-row, html[data-classroom] .golf-setclass, html[data-classroom] #mapReset, html[data-classroom] #map3d, html[data-classroom] #ask3d, html[data-classroom] #mapSet, html[data-classroom] #auth-buttons, html[data-classroom] #user-menu { display: none !important; }
.golf-chip.golf-class { background: #eef2ff; color: #3730a3; }
a.golf-chip-btn { text-decoration: none; }
html[data-golfview] body { margin: 0; overflow: hidden; background: #0b1220; }
html[data-golfview] header, html[data-golfview] footer, html[data-golfview] .af, html[data-golfview] .golf-page-header, html[data-golfview] #card, html[data-golfview] .golf-chips,
html[data-golfview] #muteBtn, html[data-golfview] #fullBtn, html[data-golfview] #trickBtn, html[data-golfview] #toast, html[data-golfview] #nextBtn, html[data-golfview] #map, html[data-golfview] #prompt { display: none !important; }
html[data-golfview] .golf-wrap { padding: 0; max-width: none; }
html[data-golfview] .golf { width: 100vw; }
html[data-golfview] .golf-stage { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.golf-back { color: #64748b; text-decoration: none; font-size: .9rem; }
.golf-back:hover { color: #1e293b; }
.golf-wrap { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
.golf-holes { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto 12px; font: 600 .8rem/1 'Poppins', sans-serif; color: #64748b; }   /* Try It: every hole a click away */
.golf-holes[hidden] { display: none; }
.golf-holes span { margin-right: 4px; }
.golf-holes button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: #334155; font: 600 .9rem/1 'Poppins', sans-serif; cursor: pointer; padding: 0; touch-action: manipulation; }
.golf-holes button:hover { border-color: #818cf8; }
.golf-holes button.on { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
@media (min-width: 701px) { .golf-wrap.with-holes .golf { width: min(100%, calc((100vh - 142px) * 16 / 9)); } }   /* room for the hole numbers above the game */
.golf { position: relative; width: min(100%, calc((100vh - 96px) * 16 / 9)); margin: 0 auto; font-family: 'Poppins', sans-serif; }
/* The hole map: inside the course frame, on the course's own grass; one screen per set, swiped across */
.golf-map { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; overflow: hidden;
    background: #4E9A41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Crect width='46' height='46' fill='%234E9A41'/%3E%3Cpath d='M7 12l2-6M21 33l2-6M35 15l2-6M13 42l2-6M41 38l2-6' stroke='%235BA94C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M29 7l1-4M4 27l1-4M38 26l1-4M24 20l1-4' stroke='%2343853A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat; }
.golf-map::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .08) 0%, transparent 55%, rgba(8, 40, 8, .32) 100%); }
.golf-map-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 14px 14px 0; }
.golf-map-top .golf-chip { white-space: nowrap; }
.golf-map-title { font-weight: 700 !important; }
.golf-map-gap { flex: 1; }
.golf-screens { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.golf-screens::-webkit-scrollbar { display: none; }
.golf-screens.dragging { scroll-snap-type: none; cursor: grabbing; }
.golf-screen { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 4px 74px; box-sizing: border-box; }
.golf-map-note { position: absolute; z-index: 4; left: 0; right: 0; top: 60px; width: max-content; max-width: calc(100% - 28px); margin: 0 auto; display: flex; align-items: center; gap: 6px;
    background: #fff; color: #1e293b; font: 600 .85rem/1.2 'Poppins', sans-serif; padding: 9px 14px; border-radius: 20px; box-shadow: 0 4px 14px rgba(8, 30, 8, .3); pointer-events: none; }
.golf-map-note svg { width: 14px; height: 14px; flex: none; color: #475569; }
.golf-ask { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; background: rgba(8, 30, 8, .35); }
.golf-ask-card { width: min(340px, 100%); max-height: 100%; box-sizing: border-box; overflow: auto; background: #fff; border-radius: 18px; padding: 14px; text-align: center; box-shadow: 0 16px 40px rgba(8, 30, 8, .35); }
.golf-ask-card img { display: block; width: 100%; height: auto; border-radius: 12px; }
.golf-ask-card p { margin: 12px 0; font: 700 1.25rem/1.2 'Poppins', sans-serif; color: #1e293b; }
.golf-ask-btns { display: flex; gap: 10px; justify-content: center; }
.golf-ask-btns .golf-btn { height: 46px; font-size: 1.05rem; padding: 0 22px; }
.golf-btn.golf-btn-quiet { background: #eef2ff; color: #4338ca; box-shadow: none; }
.golf-map-note.nudge { animation: golfNudge .45s ease-in-out; }
.golf-screen-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tile-gap, 14px); width: calc(var(--cols, 2) * var(--tile-w, 300px) + (var(--cols, 2) - 1) * var(--tile-gap, 14px)); max-width: 100%; }
.golf-tile { position: relative; display: flex; flex-direction: column; width: var(--tile-w, 300px); text-align: left; background: #fff; border: 0; border-radius: 14px; padding: 0; overflow: hidden;
    cursor: pointer; font: inherit; color: inherit; box-shadow: 0 8px 20px rgba(8, 30, 8, .32); transition: transform .16s ease, box-shadow .16s ease; }
.golf-tile:hover, .golf-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(8, 30, 8, .4); }
.golf-tile-pic { position: relative; display: block; aspect-ratio: 16 / 9; background: #4E9A41; overflow: hidden; }
.golf-tile-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.golf-tile:hover .golf-tile-pic img { transform: scale(1.05); }
.golf-tile-num { position: absolute; top: 8px; left: 8px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: rgba(255, 255, 255, .96);
    color: #1e293b; font: 700 .9rem/28px 'Poppins', sans-serif; text-align: center; box-shadow: 0 2px 8px rgba(15, 23, 42, .2); }
.golf-tile-stars { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 7px; border-radius: 13px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 8px rgba(15, 23, 42, .2); }
.gs { width: 16px; height: 16px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linejoin: round; flex: none; }
.gs.on { fill: #f59e0b; stroke: #d97706; }
#mapStats { display: inline-flex; align-items: center; gap: 5px; }
#mapStats .gs { width: 15px; height: 15px; }
.golf-stars { display: inline-flex; align-items: center; gap: 2px; padding: 6px 9px; }
.golf-stars .gs { width: 15px; height: 15px; }
.golf-tile-tag { position: absolute; left: 8px; bottom: 8px; font: 600 .7rem/1 'Poppins', sans-serif; padding: 5px 9px; border-radius: 999px; background: #eef2ff; color: #4338ca; box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
.golf-tile-tag.t-short { background: #ccfbf1; color: #0f766e; }
.golf-tile-tag.t-timing { background: #fef3c7; color: #92400e; }
.golf-tile-tag.t-3d { background: #f3e8ff; color: #6b21a8; }
.golf-tile-tag.t-puzzle { background: #ffe4e6; color: #9f1239; }
.golf-tile-tag.t-angle { background: #e0f2fe; color: #075985; }
.golf-tile-tag.t-two { background: #dcfce7; color: #166534; }
.golf-tile-lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .4); }
.golf-tile-lock span { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .95); display: grid; place-items: center; color: #475569; box-shadow: 0 4px 12px rgba(15, 23, 42, .3); }
.golf-tile-lock svg { width: 21px; height: 21px; }
.golf-tile.is-locked { cursor: default; }
.golf-tile.is-locked:hover { transform: none; box-shadow: 0 8px 20px rgba(8, 30, 8, .32); }
.golf-tile.is-locked .golf-tile-pic img { filter: grayscale(.55) brightness(.9); transform: none; }
.golf-tile-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px 10px; min-width: 0; }
.golf-tile-name, .golf-tile-maths { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.golf-tile-name { font: 700 .95rem/1.25 'Poppins', sans-serif; color: #1e293b; }
.golf-tile-maths { font: 500 .78rem/1.3 'Poppins', sans-serif; color: #64748b; }
.golf-tile.is-locked .golf-tile-name, .golf-tile.is-locked .golf-tile-maths { color: #94a3b8; }
.golf-tile.just-done .golf-tile-stars { animation: golfBadge .6s cubic-bezier(.3, 1.6, .5, 1); }
.golf-tile.just-opened { animation: golfGlow 1.6s ease-out 2; }
.golf-tile.is-complete { box-shadow: 0 0 0 3px #F5B93B, 0 8px 20px rgba(8, 30, 8, .32); }
.golf-tile.is-complete:hover, .golf-tile.is-complete:focus-visible { box-shadow: 0 0 0 3px #F5B93B, 0 14px 28px rgba(8, 30, 8, .4); }
.golf-tile.is-complete .golf-tile-stars { padding-left: 4px; box-shadow: 0 0 0 1.5px #F5B93B, 0 2px 8px rgba(15, 23, 42, .2); }
.golf-gem { width: 19px; height: 19px; flex: none; margin-right: 1px; overflow: visible; }
.golf-gem .glint { opacity: 0; }
.golf-map-arrow { position: absolute; z-index: 3; top: 50%; width: 46px; height: 46px; margin-top: -14px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #1e293b;
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(8, 30, 8, .35); transition: opacity .2s, transform .15s; }
.golf-map-arrow:hover { transform: scale(1.06); }
.golf-map-arrow svg { width: 24px; height: 24px; }
.golf-map-arrow.prev { left: 14px; } .golf-map-arrow.next { right: 14px; }
.golf-map-arrow[disabled] { opacity: 0; pointer-events: none; }
.golf-map-tabs { position: relative; z-index: 2; display: flex; justify-content: center; gap: 2px; padding: 4px 12px 12px; }
.golf-map-dot { width: 26px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.golf-map-dot::before { content: ''; width: 9px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .5); transition: width .2s, background .2s; }
.golf-map-dot.on::before { width: 24px; background: #fff; }
.golf-map-dot:hover::before { background: rgba(255, 255, 255, .85); }
.golf-map-reset { position: absolute; z-index: 2; right: 14px; bottom: 14px; border: 0; background: none; color: rgba(255, 255, 255, .7); font: 500 .75rem/1 'Poppins', sans-serif; cursor: pointer; padding: 6px; }
.golf-map-reset:hover { color: #fff; text-decoration: underline; }
.golf-map.fade { animation: golfFade .35s ease-out; }
.golf.on-map .golf-sound { display: none; }
.golf.on-map .golf-full { z-index: 7; left: 14px; }
.golf-chip-btn { pointer-events: auto; cursor: pointer; border: 0; display: inline-flex; align-items: center; gap: 5px; }
.golf-sign { font: 700 2.5rem/1.1 'Poppins', sans-serif; color: #b45309; margin-right: 2px; }
.golf-trick { position: absolute; top: 56px; left: 14px; }
.golf-trick .plus { display: none; }
.golf-trick.wide .plus { display: inline; }
.golf-found { position: absolute; bottom: 20px; left: 114px; display: inline-flex; align-items: center; gap: 4px; pointer-events: none; }   /* by the sound and full-screen buttons: the top is the prompt's (with its shot dots) */
.golf-found .fl { font-weight: 600; color: #475569; font-size: .78rem; margin: 0 3px 0 8px; }
.golf-found .fl:first-child { margin-left: 0; }
.golf-found .fd { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #94a3b8; box-sizing: border-box; }
.golf-found .fd.on { background: #7c3aed; border-color: #7c3aed; }
.golf-found .fs { width: 16px; height: 16px; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linejoin: round; }
.golf-found .fs.on { fill: #f59e0b; stroke: #d97706; }
.golf-found .fx { color: #b45309; font-weight: 700; margin-left: 2px; }
.golf-chip-btn:hover { background: #fff; color: #4338ca; }
.golf-chip-btn svg { width: 14px; height: 14px; }
.golf-toast .golf-toast-new { color: #4338ca; font-weight: 600; }
.golf-toast .golf-toast-star { color: #b45309; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; }
.golf-toast .golf-toast-star .gs { width: 15px; height: 15px; }
@keyframes golfFade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes golfNudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes golfBadge { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes golfGlow { 0% { box-shadow: 0 0 0 0 rgba(255, 236, 140, .95), 0 8px 20px rgba(8, 30, 8, .32); } 100% { box-shadow: 0 0 0 14px rgba(255, 236, 140, 0), 0 8px 20px rgba(8, 30, 8, .32); } }
@media (max-width: 700px) {
    .golf-map-top { padding: 10px 10px 0; gap: 6px; }
    .golf-map-top #mapStats { display: none; }
    .golf-screen { padding: 2px 40px; gap: 6px; }
    .golf-map-arrow { width: 32px; height: 32px; margin-top: -8px; }
    .golf-map-arrow svg { width: 18px; height: 18px; }
    .golf-map-arrow.prev { left: 5px; } .golf-map-arrow.next { right: 5px; }
    .golf-map-tabs { padding: 2px 8px 6px; gap: 0; }
    .golf-map-note { top: 46px; font-size: .75rem; padding: 7px 11px; }
    .golf-ask { padding: 8px; }
    .golf-ask-card { width: min(250px, 100%); padding: 10px; border-radius: 14px; }
    .golf-ask-card img { width: 66%; margin: 0 auto; }
    .golf-ask-card p { margin: 8px 0; font-size: 1rem; }
    .golf-ask-btns .golf-btn { height: 40px; font-size: .95rem; padding: 0 16px; }
    .golf-map-reset { display: none; }
    .golf-tile-body { padding: 5px 8px 7px; }
    .golf-tile-name { font-size: .8rem; }
    .golf-tile-maths { font-size: .66rem; }
    .golf-tile-num { top: 5px; left: 5px; min-width: 22px; height: 22px; line-height: 22px; font-size: .75rem; padding: 0 6px; }
    .golf-tile-stars { top: 5px; right: 5px; height: 20px; padding: 0 5px; }
    .golf-tile-stars .gs { width: 12px; height: 12px; }
    .golf-gem { width: 15px; height: 15px; }
    .golf-stars { padding: 5px 7px; }
    .golf-stars .gs { width: 12px; height: 12px; }
    .golf-tile-tag { left: 5px; bottom: 5px; font-size: .58rem; padding: 4px 6px; }
}
.golf [hidden] { display: none !important; }
.golf-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
    background: #4E9A41; touch-action: none; -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); }
.golf-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.golf-chips { position: absolute; top: 14px; left: 14px; display: flex; gap: 8px; pointer-events: none; }
.golf-chip { background: rgba(255, 255, 255, .95); color: #1e293b; font: 600 .85rem/1 'Poppins', sans-serif;
    padding: 8px 12px; border-radius: 20px; box-shadow: 0 2px 8px rgba(15, 23, 42, .15);
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.golf-prompt { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: #fff; color: #1e293b;
    font: 700 1.15rem/1.2 'Poppins', sans-serif; padding: 10px 22px; border-radius: 24px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18); white-space: nowrap; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }   /* the shot dots on top, any prompt under them: no wider than the prompt alone */
.golf-prompt[hidden] { display: none; }
.golf-prompt.dots-only { padding: 9px 13px; }
/* three tries at a gem: a dot dims for each maths miss */
.golf-dots { display: inline-flex; gap: 6px; }
.golf-dots[hidden] { display: none; }
.golf-dots i { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7dd3fc 0 22%, #0ea5e9 60%, #0369a1); box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.golf-dots i.used { background: transparent; box-shadow: inset 0 0 0 2px #cbd5e1; transform: scale(.82); }
.golf-dots .golf-gem { width: 17px; height: 17px; margin: 0 0 0 1px; transition: filter .3s ease, opacity .3s ease; }
.golf-dots .golf-gem .glint { animation: none; }
.golf-dots.spent .golf-gem { filter: grayscale(1); opacity: .4; }
.golf-prompt-text:empty { display: none; }
.golf-stats-sep { margin: 0 2px; opacity: .55; }
.golf-toast-gem { display: flex !important; align-items: center; justify-content: center; gap: 5px; }
.golf-toast-gem .golf-gem { width: 17px; height: 17px; }
.golf-card { position: absolute; top: 14px; right: 14px; width: 216px; background: #fff; border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .22); padding: 12px; display: flex; flex-direction: column; gap: 10px;
    transition: opacity .2s; }
.golf-card.busy { opacity: .55; pointer-events: none; }
.golf-set, .golf-tee { display: flex; flex-direction: column; gap: 10px; }
.golf-spin { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; }
.golf-digit { position: relative; cursor: text; border-radius: 10px; transition: background .2s, color .2s; }
.golf-set.fine #tVal { background: #eef2ff; color: #4f46e5; }   /* fine pull: the tenths are moving */
.golf-set.unset .golf-digit, .golf-set.unset .golf-dot { color: #cbd5e1; }   /* nothing set yet: grey with a cursor, like an empty box to type in */
.golf-set.unset #mVal::before { content: ''; position: absolute; left: 10px; top: 18%; bottom: 18%; width: 3px; border-radius: 2px; background: #4f46e5; }
.golf-set.cue .golf-spin { border-radius: 16px; box-shadow: 0 0 0 3px #c7d2fe; }   /* hole 1's "Type how far it is" */
@keyframes golfCaret { 50% { opacity: 0; } }
@keyframes golfCue { 0%, 100% { box-shadow: 0 0 0 3px #c7d2fe; } 50% { box-shadow: 0 0 0 8px rgba(199, 210, 254, .3); } }
.golf-type { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 58px; box-sizing: border-box; border: 2px solid #818cf8; border-radius: 14px;
    background: #fff; color: #1e293b; font: 700 2.2rem/1 'Poppins', sans-serif; text-align: center; padding: 0 8px; outline: none; box-shadow: 0 6px 18px rgba(79, 70, 229, .25); font-variant-numeric: tabular-nums; }
.golf-coach { position: absolute; right: calc(100% + 12px); bottom: 14px; display: flex; align-items: center; gap: 6px; background: #fff; color: #4338ca; font: 700 1rem/1 'Poppins', sans-serif;
    padding: 10px 12px 10px 16px; border-radius: 22px; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); white-space: nowrap; pointer-events: none; animation: golfPoint 1s ease-in-out infinite; }
.golf-coach svg { width: 22px; height: 22px; }
@keyframes golfPoint { 0%, 100% { translate: 0 0; } 50% { translate: 7px 0; } }
@keyframes golfPointDown { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
.golf-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.golf-arrow { width: 64px; height: 40px; border: 0; border-radius: 12px; background: #eef2ff; color: #4f46e5;
    display: grid; place-items: center; cursor: pointer; touch-action: manipulation; padding: 0; }
.golf-arrow:hover { background: #e0e7ff; }
.golf-arrow:active { transform: scale(.95); }
.golf-arrow svg { width: 24px; height: 24px; }
.golf-digit { font: 700 2.5rem/1.1 'Poppins', sans-serif; color: #1e293b; min-width: 64px; text-align: center;
    font-variant-numeric: tabular-nums; }
.golf-dot, .golf-unit { align-self: center; font-family: 'Poppins', sans-serif; }
.golf-dot { font-weight: 700; font-size: 2.5rem; line-height: 1; color: #1e293b; margin-top: 4px; }
.golf-unit { font-weight: 600; font-size: 1.2rem; color: #64748b; margin-left: 2px; }
.golf-unit.deg { font-size: 2.3rem; font-weight: 700; line-height: 1; margin: -14px 0 0 1px; }   /* the degree sign, up by the digits' tops */
.golf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }   /* space golf: two numbers, the angle and the distance */
.golf-pair button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 7px; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; cursor: pointer; touch-action: manipulation; }
.golf-pair button span { font: 600 .68rem/1 'Poppins', sans-serif; color: #64748b; letter-spacing: .05em; text-transform: uppercase; }
.golf-pair button b { font: 700 1.05rem/1.1 'Poppins', sans-serif; color: #1e293b; font-variant-numeric: tabular-nums; }
.golf-pair button.on { border-color: #818cf8; background: #eef2ff; }
.golf-pair button.on span { color: #4f46e5; }
.golf-label { font: 600 .78rem/1 'Poppins', sans-serif; color: #64748b; text-align: center; letter-spacing: .05em; text-transform: uppercase; }
.golf-note { font: 500 .85rem/1.3 'Poppins', sans-serif; color: #475569; text-align: center; }
.golf-btn { height: 54px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff; font: 700 1.25rem/1 'Poppins', sans-serif; cursor: pointer; padding: 0 26px;
    box-shadow: 0 4px 12px rgba(118, 75, 162, .35); touch-action: manipulation; }
.golf-btn:hover { filter: brightness(1.07); }
.golf-btn:active { transform: translateY(1px); }
/* a secret's glint (js: secretGlint): a twinkle every few seconds; never in the teacher's picture, never for reduced motion */
.golf-secret-glint { opacity: 0; pointer-events: none; }
.golf-secret-aura { opacity: .55; pointer-events: none; }   /* the soft glow on a secret's main spot: still for reduced motion, breathing otherwise */
html[data-golfview] .golf-secret-glint, html[data-golfview] .golf-secret-aura { display: none; }
/* "See how it's done": a quiet link under Putt (js: demoBtn) */
.golf-demo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; margin-top: -3px; padding: 4px 9px; border: 0; border-radius: 8px; background: none; color: #4f46e5; font: 600 .86rem/1.2 'Poppins', sans-serif; cursor: pointer; }
.golf-demo svg { width: 13px; height: 13px; fill: currentColor; }
.golf-demo:hover { background: #eef2ff; }
.golf-demo:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }
.golf-demo[hidden] { display: none; }
/* after a second maths miss, Putt fills up before it can go again (js: setCool) */
.golf-card.cooling .golf-btn { position: relative; overflow: hidden; cursor: default; }
.golf-card.cooling .golf-btn:hover { filter: none; }
.golf-card.cooling .golf-btn:active { transform: none; }
.golf-card.cooling .golf-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); transform-origin: 100% 50%; animation: golfCool var(--cool, 1s) linear forwards; pointer-events: none; }
@keyframes golfCool { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.golf-next:active { transform: translateX(-50%) translateY(1px); }
.golf-next.corner:active { transform: translateY(1px); }
.golf-toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: #fff; color: #1e293b;
    font: 700 1.8rem/1.2 'Poppins', sans-serif; padding: 16px 32px; border-radius: 20px; text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25); pointer-events: none; white-space: nowrap; }
.golf-toast.good { color: #047857; }
.golf-toast small { display: block; font: 500 1rem/1.4 'Poppins', sans-serif; color: #64748b; margin-top: 4px; }
.golf-toast.show { animation: golfPop .22s ease-out; }
.golf-next { position: absolute; left: 50%; top: calc(42% + 78px); transform: translateX(-50%); }
.golf-next.corner { top: auto; left: auto; bottom: 14px; right: 14px; transform: none; height: 46px; font-size: 1.05rem; }
.golf-icon { position: absolute; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .95); color: #334155; display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .15); padding: 0; }
.golf-icon svg { width: 20px; height: 20px; }
.golf-sound { left: 14px; }
.golf-full { left: 64px; }
.golf-score { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; background: rgba(15, 23, 42, .38); }
.golf-score-card { background: #fff; border-radius: 20px; padding: 16px 22px 18px; width: min(700px, 100%); max-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .3); text-align: center; }
.golf-score-card h2 { font: 700 1.4rem/1.2 'Poppins', sans-serif; margin: 0 0 10px; color: #1e293b; }
.golf-score-tables { display: flex; gap: 26px; width: 100%; min-height: 0; overflow-y: auto; margin-bottom: 14px; }
.golf-score-card table { flex: 1; min-width: 0; align-self: flex-start; border-collapse: collapse; font: 500 .88rem/1.2 'Poppins', sans-serif; color: #334155; font-variant-numeric: tabular-nums; }
.golf-score-card th { font-weight: 600; color: #64748b; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; }
.golf-score-card td { padding: 4px 6px; border-top: 1px solid #eef2f7; }
.golf-score-card .golf-btn { flex: none; }
.golf-score-card td:first-child, .golf-score-card th:first-child { text-align: left; }
.golf-score-card tr.total td { font-weight: 700; color: #1e293b; border-top: 2px solid #e2e8f0; }
.golf-score-card .under { color: #047857; font-weight: 700; }
.golf-score-card td.stars { white-space: nowrap; }
.golf-score-card td.stars .gs { width: 13px; height: 13px; vertical-align: -2px; }
.golf :focus-visible { outline: 3px solid #4A90E2; outline-offset: 2px; }
.golf .t { font-family: 'Poppins', sans-serif; }
.golf .ctl { cursor: pointer; }
#golf:fullscreen { width: 100vw; height: 100vh; max-width: none; background: #0b1220; }
#golf:fullscreen .golf-stage { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
#golf:-webkit-full-screen { width: 100vw; height: 100vh; max-width: none; background: #0b1220; }
#golf:-webkit-full-screen .golf-stage { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
@keyframes golfPop { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
    .golf .flag { animation: golfWave 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
    .golf .sails { animation: golfSpin 11s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .golf .pulse { animation: golfPulse 1.5s ease-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .golf-set.unset #mVal::before { animation: golfCaret 1.1s steps(1) infinite; }
    .golf-set.cue .golf-spin { animation: golfCue 1.6s ease-in-out infinite; }
    .golf .finger { animation: golfFinger 2.2s ease-in-out infinite; }
    .golf .shimmer { animation: golfShimmer 1.2s linear infinite; }
    .golf .lamp { animation: golfLamp 2.6s ease-in-out infinite; }
    .golf .tail { animation: golfTail 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 0; }
    .golf-page-header .bob { animation: golfBob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .golf-gem .glint { animation: golfGlint 4.8s ease-in-out var(--glint, 0s) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .golf-secret-glint { animation: golfSecretGlint 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .golf-bank-glint .golf-secret-glint { animation-name: golfSecretGlintRare; animation-duration: 10s; }   /* Spinning paddle's bounce point: one quiet twinkle every 10 s and no glow (Ken: the usual glint was too obvious there) */
    .golf-secret-aura { animation: golfAura 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
    .golf-tile.just-gem .golf-gem { animation: golfGemIn .7s cubic-bezier(.3, 1.6, .5, 1) .3s both; }
    .golf-tile.just-full { animation: golfFullFlash 1.3s ease-out .2s 2; }   /* every star on the hole: a gold burst and a shine across it */
    .golf-tile.just-full .golf-tile-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 246, 200, .75) 50%, transparent 70%); transform: translateX(-110%); animation: golfShine 1.2s ease-out .45s both; pointer-events: none; }
}
@keyframes golfAura { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: .85; transform: scale(1.12); } }
@keyframes golfSecretGlint { 0%, 78%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 87% { opacity: 1; transform: scale(1.3) rotate(45deg); } 96% { opacity: 0; transform: scale(.45) rotate(90deg); } }
@keyframes golfSecretGlintRare { 0%, 94%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 97% { opacity: .9; transform: scale(1.1) rotate(45deg); } 99.6% { opacity: 0; transform: scale(.45) rotate(90deg); } }   /* the same flash (about half a second), smaller, once in 10 s */
@keyframes golfGlint { 0%, 84%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 90% { opacity: 1; transform: scale(1.1) rotate(45deg); } 96% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes golfFullFlash { 0% { box-shadow: 0 0 0 3px #F5B93B, 0 0 0 3px rgba(255, 214, 102, .95), 0 8px 20px rgba(8, 30, 8, .32); } 100% { box-shadow: 0 0 0 3px #F5B93B, 0 0 0 22px rgba(255, 214, 102, 0), 0 8px 20px rgba(8, 30, 8, .32); } }
@keyframes golfShine { to { transform: translateX(110%); } }
@keyframes golfGemIn { 0% { transform: scale(0) rotate(-35deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes golfWave { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-9deg); } }
@keyframes golfSpin { to { transform: rotate(360deg); } }
@keyframes golfPulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes golfFinger { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 62% { transform: translate(-84px, 30px); opacity: 1; } 85%, 100% { transform: translate(-84px, 30px); opacity: 0; } }
@keyframes golfShimmer { to { stroke-dashoffset: -16; } }
@keyframes golfLamp { 50% { opacity: .55; } }
@keyframes golfTail { 50% { transform: rotate(7deg); } }
@keyframes golfBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 700px) {
    .golf-page-header { padding: 22px 0 30px; }
    .golf-page-header h1 { font-size: 1.7rem; }
    .golf-wrap { padding: 0 12px; }
    .golf-holes { gap: 5px; margin-bottom: 10px; }
    .golf-holes button { width: 30px; height: 30px; font-size: .82rem; }
    .golf { width: 100%; }
    .golf-stage { aspect-ratio: 4 / 3; border-radius: 16px; }
    .golf-card { position: relative; top: auto; right: auto; width: auto; margin-top: 12px; box-shadow: 0 4px 16px rgba(15, 23, 42, .12); }
    .golf-coach { right: 10px; bottom: calc(100% + 8px); padding: 8px 12px; font-size: .9rem; animation-name: golfPointDown; }
    .golf-coach svg { transform: rotate(90deg); }
    .golf-type { width: 130px; height: 52px; font-size: 1.9rem; }
    .golf-set, .golf-tee { flex-direction: row; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .golf-set .golf-btn, .golf-tee .golf-btn { flex: 1; max-width: 180px; }
    .golf-demo { flex-basis: 100%; margin-top: -6px; }
    .golf-pair { flex-basis: 100%; max-width: 340px; }
    .golf-prompt { top: 52px; font-size: .95rem; padding: 7px 14px; gap: 4px; }
    .golf-dots { gap: 5px; }
    .golf-dots i { width: 11px; height: 11px; }
    .golf-dots .golf-gem { width: 15px; height: 15px; }
    .golf.prompt-low .golf-prompt { top: auto; bottom: 12px; }   /* hole 1, the ball in the top rows: keep it in sight */
    .golf-chip { font-size: .72rem; padding: 6px 9px; }
    .golf-toast { font-size: 1.3rem; padding: 12px 22px; }
    .golf-next { top: calc(42% + 60px); height: 46px; font-size: 1.05rem; }
    .golf-full { display: none; }
    .golf-found { top: auto; bottom: 14px; left: 64px; }
    .golf-trick { top: auto; bottom: 14px; left: 64px; }
    .golf-sign { font-size: 2.1rem; }
    .golf-found .fl { display: none; }
    .golf-found .fs { width: 13px; height: 13px; }
    .golf-score { padding: 8px; }
    .golf-score-card { padding: 10px 14px 12px; border-radius: 16px; }
    .golf-score-card h2 { font-size: 1.1rem; margin-bottom: 6px; }
    .golf-score-tables { flex-direction: column; gap: 0; margin-bottom: 10px; }
    .golf-score-card table { font-size: .8rem; align-self: stretch; }
    .golf-score-card table + table tr:first-child { display: none; }
}
@media (max-width: 380px) {
    .golf-arrow { width: 54px; }
    .golf-digit { min-width: 54px; font-size: 2.1rem; }
}