/* =========================================================
   BOOM CUSTOM UI
   Våra visuella overrides ovanpå Portal/Codex.
   Ingen gameplay eller API-logik här.
   ========================================================= */


/* =========================================================
   TRAINER / TIKTOK AVATAR
   ========================================================= */

.portal-trainer-chip__avatar {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;

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

  border-radius: 50%;

  border: 2px solid var(--region-accent) !important;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--region-accent) 25%, #10182c),
      #07101e
    ) !important;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.035),
    0 0 20px color-mix(in srgb, var(--region-accent) 35%, transparent) !important;
}

.portal-trainer-chip__avatar.has-image {
  color: transparent !important;
}

.portal-trainer-chip__avatar img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;

  border-radius: inherit;
}


/* =========================================================
   HERO PARTNER
   Namn + level FRAMFÖR Pokémon
   ========================================================= */

.trainer-hero__pokemon {
  position: relative;
  isolation: isolate;
}

.trainer-hero__pokemon .portal-specimen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}

.trainer-hero__pokemon .portal-specimen > img {
  position: relative;
  z-index: 2;

  filter:
    drop-shadow(0 28px 30px rgba(0,0,0,.58))
    drop-shadow(
      0 0 34px
      color-mix(in srgb, var(--region-accent) 36%, transparent)
    );
}


/* Namnplattan ska ALLTID ligga ovanpå Pokémon */

.trainer-hero__pokemon .portal-specimen > figcaption {
  position: absolute !important;

  z-index: 20 !important;

  left: 50% !important;
  bottom: 20px !important;

  transform: translateX(-50%) !important;

  width: max-content;
  min-width: 230px;
  max-width: 90%;

  padding: 11px 22px 12px;

  text-align: center;

  border:
    1px solid
    color-mix(in srgb, var(--region-accent) 55%, rgba(255,255,255,.15));

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(4,10,25,.96),
      color-mix(in srgb, var(--region-accent) 10%, rgba(5,12,28,.94))
    );

  box-shadow:
    0 16px 40px rgba(0,0,0,.65),
    0 0 28px color-mix(in srgb, var(--region-accent) 20%, transparent);

  backdrop-filter: blur(10px);
}


/* YOUR PARTNER */

.trainer-hero__pokemon .portal-specimen > figcaption small {
  display: block;

  margin-bottom: 4px;

  color: var(--region-accent);

  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;

  text-transform: uppercase;
}


/* Pokémonnamn */

.trainer-hero__pokemon .portal-specimen > figcaption strong {
  display: inline-block;

  color: #fff !important;

  font-family: 'Orbitron', sans-serif;

  font-size: clamp(1.45rem, 2vw, 2.25rem) !important;
  font-weight: 900;

  line-height: 1;

  letter-spacing: .035em;
  text-transform: uppercase;

  text-shadow:
    0 3px 12px rgba(0,0,0,.9),
    0 0 15px color-mix(in srgb, var(--region-accent) 25%, transparent);
}


/* Level */

.trainer-hero__pokemon .portal-specimen > figcaption span {
  display: inline-block;

  margin-left: 12px;

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

  font-size: .85rem !important;
  font-weight: 900;

  vertical-align: middle;
}


/* =========================================================
   REGION HERO GLOW
   ========================================================= */

.trainer-hero__pokemon::before {
  content: "";

  position: absolute;

  z-index: 0;

  width: min(440px, 80%);
  aspect-ratio: 1;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -52%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--region-accent) 30%, transparent) 0,
      color-mix(in srgb, var(--region-accent) 13%, transparent) 35%,
      transparent 70%
    );

  filter: blur(10px);

  pointer-events: none;
}


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

@media (max-width: 768px) {

  .portal-trainer-chip__avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .trainer-hero__pokemon .portal-specimen {
    min-height: 300px;
  }

  .trainer-hero__pokemon .portal-specimen > figcaption {
    bottom: 8px !important;
    min-width: 190px;
    padding: 9px 15px;
  }

  .trainer-hero__pokemon .portal-specimen > figcaption strong {
    font-size: 1.3rem !important;
  }
}

/* =========================================================
   BOOM PARTNER STAGE V2
   Jämnare presentation mellan små och stora Pokémon
   ========================================================= */

.trainer-hero {
  min-height: 560px !important;
}

.trainer-hero__pokemon {
  min-height: 430px;
  display: grid;
  place-items: center;
}

/* Gemensam partnerbild */
.trainer-hero__pokemon .portal-specimen > img {
  width: auto !important;
  height: auto !important;

  max-width: min(430px, 34vw) !important;
  max-height: 390px !important;

  object-fit: contain !important;

  transform-origin: center bottom;
}

/*
  Pixelart behöver större visuell skala.
  image-rendering gör att den inte blir smetig.
*/
.trainer-hero__pokemon .portal-specimen > img[src*="/gen3-preview/"] {
  width: clamp(220px, 20vw, 310px) !important;
  max-width: none !important;
  max-height: none !important;

  image-rendering: pixelated;
}

/* Vanliga sprite-assets, om Hoenn använder normal-route */
.trainer-hero__pokemon .portal-specimen > img[src*="/pokeimg/normal/"] {
  min-width: 220px;
}

/* Namnplattan närmare Pokémon */
.trainer-hero__pokemon .portal-specimen > figcaption {
  bottom: 6px !important;
  min-width: 250px;
}

/* Mindre gigantisk tränarrubrik */
.trainer-hero__identity h1 {
  font-size: clamp(2.8rem, 4.4vw, 5rem) !important;
}

/* Dashboard-pillarna bort från Hero */
.trainer-hero__telemetry {
  display: none !important;
}

/* Hero ska kännas kompaktare */
.trainer-hero__identity {
  padding-top: 0 !important;
}

@media (max-width: 900px) {

  .trainer-hero {
    min-height: auto !important;
  }

  .trainer-hero__pokemon {
    min-height: 330px;
  }

  .trainer-hero__pokemon .portal-specimen > img {
    max-width: min(340px, 72vw) !important;
    max-height: 310px !important;
  }

  .trainer-hero__pokemon .portal-specimen > img[src*="/gen3-preview/"] {
    width: min(270px, 64vw) !important;
  }
}


/* =========================================================
   BOOM ADVENTURE HUB V1
   ========================================================= */

.boom-adventure-hub {
  position: relative;

  max-width: 1500px;

  margin:
    clamp(28px, 4vw, 60px)
    auto
    80px;

  padding: 0 4px;
}


/* RUBRIK */

.boom-adventure-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 24px;
  padding: 0 4px;
}

.boom-adventure-eyebrow {
  display: block;

  color: var(--region-accent);

  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .17em;
}

.boom-adventure-heading h2 {
  margin: 7px 0 4px;

  color: #fff;

  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.1rem, 4vw, 4.4rem);
  font-weight: 900;

  line-height: .95;

  letter-spacing: -.035em;
}

.boom-adventure-heading p {
  margin: 10px 0 0;

  color: rgba(225,238,255,.68);

  font-size: 1rem;
  font-weight: 600;
}

.boom-adventure-region {
  display: grid;

  min-width: 190px;

  padding: 12px 16px;

  border:
    1px solid
    color-mix(in srgb, var(--region-accent) 30%, rgba(255,255,255,.08));

  border-radius: 14px;

  background:
    color-mix(in srgb, var(--region-accent) 6%, rgba(5,12,27,.82));
}

.boom-adventure-region small {
  color: rgba(220,235,255,.45);

  font-size: .55rem;
  font-weight: 900;

  letter-spacing: .15em;
}

.boom-adventure-region strong {
  margin-top: 3px;

  color: var(--region-accent);

  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
}

.boom-adventure-region span {
  margin-top: 2px;

  color: rgba(220,235,255,.55);

  font-size: .7rem;
}


/* =========================================================
   GRID
   ========================================================= */

.boom-adventure-grid {
  display: grid;

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

  gap: 16px;
}


/* =========================================================
   CARD BASE
   ========================================================= */

.boom-adventure-card {
  --card-accent: var(--region-accent);

  position: relative;

  min-height: 250px;

  overflow: hidden;

  padding: 28px;

  border:
    1px solid
    color-mix(in srgb, var(--card-accent) 30%, rgba(120,160,220,.18));

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 85% 30%,
      color-mix(in srgb, var(--card-accent) 17%, transparent),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(10,20,48,.97),
      rgba(8,13,35,.96)
    );

  box-shadow:
    0 16px 40px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.035);

  color: #fff;

  text-decoration: none;

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

.boom-adventure-card::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent 35%,
      color-mix(in srgb, var(--card-accent) 7%, transparent)
    );
}

.boom-adventure-card:hover {
  z-index: 2;

  transform: translateY(-5px);

  border-color:
    color-mix(in srgb, var(--card-accent) 68%, white 4%);

  box-shadow:
    0 24px 58px rgba(0,0,0,.4),
    0 0 34px
      color-mix(in srgb, var(--card-accent) 14%, transparent);
}


/* =========================================================
   GRID SIZES
   ========================================================= */

.boom-adventure-card--world {
  grid-column: span 7;

  min-height: 330px;
}

.boom-adventure-card--pokedex {
  grid-column: span 5;

  min-height: 330px;
}

.boom-adventure-card--live,
.boom-adventure-card--progress,
.boom-adventure-card--inventory {
  grid-column: span 4;
}

.boom-adventure-card--society,
.boom-adventure-card--activities {
  grid-column: span 6;
}


/* =========================================================
   INDIVIDUAL COLORS
   ========================================================= */

.boom-adventure-card--world {
  --card-accent: var(--region-accent);
}

.boom-adventure-card--pokedex {
  --card-accent: #63e9ff;
}

