@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700&family=Montserrat:wght@400;500;600&display=swap');
:root{--ink:#111317;--paper:#f3f0ea;--gold:#bda479;--blue:#6cb9da;--line:rgba(255,255,255,.16);--serif:'Noto Serif TC',serif;--sans:'Montserrat','Noto Sans TC',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#fff;font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;height:84px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(#07090bc9,transparent);transition:.35s}.site-header.scrolled{height:70px;background:#090b0def;backdrop-filter:blur(16px)}.menu-toggle{width:68px;height:100%;border:0;border-right:1px solid var(--line);background:transparent;display:grid;place-content:center;gap:7px;cursor:pointer}.menu-toggle span{width:22px;height:1px;background:white;display:block}.brand{width:145px;text-align:center;font-family:var(--serif);line-height:1}.brand span{display:block;font:500 8px var(--sans);letter-spacing:.42em;color:var(--gold)}.brand b{font-size:19px;letter-spacing:.16em}.main-nav{display:flex;gap:34px;margin-left:22px;font-size:13px;letter-spacing:.1em}.main-nav a{position:relative;padding:29px 0}.main-nav a:after{content:"";position:absolute;left:0;bottom:20px;width:0;height:1px;background:var(--blue);transition:.25s}.main-nav a:hover:after{width:100%}.account{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:#c9cdd0}.account span{height:11px;border-left:1px solid #777}.download-button{width:176px;height:100%;display:grid;place-content:center;text-align:center;background:linear-gradient(120deg,#4b92ad,#7cc6dc);font:600 18px var(--serif);letter-spacing:.15em}.download-button small{font:500 8px var(--sans);letter-spacing:.3em;margin-bottom:5px}.hero{position:relative;min-height:100svh;overflow:hidden;background:#111b24}.hero-media{position:absolute;inset:0;background:radial-gradient(circle at 68% 42%,rgba(113,193,219,.42),transparent 25%),linear-gradient(110deg,#06090c 10%,#142936 55%,#243f4b 100%)}.hero-media:before,.hero-media:after{content:"";position:absolute;border:1px solid rgba(164,216,232,.18);border-radius:50%;filter:blur(.2px)}.hero-media:before{width:900px;height:900px;right:-100px;top:-320px}.hero-media:after{width:500px;height:500px;right:140px;top:60px}.orb{position:absolute;width:260px;height:420px;right:22%;top:15%;transform:rotate(24deg);background:linear-gradient(130deg,transparent 30%,rgba(175,231,244,.35),rgba(46,117,146,.05));filter:blur(2px);border-radius:60% 10%}.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.76),transparent 60%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 50%)}.hero-copy{position:absolute;left:10%;top:50%;transform:translateY(-42%);max-width:630px}.eyebrow{font-size:10px;letter-spacing:.42em;color:var(--gold);margin:0 0 18px}.hero h1,.section h2,.world h2,.download h2{font-family:var(--serif);font-weight:500}.hero h1{font-size:clamp(48px,6.2vw,92px);line-height:1.12;letter-spacing:.12em;margin:0 0 25px;text-shadow:0 4px 20px #000}.hero h1 em{font-style:normal;color:#c9edf5}.hero-copy>p:not(.eyebrow){font-family:var(--serif);font-size:15px;line-height:2;color:#d7dde0;letter-spacing:.09em}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:40px}.primary{display:inline-grid;place-items:center;min-width:176px;height:56px;background:#e8eef0;color:#182127;font-family:var(--serif);font-weight:700;letter-spacing:.18em;transition:.25s}.primary:hover{background:#80c8df;color:#fff;transform:translateY(-2px)}.play{display:flex;align-items:center;gap:13px;border:0;background:transparent;text-align:left;cursor:pointer}.play i{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;font-style:normal;font-size:12px}.play span{font-family:var(--serif);font-size:13px}.play small{display:block;margin-top:4px;font:9px var(--sans);letter-spacing:.2em;color:#8d999e}.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:8px;letter-spacing:.3em;color:#9ea7aa}.scroll-hint span{display:block;width:1px;height:38px;background:#fff;margin:0 auto 12px;animation:scroll 1.8s infinite}.hero-status{position:absolute;right:36px;top:50%;display:flex;align-items:center;gap:9px;transform:rotate(90deg);font-size:11px}.hero-status span{width:80px;border-top:1px solid #fff}.hero-status small{color:#7e898c}@keyframes scroll{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}.section{padding:120px max(6vw,30px)}.news{background:var(--paper);color:var(--ink)}.section-heading{max-width:1220px;margin:0 auto 48px;display:flex;justify-content:space-between;align-items:end}.section-heading h2{font-size:40px;margin:0;letter-spacing:.12em}.section-heading>a{font-size:11px;letter-spacing:.15em;border-bottom:1px solid #aaa;padding-bottom:8px}.section-heading>a span{margin-left:24px}.section-heading.center{justify-content:center;text-align:center}.news-grid{max-width:1220px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:54px}.asset-box{position:relative;overflow:hidden;background:linear-gradient(135deg,#1d2c33,#315467 55%,#0d1519);border:1px solid rgba(255,255,255,.12)}.asset-box:before{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font-size:10px;letter-spacing:.35em;color:rgba(255,255,255,.38)}.asset-box>span{position:absolute;right:14px;bottom:12px;z-index:2;font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.45)}.news-feature .asset-box{aspect-ratio:16/9}.card-copy{position:relative;padding:26px 0}.tag{font-size:9px;letter-spacing:.15em;color:#6a8c9a}.card-copy h3,.news-list h3{font-family:var(--serif);letter-spacing:.06em}.card-copy h3{font-size:23px;margin:12px 0}.card-copy p,.news-list p{color:#6d7377;font-size:12px}.card-copy time{position:absolute;right:0;top:32px;font-size:10px;color:#888}.news-list article{min-height:132px;display:grid;grid-template-columns:70px 1fr 50px;gap:14px;align-items:center;border-top:1px solid #ccc}.news-list article:last-child{border-bottom:1px solid #ccc}.news-list h3{font-size:17px;margin:0 0 8px}.news-list p{margin:0}.news-list time{font-size:10px;color:#888}.world{min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden;background:#0a0d10}.world-art{position:absolute;inset:0 40% 0 0;border:0}.world-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#0a0d10)}.world-copy{position:relative;margin-left:55%;width:430px}.world h2{font-size:42px;line-height:1.55;letter-spacing:.08em;margin:0 0 25px}.world-copy>p:not(.eyebrow){font-family:var(--serif);line-height:2;color:#9da5a8;font-size:13px}.text-link{display:inline-flex;gap:45px;margin-top:25px;border-bottom:1px solid #586067;padding-bottom:10px;font-family:var(--serif);font-size:12px;letter-spacing:.14em}.text-link span{color:var(--gold)}.vertical-title{position:absolute;right:3%;font-size:9px;letter-spacing:.5em;writing-mode:vertical-rl;color:#5c6366}.classes{background:#e7e5e0;color:var(--ink);padding-bottom:0}.class-stage{height:620px;max-width:1220px;margin:auto;position:relative;display:flex;align-items:center}.class-visual{position:absolute;left:28%;bottom:0;width:45%;height:100%;background:radial-gradient(circle at center,#c8d9dd,transparent 55%);border:0}.class-info{position:relative;width:340px;z-index:2}.class-number{font-size:10px;letter-spacing:.2em;color:#7e898c}.class-info h3{font:500 45px var(--serif);letter-spacing:.1em;margin:16px 0}.class-info h3 small{display:block;font:9px var(--sans);letter-spacing:.3em;color:#778085;margin-top:10px}.class-info>p{font:13px/2 var(--serif);color:#686e71}.stats{margin-top:25px}.stats span{display:grid;grid-template-columns:45px 1fr;align-items:center;font-size:10px;margin:12px 0}.stats b{display:block;height:2px;background:linear-gradient(90deg,#577f8f var(--value),#c1c3c2 var(--value))}.class-tabs{margin-left:auto;display:grid;gap:10px}.class-tabs button{width:48px;height:48px;border:1px solid #aeb2b2;background:transparent;border-radius:50%;color:#777;cursor:pointer}.class-tabs button.active{background:#152029;color:white;border-color:#152029}.media{background:#0a0d10}.slider-buttons button{width:45px;height:45px;border:1px solid #4b5154;background:transparent;cursor:pointer}.media-grid{max-width:1220px;margin:auto;display:grid;grid-template-columns:2fr 1fr;gap:16px;height:580px}.media-card{border:0;text-align:left;cursor:pointer;color:#fff}.media-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%)}.media-card b{position:absolute;left:28px;bottom:26px;z-index:2;font:500 18px var(--serif);letter-spacing:.08em}.media-card i{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:66px;height:66px;display:grid;place-items:center;border:1px solid #fff;border-radius:50%;font-style:normal}.media-stack{display:grid;gap:16px}.download{height:650px;position:relative;display:grid;place-items:center;text-align:center}.download-bg{position:absolute;inset:0;border:0;background:radial-gradient(circle at center,#547f91,#172930 45%,#090c0e 80%)}.download-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080b0d,transparent 40%)}.download-copy{position:relative}.download h2{font-size:58px;line-height:1.35;letter-spacing:.16em;margin:0 0 18px}.download-copy>p:not(.eyebrow){font-family:var(--serif);color:#c5cbcd}.primary.light{margin-top:25px}footer{padding:65px 6vw;text-align:center;background:#07090a;color:#747a7d;font-size:10px}.footer-brand{display:inline-block;color:#ddd}.social{display:flex;justify-content:center;gap:10px;margin:30px 0}.social a{width:34px;height:34px;display:grid;place-items:center;border:1px solid #333;border-radius:50%;color:#aaa}.social+nav{display:flex;justify-content:center;gap:25px;margin-bottom:25px}.back-top{position:fixed;right:26px;bottom:24px;z-index:10;width:44px;height:44px;border:1px solid #74828a;background:#0b0f12cc;cursor:pointer;opacity:0;pointer-events:none;transition:.25s}.back-top.show{opacity:1;pointer-events:auto}.trailer-modal{width:min(860px,90vw);padding:0;border:1px solid #54646b;background:#080b0d;color:white}.trailer-modal::backdrop{background:#000c;backdrop-filter:blur(8px)}.trailer-modal>button{position:absolute;right:10px;top:5px;z-index:3;border:0;background:transparent;font-size:28px;cursor:pointer}.video-placeholder{aspect-ratio:16/9;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,#26434e,#080b0d);letter-spacing:.3em}.video-placeholder small{margin-top:15px;letter-spacing:.08em;color:#849196}.mobile-nav-open .main-nav{display:flex}
@media(max-width:980px){.account{display:none}.main-nav{position:absolute;top:84px;left:0;width:100%;margin:0;padding:28px;display:none;flex-direction:column;gap:0;background:#090b0df5}.main-nav a{padding:14px}.download-button{width:130px}.hero-copy{left:7%}.news-grid{grid-template-columns:1fr}.world-art{inset:0}.world-art:after{background:rgba(4,7,9,.68)}.world-copy{margin:auto;padding:30px;width:min(85%,500px)}.class-visual{left:25%;width:65%;opacity:.7}.media-grid{height:480px}.site-header .brand{margin-right:auto}.site-header .main-nav+.account{margin-left:0}}
@media(max-width:640px){.site-header{height:68px}.site-header.scrolled{height:62px}.menu-toggle{width:54px}.site-header .brand{width:110px}.brand b{font-size:15px}.download-button{width:100px;font-size:14px}.main-nav{top:68px}.hero-copy{left:24px;right:24px;top:48%}.hero h1{font-size:47px}.hero-copy>p:not(.eyebrow){font-size:12px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-status{display:none}.section{padding:84px 22px}.section-heading h2{font-size:32px}.news-list article{grid-template-columns:55px 1fr}.news-list time{display:none}.world{min-height:650px}.world h2{font-size:31px}.class-stage{height:650px;align-items:flex-start;padding-top:20px}.class-info{width:82%}.class-info h3{font-size:35px}.class-visual{left:10%;width:90%;height:58%;bottom:0}.class-tabs{position:absolute;right:0;top:20px}.media-grid{grid-template-columns:1fr;height:660px}.media-stack{grid-template-columns:1fr 1fr}.download{height:540px}.download h2{font-size:39px}footer nav{flex-wrap:wrap}.eyebrow{letter-spacing:.28em}}

.game-info{background:#111820;position:relative}.game-info-intro{max-width:1220px;margin:-28px auto 42px;color:#849097;font:13px/1.9 var(--serif)}.info-category-grid{max-width:1220px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#344047;border:1px solid #344047}.info-category-grid a{position:relative;min-height:200px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;background:#10161b;overflow:hidden;transition:.3s}.info-category-grid a:before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,#10161b 15%,transparent 80%),var(--atlas);background-size:100%,cover;background-position:center;background-repeat:no-repeat;opacity:.28;filter:saturate(.6);transition:.35s}.info-category-grid a:hover{transform:translateY(-3px);z-index:2}.info-category-grid a:hover:before{opacity:.52;transform:scale(1.04)}.info-category-grid span,.info-category-grid b,.info-category-grid small{position:relative}.info-category-grid span{position:absolute;left:25px;top:22px;font-size:8px;letter-spacing:.22em;color:var(--gold)}.info-category-grid b{font:500 25px var(--serif);letter-spacing:.12em}.info-category-grid small{margin-top:8px;color:#77858c;font-size:10px}@media(max-width:980px){.info-category-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.info-category-grid{grid-template-columns:1fr}.info-category-grid a{min-height:155px}.game-info-intro{margin-top:-25px}}

.class-visual{display:block;overflow:visible;background:radial-gradient(circle at 50% 58%,rgba(114,153,162,.34),transparent 58%);pointer-events:none}.class-visual .portrait{position:absolute;width:72%;height:92%;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(0,0,0,.28));transition:opacity .38s ease,transform .55s cubic-bezier(.2,.8,.2,1)}.class-visual .portrait-male{left:-9%;bottom:0;z-index:2;object-position:left bottom;transform:translate(-2%,2%) rotate(-1.5deg)}.class-visual .portrait-female{right:-12%;top:-2%;z-index:1;object-position:right top;transform:translate(2%,-1%) rotate(1.5deg);opacity:.92}.class-visual.switching .portrait-male{opacity:0;transform:translate(-8%,6%) scale(.96) rotate(-3deg)}.class-visual.switching .portrait-female{opacity:0;transform:translate(8%,-5%) scale(.96) rotate(3deg)}@media(max-width:980px){.class-visual .portrait{width:76%}.class-visual .portrait-male{left:-12%}.class-visual .portrait-female{right:-18%}}@media(max-width:640px){.class-visual .portrait{width:78%;height:94%}.class-visual .portrait-male{left:-17%}.class-visual .portrait-female{right:-22%;top:0;opacity:.82}}

/* Class showcase: compact copy, enlarged crossed portraits and sprite-based class marks. */
.class-stage{max-width:1320px}.class-info{width:300px;transform:translateX(-42px)}.class-visual{left:18%;width:72%;height:108%;bottom:0}.class-visual .portrait{width:74%;height:105%}.class-visual .portrait-male{left:0;bottom:-2%;transform:translate(0,2%) rotate(-1deg)}.class-visual .portrait-female{right:0;top:-1%;transform:translate(0,-1%) rotate(1deg)}.class-tabs{position:relative;right:-20px;z-index:5}.class-tabs button{position:relative;display:grid;place-items:center;overflow:visible}.class-tabs button .class-icon{position:absolute;left:50%;top:50%;width:57px;height:66px;background-image:url('assets/ui/ClassChange.png');background-repeat:no-repeat;background-position:var(--icon-x) var(--icon-y);transform:translate(-50%,-50%) scale(.56);transform-origin:center;filter:grayscale(1) brightness(.72);transition:filter .25s,transform .25s}.class-tabs button.active .class-icon,.class-tabs button:hover .class-icon,.class-tabs button:focus-visible .class-icon{filter:none;transform:translate(-50%,-50%) scale(.63)}.class-tabs button::after{content:attr(data-tooltip);position:absolute;right:62px;top:50%;transform:translate(8px,-50%);padding:8px 12px;border:1px solid rgba(255,255,255,.16);background:#111820f2;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.24);font:11px var(--serif);letter-spacing:.12em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:.2s}.class-tabs button::before{content:"";position:absolute;right:55px;top:50%;width:7px;height:7px;border-top:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);background:#111820;transform:translate(6px,-50%) rotate(45deg);opacity:0;visibility:hidden;transition:.2s}.class-tabs button:hover::after,.class-tabs button:hover::before,.class-tabs button:focus-visible::after,.class-tabs button:focus-visible::before{opacity:1;visibility:visible;transform:translate(0,-50%)}.class-tabs button:hover::before,.class-tabs button:focus-visible::before{transform:translate(0,-50%) rotate(45deg)}@media(max-width:1100px){.class-info{transform:translateX(-16px)}.class-visual{left:20%;width:68%}.class-visual .portrait{width:77%}.class-tabs{right:0}}@media(max-width:640px){.class-info{transform:none;width:76%}.class-visual{left:4%;width:92%;height:62%}.class-visual .portrait{width:78%;height:105%}.class-visual .portrait-male{left:-2%}.class-visual .portrait-female{right:-2%}.class-tabs button::after,.class-tabs button::before{display:none}}

/* Revised class controls: transparent marks on the left, rotated and 20% larger. */
.class-stage{position:relative;padding-left:74px}.class-tabs{position:absolute;left:-4px;right:auto;top:50%;margin:0;transform:translateY(-50%);gap:7px}.class-tabs button,.class-tabs button.active{width:58px;height:58px;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;color:inherit}.class-tabs button .class-icon{filter:grayscale(1) brightness(.7);transform:translate(-50%,-50%) rotate(-90deg) scale(.68)}.class-tabs button.active .class-icon,.class-tabs button:hover .class-icon,.class-tabs button:focus-visible .class-icon{filter:none;transform:translate(-50%,-50%) rotate(-90deg) scale(.76)}.class-tabs button::after{left:66px;right:auto;transform:translate(-8px,-50%)}.class-tabs button::before{left:59px;right:auto;transform:translate(-6px,-50%) rotate(225deg)}.class-tabs button:hover::before,.class-tabs button:focus-visible::before{transform:translate(0,-50%) rotate(225deg)}.class-info{transform:translateX(-28px)}.class-visual{height:116%;bottom:-8%}.class-visual .portrait{height:112%}.class-visual .portrait-male{bottom:-6%}.class-visual .portrait-female{top:-6%}@media(max-width:1100px){.class-stage{padding-left:62px}.class-tabs{left:-2px}.class-info{transform:translateX(-12px)}.class-visual{height:113%;bottom:-6%}}@media(max-width:640px){.class-stage{padding-left:54px}.class-tabs{left:-5px;right:auto;top:18px;transform:none;gap:4px}.class-tabs button,.class-tabs button.active{width:48px;height:48px}.class-tabs button .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(.58)}.class-tabs button.active .class-icon,.class-tabs button:hover .class-icon,.class-tabs button:focus-visible .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(.66)}.class-info{width:82%;transform:translateX(8px)}.class-visual{height:69%;bottom:-7%}.class-visual .portrait{height:113%}.class-visual .portrait-male{bottom:-7%}.class-visual .portrait-female{top:-7%}}

/* The glow sits behind the transparent PNGs; both portraits share one vertical center. */
.class-visual{bottom:0;height:112%;background:none;isolation:isolate}.class-visual::before{content:"";position:absolute;z-index:0;left:8%;right:8%;top:12%;bottom:8%;background:radial-gradient(ellipse at center,rgba(109,157,172,.38) 0%,rgba(119,158,168,.16) 38%,rgba(119,158,168,0) 72%);pointer-events:none}.class-visual .portrait{top:50%;bottom:auto;height:108%}.class-visual .portrait-male{top:50%;bottom:auto;transform:translate(0,-50%) rotate(-1deg)}.class-visual .portrait-female{top:50%;bottom:auto;transform:translate(0,-50%) rotate(1deg)}.class-visual.switching .portrait-male{opacity:0;transform:translate(-7%,-47%) scale(.96) rotate(-3deg)}.class-visual.switching .portrait-female{opacity:0;transform:translate(7%,-53%) scale(.96) rotate(3deg)}@media(max-width:1100px){.class-visual{bottom:0;height:108%}.class-visual .portrait{height:105%}}@media(max-width:640px){.class-visual{bottom:0;height:66%}.class-visual::before{left:0;right:0;top:8%;bottom:5%}.class-visual .portrait{top:50%;height:106%}.class-visual .portrait-male,.class-visual .portrait-female{top:50%;bottom:auto}}

/* More vertical room keeps the full transparent portraits visible. */
.class-stage{height:760px;overflow:visible}.class-visual{top:50%;bottom:auto;height:150%;transform:translateY(-50%);overflow:visible}.class-visual::before{top:18%;bottom:18%}.class-visual .portrait{height:92%;max-height:none}.class-tabs{gap:2px}.class-tabs button,.class-tabs button.active{width:78px;height:78px}.class-tabs button .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(1.02)}.class-tabs button.active .class-icon,.class-tabs button:hover .class-icon,.class-tabs button:focus-visible .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(1.14)}.class-tabs button::after{left:78px;padding:5px 8px;border:0;background:rgba(17,24,32,.78);box-shadow:none;text-shadow:0 2px 8px rgba(0,0,0,.75)}.class-tabs button::before{display:none!important}@media(max-width:1100px){.class-stage{height:720px}.class-visual{top:50%;bottom:auto;height:145%}.class-tabs button,.class-tabs button.active{width:70px;height:70px}.class-tabs button::after{left:70px}}@media(max-width:640px){.class-stage{height:700px}.class-visual{top:62%;bottom:auto;height:105%}.class-visual .portrait{height:94%}.class-tabs button,.class-tabs button.active{width:58px;height:58px}.class-tabs button .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(.82)}.class-tabs button.active .class-icon,.class-tabs button:hover .class-icon,.class-tabs button:focus-visible .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(.94)}}

