/* CB-0368 v21. Role-based size source, loaded after legacy section styles.
   See production/type-scale-v21 and the measured official VALORANT reference. */
:root {
  --type-display: clamp(3.5rem, 6.2vw, 6rem);
  --type-section: clamp(2.75rem, 5vw, 4.5rem);
  --type-feature: clamp(2rem, 3.5vw, 3rem);
  --type-card: 1.75rem;
  --type-lead: 1.25rem;
  --type-body: 1.125rem;
  --type-label: 1rem;
  --type-caption: .875rem;
  --type-nav: 1rem;
  --type-button: 1.125rem;
  --type-micro: .75rem;
  --type-cue: clamp(1.5rem, 2.4vw, 2.25rem);
  --line-body: 1.56;
  --line-heading: 1.16;
}
body { font-size: var(--type-body); }
/* Size the text, not the page: the film, wordmark and music clocks keep their bounds. */
.game-site p { font-size:var(--type-body);line-height:var(--line-body); }
.game-site h2,.game-site h3 { word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance; }
html[lang] .overview-copy h2 {font-size:var(--type-display);line-height:var(--line-heading);margin-bottom:28px;}
.game-site .section-heading h2,.game-site .fever-story h2 {font-size:var(--type-section);line-height:1.18;}
.game-site .mode-copy h3,.game-site .journey-copy h3,.game-site .closing-stage h2 {font-size:var(--type-feature);line-height:1.25;}
.game-site .play-reading h3,.game-site .play-instructions h3,.game-site .making-notes h3,.game-site .mode-entries h3 {font-size:var(--type-card);line-height:1.35;}
.overview-copy>p:not(.game-tag):not(.availability),.game-site .section-heading>p {font-size:var(--type-lead);line-height:1.6;}
.game-site .play-reading p,.game-site .making-notes p,.game-site .mode-copy p,.game-site .journey-copy p,.game-site .fever-story .story-copy>p,.game-site .play-instructions p,.game-site .mode-entries p,.faq-list p {font-size:var(--type-body);line-height:var(--line-body);}
.game-site .game-tag,.game-site .mode-copy .mode-input,.game-site .journey-flow li,.game-site .making-notes details,.game-site .try-strip span {font-size:var(--type-label);line-height:1.6;}
.game-site .game-promises strong,.game-site .try-strip strong {font-size:1.375rem;line-height:1.35;}
.game-site .game-promises p>span {font-size:var(--type-body);line-height:var(--line-body);}
.game-site .screenshot-note,.game-site .shot-disclosure,.game-site .journey-copy .journey-small,.actual-screen figcaption,.site-footer,.site-footer p,.site-footer small {font-size:var(--type-caption);line-height:1.65;}
.overview-copy .availability {font-size:var(--type-caption)!important;line-height:1.65!important;}
.actual-screen figcaption {position:static;inset:auto;flex-wrap:wrap;row-gap:4px;}
.game-site .faq-list summary {font-size:1.375rem;line-height:1.45;padding-block:28px;}
.game-site .faq-list p {max-width:66ch;}
.game-site .text-link,.sun-button,.blue-button,.closing-stage .sun-button,.mode-tabs button {font-size:var(--type-button);line-height:1.4;}
.sun-button,.blue-button,.closing-stage .sun-button {min-height:56px;padding:16px 26px;white-space:normal;text-align:center;}
.mode-tabs button {min-height:52px;padding:12px 26px;}
.play-reading h3 span {font-size:var(--type-label);width:34px;height:34px;}
.making-visual>span {font-size:var(--type-card);line-height:1.35;}
.section-heading {max-width:1040px;margin-inline:auto;margin-bottom:44px;}
.real-play .section-heading {max-width:1040px;}
.site-section {padding-block:100px;}
.gameplay-modes.site-section {padding-block:84px;}
.game-overview,.overview-inner {min-height:720px;}
.overview-copy {width:57%;padding-block:24px;}
.overview-inner {padding-block:64px;}
.overview-wash {background:linear-gradient(90deg,#eaf7fff5 0%,#eaf7ffe8 29%,#eaf7ff99 48%,transparent 72%);}
.overview-copy>p:not(.game-tag):not(.availability) {max-width:52ch;}
.play-reading,.making-layout,.mode-copy,.journey-layout {column-gap:48px;}
.site-footer {flex-wrap:wrap;}
/* The top row stays readable; use a second navigation row before it gets crowded. */
header.site-header {gap:24px;}
.site-links,html[lang=en] .site-links {font-size:var(--type-nav);line-height:1.5;gap:clamp(16px,1.6vw,28px);}
#controls .site-links {font-size:var(--type-nav);}
html[lang] .gameplay-modes .section-heading h2 span {white-space:normal;}
.site-logo .brand {width:148px;}
.site-logo>img {width:34px;height:34px;}
.site-logo .cinema-subtitle,body.cinema-chrome .site-logo .cinema-subtitle {font-size:var(--type-micro);line-height:1.2;left:40px;top:calc(100% + 2px);letter-spacing:.02em;}
.header-actions {gap:12px;}
.header-play,.performance-settings>summary,.language-switch {font-size:var(--type-nav);line-height:1.4;}
.header-play {gap:12px;min-height:44px;padding:10px 18px;}
.language-switch {min-height:44px;padding:8px 12px;}
.settings-panel {min-width:220px;}
.settings-panel button {font-size:var(--type-nav);line-height:1.5;min-height:48px;}
/* Film overlays are headings, controls, play instructions, or quiet decoration. */
#scene-copy.cinema-headline {width:520px;max-width:48%;}
#scene-copy.cinema-headline h1,html[lang=en] .cinema-headline h1 {font-size:var(--type-section);line-height:1.1;white-space:normal;}
html[lang] .scene-tagline {font-size:var(--type-feature);line-height:1.2;}
.cinema-actions {flex-wrap:wrap;gap:12px 20px;}
.cinema-actions button,.cinema-actions a,.cinema-join a {font-size:var(--type-button);line-height:1.4;min-height:48px;}
.cinema-join a {padding:12px 28px;}
.cinema-footer {font-size:var(--type-caption);line-height:1.4;}
.cinema-micro,.scene-tagline small {font-size:var(--type-micro);line-height:1.5;letter-spacing:.3em;}
.continue-hint,.scene-resume {font-size:var(--type-cue);line-height:1.3;letter-spacing:.06em;}
html[lang] .freeplay-caption {font-size:var(--type-body);line-height:1.6;white-space:normal;width:min(88%,760px);}
.freeplay-caption small,.continue-hint.playing-hint {font-size:var(--type-caption);line-height:1.5;}
.media-notice,.sound-error,#fallback p {font-size:var(--type-body);line-height:1.6;}
@media(max-width:1100px) {
  :root {--site-header-height:116px;}
  header.site-header {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:68px 48px;gap:0 20px;height:116px;min-height:116px;padding:0 24px;}
  .site-links,html[lang=en] .site-links {grid-row:2;grid-column:1/-1;justify-content:space-between;overflow-x:auto;scrollbar-width:thin;gap:24px;width:100%;}
  .site-links a {padding:12px 0;min-height:46px;flex-shrink:0;}
  .site-links a[aria-current]::after {bottom:3px;}
  .header-actions {grid-row:1;grid-column:2;}
  .performance-settings>summary {font-size:var(--type-nav);}
  .settings-panel {top:48px;}
}
@media(max-width:760px) {
  :root {
    --type-display:clamp(2.625rem,10.8vw,3rem);
    --type-section:2.5rem;
    --type-feature:2rem;
    --type-card:1.5rem;
    --type-lead:1.125rem;
    --type-body:1rem;
    --type-label:.875rem;
    --type-nav:.875rem;
    --type-button:1rem;
    --type-micro:.75rem;
    --type-cue:1.5rem;
    --line-body:1.625;
  }
  header.site-header {padding-inline:18px;gap:0 12px;}
  .site-logo .brand {width:112px;}
  .site-logo>img {width:28px;height:28px;}
  .site-logo .cinema-subtitle,body.cinema-chrome .site-logo .cinema-subtitle {left:34px;font-size:var(--type-micro);}
  .header-actions {gap:8px;}
  .header-play {font-size:var(--type-nav);min-height:42px;gap:6px;padding:10px 12px;}
  .language-switch {font-size:var(--type-nav);min-height:42px;padding:8px;}
  .performance-settings>summary {min-height:42px;}
  .site-links,html[lang=en] .site-links {font-size:var(--type-nav);gap:22px;}
  .game-overview,.overview-inner {min-height:0;}
  .overview-inner {display:flex;flex-direction:column;align-items:stretch;padding:48px 7% 0;}
  .overview-copy {width:100%;padding:0;}
  .overview-copy h2 {margin-bottom:24px;}
  .overview-copy>p:not(.game-tag):not(.availability) br {display:none;}
  .overview-ctas {flex-wrap:wrap;gap:20px;margin-top:28px;}
  .overview-cast {position:relative;inset:auto;width:100%;height:370px;margin-top:26px;flex-shrink:0;}
  .cast-boss {width:72%;right:-7%;bottom:7%;}
  .cast-hero {width:68%;right:14%;bottom:-1%;}
  .cast-friend {width:37%;right:56%;bottom:31%;}
  .cast-sound {bottom:auto;top:4%;right:38%;}
  .overview-wash {background:linear-gradient(#eaf7fff7,#eaf7ffdf 48%,#eaf7ff00 80%);}
  .game-site .game-promises strong,.game-site .try-strip strong {font-size:1.25rem;}
  .site-section,.gameplay-modes.site-section,.real-play,.fever-story {padding-block:64px;}
  .section-heading {margin-bottom:32px;}
  .game-site .faq-list summary {font-size:1.25rem;}
  .mode-tabs {gap:10px;}
  .mode-tabs button {font-size:var(--type-button);min-height:48px;padding:12px 18px;}
  .actual-screen figcaption {gap:4px 14px;}
  .closing-stage {flex-wrap:wrap;gap:24px;}
  .closing-stage>div {flex:1 1 220px;}
  .site-footer p {font-size:var(--type-caption);}
  #scene-copy.cinema-headline {max-width:88%;width:350px;}
  .cinema-actions {gap:10px 14px;}
  .cinema-actions button,.cinema-actions a {min-height:44px;}
  .cinema-footer {font-size:var(--type-caption);}
  .scene-tagline small {font-size:var(--type-micro);letter-spacing:.2em;}
  .cinema-micro {font-size:.625rem;}
}
@media(max-width:420px) {
  header.site-header {padding-inline:12px;column-gap:8px;}
  .site-logo .brand {width:100px;}
  .site-logo>img {width:26px;height:26px;}
  .site-logo .cinema-subtitle,body.cinema-chrome .site-logo .cinema-subtitle {left:32px;}
  .header-actions {gap:6px;}
  .header-play {font-size:0;min-width:40px;padding:8px;gap:0;}
  .header-play>span {font-size:20px;}
  .overview-cast {height:320px;}
  .cinema-footer .footer-line {display:none;}
}
@media(min-width:761px) and (max-height:600px) {
  #scene-copy.cinema-headline h1 {font-size:2.75rem;}
  .cinema-actions button,.cinema-actions a,.cinema-join a {font-size:1rem;min-height:40px;}
}
/* v22: portrait poster text follows the contained film, rather than the viewport top. */
@media(orientation:portrait) {
  .stage {--cinema-film-top:calc((100svh - 56.25vw) / 2);}
  #world-title.cinema-wordmark {
    top:max(calc(var(--site-header-height) + 24px),calc(var(--cinema-film-top) - 19.2vw - 16px));
    left:5%;width:90vw;
  }
  .cinema-micro {top:calc(var(--cinema-film-top) + 8px);}
  .cinema-signature {top:calc(var(--cinema-film-top) + 8px);}
  html[lang=en] .cinema-signature {width:112px;}
  .cinema-signature .signature-script {white-space:nowrap;}
  #scene-copy.cinema-headline {top:calc(var(--cinema-film-top) + max(80px,14vw));}
}