/* OyaBet home (package S1): the designed home page on live platform data. Loaded only on the oyabet build, after oya-ui.css;
   every rule sits under html.oy-ui. WebView 83 safe: no newer selector functions, grid gaps only, no inset shorthand, no ratio property.
   Motion is transform / opacity only, 160-220 ms, and off under prefers-reduced-motion (block at the end). */
html.oy-ui .oy-home{margin:-12px -16px 0;min-width:0;color:var(--text)}
html.oy-ui .oy-home a{color:inherit;text-decoration:none}
html.oy-ui .oy-home h1,html.oy-ui .oy-home h2,html.oy-ui .oy-home h3,html.oy-ui .oy-home p,html.oy-ui .oy-home ol{margin:0;padding:0}
html.oy-ui .oy-home img{display:block;max-width:none;border:0}
html.oy-ui .oy-home button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.oy-ui .oy-home svg{display:inline-block}
html.oy-ui .oy-i40{width:40px;height:40px}
html.oy-ui .oy-i64{width:64px;height:64px}
html.oy-ui .oy-i96{width:96px;height:96px}
html.oy-ui .oy-tap{transition:transform 160ms var(--ease-in),opacity 160ms var(--ease-in)}
html.oy-ui .oy-tap:active{transform:scale(.97)}
html.oy-ui .oy-home a:focus-visible,html.oy-ui .oy-home button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* horizontal rails: native scroll, no bar */
html.oy-ui .oy-railx{display:grid;grid-auto-flow:column;justify-content:start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px}
html.oy-ui .oy-railx::-webkit-scrollbar{display:none}

