/* Original client stone, dragon frames, buttons and icon artwork. */
:root{--bg:#17191a;--panel:#242525;--line:#756e5b;--gold:#c6b48a;--bright:#fff0c9;--muted:#b8b6ab}
body{color:#dedbd1;background:radial-gradient(ellipse at 50% 500px,#51534b20,transparent 75%),url('assets/optimized/b8da519d5c65684d2f0179b9.webp') repeat,#151719;font-size:13px}
button:focus-visible,a:focus-visible{outline-color:#e8cf8a}
.utility{background:#101212;border-color:#696454;color:#c3bda8}.utility a,.utility button,.language{color:#d3c6a7}
.hero--split:before{background-image:url('assets/optimized/fe7669ba914b9af0c058c9dc.webp');background-position:center 42%;filter:grayscale(.84) saturate(.6) contrast(1.05) brightness(1.28);opacity:1}
.hero--split:after{background:linear-gradient(90deg,#111a2420,#111a2425 50%,#111a2420),linear-gradient(0deg,#141718ed,transparent 58%,#11192215)}
.hero--split .hero-shade{background:linear-gradient(#16283822,#14171911)}
/* Keep the intro open to the original sky; native frames belong to content panels. */
.hero--split .hero-inner:before{content:none;display:none}
.hero--split .hero-inner:after{background:#a99d75;box-shadow:0 0 12px #92836430;height:1px;opacity:.55}
.hero--split .hero-party:before{border-color:#a89d6c25;box-shadow:none}
.hero--split .hero-party>.mu-model{animation:none!important;filter:none;isolation:auto;opacity:1;z-index:auto;translate:none}
.hero--split .hero-party>.mu-model>:is(canvas,.mu-model-fallback){filter:drop-shadow(0 7px 6px #0008)}
.hero--split .party-elf{left:-2%;width:20%}.hero--split .party-dk{left:5.5%;width:29%}.hero--split .party-dw{left:20.4%;width:29%}.hero--split .party-mg{left:64.2%;width:31%}.hero--split .party-dl{left:85%;width:17%}
.hero--split .party-elf>:is(canvas,.mu-model-fallback){z-index:5}.hero--split .party-dk>:is(canvas,.mu-model-fallback){z-index:3}.hero--split .party-dw>:is(canvas,.mu-model-fallback){z-index:4}.hero--split .party-mg>:is(canvas,.mu-model-fallback){z-index:3}.hero--split .party-dl>:is(canvas,.mu-model-fallback){z-index:4}
.hero--split .party-label{z-index:20}
.hero--split .hero-edition{color:#cbbd98}.hero--split .hero-copy{padding-top:54px}.hero--split .hero-copy>p{color:#ded7c6}.hero-memory-caption,.hero-memory-webzen{color:#e5d9b8}.hero-memory-caption>span,.hero-memory-caption>p,.hero-memory-webzen>span{color:#d7cfb9}
.main-nav{border-color:#978b70;background:url('assets/optimized/b8da519d5c65684d2f0179b9.webp');box-shadow:inset 0 0 0 3px #080909,0 5px 12px #0007}
.main-nav>a,.main-nav>button{background:url('assets/optimized/505565d3081a8d78af311681.webp') center/100% 100%;color:#e4ddc7;border:0;box-shadow:none;padding:4px}
.main-nav>a:hover,.main-nav>button:hover{background-image:url('assets/optimized/9d6a16c64842792d08766ff1.webp');color:#fff1c8}
.main-nav .active{background:url('assets/optimized/04c9da296390bde3ac57a132.webp') center/100% 100%;color:#ffe1a1;text-shadow:0 1px 2px #000}
.main-nav .active:after{background:#24231d;color:#d1bc7e}.main-nav small{color:#afa68f}
.announcement{color:#d0cab9;border-color:#756c54}.announcement-label{color:#dfcfa5;border-color:#6e654c}.announcement>a{color:#e4d2a4}
.panel{border-color:#857c64;outline-color:#090a0b;background:url('assets/optimized/b8da519d5c65684d2f0179b9.webp') repeat,#242525;box-shadow:inset 0 0 0 3px #0b0d0c9c,0 4px 12px #0006}
.panel-title,.section-heading{color:#eee2c3;background:linear-gradient(#48494188,#161918bb),url('assets/optimized/b8da519d5c65684d2f0179b9.webp');border-color:#827457;box-shadow:inset 0 1px #aea58a55}
.panel-title{font-size:13px;line-height:1.7;padding-top:13px;padding-bottom:13px}
.section-heading h2{color:#efe5ce;font-size:14px}.heading-ornament{color:#baaa82}
.panel-title>svg{display:none}.panel-title:before{content:'';width:20px;height:20px;flex-shrink:0;background:url('assets/optimized/fc6fc35ff1a068919330aa9e.webp') center/contain no-repeat}
.account-panel .panel-title:before{background-image:url('assets/optimized/0fb8914f7d232979b5ff25fd.webp')}.server-info .panel-title:before,#thong-tin .panel-title:before,.event-panel .panel-title:before{background-image:url('assets/optimized/c703ef2c78a8fb36c7e98435.webp')}.ranking-panel .panel-title:before{background-image:url('assets/optimized/70bc36bfd8827f7a9c828a68.webp')}
.panel-title:after{content:'';width:48px;height:15px;right:6px;top:50%;transform:translateY(-50%);background:url('assets/optimized/6111e30462606d2761ea7cb9.webp') right center/contain no-repeat;opacity:.7}
.panel p,.panel-inner>p:first-child,.server-info dt,.panel-subtitle,.event-footnote,.ranking-empty p,.news-footer,.news-footer>span,.character-copy>p,.server-note,.nostalgia-note p,.nostalgia-note small,footer p,footer small{color:#cac5b5}
.panel-inner>p:first-child,.account-panel .panel-inner>p{font-size:11px}.server-info dd,.server-name strong{color:#eee4ce}.server-info .pending{color:#d3bd86}.server-name>span:last-child{border-color:#7a6c49;color:#d2bd8b}.server-info dl>div{border-color:#99917a33}.status-dot{background:#c6ab6a;box-shadow:0 0 6px #c6ab6a66}
.metal-button,.dark-button,.download-block,.small-bronze{background:url('assets/optimized/cc462d004c8ac1bce7b01a29.webp') center/100% 100% no-repeat;border:0;outline:0;box-shadow:0 3px 6px #0007;color:#fff0d0;text-shadow:0 1px 2px #000;letter-spacing:0}
.metal-button:before,.metal-button:after,.download-block:before{display:none}
.metal-button:hover,.dark-button:hover,.download-block:hover,.small-bronze:hover{background-image:url('assets/optimized/2282ebe4a661c4c6a417e92f.webp');color:#171c20;text-shadow:0 1px #ffffffaa;filter:none}
.metal-button:active,.dark-button:active,.download-block:active,.small-bronze:active{background-image:url('assets/optimized/95272d0f1ac2b4f501786d64.webp');color:#fff1d1;text-shadow:0 1px 2px #000}
.dark-button{background-image:url('assets/optimized/505565d3081a8d78af311681.webp')}.dark-button:hover{background-image:url('assets/optimized/9d6a16c64842792d08766ff1.webp');color:#fff1d1;text-shadow:0 1px 2px #000}.dark-button:active{background-image:url('assets/optimized/04c9da296390bde3ac57a132.webp')}
.download-block{min-height:85px;padding:15px 14px;gap:10px}.download-block>svg{display:none}.download-block:after{content:'';order:-1;width:31px;height:35px;background:url('assets/optimized/c703ef2c78a8fb36c7e98435.webp') center/contain no-repeat;flex-shrink:0}.download-block strong{font-size:25px}.download-block small{color:#d4c9aa;font-size:8px}.download-block:hover small{color:#4d442e}.download-arrow{color:#d5bf89}
.text-button,.text-link,.text-link:hover,.text-button:hover{color:#d9c38e}.community-block{border-color:#8d8062;background:linear-gradient(#2b2c2766,#11151399),url('assets/optimized/b8da519d5c65684d2f0179b9.webp');box-shadow:inset 0 0 0 3px #0a0d0b66}.community-block strong,.community-block small,.community-block em,.facebook-glyph{color:#ddd2b4}.community-block:hover{filter:brightness(1.15)}
.feature-banner{border-color:#928367;background:linear-gradient(90deg,#0f171dec,#16221b8c),url('assets/optimized/f9984c5f5b1b5cc80129ed43.webp') center/cover}.feature-vignette{background:linear-gradient(90deg,#0b0f12b8,transparent)}.feature-copy h2{color:#f1e4bf;text-shadow:0 2px 4px #000}.feature-copy p{color:#ded4bb}.feature-copy .eyebrow{color:#cfbc8f}.banner-seal{color:#e1cda0;border-color:#a08a5d;background:#111613a8;box-shadow:inset 0 0 0 2px #75643f44}
.news-tabs,.class-tabs,.ranking-tabs,.model-controls{background:linear-gradient(#242724,#151918),url('assets/optimized/b8da519d5c65684d2f0179b9.webp');border-color:#776b50}
.news-tabs>button,.class-tabs>button,.ranking-tabs>button{color:#c7c0aa;background:transparent;font-size:12px;letter-spacing:0}
.news-tabs>button:hover,.class-tabs>button:hover,.ranking-tabs>button:hover{color:#fff0c1}
.news-tabs>button.selected,.class-tabs>button.selected,.ranking-tabs>button.selected{color:#f6dd9e;background:#9f8b4d1c;box-shadow:inset 0 -2px #baa16b;border-color:#b49a62}
.news-list{background:#15191844}.news-row{border-color:#89827044;color:#e0daca;font-size:12px}.news-row:hover{color:#fff0c0;background:#d9c99b0c}.news-text{color:inherit}.news-tag,.news-tag.notice,.news-tag.event,.news-tag.guide{background:#111713;border-color:#83714e;color:#d4c193;font-size:9px}.new-tag{color:#f0bd6b;background:#c0812c15;border-color:#b8995d66}.news-chevron{color:#c3aa72}.news-footer{border-color:#776b50}.news-footer a{color:#dbc38d}
.character-display{background:radial-gradient(ellipse at 27% 62%,#74644030,transparent 70%),url('assets/optimized/b8da519d5c65684d2f0179b9.webp');min-height:432px}.character-display:after{background:radial-gradient(ellipse at 25% 70%,#ac94521c,transparent 65%)}.character-rune{color:#94805d24}.character-copy h3{color:#f0dfb6}.character-copy .eyebrow{color:#c8b88f}.character-copy>p{font-size:12px}.class-traits>span{color:#d9cba8;background:#171b17;border-color:#85734b}.equipment-list{border-color:#8c7b5655}.equipment-list dt{color:#b8aa87;font-size:9px}.equipment-list dd{color:#e8dec6;font-size:12px}.equipment-list>div{padding-top:4px;padding-bottom:4px}.model-controls{padding-top:10px;padding-bottom:10px}.model-buttons{background:transparent;border-color:#82704d}.model-buttons>button{background:url('assets/optimized/505565d3081a8d78af311681.webp') center/100% 100%;color:#e6d7b3;border:0}.model-buttons>button:hover:enabled{background-image:url('assets/optimized/9d6a16c64842792d08766ff1.webp');box-shadow:none;color:#fff0c2}.model-buttons>button:active{background-image:url('assets/optimized/04c9da296390bde3ac57a132.webp')}#model-note{color:#bcae8a}
.event-tile,.event-tile.blood,.event-tile.devil,.event-tile.chaos{border:3px solid transparent;border-image:url('assets/optimized/505565d3081a8d78af311681.webp') 4 fill stretch;background:#171b17;box-shadow:0 3px 7px #0005;filter:none}.event-tile:before{background:none}.event-tile strong{color:#f2e4c4;text-shadow:0 1px 3px #000}.event-tile small{color:#bfb18b}.event-tile>b{color:#c6ad77}.event-tile:hover{filter:brightness(1.18)}
.ranking-empty{background:#14191755}.ranking-empty>svg{color:#b8a277}.ranking-empty strong{color:#ded0ac}.ranking-empty>span{color:#ad9d78}.quick-guide>button{border-color:#7a715644;color:#d8cfb8;font-size:12px}.quick-guide>button>span{color:#c0a66f}.quick-guide>button>b{color:#c0a66f}.quick-guide>button:hover{color:#fff1cb}
.return-banner{border-color:#8a7d5d;background:linear-gradient(#11181777,#14171377),url('assets/optimized/b8da519d5c65684d2f0179b9.webp');box-shadow:inset 0 0 0 4px #080c0b88}.return-banner h2{color:#f0deb5}.return-banner .eyebrow{color:#c1af86}.return-banner p{color:#d0c6ad}.return-banner:before,.return-banner:after{background:none}
footer{border-color:#6c634d;color:#c6b990}.footer-logo{color:#e8d8b5}.footer-links,.footer-links button,.footer-links a{color:#c9b88f}footer strong{color:#dfcfa9}
dialog{border-color:#95815c;background:url('assets/optimized/b8da519d5c65684d2f0179b9.webp');color:#e2dac5;box-shadow:0 20px 80px #000a}.dialog-frame{background:linear-gradient(#11171399,#171b1799),url('assets/optimized/b8da519d5c65684d2f0179b9.webp');border-color:#a58a57}.dialog-frame h2{color:#f0dbac}.dialog-frame p,.dialog-frame li{color:#ddd5bf!important}.dialog-frame h3,.dialog-frame strong{color:#f1dfb9}.dialog-kicker,.dialog-footer{color:#c2ae7c}.dialog-note{border-color:#9e8751;background:#e7c2760a}.dialog-close{background:url('assets/optimized/f377139b6fc66db163e6fa29.webp') center/100% 100%;color:#eee0bd}
.gear-level-control{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px auto 0;color:#d8c89e;font:500 10px/1.8 var(--font)}.gear-level-control>button{width:46px;min-height:29px;background:url('assets/optimized/f377139b6fc66db163e6fa29.webp') center/100% 100%;color:#eee2c5;font:600 11px var(--font);border:0;text-shadow:0 1px #000}.gear-level-control>button[aria-pressed="true"]{background-image:url('assets/optimized/940e33abca52d7322c7bd862.webp');color:#ffe0a1;outline:1px solid #bca470;outline-offset:-3px}.gear-level-control>button:hover{background-image:url('assets/optimized/4f62a5585c1b9c51719515a7.webp');color:#201f17;text-shadow:none}
@media(max-width:1000px){.hero--split .hero-copy{padding-top:28px}.hero--split .party-elf{left:-7%;width:30%}.hero--split .party-dk{left:7%;width:38%}.hero--split .party-dw{left:23%;width:38%}.hero--split .party-mg{left:46%;width:38%}.hero--split .party-dl{left:72%;width:24%}.panel-title{font-size:12px}.section-heading h2{font-size:12px}.main-nav span{font-size:11px}.quick-guide>button{font-size:11px}}
@media(max-width:650px){.hero--split{height:875px}.hero--split .hero-copy{max-width:340px}.hero--split .hero-party{height:426px;bottom:26px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:205px 205px;gap:16px 0}.hero--split .hero-party>.mu-model{position:relative;left:-23%;top:auto;bottom:auto;width:146%;height:205px}.hero--split .party-elf{grid-column:1/span 2;grid-row:1}.hero--split .party-dk{grid-column:3/span 2;grid-row:1}.hero--split .party-dw{grid-column:5/span 2;grid-row:1}.hero--split .party-mg{grid-column:2/span 2;grid-row:2}.hero--split .party-dl{grid-column:4/span 2;grid-row:2}.hero--split .party-label{min-width:46px;padding:5px 6px}.hero--split .party-label>strong{font-size:11px}.hero--split .party-label>small{display:none}.hero--split .hero-inner:after{bottom:27px}.hero--split .hero-party:before{height:32px}.gear-level-control{margin-top:12px}.download-block{min-height:82px}.download-block strong{font-size:21px}.download-block:after{width:24px}.main-nav span{font-size:10px}.main-nav small{font-size:7px}.character-display{min-height:0}.news-row,.quick-guide>button{font-size:11px}.panel-title{font-size:11px}.section-heading h2{font-size:11px}}

/* Readable text over the original sky and dark stone panels. */
.hero--split .hero-eyebrow{visibility:visible;color:#d8caa7;text-shadow:0 2px 4px #000}.hero--split .hero-copy h1,.hero--split .hero-copy>p{text-shadow:0 2px 4px #000,0 0 12px #000b}.news-row:first-child .news-text{color:#f1dfb4}.news-row:hover .news-text{color:#fff0c0}.news-footer{background:#171c18;color:#c4bba4}.news-footer>span{color:#c4bba4}.news-footer a{color:#e0c994}.news-tabs .selected:after,.class-tabs .selected:after{background:#bba16b;box-shadow:none}
/* Leave room for native overhead names and the flight's highest hover point. */
@media(max-width:650px){.hero--split{height:940px}}