.franchise-banner{--tilt-x:0deg;--tilt-y:0deg;--art-x:0px;--art-y:0px;--theme:#f07f42;--edge:#9c4c3266;position:relative;isolation:isolate;min-height:194px;padding:25px 27px;overflow:visible;border:0;background:transparent;border-radius:18px;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .25s ease;outline-offset:8px}
.franchise-banner:hover{border-color:transparent;transform:perspective(900px) translateY(-3px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.franchise-banner:focus-visible{outline:2px solid var(--theme)}
.franchise-backplate{position:absolute;inset:5px 5px -5px;z-index:-1;border:1px solid var(--edge);border-radius:18px;background:linear-gradient(135deg,#33201a,#151313);transform:rotate(-1.6deg);transition:transform .35s}
.franchise-surface{position:absolute;inset:0;border:1px solid var(--edge);border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 85% 100%,#822b153d,transparent 70%),linear-gradient(115deg,#1d1416,#2b1514 65%,#451e13)}
.franchise-surface:after{content:'';position:absolute;inset:8px;border:1px solid #f4a4740d;border-radius:12px;pointer-events:none}
.franchise-copy{position:relative;z-index:5;display:flex;align-items:flex-start;flex-direction:column;max-width:58%;pointer-events:none}
.franchise-banner .eyebrow{font-size:7px;letter-spacing:1.8px;color:#e2b49c}
.franchise-banner h3{font-family:var(--heading);font-size:clamp(16px,1.45vw,25px);line-height:1.1;letter-spacing:-.9px;margin:13px 0 10px;font-weight:600;text-shadow:0 2px 18px #130908}
.franchise-banner h3 small{display:block;font-family:Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:7px;margin-top:8px;color:#f1c4aa}
.franchise-tagline{font-size:10px;color:#c0a89f;line-height:1.5}
.franchise-link{display:flex;align-items:center;gap:10px;font-size:9px;color:#f3d7c7;margin-top:19px;white-space:nowrap}
.franchise-link svg{width:15px;height:15px;transition:transform .25s}
.franchise-banner:hover .franchise-link svg{transform:translateX(4px)}
.franchise-character{position:absolute;z-index:3;right:-13px;bottom:-1px;width:55%;height:calc(100% + 31px);object-fit:contain;object-position:50% 100%;pointer-events:none;filter:drop-shadow(-13px 9px 9px #090605b3);transform:translate3d(var(--art-x),var(--art-y),0) rotate(-4deg);transform-origin:60% 85%;transition:transform .3s ease}
.franchise-banner .tile-arrow{z-index:6;right:13px;top:13px;width:25px;height:25px;padding:5px;color:#f4c6ac;border:1px solid #d4a38a40;border-radius:50%;background:#211513b3;backdrop-filter:blur(6px)}
.franchise-watermark{position:absolute;right:8%;top:0;font-family:var(--heading);font-size:105px;font-weight:600;letter-spacing:-7px;line-height:1.3;color:#e58b5620;transform:rotate(-9deg);user-select:none}
.franchise-shard{position:absolute;z-index:4;pointer-events:none;background:linear-gradient(125deg,#e9af77,#77351e 45%,#c47747 48%,#351a14 90%);clip-path:polygon(24% 0,100% 21%,77% 100%,0 70%);filter:drop-shadow(0 5px 3px #0009);transition:transform .35s}
.shard-one{width:18px;height:23px;right:10%;top:-9px;transform:rotate(25deg)}
.shard-two{width:12px;height:17px;right:44%;bottom:19px;transform:rotate(-24deg)}
.shard-three{width:9px;height:14px;right:2%;bottom:21%;transform:rotate(50deg)}
.franchise-banner:hover .shard-one{transform:translate(3px,-5px) rotate(40deg)}
.franchise-banner:hover .shard-two{transform:translate(-4px,3px) rotate(-40deg)}
.franchise-fire{position:absolute;right:-4%;bottom:-8%;width:67%;height:105%;filter:blur(1px);opacity:.9;mask-image:linear-gradient(0deg,#000 78%,transparent);pointer-events:none}
.franchise-fire i{position:absolute;bottom:0;width:25%;height:65%;background:radial-gradient(ellipse at 50% 100%,#fff5af 0%,#ffbe42 22%,#ff6420 48%,#bb2f0a88 69%,transparent 74%);border-radius:80% 16% 65% 15%;transform-origin:50% 100%;animation:flame-flicker 1.8s ease-in-out infinite alternate}
.franchise-fire i:nth-child(1){left:0;height:55%;animation-delay:-1.2s;transform:rotate(-14deg)}
.franchise-fire i:nth-child(2){left:13%;height:80%;animation-duration:2.2s;animation-delay:-.5s}
.franchise-fire i:nth-child(3){left:28%;height:60%;animation-delay:-.8s}
.franchise-fire i:nth-child(4){left:42%;height:96%;animation-duration:2.6s;animation-delay:-1.4s}
.franchise-fire i:nth-child(5){left:55%;height:73%;animation-delay:-.3s}
.franchise-fire i:nth-child(6){left:68%;height:94%;animation-duration:2.3s;animation-delay:-1.7s}
.franchise-fire i:nth-child(7){left:80%;height:65%;animation-delay:-.9s}
@keyframes flame-flicker{0%{transform:scale(.85,.84) skew(-7deg);opacity:.65}45%{transform:scale(1,1.06) skew(5deg);opacity:1}100%{transform:scale(.9,.92) skew(-3deg);opacity:.8}}
.franchise-embers{position:absolute;inset:0;pointer-events:none}
.franchise-embers i{position:absolute;bottom:-8px;width:3px;height:5px;background:#ffc26c;border-radius:50%;box-shadow:0 0 6px #ff7028;animation:ember-rise 3.1s linear infinite;left:65%}
.franchise-embers i:nth-child(2){left:83%;animation-delay:-2s;animation-duration:2.5s}.franchise-embers i:nth-child(3){left:48%;animation-delay:-.8s;animation-duration:3.7s}.franchise-embers i:nth-child(4){left:94%;animation-delay:-1.5s}.franchise-embers i:nth-child(5){left:57%;animation-delay:-2.8s;animation-duration:2.8s}.franchise-embers i:nth-child(6){left:74%;animation-delay:-1.1s;animation-duration:4s}
@keyframes ember-rise{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:1}85%{opacity:.75}100%{transform:translate(-22px,-205px) rotate(80deg);opacity:0}}
.franchise-doom{--theme:#adf16a;--edge:#75a44455}
.franchise-doom .franchise-backplate{background:linear-gradient(135deg,#23301c,#111710);transform:rotate(1.6deg)}
.franchise-doom .franchise-surface{background:radial-gradient(ellipse at 85% 60%,#46712455,transparent 68%),linear-gradient(115deg,#121b16,#1c291a 70%,#23331b)}
.franchise-doom .franchise-surface:after{border-color:#b8ed760d}
.franchise-doom .eyebrow{color:#a9cb8b}
.franchise-doom h3{font-size:clamp(28px,2.8vw,46px);letter-spacing:-1.8px;margin-top:11px;margin-bottom:8px}
.franchise-doom .franchise-tagline{color:#a5b3a0}
.franchise-doom .franchise-link{color:#d3e5c5;margin-top:22px}
.franchise-doom .franchise-character{right:-5px;width:53%;height:calc(100% + 23px);transform:translate3d(var(--art-x),var(--art-y),0) rotate(5deg);filter:drop-shadow(-13px 9px 9px #030b04b3)}
.franchise-doom .tile-arrow{color:#cdeaa9;border-color:#a0ce6b40;background:#141e14b3}
.franchise-doom .franchise-watermark{color:#a9e85e14;right:0;font-size:85px;letter-spacing:-7px}
.franchise-doom .franchise-shard{background:linear-gradient(125deg,#a5c087,#384b35 45%,#d8edc7 48%,#1c2a1c 90%)}
.franchise-doom .shard-one{right:16%;top:-8px;width:14px;height:25px;transform:rotate(-20deg)}
.franchise-doom .shard-two{right:45%;bottom:28px}
.franchise-portal{position:absolute;right:-8px;top:9px;width:48%;aspect-ratio:1;transform:rotate(-23deg) scaleX(.72);border:2px solid #a0ef5599;border-radius:50%;box-shadow:inset 0 0 18px #a5e94444,0 0 24px #91e34b26;animation:portal-breathe 4s ease-in-out infinite alternate}
.franchise-portal i{position:absolute;inset:8px;border:2px dashed #c4ff8088;border-radius:50%;animation:portal-turn 24s linear infinite}
.franchise-portal i:nth-child(2){inset:-10px;border-width:1px;border-style:dashed;border-color:#76a64777;animation-direction:reverse;animation-duration:36s}
.franchise-portal i:nth-child(3){inset:20px;border:1px solid #ceff9488;animation:none}
@keyframes portal-turn{to{transform:rotate(360deg)}}
@keyframes portal-breathe{to{opacity:.6;filter:brightness(1.2)}}
.franchise-energy{position:absolute;inset:0;pointer-events:none}
.franchise-energy i{position:absolute;left:57%;top:24%;height:34px;width:2px;transform:rotate(26deg);background:linear-gradient(transparent,#c4ff80,transparent);animation:energy-drift 4s ease-in-out infinite}
.franchise-energy i:nth-child(2){left:91%;top:18%;height:19px;animation-delay:-1s}.franchise-energy i:nth-child(3){left:46%;top:75%;height:22px;animation-delay:-2s}.franchise-energy i:nth-child(4){left:83%;top:65%;height:27px;animation-delay:-3s}
@keyframes energy-drift{0%,100%{opacity:.25;translate:0 4px}50%{opacity:.85;translate:4px -5px}}
@media(min-width:1550px){.franchise-banner{min-height:210px;padding:28px 30px}.franchise-character{height:calc(100% + 37px)}.franchise-banner .eyebrow{font-size:8px}.franchise-tagline{font-size:11px}.franchise-link{font-size:10px}}
@media(min-width:801px) and (max-width:1150px){.franchise-banner{min-height:180px;padding:22px 20px}.franchise-banner h3{font-size:15px;letter-spacing:-.8px}.franchise-banner h3 small{font-size:9px;letter-spacing:5px}.franchise-doom h3{font-size:30px}.franchise-banner .eyebrow{font-size:6px;letter-spacing:1.3px}.franchise-tagline,.franchise-link{font-size:8px}.franchise-link{gap:6px}.franchise-character{right:-9px;width:54%}}
@media(max-width:800px){.franchise-banner{min-height:188px;padding:24px}.franchise-banner h3{font-size:18px}.franchise-doom h3{font-size:35px}.franchise-banner .eyebrow{font-size:7px}.franchise-character{width:56%;right:-8px}.franchise-link{font-size:9px}}
@media(max-width:550px){.franchise-banner{min-height:192px;margin-top:6px;padding:25px 23px;border-radius:18px}.franchise-banner+.franchise-banner{margin-top:14px}.franchise-banner h3{font-size:19px;margin:12px 0 10px}.franchise-doom h3{font-size:39px;margin-top:10px}.franchise-banner .franchise-copy{max-width:59%}.franchise-character{width:54%;height:calc(100% + 29px)}.franchise-doom .franchise-character{width:54%;height:calc(100% + 26px)}.franchise-tagline{font-size:10px}.franchise-banner .tile-arrow{right:11px;top:11px}}
@media(prefers-reduced-motion:reduce){.franchise-banner,.franchise-banner *{animation:none!important;transition:none!important}.franchise-banner,.franchise-banner:hover{transform:none}}