/*
 * ============================================================
 * BOOM UNIFIED SHELL V1
 * Shared visual language for Portal and standalone WORLD.
 * ============================================================
 */

:root {
  --boom-shell-bg: rgba(4, 14, 20, .97);
  --boom-shell-bg-2: rgba(6, 20, 27, .96);
  --boom-shell-line: rgba(78, 202, 215, .18);
  --boom-shell-text: #eff8fa;
  --boom-shell-muted: #748a93;
  --boom-shell-cyan: #55dce9;
  --boom-shell-red: #ff5d76;
}

/* =========================
   PORTAL BRAND
   ========================= */

.portal-context {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 15px;
}

.portal-world-brand {
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.portal-world-brand__ball {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
  background:
    linear-gradient(
      to bottom,
      #ff617a 0 43%,
      #101820 44% 56%,
      #f5fafb 57% 100%
    );
  box-shadow:
    0 0 0 4px rgba(85,220,233,.06),
    0 0 22px rgba(85,220,233,.09);
}

.portal-world-brand__ball::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: #101820;
}

.portal-world-brand__ball i {
  position: absolute;
  width: 14px;
  height: 14px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 3px solid #101820;
  border-radius: 50%;
  background: #f7fbfc;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}

.portal-world-brand__copy {
  min-width: 0;
  display: grid;
}

.portal-world-brand__copy > b {
  color: var(--boom-shell-text);
  font: 950 1rem/1 Orbitron, sans-serif;
  letter-spacing: .045em;
  white-space: nowrap;
}

.portal-world-brand__copy em {
  color: var(--boom-shell-red);
  font-style: normal;
}

.portal-world-brand__copy small {
  margin-top: 6px;
  color: var(--boom-shell-muted);
  font: 850 .5rem/1 Orbitron, sans-serif;
  letter-spacing: .105em;
}

.portal-region-status {
  min-width: 0;
  padding-left: 15px;
  border-left: 1px solid rgba(92, 182, 193, .14);
}

.portal-region-status .portal-context__eyebrow {
  font-size: .4rem;
}

.portal-region-status .portal-region-button {
  gap: .45rem;
}

.portal-region-status .portal-region-button > span {
  font-size: .75rem;
}

.portal-region-status .portal-region-button small {
  max-width: 90px;
  overflow: hidden;
  font-size: .55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   SHARED DESKTOP TOP BAR
   ========================= */

@media (min-width: 901px) {
  .portal-topbar {
    min-height: 76px !important;
    padding: 0 clamp(14px, 1.6vw, 28px) !important;
    gap: 16px !important;
    border-bottom: 1px solid var(--boom-shell-line) !important;
    background:
      linear-gradient(
        90deg,
        rgba(4,14,20,.985),
        rgba(6,19,26,.97) 52%,
        rgba(9,14,22,.98)
      ) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.2);
  }

  .portal-primary-nav,
  body.world-v5 .world-v5-network-nav {
    min-width: 0;
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    gap: 2px !important;
  }

  .portal-primary-nav__item,
  body.world-v5 .world-v5-network-nav a {
    min-width: 72px !important;
    min-height: 75px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-inline: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7d929a !important;
    text-decoration: none;
    font: 900 .49rem/1 Orbitron, sans-serif !important;
    letter-spacing: .06em !important;
    transition:
      color .15s ease,
      background .15s ease,
      box-shadow .15s ease;
  }

  .portal-primary-nav__item i,
  body.world-v5 .world-v5-network-nav a i {
    color: #78dce7 !important;
    font-size: .88rem !important;
    font-style: normal;
    line-height: 1;
  }

  .portal-primary-nav__item span,
  body.world-v5 .world-v5-network-nav a span {
    color: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    white-space: nowrap;
  }

  .portal-primary-nav__item:hover,
  .portal-primary-nav__item[aria-current],
  body.world-v5 .world-v5-network-nav a:hover,
  body.world-v5 .world-v5-network-nav a[aria-current] {
    color: #eff9fa !important;
    background:
      linear-gradient(
        180deg,
        transparent 10%,
        rgba(71,202,216,.08)
      ) !important;
    border-inline-color: rgba(85,220,233,.12) !important;
    box-shadow:
      inset 0 -3px #4edbe8 !important;
    transform: none !important;
  }

  .portal-primary-nav__item[aria-current] i,
  body.world-v5 .world-v5-network-nav a[aria-current] i {
    color: #8cf3fb !important;
    text-shadow: 0 0 12px rgba(85,220,233,.25);
  }

  /* Portal secondary row becomes a slim context strip. */
  .portal-command-dock {
    min-height: 44px !important;
    padding: 5px 14px !important;
    gap: 3px !important;
    border-bottom: 1px solid rgba(72,176,189,.1) !important;
    background: rgba(4,14,20,.94) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  }

  .portal-command-dock__label {
    margin-right: 8px !important;
    color: #546c74 !important;
    font-size: .38rem !important;
  }

  .portal-command-dock a {
    min-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    color: #748a93 !important;
    font-size: .54rem !important;
  }

  .portal-command-dock a:hover,
  .portal-command-dock a[aria-current] {
    color: #eaf7f8 !important;
    border-color: rgba(84,214,226,.18) !important;
    background: rgba(84,214,226,.055) !important;
  }

  /* WORLD uses the same full-width chrome on desktop. */
  body.world-v5 .world-command {
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 clamp(14px, 1.6vw, 28px) !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--boom-shell-line) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(
        90deg,
        rgba(4,14,20,.985),
        rgba(6,19,26,.97) 52%,
        rgba(9,14,22,.98)
      ) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.2) !important;
  }

  body.world-v5 .world-command::after {
    display: none !important;
  }

  body.world-v5 .world-brand {
    min-width: 210px !important;
    grid-template-columns: 46px auto !important;
  }

  body.world-v5 .world-brand-copy strong {
    font-size: 1rem !important;
  }

  body.world-v5 .world-brand-copy strong b {
    color: var(--boom-shell-red) !important;
  }

  body.world-v5 .world-ball {
    width: 46px !important;
    height: 46px !important;
    border-color: rgba(255,255,255,.86) !important;
    box-shadow:
      0 0 0 4px rgba(85,220,233,.06),
      0 0 22px rgba(85,220,233,.09) !important;
  }

  body.world-v5 .world-telemetry {
    display: none !important;
  }

  body.world-v5 .world-v5-network-nav {
    grid-column: auto !important;
    width: 100%;
  }

  body.world-v5 .world-v5-network-nav a {
    width: auto !important;
  }

  body.world-v5 .wrap {
    margin-top: 12px !important;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  .portal-world-brand {
    min-width: 52px;
  }

  .portal-world-brand__copy,
  .portal-region-status {
    display: none;
  }

  .portal-primary-nav__item,
  body.world-v5 .world-v5-network-nav a {
    min-width: 54px !important;
    padding-inline: 7px !important;
  }

  .portal-primary-nav__item span,
  body.world-v5 .world-v5-network-nav a span {
    display: none;
  }

  body.world-v5 .world-brand-copy {
    display: none !important;
  }

  body.world-v5 .world-brand {
    min-width: 52px !important;
    grid-template-columns: 46px !important;
  }
}

