/* 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; }

/* home: the second big button pitches */
.best { white-space: pre-line; }
.modes-l { margin: 4px 0 0; font: 700 13px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #c9cbe0); text-align: center; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.modes button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 8px; min-height: 78px; }
.modes b { font-size: 26px; line-height: 1; }
.modes small { font: 600 12px/1.25 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.mp button.pitchgo { background: linear-gradient(180deg, #b9f4ff, var(--cyan) 45%, #2a8bd8); color: #00121a; box-shadow: 0 4px 0 var(--ink), 0 0 26px #5fe3ff55; }

/* comic call: a starburst behind strikeouts and home runs */
.call.burst { isolation: isolate; }
.call.burst::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(92vw, 620px); aspect-ratio: 1.9; transform: translate(-50%, -54%) rotate(-4deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 100'%3E%3Cpath d='M95 2l12 22 26-14-4 26 30-6-16 22 34 8-30 12 22 20-32-2 6 26-26-14-12 26-12-24-24 16 2-28-32 6 18-22-34-8 30-12-24-20 32 2-4-28 26 16z' fill='%23ffd23a' stroke='%2302040e' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M95 16l9 17 20-10-3 20 23-4-12 16 26 6-23 9 17 15-25-1 5 20-20-11-9 20-9-18-19 12 2-21-25 4 14-16-26-6 23-9-18-15 24 1-3-21 20 12z' fill='%23ff7a14'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: spin-in .45s cubic-bezier(.2,1.6,.4,1) both; }
.call.hr.burst { color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: none; text-shadow: 0 4px 0 #02040e, 3px 0 0 #02040e, -3px 0 0 #02040e, 0 -3px 0 #02040e; }
.call.k { color: #fff; text-shadow: 0 4px 0 #02040e, 3px 0 0 #02040e, -3px 0 0 #02040e, 0 -3px 0 #02040e; }
.call.k.burst::before { filter: hue-rotate(160deg) saturate(1.2); }
@keyframes spin-in { from { transform: translate(-50%, -54%) rotate(-30deg) scale(.2); opacity: 0; } }

/* on fire */
.fire { position: absolute; left: 50%; top: 18%; transform: translateX(-50%) rotate(-3deg); display: flex; align-items: center; gap: 8px; padding: 6px 18px 6px 10px; background: #02040e; border: 3px solid #ffd23a; border-radius: 14px; box-shadow: 0 0 30px #ff7a14aa, 0 6px 0 #000; white-space: nowrap; }
.fire svg { width: 34px; height: 44px; }
.fire span { font: 400 clamp(26px, 7vw, 46px)/1 Anton, sans-serif; font-style: italic; letter-spacing: .04em; color: transparent; background: linear-gradient(180deg, #fff6c8, #ffd23a 40%, #ff7a14 70%, #d42a12); -webkit-background-clip: text; background-clip: text; }
.fire.go { animation: fire-in 1.9s ease both; }
.fire.go svg { animation: flicker .18s steps(2) infinite alternate; }
@keyframes fire-in { 0% { transform: translateX(-50%) rotate(-3deg) scale(.3); opacity: 0; } 12% { transform: translateX(-50%) rotate(-3deg) scale(1.12); opacity: 1; } 20%, 85% { transform: translateX(-50%) rotate(-3deg) scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes flicker { to { transform: scaleY(1.12) skewX(4deg); } }

/* a home run shakes the whole page, like Ridge Fire's Heavy Bomb */
body.mp-shake main, body.mp-shake #park3d, body.mp-shake #park { animation: mp-shake .65s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes mp-shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); } 30%, 50%, 70% { transform: translate(-9px, 4px) rotate(-.4deg); } 40%, 60% { transform: translate(9px, -4px) rotate(.4deg); } }

/* pitching: the count box, the pitch picker, the code card */
.count { position: absolute; left: 12px; top: calc(max(8px, env(safe-area-inset-top)) + 64px); display: grid; gap: 4px; padding: 8px 10px; background: #02040ee6; border: 2px solid #2a3a80; border-radius: 10px; font: 400 15px/1 Anton, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.count .who { color: var(--accent); font-size: 13px; }
.count span:not(.who) { display: flex; align-items: center; gap: 5px; }
.count b { width: 14px; font-weight: 400; color: var(--soft); }
.count i { width: 12px; height: 12px; border-radius: 50%; background: #ffffff1c; border: 1px solid #ffffff33; }
.count i.b { background: var(--good); box-shadow: 0 0 6px var(--good); }
.count i.s { background: #ffd23a; box-shadow: 0 0 6px #ffd23a; }
.pick, .code { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); width: min(560px, calc(100% - 24px)); pointer-events: auto; background: linear-gradient(180deg, #0d1640f2, #060b22f2); border: 2px solid #ffffff22; border-radius: 18px; padding: 12px; box-shadow: 0 10px 30px #000a; text-align: center; }
.pick h2, .code-title { margin: 0 0 8px; font: 400 22px/1 Anton, sans-serif; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.pitches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp .pitches button { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; text-align: left; padding: 8px 10px; min-height: 64px; background: linear-gradient(180deg, #1d2a66, #111a48); color: var(--text); border: 2px solid #3d55b8; box-shadow: 0 3px 0 var(--ink); }
.mp .pitches button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.pitches svg { grid-row: 1 / span 2; width: 52px; height: 34px; }
.pitches b { font: 400 20px/1 Anton, sans-serif; letter-spacing: .03em; }
.pitches small { font: 700 11px/1.2 Inter, sans-serif; text-transform: none; letter-spacing: 0; color: var(--soft); }
.arrows { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.arrows i { width: 40px; height: 40px; display: grid; place-items: center; font: 400 22px/1 Anton, sans-serif; font-style: normal; color: #02040e; background: #f6f7fb; border: 2px solid #02040e; border-radius: 10px; box-shadow: 0 3px 0 #02040e; }
.arrows i.next { outline: 3px solid var(--cyan); outline-offset: 2px; }
.arrows i.in { background: var(--good); color: #02040e; transform: translateY(2px) scale(.92); box-shadow: 0 1px 0 #02040e; }
.code.stun .arrows i { background: #ff5b4a; }
.clock { height: 8px; border-radius: 4px; background: #ffffff1a; overflow: hidden; margin: 0 4px 10px; }
.clock i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--good)); transform-origin: left; }
.clock i.low { background: linear-gradient(90deg, #ff5b4a, var(--hot)); }
.pad { display: flex; justify-content: center; }
.pad .dpad { --dp-size: min(64vw, 30vh, 250px); }
.grade { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; font: 400 clamp(22px, 6vw, 38px)/1 Anton, sans-serif; font-style: italic; letter-spacing: .05em; text-transform: uppercase; animation: pop .3s cubic-bezier(.2,1.6,.4,1) both; text-shadow: 0 4px 0 #000; }
.grade.paint { color: var(--good); }
.grade.good { color: var(--cyan); }
.grade.bad { color: #ff7a5a; }
body.pitching .hint { display: none; }

/* 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); }
  .home > .modes { grid-column: 2; }
  .modes-l { display: none; }
  .modes button { min-height: 52px; }
  .modes button { min-height: 60px; padding: 6px; }
  .modes small { font-size: 11px; }
  .pick, .code { left: auto; right: 12px; transform: none; width: min(380px, 46vw); bottom: 8px; padding: 8px; }
  .pitches button { min-height: 52px; }
  .pick h2, .code-title { font-size: 18px; margin-bottom: 6px; }
  .arrows i { width: 32px; height: 32px; font-size: 18px; }
  .pad .dpad { --dp-size: min(40vh, 170px); }
  .fire { top: 14%; }
}
@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, .count { top: calc(max(8px, env(safe-area-inset-top)) + 122px); }
}
@media (prefers-reduced-motion: reduce) {
  .call, .call.burst::before, .fire.go, .fire.go svg, .grade { animation: none; }
  .fire.go { opacity: 1; }
}

/* full game: the third mode, innings chips, the count with bases, half banners, the line score */
.mp .modes button.gamego { grid-column: 1 / -1; min-height: 64px; background: linear-gradient(180deg, #d8ffd0, var(--good, #4ad66d) 45%, #1f8a45); color: #001a08; box-shadow: 0 4px 0 var(--ink), 0 0 26px #4ad66d55; }
.inn { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; }
.inn .chip { font-size: 13px; min-height: 36px; padding: 0 14px; }
.count .bc { display: flex; align-items: center; gap: 10px; }
.count .bc > span { display: flex; align-items: center; gap: 5px; }
.count .bases { width: 34px; height: 24px; }
.count .bases rect { fill: #ffffff1c; stroke: #ffffff55; stroke-width: 1; }
.count .bases rect.on { fill: #ffd23a; stroke: #fff3b0; filter: drop-shadow(0 0 3px #ffd23a); }
.call.hit { color: #fff; text-shadow: 0 4px 0 #02040e, 3px 0 0 #02040e, -3px 0 0 #02040e, 0 -3px 0 #02040e, 0 0 24px #4ad66dcc; }
.call.half { color: #fff; font-size: clamp(34px, 10vw, 72px); text-shadow: 0 4px 0 #02040e, 3px 0 0 #02040e, -3px 0 0 #02040e, 0 -3px 0 #02040e; }
.call.half small { color: var(--accent); }
.line { overflow-x: auto; margin: 6px 0 4px; }
.line table { margin: 0 auto; border-collapse: collapse; font: 400 16px/1 Anton, sans-serif; letter-spacing: .04em; background: #02040ecc; border: 2px solid #2a3a80; border-radius: 8px; }
.line th, .line td { padding: 6px 7px; text-align: center; min-width: 22px; }
.line thead th { color: var(--soft, #9aa3d6); font-size: 13px; }
.line tbody th { text-align: left; color: var(--accent); text-transform: uppercase; }
.line td.r { color: #ffd23a; border-left: 2px solid #2a3a80; }
@media (orientation: landscape) and (max-height: 500px) {
  .modes { grid-template-columns: 1fr 1fr 1fr; }
  .modes .gamego { grid-column: auto; min-height: 60px; }
  .inn .chip { min-height: 30px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .home { gap: 8px; padding: 14px 14px; margin-top: 2vh; }
  .home > .logo { font-size: 48px; }
  .modes button { min-height: 66px; }
  .mp .modes button.gamego { min-height: 54px; }
}