/* 162-0 MLB — baseball overrides layered on top of the shared 84-0 styles.css */

/* ---------- night-park theme (scoped to body.mlb so other games are untouched) ---------- */
body.mlb {
  --bg-1: #1d3a2c;                       /* park lights on the grass */
  --bg-2: #11241b;
  --bg-3: #0a1510;                       /* night-park green */
  --stitch: #d9595f;                     /* baseball-seam red */
  /* retint the shared tokens so no hockey blue leaks anywhere */
  --accent: #d9595f;
  --accent-press: #b9404a;
  --on-accent: #2a0c0e;
  --modal-bg: #15231b;
  --inset: #15231b;
  --reel-1: #1b3325;
  --reel-2: #102018;
  --panel: rgba(13, 25, 18, 0.55);
  --line-on-grass: rgba(255, 255, 255, 0.10);
  background-image:
    radial-gradient(1200px 760px at 50% -12%, rgba(217, 89, 95, 0.10), rgba(10, 21, 16, 0) 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 60px, rgba(0,0,0,0.04) 60px 120px),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
:root[data-theme="light"] body.mlb {
  --bg-1: #ddead8;
  --bg-2: #ecf3e7;
  --bg-3: #dfe9d8;
  --stitch: #b8333c;
  --accent: #b8333c;
  --accent-press: #962730;
  --on-accent: #ffffff;
  --modal-bg: #ffffff;
  --inset: #f1f5ea;
  --reel-1: #f4f8ef;
  --reel-2: #e3ecdb;
  --panel: rgba(255, 255, 255, 0.7);
  --line-on-grass: rgba(40, 80, 50, 0.18);
  background-image:
    radial-gradient(1200px 760px at 50% -12%, rgba(200, 120, 110, 0.16), rgba(223, 233, 216, 0) 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.30) 0 60px, rgba(40, 80, 50, 0.04) 60px 120px),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
}

