/* The Maw, the Abomination and the Daily Events screen (client/panels-boss.js). .bs-* boss, .ev-* events. */

/* ---------- buttons, chips ---------- */
.bs-btn { min-height: 42px; padding: 6px 14px; border-radius: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: #fff;
  background: linear-gradient(#4a5f52, #2f4136 55%, #223028); border: 1px solid #6c8475; box-shadow: 0 3px 0 var(--c-ink), inset 0 1px 0 rgba(255,255,255,.2); }
.bs-btn:active:not([disabled]) { transform: translateY(1px) scale(.98); }
.bs-btn[disabled] { filter: grayscale(1) brightness(.75); opacity: .8; }
.bs-btn.gold { background: linear-gradient(#ffd97a, #e3a12f 55%, #b8761a); border-color: #ffe7a6; color: #2a1a03; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.bs-btn.red { background: linear-gradient(#ff7a62, #d0412f 55%, #8f2318); border-color: #ffab9c; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.bs-btn.sm { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.bs-btn.wide { width: 100%; min-height: 52px; font-size: 17px; }
.bs-btn small { font-weight: 700; opacity: .85; font-size: 12px; }
.bs-rws { display: flex; flex-wrap: wrap; gap: 5px; } .bs-rws.big { justify-content: center; gap: 6px; }
.bs-rw { padding: 2px 8px; border-radius: 999px; background: var(--c-ink); border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.bs-rw.ruby { border-color: #7a3a6a; } .bs-rws.big .bs-rw { padding: 5px 11px; font-size: 14.5px; border-color: var(--pn-gold2); }
.bs-pop { display: grid; gap: 8px; } .bs-pop p, .bs-p { margin: 0; line-height: 1.45; font-size: 14px; }
.bs-kv { display: flex; flex-wrap: wrap; gap: 6px; } .bs-kv span { padding: 4px 10px; border-radius: 10px; background: var(--c-ink); border: 1px solid var(--line); font-size: 13px; }
.bs-kv .up { border-color: #3f8f5f; color: #9ff0c4; } .bs-kv .dn { border-color: #8f3f3f; color: #ffb3aa; }

/* ---------- the stage (monster canvas with plates over it) ---------- */
.bs-stage { position: relative; height: 262px; margin: 0 -12px 8px; overflow: hidden; background: #0a0806; border-bottom: 2px solid var(--pn-gold2); box-shadow: inset 0 -30px 40px -20px rgba(0,0,0,.8); }
/* the Maw's Attack button, standing on the bottom of the boss art */
.bs-stage-act { position: absolute; left: 50%; bottom: 12px; z-index: 3; width: min(78%, 330px); transform: translateX(-50%); }
.bs-stage-act .bs-btn { box-shadow: 0 4px 14px rgba(0,0,0,.6); }
.pn-tabs + .bs-stage { margin-top: -4px; border-top: 1px solid #5a3f20; }
.bs-cv { display: block; width: 100%; height: 100%; }
.bs-name { position: absolute; left: 10px; top: 8px; display: grid; gap: 1px; text-shadow: 0 2px 3px #000, 0 0 8px #000; pointer-events: none; }
.bs-name b { font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: #ffe2b0; }
.bs-name small { font-size: 11.5px; color: #e6d9c0; opacity: .9; }
.bs-tries { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 999px; background: rgba(8,6,5,.72); border: 1px solid var(--pn-gold2); }
.bs-tries i { font-style: normal; font-size: 13px; opacity: .25; filter: grayscale(1); } .bs-tries i.on { opacity: 1; filter: none; color: #ff8a6a; text-shadow: 0 0 6px rgba(255,90,50,.8); }
.bs-tries b { margin-left: 4px; font-size: 13px; color: var(--pn-gold); }
.bs-timer { position: absolute; right: 8px; top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(8,6,5,.78); border: 1px solid #d0503a; color: #ffd0c4; font-weight: 800; font-size: 14px; }
.bs-timer.dim { border-color: var(--line); color: var(--muted); font-weight: 600; font-size: 12px; }
.bs-stamp, .ev-stamp { font-weight: 900; letter-spacing: .08em; color: #7dffb0; border: 2.5px solid #7dffb0; border-radius: 8px; padding: 2px 8px; transform: rotate(-9deg); text-shadow: 0 0 8px rgba(80,255,150,.5); box-shadow: 0 0 10px rgba(80,255,150,.25), inset 0 0 8px rgba(80,255,150,.2); background: rgba(6,20,12,.55); }
.bs-stamp { position: absolute; right: 14px; bottom: 16px; font-size: 17px; }
.bs-hpbar { position: absolute; left: 10px; right: 10px; bottom: 9px; }
.bs-hpbar .bar, .bs-fhp .bar { position: relative; height: 20px; border-radius: 10px; background: #160808; border: 1.5px solid #ffb3a0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.7); }
.bs-hpbar .bar i, .bs-fhp .bar i { display: block; height: 100%; background: linear-gradient(#ff7a5a, #c8281c 60%, #7a120e); transition: width .35s; box-shadow: inset 0 2px 0 rgba(255,255,255,.3); }
.bs-hpbar .bar span, .bs-fhp .bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 system-ui; color: #fff; text-shadow: 0 1px 2px #000; }

/* ---------- phases ---------- */
.bs-phases { display: flex; gap: 5px; margin-bottom: 8px; }
.bs-phase { min-width: 0; display: grid; gap: 1px; justify-items: center; padding: 6px 4px; border-radius: 12px; color: var(--text); text-align: center;
  background: linear-gradient(color-mix(in srgb, var(--pc) 32%, #121814), #101612); border: 1px solid color-mix(in srgb, var(--pc) 60%, #000); border-bottom: 3px solid var(--pc); }
.bs-phase.long { box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 45%, transparent); }
.bs-phase b { font-size: 12px; line-height: 1.15; max-width: 100%; }
.bs-phase small { font-size: 10.5px; color: var(--muted); }
.bs-phase span { display: flex; gap: 6px; font-size: 12px; } .bs-phase i { font-style: normal; }
.bs-phase .up, .bs-hero .mk.up { color: #7dffb0; } .bs-phase .dn, .bs-hero .mk.dn { color: #ff8a7a; }
.bs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.bs-stats > * { display: grid; justify-items: center; gap: 1px; padding: 7px 4px; border-radius: 12px; background: linear-gradient(#1f2a22, #16201a); border: 1px solid var(--line); color: var(--text); min-width: 0; }
.bs-stats small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bs-stats b { font-size: 17px; color: var(--pn-gold); }
.bs-stats .bs-loc { border-color: var(--pn-gold2); } .bs-stats .bs-loc b { font-size: 14px; }
.bs-lore { margin: 0 2px 10px; font-style: italic; line-height: 1.4; }

/* ---------- line-up ---------- */
.bs-lhead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .bs-lhead h3 { margin: 0; flex: 1; }
.bs-syn { border-color: #3f8f5f; color: #9ff0c4; }
.bs-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.bs-slot { position: relative; aspect-ratio: 1; padding: 0; border-radius: 12px; overflow: hidden; background: var(--c-ink); border: 2px solid var(--fc, var(--line)); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.bs-slot.empty { display: grid; place-items: center; border-style: dashed; color: var(--muted); font-size: 22px; box-shadow: none; }
.bs-pic { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top; }
.bs-slot b, .bs-hero b { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 2px 2px; font-size: 10px; text-align: center; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.88)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-slot .fac, .bs-hero .fac, .bs-u .fac { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: rgba(0,0,0,.7); border: 1px solid var(--fc); font-size: 10.5px; font-style: normal; display: grid; place-items: center; }
.bs-roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.bs-hero { position: relative; aspect-ratio: 4 / 5; padding: 0; border-radius: 12px; overflow: hidden; background: var(--c-ink); border: 2px solid #3a4a40; opacity: .92; }
.bs-hero.on { border-color: #7dffb0; box-shadow: 0 0 10px rgba(80,255,150,.4); opacity: 1; }
.bs-hero .lv { position: absolute; left: 0; right: 0; bottom: 15px; font-size: 9.5px; text-align: center; color: var(--pn-gold); text-shadow: 0 1px 2px #000; }
.bs-hero .mk { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 13px; text-shadow: 0 1px 2px #000; }
.bs-hero .ck { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 30px; color: #7dffb0; background: rgba(6,30,16,.45); text-shadow: 0 2px 4px #000; pointer-events: none; }

/* ---------- tiers, levels ---------- */
.bs-tier { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.bs-tier:last-of-type { border-bottom: 0; } .bs-tier.me { background: #2a2410; border: 1px solid var(--pn-gold2); border-radius: 10px; }
.bs-tier small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.bs-band { font-weight: 800; color: var(--pn-gold); font-size: 13px; text-align: center; }
.bs-grade { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; font: 900 34px/1 system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gc) 70%, #fff), var(--gc) 55%, color-mix(in srgb, var(--gc) 50%, #000)); border: 3px solid rgba(255,255,255,.75); box-shadow: 0 0 22px color-mix(in srgb, var(--gc) 70%, transparent), 0 4px 0 rgba(0,0,0,.5); animation: bsPop .5s cubic-bezier(.2,1.6,.4,1) both; }
.bs-grade.sm { width: 40px; height: 40px; font-size: 15px; border-width: 2px; box-shadow: 0 2px 0 rgba(0,0,0,.5); animation: none; }
.bs-grade.g0 { --gc: #7a8a80; } .bs-grade.g1 { --gc: #5aa870; } .bs-grade.g2 { --gc: var(--c-blue); } .bs-grade.g3 { --gc: var(--c-r-epic); } .bs-grade.g4 { --gc: #f0a02c; } .bs-grade.g5 { --gc: #f06a2c; } .bs-grade.g6 { --gc: #e0303a; }
@keyframes bsPop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.bs-level { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; margin-bottom: 8px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--lc) 55%, #000);
  background: linear-gradient(100deg, color-mix(in srgb, var(--lc) 22%, #141a15), #141a15 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.bs-level .no { display: grid; justify-items: center; width: 46px; height: 46px; align-content: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lc) 80%, #fff), color-mix(in srgb, var(--lc) 60%, #000)); border: 2px solid rgba(255,255,255,.6); color: #0c0c0c; }
.bs-level .no b { font-size: 19px; line-height: 1; } .bs-level .no small { font-size: 8.5px; font-weight: 800; }
.bs-level .mid { display: grid; gap: 4px; min-width: 0; } .bs-level .mid > b { font-size: 14px; } .bs-level .mid > b small { font-weight: 600; color: var(--muted); font-size: 12px; }
.bs-level.locked { filter: grayscale(.85) brightness(.8); } .bs-level.beaten { border-style: dashed; }
.bs-last.killed { border-color: #7dffb0; } .bs-last.escaped { border-color: #d0503a; }
.bs-got { display: grid; gap: 5px; justify-items: center; margin: 4px 0; } .bs-got.left { justify-items: start; margin-top: 8px; }
.bs-got > small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--pn-gold); }
.bs-days { display: flex; gap: 6px; margin-bottom: 8px; } .bs-days .bs-btn { flex: 1; }

/* ---------- fight overlay ---------- */
.bs-ov { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; justify-content: center; gap: 8px; overflow: hidden; padding: calc(8px + var(--safe-top)) 10px calc(10px + var(--safe-bottom)); color: var(--text);
  background: radial-gradient(90% 50% at 50% 0%, #3a1712, transparent), linear-gradient(#171210, #0a0908); animation: bsIn .22s ease-out; }
.bs-ov.abom { background: radial-gradient(90% 50% at 50% 0%, #1f3318, transparent), linear-gradient(#11150f, #080a07); }
@keyframes bsIn { from { opacity: 0; transform: scale(1.03); } }
.bs-fhead { display: flex; justify-content: space-between; align-items: center; }
.bs-fhead .tt { display: grid; } .bs-fhead .tt small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .bs-fhead .tt b { font-size: 19px; color: #ffe2b0; text-transform: uppercase; letter-spacing: .04em; }
.bs-fhead .rd { display: grid; justify-items: end; } .bs-fhead .rd b { font-size: 16px; color: var(--pn-gold); } .bs-fhead .rd small { font-size: 11px; color: var(--muted); }
.bs-fstage { position: relative; flex: 1; min-height: 190px; max-height: 480px; border-radius: 16px; overflow: hidden; border: 2px solid var(--pn-gold2); background: #0a0806; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.bs-pops { position: absolute; inset: 0; pointer-events: none; }
.bs-dmg { position: absolute; transform: translate(-50%, -50%); font: 900 22px/1 system-ui; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.9); animation: bsDmg .95s ease-out forwards; white-space: nowrap; }
.bs-dmg.skill { font-size: 30px; color: #ffd24a; } .bs-dmg.weak { color: #7dffb0; } .bs-dmg.skill.weak { color: #c8ff6a; } .bs-dmg.resist { color: #b9bfc2; font-size: 17px; }
@keyframes bsDmg { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.bs-banner { position: absolute; left: 0; right: 0; top: 38%; padding: 10px 0; text-align: center; font: 900 24px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 #000;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc, #a33) 80%, #000) 25%, color-mix(in srgb, var(--pc, #a33) 80%, #000) 75%, transparent); opacity: 0; pointer-events: none; }
.bs-banner.show { animation: bsBanner 1.3s ease-out forwards; }
@keyframes bsBanner { 0% { opacity: 0; transform: scaleX(.3); } 15% { opacity: 1; transform: scaleX(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.bs-fhp { position: absolute; left: 10px; right: 10px; top: 8px; }
.bs-total { position: absolute; left: 0; right: 0; top: 10px; display: grid; justify-items: center; text-shadow: 0 2px 3px #000, 0 0 10px #000; pointer-events: none; }
.bs-ov.abom .bs-total { top: 36px; }
.bs-total small { font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #e6d9c0; } .bs-total b { font-size: 36px; color: #ffd24a; line-height: 1.05; letter-spacing: .01em; }
.bs-fphase { position: absolute; right: 8px; bottom: 8px; display: grid; justify-items: end; gap: 1px; padding: 5px 10px; border-radius: 12px; background: rgba(8,6,5,.78); border: 1px solid var(--pc, var(--line)); border-right: 4px solid var(--pc, var(--line)); }
.bs-fphase b { font-size: 13px; } .bs-fphase span { font-size: 12px; }
.bs-pips { display: flex; gap: 4px; }
.bs-pips i { flex: 1; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--pc) 25%, #0b0b0b); border: 1px solid color-mix(in srgb, var(--pc) 55%, #000); transition: background .2s; }
.bs-pips i.on { background: var(--pc); box-shadow: 0 0 6px var(--pc); }
.bs-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.bs-u { position: relative; display: grid; justify-items: center; gap: 2px; padding: 4px 2px 5px; border-radius: 12px; background: linear-gradient(#1f2a22, #141b16); border: 1.5px solid var(--fc); min-width: 0; transition: transform .12s, filter .3s; }
.bs-u .pic { position: relative; width: 100%; aspect-ratio: 1; border-radius: 9px; overflow: hidden; }
.bs-u .hp { width: 100%; height: 6px; border-radius: 3px; background: #0b0b0b; border: 1px solid #000; overflow: hidden; } .bs-u .hp i { display: block; height: 100%; background: linear-gradient(#8fe09a, #3f9f5f); transition: width .3s; }
.bs-u b { font-size: 10.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bs-u small { font-size: 10.5px; color: var(--pn-gold); font-weight: 700; }
.bs-u.act { transform: translateY(-9px) scale(1.06); box-shadow: 0 0 12px var(--fc); }
.bs-u.hit { animation: bsShake .38s; } .bs-u.hit .pic::after { content: ''; position: absolute; inset: 0; background: rgba(255,40,20,.55); }
.bs-u.down { filter: grayscale(1) brightness(.5); } .bs-u.down::after { content: 'OUT'; position: absolute; top: 26%; font: 900 13px/1 system-ui; color: #ff8a7a; transform: rotate(-12deg); text-shadow: 0 1px 2px #000; }
@keyframes bsShake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
.bs-udmg { position: absolute; top: 8px; left: 50%; font: 900 14px/1 system-ui; color: #ff6a5a; text-shadow: 0 1px 0 #000, 0 0 6px #000; animation: bsDmg .9s ease-out forwards; z-index: 2; white-space: nowrap; }
.bs-ffoot { display: flex; justify-content: space-between; gap: 8px; }
.bs-ov.over .bs-ffoot { visibility: hidden; }
.bs-result { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px; background: rgba(4,4,4,.72); animation: bsIn .25s ease-out; overflow-y: auto; }
.bs-result.hidden { display: none; }
.bs-rcard { width: 100%; max-width: 380px; display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 18px; text-align: center; background: linear-gradient(#2a1c16, #14110f); border: 2px solid var(--pn-gold2); box-shadow: 0 0 40px rgba(240,160,60,.25); }
.bs-result.win .bs-rcard { border-color: #7dffb0; box-shadow: 0 0 40px rgba(80,255,150,.3); background: linear-gradient(#17291c, #0f1410); }
.bs-rcard h2 { margin: 0; font-size: 22px; letter-spacing: .08em; color: #ffd24a; text-shadow: 0 3px 0 #5a2a08, 0 0 20px rgba(255,200,80,.4); }
.bs-result.win h2 { color: #9dffc0; text-shadow: 0 3px 0 #0c3a1c, 0 0 22px rgba(80,255,150,.5); }
.bs-big { font: 900 30px/1 system-ui; color: #fff; } .bs-big small { font-size: 13px; font-weight: 700; color: var(--muted); }
.bs-shares { display: grid; gap: 4px; text-align: left; }
.bs-share { display: grid; grid-template-columns: 30px 64px 1fr auto; gap: 6px; align-items: center; font-size: 12px; }
.bs-share .bs-pic { width: 30px !important; height: 30px !important; border-radius: 7px; } .bs-share .pn-bar { margin: 0; } .bs-share b { color: var(--pn-gold); } .bs-share span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-rbtns { display: flex; gap: 8px; margin-top: 2px; } .bs-rbtns .bs-btn { flex: 1; }

/* ---------- Events: one full-screen poster per event, a scrolling strip of event tabs at the bottom ---------- */
.ev-root { min-height: 100%; display: flex; flex-direction: column; margin: -12px -12px 0; background: #1a0a08; }
#panel .pn-wrap.ev-root { padding-bottom: 0; min-height: calc(100% + 12px); }
.ev-stage { --ec: #a8402c; position: relative; flex: none; display: flex; flex-direction: column; min-height: 300px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 60% at 50% 42%, color-mix(in srgb, var(--ec) 55%, #3a1008), transparent 70%),
    radial-gradient(140% 70% at 50% 100%, #3a0e0a, transparent 60%), linear-gradient(#24100c, #12070a 60%, #1e0a08); }
/* glowing ground and drifting embers behind the art */
.ev-stage::before { content: ''; position: absolute; inset: auto -10% 0; height: 45%; z-index: -1;
  background: radial-gradient(60% 40% at 50% 20%, rgba(255,140,60,.28), transparent 70%), repeating-linear-gradient(100deg, rgba(0,0,0,.25) 0 2px, transparent 2px 14px); }
.ev-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; animation: evEmbers 9s linear infinite;
  background: radial-gradient(2px 2px at 12% 80%, #ffb050, transparent), radial-gradient(2px 2px at 30% 60%, #ff8a3a, transparent), radial-gradient(1.5px 1.5px at 55% 75%, #ffd27a, transparent),
    radial-gradient(2px 2px at 72% 65%, #ff9a4a, transparent), radial-gradient(1.5px 1.5px at 88% 85%, #ffc060, transparent), radial-gradient(2px 2px at 44% 92%, #ff7a2a, transparent); }
/* a painted backdrop (client/events/<id>.webp): dark bands keep the name on top and the countdown at the bottom readable */
.ev-stage.has-art { background: linear-gradient(180deg, rgba(14,5,4,.85) 0%, rgba(14,5,4,.45) 17%, rgba(14,5,4,0) 32%, rgba(14,5,4,0) 50%, rgba(14,5,4,.55) 66%, rgba(14,5,4,.92) 84%, #140605 100%),
    var(--art) center 28% / cover no-repeat, #140605; }
.ev-stage.has-art::before { display: none; }
.ev-stage.has-art::after { opacity: .4; }
.ev-info-art { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 35%; border-radius: 12px; border: 1px solid rgba(240,190,90,.55); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
@keyframes evEmbers { from { transform: translateY(0); } to { transform: translateY(-40%); } }
.ev-art { position: absolute; left: 0; right: 0; top: 16%; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.ev-art span { font-size: min(52vw, 230px); line-height: 1; filter: drop-shadow(0 18px 24px rgba(0,0,0,.7)) drop-shadow(0 0 40px color-mix(in srgb, var(--ec) 70%, transparent)); animation: evFloat 5s ease-in-out infinite; }
.ev-art .ico { width: 1em; height: 1em; }
@keyframes evFloat { 50% { transform: translateY(-10px) scale(1.02); } }
.ev-top { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 12px 12px 0; }
.ev-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-name h2 { margin: 0; min-width: 0; font: 900 25px/1.1 system-ui; color: var(--pn-gold); letter-spacing: .01em; text-shadow: 0 2px 0 #3a1a04, 0 0 12px rgba(0,0,0,.7); overflow-wrap: anywhere; }
.ev-i { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border-radius: 8px; display: grid; place-items: center; font: italic 900 18px/1 Georgia, 'Times New Roman', serif;
  color: #2a1404; background: linear-gradient(#ffe7a8, #e0a83a); border: 2px solid #6a3a0e; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.ev-i:active { transform: translateY(1px); }
.ev-top p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: #fbeedc; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); }
.ev-side { display: grid; gap: 10px; justify-items: center; }
.ev-sbtn { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff; font: 800 11.5px/1.1 system-ui; text-shadow: 0 1px 3px #000; }
.ev-sbtn > span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 40% 30%, #4a2a20, #1c0c0a);
  border: 2px solid rgba(240,190,90,.7); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.ev-sbtn .ico { width: 28px; height: 28px; }
.ev-main { margin-top: auto; display: grid; justify-items: center; gap: 6px; padding: 0 16px 18px; text-align: center; }
.ev-type { font: 800 10.5px/1 system-ui; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55);
  border: 1px solid color-mix(in srgb, var(--ec) 60%, #ffd27a); color: #ffe2a8; }
.ev-sub { font-size: 14.5px; font-weight: 700; color: #ffe9c4; text-shadow: 0 1px 3px #000; }
.ev-cdl { margin-top: 2px; font: 800 14px/1 system-ui; color: var(--pn-gold); text-shadow: 0 1px 3px #000; }
.ev-cdl::first-letter { text-transform: uppercase; }
.ev-cd { font: 900 34px/1 system-ui; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .02em; text-shadow: 0 3px 0 #2a0a06, 0 0 14px rgba(0,0,0,.8); }
.ev-prog { width: min(100%, 330px); display: grid; gap: 6px; padding: 9px 12px; border-radius: 12px; background: rgba(10,4,4,.72); border: 1px solid rgba(240,190,90,.35); }
.ev-prog > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: #e8d6bc; }
.ev-prog > div b { font-size: 16px; color: var(--pn-gold); }
.ev-prog .pn-bar { margin: 0; }
.ev-stamp { margin: 4px 0; font-size: 14px; padding: 3px 10px; }
.ev-go { min-width: 190px; margin-top: 4px; padding: 12px 24px; border-radius: 14px; font: 900 19px/1 system-ui; letter-spacing: .02em; color: #2a1404;
  background: linear-gradient(#ffe7a0, #f0b43c 55%, #c8811e); border: 2px solid #6a3a0e; box-shadow: 0 4px 0 #5a2a08, 0 6px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.ev-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a2a08, 0 3px 8px rgba(0,0,0,.5); }
.ev-go.view { color: #f6e6c8; background: linear-gradient(#5a3a2a, #2e1a12); border-color: rgba(240,190,90,.5); box-shadow: 0 4px 0 #120806, 0 6px 14px rgba(0,0,0,.55); }
.ev-empty { margin: auto; padding: 40px 20px; text-align: center; color: #e8d6bc; }

/* bottom strip: back arrow + one tab per event (the chosen one is gold) */
.ev-bar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: stretch; padding-bottom: var(--safe-bottom);
  background: linear-gradient(#5a2a14, #2e140a); border-top: 2px solid #c8812e; box-shadow: 0 -4px 12px rgba(0,0,0,.5); }
.ev-back { flex: 0 0 54px; padding: 0; border: 0; border-radius: 0; border-right: 1px solid rgba(0,0,0,.45); background: linear-gradient(#6a3418, #3a1a0c); color: #ffe7a8; font: 900 34px/1 system-ui; text-shadow: 0 2px 0 #000; }
.ev-tabs { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.ev-tabs::-webkit-scrollbar { display: none; }
.ev-tab { --ec: #a8402c; position: relative; flex: 0 0 82px; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; padding: 6px 3px 5px;
  border: 0; border-radius: 0; border-right: 1px solid rgba(0,0,0,.4); background: none; color: #fbeedc; scroll-snap-align: center; }
.ev-tab .ic { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.ev-tab .ic .ico { width: 34px; height: 34px; }
.ev-tab b { font: 800 11px/1.1 system-ui; text-shadow: 0 1px 2px #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-tab.on { background: linear-gradient(#ffe08a, #f0b43c 60%, #d08a24); box-shadow: inset 0 0 0 2px #fff3c8; }
.ev-tab.on b { color: #2a1404; text-shadow: none; }
.ev-tab.done:not(.on) { filter: saturate(.5) brightness(.8); }
.ev-dot { position: absolute; top: 4px; right: 8px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 900 10px/1 system-ui; color: #fff;
  background: linear-gradient(#ff6a5c, #c8392e); border: 2px solid #fff; box-shadow: 0 0 6px rgba(255,60,40,.8); animation: evDot 1.6s ease-in-out infinite; }
@keyframes evDot { 50% { transform: scale(1.2); } }

/* the info sheet of one event (the "i") */
.ev-info { display: grid; gap: 12px; }
.ev-info-what { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text, #f2e8d8); }
.ev-info-sec h3 { margin: 0 0 6px; font: 900 13px/1.1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--pn-gold); }
.ev-info-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.38; }
.ev-info .ev-go { justify-self: center; }
@media (max-height: 700px) { .ev-stage { min-height: 260px; } }
/* the art is a header now: its icon (events without a picture) is smaller, the countdown sits on one line */
.ev-art { top: 22%; } .ev-art span { font-size: min(30vw, 130px); }
.ev-main { padding: 0 16px 12px; gap: 4px; }
.ev-cdl { font-size: 13px; } .ev-cdl .ev-cd { font-size: 20px; margin-left: 4px; }
/* the event's own screen, embedded under the art (its title bar is left out) */
.ev-body { position: relative; flex: 1; padding: 12px 12px 16px; background: linear-gradient(#140605, #1c0c08 40%, #160806); }
.ev-body > .pn-tabs:first-child, .ev-body > :first-child { margin-top: 0; }
.ev-need { display: grid; justify-items: center; gap: 10px; padding: 24px 0; color: #e8d6bc; text-align: center; }
.ev-need p { margin: 0; }
/* footers that stick to the bottom inside an event's screen sit just above the tab strip (76px tabs + 2px border) */
.ev-root { --ev-bar-h: calc(78px + var(--safe-bottom)); }
.ev-body .pn-bottom, .ev-body .tk-foot, .ev-body .nw-tabs, .ev-body .pn-me-pin { bottom: var(--ev-bar-h); padding-bottom: 8px; }
/* the Survivor Pass track header sticks under the Events page top (it has no title bar there) */
.ev-body .sp-track-head { top: -12px; }

/* ---------- HUD: the Abomination takes the Events slot ---------- */
.hud-ic.bs-hud-abom .emo { border-radius: 50%; background: radial-gradient(circle, rgba(255,70,40,.55), rgba(255,70,40,0) 70%); animation: bsHud 1.2s ease-in-out infinite; }
.hud-ic.bs-hud-abom b { color: #ffd0c4; }
@keyframes bsHud { 50% { transform: scale(1.14); filter: drop-shadow(0 0 8px rgba(255,80,40,.9)); } }

@media (max-height: 640px) { .bs-stage { height: 210px; } .bs-u b { display: none; } }