/* ST4R Universe — Production V1
   Consolidated layout layer. Preserves original cascade order:
   Responsive Wide V4 -> Premium Header V5 -> Section Router V6.1 -> Planets V6.2.
*/

/* ST4R Universe — Responsive Wide V4
   Goal: large-site desktop proportions without touching phone/tablet layout.
   No JS/API/data behavior is changed by this file. */

/* 1180px and below remains controlled by the site's existing responsive CSS. */
@media (min-width:1181px){
  /* Keep a safe minimum gutter on narrower desktop/laptop screens. */
  :root{
    --st4r-wide-gutter:clamp(20px,2.2vw,44px);
  }

  /* Readability floor for tiny labels that were hard to read on 24-inch displays. */
  .v2-nav .nav-links a{font-size:clamp(11.5px,.60vw,12.5px) !important}
  .v2-nav .live-pill,.v2-nav .btn{font-size:clamp(10.5px,.56vw,11.5px) !important}
  .nav-profile-meta b,.v2-nav .nav-account-pro .nav-profile-meta strong{font-size:12px !important}
  .nav-profile-meta small,.v2-nav .nav-account-pro .nav-profile-meta small{font-size:8px !important}

  .kicker,.eyebrow{font-size:clamp(11px,.58vw,12px) !important}
  .section-head p,.portal-head p{font-size:clamp(14px,.72vw,15px) !important;line-height:1.65 !important}

  /* Missions / progression */
  .engagement-head p{font-size:clamp(13px,.72vw,15px) !important;line-height:1.65 !important}
  .engagement-reset{font-size:10px !important}
  .engagement-reset b{font-size:11px !important}
  .engagement-stat-top small{font-size:9px !important}
  .engagement-level-row b{font-size:11px !important}
  .engagement-stat-card p{font-size:clamp(10.5px,.55vw,11.5px) !important;line-height:1.55 !important}
  .engagement-big-stat span{font-size:11px !important}
  .engagement-mini-tags span{font-size:9px !important}
  .engagement-panel-head small{font-size:9px !important}
  .engagement-panel-head h3{font-size:clamp(19px,1vw,21px) !important}
  .engagement-panel-head button{font-size:9px !important}
  .engagement-mission-copy strong{font-size:clamp(12px,.65vw,13px) !important}
  .engagement-mission-copy small{font-size:clamp(9.5px,.5vw,10.5px) !important}
  .engagement-mission-reward,.engagement-claim{font-size:9px !important}
  .engagement-bonus b{font-size:11px !important}
  .engagement-bonus small{font-size:9.5px !important}
  .engagement-bonus em{font-size:10px !important}
  .engagement-invite-card>p{font-size:11px !important}
  .engagement-invite-link input{font-size:10px !important}
  .engagement-invite-link button,.engagement-share-btn{font-size:9px !important}
  .engagement-ref-stats span{font-size:8.5px !important}
  .engagement-ref-note,.engagement-badge{font-size:9px !important}

  /* Universe Hub */
  .universe-hub-head p{font-size:14px !important}
  .hub-pane-head small{font-size:9px !important}
  .hub-pane-head h3{font-size:clamp(21px,1.15vw,24px) !important}
  .hub-pane-head>span{font-size:10px !important}
  .hub-card-top small,.hub-card-top span{font-size:8.5px !important}
  .hub-card h4{font-size:clamp(16px,.88vw,18px) !important}
  .hub-card p{font-size:10.5px !important;line-height:1.55 !important}
  .hub-card-prize{font-size:10px !important}
  .hub-card-meta span,.hub-card-action{font-size:9px !important}
  .hub-empty{font-size:11px !important}

  /* Shop / rewards */
  .shop-count{font-size:12px !important}
  .shop-filter{font-size:11px !important}
  .portal-product-type{font-size:9px !important}
  .portal-product h3{font-size:clamp(14px,.78vw,16px) !important}
  .portal-price span{font-size:9px !important}
  .portal-redeem{font-size:10px !important}
  .shop-bottom p{font-size:12px !important}
  .shop-bottom span{font-size:10px !important}

  /* Members / rankings / systems */
  .data-main b{font-size:13px !important}
  .data-main small{font-size:10px !important}
  .rank-no{font-size:12px !important}
  .leader-score strong{font-size:13px !important}
  .leader-score span{font-size:10px !important}
  .system-card b{font-size:12px !important}
  .system-card small{font-size:9px !important}
  .system-card strong{font-size:9px !important}
  .member-directory-name{font-size:13px !important}
  .member-directory-stats b{font-size:12px !important}
  .member-directory-stats small{font-size:8px !important}
  .member-directory-open{font-size:8.5px !important}
  .member-directory-level,.member-directory-badges i{font-size:7.5px !important}
}

