/* Dusty Rocket Games — single homepage with two direct catalogue views. */
body.single-hub-home .genre-strip,
body.single-hub-home .arcade-preview,
body.single-hub-home .games-section,
body.single-hub-home .finder-section,
body.single-hub-home .catalog-section,
body.single-hub-home .studio-section,
body.single-hub-home .contact-section { display: none !important; }

/* The existing hero remains the standard page. Both CTA buttons switch the catalogue below. */
body.single-hub-home .site-header nav { gap: clamp(.7rem, 2vw, 2rem); }
body.single-hub-home .site-header nav > a:first-child {
  color: var(--cream);
  background: var(--ink);
  border: 2px solid var(--cream);
  padding: .45rem .75rem;
  box-shadow: 3px 3px 0 rgb(36 38 40 / .18);
}
body.single-hub-home .site-header nav > a:first-child::after { display: none; }
body.single-hub-home .site-header nav .nav-online {
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: .45rem .75rem;
}
body.single-hub-home .site-header nav .nav-online::after { display: none; }
body.single-hub-home .hero-choice-online,
body.single-hub-home .hero-choice-steam { scroll-behavior: auto; }

#game-hub {
  --hub-dark: #242628;
  --hub-light: #fff6e6;
  --hub-orange: #ff752f;
  --hub-blue: #50b6d6;
  --hub-border: #1e2224;
  background: var(--hub-blue);
  color: var(--hub-dark);
  border-top: 5px solid var(--hub-dark);
  border-bottom: 5px solid var(--hub-dark);
  padding: 0 0 clamp(2.2rem,5vw,5rem);
  min-height: 500px;
  scroll-margin-top: 0;
}
#game-hub button,#game-hub input,#game-hub select { font: inherit; }
#game-hub [hidden], #hub-player[hidden], #hub-player [hidden] { display: none !important; }
#game-hub button:focus-visible,
#game-hub a:focus-visible,
#hub-player button:focus-visible { outline: 3px solid var(--hub-dark); outline-offset: 3px; }

