/* Canonical center canvas
   The center LP uses the same 410px composition on desktop and mobile.
   Desktop only adds the fixed left/right world around it. */

:root {
  --ufan-center-width: 410px;
  --ufan-header-height: 62px;
}

/* One canonical center canvas. */
.page {
  width: min(100%, var(--ufan-center-width));
  max-width: var(--ufan-center-width);
}

/* The floating header is part of the center-canvas composition on every device. */
.floating-header {
  height: var(--ufan-header-height);
}

/* Use the header logo only; do not duplicate a second logo inside the FV. */
.fv-myfans .fv-logo {
  display: none !important;
}

/* Canonical FV geometry: identical values on desktop and phone widths. */
.fv-myfans .fv-single-visual {
  top: 52px !important;
}

.fv-myfans .fv-single-visual img {
  width: 96% !important;
  height: 100% !important;
  margin-inline: auto !important;
  object-fit: contain !important;
  object-position: 50% 0% !important;
}

/* Slightly lower again, while keeping the same proportions. */
.fv-myfans .fv-headline {
  top: 329px !important;
  left: 5px !important;
  right: 5px !important;
  height: 210px !important;
}

.fv-myfans .fv-headline::before {
  background-size: 87% auto !important;
}

.fv.fv-myfans::after {
  top: 339px !important;
  height: 196px !important;
}

/* Remove the thin divider that read as a white line under the FV image. */
.fv-myfans .fv-details {
  border-top: 0 !important;
}

/* Desktop: keep the surrounding fixed world, but render the exact same center UI.
   IMPORTANT: the center canvas starts at the very top, exactly like mobile.
   The old 72px top offset created the unwanted empty strip above the header. */
@media (min-width: 768px) {
  .page {
    width: var(--ufan-center-width) !important;
    max-width: var(--ufan-center-width) !important;
    margin: 0 0 0 21vw !important;
  }

  .floating-header {
    top: 0 !important;
    left: 21vw !important;
    right: auto !important;
    width: var(--ufan-center-width) !important;
    padding-left: 18px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(255,253,252,.82) !important;
    border-bottom: 1px solid rgba(234,221,226,.72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .floating-header .logo {
    display: inline-flex !important;
  }

  .floating-header .logo-word {
    font-size: 24px !important;
  }

  .floating-header .logo-symbol {
    width: 31px !important;
    height: 31px !important;
  }

  .floating-header > button {
    height: var(--ufan-header-height) !important;
    width: 68px !important;
    background: rgba(207,130,159,.14) !important;
    color: var(--rose-deep) !important;
    border: 0 !important;
  }

  .menu-panel {
    width: var(--ufan-center-width) !important;
    left: 21vw !important;
    right: auto !important;
  }
}

/* On narrow phones the canvas may become narrower, but its internal composition stays the same.
   No separate FV crop/position rules are introduced here. */
@media (max-width: 409px) {
  .page {
    width: 100% !important;
  }
}