/**
 * Magic Item Generator - front-end styles.
 *
 * Deliberately scoped under .mig / .mig-sb so nothing here leaks into the rest
 * of the theme. Colours are declared as custom properties on .mig so they can be
 * pointed at the theme's own tokens later without touching the rules below.
 */

.mig {
	--mig-ink: #000;
	--mig-muted: #000;
	--mig-card: #fffdf8;
	--mig-rule: #d9ccb2;
	--mig-tan: #f2e7d0;
	--mig-tan-rule: #c9b58e;
	--mig-badge: #5c4a2e;

	max-width: 980px;
	margin: 0 auto;
	padding: 32px 20px 72px;
	color: var(--mig-ink);
}

h1.mig__title { margin: 0 0 8px; font-size: 1.4em; font-weight: unset; }
.mig__lede { max-width: 68ch; color: #fff; margin: 0 0 26px; }
.mig__hint { color: var(--mig-muted); font-size: .9em; margin: 10px 0 0; }

/* --- mode tabs --- */

.mig__modes {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid var(--mig-rule);
	margin-bottom: 18px;
}

.mig__mode {
	background: rgba(92, 74, 46, .42);
	border: 1px solid #8f7449;
	border-bottom: 0;
	padding: 9px 18px;
	font: inherit;
	font-size: .95em;
	font-weight: 600;
	color: #f7e4bd;
	cursor: pointer;
	border-radius: 4px 4px 0 0;
	margin-bottom: -1px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mig__mode:hover {
	background: #745b34;
	border-color: #d5ac62;
	color: #fff;
}

.mig__mode.is-active {
	background: #f0c46f;
	border-color: #f0c46f;
	color: #000;
}

/* --- guided fields --- */

.mig__fields { display: flex; flex-wrap: wrap; gap: 14px; }
.mig__field { display: flex; flex-direction: column; gap: 4px; min-width: 180px; flex: 1 1 180px; }
.mig__field > span { font-size: .8em; text-transform: uppercase; letter-spacing: .07em; color: var(--mig-muted); }
.mig__field select { padding: 7px 9px; border: 1px solid var(--mig-rule); border-radius: 3px; background: var(--mig-card); font: inherit; }

/* --- actions --- */

.mig__actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 6px; }

.mig__btn {
	font: inherit;
	padding: 10px 20px;
	border: 1px solid var(--mig-rule);
	background: var(--mig-card);
	border-radius: 3px;
	cursor: pointer;
	color: var(--mig-ink);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mig__actions .mig__btn:not(:disabled):hover,
.mig__actions .mig__btn:not(:disabled):focus-visible,
.mig__actions .mig__btn:not(:disabled):active {
	background: #d8efcf;
	border-color: #f0c46f;
	color: #000;
}

.mig__btn--primary {
	background: var(--mig-badge);
	border-color: var(--mig-badge);
	color: #f6f1e6;
	font-weight: 600;
}

.mig__btn:disabled { cursor: wait; opacity: .58; }

/* --- first-page loader: present in the server-rendered HTML so visitors see
   motion immediately while the generator tables are fetched and prepared --- */

.mig__initial-loader {
	min-height: 330px;
	margin-top: 20px;
	box-sizing: border-box;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 20px;
	overflow: hidden;
	color: #fff4c9;
	text-align: center;
	background:
		radial-gradient(circle at 50% 46%, rgba(23, 92, 136, .28), transparent 25%),
		radial-gradient(circle at 46% 54%, rgba(11, 95, 60, .32), transparent 38%),
		radial-gradient(circle at 20% 25%, rgba(240, 196, 111, .5) 0 1px, transparent 2px),
		radial-gradient(circle at 78% 30%, rgba(67, 149, 188, .55) 0 1px, transparent 2px),
		radial-gradient(circle at 68% 78%, rgba(73, 173, 120, .5) 0 1px, transparent 2px),
		linear-gradient(145deg, #071a20, #082b2e 52%, #0a2338);
	background-size: auto, auto, 105px 91px, 137px 119px, 169px 147px, auto;
	border: 1px solid #8f7449;
	border-radius: 3px;
}

.mig__initial-loader-sigil {
	position: relative;
	display: grid;
	place-items: center;
	width: 82px;
	height: 82px;
	border: 1px solid rgba(240, 196, 111, .78);
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(240, 196, 111, .3) 0 8%, transparent 10% 28%, rgba(22, 111, 95, .26) 31%, transparent 58%),
		radial-gradient(circle, #124b55, #082b36 64%, #06191e);
	box-shadow:
		0 0 0 5px rgba(23, 79, 138, .1),
		0 0 23px rgba(41, 143, 174, .5),
		0 0 42px rgba(11, 95, 60, .34),
		inset 0 0 18px rgba(240, 196, 111, .22);
	animation: mig-initial-float 1.8s ease-in-out infinite !important;
}

.mig__initial-loader-sigil::before,
.mig__initial-loader-sigil::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.mig__initial-loader-sigil::before {
	inset: -11px;
	border: 2px solid rgba(240, 196, 111, .26);
	border-top-color: #f0c46f;
	border-right-color: #3f99c4;
	animation: mig-initial-spin 1.15s linear infinite !important;
}

.mig__initial-loader-sigil::after {
	inset: -19px;
	border: 1px dashed rgba(88, 190, 135, .82);
	border-left-color: #f0c46f;
	animation: mig-initial-reverse-spin 4.5s linear infinite !important;
}

.mig__initial-loader-glyph {
	color: #f0c46f;
	font-size: 34px;
	line-height: 1;
	text-shadow:
		0 0 7px rgba(240, 196, 111, .9),
		0 0 17px rgba(67, 153, 196, .75),
		0 0 27px rgba(73, 173, 120, .5);
	animation: mig-initial-pulse 1.25s ease-in-out infinite !important;
}

.mig__initial-loader-text {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	letter-spacing: .045em;
	text-shadow: 0 0 10px rgba(67, 153, 196, .6);
}

@keyframes mig-initial-spin { to { transform: rotate(360deg); } }
@keyframes mig-initial-reverse-spin { to { transform: rotate(-360deg); } }
@keyframes mig-initial-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}
@keyframes mig-initial-pulse {
	0%, 100% { opacity: .68; transform: scale(.9) rotate(0); }
	50% { opacity: 1; transform: scale(1.12) rotate(18deg); }
}

/* --- full-screen magical atmosphere deck --- */

.mig__atmosphere {
	--mig-explosion-x: 50vw;
	--mig-explosion-y: 40vh;
	position: fixed;
	inset: 0;
	z-index: 2147482500;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
	will-change: opacity;
	animation: mig-atmosphere-life 2s ease-out both !important;
}

@keyframes mig-atmosphere-life {
	0% { opacity: 0; }
	8%, 72% { opacity: 1; }
	100% { opacity: 0; }
}

/* Expanding magical blast */
.mig__atmosphere-blast-core,
.mig__atmosphere-blast-ring,
.mig__atmosphere-ray {
	position: absolute;
	left: var(--mig-explosion-x);
	top: var(--mig-explosion-y);
}

.mig__atmosphere-blast-core {
	width: 10vmin;
	height: 10vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fffde8 0 3%, #f0c46f 12%, #49ad78 32%, #3f99c4 53%, transparent 72%);
	box-shadow: 0 0 38px #3f99c4, 0 0 78px rgba(73, 173, 120, .7);
	animation: mig-blast-core 1.15s ease-out both !important;
}

.mig__atmosphere-blast-ring {
	width: 12vmin;
	height: 12vmin;
	margin: -6vmin;
	border: 3px solid rgba(240, 196, 111, .9);
	border-radius: 50%;
	box-shadow: 0 0 17px rgba(63, 153, 196, .85), inset 0 0 12px rgba(73, 173, 120, .55);
	animation: mig-blast-ring 1.3s cubic-bezier(.08, .66, .25, 1) both !important;
}
.mig__atmosphere-blast-ring--2 { animation-delay: .12s !important; border-color: #3f99c4; }
.mig__atmosphere-blast-ring--3 { animation-delay: .24s !important; border-color: #49ad78; }

.mig__atmosphere-ray {
	width: 22vmax;
	height: 2px;
	transform-origin: left center;
	background: linear-gradient(90deg, rgba(255, 247, 200, .95), rgba(63, 153, 196, .45), transparent);
	transform: rotate(var(--mig-ray)) scaleX(0);
	animation: mig-blast-ray 1.1s ease-out .12s both !important;
}

@keyframes mig-blast-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); }
	24% { opacity: 1; transform: translate(-50%, -50%) scale(1.55); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
@keyframes mig-blast-ring {
	0% { opacity: 0; transform: scale(.05); }
	18% { opacity: 1; }
	100% { opacity: 0; transform: scale(12); }
}
@keyframes mig-blast-ray {
	0% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(0); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(1); }
}

/* Gold-white flash */
.mig__atmosphere--flash {
	--mig-flash-core: #fffde7;
	--mig-flash-a: #fff;
	--mig-flash-b: #f0c46f;
	--mig-flash-c: #3f99c4;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 252, 222, .82), rgba(240, 196, 111, .46) 18%, rgba(63, 153, 196, .26) 40%, transparent 73%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.mig__atmosphere--brilliant-white-flash {
	--mig-flash-core: #fff;
	--mig-flash-a: #fff;
	--mig-flash-b: #fffde8;
	--mig-flash-c: #d5f6ff;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 255, 255, .98), rgba(255, 254, 229, .78) 18%, rgba(206, 244, 255, .48) 42%, transparent 76%);
	animation: mig-atmosphere-brilliant-flash-life 2s ease-out both !important;
}

.mig__atmosphere--azure-flash {
	--mig-flash-core: #f4ffff;
	--mig-flash-a: #fff;
	--mig-flash-b: #6fe3ff;
	--mig-flash-c: #2868ff;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(239, 255, 255, .9), rgba(78, 203, 255, .57) 18%, rgba(39, 89, 220, .34) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.mig__atmosphere--emerald-flash {
	--mig-flash-core: #f5ffe7;
	--mig-flash-a: #fff;
	--mig-flash-b: #69f49c;
	--mig-flash-c: #079263;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(244, 255, 225, .9), rgba(74, 230, 131, .55) 18%, rgba(5, 127, 91, .34) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.mig__atmosphere--violet-flash {
	--mig-flash-core: #fff2ff;
	--mig-flash-a: #fff;
	--mig-flash-b: #df78ff;
	--mig-flash-c: #6f42ff;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 238, 255, .9), rgba(207, 93, 255, .54) 18%, rgba(97, 56, 219, .34) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}

.mig__atmosphere--crimson-flash {
	--mig-flash-core: #fff3e5;
	--mig-flash-a: #fff;
	--mig-flash-b: #ff875d;
	--mig-flash-c: #e82d43;
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 244, 224, .91), rgba(255, 105, 75, .56) 18%, rgba(205, 35, 65, .35) 42%, transparent 74%);
	animation: mig-atmosphere-flash-life 2s ease-out both !important;
}
.mig__atmosphere-flash-core,
.mig__atmosphere-flash-halo,
.mig__atmosphere-flash-ray { position: absolute; left: var(--mig-explosion-x); top: var(--mig-explosion-y); }
.mig__atmosphere-flash-core {
	width: 9vmin; height: 9vmin; border-radius: 50%;
	background: var(--mig-flash-core);
	box-shadow: 0 0 35px var(--mig-flash-a), 0 0 95px var(--mig-flash-b), 0 0 150px var(--mig-flash-c);
	animation: mig-flash-core 1.3s ease-out both !important;
}
.mig__atmosphere-flash-halo {
	width: 15vmin; height: 15vmin; margin: -7.5vmin;
	border: 3px solid var(--mig-flash-b); border-radius: 50%;
	animation: mig-flash-halo 1.5s ease-out both !important;
}
.mig__atmosphere-flash-ray {
	width: 33vmax; height: 3px;
	transform-origin: left center;
	background: linear-gradient(90deg, var(--mig-flash-a), var(--mig-flash-b), var(--mig-flash-c) 58%, transparent 88%);
	animation: mig-flash-ray 1.2s ease-out both !important;
}
@keyframes mig-atmosphere-flash-life {
	0% { opacity: 0; }
	10% { opacity: .78; }
	20% { opacity: .18; }
	32% { opacity: .58; }
	100% { opacity: 0; }
}
@keyframes mig-atmosphere-brilliant-flash-life {
	0% { opacity: 0; }
	8% { opacity: 1; }
	18% { opacity: .42; }
	29% { opacity: .94; }
	45% { opacity: .68; }
	100% { opacity: 0; }
}
@keyframes mig-flash-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); }
	18% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
