:root {
  --bg: #0d0f1a;
  --panel: rgba(18, 22, 40, 0.92);
  --gold: #e8c547;
  --radiant: #5ec8a0;
  --dire: #c45c8a;
  --hp: #e05a5a;
  --mp: #5a8ae0;
  --exp: #b078e0;
  --text: #f0ece2;
  --muted: #9aa3b5;
  --accent: #7b6cff;
  --border: rgba(255, 255, 255, 0.12);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  user-select: none;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.hidden { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 18, 0.72);
  z-index: 50;
  backdrop-filter: blur(6px);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 560px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

.start-panel h1, .end-panel h1 {
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #f0e6c8, #c9b4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}

.subtitle { color: var(--muted); margin-bottom: 18px; }

.controls-list {
  list-style: none;
  margin: 12px 0 18px;
  display: grid;
  gap: 8px;
  font-size: 0.92rem;
  color: #d7dce8;
}

.controls-list li { line-height: 1.45; }

kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  font-size: 0.85em;
  font-family: inherit;
}

.tip { color: var(--muted); font-size: 0.88rem; margin-bottom: 18px; }

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover { background: rgba(255,255,255,0.12); }
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: linear-gradient(135deg, #6a5af8, #9b6cff);
  border-color: transparent;
  font-weight: 600;
  width: 100%;
}
.btn.primary:hover { filter: brightness(1.08); }

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1a1530 0%, #080a12 70%);
  z-index: 100;
}
.loading-inner { text-align: center; }
.loading-inner h1 {
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.loading-inner .hint { color: var(--muted); margin-top: 16px; animation: pulse 1.2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  gap: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
}

.team {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
}
.team.radiant { color: var(--radiant); }
.team.dire { color: var(--dire); }

.timers {
  display: flex;
  gap: 14px;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: #dfe3ef;
  background: rgba(0,0,0,0.4);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.timers .big { color: var(--gold); font-weight: 600; }

#prompt {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  white-space: nowrap;
}

#bottom-hud {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}

.stats { display: flex; flex-direction: column; gap: 6px; }
.stat {
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  min-width: 64px;
  text-align: center;
}
.stat .label { display: block; font-size: 0.7rem; color: var(--muted); }
.stat.gold { color: var(--gold); }

.bars {
  width: min(360px, 42vw);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.45);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-label { width: 28px; font-size: 0.72rem; color: var(--muted); }
.bar {
  flex: 1;
  height: 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bar .fill { height: 100%; width: 100%; border-radius: inherit; transition: width 0.12s linear; }
.bar.hp .fill { background: linear-gradient(90deg, #a83232, var(--hp)); }
.bar.mp .fill { background: linear-gradient(90deg, #2f4ea8, var(--mp)); }
.bar.expb .fill { background: linear-gradient(90deg, #6a3db8, #b078e0); }
.bar-text { width: 78px; text-align: right; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: #cfd5e4; }

.skills { display: flex; gap: 8px; }
.skill {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: linear-gradient(160deg, #2a2548, #151828);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.skill.ult { border-color: rgba(232, 197, 71, 0.55); box-shadow: 0 0 12px rgba(232,197,71,0.2); }
.skill .key {
  position: absolute;
  top: 3px; left: 5px;
  font-size: 0.65rem;
  color: var(--muted);
}
.skill .name { font-size: 0.78rem; font-weight: 600; }
.skill .cd {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.skill .cd.active { opacity: 1; }

.potion-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pot {
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: #d7dce8;
}

#toast {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  text-align: center;
  pointer-events: none;
}
.toast-msg {
  display: inline-block;
  margin: 4px 0;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  animation: fadeUp 1.8s forwards;
}
.toast-msg.gold { color: var(--gold); }
.toast-msg.dmg { color: #ff9a9a; }
.toast-msg.info { color: #c9d4ff; }
.toast-msg.level { color: #e0b0ff; border-color: rgba(176,120,224,0.5); }

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(8px); }
  15% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px); }
}

.shop-panel h2 { margin-bottom: 8px; }
.shop-gold { color: var(--gold); margin-bottom: 14px; }
.shop-items { display: grid; gap: 8px; margin-bottom: 14px; }
.shop-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  pointer-events: auto;
}
.shop-item:hover { background: rgba(123,108,255,0.18); border-color: rgba(123,108,255,0.45); }
.shop-item .iname { font-weight: 600; grid-column: 1; }
.shop-item .idesc { grid-column: 1; font-size: 0.82rem; color: var(--muted); }
.shop-item .iprice { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--gold); font-weight: 700; }
.shop-hint { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }
#btn-shop-close { pointer-events: auto; width: 100%; }

#shop.overlay, #end-screen.overlay, #start-screen.overlay { pointer-events: auto; }

@media (max-width: 720px) {
  #bottom-hud { flex-wrap: wrap; justify-content: center; width: 96%; }
  .bars { width: 90vw; }
  .timers { flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
}


/* ——— FPV 美術 HUD pass ——— */
:root {
  --steel: #3A5F8A;
  --blade: #D8DEE8;
  --gold: #C9A227;
  --radiant: #5a8ab8;
  --dire: #C23B22;
}

#crosshair {
  position: fixed;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 12;
}
#crosshair::before, #crosshair::after {
  content: '';
  position: absolute;
  background: rgba(216, 222, 232, 0.85);
  box-shadow: 0 0 4px rgba(58, 95, 138, 0.8);
}
#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

#bottom-hud {
  bottom: 18px;
  padding: 8px 10px;
  background: linear-gradient(180deg, transparent, rgba(8,10,20,0.55));
  border-radius: 18px;
}

.bars {
  background: linear-gradient(160deg, rgba(20,28,48,0.85), rgba(10,12,22,0.9));
  border: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 20px rgba(58,95,138,0.08);
}

.bar.hp .fill { background: linear-gradient(90deg, #6a2020, #e05a5a, #f0a0a0); box-shadow: 0 0 8px rgba(224,90,90,0.45); }
.bar.mp .fill { background: linear-gradient(90deg, #1e3a6e, #3A5F8A, #8ab0d8); box-shadow: 0 0 8px rgba(58,95,138,0.45); }

.skill {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: linear-gradient(160deg, #2a3a58, #121828);
  border: 2px solid rgba(216, 222, 232, 0.22);
  box-shadow: inset 0 0 12px rgba(58,95,138,0.25), 0 4px 12px rgba(0,0,0,0.35);
}
.skill .icon { font-size: 1.05rem; line-height: 1; margin-bottom: 2px; opacity: 0.9; }
.skill .name { font-size: 0.72rem; }
.skill.ult {
  border-color: rgba(201, 162, 39, 0.7);
  background: linear-gradient(160deg, #4a3a20, #1a1420);
  box-shadow: 0 0 16px rgba(201,162,39,0.35), inset 0 0 10px rgba(201,162,39,0.15);
}
.skill.sk-q { border-color: rgba(136, 200, 255, 0.4); }
.skill.sk-w { border-color: rgba(120, 180, 220, 0.4); }
.skill.sk-e { border-color: rgba(255, 200, 120, 0.4); }

.team.radiant {
  color: #9ec8e8;
  border-color: rgba(58,95,138,0.55);
  background: linear-gradient(90deg, rgba(58,95,138,0.35), rgba(0,0,0,0.35));
}
.team.dire {
  color: #f0a090;
  border-color: rgba(194,59,34,0.55);
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(194,59,34,0.35));
}

#top-bar {
  background: linear-gradient(180deg, rgba(12,14,28,0.72), transparent);
}

.start-panel h1, .end-panel h1, .loading-inner h1 {
  background: linear-gradient(90deg, #E8D5B0, #D8DEE8, #87B5E0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn.primary {
  background: linear-gradient(135deg, #3A5F8A, #5a80b0);
  border-color: rgba(216,222,232,0.25);
}

#loading {
  background: radial-gradient(ellipse at center, #2a3048 0%, #0c101c 70%);
}

#webgl-fail .panel { max-width: 520px; }


/* —— Brief v2 職業選角 —— */
.start-panel { max-width: 640px; }
.class-select { margin: 0 0 16px; }
.class-select-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #e8e0d5;
}
.class-hint { font-weight: 400; color: var(--muted); font-size: 0.8rem; margin-left: 6px; }
.class-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.class-card {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.class-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.class-card.selected {
  border-color: var(--cc);
  background: color-mix(in srgb, var(--cc) 22%, transparent);
  box-shadow: 0 0 0 1px var(--cc), 0 8px 20px color-mix(in srgb, var(--cc) 25%, transparent);
}
.cc-swatch {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--cc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.cc-name { font-weight: 700; font-size: 0.95rem; }
.cc-tag { font-size: 0.72rem; color: var(--muted); line-height: 1.3; }
.class-selected-label {
  margin-top: 8px;
  font-size: 0.82rem;
  color: #d4c4a8;
}
@media (max-width: 560px) {
  .class-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== 手機／平板：虛擬操作（原神式）＋響應式 HUD ========== */

/* 開始畫面：觸控開關（必定可見、高對比） */
#start-screen.overlay {
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
#start-screen .start-panel {
  margin: 0 auto;
  max-height: none;
}
.start-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 0 4px;
  background: linear-gradient(180deg, rgba(18, 22, 40, 0) 0%, rgba(18, 22, 40, 0.96) 18%, rgba(18, 22, 40, 1) 100%);
}
.touch-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #f0c878;
  background: linear-gradient(135deg, rgba(240, 200, 120, 0.28), rgba(58, 95, 138, 0.45));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #fff8e8;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.touch-toggle-label {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff8e8;
}
.touch-toggle input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #f0c878;
  flex-shrink: 0;
}
.touch-toggle-hint {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffe9b0;
  line-height: 1.35;
  padding-left: 34px;
}
@media (max-width: 900px) {
  /* 壓縮上方內容，讓觸控列＋出陣鍵落在手機直向首屏 */
  #start-screen .controls-list li:not(.mobile-tip) { display: none; }
  #start-screen .controls-list { margin: 6px 0 10px; }
  #start-screen .tip { display: none; }
  #start-screen .class-select { margin-bottom: 8px; }
  #start-screen .class-selected-label { margin-top: 4px; font-size: 0.78rem; }
  #start-screen .subtitle { margin-bottom: 10px; }
}

/* Overlays must sit above nuclear touch-controls (z=90) while menus are open */
#loading,
#start-screen.overlay,
#end-screen.overlay,
#shop.overlay,
#webgl-fail.overlay {
  z-index: 120;
}

#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  touch-action: none;
  display: block;
  --tc-safe-l: env(safe-area-inset-left, 0px);
  --tc-safe-r: env(safe-area-inset-right, 0px);
  --tc-safe-b: env(safe-area-inset-bottom, 0px);
  --tc-safe-t: env(safe-area-inset-top, 0px);
}
/* 只有 .hidden 先隱藏；唔好用裸 #touch-controls { display:none } */
#touch-controls.hidden { display: none !important; }

/* Failsafe：touch-mode／touch-ui 時強制顯示虛擬鍵（即使仍帶 .hidden 都試顯示） */
body:is(.touch-ui, .touch-mode) #touch-controls,
html:is(.touch-ui, .touch-mode) #touch-controls {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none; /* children re-enable */
  z-index: 90 !important;
}
body:is(.touch-ui, .touch-mode) #touch-controls.hidden,
html:is(.touch-ui, .touch-mode) #touch-controls.hidden {
  display: block !important; /* nuclear: ignore .hidden under touch-ui */
}

/* 瞄準區：右半透明、唔擋中間視野；底部留空俾攻擊／技能 */
.tc-look {
  position: absolute;
  top: max(8%, calc(48px + var(--tc-safe-t)));
  right: 0;
  width: 55%;
  bottom: max(230px, calc(200px + var(--tc-safe-b)));
  height: auto;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: transparent;
  opacity: 0.001; /* 幾乎睇唔到但可接收 pointer */
  z-index: 1;
}

.tc-joystick {
  position: absolute;
  left: max(12px, var(--tc-safe-l));
  bottom: max(88px, calc(72px + var(--tc-safe-b)));
  width: 168px;
  height: 168px;
  pointer-events: auto;
  touch-action: none;
  z-index: 10;
}
.tc-joy-base {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(12, 16, 28, 0.62);
  border: 3px solid rgba(232, 197, 71, 0.95);
  box-shadow: inset 0 0 28px rgba(232, 197, 71, 0.22), 0 0 18px rgba(232, 197, 71, 0.45), 0 8px 22px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  position: relative;
}
.tc-joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 236, 170, 0.85), rgba(201, 162, 39, 0.9));
  border: 3px solid rgba(255, 230, 140, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(232, 197, 71, 0.55);
  will-change: transform;
}

.tc-actions {
  position: absolute;
  right: max(10px, var(--tc-safe-r));
  bottom: max(88px, calc(72px + var(--tc-safe-b)));
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 10;
}
.tc-btn {
  pointer-events: auto;
  touch-action: none;
  appearance: none;
  border: 2px solid rgba(216, 222, 232, 0.35);
  border-radius: 50%;
  color: #f0ece2;
  font: inherit;
  font-weight: 700;
  background: rgba(12, 16, 28, 0.62);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 0 14px rgba(58, 95, 138, 0.22);
  backdrop-filter: blur(5px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  padding: 0;
}
.tc-btn:active, .tc-btn.active {
  transform: scale(0.94);
  background: rgba(58, 95, 138, 0.72);
  border-color: rgba(216, 222, 232, 0.7);
}
.tc-attack {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 108px;
  height: 108px;
  font-size: 1.15rem;
  border: 3px solid rgba(232, 197, 71, 0.95);
  background: radial-gradient(circle at 35% 30%, rgba(224, 90, 90, 0.72), rgba(12, 16, 28, 0.78));
  box-shadow: 0 0 22px rgba(232, 197, 71, 0.55), 0 0 18px rgba(194, 59, 34, 0.45), 0 6px 16px rgba(0, 0, 0, 0.45);
}
.tc-jump {
  position: absolute;
  right: 122px;
  bottom: 18px;
  width: 76px;
  height: 76px;
  font-size: 0.95rem;
  border: 3px solid rgba(232, 197, 71, 0.8);
  border-color: rgba(232, 197, 71, 0.85);
  background: rgba(12, 16, 28, 0.72);
  box-shadow: 0 0 14px rgba(232, 197, 71, 0.4), 0 6px 16px rgba(0, 0, 0, 0.4);
}
.tc-cam {
  position: absolute;
  right: 104px;
  bottom: 86px;
  width: 48px;
  height: 48px;
  font-size: 0.72rem;
  border-color: rgba(201, 162, 39, 0.45);
  color: #e8d5b0;
}
.tc-mini {
  width: 44px;
  height: 44px;
  font-size: 0.64rem;
  border-color: rgba(201, 162, 39, 0.4);
}
#tc-build {
  position: absolute;
  right: 14px;
  bottom: 102px;
}
#tc-summon {
  position: absolute;
  right: 58px;
  bottom: 130px;
}


#tc-shop {
  position: absolute;
  right: 58px;
  bottom: 86px;
  width: 44px;
  height: 44px;
  font-size: 0.64rem;
  border-color: rgba(232, 197, 71, 0.55);
  color: #e8c547;
}
body:is(.touch-ui, .touch-mode) #hud-menu {
  pointer-events: auto;
  position: absolute;
  top: max(48px, calc(40px + var(--hud-safe-t)));
  right: max(8px, var(--hud-safe-r));
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 80;
}
body:is(.touch-ui, .touch-mode) #hud-menu .hud-menu-btn {
  pointer-events: auto;
  appearance: none;
  border: 1.5px solid rgba(216, 222, 232, 0.4);
  border-radius: 12px;
  background: rgba(12, 16, 28, 0.72);
  color: #f0ece2;
  font: inherit;
  font-weight: 700;
  font-size: 0.72rem;
  min-width: 52px;
  min-height: 40px;
  padding: 6px 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
body:is(.touch-ui, .touch-mode) #hud-menu .hud-menu-btn:active {
  transform: scale(0.96);
  filter: brightness(1.12);
}
/* desktop: keep menu hidden until touch mode */
#hud-menu { display: none; }
body:is(.touch-ui, .touch-mode) #hud-menu { display: flex; }