.hub-layout { width: min(84rem,calc(100% - 8rem));margin:0 auto; }
.hub-switchbar {
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:1.25rem;
  padding:1.1rem 0;
  background:var(--hub-dark);
  color:var(--hub-light);
  position:relative;
}
.hub-switchbar::before {
  content:'';
  position:absolute;
  background:var(--hub-dark);
  inset:0 calc((100vw - 100%) / -2);
  z-index:0;
}
.hub-switchbar > * { position:relative;z-index:1; }
.hub-switch-wordmark { font:900 .76rem/1.2 var(--body); letter-spacing:.11em;text-transform:uppercase;display:flex;align-items:center;gap:.65rem; }
.hub-switch-wordmark::before { content:'✳';color:var(--hub-orange);font-size:1.5rem;line-height:1; }
.hub-switch-actions {display:flex;align-items:center;gap:.65rem;}
.hub-view-tab {
  padding:.63rem 1rem;
  background:transparent;
  border:2px solid var(--hub-light);
  color:var(--hub-light);
  cursor:pointer;
  white-space:nowrap;
  font-weight:900 !important;
  font-size:.79rem !important;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.15;
}
.hub-view-tab.hub-tab-active {background:var(--hub-orange);color:var(--hub-dark);border-color:var(--hub-orange);}
.hub-view-tab:hover:not(.hub-tab-active) {background:#44484a;}
.hub-title-line {display:flex;justify-content:space-between;align-items:end;gap:1.5rem;padding:2.45rem 0 1.4rem;}
.hub-title-line h2 { font-family:var(--display);font-size:clamp(2.6rem,5.6vw,5.1rem);line-height:.93;letter-spacing:-.045em;text-transform:uppercase;font-weight:700;color:var(--hub-dark);}
.hub-title-line p{margin:.55rem 0 0;font-weight:700;font-size:.92rem;line-height:1.36;max-width:39rem;}
.hub-count {flex:0 0 auto;font:900 .85rem/1.4 var(--body);padding:.65rem .85rem;background:var(--hub-light);border:2px solid var(--hub-dark);box-shadow:4px 4px 0 #24262833;}
.hub-filter-panel { background:#a9dce8;border:2px solid var(--hub-border);padding:1.15rem;box-shadow:4px 5px 0 #24262833;margin-bottom:1.2rem;}
.hub-categories {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem;}
.hub-category { min-height:2.45rem;padding:.53rem .83rem;border:2px solid var(--hub-border);font-weight:900;font-size:.79rem!important;color:var(--hub-dark);background:var(--hub-light);cursor:pointer;line-height:1.1;text-transform:uppercase;white-space:nowrap;}
.hub-category.hub-active {background:var(--hub-dark);color:var(--hub-light);border-color:var(--hub-dark);box-shadow:3px 3px 0 var(--hub-orange);}
.hub-category:not(.hub-active):hover {background:var(--hub-orange);}
.hub-tools {display:flex;align-items:end;gap:.8rem;}
.hub-search-label { flex:1 1 0; min-width:0;display:flex;flex-direction:column;gap:.3rem;font-size:.7rem;line-height:1.2;letter-spacing:.06em;font-weight:900;text-transform:uppercase;}
.hub-search-label input {width:100%;min-height:2.9rem;background:var(--hub-light);border:2px solid var(--hub-dark);color:var(--hub-dark);padding:.55rem .85rem;border-radius:0;outline-offset:2px;font-size:1rem;letter-spacing:0;font-weight:500;text-transform:none;}
.hub-sort-label { flex:0 0 12rem;display:flex;flex-direction:column;gap:.3rem;font-size:.7rem;line-height:1.2;letter-spacing:.06em;font-weight:900;text-transform:uppercase;}
.hub-sort-label select {width:100%;min-height:2.9rem;padding:.55rem .72rem;border-radius:0;border:2px solid var(--hub-dark);background:var(--hub-light);color:var(--hub-dark);font-size:.95rem;letter-spacing:0;text-transform:none;font-weight:700;}

.hub-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:stretch; }
.hub-card { display:flex;flex-direction:column;text-align:left;min-width:0;padding:.5rem;border:2px solid var(--hub-dark);background:var(--hub-light);box-shadow:5px 6px 0 rgb(36 38 40 / .35);color:var(--hub-dark);cursor:pointer;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease;overflow:hidden; }
.hub-card:hover,.hub-card:focus-visible {transform:translateY(-4px);box-shadow:5px 10px 0 rgb(36 38 40 / .35);}
.hub-card-cover {display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#d9d1bf;color:transparent;}
.hub-steam-card .hub-card-cover { aspect-ratio:616/353; object-fit:cover; }
.hub-card-body {display:flex;flex-direction:column;flex:1;min-width:0;padding:.75rem .42rem .36rem;}
.hub-card-category {font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;line-height:1.2;color:#ad461b;min-height:1.5rem;overflow-wrap:anywhere;}
.hub-card-name {font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,1.7vw,1.7rem);line-height:1.1;letter-spacing:-.027em;margin:.2rem 0 .65rem;flex:1;overflow-wrap:anywhere;}
.hub-card-action {display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-top:1px solid #bab3a8;padding-top:.45rem;font-size:.7rem;font-weight:900;letter-spacing:.05em;}
.hub-card-arrow {font-size:1.45rem;line-height:1;color:var(--hub-dark);font-weight:800;}
.hub-bottom {margin-top:1.55rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;}
#hub-load-more {border:2px solid var(--hub-dark);background:var(--hub-dark);color:var(--hub-light);padding:.87rem 1.6rem;font-size:.83rem!important;font-weight:900;text-transform:uppercase;letter-spacing:.04em;min-height:3rem;cursor:pointer;box-shadow:5px 5px 0 var(--hub-orange);}
#hub-load-more:hover {transform:translateY(-3px);box-shadow:5px 8px 0 var(--hub-orange);}
#hub-load-more:disabled {opacity:.6;cursor:wait;transform:none;}
#hub-feedback {text-align:center;font-weight:750;font-size:.95rem;max-width:28rem;line-height:1.5;}
#hub-feedback.hub-warning { color:#7f2c14; }
#hub-loading {margin:0;font-size:.86rem;font-weight:800;letter-spacing:.03em;text-align:center;}
.hub-hint {font-size:.72rem;margin:1.25rem 0 0;line-height:1.4;text-align:left;opacity:.8;}
.hub-hint a{text-decoration:underline;text-underline-offset:2px;font-weight:800;}

#hub-player {position:fixed;inset:0;z-index:12000;background:rgb(12 14 17 / .88);display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto;}
.hub-player-shell {width:min(96vw,1110px);max-height:calc(100vh - 2rem);display:flex;flex-direction:column;min-width:0;background:var(--hub-light);color:var(--hub-dark);border:3px solid var(--hub-dark);box-shadow:0 0 0 3px var(--hub-light); }
.hub-player-head {display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--hub-dark);color:var(--hub-light);padding:.8rem 1.1rem;font-weight:900;}
.hub-player-head strong{font-family:var(--display);font-size:1.5rem;line-height:1.1;}
#hub-player-close {background:var(--hub-orange);border:2px solid var(--hub-dark);font-weight:900;min-width:2.2rem;min-height:2.2rem;cursor:pointer;}
.hub-player-stage {position:relative;min-height:300px;aspect-ratio:16/9;overflow:hidden;background:var(--hub-dark);}
.hub-player-gate {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.4rem;}
#hub-player-preview {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(.9);}
.hub-player-gate-content {position:relative;z-index:1;max-width:480px;text-align:center;color:var(--hub-light);padding:1rem;}
.hub-player-gate-content p{margin:0 auto .9rem;line-height:1.48;font-size:.91rem;font-weight:700;}
#hub-player-start {display:inline-block;background:var(--hub-orange);border:2px solid var(--hub-light);color:var(--hub-dark);font-size:.95rem;font-weight:900;padding:.75rem 1.4rem;min-width:175px;cursor:pointer;}
#hub-player-frame {position:absolute;inset:0;width:100%;height:100%;}
#hub-player-frame iframe {border:0;width:100%;height:100%;}
#hub-player-frame:not(:empty) + .hub-player-gate {display:none!important;}

@media(max-width:75rem) {
  .hub-layout {width:calc(100% - 5rem);}
  .hub-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:60rem) {
  .hub-layout {width:calc(100% - 4rem);}
  .hub-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;}
  .hub-switch-wordmark {font-size:.65rem;}
  body.single-hub-home .site-header nav {gap:.85rem;}
}
@media(max-width:42rem) {
  .hub-layout {width:calc(100% - 1.8rem);}
  #game-hub {border-top-width:3px;padding-bottom:2.2rem;}
  .hub-switchbar {display:flex;flex-direction:column;gap:.8rem;padding:.9rem 0;}
  .hub-switch-wordmark {font-size:.65rem;}
  .hub-switch-actions {display:grid;grid-template-columns:1fr 1fr;gap:.48rem;}
  .hub-view-tab {min-width:0;padding:.58rem .5rem;font-size:.72rem!important;white-space:normal;text-align:center;min-height:2.8rem;}
  .hub-title-line {padding:1.4rem 0 1.1rem;align-items:start;flex-direction:column;gap:.8rem;}
  .hub-title-line h2 {font-size:clamp(2.4rem,8.8vw,3.3rem);}
  .hub-title-line p {font-size:.83rem;margin-top:.35rem;}
  .hub-count {font-size:.72rem;padding:.46rem .6rem;}
  .hub-filter-panel {padding:.78rem;margin-bottom:.9rem;}
  .hub-categories {display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:.42rem;padding:.15rem .12rem .4rem;margin:0 0 .55rem;scrollbar-width:thin;}
  .hub-category {flex:0 0 auto;font-size:.7rem!important;min-height:2.25rem;padding:.45rem .65rem;}
  .hub-tools {flex-direction:column;align-items:stretch;gap:.62rem;}
  .hub-search-label,.hub-sort-label {width:100%;flex:0 0 auto;}
  .hub-sort-label select {min-height:2.65rem;}
  .hub-search-label input {min-height:2.65rem;font-size:.95rem;}
  .hub-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
  .hub-card {padding:.3rem;box-shadow:3px 4px 0 #24262855;}
  .hub-card-body {padding:.56rem .27rem .22rem;}
  .hub-card-category {font-size:.55rem;letter-spacing:.065em;min-height:1.65rem;}
  .hub-card-name {font-size:clamp(1.02rem,4.5vw,1.42rem);margin:.15rem 0 .5rem;}
  .hub-card-action {font-size:.58rem;letter-spacing:0;padding-top:.4rem;}
  .hub-card-arrow {font-size:1.2rem;}
  #hub-player {padding:.2rem;}
  .hub-player-shell {width:100%;max-height:calc(100dvh - .4rem);}
  .hub-player-head {padding:.6rem .7rem;}
  .hub-player-head strong {font-size:1.23rem;}
  .hub-player-stage {aspect-ratio:3/4;min-height:270px;}
  .hub-player-gate-content p {font-size:.76rem;}
  body.single-hub-home .site-header nav > a:first-child,
  body.single-hub-home .site-header nav .nav-online {font-size:.76rem;padding:.35rem .55rem;}
}
@media(prefers-reduced-motion:reduce) {
  .hub-card,#hub-load-more {transition:none;}
}

/* Prevent the full-bleed dark header decoration from creating a horizontal scrollbar. */
#game-hub {overflow-x:clip}