.boom-adventure-card--live {
  --card-accent: #ff4f82;
}

.boom-adventure-card--progress {
  --card-accent: #b78cff;
}

.boom-adventure-card--inventory {
  --card-accent: #ffd557;
}

.boom-adventure-card--society {
  --card-accent: #52e6bb;
}

.boom-adventure-card--activities {
  --card-accent: #d26cff;
}


/* =========================================================
   TEXT
   ========================================================= */

.boom-card-copy {
  position: relative;
  z-index: 4;

  width: 62%;
}

.boom-adventure-card--live .boom-card-copy,
.boom-adventure-card--progress .boom-card-copy,
.boom-adventure-card--inventory .boom-card-copy {
  width: 67%;
}

.boom-card-kicker {
  display: block;

  margin-bottom: 12px;

  color: var(--card-accent);

  font-family: 'Orbitron', sans-serif;
  font-size: .62rem;
  font-weight: 900;

  letter-spacing: .14em;

  text-transform: uppercase;
}

.boom-adventure-card h3 {
  margin: 0;

  color: #fff;

  font-family: 'Orbitron', sans-serif;

  font-size: clamp(1.45rem, 2.5vw, 2.65rem);
  font-weight: 900;

  line-height: .98;

  letter-spacing: -.025em;
}

.boom-adventure-card p {
  max-width: 470px;

  margin: 13px 0 18px;

  color: rgba(222,235,255,.72);

  font-size: .92rem;
  font-weight: 600;

  line-height: 1.45;
}

.boom-card-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 18px;
}

.boom-card-meta span {
  padding: 5px 8px;

  border:
    1px solid
    color-mix(in srgb, var(--card-accent) 22%, rgba(255,255,255,.05));

  border-radius: 999px;

  background:
    color-mix(in srgb, var(--card-accent) 6%, rgba(0,0,0,.28));

  color: rgba(235,245,255,.72);

  font-size: .58rem;
  font-weight: 900;

  letter-spacing: .06em;
}

.boom-card-action {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 4px;

  color: #fff;

  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  font-weight: 900;

  letter-spacing: .035em;
}

.boom-card-action i {
  color: var(--card-accent);

  font-style: normal;

  transition: transform .2s ease;
}

.boom-adventure-card:hover .boom-card-action i {
  transform: translateX(5px);
}


/* =========================================================
   POKÉMON ART
   ========================================================= */

.boom-card-pokemon {
  position: absolute;

  z-index: 3;

  right: 2%;
  bottom: -5%;

  width: 40%;
  height: 88%;

  object-fit: contain;

  pointer-events: none;

  filter:
    drop-shadow(0 22px 22px rgba(0,0,0,.52))
    drop-shadow(
      0 0 20px
      color-mix(in srgb, var(--card-accent) 22%, transparent)
    );

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    filter .28s ease;
}

.boom-adventure-card:hover .boom-card-pokemon {
  transform:
    translateY(-5px)
    scale(1.055);

  filter:
    drop-shadow(0 28px 25px rgba(0,0,0,.58))
    drop-shadow(
      0 0 30px
      color-mix(in srgb, var(--card-accent) 33%, transparent)
    );
}


/* WORLD + POKEDEX får större Pokémon */

.boom-adventure-card--world .boom-card-pokemon {
  width: 47%;
  right: -1%;
}

.boom-adventure-card--pokedex .boom-card-pokemon {
  width: 48%;
  right: -1%;
}


/* =========================================================
   TA BORT DEN GAMLA DASHBOARD-KÄNSLAN
   ========================================================= */

.trainer-home > .trainer-journey,
.trainer-home > .trainer-utilities,
.trainer-home > .society-transmission {
  display: none !important;
}


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

@media (max-width: 1100px) {

  .boom-adventure-card--world,
  .boom-adventure-card--pokedex {
    grid-column: span 6;
  }

  .boom-adventure-card--live,
  .boom-adventure-card--progress,
  .boom-adventure-card--inventory {
    grid-column: span 4;
  }

  .boom-adventure-card {
    padding: 22px;
  }
}


@media (max-width: 800px) {

  .boom-adventure-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .boom-adventure-region {
    min-width: 0;
    width: 100%;
  }

  .boom-adventure-card--world,
  .boom-adventure-card--pokedex,
  .boom-adventure-card--live,
  .boom-adventure-card--progress,
  .boom-adventure-card--inventory,
  .boom-adventure-card--society,
  .boom-adventure-card--activities {
    grid-column: 1 / -1;
  }

  .boom-adventure-card {
    min-height: 230px;
  }

  .boom-card-copy {
    width: 66% !important;
  }

  .boom-card-pokemon {
    width: 42% !important;
  }
}


@media (max-width: 480px) {

  .boom-adventure-hub {
    margin-top: 24px;
  }

  .boom-adventure-heading h2 {
    font-size: 2rem;
  }

  .boom-adventure-grid {
    gap: 11px;
  }

  .boom-adventure-card {
    min-height: 210px;

    padding: 18px;

    border-radius: 17px;
  }

  .boom-card-copy {
    width: 70% !important;
  }

  .boom-adventure-card h3 {
    font-size: 1.45rem;
  }

  .boom-adventure-card p {
    font-size: .78rem;
  }

  .boom-card-pokemon {
    right: -8%;

    width: 47% !important;
  }
}


@media (prefers-reduced-motion: reduce) {

  .boom-adventure-card,
  .boom-card-pokemon,
  .boom-card-action i {
    transition: none !important;
  }
}



/* =========================================================
   BOOM MOBILE GAME UI V1
   320px - 600px
   ========================================================= */

