.hero-gradient{background:linear-gradient(90deg,#2b8cff,#3794ff,#2b8cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-box{position:relative;text-align:center;padding:.9rem 1.4rem;max-width:37rem;margin:0 auto;background:#0003;border-radius:13px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0006}.cta-button{position:relative;background:linear-gradient(135deg,#3b82f640,#6366f140);border:2px solid rgba(59,130,246,.45);color:#fff;box-shadow:0 4px 16px #0000004d;transform:scale(1);will-change:transform;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),filter .3s cubic-bezier(.4,0,.2,1)!important}.cta-button:hover{border-color:#3b82f6cc;transform:scale(1.01);box-shadow:0 0 0 2px #3b82f626,0 0 8px #3b82f633;filter:brightness(1.15)}.mode-selector-container{display:flex;gap:1rem;padding:1rem .75rem;justify-content:center;align-items:center;background:#0006;border-bottom:2px solid rgba(59,130,246,.3)}.mode-button{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.875rem 2rem;background:#ffffff0d;border:2px solid rgba(255,255,255,.15);border-radius:12px;color:#fff9;font-size:1.1rem;font-weight:600;cursor:pointer;flex:1;max-width:300px;line-height:1;transform:scale(1);will-change:transform;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)!important}.mode-button:hover{background:#ffffff14;border-color:#9ca3af66;color:#ffffffe6;transform:scale(1.02);box-shadow:0 0 0 2px #9ca3af26,0 0 6px #9ca3af33}.mode-button.active{background:linear-gradient(135deg,#8b5cf633,#4f46e533);border-color:#8b5cf6;color:#fff;box-shadow:none}.mode-button.active:hover{transform:scale(1.02);border-color:#a78bfa;box-shadow:0 0 0 2px #8b5cf633,0 0 6px #8b5cf640}.mode-icon{width:26px;height:26px;flex-shrink:0;overflow:visible}.mode-button.active .mode-icon{color:#a78bfa}.tierlist-container{animation:slideUp .6s ease-out;background:#111827cc;border:2px solid rgba(59,130,246,.2);border-radius:12px;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.column-headers{display:flex;gap:.75rem;padding:1rem .75rem;background:#0006;border-bottom:2px solid rgba(59,130,246,.3)}.tier-label-spacer{width:70px;min-width:70px;max-width:70px;flex-shrink:0}.header-columns{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.column-header{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem;background:#0000004d;border:1px solid rgba(59,130,246,.3);border-radius:6px;color:#ffffffe6;font-weight:600;font-size:.8rem}.header-icon{width:20px;height:20px;color:#3b82f6cc}.tier-separator{height:2px;width:100%;opacity:.6}.tier-row{display:flex;gap:.75rem;padding:.75rem;background:#0003}.tier-label{min-width:70px;width:70px;max-width:70px;display:flex;align-items:center;justify-content:center;border:2px solid;border-radius:8px;padding:.3rem .2rem;font-weight:600;font-size:.8rem;text-shadow:0 2px 8px rgba(0,0,0,.8);flex-shrink:0;word-break:break-word;overflow-wrap:break-word;white-space:pre-wrap;overflow:hidden}.tier-content{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.role-column{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start;padding:.5rem;background:#0000004d;border-radius:6px;min-height:40px}.empty-slot{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff3;font-size:.75rem;padding:.5rem;min-height:0}.character-slot{position:relative;width:clamp(32px,9.6vw,68px);height:clamp(32px,9.6vw,68px);cursor:pointer}.character-icon{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:8px;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px #00000080}@media (max-width: 1024px){.responsive-container{max-width:95%!important}}@media (max-width: 768px){.responsive-container{max-width:100%!important;padding-left:.5rem;padding-right:.5rem}.tier-label,.tier-label-spacer{min-width:clamp(40px,10vw,70px)!important;width:clamp(40px,10vw,70px)!important;max-width:clamp(40px,10vw,70px)!important}.tier-label{font-size:clamp(.5rem,1.8vw,.7rem);font-weight:600;padding:.3rem}.empty-slot{min-height:0;padding:.3rem}.column-header{font-size:clamp(.4rem,1.5vw,.6rem);padding:clamp(.15rem,.5vw,.3rem) clamp(.1rem,.3vw,.2rem)}.header-icon{width:clamp(10px,2.5vw,14px);height:clamp(10px,2.5vw,14px)}.tier-row{padding:clamp(.25rem,1vw,.5rem);gap:clamp(.25rem,1vw,.5rem)}.tier-content{gap:clamp(.25rem,1vw,.5rem)}.role-column{padding:clamp(.15rem,.5vw,.3rem);gap:clamp(.15rem,.6vw,.35rem);min-height:clamp(32px,9.6vw,48px)}.column-headers{padding:clamp(.4rem,1.5vw,.75rem) clamp(.3rem,1vw,.5rem);gap:clamp(.3rem,1vw,.5rem)}.header-columns{gap:clamp(.3rem,1vw,.5rem)}.cta-button{font-size:clamp(.8rem,2.5vw,1rem);padding:.75rem 1.5rem}.mode-button{font-size:clamp(.6rem,2.2vw,.9rem);padding:clamp(.5rem,1.5vw,.7rem) clamp(.5rem,2vw,1rem);gap:clamp(.3rem,1vw,.5rem)}.mode-icon{width:clamp(16px,4vw,22px);height:clamp(16px,4vw,22px)}.mode-selector-container{gap:clamp(.4rem,1.5vw,.75rem);padding:clamp(.5rem,1.5vw,.875rem) clamp(.3rem,1vw,.5rem)}}@media (max-width: 360px){.responsive-container{padding-left:.15rem;padding-right:.15rem}.mode-button span{display:none}.mode-icon{width:20px;height:20px}}.tl-hero{position:relative;min-height:410px;overflow:hidden}.tl-hero-image{position:absolute;inset:0;background:var(--hero-img) 72% 22% / cover}.tl-hero-side-fade{position:absolute;inset:0;background:linear-gradient(90deg,#08090d,#08090de6 12%,#08090db8,#08090d80,#08090d4d 42%,#08090d3d,#08090d4d 58%,#08090d80,#08090db8,#08090de6 88%,#08090d)}.tl-hero-bottom-fade{position:absolute;inset:0;background:linear-gradient(0deg,#08090d 2%,transparent 42%)}.tl-hero-content{position:relative;display:flex;min-height:340px;max-width:1360px;margin:0 auto;padding:44px 32px 5px;flex-direction:column;justify-content:flex-start}.tl-hero-copy{animation:rise .8s cubic-bezier(.16,1,.3,1) both}.tl-hero-copy>p{margin:0 0 14px;color:var(--txt-meta);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.tl-hero h1{margin:0;color:#fff;font-family:var(--tfont);font-size:clamp(52px,7.2vw,104px);font-weight:600;letter-spacing:.03em;line-height:.92;white-space:nowrap}.tl-hero h1 span{color:var(--accent)}.tl-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 9px;margin-top:28px;color:#eef1f7;font-size:13px;font-weight:700;letter-spacing:.14em}.tl-hero-meta i{color:#eef1f78c;font-style:normal}.tl-main{position:relative;z-index:4;max-width:1360px;margin:-160px auto 0;padding:0 32px 80px}@media (min-width: 1280px){.tl-main{margin-top:-186px}}.tl-section-heading{margin-bottom:16px}.tl-section-heading p{margin:0 0 9px;color:var(--txt-meta);font-size:9px;font-weight:700;letter-spacing:.2em}.tl-section-heading h2{display:inline-block;margin:0;padding-bottom:3px;border-bottom:2px solid #fff;color:#fff;font-family:var(--tfont);font-size:clamp(27px,3vw,34px);font-weight:600;letter-spacing:.03em;line-height:1}.tl-intro-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:18px 20px;background:var(--surface-tile);border:1px solid var(--line-soft);border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}.tl-intro-panel>p{max-width:820px;margin:0;color:#ffffffd1;font-size:13px;line-height:1.6}.cta-button{display:inline-flex!important;padding:13px 19px!important;align-items:center;gap:9px;flex-shrink:0;background:#ffffff2b!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);color:#fff;font-size:11px!important;font-weight:700;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;box-shadow:none!important;filter:none!important}.cta-button svg{width:19px;height:19px}.cta-button:hover{background:#ffffff38!important;border-color:#ffffff75!important;box-shadow:none!important;filter:none!important}.tierlist-container{overflow:hidden;background:var(--surface-tile)!important;border:1px solid var(--line-soft)!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}.mode-selector-container{gap:8px;padding:12px!important;background:#ffffff05!important;border-bottom:1px solid rgba(255,255,255,.08)!important}.mode-button{max-width:none;padding:11px 16px!important;background:#ffffff0b!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);color:var(--txt-mute)!important;font-size:12px!important;font-weight:700;letter-spacing:.05em;box-shadow:none!important}.mode-button:hover{background:#ffffff14!important;border-color:#fff3!important;color:#fff!important;box-shadow:none!important}.mode-button.active,.mode-button.active:hover{background:#ffffff29!important;border-color:#ffffff4d!important;color:#fff!important;box-shadow:none!important}.mode-icon,.mode-button.active .mode-icon{width:21px;height:21px;color:currentColor!important}.column-headers{gap:8px;padding:10px 12px!important;background:#ffffff06!important;border-bottom:1px solid rgba(255,255,255,.08)!important}.tier-label-spacer{width:72px;min-width:72px;max-width:72px}.header-columns{gap:8px}.column-header{padding:8px!important;background:#ffffff0a!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.header-icon{width:17px;height:17px;color:#fff}.tier-separator{height:1px;opacity:.45}.tier-row{gap:8px;padding:10px 12px!important;background:#ffffff03!important}.tier-row+.tier-row{border-top:1px solid rgba(255,255,255,.04)}.tier-label{width:72px;min-width:72px;max-width:72px;padding:7px 5px!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);font-family:Arial,sans-serif;font-size:16px;font-weight:800;letter-spacing:.04em;text-shadow:0 2px 5px rgba(0,0,0,.9)}.tier-text{font:inherit;font-weight:800;opacity:1}.tier-content{gap:8px}.role-column{min-height:74px;padding:8px!important;gap:7px;align-content:flex-start;background:#ffffff07!important;border:1px solid rgba(255,255,255,.06);border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}.character-slot{width:clamp(38px,5vw,66px);height:clamp(38px,5vw,66px);transition:transform .22s cubic-bezier(.2,.8,.2,1)}.character-slot:hover{transform:scale(1.08)}.character-icon{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:var(--surface-card);border:1px solid rgba(255,255,255,.18)!important;border-radius:0!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);box-shadow:none!important}.tier-element-badge{position:absolute;z-index:3;top:1px;right:1px;pointer-events:none}.tier-element-badge img{display:block;width:14px;height:14px;filter:drop-shadow(0 0 .5px rgba(0,0,0,.95)) drop-shadow(0 0 .5px rgba(0,0,0,.95))}.empty-slot{color:#ffffff2e}.card-hover{position:relative}.card-hover .ring{position:absolute!important;z-index:6!important;inset:-2px;pointer-events:none;background:#fff!important;opacity:0;clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 0,2px 2px,2px calc(100% - 2px),calc(100% - 9px) calc(100% - 2px),calc(100% - 2px) calc(100% - 9px),calc(100% - 2px) 2px,2px 2px)!important;animation:none}.card-hover .ring.ring-play{animation:tl-ring-out 1.15s cubic-bezier(.19,1,.22,1) forwards!important}@keyframes tl-ring-out{0%{inset:-2px;opacity:.85}to{inset:-13px;opacity:0}}@media (max-width: 768px){.tl-main{padding-inline:12px}.tl-intro-panel{align-items:flex-start;flex-direction:column;gap:14px}.cta-button{width:100%;justify-content:center}.mode-button{font-size:10px!important}.tier-label,.tier-label-spacer{width:clamp(42px,10vw,72px)!important;min-width:clamp(42px,10vw,72px)!important;max-width:clamp(42px,10vw,72px)!important}.character-slot{width:clamp(30px,8.8vw,54px);height:clamp(30px,8.8vw,54px)}.tier-content .role-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.tier-content .role-column .character-slot{width:100%;height:auto;aspect-ratio:1}.tier-content .role-column .empty-slot{grid-column:1 / -1}.tier-element-badge img{width:11px;height:11px}}@media (max-width: 640px){.tl-hero{min-height:370px}.tl-hero-content{min-height:300px;padding:38px 16px 5px}.tl-hero h1{font-size:clamp(42px,13vw,52px)}.tl-hero-meta{max-width:340px;font-size:10px}.tl-main{margin-top:-140px}.column-header{gap:3px;font-size:clamp(7px,2vw,9px);letter-spacing:.04em}.header-icon{width:13px;height:13px}}