/* =========================================================
   EndCore Windows Native Host
   Visible only when windows-host.js confirms Windows Next.
   ========================================================= */

.endcore-windows-titlebar {
    display: none;
}

html.endcore-windows-next {
    --endcore-windows-titlebar-height: 42px;
}

html.endcore-windows-next body {
    padding-top: var(--endcore-windows-titlebar-height);
}

html.endcore-windows-next .endcore-windows-titlebar {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: 0;
    right: 0;

    height: var(--endcore-windows-titlebar-height);

    display: flex;
    align-items: stretch;

    background:
        linear-gradient(
            180deg,
            rgba(15, 18, 23, 0.98),
            rgba(5, 7, 10, 0.96)
        );

    border-bottom: 1px solid rgba(255,255,255,0.07);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.18);

    user-select: none;
}

.endcore-windows-titlebar__identity {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 14px;

    overflow: hidden;
}

.endcore-windows-titlebar__mark {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 800;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.09);

    box-shadow:
        inset 0 0 16px rgba(255,255,255,0.025);
}

.endcore-windows-titlebar__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.02em;

    color: rgba(255,255,255,0.92);
}

.endcore-windows-titlebar__edition {
    margin-left: 3px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: rgba(255,255,255,0.42);
}

.endcore-windows-titlebar__controls {
    display: flex;
    align-items: stretch;

    height: 100%;
}

.endcore-windows-titlebar__button {
    appearance: none;
    width: 46px;
    height: 100%;

    display: grid;
    place-items: center;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: rgba(255,255,255,0.78);

    cursor: default;

    transition:
        background 120ms ease,
        color 120ms ease;
}

.endcore-windows-titlebar__button:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.endcore-windows-titlebar__button--close:hover {
    background: #c42b1c;
    color: #fff;
}

.endcore-windows-titlebar__button svg {
    width: 11px;
    height: 11px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}


/* =========================================================
   ENDCORE WINDOWS — OFFICIAL TITLEBAR BRAND
   ========================================================= */

html.endcore-windows-next
.endcore-windows-titlebar__mark {
    width: 25px;
    height: 25px;

    padding: 2px;

    overflow: hidden;

    border: 0;

    border-radius: 7px;

    background: transparent;

    box-shadow: none;
}

html.endcore-windows-next
.endcore-windows-titlebar__mark img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 7px
            rgba(72, 169, 255, .28)
        );
}


/* =========================================================
   WINDOWS APP VIEWPORT FIX V2

   Keep the full Web application below the custom
   EndCore Windows titlebar.
   ========================================================= */

html.endcore-windows-next:has(
    #appView:not([hidden])
)
body {
    padding-top: 0 !important;
}

html.endcore-windows-next
#appView:not([hidden]) {
    transform:
        translateY(
            var(--endcore-windows-titlebar-height)
        ) !important;

    height:
        calc(
            100vh -
            var(--endcore-windows-titlebar-height)
        ) !important;

    min-height:
        calc(
            100vh -
            var(--endcore-windows-titlebar-height)
        ) !important;

    max-height:
        calc(
            100vh -
            var(--endcore-windows-titlebar-height)
        ) !important;
}
/* =========================================================
   ENDCORE_WINDOWS_APP_EXPERIENCE_V1
   Windows-only desktop density + navigation + Details layout.
   ========================================================= */

html.endcore-windows-next {
  --endcore-win-gutter: clamp(28px, 2.6vw, 46px);
  --endcore-win-panel-radius: 18px;
  --endcore-win-control-height: 44px;
  overscroll-behavior: none;
}

html.endcore-windows-next body {
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html.endcore-windows-next img {
  -webkit-user-drag: none;
}

html.endcore-windows-next button,
html.endcore-windows-next .media-card,
html.endcore-windows-next .library-entity-card,
html.endcore-windows-next .library-root-card,
html.endcore-windows-next .global-search-result {
  user-select: none;
}

html.endcore-windows-next .view-root > * {
  animation: endcoreWindowsViewIn 180ms cubic-bezier(.2,.72,.2,1) both;
}

@keyframes endcoreWindowsViewIn {
  from { opacity: .72; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.endcore-windows-next .view-root > * {
    animation: none !important;
  }
}

@media (min-width: 981px) {
  html.endcore-windows-next .main-content {
    overflow-x: hidden !important;
  }

  html.endcore-windows-next .main-nav .nav-button {
    min-height: 46px !important;
    padding-inline: 16px !important;
    border-radius: 10px !important;
    letter-spacing: .005em;
  }

  html.endcore-windows-next .home-hero {
    min-height: clamp(420px, 50vh, 560px) !important;
    padding-top: clamp(76px, 7vh, 104px) !important;
    padding-bottom: clamp(64px, 7vh, 92px) !important;
  }

  html.endcore-windows-next .hero-content {
    max-width: min(920px, 78%) !important;
  }

  html.endcore-windows-next .home-sections {
    padding: 26px var(--endcore-win-gutter) 84px !important;
  }

  html.endcore-windows-next .media-section {
    margin-top: 42px;
  }

  html.endcore-windows-next .media-row {
    grid-auto-columns: clamp(168px, 12.5vw, 214px);
    gap: 16px;
    padding-bottom: 18px;
  }

  html.endcore-windows-next .media-row:has(.media-card-landscape) {
    grid-auto-columns: clamp(300px, 22vw, 390px);
    gap: 18px;
  }

  html.endcore-windows-next .library-browser {
    padding: 54px var(--endcore-win-gutter) 84px;
  }

  html.endcore-windows-next .library-browser-header,
  html.endcore-windows-next .library-root-grid,
  html.endcore-windows-next .library-back-button,
  html.endcore-windows-next .library-entity-grid {
    max-width: none;
  }

  html.endcore-windows-next .library-root-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 18px;
  }

  html.endcore-windows-next .library-entity-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 26px 18px;
  }

  html.endcore-windows-next .global-search-view {
    padding: 50px var(--endcore-win-gutter) 84px;
  }

  html.endcore-windows-next .global-search-header,
  html.endcore-windows-next .global-search-form {
    max-width: 980px;
  }

  html.endcore-windows-next .global-search-results {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 26px 18px;
  }
}