/* —— 觸控模式：精簡 HUD，邊緣／角落，唔遮中間 FOV —— */
body:is(.touch-ui, .touch-mode) #hud {
  --hud-safe-b: env(safe-area-inset-bottom, 0px);
  --hud-safe-t: env(safe-area-inset-top, 0px);
  --hud-safe-l: env(safe-area-inset-left, 0px);
  --hud-safe-r: env(safe-area-inset-right, 0px);
  /* #hud stays under #touch-controls (90) so joystick/ATK are never covered.
     Skills/potion raise their own z + pointer-events; empty hud areas stay none. */
  z-index: 60;
}
body:is(.touch-ui, .touch-mode) #top-bar {
  padding: max(4px, calc(2px + var(--hud-safe-t))) max(8px, calc(6px + var(--hud-safe-r))) 2px max(8px, calc(6px + var(--hud-safe-l)));
  gap: 6px;
  background: linear-gradient(180deg, rgba(8, 10, 20, 0.45), transparent);
}
body:is(.touch-ui, .touch-mode) .team {
  font-size: 0.72rem;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.32);
}
body:is(.touch-ui, .touch-mode) .timers {
  font-size: 0.7rem;
  padding: 3px 8px;
  gap: 6px;
  background: rgba(0, 0, 0, 0.38);
}

