/* ELIE v5.1.91 — phone modal close reliability and MYRA menu geometry.
   Phone landscape only. Desktop and tablet composition remain untouched. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:520px){
  /* Evolution Lab: the touch target already existed, but a previous global
     consistency rule hid the real Close-Off image. Restore the exact shared
     close asset and keep it above every lab layer. */
  html.phone-landscape :is(.upgrade-close,.upgrade-detail-close){
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    display:block!important;
    right:max(8px,var(--safe-right,0px))!important;
    top:max(8px,var(--safe-top,0px))!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    z-index:12000!important;
    background:transparent!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html.phone-landscape :is(.upgrade-close,.upgrade-detail-close) img{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    pointer-events:none!important;
  }

  /* Badge archive: force both gallery and detail close controls into the real
     interactive layer. The image is rendered as a background so no text or
     inherited child visibility rule can make the X disappear. */
  html.phone-landscape :is(.badge-gallery-window,.badge-detail-card){
    isolation:isolate!important;
  }
  html.phone-landscape :is(.badge-gallery-window,.badge-detail-card) .badge-window-close{
    position:absolute!important;
    right:max(8px,var(--safe-right,0px))!important;
    left:auto!important;
    top:max(7px,var(--safe-top,0px))!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:20000!important;
    background-color:transparent!important;
    background-image:url('../assets/images/Close-Off.png')!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-size:contain!important;
    border:0!important;
    border-radius:0!important;
    color:transparent!important;
    font-size:0!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html.phone-landscape :is(.badge-gallery-window,.badge-detail-card) .badge-window-close:is(:hover,:focus-visible,:active){
    background-image:url('../assets/images/Close-On.png')!important;
    transform:none!important;
  }
  html[dir="rtl"].phone-landscape :is(.badge-gallery-window,.badge-detail-card) .badge-window-close{
    right:auto!important;
    left:max(8px,var(--safe-left,0px))!important;
  }

  /* MYRA mobile navigation: replace two stacks of thin bars with a balanced
     four-column telemetry matrix. The injected HOME card participates in the
     same grid, so every screen receives one coherent menu language. */
  html.phone-landscape .mobile-menu-panel.mobile-menu-panel-v518{
    padding:52px max(12px,var(--safe-right,0px)) 12px max(12px,var(--safe-left,0px))!important;
    border:1px solid rgba(46,241,58,.82)!important;
    border-left-width:5px!important;
    border-bottom-width:5px!important;
    border-radius:18px!important;
    background:
      linear-gradient(rgba(46,241,58,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(46,241,58,.02) 1px,transparent 1px),
      #000!important;
    background-size:36px 36px!important;
    overflow:hidden!important;
  }
  html.phone-landscape .mobile-menu-grid.mobile-menu-grid-v518{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    gap:9px!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-column{
    display:contents!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    padding:18px 10px 13px!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    border:1px solid rgba(46,241,58,.46)!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,rgba(8,47,14,.32),rgba(0,0,0,.98) 64%)!important;
    color:#2ef13a!important;
    text-align:center!important;
    overflow:hidden!important;
    clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px))!important;
    box-shadow:inset 0 0 0 1px rgba(46,241,58,.025)!important;
    transform:none!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item::before{
    content:""!important;
    position:absolute!important;
    left:8px!important;
    top:8px!important;
    width:15px!important;
    height:15px!important;
    border:0!important;
    border-left:1px solid #2ef13a!important;
    border-top:1px solid #2ef13a!important;
    transform:none!important;
    opacity:.75!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item::after{
    content:""!important;
    position:absolute!important;
    right:8px!important;
    bottom:8px!important;
    width:11px!important;
    height:11px!important;
    border-right:1px solid rgba(46,241,58,.72)!important;
    border-bottom:1px solid rgba(46,241,58,.72)!important;
    pointer-events:none!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item small{
    position:absolute!important;
    left:11px!important;
    top:10px!important;
    transform:none!important;
    color:rgba(210,255,216,.64)!important;
    font-size:6px!important;
    line-height:1!important;
    letter-spacing:.08em!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item span{
    display:block!important;
    max-width:100%!important;
    color:inherit!important;
    font-size:clamp(9px,2.35vh,13px)!important;
    font-weight:750!important;
    line-height:1.08!important;
    letter-spacing:.025em!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item i{
    position:absolute!important;
    left:12px!important;
    right:12px!important;
    bottom:7px!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(46,241,58,.72),transparent)!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item:is(:active,.active){
    background:#2ef13a!important;
    color:#001704!important;
    border-color:#2ef13a!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item:is(:active,.active)::before,
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item:is(:active,.active)::after{
    border-color:#001704!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item:is(:active,.active) small{
    color:rgba(0,23,4,.62)!important;
  }
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item:is(:active,.active) i{
    background:rgba(0,23,4,.72)!important;
  }
}

@media (orientation:landscape) and (pointer:coarse) and (max-height:390px){
  html.phone-landscape .mobile-menu-panel.mobile-menu-panel-v518{
    padding-top:47px!important;
    padding-bottom:8px!important;
  }
  html.phone-landscape .mobile-menu-grid.mobile-menu-grid-v518{gap:6px!important}
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item{padding:14px 7px 10px!important;border-radius:9px!important}
  html.phone-landscape .mobile-menu-grid-v518 .mobile-menu-item span{font-size:clamp(8px,2.1vh,10px)!important}
}