/* #SECTION: DROP F.2.1b — Share button loading spinner */
@keyframes share-spin{to{transform:rotate(360deg)}}
/* body.share-loading added by shareImage() — targets all three share button types */
body.share-loading .ed-share-share-btn,
body.share-loading [onclick="bdPillShare()"],
body.share-loading [onclick="tdPillShare()"]{
  opacity:.6!important;pointer-events:none!important;
}
body.share-loading .ed-share-share-btn::after,
body.share-loading [onclick="bdPillShare()"]::after,
body.share-loading [onclick="tdPillShare()"]::after{
  content:'';display:inline-block;width:11px;height:11px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
  border-radius:50%;animation:share-spin .6s linear infinite;
  margin-left:6px;vertical-align:middle;
}

/* #SECTION: DROP F.2.1 — Editor Share button + image card template */
/* ══════════════════════════════════════════════════════════════════
   Share button (red-tinted) in the editor share card, next to Copy.
   Image card styles scoped under #imgRenderHost so they only apply to
   the off-screen render container used by html2canvas.
   ══════════════════════════════════════════════════════════════════ */

/* Share button in editor (builds + teams share cards) */
.ed-share-share-btn{
  flex-shrink:0;
  background:var(--red);
  border:1px solid var(--red);
  border-radius:10px;
  padding:0 .85rem;
  color:#fff;
  font-size:.78rem;font-weight:700;
  font-family:inherit;cursor:pointer;
  display:flex;align-items:center;gap:.35rem;
  min-height:36px;
  transition:all .15s;
  white-space:nowrap;
}
.ed-share-share-btn:hover{background:#dc2626;border-color:#dc2626}
.ed-share-share-btn:active{transform:scale(.96)}

/* #imgRenderHost is the off-screen container; hidden from viewport entirely. */
#imgRenderHost{
  position:fixed;
  top:-99999px;left:-99999px;
  width:1200px;height:630px;
  pointer-events:none;
  z-index:-1;
}

/* Base image card — 1200×630 canvas */
#imgRenderHost .imgcard{
  position:relative;
  width:1200px;height:630px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px;
  color:#fff;
  overflow:hidden;
  box-sizing:border-box;
}

#imgRenderHost .imgcard *{box-sizing:border-box}

/* Brand + author + URL + slot — shared positioning */
#imgRenderHost .imgcard-brand{
  position:absolute;top:28px;left:56px;
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:800;color:rgba(255,255,255,.92);
  z-index:2;
}
#imgRenderHost .imgcard-brand-mk{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,#ef4444,#f59e0b);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:900;
}
#imgRenderHost .imgcard-author{
  position:absolute;top:30px;right:56px;
  display:flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.85);font-size:14px;font-weight:600;
  z-index:2;
}
#imgRenderHost .imgcard-author-ava{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:900;
}
#imgRenderHost .imgcard-url{
  position:absolute;bottom:28px;right:56px;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:12px;color:rgba(255,255,255,.5);
  z-index:2;
}
#imgRenderHost .imgcard-slotnum{
  position:absolute;bottom:-4px;left:42px;
  font-size:120px;font-weight:900;
  color:rgba(255,255,255,.05);
  line-height:.8;letter-spacing:-.05em;
  pointer-events:none;z-index:0;
}