@media (max-width: 600px) {

  /* -------------------------------------------------------
     GLOBAL
     ------------------------------------------------------- */

  body {
    overflow-x: hidden !important;
  }

  .portal-main,
  .portal-content,
  .trainer-home {
    width: 100% !important;
    max-width: 100% !important;
  }


  /* -------------------------------------------------------
     TOP HEADER
     ------------------------------------------------------- */

  .portal-topbar {
    min-height: 58px !important;
    padding: 7px 12px !important;
  }

  .portal-region-status {
    min-width: 0 !important;
  }

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

  .portal-region-status strong {
    font-size: .95rem !important;
  }

  .portal-trainer-chip {
    gap: 7px !important;
  }

  .portal-trainer-chip__avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .portal-trainer-chip > span {
    display: none !important;
  }


  /* -------------------------------------------------------
     HERO = MOBILE GAME CARD
     ------------------------------------------------------- */

  .trainer-hero {
    display: grid !important;

    grid-template-columns: 1fr !important;
    grid-template-areas:
      "identity"
      "pokemon"
      "command" !important;

    gap: 0 !important;

    min-height: 0 !important;

    margin: 12px 10px 0 !important;
    padding: 20px 18px 18px !important;

    overflow: hidden !important;

    border-radius: 24px !important;

    background:
      radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--region-accent) 16%, transparent),
        transparent 47%
      ),
      linear-gradient(
        160deg,
        rgba(5,14,24,.98),
        rgba(7,18,25,.96)
      ) !important;
  }


  /* -------------------------------------------------------
     TRAINER TEXT
     ------------------------------------------------------- */

  .trainer-hero__identity {
    grid-area: identity !important;

    position: relative !important;
    z-index: 10 !important;

    width: 100% !important;

    padding: 0 !important;

    text-align: left !important;
  }

  .trainer-hero__identity .portal-kicker {
    font-size: .58rem !important;
    letter-spacing: .14em !important;
  }

  .trainer-hero__location {
    margin: 8px 0 0 !important;

    font-size: .7rem !important;
  }

  .trainer-hero__identity h1 {
    margin: 9px 0 0 !important;

    font-size: clamp(2rem, 10.5vw, 2.9rem) !important;

    line-height: .92 !important;
    letter-spacing: -.045em !important;
  }

  .trainer-hero__identity h1 small {
    margin-bottom: 7px !important;

    font-size: .72rem !important;
  }

  .trainer-hero__designation {
    display: block !important;

    margin-top: 8px !important;

    font-size: .64rem !important;
  }

  .trainer-hero__promise {
    max-width: 260px !important;

    margin: 12px 0 0 !important;

    font-size: .78rem !important;
    line-height: 1.35 !important;

    opacity: .72 !important;
  }


  /* -------------------------------------------------------
     PARTNER STAGE
     ------------------------------------------------------- */

  .trainer-hero__pokemon {
    grid-area: pokemon !important;

    position: relative !important;

    min-height: 285px !important;
    height: 285px !important;

    margin-top: 4px !important;

    overflow: visible !important;
  }

  .trainer-hero__orbit {
    transform: scale(.72) !important;
  }

  .trainer-hero__pokemon::before {
    width: 330px !important;

    opacity: .8 !important;
  }

  .trainer-hero__pokemon .portal-specimen {
    min-height: 285px !important;
    height: 285px !important;

    overflow: visible !important;
  }

  /*
    Viktigt:
    Partner får aldrig bli desktop-stor på telefon.
  */

  .trainer-hero__pokemon .portal-specimen > img,
  .trainer-hero__pokemon .portal-specimen > img[src*="/pokeimg/normal/"],
  .trainer-hero__pokemon .portal-specimen > img[src*="/gen3-preview/"] {
    position: absolute !important;

    left: 50% !important;
    bottom: 42px !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;

    max-width: 260px !important;
    max-height: 225px !important;

    transform: translateX(-50%) !important;

    object-fit: contain !important;
  }


  /* Partnernamnet sitter som HUD framför Pokémon */

  .trainer-hero__pokemon .portal-specimen > figcaption {
    left: 50% !important;
    bottom: 4px !important;

    z-index: 30 !important;

    width: auto !important;
    min-width: 205px !important;
    max-width: calc(100vw - 70px) !important;

    padding: 8px 15px 9px !important;

    transform: translateX(-50%) !important;

    border-radius: 12px !important;
  }

  .trainer-hero__pokemon .portal-specimen > figcaption small {
    margin-bottom: 3px !important;

    font-size: .48rem !important;
  }

  .trainer-hero__pokemon .portal-specimen > figcaption strong {
    font-size: 1.25rem !important;
  }

  .trainer-hero__pokemon .portal-specimen > figcaption span {
    margin-left: 8px !important;

    font-size: .7rem !important;
  }


  /* -------------------------------------------------------
     CONTINUE + PARTY
     ------------------------------------------------------- */

  .trainer-hero__command {
    grid-area: command !important;

    position: relative !important;
    z-index: 40 !important;

    width: 100% !important;

    margin-top: 12px !important;
  }

  .trainer-hero__continue {
    display: block !important;

    margin: 0 0 7px !important;

    font-size: .55rem !important;
    letter-spacing: .1em !important;
  }

  .portal-world-action {
    position: relative !important;

    width: 100% !important;
    min-height: 82px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    padding: 14px 18px !important;

    border-radius: 17px !important;
  }

  .portal-world-action b {
    max-width: 80% !important;

    font-size: clamp(1.25rem, 6vw, 1.7rem) !important;
    line-height: .94 !important;
  }

  .portal-world-action > span {
    margin-top: 7px !important;

    font-size: .6rem !important;
  }


  /* Party blir en riktig horisontell GameBoy-style party rail */

  .trainer-hero__party {
    width: 100% !important;

    margin-top: 13px !important;
  }

  .trainer-hero__party > span {
    font-size: .55rem !important;
  }

  .trainer-hero__party ol {
    display: flex !important;

    gap: 7px !important;

    width: 100% !important;

    margin-top: 6px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x proximity;

    scrollbar-width: none;
  }

  .trainer-hero__party ol::-webkit-scrollbar {
    display: none;
  }

  .portal-party-slot {
    flex: 0 0 62px !important;

    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;

    scroll-snap-align: start;

    border-radius: 11px !important;
  }

  .portal-party-slot img {
    width: 38px !important;
    height: 38px !important;
  }

  .portal-party-slot span b {
    max-width: 54px !important;

    overflow: hidden !important;

    font-size: .43rem !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .portal-party-slot span small {
    font-size: .37rem !important;
  }


  /* -------------------------------------------------------
     ADVENTURE HUB
     ------------------------------------------------------- */

  .boom-adventure-hub {
    width: auto !important;

    margin: 28px 10px 100px !important;
    padding: 0 !important;
  }

  .boom-adventure-heading {
    display: block !important;

    margin-bottom: 18px !important;
  }

  .boom-adventure-eyebrow {
    font-size: .55rem !important;
  }

  .boom-adventure-heading h2 {
    max-width: 100% !important;

    margin-top: 6px !important;

    font-size: clamp(2rem, 10vw, 2.8rem) !important;

    line-height: .9 !important;
  }

  .boom-adventure-heading p {
    margin-top: 9px !important;

    font-size: .82rem !important;
  }


  /* Regionen visas redan högst upp + i Hero */

  .boom-adventure-region {
    display: none !important;
  }


  /* -------------------------------------------------------
     ADVENTURE CARDS
     ------------------------------------------------------- */

  .boom-adventure-grid {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 12px !important;
  }

  .boom-adventure-card,
  .boom-adventure-card--world,
  .boom-adventure-card--pokedex,
  .boom-adventure-card--live,
  .boom-adventure-card--progress,
  .boom-adventure-card--inventory,
  .boom-adventure-card--society,
  .boom-adventure-card--activities {
    grid-column: 1 !important;

    min-height: 185px !important;

    padding: 19px !important;

    border-radius: 18px !important;
  }


  /* WORLD + POKEDEX får vara lite större bosskort */

  .boom-adventure-card--world,
  .boom-adventure-card--pokedex {
    min-height: 225px !important;
  }

  .boom-card-copy,
  .boom-adventure-card--live .boom-card-copy,
  .boom-adventure-card--progress .boom-card-copy,
  .boom-adventure-card--inventory .boom-card-copy {
    position: relative !important;

    z-index: 10 !important;

    width: 63% !important;
  }

  .boom-card-kicker {
    margin-bottom: 8px !important;

    font-size: .52rem !important;
  }

  .boom-adventure-card h3 {
    font-size: clamp(1.45rem, 7.4vw, 2rem) !important;
  }

  .boom-adventure-card p {
    margin: 9px 0 12px !important;

    font-size: .74rem !important;
    line-height: 1.32 !important;
  }

  .boom-card-meta {
    margin-bottom: 11px !important;
  }

  .boom-card-meta span {
    font-size: .45rem !important;
  }

  .boom-card-action {
    font-size: .54rem !important;
  }


  /* Pokémon ska dominera högersidan av varje spelkort */

  .boom-card-pokemon,
  .boom-adventure-card--world .boom-card-pokemon,
  .boom-adventure-card--pokedex .boom-card-pokemon {
    right: -2% !important;
    bottom: -4% !important;

    width: 43% !important;
    height: 92% !important;

    object-fit: contain !important;
  }

  .boom-adventure-card--world .boom-card-pokemon,
  .boom-adventure-card--pokedex .boom-card-pokemon {
    width: 48% !important;
  }


  /* -------------------------------------------------------
     MOBILE NAV = EN RAD, INTE TVÅ
     ------------------------------------------------------- */

  .portal-rail {
    position: fixed !important;

    z-index: 999 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    height: 76px !important;

    display: flex !important;

    align-items: stretch !important;

    padding:
      7px
      6px
      max(7px, env(safe-area-inset-bottom)) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border-top:
      1px solid
      color-mix(in srgb, var(--region-accent) 30%, rgba(255,255,255,.08)) !important;

    background:
      rgba(3,11,18,.96) !important;

    backdrop-filter: blur(18px);

    scrollbar-width: none;
  }

  .portal-rail::-webkit-scrollbar {
    display: none;
  }

  .portal-rail nav {
    display: flex !important;

    flex-wrap: nowrap !important;

    gap: 3px !important;

    min-width: max-content !important;

    margin: 0 !important;
  }

  .portal-rail nav a,
  .portal-rail nav button {
    flex: 0 0 64px !important;

    width: 64px !important;
    min-width: 64px !important;
    height: 60px !important;

    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 4px !important;

    margin: 0 !important;
    padding: 4px !important;

    border-radius: 13px !important;
  }

  .portal-rail nav a[aria-current="page"],
  .portal-rail nav a.is-active {
    border:
      1px solid
      color-mix(in srgb, var(--region-accent) 55%, transparent) !important;

    background:
      color-mix(in srgb, var(--region-accent) 11%, rgba(5,13,20,.9)) !important;

    box-shadow:
      0 0 18px
      color-mix(in srgb, var(--region-accent) 10%, transparent) !important;
  }

  .portal-rail nav span,
  .portal-rail nav small,
  .portal-rail nav strong {
    font-size: .48rem !important;
  }


  /* -------------------------------------------------------
     EXTRA LITEN TELEFON
     ------------------------------------------------------- */

  @media (max-width: 390px) {

    .trainer-hero {
      margin-inline: 7px !important;
      padding-inline: 14px !important;
    }

    .trainer-hero__identity h1 {
      font-size: 2rem !important;
    }

    .trainer-hero__pokemon {
      height: 255px !important;
      min-height: 255px !important;
    }

    .trainer-hero__pokemon .portal-specimen {
      height: 255px !important;
      min-height: 255px !important;
    }

    .trainer-hero__pokemon .portal-specimen > img,
    .trainer-hero__pokemon .portal-specimen > img[src*="/pokeimg/normal/"],
    .trainer-hero__pokemon .portal-specimen > img[src*="/gen3-preview/"] {
      max-width: 225px !important;
      max-height: 195px !important;
    }

    .boom-adventure-hub {
      margin-inline: 8px !important;
    }

    .boom-card-copy {
      width: 66% !important;
    }
  }

}



/* =========================================================
   BOOM DESKTOP GAME UI V2
   Endast desktop. Mobilen fixas senare.
   ========================================================= */

