/* =========================================================
   BOOM WORLD V5
   TRAINER NETWORK GAME CLIENT
   UI-only layer. Game engine is untouched.
   ========================================================= */

:root {
  --wv5-accent: #f06468;
  --wv5-accent-soft: rgba(240,100,104,.16);
  --wv5-accent-line: rgba(240,100,104,.42);
  --wv5-secondary: #5fe0ed;

  --wv5-bg: #05090d;
  --wv5-panel: #091219;
  --wv5-panel-2: #0b1720;
  --wv5-line: #1e3440;
  --wv5-muted: #718690;
  --wv5-text: #edf5f7;
}


body[data-world-region="kanto"] {
  --wv5-accent: #f06468;
  --wv5-accent-soft: rgba(240,100,104,.15);
  --wv5-accent-line: rgba(240,100,104,.42);
  --wv5-secondary: #63ddea;
}


body[data-world-region="johto"] {
  --wv5-accent: #e6bd55;
  --wv5-accent-soft: rgba(230,189,85,.14);
  --wv5-accent-line: rgba(230,189,85,.42);
  --wv5-secondary: #6fc58a;
}


body[data-world-region="hoenn"] {
  --wv5-accent: #4ce1b5;
  --wv5-accent-soft: rgba(76,225,181,.14);
  --wv5-accent-line: rgba(76,225,181,.42);
  --wv5-secondary: #53aef3;
}


/* =========================================================
   PAGE
   ========================================================= */

body.boom-world.world-v5 {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 0 38px !important;
  display: block !important;

  background:
    radial-gradient(
      circle at 12% -10%,
      var(--wv5-accent-soft),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(71,217,235,.07),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #080c11,
      #030709 72%
    ) !important;

  color: var(--wv5-text);
}


body.world-v5::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.012) 1px,
      transparent 1px
    );

  background-size:
    48px 48px;
}


body.world-v5 > h1,
body.world-v5 > .sub {
  display: none !important;
}


/* =========================================================
   COMMAND HEADER
   ========================================================= */

body.world-v5 .world-command {
  width:
    min(
      1580px,
      calc(100vw - 34px)
    ) !important;

  min-height: 86px !important;

  margin:
    16px auto 14px !important;

  padding:
    13px 16px !important;

  position: relative !important;
  inset: auto !important;

  display: grid !important;

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

  gap: 15px !important;

  align-items: center !important;

  border:
    1px solid
    var(--wv5-accent-line) !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      120deg,
      rgba(15,18,24,.97),
      rgba(7,16,23,.97) 58%,
      rgba(13,11,19,.97)
    ) !important;

  box-shadow:
    0 18px 60px
    rgba(0,0,0,.3),
    inset 0 1px
    rgba(255,255,255,.035) !important;

  backdrop-filter:
    blur(16px);

  z-index: 5000 !important;
}


body.world-v5
.world-command::after {
  content: '';
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: -1px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--wv5-accent),
      transparent
    );

  opacity: .45;
}


body.world-v5 .world-brand {
  min-width: 220px;
  display: grid !important;

  grid-template-columns:
    46px auto;

  grid-template-rows:
    auto auto;

  gap:
    0 11px;

  align-items: center;
}


body.world-v5 .world-ball {
  grid-row:
    1 / 3;

  width: 46px !important;
  height: 46px !important;

  border:
    2px solid
    rgba(255,255,255,.78) !important;

  box-shadow:
    0 0 0 5px
    var(--wv5-accent-soft),
    0 0 20px
    var(--wv5-accent-soft) !important;
}


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


body.world-v5
.world-brand-copy strong {
  display: block;

  color: #eff5f7 !important;

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

  letter-spacing:
    .045em;
}


body.world-v5
.world-brand-copy strong b {
  color:
    var(--wv5-accent) !important;
}


body.world-v5
#world-trainer {
  display: block !important;

  margin-top: 5px;

  color:
    #80949e !important;

  font:
    850 .58rem/1
    'Rajdhani',
    sans-serif !important;

  letter-spacing:
    .12em;
}


