/* ============================================================
   PhoneGames 公共样式 · 手机端外壳
   每个游戏可用 body[data-ph-accent] 覆盖主色
============================================================ */
*{-webkit-tap-highlight-color:transparent}
html,body{
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}
canvas{touch-action:none}

/* ---------------- 触屏控件层 ---------------- */
.ph-ui{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  font-family:ui-monospace,Consolas,"Noto Sans SC",system-ui,sans-serif;
  --ph-a:var(--ph-accent,#2ef2ff);
  --ph-bg:rgba(6,14,22,.42);
  --ph-ln:rgba(140,225,255,.38);
}
.ph-ui.ph-hidden{display:none!important}

.ph-btn{
  position:absolute;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:var(--ph-bg);border:1.5px solid var(--ph-ln);
  color:#e7f8ff;font-family:inherit;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 4px 16px rgba(0,0,0,.45), inset 0 0 16px rgba(120,225,255,.07);
  transition:transform .08s ease, background .12s, border-color .12s, box-shadow .12s, opacity .2s;
  will-change:transform;
}
.ph-btn .g{font-size:17px;line-height:1;letter-spacing:0}
.ph-btn .t{font-size:9.5px;letter-spacing:.02em;opacity:.9;margin-top:2px;white-space:nowrap}
.ph-btn .h{font-size:8px;letter-spacing:.06em;opacity:.45;margin-top:1px}
.ph-btn.on{
  background:rgba(120,235,255,.30);border-color:var(--ph-a);
  transform:scale(.93);
  box-shadow:0 0 26px rgba(120,235,255,.55), inset 0 0 20px rgba(120,235,255,.25);
}
.ph-btn.sq{border-radius:15px}
.ph-btn.big{width:74px;height:74px}
.ph-btn.big .g{font-size:22px}
.ph-btn.sm{width:46px;height:46px}
.ph-btn.sm .g{font-size:15px}
.ph-btn.xs{width:38px;height:38px}
.ph-btn.xs .g{font-size:13px}
.ph-btn.wide{width:auto;min-width:74px;height:50px;padding:0 16px;border-radius:15px;flex-direction:row;gap:6px}
.ph-btn.wide .t{margin-top:0}
.ph-btn.hot{border-color:rgba(255,120,160,.6);color:#ffe4ee}
.ph-btn.hot.on{background:rgba(255,90,140,.32);box-shadow:0 0 26px rgba(255,90,140,.55)}
.ph-btn.dim{opacity:.42}
.ph-btn.off{opacity:.28;pointer-events:none}
.ph-btn .bar{
  position:absolute;left:8px;right:8px;bottom:5px;height:2.5px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden;display:none;
}
.ph-btn.charge .bar{display:block}
.ph-btn .bar i{display:block;height:100%;width:0;background:var(--ph-a);box-shadow:0 0 8px var(--ph-a)}

/* 竖排 / 横排按钮组 */
.ph-col{position:absolute;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.ph-row{position:absolute;display:flex;flex-direction:row;gap:8px;pointer-events:none;align-items:center}
.ph-col>.ph-btn,.ph-row>.ph-btn{position:relative;left:auto;top:auto;right:auto;bottom:auto}

/* ---------------- 摇杆 ---------------- */
.ph-joy{
  position:absolute;width:124px;height:124px;border-radius:50%;
  pointer-events:auto;touch-action:none;
  background:radial-gradient(circle at 50% 50%,rgba(10,26,38,.42),rgba(4,10,18,.22) 70%,rgba(4,10,18,0) 100%);
  border:1.5px solid rgba(140,225,255,.28);
  box-shadow:inset 0 0 26px rgba(120,225,255,.08);
}
.ph-joy .knob{
  position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(120,225,255,.26) 60%,rgba(20,60,90,.28));
  border:1px solid rgba(180,240,255,.55);
  box-shadow:0 0 18px rgba(120,225,255,.4);
  transition:transform .06s ease-out;
}
.ph-joy .knob.snap{transition:none}
.ph-joy .lbl{
  position:absolute;left:0;right:0;bottom:-17px;text-align:center;
  font-size:9px;letter-spacing:.18em;color:rgba(170,225,255,.42);
}

/* ---------------- 拖动区（瞄准 / 转视角） ---------------- */
.ph-pad{position:absolute;pointer-events:auto;touch-action:none}
.ph-pad .tip{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:9.5px;letter-spacing:.2em;color:rgba(170,225,255,.30);
  white-space:nowrap;pointer-events:none;transition:opacity .25s;
}
.ph-pad.touched .tip{opacity:0}

/* ---------------- 顶部小工具 ---------------- */
.ph-tools{
  position:absolute;left:50%;top:2px;transform:translateX(-50%);
  display:flex;gap:6px;pointer-events:none;opacity:.34;transition:opacity .3s;
}
.ph-tools.show{opacity:.9}
.ph-tools .ph-btn{position:relative;width:30px;height:24px;border-radius:8px;background:rgba(4,10,16,.4)}
.ph-tools .ph-btn .g{font-size:12px}

/* ---------------- 横屏提示 ---------------- */
.ph-rotate{
  position:fixed;inset:0;z-index:99998;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:#04060c;color:#cfe8ff;text-align:center;padding:28px;
  font-family:system-ui,"Microsoft YaHei",sans-serif;
}
.ph-rotate.on{display:flex}
.ph-rotate .icon{
  width:62px;height:62px;border:2px solid rgba(120,225,255,.6);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  animation:phSpin 1.8s ease-in-out infinite;
  box-shadow:0 0 30px rgba(120,225,255,.28);
}
.ph-rotate .icon i{display:block;width:26px;height:16px;border:2px solid rgba(120,225,255,.8);border-radius:3px}
@keyframes phSpin{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
.ph-rotate h2{margin:0;font-size:17px;letter-spacing:.24em;font-weight:600}
.ph-rotate p{margin:0;font-size:11.5px;line-height:1.9;color:#7d8ea6;letter-spacing:.08em}
.ph-rotate button{
  margin-top:6px;font-family:inherit;font-size:11px;letter-spacing:.16em;
  padding:9px 18px;border-radius:999px;background:none;cursor:pointer;
  color:#9fb6cc;border:1px solid rgba(140,190,220,.35);
}
.ph-rotate button:active{background:rgba(120,200,255,.12)}

/* ---------------- 通用：手机端隐藏键盘提示 ---------------- */
.ph-hide-kb{display:none!important}