/* Game-card styles shared by the Market Context board and the Watchlist (sports-card.js).
   Mirrors the .game-card block in market-context.css so the two render identically. */

.sport-live-status{ margin-top:8px;font-size:13px;font-weight:700;color:var(--accent2); }
.game-sport-label{ display:none; }

.game-card{
  border:1px solid rgba(34,48,94,.85);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--card);
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  position:relative; /* anchor the corner star/unstar button */
}
.game-card.live{border-color:rgba(141,255,203,.45);box-shadow:0 14px 40px rgba(141,255,203,.07)}

.game-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 36px 11px 14px;border-bottom:1px solid rgba(34,48,94,.7);
  font-size:12px;color:var(--muted);
}
.status-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;font-weight:700;font-size:11px;
  border:1px solid rgba(34,48,94,.9);background:rgba(255,255,255,.02);
}
.status-badge.live{border-color:rgba(141,255,203,.5);background:rgba(141,255,203,.10);color:#8dffcb}
.status-badge.final{border-color:rgba(157,180,255,.4);color:var(--accent2)}
.status-badge .live-dot{width:7px;height:7px}

.game-body{padding:12px 14px}
.team-row{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:7px 0;
}
.team-row + .team-row{border-top:1px solid rgba(34,48,94,.45)}
.team-id{display:flex;align-items:center;gap:9px;min-width:0}
.team-logo{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(135deg, rgba(43,92,255,.75), rgba(157,180,255,.55));
  border:1px solid rgba(234,240,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;letter-spacing:.02em;
}
.ti-text{min-width:0}
.team-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-record{font-size:12px;color:rgba(234,240,255,.5)}
.team-runs{font-size:22px;font-weight:800;min-width:28px;text-align:right}
.team-runs.dim{color:rgba(234,240,255,.35);font-size:15px;font-weight:600}

/* Pre-game matchup */
.matchup-info{margin-top:10px;font-size:12.5px;color:rgba(234,240,255,.62);line-height:1.5}
.matchup-info .mi-label{color:var(--muted);font-weight:600}
.weather{margin-top:6px;font-size:12px;color:rgba(234,240,255,.5)}

/* Live state strip */
.live-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid rgba(34,48,94,.55);
}
.inning{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.inning .arrow{color:var(--accent2)}
.count{font-size:13px;font-weight:700;color:var(--text);margin-left:auto}

/* Base diamond */
.diamond{position:relative;width:42px;height:42px;flex:0 0 auto}
.base{
  position:absolute;width:13px;height:13px;
  background:rgba(34,48,94,.9);border:1px solid rgba(157,180,255,.25);
  transform:rotate(45deg);border-radius:2px;
}
.base.on{background:linear-gradient(135deg,#ffcf7a,#ffb454);border-color:#ffcf7a;
  box-shadow:0 0 8px rgba(255,207,122,.6)}
.base.second{top:0;left:50%;margin-left:-6.5px}
.base.first{top:50%;right:0;margin-top:-6.5px}
.base.third{top:50%;left:0;margin-top:-6.5px}

/* Live pitching / at-bat matchup */
.matchup-live{ margin-top:10px;display:flex;flex-direction:column;gap:6px; }
.ml-row{ display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px; }
.ml-label{color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.ml-name{color:var(--text);font-weight:700;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-break{font-size:12.5px;color:var(--muted);font-style:italic}

/* Expand box score */
.expand-btn{
  width:100%;border:0;border-top:1px solid rgba(34,48,94,.7);
  background:rgba(255,255,255,.02);color:var(--accent2);
  padding:10px;cursor:pointer;font:inherit;font-weight:600;font-size:13px;
  transition:background .15s;
}
.expand-btn:hover{background:rgba(43,92,255,.08)}
.boxscore{display:none;padding:0 14px 14px;border-top:1px solid rgba(34,48,94,.55)}
.boxscore.open{display:block}
.box-team{margin-top:14px}
.box-team-title{font-size:12px;font-weight:800;color:var(--accent2);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.05em}
.box-table{width:100%;border-collapse:collapse;font-size:12px}
.box-table th{
  text-align:right;color:var(--muted);font-weight:600;padding:4px 5px;
  border-bottom:1px solid rgba(34,48,94,.6);font-size:11px;
}
.box-table th:first-child{text-align:left}
.box-table td{text-align:right;padding:4px 5px;border-bottom:1px solid rgba(34,48,94,.35)}
.box-table td:first-child{text-align:left;white-space:nowrap;max-width:130px;
  overflow:hidden;text-overflow:ellipsis}
.box-table tr.cur td{color:#8dffcb}
.box-table tr.cur td:first-child::after{content:" ●";font-size:9px}
.box-empty{color:var(--muted)}
.pos-tag{color:rgba(234,240,255,.4)}
.box-loading{padding:18px 0}