body.world-v5
.world-version {
  position: absolute !important;

  left: 74px;
  top: 9px;

  padding:
    2px 5px;

  border:
    1px solid
    var(--wv5-accent-line);

  border-radius:
    4px;

  color:
    var(--wv5-accent) !important;

  background:
    rgba(0,0,0,.35);

  font-size:
    .42rem !important;

  letter-spacing:
    .12em;
}


/* =========================================================
   TELEMETRY
   ========================================================= */

body.world-v5
.world-telemetry {
  min-width: 0;

  display: grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(110px,1fr)
    ) !important;

  gap: 6px !important;
}


body.world-v5
.world-chip {
  min-width: 0 !important;
  min-height: 51px;

  padding:
    8px 10px !important;

  display: flex !important;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid
    #203641 !important;

  border-radius:
    10px !important;

  background:
    rgba(4,13,19,.65) !important;
}


body.world-v5
.world-chip:first-child {
  display: none !important;
}


body.world-v5
.world-chip span {
  overflow: hidden;

  color:
    #58707b !important;

  font-size:
    .45rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    .08em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


body.world-v5
.world-chip b {
  margin-top: 3px;

  overflow: hidden;

  color:
    #dbe9ee !important;

  font-size:
    .62rem !important;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


body.world-v5
.world-chip:nth-child(2)
b {
  color:
    var(--wv5-accent) !important;
}


/* =========================================================
   PORTAL NETWORK NAV
   ========================================================= */

.world-v5-network-nav {
  display: grid;

  grid-template-columns:
    repeat(4,auto);

  gap: 5px;
}


.world-v5-network-nav a {
  min-width: 66px;
  min-height: 51px;

  padding:
    7px 9px;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 4px;

  border:
    1px solid
    #243844;

  border-radius:
    10px;

  background:
    rgba(4,12,18,.68);

  color:
    #8398a2;

  text-decoration:
    none;

  font-size:
    .48rem;

  font-weight:
    950;

  letter-spacing:
    .06em;

  transition:
    .15s ease;
}


.world-v5-network-nav a span {
  color:
    var(--wv5-accent);

  font-size:
    .75rem;
}


.world-v5-network-nav a:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--wv5-accent-line);

  color:
    #eef6f8;

  background:
    var(--wv5-accent-soft);
}


/*
 * Legacy quick buttons stay in DOM because existing
 * JS depends on them. Desktop uses our proxy controls.
 */
body.world-v5
.world-command >
.world-quick {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   MAIN GAME SHELL
   ========================================================= */

body.world-v5 .wrap {
  width:
    min(
      1580px,
      calc(100vw - 34px)
    ) !important;

  max-width:
    none !important;

  margin:
    0 auto !important;

  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(330px,380px);

  gap: 14px !important;

  align-items: start;
}


.world-v5-stage {
  min-width: 0;

  display: grid;

  gap: 10px;
}


.world-v5-side {
  min-width: 0;

  display: grid;

  gap: 10px;

  align-content:
    start;
}


/* =========================================================
   GAME FRAME
   ========================================================= */

body.world-v5
#game-frame {
  width: 100% !important;

  max-width:
    none !important;

  margin: 0 !important;

  aspect-ratio:
    320 / 288 !important;

  position: relative !important;

  border:
    1px solid
    var(--wv5-accent-line) !important;

  border-radius:
    20px !important;

  overflow:
    hidden !important;

  background:
    #050d12 !important;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.38),
    0 0 0 1px
    rgba(255,255,255,.02),
    inset 0 0 45px
    rgba(0,0,0,.16) !important;
}


body.world-v5
#game-frame::after {
  border-radius:
    inherit;
}


body.world-v5
#game {
  width:
    100% !important;

  height:
    100% !important;
}


/* Existing map telemetry becomes minimal */
body.world-v5
.world-map-frame {
  inset:
    13px 13px auto 13px !important;

  height:
    auto !important;

  padding: 0 !important;

  display: flex !important;

  justify-content:
    space-between;

  align-items:
    center;

  border: 0 !important;

  background:
    transparent !important;

  pointer-events:
    none;
}


