/* ─────────────────────────────────────────────────────────────────────────────
   boss_ai.css -- the ATTACK PATTERN box on a boss panel (events.html, ultimateclash.html), drawn by
   boss_ai.js from enemy_ai.json. Picked off attackpattern_trial.html (owner, 15 Oct 2026): under SUPER
   ATTACKS (W1), every action a big angled WIDE ROW (A2) -- name, then the slot / HP / heal / limit plates,
   then the chance as a bar. Colours: super attack RED, heal GREEN, normal BLUE, no action WHITE-GREY
   (countdown purple, all-target orange). The box slides shut with its HIDE button.
   ───────────────────────────────────────────────────────────────────────────── */
.enemy-panel .ap-box{display:block !important;padding:18px 14px 12px;}
.ap-box .sk-tab .ap-scr{position:relative;isolation:isolate;display:inline-block;margin-left:10px;padding:1px 8px;
  font:700 .6rem 'Oswald',sans-serif;letter-spacing:1px;color:#0b0d12;vertical-align:1px;}
.ap-box .sk-tab .ap-scr::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;background:var(--type,#FFD84A);}
/* HIDE / SHOW, on the box's top border opposite the caption */
.ap-toggle{position:absolute;top:-12px;right:14px;z-index:2;isolation:isolate;border:none;background:none;cursor:pointer;
  padding:3px 12px;font:700 .64rem 'Oswald',sans-serif;letter-spacing:1.2px;color:#fff;}
.ap-toggle::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;
  background:color-mix(in srgb,var(--type,#FFD84A) 22%,#12151d);border:1px solid color-mix(in srgb,var(--type,#FFD84A) 70%,transparent);
  transition:background .15s;}
.ap-toggle:hover::before{background:color-mix(in srgb,var(--type,#FFD84A) 40%,#12151d);}
.ap-toggle i{display:inline-block;font-style:normal;margin-right:5px;transition:transform .25s;}
.ap-sec.shut .ap-toggle i{transform:rotate(-90deg);}
/* the slide: a one-row grid going from 1fr to 0fr, so the height animates whatever it is */
.ap-slide{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease,opacity .25s ease;}
.ap-slide > div{min-height:0;overflow:hidden;}
.ap-sec.shut .ap-slide{grid-template-rows:0fr;opacity:0;}
.ap-sec.shut .ap-box{padding-bottom:12px;}
/* THE CLOSED BOX (C4 of apclosed_trial.html, owner 15 Oct 2026): a colour bar of how often each action happens and a
   label per action with its % -- shown only while the box is closed; clicking it opens the box */
/* it SLIDES in and out like the list does (owner, 15 Oct 2026: it used to pop in) -- the same 0fr / 1fr grid; the
   inner clip has a margin so the bar's glow and slant are not cut off */
.ap-closed{display:grid;grid-template-rows:0fr;opacity:0;pointer-events:none;cursor:pointer;margin:0 4px;
  transition:grid-template-rows .3s ease,opacity .25s ease,margin .3s ease;}
.ap-closed > .ap-cin{min-height:0;overflow:clip;overflow-clip-margin:16px;}
.ap-sec.shut .ap-closed{grid-template-rows:1fr;opacity:1;pointer-events:auto;margin-top:2px;}
@media (prefers-reduced-motion:reduce){.ap-closed{transition:none;}}
/* the boxes you did NOT press fold in one step (boss_ai.js), so the page does not animate every box at once */
.ap-sec.ap-now .ap-slide,.ap-sec.ap-now .ap-closed,.ap-sec.ap-now .ap-toggle i{transition:none !important;}
/* the labels sit INSIDE the segments (owner, 15 Oct 2026), so the bar is tall enough for a line of text; the bar
   is skewed, the words are straightened back */
/* K2 -- NEON (apbar_trial.html, owner 15 Oct 2026): each segment a dark plate tinted in its colour, a bright edge
   in that colour and a glow inside it, the words glowing; small gaps between them on a near-black track */
.ap-cbar{display:flex;gap:3px;height:30px;border-radius:4px;overflow:hidden;transform:skewX(-12deg);background:#0b0d12;
  border:1px solid rgba(255,255,255,.08);}
.ap-cbar span{display:flex;align-items:center;justify-content:center;min-width:0;height:100%;overflow:hidden;border-radius:3px;
  background:linear-gradient(180deg,rgba(var(--k),.42),rgba(var(--k),.16)),#0d1017;border:1px solid rgb(var(--k));
  box-shadow:inset 0 0 10px rgba(var(--k),.45),0 0 8px rgba(var(--k),.45);}
.ap-cbar .norm{--k:74,163,255;} .ap-cbar .sa{--k:255,75,75;} .ap-cbar .heal{--k:54,209,124;}
.ap-cbar .none{--k:150,156,170;} .ap-cbar .cd{--k:185,140,255;} .ap-cbar .aoe{--k:255,154,61;}
.ap-cbar span i{transform:skewX(12deg);font:700 .78rem 'Oswald',sans-serif;font-style:normal;letter-spacing:.5px;color:#fff;
  white-space:nowrap;text-shadow:0 0 6px rgba(var(--k),.95),0 1px 2px #000;padding:0 8px;overflow:hidden;text-overflow:ellipsis;}
.ap-cbar span i b{font-weight:700;margin-left:4px;}
.ap-cbar span i em{font-style:normal;}
/* THE PHONE (owner, 15 Oct 2026): narrow segments keep only their % (or nothing), and a legend under the bar names
   every kind with its % -- on a wide screen the bar says it all, so the legend is hidden there */
.ap-pleg{display:none;}
@media (max-width:600px){
  .ap-cbar span.w-s i em{display:none;}
  .ap-cbar span.w-s i b{margin-left:0;}
  .ap-cbar span.w-xs i{display:none;}
  .ap-pleg{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 2px 0;}
  .ap-pleg span{display:inline-flex;align-items:center;gap:5px;font:700 .7rem 'Oswald',sans-serif;letter-spacing:.4px;color:#e9ecf2;white-space:nowrap;}
  .ap-pleg span i{width:9px;height:9px;border-radius:2px;transform:skewX(-12deg);background:rgb(var(--k));box-shadow:0 0 6px rgba(var(--k),.7);}
  .ap-pleg span b{color:#fff;}
  .ap-pleg .norm{--k:74,163,255;} .ap-pleg .sa{--k:255,75,75;} .ap-pleg .heal{--k:54,209,124;}
  .ap-pleg .none{--k:150,156,170;} .ap-pleg .cd{--k:185,140,255;} .ap-pleg .aoe{--k:255,154,61;}
}
.ap-cleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;}
.ap-cl{display:inline-flex;align-items:center;gap:6px;font:700 .76rem 'Oswald',sans-serif;letter-spacing:.4px;color:#e9ecf2;white-space:nowrap;}
.ap-cl::before{content:'';width:10px;height:10px;border-radius:2px;transform:skewX(-12deg);background:rgb(var(--k));}
.ap-cl b{color:rgb(var(--k));font-weight:700;}
.ap-cl.norm{--k:74,163,255;} .ap-cl.sa{--k:255,75,75;} .ap-cl.heal{--k:54,209,124;}
.ap-cl.none{--k:196,201,212;} .ap-cl.cd{--k:185,140,255;} .ap-cl.aoe{--k:255,154,61;}
@media (prefers-reduced-motion:reduce){.ap-slide{transition:none;}}
.ap-top{font:600 .82rem 'Inter',sans-serif;color:#cfd5e2;margin:2px 0 10px;}
.ap-top b{font:700 .78rem 'Oswald',sans-serif;letter-spacing:1px;color:#fff;text-transform:uppercase;}
/* the colours */
.ap-a{--k:74,163,255;}                       /* normal: blue */
.ap-a.sa{--k:255,75,75;}                     /* super attack: red */
.ap-a.heal{--k:54,209,124;}                  /* heal: green */
.ap-a.none{--k:196,201,212;}                 /* no action: white-grey */
.ap-a.cd{--k:185,140,255;} .ap-a.aoe{--k:255,154,61;}
/* WIDE ROWS. The list is ONE grid and every row a subgrid of it, so the name column is as wide as the
   widest name and every row lines up -- names never wrap (owner). */
.ap-list{display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(170px,250px);gap:10px 0;padding:0 8px 2px;}  /* room for the slant inside the slide's clip */
.ap-a{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto;align-items:center;
  column-gap:22px;row-gap:3px;position:relative;isolation:isolate;padding:10px 24px;min-width:0;}
.ap-a::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-8deg);border-radius:6px;
  background:linear-gradient(180deg,rgba(var(--k),.22),rgba(var(--k),.06) 70%),#0d1017;
  border:1.5px solid rgba(var(--k),.75);box-shadow:0 0 12px rgba(var(--k),.22),inset 0 0 14px rgba(var(--k),.12);}
.ap-a.none::before{background:linear-gradient(180deg,rgba(var(--k),.10),rgba(var(--k),.03) 70%),#0d1017;border-color:rgba(var(--k),.45);box-shadow:none;}
.ap-head{grid-column:1;grid-row:1;display:flex;align-items:center;gap:8px;}
.ap-name{grid-column:1;grid-row:2;display:flex;align-items:center;gap:8px;white-space:nowrap;
  font:700 1.05rem 'Oswald',sans-serif;color:#fff;letter-spacing:.3px;line-height:1.2;}
.ap-info{grid-column:2;grid-row:1 / span 2;display:flex;flex-wrap:wrap;gap:6px;}
.ap-chance{grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;gap:10px;}
.ap-no{font:700 .68rem 'Oswald',sans-serif;letter-spacing:1.6px;color:rgb(var(--k));}
/* SUPER ATTACK first, then its name (owner) -- the word white */
.ap-kind{font:700 1.05rem 'Oswald',sans-serif;letter-spacing:.3px;color:#fff;}   /* "Super Attack", as written (owner) */
/* WHITE, and THE SAME SIZE as every name -- SUPER ATTACK, the attack's name, Normal attack, Countdown, No action
   (owner, 15 Oct 2026) */
.ap-ic{width:26px;height:26px;object-fit:contain;flex-shrink:0;}
.ap-x{font:700 .95rem 'Oswald',sans-serif;color:rgb(var(--k));}
/* LOOP takes the colour of its own box (owner) */
.ap-loop{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:5px;font:700 .74rem 'Oswald',sans-serif;
  letter-spacing:1.2px;color:#0b0d12;padding:2px 10px;cursor:help;}   /* bigger (owner: "too small") */
.ap-loop b{font-weight:700;} .ap-loop i{font-style:normal;font-size:1.15em;line-height:1;}
.ap-nmw{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.ap-loop::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;background:rgb(var(--k));}
.ap-i{position:relative;isolation:isolate;padding:3px 9px;font:700 .66rem 'Oswald',sans-serif;letter-spacing:1px;color:#e9ecf2;white-space:nowrap;}
/* a page's own .slot (ultimateclash.html: the 112px character slot) must not size these -- they carry a `slot`
   class too (owner, 15 Oct 2026: the plates came out huge on Ultimate Clash) */
.ap-sec .ap-i{width:auto !important;height:auto !important;flex:0 0 auto !important;}
.ap-sec .ap-i em{font-style:normal;opacity:.75;margin-left:3px;}
.ap-i::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);}
.ap-i.slot::before{border-color:rgba(var(--k),.8);background:rgba(var(--k),.16);}
.ap-i.slot.any::before{border-style:dashed;background:rgba(0,0,0,.35);}
.ap-i.heal{color:#9ff3c4;} .ap-i.heal::before{border-color:rgba(54,209,124,.8);background:rgba(54,209,124,.14);}
.ap-i.hp{color:#ffe08a;} .ap-i.hp::before{border-color:rgba(255,216,74,.6);}
.ap-i em{font-style:normal;opacity:.75;}
/* hover explanations -- tooltip.js stays silent on these pages, so the box draws its own */
.ap-sec [data-tip]{cursor:help;}
.ap-i[data-tip]:hover::after,.ap-loop[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%);z-index:20;width:max-content;max-width:240px;white-space:normal;text-align:center;padding:6px 12px;
  border-radius:4px;font:700 .74rem 'Rajdhani',sans-serif;letter-spacing:.6px;color:#fff;text-transform:none;
  background:linear-gradient(180deg,#232836 0%,#12151d 60%,#0b0d13 100%);border:1px solid rgba(var(--acc-rgb,255,216,74),.6);
  box-shadow:0 8px 22px rgba(0,0,0,.55);}
/* the chance bar */
.ap-bar{flex:1;height:9px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;transform:skewX(-12deg);border:1px solid rgba(255,255,255,.1);}
.ap-bar span{display:block;height:100%;background:linear-gradient(90deg,rgba(var(--k),.75),rgb(var(--k)));box-shadow:0 0 8px rgba(var(--k),.7);}
.ap-pct{font:700 .95rem 'Oswald',sans-serif;color:#fff;min-width:44px;text-align:right;}
/* a phone stacks each row: name, plates, bar */
@media (max-width:700px){
  .ap-list{grid-template-columns:minmax(0,1fr);}
  .ap-a{grid-template-columns:minmax(0,1fr);padding:10px 18px;}
  .ap-head,.ap-name,.ap-info,.ap-chance{grid-column:1;grid-row:auto;}
  /* SUPER ATTACK on its own line above the name, so neither is cut */
  .ap-name{flex-wrap:wrap;row-gap:2px;white-space:normal;}
  .ap-kind{flex-basis:100%;}
  .ap-info{margin:4px 0;}
}

/* ── HOW THE LOOP IS SHOWN (attackpattern_trial.html options; the tag alone is the default) ── */
/* bracket: the looping actions inside a rail with LOOP at the top and the way back at the bottom */
.ap-lgrp{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;row-gap:10px;position:relative;
  padding:22px 0 26px;margin:2px 0;border-left:3px solid var(--type,#FFD84A);border-radius:4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--type,#FFD84A) 10%,transparent),transparent 60%);}
.ap-lgrp > .ap-a{margin-left:10px;}
.ap-lgrp-top,.ap-lgrp-end{position:absolute;left:10px;font:700 .64rem 'Oswald',sans-serif;letter-spacing:1.4px;color:var(--type,#FFD84A);}
.ap-lgrp-top{top:4px;} .ap-lgrp-end{bottom:5px;}
/* turns: a divider before the first action of each turn */
.ap-turn{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin:6px 0 -2px;
  font:700 .7rem 'Oswald',sans-serif;letter-spacing:1.6px;color:#fff;}
.ap-turn::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent);}
.ap-turn em{font-style:normal;color:#9aa3b4;letter-spacing:.8px;}
.ap-end{grid-column:1 / -1;font:700 .7rem 'Oswald',sans-serif;letter-spacing:1.2px;color:var(--type,#FFD84A);margin-top:2px;}
/* strip: the whole chain as numbered angled tiles, with the way back drawn after the last */
.ap-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 8px 14px;}
.ap-st{position:relative;isolation:isolate;min-width:30px;padding:4px 8px;text-align:center;font:700 .74rem 'Oswald',sans-serif;color:#fff;}
.ap-st::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:3px;
  background:rgba(var(--k),.25);border:1px solid rgba(var(--k),.85);}
.ap-st.lp::before{box-shadow:0 0 0 2px var(--type,#FFD84A);}
.ap-st.norm{--k:74,163,255;} .ap-st.sa{--k:255,75,75;} .ap-st.heal{--k:54,209,124;} .ap-st.none{--k:196,201,212;}
.ap-st.cd{--k:185,140,255;} .ap-st.aoe{--k:255,154,61;}
.ap-back{font:700 .7rem 'Oswald',sans-serif;letter-spacing:1px;color:var(--type,#FFD84A);margin-left:4px;}
.ap-tsep{width:2px;height:24px;background:rgba(255,255,255,.35);margin:0 3px;}
/* WHICH SUPER (owner, 16 Oct 2026): a row with no id is PROBABLY the first super; an id that is none of the boss's
   supers shows no name; a super the pattern never uses is tagged in the SUPER ATTACKS list */
.ap-prob{font:700 .62rem 'Oswald',sans-serif;font-style:normal;letter-spacing:1.3px;color:#fff;opacity:.7;cursor:help;
  padding:1px 7px;border:1px dashed rgba(255,255,255,.45);border-radius:3px;transform:skewX(-12deg);}
.sa-unused{font:700 .6rem 'Oswald',sans-serif;letter-spacing:1.2px;color:#b9bfcc;padding:2px 8px;border-radius:3px;cursor:help;
  background:rgba(0,0,0,.35);border:1px dashed rgba(185,191,204,.5);transform:skewX(-12deg);white-space:nowrap;}
/* STEPS (16 Oct 2026): the row that moves a scripted boss to its next step */
.ap-i.nx{color:#fff;} .ap-i.nx::before{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);}
.ap-end.ap-br{color:#fff;margin-top:10px;}   /* the line before an HP branch */
.ap-then{font-style:normal;opacity:.7;margin:0 4px;}   /* weaker -> stronger super, a no-id row of an old boss */
.ap-end em{font-style:normal;color:#9aa3b4;letter-spacing:.6px;}
/* WHAT AN ENEMY SUPER DOES (owner, 16 Oct 2026: F5 of superfx_trial.html, "make the icons bigger and the box that
   holds it angled", then "do this update for all events and boss supers"). One chip per effect -- its icon(s) and its
   % -- on the super's name line at the right, on an angled plate with an edge in the boss's type colour (gold on
   Frontier, whose panels have none). On a phone they drop under the description. .sa-fxw / .sa-st stay hidden. */
.sa-fxw,.sa-st{display:none;}
/* the chips share the name's line WHEN THERE IS ROOM, and wrap to a line of their own just under the name when there
   is not (a corner overlapped 16 of 506 names at 900px; two columns squeezed the name to nothing in a narrow box) */
.super:has(> .sa-fx){display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:14px;}
.super:has(> .sa-fx) > *{order:2;flex:0 0 100%;}
.super:has(> .sa-fx) > .super-name{order:0;flex:0 1 auto;}
.super:has(> .sa-fx) > .sa-fx{order:1;flex:0 0 auto;margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px;}
.sa-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 9px;cursor:help;}
.sa-chip::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:4px;background:rgba(0,0,0,.45);
  border:1px solid color-mix(in srgb,var(--type,var(--gold,#FFD84A)) 70%,transparent);
  box-shadow:0 0 8px color-mix(in srgb,var(--type,var(--gold,#FFD84A)) 30%,transparent);}
.sa-chip img{width:26px;height:26px;object-fit:contain;}
.sa-chip b{font:700 .86rem 'Oswald',sans-serif;color:#fff;letter-spacing:.3px;}
@media (max-width:700px){ .super:has(> .sa-fx) > .sa-fx{order:3;flex:0 0 100%;margin-left:0;justify-content:flex-start;margin-top:8px;} .sa-chip img{width:24px;height:24px;} }
/* the folded bar's wrapper grew to its content's width and ran past a phone's edge (Ultimate Red Zone 17370333):
   it may shrink to the box, and the bar keeps clear of the box's edge for its slant */
.ap-cin{min-width:0;}
.ap-closed .ap-cbar{margin:0 3px;}
.ap-pleg{flex-wrap:wrap;min-width:0;}