/* =========================================================
   BOOM WORLD V5
   WORLD JOURNAL + SOCIETY
   ========================================================= */


/* =========================================================
   SHADE
   ========================================================= */

#world-v5-overlay-shade {
  position: fixed;

  inset: 0;

  z-index: 100190;

  display: none;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(55, 205, 222, .08),
      transparent 34%
    ),
    rgba(2, 7, 10, .78);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


#world-v5-overlay-shade.show {
  display: block;
}


/* =========================================================
   WORLD JOURNAL
   ========================================================= */

body.world-v5
#boom-mmo6-journal {
  position: fixed !important;

  z-index: 100210 !important;

  top: 50% !important;
  left: 50% !important;

  right: auto !important;
  bottom: auto !important;

  width:
    min(
      720px,
      calc(100vw - 30px)
    ) !important;

  max-width:
    none !important;

  max-height:
    calc(100dvh - 30px) !important;

  margin: 0 !important;

  padding:
    0 16px 16px !important;

  overflow:
    auto !important;

  display:
    none !important;

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

  border:
    1px solid
    var(
      --wv5-accent-line,
      rgba(80, 218, 232, .42)
    ) !important;

  border-radius:
    19px !important;

  background:
    radial-gradient(
      circle at 8% 0%,
      var(
        --wv5-accent-soft,
        rgba(70, 215, 230, .09)
      ),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(8, 20, 28, .995),
      rgba(4, 11, 16, .995)
    ) !important;

  box-shadow:
    0 32px 100px
    rgba(0, 0, 0, .66),
    inset 0 1px
    rgba(255, 255, 255, .025) !important;

  color:
    #e8f1f4 !important;

  font-family:
    'Rajdhani',
    system-ui,
    sans-serif !important;

  scrollbar-width:
    thin;

  scrollbar-color:
    #27505d
    #061218;
}


body.world-v5
#boom-mmo6-journal.open {
  display:
    block !important;
}


/* =========================================================
   JOURNAL HEADER
   ========================================================= */

.world-v5-journal-chrome {
  min-height:
    90px;

  margin:
    0 -16px 14px;

  padding:
    14px 15px;

  position:
    sticky;

  top: 0;

  z-index:
    8;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    42px;

  gap:
    12px;

  align-items:
    center;

  border-bottom:
    1px solid
    #1c3945;

  background:
    linear-gradient(
      110deg,
      rgba(9, 24, 32, .985),
      rgba(5, 13, 19, .985)
    );

  backdrop-filter:
    blur(18px);
}


.world-v5-journal-brand {
  min-width: 0;
}


.world-v5-journal-brand > span {
  display:
    block;

  color:
    var(
      --wv5-accent,
      #58dbe8
    );

  font:
    900 .47rem/1
    'Orbitron',
    sans-serif;

  letter-spacing:
    .09em;
}


.world-v5-journal-brand > strong {
  display:
    block;

  margin-top:
    5px;

  color:
    #edf5f7;

  font:
    900 1rem/1
    'Orbitron',
    sans-serif;

  letter-spacing:
    .045em;
}


.world-v5-journal-brand > small {
  display:
    block;

  margin-top:
    6px;

  overflow:
    hidden;

  color:
    #758d98;

  font:
    800 .56rem/1.15
    'Rajdhani',
    sans-serif;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.world-v5-journal-status {
  min-width:
    105px;

  padding:
    9px 11px;

  border:
    1px solid
    #254451;

  border-radius:
    10px;

  background:
    #06151d;

  text-align:
    center;
}


.world-v5-journal-status > span {
  display:
    block;

  color:
    #687f89;

  font:
    900 .42rem/1
    'Orbitron',
    sans-serif;

  letter-spacing:
    .075em;
}


.world-v5-journal-status > b {
  display:
    block;

  margin-top:
    6px;

  color:
    var(
      --wv5-accent,
      #5ce0ed
    );

  font:
    900 .88rem/1
    'Orbitron',
    sans-serif;
}


.world-v5-journal-close,
.world-v5-soc-close {
  width:
    40px !important;

  height:
    40px !important;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center;

  border:
    1px solid
    #28515e !important;

  border-radius:
    10px !important;

  background:
    #06171f !important;

  color:
    #65ddec !important;

  font:
    900 1rem/1
    'Orbitron',
    sans-serif !important;

  cursor:
    pointer;

  box-shadow:
    none !important;
}


.world-v5-journal-close:hover,
.world-v5-soc-close:hover {
  border-color:
    var(
      --wv5-accent,
      #5bdce9
    ) !important;

  background:
    var(
      --wv5-accent-soft,
      rgba(70, 215, 230, .10)
    ) !important;
}


/* old duplicated title + retired page link */

body.world-v5
#boom-mmo6-journal
.world-v5-old-journal-title,

body.world-v5
#boom-mmo6-journal
.world-v5-retired-mmorpg-link,

body.world-v5
#boom-mmo6-journal
a[href="/mmorpg"],

body.world-v5
#boom-mmo6-journal
[data-retired-mmorpg-link],

body.world-v5
#boom-mmo6-journal
.m6btn {
  display:
    none !important;
}


/* old level element is used as DATA by V5 */

body.world-v5
#boom-mmo6-journal
#m6lvl {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0 0 0 0) !important;

  opacity:
    0 !important;

  pointer-events:
    none !important;
}