/* Medium desktop: widen a little, but do not force a huge layout onto 1366px laptops. */
@media (min-width:1451px) and (max-width:1919px){
  :root{
    --shell:min(1260px,calc(100% - 48px)) !important;
  }
  .v2-nav .nav-links{gap:clamp(17px,1.15vw,22px) !important}
  .engagement-shell{padding:clamp(24px,1.55vw,28px) !important}
  .engagement-top-grid,.engagement-main-grid{gap:14px !important}
  .engagement-main-grid{grid-template-columns:minmax(0,1.50fr) minmax(330px,.80fr) !important}
  .engagement-panel{padding:18px !important}
  .engagement-mission{padding:12px !important;grid-template-columns:39px minmax(0,1fr) auto !important}
  .shop-shell{padding:23px !important}
}

/* Full-HD 1920px and larger: official-site style fixed content width.
   The page no longer keeps stretching on 2K/4K/ultrawide monitors. */
@media (min-width:1920px){
  :root{
    --shell:min(1320px,calc(100% - 56px)) !important;
  }
  .v2-nav .nav-links{gap:22px !important}
  .engagement-shell{padding:28px !important}
  .engagement-head{margin-bottom:22px !important}
  .engagement-head p{max-width:820px !important}
  .engagement-top-grid{gap:14px !important;margin-bottom:14px !important}
  .engagement-stat-card{padding:19px !important;min-height:154px !important}
  .engagement-main-grid{gap:14px !important;grid-template-columns:minmax(0,1.52fr) minmax(345px,.78fr) !important}
  .engagement-panel{padding:19px !important}
  .engagement-missions{gap:10px !important}
  .engagement-mission{padding:13px !important;grid-template-columns:40px minmax(0,1fr) auto !important}
  .engagement-claim{min-width:70px !important}
  .hub-card{padding:16px !important}
  .shop-shell{padding:24px !important}
  .member-directory-card{padding:15px !important}
}

/* Floating planets: smaller, edge-biased and bounded.
   They scale only within a narrow safe range instead of growing with the monitor. */
@media (min-width:1451px){
  .st4r-slot-saturn{
    width:clamp(150px,8.2vw,180px) !important;
    height:clamp(114px,6.2vw,138px) !important;
  }
  .st4r-slot-jupiter,
  .st4r-slot-neptune,
  .st4r-slot-earth{
    width:clamp(118px,6.5vw,148px) !important;
  }

  .st4r-planet-left-top{left:clamp(14px,1.15vw,28px) !important}
  .st4r-planet-left-bottom{left:clamp(16px,1.25vw,30px) !important}
  .st4r-planet-right-top{right:clamp(14px,1.15vw,28px) !important}
  .st4r-planet-right-bottom{right:clamp(16px,1.25vw,30px) !important}

  .st4r-world-label{bottom:-29px !important;min-width:82px !important;padding:6px 10px !important}
  .st4r-world-label small{font-size:5.5px !important}
  .st4r-world-label b{font-size:8.5px !important}
}

/* Ultra-wide / 4K guard: same content scale, no giant planets or runaway spacing. */
@media (min-width:2560px){
  :root{--shell:1320px !important}
  .st4r-slot-saturn{width:180px !important;height:138px !important}
  .st4r-slot-jupiter,.st4r-slot-neptune,.st4r-slot-earth{width:148px !important}
}


/* ST4R Universe — Premium Responsive Header V5
   Desktop-only layered override. It does not change JS, APIs, points, shop logic,
   Daily Spin or mobile/tablet layout below 1051px. */

