/* Use the homepage column for game motion, with a full-screen touch layout. */
:root {
  --bgpn-catdog-splash:
    url("/games/cat-dog/assets/img/loading-img.f5f8169f.png") center min(24vw, 124.8px) / min(73.6vw, 382.72px) auto no-repeat,
    url("/games/cat-dog/assets/img/loading-bg.41540014.png") center / 100% 100% no-repeat,
    #3c1496;
}
html.bg-catdog-restoring {background:#f2f5fa}
html.bg-catdog-restoring::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:979;
  width:min(100%,520px);
  height:100vh;
  height:100dvh;
  margin-inline:auto;
  background:var(--bgpn-catdog-splash);
}
.bgpn-boot-recovery {
  position:fixed;
  inset:auto 0 min(16vw,83.2px);
  z-index:980;
  width:min(86%,450px);
  margin-inline:auto;
  color:#ffe8b2;
  text-align:center;
  font:500 14px/1.4 system-ui,sans-serif;
}
.bgpn-boot-recovery :is(a,button) {
  display:inline-block;
  margin:0 4px;
  padding:6px 14px;
  border:0;
  border-radius:4px;
  background:#ffe8b2;
  color:#522b0d;
  font:inherit;
  text-decoration:none;
}
.bgpn-layer{position:fixed;inset:0;z-index:980;height:100vh;height:100dvh;display:flex;align-items:stretch;justify-content:center;overflow:hidden;background:transparent;overscroll-behavior:contain}
.bgpn-viewport{width:100%;height:100%;min-width:0}
.bgpn-panel{position:relative;width:100%;height:100%;min-width:0;overflow:hidden;background:#f2f5fa;transform:translate3d(100vw,0,0);-webkit-transform:translate3d(100vw,0,0);transition:transform 300ms cubic-bezier(.2,.8,.2,1);-webkit-transition:-webkit-transform 300ms cubic-bezier(.2,.8,.2,1);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bgpn-layer.is-open .bgpn-panel{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}
.bgpn-frame{display:block;width:100%;height:100%;border:0;background:transparent}
.bgpn-layer[data-bgpn-game="catdog"]:not(.is-ready) .bgpn-frame{visibility:hidden}
.bgpn-layer.is-leaving{pointer-events:none}
.bgpn-layer .bgpn-loading{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);pointer-events:none;font:500 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#708096;opacity:0;transition:opacity 160ms}
.bgpn-layer.is-slow:not(.is-ready) .bgpn-loading{opacity:1}
@media screen and (min-width:768px) and (hover:hover) and (pointer:fine) {
  .bgpn-layer{transition:background-color 300ms cubic-bezier(.2,.8,.2,1)}
  .bgpn-layer.is-open{background-color:#f2f5fa}
  .bgpn-viewport {
    --bgpn-desktop-width:520px;
    width:min(100%,var(--bgpn-desktop-width));
    overflow:hidden;
    clip-path:inset(0);
  }
  .bgpn-panel {
    margin-inline:auto;
    -webkit-transform:translate3d(var(--bgpn-desktop-width),0,0);
    transform:translate3d(var(--bgpn-desktop-width),0,0);
  }
  /* Match the Plinko runtime's minimum portrait aspect ratio. */
  .bgpn-layer[data-bgpn-game="plinko"] .bgpn-panel {
    width:min(100%,calc(100vh / 1.93));
    width:min(100%,calc(100dvh / 1.93));
  }
}
@media(prefers-reduced-motion:reduce){.bgpn-layer,html:not(.bg-ios-webkit) .bgpn-panel,.bgpn-layer .bgpn-loading{transition:none!important}}

/* Let the game backdrop reach the fixed viewport edge in iOS Home Screen apps. */
html.bg-ios-webkit.bg-game-pwa {
  --bg-pwa-greedy-floor:#fff47c;
  --bg-pwa-greedy-play-floor:#ca1c2c;
  --bg-pwa-greedy-result-floor:#6ac7ee;
  --bg-pwa-catdog-floor:#fed593;
  --bg-pwa-yummy-floor:#16bdf1;
  --bg-pwa-plinko-floor:#241c19;
}
html.bg-ios-webkit.bg-game-pwa > .bg-nav-overlay,
html.bg-ios-webkit.bg-game-pwa > .bgpn-layer { height:auto; }

/* Preserve the playable height and fill the remaining space with the game color. */
html.bg-ios-webkit.bg-game-pwa .bg-nav-overlay > .bg-nav-viewport,
html.bg-ios-webkit.bg-game-pwa .bgpn-layer > .bgpn-viewport {
  max-height:100vh;
  max-height:100dvh;
}
html.bg-ios-webkit.bg-game-pwa > .bg-nav-overlay { --bg-pwa-floor:var(--bg-pwa-greedy-floor); }
html.bg-ios-webkit.bg-game-pwa > .bg-nav-overlay.is-loaded { --bg-pwa-floor:var(--bg-pwa-greedy-play-floor); }
html.bg-ios-webkit.bg-game-pwa > .bg-nav-overlay.is-open.is-loaded.is-round-result-open {
  --bg-pwa-floor:var(--bg-pwa-greedy-result-floor);
}
html.bg-ios-webkit.bg-game-pwa > .bgpn-layer[data-bgpn-game="catdog"] { --bg-pwa-floor:var(--bg-pwa-catdog-floor); }
html.bg-ios-webkit.bg-game-pwa > .bgpn-layer[data-bgpn-game="yummy"] { --bg-pwa-floor:var(--bg-pwa-yummy-floor); }
html.bg-ios-webkit.bg-game-pwa > .bgpn-layer[data-bgpn-game="plinko"] { --bg-pwa-floor:var(--bg-pwa-plinko-floor); }
html.bg-ios-webkit.bg-game-pwa > .bg-nav-overlay.is-open::after,
html.bg-ios-webkit.bg-game-pwa > .bgpn-layer.is-open::after {
  content:"";
  position:absolute;
  inset:100vh 0 0;
  top:100dvh;
  background-color:var(--bg-pwa-floor);
  pointer-events:none;
}
html.bg-ios-webkit.bg-game-pwa .bg-nav-panel {
  background-image:linear-gradient(to top,
    var(--bg-pwa-floor) var(--bg-nav-safe-bottom,0px),
    transparent var(--bg-nav-safe-bottom,0px));
}

/* Match the underlying page color while an iOS game owns the viewport. */
@supports selector(html:has(> .bg-nav-overlay)) {
  html.bg-ios-webkit.bg-game-pwa:has(> .bg-nav-overlay.is-open) { --bg-pwa-floor:var(--bg-pwa-greedy-floor); }
  html.bg-ios-webkit.bg-game-pwa:has(> .bg-nav-overlay.is-open.is-loaded) { --bg-pwa-floor:var(--bg-pwa-greedy-play-floor); }
  html.bg-ios-webkit.bg-game-pwa:has(> .bg-nav-overlay.is-open.is-loaded.is-round-result-open) {
    --bg-pwa-floor:var(--bg-pwa-greedy-result-floor);
  }
  html.bg-ios-webkit.bg-game-pwa:has(> .bgpn-layer[data-bgpn-game="catdog"].is-open) { --bg-pwa-floor:var(--bg-pwa-catdog-floor); }
  html.bg-ios-webkit.bg-game-pwa:has(> .bgpn-layer[data-bgpn-game="yummy"].is-open) { --bg-pwa-floor:var(--bg-pwa-yummy-floor); }
  html.bg-ios-webkit.bg-game-pwa:has(> .bgpn-layer[data-bgpn-game="plinko"].is-open) { --bg-pwa-floor:var(--bg-pwa-plinko-floor); }
  html.bg-ios-webkit.bg-game-pwa:has(> .bg-nav-overlay.is-open, > .bgpn-layer.is-open),
  html.bg-ios-webkit.bg-game-pwa:has(> .bg-nav-overlay.is-open, > .bgpn-layer.is-open) > body {
    background-color:var(--bg-pwa-floor);
  }
}

/* Start the progress bar when the installed app actually opens the Greedy panel. */
html.bg-game-pwa .bg-nav-overlay .splash-progress-fill {
  animation:none;
  transform:scaleX(0);
}
html.bg-game-pwa .bg-nav-overlay.is-progress-running .splash-progress-fill {
  animation:bg-nav-progress 1s linear forwards;
}
html.bg-game-pwa .bg-nav-overlay.is-progress-running .greedy-splash.is-error .splash-progress-fill {
  animation-play-state:paused;
}