/* LAST STRIKE mobile layout. Aono Media (c) 2026
   Touch devices only ((pointer:coarse)); desktop keeps styles.css untouched.
   Portrait: the lane is cropped, not letterboxed. The sim keeps its 1280x720 world, the canvas shows the
   left ~60% of it with the operative anchored left (game.js VIEW), and the thumb pad gets its own zone
   under the strip so thumbs never cover the fight. Landscape: the full 16:9 lane, header hidden, pad floats
   over the pillarbox edges. Menus (start / pause / end) always get the full viewport. */
html,body{overscroll-behavior:none}
.pad{display:none}
canvas,.pad,.pad button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .game-shell{min-width:0;max-width:100vw;overflow:hidden;grid-template-columns:minmax(0,1fr);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .viewport{min-width:0}
  .screen{width:100%;min-width:0;overflow:hidden}
  .card{width:100%;min-width:0}
  .pad{position:fixed;left:0;right:0;bottom:0;z-index:12;pointer-events:none;justify-content:space-between;align-items:flex-end;padding:0 max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  body[data-mode="play"] .pad{display:flex}
  .pad>div{display:flex;align-items:center;gap:12px;pointer-events:none}
  .pad button{pointer-events:auto;width:68px;height:68px;border-radius:50%;border:1px solid #ffffff59;background:#080b0ab8;color:#fff;font-size:26px;font-weight:900;backdrop-filter:blur(6px);box-shadow:0 8px 30px #0008;touch-action:none}
  .pad button[aria-pressed="true"]{background:#ddff3833;border-color:var(--acid);color:var(--acid)}
  .pad .fire{width:82px;height:82px;border-color:var(--acid);color:var(--acid);box-shadow:0 0 0 3px #ddff3822,0 8px 30px #0008}
  .pad .fire[aria-pressed="true"]{background:#ddff3855}
}
/* Portrait phone in play: strip on top, pad zone below */
@media (pointer:coarse) and (orientation:portrait) and (max-width:760px){
  body[data-mode="play"] .game-shell{grid-template-rows:44px auto 1fr 32px}
  body[data-mode="play"] .viewport{height:min(calc(100vw * .92),50dvh)}
  body[data-mode="play"] .viewport canvas{object-fit:cover;object-position:0 50%}
  body[data-mode="play"] .viewport:before,body[data-mode="play"] .viewport:after{display:none}
  body[data-mode="play"] .pad{position:static;align-self:center;align-items:center;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left))}
  body[data-mode="play"] .pad>div:first-child{gap:14px}
  body[data-mode="play"] .pad>div:first-child button{width:72px;height:72px}
  /* right thumb: slide + jump on top, the big fire chip under them */
  body[data-mode="play"] .pad>div:last-child{display:grid;grid-template-columns:repeat(2,64px);gap:10px 12px;justify-items:center}
  body[data-mode="play"] .pad>div:last-child button{width:64px;height:64px}
  body[data-mode="play"] .pad .fire{grid-column:1/-1;width:92px;height:92px}
}
/* Landscape phone: hide the header, keep the sound footer, pad over the pillarboxes */
@media (pointer:coarse) and (orientation:landscape) and (max-height:620px){
  header{display:none}
  .game-shell{grid-template-rows:1fr 28px}
  footer{padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .pad{bottom:28px;padding-bottom:12px}
  .pad button{width:60px;height:60px;font-size:22px}
  .pad .fire{width:72px;height:72px}
  .screen{padding:14px 26px}
  .compact h2{font-size:60px;margin-bottom:14px}
}