/*
 * ============================================================
 * BOOM_PORTAL_ESTATE_FEATURE_V1
 * ============================================================
 */


.portal-estate {
  width:100%;

  min-width:0;

  padding:
    clamp(
      18px,
      2.1vw,
      32px
    );

  color:
    var(
      --portal-text,
      #eef7fb
    );
}


.portal-estate__hero {
  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  gap:22px;

  margin-bottom:16px;

  padding:
    2px 4px
    13px;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 38%,
      transparent
    );
}


.portal-estate__eyebrow {
  display:block;

  margin-bottom:7px;

  color:
    var(--region-accent);

  font-size:10px;

  font-weight:1000;

  letter-spacing:.17em;
}


.portal-estate__hero h1 {
  margin:0;

  color:#f4f8fb;

  font-size:
    clamp(
      27px,
      3vw,
      42px
    );

  line-height:.95;

  letter-spacing:
    .015em;
}


.portal-estate__hero p {
  max-width:650px;

  margin:
    8px 0 0;

  color:#8ba4b5;

  font-size:11px;

  line-height:1.5;
}


.portal-estate__actions {
  display:flex;

  align-items:center;

  gap:9px;

  flex-wrap:wrap;

  justify-content:
    flex-end;
}


.portal-estate__region {
  display:flex;

  align-items:center;

  gap:7px;

  min-height:36px;

  padding:
    8px 11px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 23%,
      transparent
    );

  border-radius:8px;

  background:
    color-mix(
      in srgb,
      var(--region-accent) 5%,
      rgba(5,16,25,.85)
    );

  color:#7793a5;

  font-size:8px;

  font-weight:900;

  letter-spacing:.1em;
}


.portal-estate__region b {
  color:
    var(--region-accent);

  font-size:9px;
}


#portal-estate-facilities {
  min-height:36px;

  padding:
    8px 13px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 55%,
      transparent
    );

  border-radius:8px;

  background:
    color-mix(
      in srgb,
      var(--region-accent) 8%,
      rgba(5,16,25,.88)
    );

  color:
    var(--region-accent);

  font-size:9px;

  font-weight:1000;

  letter-spacing:.07em;

  cursor:pointer;
}


.portal-estate__frame-shell {
  position:relative;

  width:100%;

  min-height:
    calc(
      100vh - 155px
    );

  overflow:hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 28%,
      transparent
    );

  border-radius:16px;

  background:
    rgba(3,12,20,.8);

  box-shadow:

    0 24px 70px
    rgba(0,0,0,.28),

    0 0 45px
    color-mix(
      in srgb,
      var(--region-accent) 4%,
      transparent
    );
}


.portal-estate__frame {
  display:block;

  width:100%;

  height:
    calc(
      100vh - 155px
    );

  min-height:760px;

  border:0;

  opacity:0;

  background:#06111d;

  transition:
    opacity .18s ease;
}


.portal-estate__frame.is-ready {
  opacity:1;
}


.portal-estate__loading {
  position:absolute;

  inset:0;

  z-index:4;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  background:
    rgba(4,15,24,.96);

  color:#8ba7b8;
}


.portal-estate__loading[hidden] {
  display:none;
}


.portal-estate__loading p {
  margin-top:12px;

  font-size:10px;

  font-weight:900;

  letter-spacing:.08em;
}


@media (
  max-width:900px
) {

  .portal-estate {
    padding:
      12px 8px
      84px;
  }


  .portal-estate__hero {
    align-items:flex-start;

    flex-direction:column;
  }


  .portal-estate__actions {
    width:100%;

    justify-content:
      space-between;
  }


  .portal-estate__frame,
  .portal-estate__frame-shell {
    height:
      calc(
        100vh - 185px
      );

    min-height:620px;
  }

}



/*
 * ============================================================
 * BOOM_ESTATE_SINGLE_SCROLL_V1
 * Outer Portal owns vertical scrolling.
 * Estate iframe grows to its document height.
 * ============================================================
 */


