/* Styles for the event feed, feats, box scores and the games (grid,
   higher-or-lower, guess the player). Colors come from style.css variables. */

/* ---- shared: filter chips, tags, segmented control ------------------------------ */
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ev-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.3;
}
.ev-chip:hover { border-color: var(--ev, var(--accent)); }
.ev-chip.on { background: var(--accent-soft); border-color: var(--ev, var(--accent)); box-shadow: inset 0 0 0 1px var(--ev, var(--accent)); font-weight: 600; }
.ev-chip.zero { opacity: .5; }
.ev-chip-n { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 400; }
.ev-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ev, var(--dim)); flex: 0 0 auto; }
.ev-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); font-size: 13px; }
.ev-x { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; color: var(--dim); }
.ev-x:hover { color: var(--text); }

/* ---- event feed ---------------------------------------------------------------- */
.ev-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.ev-controls { margin-bottom: 0; }
.ev-search { flex: 1 1 220px; min-width: 0; }
.ev-zoom { display: inline-flex; align-items: center; }
.ev-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ev-chart { width: 100%; height: auto; display: block; }
.ev-hit { cursor: pointer; }
.ev-col:hover rect:not(.ev-hit) { filter: brightness(1.15); }
.ev-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ev-item.ev-big .ev-text { font-weight: 500; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12px; font-variant-numeric: tabular-nums; }
.ev-type {
	font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
	background: color-mix(in srgb, var(--ev) 18%, transparent); color: var(--text); border-left: 3px solid var(--ev);
}
.ev-score { color: var(--gold); font-size: 11px; }
.ev-text { overflow-wrap: anywhere; }
.ev-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.ev-none { list-style: none; padding: 14px 0; }
.ev-more { display: flex; gap: 10px; justify-content: center; align-items: center; padding-top: 12px; }

/* ---- feats ---------------------------------------------------------------------------- */
.ft-stats { margin-bottom: 16px; }
.ft-chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ft-chart-head .card-title { display: flex; gap: 8px; align-items: center; margin: 0; }
.ft-chart-head select { text-transform: none; letter-spacing: 0; font-size: 13px; }
.ft-scatter { width: 100%; height: auto; }
.ft-plot { position: relative; }
.ft-dotmap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ft-dotmap-hover { pointer-events: none; }
.ft-dot { fill: var(--link); fill-opacity: .45; stroke: var(--link); stroke-opacity: .7; stroke-width: .5; cursor: pointer; }
.ft-dot.po { fill: var(--accent); fill-opacity: .85; stroke: var(--panel); stroke-width: 1; }
.ft-dot:hover { fill-opacity: 1; stroke: var(--text); stroke-width: 1.5; }
.ft-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--link); opacity: .6; }
.ft-key.po { background: var(--accent); opacity: 1; }
.ft-res.w { color: var(--good); font-weight: 600; }
.ft-res.l { color: var(--bad); }
.ft-res { white-space: nowrap; font-size: 12px; }
.ft-barcell { width: 30%; }

