/* 8.0: stable landscape mobile stage; desktop keeps its normal fluid layout. */
html.mobile-mode, html.mobile-mode body {
  position: fixed; inset: 0; width: 100%; height: 100%; margin: 0;
  padding: 0; overflow: hidden; overscroll-behavior: none;
}
body.mobile-mode { -webkit-text-size-adjust: 100%; }
body.mobile-mode #wrap { position: absolute; }
body.mobile-mode #game { border-radius: 0; touch-action: none; }
body.mobile-mode #touch { touch-action: none; }
/* A small viewport stays the same when browser toolbars expand/collapse.
   JS snapshots this measurement, so legacy browsers also ignore height jitter. */
#mobileViewportProbe {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  height: 100svh; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
/* Safe areas are already removed from the stage, including the touch layer. */
body.mobile-mode #tl, body.mobile-mode #tr, body.mobile-mode #tj { bottom: var(--touch-lift); }
body.mobile-mode #tx { bottom: calc(var(--touch-lift) - 4px); }
body.mobile-mode #td { bottom: calc(var(--touch-lift) + 78px); }
body.mobile-mode #ts { bottom: calc(var(--touch-lift) + 92px); }
body.mobile-mode #tm { bottom: calc(var(--touch-lift) + 78px); }
body.mobile-mode #tp { top: 10px; }
body.mobile-mode #overlay { padding: 12px; max-height: var(--menu-height, 100%); }
body.mobile-mode #panel { max-height: 100%; overscroll-behavior: contain; }
body.mobile-mode #panel input:not([type=range]), body.mobile-mode #panel select { font-size: 16px; }
#rotateScreen {
  position: fixed; inset: 0; z-index: 1000; padding: 28px;
  padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right))
           max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: #0b3022; color: #fff8da; touch-action: none;
}
#rotateScreen[hidden], #mobileFullscreen[hidden] { display: none; }
#rotateScreen .rotatePhone {
  width: 100px; height: 57px; border: 4px solid #ffd23f; border-radius: 12px;
  display: grid; place-items: center; font-size: 28px; color: #ffd23f;
}
#rotateScreen h1 { font: 32px 'Lilita One', sans-serif; margin: 22px 0 8px; }
#rotateScreen p { max-width: 330px; margin: 0 0 18px; line-height: 1.5; }
#rotateScreen small { margin-top: 14px; max-width: 330px; line-height: 1.4; }
#mobileFullscreen {
  position: fixed; z-index: 25; left: max(8px, env(safe-area-inset-left));
  top: max(8px, env(safe-area-inset-top)); font-size: 13px; padding: 6px 12px;
  min-height: 40px; background: #153e2f;
}
body.mobile-mode:has(#mobileFullscreen:not([hidden])) #overlay { padding-top: 52px; }
body.mobile-blocked #wrap { visibility: hidden; pointer-events: none; }

/* Supplied direction artwork: the existing touch handler owns the .on state.
   Keep the original adjustable hit areas; only the artwork changes. */
body.touch #tl, body.touch #tr {
  border: 0;
  padding: 0;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  touch-action: none;
}
body.touch #tl { background-image: url("assets/controls/Left_UnPressed.webp"); }
body.touch #tr { background-image: url("assets/controls/Right_UnPressed.webp"); }
body.touch #tl.on { background-image: url("assets/controls/Left_Pressed.webp"); }
body.touch #tr.on { background-image: url("assets/controls/Right_Pressed.webp"); }