@keyframes mig-flash-halo { from { opacity: 1; transform: scale(.1); } to { opacity: 0; transform: scale(10); } }
@keyframes mig-flash-ray {
	0% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(.02); }
	20% { opacity: .9; }
	100% { opacity: 0; transform: rotate(var(--mig-ray)) scaleX(1); }
}

/* Additional colored explosion deck */
.mig__atmosphere--azure-nova {
	--mig-explosion-a: #f1feff;
	--mig-explosion-b: #52d7ff;
	--mig-explosion-c: #2764ff;
	--mig-explosion-shadow: rgba(38, 128, 255, .82);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(226, 252, 255, .58), rgba(55, 173, 255, .34) 18%, rgba(30, 72, 177, .22) 40%, transparent 70%);
}

.mig__atmosphere--emerald-burst {
	--mig-explosion-a: #f0ffe1;
	--mig-explosion-b: #61f29b;
	--mig-explosion-c: #05895f;
	--mig-explosion-shadow: rgba(25, 205, 122, .78);
	background: radial-gradient(ellipse at var(--mig-explosion-x) var(--mig-explosion-y), rgba(226, 255, 203, .52), rgba(43, 204, 119, .34) 21%, rgba(3, 91, 78, .24) 46%, transparent 73%);
}

.mig__atmosphere--violet-starburst {
	--mig-explosion-a: #fff1ff;
	--mig-explosion-b: #e271ff;
	--mig-explosion-c: #6839ff;
	--mig-explosion-shadow: rgba(156, 60, 255, .84);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 222, 255, .58), rgba(196, 78, 255, .32) 18%, rgba(74, 39, 169, .24) 43%, transparent 72%);
}