/* The Windows rail consumes real width, so Community must not
   use the web page's 500-620px desktop column here. */
@media (min-width: 1280px) {
  html.endcore-windows-next .detail-page-grid.has-community {
    grid-template-columns: minmax(0, 1fr) clamp(350px, 24vw, 410px);
    column-gap: clamp(22px, 1.8vw, 30px);
  }

  html.endcore-windows-next .detail-page-main .detail-content {
    padding: clamp(42px, 3.6vw, 58px) 0 22px var(--endcore-win-gutter);
  }

  html.endcore-windows-next .detail-page-main .detail-extra {
    padding: 0 0 72px var(--endcore-win-gutter);
  }

  html.endcore-windows-next .detail-page-main .detail-layout {
    grid-template-columns: clamp(205px, 15vw, 245px) minmax(0, 1fr);
    gap: clamp(28px, 2.2vw, 38px);
    align-items: start;
  }

  html.endcore-windows-next .detail-back {
    margin-bottom: 28px;
  }

  html.endcore-windows-next .detail-logo {
    max-width: min(470px, 92%);
    max-height: 168px;
    margin-bottom: 18px;
  }

  html.endcore-windows-next .detail-meta {
    font-size: 15px;
    line-height: 1.45;
  }

  html.endcore-windows-next .detail-overview {
    max-width: 820px;
    margin-top: 18px;
    line-height: 1.58 !important;
  }

  html.endcore-windows-next .detail-actions {
    margin-top: 24px;
    gap: 10px;
  }

  html.endcore-windows-next .detail-action {
    min-height: var(--endcore-win-control-height);
    padding-inline: 18px;
  }

  html.endcore-windows-next .detail-community-hero {
    padding: clamp(62px, 5vw, 82px) clamp(22px, 1.8vw, 30px) 44px 0;
    position: sticky;
    top: 0;
  }

  html.endcore-windows-next .detail-community-hero .community-side-card {
    padding: 19px;
    gap: 14px;
    border-radius: 22px;
  }

  html.endcore-windows-next .community-side-hero {
    gap: 10px;
    padding: 14px;
    border-radius: 17px;
  }

  html.endcore-windows-next .community-side-score-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 25px;
  }

  html.endcore-windows-next .community-side-score-copy strong {
    font-size: 42px;
  }

  html.endcore-windows-next .community-side-meta {
    gap: 9px;
  }

  html.endcore-windows-next .community-side-meta-line,
  html.endcore-windows-next .community-side-copy {
    font-size: 13px;
    line-height: 1.45;
  }

  html.endcore-windows-next .endcore-community-side .community-review-action.side-primary {
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 13px;
  }

  html.endcore-windows-next .community-personal-summary {
    padding: 12px 14px;
    border-radius: 14px;
  }

  html.endcore-windows-next .detail-community-hero:not(.is-community-expanded) .community-review-list {
    max-height: 205px !important;
  }

  html.endcore-windows-next .detail-community-hero .community-review-item {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    padding: 12px 13px;
  }

  html.endcore-windows-next .detail-community-hero .community-review-avatar {
    width: 40px;
    height: 40px;
  }

  html.endcore-windows-next .detail-cast-fullwidth {
    max-width: none;
    padding: 0 var(--endcore-win-gutter) 84px;
  }
}

@media (min-width: 1800px) {
  html.endcore-windows-next .detail-page-grid.has-community {
    grid-template-columns: minmax(0, 1fr) clamp(410px, 23vw, 480px);
    column-gap: clamp(28px, 2vw, 38px);
  }

  html.endcore-windows-next .detail-page-main .detail-layout {
    grid-template-columns: clamp(225px, 14vw, 270px) minmax(0, 1fr);
  }
}

