/*
 * Phase 1 移动端控制层
 * 新增：横屏安全区、左摇杆、右侧视角区、战斗按钮簇、模式动作占位、布局编辑器。
 * 原 Three.js 渲染、武器、地图、物理与粒子样式保持在 index.html 中复用。
 */

:root{
  --touch-opacity:.36;
  --touch-active-opacity:.78;
  --touch-gap:14px;
  --touch-safe-left:max(18px,env(safe-area-inset-left));
  --touch-safe-right:max(18px,env(safe-area-inset-right));
  --touch-safe-top:max(14px,env(safe-area-inset-top));
  --touch-safe-bottom:max(18px,env(safe-area-inset-bottom));
}

#touch{position:fixed;inset:0;z-index:24;pointer-events:none;overflow:hidden}
#touch button{font-family:var(--mono);color:#f3f7fa}
#touch [data-positioned="true"]{right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%) scale(var(--control-scale))!important}
#lookZone{position:absolute;inset:0 0 0 38%;z-index:1;pointer-events:auto;touch-action:none}

.touch-btn,.mob-wpn{
  --control-scale:1;
  position:absolute;z-index:4;min-width:52px;min-height:52px;border-radius:50%;
  border:1px solid #ffffff45;background:radial-gradient(circle at 42% 35%,#273746a8,#071019b8 72%);
  box-shadow:inset 0 0 18px #ffffff0a,0 5px 18px #0008;
  display:flex;align-items:center;justify-content:center;gap:3px;flex-direction:column;
  font:700 10px/1 var(--mono);letter-spacing:.08em;text-shadow:0 1px 5px #000;
  opacity:var(--touch-opacity);pointer-events:auto;touch-action:none;user-select:none;
  transform:scale(var(--control-scale));transform-origin:center;
  transition:opacity 70ms linear,filter 70ms linear,border-color 70ms linear,background 70ms linear;
}
.touch-btn .ico{font-size:17px;line-height:1;letter-spacing:0}
.touch-btn small{font-size:8px;color:#dbe9f4cc;letter-spacing:.04em}
.touch-btn.active,.touch-btn.lock,.mob-wpn.active{
  opacity:var(--touch-active-opacity);filter:brightness(1.25);
  border-color:#70d4ff;background:radial-gradient(circle at 42% 35%,#2e91bdcc,#082434e8 76%);
}
.touch-btn:focus-visible,.mob-wpn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* 右下战斗区：中心 60% 不放控件。 */
#tFire{right:var(--touch-safe-right);bottom:var(--touch-safe-bottom);width:70px;height:70px;font-size:11px}
#tFire .ico{font-size:24px}
#tReload{right:calc(var(--touch-safe-right) + 88px);bottom:calc(var(--touch-safe-bottom) + 2px);width:54px;height:54px}
#tAds{right:calc(var(--touch-safe-right) + 6px);bottom:calc(var(--touch-safe-bottom) + 88px);width:58px;height:58px}
#tJump{right:calc(var(--touch-safe-right) + 4px);bottom:calc(var(--touch-safe-bottom) + 160px);width:54px;height:54px}
#tCrouch{right:calc(var(--touch-safe-right) + 2px);bottom:calc(var(--touch-safe-bottom) + 228px);width:54px;height:54px}

/* 左摇杆：外圈半径 60px，中心按下后拖动可疾跑。 */
#stickWrap{
  --control-scale:1;position:absolute;left:var(--touch-safe-left);bottom:var(--touch-safe-bottom);
  z-index:5;width:120px;height:120px;border-radius:50%;pointer-events:auto;touch-action:none;
  transform:scale(var(--control-scale));transform-origin:center;
}
#stick{position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffffff38;
  background:radial-gradient(circle,#111b2354 0 39%,#07101975 40% 100%);
  box-shadow:inset 0 0 28px #0007,0 6px 22px #0005}
#stick::before{content:"SPRINT";position:absolute;left:50%;top:14px;transform:translateX(-50%);
  color:#bcecff85;font:700 7px/1 var(--mono);letter-spacing:.16em}
#stickN{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:radial-gradient(circle at 38% 32%,#eaf6ff69,#7dc9ed2d 70%);
  border:1.5px solid #d9f3ff70;box-shadow:0 4px 14px #0007;will-change:transform}
#stickWrap.active #stick,#stickWrap.sprint #stick{border-color:#65ceffb0;box-shadow:inset 0 0 28px #0007,0 0 0 4px #4cc2ff25}
#stickWrap.sprint #stickN{background:#4cc2ff65;border-color:#bceeff}

/* 第一/第三人称、快捷标记和武器栏。 */
#tView{left:var(--touch-safe-left);top:48%;width:56px;height:56px;border-radius:12px}
#tPing{left:calc(var(--touch-safe-left) + 132px);top:var(--touch-safe-top);width:54px;height:54px;border-radius:12px}
#weaponGrid{
  --control-scale:1;position:absolute;right:calc(var(--touch-safe-right) + 78px);top:var(--touch-safe-top);
  z-index:5;display:grid;grid-template-columns:repeat(2,56px);gap:14px;pointer-events:auto;
  transform:scale(var(--control-scale));transform-origin:center;
}
.mob-wpn{position:relative;width:56px;height:56px;min-width:56px;min-height:56px;border-radius:12px;
  background-color:#071019d0;background-repeat:no-repeat;background-position:center 8px;background-size:48px 20px;
  justify-content:flex-end;padding:0 3px 7px;font-size:9px}
