:root {
  --boom-world-layer-gameplay: 1;
  --boom-world-layer-hud: 20;
  --boom-world-layer-prompt: 40;
  --boom-world-layer-panel: 200;
  --boom-world-layer-modal: 500;
  --boom-world-layer-critical: 2147483000;
}

/* Phase 4 establishes named layer ownership without changing the visual theme. */
body.boom-world #game-frame { isolation: isolate; }
body.boom-world #nametags { z-index: var(--boom-world-layer-prompt); }
body.boom-world #world411-menu-shade { z-index: calc(var(--boom-world-layer-modal) - 1); }
body.boom-world #world411-ball-menu,
body.boom-world #bag-panel.world412-mobile-bag { z-index: var(--boom-world-layer-modal); }

body.boom-world.world411-menu-open,
body.boom-world.world412-bag-open { overflow: hidden; }

body.boom-world #world4-action-portal {
  border-color: rgba(255, 213, 92, .3) !important;
  background: linear-gradient(145deg, rgba(42, 31, 8, .8), rgba(4, 12, 31, .76)) !important;
}
body.boom-world #world4-action-portal > b { color: #ffda68; }
body.boom-world #world4-action-portal:focus-visible,
body.boom-world .world411-menu-item.portal:focus-visible {
  outline: 2px solid #ffda68;
  outline-offset: 2px;
}
body.boom-world .world411-menu-item.portal {
  border-color: rgba(255, 213, 92, .34);
  background: linear-gradient(100deg, rgba(73, 52, 8, .34), rgba(12, 31, 64, .72));
}
body.boom-world .world411-menu-item.portal .world411-menu-icon,
body.boom-world .world411-menu-item.portal .world411-menu-state { color: #ffda68; }

@media (max-width: 900px), (pointer: coarse) {
  body.boom-world #world411-ball-menu {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Release visual layer: WORLD as the gameplay view of Trainer Portal. */
body.boom-world {
  --world-region: #f26464;
  --world-region-2: #f5d9a9;
  --world-atmosphere: #452326;
  width: 100%;
  max-width: none;
  background:
    radial-gradient(circle at 50% -12%, color-mix(in srgb, var(--world-atmosphere) 78%, transparent), transparent 36%),
    linear-gradient(145deg, #071017, #03070b 62%, #07110f) !important;
  color: #eef8f4;
}
body.boom-world[data-world-region="johto"] { --world-region: #e8bd55; --world-region-2: #6fc58a; --world-atmosphere: #293d2d; }
body.boom-world[data-world-region="hoenn"] { --world-region: #4ce1b5; --world-region-2: #53aef3; --world-atmosphere: #0b4548; }
body.boom-world > h1, body.boom-world > .sub { display: none !important; }
body.boom-world .world-command {
  width: min(1480px, calc(100% - 28px));
  min-height: 70px;
  margin: 4px auto 14px;
  padding: 10px 14px;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--world-region) 34%, rgba(255,255,255,.08));
  border-radius: 20px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--world-atmosphere) 48%, rgba(5,13,18,.97)), rgba(4,10,15,.96));
  box-shadow: 0 18px 48px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.045);
}
body.boom-world .world-command::before { background: linear-gradient(90deg, transparent, var(--world-region), transparent) !important; opacity: .55; }
body.boom-world .world-ball { border-color: #edf8f3 !important; background: linear-gradient(to bottom, var(--world-region-2) 0 44%, #101820 45% 55%, var(--world-region) 56%) !important; box-shadow: 0 0 22px color-mix(in srgb, var(--world-region) 30%, transparent) !important; }
body.boom-world .world-brand-copy strong { color: #f4fbf8 !important; }
body.boom-world .world-brand-copy strong b { color: var(--world-region) !important; }
body.boom-world .world-brand-copy span { color: var(--world-region-2) !important; font-size: .66rem !important; letter-spacing: .07em !important; }
body.boom-world .world-version { color: #a9bab5 !important; border-color: rgba(255,255,255,.1) !important; }
body.boom-world .world-telemetry { display: flex !important; justify-content: center; }
body.boom-world .world-chip { min-width: 130px; min-height: 44px; border-radius: 12px; background: rgba(2,8,12,.5); }
body.boom-world .world-chip.live, body.boom-world .world-chip:nth-child(3) { display: none !important; }
body.boom-world .world-chip span { color: #829791; text-transform: none; letter-spacing: .04em; }
body.boom-world .world-chip b { color: #f4fbf8; font-size: .76rem; }
body.boom-world .world-chip:nth-child(2) b, body.boom-world #world-abilities { color: var(--world-region-2); }
body.boom-world .world-quick button { border-radius: 12px !important; border-color: color-mix(in srgb, var(--world-region) 25%, transparent) !important; background: color-mix(in srgb, var(--world-atmosphere) 38%, rgba(5,14,20,.9)) !important; color: var(--world-region) !important; }
body.boom-world .world-quick button span { color: var(--world-region) !important; }
body.boom-world .world-quick button small { color: #aabbb6 !important; }
body.boom-world .wrap { width: min(1480px, calc(100% - 28px)) !important; max-width: 1480px !important; gap: 12px !important; }
body.boom-world #game-frame {
  border: 3px solid color-mix(in srgb, var(--world-region) 58%, #17303a) !important;
  border-radius: 22px !important;
  background: #07130f !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 0 1px color-mix(in srgb, var(--world-region) 14%, transparent), 0 0 42px color-mix(in srgb, var(--world-region) 10%, transparent) !important;
}
body.boom-world .world-map-frame { border-color: color-mix(in srgb, var(--world-region) 28%, transparent) !important; }
body.boom-world .wmf-live { color: var(--world-region-2) !important; background: rgba(3,10,13,.82) !important; }
body.boom-world .hud, body.boom-world #world-chat.world-chat, body.boom-world .trade-panel {
  border: 1px solid color-mix(in srgb, var(--world-region) 20%, rgba(255,255,255,.08)) !important;
  border-radius: 18px !important;
  background: linear-gradient(150deg, color-mix(in srgb, var(--world-atmosphere) 32%, rgba(8,18,24,.96)), rgba(3,9,13,.97)) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.24) !important;
}
body.boom-world .party-bar { gap: 8px !important; }
body.boom-world .mon {
  min-height: 112px !important;
  padding: 8px 5px !important;
  border: 1px solid color-mix(in srgb, var(--world-region) 20%, rgba(255,255,255,.08)) !important;
  border-radius: 14px !important;
  background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--world-region) 14%, transparent), transparent 48%), rgba(2,8,12,.72) !important;
}
body.boom-world .mon:first-child { border-color: var(--world-region) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--world-region) 14%, transparent); }
body.boom-world .mon img { width: 58px !important; height: 58px !important; filter: drop-shadow(0 10px 10px rgba(0,0,0,.42)); }
body.boom-world .mon .lv { color: var(--world-region-2) !important; }
body.boom-world .btns button, body.boom-world #btn-npc-fight { border-radius: 12px !important; }
body.boom-world #world-chat .ch-msgs { background: rgba(2,8,12,.54) !important; border-radius: 12px !important; }
body.boom-world #world-chat .ch-compose input { border-color: color-mix(in srgb, var(--world-region) 22%, rgba(255,255,255,.08)) !important; background: rgba(2,8,12,.78) !important; }
body.boom-world #world-chat .ch-compose button { background: var(--world-region) !important; color: #06110e !important; border-color: transparent !important; }
body.boom-world #battle { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--world-region) 19%, rgba(3,8,12,.94)), rgba(2,6,9,.96)) !important; }
body.boom-world .wbattle { border-color: color-mix(in srgb, var(--world-region) 44%, rgba(255,255,255,.1)) !important; border-radius: 22px !important; background: linear-gradient(145deg, color-mix(in srgb, var(--world-atmosphere) 35%, rgba(8,18,25,.97)), rgba(3,9,14,.98)) !important; }
body.boom-world .wbattle h3 { color: var(--world-region-2) !important; }
body.boom-world .wb-fighter { border-radius: 18px !important; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--world-region) 16%, transparent), transparent 56%) !important; }
body.boom-world .wb-fighter img { filter: drop-shadow(0 18px 16px rgba(0,0,0,.48)); }
body.boom-world .wb-vs { color: var(--world-region) !important; }
body.boom-world #status { border-color: color-mix(in srgb, var(--world-region) 30%, transparent) !important; color: #d9e9e4 !important; }

