/* =========================================================
   BOOM VIP V5
   TRAINER NETWORK / WORLD INTEGRATION

   VISUAL LAYER ONLY
   Existing VIP API + JS motor remains untouched.
   ========================================================= */


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

body.world-v5
#boom-vip-modal {
  padding: 20px 24px !important;

  align-items:
    flex-start !important;

  overflow-y:
    auto !important;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(255, 207, 57, .075),
      transparent 32%
    ),
    rgba(2, 7, 10, .84) !important;

  backdrop-filter:
    blur(14px) saturate(.9) !important;
}


/* =========================================================
   MAIN VIP WINDOW
   ========================================================= */

body.world-v5
#boom-vip-card {
  width:
    min(
      1380px,
      calc(100vw - 48px)
    ) !important;

  max-height:
    calc(100vh - 40px) !important;

  margin:
    auto !important;

  overflow:
    auto !important;

  position:
    relative;

  border:
    1px solid
    rgba(255, 211, 70, .38) !important;

  border-radius:
    20px !important;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(255, 207, 54, .055),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(8, 17, 23, .995),
      rgba(4, 10, 15, .995)
    ) !important;

  color:
    #e7f0f3 !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .68),
    0 0 0 1px
    rgba(255,255,255,.018),
    inset 0 1px
    rgba(255,255,255,.025) !important;

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

  scrollbar-width:
    thin;

  scrollbar-color:
    #775e20
    #071118;
}


body.world-v5
#boom-vip-card::before {
  content: '';

  position:
    absolute;

  z-index:
    10;

  top: 0;
  left: 26px;
  right: 26px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffda54,
      transparent
    );

  opacity:
    .72;

  pointer-events:
    none;
}


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

body.world-v5
.boom-vip-head {
  min-height:
    78px;

  padding:
    15px 20px !important;

  position:
    sticky !important;

  top: 0;

  z-index:
    20 !important;

  display:
    flex;

  align-items:
    center;

  border-bottom:
    1px solid
    rgba(255, 210, 65, .20) !important;

  background:
    linear-gradient(
      90deg,
      rgba(17, 17, 12, .98),
      rgba(6, 15, 21, .98) 57%,
      rgba(6, 13, 19, .98)
    ) !important;

  backdrop-filter:
    blur(18px) !important;
}


body.world-v5
.boom-vip-head strong {
  color:
    #ffe064 !important;

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

  letter-spacing:
    .075em !important;

  text-shadow:
    0 0 18px
    rgba(255, 214, 70, .10);
}


body.world-v5
.boom-vip-head small {
  margin-top:
    6px !important;

  color:
    #748994 !important;

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

  letter-spacing:
    .095em;

  text-transform:
    uppercase;
}


body.world-v5
.boom-vip-close {
  width:
    43px !important;

  height:
    43px !important;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0 43px;

  border:
    1px solid
    #274653 !important;

  border-radius:
    11px !important;

  background:
    #071820 !important;

  color:
    #65dfef !important;

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

  transition:
    .15s ease;
}


body.world-v5
.boom-vip-close:hover {
  border-color:
    #58d8e9 !important;

  background:
    rgba(51, 201, 221, .10) !important;

  transform:
    translateY(-1px);
}


/* =========================================================
   BODY / MAIN GRID
   ========================================================= */

body.world-v5
.boom-vip-body {
  padding:
    16px !important;
}


body.world-v5
.boom-vip-grid {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, .93fr)
    minmax(0, 1.07fr) !important;

  gap:
    14px !important;

  align-items:
    start;
}


body.world-v5
.boom-vip-grid > div {
  min-width:
    0;

  display:
    grid;

  gap:
    12px;
}


/* =========================================================
   PANEL SYSTEM
   ========================================================= */

body.world-v5
.boom-vip-panel {
  min-width:
    0;

  padding:
    14px !important;

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
    #1b3743 !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(8, 21, 29, .96),
      rgba(5, 14, 20, .96)
    ) !important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.018) !important;
}


body.world-v5
.boom-vip-panel::after {
  content: '';

  position:
    absolute;

  top: 0;
  left: 14px;

  width:
    68px;

  height:
    1px;

  background:
    var(
      --wv5-accent,
      #59ddec
    );

  opacity:
    .62;
}