.mig__atmosphere--crimson-gold-detonation {
	--mig-explosion-a: #fff9d7;
	--mig-explosion-b: #ffbd37;
	--mig-explosion-c: #e73d25;
	--mig-explosion-shadow: rgba(255, 96, 29, .84);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 247, 198, .62), rgba(255, 166, 29, .38) 17%, rgba(190, 30, 24, .26) 43%, transparent 73%);
}

.mig__atmosphere--prismatic-nova {
	--mig-explosion-a: #fff;
	--mig-explosion-b: #54e7ff;
	--mig-explosion-c: #ff62c7;
	--mig-explosion-shadow: rgba(119, 92, 255, .85);
	background:
		radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 255, 255, .64), transparent 13%),
		conic-gradient(from 15deg at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 76, 90, .2), rgba(255, 202, 61, .2), rgba(68, 232, 135, .2), rgba(67, 202, 255, .2), rgba(128, 92, 255, .2), rgba(255, 98, 199, .2), rgba(255, 76, 90, .2));
}

.mig__color-explosion-core,
.mig__color-explosion-ring,
.mig__color-explosion-ray,
.mig__color-explosion-spark {
	position: absolute;
	left: var(--mig-explosion-x);
	top: var(--mig-explosion-y);
}

.mig__color-explosion-core {
	width: 12vmin;
	height: 12vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 3%, var(--mig-explosion-a) 9%, var(--mig-explosion-b) 28%, var(--mig-explosion-c) 52%, transparent 73%);
	box-shadow: 0 0 42px var(--mig-explosion-a), 0 0 92px var(--mig-explosion-shadow), 0 0 150px var(--mig-explosion-shadow);
	animation: mig-color-core 1.35s cubic-bezier(.1, .72, .25, 1) both !important;
}