.portal-estate__frame-shell {
  height:auto !important;

  min-height:0 !important;

  overflow:visible !important;
}


.portal-estate__frame {
  display:block;

  width:100%;

  /*
   * JS replaces this with actual document height
   * immediately after Estate loads.
   */

  height:800px;

  min-height:0 !important;

  overflow:hidden !important;
}


.portal-estate__frame-shell,
.portal-estate__frame {
  scrollbar-width:none;
}


.portal-estate__frame-shell::-webkit-scrollbar {
  display:none;
}



/*
 * ============================================================
 * BOOM_ESTATE_VISITORS_CSS_V1
 * ============================================================
 */


.portal-estate-visitor[hidden],
.portal-estate__frame-shell[hidden],
#portal-estate-facilities[hidden] {
  display:none !important;
}


#portal-estate-visit.is-active {
  border-color:
    color-mix(
      in srgb,
      var(--region-accent) 55%,
      transparent
    );

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

  color:
    var(--region-accent);
}


.portal-estate-visitor {
  width:100%;

  min-height:
    620px;

  margin-top:
    18px;
}


.portal-estate-visit__shell {
  display:grid;

  gap:16px;

  padding:
    20px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(
        8,
        24,
        38,
        .92
      ),
      rgba(
        4,
        15,
        25,
        .96
      )
    );
}


.portal-estate-visit__head,
.portal-estate-visit__profile-head {
  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:18px;
}


.portal-estate-visit__kicker {
  display:block;

  color:
    var(--region-accent);

  font-size:
    9px;

  font-weight:
    1000;

  letter-spacing:
    .13em;
}


.portal-estate-visit__head h2,
.portal-estate-visit__profile-head h2 {
  margin:
    5px 0;

  color:#f0f7fb;

  font-size:
    28px;
}


.portal-estate-visit__head p,
.portal-estate-visit__profile-head p {
  margin:0;

  color:#8299aa;

  font-size:
    11px;
}


.portal-estate-visit__head button,
.portal-estate-visit__profile-actions button,
.portal-estate-visit__back {
  padding:
    9px 12px;

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

  border-radius:
    9px;

  background:
    rgba(
      255,
      255,
      255,
      .035
    );

  color:#dfeaf0;

  font-size:
    8px;

  font-weight:
    1000;

  cursor:pointer;
}


.portal-estate-visit__profile-actions {
  display:flex;

  gap:7px;

  flex-wrap:wrap;

  justify-content:flex-end;
}


.portal-estate-visit__search {
  display:grid;

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

  gap:8px;
}


.portal-estate-visit__search input {
  min-width:0;

  padding:
    12px 13px;

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

  border-radius:
    10px;

  outline:0;

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

  color:#eef7fb;

  font-size:
    11px;
}


.portal-estate-visit__search input:focus {
  border-color:
    color-mix(
      in srgb,
      var(--region-accent) 55%,
      transparent
    );
}


.portal-estate-visit__search button {
  padding:
    0 18px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--region-accent) 40%,
      transparent
    );

  border-radius:
    10px;

  background:
    color-mix(
      in srgb,
      var(--region-accent) 10%,
      #071722
    );

  color:
    var(--region-accent);

  font-size:
    9px;

  font-weight:
    1000;

  cursor:pointer;
}


.portal-estate-visit__notice {
  display:flex;

  align-items:center;

  gap:10px;

  padding:
    9px 11px;

  border:
    1px solid
    rgba(
      255,
      215,
      90,
      .12
    );

  border-radius:
    9px;

  background:
    rgba(
      255,
      205,
      70,
      .035
    );

  color:#ffd86b;

  font-size:
    8px;

  font-weight:
    900;
}


.portal-estate-visit__notice span {
  color:#778f9f;

  font-weight:
    600;
}


.portal-estate-visit__results {
  display:grid;

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

  gap:9px;
}