/* 底部：左狀態、右技能；中間畫面淨 */
body:is(.touch-ui, .touch-mode) #bottom-hud {
  pointer-events: none;
  left: max(6px, var(--hud-safe-l));
  right: max(6px, var(--hud-safe-r));
  bottom: max(4px, calc(2px + var(--hud-safe-b)));
  transform: none;
  width: auto;
  max-width: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  padding: 4px 4px;
  background: transparent;
  border-radius: 0;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .stats {
  pointer-events: none;
  order: 1;
  flex-direction: row;
  gap: 4px;
  opacity: 0.9;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .stat {
  min-width: 44px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.78rem;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .bars {
  pointer-events: none;
  order: 2;
  width: min(160px, 28vw);
  padding: 4px 6px;
  gap: 2px;
  background: rgba(8, 10, 20, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .bar { height: 8px; }
body:is(.touch-ui, .touch-mode) #bottom-hud .bar-label { width: 22px; font-size: 0.62rem; }
body:is(.touch-ui, .touch-mode) #bottom-hud .bar-text { width: 54px; font-size: 0.62rem; }
body:is(.touch-ui, .touch-mode) #bottom-hud .bar-row.exp { display: none; } /* 省空間 */

/* 技能：右下小簇，喺攻擊鍵上方，可點（抬高 z） */
body:is(.touch-ui, .touch-mode) #bottom-hud .skills {
  pointer-events: auto;
  order: 4;
  position: relative;
  z-index: 95;
  gap: 5px;
  width: auto;
  max-width: 42vw;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
  margin-bottom: 118px; /* clear giant ATK/JUMP pads */
  padding: 0;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .skill {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border-width: 1.5px;
  background: rgba(12, 16, 28, 0.72);
}
body:is(.touch-ui, .touch-mode) #bottom-hud .skill .name { font-size: 0.58rem; }
body:is(.touch-ui, .touch-mode) #bottom-hud .skill .icon { font-size: 0.85rem; margin-bottom: 0; }
body:is(.touch-ui, .touch-mode) #bottom-hud .skill .key,
html:is(.touch-ui, .touch-mode) #bottom-hud .skill .key,
body:is(.touch-ui, .touch-mode) .skill .key {
  display: none !important;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .skill:active {
  transform: scale(0.94);
  filter: brightness(1.15);
}
body:is(.touch-ui, .touch-mode) #bottom-hud .potion-slots {
  pointer-events: auto;
  order: 3;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 60;
}
body:is(.touch-ui, .touch-mode) #bottom-hud .pot {
  min-height: 32px;
  min-width: 48px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  touch-action: manipulation;
  background: rgba(0, 0, 0, 0.45);
}

body:is(.touch-ui, .touch-mode) #prompt {
  bottom: auto;
  top: max(52px, calc(44px + var(--hud-safe-t)));
  max-width: min(70vw, 280px);
  white-space: normal;
  text-align: center;
  font-size: 0.78rem;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 45;
}
body:is(.touch-ui, .touch-mode) #prompt:active { filter: brightness(1.15); }
body:is(.touch-ui, .touch-mode) #toast {
  top: max(48px, calc(40px + var(--hud-safe-t)));
  width: min(70vw, 280px);
  z-index: 46;
}
body:is(.touch-ui, .touch-mode) #toast .toast-msg {
  font-size: 0.78rem;
  padding: 4px 10px;
  margin: 2px 0;
  background: rgba(0, 0, 0, 0.5);
}

