/* v8.93.7 — independent home layout. No position:relative on #homeScreen. */
/* Desktop composition uses the screen's normal CSS grid. Actions are IN FLOW,
   not absolute: this prevents them from escaping or covering the logo. */
@media (min-width:761px){
  #homeScreen.active{
    position:absolute!important; /* preserve base .screen positioning */
    inset:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-content:start!important;
    overflow:hidden!important;
    padding:0!important;
  }
  #homeScreen.active #livingHome{display:none!important}
  #homeScreen.active .game-logo{
    position:absolute!important;
    left:3%!important;
    top:3%!important;
    transform:none!important;
    width:min(46%,560px)!important;
    max-width:560px!important;
    max-height:35vh!important;
    height:auto!important;
    object-fit:contain!important;
    z-index:4!important;
  }
  #homeScreen.active .v8-home-actions{
    position:static!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:start!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:clamp(6px,1vh,13px)!important;
    width:min(88%,410px)!important;
    max-width:410px!important;
    min-width:0!important;
    margin:clamp(80px,13vh,150px) auto 0!important;
    padding:0!important;
    top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;
    transform:none!important;
    z-index:6!important;
  }
  #homeScreen.active .v8-secondary-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:clamp(5px,.7vh,10px)!important;
    width:88%!important;
    min-width:0!important;
    grid-template-columns:none!important;
    margin:0!important;
  }
  #homeScreen.active .menu-art-btn{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important;
    box-shadow:none!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  #homeScreen.active .menu-art-play{width:100%!important;max-width:100%!important}
  #homeScreen.active .menu-art-btn img{
    display:block!important;width:100%!important;height:auto!important;
    max-height:none!important;object-fit:contain!important;border-radius:0!important;
  }
  #homeScreen.active .hero-beaver{
    position:absolute!important;
    left:4%!important;bottom:0!important;top:auto!important;
    width:min(26%,320px)!important;max-width:320px!important;
    max-height:53vh!important;height:auto!important;
    transform:none!important;object-fit:contain!important;
    z-index:5!important;
  }
  #homeScreen.active .home-talk{
    left:27%!important;right:auto!important;bottom:17%!important;
    max-width:min(21%,240px)!important;
    top:auto!important;transform:none!important;z-index:7!important;
  }
}
/* Short wide viewports: shrink all three zones together without touching phones. */
@media (min-width:761px) and (max-height:650px){
  #homeScreen.active .game-logo{width:min(38%,440px)!important;max-height:32vh!important}
  #homeScreen.active .v8-home-actions{
    width:min(78%,290px)!important;
    margin-top:max(51px,10vh)!important;
    gap:4px!important;
  }
  #homeScreen.active .v8-secondary-actions{width:90%!important;gap:3px!important}
  #homeScreen.active .hero-beaver{width:min(21%,220px)!important;max-height:49vh!important}
  #homeScreen.active .home-talk{font-size:11px!important;bottom:13%!important;max-width:22%!important}
}
/* No desktop rule applies to phones. Restore original absolute screen context,
   and keep mobile navigation dimensions from game.css unchanged. */
@media (max-width:760px){
  #homeScreen.active{
    position:absolute!important;
    overflow:hidden!important;
    padding:0!important;
  }
  #homeScreen.active .hero-beaver.classic-sprite-idle{
    aspect-ratio:1 / 1!important;
    height:auto!important;
    object-fit:contain!important;
    background-size:300% 100%,300% 300%!important;
  }
}
/* Sprite tile is square (512 x 512). Never let the transparent 1px IMG
   inherit a costume portrait aspect ratio or a cover crop. */
#homeScreen .hero-beaver.classic-sprite-idle{
  aspect-ratio:1 / 1!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  background-image:url('../../assets/animations/beaver-idle/beaver-blink-overlay.webp'),url('../../assets/animations/beaver-idle/beaver-breath-only.webp')!important;
  background-size:300% 100%,300% 300%!important;
  background-position:0% 0%,0% 0%;
  background-repeat:no-repeat,no-repeat!important;
  transform:none!important;
}
/* Critical green-screen regression guard: do not set position:relative here. */
@media (orientation:landscape) and (max-height:600px){
  #homeScreen{overflow:hidden!important;padding:0!important}
}

/* v8.93.9 — home-only hierarchy; Play is larger than the other three art buttons.
   Do not change #homeScreen positioning (Android short-landscape regression guard). */
@media (min-width:761px){
  #homeScreen.active .v8-home-actions > .menu-art-play{
    width:100%!important;
    max-width:100%!important;
    flex:0 0 auto!important;
  }
  #homeScreen.active .v8-secondary-actions{
    width:76%!important;
    max-width:76%!important;
  }
  #homeScreen.active .v8-secondary-actions > .menu-art-btn{
    width:100%!important;
    max-width:100%!important;
  }
}
@media (max-width:760px){
  #homeScreen.active .v8-home-actions > .menu-art-play{
    width:108%!important;
    max-width:108%!important;
  }
  #homeScreen.active .v8-secondary-actions{
    width:80%!important;
    max-width:80%!important;
  }
  #homeScreen.active .v8-secondary-actions > .menu-art-btn{
    width:100%!important;
    max-width:100%!important;
  }
}