/* epic_popup.css — shared art-backed announcement / result card (js/ui/epic_popup.js).
 *
 * Painted, like the ChatGPT mockups in docs/popup_designs/:
 *   img/popups/*.webp     text-free scene art (one per event / outcome)
 *   img/popups/ui/*.webp  frame (gold / crimson), ribbon, nameplate, stat plaque,
 *                         button plates — keyed off flat grey, alpha WebP
 * Referenced ONLY from this file so stamp_css_urls.js versions them — never
 * build these urls in JS. All text is real DOM text (auto-translate), light with
 * a hard dark outline (dark text on painted gold is unreadable).
 *
 * The frame is a 9-slice border-image on .ep-wrap (NOT the scrolling card): its
 * crest overhangs the card top via border-image-outset. Plates with a centre
 * ornament (ribbon, buttons, plaques) are stretched as backgrounds instead —
 * 9-slicing them would smear the centre gem across the whole edge.
 */
.ep-back{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:radial-gradient(ellipse at center,rgba(8,12,30,.72),rgba(0,0,0,.88));
  animation:ep-fade .25s ease-out both;overflow:auto;scrollbar-width:none}
/* The card caps its own height and scrolls its body; the backdrop only overflows
   by a few px of frame/gem, so never show its bar (the global gold rule made it appear). */
.ep-back::-webkit-scrollbar{display:none}

/* frame — the "sober" set (2026-09-26, user: the winged crest frame was too
   massive): a thin double gold hairline with small corner filigree, 9-sliced
   just outside the card edge, plus a small diamond centred on the top edge
   (split off the art so the stretched top edge cannot smear it). */
.ep-wrap{--ep-accent:#ffcf5a;position:relative;width:min(460px,100%);margin:24px auto 20px;
  animation:ep-pop .38s cubic-bezier(.2,1.4,.4,1) both}
.ep-wrap::after{content:"";position:absolute;inset:-7px;pointer-events:none;z-index:20;
  /* A REAL (transparent) border — Safari draws no border-image at all when
     border-width is 0. */
  border:solid transparent;border-width:26px;
  border-image-source:url('../img/popups/ui/frame_sober.webp?h=dda265dd');
  border-image-slice:52;border-image-width:1;border-image-outset:0;border-image-repeat:stretch}
.ep-wrap::before{content:"";position:absolute;z-index:21;pointer-events:none;left:50%;top:-7px;width:29px;height:20px;transform:translateX(-50%);
  background:url('../img/popups/ui/frame_sober_gem.webp?h=55c08f79') center/100% 100% no-repeat}
.ep-wrap.ep-lose::after,.ep-wrap.ep-lose::before{filter:hue-rotate(-38deg) saturate(1.5) brightness(.9)}
/* The card does NOT scroll as a whole (scrolling it slid the art and ribbon up
   under the frame and glitched the Ken Burns layer): header stays put, only the
   body scrolls. */
.ep-card{position:relative;width:100%;max-height:calc(100vh - 64px);overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#141d3f 0%,#0c1230 55%,#070a1c 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.7);   /* no coloured aura (user ruling) */
  color:#e9ecff;scrollbar-width:thin;scrollbar-color:#a8862e #0c1230}
.ep-wrap,.ep-mini{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}

/* ribbon — painted swallowtail banner over the top of the art */
.ep-ribbon{position:absolute;z-index:22;left:50%;top:16px;transform:translateX(-50%);width:78%;max-width:380px;overflow:hidden;white-space:nowrap;height:32px;
  display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;text-indent:.14em;
  border:solid transparent;border-width:0 22px;border-image:url('../img/popups/ui/ribbon_sober.webp?h=80d97df4') 0 44 fill / 0 22px stretch;
  font-weight:900;font-size:clamp(9px,2.4vw,12px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;
  text-align:center;color:#fff3cc;text-shadow:0 1px 0 #000,0 0 3px #000,0 0 8px rgba(0,0,30,.9);
  font-family:Georgia,'Palatino Linotype','Book Antiqua',serif;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}

/* art */
.ep-art{position:relative;flex:0 1 auto;min-height:110px;margin-bottom:-42px;aspect-ratio:4/3;background:#050814 center/cover no-repeat;overflow:hidden}
.ep-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 58%,#0c1230 100%)}
.ep-art-kb{position:absolute;inset:0;background:inherit;animation:ep-kenburns 14s ease-in-out infinite alternate}
.ep-sprite{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);z-index:2;
  display:flex;align-items:flex-end;justify-content:center;width:70%;height:70%;pointer-events:none}
.ep-emblem{font-size:72px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.8));animation:ep-float 3s ease-in-out infinite}

