/* =====================================================================
   v0.6.64 — authoritative orientation background layer.
   This file intentionally loads LAST. It changes backgrounds only.
   Portrait => portrait artwork. Landscape => landscape artwork on every
   device. IDs are used deliberately so older !important portrait rules
   cannot win by selector specificity.
   ===================================================================== */
@media (orientation: portrait){
  #app > #desktop-stage.desktop-stage{display:none!important}
}

@media (orientation: landscape){
  html,body,#app.app{
    background:#02050a!important;
  }

  #app > #desktop-stage.desktop-stage{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    background:#02050a!important;
  }
  #app > #desktop-stage.desktop-stage > .desktop-stage-image{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  #app[data-scene="start"] > #desktop-stage .desktop-stage-image{
    background-image:url('../assets/desktop-start.png?v=0664-backgrounds-20260914')!important;
    background-position:center center!important;
  }
  #app[data-scene="garage"] > #desktop-stage .desktop-stage-image{
    background-image:url('../assets/desktop-garage.png?v=0664-backgrounds-20260914')!important;
  }
  #app[data-scene="space"] > #desktop-stage .desktop-stage-image{
    background-image:url('../assets/desktop-space.png?v=0664-backgrounds-20260914')!important;
  }
  #app[data-scene="egypt"] > #desktop-stage .desktop-stage-image{
    background-image:url('../assets/desktop-egypt.png?v=0664-backgrounds-20260914')!important;
  }
  #app[data-scene="cats"] > #desktop-stage .desktop-stage-image{
    background-image:url('../assets/desktop-cats.png?v=0664-backgrounds-20260914')!important;
  }
  #app > #desktop-stage .desktop-stage-shade,
  #app > #desktop-stage .desktop-stage-glow{
    display:none!important;
    opacity:0!important;
    background:none!important;
    background-image:none!important;
  }

  /* Kill every portrait background source in landscape, including the
     high-specificity html[lang] rules and game [data-zone] rules. */
  html[lang] #app > #start-screen.start-screen,
  #app > #start-screen.start-screen,
  #app > #game-screen.game-screen,
  #app > #game-screen.game-screen[data-zone="garage"],
  #app > #game-screen.game-screen[data-zone="space"],
  #app > #game-screen.game-screen[data-zone="egypt"],
  #app > #game-screen.game-screen[data-zone="cats"]{
    background:transparent!important;
    background-image:none!important;
    background-color:transparent!important;
    border-left:0!important;
    border-right:0!important;
    box-shadow:none!important;
  }
  html[lang] #app > #start-screen.start-screen::before,
  html[lang] #app > #start-screen.start-screen::after,
  #app > #start-screen.start-screen::before,
  #app > #start-screen.start-screen::after,
  #app > #game-screen.game-screen::before,
  #app > #game-screen.game-screen::after{
    display:none!important;
    content:none!important;
    background:none!important;
    background-image:none!important;
    box-shadow:none!important;
  }
}

/* v0.6.82 — landscape scene mapping for new rooms */
@media (orientation: landscape){
  #app[data-scene="underwater"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-underwater.png?v=0680-newzones')!important}
  #app[data-scene="castle"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-castle.png?v=0680-newzones')!important}
  #app[data-scene="pirate"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-pirate.png?v=0680-newzones')!important}
  #app[data-scene="cyber"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-cyber.png?v=0680-newzones')!important}
  #app[data-scene="temple"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-temple.png?v=0680-newzones')!important}
  #app[data-scene="lab"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-lab.png?v=0680-newzones')!important}
  #app > #game-screen.game-screen[data-zone="underwater"],
  #app > #game-screen.game-screen[data-zone="castle"],
  #app > #game-screen.game-screen[data-zone="pirate"],
  #app > #game-screen.game-screen[data-zone="cyber"],
  #app > #game-screen.game-screen[data-zone="temple"],
  #app > #game-screen.game-screen[data-zone="lab"]{
    background:transparent!important;
    background-image:none!important;
    background-color:transparent!important;
  }
}


/* v0.6.82 — final mobile tap-flash guard (loaded after all gameplay CSS). */
@media (hover:none), (pointer:coarse), (max-width:899px){
  *,*::before,*::after{-webkit-tap-highlight-color:transparent!important}
  .game-topbar button:focus,
  .game-topbar button:focus-visible,
  .game-topbar button:active,
  .bottom-actions .booster-button:focus,
  .bottom-actions .booster-button:focus-visible,
  .bottom-actions .booster-button:active,
  .modal button:focus,
  .modal button:focus-visible,
  .modal button:active,
  .level-node:focus,
  .level-node:focus-visible,
  .level-node:active,
  .zone-tab:focus,
  .zone-tab:focus-visible,
  .zone-tab:active{
    outline:0!important;
    outline-offset:0!important;
  }
}