html.endcore-windows-next :is(
  .nav-button,
  .detail-action,
  .media-card,
  .library-root-card,
  .library-entity-card,
  .global-search-result
):active {
  transform: translateY(1px) scale(.995);
}

/* =========================================================
   ENDCORE_WINDOWS_APP_EXPERIENCE_V2
   Real Windows desktop proportions.

   V1 changed the grid columns, but media.css Community V6
   had already converted Details to display:block, forced a
   narrow main width, and absolutely positioned Community.
   Those V6 rules made the V1 grid declaration effectively
   inert. V2 overrides the complete V6 geometry on Windows.
   ========================================================= */

@media (min-width: 1280px) {

  html.endcore-windows-next {
    --endcore-rail-width: 238px;
    --endcore-win-detail-left: clamp(34px, 2.5vw, 46px);
    --endcore-win-detail-gap: clamp(26px, 2vw, 34px);
  }

  /* Give the permanent rail desktop proportions. */
  html.endcore-windows-next .topbar::before {
    width: var(--endcore-rail-width) !important;
  }

  html.endcore-windows-next .brand-button {
    width: 214px !important;
    left: 13px !important;
  }

  html.endcore-windows-next .main-nav {
    width: 210px !important;
    left: 13px !important;
    gap: 7px !important;
  }

  html.endcore-windows-next .main-nav .nav-button {
    min-height: 48px !important;
    padding-inline: 17px !important;
    border-radius: 12px !important;
  }

  /* -------------------------------------------------------
     DETAILS: restore a real two-column desktop composition.
     ------------------------------------------------------- */

  html.endcore-windows-next .detail-page-grid.has-community {
    display: grid !important;
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;

    grid-template-columns:
      minmax(0, 1fr)
      clamp(350px, 25vw, 398px) !important;

    column-gap: var(--endcore-win-detail-gap) !important;
    align-items: start !important;
  }

  /* media.css V6 reserves ~590-690px here. Kill that rule. */
  html.endcore-windows-next
  .detail-page-grid.has-community
  .detail-page-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  html.endcore-windows-next
  .detail-page-grid.has-community
  .detail-content {
    max-width: none !important;
    margin: 0 !important;

    padding:
      clamp(52px, 4.2vw, 70px)
      0
      24px
      var(--endcore-win-detail-left) !important;
  }

  html.endcore-windows-next
  .detail-page-grid.has-community
  .detail-extra {
    max-width: none !important;
    margin: 0 !important;

    padding:
      0
      0
      34px
      var(--endcore-win-detail-left) !important;
  }

  html.endcore-windows-next
  .detail-page-grid.has-community
  .detail-layout {
    grid-template-columns:
      clamp(226px, 16vw, 258px)
      minmax(0, 1fr) !important;

    gap: clamp(30px, 2.5vw, 42px) !important;
    align-items: start !important;
  }

  html.endcore-windows-next .detail-poster {
    border-radius: 22px !important;
    box-shadow:
      0 28px 70px rgba(0, 0, 0, .48),
      0 0 0 1px rgba(120, 190, 255, .10) !important;
  }

  html.endcore-windows-next .detail-back {
    min-height: 38px;
    margin: 0 0 24px !important;
    padding: 0 12px;
    border-radius: 10px;
    transition: background 120ms ease, color 120ms ease;
  }

  html.endcore-windows-next .detail-back:hover {
    background: rgba(69, 145, 230, .10);
  }

  html.endcore-windows-next .detail-logo {
    max-width: min(510px, 96%) !important;
    max-height: 174px !important;
    margin-bottom: 18px !important;
  }

  html.endcore-windows-next .detail-meta {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  html.endcore-windows-next .detail-overview {
    width: 100% !important;
    max-width: 780px !important;
    margin-top: 18px !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
  }

  html.endcore-windows-next .detail-actions {
    margin-top: 22px !important;
    gap: 10px !important;
  }

  html.endcore-windows-next .detail-action {
    min-height: 46px !important;
    padding-inline: 19px !important;
  }

  /* -------------------------------------------------------
     COMMUNITY: normal grid item, not a 600px absolute rail.
     ------------------------------------------------------- */

  html.endcore-windows-next
  .detail-page-grid.has-community
  .detail-community-hero:not(.is-community-expanded) {
    position: relative !important;
    top: auto !important;
    right: auto !important;

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

    padding:
      clamp(66px, 5vw, 82px)
      var(--endcore-win-detail-left)
      42px
      0 !important;

    z-index: 3 !important;
    align-self: start !important;
  }

  html.endcore-windows-next
  .detail-community-hero
  .community-side-card {
    width: 100% !important;
    max-width: none !important;

    padding: 18px !important;
    gap: 12px !important;
    border-radius: 20px !important;

    background:
      linear-gradient(
        155deg,
        rgba(10, 31, 56, .92),
        rgba(5, 18, 35, .90)
      ) !important;

    box-shadow:
      0 20px 55px rgba(0, 0, 0, .25),
      inset 0 0 0 1px rgba(91, 172, 255, .08) !important;
  }

  html.endcore-windows-next .community-side-header h2 {
    font-size: 24px !important;
    margin-top: 4px !important;
  }

  html.endcore-windows-next
  .detail-community-hero
  .community-side-hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 13px 14px !important;
    border-radius: 15px !important;
  }

  html.endcore-windows-next .community-side-score-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    font-size: 22px !important;
  }

  html.endcore-windows-next .community-side-score-copy strong {
    font-size: 38px !important;
  }

  /* The web guidance sentence makes the Windows card feel
     like a form page. The action itself already explains it. */
  html.endcore-windows-next .community-side-copy {
    display: none !important;
  }

  html.endcore-windows-next
  .endcore-community-side
  .community-review-action.side-primary {
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  html.endcore-windows-next
  .detail-community-hero
  .community-personal-summary {
    padding: 11px 13px !important;
    border-radius: 13px !important;
  }

  html.endcore-windows-next
  .endcore-community-side
  .community-feed-card.compact {
    padding-top: 4px !important;
  }

  html.endcore-windows-next
  .detail-community-hero:not(.is-community-expanded)
  .community-review-list {
    max-height: 170px !important;
  }

  html.endcore-windows-next
  .detail-community-hero
  .community-review-item {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px 12px !important;
  }

  html.endcore-windows-next
  .detail-community-hero
  .community-review-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  /* V7's measured clearance is only needed for the old
     absolutely-positioned Community rail. */
  html.endcore-windows-next .detail-page-grid.has-community {
    --community-compact-clearance: 0px !important;
  }

  /* Cast now follows the actual grid row naturally. */
  html.endcore-windows-next .detail-cast-fullwidth {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding:
      6px
      var(--endcore-win-detail-left)
      84px !important;
  }

  html.endcore-windows-next
  .detail-cast-fullwidth
  .detail-section {
    margin-top: 30px !important;
  }

  /* A little more cinematic separation from the background. */
  html.endcore-windows-next .detail-backdrop {
    height: min(74vh, 760px) !important;
    opacity: .68 !important;
  }

  html.endcore-windows-next .detail-backdrop::after {
    background:
      linear-gradient(
        90deg,
        rgba(4, 9, 19, .97) 0%,
        rgba(4, 9, 19, .76) 35%,
        rgba(4, 9, 19, .34) 68%,
        rgba(4, 9, 19, .18) 100%
      ),
      linear-gradient(
        0deg,
        #040913 0%,
        rgba(4, 9, 19, .82) 18%,
        transparent 62%
      ) !important;
  }
}

