/* Mipez.app V5.1.7.3.2.2.4.3.1 — Responsive Viewport, Camera Centering & Clean Game Over HUD
 * Incremental shell/lifecycle patch. Core gameplay runtime remains V5.1.7.3.2.2.4.3.
 */

:root{
  --mipez-live-vh:100dvh;
  --mipez-live-vw:100dvw;
}

/*
 * GAME / REACT MENU VIEWPORT
 * The legacy landing keeps a 650px minimum height. That is useful on ordinary
 * landing layouts, but in a 915x412 landscape viewport it made #root 650px tall.
 * The game therefore centered the fish at y≈325 while only ~412px were visible.
 * During gameplay/menu we must use the REAL live viewport height, never 650px.
 */
body.mipez-game-active,
body.mipez-menu-open{
  overscroll-behavior:none!important;
}

body.mipez-game-active{
  height:var(--mipez-live-vh,100dvh)!important;
  min-height:0!important;
  overflow:hidden!important;
}

body.mipez-menu-open{
  height:var(--mipez-live-vh,100dvh)!important;
  min-height:0!important;
  overflow:hidden!important;
}

body.mipez-game-active .mipez-dive-stage,
body.mipez-menu-open .mipez-dive-stage{
  width:100%!important;
  height:var(--mipez-live-vh,100dvh)!important;
  min-height:0!important;
  max-height:var(--mipez-live-vh,100dvh)!important;
  overflow:hidden!important;
}

body.mipez-game-active #root,
body.mipez-menu-open #root,
body.mipez-game-active #root>div,
body.mipez-menu-open #root>div{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}

/* The advanced React menu owns its own vertical scroll area. Keep the public
 * story out of the viewport once the landing has been dismissed. */
body.mipez-menu-open #mipez-public-content,
body.mipez-menu-open .mipez-footer,
body.mipez-menu-open .mipez-floating-play{
  display:none!important;
}

/*
 * BUBBLE HUD LIFECYCLE
 * Funnel Aquarium and Bubble Arsenal have independent timers that continue to
 * touch the same HUD after game over. Phase-authoritative CSS wins over both
 * inline timers and removes the visible blink/flicker completely.
 */
body[data-mipez-game-phase]:not([data-mipez-game-phase="playing"]) #mipez-v512-hud,
body[data-mipez-game-phase]:not([data-mipez-game-phase="playing"]) #mipez-v512-fire{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

body[data-mipez-game-phase="playing"] #mipez-v512-hud{
  visibility:visible!important;
  opacity:1!important;
}

@media(pointer:coarse){
  body[data-mipez-game-phase="playing"] #mipez-v512-fire{
    visibility:visible!important;
    opacity:1!important;
  }
}

/*
 * SHORT LANDSCAPE LANDING
 * 915x412 / 844x390 / similar phone landscape screens need a horizontal hero,
 * not the 650px-tall portrait treatment.
 */
@media (orientation:landscape) and (max-height:560px){
  body:not(.mipez-game-active):not(.mipez-menu-open) .mipez-dive-stage{
    height:var(--mipez-live-vh,100dvh)!important;
    min-height:var(--mipez-live-vh,100dvh)!important;
    max-height:var(--mipez-live-vh,100dvh)!important;
  }

  .mipez-sitebar{
    top:6px;
    width:min(960px,calc(100% - 18px));
    padding:5px 7px 5px 10px;
    border-radius:14px;
  }
  .mipez-sitebar__brand{gap:7px;font-size:13px}
  .mipez-sitebar__brand img{width:28px;height:28px;border-radius:8px}
  .mipez-sitebar__nav a:not(.mipez-sitebar__play){display:none}
  .mipez-sitebar__play{padding:8px 12px!important;font-size:11px!important}

  .mipez-hero-shell{
    width:min(780px,calc(100% - 24px));
    margin-top:34px;
  }
  .mipez-hero-badge{padding:5px 10px;font-size:9px}
  .mipez-hero-logo{
    width:min(235px,32vw);
    max-height:86px;
    margin:4px auto 0;
  }
  .mipez-hero-kicker{margin:0 0 1px;font-size:8px;letter-spacing:.16em}
  .mipez-hero-shell h1{
    margin:3px 0 4px;
    font-size:clamp(1.85rem,5vw,2.55rem);
    line-height:.95;
  }
  .mipez-hero-lead{
    max-width:690px;
    margin:0 auto 8px;
    font-size:.78rem;
    line-height:1.28;
  }
  .mipez-hero-actions{gap:8px;flex-wrap:nowrap}
  .mipez-hero-play{
    width:auto!important;
    min-width:270px!important;
    padding:9px 17px!important;
    border-radius:16px;
    gap:9px;
  }
  .mipez-hero-play__icon{font-size:24px}
  .mipez-hero-play strong{font-size:1.08rem}
  .mipez-hero-play small{display:none}
  .mipez-hero-play:after{display:none}
  .mipez-hero-secondary{
    width:auto!important;
    min-width:155px!important;
    padding:9px 13px;
    border-radius:14px;
    font-size:11px;
  }
  .mipez-hero-trust,
  .mipez-dive-down{display:none}
}

@media (orientation:landscape) and (max-height:430px){
  .mipez-hero-shell{margin-top:31px}
  .mipez-hero-badge{display:none}
  .mipez-hero-logo{width:min(205px,28vw);max-height:72px;margin-top:0}
  .mipez-hero-kicker{font-size:7.5px}
  .mipez-hero-shell h1{font-size:clamp(1.7rem,4.5vw,2.25rem);margin:2px 0 3px}
  .mipez-hero-lead{max-width:650px;font-size:.74rem;line-height:1.22;margin-bottom:7px}
  .mipez-hero-play{min-width:250px!important;padding:8px 15px!important}
  .mipez-hero-secondary{min-width:145px!important;padding:8px 11px}
}

/* Safe areas on modern phones in landscape. */
@supports(padding:max(0px)){
  body.mipez-game-active #root>div,
  body.mipez-menu-open #root>div{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
}