/* ═══════════════════════════════════════════════════════════════════════════
   M2 WORLD — MOBILE OVERLAY (additive)
   Scoped entirely under `body.m2w-mobile`. Desktop is untouched.
═══════════════════════════════════════════════════════════════════════════ */

body.m2w-mobile {
  /* iOS address-bar aware viewport unit */
  --m2w-vh: 100vh;
}

@supports (height: 100dvh) {
  body.m2w-mobile { --m2w-vh: 100dvh; }
}

/* Let the game fill the REAL viewport (iOS Safari address bar jitter) */
body.m2w-mobile,
body.m2w-mobile .m2w-wrap--full,
body.m2w-mobile .m2w-canvas-wrap {
  height: var(--m2w-vh) !important;
  min-height: var(--m2w-vh) !important;
}

/* Block iOS pull-to-refresh & rubber-band while playing */
body.m2w-mobile {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Keep long-press selection off the game surface but allow it inside
   text inputs / chat / forum compose areas */
body.m2w-mobile input,
body.m2w-mobile textarea,
body.m2w-mobile [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ── HUD: shrink + respect safe-area-inset ───────────────────────────── */
body.m2w-mobile .m2w-hud {
  padding-top: calc(8px + env(safe-area-inset-top)) !important;
  padding-left: calc(10px + env(safe-area-inset-left)) !important;
  padding-right: calc(10px + env(safe-area-inset-right)) !important;
  font-size: 13px !important;
  gap: 10px !important;
  flex-wrap: wrap;
}
body.m2w-mobile .m2w-hud-brand { font-size: 13px !important; }
body.m2w-mobile .m2w-hud-name,
body.m2w-mobile .m2w-hud-pts   { font-size: 13px !important; }

/* ── Hide desktop-only "Click or Arrow keys" hint on mobile ─────────── */
body.m2w-mobile #m2w-controls-hint { display: none !important; }

/* ── Existing bottom toolbar: hidden on mobile (virtual controller replaces it) */
body.m2w-mobile .m2w-toolbar {
  display: none !important;
}

/* ── Zoom buttons: frosted glass, top-right ── */
body.m2w-mobile .m2w-zoom-ctrl {
  right: calc(12px + env(safe-area-inset-right)) !important;
  top: calc(60px + env(safe-area-inset-top)) !important;
  bottom: auto !important;
  gap: 4px !important;
}
body.m2w-mobile .m2w-zoom-btn {
  width: 36px !important;
  height: 36px !important;
  font-size: 16px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 215, 140, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border-radius: 50% !important;
  color: rgba(255, 215, 140, 0.85) !important;
  touch-action: manipulation;
}

/* ── Zone / panel: scale to viewport ──────────────────────────────────── */
body.m2w-mobile .m2w-panel {
  max-width: min(92vw, 360px) !important;
  right: calc(8px + env(safe-area-inset-right)) !important;
  left: auto !important;
  top: calc(54px + env(safe-area-inset-top)) !important;
  max-height: calc(var(--m2w-vh) - 200px) !important;
  overflow-y: auto !important;
  font-size: 13px !important;
}

/* ── Main Menu overlay: full-screen card on phones ───────────────────── */
body.m2w-mobile .m2w-menu-window {
  width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  height: calc(var(--m2w-vh) - 40px) !important;
  max-height: calc(var(--m2w-vh) - 40px) !important;
  top: calc(env(safe-area-inset-top) + 10px) !important;
  left: 10px !important;
  right: 10px !important;
  transform: none !important;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 140, 0.10) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
}
body.m2w-mobile .m2w-menu-nav {
  flex-wrap: wrap !important;
  padding: 8px !important;
  gap: 6px !important;
}
body.m2w-mobile .m2w-menu-navbtn {
  padding: 10px 12px !important;
  font-size: 12px !important;
  flex: 1 1 calc(50% - 10px) !important;
  min-width: 0 !important;
  border-radius: 10px !important;
}
body.m2w-mobile .m2w-menu-pane {
  padding: 12px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(var(--m2w-vh) - 150px) !important;
}
body.m2w-mobile .m2w-char-panels {
  grid-template-columns: 1fr !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
body.m2w-mobile .m2w-hero {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
body.m2w-mobile .m2w-hero__meta {
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}
body.m2w-mobile .m2w-menu-close {
  width: 34px !important;
  height: 34px !important;
  font-size: 18px !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 215, 140, 0.12) !important;
  border-radius: 50% !important;
}

/* ── Chat bar: float above mobile keyboard ── */
body.m2w-mobile .m2w-chat-bar {
  bottom: calc(var(--m2w-kbd, 0px) + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100vw - 28px) !important;
  max-width: 480px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 215, 140, 0.10) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
body.m2w-mobile .m2w-chat-input {
  font-size: 16px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}

/* ── Interior overlays (tavern, scriptorium, practice hall, etc.) ────── */
body.m2w-mobile .m2w-tavern-board,
body.m2w-mobile .m2w-scrip-board {
  width: min(92vw, 380px) !important;
  max-width: 92vw !important;
  max-height: calc(var(--m2w-vh) - 140px) !important;
  right: 8px !important;
  top: 64px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  font-size: 12px !important;
}
body.m2w-mobile .m2w-board-collapse,
body.m2w-mobile .m2w-scrip-board-collapse {
  width: 28px !important;
  height: 28px !important;
}
body.m2w-mobile .m2w-tavern-header,
body.m2w-mobile .m2w-scrip-header,
body.m2w-mobile .m2w-ph-header {
  padding: 10px 12px !important;
  flex-wrap: wrap;
  gap: 6px;
}
body.m2w-mobile .m2w-tavern-name,
body.m2w-mobile .m2w-scrip-name,
body.m2w-mobile .m2w-ph-name { font-size: 14px !important; }
body.m2w-mobile .m2w-tav-subtitle,
body.m2w-mobile .m2w-scrip-subtitle,
body.m2w-mobile .m2w-ph-subtitle { font-size: 10px !important; }

body.m2w-mobile .m2w-tavern-hint,
body.m2w-mobile .m2w-scrip-hint,
body.m2w-mobile .m2w-ph-hint {
  font-size: 10px !important;
  bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  max-width: calc(100vw - 24px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ── Karaoke / Practice-hall-app iframe overlays: full-screen on phones */
body.m2w-mobile .m2w-karaoke-frame,
body.m2w-mobile .m2w-ph-app-frame {
  width: 100vw !important;
  height: var(--m2w-vh) !important;
  max-width: 100vw !important;
  max-height: var(--m2w-vh) !important;
  border-radius: 0 !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

/* ── Player card popup: cap width ────────────────────────────────────── */
body.m2w-mobile .m2w-player-card {
  max-width: calc(100vw - 32px) !important;
}

/* ── Wish / manuscript modals: fit viewport ──────────────────────────── */
body.m2w-mobile .m2w-wish-modal,
body.m2w-mobile .m2w-manuscript-modal {
  width: calc(100vw - 24px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(var(--m2w-vh) - 40px) !important;
}

/* ── Music toast & interact prompt: keep clear of controller cluster ── */
body.m2w-mobile .m2w-music-toast,
body.m2w-mobile .m2w-interact-prompt,
body.m2w-mobile .m2w-sing-prompt,
body.m2w-mobile .m2w-karaoke-prompt,
body.m2w-mobile .m2w-ph-prompt {
  bottom: calc(200px + env(safe-area-inset-bottom)) !important;
  max-width: calc(100vw - 32px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 215, 140, 0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   VIRTUAL CONTROLLER (injected by world-mobile.js)
   Minimalist frosted-glass aesthetic
═══════════════════════════════════════════════════════════════════════ */

.m2w-mc-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  font-family: system-ui, -apple-system, sans-serif;
}
.m2w-mc-root * { pointer-events: auto; }

/* ── Joystick (bottom-left) ─────────────────────────────────────────── */
.m2w-mc-stick {
  position: absolute;
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 215, 140, 0.20);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.m2w-mc-stick::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 55%, rgba(255, 215, 140, 0.06) 100%);
  pointer-events: none;
}
.m2w-mc-stick::after { display: none; }
.m2w-mc-puck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(255, 215, 140, 0.85);
  border: 1.5px solid rgba(255, 230, 170, 0.6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 80ms ease-out;
  pointer-events: none;
}
.m2w-mc-stick.m2w-mc-active {
  border-color: rgba(255, 215, 140, 0.40);
}
.m2w-mc-stick.m2w-mc-active .m2w-mc-puck {
  background: rgba(255, 225, 160, 0.95);
  box-shadow: 0 2px 14px rgba(255, 200, 100, 0.35);
}

/* ── Action cluster (bottom-right) ──────────────────────────────────── */
.m2w-mc-actions {
  position: absolute;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  touch-action: manipulation;
}

/* Utility rows: horizontally centered button strips */
.m2w-mc-util-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.m2w-mc-btn--util {
  transition: transform 180ms cubic-bezier(.3, 1.2, .4, 1), opacity 140ms ease;
  transform-origin: center;
}

.m2w-mc-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 215, 140, 0.18);
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 215, 140, 0.90);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 80ms ease, background 100ms ease, border-color 100ms ease;
  user-select: none;
}
.m2w-mc-btn:active,
.m2w-mc-btn.m2w-mc-press {
  transform: scale(0.90);
  background: rgba(255, 215, 140, 0.18);
  border-color: rgba(255, 215, 140, 0.35);
}
.m2w-mc-btn[aria-disabled="true"],
.m2w-mc-btn--hidden {
  opacity: 0.2;
  pointer-events: none;
}
/* Hide text labels — icons are clear enough */
.m2w-mc-btn .m2w-mc-lbl {
  display: none;
}

/* Primary action button — warm accent pill */
.m2w-mc-btn--primary {
  width: 100%;
  min-width: 98px;
  height: 46px;
  border-radius: 23px;
  background: rgba(255, 215, 140, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 230, 170, 0.50);
  color: #1a0e04;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.2px;
  padding: 0 16px;
  box-shadow: 0 2px 12px rgba(255, 200, 100, 0.20);
}
.m2w-mc-btn--primary:active,
.m2w-mc-btn--primary.m2w-mc-press {
  transform: scale(0.95);
  background: rgba(255, 225, 160, 0.95);
  border-color: rgba(255, 235, 180, 0.65);
}
.m2w-mc-btn--primary .m2w-mc-lbl { display: none; }

/* Toggle chevron — smaller, subtle */
.m2w-mc-btn--toggle {
  width: 36px;
  height: 36px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 215, 140, 0.12);
}
.m2w-mc-btn--toggle .m2w-mc-chev {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.5, 1.4, .4, 1);
}
.m2w-mc-actions.m2w-mc-collapsed .m2w-mc-btn--toggle .m2w-mc-chev {
  transform: rotate(180deg);
}