@media (min-width: 1800px) {
  html.endcore-windows-next .detail-page-grid.has-community {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(390px, 23vw, 440px) !important;
  }

  html.endcore-windows-next
  .detail-page-grid.has-community
  .detail-layout {
    grid-template-columns:
      clamp(244px, 14vw, 278px)
      minmax(0, 1fr) !important;
  }
}

/* =========================================================
   ENDCORE_WINDOWS_APP_EXPERIENCE_FINAL_V1
   Canonical Windows-only application presentation.
   ========================================================= */


/* ---------------------------------------------------------
   Browser chrome suppression
   Scrolling remains functional; scrollbar chrome is hidden.
   --------------------------------------------------------- */

html.endcore-windows-next,
html.endcore-windows-next body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.endcore-windows-next ::-webkit-scrollbar,
html.endcore-windows-next::-webkit-scrollbar,
html.endcore-windows-next body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}


/* ---------------------------------------------------------
   Community review container
   --------------------------------------------------------- */

html.endcore-windows-next
.detail-community-hero
.community-feed-card.compact {
  min-height: 0 !important;
  height: auto !important;

  padding: 10px !important;

  border-radius: 16px !important;
}


html.endcore-windows-next
.detail-community-hero
.community-review-list {
  display: grid !important;

  gap: 9px !important;

  width: 100% !important;

  min-height: 0 !important;
  max-height: none !important;

  padding: 0 !important;

  overflow: visible !important;
}


/* ---------------------------------------------------------
   Review card
   --------------------------------------------------------- */

html.endcore-windows-next
.detail-community-hero
.community-review-item {
  box-sizing: border-box !important;

  display: grid !important;

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

  grid-template-rows:
    auto
    auto !important;

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

  width: 100% !important;
  min-width: 0 !important;

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

  margin: 0 !important;

  padding:
    13px
    14px !important;

  align-items: start !important;

  border:
    1px solid
    rgba(91, 159, 230, .18) !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      180deg,
      rgba(8, 25, 47, .72),
      rgba(5, 18, 35, .58)
    ) !important;

  text-align: left !important;
}


