/* Keep after the responsive theme. Physics always uses a 468 × 612 arena.
   Desktop keeps that exact display size; small screens scale it uniformly. */
body{align-items:flex-start}
.app{
  flex:0 0 auto;
  width:524px;
  height:auto;
  min-height:0;
  max-height:none;
  padding:18px;
  border-width:2px;
  grid-template-rows:50px 76px auto 80px;
  gap:14px;
}
.game-shell{
  box-sizing:content-box;
  width:468px;
  height:612px;
  min-height:0;
  border-width:8px;
}
/* These overlays share the canvas coordinate system, also on scaled mobile. */
.danger{top:13.3986928105%;left:2.5641025641%;right:2.5641025641%}
.dropper{aspect-ratio:auto;max-width:none;padding:0}
.guide{top:9.8039215686%}
@media(max-width:600px){
  .app{
    width:100%;
    padding:4px;
    border-width:0;
    grid-template-rows:48px 72px auto 76px;
    gap:12px;
  }
  .game-shell{
    width:calc(100% - 14px);
    height:auto;
    aspect-ratio:468 / 612;
    border-width:7px;
  }
}
/* A narrow desktop window is still a desktop game. Scroll rather than squeeze. */
@media(hover:hover) and (pointer:fine){
  body{min-width:572px}
  .app{
    width:524px;
    padding:18px;
    grid-template-rows:50px 76px auto 80px;
    gap:14px;
  }
  .game-shell{width:468px;height:612px;border-width:8px}
}

/* Keep both the label and thumbnail within the yellow next-item panel. */
.next{height:52px;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:16px 26px;gap:2px;place-content:center;place-items:center;text-align:center;padding:4px 6px;overflow:hidden}
.next>span{line-height:16px;margin:0}
.next img{display:block;width:32px;height:26px;max-width:100%;max-height:100%;min-height:0;margin:0;object-fit:contain;filter:drop-shadow(0 1px 1px #92714320)}
/* Keep page scrolling and settings sliders usable outside the play canvas. */
.app,.studio-note,dialog{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.app img,.studio-note img,dialog img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.game-shell{-webkit-tap-highlight-color:transparent}

/* Close up the spaces left by decorative copy. */
.start-card h2{margin-bottom:22px}
.touch-preview+.collection{margin-top:16px}