/* Motion and finish: logo sizing, the sidebar's expand/collapse, and hover effects on the top tabs, the sidebar and
   buttons. Loaded last. Uses the site tokens (--d-red is the accent in both the Classic and Cash looks). Everything
   here is decoration: with reduced motion it switches off. */
:root{--pol-accent:var(--d-red,#e5132f);--pol-ease:cubic-bezier(.2,.8,.2,1)}

/* Logo: the full "SubLines / SPORTS" mark, never clipped */
body .topbar .brand .wordmark{width:190px!important;height:56px!important;background-size:contain!important;background-position:left center!important}
@media (max-width:700px){body .topbar .brand .wordmark{width:140px!important;height:41px!important}}

/* Sidebar: the column glides between full and icon-only; labels fade and slide instead of popping */
@media (min-width:1051px){
  #app>.layout{transition:grid-template-columns .32s var(--pol-ease)}
  #app>.layout>.sidebar .side-label{display:inline-block!important;white-space:nowrap;overflow:hidden;max-width:160px;opacity:1;transform:none;transition:max-width .32s var(--pol-ease),opacity .2s ease .08s,transform .32s var(--pol-ease)}
  body.side-mini #app>.layout>.sidebar .side-label{max-width:0;opacity:0;transform:translateX(-8px);transition:max-width .28s var(--pol-ease),opacity .12s ease,transform .28s var(--pol-ease)}
  #app>.layout>.sidebar .count,#app>.layout>.sidebar .eyebrow,#app>.layout>.sidebar .side-note{transition:opacity .2s ease}
  body.side-anim #app>.layout>.sidebar .count,body.side-anim #app>.layout>.sidebar .eyebrow,body.side-anim #app>.layout>.sidebar .side-note{opacity:0}
  .side-toggle svg{transition:transform .32s var(--pol-ease)}
  body.side-mini .side-toggle svg{transform:rotate(180deg)}
}

/* Top tabs: an accent underline that grows from the centre, a soft glow and a small lift */
body .topnav a{position:relative;transition:color .2s ease,transform .2s var(--pol-ease),text-shadow .2s ease;background-image:linear-gradient(var(--pol-accent),var(--pol-accent));background-repeat:no-repeat;background-position:50% calc(100% - 6px);background-size:0 3px;transition:background-size .28s var(--pol-ease),color .2s ease,transform .2s var(--pol-ease),text-shadow .2s ease}
body .topnav a:not(.active):hover{background-size:calc(100% - 28px) 3px;color:#fff!important;transform:translateY(-1px);text-shadow:0 0 18px color-mix(in srgb,var(--pol-accent) 60%,transparent)}
html[data-theme=cash] body .topnav a:not(.active):hover{color:var(--d-ink,#111)!important}

/* Sidebar links: an accent bar grows on the left, a tinted sweep fills the row, the icon nudges and lights up */
#app>.layout>.sidebar .side-link{position:relative;overflow:hidden;isolation:isolate;transition:color .2s ease,background-color .2s ease}
#app>.layout>.sidebar .side-link::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--pol-accent) 30%,transparent),transparent 85%);transform:translateX(-101%);transition:transform .35s var(--pol-ease)}
#app>.layout>.sidebar .side-link::after{content:'';position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;background:var(--pol-accent);transform:translateY(-50%);transition:height .25s var(--pol-ease)}
#app>.layout>.sidebar .side-link:hover::before,#app>.layout>.sidebar .side-link:focus-visible::before{transform:none}
#app>.layout>.sidebar .side-link:hover::after,#app>.layout>.sidebar .side-link:focus-visible::after{height:60%}
#app>.layout>.sidebar .side-link .icon,#app>.layout>.sidebar .side-link svg{transition:transform .25s var(--pol-ease),filter .25s ease,color .2s ease}
#app>.layout>.sidebar .side-link:hover .icon,#app>.layout>.sidebar .side-link:hover svg{transform:translateX(3px) scale(1.1);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pol-accent) 70%,transparent))}
#app>.layout>.sidebar .side-link:hover .side-label{transform:translateX(2px)}

/* Bet buttons: lift, accent edge glow and a light sweep across the face */
body .sl-mb:not(:disabled),body .odds:not(:disabled),body .gp-peek,body .gp-arrow:not(:disabled){transition:transform .18s var(--pol-ease),box-shadow .2s ease,border-color .2s ease,filter .2s ease}
body .sl-mb:not(:disabled):hover,body .odds:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px color-mix(in srgb,var(--pol-accent) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--pol-accent) 45%,transparent)!important}
body .sl-mb:not(:disabled):active,body .odds:not(:disabled):active{transform:translateY(0) scale(.98)}
body .sl-mb{position:relative;overflow:hidden}
body .sl-mb:not(:disabled)::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,#ffffff59,transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
body .sl-mb:not(:disabled):hover::before{animation:pol-sheen .7s var(--pol-ease)}
@keyframes pol-sheen{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}
body .gp-peek:hover,body .gp-arrow:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px #10182866}

/* Pill and action buttons: a gentle lift and accent glow */
body .gp-tab,body .gp-view-btn,body .gp-promo-btn,body .hdr-login,body .hdr-signup,body .primary,body .secondary,body .category,body .sl-board-nav a,body .sl-board-nav button,body .spotlight-link{transition:transform .18s var(--pol-ease),box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
body .gp-tab:hover,body .gp-view-btn:hover,body .gp-promo-btn:hover,body .hdr-login:hover,body .hdr-signup:hover,body .primary:hover,body .secondary:hover,body .category:hover,body .sl-board-nav a:hover,body .sl-board-nav button:hover,body .spotlight-link:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--pol-accent) 70%,transparent)}
body .gp-cats-scroll a{transition:color .2s ease}
body .gp-cats-scroll a:not(.is-active)::after{content:'';position:absolute;left:50%;right:50%;bottom:-2px;height:3px;border-radius:3px 3px 0 0;background:var(--pol-accent);opacity:.55;transition:left .25s var(--pol-ease),right .25s var(--pol-ease)}
body .gp-cats-scroll a:not(.is-active):hover::after{left:-4px;right:-4px}

@media (prefers-reduced-motion:reduce){
  #app>.layout,#app>.layout>.sidebar .side-label,#app>.layout>.sidebar .side-link::before,#app>.layout>.sidebar .side-link::after,body .topnav a,body .sl-mb,body .odds,.side-toggle svg{transition:none!important}
  body .sl-mb:not(:disabled):hover::before{animation:none}
  body .sl-mb:not(:disabled):hover,body .odds:not(:disabled):hover,body .topnav a:hover{transform:none}
}

/* Phones: the search circle is a real tap target — the (invisible) input covers it, so a tap focuses and opens search */
@media (max-width:640px){
  body header.topbar .topright .hsearch:not(.open):not(:focus-within) input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;opacity:0;cursor:pointer;z-index:1}
}
@media (max-width:360px){body header.topbar .brand .wordmark{width:84px!important;height:23px!important}body header.topbar .topright{gap:3px!important}body header.topbar .topright :is(.hsearch,.wallet-btn,.bell-btn,.avatar){width:32px!important;height:32px!important;min-width:32px!important}}
@media (max-width:640px){
  body header.topbar{position:relative}
  body header.topbar .topright .hsearch.open,body header.topbar .topright .hsearch:focus-within{position:absolute!important;left:12px!important;right:12px!important;top:6px!important;width:auto!important;min-width:0!important;height:40px!important;z-index:90;background:#1d2025!important;border-color:#5a616b!important;box-shadow:0 12px 30px -10px #000a}
  body header.topbar .topright .hsearch.open input,body header.topbar .topright .hsearch:focus-within input{position:static!important;width:100%!important;opacity:1!important;padding:0 12px 0 40px!important;color:#fff!important}
  body header.topbar .topright .hsearch.open input::placeholder,body header.topbar .topright .hsearch:focus-within input::placeholder{color:#9aa1ab!important}
  body header.topbar .topright .hsearch .hsearch-list{left:0;right:0;width:auto}
}
@media (max-width:360px){body header.topbar .coin-select .coin-cur>:not(.coin):not(b):not(strong){display:none!important}}

/* Phones: the featured game's lines sit side by side (two per market) instead of one button per row */
@media (max-width:640px){
  body .broadcast-screen .spotlight-lines{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:14px 18px!important}
  body .broadcast-screen .spotlight-lines h2{margin-bottom:6px!important}
  body .broadcast-screen .spotlight-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;grid-auto-flow:column;gap:8px!important}
  body .broadcast-screen .spotlight-options .odds{min-width:0!important;width:auto!important;min-height:52px!important;padding:6px 8px!important}
  body .broadcast-screen .spotlight-options .odds>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---- Hover pass 2: every remaining clickable gets a quiet, consistent response ---------------------------------
   Three families: (1) text links grow an accent underline, (2) icon/header controls lift with a soft ring,
   (3) cards and options lift a hair with a deeper shadow. Short (≤220ms), eased, never more than 2px of travel. */
body .text-link,body .spotlight-bottom a,body .st-link,body .sl-viewall,body .sl-more,body .wl-history{background-image:linear-gradient(currentColor,currentColor)!important;background-repeat:no-repeat!important;background-position:0 100%!important;background-size:0 1.5px!important;text-decoration:none!important;transition:background-size .25s var(--pol-ease),color .18s ease!important}
body .text-link:hover,body .spotlight-bottom a:hover,body .st-link:hover,body .sl-viewall:hover,body .sl-more:hover,body .wl-history:hover{background-size:100% 1.5px!important}
body .spotlight-bottom a:hover{color:#fff!important}

body header.topbar :is(.wallet-btn,.bell-btn,.avatar,.coin-cur,.hsearch),body .side-toggle,body .slip-close,body .st-x,body .share-x,body .wl-x,body .remove,body .pr-nav{transition:transform .18s var(--pol-ease),box-shadow .2s ease,background-color .2s ease,border-color .2s ease,filter .2s ease!important}
body header.topbar :is(.wallet-btn,.bell-btn,.avatar,.coin-cur):hover{transform:translateY(-1px);box-shadow:0 0 0 3px color-mix(in srgb,var(--pol-accent) 22%,transparent),0 8px 18px -10px #000c!important;filter:brightness(1.08)}
body header.topbar .hsearch:not(.open):hover{border-color:#6b737e!important}
body :is(.slip-close,.st-x,.share-x,.wl-x,.remove):hover{transform:rotate(90deg);filter:brightness(1.1)}
body .pr-nav:hover{transform:scale(1.06);box-shadow:0 6px 16px -8px #0009!important}
body :is(.wallet-btn,.bell-btn,.avatar,.coin-cur,.slip-close,.st-x,.remove,.pr-nav):active{transform:scale(.96)!important}

body :is(.st-option,.st-pay,.st-chip,.pr-card,.ticket,.sl-row,.sl-team,.sl-line-pick,.sl-step,.selection.sl-entry,.date,.favorite,.scenario,.hs-item,.slip-rail,.home-hero-cta,.st-primary,.st-secondary,.danger){transition:transform .18s var(--pol-ease),box-shadow .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
body :is(.st-option,.st-pay,.pr-card,.ticket,.bet-card):hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px #10182880!important}
body :is(.st-chip,.sl-line-pick,.sl-step,.date,.favorite,.scenario):hover{border-color:color-mix(in srgb,var(--pol-accent) 55%,transparent)!important}
body :is(.st-primary,.home-hero-cta,.danger):hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--pol-accent) 75%,transparent)!important;filter:brightness(1.05)}
body .st-secondary:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px #10182866!important}
body :is(.sl-row,.selection.sl-entry):hover{background-color:color-mix(in srgb,var(--pol-accent) 4%,transparent)}

/* form controls: a clear but quiet affordance */
body select:not(:disabled),body input[type=checkbox]:not(:disabled),body .checkbox-label{cursor:pointer}
body select:not(:disabled){transition:border-color .18s ease,box-shadow .18s ease}
body select:not(:disabled):hover{border-color:color-mix(in srgb,var(--pol-accent) 60%,#8a919b)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pol-accent) 12%,transparent)!important}
body .checkbox-label:hover input,body .au-check:hover input{box-shadow:0 0 0 3px color-mix(in srgb,var(--pol-accent) 18%,transparent)}
body summary{cursor:pointer;transition:color .18s ease}
body summary:hover{color:var(--pol-accent)}

/* disabled stays still */
body :is(button,.secondary,.primary,.odds,.sl-mb):disabled{transform:none!important;box-shadow:none!important;cursor:not-allowed}

/* keyboard users get the same emphasis as hover */
body :is(.acct-tab,.wal-btn,.text-link,.st-option,.st-pay,.pr-card,.ticket):focus-visible{outline:2px solid var(--pol-accent)!important;outline-offset:2px}

@media (hover:none){body :is(.st-option,.st-pay,.pr-card,.ticket,.bet-card,.wallet-btn,.bell-btn,.avatar,.coin-cur):hover{transform:none}}
@media (prefers-reduced-motion:reduce){body :is(.text-link,.spotlight-bottom a,.slip-close,.remove,.pr-nav,.st-option,.pr-card,.ticket,.bet-card,.wallet-btn,.bell-btn,.avatar){transition:none!important}body :is(.slip-close,.remove,.st-x,.wl-x,.share-x):hover{transform:none}}
/* Phones: a long balance never pushes over the logo */
@media (max-width:440px){body header.topbar .coin-select .coin-cur small,body header.topbar .coin-select .coin-cur svg{display:none!important}body header.topbar .coin-select .coin-cur b{font-size:12.5px!important}body header.topbar .topright{gap:3px!important}}

/* ---- Game of the hour --------------------------------------------------------------------------------------- */
/* The strip under the featured game: each game is a link into its betting page (lines + every player prop).
   Same look the old selector buttons had; the featured one keeps the accent bar. */
body .broadcast-channels :is(a,button){flex:1;min-width:138px;padding:13px 18px;text-align:left;text-decoration:none!important;background:#fff;color:var(--d-ink,#111)!important;border-right:1px solid var(--d-line,#e3e6ea);position:relative;transition:background-color .2s ease,box-shadow .2s ease}
body .broadcast-channels :is(a,button) small{display:block;color:var(--d-sub,#5c6470)!important;font-size:9px;letter-spacing:1.4px;margin-bottom:5px}
body .broadcast-channels :is(a,button) strong{font:750 12px var(--bet-font,Manrope,sans-serif);white-space:nowrap;color:var(--d-ink,#111)!important}
body .broadcast-channels :is(a,button).is-featured{background:var(--d-red-soft,#fff0f2)!important;box-shadow:inset 0 3px var(--d-red,#e5132f)}
body .broadcast-channels :is(a,button)::after{content:'→';position:absolute;right:14px;top:50%;transform:translate(-6px,-50%);opacity:0;color:var(--pol-accent);font-weight:800;transition:opacity .2s ease,transform .25s var(--pol-ease)}
body .broadcast-channels :is(a,button):hover{background:#f6f7f9!important;box-shadow:inset 0 3px color-mix(in srgb,var(--pol-accent) 55%,transparent)}
body .broadcast-channels :is(a,button):hover::after,body .broadcast-channels :is(a,button):focus-visible::after{opacity:1;transform:translate(0,-50%)}
body .broadcast-channels :is(a,button):focus-visible{outline:2px solid var(--pol-accent);outline-offset:-2px}

/* Loading: the featured game appears together with its stadium, never text first and picture later */
body .broadcast-screen.is-loading .supplied-stadium img{opacity:0}
body .broadcast-screen .supplied-stadium img{transition:opacity .35s ease}

/* Switching: the stadium pushes in with a slow zoom, an accent wipe crosses the screen, the matchup and the
   scoreboard slide in from the side you're heading to, and the lines rise in one after another. */
body .broadcast-screen{overflow:hidden}
body .broadcast-screen .spot-wipe{position:absolute;inset:0 0 var(--chan,72px) 0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 0%,transparent 35%,color-mix(in srgb,var(--pol-accent) 55%,transparent) 48%,#ffffff40 50%,color-mix(in srgb,var(--pol-accent) 55%,transparent) 52%,transparent 65%,transparent 100%);background-size:250% 100%}
body .broadcast-screen.spot-in-next .spot-wipe{animation:spot-wipe-next .7s var(--pol-ease) both}
body .broadcast-screen.spot-in-prev .spot-wipe{animation:spot-wipe-prev .7s var(--pol-ease) both}
@keyframes spot-wipe-next{0%{opacity:1;background-position:100% 0}100%{opacity:0;background-position:0% 0}}
@keyframes spot-wipe-prev{0%{opacity:1;background-position:0% 0}100%{opacity:0;background-position:100% 0}}
body .broadcast-screen.spot-in-next .supplied-stadium img{animation:spot-bg-next .9s var(--pol-ease) both}
body .broadcast-screen.spot-in-prev .supplied-stadium img{animation:spot-bg-prev .9s var(--pol-ease) both}
@keyframes spot-bg-next{0%{transform:scale(1.12) translateX(4%);filter:brightness(.55) blur(3px)}100%{transform:none;filter:none}}
@keyframes spot-bg-prev{0%{transform:scale(1.12) translateX(-4%);filter:brightness(.55) blur(3px)}100%{transform:none;filter:none}}
body .broadcast-screen.spot-in-next .spotlight-story>div:first-child>*{animation:spot-text-next .55s var(--pol-ease) both}
body .broadcast-screen.spot-in-prev .spotlight-story>div:first-child>*{animation:spot-text-prev .55s var(--pol-ease) both}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-story>div:first-child>:nth-child(2){animation-delay:.06s}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-story>div:first-child>:nth-child(3){animation-delay:.12s}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-story>div:first-child>:nth-child(4){animation-delay:.16s}
@keyframes spot-text-next{0%{opacity:0;transform:translateX(48px)}100%{opacity:1;transform:none}}
@keyframes spot-text-prev{0%{opacity:0;transform:translateX(-48px)}100%{opacity:1;transform:none}}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-score{animation:spot-score .6s var(--pol-ease) .08s both;transform-origin:50% 0}
@keyframes spot-score{0%{opacity:0;transform:perspective(700px) rotateX(-55deg) translateY(-8px)}100%{opacity:1;transform:none}}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-lines .odds{animation:spot-rise .45s var(--pol-ease) both}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-lines section:nth-child(2) .odds{animation-delay:.06s}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .spotlight-lines section:nth-child(3) .odds{animation-delay:.12s}
@keyframes spot-rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
body .broadcast-screen:is(.spot-in-next,.spot-in-prev) .broadcast-controls span{animation:spot-count .4s var(--pol-ease) both}
@keyframes spot-count{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  body .broadcast-screen :is(.spot-wipe,.supplied-stadium img,.spotlight-score,.spotlight-lines .odds,.broadcast-controls span),body .broadcast-screen .spotlight-story>div:first-child>*{animation:none!important}
}

/* A live game while live betting is paused: one quiet line across the odds columns */
body .sl-row-line .sl-live-closed{grid-column:2 / -1;grid-row:span 2;align-self:center;margin:0;padding:10px 14px;border-radius:10px;background:#fff6e0;border:1px solid #f1d797;color:#7a5200;font:600 12.5px/1.4 Manrope,sans-serif}
body .sl-row.is-live .sl-row-line:has(.sl-live-closed){grid-template-rows:auto}
body .broadcast-screen .spotlight-lines .spot-closed{grid-column:1 / -1;margin:0;padding:14px 16px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff2e;color:#fff!important;font:600 14px/1.45 Manrope,sans-serif;backdrop-filter:blur(6px)}

/* Game of the hour adapts to the space it actually has (sidebar and bet slip take their share), not the screen:
   below ~760 px the scoreboard drops under the matchup and each market's lines sit side by side on their own row. */
body #app .game-spotlight.broadcast-screen{container-type:inline-size;container-name:spot}
@container spot (max-width:760px){
  .broadcast-screen .spotlight-story{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:16px!important}
  .broadcast-screen .spotlight-score{position:static!important;display:flex!important;justify-content:center;width:100%!important;max-width:none!important;padding:14px!important;transform:none!important}
  .broadcast-screen .spotlight-story h1{font-size:clamp(34px,8cqi,52px)!important;line-height:.95!important;overflow-wrap:anywhere}
  .broadcast-screen .spotlight-lines{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .broadcast-screen .spotlight-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;grid-auto-flow:column;gap:8px!important}
  .broadcast-screen .spotlight-options .odds{min-width:0!important;width:auto!important}
  .broadcast-screen .spotlight-kicker>span:last-child{display:none}
}

/* live card with no open line: link to the game */
.model-home-live-row .live-card-more{display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:12px;font-weight:600;opacity:.75}
/* In-play cards: as many columns as fit (never two squeezed cards), names wrap by word */
body.classic-home .live-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
body .model-home-live-row{grid-template-columns:minmax(0,1fr) auto minmax(64px,110px)}
body .model-home-live-row strong{overflow-wrap:normal;word-break:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Game board follows its own width, not the window: narrow when the bet slip sits beside it */
.sl-board{container:slboard/inline-size}
@container slboard (max-width:600px){body .sl-league-head,body .sl-row-line{grid-template-columns:minmax(84px,1fr) repeat(3,minmax(0,84px))!important}} /* the team column keeps room for a code + score; prices shrink first */
/* Early cash-out on bet cards */
:is(.bet-card,.model-ticket,.ticket-detail) .bc-cashout{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 12px 2px}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-btn,:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-yes{flex:1;min-height:40px;border-radius:8px;border:1px solid #e5163a;background:#e5163a;color:#fff;font-weight:700;font-size:14px;cursor:pointer;transition:filter .15s,transform .15s}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-btn{background:transparent;color:#e5163a}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-btn b{margin-left:4px}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-btn:hover{background:#e5163a;color:#fff}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-yes:hover{filter:brightness(1.08)}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-yes:disabled{opacity:.6;cursor:progress}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-no{min-height:40px;padding:0 14px;border-radius:8px;border:1px solid currentColor;background:transparent;color:inherit;opacity:.8;cursor:pointer}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-cashout.is-off{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;opacity:.7}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-cashout.is-pending{font-size:13px;font-weight:600}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-spin{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:bc-spin .8s linear infinite}
@keyframes bc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-spin{animation:none}}
:is(.bet-card,.model-ticket,.ticket-detail) .bc-co-note{font-size:12px;opacity:.75;margin:4px 12px 0}
.bet-card .bc-note,.model-ticket .model-note,.ticket-detail .bc-note{font-size:12px;line-height:1.4;margin:8px 12px 0;padding:6px 8px;border-radius:6px;background:rgba(127,127,127,.12);overflow-wrap:anywhere}
.model-ticket .model-note{margin:6px 0}
.model-ticket .model-live-score .model-progress{display:block;font-size:11px;margin-top:2px;opacity:.85;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.ticket-detail .bc-cashout,.ticket-detail .bc-co-note{margin-left:0;margin-right:0}
.model-ticket .bc-cashout,.model-ticket .bc-co-note{margin-left:14px;margin-right:14px}
.bet-card.bc-cashed .bc-status{opacity:.85}
/* Top bar fits a signed-in player at laptop widths (5 nav links + search + wallet + bell + avatar) */
@media (max-width:1440px){body .topbar .topnav a{padding-left:11px!important;padding-right:11px!important}body .topbar .topnav{gap:2px!important}}
/* Your Group stays in the top bar at every width: the links tighten and the search shrinks to its icon instead */
@media (max-width:1180px) and (min-width:761px){body .topbar .topnav a{padding-left:7px!important;padding-right:7px!important;font-size:14.5px!important}body .topbar .topnav{gap:0!important}body .topbar .hsearch:not(.open){width:44px!important;min-width:0!important}body .topbar{gap:14px!important}}
@media (max-width:400px){body .topbar .topnav a{font-size:12.5px!important;padding-left:2px!important;padding-right:2px!important;white-space:nowrap}}
.bet-card .bc-progress-v{font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:1100px) and (min-width:761px){body .topbar .hsearch:not(.open){width:84px!important;min-width:0!important}body .topbar .topright{gap:6px!important}body .topbar .topnav a{padding-left:8px!important;padding-right:8px!important}}