/* =========================================================
   JOURNAL REGION / PROGRESS
   ========================================================= */

body.world-v5
#boom-mmo6-journal
#m6region {
  margin:
    0 2px 11px !important;

  padding:
    8px 10px !important;

  border:
    1px solid
    #1d3844 !important;

  border-radius:
    9px !important;

  background:
    rgba(5, 18, 25, .70) !important;

  color:
    #7f96a0 !important;

  font:
    800 .61rem/1.2
    'Rajdhani',
    sans-serif !important;
}


body.world-v5
#boom-mmo6-journal
progress {
  width:
    100%;

  height:
    7px;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    999px;

  background:
    #0a1a22;
}


body.world-v5
#boom-mmo6-journal
progress::-webkit-progress-bar {
  background:
    #0a1a22;
}


body.world-v5
#boom-mmo6-journal
progress::-webkit-progress-value {
  background:
    linear-gradient(
      90deg,
      var(
        --wv5-accent,
        #58dce9
      ),
      #8e6cff
    );
}


body.world-v5
#boom-mmo6-journal
[class*="m6bar"] {
  overflow:
    hidden;

  border-radius:
    999px !important;

  background:
    #0a1a22 !important;
}


body.world-v5
#boom-mmo6-journal
[class*="m6bar"] > i {
  background:
    linear-gradient(
      90deg,
      var(
        --wv5-accent,
        #58dce9
      ),
      #8b69ff
    ) !important;
}


/* =========================================================
   DAILY OBJECTIVES
   ========================================================= */

body.world-v5
#boom-mmo6-journal
#m6quests {
  margin-top:
    12px !important;

  display:
    grid !important;

  gap:
    7px !important;
}


body.world-v5
#boom-mmo6-journal
.m6quest {
  min-height:
    65px;

  padding:
    10px 11px !important;

  display:
    grid !important;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto !important;

  gap:
    9px !important;

  align-items:
    center !important;

  border:
    1px solid
    #1d3742 !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      #071820,
      #051219
    ) !important;
}


body.world-v5
#boom-mmo6-journal
.m6quest > div:first-child {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #294a56;

  border-radius:
    8px;

  background:
    #06141b;

  color:
    var(
      --wv5-accent,
      #5bdce9
    );
}


body.world-v5
#boom-mmo6-journal
.m6quest b {
  display:
    block;

  color:
    #e2edf0 !important;

  font:
    900 .62rem/1.1
    'Orbitron',
    sans-serif !important;
}


body.world-v5
#boom-mmo6-journal
.m6quest span {
  display:
    block;

  margin-top:
    4px;

  color:
    #728a94 !important;

  font-size:
    .62rem !important;

  font-weight:
    700;
}


body.world-v5
#boom-mmo6-journal
.m6quest em {
  min-width:
    53px;

  padding:
    6px 7px;

  border:
    1px solid
    rgba(75, 223, 169, .24);

  border-radius:
    999px;

  background:
    rgba(55, 211, 160, .07);

  color:
    #55e3ad !important;

  font:
    900 .54rem/1
    'Orbitron',
    sans-serif !important;

  text-align:
    center;

  font-style:
    normal !important;
}


body.world-v5
#boom-mmo6-journal
.world-v5-journal-reward {
  margin-top:
    11px !important;

  padding:
    11px 12px !important;

  border:
    1px solid
    rgba(232, 187, 58, .38) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      100deg,
      rgba(112, 81, 12, .18),
      rgba(6, 17, 23, .92)
    ) !important;

  color:
    #f1cd5b !important;

  font-weight:
    850 !important;
}


/* =========================================================
   SOCIETY V5 DIALOG
   ========================================================= */

