/* Lovebug Putt-Putt: the stage, the hole badge and the scorecard. The
   header, controls and buttons borrow the pool room's classes. */

#golfStage{height:clamp(320px,58vh,660px);border-radius:24px;overflow:hidden;touch-action:none;background:#2b2244;box-shadow:0 0 0 1px rgba(255,143,196,.2),0 20px 50px rgba(18,12,26,.5)}
#golfStage canvas{display:block;width:100%;height:100%;cursor:grab}
#golfStage canvas.is-charging{cursor:ns-resize}
#golfMessage{color:#8a5f74;min-height:1.5em;margin:0}
.golf-hole{flex-direction:column;gap:2px;max-width:min(360px,70%);padding:8px 13px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(18,12,30,.72);color:#f2e6ef;backdrop-filter:blur(6px)}
.golf-hole b{font:17px Georgia,serif}
.golf-hole small{font-size:12px;color:#d6c0e6}

.golf-card{padding:16px 0}
.golf-card-scroll{overflow-x:auto;border:1px solid #e8cdd8;border-radius:14px;background:#fffaf6}
.golf-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;color:#5f2b44}
.golf-table th,.golf-table td{padding:8px 6px;text-align:center;border-bottom:1px solid #f0dee6}
.golf-table tr:last-child th,.golf-table tr:last-child td{border-bottom:0}
.golf-table th:first-child{text-align:left;padding-left:14px;white-space:nowrap}
.golf-table thead th,.golf-table tr:first-child th{font-size:12px;letter-spacing:.08em;color:#a8859a}
.golf-table th.is-current{color:#b34978;background:#fff0f6;border-radius:8px}
.golf-par td,.golf-par th{font-size:13px;color:#a8859a}
.golf-player.is-active th{color:#b34978}
.golf-player.is-active{background:#fff5f9}
.golf-player td{font-weight:600}
.golf-player .score-ball{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;box-shadow:inset -2px -2px 3px rgba(0,0,0,.25)}
.golf-table .is-ace{color:#fff;background:radial-gradient(circle,#ff5f8f 0 55%,transparent 56%)}
.golf-table .is-under{color:#b34978;text-decoration:underline wavy #f5a3c3}
.golf-table .is-over{color:#8a6d7a}
.golf-table .is-pickup{color:#b9a3ae;font-style:italic}
.golf-table .is-live{color:#b9a3ae;font-style:italic;font-weight:400}
.golf-total{font:19px Georgia,serif;color:#a8325f}
@media(max-width:600px){.golf-hole{max-width:62%;padding:6px 10px}.golf-hole b{font-size:15px}.golf-hole small{display:none}}

/* The full-course tab: the tray opens into the ball picker and the card. */
.golf-tray{flex-wrap:wrap;max-width:min(640px,calc(100vw - 28px))}
.golf-tray .golf-card{flex-basis:100%;padding:4px 0 0}
.golf-tray .golf-card-scroll{background:rgba(255,250,246,.96)}
.hud-card .hud-dots b{font:17px Georgia,serif;color:#ffd9ec}

/* A party's card: up to six rows. The names column stays put while the holes scroll. */
.golf-table.is-party th:first-child{position:sticky;left:0;z-index:1;background:inherit}
.golf-table.is-party tr{background:#fffaf6}
.golf-table.is-party .golf-player.is-active{background:#fff5f9}
.golf-table.is-party .golf-name{display:inline-block;max-width:9em;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.is-party .golf-player.is-winner th{color:#a8325f}
.is-party .golf-player.is-winner th::after{content:' ♛';color:#e8b04a}
@media(max-width:600px){
  .golf-table.is-party{min-width:0;font-size:12.5px}
  .golf-table.is-party th,.golf-table.is-party td{padding:5px 2px}
  .golf-table.is-party th:first-child{padding-left:8px;box-shadow:1px 0 0 #f0dee6}
  .golf-table.is-party .golf-name{max-width:6.2em}
  .golf-table.is-party th:first-child{padding-left:6px}
  .golf-table.is-party .golf-total{font-size:16px}
}

/* The full-course tab with a party: the turn up top, a small card per player under it. */
.hud.is-party{flex-wrap:wrap;justify-content:center;gap:6px;width:min(760px,calc(100vw - 24px))}
.hud.is-party .turn-badge{order:-1;text-align:center}
.hud.is-party::before{content:'';order:0;flex-basis:100%;height:0}
.hud.is-party .hud-card{order:1}
.hud.is-party .hud-card{min-width:0;flex:0 1 auto;max-width:9.5em;padding:5px 10px;border-top:3px solid var(--seat,#fff)}
.hud.is-party .hud-name{font-size:13px}
.hud.is-party .hud-dots{margin-top:3px}
.hud.is-party .hud-dots b{font-size:14px}
body:has(.hud.is-party) .toast{top:calc(max(14px, env(safe-area-inset-top)) + 150px)}
@media(max-width:720px){
  .hud.is-party{gap:4px;top:calc(max(14px, env(safe-area-inset-top)) + 50px)}
  body:has(.hud.is-party) .toast{top:calc(max(14px, env(safe-area-inset-top)) + 170px)}
  .hud.is-party .hud-card{max-width:7em;padding:4px 7px}
  .hud.is-party .hud-name{font-size:12px}
}