.mig__color-explosion-ring {
	width: 11vmin;
	height: 11vmin;
	margin: -5.5vmin;
	border: calc(2px + var(--mig-color-ring) * 1px) solid var(--mig-explosion-b);
	border-left-color: var(--mig-explosion-a);
	border-bottom-color: var(--mig-explosion-c);
	border-radius: 50%;
	box-shadow: 0 0 18px var(--mig-explosion-shadow), inset 0 0 12px var(--mig-explosion-shadow);
	animation: mig-color-ring 1.45s cubic-bezier(.08, .65, .2, 1) calc(var(--mig-color-ring) * .09s) both !important;
}

.mig__color-explosion-ray {
	width: 30vmax;
	height: 3px;
	transform-origin: left center;
	background: linear-gradient(90deg, var(--mig-explosion-a), var(--mig-explosion-b) 24%, var(--mig-explosion-c) 55%, transparent 92%);
	animation: mig-color-ray 1.2s ease-out .08s both !important;
}

.mig__color-explosion-spark {
	width: var(--mig-color-size);
	height: var(--mig-color-size);
	border-radius: 50%;
	background: var(--mig-explosion-a);
	box-shadow: 0 0 8px var(--mig-explosion-b), 0 0 15px var(--mig-explosion-shadow);
	animation: mig-color-spark 1.32s cubic-bezier(.12, .65, .26, 1) var(--mig-color-delay) both !important;
}

.mig__atmosphere--emerald-burst .mig__color-explosion-ring {
	border-radius: 50% 18% 50% 18%;
}
.mig__atmosphere--emerald-burst .mig__color-explosion-ray { height: 5px; }

.mig__atmosphere--violet-starburst .mig__color-explosion-ray:nth-of-type(odd) {
	height: 6px;
	width: 36vmax;
}

.mig__atmosphere--crimson-gold-detonation .mig__color-explosion-ring {
	border-width: 5px;
}
.mig__atmosphere--crimson-gold-detonation .mig__color-explosion-core {
	width: 17vmin;
	height: 17vmin;
}

.mig__atmosphere--prismatic-nova .mig__color-explosion-ring {
	border-top-color: #ff596f;
	border-right-color: #ffd452;
	border-bottom-color: #55e59d;
	border-left-color: #62bfff;
}
.mig__atmosphere--prismatic-nova .mig__color-explosion-ray:nth-of-type(3n) { --mig-explosion-b: #ffd452; --mig-explosion-c: #ff596f; }
.mig__atmosphere--prismatic-nova .mig__color-explosion-ray:nth-of-type(3n + 1) { --mig-explosion-b: #55e59d; --mig-explosion-c: #62bfff; }

@keyframes mig-color-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
	18% { opacity: 1; transform: translate(-50%, -50%) scale(1.65); }
	55% { opacity: .92; transform: translate(-50%, -50%) scale(2.25); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4.8); }
}

@keyframes mig-color-ring {
	0% { opacity: 0; transform: rotate(-25deg) scale(.04); }
	16% { opacity: 1; }
	100% { opacity: 0; transform: rotate(95deg) scale(13); }
}

@keyframes mig-color-ray {
	0% { opacity: 0; transform: rotate(var(--mig-color-ray)) scaleX(.01); }
	19% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-color-ray)) scaleX(1); }
}

@keyframes mig-color-spark {
	0% { opacity: 0; transform: rotate(var(--mig-color-spark)) translateX(0) scale(.2); }
	20%, 67% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-color-spark)) translateX(var(--mig-color-distance)) scale(.05); }
}

/* Ray-and-spark explosion family: deliberately no circular shock rings. */
.mig__atmosphere--solar-starburst {
	--mig-light-a: #fffde2;
	--mig-light-b: #ffd65a;
	--mig-light-c: #ff7a24;
	--mig-light-shadow: rgba(255, 172, 36, .9);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 252, 219, .7), rgba(255, 190, 49, .34) 13%, rgba(255, 103, 26, .18) 31%, transparent 63%);
}

.mig__atmosphere--sapphire-shatter {
	--mig-light-a: #f4ffff;
	--mig-light-b: #72ddff;
	--mig-light-c: #2858ff;
	--mig-light-shadow: rgba(52, 130, 255, .92);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(232, 253, 255, .68), rgba(61, 173, 255, .31) 13%, rgba(32, 69, 181, .2) 32%, transparent 64%);
}

.mig__atmosphere--emerald-sparkstorm {
	--mig-light-a: #f4ffe5;
	--mig-light-b: #6dffa3;
	--mig-light-c: #00a66f;
	--mig-light-shadow: rgba(31, 224, 125, .88);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(239, 255, 216, .67), rgba(65, 231, 125, .32) 14%, rgba(0, 117, 83, .2) 34%, transparent 65%);
}

.mig__atmosphere--rosefire-burst {
	--mig-light-a: #fff0f4;
	--mig-light-b: #ff79ae;
	--mig-light-c: #ff4f48;
	--mig-light-shadow: rgba(255, 71, 120, .88);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 236, 241, .68), rgba(255, 91, 147, .32) 14%, rgba(220, 44, 51, .2) 34%, transparent 65%);
}

