/* ===== Mini Golf — fixed "sunny course" theme, fullscreen =====
   No center chrome (no c-bar / c-app / gc-back). The canvas fills the
   viewport and every control floats above it as a chunky game HUD. */
:root {
  --gf-bg: #3f8f4f;
  --gf-panel: rgba(18, 34, 20, .82);
  --gf-panel-2: rgba(28, 52, 30, .74);
  --gf-line: rgba(190, 255, 200, .34);
  --gf-text: #f4ffee;
  --gf-muted: #c4e3c4;
  --gf-gold: #ffcf5c;
  --gf-fairway: #4fb062;
  --gf-fairway-hi: #7fd893;
  --gf-danger: #ff6b6b;
  --gf-sky: #7ec8ff;
  --gf-sand: #f2d99a;
  --gf-on-green: #06301a;
}

html, body { height: 100%; }
body.gf-body {
  margin: 0;
  overflow: hidden;
  background: var(--gf-bg);
  color: var(--gf-text);
  font-family: "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- Floating game HUD ---------- */
.gf-hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-weight: 700; }
.gf-hud[hidden] { display: none; }

.gf-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 12px 14px; pointer-events: none;
}
.gf-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* stat chips */
.gf-chip {
  pointer-events: none;   /* pure readout: never swallow board taps behind it */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--gf-panel); border: 2px solid var(--gf-line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 15px; font-weight: 800; color: var(--gf-text); line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.gf-chip i { font-size: 17px; font-style: normal; display: inline-flex; align-items: center; }
.gf-chip b { font-variant-numeric: tabular-nums; min-width: 1ch; }
.gf-chip--hole { border-color: var(--gf-fairway-hi); }
.gf-chip--par { border-color: #ffffff; }
.gf-chip--stroke { border-color: var(--gf-gold); color: #ffe9ad; }
.gf-chip--total { border-color: var(--gf-sky); }

/* pause / menu / mute buttons */
.gf-btn {
  pointer-events: auto; cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 0; border-bottom: 4px solid rgba(0, 0, 0, .4);
  border-radius: 14px; color: var(--gf-text);
  background: linear-gradient(180deg, #4e8a56, #2e5a35);
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  transition: transform .08s ease, filter .12s ease;
}
.gf-btn:hover { filter: brightness(1.08); }
.gf-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.gf-btn--menu::before { content: ""; width: 14px; height: 14px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="4.5" width="18" height="3.4" rx="1.7" fill="%23f4ffee"/><rect x="3" y="10.3" width="18" height="3.4" rx="1.7" fill="%23f4ffee"/><rect x="3" y="16.1" width="18" height="3.4" rx="1.7" fill="%23f4ffee"/></svg>') center/contain no-repeat; }
.gf-btn--mute::before { content: ""; width: 14px; height: 14px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 9.5h3.5L13 5v14L7.5 14.5H4z" fill="%23f4ffee"/><path d="M16 9c1.4 1.2 1.4 4.8 0 6" stroke="%23f4ffee" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center/contain no-repeat; }
.gf-btn--mute[aria-pressed="true"] { background: linear-gradient(180deg, #7a5230, #57381e); }
.gf-btn--mute[aria-pressed="true"]::before { content: ""; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 9.5h3.5L13 5v14L7.5 14.5H4z" fill="%23f4ffee"/><path d="M16.5 9.5l5 5M21.5 9.5l-5 5" stroke="%23ffb3ba" stroke-width="2.2" stroke-linecap="round"/></svg>') center/contain no-repeat; }

/* ---------- Power bar (bottom centre, above the hint) ---------- */
.gf-power {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
  width: min(340px, 64vw); height: 18px; border-radius: 999px;
  background: var(--gf-panel); border: 2px solid var(--gf-line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  overflow: hidden; opacity: 0; transition: opacity .15s ease;
}
.gf-power.on { opacity: 1; }
.gf-power__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7fd893, #ffcf5c 55%, #ff6b6b);
  border-radius: 999px;
  transition: width .05s linear;
}

/* hint ribbon */
.gf-hint {
  pointer-events: none; margin: 0;
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: min(76vw, 560px); text-align: center;
  padding: 7px 18px; border-radius: 999px;
  background: var(--gf-panel); border: 2px solid var(--gf-line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  font-size: 13px; font-weight: 700; color: var(--gf-muted); text-shadow: 0 1px 1px rgba(0,0,0,.4);
}

/* result toast */
.gf-toast {
  pointer-events: none;
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  padding: 12px 30px; border-radius: 18px;
  background: var(--gf-panel); border: 3px solid var(--gf-gold);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 14px 30px rgba(0, 0, 0, .4);
  font-size: clamp(22px, 4.5vw, 36px); font-weight: 900; letter-spacing: .02em;
  color: var(--gf-gold); text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  white-space: nowrap;
  animation: gf-pop .25s ease;
}
.gf-toast[hidden] { display: none; }
.gf-toast--bad { border-color: var(--gf-danger); color: #ffd0d0; }
@keyframes gf-pop {
  0% { transform: translate(-50%, -50%) scale(.6); }
  70% { transform: translate(-50%, -50%) scale(1.06); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Full-screen overlays (menu / round over) ---------- */
.gf-screen {
  position: fixed; inset: 0; z-index: 30;
  display: flex; padding: 18px;
  overflow-y: auto;                /* the overlay scrolls, not the card */
  overscroll-behavior: contain;
  background: radial-gradient(120% 90% at 50% 0%, rgba(30, 80, 40, .55), rgba(8, 24, 12, .82));
  backdrop-filter: blur(3px);
}
.gf-screen[hidden] { display: none; }
.gf-card {
  position: relative; z-index: 1;
  margin: auto;                    /* centres AND lets a too-tall card scroll */
  width: min(680px, 100%);
  padding: 26px 30px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--gf-panel-2), rgba(12, 26, 15, .94));
  border: 3px solid var(--gf-line);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .5);
  text-align: center;
}
.gf-card__crest {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fbf7f, #2e6a3a 75%);
  border: 3px solid var(--gf-gold);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  margin-bottom: 10px;
}
.gf-card__title {
  margin: 4px 0 8px; font-size: clamp(30px, 6vw, 44px); font-weight: 900;
  letter-spacing: .02em; color: var(--gf-text);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 22px rgba(127, 216, 147, .35);
}
.gf-card__lead { margin: 0 auto 14px; max-width: 52ch; color: var(--gf-muted); font-size: 16px; line-height: 1.45; }
.gf-card__list { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 56ch; text-align: left; display: grid; gap: 9px; }
.gf-card__list li {
  background: rgba(255, 255, 255, .06); border: 2px solid var(--gf-line);
  border-radius: 12px; padding: 9px 13px; font-size: 14px; line-height: 1.45; color: var(--gf-text);
}
.gf-card__list b { color: var(--gf-gold); }
.gf-card__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gf-cta {
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; border: 0; border-bottom: 5px solid rgba(0, 0, 0, .45);
  border-radius: 16px; color: var(--gf-on-green);
  background: linear-gradient(180deg, #a8e6b0, #63c06f);
  font: inherit; font-size: 18px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .4);
  transition: transform .08s ease, filter .12s ease;
}
.gf-cta:hover { filter: brightness(1.07); }
.gf-cta:active { transform: translateY(4px); border-bottom-width: 1px; }
/* the buttons set display explicitly, which beats the UA [hidden] rule; without
   this the hidden Resume button stays visible on the title card */
.gf-cta[hidden] { display: none; }
.gf-cta--back { color: var(--gf-text); background: linear-gradient(180deg, #5b6678, #3a4351); }
.gf-cta--levels { color: #06304d; background: linear-gradient(180deg, #8ed8ff, #46a8e6); }
/* ---------- Hole picker: replay any cleared hole ---------- */
.gf-holes { margin: 0 0 16px; }
.gf-holes[hidden] { display: none; }   /* explicit display would beat the UA [hidden] rule */
.gf-holes__lab {
  margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gf-muted); text-align: center;
}
.gf-holes__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gf-hole-btn {
  cursor: pointer; width: 44px; height: 44px; border: 0;
  border-bottom: 4px solid rgba(0, 0, 0, .45); border-radius: 12px;
  background: linear-gradient(180deg, #a8e6b0, #63c06f);
  color: var(--gf-on-green); font: inherit; font-size: 18px; font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  transition: transform .08s ease, filter .12s ease;
}
.gf-hole-btn:hover { filter: brightness(1.08); }
.gf-hole-btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.gf-hole-btn.is-ready { box-shadow: inset 0 0 0 2px var(--gf-gold), 0 4px 12px rgba(0, 0, 0, .3); }
.gf-hole-btn:disabled {
  cursor: default; background: linear-gradient(180deg, #3d4a3f, #2a352b);
  color: rgba(244, 255, 238, .35); border-bottom-color: rgba(0, 0, 0, .3); box-shadow: none;
}
.gf-card__over { margin: 6px 0 4px; font-size: clamp(24px, 5vw, 34px); font-weight: 900; color: var(--gf-gold); text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.gf-card__stats { margin: 0 0 14px; color: var(--gf-muted); font-size: 16px; font-weight: 700; }

/* scorecard table on the round-over card */
.gf-cardwrap { max-height: 42vh; overflow: auto; margin: 0 auto 16px; }
.gf-scores {
  border-collapse: collapse; margin: 0 auto; min-width: min(440px, 100%);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.gf-scores th, .gf-scores td {
  border: 1px solid var(--gf-line); padding: 4px 7px; text-align: center;
  color: var(--gf-text);
}
.gf-scores thead th { background: rgba(255, 255, 255, .09); font-weight: 800; }
.gf-scores .gf-scores__lab { text-align: left; font-weight: 800; color: var(--gf-muted); white-space: nowrap; }
.gf-scores tr.gf-scores__tot th, .gf-scores tr.gf-scores__tot td { background: rgba(255, 207, 92, .14); border-top: 2px solid var(--gf-gold); font-weight: 900; }
.gf-scores td.is-under { color: #8ef2a4; font-weight: 900; }
.gf-scores td.is-over { color: #ffb3ba; font-weight: 900; }

@media (max-width: 560px) {
  .gf-chip { font-size: 12px; padding: 5px 10px 5px 8px; }
  .gf-btn { padding: 8px 12px; font-size: 13px; }
  .gf-card { padding: 20px 16px 18px; }
  /* 18 columns need to fit a phone-width card */
  .gf-scores { font-size: 10px; }
  .gf-scores th, .gf-scores td { padding: 2px 3px; }
}