body.world-v5
.boom-vip-panel.gold {
  border-color:
    rgba(207, 165, 54, .40) !important;

  background:
    linear-gradient(
      145deg,
      rgba(37, 29, 9, .46),
      rgba(7, 17, 23, .97) 46%
    ) !important;
}


body.world-v5
.boom-vip-panel.gold::after {
  background:
    #ffd857;
}


body.world-v5
.boom-vip-panel h3 {
  margin:
    0 0 11px !important;

  color:
    #dce9ed !important;

  font:
    900 .72rem/1.15
    'Orbitron',
    'Rajdhani',
    sans-serif !important;

  letter-spacing:
    .055em !important;
}


body.world-v5
.boom-vip-panel p {
  margin:
    5px 0 !important;

  color:
    #8398a3 !important;

  font-size:
    .72rem !important;

  font-weight:
    650;

  line-height:
    1.4 !important;
}


/* =========================================================
   VIP STATUS
   ========================================================= */

body.world-v5
.boom-vip-status {
  min-height:
    73px;

  padding:
    12px 14px !important;

  border:
    1px solid
    #1d3541 !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      110deg,
      rgba(6, 18, 25, .98),
      rgba(5, 13, 19, .98)
    ) !important;
}


body.world-v5
.boom-vip-status b {
  font:
    900 .86rem/1
    'Orbitron',
    sans-serif !important;
}


body.world-v5
.boom-vip-status.active {
  border-color:
    rgba(255, 210, 65, .28) !important;

  box-shadow:
    inset 3px 0
    #e5bd45;
}


body.world-v5
.boom-vip-status.active b {
  color:
    #ffda59 !important;
}


body.world-v5
.boom-vip-status.locked {
  box-shadow:
    inset 3px 0
    #5d727c;
}


body.world-v5
.boom-vip-status p {
  margin-top:
    6px !important;
}


body.world-v5
.boom-vip-timer {
  color:
    #ffdf6b !important;

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

  letter-spacing:
    .02em;

  text-shadow:
    0 0 16px
    rgba(255, 215, 70, .15) !important;
}


/* =========================================================
   VIP METER
   ========================================================= */

body.world-v5
.boom-vip-meter {
  height:
    8px !important;

  margin:
    9px 0 6px !important;

  overflow:
    hidden;

  border:
    1px solid
    #223943 !important;

  border-radius:
    999px !important;

  background:
    #06131a !important;
}


body.world-v5
.boom-vip-meter i {
  background:
    linear-gradient(
      90deg,
      #b88a26,
      #ffd95c
    ) !important;

  box-shadow:
    0 0 14px
    rgba(255, 210, 64, .28) !important;
}


body.world-v5
.boom-vip-meter-row {
  color:
    #728791 !important;

  font-size:
    .61rem !important;

  font-weight:
    800;
}


/* =========================================================
   GENERAL BUTTON SYSTEM
   ========================================================= */

body.world-v5
.boom-vip-btn {
  min-height:
    38px;

  padding:
    8px 12px !important;

  border:
    1px solid
    #225060 !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      135deg,
      #09232d,
      #071820
    ) !important;

  color:
    #61deed !important;

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

  letter-spacing:
    .035em;

  cursor:
    pointer;

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


body.world-v5
.boom-vip-btn:hover:not(:disabled) {
  transform:
    translateY(-1px);

  border-color:
    #54d8e8 !important;

  background:
    rgba(34, 157, 177, .13) !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.16);
}


body.world-v5
.boom-vip-btn.secondary {
  color:
    #83e3ef !important;

  background:
    #071820 !important;
}


body.world-v5
.boom-vip-btn.good {
  border-color:
    rgba(222, 180, 56, .66) !important;

  background:
    linear-gradient(
      135deg,
      #4c390d,
      #251e09
    ) !important;

  color:
    #ffe068 !important;
}


body.world-v5
.boom-vip-btn.good:hover:not(:disabled) {
  border-color:
    #ffe065 !important;

  background:
    linear-gradient(
      135deg,
      #624812,
      #30250a
    ) !important;

  box-shadow:
    0 0 18px
    rgba(255, 209, 66, .10);
}


