/* ================================================================
   ABILITIES.CSS — Compact carousel layout
   ================================================================ */
body { font-family: 'Rajdhani', sans-serif; overflow-x: clip; }
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(79,195,247,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,.022) 1px, transparent 1px);
  background-size: 44px 44px;
}
.ab-page {
  padding-top: 56px; min-height: 100vh; position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  padding: 56px 20px 72px; display: flex; flex-direction: column; gap: 14px;
}

/* ── Hero ── */
.ab-hero { text-align: center; padding: 20px 0 4px; }
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.ab-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.ab-title {
  font-family: 'Cinzel', serif; font-size: clamp(26px, 5vw, 50px); font-weight: 900;
  color: var(--text); letter-spacing: .12em; margin: 0 0 6px;
}
.ab-sub { font-size: 13px; color: var(--muted); }

/* ── Strip ── */
.ab-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(180deg,#0f1a2b,#08111a);
  border: 1px solid rgba(200,155,60,.12);
  clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}
.ab-spell { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:54px; }
.ab-spell img { width:40px; height:40px; border-radius:4px; border:2px solid rgba(200,155,60,.18); }
.ab-spell-key { font-family:'Cinzel',serif; font-size:11px; font-weight:900; color:var(--gold); }
.ab-spell-name { font-size:8px; color:var(--muted); text-align:center; max-width:60px; line-height:1.2; }