.mig__atmosphere--white-star-detonation {
	--mig-light-a: #fff;
	--mig-light-b: #d9fbff;
	--mig-light-c: #75baff;
	--mig-light-shadow: rgba(201, 245, 255, .95);
	background: radial-gradient(circle at var(--mig-explosion-x) var(--mig-explosion-y), rgba(255, 255, 255, .78), rgba(198, 244, 255, .34) 13%, rgba(88, 151, 255, .18) 32%, transparent 63%);
}

.mig__spark-explosion-core,
.mig__spark-explosion-flare,
.mig__spark-explosion-particle,
.mig__spark-explosion-shard {
	position: absolute;
	left: var(--mig-explosion-x);
	top: var(--mig-explosion-y);
}

.mig__spark-explosion-core {
	width: 8vmin;
	height: 8vmin;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 7%, var(--mig-light-a) 15%, var(--mig-light-b) 37%, var(--mig-light-c) 62%, transparent 75%);
	box-shadow: 0 0 38px #fff, 0 0 82px var(--mig-light-shadow), 0 0 145px var(--mig-light-shadow);
	animation: mig-light-core 1.25s cubic-bezier(.09, .72, .22, 1) both !important;
}

.mig__spark-explosion-flare {
	width: var(--mig-light-length);
	height: 2px;
	transform-origin: left center;
	background: linear-gradient(90deg, #fff, var(--mig-light-a) 12%, var(--mig-light-b) 38%, var(--mig-light-c) 68%, transparent 96%);
	box-shadow: 0 0 7px var(--mig-light-shadow);
	animation: mig-light-flare 1.08s cubic-bezier(.08, .65, .22, 1) var(--mig-light-delay) both !important;
}

.mig__spark-explosion-particle {
	width: var(--mig-light-size);
	height: var(--mig-light-size);
	border-radius: 50%;
	background: var(--mig-light-a);
	box-shadow: 0 0 8px var(--mig-light-b), 0 0 15px var(--mig-light-shadow);
	animation: mig-light-particle 1.24s cubic-bezier(.12, .67, .24, 1) var(--mig-light-delay) both !important;
}

.mig__spark-explosion-shard {
	width: 4px;
	height: 22px;
	border-radius: 50% 50% 10% 10%;
	background: linear-gradient(var(--mig-light-a), var(--mig-light-b), var(--mig-light-c));
	box-shadow: 0 0 9px var(--mig-light-shadow);
	transform-origin: 50% 0;
	animation: mig-light-shard 1.32s cubic-bezier(.1, .65, .25, 1) var(--mig-light-delay) both !important;
}

.mig__atmosphere--solar-starburst .mig__spark-explosion-flare:nth-of-type(3n),
.mig__atmosphere--white-star-detonation .mig__spark-explosion-flare:nth-of-type(2n) {
	height: 5px;
}

.mig__atmosphere--sapphire-shatter .mig__spark-explosion-shard,
.mig__atmosphere--rosefire-burst .mig__spark-explosion-shard {
	width: 7px;
	height: 29px;
}

@keyframes mig-light-core {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
	16% { opacity: 1; transform: translate(-50%, -50%) scale(1.9); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(2.7); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

@keyframes mig-light-flare {
	0% { opacity: 0; transform: rotate(var(--mig-light-angle)) scaleX(.01); }
	17%, 47% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-light-angle)) scaleX(1); }
}

@keyframes mig-light-particle {
	0% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateX(0) scale(.2); }
	17%, 72% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateX(var(--mig-light-distance)) scale(.05); }
}

@keyframes mig-light-shard {
	0% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateY(0) scale(.15); }
	20%, 68% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--mig-light-angle)) translateY(var(--mig-light-distance)) scale(.8); }
}

/* Phones and lower-power touch devices keep the same timing and colors while
   using fewer painted glow layers. Element counts are reduced in app.js. */
@media (max-width: 900px), (pointer: coarse) {
	.mig__atmosphere-flash-core {
		box-shadow: 0 0 24px var(--mig-flash-a), 0 0 70px var(--mig-flash-b);
	}

	.mig__atmosphere-blast-core {
		box-shadow: 0 0 28px #3f99c4, 0 0 58px rgba(73, 173, 120, .62);
	}

	.mig__atmosphere-blast-ring,
	.mig__color-explosion-ring {
		box-shadow: 0 0 10px var(--mig-explosion-shadow, rgba(63, 153, 196, .58));
	}

	.mig__color-explosion-core {
		box-shadow: 0 0 28px var(--mig-explosion-a), 0 0 68px var(--mig-explosion-shadow);
	}

	.mig__color-explosion-spark {
		box-shadow: 0 0 6px var(--mig-explosion-shadow);
	}

	.mig__spark-explosion-core {
		box-shadow: 0 0 26px #fff, 0 0 68px var(--mig-light-shadow);
	}

	.mig__spark-explosion-flare,
	.mig__spark-explosion-particle,
	.mig__spark-explosion-shard {
		box-shadow: 0 0 6px var(--mig-light-shadow);
	}
}

/* --- full-page Roll Item prototype: earthquake and falling controls --- */

html.mig-page-quake { overflow-x: hidden; }

html.mig-page-quake body {
	transform-origin: 50% 45%;
	animation: mig-page-earthquake 1.18s cubic-bezier(.36, .07, .19, .97) both !important;
}