/* body */
/* Only .ep-content (loot, calendar) scrolls: scrolling the whole body slid the
   subtitle plate up under the art and clipped its top rim. */
.ep-body{position:relative;z-index:2;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0 26px 24px;text-align:center}
.ep-body>*{flex:none}
.ep-card .ep-body>.ep-content{flex:0 1 auto;min-height:60px;overflow:hidden auto;scrollbar-width:thin;scrollbar-color:#a8862e #0c1230}
.ep-title{position:relative;z-index:3;margin:0 0 6px;overflow-wrap:normal;font-family:Georgia,'Palatino Linotype','Book Antiqua',serif;
  font-weight:900;font-size:clamp(26px,7.4vw,38px);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;
  background:linear-gradient(180deg,#fffbe0 8%,#ffe07a 40%,#f0a52a 70%,#b86a10 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* text-shadow/stroke paint THROUGH a transparent fill and brown the gold —
     the outline + glow come from drop-shadow filters instead */
  filter:drop-shadow(0 2px 0 #4a2200) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 12px color-mix(in srgb,var(--ep-accent) 60%,transparent));
  animation:ep-title .55s .1s cubic-bezier(.2,1.5,.4,1) both}
.ep-subtitle{display:block;width:fit-content;min-width:62%;max-width:100%;box-sizing:border-box;margin:4px auto;padding:5px 10px;white-space:nowrap;overflow:hidden;
  border:solid transparent;border-width:0 18px;border-image:url('../img/popups/ui/nameplate_sober.webp?h=27258448') 0 26 fill / 0 18px stretch;
  font-family:Georgia,'Palatino Linotype',serif;font-weight:800;font-size:16px;color:#fff;
  text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.9)}
.ep-text{font-size:13.5px;line-height:1.5;color:#d2d8f5;margin:8px 0 2px;text-shadow:0 1px 0 #000}
.ep-text b{color:#fff}
.ep-section-title{white-space:nowrap;overflow:hidden;margin:12px auto 6px;text-align:center;font-family:Georgia,serif;font-weight:800;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:#ffe9a8;text-shadow:0 1px 0 #000}
.ep-section-title::before,.ep-section-title::after{content:"◆";margin:0 .6em;color:#d9a531;font-size:9px;vertical-align:2px}

/* stat plaques */
.ep-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 4px}
.ep-stat{flex:1 1 30%;min-width:88px;max-width:150px;min-height:62px;box-sizing:border-box;padding:7px 2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:solid transparent;border-width:0 20px;border-image:url('../img/popups/ui/plaque_sober.webp?h=ac67c2fd') 0 46 fill / 0 20px stretch}
.ep-stat-ico{font-size:18px;line-height:1}
.ep-stat-val{display:block;max-width:100%;font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000;margin-top:2px;white-space:nowrap;overflow:hidden;line-height:1.15}
.ep-stat-lbl{display:block;max-width:100%;overflow-wrap:normal;line-height:1.15;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#b9c3ee;text-shadow:0 1px 0 #000}
.ep-stat.good .ep-stat-val{color:#7dff9a}
.ep-stat.bad .ep-stat-val{color:#ff8a8a}
.ep-stat.gold .ep-stat-val{color:#ffd76a}
.ep-content{margin:10px 0 2px;text-align:left}

/* countdown — on a nameplate */
.ep-countdown{display:flex;width:fit-content;max-width:100%;box-sizing:border-box;align-items:center;justify-content:center;gap:8px;margin:12px auto 2px;padding:5px 10px;white-space:nowrap;overflow:hidden;
  border:solid transparent;border-width:0 18px;border-image:url('../img/popups/ui/nameplate_sober.webp?h=27258448') 0 26 fill / 0 18px stretch;
  font-size:12px;color:#aee4ff;text-shadow:0 1px 0 #000}
.ep-countdown b{font-size:16px;color:#ffe07a;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ring countdown (respawn / returning) */
.ep-ring{position:relative;width:78px;height:78px;margin:12px auto 2px;border-radius:50%;
  background:radial-gradient(circle,#1a2250 0 58%,#0a0e24 60%);box-shadow:0 0 0 3px #b58a2c,0 0 0 5px #3a2a08,0 0 16px rgba(0,0,0,.7)}
.ep-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ep-ring circle{fill:none;stroke-width:6}
.ep-ring .ep-ring-bg{stroke:rgba(255,255,255,.1)}
.ep-ring .ep-ring-fg{stroke:var(--ep-accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.ep-ring-n{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:900;font-size:22px;color:#fff;text-shadow:0 1px 0 #000;line-height:1}
.ep-ring-n small{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cbd;margin-top:2px}

/* painted button plates */
.ep-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 2px;margin:16px -4px 0}
.ep-btn{min-width:140px;max-width:100%;height:44px;padding:0 6px;white-space:nowrap;overflow:hidden;border-radius:0;cursor:pointer;
  border:solid transparent;border-width:0 22px;border-image:url('../img/popups/ui/btn_blue_sober.webp?h=d6ac9a58') 0 49 fill / 0 22px stretch;
  font-family:Georgia,'Palatino Linotype',serif;font-weight:900;font-size:15px;letter-spacing:.02em;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.7);
  background:none;box-shadow:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));transition:transform .08s,filter .15s}
.ep-btn.primary{border-image-source:url('../img/popups/ui/btn_orange_sober.webp?h=644e1504')}
.ep-btn.danger{border-image-source:url('../img/popups/ui/btn_red_sober.webp?h=dc1b9bbc')}
.ep-btn:hover{filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) brightness(1.15)}
.ep-btn:active{transform:translateY(1px) scale(.98)}
.ep-btn:disabled{filter:grayscale(1) brightness(.7);cursor:default}

/* PvP/boss result actions rendered by pvp_battle._renderResultActions (plain
   .btn markup) — painted like .ep-btn. Specific enough to beat skin .btn plates. */
.ep-card .ep-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 2px;margin:14px -4px 0}
.ep-card .ep-actions > div{flex:1 1 100%;font-size:12px!important;color:#c9cfee!important;margin:0 0 4px!important}
.ep-card .ep-actions .btn{min-width:140px;max-width:100%;height:44px;padding:0 6px;border:solid transparent!important;border-width:0 22px!important;border-radius:0!important;
  border-image:url('../img/popups/ui/btn_blue_sober.webp?h=d6ac9a58') 0 49 fill / 0 22px stretch!important;box-shadow:none!important;cursor:pointer;white-space:nowrap;
  font-family:Georgia,'Palatino Linotype',serif;font-weight:900;font-size:15px;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.7);
  background:none!important;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.ep-card .ep-actions .btn.primary{border-image-source:url('../img/popups/ui/btn_orange_sober.webp?h=644e1504')!important}
.ep-card .ep-actions .btn:hover{filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) brightness(1.15)}
.ep-card .ep-actions .btn:disabled{filter:grayscale(1) brightness(.7)}

/* outcome: win */
.ep-wrap.ep-win{--ep-accent:#ffd24a}
.ep-win .ep-art::before{content:"";position:absolute;inset:-40%;z-index:1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,225,130,.10) 0 8deg,rgba(0,0,0,0) 8deg 20deg);
  -webkit-mask:radial-gradient(circle at center,#000 0,rgba(0,0,0,0) 45%);mask:radial-gradient(circle at center,#000 0,rgba(0,0,0,0) 45%);
  animation:ep-spin 30s linear infinite;mix-blend-mode:screen}
.ep-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:15}
.ep-confetti i{position:absolute;top:-12px;width:7px;height:11px;border-radius:2px;opacity:.95;
  animation:ep-confetti 2.8s ease-in forwards}

/* outcome: lose */
.ep-wrap.ep-lose{--ep-accent:#d8384e}
.ep-lose .ep-card,.ep-lose .ep-inline{background:linear-gradient(180deg,#26101a 0%,#140a14 55%,#0a0610 100%)}
.ep-lose .ep-art{filter:saturate(.55) brightness(.85)}
.ep-lose .ep-art::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 35%,rgba(120,0,20,.55) 100%),
  linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 58%,#140a14 100%)}
.ep-lose .ep-title{background:linear-gradient(180deg,#ffe0e0 8%,#ff8a8a 40%,#e0303a 72%,#7a0a14 96%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 #2a0006) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 14px rgba(255,40,70,.55));
  animation:ep-title-lose .6s .1s ease-out both}
.ep-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ep-embers i{position:absolute;bottom:-6px;width:4px;height:4px;border-radius:50%;background:#ff7a3a;
  box-shadow:0 0 6px #ff5a1a;animation:ep-ember 4s linear infinite}

/* mini (non-blocking, e.g. hero death) */
.ep-mini{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:8990;pointer-events:none;
  display:flex;align-items:center;gap:12px;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:10px 4px;
  border:solid transparent;border-width:0 24px;border-image:url('../img/popups/ui/plaque_sober.webp?h=ac67c2fd') 0 46 fill / 0 24px stretch;
  animation:ep-mini-in .3s ease-out both}
.ep-mini.out{animation:ep-mini-out .35s ease-in forwards}
.ep-mini-art{flex:0 0 52px;height:52px;border-radius:8px;background:#000 center/cover no-repeat;filter:saturate(.6);
  box-shadow:0 0 0 2px #b58a2c}
.ep-mini-txt{flex:1;min-width:0}
.ep-mini-title{font-family:Georgia,serif;font-weight:900;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#ff8a98;text-shadow:0 1px 0 #000,0 0 3px #000}
.ep-mini-sub{font-size:12px;color:#e0e4f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
.ep-mini .ep-ring{width:46px;height:46px;margin:0;flex:0 0 46px}
.ep-mini .ep-ring-n{font-size:15px}
.ep-mini .ep-ring-n small{display:none}
.ep-mini-count{font-size:11px;color:#ffb0b8;text-shadow:0 1px 0 #000}

/* inline header inside an existing #modal-card view (Welcome Back, Daily,
   Tetris, Boss Sweep, results) — same frame, no overlay of its own */
.ep-inline-wrap{width:auto;max-width:460px;margin:22px 14px 18px;animation:none}
.ep-inline{position:relative;overflow:hidden;background:linear-gradient(180deg,#141d3f 0%,#0c1230 100%);color:#e9ecff}
.ep-inline .ep-body{display:block;padding:0 26px 24px;overflow:visible}
.ep-inline .ep-art{aspect-ratio:16/10}
.ep-inline-wrap.ep-compact{margin:22px auto 18px}
.ep-compact .ep-body{padding-top:62px}
.ep-compact .ep-ribbon{width:62%;top:16px}
.ep-compact .ep-title{margin:4px 0 2px;font-size:clamp(24px,6vw,32px)}
.ep-compact .ep-stats{margin:8px 0 0}

/* wide inline card (Welcome Back in the .wide modal): 4 loot items per row,
   stats side by side */
.ep-inline-wrap.ep-wide{max-width:530px}
.ep-wrap.ep-wide{width:min(530px,100%)}
.ep-wide .ep-content{text-align:center}
.ep-wide .ep-art{aspect-ratio:2.2/1}
.ep-wide .ep-stat{flex:1 1 22%;max-width:170px}
.ep-wide .ep-loot-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:max(130px,min(40vh,calc(100vh - 560px)))}
.ep-wide .ep-loot .offline-loot-icon,.ep-wide .ep-loot .offline-loot-icon img{width:36px!important;height:36px!important}
.ep-wide .ep-loot-name{font-size:10.5px}

/* loot grid (Welcome Back) */
.ep-loot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:40vh;overflow:auto;
  margin:0 0 10px;padding:8px;border-radius:10px;background:rgba(6,10,28,.7);box-shadow:inset 0 0 0 1px #6a5320,inset 0 0 12px rgba(0,0,0,.6)}
.ep-loot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;border-radius:8px;
  background:radial-gradient(circle at 50% 35%,#24306a,#0e1433 70%);box-shadow:inset 0 0 0 1px var(--q,#8a6d2a),0 1px 2px rgba(0,0,0,.6)}
.ep-loot .offline-loot-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:22px}
.ep-loot .offline-loot-icon img{width:32px!important;height:32px!important}
.ep-loot-qty{position:absolute;top:2px;right:4px;font-size:11px;color:#ffe07a;text-shadow:0 1px 0 #000,0 0 3px #000}
.ep-loot-qty.ep-used{color:#ff9c9c}
.ep-wb-body{text-align:center;margin-top:4px}
.ep-loot-name{max-width:100%;font-size:9px;line-height:1.1;color:#c9cfee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}

@media (max-width:520px){
  .ep-wrap::after{inset:-6px;border-width:22px}
  .ep-ribbon{top:12px;height:28px}
  .ep-wrap{margin-top:16px}
  .ep-body,.ep-inline .ep-body{padding:0 18px 18px}
  .ep-btns{margin:14px -4px 0}
  .ep-btn{min-width:124px;height:40px;font-size:13px}
  .ep-stat{min-width:80px}
}

/* art catalogue */
.ep-art--pvp_arena{background-image:url('../img/popups/pvp_arena.webp?h=e367a103')}
.ep-art--wb_stage{background-image:url('../img/popups/wb_stage.webp?h=a6eb1f96')}
.ep-art--gb_stage{background-image:url('../img/popups/gb_stage.webp?h=e23751a7')}
.ep-art--gvg_castles{background-image:url('../img/popups/gvg_castles.webp?h=2bf58e09')}
.ep-art--gvg_charge{background-image:url('../img/popups/gvg_charge.webp?h=94b11660')}
.ep-art--cup{background-image:url('../img/popups/cup.webp?h=4408cae0')}
.ep-art--cup_knockout{background-image:url('../img/popups/cup_knockout.webp?h=a9c9eed9')}
.ep-art--cup_champion{background-image:url('../img/popups/cup_champion.webp?h=1799e9b9')}
.ep-art--season_medal{background-image:url('../img/popups/season_medal.webp?h=cd3e9342')}
.ep-art--season_end{background-image:url('../img/popups/season_end.webp?h=5c897335')}
.ep-art--party{background-image:url('../img/popups/party.webp?h=8d7dd6bb')}
.ep-art--party_win{background-image:url('../img/popups/party_win.webp?h=54037e88')}
.ep-art--party_wipe{background-image:url('../img/popups/party_wipe.webp?h=36d5756e')}
.ep-art--tetris{background-image:url('../img/popups/tetris.webp?h=e2d5c9f4')}
.ep-art--tetris_best{background-image:url('../img/popups/tetris_best.webp?h=81cdd56a')}
.ep-art--tetris_topout{background-image:url('../img/popups/tetris_topout.webp?h=f09a3c2a')}
.ep-art--duel_win{background-image:url('../img/popups/duel_win.webp?h=2d9004fb')}
.ep-art--duel_lose{background-image:url('../img/popups/duel_lose.webp?h=dce63cb8')}
.ep-art--duel_draw{background-image:url('../img/popups/duel_draw.webp?h=b299ca31')}
.ep-art--tower{background-image:url('../img/popups/tower.webp?h=8cfb7707')}
.ep-art--tower_top{background-image:url('../img/popups/tower_top.webp?h=063cabc7')}
.ep-art--tower_fall{background-image:url('../img/popups/tower_fall.webp?h=60ae7a88')}
.ep-art--horde{background-image:url('../img/popups/horde.webp?h=656ee639')}
.ep-art--horde_win{background-image:url('../img/popups/horde_win.webp?h=75a481ec')}
.ep-art--horde_fail{background-image:url('../img/popups/horde_fail.webp?h=d0fbeee7')}
.ep-art--gauntlet{background-image:url('../img/popups/gauntlet.webp?h=d4876b14')}
.ep-art--gauntlet_win{background-image:url('../img/popups/gauntlet_win.webp?h=da6bec2d')}
.ep-art--gauntlet_fail{background-image:url('../img/popups/gauntlet_fail.webp?h=cb8c1e85')}
.ep-art--daily{background-image:url('../img/popups/daily.webp?h=888292da')}
.ep-art--welcome{background-image:url('../img/popups/welcome.webp?h=d8ea1d2c')}
.ep-art--br_invite{background-image:url('../img/popups/br_invite.webp?h=1d8d1211')}
.ep-art--br_champion{background-image:url('../img/popups/br_champion.webp?h=0d571219')}
.ep-art--rift_undead{background-image:url('../img/popups/rift_undead.webp?h=64a9dcf1')}
.ep-art--rift_insect{background-image:url('../img/popups/rift_insect.webp?h=878dc681')}
.ep-art--rift_demon{background-image:url('../img/popups/rift_demon.webp?h=2fe69907')}
.ep-art--rift_brute{background-image:url('../img/popups/rift_brute.webp?h=03fcca7c')}
.ep-art--rift_dragon{background-image:url('../img/popups/rift_dragon.webp?h=421f5bbb')}
.ep-art--rift_fish{background-image:url('../img/popups/rift_fish.webp?h=250f6bf0')}
.ep-art--rift_plant{background-image:url('../img/popups/rift_plant.webp?h=79e3d4df')}
.ep-art--rift_clear{background-image:url('../img/popups/rift_clear.webp?h=cc5d160f')}
.ep-art--vip_up{background-image:url('../img/popups/vip_up.webp?h=65f7581b')}
.ep-art--vip_card{background-image:url('../img/popups/vip_card.webp?h=d363c1ae')}
.ep-art--rift_fail{background-image:url('../img/popups/rift_fail.webp?h=2eb9532f')}
.ep-art--victory{background-image:url('../img/popups/victory.webp?h=75d11606')}
.ep-art--defeat{background-image:url('../img/popups/defeat.webp?h=62020b73')}
.ep-art--gvg_win{background-image:url('../img/popups/gvg_win.webp?h=f21e230b')}
.ep-art--gvg_loss{background-image:url('../img/popups/gvg_loss.webp?h=e68471e5')}
.ep-art--boss_slain{background-image:url('../img/popups/boss_slain.webp?h=321e4761')}
.ep-art--boss_endures{background-image:url('../img/popups/boss_endures.webp?h=c1bf6ad5')}
.ep-art--region_clear{background-image:url('../img/popups/region_clear.webp?h=5328d215')}
.ep-art--died{background-image:url('../img/popups/died.webp?h=f705a3c3')}
.ep-art--sweep{background-image:url('../img/popups/sweep.webp?h=c56ce1f0')}
.ep-art--sweep_idle{background-image:url('../img/popups/sweep_idle.webp?h=5268896c')}
.ep-art--mvp_stage{background-image:url('../img/popups/mvp_stage.webp?h=4b53cb33')}
.ep-art--mvp_stage2{background-image:url('../img/popups/mvp_stage2.webp?h=d3122496')}
.ep-art--mvp_stage3{background-image:url('../img/popups/mvp_stage3.webp?h=b0ba0513')}
.ep-art--mvp_stage4{background-image:url('../img/popups/mvp_stage4.webp?h=9f7db646')}

@keyframes ep-fade{from{opacity:0}to{opacity:1}}
@keyframes ep-pop{0%{opacity:0;transform:scale(.86) translateY(14px)}100%{opacity:1;transform:none}}
@keyframes ep-title{0%{opacity:0;transform:scale(1.35)}100%{opacity:1;transform:none}}
@keyframes ep-title-lose{0%{opacity:0;transform:translateY(-10px)}60%{opacity:1;transform:translateY(2px)}100%{transform:none}}
@keyframes ep-kenburns{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
@keyframes ep-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ep-spin{to{transform:rotate(360deg)}}
@keyframes ep-confetti{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(560px) rotate(720deg);opacity:0}}
@keyframes ep-ember{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-260px) translateX(20px);opacity:0}}
@keyframes ep-mini-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes ep-mini-out{to{opacity:0;transform:translate(-50%,10px)}}
@media (prefers-reduced-motion:reduce){
  .ep-wrap,.ep-title,.ep-art-kb,.ep-emblem,.ep-confetti i,.ep-embers i,.ep-win .ep-art::before{animation:none!important}
}

/* Boss Sweep (js/ui/boss_sweep_ui.js) — body of its own EpicPopup card */
.bs-body{text-align:left;font-size:12px;color:#d2d8f5}
.bs-note{margin:0 0 8px;padding:7px 10px;border-radius:6px;font-size:11.5px;line-height:1.5;
  background:rgba(8,12,32,.7);box-shadow:inset 0 0 0 1px rgba(201,162,74,.35)}
.bs-note.good{box-shadow:inset 0 0 0 1px rgba(120,210,130,.45);background:rgba(14,36,22,.6)}
.bs-note.bad{box-shadow:inset 0 0 0 1px rgba(230,110,110,.5);background:rgba(40,12,16,.6)}
.bs-scopes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:8px}
.bs-scope{min-width:0;padding:9px 10px;border-radius:8px;text-align:center;
  background:radial-gradient(circle at 50% 0,#1f2a5c,#0c1230 75%);box-shadow:inset 0 0 0 1px #8a6d2a,0 2px 6px rgba(0,0,0,.5)}
.bs-scope-title{font-family:Georgia,'Palatino Linotype',serif;font-weight:800;font-size:14px;color:#ffe9a8;text-shadow:0 1px 0 #000}
.bs-scope-sub{font-size:11px;color:#b9c3ee;margin:3px 0 8px}
.bs-btn{display:block;width:100%;min-width:0;height:38px;font-size:13px}
.bs-help{font-size:10.5px;color:#9aa4d0;line-height:1.5;margin:4px 0 2px}
.bs-list{border-radius:8px;padding:2px 8px;background:rgba(6,10,28,.6);box-shadow:inset 0 0 0 1px rgba(201,162,74,.3)}
.bs-row{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:11.5px;border-bottom:1px solid rgba(201,162,74,.14)}
.bs-row:last-child{border-bottom:0}
.bs-body details summary{margin-top:8px;font-size:11px;color:#9aa4d0;cursor:pointer}
/* Inside a card the content area is the ONE scroller (Welcome Back had a
   nested grid scroll = double scrollbar). */
.ep-card .ep-loot-grid{max-height:none;overflow:visible}
.ep-card .bs-loot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Floating badge over the art (VIP tier crest / VIP card) — opts.badge. */
.ep-badge{position:absolute;left:50%;top:44%;width:34%;max-width:170px;aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.ep-badge-img{position:relative;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,214,110,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.6));
  animation:epBadgeIn .9s cubic-bezier(.2,1.5,.4,1) both, epBadgeFloat 2.8s ease-in-out .9s infinite}
.ep-badge-rays{position:absolute;inset:-45%;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,226,140,.38) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);
  animation:epBadgeSpin 14s linear infinite, epBadgeFade .8s .2s ease-out both}
@keyframes epBadgeIn{0%{transform:scale(.1) rotate(-25deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes epBadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes epBadgeSpin{to{transform:rotate(360deg)}}
@keyframes epBadgeFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ep-badge-img,.ep-badge-rays{animation:none}}
/* Per-scene badge slot: the crest rests on the throne altar under the crown;
   the card image fills the blank face of the painted card. */
.ep-art--vip_up .ep-badge{top:70%;width:24%}
.ep-art--vip_card .ep-badge{top:41%;width:21%}
.ep-art--vip_card .ep-badge-img{border-radius:6%}