body.world-v5
.wmf-live,
body.world-v5
.wmf-coords {
  position:
    static !important;

  padding:
    6px 9px !important;

  border:
    1px solid
    rgba(0,0,0,.22);

  border-radius:
    999px;

  background:
    rgba(3,12,16,.68);

  backdrop-filter:
    blur(8px);

  color:
    #dbe8ec !important;

  box-shadow:
    0 6px 16px
    rgba(0,0,0,.15);
}


body.world-v5
.wmf-live {
  color:
    var(--wv5-accent) !important;
}


/* =========================================================
   COMMAND BAR
   ========================================================= */

.world-v5-toolbar {
  min-height: 73px;

  padding:
    9px 10px;

  display: grid;

  grid-template-columns:
    minmax(165px,.7fr)
    minmax(0,2fr);

  gap: 10px;

  align-items:
    stretch;

  border:
    1px solid
    #1d3541;

  border-radius:
    15px;

  background:
    linear-gradient(
      110deg,
      rgba(8,20,28,.96),
      rgba(5,13,19,.96)
    );

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.2);
}


.world-v5-location {
  padding:
    7px 12px;

  display: flex;

  flex-direction:
    column;

  justify-content:
    center;

  border-right:
    1px solid
    #1e3641;
}


.world-v5-location span {
  color:
    #5d7580;

  font-size:
    .45rem;

  font-weight:
    950;

  letter-spacing:
    .1em;
}


.world-v5-location strong {
  margin-top: 3px;

  color:
    var(--wv5-accent);

  font:
    900 .73rem/1.1
    'Orbitron',
    'Rajdhani',
    sans-serif;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.world-v5-location small {
  margin-top: 3px;

  color:
    #80939d;

  font-size:
    .48rem;

  font-weight:
    850;
}


.world-v5-actions {
  display: grid;

  grid-template-columns:
    repeat(5,1fr);

  gap: 6px;
}


.wv5-action {
  min-width: 0 !important;
  min-height: 53px !important;

  padding:
    7px 8px !important;

  display: grid !important;

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

  gap: 7px;

  align-items:
    center;

  border:
    1px solid
    #223e4b !important;

  border-radius:
    9px !important;

  background:
    #06131a !important;

  color:
    #deebef !important;

  text-align:
    left;

  box-shadow:
    none !important;
}


.wv5-action:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--wv5-accent) !important;

  background:
    var(--wv5-accent-soft) !important;
}


.wv5-action-icon {
  width: 27px;
  height: 27px;

  display: grid;

  place-items:
    center;

  border:
    1px solid
    #294752;

  border-radius:
    7px;

  color:
    var(--wv5-accent);

  font-size:
    .72rem;

  font-weight:
    950;
}


.wv5-action-copy {
  min-width: 0;
}


.wv5-action-copy b,
.wv5-action-copy small {
  display: block;
}


.wv5-action-copy b {
  overflow:
    hidden;

  color:
    #e8f2f5;

  font-size:
    .54rem;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.wv5-action-copy small {
  margin-top: 2px;

  overflow:
    hidden;

  color:
    #5d7681;

  font-size:
    .4rem;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.wv5-action.is-interact {
  border-color:
    var(--wv5-accent-line) !important;
}


.wv5-action.is-interact
.wv5-action-icon {
  color: #080d10;

  border-color:
    var(--wv5-accent);

  background:
    var(--wv5-accent);
}


/* status remains real status element */
body.world-v5
#status {
  grid-column:
    1 / -1;

  min-height: 0 !important;

  margin: -3px 4px 0 !important;

  color:
    #607984 !important;

  font-size:
    .48rem !important;

  line-height:
    1.2;

  opacity:
    .9;
}


/* =========================================================
   RIGHT DOCK
   ========================================================= */

.world-v5-panel {
  width: 100% !important;

  margin: 0 !important;

  border:
    1px solid
    #1e3641 !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      rgba(9,22,30,.97),
      rgba(5,14,20,.97)
    ) !important;

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.22) !important;
}


