/* hub.css: Game Hub pages (/vr/<game>/ and /vr/), generated by hubs.py. Linked from those pages only (CSP: no inline style). */
/* hero banner: Steam library hero + logo, or the cover art (.hub-hero-cover) with a plain H1 */
.hub-hero{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0 0 1.25rem;aspect-ratio:1920/620;min-height:180px;background:var(--bg2)}
.hub-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-hero-cover .hub-hero-bg{filter:blur(2px) saturate(1.1);transform:scale(1.04)}
.hub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,10,.9) 0%,rgba(6,7,10,.55) 45%,rgba(6,7,10,0) 75%)}
.hub-hero-text{position:absolute;left:0;bottom:0;z-index:1;padding:1.25rem 1.5rem;max-width:min(560px,90%)}
.hub-logo{display:block;width:min(360px,100%);height:auto;margin:0 0 .6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
.hub-titlerow{display:flex;align-items:center;gap:.75rem;margin:0 0 .25rem}
.hub-titlerow h1{margin:0}
.hub-kicker{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.hub-hero .lede{margin:0;color:var(--text)}
.plat-badge{vertical-align:middle;object-fit:contain}
@media (max-width:640px){.hub-hero{aspect-ratio:auto;min-height:220px}.hub-hero::after{background:linear-gradient(0deg,rgba(6,7,10,.92) 10%,rgba(6,7,10,.2) 100%)}}

/* version rows: cover with the platform button attached underneath, glowing platform badge */
.hub-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hub-row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem 1.25rem;align-items:center;padding:1rem .5rem;border-bottom:1px solid var(--line);transition:background .15s ease}
.hub-row:hover{background:var(--bg2)}
.hub-rmedia{display:flex;flex-direction:column;align-items:stretch;width:150px;flex:0 0 150px;border-radius:6px;transition:box-shadow .15s ease,filter .15s ease}
.hub-rmedia:hover{filter:brightness(1.08)}
.hub-rcover{display:block;width:150px;flex:0 0 auto;border-radius:6px;overflow:hidden;background:var(--bg3)}
.hub-rcover img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0}
.hub-rbtn-under{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin:0;padding:3px 6px;font-size:14px;line-height:1.2;min-height:0;text-align:center;border-radius:0 0 6px 6px}
.hub-row[data-platform="quest"] .hub-rbtn-under{background:#00f0ff;border-color:#00f0ff;color:#001014;box-shadow:0 0 12px rgba(0,240,255,.45)}
.hub-row[data-platform="pcvr"] .hub-rbtn-under{background:#7dd3fc;border-color:#7dd3fc;color:#001014;box-shadow:0 0 12px rgba(125,211,252,.45)}
.hub-row[data-platform="frame"] .hub-rbtn-under{background:#ff8a3d;border-color:#ff8a3d;color:#140800;box-shadow:0 0 12px rgba(255,138,61,.45)}
.hub-row[data-platform="quest"] .hub-rmedia:hover{box-shadow:0 0 28px rgba(0,240,255,.7),0 0 12px rgba(0,240,255,.45)}
.hub-row[data-platform="pcvr"] .hub-rmedia:hover{box-shadow:0 0 28px rgba(125,211,252,.7),0 0 12px rgba(125,211,252,.45)}
.hub-row[data-platform="frame"] .hub-rmedia:hover{box-shadow:0 0 28px rgba(255,138,61,.7),0 0 12px rgba(255,138,61,.45)}
.hub-rhead{display:flex;align-items:center;gap:.75rem;margin:0 0 .5rem;isolation:isolate}
.hub-rbadge{position:relative;display:inline-flex;flex:0 0 auto}
.hub-rbadge::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(closest-side,var(--glow) 0%,transparent 100%);opacity:.5;z-index:-1}
.hub-rbadge .plat-badge{filter:drop-shadow(0 3px 6px rgba(0,0,0,.85)) drop-shadow(0 0 9px var(--glow))}
.hub-glow-quest{--glow:rgba(0,240,255,.85)}.hub-glow-pcvr{--glow:rgba(125,211,252,.85)}.hub-glow-frame{--glow:rgba(255,138,61,.85)}
.hub-rname{margin:0;font-size:1.1rem}
.hub-rname a{color:var(--text);text-decoration:none}
.hub-rname a:hover{color:var(--accent)}
.hub-rdev{margin:.15rem 0 0;color:var(--muted);font-size:.9rem}
.hub-rnote{margin:.5rem 0 0;color:var(--muted)}
@media (max-width:720px){.hub-row{grid-template-columns:1fr}.hub-rmedia{display:none!important}}

/* "Which should I pick?" */
.hub-picks{margin:0 0 .75rem;padding-left:1.1rem}
.hub-picks li{margin:.4rem 0}

/* /vr/ index of every Game Hub */
.hub-index{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.hub-tile a{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg2);color:var(--text);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.hub-tile a:hover{border-color:var(--accent);transform:translateY(-2px)}
.hub-tile-img{display:block;aspect-ratio:460/215;background:var(--bg3)}
.hub-tile-img img{display:block;width:100%;height:100%;object-fit:cover}
.hub-tile-name{display:block;padding:.6rem .75rem 0;font-weight:700}
.hub-tile-sub{display:flex;align-items:center;gap:.3rem;padding:.25rem .75rem .7rem;color:var(--muted);font-size:.85rem}
/* GAME HUB label pinned to the hero's top-left (Chris 2026-10-31) */
.hub-kicker-corner{position:absolute;top:1rem;left:1.5rem;z-index:2;font-size:clamp(1.15rem,2.4vw,1.75rem);font-weight:900;letter-spacing:.16em;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.85)}
@media (max-width:640px){.hub-kicker-corner{top:.75rem;left:1rem}}

/* ICON-OUTLINE-F start: per-platform 1px coloured outline on the small platform icons (Chris t702u, 2026-10-31).
   Applies to the 24px /vr/ tile icons and 36px hub icons (lede, compare table, Which should I pick).
   The 60px hub-row badges keep their own glow (.hub-rbadge .plat-badge wins on specificity).
   To revert: delete this block (and optionally the plat-badge-<code> class in hubs.py _pbadge). */
.plat-badge-pcvr{filter:drop-shadow(1px 0 0 #7dd3fc) drop-shadow(-1px 0 0 #7dd3fc) drop-shadow(0 1px 0 #7dd3fc) drop-shadow(0 -1px 0 #7dd3fc)}
.plat-badge-quest{filter:drop-shadow(1px 0 0 #00f0ff) drop-shadow(-1px 0 0 #00f0ff) drop-shadow(0 1px 0 #00f0ff) drop-shadow(0 -1px 0 #00f0ff)}
.plat-badge-frame{filter:drop-shadow(1px 0 0 #ff8a3d) drop-shadow(-1px 0 0 #ff8a3d) drop-shadow(0 1px 0 #ff8a3d) drop-shadow(0 -1px 0 #ff8a3d)}
/* ICON-OUTLINE-F end */

/* COVER-BOX start: fixed 460x215 cover boxes on /vr/ tiles and hub version rows (Chris t703u, 2026-10-31).
   Steam headers fill the box; portrait flyers / box art are shown whole over a blurred, dimmed copy (same as .thumb-cover).
   Cover-art hub heroes get the poster shown whole on the right over a stronger blur. */
.hub-cv{position:relative;display:block;overflow:hidden;aspect-ratio:460/215;background:#0a0d12}
.hub-cv img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:0}
.hub-cv .hub-cv-fg{object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.hub-cv .hub-cv-fill{object-fit:cover;filter:none}
.hub-cv .hub-cv-bg{object-fit:cover;filter:blur(12px) brightness(.4) saturate(1.3);transform:scale(1.25)}
.hub-rcover.hub-cv{border-radius:6px 6px 0 0}
.hub-hero-has-poster .hub-hero-bg{filter:blur(14px) brightness(.55) saturate(1.2);transform:scale(1.15)}
.hub-hero-poster{position:absolute;right:4%;top:7%;height:86%;width:auto;max-width:42%;object-fit:contain;z-index:1;border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.75)}
@media (max-width:560px){.hub-hero-poster{display:none}}
/* COVER-BOX end */
/* HUB_GETGAME: hub 'Get the original game' block (the 'About <Game> in VR' section was removed, Chris 2026-11-02) */
.hub-getgame .get-game{margin:0}
/* /HUB_GETGAME */
/* HUB_ROW_PLAT: large platform badge in place of the per-mod cover on hub rows (Chris 2026-11-01) */
.hub-rplat{display:flex;align-items:center;justify-content:center;width:150px;height:96px;border-radius:6px 6px 0 0;background:#0a0d12;text-decoration:none}
.hub-rplat-pcvr{background:radial-gradient(circle at 50% 55%,rgba(125,211,252,.28) 0%,rgba(10,13,18,1) 72%)}
.hub-rplat-quest{background:radial-gradient(circle at 50% 55%,rgba(0,240,255,.26) 0%,rgba(10,13,18,1) 72%)}
.hub-rplat-frame{background:radial-gradient(circle at 50% 55%,rgba(255,138,61,.26) 0%,rgba(10,13,18,1) 72%)}
.hub-rplat .plat-badge{width:104px;height:86px;object-fit:contain}
@media (min-width:721px){.hub-row .hub-rhead .hub-rbadge{display:none}}   /* the big badge sits beside the name; phones keep the 60px badge in the row head */
/* /HUB_ROW_PLAT */
/* HUB_ROW_MOBILE: phones: the row's spec strip (incl. the UFVR Grade segment) wraps instead of widening the page past 390px */
@media (max-width:720px){.hub-row{grid-template-columns:minmax(0,1fr)}.hub-rbody,.hub-rhead{min-width:0}.hub-row .spec-strip{flex-wrap:wrap}}
/* /HUB_ROW_MOBILE */
/* HUB_FAQ_TIGHT: '<Game> VR questions' one-line questions sit close together (Chris 2026-11-02); each question row stays >=40px tall to tap */
.hub-faq .faq .faq-item{padding:0}
.hub-faq .faq .faq-item summary{padding:2px 0;min-height:40px;gap:.5rem}
.hub-faq .faq .faq-item summary h3{line-height:1.25}
.hub-faq .faq .faq-item p{margin:.15rem 0 .7rem 1.6rem}
/* /HUB_FAQ_TIGHT */
/* HUB_INDEX_UNIFIED: /vr/ every hub in one identical tile, whatever its mod count (Chris pt755u, 2026-11-02; the 'More games' list is gone).
   Desktop exactly 3 across, tablet 2; phones (<=759px) a compact row sized like the mobile mod list rows on /directory/<platform>/
   (.cards .card-link: thumb column clamp(148px,36vw,176px), 460x215 thumb, 9px 10px padding, 13.95px title / 11.25px subline after TEXT_SCALE). */
.hub-index{grid-template-columns:repeat(3,minmax(0,1fr))}
.hub-index .hub-tile-img.hub-cv img{object-fit:cover;filter:none}
.hub-tile-name{overflow-wrap:anywhere}
@media (max-width:999px){.hub-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){
  .hub-index{grid-template-columns:1fr;gap:8px}
  .hub-tile a{display:grid;grid-template-columns:clamp(148px,36vw,176px) minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;row-gap:3px;align-content:center;align-items:center;padding:9px 10px}
  .hub-tile a:hover{transform:none}
  .hub-index .hub-tile-img.hub-cv{grid-column:1;grid-row:1 / span 2;width:100%;aspect-ratio:460/215;border-radius:8px;border:1px solid var(--line)}
  .hub-tile-name{grid-column:2;grid-row:1;align-self:end;padding:0;font-size:13.95px;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hub-tile-sub{grid-column:2;grid-row:2;align-self:start;padding:0;font-size:11.25px;line-height:1.22;flex-wrap:wrap}
}
/* /HUB_INDEX_UNIFIED */
/* HUB_INDEX_FILTERS: /vr/ game-level search, filters and sort (Chris 2026-11-02); the look comes from the mod list classes
   (.list-sticky .lhead .fbtn .fbox .filters in style.css), this only lays out the 3-5 controls. */
.hubs-ctl{margin-top:18px}
.filters.filters-hubs .f-search{grid-column:1/-1}
@media(min-width:1000px){
  .filters.filters-hubs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end}
  .filters.filters-hubs .f-search{grid-column:span 2}
}
@media(max-width:639px){
  .filters.filters-hubs{grid-template-columns:1fr 1fr;gap:10px}
  .filters.filters-hubs #hreset{grid-column:1/-1}
}
#hnone{margin:1rem 0}
/* /HUB_INDEX_FILTERS */
/* Chris 2026-11-02 t767u: hub mod list (desktop): platform badge ~30% smaller (104x86 -> 73x60), the pill under it is gone,
   plain platform text sits right of the badge like Compare at a glance. Phones unchanged (.hub-rmedia hidden <=720px). */
.hub-rmedia{flex-direction:row;align-items:center;gap:.5rem;width:auto;flex:0 0 auto;border-radius:0}
.hub-rmedia:hover,.hub-row[data-platform] .hub-rmedia:hover{filter:none;box-shadow:none}
.hub-rplat{width:73px;height:60px;border-radius:6px}
.hub-rplat .plat-badge{width:73px;height:60px}
.hub-rplat-lab{min-width:6.2em;color:var(--text);font-weight:600;white-space:nowrap}
/* /Chris 2026-11-02 t767u: hub mod list badges */
/* Chris 2026-11-02 t767u: hero: platform badges only (no Quest/PCVR/Steam Frame words), '# VR versions' right-justified across the hero */
.hub-hero-text{right:0;max-width:none}
.hub-hero-text .hub-logo,.hub-hero-text .hub-titlerow{max-width:min(560px,90%)}
.hub-hero-meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.hub-hero-plats{display:inline-flex;align-items:center;gap:.45rem}
.hub-hero-n{margin-left:auto;font-weight:700;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.7)}
.hub-hero-has-poster .hub-hero-poster{top:6%;height:76%}
/* /Chris 2026-11-02 t767u: hero */
/* Chris 2026-11-02 t767u: phones: the game logo graphic and the text title shrink with the screen width and the hero grows to fit them,
   so neither floats up under the GAME HUB label or off the top edge */
@media (max-width:640px){
  .hub-hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(170px,52vw,220px)}
  .hub-hero-text{position:relative;padding:clamp(2.4rem,11vw,2.9rem) 1rem .85rem}
  .hub-logo{width:auto;max-width:min(clamp(150px,62vw,300px),100%);max-height:clamp(44px,17vw,96px);object-fit:contain;object-position:left bottom;margin:0 0 .4rem}
  .hub-titlerow h1{font-size:clamp(1.05rem,5.6vw,1.55rem);line-height:1.15;overflow-wrap:anywhere}
  .hub-hero-meta{font-size:clamp(.8rem,3.6vw,.95rem)}
  .hub-hero-plats .plat-badge{width:clamp(26px,8vw,36px);height:auto}
  .hub-kicker-corner{font-size:clamp(.95rem,4.6vw,1.15rem)}
}
/* /Chris 2026-11-02 t767u: phone hero titles */
/* Chris 2026-11-02 t772u: hero meta line: 'N VR versions' then the platform badges to its right, both right-justified on one line */
.hub-hero-meta{justify-content:flex-end;flex-wrap:nowrap;gap:.6rem;max-width:none}   /* .lede caps at 60ch; the line spans the hero */
.hub-hero-n{margin-left:0}
.hub-hero-plats{flex:none}
@media (max-width:640px){.hub-hero-meta{gap:.45rem}.hub-hero-plats{gap:.3rem}}
/* /Chris 2026-11-02 t772u: hero meta line */
/* Chris 2026-11-02 t767u: Compare at a glance: UFVR Grade column (letter in the site's grade colours) and tighter columns */
.details.hub-compare th,.details.hub-compare td{width:auto;min-width:0;padding:8px 9px;vertical-align:middle}
.details.hub-compare th{white-space:nowrap}
.details.hub-compare th a{color:inherit;text-decoration:none}
.details.hub-compare th a:hover{color:var(--accent)}
.details.hub-compare td:first-child{white-space:nowrap}
.details.hub-compare .hub-cmp-gcell{text-align:center}
.details.hub-compare th:nth-child(3){text-align:center}
.hub-cmp-grade{font-size:1.45em;font-weight:900;line-height:1}
/* /Chris 2026-11-02 t767u: Compare at a glance */
/* Chris 2026-11-02 t767u: 'Get the original game': a simple list of store links instead of pills */
.hub-getgame .gg-list{margin:.35rem 0 .4rem;padding-left:1.2rem}
.hub-getgame .gg-list li{margin:.15rem 0}
.hub-getgame .gg-link{color:var(--accent)}
/* /Chris 2026-11-02 t767u: Get the original game */
/* Chris 2026-11-02 t767u: 'Which should I pick?' platform label = the Compare at a glance look (36x30 outlined badge + plain name) */
.hub-picks{list-style:none;padding-left:0}
.hub-picks .hub-pick-plat{gap:.3em;font-weight:400}
.hub-picks .hub-pick-plat .plat-badge{width:36px;height:30px}
/* /Chris 2026-11-02 t767u: Which should I pick */
/* Chris 2026-11-02 t767u: '<Game> VR questions' compressed: minimal space between questions (rows stay >=30px to tap, above the 24px minimum) */
.hub-faq .faq .faq-item{padding:0;border-bottom-color:rgba(0,240,255,.12)}
.hub-faq .faq .faq-item summary{padding:1px 0;min-height:30px;gap:.4rem}
.hub-faq .faq .faq-item summary h3{font-size:1.02rem;line-height:1.2}
.hub-faq .faq .faq-item p{margin:.1rem 0 .45rem 1.5rem}
.hub-faq .lhead{margin-bottom:.25rem}
/* /Chris 2026-11-02 t767u: questions */
/* Chris 2026-11-02 t768u/t769u: 'Every <Game> VR mod' heading pill in the site cyan (was purple sec-popular) */
.hub .sec-label.hub-sec-mods{background:#00f0ff;color:#001014;box-shadow:0 0 16px rgba(0,240,255,.55)}
/* /Chris 2026-11-02 t768u/t769u */
/* Chris 2026-11-03 t774u: moved from inline style blocked by CSP (aeo.hub_faq): hub FAQ question headings. The later
   '.hub-faq .faq .faq-item summary h3' t767u rule (1.02rem) still sets the size (revert: delete this block) */
.hub-faq .faq-item summary h3{margin:0;font-size:1.15rem}
.hub-faq .faq-item summary:hover h3{color:#00f0ff}
/* end t774u */
/* Chris 2026-11-03 t774u: moved from inline style blocked by CSP (pcvrc._badges): How-to guide 'Works for' platform badges row (revert: delete this block) */
.ht-badges{display:flex;gap:18px;margin:6px 0 14px;flex-wrap:wrap}
/* end t774u */
/* Chris 2026-11-03 t775u: GAME HUB label in the hero's top-right corner, right-justified. Poster heroes move the poster
   down below the label (bottom edge unchanged at 82%) so the label never sits on the poster art; phones keep the title
   padding that already clears the label (revert: delete this block) */
.hub-hero .hub-kicker-corner{left:auto;right:1.5rem;text-align:right}
.hub-hero-has-poster .hub-hero-poster{top:calc(1rem + clamp(1.15rem,2.4vw,1.75rem) + .7rem);height:calc(82% - 1rem - clamp(1.15rem,2.4vw,1.75rem) - .7rem)}
@media (max-width:640px){.hub-hero .hub-kicker-corner{left:auto;right:1rem}}
/* end t775u */