/* Type gradients (scoped) */
#imgRenderHost .imgcard-t-Normal{background:linear-gradient(135deg,#A8A77A,#6D6D4E) !important;color:#fff}
#imgRenderHost .imgcard-t-Fire{background:linear-gradient(135deg,#EE8130,#9C531F) !important;color:#fff}
#imgRenderHost .imgcard-t-Water{background:linear-gradient(135deg,#6390F0,#445E9C) !important;color:#fff}
#imgRenderHost .imgcard-t-Electric{background:linear-gradient(135deg,#F7D02C,#A1871F) !important;color:#fff}
#imgRenderHost .imgcard-t-Grass{background:linear-gradient(135deg,#7AC74C,#4E8234) !important;color:#fff}
#imgRenderHost .imgcard-t-Ice{background:linear-gradient(135deg,#96D9D6,#638D8D) !important;color:#fff}
#imgRenderHost .imgcard-t-Fighting{background:linear-gradient(135deg,#C22E28,#7D1F1A) !important;color:#fff}
#imgRenderHost .imgcard-t-Poison{background:linear-gradient(135deg,#A33EA1,#6B2A6B) !important;color:#fff}
#imgRenderHost .imgcard-t-Ground{background:linear-gradient(135deg,#E2BF65,#927D44) !important;color:#fff}
#imgRenderHost .imgcard-t-Flying{background:linear-gradient(135deg,#A98FF3,#6D5E9C) !important;color:#fff}
#imgRenderHost .imgcard-t-Psychic{background:linear-gradient(135deg,#F95587,#A13959) !important;color:#fff}
#imgRenderHost .imgcard-t-Bug{background:linear-gradient(135deg,#A6B91A,#6D7815) !important;color:#fff}
#imgRenderHost .imgcard-t-Rock{background:linear-gradient(135deg,#B6A136,#786824) !important;color:#fff}
#imgRenderHost .imgcard-t-Ghost{background:linear-gradient(135deg,#735797,#4C3A65) !important;color:#fff}
#imgRenderHost .imgcard-t-Dragon{background:linear-gradient(135deg,#6F35FC,#4924A1) !important;color:#fff}
#imgRenderHost .imgcard-t-Dark{background:linear-gradient(135deg,#705746,#49392F) !important;color:#fff}
#imgRenderHost .imgcard-t-Steel{background:linear-gradient(135deg,#B7B7CE,#787887) !important;color:#fff}
#imgRenderHost .imgcard-t-Fairy{background:linear-gradient(135deg,#D685AD,#9B6470) !important;color:#fff}

/* Shiny badge */
#imgRenderHost .imgcard-shiny-badge{
  position:absolute;top:8px;right:-6px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.07em;
  padding:4px 10px;border-radius:999px;
  box-shadow:0 3px 12px rgba(245,158,11,.55),0 0 0 2px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:3px;text-transform:uppercase;z-index:3;
}

/* ─── BUILD CARD (.imgcard-bc) ─── */
#imgRenderHost .imgcard-bc{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 32px, transparent 32px 64px),
    repeating-linear-gradient(-135deg, rgba(255,255,255,.02) 0 32px, transparent 32px 64px),
    radial-gradient(ellipse at 20% 15%, rgba(139,92,246,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(99,52,180,.35) 0%, transparent 60%),
    linear-gradient(135deg, #2a1948 0%, #1a0f2e 100%);
  padding:44px 56px;display:flex;align-items:stretch;
}
#imgRenderHost .imgcard-bc::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.4) 100%);
  pointer-events:none;z-index:0;
}
#imgRenderHost .imgcard-bc-card{
  flex:1;display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:stretch;
  background:linear-gradient(155deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;padding:40px 44px;margin-top:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;z-index:1;
}
#imgRenderHost .imgcard-bc-card::before{
  content:'';position:absolute;top:-120px;left:-80px;right:-80px;height:360px;
  background:radial-gradient(ellipse,rgba(169,143,243,.45) 0%,transparent 65%);
  filter:blur(35px);pointer-events:none;
}
#imgRenderHost .imgcard-bc-left{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  justify-content:center;gap:12px;position:relative;z-index:2;
}
#imgRenderHost .imgcard-sprite-wrap{
  position:relative;width:290px;height:290px;
  display:flex;align-items:center;justify-content:center;
}
#imgRenderHost .imgcard-sprite-glow{
  position:absolute;inset:-32px;
  background:radial-gradient(circle,rgba(139,92,246,.6) 0%,rgba(99,52,180,.3) 45%,transparent 70%);
  filter:blur(30px);z-index:0;
}
#imgRenderHost .imgcard-sprite-wrap img{
  position:relative;z-index:1;
  width:290px;height:290px;object-fit:contain;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
#imgRenderHost .imgcard-types{display:flex;gap:6px}
#imgRenderHost .imgcard-type-chip{
  font-size:12px;font-weight:900;letter-spacing:.08em;
  padding:4px 11px;border-radius:999px;
  text-transform:uppercase;color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#imgRenderHost .imgcard-species{font-size:22px;font-weight:900;color:#fff;letter-spacing:-0.015em}
#imgRenderHost .imgcard-item-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
}
#imgRenderHost .imgcard-item-sprite{width:22px;height:22px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
#imgRenderHost .imgcard-item-lbl{font-size:9px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase;margin-right:3px}
#imgRenderHost .imgcard-item-text{font-size:12px;font-weight:700;color:#fff;line-height:1}

