.expansion-hud {
    position: fixed;
    top: 105px;
    right: 18px;
    z-index: 800;
    width: 270px;
    padding: 12px;
    color: #fff;
    border: 1px solid rgba(151, 232, 255, .65);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(19, 12, 53, .9), rgba(24, 65, 92, .82));
    box-shadow: 0 0 25px rgba(112, 216, 255, .25);
    backdrop-filter: blur(10px);
}
.expansion-topline { display: flex; align-items: center; justify-content: space-between; font-size: .84rem; }
.expansion-topline button { border: 0; border-radius: 8px; padding: 5px 9px; color: white; background: #6d4ad8; cursor: pointer; }
.expansion-xp { height: 5px; margin: 8px 0; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.15); }
#expansion-xp-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #71efff, #bd71ff); }
#quest-current { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; }
#quest-current span { color: #cfefff; }
.expansion-interact-hint { position: fixed; left: 50%; bottom: 135px; z-index: 900; transform: translateX(-50%); padding: 9px 16px; color: white; border: 1px solid #8cefff; border-radius: 12px; background: rgba(15,8,42,.9); box-shadow: 0 0 18px #785cff; }
.progress-panel { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5,3,20,.78); backdrop-filter: blur(12px); }
.progress-panel.open { display: flex; }
.progress-window { width: min(900px, 96vw); max-height: 88vh; overflow: auto; padding: 25px; color: white; border: 1px solid #ad8cff; border-radius: 24px; background: linear-gradient(145deg,#161034,#1b3154); box-shadow: 0 0 55px rgba(132,94,255,.45); }
.progress-header { display:flex; align-items:center; justify-content:space-between; }
.progress-header button { width:38px; height:38px; border:0; border-radius:50%; color:white; background:#6339aa; font-size:1.4rem; cursor:pointer; }
.progress-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.progress-section { padding:16px; border-radius:16px; background:rgba(255,255,255,.06); }
.skill-button,.artifact { width:100%; display:flex; align-items:center; justify-content:space-between; margin:7px 0; padding:11px; color:white; border:1px solid rgba(154,224,255,.3); border-radius:12px; background:rgba(21,13,58,.8); cursor:pointer; }
.skill-button:disabled { opacity:.5; cursor:not-allowed; }
.artifact { justify-content:flex-start; gap:12px; text-align:left; font-size:1.4rem; }
.artifact span { display:flex; flex-direction:column; font-size:.9rem; }
.artifact small { color:#99eaff; }
.artifact.equipped { border-color:#ffd86a; box-shadow:0 0 14px rgba(255,216,106,.35); }
.equipment-slots { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px; }
.equipment-slot { display:flex; flex-direction:column; min-height:54px; padding:8px; border:1px dashed rgba(151,224,255,.4); border-radius:10px; background:rgba(5,8,30,.35); }
.equipment-slot small { color:#8ddff5; }
.equipment-slot strong { margin-top:3px; font-size:.75rem; }
.empty-state { color:#9eb5cb; font-size:.85rem; }
.expansion-toast { position:fixed; top:25px; left:50%; z-index:15000; display:flex; flex-direction:column; min-width:320px; padding:14px 22px; color:white; text-align:center; border:1px solid #bcefff; border-radius:15px; background:linear-gradient(120deg,#352074,#13617b); box-shadow:0 0 30px rgba(119,226,255,.55); transform:translate(-50%,-150%); transition:.35s ease; }
.expansion-toast.show { transform:translate(-50%,0); }
.expansion-toast span { margin-top:3px; color:#cef5ff; font-size:.82rem; }
.story-spirit { position:absolute; z-index:46; width:75px; text-align:center; color:#d9fbff; filter:drop-shadow(0 0 13px #65eaff); animation:spiritFloat 2s ease-in-out infinite; }
.story-spirit span { display:block; font-size:4rem; }
.story-spirit small { white-space:nowrap; }
.secret-chest { position:absolute; z-index:44; width:64px; height:48px; display:grid; place-items:center; color:#fff3a3; font-size:2.2rem; border:3px solid #845d19; border-radius:10px 10px 5px 5px; background:linear-gradient(#e8ad3b 0 45%,#72410e 48%); box-shadow:0 0 18px #ffd565; }
.secret-chest.opened { opacity:.28; transform:rotateX(45deg); box-shadow:none; }
.sky-island { position:absolute; z-index:39; width:420px; height:95px; border-radius:50% 50% 35% 35%; background:linear-gradient(#b9fbff 0 12%,#7695e2 14% 33%,#5b3c99 35% 64%,transparent 66%); filter:drop-shadow(0 18px 16px rgba(107,76,176,.4)); }
.expansion-boss { position:absolute; z-index:47; width:190px; height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; border-radius:48%; filter:drop-shadow(0 0 24px #a264ff); animation:bossHover 2s ease-in-out infinite; transition:left .08s linear,filter .2s; }
.boss-sprite { position:absolute; inset:0; z-index:2; background-position:center; background-repeat:no-repeat; background-size:contain; transition:transform .18s; }
.facing-right .boss-sprite { transform:scaleX(-1); }
.boss-core { position:absolute; left:50%; top:52%; z-index:1; width:90px; height:90px; border-radius:50%; background:radial-gradient(circle,#fff 0 4%,#9b7cff 15%,rgba(71,28,130,.45) 48%,transparent 72%); transform:translate(-50%,-50%); animation:bossCore 1.1s infinite alternate; }
.boss-ancient .boss-sprite { background-image:url('magic_wall.png'); filter:sepia(.45) hue-rotate(62deg) saturate(1.4) drop-shadow(0 0 15px #73e06f); }
.boss-ancient::before,.boss-ancient::after { content:''; position:absolute; z-index:3; top:18px; width:62px; height:22px; border-radius:80% 10%; background:linear-gradient(90deg,#426b2a,#a5d868); }
.boss-ancient::before { left:-12px; transform:rotate(-34deg); }
.boss-ancient::after { right:-12px; transform:scaleX(-1) rotate(-34deg); }
.boss-scorpion .boss-sprite { background-image:url('scorpion.png'); filter:saturate(1.6) contrast(1.15) drop-shadow(0 0 17px #ff9d3d); }
.boss-scorpion::after { content:'♛'; position:absolute; z-index:4; top:-25px; color:#ffd45c; font-size:3.1rem; text-shadow:0 0 12px #ff7a00; }
.boss-ice .boss-sprite { background-image:url('evil_mages.png'); filter:hue-rotate(145deg) saturate(1.8) brightness(1.3) drop-shadow(0 0 19px #8ef5ff); transform:scale(1.2); }
.boss-ice::before { content:''; position:absolute; z-index:4; inset:-10px; background:linear-gradient(135deg,transparent 30%,rgba(205,251,255,.75) 31% 34%,transparent 35% 58%,rgba(125,224,255,.55) 59% 62%,transparent 63%); clip-path:polygon(50% 0,63% 25%,94% 15%,79% 45%,100% 66%,68% 70%,60% 100%,42% 75%,8% 92%,21% 54%,0 31%,37% 27%); pointer-events:none; }
.boss-fire .boss-sprite { background-image:url('scorpion.png'); filter:hue-rotate(315deg) saturate(2.2) brightness(1.15) drop-shadow(0 0 22px #ff351f); transform:scale(1.15) rotate(-7deg); }
.boss-fire .boss-core { background:radial-gradient(circle,#fff 0 4%,#ffd43d 12%,#ff3218 40%,transparent 72%); }
.world-boss-name { position:absolute; top:-28px; width:260px; text-align:center; font-size:.72rem; font-weight:800; text-shadow:0 2px 5px #000; }
.boss-star-eater { width:300px; height:300px; border-radius:50%; background:radial-gradient(circle at 42% 40%,#fff 0 2%,#8b5ed9 3% 8%,#0a0719 35%,#000 70%); box-shadow:inset 0 0 35px #9c66ff,0 0 50px #5935ad; }
.boss-star-eater .boss-sprite { inset:35px; background-image:url('magic_sphere.png'); filter:hue-rotate(35deg) saturate(1.7) brightness(.65) drop-shadow(0 0 24px #a56bff); animation:starEaterSpin 9s linear infinite; }
.boss-star-eater .boss-core { width:170px; height:170px; background:radial-gradient(circle,#000 0 20%,#8b5ed9 26%,rgba(31,8,59,.7) 48%,transparent 70%); }
.expansion-boss.engaged { filter:brightness(1.12) drop-shadow(0 0 32px #c394ff); animation-duration:1.15s; }
.boss-hit { filter:brightness(3) drop-shadow(0 0 35px #fff); }
.expansion-boss-death { animation:bossDeath .9s forwards; }
.boss-projectile { position:absolute; z-index:55; width:34px; height:34px; pointer-events:none; border:2px solid #fff; border-radius:50%; background:radial-gradient(circle,#fff 0 8%,#c172ff 30%,#4b1885 68%); box-shadow:0 0 18px #cb83ff,0 0 38px #7134e8; transition:left .82s linear,top .82s linear,transform .82s linear; }
.boss-attack-warning { position:absolute; z-index:42; width:90px; height:24px; border:3px solid #ffdc65; border-radius:50%; background:rgba(255,62,45,.18); box-shadow:0 0 20px #ff4d2e,inset 0 0 14px #ffcc4d; animation:warningPulse .32s infinite alternate; }
.boss-attack-warning.warning-fire { transform:scale(1.5); opacity:0; transition:.26s; }
.expansion-boss.boss-phase-two { filter:saturate(1.45) drop-shadow(0 0 34px #ff8a45); }
.expansion-boss.boss-phase-three { filter:brightness(1.3) saturate(1.8) drop-shadow(0 0 42px #ff365f); animation-duration:.7s; }
.boss-ancient-projectile { background:radial-gradient(circle,#f6ffbe,#62a83f 45%,#223b18); box-shadow:0 0 20px #88e565; }
.boss-scorpion-projectile { background:radial-gradient(circle,#fff4a3,#ff7b24 45%,#6a180d); box-shadow:0 0 20px #ff7b24; }
.boss-ice-projectile { background:radial-gradient(circle,#fff,#76eaff 48%,#315bb2); box-shadow:0 0 22px #8df3ff; }
.boss-fire-projectile { background:radial-gradient(circle,#fff7a5,#ff4b1d 45%,#5e0800); box-shadow:0 0 24px #ff2d13; }
.boss-star-eater-projectile { width:52px; height:52px; background:radial-gradient(circle,#000 20%,#bc76ff 25%,#38105b 62%); box-shadow:0 0 28px #9f5cff; }
.expansion-boss-hud {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 850;
    width: min(600px, 70vw);
    color: white;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -28px) scale(.96);
    filter: blur(3px);
    transition:
        opacity .32s ease,
        transform .42s cubic-bezier(.2, .8, .2, 1),
        filter .32s ease,
        visibility 0s linear .42s;
}

#game-screen.active .expansion-boss-hud.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    filter: blur(0);
    transition-delay: 0s;
}
.expansion-boss-name { font-weight:900; letter-spacing:2px; text-shadow:0 2px 5px #000; }
.expansion-boss-bar { height:16px; overflow:hidden; border:2px solid #e9dfff; border-radius:12px; background:#180b22; }
.expansion-boss-fill { width:100%; height:100%; transition:width .2s; background:linear-gradient(90deg,#ff334e,#be47ff); }
.live-event::after { content:''; position:fixed; inset:0; z-index:120; pointer-events:none; background:radial-gradient(circle at 50% 15%,rgba(183,126,255,.17),transparent 55%); animation:eventFlash 2s infinite alternate; }
@keyframes spiritFloat { 50%{transform:translateY(-18px)} }
@keyframes bossHover { 50%{transform:translateY(-14px) scale(1.04)} }
@keyframes bossCore { to{transform:translate(-50%,-50%) scale(1.25);opacity:.55} }
@keyframes starEaterSpin { to{transform:rotate(360deg)} }
@keyframes bossDeath { to{transform:scale(0) rotate(540deg);opacity:0} }
@keyframes eventFlash { to{opacity:.3} }
@keyframes warningPulse { to{transform:scale(1.18);background:rgba(255,42,28,.45)} }
@media(max-width:700px){.expansion-hud{width:205px;right:8px;top:90px}.progress-grid{grid-template-columns:1fr}.progress-window{padding:15px}}