/* 触屏控件 / 响应式
   拆分自 index.html（原第 523~622 行）· 修改后请勿跨文件重复定义同名选择器 */
/* ============================================================
   触屏控件
   ============================================================ */
#touch{ position:absolute; inset:0; pointer-events:none; z-index:10; }
#joy, #btnAttack, #btnSkill{ position:absolute; pointer-events:auto; touch-action:none; }
#joy{
  left:20px; bottom:22px; width:118px; height:118px; border-radius:50%; display:none;
  background:radial-gradient(circle, rgba(255,255,255,.07), rgba(255,255,255,.015));
  border:1.5px solid rgba(255,255,255,.14);
}
#joy .knob{
  position:absolute; width:50px; height:50px; border-radius:50%; left:34px; top:34px;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.2));
  box-shadow:0 4px 14px rgba(0,0,0,.55);
}
#btnAttack, #btnSkill, #btnSkill2{
  width:86px; height:86px; border-radius:50%; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  font-weight:800; font-size:12px; color:#fff;
  transition:transform .08s, filter .12s;
}
#btnAttack{
  right:22px; bottom:34px;
  background:radial-gradient(circle at 38% 32%, rgba(255,110,100,.55), rgba(178,34,34,.42));
  border:2px solid rgba(255,120,110,.6);
  box-shadow:0 6px 22px rgba(200,40,40,.35), inset 0 2px 10px rgba(255,255,255,.15);
}
#btnSkill{
  right:118px; bottom:96px; width:72px; height:72px;
  background:radial-gradient(circle at 38% 32%, rgba(200,160,255,.55), rgba(118,58,188,.44));
  border:2px solid rgba(200,160,255,.62);
  box-shadow:0 6px 22px rgba(130,70,210,.35), inset 0 2px 10px rgba(255,255,255,.15);
}
#btnSkill2{
  right:24px; bottom:132px; width:70px; height:70px;
  background:radial-gradient(circle at 38% 32%, rgba(110,225,195,.5), rgba(20,118,100,.44));
  border:2px solid rgba(110,225,195,.6);
  box-shadow:0 6px 22px rgba(18,140,112,.32), inset 0 2px 10px rgba(255,255,255,.15);
}
#btnAttack:active, #btnSkill:active, #btnSkill2:active{ transform:scale(.92); filter:brightness(1.3); }
#btnSkill .cdmask, #btnSkill2 .cdmask{
  position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  display:none; align-items:center; justify-content:center;
  font-size:19px; font-weight:900; font-family:var(--font-num); color:#fff;
}
#btnAttack .em, #btnSkill .em, #btnSkill2 .em{ font-size:25px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
#btnSkill2 .em{ font-size:21px; }

/* ============================================================
   响应式
   ============================================================ */
@media (hover:hover) and (pointer:fine){ #joy, #btnAttack, #btnSkill, #btnSkill2{ display:none !important; } }
@media (hover:none), (pointer:coarse){ #joy{ display:block; } #btnAttack{ display:flex; } #btnSkill{ display:flex; } #btnSkill2{ display:flex; } }

@media (max-width:900px){
  .player-panel{ min-width:208px; }
  .class-card{ width:172px; padding:14px 12px 12px; }
  .class-portrait{ height:72px; }
  #buffBar{ max-width:238px; }
}

@media (max-width:640px){
  #hud{ padding:9px; }
  .player-panel{ min-width:0; width:min(64vw,232px); padding:8px 9px 9px; gap:6px; }
  .pp-badge{ width:30px; height:30px; font-size:15px; border-radius:9px; }
  .pp-name{ letter-spacing:.8px; }
  .gear-slot{ width:32px; height:32px; font-size:14px; border-radius:8px; }
  .chip{ font-size:10px; padding:2px 6px; }
  .chip .k{ font-size:9px; }
  .theme-chip{ font-size:9px; padding:3px 6px; margin-top:5px; }
  .theme-chip .th{ display:none; }
  .icon-btn{ width:34px; height:34px; border-radius:10px; font-size:15px; }
  #buffBar{ max-width:66vw; }
  .buff-icon{ font-size:10px; padding:2px 6px 3px; }
  .classes{ gap:9px; }
  .class-card{ width:calc(50% - 5px); max-width:174px; padding:13px 10px 11px; }
  .class-desc{ min-height:0; margin-bottom:8px; font-size:11px; }
  .overlay{ gap:14px; padding:16px; }
  .dead-grid{ gap:7px; }
  .dead-cell{ padding:9px 10px; min-width:0; }
  .dead-cell .dv{ font-size:19px; }
  #campOverlay .camp-panel{ max-height:90vh; padding:14px 13px 12px; }
  .camp-tab{ padding:6px 9px; font-size:11.5px; }
  .record{ font-size:11px; gap:10px; padding:6px 13px; }
  .btn{ padding:12px 32px; font-size:15px; }
}

@media (max-height:520px) and (orientation:landscape){
  #hud{ padding:8px; }
  .overlay{ gap:10px; padding:12px; }
  .title{ font-size:clamp(21px,3.8vw,30px); }
  .class-portrait{ height:54px; }
  .class-desc{ display:none; }
  .player-panel{ gap:5px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
}

/* Boss 血条的移动端布局已随组件一起放在 css/02-hud.css 的 @media (max-width:820px) 里，
   这里不再重复定义同名选择器（同文件内重复会打架，跨文件重复更难查）。 */