.wv5-panel-title {
  min-height: 51px;

  margin:
    -1px -1px 10px;

  padding:
    11px 13px;

  display: flex;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid
    transparent;

  border-bottom-color:
    #1b333e;

  border-radius:
    15px 15px 0 0;

  background:
    linear-gradient(
      90deg,
      var(--wv5-accent-soft),
      transparent 70%
    );
}


.wv5-panel-title span {
  color:
    var(--wv5-accent);

  font-size:
    .43rem;

  font-weight:
    950;

  letter-spacing:
    .12em;
}


.wv5-panel-title strong {
  margin-top: 3px;

  color:
    #e5f0f3;

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


/* =========================================================
   PARTY
   ========================================================= */

body.world-v5
.world-v5-party-panel {
  padding:
    0 11px 11px !important;
}


body.world-v5
.world-v5-party-panel
.party-bar {
  width: 100%;

  display: grid !important;

  grid-template-columns:
    repeat(3,1fr) !important;

  gap: 6px !important;
}


body.world-v5
.world-v5-party-panel
.mon {
  width: auto !important;
  min-height: 75px;

  padding:
    6px 4px !important;

  border:
    1px solid
    #1b3440 !important;

  border-radius:
    9px !important;

  background:
    #061219 !important;
}


body.world-v5
.world-v5-party-panel
.mon img {
  width:
    42px !important;

  height:
    42px !important;
}


body.world-v5
.world-v5-party-panel
.btns {
  width: 100%;

  margin-top: 8px;

  display: grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap: 6px !important;
}


body.world-v5
.world-v5-party-panel
.btns button {
  min-height:
    34px !important;

  padding:
    6px 7px !important;

  border:
    1px solid
    #24424f !important;

  border-radius:
    7px !important;

  background:
    #071821 !important;

  color:
    #7fcfdd !important;

  font-size:
    .52rem !important;
}


body.world-v5
.world-v5-party-panel
#btn-bag {
  grid-column:
    1 / -1;
}


/* =========================================================
   CHAT
   ========================================================= */

body.world-v5
.world-v5-chat-panel {
  padding:
    0 10px 10px !important;

  position:
    static !important;

  inset:
    auto !important;

  transform:
    none !important;
}


body.world-v5
.world-v5-chat-panel
.ch-hint {
  padding:
    0 3px 8px !important;

  color:
    #647b86 !important;

  font-size:
    .51rem !important;
}


body.world-v5
.world-v5-chat-panel
.ch-msgs {
  height:
    315px !important;

  max-height:
    315px !important;

  padding:
    7px !important;

  overflow-y:
    auto !important;

  border:
    1px solid
    #19333f !important;

  border-radius:
    10px !important;

  background:
    #041118 !important;
}


body.world-v5
.world-v5-chat-panel
.ch-compose {
  margin-top:
    7px !important;
}


body.world-v5
.world-v5-chat-panel
#wchat-input {
  border:
    1px solid
    #25424d !important;

  background:
    #041118 !important;

  color:
    #e4eff2 !important;
}


body.world-v5
.world-v5-chat-panel
#wchat-send {
  border:
    1px solid
    var(--wv5-accent-line) !important;

  background:
    var(--wv5-accent) !important;

  color:
    #090d10 !important;
}


/* =========================================================
   NEARBY
   ========================================================= */

body.world-v5
.world-v5-nearby-panel {
  max-height:
    245px;

  padding:
    0 11px 11px !important;

  overflow:
    auto;

  position:
    static !important;

  inset:
    auto !important;

  transform:
    none !important;
}


body.world-v5
.world-v5-nearby-panel >
h3 {
  display:
    none !important;
}


body.world-v5
.world-v5-nearby-panel
.trade-hint {
  color:
    #647b86 !important;

  font-size:
    .5rem !important;
}


/* =========================================================
   BAG / MODALS
   ========================================================= */

