@charset "UTF-8";
:root{--ink:#283650;--paper:#fff8e9;font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;color:var(--ink);color-scheme:light;background:#84c9ed}
*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}p,h1,h2,h3{margin:0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd7c36;outline-offset:4px}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-60px;left:15px;z-index:40;padding:10px 18px;background:var(--paper);font-size:14px}.skip-link:focus{top:10px}
dialog{border:2px solid #e7bf77;border-radius:18px;background:var(--paper);color:var(--ink);padding:35px 38px 27px;width:min(550px,calc(100% - 32px));max-height:87vh;max-height:87dvh;overflow:auto;box-shadow:inset 0 0 0 4px #fffdf3,0 18px 80px #19375666}
dialog::backdrop{background:#122d4da3;backdrop-filter:blur(3px)}dialog.dialog-wide{width:min(960px,calc(100% - 32px))}.dialog-close{position:absolute;right:10px;top:7px;width:35px;height:35px;background:transparent;font-size:28px;color:#947c53;border-radius:50%}.dialog-close:hover{background:#ebdfc5}.dialog-art{display:none}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;color:#a07839;margin:0 0 10px}dialog h2{font-family:"DFKai-SB","STKaiti","KaiTi",serif;font-weight:800;font-size:30px;letter-spacing:.06em;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid #e6d5b1}#dialog-content p{font-size:14px;line-height:1.95;color:#66685e;margin:14px 0;max-width:70ch}.small-cta{display:inline-flex;align-items:center;gap:14px;border-radius:7px;padding:10px 18px;color:#fff9e8;background:#927041;font-size:13px;margin-top:23px}.small-cta:hover{background:#78592e}.small-cta svg{width:16px;height:16px}.text-link{background:transparent;color:#93713e;font-size:13px;padding:10px 0;border-bottom:1px solid #d1b57f}.class-tabs{display:flex;gap:10px;margin:0 0 16px;justify-content:center}.class-tabs button{font-size:16px;font-weight:700;padding:9px 24px;border-radius:30px;border:1px solid #dfc69a;background:transparent;color:#8e7956}.class-tabs button[aria-selected="true"]{background:#b45834;border-color:#b45834;color:#fff7e1}.class-detail{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.hero-portrait{width:100%;aspect-ratio:1;background-image:url('assets/heroes.png');background-size:300% 100%;background-position:calc(var(--hero)*50%) center;background-repeat:no-repeat}.class-number{color:#ab8b5d;font-size:10px;letter-spacing:.13em}.class-copy h3{font-family:"DFKai-SB","KaiTi",serif;font-size:39px;color:#944b31;margin:12px 0}.class-quote{font-weight:700;color:#94673b!important}.class-traits{font-size:13px;margin:20px 0 0}.class-traits div{display:flex;gap:18px;padding:7px 0}.class-traits dt{color:#a38e6c}.class-traits dd{margin:0;color:#576047;font-weight:700}.monster-filter{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 21px}.monster-filter button{padding:8px 17px;border:1px solid #d9ccaa;border-radius:30px;background:transparent;color:#8c7d60;font-size:12px}.monster-filter button.is-active{background:#597b46;color:#fff8e7;border-color:#597b46}.monster-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.monster-card{border:1px solid #ddcfaa;border-radius:12px;background:#f0eedc;padding:13px 10px 17px;text-align:center;min-width:0}.monster-card:hover{box-shadow:inset 0 0 0 1px #b49c65}.monster-index{font-size:9px;letter-spacing:.14em;color:#a9a284;display:block;text-align:left}.monster-picture{height:200px;max-width:150px;margin:0 auto;background-image:url('assets/monsters.png');background-size:700% auto;background-repeat:no-repeat;background-position:calc(var(--monster)*100%/6) center}.boss-picture{background-image:url('assets/dragon.png');background-size:contain;max-width:280px;background-position:center}.monster-card strong{display:block;font-size:15px;margin-top:1px}.monster-card small{display:block;font-size:10px;color:#84846e;margin-top:7px;line-height:1.5}.habitat{color:#8e783f!important;font-size:12px!important}.news-item{background:transparent;display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid #e0cda8;width:100%;text-align:left}.news-item small{font-size:10px;color:#a17c42;border:1px solid #d9be88;padding:4px 8px;border-radius:4px;white-space:nowrap}.news-item strong{font-size:14px;flex:1}.news-item span{color:#b29358;font-size:25px}.news-item:hover strong{color:#ab572b}.faq{border-bottom:1px solid #e0ccaa}.faq summary{cursor:pointer;font-size:14px;font-weight:700;padding:18px 0;line-height:1.7}.faq p{font-size:13px!important;margin:0 0 17px!important}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:50;background:#203f55ed;border:1px solid #e6c28b;color:#fff7e6;border-radius:8px;padding:11px 21px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .15s;line-height:1.5;max-width:calc(100% - 24px);text-align:center}.toast.is-visible{opacity:1}
@media(max-width:680px){dialog{padding:30px 23px 23px;border-radius:13px}dialog h2{font-size:26px;padding-bottom:12px}#dialog-content p{font-size:13px}.class-tabs{gap:8px}.class-tabs button{font-size:14px;padding:8px 18px}.class-detail{grid-template-columns:1fr;gap:5px}.hero-portrait{max-width:300px;margin:auto}.class-copy h3{font-size:33px;margin-top:9px}.class-traits{font-size:12px}.monster-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.monster-filter{gap:6px}.monster-filter button{font-size:11px;padding:7px 11px}.monster-picture{height:175px;max-width:135px}.monster-card strong{font-size:14px}.monster-card small{font-size:9px}.news-item{gap:10px}.news-item strong{font-size:12px}.news-item small{font-size:9px;padding-inline:5px}.faq summary{font-size:13px}.small-cta{font-size:12px}.toast{font-size:12px}.reference-motion-control{width:30px!important;height:30px!important}}
@media(prefers-reduced-motion:reduce){a,button,.toast{transition:none}}