@media (min-width: 601px) {

  /* -------------------------------------------------------
     HERO KOMPAKTARE
     ------------------------------------------------------- */

  .trainer-hero {
    min-height: 475px !important;

    overflow: hidden !important;

    box-shadow:
      0 26px 70px rgba(0,0,0,.34),
      inset 0 1px rgba(255,255,255,.035),
      0 0 55px
        color-mix(in srgb, var(--region-accent) 6%, transparent) !important;
  }

  .trainer-hero__identity h1 {
    font-size: clamp(2.7rem, 3.8vw, 4.4rem) !important;

    line-height: .94 !important;
  }

  .trainer-hero__promise {
    max-width: 320px !important;

    font-size: .92rem !important;
  }

  .trainer-hero__pokemon {
    min-height: 350px !important;
    height: 350px !important;
  }

  .trainer-hero__pokemon .portal-specimen {
    min-height: 350px !important;
    height: 350px !important;
  }

  .trainer-hero__pokemon .portal-specimen > img {
    max-width: 390px !important;
    max-height: 325px !important;
  }

  .trainer-hero__pokemon .portal-specimen > figcaption {
    bottom: 1px !important;
  }


  /* -------------------------------------------------------
     DUBBEL REGION BORT
     ------------------------------------------------------- */

  .boom-adventure-region {
    display: none !important;
  }

  .boom-adventure-heading {
    justify-content: flex-start !important;
  }


  /* -------------------------------------------------------
     RUBRIKEN MER SPELSTART
     ------------------------------------------------------- */

  .boom-adventure-heading {
    position: relative;

    padding: 6px 0 14px !important;
  }

  .boom-adventure-heading::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: min(430px, 45vw);
    height: 2px;

    background:
      linear-gradient(
        90deg,
        var(--region-accent),
        color-mix(in srgb, var(--region-accent) 12%, transparent),
        transparent
      );

    box-shadow:
      0 0 16px
      color-mix(in srgb, var(--region-accent) 30%, transparent);
  }

  .boom-adventure-heading h2 {
    text-shadow:
      0 5px 20px rgba(0,0,0,.55);
  }


  /* -------------------------------------------------------
     GAME CARDS
     ------------------------------------------------------- */

  .boom-adventure-card {
    isolation: isolate;

    border-width: 1px !important;

    background:
      radial-gradient(
        circle at 82% 40%,
        color-mix(in srgb, var(--card-accent) 24%, transparent),
        transparent 42%
      ),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--card-accent) 7%, #0b1531),
        #070d20 68%
      ) !important;

    box-shadow:
      0 20px 48px rgba(0,0,0,.34),
      inset 0 1px rgba(255,255,255,.045) !important;
  }

  /* Game-HUD hörn */
  .boom-adventure-card::after {
    content: "";

    position: absolute;

    z-index: 2;

    top: 12px;
    right: 12px;

    width: 26px;
    height: 26px;

    border-top: 2px solid
      color-mix(in srgb, var(--card-accent) 75%, white 8%);

    border-right: 2px solid
      color-mix(in srgb, var(--card-accent) 75%, white 8%);

    opacity: .55;

    pointer-events: none;
  }

  .boom-adventure-card:hover {
    transform: translateY(-6px) scale(1.006) !important;

    box-shadow:
      0 28px 62px rgba(0,0,0,.45),
      0 0 36px
        color-mix(in srgb, var(--card-accent) 18%, transparent) !important;
  }


  /* -------------------------------------------------------
     TVÅ STORA KORT
     ------------------------------------------------------- */

  .boom-adventure-card--world,
  .boom-adventure-card--pokedex {
    min-height: 345px !important;

    padding: 32px !important;
  }

  .boom-adventure-card--world .boom-card-pokemon,
  .boom-adventure-card--pokedex .boom-card-pokemon {
    width: 51% !important;
    height: 94% !important;

    right: -1% !important;
    bottom: -4% !important;
  }


  /* -------------------------------------------------------
     FEM MINDRE, MEN NU REJÄLA SPELKORT
     ------------------------------------------------------- */

  .boom-adventure-card--live,
  .boom-adventure-card--progress,
  .boom-adventure-card--inventory {
    min-height: 290px !important;

    padding: 26px !important;
  }

  .boom-adventure-card--society,
  .boom-adventure-card--activities {
    min-height: 285px !important;

    padding: 27px !important;
  }

  .boom-adventure-card--live .boom-card-pokemon,
  .boom-adventure-card--progress .boom-card-pokemon,
  .boom-adventure-card--inventory .boom-card-pokemon {
    width: 47% !important;
    height: 90% !important;

    right: -3% !important;
  }

  .boom-adventure-card--society .boom-card-pokemon,
  .boom-adventure-card--activities .boom-card-pokemon {
    width: 42% !important;
    height: 94% !important;
  }


  /* -------------------------------------------------------
     STÖRRE TEXT PÅ SPELKORT
     ------------------------------------------------------- */

  .boom-adventure-card--live h3,
  .boom-adventure-card--progress h3,
  .boom-adventure-card--inventory h3,
  .boom-adventure-card--society h3,
  .boom-adventure-card--activities h3 {
    font-size: clamp(1.8rem, 2vw, 2.45rem) !important;
  }

  .boom-adventure-card p {
    font-size: .98rem !important;
    line-height: 1.42 !important;
  }


  /* -------------------------------------------------------
     ACTION = SPELKNAPP
     ------------------------------------------------------- */

  .boom-card-action {
    padding: 8px 12px !important;

    border:
      1px solid
      color-mix(in srgb, var(--card-accent) 30%, rgba(255,255,255,.08));

    border-radius: 9px;

    background:
      color-mix(in srgb, var(--card-accent) 7%, rgba(3,8,20,.62));

    box-shadow:
      inset 0 1px rgba(255,255,255,.03);

    transition:
      background .2s ease,
      border-color .2s ease,
      transform .2s ease !important;
  }

  .boom-adventure-card:hover .boom-card-action {
    border-color:
      color-mix(in srgb, var(--card-accent) 65%, white 5%);

    background:
      color-mix(in srgb, var(--card-accent) 14%, rgba(3,8,20,.72));

    transform: translateX(3px);
  }


  /* -------------------------------------------------------
     POKÉMON MER LEVANDE
     ------------------------------------------------------- */

  .boom-card-pokemon {
    filter:
      drop-shadow(0 25px 24px rgba(0,0,0,.58))
      drop-shadow(
        0 0 26px
        color-mix(in srgb, var(--card-accent) 30%, transparent)
      ) !important;
  }

  .boom-adventure-card:hover .boom-card-pokemon {
    transform:
      translateY(-7px)
      scale(1.075) !important;
  }


  /* -------------------------------------------------------
     KORTENS KICKERS SOM GAME CATEGORY
     ------------------------------------------------------- */

  .boom-card-kicker {
    display: inline-flex !important;

    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    border-radius: 999px;

    background:
      color-mix(in srgb, var(--card-accent) 9%, rgba(0,0,0,.25));

    box-shadow:
      inset 0 0 0 1px
      color-mix(in srgb, var(--card-accent) 17%, transparent);
  }

  .boom-card-kicker::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--card-accent);

    box-shadow:
      0 0 8px var(--card-accent);
  }

}



/* BOOM NAV ACHIEVEMENT ALERT */

.portal-nav-item {
  position: relative;
}

.portal-nav-alert {
  position: absolute !important;
  top: 8px;
  right: 9px;

  width: 20px;
  height: 20px;

  display: grid !important;
  place-items: center;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 999px;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ff9a9a 0%,
      #ff3b50 30%,
      #d70c29 68%,
      #760617 100%
    );

  border: 2px solid rgba(255,255,255,.9);

  color: #fff !important;

  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;

  z-index: 50;

  box-shadow:
    0 0 0 3px rgba(255,48,72,.12),
    0 0 18px rgba(255,48,72,.7),
    0 5px 12px rgba(0,0,0,.45);

  animation:
    boom-achievement-pulse
    1.4s ease-in-out infinite;
}

.portal-nav-alert[hidden] {
  display: none !important;
}

.portal-nav-item.has-nav-alert {
  border-color: rgba(255,85,105,.32);
}

@keyframes boom-achievement-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-nav-alert {
    animation: none;
  }
}


/* HOME V3 // PARTY + TROPHY + LEAGUE */


/* ============================================================
   ACTIVE PARTY
   Gör laget till en riktig Pokemon-panel istället för 6 små
   miniatyrkort.
   ============================================================ */

@media (min-width: 1100px) {

  .trainer-hero {
    min-height: 510px;
  }

  .trainer-hero__command {
    min-width: 0;
  }

  .trainer-hero__party {
    width: 100%;
    margin-top: 14px;
  }

  .trainer-hero__party > span {
    display: block;

    margin-bottom: 9px;

    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .10em;

    color: rgba(255,255,255,.68);
  }

  .trainer-hero__party ol {
    width: 100%;

    display: grid !important;

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

    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
  }

  .trainer-hero__party ol > li {
    position: relative;

    min-width: 0 !important;
    min-height: 92px !important;

    margin: 0 !important;
    padding: 7px 7px 6px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;

    border-radius: 13px !important;

    overflow: hidden;

    background:
      radial-gradient(
        circle at 50% 30%,
        rgba(255,255,255,.085),
        transparent 47%
      ),
      linear-gradient(
        180deg,
        rgba(27,25,35,.95),
        rgba(12,15,22,.98)
      ) !important;

    border:
      1px solid
      rgba(255,255,255,.14) !important;

    box-shadow:
      inset 0 0 22px rgba(255,255,255,.018),
      0 7px 18px rgba(0,0,0,.18);
  }

  .trainer-hero__party ol > li:first-child {
    border-color:
      rgba(255,106,95,.58) !important;

    box-shadow:
      inset 0 0 24px rgba(255,75,67,.07),
      0 0 18px rgba(255,75,67,.08),
      0 8px 20px rgba(0,0,0,.22);
  }


  /* POKEMON */

  .trainer-hero__party li img {
    position: relative !important;

    inset: auto !important;

    width: 60px !important;
    height: 60px !important;

    min-width: 60px !important;
    min-height: 60px !important;

    max-width: 60px !important;
    max-height: 60px !important;

    margin:
      -4px auto 1px !important;

    object-fit: contain !important;

    transform: none !important;

    opacity: 1 !important;

    z-index: 2;

    filter:
      drop-shadow(
        0 7px 8px
        rgba(0,0,0,.48)
      ) !important;
  }


  /* TEXT */

  .trainer-hero__party li b,
  .trainer-hero__party li strong {
    position: relative !important;

    inset: auto !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    color: #fff !important;

    font-size: .64rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;

    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;

    z-index: 4;
  }

  .trainer-hero__party li small,
  .trainer-hero__party li span {
    position: relative !important;

    inset: auto !important;

    display: block;

    max-width: 100%;

    margin-top: 2px !important;

    color:
      rgba(255,255,255,.60) !important;

    font-size: .49rem !important;
    line-height: 1.1 !important;

    text-align: center !important;

    z-index: 4;
  }

}


