/* Reading scale: 16px body, 14px supporting copy, 20px card titles.
   Loaded after the art layers so narrow screens reflow instead of shrinking text. */
:root{--read-body:16px;--read-small:14px;--read-title:20px;--read-icon:58px}
/* The small chirp badge must not inherit the headline's offset double shadow. */
.home h1 b{text-shadow:none;font-size:18px;line-height:1.25;letter-spacing:0;text-align:center;white-space:nowrap;min-width:46px;padding:9px 8px;transform:rotate(6deg)}
.dialog{font-size:var(--read-body);line-height:1.6;background-color:#fff4d9}
.dialog h2,.dialog[data-view] h2{font-size:32px;line-height:1.35}
.dialog .eyebrow{font-size:var(--read-small);line-height:1.6;letter-spacing:2px}
.dialog .sub,.dialog[data-view]>.sub{font-size:var(--read-body);line-height:1.75}
.dialog .footnote{font-size:var(--read-small);line-height:1.7}
.dialog .primary,.dialog .secondary,.dialog-actions a.secondary{font-size:16px;line-height:1.5;min-height:48px}
.dialog-actions{align-items:center}
.loadout-dialog{width:min(1280px,96vw)}
.loadout-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.loadout-groups h3{font-size:22px;line-height:1.4}
.loadout-groups h3 small{font-size:14px;line-height:1.5}
.loadout-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.loadout-card{min-width:0;min-height:224px;padding:16px;line-height:1.5;align-content:start}
.loadout-card .glyph{width:var(--read-icon);height:var(--read-icon);min-width:var(--read-icon);margin:0 12px 10px 0}
.loadout-card strong{font-size:var(--read-title);line-height:1.4;margin:2px 8px 0 0;letter-spacing:0}
.loadout-card em{font-size:var(--read-small);line-height:1.5;margin-top:6px}
.loadout-card p{font-size:var(--read-body);line-height:1.7;margin:12px 0;color:#6d5c43}
.loadout-card small{display:block;font-size:var(--read-small);line-height:1.6;color:#806636}
.pick-check{width:21px;height:21px;line-height:19px;font-size:14px;top:6px;right:6px}
.presets,.presets button{font-size:var(--read-small);line-height:1.5}
.presets button{padding:9px 13px;min-height:40px}
.loadout-combos{padding:13px 16px}
.loadout-combos span{font-size:var(--read-small);line-height:1.8}
.run-settings{gap:16px;padding:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.run-settings label{min-width:0;font-size:var(--read-body);line-height:1.5}
.run-settings select{width:100%;min-width:0;min-height:48px;font-size:var(--read-body);padding:10px}
.run-settings p{font-size:var(--read-body);line-height:1.75}
.run-settings>small,.character-pick small{font-size:var(--read-small);line-height:1.7}
.character-pick select{font-size:16px}
.help-grid strong,.choice strong,.camp-choices .choice strong,.four-choices .choice strong,.codex-list strong{font-size:var(--read-title);line-height:1.45}
.help-grid p,.choice p,.camp-choices .choice p,.four-choices .choice p,.codex-list p,.boss-guide p,.result-build{font-size:var(--read-body);line-height:1.75}
.choice .rank,.choice .mastery,.choice .origin-tag,.choice .category,.camp-choices .choice .category,.four-choices .choice .rank,.four-choices .choice .category{font-size:var(--read-small);line-height:1.6;letter-spacing:0}
.choice .category{position:static;display:block;margin:8px 0}
.camp-choices .choice .category{width:fit-content;margin-left:auto}
.four-choices .choice{grid-template-columns:52px minmax(0,1fr);gap:10px}
.four-choices .choice .glyph,.four-choices .choice[data-art-skill] .glyph{width:52px;height:52px}
.choice[data-art-skill] .glyph{width:70px;height:70px}
.codex-tabs button{font-size:16px;line-height:1.5}
.codex-tabs .codex-skill-icon{width:36px;height:36px}
.codex-list .codex-card-title{grid-template-columns:58px minmax(0,1fr) auto}
.codex-card-icon{width:58px;height:58px}
.codex-list span,.codex-list small,.codex-list em,.codex-list a,.codex-list article>div>span{font-size:var(--read-small);line-height:1.7}
.codex-list article>div>span{max-width:none;white-space:normal}
.route-options strong{font-size:18px;line-height:1.5}
.route-options small,.upgrade-tools>span,.result-stats span,.rank-submit{font-size:var(--read-small);line-height:1.7}
.upgrade-tools .secondary{font-size:16px}
.damage-summary>span{font-size:14px}
.damage-icon{width:42px;height:42px}
.equipment-card p,.gear-services p,.gear-choice span,.gear-note{font-size:16px}
.gear-icon{width:56px;height:56px;font-size:28px}
.rank-login,.rank-empty,.rank-identity,.rank-filter,.rank-filter select{font-size:16px}
.rank-count,.dialog[data-view=leaderboard] .rank-player small{font-size:14px}
.dialog[data-view=leaderboard] .rank-player strong{font-size:18px}
.dialog[data-view=leaderboard] .rank-banner .eyebrow{font-size:14px}
#characterSelect .cs-eyebrow,#characterSelect .cs-state,#characterSelect .cs-credit,#characterSelect .cs-footer span{font-size:14px;line-height:1.6}
#characterSelect .cs-intro,#characterSelect .cs-close,#characterSelect .cs-confirm{font-size:16px;line-height:1.5}
#characterSelect .cs-card strong,#characterSelect .cs-footer strong{font-size:18px;line-height:1.5}
#characterSelect .cs-card strong{overflow-wrap:anywhere}
#characterSelect .cs-portrait{height:140px}

/* Home: keep the hero artwork and headline, enlarge reading text and controls. */
@media(min-width:761px){
 .sitebar,.site-tools button{font-size:14px}
 .edition,.title-mark,.hero-caption,footer,.art-credit{font-size:12px}
 .home .eyebrow,.hero-sticker,.run-meta,.best,.home-bottom b,.ranking-entry .rank-account{font-size:14px}
 .home-bottom small{font-size:12px}
 .intro,.hero-bubble,.home-actions .secondary,.home-actions .gallery-button{font-size:16px}
 .home-actions .primary{font-size:18px}
 .gallery-button img{width:42px;height:42px}
 .home-copy{max-width:590px}
 .home-actions{gap:12px;flex-wrap:wrap}
 .run-meta{flex-wrap:wrap;gap:8px 16px}
 .home-bottom>span{grid-template-rows:24px 22px}
}
/* Two cards per row keep descriptions readable on laptops and tablets. */
@media(max-width:1100px){
 .loadout-groups{grid-template-columns:1fr;gap:10px}
 .loadout-card{min-height:0}
 .codex-list .codex-card-title{grid-template-columns:58px minmax(0,1fr)}
 .codex-card-icon{grid-row:span 2}
 .codex-list .codex-card-title>span{justify-self:start;text-align:left}
}
@media(max-width:760px){
 .overlay{padding:10px}
 .dialog,.dialog[data-view]{padding:16px 10px;max-height:94dvh}
 .dialog h2,.dialog[data-view] h2{font-size:27px}
 .loadout-card{padding:14px}
 .loadout-card .glyph{float:left}
 .dialog-actions .secondary{padding:12px 16px}
 .help-grid>div{padding-left:78px}
 .help-grid>div:before{width:50px;height:50px}
 .codex-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
 .codex-tabs button{font-size:14px}
 .codex-list article{padding:14px 12px}
 .route-options{grid-template-columns:1fr}
 .route-options button:before{height:75px}
 .camp-choices .choice{padding:18px 14px 18px 100px}
 .camp-choices .choice .glyph{width:76px;height:76px}
 .choice{padding:16px}
 .camp-choices .choice{padding-left:100px}
 .choice[data-art-skill] .glyph{position:static;margin-bottom:10px}
 .choices.four-choices{grid-template-columns:1fr}
 .dialog[data-view=leaderboard] .rank-row{padding:14px 20px;gap:10px;flex-wrap:wrap}
 .dialog[data-view=leaderboard] .rank-player strong{font-size:16px}
 .dialog[data-view=leaderboard] .rank-player small{font-size:14px}
 #characterSelect .cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #characterSelect .cs-portrait{height:112px}
 #characterSelect .cs-footer{flex-wrap:wrap}
 #characterSelect .cs-confirm{white-space:normal}
}
@media(max-width:600px){
 .loadout-cards,.run-settings{grid-template-columns:1fr}
 .loadout-groups h3{font-size:20px}
 .loadout-card{min-height:0}
 .run-settings{padding:14px;gap:12px}
 .presets button{padding:8px 10px}
}
@media(max-width:360px){
 #characterSelect .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .codex-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:761px) and (min-height:501px) and (max-height:1000px){
 .home-copy{top:96px}
 .home .eyebrow{margin-bottom:8px}
 .title-mark{margin-bottom:6px}
 .home-copy .poem{line-height:1.6;margin:10px 0 6px}
 .home-copy .intro{line-height:1.65;margin:10px 0}
 .home-actions{margin:12px 0}
 .best{margin-top:10px}
}