.portal-estate-visit__trainer {
  display:grid;

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

  align-items:center;

  gap:11px;

  padding:
    13px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .075
    );

  border-radius:
    12px;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );

  color:#dfeaf0;

  text-align:left;

  cursor:pointer;

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


.portal-estate-visit__trainer:hover {
  transform:
    translateY(
      -2px
    );

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

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


.portal-estate-visit__trainer-mark {
  display:grid;

  width:38px;

  height:38px;

  place-items:center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

  border-radius:
    10px;

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

  font-size:
    20px;
}


.portal-estate-visit__trainer-info {
  min-width:0;
}


.portal-estate-visit__trainer-info strong,
.portal-estate-visit__trainer-info small {
  display:block;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:nowrap;
}


.portal-estate-visit__trainer-info strong {
  font-size:
    11px;
}


.portal-estate-visit__trainer-info small {
  margin-top:
    3px;

  color:#778f9f;

  font-size:
    8px;
}


.portal-estate-visit__trainer-levels {
  text-align:right;
}


.portal-estate-visit__trainer-levels b,
.portal-estate-visit__trainer-levels small {
  display:block;
}


.portal-estate-visit__trainer-levels b {
  color:
    var(--region-accent);

  font-size:
    8px;
}


.portal-estate-visit__trainer-levels small {
  margin-top:
    3px;

  color:#718898;

  font-size:
    7px;
}


.portal-estate-visit__trainer-arrow {
  color:#698292;

  font-size:
    7px;

  font-weight:
    1000;
}


.portal-estate-visit__loading,
.portal-estate-visit__empty,
.portal-estate-visit__error {
  grid-column:
    1 / -1;

  display:grid;

  min-height:
    100px;

  place-items:center;

  padding:
    18px;

  border:
    1px dashed
    rgba(
      255,
      255,
      255,
      .08
    );

  border-radius:
    11px;

  color:#71899b;

  text-align:center;

  font-size:
    10px;
}


.portal-estate-visit__loading.big {
  min-height:
    520px;
}


.portal-estate-visit__error {
  border-color:
    rgba(
      255,
      95,
      110,
      .2
    );

  color:#ff9aa2;
}


.portal-estate-visit__stats {
  display:grid;

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

  gap:8px;
}


.portal-estate-visit__stats article {
  padding:
    11px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .075
    );

  border-radius:
    10px;

  background:
    rgba(
      0,
      0,
      0,
      .14
    );
}


.portal-estate-visit__stats small {
  display:block;

  color:#6f8798;

  font-size:
    7px;

  font-weight:
    1000;

  letter-spacing:
    .06em;
}


.portal-estate-visit__stats strong {
  display:block;

  margin-top:
    4px;

  color:#eff7fb;

  font-size:
    18px;
}


.portal-estate-visit__section {
  padding:
    15px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .07
    );

  border-radius:
    13px;

  background:
    rgba(
      0,
      0,
      0,
      .10
    );
}


.portal-estate-visit__section > header {
  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  gap:12px;

  margin-bottom:
    11px;
}


.portal-estate-visit__section h3 {
  margin:
    3px 0 0;

  color:#eef6fa;

  font-size:
    13px;
}


.portal-estate-visit__section > header > small {
  color:#698091;

  font-size:
    7px;

  font-weight:
    900;
}


.portal-estate-visit__facility-grid {
  display:grid;

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

  gap:8px;
}


.portal-estate-visit__facility {
  display:flex;

  align-items:center;

  gap:10px;

  padding:
    11px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .07
    );

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );
}


.portal-estate-visit__facility > span {
  font-size:
    22px;
}


.portal-estate-visit__facility small,
.portal-estate-visit__facility strong {
  display:block;
}


.portal-estate-visit__facility small {
  color:#728b9c;

  font-size:
    7px;

  font-weight:
    900;

  text-transform:uppercase;
}


.portal-estate-visit__facility strong {
  margin-top:
    2px;

  color:#e7f0f4;

  font-size:
    10px;
}


.portal-estate-visit__facility.is-locked {
  opacity:
    .42;
}