.mob-wpn em{font-style:normal;font-size:8px;color:#a9bac7}
.mob-wpn.active em{color:#eaf8ff}
#killFeed{position:absolute;left:50%;top:var(--touch-safe-top);z-index:3;transform:translateX(-50%);
  width:min(42vw,420px);display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none}
.kill-entry{padding:5px 10px;border-left:2px solid var(--acc);background:#0710198f;
  font:600 11px/1.25 var(--mono);color:#fff;text-shadow:0 1px 6px #000;white-space:nowrap;
  animation:killFade 3.5s forwards}
@keyframes killFade{0%{opacity:0;transform:translateY(-7px)}14%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}

/* 后续联机模式直接调用 input.js 的 setModeState() 启用。 */
.mode-action{display:none}
#tModeAction{right:calc(var(--touch-safe-right) + 88px);bottom:calc(var(--touch-safe-bottom) + 76px);
  width:76px;height:76px;border-radius:20px}
#tPickup{right:calc(var(--touch-safe-right) + 92px);bottom:calc(var(--touch-safe-bottom) + 142px)}
#tMedic{right:calc(var(--touch-safe-right) + 92px);top:34%}
#tParachute,#tExtract{left:50%;top:56%;width:116px;height:60px;border-radius:16px;transform:translate(-50%,-50%) scale(var(--control-scale))}
#tModeAction .hold-progress,#tExtract .hold-progress{position:absolute;left:8px;right:8px;bottom:-8px;height:4px;
  overflow:hidden;border-radius:2px;background:#ffffff20}
.hold-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#4cc2ff,#7ee0b8)}
#touch[data-mode="bomb"] #tModeAction.available,
#touch[data-mode="battleRoyale"] #tPickup.available,
#touch[data-mode="battleRoyale"] #tMedic.available,
#touch[data-mode="battleRoyale"] #tParachute.available,
#touch[data-mode="extraction"] #tPickup.available,
#touch[data-mode="extraction"] #tExtract.available{display:flex}

/* 小地图移动到左上并支持点击放大；隐藏桌面右下武器轮。 */
body.mob #topr{left:var(--touch-safe-left);right:auto;top:var(--touch-safe-top);align-items:flex-start;gap:6px}
body.mob #topr #timer{margin-left:136px}
body.mob #mmwrap{position:absolute;left:0;top:0;width:118px;height:118px;pointer-events:auto;cursor:pointer;
  border-color:#ffffff38;background:#061019b8;transition:width .16s,height .16s,filter .16s}
body.mob #mmwrap.big{width:210px;height:210px;filter:drop-shadow(0 8px 18px #000a)}
body.mob #fps{margin-left:136px}
body.mob #score{display:none}
body.mob #ammo{left:calc(var(--touch-safe-left) + 138px);bottom:var(--touch-safe-bottom);transform:scale(.78);transform-origin:left bottom}
body.mob #wheel{display:none}

/* 开镜、跳伞、死亡等状态只保留必要操作。 */
#touch.is-ads #weaponGrid,#touch.is-ads #tView,#touch.is-ads #tPing{opacity:0;pointer-events:none}
#touch.is-ads #tJump,#touch.is-ads #tCrouch{opacity:.2}
#touch.is-parachuting #tFire,#touch.is-parachuting #tAds,
#touch.is-parachuting #tReload,#touch.is-parachuting #tJump,#touch.is-parachuting #tCrouch,
#touch.is-parachuting #weaponGrid,#touch.is-dead .touch-btn,#touch.is-dead #stickWrap,#touch.is-dead #weaponGrid{display:none}
#touch.is-parachuting #tParachute.available{display:flex}