/* =========================
   PORTAL MOBILE
   ========================= */

@media (max-width: 900px) {
  .portal-context {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .portal-world-brand {
    min-width: 32px;
    display: flex;
    flex: 0 0 32px;
  }

  .portal-world-brand__ball {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-width: 2px;
  }

  .portal-world-brand__ball i {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }

  .portal-world-brand__copy {
    display: none;
  }

  .portal-region-status {
    min-width: 0;
    padding-left: 8px;
    border-left: 1px solid rgba(92, 182, 193, .12);
  }

  .portal-region-status .portal-context__eyebrow {
    display: none;
  }

  .portal-region-status .portal-region-button > span {
    font-size: .68rem;
  }

  .portal-region-status .portal-region-button small {
    display: none;
  }
}


/* ============================================================
   WORLD ACTIVE PARTY EVERYWHERE V1
   Standalone WORLD only. Portal embed already owns its party.
   ============================================================ */

body.world-v5
.world-v5-party-rail {
  position: sticky;
  top: 0;
  z-index: 4900;
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns:
    minmax(118px, .16fr)
    minmax(0, 1fr)
    minmax(110px, .14fr);
  gap: 12px;
  align-items: center;
  padding:
    8px
    clamp(14px, 1.6vw, 28px);
  border-bottom:
    1px solid
    rgba(80, 204, 216, .14);
  background:
    linear-gradient(
      90deg,
      rgba(4, 16, 22, .985),
      rgba(5, 20, 27, .97) 54%,
      rgba(8, 14, 21, .985)
    );
  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, .16);
  backdrop-filter:
    blur(14px);
}

