/* scorer.css - extracted from inline <style> dumps (SCORER_INLINE_CSS + FIXCARD_CSS + scorer-odds.html template) 2026-07-14. See CLAUDE.md HARD RULE: no inline CSS dumps. */

/* ===== SCORER_INLINE_CSS ===== */
body.prempage .moreoc-section ul.quickodds-list li,
.moreoc-section ul.quickodds-list li {
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important; background:#fff; border-bottom:1px solid #f0e8e0;
  margin:0 !important; list-style:none;
}
/* Hide rows beyond the first 5 until Load More is clicked.
   MUST live in this inline  AFTER the display:flex rule above
   to win the cascade (same specificity = source-order tiebreak). */
body.prempage .moreoc-section ul.quickodds-list li.moreoc-row-hidden,
.moreoc-section ul.quickodds-list li.moreoc-row-hidden { display: none !important; }
.moreoc-section ul.quickodds-list li:last-child { border-bottom:none; }
.moreoc-section ul.quickodds-list li:nth-child(even) { background:#fbf7f1; }
body.prempage .moreoc-section ul.quickodds-list li .oddsteam,
.moreoc-section ul.quickodds-list li .oddsteam {
  flex: 1 1 auto !important; min-width: 0 !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  font-weight:600 !important; text-align: left !important;
}
.moreoc-section ul.quickodds-list li .oddsteam a { text-decoration:none !important; color:#222 !important; display:inline-flex !important; align-items:center; gap:6px; }
.moreoc-section ul.quickodds-list li .oddsteam .playername-full { display: inline; }
.moreoc-section ul.quickodds-list li .oddsteam .playername-short { display: none; }
.moreoc-section ul.quickodds-list li .oddsteam-arrow { color:#c8102e; font-weight:bold; }
body.prempage .moreoc-section ul.quickodds-list li .oddsnumber,
.moreoc-section ul.quickodds-list li .oddsnumber {
  flex: 0 0 auto !important; font-weight: 700 !important; padding: 4px 10px !important;
  white-space: nowrap !important; margin: 0 !important;
}
body.prempage .moreoc-section ul.quickodds-list li .betongame2,
.moreoc-section ul.quickodds-list li .betongame2 {
  flex: 0 0 auto !important; width: auto !important; margin: 0 !important; float: none !important;
}
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a,
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a:hover,
.moreoc-section ul.quickodds-list li .betongame2 a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 4px !important; padding: 8px 14px !important;
  background: linear-gradient(180deg,#d9621f 0%,#CC551E 50%,#b54515 100%) !important;
  color: #fff !important; font-weight: 700 !important;
  border: 1px solid #a83e10 !important; border-radius: 5px !important;
  text-decoration: none !important; font-size: 0 !important; line-height: 1 !important;
  white-space: nowrap !important;
}
body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li .betongame2 a .bigtextlink,
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a .bigtextlink,
.moreoc-section ul.quickodds-list li .betongame2 a .bigtextlink {
  font-size: 10pt !important; color:#fff !important; font-weight: 700 !important;
}
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a .smalltextlink,
.moreoc-section ul.quickodds-list li .betongame2 a .smalltextlink { display:none !important; }
/* The Bet Now button must NOT change on hover - that gradient brighten was the
   "pops out on hover" quirk (there is no transform anywhere, exhaustively
   checked, so the gradient flash was the whole effect). Hold it identical to
   the resting state on hover/focus/active for every input type, and pin
   transform/box-shadow to none defensively. */
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a:hover,
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a:focus,
body.prempage .moreoc-section ul.quickodds-list li .betongame2 a:active,
.moreoc-section ul.quickodds-list li .betongame2 a:hover,
.moreoc-section ul.quickodds-list li .betongame2 a:focus,
.moreoc-section ul.quickodds-list li .betongame2 a:active {
  background: linear-gradient(180deg,#d9621f 0%,#CC551E 50%,#b54515 100%) !important;
  transform: none !important; box-shadow: none !important;
}
/* Force the Bet Now label WHITE on the orange button. The shared quickodds card
   rule (body.oddspages.oddsteampage.prempage ... betongame2 a {color:#c12626})
   was leaking its red text colour onto this button - this higher-specificity
   rule (matches the WC page) keeps the text white so it's never red-on-button. */
body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li .betongame2 a,
body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li .betongame2 a .bigtextlink {
  color: #fff !important;
}
/* Touch devices have no real hover, so a tap on a row / Bet Now used to leave a
   stuck :hover state (the gradient brightening + the name-arrow nudge - the
   "pops out on mobile" quirk). Cancel every hover change here on touch. */
@media (hover: none) {
  body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li:hover,
  .moreoc-section ul.quickodds-list li:hover { background:#fff !important; }
  body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li:nth-child(even):hover,
  .moreoc-section ul.quickodds-list li:nth-child(even):hover { background:#fbf7f1 !important; }
  body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li .betongame2 a:hover,
  .moreoc-section ul.quickodds-list li .betongame2 a:hover { background:linear-gradient(180deg,#d9621f 0%,#CC551E 50%,#b54515 100%) !important; }
  body.oddspages.oddsteampage.prempage .moreoc-section ul.quickodds-list li .oddsteam a:hover .oddsteam-arrow,
  .moreoc-section ul.quickodds-list li .oddsteam a:hover .oddsteam-arrow { transform:none !important; }
}
@media (max-width: 600px) {
  body.prempage .moreoc-section ul.quickodds-list li,
  .moreoc-section ul.quickodds-list li { gap:6px !important; padding:10px 10px !important; }
  body.prempage .moreoc-section ul.quickodds-list li .oddsnumber,
  .moreoc-section ul.quickodds-list li .oddsnumber { font-size:10pt !important; padding:4px 8px !important; }
  body.prempage .moreoc-section ul.quickodds-list li .betongame2 a,
  .moreoc-section ul.quickodds-list li .betongame2 a { padding:6px 9px !important; }
  .moreoc-section ul.quickodds-list li .betongame2 a .bigtextlink { font-size:9pt !important; }
}
/* <=360px: smaller player-name font (still the full name). */
@media (max-width: 360px) {
  body.prempage .moreoc-section ul.quickodds-list li .oddsteam,
  .moreoc-section ul.quickodds-list li .oddsteam { font-size:9.5pt !important; }
  body.prempage .moreoc-section ul.quickodds-list li .oddsnumber,
  .moreoc-section ul.quickodds-list li .oddsnumber { font-size:9.5pt !important; padding:4px 7px !important; }
}
/* <=330px: abbreviate the player name. */
@media (max-width: 330px) {
  .moreoc-section ul.quickodds-list li .oddsteam .playername-full:not(.playername-noshort) { display: none !important; }
  .moreoc-section ul.quickodds-list li .oddsteam .playername-short { display: inline !important; }
  .moreoc-section ul.quickodds-list li .oddsteam .playername-full.playername-noshort { display: inline !important; }
}
/* No-odds "coming soon": next-match card + odds/kick-off countdown timers */
.scorer-coming-soon .plscorer-nextfix{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;background:#fff;border:1px solid #ead9cc;border-radius:10px;padding:12px 16px;margin:14px 0;}
.scorer-coming-soon .plscorer-nextfix-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#CC551E;}
.scorer-coming-soon .plscorer-nextfix-teams{font-weight:700;color:#1b1b1b;font-size:14pt;}
.scorer-coming-soon .plscorer-nextfix-teams em{font-style:normal;color:#8a8a8a;font-weight:600;margin:0 4px;}
.scorer-coming-soon .plscorer-nextfix-when{font-size:12px;color:#5b6b7b;width:100%;text-align:center;}
.scorer-coming-soon .plscorer-countdowns{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 4px;}
.scorer-coming-soon .plsc-cd{flex:1 1 200px;background:linear-gradient(180deg,#fff,#fbf5ef);border:1px solid #ead9cc;border-radius:10px;padding:14px 12px;text-align:center;}
.scorer-coming-soon .plsc-cd h3{margin:0 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#8a5a3a;}
.scorer-coming-soon .plsc-cd-time{margin:0;font-size:20pt;font-weight:800;color:#CC551E;font-variant-numeric:tabular-nums;line-height:1.1;}
.scorer-coming-soon .plsc-cd-note{margin:6px 0 0;font-size:11px;color:#5b6b7b;line-height:1.35;}
@media(max-width:520px){.scorer-coming-soon .plscorer-countdowns{flex-direction:column;}.scorer-coming-soon .plsc-cd-time{font-size:18pt;}}

/* ===== FIXCARD_CSS ===== */
.plscorer-fixture-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:0 auto 16px;padding:12px 16px;max-width:640px;background:#fff;border:1.5px solid #1b1b1b;border-radius:8px;text-align:center;}.plscorer-fixture-card .plscorer-fixture-tag{font-size:9pt;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;}.plscorer-fixture-card .plscorer-fixture-match{font-size:12pt;font-weight:700;color:#1b1b1b;}.plscorer-fixture-card .plscorer-when{font-size:10pt;font-weight:600;color:#CC551E;}

/* ===== scorer-odds template styles ===== */
.wh-football-banner-wrap { margin: 0 0 16px; text-align: center; line-height: 0; }
.wh-football-banner-wrap a { display: inline-block; text-decoration: none !important; border-bottom: 0 !important; }
.wh-football-banner-wrap .wh-banner { position: relative; display: inline-block; line-height: 0; }
.wh-football-banner-wrap .wh-banner img { display: block; max-width: 100%; height: auto; }
.wh-banner--football {
  display: block;
  width: 100%; max-width: 900px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0c2e;
  transition: box-shadow .18s ease, transform .15s ease;
}
.wh-football-banner-wrap a:hover .wh-banner--football,
.wh-football-banner-wrap a:focus-visible .wh-banner--football {
  box-shadow: 0 6px 22px rgba(200,16,46,.25);
}
.wh-banner--football img:not(.wh-banner-logo) { width: 100%; height: auto; display: block; }
.wh-banner--football .wh-banner-logo {
  position: absolute !important;
  top: 23px !important; left: 20px !important;
  width: auto !important; height: 34px !important;
  max-width: 200px !important;
  display: block !important; z-index: 2;
}
@media (max-width: 420px) { .wh-banner--football .wh-banner-logo { top: 15px !important; left: 12px !important; height: 17px !important; } }
.wh-football-banner-wrap .wh-banner-subtext,
.wh-football-banner-wrap .wh-banner-headline,
.wh-football-banner-wrap .wh-banner-cta {
  position: absolute; white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  transition: transform .15s ease, background .15s ease, color .15s ease, text-shadow .15s ease;
}
@keyframes whf-slide-in {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes whf-cta-slide-in {
  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes whf-shine-text {
  0%   { background-position: 200% center; }
  18%  { background-position: -50% center; }
  100% { background-position: -50% center; }
}
@keyframes whf-shine-btn {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  18%  { transform: translateX(130%)  skewX(-18deg); }
  100% { transform: translateX(130%)  skewX(-18deg); }
}
.wh-banner--football .wh-banner-headline {
  animation:
    whf-slide-in .55s ease-out both,
    whf-shine-text 4.5s ease-in-out 1s infinite;
}
.wh-banner--football .wh-banner-subtext { animation: whf-slide-in .55s ease-out .25s both; }
.wh-banner--football .wh-banner-cta     { animation: whf-cta-slide-in .55s ease-out .45s both; }
@media (prefers-reduced-motion: reduce) {
  .wh-banner--football .wh-banner-headline,
  .wh-banner--football .wh-banner-subtext,
  .wh-banner--football .wh-banner-cta { animation: none; }
  .wh-banner--football .wh-banner-cta::after { animation: none; opacity: 0; }
}
.wh-banner--football .wh-banner-headline {
  top: 54%; left: 7px;
  background: linear-gradient(110deg,
    #f0c87a 0%,
    #f0c87a 38%,
    #fff3c4 47%,
    #ffffff 50%,
    #fff3c4 53%,
    #f0c87a 62%,
    #f0c87a 100%);
  background-size: 250% 100%;
  background-position: 200% center;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  font-size: 32pt; font-weight: 500;
  letter-spacing: -.3px;
}
.wh-banner--football .wh-banner-subtext {
  top: 24%; left: 220px;
  color: #fff;
  font-size: 12pt; font-weight: 500;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.wh-banner--football .wh-banner-cta {
  top: 50%; right: 240px;
  transform: translateY(-50%);
  background: #f0c87a; color: #11122d;
  font-size: 11pt; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
  padding: 13px 28px; border-radius: 4px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  overflow: hidden;
  isolation: isolate;
}
.wh-banner--football .wh-banner-cta::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(110deg,
    transparent 38%,
    rgba(255,255,255,.78) 50%,
    transparent 62%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  animation: whf-shine-btn 4.5s ease-in-out 2.3s infinite;
}
.wh-football-banner-wrap a:hover .wh-banner-headline,
.wh-football-banner-wrap a:focus-visible .wh-banner-headline {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)) brightness(1.08);
}
.wh-football-banner-wrap a:hover .wh-banner-cta,
.wh-football-banner-wrap a:focus-visible .wh-banner-cta {
  background: #ffd98a; color: #000;
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
@media (max-width: 999px) and (min-width: 801px) {
  .wh-banner--football {
    --whf-fluid: clamp(0, calc((100vw - 801px) / 198px), 1);
  }
  .wh-banner--football .wh-banner-logo {
    top: calc(18px + 5px * var(--whf-fluid)) !important;
    left: calc(16px + 4px * var(--whf-fluid)) !important;
    height: calc(28px + 6px * var(--whf-fluid)) !important;
  }
  .wh-banner--football .wh-banner-headline {
    top: 54%;
    left: calc(5px + 4px * var(--whf-fluid));
    font-size: calc(22pt + 10pt * var(--whf-fluid));
  }
  .wh-banner--football .wh-banner-subtext {
    top: 24%;
    left: calc(180px + 40px * var(--whf-fluid));
    font-size: calc(10pt + 2pt * var(--whf-fluid));
  }
  .wh-banner--football .wh-banner-cta {
    right: calc(180px + 60px * var(--whf-fluid));
    padding: calc(10px + 3px * var(--whf-fluid)) calc(22px + 6px * var(--whf-fluid));
    font-size: calc(10pt + 1pt * var(--whf-fluid));
  }
}
@media (max-width: 800px) and (min-width: 421px) {
  .wh-banner--football {
    --whf-fluid: clamp(0, calc((100vw - 421px) / 379px), 1);
    padding-top: 6px;
    padding-bottom: 12px;
  }
  .wh-banner--football .wh-banner-cta {
    right: calc(89px + 50px * var(--whf-fluid));
    padding: calc(7px + 3px * var(--whf-fluid)) calc(7px + 7px * var(--whf-fluid));
    font-size: calc(9pt + 1pt * var(--whf-fluid));
  }
  .wh-banner--football .wh-banner-logo {
    top: calc(9px + 5px * var(--whf-fluid)) !important;
    left: calc(7px + 3px * var(--whf-fluid)) !important;
    height: calc(17px + 6px * var(--whf-fluid)) !important;
  }
  .wh-banner--football .wh-banner-headline {
    top: 40%;
    left: calc(7px + 3px * var(--whf-fluid));
    font-size: calc(15pt + 7pt * var(--whf-fluid));
  }
  .wh-banner--football .wh-banner-subtext {
    top: 70%;
    left: calc(8px + 10px * var(--whf-fluid));
    font-size: calc(8pt + 2pt * var(--whf-fluid));
  }
}
@media (max-width: 420px) {
  .wh-banner--football { padding-bottom: 14px; padding-top: 22px; }
  .wh-banner--football .wh-banner-headline { font-size: 14pt; left: 12px; top: 45%; }
  .wh-banner--football .wh-banner-subtext  { font-size: 7.5pt; left: 12px; top: 75%; }
  .wh-banner--football .wh-banner-cta { display: none; }
}
@media (max-width: 500px) {
  .wh-football-banner-wrap a,
  .wh-football-banner-wrap a .wh-banner--football {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .wh-banner--football {
    position: relative;
    min-height: 100px;
    overflow: hidden;
  }
  .wh-banner--football img:not(.wh-banner-logo) {
    position: absolute;
    top: 0;
    right: 0;
    height: 88%;
    width: auto;
    max-width: 42%;
    object-fit: contain;
    object-position: right center;
    z-index: 0;
  }
  .wh-banner--football .wh-banner-logo,
  .wh-banner--football .wh-banner-headline,
  .wh-banner--football .wh-banner-subtext,
  .wh-banner--football .wh-banner-cta {
    z-index: 2;
  }
}