/* The world stays 1400 × 820; the display scales without changing physics. */
html,body{width:100%;height:100%;overscroll-behavior:none}
body{height:100dvh}
.app{height:100dvh;min-height:0}
.main,.canvasWrap{min-width:0;min-height:0}
.main{overflow:hidden}
.canvasWrap{display:flex;align-items:center;justify-content:center;isolation:isolate}
canvas{width:100%;height:auto;max-height:100%;aspect-ratio:1400/820;object-fit:contain;touch-action:none}
.topbar{gap:8px;flex-wrap:wrap;flex-shrink:0}
.topbar>div:first-of-type{flex:1;min-width:100px}
.topbar button{min-height:44px}
#optionsBtn{display:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffd36d;outline-offset:3px}
.touchControls{display:none;gap:10px;padding:8px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));flex-shrink:0}
.touchControls button{touch-action:none;user-select:none;-webkit-user-select:none;min-height:64px;flex:1;font-size:25px;font-weight:800;background:#173861;border-color:#72b3e7}
.touchControls button:last-child{background:#947023;border-color:#f2cf71}
.touchControls small{display:block;font-size:12px;line-height:1.3}
.touchControls .held{background:#65b9ec;color:#06101c}
#builderControls{padding:8px;gap:6px;flex-wrap:wrap;flex-shrink:0;background:#0c1a30}
#builderControls:not([hidden]){display:flex}
#builderControls button{min-height:44px;font-size:13px;flex:1;white-space:nowrap}
#builderControls span{width:100%;font-size:12px;text-align:center;color:#b6c7e4}
.overlay{z-index:3;padding:10px}
.modal{max-height:100%;overflow:auto}
.building .touchControls{display:none}
@media(pointer:coarse),(max-width:900px){
  .touchControls{display:flex}
  .app{grid-template-columns:1fr}
  #optionsBtn{display:block;z-index:12}
  .sidebar{display:none;position:fixed;inset:70px 0 0;z-index:10;padding:16px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#091526;overscroll-behavior:contain}
  .optionsOpen .sidebar{display:block}
  .topbar{padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));min-height:70px}
  .topbar .row{flex:0 0 auto}
  .topbar button{font-size:13px;padding:8px 10px}
  #ghostBtn,#replayBtn,#subtitleUI{display:none}
  #titleUI{font-size:14px}
  .canvasWrap{padding:6px}
  canvas{border-radius:12px}
  .hud{left:12px;right:12px;top:10px;gap:4px}
  .pill{font-size:12px;padding:5px 8px}
  .pill:nth-last-child(-n+2){display:none}
  .modal{padding:18px;border-radius:16px;width:min(440px,94vw)}
  .modal h2{font-size:24px}
  .modal button{min-height:48px;font-size:14px}
}
@media(max-height:480px) and (orientation:landscape){
  .topbar{min-height:48px;padding-top:2px;padding-bottom:2px}
  .sidebar{top:48px}
  .touchControls{position:absolute;bottom:0;left:0;right:0;padding:4px max(10px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));pointer-events:none;gap:8px}
  .touchControls button{flex:0 0 72px;min-height:52px;font-size:20px;pointer-events:auto;background:#10243be8}
  .touchControls button:last-child{margin-left:auto;background:#947023dc}
  .touchControls small{font-size:10px}
  .canvasWrap{padding:2px 76px 3px}
  .hud{top:6px;left:83px}
  #builderControls{padding:3px 8px}
  #builderControls span{display:none}
}