/* CR_COLLECTIVE_V175EXB_ROUTE_SHELL_MOBILE_PLAYER_REPAIR
   Scoped route-shell styling plus CSS-only mobile header/player containment.
   No player JS, API/auth, profile-shell or Home dynamic widget changes. */

:root {
  --cr-v175exb-bg: #03050d;
  --cr-v175exb-panel: rgba(9, 13, 30, 0.82);
  --cr-v175exb-line: rgba(172, 190, 255, 0.16);
  --cr-v175exb-line-strong: rgba(125, 211, 252, 0.32);
  --cr-v175exb-text: rgba(255, 255, 255, 0.96);
  --cr-v175exb-muted: rgba(222, 230, 255, 0.7);
  --cr-v175exb-violet: #8b5cf6;
  --cr-v175exb-cyan: #22d3ee;
  --cr-v175exb-pink: #e879f9;
  --cr-v175exb-player-safe: 188px;
}

html,
body {
  max-width: 100%;
}

body.cr-v175ep-shell {
  overflow-x: clip;
}

body.cr-v175ep-shell .topbar,
body.cr-v175ep-shell .top-left,
body.cr-v175ep-shell .brand,
body.cr-v175ep-shell .brand-text,
body.cr-v175ep-shell .app,
body.cr-v175ep-shell .main,
body.cr-v175ep-shell .sidebar {
  min-width: 0;
}

body.cr-v175ep-shell .main {
  padding-bottom: max(var(--cr-v175exb-player-safe), calc(env(safe-area-inset-bottom) + 150px));
}

.cr-route-shell-v175exb {
  width: min(100%, 1180px);
  max-width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  color: var(--cr-v175exb-text);
}

.cr-route-shell-v175exb * {
  box-sizing: border-box;
  min-width: 0;
}

.cr-route-hero-v175exb,
.cr-route-panel-v175exb {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cr-v175exb-line);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at 82% 10%, rgba(34, 211, 238, 0.14), transparent 24rem),
    radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.2), transparent 28rem),
    var(--cr-v175exb-panel);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cr-route-hero-v175exb {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  padding: clamp(24px, 5vw, 52px);
}

.cr-route-panel-v175exb {
  padding: clamp(18px, 3vw, 28px);
}

