@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@900&family=Noto+Serif+TC:wght@900&display=swap');body{background: #131825 linear-gradient(145deg, #182542 0%, #131825 100%); color: #eaf6ff; font-family: 'Noto Sans TC', 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; min-height: 100vh; letter-spacing: 0.03em;}.onepage-title-area{max-width: 760px; margin: 40px auto 0 auto; text-align: center; padding-bottom: 22px; border-bottom: 1.5px solid #2562d9cc;}.onepage-title-area .main-title{font-size: 2.15rem; font-weight: 900; letter-spacing: 2.5px; color: #7edaff; background: linear-gradient(97deg, #51c4ff 18%, #19efff 52%, #f9f7cd 96%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 6px 36px #00cfff33, 0 2px 10px #0924465d; margin-bottom: 12px; margin-top: 0;}.onepage-title-area .sub-title{font-size: 1.09rem; color: #bae7ff; text-shadow: 0 2px 8px #0097ff1a; font-weight: 500; margin-bottom: 10px;}.onepage-title-area .bar{width: 68px; height: 5px; border-radius: 6px; background: linear-gradient(95deg, #14e3ff 0, #326bf9 100%); margin: 12px auto 20px auto; box-shadow: 0 0 18px #18e2ff60;}.server-article-list{max-width: 800px; margin: 38px auto 60px auto; display: flex; flex-direction: column; gap: 42px; padding: 0 8px;}.server-article{background: linear-gradient(135deg, #21263a 78%, #26314b 100%); border-radius: 18px; box-shadow: 0 6px 32px #2cf6ff22, 0 2px 16px #181c2099; padding: 36px 24px 32px 24px; max-width: 740px; margin: 40px auto 0 auto; position: relative; overflow: hidden; border: 1.5px solid #243758;}.server-article:hover{box-shadow: 0 14px 54px #36e1ff3f, 0 4px 32px #003e9b45; z-index: 2;}.server-article-img{width: 100%; max-width: 620px; aspect-ratio: 16 / 7; border-radius: 16px; margin: 0 auto 20px auto; box-shadow: 0 2px 20px #2cf6ff44; display: block; object-fit: cover; background: #232b40;}.server-article-title{display: inline-block; font-weight: 900; font-size: 2.15em; letter-spacing: 3.5px; padding: 0.09em 0.32em 0.12em 0.34em; margin-bottom: 18px; line-height: 1.12; font-family: 'Noto Sans TC', 'Noto Serif TC', 'Source Han Serif TC', 'Microsoft JhengHei', Arial, sans-serif; color: #fff; text-shadow: 0 2.5px 8px #ffc, 0 0.5px 0 #fff, 0 3px 12px #00a3ff22, 0 7px 22px #012 55, 0 0.6px 1px #f1e9c6cc, 0 2.5px 0 #fff, 0 8px 28px #001f2d22; position: relative;}.server-article-title::before{content: ""; display: inline-block; position: absolute; left: -18px; top: 17%; width: 10px; height: 70%; border-radius: 6px; background: linear-gradient(180deg, #fffbe8 10%, #b2b4ba 90%); box-shadow: 0 0 16px #b7b7b7bb, 0 0 6px #ffffff44;}.server-article-badge{display: inline-block; background: linear-gradient(90deg, #18e2ff 0%, #9ce6ff 100%); color: #15323e; font-weight: 700; font-size: 16px; border-radius: 10px; box-shadow: 0 2px 10px #2cf6ff33; padding: 5px 22px 6px 22px; margin: 0 0 18px 0; letter-spacing: 1.5px; border: 2.5px solid #3ad7ff50;}.server-article-desc{font-size: 1.12rem; line-height: 1.85; color: #b7e9ff; margin-bottom: 16px; font-weight: 400; text-shadow: 0 1px 8px #1520361a;}.server-article-rates{display: flex; gap: 20px; margin: 18px 0 12px 0; justify-content: flex-start; flex-wrap: wrap;}.rate-item{min-width: 112px; background: linear-gradient(135deg, #192a3dee 75%, #253e55cc 100%); border: 2.5px solid #43e0ff70; border-radius: 14px; box-shadow: 0 2px 18px #2cf6ff22; padding: 13px 27px 12px 27px; display: flex; flex-direction: column; align-items: center; backdrop-filter: blur(2px); transition: transform 0.15s, box-shadow 0.15s; position: relative;}.rate-item:hover{cursor: default; transform: translateY(-4px); box-shadow: 0 6px 24px #2cf6ff44, 0 2px 16px #003e9b33;}.rate-item.ver .rate-label{color: #7ed6ff;}.rate-item.ver .rate-value{color: #8eeaff; font-size: 29px; font-weight: 800; text-shadow: 0 0 8px #00eaff88; letter-spacing: 1.2px;}.rate-label{font-size: 15px; color: #85d9ff; letter-spacing: 0.5px; margin-bottom: 3px; font-weight: 500; text-shadow: 0 1px 8px #18384844;}.rate-value{font-size: 29px; font-weight: 800; line-height: 1; margin-bottom: 0; display: flex; align-items: baseline;}.rate-unit{font-size: 16px; color: #a3cfff; font-weight: 400; margin-left: 3px;}.rate-item.exp .rate-value{color: #ffe066; text-shadow: 0 0 7px #fffbe0a0;}.rate-item.gold .rate-value{color: #ffbe76; text-shadow: 0 0 7px #ffeabda5;}.rate-item.drop .rate-value{color: #48ffb6; text-shadow: 0 0 8px #94ffe190;}.server-article-actions{margin: 28px 0 0 0;}.server-article-btn{display: block; width: 100%; text-align: center; background: linear-gradient(90deg, #24efff 0%, #468cff 100%); color: #1e2336; font-weight: 800; border: none; border-radius: 999px; padding: 22px 0; font-size: 2.2rem; text-decoration: none; box-shadow: 0 0 18px #22a7cf22, 0 0 0px #2680b212; letter-spacing: 2px; transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.21s; margin: 0 auto; position: relative; overflow: hidden; animation: btn-breath-small-big 2.1s ease-in-out infinite;}@keyframes btn-breath-small-big{0%{box-shadow: 0 0 12px #22a7cf22, 0 0 0px #2680b212; transform: scale(0.98);} 50%{box-shadow: 0 0 24px #24f6ff2a, 0 0 10px #36d6ff15; transform: scale(1.01);} 100%{box-shadow: 0 0 12px #22a7cf22, 0 0 0px #2680b212; transform: scale(0.98);}}.server-article-btn:hover{background: linear-gradient(90deg, #6af2ff 0%, #6cb9ff 100%); color: #15323e; box-shadow: 0 0 26px #2cbfd422, 0 0 8px #0fd8ffc0; text-decoration: none; animation: none; transform: scale(1.00);}@media (max-width: 820px){.server-article{padding: 18px 7px 15px 7px; max-width: 99vw;} .server-article-img{max-width: 100%; min-width: 0; border-radius: 10px; margin-bottom: 10px;} .server-article-title{font-size: clamp(1.28em, 6vw, 2.18em);} .server-article-rates{flex-direction: column; gap: 13px; align-items: stretch;} .rate-item{min-width: 0; width: 100%; padding-left: 0; padding-right: 0;}}@media (max-width: 540px){.server-article{padding: 13px 2vw 13px 2vw;} .onepage-title-area .main-title{font-size: 1.15rem;} .server-article-title{padding: 0.1em 0.08em 0.12em 0.15em; letter-spacing: 1px;} .server-article-btn{font-size: 1rem; padding: 13px 0;}}.server-article-tags{display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 18px 0 28px 0; min-height: 40px;}.server-tag{display: inline-block; padding: 7px 18px 7px 15px; font-size: 1.03em; font-weight: 800; border-radius: 1.3em 1.3em 1.3em 1.3em / 1.9em 1.3em 1.9em 1.3em; box-shadow: 0 2px 16px #00000018, 0 1px 8px #133a3c10; letter-spacing: 1.1px; position: relative; margin-bottom: 3px; user-select: none; line-height: 1.1; border: 2.2px solid #fff2; background-clip: padding-box; background-origin: border-box; background-image: linear-gradient(0deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%); transition: box-shadow .19s, transform .17s, color .16s;}.server-tag:before{content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: #fff7; border: 1.5px solid #fff7; box-shadow: 0 0 2px #fff, 0 1px 2px #0004; position: relative; top: -1px;}.server-tag.tag-blue{background: linear-gradient(90deg, #34baff 60%, #12a5ff 100%);}.server-tag.tag-blue{color: #162035; text-shadow: 0 2px 5px #fff8;}.server-tag.tag-green{background: linear-gradient(90deg, #13e684 55%, #00c6c8 100%);}.server-tag.tag-green{color: #1b3424; text-shadow: 0 2px 5px #fff8;}.server-tag.tag-orange{background: linear-gradient(91deg, #ffb44a 50%, #ff9440 100%);}.server-tag.tag-orange{color: #40300c; text-shadow: 0 2px 5px #fff8;}.server-tag.tag-yellow{background: linear-gradient(90deg, #ffe35c 70%, #ffc233 100%);}.server-tag.tag-yellow{color: #224c4c; text-shadow: 0 2px 5px #fff8;}.server-tag.tag-pink{background: linear-gradient(91deg, #ff7ad1 70%, #ff62b1 100%);}.server-tag.tag-pink{color: #fff; text-shadow: 0 2px 6px #be19ba55, 0 0 2px #fff;}.server-tag.tag-purple{background: linear-gradient(91deg, #a47eff 50%, #756eff 100%);}.server-tag.tag-purple{color: #fff; text-shadow: 0 2px 8px #624bff55, 0 0 2px #fff;}.server-tag.tag-cyan{background: linear-gradient(90deg, #30e2ea 60%, #37a9ef 100%);}.server-tag.tag-cyan{color: #155868; text-shadow: 0 2px 5px #fff8;}.server-tag:hover{transform: scale(1.08) rotate(-2.5deg); box-shadow: 0 4px 18px #00eaff35, 0 2px 14px #224d5333; z-index: 1; border-color: #fff7; filter: brightness(1.07) contrast(1.1);}.crowns svg{animation: shine 1.6s infinite alternate;}@keyframes shine{0%{filter: drop-shadow(0 0 2px #ffe066);} 100%{filter: drop-shadow(0 0 7px #fffbe1) drop-shadow(0 2px 10px #ffd70090);}}.site-footer{width: 100%; margin-top: 64px; background: linear-gradient(120deg, #1b2534 85%, #162139 100%); color: #b6c5e2; font-size: 1em; box-shadow: 0 -4px 32px #0b1a3140; border-top: 2.5px solid #2faaff66;}.footer-main{max-width: 820px; margin: 0 auto; padding: 32px 24px 18px 24px; display: flex; flex-direction: column; align-items: center;}.footer-logo-title{display: flex; align-items: center; margin-bottom: 10px; gap: 12px;}.footer-logo{height: 38px; width: auto; border-radius: 8px; background: #162139; box-shadow: 0 0 8px #25e4ff44;}.footer-title{font-size: 1.45em; font-weight: 900; color: #f6d36c; letter-spacing: 2.2px; text-shadow: 0 1.2px 8px #fff7c155, 0 0px 3px #2faaff33;}.footer-links{margin: 14px 0 10px 0; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;}.footer-links a{color: #8cc6ff; font-weight: 500; text-decoration: none; padding: 0 2px; transition: color .13s;}.footer-links a:hover{color: #f8d059; text-shadow: 0 0 8px #ffe26e55;}.footer-desc{font-size: 0.99em; color: #9bb1cb; text-align: center; margin: 10px 0 0 0; line-height: 1.7; max-width: 640px;}.footer-copy{text-align: center; color: #7892a7; background: #151e2a; font-size: 0.95em; letter-spacing: 1.1px; padding: 10px 2px 16px 2px; margin-top: 10px; border-top: 1px solid #20315e88;}@media (max-width: 600px){.footer-main{padding: 20px 7vw 10px 7vw;} .footer-logo{height: 30px;} .footer-title{font-size: 1.07em;} .footer-links{gap: 10px; font-size: 0.99em;} .footer-desc{font-size: 0.93em;}}.player-recommend{position: fixed; right: 36px; top: 38px; z-index: 99; max-width: 360px; font-size: 1.08em; color: #fff; background: rgba(20, 20, 20, 0.96); border-radius: 12px; box-shadow: 0 4px 28px #001d4c55; padding: 16px 24px; opacity: 0; transform: translateY(-32px) scale(0.97); pointer-events: none; transition: opacity .35s, transform .35s;}.player-recommend.show{opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;}.recommend-msg{line-height: 1.6; font-weight: 500; font-family: 'Noto Sans TC', Arial, sans-serif;}.recommend-msg .name{font-weight: 700; color: #ffe25e;}.recommend-msg .highlight{font-weight: 900; color: #62c4ff;}.recommend-msg .tag{color: #ff8b43; font-weight: 700;}@media (max-width: 600px){.player-recommend{display: none;}}.server-article-badge-area{margin-bottom: 10px; margin-top: 5px;}.server-article-badge{display: inline-block; font-weight: 900; font-size: 1.13rem; letter-spacing: 1.2px; border-radius: 1.1em; padding: 7px 24px 7px 20px; box-shadow: 0 2px 12px #20cfff30, 0 0px 0px #2680b240; border: 2px solid #3ad7ff40; margin-right: 7px;}.badge-upcoming{background: linear-gradient(90deg, #fff200 10%, #ffe066 100%); color: #11342b; border: 2.5px solid #ffe066; text-shadow: 0 1px 8px #fffbe1a0; animation: badge-glow-upcoming 1.5s infinite alternate;}.badge-online{background: linear-gradient(90deg, #24efff 0%, #468cff 100%); color: #113a6b; border: 2.5px solid #2fd6ff88; text-shadow: 0 1px 8px #a7e8ff70;}@keyframes badge-glow-upcoming{0%{box-shadow: 0 2px 12px #ffe06650, 0 0px 0px #2680b240;} 100%{box-shadow: 0 2px 24px #ffe066cc, 0 0px 8px #ffe06660;}}