/* —— 直向手機：搖桿左下、攻擊右下、技能喺攻擊上方 —— */
html.orient-portrait.device-phone body:is(.touch-ui, .touch-mode) #bottom-hud .skills,
body.orient-portrait.device-phone:is(.touch-ui, .touch-mode) #bottom-hud .skills {
  position: absolute;
  right: max(8px, var(--hud-safe-r));
  bottom: max(168px, calc(152px + var(--hud-safe-b)));
  max-width: 200px;
  justify-content: flex-end;
}
html.orient-portrait.device-phone .tc-look,
body.orient-portrait.device-phone .tc-look {
  width: 55%;
  bottom: max(240px, calc(210px + var(--tc-safe-b)));
}
html.orient-portrait.device-phone .tc-joystick,
body.orient-portrait.device-phone .tc-joystick {
  left: max(10px, var(--tc-safe-l));
  bottom: max(96px, calc(80px + var(--tc-safe-b)));
  width: 156px;
  height: 156px;
}
html.orient-portrait.device-phone .tc-actions,
body.orient-portrait.device-phone .tc-actions {
  right: max(8px, var(--tc-safe-r));
  bottom: max(96px, calc(80px + var(--tc-safe-b)));
  width: 210px;
  height: 210px;
}
html.orient-portrait.device-phone .tc-attack,
body.orient-portrait.device-phone .tc-attack {
  width: 100px;
  height: 100px;
  font-size: 1.1rem;
  border: 3px solid rgba(232, 197, 71, 0.95);
}
html.orient-portrait.device-phone .tc-jump,
body.orient-portrait.device-phone .tc-jump {
  width: 72px;
  height: 72px;
  right: 114px;
  border: 3px solid rgba(232, 197, 71, 0.85);
}

