.promo{--ledge:6px;--radius:24px;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);isolation:isolate;padding-bottom:var(--ledge);position:relative;container-type:inline-size}.promo[data-kind=host]{--face-top:#3b2d9c;--face-bottom:#211a63;--glow:#03ddff4d;--ledge-color:#110b38;--accent:#7eeeff;--cta-bg:#03ddff;--cta-hover:#5ae9ff;--cta-ledge:#0189a0;--cta-fg:#0d1129}.promo[data-kind^=fantasy-mc]{--face-top:#5b30b8;--face-bottom:#2b176f;--glow:#ff2c8261;--ledge-color:#1a0d45;--accent:#ffb3d1}.promo[data-kind=arcadia-shadowfall]{--face-top:#3a1f73;--face-bottom:#150a31;--glow:#b266ff6b;--ledge-color:#0b0520;--accent:#d4b8ff}.promo:before{content:"";inset:var(--ledge) 0 0;z-index:-1;border-radius:var(--radius);background:var(--ledge-color);position:absolute;box-shadow:0 12px 28px -10px #0000008c}.promo-face{--rise:300px;isolation:isolate;border-radius:var(--radius);background:radial-gradient(120% 80% at 100% 0%, var(--glow), transparent 60%), linear-gradient(to bottom, var(--face-top), var(--face-bottom));color:#f8f8fc;transition:transform .32s var(--ease-bounce);grid-template-columns:auto 1fr;grid-template-areas:"mark head""text text""actions actions";align-items:center;gap:12px 14px;padding:18px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 2px #ffffff2e,inset 0 -3px #00000038}.promo-face:before{content:"";z-index:-1;border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;pointer-events:none;background:linear-gradient(#ffffff24,#ffffff0a 45%,#fff0);height:55%;position:absolute;inset:2px 2px auto}.promo-mark{filter:drop-shadow(0 3px #00000047);width:52px;height:52px;transition:transform .42s var(--ease-bounce);grid-area:mark}.promo-mark[data-tile]{border-radius:14px;box-shadow:0 0 0 2px #ffffff29}.promo-head{grid-area:head;gap:4px;min-width:0;display:grid}.promo-head p,.promo-text{margin:0}.promo-kicker{color:var(--accent);font-size:.8rem;font-weight:600;line-height:1.3}.promo-title{font-family:var(--font-display);letter-spacing:.02em;color:#fff;text-shadow:0 2px #00000040;text-wrap:balance;font-size:1.2rem;line-height:1.1}.promo-text{color:#f8f8fcd9;text-wrap:pretty;grid-area:text;font-size:.875rem;line-height:1.5}.promo-actions{grid-area:actions;gap:10px;display:grid}.promo-cover{z-index:1;border-radius:var(--radius);position:absolute;inset:0}.promo-cover:active{transform:none}.promo-link{z-index:2;background:var(--cta-bg);min-height:44px;color:var(--cta-fg);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;box-shadow:0 3px 0 var(--cta-ledge), inset 0 1px 0 #ffffff73;transition:transform .13s var(--ease-out), box-shadow .13s var(--ease-out), background-color .15s ease;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-size:.84rem;font-weight:700;line-height:normal;text-decoration:none;display:flex;position:relative}.promo-link svg{flex-shrink:0;width:1.1em;height:1.1em}.promo-link:active{box-shadow:0 1px 0 var(--cta-ledge), inset 0 1px 0 #ffffff73;transform:translateY(2px)}.promo-link:focus-visible{outline:2px solid var(--color-fd-ring);outline-offset:3px}.promo-link.promo-curseforge{--cta-bg:#f16436;--cta-hover:#ff7d52;--cta-ledge:#a83c19;--cta-fg:#1c0a04}.promo-pair{gap:6px;display:flex}.promo-pair>.promo-link:first-child{flex:1}.promo-link.promo-modrinth{--cta-bg:#1bd96a;--cta-hover:#5ce394;--cta-ledge:#0e8a41;--cta-fg:#052e16;min-width:44px;padding-inline:12px}.promo-code{z-index:2;color:#fff;min-height:44px;transition:transform .13s var(--ease-out), background-color .15s ease;background:#0d112980;border:2px dashed #7eeeff99;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:8px 18px;display:flex;position:relative;-webkit-mask:radial-gradient(7px at 0,#0000 98%,#000) 0/51% 100% no-repeat,radial-gradient(7px at 100%,#0000 98%,#000) 100%/51% 100% no-repeat;mask:radial-gradient(7px at 0,#0000 98%,#000) 0/51% 100% no-repeat,radial-gradient(7px at 100%,#0000 98%,#000) 100%/51% 100% no-repeat}.promo-code-text{font-family:"MCFifty", var(--font-display);letter-spacing:.08em;font-size:1.05rem}.promo-code svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}.promo-code[data-copied]{background:#03ddff33}.promo-code-icon{display:grid}.promo-code-icon>svg{transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), filter .2s var(--ease-out);grid-area:1/1}.promo-code-check,.promo-code[data-copied] .promo-code-copy{opacity:0;filter:blur(2px);transform:scale(.5)}.promo-code[data-copied] .promo-code-check{opacity:1;filter:none;transition-duration:.28s;transition-timing-function:var(--ease-bounce);transform:scale(1)}.promo-code:active{transform:scale(.97)}.promo-code:focus-visible{outline:2px solid var(--color-fd-ring);outline-offset:2px}.promo[data-kind=host]{--sprite:url(/img/promo/particles/bubble.png)}.promo[data-kind^=fantasy-mc]{--sprite:url(/img/promo/particles/dragon.png)}.promo[data-kind=arcadia-shadowfall]{--sprite:url(/img/promo/particles/soul.png)}.promo-particles{z-index:-1;pointer-events:none;position:absolute;inset:0}.promo-particles i{--size:16px;bottom:calc(var(--size) * -1);left:min(var(--x), calc(100% - var(--size)));width:var(--size);height:var(--size);background:var(--sprite) 0 0 / auto var(--size) no-repeat;image-rendering:pixelated;opacity:0;position:absolute}.promo-particles i:first-child{--x:4%;--duration:11s;--delay:0s}.promo-particles i:nth-child(2){--x:21%;--duration:9s;--delay:-4s}.promo-particles i:nth-child(3){--x:38%;--duration:13s;--delay:-7s}.promo-particles i:nth-child(4){--x:57%;--duration:10s;--delay:-2s}.promo-particles i:nth-child(5){--x:74%;--duration:12s;--delay:-9s}.promo-particles i:nth-child(6){--x:91%;--duration:14s;--delay:-11s}.promo[data-on-screen] .promo-particles i{animation:promo-rise var(--duration) linear var(--delay) infinite}.promo[data-kind^=fantasy-mc]{--frames:4}.promo[data-kind^=fantasy-mc][data-on-screen] .promo-particles i{animation:promo-rise var(--duration) linear var(--delay) infinite, promo-frames .64s steps(4) var(--delay) infinite}.promo[data-kind=arcadia-shadowfall]{--frames:11}.promo[data-kind=arcadia-shadowfall][data-on-screen] .promo-particles i{animation:promo-rise var(--duration) linear var(--delay) infinite, promo-frames var(--duration) steps(11) var(--delay) infinite}@keyframes promo-rise{0%{opacity:0;transform:translate(0)}15%{opacity:.3}50%{transform:translate(5px, calc(var(--rise) * -.5))}80%{opacity:.3}to{transform:translate(-3px, calc(var(--rise) * -1));opacity:0}}@keyframes promo-frames{to{background-position-x:calc(var(--size) * var(--frames) * -1)}}.promo-sheen{z-index:3;border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.promo-sheen:after{content:"";background:linear-gradient(90deg,#fff0 0%,#fff3 50%,#fff0 100%);width:40%;position:absolute;top:-20%;bottom:-20%;left:0;transform:translate(-160%)skew(-18deg)}@media (hover:hover) and (pointer:fine){.promo:hover .promo-face{transform:translateY(-3px)}.promo:hover .promo-mark{transform:rotate(-8deg)scale(1.08)}.promo:hover .promo-link{background:var(--cta-hover)}.promo:hover .promo-sheen:after{transition:transform .75s var(--ease-out);transform:translate(380%)skew(-18deg)}.promo-code:not([data-copied]):hover{background:#0d1129b3}}.promo:has(.promo-cover:active) .promo-face{transform:translateY(calc(var(--ledge) - 1px));transition:transform .13s var(--ease-out)}@container (min-width:540px){.promo-face{--rise:170px;grid-template-columns:auto 1fr;grid-template-areas:"mark head""mark text""mark actions";gap:8px 20px;padding:20px 22px}.promo-mark{align-self:start;width:72px;height:72px}.promo-mark[data-tile]{border-radius:18px}.promo-title{font-size:1.35rem}.promo-actions{flex-wrap:wrap;margin-top:6px;display:flex}.promo-link{letter-spacing:.02em;padding-inline:20px;font-size:.9rem}}@container (min-width:780px){.promo-face{--rise:150px;grid-template-columns:auto 1fr auto;grid-template-areas:"mark head actions""mark text actions";gap:6px 24px}.promo-mark{align-self:center}.promo-head{align-self:end}.promo-text{align-self:start}.promo-actions{min-width:210px;margin-top:0;display:grid}}.promo-rail{margin-top:16px}.promo-inline{margin-top:24px}@media (min-width:80rem){.promo-inline[data-has-rail]{display:none}}@media (prefers-reduced-motion:reduce){.promo-face,.promo-mark{transition:none}.promo:hover .promo-face,.promo:hover .promo-mark,.promo-link:active,.promo-code:active{transform:none}.promo:has(.promo-cover:active) .promo-face{transform:none}.promo-particles,.promo-sheen{display:none}.promo-code-icon>svg,.promo-code[data-copied] .promo-code-icon>svg{filter:none;transform:none}}