/* autoskill-panel.css — shared "Auto Skill" priority-queue display.
 * Recreates the in-game Auto Skill settings screen: a circular hero
 * portrait (real decorative outer/inner ring art) with a stacked column
 * of that hero's SQUARE skill icons layered on top of it to the right
 * (S1 bottom, Ultimate/S2 above it, an Awakened Skill — when the hero has
 * one — in a 3rd slot above that), each icon with its own "Priority N"
 * badge sitting centered directly below its base. Skills not in the
 * queue render with the plain unselected frame, no badge, no glow.
 *
 * Direct 2026-08-25 layout revision, explicit user directions:
 *  - badges are static, centered UNDER each icon's base — not a floating
 *    overlap to the icon's left (an earlier round's approach)
 *  - "move the hero icon below the skill icons" meant Z-LAYERING, not
 *    spatial position — the skill column sits ON TOP of (in front of)
 *    the hero circle, overlapping into it, not moved underneath it in
 *    the page flow. Hero circle stays to the LEFT of the skill column.
 *  - that overlap should cover ~15% of the hero circle's own AREA — a
 *    circular-segment calculation (not a guess): a chord at 20.74% of
 *    the circle's diameter, measured in from its edge, cuts off a
 *    segment equal to 15% of the circle's total area. See margin-left
 *    below.
 *  - inner frame stays tight around the hero circle; outer frame is only
 *    SLIGHTLY bigger than it (an earlier round pushed this much bigger,
 *    which was the wrong direction).
 *  - skill icons are square (the source skill_selected/unselected.webp
 *    frame's own native aspect, 62×62px) — an earlier round's "stretch it
 *    portrait" theory was wrong, reverted.
 *
 * Palette matches boss-guide.js's own `C` object (bg/surface/card/gold/
 * text/textMid) so this drops into any boss-guide-engine page (raid.html,
 * advent-expedition.html, sudden-raid.html, ...) without a clashing look
 * — see autoskill-panel.js's own header for the full load-order note.
 *
 * See AUTOSKILL_PANEL_NOTES.md for the full design writeup/history.
 */

/* No panel/card chrome anywhere in this file, deliberately — the element
 * is just the 5 clusters floating directly on whatever the host page's
 * own background is, exactly like the in-game screen. */
/* align-items:CENTER at BOTH levels (row and cluster) is deliberate --
 * an earlier round tried flex-end at both levels to fix a real cross-row
 * alignment bug (see below) and overcorrected: bottom-anchoring made a
 * shorter 2-skill column's own vertical CENTER sit noticeably below its
 * hero circle's center (empty space landed above the icons instead of
 * being distributed evenly), a second real bug caught by direct user
 * review. Centering solves both at once:
 *  - WITHIN a cluster, align-items:center on a flex ROW makes every
 *    item's cross-axis center land on the same line -- so hero-wrap's
 *    own center always equals skill-col's own center, regardless of
 *    which one is taller (2-skill vs 3-skill/Awakened column), keeping
 *    the skill stack genuinely centered on its own hero circle.
 *  - ACROSS the row, since that shared center line IS effectively each
 *    cluster's own flex-item center, align-items:center on .ap-row
 *    aligns every cluster's center to the SAME line -- and since
 *    hero-wrap's center always sits exactly on its own cluster's center
 *    (per the point above), every hero-wrap -- and thus every portrait
 *    circle -- lands on that same line too, regardless of skill count. */