body.world-v5
.world-v5-party-rail__title {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body.world-v5
.world-v5-party-rail__title small {
  color:
    #5f7b84;
  font:
    900 .4rem/1
    Orbitron,
    sans-serif;
  letter-spacing:
    .1em;
}

body.world-v5
.world-v5-party-rail__title b {
  color:
    #edf8fa;
  font:
    950 .72rem/1
    Orbitron,
    sans-serif;
  letter-spacing:
    .05em;
}

body.world-v5
.world-v5-party-rail__slots {
  min-width: 0;
}

body.world-v5
.world-v5-party-rail
#party-bar {
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 6px !important;
  flex: none !important;
  flex-wrap: nowrap !important;
}

body.world-v5
.world-v5-party-rail
#party-bar .mon {
  position: relative;
  width: auto !important;
  min-width: 0;
  min-height: 66px;
  display: grid !important;
  grid-template-columns:
    46px
    minmax(0, 1fr);
  grid-template-rows:
    auto
    auto
    auto;
  align-items: center;
  gap: 1px 8px;
  overflow: hidden;
  padding: 6px 8px !important;
  border:
    1px solid
    rgba(79, 179, 191, .14) !important;
  border-radius:
    10px !important;
  background:
    radial-gradient(
      circle at 25% 50%,
      rgba(74, 215, 226, .08),
      transparent 48%
    ),
    rgba(4, 15, 21, .86) !important;
  color:
    #edf8fa !important;
  text-align:
    left !important;
  box-shadow:
    inset 0 1px
    rgba(255, 255, 255, .02);
}

body.world-v5
.world-v5-party-rail
#party-bar .mon:first-child:not(.empty) {
  border-color:
    rgba(83, 224, 235, .36) !important;
  background:
    radial-gradient(
      circle at 25% 50%,
      rgba(74, 224, 235, .14),
      transparent 52%
    ),
    rgba(4, 18, 24, .92) !important;
  box-shadow:
    inset 3px 0
    #54dfe9,
    0 0 18px
    rgba(84, 223, 233, .05);
}

body.world-v5
.world-v5-party-rail
#party-bar .mon:first-child:not(.empty)::after {
  content:
    "PARTNER";
  position:
    absolute;
  right:
    5px;
  top:
    4px;
  color:
    #62e6ef;
  font:
    900 .29rem/1
    Orbitron,
    sans-serif;
  letter-spacing:
    .08em;
}

body.world-v5
.world-v5-party-rail
#party-bar .mon img {
  grid-column:
    1;
  grid-row:
    1 / 4;
  width:
    44px !important;
  height:
    44px !important;
  padding:
    2px;
  object-fit:
    contain;
  image-rendering:
    auto !important;
  filter:
    drop-shadow(
      0 7px 8px
      rgba(0, 0, 0, .28)
    );
}

