/* The web half of the app-shell inset contract (docs/apps/kailash-rn-2026-10/PLAN-PLAYER.md §3-§4).
   The Android shell publishes --wyn-safe-top/right/bottom/left (px), html[data-wyn-app] and html[data-wyn-kb].
   Every inset reads max(env(), var(--wyn-safe-*, 0px)): without the shell the variables are unset, so each value
   below equals the rule it overrides (same selector, same media, loaded later). Loaded before lobby-v2.css, so the
   Lobby v2 brand keeps its own overrides. The top inset is additive (#app padding, sticky tops + T, a status-bar
   scrim) and never changes the height of the masthead, the Updates bar or the welcome strip. */
:root{
 --wyn-inset-top:max(env(safe-area-inset-top,0px),var(--wyn-safe-top,0px));
 --wyn-inset-right:max(env(safe-area-inset-right,0px),var(--wyn-safe-right,0px));
 --wyn-inset-bottom:max(env(safe-area-inset-bottom,0px),var(--wyn-safe-bottom,0px));
 --wyn-inset-bottom-max:max(env(safe-area-max-inset-bottom,env(safe-area-inset-bottom,0px)),var(--wyn-safe-bottom,0px));
 --wyn-inset-left:max(env(safe-area-inset-left,0px),var(--wyn-safe-left,0px))
}

/* Top: the page starts below the status bar; sticky chrome sticks below it; the scrim paints the status bar. */
#app{padding-top:var(--wyn-inset-top);padding-left:var(--wyn-inset-left);padding-right:var(--wyn-inset-right)}
#app::before{content:"";position:fixed;z-index:135;top:0;left:0;right:0;height:var(--wyn-inset-top);background:var(--wyn-scrim,var(--surface-2));pointer-events:none}
/* Device F4: while the Updates bar (.tenant-news) is what sits directly under the band, app-shell.js sets data-wyn-top="news" and
   the scrim takes the bar's colour instead of showing a light seam above it. Once the bar scrolls away the masthead is under the band. */
html[data-wyn-app][data-wyn-top="news"]{--wyn-scrim:var(--ticker-bg)}
/* Device F5: inside the app the same band is also a real element (#wyn-scrim, added by app-shell.js after #app). A pseudo-element with
   pointer-events:none lets taps and hit tests reach the content scrolled under the status bar; the element is the topmost thing there. */
html[data-wyn-app] #wyn-scrim{position:fixed;z-index:135;top:0;left:0;right:0;height:var(--wyn-inset-top);background:var(--wyn-scrim,var(--surface-2))}
html[data-wyn-app] #app:has(>.auth-shell)+#wyn-scrim{background:var(--bg)}
#app:has(>.auth-shell)::before{background:var(--bg)}
.masthead{top:var(--wyn-inset-top)}
.rail{top:calc(var(--header) + var(--wyn-inset-top));left:var(--wyn-inset-left)}
@media(min-width:981px){.compact-workspace>.sports-column{top:calc(76px + var(--wyn-inset-top))}}
@media(min-width:761px){
 #app>.tenant-news{top:var(--wyn-inset-top)}
 #app>.tenant-news:not([hidden])~.masthead{top:calc(32px + var(--wyn-inset-top))}
 #app>.tenant-news:not([hidden])~.rail{top:calc(var(--header) + 32px + var(--wyn-inset-top))}
 .welcome-strip{top:var(--wyn-inset-top)}
 html.ws-open:not(.wf-on) #app>.masthead,html.ws-open:not(.wf-on) #app>.tenant-news~.masthead{top:calc(44px + var(--wyn-inset-top))}
 html.ws-open:not(.wf-on) #app>.rail,html.ws-open:not(.wf-on) #app>.tenant-news~.rail{top:calc(var(--header) + 44px + var(--wyn-inset-top))}
 html.ws-open.wf-on #app>.tenant-news~.masthead{top:var(--wyn-inset-top)}
 html.ws-open.wf-on #app>.tenant-news~.rail{top:calc(var(--header) + var(--wyn-inset-top))}
}

/* Full-height pages fill the space between the bars, so the inset never adds a scroll. */
.main{min-height:calc(100svh - var(--header) - var(--wyn-inset-top))}
.auth-shell{min-height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}
@media(max-width:760px){.auth-login{height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}}
@media(min-width:600px) and (max-width:980px) and (orientation:landscape) and (max-height:600px){.auth-login{height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}}

