@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101017;--panel:#191922;--line:#36353f;--muted:#aaa6b7;--text:#efeee7;--lime:#c9fa73;--pink:#fd80b0;--cyan:#82e8e0;--mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed','Arial Narrow',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:16px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan)}[hidden]{display:none!important}.page-grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.025;background:repeating-linear-gradient(0deg,transparent,transparent 2px,#fff 3px,transparent 4px)}.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;gap:20px}.brand{display:flex;align-items:center;gap:5px;font-weight:700;font-size:25px;letter-spacing:-1px;text-decoration:none;color:var(--text)}.brand>span:not(.brand-icon){color:var(--lime)}.brand-icon{font-size:40px;margin-right:10px;color:var(--lime);line-height:1}.brand small{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:2px;margin-left:12px}.header-meta,.mono{font-family:var(--mono);font-size:12px;letter-spacing:.8px}.header-meta{color:var(--muted)}.text-button{border:0;background:none;color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.6px;padding:10px 0}.text-button:hover{color:var(--lime)}.text-button span{display:inline-grid;place-items:center;border:1px solid var(--line);width:22px;height:22px;margin-left:8px}main{max-width:1320px;margin:auto;padding:0 48px}.intro{padding:39px 0 32px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.3px;color:var(--lime);line-height:1.7}.eyebrow>span{display:inline-block;width:6px;height:6px;background:var(--lime);margin-right:7px}.intro h1{font-family:var(--display);font-size:68px;line-height:.92;letter-spacing:-.7px;margin:16px 0}.intro h1 br{display:none}.intro h1 em{font-style:normal;color:var(--pink);margin-left:12px}.intro p{color:var(--muted);margin:0;font-size:15px}.intro-tag{display:flex;flex-direction:column;text-align:right;gap:7px;transform:rotate(-4deg);padding:14px 18px;border:1px solid #65505c;color:var(--pink)}.intro-tag span{font:10px var(--mono);letter-spacing:2px}.intro-tag strong{font-size:25px;letter-spacing:3px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-bottom:24px;background:#14141c}.steps>div{padding:17px 21px;display:flex;align-items:center;gap:12px;font:600 13px var(--mono);color:#a19cab;border-right:1px solid var(--line);position:relative}.steps>div:last-child{border:0}.steps span{font-size:12px;color:#777280}.steps small{font:12px 'Space Grotesk',sans-serif;margin-left:auto;color:#a19cab}.steps .active{color:var(--lime);background:#c9fa7308}.steps .active:after{content:'';position:absolute;height:2px;background:var(--lime);bottom:-1px;left:0;right:0}.steps .active span{color:var(--lime)}.draft-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:24px}.panel{background:var(--panel);border:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--line);gap:10px}.panel-heading h2{font:500 12px var(--mono);letter-spacing:1px;margin:0;display:flex;align-items:center;gap:9px}.tiny-square{height:7px;width:7px;background:var(--lime)}.tiny-square.pink{background:var(--pink)}.muted{color:var(--muted)}.wheel-zone{position:relative;padding:20px 15px 12px;background-image:linear-gradient(#9991 1px,transparent 1px),linear-gradient(90deg,#9991 1px,transparent 1px);background-size:28px 28px;overflow:hidden}.orbital-text{text-align:center;font:10px var(--mono);letter-spacing:2px;color:var(--muted);margin-bottom:12px}.orbital-text span{color:var(--pink);padding:0 8px}.wheel-wrap{position:relative;width:min(100%,354px);aspect-ratio:1;margin:auto;border-radius:50%;box-shadow:0 0 0 1px #57515f,0 0 0 8px #24232d,0 0 0 9px #3b3844,0 0 55px #fc7db019}.wheel-wrap:after{content:'';position:absolute;inset:5px;border:1px solid #ffffff20;border-radius:50%;pointer-events:none}canvas{width:100%;height:100%;display:block;border-radius:50%}.pointer{position:absolute;z-index:3;top:-13px;left:calc(50% - 10px);width:20px;height:28px;clip-path:polygon(0 0,100% 0,50% 100%);background:var(--lime);filter:drop-shadow(0 0 8px var(--lime))}.wheel-center{position:absolute;inset:36%;border-radius:50%;background:#15151e;border:5px solid #393341;box-shadow:0 0 0 1px #777;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}.wheel-center span{font:8px var(--mono);letter-spacing:2px;color:#c4bfcc}.wheel-center strong{font-size:47px;line-height:1.1;color:var(--lime)}.wheel-caption{text-align:center;font:11px var(--mono);color:var(--muted);margin-top:22px}.spin-controls{padding:15px 26px 18px}.primary{width:100%;display:flex;align-items:center;justify-content:center;gap:18px;min-height:49px;background:var(--lime);color:#192017;border:1px solid var(--lime);font:700 14px var(--mono);letter-spacing:1px;box-shadow:3px 3px 0 #0b0c0e;transition:background .15s,transform .15s}.primary:hover:not(:disabled){background:#dcff9d;transform:translateY(-1px)}.primary span{font-size:23px;line-height:1}.spin-controls p{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 0}.identity{display:flex;align-items:center;padding:22px;gap:14px}.identity-mark{display:grid;place-items:center;width:56px;height:58px;background:repeating-linear-gradient(-45deg,#fd80b00a,#fd80b00a 4px,transparent 4px,transparent 8px);border:1px solid #fd80b050;color:var(--pink);font:700 34px var(--display)}.identity>div:nth-child(2){flex:1;min-width:0}.identity .eyebrow{font-size:10px;color:var(--muted)}.identity input{background:none;border:none;border-bottom:1px solid transparent;color:var(--text);font-weight:600;font-size:20px;padding:4px 0;width:100%}.identity input:hover{border-color:var(--line)}.ovr{display:flex;flex-direction:column;align-items:center;border-left:1px solid var(--line);padding-left:20px}.ovr strong{font:700 35px var(--display);color:var(--lime)}.ovr span{font:10px var(--mono);color:var(--muted)}.attributes{padding:0 22px;display:grid;gap:8px}.attribute{width:100%;color:var(--text);display:flex;align-items:center;text-align:left;gap:13px;background:#15151d;border:1px dashed #3e3a48;padding:11px 14px;min-height:58px}.attribute:disabled{opacity:1;cursor:default}.attribute.available{border:1px solid #c9fa7366;background:#c9fa7307}.attribute.available:hover{background:#c9fa7317;border-color:var(--lime)}.attr-icon{font-size:22px;color:#aca4bb;width:25px;text-align:center}.attr-copy{flex:1;display:flex;flex-direction:column;gap:2px}.attr-copy strong{font-size:14px;font-weight:500}.attr-copy small{color:var(--muted);font:10px var(--mono)}.attr-value{font:500 18px var(--mono);color:#686071}.attribute.assigned{border-style:solid;border-color:#464150}.attribute.assigned .attr-value{color:var(--lime)}.attribute.available .attr-value{color:var(--lime)}.attribute.assigned .attr-icon{color:var(--pink)}.build-footer{padding:22px}.build-progress{height:3px;background:#35313d}.build-progress>div{height:100%;background:var(--pink);width:0;transition:width .3s}.build-footer p{font-size:12px;color:var(--muted);margin:12px 0 18px}.secondary{background:transparent;border-color:#555448;color:var(--lime)}.secondary:hover:not(:disabled){color:#15151d}.pull{padding:17px 22px;background:#fd80b00a;border-top:1px solid #fd80b04a}.pull-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.pull h3{font-family:var(--display);font-size:30px;text-transform:uppercase;margin:3px 0}.pull p{color:var(--muted);font-size:13px;margin:6px 0 0}.pull-series{font:10px var(--mono);text-transform:uppercase;letter-spacing:1px}.pull-rank{font:700 35px var(--display);color:var(--pink)}.bottom-strip{display:flex;justify-content:space-between;align-items:center;padding:18px 0 26px;font:11px var(--mono);letter-spacing:1px;color:var(--muted)}.bottom-strip b{color:var(--text);font-weight:400}.bottom-strip button{font-size:11px}footer{border-top:1px solid var(--line);padding:23px 4.5%;display:flex;justify-content:space-between;gap:20px;font:10px var(--mono);color:#928b9f}footer b{font-weight:400;color:#6c6578;margin-left:10px}footer i{font-style:normal;color:var(--lime);margin-left:12px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:32px 0 24px}.section-title h2{font:700 38px var(--display);margin:6px 0}.chip{padding:12px;border:1px solid var(--lime);color:var(--lime);font:14px var(--mono)}.campaigns{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.campaign-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);overflow:hidden}.campaign-art{height:160px;background:linear-gradient(0deg,var(--panel),transparent),url('city.png') center 45%/cover}.campaign-card:nth-child(2) .campaign-art{filter:hue-rotate(40deg)}.campaign-card:nth-child(3) .campaign-art{filter:hue-rotate(160deg)}.campaign-body{padding:0 24px 24px;display:flex;flex-direction:column;flex:1}.campaign-card h3{font:700 32px var(--display);margin:12px 0}.campaign-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 20px}.campaign-card .boss-list{font:11px/1.8 var(--mono);color:var(--pink);margin:auto 0 22px}.campaign-card .eyebrow{color:var(--cyan)}.back{margin:20px 0}.story-panel{position:relative;overflow:hidden;min-height:240px}.story-art{position:absolute;inset:0;background:linear-gradient(90deg,#12131af5 5%,#12131ac9 53%,#12131a22),url('city.png') center 48%/cover}.story-content{position:relative;padding:30px;max-width:820px}.story-content h2{font:700 44px var(--display);margin:8px 0}.story-content p{font-size:15px;line-height:1.7;color:#c5c1ce;max-width:680px}.chapter-map{display:flex;gap:22px;font:11px var(--mono);margin-top:24px;color:#b5a8c1}.chapter-map .current{color:var(--lime)}.chapter-map .cleared{color:var(--cyan)}.battle-layout{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;margin-top:24px}.combatants{display:flex;gap:22px;padding:26px}.combatants>div{flex:1;min-width:0}.combatants span{font:12px var(--mono);display:block;overflow-wrap:anywhere}.combatants strong{display:block;font:12px var(--mono);color:var(--muted);margin:8px 0}.combatants .versus{align-self:center;flex:0;color:var(--pink);font-size:16px}.enemy{text-align:right}.hp-track{height:7px;background:#34313d}.hp-track div{height:100%;background:var(--cyan);transition:width .25s}.enemy .hp-track div{background:var(--pink)}.battle-log{height:275px;overflow-y:auto;padding:0 26px 22px;font:12px/1.8 var(--mono)}.log-line{padding:7px 0;border-bottom:1px solid #ffffff09;animation:appear .25s}.log-line.hurt{color:#ff9abd}.log-line.special{color:var(--lime)}.log-line.dodge{color:var(--cyan)}.log-line.note{color:#ada6bc}.tactics-body{padding:22px}.tactics-body>p:first-child{font-size:14px;line-height:1.6;margin:0 0 22px;color:var(--muted)}fieldset{border:0;padding:0;margin:0 0 22px}legend{font:10px var(--mono);letter-spacing:1px;color:var(--muted);margin-bottom:12px}.tactic{display:flex;gap:12px;padding:12px;border:1px solid var(--line);margin:8px 0;cursor:pointer}.tactic:has(input:checked){border-color:var(--lime);background:#c9fa7307}.tactic input{accent-color:var(--lime)}.tactic strong{font-size:14px;font-weight:500;display:block;margin-bottom:4px}.tactic small{font-size:12px;color:var(--muted)}.small{font-size:12px;line-height:1.6}.battle-result{padding:22px 26px;border-top:1px solid var(--line)}.battle-result h3{font:700 32px var(--display);color:var(--lime);margin:0 0 8px}.battle-result p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}.battle-result.loss h3{color:var(--pink)}dialog{max-width:550px;width:calc(100% - 32px);background:#1c1a26;color:var(--text);border:1px solid #716078;padding:36px;box-shadow:8px 8px 0 #08080c}dialog::backdrop{background:#07060cbb;backdrop-filter:blur(5px)}dialog h2{font:700 36px var(--display);margin:12px 0 24px}dialog li,dialog p{font-size:14px;line-height:1.8;color:#c3bacb}dialog li{padding:0 0 15px 6px}dialog strong{color:var(--text)}dialog ol{padding-left:20px}.dialog-close{position:absolute;right:20px;top:10px}.dialog-actions{display:flex;gap:25px;align-items:center}.dialog-actions button{flex:1}@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){main{padding-top:12px}.intro{padding-top:42px}.wheel-wrap{width:385px}}@media(max-width:1100px){main{padding:0 28px}.intro h1{font-size:57px}.steps small{display:none}.header-meta{display:none}.intro-tag{display:none}.wheel-wrap{width:315px}.identity{padding:18px}.attributes{padding:0 18px}.attribute{padding:11px 10px}.campaign-body{padding:0 18px 20px}.campaign-card h3{font-size:28px}.draft-layout{grid-template-columns:1fr 1fr;gap:18px}footer>span:last-child{display:none}}@media(max-width:760px){.topbar{height:72px;padding:0 20px}.brand{font-size:22px}.brand small{display:none}main{padding:0 18px}.intro{padding:28px 0}.intro h1{font-size:52px;line-height:1}.intro h1 br{display:block}.intro h1 em{margin-left:0}.intro p{font-size:13px;margin-top:12px}.eyebrow{font-size:10px}.steps{margin-bottom:18px}.steps>div{font-size:10px;line-height:1.5;padding:11px 9px;gap:7px;align-items:flex-start}.steps span{font-size:10px}.draft-layout{grid-template-columns:1fr}.wheel-wrap{width:min(78vw,350px)}.panel-heading{padding:17px 18px}.wheel-zone{padding-top:20px}.spin-controls{padding:15px 20px 20px}.build-panel{scroll-margin-top:18px}.campaigns{grid-template-columns:1fr}.campaign-art{height:130px}.campaign-card h3{font-size:32px}.campaign-card p{font-size:15px}.section-title{align-items:flex-start;gap:15px}.section-title h2{font-size:32px}.chip{font-size:12px;white-space:nowrap}.battle-layout{grid-template-columns:1fr;gap:18px}.story-content{padding:23px}.story-content h2{font-size:36px}.chapter-map{gap:14px;font-size:10px;flex-wrap:wrap}.combatants{padding:22px 18px;gap:12px}.battle-log{padding:0 18px 18px;height:245px}.bottom-strip{font-size:9px;letter-spacing:0}footer{flex-direction:column;font-size:10px;line-height:1.6;gap:8px;padding:20px}.header-meta{display:none}.text-button{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Character-card edition */
:root{--panel:#181923}.intro{padding:30px 0 26px}.intro h1{font-size:60px}.draft-layout{grid-template-columns:minmax(0,1.35fr) minmax(345px,1fr)}.spin-panel{min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#53355a45,transparent 70%),#15151f}.reel-zone{padding:24px 0 0}.reel-heading{display:flex;justify-content:center;gap:22px;font:11px var(--mono);letter-spacing:1.4px;color:var(--muted);margin-bottom:26px}.reel-count{color:var(--pink)}.reel-window{height:346px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(0deg,#11121dcc,transparent),url('city.png') center/cover}.reel-window:before,.reel-window:after{content:'';position:absolute;top:0;bottom:0;width:55px;z-index:3;pointer-events:none}.reel-window:before{left:0;background:linear-gradient(90deg,#15151f,transparent)}.reel-window:after{right:0;background:linear-gradient(-90deg,#15151f,transparent)}.reel-track{height:100%;display:flex;gap:14px;align-items:center;position:absolute;left:0;top:0;will-change:transform}.character-card{flex:0 0 208px;width:208px;height:294px;position:relative;overflow:hidden;border:1px solid #ffffff40;box-shadow:0 12px 30px #0008;background:#232431;transform:scale(.95);transition:filter .3s,transform .3s;filter:brightness(.68) saturate(.8)}.character-card>img{height:100%;width:100%;object-fit:cover;object-position:center 22%;display:block}.card-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07081122 0,transparent 30%,#0a0b1680 57%,#090a13 100%)}.card-serial{position:absolute;top:12px;left:12px;background:#0d0c16bb;color:#fff;padding:5px 7px;font:10px var(--mono);letter-spacing:1px;border-left:2px solid var(--card-accent)}.card-info{position:absolute;bottom:0;left:0;right:0;padding:15px}.card-series{color:var(--card-accent);font:10px var(--mono);letter-spacing:.5px;text-transform:uppercase}.card-info h3{font:700 31px/1 var(--display);margin:7px 0 13px;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}.card-power{border-top:1px solid #ffffff40;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:5px}.card-power span{font:9px var(--mono);color:#d5d2dc}.card-power b{color:var(--card-accent);font:600 19px var(--mono)}.reel-target{position:absolute;top:20px;bottom:20px;width:208px;left:50%;transform:translateX(-50%);border:2px solid var(--lime);z-index:4;pointer-events:none;box-shadow:0 0 22px #c9fa731a}.reel-target>span{position:absolute;left:50%;transform:translateX(-50%);font-size:18px;line-height:1;color:var(--lime);text-shadow:0 0 12px #c9fa7377;top:-19px}.reel-target>span:last-child{top:auto;bottom:-19px}.reel-target i{position:absolute;inset:-6px;border:1px solid #c9fa7338}.reel-window.landed .character-card:nth-child(4){filter:brightness(1) saturate(1.12);transform:scale(1)}.reel-window.is-spinning .character-card{filter:brightness(.9)}.reel-window.landed .reel-target{box-shadow:0 0 35px #c9fa7333}.reel-caption{text-align:center;min-height:42px;padding:17px 15px 0;font:11px var(--mono);letter-spacing:1px;color:var(--lime)}.spin-controls{padding:22px 26px}.spin-controls .primary{min-height:56px}.pull{background:#12131d;border-top:1px solid #494051}.pull-portrait{width:65px;height:80px;object-fit:cover;object-position:center 20%;border:1px solid var(--pink)}.pull-top>div:nth-child(2){flex:1}.pull h3{font-size:29px}.pull-rank{text-align:center}.pull-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:16px}.pull-stats>span{background:#ffffff05;border:1px solid #ffffff12;display:flex;flex-direction:column;text-align:center;padding:9px 2px;gap:6px}.pull-stats small{font:9px var(--mono);color:var(--muted)}.pull-stats b{font:500 17px var(--mono);color:var(--cyan)}.attr-portrait{height:42px;width:36px;object-fit:cover;object-position:center 20%;border:1px solid #66556d;flex-shrink:0}.attribute{min-height:64px}.attribute.assigned{padding-top:8px;padding-bottom:8px}.attr-copy small{font-size:11px}.identity{padding:20px 22px}.build-footer{padding-top:18px}.campaigns{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.campaign-card{transition:transform .2s,border-color .2s}.campaign-card:hover{transform:translateY(-4px);border-color:var(--path-color)}.campaign-poster{height:252px;position:relative;isolation:isolate;overflow:hidden;background:#252330}.poster-grid{position:absolute;inset:0;background:linear-gradient(120deg,transparent,#17131dcc),url('city.png') center/cover;opacity:.65}.poster-face{position:absolute;object-fit:cover;object-position:50% 20%;width:48%;height:96%;top:4%;border:1px solid #ffffff30;transform:rotate(-9deg);left:-6%;filter:saturate(.8) brightness(.7)}.poster-face-1{left:auto;right:-6%;transform:rotate(9deg)}.poster-face-2{left:28%;width:48%;height:110%;top:-2%;transform:rotate(0);filter:none;box-shadow:0 0 50px #0a0714}.campaign-poster:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0003,transparent 30%,#19192211 45%,var(--panel) 100%)}.poster-badge{position:absolute;z-index:2;top:14px;left:16px;padding:6px 8px;background:#0b0b16d9;border-left:2px solid var(--path-color);color:var(--path-color);font:10px var(--mono);letter-spacing:1px}.poster-title{position:absolute;bottom:14px;left:22px;right:15px;z-index:2;font:800 43px/.95 var(--display);color:var(--path-color);text-shadow:0 2px 10px #000;opacity:.95}.campaign-body{padding:4px 22px 22px}.campaign-card h3{font-size:30px;margin:10px 0}.campaign-card p{font-size:14px;line-height:1.6}.campaign-card .boss-list{display:flex;flex-direction:column;gap:6px;margin:0 0 22px}.boss-list>span{display:flex;align-items:center;gap:9px;font:12px var(--mono);color:#d6ccd9;background:#ffffff04}.boss-list img{height:30px;width:27px;object-fit:cover;object-position:50% 20%}.boss-list small{font:10px var(--mono);color:var(--path-color)}.campaign-body .primary{margin-top:auto}.story-panel{min-height:260px;background:#12131e}.story-content{max-width:85%;z-index:2}.story-content p{max-width:630px;text-shadow:0 1px 3px #000}.story-villain{position:absolute;right:0;top:0;width:28%;height:100%;object-fit:cover;object-position:center 20%;mask-image:linear-gradient(90deg,transparent,#000 45%);opacity:.8}.chapter-map{gap:10px;margin-top:18px;flex-wrap:wrap}.chapter-map>span{display:flex;align-items:center;gap:8px;background:#0b0c16aa;border:1px solid #ffffff24;padding:4px 10px 4px 4px;font:10px var(--mono)}.chapter-map img{width:29px;height:32px;object-fit:cover;object-position:center 20%;filter:grayscale(1);opacity:.6}.chapter-map .current{border-color:var(--lime)}.chapter-map .current img,.chapter-map .cleared img{filter:none;opacity:1}.chapter-map b{font-weight:400}.battle-layout{grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr)}.combat-arena{height:272px;display:flex;justify-content:space-around;align-items:center;padding:22px 35px;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(#0d0c18aa,#151222b0),url('city.png') center 65%/cover}.arena-grid{position:absolute;inset:0;background:linear-gradient(90deg,#85e5dd08,transparent 40%,#fd80b01a);z-index:-1}.fighter{height:216px;width:158px;position:relative;border:1px solid var(--cyan);box-shadow:-5px 5px 0 #82e8e022;transition:opacity .3s,filter .3s}.enemy-fighter{border-color:var(--pink);box-shadow:5px 5px 0 #fd80b022}.enemy-fighter>img{width:100%;height:100%;object-fit:cover;object-position:center 20%}.fighter-label{position:absolute;left:0;right:0;bottom:0;background:#11111ee6;font:10px var(--mono);letter-spacing:.5px;padding:8px 4px;text-align:center;text-transform:uppercase;color:var(--cyan)}.enemy-fighter .fighter-label{color:var(--pink)}.dna-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);height:100%;padding-bottom:28px;gap:2px;background:#0d0f1a}.dna-mosaic>div{position:relative;overflow:hidden}.dna-mosaic img{height:100%;width:100%;object-fit:cover;object-position:center 20%}.dna-mosaic span{position:absolute;bottom:0;right:0;font-size:12px;background:#10121dcc;color:var(--cyan);padding:2px 4px}.arena-center{display:flex;flex-direction:column;align-items:center;gap:15px;max-width:115px;text-align:center;z-index:2}.versus-big{font:900 italic 50px var(--display);color:var(--pink);text-shadow:3px 3px 0 #070711}.arena-center>span:last-child{font:10px var(--mono);color:var(--lime);letter-spacing:1px;min-height:26px}.damage-number{position:absolute;right:-15px;top:12px;font:800 36px var(--display);color:white;text-shadow:2px 2px 0 #c01c65;z-index:5;opacity:0;pointer-events:none}.damage-number.pop{animation:damageFloat .55s ease-out}.fighter.impact{animation:impact .3s}.fighter.special-impact{animation:impact .3s,flash .45s}.fighter.evade{animation:evade .3s}.combat-arena.finished .enemy-fighter,.combat-arena.defeated .player-fighter{filter:grayscale(1);opacity:.4}.combatants{padding:18px 22px}.battle-log{height:180px;font-size:12px}.tactics-panel{align-self:start}.story-content .eyebrow{font-size:11px}footer a{color:var(--cyan);text-underline-offset:3px}@keyframes damageFloat{0%{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translateY(-38px) scale(.9)}}@keyframes impact{25%{transform:translateX(8px);filter:brightness(1.7)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}@keyframes flash{50%{box-shadow:0 0 55px var(--lime);border-color:var(--lime)}}@keyframes evade{50%{transform:translateX(-18px);opacity:.4}}
@media(max-width:1100px){.draft-layout{grid-template-columns:minmax(0,1.2fr) minmax(330px,1fr)}.reel-heading{gap:12px;font-size:10px}.character-card{width:180px;flex-basis:180px;height:280px}.reel-target{width:180px;top:27px;bottom:27px}.reel-window{height:338px}.card-info{padding:12px}.card-info h3{font-size:27px}.card-power span{font-size:8px}.campaigns{grid-template-columns:repeat(2,minmax(0,1fr))}.battle-layout{grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr)}.combat-arena{padding:20px 18px}.fighter{width:130px;height:195px}.arena-center{max-width:85px}.arena-center>span:last-child{font-size:9px}.story-content{max-width:88%}.story-content p{max-width:75%}}
@media(max-width:760px){.intro h1{font-size:49px}.draft-layout{grid-template-columns:minmax(0,1fr)}.reel-heading{font-size:10px;gap:15px}.reel-window{height:335px}.reel-target{top:25px;bottom:25px}.character-card{height:280px;width:185px;flex-basis:185px}.reel-target{width:185px}.reel-zone{padding-top:20px}.reel-heading{margin-bottom:20px}.spin-controls{padding:20px}.pull{padding:18px}.pull-stats small{font-size:8px}.pull-stats b{font-size:16px}.campaigns{grid-template-columns:1fr}.campaign-poster{height:265px}.campaign-body{padding:4px 22px 24px}.story-content{max-width:100%;padding:24px}.story-content p{max-width:100%;font-size:14px}.story-villain{width:48%;opacity:.25}.story-content h2{font-size:34px;max-width:85%}.chapter-map{gap:5px}.chapter-map>span{font-size:8px;gap:4px;padding-right:5px}.chapter-map img{width:23px;height:29px}.battle-layout{grid-template-columns:minmax(0,1fr)}.combat-arena{height:250px;padding:20px 18px}.fighter{width:126px;height:190px}.arena-center{max-width:65px}.versus-big{font-size:40px}.fighter-label{font-size:8px}.pull-top{gap:12px}.pull-rank{font-size:30px}.pull h3{font-size:26px}.battle-log{height:185px}}
.reel-window:not(.is-spinning):not(.landed) .character-card:nth-child(4){filter:brightness(.95) saturate(1);transform:scale(1)}

