/* 에이스 비행단 — 캔버스 한 장 위에 얇은 HUD만 얹습니다. */
.bgx-ace { --ac-gold: #ffd75e; }
.ac-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#acCv {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}

/* ---------- 위쪽 표시줄 ---------- */
.ac-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 6px 10px calc(6px + env(safe-area-inset-top)) 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.ac-top .ac-l, .ac-top .ac-r { display: flex; flex-direction: column; gap: 4px; }
.ac-top .ac-r { align-items: flex-end; }
.ac-sc { display: flex; align-items: baseline; gap: 5px; }
.ac-sc span { font-size: 10px; opacity: .65; }
.ac-sc b { font-size: clamp(15px, 4.4vmin, 22px); font-weight: 900; color: #fff; letter-spacing: -.5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.ac-lives { display: flex; gap: 4px; }
.ac-lives i {
  width: 13px; height: 12px; display: block; opacity: .22;
  background: #ff5a78; transition: opacity .2s;
  -webkit-mask: radial-gradient(circle at 30% 32%, #000 99%, transparent) 0 0/50% 50% no-repeat,
                radial-gradient(circle at 70% 32%, #000 99%, transparent) 100% 0/50% 50% no-repeat,
                linear-gradient(#000,#000) 50% 100%/72% 72% no-repeat;
  mask: radial-gradient(circle at 30% 32%, #000 99%, transparent) 0 0/50% 50% no-repeat,
        radial-gradient(circle at 70% 32%, #000 99%, transparent) 100% 0/50% 50% no-repeat,
        linear-gradient(#000,#000) 50% 100%/72% 72% no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add;
  clip-path: polygon(50% 100%, 0 38%, 0 16%, 18% 2%, 36% 2%, 50% 18%, 64% 2%, 82% 2%, 100% 16%, 100% 38%);
}
.ac-lives i.on { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,90,120,.8)); }
.ac-stage { font-size: clamp(11px, 3vmin, 14px); font-weight: 800; color: var(--ac-gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.ac-xp { display: flex; align-items: center; gap: 5px; }
.ac-xp b { font-size: 11px; font-weight: 900; color: #9fe4ff; }
.ac-xp i { display: block; width: clamp(60px, 22vmin, 110px); height: 6px; border-radius: 99px;
  background: rgba(255,255,255,.18); overflow: hidden; }
.ac-xp u { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #6be7ff, #9fe4ff); transition: width .15s; }

/* ---------- 보스 체력 ---------- */
.ac-boss {
  position: absolute; left: 10%; right: 10%; top: calc(54px + env(safe-area-inset-top)); z-index: 4;
  text-align: center; pointer-events: none;
}
.ac-boss.hide { display: none; }
.ac-boss span { display: block; font-size: 11px; font-weight: 900; color: #ff9f9f; margin-bottom: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.ac-boss i { display: block; height: 8px; border-radius: 99px; background: rgba(0,0,0,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); overflow: hidden; }
.ac-boss u { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff3b5c, #ff8d4d); transition: width .12s; }

.ac-hint {
  position: absolute; left: 0; right: 0; bottom: 18%; z-index: 4; text-align: center;
  font-size: clamp(12px, 3.4vmin, 15px); font-weight: 800; color: #fff; pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.9); transition: opacity .5s;
}
.ac-hint.gone { opacity: 0; }

/* ---------- 레벨업 카드 / 결과 ---------- */
.ac-up {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,20,.82); backdrop-filter: blur(3px); padding: 14px;
  animation: acFade .18s both;
}
@keyframes acFade { from { opacity: 0; } }
.ac-up .box { width: 100%; max-width: 520px; max-height: 100%; overflow: auto; text-align: center; }
.ac-up h3 { margin: 0 0 4px; font-size: clamp(16px, 4.6vmin, 22px); color: var(--ac-gold); }
.ac-up p { margin: 0 0 10px; font-size: clamp(11px, 3vmin, 13px); opacity: .78; }
.ac-up .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ac-up .cards button {
  display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center;
  padding: 10px 5px; border-radius: 13px; min-height: 0;
  background: rgba(255,255,255,.07); color: var(--cream);
  box-shadow: inset 0 0 0 2px var(--wc, #fff);
  transition: transform .12s, background .12s;
}
.ac-up .cards button:active { transform: translateY(2px); background: rgba(255,255,255,.14); }
.ac-up .cards b { font-size: clamp(11px, 3.1vmin, 14px); color: var(--wc, #fff); }
.ac-up .cards em { font-style: normal; font-size: 10px; opacity: .7; }
.ac-up .cards span { font-size: clamp(10px, 2.8vmin, 12px); font-weight: 800; }
.ac-up .cards small { font-size: 9.5px; opacity: .6; line-height: 1.35; }
.ac-end .box { max-width: 360px; }
.ac-stat { display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 12px; margin-bottom: 4px; border-radius: 10px; background: rgba(255,255,255,.06); }
.ac-stat span { font-size: 12px; opacity: .72; }
.ac-stat b { font-size: clamp(14px, 4vmin, 19px); color: var(--ac-gold); }
.ac-end .bgx-go { margin-top: 10px; }

/* ---------- 파일럿 고르기 ---------- */
.ac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 4px 0 12px; }
.ac-grid .ac-pick {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 6px; border-radius: 13px; min-height: 0;
  background: rgba(255,255,255,.06); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .12s, background .12s, box-shadow .12s;
}
.ac-grid .ac-pick:active { transform: translateY(2px); }
.ac-grid .ac-pick:hover { background: rgba(240,192,74,.16); box-shadow: inset 0 0 0 2px var(--gold); }
.ac-grid .ac-pick span { font-size: clamp(9px, 2.6vmin, 11.5px); font-weight: 800; }

/* 12지신 그림 위에 눈썹과 조종모를 겹쳐 놓습니다. */
.ac-pilot { position: relative; width: 100%; max-width: 76px; aspect-ratio: 80 / 92; }
.ac-pilot .ar-avatar, .ac-pilot .ac-brow, .ac-pilot .ac-cap { position: absolute; inset: 0; }
.ac-pilot .ar-avatar { display: block; }
.ac-pilot .ar-zsvg, .ac-pilot .ac-brow, .ac-pilot .ac-cap { width: 100%; height: 100%; display: block; }
.ac-pilot .ac-brow { z-index: 2; }
.ac-pilot .ac-cap { z-index: 3; }

@media (max-height: 430px) {
  .ac-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ac-up .cards button { padding: 7px 4px; }
  .ac-hint { bottom: 24%; }
}

/* ---------- 난이도 고르기(혼자 할 때만) ---------- */
.ac-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 2px 0 10px; }
.ac-diff button {
  display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center;
  padding: 9px 6px; border-radius: 13px; min-height: 0;
  background: rgba(255,255,255,.06); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background .12s, box-shadow .12s, transform .12s;
}
.ac-diff button:active { transform: translateY(2px); }
.ac-diff button b { font-size: clamp(13px, 3.6vmin, 16px); }
.ac-diff button span { font-size: 11px; opacity: .8; font-weight: 700; }
.ac-diff button small { font-size: 10px; opacity: .6; line-height: 1.35; }
.ac-diff button.on { background: rgba(240,192,74,.18); box-shadow: inset 0 0 0 2px var(--gold); }
.ac-diff button[data-m="hard"].on { background: rgba(255,110,140,.18); box-shadow: inset 0 0 0 2px #ff6e8c; }
.ac-diff button[data-m="hard"].on b { color: #ff9fb3; }

/* ---------- 방어막 표시 ---------- */
.ac-lives u {
  display: block; font-size: 12px; line-height: 1; opacity: .25; text-decoration: none;
  filter: grayscale(1); transition: opacity .2s, filter .2s;
}
.ac-lives u.on { opacity: 1; filter: none; text-shadow: 0 0 7px rgba(138,216,255,.9); }

/* 기체 강화 카드는 무기와 구분되게 테두리를 점선으로 */
.ac-up .cards button.perk { box-shadow: inset 0 0 0 2px var(--wc, #fff), inset 0 0 22px rgba(255,255,255,.05); }
.ac-up .cards button.perk em { color: var(--wc, #fff); opacity: .9; }