/**
 * TGV HOME OF HEROES — HQ styles
 *
 * The designer's five layered stylesheets from the October handoff
 * (document/updated-home-of-heroes-tiering/source/public/, release v20), in
 * the order the designer requires — tgv-scene → tgv-refined → tgv-approved →
 * tgv-readability → tgv-intro — between two WordPress layers:
 *
 *   LAYER 0    Resets for style.css's site-wide p / img / heading rules,
 *              which would otherwise leak into the scene. Zero added
 *              specificity (:where), so every designer rule below still wins.
 *              Must stay first.
 *   LAYERS 1-5 The designer's CSS, changed only where WordPress needs it:
 *              - url('<file>') → var(--hq-art-*), set by the template from
 *                tgv_heroes_assets_url(), so the images can move host
 *              - 60px / 80px navbar offsets → var(--navbar-height)
 *              - --primary is not redefined (the theme token is the same red)
 *              - the @font-face rules live in the template's <style>
 *                (CLAUDE.md — Typography); 'TGV Poppins' dropped, the theme
 *                already loads Poppins
 *              - .tgv-scene-rotate h1 → :is(h1,h2)
 *              - tgv-scene.css reformatted one rule per line
 *   LAYER 6    WordPress integration: the navbar offset and stacking, the
 *              header beside #shareContainer, the in-flow dialog close
 *              button, the shared trivia widget, and the parts only the
 *              WordPress build has (Season switcher, quest states, …).
 *
 * Taking a later handoff: apply the same edits to the new five files and
 * replace layers 1-5 wholesale. Layers 0 and 6 stay.
 *
 * Loaded in <head> by tgv_heroes_enqueue_styles()
 * (includes/home-of-heroes/hq-engine.php), on this page only.
 */

/* ─── LAYER 0 — WordPress resets ────────────────────────────────────────── */
/* style.css gives every p width 100%, opacity .85 and line-height 1.2, every
   img width 100%, and every heading Poppins 24px with a bottom margin. The
   designer built on browser defaults, so restore those inside the scene. */
.tgv-scene :where(p){width:auto;margin:1em 0;opacity:1;font-size:inherit;line-height:inherit}
.tgv-scene :where(h1,h2,h3){margin:0;font-size:inherit}
.tgv-scene :where(img){width:auto;height:auto}

