/* 宗師物語 手機版：觸控防誤觸、方向盤、直式／橫式排版（由 touch.js 在觸控裝置加上 body.touch） */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,.card,.slot,a{touch-action:manipulation}
body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.touch input{-webkit-user-select:text;user-select:text}

/* 觸控沒有 hover：避免按完按鈕一直卡在 hover 色 */
@media (hover:none){
  button:hover:not(:disabled){background:#3b2b1e}
  button.main:hover:not(:disabled){background:#6b4a1f}
  .card:hover:not(.lock){background:#34261b}
}

/* 手指好按的尺寸 */
body.touch button{min-height:44px}
body.touch .acts button{padding:8px 10px}
body.touch .slot{min-height:72px}

/* ---------- 方向盤：整塊是一個觸控區，手指滑動即換方向（含斜向） ---------- */
.dpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;
  touch-action:none;position:relative;aspect-ratio:1}
.dpad i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;color:var(--text);
  background:#3b2b1e;border:2px solid var(--line);border-radius:6px;pointer-events:none}
.dpad i.off{visibility:hidden}
.dpad i.mid{background:transparent;border-color:transparent}
.dpad i.on{background:#8a5f27}

/* ---------- 格鬥虛擬鍵 ---------- */
#touch{display:none}
body.touch #touch{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:8px}
body.touch #touch .dpad{width:min(40vw,190px);flex:none}
body.touch #touch .act{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;max-width:300px}
body.touch #touch .act button{padding:0;min-height:52px;font-size:15px;touch-action:none}
body.touch #touch .act button.cmd{background:#6b4a1f;font-weight:bold}
body.touch #touch .act button.locked{opacity:.3}
body.touch #touch .act button:active,body.touch #touch .act button.down{background:#8a5f27}
.kb-only{display:block}.touch-only{display:none}
body.touch .kb-only{display:none}body.touch .touch-only{display:block}
/* 手機以橫放為主：直放時蓋一層提示（平板寬度夠，直放照常可玩） */
#rotate{display:none}
@media (orientation:portrait) and (max-width:700px){
  body.touch #rotate{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;color:var(--text)}
  body.touch #rotate .ico{font-size:64px;display:inline-block;animation:rot 2.4s ease-in-out infinite}
  body.touch #rotate b{color:var(--line);font-size:20px;letter-spacing:.2em}
}
@keyframes rot{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* ---------- 遊歷方向盤 ---------- */
.touchpad{display:none}
body.touch .touchpad{display:grid;width:min(40vw,168px)}
body.touch #advMap > .row{align-items:flex-end;flex-wrap:nowrap}
body.touch #btnItems{min-height:56px;min-width:96px}

/* ---------- 橫放手機（高度小）：畫面盡量放大，控制鍵疊在兩側 ---------- */
@media (orientation:landscape) and (max-height:540px){
  body.touch h1{display:none}
  body.touch #app{max-width:none;padding:4px 6px}
  body.touch .panel{margin:4px 0;padding:8px 10px}

  /* 格鬥 */
  body.touch #s-fight canvas{width:min(100%,calc((100vh - 10px) * 16 / 9));width:min(100%,calc((100dvh - 10px) * 16 / 9));height:auto;margin:0 auto}
  body.touch #s-fight #touch{position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));
    bottom:max(8px,env(safe-area-inset-bottom));margin:0;pointer-events:none;z-index:5}
  body.touch #s-fight #touch .dpad{width:min(30vh,150px);opacity:.8;pointer-events:auto}
  body.touch #s-fight #touch .act{max-width:min(48vw,330px);opacity:.85;pointer-events:auto}
  body.touch #s-fight #touch .act button{min-height:44px;height:min(13vh,52px)}
  body.touch #s-fight .panel.dim{display:none}

  /* 遊歷地圖：左邊地圖，右邊訊息＋操作 */
  body.touch #advMap{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:start}
  body.touch #acv{grid-column:1;grid-row:1 / span 3;height:calc(100vh - 78px);height:calc(100dvh - 78px);width:auto;max-width:58vw}
  body.touch #advMsg,body.touch #advOverlay,body.touch #advMap > .row{grid-column:2;margin:0}
  body.touch #advMap > .row{align-self:end}
  body.touch .touchpad{width:min(34vh,140px)}

  /* 回合制戰鬥：左邊畫面＋紀錄，右邊指令 */
  body.touch #battle:not(.hidden){display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;align-items:start}
  body.touch #bcv{grid-column:1;grid-row:1}
  body.touch #blog{grid-column:1;grid-row:2;height:calc(100vh - 244px)!important;height:calc(100dvh - 244px)!important;min-height:60px}
  body.touch #bcmd{grid-column:2;grid-row:1 / span 2;margin:0;max-height:calc(100dvh - 12px);overflow-y:auto}
}

@media (max-width:420px){
  body.touch #app{padding:6px}
  body.touch .panel{padding:10px}
  body.touch .stat{grid-template-columns:54px 1fr 28px}
}