body.world-v5
.boom-vip-btn:disabled {
  opacity:
    .28 !important;

  filter:
    grayscale(.55);

  cursor:
    not-allowed !important;
}


/* =========================================================
   BENEFITS
   ========================================================= */

body.world-v5
.boom-vip-benefits {
  margin-top:
    11px !important;

  display:
    grid !important;

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

  gap:
    7px !important;
}


body.world-v5
.boom-vip-benefit {
  min-height:
    66px;

  padding:
    9px !important;

  border:
    1px solid
    #1b3440 !important;

  border-radius:
    9px !important;

  background:
    rgba(5, 16, 23, .82) !important;

  color:
    #7d929d !important;

  font-size:
    .61rem !important;

  line-height:
    1.3;
}


body.world-v5
.boom-vip-benefit b {
  margin-bottom:
    5px !important;

  color:
    #d8e6ea !important;

  font-size:
    .63rem !important;
}


/* =========================================================
   LIVE CATCHER
   ========================================================= */

body.world-v5
.boom-vip-grid >
div:first-child >
.boom-vip-panel:nth-child(2) {
  min-height:
    250px;
}


body.world-v5
.boom-vip-live {
  display:
    grid !important;

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

  gap:
    16px !important;

  align-items:
    center !important;
}


body.world-v5
.boom-vip-mon {
  width:
    148px;

  height:
    148px !important;

  position:
    relative;

  display:
    grid !important;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 212, 61, .26) !important;

  border-radius:
    14px !important;

  background:
    radial-gradient(
      circle,
      rgba(255, 208, 55, .13),
      rgba(6, 18, 24, .2) 57%,
      rgba(4, 12, 17, .75)
    ) !important;
}


body.world-v5
.boom-vip-mon::after {
  content: '';

  position:
    absolute;

  inset:
    14px;

  border:
    1px solid
    rgba(255, 216, 73, .09);

  border-radius:
    50%;
}


body.world-v5
.boom-vip-mon img {
  width:
    136px !important;

  height:
    136px !important;

  position:
    relative;

  z-index:
    2;

  object-fit:
    contain;

  image-rendering:
    pixelated;

  filter:
    drop-shadow(
      0 12px 14px
      rgba(0,0,0,.35)
    );
}


