/* OyaBet UI (WYN_BRAND.oyaUI): the app chrome and the shared components of the Fable design system
   (docs/design/oyabet/fable/system: components.css, pages-r3 / r4, desk.css). Loaded last and only on a brand with the flag;
   the build drops this file and its tag everywhere else. Markup: oya-ui.js. Tokens: the brand's brand.css. Dark only.
   Chrome 83 safe: grid-gap (no flex gap), no inset shorthand, no aspect-ratio, no :is / :where / :has, no dvh / svh. */
html.oy-ui:root{--header:56px;--rail:0px}
html.oy-ui:root[data-wyn-app]{--safe:var(--wyn-inset-bottom-max,0px)}
html.oy-ui body{background:var(--grain),radial-gradient(120% 380px at 50% -40px,rgba(38,49,106,.6) 0%,rgba(38,49,106,0) 100%) no-repeat,var(--ground);color:var(--text)}
html.oy-ui .oy-g{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html.oy-ui .oy-num{font-variant-numeric:tabular-nums}

/* buttons */
html.oy-ui .oy-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:0;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--text);font:700 15px/1 var(--font);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform var(--t-tap) var(--ease-out)}
html.oy-ui .oy-btn:active{transform:scale(.97)}
html.oy-ui .oy-btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
html.oy-ui .oy-btn-ghost{box-shadow:inset 0 0 0 1.5px rgba(242,235,218,.45)}
html.oy-ui .oy-btn-sm{height:36px;padding:0 16px;font-size:14px}
html.oy-ui .oy-btn-lg{height:52px;padding:0 24px;font-size:16px}
html.oy-ui .oy-btn-sm::before,html.oy-ui .oy-bal::before{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
html.oy-ui .oy-ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--text);cursor:pointer}
html.oy-ui .oy-lnk{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;font:600 13px/1 var(--font);color:var(--text2);text-decoration:underline;text-underline-offset:3px}