html.endcore-windows-next
.detail-community-hero
.community-review-item:hover {
  border-color:
    rgba(102, 177, 255, .30) !important;

  background:
    linear-gradient(
      180deg,
      rgba(10, 31, 57, .80),
      rgba(6, 21, 40, .66)
    ) !important;
}


/* ---------------------------------------------------------
   Avatar
   --------------------------------------------------------- */

html.endcore-windows-next
.detail-community-hero
.community-review-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;

  margin: 0 !important;

  align-self: start !important;

  border-radius: 50% !important;
}


/* ---------------------------------------------------------
   Review header
   --------------------------------------------------------- */

html.endcore-windows-next
.detail-community-hero
.community-review-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

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

  text-align: left !important;
}


html.endcore-windows-next
.detail-community-hero
.community-review-topline {
  display: grid !important;

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

  column-gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  align-items: start !important;

  text-align: left !important;
}


/* ---------------------------------------------------------
   Identity
   --------------------------------------------------------- */

html.endcore-windows-next
.detail-community-hero
.community-review-identity {
  display: grid !important;

  gap: 3px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  text-align: left !important;
}


html.endcore-windows-next
.detail-community-hero
.community-review-name-row {
  display: flex !important;

  flex-wrap: wrap !important;

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

  gap:
    4px
    7px !important;

  width: 100% !important;
  min-width: 0 !important;

  text-align: left !important;
}


/* Full username: never web-style ellipsis in Windows */
html.endcore-windows-next
.detail-community-hero
.community-review-name-row > strong,
html.endcore-windows-next
.detail-community-hero
.community-review-identity strong {
  display: inline-block !important;

  width: auto !important;
  max-width: none !important;

  min-width: 0 !important;

  margin: 0 !important;

  overflow: visible !important;

  color:
    rgba(239, 247, 255, .96) !important;

  font-size: 14px !important;
  font-weight: 720 !important;

  line-height: 1.25 !important;

  text-align: left !important;

  text-overflow: clip !important;

  white-space: normal !important;

  overflow-wrap: anywhere !important;
}


/* YOUR REVIEW badge */
html.endcore-windows-next
.detail-community-hero
.community-own-review-badge {
  flex: 0 0 auto !important;

  margin: 0 !important;

  padding:
    3px
    7px !important;

  border-radius: 999px !important;

  font-size: 9px !important;
  line-height: 1.1 !important;

  white-space: nowrap !important;
}


/* Date */
html.endcore-windows-next
.detail-community-hero
.community-review-identity > span {
  display: block !important;

  margin: 0 !important;

  color:
    rgba(145, 178, 211, .52) !important;

  font-size: 10px !important;

  line-height: 1.3 !important;

  text-align: left !important;

  white-space: normal !important;
}