#imgRenderHost .imgcard-bc-right{display:flex;flex-direction:column;min-width:0;position:relative;z-index:2}
#imgRenderHost .imgcard-bc-kicker{font-size:11px;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.12em;text-transform:uppercase}
#imgRenderHost .imgcard-bc-title{font-size:36px;font-weight:900;color:#fff;letter-spacing:-0.025em;line-height:1.05;margin-top:2px}
#imgRenderHost .imgcard-bc-meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#imgRenderHost .imgcard-meta-chip{
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);
}
#imgRenderHost .imgcard-bc-moves-sh{font-size:10px;font-weight:800;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;margin-top:28px;margin-bottom:10px}
#imgRenderHost .imgcard-bc-moves{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#imgRenderHost .imgcard-move{
  position:relative;overflow:hidden;padding:14px;border-radius:12px;color:#fff;
  min-height:72px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
#imgRenderHost .imgcard-move::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
#imgRenderHost .imgcard-move > *{position:relative;z-index:1}
#imgRenderHost .imgcard-move-name{font-size:16px;font-weight:800;letter-spacing:-0.01em;line-height:1.1}
#imgRenderHost .imgcard-move-meta{display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;font-weight:700;opacity:.95;margin-top:6px}
#imgRenderHost .imgcard-move-cat{padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.35);letter-spacing:.05em;text-transform:uppercase;font-size:9px}

#imgRenderHost .imgcard-bc-stats-sh{font-size:10px;font-weight:800;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;margin-top:26px;margin-bottom:10px}
#imgRenderHost .imgcard-bc-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
#imgRenderHost .imgcard-stat{
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:8px 4px;text-align:center;position:relative;overflow:hidden;
}
#imgRenderHost .imgcard-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
#imgRenderHost .imgcard-stat-lbl{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-top:1px}
#imgRenderHost .imgcard-stat-val{font-size:16px;font-weight:900;color:#fff;margin-top:2px;line-height:1;font-variant-numeric:tabular-nums}
#imgRenderHost .imgcard-stat-sp{font-size:9px;font-weight:800;color:#86efac;margin-top:2px}
#imgRenderHost .imgcard-stat-sp.zero{color:rgba(255,255,255,.2)}
#imgRenderHost .imgcard-s-hp::before{background:#c4b5fd} #imgRenderHost .imgcard-s-hp .imgcard-stat-lbl{color:#c4b5fd}
#imgRenderHost .imgcard-s-atk::before{background:#fb923c} #imgRenderHost .imgcard-s-atk .imgcard-stat-lbl{color:#fb923c}
#imgRenderHost .imgcard-s-def::before{background:#60a5fa} #imgRenderHost .imgcard-s-def .imgcard-stat-lbl{color:#60a5fa}
#imgRenderHost .imgcard-s-spa::before{background:#fdba74} #imgRenderHost .imgcard-s-spa .imgcard-stat-lbl{color:#fdba74}
#imgRenderHost .imgcard-s-spd::before{background:#7dd3fc} #imgRenderHost .imgcard-s-spd .imgcard-stat-lbl{color:#7dd3fc}
#imgRenderHost .imgcard-s-spe::before{background:#fb7185} #imgRenderHost .imgcard-s-spe .imgcard-stat-lbl{color:#fb7185}

/* ─── TEAM CARD (.imgcard-tc) ─── */
#imgRenderHost .imgcard-tc{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 32px, transparent 32px 64px),
    repeating-linear-gradient(-135deg, rgba(255,255,255,.02) 0 32px, transparent 32px 64px),
    radial-gradient(ellipse at 20% 20%, rgba(139,92,246,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(99,52,180,.35) 0%, transparent 60%),
    linear-gradient(135deg, #2a1948 0%, #1a0f2e 100%);
}
#imgRenderHost .imgcard-tc::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.35) 100%);
  pointer-events:none;z-index:0;
}
#imgRenderHost .imgcard-tc .imgcard-brand{top:18px;left:36px;font-size:13px}
#imgRenderHost .imgcard-tc .imgcard-brand-mk{width:22px;height:22px;border-radius:6px;font-size:11px}
#imgRenderHost .imgcard-tc-team-head{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  text-align:center;color:#fff;z-index:2;
}
#imgRenderHost .imgcard-tc-team-name{font-size:24px;font-weight:900;letter-spacing:-0.02em;line-height:1}
#imgRenderHost .imgcard-tc-team-meta{
  font-size:10px;color:rgba(255,255,255,.6);font-weight:500;
  margin-top:3px;display:flex;gap:8px;justify-content:center;align-items:center;
}
#imgRenderHost .imgcard-tc-team-chip{padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}
#imgRenderHost .imgcard-tc-arch-chip{padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:9px;font-weight:800;color:rgba(255,255,255,.75);letter-spacing:.04em;text-transform:uppercase}
#imgRenderHost .tc-mem-archetype{font-size:8.5px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.03em;text-align:center;line-height:1;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-transform:uppercase}
#imgRenderHost .imgcard-tc .imgcard-url{bottom:12px;right:36px;font-size:10px}

