.site-header{height:6.1%;min-height:54px;gap:20px;background:linear-gradient(105deg,#123b7ee8,#1b52a3f0);border-color:#d9bd6d}.brand{align-self:flex-start;min-width:170px;width:170px;height:82px;border:1px solid #e3c670;border-top:0;border-radius:0 0 48% 24%;background:linear-gradient(#143a7e,#1f4489);padding:21px 3px 8px;z-index:1}.brand img{position:relative;width:150px;height:auto;z-index:1}.brand small{position:relative;font-size:6px;letter-spacing:.6px;margin-top:-1px;color:#ffd78a}.brand-castle-art{display:block;position:absolute;top:0;left:28px;width:110px;height:37px;stroke-width:.7}.desktop-nav a{display:flex;gap:8px;align-items:center;font-size:14px;padding:7px 12px}.ui-icon{width:19px;height:19px;stroke-width:2.1;fill:none;vertical-align:middle}.account button{display:flex;gap:7px;align-items:center}.scene-art{top:max(6.1%,54px)}.hero-copy{left:43%;top:26%;width:43%;z-index:2}.art-title{font-size:0;line-height:0;margin:0;text-shadow:none}.art-title img{width:100%;height:auto;display:block}.tagline{margin:7px -25px 12px;font-size:clamp(12px,1.2vw,20px);white-space:nowrap}.tagline span{color:#a65d24;margin:0 9px}.hero-actions{gap:18px}.ornate-button{position:relative;border:0;outline:0;border-radius:0;background:transparent url('assets/ornate/button-red.webp?v=20261104-r4') center/100% 100% no-repeat;box-shadow:none;width:62%;height:78px;padding:9px 25px;color:#fff5df;font-family:'DFKai-SB','KaiTi',serif;font-size:35px;font-weight:800;justify-content:center;gap:9px;text-shadow:0 2px 2px #8c2b18}.ornate-button svg{width:31px;height:31px;stroke-width:1.9}.ornate-button>span{display:flex;flex-direction:column;align-items:center;gap:1px}.ornate-button small{display:block;font-family:'Microsoft JhengHei',sans-serif;font-size:10px;letter-spacing:2px}.pv-button{background-image:url('assets/ornate/button-purple.webp?v=20261104-r4');font-family:inherit;font-size:24px;width:37%;height:65px;padding:10px 23px;white-space:nowrap;text-shadow:0 2px 2px #472567}.pv-button svg{width:24px;height:24px}.ornate-button:hover{filter:none;color:#fffefa}.dragon-rig{position:absolute;right:0;top:-2%;width:36%;aspect-ratio:1000/654;transform-origin:65% 55%;animation:dragon-hover 4.83s ease-in-out -3.17s infinite}.dragon-rig .dragon{position:relative;inset:auto;width:100%;display:block;height:auto;animation:none;will-change:auto}.dragon-fire{position:absolute;right:65%;top:48%;width:82%;height:auto;transform-origin:100% 40%;animation:fire-breath 2.31s ease-in-out -.83s infinite;pointer-events:none;z-index:1}.sprite{will-change:auto;backface-visibility:hidden}.dragon-rig[data-motion-unit] .sprite{animation:none}.info-panel{position:relative;background:linear-gradient(130deg,#fff9e9f5,#fff1d9f2 50%,#fff9e9f5);border:2px solid #deb66f;border-radius:24px 24px 18px 18px;box-shadow:inset 0 0 0 3px #fffaf0,inset 0 0 0 4px #f2d8aa,0 3px 7px #60733522;padding:0 15px 8px}.info-panel:before,.info-panel:after{content:'◆';position:absolute;top:25px;font-size:16px;color:#e7bb74;text-shadow:1px 1px #fff1c7}.info-panel:before{left:-8px}.info-panel:after{right:-8px}.info-panel h2{position:relative;margin:-10px 6px 5px 10px;padding:4px 15px 4px 33px;min-height:30px;border:2px solid #fff1b4;outline:1px solid #bd8b42;box-shadow:0 2px 0 #d2a75e,inset 0 0 0 1px #a79dc0;border-radius:6px 40px 40px 6px;justify-content:center}.info-panel h2:after{content:'❧';color:#f5d89a;position:absolute;right:-15px;font-size:32px;top:-6px}.panel-medallion{position:absolute!important;left:-13px;top:-6px;width:39px;height:39px;display:grid;place-items:center;border:2px solid #ffe6a4;border-radius:50%;outline:1px solid #a57838;background:#4f558b;box-shadow:inset 0 0 0 2px #736e9a}.panel-medallion .ui-icon{width:24px;height:24px;color:#fff0c3}.world-panel .panel-medallion{background:#713c99}.news-panel .panel-medallion{background:#c74320}.panel-chevron{position:absolute;right:2px;bottom:1px;color:#dd9a43;font-size:36px;line-height:1}.class-previews>div{border:1px solid #fffdf4;background:linear-gradient(130deg,#ffe3ca,#f1ccc8 50%,#fff4d8);border-radius:12px}.class-previews>div:nth-child(2){background:linear-gradient(130deg,#e6eec0,#c4d39d,#fff1c8)}.class-previews>div:nth-child(3){background:linear-gradient(130deg,#f2d4f1,#d9c3e9,#fff3db)}.class-previews img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}.class-previews strong{display:flex;gap:3px;align-items:center;padding:2px 12px;font-size:15px}.class-previews strong svg{width:16px;height:16px}.class-previews small{font-size:9px}.mini-monsters{position:relative;padding-right:30%;align-items:flex-end;height:69%;padding-bottom:2px}.mini-monsters img{height:87%;object-fit:contain;width:25%;margin-right:-2%}.mini-monsters .bestiary-dragon{position:absolute;right:0;bottom:0;width:36%;height:100%;margin:0;object-fit:contain}.world-panel p{font-size:10px}.news-panel button{height:28%;gap:8px}.news-panel button>img{width:22%;height:96%;object-fit:contain;border-radius:7px;background:linear-gradient(120deg,#ffe9bf,#f5cfeb);border:1px solid #f6d39c;flex-shrink:0}.news-panel button:nth-of-type(2)>img{background:linear-gradient(#8d699f,#e0bed1)}.news-panel span{font-size:12px}.news-panel small{font-size:9px;margin-top:2px}.news-panel em{border-radius:15px;background:#d64c32;color:#fff3d9;padding:2px 8px;font-size:9px}.news-panel button:nth-of-type(2) em{background:#8d5cb7}.news-panel button:nth-of-type(3) em{background:#378bc8}.news-panel button>b{font-size:23px;color:#c6995f}.bottom-panels{height:20.5%;bottom:4.5%}
@keyframes dragon-hover{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-4px,0) scale(1.003,1.007)}}@keyframes fire-breath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.018,.99);opacity:.91}}
/* A texture stays static until decoded and stops when its viewport leaves. */
.bottom-panels{grid-template-rows:minmax(0,1fr)}.info-panel{height:100%;min-height:0}.class-previews{height:calc(100% - 25px);min-height:0}.hero-copy{top:24.8%;left:42%;width:43%}.art-title img{width:87%;margin-inline:auto}.monster-line{height:14.5%;bottom:26.8%}
.qq-button small{display:none}
.share-button{background:transparent;color:#fff4da;display:grid;place-items:center;padding:6px 12px 6px 0;border-right:1px solid #96b4dd}.mini-monsters{padding:0}.mini-monsters img:not(.bestiary-dragon){position:absolute;bottom:0;margin:0}.mini-monsters img:nth-child(1){left:0;width:20%;height:67%}.mini-monsters img:nth-child(2){left:12%;bottom:8%;width:26%;height:92%}.mini-monsters img:nth-child(3){left:24%;width:21%;height:56%}.mini-monsters img:nth-child(4){left:38%;width:18%;height:72%}.mini-monsters img:nth-child(5){left:50%;bottom:3%;width:21%;height:86%}.mini-monsters img:nth-child(6){left:64%;width:15%;height:60%}.mini-monsters .bestiary-dragon{right:-2%;width:36%;height:105%}
[data-motion-unit],.dragon-fire{animation-play-state:paused!important;will-change:auto!important}
html[data-motion="playing"][data-visible="visible"]:not([data-overlay="open"]) [data-motion-unit].motion-ready.motion-visible{animation-play-state:running!important;will-change:transform!important}
html[data-motion="playing"][data-visible="visible"]:not([data-overlay="open"]) .dragon-rig.motion-ready.motion-visible .dragon-fire{animation-play-state:running!important;will-change:transform,opacity!important}
html[data-motion="playing"] .dragon-rig .dragon{animation:none!important;will-change:auto!important}
@media(min-width:1900px){.site-header{height:6.1%}.hero-copy{top:26%}.ornate-button{height:90px;font-size:41px}.pv-button{height:75px;font-size:28px}.info-panel h2{font-size:21px}.news-panel span{font-size:15px}.news-panel small{font-size:11px}.news-panel em{font-size:10px}.world-panel p{font-size:12px}}
@media(max-width:1100px) and (min-width:761px){.brand{width:142px;min-width:142px;height:72px;padding-top:18px}.brand img{width:125px}.brand-castle-art{left:18px;top:-2px}.site-header{gap:10px}.desktop-nav a{font-size:11px;gap:4px;padding-inline:7px}.desktop-nav .ui-icon{width:15px;height:15px}.account button{padding-inline:9px}.account .ui-icon{display:none}.ornate-button{height:62px;font-size:27px;padding-inline:20px}.pv-button{height:53px;font-size:18px;padding-inline:15px}.hero-actions{gap:10px}.tagline{font-size:12px;letter-spacing:0}.tagline span{margin-inline:2px}.info-panel h2{font-size:12px;padding-left:26px;padding-right:6px;min-height:26px}.info-panel h2>span:last-child{font-size:9px}.panel-medallion{width:34px;height:34px}.panel-medallion .ui-icon{width:21px;height:21px}.info-panel{padding-inline:10px}.news-panel em{display:none}.news-panel span{font-size:10px}.news-panel small{font-size:8px}.class-previews small{font-size:8px}}
@media(max-width:760px){.site-header{height:62px;min-height:62px}.brand{min-width:128px;width:128px;height:73px;padding-top:18px;align-self:flex-start}.brand img{width:119px}.brand small{font-size:5px}.brand-castle-art{left:19px;width:95px;height:31px}.account .ui-icon{width:14px;height:14px}.scene-art{top:62px;height:440px}.dragon-rig{width:57%;right:-6%;top:0;aspect-ratio:1000/654}.dragon-fire{right:65%;top:48%;width:82%}.hero-copy{left:auto;top:auto;width:auto;margin:405px 10px 0}.art-title img{max-width:520px;margin:auto;width:100%}.tagline{white-space:normal;font-size:12px;margin:9px 0 13px;line-height:1.7}.tagline span{display:none}.hero-actions{gap:7px;max-width:480px;margin:auto}.ornate-button{height:65px;font-size:29px;width:62%;padding:9px 18px;gap:5px}.ornate-button svg{width:24px;height:24px}.ornate-button small{font-size:9px;letter-spacing:1px}.pv-button{height:56px;width:38%;font-size:18px;padding:10px 17px;gap:5px}.pv-button svg{width:19px;height:19px}.bottom-panels{height:auto;bottom:auto;gap:25px;margin-top:0}.info-panel{height:190px;padding:0 15px 8px}.info-panel h2{font-size:16px;min-height:30px;margin-bottom:6px}.info-panel h2>span:last-child{font-size:11px}.class-previews{height:calc(100% - 28px)}.class-previews img{height:100%;object-fit:cover;object-position:center 13%}.class-previews strong{font-size:15px}.class-previews small{font-size:9px}.world-panel{height:170px}.world-panel p{font-size:10px}.mini-monsters{height:70%}.news-panel{height:220px}.news-panel button{height:28%;gap:9px}.news-panel button>img{width:23%;height:95%}.news-panel span{font-size:12px}.news-panel small{font-size:9px}.news-panel em{display:block;font-size:8px;padding:2px 5px}.monster-line{margin-top:22px}.reference-motion-control{position:fixed;z-index:11}}
@media(max-width:370px){.hero-copy{margin-top:370px}.scene-art{height:395px}.ornate-button{height:59px;font-size:25px}.pv-button{height:51px;font-size:16px}.ornate-button svg{width:20px;height:20px}.info-panel h2{font-size:14px}.info-panel h2>span:last-child{font-size:10px}.news-panel em{display:none}}
@media(max-width:760px){.mage{left:0;width:38%}.warrior{left:0}.monster-line{height:64px}.reference-scene{background-image:url('assets/ornate/world-mobile.webp?v=20261104-r4');background-size:auto 1000px}}
@media(max-width:760px){.share-button{display:none}}
@media(min-width:761px){.warrior{top:15%;height:58%;width:34%}}
@media(max-width:760px){.archer{top:22%}}
@media(min-width:761px){.art-title img{max-width:60vh}}
@media(min-width:1900px){.hero-copy{top:24.8%}}
@media(min-width:761px) and (max-height:619px){html,body,main{height:auto;min-height:100%;overflow:auto}.reference-scene{height:620px}}
/* User-approved mobile composition: logo, controls, monsters and panels only. */
@media(max-width:760px){.scene-art{display:none}.hero-copy{margin:45px 10px 0}.reference-scene{background-image:url('assets/optimized/world-mobile.webp?v=20261104-r4');background-size:auto 460px}}
/* Ground creatures stay completely still, as requested. */
.ground-monster img{animation:none!important;will-change:auto!important}
@keyframes fire-breath{0%,100%{transform:rotate(15deg) scale(1);opacity:1}50%{transform:rotate(15deg) scale(1.018,.99);opacity:.91}}
@media(min-width:761px){.hero-copy{left:62%;top:26%;width:34%;max-width:550px;transform:translateX(-50%)}.art-title img{width:94%;max-width:none}.hero-actions{width:94%;max-width:none;margin-inline:auto;gap:12px}.ornate-button{width:auto;min-width:0;flex:1.55;height:64px;font-size:28px;padding:8px 17px;gap:6px}.pv-button{flex:1;height:56px;font-size:18px;padding:8px 14px}.ornate-button svg{width:25px;height:25px}.pv-button svg{width:20px;height:20px}.tagline{margin:8px -32px 12px}}
@media(min-width:761px) and (max-width:1100px){.hero-copy{width:40%}.art-title img,.hero-actions{width:100%}.ornate-button{height:56px;font-size:24px}.pv-button{height:50px;font-size:16px}.tagline{font-size:11px;margin-inline:-20px}}
@media(max-width:760px){.hero-copy{left:auto;top:auto;transform:none;width:calc(100% - 32px);max-width:330px;margin:38px auto 0}.art-title img{width:100%}.hero-actions{width:100%;gap:10px}.ornate-button{width:auto;min-width:0;flex:1.55;height:56px;font-size:25px;padding:8px 15px}.pv-button{flex:1;height:50px;font-size:16px;padding:8px 12px}.ornate-button svg{width:21px;height:21px}.pv-button svg{width:18px;height:18px}.reference-motion-control{display:none}}