/* Original Ragnarok / 4game composition, with local-only Ragnarok navigation. */
@font-face{font-family:Onest;src:url('/assets/fonts/Onest-Medium.93527587.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Onest;src:url('/assets/fonts/Onest-SemiBold.e3f241be.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:Lato;src:url('/assets/fonts/Lato-Regular.b07ce81f.woff2') format('woff2');font-display:swap}
:root{--prime-purple:#191138;--prime-deep:#110a27;--prime-gold:#f9c10b}
.reference-header{height:113px;background:var(--prime-purple);position:sticky;top:0;border:0;color:#fff;font-family:Onest,Arial,sans-serif;z-index:30}
.reference-header .header-inner{width:100%;height:65px;max-width:none;margin:0;padding:0 67px;gap:20px;border-bottom:1px solid #ffffff0d}
.platform-mark{display:flex;align-items:center;flex-shrink:0;width:36px}.platform-mark img{display:block;width:36px;height:37px}
.reference-header .main-nav{font-family:Onest,Arial,sans-serif;gap:22px;flex:1;align-items:center;align-self:stretch;white-space:nowrap}
.reference-header .main-nav>a,.nav-dropdown>summary{font-family:Onest,Arial,sans-serif;font-size:15px;line-height:20px;font-weight:500;color:#fffc;display:flex;align-items:center;gap:7px;padding:0;height:65px;cursor:pointer}
.reference-header .main-nav a:hover,.nav-dropdown>summary:hover{color:var(--prime-gold)}
.reference-header .main-nav a.active:after{display:none}.external-arrow{font-size:16px;color:inherit;opacity:.6}.reference-header .rewards-link{gap:9px}.rewards-link img{width:25px;height:25px;object-fit:contain;flex-shrink:0}
.nav-dropdown{position:relative}.nav-dropdown>summary{list-style:none}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown summary>span{opacity:.6}.nav-dropdown>div{position:absolute;top:55px;left:-16px;min-width:190px;background:#241a45;border:1px solid #ffffff1a;border-radius:5px;padding:8px;box-shadow:0 6px 16px #0004;z-index:40}.nav-dropdown>div>a{display:block;color:#fff;font-size:14px;padding:12px!important;height:auto!important}
.reference-header .header-account{gap:10px;flex-shrink:0;margin-left:auto}.header-signin{background:#ffffff26;border-radius:3px;color:#fff;font-size:14px;padding:10px 23px;line-height:20px;white-space:nowrap}.header-signin:hover{color:var(--prime-gold);background:#ffffff33}.install-button{display:flex;gap:8px;align-items:center;justify-content:center;color:#171019;background:var(--prime-gold);padding:11px 16px;border-radius:3px;font:500 14px/18px Onest,Arial,sans-serif;white-space:nowrap}.install-button:hover{background:#fdca44;color:#000}.reference-header .menu-toggle{color:#fff}
.game-nav{height:48px;display:flex;align-items:center;gap:25px;padding:0 67px;overflow-x:auto;scrollbar-width:none;background:#191138fa}.game-nav::-webkit-scrollbar{display:none}.game-nav a{color:#b0a8c3;font:500 13px/16px Onest,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}.game-nav a.active,.game-nav a:hover{color:#fff}.game-nav a.active{font-weight:700}
.reference-home{font-family:Lato,Arial,sans-serif;overflow:hidden;background:#faf6f2 url('/assets/img/ui/pattern.3df59ae3.webp')}
.reference-home .hero{height:674px;background-size:cover;background-position:center top}
.reference-home .hero-character{height:450px;width:900px;bottom:0;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.reference-home .hero-character img{width:161px;height:476px;max-width:none;margin-top:40px;filter:none;animation:none;object-fit:contain}
.reference-home .intro{width:min(900px,calc(100% - 40px));height:385px;padding:120px 0 80px;margin:0 auto;display:flex;align-items:center;justify-content:flex-start;flex-direction:column}
.reference-home .play-button{width:332px;height:120px;top:-49px;font:900 30px Jost,sans-serif;padding-bottom:25px;filter:none}
.reference-home .intro h1{font:600 20px/25px Jost,sans-serif;letter-spacing:-.6px;margin:0 0 25px;text-align:center}
.reference-home .intro p{width:min(650px,100%);font:400 15px/25px Lato,Arial,sans-serif;color:#8a8a8a;margin:0}.reference-home .intro p>a{color:#35322f;text-decoration:underline;white-space:nowrap}
.reference-home .section-heading{width:750px;max-width:calc(100% - 40px);padding:0;margin:0 auto;text-align:center}
.reference-home .section-heading h2{font:900 28px/32px Jost,sans-serif;letter-spacing:0;color:#d78f68;text-transform:uppercase;margin:0 0 25px}
.reference-home .section-heading p{font:400 15px/25px Lato,Arial,sans-serif;color:#8a8a8a;max-width:none;margin:0}
.reference-home .classes-section{padding:55px 0 0;height:760px}
.reference-home .classes-section .section-heading{min-height:145px;margin-bottom:125px}
.reference-home .class-carousel{width:100%;max-width:none;margin:0}
.reference-home .class-track{gap:0;padding:20px 0 0;height:350px;scroll-snap-type:x mandatory;align-items:flex-start}
.reference-home .class-track .class-card{width:250px;flex:0 0 250px;padding:0;height:330px;scroll-snap-align:center}
.reference-home .class-art{height:270px;margin:0 10px 20px}.reference-home .class-art:before{inset:40px 20px 14px;border-radius:20px;background:linear-gradient(150deg,#de818140,#edb5b650)}
.reference-home .tone-1 .class-art:before{background:linear-gradient(150deg,#6675c040,#94a2e350)}.reference-home .tone-2 .class-art:before{background:linear-gradient(150deg,#b189bd40,#ddc1dd50)}.reference-home .tone-3 .class-art:before{background:linear-gradient(150deg,#86ad8240,#c8ddaf50)}.reference-home .tone-4 .class-art:before{background:linear-gradient(150deg,#aead7340,#e8d5aa50)}
.reference-home .class-art img{max-width:250px;max-height:270px;width:100%;height:100%;filter:none}.reference-home .class-card:hover .class-art img{transform:scale(1.12)}
.reference-home .class-name{font:600 22px/27px Jost,sans-serif}.reference-home .class-role,.reference-home .class-more{display:none}
.class-pagination{display:flex;align-items:center;justify-content:center;gap:60px;margin-top:48px}.reference-home .carousel-arrow{position:static;border:0;background:none;color:#181514;font-size:20px;width:25px;height:28px;border-radius:0;line-height:1;padding:0}
.class-dots{display:flex;gap:13px;align-items:center}.class-dot{display:block;width:12px;height:12px;padding:0;border-radius:50%;background:#8b8b8b;flex-shrink:0}.class-dot[aria-pressed=true]{background:#e17a51}.class-dot:hover{background:#e17a51}
.reference-home .feature-section{position:relative;margin-top:100px;min-height:1080px;padding:20px 0 0;background-image:url('/assets/img/ui/background.6433a9c7.webp');background-repeat:no-repeat;background-position:center 120px;background-size:auto 850px}
.reference-home .feature-stage{position:relative;width:371px;height:528px;margin:150px auto 0}
.reference-home .feature-stage>img{width:371px;height:528px;max-width:none;object-fit:contain;display:block}
.feature-slider{overflow:auto;scrollbar-width:none;padding-bottom:35px}.feature-slider::-webkit-scrollbar{display:none}
.reference-home .feature-cards{display:flex;align-items:flex-start;gap:40px;width:max-content;max-width:none;margin:30px 0 0;padding-left:calc(50vw - 180px);padding-right:calc(50vw - 180px)}
.reference-home .feature-card{display:flex;align-items:flex-start;gap:24px;width:360px;min-height:155px;flex-shrink:0;padding:25px;border-radius:20px;text-align:left;background:#fff;box-shadow:-4px 6px 14px #ce723f1a;opacity:.65;color:#35322f}
.reference-home .feature-card.selected,.reference-home .feature-card:hover{opacity:1}.reference-home .number{width:50px;height:50px;border-radius:50%;font:900 29px/50px Jost,sans-serif}
.feature-copy{display:flex;flex-direction:column;gap:10px;flex:1}.feature-copy>strong{font:900 15px/20px Jost,sans-serif;text-transform:uppercase}.feature-copy>span{font:400 14px/22px Lato,sans-serif;color:#8a8a8a}.feature-copy .feature-read{font-size:14px;color:#35322f;text-decoration:underline;display:none}.selected .feature-read{display:block}
.feature-next{display:flex;align-items:center;justify-content:center;position:absolute;right:0;top:510px;height:80px;width:85px;border-radius:40px 0 0 40px;background:#0003;color:#fff;font-size:22px}.feature-next:hover{background:#0006;color:#fff}
.reference-home .premium-section{padding:70px 0 120px;text-align:center;min-height:1100px;margin:0 auto}
.premium-art{position:relative;display:block;width:800px;height:452px;margin:20px auto 0;max-width:100%}.premium-scene{position:absolute;left:0;bottom:0;width:800px;height:452px;object-fit:contain}.premium-smile{width:81px;height:73px;position:absolute;left:65px;top:45px}.premium-gift{display:flex;align-items:center;justify-content:center;position:absolute;width:194px;height:234px;bottom:0;left:50%;transform:translateX(-50%);background:url('/assets/img/ui/particles.7d0f6c40.webp') center/contain no-repeat}.premium-gift img{width:150px;margin-top:10px}
.reference-home .premium-benefits{display:grid;grid-template-columns:repeat(4,120px);justify-content:center;gap:30px 45px;margin:55px auto 45px}.reference-home .premium-benefits>div{width:120px}.reference-home .premium-benefits img{width:104px;height:104px;object-fit:contain;padding:6px;background:#fff;border:0;border-radius:30px}.reference-home .premium-benefits p{font:400 14px/20px Lato,sans-serif;margin:15px 0 0;color:#8a8a8a}
.reference-home .premium-button{position:relative;left:auto;top:auto;transform:none;margin:0 auto;display:flex;width:361px;height:148px;padding-bottom:35px;font-size:28px}
.reference-home .faq-section{min-height:1050px;padding:100px 20px 220px}.reference-home .faq-section .section-heading{margin-bottom:60px}.reference-home .faq-list{max-width:1000px}.reference-home .faq-list details{padding:25px 0;border-color:#0002}.reference-home .faq-list summary{font:600 20px/27px Jost,sans-serif;color:#dc936d}.reference-home .faq-list summary>span{font-size:0;width:9px;height:8px;background:#dc936d;clip-path:polygon(50% 100%,100% 0,0 0)}.reference-home .faq-list details[open] summary>span{transform:rotate(180deg)}.reference-home .faq-list p{font:400 16px/27px Lato,sans-serif;color:#8a8a8a}
.reference-footer{position:relative;display:flex;gap:35px;align-items:flex-start;justify-content:space-between;min-height:130px;padding:25px 75px;background:#faf6f2;border-top:1px solid #eee9e3;font-family:Onest,sans-serif}
.footer-symbols{display:flex;gap:15px;align-items:center;color:#222;padding-top:4px}.footer-symbols a{font-size:15px;line-height:1}.footer-symbols img{display:block;filter:grayscale(1) brightness(.25)}.footer-info{margin-left:auto;text-align:center}.footer-info nav{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;font:500 14px/20px Onest,sans-serif}.footer-info p{font:400 13px/18px Onest,sans-serif;color:#b9b5b1;margin:8px 0 0}.footer-info small{font-size:13px;color:#aaa5a1}.age-label{font:500 22px Onest,sans-serif;color:#ddd7d1;margin-top:9px}
/* Carry the requested purple and gold styling into community and administration. */
.page-forum,.page-admin{background:#110a27;color:#f0eafa;--ink:#f0eafa;--muted:#aaa1bf;--line:#ffffff16;--orange:#f9c10b;--shadow:0 10px 30px #0002}
.page-forum .page-banner,.page-admin .page-banner{background:linear-gradient(90deg,#191138f5,#241438bc),url('/assets/img/ui/background.c345e0d5.webp') center 40%/cover;border-bottom:1px solid #f9c10b25}
.page-forum .page-banner .eyebrow,.page-admin .page-banner .eyebrow{color:#f9c10b}
.page-forum .panel,.page-admin .panel{background:#1c143b;border-color:#ffffff14;color:#f0eafa}
.page-forum .button,.page-admin .button{background:#f9c10b;color:#171022!important;box-shadow:none;border-radius:4px}.page-forum .button.secondary,.page-admin .button.secondary{background:#ffffff0c;color:#f9c10b!important;border-color:#f9c10b55}
.page-forum .pill,.page-admin .pill{color:#b4a9cb}.page-forum .pill.selected,.page-admin .pill.selected{color:#f9c10b;background:#f9c10b12;border-color:#f9c10b45}
.page-forum .text-link,.page-admin .text-link,.page-admin .row-actions>a,.page-admin .manage-row>a{color:#f9c10b}
.page-forum .forum-welcome{background:linear-gradient(110deg,#2b1d50,#201639);border-color:#f9c10b25}.page-forum .eyebrow,.page-admin .eyebrow{color:#d4b866}.page-forum .table-heading{background:#241a45;color:#c6b090}
.page-forum .category-icon{background:#f9c10b12;color:#f9c10b}.page-forum .category-count,.page-forum .row-arrow,.page-forum .topic-icon,.page-forum .topic-replies,.page-forum .stat-line strong{color:#e4c263}
.page-forum .category-row:hover,.page-forum .topic-row:hover,.page-admin .topic-row:hover{background:#ffffff06}.page-forum .tiny-label,.page-forum .badge,.page-admin .badge{color:#e6c669;background:#f9c10b12;border-color:#f9c10b30}
.page-forum .sidebar-note h3,.page-admin .stat-card strong{color:#f9c10b}.page-forum .field,.page-admin .field{color:#c0b2d4}.page-forum .field input,.page-forum .field textarea,.page-forum .field select,.page-admin .field input,.page-admin .field textarea,.page-admin .field select{background:#110a27;color:#f1e9ff;border-color:#ffffff30;color-scheme:dark}
.page-forum .field input::placeholder,.page-admin .field input::placeholder{color:#8d80a5}.page-forum .forum-post aside{background:#251b42}.page-forum .avatar{background:#33254f;border-color:#4b3866;color:#f4d477}.page-forum .prose{color:#c6bdd4}
.page-admin .admin-nav>a{color:#c6b9d9}.page-admin .admin-nav>a.selected,.page-admin .admin-nav>a:hover{background:#f9c10b15;color:#f9c10b}.page-admin .stat-card span,.page-admin .check{color:#b4a5c7}.page-admin .info-box,.page-forum .info-box{background:#f9c10b10;border-color:#f9c10b30;color:#e4d09b}
.page-forum .reference-footer,.page-admin .reference-footer{background:#110a27;border-color:#ffffff15;color:#aaa1bf}.page-forum .footer-symbols,.page-admin .footer-symbols{color:#c1b4d1}
@media(max-width:1600px){.reference-header .header-inner{padding:0 35px;gap:16px}.reference-header .main-nav{gap:17px}.reference-header .main-nav>a,.nav-dropdown>summary{font-size:14px}.game-nav{padding-inline:35px}.install-button{font-size:14px}.header-signin{font-size:14px;padding-inline:18px}}
@media(max-width:1250px){.reference-header .main-nav{gap:13px}.reference-header .main-nav>a,.nav-dropdown>summary{font-size:14px}.reference-header .header-inner{gap:14px;padding-inline:25px}.install-button{font-size:14px;padding-inline:10px}.header-signin{padding-inline:12px}.game-nav{padding-inline:25px;gap:20px}.game-nav a{font-size:13px;letter-spacing:1px}.reference-header .rewards-link{gap:5px}.platform-mark{width:30px}.platform-mark img{width:30px}.reference-footer{padding-inline:35px;gap:25px}}
@media(max-width:1000px){.reference-header .main-nav{gap:12px}.reference-header .main-nav>a,.nav-dropdown>summary{font-size:13px}.reference-header .main-nav>a:last-child{display:none}.install-button{font-size:13px}.reference-header .header-inner{padding-inline:20px}.reference-header .header-account{gap:6px}.reference-home .hero{background-size:auto 100%}.reference-home .premium-benefits{grid-template-columns:repeat(4,110px);gap:24px 28px}.reference-home .premium-benefits>div{width:110px}.reference-home .premium-benefits img{max-width:105px}.reference-footer{flex-wrap:wrap}.footer-info{max-width:75%}}
@media(max-width:800px){.reference-header{height:108px}.reference-header .header-inner{height:62px}.reference-header .menu-toggle{display:block;margin-left:0;font-size:24px}.reference-header .platform-mark{order:0}.reference-header .menu-toggle{order:1}.reference-header .header-account{order:2}.reference-header .main-nav{display:none;position:absolute;top:62px;left:0;right:0;background:#191138;padding:14px 20px;box-shadow:0 10px 24px #0005;border-top:1px solid #ffffff15;max-height:70vh;overflow:auto}.reference-header .main-nav.open{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.reference-header .main-nav>a,.nav-dropdown>summary{height:46px;font-size:14px}.reference-header .main-nav>a:last-child{display:flex}.nav-dropdown>div{position:relative;top:auto;left:auto;margin-bottom:10px}.game-nav{height:46px;padding-inline:20px;gap:22px}.game-nav a{font-size:13px}.install-button{padding:10px 12px;font-size:13px}.header-signin{font-size:14px;padding:9px 14px}.reference-home .hero{height:520px}.reference-home .hero-character{height:360px}.reference-home .hero-character img{height:390px;width:auto;margin-top:30px}.reference-home .intro{height:350px;padding-top:105px}.reference-home .intro h1{font-size:19px}.reference-home .intro p{font-size:14px;line-height:24px}.reference-home .classes-section{height:660px;padding-top:35px}.reference-home .classes-section .section-heading{margin-bottom:80px}.reference-home .section-heading h2{font-size:25px}.reference-home .section-heading p{font-size:14px;line-height:24px}.reference-home .class-track .class-card{width:220px;flex-basis:220px}.reference-home .class-art{height:245px}.reference-home .class-name{font-size:20px}.class-pagination{gap:25px;margin-top:20px}.class-dots{gap:9px}.class-dot{width:9px;height:9px}.reference-home .feature-section{margin-top:40px;min-height:970px;background-position:center 100px}.reference-home .feature-stage{margin-top:110px}.reference-home .premium-section{padding-top:20px;min-height:1040px}.premium-art{width:700px;height:400px}.premium-scene{width:100%;height:400px}.premium-gift{height:200px;bottom:0}.premium-gift img{width:85px;height:auto}.reference-home .premium-benefits{grid-template-columns:repeat(4,104px);gap:22px 24px}.reference-home .premium-benefits>div{width:104px}.reference-home .faq-section{min-height:850px;padding-top:70px;padding-bottom:150px}.reference-home .faq-list summary{font-size:18px}.reference-footer{padding:25px 25px 30px}.footer-info{max-width:100%;order:2;width:100%}.age-label{margin-left:auto}.reference-home .premium-smile{left:60px;top:25px}}
@media(max-width:560px){.reference-header .header-inner{gap:12px;padding-inline:15px}.platform-mark,.platform-mark img{width:28px!important}.reference-header .menu-toggle{padding:0}.reference-header .header-account{gap:7px}.header-signin{font-size:13px;padding:8px 10px}.install-button{font-size:13px;padding:9px 8px;gap:5px;max-width:185px}.install-button svg{width:13px}.game-nav{padding-inline:16px}.reference-home .hero{height:395px}.reference-home .hero-character{height:278px;width:100%}.reference-home .hero-character img{height:300px;width:auto;margin-top:25px}.reference-home .intro{height:335px;padding-top:88px;width:calc(100% - 38px)}.reference-home .intro h1{font-size:17px;line-height:23px;margin-bottom:20px;letter-spacing:-.3px}.reference-home .intro p{font-size:14px;line-height:22px}.reference-home .play-button{width:280px;height:105px;top:-40px;font-size:27px}.reference-home .classes-section{height:620px;padding-top:30px}.reference-home .classes-section .section-heading{margin-bottom:50px}.reference-home .section-heading h2{font-size:23px;line-height:29px}.reference-home .section-heading p{font-size:14px;line-height:23px}.reference-home .class-track{height:290px}.reference-home .class-track .class-card{width:190px;flex-basis:190px;height:280px}.reference-home .class-art{height:215px;margin-bottom:17px}.reference-home .class-name{font-size:18px}.class-pagination{gap:13px;margin-top:28px}.class-dots{gap:6px}.class-dot{width:7px;height:7px}.reference-home .carousel-arrow{font-size:15px;width:18px}.reference-home .feature-section{margin-top:25px;min-height:850px;background-size:auto 650px;background-position:center 110px}.reference-home .feature-stage{width:290px;height:413px;margin-top:115px}.reference-home .feature-stage>img{width:290px;height:413px}.reference-home .feature-cards{gap:20px;padding-inline:calc(50vw - 150px)}.reference-home .feature-card{width:300px;padding:20px;gap:17px;min-height:165px}.reference-home .feature-card .number{width:40px;height:40px;font-size:24px}.feature-copy>strong{font-size:14px}.feature-copy>span{font-size:14px;line-height:20px}.feature-next{top:400px;width:50px;height:55px;font-size:17px}.reference-home .premium-section{padding-top:50px;min-height:920px;padding-bottom:70px}.premium-art{width:100%;height:270px;margin-top:15px}.premium-scene{height:270px;width:100%;object-fit:contain}.premium-gift{width:115px;height:135px;bottom:7px}.premium-gift img{width:59px;height:auto}.reference-home .premium-smile{width:45px;height:41px;left:25px;top:45px}.reference-home .premium-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;max-width:320px;margin:30px auto 35px}.reference-home .premium-benefits>div{width:auto}.reference-home .premium-benefits img{width:82px;height:82px;border-radius:24px}.reference-home .premium-benefits p{font-size:13px;line-height:17px;margin-top:10px}.reference-home .premium-button{top:auto;width:300px;height:120px;font-size:24px;padding-bottom:25px}.reference-home .faq-section{padding-top:35px;padding-bottom:100px;min-height:850px}.reference-home .faq-section .section-heading{margin-bottom:35px}.reference-home .faq-list details{padding:21px 0}.reference-home .faq-list summary{font-size:17px;line-height:24px}.reference-home .faq-list p{font-size:15px;line-height:25px}.footer-info nav{font-size:13px;gap:8px 12px}.footer-info p{font-size:13px;line-height:16px}.reference-footer{min-height:150px;gap:20px}.footer-symbols{gap:18px}}