/* ============================================================
   ACHIEVEMENTS
   ============================================================ */

.boom-adventure-card--achievements {
  grid-column: span 6;

  min-height: 320px;

  border-color:
    rgba(255,201,73,.38);

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(255,201,66,.20),
      transparent 37%
    ),
    radial-gradient(
      circle at 25% 120%,
      rgba(255,137,35,.15),
      transparent 46%
    ),
    linear-gradient(
      125deg,
      #291d09 0%,
      #17140f 54%,
      #091017 100%
    );
}

.boom-adventure-card--achievements
.boom-card-kicker {
  color: #ffda70;

  border-color:
    rgba(255,207,78,.40);

  background:
    rgba(255,195,45,.10);
}

.boom-adventure-card--achievements
.boom-card-action {
  color: #ffe598;

  border-color:
    rgba(255,211,89,.44);
}

.boom-adventure-card--achievements
.boom-card-pokemon {
  width: min(44%, 325px);

  right: 2%;
  bottom: -4%;

  max-height: 96%;

  filter:
    drop-shadow(
      0 20px 24px rgba(0,0,0,.55)
    )
    drop-shadow(
      0 0 28px rgba(255,200,70,.15)
    );
}

.boom-adventure-card--achievements:hover {
  border-color:
    rgba(255,219,108,.75);

  box-shadow:
    0 22px 55px rgba(0,0,0,.35),
    0 0 35px rgba(255,198,59,.08);
}


/* ============================================================
   ELITE FOUR
   ============================================================ */

.boom-adventure-card--league {
  grid-column: span 6;

  min-height: 320px;

  border-color:
    rgba(207,130,255,.40);

  background:
    radial-gradient(
      circle at 79% 43%,
      rgba(255,190,68,.16),
      transparent 35%
    ),
    radial-gradient(
      circle at 40% 125%,
      rgba(125,59,255,.30),
      transparent 49%
    ),
    linear-gradient(
      125deg,
      #271032 0%,
      #151025 54%,
      #090e17 100%
    );
}

.boom-adventure-card--league
.boom-card-kicker {
  color: #e4a9ff;

  border-color:
    rgba(210,142,255,.40);

  background:
    rgba(173,76,255,.10);
}

.boom-adventure-card--league
.boom-card-action {
  color: #f0caff;

  border-color:
    rgba(215,148,255,.44);
}

.boom-adventure-card--league
.boom-card-pokemon {
  width: min(45%, 340px);

  right: 1%;
  bottom: -5%;

  max-height: 97%;

  filter:
    drop-shadow(
      0 21px 25px rgba(0,0,0,.57)
    )
    drop-shadow(
      0 0 31px rgba(195,104,255,.16)
    );
}

.boom-adventure-card--league:hover {
  border-color:
    rgba(224,163,255,.76);

  box-shadow:
    0 22px 55px rgba(0,0,0,.36),
    0 0 36px rgba(187,93,255,.10);
}


/* READY REWARD */

.boom-card-meta-alert {
  color: #ffe28c !important;

  border-color:
    rgba(255,204,72,.50) !important;

  background:
    rgba(255,194,42,.12) !important;

  box-shadow:
    0 0 18px
    rgba(255,193,44,.12);
}


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

@media (max-width: 1050px) {

  .boom-adventure-card--achievements,
  .boom-adventure-card--league {
    grid-column: 1 / -1;
  }

}


@media (max-width: 760px) {

  .trainer-hero__party ol {
    display: grid !important;

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

    gap: 6px !important;
  }

  .trainer-hero__party ol > li {
    min-width: 0 !important;
  }

  .trainer-hero__party li img {
    width: 50px !important;
    height: 50px !important;
  }

  .boom-adventure-card--achievements,
  .boom-adventure-card--league {
    min-height: 280px;
  }

}


/* ============================================================
   HOME V4 // HORIZONTAL PARTY ROSTER
   ============================================================ */