body.world-v5
#game-frame >
#bag-panel {
  border:
    1px solid
    var(--wv5-accent-line) !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      150deg,
      rgba(7,20,28,.985),
      rgba(4,10,15,.985)
    ) !important;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.6) !important;
}


body.world-v5
#party-modal .party-panel,
body.world-v5
.trade-picker-card,
body.world-v5
.evo-box {
  border-color:
    var(--wv5-accent-line) !important;

  background:
    linear-gradient(
      150deg,
      #0a1821,
      #050c12
    ) !important;
}


/* =========================================================
   NPC / EVENT
   ========================================================= */

body.world-v5
#npc-float {
  border:
    1px solid
    var(--wv5-accent-line) !important;

  border-radius:
    10px !important;

  background:
    rgba(5,13,18,.92) !important;

  backdrop-filter:
    blur(7px);
}


body.world-v5
#btn-npc-fight-float {
  border-color:
    var(--wv5-accent) !important;

  background:
    var(--wv5-accent) !important;

  color:
    #070b0e !important;
}


/* =========================================================
   DESKTOP CLEANUP
   ========================================================= */

body.world-v5
.world-v5-legacy-link,
body.world-v5
.hint-desktop,
body.world-v5
.wrap > .hint {
  display:
    none !important;
}


@media
(min-width: 821px)
and (pointer: fine) {

  body.world-v5
  #dpad-wrap {
    display:
      none !important;
  }

  body.world-v5
  .world-mobile-dock,
  body.world-v5
  #world-mobile-party,
  body.world-v5
  .world-mobile-party {
    display:
      none !important;
  }
}


/* =========================================================
   MID SIZE
   ========================================================= */

@media
(max-width: 1220px)
and (min-width: 821px) {

  body.world-v5
  .world-command {
    grid-template-columns:
      auto 1fr !important;
  }

  .world-v5-network-nav {
    grid-column:
      1 / -1;

    grid-template-columns:
      repeat(4,1fr);
  }

  body.world-v5
  .wrap {
    grid-template-columns:
      minmax(0,1fr)
      320px;
  }

  body.world-v5
  .world-telemetry {
    grid-template-columns:
      repeat(2,1fr) !important;
  }

  .world-v5-actions {
    grid-template-columns:
      repeat(3,1fr);
  }
}


/* =========================================================
   MOBILE
   Existing WORLD mobile controls remain authoritative.
   ========================================================= */

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

  body.boom-world.world-v5 {
    padding-bottom:
      80px !important;
  }

  body.world-v5
  .world-command {
    width:
      calc(100vw - 16px) !important;

    min-height:
      0 !important;

    margin:
      8px auto !important;

    padding:
      9px 10px !important;

    grid-template-columns:
      1fr auto !important;

    border-radius:
      14px !important;
  }

  body.world-v5
  .world-brand {
    min-width: 0;

    grid-template-columns:
      36px auto;
  }

  body.world-v5
  .world-ball {
    width:
      36px !important;

    height:
      36px !important;
  }

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

  body.world-v5
  .world-telemetry {
    grid-column:
      1 / -1;

    grid-template-columns:
      repeat(2,1fr) !important;

    margin-top:
      3px;
  }

  body.world-v5
  .world-chip {
    min-height:
      38px;

    padding:
      5px 7px !important;
  }

  .world-v5-network-nav {
    grid-column:
      1 / -1;

    display:
      flex;

    overflow-x:
      auto;
  }

  .world-v5-network-nav a {
    min-width:
      74px;

    min-height:
      38px;
  }

  body.world-v5
  .wrap {
    width:
      calc(100vw - 12px) !important;

    display:
      block !important;
  }

  .world-v5-stage,
  .world-v5-side {
    display:
      block;
  }

  body.world-v5
  #game-frame {
    width:
      100% !important;

    border-radius:
      13px !important;
  }

  .world-v5-toolbar {
    margin-top:
      6px;

    padding:
      7px;

    display:
      block;

    min-height:
      0;
  }

  .world-v5-location {
    padding:
      5px 7px 8px;

    border-right:
      0;

    border-bottom:
      1px solid
      #1e3641;
  }

  .world-v5-actions {
    margin-top:
      7px;

    grid-template-columns:
      repeat(4,1fr);
  }

  .wv5-action {
    min-height:
      42px !important;

    grid-template-columns:
      1fr;

    text-align:
      center;
  }

  .wv5-action-icon {
    margin:
      0 auto;
  }

  .wv5-action-copy small {
    display:
      none;
  }

  .wv5-action.is-interact {
    display:
      none !important;
  }

  .world-v5-side {
    margin-top:
      8px;
  }

  /*
   * Existing canonical mobile UI controls these panels.
   * V5 does not force them open.
   */
  body.world-v5
  .world-v5-party-panel,
  body.world-v5
  .world-v5-chat-panel,
  body.world-v5
  .world-v5-nearby-panel {
    position:
      fixed !important;
  }

  body.world-v5
  .world-command >
  .world-quick {
    position:
      static !important;

    width:
      auto !important;

    height:
      auto !important;

    overflow:
      visible !important;

    opacity:
      1 !important;

    pointer-events:
      auto !important;
  }
}


