@media (max-width: 520px) {
  html, body { height: 100%; overflow: hidden; }
  #app { height: 100dvh; display: flex; flex-direction: column; padding: 4px; gap: 4px; }
  .top { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .logo { grid-column: 1 / -1; font-size: 16px; margin-bottom: 2px; }
  .pill { font-size: 9.5px; padding: 3px 5px; justify-content: center; }
  .topActions { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .topActions button { padding: 5px 2px; font-size: 9px; border-radius: 8px; text-align: center; }
  
  .layout { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; gap: 4px; }
  .layout > main { display: grid; grid-template-rows: minmax(100px, 20%) minmax(0, 48%) minmax(0, 1fr); gap: 4px; height: 100%; min-height: 0; }
  .layout > main > .card { padding: 6px; border-radius: 12px; }
  
  .scene { height: 100%; }
  .wallSign { font-size: 10px; padding: 2px 8px; top: 4px; }
  .dining { top: 42%; height: 34%; }
  .table { height: 70%; border-width: 2px; }
  .face { font-size: 20px; top: -22px; }
  
  .kitchen { display: grid; grid-template-columns: 1fr 1.2fr; height: 100%; min-height: 0; margin: 0; gap: 4px; }
  .kitchen > section { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 5px; overflow: hidden; display: flex; flex-direction: column; }
  .orderList { flex: 1; overflow-y: auto; gap: 4px; }
  .order { padding: 4px; font-size: 9.5px; }
  
  .pot { width: 100px; height: 50px; }
  .toppingGrid { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .topItem { padding: 3px 1px; font-size: 8px; }
  .topItem .emoji { font-size: 15px; }
  
  .layout > aside, .lower > section:nth-child(2) { display: none !important; }
  .shopGrid { grid-template-columns: 1fr; }
}