/* One logical 900 x 620 board, fitted uniformly into the available screen. */
:root{
  --stage-width:900px;
  --stage-height:620px;
}

body{min-width:0}
.game-shell{min-height:0}

.stage-viewport{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  place-self:stretch;
}

.stage-viewport>.world{
  position:absolute;
  width:var(--stage-width)!important;
  height:var(--stage-height)!important;
  min-width:var(--stage-width)!important;
  min-height:var(--stage-height)!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  transform-origin:top left;
  will-change:transform;
}

@media (max-width:1180px), (max-height:760px){
  .game-shell>header{height:74px;min-height:74px;padding:8px 14px;gap:10px}
  .brand-mark{font-size:28px}.brand b{font-size:17px}.brand small{font-size:8px}
  .resources{min-width:0;gap:6px}.resource,.goal{min-width:0;padding:6px 9px}
  .resource>span{font-size:18px}.resource small,.goal small{font-size:8px}.resource b,.goal b{font-size:12px}
  .goal{max-width:240px}
  #layoutEditorToggle{display:none}
  .tablet-controls-toggle{display:flex;flex:0 0 auto;align-items:center;justify-content:center;gap:5px;min-width:44px;height:44px;padding:0 12px;border:2px solid #2f6f48;border-radius:24px;background:#173f29;color:#fff;font-weight:900}
  .play-area{display:flex;min-height:0;padding:8px;gap:0}
  .stage-viewport{flex:1 1 auto}
  .controls{position:fixed;z-index:80;top:74px;right:0;bottom:0;width:min(360px,88vw);padding:14px 18px 30px;overflow:auto;border-radius:16px 0 0 16px;transform:translateX(105%);transition:transform .22s ease;box-shadow:-18px 0 42px #10291466}
  body.tablet-controls-open .controls{transform:translateX(0)}
  body.tablet-controls-open:after{content:"";position:fixed;z-index:79;inset:74px 0 0;background:#14201880}
  .tablet-controls-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .tablet-controls-head button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#173f29;color:#fff;font-size:25px}
}

@media (max-width:820px){
  .goal{display:none}
  .brand small{display:none}
}