/* index.css — slate, game strip and the prop table. Tokens from professional.css. */

.home{max-width:1240px;margin:0 auto;padding:22px 20px 64px}

/* --- slate header --- */
.slate-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
 flex-wrap:wrap;padding-bottom:14px}
.slate-head h1{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.slate-head .sub{margin:5px 0 0;color:var(--color-text-tertiary);font-size:.875rem}
.hitrate{color:var(--color-accent-gold);font-weight:700}
.slate-nav{display:flex;align-items:center;gap:7px}
.slate-nav a,.slate-nav input{background:var(--color-bg-input);
 border:1px solid var(--color-border-default);border-radius:var(--radius-md);
 color:var(--color-text-secondary);padding:8px 13px;font:inherit;font-size:.9375rem;
 text-decoration:none;color-scheme:dark}
.slate-nav a:hover{border-color:var(--color-border-strong);color:var(--color-text-primary)}

/* --- game strip: games are the FILTER, props are the content --- */
.strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;display:grid;grid-template-columns:auto auto auto;gap:2px 8px;
 align-items:center;background:var(--color-bg-card);border:1px solid var(--color-border-subtle);
 border-radius:var(--radius-md);padding:9px 13px;cursor:pointer;font:inherit;
 color:var(--color-text-primary);transition:border-color var(--transition-fast),background var(--transition-fast)}
.chip:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-strong)}
.chip.on{border-color:var(--color-accent-gold);background:var(--color-bg-card-hover)}
.chip img{object-fit:contain}
.chip-mid{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.chip-sc{font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums}
.chip-at{font-size:.8125rem;color:var(--color-text-muted)}
.chip-t{font-size:.625rem;color:var(--color-text-muted);white-space:nowrap}
.chip-n{grid-column:1/-1;font-size:.6875rem;color:var(--color-text-muted);text-align:center;
 display:flex;align-items:center;justify-content:center;gap:4px}
.chip.on .chip-n{color:var(--color-accent-gold)}
.livedot{width:6px;height:6px;border-radius:50%;background:var(--color-loss);
 animation:livepulse 2s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}

.live-banner{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:11px 16px;
 border:1px solid var(--color-loss);border-radius:var(--radius-md);
 background:rgba(224,82,82,.08);color:var(--color-text-primary);
 text-decoration:none;font-size:.875rem;font-weight:500}
.live-banner:hover{background:rgba(224,82,82,.14);color:var(--color-text-primary)}

/* --- stat filters --- */
.bar{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 14px;border-top:1px solid var(--color-border-subtle)}
.bar button{background:var(--color-bg-input);border:1px solid var(--color-border-subtle);
 color:var(--color-text-secondary);border-radius:999px;padding:6px 14px;font:inherit;
 font-size:.8125rem;cursor:pointer}
.bar button:hover{border-color:var(--color-border-strong)}
.bar button.on{background:var(--color-accent-gold);border-color:var(--color-accent-gold);
 color:#14181f;font-weight:600}

/* --- the prop row: one bettable decision, scannable in about a second --- */
.head{display:grid;gap:14px;padding:0 16px 8px;grid-template-columns:2fr .8fr 1.4fr .8fr .95fr;
 font-size:.6875rem;font-weight:600;color:var(--color-text-muted);
 letter-spacing:.04em;text-transform:uppercase}
.prop{display:grid;gap:14px;align-items:center;grid-template-columns:2fr .8fr 1.4fr .8fr .95fr;
 background:var(--color-bg-card);border:1px solid var(--color-border-subtle);
 border-left:3px solid var(--color-border-subtle);
 border-radius:var(--radius-md);padding:12px 16px;margin-bottom:7px}
.prop:hover{background:var(--color-bg-card-hover);border-color:var(--color-border-strong)}
.prop.win{border-left-color:var(--color-win)}
.prop.loss{border-left-color:var(--color-loss)}
.prop-who{min-width:0}
.prop-name{display:block;font-weight:600;font-size:.9375rem;text-decoration:none;
 color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prop-name:hover{color:var(--color-accent-gold)}
.prop-meta{font-size:.75rem;color:var(--color-text-muted)}
.prop-num{font-size:1.0625rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.prop-num.good{color:var(--color-win)}
.prop-num.bad{color:var(--color-loss)}
.of{font-size:.75rem;color:var(--color-text-muted);font-weight:500}
.prop-lbl{display:block;font-size:.6875rem;color:var(--color-text-muted);margin-top:3px}
.nohist{font-size:.75rem;color:var(--color-text-muted)}
.spark{display:block}
.spark .hit{fill:var(--color-win)}
.spark .miss{fill:#39424f}
.spark .ln{stroke:var(--color-accent-gold);stroke-width:1.25;stroke-dasharray:3 2}
.prop-call{text-align:right;white-space:nowrap}
.call{display:inline-block;padding:4px 11px;border-radius:5px;font-size:.8125rem;font-weight:700}
.call.over{background:rgba(62,193,124,.14);color:var(--color-win)}
.call.under{background:rgba(232,98,74,.14);color:var(--color-loss)}
.verdict{display:block;font-size:.6875rem;margin-top:4px;color:var(--color-text-tertiary)}

/* --- offseason --- */
.countdown{text-align:center;padding:64px 20px 52px}
.cd-days{display:block;font-size:clamp(4.5rem,20vw,10rem);font-weight:800;line-height:.85;
 letter-spacing:-.05em;color:var(--color-accent-gold);font-variant-numeric:tabular-nums}
.cd-today{display:block;font-size:clamp(2.25rem,8vw,4rem);font-weight:800;
 letter-spacing:-.03em;color:var(--color-accent-gold);line-height:1}
.cd-label{display:block;margin-top:16px;font-size:1.0625rem;color:var(--color-text-secondary)}
.cd-detail{margin:10px 0 0;font-size:.9375rem;color:var(--color-text-tertiary)}

@media(max-width:900px){
 .head{display:none}
 .prop{grid-template-columns:1fr auto;gap:9px 14px}
 .prop-who{grid-column:1/-1}
 .prop-chart{grid-column:1/-1}
 .slate-head h1{font-size:1.3125rem}
}
@media(prefers-reduced-motion:reduce){.livedot{animation:none}}