/* V4.2 -- REAL iPhone 16 gameplay layout, not a promotional illustration.
   Preserves the FOUR V4 generators, all FOUR food families, 35 cells, 5 illustrated actions.
   Full-screen Safari uses normal page scrolling only when browser chrome eats vertical space. */
@media (max-width: 525px) {
  html,body { max-width:100%; overflow-x:hidden; }
  .app { width:100%; max-width:100%; border-left:0; border-right:0; padding-bottom:0; overflow:clip; }
  .header { min-height:48px; padding:5px 6px 5px!important; border-bottom:2px solid #df7235; }
  .header:before {height:0;}
  .brand-line { position:absolute!important; right:6px!important; top:5px!important; width:36px!important; height:35px!important; min-height:0!important; margin:0!important; z-index:8; display:block!important; }
  .premium-logo {display:none!important;}
  .header-menu { position:static!important; display:block!important; width:36px!important; height:36px!important; padding:0!important; margin:0!important; }
  .resources { margin:0!important; padding:0 38px 0 0; display:grid!important; grid-template-columns: 1fr .83fr 1.17fr; gap:3px!important; min-height:36px; }
  .resource {display:flex;min-width:0;min-height:35px!important; height:35px; padding:2px!important; gap:2px!important; border-width:1.4px!important; white-space:nowrap;}
  .resource-icon {font-size:13px!important;}
  .resource b {font-size:clamp(10px,3vw,13px)!important;}
  .resource small {font-size:clamp(6px,1.8vw,8px)!important;}
  .skyline,.skyline.truck-stage-0,.skyline.truck-stage-1,.skyline.truck-stage-2,.skyline.truck-stage-3,.skyline.truck-stage-4,.skyline.truck-stage-5 {height:76px!important;border-bottom-width:2px;}
  .skyline:before { background-position:center 42%; }
  .truck-caption {left:5px;right:5px;bottom:5px;gap:3px;}
  .truck-caption span {padding:3px 7px;max-width:69%;border-radius:9px;}
  .truck-caption small {font-size:8px;}
  .truck-caption strong {font-size:10px;}
  .truck-caption button {min-height:35px!important; font-size:9px; padding:3px 7px; border-radius:9px;}
  .upgrade-wrench {font-size:14px;}
  .customers { padding:4px 5px 4px!important; gap:4px!important; }
  .customer {height:113px;min-height:113px!important;gap:1px!important;padding:3px 3px 3px!important;border-radius:11px; border-width:1.5px;}
  .customer:before{height:4px;}
  .customer-top {height:40px;min-height:40px!important;gap:2px;margin:2px 0 0;}
  .customer-portrait,.customer-food {height:40px!important;min-width:0;width:49%;max-width:none;object-fit:contain!important;border-radius:7px;}
  .customer-title {font-size:clamp(8px,2.3vw,9.5px)!important;min-height:19px!important;line-height:1.0;}
  .customer-progress-label {font-size:7px!important;line-height:1!important;}
  .customer-progress-label b {font-size:8px!important;}
  .customer-wait {height:7px!important; min-height:7px;}
  .customer button {font-size:8px!important;height:24px!important;min-height:24px!important;padding:1px 2px;border-radius:7px;}
  .customer .served-mark {min-height:51px;font-size:clamp(18px,5vw,23px)!important;}
  .chapter-strip {height:40px; min-height:40px!important; margin:4px 5px 6px!important; padding:4px 41px 3px 8px!important; border-width:1.5px; border-radius:11px;}
  .chapter-strip-main {font-size:10px!important;}
  .chapter-strip-main strong {font-size:10px!important;}
  .chapter-strip-main span {font-size:9px!important;}
  .chapter-bar {height:8px;margin-top:4px;}
  .story-mini {width:35px;height:35px;top:1px;right:2px;}
  .game-area { margin:0 4px!important; gap:4px!important; grid-template-columns:clamp(63px,18.7vw,76px) minmax(0,1fr)!important; }
  .stations {gap:4px!important;padding:3px 2px!important;border-width:2px!important;border-radius:13px;}
  .station {padding:2px 1px!important; gap:1px!important;border-width:1.5px;border-radius:10px;}
  .station img {width:95%;height:48%!important;object-fit:contain!important;}
  .station b {font-size:clamp(7px,2vw,9px)!important;line-height:1;}
  .station .lvl {font-size:8px!important;}
  .station .gen-charge {font-size:clamp(7px,1.9vw,9px)!important;padding:0 1px!important;min-width:74%!important;}
  .station .gen-track {height:3px;min-height:3px;}
  .station .more {width:20px;height:20px;right:-2px;top:-3px;}
  .board-shell {padding:3px!important;border-width:2px!important;border-radius:13px;min-width:0;}
  .board {grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));gap:2px!important;}
  .tile {border-radius:7px;}
  .instruction-bar {display:none!important;}
  .bottom {margin-top:4px; position:sticky!important;bottom:0; z-index:9; padding:3px 4px calc(3px + env(safe-area-inset-bottom))!important; grid-template-columns:repeat(5,minmax(0,1fr));gap:2px!important; background:linear-gradient(180deg,#ffebc7ee,#f0a75df5)!important; border-top:2px solid #ffdb99;}
  .bottom-btn,.bottom-btn.special {width:100%; min-width:0; height:clamp(55px,17vw,68px)!important; min-height:55px; aspect-ratio:auto!important; padding:0!important; margin:0!important;}
  .bottom-btn img {width:100%;height:100%;object-fit:contain!important;object-position:center!important;}
  .overlay-body {max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 22px);overflow:auto;}
}
@media (max-width:350px) {
  .resources {grid-template-columns:1fr .8fr 1.2fr;}
  .resource small {font-size:6px!important;}
  .resource-icon {font-size:11px!important;}
  .skyline,.skyline.truck-stage-0,.skyline.truck-stage-1,.skyline.truck-stage-2,.skyline.truck-stage-3,.skyline.truck-stage-4,.skyline.truck-stage-5 {height:63px!important;}
  .customer {height:105px;min-height:105px!important;}
  .customer-top {height:34px;min-height:34px!important;}
  .customer-portrait,.customer-food {height:34px!important;}
  .customer-title {font-size:7.5px!important;min-height:17px!important;}
  .customer button {height:22px!important;min-height:22px!important;}
  .game-area {grid-template-columns:58px minmax(0,1fr)!important;gap:3px!important;}
  .station b {font-size:7px!important;}
  .station .gen-charge {font-size:7px!important;}
  .bottom-btn,.bottom-btn.special {min-height:52px;height:52px!important;}
}
@media (max-width:525px) and (max-height:780px) {
  .skyline,.skyline.truck-stage-0,.skyline.truck-stage-1,.skyline.truck-stage-2,.skyline.truck-stage-3,.skyline.truck-stage-4,.skyline.truck-stage-5 {height:56px!important;}
  .customer {height:98px;min-height:98px!important;}
  .customer-top {height:32px;min-height:32px!important;}
  .customer-portrait,.customer-food {height:32px!important;}
  .customer-title {font-size:8px!important;min-height:17px!important;}
  .customer button {height:22px!important;min-height:22px!important;}
  .customers {padding-top:3px!important;padding-bottom:2px!important;}
  .chapter-strip {margin-top:3px!important;margin-bottom:3px!important;}
}
@media (max-width:525px) and (display-mode:standalone) {
  .header {padding-top:max(5px,env(safe-area-inset-top))!important;}
}