/* 1. shortcut rail */
html.oy-ui .oy-short{grid-auto-columns:64px;grid-gap:4px;padding:4px 12px 8px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 calc(100% - 32px),rgba(0,0,0,0))}
html.oy-ui .oy-home .oy-short-i{display:block;width:64px;height:60px;padding:0;background:none;box-shadow:none;border-radius:12px;text-align:center;color:var(--text2);min-height:0}
html.oy-ui .oy-short-chip{display:block;position:relative;width:44px;height:44px;margin:0 auto;border-radius:12px;background:linear-gradient(180deg,var(--raised-2),var(--card-bot));box-shadow:var(--edge)}
html.oy-ui .oy-home .oy-short-chip img{position:absolute;left:2px;top:2px;width:40px;height:40px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
html.oy-ui .oy-short-l{display:block;margin-top:2px;font-size:11px;line-height:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-short-i.is-live .oy-short-chip::after{content:'';position:absolute;right:-2px;top:-2px;width:8px;height:8px;border-radius:999px;background:var(--live);box-shadow:0 0 0 2px var(--ground);animation:oyPulse 1.2s ease-in-out infinite}
@keyframes oyPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 2. hero: one slide per offer; the track moves by transform only (oya-home.js sets is-s0..is-s3) */
html.oy-ui .oy-hero{position:relative;overflow:hidden;touch-action:pan-y}
html.oy-ui .oy-hero-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;transition:transform 220ms var(--ease-in);will-change:transform}
html.oy-ui .oy-hero-track.is-s1{transform:translate3d(-100%,0,0)}
html.oy-ui .oy-hero-track.is-s2{transform:translate3d(-200%,0,0)}
html.oy-ui .oy-hero-track.is-s3{transform:translate3d(-300%,0,0)}
html.oy-ui .oy-hero-track.is-drag{transition:none}
html.oy-ui .oy-hs{position:relative;z-index:0;height:220px}
html.oy-ui .oy-hs-plate{position:absolute;left:16px;right:16px;top:12px;bottom:0;border-radius:12px;overflow:hidden;background:#0F1537}
html.oy-ui .oy-home .oy-hs-bg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:78% 38%}
html.oy-ui .oy-hs-plate::before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background:linear-gradient(90deg,#0A0E1F 0%,rgba(10,14,31,.95) 34%,rgba(10,14,31,.55) 58%,rgba(10,14,31,0) 84%)}
html.oy-ui .oy-hs-ad{position:absolute;left:0;top:0;bottom:0;width:60%;z-index:1;background:var(--adire);-webkit-mask-image:linear-gradient(90deg,#000 30%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 30%,rgba(0,0,0,0))}
html.oy-ui .oy-hs-plate::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(245,184,46,.36),inset 0 1px 0 rgba(255,233,168,.35);pointer-events:none}
html.oy-ui .oy-hs-who{position:absolute;left:16px;right:16px;top:0;bottom:0;z-index:2;overflow:hidden;border-radius:0 0 12px 12px;pointer-events:none}
html.oy-ui .oy-hs-who::before{content:'';position:absolute;right:0;bottom:-48px;width:220px;height:220px;border-radius:999px;background:radial-gradient(closest-side,rgba(245,184,46,.28),rgba(245,184,46,0))}
html.oy-ui .oy-home .oy-hs-who img{position:absolute;right:-34px;bottom:0;height:100%;width:auto}
html.oy-ui .oy-home .oy-hs-match .oy-hs-who img{height:90%}
html.oy-ui .oy-hs-body{position:absolute;left:16px;top:12px;bottom:0;width:64%;z-index:3;padding:16px 0 16px 16px;display:grid;grid-template-rows:auto auto auto 1fr;justify-items:start}
html.oy-ui .oy-hs-k{display:block;max-width:100%;height:20px;line-height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#FFD56A;background:rgba(245,184,46,.14);box-shadow:inset 0 0 0 1px rgba(245,184,46,.3)}
html.oy-ui .oy-hs-k.is-live{color:#FF8A73;background:rgba(232,99,74,.2);box-shadow:inset 0 0 0 1px rgba(232,99,74,.4)}
html.oy-ui .oy-home .oy-hs-h{max-width:100%;margin-top:10px;font-size:24px;line-height:28px;font-weight:800;letter-spacing:-.02em;font-variation-settings:'wdth' 112;color:#F2EBDA;text-transform:none}
/* the copy column never grows past its share of the slide (a grid track would follow a long unbroken line) */
html.oy-ui .oy-hs-body{grid-template-columns:minmax(0,1fr)}
/* team names are data: the match slide keeps its copy clear of the pointing hand, and a long name steps the size
   down and wraps (two lines a team at most) instead of running under the cut-out */
html.oy-ui .oy-home .oy-hs-match .oy-hs-body{width:52%}
html.oy-ui .oy-home .oy-hs.is-long .oy-hs-h{font-size:18px;line-height:22px}
html.oy-ui .oy-home .oy-hs.is-xlong .oy-hs-h{margin-top:6px;font-size:16px;line-height:20px}
html.oy-ui .oy-hs.is-long .oy-hs-h span,html.oy-ui .oy-hs.is-xlong .oy-hs-h span{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
html.oy-ui .oy-hs-h span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-home .oy-hs-p{max-width:100%;margin-top:6px;font-size:13px;line-height:18px;font-weight:600;color:rgba(242,235,218,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-hs-p b{color:#FFD56A;font-weight:800}
html.oy-ui .oy-home .oy-hs-cta{align-self:end}
html.oy-ui .oy-hdots{position:absolute;right:28px;bottom:10px;z-index:4;display:grid;grid-auto-flow:column;grid-gap:5px;align-items:center;height:14px;padding:0 6px;border-radius:999px;background:rgba(10,14,31,.62);pointer-events:none}
html.oy-ui .oy-hdot{width:5px;height:5px;border-radius:999px;background:rgba(242,235,218,.5);transition:transform 160ms var(--ease-in)}
html.oy-ui .oy-hdot.is-on{background:#F5B82E;transform:scale(1.3)}
html.oy-ui .oy-home .oy-hdot{position:relative;min-height:0;padding:0;border:0;-webkit-appearance:none;appearance:none}

/* compact section head (crash strip, live) */
html.oy-ui .oy-sh{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;height:28px;padding:0 16px;margin-bottom:8px}
html.oy-ui .oy-home .oy-sh h2{position:relative;padding-left:11px;font-size:13px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
html.oy-ui .oy-sh h2::before{content:'';position:absolute;left:0;top:1px;width:3px;height:14px;border-radius:2px;background:var(--gold)}
html.oy-ui .oy-sh h2 small{margin-left:8px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text3)}
html.oy-ui .oy-home .oy-go{position:relative;height:28px;line-height:28px;padding:0 0 0 12px;background:none;font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;min-height:0}
html.oy-ui .oy-go::before{content:'';position:absolute;left:0;right:-8px;top:-10px;bottom:-10px}
html.oy-ui .oy-home .oy-go svg,html.oy-ui .oy-home .oy-see svg{vertical-align:-3px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.oy-ui .oy-home .oy-btn-40{height:40px;padding:0 16px;font-size:14px}
html.oy-ui .oy-hit{position:relative}
html.oy-ui .oy-hit::before{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
html.oy-ui .oy-home .oy-btn-raised{background:var(--raised);color:var(--text);box-shadow:inset 0 1px 0 var(--hl)}
html.oy-ui .oy-home .oy-btn-ivory{background:var(--ivory-btn);color:var(--on-ivory)}

/* 3. crash strip: 172 px tiles so a third peeks at 390; the whole tile is the Play tap */
html.oy-ui .oy-cstrip{margin-top:12px}
html.oy-ui .oy-ctiles{display:grid;grid-auto-flow:column;grid-auto-columns:172px;justify-content:start;grid-gap:8px;padding:0 16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:16px;scrollbar-width:none}
html.oy-ui .oy-ctiles::-webkit-scrollbar{display:none}
html.oy-ui .oy-ctiles::after{content:'';width:4px}
html.oy-ui .oy-home .oy-ctile{position:relative;display:block;height:100px;border-radius:12px;overflow:hidden;scroll-snap-align:start;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1);color:var(--text)}
html.oy-ui .oy-home .oy-ct-art{position:absolute;left:0;top:0;width:66px;height:100px;object-fit:cover;object-position:50% 50%;background:var(--raised)}
html.oy-ui .oy-ct-edge{position:absolute;left:46px;top:0;width:20px;height:100px;background:linear-gradient(90deg,rgba(18,26,54,0),rgba(18,26,54,.5))}
html.oy-ui .oy-ct-play{position:absolute;left:6px;top:68px;width:26px;height:26px;border-radius:999px;background:linear-gradient(180deg,#FFE9A8 0%,#F5B82E 55%,#C98A12 100%);box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5)}
html.oy-ui .oy-ct-play::after{content:'';position:absolute;left:10px;top:8px;border-left:8px solid #0A0E1F;border-top:5px solid transparent;border-bottom:5px solid transparent}
html.oy-ui .oy-ct-c{position:absolute;left:74px;right:6px;top:7px;bottom:6px;display:grid;grid-template-rows:minmax(0,1fr) 24px 16px 12px;grid-row-gap:3px}
html.oy-ui .oy-ct-n{align-self:start;max-height:26px;overflow:hidden;font-size:12px;line-height:13px;font-weight:700;letter-spacing:-.005em}
/* no round feed: art, name and Play only (crash-games/out/README, "Feed off") */
html.oy-ui .oy-ctile.is-off .oy-ct-c{grid-template-rows:auto minmax(0,1fr) 20px;grid-row-gap:2px;top:9px;bottom:9px}
html.oy-ui .oy-ct-kind{font-size:11px;line-height:14px;font-weight:600;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-ct-cta{align-self:end;font-size:15px;line-height:20px;font-weight:800;letter-spacing:-.01em;color:#FFD56A;white-space:nowrap}
/* a registered round feed fills these (oya-home.js writes them at most four times a second, only on screen) */
html.oy-ui .oy-ct-mrow{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:5px;align-items:center;height:24px}
html.oy-ui .oy-ct-mx{font-size:22px;line-height:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
html.oy-ui .oy-ct-ml{display:none;align-self:end;padding-bottom:4px;font-size:11px;line-height:12px;font-weight:600;color:var(--text3);white-space:nowrap}
html.oy-ui .oy-ctile.is-bet .oy-ct-mx{color:var(--gold-display)}
html.oy-ui .oy-ctile.is-bust .oy-ct-mx{color:var(--live)}
html.oy-ui .oy-ctile.is-bet .oy-ct-ml,html.oy-ui .oy-ctile.is-bust .oy-ct-ml{display:block}
html.oy-ui .oy-ct-res{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:2px;height:16px;overflow:hidden}
html.oy-ui .oy-rc{height:16px;line-height:16px;padding:0 5px;border-radius:4px;font-size:11px;font-weight:700;color:var(--text2);background:rgba(255,255,255,.07);font-variant-numeric:tabular-nums}
html.oy-ui .oy-rc.is-mid{color:#3FD993;background:rgba(29,191,115,.14)}
html.oy-ui .oy-rc.is-hi{color:#FFD56A;background:rgba(245,184,46,.16)}
html.oy-ui .oy-ct-on{font-size:11px;line-height:12px;font-weight:600;color:var(--text3);white-space:nowrap}
html.oy-ui .oy-ct-on i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:999px;background:var(--green);vertical-align:1px}

/* sections */
html.oy-ui .oy-sec{margin-top:32px}
html.oy-ui .oy-sec.is-tight{margin-top:16px}
html.oy-ui .oy-sec.is-near{margin-top:20px}
html.oy-ui .oy-sec-head{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-gap:12px;align-items:center;padding:0 16px;margin-bottom:12px;height:44px}
html.oy-ui .oy-home .oy-sec-head h2{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-sec-head h2 small{display:block;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text3);line-height:14px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-home .oy-see{height:44px;line-height:44px;padding:0 0 0 8px;background:none;font-size:13px;font-weight:700;color:var(--text2);white-space:nowrap;min-height:0}

/* 4. match card: competition line, two team rows with score or kick-off, 1 X 2 price cells */
html.oy-ui .oy-matches{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:8px;padding:0 16px}
html.oy-ui .oy-match{display:block;min-width:0;padding:12px;border-radius:12px;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1)}
html.oy-ui .oy-home .oy-m-link{display:block;color:var(--text)}
html.oy-ui .oy-m-comp{display:flex;align-items:center;height:18px;font-size:12px;font-weight:600;color:var(--text2)}
html.oy-ui .oy-m-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-m-right{margin-left:auto;padding-left:8px;display:flex;align-items:center;white-space:nowrap}
html.oy-ui .oy-live-clock{display:inline-flex;align-items:center;height:18px;padding:0 7px 0 6px;border-radius:999px;background:rgba(232,99,74,.16);font-size:12px;font-weight:700;color:#FF8A73}
html.oy-ui .oy-live-dot{width:6px;height:6px;margin-right:5px;border-radius:999px;background:var(--live);box-shadow:0 0 0 3px rgba(232,99,74,.22);animation:oyPulse 1.2s ease-in-out infinite}
html.oy-ui .oy-m-teams{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:0 12px;margin-top:8px}
html.oy-ui .oy-m-rows{display:grid;min-width:0}
html.oy-ui .oy-m-row{display:flex;align-items:center;height:28px;min-width:0}
html.oy-ui .oy-home .oy-m-row .team-mark{width:24px;height:24px;margin:0 10px 0 0;flex:none;border:0;border-radius:999px;background:#F2EBDA;color:#1D2750;box-shadow:inset 0 0 0 1px rgba(10,14,31,.12),0 1px 2px rgba(0,0,0,.3);overflow:hidden}
html.oy-ui .oy-home .oy-m-row .team-mark img{width:18px;height:18px;object-fit:contain}
html.oy-ui .oy-team{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-m-side{display:grid;align-content:start;text-align:right}
html.oy-ui .oy-score{height:24px;line-height:24px;margin:2px 0;min-width:28px;padding:0 4px;border-radius:4px;text-align:center;background:var(--raised);box-shadow:inset 0 1px 0 var(--hl);font-size:15px;font-weight:800}
html.oy-ui .oy-score.is-lead{color:var(--gold-display)}
html.oy-ui .oy-when{height:56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;font-size:13px;font-weight:600;color:var(--text2);line-height:16px}
html.oy-ui .oy-when b{color:var(--text);font-size:15px;line-height:20px}
html.oy-ui .oy-m-odds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;margin-top:8px}
html.oy-ui .oy-m-odds.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
html.oy-ui .oy-home .oy-odd{position:relative;display:block;width:100%;height:48px;min-height:0;border-radius:8px;padding:8px 0 0;background:linear-gradient(180deg,var(--raised-2) -60%,var(--raised) 70%);box-shadow:inset 0 1px 0 var(--hl);text-align:center;overflow:hidden;color:var(--text);transition:transform 160ms var(--ease-in)}
html.oy-ui .oy-home .oy-odd:active{transform:scale(.97)}
html.oy-ui .oy-odd i{display:block;font-style:normal;font-size:11px;line-height:12px;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
html.oy-ui .oy-odd b{display:block;margin-top:2px;font-size:16px;line-height:18px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html.oy-ui .oy-home .oy-odd.is-selected{background:linear-gradient(180deg,#2BD487,#18A964);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
html.oy-ui .oy-odd.is-selected i,html.oy-ui .oy-odd.is-selected b{color:var(--on-green)}
html.oy-ui .oy-odd::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;pointer-events:none}
html.oy-ui .oy-odd.flash-up::after{background:rgba(29,191,115,.35);animation:oyFlash 600ms ease-out}
html.oy-ui .oy-odd.flash-down::after{background:rgba(232,99,74,.35);animation:oyFlash 600ms ease-out}
@keyframes oyFlash{0%{opacity:1}100%{opacity:0}}
html.oy-ui .oy-home .oy-odd.is-susp{pointer-events:none;cursor:default;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
html.oy-ui .oy-odd.is-susp b{color:var(--text3)}
html.oy-ui .oy-home .oy-odd.is-susp svg{display:block;width:16px;height:16px;margin:3px auto 0;fill:none;stroke:var(--text3);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html.oy-ui .oy-home .oy-more{display:flex;align-items:center;justify-content:center;height:44px;margin:12px 16px 0;border-radius:12px;background:var(--raised);box-shadow:var(--edge);font-size:13px;font-weight:700;color:var(--text)}
html.oy-ui .oy-home .oy-more svg{width:16px;height:16px;margin-left:4px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 5. booking code box (only with WYN_BRAND.bookingCodes) */
html.oy-ui .oy-booking{padding:12px 16px 0}
html.oy-ui .oy-bk{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-gap:12px;align-items:center;height:64px;padding:0 12px;border-radius:12px;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1)}
html.oy-ui .oy-home .oy-bk-in{display:block;width:100%;min-width:0;height:44px;margin:0;padding:0 12px;border:0;border-radius:8px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:inherit;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;outline:0;-webkit-appearance:none;appearance:none}
html.oy-ui .oy-home .oy-bk-in::placeholder{color:var(--text3);font-weight:600;letter-spacing:0;text-transform:none;opacity:1}
html.oy-ui .oy-home .oy-bk-in:focus{box-shadow:inset 0 0 0 1.5px var(--text)}
html.oy-ui .oy-bk.is-busy .oy-btn{opacity:.5;pointer-events:none}
html.oy-ui .oy-bk-msg{margin:8px 4px 0;font-size:13px;line-height:18px;font-weight:600;color:var(--text2)}
html.oy-ui .oy-bk-msg.is-bad{color:#FF8A73}
html.oy-ui .oy-bk-msg.is-ok{color:#3FD993}

/* 6. day chips */
html.oy-ui .oy-days{grid-auto-columns:max-content;grid-gap:8px;padding-bottom:12px}
html.oy-ui .oy-home .oy-day{height:36px;min-height:0;padding:0 14px;border-radius:999px;font-size:13px;line-height:36px;font-weight:700;color:var(--text2);background:var(--raised);box-shadow:inset 0 1px 0 var(--hl);white-space:nowrap;position:relative}
html.oy-ui .oy-day::before{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
html.oy-ui .oy-home .oy-day.is-on{background:var(--text);color:var(--ground)}

/* 7-8. rails and cards */
html.oy-ui .oy-hrail{grid-auto-columns:160px;grid-gap:12px;padding-bottom:4px}
html.oy-ui .oy-hrail::after{content:'';width:4px}
html.oy-ui .oy-home .oy-card{display:block;position:relative;width:100%;min-height:0;border-radius:12px;overflow:hidden;text-align:left;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1);color:var(--text)}
html.oy-ui .oy-card .t{display:block;font-size:15px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-card .s{display:block;font-size:11px;font-weight:600;line-height:14px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-home .oy-league{height:150px;padding:12px}
/* a league name may take two lines: "Nigeria Premier Football League" must not end in dots */
html.oy-ui .oy-league .t{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;line-height:18px;max-height:36px}
html.oy-ui .oy-league .oy-i64{margin-bottom:8px}
html.oy-ui .oy-home .oy-cat{height:120px;padding:12px}
html.oy-ui .oy-cat .oy-i96{position:absolute;right:-14px;bottom:-14px}
html.oy-ui .oy-cat .t{max-width:116px}

/* casino head card */
html.oy-ui .oy-home .oy-chead{position:relative;display:block;height:104px;margin:0 16px 12px;color:#F2EBDA}
html.oy-ui .oy-ch-plate{position:absolute;left:0;right:0;top:12px;bottom:0;border-radius:12px;overflow:hidden;background:#0F1537}
html.oy-ui .oy-home .oy-ch-plate img{width:100%;height:100%;object-fit:cover;opacity:.6}
html.oy-ui .oy-ch-plate::before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(10,14,31,.94) 36%,rgba(10,14,31,.5) 62%,rgba(10,14,31,.12) 88%)}
html.oy-ui .oy-ch-ad{position:absolute;left:0;top:0;bottom:0;width:56%;background:var(--adire);-webkit-mask-image:linear-gradient(90deg,#000 20%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 20%,rgba(0,0,0,0))}
html.oy-ui .oy-ch-plate::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(245,184,46,.36),inset 0 1px 0 rgba(255,233,168,.3);pointer-events:none}
html.oy-ui .oy-ch-who{position:absolute;right:8px;top:0;bottom:0;width:132px;overflow:hidden;border-radius:0 0 12px 0}
html.oy-ui .oy-home .oy-ch-who img{position:absolute;right:0;top:0;height:128px;width:auto}
html.oy-ui .oy-ch-body{position:absolute;left:16px;right:148px;top:12px;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
html.oy-ui .oy-ch-body .t{font-size:20px;line-height:24px;font-weight:800;font-variation-settings:'wdth' 112;letter-spacing:-.02em}
html.oy-ui .oy-ch-body .s{margin-top:2px;font-size:13px;line-height:16px;font-weight:600;color:rgba(242,235,218,.72)}
html.oy-ui .oy-ch-body .go{margin-top:8px;font-size:13px;line-height:16px;font-weight:700;color:#FFD56A;white-space:nowrap}
html.oy-ui .oy-home .oy-ch-body .go svg{display:inline-block;vertical-align:-3px;width:16px;height:16px;margin-left:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 9-10. game tiles */
html.oy-ui .oy-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;padding:0 16px}
html.oy-ui .oy-home .oy-tile{display:block;min-width:0;color:var(--text)}
html.oy-ui .oy-tile-art{position:relative;display:block;width:100%;padding-top:133.333%;border-radius:12px;overflow:hidden;background:var(--card-bot);box-shadow:var(--sh1)}
html.oy-ui .oy-home .oy-tile-art img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
html.oy-ui .oy-home .oy-tile-art img.is-plat{object-position:50% 50%}
html.oy-ui .oy-tile-art::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.22);pointer-events:none}
html.oy-ui .oy-chip-live{position:absolute;z-index:1;top:8px;left:8px;height:20px;line-height:20px;padding:0 8px 0 6px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;background:rgba(10,14,31,.72);color:#F2EBDA;white-space:nowrap}
html.oy-ui .oy-chip-live i{display:inline-block;width:6px;height:6px;border-radius:999px;background:#E8634A;margin-right:5px;vertical-align:1px}
html.oy-ui .oy-chip-top{position:absolute;z-index:1;top:8px;right:8px;height:20px;line-height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--gold);color:#0A0E1F;white-space:nowrap}
html.oy-ui .oy-tile .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:13px;font-weight:600;line-height:16px;letter-spacing:-.005em}
html.oy-ui .oy-tile .s{display:block;font-size:11px;font-weight:600;line-height:14px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.oy-ui .oy-trail{grid-auto-columns:160px;grid-gap:12px;padding-bottom:4px}
html.oy-ui .oy-trail::after{content:'';width:4px}
html.oy-ui .oy-trail .oy-tile .t{-webkit-line-clamp:1}

/* 12. promotions (only what the site's promo content returns) */
html.oy-ui .oy-prail{grid-auto-columns:300px;grid-gap:12px;padding-bottom:4px}
html.oy-ui .oy-prail::after{content:'';width:4px}
html.oy-ui .oy-home .oy-promo{position:relative;display:block;width:300px;height:176px;padding:16px;border-radius:12px;overflow:hidden;color:#F2EBDA;background:linear-gradient(180deg,#1B2450,#0F1537);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--sh1)}
html.oy-ui .oy-promo::before{content:'';position:absolute;left:0;top:0;bottom:0;width:60%;background:var(--adire);-webkit-mask-image:linear-gradient(90deg,#000 20%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 20%,rgba(0,0,0,0))}
html.oy-ui .oy-promo .glow{position:absolute;right:-40px;bottom:-70px;width:240px;height:240px;border-radius:999px;background:radial-gradient(closest-side,rgba(245,184,46,.26),rgba(245,184,46,0))}
html.oy-ui .oy-home .oy-promo .who{position:absolute;right:-10px;bottom:0;height:164px;width:auto}
html.oy-ui .oy-promo .k{position:relative;display:block;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,235,218,.72)}
html.oy-ui .oy-home .oy-promo h3{position:relative;margin-top:4px;max-width:172px;max-height:48px;overflow:hidden;font-size:20px;line-height:24px;font-weight:800;font-variation-settings:'wdth' 112;letter-spacing:-.02em;color:#F2EBDA}
html.oy-ui .oy-promo .d{position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:172px;margin-top:4px;font-size:13px;line-height:16px;font-weight:600;color:rgba(242,235,218,.78)}
html.oy-ui .oy-promo .oy-btn{position:absolute;z-index:1;left:16px;bottom:16px}

/* 13. trust block: only what is true of the site today */
html.oy-ui .oy-trust{margin:0 16px;padding:16px;border-radius:12px;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1)}
html.oy-ui .oy-trust-top{display:grid;grid-template-columns:64px minmax(0,1fr);grid-gap:12px;align-items:center}
html.oy-ui .oy-home .oy-trust-top h3{font-size:20px;line-height:24px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
html.oy-ui .oy-home .oy-trust-top p{font-size:13px;line-height:18px;color:var(--text2);margin-top:4px}
html.oy-ui .oy-pay{margin:16px -8px -8px 0;display:flex;flex-wrap:wrap}
html.oy-ui .oy-pay span{height:28px;line-height:28px;padding:0 10px;margin:0 8px 8px 0;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
html.oy-ui .oy-legal{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:40px minmax(0,1fr);grid-gap:12px;align-items:center;font-size:11px;line-height:14px;font-weight:600;color:var(--text3)}
html.oy-ui .oy-legal b{color:var(--text2)}
html.oy-ui .oy-home .oy-legal a{color:var(--text2);text-decoration:underline}

/* 14. how to start */
html.oy-ui .oy-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;padding:0 16px}
html.oy-ui .oy-step{min-width:0;padding:12px;border-radius:12px;background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--edge),var(--sh1)}
html.oy-ui .oy-step .n{display:block;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em;color:var(--text3);margin-top:8px}
html.oy-ui .oy-step .t{display:block;font-size:15px;line-height:18px;font-weight:700;margin-top:2px}
html.oy-ui .oy-step .d{display:block;font-size:11px;line-height:14px;color:var(--text2);margin-top:4px;font-weight:600}

/* phones: the first four cards of a list */
/* the one text link of the trust block gets a full-size tap area */
html.oy-ui .oy-legal a{position:relative;display:inline-block}
html.oy-ui .oy-legal a::before{content:'';position:absolute;left:-8px;right:-8px;top:-16px;bottom:-16px}
@media(max-width:599px){
html.oy-ui .oy-matches>.oy-match:nth-child(n+5){display:none}
}
@media(max-width:389px){
html.oy-ui .oy-hs{height:196px}
html.oy-ui .oy-hs-body{padding:12px 0 12px 12px}
html.oy-ui .oy-home .oy-hs-h{font-size:20px;line-height:24px}
html.oy-ui .oy-home .oy-hs.is-long .oy-hs-h{font-size:16px;line-height:20px}
html.oy-ui .oy-home .oy-hs.is-xlong .oy-hs-h{font-size:15px;line-height:19px}
html.oy-ui .oy-home .oy-hs.is-xlong .oy-hs-p{display:none}
html.oy-ui .oy-home .oy-hs-who img{right:-26px}
html.oy-ui .oy-ctiles{grid-auto-columns:184px}
html.oy-ui .oy-steps{grid-gap:8px}
html.oy-ui .oy-step{padding:10px}
}
@media(max-width:374px){
html.oy-ui .oy-home .oy-hs-match .oy-hs-who img{right:-36px}
html.oy-ui .oy-short{grid-auto-columns:60px;grid-gap:2px}
html.oy-ui .oy-tiles{grid-gap:8px}
html.oy-ui .oy-prail{grid-auto-columns:280px}
html.oy-ui .oy-home .oy-promo{width:280px}
}

/* tablets: the phone page, full bleed inside the 24 px main gutter, lists in two columns */
@media(min-width:600px) and (max-width:1023px){
html.oy-ui .oy-home{margin:-12px -24px 0}
html.oy-ui .oy-hs{height:260px}
html.oy-ui .oy-hs-body{width:58%;padding:24px 0 24px 24px}
html.oy-ui .oy-home .oy-hs-h{font-size:32px;line-height:36px}
html.oy-ui .oy-home .oy-hs-match .oy-hs-body{width:58%}
html.oy-ui .oy-home .oy-hs.is-long .oy-hs-h{font-size:26px;line-height:30px}
html.oy-ui .oy-home .oy-hs.is-xlong .oy-hs-h{margin-top:10px;font-size:22px;line-height:26px}
html.oy-ui .oy-hs-p{font-size:15px;line-height:20px}
html.oy-ui .oy-home .oy-hs-who img{right:8px}
html.oy-ui .oy-matches{grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px}
html.oy-ui .oy-matches.oy-t2>.oy-match:nth-child(n+3),html.oy-ui .oy-matches.oy-t4>.oy-match:nth-child(n+5){display:none}
html.oy-ui .oy-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
html.oy-ui .oy-booking{max-width:480px}
}

/* desktop (pages-r3/desk.css): the centre column pulls 16 px out so each section's own gutter lands on the column edges */
@media(min-width:1024px){
/* desktop: the sports list on the left does the shortcut rail's job (desk-home.html has no rail) */
html.oy-ui .oy-home .oy-short{display:none}
html.oy-ui .oy-hdots{pointer-events:auto;grid-gap:8px;height:20px}
html.oy-ui .oy-home .oy-hdot{width:8px;height:8px;cursor:pointer}
html.oy-ui .oy-hdot::before{content:'';position:absolute;left:-4px;right:-4px;top:-8px;bottom:-8px}
html.oy-ui .oy-home{margin:0 -16px}
html.oy-ui .oy-short{-webkit-mask-image:none;mask-image:none}
html.oy-ui .oy-hero{margin-top:-12px}
html.oy-ui .oy-hs{height:300px}
html.oy-ui .oy-hs-body{width:58%;padding:32px 0 28px 32px}
html.oy-ui .oy-hs-k{height:24px;line-height:24px;padding:0 10px;font-size:12px}
html.oy-ui .oy-home .oy-hs-h{margin-top:14px;font-size:44px;line-height:48px}
html.oy-ui .oy-home .oy-hs-match .oy-hs-body{width:58%}
html.oy-ui .oy-home .oy-hs.is-long .oy-hs-h{font-size:34px;line-height:38px}
html.oy-ui .oy-home .oy-hs.is-xlong .oy-hs-h{margin-top:14px;font-size:28px;line-height:32px}
html.oy-ui .oy-hs-p{margin-top:10px;font-size:17px;line-height:24px}
html.oy-ui .oy-home .oy-hs-cta{height:48px;padding:0 28px;font-size:16px}
html.oy-ui .oy-home .oy-hs-who img{right:32px}
html.oy-ui .oy-hs-who::before{right:24px;bottom:-72px;width:340px;height:340px}
html.oy-ui .oy-hdots{right:32px;bottom:12px}
html.oy-ui .oy-ctiles{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;overflow:visible}
html.oy-ui .oy-ctiles::after{display:none}
html.oy-ui .oy-ctiles>.oy-ctile:nth-child(n+9){display:none}
html.oy-ui .oy-matches{grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px}
html.oy-ui .oy-matches.oy-d3>.oy-match:nth-child(n+4){display:none}
html.oy-ui .oy-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
html.oy-ui .oy-booking{max-width:440px}
html.oy-ui .oy-home .oy-odd:hover{background:linear-gradient(180deg,var(--raised-2),var(--raised-2))}
html.oy-ui .oy-home .oy-odd.is-selected:hover{background:linear-gradient(180deg,#2BD487,#18A964)}
}
@media(min-width:1024px) and (max-width:1279px){
html.oy-ui .oy-ctiles{grid-template-columns:repeat(3,minmax(0,1fr))}
html.oy-ui .oy-ctiles>.oy-ctile:nth-child(n+7){display:none}
}

@media(prefers-reduced-motion:reduce){
html.oy-ui .oy-home *,html.oy-ui .oy-home *::before,html.oy-ui .oy-home *::after{animation:none!important;transition:none!important}
html.oy-ui .oy-hero-track{transition:none!important}
}