/* BetSharpr: same look as the NFL 2.0 "Edge Board" (dark navy, gold accents, cards). */
:root{
  --bg:#0a0e17; --card-bg:#111726; --card-border:#26314a; --card-border-best:#22c55e;
  --gold:#f5a623; --gold2:#fbbf24; --teal:#2dd4bf; --away:#f97362;
  --text:#e8ecf3; --text-dim:#8b93a7; --badge-bg:#1a2136; --green:#22c55e;
  --blue:#3b82f6; --red:#ef4444;
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{font-family:-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);margin:0;
  -webkit-text-size-adjust:100%;}
a{color:var(--gold2);}
.ticker{background:#0d1220;border-bottom:1px solid var(--card-border);display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;height:44px;}
.ticker-track{display:flex;align-items:center;gap:28px;padding-left:20px;animation:scroll 140s linear infinite;}
.ticker-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);}
.ticker-item b{color:var(--text);}
.ticker-type{font-size:11px;}
.ticker-conf{background:var(--gold);color:#1a1206;font-weight:700;font-size:11px;border-radius:4px;padding:1px 6px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

.wrap{padding:0 32px;max-width:1400px;margin:0 auto;}
header.top{padding-top:26px;}
main.wrap{padding-bottom:30px;}
.brand{text-decoration:none;color:inherit;}
h1{font-size:34px;margin:0 0 6px;font-weight:800;color:var(--text);}
h1 .accent{background:linear-gradient(90deg,var(--gold),var(--gold2));-webkit-background-clip:text;
  background-clip:text;color:transparent;}
.sub{color:var(--text-dim);font-size:14px;margin-bottom:6px;}
.headerrow{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.weektag{background:var(--badge-bg);border:1px solid var(--card-border);border-radius:6px;padding:6px 12px;
  font-size:12px;color:var(--text-dim);letter-spacing:.04em;white-space:nowrap;}

.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;border-bottom:1px solid var(--card-border);
  scrollbar-width:thin;}
.tabs a{flex:0 0 auto;text-decoration:none;color:var(--text-dim);font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:8px 14px;border-radius:7px;border:1px solid transparent;}
.tabs a:hover{color:var(--text);background:var(--badge-bg);}
.tabs a.on{color:#1a1206;background:linear-gradient(90deg,var(--gold),var(--gold2));}

.section-title{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--text);margin:30px 0 4px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.section-title .n{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:0;}
.notice{margin-top:22px;background:var(--card-bg);border:1px solid var(--card-border);border-left:3px solid var(--gold);
  border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--text-dim);}

.ico{flex:0 0 auto;display:inline-block;vertical-align:middle;}
.bb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:14px;}
.bb-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:16px;}
.sport-tag{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--gold2);margin-bottom:8px;text-transform:uppercase;}
.bb-matchup{font-size:15px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.at{color:var(--text-dim);font-weight:400;}
.when{font-size:11.5px;color:var(--text-dim);margin-bottom:6px;}
.bb-pick{font-size:13px;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pick-val{color:var(--gold2);font-weight:800;font-size:16px;}
.pick-type{color:var(--text-dim);font-size:11px;letter-spacing:.04em;}
.bb-reason{font-size:12.5px;color:var(--text-dim);line-height:1.45;margin-bottom:10px;}
.confbar{height:5px;border-radius:3px;background:#232a3d;overflow:hidden;margin-bottom:6px;}
.confbar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));}
.confrow{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);}
.confrow b{color:var(--text);}
.res{font-size:10.5px;font-weight:800;border-radius:4px;padding:2px 7px;margin-left:auto;}
.res.w{background:var(--green);color:#06230f;} .res.l{background:var(--red);color:#2b0606;}
.res.p{background:#3b4257;color:var(--text);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:14px;}
.card{background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:10px;padding:16px;}
.card.best{border-color:var(--card-border-best);}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;min-height:22px;}
.card-top .when{margin:0;}
.pill{font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:4px;padding:3px 7px;}
.pill-best{background:var(--gold);color:#1a1206;}
.teams{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-dim);letter-spacing:.06em;margin-bottom:2px;}
.team-names{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;}
.team-away{color:var(--away);font-weight:800;font-size:18px;display:flex;align-items:center;gap:7px;}
.team-home{color:var(--teal);font-weight:800;font-size:18px;display:flex;align-items:center;gap:7px;text-align:right;justify-content:flex-end;}
.vs{color:var(--text-dim);font-size:12px;}
.ourpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#0d1220;border:1px solid var(--card-border);
  border-radius:6px;padding:7px 10px;margin-bottom:8px;}
