/* ===========================================================================
   MINI GOLF — Neon Nine (drawn in js/games/golf.js)
   =========================================================================== */

.golf-host {
  cursor: crosshair;
}

/* "Hole 3 · Sand Trap · Par 3", sliding in over the course. */
.golf-banner {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 26px 14px;
  border-radius: var(--r-lg);
  background: rgba(4, 6, 15, 0.82);
  border: 1px solid color-mix(in srgb, var(--game-accent) 40%, transparent);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8), 0 0 40px -12px var(--game-glow);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  translate: -50% -12px;
}

.golf-banner.show {
  animation: golf-banner 1.5s var(--ease) forwards;
}

@keyframes golf-banner {
  0% { opacity: 0; translate: -50% -12px; }
  14% { opacity: 1; translate: -50% 0; }
  80% { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% -6px; }
}

.golf-banner small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arena-ink-3);
}

.golf-banner strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.golf-banner span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--game-accent);
}

/* --- Setup: the nine holes --- */
.golf-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.golf-strip li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--arena-chip);
  border: 1px solid var(--arena-line);
  text-align: left;
}

.golf-strip b {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--game-accent);
}

.golf-strip span {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--arena-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.golf-strip em {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-style: normal;
  color: var(--arena-ink-3);
}

/* --- Results: the scorecard --- */
.golf-card {
  width: 100%;
  overflow-x: auto;
}

.golf-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.golf-card th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arena-ink-3);
  padding-right: 4px;
}

.golf-card td {
  text-align: center;
  padding: 4px 0;
  border-radius: 5px;
  color: var(--arena-ink-2);
  background: rgba(255, 255, 255, 0.04);
}

.golf-card__you td {
  font-weight: 700;
  color: var(--arena-ink);
  background: rgba(255, 255, 255, 0.08);
}

.golf-card td.is-ace { background: #FFD447; color: #1A1200; }
.golf-card td.is-under { background: rgba(59, 240, 160, 0.3); color: #C8FFE6; }
.golf-card td.is-over { background: rgba(255, 106, 61, 0.22); color: #FFD2C2; }

@media (max-width: 420px) {
  .golf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .golf-strip li:last-child { grid-column: span 2; }
  .golf-card table { font-size: 0.64rem; border-spacing: 2px; }
}

/* --- Menu card preview: a putt rolling into the cup --- */
.pv-golf {
  background:
    radial-gradient(circle at 74% 52%, rgba(233, 242, 255, 0.12), transparent 30%),
    repeating-linear-gradient(135deg, #0C3A35 0 6cqw, #0A2F2C 6cqw 12cqw);
  box-shadow: inset 0 0 0 1.2cqw #04060F, inset 0 0 0 1.6cqw #2ED8FF, inset 0 0 4cqw 1.6cqw rgba(46, 216, 255, 0.5);
}

/* The cup and its flag. */
.pv-golf i {
  left: 74%;
  top: 52%;
  width: 6cqw;
  height: 6cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.85);
}

.pv-golf i::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 0.6cqw;
  height: 17cqw;
  background: #DDE3F5;
}

.pv-golf i::before {
  content: '';
  position: absolute;
  left: calc(50% + 0.6cqw);
  bottom: calc(50% + 11cqw);
  width: 8cqw;
  height: 6cqw;
  background: #FF2E88;
  clip-path: polygon(0 0, 100% 45%, 0 100%);
  animation: pv-golf-flag 1.2s ease-in-out infinite;
}

@keyframes pv-golf-flag {
  50% { transform: skewY(6deg) scaleX(0.92); }
}

/* The ball: rolls in, drops, comes back. */
.pv-golf b {
  left: 18%;
  top: 52%;
  width: 3.6cqw;
  height: 3.6cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF, #B8C2DA);
  box-shadow: 0 0 2.4cqw rgba(255, 255, 255, 0.7);
  animation: pv-golf-roll 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}

@keyframes pv-golf-roll {
  0% { left: 18%; scale: 1; opacity: 1; }
  62% { left: 74%; scale: 1; opacity: 1; }
  72% { left: 74%; scale: 0.4; opacity: 0; }
  100% { left: 74%; scale: 0.4; opacity: 0; }
}

/* The aim line it followed. */
.pv-golf em {
  left: 21%;
  top: 52%;
  width: 49%;
  height: 0;
  border-top: 0.6cqw dotted rgba(59, 240, 160, 0.8);
  translate: 0 -50%;
  animation: pv-golf-aim 2.6s linear infinite;
}

@keyframes pv-golf-aim {
  0%, 8% { opacity: 1; }
  30%, 100% { opacity: 0; }
}