/* Rating */
html.endcore-windows-next
.detail-community-hero
.community-review-rating {
  justify-self: end !important;
  align-self: start !important;

  flex: none !important;

  margin: 0 !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   Review comment
   Own grid row, no template indentation preserved.
   --------------------------------------------------------- */

html.endcore-windows-next
.detail-community-hero
.community-review-comment {
  grid-column: 2 !important;
  grid-row: 2 !important;

  display: block !important;

  position: static !important;

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

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

  min-height: 0 !important;

  margin:
    9px
    0
    0 !important;

  padding: 0 !important;

  transform: none !important;

  color:
    rgba(226, 237, 250, .90) !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1.45 !important;

  text-align: left !important;
  text-indent: 0 !important;

  white-space: pre-line !important;

  overflow-wrap: break-word !important;
  word-break: normal !important;
}



/* =========================================================
   ENDCORE_WINDOWS_LIBRARY_EXPERIENCE_V1
   Windows Next — cinematic Library roots
   ========================================================= */

@media (min-width: 981px) {

  html.endcore-windows-next
  .library-browser {
    padding:
      52px
      var(--endcore-win-gutter)
      88px;
  }


  html.endcore-windows-next
  .library-browser-header {
    max-width: 760px;
    margin-bottom: 30px;
  }


  html.endcore-windows-next
  .library-browser-header h1 {
    margin-bottom: 6px;
  }


  html.endcore-windows-next
  .library-browser-header p {
    max-width: 560px;
    opacity: .72;
  }


  html.endcore-windows-next
  .library-root-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(360px, 1fr)
      ) !important;

    gap: 20px !important;

    align-items: stretch;
  }


  html.endcore-windows-next
  .library-root-card {
    position: relative;

    display: block !important;

    min-height: 190px !important;

    padding: 0 !important;

    overflow: hidden;

    isolation: isolate;

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

    border-radius:
      var(--endcore-win-panel-radius);

    background:
      linear-gradient(
        145deg,
        rgba(10, 30, 58, .96),
        rgba(3, 11, 24, .99)
      );

    box-shadow:
      0 18px 46px
      rgba(0, 0, 0, .22);

    transform:
      translateY(0);

    transition:
      transform 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }


  html.endcore-windows-next
  .library-root-card:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(80, 181, 255, .42);

    box-shadow:
      0 24px 58px
      rgba(0, 0, 0, .34),

      0 0 32px
      rgba(51, 154, 255, .08);
  }


  html.endcore-windows-next
  .library-root-preview {
    position: absolute !important;

    inset: 0;

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

    border: 0 !important;

    border-radius: 0 !important;

    overflow: hidden;

    background:
      radial-gradient(
        circle at 28% 28%,
        rgba(41, 126, 214, .20),
        transparent 46%
      ),
      linear-gradient(
        145deg,
        rgba(11, 39, 76, .96),
        rgba(3, 12, 26, .99)
      );

    box-shadow:
      none !important;
  }


  html.endcore-windows-next
  .library-root-preview
  .library-root-icon {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

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

    opacity: .72;

    z-index: 1;
  }


  html.endcore-windows-next
  .library-root-preview img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transform:
      scale(1.015);

    transition:
      opacity 220ms ease,
      transform 300ms
        cubic-bezier(.2,.72,.2,1);
  }


  html.endcore-windows-next
  .library-root-preview img.is-loaded {
    opacity: 1;
  }


  html.endcore-windows-next
  .library-root-card:hover
  .library-root-preview img.is-loaded {
    transform:
      scale(1.045);
  }


  html.endcore-windows-next
  .library-root-preview.has-preview::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(1, 7, 17, .06) 0%,
        rgba(1, 7, 17, .18) 38%,
        rgba(1, 7, 17, .87) 100%
      ),
      linear-gradient(
        90deg,
        rgba(1, 7, 17, .30) 0%,
        transparent 60%
      );

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


  html.endcore-windows-next
  .library-root-copy {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    padding:
      48px
      54px
      20px
      22px;

    pointer-events: none;
  }


  html.endcore-windows-next
  .library-root-copy strong {
    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 23px !important;

    line-height: 1.1;

    font-weight: 760;

    letter-spacing: -.02em;

    color: #f7fbff;

    text-shadow:
      0 2px 14px
      rgba(0,0,0,.72);
  }


  html.endcore-windows-next
  .library-root-copy span {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding:
      4px
      9px;

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

    border-radius: 999px;

    background:
      rgba(5, 18, 37, .60);

    backdrop-filter:
      blur(10px);

    font-size: 11px !important;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .055em;

    text-transform: uppercase;

    color:
      rgba(132, 206, 255, .96);
  }


  /*
   * User-facing Library cards never expose physical
   * filesystem paths.
   */
  html.endcore-windows-next
  .library-root-copy small {
    display: none !important;
  }


  html.endcore-windows-next
  .library-root-arrow {
    position: absolute;

    right: 18px;
    bottom: 21px;

    z-index: 6;

    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background:
      rgba(4, 17, 34, .62);

    backdrop-filter:
      blur(10px);

    color:
      rgba(121, 204, 255, .96);

    font-size: 22px;

    line-height: 1;

    transition:
      transform 180ms ease,
      background 180ms ease,
      border-color 180ms ease;
  }


  html.endcore-windows-next
  .library-root-card:hover
  .library-root-arrow {
    transform:
      translateX(2px);

    background:
      rgba(14, 59, 99, .76);

    border-color:
      rgba(105, 203, 255, .44);
  }
}


@media (
  min-width: 981px
) and (
  max-width: 1250px
) {

  html.endcore-windows-next
  .library-root-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}


/* =========================================================
   END ENDCORE_WINDOWS_LIBRARY_EXPERIENCE_V1
   ========================================================= */


/* =========================================================
   ENDCORE_WINDOWS_MIXED_LANDSCAPE_V1
   ========================================================= */

@media (min-width: 981px) {

  html.endcore-windows-next
  .library-entity-grid.library-entity-grid-mixed {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(300px, 1fr)
      ) !important;

    gap:
      28px 20px !important;
  }


  html.endcore-windows-next
  .library-entity-grid-mixed
  .library-entity-poster {
    aspect-ratio:
      16 / 9 !important;

    border-radius:
      13px;
  }
}


/* =========================================================
   ENDCORE_WINDOWS_VIDEO_CINEMATIC_DETAILS_V1

   Windows Next refinement for native Video / Other Details.
   ========================================================= */

