@font-face{font-family:Marudeco;src:url('/assets/cards/Marudeco-Bold.otf') format('opentype');font-display:swap}
@font-face{font-family:SignatureMetal;src:url('/assets/fonts/metalmania/MetalMania-Regular.ttf');font-display:swap}
@font-face{font-family:SignatureRocker;src:url('/assets/fonts/newrocker/NewRocker-Regular.ttf');font-display:swap}
@font-face{font-family:SignatureCinzel;src:url('/assets/fonts/cinzeldecorative/CinzelDecorative-Bold.ttf');font-display:swap}
body .summoner,body .roster{font-family:Marudeco,'Yu Mincho',serif}
.signature .english{font-family:SignatureMetal,Georgia,serif;font-style:normal}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b1018;color:#f7ecd3;font-family:var(--sc-font-display,'Yu Mincho',serif)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #efd49b;outline-offset:4px}.site-bar{display:flex;justify-content:space-between;gap:20px;align-items:center;max-width:1200px;margin:auto;padding:24px 30px;border-bottom:1px solid #dac58935}.site-bar a{text-decoration:none;letter-spacing:.1em}.site-bar span{font-size:12px;color:#c4b79a}main{max-width:1200px;margin:auto;padding:0 30px 60px}.roster{display:flex;gap:12px;padding:28px 0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ae9561 transparent}.roster button{flex:1;min-width:76px;padding:0;border:1px solid transparent;background:transparent;color:#d8c596}.roster img{display:block;width:100%;height:104px;object-fit:cover;object-position:top;mask-image:linear-gradient(#000 70%,transparent)}.roster span{display:block;font-size:12px;padding:8px 0}.roster button[aria-pressed=true]{border-color:#d4bb7170;background:#c7ae6014;color:#fff1b6}.summoner{--accent:#78bfef}.hero{display:grid;grid-template-columns:52% 48%;position:relative;min-height:650px;isolation:isolate;background:linear-gradient(90deg,transparent,#0c1219 65%),var(--element-bg) left center/60% auto no-repeat}.portrait-stage{position:relative;min-height:650px;overflow:hidden}.portrait{position:absolute;width:100%;height:100%;object-fit:contain;object-position:top center;filter:drop-shadow(-14px 5px 0 #030713aa);mask-image:linear-gradient(#000 70%,transparent 96%)}.crest{position:absolute;left:8%;top:8%;width:75%;height:70%;opacity:.17}.signature{position:absolute;bottom:30px;left:5%;right:5%;text-align:center;text-shadow:0 2px 12px #000}.english{font:italic 54px/1.1 Georgia,serif;color:#efd49b}.concept{font-size:16px;line-height:1.8;margin:12px auto 0;color:#f7ecd3}.profile{position:relative;padding:55px 30px 30px;display:flex;flex-direction:column;align-items:flex-start}.heading{display:flex;align-items:center;gap:16px}.element{width:42px;height:42px}.heading h2{font-size:40px;margin:0;letter-spacing:.09em}.meta{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:22px;font-size:14px;color:#c4b79a}.attribute{color:var(--accent)}.difficulty b{font-weight:400;letter-spacing:.12em;margin-left:8px}.profile-concept{display:none}.skill{width:100%;margin-top:38px;padding:24px 0;border-top:1px solid #d9c48b42;border-bottom:1px solid #d9c48b42}.skill h2{font-size:14px;color:#d8c596;font-weight:400;margin:0 0 14px}.skill p{font-size:19px;line-height:1.85;margin:0;color:var(--accent)}.mini{display:flex;align-items:center;gap:24px;margin-top:auto;padding-top:25px}.mini img{width:135px;height:160px;object-fit:contain}.mini span{font-size:12px;color:#c4b79a}.ultimate{display:grid;grid-template-columns:58% 42%;border-top:1px solid #d9c48b42;border-bottom:1px solid #d9c48b42;margin-top:24px;background:#080e16}.ultimate-art img{display:block;width:100%;height:100%;max-height:440px;object-fit:contain}.ultimate-copy{padding:40px 32px;align-self:center}.section-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#d8c596;gap:16px}.section-label span{font-size:11px}.section-label b{font:italic 28px Georgia;color:#ffdfa0}.ultimate h2{font-size:26px;color:#eed796;line-height:1.5;margin:22px 0 16px}.ultimate p{font-size:16px;line-height:1.85;margin:0}.deck{padding:38px 0}.deck h2,.top-preview>h2{font-size:20px;color:#eed796;font-weight:400;letter-spacing:.06em}.deck>p{font-size:14px;line-height:1.8;color:#c4b79a;margin-bottom:24px}.deck-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.deck-card{background:#ffffff04;border:1px solid #dac58930;padding:12px;text-align:center}.deck-card img{width:100%;aspect-ratio:1;object-fit:contain}.deck-card span{display:block;font-size:12px;line-height:1.6;margin-top:8px}.page-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #d9c48b42;padding:26px 0}.page-nav button{border:1px solid #dac58955;background:transparent;color:#eed796;padding:12px 18px}.page-nav span{font-size:12px;color:#c4b79a}.top-preview{margin-top:60px;padding-top:30px;border-top:1px solid #dac58935;text-align:center}.top-hint{font-size:12px;color:#c4b79a}.top-card{display:block;max-width:420px;margin:28px auto 0;text-decoration:none}.top-card>img{display:block;width:100%;max-height:500px;object-fit:cover;object-position:top}.top-card>div{padding:24px 16px;background:#0c1119}.top-attribute{color:var(--accent);font-size:13px}.top-card h3{font-size:30px;letter-spacing:.12em;margin:16px 0}.top-difficulty{font-size:13px;color:#c4b79a}.top-concept{font-size:15px;line-height:1.8;margin-top:16px}
@media(max-width:700px){.site-bar{padding:20px 18px}.site-bar a{font-size:13px}.site-bar span{font-size:10px}main{padding:0 18px 40px}.roster{gap:8px;padding:20px 0}.roster button{min-width:68px}.roster img{height:88px}.hero{display:block;min-height:0;background:linear-gradient(0deg,#0c1219,transparent 75%),var(--element-bg) top center/cover}.portrait-stage{min-height:0;height:520px}.signature{bottom:16px}.english{font-size:44px}.concept{font-size:14px}.profile{padding:26px 16px 24px}.heading h2{font-size:32px}.element{width:34px;height:34px}.meta{margin-top:16px;font-size:13px}.skill{margin-top:25px;padding:22px 0}.skill p{font-size:16px}.mini{margin-top:12px;padding-top:0;gap:20px}.mini img{width:110px;height:130px}.ultimate{display:block;margin-top:20px}.ultimate-copy{padding:26px 22px 30px}.ultimate h2{font-size:24px;margin-top:16px}.ultimate p{font-size:15px}.deck-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.deck-card{padding:8px}.page-nav button{font-size:12px;padding:12px}.page-nav span{font-size:11px}.top-preview{margin-top:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Revised fixed roster and game card preview. */
body .summoner,body .roster,.signature .english{font-family:var(--sc-font-display,'Yu Mincho',serif);font-style:normal;font-weight:400}
.site-bar{margin-left:164px;max-width:none}main{margin-left:164px;max-width:1200px;padding-top:30px}.roster-rail{position:fixed;left:20px;top:100px;bottom:24px;width:120px;z-index:20;display:flex;flex-direction:column;background:#0b111ce8;border-top:1px solid #dac58955;border-bottom:1px solid #dac58955;padding:8px}.roster{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px;padding:8px 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.roster button{position:relative;flex:none;width:100%;height:142px;min-width:0;border:0;isolation:isolate;overflow:hidden}.roster button:before{content:'';position:absolute;inset:8% 0 0;z-index:-1;background:linear-gradient(0deg,#071016,#07101630 65%),var(--tile-bg) center/cover;border:1px solid #c9b47880;clip-path:polygon(0 6%,9% 0,100% 0,100% 94%,91% 100%,0 100%)}.roster button:after{content:'';position:absolute;inset:12% 5px 5px;border:1px solid #e9d49a38;pointer-events:none}.roster img{height:100%;width:100%;object-fit:cover;object-position:top;mask-image:linear-gradient(#000 75%,transparent)}.roster span{position:absolute;bottom:0;left:0;right:0;padding:22px 2px 10px;background:linear-gradient(transparent,#090e19ed 45%);font-size:13px;z-index:2}.roster button[aria-pressed=true]{background:transparent;filter:brightness(1.15)}.roster button[aria-pressed=true]:after{border-color:#ffdfa0;box-shadow:inset 0 0 14px #e5b54c55}.rail-arrow{display:grid;place-items:center;width:100%;height:38px;flex:none;border:0;background:transparent;color:#eed796}.rail-arrow img{width:26px;height:34px}.rail-up img{transform:rotate(90deg)}.rail-down img{transform:rotate(-90deg)}.rail-arrow:disabled{opacity:.25;cursor:default}.element,.crest{display:block}.english{letter-spacing:.025em}.deck-card{background:none;border:0;padding:0;text-align:initial}.deck-card .game-card{aspect-ratio:300/470}.deck-card .game-card img{aspect-ratio:auto;margin:0}.deck-card .game-card__art img{width:100%;height:100%;object-fit:contain}.deck-card .game-card__background{width:100%;height:100%;object-fit:cover}.deck-card .game-card span{display:initial;margin-top:0}.deck-card .game-card p{margin:0}.deck-card .game-card__cost{font-size:7cqw}.deck-card .game-card__name{font-family:var(--sc-font-display,'Yu Mincho',serif)}
@keyframes summonerPortrait{from{opacity:0;transform:translateX(-35px);filter:blur(3px)}to{opacity:1;transform:translateX(0);filter:blur(0)}}
@keyframes summonerCopy{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.arrive .portrait{animation:summonerPortrait .65s cubic-bezier(.16,1,.3,1) both}.arrive .signature{animation:summonerCopy .55s .15s both}.arrive .profile{animation:summonerCopy .55s .1s both}.arrive .ultimate{animation:summonerCopy .55s .18s both}.arrive .deck{animation:summonerCopy .55s .24s both}
@media(max-width:700px){.site-bar{margin-left:86px;padding:20px 10px}.site-bar span{display:none}main{margin-left:86px;padding:20px 12px 40px}.roster-rail{left:8px;width:68px;top:72px;bottom:12px;padding:4px}.roster{gap:8px}.roster button{height:105px}.roster span{font-size:10px;padding-bottom:8px}.rail-arrow{height:34px}.rail-arrow img{width:22px;height:28px}.portrait-stage{height:430px}.profile{padding:24px 10px}.heading{gap:8px}.heading h2{font-size:26px}.element{width:28px;height:28px}.english{font-size:34px}.concept{font-size:12px}.meta{gap:12px;font-size:12px}.skill p{font-size:15px}.deck-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ultimate-copy{padding:22px 14px}.ultimate h2{font-size:21px}.ultimate p{font-size:14px}.mini{gap:12px}.mini img{width:95px;height:115px}}
@media(prefers-reduced-motion:reduce){.arrive .portrait,.arrive .signature,.arrive .profile,.arrive .ultimate,.arrive .deck{animation:none}}
/* Quiet selection, original English signature and corrected card stats. */
.roster button[aria-pressed=true]{filter:none}.roster button:after,.roster button[aria-pressed=true]:after{display:none}.roster button[aria-pressed=true] span{color:#fff2bf;background:linear-gradient(transparent,#352c1c 50%)}.roster button[aria-pressed=true] span:before{content:'';display:inline-block;width:4px;height:4px;background:#efd49b;transform:rotate(45deg);margin:0 7px 3px 0}
body .signature .english{font-family:SignatureMetal,Georgia,serif;font-style:normal;text-transform:uppercase}
.mini{width:100%;gap:28px}.mini img{width:180px;height:200px}.mini span{font-size:14px;letter-spacing:.08em}
.deck-card .game-card__stat{display:flex;align-items:center;justify-content:center;gap:6%;margin-top:0}.deck-card .game-card__stat img{width:16cqw;height:16cqw;aspect-ratio:1;flex:0 0 16cqw;padding:2.2cqw;object-fit:contain;border-radius:50%}.deck-card .game-card__stat b{display:block;font-size:9cqw;line-height:1;white-space:nowrap}.deck-card .game-card__stats{align-items:center}
@media(max-width:700px){.mini img{width:130px;height:155px}.mini{gap:16px}.mini span{font-size:12px}}
.deck-card .game-card .game-card__stat{display:flex;align-items:center;justify-content:center;gap:6%;font-size:9cqw;line-height:1;margin:0;white-space:nowrap}
/* Smooth attribute glow and right-edge blending. */
.roster button{overflow:visible}.roster{padding:10px 6px}.roster button[aria-pressed=true]{box-shadow:0 0 10px color-mix(in srgb,var(--tile-accent) 45%,transparent),0 0 20px color-mix(in srgb,var(--tile-accent) 20%,transparent);animation:rosterGlow .7s ease-out both}.roster button[aria-pressed=true] span{color:#fff2bf;background:linear-gradient(transparent,#090e19ed 45%)}.roster button[aria-pressed=true] span:before{display:none}
@keyframes rosterGlow{from{box-shadow:0 0 0 transparent}to{box-shadow:0 0 10px color-mix(in srgb,var(--tile-accent) 45%,transparent),0 0 20px color-mix(in srgb,var(--tile-accent) 20%,transparent)}}
.deck-card .game-card .game-card__cost{top:58%}
.portrait{mask-image:linear-gradient(90deg,#000 0% 78%,transparent 100%),linear-gradient(#000 70%,transparent 96%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,#000 0% 78%,transparent 100%),linear-gradient(#000 70%,transparent 96%);-webkit-mask-composite:source-in}
.hero{background:none}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--element-bg) left center/60% auto no-repeat;mask-image:linear-gradient(90deg,#000 0% 30%,transparent 62%);-webkit-mask-image:linear-gradient(90deg,#000 0% 30%,transparent 62%)}
@media(max-width:700px){.hero:before{background-position:top center;background-size:auto 560px;mask-image:linear-gradient(90deg,#000 0% 60%,transparent 100%),linear-gradient(#000 350px,transparent 650px);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,#000 0% 60%,transparent 100%),linear-gradient(#000 350px,transparent 650px);-webkit-mask-composite:source-in}}
@media(prefers-reduced-motion:reduce){.roster button[aria-pressed=true]{animation:none}}
.hero:before{right:38%;background-size:cover;mask-image:linear-gradient(90deg,#000 0% 65%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0% 65%,transparent 100%)}
@media(max-width:700px){.hero:before{right:0;background-size:auto 560px;mask-image:linear-gradient(90deg,#000 0% 60%,transparent 100%),linear-gradient(#000 350px,transparent 650px);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,#000 0% 60%,transparent 100%),linear-gradient(#000 350px,transparent 650px);-webkit-mask-composite:source-in}}
/* Art-following selection glow and stronger horizontal portrait fade. */
.roster button[aria-pressed=true]{box-shadow:none;animation:none}
.roster button img{transition:filter .7s ease-out}
.roster button[aria-pressed=true] img{filter:drop-shadow(0 0 1px var(--tile-accent)) drop-shadow(0 0 3px var(--tile-accent)) drop-shadow(0 0 6px color-mix(in srgb,var(--tile-accent) 55%,transparent));animation:artOutlineGlow .7s ease-out both}
@keyframes artOutlineGlow{from{filter:drop-shadow(0 0 0 transparent)}to{filter:drop-shadow(0 0 1px var(--tile-accent)) drop-shadow(0 0 3px var(--tile-accent)) drop-shadow(0 0 6px color-mix(in srgb,var(--tile-accent) 55%,transparent))}}
.portrait{mask-image:linear-gradient(90deg,#000 0% 52%,rgba(0,0,0,.85) 62%,rgba(0,0,0,.4) 76%,transparent 92%);-webkit-mask-image:linear-gradient(90deg,#000 0% 52%,rgba(0,0,0,.85) 62%,rgba(0,0,0,.4) 76%,transparent 92%);mask-composite:add;-webkit-mask-composite:source-over}
@media(prefers-reduced-motion:reduce){.roster button img{transition:none}.roster button[aria-pressed=true] img{animation:none}}
/* Narrower portrait fade and clearer selected art outline. */
.portrait{mask-image:linear-gradient(90deg,#000 0% 65%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.45) 83%,transparent 96%);-webkit-mask-image:linear-gradient(90deg,#000 0% 65%,rgba(0,0,0,.9) 72%,rgba(0,0,0,.45) 83%,transparent 96%)}
.roster button[aria-pressed=true] img{filter:drop-shadow(0 0 2px var(--tile-accent)) drop-shadow(0 0 5px var(--tile-accent)) drop-shadow(0 0 10px color-mix(in srgb,var(--tile-accent) 75%,transparent));animation:artOutlineGlowStrong .7s ease-out both}
@keyframes artOutlineGlowStrong{from{filter:drop-shadow(0 0 0 transparent)}to{filter:drop-shadow(0 0 2px var(--tile-accent)) drop-shadow(0 0 5px var(--tile-accent)) drop-shadow(0 0 10px color-mix(in srgb,var(--tile-accent) 75%,transparent))}}
@media(prefers-reduced-motion:reduce){.roster button[aria-pressed=true] img{animation:none}}
/* Further narrowed edge fade and broader art outline glow. */
.portrait{mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.9) 81%,rgba(0,0,0,.45) 90%,transparent 99%);-webkit-mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.9) 81%,rgba(0,0,0,.45) 90%,transparent 99%)}
.roster button[aria-pressed=true] img{filter:drop-shadow(0 0 2px var(--tile-accent)) drop-shadow(0 0 8px var(--tile-accent)) drop-shadow(0 0 18px color-mix(in srgb,var(--tile-accent) 80%,transparent));animation:artOutlineGlowBroad .7s ease-out both}
@keyframes artOutlineGlowBroad{from{filter:drop-shadow(0 0 0 transparent)}to{filter:drop-shadow(0 0 2px var(--tile-accent)) drop-shadow(0 0 8px var(--tile-accent)) drop-shadow(0 0 18px color-mix(in srgb,var(--tile-accent) 80%,transparent))}}
@media(prefers-reduced-motion:reduce){.roster button[aria-pressed=true] img{animation:none}}
/* Slightly dim unselected art; stronger fade within the narrow right edge. */
.roster button:not([aria-pressed=true]) img{filter:brightness(.78) saturate(.9)}
.portrait{mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.75) 81%,rgba(0,0,0,.2) 89%,transparent 96%);-webkit-mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.75) 81%,rgba(0,0,0,.2) 89%,transparent 96%)}
/* Dim the complete unselected tile and apply the fade to the artwork's own bounds. */
.roster button:not([aria-pressed=true]){filter:brightness(.62) saturate(.85)}
.roster button:not([aria-pressed=true]) img{filter:none}
.roster button{transition:filter .5s ease-out}
.portrait-stage .portrait{width:auto;max-width:100%;height:100%;left:50%;transform:translateX(-50%);object-fit:contain;mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.55) 83%,rgba(0,0,0,.12) 90%,transparent 96%);-webkit-mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.55) 83%,rgba(0,0,0,.12) 90%,transparent 96%)}
@keyframes summonerPortrait{from{opacity:0;transform:translateX(calc(-50% - 35px));filter:blur(3px)}to{opacity:1;transform:translateX(-50%);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.roster button{transition:none}}
/* Complete the narrow fade before the original cropped image edge. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.08) 85%,transparent 88%);-webkit-mask-image:linear-gradient(90deg,#000 0% 76%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.08) 85%,transparent 88%)}
/* Keep full opacity longer, then fade within a narrower edge strip. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0% 82%,rgba(0,0,0,.5) 85%,rgba(0,0,0,.08) 88%,transparent 90%);-webkit-mask-image:linear-gradient(90deg,#000 0% 82%,rgba(0,0,0,.5) 85%,rgba(0,0,0,.08) 88%,transparent 90%)}
/* Fade only across a four-percent strip near the right edge. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0% 88%,rgba(0,0,0,.5) 89.5%,rgba(0,0,0,.08) 91%,transparent 92%);-webkit-mask-image:linear-gradient(90deg,#000 0% 88%,rgba(0,0,0,.5) 89.5%,rgba(0,0,0,.08) 91%,transparent 92%)}
/* Mask only the final four percent; no wider transparent tail. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0% 96%,rgba(0,0,0,.5) 98%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0% 96%,rgba(0,0,0,.5) 98%,transparent 100%)}
/* Match the background fade to the narrow artwork edge treatment. */
.hero:before{mask-image:linear-gradient(90deg,#000 0% 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0% 96%,transparent 100%)}
@media(max-width:700px){.hero:before{mask-image:linear-gradient(90deg,#000 0% 96%,transparent 100%),linear-gradient(#000 350px,transparent 650px);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,#000 0% 96%,transparent 100%),linear-gradient(#000 350px,transparent 650px);-webkit-mask-composite:source-in}}
/* Preserve the character artwork; soften only the final three pixels. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 3px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 3px),transparent 100%)}
/* Moderate edge blend without erasing a broad area of the character. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 10px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 10px),transparent 100%)}
/* Wider, eased edge blend to soften the source artwork crop. */
.portrait-stage .portrait{mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 32px),rgba(0,0,0,.8) calc(100% - 24px),rgba(0,0,0,.35) calc(100% - 12px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 32px),rgba(0,0,0,.8) calc(100% - 24px),rgba(0,0,0,.35) calc(100% - 12px),transparent 100%)}
/* Let the attribute background dissolve gently across a broad right edge. */
.hero:before{mask-image:linear-gradient(90deg,#000 0% 58%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.12) 93%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0% 58%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.12) 93%,transparent 100%)}
@media(max-width:700px){.hero:before{mask-image:linear-gradient(90deg,#000 0% 58%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.12) 93%,transparent 100%),linear-gradient(#000 350px,transparent 650px);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,#000 0% 58%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.12) 93%,transparent 100%),linear-gradient(#000 350px,transparent 650px);-webkit-mask-composite:source-in}}
/* Place the concept beneath attribute and difficulty. */
.signature .concept{display:none}
.profile .profile-concept{display:block;margin:20px 0 0;font-size:17px;line-height:1.8;letter-spacing:.03em;color:#f7ecd3}
@media(max-width:700px){.profile .profile-concept{font-size:15px;margin-top:16px}}

.summoners-page-heading{padding:100px 0 32px}.summoners-page-heading>a{font-size:13px;color:#c4b79a}.summoners-page-heading h1{font:400 36px/1.5 var(--sc-font-display);letter-spacing:.12em;margin:20px 0 0}.summoners-state{font-size:14px}.roster-rail{top:150px}.sub-footer{margin-left:164px;padding:50px 30px;text-align:center;border-top:1px solid #dac58935}.sub-footer>img{width:160px;height:auto}.sub-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:25px 0}.sub-footer small{color:#c4b79a}.heading h2{font-weight:400}@media(max-width:700px){.summoners-page-heading{padding:75px 0 24px}.summoners-page-heading h1{font-size:26px}.roster-rail{top:100px}.sub-footer{margin-left:86px;padding:30px 12px}.sub-footer nav{font-size:12px}}
.summoners-page-heading .sub-kicker{margin:0 0 .8rem;color:var(--sc-gold-300);font:700 .7rem/1.4 var(--sc-font-display);letter-spacing:.24em}.summoners-page-heading h1{margin-top:0}
/* Phone layouts: full-width content with a compact, persistent selector. */
@media(max-width:700px) and (orientation:portrait){
 main{margin-left:0;padding:18px 18px 110px}.sub-footer{margin-left:0;padding-bottom:115px}.summoners-page-heading{padding:75px 0 24px}
 .roster-rail{left:0;right:0;top:auto;bottom:0;width:auto;height:96px;flex-direction:row;align-items:stretch;padding:5px 8px;background:#0b111cf5;backdrop-filter:blur(12px);border-top:1px solid #dac58955;border-bottom:0}
 .roster{flex-direction:row;padding:5px 8px;gap:12px;overflow-x:auto;overflow-y:hidden;align-items:center}.roster button{width:58px;height:74px;flex:0 0 58px}.roster span{font-size:9px;padding:14px 1px 5px}.roster button:before{inset:0}.rail-arrow{width:28px;height:100%;align-self:center}.rail-up img{transform:none}.rail-down img{transform:rotate(180deg)}
 .portrait-stage{height:530px}.profile{padding:24px 8px}.heading h2{font-size:32px}.profile .profile-concept{font-size:16px}.skill p{font-size:17px}.ultimate-copy{padding:24px 18px}.ultimate p{font-size:16px}.deck-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mini img{width:145px;height:170px}
}
@media(max-width:1150px) and (orientation:landscape) and (max-height:550px){
 main{margin-left:82px;padding:15px 20px 40px}.sub-footer{margin-left:82px}.summoners-page-heading{padding:80px 0 22px}.roster-rail{left:8px;width:64px;top:100px;bottom:10px;padding:3px}.rail-arrow{height:26px}.rail-arrow img{width:18px;height:23px}.roster{padding:6px 4px;gap:10px}.roster button{height:60px;min-height:60px}.roster img{object-position:center 8%;object-fit:cover}.roster span{font-size:9px;padding:12px 0 3px}
 .hero{min-height:480px;grid-template-columns:50% 50%}.portrait-stage{min-height:0;height:480px}.profile{padding:26px 20px}.heading h2{font-size:30px}.meta{font-size:13px;gap:12px}.profile .profile-concept{font-size:15px;margin-top:18px}.skill{margin-top:22px;padding:18px 0}.skill p{font-size:16px}.mini img{width:110px;height:125px}.mini{gap:12px}.mini span{font-size:11px}.signature{bottom:16px}.english{font-size:40px}.deck-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ultimate-copy{padding:24px}.ultimate p{font-size:15px}
}
/* Center desktop content in the space beside the fixed roster. */
@media (min-width:1151px), (min-width:701px) and (min-height:551px){
 #summoners-content{width:calc(100% - 164px);max-width:1200px;margin-left:calc(164px + max(0px, (100% - 1364px)/2));margin-right:auto}
 .roster-rail{left:calc(20px + max(0px, (100% - 1364px)/2))}
 .mini img{width:clamp(220px,20vw,280px);height:280px;flex-shrink:0}
 .mini{gap:24px}
}
@media(max-width:700px) and (orientation:portrait){
 .mini img{width:180px;height:200px;flex-shrink:0}
}