/* Screen layout uses CSS pixels: browser/OS scaling remains supported. */
html{min-width:320px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px}
#app{min-width:0}
main,header,nav,aside,.minimal-shell,.panel,.fields,.science-grid,.trade-offers,.admin-workspace,.arena-layout,.results-standings{min-width:0}
img,canvas{max-width:100%}
button,input,select,textarea{max-width:100%}
button,summary,label,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,summary{touch-action:manipulation}
button{white-space:normal;overflow-wrap:anywhere}
.setup-field,.setup-input-wrap,.trade-room,.trade-offer,.stat,.city,.admin-city{min-width:0}
.setup-input-wrap input{min-width:0}
.page-title,.panel h2,.section-title h2,.trade-room-heading h2{overflow-wrap:anywhere}
.minimal-shell{width:100%;min-height:100svh}
.minimal-shell>.settings-trigger{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.minimal-shell>.account-entry{top:max(16px,env(safe-area-inset-top));right:calc(max(16px,env(safe-area-inset-right)) + 56px)}
#toast{max-width:calc(100vw - 24px);box-sizing:border-box;overflow-wrap:anywhere;bottom:max(18px,env(safe-area-inset-bottom));text-align:center}
dialog:not(.reward-ceremony){box-sizing:border-box;max-height:calc(100dvh - 32px);overscroll-behavior:contain}

/* Tablets and laptops: keep navigation and header controls inside their rows. */
@media(min-width:801px) and (max-width:1650px){
 header{height:auto;min-height:82px;flex-wrap:wrap;gap:12px 20px;padding:14px 22px 0}
 header .brand{min-width:180px;flex:1}
 header .session{flex:0 1 auto;max-width:calc(100% - 200px);flex-wrap:wrap;justify-content:flex-end;align-self:center}
 header nav{order:3;flex:0 0 100%;height:44px;overflow-x:auto;overflow-y:hidden;gap:22px;scrollbar-width:none}
 header nav button{flex:0 0 auto;white-space:nowrap;height:44px}
 aside{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;width:100%;padding:12px 22px;border-right:0;border-bottom:1px solid var(--line)}
 aside>.eyebrow,aside .side-bottom{display:none}
 aside .countries{display:flex;min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none}
 aside .country{flex:0 0 auto;width:auto;min-height:44px;margin:0;padding:9px 12px}
 aside .sidebar-trade{width:auto;margin:0;min-height:44px}
 main{width:100%;margin-left:0;max-width:none;padding:26px 22px 36px}
 .admin-redesigned .admin-world-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Phone portrait and landscape. No fixed sidebars or desktop-only minimum widths. */
@media(max-width:800px){
 body{font-size:14px}
 header{position:relative;top:auto;display:flex;height:auto;min-height:0;flex-wrap:wrap;gap:10px;padding:12px max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
 header .brand{min-width:0;flex:1 1 100%;gap:10px}
 header .brand strong{font-size:10px;letter-spacing:.4px;line-height:1.6}
 header .brand small{font-size:8px;letter-spacing:1.5px;margin-top:2px}
 header .brand .game-logo{width:28px;height:28px}
 header .session{order:2;flex:1 1 100%;width:100%;margin:0;gap:6px;align-self:auto;align-items:center;justify-content:flex-start;flex-wrap:wrap}
 header .session .dot,header .session .session-name{display:none}
 header .session .war-badge,header .session .action-budget{flex:0 1 auto;width:auto;height:28px;min-height:28px;padding:4px 7px;font-size:9px;line-height:16px}
 header .session>.tag{font-size:9px;padding:5px 7px;min-height:28px;display:inline-flex;align-items:center}
 header .session #menu-exit{height:40px;min-height:40px;padding:7px 10px}
 .session .party-players{max-width:min(200px,42vw)}
 .session .party-players .account-entry,.session .party-players .party-player{width:38px;height:38px;min-height:38px;flex-basis:38px}
 .session .party-players .party-players-arrow{width:26px;height:38px;min-height:38px;flex-basis:26px}
 .session .party-players .account-entry .account-avatar,.session .party-players .party-player .account-avatar{width:28px;height:28px}
 header nav{order:3;flex:1 1 100%;width:100%;height:46px;gap:18px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
 header nav button{height:46px;min-height:44px;flex:0 0 auto;white-space:nowrap;padding:0 3px;font-size:12px}
 header nav::-webkit-scrollbar{display:none}
 aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;padding:10px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));border-right:0;border-bottom:1px solid var(--line)}
 aside>.eyebrow,aside .side-bottom{display:none}
 aside .countries{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;min-width:0;scrollbar-width:none;overscroll-behavior-x:contain}
 aside .countries::-webkit-scrollbar{display:none}
 aside .country{width:auto;flex:0 0 auto;min-width:110px;min-height:44px;padding:9px 10px;margin:0;gap:8px;font-size:12px}
 aside .country .flag{width:24px;height:16px}
 aside .sidebar-trade{width:100%;margin:0;min-height:44px;padding:10px 12px;font-size:12px}
 main{margin-left:0;width:100%;max-width:none;padding:20px max(12px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .breadcrumbs{gap:12px;font-size:10px;line-height:1.7;flex-wrap:wrap}
 .hero{margin-top:18px;padding:22px 18px;min-height:190px}
 .hero h1{font-size:clamp(25px,6vw,38px);letter-spacing:-1px;line-height:1.4}
 .hero p{max-width:100%;font-size:12px;line-height:1.8}
 .hero svg{width:100%;opacity:.22}
 .hero-bottom{position:relative;right:auto;bottom:auto;justify-content:flex-end;margin-top:18px;font-size:8px;line-height:1.7}
 .stats,.science-grid,.trade-offers{grid-template-columns:1fr;gap:14px}
 .stat{padding:18px;min-height:0}
 .stat-value{font-size:30px}
 .stat-top,.metric-label{font-size:11px}
 .stat-footer{flex-wrap:wrap;gap:10px}
 .cities{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .city-actions{gap:8px}.city-actions .primary{margin-left:0;flex:1;min-height:44px}
 .lower{flex-wrap:wrap;padding:18px}.lower button{margin-left:0;min-height:44px}
 .footer{gap:12px;flex-wrap:wrap;font-size:9px;line-height:1.8}
 .minimal-shell,.minimal-shell.lobby-shell{max-width:100%;padding:86px max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));justify-content:flex-start}
 .home-shell{justify-content:center}
 .minimal-brand{max-width:100%;gap:10px}
 .home-shell .simple-home h1{font-size:clamp(25px,6.5vw,38px)}
 .home-shell .simple-actions{width:100%;max-width:440px}
 .simple-actions .home-action{min-height:76px;padding:16px;gap:12px}
 .home-action-copy{min-width:0}.home-action-copy strong{font-size:13px;line-height:1.5}.home-action-copy small{font-size:11px;line-height:1.6}
 .create-party-panel{width:100%;padding:20px 16px!important}
 .create-party-panel .page-title,.create-party-panel h1{font-size:clamp(19px,5.5vw,26px);line-height:1.5}
 .page-intro{font-size:12px;line-height:1.8}
 .fields,.create-fields{grid-template-columns:1fr!important;gap:16px}
 .setup-field>span,label{font-size:12px;line-height:1.7}
 input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea,.setup-input-wrap input,.admin-console .setup-input-wrap input,.trade-offers .setup-input-wrap input,.trade-chat-compose input{font-size:16px;min-height:46px}
 input[type=checkbox],input[type=radio]{min-height:0}
 .setup-input-wrap input{height:48px}
 .create-footer .primary,.account-profile-save button,.account-auth-panel .primary{min-height:46px}
 .lobby-access-options{grid-template-columns:1fr 1fr}
 .lobby-access-options .access-option{min-height:128px;padding:18px 24px;gap:10px}
 .access-option small{font-size:10px;line-height:1.6}
 .world-events-option{gap:10px;padding:16px}
 .world-events-option small{font-size:11px}
 .lobby-room-layout{grid-template-columns:1fr;gap:16px}
 .lobby-room{padding:20px 16px}
 .lobby-room .lobby-team-row{flex-wrap:wrap;min-width:0}
 .lobby-room .lobby-team-row>div{min-width:0;flex:1}
 .lobby-room .lobby-team-nickname{font-size:17px}
 .lobby-code{flex-wrap:wrap;gap:14px;padding:16px}
 .lobby-code strong{font-size:clamp(25px,7vw,34px);letter-spacing:clamp(3px,1vw,6px)}
 .lobby-roster-list{max-height:340px}
 .account-profile-identity{gap:14px;align-items:flex-start}
 .account-profile-copy{min-width:0}
 .account-profile-identity h1{font-size:clamp(18px,5vw,24px)}
 .account-profile-name{align-items:flex-start;gap:7px}
 .account-profile-identity p{overflow-wrap:anywhere}
 .account-profile-stats{gap:10px}.account-profile-stats strong{font-size:23px}.account-profile-stats span{font-size:10px}
 .account-game-list{max-height:min(280px,40dvh)}
 .account-avatar-editor,.account-profile-save{flex-wrap:wrap}
 .account-upload{min-height:44px;align-items:center}
 .trade-country-pair{flex-wrap:wrap;gap:8px;font-size:14px}
 .trade-room-heading{gap:12px;flex-wrap:wrap}
 .trade-chat{padding:14px}
 .trade-chat-log{height:clamp(190px,32dvh,300px)}
 .trade-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .trade-chat-compose button{min-height:46px;padding:10px 12px;font-size:11px}
 .trade-chat-message{max-width:95%}
 .trade-chat-message time{margin-left:8px}
 .trade-chat-message p{font-size:13px}
 .admin-redesigned .admin-world-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .admin-redesigned .admin-rules-navigation{grid-column:1/-1}
 .admin-redesigned .admin-country-column,.admin-redesigned .admin-rule-groups{grid-template-columns:1fr}
 .admin-redesigned .admin-cities{grid-template-columns:repeat(2,minmax(0,1fr))}
 .admin-redesigned .admin-nation{min-height:120px;padding:14px}
 .admin-redesigned .admin-rules-navigation{min-height:54px}
 .admin-editor>.admin-editor-toggle{min-height:76px;padding:18px 16px 18px 36px;gap:10px}
 .admin-editor>.admin-editor-toggle:before{left:17px}
 .admin-editor-title{font-size:15px}
 .admin-editor-body{padding:18px}
 .admin-redesigned .admin-science-levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .admin-redesigned .admin-science-levels label>span{min-height:64px;padding:14px 8px}
 .admin-redesigned .admin-science-levels strong{font-size:12px}.admin-redesigned .admin-science-levels small{font-size:10px}
 .admin-range input[type=range]{height:44px;min-height:44px;background-size:100% 5px;background-repeat:no-repeat;background-position:center;margin:4px 0}
 .admin-range output{font-size:13px}
 .admin-range>span{font-size:12px}
 .admin-redesigned .admin-end-panel{align-items:stretch;padding:18px;gap:18px}
 .admin-end-actions{width:100%;max-width:none;grid-template-columns:1fr}
 .admin-redesigned .admin-end-actions>button{height:48px;min-height:48px;font-size:13px}
 .admin-save-actions{flex-direction:column-reverse}
 .admin-save-actions>button{min-height:46px;font-size:12px}
 .admin-tool-buttons{grid-template-columns:1fr}
 .admin-tool-buttons>button{min-height:44px;font-size:12px}
 dialog:not(.reward-ceremony){width:calc(100vw - 20px);max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px);padding:20px 16px;margin:auto}
 dialog h2{font-size:18px;line-height:1.5}
 dialog .dialog-actions{gap:10px;flex-wrap:wrap}
 dialog .dialog-actions>button{min-height:44px;flex:1 1 130px}
 dialog.arena-dialog[open]{padding:16px}
 .arena-layout{grid-template-columns:1fr;gap:18px}
 .arena-grid,.results-standings{grid-template-columns:1fr}
 .arena-analytics{display:grid;grid-template-columns:1fr;padding:18px 0 0;border-left:0;border-top:0}
 .arena-dialog .arena-footer{gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px}
 .arena-footer button{min-height:46px;width:100%}
 .draft-teams,.draft-aspects{grid-template-columns:repeat(2,minmax(0,1fr))}
 .draft-header{flex-wrap:wrap;gap:12px}
 .draft-aspect{min-height:0;padding:12px}
 .draft-aspect strong{font-size:12px}
 .draft-aspect p{font-size:11px}
 .draft-footer{bottom:-20px;flex-wrap:wrap;gap:12px;padding:16px 0}
 .draft-footer button{width:100%;min-height:46px}
 .finish-placements>label{grid-template-columns:1fr;padding:14px;gap:12px}
 .finish-dialog .target-picker-button,.styled-picker .target-option{min-height:46px}
 .results-dialog .dialog-actions{bottom:-20px}
 .result-country{padding:16px}
 .result-country-heading{flex-wrap:wrap}
 .result-country-heading>div:nth-last-child(2){flex-basis:calc(100% - 80px)}
 .result-reward{margin-left:auto;display:flex;align-items:center;gap:10px}
 .result-statistics{gap:14px 12px}
 .results-personal{flex-direction:column;align-items:flex-start}
 .results-personal>div:last-child{justify-content:flex-start}
 .results-personal small{text-align:left}
}

@media(max-width:480px){
 .cities,.admin-redesigned .admin-cities,.profile-progression{grid-template-columns:1fr}
 .section-title{gap:12px;align-items:flex-start;flex-wrap:wrap}
 .city-body{padding:17px 16px}
 .trade-chat-compose{grid-template-columns:1fr}
 .trade-chat-compose button{width:100%;margin-left:0}
 .trade-country-option>span{padding:14px 12px}
 .trade-country-option small{display:none}
 .account-profile-save>button{flex:1 1 130px}
 .account-profile-stats span{font-size:9px}
 .draft-aspects{grid-template-columns:1fr}
 .draft-aspect{min-height:140px}
 .admin-editor>.admin-editor-toggle>.tag{max-width:95px;font-size:8px}
 .dialog-actions>button{white-space:normal}
}
@media(max-width:359px){
 .lobby-access-options{grid-template-columns:1fr}
 .admin-redesigned .admin-world-grid{grid-template-columns:1fr}
 .session .party-players{max-width:140px}
 .minimal-brand{font-size:8px}
 .account-profile-stats{gap:6px}
 .account-profile-stats strong{font-size:20px}
}

/* QHD/2K desktops: use the available canvas without forcing browser zoom. */
@media(min-width:1920px){
 body{font-size:clamp(14px,.65vw,17px)}
 header{height:92px;gap:32px;padding-inline:clamp(32px,2vw,64px)}
 header .brand{min-width:255px}.brand strong{font-size:14px}.brand small{font-size:10px}
 header nav{gap:clamp(20px,1.2vw,38px)}header nav button{font-size:14px}
 aside{top:92px;width:260px;padding:32px 24px}
 aside .country{font-size:14px;min-height:58px}
 aside .sidebar-trade{min-height:52px;font-size:13px}
 main{width:calc(100% - 260px);max-width:none;margin-left:260px;padding:40px clamp(36px,2.5vw,72px) 50px}
 .breadcrumbs{font-size:12px}
 .hero{min-height:240px;padding:34px 38px}
 .hero h1{font-size:clamp(44px,2.1vw,60px)}
 .hero p{font-size:14px;max-width:660px}
 .stats{gap:22px}.stat{padding:26px}.stat-value{font-size:40px}
 .stat-top,.stat-footer,.metric-label{font-size:13px}
 .metric-value{font-size:16px}
 .cities{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
 .city-scene{height:145px}.city-body{padding:22px}.city h3{font-size:23px}
 .city-actions button{min-height:44px}
 .science-grid{gap:24px}
 .page-title{font-size:34px}.page-intro{font-size:14px}
 .minimal-shell:not(.home-shell):not(.lobby-shell){max-width:1020px;padding:80px 36px 36px}
 .home-shell{max-width:1200px}.home-shell .simple-actions{max-width:460px}
 .simple-actions .home-action{min-height:90px;padding:24px}
 .home-action-copy strong{font-size:15px}.home-action-copy small{font-size:12px}
 .create-party-panel{padding:36px!important}
 .create-party-panel .setup-field>span{font-size:12px}
 .setup-input-wrap input{font-size:15px;min-height:50px}
 .minimal-shell.lobby-shell{max-width:1520px}
 .lobby-room-layout{grid-template-columns:minmax(0,1fr) 340px;gap:26px}
 .lobby-room .lobby-team-nickname{font-size:22px}
 .lobby-room .lobby-team-row{padding:20px;min-height:94px}
 .lobby-roster-list{max-height:600px}
 .account-profile-identity h1{font-size:32px}
 .account-profile-stats strong{font-size:30px}
 .account-game-list{max-height:340px}
 .account-game-history strong{font-size:14px}.account-game-history article small{font-size:11px}
 .admin-redesigned .admin-world-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
 .admin-redesigned .admin-country-column{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px}
 .admin-redesigned .admin-cities{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 .admin-redesigned .admin-nation{padding:22px}
 .admin-nation-title strong{font-size:14px}.admin-nation-money{font-size:28px}
 .admin-nation-details,.admin-actions-caption{font-size:11px}
 .admin-editor>.admin-editor-toggle{padding:26px 28px 26px 47px;min-height:100px}
 .admin-editor-title{font-size:20px}.admin-editor-body{padding:28px}
 .admin-redesigned .admin-edit-note{font-size:13px;max-width:none}
 .admin-redesigned .setup-field>span,.admin-range>span{font-size:13px}
 .admin-redesigned .setup-input-wrap input{height:52px;font-size:16px}
 .admin-redesigned .admin-rules-column{max-width:1450px}
 .admin-redesigned .admin-end-actions{flex-basis:520px}
 .admin-redesigned .admin-end-actions>button{height:54px;font-size:14px}
 .trade-room-heading h2{font-size:22px}
 .trade-chat-log{height:280px}
 .trade-chat-message p{font-size:14px}
 .trade-chat-compose input{font-size:15px;min-height:50px}
 .trade-chat-compose button{font-size:13px}
 dialog.arena-dialog{max-width:2100px;width:calc(100vw - 96px);padding:32px}
 .arena-layout{grid-template-columns:minmax(0,1fr) 400px;gap:32px}
 .arena-chart-card h4{font-size:14px}
 dialog.draft-dialog{max-width:1580px;width:calc(100vw - 96px)}
 .draft-aspect{padding:22px;min-height:210px}
 .draft-aspect strong{font-size:14px}.draft-aspect p{font-size:12px}
 dialog.results-dialog{max-width:1440px;width:calc(100vw - 96px)}
 .result-country{padding:24px}.result-country-heading h3{font-size:18px}
 .result-statistics dt{font-size:12px}.result-statistics dd{font-size:16px}
}