@media (min-width: 901px) and (pointer: fine) {
  body.boom-world { padding: 12px 14px 34px !important; }
  body.boom-world .wrap { grid-template-columns: minmax(620px, 1fr) minmax(300px, 350px) !important; align-items: start !important; }
  body.boom-world #game-frame { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
  body.boom-world .hud { grid-column: 2 !important; grid-row: 1 !important; }
  body.boom-world #world-chat.world-chat { grid-column: 2 !important; grid-row: 2 !important; }
  body.boom-world .trade-panel { grid-column: 2 !important; }
}

@media (max-width: 900px), (pointer: coarse) {
  body.boom-world { padding-inline: 0 !important; overflow-x: hidden !important; }
  body.boom-world .world-command { border-color: color-mix(in srgb, var(--world-region) 34%, transparent) !important; background: color-mix(in srgb, var(--world-atmosphere) 34%, rgba(3,10,14,.94)) !important; }
  body.boom-world .world-command .world-version { display: none !important; }
  body.boom-world .world-telemetry { gap: 5px !important; }
  body.boom-world .world-chip:nth-child(2), body.boom-world .world-chip:nth-child(4), body.boom-world .world-chip:nth-child(5) { display: block !important; min-width: 0 !important; }
  body.boom-world .world-chip:nth-child(3), body.boom-world .world-chip.live { display: none !important; }
  body.boom-world .wrap { width: 100% !important; }
  body.boom-world #game-frame { border-width: 0 0 2px !important; border-radius: 0 !important; box-shadow: 0 16px 34px rgba(0,0,0,.4) !important; }
  body.boom-world .hud, body.boom-world #world-chat.world-chat, body.boom-world .trade-panel { border-radius: 16px !important; }
  body.boom-world .mon { min-height: 82px !important; }
  body.boom-world .mon img { width: 42px !important; height: 42px !important; }
  body.boom-world #battle { padding: 10px !important; }
  body.boom-world .wbattle { width: min(100%, 520px) !important; max-height: calc(100dvh - 20px); overflow: auto; }
}