@media (min-width: 981px) {

  html.endcore-windows-next
  .detail-page-grid.endcore-video-cinematic-page {
    /*
     * Preserve Community when it exists but allow the
     * cinematic main area to own the available width.
     */
    align-items:
      stretch;
  }


  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details {
    min-height:
      calc(100vh - 82px);

    border-radius:
      0;

    background:
      #020713;
  }


  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  .detail-content {
    padding:
      clamp(
        44px,
        5vh,
        70px
      )
      var(--endcore-win-gutter)
      clamp(
        32px,
        4vh,
        52px
      )
      var(--endcore-win-gutter)
      !important;
  }


  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  .detail-layout {
    grid-template-columns:
      minmax(0, 1fr)
      !important;

    max-width:
      1060px;

    gap:
      0
      !important;
  }


  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  .detail-layout
  > :first-child {
    display:
      none
      !important;
  }


  /*
   * The current Windows movie title is intentionally very
   * large. Native Video gets a calmer editorial scale.
   */
  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  :is(
    .detail-title,
    .detail-layout h1,
    .detail-content h1
  ) {
    width:
      auto;

    max-width:
      min(
        920px,
        17ch
      );

    font-size:
      clamp(
        38px,
        3.35vw,
        60px
      )
      !important;

    line-height:
      1.01
      !important;

    letter-spacing:
      -.038em
      !important;
  }


  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  .detail-actions {
    max-width:
      950px;

    margin-top:
      20px;
  }


  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  .detail-action {
    min-height:
      46px;
  }


  /*
   * Give the lower edge a natural fade back into the normal
   * EndCore surface rather than an abrupt hero boundary.
   */
  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  .detail-extra {
    padding-left:
      var(--endcore-win-gutter)
      !important;

    padding-right:
      var(--endcore-win-gutter)
      !important;
  }
}


@media (min-width: 1500px) {

  html.endcore-windows-next
  .detail-page-main.endcore-video-cinematic-details
  :is(
    .detail-title,
    .detail-layout h1,
    .detail-content h1
  ) {
    font-size:
      clamp(
        42px,
        3vw,
        64px
      )
      !important;
  }
}


/* =========================================================
   ENDCORE_WINDOWS_VIDEO_CINEMATIC_ROOT_V2

   Last-word Windows overrides for Video Details.
   ========================================================= */

