/* The Fanatic advertisement (2026-10-13, partials/fanatic-ad.php): a floating card at the bottom right of the main page; a sheet on phones */
.ec-fanad { position: fixed; right: clamp(12px, 2.4vw, 32px); bottom: clamp(12px, 2.4vw, 32px); z-index: 900; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
	display: flex; padding: 2px; border-radius: 18px; isolation: isolate; opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.ec-fanad[hidden] { display: none; }
.ec-fanad.is-on { opacity: 1; transform: none; }
.ec-fanad.is-off { opacity: 0; transform: translateY(30px) scale(.97); pointer-events: none; }
/* the frame: a slowly turning ring of gold and blood light round a dark card */
.ec-fanad-frame { position: relative; flex: 1; overflow-x: hidden; overflow-y: auto; padding: 22px 22px 18px; border-radius: 16px; isolation: isolate; scrollbar-width: thin;
	background: radial-gradient(120% 70% at 50% 0%, rgba(122, 12, 12, .55), rgba(10, 6, 8, 0) 60%), linear-gradient(180deg, #17100c, #0b0709 70%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(200, 147, 74, .35), 0 0 42px rgba(224, 38, 44, .22); }
/* (on the outer box, so the card's own scrolling does not cut it off) */
.ec-fanad::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px; padding: 2px;
	background: conic-gradient(from var(--fan-a, 0deg), #c8934a, #fff1c4 12%, #c8934a 25%, #7a0c0c 40%, #e0262c 50%, #7a0c0c 60%, #c8934a 75%, #fff1c4 88%, #c8934a);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ecFanSpin 8s linear infinite; }
@property --fan-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ecFanSpin { to { --fan-a: 360deg; } }
/* embers rising through the card */
.ec-fanad-sparks { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 16px; pointer-events: none; }
.ec-fanad-sparks i { position: absolute; left: var(--x); bottom: -8px; width: 3px; height: 3px; border-radius: 50%; background: #ffb45a; box-shadow: 0 0 6px 2px rgba(255, 120, 40, .7);
	opacity: 0; animation: ecFanEmber var(--t) linear var(--d) infinite; }
@keyframes ecFanEmber { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(18px, -460px); opacity: 0; } }
.ec-fanad-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(200, 147, 74, .35); border-radius: 50%;
	background: rgba(0, 0, 0, .35); color: var(--ink-soft, #b9ab93); cursor: pointer; transition: color .2s, border-color .2s, transform .2s; }
.ec-fanad-x:hover, .ec-fanad-x:focus-visible { color: #fff1c4; border-color: #c8934a; transform: rotate(90deg); }
.ec-fanad-head { text-align: center; }
.ec-fanad-crest { display: block; width: 64px; height: 64px; margin: 0 auto 6px; filter: drop-shadow(0 0 12px rgba(232, 184, 90, .55)); animation: ecFanCrest 4s ease-in-out infinite; }
.ec-fanad-crest svg { width: 100%; height: 100%; }
@keyframes ecFanCrest { 50% { transform: translateY(-3px) rotate(4deg); filter: drop-shadow(0 0 20px rgba(255, 140, 60, .75)); } }
.ec-fanad-kicker { margin: 0; font-family: var(--f-head, serif); font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: #f0c46a; text-shadow: 0 0 8px rgba(240, 196, 106, .45), 0 1px 2px rgba(0, 0, 0, .9); }   /* gold, not red on the red (2026-10-13, the owner) */
.ec-fanad-title { margin: 4px 0 6px; font-family: var(--f-display, serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); line-height: 1.1;
	background: linear-gradient(100deg, #b98a3e 0%, #fff1c4 30%, #e8b85a 45%, #fff6dc 55%, #b98a3e 75%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
	animation: ecFanShine 5s ease-in-out infinite; }
@keyframes ecFanShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.ec-fanad-lede { margin: 0 auto 12px; max-width: 32ch; font-size: .98rem; line-height: 1.4; color: var(--ink-soft, #b9ab93); }
.ec-fanad-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ec-fanad-perks li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border: 1px solid rgba(200, 147, 74, .16); border-radius: 10px; background: rgba(255, 255, 255, .025);
	opacity: 0; transform: translateX(14px); transition: border-color .2s, background .2s; }
.ec-fanad.is-on .ec-fanad-perks li { animation: ecFanIn .55s var(--ease, ease) calc(.35s + var(--i) * .08s) forwards; }
@keyframes ecFanIn { to { opacity: 1; transform: none; } }
.ec-fanad-perks li:hover { border-color: rgba(232, 184, 90, .5); background: rgba(232, 184, 90, .06); }
.ec-fanad-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a1608, #140806);
	box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .55), 0 0 10px rgba(224, 38, 44, .25); }
.ec-fanad-ico svg { width: 16px; height: 16px; fill: #f0c46a; }
.ec-fanad-perks b { display: block; font-family: var(--f-head, serif); font-size: .84rem; letter-spacing: .03em; color: #f3dfb0; }
.ec-fanad-perks small { display: block; font-size: .86rem; line-height: 1.3; color: var(--ink-soft, #b9ab93); }
.ec-fanad-price { margin: 14px 0 4px; text-align: center; }
.ec-fanad-price p { margin: 0; }
.ec-fanad-price > p:first-child b { font-family: var(--f-display, serif); font-size: 1.6rem; color: #fff1c4; text-shadow: 0 0 14px rgba(232, 184, 90, .55); }
.ec-fanad-price > p:first-child span { font-family: var(--f-head, serif); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ember, #c8934a); }
.ec-fanad-where { margin-top: 4px !important; font-size: .9rem; line-height: 1.35; color: var(--ink-soft, #b9ab93); }
.ec-fanad-where b { color: #f3dfb0; font-weight: 600; }
.ec-fanad-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }   /* Go to Fanatic Kiosk (the kiosk on the Eternal Conflict region, 2026-10-13) and Not now */
@media (max-width: 560px) {
	.ec-fanad { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 82vh; }
	.ec-fanad-frame { padding: 18px 14px 14px; }
	.ec-fanad-perks small { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ec-fanad, .ec-fanad-perks li { transition: none; }
	.ec-fanad::before, .ec-fanad-crest, .ec-fanad-title, .ec-fanad-sparks i { animation: none; }
	.ec-fanad.is-on .ec-fanad-perks li { animation: none; opacity: 1; transform: none; }
	.ec-fanad-sparks { display: none; }
}