.ap-row{
  /* --ap-hero-shift lives HERE (not on .ap-cluster) specifically so it's
     available to this rule's own transform below -- custom properties only
     inherit DOWNWARD to descendants, and .ap-hero-wrap (which consumes the
     same var) is a descendant of THIS element, not of .ap-cluster's own
     scope in a way that would help .ap-row read it back. */
  --ap-hero-shift: 15px;
  display:flex;
  align-items:center;
  justify-content:center;  /* centers the cluster row within its host section's width, 2026-08-27 direct request -- matters when a short (2-3 hero) team's natural width is narrower than the available space */
  gap:12px;   /* was 26px — narrower spacing between heroes */
  /* transform:translateX(calc(var(--ap-hero-shift) / -2)), 2026-09-14 real
     bug fix (direct report: "the entire panel always feels off centre") --
     justify-content:center above correctly centers this row's own LAYOUT
     box, but .ap-hero-wrap's own translateX(var(--ap-hero-shift)) below
     only moves PAINTED pixels, not that box -- so the hero circle (the
     row's own leftmost visible content) renders `--ap-hero-shift` short of
     its box's left edge, while the row's right edge (the last cluster's
     .ap-skill-col, never shifted) sits flush with ITS box edge. A
     symmetrically-centered box around an asymmetrically-inset visual
     content reads as genuinely off-center -- measured directly via
     getBoundingClientRect(): a real, constant 7.5px (half of 15px)
     rightward offset of the row's true visual center vs. its container's
     true center, reproduced identically at both a wide 5-hero desktop row
     and a narrow mobile 2-3 hero row (worse there as a % of the smaller
     visual width, since this offset is a flat px value that doesn't scale
     down with team size or viewport). Shifting the whole row left by half
     the hero-wrap's own shift recenters the VISUAL content without
     touching the intentional hero/skill-column overlap at all -- kept as
     a calc() off the same --ap-hero-shift var so the two can't drift out
     of sync if that value is ever retuned again. */
  transform:translateX(calc(var(--ap-hero-shift) / -2));
  /* nowrap (was wrap), 2026-08-27 direct request: "stay 5 in a row as much
     as possible" instead of dropping to a 2nd row once the container gets
     narrow. The host page (boss-guide.js's fitAutoSkillSections()) measures
     this row's own real natural (unwrapped) width and applies a CSS
     transform:scale() to shrink it to fit when needed -- nowrap is required
     for that measurement to reflect the TRUE natural width; with wrap still
     on, a narrow container would already resolve its own overflow via
     wrapping, making scrollWidth never exceed clientWidth and the fit
     logic never trigger. */
  flex-wrap:nowrap;
  background:transparent;
}

.ap-cluster{
  --ap-hero: 116px;
  --ap-outer: 140px;    /* ~1.2x the hero circle — "just slightly" bigger, not a dramatic sweep */
  --ap-skill: 54px;     /* skill icons are square */
  position:relative;
  display:flex;
  align-items:center;
  gap:0px;
  /* flex-shrink:0, 2026-08-27 real bug fix: `.ap-row`'s own flex-wrap:nowrap
     (see above) left the browser's DEFAULT flex-shrink:1 free to squeeze
     each cluster's own allocated box below its true rendered size at a
     narrow container width -- but the cluster's own CHILDREN (fixed-px
     hero circle/skill icons) don't actually shrink to match, so the
     LAST cluster's content visually overflowed its own now-too-small box
     and got hard-clipped by `.ae-autoskill-fit`'s overflow:hidden (direct
     report: "cuts off the end of the last hero's skills"). It also
     corrupted `fitAutoSkillSections()`'s own `scrollWidth` measurement --
     a partially flex-shrunk row doesn't report its TRUE intrinsic width,
     so the computed scale ratio came out wrong/insufficient too.
     flex-shrink:0 locks every cluster to its real natural size so (a) the
     row's scrollWidth is an honest measurement and (b) the host page's own
     transform:scale() fit is the ONLY shrink mechanism -- clean uniform
     scaling instead of flexbox's own elastic per-item squish. */
  flex-shrink:0;
  /* padding-bottom:14px, 2026-08-27 -- reserves REAL layout space for
     .ap-priority-badge's own overshoot (it straddles its icon's bottom
     edge via transform:translate(-50%,50%) below -- measured 10px real
     overshoot off a 20px badge height, +4px safety margin for cross-
     environment font-metric variance). This replaced 2 earlier JS-based
     attempts (boss-guide.js's fitAutoSkillSections(), now reverted) that
     tried to precisely MEASURE the badge's real rendered position via
     getBoundingClientRect() at fit-time and set an exact host-page
     container height to match -- both attempts worked in this session's
     own headless-Chrome verification but kept failing on a REAL user
     resize (once clipping badges, once still clipping after a "fix"),
     suggesting a real, never-fully-diagnosed measurement discrepancy
     between environments. A FIXED, ordinary CSS padding reserved on the
     natural/unzoomed cluster instead needs no runtime measurement at
     all -- it's real normal-flow box space, so it's already included in
     `.ap-row`'s own natural height (what `naturalW`'s sibling height
     value would be) and scales correctly with the host page's own
     `zoom` fit automatically, same as everything else in the row. Applied
     uniformly to every cluster (not just ones with a badge on their
     bottom-most S1 icon) so cross-cluster centering math in `.ap-row`
     stays exactly as before (every cluster's own added space is
     identical, not conditional). */
  padding-bottom:14px;
}

