/* The canvas retains its 330x660 logical field. Only presentation scales. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
button,select{touch-action:manipulation}
#cv,#cv3{touch-action:none}
/* 3D is a visual overlay. Input stays on cv and toLogical raycasts the scene. */
#cv3{pointer-events:none}
@media(max-width:899px){
  body{padding:8px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .wrap{gap:12px}
  .main{width:100%;max-width:560px;min-width:0;gap:6px}
  .top{flex-wrap:wrap;gap:6px}
  .top>div:first-child{width:100%}
  h1{font-size:20px;white-space:normal}
  .mode-tag{white-space:normal;overflow-wrap:anywhere}
  .ctrls{width:100%;justify-content:space-between;gap:6px}
  .ctrls button{min-width:44px;min-height:44px;padding:6px 9px}
  .stage{align-self:center;width:min(100%,calc((100dvh - 290px)/2));min-width:120px;flex:none}
  .stage:has(#ovStart:not([hidden])),.stage:has(#ovBrief:not([hidden])){width:100%;max-height:calc(100dvh - 140px);min-height:300px}
  .panel{width:100%;gap:6px}
  .logi{min-height:44px}
  .card{min-height:64px}
  .card canvas{width:36px;height:36px}
  .deploy .side button{min-height:44px}
  .deploy .bag{min-height:76px}
  .tabs button,.ghostbtn.sm{min-height:44px}
  .setup-choice select{min-height:44px;font-size:16px}
  .overlay{padding:10px;overscroll-behavior:contain}
  .notes{max-width:100%}
  .hint{min-height:2.4em}
  .toast{position:fixed;top:110px;max-width:min(90vw,420px);transform:translateX(-50%);font-size:14px}
}
@media(max-width:899px) and (orientation:landscape){
  .main{display:grid;grid-template-columns:auto minmax(230px,1fr);max-width:850px;column-gap:12px}
  .top,.hud{grid-column:1/-1}
  .top{flex-wrap:nowrap}
  .top>div:first-child{width:auto;min-width:0}
  .ctrls{width:auto;flex:none}
  .stage{grid-column:1;width:calc((100dvh - 112px)/2);min-width:110px}
  .panel{grid-column:2;align-self:start}
  .stage:has(#ovStart:not([hidden])),.stage:has(#ovBrief:not([hidden])){grid-column:1/-1;width:100%;min-height:180px;aspect-ratio:auto;height:calc(100dvh - 112px);max-height:none}
  .hand{grid-template-columns:repeat(2,1fr)}
  .card.next{grid-column:1/-1;flex-direction:row;justify-content:center;min-height:36px}
  .notes{display:none}
}