.portal-estate-visit__showcase {
  text-align:right;
}


.portal-estate-visit__showcase strong,
.portal-estate-visit__showcase small {
  display:block;
}


.portal-estate-visit__showcase strong {
  color:#ffd86b;

  font-size:
    18px;
}


.portal-estate-visit__showcase small {
  color:#718899;

  font-size:
    7px;
}


.portal-estate-visit__trophy-grid {
  display:grid;

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

  gap:8px;
}


.portal-estate-visit__trophy {
  position:relative;

  display:flex;

  min-width:0;

  min-height:
    105px;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  padding:
    10px 7px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .075
    );

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      .025
    );

  text-align:center;
}


.portal-estate-visit__trophy-slot {
  position:absolute;

  top:6px;

  left:7px;

  color:#607889;

  font-size:
    6px;

  font-weight:
    1000;
}


.portal-estate-visit__trophy-icon {
  margin-bottom:
    6px;

  font-size:
    27px;
}


.portal-estate-visit__trophy strong {
  display:block;

  width:100%;

  overflow:hidden;

  color:#eaf3f7;

  text-overflow:
    ellipsis;

  white-space:nowrap;

  font-size:
    8px;
}


.portal-estate-visit__trophy small {
  display:block;

  margin-top:
    4px;

  font-size:
    6px;

  font-weight:
    1000;

  letter-spacing:
    .06em;
}


.boom-visit-tier-bronze {
  color:#d89a68;
}


.boom-visit-tier-silver {
  color:#c8d6e0;
}


.boom-visit-tier-gold {
  color:#ffd568;
}


.boom-visit-tier-platinum {
  color:#68d9ff;
}


.boom-visit-tier-rainbow {
  color:#e890ff;
}


.portal-estate-visit__trophy.boom-visit-tier-gold,
.portal-estate-visit__trophy.boom-visit-tier-platinum,
.portal-estate-visit__trophy.boom-visit-tier-rainbow {
  border-color:
    currentColor;
}


@media (
  max-width:900px
) {

  .portal-estate-visit__stats {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }


  .portal-estate-visit__facility-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .portal-estate-visit__trophy-grid {
    grid-template-columns:
      repeat(
        4,
        1fr
      );
  }

}