@media (max-width: 430px) {
  body.boom-world .world-brand-copy span { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.boom-world .world-chip:nth-child(4) { display: none !important; }
  body.boom-world .wb-fighter img { width: 92px !important; height: 92px !important; }
}

@media (max-width: 359px) {
  body.boom-world .world-command { left: 4px !important; right: 4px !important; }
  body.boom-world .world-brand-copy strong { font-size: 9px !important; }
  body.boom-world .world-quick button { width: 28px !important; min-width: 28px !important; }
  body.boom-world .wb-fighter img { width: 78px !important; height: 78px !important; }
}


/* BOOM MOBILE CLEAN V1 START */
/*
 * Mobile WORLD should prioritize gameplay.
 * Desktop is intentionally untouched.
 */
@media (max-width: 820px), (pointer: coarse) {

  /*
   * Remove duplicate PARTY / BAG / CHAT / NEARBY toolbar.
   * Mobile has its own compact gameplay controls/menu.
   */
  body.boom-world.world-v5 .world-v5-actions {
    display: none !important;
  }

  /*
   * Remove the desktop-style side column completely on mobile.
   * This removes ACTIVE PARTY, partner copy, party slots,
   * desktop chat panel and nearby panel from the gameplay view.
   *
   * Their underlying features remain available through
   * the existing mobile menus/dialogs.
   */
  body.boom-world.world-v5 .world-v5-side {
    display: none !important;
  }

  body.boom-world.world-v5 .world-v5-party-panel,
  body.boom-world.world-v5 .world-v5-chat-panel,
  body.boom-world.world-v5 .world-v5-nearby-panel {
    display: none !important;
  }

  /*
   * Keep only a small location strip below the game.
   */
  body.boom-world.world-v5 .world-v5-toolbar {
    min-height: 0 !important;
    margin-top: 4px !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
  }

  body.boom-world.world-v5 .world-v5-location {
    min-height: 0 !important;
    padding: 5px 7px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body.boom-world.world-v5 .world-v5-location small {
    display: none !important;
  }

  body.boom-world.world-v5 .world-v5-location strong {
    font-size: .58rem !important;
    line-height: 1.1 !important;
  }

  /*
   * No unused space for a hidden side column.
   */
  body.boom-world.world-v5 .wrap,
  body.boom-world.world-v5 .world-v5-stage {
    width: 100% !important;
    max-width: none !important;
  }
}
/* BOOM MOBILE CLEAN V1 END */

/* BOOM MOBILE EMERGENCY V5 START */

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

  /*
   * Ta bort hela dubbla raden under kartan.
   * Platsnamnet finns redan inne på kartan.
   */
  body.world-v5 .world-v5-toolbar {
    display: none !important;
  }


  /*
   * Gamla permanenta mobile dock.
   * Detta är INTE D-pad.
   */
  body.boom-world .world-mobile-dock,
  body.boom-world #world-mobile-dock {
    display: none !important;
  }


  /*
   * Party-slots behövs inte under WORLD på mobil.
   */
  body.boom-world #world-mobile-party,
  body.boom-world .world-mobile-party {
    display: none !important;
  }


  /*
   * Stor duplicerad PRATA / ACTION.
   * Riktiga röda A-knappen är #btn-interact
   * och lämnas helt orörd.
   */
  body.boom-world #btn-mobile-interact {
    display: none !important;
  }


  /*
   * Runtime-kill för den faktiska TALK-raden.
   */
  body.boom-world .boom-mobile-talkbar-killed {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

}

/* BOOM MOBILE EMERGENCY V5 END */