/* Cyber Defense website layout v0.2.2 — centered and compact.
   Winnetrie owns the fixed left site navigation and top right account menu.
   Cyber Defense owns only the content within #app, including its horizontal game tabs. */
.cyberdefense-site-layout{
    /* Center the complete game, not just the battlefield.
       Cap desktop width at ~75% of the previous panel on typical screens. */
    width: min(1335px, calc(100% - 220px));
    margin: 0 auto;
    padding: 120px 0 35px;
    min-height: 100vh;
    box-sizing: border-box;
}
#app{
    display:block;
    width:100%;
    min-height:calc(100vh - 155px);
    padding:0;
    border:1px solid #23415b;
    border-radius:15px;
    overflow:clip;
    background:radial-gradient(ellipse at 75% 0%,#14243d 0,transparent 55%),#070c16;
    color:#e6eefb;
    font-family:Inter,'Segoe UI',Arial,sans-serif;
    font-size:14px;
}
#app .navigation{
    width:100%;height:auto;
    position:relative;top:auto;left:auto;bottom:auto;
    z-index:4;
    display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;
    padding:14px 22px;
    gap:18px;
    border:0;border-bottom:1px solid #233147;
    background:linear-gradient(90deg,#0c1b30,#0a1425);
}
#app .brand{flex:none;display:flex;justify-content:flex-start;gap:12px;padding:0 18px 0 0;margin:0;border-right:1px solid #233147}
#app .brand>span:last-child{display:block}
#app .brand strong{font-size:15px;letter-spacing:.6px}
#app .brand-kicker{display:block;font-size:8px}
#app .brand-glyph{width:32px;height:32px}
#app .nav-subtitle,#app .nav-bottom{display:none}
#app .nav-items{
    display:flex;flex:1 1 520px;min-width:0;
    flex-direction:row;align-items:center;gap:4px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:thin;scrollbar-color:#28546b transparent;
}
#app .nav-link{
    flex:0 0 auto;display:inline-flex;justify-content:center;align-items:center;
    padding:10px 12px;min-height:40px;font-size:11px;white-space:nowrap;
    gap:7px;
}
#app .nav-icon{font-size:16px;width:auto}
#app .nav-link .nav-arrow{display:none}
#app .content-shell{min-width:0;width:100%}
#app .topbar{padding:0 24px;min-height:56px;height:auto;flex-wrap:wrap;gap:10px}
#app .page{max-width:none;padding:25px 24px 40px}
#app .site-footer{padding:16px 24px}
#app .game-layout{min-width:0}
#app .battle-area,#app .canvas-container,#app .build-panel{min-width:0}
#app .battle-area canvas{max-width:100%;height:auto;display:block}
#app .modal-backdrop{z-index:40}
/* Website navigation always stays above the game's modal and content. */
.timmy-sidebar{z-index:80}
.top-bar{z-index:100}
@media(max-width:1280px){
  /* Preserve room for Winnetrie's fixed sidebar at smaller resolutions. */
  .cyberdefense-site-layout{width:calc(100% - 220px);margin-left:auto;margin-right:auto}
  #app .navigation{padding:12px 14px;gap:10px}
  #app .brand{padding-right:11px}
  #app .nav-link{padding:9px 10px}
}
@media(max-width:1050px){
  #app .navigation{display:flex;position:relative;flex-direction:row;flex-wrap:wrap;height:auto;}
  #app .brand{display:flex;border-right:0}
  #app .nav-items{min-width:0;flex-basis:100%;}
  #app .nav-link{font-size:11px;flex:none}
  #app .nav-icon{font-size:16px}
  #app .topbar{padding:11px 16px}
  #app .page{padding:20px 16px 30px}
  #app .game-layout{grid-template-columns:minmax(0,1fr)}
  #app .tower-shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .build-footer{display:block}
}
@media(max-width:780px){
  .cyberdefense-site-layout{width:calc(100% - 109px);margin-left:101px;margin-right:8px;padding-top:113px}
  #app .navigation{padding:10px;gap:7px}
  #app .brand strong{font-size:13px}
  #app .nav-link{padding:9px;font-size:10px}
  #app .tower-shop{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .game-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .game-stat:first-child{grid-column:auto}
  #app .hero-radar{display:none}
}
@media(max-width:520px){
  #app{padding-bottom:0}
  #app .navigation{position:relative;top:auto;bottom:auto;left:auto;width:auto;height:auto;display:flex;border:0;border-bottom:1px solid #233147;padding:9px}
  #app .navigation .brand{display:flex;padding:0 0 4px}
  #app .nav-items{display:flex;justify-content:flex-start;overflow-x:auto;gap:5px;padding-bottom:2px}
  #app .nav-link{flex:none;font-size:10px;padding:8px;}
  #app .nav-icon{font-size:14px}
  #app .topbar-index{display:none}
  #app .page{padding:17px 9px 25px}
  #app .topbar{padding:9px}
  #app .site-footer{padding:12px}
  #app .game-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #app .game-stat:first-child{grid-column:auto}
  #app .tower-shop{grid-template-columns:1fr}
  #app .hero-inner{padding:26px 12px}
  #app .hero h1{font-size:32px}
}