/* —— 橫向手機：貼左右安全邊，視野更闊；技能沿右緣 —— */
html.orient-landscape.device-phone .tc-joystick,
body.orient-landscape.device-phone .tc-joystick {
  left: max(8px, var(--tc-safe-l));
  bottom: max(24px, calc(14px + var(--tc-safe-b)));
  width: 132px;
  height: 132px;
}
html.orient-landscape.device-phone .tc-actions,
body.orient-landscape.device-phone .tc-actions {
  right: max(6px, var(--tc-safe-r));
  bottom: max(20px, calc(12px + var(--tc-safe-b)));
  width: 190px;
  height: 190px;
}
html.orient-landscape.device-phone .tc-attack,
body.orient-landscape.device-phone .tc-attack {
  width: 88px; height: 88px; font-size: 1rem;
  border: 3px solid rgba(232, 197, 71, 0.95);
}
html.orient-landscape.device-phone .tc-jump,
body.orient-landscape.device-phone .tc-jump {
  width: 64px; height: 64px; right: 100px;
  border: 3px solid rgba(232, 197, 71, 0.85);
}
html.orient-landscape.device-phone .tc-look,
body.orient-landscape.device-phone .tc-look {
  width: 52%;
  top: max(6%, calc(36px + var(--tc-safe-t)));
  /* leave room for attack/jump cluster */
  bottom: max(160px, calc(148px + var(--tc-safe-b)));
}
html.orient-landscape.device-phone body:is(.touch-ui, .touch-mode) #bottom-hud,
body.orient-landscape.device-phone:is(.touch-ui, .touch-mode) #bottom-hud {
  bottom: max(4px, var(--hud-safe-b));
}
html.orient-landscape.device-phone body:is(.touch-ui, .touch-mode) #bottom-hud .skills,
body.orient-landscape.device-phone:is(.touch-ui, .touch-mode) #bottom-hud .skills {
  position: absolute;
  right: max(6px, var(--hud-safe-r));
  bottom: max(148px, calc(132px + var(--hud-safe-b)));
  flex-direction: column;
  max-width: 52px;
  gap: 4px;
}
html.orient-landscape.device-phone body:is(.touch-ui, .touch-mode) #bottom-hud .bars,
body.orient-landscape.device-phone:is(.touch-ui, .touch-mode) #bottom-hud .bars {
  width: min(140px, 22vw);
}
html.orient-landscape.device-phone body:is(.touch-ui, .touch-mode) #top-bar,
body.orient-landscape.device-phone:is(.touch-ui, .touch-mode) #top-bar {
  padding-top: max(2px, var(--hud-safe-t));
}

