/* Desktop canvas remains pixel-aligned to the 1672×941 mockup. */
@media (min-width:1200px){
  .desktop-only-hidden{display:none!important}
}

/* Tablet and mobile use a real responsive flow instead of shrinking the desktop canvas. */
@media (max-width:1199px){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  .viewport{position:relative;inset:auto;overflow:visible;min-height:100vh;padding:18px;background:linear-gradient(180deg,#08040f,#050209)}
  .app-canvas{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:min(100%,1040px);height:auto;min-height:0;margin:0 auto;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,34%);grid-template-areas:"brand top" "main main" "left right" "footer footer";gap:18px;background:transparent}
  .ambient{position:fixed;z-index:-1}
  .brand-button{grid-area:brand;position:relative;left:auto;top:auto;width:280px;height:72px;align-self:center}
  .topbar{grid-area:top;position:relative;left:auto;top:auto;width:100%;height:68px;border-radius:8px;z-index:20;display:flex;align-items:center;padding:0 12px}
  .menu-toggle{display:grid;width:44px;height:44px;border:1px solid rgba(155,80,219,.35);border-radius:7px;background:rgba(60,19,91,.25);padding:10px;place-content:center;gap:5px;cursor:pointer;flex:0 0 auto}.menu-toggle span{display:block;width:21px;height:2px;background:#c685ee;border-radius:2px;transition:.2s}.topbar.is-menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.topbar.is-menu-open .menu-toggle span:nth-child(2){opacity:0}.topbar.is-menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main-nav{position:fixed;left:18px;right:18px;top:100px;height:auto;max-height:calc(100vh - 118px);padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;background:linear-gradient(180deg,rgba(16,10,27,.985),rgba(8,5,14,.985));border:1px solid rgba(151,83,218,.42);border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.62);transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;overflow:auto;z-index:25;transition:transform .18s ease,opacity .18s ease,visibility 0s linear .18s}.topbar.is-menu-open .main-nav{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.nav-button{height:48px;border:1px solid rgba(140,75,201,.18);border-radius:6px;background:rgba(43,18,64,.26);text-align:left;padding:0 15px}.nav-button.is-active{background:rgba(113,40,162,.3)}.nav-button.is-active::after,.nav-button:hover::after{left:12px;right:12px}
  .nav-backdrop{display:block;position:fixed;inset:0;border:0;background:rgba(2,1,5,.62);z-index:19}
  .cabinet-button{position:relative;right:auto;top:auto;width:auto;flex:1;height:44px;margin-left:12px}.cabinet-button span{left:0}.cabinet-button::before{display:none}.user-icon{right:16px}
  .left-column{grid-area:left;position:relative;left:auto;top:auto;width:auto;display:grid;gap:14px}.right-column{grid-area:right;position:relative;left:auto;top:auto;width:auto;display:grid;gap:14px}
  .info-card,.about-card,.principles-card,.social-card,.stats-card,.ranking-card{position:relative;top:auto;width:100%;height:auto;min-height:0;padding:20px}.ranking-card{padding-bottom:66px}
  .main-column{grid-area:main;position:relative;left:auto;top:auto;width:100%;height:auto;display:grid;gap:14px}
  .hero{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:999/514;border-radius:5px}.hero-action{left:50%;top:auto;bottom:12px;width:280px;transform:translateX(-50%)}.hero-bottom-shade{left:50%;top:auto;bottom:0;transform:translateX(-50%)}
  .feature-grid{position:relative;left:auto;top:auto;width:100%;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.feature-card{min-height:101px}
  .bottom-grid{position:relative;left:auto;top:auto;width:100%;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}.bottom-grid>article{position:relative;left:auto;top:auto;width:auto;height:158px}.play-card{grid-column:1/-1}
  .site-footer{grid-area:footer;position:relative;left:auto;right:auto;bottom:auto;width:100%;height:54px;padding:8px 0;margin-top:0}
}

@media (max-width:767px){
  .viewport{padding:10px}

  /* On phones every meaningful block becomes a direct flex item. This lets us
     keep the desktop DOM architecture while defining a deliberate mobile order. */
  .app-canvas{width:100%;display:flex;flex-direction:column;gap:10px;min-height:0}
  .main-column,.left-column,.right-column,.bottom-grid{display:contents}

  .brand-button{position:relative;left:auto;top:auto;width:246px;height:64px;align-self:center;order:1}
  .topbar{position:sticky;left:auto;top:8px;width:100%;height:58px;padding:0 8px;order:2;z-index:20}
  .nav-backdrop{z-index:19}

  .hero{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:999/514;background:#08040e;order:3}
  .hero>img{height:100%;object-fit:cover;object-position:center}
  .hero-action{width:min(280px,calc(100% - 28px));height:44px;left:50%;top:auto;bottom:8px;transform:translateX(-50%)}
  .hero-bottom-shade{width:calc(100% - 24px);left:50%;top:auto;bottom:0;transform:translateX(-50%)}

  .feature-grid{position:relative;left:auto;top:auto;width:100%;height:auto;grid-template-columns:1fr;order:4}
  .feature-card{min-height:94px;padding-right:42px}

  /* Requested mobile block order */
  .about-card{order:5}
  .principles-card{order:6}
  .social-card{order:7}
  .ranking-card{order:8}
  .stats-card{order:9}
  .play-card{order:10}
  .server-card{order:11}
  .war-card{order:12}
  .site-footer{order:13}

  .info-card,.about-card,.principles-card,.social-card,.stats-card,.ranking-card{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:0;padding:20px}
  .ranking-card{padding-bottom:18px}
  .social-list{grid-template-columns:1fr 1fr}
  .social-link{min-height:44px}
  .stats-list div{height:42px}
  .ranking-list li{height:46px;grid-template-columns:28px 36px minmax(0,1fr) 49px 14px;column-gap:9px}
  .member-avatar{width:36px;height:36px;min-width:36px}
  .member-avatar img{width:36px;height:36px}
  .member-meta strong{font-size:11px}
  .member-meta small{font-size:8px}
  .member-score b{font-size:10px}
  .member-crown-slot{width:14px;height:14px}.member-crown{width:13px;height:11px}
  .ranking-button{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:12px}

  .bottom-grid>article,.play-card,.server-card,.war-card{position:relative;left:auto;top:auto;width:100%;height:170px}
  .play-city,.war-cars{width:60%;height:100%}
  .play-card p{right:14px;white-space:normal}
  .server-card{min-height:158px}
  .server-metrics{gap:8px}
  .server-metrics b{font-size:11px}

  .main-nav{left:10px;right:10px;top:78px;max-height:calc(100vh - 96px);padding:12px;grid-template-columns:1fr 1fr;gap:8px}
  .nav-button{height:46px}
  .cabinet-button{height:42px;margin-left:8px}
  .user-icon{right:14px}

  .site-footer{position:relative;left:auto;right:auto;bottom:auto;width:100%;height:auto;min-height:90px;display:grid;grid-template-columns:1fr;justify-items:center;gap:7px;text-align:center;padding:14px 0}
  .site-footer img{position:relative;left:auto;top:auto;transform:none;order:-1}
  .design-credit{align-self:auto}

  .join-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:22px 16px}
  .join-head h2{font-size:22px}
  .join-form{grid-template-columns:1fr;gap:12px}
  .form-field--wide{grid-column:auto}
  .join-actions{display:grid;grid-template-columns:1fr 1fr}
  .modal-dialog{width:calc(100vw - 20px);padding:22px}
  .toast{max-width:calc(100vw - 20px);text-align:center}
}

@media (max-width:430px){
  .social-list{grid-template-columns:1fr}.amazing-logo{width:190px}.play-card p{top:92px;font-size:9px}.play-button{right:14px}.war-cars{width:72%}.server-card{padding:18px}.server-heading strong{font-size:24px}
}