:root{--bg:#000;--panel:rgba(0,0,0,.82);--line:#3b3b3b;--text:#fff;--dim:#bdbdbd;--luck:#f2b84b;--luckdk:#f2b84b;--speed:#4fd1c5;--hover:#1e1e1e}
*{box-sizing:border-box}
body{margin:0;padding:20px 12px;min-height:100vh;color:var(--text);background:var(--bg) url(images/bg.png) center/cover fixed no-repeat;font:16px/1.55 'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif}
main{max-width:860px;margin:0 auto;padding:28px 20px 40px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:18px}
h1{font-size:2.1rem;font-weight:800;margin:0 0 24px}
h2{font-size:1.1rem;font-weight:700;margin:28px 0 12px}
.note{color:var(--dim);font-size:.9rem;margin:10px 0 0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.seg input:focus-visible+span{outline:2px solid var(--luckdk);outline-offset:2px}
.slots-wrap{position:relative}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{background:var(--panel);border:2px dashed var(--line);border-radius:12px;padding:14px 8px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;transition:border-color .25s,transform .25s,background .25s}
.slot:hover{transform:translateY(-2px)}
.slot.filled{border-style:solid}
.slot.active{border-style:solid;border-color:var(--luck);background:#161616}
.slot .label{color:var(--dim);font-size:.85rem;font-weight:600}
.slot .plus{font-size:2.4rem;line-height:1;color:var(--dim)}
.slot img{width:84px;height:84px;object-fit:contain}
.slot .name{font-size:.95rem;font-weight:600}
.menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:5;background:#0a0a0a;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.7);overflow:hidden;max-height:0;opacity:0;transform:translateY(-10px);visibility:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .3s,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
.menu.open{max-height:360px;opacity:1;transform:none;visibility:visible;transition-delay:0s}
.list{max-height:360px;overflow-y:auto;padding:6px}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:6px 10px;background:none;border:0;border-radius:8px;text-align:left;font-weight:600;transition:background .2s}
.row:hover{background:var(--hover)}
.row.on{background:#2a2410;color:var(--luckdk)}
.row img,.noimg{width:44px;height:44px;flex:none;object-fit:contain}
.noimg{border-radius:8px;border:1px dashed var(--line)}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{position:relative;z-index:1;cursor:pointer;text-align:center}
.seg label span{display:block;padding:9px 0;font-weight:700;transition:color .3s}
.seg label+label::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--line);transition:opacity .3s}
.seg label:has(input:checked)::before,.seg label:has(input:checked)+label::before{opacity:0}
.seg input:checked+span{color:#000}
.thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:var(--luck);border-radius:9px;transition:transform .4s cubic-bezier(.34,1.3,.5,1)}
.primary{margin-top:26px;width:100%;padding:14px;border:0;border-radius:12px;background:var(--luck);color:#000;font-weight:800;font-size:1.1rem;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .3s}
.primary:active,.primary.press{transform:scale(.94);background:#b8862a;transition-duration:.15s}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.card{background:var(--panel);border-left:4px solid var(--luck);border-radius:10px;padding:12px 14px}
.card.speed{border-color:var(--speed)}
.card .t{color:var(--dim);font-size:.85rem;font-weight:600}
.card .v{font-size:1.65rem;font-weight:800;font-variant-numeric:tabular-nums}
.card .s{color:var(--dim);font-size:.85rem;font-variant-numeric:tabular-nums}
@media(max-width:520px){.slots{gap:8px}.slot{min-height:150px}.slot img{width:60px;height:60px}main{padding:22px 14px 32px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01s!important}}
.buffs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-height:62px}
.buffs .note{margin:0}
.buff{width:58px;height:58px;padding:4px;display:flex;align-items:center;justify-content:center;font-weight:800;background:var(--panel);border:2px solid var(--line);border-radius:10px;transition:transform .2s,border-color .2s}
.buff:hover,.buff:focus-visible{transform:translateY(-3px);border-color:var(--luck)}
.buff img{width:100%;height:100%;object-fit:contain}
.tip{position:fixed;left:0;top:0;z-index:20;min-width:210px;max-width:320px;padding:10px 14px;background:rgba(6,6,6,.96);border:1px solid #4a4a4a;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .15s}
.tip.show{opacity:1}
.tt{text-align:center;font-size:1.15rem;font-weight:800;padding-bottom:6px;margin-bottom:7px;border-bottom:1px solid #5a5a5a}
.td{font-size:.95rem;font-weight:700;line-height:1.45}
.u{text-decoration:underline}
.c-g{color:#5ee27a}.c-c{color:#52d6ff}.c-r{color:#ff5a5a}.c-y{color:#ffd23f}.c-v{color:#b07cff}.c-dv{color:#7a3cc8}.c-bl{color:#4c8dff}.c-dr{color:#c0262d}.c-o{color:#ff9a2e}.c-lil{color:#dcb4ff}.c-w{color:#fff}
.c-k{color:#000;text-shadow:-1px -1px 0 #a66bff,1px -1px 0 #a66bff,-1px 1px 0 #a66bff,1px 1px 0 #a66bff,0 0 4px #a66bff}
.field{position:absolute;right:0;top:calc(100% + 8px);z-index:4;width:max(calc((100% - 24px)/3),200px);padding:12px;background:#0a0a0a;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s .4s}
.field.show{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.field label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;color:var(--dim)}
.field input{width:100%;padding:9px 10px;font:inherit;font-weight:700;color:var(--text);background:var(--panel);border:2px solid var(--line);border-radius:10px;transition:border-color .2s}
.field input:focus{outline:0;border-color:var(--luck)}
.field small{font-size:.8rem;color:var(--luck)}
.field input{-moz-appearance:textfield;appearance:textfield}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gname,.slot .gname{font-family:'Russo One','Nunito',sans-serif;font-weight:400;font-size:1.05rem;letter-spacing:.02em;-webkit-text-stroke:4px #000;paint-order:stroke fill;text-shadow:0 2px 0 #000}
h2 .fold{display:flex;align-items:center;gap:10px;padding:0;background:none;border:0;font:inherit;font-weight:700;color:var(--text)}
.chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .35s}
.fold[aria-expanded=true] .chev{transform:rotate(45deg)}
.pbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.pbody.open{grid-template-rows:1fr}
.pinner{min-height:0;overflow:hidden;padding:4px;margin:-4px;visibility:hidden;transition:visibility 0s .45s}
.pbody.open .pinner{visibility:visible;transition-delay:0s}
.seg.two{grid-template-columns:repeat(2,1fr);margin-bottom:14px}
.seg.two .thumb{width:calc((100% - 8px)/2)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
.pt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:var(--panel);border:2px solid var(--line);border-radius:10px;font-size:.78rem;font-weight:700;line-height:1.2;text-align:center;animation:pop .35s backwards;transition:transform .2s,border-color .2s,filter .3s,background .2s}
.pt img,.pt .noimg{width:52px;height:52px;flex:none;object-fit:contain}
.pt:hover{transform:translateY(-2px)}
.pt.on{border-color:var(--luck);background:#1c1a10}
.pt.off{filter:brightness(.3);cursor:not-allowed}
.pt.off:hover{transform:none}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
.seg.nav{max-width:520px;margin:0 auto 16px}
.page:not([hidden]){animation:enter .4s cubic-bezier(.22,1,.36,1)}
@keyframes enter{from{opacity:0;transform:translateY(10px)}}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.chart svg{display:block;width:100%;height:auto;touch-action:pan-y;font-family:inherit}
.gr{stroke:#2c2c2c;stroke-width:1}
.ax{fill:var(--dim);font-size:13px;font-weight:600}
.ax.t{fill:var(--text);font-size:14px;font-weight:700}
.gl{fill:none;stroke-width:2.5;stroke-linecap:round}
.gl.in{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s cubic-bezier(.22,1,.36,1) forwards}
.gl.hl{stroke-width:4.5}
@keyframes draw{to{stroke-dashoffset:0}}
.gh{stroke:#8a8a8a;stroke-width:1;stroke-dasharray:4 4}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lg{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--panel);border:1px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:600;opacity:.4;transition:opacity .25s,border-color .25s}
.lg.on{opacity:1;border-color:#5a5a5a}
.lg i{width:18px;height:4px;border-radius:2px;flex:none}