/* Keep both artwork canvases centered vertically; only their horizontal anchors differ. */
.class-visual .portrait-male{top:50%;bottom:auto;object-position:left center;transform:translate(0,-50%) rotate(-1deg)}.class-visual .portrait-female{top:50%;bottom:auto;object-position:right center;transform:translate(0,-50%) rotate(1deg)}@media(max-width:640px){.class-visual{top:58%}.class-visual .portrait-male{object-position:left center}.class-visual .portrait-female{object-position:right center}}

/* TexturePacker stores every class mark rotated: crop the physical 66×57 frame. */
.class-tabs button .class-icon{width:66px;height:57px}

/* Final desktop composition: copy at upper-left, artwork center-right, controls at right. */
@media(min-width:1101px){.class-stage{padding-left:0}.class-info{position:relative;z-index:6;width:310px;transform:translate(-68px,-44px);padding:22px 34px 22px 0;background:linear-gradient(90deg,rgba(231,229,224,.96) 0%,rgba(231,229,224,.78) 72%,rgba(231,229,224,0) 100%)}.class-visual{left:27%;width:65%;height:150%}.class-visual .portrait{width:82%;height:98%}.class-visual .portrait-male{left:-1%}.class-visual .portrait-female{right:-3%}.class-tabs{left:auto;right:-22px;top:50%;transform:translateY(-50%);gap:1px}.class-tabs button,.class-tabs button.active{width:88px;height:88px}.class-tabs button .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(1.12)}.class-tabs button.active .class-icon,.class-tabs button:hover .class-icon,.class-tabs button:focus-visible .class-icon{transform:translate(-50%,-50%) rotate(-90deg) scale(1.28)}.class-tabs button::after{left:auto;right:88px;transform:translate(8px,-50%)}}
@media(min-width:641px) and (max-width:1100px){.class-stage{padding-left:0}.class-info{position:relative;z-index:6;width:290px;transform:translate(-30px,-32px);padding:18px 28px 18px 0;background:linear-gradient(90deg,rgba(231,229,224,.94),rgba(231,229,224,.64) 75%,transparent)}.class-visual{left:25%;width:66%;height:140%}.class-visual .portrait{width:80%;height:96%}.class-tabs{left:auto;right:-12px;top:50%;transform:translateY(-50%)}.class-tabs button,.class-tabs button.active{width:72px;height:72px}.class-tabs button::after{left:auto;right:72px;transform:translate(8px,-50%)}}
@media(max-width:640px){.class-stage{padding-left:0;padding-right:50px}.class-info{position:relative;z-index:6;width:84%;transform:translate(0,-18px);padding:12px 16px 12px 0;background:linear-gradient(90deg,rgba(231,229,224,.95),rgba(231,229,224,.58) 78%,transparent)}.class-visual{left:4%;width:88%;top:60%}.class-visual .portrait{width:82%}.class-tabs{left:auto;right:-6px;top:18px;transform:none}.class-tabs button::after{display:none}}

/* Larger portraits with a wider horizontal split. */
@media(min-width:1101px){.class-visual{left:25%;width:69%}.class-visual .portrait{width:92%;height:105%}.class-visual .portrait-male{left:-10%}.class-visual .portrait-female{right:-12%}}
@media(min-width:641px) and (max-width:1100px){.class-visual{left:23%;width:69%}.class-visual .portrait{width:86%;height:101%}.class-visual .portrait-male{left:-7%}.class-visual .portrait-female{right:-9%}}
@media(max-width:640px){.class-visual{left:2%;width:91%}.class-visual .portrait{width:86%;height:98%}.class-visual .portrait-male{left:-5%}.class-visual .portrait-female{right:-6%}}
.news-photo{display:block;aspect-ratio:16/9;overflow:hidden;background:#1d2c33}.news-photo img{width:100%;height:100%;object-fit:cover;display:block}.card-copy a:hover,.news-list a:hover{color:#3d6d80}