/* =========================================================
   WORLD V5 CHAT HEIGHT FIX
   Desktop chat follows WORLD canvas further down.
   ========================================================= */

@media (min-width: 821px) and (pointer: fine) {

  body.world-v5
  .world-v5-chat-panel
  .ch-msgs {
    height: 465px !important;
    max-height: 465px !important;
  }

}


/* =========================================================
   WORLD V5 // MAP-LOCKED RIGHT DOCK
   Party + Nearby remain compact.
   Chat consumes the remaining WORLD map height.
   ========================================================= */

@media (min-width:821px) and (pointer:fine) {

  body.world-v5
  .world-v5-side {
    height:
      var(
        --wv5-map-height,
        auto
      ) !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    overflow: hidden;
  }


  body.world-v5
  .world-v5-party-panel {
    order: 1;

    flex:
      0 0 auto !important;
  }


  body.world-v5
  .world-v5-nearby-panel {
    order: 2;

    flex:
      0 0 auto !important;
  }


  body.world-v5
  .world-v5-chat-panel {
    order: 3;

    flex:
      1 1 0 !important;

    min-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }


  body.world-v5
  .world-v5-chat-panel
  > .wv5-panel-title,

  body.world-v5
  .world-v5-chat-panel
  > .ch-hint,

  body.world-v5
  .world-v5-chat-panel
  > .ch-compose,

  body.world-v5
  .world-v5-chat-panel
  > .vip-chat-style {
    flex:
      0 0 auto !important;
  }


  /*
   * This overrides the previous fixed 315px/465px.
   * The message list now gets every available pixel.
   */
  body.world-v5
  .world-v5-chat-panel
  .ch-msgs {
    flex:
      1 1 auto !important;

    min-height:
      180px !important;

    height:
      auto !important;

    max-height:
      none !important;

    overflow-y:
      auto !important;
  }

}


/* =========================================================
   WORLD V5 SMALL CLEANUP
   ========================================================= */

/*
 * Legacy TRAINER HUD label collides with
 * the BOOM WORLD brand in the new V5 header.
 */
body.world-v5
.world-version {
  display: none !important;
}


/* =========================================================
   WORLD V5 // HEADER TYPOGRAPHY + MMORPG LINK
   ========================================================= */

/*
 * Make telemetry labels visually match the other
 * Trainer Network header labels:
 *
 * VÄRLD
 * SOCIETY
 * MMORPG
 * TRAINER
 */
body.world-v5
.world-command
.world-chip > span {
  font-family:
    'Orbitron',
    'Rajdhani',
    system-ui,
    sans-serif !important;

  font-size:
    .52rem !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    none !important;

  color:
    #718590 !important;
}


/*
 * Zone / position / abilities values retain their
 * stronger visual hierarchy.
 */
body.world-v5
.world-command
.world-chip > b {
  font-family:
    'Orbitron',
    'Rajdhani',
    system-ui,
    sans-serif !important;
}


