#collection-toggle,#collection-close{display:none}

@media(max-width:900px),(max-width:1200px) and (max-height:600px){
  /* Scrollable so the machine and the collection can both be reached by thumb. */
  html,body{height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden}
  body{padding-bottom:0}
  header{height:58px;padding:7px 10px;gap:7px}
  header button{min-height:44px;padding:6px 9px;font-size:11px}
  header .eyebrow{display:none}
  header .brand{font-size:13px;margin-right:auto;min-height:44px;display:flex;align-items:center}
  #collection-toggle,#collection-close{display:block}
  main{min-height:calc(100dvh - 58px);display:block;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .machine-shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;border-radius:18px}
  .game-heading{padding:9px 13px 4px}
  .game-heading .eyebrow{font-size:9px}
  .game-heading h1{font-size:clamp(21px,6vw,26px);margin-top:2px}
  .hud{gap:clamp(14px,6vw,28px)}
  .hud strong{font-size:20px}
  #playfield{height:auto;min-height:0}
  aside{position:fixed;z-index:20;top:58px;right:0;left:0;height:calc(100dvh - 58px);margin:0;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:#021a14f7;overflow:auto;overscroll-behavior:contain;display:none}
  aside.open{display:block}
  #collection-close{position:sticky;top:0;margin:0 0 8px auto;z-index:2}
  .theme-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none}
  .collection-panel p{margin:4px 0 10px}
  aside section{padding:14px;margin-bottom:10px}
}

@media(max-height:900px) and (min-height:601px) and (min-width:901px), (max-height:900px) and (min-width:1201px){
  header{height:60px;padding-block:8px}
  main{padding:14px;gap:16px}
  .game-heading{padding:12px 20px 6px}
  #playfield{height:clamp(340px,calc(100dvh - 380px),520px)}
  aside section{padding:14px;margin-bottom:10px}
  .theme-grid{max-height:245px}
}

/* Short landscape viewports dedicate the available area to the machine. */
@media(min-width:601px) and (max-width:1200px) and (max-height:500px){
  .machine-shell{grid-template-columns:minmax(0,1fr) minmax(175px,27%);grid-template-rows:auto minmax(0,1fr);column-gap:8px}
  .game-heading{grid-column:1;grid-row:1;padding:3px 10px 2px;border-top-width:4px}
  .game-heading .eyebrow{display:none}
  .game-heading h1{font-size:22px}
  .hud{grid-column:2;grid-row:1;gap:12px;align-self:center;padding-right:8px}
  .hud span{font-size:8px;letter-spacing:.3px}
  .hud strong{font-size:18px;margin:3px 0}
  #playfield{grid-column:1;grid-row:2;min-width:0}
  #celebration{max-width:calc(100% - 20px);padding:7px 11px;font-size:clamp(12px,3.8vw,16px)}
}

dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}

/* The cabinet itself is now the only drop control, so it owns the reclaimed dock space. */
@media(max-width:900px),(max-width:1200px) and (max-height:600px){
  .machine-shell{grid-template-rows:auto auto minmax(0,1fr)}
  #tap-hint{bottom:6px;padding:6px 12px}
}

@media(max-height:900px) and (min-height:601px) and (min-width:901px), (max-height:900px) and (min-width:1201px){
  main{height:calc(100dvh - 60px);overflow:hidden}
  .machine-shell{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
  #playfield{height:clamp(500px,calc(100dvh - 245px),680px)}
  aside{max-height:100%;overflow:auto;overscroll-behavior:contain}
}

@media(max-height:900px) and (min-height:601px) and (min-width:901px), (max-height:900px) and (min-width:1201px){
  #playfield{height:auto;min-height:0}
}

@media(min-width:601px) and (max-width:1200px) and (max-height:500px){
  header{height:50px}
  main{height:calc(100dvh - 50px)}
  .machine-shell{position:relative}
  .machine-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);column-gap:0}
  .game-heading{position:absolute;right:6px;top:4px;z-index:4;padding:0;border:0}
  .game-heading>div{display:none}
  .game-heading #help{display:block}
  .hud{grid-column:1;grid-row:1;padding:4px 0}
  #playfield{grid-column:1;grid-row:2}
  #tap-hint{bottom:4px}
}