/* Utility buttons hidden when collapsed */
.m2w-mc-actions.m2w-mc-collapsed .m2w-mc-btn--util {
  display: none !important;
}

/* When collapsed: just toggle + primary stacked */
.m2w-mc-actions.m2w-mc-collapsed {
  gap: 6px;
}
.m2w-mc-actions.m2w-mc-collapsed .m2w-mc-btn--primary {
  height: 44px;
  min-width: 82px;
  font-size: 10px;
  letter-spacing: 1px;
}

/* ── Controller auto-hide when menus/overlays are open ───────────────── */
/* We don't KNOW which overlay is open from CSS alone, so controller
   visibility is driven by JS toggling `.m2w-mc-hidden` on the root. */
.m2w-mc-root.m2w-mc-hidden {
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 180ms ease;
}

/* Landscape: compact everything */
@media (max-height: 500px) and (orientation: landscape) {
  body.m2w-mobile .m2w-mc-stick {
    width: 90px; height: 90px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  body.m2w-mobile .m2w-mc-puck {
    width: 36px; height: 36px; margin: -18px 0 0 -18px;
  }
  body.m2w-mobile .m2w-mc-actions {
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 5px;
  }
  body.m2w-mobile .m2w-mc-btn { width: 38px; height: 38px; font-size: 14px; }
  body.m2w-mobile .m2w-mc-btn--toggle { width: 30px; height: 30px; font-size: 12px; }
  body.m2w-mobile .m2w-mc-btn--primary { height: 38px; min-width: 76px; font-size: 10px; }
  body.m2w-mobile .m2w-toolbar { display: none !important; }
}

/* Very small screens */
@media (max-width: 380px) {
  body.m2w-mobile .m2w-mc-stick { width: 96px; height: 96px; }
  body.m2w-mobile .m2w-mc-puck { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  body.m2w-mobile .m2w-mc-btn { width: 38px; height: 38px; font-size: 14px; }
  body.m2w-mobile .m2w-mc-btn--toggle { width: 30px; height: 30px; }
  body.m2w-mobile .m2w-mc-btn--primary { height: 40px; min-width: 76px; font-size: 10px; }
}

/* ── Orientation hint (portrait, very short screens) ─────────────────── */
.m2w-mc-orient {
  position: fixed;
  inset: 0;
  background: rgba(6, 4, 2, 0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: none;
  place-items: center;
  color: rgba(255, 215, 140, 0.90);
  z-index: 9000;
  text-align: center;
  padding: 32px;
  font-family: system-ui, -apple-system, sans-serif;
}
.m2w-mc-orient__inner { max-width: 280px; }
.m2w-mc-orient__icon { font-size: 40px; margin-bottom: 16px; animation: m2wRot 2.4s ease-in-out infinite; display: inline-block; }
.m2w-mc-orient__title { font-size: 16px; font-weight: 600; letter-spacing: 1px; margin-bottom: 8px; color: rgba(255, 225, 160, 0.95); }
.m2w-mc-orient__sub { font-size: 12px; opacity: 0.6; line-height: 1.6; }
@keyframes m2wRot {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(78deg); }
}

/* ── NPC speech bubbles — mobile ─────────────────────────────────────────
   Desktop bubbles use a fixed 220 px max-width which wraps long quotes
   into 3-4 lines and looks tall on phone screens. On mobile we widen the
   bubble to use more of the screen, shrink the font slightly, and tighten
   padding so each toast stays compact. All three bubble families are
   covered: guard/villager/scribe, bartender/innkeeper, and trader.
──────────────────────────────────────────────────────────────────────── */

/* guard · villager · scribe */
body.m2w-mobile .m2w-guard-greet__bubble {
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px 12px 7px;
  line-height: 1.35;
}
body.m2w-mobile .m2w-guard-greet__text {
  font-size: 12.5px;
}
body.m2w-mobile .m2w-guard-greet__prompt {
  font-size: 10px;
  margin-top: 4px;
}
body.m2w-mobile .m2w-guard-greet__prompt kbd {
  font-size: 10px;
  padding: 0 4px;
}

/* bartender · innkeeper */
body.m2w-mobile .m2w-bart-greet__bubble {
  white-space: normal;
  max-width: min(260px, calc(100vw - 24px));
  padding: 6px 12px 7px;
  line-height: 1.35;
}
body.m2w-mobile .m2w-bart-greet__text {
  font-size: 12.5px;
}
body.m2w-mobile .m2w-bart-greet__prompt {
  font-size: 10px;
  margin-top: 4px;
}
body.m2w-mobile .m2w-bart-greet__prompt kbd {
  font-size: 10px;
  padding: 0 4px;
}

/* trader (Morrow) */
body.m2w-mobile .m2w-trader-greet__bubble {
  white-space: normal;
  max-width: min(260px, calc(100vw - 24px));
  padding: 6px 12px 7px;
  line-height: 1.35;
}
body.m2w-mobile .m2w-trader-greet__text {
  font-size: 12.5px;
}
body.m2w-mobile .m2w-trader-greet__prompt {
  font-size: 10px;
  margin-top: 4px;
}
body.m2w-mobile .m2w-trader-greet__prompt kbd {
  font-size: 10px;
  padding: 0 4px;
}