@media (
  max-width:620px
) {

  .portal-estate-visit__shell {
    padding:
      13px;
  }


  .portal-estate-visit__head,
  .portal-estate-visit__profile-head {
    flex-direction:
      column;
  }


  .portal-estate-visit__profile-actions {
    width:100%;

    justify-content:
      flex-start;
  }


  .portal-estate-visit__search {
    grid-template-columns:
      1fr;
  }


  .portal-estate-visit__search button {
    min-height:
      40px;
  }


  .portal-estate-visit__notice {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .portal-estate-visit__results {
    grid-template-columns:
      1fr;
  }


  .portal-estate-visit__trainer {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      )
      auto;
  }


  .portal-estate-visit__trainer-levels {
    display:none;
  }


  .portal-estate-visit__stats {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .portal-estate-visit__facility-grid {
    grid-template-columns:
      1fr;
  }


  .portal-estate-visit__trophy-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

}



/*
 * ============================================================
 * BOOM_ESTATE_VISITOR_RESIDENTS_CSS_V1
 * ============================================================
 */


.portal-estate-visit__resident-grid {
  display:grid;

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

  gap:9px;
}


.portal-estate-visit__resident {
  display:grid;

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

  gap:10px;

  align-items:center;

  padding:10px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.portal-estate-visit__resident-image {
  display:grid;

  width:70px;

  height:70px;

  place-items:center;

  border-radius:10px;

  background:
    rgba(0,0,0,.18);
}


.portal-estate-visit__resident-image img {
  width:64px;

  height:64px;

  object-fit:contain;

  image-rendering:pixelated;
}


.portal-estate-visit__resident small,
.portal-estate-visit__resident strong,
.portal-estate-visit__resident span {
  display:block;
}


.portal-estate-visit__resident small {
  color:#698293;

  font-size:6px;

  font-weight:1000;

  letter-spacing:.08em;
}


.portal-estate-visit__resident strong {
  margin-top:3px;

  overflow:hidden;

  color:#eef7fb;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-size:10px;
}


.portal-estate-visit__resident span {
  margin-top:4px;

  color:#7e97a7;

  font-size:7px;

  font-weight:900;
}


.estate-visit-resident-shiny {
  border-color:
    rgba(255,225,90,.22);
}


.estate-visit-resident-diamond {
  border-color:
    rgba(80,215,255,.42);

  box-shadow:
    inset 0 0 20px
    rgba(60,190,255,.035);
}


.estate-visit-resident-rainbow {
  border-color:
    rgba(220,100,255,.42);

  box-shadow:
    inset 0 0 22px
    rgba(120,100,255,.045);
}


@media (
  max-width:900px
) {

  .portal-estate-visit__resident-grid {
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media (
  max-width:620px
) {

  .portal-estate-visit__resident-grid {
    grid-template-columns:
      1fr;
  }

}



/*
 * ============================================================
 * BOOM_ESTATE_VISIT_PLAY_V2
 * ============================================================
 */

.portal-estate-live-visit[hidden] {
  display:none !important;
}

.portal-estate-live-visit {
  position:absolute;
  z-index:12;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  min-width:min(520px, calc(100% - 28px));
  max-width:720px;
  padding:10px 12px;
  border:1px solid
    color-mix(
      in srgb,
      var(--region-accent) 58%,
      transparent
    );
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      rgba(5,22,34,.97),
      rgba(3,13,22,.95)
    );
  box-shadow:
    0 14px 38px rgba(0,0,0,.36),
    0 0 28px
      color-mix(
        in srgb,
        var(--region-accent) 10%,
        transparent
      );
  color:#eaf7fc;
  pointer-events:auto;
}

.portal-estate-live-visit__pulse {
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--region-accent);
  box-shadow:
    0 0 0 4px
      color-mix(
        in srgb,
        var(--region-accent) 13%,
        transparent
      ),
    0 0 18px
      color-mix(
        in srgb,
        var(--region-accent) 64%,
        transparent
      );
}

.portal-estate-live-visit.is-loading
.portal-estate-live-visit__pulse {
  animation:boomEstateVisitPulseV2 .85s ease-in-out infinite alternate;
}

@keyframes boomEstateVisitPulseV2 {
  from {
    opacity:.38;
    transform:scale(.78);
  }

  to {
    opacity:1;
    transform:scale(1.12);
  }
}

.portal-estate-live-visit > div {
  min-width:0;
  display:grid;
  gap:1px;
  flex:1;
}

.portal-estate-live-visit small {
  color:var(--region-accent);
  font-size:7px;
  font-weight:1000;
  letter-spacing:.16em;
}

.portal-estate-live-visit strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
}

.portal-estate-live-visit span:not(.portal-estate-live-visit__pulse) {
  color:#8eabbc;
  font-size:8px;
  font-weight:800;
}

.portal-estate-live-visit button {
  min-height:34px;
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid
    color-mix(
      in srgb,
      var(--region-accent) 55%,
      transparent
    );
  border-radius:8px;
  background:
    color-mix(
      in srgb,
      var(--region-accent) 10%,
      rgba(5,16,25,.92)
    );
  color:var(--region-accent);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.05em;
  cursor:pointer;
}

.portal-estate-live-visit button:hover {
  filter:brightness(1.14);
}

@media (max-width:700px) {
  .portal-estate-live-visit {
    top:8px;
    min-width:calc(100% - 16px);
    padding:8px 9px;
  }

  .portal-estate-live-visit strong {
    font-size:9px;
  }

  .portal-estate-live-visit span:not(.portal-estate-live-visit__pulse) {
    display:none;
  }

  .portal-estate-live-visit button {
    padding:6px 8px;
    font-size:7px;
  }
}