.hero-attack { position:absolute; z-index:70; width:68px; height:42px; pointer-events:none; border-radius:50%; }
.fire-slash { background:linear-gradient(90deg,transparent,#fff4a3 35%,#ff7a18 62%,#ff2817); box-shadow:0 0 22px #ff5a1f; clip-path:polygon(0 45%,72% 0,100% 45%,72% 100%); }
.moon-orb { width:42px; height:42px; background:radial-gradient(circle,#fff,#8ff5ff 30%,#7964ff 65%,transparent 72%); box-shadow:0 0 24px #a5eeff; }
.star-blade { background:linear-gradient(90deg,transparent,#fff 35%,#6ff2ff 52%,#a64cff 76%,transparent); box-shadow:0 0 20px #8defff; clip-path:polygon(0 43%,70% 0,100% 50%,70% 100%); }
.attack-left { transform:scaleX(-1); }
.attack-impact { opacity:0; transform:scale(2); transition:.12s; }
.player.hero-attacking { filter:brightness(1.4) drop-shadow(0 0 12px #fff); }
.damage-number { position:absolute; z-index:90; color:#fff; font-size:1.3rem; font-weight:900; text-shadow:0 2px 4px #000,0 0 8px #ff4c82; pointer-events:none; animation:damageRise .8s forwards; }
.damage-number.critical { color:#ffe95c; font-size:1.65rem; }
.mob-hit { filter:brightness(3) saturate(.3)!important; }
.mob-alert { filter:drop-shadow(0 0 13px #ff425d) brightness(1.12)!important; }
.combat-mob-death { animation:combatMobDeath .5s forwards!important; }
.checkpoint-shrine { position:absolute; z-index:43; width:95px; height:130px; display:flex; flex-direction:column; align-items:center; color:#c9eaff; filter:grayscale(.7) brightness(.65); transition:.45s; }
.shrine-crystal { width:58px; height:84px; border:3px solid #a7dfff; clip-path:polygon(50% 0,90% 25%,76% 83%,50% 100%,24% 83%,10% 25%); background:linear-gradient(135deg,#eefcff,#69aaff 45%,#4c238d); box-shadow:0 0 20px #7eeaff; }
.checkpoint-shrine small { padding:3px 7px; border-radius:7px; background:rgba(9,8,35,.75); }
.checkpoint-shrine.activated { filter:none; animation:shrinePulse 1.6s infinite alternate; }
.checkpoint-hint { position:fixed; left:50%; bottom:175px; z-index:900; transform:translateX(-50%); padding:9px 16px; color:white; border:1px solid #79eaff; border-radius:11px; background:rgba(9,8,35,.9); }
.combat-hint { position:fixed; left:18px; bottom:18px; z-index:700; padding:7px 11px; color:#d9f7ff; border:1px solid rgba(140,225,255,.35); border-radius:9px; background:rgba(8,6,30,.72); font-size:.72rem; pointer-events:none; }
.pause-panel,.world-map-panel,.dialogue-panel { position:fixed; inset:0; z-index:18000; display:none; align-items:center; justify-content:center; background:rgba(4,3,16,.82); backdrop-filter:blur(12px); }
.pause-panel.open,.world-map-panel.open,.dialogue-panel.open { display:flex; }
.pause-window,.map-window { width:min(700px,92vw); padding:28px; color:white; text-align:center; border:1px solid #a68cff; border-radius:22px; background:linear-gradient(145deg,#171033,#193b59); box-shadow:0 0 45px #5b3ca166; }
.pause-actions { display:flex; flex-direction:column; gap:10px; max-width:320px; margin:20px auto 0; }
.pause-actions button,.map-window button,.dialogue-window button { padding:12px 18px; color:white; border:1px solid #9fddff; border-radius:12px; background:#5938a6; cursor:pointer; }
.world-map { position:relative; height:170px; margin:25px 0; overflow:hidden; border:2px solid #9dceff; border-radius:18px; background:linear-gradient(90deg,#326740 0 20%,#bd873d 20% 40%,#89cce8 40% 60%,#bb3928 60% 80%,#6551a3 80%); }
.map-biomes { display:grid; grid-template-columns:repeat(5,1fr); height:100%; align-items:end; color:white; font-size:.72rem; text-shadow:0 2px 4px #000; }
.map-biomes span { padding-bottom:12px; }
.map-marker { position:absolute; top:35px; width:18px; height:18px; border-radius:50%; transform:translateX(-50%); }
#map-player-marker { background:#fff; box-shadow:0 0 15px 6px #62e8ff; }
#map-checkpoint-marker { top:72px; background:#ffd95c; box-shadow:0 0 12px #ffd95c; }
.dialogue-panel { align-items:flex-end; padding-bottom:55px; background:rgba(3,2,14,.3); backdrop-filter:none; }
.dialogue-window { width:min(820px,92vw); padding:22px; color:white; border:2px solid #a9eaff; border-radius:20px; background:linear-gradient(120deg,rgba(19,12,51,.97),rgba(24,66,91,.97)); box-shadow:0 0 35px #7448c888; }
.dialogue-speaker { color:#ffe479; font-size:1.3rem; font-weight:900; }
.dialogue-text { min-height:52px; margin:10px 0 16px; font-size:1.05rem; line-height:1.5; }
@keyframes damageRise { to{transform:translateY(-70px) scale(1.2);opacity:0} }
@keyframes combatMobDeath { to{transform:scale(0) rotate(180deg);opacity:0} }
@keyframes shrinePulse { to{filter:brightness(1.4) drop-shadow(0 0 20px #7eeaff)} }