/* 竖屏强制提示。 */
#orientationGate{display:none;position:absolute;inset:0;z-index:50;background:#03070bf2;
  align-items:center;justify-content:center;flex-direction:column;gap:15px;text-align:center;pointer-events:auto}
#orientationGate .rotate{font-size:44px;animation:rotateHint 1.8s ease-in-out infinite}
#orientationGate b{font:600 15px/1 var(--mono);letter-spacing:.12em}
#orientationGate span{font:12px/1.6 var(--ui);color:var(--dim)}
@keyframes rotateHint{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(72deg)}}
@media (orientation:portrait) and (pointer:coarse){#touch:not(.hide) #orientationGate{display:flex}}

/* 暂停菜单中的按键设置。 */
.control-panel{max-width:720px}
.control-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.control-preset{min-height:64px;border:1px solid var(--line2);border-radius:8px;background:#0a1118;
  padding:12px;text-align:left;color:var(--txt)}
.control-preset b{display:block;font:600 12px/1.2 var(--mono);letter-spacing:.08em}
.control-preset span{display:block;margin-top:7px;font-size:11px;color:var(--dim);line-height:1.45}
.control-preset.on{border-color:#4cc2ff99;background:#102432}
.control-setting{display:grid;grid-template-columns:180px 1fr 58px;align-items:center;gap:14px;
  min-height:52px;border-top:1px solid var(--line);font-size:12px}
.control-setting label{color:var(--dim)}
.control-setting output{text-align:right;font:11px/1 var(--mono);color:var(--acc)}
.control-setting input[type="range"]{width:100%;accent-color:#4cc2ff}
.control-setting input[type="checkbox"]{width:20px;height:20px;accent-color:#4cc2ff}
#controlTarget{color:var(--txt);font-weight:500}
.control-help{margin-top:14px;color:var(--dim2);font-size:11px;line-height:1.65}

/* 布局编辑模式：长按 320ms 后拖动，保持游戏暂停。 */
#layoutEditBar{display:none;position:absolute;left:50%;top:var(--touch-safe-top);z-index:45;
  transform:translateX(-50%);align-items:center;gap:12px;padding:9px 12px;border:1px solid #4cc2ff77;
  border-radius:9px;background:#071019e8;pointer-events:auto;font:11px/1.4 var(--mono)}
#layoutEditBar button{min-height:42px;padding:0 14px;border-radius:7px;background:#4cc2ff;color:#041017;font-weight:700}
#touch.layout-edit{background:#02060a75;pointer-events:auto}
#touch.layout-edit #lookZone{display:none}
#touch.layout-edit #layoutEditBar{display:flex}
#touch.layout-edit .touch-btn,#touch.layout-edit #stickWrap,#touch.layout-edit #weaponGrid{display:flex!important;opacity:.62;outline:1px dashed #ffffff55;pointer-events:auto}
#touch.layout-edit #weaponGrid{display:grid!important}
#touch.layout-edit .selected-control{opacity:1;outline:2px solid #7ee0b8;filter:brightness(1.2)}
#touch.layout-edit .mode-action{display:flex!important}

@media (max-height:430px) and (orientation:landscape){
  #tCrouch{bottom:calc(var(--touch-safe-bottom) + 214px)}
  #tJump{bottom:calc(var(--touch-safe-bottom) + 146px)}
  #tAds{bottom:calc(var(--touch-safe-bottom) + 78px)}
  #weaponGrid{top:10px;right:calc(var(--touch-safe-right) + 76px);gap:10px}
  #stickWrap{width:112px;height:112px}
  #stickN{width:50px;height:50px;margin:-25px 0 0 -25px}
  body.mob #mmwrap{width:104px;height:104px}
  body.mob #topr #timer,body.mob #fps{margin-left:116px}
}

@media (max-width:720px){
  .control-setting{grid-template-columns:1fr 58px;gap:8px;padding:9px 0}
  .control-setting label{grid-column:1 / -1}
  .control-presets{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .touch-btn,.mob-wpn,#mmwrap{transition:none!important}
  #orientationGate .rotate{animation:none}
}

/* === Phase 1 完成，等待继续 === */