/* ─── Hero circle ─────────────────────────────────────────── */

.ap-hero-wrap{
  position:relative;
  width:var(--ap-outer);
  height:var(--ap-outer);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateX(var(--ap-hero-shift));  /* outer ring + inner ring + hero circle shift right together, further under the skill icons, as one linked layer -- 5px then +10px more, both direct requests. Was a literal 15px; switched to var(--ap-hero-shift) 2026-09-14 so .ap-row's own compensating centering transform (see above) can never drift out of sync with this value. */
}

.ap-outer-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  transform:rotate(45deg);
}

.ap-hero-circle{
  position:relative;
  width:var(--ap-hero);
  height:var(--ap-hero);
  border-radius:50%;
  overflow:hidden;           /* nothing spills past the circle */
  background:transparent;    /* was a hardcoded #0a1420 fill -- the PanelCrop portrait art is a real transparent-background
                                 cutout (confirmed: Gelidus's own file is ~22% fully-transparent pixels, not a filled
                                 rectangle), so that fill showed through as a mismatched dark patch on any host background
                                 that wasn't already that same dark navy, breaking the "works on any background" design. */
  box-shadow:0 3px 10px rgba(0,0,0,.55);
}

.ap-hero-portrait{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 14%;
}

.ap-hero-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#3a4d66;
  font-size:26px;
}

/* innerframe.webp's own ring line sits INSET within its canvas (measured
 * via a radial pixel-distance histogram: the main ring cluster sits at
 * ~85.6% of the canvas half-width, not flush to the edge — a few thin
 * decorative tails/node-dots extend further out but aren't the ring
 * itself). Rendered at 100% of the hero circle, the ring would land
 * visibly SMALLER than the circle's true boundary. Scaled up by 1/0.8559
 * ≈ 1.168x and centered instead, so the ring itself — not the image's
 * own canvas edge — lands exactly on the hero circle's boundary. Sits as
 * a SIBLING of .ap-hero-circle (inside .ap-hero-wrap), not a child of
 * it — .ap-hero-circle's own overflow:hidden exists only to clip the
 * portrait to a circle, and would otherwise cut off this frame's own
 * decorative tails now that it's scaled past the circle's own box.
 * Rendered BEHIND the portrait (DOM order: outer frame, inner frame,
 * THEN hero-circle) per direct instruction — only the ring's outer
 * half and its tails show past the opaque portrait's edge. */
.ap-inner-frame{
  position:absolute;
  top:50%;
  left:50%;
  width:calc(var(--ap-hero) * 1.168);
  height:calc(var(--ap-hero) * 1.168);
  transform:translate(-50%,-50%) rotate(-45deg);
  pointer-events:none;
  user-select:none;
}

/* ─── Skill column — layered ON TOP of the hero circle ──────── */

