/* Putt Royale — country-club mini golf */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #123220; color: #f4f1e4;
  font-family: "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  --lb-accent: #ffd45c;
  --lb-text: #f4f1e4;
  --lb-panel: rgba(0, 0, 0, .18);
  --lb-edge: rgba(255, 230, 160, .18);
}
#course { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 0; }

/* ── HUD ─────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.hud-top {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px;
  display: flex; gap: 8px; align-items: flex-start;
}
.hud-panel {
  background: rgba(14, 36, 22, .82); border: 1px solid rgba(255, 220, 140, .22);
  border-radius: 12px; padding: 6px 12px; min-width: 76px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.hud-hole { flex: 0 1 auto; min-width: 0; max-width: 46%; }
.hud-timer { margin-left: auto; text-align: right; }
.pr-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #b9d8a8; }
.pr-value { font-size: 22px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-hole .pr-value { font-size: 17px; }
.pr-sub { font-size: 11px; color: #cfe3c0; white-space: nowrap; }
#hudTime.low { color: #ff8a65; }

.hud-board {
  position: absolute; top: calc(78px + env(safe-area-inset-top)); right: 8px;
  display: flex; flex-direction: column; gap: 3px; width: 190px;
}
.hb-row {
  display: grid; grid-template-columns: 10px 1fr auto 30px; gap: 6px; align-items: center;
  font-size: 12px; padding: 3px 8px; border-radius: 8px;
  background: rgba(14, 36, 22, .72);
}
.hb-row.me { outline: 1px solid rgba(255, 220, 140, .6); }
.hb-row.done { opacity: .7; }
.hb-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.hb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-st, .hb-tp { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.toast {
  position: absolute; right: 8px; top: calc(78px + env(safe-area-inset-top));
  transform: translateY(-110%); font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(14, 36, 22, .9); border: 1px solid rgba(255, 220, 140, .3);
}

.hud-center {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.8);
  text-align: center; opacity: 0; transition: opacity .25s, transform .25s;
}
.hud-center.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hud-center .big {
  font-size: clamp(30px, 8vw, 58px); font-weight: 900; letter-spacing: .03em;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 24px rgba(0, 0, 0, .35);
}
.hud-center .big.gold { color: #ffd45c; text-shadow: 0 3px 0 #7a5410, 0 0 30px rgba(255, 210, 90, .6); }
.hud-center .small { font-size: 15px; color: #e8f2dc; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

.hud-hint {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%); font-size: 13px; color: #e8f2dc;
  background: rgba(14, 36, 22, .7); padding: 5px 12px; border-radius: 999px;
  transition: opacity .3s; white-space: nowrap;
}
.power-wrap {
  position: absolute; left: 50%; bottom: calc(46px + env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(320px, 70vw); height: 14px;
  border-radius: 8px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255,255,255,.25);
  overflow: hidden; opacity: 0; transition: opacity .15s;
}
.power-wrap.show { opacity: 1; }
#powerFill { height: 100%; width: 0; }
#powerTxt { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 14px; font-weight: 800; }

/* the shared audio strip inside the HUD: reset web/style.css's fixed pin */
#hudAudio {
  position: absolute; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
  transform: none;           /* site_audio.css centres it with translateX(-50%) */
  pointer-events: auto;
}
#hudAudio .audio-controls, #lobbyAudio .audio-controls { position: static; }
#hud .volume-slider, .lobby-audio .volume-slider { position: static; top: auto; right: auto; }
@media (max-width: 700px) {
  .hud-board { top: calc(70px + env(safe-area-inset-top)); width: 150px; }
  .hb-row { font-size: 11px; }
  .pr-value { font-size: 18px; }
  .hud-hole .pr-value { font-size: 14px; }
  .hud-panel { padding: 5px 9px; min-width: 60px; }
  .hud-hint { font-size: 11px; bottom: calc(52px + env(safe-area-inset-bottom)); }
  .power-wrap { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ── between-hole scoreboard ─────────────────────────────────────── */
.hole-board {
  position: fixed; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 20, 10, .45); padding: 12px;
}
.hb-card { max-width: 640px !important; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.hb-table th, .hb-table td { padding: 4px 3px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.hb-table .hb-name { text-align: left; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-table tr.me td { background: rgba(255, 212, 92, .1); }
.hb-par td { color: #b9d8a8; font-size: 11px; }
.sc { display: inline-block; min-width: 20px; line-height: 20px; border-radius: 4px; }
.sc.ace { background: #ffd45c; color: #3a2a00; border-radius: 50%; font-weight: 900; }
.sc.under { border: 2px solid #7cff7c; border-radius: 50%; }
.sc.even { }
.sc.over { border: 2px solid rgba(255, 160, 120, .7); }
.sc.way { background: rgba(255, 110, 90, .35); }

/* ── overlays / lobby card ───────────────────────────────────────── */
#lobbyOverlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 10; overflow-y: auto; padding: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 60px, transparent 60px 120px),
    radial-gradient(900px 600px at 20% 10%, rgba(120, 200, 110, .25), transparent 60%),
    radial-gradient(700px 500px at 85% 90%, rgba(255, 210, 100, .12), transparent 60%),
    #164a2a;
}
#lobbyOverlay.see-through { background: rgba(10, 30, 18, .35); }
.card {
  width: min(480px, 100%); max-width: 480px; margin: auto;
  background: rgba(16, 40, 25, .92); border: 1px solid rgba(255, 220, 140, .25);
  border-radius: 18px; padding: 20px 20px 16px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.card.results-wide { width: min(760px, 100%); max-width: 760px; }
.pr-title { margin: 4px 0 6px; font-size: 40px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.pr-title span { color: #ffd45c; margin-left: 8px; }
.pr-title.small { font-size: 28px; }
.tagline { color: #d4e6c6; font-size: 14px; margin: 0 0 14px; }
input[type=text], select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25); color: #fff; font-size: 16px; margin-bottom: 10px;
}
select { width: auto; margin: 0 0 0 6px; padding: 6px 8px; font-size: 14px; }
button.primary, button.secondary {
  display: block; width: 100%; padding: 12px; margin: 6px 0; border-radius: 12px; border: 0;
  font-size: 16px; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
button.primary { background: linear-gradient(180deg, #ffe08a, #f2b632); color: #3b2a05; box-shadow: 0 3px 0 #9b6d12; }
button.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #9b6d12; }
button.secondary { background: rgba(255,255,255,.1); color: #f4f1e4; border: 1px solid rgba(255,255,255,.2); }
button:disabled { opacity: .5; }
.instructions { font-size: 12px; color: #c4dab5; margin: 10px 0; line-height: 1.7; }
.back-link { display: inline-block; margin-top: 10px; color: #cfe3c0; font-size: 13px; }
.squad-count { color: #ffd45c; font-weight: 700; margin-bottom: 6px; }
.player-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.player-row { background: rgba(0,0,0,.2); border-radius: 8px; padding: 6px 10px; text-align: left; font-size: 14px; }
.host-settings { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 6px 0; font-size: 14px; }
.settings-view { font-size: 13px; margin: 4px 0; }
.briefing { text-align: left; font-size: 13px; color: #d4e6c6; margin-top: 10px; }
.briefing ul { padding-left: 18px; }
.leaderboard { margin-top: 6px; }
.muted { color: #b9cfad; }
.countdown { font-size: 120px; font-weight: 900; color: #ffd45c; text-shadow: 0 6px 0 #7a5410; }
#countPane { background: transparent; }
.load-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin: 12px 0; }
#loadBar { height: 100%; width: 10%; background: linear-gradient(90deg, #7cff7c, #ffd45c); transition: width .4s; }
.lobby-audio { display: flex; justify-content: center; margin-bottom: 8px; }
.board-btn { margin-top: 8px !important; }
#resultCard { overflow-x: auto; }
.card-table { font-size: 12px; }
@media (max-width: 480px) {
  .card { padding: 16px 12px 12px; }
  .pr-title { font-size: 32px; }
  .hb-table { font-size: 11px; }
  .hb-table th, .hb-table td { padding: 3px 1px; }
}

/* the leaderboard overlay in the house colours */
.lb-card { background: #12301d !important; border-color: rgba(255, 220, 140, .3) !important; }