@media (min-width: 981px) {

  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main {
    width:
      100% !important;

    max-width:
      none !important;

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

    background:
      #020713 !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main
  .detail-content {
    width:
      100% !important;

    max-width:
      none !important;

    padding:
      clamp(
        38px,
        5vh,
        64px
      )
      var(--endcore-win-gutter)
      clamp(
        40px,
        5vh,
        64px
      )
      var(--endcore-win-gutter)
      !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-layout {
    display:
      grid !important;

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

    gap:
      0 !important;

    width:
      100% !important;

    max-width:
      980px !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-layout
  > :first-child {
    display:
      none !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  :is(
    .detail-poster,
    .detail-poster-wrap,
    .detail-poster-column,
    .detail-artwork,
    .detail-artwork-column
  ) {
    display:
      none !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  :is(
    .detail-title,
    .detail-content h1,
    .detail-layout h1
  ) {
    width:
      auto !important;

    max-width:
      min(
        820px,
        18ch
      ) !important;

    font-size:
      clamp(
        34px,
        2.65vw,
        50px
      ) !important;

    line-height:
      1.04 !important;

    letter-spacing:
      -.028em !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-actions {
    max-width:
      920px !important;
  }


  /*
   * Existing Windows rules use a fixed poster + content
   * grid at multiple desktop breakpoints. This selector is
   * deliberately later and more specific.
   */
  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main
  .detail-layout {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}


@media (min-width: 1500px) {

  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  :is(
    .detail-title,
    .detail-content h1,
    .detail-layout h1
  ) {
    font-size:
      clamp(
        36px,
        2.45vw,
        52px
      ) !important;
  }
}


/* =========================================================
   ENDCORE_WINDOWS_VIDEO_CINEMATIC_POLISH_V3
   ========================================================= */

@media (min-width: 981px) {

  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main {
    min-height:
      calc(100vh - 36px);

    background:
      #020713 !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main::before {
    z-index:
      0 !important;

    opacity:
      .90 !important;

    background-position:
      center 42% !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main::after {
    z-index:
      1 !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main
  > * {
    z-index:
      2 !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-content {
    min-height:
      calc(100vh - 36px);

    box-sizing:
      border-box;

    padding:
      50px
      var(--endcore-win-gutter)
      58px
      var(--endcore-win-gutter)
      !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-layout {
    width:
      100% !important;

    max-width:
      1180px !important;

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


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  :is(
    .detail-title,
    .detail-content h1,
    .detail-layout h1
  ) {
    max-width:
      min(
        1050px,
        34ch
      ) !important;

    font-size:
      clamp(
        32px,
        2.45vw,
        46px
      ) !important;

    line-height:
      1.045 !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-actions {
    max-width:
      1100px !important;

    gap:
      10px !important;
  }
}


@media (min-width: 1600px) {

  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  :is(
    .detail-title,
    .detail-content h1,
    .detail-layout h1
  ) {
    font-size:
      48px !important;
  }
}


/* =========================================================
   ENDCORE_WINDOWS_VIDEO_HERO_FINE_POLISH_V6
   ========================================================= */

@media (min-width: 981px) {

  /*
   * Give the background a little breathing room before
   * introducing the copy.
   */
  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-page-main
  .detail-content {
    padding-top:
      clamp(
        82px,
        10vh,
        118px
      )
      !important;

    padding-bottom:
      64px
      !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-layout {
    max-width:
      1040px
      !important;

    padding:
      26px
      52px
      32px
      34px
      !important;

    margin-left:
      -34px;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  :is(
    .detail-title,
    .detail-content h1,
    .detail-layout h1
  ) {
    max-width:
      min(
        900px,
        32ch
      )
      !important;

    font-size:
      clamp(
        31px,
        2.2vw,
        42px
      )
      !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .detail-actions {
    margin-top:
      18px
      !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  .endcore-video-detail-background-image {
    transform:
      none
      !important;

    object-position:
      center center
      !important;
  }
}


/* =========================================================
   ENDCORE_WINDOWS_VIDEO_BACK_VISIBLE_V1
   ========================================================= */

html.endcore-windows-next
#viewRoot.endcore-video-details-view
:is(
  .detail-back-button,
  .detail-back-link,
  .detail-page-back a,
  .detail-page-back button
) {
  position:
    relative;

  z-index:
    3;

  margin-top:
    4px;

  margin-left:
    8px;
}


/* =========================================================
   ENDCORE_WINDOWS_VIDEO_BACK_EXACT_V2
   ========================================================= */

@media (min-width: 981px) {

  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  #detailBackButton.detail-back {
    position:
      relative;

    z-index:
      5;

    width:
      fit-content;

    min-height:
      42px !important;

    margin:
      0 0 30px 0 !important;

    padding:
      0 17px !important;

    background:
      rgba(3, 11, 27, .78)
      !important;

    border:
      1px solid rgba(109, 196, 255, .38)
      !important;

    color:
      #f5fbff
      !important;

    box-shadow:
      0 10px 26px rgba(0, 0, 0, .30),
      0 0 0 1px rgba(65, 151, 255, .05) inset
      !important;
  }


  html.endcore-windows-next
  #viewRoot.endcore-video-details-view
  #detailBackButton.detail-back:hover {
    background:
      rgba(8, 25, 49, .92)
      !important;

    border-color:
      rgba(116, 207, 255, .68)
      !important;

    box-shadow:
      0 12px 30px rgba(0, 0, 0, .34),
      0 0 20px rgba(53, 145, 255, .18)
      !important;
  }
}

/* =========================================================
   ENDCORE_DESKTOP_WEB_SCROLL_LOCK_V1
   Desktop browsers keep application proportions.
   Responsive reflow remains reserved for mobile breakpoints.
   ========================================================= */

@media (min-width: 1024px) {
  html.endcore-windows-next,
  html.endcore-windows-next body {
    min-width: 1280px !important;
  }

  html.endcore-windows-next body {
    overflow-x: auto !important;
  }

  html.endcore-windows-next .app-view,
  html.endcore-windows-next #appView {
    min-width: 1280px !important;
  }

  html.endcore-windows-next .main-content {
    overflow-x: visible !important;
  }

  html.endcore-windows-next .home-sections {
    min-width: 1180px !important;
  }

  html.endcore-windows-next .media-row {
    grid-auto-columns: 196px !important;
  }

  html.endcore-windows-next .media-row:has(.media-card-landscape) {
    grid-auto-columns: 360px !important;
  }

  html.endcore-windows-next .home-hero,
  html.endcore-windows-next .hero-content {
    min-width: 1180px !important;
  }
}

/* =========================================================
   ENDCORE_DESKTOP_WEB_SCROLL_LOCK_V2
   Force desktop shell behavior. Mobile owns responsive reflow.
   ========================================================= */

@media (min-width: 981px) {
  html.endcore-windows-next,
  html.endcore-windows-next body {
    min-width: 1280px !important;
  }

  html.endcore-windows-next .app-view,
  html.endcore-windows-next #appView,
  html.endcore-windows-next .topbar,
  html.endcore-windows-next .main-content {
    min-width: 1280px !important;
  }

  html.endcore-windows-next .media-card,
  html.endcore-windows-next .media-card-landscape {
    flex: 0 0 auto !important;
  }

  html.endcore-windows-next .media-row {
    overflow: visible !important;
  }
}

/* =========================================================
   ENDCORE DESKTOP POLISH V3
   Keep desktop identity when browser window is resized.
   Mobile breakpoints remain untouched.
   ========================================================= */

html.endcore-windows-next .main-content {
    min-width: 1180px;
}

html.endcore-windows-next .home-sections,
html.endcore-windows-next .library-browser {
    min-width: 1180px;
}

html.endcore-windows-next .media-row {
    grid-auto-columns: 214px !important;
    overflow: visible;
}

html.endcore-windows-next {
    overflow-x: auto !important;
}

html.endcore-windows-next body {
    overflow-x: auto !important;
}