/* The Amalgamation raid: the portal on the island, the lobby, the arena, the fight HUD and the raid window.
 * Palette is blood red, near black and one pale gold for everything that is safe. */

/* ---------- the portal: a black brick gate with a red vortex ---------- */
.spot.raidportal .blk { width: 76px; height: 96px; border: 0; border-radius: 2px; font-size: 0; color: transparent; animation: none;
  background: radial-gradient(ellipse at 50% 55%, #ff4a3a 0, #c4141c 34%, #5a060b 68%, #140204 100%) 50% 68% / 46px 66px no-repeat,
    linear-gradient(#0d0708 0 24%, transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255, 40, 40, .2) 6px 7px), repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 40, 40, .12) 8px 9px), #0d0708;
  box-shadow: 0 0 0 2px #2a0d11, 0 5px 0 3px #3b0f14, 0 0 26px 4px rgba(255, 23, 68, .5); }
.spot.raidportal .blk::after { content: ""; position: absolute; left: 15px; top: 31px; width: 46px; height: 66px; border-radius: 45% 45% 4px 4px; background: conic-gradient(from 0deg, transparent, rgba(255, 150, 110, .5), transparent 35%, rgba(255, 60, 40, .4), transparent 70%); animation: spin 3.4s linear infinite; }
.spot.raidportal .nametag { color: #ff8a80; }

/* ---------- scenes (the lobby island and the arena island fill the screen, like the Sanctuary) ---------- */
#raidscene { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; }
body.in-lobby #raidscene, body.in-arena #raidscene { display: block; }
#raidscene .rsky { position: absolute; inset: 0; }
#raidscene.lobby .rsky { background: radial-gradient(ellipse at 50% 30%, #3a0a10 0%, #1c0508 45%, #0a0203 100%); }
#raidscene.arena .rsky { background: radial-gradient(ellipse at 50% 18%, #5a0c14 0%, #2a060b 40%, #0c0204 85%); }
#raidscene .rmoon { position: absolute; left: 50%; top: 4%; width: min(26vw, 280px); aspect-ratio: 1; margin-left: calc(min(26vw, 280px) / -2); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #ffb199, #d8322c 55%, #7d0f16 100%); box-shadow: 0 0 80px 20px rgba(220, 40, 40, .35); opacity: .85; }
#raidscene .rplate { position: absolute; left: 6%; right: 6%; top: 26%; bottom: 5%; border-radius: 14px; background: linear-gradient(#150507, #0d0305); box-shadow: 0 0 0 4px #28090e, 0 0 0 7px #0a0203, 0 0 60px rgba(220, 30, 40, .25); }
#raidscene.arena .rplate { top: 30%; background: radial-gradient(ellipse at 50% 50%, #260709 0%, #120406 70%); }
#raidscene .rplate::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 28px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 28px); }

/* lobby pad */
.raidpad { position: absolute; transform: translate(-50%, -50%); border: 3px solid #ffd54f; border-radius: 6px; background: rgba(255, 213, 79, .08); box-shadow: 0 0 24px rgba(255, 213, 79, .35), inset 0 0 22px rgba(255, 213, 79, .15); transition: background .3s, box-shadow .3s; }
.raidpad.on { background: rgba(255, 213, 79, .22); box-shadow: 0 0 40px rgba(255, 213, 79, .6), inset 0 0 30px rgba(255, 213, 79, .3); }
.raidpad::after { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); text-align: center; font: 700 13px var(--head); letter-spacing: .06em; color: #ffd54f; text-shadow: 0 1px 2px #000; }

/* ---------- the boss, built from the same figure as the players ---------- */
.boss { --skin: #f4e4d6; --hair: #a30f20; --shirt: #14100f; --pants: #241418; --shoe: #f4e4d6; position: absolute; width: 22px; height: 30px; transform: translate(-50%, -50%) scale(3.7); transform-origin: 50% 100%; pointer-events: none; }
.boss .fig { transform: scale(1.5); filter: none; }
.boss .fig .arm { background: linear-gradient(#ece7e3 0 62%, var(--skin) 62%); }
.boss .fig .leg { background: linear-gradient(var(--pants) 0 72%, var(--skin) 72%); }
.boss > i { position: absolute; display: block; }
.boss .bhair { z-index: 0; left: 1px; top: -17px; width: 20px; height: 33px; border-radius: 9px 9px 7px 7px; background: linear-gradient(#b3122a, #6d0914); }
.boss .bbangs { z-index: 6; left: 3.5px; top: -16px; width: 15px; height: 6px; border-radius: 5px 5px 0 4px; background: #a30f20; clip-path: polygon(0 0, 100% 0, 100% 40%, 80% 100%, 60% 45%, 40% 100%, 20% 45%, 0 90%); }
.boss .bhorn { z-index: 7; left: 12px; top: -22px; width: 3px; height: 6px; background: #ff3b3b; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 2px #ff1744); }
.boss .bbelt { z-index: 5; left: 3.5px; top: 12px; width: 15px; height: 2.5px; background: linear-gradient(90deg, #ece7e3 0 12%, #14100f 12% 88%, #ece7e3 88%); }
.boss .brope { z-index: 5; left: 3px; top: 1px; width: 17px; height: 2px; background: #b3122a; transform: rotate(38deg); transform-origin: 0 0; box-shadow: 0 0 0 .5px #5a0810; }
.boss .brope.b { transform: rotate(-38deg); left: 3px; top: 13px; }
.boss .brib { z-index: 4; top: 14px; width: 2px; height: 16px; background: #b3122a; transform-origin: 50% 0; animation: ribbon 2.6s ease-in-out infinite; }
.boss .brib.l { left: 5px; } .boss .brib.r { left: 15px; background: #ece7e3; animation-delay: -1.3s; }
@keyframes ribbon { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
.boss .bwing { z-index: -1; top: -34px; width: 70px; height: 74px; background: linear-gradient(115deg, #0b0305 0 22%, #6d0914 48%, #c7211b 72%, #e2a400 100%); clip-path: polygon(100% 50%, 82% 30%, 90% 10%, 66% 20%, 58% 0, 42% 18%, 26% 12%, 34% 34%, 8% 40%, 30% 56%, 4% 72%, 36% 74%, 30% 100%, 56% 82%, 74% 96%, 78% 72%, 100% 62%); animation: wingbeat 5.5s ease-in-out infinite; }
.boss .bwing.l { right: 18px; transform-origin: 100% 60%; }
.boss .bwing.r { left: 18px; transform: scaleX(-1); transform-origin: 0 60%; animation-name: wingbeat-r; }
@keyframes wingbeat { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes wingbeat-r { 0%, 100% { transform: scaleX(-1) rotate(-3deg); } 50% { transform: scaleX(-1) rotate(4deg); } }
.boss .bring { z-index: -2; left: -44px; top: -44px; width: 110px; height: 110px; border-radius: 50%; border: 3px dashed #1a0508; box-shadow: 0 0 0 5px rgba(0, 0, 0, .35), inset 0 0 18px #000; animation: spin 40s linear infinite; }
.boss .bstaff { z-index: 6; left: 22px; top: -20px; width: 2px; height: 52px; background: linear-gradient(#6d4a2b 0 30%, #d8a533 30% 36%, #6d4a2b 36% 80%, #b3122a 80%); }
.boss .bmoon { left: -6px; top: -7px; width: 14px; height: 14px; border-radius: 50%; box-shadow: -3px 0 0 0 #c4121f; transform: rotate(-20deg); }
.boss .borb { left: -2px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(#fff6a8, #ffb300); box-shadow: 0 0 6px 2px rgba(255, 190, 40, .9); animation: orb 2.2s ease-in-out infinite; }
@keyframes orb { 0%, 100% { opacity: .8; } 50% { opacity: 1; box-shadow: 0 0 9px 3px rgba(255, 190, 40, 1); } }
.boss.hit .fig { filter: brightness(1.7); }
.boss.stun .fig, .boss.stun .bwing { filter: grayscale(.8) brightness(.8); animation-play-state: paused; }
.boss.big { position: relative; left: auto; top: auto; display: inline-block; margin: 190px 0 4px; transform: scale(2.9); transform-origin: 50% 100%; }

/* ---------- the circles and prompts (placed in the same % space as the avatar; js moves the circles every frame) ---------- */
#raidzones { position: absolute; inset: 0; }
.rzone { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #ffd54f; background: radial-gradient(rgba(255, 213, 79, .22), rgba(255, 213, 79, .08)); box-shadow: 0 0 26px rgba(255, 213, 79, .45), inset 0 0 24px rgba(255, 213, 79, .2); }
.rzone.me { background: radial-gradient(rgba(255, 213, 79, .34), rgba(255, 213, 79, .14)); }
#raidprompts { position: absolute; inset: 0; pointer-events: none; }
.rpclick { position: absolute; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; border: 4px solid #fff3c4; background: radial-gradient(#ff5a4d, #b3121a); color: #fff; font: 800 15px var(--head); text-shadow: 0 1px 3px #000; box-shadow: 0 0 24px #ff3b2f, inset 0 0 14px rgba(0, 0, 0, .45); cursor: pointer; pointer-events: auto; z-index: 30; }
.rpclick::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(255, 243, 196, .85); animation: rpshrink var(--t, 1.4s) linear forwards; }
@keyframes rpshrink { from { transform: scale(1.5); opacity: .9; } to { transform: scale(1); opacity: .2; } }

/* ---------- fight HUD ---------- */
#raidhud { position: fixed; inset: 0; z-index: 12; pointer-events: none; display: none; font-family: var(--body, inherit); color: #f6eeee; }
body.in-lobby #raidhud, body.in-arena #raidhud { display: block; }
#raidhud .rtop { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(560px, 92vw); text-align: center; }
#raidhud .rname { font: 700 15px var(--head); letter-spacing: .04em; text-shadow: 0 1px 3px #000; }
#raidhud .rname small { margin-left: 8px; font-size: 11px; color: #ffb3a8; }
.rbar { position: relative; height: 16px; margin-top: 4px; border-radius: 3px; background: #1a0b0d; box-shadow: 0 0 0 2px #3a1218, 0 2px 8px #000; overflow: hidden; }
.rbar > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: linear-gradient(#e0382d, #8f1219); transition: width .35s; }
.rbar.meter > i { background: linear-gradient(#ffd54f, #d98b00); }
.rbar.me > i { background: linear-gradient(#5fd37a, #2a8a43); }
.rbar.me.low > i { background: linear-gradient(#ff6b5a, #b3121a); }
.rbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 11px var(--head); text-shadow: 0 1px 2px #000; }
#raidhud .rmeter { margin-top: 6px; width: 70%; margin-left: auto; margin-right: auto; }
#raidhud .rmeter .rbar { height: 10px; }
#raidhud .rstate { margin-top: 8px; min-height: 22px; font: 800 18px var(--head); letter-spacing: .08em; text-shadow: 0 2px 6px #000; }
#raidhud .rstate.burst { color: #ffd54f; animation: burstflash .6s ease-in-out infinite alternate; }
#raidhud .rstate.warn { color: #ff8a80; }
@keyframes burstflash { to { text-shadow: 0 0 18px #ffb300, 0 2px 6px #000; } }
#raidhud .rme { position: absolute; left: 12px; bottom: 150px; width: 200px; }
#raidhud .rme .lbl { font: 700 11px var(--head); margin-bottom: 2px; text-shadow: 0 1px 2px #000; }
#raidhud .rlist { position: absolute; right: 12px; top: 80px; width: 190px; font-size: 12px; background: rgba(12, 3, 5, .72); border: 1px solid #3a1218; border-radius: 6px; padding: 6px 8px; }
#raidhud .rlist .row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
#raidhud .rlist .dead { opacity: .45; text-decoration: line-through; }
#raidhud .rbtns { position: absolute; left: 12px; top: 10px; display: flex; gap: 6px; pointer-events: auto; }
#raidhud .rbtns .btn { pointer-events: auto; }
#raidhud .rlobby { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: min(420px, 92vw); padding: 10px 14px; text-align: center; background: rgba(12, 3, 5, .8); border: 1px solid #5a1a22; border-radius: 8px; pointer-events: auto; }
#raidhud .rlobby h3 { margin: 0 0 4px; font: 700 16px var(--head); }
#raidhud .rlobby .dim { font-size: 12px; color: #d9b8b8; }
#raidhud .rlobby .big { margin: 6px 0; font: 800 28px var(--head); color: #ffd54f; }
#raidhud .rmode { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
#raidhud .rmode .btn.on { outline: 2px solid #ffd54f; }
.rpseq { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); padding: 10px 14px; background: rgba(12, 3, 5, .88); border: 2px solid #ff5a4d; border-radius: 8px; text-align: center; pointer-events: auto; z-index: 31; }
.rpseq .t { font: 700 12px var(--head); margin-bottom: 6px; color: #ffb3a8; }
.rpseq .keys { display: flex; gap: 6px; justify-content: center; }
.rpseq .k { width: 34px; height: 38px; display: flex; align-items: center; justify-content: center; font: 800 20px var(--head); border-radius: 5px; background: #2a0d11; border: 2px solid #5a1a22; }
.rpseq .k.done { background: #2a8a43; border-color: #5fd37a; }
.rpseq .k.now { border-color: #ffd54f; box-shadow: 0 0 10px rgba(255, 213, 79, .7); }
.rpseq .tb { height: 5px; margin-top: 8px; border-radius: 3px; background: #2a0d11; overflow: hidden; }
.rpseq .tb i { display: block; height: 100%; background: #ff5a4d; transform-origin: 0 50%; animation: tbar var(--t, 6s) linear forwards; }
@keyframes tbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.rpseq .tap { display: none; gap: 10px; justify-content: center; margin-top: 8px; }
body.mobile .rpseq .tap { display: flex; }
.rpseq .tap button { width: 64px; height: 44px; font-size: 22px; border-radius: 6px; border: 2px solid #5a1a22; background: #2a0d11; color: #fff; }
#raidhud .rresult { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 92vw); max-height: 80vh; overflow: auto; padding: 16px 18px; text-align: center; background: rgba(12, 3, 5, .94); border: 2px solid #8f1219; border-radius: 10px; pointer-events: auto; box-shadow: 0 0 60px rgba(0, 0, 0, .8); }
#raidhud .rresult h2 { margin: 0 0 6px; font: 800 22px var(--head); }
#raidhud .rresult.won h2 { color: #ffd54f; }
#raidhud .rresult.lost h2 { color: #ff8a80; }
#raidhud .rresult ul { list-style: none; margin: 10px 0; padding: 0; text-align: left; font-size: 14px; }
#raidhud .rresult li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid #2a0d11; }

/* ---------- the raid window ---------- */
.win.raidwin { width: min(880px, 96vw); }
.raidwin .rgrid { display: grid; grid-template-columns: 250px 1fr; gap: 14px; }
.raidwin .rside { background: #0f0507; border: 1px solid #3a1218; border-radius: 6px; padding: 8px; max-height: 440px; overflow: auto; }
.raidwin .rside h4 { margin: 8px 0 4px; font: 700 12px var(--head); text-align: center; letter-spacing: .05em; color: #ffb3a8; }
.raidwin .rside h4:first-child { margin-top: 0; }
.raidwin .rtimer { text-align: center; font-size: 11px; color: #d9b8b8; margin-bottom: 6px; }
.raidwin .chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.raidwin .chip { min-width: 72px; padding: 4px 6px; text-align: center; font-size: 11px; line-height: 1.25; border: 1px solid #5a1a22; border-radius: 4px; background: #1a0b0d; }
.raidwin .chip b { display: block; font-size: 12px; color: #ffd54f; }
.raidwin .chip img { display: block; width: 30px; height: 30px; margin: 2px auto; object-fit: contain; }
.raidwin .chip.left { border-color: #ffd54f; }
.raidwin .rmain { position: relative; min-height: 420px; text-align: center; overflow: hidden; border-radius: 6px; background: radial-gradient(ellipse at 50% 30%, #6a0f18 0%, #2a060b 55%, #0c0204 100%); }
.raidwin .rmain h3 { position: absolute; left: 0; right: 0; top: 14px; z-index: 20; margin: 0; font: 800 26px var(--head); text-shadow: 0 2px 8px #000; }
.raidwin .rmode2 { position: absolute; left: 0; right: 0; bottom: 64px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.raidwin .rmode2 b { min-width: 90px; font: 800 24px var(--head); text-shadow: 0 2px 6px #000; }
.raidwin .rgo { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 10px; }
.raidwin .rgo .btn { flex: 1; }
.raidwin .rlock { position: absolute; left: 0; right: 0; bottom: 120px; padding: 0 20px; font-size: 13px; color: #ffb3a8; text-shadow: 0 1px 3px #000; }
@media (max-width: 720px) { .raidwin .rgrid { grid-template-columns: 1fr; } .raidwin .rside { max-height: 220px; } #raidhud .rlist { display: none; } #raidhud .rme { bottom: 190px; } }

/* ---------- the boss attack: she raises the staff, the orb swells, then the beam leaves it ---------- */
.boss .bstaff { transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, .1, .2, 1); }
.boss.charge .bstaff { transform: rotate(-26deg) translateY(-3px); transition-duration: 1.6s; }
.boss.charge .borb { animation: orbcharge 1.8s ease-in forwards; }
@keyframes orbcharge { from { transform: scale(1); } to { transform: scale(2.8); box-shadow: 0 0 12px 5px rgba(255, 240, 160, 1); } }
.boss .fig { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.boss.charge .fig { transform: scale(1.5) translateY(2px); }
.boss.fire .fig { animation: bosslunge .6s cubic-bezier(.2, .8, .3, 1); }
.boss.fire .bstaff { transform: rotate(14deg); transition-duration: .12s; }
@keyframes bosslunge { 0% { transform: scale(1.5) translateY(2px); } 25% { transform: scale(1.6) translateY(-3px); } 100% { transform: scale(1.5) translateY(0); } }
.rbeam { position: absolute; height: 18px; margin-top: -9px; transform-origin: 0 50%; pointer-events: none; z-index: 8; border-radius: 9px;
  background: linear-gradient(90deg, #fff7c2, #ffe066 40%, rgba(255, 190, 40, .85)); box-shadow: 0 0 18px 6px rgba(255, 210, 80, .75); animation: beamshot .65s ease-out forwards; }
@keyframes beamshot { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 22% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; filter: blur(3px); } }
#raidhud.hurt::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 110px 30px rgba(255, 40, 30, .55); animation: hurtfade .45s ease-out forwards; }
@keyframes hurtfade { to { opacity: 0; } }

/* ---------- the sum ---------- */
.rmath { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 33; min-width: 250px; padding: 14px 20px 12px; text-align: center; pointer-events: auto;
  background: rgba(12, 3, 5, .92); border: 2px solid #ffd54f; border-radius: 8px; box-shadow: 0 0 40px rgba(0, 0, 0, .7); }
.rmath .t { font: 700 12px var(--head); letter-spacing: .05em; color: #ffd54f; }
.rmath .sum { margin: 8px 0 10px; font: 800 34px var(--head); letter-spacing: .04em; }
.rmath .in { width: 96px; margin-right: 8px; text-align: center; font-size: 22px; }
.rmath .note { margin-top: 8px; font-size: 11px; color: #d9b8b8; }
.rmath.bad { animation: mathshake .3s; border-color: #ff5a4d; }
@keyframes mathshake { 20% { transform: translate(calc(-50% - 7px), -50%); } 60% { transform: translate(calc(-50% + 7px), -50%); } }

/* the portal on the island stays dull until the first quests open it */
.spot.raidportal.sealed .blk { filter: grayscale(1) brightness(.55); box-shadow: 0 0 0 2px #1a1415, 0 5px 0 3px #231a1c; }
.spot.raidportal.sealed .blk::after { animation: none; opacity: .25; }