/* Reflow the interface before text and controls become too small to use. */
body{min-width:320px}
/* Keep the viewport and page frame fixed when navigating between long and short pages. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.shell>.game-header,.shell>#nav,.shell>#announcement-banner,.shell>footer{flex-shrink:0}
.shell>.main{flex:1 0 auto;width:100%;max-width:none;margin:0 auto;padding:12px 22px 24px}
#content{display:flow-root}
@media(min-width:1200px){.shell>.main{padding-inline:16px}}
@media(min-width:1400px){.shell>.main{padding-inline:91px}}
@media(max-width:700px){.shell>.main{padding-inline:10px}}
@media(max-width:600px){.shell>.main{padding-inline:8px}}
.main,#content,.home-layout>*,.full-profile>*,.arena>*,.combat-lower>*,.kennel-row>*,.training-detail-row>*,.quick-spell-inner{min-width:0}
#content img{max-width:100%;object-fit:contain}
.solo-title img{width:min(910px,100%);height:auto}
.solo-track{width:min(440px,100%)}
.fight-sections.bot-tiers,.main-boss-navigation,.skill-chain{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.fight-sections.bot-tiers{justify-content:flex-start;width:max-content;margin-inline:auto}
.fight-sections.bot-tiers>button,.main-boss-navigation>button,.skill-chain>.skill-node{flex-shrink:0}
.skill-chain>.skill-node{min-width:150px}
.training-views,.training-categories,.player-filter-tabs,.dog-tabs,.settings-buttons,.modal-actions,.profile-social-actions{flex-wrap:wrap}
.kennel-description,.training-detail-row p,.combat-stats,.header-stats>div,.main-boss-info,.job-reward,.profile-information{overflow-wrap:anywhere}
.upgrade-table-wrap,.show-tables>section,#content :where(section,div):has(>table){max-width:100%;overflow-x:auto}
dialog,dialog.game-popup{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;overflow-wrap:anywhere}
dialog img{max-width:100%;object-fit:contain}
.bot-lineup{flex-wrap:wrap;justify-content:center}
.bot-lineup img,.bot-lineup .bot-tier-avatar{flex:0 1 120px;min-width:80px;max-width:120px}
@media(max-width:1100px){
 .home-layout,.full-profile{grid-template-columns:256px minmax(0,1fr);gap:20px}
 .home-journal{grid-column:1/-1}
 .arena,.arena.bot-fight{width:100%;grid-template-columns:minmax(0,1fr) 236px minmax(0,1fr);gap:12px}
 .arena .combatant{flex-direction:column;align-items:center;width:100%;min-width:0}
 .arena .portrait,.arena.bot-fight .portrait{width:100%;max-width:180px;flex-basis:auto}
 .arena .portrait img{width:128px;height:128px;max-width:100%}
 .arena .combat-stats{order:-1;width:100%}
 .arena .combat-stats>div{display:block}
 .arena .battle-center{width:236px;margin-inline:auto}
 .combat-lower,.combat-lower.bot-fight{width:100%;grid-template-columns:284px minmax(0,1fr) 284px;gap:8px}
 .combat-lower .enemy-skills{grid-column:3;grid-row:1}
 .combat-lower .combat-log{grid-column:2;grid-row:1}
 .profile-sidebar{width:100%;max-width:256px}
}
@media(max-width:850px){
 .combat-lower,.combat-lower.bot-fight{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
 .combat-lower .combat-log{grid-column:1/-1;grid-row:2}
 .combat-lower .enemy-skills{grid-column:2;grid-row:1}
 .combat-lower .slots{margin-inline:auto!important}
 .home-layout,.full-profile{grid-template-columns:minmax(0,1fr)}
 .home-profile,.profile-sidebar{margin-inline:auto}
 .home-journal{grid-column:auto}
 .header-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .regen-labels{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
 .profile-information,.profile-skills{grid-column:auto!important;width:100%}
 .show-tables{width:100%}
 .show-tables>section{width:100%;margin:12px 0}
}
@media(max-width:600px){
 .game-header{padding-inline:8px}
 .header-actions{position:static;justify-content:flex-end;flex-wrap:wrap;margin:0 0 8px 30px}
 .hound-wordmark{font-size:clamp(32px,8vw,48px);padding-top:6px}
 #headerStats{margin-top:0}
 .header-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 6px}
 .header-stats .meter-label{font-size:12px}
 .arena,.arena.bot-fight{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
 .arena .player-side{grid-column:1;grid-row:1}
 .arena .opponent-side{grid-column:2;grid-row:1}
 .arena .battle-center{grid-column:1/-1;grid-row:2;margin-block:8px}
 .combat-lower,.combat-lower.bot-fight{grid-template-columns:minmax(0,1fr)}
 .combat-lower .skill-side{grid-column:1;grid-row:1}
 .combat-lower .enemy-skills{grid-column:1;grid-row:3}
 .combat-lower .combat-log{grid-column:1;grid-row:2}
 .combat-lower .section-label{height:auto;min-height:28px}
 .combat-lower .slots{width:284px;max-width:100%}
 .home-profile{min-width:0;width:100%;max-width:256px}
 .home-attributes .attributes-columns,.profile-information .attributes-columns,.profile-information .profile-stat-grid{grid-template-columns:minmax(0,1fr)}
 .home-attributes .attribute{grid-template-columns:minmax(110px,1fr) minmax(0,1fr);column-gap:10px}
 .kennel-row{grid-template-columns:96px minmax(0,1fr);gap:12px;padding-inline:0}
 .kennel-purchase{grid-column:1/-1;justify-self:center;max-width:100%}
 .training-detail-row,.quick-spell-upgrade .training-detail-row{grid-template-columns:80px minmax(0,1fr);gap:12px;padding-inline:0}
 .training-purchase,.quick-spell-upgrade .training-purchase{grid-column:1/-1;justify-self:center}
 .quick-spell-upgrade{width:100%;padding:16px 10px}
 .bank-offers,.two-col,.metrics{grid-template-columns:minmax(0,1fr)}
 .main-boss-layout{grid-template-columns:minmax(0,1fr)}
 .main-boss-portrait{text-align:center}
 .main-boss-payouts{grid-template-columns:minmax(0,1fr)}
 .main-boss-unlocks,.package-items{flex-wrap:wrap;gap:20px}
 .job-heading,.job-body,.job-reward,.props-header,.page-head{flex-wrap:wrap}
 .job-requirements{max-width:100%}
 .player-filter-tabs{gap:4px}
 .player-filter-tabs button{padding:5px 7px}
 .social-player-list{padding-inline:0}
 .social-player{min-width:128px;max-width:100%;margin:4px;padding:10px}
 .home-journal .chat-compose{grid-template-columns:minmax(0,1fr) 70px;gap:6px}
 .solo-track{width:100%}
 .solo-node span{font-size:12px}
 dialog.game-popup{padding:16px;max-width:calc(100vw - 24px)}
}

/* Preserve complete combat labels and numeric terms at every viewport size. */
.arena .combatant{flex-wrap:wrap}
.arena .combat-stats,.arena.bot-fight .combat-stats{flex:0 1 420px;width:100%;max-width:420px;min-width:0;font:16px/1.3 Arial,sans-serif}
.arena .combat-stats>strong{font-size:16px}
.arena .combat-stats>.combat-stat-row{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;column-gap:16px;text-align:left}
.arena .combat-stats .combat-stat-label{white-space:nowrap;max-width:none;text-align:left}
.arena .combat-stats .combat-stat-values{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 4px;min-width:0;max-width:none;overflow-x:auto;text-align:right;overflow-wrap:normal}
.arena .combat-stat-values>span,.arena .combat-stat-values>em{flex:0 0 auto;max-width:none;white-space:nowrap}
@media(max-width:1499px){.arena .combat-stats,.arena.bot-fight .combat-stats{flex-basis:auto}}

/* All combatants use the portrait-above-stats boss presentation. */
.arena .combatant{flex-direction:column;align-items:center}
.arena .combat-stats{order:initial;flex:none;width:100%;max-width:420px}
dialog:has(.player-combat-result){width:95vw;max-width:1800px;max-height:90dvh;overflow:auto}
.player-combat-result .arena{width:100%;margin-inline:auto}

.arena .portrait>.bot-tier-avatar{width:256px;height:256px;max-width:100%;aspect-ratio:1}
@media(max-width:1100px){.arena .portrait>.bot-tier-avatar{width:128px;height:128px}}

#content .upgrade-table-wrap{max-width:1100px;margin:12px auto}