/* 基礎 */
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:.03em}
.onepage-title-area{max-width:760px;margin:40px auto 0;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:0 0 12px}
.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;box-shadow:0 0 18px #18e2ff60}

/* 列表 */
.server-article-list{max-width:800px;margin:38px auto 60px;display:flex;flex-direction:column;gap:42px;padding:0 8px}
.server-article{display:block;text-decoration:none;color:inherit;cursor:pointer;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;max-width:740px;margin:40px auto 0;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 *{text-decoration:none;color:inherit}

/* 圖片 */
.server-article-img{width:100%;max-width:620px;aspect-ratio:16/7;border-radius:16px;margin:0 auto 20px;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:.09em .32em .12em .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 .5px 0 #fff,0 3px 12px #00a3ff22,0 7px 22px #012 55,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-area{margin:5px 0 10px}
.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;border:2px solid #3ad7ff40;margin-right:7px;position:relative;overflow:visible}
.badge-upcoming{background:linear-gradient(90deg,#fff200 10%,#ffe066 100%);color:#11342b;border-color:#ffe066;text-shadow:0 1px 8px #fffbe1a0}
.badge-online{background:linear-gradient(90deg,#24efff 0%,#468cff 100%);color:#113a6b;border-color:#2fd6ff88;text-shadow:0 1px 8px #a7e8ff70}

/* 取代原本 box-shadow 動畫：用 ::after + opacity/scale */
.badge-upcoming::after{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;box-shadow:0 0 28px #ffe066cc;opacity:.35;transform:scale(1);will-change:transform,opacity;animation:badgePulse 1.6s ease-in-out infinite alternate}
@keyframes badgePulse{0%{opacity:.25;transform:scale(1)}100%{opacity:.75;transform:scale(1.05)}}

/* 描述 */
.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;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;display:flex;flex-direction:column;align-items:center;backdrop-filter:blur(2px);transition:transform .15s;position:relative}
.rate-item:hover{cursor:default;transform:translateY(-4px)}
.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:.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}
.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;letter-spacing:2px;margin:0 auto;position:relative;overflow:hidden;cursor:pointer;user-select:none;will-change:transform,opacity;animation:btnBreathe 2.1s ease-in-out infinite}
.server-article-btn::before{content:"";position:absolute;inset:-6px;border-radius:999px;background:radial-gradient(60% 60% at 50% 50%,#24f6ff33 0%,transparent 70%);opacity:.3;pointer-events:none;will-change:opacity;animation:btnGlow 2.1s ease-in-out infinite}
@keyframes btnBreathe{0%{transform:scale(.985);opacity:.98}50%{transform:scale(1.01);opacity:1}100%{transform:scale(.985);opacity:.98}}
@keyframes btnGlow{0%{opacity:.25}50%{opacity:.6}100%{opacity:.25}}
.server-article-btn:hover{background:linear-gradient(90deg,#6af2ff 0%,#6cb9ff 100%);color:#15323e;animation:none;transform:scale(1)}

/* 標籤 */
.server-article-tags{display:flex;flex-wrap:wrap;gap:10px 12px;margin:18px 0 28px;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.9em;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:transform .17s,color .16s;color:#162035;text-shadow:0 2px 5px #fff8}
.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%);color:#162035}
.server-tag.tag-green{background:linear-gradient(90deg,#13e684 55%,#00c6c8 100%);color:#1b3424}
.server-tag.tag-orange{background:linear-gradient(91deg,#ffb44a 50%,#ff9440 100%);color:#40300c}
.server-tag.tag-yellow{background:linear-gradient(90deg,#ffe35c 70%,#ffc233 100%);color:#224c4c}
.server-tag.tag-pink{background:linear-gradient(91deg,#ff7ad1 70%,#ff62b1 100%);color:#fff;text-shadow:0 2px 6px #be19ba55,0 0 2px #fff}
.server-tag.tag-purple{background:linear-gradient(91deg,#a47eff 50%,#756eff 100%);color:#fff;text-shadow:0 2px 8px #624bff55,0 0 2px #fff}
.server-tag.tag-cyan{background:linear-gradient(90deg,#30e2ea 60%,#37a9ef 100%);color:#155868}
.server-tag:hover{transform:scale(1.08) rotate(-2.5deg);z-index:1;border-color:#fff7}

/* 皇冠動畫（僅 transform/opacity，避免昂貴濾鏡） */
.crowns svg{filter:drop-shadow(0 0 4px #ffd70066);will-change:transform,opacity;animation:crownPop 1.6s ease-in-out infinite alternate}
@keyframes crownPop{0%{transform:translateY(0) scale(1);opacity:.9}100%{transform:translateY(-1px) scale(1.06);opacity:1}}

/* Footer */
.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;display:flex;flex-direction:column;align-items:center}
.footer-logo-title{display:flex;align-items:center;margin-bottom:10px;gap:12px}
.footer-logo{height:32px;width:auto}
.footer-title{font-size:1.45em;font-weight:900;color:#f6d36c;letter-spacing:2.2px;text-shadow:0 1.2px 8px #fff7c155,0 0 3px #2faaff33}
.footer-links{margin:14px 0 10px;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:.99em;color:#9bb1cb;text-align:center;margin:10px 0 0;line-height:1.7;max-width:640px}
.footer-copy{text-align:center;color:#7892a7;background:#151e2a;font-size:.95em;letter-spacing:1.1px;padding:10px 2px 16px;margin-top:10px;border-top:1px solid #20315e88}

/* 推薦浮窗 */
.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,.96);border-radius:12px;box-shadow:0 4px 28px #001d4c55;padding:16px 24px;opacity:0;transform:translateY(-32px) scale(.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}

/* 無障礙：skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#fff;color:#000;border-radius:6px;z-index:1000}

/* RWD */
@media (max-width:600px){
  .player-recommend{display:none}
  .footer-main{padding:20px 7vw 10px}
  .footer-logo{height:30px}
  .footer-title{font-size:1.07em}
  .footer-links{gap:10px;font-size:.99em}
  .footer-desc{font-size:.93em}
}
@media (max-width:820px){
  .server-article{padding:18px 7px 15px;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}
  .onepage-title-area .main-title{font-size:1.15rem}
  .server-article-title{padding:.1em .08em .12em .15em;letter-spacing:1px}
  .server-article-btn{font-size:1rem;padding:13px 0}
}