/* v0.5.42 — layout transferred directly from layout-config.json.
   User replacement artwork is referenced only from assets/user/.
   Images preserve source aspect ratio via cover cropping; they are never stretched. */

.game-screen{
  position:absolute!important;inset:auto!important;left:50%!important;top:50%!important;
  width:min(100vw,calc(100dvh * 941 / 1672))!important;height:auto!important;aspect-ratio:941/1672!important;
  max-width:100vw!important;max-height:100dvh!important;transform:translate(-50%,-50%)!important;
  margin:0!important;padding:0!important;overflow:hidden!important;box-shadow:0 0 90px rgba(0,0,0,.78)!important;
  background-color:#02070d!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
  container-type:size;
}
.game-screen[data-zone="garage"]{background-image:url('../assets/user/bg-garage.png')!important}
.game-screen[data-zone="space"]{background-image:url('../assets/user/bg-space.png')!important}
.game-screen[data-zone="egypt"]{background-image:url('../assets/user/bg-egypt.png')!important}
.game-screen[data-zone="cats"]{background-image:url('../assets/user/bg-cats.png')!important}
.game-screen::before,.game-screen::after{display:none!important;content:none!important}
.game-screen>*{position:absolute!important}

/* Keep the unrelated widescreen continuation assets: they were not replaced by the user's portrait backgrounds. */
.app[data-scene="garage"] .desktop-stage-image{background-image:url('../assets/desktop-garage.webp')!important}
.app[data-scene="space"] .desktop-stage-image{background-image:url('../assets/desktop-space.webp')!important}
.app[data-scene="egypt"] .desktop-stage-image{background-image:url('../assets/desktop-egypt.webp')!important}
.app[data-scene="cats"] .desktop-stage-image{background-image:url('../assets/desktop-cats.webp')!important}

.canvas-shell{inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:transparent!important;box-shadow:none!important;z-index:4!important}
#game-canvas{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;background:transparent!important;touch-action:none!important}

.game-topbar{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;pointer-events:none!important;z-index:8!important}
.game-topbar button,.bottom-actions .booster-button{position:absolute!important;margin:0!important;padding:0!important;min-width:0!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:transparent!important;background-color:transparent!important;background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;pointer-events:auto!important;overflow:visible!important;transform:none!important}
#home-button{left:1.91285866%!important;top:1.37559809%!important;width:7.22635494%!important;height:3.94736842%!important;z-index:20!important;background-image:url('../assets/user/ui-menu.png')!important}
#level-map-button{left:11.79596174%!important;top:0.47846890%!important;width:23.80446334%!important;height:5.74162679%!important;z-index:20!important;background-image:url('../assets/user/ui-level.png')!important}
#collection-button-game{left:37.61955367%!important;top:0.59808612%!important;width:24.97343252%!important;height:6.45933014%!important;z-index:141!important;background-image:url('../assets/user/ui-collection.png')!important}
#game-coin-button{left:64.29330499%!important;top:-0.11961722%!important;width:24.86716259%!important;height:5.68181818%!important;z-index:20!important;background-image:url('../assets/user/ui-coins.png')!important}
#settings-button-game{left:91.07332625%!important;top:1.43540670%!important;width:7.12008502%!important;height:3.94736842%!important;z-index:20!important;background-image:url('../assets/user/ui-settings.png')!important}
.game-topbar button>*{visibility:hidden!important}
#level-map-button #level-value{left:63.39285714%!important;top:34.37500000%!important;width:24.55357143%!important;height:32.29166667%!important;visibility:visible!important;position:absolute!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;font:950 calc(18px * var(--game-scale,1))/1 system-ui,sans-serif!important;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 6px rgba(28,185,255,.3)!important;}
#game-coin-button #coin-value{left:35.89743590%!important;top:45.26315789%!important;width:36.32478632%!important;height:32.63157895%!important;visibility:visible!important;position:absolute!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;font:950 calc(18px * var(--game-scale,1))/1 system-ui,sans-serif!important;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 6px rgba(28,185,255,.3)!important;}