body.world-v5
.boom-vip-mon-name {
  color:
    #ecf5f7 !important;

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


body.world-v5
.boom-vip-shiny {
  color:
    #ffe05e !important;

  text-shadow:
    0 0 14px
    rgba(255, 217, 65, .30) !important;
}


body.world-v5
.boom-vip-live-meta {
  margin-top:
    7px !important;

  color:
    #78909b !important;

  font-size:
    .65rem !important;

  font-weight:
    750;
}


body.world-v5
.boom-vip-live-meta b {
  color:
    #cddde1;
}


/* =========================================================
   BALL BUTTONS
   ========================================================= */

body.world-v5
.boom-vip-ball-grid {
  margin-top:
    12px !important;

  display:
    grid !important;

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

  gap:
    7px !important;
}


body.world-v5
.boom-vip-ball {
  min-height:
    61px;

  padding:
    8px 6px !important;

  border:
    1px solid
    #28404a !important;

  border-radius:
    9px !important;

  background:
    linear-gradient(
      145deg,
      #081922,
      #06131a
    ) !important;

  color:
    #dce9ed !important;

  font:
    900 .55rem/1.15
    'Orbitron',
    sans-serif !important;

  cursor:
    pointer;

  transition:
    .14s ease;
}


body.world-v5
.boom-vip-ball:nth-child(1) {
  border-top-color:
    rgba(240, 94, 98, .72) !important;
}


body.world-v5
.boom-vip-ball:nth-child(2) {
  border-top-color:
    rgba(66, 156, 255, .75) !important;
}


body.world-v5
.boom-vip-ball:nth-child(3) {
  border-top-color:
    rgba(255, 211, 63, .76) !important;
}


body.world-v5
.boom-vip-ball:nth-child(4) {
  border-top-color:
    rgba(182, 102, 255, .78) !important;
}


body.world-v5
.boom-vip-ball:hover:not(:disabled) {
  transform:
    translateY(-2px);

  border-color:
    var(
      --wv5-accent,
      #5edbea
    ) !important;

  background:
    rgba(36, 128, 145, .10) !important;
}


body.world-v5
.boom-vip-ball small {
  margin-top:
    5px !important;

  color:
    #8197a1 !important;

  font:
    850 .48rem/1
    'Orbitron',
    sans-serif;
}


body.world-v5
.boom-vip-ball:disabled {
  opacity:
    .25 !important;

  filter:
    grayscale(.75);
}


body.world-v5
.boom-vip-msg {
  min-height:
    20px !important;

  margin-top:
    10px !important;

  padding:
    0 2px;

  color:
    #51dba5 !important;

  font-size:
    .65rem !important;

  font-weight:
    850 !important;
}


body.world-v5
.boom-vip-msg.bad {
  color:
    #ff777e !important;
}


/* =========================================================
   EGGS
   ========================================================= */

body.world-v5
.boom-vip-eggs {
  display:
    grid !important;

  gap:
    7px !important;
}


body.world-v5
.boom-vip-egg {
  min-height:
    61px;

  padding:
    10px 11px !important;

  display:
    grid !important;

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

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    #1c3743 !important;

  border-radius:
    9px !important;

  background:
    #06151d !important;
}


body.world-v5
.boom-vip-egg b {
  color:
    #dce9ed;

  font-size:
    .67rem !important;
}


body.world-v5
.boom-vip-egg small {
  display:
    block;

  margin-top:
    4px;

  color:
    #738994 !important;

  font-size:
    .57rem !important;

  font-weight:
    750;
}


/* =========================================================
   EGG SEARCH / CHOICES
   ========================================================= */

body.world-v5
.boom-vip-search {
  margin:
    10px 0 !important;

  display:
    grid !important;

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

  gap:
    7px !important;
}


body.world-v5
.boom-vip-search input {
  min-height:
    39px;

  padding:
    8px 11px !important;

  border:
    1px solid
    #23414d !important;

  border-radius:
    8px !important;

  outline:
    0;

  background:
    #041219 !important;

  color:
    #dce9ed !important;

  font-family:
    'Rajdhani',
    sans-serif;
}


body.world-v5
.boom-vip-search input:focus {
  border-color:
    #56d8e8 !important;
}


body.world-v5
.boom-vip-choice-grid {
  max-height:
    250px !important;

  display:
    grid !important;

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

  gap:
    6px !important;

  overflow:
    auto;
}


body.world-v5
.boom-vip-choice {
  min-height:
    54px;

  padding:
    8px !important;

  border:
    1px solid
    #1d3641 !important;

  border-radius:
    8px !important;

  background:
    #06151d !important;

  color:
    #cbdce1 !important;

  text-align:
    left;

  cursor:
    pointer;
}


body.world-v5
.boom-vip-choice:hover {
  border-color:
    #4ed5e6 !important;
}


body.world-v5
.boom-vip-choice.selected {
  border-color:
    #f0c84f !important;

  background:
    rgba(104, 79, 13, .20) !important;

  color:
    #ffe170 !important;
}


body.world-v5
.boom-vip-choice b {
  font-size:
    .61rem !important;
}


body.world-v5
.boom-vip-choice small {
  display:
    block;

  margin-top:
    4px;

  color:
    #6f8792 !important;

  font-size:
    .52rem !important;
}


/* =========================================================
   STYLE VAULT
   ========================================================= */

body.world-v5
.boom-vip-style-head {
  min-height:
    48px;

  margin-bottom:
    10px !important;

  display:
    flex !important;

  align-items:
    flex-start !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;
}


body.world-v5
.boom-vip-style-head h3 {
  margin-bottom:
    5px !important;
}


body.world-v5
.boom-vip-style-head p {
  margin:
    0 !important;
}


body.world-v5
.boom-vip-style-grid {
  display:
    grid !important;

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

  gap:
    7px !important;
}


body.world-v5
.boom-vip-style {
  min-height:
    109px;

  padding:
    10px !important;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    #1b3540 !important;

  border-radius:
    9px !important;

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


body.world-v5
.boom-vip-style.equipped {
  border-color:
    rgba(236, 193, 58, .58) !important;

  background:
    linear-gradient(
      145deg,
      rgba(76, 57, 11, .32),
      #06151c 54%
    ) !important;

  box-shadow:
    inset 3px 0
    #d5ad37 !important;
}


body.world-v5
.boom-vip-style b {
  color:
    #d8e6e9;

  font-size:
    .64rem !important;
}


body.world-v5
.boom-vip-style small {
  margin:
    4px 0 10px !important;

  display:
    block;

  color:
    #6d8590 !important;

  font:
    800 .50rem/1
    'Orbitron',
    sans-serif !important;

  letter-spacing:
    .035em;
}


body.world-v5
.boom-vip-style
.boom-vip-btn {
  width:
    100% !important;

  min-height:
    34px;

  margin-top:
    auto;

  padding:
    6px 8px !important;
}


body.world-v5
.boom-vip-unequip {
  border-color:
    rgba(214, 175, 55, .52) !important;

  background:
    rgba(92, 68, 12, .25) !important;

  color:
    #f3cf57 !important;
}


body.world-v5
.boom-vip-unequip-all {
  width:
    auto !important;

  min-height:
    36px !important;

  flex:
    0 0 auto;

  white-space:
    nowrap;
}


/* =========================================================
   FOOTER
   ========================================================= */

body.world-v5
.boom-vip-foot {
  min-height:
    39px;

  padding:
    11px 18px 13px !important;

  border-top:
    1px solid
    #172f39;

  background:
    rgba(4, 12, 17, .84);

  color:
    #586f79 !important;

  font:
    800 .50rem/1.2
    'Orbitron',
    sans-serif !important;

  letter-spacing:
    .025em;

  text-align:
    center;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

body.world-v5
#boom-vip-card::-webkit-scrollbar,

body.world-v5
.boom-vip-choice-grid::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


body.world-v5
#boom-vip-card::-webkit-scrollbar-track,

body.world-v5
.boom-vip-choice-grid::-webkit-scrollbar-track {
  background:
    #061118;
}


body.world-v5
#boom-vip-card::-webkit-scrollbar-thumb,

body.world-v5
.boom-vip-choice-grid::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    #5c4c20;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

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


  body.world-v5
  .boom-vip-style-grid {
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}


@media (max-width: 760px) {

  body.world-v5
  #boom-vip-modal {
    padding:
      8px !important;
  }


  body.world-v5
  #boom-vip-card {
    width:
      calc(100vw - 16px) !important;

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

    border-radius:
      14px !important;
  }


  body.world-v5
  .boom-vip-head {
    min-height:
      67px;

    padding:
      11px 12px !important;
  }


  body.world-v5
  .boom-vip-head strong {
    font-size:
      .82rem !important;
  }


  body.world-v5
  .boom-vip-body {
    padding:
      9px !important;
  }


  body.world-v5
  .boom-vip-live {
    grid-template-columns:
      105px minmax(0,1fr) !important;
  }


  body.world-v5
  .boom-vip-mon {
    width:
      105px;

    height:
      105px !important;
  }


  body.world-v5
  .boom-vip-mon img {
    width:
      98px !important;

    height:
      98px !important;
  }


  body.world-v5
  .boom-vip-ball-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  body.world-v5
  .boom-vip-benefits {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  body.world-v5
  .boom-vip-style-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  body.world-v5
  .boom-vip-choice-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


@media (max-width: 440px) {

  body.world-v5
  .boom-vip-status {
    align-items:
      flex-start !important;

    flex-direction:
      column;
  }


  body.world-v5
  .boom-vip-live {
    grid-template-columns:
      1fr !important;
  }


  body.world-v5
  .boom-vip-mon {
    margin:
      0 auto;
  }


  body.world-v5
  .boom-vip-benefits,

  body.world-v5
  .boom-vip-style-grid {
    grid-template-columns:
      1fr !important;
  }

}