* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #05060f;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body {
  display: flex; align-items: center; justify-content: center;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  touch-action: none;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body:has(#authGate.is-on),
body:has(.sf-panel.is-on) {
  touch-action: manipulation;
}
#wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#stage { position: relative; width: 1280px; height: 720px; }
#stage canvas {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
#game { box-shadow: 0 0 90px rgba(90, 100, 255, 0.22); z-index: 3; }
#gl { z-index: 2; }
#bg { z-index: 1; }
#boot {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #2a1c4a 0%, #05060f 70%);
  color: #ffd166;
  font-size: 28px; font-weight: 700; letter-spacing: 0.12em;
  text-shadow: 0 2px 18px rgba(255, 160, 60, 0.45);
}
#fileWarn[hidden], #fileWarn {
  display: none;
}
#fileWarn.is-on {
  display: flex;
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 20;
  align-items: center; justify-content: center;
  background: rgba(5, 6, 15, 0.82);
  padding: 24px;
}
.fileWarn-card {
  max-width: 560px;
  background: #161428;
  border: 2px solid #ffd166;
  border-radius: 16px;
  padding: 28px 32px 24px;
  color: #f4efe6;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.fileWarn-card h2 { color: #ffd166; font-size: 26px; margin-bottom: 14px; letter-spacing: 0.06em; }
.fileWarn-card p { font-size: 16px; line-height: 1.55; margin: 10px 0; }
.fileWarn-url {
  display: inline-block;
  margin: 8px 0 18px;
  padding: 8px 14px;
  background: #0c0d18;
  color: #9fd0ff;
  border-radius: 8px;
  font-size: 18px;
}
#fileWarnOk {
  display: block;
  margin: 0 auto;
  padding: 10px 22px;
  border: 0;
  border-radius: 10px;
  background: #ffd166;
  color: #1a1220;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#orientHint {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  align-items: center; justify-content: center;
  background: #05060f;
  color: #ffd166;
  font-size: 22px; font-weight: 700; letter-spacing: 0.12em;
}
@media (pointer: coarse) and (orientation: portrait) {
  #orientHint { display: flex; }
}