/* Bottom and sides: fixed chrome clears the navigation bar and a landscape cutout. */
.floating-slip{right:calc(27px + var(--wyn-inset-right))}
.inline-betslip{scroll-margin-bottom:calc(74px + var(--wyn-inset-bottom))}
.live-stream-panel.is-floating .stream-player{right:calc(22px + var(--wyn-inset-right))}
.casino-session-dialog{padding-left:var(--wyn-inset-left);padding-right:var(--wyn-inset-right)}
@media(max-width:760px){
 .mobile-nav{bottom:calc(var(--wyn-inset-bottom) - var(--wyn-inset-bottom-max));height:calc(62px + var(--wyn-inset-bottom-max));padding:5px calc(5px + var(--wyn-inset-right)) calc(5px + var(--wyn-inset-bottom-max)) calc(5px + var(--wyn-inset-left))}
 .floating-slip{bottom:calc(75px + var(--wyn-inset-bottom));right:calc(17px + var(--wyn-inset-right))}
 #toast{bottom:calc(78px + var(--wyn-inset-bottom))}
 body:has(.casino-dock){--mobile-bottom-space:calc(62px + var(--wyn-inset-bottom-max) + var(--casino-dock-height))}
 .casino-dock{bottom:calc(62px + var(--wyn-inset-bottom));padding-left:calc(12px + var(--wyn-inset-left));padding-right:calc(12px + var(--wyn-inset-right))}
 .inline-betslip{scroll-margin-bottom:calc(88px + var(--wyn-inset-bottom))}
 dialog{padding-bottom:var(--wyn-inset-bottom)}
 .live-stream-panel.is-floating .stream-player{right:calc(10px + var(--wyn-inset-right))}
 .casino-session-dialog>header{padding-top:calc(6px + var(--wyn-inset-top))}
 .casino-session-dialog{padding-bottom:var(--wyn-inset-bottom)}
}
/* The bottom inset is the dialog's padding, not the iframe's: the iframe's own box then ends above the navigation band (device F6;
   padding on the iframe left its border box under the band). The element rule `dialog{padding-bottom}` above loses to
   .casino-session-dialog{padding:0}, so the class is named here.
   A landscape phone is wider than 760px: in the app the game dialog still clears the status and navigation bars. */
@media(min-width:761px){
 html[data-wyn-app] .casino-session-dialog>header{padding-top:calc(8px + var(--wyn-inset-top))}
 html[data-wyn-app] .casino-session-dialog{padding-bottom:var(--wyn-inset-bottom)}
}

/* Keyboard open (the shell's data-wyn-kb): fixed bottom bars would float over the stake row. A plain selector list, not :is():
   WebView 83 (API 30, Chromium < 88) drops a rule with :is() whole, and the tab bar and casino dock covered the stake row (r8). */
html[data-wyn-kb="open"] .mobile-nav,html[data-wyn-kb="open"] .floating-slip,html[data-wyn-kb="open"] .casino-dock{display:none}
/* Device C3: with the keyboard up app.js scrolls the stake row to the visual viewport's bottom edge, which Chromium rounds up
   to whole CSS px, past the WebView's last pixel at a fractional density. The shell's bottom inset carries that overhang. */
html[data-wyn-app] .inline-slip-actions{scroll-margin-bottom:var(--wyn-inset-bottom)}

/* Inside the app only: no pull-to-refresh fight, no tap flash, chrome labels are not selectable. */
html[data-wyn-app],html[data-wyn-app] body{overscroll-behavior-y:none}
html[data-wyn-app]{-webkit-tap-highlight-color:transparent}
html[data-wyn-app] :is(.masthead,.product-nav,.rail,.mobile-nav,.casino-dock,.floating-slip,.tenant-news,.welcome-strip,.casino-session-dialog>header){-webkit-user-select:none;user-select:none}

/* Keyboard open in the app: the shell resizes the WebView, so the fixed-height login grows and scrolls instead of clipping
   the form. Scoped to data-wyn-kb (set only by the shell): in a browser the login keeps height:100svh (refinements.css). */
html[data-wyn-kb="open"] .auth-login{height:auto;min-height:calc(100svh - var(--wyn-inset-top) - var(--wyn-inset-bottom))}