/* Animal Party — touch controls (iPhone/iPad).
   Only active when touch.js adds .touch to <body>.
   The game itself reads keyboard codes from window keydown/keyup
   (held set + per-frame edge set); touch.js synthesises those events,
   so the game bundle is NOT modified. */
#touch-ui{display:none}
body.touch.playing #touch-ui{display:block}
body.touch{overscroll-behavior:none}
body.touch footer{display:none}

#touch-ui{position:fixed;inset:0;z-index:4;pointer-events:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:none}
#touch-ui *{touch-action:none;-webkit-tap-highlight-color:transparent}

/* --- virtual joystick, bottom-left --- */
#joy{position:absolute;left:18px;bottom:20px;width:150px;height:150px;
  border-radius:50%;pointer-events:auto;
  background:rgba(246,244,231,.28);border:2px solid rgba(40,55,46,.45);
  box-shadow:0 4px 18px rgba(36,53,43,.18)}
#joy-knob{position:absolute;left:50%;top:50%;width:64px;height:64px;
  margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(246,244,231,.92);border:2px solid rgba(40,55,46,.55);
  box-shadow:0 3px 10px rgba(36,53,43,.3)}
#joy.active{background:rgba(247,119,78,.3)}

/* --- action buttons, bottom-right (MOBA layout) --- */
.tbtn{position:absolute;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;border:2px solid rgba(40,55,46,.55);
  background:rgba(246,244,231,.88);color:#26352c;
  font-weight:900;text-align:center;line-height:1.1;
  box-shadow:0 4px 0 rgba(40,55,46,.25),0 4px 14px rgba(36,53,43,.2)}
.tbtn small{display:block;font-size:8px;font-weight:800;letter-spacing:1px;opacity:.65;margin-top:2px}
.tbtn.active{background:#f7774e;color:#fff7df;border-color:#c74e30;
  box-shadow:0 2px 0 #c74e30;transform:translateY(2px)}
#btn-jump{right:16px;bottom:20px;width:76px;height:76px;font-size:15px}
#btn-punch{right:104px;bottom:28px;width:68px;height:68px;font-size:14px}
#btn-kick{right:100px;bottom:110px;width:60px;height:60px;font-size:13px}
#btn-roll{right:16px;bottom:108px;width:60px;height:60px;font-size:13px}
#btn-grab{right:186px;bottom:100px;width:56px;height:56px;font-size:12px}
#btn-throw{right:186px;bottom:26px;width:52px;height:52px;font-size:12px}
#btn-sprint{left:188px;bottom:64px;width:56px;height:56px;font-size:11px}

/* --- help "?" --- */
#btn-help{position:absolute;top:112px;right:16px;width:44px;height:44px;
  pointer-events:auto;border-radius:50%;border:2px solid rgba(40,55,46,.55);
  background:rgba(246,244,231,.9);color:#26352c;font-size:20px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(36,53,43,.2)}

/* --- rotate hint, portrait only, non-blocking --- */
#rotate-hint{display:none;position:absolute;top:112px;left:50%;
  transform:translateX(-50%);pointer-events:auto;white-space:nowrap;
  background:rgba(38,53,44,.88);color:#faeecb;border-radius:20px;
  padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.5px}
body.touch.playing #rotate-hint{display:block}
@media (orientation:landscape){body.touch.playing #rotate-hint{display:none}}

/* --- compact menu for short landscape phones ---
   Pre-existing issue: at 844x390 the menu (header + big title + 4
   selects + LET'S RUMBLE) is taller than the viewport and body has
   overflow:hidden, so the start button is unreachable. Footer is
   already hidden on touch; shrink the rest so everything fits. */
@media (max-height:520px){
  body.touch header{height:56px}
  body.touch #menu{margin-top:10px;width:340px}
  body.touch #menu h1{font-size:44px}
  body.touch #menu p{display:none}
  body.touch #menu .small{display:none}
  body.touch #menu .setup{gap:6px;max-width:320px}
  body.touch #menu .setup select{padding:7px 6px}
  body.touch #play{width:320px;padding:13px 18px;margin-top:10px}
  body.touch #poster{display:none}
  body.touch #btn-help{top:64px}
  body.touch #rotate-hint{top:64px}
}

/* --- compact layout for narrow portrait phones --- */
@media (orientation:portrait) and (max-width:500px){
  #joy{left:12px;bottom:16px;width:124px;height:124px}
  #joy-knob{width:52px;height:52px;margin:-26px 0 0 -26px}
  #btn-sprint{left:150px;bottom:56px;width:48px;height:48px;font-size:10px}
  #btn-jump{right:10px;bottom:16px;width:64px;height:64px;font-size:13px}
  #btn-punch{right:86px;bottom:22px;width:58px;height:58px;font-size:12px}
  #btn-kick{right:84px;bottom:88px;width:52px;height:52px;font-size:11px}
  #btn-roll{right:10px;bottom:88px;width:52px;height:52px;font-size:11px}
  #btn-grab{right:150px;bottom:82px;width:48px;height:48px;font-size:10px}
  #btn-throw{right:150px;bottom:20px;width:46px;height:46px;font-size:10px}
  #rotate-hint{top:96px;font-size:10px}
  #btn-help{top:96px}
}