/* Moonshot Park's own look (Doug picked "Primetime" on 3 Oct, for a 16-year-old player): a night ballpark on a
   console-style broadcast. Deep navy, stadium-light gold and hot orange, cyan for the timing ring; Anton (tall
   condensed capitals, self-hosted, SIL OFL) for the scoreboard and calls, Inter for reading. The ballpark itself
   is drawn behind every screen in 3D (scene3d.js, three.js), or in 2D (scene2d.js) where WebGL isn't there. Loaded after games.css, which keeps the shared rules. */
@font-face { font-family: Anton; src: url(/fonts/Anton.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/Inter-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --bg: #060b22; --bg2: #0d1640; --panel: #0d1640e6; --line: #2a3a80; --ink: #02040e;
  --text: #f6f7fb; --soft: #b8c2e6; --accent: #ffb23a; --hot: #ff8a2a; --cyan: #5fe3ff; --good: #3ddc84;
}
body.mp { font: 400 16px/1.42 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); overflow-x: hidden; min-height: 100dvh; }
.mp h1, .mp h2, .mp .big-num b, .mp dd { font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: .02em; }
.mp a { color: var(--accent); }
.mp button { font-family: Anton, Impact, sans-serif; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
.mp button.go { background: linear-gradient(180deg, #ffd27a, var(--accent) 45%, var(--hot)); color: #1a0d00; font-size: 22px; min-height: 56px; box-shadow: 0 4px 0 var(--ink), 0 0 26px #ffb23a66; }
.mp button.quiet { background: #ffffff10; color: var(--text); border: 2px solid var(--line); box-shadow: none; font-family: Inter, sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; }
.mp .muted { color: var(--soft); }

/* the park painted behind everything */
/* the lit 3D crowd is bright: the top buttons get a solid dark back so they stay readable */
.mp .mp-top .back, .mp .lock-btn { background: #060b22e6; color: var(--text); }
#park, #park3d { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; z-index: 0; touch-action: none; }
main { position: relative; z-index: 2; }
.mp-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 60px; position: relative; z-index: 5; }
.mp-top .grow { flex: 1; min-width: 0; }
.mp .icon { min-width: 44px; min-height: 44px; padding: 0; background: #0009; border: 2px solid var(--line); box-shadow: none; color: var(--text); font-size: 18px; border-radius: 12px; }

/* home: a dark glass card over the park */
.home { max-width: 560px; margin: 4vh auto 0; padding: 22px 16px; display: grid; gap: 14px; text-align: center; background: linear-gradient(180deg, #060b22d9, #060b22b0); border: 1px solid #ffffff1a; border-radius: 22px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: calc(100% - 32px); }
.logo { font-size: clamp(46px, 14vw, 86px); line-height: .92; margin: 0; text-transform: uppercase; font-style: italic; transform: skewX(-6deg); }
.logo span { color: var(--text); text-shadow: 0 0 18px #5fe3ff88, 0 4px 0 #000; }
.logo em { font-style: italic; background: linear-gradient(180deg, #fff1c8, var(--accent) 50%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 18px #ff8a2a99); }
.home .tag { margin: 0; color: var(--soft); font-weight: 700; }
.beat { margin: 0; font-weight: 700; color: var(--cyan); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mp .chip { min-height: 44px; padding: 6px 18px; font-size: 17px; background: #0008; color: var(--text); border: 2px solid var(--line); box-shadow: none; }
.mp .chip[aria-pressed="true"] { background: var(--cyan); color: #00121a; border-color: var(--ink); box-shadow: 0 0 16px #5fe3ff88; }
.best { font-family: Anton, sans-serif; color: var(--accent); margin: 0; font-size: 18px; letter-spacing: .03em; min-height: 1px; }
.links { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.links a, .links button.link { color: var(--accent); background: none; border: 0; box-shadow: none; font: 700 15px Inter, sans-serif; text-transform: none; letter-spacing: 0; min-height: 40px; padding: 0 4px; text-decoration: underline; display: inline-flex; align-items: center; }
.panel { background: var(--panel); border: 1px solid #ffffff1f; border-radius: 18px; padding: 18px; text-align: left; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.panel > * + * { margin-top: 12px; }
.panel h2 { font-size: 32px; color: var(--accent); text-transform: uppercase; }
.panel ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
#how { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
#how .go { width: 100%; }

/* play: the canvas is the screen; the HUD floats on top */
body.playing .mp-top { position: fixed; top: 0; left: 0; right: 0; padding: 8px 12px; min-height: 0; }
#play { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.hud { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: linear-gradient(180deg, #0d1640ee, #060b22ee); border: 1px solid #ffffff26; border-radius: 14px; box-shadow: 0 6px 20px #0008; white-space: nowrap; }
.hud .hr { display: flex; align-items: baseline; gap: 4px; }
.hud .hr b { font: 400 34px/1 Anton, sans-serif; color: var(--accent); text-shadow: 0 0 12px #ffb23a88; }
.hud .hr span, .hud .long span { font: 700 11px Inter, sans-serif; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
.hud .long { display: grid; text-align: right; }
.hud .long b { font: 400 18px/1.1 Anton, sans-serif; color: var(--text); }
.outs { display: grid; grid-template-columns: repeat(7, 9px); gap: 3px; }
.outs i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.outs i.gone { background: #ffffff22; box-shadow: none; }
.outs i.bonus { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.radar { position: absolute; right: 12px; top: calc(max(8px, env(safe-area-inset-top)) + 64px); font: 400 15px/1.1 Anton, sans-serif; letter-spacing: .05em; background: #000b; border: 1px solid #ffffff26; border-left: 4px solid var(--hot); padding: 6px 10px; border-radius: 8px; text-transform: uppercase; }
.radar b { color: var(--accent); font-size: 22px; font-weight: 400; }
.call { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font: 400 clamp(40px, 13vw, 96px)/1 Anton, sans-serif; text-transform: uppercase; font-style: italic; color: var(--text); text-shadow: 0 0 24px #5fe3ffaa, 0 5px 0 #000; animation: pop .35s cubic-bezier(.2,1.6,.4,1) both; }
.call.hr { color: transparent; background: linear-gradient(180deg, #fff1c8, var(--accent) 50%, var(--hot)); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 5px 0 #000) drop-shadow(0 0 22px #ff8a2acc); }
.call.out { color: #ffffffcc; font-size: clamp(30px, 9vw, 64px); }
.call small { display: block; font-size: .32em; letter-spacing: .1em; color: var(--cyan); font-style: normal; margin-top: 6px; }
@keyframes pop { from { transform: scale(2.2); opacity: 0; } }
.stat { position: absolute; left: 50%; transform: translateX(-50%); top: calc(30% + clamp(84px, 22vw, 150px)); display: flex; gap: 6px; flex-wrap: nowrap; }
.stat span { background: #000b; border: 1px solid #ffffff2a; border-radius: 8px; padding: 5px 9px; font: 700 12px Inter, sans-serif; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.stat b { font: 400 18px Anton, sans-serif; color: var(--text); margin-right: 3px; }
.streak { position: absolute; left: 12px; top: calc(max(8px, env(safe-area-inset-top)) + 64px); font: 400 18px Anton, sans-serif; color: #1a0d00; background: linear-gradient(90deg, var(--accent), var(--hot)); padding: 4px 12px; border-radius: 8px; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 0 18px #ff8a2a99; }
.hint { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; margin: 0; font: 700 14px Inter, sans-serif; color: #ffffffb0; text-transform: uppercase; letter-spacing: .12em; }

/* end card */
.endc { max-width: 520px; margin: 4vh auto 0; padding: 0 16px 20px; width: 100%; }
.endc .panel { text-align: center; }
.endc h2 { font-size: clamp(30px, 8vw, 44px); }
.big-num { margin: 0; }
.big-num b { font-size: 84px; line-height: 1; color: var(--text); text-shadow: 0 0 24px #ffb23a99; }
.big-num span { display: block; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.new { margin: 0; font: 400 22px Anton, sans-serif; color: var(--cyan); text-transform: uppercase; letter-spacing: .05em; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.stats div { background: #0008; border: 1px solid #ffffff1f; border-radius: 12px; padding: 8px; }
.stats dt { font: 700 11px Inter, sans-serif; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
.stats dd { margin: 0; font-size: 24px; }
.endc .go { width: 100%; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* sideways phones: the home card goes wide and short */
@media (orientation: landscape) and (max-height: 500px) {
  .mp-top { min-height: 48px; padding: 4px 12px; }
  .home { margin-top: 0; grid-template-columns: 1fr 1fr; align-items: center; max-width: 820px; column-gap: 18px; row-gap: 8px; padding: 12px 16px; }
  .home > .logo, .home > .tag, .home > .beat { grid-column: 1; }
  .home > .chips, .home > .go, .home > .best, .home > .links { grid-column: 2; }
  .home > .logo { grid-row: 1 / span 2; font-size: 46px; }
  .home > .chips { grid-row: 1; }
  .endc { margin-top: 0; max-width: 760px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .big-num b { font-size: 56px; }
  .call { top: 22%; }
  .stat { top: calc(22% + 92px); }
}
@media (min-width: 900px) and (min-height: 600px) {
  .home { margin-top: 10vh; }
}
/* narrow screens: the scoreboard sits under the Back and Lock buttons */
@media (max-width: 760px) {
  .hud { top: calc(max(8px, env(safe-area-inset-top)) + 58px); }
  .radar, .streak { top: calc(max(8px, env(safe-area-inset-top)) + 122px); }
}
@media (prefers-reduced-motion: reduce) {
  .call { animation: none; }
}