@media (min-width: 1100px) {

  /*
   * Undo the tall 3x2 layout.
   */
  .trainer-hero {
    min-height: 470px !important;
  }


  /*
   * The command column no longer needs to grow around the party.
   */
  .trainer-hero__command {
    align-self: start !important;
  }


  /*
   * PARTY becomes an absolute roster above the large partner.
   */
  .trainer-hero__party {
    position: absolute !important;

    top: 28px !important;
    left: 31% !important;
    right: auto !important;

    width: min(650px, 42vw) !important;

    margin: 0 !important;

    z-index: 20;
  }


  .trainer-hero__party > span {
    display: block !important;

    margin:
      0 0 7px 4px !important;

    font-size: .64rem !important;
    font-weight: 950 !important;
    letter-spacing: .13em !important;

    color:
      rgba(255,255,255,.67) !important;
  }


  /*
   * Six Pokemon in one row.
   */
  .trainer-hero__party ol {
    display: grid !important;

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

    gap: 7px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
  }


  /*
   * Compact premium roster card.
   */
  .trainer-hero__party ol > li {
    position: relative !important;

    width: auto !important;
    min-width: 0 !important;

    height: 88px !important;
    min-height: 88px !important;

    margin: 0 !important;
    padding:
      5px 4px 5px !important;

    display: flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      flex-end !important;

    overflow: hidden !important;

    border-radius: 12px !important;

    border:
      1px solid
      rgba(255,255,255,.13) !important;

    background:
      radial-gradient(
        circle at 50% 25%,
        rgba(255,255,255,.09),
        transparent 48%
      ),
      linear-gradient(
        180deg,
        rgba(26,25,35,.96),
        rgba(10,14,21,.98)
      ) !important;

    box-shadow:
      inset 0 0 20px
        rgba(255,255,255,.018),
      0 7px 18px
        rgba(0,0,0,.22);
  }


  /*
   * Current partner.
   */
  .trainer-hero__party ol > li:first-child {
    border-color:
      rgba(255,98,87,.62) !important;

    box-shadow:
      inset 0 0 22px
        rgba(255,76,66,.08),
      0 0 17px
        rgba(255,72,62,.11),
      0 7px 18px
        rgba(0,0,0,.24);
  }


  /*
   * Pokemon artwork gets the most space.
   */
  .trainer-hero__party li img {
    position: relative !important;

    inset: auto !important;

    width: 53px !important;
    height: 53px !important;

    min-width: 53px !important;
    min-height: 53px !important;

    max-width: 53px !important;
    max-height: 53px !important;

    margin:
      -3px auto 0 !important;

    object-fit: contain !important;

    transform: none !important;

    opacity: 1 !important;

    filter:
      drop-shadow(
        0 6px 7px
        rgba(0,0,0,.5)
      ) !important;
  }


  /*
   * Pokemon name.
   */
  .trainer-hero__party li b,
  .trainer-hero__party li strong {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

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

    overflow: hidden !important;

    color: #fff !important;

    font-size: .57rem !important;
    font-weight: 950 !important;

    line-height: 1.08 !important;

    text-align: center !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  /*
   * Level / HP becomes secondary information.
   */
  .trainer-hero__party li small,
  .trainer-hero__party li span {
    position: relative !important;

    inset: auto !important;

    display: block !important;

    width: 100% !important;

    margin-top: 2px !important;

    overflow: hidden !important;

    color:
      rgba(255,255,255,.55) !important;

    font-size: .42rem !important;

    line-height: 1 !important;

    text-align: center !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  /*
   * Give the giant partner artwork enough breathing room below the roster.
   */
  .trainer-hero__pokemon {
    padding-top: 55px !important;
  }

}


/* Slightly narrower desktops */
@media (
  min-width: 1100px
) and (
  max-width: 1450px
) {

  .trainer-hero__party {
    left: 30% !important;

    width:
      min(600px, 43vw) !important;
  }

  .trainer-hero__party ol {
    gap: 5px !important;
  }

  .trainer-hero__party li img {
    width: 47px !important;
    height: 47px !important;

    min-width: 47px !important;
    min-height: 47px !important;

    max-width: 47px !important;
    max-height: 47px !important;
  }

}


/*
 * Tablets/mobile keep the existing responsive party layout.
 */
@media (max-width: 1099px) {

  .trainer-hero__party {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
  }

}



/* ============================================================
   HOME V7 // FINAL HERO GRID
   ============================================================ */

@media (min-width: 1100px) {

  .trainer-hero--home-v7 {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      minmax(290px, 1fr)
      minmax(500px, 1.42fr)
      minmax(310px, 1fr) !important;

    grid-template-rows:
      108px
      minmax(280px, 1fr) !important;

    grid-template-areas:
      "identity party command"
      "identity pokemon command" !important;

    column-gap: 28px !important;
    row-gap: 0 !important;

    min-height: 430px !important;

    padding:
      42px 54px
      22px !important;

    overflow: hidden !important;
  }


  /* telemetry is decorative only */
  .trainer-hero--home-v7
  > .trainer-hero__telemetry {
    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;
  }


  /* ========================================================
     LEFT // TRAINER
     ======================================================== */

  .trainer-hero--home-v7
  > .trainer-hero__identity {

    grid-area: identity !important;

    position: relative !important;

    align-self: center !important;

    width: auto !important;

    min-width: 0 !important;

    inset: auto !important;

    transform: none !important;

    margin: 0 !important;

    z-index: 10 !important;
  }


  /* ========================================================
     CENTER TOP // PARTY
     ======================================================== */

  .trainer-hero--home-v7
  > .trainer-hero__party--home-v7 {

    grid-area: party !important;

    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    inset: auto !important;

    transform: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    align-self: start !important;

    z-index: 40 !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party-title {

    display: block !important;

    position: static !important;

    margin: 0 0 7px !important;

    padding: 0 !important;

    width: 100% !important;

    color:
      rgba(255,255,255,.68) !important;

    font-size: .62rem !important;

    font-weight: 950 !important;

    letter-spacing: .14em !important;

    text-align: center !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7 ol {

    display: grid !important;

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

    gap: 7px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li {

    position: relative !important;

    inset: auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: 82px !important;
    min-height: 82px !important;

    margin: 0 !important;

    padding:
      4px 4px 5px !important;

    display: flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    justify-content:
      flex-end !important;

    overflow: hidden !important;

    border-radius: 11px !important;

    border:
      1px solid
      rgba(255,255,255,.14) !important;

    background:
      radial-gradient(
        circle at 50% 27%,
        rgba(255,255,255,.10),
        transparent 48%
      ),
      linear-gradient(
        180deg,
        rgba(27,25,35,.97),
        rgba(9,13,20,.99)
      ) !important;

    box-shadow:
      0 7px 16px
        rgba(0,0,0,.27),
      inset 0 0 18px
        rgba(255,255,255,.018) !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li:first-child {

    border-color:
      rgba(255,93,82,.68) !important;

    box-shadow:
      0 0 18px
        rgba(255,78,68,.12),
      0 7px 17px
        rgba(0,0,0,.28) !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li img {

    position: static !important;

    inset: auto !important;

    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    max-width: 48px !important;
    max-height: 48px !important;

    margin:
      0 auto 1px !important;

    padding: 0 !important;

    object-fit: contain !important;

    transform: none !important;

    opacity: 1 !important;

    filter:
      drop-shadow(
        0 6px 7px
        rgba(0,0,0,.52)
      ) !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li b,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li strong {

    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    color: #fff !important;

    font-size: .50rem !important;
    font-weight: 950 !important;

    line-height: 1.05 !important;

    text-align: center !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li small,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li span {

    position: static !important;

    display: block !important;

    max-width: 100% !important;

    margin-top: 2px !important;

    overflow: hidden !important;

    color:
      rgba(255,255,255,.55) !important;

    font-size: .39rem !important;

    line-height: 1 !important;

    text-align: center !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  /* ========================================================
     CENTER BOTTOM // BIG PARTNER
     ======================================================== */

  .trainer-hero--home-v7
  > .trainer-hero__pokemon--home-v7 {

    grid-area: pokemon !important;

    position: relative !important;

    inset: auto !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    align-self: stretch !important;
    justify-self: stretch !important;

    overflow: visible !important;

    z-index: 5 !important;
  }


  /* ========================================================
     RIGHT // NEXT DESTINATION
     ======================================================== */

  .trainer-hero--home-v7
  > .trainer-hero__command {

    grid-area: command !important;

    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;

    align-self: center !important;

    overflow: visible !important;

    z-index: 20 !important;
  }

}


/* ============================================================
   SMALLER DESKTOP
   ============================================================ */

@media (min-width: 1100px) and (max-width: 1400px) {

  .trainer-hero--home-v7 {

    grid-template-columns:
      minmax(260px,1fr)
      minmax(430px,1.3fr)
      minmax(280px,1fr) !important;

    column-gap: 18px !important;

    padding-left: 34px !important;
    padding-right: 34px !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7 ol {

    gap: 5px !important;
  }


  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li img {

    width: 43px !important;
    height: 43px !important;

    min-width: 43px !important;
    min-height: 43px !important;

    max-width: 43px !important;
    max-height: 43px !important;
  }

}


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

@media (max-width: 1099px) {

  .trainer-hero--home-v7 {
    display: block !important;
  }


  .trainer-hero--home-v7
  > .trainer-hero__party--home-v7 {

    position: relative !important;

    inset: auto !important;

    transform: none !important;

    width: 100% !important;

    margin:
      18px 0 !important;
  }

}


/* ============================================================
   TOP LIVE BUTTON
   ============================================================ */

/*
   "LIVE" is already printed by the button.
   Hide the old dynamic STANDBY / Pokemon-name suffix.
*/

#portal-live-mini {
  display: none !important;
}



/* ============================================================
   HOME V8 // ACTIVE PARTY IMAGES ONLY
   ============================================================ */

@media (min-width: 1100px) {

  /*
   * Party cards become clean Pokemon portrait slots.
   */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li {

    height: 78px !important;
    min-height: 78px !important;

    padding: 5px !important;

    display: grid !important;
    place-items: center !important;
  }


  /*
   * Hide every visible text field inside party slots.
   */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li > b,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li > strong,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li > small,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li > span,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li > em,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li > p {

    display: none !important;
  }


  /*
   * Bigger Pokemon portraits.
   */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li img {

    position: static !important;

    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    min-height: 64px !important;

    max-width: 64px !important;
    max-height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    transform: none !important;

    filter:
      drop-shadow(
        0 8px 8px
        rgba(0,0,0,.52)
      ) !important;
  }


  /*
   * Partner remains highlighted through border only.
   * No PARTNER text needed.
   */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li:first-child {

    border-color:
      rgba(255,94,82,.72) !important;

    box-shadow:
      0 0 20px rgba(255,76,66,.13),
      0 7px 17px rgba(0,0,0,.28) !important;
  }

}


/* Smaller desktop */
@media (min-width: 1100px) and (max-width: 1400px) {

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li img {

    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;

    max-width: 58px !important;
    max-height: 58px !important;
  }

}



/* ============================================================
   HOME V9 // ACTIVE PARTY POLISH
   ============================================================ */

@media (min-width: 1100px) {

  /* själva listan */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7 ol {
    align-items: start !important;
  }

  /* varje ruta */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 80px !important;
    min-height: 80px !important;

    padding: 6px !important;

    overflow: hidden !important;
  }

  /* centrera bild bättre */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li img {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    display: block !important;

    margin: 0 auto !important;

    width: 60px !important;
    height: 60px !important;

    min-width: 60px !important;
    min-height: 60px !important;

    max-width: 60px !important;
    max-height: 60px !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;
  }

  /* dölj gammal text inne i slots */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li b,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li strong,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li small,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li span,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li em,

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li p {
    display: none !important;
  }

  /* första rutan fortfarande highlightad */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li:first-child {
    border-color: rgba(255,92,82,.76) !important;

    box-shadow:
      0 0 18px rgba(255,78,68,.14),
      0 8px 18px rgba(0,0,0,.28) !important;
  }

  /* ny PARTNER badge nere till höger */
  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  ol > li:first-child::after {
    content: "PARTNER";

    position: absolute;
    right: 4px;
    bottom: 4px;

    padding: 2px 5px;

    border-radius: 999px;

    background:
      linear-gradient(
        180deg,
        rgba(255,110,96,.98),
        rgba(215,48,48,.98)
      );

    color: #fff;

    font-size: .38rem;
    font-weight: 1000;
    line-height: 1;

    letter-spacing: .08em;

    box-shadow:
      0 4px 10px rgba(0,0,0,.35);

    z-index: 3;
    pointer-events: none;
  }

}


/* mindre desktop */
@media (min-width: 1100px) and (max-width: 1400px) {

  .trainer-hero--home-v7
  .trainer-hero__party--home-v7
  li img {
    width: 56px !important;
    height: 56px !important;

    min-width: 56px !important;
    min-height: 56px !important;

    max-width: 56px !important;
    max-height: 56px !important;
  }

}


/* ============================================================
   HOME V10 // COMMUNITY + PARTNER CLEANUP
   ============================================================ */


/* ------------------------------------------------------------
   REMOVE OLD TOP PARTNER LABEL
   ------------------------------------------------------------ */

/*
 * Older party styling used ::before for the original
 * PARTNER indicator. V9 uses ::after at bottom-right.
 */
.trainer-hero--home-v7
.trainer-hero__party--home-v7
ol > li:first-child::before {
  content: none !important;
  display: none !important;
}


/*
 * Also kill old explicit partner ribbons if one exists
 * inside the first party slot.
 */
.trainer-hero--home-v7
.trainer-hero__party--home-v7
ol > li:first-child
:is(
  .partner,
  .partner-label,
  .party-partner,
  .pokemon-partner,
  [data-partner-label]
) {
  display: none !important;
}


/* Keep ONLY our bottom-right partner badge */
.trainer-hero--home-v7
.trainer-hero__party--home-v7
ol > li:first-child::after {
  content: "PARTNER" !important;

  top: auto !important;
  left: auto !important;

  right: 4px !important;
  bottom: 4px !important;
}


/* ============================================================
   COMMUNITY HOME CARD
   ============================================================ */

.boom-adventure-card--community {
  grid-column: span 6;

  min-height: 320px;

  overflow: hidden;

  border-color:
    rgba(65,224,185,.36);

  background:
    radial-gradient(
      circle at 78% 44%,
      rgba(68,231,187,.18),
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 115%,
      rgba(41,139,255,.16),
      transparent 45%
    ),
    linear-gradient(
      125deg,
      rgba(7,37,39,.99),
      rgba(8,27,34,.99) 50%,
      rgba(8,14,23,.99)
    );

  box-shadow:
    inset 0 0 50px
      rgba(67,222,187,.025),
    0 20px 52px
      rgba(0,0,0,.25);
}


.boom-adventure-card--community
.boom-card-copy {
  position: relative;
  z-index: 10;

  max-width: 55%;
}


.boom-adventure-card--community
.boom-card-kicker {
  color: #68f1cb;

  border-color:
    rgba(76,232,195,.36);

  background:
    rgba(38,207,171,.08);
}


.boom-adventure-card--community
.boom-card-action {
  color: #8ff5dc;

  border-color:
    rgba(77,230,195,.40);

  background:
    rgba(51,210,174,.055);
}


.boom-adventure-card--community:hover {
  border-color:
    rgba(93,244,207,.68);

  box-shadow:
    0 24px 58px rgba(0,0,0,.36),
    0 0 36px rgba(61,225,188,.09);
}


/* ============================================================
   LITTLE POKEMON COMMUNITY
   ============================================================ */

.boom-community-pokemon-group {
  position: absolute;

  right: 3%;
  bottom: 4%;

  width: 43%;
  height: 88%;

  z-index: 4;

  pointer-events: none;
}


.boom-community-pokemon {
  position: absolute;

  display: block;

  object-fit: contain;

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

  transition:
    transform .25s ease,
    filter .25s ease;
}


/*
 * Back row
 */

.boom-community-pokemon--1 {
  width: 34%;
  height: 46%;

  left: 3%;
  top: 9%;

  transform:
    rotate(-8deg);
}


.boom-community-pokemon--2 {
  width: 34%;
  height: 46%;

  left: 31%;
  top: 1%;

  transform:
    translateY(-2px);
}


.boom-community-pokemon--3 {
  width: 34%;
  height: 46%;

  right: 1%;
  top: 10%;

  transform:
    rotate(8deg);
}


/*
 * Front row
 */

.boom-community-pokemon--4 {
  width: 39%;
  height: 53%;

  left: 15%;
  bottom: 0;

  z-index: 3;

  transform:
    rotate(-4deg);
}


.boom-community-pokemon--5 {
  width: 40%;
  height: 54%;

  right: 13%;
  bottom: -1%;

  z-index: 4;

  transform:
    rotate(4deg);
}


/* Give the group a subtle shared floor glow */
.boom-community-pokemon-group::after {
  content: "";

  position: absolute;

  left: 10%;
  right: 5%;
  bottom: 2%;

  height: 24%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(69,234,192,.18),
      rgba(46,145,255,.08) 45%,
      transparent 72%
    );

  filter: blur(10px);

  z-index: -1;
}


/* Tiny movement on card hover */
.boom-adventure-card--community:hover
.boom-community-pokemon--1 {
  transform:
    translate(-4px,-4px)
    rotate(-10deg);
}

.boom-adventure-card--community:hover
.boom-community-pokemon--2 {
  transform:
    translateY(-7px);
}

.boom-adventure-card--community:hover
.boom-community-pokemon--3 {
  transform:
    translate(4px,-4px)
    rotate(10deg);
}

.boom-adventure-card--community:hover
.boom-community-pokemon--4 {
  transform:
    translate(-3px,-5px)
    rotate(-5deg);
}

.boom-adventure-card--community:hover
.boom-community-pokemon--5 {
  transform:
    translate(3px,-5px)
    rotate(5deg);
}


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

@media (max-width: 1050px) {

  .boom-adventure-card--community {
    grid-column: 1 / -1;
  }

}


@media (max-width: 720px) {

  .boom-adventure-card--community {
    min-height: 285px;
  }

  .boom-adventure-card--community
  .boom-card-copy {
    max-width: 62%;
  }

  .boom-community-pokemon-group {
    right: -3%;

    width: 46%;
  }

}



/* ============================================================
   HOME V11 // GRID 2-3-2-3
   ============================================================ */

/*
  Current card count = 10
  Best clean layout:
  2 / 3 / 2 / 3
*/

@media (min-width: 1100px) {

  /* row 1 already 2 cards */
  .boom-adventure-card--world,
  .boom-adventure-card--pokedex {
    grid-column: span 6 !important;
  }

  /* row 2 = 3 cards */
  .boom-adventure-card--live,
  .boom-adventure-card--progress,
  .boom-adventure-card--inventory {
    grid-column: span 4 !important;
  }

  /* row 3 = 2 cards */
  .boom-adventure-card--achievements,
  .boom-adventure-card--league {
    grid-column: span 6 !important;
  }

  /* row 4 = 3 cards */
  .boom-adventure-card--community,
  .boom-adventure-card--society,
  .boom-adventure-card--activities {
    grid-column: span 4 !important;
  }
}


/* tablet/mobile = full responsive as before */
@media (max-width: 1099px) {
  .boom-adventure-card--community,
  .boom-adventure-card--society,
  .boom-adventure-card--activities,
  .boom-adventure-card--live,
  .boom-adventure-card--progress,
  .boom-adventure-card--inventory,
  .boom-adventure-card--achievements,
  .boom-adventure-card--league,
  .boom-adventure-card--world,
  .boom-adventure-card--pokedex {
    grid-column: 1 / -1 !important;
  }
}



/* ============================================================
   HOME V12 // COMMUNITY TIGHTER POKEMON GROUP
   ============================================================ */

.boom-adventure-card--community
.boom-community-pokemon-group {
  right: 5% !important;
  bottom: 5% !important;

  width: 39% !important;
  height: 86% !important;
}


/* BULBASAUR */
.boom-adventure-card--community
.boom-community-pokemon--1 {
  width: 43% !important;
  height: 48% !important;

  left: 2% !important;
  top: 18% !important;

  transform: rotate(-6deg) !important;

  z-index: 2 !important;
}


/* CHARMANDER */
.boom-adventure-card--community
.boom-community-pokemon--2 {
  width: 43% !important;
  height: 49% !important;

  left: 29% !important;
  top: 5% !important;

  transform: none !important;

  z-index: 3 !important;
}


/* SQUIRTLE */
.boom-adventure-card--community
.boom-community-pokemon--3 {
  width: 43% !important;
  height: 48% !important;

  right: 1% !important;
  top: 18% !important;

  transform: rotate(6deg) !important;

  z-index: 2 !important;
}


/* PIKACHU */
.boom-adventure-card--community
.boom-community-pokemon--4 {
  width: 47% !important;
  height: 52% !important;

  left: 15% !important;
  bottom: 0 !important;

  transform: rotate(-3deg) !important;

  z-index: 5 !important;
}


/* EEVEE */
.boom-adventure-card--community
.boom-community-pokemon--5 {
  width: 47% !important;
  height: 52% !important;

  right: 10% !important;
  bottom: 0 !important;

  transform: rotate(3deg) !important;

  z-index: 6 !important;
}


/* Hover, håll gruppen samlad */
.boom-adventure-card--community:hover
.boom-community-pokemon--1 {
  transform: translate(-2px,-3px) rotate(-7deg) !important;
}

.boom-adventure-card--community:hover
.boom-community-pokemon--2 {
  transform: translateY(-4px) !important;
}

.boom-adventure-card--community:hover
.boom-community-pokemon--3 {
  transform: translate(2px,-3px) rotate(7deg) !important;
}

.boom-adventure-card--community:hover
.boom-community-pokemon--4 {
  transform: translate(-2px,-3px) rotate(-4deg) !important;
}

.boom-adventure-card--community:hover
.boom-community-pokemon--5 {
  transform: translate(2px,-3px) rotate(4deg) !important;
}



/* =========================================================
   BOOM POKEDEX NAV NEW V4C
   ========================================================= */

.portal-nav-alert[
  data-nav-alert="pokedex"
] {
  width: auto;
  min-width: 18px;
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
}


/* =========================================================
   BOOM SIGNAL LOG + LIVE STATUS V1
   ========================================================= */

#portal-live-mini {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .06em;
}

.portal-topbar__actions a.is-signal-live {
  border-color: rgba(255,76,104,.6);
  box-shadow:
    0 0 18px rgba(255,76,104,.12);
}

.portal-topbar__actions a.is-signal-live
#portal-live-mini {
  color: #ff6f87;
}

.portal-topbar__actions a.is-signal-standby
#portal-live-mini {
  color: var(--text-muted);
}

.portal-topbar__actions a.is-signal-gotcha
#portal-live-mini {
  color: var(--positive);
}

.portal-notifications {
  width:
    min(
      430px,
      calc(100vw - 1.25rem)
    );
  max-height:
    min(
      760px,
      calc(100vh - 85px)
    );
  overflow-y: auto;
}

.signal-log-section {
  margin-top: 14px;
}

.signal-log-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  border-bottom:
    1px solid
    var(--border);
}

.signal-log-section > header span {
  color:
    var(--region-accent);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.signal-log-section > header small {
  color: var(--text-muted);
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.signal-log-admin-card,
.signal-log-catch {
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      var(--surface-inset)
    );
}

.signal-log-admin-card {
  border-color:
    rgba(255,201,74,.34);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,198,61,.08),
      transparent 48%
    ),
    var(--surface-inset);
}

.signal-log-entry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.signal-log-entry__head b {
  color: var(--text-primary);
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .06em;
}

.signal-log-admin-card
.signal-log-entry__head b {
  color: #ffd45c;
}

.signal-log-entry__head time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: .52rem;
  font-weight: 800;
}

.signal-log-admin-card p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: .75rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.signal-log-catch__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.signal-log-catch__meta span {
  padding: 3px 6px;
  border:
    1px solid
    var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.signal-log-catch.is-shiny {
  border-color:
    rgba(255,220,87,.38);
  box-shadow:
    inset 0 0 24px
    rgba(255,213,58,.025);
}

.signal-log-catch.is-shiny
.signal-log-entry__head b {
  color: #ffe063;
}

.signal-log-empty {
  margin: 10px 0 0;
  padding: 12px;
  border:
    1px dashed
    var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .7rem;
}

.signal-log-composer {
  margin: 4px 0 16px;
  padding: 13px;
  border:
    1px solid
    rgba(255,203,74,.4);
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,202,71,.1),
      transparent 52%
    ),
    var(--surface-inset);
}