.header-actions a.text-button{display:inline-block;text-decoration:none}
.header-actions #account-button{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}@media(max-width:760px){.header-actions #account-button{max-width:110px}}

/* Recommendation badge on the game draft, shown while the reel is in motion. */
.attribute.best-attribute{position:relative;border:2px solid #f5c957!important;background:linear-gradient(100deg,#f5c95712,#15151d 62%);box-shadow:0 0 0 1px #f5c95730,0 0 18px #f5c95737,inset 0 0 16px #f5c95712;z-index:1}
.attribute.best-attribute:after{content:'BEST';position:absolute;right:12px;top:-10px;padding:3px 7px;background:linear-gradient(145deg,#ffe9a3,#f2bf47);border:1px solid #fff0bd;border-radius:999px;color:#30200a;font:800 8px/1.2 var(--mono);letter-spacing:.12em;box-shadow:0 2px 8px #0008,0 0 10px #f5c95755}
.attribute.best-attribute:disabled{opacity:1}
@media(prefers-reduced-motion:reduce){.attribute.best-attribute{box-shadow:inset 0 0 12px #f5c95712}}
.account-legal{display:flex;flex-wrap:wrap;gap:10px 18px;width:100%;margin-top:16px}.account-legal a{color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}.account-legal a:hover{color:var(--lime)}

.free-launch .billing-legal-link{display:none!important}