.ourpick .lab{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--text-dim);}
.method{font-size:12px;color:var(--text-dim);margin-top:22px;line-height:1.5;}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:14px;}
.tile{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--text);background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:10px;padding:14px;}
.tile:hover{border-color:var(--gold);}
.tile-name{font-weight:800;font-size:15px;}
.tile-sub,.tile-rec{font-size:12px;color:var(--text-dim);margin-top:3px;}
.tbadge{font-size:9.5px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle;
  background:#3b4257;color:var(--text);}
.tbadge.live{background:var(--green);color:#06230f;}
.tbadge.beta{background:var(--gold);color:#1a1206;}

.prose{max-width:780px;font-size:14.5px;line-height:1.65;color:var(--text);margin-top:14px;}
.prose h2{font-size:17px;margin:26px 0 6px;}
.prose p,.prose li{color:#c9cfdb;}
.footer{margin-top:20px;padding-top:16px;padding-bottom:40px;border-top:1px solid var(--card-border);color:var(--text-dim);
  font-size:12.5px;line-height:1.6;}
.footer b{color:var(--text);}

.intro{font-size:14.5px;line-height:1.6;color:#c9cfdb;max-width:820px;margin:18px 0 0;}
/* Flag emoji font (Twemoji, CC-BY 4.0), because Windows shows flag emoji as letters. */
@font-face{font-family:"Flags";src:url(flags.woff2) format("woff2");font-display:swap;
  unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F;}
.flag{line-height:1;display:inline-block;vertical-align:middle;font-family:"Flags","Segoe UI Emoji","Apple Color Emoji",sans-serif;}
.rank{font-size:11px;font-weight:800;color:var(--text-dim);margin-right:4px;}
.side-subs{display:flex;justify-content:space-between;gap:8px;margin:-4px 0 10px;font-size:11.5px;color:var(--text-dim);}
.side-subs span:last-child{text-align:right;}
.details{margin:0 0 10px;font-size:12px;line-height:1.45;}
.details div{display:flex;gap:8px;padding:3px 0;border-top:1px solid #1c2438;}
.details dt{flex:0 0 74px;color:var(--text-dim);font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding-top:1px;}
.details dd{margin:0;color:#c9cfdb;}
.tscroll{overflow-x:auto;}
table.compare,table.data{width:100%;border-collapse:collapse;font-size:12px;}
table.compare{margin-bottom:10px;}
table.compare th,table.data th{color:var(--text-dim);font-size:10.5px;letter-spacing:.04em;text-align:left;font-weight:800;
  padding:5px 6px;border-bottom:1px solid var(--card-border);}
table.compare td,table.data td{padding:5px 6px;border-bottom:1px solid #1c2438;color:#c9cfdb;}
table.compare td:first-child{color:var(--text-dim);}
table.compare th:nth-child(2),table.compare td:nth-child(2){color:var(--away);text-align:center;}
table.compare th:nth-child(3),table.compare td:nth-child(3){color:var(--teal);text-align:center;}
table.data tr:hover td{background:#141b2d;}
table.results td:last-child{text-align:right;}
.gprops{background:#0d1220;border:1px solid var(--card-border);border-radius:6px;padding:7px 10px;margin-bottom:10px;}
.gprops .lab{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--text-dim);margin-bottom:3px;}
.gprops ul{list-style:none;margin:0;padding:0;font-size:12.5px;}
.gprops li{display:flex;gap:6px;align-items:center;padding:2px 0;flex-wrap:wrap;}
.pp-player{font-weight:700;} .pp-pick{color:var(--gold2);} .pp-conf{margin-left:auto;color:var(--text-dim);font-size:11px;}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:14px;}
.stat{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;}
.stat-lab{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--text-dim);text-transform:uppercase;}
.stat-val{font-size:24px;font-weight:800;margin-top:4px;}
.stat-sub{font-size:12px;color:var(--text-dim);} .stat-sub.up{color:var(--green);}
.props{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:14px;}
.prop{background:var(--card-bg);border:1px solid var(--card-border);border-left:3px solid var(--teal);border-radius:10px;padding:12px 14px;}
.prop-player{font-weight:800;font-size:14px;margin-bottom:2px;}
.prop-team{font-weight:500;font-size:11.5px;color:var(--text-dim);}
.tboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-top:30px;}
.tbox{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;}
.tbox-title{font-size:13px;font-weight:800;letter-spacing:.05em;margin-bottom:6px;}
.tbox-title .n{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:0;}

@media (max-width:640px){
  .wrap{padding:0 16px;}
  h1{font-size:28px;}
  .grid,.bb-grid,.tiles,.props,.tboxes{grid-template-columns:1fr;}
  .team-away,.team-home{font-size:16px;}
}