.signal-log-composer__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 9px;
}

.signal-log-composer__head span {
  color: #ffd45c;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .07em;
}

.signal-log-composer__head small {
  color: var(--text-muted);
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .11em;
}

.signal-log-composer textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 10px;
  border:
    1px solid
    var(--border);
  border-radius: 10px;
  outline: none;
  background: rgba(0,0,0,.2);
  color: var(--text-primary);
  font: inherit;
  font-size: .72rem;
}

.signal-log-composer textarea:focus {
  border-color: #ffd45c;
}

.signal-log-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.signal-log-composer__actions small {
  color: var(--text-muted);
  font-size: .5rem;
}

.signal-log-composer__actions button {
  padding: 7px 10px;
  border:
    1px solid
    rgba(255,205,75,.48);
  border-radius: 999px;
  background:
    rgba(91,67,8,.72);
  color: #ffe174;
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .08em;
  cursor: pointer;
}

.signal-log-composer__actions button:disabled {
  opacity: .5;
  cursor: wait;
}

.signal-log-composer__status {
  min-height: 16px;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: .54rem;
}

@media (max-width: 600px) {
  .portal-notifications {
    right: .5rem;
    width:
      calc(100vw - 1rem);
    max-height:
      calc(100vh - 76px);
  }

  #portal-live-mini {
    max-width: 105px;
  }
}