/* —— 平板：更大搖桿／間距，中間仍淨 —— */
html.device-tablet .tc-joystick,
body.device-tablet .tc-joystick {
  width: 168px;
  height: 168px;
  left: max(20px, calc(12px + var(--tc-safe-l)));
  bottom: max(88px, calc(72px + var(--tc-safe-b)));
}
html.device-tablet .tc-joy-knob,
body.device-tablet .tc-joy-knob {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
}
html.device-tablet .tc-actions,
body.device-tablet .tc-actions {
  width: 230px;
  height: 230px;
  right: max(18px, calc(12px + var(--tc-safe-r)));
  bottom: max(88px, calc(72px + var(--tc-safe-b)));
}
html.device-tablet .tc-attack,
body.device-tablet .tc-attack {
  width: 100px; height: 100px; font-size: 1.1rem;
}
html.device-tablet .tc-jump,
body.device-tablet .tc-jump {
  width: 72px; height: 72px; right: 120px; bottom: 20px;
}
html.device-tablet .tc-cam,
body.device-tablet .tc-cam {
  width: 56px; height: 56px; right: 128px; bottom: 108px;
}
html.device-tablet .tc-mini,
body.device-tablet .tc-mini {
  width: 52px; height: 52px; font-size: 0.72rem;
}
html.device-tablet #tc-build,
body.device-tablet #tc-build { bottom: 124px; right: 20px; }
html.device-tablet #tc-summon,
body.device-tablet #tc-summon { bottom: 158px; right: 74px; }
html.device-tablet .tc-look,
body.device-tablet .tc-look {
  width: 55%;
  bottom: max(200px, calc(180px + var(--tc-safe-b)));
}
html.device-tablet body:is(.touch-ui, .touch-mode) #bottom-hud .skill,
body.device-tablet:is(.touch-ui, .touch-mode) #bottom-hud .skill {
  width: 52px; height: 52px;
}
html.device-tablet body:is(.touch-ui, .touch-mode) #bottom-hud .bars,
body.device-tablet:is(.touch-ui, .touch-mode) #bottom-hud .bars {
  width: min(220px, 30vw);
}
html.device-tablet.orient-portrait body:is(.touch-ui, .touch-mode) #bottom-hud .skills,
body.device-tablet.orient-portrait:is(.touch-ui, .touch-mode) #bottom-hud .skills {
  position: absolute;
  right: max(18px, var(--hud-safe-r));
  bottom: max(220px, calc(200px + var(--hud-safe-b)));
  max-width: 280px;
}
html.device-tablet.orient-landscape body:is(.touch-ui, .touch-mode) #bottom-hud .skills,
body.device-tablet.orient-landscape:is(.touch-ui, .touch-mode) #bottom-hud .skills {
  position: absolute;
  right: max(16px, var(--hud-safe-r));
  bottom: max(240px, calc(220px + var(--hud-safe-b)));
  max-width: 240px;
}