#pad[hidden] { display: none !important; }
#pad {
  position: fixed; inset: 0; z-index: 12;
  pointer-events: none;
}
#stickZone {
  position: absolute;
  left: 0; bottom: 0;
  width: 46%; height: 62%;
  pointer-events: auto;
  touch-action: none;
}
#stickHint {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 156px; height: 156px;
  border-radius: 50%;
  border: 2px dashed rgba(255,209,102,0.28);
  color: rgba(255,255,255,0.38);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.18em;
  pointer-events: none;
}
#stickZone.is-held #stickHint { opacity: 0; }
#stickBase {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 156px; height: 156px;
  border-radius: 50%;
  background: rgba(8,10,22,0.28);
  border: 3px solid rgba(255,209,102,0.45);
  opacity: 0.55;
  pointer-events: none;
}
#stickBase.is-active {
  opacity: 1;
  background: rgba(8,10,22,0.42);
  border-color: rgba(255,209,102,0.85);
}
#stickKnob {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255,209,102,0.92);
  transform: translate(-50%,-50%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
#padRight {
  position: absolute;
  right: max(8px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  width: 280px;
  height: 248px;
  pointer-events: none;
}
.padBtn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  color: #f4efe6;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  background: rgba(12,14,30,0.62);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 4px;
}
.padBtn .padLab { pointer-events: none; max-width: 90%; }
.padBtn.is-down { background: rgba(255,209,102,0.5); color: #1a1220; }
/* 王者式: 右下大普攻, 技能在左上弧线 */
.padLight { right: 14px; bottom: 14px; width: 78px; height: 78px; font-size: 15px; background: rgba(255,209,102,0.28); border-color: rgba(255,209,102,0.7); }
.padHeavy { right: 14px; bottom: 102px; width: 62px; height: 62px; font-size: 13px; background: rgba(248,113,113,0.28); }
.padThrow { right: 100px; bottom: 14px; width: 52px; height: 52px; font-size: 12px; }
.padJump { right: 108px; bottom: 78px; width: 56px; height: 56px; background: rgba(56,189,248,0.32); }
.padDash { right: 168px; bottom: 14px; width: 50px; height: 50px; }
.padSkill[data-act="s1"] { right: 196px; bottom: 78px; width: 50px; height: 50px; font-size: 11px; }
.padSkill[data-act="s2"] { right: 168px; bottom: 138px; width: 50px; height: 50px; font-size: 11px; }
.padSkill[data-act="s3"] { right: 100px; bottom: 168px; width: 50px; height: 50px; font-size: 11px; }
.padUlt { right: 14px; bottom: 176px; width: 56px; height: 56px; font-size: 11px; background: rgba(239,68,68,0.42); border-color: rgba(252,165,165,0.7); }
.padH { right: 230px; bottom: 138px; width: 44px; height: 44px; font-size: 11px; }
.padH[hidden] { display: none !important; }
.padPause {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 56px; height: 36px;
  border-radius: 10px;
  font-size: 13px;
  pointer-events: auto;
}

#authGate, .sf-panel {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
  background: rgba(5,6,15,0.88);
  padding: 20px;
  touch-action: manipulation;
}
#authGate.is-on, .sf-panel.is-on { display: flex; }
.auth-card, .sf-panel-card {
  width: min(420px, 100%);
  background: #161428;
  border: 2px solid #ffd166;
  border-radius: 16px;
  padding: 22px 24px 18px;
  color: #f4efe6;
}
.auth-card h1, .sf-panel-card h3 {
  color: #ffd166; text-align: center; letter-spacing: 0.12em; margin-bottom: 8px;
}
.auth-sub, .auth-hint, .muted, .sf-panel-card h4 { color: rgba(255,255,255,0.62); font-size: 13px; text-align: center; margin: 8px 0; }
.auth-tabs { display: flex; gap: 8px; margin: 12px 0; }
.auth-tabs button, .acct-btn, .sf-add button, .row button {
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  color: #f4efe6; border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
.auth-tabs button.is-on { background: #ffd166; color: #1a1220; font-weight: 700; }
.auth-card label, .sf-panel-card label { display: block; margin: 10px 0; font-size: 13px; color: #ffd166; }
.auth-card input, .sf-panel-card input, .sf-add input {
  width: 100%; margin-top: 4px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.2);
  background: #0c0d18; color: #f4efe6; font-size: 16px;
  touch-action: manipulation;
  -webkit-user-select: text; user-select: text;
}
.auth-go {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  border: 0; border-radius: 10px; background: #ffd166; color: #1a1220;
  font-weight: 700; font-size: 16px; cursor: pointer;
}
.auth-go.ghost { background: transparent; color: #ffd166; border: 1px solid #ffd166; }
.auth-msg { min-height: 20px; text-align: center; font-size: 13px; color: #9fd0ff; }
.auth-msg.is-bad { color: #ff8a8a; }
#acctBar {
  position: fixed; top: 8px; right: 10px; z-index: 16;
  display: flex; align-items: center; gap: 8px;
  background: rgba(8,10,22,0.78); border: 1px solid rgba(255,209,102,0.35);
  border-radius: 12px; padding: 6px 8px 6px 12px; color: #f4efe6; font-size: 13px;
}
#acctBar[hidden] { display: none !important; }
body.sf-fight #acctBar { display: none !important; }
.acct-nick { color: #ffd166; font-weight: 700; }
.acct-stat { opacity: 0.75; }
.sf-add { display: flex; gap: 8px; }
.sf-add input { flex: 1; margin-top: 0; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
.row small { opacity: 0.6; margin-left: 6px; }
.rec { flex-wrap: wrap; }
.rec .win { color: #4ade80; font-weight: 700; width: 24px; }
.rec .lose { color: #ff8a8a; font-weight: 700; width: 24px; }
.rec .draw { color: #ffd166; font-weight: 700; width: 24px; }
body:has(#authGate.is-on) #pad { display: none !important; }
#friendLists, #recordLists { max-height: 280px; overflow: auto; margin: 8px 0; }
.row button {
  border: 0; border-radius: 8px; padding: 4px 10px; cursor: pointer;
  background: #ffd166; color: #1a1220; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #5a6178; margin-right: 6px; vertical-align: middle;
}
.dot.on { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
#pvpToast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 30; min-width: 320px; max-width: 90vw;
  background: rgba(8,10,22,0.94); border: 1px solid rgba(255,209,102,0.55);
  border-radius: 14px; padding: 14px 16px; color: #f4efe6; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
#pvpToast[hidden] { display: none !important; }
#pvpToast.is-on { display: block; }
#pvpToast p { margin: 0 0 10px; font-size: 16px; }
.pvp-actions { display: flex; gap: 10px; }
.pvp-actions button {
  flex: 1; border: 0; border-radius: 10px; padding: 8px; cursor: pointer; font-weight: 700;
}
#pvpToastYes { background: #ffd166; color: #1a1220; }
#pvpToastNo { background: transparent; color: #ffd166; border: 1px solid #ffd166; }