* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: #f3e6c8; /* 草稿纸 */
  color: #4a3b2a;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; }
#screen-auth { align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, #ffe9c4, #f3e6c8 55%, #ead6ae); }
#screen-lobby { align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; }

/* 账号卡片 */
.auth-card {
  background: rgba(255, 252, 240, 0.92);
  border: 2px dashed #b9a47e;
  border-radius: 16px;
  padding: 34px 38px;
  width: 400px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(74,59,42,0.18);
}
.title { font-size: 34px; letter-spacing: 2px; }
.subtitle { margin: 6px 0 18px; color: #8a7a5f; font-size: 13px; }
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #b9a47e; background: #f6ecd2; cursor: pointer; }
.tab.active { background: #5c8a5c; color: #fff; }
#auth-form { display: flex; flex-direction: column; gap: 12px; }
#auth-form input { padding: 12px 14px; border: 1px solid #b9a47e; border-radius: 8px; font-size: 14px; background:#fffdf6; }
.btn-primary { padding: 12px 16px; border: none; border-radius: 8px; background: #5c8a5c; color: #fff; font-size: 15px; cursor: pointer; }
.btn-primary:hover { background: #4e764e; }
.btn-ghost { padding: 8px 14px; border: 1px solid #b9a47e; border-radius: 8px; background: transparent; color: #5a4b36; cursor: pointer; }
.msg { margin-top: 12px; min-height: 18px; font-size: 13px; color: #b03a2e; }
.hint { margin-top: 14px; font-size: 12px; color: #a08d6c; }

/* 大厅 */
.lobby { width: 880px; max-width: 96vw; }
.lobby h2 { margin-bottom: 14px; }
.player-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background:#fffaf0; border:1px solid #d9c89f; border-radius:10px; padding: 12px 16px; margin-bottom: 18px; }
.player-row b { color: #3f6e3f; }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.mode-card { background:#fffaf0; border:1px solid #d9c89f; border-radius:12px; padding: 18px; }
.mode-card h3 { margin-bottom: 8px; }
.mode-card p { color:#8a7a5f; font-size:13px; margin-bottom: 14px; min-height: 40px; }
.char-row h3, .controls-guide h3 { margin-bottom: 10px; }
.char-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.char-card { width: 200px; background:#fffaf0; border:2px solid #d9c89f; border-radius:12px; padding: 14px; cursor: pointer; }
.char-card.selected { border-color: #5c8a5c; background:#f0f6ec; }
.char-card canvas { width: 200px; height: 90px; display:block; border-radius:8px; background:#f8efd9; }
.char-card h4 { margin: 6px 0 2px; }
.char-card p { font-size: 12px; color:#8a7a5f; }
.controls-guide { background:#fffaf0; border:1px dashed #d9c89f; border-radius:10px; padding: 14px 16px; font-size: 14px; line-height: 1.8; }
.controls-guide b { color:#3f6e3f; }

/* 游戏层 */
#screen-game { background: #2a241b; }
#game-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hud { position:absolute; top:0; left:0; right:0; padding:12px 16px; pointer-events:none; color:#fff; }
.hud-top { display:flex; align-items:flex-start; gap:18px; }
.ink-bar { position:relative; width: 240px; height:22px; background:rgba(0,0,0,0.4); border-radius:11px; overflow:hidden; border:1px solid rgba(255,255,255,0.3); }
.ink-bar span#hud-hp-fill { position:absolute; inset:0; background:linear-gradient(90deg,#5cb3e0,#8fd0f2); transition: width .15s; }
.ink-bar .lbl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.hud-center { font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.hud-right { margin-left:auto; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.hud-bottom { display:flex; gap:18px; margin-top:10px; font-size:13px; text-shadow:0 1px 2px rgba(0,0,0,.6); opacity:.9; }
.hud-bottom i { font-style:normal; color:#ffd27a; }

.overlay { position:absolute; inset:0; background:rgba(20,16,10,0.7); flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#fff; display:none; }
.overlay.active { display:flex; }
.overlay h2 { font-size:28px; letter-spacing:2px; }
.overlay p { font-size:15px; color:#f0e2c0; }
.overlay .btn-primary { width: 200px; }
.overlay .btn-ghost { width: 200px; color:#fff; border-color:#fff; }
.hidden { display:none !important; }

/* ============ 触屏虚拟按键（仅手机显示）· 王者荣耀式左右手布局 ============ */
#screen-game { touch-action: none; }
#game-canvas { touch-action: none; }
.touch-controls {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: none; pointer-events: none; z-index: 5;
}
body.has-touch .touch-controls { display: block; }

/* 左手：虚拟移动摇杆 */
.tc-left {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(64px, env(safe-area-inset-bottom));
  pointer-events: auto;
}
.tc-stick {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  background: rgba(255,255,255,0.13);
  border: 2px solid rgba(255,255,255,0.4);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.tc-stick-thumb {
  position: absolute; left: 48px; top: 48px; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 2px solid rgba(255,255,255,0.7);
  box-sizing: border-box; will-change: transform;
}

/* 右手：技能键弧形排布（大招最大最靠外） */
.tc-right {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(52px, env(safe-area-inset-bottom));
  width: 196px; height: 252px; pointer-events: auto;
}
.tc-btn {
  position: absolute; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.55);
  color: #fff; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tc-btn.held, .tc-btn:active { background: rgba(255,255,255,0.55); }
.tc-jump   { right: 120px; bottom: 28px; }
.tc-attack { right: 6px;   bottom: 58px; }
.tc-skill  { right: 88px;  bottom: 112px; }
.tc-ult    { right: 30px;  bottom: 192px; width: 80px; height: 80px; font-size: 21px; }

/* ============ 手机端自适应 ============ */
@media (max-width: 640px) {
  .auth-card { width: 92vw; padding: 26px 20px; }
  .lobby { width: 96vw; padding-top: 6px; }
  .player-row { gap: 10px; font-size: 13px; }
  .mode-row { grid-template-columns: 1fr; gap: 12px; }
  .char-cards { justify-content: center; }
  .char-card { width: 46vw; }
  .char-card canvas { width: 100%; height: 72px; }
  .controls-guide { font-size: 13px; }
  .hud { padding: 8px 10px; }
  .hud-top { gap: 10px; align-items: center; }
  .ink-bar { width: 34vw; min-width: 120px; height: 20px; }
  .ink-bar .lbl { font-size: 11px; }
  .hud-center { font-size: 14px; }
  .hud-right { font-size: 12px; }
  .hud-bottom { font-size: 11px; gap: 10px; margin-top: 6px; }
  .overlay h2 { font-size: 24px; }
  .overlay p { font-size: 13px; padding: 0 24px; text-align: center; }
}

/* ============ 触屏长按/拖拽：禁止文本选择与系统手势 ============ */
.touch-controls, #game-canvas, .hud, .overlay, .auth-card, .lobby,
.mode-card, .char-card, .rotate-overlay {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============ 手机横屏提示遮罩（竖屏且游戏中显示） ============ */
.rotate-overlay {
  position: fixed; inset: 0; z-index: 30; display: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: #2a241b; color: #fff; text-align: center; gap: 14px; padding: 24px;
}
body.needs-rotate .rotate-overlay { display: flex; }
.rotate-overlay .rot-icon { font-size: 64px; line-height: 1; animation: rotHint 2.6s ease-in-out infinite; }
@keyframes rotHint {
  0%{ transform: rotate(0); }
  20%{ transform: rotate(90deg); }
  45%{ transform: rotate(90deg); }
  65%{ transform: rotate(0); }
  100%{ transform: rotate(0); }
}
.rotate-overlay h2 { font-size: 22px; letter-spacing: 2px; }
.rotate-overlay p { font-size: 14px; color: #d8c9a0; }