@media (min-width:1051px){
  .v2-header{
    background:
      linear-gradient(180deg,rgba(8,11,29,.965),rgba(5,7,19,.92)) !important;
    border-bottom:1px solid rgba(151,169,255,.13) !important;
    box-shadow:0 14px 44px rgba(0,0,0,.20) !important;
    backdrop-filter:blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(145%) !important;
  }
  .v2-header::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(109,93,255,.58) 28%,rgba(74,173,255,.54) 55%,transparent 86%);
    opacity:.7;
  }

  /* Three real responsive regions: brand / navigation / account controls.
     max-content on the sides means the middle can shrink without overlapping. */
  .v2-header .v2-nav.shell{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:78px !important;
    min-height:78px !important;
    margin:0 !important;
    padding-inline:clamp(18px,2.55vw,54px) !important;
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) max-content !important;
    align-items:center !important;
    gap:clamp(14px,1.45vw,30px) !important;
  }

  .v2-header .brand{
    justify-self:start !important;
    min-width:0 !important;
    margin:0 !important;
    gap:10px !important;
  }
  .v2-header .brand img{
    width:40px !important;
    height:40px !important;
    border-radius:13px !important;
    box-shadow:0 0 0 1px rgba(144,158,255,.12),0 10px 30px rgba(50,87,207,.22) !important;
  }
  .v2-header .brand strong{font-size:20px !important;letter-spacing:.105em !important}
  .v2-header .brand small{font-size:7.5px !important;letter-spacing:.38em !important;margin-top:6px !important}

  .v2-header .nav-links{
    justify-self:center !important;
    min-width:0 !important;
    width:min(100%,820px) !important;
    max-width:820px !important;
    height:78px !important;
    margin:0 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:space-between !important;
    gap:clamp(3px,.70vw,14px) !important;
    white-space:nowrap !important;
  }
  .v2-header .nav-links a{
    min-width:0 !important;
    height:78px !important;
    padding-inline:clamp(5px,.42vw,9px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    border-radius:12px !important;
    color:#aeb8d3 !important;
    font-size:clamp(10.5px,.64vw,12px) !important;
    font-weight:800 !important;
    letter-spacing:-.005em !important;
    transition:color .18s ease,background .18s ease !important;
  }
  .v2-header .nav-links a:hover,
  .v2-header .nav-links a.is-active{
    color:#f4f7ff !important;
    background:linear-gradient(180deg,rgba(116,93,255,.08),rgba(74,145,255,.025)) !important;
  }
  .v2-header .nav-links a::after{
    content:"" !important;
    position:absolute !important;
    left:18% !important;
    right:18% !important;
    bottom:0 !important;
    height:3px !important;
    border-radius:999px 999px 0 0 !important;
    background:linear-gradient(90deg,#7d66ff,#55b7ff) !important;
    box-shadow:0 0 18px rgba(91,126,255,.5) !important;
    opacity:0 !important;
    transform:scaleX(.45) !important;
    transition:opacity .18s ease,transform .18s ease !important;
  }
  .v2-header .nav-links a:hover::after,
  .v2-header .nav-links a.is-active::after{opacity:1 !important;transform:scaleX(1) !important}

  .v2-header .nav-actions{
    justify-self:end !important;
    min-width:0 !important;
    width:max-content !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    white-space:nowrap !important;
  }
  .v2-header .live-pill,
  .v2-header .web-shop-header-purchases,
  .v2-header .nav-account-pro{
    height:48px !important;
    border-color:rgba(139,159,255,.18) !important;
    background:linear-gradient(145deg,rgba(18,22,47,.82),rgba(7,10,25,.78)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.16) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
  }
  .v2-header .live-pill{padding:0 12px !important;border-radius:14px !important;font-size:10px !important}
  .v2-header .live-pill i{width:7px !important;height:7px !important;flex:0 0 7px !important}
  .v2-header .live-pill b{font-size:11px !important}
  .v2-header .web-shop-header-purchases{border-radius:14px !important}
  .v2-header .nav-account-pro{
    min-width:168px !important;
    max-width:184px !important;
    padding:5px 9px 5px 6px !important;
    border-radius:14px !important;
  }
  .v2-header .nav-account-pro .nav-profile-avatar{width:36px !important;height:36px !important;flex:0 0 36px !important;border-radius:11px !important}
  .v2-header .nav-account-pro .nav-profile-meta strong{max-width:94px !important;font-size:11.5px !important}
  .v2-header .nav-account-pro .nav-points-value{font-size:11.5px !important}
  .v2-header .nav-account-pro .nav-points-unit{font-size:6.8px !important}
  .v2-header .menu-btn{flex:0 0 auto !important}
}

/* Typical 125% Windows scaling on a 1920px display often gives ~1536 CSS px.
   Compact the account area before it can touch Rankings. */
@media (min-width:1451px) and (max-width:1699px){
  .v2-header .v2-nav.shell{padding-inline:clamp(18px,2vw,34px) !important;gap:clamp(10px,1vw,18px) !important}
  .v2-header .nav-links{max-width:760px !important;gap:4px !important}
  .v2-header .nav-links a{font-size:10.5px !important;padding-inline:5px !important}
  .v2-header .web-shop-header-purchases{width:48px !important;min-width:48px !important;padding:5px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:150px !important;max-width:160px !important}
  .v2-header .nav-account-pro .nav-profile-meta strong{max-width:72px !important}
  .v2-header .live-pill{padding-inline:10px !important;font-size:9.5px !important}
}

/* Compact desktop / laptop. Nothing is allowed to overlap: controls progressively simplify. */
@media (min-width:1241px) and (max-width:1450px){
  .v2-header .v2-nav.shell{padding-inline:18px !important;gap:11px !important}
  .v2-header .brand{gap:8px !important}
  .v2-header .brand img{width:37px !important;height:37px !important}
  .v2-header .brand strong{font-size:18px !important}
  .v2-header .brand small{font-size:6.8px !important}
  .v2-header .nav-links{max-width:690px !important;gap:2px !important}
  .v2-header .nav-links a{font-size:10px !important;padding-inline:4px !important}
  .v2-header .live-pill{font-size:0 !important;padding-inline:9px !important;gap:6px !important}
  .v2-header .live-pill b{font-size:10.5px !important}
  .v2-header .web-shop-header-purchases{width:46px !important;min-width:46px !important;padding:5px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:138px !important;max-width:148px !important;gap:7px !important}
  .v2-header .nav-account-pro .nav-profile-meta strong{max-width:62px !important;font-size:10.5px !important}
  .v2-header .nav-account-pro .nav-points-value{font-size:10.5px !important}
  .v2-header .nav-account-arrow{display:none !important}
}

@media (min-width:1181px) and (max-width:1240px){
  .v2-header .v2-nav.shell{padding-inline:16px !important;gap:9px !important}
  .v2-header .brand img{width:36px !important;height:36px !important}
  .v2-header .brand strong{font-size:17px !important}
  .v2-header .brand small{font-size:6.5px !important}
  .v2-header .nav-links{max-width:640px !important;gap:0 !important}
  .v2-header .nav-links a{font-size:9.5px !important;padding-inline:3px !important}
  .v2-header .live-pill{display:none !important}
  .v2-header .web-shop-header-purchases{width:44px !important;min-width:44px !important;padding:4px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:44px !important;width:44px !important;max-width:44px !important;padding:5px !important}
  .v2-header .nav-account-pro .nav-profile-meta,.v2-header .nav-account-arrow{display:none !important}
  .v2-header .nav-account-pro .nav-profile-avatar{margin:auto !important}
}

/* 1051–1180 CSS px: use the site's existing hamburger interaction instead of squeezing 7 links.
   This is what keeps small desktop/laptop viewports professional and collision-free. */
@media (min-width:1051px) and (max-width:1180px){
  .v2-header .v2-nav.shell{
    height:72px !important;
    min-height:72px !important;
    padding-inline:18px !important;
    display:flex !important;
    gap:10px !important;
  }
  .v2-header .brand{flex:0 0 auto !important}
  .v2-header .nav-links{display:none !important}
  .v2-header .nav-links.open{
    display:flex !important;
    position:absolute !important;
    top:72px !important;
    left:18px !important;
    right:18px !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:3px !important;
    padding:10px !important;
    border:1px solid rgba(143,159,255,.18) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,rgba(10,13,31,.985),rgba(5,8,21,.985)) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter:blur(24px) !important;
  }
  .v2-header .nav-links.open a{
    height:44px !important;
    justify-content:flex-start !important;
    padding:0 13px !important;
    border-radius:11px !important;
    font-size:11px !important;
  }
  .v2-header .nav-links.open a::after{display:none !important}
  .v2-header .nav-actions{margin-left:auto !important;gap:7px !important}
  .v2-header .live-pill{display:none !important}
  .v2-header .web-shop-header-purchases{width:44px !important;min-width:44px !important;padding:4px !important}
  .v2-header .web-shop-header-label{display:none !important}
  .v2-header .nav-account-pro{min-width:44px !important;width:44px !important;max-width:44px !important;padding:5px !important}
  .v2-header .nav-account-pro .nav-profile-meta,.v2-header .nav-account-arrow{display:none !important}
  .v2-header .nav-account-pro .nav-profile-avatar{margin:auto !important}
  .v2-header .menu-btn{
    display:inline-grid !important;
    place-items:center !important;
    width:44px !important;
    height:44px !important;
    border-radius:13px !important;
    border:1px solid rgba(139,159,255,.18) !important;
    background:linear-gradient(145deg,rgba(18,22,47,.82),rgba(7,10,25,.78)) !important;
  }
}