/* ── Order carousel ── */
.ab-carousel-wrap {
  background: linear-gradient(180deg,#0f1a2b,#08111a);
  border: 1px solid rgba(200,155,60,.15);
  clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  overflow: hidden;
}

/* Nav pills */
.ao-nav {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 10px 14px 0;
}
.ao-pill {
  padding: 5px 12px; cursor: pointer; transition: all .15s;
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; letter-spacing:.08em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: var(--muted);
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
}
.ao-pill:hover { background: rgba(200,155,60,.08); color: var(--text); }
.ao-pill.active { background: rgba(200,155,60,.15); border-color: rgba(200,155,60,.4); color: var(--gold); }
.ao-arrows { margin-left: auto; display: flex; gap: 4px; }
.ao-arr {
  width: 26px; height: 26px; font-size: 16px; line-height: 1;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  color: var(--muted); cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.ao-arr:hover { background: rgba(200,155,60,.12); border-color: rgba(200,155,60,.3); color: var(--gold); }

/* Slides */
.ao-track { position: relative; }
.ao-slide { display: none; animation: ao-in .18s ease; }
.ao-slide.active { display: block; }
@keyframes ao-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.ao-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Card header */
.ao-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.ao-runes { display:flex; gap:4px; margin-left:auto; }
.ao-runes img { width:22px; height:22px; border-radius:50%; opacity:.8; }

/* Seq */
.ao-seq { display:flex; align-items:center; gap:7px; flex:1; flex-wrap:wrap; }
.ab-seq-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ab-seq-item img { width:38px; height:38px; border-radius:4px; border:2px solid rgba(255,255,255,.1); }
.ab-seq-item.max img { border-color:rgba(200,155,60,.55); box-shadow:0 0 8px rgba(200,155,60,.18); }
.seq-key { font-family:'Cinzel',serif; font-size:11px; font-weight:900; color:var(--text); }
.seq-sub { font-size:8px; font-weight:800; letter-spacing:.1em; color:var(--gold); }
.seq-arrow { font-size:16px; color:rgba(200,155,60,.3); }

/* Card body */
.ao-body { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media(max-width:640px){ .ao-body { grid-template-columns:1fr; } }
.ao-why p { font-size:11px; color:var(--text-dim); line-height:1.5; margin:0; }
.ab-why-label { font-size:8px; font-weight:800; letter-spacing:.18em; color:var(--gold); display:block; margin-bottom:4px; }
.ab-tags { display:flex; gap:4px; flex-wrap:wrap; }
.ab-tag { font-size:9px; font-weight:700; padding:1px 6px; letter-spacing:.04em;
  clip-path:polygon(2px 0%,100% 0%,calc(100% - 2px) 100%,0% 100%); }
.ab-tip {
  display:flex; gap:7px; align-items:flex-start;
  background:rgba(79,195,247,.04); border:1px solid rgba(79,195,247,.1);
  padding:7px 10px; font-size:10px; color:var(--text-dim); line-height:1.5;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}

/* Badge */
.ab-order-badge {
  font-size:8px; font-weight:900; letter-spacing:.15em; white-space:nowrap;
  padding:2px 7px;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}
.ab-order-badge.popular    { background:rgba(200,155,60,.2);  color:var(--gold);  border:1px solid rgba(200,155,60,.4); }
.ab-order-badge.damage     { background:rgba(239,83,80,.15);  color:#ff8a80;      border:1px solid rgba(239,83,80,.3); }
.ab-order-badge.sustain    { background:rgba(74,222,128,.1);  color:#4ADE80;      border:1px solid rgba(74,222,128,.28); }
.ab-order-badge.situational{ background:rgba(145,70,255,.12); color:#bf94ff;      border:1px solid rgba(145,70,255,.28); }

/* Level tracker */
.ao-levels { border-top:1px solid rgba(255,255,255,.04); padding-top:8px; }
.lv-row { display:flex; gap:2px; overflow-x:auto; padding-bottom:2px; }
.lv-cell {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:30px; flex-shrink:0;
  background:rgba(255,255,255,.03); border-radius:2px; padding:3px 2px;
  border:1px solid rgba(255,255,255,.05);
}
.lv-cell img { width:22px; height:22px; border-radius:2px; }
.lv-num { font-family:'Bebas Neue',sans-serif; font-size:8px !important; color:var(--muted); letter-spacing:.05em; }
.lv-q { border-color:rgba(200,155,60,.3); background:rgba(200,155,60,.06); }
.lv-q .lv-num { color:rgba(200,155,60,.7); }
.lv-w { border-color:rgba(79,195,247,.3); background:rgba(79,195,247,.06); }
.lv-w .lv-num { color:rgba(79,195,247,.7); }
.lv-e { border-color:rgba(145,70,255,.3); background:rgba(145,70,255,.06); }
.lv-e .lv-num { color:rgba(145,70,255,.7); }
.lv-r { border-color:rgba(239,83,80,.35); background:rgba(239,83,80,.08); }
.lv-r .lv-num { color:rgba(239,83,80,.8); }

/* ── Bottom grid ── */
.ab-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:680px){ .ab-bottom-grid { grid-template-columns:1fr; } }
.ab-compare, .ab-quickref {
  background:linear-gradient(180deg,#0f1a2b,#08111a);
  border:1px solid rgba(200,155,60,.12);
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  padding:12px 14px;
}
.ab-compare-title { margin-bottom:10px; }
.ab-eyebrow-sm { font-size:9px; font-weight:800; letter-spacing:.2em; color:var(--gold); text-transform:uppercase; }
.ab-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:400px){ .ab-compare-grid { grid-template-columns:1fr; } }
.ab-compare-col {
  border:1px solid rgba(255,255,255,.06);
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  padding:8px 10px;
}
.ab-compare-col.q-col { border-color:rgba(200,155,60,.2); }
.ab-compare-col.w-col { border-color:rgba(79,195,247,.2); }
.ab-compare-header { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.ab-compare-header span { font-family:'Cinzel',serif; font-size:10px; font-weight:700; color:var(--text); }
.ab-compare-col ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; }
.ab-compare-col li { font-size:10px; color:var(--text-dim); display:flex; gap:5px; align-items:baseline; line-height:1.35; }
.stat-up   { color:#4ADE80; font-weight:900; flex-shrink:0; font-size:10px; }
.stat-down { color:#EF5350; font-weight:900; flex-shrink:0; font-size:10px; }

/* Quick ref */
.ab-qr-grid { display:flex; flex-direction:column; gap:1px; }
.ab-qr-row {
  display:grid; grid-template-columns:1fr 120px; gap:8px;
  align-items:center; padding:6px 7px; font-size:11px; color:var(--text-dim);
  background:rgba(255,255,255,.02); border-radius:2px;
  transition:background .15s;
}
.ab-qr-row[onclick]:hover { background:rgba(200,155,60,.06); cursor:pointer; }
.ab-qr-row.header {
  font-size:8px; font-weight:800; letter-spacing:.12em; color:var(--gold);
  background:transparent; border-bottom:1px solid rgba(200,155,60,.1); padding-bottom:5px;
}
.ab-qr-seq { display:flex; align-items:center; gap:4px; font-family:'Cinzel',serif; }
.qr-k {
  font-size:11px; font-weight:900; padding:1px 5px;
  clip-path:polygon(2px 0%,100% 0%,calc(100% - 2px) 100%,0% 100%);
  background:rgba(255,255,255,.06); color:var(--text);
}
.qr-k.q { background:rgba(200,155,60,.15); color:var(--gold); }
.qr-k.w { background:rgba(79,195,247,.12); color:#80d8ff; }

.nav-active { color:var(--gold) !important; font-weight:700 !important; }

/* ── ABILITIES MOBILE EXTRAS ───────────────────────────────────── */
@media(max-width:640px) {
  /* Order pills — scrollable row */
  .ao-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ao-pills::-webkit-scrollbar { display: none; }
  .ao-pill { white-space: nowrap; font-size: 11px !important; }
  /* Level tracker — scrollable */
  .ao-levels-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Spell grid — smaller icons */
  .ab-spell-icon { width: 36px !important; height: 36px !important; }
}
@media(max-width:480px) {
  /* Why section — full width */
  .ao-why { padding: 10px 12px !important; font-size: 12px !important; }
  .ao-tip  { padding: 8px 10px !important; font-size: 11px !important; }
  /* Against tags — wrap */
  .ao-against { gap: 4px !important; }
  .ab-tag { font-size: 9px !important; padding: 2px 7px !important; }
}