/* Golf Simulator — TV and phones (Kita 2026-10-07). Lush greens, sky blue, white and gold, a neon-green ball trail.
   ChatGPT art: /art/golf/ (courses, Jade, clubs) and /art/golf/kit/ (signs, leaderboard, stat tiles, markers…). */
:root { --green: #2bd96b; --neon: #39ff78; --gold: #ffd23d; --navy: #0b1f3a; --sky: #4fc3ff; }

/* ================= TV ================= */
.gtv { margin: 0; background: #0b1f14; overflow: hidden; color: #fff; font-family: 'Nunito', sans-serif; }
.stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; container-type: inline-size; background: #2a6a3a; }
.stage [hidden] { display: none !important; }
.course { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.stage .top { position: absolute; left: 1.2%; right: 1.2%; top: 1.6%; display: flex; align-items: center; gap: 1.2cqw; z-index: 20; }
.stage .codechip { margin-left: auto; display: flex; align-items: center; gap: .8cqw; padding: .5cqw .9cqw; border-radius: 1cqw; background: rgba(11,31,58,.88); border: .2cqw solid var(--neon); font-weight: 800; font-size: 1cqw; line-height: 1.2; }
.stage .codechip .qrmini { background: #fff; padding: .35cqw; border-radius: .6cqw; line-height: 0; }
.stage .codechip .qrmini img, .stage .codechip .qrmini canvas { width: 4.8cqw !important; height: 4.8cqw !important; }
.stage .codechip b { font-family: 'Fredoka', sans-serif; font-size: 2.2cqw; letter-spacing: .2em; color: var(--neon); }
.stage > .round { position: absolute; left: 22%; top: 2.6%; z-index: 20; padding: .5cqw 1.4cqw; border-radius: 99px; background: rgba(11,31,58,.88); border: .2cqw solid var(--neon); font: 700 1.4cqw 'Fredoka', sans-serif; color: #fff; }

.host { position: absolute; right: 0; bottom: 0; height: 66%; z-index: 9; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.45)); }
.host.bounce { animation: hb .5s; } @keyframes hb { 40% { transform: scale(1.04) translateY(-1%); } }
.bubble { position: absolute; right: 2%; top: 14%; z-index: 12; max-width: 22%; padding: 1cqw 1.4cqw; border-radius: 1.6cqw; background: #fff; color: #0b3a1f;
  font: 700 1.6cqw/1.25 'Fredoka', sans-serif; box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.35); }
.bubble.pop { animation: bpop .35s cubic-bezier(.2,1.6,.4,1); } @keyframes bpop { from { transform: scale(.4); opacity: 0; } }
.signimg { position: absolute; left: 50%; top: 10%; width: 40cqw; transform: translateX(-50%); z-index: 14; filter: drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.45)); animation: signpop .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes signpop { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.stage.intro .signimg { top: 30%; width: 52cqw; }

/* the clubhouse leaderboard */
.board { position: absolute; left: 1.2%; top: 12%; width: 15cqw; aspect-ratio: 846 / 1468; z-index: 8; background: url(/art/golf/kit/scoreboard.png) center / 100% 100% no-repeat; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.4)); }
.board .rows { position: absolute; left: 12%; right: 12%; top: 16%; bottom: 6%; display: grid; align-content: start; gap: .35cqw; }
.board .r { display: flex; align-items: center; gap: .45cqw; padding: .3cqw .4cqw; border-radius: .5cqw; font-weight: 900; font-size: 1cqw; background: rgba(0,0,0,.18); }
.board .r .pl { width: 1.3cqw; color: var(--gold); font: 700 1.1cqw 'Fredoka', sans-serif; } .board .r .em { font-size: 1.3cqw; }
.board .r .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board .r b { margin-left: auto; font: 700 1.3cqw 'Fredoka', sans-serif; color: var(--gold); }
.board .r.isup { background: rgba(57,255,120,.25); box-shadow: 0 0 0 .12cqw var(--neon); }

