/* SLAYBACK desktop expansion: mobile/tablet (<=1023px) untouched. */
@media (min-width:1024px){
  .presets .pre{flex:1 0 44px}
  #app{
    /* width tracks available height so the CRT stays roughly 2.2:1 or taller */
    max-width:clamp(520px, min(62vw, calc((100dvh - 400px) * 2.3)), 900px);
    gap:12px;padding-block:16px 14px;
  }
  .wall{grid-template-columns:96px minmax(0,1fr) 150px;gap:20px;height:84px}
  .win{width:90px;height:72px}
  .poster{height:78px;max-width:420px;justify-self:center;width:100%}
  .loadout-button-wrap{height:82px}
  .loadout-button .trophies{width:136px;height:68px}
  .loadout-button-label{font-size:8px}
  .tv{min-height:220px}
  .cab{padding:14px 14px 0;border-radius:26px}
  .chin{height:34px;gap:14px}
  .tv-brand{font-size:11px}
  .vcr{padding:10px 12px 14px;gap:10px}
  .vfd{height:84px}
  .key{height:54px}
  .key svg{width:22px;height:16px}
  .table{gap:16px;padding:12px 24px 8px}
  .obj canvas{width:96px;height:64px}
  .obj span{font-size:9px}
  .note{right:calc(50% - 60px)}
  .page{width:min(620px,100%)}
}
/* short laptop screens (1366x768, 1280x720): trim chrome so the TV keeps the room */
@media (min-width:1024px) and (max-height:820px){
  #app{gap:8px;padding-block:10px 8px}
  .wall{height:66px;grid-template-columns:80px minmax(0,1fr) 120px}
  .win{width:74px;height:58px}.poster{height:62px}
  .loadout-button-wrap{height:64px}.loadout-button .trophies{width:108px;height:54px}
  .vfd{height:72px}.key{height:48px}
  .obj canvas{width:78px;height:52px}
  .table{padding:8px 20px 4px}
}