/* ---- box score ---------------------------------------------------------------------------- */
.gm-crumbs { margin-bottom: 10px; }
.gm-head { padding: 16px 18px; }
.gm-head-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.gm-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.gm-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gm-score .gm-team:last-child { flex-direction: row-reverse; text-align: right; }
.gm-team-badge { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; border: 3px solid; flex: 0 0 auto; }
.gm-team-name { min-width: 0; }
.gm-team-full { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.gm-team-pts { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; margin-left: auto; line-height: 1; }
.gm-score .gm-team:last-child .gm-team-pts { margin-left: 0; margin-right: auto; }
.gm-team.lost .gm-team-pts { color: var(--dim); font-weight: 600; }
.gm-team.won .gm-team-pts { color: var(--team, var(--text)); }
.gm-final { text-align: center; }
.gm-final-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.gm-series { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 14px 0 4px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; }
table.data.gm-line { margin-top: 12px; width: auto; min-width: 280px; }
.gm-line td, .gm-line th { padding: 3px 10px !important; }
.gm-line .gm-qwin { font-weight: 700; }
.gm-line tr.gm-win td:last-child { color: var(--good); }
.gm-box-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; border-left: 4px solid var(--team, var(--accent)); padding-left: 8px; }
.gm-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.gm-table tfoot tr.muted td { font-weight: 400; border-top: none; font-size: 12px; }
.gm-table .gm-sep td { background: var(--panel-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding-top: 3px; padding-bottom: 3px; }
.gm-table tr.gm-best td { background: var(--accent-soft); }
.gm-table tr.gm-dnp { opacity: .7; }
.gm-table .gm-pts { font-weight: 700; }
.gm-pos { color: var(--good); }
.gm-neg { color: var(--bad); }
.gm-pcell { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.gm-perf { display: grid; gap: 12px; }
.gm-perf-item { display: flex; gap: 12px; align-items: center; }
.gm-perf-name { font-weight: 600; font-size: 15px; }
.gm-clutch { margin: 0; padding-left: 18px; }
.gm-clutch li { margin: 4px 0; }
.gm-compare { display: grid; gap: 8px; }
.gm-cmp-head { display: flex; justify-content: space-between; }
.gm-cmp-vals { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-size: 13px; }
.gm-cmp-vals .lead { font-weight: 700; }
.gm-cmp-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--chip); gap: 2px; }
.gm-nav { display: grid; gap: 8px; }
.gm-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.gm-nav-team { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line, var(--chip)); }
.gm-nav-team:last-child { border-bottom: 0; padding-bottom: 0; }
.gm-nav-step { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.gm-h2 { margin: 6px 0 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gm-mini td { vertical-align: middle; }
table.data.gm-mini td.small { white-space: normal; }
.gm-mini tr:first-child td { font-weight: 500; }
.gm-match .gm-w { font-weight: 700; }
.gm-match .gm-l { color: var(--dim); }

/* game flow */
.gm-flow-stats { margin-bottom: 8px; }
.gm-flow-svg { width: 100%; height: auto; display: block; }
.gm-flow-sep line { stroke: var(--line); stroke-dasharray: 3 3; }
.gm-flow-zero { stroke: var(--dim); stroke-width: 1; }
.gm-flow-q, .gm-flow-lab { fill: var(--dim); font-size: 11px; }
.gm-flow-end { font-size: 11px; font-weight: 700; }
.gm-flow-hit { cursor: default; }
.gm-swings { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.gm-swing { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-swing.even { color: var(--dim); }

/* ---- compare exports (diff) ------------------------------------------------------------------- */
.df-files { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 14px; }
.df-file { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.df-file.open { border-color: var(--accent); }
.df-file-role { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); font-weight: 600; }
.df-file-name { font-weight: 700; font-size: 16px; }
.df-arrow { align-self: center; font-size: 22px; color: var(--dim); }
.df-stats { margin-bottom: 16px; }
.df-sec .card-title { display: flex; align-items: center; gap: 8px; }
.df-count { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--dim); letter-spacing: 0; }
.df-people { margin: 0; padding-left: 18px; }
.df-people li { margin: 3px 0; }
.df-events { list-style: none; margin: 0; padding: 0; }
.df-events li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.df-events li:last-child { border-bottom: none; }
.df-h4 { margin: 4px 0 8px; font-size: 13px; }
.df-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; }
.df-rec ul { margin: 4px 0 0; padding-left: 18px; }
.df-rec li { margin: 2px 0; }
.df-rec-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.df-up { color: var(--good); font-weight: 700; }
.df-down { color: var(--bad); font-weight: 700; }
.df-warn { border-left: 3px solid var(--warn); }
@media (max-width: 640px) {
	.df-files { grid-template-columns: minmax(0, 1fr); }
	.df-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---- immaculate grid ------------------------------------------------------------------------ */
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; padding: 4px;
	border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; position: relative; overflow: hidden;
}
@keyframes ig-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes ig-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ig-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- higher or lower ------------------------------------------------------------------------ */
.hl-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hl-score { display: flex; gap: 10px; justify-content: center; }
.hl-q { text-align: center; font-size: 20px; }
.hl-arena { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hl-vs { align-self: center; font-weight: 800; color: var(--dim); font-size: 14px; text-transform: uppercase; }
.hl-card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; cursor: pointer; min-width: 0;
	background: var(--panel); color: var(--text); border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font: inherit;
	transition: transform .15s, border-color .15s, opacity .3s;
}
.hl-card:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.hl-card:disabled { cursor: default; }
.hl-name { font-weight: 700; font-size: 17px; text-align: center; line-height: 1.2; }
.hl-sub { text-align: center; }
.hl-teams { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.hl-val { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 40px; color: var(--dim); }
.hl-card.revealed .hl-val { color: var(--text); animation: ig-pop .4s; }
.hl-card.higher { border-color: var(--good); }
.hl-card.higher .hl-val { color: var(--good); }
.hl-card.lower { opacity: .75; }
.hl-card.picked.lower { border-color: var(--bad); opacity: 1; }
.hl-mark { position: absolute; top: 8px; right: 10px; font-size: 22px; font-weight: 800; }
.hl-mark.good { color: var(--good); }
.hl-mark.bad { color: var(--bad); }
.hl-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 60px; text-align: center; }
.hl-result.good { color: var(--good); font-weight: 600; }
.hl-result.bad { color: var(--bad); font-weight: 600; }
.hl-over { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.hl-final { font-size: 18px; }
.hl-over .row { justify-content: center; }
@media (hover: none) { .hl-tip { display: none; } }

/* ---- guess the player ------------------------------------------------------------------------ */
.gp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.gp-clues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.gp-clue.locked { background: var(--panel-2); box-shadow: none; border-style: dashed; }
.gp-clue.locked .card-title { opacity: .6; }
.gp-clue.fresh { animation: gp-in .45s ease-out; border-color: var(--accent); }
@keyframes gp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gp-num { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); align-items: center; justify-content: center; font-size: 11px; margin-right: 8px; letter-spacing: 0; }
.gp-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.gp-fact-v { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.gp-teams { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-stint { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gp-swatch { display: flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 6px; border: 3px solid; font-size: 11px; font-weight: 800; }
.gp-radar-wrap { display: flex; flex-direction: column; align-items: center; }
.gp-radar { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.gp-ring { fill: none; stroke: var(--line); }
.gp-spoke { stroke: var(--line); }
.gp-axis { fill: var(--dim); font-size: 9px; }
.gp-shape { fill: var(--accent); fill-opacity: .3; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.gp-accs { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-acc { padding: 2px 9px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 600; }
.gp-acc.gold { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.gp-face { display: flex; justify-content: center; }
.gp-side { display: flex; flex-direction: column; position: sticky; top: calc(var(--topH) + 12px); }
.gp-side .picker { width: 100%; min-width: 0; }
.gp-side .ig-msg { margin-top: 8px; }
.gp-guesses { display: grid; gap: 8px; }
.gp-guess { padding: 6px 8px; border-radius: 8px; background: var(--panel-2); }
.gp-guess.right { background: color-mix(in srgb, var(--good) 15%, transparent); }
.gp-guess-name { font-weight: 600; }
.gp-cmp { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gp-cmp-cell { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); }
.gp-cmp-cell.ok { background: color-mix(in srgb, var(--good) 20%, transparent); border-color: var(--good); }
.gp-cmp-cell.part { background: color-mix(in srgb, var(--warn) 18%, transparent); border-color: var(--warn); }
.gp-result.won { border-color: var(--good); }
.gp-result.lost { border-color: var(--bad); }
.gp-result-top { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.gp-verdict { font-size: 20px; font-weight: 800; }
.gp-answer { font-size: 17px; font-weight: 700; }
.gp-boxes { font-size: 22px; letter-spacing: 2px; margin-bottom: 10px; }

@media (max-width: 980px) {
	.gp-layout { grid-template-columns: minmax(0, 1fr); }
	.gp-side { position: static; order: -1; }
}
@media (max-width: 640px) {
	.hl-arena { gap: 6px; }
	.hl-card { padding: 12px 6px; }
	.hl-name { font-size: 14px; }
	.hl-val { font-size: 24px; }
	.hl-card .face { width: 72px !important; height: 108px !important; }
	.hl-q { font-size: 17px; }
	.gp-clues { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.ev-item { grid-template-columns: minmax(0, 1fr); }
	.gm-score { grid-template-columns: minmax(0, 1fr) auto; }
	.gm-score .gm-team:last-child { flex-direction: row; text-align: left; grid-column: 1; }
	.gm-score .gm-team:last-child .gm-team-pts { margin-left: auto; margin-right: 0; }
	.gm-final { grid-column: 2; grid-row: 1 / span 2; }
	.gm-team-badge { width: 40px; height: 40px; font-size: 12px; border-width: 2px; }
	.gm-team-pts { font-size: 30px; }
	.gm-team-full { font-size: 14px; }
	.gx-hide-sm { display: none; }
	.page-events .picker, .page-feats .picker { min-width: 0; width: 100%; }
	/* Chips and quick views scroll sideways instead of filling the first screen. */
	.ev-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; margin-right: -4px; padding: 2px 4px; }
	.ev-presets::-webkit-scrollbar { display: none; }
	.ev-chips { flex-wrap: wrap; max-width: 100%; }
	.ev-chip, .ev-presets > * { flex: 0 0 auto; white-space: nowrap; }
}

/* Keep the player column visible while a box score scrolls sideways on phones. */
.gm-table td.gm-pcell, .gm-table thead th:first-child, .gm-table tfoot td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.gm-table tr.gm-best td.gm-pcell { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.gm-table thead th:first-child { z-index: 2; }
.ft-axis-label { fill: var(--dim); font-size: 11px; }
.ig-flash { padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13px; animation: ig-fade .25s; }
.ig-flash.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.ig-flash.bad { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.ig-flash.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
@keyframes ig-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* Must-watch rows: the reason sits under the matchup on phones instead of a squeezed column. */
.hy-why-inline { display: none; }
@media (max-width: 640px) { .hy-watch td.hy-why { display: none; } .hy-why-inline { display: block; margin-top: 2px; white-space: normal; } }