.ap-skill-col{
  display:flex;
  flex-direction:column-reverse; /* first child (S1) sinks to the bottom */
  align-items:center;
  gap:2px;              /* was 8 — icons stack closer together now that the badge is an overlapping layer, not its own flow space */
  flex:none;
  /* Overlaps into the hero circle by 20.74% of its diameter -- the
     circular-segment depth that covers exactly 15% of the circle's own
     area (see file header). Kept as a calc() off the same --ap-hero
     variable so resizing the circle (e.g. the mobile breakpoint) keeps
     the same real 15% coverage automatically. */
  margin-left:calc(var(--ap-hero) * -0.2074);
  z-index:1;
}

.ap-skill-item{
  position:relative;   /* badge is now an absolute layer over this icon's base, not stacked below it in normal flow */
}

/* skill_selected.webp/skill_unselected.webp were dropped — both bake a
 * large corner radius directly into the raster art (opaque content
 * doesn't even start until 6px down, and still hasn't reached full
 * width by row 14 of a 62px-tall image — not adjustable via CSS on an
 * <img>), and the unselected variant is barely visible at all (max
 * alpha ~62/255, ~24%). Direct instruction: abolish them, draw the
 * frame in CSS instead — a real, squarer corner radius (4px, not the
 * asset's own much larger curve), full control over both states. */
.ap-skill-slot{
  position:relative;
  width:var(--ap-skill);
  height:var(--ap-skill);
  flex:none;
  box-sizing:border-box;
  border-radius:4px;
}
.ap-skill-slot.ap-selected{
  /* darker gold base (was #ffd98a, the SAME color the glow ring's own
     peak used) -- 2026-08-27 direct feedback ("where is the cyclical
     glow"): a resting border identical in color to the traveling
     highlight makes the animation nearly imperceptible even though it's
     genuinely running. See .ap-glow-ring::before below for the matching
     contrast fix. */
  border:2px solid #a9761f;
  box-shadow:0 0 0 1px #8a5c14 inset, 0 2px 6px rgba(0,0,0,.4);
}
.ap-skill-slot.ap-unselected{
  border:1.5px solid rgba(180,195,215,.4);
}

/* Interactive mode only (guildwar.html's Team Builder — a player picks
 * their OWN priority queue by clicking a skill, rather than displaying a
 * sheet-authored one). `.ap-capped` marks an UNSELECTED slot once the
 * queue already holds 3 entries — a plain visual "can't add a 4th" hint,
 * matched by the host page's own click handler actually rejecting the
 * click (see guildwar.html's gwbAutoSkillClick()). */
.ap-skill-slot.ap-clickable{ cursor:pointer; }
.ap-skill-slot.ap-clickable:hover{ filter:brightness(1.25); }
.ap-skill-slot.ap-clickable.ap-capped{ cursor:not-allowed; opacity:.45; }
.ap-skill-slot.ap-clickable.ap-capped:hover{ filter:none; }

.ap-skill-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
  background:#0a1420;
}

/* rotating "light chasing the border" ring — selected skills only.
 * Standard animated-gradient-border trick: a padded box masked down to
 * just its own ring (mask-composite:exclude — a GRADIENT mask, not an
 * image url, so it isn't hit by the file:// mask-image gotcha), with an
 * oversized conic-gradient layer underneath rotated by transform (not
 * an animated custom-property angle) for maximum browser support. */
