/* Responsive presentation shared by every VillageForge page. */
.mobile-nav-toggle{display:none}
.mobile-media-viewer{display:none}

@media(min-width:1200px){
  .wrap{width:min(1360px,calc(100% - 48px))}
  .topbar{padding-inline:6px}
  .app-nav{justify-content:flex-end}
}

@media(max-width:720px){
  html{scroll-padding-top:12px}
  body{font-size:15px}
  .wrap{width:min(100% - 20px,680px)!important}
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px!important;
    align-items:center!important;
    padding:10px 0 8px!important;
  }
  .brand{min-width:0}
  .brand .small{overflow:hidden;max-width:230px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav-toggle{
    display:inline-flex;
    min-width:76px;
    min-height:44px;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 12px;
    border:1px solid #596b8b;
    border-radius:10px;
    background:#121c30;
    color:#f4f7ff;
    font:800 14px/1 system-ui,sans-serif;
    cursor:pointer;
  }
  .mobile-nav-toggle::before{content:"☰";color:#ffd866;font-size:18px}
  .topbar.mobile-nav-open .mobile-nav-toggle::before{content:"×"}
  .app-nav{
    display:none!important;
    grid-column:1/-1;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px!important;
    width:100%;
    padding:8px!important;
    overflow:visible!important;
    border:1px solid #34445f;
    border-radius:12px;
    background:#0d1526;
    box-shadow:0 12px 24px #02061188;
  }
  .topbar.mobile-nav-open .app-nav{display:grid!important}
  .app-nav a{
    display:flex;
    min-width:0!important;
    min-height:44px;
    align-items:center;
    justify-content:center;
    padding:10px 8px!important;
    text-align:center;
  }

  main{min-width:0}
  h1{font-size:clamp(30px,10vw,42px)!important;line-height:1.05}
  h2{line-height:1.2}
  p,.lead{line-height:1.55}
  input[type="text"],input[type="search"],input[type="number"],textarea,select{
    min-height:44px;
    font-size:16px!important;
  }
  button,.btn,[role="button"]{touch-action:manipulation}
  .controls .btn,.compact-actions .btn,.priority-tabs button,.resource-priority-tabs button,
  .army-availability-tabs button,.tracker-actions button,.trader-subnav a,
  .max-calendar-nav button,.max-scope-options label{min-height:44px}

  .priority-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .resource-priority-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .resource-priority-tabs button{width:100%}
  .army-detail-grid,.army-grid,.layout-grid,.options-grid,.data-columns,.building-input-grid{
    grid-template-columns:1fr!important;
  }
  .max-scope-controls{padding:12px!important}
  .max-scope-options{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .max-scope-options label{justify-content:flex-start;padding:9px 10px!important}
  .tracker-row{padding:12px 10px!important}
  .tracker-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .tracker-actions button{width:100%;padding:8px 6px!important}
  .trader-subnav{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .trader-subnav a{display:flex;align-items:center;justify-content:center}

  .panel,.army-card,.priority-item,.war-card,.progression-card{border-radius:12px!important}
  .war-step-visual>img,.war-step-image,.base-preview img{cursor:zoom-in}
  .mobile-media-viewer.is-open{
    position:fixed;
    z-index:10000;
    inset:0;
    display:grid;
    grid-template-rows:auto 1fr;
    overflow:auto;
    padding:12px;
    background:#030712f2;
  }
  .mobile-media-viewer-bar{
    position:sticky;
    z-index:2;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:48px;
    padding:7px 10px;
    border:1px solid #425474;
    border-radius:10px;
    background:#10192b;
    color:#fff;
  }
  .mobile-media-viewer-bar button{
    min-width:74px;
    min-height:44px;
    border:1px solid #687b9c;
    border-radius:8px;
    background:#1a2740;
    color:#fff;
    font-weight:900;
  }
  .mobile-media-viewer-canvas{display:grid;place-items:start center;min-width:max-content;padding:14px 0}
  .mobile-media-viewer img{display:block;width:min(1100px,250vw);max-width:none;height:auto;border-radius:10px}
}

@media(max-width:420px){
  .crest{width:58px!important;height:58px!important}
  .brand-title{font-size:20px!important}
  .brand .small{max-width:175px;font-size:9px!important}
  .priority-tabs,.resource-priority-tabs,.max-scope-options{grid-template-columns:1fr!important}
  .metrics,.breakdown{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Keep the primary navigation centered independently of the brand and controls. */
@media(min-width:1000px){
 .topbar:has(.vf-header-controls){display:grid!important;grid-template-columns:minmax(205px,1fr) auto minmax(205px,1fr);gap:16px;min-height:110px!important;padding-block:10px 14px}
 .topbar:has(.vf-header-controls)>.brand{justify-self:start}
 .topbar:has(.vf-header-controls)>.app-nav{justify-self:center;justify-content:center;flex-wrap:nowrap;margin:0}
 .topbar>.vf-header-controls{justify-self:end;align-self:center;margin:12px 0 0;min-width:0}
}
@media(min-width:721px) and (max-width:999px){
 .topbar:has(.vf-header-controls){display:grid!important;grid-template-columns:1fr auto;gap:12px;padding-block:12px}
 .topbar:has(.vf-header-controls)>.app-nav{grid-column:1/-1;grid-row:2;justify-content:center}
 .topbar>.vf-header-controls{grid-column:2;grid-row:1;margin:8px 0 0}
}
@media(max-width:720px){
 .topbar>.vf-header-controls{grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin:4px 0 0}
 .topbar>.vf-header-controls>.vf-view-toggle{align-self:flex-end;min-height:44px;order:0;width:auto;min-width:110px;max-width:none}
 .topbar>.vf-header-controls>.vf-view-toggle span{display:inline}
 .topbar>.vf-header-controls>.vf-view-toggle::after{content:none}
 .topbar .vf-header-villages{width:100%;box-sizing:border-box}
 .topbar .vf-header-villages button{flex:1;min-height:44px;padding:10px}
 .topbar .brand-title{overflow-wrap:anywhere}
 .account-home,.account-home article,.account-home .account-villages,.account-home .home-resource,.account-home .news-card{min-width:0}
 .account-home .account-profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0}
 .account-home .account-profile-stats>div{min-width:0;padding:12px 10px}
 .account-home .account-profile-stats dt{font-size:11px;overflow-wrap:anywhere}
 .account-home .account-profile-stats dd{font-size:22px}
 .account-home .account-welcome h1{font-size:clamp(25px,7vw,34px)!important;line-height:1.2;overflow-wrap:anywhere}
 .account-home .account-actions .btn,.account-home .account-welcome .btn{min-height:44px}
 .account-home .account-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .account-home .account-actions .btn{padding:10px;font-size:12px}
 .account-home .home-auto-upgrade label{min-height:44px}
 .account-home .home-auto-upgrade summary{min-height:34px;padding-top:6px}
 .account-home .home-resource-grid{gap:8px}
 .account-home .home-resource{padding:10px 8px;gap:7px}
 .account-home .home-resource span{overflow-wrap:anywhere}
 .account-home .home-resource strong{font-size:18px}
 .account-home .news-section-heading{gap:12px}
 .account-home .news-archive-link{min-height:44px;display:flex;align-items:center}
 .max-calendar-grid,.calendar-grid{min-width:0}
 .resource-balance input[type=range]{max-width:100%}
}
@media(max-width:360px){
 .account-home .account-actions{grid-template-columns:1fr}
 .account-home .village-card-top{gap:10px}
 .account-home .village-hall-image{width:76px;height:76px}
 .account-home .village-card-top h2{font-size:20px}
 .account-home .village-progress>span{flex-wrap:wrap}
}
/* Native controls retain keyboard behavior with the VillageForge palette. */
:root{color-scheme:dark}
input[type="checkbox"],input[type="radio"]{accent-color:#a665d6;color-scheme:dark}
input[type="checkbox"]:not([role="switch"]){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;vertical-align:middle;width:18px;height:18px;min-width:18px;min-height:18px;padding:0;border:1px solid #7b6995;border-radius:5px;background:#121b2d;cursor:pointer}
input[type="checkbox"]:checked{background:#8b4bb6;border-color:#c58ce9}
input[type="checkbox"]:checked::after{content:"";width:8px;height:4px;border:solid #fff2d8;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-1px)}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:2px solid #ffd866;outline-offset:3px}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.45;cursor:not-allowed}
select,textarea,input[type="text"],input[type="number"],input[type="search"],input[type="date"],input[type="datetime-local"]{color-scheme:dark}
#upgradeAutoControl{margin:16px 0;padding:16px;border:1px solid #73528f;border-radius:12px;background:#191d30}
#upgradeAutoControl label{display:flex;align-items:center;gap:10px;font-weight:700;min-height:32px}
#upgradeAutoControl p{color:#bac5d9;font-size:12px;line-height:1.5;margin:8px 0 0}

/* Short landscape screens need vertical room, not desktop-sized sticky bars. */
@media (max-height:500px) and (orientation:landscape) and (max-width:1100px){
 html{scroll-padding-top:8px}
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 .topbar:has(.vf-header-controls){min-height:0!important;padding-block:6px!important;gap:6px!important}
 .topbar .brand img{max-height:40px!important;width:auto!important}
 .topbar .brand-title{font-size:18px!important}
 .topbar>.vf-header-controls{margin:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}
 .topbar .app-nav{padding:0!important;margin:0!important;gap:4px!important}
 .topbar .app-nav a{min-height:44px;padding:8px 12px!important}
 body.route-upgrade .priority-tabs{position:static!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;max-width:100%}
 .priority-tabs .priority-tab{flex:0 0 auto;min-height:44px;white-space:nowrap}
 #jsonRefreshReminder{padding:10px 14px!important;margin-block:8px!important;gap:10px!important}
 #jsonRefreshReminder p{font-size:12px!important;margin:3px 0!important}
 .vf-beta-dialog,dialog{max-height:calc(100dvh - 20px)!important;overflow-y:auto!important;overscroll-behavior:contain}
 .vf-service-notice{bottom:8px!important;max-height:40dvh;overflow:auto}
 .max-calendar-weekdays,.max-calendar-grid{min-width:0!important}
 .max-calendar-day{min-width:0;overflow-wrap:anywhere}
 .max-compact-summary{padding:14px!important;gap:10px!important}
 .hero,.progression-hero,.war-hero{padding-block:12px!important}
 input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
}
@media (pointer:coarse){button,.btn,summary,[role=tab]{touch-action:manipulation}input[type=range]{min-height:36px}}

@media (max-height:500px) and (orientation:landscape) and (max-width:1100px){
 #jsonRefreshReminder{flex-direction:row!important;align-items:center!important}
 #jsonRefreshReminder .json-refresh-copy>strong{font-size:14px;line-height:1.25}
 #jsonRefreshReminder .json-refresh-actions{display:flex;flex-direction:column;gap:5px}
 #jsonRefreshReminder .json-refresh-actions .btn{font-size:12px!important;min-height:44px;padding:8px 12px!important}
}