/* v0.6.138 — one shared hover treatment for start and in-game corner controls.
   This stylesheet is loaded last, so no older game-topbar rule can override it. */
#home-button,#settings-button-game{
  transition:filter .12s ease!important;
  box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
  .start-screen button:hover,
  .start-screen button.is-hit-hover,
  #home-button:hover,
  #settings-button-game:hover{
    -webkit-filter:brightness(1.24) saturate(1.16) drop-shadow(0 0 5px rgba(83,218,255,.72)) drop-shadow(0 0 13px rgba(33,181,255,.52))!important;
    filter:brightness(1.24) saturate(1.16) drop-shadow(0 0 5px rgba(83,218,255,.72)) drop-shadow(0 0 13px rgba(33,181,255,.52))!important;
    transform:none!important;
    box-shadow:none!important;
  }
}
#home-button:focus-visible,#settings-button-game:focus-visible{
  -webkit-filter:brightness(1.26) saturate(1.17) drop-shadow(0 0 6px rgba(83,218,255,.72))!important;
  filter:brightness(1.26) saturate(1.17) drop-shadow(0 0 6px rgba(83,218,255,.72))!important;
  transform:none!important;
  box-shadow:none!important;
}
#home-button:active,#settings-button-game:active{
  -webkit-filter:brightness(1.08) saturate(1.04)!important;
  filter:brightness(1.08) saturate(1.04)!important;
  transform:none!important;
  box-shadow:none!important;
}


/* =====================================================================
   v0.6.139 — corner HUD hover must visually match the start-screen
   sound/settings controls. The previous filter values were already the
   same, but the portrait gameplay viewport clipped the outer drop-shadow
   because the corner buttons sit closer to its edges. Keep the actual game
   canvas clipped in .canvas-shell, while allowing only HUD/filter pixels to
   bleed outside the portrait stage.
   ===================================================================== */
#game-screen.game-screen{
  overflow:visible!important;
}
#game-screen .canvas-shell{
  overflow:hidden!important;
}
#game-screen .game-topbar{
  overflow:visible!important;
}
#home-button,#settings-button-game{
  overflow:visible!important;
  -webkit-clip-path:none!important;
  clip-path:none!important;
  contain:none!important;
  will-change:filter!important;
  transition:filter .12s ease!important;
  box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
  #home-button:hover,#settings-button-game:hover{
    -webkit-filter:brightness(1.24) saturate(1.16) drop-shadow(0 0 5px rgba(83,218,255,.72)) drop-shadow(0 0 13px rgba(33,181,255,.52))!important;
    filter:brightness(1.24) saturate(1.16) drop-shadow(0 0 5px rgba(83,218,255,.72)) drop-shadow(0 0 13px rgba(33,181,255,.52))!important;
    transform:none!important;
    box-shadow:none!important;
  }
}
#home-button:focus-visible,#settings-button-game:focus-visible{
  -webkit-filter:brightness(1.26) saturate(1.17) drop-shadow(0 0 6px rgba(83,218,255,.72))!important;
  filter:brightness(1.26) saturate(1.17) drop-shadow(0 0 6px rgba(83,218,255,.72))!important;
  transform:none!important;
  box-shadow:none!important;
}
#home-button:active,#settings-button-game:active{
  -webkit-filter:brightness(1.08) saturate(1.04)!important;
  filter:brightness(1.08) saturate(1.04)!important;
  transform:none!important;
  box-shadow:none!important;
}


/* =====================================================================
   v0.6.160 — constructor-forced orientation + non-rectangular HUD glow.
   The editor iframe can explicitly request landscape/portrait, independent
   of media-query timing. Runtime outside the editor still uses real viewport
   orientation exactly as before.
   ===================================================================== */
html[data-preview-orientation="portrait"] #app > #desktop-stage.desktop-stage{
  display:none!important;
}