.mystery-card{left:34.75026567%!important;top:6.04066986%!important;width:30.39319872%!important;height:12.20095694%!important;z-index:30!important;position:absolute!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;transform:none!important;background:transparent url('../assets/user/ui-mystery.png') center/cover no-repeat!important;box-shadow:none!important;pointer-events:none!important;}
.mystery-card .mystery-copy{position:absolute!important;inset:0!important;display:block!important}
.mystery-card .mystery-copy>strong,.mystery-card .mystery-copy>span>span{display:none!important}
.mystery-card #goal-symbol{left:20.27972028%!important;top:12.25490196%!important;width:59.44055944%!important;height:51.96078431%!important;position:absolute!important;display:flex!important;align-items:center!important;justify-content:center!important;right:auto!important;transform:none!important;color:#000!important;opacity:1!important;font-size:calc(62px * var(--game-scale,1))!important;line-height:1!important;filter:grayscale(1) brightness(0)!important;text-shadow:0 0 7px rgba(44,195,255,.28)!important;}
.mystery-card .mystery-copy>span{position:absolute!important;inset:0!important;display:block!important;color:transparent!important;font-size:0!important}
.mystery-card #reveal-progress{left:39.86013986%!important;top:62.25490196%!important;width:21.67832168%!important;height:14.70588235%!important;position:absolute!important;display:flex!important;align-items:center!important;justify-content:center!important;transform:none!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important;font:950 calc(17px * var(--game-scale,1))/1 system-ui,sans-serif!important;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 6px rgba(28,185,255,.3)!important;}
.mystery-card .mystery-progress{left:19.93006993%!important;top:74.01960784%!important;width:61.53846154%!important;height:12.25490196%!important;position:absolute!important;display:block!important;margin:0!important;padding:10% 0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important;}
.mystery-card .mystery-progress::before{content:"";position:absolute;left:0;right:0;top:10%;bottom:10%;border:calc(1px * var(--game-scale,1)) solid rgba(113,205,255,.75);border-radius:999px;background:#03101b;box-shadow:inset 0 0 4px rgba(0,0,0,.8)}
#mystery-progress-bar{position:absolute!important;left:0!important;top:10%!important;height:80%!important;border-radius:999px!important;background:linear-gradient(90deg,#22c9ff,#75efff)!important;box-shadow:0 0 8px rgba(40,203,255,.65)!important}

.bottom-actions{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;margin:0!important;padding:0!important;pointer-events:none!important;z-index:8!important}
#hint-button{left:1.38150903%!important;top:84.98803828%!important;width:30.81827843%!important;height:9.33014354%!important;z-index:80!important;background-image:url('../assets/user/ui-hint.png')!important}
#queue-help-button{left:32.73113709%!important;top:84.98803828%!important;width:34.11264612%!important;height:9.98803828%!important;z-index:80!important;background-image:url('../assets/user/ui-clear.png')!important}
#shuffle-button{left:67.26886291%!important;top:85.88516746%!important;width:32.30605739%!important;height:8.37320574%!important;z-index:80!important;background-image:url('../assets/user/ui-shuffle.png')!important}
.bottom-actions .booster-button>.booster-icon,.bottom-actions .booster-button>span[data-i18n]{display:none!important}
.bottom-actions .booster-button small{position:absolute!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;margin:0!important;padding:0!important;border:calc(1px * var(--game-scale,1)) solid rgba(80,213,255,.75)!important;border-radius:999px!important;background:rgba(3,17,29,.95)!important;box-shadow:0 0 8px rgba(40,203,255,.3)!important;color:#79ecff!important;font-size:0!important;line-height:1!important;white-space:nowrap!important;}
#hint-button small{left:74.13793103%!important;top:9.61538462%!important;width:27.58620690%!important;height:22.43589744%!important;}
#queue-help-button small{left:74.76635514%!important;top:8.98203593%!important;width:24.92211838%!important;height:20.95808383%!important;}
#shuffle-button small{left:70.39473684%!important;top:0.00000000%!important;width:26.31578947%!important;height:25.00000000%!important;}
.bottom-actions .booster-button small b{display:inline!important;color:inherit!important;font:950 calc(20px * var(--game-scale,1))/1 system-ui,sans-serif!important}
.bottom-actions .booster-button small span{display:none!important}

.toast{z-index:200!important}
@media(hover:hover) and (pointer:fine){.game-topbar button:hover,.bottom-actions .booster-button:hover{filter:brightness(1.08) saturate(1.04)!important}}
.game-topbar button:focus-visible,.bottom-actions .booster-button:focus-visible{outline:2px solid #fff!important;outline-offset:1px!important}

/* v0.5.42 — render only the user's original PNGs with the same crop framing used by the v0.5.31 editor. */
#home-button{background-image:url('../assets/user/ui-menu.png')!important;background-repeat:no-repeat!important;background-size:119.117647% 121.887825%!important;background-position:47.552448% 55.781250%!important}
#level-map-button{background-image:url('../assets/user/ui-level.png')!important;background-repeat:no-repeat!important;background-size:108.045343% 141.231056%!important;background-position:51.789794% 59.460347%!important}
#collection-button-game{background-image:url('../assets/user/ui-collection.png')!important;background-repeat:no-repeat!important;background-size:103.584559% 126.310796%!important;background-position:50.072321% 71.791400%!important}
#game-coin-button{background-image:url('../assets/user/ui-coins.png')!important;background-repeat:no-repeat!important;background-size:101.393995% 140.890143%!important;background-position:40.076125% 38.791914%!important}
#settings-button-game{background-image:url('../assets/user/ui-settings.png')!important;background-repeat:no-repeat!important;background-size:132.818627% 134.676231%!important;background-position:50.433932% 46.383115%!important}
.mystery-card{background-image:url('../assets/user/ui-mystery.png')!important;background-repeat:no-repeat!important;background-size:100.796569% 106.141841%!important;background-position:90.315440% 16.446225%!important}
#hint-button{background-image:url('../assets/user/ui-hint.png')!important;background-repeat:no-repeat!important;background-size:102.090993% 106.777962%!important;background-position:56.933543% 0.000000%!important}
#queue-help-button{background-image:url('../assets/user/ui-clear.png')!important;background-repeat:no-repeat!important;background-size:105.735294% 114.647905%!important;background-position:49.816850% 53.237408%!important}
#shuffle-button{background-image:url('../assets/user/ui-shuffle.png')!important;background-repeat:no-repeat!important;background-size:101.911765% 124.815826%!important;background-position:49.816850% 70.989298%!important}


/* v0.5.41 — booster stock counters are independent stage overlays.
   They are deliberately NOT children of the booster buttons so moving a button
   can never move its stock counter and vice versa. */
.game-screen .booster-stock-overlay{
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(88,213,255,.5)!important;
  border-radius:999px!important;
  background:rgba(2,14,25,.94)!important;
  box-shadow:0 0 8px rgba(35,187,255,.22)!important;
  color:#70eaff!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-weight:950!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
}
.bottom-actions .booster-button small{display:none!important}


/* v0.5.42 — mystery percent is a fully independent stage overlay.
   It is deliberately NOT a child of .mystery-card, so moving/resizing the
   mystery card cannot move the percentage and vice versa. */
.game-screen > #reveal-progress.mystery-percent-overlay{
  position:absolute!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-weight:950!important;
  line-height:1!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 6px rgba(28,185,255,.3)!important;
  pointer-events:none!important;
  box-sizing:border-box!important;
  transform:none!important;
}


/* =====================================================================
   v0.5.44 — stable booster hover, saturated robot indicators, exact progress fill.
   ===================================================================== */
.mystery-card .mystery-progress{
  box-sizing:border-box!important;
  padding:0!important;
  border:calc(1px * var(--game-scale,1)) solid rgba(113,205,255,.75)!important;
  border-radius:999px!important;
  background:#03101b!important;
  box-shadow:inset 0 0 4px rgba(0,0,0,.8)!important;
  overflow:hidden!important;
}
.mystery-card .mystery-progress::before{content:none!important;display:none!important}
#mystery-progress-bar{
  position:absolute!important;left:0!important;top:0!important;height:100%!important;
  box-sizing:border-box!important;transform:none!important;transform-origin:left center!important;
  transition:width .22s ease!important;will-change:width;
}

/* Booster PNGs remain completely stable. Hover adds a second, perfectly aligned
   copy of the same transparent artwork instead of filtering/recompositing the base. */
.bottom-actions .booster-button,
.bottom-actions .booster-button:hover,
.bottom-actions .booster-button:focus,
.bottom-actions .booster-button:focus-visible,
.bottom-actions .booster-button:active{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  filter:none!important;transform:none!important;outline:0!important;outline-offset:0!important;
  box-shadow:none!important;background-color:transparent!important;
  isolation:isolate!important;
}
.bottom-actions .booster-button::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:inherit;background-repeat:inherit;background-size:inherit;background-position:inherit;
  opacity:0;transition:opacity .13s ease;mix-blend-mode:screen;
}
@media(hover:hover) and (pointer:fine){
  .bottom-actions .booster-button:hover::after{opacity:.34}
}
.bottom-actions .booster-button:focus-visible::after{opacity:.38}
.bottom-actions .booster-button:active::after{opacity:.46}