#imgRenderHost .imgcard-tc-grid{
  position:absolute;top:72px;left:32px;right:32px;bottom:36px;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:minmax(0, 1fr) minmax(0, 1fr);
  gap:12px;z-index:1;
}
#imgRenderHost .tc-mem{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:10px 12px 10px;
  overflow:hidden;
  display:flex;flex-direction:column;min-height:0;
}
#imgRenderHost .tc-mem-slot{
  position:absolute;top:6px;right:10px;
  font-size:26px;font-weight:900;color:rgba(255,255,255,.12);
  line-height:.8;letter-spacing:-.05em;z-index:0;pointer-events:none;
}
#imgRenderHost .tc-mem > *{position:relative;z-index:1}
#imgRenderHost .tc-mem-top{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}
#imgRenderHost .tc-mem-sprite-wrap{
  position:relative;width:78px;height:78px;
  display:flex;align-items:center;justify-content:center;
}
#imgRenderHost .tc-mem-sprite-glow{
  position:absolute;inset:-10px;border-radius:50%;
  filter:blur(18px);z-index:0;opacity:.6;
}
#imgRenderHost .tc-mem-sprite{
  position:relative;z-index:1;
  width:78px;height:78px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
#imgRenderHost .tc-mem-shiny{
  position:absolute;top:-1px;right:2px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;font-size:8px;font-weight:900;padding:2px 5px;border-radius:999px;
  z-index:3;box-shadow:0 2px 5px rgba(245,158,11,.5);
}
#imgRenderHost .tc-mem-name{
  font-size:12px;font-weight:800;color:#fff;letter-spacing:-0.01em;line-height:1.1;
  margin-top:3px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
#imgRenderHost .tc-mem-types{display:flex;gap:3px;justify-content:center;margin-top:2px}
#imgRenderHost .tc-mem-type-chip{
  font-size:7px;font-weight:900;padding:1px 4px;border-radius:3px;
  color:#fff;letter-spacing:.04em;text-transform:uppercase;
}
#imgRenderHost .tc-mem-middle{
  display:flex;flex-direction:column;gap:2px;margin-top:4px;
  align-items:center;flex-shrink:0;
}
#imgRenderHost .tc-mem-ability{
  font-size:10px;color:rgba(255,255,255,.88);font-weight:700;line-height:1.05;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
#imgRenderHost .tc-mem-item-row{
  display:flex;align-items:center;gap:4px;
  padding:2px 7px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
}
#imgRenderHost .tc-mem-item-sprite{width:14px;height:14px;object-fit:contain;flex-shrink:0}
#imgRenderHost .tc-mem-item-name{
  font-size:9px;color:rgba(255,255,255,.75);font-weight:600;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#imgRenderHost .tc-mem-moves{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  margin-top:auto;flex-shrink:0;padding-top:6px;
}
/* html2canvas doesn't vertically center flex text reliably — use explicit
   line-height matching the container height instead. This keeps move text
   on the baseline without descender/ascender clipping. */
#imgRenderHost .tc-mem-move{
  position:relative;overflow:hidden;
  padding:0 8px;
  border-radius:5px;color:#fff;
  height:24px;line-height:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
#imgRenderHost .tc-mem-move::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
#imgRenderHost .tc-mem-empty{
  border-style:dashed;border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;
}
#imgRenderHost .tc-mem-empty-icon{
  font-size:18px;font-weight:900;color:rgba(255,255,255,.18);line-height:1;
}
#imgRenderHost .tc-mem-move-name{
  position:relative;z-index:1;
  display:block;
  font-size:9.5px;font-weight:800;letter-spacing:-0.01em;
  line-height:24px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}