/* Wide / 2K / 4K guard. The header stays centered visually instead of spreading links endlessly. */
@media (min-width:1700px){
  .v2-header .nav-links{width:min(100%,820px) !important;max-width:820px !important}
}
@media (min-width:2560px){
  .v2-header .v2-nav.shell{padding-inline:64px !important}
}


/* ST4R Premium Sections V6.1 — Wheel/Grid Fix
   Route-only layout layer. No API, bot, database or component logic changes. */

html.st4r-route-switching {
  scroll-behavior: auto !important;
}

body.st4r-router-ready main > section.st4r-route-hidden {
  display: none !important;
}

/* Keep routed pages visually intentional instead of looking like a chopped long page. */
body.st4r-router-ready[data-st4r-route]:not([data-st4r-route="universe"]) main {
  padding-top: clamp(18px, 2.2vw, 34px);
}

body.st4r-router-ready[data-st4r-route]:not([data-st4r-route="universe"]) main > section.st4r-route-visible:first-of-type {
  margin-top: 0 !important;
}

/* Premium compact route indicator for dedicated sections. */
.st4r-routebar {
  width: min(100% - clamp(28px, 5vw, 80px), 1320px);
  margin: 0 auto clamp(10px, 1.2vw, 18px);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(145, 166, 255, .13);
  color: rgba(221, 228, 255, .64);
}

