/* Mipez.app V5.1.7.3.2.2.4.3.4
 * Portrait Event Stack, Seabed Camera Safe Zone & Compact Sound Control
 * Incremental over V5.1.7.3.2.2.4.3.3.
 * UI/camera only: no player physics, collisions, Bubble Arsenal or Octopus combat logic changed.
 */

:root{
  --mipez-v434-safe-left:env(safe-area-inset-left,0px);
  --mipez-v434-safe-right:env(safe-area-inset-right,0px);
  --mipez-v434-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ------------------------------------------------------------
   LIFECYCLE CLEANUP
   Keep gameplay-only overlays out of menu/result surfaces.
   ------------------------------------------------------------ */
body[data-mipez-game-phase]:not([data-mipez-game-phase="playing"]) .mipez-octopus-hud,
body[data-mipez-game-phase]:not([data-mipez-game-phase="playing"]) #mipez-native-sound{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* World Director's transient toast duplicates the native Sonner message
   on phones. The event card remains the authoritative event identity. */
@media (pointer:coarse), (max-width:700px), (max-height:560px){
  body[data-mipez-game-phase="playing"] #mipez-world-toast{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
}

/* ------------------------------------------------------------
   COMPACT SOUND CONTROL
   The persistent "Sonido activo" pill used valuable playfield space.
   Preserve the toggle as an accessible icon button.
   ------------------------------------------------------------ */
@media (pointer:coarse), (max-width:700px), (max-height:560px){
  body[data-mipez-game-phase="playing"] #mipez-native-sound{
    display:grid!important;
    place-items:center!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    max-width:30px!important;
    padding:0!important;
    border-radius:999px!important;
    font-size:0!important;
    line-height:1!important;
    overflow:hidden!important;
    opacity:.82!important;
    background:rgba(2,31,69,.72)!important;
    border:1px solid rgba(147,226,255,.24)!important;
    box-shadow:0 5px 16px rgba(0,18,50,.18)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
  }
  body[data-mipez-game-phase="playing"] #mipez-native-sound>*{display:none!important}
  body[data-mipez-game-phase="playing"] #mipez-native-sound::before{
    content:"🔊";
    display:block;
    font-size:12px!important;
    line-height:1!important;
  }
  body[data-mipez-game-phase="playing"] #mipez-native-sound[aria-label="Activar sonido"]::before{content:"🔇"}
}

@media (orientation:portrait) and (max-width:620px){
  body[data-mipez-game-phase="playing"] #mipez-native-sound{
    left:calc(43px + var(--mipez-v434-safe-left))!important;
    right:auto!important;
    bottom:calc(126px + var(--mipez-v434-safe-bottom))!important;
  }
}

@media (orientation:landscape) and (max-height:560px){
  body[data-mipez-game-phase="playing"] #mipez-native-sound{
    left:calc(42px + var(--mipez-v434-safe-left))!important;
    right:auto!important;
    bottom:calc(104px + var(--mipez-v434-safe-bottom))!important;
  }
}

/* ------------------------------------------------------------
   PORTRAIT EVENT STACK
   Row 1: native stats.
   Row 2: compact world event (left) + Bubble HUD (right).
   Row 3: compact Octopus boss/status bar.
   This prevents Floración + Guardián from occupying the same pixels.
   ------------------------------------------------------------ */
@media (orientation:portrait) and (max-width:620px){
  body[data-mipez-game-phase="playing"] #mipez-world-event-card{
    top:44px!important;
    left:8px!important;
    right:auto!important;
    width:min(168px,calc(100vw - 188px))!important;
    max-width:min(168px,calc(100vw - 188px))!important;
    min-width:124px!important;
    grid-template-columns:22px minmax(0,1fr) auto!important;
    gap:4px!important;
    padding:5px 6px!important;
    border-radius:10px!important;
    box-shadow:0 6px 18px rgba(0,20,52,.20)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
  }
  body[data-mipez-game-phase="playing"] #mipez-world-event-card .mwd-icon{
    width:20px!important;
    height:20px!important;
    border-radius:7px!important;
    font-size:12px!important;
  }
  body[data-mipez-game-phase="playing"] #mipez-world-event-card .mwd-title{
    font-size:9.5px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body[data-mipez-game-phase="playing"] #mipez-world-event-card .mwd-subtitle{display:none!important}
  body[data-mipez-game-phase="playing"] #mipez-world-event-card .mwd-progress{
    height:2px!important;
    margin-top:4px!important;
  }
  body[data-mipez-game-phase="playing"] #mipez-world-event-card .mwd-time{
    min-width:24px!important;
    padding:3px 4px!important;
    border-radius:7px!important;
    font-size:8.5px!important;
  }

  body[data-mipez-game-phase="playing"] .mipez-octopus-hud{
    top:82px!important;
    width:min(286px,calc(100vw - 20px))!important;
    padding:6px 8px!important;
    gap:6px!important;
    border-radius:11px!important;
    box-shadow:0 8px 22px rgba(18,4,38,.24)!important;
  }
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud .oct-icon{font-size:19px!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud b{font-size:10.5px!important;line-height:1.05!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud small{display:none!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud .oct-bar{height:3px!important;margin-top:4px!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud em{
    padding:4px 5px!important;
    border-radius:7px!important;
    font-size:7.5px!important;
  }
}

/* ------------------------------------------------------------
   SHORT LANDSCAPE OCTOPUS HUD
   Keep the boss state useful without laying a 390px card over the fish.
   If a World Director event is also active, move it to the second row.
   ------------------------------------------------------------ */
@media (orientation:landscape) and (max-height:560px){
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud{
    top:46px!important;
    width:min(270px,calc(100vw - 210px))!important;
    padding:5px 7px!important;
    gap:6px!important;
    border-radius:10px!important;
    box-shadow:0 7px 20px rgba(18,4,38,.22)!important;
  }
  body[data-mipez-game-phase="playing"].mipez-v434-has-world-event .mipez-octopus-hud{top:80px!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud .oct-icon{font-size:18px!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud b{font-size:10px!important;line-height:1.05!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud small{display:none!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud .oct-bar{height:3px!important;margin-top:4px!important}
  body[data-mipez-game-phase="playing"] .mipez-octopus-hud em{padding:3px 5px!important;font-size:7px!important}
}