/* =====================================================================
   v0.5.46 — booster pointer/click areas follow the actually drawn PNG borders.
   The layout boxes remain unchanged so the artwork does not move or resize.
   Only the invisible interactive area is trimmed to the visible button body.
   ===================================================================== */
.bottom-actions .booster-button{
  pointer-events:none!important;
}
.bottom-actions .booster-button>.booster-hitbox{
  display:block!important;
  position:absolute!important;
  z-index:5!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}
/* Insets are derived from the visible alpha bounds of each cropped source PNG. */
#hint-button>.booster-hitbox{
  left:.35%!important;right:.65%!important;top:20.30%!important;bottom:16.50%!important;
  border-radius:calc(22px * var(--game-scale,1))!important;
}
#queue-help-button>.booster-hitbox{
  left:.60%!important;right:.60%!important;top:20.10%!important;bottom:21.90%!important;
  border-radius:calc(22px * var(--game-scale,1))!important;
}
#shuffle-button>.booster-hitbox{
  left:.55%!important;right:.65%!important;top:11.30%!important;bottom:17.25%!important;
  border-radius:calc(22px * var(--game-scale,1))!important;
}


/* =====================================================================
   v0.5.47 — pointer/click areas of ALL painted gameplay buttons are trimmed
   to the real visible artwork, not to the transparent PNG padding.
   This fixes the top row the same way as the lower booster buttons.
   ===================================================================== */
