/* Metin2 Web mobile control skin. Safe-area aware and Safari selection/gesture resistant. */
:root.m2-mobile-mode, body.m2-mobile-mode {
  --m2-ui: clamp(44px, 7.5vmin, 76px);
  --m2-gap: clamp(6px, 1.2vmin, 12px);
  --m2-bg: rgba(18,14,10,.76);
  --m2-border: rgba(231,211,167,.28);
  --m2-text: #f0dfba;
  --m2-safe-b: env(safe-area-inset-bottom, 0px);
  --m2-safe-t: env(safe-area-inset-top, 0px);
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.m2-mobile-mode { position:fixed; inset:0; overflow:hidden; }
:root.m2-mobile-game, body.m2-mobile-game {
  -webkit-touch-callout:none!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}
canvas.m2-mobile-canvas {
  touch-action:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
}
.m2-mobile-ui {
  display:none;
  position:fixed; inset:0; z-index:5; pointer-events:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--m2-text);
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}
.m2-mobile-ui button,.m2-mobile-ui input {
  font:inherit;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.m2-mobile-ui button {
  appearance:none; border:1px solid var(--m2-border); color:var(--m2-text);
  background:linear-gradient(180deg,rgba(63,51,35,.82),rgba(19,15,11,.86));
  box-shadow:0 4px 14px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08);
}
.m2-mobile-ui.visible { display:block; }
.m2-mobile-ui button:active { transform:translateY(1px) scale(.97); filter:brightness(1.22); }
.m2-world-surface { display:none; }
.m2-mobile-top {
  position:absolute; right:calc(10px + var(--m2-safe-b)); top:calc(10px + var(--m2-safe-t));
  display:flex; gap:4px; flex-wrap:nowrap; pointer-events:auto; z-index:8;
  align-items:center;
}
.m2-btn { width:var(--m2-ui); height:calc(var(--m2-ui)*.72); border-radius:12px; font-weight:800; font-size:clamp(12px,2.1vmin,18px); }
.m2-btn-esc { width:calc(var(--m2-ui)*1.1); }
.m2-joystick {
  position:absolute; left:calc(18px + env(safe-area-inset-left,0px));
  bottom:calc(18px + var(--m2-safe-b));
  width:clamp(112px,22vmin,190px); height:clamp(112px,22vmin,190px);
  border-radius:50%; border:1px solid rgba(230,213,180,.24);
  background:radial-gradient(circle,rgba(35,29,22,.58),rgba(9,8,6,.42));
  box-shadow:inset 0 0 24px rgba(0,0,0,.38),0 10px 28px rgba(0,0,0,.24);
  pointer-events:auto; z-index:6; touch-action:none;
}
.m2-joystick:before {
  content:""; position:absolute; inset:22%; border-radius:50%;
  border:1px dashed rgba(235,218,184,.15);
}
.m2-joystick-knob {
  position:absolute; left:50%; top:50%; width:43%; height:43%; margin:-21.5%;
  border-radius:50%; background:rgba(225,204,160,.18); border:1px solid rgba(240,221,185,.34);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  pointer-events:none;
}
.m2-actions {
  position:absolute; right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(14px + var(--m2-safe-b)); display:flex; align-items:flex-end; gap:12px;
  pointer-events:auto; z-index:6;
}
.m2-action.m2-attack {
  width:clamp(76px,13vmin,112px); height:clamp(76px,13vmin,112px); border-radius:50%;
  font-size:clamp(16px,2.9vmin,25px); font-weight:900;
  background:radial-gradient(circle at 40% 30%,rgba(100,82,56,.82),rgba(17,13,9,.92));
}
.m2-skills { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.m2-skill { width:clamp(38px,6.8vmin,58px); height:clamp(38px,6.8vmin,58px); border-radius:10px; font-weight:800; font-size:clamp(10px,1.7vmin,14px); }
.m2-utility {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(10px + var(--m2-safe-b)); display:flex; gap:6px; pointer-events:auto; z-index:7;
}
.m2-util { min-width:clamp(60px,10vmin,94px); height:clamp(42px,6.5vmin,56px); border-radius:9px; padding:5px 8px; }
.m2-util span { display:block; font-size:clamp(9px,1.5vmin,12px); font-weight:800; }
.m2-util small { display:block; opacity:.58; font-size:clamp(7px,1.2vmin,10px); margin-top:2px; }
.m2-chat {
  position:absolute; left:50%; transform:translate(-50%,20px); bottom:calc(18px + var(--m2-safe-b) + var(--m2-keyboard-offset, 0px));
  width:min(92vw,620px); display:flex; gap:7px; opacity:0; visibility:hidden;
  transition:opacity .12s,transform .12s; pointer-events:none; z-index:10;
}
.m2-chat.open { opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; }
.m2-chat-input {
  min-width:0; flex:1; height:48px; box-sizing:border-box; padding:0 14px;
  border:1px solid rgba(232,214,179,.32); border-radius:12px;
  background:rgba(7,6,5,.94); color:#fff; -webkit-text-fill-color:#fff;
  caret-color:#fff; outline:none; font-size:17px;
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
  pointer-events:auto;
}
.m2-chat-input::placeholder { color:rgba(255,255,255,.56); -webkit-text-fill-color:rgba(255,255,255,.56); }
.m2-chat-input:focus { border-color:rgba(232,214,179,.72); }
.m2-chat-send,.m2-chat-close { height:48px; border-radius:12px; padding:0 15px; pointer-events:auto; }
@media (orientation:portrait) {
  .m2-utility { bottom:calc(12px + var(--m2-safe-b)); left:auto; right:calc(12px + var(--m2-safe-b)); transform:none; flex-direction:column; }
  .m2-actions { right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(124px + var(--m2-safe-b)); }
  .m2-skills { grid-template-columns:repeat(4,1fr); }
}
@media (pointer:fine) and (min-width:900px) {
  /* ?mobile=1 intentionally makes the same controls visible on PC for testing. */
  .m2-mobile-ui { --m2-ui:64px; --m2-gap:8px; }
}

/* Stable requested layout refinements: keep the existing skin, only reposition
   the requested utility controls and add the single-finger camera/zoom controls. */
.m2-utility {
  top:calc(var(--m2-safe-t) + var(--m2-ui)*.86);
  right:calc(10px + env(safe-area-inset-right,0px));
  left:auto;
  bottom:auto;
  transform:none;
  display:flex;
  flex-direction:row;
  gap:4px;
  pointer-events:auto;
  z-index:8;
}
.m2-util {
  min-width:clamp(54px,8.6vmin,76px);
  width:clamp(54px,8.6vmin,76px);
  height:clamp(34px,5.1vmin,44px);
  padding:3px 5px;
  border-radius:8px;
}
.m2-util span { font-size:clamp(8px,1.25vmin,10px); }
.m2-util small { font-size:clamp(6px,1vmin,8px); margin-top:1px; }
.m2-chat-open {
  position:absolute;
  top:calc(var(--m2-safe-t) + var(--m2-ui)*1.52);
  right:calc(10px + env(safe-area-inset-right,0px));
  z-index:8;
}
.m2-zoom {
  position:absolute;
  left:calc(18px + env(safe-area-inset-left,0px) + clamp(112px,22vmin,190px) - 84px);
  bottom:calc(18px + var(--m2-safe-b) + clamp(112px,22vmin,190px) + 8px);
  display:flex;
  flex-direction:column;
  gap:5px;
  pointer-events:auto;
  z-index:8;
}
.m2-zoom-btn {
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  font-weight:900;
}
.m2-right-joystick {
  position:absolute;
  right:calc(184px + env(safe-area-inset-right,0px));
  bottom:calc(28px + var(--m2-safe-b));
  width:clamp(106px,20vmin,176px);
  height:clamp(106px,20vmin,176px);
  border-radius:50%;
  border:1px solid rgba(230,213,180,.24);
  background:radial-gradient(circle,rgba(35,29,22,.48),rgba(9,8,6,.34));
  box-shadow:inset 0 0 24px rgba(0,0,0,.34),0 10px 28px rgba(0,0,0,.2);
  pointer-events:auto;
  z-index:6;
  touch-action:none;
}
.m2-right-joystick:before {
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  border:1px dashed rgba(235,218,184,.15);
}
.m2-right-joystick-knob {
  position:absolute;
  left:50%; top:50%;
  width:43%; height:43%;
  margin:-21.5%;
  border-radius:50%;
  background:rgba(225,204,160,.18);
  border:1px solid rgba(240,221,185,.34);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  pointer-events:none;
}
@media (orientation:portrait) {
  .m2-utility {
    top:calc(var(--m2-safe-t) + var(--m2-ui)*.82);
    right:calc(8px + var(--m2-safe-b));
    left:auto;
    bottom:auto;
    transform:none;
    flex-direction:row;
  }
  .m2-chat-open {
    top:calc(var(--m2-safe-t) + var(--m2-ui)*1.48);
    right:calc(8px + var(--m2-safe-b));
  }
  .m2-right-joystick {
    right:calc(150px + env(safe-area-inset-right,0px));
    bottom:calc(26px + var(--m2-safe-b));
  }
}


/* v2.1 requested UI refinements: keep the stable skin, compact the top row,
   hide the right-stick artwork, and make the zoom controls reliably active. */
.m2-mobile-top .m2-btn {
  width:clamp(38px,6.2vmin,56px);
  height:clamp(30px,5.2vmin,46px);
  border-radius:10px;
  flex:0 0 auto;
}
.m2-mobile-top .m2-btn:nth-child(3) { width:clamp(46px,7.5vmin,64px); }
.m2-mobile-top .m2-pickup { width:clamp(52px,9vmin,72px); }
.m2-icon-btn {
  display:grid; place-items:center; padding:0;
}
.m2-icon-btn svg { width:clamp(18px,3.2vmin,28px); height:clamp(18px,3.2vmin,28px); }
.m2-right-joystick, .m2-right-joystick-knob {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.m2-zoom { z-index:9; }
.m2-zoom-btn {
  width:38px !important; height:38px !important; min-width:38px !important;
  background:linear-gradient(180deg,rgba(63,51,35,.88),rgba(19,15,11,.92)) !important;
}
.m2-chat { z-index:20; }
.m2-chat-input, .m2-chat-send, .m2-chat-close { z-index:21; }
@media (max-width:700px) {
  .m2-mobile-top { right:calc(6px + env(safe-area-inset-right,0px)); gap:3px; }
  .m2-mobile-top .m2-btn { width:clamp(34px,7vw,48px); height:clamp(28px,5.5vw,40px); }
  .m2-mobile-top .m2-btn:nth-child(3) { width:clamp(42px,8vw,54px); }
}


/* iOS/Android on-screen keyboard: keep the chat composer above the keyboard. */
.m2-chat.open { will-change: transform, bottom; }
.m2-chat-input { position:relative; z-index:22; color:#fff !important; -webkit-text-fill-color:#fff !important; opacity:1 !important; background:rgba(7,6,5,.97) !important; }
@media (max-width:700px) {
  .m2-chat { width:min(94vw,680px); }
  .m2-chat-input { min-height:48px; font-size:17px; }
}

/* v2.3: composer is positioned by visualViewport above the iOS/Android keyboard. */
.m2-chat {
  bottom:calc(18px + var(--m2-safe-b));
  transform:translate(-50%,20px);
  transition:opacity .12s;
}
.m2-chat.open { transform:translateX(-50%); }
.m2-chat-input {
  -webkit-appearance:none; appearance:none;
  ime-mode:auto;
  unicode-bidi:plaintext;
}


/* v2.5 Safari protection + requested zoom placement. */
.m2-mobile-ui,
.m2-mobile-ui button,
.m2-joystick,
.m2-actions,
.m2-skills,
.m2-zoom {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.m2-mobile-ui button {
  -webkit-user-select: none !important;
  user-select: none !important;
}
/* Zoom controls: horizontal, upper-left, matching the compact top-row style. */
.m2-zoom {
  position:absolute !important;
  left:calc(10px + env(safe-area-inset-left,0px)) !important;
  top:calc(10px + var(--m2-safe-t)) !important;
  right:auto !important;
  bottom:auto !important;
  display:flex !important;
  flex-direction:row !important;
  gap:4px !important;
  z-index:12 !important;
}
.m2-zoom-btn {
  width:clamp(38px,6.2vmin,56px) !important;
  height:clamp(30px,5.2vmin,46px) !important;
  min-width:clamp(38px,6.2vmin,56px) !important;
  border-radius:10px !important;
  font-size:clamp(14px,2.4vmin,20px) !important;
  line-height:1 !important;
}
@media (max-width:700px) {
  .m2-zoom {
    left:calc(6px + env(safe-area-inset-left,0px)) !important;
    top:calc(6px + var(--m2-safe-t)) !important;
    gap:3px !important;
  }
  .m2-zoom-btn {
    width:clamp(34px,7vw,48px) !important;
    height:clamp(28px,5.5vw,40px) !important;
    min-width:clamp(34px,7vw,48px) !important;
  }
}


/* v2.6: the canvas keeps page gestures disabled, while mobile-controls.js
   synthesizes the native Smart mouse click for a stationary one-finger touch. */
canvas.m2-mobile-canvas { -webkit-touch-callout:none!important; }
.m2-chat { z-index:30!important; }
.m2-chat-input { pointer-events:auto!important; touch-action:auto!important; }



/* Final mobile radial layout: geometry is owned by mobile-controls.js so the
   controls track the native radial on Safari/Android without conflicting
   right/bottom !important rules. */
.m2-actions {
  position:fixed !important;
  display:block !important;
  width:64px !important;
  height:64px !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  z-index:100 !important;
}
.m2-action.m2-attack {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  pointer-events:auto !important;
  z-index:1000 !important;
  font-size:14px !important;
  visibility:visible !important;
  opacity:1 !important;
}
.m2-skill-lock {
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
  max-width:54px !important;
  max-height:54px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:2147483000 !important;
  color:#ffd77e !important;
  background:radial-gradient(circle at 40% 30%,rgba(100,82,56,.96),rgba(17,13,9,.98)) !important;
  border:1px solid rgba(231,211,167,.78) !important;
  border-radius:50% !important;
  box-shadow:0 4px 14px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.12) !important;
}
.m2-skill-lock svg { width:54% !important; height:54% !important; display:block !important; }
.m2-skill-lock.is-locked { color:#ffd77e !important; }
.m2-skill-lock.is-unlocked { color:#cfcfcf !important; filter:saturate(.55); }

/* Locked touch protection is done by document-level exact slot hit testing in
   JS. The visual helper itself must never become a full radial-sized shield,
   otherwise it blocks the camera when the finger starts nearby. */
.m2-radial-tap-layer {
  position:fixed !important;
  pointer-events:none !important;
  z-index:90 !important;
  width:0 !important;
  height:0 !important;
}
.m2-radial-tap-layer.is-active,
.m2-radial-tap-layer.is-active .m2-radial-hit,
.m2-radial-tap-layer .m2-radial-hit {
  pointer-events:none !important;
}
.m2-radial-hit { touch-action:manipulation !important; }
/* V67: radial hit areas are input-only; never render default browser buttons. */
.m2-radial-hit,
.m2-radial-hit:hover,
.m2-radial-hit:active,
.m2-radial-hit:focus {
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  color:transparent !important;
  opacity:0 !important;
  padding:0 !important;
  margin:0 !important;
  font-size:0 !important;
  text-shadow:none !important;
}


canvas.m2-mobile-canvas {
  touch-action:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}


/* V69 sizing: left joystick and ATK use the same compact touch size. */
.m2-joystick {
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
  left:18px !important;
  bottom:calc(18px + var(--m2-safe-b)) !important;
}
.m2-joystick:before { inset:18% !important; }
.m2-joystick-knob { width:46% !important; height:46% !important; margin:-23% !important; }
.m2-action.m2-attack {
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
  display:grid !important;
  place-items:center !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:2147483000 !important;
  font-size:13px !important;
}
/* Keep the action anchor responsive and free of old right/bottom positioning. */
.m2-actions {
  position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  left:0 !important;
  top:0 !important;
  width:72px !important;
  height:72px !important;
}


/* V70: ATK is the center of the mobile radial, same compact size as the left joystick. */
.m2-action.m2-attack {
  display:grid !important;
  position:absolute !important;
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  min-height:62px !important;
  max-width:62px !important;
  max-height:62px !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:2147483000 !important;
  border-radius:50% !important;
  margin:0 !important;
  padding:0 !important;
}

/* Keep the radial anchor free of the old screen-corner positioning. */
.m2-actions {
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:72px !important;
  height:72px !important;
  margin:0 !important;
  padding:0 !important;
}


/* V71: keep ATK and left joystick large and identical, without touching radial geometry. */
.m2-joystick {
  width:68px !important; height:68px !important;
  min-width:68px !important; min-height:68px !important;
  max-width:68px !important; max-height:68px !important;
}
.m2-action.m2-attack {
  width:68px !important; height:68px !important;
  min-width:68px !important; min-height:68px !important;
  max-width:68px !important; max-height:68px !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important;
}


/* V72 final geometry */
.m2-joystick { width:74px !important; height:74px !important; min-width:74px !important; min-height:74px !important; max-width:74px !important; max-height:74px !important; }
.m2-action.m2-attack { width:74px !important; height:74px !important; min-width:74px !important; min-height:74px !important; max-width:74px !important; max-height:74px !important; }
.m2-actions { width:84px !important; height:84px !important; }


/* V73: exact native radial center + matched control sizing. */
.m2-joystick {
  width:80px !important; height:80px !important;
  min-width:80px !important; min-height:80px !important;
  max-width:80px !important; max-height:80px !important;
}
.m2-actions {
  width:96px !important; height:96px !important;
  position:fixed !important; left:0 !important; top:0 !important;
  right:auto !important; bottom:auto !important;
}
.m2-action.m2-attack {
  width:80px !important; height:80px !important;
  min-width:80px !important; min-height:80px !important;
  max-width:80px !important; max-height:80px !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important;
}
.m2-skill-lock {
  width:80px !important; height:80px !important;
  min-width:80px !important; min-height:80px !important;
  max-width:80px !important; max-height:80px !important;
}
.m2-skill-lock svg { width:54% !important; height:54% !important; }


/* V74: controls sized from the actual request: ATK and left joystick slightly larger, lock stays small. */
.m2-joystick {
  width:88px !important; height:88px !important;
  min-width:88px !important; min-height:88px !important;
  max-width:88px !important; max-height:88px !important;
}
.m2-action.m2-attack {
  width:88px !important; height:88px !important;
  min-width:88px !important; min-height:88px !important;
  max-width:88px !important; max-height:88px !important;
}
.m2-skill-lock {
  width:46px !important; height:46px !important;
  min-width:46px !important; min-height:46px !important;
  max-width:46px !important; max-height:46px !important;
  border-radius:50% !important;
}
.m2-skill-lock svg { width:52% !important; height:52% !important; }