/* skills2.css — the 8-slot hotbar and the bigger skill window (js/skilltree.js, js/skillui.js). Sizes in --u like style.css. */

/* ---------- the hotbar: Q E R F 3 4 5 6, then the potions ---------- */
.hotbar { gap: calc(8 * var(--u)); }
.hslot.skill.empty { opacity: 0.5; }
.hslot.skill.empty .spc { visibility: hidden; }
.hslot.skill:not(.ult) { box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55; }

/* ---------- the skill window ---------- */
.card.skill { width: min(97vw, calc(1080 * var(--u))); }
.sk-list { max-height: min(78vh, calc(720 * var(--u))); }
.sk-bar {
  position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u));
  background: linear-gradient(#3d3848, #2e2a38); border: calc(3 * var(--u)) solid var(--ink); box-shadow: inset 0 0 0 calc(2 * var(--u)) #a88a55;
}
.sk-bar-h { font: 400 calc(14 * var(--u)) 'Mitr', sans-serif; color: #cfc6b8; text-align: center; }
.sk-slots { display: flex; gap: calc(8 * var(--u)); padding-top: calc(22 * var(--u)); }
.sk-gap { width: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: #a88a55; margin: 0 calc(2 * var(--u)); }
.sk-slot {
  position: relative; width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: calc(10 * var(--u)); cursor: pointer;
  background: linear-gradient(#4a4555, #37323f); border: calc(3 * var(--u)) solid var(--ink); box-shadow: inset 0 0 0 calc(2 * var(--u)) #a88a55;
}
.sk-slot img { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; object-fit: contain; cursor: grab; }
.sk-slot .key { top: calc(-23 * var(--u)); font-size: calc(14 * var(--u)); min-width: calc(24 * var(--u)); }
.sk-slot.ult { box-shadow: inset 0 0 0 calc(2 * var(--u)) #ffd873, 0 0 calc(10 * var(--u)) rgba(255, 216, 115, 0.45); }
.sk-slot.over, .sk-slot.armed:hover { box-shadow: inset 0 0 0 calc(3 * var(--u)) #9fe0ff, 0 0 calc(14 * var(--u)) rgba(159, 224, 255, 0.6); }
.sk-slot.armed { animation: skpulse 0.9s ease-in-out infinite; }
@keyframes skpulse { 50% { box-shadow: inset 0 0 0 calc(3 * var(--u)) #9fe0ff; } }

.sk-tabs { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; margin-top: calc(4 * var(--u)); }
.sk-tab {
  pointer-events: auto; cursor: pointer; padding: calc(3 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0;
  background: #2e2a38; color: #cfc6b8; border: calc(3 * var(--u)) solid var(--ink); font: 500 calc(17 * var(--u)) 'Mitr', sans-serif;
}
.sk-tab.on { background: linear-gradient(#5a4f6e, #3f3650); color: #fff3cf; box-shadow: inset 0 0 0 calc(2 * var(--u)) #ffd873; }

.sk-row { grid-template-columns: calc(70 * var(--u)) 1fr calc(86 * var(--u)); }
.sk-row.armed { box-shadow: inset 0 0 0 calc(3 * var(--u)) #9fe0ff; }
.sk-ic { width: calc(66 * var(--u)); height: calc(66 * var(--u)); border-radius: calc(12 * var(--u)); }
.sk-ic.drag { cursor: grab; }
.sk-ic.drag:hover { box-shadow: 0 0 0 calc(3 * var(--u)) #9fe0ff; }
.sk-ic img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sk-kind {
  display: inline-block; padding: 0 calc(7 * var(--u)); border-radius: calc(6 * var(--u)); border: calc(2 * var(--u)) solid var(--ink);
  font: 600 calc(13 * var(--u)) / 1.35 'Mitr', sans-serif; color: #231d2c; background: #9fe0ff;
}
.sk-kind.buff { background: #8ee08a; }
.sk-kind.passive { background: #d9c7ff; }
.sk-row.ult .sk-kind { background: #ffd873; }
.sk-on { color: #ffd873; font-weight: 600; }
.sk-req { font: 400 calc(14 * var(--u)) 'Mitr', sans-serif; color: #cfc6b8; margin-top: calc(2 * var(--u)); }
.sk-req .ok { color: #8ee08a; }
.sk-req .no { color: #ff9a9a; }

/* the job change: two branch cards side by side */
.jobs.two { grid-template-columns: repeat(2, 1fr); }
.jobs.two .job canvas { width: calc(140 * var(--u)); height: calc(166 * var(--u)); }
.job-sk { flex-wrap: wrap; justify-content: center; }

/* the pause menu's "try a job" buttons: the 2nd jobs in their own colour */

/* the skill window by line (skillplan.js): the line's element colour, the auto-attack mark, the resonance */
.sk-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(10 * var(--u)); margin-top: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)); border-left: calc(5 * var(--u)) solid var(--el); border-radius: calc(6 * var(--u));
  background: linear-gradient(90deg, color-mix(in srgb, var(--el) 22%, transparent), transparent 70%);
}
.sk-line b { font: 600 calc(18 * var(--u)) 'Mitr', sans-serif; color: var(--el); }
.sk-auto {
  font: 600 calc(12 * var(--u)) / 1.4 'Mitr', sans-serif; color: #231d2c; background: #ffb070; padding: 0 calc(7 * var(--u));
  border-radius: 999px; border: calc(2 * var(--u)) solid var(--ink);
}
.sk-res { margin-left: auto; font: 400 calc(14 * var(--u)) 'Mitr', sans-serif; color: #cfc6b8; }