.mig__quake-button {
	position: fixed !important;
	z-index: 2147483001 !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	pointer-events: none !important;
	transform-origin: 50% 40%;
	will-change: transform, opacity;
	animation: mig-quake-button-fall var(--mig-fall-duration, 1.5s) cubic-bezier(.38, .02, .72, .3) var(--mig-fall-delay) both !important;
}

.mig__quake-source {
	animation: mig-quake-real-button 1.95s linear both !important;
}

.mig__quake-word-overlay {
	position: fixed;
	z-index: 2147483001;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	pointer-events: none;
	white-space: normal;
}

.mig__quake-word {
	display: inline-block;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	animation: mig-quake-button-fall var(--mig-fall-duration, 1.5s) cubic-bezier(.38, .02, .72, .3) var(--mig-fall-delay) both !important;
}

@keyframes mig-page-earthquake {
	0%, 12%, 78%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
	15% { transform: translate3d(-5px, 3px, 0) rotate(-.18deg); }
	19% { transform: translate3d(9px, -5px, 0) rotate(.24deg); }
	23% { transform: translate3d(-12px, 7px, 0) rotate(-.3deg); }
	28% { transform: translate3d(11px, 4px, 0) rotate(.28deg); }
	33% { transform: translate3d(-8px, -8px, 0) rotate(-.22deg); }
	39% { transform: translate3d(13px, 6px, 0) rotate(.32deg); }
	46% { transform: translate3d(-11px, 3px, 0) rotate(-.28deg); }
	54% { transform: translate3d(8px, -6px, 0) rotate(.2deg); }
	63% { transform: translate3d(-5px, 4px, 0) rotate(-.12deg); }
	71% { transform: translate3d(3px, -2px, 0) rotate(.08deg); }
}

@keyframes mig-quake-button-fall {
	0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
	12% { transform: translate3d(0, -7px, 0) rotate(-3deg); }
	25% { opacity: 1; transform: translate3d(var(--mig-fall-nudge), 7px, 0) rotate(8deg); }
	100% { opacity: .96; transform: translate3d(var(--mig-fall-x), 108vh, 0) rotate(var(--mig-fall-turn)); }
}

@keyframes mig-quake-real-button {
	0%, 20% { opacity: 1; }
	24%, 82% { opacity: 0; }
	100% { opacity: 0; }
}

/* --- magical loading state --- */

.mig__result { position: relative; }

.mig__magic-loading {
	position: absolute;
	inset: 20px 0 0;
	z-index: 5;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background:
		radial-gradient(circle at 39% 53%, rgba(18, 72, 124, .15), transparent 25%),
		radial-gradient(circle at 61% 48%, rgba(11, 95, 60, .15), transparent 26%),
		radial-gradient(circle at 18% 24%, rgba(91, 58, 4, .22) 0 1px, transparent 2px),
		radial-gradient(circle at 78% 32%, rgba(112, 74, 8, .24) 0 1px, transparent 2px),
		radial-gradient(circle at 64% 76%, rgba(91, 58, 4, .2) 0 1px, transparent 2px),
		radial-gradient(circle at center, rgba(88, 66, 20, .16), transparent 43%);
	background-size: auto, auto, 110px 95px, 145px 125px, 175px 150px, auto;
	border-radius: 3px;
	pointer-events: none;
	animation:
		mig-magic-shimmer 2s ease-in-out infinite,
		mig-magic-veil 2s ease-in-out both !important;
}

.mig__magic-loading p {
	margin: 0;
	color: #0b5f3c;
	font-weight: 600;
	letter-spacing: .08em;
	text-shadow: 0 0 7px rgba(11, 95, 60, .32);
	animation: mig-magic-words 1.45s ease-in-out both !important;
}

.mig[data-state="generating"] .mig-sb__body,
.mig[data-state="generating"] .mig-sb__art {
	animation: mig-magic-item-reveal 1.15s ease-out .65s both !important;
}

.mig__magic-stage {
	position: relative;
	display: block;
	width: 122px;
	height: 108px;
}

