/* Put the scene, equation and answers in the same phone viewport. */
@media (max-width:740px), (max-width:1000px) and (max-height:520px) and (orientation:landscape) {
  html{height:100%;overscroll-behavior-y:none}
  body{min-height:100svh;height:100svh;display:flex;flex-direction:column;margin:0;overflow-x:hidden}
  body>header{position:relative;flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px 12px;min-height:0;width:100%;max-width:none}
  header .brand{font-size:17px;gap:7px;min-height:34px}
  header .brand small{display:none!important}
  header .logo{width:28px;height:34px;font-size:26px;border-radius:7px}
  header nav{width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:6px;min-height:31px}
  header nav>button{font-size:11px!important;line-height:1.2;min-height:31px!important;padding:7px 11px!important}
  header nav .language-picker{position:absolute;right:12px;top:6px}
  header .language-select{min-height:33px;max-width:121px;font-size:11px;padding:7px 22px 7px 8px}
  header nav #fullscreen,header nav .site-return{display:none!important}
  body>main{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;padding:0 8px 5px}
  .intro{display:none}
  .game-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(205px,1fr) auto;gap:7px;align-items:stretch}
  .world{height:100%;min-height:205px;padding-bottom:0;display:flex;flex-direction:column;border-radius:12px;--boundary-y:29px}
  .grass{flex:1;height:auto;min-height:130px;padding:0}
  .road{flex:none;height:70px}
  .scene-bottom{display:none}
  .scene-top{left:10px;right:8px;top:8px;height:29px;padding:0}
  .park-title b{font-size:20px;line-height:25px;border-width:2px;padding:0 6px}
  #occupancy{font-size:11px;padding:7px 9px;border-radius:8px}
  .parking{top:43px;left:8.2%;padding-right:116px;height:calc(100% - 47px)}
  .bays{height:100%;grid-template-rows:minmax(0,1fr) 26px minmax(0,1fr)}
  .bays:not(:has(.lower-bay)){grid-template-rows:minmax(0,1fr) 32px}
  .bay{height:100%;min-height:0}
  .parking-aisle{height:100%;font-size:9px;padding:0 4px;letter-spacing:1px}
  .parking-aisle span:last-child{font-size:25px}
  .bay-number{font-size:10px;right:3px;bottom:2px}
  .car,.bay .car{width:28px;height:46px}
  .car b,.bay .car b{width:18px;height:20px;line-height:20px;left:calc(50% - 9px);top:15px;font-size:16px;padding:0}
  .queue{top:calc(68% - 23px);gap:12px}
  .queue .car{margin-right:9px}
  .road-label{display:none}
  .gate-island,.gate-island .gate-zone{height:42px}
  .gate-island{bottom:3px}
  .gate-island .post{height:30px}
  .gate-island .traffic{height:26px;top:-20px;gap:3px;padding:3px}
  .gate-island .traffic i{height:8px}
  .gate-label{top:-37px;font-size:9px;padding:2px 4px}
  .gate-island:after{bottom:45px;height:25px}
  .total-sign{top:89px;right:8px;width:51px;padding:5px 3px}
  .total-sign small{font-size:10px;line-height:1.3;letter-spacing:0}
  .total-sign strong{font-size:28px;line-height:1.15}
  .world>#signal{top:43px;bottom:auto;left:auto;right:8px;max-width:90px;height:auto;min-height:30px;padding:5px 6px;font-size:10px;line-height:1.3;white-space:normal;border-radius:7px;gap:4px}
  .world>#signal:before{width:7px;height:7px;flex-shrink:0}
  .task{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:10px 12px;border-radius:12px}
  .task-heading,.task h2,.equation,.answers{grid-column:1/-1}
  .task-heading{min-height:25px;gap:8px}
  .task-heading .tag{font-size:11px;padding:6px 9px}
  #read{font-size:12px;padding:5px;min-height:30px;white-space:nowrap}
  .task h2{font-size:18px;line-height:1.3;min-height:0;margin:0}
  #task-detail,.answer-label{display:none}
  .equation{min-height:43px;font-size:32px;padding:5px 10px;margin:0;gap:10px;border-radius:9px}
  .equation .unknown{font-size:32px;min-width:35px;padding:2px 7px}
  .answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .answers button{min-height:51px;height:51px;font-size:28px;padding:5px 2px;border-radius:9px}
  .feedback{grid-column:1;align-self:center;min-height:33px;margin:0;padding:0;font-size:11px;line-height:1.5}
  .hint{grid-column:2;align-self:center;margin:0;padding:7px 4px;font-size:11px;max-width:105px;min-height:34px;line-height:1.4}
  .task .dots:not([hidden]){position:absolute;bottom:calc(100% + 6px);left:8px;right:8px;max-height:145px;overflow:auto;margin:0;padding:12px;background:#fffefa;border:1px solid #c8d8bd;border-radius:10px;box-shadow:0 8px 20px #26362633;z-index:50;font-size:12px}
  .dot-group{margin:5px 0;gap:5px}
  .dot{width:13px;height:13px}
  main>footer{flex:none;display:flex;align-items:center;justify-content:flex-end;min-height:26px;margin:2px 0 0;padding:0 3px;font-size:11px}
  main>footer>span{display:none}
  footer button,footer a{min-height:26px;font-size:11px;padding:4px 8px;line-height:1.2}
  .version-links{gap:8px}
  html[lang=en] header .brand{font-size:16px}
  html[lang=en] .task h2{font-size:16px;line-height:1.3}
  html[lang=en] .total-sign small{font-size:9px}
  html[lang=en] .world>#signal{font-size:10px}
  html[lang=en] .parking-aisle{font-size:8px;letter-spacing:0}
}
@media(max-width:370px){.parking{padding-right:111px}.task{padding-inline:10px}.task h2{font-size:17px}.hint{max-width:88px}html[lang=en] .task h2{font-size:15px}}
@media(max-width:740px) and (max-height:650px){.car,.bay .car{width:24px;height:38px}.car b,.bay .car b{top:11px}.queue{top:calc(68% - 19px)}}
@media(max-width:1000px) and (max-height:520px) and (orientation:landscape){
  body>header{min-height:44px;flex-wrap:nowrap}
  header nav{width:auto;margin-left:auto;padding-right:130px}
  .game-layout{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);grid-template-rows:minmax(205px,1fr);gap:8px}
  .task{align-content:center}
  main>footer{display:none}
  .world{min-height:205px}
}
/* Stable two-row parking geometry: percentage bay heights must not resolve
   against the entire grid and push the lower row through the fence. */
@media(max-width:740px), (max-width:1000px) and (max-height:520px) and (orientation:landscape){
 .parking{height:auto;bottom:76px}
 .bays{height:100%;grid-template-rows:minmax(0,1fr) 26px minmax(0,1fr)}
 .bays:not(:has(.lower-bay)){grid-template-rows:minmax(0,1fr) 32px}
 .bay{height:auto;min-height:0}
 .parking-aisle{height:auto;min-height:0}
 .world{min-height:280px;max-height:430px}
 .grass{min-height:210px}
 .game-layout{grid-template-rows:minmax(280px,1fr) auto}
}
@media(max-width:1000px) and (max-height:520px) and (orientation:landscape){
 .game-layout{grid-template-rows:minmax(280px,1fr)}
}
@media(max-width:740px){
 .game-layout{grid-template-rows:clamp(280px,43svh,370px) auto;align-content:start}
 .world{max-height:none}
}