/* MMORPG card now behaves like a real navigation tile. */
body.world-v5
.world-command
.world-chip.wv5-mmorpg-link {
  cursor:
    pointer !important;

  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}


body.world-v5
.world-command
.world-chip.wv5-mmorpg-link:hover,
body.world-v5
.world-command
.world-chip.wv5-mmorpg-link:focus-visible {
  transform:
    translateY(-1px);

  border-color:
    rgba(194,116,255,.62) !important;

  background:
    linear-gradient(
      135deg,
      rgba(144,69,208,.13),
      rgba(5,15,23,.86)
    ) !important;

  box-shadow:
    0 0 18px
    rgba(177,91,255,.08) !important;

  outline:
    none;
}


/*
 * Absolutely no dropdown arrow in the VIP button.
 */
body.world-v5
#vip-chat-style
.vip-chat-style-label {
  white-space:
    nowrap;
}


/* =========================================================
   WORLD V5 // VERIFIED SOURCE CLEANUP 2.0
   ========================================================= */


/*
 * Console diagnostic proved the family was already Orbitron.
 * The visual mismatch came from casing / size / weight / spacing.
 *
 * Make the three original telemetry labels use the same
 * strong HUD treatment as VÄRLD / SOCIETY / MMORPG / TRAINER.
 */
body.world-v5
.world-telemetry
.world-chip
> .wv5-primary-label {
  font-family:
    'Orbitron',
    sans-serif !important;

  font-size:
    .62rem !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase !important;

  color:
    #8a9aaf !important;

  opacity:
    1 !important;
}


/* MMORPG is now a navigation tile. */
body.world-v5
#world4-action-mmorpg {
  cursor:
    pointer !important;
}


body.world-v5
#world4-action-mmorpg:hover {
  border-color:
    rgba(193,112,255,.65) !important;
}


/* These old desktop elements are retired from V5. */
body.world-v5
a.back,

body.world-v5
.world41-footnote,

body.world-v5
#boom-mobile-menu-dock,

body.world-v5
.boom-mobile-real-menu {
  display:
    none !important;
}


/*
 * Old WORLD menu shell from canonical/4.1 generations.
 * V5 desktop has its navigation in the header.
 */
body.world-v5.world41-desktop
.world411-menu {
  display:
    none !important;
}


/* =========================================================
   WORLD V5 // VIP HEADER TILE
   ========================================================= */


/*
 * VIP is a first-class WORLD system next to:
 *
 * SOCIETY
 * MMORPG
 * TRAINER
 */
body.world-v5
#world4-action-vip {
  border-color:
    rgba(255, 211, 69, .54) !important;

  background:
    linear-gradient(
      135deg,
      rgba(87, 65, 12, .28),
      rgba(9, 16, 21, .94)
    ) !important;

  box-shadow:
    inset 0 0 24px
    rgba(255, 210, 50, .025);

  cursor:
    pointer !important;
}


body.world-v5
#world4-action-vip > span {
  color:
    #d8c681 !important;
}


body.world-v5
#world4-action-vip > b {
  color:
    #ffd84f !important;

  text-shadow:
    0 0 12px
    rgba(255, 211, 70, .14);
}


body.world-v5
#world4-action-vip:hover,
body.world-v5
#world4-action-vip:focus-visible {
  border-color:
    rgba(255, 220, 80, .88) !important;

  background:
    linear-gradient(
      135deg,
      rgba(121, 88, 13, .38),
      rgba(11, 18, 22, .98)
    ) !important;

  transform:
    translateY(-1px);

  box-shadow:
    0 0 20px
    rgba(255, 210, 54, .08),
    inset 0 0 24px
    rgba(255, 210, 54, .035);

  outline:
    none;
}


/*
 * The OLD VIP button remains in the DOM because it owns
 * the real VIP modal/click engine.
 *
 * Hide only its old desktop visual representation.
 * Header VIP activates it programmatically.
 */
@media (min-width: 821px) and (pointer: fine) {

  body.world-v5
  #boom-vip-open {
    display:
      none !important;
  }

}