.st4r-routebar[hidden] { display: none !important; }

.st4r-routebar-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.st4r-routebar-copy i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dfbc4;
  box-shadow: 0 0 14px rgba(125, 251, 196, .55);
  flex: 0 0 auto;
}

.st4r-routebar-copy b {
  color: rgba(238, 242, 255, .94);
}

.st4r-routebar-copy span {
  color: rgba(139, 157, 220, .62);
}

.st4r-routebar-home {
  flex: 0 0 auto;
  text-decoration: none;
  color: rgba(210, 219, 255, .72);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid rgba(139, 157, 220, .16);
  border-radius: 999px;
  background: rgba(8, 13, 35, .36);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

@media (hover:hover) and (pointer:fine) {
  .st4r-routebar-home:hover {
    color: #fff;
    border-color: rgba(128, 150, 255, .38);
    background: rgba(52, 60, 120, .20);
  }
}

/* V6.1 FIX: V6 forced every visible SECTION to display:block, which destroyed
   existing grid/flex layouts. The home hero is a 2-column grid, so the Daily Spin
   dropped below the copy. Visible sections now keep their ORIGINAL display mode. */
@media (min-width:1051px) {
  body.st4r-router-ready[data-st4r-route="universe"] #universe.st4r-route-visible {
    display:grid !important;
    grid-template-columns:1.04fr .96fr !important;
    align-items:center !important;
  }
  body.st4r-router-ready[data-st4r-route="universe"] #universe .hero-visual-live {
    align-self:center !important;
    margin-top:0 !important;
  }
  body.st4r-router-ready[data-st4r-route="universe"] #universe .hero-live-wrap {
    margin-top:0 !important;
  }
}