.cr-route-kicker-v175exb,
.cr-route-label-v175exb {
  margin: 0 0 10px;
  color: #c8b6ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cr-route-hero-v175exb h1,
.cr-route-panel-v175exb h2,
.cr-route-card-v175exb h3 {
  margin: 0;
  letter-spacing: 0;
}

.cr-route-hero-v175exb h1 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 7vw, 5.6rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.cr-route-hero-v175exb p,
.cr-route-panel-v175exb p,
.cr-route-card-v175exb p {
  color: var(--cr-v175exb-muted);
  line-height: 1.58;
}

.cr-route-lead-v175exb {
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.cr-route-actions-v175exb {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.cr-route-btn-v175exb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(172, 190, 255, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.08)),
    rgba(255, 255, 255, 0.05);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.cr-route-btn-v175exb.is-primary {
  border-color: rgba(196, 181, 253, 0.62);
  background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #0ea5e9);
  box-shadow: 0 0 34px rgba(139, 92, 246, 0.28), 0 16px 34px rgba(0, 0, 0, 0.28);
}

.cr-route-visual-v175exb {
  min-height: 250px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  border: 1px solid var(--cr-v175exb-line-strong);
  background:
    radial-gradient(circle at 50% 42%, rgba(34, 211, 238, 0.22), transparent 25%),
    radial-gradient(circle at 50% 52%, rgba(232, 121, 249, 0.24), transparent 37%),
    linear-gradient(145deg, rgba(4, 9, 24, 0.96), rgba(21, 12, 43, 0.88));
}

.cr-route-mark-v175exb {
  width: clamp(96px, 15vw, 144px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 26%),
    linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(139, 92, 246, 0.42), rgba(232, 121, 249, 0.28));
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 950;
  box-shadow: 0 0 54px rgba(139, 92, 246, 0.35);
}

.cr-route-grid-v175exb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cr-route-card-v175exb {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(172, 190, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: inherit;
}

.cr-route-chip-row-v175exb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cr-route-chip-v175exb {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(172, 190, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(235, 240, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 850;
}

@media (max-width: 900px) {
  :root {
    --cr-v175exb-player-safe: 150px;
  }

  body.cr-v175ep-shell .topbar {
    max-width: 100vw;
    height: 54px;
    padding-inline: 8px;
    overflow: hidden;
  }

  body.cr-v175ep-shell .top-left {
    width: 100%;
    gap: 8px;
  }

  body.cr-v175ep-shell .mobile-menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  body.cr-v175ep-shell .brand {
    flex: 1 1 auto;
    max-width: calc(100vw - 58px);
    gap: 8px;
    overflow: hidden;
  }

  body.cr-v175ep-shell .logoimg {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: 0 0 30px;
  }

  body.cr-v175ep-shell .brand-text {
    overflow: hidden;
  }

  body.cr-v175ep-shell .brand-title,
  body.cr-v175ep-shell .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.cr-v175ep-shell .brand-title {
    font-size: 0.92rem;
  }

  body.cr-v175ep-shell .brand-sub {
    font-size: 0.68rem;
  }

  body.cr-v175ep-shell .app {
    grid-template-columns: minmax(0, 1fr);
  }

  body.cr-v175ep-shell .main {
    overflow-x: clip;
    padding-inline: 10px;
    padding-bottom: max(var(--cr-v175exb-player-safe), calc(env(safe-area-inset-bottom) + 128px));
  }

  body.cr-v175ep-shell .sidebar {
    max-width: min(330px, calc(100vw - 22px));
  }

  .cr-route-hero-v175exb {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .cr-route-hero-v175exb h1 {
    max-width: 10ch;
  }

  .cr-route-grid-v175exb {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --cr-v175exb-player-safe: 238px;
  }

  body.cr-v175ep-shell .main {
    padding-bottom: max(238px, calc(env(safe-area-inset-bottom) + 220px));
  }

  .cr-route-shell-v175exb {
    max-width: calc(100vw - 18px);
    gap: 12px;
  }

  .cr-route-hero-v175exb,
  .cr-route-panel-v175exb {
    border-radius: 18px;
    padding: 18px;
  }

  .cr-v175exb-route-shell .cr-route-hero-v175exb + .cr-route-panel-v175exb {
    margin-top: 168px;
  }

  body.cr-v175ep-shell .cr-global-sets-v175dn .gs-hero + .gs-stats {
    margin-top: 168px;
  }

  .cr-route-actions-v175exb {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cr-route-btn-v175exb {
    width: 100%;
  }

  .cr-route-visual-v175exb {
    min-height: 164px;
  }

  html body #cr-standard-player-v174gj .crfs-shell {
    margin: 0 7px calc(7px + env(safe-area-inset-bottom)) !important;
    padding: 6px 8px !important;
    border-radius: 17px !important;
    max-width: calc(100vw - 14px) !important;
    overflow: visible !important;
  }

  html body #cr-standard-player-v174gj .crfs-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  html body #cr-standard-player-v174gj .crfs-track {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body #cr-standard-player-v174gj .crfs-cover {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  html body #cr-standard-player-v174gj .crfs-track > div:last-child::before {
    margin-bottom: 2px !important;
    font-size: 8px !important;
  }

  html body #cr-standard-player-v174gj .crfs-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html body #cr-standard-player-v174gj .crfs-sub {
    font-size: 10px !important;
  }

  html body #cr-standard-player-v174gj .crfs-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  html body #cr-standard-player-v174gj .crfs-progress {
    display: grid !important;
    grid-template-columns: auto minmax(84px, 1fr) auto !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
  }

  html body #cr-standard-player-v174gj .crfs-progress input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #cr-standard-player-v174gj .crfs-side {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body #cr-standard-player-v174gj .crfs-message {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body #cr-standard-player-v174gj .crfs-round.is-main {
    width: 36px !important;
    height: 36px !important;
  }

  html body #cr-standard-player-v174gj .crfs-actions {
    position: static !important;
    display: flex !important;
  }

  html body #cr-standard-player-v174gj [data-crfs-close] {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 374px) {
  body.cr-v175ep-shell .brand-title {
    font-size: 0.86rem;
  }

  body.cr-v175ep-shell .brand-sub {
    display: none;
  }

  body.cr-v175ep-shell .mobile-menu-btn {
    width: 36px;
    height: 36px;
  }

  body.cr-v175ep-shell .logoimg {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

/* CR_COLLECTIVE_V175FG_TOPNAV_COLLISION_GUARD
   Compact the desktop rail before the existing <=1120px mobile transition.
   The actual link boxes must stay inside their grid track instead of painting
   over search, Submit Track, or account controls. */
@media (min-width: 1281px) and (max-width: 1500px) {
  .cr-v175bd-search {
    width: 220px !important;
    min-width: 170px !important;
  }
}

@media (min-width: 1121px) and (max-width: 1280px) {
  .cr-v175bd-topnav {
    grid-template-columns: minmax(145px, 160px) minmax(0, 1fr) auto;
    gap: 10px;
  }

  .cr-v175bd-brand {
    gap: 8px;
  }

  .cr-v175bd-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .cr-v175bd-brand-title {
    font-size: 14px;
  }

  .cr-v175bd-brand-sub {
    display: none;
  }

  .cr-v175bd-links {
    gap: 3px;
    overflow: hidden;
  }

  .cr-v175bd-link {
    min-height: 38px;
    padding-inline: 6px !important;
    font-size: 11.5px !important;
  }

  .cr-v175bd-actions {
    gap: 8px;
  }

  .cr-v175bd-search {
    width: 160px !important;
    min-width: 160px !important;
  }

  .cr-v175bd-submit {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12px;
  }
}

/* CR_COLLECTIVE_V175FG_V8_PLAYER_CONTAINMENT
   The premium desktop skin's fixed minimum columns exceed the visible lane when
   the sidebar is present. Keep transport/track/close on row one and give every
   utility action a real, wrapping second row inside the same player shell. */
@media (min-width: 821px) and (max-width: 980px) {
  body.cr-v175ep-shell .cr-global-sets-v175dn {
    padding-bottom: calc(300px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 981px) and (max-width: 1500px) {
  html body #cr-standard-player-v174gj .crfs-shell {
    overflow: visible !important;
  }

  html body #cr-standard-player-v174gj .crfs-main {
    display: grid !important;
    grid-template-columns: minmax(170px, 0.8fr) minmax(280px, 1.2fr) 36px !important;
    grid-template-rows: auto auto !important;
    gap: 10px 12px !important;
    min-width: 0 !important;
  }

  html body #cr-standard-player-v174gj .crfs-track {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body #cr-standard-player-v174gj .crfs-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding-right: 0 !important;
  }

  html body #cr-standard-player-v174gj .crfs-side {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    overflow: visible !important;
  }

  html body #cr-standard-player-v174gj .crfs-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
}