/* ---------- 162-0 palette: stitch-red accents ---------- */
body.mlb .brand-sub { color: var(--stitch); border-color: var(--stitch); }
body.mlb .brand-dash { color: var(--stitch); }
body.mlb .accent { color: var(--stitch); }
body.mlb .r-pos { color: var(--stitch); }
body.mlb .primary-btn {
  background: linear-gradient(135deg, #e4737a, #b9404a);
  color: #fff;
  box-shadow: 0 10px 26px rgba(185, 64, 74, 0.4);
}
body.mlb .primary-btn:hover { box-shadow: 0 14px 32px rgba(185, 64, 74, 0.5); }
body.mlb .mode-card:hover { border-color: var(--stitch); box-shadow: 0 10px 26px rgba(185, 64, 74, 0.22); }
body.mlb .ghost-btn:hover { border-color: var(--stitch); color: var(--stitch); }

body.mlb .cand-stats { color: var(--stitch); }
body.mlb .cand-pos {
  background: rgba(20, 40, 28, 0.66);
  border-color: rgba(217, 130, 135, 0.28);
  color: #ece6d8;
}
body.mlb .cand-pos.pos-filled { color: #97a08e; }
body.mlb .reel { border-color: rgba(217, 130, 135, 0.18); }
body.mlb .reel span { color: #f1efe8; }
:root[data-theme="light"] body.mlb .reel span { color: #5a2225; }
body.mlb .rate-fill.def { background: linear-gradient(90deg, #b9404a, #f0b9bb); }

/* ---------- results: spacing around the diamond ---------- */
body.mlb .results-actions { margin-top: 22px; }
body.mlb .results-card { padding-bottom: 30px; }

/* ---------- full-page park markings (foul lines + arc) ---------- */
.park-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.park-bg .foul-l, .park-bg .foul-r {
  position: absolute; bottom: -10%; width: 3px; height: 70%;
  background: var(--line-on-grass);
}
.park-bg .foul-l { left: 50%; transform: rotate(38deg); transform-origin: bottom; }
.park-bg .foul-r { left: 50%; transform: rotate(-38deg); transform-origin: bottom; }
.park-bg .arc {
  position: absolute; left: 50%; top: 4%; width: 540px; height: 540px;
  transform: translateX(-50%); border: 2px solid var(--line-on-grass);
  border-radius: 50%;
}

/* ---------- title emblem — identical sizing to the other games ---------- */
img.mlb-emblem {
  display: block;
  width: clamp(170px, 40vw, 248px);
  height: auto;
  margin: 0 auto clamp(8px, 2vh, 16px);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

/* ---------- results diamond (the starting nine) ---------- */
.diamond {
  position: relative; width: 100%; max-width: 440px; margin: 20px auto 0;
  aspect-ratio: 3 / 4.1; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    /* home-plate dirt circle at the bottom */
    radial-gradient(120% 80% at 50% 100%, #7a5c39 0 13%, rgba(122,92,57,0) 14%),
    /* outfield mowing arcs */
    repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,0.05) 0 20px, rgba(255,255,255,0) 20px 40px),
    linear-gradient(160deg, #2f7a4c, #205e39 60%, #184a2c);
}
/* dirt infield: filled tan diamond with base bags at the corners, a grass
   cutout in the middle, and the pitcher's mound */
.diamond::before {
  content: ""; position: absolute; left: 50%; top: 55%;
  width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  background:
    radial-gradient(circle at 7% 7%, #fff 0 5px, transparent 6px),     /* base */
    radial-gradient(circle at 93% 7%, #fff 0 5px, transparent 6px),     /* base */
    radial-gradient(circle at 7% 93%, #fff 0 5px, transparent 6px),     /* base */
    radial-gradient(circle at 93% 93%, #fff 0 5px, transparent 6px),    /* home */
    radial-gradient(circle at 50% 50%, #b08a55 0 7%, #b08a55 7%, transparent 8%),  /* mound */
    radial-gradient(circle at 50% 50%, #2f7a4c 0 31%, transparent 32%), /* infield grass */
    linear-gradient(135deg, #c6a472, #b0894f);                          /* dirt skin */
}
.diamond-player {
  position: absolute; transform: translate(-50%, -50%);
  width: 84px; text-align: center; z-index: 1;
}
.dp-dot {
  width: 34px; height: 34px; margin: 0 auto 4px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.dp-dot span { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 9.5px; color: #fff; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.dp-name { font-family: "Inter", sans-serif; font-weight: 700; font-size: 11px; color: #fff; line-height: 1.05; text-shadow: 0 1px 3px rgba(0,0,0,0.75); }
.dp-meta { font-size: 9px; color: rgba(255,255,255,0.82); margin-top: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
@media (max-width: 460px) {
  .diamond-player { width: 68px; }
  .dp-name { font-size: 10px; }
  .dp-dot { width: 30px; height: 30px; }
}

/* ---------- compact 9-slot draft tracker ---------- */
body.mlb .slot-chip { flex: 0 1 62px; min-width: 54px; padding: 7px 4px 8px; }
body.mlb .slot-chip .sc-name, body.mlb .slot-chip .sc-meta, body.mlb .slot-chip .sc-empty { display: none; }
body.mlb .slot-chip .sc-pos { font-size: 11px; letter-spacing: 0.5px; }

/* ---------- leaderboard: stitch red ---------- */
body.mlb .board-tab.active { background: rgba(217, 89, 95, 0.16); border-color: var(--stitch); color: var(--text); }
body.mlb .board-name-link:hover { color: var(--stitch); }

/* ---------- shared account dropdown menu ---------- */
.account-menu {
  position: absolute; top: 56px; right: 14px; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45); padding: 8px; min-width: 190px; text-align: left;
  backdrop-filter: blur(8px);
}
.account-menu[hidden] { display: none; }
.account-menu .am-name { padding: 8px 12px 10px; font-weight: 700; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit;
  font: inherit; padding: 9px 12px; border-radius: 9px; cursor: pointer;
}
.account-menu button:hover { background: var(--line); }

/* ---------- re-draw buttons: keep the count badge inside ---------- */
body.mlb .respin-btn { font-size: 12px; padding: 11px 8px; overflow: hidden; }
body.mlb .respin-btn .count { min-width: 14px; padding: 1px 5px; margin-left: 5px; font-size: 10.5px; }

/* ---------- signup CTA: stitch red ---------- */
body.mlb .signup-cta { border-color: var(--stitch); background: rgba(217, 89, 95, 0.07); }
body.mlb .signup-cta:hover { background: rgba(217, 89, 95, 0.14); }

/* ---------- Home Run Chase mode ---------- */
/* full-width third mode card on the title screen */
body.mlb .mode-grid .mode-card-wide { grid-column: 1 / -1; }

/* results screen: the diamond container becomes a batting-order list */
body.mlb .diamond.as-list { height: auto; min-height: 0; background: none; border: none; padding: 0; }
body.mlb .diamond.as-list::before { display: none; }   /* hide the dirt-infield art in HR list view */
body.mlb .hr-lineup { display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.mlb .hr-bat {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px;
}
body.mlb .hr-dot {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Oswald", sans-serif; font-weight: 700; font-size: 14px;
  color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
body.mlb .hr-bat-name {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  font-weight: 700; text-align: left; line-height: 1.2;
}
body.mlb .hr-bat-meta { font-weight: 500; font-size: 12px; color: var(--text-dim); }
body.mlb .hr-bat-hr {
  flex: 0 0 auto; font-family: "Oswald", sans-serif; font-weight: 700;
  font-size: 24px; color: var(--stitch); line-height: 1;
}
body.mlb .hr-bat-hr span { font-size: 11px; color: var(--text-faint); margin-left: 3px; }