/* Home becomes a clean public landing page: hero -> explore cards -> CTA. */
body[data-st4r-route="universe"] #inside-st4r {
  margin-top: clamp(54px, 7vw, 98px) !important;
}

body[data-st4r-route="universe"] #inside-st4r .st4r-inside-shell {
  overflow: hidden;
}

body[data-st4r-route="universe"] #inside-st4r .st4r-inside-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-st4r-route="universe"] #inside-st4r .st4r-world-card {
  min-height: 190px;
}

/* Dedicated pages should fill the useful desktop width consistently. */
body.st4r-router-ready main > section.st4r-route-visible.shell,
body.st4r-router-ready main > section.st4r-route-visible.portal-section {
  width: min(calc(100% - clamp(32px, 5vw, 96px)), 1320px);
}

/* Allow page sections with existing tight class to breathe when they stand alone. */
body[data-st4r-route="topics"] #topics,
body[data-st4r-route="members"] #members,
body[data-st4r-route="leaderboard"] #leaderboard,
body[data-st4r-route="feedback"] #feedback {
  margin-bottom: clamp(52px, 7vw, 96px) !important;
}

/* Active nav is clear but restrained. */
.v2-header .nav-links a.is-active {
  color: #ffffff !important;
}

.v2-header .nav-links a.is-active::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

@media (max-width: 1180px) {
  .st4r-routebar {
    width: min(100% - 28px, 980px);
  }

  body[data-st4r-route="universe"] #inside-st4r .st4r-inside-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.st4r-router-ready[data-st4r-route]:not([data-st4r-route="universe"]) main {
    padding-top: 12px;
  }

  .st4r-routebar {
    width: calc(100% - 24px);
    min-height: 34px;
    gap: 10px;
  }

  .st4r-routebar-copy {
    font-size: 8px;
    letter-spacing: .12em;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .st4r-routebar-copy span { display: none; }
  .st4r-routebar-home { font-size: 8px; padding: 7px 10px; }

  body[data-st4r-route="universe"] #inside-st4r .st4r-inside-grid {
    grid-template-columns: 1fr;
  }

  body[data-st4r-route="universe"] #inside-st4r .st4r-world-card {
    min-height: 0;
  }
}


/* ST4R Universe — Planets Inward V6.2
   Desktop-only visual polish.
   Goal: bring floating planets a little closer to the content and make them
   slightly larger, without touching phone/tablet layouts or site behavior. */

@media (min-width:1451px){
  /* Slightly larger than Responsive Wide V4, but still bounded so 2K/4K
     monitors do not create giant planets. */
  .st4r-slot-saturn{
    width:clamp(166px,8.9vw,196px) !important;
    height:clamp(126px,6.75vw,149px) !important;
  }

  .st4r-slot-jupiter,
  .st4r-slot-neptune,
  .st4r-slot-earth{
    width:clamp(132px,7.4vw,164px) !important;
  }

  /* Move the four planet anchors inward from the screen edges. */
  .st4r-planet-left-top{
    left:clamp(46px,3.2vw,72px) !important;
  }

  .st4r-planet-left-bottom{
    left:clamp(50px,3.45vw,78px) !important;
  }

  .st4r-planet-right-top{
    right:clamp(46px,3.2vw,72px) !important;
  }

  .st4r-planet-right-bottom{
    right:clamp(50px,3.45vw,78px) !important;
  }
}

/* Keep the same controlled scale on very wide displays. */
@media (min-width:2560px){
  .st4r-slot-saturn{width:196px !important;height:149px !important}
  .st4r-slot-jupiter,
  .st4r-slot-neptune,
  .st4r-slot-earth{width:164px !important}

  .st4r-planet-left-top{left:72px !important}
  .st4r-planet-left-bottom{left:78px !important}
  .st4r-planet-right-top{right:72px !important}
  .st4r-planet-right-bottom{right:78px !important}
}