.mig__magic-swirl {
	position: absolute;
	border-radius: 50%;
	-webkit-mask: radial-gradient(ellipse, transparent 54%, #000 57% 67%, transparent 70%);
	mask: radial-gradient(ellipse, transparent 54%, #000 57% 67%, transparent 70%);
}

.mig__magic-swirl::before,
.mig__magic-swirl::after {
	content: '';
	position: absolute;
	border-radius: 50%;
}

.mig__magic-swirl--blue {
	inset: 1px -5px 1px -5px;
	background: conic-gradient(
		from 20deg,
		transparent 0 8%,
		rgba(21, 67, 126, .32) 13%,
		#174f8a 20%,
		rgba(24, 58, 120, .9) 27%,
		transparent 35% 57%,
		rgba(18, 72, 124, .42) 64%,
		#246b9a 72%,
		transparent 82%
	);
	animation: mig-magic-swirl-blue 1.25s linear infinite !important;
}

.mig__magic-swirl--blue::before {
	width: 9px;
	height: 9px;
	top: 9px;
	right: 18px;
	background: #1c5c88;
	box-shadow: 0 0 7px #174f8a, 0 0 14px rgba(18, 72, 124, .55);
}

.mig__magic-swirl--blue::after {
	width: 5px;
	height: 5px;
	left: 10px;
	bottom: 23px;
	background: #273f8f;
	box-shadow: 0 0 7px #174f8a;
}

.mig__magic-swirl--green {
	inset: 10px 4px 9px 4px;
	background: conic-gradient(
		from -35deg,
		transparent 0 18%,
		rgba(11, 95, 60, .32) 24%,
		#0b5f3c 32%,
		rgba(31, 117, 74, .9) 38%,
		transparent 47% 69%,
		#0f6b45 77%,
		rgba(20, 122, 76, .45) 85%,
		transparent 92%
	);
	animation: mig-magic-swirl-green 1.55s linear infinite !important;
}

.mig__magic-swirl--green::before {
	width: 8px;
	height: 8px;
	left: 19px;
	top: 6px;
	background: #1f754a;
	box-shadow: 0 0 7px #0b5f3c, 0 0 14px rgba(11, 95, 60, .55);
}

.mig__magic-swirl--green::after {
	width: 5px;
	height: 5px;
	right: 11px;
	bottom: 17px;
	background: #174e35;
	box-shadow: 0 0 7px #0b5f3c;
}

.mig__magic-orbit {
	position: relative;
	display: grid;
	left: 23px;
	top: 14px;
	width: 76px;
	height: 76px;
	place-items: center;
	border: 2px solid rgba(112, 74, 8, .28);
	border-top-color: #8a5a00;
	border-right-color: #8a5a00;
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(112, 74, 8, .25), inset 0 0 13px rgba(112, 74, 8, .1);
	animation: mig-magic-spin 1.15s linear infinite !important;
}

.mig__magic-orbit::before,
.mig__magic-orbit::after {
	position: absolute;
	color: #6f4a0b;
	line-height: 1;
}

.mig__magic-orbit::before { content: '\2726'; top: -9px; left: 8px; font-size: 18px; text-shadow: 0 0 8px currentColor; }
.mig__magic-orbit::after { content: '\2727'; right: -7px; bottom: 8px; font-size: 15px; text-shadow: 0 0 8px currentColor; }

.mig__magic-ring {
	position: absolute;
	inset: 9px;
	border: 1px solid rgba(112, 74, 8, .55);
	border-top-color: transparent;
	border-bottom-color: #8a5a00;
	border-radius: 50%;
	animation: mig-magic-counterspin .8s linear infinite !important;
}

.mig__magic-core {
	color: #7a4d00;
	font-size: 35px;
	text-shadow: 0 0 8px rgba(112, 74, 8, .5);
	animation: mig-magic-counterspin 1.15s linear infinite !important;
}

.mig__magic-dust {
	position: absolute;
	left: 59px;
	top: 51px;
	width: 3px;
	height: 3px;
	background: #6f4a0b;
	border-radius: 50%;
	box-shadow:
		-46px -25px 0 #8a5a00,
		42px -30px 0 #6f4a0b,
		52px 13px 0 #8a5a00,
		-50px 24px 0 #6f4a0b,
		29px 44px 0 #8a5a00,
		-24px 47px 0 #6f4a0b;
	animation: mig-magic-drift 1.8s ease-in-out infinite alternate !important;
}

.mig__magic-spark {
	position: absolute;
	color: #6f4a0b;
	font-size: 12px;
	line-height: 1;
	text-shadow: 0 0 6px rgba(112, 74, 8, .45);
}
.mig__magic-spark--1 { left: 4px; top: 14px; animation: mig-magic-twinkle .72s ease-in-out 0s infinite alternate !important; }
.mig__magic-spark--2 { right: 3px; top: 6px; animation: mig-magic-twinkle .9s ease-in-out .12s infinite alternate !important; }
.mig__magic-spark--3 { right: 0; top: 67px; animation: mig-magic-twinkle .68s ease-in-out .25s infinite alternate !important; }
.mig__magic-spark--4 { left: 9px; top: 77px; animation: mig-magic-twinkle .84s ease-in-out .38s infinite alternate !important; }
.mig__magic-spark--5 { left: 39px; bottom: 0; animation: mig-magic-twinkle .76s ease-in-out .18s infinite alternate !important; }
.mig__magic-spark--6 { right: 35px; bottom: 3px; animation: mig-magic-twinkle .95s ease-in-out .3s infinite alternate !important; }

@keyframes mig-magic-spin { to { transform: rotate(360deg); } }
@keyframes mig-magic-counterspin { to { transform: rotate(-360deg); } }
@keyframes mig-magic-swirl-blue {
	from { transform: rotate(0deg) scaleX(1.04); opacity: .72; }
	50% { opacity: 1; }
	to { transform: rotate(360deg) scaleX(1.04); opacity: .72; }
}
@keyframes mig-magic-swirl-green {
	from { transform: rotate(360deg) scaleY(.92); opacity: .68; }
	50% { opacity: 1; }
	to { transform: rotate(0deg) scaleY(.92); opacity: .68; }
}
@keyframes mig-magic-drift {
	from { opacity: .4; transform: rotate(-8deg) scale(.82); }
	to { opacity: 1; transform: rotate(12deg) scale(1.15); }
}
@keyframes mig-magic-twinkle {
	from { opacity: .18; transform: translateY(4px) scale(.55) rotate(0deg); }
	to { opacity: 1; transform: translateY(-4px) scale(1.18) rotate(35deg); }
}
@keyframes mig-magic-words {
	0% { opacity: 0; text-shadow: 0 0 2px rgba(11, 95, 60, .18); }
	28%, 68% { opacity: 1; text-shadow: 0 0 9px rgba(11, 95, 60, .42); }
	100% { opacity: 0; text-shadow: 0 0 4px rgba(11, 95, 60, .22); }
}
@keyframes mig-magic-shimmer {
	0%, 100% { background-position: center, center, 0 0, 0 0, 0 0, center; }
	50% { background-position: 44% 48%, 56% 53%, 18px -12px, -15px 10px, 12px 14px, center; }
}
@keyframes mig-magic-veil {
	0%, 68% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes mig-magic-item-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mig__initial-loader-sigil,
	.mig__initial-loader-glyph { animation-duration: 2.8s !important; }
	.mig__initial-loader-sigil::before { animation-duration: 2.4s !important; }
	.mig__initial-loader-sigil::after { animation-duration: 6s !important; }
	.mig__magic-orbit,
	.mig__magic-ring,
	.mig__magic-core { animation-duration: 3s !important; }
	.mig__magic-swirl { animation-duration: 2s !important; }
	.mig__magic-spark,
	.mig__magic-dust,
	.mig__magic-loading,
	.mig__magic-loading p { animation-duration: 2s !important; }
	.mig[data-state="generating"] .mig-sb__body,
	.mig[data-state="generating"] .mig-sb__art { animation-duration: 1.3s !important; }
}

/* --- statblock --- */

.mig-sb {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 22px;
	background: var(--mig-card);
	border: 1px solid var(--mig-rule);
	border-radius: 3px;
	padding: 22px 24px 18px;
	margin-top: 20px;
}

/* Only 51 of the 844 published items carry artwork, so the no-art case is the
   normal one and the column collapses rather than leaving a hole. */
.mig-sb--noart { grid-template-columns: 1fr; }

.mig-sb__art img { width: 100%; height: auto; border-radius: 3px; }

.mig-sb__badge {
	display: inline-block;
	background: #f0c46f;
	color: #000;
	font-size: .72em;
	letter-spacing: .04em;
	padding: 4px 10px;
	border-radius: 0;
	margin: 0;
}

.mig-sb__name { margin: 10px 0 2px; font-size: 1.55em; display: flex; align-items: center; gap: 10px; color: #000; }

.mig-sb__star {
	background: none;
	border: 0;
	color: var(--mig-tan-rule);
	font-size: .8em;
	cursor: pointer;
	line-height: 1;
	padding: 2px;
}

.mig-sb__type { margin: 0 0 4px; color: var(--mig-muted); font-size: .88em; }
.mig-sb__tags { color: var(--mig-muted); font-size: inherit; letter-spacing: normal; text-transform: none; }
.mig-sb__about { margin-bottom: 14px; }

.mig-sb__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	border-top: 1px solid var(--mig-rule);
	border-bottom: 1px solid var(--mig-rule);
	padding: 10px 0;
	margin-bottom: 14px;
}

.mig-sb__stats .k { display: block; font-size: .68em; text-transform: uppercase; letter-spacing: .08em; color: var(--mig-muted); }
.mig-sb__stats .v { font-weight: 600; }

.mig-sb__effect {
	background: var(--mig-tan);
	border: 1px solid var(--mig-tan-rule);
	border-radius: 2px;
	padding: 12px 14px;
}

.mig-sb__effect-label {
	display: block;
	font-size: .68em;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #000;
	font-weight: 700;
	margin-bottom: 5px;
}

.mig-sb__meta { margin: 11px 0 0; font-size: .72em; color: #000; }

.is-editable { outline: 1px dashed var(--mig-tan-rule); outline-offset: 3px; border-radius: 2px; }
.is-editable:focus { outline-style: solid; }

/* --- saved --- */

.mig__saved { margin-top: 38px; border-top: 1px solid var(--mig-rule); padding-top: 18px; }
.mig__saved h2 { font-size: 1em; text-transform: uppercase; letter-spacing: .1em; color: #fff; font-weight: normal; }
.mig__saved ul { list-style: none; padding: 0; margin: 0; }
.mig__saved li {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 9px;
	padding: 11px 12px;
	background: rgba(92, 74, 46, .42);
	border: 1px solid #8f7449;
	border-left: 4px solid #f0c46f;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.mig__saved li:hover {
	background: rgba(116, 91, 52, .62);
	border-color: #d5ac62;
}
.mig__saved button { background: none; border: 0; padding: 0; font: inherit; color: #fff; cursor: pointer; text-align: left; }
.mig__saved-recall { font-weight: 600 !important; }
.mig__saved-recall:hover, .mig__saved-recall:focus-visible { color: #f0c46f; }
.mig__saved span { font-size: .8em; color: #fff; opacity: .82; }
.mig__saved span.mig__saved-number { color: #f0c46f; font-weight: 700; opacity: 1; }
.mig__saved button.mig__saved-remove {
	margin-left: auto;
	padding: 5px 10px;
	background: rgba(0, 0, 0, .28);
	border: 1px solid #f0c46f;
	color: #fff;
	font-size: .75em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.mig__saved button.mig__saved-remove:hover,
.mig__saved button.mig__saved-remove:focus-visible {
	background: #f0c46f;
	color: #000;
}

@media (max-width: 720px) {
	.mig-sb { grid-template-columns: 1fr; }
	.mig-sb__art { order: -1; max-width: 300px; }
	.mig__saved li { flex-wrap: wrap; }
	.mig__saved button.mig__saved-remove { margin-left: auto; }
}