/* Hero Skills — scoped styles, shared theme tokens, zero specificity hacks. */
.skills{min-width:0}
.skills .skills-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.skills .skills-heading h2{margin:0}
.skills .skills-heading .muted{margin:3px 0 0;font-size:11px}
.skills .skill-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.skills .skill-count{padding:5px 9px;border-radius:7px;background:var(--primary-soft,#233a5c);color:var(--primary,#72a7ff);font-size:11px;font-weight:700}
.skills .skill-buff{font-size:11px;color:var(--success,#38caa6);font-weight:700}
.skills .skill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.skills .skill-card{--skill-accent:#e49b69;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:83px;padding:8px;border:1px solid color-mix(in srgb,var(--skill-accent) 24%,var(--border-soft,#34455e));border-radius:10px;background:var(--surface-subtle,#101c2f);box-shadow:none}
.skills .skill-recovery{--skill-accent:#3bc7a2}
.skills .skill-defense{--skill-accent:#6da8ff}
.skills .skill-finisher{--skill-accent:#bd91f5}
.skills .skill-card[data-skill="strike"]{--skill-art:url('../images/skills/power-strike.webp')}
.skills .skill-card[data-skill="heal"]{--skill-art:url('../images/skills/second-wind.webp')}
.skills .skill-card[data-skill="flurry"]{--skill-art:url('../images/skills/blade-flurry.webp')}
.skills .skill-card[data-skill="ward"]{--skill-art:url('../images/skills/guardian-ward.webp')}
.skills .skill-card[data-skill="execute"]{--skill-art:url('../images/skills/final-verdict.webp')}
.skills .skill-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,var(--surface-subtle,#101c2f) 15%,color-mix(in srgb,var(--surface-subtle,#101c2f) 87%,transparent) 100%),var(--skill-art);background-position:center,right center;background-size:cover,auto 180%;background-repeat:no-repeat;opacity:.28}
.skills .skill-card-top{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0}
.skills .skill-icon{display:block;width:34px;height:34px;min-width:34px;min-height:34px;overflow:hidden;border-radius:6px;line-height:0}
.skills .skill-icon img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.skills .skill-card-title{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:2px}
.skills .skill-card-title strong{font-size:11px;line-height:1.2;color:var(--text-heading,#f2f5fb)}
.skills .skill-card-title small{font-size:9px;color:var(--text-secondary,#a9b7ca)}
.skills .skill-status{justify-self:end;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:700;color:var(--skill-accent);padding:3px 5px;border-radius:6px;background:color-mix(in srgb,var(--skill-accent) 12%,var(--surface-subtle,#101c2f))}
.skills .skill-description{margin:0;min-width:0;flex:1;font-size:10px;line-height:1.25;color:var(--text-secondary,#a9b7ca)}
.skills .skill-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:auto}
.skills .skill-cooldown-label{font-size:9px;color:var(--text-secondary,#a9b7ca)}
.skills .skill-card .cast{width:auto;min-width:66px;margin:0;padding:5px 7px;font-size:10px;border-radius:7px}
/* Cooldown is a full-height background fill, moving left to right as it recharges. */
.skills .skill-progress{display:none}
.skills .skill-cooldown-overlay{
 position:absolute;inset:0;z-index:0;display:block;
 pointer-events:none;visibility:hidden;opacity:0;
 background:none;transition:opacity .15s ease;
}
.skills .skill-cooldown-overlay::before{
 content:"";position:absolute;inset:0 auto 0 0;
 width:calc(var(--skill-ready,0) * 100%);
 background:linear-gradient(90deg,
  color-mix(in srgb,var(--skill-accent) 13%,transparent),
  color-mix(in srgb,var(--skill-accent) 23%,transparent));
 border-right:2px solid color-mix(in srgb,var(--skill-accent) 70%,transparent);
 box-shadow:3px 0 12px color-mix(in srgb,var(--skill-accent) 18%,transparent);
 transition:width .12s linear;
}
.skills .skill-card.is-cooling .skill-cooldown-overlay{visibility:visible;opacity:1}
.skills .skill-overlay-time{
 position:absolute;right:9px;top:7px;
 font-size:10px;font-weight:750;font-variant-numeric:tabular-nums;
 color:var(--skill-accent);background:var(--surface-subtle,#101c2f);
 border:1px solid color-mix(in srgb,var(--skill-accent) 45%,var(--border-soft,#34455e));
 border-radius:5px;padding:3px 5px;
}
.skills .skill-card-top,.skills .skill-description,.skills .skill-card-bottom{position:relative;z-index:1}
.skills .skill-card.is-cooling .skill-status{visibility:hidden}
.skills .skill-locked{opacity:.65}
.skills .skill-locked .skill-progress-fill{width:0}
.skills .skill-card:focus-within{outline:2px solid var(--primary,#72a7ff);outline-offset:2px}
@media(max-width:520px){.skills .skill-list{grid-template-columns:1fr}.skills .skill-card{min-height:78px}}
@media(prefers-reduced-motion:reduce){.skills .skill-cooldown-overlay,.skills .skill-cooldown-overlay::before{transition:none}}


/* Auto mode shows only essential information; manual mode keeps casting controls. */
.skills.auto-skills-enabled .skill-card .cast{display:none}
.skills.auto-skills-enabled .skill-card-bottom:empty{display:none}
.skills.auto-skills-enabled .skill-card{min-height:72px}
.skills.auto-skills-enabled .skill-description{flex:0 1 auto}

/* v0.7.5: skill density responds to the SKILLS PANEL width, not the viewport.
   Four cards across in a ~740px panel, with graceful smaller breakpoints. */
.skills{container-type:inline-size}
.skills .skill-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}
.skills .skill-card{min-height:88px;padding:7px;gap:4px;border-radius:8px}
.skills .skill-card-top{grid-template-columns:32px minmax(0,1fr);gap:6px;padding-right:0}
.skills .skill-icon{width:32px;height:32px;min-width:32px;min-height:32px}
.skills .skill-card-title strong{font-size:10.5px;line-height:1.15}
.skills .skill-card-title small{font-size:9px}
.skills .skill-description{font-size:9.5px;line-height:1.25;overflow-wrap:anywhere}
.skills .skill-status{position:absolute;right:0;top:0;max-width:65px;font-size:9px}
.skills .skill-card-top{padding-right:36px}
.skills .skill-overlay-time{right:5px;top:5px;font-size:9px;padding:3px 4px}
.skills .skill-cooldown-label{font-size:9px}
.skills .skill-card-bottom{gap:4px;flex-wrap:wrap}
.skills .skill-card .cast{min-width:0;padding:4px 6px;font-size:9px}
.skills.auto-skills-enabled .skill-card{min-height:82px}
/* The status is positioned relative to each card, never over adjacent cards. */
@container (min-width:460px){.skills .skill-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:670px){.skills .skill-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:1050px){.skills .skill-list{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container (max-width:340px){.skills .skill-list{grid-template-columns:1fr}}

/* v0.7.6 — larger skill artwork, same dense responsive grid. */
.skills .skill-card-top{grid-template-columns:46px minmax(0,1fr);gap:7px;min-height:46px;align-items:center}
.skills .skill-icon{width:46px;height:46px;min-width:46px;min-height:46px;border-radius:7px}
.skills .skill-icon img{width:100%;height:100%;object-fit:cover}
.skills .skill-card{min-height:102px}
.skills.auto-skills-enabled .skill-card{min-height:100px}
@container (max-width:459px){.skills .skill-card-top{grid-template-columns:42px minmax(0,1fr);min-height:42px}.skills .skill-icon{width:42px;height:42px;min-width:42px;min-height:42px}}

/* v0.7.7 — Artwork-first compact cards. Container queries follow the panel. */
.skills .skill-card{min-height:106px;padding:8px;gap:5px}
.skills .skill-card-top{grid-template-columns:56px minmax(0,1fr);min-height:56px;gap:8px;padding-right:0;align-items:center}
.skills .skill-icon{width:56px;height:56px;min-width:56px;min-height:56px;border-radius:8px;flex:none}
.skills .skill-icon img{display:block;width:100%;height:100%;object-fit:cover}
.skills .skill-card-title{min-width:0;padding-right:0}
.skills .skill-card-title strong{font-size:11px;line-height:1.2}
.skills .skill-card-title small{font-size:9px}
.skills .skill-description{font-size:9.5px;line-height:1.3}
.skills .skill-status{top:5px;right:5px;font-size:9px}
.skills .skill-card::before{opacity:.16}
.skills .skill-cooldown-overlay{background:transparent}
.skills.auto-skills-enabled .skill-card{min-height:100px}
@container (max-width:459px){.skills .skill-card-top{grid-template-columns:50px minmax(0,1fr);min-height:50px}.skills .skill-icon{width:50px;height:50px;min-width:50px;min-height:50px}}

/* v0.8.9 — learning is always accessible, including with Auto Skills enabled.
   Only manual casting is hidden in auto mode. */
.skills.auto-skills-enabled .skill-card .cast.learn-skill{display:inline-flex;align-items:center;justify-content:center}