/* Shared player-facing type scale. Keep the battlefield footprint compact. */
html,body{font-size:16px}
button,input,select{font-family:inherit}
kbd{font-size:12px}
.brand{font-size:23px}.quiet{font-size:16px}
.lobby-copy{width:470px;top:20%}
.lobby-copy h1{font-size:58px;line-height:1.3;margin:0 0 24px}
.lobby-copy .intro{font-size:17px;line-height:1.8;letter-spacing:.3px;margin-bottom:26px}
.intro p{margin:0 0 15px}
.selection-label{font-size:14px;margin-bottom:10px}
.selected-hero,.selection-label,.lobby-copy .start-button{width:320px}
.selected-hero{padding:10px}.selected-hero b{font-size:22px}.selected-hero small,.selected-hero i{font-size:14px}
.start-button,.choose-heading .start-button{font-size:21px;padding:17px 22px}
.hero-caption>span{font-size:14px}.hero-caption b{font-size:40px}
.hero-caption small{font-size:16px}.hero-caption:after{font-size:13px}
.lobby-bottom{padding-top:18px}.lobby-bottom span,.prototype-mark{font-size:14px!important}
.bottom-controls{gap:24px}
.choose-heading{width:385px;top:17%}
/* Keep long skill/seat details above the roster; scroll to the deploy button. */
body[data-mode=select] .choose-heading{bottom:calc(4% + 164px);overflow-y:auto;padding-right:10px;scrollbar-width:thin}
.choose-heading .eyebrow{font-size:14px}.back-button{font-size:16px;margin-bottom:22px}
.choose-heading h1{font-size:42px;line-height:1.3;margin:14px 0 18px}
.choose-heading #hero-personality{font-size:17px;line-height:1.8;min-height:60px;margin:0 0 18px;color:#e0e9df}
.choose-heading .selected-skill{width:365px;padding:16px;margin:16px 0 20px}
.selected-skill b{font-size:22px}.selected-skill small{font-size:13px}
.choose-heading .selected-skill p{font-size:17px;line-height:1.7;margin:12px 0}
.selected-skill footer,.choose-heading>small{font-size:14px}
.choose-heading .start-button{width:320px}
.roster-card b{font-size:23px}.hero-number{font-size:12px}
#character-dialog{width:540px}#character-dialog h2{font-size:32px}
#character-kind,#character-skill,#character-skill-note{font-size:17px;line-height:1.8}
#character-dialog dt,#character-dialog dd{font-size:16px}
.character-sheet small{font-size:14px}
.game-brand{font-size:16px}.game-brand small{font-size:12px}.resource{font-size:14px}.resource b{font-size:20px}.top-button{font-size:14px}
.right-tools span,.right-tools small{font-size:12px}.right-tools kbd{font-size:10px}
.console-label,.console-label .text-button{font-size:13px}.hero-vitals b{font-size:18px}
.hero-vitals>div>span#state-label,.hero-stats span,.hero-stats b{font-size:12px}
.health-bar span,.mana-bar span{font-size:12px}.map-title{font-size:12px}
.held-card>span,.held-card>small{font-size:12px}
.initial-skill-status>b{font-size:15px}.initial-skill-status>small{font-size:13px}
.bond-heading{font-size:17px}.bond-entry>span,.bond-entry>b{font-size:13px}.bond-tooltip p{font-size:14px;line-height:1.65}
.special-resources small{font-size:12px}.special-resources b{font-size:16px}
.meter-tabs button{font-size:12px}.meter-row span,.meter-row b,.meter-body small{font-size:13px}
.pick-header h2{font-size:23px}.pick-header>button{font-size:13px}
.card-topline>span,.card-title-row>div>small,.card-section small{font-size:13px}
.card-topline>b{font-size:16px}.choice-card h3{font-size:25px}
.card-section p{font-size:15px;line-height:1.65}.card-gain p{font-size:17px}.card-bond p{font-size:14px}
.card-members span{font-size:12px}.card-members small{font-size:11px}.card-members img{width:28px;height:28px}
.card-collection,.card-collection>b{font-size:13px}#draw-dialog .draw-footer button{font-size:15px}
.choice-card{min-height:500px}#draw-dialog{max-width:1030px}.choice-card{max-width:334px}
.setting,.control-row,.detail-dialog p,.shop-item p{font-size:16px}.dialog-note{font-size:14px;line-height:1.8}
.shop-item button,.tabs button,.record-grid button{font-size:15px}
@media(max-width:1300px){
 .lobby-copy{width:430px;left:6%}.lobby-copy h1{font-size:50px}
 .lobby-copy .intro{font-size:16px}.choose-heading{width:360px}.choose-heading .selected-skill{width:340px}
 .hero-caption small{font-size:14px}.choose-heading h1{font-size:38px}
}
@media(max-height:850px){
 .lobby-copy{top:16%}.lobby-copy h1{font-size:44px;margin-bottom:18px}
 .lobby-copy .intro{font-size:16px;line-height:1.7;margin-bottom:18px}.intro p{margin-bottom:10px}
 .choose-heading{top:12%}.back-button{margin-bottom:10px}.choose-heading h1{font-size:34px;margin:10px 0 12px}
 .choose-heading #hero-personality{font-size:16px;line-height:1.6;min-height:0;margin-bottom:12px}
 .choose-heading .selected-skill{padding:12px 14px;margin:12px 0 14px}.choose-heading .selected-skill p{font-size:16px;margin:9px 0}
 .choice-card{min-height:425px}.card-section p{font-size:14px}.card-gain p{font-size:16px}.card-bond p{font-size:13px}
 .card-members span{font-size:11px}.card-members small{font-size:10px}.card-collection,.card-collection>b{font-size:12px}
}
@media(max-width:1000px){
 .lobby-copy{width:380px}.choose-heading{width:330px}.choose-heading .selected-skill{width:315px}
 .hero-caption small{display:block}.hero-caption{right:5%}
 .game-top{gap:12px}.game-brand{font-size:14px}.resource{font-size:13px}.resource b{font-size:17px;margin-left:3px}
 .console-label,.console-label .text-button{font-size:12px}.held-card>span{font-size:10px}
 .card-members>div{flex-direction:column}.card-members img{width:25px;height:25px}
 .card-topline>b{font-size:14px}.choice-card h3{font-size:23px}
}
@media(max-height:680px){
 .lobby-copy{top:14%;width:440px}.lobby-copy h1{font-size:38px;margin-bottom:12px}.lobby-copy .intro{font-size:15px;line-height:1.6;margin-bottom:12px}
 .selected-hero{padding:7px}.selected-hero img{width:44px;height:44px}.lobby-copy .start-button{padding:13px 20px;margin-top:12px}
 .lobby-bottom{bottom:3%;padding-top:12px}.lobby-bottom span{font-size:13px!important}
 .choose-heading{top:8%}.choose-heading .eyebrow{display:none}.choose-heading h1{font-size:30px;margin:8px 0}
 .choose-heading #hero-personality{display:block;font-size:15px;line-height:1.6;margin-bottom:8px}
 .choose-heading .selected-skill p{font-size:15px;line-height:1.6}.choose-heading>.start-button{height:auto;padding:13px 20px}
 .choose-heading>.back-button{margin-bottom:6px}
}