.game-topbar button{
  -webkit-clip-path:inset(0 round 999px)!important;
  clip-path:inset(0 round 999px)!important;
}
/* Insets are derived from the effective alpha bounds AFTER applying the same
   crop/scale that is used to display each original PNG in the game. */
#home-button{
  -webkit-clip-path:inset(0.00% 0.74% 2.27% 1.10% round 999px)!important;
  clip-path:inset(0.00% 0.74% 2.27% 1.10% round 999px)!important;
}
#level-map-button{
  -webkit-clip-path:inset(16.41% 0.78% 15.36% 0.45% round 999px)!important;
  clip-path:inset(16.41% 0.78% 15.36% 0.45% round 999px)!important;
}
#collection-button-game{
  -webkit-clip-path:inset(13.66% 0.32% 26.62% 0.11% round 999px)!important;
  clip-path:inset(13.66% 0.32% 26.62% 0.11% round 999px)!important;
}
#game-coin-button{
  -webkit-clip-path:inset(27.63% 1.07% 3.16% 1.07% round 999px)!important;
  clip-path:inset(27.63% 1.07% 3.16% 1.07% round 999px)!important;
}
#settings-button-game{
  -webkit-clip-path:inset(0.38% 2.24% 2.27% 1.49% round 999px)!important;
  clip-path:inset(0.38% 2.24% 2.27% 1.49% round 999px)!important;
}
/* Keep the already corrected lower buttons explicitly trimmed too. */
#hint-button>.booster-hitbox{
  left:.34%!important;right:.69%!important;top:20.19%!important;bottom:16.51%!important;
}
#queue-help-button>.booster-hitbox{
  left:.62%!important;right:.62%!important;top:19.91%!important;bottom:22.01%!important;
}
#shuffle-button>.booster-hitbox{
  left:.49%!important;right:.66%!important;top:11.25%!important;bottom:17.32%!important;
}





/* v0.5.55 — artwork invariant: RU and EN use the exact same original PNG assets.
   Language changes text layers only; image geometry/source never changes by language. */


/* =====================================================================
   v0.5.57 overrides — top HUD buttons keep original artwork shape and do
   not shift on hover/active. Loaded after app.css, so final source of truth.
   ===================================================================== */
#home-button,#settings-button-game{
  -webkit-clip-path:none!important;
  clip-path:none!important;
  border-radius:0!important;
  overflow:visible!important;
  background-size:100% 100%!important;
  background-position:center center!important;
}
@media(hover:hover) and (pointer:fine){
  .game-topbar button:hover,.bottom-actions .booster-button:hover{
    transform:none!important;
  }
  .game-topbar button:hover{
    filter:brightness(1.12) saturate(1.06)!important;
  }
}
.game-topbar button:focus-visible{transform:none!important}
.game-topbar button:active{transform:none!important;filter:brightness(1.08) saturate(1.04)!important}