/* hole info */
.info { position: absolute; left: 1.2%; bottom: 3%; width: 15cqw; z-index: 8; display: grid; gap: .2cqw; padding: .8cqw 1cqw; border-radius: 1cqw; background: rgba(11,31,58,.86); border: .18cqw solid var(--neon); font-weight: 900; font-size: 1.05cqw; }
.info b { font: 700 1.25cqw 'Fredoka', sans-serif; color: var(--neon); } .info small { opacity: .75; }

/* who's up */
.up { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 1.2cqw; padding: .8cqw 1.8cqw .8cqw 1cqw; border-radius: 99px;
  background: rgba(11,31,58,.9); box-shadow: 0 0 0 .22cqw var(--neon), 0 0 2cqw rgba(57,255,120,.4); animation: upin .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes upin { from { transform: translate(-50%, 140%); } }
.up .em { font-size: 4cqw; } .up .nm { font: 700 2.4cqw/1.05 'Fredoka', sans-serif; } .up .tx { font-weight: 900; font-size: 1.2cqw; color: #c8ffd8; }
.up .t { margin-left: .8cqw; font: 700 2.6cqw 'Fredoka', sans-serif; color: var(--gold); }
.live { position: absolute; right: 24%; top: 13%; z-index: 10; padding: .4cqw 1.6cqw; border-radius: 1cqw; background: rgba(11,31,58,.85); border: .18cqw solid var(--neon); font: 700 3.4cqw 'Fredoka', sans-serif; text-shadow: 0 0 1.2cqw rgba(57,255,120,.8); }

/* the shot's numbers (stat tiles) */
.stats { position: absolute; left: 18%; right: 24%; bottom: 3%; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqw; }
.st { aspect-ratio: 515 / 320; background: center / 100% 100% no-repeat; display: grid; place-content: center; text-align: center; animation: stin .45s backwards cubic-bezier(.2,1.4,.4,1); }
.st:nth-child(2) { animation-delay: .1s; } .st:nth-child(3) { animation-delay: .2s; } .st:nth-child(4) { animation-delay: .3s; }
@keyframes stin { from { transform: translateY(60%); opacity: 0; } }
.st small { font-weight: 900; font-size: .95cqw; letter-spacing: .06em; color: #c8ffd8; } .st b { font: 700 3cqw/1 'Fredoka', sans-serif; } .st i { font-style: normal; font-weight: 800; font-size: .95cqw; opacity: .8; }
.niceshot { position: absolute; left: 44%; top: 22%; width: 26cqw; transform: translateX(-50%); z-index: 12; }
.niceshot.popin { animation: badge 1s cubic-bezier(.2,1.5,.4,1) both; } @keyframes badge { from { transform: translateX(-50%) scale(.2) rotate(-10deg); opacity: 0; } }
.callout { position: absolute; left: 44%; top: 26%; transform: translateX(-50%); z-index: 12; padding: .6cqw 2.4cqw; border-radius: 1.4cqw; font: 700 5cqw/1 'Fredoka', sans-serif; text-shadow: 0 .3cqw 0 rgba(0,0,0,.35); animation: badge .7s cubic-bezier(.2,1.5,.4,1) both; white-space: nowrap; }
.callout.water { background: linear-gradient(180deg, #4fc3ff, #1167c9); } .callout.ob { background: linear-gradient(180deg, #ff6a6a, #b5162c); }
.callout.cup { background: linear-gradient(180deg, #ffe26a, #e09a00); color: #3a2400; } .callout.rough { font-size: 3cqw; background: linear-gradient(180deg, #7aa83a, #3d6a1a); }

/* end of a hole */
.holeend { position: absolute; left: 20%; right: 25%; top: 14%; z-index: 13; padding: 1.6cqw 2cqw; border-radius: 1.6cqw; background: rgba(11,31,58,.93); box-shadow: 0 0 0 .25cqw var(--neon), 0 1cqw 3cqw rgba(0,0,0,.5); animation: upin2 .5s cubic-bezier(.2,1.3,.4,1); }
@keyframes upin2 { from { transform: scale(.6); opacity: 0; } }
.holeend h2 { margin: 0 0 .8cqw; text-align: center; font: 700 2.4cqw 'Fredoka', sans-serif; color: var(--neon); }
.holeend .rows { display: grid; gap: .45cqw; }
.holeend .r { display: flex; align-items: center; gap: 1cqw; padding: .5cqw 1cqw; border-radius: .8cqw; background: rgba(255,255,255,.07); font-weight: 900; font-size: 1.4cqw; animation: stin .4s backwards; }
.holeend .r:nth-child(2) { animation-delay: .15s; } .holeend .r:nth-child(3) { animation-delay: .3s; } .holeend .r:nth-child(n+4) { animation-delay: .45s; }
.holeend .r.first { background: linear-gradient(90deg, rgba(255,210,61,.35), rgba(57,255,120,.15)); }
.holeend .pl { width: 2.4cqw; font-size: 1.8cqw; } .holeend .em { font-size: 2cqw; } .holeend .ds { margin-left: auto; color: #c8ffd8; } .holeend b { min-width: 4cqw; text-align: right; font: 700 1.9cqw 'Fredoka', sans-serif; color: var(--gold); }

.ctl { position: absolute; right: 1.2%; top: 13%; z-index: 21; display: flex; gap: .6cqw; }

/* ---- lobby ---- */
.panel { position: absolute; left: 6%; right: 22%; top: 11%; bottom: 5%; z-index: 15; padding: 1.4cqw 2.4cqw; border-radius: 2cqw;
  background: rgba(11, 31, 58, .88); border: .3cqw solid var(--neon); box-shadow: 0 0 3cqw rgba(57,255,120,.35); display: grid; align-content: start; gap: 1cqw; backdrop-filter: blur(3px); }
.panel .title { width: 46%; justify-self: center; margin: -.4cqw 0 0; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.5)); }
.panel .cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2cqw; }
.how { margin: 0; padding-left: 2.2cqw; display: grid; gap: .7cqw; font-size: 1.45cqw; line-height: 1.3; } .how b { color: var(--neon); }
.join { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1cqw; }
.join .qr { background: #fff; padding: .6cqw; border-radius: .8cqw; width: 11cqw; } .join .qr img, .join .qr canvas { width: 100% !important; height: auto !important; display: block; }
.bigcode { font: 700 5.2cqw/1 'Fredoka', sans-serif; letter-spacing: .12em; color: var(--neon); }
.muted { color: #c8ffd8; font-weight: 800; font-size: 1.3cqw; }
.seats { display: flex; flex-wrap: wrap; gap: .6cqw; align-content: start; min-height: 9cqw; }
.seat { padding: .4cqw .9cqw; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 900; font-size: 1.3cqw; }
.lengths { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; }
.lengths button { padding: .8cqw; border-radius: 1cqw; border: .2cqw solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: 700 1.5cqw 'Fredoka', sans-serif; cursor: pointer; display: grid; gap: .2cqw; }
.lengths button small { font: 800 .95cqw 'Nunito', sans-serif; opacity: .8; }
.lengths button.on { border-color: var(--neon); background: rgba(57,255,120,.18); box-shadow: 0 0 1.2cqw rgba(57,255,120,.45); }
.panel .btn { font-size: 1.8cqw; justify-self: center; }

/* ---- the winner's screen ---- */
.wonshow { position: absolute; inset: 0; z-index: 15; background: url(/art/golf/kit/winner-stage.jpg) center / cover, #2a6a3a; }
.wonshow .wsign { position: absolute; left: 50%; top: 8%; width: 38cqw; transform: translateX(-50%); filter: drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.45)); animation: signpop .7s cubic-bezier(.2,1.5,.4,1); }
.wonshow h1 { position: absolute; left: 0; right: 0; top: 22%; margin: 0; text-align: center; font: 700 3cqw 'Fredoka', sans-serif; color: #fff; text-shadow: 0 .3cqw 0 #0b3a1f, 0 0 1.4cqw rgba(57,255,120,.9); }
.podium3 { position: absolute; left: 50%; transform: translateX(-50%); width: 38cqw; bottom: 17%; aspect-ratio: 1724 / 750; background: url(/art/golf/kit/winner-podium.png) center / 100% 100% no-repeat; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.4)); }
.podium3 .pp { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; text-align: center; animation: upin2 .6s ease-out backwards; }
.podium3 .pp .face { width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; font-size: 3.8cqw; background: radial-gradient(circle at 40% 35%, #fff, #d8ffe4); border: .3cqw solid var(--gold); box-shadow: 0 0 1.4cqw rgba(255,210,61,.8); }
.podium3 .pp b { font-weight: 900; font-size: 1.3cqw; text-shadow: 0 .2cqw .5cqw #000; white-space: nowrap; }
.podium3 .pp small { font: 700 1.5cqw 'Fredoka', sans-serif; color: var(--gold); text-shadow: 0 .2cqw .5cqw #000; }
.podium3 .p1 { left: 50%; top: 14%; } .podium3 .p1 .face { width: 8cqw; height: 8cqw; font-size: 5cqw; }
.podium3 .p2 { left: 17%; top: 30%; animation-delay: .3s; } .podium3 .p3 { left: 83%; top: 33%; animation-delay: .6s; }
.awards { position: absolute; left: 50%; bottom: 10.5%; transform: translateX(-50%); display: flex; gap: 1cqw; white-space: nowrap; }
.awards span { padding: .4cqw 1cqw; border-radius: 99px; background: rgba(11,31,58,.85); font-weight: 800; font-size: 1.1cqw; } .awards b { color: var(--gold); }
.wonshow .row { position: absolute; left: 0; right: 0; bottom: 2.5%; display: flex; justify-content: center; gap: 1cqw; }
.wonshow .btn { font-size: 1.6cqw; }
.stage:has(.wonshow:not([hidden])) .host { z-index: 16; } .stage:has(.wonshow:not([hidden])) .bubble { z-index: 17; }

/* ================= PHONE ================= */
.gphone { margin: 0; min-height: 100dvh; color: #fff; font-family: 'Nunito', sans-serif; overscroll-behavior: none;
  background: linear-gradient(180deg, rgba(8,30,20,.35), rgba(8,30,20,.9) 50%), url(/art/golf/course-drive.jpg) center top / cover fixed, #0b2a18; }
.gphone .phud { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 900; font-size: 1.1rem; }
.gphone .phud .pill { margin-left: auto; background: rgba(0,0,0,.4); padding: 6px 12px; border-radius: 99px; color: var(--gold); font: 700 1.2rem 'Fredoka', sans-serif; }
.gphone main { padding: 4px 12px 16px; display: grid; gap: 10px; max-width: 480px; margin: 0 auto; }
.gphone .card { padding: 14px; border-radius: 20px; background: rgba(11,31,58,.82); backdrop-filter: blur(4px); border: 2px solid rgba(57,255,120,.55); display: grid; gap: 10px; }
.gphone h1 { margin: 2px 0 0; text-align: center; font: 700 1.8rem/1.1 'Fredoka', sans-serif; color: var(--neon); text-shadow: 0 2px 0 #0b3a1f; }
.gphone p { margin: 0; text-align: center; font-size: 1.1rem; line-height: 1.4; }
.gphone .psign { width: 90%; max-width: 360px; justify-self: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.bigwait { font-size: 4rem; text-align: center; }
.holeinfo { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.holeinfo span { padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 900; font-size: .95rem; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.modes button { padding: 10px 6px; border-radius: 14px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: 800 1rem 'Nunito', sans-serif; cursor: pointer; }
.modes button.on { border-color: var(--neon); background: rgba(57,255,120,.2); }
.aimrow { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; align-items: center; }
.aimrow button { height: 52px; border: 0; border-radius: 14px; background: rgba(255,255,255,.16); color: #fff; font-size: 1.6rem; cursor: pointer; }
.aimbar { position: relative; height: 18px; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(57,255,120,.4), rgba(255,255,255,.15)); }
.aimbar i { position: absolute; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--neon); transform: translate(-50%, -50%); transition: left .12s; }
.aimlabel { text-align: center; font-weight: 900; font-size: .9rem; color: #c8ffd8; }
.pad { position: relative; height: 46vh; min-height: 300px; border-radius: 22px; touch-action: none; user-select: none; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 100%, #3fbf5f, #1d7a35 60%, #10512a); box-shadow: inset 0 0 0 3px rgba(255,255,255,.25); }
.pad .meter { position: absolute; left: 12px; top: 12px; bottom: 12px; width: 44px; background: url(/art/golf/kit/power-meter.png) center / 100% 100% no-repeat; }
.pad .meter .fill { position: absolute; left: 18%; right: 18%; bottom: 4%; border-radius: 99px; background: rgba(255,255,255,.55); mix-blend-mode: overlay; }
.pad .meter .now { position: absolute; left: -6px; right: -6px; height: 4px; background: #fff; box-shadow: 0 0 8px #fff; border-radius: 2px; }
.pad .meter .sweet { position: absolute; left: -12px; right: -12px; height: 6px; background: var(--gold); border-radius: 3px; box-shadow: 0 0 8px var(--gold); }
.pad .meter .sweet::after { content: '★'; position: absolute; right: -18px; top: -9px; color: var(--gold); font-size: 16px; }
.pad .ball { position: absolute; left: 50%; bottom: 14%; width: 54px; height: 54px; transform: translateX(-50%); background: url(/art/golf/ball.png) center / contain no-repeat; }
.pad .club { position: absolute; left: 50%; bottom: 14%; width: 110px; height: 110px; transform-origin: 50% 0; background: center / contain no-repeat; pointer-events: none; transition: transform .05s; }
.pad .hint { position: absolute; left: 64px; right: 12px; top: 14px; text-align: center; font: 700 1.15rem/1.25 'Fredoka', sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.pad .pct { position: absolute; right: 14px; bottom: 12px; font: 700 1.6rem 'Fredoka', sans-serif; color: var(--gold); text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.motionbox { display: grid; gap: 10px; justify-items: center; text-align: center; }
.motionbox .big { font-size: 5rem; }
.go { width: 100%; padding: 16px; border: 0; border-radius: 18px; font: 700 1.6rem 'Fredoka', sans-serif; color: #08301a; cursor: pointer; background: linear-gradient(180deg, #7dff9a, #24c24f); box-shadow: 0 6px 0 #0f6a2a; }
.go:active { transform: translateY(3px); }
.shotline { text-align: center; font: 700 2.2rem/1.1 'Fredoka', sans-serif; color: var(--gold); }
.pad .club { left: 38%; bottom: 20%; width: 100px; height: 100px; }
.modes { grid-template-columns: 1fr 1fr 1fr; } .modes button { font-size: .9rem; padding: 10px 4px; }

/* ---- body scan (phone propped up, camera on you) ---- */
.bodycam { position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden; }
.bodycam video, .bodycam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bodycam video { transform: scaleX(-1); filter: saturate(1.05) brightness(.95); }
.bstatus { position: absolute; left: 4%; right: 4%; top: 3%; padding: 14px 16px; border-radius: 20px; text-align: center; font: 700 1.9rem/1.15 'Fredoka', sans-serif;
  background: rgba(11,31,58,.82); box-shadow: 0 0 0 3px rgba(255,255,255,.35); transition: background .3s, box-shadow .3s; }
.bstatus.good { background: rgba(20,140,60,.88); box-shadow: 0 0 0 3px var(--neon), 0 0 30px rgba(57,255,120,.6); }
.bstatus.ready { background: linear-gradient(180deg, #ffe26a, #ffb300); color: #3a2400; box-shadow: 0 0 0 3px #fff, 0 0 40px rgba(255,210,61,.8); animation: pulse .7s infinite alternate; }
@keyframes pulse { to { transform: scale(1.04); } }
.bchecks { position: absolute; left: 4%; top: 20%; display: grid; gap: 8px; }
.bchecks span { padding: 7px 12px; border-radius: 99px; background: rgba(0,0,0,.55); font-weight: 900; font-size: 1rem; }
.bchecks span.ok { background: rgba(20,140,60,.85); }
.bresult { position: absolute; left: 6%; right: 6%; top: 34%; padding: 18px; border-radius: 22px; text-align: center; background: rgba(11,31,58,.9); box-shadow: 0 0 0 3px var(--neon), 0 0 40px rgba(57,255,120,.5); }
.bresult b { display: block; font: 700 2.4rem/1.1 'Fredoka', sans-serif; color: var(--neon); } .bresult span { font-size: 1.3rem; font-weight: 900; }
.bquit { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); padding: 10px 18px; border: 0; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; font: 800 1rem 'Nunito', sans-serif; }

/* TV: the player's body scan, live */
.bodypanel { position: absolute; right: 1.2%; bottom: 3%; width: 15cqw; aspect-ratio: 3 / 4; z-index: 11; border-radius: 1.2cqw; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, rgba(30,110,60,.85), rgba(6,20,40,.92)); box-shadow: 0 0 0 .2cqw var(--neon), 0 0 2cqw rgba(57,255,120,.4); }
.bodypanel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bodypanel b { position: absolute; left: 0; right: 0; top: 4%; text-align: center; font: 700 1.2cqw 'Fredoka', sans-serif; text-shadow: 0 .1cqw .3cqw #000; }
.bodypanel b.go2 { color: var(--neon); }
.bodypanel { right: 21%; }

/* ---- leaderboard fitted to the clubhouse board (2026-10-07: "the information isn't fitting… hanging off") ---- */
.board { top: 15%; width: 16cqw; }
.board .rows { left: 13%; right: 13%; top: 23%; bottom: 7%; gap: .3cqw; overflow: hidden; }
.board .r { gap: .4cqw; padding: .25cqw .4cqw; font-size: .95cqw; min-width: 0; }
.board .r .nm { flex: 1; min-width: 0; }
.board .r b { font-size: 1.15cqw; flex: none; }
.board .r .em { flex: none; }
.info { width: 16cqw; }
/* body scan screen, tidied: smaller message, checklist bottom-left, small ✕ top-right (off the mat) */
.bstatus { top: 2%; left: 3%; right: 15%; padding: 10px 12px; font-size: 1.35rem; border-radius: 16px; }
.bchecks { top: auto; bottom: 3%; left: 3%; gap: 6px; }
.bchecks span { font-size: .85rem; padding: 5px 10px; }
.bquit { left: auto; right: 3%; top: 2%; bottom: auto; transform: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 0; }
.bquit::before { content: '✕'; font-size: 1.3rem; }
.bresult { top: 30%; }
.bodypanel { bottom: 17%; right: 21%; width: 13cqw; }
.info { bottom: 7.5%; }
.pad .club { left: 30%; bottom: 24%; }
/* the wind-up gauge on the camera screen */
.bgauge { position: absolute; right: 4%; top: 22%; bottom: 22%; width: 54px; border-radius: 30px; overflow: hidden; background: rgba(0,0,0,.55); box-shadow: 0 0 0 3px #fff; }
.bgauge .bfill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #2bd96b, #ffd23d 70%, #ff8a1f); transition: height .08s linear; }
.bgauge b { position: absolute; left: 0; right: 0; bottom: -46px; text-align: center; font: 700 .8rem/1 'Fredoka', sans-serif; }
.bgauge.full { box-shadow: 0 0 0 3px #ffd23d, 0 0 30px #ffd23d; animation: pulse .4s infinite alternate; }
.bstatus.ready { font-size: 3rem; }
/* aiming (2026-10-07) */
.aimbar { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; height: 34px; font: 800 .7rem 'Nunito', sans-serif; letter-spacing: .08em; color: rgba(255,255,255,.55);
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(57,255,120,.45) 50%, rgba(255,255,255,.12)); touch-action: none; }
.aimbar::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; background: rgba(255,255,255,.6); }
.aimbar i { width: 30px; height: 30px; z-index: 1; }
.aimrow button { touch-action: none; }
.aimlabel { font-size: .95rem; color: #eaffef; }
.baim { position: absolute; left: 3%; right: 3%; bottom: 3%; z-index: 3; display: grid; gap: 6px; padding: 10px 12px; border-radius: 18px; background: rgba(11,31,58,.85); box-shadow: 0 0 0 2px rgba(57,255,120,.6); text-align: center; }
.baim .aimwords { font: 700 1rem 'Fredoka', sans-serif; } .baim small { font-weight: 800; font-size: .78rem; opacity: .8; }
.bchecks { bottom: auto; top: 16%; }
.bodycam.onmat .baim { display: none; }
/* the 3D course */
.c3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; }
.stage.three .course, .stage.three .scene { display: none; }
.stage.three .bodypanel { z-index: 11; }
.c3d { display: none; } .stage.three .c3d { display: block; }