body.world-v5
.world-v5-party-rail
#party-bar .mon .name {
  min-width:
    0;
  overflow:
    hidden;
  color:
    #eef8fa;
  font:
    900 .49rem/1.05
    Orbitron,
    sans-serif;
  text-overflow:
    ellipsis;
  white-space:
    nowrap;
}

body.world-v5
.world-v5-party-rail
#party-bar .mon .lv {
  color:
    #70dfe8 !important;
  font:
    850 .43rem/1
    Orbitron,
    sans-serif !important;
}

body.world-v5
.world-v5-party-rail
#party-bar .mon .hp {
  color:
    #6e8790 !important;
  font:
    800 .38rem/1
    Orbitron,
    sans-serif !important;
}

body.world-v5
.world-v5-party-rail
#party-bar .mon.fainted {
  opacity:
    .48;
  filter:
    grayscale(.65);
  border-color:
    rgba(255, 93, 118, .25)
    !important;
}

body.world-v5
.world-v5-party-rail
#party-bar .mon.empty {
  min-height:
    66px;
  display:
    grid !important;
  place-items:
    center;
  grid-template-columns:
    1fr;
  color:
    rgba(255,255,255,.16)
    !important;
  font-size:
    1.1rem;
}

body.world-v5
.world-v5-party-rail
#party-bar .evo-tip,
body.world-v5
.world-v5-party-rail
#party-bar .evo-mini {
  display:
    none !important;
}

body.world-v5
.world-v5-party-rail__meta {
  display:
    grid;
  justify-items:
    end;
  gap:
    6px;
}

body.world-v5
.world-v5-party-rail__meta strong {
  color:
    #eff8fa;
  font:
    950 .72rem/1
    Orbitron,
    sans-serif;
}

body.world-v5
.world-v5-party-rail__meta button {
  min-height:
    32px;
  padding:
    0 10px;
  border:
    1px solid
    rgba(82, 218, 229, .24);
  border-radius:
    8px;
  background:
    rgba(66, 196, 208, .06);
  color:
    #8ee7ee;
  font:
    900 .39rem/1
    Orbitron,
    sans-serif;
  letter-spacing:
    .06em;
  cursor:
    pointer;
}

body.world-v5
.world-v5-party-rail__meta button:hover {
  border-color:
    rgba(95, 232, 241, .48);
  background:
    rgba(66, 196, 208, .11);
  color:
    #effcfd;
}

body.world-v5
.world-v5-party-rail.is-empty
.world-v5-party-rail__title b {
  color:
    #768b93;
}

/*
 * Portal already renders DIN PARTY in the parent shell.
 * Never duplicate this rail inside its iframe.
 */
body.boom-portal-embedded
#world-v5-party-rail {
  display:
    none !important;
}

/*
 * Standalone mobile already has the compact six-slot
 * party strip. Keep the game viewport clean.
 */
@media (max-width: 900px),
       (pointer: coarse) {
  body.world-v5
  .world-v5-party-rail {
    display:
      none !important;
  }
}

@media (min-width: 901px)
and (max-width: 1240px) {
  body.world-v5
  .world-v5-party-rail {
    grid-template-columns:
      90px
      minmax(0, 1fr)
      86px;
    gap:
      7px;
    padding-inline:
      10px;
  }

  body.world-v5
  .world-v5-party-rail__title small {
    display:
      none;
  }

  body.world-v5
  .world-v5-party-rail
  #party-bar .mon {
    grid-template-columns:
      38px
      minmax(0, 1fr);
    gap:
      1px 5px;
    padding:
      5px !important;
  }

  body.world-v5
  .world-v5-party-rail
  #party-bar .mon img {
    width:
      36px !important;
    height:
      36px !important;
  }

  body.world-v5
  .world-v5-party-rail
  #party-bar .mon .hp {
    display:
      none;
  }

  body.world-v5
  .world-v5-party-rail__meta button {
    padding-inline:
      6px;
  }
}