body.world-v5
#boom-society-toggle {
  display:
    none !important;
}


body.world-v5
#boom-society-panel {
  position:
    fixed !important;

  z-index:
    100210 !important;

  top:
    50% !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    auto !important;

  width:
    min(
      720px,
      calc(100vw - 30px)
    ) !important;

  max-width:
    none !important;

  max-height:
    calc(100dvh - 30px) !important;

  margin:
    0 !important;

  padding:
    12px !important;

  overflow:
    auto !important;

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

  border:
    1px solid
    var(
      --wv5-accent-line,
      rgba(80, 218, 232, .42)
    ) !important;

  border-radius:
    18px !important;

  background:
    radial-gradient(
      circle at 10% 0%,
      var(
        --wv5-accent-soft,
        rgba(70, 215, 230, .09)
      ),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(8, 20, 28, .99),
      rgba(4, 11, 16, .99)
    ) !important;

  box-shadow:
    0 32px 100px
    rgba(0, 0, 0, .68) !important;

  color:
    #e7f1f4 !important;

  scrollbar-width:
    thin;

  scrollbar-color:
    #28505c
    #061218;
}


body.world-v5
#boom-society-panel
.soc-head {
  min-height:
    61px;

  margin:
    -12px -12px 11px !important;

  padding:
    11px 12px !important;

  position:
    sticky;

  top:
    -12px;

  z-index:
    6;

  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    40px !important;

  gap:
    9px;

  align-items:
    center !important;

  border-bottom:
    1px solid
    #1d3944;

  background:
    rgba(6, 17, 23, .97);

  backdrop-filter:
    blur(16px);
}


body.world-v5
#boom-society-panel
.soc-head > b {
  color:
    #e5f0f3 !important;

  font:
    900 .74rem/1
    'Orbitron',
    sans-serif !important;
}


body.world-v5
#boom-society-panel
.soc-head >
.soc-muted {
  color:
    var(
      --wv5-accent,
      #5adce9
    ) !important;

  font:
    900 .51rem/1
    'Orbitron',
    sans-serif !important;
}


body.world-v5
#boom-society-panel
.soc-card {
  margin:
    7px 0 !important;

  padding:
    11px !important;

  border:
    1px solid
    #1d3742 !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      #071820,
      #051219
    ) !important;
}


body.world-v5
#boom-society-panel
.soc-row {
  gap:
    9px !important;
}


body.world-v5
#boom-society-panel
.soc-btn {
  min-height:
    34px;

  border:
    1px solid
    #27505c !important;

  border-radius:
    8px !important;

  background:
    #071a22 !important;

  color:
    #65ddea !important;

  font:
    900 .54rem/1
    'Orbitron',
    sans-serif !important;
}


body.world-v5
#boom-society-panel
.soc-btn:not(:disabled):hover {
  border-color:
    var(
      --wv5-accent,
      #5bdce9
    ) !important;

  background:
    var(
      --wv5-accent-soft,
      rgba(70, 215, 230, .09)
    ) !important;
}


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

@media
(max-width: 700px),
(pointer: coarse) {

  body.world-v5
  #boom-mmo6-journal,

  body.world-v5
  #boom-society-panel {
    top:
      8px !important;

    left:
      8px !important;

    width:
      calc(100vw - 16px) !important;

    max-height:
      calc(100dvh - 16px) !important;

    transform:
      none !important;

    border-radius:
      15px !important;
  }


  .world-v5-journal-chrome {
    min-height:
      76px;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      38px;

    gap:
      7px;

    padding:
      10px;
  }


  .world-v5-journal-brand > strong {
    font-size:
      .77rem;
  }


  .world-v5-journal-brand > span {
    font-size:
      .39rem;
  }


  .world-v5-journal-status {
    min-width:
      75px;

    padding:
      7px;
  }


  .world-v5-journal-status > span {
    font-size:
      .34rem;
  }


  .world-v5-journal-status > b {
    font-size:
      .69rem;
  }


  .world-v5-journal-close,
  .world-v5-soc-close {
    width:
      36px !important;

    height:
      36px !important;
  }


  body.world-v5
  #boom-mmo6-journal
  .m6quest {
    grid-template-columns:
      29px
      minmax(0, 1fr)
      auto !important;

    padding:
      9px !important;
  }


  body.world-v5
  #boom-mmo6-journal
  .m6quest > div:first-child {
    width:
      28px;

    height:
      28px;
  }


  body.world-v5
  #boom-society-panel
  .soc-head {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      36px !important;
  }

}