.ap-glow-ring{
  position:absolute;
  inset:-1px;          /* was -4px — glow now sits right on the icon's own border, not floating past it */
  border-radius:9px;
  padding:2px;          /* was 3px — thinner band, hugging the border */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  /* Real bug found 2026-08-27 (direct report: "where is the cyclical
     glow?"): `.ap-glow-ring` and `.ap-skill-art` are both plain
     `position:absolute` siblings inside `.ap-skill-slot` with no z-index --
     `.ap-skill-art` comes LATER in DOM (see renderSkillSlot() in
     autoskill-panel.js) so it painted ON TOP, and its rendered box turned
     out to be the same size as (not smaller than) this ring's own masked
     band, so the opaque skill-art image fully occluded the ring at every
     rotation angle -- confirmed via a diagnostic pass (forced the ring
     fully opaque solid red with the mask disabled entirely: still zero
     pixels visible). The glow was genuinely animating the whole time
     (confirmed via computed style), just never actually painted. z-index
     forces it above the art layer without touching DOM order/masking. */
  z-index:2;
}
.ap-glow-ring::before{
  content:"";
  position:absolute;
  inset:-65%;
  /* Widened arc (72deg->110deg) + pure-white peak (was #fff6da, barely
     lighter than the #ffd98a either side of it) -- 2026-08-27 direct
     feedback that the glow wasn't visible. Paired with .ap-selected's own
     darker resting border above so the traveling light now reads as a
     genuinely brighter band sweeping over a visibly darker base, not a
     same-color-on-same-color animation that was technically running but
     never perceptible. */
  background:conic-gradient(
    from 0deg,
    transparent 0deg 235deg,
    #ffd98a 265deg,
    #ffffff 300deg,
    #ffd98a 345deg,
    transparent 360deg
  );
  animation:ap-glow-spin 2.2s linear infinite;
}
@keyframes ap-glow-spin{ to{ transform:rotate(360deg); } }

/* ─── Priority badge — a layer sitting ABOVE (in front of, overlapping)
 * its own skill icon at its base, centered, not stacked below it in
 * normal document flow. */

/* Sized off --ap-skill via calc() (2026-09-08, was flat 3px/10px/10.5px
   regardless of viewport) -- direct report: "Autoskill priority 'Priority'
   badges [are] not scaling with the actual resize. remain fixed, causing
   it to block skill icons." --ap-skill itself already shrinks per the
   @media rule below (54px desktop -> 42px at <=900px, and again at the
   real mobile breakpoint added below) -- but this badge straddles the
   icon's bottom edge at a CONSTANT absolute size, so the smaller the icon
   got, the more of it the same-size badge covered. Ratios (0.19/0.056/
   0.185) are picked to reproduce the original 54px-icon look (10.5px
   font, ~3px/10px padding) exactly at the desktop default, so nothing
   changes there -- only the ratio (not the icon-relative LOOK) is new. */
.ap-priority-badge{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%);  /* straddles the icon's own bottom edge, centered */
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#243c58,#101d2c);
  border:1px solid #4c6d8f;
  border-radius:999px;   /* true pill, per direct reference match */
  /* max() floor (added right away, verified needed via direct measurement
     -- the real mobile --ap-skill value alone shrunk this to a genuinely
     unreadable 5.8px) so the badge stops shrinking with the icon once it
     hits a legible minimum, rather than tracking the ratio all the way
     down to illegible. A badge slightly overlapping more of a tiny icon
     reads better than a badge nobody can read at all.
     Ratios shrunk further same day -- direct follow-up: "Priority bades
     still are too large on my screen" (with a screenshot showing them
     covering a real chunk of the portrait beneath, at a size that
     reproduced the ORIGINAL pre-existing look exactly, so this wasn't a
     scaling-math bug like the first report -- the badge itself was
     simply too big at any size). 0.194/0.185/0.056 -> 0.145/0.13/0.042. */
  padding:max(2px, calc(var(--ap-skill) * 0.042)) max(6px, calc(var(--ap-skill) * 0.13));
  font-family:'SKR Global','Lato', sans-serif;
  font-weight:800;
  font-size:max(9px, calc(var(--ap-skill) * 0.145));
  letter-spacing:.2px;
  color:#f2f6fb;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}

@media (max-width:900px){
  .ap-row{ gap:18px; }
  .ap-cluster{ --ap-hero:90px; --ap-outer:108px; --ap-skill:42px; }
}
/* Genuine phone breakpoint, added 2026-09-08 -- the only tier that
   existed before this stopped at 900px (tablet-ish), never actually
   reaching real mobile widths. */
@media (max-width:760px){
  .ap-cluster{ --ap-hero:64px; --ap-outer:76px; --ap-skill:30px; }
}