/* CSS orientation fallbacks（JS class 未就緒時） */
@media (orientation: portrait) {
  html:not(.orient-landscape) .tc-look { width: 55%; }
}
@media (orientation: landscape) {
  html:not(.orient-portrait).device-phone .tc-joystick,
  body:not(.orient-portrait).device-phone .tc-joystick {
    bottom: max(24px, calc(12px + env(safe-area-inset-bottom, 0px)));
  }
}

/* —— 窄屏／手機：開始畫面、商店、結束畫面 —— */
@media (max-width: 900px) {
  .overlay {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .panel, .start-panel, .shop-panel, .end-panel {
    width: min(96vw, 560px);
    max-width: 100%;
    max-height: none;
    margin: auto 0;
    padding: 18px 16px;
    border-radius: 16px;
  }
  .start-panel h1, .end-panel h1, .loading-inner h1 {
    font-size: clamp(1.35rem, 6vw, 1.85rem);
  }
  .subtitle, .tip, .controls-list {
    font-size: 0.88rem;
  }
  .controls-list {
    padding-left: 1.1rem;
    margin: 10px 0;
  }
  .controls-list li {
    margin: 6px 0;
    line-height: 1.45;
  }
  .controls-list .mobile-tip {
    list-style: none;
    margin-left: -1.1rem;
    color: #9ec8e8;
    background: rgba(58, 95, 138, 0.22);
    border: 1px solid rgba(58, 95, 138, 0.45);
    border-radius: 10px;
    padding: 8px 10px;
  }
  .class-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .class-card {
    min-height: 72px;
    padding: 12px 10px;
    touch-action: manipulation;
  }
  .cc-name { font-size: 1rem; }
  .cc-tag { font-size: 0.78rem; }
  .btn, .btn.primary {
    min-height: 48px;
    font-size: 1rem;
    padding: 12px 16px;
    width: 100%;
    touch-action: manipulation;
  }
  .shop-item {
    min-height: 64px;
    padding: 14px 14px;
    touch-action: manipulation;
  }
  #btn-shop-close {
    min-height: 48px;
  }
  #top-bar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  #bottom-hud {
    width: 96%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bars { width: min(92vw, 420px); }
  .skill {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 420px) {
  .tc-joystick {
    width: 112px;
    height: 112px;
    bottom: max(60px, calc(48px + env(safe-area-inset-bottom, 0px)));
  }
  .tc-joy-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .tc-actions {
    width: 168px;
    height: 168px;
    bottom: max(60px, calc(48px + env(safe-area-inset-bottom, 0px)));
  }
  .tc-attack { width: 74px; height: 74px; font-size: 0.9rem; }
  .tc-jump { width: 54px; height: 54px; right: 90px; font-size: 0.75rem; }
  .tc-cam { width: 44px; height: 44px; right: 94px; bottom: 78px; font-size: 0.65rem; }
  #tc-build { bottom: 92px; width: 40px; height: 40px; }
  #tc-summon { bottom: 118px; right: 52px; width: 40px; height: 40px; }
  body:is(.touch-ui, .touch-mode) #bottom-hud .skill {
    width: 40px;
    height: 40px;
  }
  .team span { display: inline; }
  .timers span { white-space: nowrap; }
}

/* 桌面仍可看得到手機提示，但較低調 */
.controls-list .mobile-tip {
  color: #9ec8e8;
}
@media (min-width: 901px) {
  .controls-list .mobile-tip {
    opacity: 0.85;
  }
}

/* 防止觸控拖曳時整頁拉動／縮放 */
html:is(.touch-ui, .touch-mode), body:is(.touch-ui, .touch-mode) {
  overscroll-behavior: none;
  touch-action: none;
}
body:is(.touch-ui, .touch-mode) #game-canvas {
  touch-action: none;
}