/* =========================================================
   BOOM LIVE SIGNAL GREEN V3
   ========================================================= */

.portal-topbar__actions a.is-signal-live {
  position: relative;
  overflow: visible;
}


.portal-topbar__actions a.is-signal-live::after {
  content: none !important;
  display: none !important;
}


@media (prefers-reduced-motion: no-preference) {
  .portal-topbar__actions a.is-signal-live {
    animation:
      boomLiveGreenPulse
      1.45s
      ease-in-out
      infinite;
  }

  
.portal-topbar__actions a.is-signal-live::after {
  content: none !important;
  display: none !important;
}

}

@keyframes boomLiveGreenPulse {
  0%,
  100% {
    box-shadow:
      0 0 9px rgba(58,255,128,.28),
      0 0 20px rgba(58,255,128,.14),
      inset 0 0 10px rgba(58,255,128,.06);
  }

  50% {
    box-shadow:
      0 0 14px rgba(58,255,128,.60),
      0 0 34px rgba(58,255,128,.34),
      inset 0 0 18px rgba(58,255,128,.12);
  }
}

@keyframes boomLiveGreenDot {
  0%,
  100% {
    transform: scale(.85);
    opacity: .7;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

/* STANDBY stays deliberately quiet */
.portal-topbar__actions a.is-signal-standby {
  box-shadow: none;
}

.portal-topbar__actions a.is-signal-standby #portal-live-mini {
  color: var(--text-muted);
  text-shadow: none;
}

/* GOTCHA remains positive but does not pulse as hard */
.portal-topbar__actions a.is-signal-gotcha {
  border-color: rgba(85,255,145,.62);
  box-shadow:
    0 0 16px rgba(85,255,145,.20);
}

.portal-topbar__actions a.is-signal-gotcha #portal-live-mini {
  color: #7dffab;
  text-shadow:
    0 0 9px rgba(85,255,145,.42);
}


/* =========================================================
   BOOM LIVE DOT FIX V4
   ========================================================= */

/* Ta bort extra flytande lampa */
.portal-topbar__actions a.is-signal-live::after,
.portal-topbar__actions a.is-signal-gotcha::after,
.portal-topbar__actions a.is-signal-standby::after {
  content: none !important;
  display: none !important;
}

/* LIVE-knappen */
.portal-topbar__actions a.is-signal-live {
  border-color: rgba(80,255,145,.88);
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(57,255,130,.16),
      rgba(8,32,20,.62)
    );
  box-shadow:
    0 0 10px rgba(58,255,128,.30),
    0 0 24px rgba(58,255,128,.18),
    inset 0 0 12px rgba(58,255,128,.08);
}

/* Texten */
.portal-topbar__actions a.is-signal-live #portal-live-mini {
  color: #eafff1;
  text-shadow:
    0 0 6px rgba(74,255,142,.35);
}

/* Själva lilla pricken inne i LIVE-pill */
.portal-topbar__actions a.is-signal-live #portal-live-mini::before {
  background: #55ff91 !important;
  box-shadow:
    0 0 6px rgba(85,255,145,.95),
    0 0 14px rgba(85,255,145,.65) !important;
}

/* Pulsering på hela pillen */
@media (prefers-reduced-motion: no-preference) {
  .portal-topbar__actions a.is-signal-live {
    animation: boomLivePillPulseV4 1.45s ease-in-out infinite;
  }

  .portal-topbar__actions a.is-signal-live #portal-live-mini::before {
    animation: boomLiveDotPulseV4 1.05s ease-in-out infinite;
  }
}

@keyframes boomLivePillPulseV4 {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(58,255,128,.22),
      0 0 18px rgba(58,255,128,.12),
      inset 0 0 10px rgba(58,255,128,.05);
  }
  50% {
    box-shadow:
      0 0 14px rgba(58,255,128,.46),
      0 0 30px rgba(58,255,128,.24),
      inset 0 0 16px rgba(58,255,128,.10);
  }
}

@keyframes boomLiveDotPulseV4 {
  0%, 100% {
    transform: scale(1);
    opacity: .92;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

/* STANDBY = diskret */
.portal-topbar__actions a.is-signal-standby {
  box-shadow: none;
}

.portal-topbar__actions a.is-signal-standby #portal-live-mini {
  color: var(--text-muted);
  text-shadow: none;
}

/* GOTCHA = positiv men inte lika stark */
.portal-topbar__actions a.is-signal-gotcha {
  border-color: rgba(85,255,145,.52);
  box-shadow:
    0 0 12px rgba(85,255,145,.14);
}

.portal-topbar__actions a.is-signal-gotcha #portal-live-mini {
  color: #dfffea;
}

.portal-topbar__actions a.is-signal-gotcha #portal-live-mini::before {
  background: #69ff9f !important;
  box-shadow:
    0 0 5px rgba(105,255,159,.75),
    0 0 10px rgba(105,255,159,.38) !important;
}


/* =========================================================
   BOOM_DESKTOP_SIDEBAR_SCROLL_V1

   Desktop rail always fits the visible viewport.
   Logo + network signal remain visible.
   Navigation in the middle receives its own vertical scroll.
   ========================================================= */

@media (min-width: 851px) {

  .portal-rail {
    position: sticky;
    top: 0;

    height: 100vh;
    height: 100dvh;

    max-height: 100vh;
    max-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    align-self: start;
  }


  .portal-rail > * {
    min-width: 0;
  }


  #portal-desktop-nav.portal-nav {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior-y: contain;

    scrollbar-width: thin;

    scrollbar-color:
      color-mix(
        in srgb,
        var(--region-accent) 45%,
        transparent
      )
      transparent;
  }


  #portal-desktop-nav.portal-nav::-webkit-scrollbar {
    width: 5px;
  }


  #portal-desktop-nav.portal-nav::-webkit-scrollbar-track {
    background: transparent;
  }


  #portal-desktop-nav.portal-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
      color-mix(
        in srgb,
        var(--region-accent) 38%,
        transparent
      );
  }


  /*
   * Keep fixed rail sections outside the scrolling menu.
   */
  .portal-rail__brand,
  .portal-rail__signal {
    flex: 0 0 auto;
  }

}


/*
 * Slightly tighter navigation when HEIGHT is limited.
 * We still preserve every navigation item.
 */
@media
  (min-width: 851px)
  and (max-height: 850px) {

  #portal-desktop-nav.portal-nav {
    gap: .3rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }


  #portal-desktop-nav
  .portal-nav-item {
    min-height: 56px;
  }

}


@media
  (min-width: 851px)
  and (max-height: 700px) {

  #portal-desktop-nav
  .portal-nav-item {
    min-height: 52px;
  }


  #portal-desktop-nav
  .portal-nav-item i {
    width: 29px;
    height: 29px;
  }

}

/* BOOM_DESKTOP_SIDEBAR_SCROLL_V1 */



/* =========================================================
   BOOM_SIGNAL_LOG_ADMIN_DELETE_STYLE_V1
   ========================================================= */

#portal-notifications
.signal-log-admin-card {
  position: relative;
}


#portal-notifications
.boom-signal-delete {
  position: absolute;

  top: 42px;
  right: 14px;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 91, 103, .36);

  border-radius: 8px;

  background:
    rgba(255, 91, 103, .07);

  color:
    #ff6b75;

  font-size: 13px;
  line-height: 1;

  cursor: pointer;

  opacity: .68;

  transition:
    opacity .16s ease,
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}


#portal-notifications
.boom-signal-delete:hover {
  opacity: 1;

  border-color:
    rgba(255, 91, 103, .8);

  background:
    rgba(255, 91, 103, .16);

  transform:
    scale(1.06);
}


#portal-notifications
.boom-signal-delete:focus-visible {
  outline:
    2px solid
    #ff6b75;

  outline-offset: 2px;
}


#portal-notifications
.boom-signal-delete:disabled {
  opacity: .35;
  cursor: wait;
}


#portal-notifications
.signal-log-admin-card
.is-boom-signal-deleting {
  pointer-events: none;
}


#portal-notifications
.signal-log-admin-card.is-boom-signal-deleting {
  opacity: 0;

  transform:
    translateX(12px);

  transition:
    opacity .18s ease,
    transform .18s ease;
}


/* BOOM_SIGNAL_LOG_ADMIN_DELETE_STYLE_V1 */