/* Effects: particle layer, loot sweep, flash, slot/stack/talent feedback, achievement toast, ambient depth. Transform/opacity only. */
#fx-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.fx-coin { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: url(../assets/ui/auctionhouse-icon-coin-gold.png) center / contain no-repeat; will-change: transform, opacity; filter: drop-shadow(0 0 4px rgba(255,200,60,.8)); }
.fx-coin[hidden] { display: none; }

.fx-sweep { position: absolute; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 2px var(--c), 0 0 22px var(--c); animation: sweepbox .85s ease-out forwards; }
.fx-sweep::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, var(--c) 48%, #fff 52%, transparent 70%) -120% 0 / 220% 100% no-repeat; animation: sweepbar .7s ease-out forwards; }
.fx-sweep.q0 { --c: #9d9d9d; } .fx-sweep.q1 { --c: #ffffff; } .fx-sweep.q2 { --c: #1eff00; } .fx-sweep.q3 { --c: #0070dd; } .fx-sweep.q4 { --c: #a335ee; } .fx-sweep.q5 { --c: #ff8000; }
@keyframes sweepbox { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweepbar { to { background-position: 140% 0; } }

.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff, #ffd45a 35%, rgba(255,170,30,.6) 65%, rgba(255,170,30,0)); animation: flash 1.4s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }

/* merchant slots */
.gr-slot.lit { animation: lit 1.1s ease-out; }
@keyframes lit { 0% { box-shadow: 0 0 0 2px rgba(255,209,0,.9), 0 0 16px rgba(255,209,0,.7); } 100% { box-shadow: 0 0 0 0 rgba(255,209,0,0); } }
.gr-slot.bought { animation: bought .5s ease-out; }
@keyframes bought { 0% { background: rgba(255,209,0,.55); } 100% { background: rgba(0,0,0,.28); } }
.gr-count.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(2.2); color: var(--gold); } 100% { transform: scale(1); } }
.lasthired.in { animation: slidein .45s ease-out; }
@keyframes slidein { 0% { transform: translateX(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* tabs badge sparkle, talents */
.gr-badge.spark { animation: spark .9s ease-out; }
@keyframes spark { 0% { transform: scale(2); box-shadow: 0 0 0 0 rgba(255,230,120,.95); } 60% { box-shadow: 0 0 0 10px rgba(255,230,120,0); } 100% { transform: scale(1); } }
.gr-talent { position: relative; }
.gr-talent.learned::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255,235,140,.95), rgba(255,200,60,.4) 40%, transparent 68%); animation: burstring .6s ease-out forwards; pointer-events: none; z-index: 3; }
.gr-talent.learned .gr-count { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes burstring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }

/* gold per second shimmer */
.gps { background: linear-gradient(90deg, #e6dcc6 38%, #fff 50%, #e6dcc6 62%) 200% 0 / 260% 100% repeat-x; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gpsshine 5s linear infinite; }
@keyframes gpsshine { 0% { background-position: 200% 0; } 60%, 100% { background-position: -80% 0; } }
#gold.bump { animation: bump .25s ease-out; display: inline-block; }
@keyframes bump { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* achievement banner */
.ach-toast { position: fixed; left: 50%; top: 16px; z-index: 72; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px 18px 10px 12px;
  border: 2px solid #b18a2a; border-radius: 4px; background: linear-gradient(#2a2014, #120d07); box-shadow: 0 10px 30px rgba(0,0,0,.7), 0 0 24px rgba(255,200,60,.35); overflow: hidden; animation: achin .5s cubic-bezier(.2,1.2,.4,1); }
.ach-toast[hidden] { display: none; }
.ach-toast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) -120% 0 / 220% 100% no-repeat; animation: sweepbar 1s .5s ease-out forwards; pointer-events: none; }
.ach-toast .gr-icon { flex: none; }
.ach-toast__t { display: flex; flex-direction: column; font-family: var(--font-game); }
.ach-toast__t small { color: var(--gold-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ach-toast__t b { color: var(--gold-bright); font-size: 17px; text-shadow: var(--ink); }
.ach-toast__t span { color: #fff; font-size: 12px; }
.ach-toast.out { animation: achout .4s ease-in forwards; }
@keyframes achin { 0% { transform: translate(-50%, -140%); } 100% { transform: translate(-50%, 0); } }
@keyframes achout { to { transform: translate(-50%, -140%); opacity: 0; } }

/* milestone banner on the stage */
.stage__milestone { position: absolute; left: 50%; top: 40%; z-index: 4; transform: translate(-50%, -50%); font: 700 clamp(22px, 2.4vw, 34px) var(--font-game); color: var(--gold-bright); text-shadow: 0 0 20px rgba(255,200,60,.9), var(--ink); white-space: nowrap; pointer-events: none; animation: milestone 2.2s ease-out forwards; }
.stage__milestone[hidden] { display: none; }
@keyframes milestone { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }

/* depth: frames get a gold rim and a drop shadow; vignette over the page */
.gr-window { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 16px 44px rgba(0,0,0,.7), 0 0 30px rgba(255,180,50,.06); }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%); }

@media (prefers-reduced-motion: reduce) {
  .gr-slot.lit, .gr-slot.bought, .gr-count.pop, .lasthired.in, .gr-badge.spark, .gr-talent.learned::before, .gr-talent.learned .gr-count, .gps, #gold.bump, .ach-toast, .ach-toast::after, .stage__milestone { animation: none !important; }
  .gps { -webkit-text-fill-color: currentColor; background: none; }
}