/* ═══════════════════════════════════════════════════════════════════
   AQS SKILLS  —  Character ability button (challenge.html)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Skill bar ───────────────────────────────────────────────────── */
#aqs-skill-bar {
  position: fixed; bottom: 80px; right: 14px;
  z-index: 8000; display: none;
  flex-direction: column; align-items: center; gap: 4px;
}

/* ── Skill button ────────────────────────────────────────────────── */
#aqs-skill-btn {
  width: 72px; background: rgba(12,4,0,.96);
  border: 2px solid var(--skc, #FF6A00); border-radius: 8px;
  padding: 7px 5px 8px; cursor: pointer; text-align: center;
  transition: all .2s;
  clip-path: polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  box-shadow: 0 0 14px rgba(var(--skr,255,106,0),.3);
  position: relative; overflow: hidden; user-select: none;
}
#aqs-skill-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(var(--skr,255,106,0),.12),transparent);
  pointer-events: none;
}
#aqs-skill-btn:hover:not(.sk-used) {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 24px rgba(var(--skr,255,106,0),.55);
  border-color: var(--skc, #FF6A00);
}
#aqs-skill-btn.sk-used {
  opacity: .38; cursor: not-allowed;
  filter: grayscale(.65);
  transform: none !important; box-shadow: none !important;
}
#aqs-skill-btn.sk-activating {
  animation: sk-activate-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sk-activate-pop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.35); box-shadow: 0 0 50px rgba(var(--skr,255,106,0),1); }
  100%{ transform: scale(1); }
}
#aqs-skill-btn.sk-ready {
  animation: sk-ready-glow 1.8s ease infinite;
}
@keyframes sk-ready-glow {
  0%,100% { box-shadow: 0 0 10px rgba(var(--skr,255,106,0),.3); }
  50%     { box-shadow: 0 0 24px rgba(var(--skr,255,106,0),.75),0 0 40px rgba(var(--skr,255,106,0),.35); }
}

/* ── Skill button content ────────────────────────────────────────── */
.sk-char-img {
  width: 48px; height: 60px; object-fit: cover; object-position: top;
  border-radius: 5px; display: block; margin: 0 auto 3px;
  border: 1px solid rgba(var(--skr,255,106,0),.4);
}
.sk-icon     { font-size: 1.1rem; margin-bottom: 2px; display: block; line-height: 1; }
.sk-name     { font-size: .58rem; font-weight: 900; color: #fff; letter-spacing: .02em; line-height: 1.3; }
.sk-use-label{ font-size: .55rem; color: rgba(255,150,60,.85); font-weight: 800; margin-top: 3px; letter-spacing: .04em; text-transform: uppercase; }
.sk-used-label{ font-size: .56rem; color: #4ade80; font-weight: 900; margin-top: 3px; }

/* ── Activation flash overlay ───────────────────────────────────── */
#aqs-skill-flash {
  position: fixed; inset: 0; z-index: 9982;
  pointer-events: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.sk-flash-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,rgba(var(--skr,255,106,0),.35) 0%,transparent 68%);
  animation: sk-flash-bg-ani .8s ease forwards;
}
@keyframes sk-flash-bg-ani {
  0%  { opacity: 0; transform: scale(.7); }
  35% { opacity: 1; }
  100%{ opacity: 0; transform: scale(1.4); }
}
.sk-flash-char {
  width: 124px; height: 170px; object-fit: cover; object-position: top;
  border-radius: 8px; border: 3px solid var(--skc, #FF6A00);
  box-shadow: 0 0 50px rgba(var(--skr,255,106,0),.8);
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  animation: sk-char-pop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  position: relative; z-index: 1;
}
@keyframes sk-char-pop {
  0%  { transform: scale(.4) translateY(40px); opacity: 0; }
  100%{ transform: scale(1)  translateY(0);    opacity: 1; }
}
.sk-flash-badge {
  background: linear-gradient(90deg,#FF2400,#FF6A00);
  padding: 7px 22px 7px 16px;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);
  font-size: .92rem; font-weight: 900; color: #fff;
  letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
  position: relative; z-index: 1;
  animation: sk-slide-in .3s .18s cubic-bezier(.34,1.56,.64,1) both;
}
.sk-flash-desc {
  font-size: .84rem; color: #FFD700; font-weight: 800;
  text-shadow: 0 0 20px rgba(255,200,0,.7);
  position: relative; z-index: 1;
  animation: sk-slide-in .3s .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sk-slide-in {
  0%  { transform: translateX(-50px); opacity: 0; }
  100%{ transform: translateX(0);     opacity: 1; }
}

/* ── Active effect banner ────────────────────────────────────────── */
#aqs-skill-active-banner {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
  z-index: 7500; background: rgba(12,4,0,.97);
  border: 2px solid var(--skc, #FF6A00); border-radius: 7px;
  padding: 5px 18px; font-size: .74rem; font-weight: 900;
  color: #FFD700; letter-spacing: .07em; text-align: center;
  clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  white-space: nowrap; box-shadow: 0 4px 16px rgba(var(--skr,255,106,0),.3);
  animation: ff-speech-in .22s ease;
}

/* ── 50/50 eliminated option ─────────────────────────────────────── */
.aqs-ch-option.sk-eliminated {
  opacity: .28 !important; pointer-events: none !important; position: relative;
}
.aqs-ch-option.sk-eliminated::after {
  content: "✗ ELIMINATED"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,.12); border-radius: inherit;
  color: #ef4444; font-size: .68rem; font-weight: 900; letter-spacing: .08em;
}