/* Phone / tablet play (src/touch.js). Everything here is scoped to
   body.touch-mode, so a desktop never sees any of it. */

#touch-ui, #rotate-hint, .m-touch-guide { display:none; }

/* No pinch-zoom, text selection or callouts while playing on glass. */
body.touch-mode { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  overscroll-behavior:none; }
body.touch-play, body.touch-play canvas { touch-action:none; }

/* --- the four keys a phone lacks: a row bottom-left, inside the safe area.
   (Top-left is the beer gauge, the right edge the route map, bottom-centre
   the BALANS meter.) */
body.touch-mode.touch-play #touch-ui { display:flex; }
#touch-ui { position:fixed; z-index:6; flex-direction:row; gap:9px;
  left:calc(12px + env(safe-area-inset-left)); bottom:calc(12px + env(safe-area-inset-bottom)); }
#touch-ui button { width:46px; height:46px; border-radius:14px; border:3px solid #485178;
  background:#1a1d36d9; color:#fff4d8; font:700 22px/1 'Bahnschrift','Segoe UI',sans-serif;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  box-shadow:3px 4px 0 #10122aa0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#touch-ui button:active { transform:translateY(2px); box-shadow:1px 2px 0 #10122aa0; }
#touch-ui #t-calibrate.flash { border-color:#64ffca; color:#64ffca; }
body.cutscene #touch-ui, body.titlescreen #touch-ui { display:none !important; }

/* --- portrait: ask to turn the phone ------------------------------------- */
@media (orientation: portrait) {
  body.touch-mode #rotate-hint { display:flex; }
}
#rotate-hint { position:fixed; inset:0; z-index:50; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:24px; text-align:center;
  background:linear-gradient(160deg,#272b4d,#16182f 60%); color:#fff4d8;
  font-family:'Bahnschrift','Arial Narrow','Segoe UI',sans-serif; }
#rotate-hint b { font:400 30px/1.1 Impact,'Arial Narrow',sans-serif; letter-spacing:.04em; }
#rotate-hint span { color:#b7bad5; font-size:16px; max-width:280px; }
#rotate-hint .rh-phone { width:46px; height:80px; border:4px solid #64ffca; border-radius:10px;
  margin-bottom:10px; animation:rh-turn 2.2s ease-in-out infinite; }
@keyframes rh-turn { 0%,25% { transform:rotate(0); } 55%,100% { transform:rotate(-90deg); } }

/* --- settings: touch controls replace the keyboard guide ----------------- */
body.touch-mode .m-touch-guide { display:block; }
body.touch-mode .m-key-guide { display:none; }
/* A Balance Board only works on a PC (WebHID + Windows pairing). */
body.touch-mode .m-board-block { display:none; }
.m-touch-guide p { margin:0 0 10px !important; }
.m-touch-guide b { color:#fff4d8; }
.m-tilt-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:8px 0; font-size:11px; letter-spacing:.06em; color:#f2dccf; }
.m-tilt-row input[type=range] { flex:1; max-width:55%; accent-color:#64ffca; }
#menu .m-switch { display:flex; align-items:center; gap:10px; background:#30344a; border:2px solid #68718e;
  border-radius:30px; padding:5px 7px 5px 13px; color:#c2c5d6; font-size:11px; }
#menu .m-switch i { width:18px; height:18px; border-radius:50%; background:#a4abc5; }
#menu .m-switch[aria-checked="true"] { background:#1f3e45; border-color:#5ce7bd; color:#64ffca; }
#menu .m-switch[aria-checked="true"] i { background:#64ffca; }
#m-tilt-status { font-size:11px; color:#b7bad5; margin:6px 0 0 !important; }