/* top bar (phones and tablets): lockup left, Log in + Join or the balance pill right */
html.oy-ui .oy-top{position:sticky;display:block;flex:0 0 auto;width:auto;height:auto;min-height:0;max-width:none;margin:0;padding:0;border:0;background:rgba(10,14,31,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none;z-index:40}
html.oy-ui .auth-masthead.oy-top{top:var(--wyn-inset-top,0px)}
html.oy-ui .oy-top-bar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px}
html.oy-ui .oy-brand{display:flex;align-items:center;flex:none;height:44px}
html.oy-ui .oy-lockup{display:block;width:auto;height:22px}
html.oy-ui .oy-top-acts{display:grid;grid-auto-flow:column;grid-gap:8px;align-items:center}
html.oy-ui .oy-top .oy-login{display:inline-flex;align-items:center;height:44px;min-height:0;padding:0 8px;font:700 15px/1 var(--font);color:var(--text);text-decoration:none;white-space:nowrap}
html.oy-ui .oy-bal{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 4px 0 12px;border-radius:999px;background:var(--raised);box-shadow:var(--edge);color:var(--text);font:800 14px/1 var(--font);text-decoration:none;white-space:nowrap}
html.oy-ui .oy-bal>.oy-num:last-child{margin-right:8px}
html.oy-ui .oy-add{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:8px;border-radius:999px;background:var(--gold-grad);color:#0A0E1F}
html.oy-ui .oy-add .oy-g{width:16px;height:16px;stroke-width:2.5}
html.oy-ui .oy-acct,html.oy-ui .oy-dk-nav,html.oy-ui .oy-side{display:none}

/* page head (inner pages on phones): back, title, Help */
html.oy-ui .oy-top.is-sub .oy-top-bar{display:none}
html.oy-ui .oy-top-sub{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-gap:4px;align-items:center;height:56px;padding:0 6px}
html.oy-ui .oy-sub-t{font:700 16px/20px var(--font);color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* page frame below the desktop breakpoint */
html.oy-ui .main{margin:0;max-width:none;min-height:calc(100vh - var(--header));padding:12px 16px calc(var(--nav-h) + var(--safe) + 24px);animation:none}
html.oy-ui .casino-dock{display:none}
html.oy-ui .auth-shell{padding:0;background:none}
html.oy-ui .auth-shell .auth-main,html.oy-ui .auth-shell .auth-footer{padding-left:16px;padding-right:16px}

/* bottom nav: Home, Sports, the raised betslip coin with its count, Casino, Account */
html.oy-ui .mobile-nav.oy-nav{display:grid;grid-template-columns:repeat(5,minmax(0,112px));justify-content:center;align-items:start;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--nav-h) + var(--safe));padding:0 0 var(--safe);border:0;background:rgba(10,14,31,.97)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 var(--line);transform:translateZ(0)}
html.oy-ui[data-wyn-kb="open"] .mobile-nav.oy-nav{display:none}
html.oy-ui .oy-nav-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;min-width:0;padding:0;border:0;background:none;color:var(--text3);font:600 11px/14px var(--font);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.oy-ui .oy-nav-it .oy-g,html.oy-ui .oy-nav-l{position:relative}
html.oy-ui .oy-nav-l{margin-top:4px;white-space:nowrap}
html.oy-ui .oy-nav-it.is-active{color:var(--text)}
html.oy-ui .oy-nav-it.is-active::before{content:'';position:absolute;top:9px;left:50%;width:52px;height:28px;margin-left:-26px;border-radius:999px;background:var(--raised-2);box-shadow:var(--edge)}
html.oy-ui .oy-nav-it.is-active .oy-g{color:var(--gold-text)}
html.oy-ui .oy-nav-it.is-slip{color:var(--text2)}
html.oy-ui .oy-disc{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-top:-22px;border-radius:999px;background:var(--gold-grad);color:#0A0E1F;box-shadow:0 0 0 4px var(--ground),0 6px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6);transition:transform var(--t-tap) var(--ease-out)}
html.oy-ui .oy-nav-it.is-slip:active .oy-disc{transform:scale(.97)}
html.oy-ui .oy-count{position:absolute;top:-6px;left:50%;min-width:18px;height:18px;margin-left:10px;padding:0 5px;border-radius:999px;background:var(--green);color:var(--on-green);font:800 11px/18px var(--font);text-align:center;box-shadow:0 0 0 2px var(--ground)}

/* the slot above the nav: the slip bar (S3 builds the slip itself), then toasts above it */
@media(max-width:1023px){
html.oy-ui body .wc-slipbar{left:12px;right:12px;bottom:calc(var(--nav-h) + var(--safe) + 8px);height:var(--bar-h);padding:0 16px;border:0;border-radius:12px;background:linear-gradient(180deg,#2A3672,#1D2750);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,233,168,.5),inset 0 0 0 1px rgba(245,184,46,.22),var(--sh2)}
html.oy-ui body.wc-has-slipbar .main{padding-bottom:calc(var(--nav-h) + var(--bar-h) + var(--safe) + 32px)!important}
}
/* two :not() only lift this over the base's id rules for the toast (1,3,2); the base's sheet-open rules keep their !important */
html.oy-ui body:not(.oy-a):not(.oy-b) #toast{left:50%;bottom:calc(var(--nav-h) + var(--bar-h) + var(--safe) + 20px);max-width:calc(100vw - 32px);padding:11px 16px;border:0;border-radius:20px;background:var(--text);color:var(--ground);font:700 13px/18px var(--font);box-shadow:var(--sh2)}
html.oy-ui body:not(.oy-a):not(.oy-b) #toast.is-error{background:#B83B24;color:#F2EBDA}

/* dialogs: the base's dialog on the card surface, and the in-page confirm (.oy-scrim + .oy-dlg) */
html.oy-ui dialog:not(.table-dialog):not(.casino-session-dialog){border:0;border-radius:12px;box-shadow:inset 0 1px 0 var(--hl),0 16px 40px rgba(0,0,0,.5)}
html.oy-ui dialog:not(.casino-session-dialog)::backdrop{background:rgba(4,6,14,.6)}
html.oy-ui .oy-scrim{position:fixed;left:0;right:0;top:0;bottom:0;z-index:60;background:rgba(4,6,14,.6)}
html.oy-ui .oy-dlg{position:fixed;left:50%;top:50%;z-index:61;width:calc(100% - 48px);max-width:360px;padding:24px 20px 20px;border-radius:12px;background:var(--card-top);color:var(--text);text-align:center;box-shadow:inset 0 1px 0 var(--hl),0 16px 40px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
html.oy-ui .oy-dlg h2{margin:0;font:800 20px/24px var(--font);font-variation-settings:'wdth' 112;letter-spacing:-.02em}
html.oy-ui .oy-dlg p{margin:8px 0 0;font:400 14px/20px var(--font);color:var(--text2)}
html.oy-ui .oy-dlg-acts{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;margin-top:20px}

/* footer: no theme switch; 18+, the licence line, links */
html.oy-ui .oy-foot{margin:32px -16px 0;padding:24px 16px 0;border-top:1px solid var(--line)}
html.oy-ui .oy-foot .oy-lockup{height:18px}
html.oy-ui .oy-foot-cols{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;margin-top:12px}
html.oy-ui .oy-foot-col h4{margin:0 0 4px;font:700 11px/16px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
html.oy-ui .oy-foot-col a{display:flex;align-items:center;height:44px;font:600 13px/1 var(--font);color:var(--text2);text-decoration:none}
html.oy-ui .oy-foot-legal{margin:16px 0 0;font:600 11px/16px var(--font);color:var(--text3)}
html.oy-ui .oy-foot-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
html.oy-ui .oy-age{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--text2);font:800 12px/1 var(--font);color:var(--text2)}
html.oy-ui .oy-foot-wa{display:inline-flex;align-items:center;height:44px;font:600 13px/1 var(--font);color:var(--text2)}
html.oy-ui .oy-nav-it:focus-visible,html.oy-ui .oy-dk-a:focus-visible,html.oy-ui .oy-side-it:focus-visible{outline:2px solid var(--gold-text);outline-offset:-2px}

@media(max-width:760px){html.oy-ui dialog:not(.table-dialog):not(.casino-session-dialog){border-radius:12px 12px 0 0}}
/* tablets: the phone frame with wider gutters */
@media(min-width:600px) and (max-width:1023px){
html.oy-ui .oy-top-bar{padding:0 24px}
html.oy-ui .oy-top-sub{padding:0 14px}
html.oy-ui .main{padding-left:24px;padding-right:24px}
html.oy-ui .oy-foot{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
html.oy-ui .oy-foot-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
html.oy-ui .auth-shell .auth-main,html.oy-ui .auth-shell .auth-footer{padding-left:24px;padding-right:24px}
}

/* desktop frame (desk.css): top bar with the sections, sports list left, content centre, the slip docks right from 1280 */
/* the base's UPDATES strip above the top bar is not part of this design: gone at every width, and the top bar and
   My bets take back the 32 px the base keeps free under it */
html.oy-ui #tenant-news,html.oy-ui .tenant-news{display:none!important}
html.oy-ui:not(.ws-open) #app>.tenant-news~.masthead,html.oy-ui:not(.ws-open) #app>.tenant-news~.auth-masthead{top:var(--wyn-inset-top,0px)}
html.oy-ui #app>.tenant-news~.main .mybets{--mybets-news:0px}
@media(min-width:1024px){
html.oy-ui:root{--header:64px}
html.oy-ui .oy-top{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 -1px 0 var(--line)}
html.oy-ui .oy-top-bar,html.oy-ui .oy-top.is-sub .oy-top-bar{display:grid;grid-template-columns:208px minmax(0,1fr) auto;grid-gap:20px;justify-content:normal;height:64px;max-width:1440px;margin:0 auto;padding:0 20px}
html.oy-ui .oy-top-sub{display:none}
html.oy-ui .oy-top .oy-lockup{height:28px}
html.oy-ui .oy-dk-nav{display:flex;align-items:stretch;min-width:0}
html.oy-ui .oy-dk-a{position:relative;display:inline-flex;align-items:center;height:64px;padding:0 12px;border:0;background:none;font:700 15px/1 var(--font);color:var(--text2);text-decoration:none;white-space:nowrap;cursor:pointer}
html.oy-ui .oy-dk-a:hover,html.oy-ui .oy-dk-a.is-active{color:var(--text)}
html.oy-ui .oy-dk-a.is-active::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:4px 4px 0 0;background:var(--gold)}
html.oy-ui .oy-dot{display:block;width:6px;height:6px;margin-right:6px;border-radius:999px;background:var(--live)}
html.oy-ui .oy-dk-a .oy-n{margin-left:6px;font-size:12px;font-weight:600;color:var(--text3)}
html.oy-ui .oy-top-acts{grid-gap:12px}
html.oy-ui .oy-acct{display:inline-flex;background:var(--raised);box-shadow:var(--edge)}
html.oy-ui .mobile-nav.oy-nav{display:none}
html.oy-ui .main{max-width:1440px;margin:0 auto;padding:16px 20px 56px 248px}
html.oy-ui .oy-side{display:block;position:fixed;top:calc(var(--header) + 16px);left:20px;left:max(20px,calc(50% - 700px));z-index:5;width:208px;max-height:calc(100vh - var(--header) - 32px);overflow-y:auto;scrollbar-width:none}
html.oy-ui.ws-open:not(.wf-on) .oy-side{top:calc(var(--header) + 52px);max-height:calc(100vh - var(--header) - 68px)}
html.oy-ui .oy-side-grp{margin-bottom:12px;padding:8px;border-radius:12px;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1)}
html.oy-ui .oy-side-h{padding:8px 8px 4px;font:700 11px/16px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
html.oy-ui .oy-side-it{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-gap:8px;align-items:center;width:100%;height:48px;padding:0 8px 0 4px;border:0;border-radius:8px;background:none;font:600 14px/1 var(--font);color:var(--text);text-align:left;text-decoration:none;cursor:pointer}
html.oy-ui .oy-side-it.is-link{grid-template-columns:minmax(0,1fr);height:44px;padding:0 12px}
html.oy-ui .oy-side-it:hover,html.oy-ui .oy-side-it.is-active{background:var(--raised)}
html.oy-ui .oy-side-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px}
html.oy-ui .oy-side-ic img{display:block;width:40px;height:40px}
html.oy-ui .oy-side-ic .icon{width:22px;height:22px;color:var(--text2)}
html.oy-ui .oy-side-l{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.oy-ui .oy-side-it .oy-n{font-size:12px;font-weight:600;color:var(--text3)}
html.oy-ui .oy-side-it.is-active .oy-n{color:var(--gold-text)}
html.oy-ui .oy-foot{margin:40px 0 0;padding:24px 0 0}
html.oy-ui .oy-foot-cols{grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:20px}
html.oy-ui .oy-foot-col a{height:36px}
html.oy-ui body:not(.oy-a):not(.oy-b) #toast{bottom:28px}
html.oy-ui .auth-shell .auth-main,html.oy-ui .auth-shell .auth-footer{padding-left:20px;padding-right:20px}
}
@media(min-width:1280px){
html.oy-ui .wc-sbf{grid-template-columns:minmax(0,1fr) 340px;grid-gap:20px}
html.oy-ui .wc-slipcol{top:calc(var(--header) + 16px);max-height:calc(100vh - var(--header) - 32px)}
html.oy-ui.ws-open:not(.wf-on) .wc-slipcol{top:calc(var(--header) + 52px)}
}
@media(prefers-reduced-motion:reduce){html.oy-ui .oy-btn,html.oy-ui .oy-disc{transition:none}}

/* Base content inside the chrome: only what would read as broken in S0 (the pages themselves are S1+) */
html.oy-ui[data-theme] body .account-sidebar .profile-identity{background:none}
html.oy-ui .profile-identity>div>span{font-size:11px}
html.oy-ui body .team-mark:not(.wc-draw)>span{font-size:11px!important;line-height:12px!important;font-variation-settings:'wdth' 80!important;letter-spacing:0}
@media(max-width:1023px){
html.oy-ui .oy-top .oy-mybets{display:none}
}
@media(max-width:760px){
html.oy-ui body .account-sidebar nav a{font-size:12px}
}
@media(min-width:600px) and (max-width:1023px){
html.oy-ui body .lv2-eyebrow,html.oy-ui body .mybets-tile-label{font-size:11px}
html.oy-ui body a.button.secondary{font-size:12px}
}
@media(min-width:1024px){
/* the frame is list | content | slip: the lobby's own "Starting soon" side column would squeeze the event list to 488 px */
html.oy-ui .wc-board-layout{grid-template-columns:minmax(0,1fr)}
html.oy-ui .wc-agenda{display:none}
}
@media(min-width:1024px) and (pointer:coarse){
html.oy-ui .oy-foot-col a{min-height:44px}
}