/* MiniGolf — square canvas, layout inherited from games/game-layout.css. */

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }

body.game {
  color: #eaf6ff;
  background:
    /* Main halo sits right behind the board, so the green reads as light
       spilling off the course rather than a flat page tint. */
    radial-gradient(circle at 50% 40%, rgba(56, 226, 118, .34), transparent 48%),
    radial-gradient(circle at 16% 10%, rgba(96, 236, 150, .26), transparent 36%),
    radial-gradient(circle at 86% 14%, rgba(61, 220, 255, .16), transparent 32%),
    linear-gradient(170deg, #081a16 0%, #0d2432 52%, #061118 100%);
  background-attachment: fixed;
}

.game h2 {
  font-family: "Zen Dots", system-ui, sans-serif;
  margin-top: 30px;
  letter-spacing: .1em;
  text-align: center;
  color: #f4fff7;
  text-shadow: 0 0 26px rgba(78, 200, 120, .45);
}

#game {
  display: block;
  background: #12283a;
  border-radius: var(--game-radius);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}

/* game-layout.css loads after this file, so these need the extra specificity
   of `body.game` to win rather than !important. */
body.game .game-wrapper {
  border: 2px solid rgba(132, 245, 164, .55);
  background:
    linear-gradient(145deg, rgba(160, 255, 190, .12), rgba(255, 255, 255, 0) 42%),
    rgba(4, 20, 16, .55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .45),
    0 0 26px rgba(56, 226, 118, .55),
    0 0 70px rgba(56, 226, 118, .32),
    0 0 130px rgba(56, 226, 118, .16),
    0 26px 70px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(190, 255, 210, .22);
  animation: golfGlow 5.5s ease-in-out infinite;
}

@keyframes golfGlow {
  0%, 100% {
    border-color: rgba(132, 245, 164, .5);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .45),
      0 0 26px rgba(56, 226, 118, .5),
      0 0 70px rgba(56, 226, 118, .28),
      0 0 130px rgba(56, 226, 118, .14),
      0 26px 70px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(190, 255, 210, .22);
  }
  50% {
    border-color: rgba(158, 255, 186, .78);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .45),
      0 0 38px rgba(72, 240, 132, .72),
      0 0 96px rgba(72, 240, 132, .42),
      0 0 170px rgba(72, 240, 132, .22),
      0 26px 70px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(190, 255, 210, .3);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.game .game-wrapper { animation: none; }
}

/* ------------------------------------------------------------ power meter -- */

.power-meter {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 14px;
  width: min(300px, 62%);
  height: 12px;
  overflow: hidden;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(6, 18, 28, .6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  pointer-events: none;
}

.power-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ef5a0 0%, #ffd166 62%, #ff5d73 100%);
  box-shadow: 0 0 14px rgba(255, 209, 102, .7);
  transition: width .05s linear;
}

/* ---------------------------------------------------------------- overlay -- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: var(--game-radius);
  background: rgba(8, 22, 34, .82);
  backdrop-filter: blur(8px);
  transition: opacity .24s ease;
}

.overlay.hidden { opacity: 0; pointer-events: none; }

.overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
}

.overlay-text { display: grid; gap: 10px; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.5; }

.overlay-text strong {
  font-family: "Zen Dots", system-ui, sans-serif;
  font-size: clamp(26px, 7vw, 40px);
  color: #8ef5a0;
  text-shadow: 0 0 24px rgba(78, 200, 120, .5);
}

/* Title art on the start screen. --game-canvas-size IS the canvas width, so a
   third of it is exactly a third of the board whatever the viewport. */
.overlay-title {
  display: block;
  width: calc(var(--game-canvas-size) / 3);
  max-width: 100%;
  height: auto;
  margin: 0 auto 2px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}

/* Deep green with white text. Both ends of the gradient stay above a 4.5:1
   contrast ratio against white, so the label holds up at this size. */
.play-btn {
  font-family: "Zen Dots", system-ui, sans-serif;
  font-size: 17px;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(135deg, #C2E339, #325306);
  box-shadow: 0 6px 0 #042B01, 0 16px 32px rgba(16, 78, 46, .45);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.play-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.play-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #0d4227; }

#overlayLoginHint { color: rgba(255, 255, 255, .68); font-size: 13px; }

/* -------------------------------------------------------------- scorecard -- */

.scorecard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
  margin: 2px 0;
}

.sc-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
}

.sc-hole { font-size: 10px; letter-spacing: .07em; color: rgba(255, 255, 255, .6); }
.sc-strokes { font-size: 19px; font-weight: 900; color: #fff; line-height: 1.1; }
.sc-diff { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .8); }

.sc-cell.sc-ace, .sc-cell.sc-eagle { background: rgba(255, 209, 102, .24); border-color: #ffd166; }
.sc-cell.sc-birdie { background: rgba(142, 245, 160, .22); border-color: #8ef5a0; }
.sc-cell.sc-bogey { background: rgba(255, 171, 46, .2); border-color: #ffab2e; }
.sc-cell.sc-over { background: rgba(255, 138, 138, .2); border-color: #ff8a8a; }

.sc-total { font-weight: 800; font-size: 16px; color: #ffd166; }
.sc-note { font-size: 13px; color: rgba(255, 255, 255, .72); }

/* -------------------------------------------------------------------- HUD -- */

.hud {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #eaf6ff;
}

.hole-card, .rules-card, .golf-controls {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 0, 0, .26);
}

.hole-card { padding: 14px 16px; }

.hole-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.hole-num {
  font-family: "Zen Dots", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  color: #8ef5a0;
}

.hole-name { font-size: 16px; font-weight: 800; color: #fff; }

.hole-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.hole-stats span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
}

.hole-stats small {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(234, 246, 255, .6);
}

.hole-stats b { font-size: 22px; color: #ffd166; }

.hole-hint { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: rgba(234, 246, 255, .72); text-align: center; }

.golf-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }

.golf-controls button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .07);
  color: #eaf6ff;
  font: 700 12px system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease;
}

.golf-controls button:hover { background: rgba(142, 245, 160, .18); }

.rules-card { padding: 14px 16px; }
.rules-card h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .05em; color: #fff; }
.rules-card p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(234, 246, 255, .72); }

.scoreline .item { color: #eaf6ff; font-size: 13px; }

@media (max-width: 520px) {
  .golf-controls { grid-template-columns: 1fr; }
  .power-meter { bottom: 10px; }
}