/* ─── LAYER 1 — tgv-scene.css ───────────────────────────────────────────── */
.tgv-scene{--tgv-cyan:#78dbe0;--tgv-muted:#c4c6c8;--tgv-line:rgba(255,36,66,.65);position:relative;isolation:isolate;background:#080e10;color:#fff;font:16px/1.45 Poppins,Arial,sans-serif;letter-spacing:0;min-height:calc(100dvh - var(--navbar-height));margin-top:var(--navbar-height)}
.tgv-scene *{box-sizing:border-box}
.tgv-scene [hidden]{display:none!important}
.tgv-scene button,.tgv-scene input,.tgv-scene select{font:inherit}
.tgv-scene button{cursor:pointer}
.tgv-scene button:disabled{opacity:.45;cursor:not-allowed}
.tgv-scene :focus-visible{outline:none}
.tgv-scene .tgv-scene-content:focus,.tgv-scene .tgv-scene-content:focus-visible{outline:none}
.tgv-scene-experience{position:relative;height:calc(100dvh - var(--navbar-height));min-height:250px;display:flex;flex-direction:column;overflow:hidden;padding:0 max(18px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px,env(safe-area-inset-left));background:var(--hq-art-background) center/cover}
.tgv-scene-canvas,.tgv-scene-shade{position:absolute;inset:0;pointer-events:none}
.tgv-scene-canvas canvas{display:block;width:100%;height:100%}
.tgv-scene-shade{background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 55%,rgba(0,0,0,.55)),linear-gradient(0deg,rgba(0,0,0,.75),transparent 35%)}
.tgv-scene-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px;flex-shrink:0}
.tgv-scene-brand{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;white-space:nowrap}
.tgv-scene-brand strong{font-size:22px;font-weight:900}
.tgv-scene-brand span{font:26px/1 Impact,'Arial Narrow',sans-serif;padding:4px 7px;border:2px solid white;transform:skew(-3deg)}
.tgv-scene-header-actions{display:flex;gap:8px;align-items:center}
.tgv-scene-icon,.tgv-scene-account{border:1px solid var(--tgv-line);background:rgba(0,0,0,.8);color:#fff;min-height:40px;padding:7px 12px}
.tgv-scene-icon{min-width:40px}
.tgv-scene-mode{font-size:12px;background:var(--primary);padding:4px 8px}
.tgv-scene-content{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--primary) #111;padding:10px 0 14px}
.tgv-scene-title,.tgv-scene-heading,.tgv-scene-card-title{font-family:Impact,'Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;line-height:1.05;letter-spacing:0;margin:0}
.tgv-scene-title{font-size:68px;font-style:italic}
.tgv-scene-heading{font-size:38px}
.tgv-scene-card-title{font-size:25px}
.tgv-scene-copy{max-width:600px;font-size:16px;margin:16px auto;color:#eee}
.tgv-scene-eyebrow{font-size:14px;color:var(--tgv-cyan);text-transform:uppercase;margin:0 0 12px}
.tgv-scene-centre{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:1000px;margin:auto;padding:12px 10px;gap:16px}
.tgv-scene-intro-logo{font:76px/1.05 Impact,'Arial Narrow',sans-serif;border:3px solid #fff;padding:10px 24px;transform:skew(-3deg)}
.tgv-scene-intro-logo small{display:block;font:800 20px Arial,sans-serif;margin-bottom:8px}
.tgv-scene-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(208,0,24,.8);border:1px solid var(--primary);color:#fff;text-transform:uppercase;min-height:44px;padding:12px 24px;text-decoration:none;font-weight:600;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.tgv-scene-button:hover{background:var(--primary)}
.tgv-scene-button-secondary{background:#081315;border-color:#62868c}
.tgv-scene-form{display:grid;gap:12px;width:min(600px,100%);text-align:left}
.tgv-scene-label{display:grid;gap:6px;font-size:14px}
.tgv-scene-input{width:100%;min-height:44px;border:1px solid #65868c;background:#081315;color:#fff;padding:9px 12px;border-radius:0}
.tgv-scene-hint{font-size:13px;color:var(--tgv-muted);margin:0}
.tgv-scene-error{color:#ffc7cd;font-size:14px;min-height:20px;margin:0}
.tgv-scene-choices{display:flex;gap:16px;justify-content:center;width:100%;flex-wrap:wrap}
.tgv-scene-choice{background:rgba(0,0,0,.85);border:1px solid var(--tgv-line);color:white;min-width:140px;min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px}
.tgv-scene-choice[aria-pressed=true]{border:2px solid var(--tgv-cyan);background:#14343a}
.tgv-scene-choice-symbol{font-size:40px;color:var(--tgv-cyan)}
.tgv-scene-hero-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%}
.tgv-scene-hero-choice{padding:0;min-width:0;min-height:0;overflow:hidden;gap:0}
.tgv-scene-hero-choice img{display:block;width:100%;height:220px;object-fit:contain;object-position:center bottom;background:linear-gradient(150deg,rgba(220,0,30,.3),#101416)}
.tgv-scene-hero-choice span{font-weight:700;font-size:14px;background:rgba(196,0,26,.7);width:100%;padding:8px 4px}
.tgv-scene-preview{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;min-height:100%}
.tgv-scene-preview-art{width:100%;height:460px;object-fit:contain;align-self:end}
.tgv-scene-preview-copy{display:grid;gap:24px;justify-items:start}
.tgv-scene-nav{position:relative;display:flex;flex-shrink:0;justify-content:center;gap:4px;z-index:2;margin-top:4px}
.tgv-scene-nav a{padding:10px 22px;color:#fff;text-decoration:none;border:1px solid var(--tgv-line);background:rgba(0,0,0,.86);font-size:14px}
.tgv-scene-nav a[aria-current=page]{background:var(--primary)}
.tgv-scene-footer{position:relative;display:flex;justify-content:space-between;gap:8px;padding:9px 0 7px;border-top:1px solid var(--tgv-line);font-size:12px;flex-shrink:0;margin-top:8px}
.tgv-scene-lobby{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(160px,.8fr) minmax(180px,1.2fr) minmax(260px,1fr);grid-template-rows:auto 1fr auto;gap:20px}
.tgv-scene-welcome{grid-column:1/3;grid-row:1;pointer-events:none;z-index:1}
.tgv-scene-avatar{grid-column:1/3;grid-row:1/4;justify-self:end;width:75%;height:100%;min-height:380px;object-fit:contain;object-position:center bottom;pointer-events:none}
.tgv-scene-lobby-side{grid-column:3;grid-row:1/4;display:flex;flex-direction:column;gap:18px;z-index:1}
.tgv-scene-status{border:1px solid var(--tgv-line);background:rgba(0,0,0,.85);padding:12px;display:grid;gap:6px}
.tgv-scene-status-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.tgv-scene-status-name{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.tgv-scene-progress{height:9px;background:#29070d;border:1px solid #a63848;overflow:hidden}
.tgv-scene-progress span{display:block;width:100%;height:100%;background:var(--primary);transform:scaleX(var(--progress,0));transform-origin:left}
.tgv-scene-status small{font-size:12px;color:var(--tgv-muted)}
.tgv-scene-quests{background:rgba(0,0,0,.82);border:1px solid var(--tgv-line);padding:16px;display:grid;gap:12px}
.tgv-scene-quest{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--tgv-line);background:rgba(150,0,30,.6);color:white;padding:14px;width:100%;min-height:72px}
.tgv-scene-quest-symbol{font-size:30px;color:var(--primary)}
.tgv-scene-quest-text{display:grid;gap:5px}
.tgv-scene-quest-text small{font-size:12px;color:var(--tgv-muted)}
.tgv-scene-lobby-links{grid-row:3;grid-column:1/3;display:flex;gap:12px;z-index:1}
.tgv-scene-tile{display:grid;gap:8px;align-content:end;flex:1;border:1px solid var(--tgv-line);background:rgba(0,0,0,.87);color:white;padding:18px;text-align:left;text-decoration:none;min-height:100px}
.tgv-scene-tile small{font-size:12px;color:var(--tgv-muted)}
.tgv-scene-upcoming{grid-column:1;grid-row:2;align-self:end;background:rgba(0,0,0,.9);padding:14px;border-left:2px solid var(--primary);max-width:220px;z-index:1}
.tgv-scene-page{max-width:1280px;margin:auto;display:grid;gap:22px;padding:10px 0}
.tgv-scene-page-head{display:flex;justify-content:space-between;gap:20px;align-items:center}
.tgv-scene-page-head .tgv-scene-title{font-size:54px}
.tgv-scene-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tgv-scene-tab{border:1px solid var(--tgv-line);background:rgba(0,0,0,.85);padding:10px 16px;color:white;min-height:44px;text-align:left}
.tgv-scene-tab[aria-selected=true],.tgv-scene-tab[aria-pressed=true]{background:var(--primary)}
.tgv-scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tgv-scene-card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--tgv-line);background:rgba(6,9,11,.93);padding:20px;min-width:0}
.tgv-scene-card p{margin:0;color:var(--tgv-muted);font-size:14px}
.tgv-scene-card .tgv-scene-button{margin-top:auto}
.tgv-scene-xp{font:22px Impact,'Arial Narrow',sans-serif;color:#fff}
.tgv-scene-collection{grid-template-columns:repeat(5,minmax(0,1fr));scrollbar-width:none;-ms-overflow-style:none}
.tgv-scene-collection::-webkit-scrollbar{display:none}
.tgv-scene-badge{text-align:center;padding:14px;align-items:stretch}
.tgv-scene-badge img{display:block;width:min(100%,170px);aspect-ratio:1;object-fit:contain;margin:auto}
.tgv-scene-badge .tgv-scene-card-title{font-size:24px}
.tgv-scene-badge .tgv-scene-button{font-size:12px;padding:9px;min-height:40px}
.tgv-scene-tier-name{font-family:'Bebas Neue','Arial Narrow',sans-serif;color:#fff;font-size:48px;font-weight:400}
.tgv-scene-summary{padding:36px 18px;border:1px solid var(--tgv-line);background:rgba(0,0,0,.9);display:flex;justify-content:space-between;gap:20px;align-items:center}
.tgv-scene-summary strong{font-size:28px}
.tgv-scene-profile{display:grid;grid-template-columns:1fr 1fr;gap:24px;min-height:100%}
.tgv-scene-profile-left{display:flex;flex-direction:column;align-items:start;gap:18px}
.tgv-scene-profile-photo{width:76px;height:76px;object-fit:cover;object-position:top;background:#162124}
.tgv-scene-profile-info{display:flex;gap:16px;align-items:center}
.tgv-scene-profile-name{font:30px Impact,'Arial Narrow',sans-serif;overflow-wrap:anywhere}
.tgv-scene-profile-art{width:100%;max-height:430px;object-fit:contain;min-height:0;flex:1}
.tgv-scene-profile-right{display:flex;flex-direction:column;gap:16px}
.tgv-scene-activity{display:grid;gap:0;background:#081315;border:1px solid #486d72}
.tgv-scene-activity-row{display:flex;justify-content:space-between;gap:12px;padding:13px;border-bottom:1px solid #274146;font-size:14px}
.tgv-scene-dialog{background:#080e10;color:white;border:1px solid var(--primary);max-width:min(1100px,94%);width:900px;max-height:calc(100dvh - 30px);padding:32px;overscroll-behavior:contain}
.tgv-scene-dialog::backdrop{background:rgba(0,0,0,.85)}
.tgv-scene-close{position:absolute;top:5px;right:8px;font-size:28px;width:40px;height:40px;background:transparent;border:0;color:white;z-index:1}
.tgv-scene-modal-content{display:grid;gap:18px}
.tgv-scene-dialog[data-track-dialog="daily_done"] .tgv-scene-modal-content{text-align:center;gap:12px;}
.tgv-scene-dialog[data-track-dialog="daily_result"] .tgv-scene-modal-content{text-align:center;gap:12px;}
.tgv-scene-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tgv-scene-tier-grid .tgv-scene-card{padding:14px}
.tgv-scene-tier-grid img{width:100px;aspect-ratio:1;object-fit:contain;margin:auto}
.tgv-scene-answers{display:grid;gap:10px}
.tgv-scene-answer{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #456269;background:#0c1a1d;min-height:46px;cursor:pointer}
.tgv-scene-answer:has(input:checked){border-color:var(--primary);background:#47111e}
.tgv-scene-answer input{accent-color:var(--primary);width:18px;height:18px}
.tgv-scene-toast{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);z-index:12;background:#071214;border:1px solid var(--tgv-cyan);padding:12px 18px;max-width:90%;text-align:center;font-size:14px;display:none}
.tgv-scene-toast[data-open=true]{display:block}
.tgv-scene-reveal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(0,0,0,.75)}
.tgv-scene-prize{text-align:center;background:#080f12;border:1px solid var(--primary);padding:24px;max-width:90%;width:420px;max-height:95%;overflow:auto;position:relative}
.tgv-scene-prize-image{width:120px;height:120px;object-fit:contain}
.tgv-scene-prize-type{color:var(--tgv-cyan);font-size:14px}
.tgv-scene-rotate{display:none}
.tgv-scene-detail-link{color:var(--tgv-cyan);font-size:14px}
.tgv-scene-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:768px){
  .tgv-scene{margin-top:var(--navbar-height);min-height:calc(100dvh - var(--navbar-height))}
  .tgv-scene-experience{height:calc(100dvh - var(--navbar-height));padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
}
@media(max-height:600px){
  .tgv-scene-header{min-height:48px}
  .tgv-scene-brand strong{font-size:16px}
  .tgv-scene-brand span{font-size:19px}
  .tgv-scene-brand{gap:10px}
  .tgv-scene-title{font-size:40px}
  .tgv-scene-heading{font-size:28px}
  .tgv-scene-intro-logo{font-size:48px}
  .tgv-scene-intro-logo small{font-size:16px}
  .tgv-scene-centre{gap:10px;padding:6px}
  .tgv-scene-copy{margin:7px auto;font-size:14px}
  .tgv-scene-hero-choice img{height:125px}
  .tgv-scene-hero-list{gap:9px;max-width:850px}
  .tgv-scene-choice{min-height:90px}
  .tgv-scene-choice-symbol{font-size:28px}
  .tgv-scene-hero-choice{min-height:0}
  .tgv-scene-preview-art{height:270px}
  .tgv-scene-preview-copy{gap:14px}
  .tgv-scene-footer{padding:4px 0;margin-top:3px}
  .tgv-scene-nav a{padding:7px 18px;min-height:36px}
  .tgv-scene-lobby{gap:10px;grid-template-columns:minmax(130px,.8fr) minmax(110px,1fr) minmax(235px,1fr)}
  .tgv-scene-avatar{min-height:235px}
  .tgv-scene-lobby-side{gap:8px}
  .tgv-scene-status{padding:8px;gap:3px}
  .tgv-scene-quests{gap:6px;padding:9px}
  .tgv-scene-quests .tgv-scene-heading{font-size:23px}
  .tgv-scene-quest{padding:7px 9px;min-height:46px;gap:7px}
  .tgv-scene-quest-symbol{font-size:22px}
  .tgv-scene-quest .tgv-scene-card-title{font-size:19px}
  .tgv-scene-quest-text{gap:0}
  .tgv-scene-tile{padding:10px;min-height:65px;gap:3px}
  .tgv-scene-tile .tgv-scene-card-title{font-size:21px}
  .tgv-scene-upcoming{padding:9px;font-size:14px}
  .tgv-scene-upcoming .tgv-scene-heading{font-size:22px}
  .tgv-scene-page-head .tgv-scene-title{font-size:36px}
  .tgv-scene-page{gap:12px}
  .tgv-scene-card{padding:12px;gap:8px}
  .tgv-scene-badge img{width:94px}
  .tgv-scene-badge .tgv-scene-card-title{font-size:20px}
  .tgv-scene-profile-art{max-height:220px}
  .tgv-scene-profile-photo{width:55px;height:55px}
  .tgv-scene-profile-name{font-size:23px}
  .tgv-scene-profile-right{gap:10px}
  .tgv-scene-summary{padding:12px}
  .tgv-scene-dialog{padding:28px 22px 20px}
  .tgv-scene-prize{padding:14px}
  .tgv-scene-prize-image{width:80px;height:80px}
}
@media(max-width:1000px){
  .tgv-scene-collection{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tgv-scene-brand span{font-size:20px}
  .tgv-scene-brand strong{font-size:17px}
  .tgv-scene-account{font-size:13px;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tgv-scene-page-head .tgv-scene-status{display:none}
  .tgv-scene-grid{gap:10px}
}
@media(max-width:700px){
  .tgv-scene-lobby{grid-template-columns:minmax(0,1fr) minmax(220px,1fr)}
  .tgv-scene-lobby-side{grid-column:2}
  .tgv-scene-avatar{grid-column:1;width:100%}
  .tgv-scene-welcome{grid-column:1}
  .tgv-scene-lobby-links{grid-column:1;flex-direction:column}
  .tgv-scene-upcoming{display:none}
  .tgv-scene-header{gap:5px}
  .tgv-scene-brand strong{font-size:13px}
  .tgv-scene-brand span{font-size:17px}
  .tgv-scene-header-actions{gap:4px}
  .tgv-scene-account{max-width:80px;padding:6px}
  .tgv-scene-icon{padding:5px;min-width:34px}
  .tgv-scene-hero-choice img{height:95px}
  .tgv-scene-hero-choice span{font-size:12px}
  .tgv-scene-hero-list{gap:5px}
  .tgv-scene-grid,.tgv-scene-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tgv-scene-title{font-size:34px}
  .tgv-scene-profile{gap:12px}
  .tgv-scene-profile-info{gap:8px}
  .tgv-scene-profile-name{font-size:20px}
  .tgv-scene-preview-art{height:225px}
  .tgv-scene-button{padding:10px 14px}
  .tgv-scene-intro-logo{font-size:42px}
}
@media (orientation: portrait) and (pointer: coarse) and (max-width: 767px){
  .tgv-scene-experience{display:none}
  .tgv-scene-rotate{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:calc(var(--navbar-height) + env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:#080e10;color:#fff}
  .tgv-scene-rotate :is(h1,h2){font:34px/1.1 Impact,'Arial Narrow',sans-serif;margin:18px 0}
  .tgv-scene-phone{font-size:90px;color:var(--primary);line-height:1}
  .tgv-scene-rotate p{font-size:20px}
  .tgv-scene-rotate small{font-size:14px;color:var(--tgv-muted)}
}
@media(prefers-reduced-motion:reduce){
  .tgv-scene *{scroll-behavior:auto!important}
}
.tgv-scene{position:fixed;inset:var(--navbar-height) 0 0;margin:0;min-height:0}
@media(min-width:768px){
  .tgv-scene{inset:var(--navbar-height) 0 0;margin:0}
}
.tgv-scene-prize-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-150%)}
.tgv-scene-prize{overflow-x:hidden}

/* ─── LAYER 2 — tgv-refined.css ─────────────────────────────────────────── */
/* Integrated presentation: supplied city/layouts + the approved cinematic flow. */
.tgv-scene{--tgv-display:'TGV Display','Barlow Condensed','Arial Narrow',sans-serif;--tgv-gold:#edce91;font-family:Poppins,'TGV Poppins',Arial,sans-serif;--tgv-line:rgba(255,38,71,.55)}
.tgv-scene-experience{padding-left:max(clamp(18px,3vw,64px),env(safe-area-inset-left));padding-right:max(clamp(18px,3vw,64px),env(safe-area-inset-right));min-height:0}
.tgv-scene-shade{background:linear-gradient(90deg,rgba(3,8,14,.44),rgba(3,8,14,.05) 45%,rgba(3,8,14,.4)),linear-gradient(0deg,rgba(3,8,14,.9),transparent 45%,rgba(3,8,14,.25))}
.tgv-scene-header{min-height:clamp(54px,9dvh,100px);gap:18px}
.tgv-scene-brand{gap:18px;flex-shrink:0}
.tgv-scene-brand img{display:block;object-fit:contain;object-position:left;}
.tgv-scene-tgv-logo{width:clamp(75px,9vw,145px);height:48px}
.tgv-scene-hoh-logo{width:clamp(90px,11vw,165px);height:64px}
.tgv-scene-brand .tgv-scene-brand-divider{padding:0;border:0;width:1px;height:38px;background:#7c727d;transform:none}
.tgv-scene-title,.tgv-scene-heading,.tgv-scene-card-title,.tgv-scene-profile-name,.tgv-scene-xp{font-family:var(--tgv-display);font-weight:700;letter-spacing:.01em;line-height:1.02}
.tgv-scene-title{font-size:clamp(44px,5.8vw,94px);font-style:italic}
.tgv-scene-heading{font-size:clamp(28px,3vw,48px)}
.tgv-scene-card-title{font-size:clamp(22px,2vw,32px)}
.tgv-scene-copy{line-height:1.6;max-width:620px}
.tgv-scene-eyebrow{letter-spacing:.16em;font-size:13px;color:var(--tgv-gold)}
.tgv-scene-centre{max-width:1150px;gap:clamp(10px,2dvh,24px);padding:18px 8px}
.tgv-scene-intro-logo{display:block;width:min(370px,38vw);height:min(270px,32dvh);object-fit:contain;border:0;padding:0;transform:none;font:inherit}
.tgv-scene-intro-line{height:1px;width:min(440px,55vw);background:linear-gradient(90deg,transparent,var(--tgv-gold),transparent);transform-origin:center}
.tgv-scene-centre:has(.tgv-scene-intro-logo) .tgv-scene-heading{font-size:clamp(25px,3vw,42px);letter-spacing:.04em}
.tgv-scene-button{background:linear-gradient(110deg,rgba(154,0,28,.92),rgba(235,13,54,.88));border:1px solid #ff4c67;min-height:46px;letter-spacing:.08em;font-size:14px;padding:12px 28px;transition:transform .18s,opacity .18s}
.tgv-scene-button:hover{transform:translateY(-2px)}
.tgv-scene-button:active{transform:translateY(1px)}
.tgv-scene-button-secondary{background:rgba(8,20,28,.9);border-color:#617e8b}
.tgv-scene-centre>.tgv-scene-button{min-width:250px}
.tgv-scene-form{width:min(640px,100%);gap:14px}
.tgv-scene-label{font-size:14px;letter-spacing:.025em}
.tgv-scene-input{background:rgba(5,15,23,.94);border:1px solid #4b737d;padding:13px 16px;min-height:48px;border-radius:3px}
.tgv-scene-steps{display:flex;justify-content:center;gap:28px;padding:0;margin:6px 0 16px;list-style:none}
.tgv-scene-steps li{display:flex;align-items:center;gap:8px;font-size:13px;color:#aab1c1}
.tgv-scene-steps li>span{display:grid;place-items:center;border:1px solid #526070;border-radius:50%;width:26px;height:26px;font-size:12px}
.tgv-scene-steps li[aria-current]{color:#fff}
.tgv-scene-steps li[aria-current]>span{background:var(--tgv-cyan);border-color:var(--tgv-cyan);color:#07171c}
.tgv-scene-steps .tgv-scene-step-done{color:var(--tgv-cyan)}
.tgv-scene-content:has(>.tgv-scene-steps)>.tgv-scene-centre{min-height:calc(100% - 52px)}
.tgv-scene-choice{background:linear-gradient(140deg,rgba(21,38,55,.94),rgba(6,13,25,.96));border:1px solid #5b6b82;border-radius:3px;transition:transform .2s,opacity .2s}
.tgv-scene-choice:hover{transform:translateY(-3px)}
.tgv-scene-choice[aria-pressed=true]{border:2px solid var(--tgv-cyan);background:linear-gradient(140deg,#204858,#101c2d);transform:translateY(-5px)}
.tgv-scene-hero-list{max-width:1080px;gap:18px}
.tgv-scene-hero-choice{position:relative}
.tgv-scene-hero-choice img{height:clamp(150px,31dvh,330px);background:radial-gradient(ellipse at 50% 70%,rgba(25,115,130,.28),transparent 70%);padding:12px 4px 0}
.tgv-scene-hero-choice span{background:linear-gradient(110deg,#263347,#101925);font-family:var(--tgv-display);font-size:23px;padding:12px 5px}
.tgv-scene-preview{max-width:1150px;margin:auto;grid-template-columns:1fr 1fr;gap:6%;padding:10px 5%;min-height:calc(100% - 52px)}
.tgv-scene-preview-art{height:clamp(250px,57dvh,570px);max-height:100%;align-self:center}
.tgv-scene-preview-copy{gap:18px;padding:22px;border-left:1px solid var(--tgv-cyan);background:linear-gradient(90deg,rgba(6,15,25,.8),transparent)}
.tgv-scene-preview-copy>.tgv-scene-title{font-size:clamp(46px,6vw,100px);color:#fff}
.tgv-scene-preview-copy .tgv-scene-heading{color:var(--tgv-gold)}
.tgv-scene-preview-copy .tgv-scene-copy{margin:0}
.tgv-scene-arrival{background:radial-gradient(ellipse,rgba(7,22,37,.95),transparent 70%)}
/* HQ: defined areas keep the character clear of rank and quest controls. */
.tgv-scene-lobby{height:100%;min-height:360px;max-width:1700px;margin:auto;grid-template-columns:minmax(145px,.8fr) minmax(210px,1.4fr) minmax(290px,1.1fr);grid-template-rows:auto minmax(150px,1fr) auto;gap:18px 24px}
.tgv-scene-welcome{grid-column:1/3;grid-row:1;align-self:start;font-size:clamp(48px,6.5vw,106px);max-width:65%}
.tgv-scene-avatar{grid-column:2;grid-row:1/3;align-self:end;justify-self:center;width:100%;height:100%;min-height:0;max-height:570px;object-position:center bottom}
.tgv-scene-lobby-side{grid-column:3;grid-row:1/3;gap:14px;min-width:0;justify-content:space-between}
.tgv-scene-upcoming{grid-column:1;grid-row:2;align-self:end;max-width:none;display:block;border:1px solid var(--tgv-line);border-top:var(--hq-ring) solid var(--primary);background:linear-gradient(150deg,rgba(28,39,48,.9),rgba(5,9,16,.95));padding:20px 16px}
.tgv-scene-upcoming .tgv-scene-heading{font-size:clamp(24px,2.6vw,40px)}
.tgv-scene-lobby-links{grid-column:1/4;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tgv-scene-tile{position:relative;min-height:90px;padding:16px 20px;background:linear-gradient(130deg,rgba(22,33,46,.94),rgba(5,10,18,.96));border:1px solid #7d3346;border-top:var(--hq-ring) solid var(--primary);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .2s,opacity .2s}
.tgv-scene-tile:hover{transform:translateY(-3px)}
.tgv-scene-status{background:rgba(0,0,0,.7);backdrop-filter:blur(2px);border:var(--hq-ring) solid var(--primary);padding:14px 16px;gap:8px;border-radius:0}
.tgv-scene-status-name{font-family:'Bebas Neue','Arial Narrow',sans-serif;font-size:26px;text-transform:uppercase;line-height:1.05;font-weight:400}
.tgv-scene-status-row small{font-size:12px}
.tgv-scene-progress{height:8px;border:0;background:#ab91a2;border-radius:2px}
.tgv-scene-progress span{background:linear-gradient(90deg,var(--primary),#ff4e69)}
.tgv-scene-quests{background:rgba(6,12,22,.9);border:1px solid #713547;padding:16px;gap:12px;border-radius:3px}
.tgv-scene-quest{background:linear-gradient(110deg,rgba(151,7,38,.8),rgba(66,14,33,.8));min-height:62px;padding:10px 12px;transition:transform .2s,opacity .2s}
.tgv-scene-quest:hover{transform:translateX(-3px)}
.tgv-scene-quest-symbol{font-size:28px;color:#ff4966;min-width:28px}
.tgv-scene-quest .tgv-scene-card-title{font-size:clamp(20px,2vw,29px)}
.tgv-scene-nav{gap:8px;margin:12px 0 5px}
.tgv-scene-nav a{background:rgba(7,15,25,.96);border:1px solid #69313f;border-radius:3px;min-width:115px;text-align:center;padding:9px 18px}
.tgv-scene-nav a[aria-current=page]{border-color:#ff566c;background:linear-gradient(120deg,#b50730,#5a1027)}
.tgv-scene-footer{font-size:11px;letter-spacing:.08em;color:#c1b9c3;padding:9px 0}
/* Collection and profile inherit the same typography and frame language. */
.tgv-scene-page{max-width:1500px;padding:12px 0;gap:18px}
.tgv-scene-page-head .tgv-scene-title{font-size:clamp(38px,4.5vw,70px)}
.tgv-scene-tab{background:rgba(7,15,25,.96);border-color:#5c4454;border-radius:3px;min-height:44px;font-size:14px}
.tgv-scene-card{background:linear-gradient(145deg,rgba(21,28,42,.96),rgba(6,11,20,.97));border-color:#72404d;border-radius:4px}
.tgv-scene-badge{padding:16px;gap:10px;border-top:2px solid #ad8b59}
.tgv-scene-badge .tgv-scene-card-title{font-size:26px}
.tgv-scene-badge img{width:min(100%,150px)}
.tgv-scene-badge .tgv-scene-button{font-size:13px;letter-spacing:0;min-height:42px}
.tgv-scene-tier-name{color:#fff}
.tgv-scene-tier-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;gap:16px}
.tgv-scene-tier-grid>.tgv-scene-card{flex:0 0 min(240px,65vw);scroll-snap-align:start}
.tgv-scene-profile{max-width:1450px;margin:auto;grid-template-columns:minmax(280px,1fr) minmax(330px,1fr);gap:32px;min-height:100%}
.tgv-scene-profile-left{display:grid;grid-template-columns:125px minmax(0,1fr);grid-template-rows:auto minmax(160px,1fr) auto;gap:16px;position:relative}
.tgv-scene-profile-info{grid-column:1/3;grid-row:1;width:100%;z-index:1;padding:15px}
.tgv-scene-profile-info .tgv-scene-button{padding:6px 12px;min-height:36px;font-size:12px;margin-top:8px}
.tgv-scene-profile-left>.tgv-scene-choice{grid-column:1;grid-row:2;align-self:start;min-width:0;min-height:120px;z-index:1}
.tgv-scene-profile-art{grid-column:2;grid-row:2/4;align-self:end;max-height:480px;width:100%;height:100%;min-height:220px}
.tgv-scene-profile-left>.tgv-scene-button{grid-column:1;grid-row:3;font-size:12px;padding:10px;min-width:0;z-index:1}
.tgv-scene-profile-name{font-size:34px}
.tgv-scene-profile-right{gap:16px}
.tgv-scene-summary{background:rgba(6,17,25,.95);border-color:#4a737c;gap:16px}
.tgv-scene-summary strong{font-family:var(--tgv-display);font-size:36px}
.tgv-scene-dialog{background:radial-gradient(ellipse at 0 0,#182c40,#09121d 65%);border:1px solid #ae8d5a;border-radius:8px;padding:34px;max-width:min(1100px,94%)}
.tgv-scene-modal-content{gap:18px}
.tgv-scene-modal-content>.tgv-scene-eyebrow{margin:0}
.tgv-scene-transition{position:absolute;inset:0;z-index:25;background:linear-gradient(105deg,#06121d,#142e3d 70%,#31101f);pointer-events:none;transform:translateX(-105%);opacity:0}
.tgv-scene-portal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;background:#060e19;color:white;text-align:center;padding:24px;perspective:650px}
.tgv-scene-portal-rings{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;perspective:650px}
.tgv-scene-portal-ring{position:absolute;width:min(55vw,65dvh);aspect-ratio:1;border:2px solid #6be2ed;border-radius:12px;background:linear-gradient(45deg,rgba(255,10,46,.025),rgba(58,222,255,.035));opacity:0}
.tgv-scene-portal-copy{position:relative;max-width:620px;background:radial-gradient(ellipse,#060e19 15%,transparent 70%);padding:25px}
.tgv-scene-portal-copy p{color:var(--tgv-gold);font-size:14px}
.tgv-scene-prize .tgv-scene-heading{font-family:var(--tgv-display)}
@media(max-height:600px){
 .tgv-scene-header{min-height:44px}.tgv-scene-tgv-logo{height:30px}.tgv-scene-hoh-logo{height:40px}.tgv-scene-brand .tgv-scene-brand-divider{height:25px}.tgv-scene-brand{gap:12px}
 .tgv-scene-content{padding:4px 0 6px}.tgv-scene-centre{gap:9px;padding:8px}.tgv-scene-intro-logo{height:90px;width:155px}.tgv-scene-centre:has(.tgv-scene-intro-logo) .tgv-scene-heading{font-size:28px}.tgv-scene-title{font-size:42px}.tgv-scene-heading{font-size:27px}
 .tgv-scene-eyebrow{font-size:12px;margin:0}.tgv-scene-copy{font-size:14px;margin:6px 0}.tgv-scene-input{min-height:42px;padding:9px 12px}.tgv-scene-form{gap:8px}.tgv-scene-error{min-height:0}.tgv-scene-error:empty{display:none}
 .tgv-scene-button{min-height:42px;padding:9px 19px;font-size:13px}.tgv-scene-steps{gap:24px;margin:2px 0 8px}.tgv-scene-steps li{font-size:12px}.tgv-scene-steps li>span{width:22px;height:22px}.tgv-scene-content:has(>.tgv-scene-steps)>.tgv-scene-centre{min-height:calc(100% - 34px)}
 .tgv-scene-hero-choice img{height:120px}.tgv-scene-hero-choice span{font-size:19px;padding:7px 4px}.tgv-scene-hero-list{gap:10px}.tgv-scene-preview{min-height:calc(100% - 34px);gap:5%;padding:0 6%}.tgv-scene-preview-art{height:220px}.tgv-scene-preview-copy{padding:12px;gap:10px}.tgv-scene-preview-copy>.tgv-scene-title{font-size:42px}
 .tgv-scene-lobby{min-height:260px;grid-template-columns:minmax(115px,.75fr) minmax(140px,1.1fr) minmax(225px,1fr);grid-template-rows:auto minmax(115px,1fr) auto;gap:8px 14px}.tgv-scene-welcome{font-size:44px}.tgv-scene-avatar{min-height:0;height:100%;max-height:240px}
 .tgv-scene-lobby-side{gap:7px}.tgv-scene-status{padding:7px 10px;gap:4px}.tgv-scene-status-name{font-size:21px}.tgv-scene-quests{padding:9px;gap:6px}.tgv-scene-quests>.tgv-scene-heading{font-size:24px}.tgv-scene-quest{min-height:42px;padding:6px 9px;gap:8px}.tgv-scene-quest .tgv-scene-card-title{font-size:20px}.tgv-scene-quest-symbol{font-size:22px;min-width:22px}.tgv-scene-quest-text small{font-size:12px}
 .tgv-scene-lobby-links{gap:10px}.tgv-scene-tile{min-height:58px;padding:9px 13px;gap:3px}.tgv-scene-tile .tgv-scene-card-title{font-size:22px}.tgv-scene-upcoming{padding:12px 10px}.tgv-scene-upcoming .tgv-scene-heading{font-size:25px}.tgv-scene-upcoming .tgv-scene-eyebrow{margin-bottom:6px;font-size:11px}
 .tgv-scene-nav{margin:5px 0 2px;gap:6px}.tgv-scene-nav a{min-height:34px;padding:6px 14px;font-size:13px;min-width:90px}.tgv-scene-footer{padding:4px 0;font-size:10px;margin-top:3px}.tgv-scene-page-head .tgv-scene-title{font-size:36px}.tgv-scene-page{gap:12px;padding:4px 0}
 .tgv-scene-profile{gap:20px;grid-template-columns:minmax(250px,1fr) minmax(285px,1fr)}.tgv-scene-profile-left{grid-template-columns:95px minmax(0,1fr);gap:10px}.tgv-scene-profile-art{max-height:260px;min-height:170px}.tgv-scene-profile-info{padding:10px}.tgv-scene-profile-name{font-size:26px}.tgv-scene-profile-left>.tgv-scene-choice{min-height:90px;padding:10px;font-size:12px}.tgv-scene-profile-right{gap:10px}.tgv-scene-profile .tgv-scene-summary{padding:10px}.tgv-scene-profile .tgv-scene-summary strong{font-size:30px}.tgv-scene-profile .tgv-scene-summary span{font-size:13px}
 .tgv-scene-badge img{width:100px}.tgv-scene-dialog{padding:28px 22px 20px}.tgv-scene-tier-grid>.tgv-scene-card{flex-basis:175px}.tgv-scene-portal-copy{padding:15px}
}
@media(max-width:700px){.tgv-scene-header-actions{gap:5px}.tgv-scene-brand{gap:8px}.tgv-scene-tgv-logo{width:72px}.tgv-scene-hoh-logo{width:83px}.tgv-scene-lobby-links{flex-direction:row}.tgv-scene-lobby .tgv-scene-avatar{grid-column:2;grid-row:1/3}.tgv-scene-lobby .tgv-scene-lobby-side{grid-column:3;grid-row:1/3}.tgv-scene-lobby .tgv-scene-welcome{grid-column:1/3}.tgv-scene-lobby .tgv-scene-lobby-links{grid-column:1/4}.tgv-scene-upcoming{display:block}.tgv-scene-status-name{font-size:19px}.tgv-scene-quests .tgv-scene-heading{font-size:22px}.tgv-scene-quest .tgv-scene-card-title{font-size:18px}.tgv-scene-profile{gap:12px;grid-template-columns:minmax(230px,1fr) minmax(260px,1fr)}}
@media(max-width:580px) and (pointer:fine){.tgv-scene-lobby{display:flex;flex-direction:column;height:auto}.tgv-scene-avatar{height:260px}.tgv-scene-lobby-links{display:grid;grid-template-columns:1fr}.tgv-scene-profile{display:block}.tgv-scene-profile-right{margin-top:20px}.tgv-scene-columns{grid-template-columns:1fr}.tgv-scene-hero-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tgv-scene-preview{display:flex;flex-direction:column}.tgv-scene-steps{gap:10px}.tgv-scene-brand-divider{display:none}.tgv-scene-hoh-logo{width:70px}.tgv-scene-nav{gap:2px}.tgv-scene-nav a{min-width:0;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.tgv-scene-button,.tgv-scene-tile,.tgv-scene-choice,.tgv-scene-quest{transition:none}.tgv-scene-button:hover,.tgv-scene-choice:hover,.tgv-scene-tile:hover,.tgv-scene-quest:hover{transform:none}}

.tgv-scene-daily-card{border-left:3px solid var(--primary);background:linear-gradient(110deg,rgba(65,15,37,.95),rgba(6,17,25,.95));align-items:center}.tgv-scene-daily-card>div{display:grid;gap:7px}.tgv-scene-daily-card>.tgv-scene-button{flex-shrink:0}

/* ─── LAYER 3 — tgv-approved.css ────────────────────────────────────────── */
/* Approved October artwork; layout follows the supplied HQ HTML reference. */
.tgv-scene{--tgv-hud:'TGV HUD','Arial Narrow',sans-serif}
.tgv-scene-experience{background:#130609 var(--hq-art-background) center/cover}
.tgv-scene-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tgv-scene-shade{background:linear-gradient(90deg,rgba(10,0,4,.23),transparent 48%,rgba(10,0,4,.28)),linear-gradient(0deg,rgba(7,0,3,.8),transparent 30%,rgba(7,0,3,.18))}
.tgv-scene-tgv-logo{width:clamp(110px,15vw,230px);height:35px}
.tgv-scene-hoh-logo{width:clamp(150px,19vw,295px);height:64px}
.tgv-scene-brand .tgv-scene-brand-divider{background:#b77377;height:30px}
.tgv-scene-intro-logo{width:min(660px,64vw);height:auto;max-height:24dvh;object-fit:contain}
.tgv-scene[data-page=home] .tgv-scene-content{padding:0;overflow-x:hidden}
.tgv-scene-hq{position:relative;min-height:490px;height:100%;max-width:1720px;margin:auto;isolation:isolate}
.tgv-scene-hq-welcome{position:absolute;top:2%;left:0;width:25%;margin:0;font:italic 700 clamp(25px,3vw,48px)/1.04 var(--tgv-display);text-transform:uppercase;color:#fff;z-index:1}
.tgv-scene-hq-welcome span{font-size:.7em;overflow-wrap:anywhere}
.tgv-scene-agent{position:absolute;top:0;right:0;width:32%;height:clamp(95px,16%,130px);display:flex;align-items:stretch;gap:12px;padding:9px 12px 9px 9px;color:white;text-decoration:none;background:rgba(14,3,8,.88);border:1px solid #ff273a;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.tgv-scene-agent-photo{width:24%;height:100%;min-width:0;object-fit:cover;object-position:top;background:#40131b;border:1px solid #9c2331}
.tgv-scene-agent-info{display:flex;flex-direction:column;justify-content:center;gap:7px;flex:1;min-width:0}
.tgv-scene-agent-rank{display:flex;align-items:center;gap:9px;min-height:0;flex:1;padding:6px 14px}
.tgv-scene-agent-rank>img{width:37px;height:37px;object-fit:contain}
.tgv-scene-agent-rank>div{display:grid;gap:2px;min-width:0}
.tgv-scene-agent-rank small{font:600 12px var(--tgv-hud);letter-spacing:.14em;color:#d9b9bc}
.tgv-scene-agent-rank strong{font:700 clamp(19px,1.8vw,29px)/1 var(--tgv-display);text-transform:uppercase;overflow-wrap:anywhere}
.tgv-scene-agent-stats{display:flex;justify-content:space-between;gap:5px;font:600 12px var(--tgv-hud);color:#e5d7d7}
.tgv-scene-agent .tgv-scene-progress{height:5px}
.tgv-scene-agent-rank-info{flex:1;min-width:0}
.tgv-scene-agent-rank>.tgv-scene-agent-rank-info{gap:10px}
.tgv-scene-agent-rank-info>div{display:grid;gap:2px;min-width:0}
.tgv-scene-agent-rank-info>span{font:600 12px var(--tgv-hud);color:#e5d7d7}
.tgv-scene-agent-rank .tgv-scene-progress{display:block;flex:1;min-width:0}
.tgv-scene-hq .tgv-scene-hq-poster{position:absolute;left:0;bottom:2%;height:66%;width:20%;max-width:none;display:flex;flex-direction:column;align-items:start;gap:9px;background:none;border:0;padding:0;text-decoration:none;color:white}
/* The movies variant's label + slot share a wrapper (so they can be nudged
   together as one block) instead of being direct flex children of the
   poster box. The wrapper mirrors the poster's own column/gap layout
   (gap:inherit tracks the poster's gap at every breakpoint) and stays
   width:100% so .tgv-scene-hq-movies-slot's own width:100% (and its
   container-type:size sizing) still resolves against a definite width. */
.tgv-scene-hq-movies-row{display:flex;flex-direction:column;align-items:start;width:100%;gap:inherit;margin-left:auto}
.tgv-scene-hq-poster>span,
.tgv-scene-hq-movies-row>span{font:italic 700 clamp(18px,1.8vw,28px) var(--tgv-display);letter-spacing:.025em}
.tgv-scene-hq-poster>img{height:calc(100% - 40px);width:100%;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 6px 10px #0008)}
.tgv-scene-hq-quests{position:absolute;right:0;top:21%;width:30%;height:54%;padding:18px 16px 25px;display:flex;flex-direction:column;justify-content:space-around;gap:8px;background:rgba(26,9,14,.78) var(--hq-art-quest-frame) center/100% 100% no-repeat;border:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,0 100%)}
.tgv-scene-hq-quest-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tgv-scene-hq-quest-heading .tgv-scene-heading{font-style:italic;font-size:clamp(24px,2.8vw,43px)}
.tgv-scene-hq-quest-heading>small{max-width:110px;text-align:right;font:400 12px/1.1 var(--tgv-hud);letter-spacing:.09em;color:#ffffff}
.tgv-scene-hq-quests .tgv-scene-quest{background:var(--quest-art) center/100% 100% no-repeat;border:0;padding:9px 11% 9px 12px;gap:10px;min-height:52px;flex:1;max-height:78px}
.tgv-scene-hq-quests .tgv-scene-quest-symbol{color:#fff;font-size:24px;min-width:24px}
.tgv-scene-hq-quests .tgv-scene-card-title{font-size:clamp(18px,1.65vw,26px);line-height:1.05}
.tgv-scene-hq-quests .tgv-scene-quest-text{gap:4px;min-width:0}
.tgv-scene-hq-quests .tgv-scene-quest-text small{font:600 12px/1.12 var(--tgv-hud);color:#fff}
.tgv-scene-hq-quests>.tgv-scene-button{min-height:32px;padding:5px 12px;font-size:12px}
.tgv-scene-hq-links{position:absolute;left:25%;right:0;bottom:2%;height:18%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.tgv-scene-hq-links .tgv-scene-tile{min-height:0;border:0;border-radius:0;clip-path:none;padding:14px 18% 14px 16px;gap:5px;justify-content:start;align-content:center;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.tgv-scene-hq-links .tgv-scene-hq-collection{background-image:var(--hq-art-collection)}
.tgv-scene-hq-links .tgv-scene-hq-profile{background-image:var(--hq-art-profile)}
.tgv-scene-hq-links .tgv-scene-hq-journey{background:linear-gradient(110deg,#921326e8,#260913e8);border:1px solid #ff2d46;clip-path:polygon(8px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 8px);padding-right:12px}
.tgv-scene-hq-links .tgv-scene-card-title{font-size:clamp(20px,2.2vw,34px);font-style:italic}
.tgv-scene-hq-links small{font:600 12px/1.1 var(--tgv-hud);color:#fff}
.tgv-scene-nav a{background:rgba(25,3,10,.94);border-radius:0}
.tgv-scene-dialog{background:transparent;border:0;border-radius:2px}
.tgv-scene-dialog{max-width:none;width:100vw;max-height:none;height:100vh}
@media(max-height:700px){
 .tgv-scene-hq{min-height:355px}.tgv-scene-agent{height:77px;padding:6px;gap:7px}.tgv-scene-agent-info{gap:4px}.tgv-scene-agent-rank>img{width:26px;height:26px}.tgv-scene-agent-rank strong{font-size:20px}.tgv-scene-agent-rank small{font-size:12px;letter-spacing:.03em}.tgv-scene-hq-quests{top:25%;height:52%;padding:9px 10px 14px;gap:5px}.tgv-scene-hq-quest-heading>small{display:none}.tgv-scene-hq-quests .tgv-scene-heading{font-size:26px}.tgv-scene-hq-quests .tgv-scene-quest{min-height:40px;padding-top:4px;padding-bottom:4px}.tgv-scene-hq-quests .tgv-scene-quest-text{gap:2px}.tgv-scene-hq-links{height:18%;bottom:0}.tgv-scene-hq-links .tgv-scene-tile{padding:8px 17% 8px 10px;gap:3px}.tgv-scene-hq-links .tgv-scene-card-title{font-size:23px}.tgv-scene-hq-poster>span,.tgv-scene-hq-movies-row>span{font-size:19px}.tgv-scene-hq .tgv-scene-hq-poster{height:70%;bottom:0}
}
@media(max-width:1000px){.tgv-scene-hq-quests,.tgv-scene-agent{width:35%}.tgv-scene-hq-links{left:23%;gap:8px}.tgv-scene-hq-quests .tgv-scene-quest-symbol{display:none}.tgv-scene-hq-quests .tgv-scene-card-title{font-size:20px}.tgv-scene-hq-welcome{font-size:30px}.tgv-scene-agent-stats{flex-wrap:wrap;gap:1px 8px}.tgv-scene-agent-photo{width:21%}}
@media(max-height:450px){.tgv-scene-hq{min-height:310px}.tgv-scene-hq-welcome{font-size:26px}.tgv-scene-hq-quests{top:27%;height:51%;padding:7px 8px 12px}.tgv-scene-hq-quests .tgv-scene-heading{font-size:22px}.tgv-scene-hq-quests .tgv-scene-quest{min-height:36px}.tgv-scene-hq-quests .tgv-scene-card-title{font-size:18px}.tgv-scene-hq-quests .tgv-scene-quest-text small{font-size:12px}.tgv-scene-hq-links small{display:none}.tgv-scene-hq-links .tgv-scene-card-title{font-size:21px}.tgv-scene-tgv-logo{height:23px;width:120px}.tgv-scene-hoh-logo{height:36px;width:155px}}
@media(max-width:580px) and (pointer:fine){.tgv-scene-hq{height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:8px 0}.tgv-scene-hq-welcome{position:relative;top:auto;left:auto;width:auto;grid-column:1/3}.tgv-scene-hq .tgv-scene-hq-poster{position:relative;left:auto;bottom:auto;width:100%;height:250px;grid-column:1}.tgv-scene-agent{position:relative;top:auto;right:auto;width:100%;height:100px;grid-column:1/3}.tgv-scene-hq-quests{position:relative;top:auto;right:auto;width:100%;height:300px;grid-column:1/3}.tgv-scene-hq-links{position:relative;left:auto;right:auto;bottom:auto;height:auto;grid-column:1/3;grid-template-columns:1fr}.tgv-scene-hq-links .tgv-scene-tile{min-height:100px}.tgv-scene-hq-links small{display:block}.tgv-scene-tgv-logo{width:90px}.tgv-scene-hoh-logo{width:110px}}
@media(prefers-reduced-motion:reduce){.tgv-scene-background-video{display:none}}

/* ─── LAYER 4 — tgv-readability.css ─────────────────────────────────────── */
/* Standalone game fills the viewport. A WordPress host may set this to its real nav height. */
.tgv-scene{--tgv-nav-offset:0px;inset:var(--tgv-nav-offset) 0 0;min-height:0;margin:0;font-size:16px}
.tgv-scene .tgv-scene-experience{height:calc(100dvh - var(--tgv-nav-offset));min-height:250px}
.tgv-scene .tgv-scene-header{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px;min-height:76px}
.tgv-scene .tgv-scene-content{scroll-padding:20px}
/* Text takes part in layout instead of hanging outside a fixed image frame. */
.tgv-scene .tgv-scene-hq{display:grid;grid-template-columns:22% minmax(0,1fr) minmax(340px,34%);grid-template-rows:minmax(125px,auto) minmax(300px,1fr) minmax(115px,auto);gap:20px;min-height:600px;height:100%;padding:6px 0 12px}
.tgv-scene .tgv-scene-hq-welcome{position:relative;grid-column:1/3;grid-row:1;left:auto;top:auto;width:75%;align-self:center;font-size:clamp(42px,4.8vw,78px);line-height:1.04;margin:0;z-index:1}
.tgv-scene .tgv-scene-hq-welcome span{font-size:.95em;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.tgv-scene .tgv-scene-agent{position:relative;grid-column:3;grid-row:1;top:auto;right:auto;width:100%;height:auto;min-height:125px;gap:14px;padding:12px;align-self:stretch;z-index:1}
.tgv-scene .tgv-scene-agent-photo{width:23%;height:auto;max-height:110px;align-self:stretch}
.tgv-scene .tgv-scene-agent-info{gap:8px}
.tgv-scene .tgv-scene-agent-rank strong{font-size:28px;line-height:1.12}
.tgv-scene .tgv-scene-agent-rank small{font-size:14px;line-height:1.2}
.tgv-scene .tgv-scene-agent-stats{font-size:15px;line-height:1.25;flex-wrap:wrap;gap:4px 12px}
.tgv-scene .tgv-scene-agent-rank>img{width:40px;height:40px}
.tgv-scene .tgv-scene-hq .tgv-scene-hq-poster{position:relative;grid-column:1;grid-row:2/4;left:auto;bottom:auto;align-self:end;height:100%;max-height:440px;width:100%;gap:12px;min-width:0}
.tgv-scene .tgv-scene-hq-poster>span,
.tgv-scene .tgv-scene-hq-movies-row>span{font-size:clamp(23px,2.2vw,34px);line-height:1.15}
.tgv-scene .tgv-scene-hq-poster>img{min-height:0;flex:1;width:100%;height:calc(100% - 54px);object-fit:contain}
.tgv-scene .tgv-scene-hq-quests{position:relative;grid-column:3;grid-row:2;top:auto;right:auto;width:100%;height:auto;min-height:300px;padding:20px 22px 30px;gap:14px;justify-content:start;clip-path:none;z-index:1}
.tgv-scene .tgv-scene-hq-quest-heading{align-items:start;flex-wrap:wrap;gap:5px 12px;flex-shrink:0}
.tgv-scene .tgv-scene-hq-quest-heading .tgv-scene-heading{font-size:clamp(30px,2.6vw,42px);line-height:1.1;overflow-wrap:anywhere;max-width:100%}
.tgv-scene .tgv-scene-hq-quest-heading>small{display:block;font-size:14px;line-height:1.3;max-width:none;text-align:left;letter-spacing:.03em}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest{display:flex;flex:1 0 auto;align-items:center;min-height:72px;max-height:none;padding:12px 48px 12px 16px;gap:12px;width:100%;min-width:0}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest-symbol{display:block;flex:0 0 24px;min-width:24px;font-size:24px;text-align:center}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest-text{flex:1;min-width:0;gap:5px;overflow-wrap:anywhere}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-card-title{font-size:clamp(22px,1.8vw,29px);line-height:1.1}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest-text small{font-family:var(--tgv-hud);font-size:16px;line-height:1.3;color:#fff}
.tgv-scene .tgv-scene-hq-links{position:relative;grid-column:2/4;grid-row:3;left:auto;right:auto;bottom:auto;height:auto;min-height:115px;gap:14px;z-index:1}
.tgv-scene .tgv-scene-hq-links .tgv-scene-tile{min-height:115px;padding:16px 40px 16px 18px;gap:8px;align-content:center;min-width:0;overflow-wrap:anywhere;background-size:100% 100%}
.tgv-scene .tgv-scene-hq-links .tgv-scene-card-title{font-size:clamp(27px,2.2vw,36px);line-height:1.08}
.tgv-scene .tgv-scene-hq-links small{display:block;font-size:16px;line-height:1.3;color:#fff}
/* Consistent gameplay text: secondary labels 14px, instructions and controls 16px+. */
.tgv-scene :is(.tgv-scene-hint,.tgv-scene-label,.tgv-scene-tier-name,.tgv-scene-error,.tgv-scene-card p,.tgv-scene-tile small,.tgv-scene-status small,.tgv-scene-tab,.tgv-scene-activity-row,.tgv-scene-button,.tgv-scene-detail-link,.tgv-scene-profile .tgv-scene-summary span){font-size:16px;line-height:1.4}
.tgv-scene :is(.tgv-scene-eyebrow,.tgv-scene-steps li,.tgv-scene-mode,.tgv-scene-footer){font-size:14px;line-height:1.35}
.tgv-scene .tgv-scene-copy{font-size:18px;line-height:1.55}
.tgv-scene .tgv-scene-answer{font-size:18px;line-height:1.45;min-height:54px;padding:14px 16px}
.tgv-scene .tgv-scene-input{font-size:18px;min-height:48px}
.tgv-scene .tgv-scene-nav a{font-size:16px;min-height:44px;display:flex;align-items:center;justify-content:center}
.tgv-scene .tgv-scene-account{font-size:16px;min-height:44px;max-width:180px}
.tgv-scene .tgv-scene-icon{font-size:16px;min-height:44px;min-width:44px}
.tgv-scene .tgv-scene-badge .tgv-scene-button{font-size:16px;min-height:44px}
.tgv-scene .tgv-scene-profile{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;min-height:650px}
.tgv-scene .tgv-scene-profile-left{grid-template-columns:130px minmax(0,1fr);grid-template-rows:auto minmax(440px,1fr) auto;gap:16px;align-items:start}
.tgv-scene .tgv-scene-profile-art{grid-column:1/3;grid-row:2/4;justify-self:center;align-self:end;width:95%;height:100%;min-height:440px;max-height:680px;object-fit:contain;object-position:center bottom}
.tgv-scene .tgv-scene-profile-left>.tgv-scene-choice{grid-column:1;grid-row:2;min-height:100px;font-size:16px;background:rgba(12,5,12,.92)}
.tgv-scene .tgv-scene-profile-left>.tgv-scene-button{font-size:16px;min-height:48px;padding:12px;align-self:end}
.tgv-scene .tgv-scene-profile-info{padding:16px;gap:16px}
.tgv-scene .tgv-scene-profile-info .tgv-scene-button{font-size:16px;min-height:44px}
.tgv-scene .tgv-scene-profile-name{font-size:36px;line-height:1.1}
.tgv-scene .tgv-scene-profile-photo{width:88px;height:88px;flex-shrink:0}
.tgv-scene .tgv-scene-profile-right{min-width:0}
.tgv-scene .tgv-scene-profile .tgv-scene-summary{flex-wrap:wrap;gap:12px}
.tgv-scene .tgv-scene-profile .tgv-scene-summary strong{font-size:38px}
.tgv-scene .tgv-scene-profile .tgv-scene-title{font-size:clamp(44px,5vw,78px)}
@media(max-width:1100px){
 .tgv-scene .tgv-scene-hq{grid-template-columns:20% minmax(0,1fr) minmax(300px,38%);gap:14px;min-height:590px}
 .tgv-scene .tgv-scene-hq-welcome{font-size:clamp(38px,5vw,56px);width:95%}
 .tgv-scene .tgv-scene-hq-quests{padding:16px 16px 24px;gap:12px}
 .tgv-scene .tgv-scene-hq-quests .tgv-scene-quest{padding-left:12px;padding-right:38px;gap:8px}
 .tgv-scene .tgv-scene-hq-quests .tgv-scene-quest-symbol{display:none}
 .tgv-scene .tgv-scene-hq-links{gap:10px}
 .tgv-scene .tgv-scene-hq-links .tgv-scene-tile{padding:13px 30px 13px 12px}
 .tgv-scene .tgv-scene-hq-links .tgv-scene-card-title{font-size:27px}
 .tgv-scene .tgv-scene-profile{gap:20px}
 .tgv-scene .tgv-scene-profile-left{grid-template-columns:105px minmax(0,1fr)}
}
@media(max-height:500px){
 .tgv-scene .tgv-scene-header{min-height:58px}.tgv-scene .tgv-scene-footer{font-size:12px}
 .tgv-scene .tgv-scene-hq{min-height:570px}.tgv-scene .tgv-scene-hq-welcome{font-size:40px}
 .tgv-scene .tgv-scene-profile{min-height:620px}.tgv-scene .tgv-scene-profile-art{min-height:420px;max-height:560px}
}
@media(max-width:700px){
 .tgv-scene .tgv-scene-hq{grid-template-columns:minmax(0,1fr) minmax(260px,48%);grid-template-rows:auto auto auto auto;min-height:700px;gap:16px}
 .tgv-scene .tgv-scene-hq-welcome{grid-column:1;grid-row:1;font-size:36px;width:100%}
 .tgv-scene .tgv-scene-agent{grid-column:2;grid-row:1;min-height:125px}
 .tgv-scene .tgv-scene-hq-quests{grid-column:2;grid-row:2;min-height:340px}
 .tgv-scene .tgv-scene-hq .tgv-scene-hq-poster{grid-column:1;grid-row:3/5;height:250px;max-height:250px}
 .tgv-scene .tgv-scene-hq-links{grid-column:2;grid-row:3/5;grid-template-columns:1fr;height:auto}
 .tgv-scene .tgv-scene-hq-links .tgv-scene-tile{min-height:100px}
 .tgv-scene .tgv-scene-profile{display:flex;flex-direction:column;gap:24px}
 .tgv-scene .tgv-scene-profile-art{height:480px}
}
@media(max-width:480px) and (pointer:fine){
 .tgv-scene .tgv-scene-hq{display:flex;flex-direction:column;min-height:0;height:auto}
 .tgv-scene .tgv-scene-agent{order:1}.tgv-scene .tgv-scene-hq-quests{order:3}.tgv-scene .tgv-scene-hq-links{order:4}
 .tgv-scene .tgv-scene-hq .tgv-scene-hq-poster{order:5;height:340px;max-height:340px}
 .tgv-scene .tgv-scene-header{flex-wrap:wrap}.tgv-scene .tgv-scene-header-actions{margin-left:auto}
}
/* Intrinsic row sizing also accommodates long names and enlarged browser text. */
.tgv-scene .tgv-scene-hq{height:auto;min-height:max(600px,100%);grid-template-rows:minmax(125px,auto) minmax(min-content,1fr) minmax(115px,auto)}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled{opacity:.8}
@media(max-width:700px){.tgv-scene .tgv-scene-hq{grid-template-rows:auto minmax(340px,auto) auto auto}}

/* ─── LAYER 5 — tgv-intro.css ───────────────────────────────────────────── */
/* A short localized signal break, replacing the old sweeping screen panel. */
.tgv-scene .tgv-scene-transition{inset:0;transform:none;opacity:0;pointer-events:none;background:linear-gradient(0deg,transparent 0 28%,rgba(255,20,62,.15) 28% 29%,transparent 29% 51%,rgba(73,223,239,.12) 51% 52.5%,transparent 52.5% 75%,rgba(255,20,62,.13) 75% 77%,transparent 77%);z-index:25}
/* Intro gets its own large type scale, without changing the HQ layout. */
.tgv-scene[data-intro=true] .tgv-scene-centre{max-width:1450px;width:100%;padding:32px 16px;gap:26px}
.tgv-scene[data-intro=true] .tgv-scene-title{font-size:clamp(64px,7.7vw,132px);line-height:1.02}
.tgv-scene[data-intro=true] .tgv-scene-heading{font-size:clamp(38px,4vw,64px);line-height:1.1}
.tgv-scene[data-intro=true] .tgv-scene-copy{font-size:clamp(21px,1.7vw,28px);line-height:1.5;max-width:820px}
.tgv-scene[data-intro=true] .tgv-scene-hint{font-size:18px;line-height:1.45}
.tgv-scene[data-intro=true] .tgv-scene-eyebrow{font-size:clamp(20px,1.8vw,30px);line-height:1.3;letter-spacing:.1em}
.tgv-scene[data-intro=true] .tgv-scene-intro-logo{width:min(920px,80vw);height:auto;max-height:35dvh}
.tgv-scene[data-intro=true] .tgv-scene-intro-line{width:min(780px,72vw)}
.tgv-scene[data-intro=true] .tgv-scene-centre:has(.tgv-scene-intro-logo) .tgv-scene-heading{font-size:clamp(36px,3.6vw,60px)}
.tgv-scene[data-intro=true] .tgv-scene-button{font-size:clamp(19px,1.55vw,24px);min-height:66px;padding:18px 32px;line-height:1.25;letter-spacing:.045em}
.tgv-scene[data-intro=true] .tgv-scene-centre>.tgv-scene-button{min-width:min(420px,100%)}
.tgv-scene[data-intro=true] .tgv-scene-form{width:min(880px,100%);gap:22px}
.tgv-scene[data-intro=true] .tgv-scene-label{font-size:22px;gap:12px}
.tgv-scene[data-intro=true] .tgv-scene-input{font-size:22px;padding:16px 20px;min-height:64px}
.tgv-scene[data-intro=true] .tgv-scene-steps{gap:clamp(18px,3vw,48px);margin:12px 0 24px;flex-wrap:wrap}
.tgv-scene[data-intro=true] .tgv-scene-steps li{font-size:20px;gap:12px}
.tgv-scene[data-intro=true] .tgv-scene-steps li>span{width:36px;height:36px;font-size:18px}
.tgv-scene[data-intro=true] .tgv-scene-choices{gap:24px}
.tgv-scene[data-intro=true] .tgv-scene-choice{font-size:22px;min-width:200px;min-height:180px;padding:24px}
.tgv-scene[data-intro=true] .tgv-scene-choice-symbol{font-size:64px}
.tgv-scene[data-intro=true] .tgv-scene-hero-list{max-width:1440px;gap:20px}
.tgv-scene[data-intro=true] .tgv-scene-hero-choice{min-width:0;min-height:0;padding:0}
.tgv-scene[data-intro=true] .tgv-scene-hero-choice img{height:clamp(240px,41dvh,470px);padding:10px 8px 0}
.tgv-scene[data-intro=true] .tgv-scene-hero-choice span{font-size:28px;line-height:1.15;padding:16px 8px}
.tgv-scene[data-intro=true] .tgv-scene-preview{width:100%;max-width:1600px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:4%;padding:0 3% 20px;min-height:calc(100% - 78px);align-items:center}
.tgv-scene[data-intro=true] .tgv-scene-preview-art{width:100%;height:clamp(480px,76dvh,1000px);min-height:0;max-height:none;object-fit:contain;align-self:center}
.tgv-scene[data-intro=true] .tgv-scene-preview-copy{gap:26px;padding:28px 30px;min-width:0;background:linear-gradient(90deg,rgba(13,4,13,.86),rgba(13,4,13,.4));border-left:2px solid var(--tgv-cyan)}
.tgv-scene[data-intro=true] .tgv-scene-preview-copy>.tgv-scene-title{font-size:clamp(64px,7.8vw,140px);line-height:.98;overflow-wrap:anywhere}
.tgv-scene[data-intro=true] .tgv-scene-preview-copy>.tgv-scene-eyebrow{font-size:clamp(26px,2.5vw,40px);margin:0;overflow-wrap:anywhere}
.tgv-scene[data-intro=true] .tgv-scene-preview-copy .tgv-scene-heading{font-size:clamp(42px,4.4vw,72px)}
.tgv-scene[data-intro=true] .tgv-scene-preview-copy .tgv-scene-button{width:100%;max-width:520px}
.tgv-scene .tgv-scene-portal-copy{max-width:1000px;padding:40px}
.tgv-scene .tgv-scene-portal-copy .tgv-scene-title{font-size:clamp(56px,7vw,120px)}
.tgv-scene .tgv-scene-portal-copy p{font-size:clamp(20px,2vw,28px);line-height:1.45}
@media(max-width:900px){
 .tgv-scene[data-intro=true] .tgv-scene-preview{gap:2%;padding:0 1% 20px}
 .tgv-scene[data-intro=true] .tgv-scene-preview-copy{padding:22px 18px;gap:20px}
 .tgv-scene[data-intro=true] .tgv-scene-preview-copy>.tgv-scene-title{font-size:clamp(52px,7.8vw,72px)}
 .tgv-scene[data-intro=true] .tgv-scene-hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .tgv-scene[data-intro=true] .tgv-scene-choice{min-width:170px}.tgv-scene[data-intro=true] .tgv-scene-hero-choice{min-width:0}
}
@media(max-height:500px){
 .tgv-scene[data-intro=true] .tgv-scene-centre{gap:20px;padding:20px 12px}
 .tgv-scene[data-intro=true] .tgv-scene-preview-art{height:480px}
 .tgv-scene[data-intro=true] .tgv-scene-steps{margin:10px 0 20px}
 .tgv-scene[data-intro=true] .tgv-scene-intro-logo{max-height:none;width:min(760px,75vw)}
 .tgv-scene[data-intro=true] .tgv-scene-title{font-size:64px}
}
@media(max-width:580px) and (pointer:fine){
 .tgv-scene[data-intro=true] .tgv-scene-preview{display:flex;flex-direction:column}
 .tgv-scene[data-intro=true] .tgv-scene-preview-art{height:420px}
 .tgv-scene[data-intro=true] .tgv-scene-preview-copy{width:100%}
 .tgv-scene[data-intro=true] .tgv-scene-hero-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tgv-scene[data-intro=true] .tgv-scene-steps{gap:12px}.tgv-scene[data-intro=true] .tgv-scene-steps li{font-size:16px;gap:6px}
}
@media(prefers-reduced-motion:reduce){.tgv-scene .tgv-scene-transition{display:none}}

/* ─── LAYER 6 — WordPress integration ───────────────────────────────────── */

/* Below the site navbar. Above the page's own flow — the optional site footer
   is position: relative and would otherwise paint over the fixed scene and
   take its clicks — and below the global share / Spin & Win stack (z-index
   10), the Complete Profile popup (9999) and the navbar (10000). The
   template's <section> wrapper centres text (style.css); the scene doesn't. */
.tgv-scene{--tgv-nav-offset:var(--navbar-height);z-index:5;text-align:left}

/* The top-right corner belongs to the site's floating share / Spin & Win
   stack (#shareContainer), so the brand and the buttons sit together on the
   left at every width. */
.tgv-scene .tgv-scene-header{justify-content:flex-start}
.tgv-scene .tgv-scene-header-actions{margin-left:0}
.tgv-scene .tgv-scene-account{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The rotate screen's heading in the display face, not the system Impact. */
.tgv-scene-rotate :is(h1,h2){font-family:var(--tgv-display);text-transform:uppercase}

/* Dialog: the close button sits in the dialog's own flow, above the content
   (CLAUDE.md — Modal Close Buttons), so the top padding makes room for it. */
.tgv-scene-dialog[open]{display:flex;flex-direction:column}
.tgv-scene .tgv-scene-dialog{padding-top:12px}
.tgv-scene-dialog .tgv-modal-close{flex-shrink:0;background:rgba(255,255,255,.12);color:#fff}

/* A row of buttons inside a dialog or a mission. */
.tgv-scene-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* The current rank's own image (TGV Tiering — Status ladder rewards), admin-
   set per rung on the Status ladder. Sized modestly so it never crowds out
   the rank title beside it. Falls back to the generic hoh-rank.png badge
   when a rung has no image set, same <img>, no extra CSS needed for that
   case. */
.tgv-scene-rank-image{display:block;width:72px;height:72px;object-fit:contain}

/* On the profile screen's rank card, rows stack vertically (flex, not the
   shared .tgv-scene-status grid from Layer 1): the image sits beside a
   title+XP column (the title and its XP chip stacked on top of each
   other, next to the image, not below the whole image+title row), and the
   "N XP to your next milestone" note is pushed to the end of its own row
   underneath. */
.tgv-scene-profile-right .tgv-scene-status{display:flex;flex-direction:column}
.tgv-scene-profile-right .tgv-scene-status .tgv-scene-rank-head{display:flex;align-items:center;gap:8px}
.tgv-scene-profile-right .tgv-scene-status .tgv-scene-rank-head-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.tgv-scene-profile-right .tgv-scene-status .tgv-scene-rank-foot{display:flex;justify-content:flex-end}

/* ── HQ quest panel ── */
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest.is-locked{opacity:.75}
.tgv-scene .tgv-scene-hq-quests>.tgv-scene-hint{margin:0;color:#fff}

/* ── Quest board: what only the WordPress build has ── */
/* Season switcher, when more than one Season is published. */
.tgv-scene-seasons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tgv-scene .tgv-scene-seasons .tgv-scene-tab{min-height:38px;padding:6px 14px;font-size:14px}
/* The chapter / Season summary: copy, date, and the movie poster when the
   chapter is tied to one. */
.tgv-scene-chapter-copy{display:grid;gap:6px;min-width:0;flex:1}
.tgv-scene-chapter-copy .tgv-scene-eyebrow{margin:0}
.tgv-scene-chapter-poster{display:block;width:72px;aspect-ratio:2/3;object-fit:cover;flex-shrink:0}
.tgv-scene-summary>.tgv-scene-tier-name{flex-shrink:0}
/* Quest cards: type label, completed / locked states. */
.tgv-scene-card>.tgv-scene-eyebrow{margin:0}
.tgv-scene-mission.is-done{border-color:rgba(120,219,224,.55)}
.tgv-scene-mission.is-locked{opacity:.7}
.tgv-scene-empty{display:grid;gap:10px;justify-items:center;padding:24px;border:1px dashed var(--tgv-line);background:rgba(6,12,22,.88);text-align:center}
.tgv-scene-empty .tgv-scene-hint{margin:0}
/* One quest, opened in the dialog. */
.tgv-scene-mission-detail{display:grid;gap:16px}
.tgv-scene-mission-detail>.tgv-scene-eyebrow,.tgv-scene-mission-detail>.tgv-scene-hint{margin:0}
.tgv-scene-mission-detail .tgv-scene-copy{margin:0;max-width:none}
.tgv-scene-mission-detail>.tgv-scene-xp{margin:0}
.tgv-scene-done{margin:0;color:var(--tgv-cyan);font-weight:600}

/* ── Collection ── */
/* A badge (or tier) not reached yet stays dimmed until it unlocks. */
.tgv-scene .tgv-scene-badge.is-locked>img{filter:grayscale(1)}

/* ── Profile ── */
.tgv-scene-activity-row small{display:block;color:var(--tgv-muted);font-size:14px}

/* ── The shared trivia widget (js/tier/trivia.js), drawn like the designer's
   quiz screens. Overrides js/tier/trivia.css inside the scene only. ── */
.tgv-scene .tgv-trivia{width:100%;max-width:none;margin:0;display:flex;flex-direction: column;align-items:center;}
.tgv-scene .tgv-trivia-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60vw;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  text-align: center;
}
.tgv-scene .tgv-trivia-progress,.tgv-scene .tgv-trivia-meta{margin:0;opacity:1;color:var(--tgv-gold);font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.tgv-scene :is(.tgv-trivia-title,.tgv-trivia-question,.tgv-trivia-score,.tgv-trivia-band-title){margin:0;font-family:var(--tgv-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:#fff}
.tgv-scene :is(.tgv-trivia-title,.tgv-trivia-question,.tgv-trivia-band-title){font-size:clamp(28px,3vw,48px)}
.tgv-scene .tgv-trivia-score{font-size:clamp(44px,5.8vw,94px);font-style:italic}
.tgv-scene :is(.tgv-trivia-intro,.tgv-trivia-band-body){margin:0;opacity:1;color:#eee;font-size:18px;line-height:1.55}
.tgv-scene .tgv-trivia-options{display:grid;gap:10px;max-width:640px;width:100%;}
.tgv-scene .tgv-trivia-option{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:14px 16px;border:1px solid #456269;border-radius:0;background:#0c1a1d;color:#fff;font-size:18px;line-height:1.45;text-align:left;transition:none}
.tgv-scene .tgv-trivia-option::before{content:'';flex:0 0 18px;height:18px;border:2px solid #fff;border-radius:50%}
.tgv-scene .tgv-trivia-option.is-correct{border-color:var(--tgv-cyan);background:#14343a}
.tgv-scene .tgv-trivia-option.is-correct::before{border-color:var(--tgv-cyan);background:var(--tgv-cyan)}
.tgv-scene .tgv-trivia-option.is-correct::after{color:var(--tgv-cyan)}
.tgv-scene .tgv-trivia-option.is-wrong{border-color:var(--primary);background:#47111e}
.tgv-scene .tgv-trivia-option.is-wrong::before{border-color:var(--primary);background:var(--primary)}
.tgv-scene .tgv-trivia-option:disabled{opacity:1;cursor:default}
.tgv-scene :is(.tgv-trivia-note,.tgv-trivia-loading){margin:0;opacity:1;color:var(--tgv-muted);font-size:16px;line-height:1.4}
.tgv-scene .tgv-trivia-note.is-win{color:var(--tgv-cyan)}
.tgv-scene .tgv-trivia .tgv-btn{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 28px;border:1px solid #ff4c67;border-radius:0;background:rgba(255,0,0,0.25);color:#fff;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.tgv-scene .tgv-trivia .tgv-btn--outline{border-color:#617e8b;background:rgba(8,20,28,.9)}

@media(max-height:600px){
  .tgv-scene .tgv-scene-dialog{padding-top:8px}
  .tgv-scene :is(.tgv-trivia-title,.tgv-trivia-question,.tgv-trivia-band-title){font-size:24px}
  .tgv-scene .tgv-trivia-option{min-height:46px;padding:10px 14px;font-size:16px}
}
@media(max-width:700px){
  .tgv-scene-chapter-poster{display:none}
}
/* A phone held landscape: the site navbar already takes 60px the designer's
   standalone build doesn't have, so the decorative footer line gives its
   room back to the content. */
@media(max-height:450px){
  .tgv-scene-footer{display:none}
}

/* ── HQ home: one screen, no scrolling ──────────────────────────────────────
   The HQ is sized from the viewport, not from fixed pixels, so the same layout
   fits a 1920x1080 monitor, a 1366x768 laptop and a phone held landscape
   (844x390). --hq-u is 1% of a 16:9 screen's width: the smaller of 1vw and the
   width a 16:9 screen of this height would have. Every size below is
   clamp(phone minimum, N x --hq-u, desktop maximum), so text never shrinks
   past readable and nothing outgrows the screen. dvh, not vh: on a phone the
   browser's address bar changes the visible height.
   Grid: [movie slider | hero | quests], welcome over the left, three links
   under the middle and right. The agent card moved into the header. */
.tgv-scene{
  --hq-u:min(1vw,1.7778dvh);
  /* Red border thickness: 2px on a big screen, thinner as the screen shrinks (a fixed
     2px looks heavy on a phone). Used by every cut-corner ring and red top border. */
  --hq-ring:clamp(.75px,calc(var(--hq-u)*.14),2px);
  --hq-side:clamp(250px,calc(var(--hq-u)*29),620px);
  --hq-agent-w:clamp(290px,calc(var(--hq-u)*40),800px);
  --hq-left:clamp(150px,calc(var(--hq-u)*22),460px);
  --hq-links:clamp(46px,calc(var(--hq-u)*7.2),140px);
  --hq-agent:clamp(58px,calc(var(--hq-u)*9.8),190px);
  --hq-gap:clamp(8px,calc(var(--hq-u)*1.2),28px);
}

/* Header: brand and buttons on the left, the agent card on the right. */
.tgv-scene .tgv-scene-header{min-height:0;gap:clamp(8px,var(--hq-u),20px);padding-top:max(6px,env(safe-area-inset-top));padding-bottom:clamp(4px,calc(var(--hq-u)*.5),10px)}
.tgv-scene .tgv-scene-tgv-logo{--w:clamp(84px,calc(var(--hq-u)*11),230px);width:var(--w);height:calc(var(--w)*.152)}
.tgv-scene .tgv-scene-hoh-logo{--w:clamp(110px,calc(var(--hq-u)*14.5),295px);width:var(--w);height:calc(var(--w)*.217)}
.tgv-scene .tgv-scene-brand .tgv-scene-brand-divider{height:clamp(18px,calc(var(--hq-u)*1.6),34px)}
.tgv-scene .tgv-scene-icon,.tgv-scene .tgv-scene-account{min-height:clamp(34px,calc(var(--hq-u)*2.6),48px);font-size:clamp(12px,calc(var(--hq-u)*.85),16px);padding:0 clamp(8px,calc(var(--hq-u)*.8),14px)}
.tgv-scene .tgv-scene-icon{min-width:clamp(34px,calc(var(--hq-u)*2.6),48px)}
.tgv-scene .tgv-scene-account{max-width:clamp(80px,calc(var(--hq-u)*9),180px)}
.tgv-scene-header-agent{flex:0 0 var(--hq-agent-w);width:var(--hq-agent-w);max-width:60%;margin-left:auto}
.tgv-scene-header-agent:empty{display:none}
.tgv-scene .tgv-scene-header .tgv-scene-agent{position:relative;top:auto;right:auto;grid-column:auto;grid-row:auto;align-self:auto;width:100%;height:var(--hq-agent);min-height:0;gap:0;padding:0}
.tgv-scene .tgv-scene-header .tgv-scene-agent-photo{flex:0 0 auto;width:auto;height:100%;max-height:none;aspect-ratio:1/1;align-self:auto;border-right:1px solid #ff273a}
.tgv-scene-agent-badge{display:none;position:absolute;top:2px;left:2px;z-index:1;font-size:clamp(14px,calc(var(--hq-u)*1.4),24px);line-height:1}
.tgv-scene .tgv-scene-header .tgv-scene-agent-info{gap:0;min-width:0;padding:0}
.tgv-scene .tgv-scene-header .tgv-scene-agent-rank{gap:clamp(5px,calc(var(--hq-u)*.5),9px)}
.tgv-scene .tgv-scene-header .tgv-scene-agent-rank-info{gap:clamp(4px,calc(var(--hq-u)*.5),10px)}
.tgv-scene .tgv-scene-header .tgv-scene-agent-rank>img{width:clamp(32px,calc(var(--hq-u)*4.2),80px);height:clamp(32px,calc(var(--hq-u)*4.2),80px)}
.tgv-scene .tgv-scene-header .tgv-scene-agent-rank small{font-size:clamp(8px,calc(var(--hq-u)*.7),14px);line-height:1.1;letter-spacing:.1em}
.tgv-scene .tgv-scene-header .tgv-scene-agent-rank strong{font-size:clamp(14px,calc(var(--hq-u)*1.5),28px);line-height:1.05}
.tgv-scene .tgv-scene-header .tgv-scene-agent .tgv-scene-progress{height:clamp(6px,calc(var(--hq-u)*.6),10px)}
.tgv-scene .tgv-scene-header .tgv-scene-agent-rank-info>span{font-size:clamp(8px,calc(var(--hq-u)*.7),14px);line-height:1.1}
.tgv-scene .tgv-scene-header .tgv-scene-agent-stats{flex-wrap:nowrap;justify-content:space-between;gap:0;font-size:clamp(9px,calc(var(--hq-u)*.8),15px);line-height:1.2;border-top:1px solid #ff273a}
.tgv-scene .tgv-scene-header .tgv-scene-agent-stats span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(8px,calc(var(--hq-u)*1.1),18px) clamp(10px,calc(var(--hq-u)*1.6),24px)}
.tgv-scene .tgv-scene-header .tgv-scene-agent-stats span+span{border-left:1px solid #ff273a}
.tgv-scene .tgv-scene-header .tgv-scene-agent-stats span:only-child{white-space:normal}

/* The decorative footer line, kept small so it costs the screen little. */
.tgv-scene .tgv-scene-footer{margin-top:0;padding:clamp(3px,calc(var(--hq-u)*.4),9px) 0;font-size:clamp(10px,calc(var(--hq-u)*.7),14px)}

/* The HQ grid. overflow:visible (not the old overflow-x:hidden, which still
   left the base rule's overflow-y:auto active) so the hero below can run
   past this box's edges — grown via transform, not grid/flow sizing — without
   being clipped or silently scrolled out of view. Safe because this screen
   is already designed to never need to scroll (see HQ home comment above). */
.tgv-scene[data-page=home] .tgv-scene-content{overflow:visible}
.tgv-scene[data-page=home] .tgv-scene-hq{display:grid;height:100%;min-height:0;max-width:none;margin:0;padding:clamp(2px,calc(var(--hq-u)*.4),8px) clamp(2px,calc(var(--hq-u)*.3),6px) clamp(4px,calc(var(--hq-u)*.6),12px);grid-template-columns:var(--hq-left) minmax(0,1fr) var(--hq-side);grid-template-rows:auto minmax(0,1fr) var(--hq-links);gap:clamp(6px,calc(var(--hq-u)*.9),20px) var(--hq-gap)}
.tgv-scene[data-page=home] .tgv-scene-hq-welcome{grid-column:1/3;grid-row:1;width:auto;max-width:100%;align-self:start;margin:0;font-size:clamp(26px,calc(var(--hq-u)*4.6),130px)}

/* Quests: the right column, from just under the agent card down to the links. */
.tgv-scene[data-page=home] .tgv-scene-hq-quests{grid-column:3;grid-row:1/3;align-self:start;width:100%;height:auto;max-height:100%;min-height:0;padding:clamp(8px,calc(var(--hq-u)*1.1),24px) clamp(10px,calc(var(--hq-u)*1.2),26px) clamp(12px,calc(var(--hq-u)*1.6),34px);gap:clamp(4px,calc(var(--hq-u)*.6),14px);justify-content:flex-start;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
.tgv-scene[data-page=home] .tgv-scene-hq-quests::-webkit-scrollbar{display:none}
.tgv-scene[data-page=home] .tgv-scene-hq-quest-heading{flex-wrap:nowrap;align-items:start;gap:clamp(4px,calc(var(--hq-u)*.5),12px)}
.tgv-scene[data-page=home] .tgv-scene-hq-quest-heading .tgv-scene-heading{font-size:clamp(18px,calc(var(--hq-u)*2.2),42px);white-space:nowrap}
.tgv-scene[data-page=home] .tgv-scene-hq-quest-heading>small{font-size:clamp(9px,calc(var(--hq-u)*.75),14px);text-align:right;min-width:0}
/* --hq-quest-h is the height a row WANTS (it is also the height the arrow art's
   end caps are drawn for, see the arrow note further down). A row never grows past it,
   but shrinks (flex-shrink) when the panel is shorter than three rows plus the
   heading and button, so on a short phone the panel fits its area instead of
   being cropped. The text then scales to the row: see QUEST ROW FIT. */
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest{--hq-quest-h:9vh;flex:0 1 var(--hq-quest-h);height:auto;min-height:30px;max-height:none;padding:clamp(3px,calc(var(--hq-u)*.6),12px) 11% clamp(3px,calc(var(--hq-u)*.6),12px) clamp(8px,calc(var(--hq-u)*.9),18px);gap:clamp(6px,calc(var(--hq-u)*.7),12px)}
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest-symbol{font-size:clamp(14px,calc(var(--hq-u)*1.5),24px)}
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest-text{gap:clamp(1px,calc(var(--hq-u)*.2),5px)}
.tgv-scene[data-page=home] .tgv-scene-hq-quests>.tgv-scene-hq-quest-heading{flex:none}
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-card-title{font-size:clamp(13px,calc(var(--hq-u)*1.35),26px);line-height:1.05;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest-text small{font-size:clamp(10px,calc(var(--hq-u)*.95),16px);line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* QUEST ROW FIT */
/* The text block is a size container (it stretches to the row's inner height),
   so its children can size themselves to the row with cqh units. Rows tall
   enough for the full design (80px and up, i.e. desktop) are left exactly as
   above; shorter rows scale the title and subtitle down with the row and cut
   them to the lines that fit (title 2 lines from 56px, otherwise 1; subtitle
   always 1). */
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest-text{align-self:stretch;align-content:center;min-height:0;container-type:size}
@container (max-height:79px){
  .tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-card-title{font-size:clamp(9px,34cqh,clamp(13px,calc(var(--hq-u)*1.35),26px));-webkit-line-clamp:1}
  .tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest-text small{font-size:clamp(8px,25cqh,clamp(10px,calc(var(--hq-u)*.95),16px));-webkit-line-clamp:1}
}
@container (min-height:56px) and (max-height:79px){
  .tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-card-title{font-size:clamp(9px,27cqh,clamp(13px,calc(var(--hq-u)*1.35),26px));-webkit-line-clamp:2}
}
/* QUEST ROW FIT END */
.tgv-scene[data-page=home] .tgv-scene-hq-quests>.tgv-scene-button{flex-shrink:0;min-height:clamp(30px,calc(var(--hq-u)*2.6),46px);padding:0 clamp(10px,calc(var(--hq-u)*1.2),24px);font-size:clamp(11px,calc(var(--hq-u)*.85),16px)}
/* Quest row minimum height on short (phone-landscape) screens, where 7.5vh is too small. */
@media(max-height:500px){
  .tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest{--hq-quest-h:50px}
}

/* Links: just the Start-your-journey CTA under the middle and right columns
   now (Collection and Hero Profile were both dropped from the HQ home —
   Collection is still reached from the quest board's "Your collection" row,
   Profile from the header's agent card, both #profile/#collection links). */
.tgv-scene[data-page=home] .tgv-scene-hq-links{grid-column:2/4;grid-row:3;height:100%;min-height:0;gap:var(--hq-gap);grid-template-columns:1fr}
.tgv-scene[data-page=home] .tgv-scene-hq-links .tgv-scene-tile{min-height:0;height:100%;padding:0 12% 0 clamp(8px,calc(var(--hq-u)*1),20px);gap:clamp(1px,calc(var(--hq-u)*.3),8px)}
.tgv-scene[data-page=home] .tgv-scene-hq-links .tgv-scene-card-title{font-size:clamp(14px,calc(var(--hq-u)*1.9),36px);line-height:1.05}
.tgv-scene[data-page=home] .tgv-scene-hq-links small{font-size:clamp(10px,calc(var(--hq-u)*.9),16px);line-height:1.15}

/* Start-your-journey now reuses the Hero Profile button art (878x379) instead
   of the old plain red CTA pill, so it keeps that art's own aspect ratio
   (not the row's --hq-links height), capped at 350px wide, and sits against
   the right edge of the links area instead of spanning it edge to edge. The
   background/border/clip-path reset here beats Layer 1's gradient-pill
   styling for .tgv-scene-hq-journey (CLAUDE.md — same specificity trick the
   [data-page=home] scope already relies on elsewhere in this file). */
.tgv-scene[data-page=home] .tgv-scene-hq{grid-template-rows:auto minmax(0,1fr) auto}
.tgv-scene[data-page=home] .tgv-scene-hq-links .tgv-scene-hq-journey{height:auto;align-self:center;justify-self:end;width:100%;max-width:clamp(140px,calc(var(--hq-u)*18),350px);aspect-ratio:878/379;gap:8px;padding:clamp(10px,calc(var(--hq-u)*1.2),20px);background:var(--hq-art-profile) center/100% 100% no-repeat;border:0;backdrop-filter:none;clip-path:none}
.tgv-scene[data-page=home] .tgv-scene-hq-links .tgv-scene-hq-journey .tgv-scene-card-title{font-size:clamp(16px,calc(var(--hq-u)*2.1),36px);color:var(--primary)}
/* The links row is at most 1800px wide and sits against the right edge of its
   columns; the rest of the HQ keeps its full width. */
.tgv-scene[data-page=home] .tgv-scene-hq-links{width:100%;max-width:1800px;justify-self:end}

/* Quest rows: the arrow button PNG (1008x214) as a 9-slice, so the width fills
   the row while the left cap (20px of the image) and the right cap with the
   arrow + chamfer (138px) keep their shape. The caps are cut at the row's
   minimum height (--hq-quest-h) rather than its real height, because the row
   is no longer a size container — it has to grow with its content, and a size
   container can't. The art stretches vertically when a row grows. 140% on the
   right cap widens the arrow ~40%; use 100% for the PNG's true proportions. */
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest{position:relative;isolation:isolate;background:none}
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-style:solid;border-color:transparent;border-width:0 calc(var(--hq-quest-h)*1.4*138/214) 0 calc(var(--hq-quest-h)*20/214);border-image-source:var(--hq-art-btn-arrow);border-image-slice:0 138 0 20 fill;border-image-repeat:stretch}

/* Locked quest row (e.g. "Complete the assessment first"): greyed art, dimmed
   text, a lock in place of the diamond, and no hover nudge. */
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled{opacity:.55;cursor:not-allowed}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled:hover{transform:none}
.tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest:disabled::before{filter:grayscale(1) brightness(.6)}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled .tgv-scene-quest-text{color:#b8aeb0}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled .tgv-scene-card-title{color:#b8aeb0}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled .tgv-scene-quest-symbol{font-size:0}
.tgv-scene .tgv-scene-hq-quests .tgv-scene-quest:disabled .tgv-scene-quest-symbol::before{content:"\1F512";font-size:clamp(14px,calc(var(--hq-u)*1.4),22px);filter:grayscale(1)}

/* Movie slider: the left column, beside the hero. */
.tgv-scene[data-page=home] .tgv-scene-hq .tgv-scene-hq-poster{grid-column:1;grid-row:2/4;align-self:stretch;width:100%;height:100%;max-height:none;min-height:0;gap:clamp(4px,calc(var(--hq-u)*.5),12px)}
.tgv-scene[data-page=home] .tgv-scene-hq-poster>span,
.tgv-scene[data-page=home] .tgv-scene-hq-movies-row>span{font-size:clamp(14px,calc(var(--hq-u)*1.5),30px);line-height:1.1;flex-shrink:0}
.tgv-scene[data-page=home] .tgv-scene-hq-poster>img{flex:1 1 0;height:auto;min-height:0;width:100%;object-position:left bottom}
.tgv-scene-hq-movies-slot{flex:0 1 auto;aspect-ratio:.67/1;min-height:0;width:80%;align-self:flex-start;container-type:size}
/* The slot is only as tall as the poster (2:3, or what the column leaves), and
   the label + slot stack sits on the column's bottom edge, so "Hero movies"
   hugs the top of the poster instead of the top of the column. */
.tgv-scene[data-page=home] .tgv-scene-hq .tgv-scene-hq-movies{justify-content:flex-end}
/* On a narrow mobile viewport the "Upcoming movies" label sits flush against
   the welcome row above it — give it breathing room. */
@media(max-width:700px){
  .tgv-scene[data-page=home] .tgv-scene-hq-poster.tgv-scene-upcoming.tgv-scene-hq-movies{padding-top:16px}
}
.tgv-scene-hq-movies-slot .tgv-movie-section,
.tgv-scene-hq-movies-slot .tgv-movie-swiper,
.tgv-scene-hq-movies-slot .swiper-wrapper,
.tgv-scene-hq-movies-slot .swiper-slide,
.tgv-scene-hq-movies-slot .tgv-movie-wrapper{height:100%}
.tgv-scene-hq-movies-slot .tgv-movie-swiper{-webkit-mask-image:none;mask-image:none}
.tgv-scene-hq-movies-slot .tgv-movie-wrapper{align-items:flex-start;justify-content:flex-start}
/* The slot itself is already shrunk to 80% of the column (above) and pinned
   to the bottom-right, so the poster just fills its slot exactly — no second
   inner shrink. This keeps the swiper/wrapper/slot chain the same size as the
   poster so the floating nav (below) lands on the poster's real edge instead
   of the old larger invisible box around it. */
.tgv-scene-hq-movies-slot .tgv-movie-image-wrapper{flex:none;width:100%;height:auto;aspect-ratio:.67/1}
.tgv-scene-hq-movies-slot .tgv-movie-swiper img{width:100%;height:100%;object-fit:cover;border-radius:0}
/* The poster's top-right corner is cut, with a 2px red border that follows the
   cut (ring in ::before, same technique as WELCOME BUTTON: a normal border
   would be sliced off along the diagonal; the inner diagonal sits cut + .83px). */
.tgv-scene-hq-movies-slot .tgv-movie-image-wrapper{
  --cut:clamp(10px,calc(var(--hq-u)*1.6),30px);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.tgv-scene-hq-movies-slot .tgv-movie-image-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    calc(100% - var(--cut)) 0, 0 0, 0 100%, 100% 100%, 100% var(--cut), calc(100% - var(--cut)) 0,
    calc(100% - var(--cut) - var(--hq-ring)*.4142) var(--hq-ring), var(--hq-ring) var(--hq-ring), var(--hq-ring) calc(100% - var(--hq-ring)), calc(100% - var(--hq-ring)) calc(100% - var(--hq-ring)), calc(100% - var(--hq-ring)) calc(var(--cut) + var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) var(--hq-ring));
}
/* The title and the Book Now / Remind Me button are not shown in the HQ. */
.tgv-scene-hq-movies-slot .tgv-movie-title,
.tgv-scene-hq-movies-slot .tgv-movie-button{display:none}
/* Prev / next sit inside the poster, bottom right. */
.tgv-scene-hq-movies-slot .tgv-movie-nav--floating{--inset:clamp(6px,calc(var(--hq-u)*.6),14px);top:auto;right:auto;translate:-100% 0;z-index:3;left:calc(min(100cqw,calc(100cqh*.67)) - var(--inset));bottom:var(--inset);gap:clamp(6px,calc(var(--hq-u)*.5),10px)}
.tgv-scene-hq-movies-slot .tgv-movie-nav .evt-nav-btn{width:clamp(36px,calc(var(--hq-u)*2.8),56px);height:clamp(36px,calc(var(--hq-u)*2.8),56px)}
.tgv-scene-hq-movies-slot .tgv-movie-nav .evt-nav-btn svg{width:60%;height:60%}

/* Short screens (a phone held landscape): spend the height on the controls,
   not the captions. */
@media(max-height:520px){
  .tgv-scene[data-page=home] .tgv-scene-hq-quest-heading>small,
  .tgv-scene[data-page=home] .tgv-scene-hq-links small{display:none}
}

/* ── Every other screen: one screen, no page scroll ─────────────────────────
   The home grid above is sized from --hq-u, so it always fits. The screens
   below were still on the designer's fixed pixel sizes (and the large
   onboarding scale), which is why they ran past the bottom of the viewport.
   They now use the same unit: the onboarding steps (welcome, hero name and
   state, gender, choose your hero, preview, arrival), the quest board, the
   achievement collection and the hero profile.

   --hq-u is capped by the screen HEIGHT on a 16:9 display, so a layout that
   fits in about 48 --hq-u of height (what is left under the header) fits every
   screen at or wider than 16:9. Anything that can grow with data (the quest
   cards, the badge grid) keeps the page fixed and scrolls only inside its own
   panel. Specificity: both scopes add two attribute selectors, so they win
   over the designer's layers above without !important. */
.tgv-scene{
  --fit-title:clamp(24px,calc(var(--hq-u)*5),104px);
  --fit-heading:clamp(18px,calc(var(--hq-u)*3.2),64px);
  --fit-copy:clamp(12px,calc(var(--hq-u)*1.4),28px);
  --fit-label:clamp(11px,calc(var(--hq-u)*1.15),22px);
  --fit-small:clamp(9px,calc(var(--hq-u)*.9),17px);
  --fit-button-h:clamp(30px,calc(var(--hq-u)*3.4),66px);
  --fit-gap:clamp(5px,calc(var(--hq-u)*1.3),26px);
}

/* The frame: the content area is a flex column, so a screen's main block can
   take exactly the height that is left and its children can shrink to it. */
.tgv-scene:not([data-page=home]) .tgv-scene-content{display:flex;flex-direction:column;overflow-x:hidden;padding:clamp(2px,calc(var(--hq-u)*.4),8px) 0 clamp(4px,calc(var(--hq-u)*.6),12px)}

/* ONBOARDING (welcome, steps 1-5, load error) */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-steps{flex:none;gap:clamp(10px,calc(var(--hq-u)*2.6),44px);margin:0 0 var(--fit-gap)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-steps li{font-size:var(--fit-label);gap:clamp(4px,calc(var(--hq-u)*.6),12px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-steps li>span{width:clamp(18px,calc(var(--hq-u)*2),38px);height:clamp(18px,calc(var(--hq-u)*2),38px);font-size:var(--fit-small)}

.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-centre{flex:1 1 0;min-height:0;width:100%;margin:0 auto;padding:0 clamp(8px,var(--hq-u),20px);gap:var(--fit-gap)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-title{font-size:var(--fit-title);line-height:1}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-heading{font-size:var(--fit-heading);line-height:1.05}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-centre:has(.tgv-scene-intro-logo) .tgv-scene-heading{font-size:clamp(20px,calc(var(--hq-u)*3.6),68px);line-height:1.05}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-copy{font-size:var(--fit-copy);line-height:1.45;max-width:calc(var(--hq-u)*56);margin:0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hint{font-size:clamp(10px,var(--hq-u),19px);line-height:1.35;margin:0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-eyebrow{font-size:clamp(11px,calc(var(--hq-u)*1.3),26px);line-height:1.2;margin:0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-error{font-size:var(--fit-small);min-height:0;margin:0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-error:empty{display:none}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-intro-logo{width:auto;height:clamp(56px,calc(var(--hq-u)*15),320px);max-width:min(72vw,calc(var(--hq-u)*60));max-height:none;object-fit:contain}

.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button{flex-shrink:0;min-height:var(--fit-button-h);padding:0 clamp(14px,calc(var(--hq-u)*2),40px);font-size:clamp(11px,calc(var(--hq-u)*1.15),22px);line-height:1.2;letter-spacing:.06em}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-centre>.tgv-scene-button{min-width:min(calc(var(--hq-u)*26),100%)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button-secondary{min-height:clamp(26px,calc(var(--hq-u)*2.8),54px)}

.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-form{width:min(calc(var(--hq-u)*60),100%);gap:var(--fit-gap)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-form .tgv-scene-button{justify-self:center}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-columns{gap:var(--fit-gap)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-label{font-size:var(--fit-label);gap:clamp(3px,calc(var(--hq-u)*.5),10px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-input{font-size:var(--fit-label);min-height:clamp(32px,calc(var(--hq-u)*3.2),64px);padding:0 clamp(8px,var(--hq-u),20px)}

/* Gender */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choices{gap:clamp(8px,calc(var(--hq-u)*1.6),32px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choice{font-size:var(--fit-copy);min-width:calc(var(--hq-u)*14);min-height:calc(var(--hq-u)*10);padding:clamp(6px,var(--hq-u),20px);gap:clamp(4px,calc(var(--hq-u)*.8),14px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choice-symbol{font-size:clamp(24px,calc(var(--hq-u)*4.4),76px);line-height:1}

/* Choose your hero: the grid takes the height that is left, each card's
   picture fills its card, so the row fits any screen shape. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-list{flex:1 1 0;min-height:0;max-height:calc(var(--hq-u)*26);width:100%;max-width:calc(var(--hq-u)*80);gap:clamp(6px,calc(var(--hq-u)*1.2),24px);grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice{min-width:0;min-height:0;padding:0;font-size:inherit;justify-content:flex-end}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice img{flex:1 1 0;min-height:0;width:100%;height:auto;padding:clamp(3px,calc(var(--hq-u)*.5),10px) clamp(2px,calc(var(--hq-u)*.4),8px) 0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice span{flex:none;font-size:clamp(11px,calc(var(--hq-u)*1.7),34px);line-height:1.1;padding:clamp(4px,calc(var(--hq-u)*.7),14px) 4px}

/* Preview: the hero on the left, the copy on the right, both inside the height
   that is left. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview{flex:1 1 0;min-height:0;height:auto;width:100%;max-width:calc(var(--hq-u)*90);margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);gap:3%;padding:0 2%;align-items:center}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-art{width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;object-position:center bottom;align-self:stretch}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy{min-height:0;gap:var(--fit-gap);padding:clamp(8px,calc(var(--hq-u)*1.6),30px) clamp(10px,calc(var(--hq-u)*2),34px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy>.tgv-scene-title{font-size:clamp(28px,calc(var(--hq-u)*6),110px);line-height:.98}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy>.tgv-scene-eyebrow{font-size:clamp(12px,calc(var(--hq-u)*1.8),34px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy .tgv-scene-heading{font-size:clamp(18px,calc(var(--hq-u)*3.2),56px)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy .tgv-scene-button{width:100%;max-width:calc(var(--hq-u)*30)}
/* ONBOARDING END */


/* QUEST BOARD, COLLECTION, PROFILE (and their sign-in / locked screens) */
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection],[data-page=profile]) .tgv-scene-content .tgv-scene-centre{flex:1 1 0;min-height:0;width:100%;max-width:calc(var(--hq-u)*70);margin:0 auto;padding:0 clamp(8px,var(--hq-u),20px);gap:var(--fit-gap)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection],[data-page=profile]) .tgv-scene-content .tgv-scene-title{font-size:var(--fit-title);line-height:1}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection],[data-page=profile]) .tgv-scene-content .tgv-scene-copy{font-size:var(--fit-copy);line-height:1.45;margin:0}

.tgv-scene[data-page]:is([data-page=missions],[data-page=collection],[data-page=profile]) .tgv-scene-content .tgv-scene-button{flex-shrink:0;min-height:clamp(28px,calc(var(--hq-u)*2.8),54px);padding:0 clamp(10px,calc(var(--hq-u)*1.6),30px);font-size:clamp(10px,calc(var(--hq-u)*1.05),19px);line-height:1.2}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection],[data-page=profile]) .tgv-scene-content .tgv-scene-centre .tgv-scene-button{min-height:var(--fit-button-h)}

/* The page: header, tabs and summary stay put; only the list below scrolls. */
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page{flex:1 1 0;min-height:0;width:100%;max-width:calc(var(--hq-u)*100);margin:0 auto;padding:0 clamp(2px,calc(var(--hq-u)*.3),6px);display:flex;flex-direction:column;gap:clamp(4px,calc(var(--hq-u)*.7),14px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page>*{flex:none}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head{gap:clamp(8px,calc(var(--hq-u)*1.6),30px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-title{font-size:clamp(24px,calc(var(--hq-u)*3.6),70px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-status{padding:clamp(3px,calc(var(--hq-u)*.4),8px) clamp(8px,calc(var(--hq-u)*1.2),22px);gap:clamp(1px,calc(var(--hq-u)*.2),4px);min-width:calc(var(--hq-u)*22)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-status-name{font-size:clamp(14px,calc(var(--hq-u)*1.6),30px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-progress{height:clamp(8px,calc(var(--hq-u)*1),14px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-rank-image{width:48px;height:48px}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-tier-name{font-size:clamp(32px,calc(var(--hq-u)*4.8),48px);line-height:1.2}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-status small{font-size:var(--fit-small);line-height:1.2}

.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-tabs,
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-seasons{gap:clamp(4px,calc(var(--hq-u)*.6),10px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-tab,
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-seasons .tgv-scene-tab{min-height:clamp(26px,calc(var(--hq-u)*2.4),46px);padding:clamp(2px,calc(var(--hq-u)*.3),6px) clamp(8px,calc(var(--hq-u)*1.2),22px);font-size:clamp(10px,var(--hq-u),18px);line-height:1.2}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-tab small{font-size:var(--fit-small)}

.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary{padding:clamp(8px,calc(var(--hq-u)*1),20px) clamp(10px,calc(var(--hq-u)*1.4),26px);gap:clamp(8px,calc(var(--hq-u)*1.4),24px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary .tgv-scene-heading{font-size:clamp(14px,calc(var(--hq-u)*1.6),32px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary strong{font-size:clamp(16px,calc(var(--hq-u)*2),40px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary span,
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary .tgv-scene-hint{font-size:clamp(10px,var(--hq-u),19px);line-height:1.3;margin:0}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-chapter-copy{gap:clamp(2px,calc(var(--hq-u)*.3),6px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-chapter-copy .tgv-scene-hint{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-eyebrow{font-size:var(--fit-small);line-height:1.2}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-chapter-poster{width:clamp(30px,calc(var(--hq-u)*4.2),84px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page>.tgv-scene-hint{font-size:var(--fit-small);line-height:1.3;margin:0}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-empty{padding:clamp(10px,calc(var(--hq-u)*2),36px)}

/* The scrolling list. Quest cards and badges are the only things that grow
   with data, so they scroll inside their own panel. */
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-grid{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;align-content:start;scrollbar-width:none;-ms-overflow-style:none;gap:clamp(5px,calc(var(--hq-u)*.9),18px);grid-template-columns:repeat(5,minmax(0,1fr))}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-grid::-webkit-scrollbar{display:none}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-card{padding:clamp(6px,var(--hq-u),20px);gap:clamp(3px,calc(var(--hq-u)*.5),10px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-card p{font-size:var(--fit-small);line-height:1.3;margin:0}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-mission .tgv-scene-card-title{font-size:clamp(14px,calc(var(--hq-u)*2.6),50px)}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-mission p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-xp{font-size:clamp(13px,calc(var(--hq-u)*1.2),22px)}
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-mission .tgv-scene-button{min-height:clamp(26px,calc(var(--hq-u)*2.3),44px)}
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-mission{padding:clamp(6px,calc(var(--hq-u)*.8),16px);gap:clamp(2px,calc(var(--hq-u)*.35),8px)}

/* Badges: a compact card. Picture beside the name, the rest across the full
   width, "View ..." as a text link, so 18 badges fit in about three rows. */
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-grid.tgv-scene-collection{grid-template-columns:repeat(5,minmax(0,1fr))}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge{position:relative;container-type:inline-size;display:flex;flex-direction:column;column-gap:clamp(12px,calc(var(--hq-u)*1.8),36px);row-gap:clamp(1px,calc(var(--hq-u)*.15),4px);align-items:center;text-align:center;padding:0;aspect-ratio:290/384;border:0;background:none}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>img{width:100%;height:100%;margin:0;align-self:center;cursor:pointer}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>:not(img){margin:0;min-width:0;padding:0 clamp(5px,calc(var(--hq-u)*.8),16px)}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>.tgv-scene-card-title+p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>.tgv-scene-tier-name{align-self:flex-end}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>.tgv-scene-progress,
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>.tgv-scene-progress~*{grid-column:1/-1}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-card-title{font-size:clamp(18px,calc(var(--hq-u)*2),38px);line-height:1.05;text-align:center}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-tier-name{font-size:var(--fit-small);line-height:1.15}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-progress{height:clamp(4px,calc(var(--hq-u)*.5),10px)}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-xp-row{width:100%}
/* var(--fit-small) instead of a fixed size, same clamp(9px..17px) token the
   rest of this card already uses — shrinks on its own on mobile. */
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-xp-row small{font-size:var(--fit-small)}
/* --fit-small's own mobile floor (9px) is only raised to 16px above
   min-width:1001px (FIT ALL SCREENS readability pass) — a real phone in
   landscape stays under that, so bump it a bit here instead, scoped to
   just this count label. */
@media(max-width:1000px){
  .tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-xp-row small{font-size:max(11px,var(--fit-small))}
}
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-button{justify-self:start;min-height:0;padding:0;border:0;background:none;clip-path:none;color:var(--tgv-cyan);font-size:var(--fit-small);font-weight:600;letter-spacing:.02em;text-transform:none;text-decoration:underline;transform:none}

/* Six badges across leaves a card too narrow for the category beside the status;
   the category tabs above already say which group a badge is in. */
@container (max-width:300px){
  .tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge>.tgv-scene-card-title+p{display:none}
}

/* Profile */
/* .tgv-scene-profile now hosts the page head (title + back arrow) above the
   two-column body — it is a flex column, not the grid itself. The grid
   (Layers 1/4's display:grid / display:flex-at-700px, both scoped to the
   bare .tgv-scene-profile class and overridden here by specificity) moves
   onto the new .tgv-scene-profile-columns wrapper below, so a designer
   resync of Layers 1-5 can't drop this — it all lives in Layer 6. */
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile{width:100%;max-width:calc(var(--hq-u)*100);height:100%;min-height:0;margin:0 auto;padding:0 clamp(2px,calc(var(--hq-u)*.3),6px);display:flex;flex-direction:column;gap:clamp(4px,calc(var(--hq-u)*.7),14px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-columns{display:grid;flex:1 1 auto;min-height:0;gap:clamp(10px,calc(var(--hq-u)*2.4),48px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-left{display:flex;flex-direction:column;min-height:0;height:100%;gap:clamp(6px,calc(var(--hq-u)*1.2),24px)}
/* .tgv-scene-profile-left is now a flex column (not grid) — the art below
   is position:absolute, so it fills the whole box via its own top/left/
   width/height:100% regardless, using .tgv-scene-profile-left's
   position:relative (Layer 2) as its containing block, same trick the HQ
   home hero uses. The info card and buttons stack normally in flow above
   it and already carry z-index:1 (Layer 2), so they correctly sit above
   the art's default z-index in the same stacking context. */
/* The downward shift is computed per-image in hq-scene.js's placeHero()
   (data-hero-push, see that file), scaled by how tall the actual art
   renders, not a flat amount for every character — so it isn't duplicated
   here. translateX IS flat here (sideways position isn't aspect-ratio
   dependent the way the vertical push is) — listed before scale() so the
   28% stays flat regardless of the 1.3x enlargement. The bleed clip
   (data-hero-bleed, set on the <img> in hq-app.js) lets this run past
   .tgv-scene-content on any side. */
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-art{position:absolute;top:0;left:0;width:100%;min-height:0;max-height:none;height:100%;transform:translateX(28%) scale(1.75);transform-origin:center bottom;pointer-events:none;z-index:-1}
/* Narrower than its grid-column:1/3 area. Scoped to .tgv-scene-profile-info
   specifically, not the bare .tgv-scene-status it also carries — that class
   is shared with the rank card inside .tgv-scene-profile-right, which must
   stay full width. */
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-info{width:65%;padding:clamp(6px,calc(var(--hq-u)*1),20px);gap:clamp(8px,calc(var(--hq-u)*1.2),24px)}
/* Sized off the shared --hq-u responsive unit (same convention as every
   other clamp() on this page) instead of a fixed 170px, so it scales down
   on mobile; aspect-ratio keeps it square at every size instead of tracking
   width/height separately. */
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-photo-frame{display:block;width:clamp(68px,calc(var(--hq-u)*8.5),170px);aspect-ratio:1/1;flex-shrink:0}
/* "Red dynamic border" = a plain border whose thickness is the shared
   --hq-ring token (clamp(.75px,…,2px) — thinner on mobile), not a clip-path
   cut. The frame span is no longer load-bearing for this (no ::before ring
   needed) but stays since hq-app.js already wraps the <img> in it. */
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-photo{width:100%;height:100%;border:var(--hq-ring) solid var(--primary)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-name{font-size:clamp(22px,calc(var(--hq-u)*3),54px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-info .tgv-scene-hint{font-size:var(--fit-small);margin:0}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-info .tgv-scene-button{min-height:clamp(24px,calc(var(--hq-u)*2.2),42px);margin-top:clamp(2px,calc(var(--hq-u)*.5),10px);font-size:var(--fit-small)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-left>.tgv-scene-choice{min-height:clamp(50px,calc(var(--hq-u)*7),130px);padding:clamp(4px,calc(var(--hq-u)*.6),12px);font-size:var(--fit-small);gap:clamp(2px,calc(var(--hq-u)*.4),8px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-choice-symbol{font-size:clamp(20px,calc(var(--hq-u)*2.8),50px);line-height:1}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-left>.tgv-scene-button{min-height:clamp(26px,calc(var(--hq-u)*2.6),48px);font-size:var(--fit-small)}

.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-right{min-height:0;gap:clamp(5px,calc(var(--hq-u)*1),20px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-right::-webkit-scrollbar{display:none}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-right>*{flex:none}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-title{font-size:clamp(24px,calc(var(--hq-u)*3.6),70px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-right .tgv-scene-status{padding:clamp(5px,calc(var(--hq-u)*.8),16px) clamp(8px,calc(var(--hq-u)*1.2),22px);gap:clamp(2px,calc(var(--hq-u)*.4),8px);font-size:var(--fit-label)}
/* The page head's own rank/XP card (status(), shared with missions/
   collection) duplicates this richer one (rank image, rank name, XP chip,
   rank description) — hidden on #profile only; missions/collection still
   want it in their head. */
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-page-head .tgv-scene-status{display:none}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-summary{padding:clamp(10px,calc(var(--hq-u)*1.6),32px) clamp(8px,calc(var(--hq-u)*1.2),22px);gap:clamp(6px,calc(var(--hq-u)*1),20px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-summary strong{font-size:clamp(30px,calc(var(--hq-u)*4.2),80px);font-style:italic}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-summary span{font-size:clamp(10px,var(--hq-u),19px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-eyebrow{font-size:var(--fit-small);margin:0}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-columns{gap:clamp(5px,calc(var(--hq-u)*1),20px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-tile{min-height:clamp(40px,calc(var(--hq-u)*5.5),100px);padding:clamp(6px,var(--hq-u),18px);gap:clamp(1px,calc(var(--hq-u)*.3),6px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-tile .tgv-scene-card-title{font-size:clamp(14px,calc(var(--hq-u)*1.8),34px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-tile small{font-size:var(--fit-small);line-height:1.2}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-heading{font-size:clamp(16px,calc(var(--hq-u)*2.2),42px)}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-activity-row{padding:clamp(4px,calc(var(--hq-u)*.7),13px);font-size:clamp(10px,var(--hq-u),18px);line-height:1.25}
.tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-activity-row small{font-size:var(--fit-small)}

/* A narrow desktop window: stack what sits side by side and let the frame
   scroll rather than squeeze it. */
@media(max-width:700px){
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile{height:auto}
  /* Was Layer 4's .tgv-scene-profile{display:flex;flex-direction:column} at
     this width, stacking -left/-right — that still targets the bare
     .tgv-scene-profile class, which is now the page-head's flex column, not
     the grid. Reapplied here on .tgv-scene-profile-columns instead, so
     -left/-right still stack at this width. */
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-columns{display:flex;flex-direction:column;gap:24px;height:auto}
  /* min-height matches the art's own clamp below: now that the art is
     position:absolute, it no longer sizes this column itself, so without
     this the column (and the stacked .tgv-scene-profile-right under it,
     .tgv-scene-profile switches to a flex column at this width — see Layer 4
     above) would collapse to just the info card + buttons and the art would
     overflow into whatever sits below it. */
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-left{height:auto;min-height:clamp(160px,40dvh,320px)}
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile-art{height:clamp(160px,40dvh,320px)}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.8fr) auto;display:grid}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* FIT ALL SCREENS END */

/* PROFILE INFO CARD */
/* .tgv-scene-profile-info on the Hero Profile screen: clipped top-right and
   bottom-left corners (the horizontal mirror of JOURNEY TILE's top-left/
   bottom-right cut), a low-opacity red fill tied to var(--primary) in place
   of the shared .tgv-scene-status's dark card look, and the same ::before
   ring technique as JOURNEY TILE/SEASON BUTTONS — a plain `border` gets
   sliced off wherever clip-path cuts a corner, which is what made the
   border look broken at the two diagonal cuts here. */
.tgv-scene-profile-info{
  --cut:16px;
  position:relative;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  border:0;
  border-radius:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(2px);
}
.tgv-scene-profile-info::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    calc(100% - var(--cut)) 0, 0 0, 0 calc(100% - var(--cut)), var(--cut) 100%, 100% 100%, 100% var(--cut), calc(100% - var(--cut)) 0,
    calc(100% - var(--cut) - var(--hq-ring)*.4142) var(--hq-ring), var(--hq-ring) var(--hq-ring), var(--hq-ring) calc(100% - var(--cut) - var(--hq-ring)*.4142), calc(var(--cut) + var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), calc(100% - var(--hq-ring)) calc(100% - var(--hq-ring)), calc(100% - var(--hq-ring)) calc(var(--cut) + var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) var(--hq-ring));
}

/* Edit profile: a plain square button (no cut corner) inside the card above —
   red border, no fill at rest, white text; still fills red on hover like
   every other button (.tgv-scene-button:hover, Layer 1). */
.tgv-scene-profile-info .tgv-scene-button-secondary{
  clip-path:none;
  background:transparent;
  border-color:var(--primary);
  color:#fff;
}
.tgv-scene-profile-info .tgv-scene-button-secondary:hover{
  background:var(--primary);
}
/* PROFILE INFO CARD END */

/* XP METER CHIP */
/* The progress bar (progress(), hq-app.js) and its "123 / 456 XP" label used
   to sit on separate lines inside .tgv-scene-status (missions/collection
   page header, the profile rank card) — now side by side in a chip of their
   own: the same treatment as PROFILE INFO CARD above (a normal border and a
   low-opacity fill, both tied to var(--primary) instead of a fixed hex), but
   square — no clip-path — since there's no card-sized corner to cut here. */
.tgv-scene-xp-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}
.tgv-scene-xp-row .tgv-scene-progress{flex:1;min-width:0}
.tgv-scene-xp-row small,
.tgv-scene-xp-row span{flex-shrink:0;white-space:nowrap}
/* XP METER CHIP END */

/* RANK CARD BORDER */
/* The profile screen's rank card (.tgv-scene-profile-right .tgv-scene-status
   — rank image, rank name, XP chip) gets the dynamic border instead of its
   plain dark-card look: a low-opacity red fill plus a plain border whose
   thickness is the shared --hq-ring token (thinner on mobile) — no
   clip-path, no ::before ring (CLAUDE.md-adjacent note: "dynamic border" in
   this codebase means this, not a cut-corner clip). The XP chip inside it
   drops its own border/fill (XP METER CHIP above still applies everywhere
   else, e.g. the missions/collection page-head status) — one dynamic border
   per card, not a second one nested inside it. */
.tgv-scene-profile-right .tgv-scene-status{
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(2px);
  border:var(--hq-ring) solid var(--primary);
  border-radius:0;
}
.tgv-scene-profile-right .tgv-scene-status .tgv-scene-xp-row{
  border:0;
  background:none;
  padding:6px 0;
}
/* RANK CARD BORDER END */

/* WELCOME BUTTON */
/* The primary button on every onboarding screen ("Begin your hero journey",
   then each step's "Continue"): a see-through red fill so
   the lobby video shows through, with a visible border that follows the cut
   corner. A normal border is sliced off along the clip-path diagonal, so the
   button keeps its clip-path and fill, and the border is drawn as a ring in
   ::before: an even-odd clip of the outer shape minus the same shape inset
   2px (the diagonal moves 2.83px along each axis: 2px x sqrt(2)). */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button:not(.tgv-scene-button-secondary){
  position:relative;
  /* Bigger than the shared setup button (11-22px text, 30-66px tall); scales
     with --hq-u the same way. */
  font-size:clamp(14px,calc(var(--hq-u)*1.5),28px);
  min-height:clamp(44px,calc(var(--hq-u)*4.6),88px);
  padding-block:clamp(10px,calc(var(--hq-u)*1.4),26px);
  background:rgba(208,0,24,.28);
  border:var(--hq-ring) solid transparent;
  backdrop-filter:blur(2px);
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button:not(.tgv-scene-button-secondary)::before{
  content:"";
  position:absolute;
  inset:calc(var(--hq-ring)*-1);
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 0,
    var(--hq-ring) var(--hq-ring), calc(100% - var(--hq-ring)) var(--hq-ring), calc(100% - var(--hq-ring)) calc(100% - 14px - var(--hq-ring)*.4142), calc(100% - 14px - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--hq-ring)), var(--hq-ring) var(--hq-ring));
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button:not(.tgv-scene-button-secondary):hover{
  background:rgba(208,0,24,.5);
}
/* WELCOME BUTTON END */


/* SCENE BUTTON */
/* The same button as WELCOME BUTTON on every screen after onboarding (HQ, quest
   board, collection, profile): see-through red fill, red border that follows
   the cut bottom-right corner (ring in ::before, see WELCOME BUTTON). Sizes
   stay with FIT ALL SCREENS. Left out: the secondary button, and the
   collection's text-link button (.tgv-scene-badge). */
.tgv-scene[data-page]:not([data-page=setup]) .tgv-scene-button:not(.tgv-scene-button-secondary):not(.tgv-scene-badge .tgv-scene-button){
  position:relative;
  background:rgba(208,0,24,.28);
  border:var(--hq-ring) solid transparent;
  backdrop-filter:blur(2px);
}
.tgv-scene[data-page]:not([data-page=setup]) .tgv-scene-button:not(.tgv-scene-button-secondary):not(.tgv-scene-badge .tgv-scene-button)::before{
  content:"";
  position:absolute;
  inset:calc(var(--hq-ring)*-1);
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 0,
    var(--hq-ring) var(--hq-ring), calc(100% - var(--hq-ring)) var(--hq-ring), calc(100% - var(--hq-ring)) calc(100% - 14px - var(--hq-ring)*.4142), calc(100% - 14px - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--hq-ring)), var(--hq-ring) var(--hq-ring));
}
.tgv-scene[data-page]:not([data-page=setup]) .tgv-scene-button:not(.tgv-scene-button-secondary):not(.tgv-scene-badge .tgv-scene-button):hover{
  background:rgba(208,0,24,.5);
}
/* SCENE BUTTON END */


/* ONBOARDING POLISH */
/* Round of 12 Oct 2026 on the onboarding screens only (data-page=setup).
   Every selector repeats the FIT ALL SCREENS prefix and sits after it, so it
   wins on order at equal specificity. The cut-corner buttons use the same
   ring technique as WELCOME BUTTON: the button keeps its clip-path, and the
   2px red border is an even-odd ring in ::before (the inner diagonal sits
   cut + 0.83px along each edge: 2px x sqrt(2) - 2px). */

/* Text: labels, copy and hints are uppercase. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content :is(.tgv-scene-label,.tgv-scene-copy,.tgv-scene-hint){text-transform:uppercase}

/* Fields: a 1px border on all four sides, and name above state. The text
   input and the state <select> share one fixed height (44px floor = the touch
   target size used elsewhere in this file; FIT ALL SCREENS' 32px floor was too
   thin on a phone). The select drops its native look so every browser draws
   it at that same height, with its own chevron. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-input{
  --field-h:clamp(44px,calc(var(--hq-u)*3.2),64px);
  box-sizing:border-box;
  height:var(--field-h);
  min-height:var(--field-h);
  border-width:1px;
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content select.tgv-scene-input{
  -webkit-appearance:none;
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378dbe0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-columns{grid-template-columns:minmax(0,1fr)}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-form{max-width:500px}

/* Gender: square, all four corners cut, 2px red border, thick symbols. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choices .tgv-scene-choice{
  --cut:clamp(8px,calc(var(--hq-u)*1.3),24px);
  position:relative;
  width:calc(var(--hq-u)*13);
  min-width:0;
  min-height:0;
  aspect-ratio:1/1;
  border:0;
  border-radius:0;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.06em;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choices .tgv-scene-choice::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring), calc(100% - var(--cut) - var(--hq-ring)*.4142) var(--hq-ring), calc(100% - var(--hq-ring)) calc(var(--cut) + var(--hq-ring)*.4142), calc(100% - var(--hq-ring)) calc(100% - var(--cut) - var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), calc(var(--cut) + var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--cut) - var(--hq-ring)*.4142), var(--hq-ring) calc(var(--cut) + var(--hq-ring)*.4142), calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring));
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choices .tgv-scene-choice[aria-pressed=true]{background:linear-gradient(140deg,rgba(208,0,24,.55),rgba(60,0,8,.85));border:0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-choices .tgv-scene-choice-symbol{
  color:#fff;
  font-weight:900;
  -webkit-text-stroke:.07em currentColor;
}

/* Choose your hero: 3:4 (portrait) cards, top-left and bottom-right cut, 2px red border,
   the name laid over the bottom edge on a left-to-right red gradient. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-list{flex:0 0 auto;max-height:none;align-content:center;grid-auto-rows:auto}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice{
  --cut:clamp(10px,calc(var(--hq-u)*1.6),30px);
  width:100%;
  aspect-ratio:3/4;
  border:0;
  border-radius:0;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring), calc(100% - var(--hq-ring)) var(--hq-ring), calc(100% - var(--hq-ring)) calc(100% - var(--cut) - var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--hq-ring)), var(--hq-ring) calc(var(--cut) + var(--hq-ring)*.4142), calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring));
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice[aria-pressed=true]{background:linear-gradient(140deg,rgba(208,0,24,.4),rgba(60,0,8,.8))}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice img{position:absolute;inset:0;width:100%;height:100%;padding:0;object-fit:cover;object-position:center 20%}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice span{
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(4px,calc(var(--hq-u)*.7),14px);
  z-index:1;
  text-transform:uppercase;
  text-align:center;
  background:linear-gradient(90deg,transparent,rgba(208,0,24,.9) 25%,rgba(208,0,24,.9) 75%,transparent);
}

/* Back / Change character: plain text, no border or background. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button[data-action=setup-back]{
  background:none;
  border:0;
  clip-path:none;
  backdrop-filter:none;
  min-height:0;
  width:auto;
  padding:clamp(2px,calc(var(--hq-u)*.4),8px);
  color:rgba(255,255,255,.75);
  text-decoration:underline;
  text-underline-offset:.3em;
}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button[data-action=setup-back]:hover{background:none;color:#fff}

/* Hero preview: the copy sits straight on the scene (no panel, no left rule),
   and the rank is set like the hero name, with its logo beside it. */
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy{background:none;border-left:0}
.tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy .tgv-scene-rank-line{
  display:flex;
  align-items:center;
  gap:.3em;
  font-style:italic;
  letter-spacing:.01em;
}
.tgv-scene-rank-line img{height:1.3em;width:auto;flex:none}

/* Hero preview layout: the art takes 60% of the width and the copy 40%. The
   preview is pulled out over .tgv-scene-experience's side padding so it spans
   the whole screen, and the art is drawn larger than its column, anchored to
   the bottom and nudged down and left, so it runs slightly off the screen.
   hq-scene.js places the glitch sprite from this element's bounding box (so
   the transform carries over) and, with data-hero-bleed, clips it to the whole
   scene rather than the content area. The content area no longer clips or
   scrolls on this step (the stacked layout below 700px keeps it). */
@media(min-width:701px){
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content:has(.tgv-scene-preview){overflow:visible}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview{
    /* .tgv-scene-experience pads the content area left and right; take that
       padding back so the preview, and so the art, reaches the screen edges. */
    --bleed-l:max(clamp(18px,3vw,64px),env(safe-area-inset-left));
    --bleed-r:max(clamp(18px,3vw,64px),env(safe-area-inset-right));
    width:auto;max-width:none;margin:0 calc(var(--bleed-r) * -1) 0 calc(var(--bleed-l) * -1);
    grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:0;padding:0;
  }
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-art{transform:translate(10%,8%) scale(1.12);transform-origin:50% 100%}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy{padding-right:calc(var(--bleed-r) + clamp(10px,calc(var(--hq-u)*2),40px))}
}
/* ONBOARDING POLISH END */


/* FONTS */
/* Bebas Neue is for every h1 and h2 (rule in the template's GLOBAL block),
   plus the profile screen's hero name below; everything else in the HQ is
   Poppins. The designer's display and HUD faces are tokens, so pointing them
   at Poppins covers every other rule that uses them (rank, XP, quest labels,
   agent card, ...). Declared after layers 2 and 3, which set them. */
.tgv-scene{
  --tgv-display:Poppins,Arial,sans-serif;
  --tgv-hud:Poppins,Arial,sans-serif;
}
/* The few rules that name Impact directly instead of using the token. */
.tgv-scene .tgv-scene-brand span,
.tgv-scene .tgv-scene-xp,
.tgv-scene .tgv-scene-card-title:not(h1,h2){font-family:Poppins,Arial,sans-serif}
/* The hero name on the profile screen: same face as h1/h2 (Bebas Neue, the
   GLOBAL block in the template) and the same single-400-weight reason — the
   loaded font file has no bold, so forcing 700 here would just faux-bold it. */
.tgv-scene .tgv-scene-profile-name{font-family:'Bebas Neue',var(--tgv-display),'Arial Narrow',sans-serif;font-weight:400}
/* FONTS END */


/* BACK ARROW */
/* The arrow at the top of every screen reached from the HQ home (quests,
   collection, profile). hq-app.js draws it first inside #tgv-view. */
.tgv-scene .tgv-scene-back{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin:0 0 10px;padding:0;
  border:1px solid rgba(255,255,255,.35);border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;
  font:inherit;font-size:20px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s;
}
.tgv-scene .tgv-scene-back:hover,
.tgv-scene .tgv-scene-back:focus-visible{background:var(--primary);border-color:var(--primary)}
@media (max-height:480px){
  .tgv-scene .tgv-scene-back{width:34px;height:34px;margin-bottom:6px;font-size:17px}
}
/* BACK ARROW END */


/* PAGE HEAD BACK ARROW */
/* head() (hq-app.js) draws the back arrow itself now, as the first child
   beside the title, so it sits on the title's own row instead of stacked
   above it (CLAUDE.md-style page head: title left, status right). */
.tgv-scene-page-head-title{display:flex;align-items:center;gap:14px;min-width:0}
.tgv-scene-page-head-title .tgv-scene-back{margin:0;flex-shrink:0}
/* PAGE HEAD BACK ARROW END */


/* SUMMARY BOX BORDER */
/* .tgv-scene-summary gets the same cut-corner ring + see-through fill as
   the HQ's "Start your journey" tile (JOURNEY TILE below): a top-left/
   bottom-right cut (--cut), a low-opacity #081315 background instead of
   Layer 2's solid black/teal-border box, and a #486d72 ring that follows
   the cut (::before, even-odd clip-path — a plain border can't follow a
   clip-path cut corner). Own fixed colours, not tied to var(--primary) —
   this card is deliberately teal/dark, not brand red. */
.tgv-scene-summary{
  position:relative;
  border:var(--hq-ring) solid #486d72;
  background:rgba(8,19,21,.7);
  backdrop-filter:blur(2px);
}
/* SUMMARY BOX BORDER END */


/* ACHIEVEMENT SUMMARY BORDER */
/* The Collection page's "Your achievement journey" card is red/black instead
   of SUMMARY BOX BORDER's shared teal — scoped to [data-page=collection] so
   every other .tgv-scene-summary (missions chapter summary, profile summary,
   trivia-complete dialog) keeps the teal look. */
.tgv-scene[data-page=collection] .tgv-scene-summary{
  border-color:var(--primary);
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(2px);
}
/* Bigger than the shared missions/collection clamp (hq.css line 1049) —
   "Your achievement journey" is this card's own title, not a shared label. */
.tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-summary .tgv-scene-heading{
  font-size:clamp(18px,calc(var(--hq-u)*2.2),40px);
}
/* "0 / 73" + "Tier milestones reached" as one side-by-side group pinned to
   the card's right edge — .tgv-scene-summary-stat only exists on this card
   (collectionView(), hq-app.js), so no [data-page] scoping is needed. The
   parent's shared space-between (SUMMARY BOX BORDER's base .tgv-scene-summary)
   now has just 2 children — the heading and this group — so it lands left/right. */
.tgv-scene-summary-stat{
  display:flex;
  align-items:baseline;
  gap:clamp(6px,calc(var(--hq-u)*.8),14px);
}
/* ACHIEVEMENT SUMMARY BORDER END */


/* BADGE DIALOG TITLE */
/* The badge-detail dialog's "Achievement details" title (badgeDialog(),
   hq-app.js) — bigger and italic, distinct from every other
   .tgv-scene-heading use via its own class, not a [data-page] scope (dialogs
   aren't page-scoped). */
.tgv-scene-badge-dialog-title{
  font-size:clamp(24px,calc(var(--hq-u)*3.6),70px);
  font-style:italic;
}
/* The title and its copy line sit in their own grid row
   (.tgv-scene-badge-dialog-head) instead of .tgv-scene-modal-content's
   shared 18px row gap, so they can sit closer together without touching
   that global gap. */
.tgv-scene-badge-dialog-head{
  display:grid;
  gap:0;
}
.tgv-scene-badge-dialog-head .tgv-scene-copy{
  margin:0;
}
@media(max-height:600px){
  .tgv-scene-badge-dialog-head .tgv-scene-copy{
    font-size:16px;
  }
}
/* BADGE DIALOG TITLE END */


/* TIER GRID CARD — NO BORDER/BACKGROUND */
/* .tgv-scene-card/.tgv-scene-badge's shared border + gradient background are
   used everywhere (Collection grid, badge-briefing card, etc.) — scoped to
   .tgv-scene-tier-grid only, so just the Achievement-details dialog's tier
   cards (Soul/Mind/Reality/.../Power) lose them. */
.tgv-scene-tier-grid .tgv-scene-card{
  background:none;
  border:0;
}
.tgv-scene-tier-grid .tgv-scene-badge{
  border-top:0;
  padding:0;
  margin:auto;
}
/* Overrides the shared .tgv-scene-tier-grid img fixed 100px (hq.css line
   151) so the badge art fills its card. */
.tgv-scene-tier-grid img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
/* The "0 / 5" count sits beside the progress bar, right-aligned, instead of
   stacked below it (.tgv-scene-progress-row wraps both, hq-app.js). */
.tgv-scene-progress-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.tgv-scene-progress-row .tgv-scene-progress{
  flex:1;
}
.tgv-scene-progress-row p{
  margin:0;
  flex-shrink:0;
}
/* Same (0,3,1)-specificity trick as the "Reach N" line below (the
   readability pass's :is(...) at line 499 outweighs a plain
   .tgv-scene-progress-row p otherwise) — shrinks the "0 / 5" count, same
   as the Collection grid's .tgv-scene-xp-row small (hq.css line 1090). */
.tgv-scene .tgv-scene-tier-grid .tgv-scene-progress-row p{
  font-size:var(--fit-small);
}
@media(max-width:1000px){
  .tgv-scene .tgv-scene-tier-grid .tgv-scene-progress-row p{
    font-size:max(11px,var(--fit-small));
  }
}
/* The "Reach N premium screenings" line — fixed 14px (.tgv-scene-card p,
   hq.css line 124) swapped for the same responsive token small labels
   elsewhere already use, so it shrinks on a small/short mobile screen.
   > scopes this to the direct-child line only, not the progress-row's own
   count paragraph. The readability pass's :is(...,.tgv-scene-card p,...)
   (line 499) takes its specificity from the LIST's most specific argument
   (.tgv-scene-profile .tgv-scene-summary span, 2 classes+1 type) regardless
   of which branch matches — so beating it here needs the same (0,3,1)
   weight (.tgv-scene added as a 3rd class), not just more nesting. */
.tgv-scene .tgv-scene-tier-grid .tgv-scene-card>p{
  font-size:var(--fit-label);
}
/* "5 more to unlock" — no existing rule sizes this strong, so it was
   inheriting the page's base font-size; sized to the next token up from
   --fit-small for a bit more presence. */
.tgv-scene-tier-grid .tgv-scene-card strong{
  font-size:var(--fit-label);
}
/* TIER GRID CARD — NO BORDER/BACKGROUND END */


/* COLUMNS TILE BORDER */
/* .tgv-scene-tile inside .tgv-scene-columns (the Collection / Quests links on
   the Hero Profile page) gets the same treatment — top-left/bottom-right cut,
   low-opacity red fill, red ring following the cut — in place of Layer 2's
   blue-grey gradient + dark-red border. Same technique/values as SUMMARY BOX
   BORDER above and JOURNEY TILE below; scoped to .tgv-scene-columns so the
   HQ-links tiles (which have their own look) are untouched. */
.tgv-scene-columns .tgv-scene-tile{
  --cut:clamp(8px,calc(var(--hq-u)*1.3),24px);
  position:relative;
  border:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(2px);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.tgv-scene-columns .tgv-scene-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring), calc(100% - var(--hq-ring)) var(--hq-ring), calc(100% - var(--hq-ring)) calc(100% - var(--cut) - var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--hq-ring)), var(--hq-ring) calc(var(--cut) + var(--hq-ring)*.4142), calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring));
}
.tgv-scene-columns .tgv-scene-tile:hover{
  background:rgba(0,0,0,.7);
}
/* COLUMNS TILE BORDER END */


/* BRAND RED CONSISTENCY */
/* A handful of reds in the designer's layers are visibly off from the theme's
   actual brand red (CLAUDE.md — Brand Colors: --primary #ff0013) — close
   enough to read as "red" but a different shade, left over from the
   designer's own standalone palette. Fixed only where it's genuinely live on
   screen (checked against hq-app.js's markup and the cascade — most
   near-brand-red hexes in this file are already dead, overridden by a later,
   more specific rule that uses var(--primary) correctly) and where the color
   isn't a token deliberately shared with another component (the dialog's
   #ce4358/#11080e match the Complete Profile popup's --tier-line/--tier-card
   in the template's own <style> block on purpose — left alone). */

/* --tgv-line: the generic card/tab/panel border token (Layer 1/2) — still
   live on the header icon/account pill, the footer's decorative line, the
   empty-quest-board dashed box and two of .tgv-scene-upcoming's sides. Was a
   pinker red than --primary; now the same hue at the same alpha. */
.tgv-scene{--tgv-line:rgba(255,0,19,.55)}

/* Every XP / badge / agent-rank progress bar (progress(), hq-app.js) fades
   from --primary to an off-brand pink (#ff4e69, Layer 2) — flattened to a
   single brand-red fill. */
.tgv-scene-progress span{background:var(--primary)}

/* The shared Trivia widget's own button class (.tgv-trivia .tgv-btn, Daily
   Hero Trivia / quizzes) — not covered by the WELCOME BUTTON / SCENE BUTTON
   ring rules below (those only target .tgv-scene-button), so its Layer 2
   border color was never corrected to the token. */
.tgv-scene .tgv-trivia .tgv-btn{border-color:var(--primary)}
/* BRAND RED CONSISTENCY END */


/* UPPERCASE */
/* Every piece of text inside the HQ is uppercase — headings, copy, buttons,
   form fields (what a member types is shown uppercase too; the saved value is
   unchanged) and the shared Trivia widget. !important so the older per-element
   text-transform rules above can't turn it back off. */
.tgv-scene,
.tgv-scene *,
.tgv-scene *::before,
.tgv-scene *::after{text-transform:uppercase !important}
/* UPPERCASE END */


/* JOURNEY TILE */
/* "Start your journey" now uses the Hero Profile button art (see the
   .tgv-scene-hq-journey rule in the HQ home block above) instead of this
   cut-corner red-glow pill — no overlay styling needed here any more. */
/* JOURNEY TILE END */


/* AGENT CARD */
/* The agent card (rank, XP, quests, badges) and the HQ quest panel share one
   look: see-through dark fill, bottom-right corner cut, and a 2px red border
   that follows the cut (ring in ::before, same technique as WELCOME BUTTON;
   the inner diagonal sits cut + .83px along each edge). The agent card's
   height is --hq-agent (top of this file). The quest panel does not use the
   hoh-quest-frame.svg art any more. */
.tgv-scene .tgv-scene-agent,
.tgv-scene .tgv-scene-hq-quests{
  --cut:14px;
  background:rgba(14,3,8,.88);
  border:0;
  border-radius:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.tgv-scene .tgv-scene-agent::before,
.tgv-scene .tgv-scene-hq-quests::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 0,
    var(--hq-ring) var(--hq-ring), calc(100% - var(--hq-ring)) var(--hq-ring), calc(100% - var(--hq-ring)) calc(100% - var(--cut) - var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--hq-ring)), var(--hq-ring) var(--hq-ring));
}
/* AGENT CARD END */


/* PORTRAIT HOST */
/* hq-landscape.js: on a portrait phone the HQ runs inside this iframe, turned
   90 degrees clockwise, so the page inside sees a true landscape viewport.
   The host is sized with the screen's width and height swapped, then moved
   back on screen. Its padding is the notch / home-bar safe area, remapped to
   the turned edges: content top = screen right, content right = screen
   bottom, content bottom = screen left, content left = screen top. */
.tgv-hq-host{
  position:fixed;
  top:0;
  left:0;
  z-index:2147483000;
  width:100dvh;
  height:100dvw;
  box-sizing:border-box;
  padding:env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) env(safe-area-inset-top);
  background:#080e10;
  transform-origin:0 0;
  transform:translateX(100dvw) rotate(90deg);
}
.tgv-hq-host-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#080e10;
}
/* The outer page behind the host never scrolls, and is the scene's dark, so
   any sliver the host doesn't reach is never the browser's white. */
html.tgv-hq-hosted,
html.tgv-hq-hosted body{
  overflow:hidden;
  background:#080e10;
}
/* PORTRAIT HOST END */


/* FAKE KEYBOARD */
/* hq-app.js: inside that rotated iframe the real on-screen keyboard never
   lines up with the page (see "PORTRAIT HOST" above), so every "Hero
   name" field opens this one instead. Appended either inside the open
   <dialog> (its own top-layer subtree) or as a direct child of the scene
   root (position:fixed, same trick .tgv-scene-rotate uses) — either way
   it is ordinary scene content, so it paints correctly rotated. */
.tgv-scene-keyboard{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background:rgba(8,19,21,.97);
  border-top:1px solid var(--primary);
}
.tgv-scene-keyboard-row{
  display:flex;
  justify-content:center;
  gap:clamp(4px,.6vw,8px);
}
.tgv-scene-keyboard-key{
  flex:1;
  max-width:60px;
  min-height:clamp(34px,4.2vh,46px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid #65868c;
  border-radius:4px;
  color:#fff;
  font:600 clamp(13px,1.4vw,16px) Poppins,Arial,sans-serif;
  text-transform:uppercase;
}
.tgv-scene-keyboard-key:active,
.tgv-scene-keyboard-key.is-active{
  background:var(--primary);
  border-color:var(--primary);
}
.tgv-scene-keyboard-key--wide{
  flex:1.6;
}
.tgv-scene-keyboard-key--space{
  flex:6;
}
.tgv-scene-keyboard-key--done{
  flex:2;
  background:rgba(208,0,24,.8);
  border-color:var(--primary);
}
/* FAKE KEYBOARD END */


/* FAKE DROPDOWN */
/* hq-app.js: same rotated-iframe problem as "FAKE KEYBOARD" above — a
   native <select>'s own picker is OS-level chrome, not scene content,
   so it is just as liable to come up out of step with the rotated page.
   Every select.tgv-scene-input gets .tgv-scene-select-trigger (a button
   reusing .tgv-scene-input's own sizing/border/background, so it looks
   exactly like the field it replaces) plus a small anchored menu — a
   plain custom listbox, not any UI library — positioned by hq-app.js
   from the trigger's own getBoundingClientRect(), same idea as
   Headless UI / Radix's Listbox. The <select> itself stays in the DOM,
   only visually hidden, so it is still what the submit handler's
   FormData reads. */
.tgv-scene-select-native-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.tgv-scene-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  appearance:none;
}
.tgv-scene-select-trigger-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tgv-scene-select-trigger-arrow{
  flex-shrink:0;
  color:var(--tgv-cyan);
  font-size:11px;
  transition:transform .14s ease;
}
.tgv-scene-select-trigger[aria-expanded="true"] .tgv-scene-select-trigger-arrow{
  transform:rotate(180deg);
}
/* Positioned entirely by inline style (top/left/width) in hq-app.js, set
   from the trigger's own getBoundingClientRect() — position:fixed is
   viewport-relative here exactly like .tgv-scene-rotate's overlay (no
   transformed ancestor sits between this and the viewport). */
.tgv-scene-select-menu{
  position:fixed;
  z-index:100;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:6px;
  background:#0c161a;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  box-shadow:0 14px 32px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(-6px) scale(.98);
  transform-origin:top center;
  transition:opacity .14s ease,transform .14s ease;
  pointer-events:none;
}
.tgv-scene-select-menu[data-placement="above"]{
  transform-origin:bottom center;
  transform:translateY(6px) scale(.98);
}
.tgv-scene-select-menu.is-open{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.tgv-scene-select-option{
  flex-shrink:0;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  background:transparent;
  border:0;
  border-radius:6px;
  color:#e7e7e7;
  font:14px Poppins,Arial,sans-serif;
  text-align:left;
}
.tgv-scene-select-option:hover,
.tgv-scene-select-option:focus-visible{
  background:rgba(255,255,255,.1);
}
.tgv-scene-select-option.is-active{
  color:#fff;
  font-weight:600;
}
.tgv-scene-select-option.is-active::after{
  content:"\2713";
  flex-shrink:0;
  color:var(--primary);
}
/* FAKE DROPDOWN END */


/* SEASON BUTTONS */
/* Each Season in the switcher: top-left and bottom-right corners cut, with a
   red border that follows both cuts (same technique as JOURNEY TILE: the ring
   is a ::before, because a normal border would be sliced off along the
   diagonals). Thickness is --hq-ring, so it thins out with the screen. The
   Season's photo (Tier Builder > Season > Photo, hq-app.js sets --season-art)
   is the button's background under a dark wash so the name stays readable;
   the selected Season adds a very low opacity red tint (same rgba(208,0,24,…)
   red used elsewhere in this file) on top of a lighter wash so it reads as
   both brighter and selected. No photo set = the plain dark button. */
.tgv-scene .tgv-scene-seasons .tgv-scene-tab{
  --cut:clamp(6px,calc(var(--hq-u)*.9),14px);
  position:relative;
  border:0;
  border-radius:0;
  color:#fff;
  font-weight:600;
  text-align:left;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
  background-color:rgba(7,15,25,.96);
  background-image:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),var(--season-art,none);
  background-size:cover;
  background-position:center;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.tgv-scene .tgv-scene-seasons .tgv-scene-tab::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--primary);
  pointer-events:none;
  clip-path:polygon(evenodd,
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring), calc(100% - var(--hq-ring)) var(--hq-ring), calc(100% - var(--hq-ring)) calc(100% - var(--cut) - var(--hq-ring)*.4142), calc(100% - var(--cut) - var(--hq-ring)*.4142) calc(100% - var(--hq-ring)), var(--hq-ring) calc(100% - var(--hq-ring)), var(--hq-ring) calc(var(--cut) + var(--hq-ring)*.4142), calc(var(--cut) + var(--hq-ring)*.4142) var(--hq-ring));
}
.tgv-scene .tgv-scene-seasons .tgv-scene-tab:hover{
  background-image:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),var(--season-art,none);
}
.tgv-scene .tgv-scene-seasons .tgv-scene-tab[aria-pressed=true]{
  background-image:linear-gradient(rgba(208,0,24,.15),rgba(208,0,24,.15)),linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),var(--season-art,none);
  filter:brightness(1.25);
}
/* The clip-path would cut a normal focus outline off, so the ring itself turns white. */
.tgv-scene .tgv-scene-seasons .tgv-scene-tab:focus-visible{outline:0}
.tgv-scene .tgv-scene-seasons .tgv-scene-tab:focus-visible::before{background:#fff}
/* A Season that hasn't started (hq-app.js adds disabled + .is-locked): greyed
   out, can't be pressed, and the hover wash stays off. Its opening month sits
   under the name as a small <small> line (the size comes from the page-level
   tab small rule). */
.tgv-scene .tgv-scene-seasons .tgv-scene-tab small{display:block;font-weight:400;opacity:.85}
.tgv-scene .tgv-scene-seasons .tgv-scene-tab:disabled,
.tgv-scene .tgv-scene-seasons .tgv-scene-tab:disabled:hover{
  background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),var(--season-art,none);
  filter:grayscale(1) brightness(.75);
  cursor:not-allowed;
}
/* Four to a row across the full width, each button 320 : 130. The page-level
   tab rule ("Every other screen: one screen, no page scroll") gives tabs a
   min-height, which would beat the aspect-ratio, so this repeats its
   specificity and comes later. */
.tgv-scene .tgv-scene-seasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-page .tgv-scene-seasons .tgv-scene-tab{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:320/130;
  overflow:hidden;
}
/* Season name: same scale as the mission card title, so a Season reads at the
   same weight as a Quest. The page-level tab rule's selector uses a plain
   [data-page=missions] attribute match (2 points for that compound), but its
   min-width:1001px floor-raiser copy further down uses
   [data-page]:is([data-page=missions],[data-page=collection]) instead — the
   extra :is() adds a 3rd point to that same compound, so the floor-raiser is
   actually MORE specific than a naive "repeat the class once" fix accounts
   for (a single ".tgv-scene-tab.tgv-scene-tab" repeat only ties it at 6-vs-6,
   and the floor-raiser then wins on desktop by coming later — confirmed
   live). Repeating the class a 2nd time (3 total) pushes this to 7, strictly
   above the floor-raiser's 6, so it wins regardless of file order. The
   button's own height is aspect-ratio driven, not content-driven (see rule
   above), so there is room for the larger text without a min-height change. */
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-seasons .tgv-scene-tab.tgv-scene-tab.tgv-scene-tab{
  font-family:'Bebas Neue',var(--tgv-display),'Arial Narrow',sans-serif;
  font-weight:400;
  font-size:clamp(14px,calc(var(--hq-u)*2.6),50px);
}
/* The "Oct 2026" opening-month line inherits font-family from the button
   above (font-family is inherited, and small has no font-family rule of its
   own) — without this it would render in Bebas Neue too. Pin it back to the
   theme's global body font (CLAUDE.md — Typography), matching the literal
   Poppins fallback already used for .tgv-scene-card-title elsewhere in this
   file (line ~1352). */
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-seasons .tgv-scene-tab small{font-family:Poppins,Arial,sans-serif}
/* SEASON BUTTONS END */


/* SEASON SUMMARY */
/* The box above a Season's quests: its name is Bebas Neue, large and red; the
   Season's header photo (Tier Builder > Season > Header photo, hq-app.js sets
   --summary-art) sits behind it, darker on the left where the text is. The
   ".tgv-scene-heading.tgv-scene-heading" repetition is deliberate, not a typo:
   the page-level summary-heading rule (above) is re-matched and its floor
   raised to 16px again later, inside the FIT ALL SCREENS min-width:1001px
   block further down this file — same selector, so same specificity as this
   rule, and later in the file, so it was silently winning on any desktop
   viewport and collapsing this heading back down to ~32px. Repeating the
   class gives this rule one extra specificity point so it always wins,
   regardless of where either rule sits in the file. */
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-summary .tgv-scene-chapter-copy .tgv-scene-heading.tgv-scene-heading{
  font-family:'Bebas Neue',var(--tgv-display),'Arial Narrow',sans-serif;
  font-weight:400;
  font-size:clamp(22px,calc(var(--hq-u)*5),100px);
  line-height:1;
  color:var(--primary);
}
/* More room above and below the name + subtitle than the page-level summary
   rule gives (that one is tuned for the one-screen fit). The Daily card is
   left as it was. */
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-page .tgv-scene-summary:not(.tgv-scene-daily-card){
  padding-block:clamp(20px,calc(var(--hq-u)*2.8),56px);
}
.tgv-scene .tgv-scene-summary--art{
  background-image:linear-gradient(90deg,rgba(6,17,25,.75) 0%,rgba(6,17,25,.35) 55%,rgba(6,17,25,.05) 100%),var(--summary-art);
  background-size:cover;
  background-position:center;
}
.tgv-scene .tgv-scene-summary--art .tgv-scene-hint{text-shadow:0 1px 3px rgba(0,0,0,.85)}
/* SEASON SUMMARY END */


/* QUEST GRID */
/* The Season's quest cards: three across. Same specificity as the page-level
   grid rule (which auto-fills by width), so it wins by coming later. The
   Collection page has its own grid and is not touched. */
.tgv-scene[data-page=missions] .tgv-scene-content .tgv-scene-page .tgv-scene-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* QUEST GRID END */


/* MISSION CARDS */
/* A quest card is one button (hq-app.js missionCard): pressing anywhere on it
   opens the quest, so there is no separate View / Locked / Completed button
   inside. The title is Bebas Neue in red, and a white line sits between the
   description and the XP, which is pinned to the bottom so the line lines up
   across a row of cards. */
.tgv-scene .tgv-scene-mission{
  width:100%;
  aspect-ratio:500/258;
  justify-content:flex-start;
  text-align:left;
  color:inherit;
  background-color:transparent;
  background-image:var(--hq-art-mission-btn);
  background-size:cover;
  background-position:center;
  border:none;
}
.tgv-scene .tgv-scene-mission .tgv-scene-card-title{
  font-family:'Bebas Neue',var(--tgv-display),'Arial Narrow',sans-serif;
  font-weight:400;
  color:var(--primary);
}
.tgv-scene .tgv-scene-mission .tgv-scene-xp{
  margin-top:auto;
  padding-top:clamp(8px,calc(var(--hq-u)*1.2),24px);
  border-top:1px solid #fff;
}
/* MISSION CARDS END */


/* NEW HERO UNLOCKED */
/* The dialog hq-app.js opens when a Reward-only hero is earned (unlockDialog):
   one hero's art and name over the Switch / Later buttons, centred. Several
   unlocks at once reuse the pick-screen hero list instead. */
.tgv-scene .tgv-scene-unlock{
  display:grid;
  justify-items:center;
  gap:clamp(8px,calc(var(--hq-u)*1.2),16px);
  text-align:center;
}
.tgv-scene .tgv-scene-unlock-art{
  display:block;
  width:auto;
  max-width:100%;
  max-height:clamp(150px,calc(var(--hq-u)*28),320px);
  object-fit:contain;
}
.tgv-scene .tgv-scene-unlock .tgv-scene-button{min-width:min(100%,260px)}
/* NEW HERO UNLOCKED END */


/* DESKTOP MINIMUM TEXT SIZE */
/* The "fit everything without scrolling" system above (--hq-u, --fit-*) deliberately
   has a "phone minimum" at the bottom of most of its clamps (per the FIT ALL
   SCREENS comment) — but --hq-u is driven purely by viewport size, not device
   type, so a desktop browser that isn't full-width/full-height can still hit
   those phone minimums (as low as 8-14px), which reads too small on an actual
   monitor. min-width:1001px (this file's own desktop threshold — see the
   max-width:700px / max-width:1000px breakpoints above) raises every such
   floor to 16px, without touching the mobile breakpoints or the clamps' own
   upper end. Each rule below repeats a selector already above, verbatim, so
   it wins by appearing later at equal specificity — no !important needed.
   Left untouched on purpose: decorative icon/symbol glyphs (quest/choice
   symbols, the lock icon), and the QUEST ROW FIT @container rules (a crowded
   HQ quest panel shrinking text to fit a short row is a different, narrower
   problem than general readability). */
@media(min-width:1001px){
  /* Most of the quest board / collection / profile / onboarding text already
     goes through these three shared custom properties — raising them here
     covers every rule that reads var(--fit-copy)/var(--fit-label)/var(--fit-small)
     in one place. --fit-title and --fit-heading are left alone: their own
     minimums (24px/18px) are already above the floor. */
  .tgv-scene{
    --fit-copy:max(16px,clamp(12px,calc(var(--hq-u)*1.4),28px));
    --fit-label:max(16px,clamp(11px,calc(var(--hq-u)*1.15),22px));
    --fit-small:max(16px,clamp(9px,calc(var(--hq-u)*.9),17px));
  }

  /* Readability pass catch-all (Layer 4): already a flat 16/14px, so the 14px
     half just needs raising — eyebrow labels, step numbers, the mode badge,
     the footer line. */
  .tgv-scene :is(.tgv-scene-eyebrow,.tgv-scene-steps li,.tgv-scene-mode,.tgv-scene-footer){font-size:16px}
  .tgv-scene .tgv-trivia-progress,.tgv-scene .tgv-trivia-meta{font-size:16px}

  /* Header: account label, agent rank card. */
  .tgv-scene .tgv-scene-icon,.tgv-scene .tgv-scene-account{font-size:max(16px,clamp(12px,calc(var(--hq-u)*.85),16px))}
  .tgv-scene .tgv-scene-header .tgv-scene-agent-rank small{font-size:max(16px,clamp(8px,calc(var(--hq-u)*.7),14px))}
  .tgv-scene .tgv-scene-header .tgv-scene-agent-rank strong{font-size:max(16px,clamp(14px,calc(var(--hq-u)*1.5),28px))}
  .tgv-scene .tgv-scene-header .tgv-scene-agent-stats{font-size:max(16px,clamp(9px,calc(var(--hq-u)*.8),15px))}
  .tgv-scene .tgv-scene-footer{font-size:max(16px,clamp(10px,calc(var(--hq-u)*.7),14px))}

  /* HQ home: quest heading date, quest card title/subtitle, quest CTA, the
     three link tiles, the movie slider's "Hero movies" label. */
  .tgv-scene[data-page=home] .tgv-scene-hq-quest-heading>small{font-size:max(16px,clamp(9px,calc(var(--hq-u)*.75),14px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-card-title{font-size:max(16px,clamp(13px,calc(var(--hq-u)*1.35),26px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-quests .tgv-scene-quest-text small{font-size:max(16px,clamp(10px,calc(var(--hq-u)*.95),16px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-quests>.tgv-scene-button{font-size:max(16px,clamp(11px,calc(var(--hq-u)*.85),16px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-links .tgv-scene-card-title{font-size:max(16px,clamp(14px,calc(var(--hq-u)*1.9),36px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-links small{font-size:max(16px,clamp(10px,calc(var(--hq-u)*.9),16px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-links .tgv-scene-hq-journey .tgv-scene-card-title{font-size:max(16px,clamp(16px,calc(var(--hq-u)*2.1),36px))}
  .tgv-scene[data-page=home] .tgv-scene-hq-poster>span,
  .tgv-scene[data-page=home] .tgv-scene-hq-movies-row>span{font-size:max(16px,clamp(14px,calc(var(--hq-u)*1.5),30px))}

  /* Onboarding: hint, eyebrow, the Continue button, the hero-pick name tag,
     the preview screen's rank eyebrow. */
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hint{font-size:max(16px,clamp(10px,var(--hq-u),19px))}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-eyebrow{font-size:max(16px,clamp(11px,calc(var(--hq-u)*1.3),26px))}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-button{font-size:max(16px,clamp(11px,calc(var(--hq-u)*1.15),22px))}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-hero-choice span{font-size:max(16px,clamp(11px,calc(var(--hq-u)*1.7),34px))}
  .tgv-scene[data-page=setup][data-intro=true] .tgv-scene-content .tgv-scene-preview-copy>.tgv-scene-eyebrow{font-size:max(16px,clamp(12px,calc(var(--hq-u)*1.8),34px))}

  /* Quest board / collection / profile: the shared centre-screen button, the
     page head's player-name tag, chapter/season tabs, the chapter summary
     heading, quest card title and XP tag, a badge card's title, the profile
     page's milestone text, tile title and activity row. */
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection],[data-page=profile]) .tgv-scene-content .tgv-scene-button{font-size:max(16px,clamp(10px,calc(var(--hq-u)*1.05),19px))}
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-page-head .tgv-scene-status-name{font-size:max(16px,clamp(14px,calc(var(--hq-u)*1.6),30px))}
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-tab,
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-seasons .tgv-scene-tab{font-size:max(16px,clamp(10px,var(--hq-u),18px))}
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary .tgv-scene-heading{font-size:max(16px,clamp(14px,calc(var(--hq-u)*1.6),32px))}
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary span,
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-summary .tgv-scene-hint{font-size:max(16px,clamp(10px,var(--hq-u),19px))}
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-mission .tgv-scene-card-title{font-size:max(16px,clamp(14px,calc(var(--hq-u)*2.6),50px))}
  .tgv-scene[data-page]:is([data-page=missions],[data-page=collection]) .tgv-scene-content .tgv-scene-xp{font-size:max(16px,clamp(13px,calc(var(--hq-u)*1.2),22px))}
  .tgv-scene[data-page=collection] .tgv-scene-content .tgv-scene-collection .tgv-scene-badge .tgv-scene-card-title{font-size:max(18px,clamp(18px,calc(var(--hq-u)*2),38px))}
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-summary span{font-size:max(16px,clamp(10px,var(--hq-u),19px))}
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-profile .tgv-scene-tile .tgv-scene-card-title{font-size:max(16px,clamp(14px,calc(var(--hq-u)*1.8),34px))}
  .tgv-scene[data-page=profile] .tgv-scene-content .tgv-scene-activity-row{font-size:max(16px,clamp(10px,var(--hq-u),18px))}
}
/* DESKTOP MINIMUM TEXT SIZE END */