:root{
--bg:#0a0d14;
--bg-2:#0e131e;
--panel:#131826;
--panel-2:#1a2030;
--line:#1f2638;
--line-2:#2c3447;
--ink:#ebe8de;
--ink-2:#a4a8b4;
--ink-3:#646a78;
--accent:#d4a847; /* amber — the brand */
--accent-2:#e8c574;
--blue:#5b8fc7; /* institutional blue */
--blue-2:#7eafe0;
--pos:#6fb079; /* muted green for positive directional */
--neg:#c2645e; /* muted red for negative directional */
--serif: "Instrument Serif", Georgia, serif;
--sans: "Geist", -apple-system, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{
background:
radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(212,168,71,0.06), transparent 60%),
var(--bg);
min-height:100vh;
}
.mono{font-family:var(--mono);font-feature-settings:"tnum","zero"}
.serif{font-family:var(--serif)}
.tnum{font-variant-numeric:tabular-nums}
.dim{color:var(--ink-2)}
.muted{color:var(--ink-3)}
/* Subtle scanline overlay */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
background:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
opacity:0.5;
}
/* ============ TICKER ============ */
.ticker{
position:sticky;top:0;z-index:20;
background:#000;
border-bottom:1px solid var(--line-2);
height:32px;overflow:hidden;
display:flex;align-items:center;
}
.ticker-label{
flex-shrink:0;padding:0 16px;height:100%;display:flex;align-items:center;
font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:0.22em;text-transform:uppercase;
border-right:1px solid var(--line-2);
background:#000;z-index:2;
}
.ticker-label .dot{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--accent);box-shadow:0 0 8px var(--accent);
margin-right:8px;animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.85)}}
.ticker-track{
display:flex;gap:48px;
font-family:var(--mono);font-size:11px;color:var(--ink);
white-space:nowrap;
animation:tickerMove 80s linear infinite;
padding-left:48px;
}
.ticker-track .item{display:flex;align-items:center;gap:8px}
.ticker-track .lbl{color:var(--ink-3);font-size:10px;letter-spacing:0.1em;text-transform:uppercase}
.ticker-track .v{color:var(--ink)}
.ticker-track .v.up{color:var(--pos)}
.ticker-track .v.dn{color:var(--neg)}
.ticker-track .v.am{color:var(--accent)}
.ticker-track .sep{color:var(--line-2)}
@keyframes tickerMove{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* ============ NAV ============ */
nav.top{
position:sticky;top:32px;z-index:15;
display:flex;align-items:center;justify-content:space-between;
padding:14px 32px;
background:rgba(10,13,20,0.92);
backdrop-filter: blur(8px);
border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:12px}
.brand .glyph{font-family:var(--serif);font-size:24px;color:var(--accent);letter-spacing:0.02em;line-height:1}
.brand .name{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--ink);text-transform:uppercase;font-weight:500}
.brand .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase}
.nav-meta{display:flex;gap:24px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em;text-transform:uppercase;align-items:center}
.nav-meta span b{color:var(--accent);font-weight:500}
.proc-indicator{display:flex;align-items:center;gap:8px}
.proc-indicator .bars{display:flex;gap:2px;height:11px;align-items:flex-end}
.proc-indicator .bars span{
display:inline-block;width:2px;background:var(--accent);
animation:bars 1.1s ease-in-out infinite;
}
.proc-indicator .bars span:nth-child(1){animation-delay:0s;height:40%}
.proc-indicator .bars span:nth-child(2){animation-delay:0.15s;height:70%}
.proc-indicator .bars span:nth-child(3){animation-delay:0.30s;height:100%}
.proc-indicator .bars span:nth-child(4){animation-delay:0.45s;height:60%}
@keyframes bars{
0%,100%{transform:scaleY(0.3)}
50%{transform:scaleY(1)}
}
/* ============ HERO ============ */
.hero{padding:72px 32px 48px;max-width:1480px;margin:0 auto;position:relative;z-index:2}
.hero .eyebrow{text-align:center;font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0.22em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.hero .eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(to right, var(--line-2), transparent)}
.hero h1{font-family:var(--serif);font-size:clamp(32px, 4.4vw, 60px);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);font-weight:400;text-align:center;margin:36px auto 56px;white-space:nowrap}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lede{margin-top:24px;max-width:760px;font-size:17px;color:var(--ink-2);line-height:1.6}
.hero .lede strong{color:var(--ink);font-weight:500}
.eq{margin-top:36px;padding:20px 24px;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);max-width:760px;font-family:var(--mono);font-size:13px;color:var(--ink-2);line-height:1.7;overflow-x:auto;white-space:nowrap}
.eq .var{color:var(--accent)}
.eq .key{color:var(--blue)}
/* ============ STATS RIBBON ============ */
.ribbon{
margin:48px 32px 0;max-width:1480px;margin-left:auto;margin-right:auto;
display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid var(--line);
background:var(--panel);
}
.ribbon .stat{padding:24px 28px;border-right:1px solid var(--line);position:relative;overflow:hidden}
.ribbon .stat::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right, var(--accent), transparent);
opacity:0.4;
}
.ribbon .stat:last-child{border-right:none}
.stat .label{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.16em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.stat .label .live-tick{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.8s infinite}
.stat .num{font-family:var(--serif);font-size:48px;line-height:1;color:var(--ink)}
.stat .num.acc{color:var(--accent)}
.stat .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:8px;letter-spacing:0.04em}
.stat .meta .pos{color:var(--pos)}
.stat .meta .neg{color:var(--neg)}
.stat .meta .am{color:var(--accent)}
/* ============ SECTIONS ============ */
section.module{
max-width:1480px;margin:88px auto 0;padding:0 32px;position:relative;z-index:2;
}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.section-head h2{font-family:var(--serif);font-size:36px;font-weight:400;letter-spacing:-0.01em}
.section-head .tag{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase}
.section-head h2 em{font-style:italic;color:var(--accent)}
/* ============ PREDICTOR ============ */
.predict{display:grid;grid-template-columns:1fr 1.4fr;gap:24px}
.predict-controls{background:var(--panel);border:1px solid var(--line);padding:32px;position:relative}
.predict-controls .auto-badge{
position:absolute;top:14px;right:14px;
font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:0.2em;
border:1px solid var(--accent);padding:3px 8px;
display:flex;align-items:center;gap:6px;
}
.predict-controls .auto-badge .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.4s infinite}
.predict-controls .auto-badge.paused{color:var(--ink-3);border-color:var(--line-2)}
.predict-controls .auto-badge.paused .dot{background:var(--ink-3);animation:none}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px}
.field select, .field input[type=number]{
width:100%;padding:12px 14px;
background:var(--bg-2);
border:1px solid var(--line-2);
color:var(--ink);
font-family:var(--mono);font-size:14px;
outline:none;transition:border-color 0.15s;
appearance:none;
background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}
.field input[type=number]{background-image:none}
.field select:focus, .field input:focus{border-color:var(--accent)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{
width:100%;padding:14px 20px;
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
font-family:var(--mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;transition:all 0.15s;
margin-top:8px;
}
.btn:hover{background:var(--accent);color:var(--bg)}
.btn-ghost{
background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
padding:8px 14px;cursor:pointer;margin-top:6px;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Output panel */
.predict-out{
background:var(--panel);border:1px solid var(--line);padding:32px;
display:flex;flex-direction:column;gap:24px;min-height:480px;
position:relative;overflow:hidden;
}
.predict-out::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(to right, transparent, var(--accent), transparent);
opacity:0.5;
}
.predict-out .stamp{
position:absolute;top:14px;right:18px;
font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.2em;
}
.predict-out .calc-overlay{
position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
background-size:200% 100%;
animation:scan 1.4s linear infinite;
opacity:0;transition:opacity 0.3s;
pointer-events:none;
}
.predict-out.calculating .calc-overlay{opacity:1}
@keyframes scan{from{background-position:100% 0}to{background-position:-100% 0}}
.matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.team-block{text-align:center;transition:opacity 0.4s}
.team-block.fading{opacity:0.3}
.team-block .abbr{font-family:var(--serif);font-size:56px;line-height:1;color:var(--ink)}
.team-block .name{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px;letter-spacing:0.08em}
.team-block .pts{font-family:var(--mono);font-size:32px;color:var(--accent);margin-top:14px;font-variant-numeric:tabular-nums;font-weight:500}
.team-block .pts .sub{font-size:11px;color:var(--ink-3);margin-left:4px}
.vs{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink-3)}
.prob-bar{position:relative;height:42px;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden}
.prob-bar .fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg, rgba(212,168,71,0.18), rgba(212,168,71,0.4));border-right:2px solid var(--accent);transition:width 0.8s cubic-bezier(0.22, 1, 0.36, 1)}
.prob-bar .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-family:var(--mono);font-size:13px;letter-spacing:0.04em}
.prob-bar .label .left{color:var(--ink)}
.prob-bar .label .right{color:var(--ink-2)}
.breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.breakdown .item{padding:14px;background:var(--bg-2);border:1px solid var(--line-2);transition:border-color 0.3s}
.breakdown .item.flash{border-color:var(--accent)}
.breakdown .item .k{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:6px}
.breakdown .item .v{font-family:var(--mono);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.breakdown .item .v.acc{color:var(--accent)}
.breakdown .item .v.blue{color:var(--blue)}
.distribution{position:relative;height:120px;background:var(--bg-2);border:1px solid var(--line-2);padding:8px 12px;overflow:hidden}
.distribution svg{transition:opacity 0.3s}
/* Calc log */
.calc-log{
position:absolute;bottom:14px;right:18px;
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.04em;
display:flex;flex-direction:column;align-items:flex-end;gap:2px;
opacity:0;transition:opacity 0.3s;
}
.predict-out.calculating .calc-log{opacity:0.7}
.calc-log .ln{color:var(--accent)}
/* ============ CHARTS ============ */
.chart-wrap{background:var(--panel);border:1px solid var(--line);padding:32px;}
.chart-row{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.chart-title{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.16em;text-transform:uppercase;margin-bottom:18px;display:flex;justify-content:space-between}
.chart-title .scale{color:var(--accent)}
/* SVG draw-in */
.svg-draw path, .svg-draw circle, .svg-draw rect, .svg-draw line{
opacity:0;
animation:fadeIn 0.6s forwards;
}
@keyframes fadeIn{to{opacity:1}}
/* ============ TEAM TABLE ============ */
.tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.tbl th{
text-align:left;padding:12px 14px;
background:var(--bg-2);
border-bottom:1px solid var(--line-2);
font-weight:500;color:var(--ink-3);
letter-spacing:0.14em;text-transform:uppercase;font-size:10px;
cursor:pointer;user-select:none;
}
.tbl th:hover{color:var(--accent)}
.tbl th.sorted{color:var(--accent)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:rgba(212,168,71,0.04)}
.tbl tr.highlight td{background:rgba(212,168,71,0.06);transition:background 0.5s}
.bar-cell{position:relative;width:100%;height:6px;background:var(--bg-2);overflow:hidden}
.bar-cell .b{position:absolute;top:0;height:100%}
.bar-cell .b.pos{background:var(--accent);left:50%}
.bar-cell .b.neg{background:var(--blue);right:50%}
.bar-cell .mid{position:absolute;top:0;left:50%;width:1px;height:100%;background:var(--line-2)}
/* ============ COUNCIL ============ */
.council-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:24px}
.council-card{background:var(--panel);border:1px solid var(--line);padding:24px 22px;position:relative;overflow:hidden;transition:all 0.3s}
.council-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg, var(--accent), transparent);
}
.council-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.council-card .num{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:14px}
.council-card .face{
width:64px;height:64px;border-radius:50%;border:1px solid var(--line-2);
background:var(--bg-2);display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-size:22px;color:var(--accent);font-style:italic;
margin-bottom:14px;
}
.council-card h3{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.1;margin-bottom:4px;color:var(--ink)}
.council-card .dates{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.1em;margin-bottom:14px}
.council-card .role{font-size:12px;color:var(--ink-2);line-height:1.55;margin-bottom:16px;min-height:75px}
.council-card .live{padding:12px;background:var(--bg-2);border-left:2px solid var(--accent);font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.55}
.council-card .live b{color:var(--accent);font-weight:500;display:block;font-size:9px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:4px}
.council-card .live .v{color:var(--ink);font-size:14px;font-weight:500}
/* ============ EV CALC ============ */
.ev-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}
.ev-controls{background:var(--panel);border:1px solid var(--line);padding:32px}
.ev-out{
background:var(--panel);border:1px solid var(--line);padding:32px;
display:grid;grid-template-columns:1fr 1fr;gap:18px;
position:relative;
}
.ev-out::before{content:"PASCAL // EV ENGINE";position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.2em}
.ev-tile{background:var(--bg-2);border:1px solid var(--line-2);padding:20px;transition:all 0.3s}
.ev-tile.hero{grid-column:span 2;border-color:var(--accent);background:linear-gradient(135deg, rgba(212,168,71,0.05), rgba(212,168,71,0.01))}
.ev-tile .k{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px}
.ev-tile .v{font-family:var(--serif);font-size:36px;line-height:1;color:var(--ink)}
.ev-tile .v.pos{color:var(--pos)}
.ev-tile .v.neg{color:var(--neg)}
.ev-tile .v.am{color:var(--accent)}
.ev-tile .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px;letter-spacing:0.04em}
/* ============ BANKROLL SIM ============ */
.bank-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:24px}
.bank-controls{background:var(--panel);border:1px solid var(--line);padding:32px;position:relative}
.bank-controls .auto-badge{
position:absolute;top:14px;right:14px;
font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:0.2em;
border:1px solid var(--accent);padding:3px 8px;
display:flex;align-items:center;gap:6px;
}
.bank-controls .auto-badge .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:pulse 1.4s infinite}
.bank-controls .auto-badge.paused{color:var(--ink-3);border-color:var(--line-2)}
.bank-controls .auto-badge.paused .dot{background:var(--ink-3);animation:none}
.bank-controls .frac-row{display:flex;flex-direction:column;gap:8px;margin:18px 0}
.bank-controls .frac-row .opt{
display:flex;justify-content:space-between;align-items:center;
padding:12px 14px;background:var(--bg-2);border:1px solid var(--line-2);
cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--ink-2);
transition:all 0.2s;
}
.bank-controls .frac-row .opt:hover{border-color:var(--accent);color:var(--ink)}
.bank-controls .frac-row .opt.active{border-color:var(--accent);background:rgba(212,168,71,0.06);color:var(--accent)}
.bank-controls .frac-row .opt .meta{color:var(--ink-3);font-size:10px}
.bank-out{background:var(--panel);border:1px solid var(--line);padding:32px;position:relative}
.bank-out::before{content:"THORP // KELLY SIMULATION";position:absolute;top:14px;right:18px;font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.2em}
.bank-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.bank-stat{padding:14px;background:var(--bg-2);border:1px solid var(--line-2);transition:all 0.4s}
.bank-stat.flash{border-color:var(--accent);background:rgba(212,168,71,0.06)}
.bank-stat .k{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:6px}
.bank-stat .v{font-family:var(--mono);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;transition:color 0.3s}
/* ============ FAT TAILS ============ */
.tails-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
/* ============ LUCK TABLE ============ */
.luck-tbl td:nth-child(3),.luck-tbl td:nth-child(4),.luck-tbl td:nth-child(5){font-variant-numeric:tabular-nums}
.luck-bar{position:relative;height:6px;background:var(--bg-2);overflow:hidden}
.luck-bar .b{position:absolute;top:0;height:100%}
.luck-bar .b.pos{background:var(--neg);left:50%}
.luck-bar .b.neg{background:var(--blue);right:50%}
.luck-bar .mid{position:absolute;top:0;left:50%;width:1px;height:100%;background:var(--line-2)}
/* ============ MATH SECTION ============ */
.math-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.math-card{background:var(--panel);border:1px solid var(--line);padding:32px}
.math-card h3{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:16px;color:var(--ink)}
.math-card h3 .num{color:var(--accent);font-style:italic;margin-right:10px}
.math-card p{color:var(--ink-2);margin-bottom:14px;line-height:1.65}
.math-card code{font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--bg-2);padding:2px 6px;border-radius:2px}
.math-card .formula{font-family:var(--mono);font-size:13px;color:var(--ink-2);background:var(--bg-2);padding:14px;border-left:2px solid var(--accent);margin:14px 0;overflow-x:auto;white-space:nowrap}
/* ============ ARCH ============ */
.arch{padding:32px;background:var(--panel);border:1px solid var(--line)}
.arch svg{width:100%;height:auto}
.arch .pulse-circle{animation:pulseCircle 2s infinite}
@keyframes pulseCircle{0%,100%{r:4;opacity:1}50%{r:7;opacity:0.4}}
/* ============ ROADMAP ============ */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.phase{background:var(--panel);border:1px solid var(--line);padding:24px;position:relative}
.phase .pn{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:8px}
.phase h4{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:12px;color:var(--ink)}
.phase ul{list-style:none;color:var(--ink-2);font-size:13px}
.phase li{padding:6px 0;border-bottom:1px dashed var(--line);position:relative;padding-left:18px}
.phase li::before{content:"›";position:absolute;left:0;color:var(--accent);font-family:var(--mono)}
.phase li:last-child{border-bottom:none}
.phase.done{border-color:var(--accent)}
.phase.done .pn{color:var(--accent)}
.phase.done::after{content:"DEPLOYED";position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:0.2em;border:1px solid var(--accent);padding:3px 8px}
/* ============ BACKTEST ============ */
.filters{display:flex;gap:14px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.filters input, .filters select{
background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);
font-family:var(--mono);font-size:12px;padding:8px 12px;outline:none;
}
.filters input:focus, .filters select:focus{border-color:var(--accent)}
.filters .count{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto}
.pred-row .correct{color:var(--pos)}
.pred-row .wrong{color:var(--neg)}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:16px;font-family:var(--mono);font-size:12px;flex-wrap:wrap}
.pagination button{background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);padding:6px 10px;cursor:pointer;font-family:var(--mono);font-size:12px}
.pagination button:hover{border-color:var(--accent);color:var(--accent)}
.pagination button.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.pagination button:disabled{opacity:0.4;cursor:not-allowed}
/* ============ FOOTER ============ */
footer{margin-top:120px;padding:32px;border-top:1px solid var(--line);color:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-align:center}
footer .ascii{font-family:var(--mono);color:var(--accent);font-size:11px;line-height:1.4;margin-top:18px;white-space:pre}
/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 0.8s ease, transform 0.8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
/* Counter-up */
.counter{display:inline-block}
@media (max-width: 1100px){
.ribbon{grid-template-columns:repeat(2,1fr)}
.ribbon .stat:nth-child(2){border-right:none}
.predict, .ev-grid, .bank-grid, .tails-grid{grid-template-columns:1fr}
.chart-row, .math-grid, .road{grid-template-columns:1fr}
.breakdown{grid-template-columns:repeat(2,1fr)}
.ev-out{grid-template-columns:1fr}
.ev-tile.hero{grid-column:span 1}
.bank-stats{grid-template-columns:repeat(2,1fr)}
.council-grid{grid-template-columns:repeat(2,1fr)}
}
/* ============ LIVE PICKS ============ */
.live-banner{
margin:24px 32px 0;max-width:1480px;margin-left:auto;margin-right:auto;
background:linear-gradient(135deg, rgba(212,168,71,0.08), rgba(91,143,199,0.05));
border:1px solid var(--accent);
padding:16px 24px;
display:flex;align-items:center;justify-content:space-between;gap:24px;
font-family:var(--mono);font-size:11px;
}
.live-banner .lb-left{display:flex;align-items:center;gap:14px;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase}
.live-banner .lb-mid{color:var(--ink-2);font-size:12px;letter-spacing:0;text-transform:none;flex:1;line-height:1.5}
.live-banner .lb-mid b{color:var(--ink)}
.live-banner .pulse-orb{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 1.5s infinite}
.connectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px}
.conn-card{
background:var(--panel);border:1px solid var(--line);padding:18px 20px;
display:flex;flex-direction:column;gap:6px;position:relative;transition:all 0.3s;
}
.conn-card.on{border-color:var(--accent)}
.conn-card.on::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.conn-card.off{opacity:0.6}
.conn-card .name{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500;letter-spacing:0.05em;text-transform:uppercase}
.conn-card .meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase}
.conn-card .status{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
}
.conn-card .status.live{color:var(--accent)}
.conn-card .status.off{color:var(--ink-3)}
.conn-card .status .led{display:inline-block;width:6px;height:6px;border-radius:50%}
.conn-card .status.live .led{background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 1.6s infinite}
.conn-card .status.off .led{background:var(--ink-3)}
.conn-card .info{font-size:11px;color:var(--ink-2);margin-top:4px;line-height:1.4}
/* Picks grid */
.picks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px;margin-top:24px}
.pick-card{
background:var(--panel);border:1px solid var(--line);padding:20px;position:relative;
transition:all 0.3s;
}
.pick-card.surgical{border-color:var(--accent);border-width:2px}
.pick-card.surgical::before{content:"SURGICAL";position:absolute;top:-1px;right:14px;font-family:var(--mono);font-size:9px;color:var(--bg);background:var(--accent);padding:3px 8px;letter-spacing:0.18em}
.pick-card.daily{border-color:var(--blue)}
.pick-card.daily::before{content:"DAILY PLAY";position:absolute;top:-1px;right:14px;font-family:var(--mono);font-size:9px;color:var(--bg);background:var(--blue);padding:3px 8px;letter-spacing:0.18em}
.pick-card.stale{border-color:var(--neg);background:rgba(194,100,94,0.04)}
.pick-card.stale::before{content:"⚠ STALE EDGE";position:absolute;top:-1px;right:14px;font-family:var(--mono);font-size:9px;color:var(--bg);background:var(--neg);padding:3px 8px;letter-spacing:0.18em}
.pick-card.monitor{border-color:var(--line-2)}
.pick-card.no_line{opacity:0.7}
.pick-card.negative{opacity:0.4}
.pick-card .header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.pick-card .matchup{font-family:var(--serif);font-size:24px;color:var(--ink);line-height:1}
.pick-card .matchup .at{color:var(--ink-3);font-style:italic;margin:0 4px;font-size:18px}
.pick-card .when{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.08em;margin-top:6px}
.pick-card .when .live-tag{color:var(--accent)}
.pick-card .when .final-tag{color:var(--ink-2)}
.pick-card .row{display:flex;justify-content:space-between;padding:6px 0;font-family:var(--mono);font-size:11px;border-bottom:1px dashed var(--line)}
.pick-card .row:last-of-type{border-bottom:none}
.pick-card .row .k{color:var(--ink-3);text-transform:uppercase;letter-spacing:0.08em;font-size:10px}
.pick-card .row .v{color:var(--ink);font-variant-numeric:tabular-nums}
.pick-card .row .v.acc{color:var(--accent)}
.pick-card .row .v.blue{color:var(--blue)}
.pick-card .row .v.pos{color:var(--pos)}
.pick-card .row .v.neg{color:var(--neg)}
.pick-card .recommend{
margin-top:14px;padding:12px;background:var(--bg-2);border-left:2px solid var(--accent);
font-family:var(--mono);font-size:11px;line-height:1.5;
}
.pick-card .recommend.stale-rec{border-left-color:var(--neg);background:rgba(194,100,94,0.06)}
.pick-card .recommend.no-rec{border-left-color:var(--ink-3)}
.pick-card .recommend .lbl{color:var(--ink-3);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:6px;display:block}
.pick-card .recommend .pick{color:var(--ink);font-size:13px;font-weight:500}
.pick-card .recommend .stake{color:var(--accent);font-size:13px;font-weight:500;margin-top:4px}
.pick-card .recommend.stale-rec .stake{color:var(--neg)}
.pick-card .recommend .warn{color:var(--neg);font-size:11px;margin-top:6px;line-height:1.4}
.pick-card .live-score{
display:flex;justify-content:space-around;padding:14px;background:var(--bg-2);
border:1px solid var(--accent);margin:14px 0;
}
.pick-card .live-score .ls{text-align:center}
.pick-card .live-score .ls .t{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.1em}
.pick-card .live-score .ls .s{font-family:var(--serif);font-size:32px;color:var(--accent);line-height:1;margin-top:2px}
.tier-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px}
.tier-pill{
background:var(--panel);border:1px solid var(--line);padding:14px;
display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.tier-pill .tn{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase}
.tier-pill .tc{font-family:var(--serif);font-size:32px;color:var(--ink);line-height:1}
.tier-pill.surgical{border-color:var(--accent)}.tier-pill.surgical .tc{color:var(--accent)}
.tier-pill.daily{border-color:var(--blue)}.tier-pill.daily .tc{color:var(--blue)}
.tier-pill.stale{border-color:var(--neg)}.tier-pill.stale .tc{color:var(--neg)}
/* Stale warning banner */
.stale-banner{
margin:24px 32px 0;max-width:1480px;margin-left:auto;margin-right:auto;
background:rgba(194,100,94,0.08);border:1px solid var(--neg);
padding:18px 24px;display:flex;gap:18px;align-items:flex-start;
}
.stale-banner .icon{font-size:22px;color:var(--neg);font-family:var(--serif);flex-shrink:0;line-height:1}
.stale-banner .txt{color:var(--ink-2);font-size:13px;line-height:1.6;font-family:var(--mono)}
.stale-banner .txt b{color:var(--neg)}
/* ============ REFRESH BAR ============ */
.refresh-bar{
position:sticky;top:64px;z-index:14;
margin:0;padding:14px 32px;
background:rgba(10,13,20,0.96);
backdrop-filter: blur(12px);
border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.refresh-bar .updated{
display:flex;flex-direction:column;gap:2px;
font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em;
}
.refresh-bar .updated b{color:var(--ink);font-weight:500;font-size:12px;letter-spacing:0.04em;text-transform:none}
.refresh-bar .updated .age{color:var(--accent);font-size:10px;letter-spacing:0.14em;text-transform:uppercase}
.refresh-bar .actions{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-refresh{
padding:11px 22px;
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;transition:all 0.2s;
display:inline-flex;align-items:center;gap:10px;
}
.btn-refresh:hover{background:var(--accent);color:var(--bg)}
.btn-refresh.loading{pointer-events:none;opacity:0.7}
.btn-refresh.loading .icon{animation:spin 0.8s linear infinite}
.btn-refresh .icon{display:inline-block;width:11px;height:11px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%}
.btn-refresh.loading .icon{border:1.5px solid currentColor;border-top-color:transparent}
.btn-refresh.idle .icon{border-radius:0;border:none;background:currentColor;mask:url("data:image/svg+xml;utf8,") no-repeat center / contain;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center / contain}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-auto{
padding:9px 16px;
background:var(--bg-2);
border:1px solid var(--line-2);
color:var(--ink-2);
font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;transition:all 0.2s;
display:inline-flex;align-items:center;gap:8px;
}
.btn-auto:hover{border-color:var(--ink-2);color:var(--ink)}
.btn-auto.active{border-color:var(--accent);color:var(--accent);background:rgba(212,168,71,0.06)}
.btn-auto.active .led{background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 1.4s infinite}
.btn-auto .led{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
/* Section freshness chips */
.fresh-chip{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.16em;
text-transform:uppercase;margin-left:14px;padding:3px 8px;
border:1px solid var(--line-2);
}
.fresh-chip.fresh{color:var(--accent);border-color:var(--accent)}
.fresh-chip.stale{color:var(--neg);border-color:var(--neg)}
.fresh-chip .led{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor}
.fresh-chip.fresh .led{animation:pulse 1.6s infinite}
/* Scan-line during refresh */
body.refreshing .picks-grid::before,
body.refreshing .live-banner::before{
content:"";position:absolute;top:0;left:-100%;right:0;height:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent);
animation:scanX 1.4s linear infinite;
}
@keyframes scanX{from{left:-100%}to{left:100%}}
/* Toast notifications */
.toast{
position:fixed;bottom:32px;right:32px;z-index:50;
padding:14px 20px;
background:var(--panel);border:1px solid var(--accent);
font-family:var(--mono);font-size:12px;color:var(--ink);
letter-spacing:0.04em;
transform:translateY(20px);opacity:0;transition:all 0.3s;
display:flex;align-items:center;gap:12px;
box-shadow:0 8px 24px rgba(0,0,0,0.6);max-width:380px;
}
.toast.show{transform:translateY(0);opacity:1}
.toast.error{border-color:var(--neg)}
.toast .ic{color:var(--accent)}
.toast.error .ic{color:var(--neg)}
/* When live games exist, give the live picks section a subtle pulse */
.live-banner.has-live{animation:liveGlow 3s ease-in-out infinite}
@keyframes liveGlow{0%,100%{border-color:var(--accent)}50%{border-color:var(--accent-2)}}
/* ============ DISCRETIONARY OVERLAYS ============ */
.adj-toggle{
margin-top:14px;padding:8px 14px;
background:transparent;border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:0.16em;
text-transform:uppercase;cursor:pointer;width:100%;transition:all 0.2s;
}
.adj-toggle:hover{border-color:var(--accent);color:var(--accent)}
.adj-toggle.has-adj{border-color:var(--accent);color:var(--accent);background:rgba(212,168,71,0.04)}
.adj-panel{
margin-top:14px;padding:18px;
background:var(--bg-2);border:1px solid var(--line-2);
display:none;
}
.adj-panel.open{display:block;animation:slideDown 0.25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.adj-panel .lbl{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px;display:block;
}
.adj-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.adj-preset{
padding:6px 10px;background:var(--panel);border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:0.06em;
cursor:pointer;transition:all 0.15s;
}
.adj-preset:hover{border-color:var(--accent);color:var(--accent)}
.adj-row{display:grid;grid-template-columns:1fr 80px;gap:10px;align-items:center;margin-bottom:10px}
.adj-row label{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.adj-row label .h{color:var(--accent)}
.adj-row label .a{color:var(--blue)}
.adj-row input[type=number]{
background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
font-family:var(--mono);font-size:12px;padding:6px 8px;outline:none;text-align:center;
font-variant-numeric:tabular-nums;
}
.adj-row input[type=number]:focus{border-color:var(--accent)}
.adj-notes{
width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
font-family:var(--mono);font-size:11px;padding:8px;outline:none;
resize:vertical;min-height:50px;margin-top:8px;
}
.adj-notes:focus{border-color:var(--accent)}
.adj-actions{display:flex;gap:8px;margin-top:14px}
.adj-actions button{
flex:1;padding:9px;
font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
cursor:pointer;transition:all 0.15s;
}
.adj-save{background:var(--accent);border:1px solid var(--accent);color:var(--bg)}
.adj-save:hover{opacity:0.85}
.adj-clear{background:transparent;border:1px solid var(--neg);color:var(--neg)}
.adj-clear:hover{background:var(--neg);color:var(--bg)}
.adj-summary{
margin-top:12px;padding:10px;background:var(--panel);
border-left:2px solid var(--accent);
font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.5;
}
.adj-summary .delta{color:var(--accent);font-weight:500}
.adj-summary .note{font-style:italic;color:var(--ink-3);margin-top:4px;display:block}
.pick-card.has-adjustment{position:relative}
.pick-card.has-adjustment::after{
content:"ADJUSTED";position:absolute;top:14px;left:14px;
font-family:var(--mono);font-size:9px;color:var(--bg);background:var(--accent);
padding:3px 8px;letter-spacing:0.18em;
}
.adj-row .original{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
text-decoration:line-through;margin-right:6px;
}
.adj-row .adjusted{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:500}
/* Track record section */
.track-record{
margin-top:32px;padding:24px;background:var(--panel);border:1px solid var(--line);
}
.track-record h3{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:8px;color:var(--ink)}
.track-record .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em;margin-bottom:18px}
.track-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.track-stat{padding:14px;background:var(--bg-2);border:1px solid var(--line-2)}
.track-stat .k{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:8px}
.track-stat .v{font-family:var(--serif);font-size:28px;color:var(--ink);line-height:1}
.track-stat .v.acc{color:var(--accent)}.track-stat .v.pos{color:var(--pos)}.track-stat .v.neg{color:var(--neg)}
.track-stat .meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:6px}
.bias-warning{
margin-top:24px;padding:18px;
background:rgba(194,100,94,0.06);border:1px solid var(--neg);
font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.6;
}
.bias-warning b{color:var(--neg)}
/* ============ LIVE GAME MODE ============ */
.live-mode{
margin-top:14px;padding:18px;
background:linear-gradient(135deg, rgba(212,168,71,0.08), rgba(212,168,71,0.02));
border:1px solid var(--accent);
position:relative;
}
.live-mode::before{
content:"● LIVE TRACKING";position:absolute;top:-1px;right:14px;
font-family:var(--mono);font-size:9px;color:var(--bg);background:var(--accent);
padding:3px 8px;letter-spacing:0.2em;
}
.lm-state{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;margin-bottom:14px}
.lm-stat{background:var(--bg-2);border:1px solid var(--line-2);padding:10px 12px}
.lm-stat .k{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.16em;text-transform:uppercase}
.lm-stat .v{font-family:var(--mono);font-size:16px;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.lm-stat .v.acc{color:var(--accent)}
.lm-stat .v.blue{color:var(--blue)}
.lm-wp-bar{
position:relative;height:40px;background:var(--bg-2);border:1px solid var(--line-2);
margin:14px 0;overflow:hidden;
}
.lm-wp-bar .fill{
position:absolute;top:0;left:0;height:100%;
background:linear-gradient(90deg, rgba(212,168,71,0.20), rgba(212,168,71,0.45));
border-right:2px solid var(--accent);
transition:width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.lm-wp-bar .label{
position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;
padding:0 14px;font-family:var(--mono);font-size:12px;
}
.lm-wp-bar .label .left{color:var(--ink)}
.lm-wp-bar .label .right{color:var(--ink-2)}
.lm-wp-bar .shift{
position:absolute;top:-18px;right:0;font-family:var(--mono);font-size:9px;
color:var(--accent);letter-spacing:0.14em;
}
.lm-obs-form{
background:var(--bg-2);border:1px solid var(--line-2);padding:14px;margin-top:14px;
}
.lm-obs-form .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.lm-obs-form select, .lm-obs-form input{
background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
font-family:var(--mono);font-size:11px;padding:6px 8px;outline:none;
}
.lm-obs-form select:focus, .lm-obs-form input:focus{border-color:var(--accent)}
.lm-obs-form textarea{
width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--ink);
font-family:var(--mono);font-size:11px;padding:8px;outline:none;resize:vertical;min-height:40px;
}
.lm-obs-form button{
margin-top:10px;width:100%;padding:9px;
background:var(--accent);border:none;color:var(--bg);
font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;
}
.lm-obs-form button:hover{opacity:0.85}
.lm-obs-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.lm-obs{
padding:8px 12px;background:var(--panel);border-left:2px solid var(--accent);
font-family:var(--mono);font-size:10px;color:var(--ink-2);line-height:1.5;
display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
}
.lm-obs .ts{color:var(--ink-3);font-size:9px;letter-spacing:0.08em}
.lm-obs .cat{color:var(--accent);font-weight:500;font-size:9px;letter-spacing:0.14em;text-transform:uppercase}
.lm-obs .text{color:var(--ink)}
.lm-obs .impact{color:var(--accent);font-weight:500}
.lm-obs .impact.neg{color:var(--neg)}
.lm-obs .impact.blue{color:var(--blue)}
.lm-obs .x{cursor:pointer;color:var(--ink-3);padding:0 6px;font-family:var(--mono);font-size:13px}
.lm-obs .x:hover{color:var(--neg)}
/* ============ STOCHASTIC ENGINE BADGE ============ */
.stochastic-badge{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:9px;color:var(--blue);letter-spacing:0.14em;
padding:2px 6px;border:1px solid var(--blue);margin-left:6px;
}
/* ============ OBSERVATION ACCURACY ============ */
.obs-accuracy{
margin-top:24px;padding:24px;background:var(--panel);border:1px solid var(--line);
}
.obs-accuracy h3{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:8px;color:var(--ink)}
.obs-accuracy .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em;margin-bottom:18px}
.obs-cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.obs-cat{padding:14px;background:var(--bg-2);border:1px solid var(--line-2)}
.obs-cat .label{font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:0.16em;text-transform:uppercase}
.obs-cat .count{font-family:var(--serif);font-size:24px;color:var(--ink);margin-top:6px;line-height:1}
.obs-cat .rate{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px}
.obs-cat .rate b{color:var(--accent)}
.obs-cat .rate b.pos{color:var(--pos)}.obs-cat .rate b.neg{color:var(--neg)}
/* ============ V6: SIMPLE / PRO MODE SYSTEM ============ */
.mode-toggle{
display:none !important; /* V11.3.3: legacy duplicate, hidden */
position:fixed;top:120px;left:24px;z-index:18;
display:flex;background:var(--panel);border:1px solid var(--line);padding:3px;
font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
}
.mode-toggle button{
padding:7px 14px;background:transparent;border:none;color:var(--ink-3);cursor:pointer;
transition:all 0.2s;letter-spacing:inherit;font-family:inherit;font-size:inherit;
}
.mode-toggle button.on{background:var(--accent);color:var(--bg)}
.mode-toggle button:not(.on):hover{color:var(--ink)}
/* Pro Mode: hide quant sections by default */
body.simple-mode .pro-only{display:none !important}
body.pro-mode .simple-only{display:none !important}
body.simple-mode #live-game-count{display:inline}
/* Hero section for Simple Mode */
.hero-simple{
margin:24px 32px 0;max-width:1480px;margin-left:auto;margin-right:auto;
padding:36px;background:linear-gradient(135deg,var(--panel),var(--bg-2));
border:1px solid var(--line);position:relative;overflow:hidden;
}
.hero-simple::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--accent),var(--blue),var(--accent));
}
.hero-simple .h-title{font-family:var(--serif);font-size:42px;color:var(--ink);line-height:1.1;margin-bottom:8px}
.hero-simple .h-title em{color:var(--accent);font-style:italic}
.hero-simple .h-sub{font-family:var(--mono);font-size:13px;color:var(--ink-2);letter-spacing:0.04em;line-height:1.6;max-width:780px}
.hero-simple .h-sub b{color:var(--ink)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:24px}
.hero-stat{padding:14px 18px;background:var(--bg-2);border:1px solid var(--line-2)}
.hero-stat .k{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:6px}
.hero-stat .v{font-family:var(--serif);font-size:28px;color:var(--accent);line-height:1}
.hero-stat .meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:6px}
/* Multi-market pick cards */
.market-row{
display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
padding:10px 0;border-bottom:1px solid var(--line);
}
.market-row:last-of-type{border-bottom:none}
.market-row .mkt-info{display:flex;flex-direction:column;gap:3px}
.market-row .mkt-label{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.market-row .mkt-label .grade{padding:1px 6px;font-size:9px;font-weight:500}
.market-row .mkt-label .grade.A{background:var(--accent);color:var(--bg)}
.market-row .mkt-label .grade.B{background:var(--blue);color:var(--bg)}
.market-row .mkt-label .grade.C{background:var(--neg);color:var(--bg);opacity:0.85}
.market-row .pick-text{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
.market-row .edge-display{font-family:var(--mono);font-size:14px;font-weight:500;text-align:right}
.market-row .edge-display.pos{color:var(--accent)}
.market-row .edge-display.large{color:var(--neg)}
.market-row .edge-display .meta{display:block;font-size:9px;color:var(--ink-3);font-weight:400;letter-spacing:0.06em;margin-top:2px}
.accuracy-key{
margin:24px 0 14px;padding:14px 18px;background:var(--bg-2);border:1px solid var(--line-2);
font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.7;
}
.accuracy-key b{color:var(--ink)}
.accuracy-key .grade{display:inline-block;padding:1px 6px;margin-right:6px;font-size:10px;font-weight:500}
.accuracy-key .grade.A{background:var(--accent);color:var(--bg)}
.accuracy-key .grade.B{background:var(--blue);color:var(--bg)}
.accuracy-key .grade.C{background:var(--neg);color:var(--bg);opacity:0.85}
.fresh-banner{
margin:24px 32px 0;max-width:1480px;margin-left:auto;margin-right:auto;
background:rgba(212,168,71,0.06);border:1px solid var(--accent);
padding:14px 22px;display:flex;gap:14px;align-items:center;
}
.fresh-banner .icon{color:var(--accent);font-size:18px;line-height:1}
.fresh-banner .txt{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.5}
.fresh-banner .txt b{color:var(--accent)}
/* ============ CLV TRACKING ============ */
.bet-action{
margin-top:14px;display:flex;gap:8px;
}
.btn-place-bet{
flex:1;padding:11px;background:var(--accent);border:none;color:var(--bg);
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;font-weight:500;transition:all 0.2s;
}
.btn-place-bet:hover{opacity:0.85}
.btn-place-bet:disabled{background:var(--line-2);color:var(--ink-3);cursor:not-allowed}
.btn-place-bet.tracked{background:var(--blue);color:var(--bg)}
.btn-place-bet.tracked::after{content:" \2713";}
.clv-section{
margin-top:36px;padding:28px;background:var(--panel);border:1px solid var(--line);
}
.clv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.clv-stat{padding:18px;background:var(--bg-2);border:1px solid var(--line-2);position:relative}
.clv-stat.proof-positive{border-color:var(--accent)}
.clv-stat.proof-negative{border-color:var(--neg)}
.clv-stat .k{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase}
.clv-stat .v{font-family:var(--serif);font-size:32px;color:var(--ink);line-height:1;margin-top:8px}
.clv-stat .v.pos{color:var(--accent)}
.clv-stat .v.neg{color:var(--neg)}
.clv-stat .meta{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.proof-banner{
margin-top:18px;padding:16px;
font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:0.04em;
}
.proof-banner.insufficient{background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink-2)}
.proof-banner.positive{background:rgba(212,168,71,0.08);border:1px solid var(--accent);color:var(--ink)}
.proof-banner.negative{background:rgba(194,100,94,0.06);border:1px solid var(--neg);color:var(--ink-2)}
.proof-banner b{color:var(--accent)}
.proof-banner.negative b{color:var(--neg)}
.bets-table{margin-top:24px;width:100%;border-collapse:collapse}
.bets-table th{font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.bets-table td{font-family:var(--mono);font-size:11px;color:var(--ink-2);padding:10px 8px;border-bottom:1px dashed var(--line)}
.bets-table tr:hover td{background:var(--bg-2);color:var(--ink)}
.bets-table .result-won{color:var(--accent)}
.bets-table .result-lost{color:var(--neg)}
.bets-table .result-pending{color:var(--ink-3)}
.bets-table .clv-pos{color:var(--accent);font-weight:500}
.bets-table .clv-neg{color:var(--neg);font-weight:500}
.sportsbook-section{
margin:36px 32px 0;max-width:1480px;margin-left:auto;margin-right:auto;
padding:0;
}
.sb-head{
display:flex;align-items:baseline;justify-content:space-between;
padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
.sb-head h2{
font-family:var(--serif);font-size:36px;color:var(--ink);font-weight:400;
letter-spacing:-0.01em;
}
.sb-head h2 em{color:var(--accent);font-style:italic}
.sb-head .tag{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;
}
/* Account selector */
.account-bar{
display:flex;gap:12px;align-items:center;flex-wrap:wrap;
padding:18px 22px;background:var(--panel);border:1px solid var(--line);
margin-bottom:24px;
}
.account-bar .lbl{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;margin-right:6px;
}
.account-bar select{
padding:8px 12px;background:var(--bg-2);border:1px solid var(--line-2);
color:var(--ink);font-family:var(--mono);font-size:12px;outline:none;
letter-spacing:0.04em;
}
.account-bar select:focus{border-color:var(--accent)}
.account-bar .balance-display{
margin-left:auto;display:flex;align-items:baseline;gap:10px;
}
.account-bar .balance-display .b-label{
font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;text-transform:uppercase;
}
.account-bar .balance-display .b-value{
font-family:var(--serif);font-size:32px;color:var(--accent);line-height:1;
font-variant-numeric:tabular-nums;
}
.account-bar .balance-display .b-pnl{
font-family:var(--mono);font-size:11px;letter-spacing:0.04em;
font-variant-numeric:tabular-nums;
}
.account-bar .balance-display .b-pnl.pos{color:var(--accent)}
.account-bar .balance-display .b-pnl.neg{color:var(--neg)}
.account-bar button{
padding:8px 14px;background:transparent;border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:10px;
letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;
}
.account-bar button:hover{border-color:var(--accent);color:var(--accent)}
.account-bar button.danger:hover{border-color:var(--neg);color:var(--neg)}
.account-bar button.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500}
.account-bar button.primary:hover{opacity:0.85}
/* Stats grid */
.sb-stats{
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px;margin-bottom:24px;
}
.sb-stat{
padding:18px 20px;background:var(--panel);border:1px solid var(--line);
position:relative;
}
.sb-stat::before{
content:"";position:absolute;top:0;left:0;width:30px;height:1px;background:var(--accent);
}
.sb-stat .k{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:8px;
}
.sb-stat .v{
font-family:var(--serif);font-size:30px;color:var(--ink);line-height:1;
font-variant-numeric:tabular-nums;
}
.sb-stat .v.pos{color:var(--accent)}
.sb-stat .v.neg{color:var(--neg)}
.sb-stat .meta{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
margin-top:8px;letter-spacing:0.04em;
}
/* Equity curve */
.equity-curve-wrap{
margin:24px 0;padding:24px;background:var(--panel);border:1px solid var(--line);
}
.equity-curve-wrap h3{
font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:400;
margin-bottom:6px;
}
.equity-curve-wrap .ec-sub{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.14em;text-transform:uppercase;margin-bottom:18px;
}
#equity-curve-svg{width:100%;height:240px;display:block}
.equity-curve-wrap .axis{stroke:var(--line);stroke-width:0.5}
.equity-curve-wrap .grid{stroke:var(--line);stroke-width:0.3;stroke-dasharray:2,3;opacity:0.5}
.equity-curve-wrap .axis-label{fill:var(--ink-3);font-family:var(--mono);font-size:9px;letter-spacing:0.06em}
.equity-curve-wrap .curve{fill:none;stroke:var(--accent);stroke-width:1.5}
.equity-curve-wrap .baseline{stroke:var(--ink-3);stroke-width:0.5;stroke-dasharray:3,3}
.equity-curve-wrap .area{fill:url(#eq-gradient);opacity:0.4}
/* Wagers table */
.wagers-section{
margin-top:24px;padding:24px;background:var(--panel);border:1px solid var(--line);
}
.wagers-section h3{
font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:400;margin-bottom:14px;
}
.wager-filters{
display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;
}
.wager-filters button{
padding:6px 12px;background:transparent;border:1px solid var(--line-2);
color:var(--ink-3);font-family:var(--mono);font-size:10px;
letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
}
.wager-filters button.active{border-color:var(--accent);color:var(--accent)}
.wagers-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.wagers-table th{
text-align:left;padding:10px 8px;
color:var(--ink-3);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;
border-bottom:1px solid var(--line);
}
.wagers-table td{
padding:11px 8px;color:var(--ink-2);border-bottom:1px dashed var(--line);
font-variant-numeric:tabular-nums;
}
.wagers-table tr:hover td{background:var(--bg-2);color:var(--ink)}
.wagers-table .res-won{color:var(--accent);font-weight:500}
.wagers-table .res-lost{color:var(--neg);font-weight:500}
.wagers-table .res-push{color:var(--ink-2)}
.wagers-table .res-pending{color:var(--ink-3)}
/* Bet placement modal */
.modal-overlay{
position:fixed;inset:0;z-index:80;background:rgba(0,0,0,0.7);
backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{
width:480px;max-width:90vw;background:var(--panel);border:1px solid var(--line);
padding:32px;position:relative;
}
.modal::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);
}
.modal h3{
font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:400;margin-bottom:6px;
}
.modal .matchup{
font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.18em;
text-transform:uppercase;margin-bottom:24px;
}
.modal .market-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.modal .market-tab{
padding:10px;background:var(--bg-2);border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:10px;
letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;text-align:center;
}
.modal .market-tab.active{border-color:var(--accent);color:var(--accent);background:rgba(212,168,71,0.06)}
.modal .market-tab .grade{
display:inline-block;width:14px;height:14px;line-height:14px;font-size:8px;
font-weight:600;margin-left:4px;
}
.modal .pick-readout{
padding:18px 20px;background:var(--bg-2);border-left:2px solid var(--accent);
margin-bottom:20px;font-family:var(--mono);font-size:13px;
}
.modal .pick-readout .pick{color:var(--ink);font-weight:500;margin-bottom:6px}
.modal .pick-readout .meta{color:var(--ink-2);font-size:11px;line-height:1.6}
.modal .pick-readout .meta b{color:var(--accent)}
.modal label{
display:block;font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:8px;margin-top:14px;
}
.modal input{
width:100%;padding:12px 14px;background:#0e131e;border:1px solid var(--line-2);
color:var(--ink);font-family:var(--mono);font-size:14px;outline:none;
}
.modal input:focus{border-color:var(--accent)}
.modal .quick-stakes{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.modal .quick-stakes button{
padding:5px 10px;background:transparent;border:1px solid var(--line-2);
color:var(--ink-3);font-family:var(--mono);font-size:10px;letter-spacing:0.06em;
cursor:pointer;
}
.modal .quick-stakes button:hover{border-color:var(--accent);color:var(--accent)}
.modal .payout-preview{
margin-top:18px;padding:14px;background:var(--bg-2);border:1px solid var(--line-2);
font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.7;
}
.modal .payout-preview b{color:var(--accent);font-size:14px}
.modal .modal-actions{display:flex;gap:10px;margin-top:24px}
.modal .modal-actions button{
flex:1;padding:13px;
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;
}
.modal .modal-cancel{background:transparent;border:1px solid var(--line-2);color:var(--ink-2)}
.modal .modal-cancel:hover{border-color:var(--ink-2);color:var(--ink)}
.modal .modal-confirm{background:var(--accent);border:1px solid var(--accent);color:var(--bg);font-weight:500}
.modal .modal-confirm:hover{opacity:0.85}
.modal .modal-real-toggle{
display:flex;align-items:center;gap:10px;margin-top:18px;padding:10px;
background:var(--bg-2);border:1px solid var(--line-2);
font-family:var(--mono);font-size:11px;color:var(--ink-2);cursor:pointer;
}
.modal .modal-real-toggle input{width:auto;margin:0}
/* Place Bet button on pick cards */
.bet-actions{display:flex;gap:6px;margin-top:14px}
.btn-bet{
flex:1;padding:9px;background:transparent;border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:10px;
letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:all 0.15s;
}
.btn-bet:hover{border-color:var(--accent);color:var(--accent)}
.btn-bet.primary{border-color:var(--accent);color:var(--accent)}
.btn-bet.primary:hover{background:var(--accent);color:var(--bg)}
.btn-auto-all{
width:100%;margin-top:14px;padding:11px;
background:transparent;border:1px solid var(--blue);color:var(--blue);
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;
}
.btn-auto-all:hover{background:var(--blue);color:var(--bg)}
/* Sharp vs Public divergence */
.divergence-row{
margin-top:14px;padding:10px 12px;background:var(--bg-2);border:1px dashed var(--line-2);
font-family:var(--mono);font-size:10px;color:var(--ink-2);line-height:1.5;
}
.divergence-row .lbl{color:var(--ink-3);letter-spacing:0.16em;text-transform:uppercase;font-size:8px;display:block;margin-bottom:4px}
.divergence-row .val{font-variant-numeric:tabular-nums}
.divergence-row .val.acc{color:var(--accent)}
.divergence-row .val.blue{color:var(--blue)}
.divergence-row .val.neg{color:var(--neg)}
/* Settings modal */
.settings-section{margin-bottom:24px}
.settings-section .lbl{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px;
}
.settings-row{
display:flex;align-items:center;justify-content:space-between;
padding:10px 0;border-bottom:1px dashed var(--line);
}
.settings-row label{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.settings-row input[type=checkbox]{width:auto}
/* Toast already exists; no changes needed */
— bottom right corner */
.build-stamp{
position:fixed;bottom:8px;right:14px;z-index:5;
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.14em;opacity:0.6;pointer-events:none;
}
/* Build banner — bottom right, very subtle */
.build-stamp{
position:fixed;bottom:8px;right:14px;z-index:5;
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.14em;opacity:0.6;pointer-events:none;
}
/* Sport selector — top-left next to mode-toggle */
.sport-selector{
display:none !important; /* V11.3.4: hidden — redundant with Team Explorer sport tabs */
}
.sport-selector .lbl{color:var(--ink-3)}
.sport-selector .val{color:var(--accent);font-weight:500;letter-spacing:0.14em}
.sport-selector .status-dot{
width:6px;height:6px;border-radius:50%;background:var(--accent);
box-shadow:0 0 8px rgba(212,168,71,0.5);
animation:pulse-sport 2s ease-in-out infinite;
}
@keyframes pulse-sport {
0%,100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ============================================================
V11 — TIDAL FRAMEWORK · Round 1 + Scaffolding
============================================================ */
/* --------- TOP NAVIGATION BAR --------- */
.tdl-topnav{
position:sticky;top:0;z-index:30;
background:rgba(10,13,20,0.92);backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
display:flex;align-items:center;
padding:0 32px;height:54px;
}
.tdl-topnav .brand{
font-family:var(--serif);font-size:18px;color:var(--accent);
letter-spacing:0.02em;margin-right:32px;
}
.tdl-topnav .brand b{font-weight:400}
.tdl-topnav .links{display:flex;gap:2px;flex:1}
.tdl-topnav .lnk{
padding:18px 14px;font-family:var(--mono);font-size:10px;
letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);
text-decoration:none;border-bottom:2px solid transparent;
transition:all 0.15s;cursor:pointer;
}
.tdl-topnav .lnk:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.tdl-topnav .lnk.active{color:var(--accent);border-bottom-color:var(--accent)}
.tdl-topnav .lnk .badge{
display:inline-block;margin-left:6px;padding:1px 5px;
background:rgba(91,143,199,0.15);border:1px solid rgba(91,143,199,0.4);
color:var(--blue);font-size:8px;letter-spacing:0.1em;
vertical-align:middle;border-radius:2px;
}
.tdl-topnav .right{display:flex;align-items:center;gap:14px}
.tdl-topnav .tidal-status{
display:flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:9px;letter-spacing:0.18em;
color:var(--ink-3);text-transform:uppercase;
}
.tdl-topnav .tidal-status .dot{
width:6px;height:6px;border-radius:50%;background:var(--accent);
box-shadow:0 0 8px rgba(212,168,71,0.5);
animation:pulse-tidal 2s ease-in-out infinite;
}
@keyframes pulse-tidal {0%,100%{opacity:1}50%{opacity:0.4}}
/* --------- TOOLTIP SYSTEM (info pills) --------- */
.tdl-info{
display:inline-flex;align-items:center;justify-content:center;
width:14px;height:14px;border-radius:50%;
background:transparent;border:1px solid var(--ink-3);
color:var(--ink-3);font-family:var(--mono);font-size:9px;
font-weight:600;line-height:1;cursor:help;
margin-left:4px;vertical-align:middle;
transition:all 0.15s;position:relative;
letter-spacing:0;text-transform:none;
}
.tdl-info::before{content:"i"}
.tdl-info:hover{border-color:var(--accent);color:var(--accent)}
.tdl-info[data-tip]:hover::after{
content:attr(data-tip);
position:absolute;left:50%;bottom:calc(100% + 8px);
transform:translateX(-50%);
width:280px;padding:10px 12px;
background:#0e131e;border:1px solid var(--accent);
color:var(--ink);
font-family:var(--sans);font-size:11px;font-weight:400;
letter-spacing:0;line-height:1.5;text-transform:none;
white-space:normal;text-align:left;
z-index:100;pointer-events:none;
box-shadow:0 8px 24px rgba(0,0,0,0.6);
border-radius:2px;
}
.tdl-info[data-tip]:hover::before{
content:"i";
}
/* --------- WHY THIS PICK panel (expandable) --------- */
.why-pick-toggle{
display:flex;align-items:center;justify-content:space-between;
margin-top:14px;padding:10px 12px;
background:transparent;border:1px dashed var(--line-2);
font-family:var(--mono);font-size:10px;color:var(--ink-2);
letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;
transition:all 0.15s;
}
.why-pick-toggle:hover{border-color:var(--accent);color:var(--accent)}
.why-pick-toggle .arrow{transition:transform 0.2s;font-size:9px}
.why-pick-toggle.open .arrow{transform:rotate(180deg)}
.why-pick-panel{
display:none;
margin-top:8px;padding:14px 16px;
background:rgba(212,168,71,0.04);border-left:2px solid var(--accent);
font-family:var(--sans);font-size:12px;color:var(--ink-2);line-height:1.65;
}
.why-pick-panel.open{display:block}
.why-pick-panel .factor{
display:flex;align-items:flex-start;gap:10px;
padding:8px 0;border-bottom:1px dashed var(--line);
}
.why-pick-panel .factor:last-child{border-bottom:none}
.why-pick-panel .factor-num{
flex-shrink:0;width:22px;height:22px;border-radius:50%;
background:var(--accent);color:var(--bg);
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:10px;font-weight:600;
}
.why-pick-panel .factor-text{flex:1}
.why-pick-panel .factor-text b{color:var(--ink);font-weight:500}
.why-pick-panel .footer{
margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.14em;text-transform:uppercase;
}
/* --------- BEGINNER / SIMPLE / PRO MODE TOGGLE --------- */
.tdl-mode-toggle{
position:fixed;bottom:14px;left:14px;z-index:18;
display:flex;background:var(--panel);border:1px solid var(--line);padding:3px;
font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.tdl-mode-toggle button{
padding:6px 12px;background:transparent;border:none;color:var(--ink-3);
cursor:pointer;letter-spacing:0.16em;
}
.tdl-mode-toggle button.active{background:var(--accent);color:var(--bg);font-weight:500}
.tdl-mode-toggle button:hover:not(.active){color:var(--ink)}
/* Beginner mode hides advanced sections, simplifies displays */
body.beginner-mode .pro-only,
body.beginner-mode .module.pro-only,
body.beginner-mode .advanced-stat,
body.beginner-mode .pro-stat,
body.beginner-mode .calibration-bucket-table,
body.beginner-mode .brier-display,
body.beginner-mode .module-pro,
body.beginner-mode .pro-mode-only{
display:none !important;
}
body.beginner-mode .beginner-explainer{display:block}
.beginner-explainer{
display:none;
margin:18px 0;padding:14px 18px;
background:rgba(91,143,199,0.06);border-left:2px solid var(--blue);
font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.6;
}
.beginner-explainer b{color:var(--blue)}
body.simple-mode .pro-only,
body.simple-mode .module.pro-only{display:none !important}
/* Sport-selector position update — moved to right side away from mode-toggle */
/* V11.3.4: removed stale !important override */
/* --------- TIDAL FRAMEWORK STATUS BADGES --------- */
.tdl-badge{
display:inline-flex;align-items:center;gap:5px;
padding:3px 8px;border-radius:2px;
font-family:var(--mono);font-size:8px;letter-spacing:0.16em;text-transform:uppercase;
font-weight:500;
}
.tdl-badge.live{
background:rgba(212,168,71,0.12);
border:1px solid rgba(212,168,71,0.4);
color:var(--accent);
}
.tdl-badge.connect{
background:rgba(91,143,199,0.10);
border:1px solid rgba(91,143,199,0.3);
color:var(--blue);
}
.tdl-badge.shell{
background:rgba(150,150,150,0.08);
border:1px solid var(--line-2);
color:var(--ink-3);
}
.tdl-badge .dot{
width:5px;height:5px;border-radius:50%;background:currentColor;
}
/* --------- TIDAL ROADMAP / SHELL SECTIONS --------- */
.tdl-shell-section{
max-width:1480px;margin:36px auto 0;padding:0 32px;
}
.tdl-shell-section .head{
display:flex;align-items:baseline;justify-content:space-between;
padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
.tdl-shell-section h2{
font-family:var(--serif);font-size:36px;color:var(--ink);font-weight:400;
letter-spacing:-0.01em;
}
.tdl-shell-section h2 em{color:var(--accent);font-style:italic}
.tdl-shell-section .tag{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;
}
.tdl-shell-card{
padding:32px;background:var(--panel);border:1px solid var(--line);
position:relative;
}
.tdl-shell-card::before{
content:"";position:absolute;top:0;left:0;width:60px;height:1px;
background:var(--blue);
}
.tdl-shell-card .label{
font-family:var(--mono);font-size:10px;color:var(--blue);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px;
}
.tdl-shell-card h3{
font-family:var(--serif);font-size:28px;color:var(--ink);font-weight:400;
margin-bottom:8px;
}
.tdl-shell-card .desc{
max-width:680px;font-family:var(--sans);font-size:14px;color:var(--ink-2);
line-height:1.7;margin-bottom:20px;
}
.tdl-shell-card .what-it-does{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;margin-top:20px;
}
.tdl-shell-card .feature-bullet{
padding:14px 16px;background:var(--bg-2);border:1px dashed var(--line-2);
font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.5;
}
.tdl-shell-card .feature-bullet b{color:var(--accent);display:block;font-size:10px;
letter-spacing:0.16em;text-transform:uppercase;margin-bottom:4px}
.tdl-shell-card .footer{
margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;
font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.12em;
}
/* TIDAL component card grid (Core/Stream/Drift/Pulse explainer) */
.tdl-components{
display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;margin:24px 0;
}
.tdl-component-card{
padding:20px;background:var(--panel);border:1px solid var(--line);
position:relative;
}
.tdl-component-card::before{
content:"";position:absolute;top:0;left:0;width:40px;height:1px;background:var(--accent);
}
.tdl-component-card .name{
font-family:var(--serif);font-size:18px;color:var(--accent);
margin-bottom:6px;
}
.tdl-component-card .role{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px;
}
.tdl-component-card .desc{
font-family:var(--sans);font-size:12px;color:var(--ink-2);line-height:1.6;
}
/* Adjust top spacing for sticky nav */
body{padding-top:0}
.hero{padding-top:50px}
/* ============ V11.1: ROUND 2 STYLES ============ */
/* --- METHODOLOGY PAGE --- */
.method-section{margin-top:32px}
.method-section h3{
font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:400;
margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.method-section h3 em{color:var(--accent);font-style:italic}
.method-section .lead{
font-family:var(--sans);font-size:14px;color:var(--ink-2);line-height:1.7;
max-width:780px;margin-bottom:18px;
}
.method-section .body{
font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.7;
max-width:780px;
}
.method-section .body p{margin-bottom:14px}
.method-section .body b{color:var(--ink);font-weight:500}
.method-section .body code{
background:var(--bg-2);padding:1px 6px;border-radius:2px;
font-family:var(--mono);font-size:12px;color:var(--accent);
}
.method-callout{
margin:18px 0;padding:18px 20px;
background:rgba(212,168,71,0.05);border-left:2px solid var(--accent);
font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.65;
}
.method-callout b{color:var(--accent)}
.method-equation{
margin:18px 0;padding:16px 20px;
background:#0e131e;border:1px solid var(--line);
font-family:var(--mono);font-size:13px;color:var(--ink);
text-align:center;letter-spacing:0.04em;
}
.method-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:14px;margin:18px 0;
}
.method-grid .stat{
padding:14px 18px;background:var(--panel);border:1px solid var(--line);
}
.method-grid .stat .v{
font-family:var(--serif);font-size:32px;color:var(--accent);line-height:1;
}
.method-grid .stat .l{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;margin-top:8px;
}
/* --- CALIBRATION RECORD --- */
.calib-hero{
display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px;margin-bottom:28px;
}
.calib-hero .stat{
padding:22px 24px;background:var(--panel);border:1px solid var(--line);
position:relative;
}
.calib-hero .stat::before{
content:"";position:absolute;top:0;left:0;width:48px;height:1px;background:var(--accent);
}
.calib-hero .stat .lbl{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px;
}
.calib-hero .stat .v{
font-family:var(--serif);font-size:42px;color:var(--ink);line-height:1;
font-variant-numeric:tabular-nums;
}
.calib-hero .stat .v.acc{color:var(--accent)}
.calib-hero .stat .meta{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
margin-top:10px;letter-spacing:0.04em;
}
/* Calibration curve chart */
.calib-chart-wrap{
padding:24px;background:var(--panel);border:1px solid var(--line);
margin-bottom:24px;
}
.calib-chart-wrap .head{
display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;
}
.calib-chart-wrap h3{
font-family:var(--serif);font-size:20px;color:var(--ink);font-weight:400;
}
.calib-chart-wrap .sub{
font-family:var(--mono);font-size:9px;color:var(--ink-3);letter-spacing:0.18em;
text-transform:uppercase;
}
#calib-curve-svg{width:100%;height:340px;display:block}
.calib-curve-axis{stroke:var(--line);stroke-width:0.5}
.calib-curve-grid{stroke:var(--line);stroke-width:0.3;stroke-dasharray:2,3;opacity:0.5}
.calib-curve-perfect{stroke:var(--ink-3);stroke-width:0.8;stroke-dasharray:4,4;fill:none}
.calib-curve-line{stroke:var(--accent);stroke-width:2;fill:none}
.calib-curve-dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.calib-curve-label{fill:var(--ink-3);font-family:var(--mono);font-size:10px;letter-spacing:0.04em}
.calib-curve-axis-title{fill:var(--ink-2);font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase}
.calib-curve-legend{
display:flex;gap:24px;margin-top:14px;justify-content:center;
font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.1em;
}
.calib-curve-legend .swatch{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:6px}
/* By-tier and by-market grids */
.calib-breakdown{
display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px;
}
@media (max-width:900px){.calib-breakdown{grid-template-columns:1fr}}
.calib-breakdown .panel{
padding:24px;background:var(--panel);border:1px solid var(--line);
}
.calib-breakdown .panel h3{
font-family:var(--serif);font-size:18px;color:var(--ink);font-weight:400;
margin-bottom:6px;
}
.calib-breakdown .panel .sub{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px;
}
.calib-row{
display:grid;grid-template-columns:80px 1fr 80px 60px;gap:12px;
padding:12px 0;border-bottom:1px dashed var(--line);
align-items:center;font-family:var(--mono);
}
.calib-row:last-child{border-bottom:none}
.calib-row .name{
font-size:11px;color:var(--ink);font-weight:500;
letter-spacing:0.08em;
}
.calib-row .bar{
height:6px;background:var(--bg-2);position:relative;border-radius:1px;overflow:hidden;
}
.calib-row .bar .fill{
position:absolute;top:0;left:0;bottom:0;
background:linear-gradient(90deg,var(--blue),var(--accent));
}
.calib-row .pct{
font-size:13px;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums;
}
.calib-row .n{
font-size:9px;color:var(--ink-3);text-align:right;letter-spacing:0.06em;
}
.grade-tag{
display:inline-block;padding:1px 5px;background:var(--accent);color:var(--bg);
font-size:9px;font-weight:600;border-radius:1px;margin-left:6px;
}
.grade-tag.b{background:var(--blue);color:var(--bg)}
.grade-tag.c{background:var(--ink-3);color:var(--bg)}
/* DEMO data badge */
.demo-badge{
display:inline-flex;align-items:center;gap:5px;
padding:2px 7px;border-radius:2px;
background:rgba(150,150,150,0.12);
border:1px dashed var(--line-2);
color:var(--ink-3);
font-family:var(--mono);font-size:8px;letter-spacing:0.18em;text-transform:uppercase;
font-weight:500;margin-left:8px;
}
.demo-badge::before{content:"DEMO";color:var(--accent)}
.demo-banner{
margin-bottom:18px;padding:10px 14px;
background:rgba(150,150,150,0.06);
border:1px dashed var(--line-2);
font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.06em;
line-height:1.6;
}
.demo-banner b{color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;font-size:9px}
/* Recent performance - 30 day strip */
.perf-strip{
display:flex;gap:3px;flex-wrap:wrap;margin:14px 0;
}
.perf-strip .day{
width:18px;height:18px;border-radius:2px;background:var(--bg-2);
position:relative;cursor:help;
}
.perf-strip .day.win{background:var(--accent)}
.perf-strip .day.loss{background:var(--neg)}
.perf-strip .day.push{background:var(--blue);opacity:0.5}
.perf-strip .day.none{background:transparent;border:1px dashed var(--line-2)}
/* --- ONBOARDING MODAL --- */
.onb-overlay{
position:fixed;inset:0;z-index:90;
background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
display:none;align-items:center;justify-content:center;
}
.onb-overlay.open{display:flex}
.onb-modal{
width:560px;max-width:90vw;max-height:88vh;overflow-y:auto;
background:var(--panel);border:1px solid var(--line);
position:relative;
}
.onb-modal::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--accent),var(--blue));
}
.onb-progress{
display:flex;gap:6px;padding:18px 32px 0;
}
.onb-progress .dot{
flex:1;height:3px;background:var(--line-2);border-radius:1px;
transition:background 0.3s;
}
.onb-progress .dot.active{background:var(--accent)}
.onb-progress .dot.done{background:rgba(212,168,71,0.4)}
.onb-content{padding:32px}
.onb-content .step-num{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.24em;text-transform:uppercase;margin-bottom:12px;
}
.onb-content h2{
font-family:var(--serif);font-size:32px;color:var(--ink);font-weight:400;
margin-bottom:14px;letter-spacing:-0.01em;
}
.onb-content h2 em{color:var(--accent);font-style:italic}
.onb-content .body{
font-family:var(--sans);font-size:14px;color:var(--ink-2);line-height:1.7;
margin-bottom:18px;
}
.onb-content .body b{color:var(--ink);font-weight:500}
.onb-content .body em{color:var(--accent);font-style:normal}
.onb-content .visual{
margin:18px 0;padding:18px;background:var(--bg-2);
border-left:2px solid var(--accent);
font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.7;
}
.onb-content .visual b{color:var(--accent)}
.onb-content .visual .row{
display:flex;justify-content:space-between;
padding:6px 0;border-bottom:1px dashed var(--line);
}
.onb-content .visual .row:last-child{border-bottom:none}
.onb-controls{
display:flex;justify-content:space-between;align-items:center;
padding:18px 32px;border-top:1px solid var(--line);
background:var(--bg-2);
}
.onb-controls .skip{
background:transparent;border:none;color:var(--ink-3);
font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
cursor:pointer;
}
.onb-controls .skip:hover{color:var(--ink-2)}
.onb-controls .nav-btns{display:flex;gap:10px}
.onb-controls button.nav{
padding:10px 20px;background:transparent;border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:11px;
letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;
transition:all 0.15s;
}
.onb-controls button.nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.onb-controls button.nav:disabled{opacity:0.3;cursor:not-allowed}
.onb-controls button.primary{
background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500;
}
.onb-controls button.primary:hover{opacity:0.85}
/* Tour button — accessible from nav after onboarding */
.tour-btn{
position:fixed;bottom:48px;right:14px;z-index:6;
padding:8px 14px;background:var(--panel);border:1px solid var(--line);
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;
transition:all 0.15s;
}
.tour-btn:hover{border-color:var(--accent);color:var(--accent)}
/* ============ V11.2: TEAM EXPLORER · Round 3 ============ */
/* --------- TEAM SEARCH BAR --------- */
.team-search-wrap{
position:relative;max-width:560px;margin:0 auto 32px;
}
.team-search-input{
width:100%;padding:16px 50px 16px 20px;
background:var(--panel);border:1px solid var(--line);
color:var(--ink);
font-family:var(--mono);font-size:14px;letter-spacing:0.04em;
outline:none;transition:all 0.15s;
}
.team-search-input:focus{border-color:var(--accent);background:#0e131e}
.team-search-input::placeholder{color:var(--ink-3);letter-spacing:0.08em}
.team-search-icon{
position:absolute;right:18px;top:50%;transform:translateY(-50%);
font-family:var(--mono);font-size:18px;color:var(--ink-3);
pointer-events:none;
}
.team-search-results{
position:absolute;top:calc(100% + 4px);left:0;right:0;
background:var(--panel);border:1px solid var(--accent);
max-height:380px;overflow-y:auto;display:none;z-index:40;
box-shadow:0 12px 32px rgba(0,0,0,0.5);
}
.team-search-results.open{display:block}
.team-search-result{
display:flex;align-items:center;gap:14px;
padding:12px 18px;cursor:pointer;
border-bottom:1px solid var(--line);
transition:background 0.1s;
}
.team-search-result:last-child{border-bottom:none}
.team-search-result:hover,
.team-search-result.kbd-active{background:var(--bg-2)}
.team-search-result .abbr{
width:42px;height:42px;border-radius:50%;
background:var(--bg-2);border:1px solid var(--line-2);
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-size:14px;color:var(--accent);
font-weight:500;letter-spacing:0.04em;flex-shrink:0;
}
.team-search-result .info{flex:1}
.team-search-result .name{
font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:500;
}
.team-search-result .meta{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.06em;margin-top:2px;
}
.team-search-result .rank{
font-family:var(--mono);font-size:11px;color:var(--accent);
letter-spacing:0.1em;
}
.team-search-empty{
padding:24px;text-align:center;
font-family:var(--mono);font-size:11px;color:var(--ink-3);
letter-spacing:0.16em;text-transform:uppercase;
}
/* --------- TEAM CARD --------- */
.team-card{
position:relative;background:var(--panel);border:1px solid var(--line);
margin-bottom:24px;overflow:hidden;
opacity:0;transform:scale(0.98);
transition:opacity 0.3s,transform 0.3s;
}
.team-card.revealed{opacity:1;transform:scale(1)}
.team-card::before{
content:"";position:absolute;top:0;left:-100%;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--accent),var(--accent),transparent);
transition:left 0.7s cubic-bezier(0.22,1,0.36,1);
}
.team-card.revealed::before{left:0}
/* TIDAL Pulse indicator */
.tidal-pulse{
position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;z-index:2;
}
.tidal-pulse .dot{
width:6px;height:6px;border-radius:50%;background:var(--accent);
box-shadow:0 0 8px rgba(212,168,71,0.5);
animation:pulse-tidal 2s ease-in-out infinite;
}
@keyframes pulse-tidal{0%,100%{opacity:1}50%{opacity:0.3}}
/* HEADER */
.team-card-header{
padding:32px 32px 24px;border-bottom:1px solid var(--line);
display:flex;align-items:flex-start;gap:24px;
}
.team-card-mark{
width:88px;height:88px;border-radius:50%;
background:radial-gradient(circle at 30% 30%, var(--accent), #8a6c2e);
display:flex;align-items:center;justify-content:center;
font-family:var(--serif);font-size:28px;color:var(--bg);font-weight:500;
letter-spacing:0.04em;flex-shrink:0;
box-shadow:0 4px 16px rgba(212,168,71,0.25);
}
.team-card-info{flex:1}
.team-card-name{
font-family:var(--serif);font-size:36px;color:var(--ink);font-weight:400;
letter-spacing:-0.01em;line-height:1.1;
}
.team-card-sub{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;margin-top:8px;
}
.team-card-strength{
display:inline-block;margin-top:10px;padding:4px 10px;
background:rgba(212,168,71,0.08);border:1px solid rgba(212,168,71,0.3);
font-family:var(--mono);font-size:10px;color:var(--accent);
letter-spacing:0.1em;
}
.team-card-strength.neg{
background:rgba(194,100,94,0.06);border-color:rgba(194,100,94,0.3);color:var(--neg);
}
/* HERO STATS GRID */
.team-hero-stats{
display:grid;grid-template-columns:repeat(4,1fr);
border-bottom:1px solid var(--line);
}
.team-hero-stat{
padding:24px 22px;border-right:1px solid var(--line);position:relative;
text-align:center;
}
.team-hero-stat:last-child{border-right:none}
.team-hero-stat .lbl{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.22em;text-transform:uppercase;margin-bottom:10px;
}
.team-hero-stat .v{
font-family:var(--serif);font-size:38px;color:var(--ink);line-height:1;
font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.team-hero-stat .v.acc{color:var(--accent)}
.team-hero-stat .v.neg{color:var(--neg)}
.team-hero-stat .meta{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
margin-top:8px;letter-spacing:0.06em;
}
/* EXPAND BUTTON */
.team-expand-btn{
display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;padding:14px;background:var(--bg-2);border:none;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:10px;color:var(--ink-2);
letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;
transition:all 0.15s;
}
.team-expand-btn:hover{color:var(--accent);background:rgba(212,168,71,0.04)}
.team-expand-btn .arrow{transition:transform 0.3s;font-size:9px}
.team-expand-btn.open .arrow{transform:rotate(180deg)}
/* EXPANDED SECTION */
.team-expanded{
display:none;padding:24px 32px;
}
.team-expanded.open{display:block;animation:teamExpand 0.4s cubic-bezier(0.22,1,0.36,1)}
@keyframes teamExpand{
from{opacity:0;transform:translateY(-12px)}
to{opacity:1;transform:translateY(0)}
}
/* SPLIT BARS (home/away, etc.) */
.split-row{
display:grid;grid-template-columns:120px 1fr 80px;
gap:14px;align-items:center;
padding:12px 0;border-bottom:1px dashed var(--line);
}
.split-row:last-child{border-bottom:none}
.split-row .lbl{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.16em;text-transform:uppercase;
}
.split-row .lbl em{
display:block;color:var(--ink-2);font-style:normal;font-size:11px;letter-spacing:0.04em;
text-transform:none;margin-top:3px;
}
.split-bar{
height:8px;background:var(--bg-2);position:relative;border-radius:1px;overflow:hidden;
}
.split-bar .fill{
position:absolute;top:0;left:0;bottom:0;
background:linear-gradient(90deg,var(--blue),var(--accent));
width:0;transition:width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.split-bar.cascade-1{transition-delay:0.05s}
.split-bar.cascade-2{transition-delay:0.10s}
.split-bar.cascade-3{transition-delay:0.15s}
.split-bar.cascade-4{transition-delay:0.20s}
.split-bar.cascade-5{transition-delay:0.25s}
.split-row .pct{
font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right;
font-variant-numeric:tabular-nums;letter-spacing:0.04em;
}
.split-row .pct.acc{color:var(--accent)}
/* RECENT GAMES TIMELINE */
.recent-games-section{margin:24px 0;padding-top:18px;border-top:1px solid var(--line)}
.recent-games-section h4{
font-family:var(--mono);font-size:10px;color:var(--ink-3);
letter-spacing:0.22em;text-transform:uppercase;margin-bottom:14px;
}
.recent-games-strip{
display:flex;gap:6px;align-items:flex-end;height:60px;margin-bottom:10px;
}
.rg-block{
flex:1;min-width:24px;background:var(--bg-2);position:relative;
border-radius:1px;cursor:help;transition:all 0.15s;
border:1px solid var(--line);
}
.rg-block:hover{transform:translateY(-2px);border-color:var(--accent)}
.rg-block.win{background:linear-gradient(180deg,var(--accent),#8a6c2e);border-color:var(--accent)}
.rg-block.loss{background:linear-gradient(180deg,#3a1d1c,#1a0e0d);border-color:var(--neg)}
.rg-block .lbl-mini{
position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:8px;color:var(--bg);font-weight:600;
}
.rg-block.loss .lbl-mini{color:var(--ink)}
.recent-games-list{
display:grid;grid-template-columns:1fr;gap:6px;font-family:var(--mono);font-size:11px;
margin-top:14px;
}
.rg-row{
display:grid;grid-template-columns:80px 1fr 60px 50px;gap:12px;
padding:8px 12px;background:var(--bg-2);
align-items:center;
}
.rg-row .date{color:var(--ink-3);font-size:10px}
.rg-row .opp{color:var(--ink)}
.rg-row .opp .vs{color:var(--ink-3);margin-right:4px}
.rg-row .score{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.rg-row .res{text-align:right;font-weight:500;letter-spacing:0.1em}
.rg-row .res.w{color:var(--accent)}
.rg-row .res.l{color:var(--neg)}
/* PRO MODE: H2H MATRIX */
.h2h-matrix{
display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:14px;
}
.h2h-cell{
aspect-ratio:1;background:var(--bg-2);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:8px;color:var(--ink-3);
letter-spacing:0.04em;cursor:help;transition:all 0.15s;position:relative;
}
.h2h-cell:hover{border-color:var(--accent);transform:scale(1.05);z-index:3}
.h2h-cell.win-strong{background:rgba(212,168,71,0.4);color:var(--bg)}
.h2h-cell.win-mod{background:rgba(212,168,71,0.2)}
.h2h-cell.even{background:var(--bg-2)}
.h2h-cell.loss-mod{background:rgba(194,100,94,0.2)}
.h2h-cell.loss-strong{background:rgba(194,100,94,0.4)}
.h2h-cell.self{background:var(--line);color:var(--accent);font-weight:600}
.h2h-cell .abbr{font-size:8px;color:inherit}
/* PRO ONLY SECTIONS */
.team-pro-section{
margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
display:none;
}
body.pro-mode .team-pro-section{display:block}
.team-pro-section h4{
font-family:var(--mono);font-size:10px;color:var(--accent);
letter-spacing:0.22em;text-transform:uppercase;margin-bottom:14px;
}
/* COMPARE BUTTON / HEAD TO HEAD */
.team-compare-btn{
display:inline-flex;align-items:center;gap:8px;
padding:10px 16px;background:transparent;border:1px solid var(--line-2);
color:var(--ink-2);font-family:var(--mono);font-size:10px;
letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;
margin-top:18px;transition:all 0.15s;
}
.team-compare-btn:hover{border-color:var(--accent);color:var(--accent)}
/* HEAD-TO-HEAD COMPARISON CARD */
.h2h-compare{
display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
margin-top:24px;
}
.h2h-side{
background:var(--panel);padding:24px;
}
.h2h-side h3{
font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:400;
margin-bottom:6px;
}
.h2h-side .sub{
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px;
}
.h2h-stat{
display:flex;justify-content:space-between;
padding:10px 0;border-bottom:1px dashed var(--line);
font-family:var(--mono);font-size:12px;
}
.h2h-stat .v{color:var(--ink);font-variant-numeric:tabular-nums}
.h2h-stat .v.win{color:var(--accent);font-weight:500}
.h2h-stat .l{color:var(--ink-3);letter-spacing:0.04em}
.h2h-record-bar{
display:grid;grid-template-columns:1fr auto 1fr;
align-items:center;gap:14px;padding:18px;background:var(--bg-2);
border:1px solid var(--accent);
margin:24px 0;
}
.h2h-record-bar .label{
text-align:center;font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.2em;text-transform:uppercase;
}
.h2h-record-bar .num{
font-family:var(--serif);font-size:32px;color:var(--accent);
text-align:center;line-height:1;font-variant-numeric:tabular-nums;
}
.h2h-record-bar .vs{
font-family:var(--mono);font-size:11px;color:var(--ink-3);
letter-spacing:0.16em;text-transform:uppercase;
}
.h2h-stack-bar{
height:14px;background:var(--bg);border:1px solid var(--line);position:relative;
margin:18px 0;border-radius:1px;overflow:hidden;
}
.h2h-stack-bar .left{
position:absolute;top:0;left:0;bottom:0;
background:linear-gradient(90deg,var(--accent),#8a6c2e);
transition:width 0.7s cubic-bezier(0.22,1,0.36,1);
}
.h2h-stack-bar .right{
position:absolute;top:0;right:0;bottom:0;
background:linear-gradient(90deg,#1a0e0d,var(--neg));
transition:width 0.7s cubic-bezier(0.22,1,0.36,1);
}
.h2h-stack-bar .mid{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:1px;height:18px;background:var(--ink);
}
.h2h-prediction{
margin-top:18px;padding:18px;background:var(--bg-2);
border-left:2px solid var(--accent);
font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.6;
}
.h2h-prediction b{color:var(--accent);font-weight:500}
/* TEAM EXPLORER SECTION HEADER */
#team-explorer .head{margin-bottom:24px}
.te-empty{
text-align:center;padding:60px 32px;color:var(--ink-3);
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
}
.te-empty .glyph{
font-family:var(--serif);font-size:48px;color:var(--ink-3);opacity:0.3;
margin-bottom:14px;letter-spacing:0.1em;
}
/* COUNT-UP ANIMATION HELPER */
.count-up{display:inline-block;font-variant-numeric:tabular-nums}
/* EDUCATIONAL TOOLTIP — extends .tdl-info */
.stat-with-tip{display:inline-flex;align-items:center;gap:4px}
/* CSS_END marker */
/* ============ V11.3.0: ROUND 4 — CFB + Sport Tabs + Team Colors ============ */
/* SPORT TABS — sit above the team search bar */
.sport-tabs{
display:flex;gap:0;max-width:560px;margin:0 auto 18px;
background:var(--bg-2);border:1px solid var(--line);
position:relative;
}
.sport-tab{
flex:1;padding:14px 18px;
background:transparent;border:none;color:var(--ink-3);
font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
text-transform:uppercase;cursor:pointer;
transition:all 0.2s;position:relative;
}
.sport-tab:hover{color:var(--ink-2)}
.sport-tab.active{
color:var(--accent);background:var(--panel);
}
.sport-tab.active::after{
content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;
background:var(--accent);
}
.sport-tab .meta{
display:block;font-size:9px;color:var(--ink-3);margin-top:3px;
text-transform:none;letter-spacing:0.04em;
}
.sport-tab.active .meta{color:rgba(212,168,71,0.7)}
.sport-tab.disabled{
cursor:not-allowed;color:var(--line-2);
}
.sport-tab.disabled:hover{color:var(--line-2)}
.sport-tab .coming-soon{
font-size:8px;color:var(--ink-3);
letter-spacing:0.18em;
}
/* TEAM ACCENT COLORS — applied via inline style on .team-card */
.team-card[data-color]{
border-top:3px solid var(--team-color, var(--accent));
}
.team-card[data-color] .team-card-mark{
background:var(--team-mark-bg, radial-gradient(circle at 30% 30%, var(--accent), #8a6c2e));
box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
/* CFB-specific stat additions */
.team-card .conf-badge{
display:inline-block;margin-left:10px;
padding:2px 8px;background:rgba(212,168,71,0.08);
border:1px solid rgba(212,168,71,0.3);
font-family:var(--mono);font-size:10px;color:var(--accent);
letter-spacing:0.12em;text-transform:uppercase;
}
/* Conference rank pill */
.conf-rank-pill{
display:inline-block;padding:1px 6px;background:var(--bg-2);
border:1px solid var(--line-2);font-family:var(--mono);font-size:10px;
color:var(--ink-2);letter-spacing:0.06em;margin-left:8px;
}
/* CFB recent games timeline (full season — usually 12-13 blocks) */
.team-card .recent-games-strip.cfb-season{
height:52px;
}
.team-card .recent-games-strip.cfb-season .rg-block{
min-width:18px;
}
.team-card .rg-block.neutral-game{
border-style:dashed;
}
.team-card .rg-block .week-num{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:7px;color:var(--ink-3);
}
/* Methodology — CFB section */
.method-section .cfb-callout{
margin:14px 0;padding:18px 20px;
background:rgba(91,143,199,0.05);border-left:2px solid var(--blue);
font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.7;
}
.method-section .cfb-callout b{color:var(--blue)}
.method-section .cfb-callout em{color:var(--accent);font-style:normal;font-weight:500}
/* Loading state for sport switch */
.sport-loading{
text-align:center;padding:48px;
font-family:var(--mono);font-size:11px;color:var(--ink-3);
letter-spacing:0.18em;text-transform:uppercase;
}
.sport-loading .glyph{
display:inline-block;width:24px;height:24px;
border:2px solid var(--line);border-top-color:var(--accent);
border-radius:50%;animation:spin 0.8s linear infinite;
margin-bottom:14px;
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* ============ V11.3.1: BRAND VOICE QUOTES ============ */
/* TYPE 1: Section subheader quote — sits below an h2, mono font, accent line */
.brand-subhead{
font-family:var(--mono);
font-size:11px;
color:var(--accent);
letter-spacing:0.16em;
text-transform:none;
margin-top:-12px;
margin-bottom:24px;
padding-bottom:14px;
border-bottom:1px dashed var(--line);
font-style:italic;
opacity:0.85;
}
.brand-subhead::before{
content:"// ";
opacity:0.5;
font-style:normal;
}
/* TYPE 2: Full-width pull quote section break — between major sections */
.brand-pullquote{
margin:64px auto;
max-width:880px;
text-align:center;
padding:32px 40px;
position:relative;
}
.brand-pullquote::before,
.brand-pullquote::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
width:48px;
height:1px;
background:var(--accent);
opacity:0.4;
}
.brand-pullquote::before{top:0}
.brand-pullquote::after{bottom:0}
.brand-pullquote .text{
font-family:var(--serif);
font-size:30px;
color:var(--ink);
line-height:1.35;
letter-spacing:-0.01em;
font-style:italic;
font-weight:400;
}
.brand-pullquote .text em{
color:var(--accent);
font-style:italic;
}
.brand-pullquote .attribution{
font-family:var(--mono);
font-size:9px;
color:var(--ink-3);
letter-spacing:0.22em;
text-transform:uppercase;
margin-top:18px;
}
@media (max-width:640px){
.brand-pullquote .text{font-size:22px}
.brand-pullquote{margin:48px 16px;padding:24px 16px}
}
/* TYPE 3: Calculation flash quote — appears during reveal animation */
.calc-flash{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
pointer-events:none;
opacity:0;
transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1);
background:linear-gradient(180deg,
rgba(10,13,20,0) 0%,
rgba(10,13,20,0.95) 30%,
rgba(10,13,20,0.95) 70%,
rgba(10,13,20,0) 100%
);
}
.calc-flash.visible{opacity:1}
.calc-flash .quote{
font-family:var(--serif);
font-size:22px;
font-style:italic;
color:var(--accent);
letter-spacing:0;
max-width:520px;
text-align:center;
line-height:1.4;
padding:0 24px;
}
.calc-flash .quote::before{
content:"";
display:block;
width:32px;
height:1px;
background:var(--accent);
margin:0 auto 14px;
opacity:0.5;
}
.calc-flash .quote::after{
content:"";
display:block;
width:32px;
height:1px;
background:var(--accent);
margin:14px auto 0;
opacity:0.5;
}
/* Team card needs position:relative for absolute calc-flash overlay */
.team-card{position:relative}
/* V11.3.2: Hero headline mobile reflow */
@media (max-width: 720px) {
.hero h1 {
white-space: normal !important;
font-size: clamp(28px, 7vw, 42px) !important;
line-height: 1.15 !important;
}
}
/* ============ V11.5.2 STAGE B2: SHARE BUTTONS + MODAL ============ */
/* Labeled gold pill — visible in-palette without being loud */
.share-btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:6px 11px;height:auto;width:auto;
background:rgba(212,168,71,0.08);
border:1px solid rgba(212,168,71,0.45);
color:var(--accent);
cursor:pointer;transition:all 0.18s ease;
font-family:var(--mono);font-size:9.5px;font-weight:600;
letter-spacing:0.2em;text-transform:uppercase;line-height:1;
border-radius:2px;
position:relative;
}
.share-btn:hover{
background:rgba(212,168,71,0.18);
border-color:var(--accent);
color:var(--accent);
transform:translateY(-1px);
box-shadow:0 2px 10px rgba(212,168,71,0.22);
}
.share-btn:active{transform:translateY(0)}
.share-btn .glyph{font-size:11px;line-height:1;color:var(--accent);font-weight:700}
.share-btn .lbl{line-height:1}
/* Share button on team cards — top-right, BELOW the TIDAL · Live indicator
so the two elements no longer collide. tidal-pulse stays at top:18px */
.team-card .share-btn-wrap{
position:absolute;top:42px;right:18px;z-index:5;
}
/* Share button on hero metrics ribbon — slightly smaller, inline with stats */
.share-btn-inline{
display:inline-flex;margin-left:10px;
padding:5px 9px;font-size:9px;
vertical-align:middle;
}
/* Share button anchored top-right of the hero stats ribbon */
.ribbon{position:relative}
.ribbon-share-wrap{position:absolute;top:10px;right:14px;z-index:5}
/* Share button grouped next to the calibration section's live badge.
v11.5.4: hardened with margin-left:auto + !important to defeat any
inherited flex layout that was letting the share button drift to the
middle of the head row instead of grouping with the badge. */
.tdl-shell-section .head .head-right,
.section-head .head-right{
display:inline-flex !important;
align-items:center !important;
gap:14px !important;
margin-left:auto;
flex:0 0 auto;
flex-wrap:nowrap;
white-space:nowrap;
}
.tdl-shell-section .head .head-right > *,
.section-head .head-right > *{
flex:0 0 auto;
}
/* Share modal */
.share-modal-overlay{
position:fixed;inset:0;z-index:80;
background:rgba(0,0,0,0.7);
display:none;align-items:center;justify-content:center;
padding:24px;
backdrop-filter:blur(4px);
}
.share-modal-overlay.open{display:flex}
.share-modal{
background:var(--panel);border:1px solid var(--accent);
max-width:480px;width:100%;
position:relative;
animation:shareModalIn 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes shareModalIn{
from{opacity:0;transform:translateY(8px) scale(0.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.share-modal::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--accent),var(--blue),var(--accent));
}
.share-modal-header{
padding:24px 28px 18px;
border-bottom:1px solid var(--line);
}
.share-modal-header .eyebrow{
font-family:var(--mono);font-size:9px;color:var(--accent);
letter-spacing:0.22em;text-transform:uppercase;margin-bottom:8px;
}
.share-modal-header h3{
font-family:var(--serif);font-size:24px;color:var(--ink);
font-weight:400;letter-spacing:-0.01em;margin:0;line-height:1.2;
}
.share-modal-header .sub{
font-family:var(--mono);font-size:11px;color:var(--ink-3);
margin-top:6px;letter-spacing:0.06em;
}
.share-modal-close{
position:absolute;top:18px;right:18px;
width:28px;height:28px;background:transparent;border:none;
color:var(--ink-3);font-size:20px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:color 0.15s;
}
.share-modal-close:hover{color:var(--accent)}
.share-modal-body{padding:20px 28px 24px}
.share-link-box{
display:flex;gap:8px;margin-bottom:18px;
background:var(--bg-2);border:1px solid var(--line);
}
.share-link-box input{
flex:1;background:transparent;border:none;outline:none;
padding:12px 14px;color:var(--ink);
font-family:var(--mono);font-size:11px;letter-spacing:0.04em;
}
.share-link-copy-btn{
background:var(--accent);border:none;color:var(--bg);
padding:0 18px;font-family:var(--mono);font-size:10px;
letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;
transition:background 0.15s;
}
.share-link-copy-btn:hover{background:#e0b558}
.share-link-copy-btn.copied{background:var(--blue);color:var(--ink)}
.share-options-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
margin-bottom:8px;
}
.share-option{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:14px 6px;background:var(--bg-2);border:1px solid var(--line);
cursor:pointer;transition:all 0.18s;
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.14em;text-transform:uppercase;
text-decoration:none;
}
.share-option:hover{
border-color:var(--accent);color:var(--accent);
background:rgba(212,168,71,0.05);
transform:translateY(-1px);
}
.share-option .icon{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
font-size:18px;line-height:1;
}
.share-modal-foot{
padding:14px 28px 18px;
border-top:1px solid var(--line);
font-family:var(--mono);font-size:9px;color:var(--ink-3);
letter-spacing:0.14em;text-transform:uppercase;
text-align:center;line-height:1.6;
}
/* Toast for "link copied" feedback */
.share-toast{
position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
padding:12px 24px;background:var(--accent);color:var(--bg);
font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
z-index:90;opacity:0;pointer-events:none;
transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.share-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:520px){
.share-options-grid{grid-template-columns:repeat(2,1fr)}
}