.battle-board-wrap[data-sunmoon-stage]:not([data-sunmoon-stage=""]) { isolation: isolate; }
.sunmoon-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 9% 22%, #ed691624, transparent 42%), radial-gradient(ellipse at 90% 18%, #719dde28, transparent 42%), linear-gradient(115deg, #29170b35, #0e182b35); }
.sunmoon-orb { position: absolute; width: clamp(74px, 15vw, 200px); aspect-ratio: 1; border-radius: 50%; top: 8%; opacity: .4; animation: sunmoon-orbit-glow 7s ease-in-out infinite alternate; }
.sunmoon-orb.sun { left: -4%; border: 2px solid #f6b4678c; box-shadow: 0 0 38px #fa782936, inset 0 0 32px #fd8a252a; background: radial-gradient(circle, #ef883415, #c944261a); }
.sunmoon-orb.moon { right: -4%; border: 1px solid #b1d4f670; box-shadow: inset 22px 0 0 #badbf22e, 0 0 46px #739dde24; animation-delay: -3s; }
.sunmoon-stage-horizon { position: absolute; inset: auto -15% -10%; height: 38%; border-radius: 50%; border-top: 1px solid #beb1a93b; box-shadow: 0 -15px 70px #ad866b12; }
[data-sunmoon-stage="2"] .sunmoon-atmosphere { filter: saturate(1.3); }
[data-sunmoon-stage="3"] .sunmoon-atmosphere { background: radial-gradient(ellipse at 8% 25%, #ed441c40, transparent 50%), radial-gradient(ellipse at 90% 20%, #486cad35, transparent 40%); }
[data-sunmoon-stage="3"] .sunmoon-orb.sun { border-style: dashed; animation-duration: 3s; }
.sunmoon-floor { position: absolute; pointer-events: none; z-index: 6; }
.sunmoon-floor svg { width: 100%; height: 100%; overflow: visible; }
.sunmoon-floor-rain { fill: #d7782820; stroke: #e7a05190; stroke-width: .035; stroke-dasharray: .12 .08; }
.sunmoon-floor-siege { fill: #ea55241d; stroke: #ffb26ddd; stroke-width: .06; animation: sunmoon-danger-pulse .8s ease-in-out infinite alternate; }
.sunmoon-floor-broken { fill: #09080990; stroke: #d84b2cc0; stroke-width: .05; }
.sunmoon-crack { fill: none; stroke: #fa5d3599; stroke-width: .035; }
.sunmoon-player-mark circle { fill: #151e2af2; stroke: #e4d0a0; stroke-width: .025; }
.sunmoon-player-mark text { fill: #f5e7ca; font: .16px system-ui, sans-serif; font-weight: 700; }
.sunmoon-stage-panel { position: absolute; left: 12px; top: 12px; width: min(226px, 27%); padding: 10px 12px; border: 1px solid #bea17d55; border-radius: 9px; background: linear-gradient(105deg,#251a13ed,#142132ed); box-shadow: 0 4px 18px #0005; color: #ecdccb; pointer-events: none; font-size: 11px; }
.sunmoon-stage-heading { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.sunmoon-stage-heading b { font-size: 12px; letter-spacing: .08em; }
.sunmoon-stage-heading span { color: #ceb99d; white-space: nowrap; }
.sunmoon-health-pair { display: grid; gap: 5px; }
.sunmoon-health > span { display: flex; justify-content: space-between; }
.sunmoon-health > i { display: block; height: 4px; position: relative; background: #ffffff15; margin-top: 3px; border-radius: 2px; overflow: hidden; }
.sunmoon-health em { display: block; height: 100%; background: #e89656; transition: width .15s linear; }
.sunmoon-health.moon em { background: #92bbdf; }
.sunmoon-health s { position: absolute; top: 0; bottom: 0; width: 1px; background: #fce8c6; }
.sunmoon-health .threshold-80 { left: 80%; } .sunmoon-health .threshold-40 { left: 40%; }
.sunmoon-puzzle-hint, .sunmoon-revive { display: block; font-size: 10px; line-height: 1.5; margin-top: 7px; color: #d3c4b1; }
.sunmoon-revive { color: #b6d9f9; }
.sunmoon-warning.active { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin-top: 7px; color: #ffc19a; }
.sunmoon-warning i { grid-column: 1 / -1; height: 3px; background: linear-gradient(to right,#ee9862 var(--warning-fill),#ffffff18 var(--warning-fill)); }
.sunmoon-stage-panel[data-phase="3"] { border-color: #c76b53a0; }
@keyframes sunmoon-orbit-glow { from { opacity: .24; transform: scale(.95); } to { opacity: .5; transform: scale(1.05); } }
@keyframes sunmoon-danger-pulse { from { fill-opacity: .45; stroke-opacity: .6; } to { fill-opacity: 1; stroke-opacity: 1; } }
.app.device-mobile .sunmoon-stage-panel { top: 4px; left: 5px; width: 150px; max-width: 30%; padding: 5px 6px; font-size: 9px; }
.app.device-mobile .sunmoon-stage-heading { margin-bottom: 4px; gap: 3px; }
.app.device-mobile .sunmoon-stage-heading b { font-size: 10px; letter-spacing: 0; }
.app.device-mobile .sunmoon-puzzle-hint { display: none; }
@media (max-width: 520px) { .sunmoon-stage-panel { width: 132px; } .sunmoon-health > span { font-size: 9px; } .sunmoon-stage-heading span { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .sunmoon-orb, .sunmoon-floor-siege { animation: none; } .sunmoon-health em { transition: none; } }