/*
 * ============================================================
 * BOOM_MOBILE_TRAINER_OS_MENU_V1
 * ============================================================
 *
 * Mobile:
 * One central Pokéball opens the complete TRAINER OS.
 *
 * Desktop remains untouched.
 * ============================================================
 */


.portal-mobile-trainer-menu,
.portal-mobile-menu-backdrop,
.portal-mobile-menu-dock {
  display:none;
}


@media (max-width:900px) {

  /*
   * The old multi-row mobile navigation is still kept in the DOM
   * for Portal compatibility, but is no longer visually rendered.
   */
  #portal-mobile-nav {
    display:none !important;
  }


  /*
   * Leave space for our single bottom dock.
   */
  .portal-stage {
    padding-bottom:
      calc(
        88px +
        env(safe-area-inset-bottom, 0px)
      ) !important;
  }


  /* ==========================================================
     DARK BACKDROP
     ========================================================== */

  .portal-mobile-menu-backdrop {
    display:block;

    position:fixed;
    inset:0;

    z-index:2147481000;

    background:
      rgba(0,5,9,.68);

    backdrop-filter:
      blur(4px);

    -webkit-backdrop-filter:
      blur(4px);

    opacity:0;

    pointer-events:none;

    transition:
      opacity .24s ease;
  }


  body.portal-mobile-menu-open
  .portal-mobile-menu-backdrop {
    opacity:1;

    pointer-events:auto;
  }



  /* ==========================================================
     TRAINER OS PANEL
     ========================================================== */

  .portal-mobile-trainer-menu {
    display:block;

    position:fixed;

    left:
      max(
        10px,
        env(safe-area-inset-left, 0px)
      );

    right:
      max(
        10px,
        env(safe-area-inset-right, 0px)
      );

    bottom:
      calc(
        79px +
        env(safe-area-inset-bottom, 0px)
      );

    z-index:2147483000;

    max-height:min(72vh,620px);

    overflow:auto;

    overscroll-behavior:contain;

    padding:
      16px
      12px
      18px;

    border:
      1px solid
      color-mix(
        in srgb,
        var(--region-accent) 42%,
        rgba(255,255,255,.08)
      );

    border-radius:
      22px;

    background:
      linear-gradient(
        165deg,
        rgba(7,24,27,.985),
        rgba(2,11,17,.99)
      );

    box-shadow:
      0 -14px 60px
      rgba(0,0,0,.58),
      0 0 36px
      color-mix(
        in srgb,
        var(--region-accent) 11%,
        transparent
      ),
      inset 0 1px
      rgba(255,255,255,.05);

    transform:
      translateY(
        calc(100% + 120px)
      );

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
      transform .30s
        cubic-bezier(.2,.8,.2,1),
      opacity .22s ease,
      visibility .30s;
  }


  body.portal-mobile-menu-open
  .portal-mobile-trainer-menu {
    transform:
      translateY(0);

    opacity:1;

    visibility:visible;

    pointer-events:auto;
  }



  /* ==========================================================
     PANEL HEADER
     ========================================================== */

  .portal-mobile-trainer-menu__head {
    display:flex;

    align-items:center;

    justify-content:
      space-between;

    gap:12px;

    margin:
      0 3px
      14px;

    padding:
      0 2px
      12px;

    border-bottom:
      1px solid
      rgba(255,255,255,.075);
  }


  .portal-mobile-trainer-menu__kicker {
    display:block;

    margin-bottom:4px;

    color:
      var(
        --region-accent,
        #62e7b2
      );

    font-size:9px;

    font-weight:900;

    letter-spacing:.17em;
  }


  .portal-mobile-trainer-menu__head strong {
    display:block;

    color:#f4fbff;

    font-size:20px;

    line-height:1;

    letter-spacing:.04em;
  }


  .portal-mobile-trainer-menu__hint {
    max-width:105px;

    color:#77929a;

    text-align:right;

    font-size:9px;

    line-height:1.25;
  }



  /* ==========================================================
     MENU GRID
     ========================================================== */

  .portal-mobile-trainer-menu__grid {
    display:grid;

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:8px;
  }


  .portal-mobile-trainer-menu__grid
  .portal-nav-item {
    position:relative;

    display:flex !important;

    min-width:0;

    min-height:78px !important;

    padding:
      9px 4px !important;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    border:
      1px solid
      rgba(255,255,255,.065) !important;

    border-radius:
      14px !important;

    background:
      rgba(255,255,255,.025);

    color:
      #93abb2;

    text-decoration:none;

    box-shadow:none !important;

    overflow:visible;
  }


  .portal-mobile-trainer-menu__grid
  .portal-nav-item i {
    display:grid !important;

    width:37px !important;

    height:37px !important;

    place-items:center;

    flex:0 0 37px;

    border-radius:50%;

    background:
      rgba(255,255,255,.045) !important;

    color:
      var(
        --region-secondary,
        #68dfad
      ) !important;

    font-style:normal;

    font-size:17px !important;
  }


  .portal-mobile-trainer-menu__grid
  .portal-nav-item span {
    display:block;

    width:100%;

    overflow:hidden;

    color:inherit;

    text-align:center;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:9px !important;

    font-weight:850;

    letter-spacing:.025em;

    text-transform:none !important;
  }


  .portal-mobile-trainer-menu__grid
  .portal-nav-item[aria-current] {
    color:#fff !important;

    border-color:
      color-mix(
        in srgb,
        var(--region-accent) 62%,
        transparent
      ) !important;

    background:
      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--region-accent) 14%,
          transparent
        ),
        rgba(255,255,255,.025)
      ) !important;

    box-shadow:
      inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--region-accent) 10%,
        transparent
      ),
      0 0 20px
      color-mix(
        in srgb,
        var(--region-accent) 8%,
        transparent
      ) !important;
  }


  .portal-mobile-trainer-menu__grid
  .portal-nav-item[aria-current] i {
    color:#fff !important;

    background:
      color-mix(
        in srgb,
        var(--region-accent) 23%,
        rgba(255,255,255,.035)
      ) !important;
  }



  /*
   * Existing Pokedex / Achievement / Activities alert badges
   * remain visible inside the new menu.
   */
  .portal-mobile-trainer-menu__grid
  .portal-nav-alert {
    position:absolute !important;

    top:6px !important;

    right:7px !important;

    z-index:5;
  }



  /* ==========================================================
     FIXED BOTTOM DOCK
     ========================================================== */

  .portal-mobile-menu-dock {
    display:flex;

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:2147484000;

    height:
      calc(
        66px +
        env(safe-area-inset-bottom, 0px)
      );

    align-items:flex-start;

    justify-content:center;

    padding-top:7px;

    background:
      linear-gradient(
        180deg,
        rgba(2,11,15,.90),
        rgba(1,7,10,.985)
      );

    border-top:
      1px solid
      rgba(255,255,255,.08);

    box-shadow:
      0 -10px 32px
      rgba(0,0,0,.36);
  }



  /* ==========================================================
     CENTRAL POKEBALL BUTTON
     ========================================================== */

  .portal-mobile-menu-toggle {
    position:relative;

    width:53px;
    height:53px;

    flex:0 0 53px;

    padding:0;

    border:
      3px solid
      rgba(245,255,251,.94);

    border-radius:50%;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background:
      linear-gradient(
        to bottom,
        var(
          --region-accent,
          #58dba2
        ) 0%,
        var(
          --region-accent,
          #58dba2
        ) 43%,
        #18252a 44%,
        #18252a 56%,
        #f1f7f4 57%,
        #f1f7f4 100%
      );

    box-shadow:
      0 4px 16px
      rgba(0,0,0,.55),
      0 0 20px
      color-mix(
        in srgb,
        var(--region-accent) 20%,
        transparent
      );

    transition:
      transform .20s ease,
      box-shadow .20s ease;
  }


  .portal-mobile-menu-toggle::after {
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:14px;
    height:14px;

    transform:
      translate(-50%,-50%);

    border:
      3px solid
      #172126;

    border-radius:50%;

    background:#f8fffc;

    box-shadow:
      0 0 0 2px
      rgba(255,255,255,.20);
  }


  .portal-mobile-menu-toggle:active {
    transform:
      scale(.92);
  }


  body.portal-mobile-menu-open
  .portal-mobile-menu-toggle {
    transform:
      rotate(180deg);

    box-shadow:
      0 4px 18px
      rgba(0,0,0,.55),
      0 0 28px
      color-mix(
        in srgb,
        var(--region-accent) 45%,
        transparent
      );
  }



  /* Alert on the central ball. */
  .portal-mobile-menu-toggle__badge {
    position:absolute;

    z-index:6;

    top:-4px;
    right:-5px;

    display:none;

    min-width:19px;
    height:19px;

    padding:0 5px;

    align-items:center;
    justify-content:center;

    border:
      2px solid
      #fff;

    border-radius:999px;

    background:#ff334f;

    color:#fff;

    box-shadow:
      0 0 12px
      rgba(255,45,75,.76);

    font-size:10px;

    font-weight:1000;
  }


  .portal-mobile-menu-toggle__badge.is-active {
    display:flex;
  }



  /*
   * Very narrow devices.
   */
  @media (max-width:360px) {

    .portal-mobile-trainer-menu {
      left:7px;
      right:7px;

      padding:
        13px 9px
        15px;
    }


    .portal-mobile-trainer-menu__grid {
      gap:6px;
    }


    .portal-mobile-trainer-menu__grid
    .portal-nav-item {
      min-height:71px !important;
    }


    .portal-mobile-trainer-menu__grid
    .portal-nav-item span {
      font-size:8px !important;
    }

  }

}