/* Sized WebP artwork: preserve the complete banner, never use the source PNG. */
@layer studio {
 /* Let the content shrink below its natural height after the banner is laid out. */
 body.studio-3d #onlineModal[data-online-view="rankings"] .online-dialog,
 body.studio-3d #onlineModal[data-online-view="daily-ranking"] .online-dialog,
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) {
  display:flex!important;flex-direction:column!important;box-sizing:border-box!important;
  min-height:0!important;height:auto!important;overflow:hidden!important;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;
 }
 body.studio-3d #onlineModal[data-online-view="rankings"] #onlineContent,
 body.studio-3d #onlineModal[data-online-view="daily-ranking"] #onlineContent,
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) #onlineContent {
  flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;
  box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  scroll-padding-bottom:calc(36px + env(safe-area-inset-bottom,0px));
  padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))!important;
 }
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) > .last-trick-header {
  position:relative!important;isolation:isolate;
  display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;
  flex:0 0 auto!important;min-height:112px!important;
  padding:20px!important;margin-bottom:16px!important;
  border:1px solid #d8ad54!important;border-radius:16px!important;
  background:radial-gradient(ellipse at 12% 0,#e9c15b26,transparent 65%),linear-gradient(125deg,#175238,#062c20)!important;
  box-shadow:inset 0 1px 0 #fff0ae45!important;
 }
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) > .last-trick-header::before {
  content:"";flex:0 0 100%;width:100%;height:auto;aspect-ratio:2164 / 726;
  border-radius:10px;
  background:#000 url('../assets/daily-winner-header-1200.webp') center/contain no-repeat;
  pointer-events:none;
 }
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) > .last-trick-header > div {
  min-width:0;flex:1;
 }
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) .last-trick-header #onlineTitle {
  display:block!important;white-space:normal!important;opacity:1!important;
  color:#ffe4a1!important;-webkit-text-fill-color:#ffe4a1!important;
  font:700 clamp(21px,3vw,32px)/1.2 Georgia,serif!important;
  text-shadow:0 2px 2px #0005!important;overflow-wrap:anywhere;
 }
 body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) .last-trick-header > div > span {
  color:#f6edcf!important;-webkit-text-fill-color:#f6edcf!important;
  font-size:11px!important;letter-spacing:.08em;
 }
 body.studio-3d #onlineModal .online-dialog:has(.ranking-columns-variants) > .last-trick-header::before {
  aspect-ratio:2081 / 706;
  background-image:url('../assets/ranking-header-filled-1200.webp');
 }
 body.studio-3d #onlineModal .ranking-explanation {
  max-width:72ch;margin:8px 0 0;color:#6b5948!important;-webkit-text-fill-color:#6b5948!important;
  font:500 13px/1.45 Arial,sans-serif!important;
 }
 /* On short screens scroll the header too, so it cannot consume the entire viewport. */
 @media (max-height:540px) {
  body.studio-3d #onlineModal[data-online-view="rankings"] .online-dialog,
  body.studio-3d #onlineModal[data-online-view="daily-ranking"] .online-dialog,
  body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) {
   overflow-y:auto!important;overscroll-behavior-y:contain;
  }
  body.studio-3d #onlineModal[data-online-view="rankings"] #onlineContent,
  body.studio-3d #onlineModal[data-online-view="daily-ranking"] #onlineContent,
  body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) #onlineContent {
   flex:0 0 auto!important;overflow:visible!important;
  }
 }
 @media (max-width:600px) {
  body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) > .last-trick-header {
   min-height:96px!important;padding:14px!important;gap:10px!important;
   flex-wrap:wrap!important;
  }
  body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) > .last-trick-header::before {
   flex-basis:100%;width:100%;height:auto;
   background-image:url('../assets/daily-winner-header-640.webp');
  }
  body.studio-3d #onlineModal .online-dialog:has(.ranking-columns-variants) > .last-trick-header::before {
   background-image:url('../assets/ranking-header-filled-640.webp');
  }
  body.studio-3d #onlineModal .online-dialog:has(.ranking-variant) #closeOnlineButton {
   position:static!important;margin-left:auto!important;
  }
 }
}