/* Burger Bistro Blitz v12 – Tablet/Mobile Landscape Responsive Patch
   Anwendung: Diese Datei nach style.css einbinden oder ans Ende der bestehenden style.css kopieren.
   Die Spielfunktion/JS-Logik wird nicht verändert.
*/

/* Grundsätzlich verhindern, dass Mobile Browser das Layout durch Gesten/Zoom-Text zu stark verzerren */
html, body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* Gemeinsame Landscape-Basis für Tablets und Phones */
@media (max-width: 1180px) {
  body {
    overflow: hidden;
  }

  #game {
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: clamp(6px, 1vw, 12px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 6px;
  }

  header {
    min-height: 0;
    align-items: center;
    gap: 10px;
  }

  header h1 {
    font-size: clamp(18px, 2.6vw, 28px);
    line-height: 1.05;
  }

  header p {
    display: none;
  }

  .hud {
    gap: 6px;
    justify-content: flex-end;
  }

  .hud span {
    padding: 7px 9px;
    font-size: clamp(12px, 1.6vw, 15px);
    box-shadow: 0 8px 18px rgba(69,42,16,.12);
  }

  nav {
    margin: 0;
    gap: 6px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  nav button,
  .tab {
    padding: 7px 8px;
    border-radius: 12px;
    font-size: clamp(12px, 1.6vw, 15px);
    white-space: nowrap;
  }

  main {
    min-height: 0;
    overflow: hidden;
  }

  .station {
    height: 100%;
    min-height: 0;
    padding: clamp(8px, 1.2vw, 14px);
    border-radius: 18px;
    overflow: hidden;
  }

  .station h2 {
    margin: 0 0 3px;
    font-size: clamp(16px, 2vw, 22px);
  }

  .station > p,
  .station > h2 + p {
    margin: 0 0 6px;
    font-size: clamp(11px, 1.4vw, 14px);
  }

  .box,
  .tickets,
  .customer,
  .burgerCard {
    border-radius: 16px;
    padding: 9px;
  }

  .box h3,
  .tickets h3,
  .serveLayout h3,
  .buildLayout h3,
  .grillLayout h3 {
    margin: 0 0 6px;
    font-size: clamp(13px, 1.6vw, 17px);
  }

  .withTickets {
    height: calc(100% - 32px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) clamp(190px, 23vw, 260px);
    gap: 8px;
  }

  .ticketsScroll,
  .scrollArea,
  .smallScroll,
  .outputScroll {
    max-height: none;
    min-height: 0;
  }

  .ticketsScroll {
    height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .ticket {
    padding: 7px;
    border-radius: 12px;
    margin-bottom: 7px;
  }

  .ticket h4 {
    font-size: 13px;
  }

  .ticketTable {
    font-size: 11px;
  }

  .ticketTable td {
    padding: 2px 4px;
  }

  .muted {
    font-size: 10.5px;
  }

  .customerGrid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
  }

  .customer {
    min-height: 132px;
  }

  .avatar {
    font-size: 24px;
  }

  .customer h3 {
    margin: 0;
    font-size: 15px;
  }

  .patience {
    height: 7px;
    margin: 6px 0;
  }

  .orderBtn {
    padding: 7px 9px;
    border-radius: 11px;
    font-size: 12px;
  }

  .startPanel {
    margin: 18px auto;
    padding: 18px;
    max-width: 440px;
    border-radius: 20px;
  }

  .bigStart {
    font-size: 18px;
    padding: 12px 26px;
  }

  /* Grill bleibt quadratisch, nutzt den Landscape-Space besser */
  .grillLayout {
    height: 100%;
    min-height: 0;
    grid-template-columns: clamp(150px, 18vw, 195px) minmax(330px, min(54vh, 54vw)) clamp(190px, 23vw, 260px);
    gap: 8px;
    align-items: start;
  }

  .grillPlate {
    width: min(54vw, calc(100vh - 150px));
    height: min(54vw, calc(100vh - 150px));
    aspect-ratio: 1 / 1;
    max-width: none;
    max-height: none;
    padding: 12px;
    gap: 8px;
    border-radius: 22px;
    justify-self: center;
  }

  .grillSlot {
    border-radius: 14px;
  }

  .rawPatty,
  .grillPatty {
    width: clamp(82px, 10vw, 112px);
    height: clamp(58px, 7vw, 78px);
  }

  .trayPatty {
    width: 70px;
    height: 48px;
  }

  .grease {
    width: clamp(90px, 12vw, 120px);
    height: clamp(60px, 8vw, 78px);
  }

  .cookBar {
    left: 8px;
    right: 8px;
    bottom: 1px;
    height: 8px;
  }

  .grillPatty .mark span {
    top: 12px;
    font-size: 9px;
  }

  .trayItem {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 6px;
    padding: 5px;
    margin-bottom: 6px;
    border-radius: 11px;
  }

  .trayItem b {
    font-size: 11px;
  }

  .trayItem .cookBar {
    height: 8px;
  }

  .trayBox {
    min-height: 0;
    height: calc(100vh - 150px);
  }

  .trayBox:has(#trayList:empty) {
    min-height: calc(100vh - 150px);
  }

  #trayList,
  #buildPattyShelf {
    height: calc(100vh - 205px);
    overflow-y: auto;
  }

  .trash {
    min-height: 78px;
    margin-top: 10px;
    font-size: 22px;
    border-radius: 16px;
  }

  .trash small {
    font-size: 10px;
  }

  /* Build-Station in Landscape kompakter */
  .buildLayout {
    height: 100%;
    min-height: 0;
    grid-template-columns: clamp(180px, 22vw, 230px) minmax(360px, 1fr) clamp(210px, 25vw, 280px);
    gap: 8px;
  }

  .buildArea {
    height: calc(100vh - 190px);
    min-height: 300px;
    border-radius: 18px;
  }

  .buildLayer {
    width: 190px;
    height: 60px;
  }

  .iconGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
  }

  .ingIcon {
    height: 58px;
    border-radius: 13px;
    font-size: 10px;
    background-size: 90% 66%;
    padding-top: 39px;
  }

  .sauceTitle {
    margin-top: 4px;
    padding-top: 7px;
    font-size: 12px;
  }

  .actions {
    gap: 6px;
    margin-top: 7px;
  }

  .actions button {
    padding: 7px 9px;
    border-radius: 11px;
    font-size: 12px;
  }

  /* Ausgabe: zwei Spalten behalten, jeweils scrollbar */
  .serveLayout {
    height: calc(100% - 48px);
    min-height: 0;
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr);
    gap: 8px;
  }

  .waitingBurgers,
  .outputScroll {
    height: calc(100vh - 205px);
    max-height: none;
    overflow-y: auto;
  }

  .burgerCard {
    width: 150px;
    min-height: 132px;
    padding: 8px;
    border-radius: 16px;
  }

  .miniStack {
    height: 96px;
  }

  .miniLayer {
    height: 9px;
    min-height: 9px;
    font-size: 6.5px;
  }
}