html[data-preview-orientation="landscape"],
html[data-preview-orientation="landscape"] body,
html[data-preview-orientation="landscape"] #app.app{
  background:#02050a!important;
}
html[data-preview-orientation="landscape"] #app > #desktop-stage.desktop-stage{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:#02050a!important;
}
html[data-preview-orientation="landscape"] #app > #desktop-stage.desktop-stage > .desktop-stage-image{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
}
html[data-preview-orientation="landscape"] #app[data-scene="start"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-start.png?v=0664-backgrounds-20260914')!important;background-position:center center!important}
html[data-preview-orientation="landscape"] #app[data-scene="garage"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-garage.png?v=0664-backgrounds-20260914')!important}
html[data-preview-orientation="landscape"] #app[data-scene="space"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-space.png?v=0664-backgrounds-20260914')!important}
html[data-preview-orientation="landscape"] #app[data-scene="egypt"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-egypt.png?v=0664-backgrounds-20260914')!important}
html[data-preview-orientation="landscape"] #app[data-scene="cats"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-cats.png?v=0664-backgrounds-20260914')!important}
html[data-preview-orientation="landscape"] #app[data-scene="underwater"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-underwater.png?v=0680-newzones')!important}
html[data-preview-orientation="landscape"] #app[data-scene="castle"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-castle.png?v=0680-newzones')!important}
html[data-preview-orientation="landscape"] #app[data-scene="pirate"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-pirate.png?v=0680-newzones')!important}
html[data-preview-orientation="landscape"] #app[data-scene="cyber"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-cyber.png?v=0680-newzones')!important}
html[data-preview-orientation="landscape"] #app[data-scene="temple"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-temple.png?v=0680-newzones')!important}
html[data-preview-orientation="landscape"] #app[data-scene="lab"] > #desktop-stage .desktop-stage-image{background-image:url('../assets/desktop-lab.png?v=0680-newzones')!important}
html[data-preview-orientation="landscape"] #app > #desktop-stage .desktop-stage-shade,
html[data-preview-orientation="landscape"] #app > #desktop-stage .desktop-stage-glow{
  display:none!important;opacity:0!important;background:none!important;background-image:none!important;
}
html[data-preview-orientation="landscape"] html[lang] #app > #start-screen.start-screen,
html[data-preview-orientation="landscape"] #app > #start-screen.start-screen,
html[data-preview-orientation="landscape"] #app > #game-screen.game-screen,
html[data-preview-orientation="landscape"] #app > #game-screen.game-screen[data-zone]{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:none!important;
}
html[data-preview-orientation="landscape"] #app > #start-screen.start-screen::before,
html[data-preview-orientation="landscape"] #app > #start-screen.start-screen::after,
html[data-preview-orientation="landscape"] #app > #game-screen.game-screen::before,
html[data-preview-orientation="landscape"] #app > #game-screen.game-screen::after{
  display:none!important;content:none!important;background:none!important;background-image:none!important;box-shadow:none!important;
}

/* The menu/settings PNGs already contain their own painted rounded contour.
   Never brighten the rectangular hit target behind them: only filter the
   visible alpha pixels of the actual asset. */
#home-button,#settings-button-game,
#home-button:hover,#settings-button-game:hover,
#home-button:focus,#settings-button-game:focus,
#home-button:focus-visible,#settings-button-game:focus-visible,
#home-button:active,#settings-button-game:active{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
}
@media(hover:hover) and (pointer:fine){
  #home-button:hover,#settings-button-game:hover{
    -webkit-filter:brightness(1.22) saturate(1.14) drop-shadow(0 0 4px rgba(99,226,255,.72)) drop-shadow(0 0 11px rgba(35,181,255,.48))!important;
    filter:brightness(1.22) saturate(1.14) drop-shadow(0 0 4px rgba(99,226,255,.72)) drop-shadow(0 0 11px rgba(35,181,255,.48))!important;
    transform:none!important;
  }
}
#home-button:focus-visible,#settings-button-game:focus-visible{
  -webkit-filter:brightness(1.24) saturate(1.15) drop-shadow(0 0 5px rgba(99,226,255,.74)) drop-shadow(0 0 12px rgba(35,181,255,.50))!important;
  filter:brightness(1.24) saturate(1.15) drop-shadow(0 0 5px rgba(99,226,255,.74)) drop-shadow(0 0 12px rgba(35,181,255,.50))!important;
  transform:none!important;
}
#home-button:active,#settings-button-game:active{
  -webkit-filter:brightness(1.08) saturate(1.04)!important;
  filter:brightness(1.08) saturate(1.04)!important;
  transform:none!important;
}


/* v0.6.169 — authoritative New Year event background override. Loaded LAST. */
@media (orientation: portrait){
  #app > #game-screen.game-screen[data-event-theme="new-year-2027"]{
    background-image:url('../assets/user/bg-event-new-year-2027.png?v=06169-event-room-fix')!important;
    background-position:center center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-color:#02050a!important;
  }
}
@media (orientation: landscape){
  #app[data-event-theme="new-year-2027"] > #desktop-stage.desktop-stage > .desktop-stage-image{
    background-image:url('../assets/desktop-event-new-year-2027.png?v=06169-event-room-fix')!important;
    background-position:center center!important;
    background-size:cover!important;
  }
}
html[data-preview-orientation="portrait"] #app > #game-screen.game-screen[data-event-theme="new-year-2027"]{
  background-image:url('../assets/user/bg-event-new-year-2027.png?v=06169-event-room-fix')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-color:#02050a!important;
}
html[data-preview-orientation="landscape"] #app[data-event-theme="new-year-2027"] > #desktop-stage.desktop-stage > .desktop-stage-image{
  background-image:url('../assets/desktop-event-new-year-2027.png?v=06169-event-room-fix')!important;
  background-position:center center!important;
  background-size:cover!important;
}