/* ==========================================================================
   Matchdaita — the day's bet
   Loaded after site.css, which supplies the palette, the slip and the footer.
   ========================================================================== */

.betwrap { max-width:900px; }

/* ---- day navigator ---- */
.daynav { display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.daystep {
  flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--line2); color:var(--mut); text-decoration:none; font-size:14px;
}
.daystep:hover { background:var(--card2); color:var(--txt); text-decoration:none; }
.daystep[aria-disabled="true"] { opacity:.35; pointer-events:none; }
.daylist { display:flex; gap:6px; overflow-x:auto; padding:2px; flex:1; scrollbar-width:thin; }
.daychip {
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--mut);
  font-size:12.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.daychip:hover { border-color:var(--line2); color:var(--txt); text-decoration:none; }
.daychip[aria-current="page"] { background:var(--bar); border-color:var(--bar); color:#fff; }
.daychip .dot { width:7px; height:7px; border-radius:50%; flex:none; background:var(--mut2); }
.daychip .dot.won { background:var(--win); }
.daychip .dot.lost { background:var(--loss); }
.daychip .dot.sealed { background:transparent; border:1.5px solid currentColor; }

/* ---- header ---- */
.dayhead h1 { font-size:34px; letter-spacing:-.035em; }
.dayhead .lede { margin-top:10px; }
/* The row carries whatever counters that day's scan actually published — a scan
   that did not count its price band leaves no gap where the figure would have
   been — so the columns come from the count rather than from a number here. */
.counters { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:22px;
            background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:640px){
  .counters { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; }
}
.counter { background:var(--card); padding:13px 15px; }
.counter b { display:block; font-size:21px; font-weight:800; letter-spacing:-.03em;
             font-variant-numeric:tabular-nums; line-height:1.1; }
.counter span { display:block; margin-top:4px; font-size:9.5px; font-weight:700; letter-spacing:.08em;
                text-transform:uppercase; color:var(--mut2); }
.counter.hi b { color:var(--gold); }

/* ---- sealed state ---- */
.sealed-panel {
  margin-top:26px; border:1px solid var(--line); border-left:3px solid var(--go);
  border-radius:var(--r); background:var(--card); box-shadow:var(--shadow); padding:24px;
}
.sealed-panel h2 { font-size:20px; }
.sealed-panel p { margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--mut); max-width:62ch; }
.sealed-panel p b { color:var(--txt); font-weight:700; }
.countdown {
  display:inline-flex; align-items:baseline; gap:10px; margin-top:18px; padding:12px 16px;
  border-radius:10px; background:var(--card2);
}
.countdown b { font-size:26px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.countdown span { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut2); }
.sealed-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* ---- the slips ---- */
/* However many bets were placed that day. Two fill the row; three wrap to two and
   one, which is what three of anything does. */
.slips { display:grid; gap:20px; margin-top:26px; }
@media (min-width:820px){
  .slips { grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); align-items:start; }
}
.slipwrap h2 { font-size:18px; margin-bottom:4px; }
.slipwrap .sum { font-size:13px; color:var(--mut); line-height:1.55; margin-bottom:12px; }

/* ---- refusals & notes reuse the landing page's components ---- */
.daysection { margin-top:38px; padding-top:26px; border-top:1px solid var(--line); }
.daysection h2 { font-size:22px; }
.daysection > .lede { margin-top:8px; }

.rules { margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.rules h2 { font-size:18px; }
.rules p { margin-top:10px; font-size:14px; line-height:1.65; color:var(--mut); max-width:70ch; }
.rules p b { color:var(--txt); font-weight:700; }
.rules .rules-sub { font-size:13px; color:var(--mut2); }

/* ---- the asks ------------------------------------------------------------
   The free page is where somebody decides whether to pay, so it asks more than
   once. None of these say the paid bet is better, because it is not the same
   claim: it is the same bet, and the only thing paying buys is the clock. */

/* Sits above the slips and puts the difference in figures taken from this day's
   own kick-offs rather than in an adjective. */
.timing {
  margin-top:26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:18px 20px; border-radius:var(--r); background:var(--card2);
  border:1px solid var(--line);
}
.timing p { flex:1 1 320px; font-size:14px; line-height:1.6; color:var(--mut); margin:0; }
.timing p b { color:var(--txt); font-weight:700; }
.timing .btn { flex:none; }

/* The closing block, after the reasoning and the refusals have done the work. */
.closer {
  margin-top:38px; padding:26px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); text-align:center;
}
.closer h2 { font-size:24px; }
.closer p { margin:10px auto 0; font-size:14.5px; line-height:1.6; color:var(--mut); max-width:52ch; }
.closer-cta { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:20px; }
.closer .closer-sub { margin-top:16px; font-size:12.5px; color:var(--mut2); }
.closer .closer-sub b { color:var(--txt); font-weight:700; }

/* Arrives after a screenful, leaves for good when dismissed. */
.upsell {
  position:fixed; left:50%; bottom:0; z-index:60;
  width:min(100% - 24px, 760px);
  transform:translate(-50%, 130%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:14px; padding:14px 16px 14px 20px; border-radius:14px;
  background:var(--card); border:1px solid var(--line2);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
}
.upsell.in { transform:translate(-50%, 0); }
.upsell p { flex:1 1 300px; margin:0; font-size:13.5px; line-height:1.5; color:var(--mut); }
.upsell p b { color:var(--txt); font-weight:700; }
.upsell .btn { flex:none; }
.upsell-x {
  flex:none; width:30px; height:30px; border-radius:8px; border:0; cursor:pointer;
  background:transparent; color:var(--mut2); font-size:19px; line-height:1;
}
.upsell-x:hover { background:var(--card2); color:var(--txt); }
@media (prefers-reduced-motion: reduce) { .upsell { transition:none; } }
@media (max-width: 560px) {
  .upsell { padding:13px 14px; gap:10px; }
  .upsell p { flex-basis:100%; font-size:13px; }
  .upsell .btn { flex:1; }
}