/* Sehr kleine Smartphones im Querformat */
@media (orientation: landscape) and (max-width: 760px) {
  #game {
    padding: 5px;
    gap: 4px;
  }

  header h1 {
    font-size: 16px;
  }

  .hud span {
    padding: 5px 7px;
    font-size: 11px;
  }

  nav button,
  .tab {
    padding: 5px 6px;
    font-size: 11px;
    border-radius: 10px;
  }

  .station {
    padding: 7px;
    border-radius: 14px;
  }

  .withTickets {
    grid-template-columns: minmax(0, 1fr) 165px;
    gap: 6px;
  }

  .ticketsScroll {
    height: calc(100vh - 118px);
  }

  .grillLayout {
    grid-template-columns: 120px minmax(245px, calc(100vh - 112px)) 165px;
    gap: 6px;
  }

  .grillPlate {
    width: min(42vw, calc(100vh - 112px));
    height: min(42vw, calc(100vh - 112px));
    aspect-ratio: 1 / 1;
    padding: 8px;
    gap: 5px;
    border-radius: 18px;
  }

  .rawPatty,
  .grillPatty {
    width: 74px;
    height: 52px;
  }

  .grease {
    width: 80px;
    height: 54px;
  }

  .cookBar {
    bottom: 0;
    height: 7px;
  }

  .grillPatty .mark span {
    top: 10px;
    font-size: 8px;
  }

  .trayBox,
  .trayBox:has(#trayList:empty) {
    height: calc(100vh - 118px);
    min-height: calc(100vh - 118px);
  }

  #trayList,
  #buildPattyShelf {
    height: calc(100vh - 165px);
  }

  .trayItem {
    grid-template-columns: 50px minmax(0,1fr);
    gap: 4px;
    padding: 4px;
  }

  .trayItem .trayPatty {
    width: 52px;
    height: 36px;
  }

  .buildLayout {
    grid-template-columns: 150px minmax(260px,1fr) 170px;
    gap: 6px;
  }

  .buildArea {
    height: calc(100vh - 160px);
    min-height: 240px;
  }

  .iconGrid {
    max-height: calc(100vh - 160px);
  }

  .ingIcon {
    height: 48px;
    font-size: 9px;
    padding-top: 32px;
  }

  .serveLayout {
    grid-template-columns: 220px minmax(280px,1fr);
  }

  .waitingBurgers,
  .outputScroll {
    height: calc(100vh - 170px);
  }

  .burgerCard {
    width: 132px;
    min-height: 118px;
  }

  .miniStack {
    height: 84px;
  }
}