/* ============================================================
   Lineage-Next 官網 — 暗黑奇幻風格共用樣式
   配色：深藍黑底 #0b0f17 / 金色 #e8c56a / 羊皮紙點綴
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Noto+Serif+TC:wght@500;700;900&display=swap');
:root{
  --bg:#0b0f17;
  --bg2:#0f1420;
  --panel:#141b2b;
  --panel2:#1a2234;
  --line:#2a3346;
  --gold:#e8c56a;
  --gold-dim:#b9974a;
  --parch:#d8c9a3;
  --txt:#d7dced;
  --txt-dim:#93a0bd;
  --red:#c65b52;
  --blue:#5b8fd6;
  --green:#5fae7a;
  --radius:12px;
  --maxw:1180px;
  --font:"Microsoft JhengHei","Noto Sans TC",sans-serif;
  --font-title:"Noto Serif TC","Microsoft JhengHei",serif;
  --font-latin:"Cinzel","Noto Serif TC",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  line-height:1.7;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:#f4dc95}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-title);color:#f2f5ff;line-height:1.4;margin:0 0 .5em;font-weight:700;letter-spacing:.5px}
.kicker{font-family:var(--font-latin);letter-spacing:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.gold{color:var(--gold)}
.dim{color:var(--txt-dim)}
.center{text-align:center}

/* 背景微光紋理 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(232,197,106,.10),transparent 60%),
    radial-gradient(900px 500px at 100% 100%,rgba(91,143,214,.07),transparent 60%),
    linear-gradient(180deg,#0b0f17,#090c13);
}

/* ---------- 導覽列 ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,23,.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:6px 18px;display:flex;align-items:center;min-height:60px;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;white-space:nowrap}
.brand .mark{
  width:30px;height:30px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(145deg,#e8c56a,#8a6a24);
  display:grid;place-items:center;color:#1a1206;font-weight:900;font-size:17px;
  box-shadow:0 0 14px rgba(232,197,106,.35);
}
.brand small{display:block;font-size:11px;color:var(--gold-dim);font-weight:600;letter-spacing:1px}
.nav-links{display:flex;gap:5px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{
  color:var(--txt-dim);font-size:17px;font-weight:600;padding:10px 13px;border-radius:8px;white-space:nowrap;
}
.nav-links a:hover{color:#fff;background:var(--panel2)}
.nav-links a.active{color:var(--gold);background:rgba(232,197,106,.08)}
.nav-cta{
  margin-left:6px;background:linear-gradient(145deg,#e8c56a,#c19a3e);color:#1a1206 !important;
  font-weight:800;padding:8px 16px;border-radius:8px;
}
.nav-cta:hover{filter:brightness(1.08)}
/* 📚 圖鑑下拉群組 */
.nav-group{position:relative;display:inline-flex}
.nav-groupbtn{color:var(--txt-dim);font-size:17px;font-weight:600;padding:10px 13px;border-radius:8px;white-space:nowrap;background:none;border:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;line-height:1}
.nav-group:hover .nav-groupbtn,.nav-groupbtn:hover{color:#fff;background:var(--panel2)}
.nav-group.active .nav-groupbtn{color:var(--gold);background:rgba(232,197,106,.08)}
.nav-group .caret{font-size:11px;transition:transform .15s}
.nav-group:hover .caret{transform:rotate(180deg)}
/* 官網自製 SVG 圖示(取代原本的 emoji)。定義在 nav-data.js 的 NX_ICONS,
   顏色一律走 currentColor,由下列規則控制:平時暗金、hover / 選中轉亮金 */
.nxi{flex:none;vertical-align:-3px}
.nav-groupbtn .nxi{width:18px;height:18px;color:var(--gold-dim);transition:color .15s}
.nav-group:hover .nav-groupbtn .nxi,.nav-groupbtn:hover .nxi{color:var(--gold)}
.nav-group.active .nav-groupbtn .nxi{color:var(--gold)}
.nav-dropdown{position:absolute;top:100%;left:0;min-width:158px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:2px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:60}
.nav-group:hover .nav-dropdown{display:flex}
.nav-dropdown a{display:block;padding:9px 12px;border-radius:7px;color:var(--txt-dim);font-size:14px;font-weight:600;white-space:nowrap}
.nav-dropdown a:hover{color:#fff;background:var(--panel2)}
.nav-dropdown a.active{color:var(--gold);background:rgba(232,197,106,.08)}
/* 🧭 下拉選單裡的分區標題(nav-data.js 用 [null,文字] 產生);不是連結,不可點 */
.nav-dropdown .nav-sep{margin:6px 4px 2px;padding:6px 8px 4px;border-top:1px solid var(--line);color:var(--txt-dim);opacity:.62;font-size:11.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;pointer-events:none}
.nav-dropdown .nav-sep:first-child{border-top:0;margin-top:0}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--gold);
  width:44px;height:40px;border-radius:8px;font-size:20px;cursor:pointer}

/* ---------- Hero banner ---------- */
.hero{
  position:relative;min-height:68vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;border-bottom:1px solid var(--line);
}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.42) saturate(1.1);transform:scale(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 60% at 50% 40%,transparent,rgba(9,12,19,.85)),
  linear-gradient(180deg,rgba(11,15,23,.35),rgba(11,15,23,.95));}
.hero-inner{position:relative;z-index:2;padding:60px 18px;max-width:900px}
.hero h1{font-size:clamp(34px,6vw,62px);margin:0 0 14px;
  text-shadow:0 2px 30px rgba(0,0,0,.7);letter-spacing:2px}
.hero h1 .gold{text-shadow:0 0 26px rgba(232,197,106,.5)}
.hero .tag{font-size:clamp(15px,2.4vw,21px);color:var(--parch);margin-bottom:8px}
.hero .sub{color:var(--txt-dim);max-width:640px;margin:0 auto 30px;font-size:16px}
.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.badge{border:1px solid var(--gold-dim);color:var(--gold);background:rgba(232,197,106,.06);
  padding:5px 13px;border-radius:999px;font-size:13px;font-weight:600}

/* ---------- 按鈕 ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
  font-family:var(--font);font-weight:800;border-radius:10px;padding:14px 30px;font-size:17px;transition:.15s}
.btn-primary{background:linear-gradient(145deg,#e8c56a,#bf9539);color:#1a1206;
  box-shadow:0 8px 30px rgba(232,197,106,.28)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);color:#1a1206}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--gold);border:1px solid var(--gold-dim)}
.btn-ghost:hover{background:rgba(232,197,106,.1);color:#f4dc95}
.btn-line{background:rgba(6,199,85,.09);color:#83e9aa;border:1px solid #32c66b}
.btn-line:hover{background:rgba(6,199,85,.18);color:#b0f5ca}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 區塊 ---------- */
section{padding:64px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 40px}
.sec-head .kicker{color:var(--gold);font-weight:700;letter-spacing:3px;font-size:13px;text-transform:uppercase}
.sec-head h2{font-size:clamp(26px,4vw,38px);margin:6px 0 10px}
.sec-head p{color:var(--txt-dim);font-size:16px}
.alt{background:linear-gradient(180deg,rgba(20,27,43,.5),rgba(15,20,32,.5));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* page banner (內頁小 banner) */
.pbanner{position:relative;padding:56px 0 44px;text-align:center;border-bottom:1px solid var(--line);overflow:hidden}
.pbanner .hero-bg{filter:brightness(.34) saturate(1.05)}
.pbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,23,.55),rgba(11,15,23,.92))}
.pbanner-inner{position:relative;z-index:2}
.pbanner h1{font-size:clamp(28px,5vw,44px);margin:0 0 8px}
.pbanner p{color:var(--parch);margin:0}

/* ---------- 卡片格 ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  transition:.18s;position:relative;overflow:hidden;
}
.card:hover{border-color:var(--gold-dim);transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.4)}
.card .ico{font-size:30px;margin-bottom:10px;display:block}
.card h3{font-size:19px;margin:0 0 8px;color:#fff}
.card h3 .gold{color:var(--gold)}
.card p{color:var(--txt-dim);font-size:14.5px;margin:0}
.card .tagline{color:var(--gold);font-weight:700;font-size:13px;margin-bottom:4px}

/* ---------- 特色/玩法 條列區塊 ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:0 0 26px}
.feature.rev{direction:rtl}.feature.rev>*{direction:ltr}
.feature .ftext h3{font-size:24px;color:var(--gold)}
.feature .ftext p{color:var(--txt-dim);font-size:15.5px}
.feature .fmedia{
  background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);min-height:200px;display:grid;place-items:center;padding:20px;overflow:hidden}
.feature .fmedia img{max-height:240px;width:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.pill-list{list-style:none;padding:0;margin:14px 0 0}
.pill-list li{padding:7px 0 7px 26px;position:relative;color:var(--txt);font-size:15px}
.pill-list li::before{content:"◆";position:absolute;left:0;color:var(--gold-dim);font-size:12px;top:9px}

/* 系統列表(features.html) */
.sys{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;
  background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;margin-bottom:16px}
.sys .sys-ico{font-size:46px;text-align:center;line-height:1}
.sys h3{font-size:21px;margin:0 0 4px}
.sys .k{color:var(--gold);font-weight:700;font-size:13px;letter-spacing:1px}
.sys p{color:var(--txt-dim);margin:6px 0 0;font-size:15px}
.sys .mini{margin-top:8px;font-size:13.5px;color:var(--parch)}

/* 職業卡 */
.cls-card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.cls-card:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.cls-portrait{height:220px;display:grid;place-items:center;padding:14px;
  background:radial-gradient(60% 60% at 50% 30%,rgba(232,197,106,.10),transparent),var(--bg2);border-bottom:1px solid var(--line)}
.cls-portrait img{max-height:200px;width:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.cls-body{padding:16px 18px}
.cls-body h3{margin:0 0 4px;font-size:19px}
.cls-body .role{color:var(--gold);font-size:13px;font-weight:700;margin-bottom:8px}
.cls-body p{color:var(--txt-dim);font-size:14px;margin:0}
.wtag{display:inline-block;font-size:12px;color:var(--parch);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px;margin-top:10px}

/* ---------- 表格 ---------- */
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--panel2);color:var(--gold);font-weight:700;position:sticky;top:0}
tr:hover td{background:rgba(232,197,106,.04)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 篩選列 ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.filters input,.filters select{
  background:var(--panel);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:10px 12px;font-family:var(--font);font-size:15px}
.filters input{flex:1;min-width:180px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--gold-dim)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--txt-dim);
  border-radius:999px;padding:7px 14px;font-size:13.5px;cursor:pointer;font-family:var(--font)}
.chip.on{border-color:var(--gold);color:var(--gold);background:rgba(232,197,106,.08)}
.result-count{color:var(--txt-dim);font-size:14px;margin-bottom:14px}

/* ---------- 圖鑑卡牆 ---------- */
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.dex-card{background:linear-gradient(170deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:10px;overflow:hidden;transition:.15s;position:relative}
.dex-card:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.dex-card.boss{border-color:var(--gold);box-shadow:0 0 0 1px rgba(232,197,106,.25) inset}
.dex-thumb{height:120px;display:grid;place-items:center;background:var(--bg2);
  border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.dex-thumb img{max-height:112px;width:auto;image-rendering:auto}
.dex-thumb .noimg{color:var(--txt-dim);font-size:30px;opacity:.5}
.dex-body{padding:10px 12px}
.dex-body .nm{font-weight:700;color:#fff;font-size:15px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dex-body .lv{color:var(--gold);font-size:12.5px;font-weight:600}
.dex-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:8px;font-size:12px;color:var(--txt-dim)}
.dex-stats b{color:var(--txt);font-weight:600}
.boss-tag{position:absolute;top:6px;right:6px;z-index:2;background:linear-gradient(145deg,#e8c56a,#b8892f);
  color:#1a1206;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px}
.el{display:inline-block;font-size:11px;padding:1px 7px;border-radius:5px;font-weight:700;margin-top:6px}
.el-fire{background:rgba(198,91,82,.18);color:#e58a80}
.el-water{background:rgba(91,143,214,.18);color:#87b3ec}
.el-earth{background:rgba(150,120,70,.22);color:#d0ad6b}
.el-wind{background:rgba(95,174,122,.18);color:#8ed3a6}
.el-none{background:rgba(147,160,189,.16);color:#aeb8cf}

/* 道具卡 */
.item-card{display:flex;gap:12px;background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:10px;padding:12px;transition:.15s}
.item-card:hover{border-color:var(--gold-dim)}
.item-ico{width:56px;height:56px;flex:0 0 auto;border-radius:8px;background:var(--bg2);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.item-ico img{max-width:50px;max-height:50px}
.item-ico .noimg{color:var(--txt-dim);font-size:22px;opacity:.5}
.item-info{min-width:0;flex:1}
.item-info .nm{font-weight:700;color:#fff;font-size:15px}
.item-info .ty{font-size:12px;color:var(--gold);font-weight:600}
.item-src{font-size:12.5px;color:var(--txt-dim);margin-top:5px;line-height:1.5}
.item-src .pct{color:var(--parch);font-weight:700}
.item-note{font-size:12px;color:#f6b8d0;margin-top:6px;line-height:1.5;border-left:2px solid #c96a8f;padding-left:8px}

/* ---------- 手風琴 FAQ ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin-bottom:12px}
.acc-q{width:100%;text-align:left;background:none;border:none;color:#f2f5ff;font-family:var(--font);
  font-size:17px;font-weight:700;padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center}
.acc-q:hover{color:var(--gold)}
.acc-q .plus{color:var(--gold);font-size:22px;transition:.2s;flex:0 0 auto}
.acc.open .acc-q .plus{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--txt-dim);font-size:15px}
.acc-a .inner{padding:0 22px 20px}
.acc.open .acc-a{max-height:600px}

/* 分區(zones) */
.region{margin-bottom:34px}
.region-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.region-head h3{margin:0;font-size:22px;color:var(--gold)}
.region-head .n{color:var(--txt-dim);font-size:13px;background:var(--panel2);padding:2px 10px;border-radius:999px}
.zone-card{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:10px;padding:16px}
.zone-card.town{opacity:.85;border-style:dashed}
.zone-card h4{margin:0 0 4px;font-size:17px;color:#fff}
.zone-card .lvr{color:var(--gold);font-size:13px;font-weight:700;margin-bottom:8px}
.zone-card .town-tag{color:var(--blue);font-size:13px;font-weight:700}
.zone-card .zone-gate{margin-top:8px;font-size:12px;color:var(--red);background:rgba(198,91,82,.10);
  border:1px solid rgba(198,91,82,.35);border-radius:6px;padding:4px 8px;line-height:1.55}
.gate-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:8px;padding:14px 18px;margin:0 0 22px}
.gate-note b:first-child{color:var(--gold)}
.gate-note ul{margin:8px 0 0;padding-left:20px}
.gate-note li{margin:4px 0;color:var(--txt);font-size:14px;line-height:1.7}
.zone-mobs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.zone-mob{font-size:12px;color:var(--parch);background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:2px 8px}

/* 獎勵表 */
.rw-block{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;margin-bottom:18px}
.rw-block h3{color:var(--gold);font-size:20px;margin:0 0 4px}
.rw-block .desc{color:var(--txt-dim);font-size:14.5px;margin:0 0 14px}

/* ---------- 玩家指南與優化歷程 ---------- */
.guide-jump{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.guide-jump a{padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--txt);font-size:14px;font-weight:700}
.guide-jump a:hover{border-color:var(--gold-dim);color:var(--gold)}
.guide-block{display:grid;grid-template-columns:62px minmax(0,1fr);gap:22px;padding:30px 0;border-bottom:1px solid var(--line);scroll-margin-top:76px}
.guide-block:first-of-type{padding-top:8px}.guide-block h2{font-size:27px;margin:2px 0 10px}.guide-block>div>p{color:var(--txt-dim);margin:0 0 15px}
.guide-icon{width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--gold-dim);border-radius:8px;background:rgba(232,197,106,.08);color:var(--gold);font-size:25px;font-weight:900}
.guide-icon .nxi{width:28px;height:28px}
.guide-block .kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:2px}.compact{margin-top:18px}.compact .card{padding:16px}.compact .card h3{font-size:16px}.steps{list-style:none;margin:20px 0;padding:0;counter-reset:step;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.steps li{counter-increment:step;position:relative;min-height:82px;padding:14px 14px 14px 48px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.steps li::before{content:counter(step);position:absolute;left:14px;top:15px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#171006;font-weight:900;font-size:13px}.steps b,.steps span{display:block}.steps span{color:var(--txt-dim);font-size:13px;margin-top:3px}.notice{padding:12px 14px!important;border-left:3px solid var(--gold-dim);background:rgba(232,197,106,.06);color:var(--parch)!important;font-size:14px}.check-list{list-style:none;padding:0;margin:16px 0}.check-list li{position:relative;padding:7px 0 7px 27px;color:var(--txt)}.check-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.timeline{max-width:940px}.release{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding:0 0 42px;position:relative}.release::before{content:"";position:absolute;left:149px;top:12px;bottom:-2px;width:1px;background:var(--line)}.release:last-child::before{display:none}.release-meta{text-align:right;padding-right:26px}.release-meta time,.release-meta span{display:block}.release-meta time{color:var(--gold);font-weight:900;font-size:17px}.release-meta span{color:var(--txt-dim);font-size:12px}.release-body{position:relative;padding:0 0 0 28px}.release-body::before{content:"";position:absolute;left:-6px;top:8px;width:11px;height:11px;border:2px solid var(--gold);background:var(--bg);border-radius:50%}.release-body h2{font-size:23px}.release-body p,.release-body li{color:var(--txt-dim)}.release-body ul{margin:12px 0 0;padding-left:20px}.release-body .btn{margin-top:14px;font-size:14px;padding:10px 18px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:42px 0 30px;margin-top:40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.foot h4{color:var(--gold);font-size:15px;margin:0 0 12px;letter-spacing:1px}
.foot a{display:block;color:var(--txt-dim);font-size:14px;padding:3px 0}
.foot a:hover{color:#fff}
.foot p{color:var(--txt-dim);font-size:14px;margin:0 0 8px}
.foot-play{margin-top:6px}
.foot-play a{display:inline-block;color:var(--gold);border:1px solid var(--gold-dim);border-radius:8px;
  padding:8px 14px;margin:6px 8px 0 0;font-size:13.5px;font-weight:700}
.foot-bottom{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--txt-dim);font-size:13px}
.src-note{color:var(--txt-dim);font-size:13px;text-align:center;margin-top:24px;opacity:.8}

/* ---------- LINE 社群 ---------- */
.community{
  padding:54px 0;background:linear-gradient(90deg,rgba(6,199,85,.08),rgba(15,20,32,.72) 48%,rgba(232,197,106,.06));
  border-top:1px solid rgba(6,199,85,.3);border-bottom:1px solid var(--line)
}
.community-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:42px}
.community-copy{max-width:700px}
.community-copy .kicker{color:#62d98e;font-size:13px;font-weight:800;letter-spacing:3px}
.community-copy h2{font-size:clamp(26px,4vw,38px);margin:6px 0 10px}
.community-copy p{color:var(--txt-dim);font-size:16px;margin:0 0 22px}
.line-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 24px;border-radius:8px;
  background:#06c755;color:#061b0f;font-weight:900;font-size:16px;box-shadow:0 8px 24px rgba(6,199,85,.2)
}
.line-btn:hover{background:#27db70;color:#061b0f;transform:translateY(-1px)}
.community-qr{width:190px;padding:10px;background:#fff;border:1px solid rgba(255,255,255,.8);border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.38)}
.community-qr img{width:100%;height:auto}
.community-qr span{display:block;color:#173221;text-align:center;font-size:12px;font-weight:800;padding-top:6px}

/* ---------- RWD ---------- */
@media(max-width:860px){
  .nav-links{
    position:fixed;top:60px;right:0;left:0;flex-direction:column;align-items:stretch;flex-wrap:nowrap;   /* ★ nowrap 必要:基礎規則是 wrap(桌面橫排用),配上 column + max-height 會讓項目換到看不見的第二欄 */
    background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 14px;gap:4px;
    transform:translateY(-140%);transition:transform .22s;max-height:calc(100vh - 60px);max-height:calc(100svh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:12px 10px;font-size:16px}
  .nav-group{width:100%;display:block}
  .nav-groupbtn{width:100%;text-align:left;padding:12px 10px;font-size:16px}
  .nav-group .caret{margin-left:6px}
  .nav-dropdown{position:static;display:none;border:none;box-shadow:none;background:transparent;padding:0 0 4px 18px;min-width:0}
  .nav-group.open .nav-dropdown{display:flex}
  .nav-group.open .nav-groupbtn .caret{transform:rotate(180deg)}
  .nav-dropdown a{padding:10px;font-size:15px}
  .nav-cta{margin:6px 0 0;text-align:center}
  .burger{display:block}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .feature,.feature.rev{grid-template-columns:1fr;direction:ltr}
  .feature .fmedia{order:-1}
  .sys{grid-template-columns:1fr}
  .sys .sys-ico{text-align:left}
  .community-inner{grid-template-columns:1fr;text-align:center;justify-items:center;gap:26px}
  .community-copy{max-width:620px}
  .steps{grid-template-columns:1fr}
}
/* 🩹 導覽列中間斷點:17px 字級下需求寬 1112px,861~1140px 改用漢堡選單避免換行(只含導覽列規則,不影響其他版面) */
@media(min-width:861px) and (max-width:1140px){
  .nav-links{
    position:fixed;top:60px;right:0;left:0;flex-direction:column;align-items:stretch;flex-wrap:nowrap;   /* ★ nowrap 必要:基礎規則是 wrap(桌面橫排用),配上 column + max-height 會讓項目換到看不見的第二欄 */
    background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 14px;gap:4px;
    transform:translateY(-140%);transition:transform .22s;max-height:calc(100vh - 60px);max-height:calc(100svh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:12px 10px;font-size:16px}
  .nav-group{width:100%;display:block}
  .nav-groupbtn{width:100%;text-align:left;padding:12px 10px;font-size:16px}
  .nav-group .caret{margin-left:6px}
  .nav-dropdown{position:static;display:none;border:none;box-shadow:none;background:transparent;padding:0 0 4px 18px;min-width:0}
  .nav-group.open .nav-dropdown{display:flex}
  .nav-group.open .nav-groupbtn .caret{transform:rotate(180deg)}
  .nav-dropdown a{padding:10px;font-size:15px}
  .nav-cta{margin:6px 0 0;text-align:center}
  .burger{display:block}
}
@media(min-width:861px) and (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .dex{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:70vh}
  .guide-block{grid-template-columns:1fr;gap:12px}.guide-block h2{font-size:23px}
  .release{grid-template-columns:1fr;gap:10px;padding-bottom:34px}.release::before{display:none}.release-meta{text-align:left;padding:0}.release-meta time,.release-meta span{display:inline;margin-right:8px}.release-body{padding-left:22px}.release-body::before{left:0}
}

/* 圖鑑「顯示更多」按鈕（跨整列） */
.dex-more{grid-column:1/-1;justify-self:center;margin:18px auto 4px;padding:11px 30px;
  background:linear-gradient(#1b2330,#141b26);color:#e8c56a;border:1px solid #3a4a63;
  border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.dex-more:hover{border-color:#e8c56a;background:linear-gradient(#222c3c,#182030)}
.dex-more:active{transform:translateY(1px)}
.poster-showcase{overflow:hidden}
.poster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:center;max-width:1040px;margin:0 auto}
.poster-item{position:relative;margin:0;overflow:hidden;border:1px solid rgba(214,169,75,.36);border-radius:6px;background:#0b0d12;box-shadow:0 18px 45px rgba(0,0,0,.34);aspect-ratio:9/16}
.poster-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.poster-item:hover img{transform:scale(1.025)}
.poster-item figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:end;justify-content:space-between;padding:42px 16px 14px;background:linear-gradient(transparent,rgba(3,4,7,.9));color:#fff}
.poster-item figcaption strong{font-size:18px;color:#f0c768}
.poster-item figcaption span{font-size:12px;color:#d4d9e2}
.poster-featured{transform:translateY(-10px)}
@media(max-width:720px){.poster-grid{grid-template-columns:repeat(3,78vw);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 11vw 22px;margin:0 -20px;max-width:none}.poster-item{scroll-snap-align:center}.poster-featured{transform:none}.poster-item figcaption{padding:38px 12px 12px}}

/* ---------- 主題曲 MV ---------- */
.anthem-player{
  max-width:426px;margin:0 auto;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--gold-dim);
  background:#05070c;
  box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 42px rgba(232,197,106,.13);
}
.anthem-player video{
  display:block;width:100%;aspect-ratio:9/16;max-height:82vh;
  object-fit:contain;background:#05070c;
}
@media(max-width:720px){.anthem-player{max-width:340px}}

/* ============================================================
   🦁 全站美術強化 v2(2026-07-12)—— 紅獅頭品牌 + 氛圍餘燼 + 裝飾
   ============================================================ */
/* 品牌標記 → 紅獅頭 logo(nav/footer 一次更新,免動 HTML) */
.brand .mark{
  background:url('/assets/brand/icon-192.png') center/cover no-repeat !important;
  color:transparent !important;font-size:0 !important;
  border-radius:9px;
  box-shadow:0 0 14px rgba(255,90,60,.4),inset 0 0 0 1px rgba(232,197,106,.4);
}
.brand:hover .mark{box-shadow:0 0 20px rgba(255,90,60,.65),inset 0 0 0 1px rgba(232,197,106,.6)}

/* 環境餘燼 —— 全站固定飄浮層(純 CSS,低調不擋操作) */
body::after{
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.42;
  background-image:
    radial-gradient(2px 2px at 40px 60px,rgba(255,150,90,.6),transparent),
    radial-gradient(1.6px 1.6px at 180px 200px,rgba(255,120,70,.5),transparent),
    radial-gradient(2px 2px at 300px 120px,rgba(255,200,120,.5),transparent),
    radial-gradient(1.5px 1.5px at 120px 330px,rgba(255,140,80,.45),transparent),
    radial-gradient(2px 2px at 360px 360px,rgba(255,170,100,.5),transparent),
    radial-gradient(1.4px 1.4px at 240px 40px,rgba(255,130,75,.45),transparent);
  background-size:420px 420px;
  animation:emberDrift 24s linear infinite;
}
@keyframes emberDrift{from{background-position:0 0}to{background-position:0 -420px}}
@media(prefers-reduced-motion:reduce){body::after{animation:none;opacity:.28}}

/* 區塊標題裝飾:kicker 兩側金線 + h2 金色底線 */
.sec-head .kicker{display:inline-flex;align-items:center;gap:12px}
.sec-head .kicker::before,.sec-head .kicker::after{content:"";width:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim))}
.sec-head .kicker::after{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.sec-head h2{position:relative;display:inline-block;padding-bottom:12px}
.sec-head h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* 卡片:頂部金線 + 更亮的 hover 光暈 */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);opacity:.5;transition:.18s}
.card:hover::before{opacity:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.card:hover{box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 26px rgba(232,197,106,.1)}
.card .ico{filter:drop-shadow(0 2px 8px rgba(255,140,80,.35))}
/* 六大亮點:金色徽章插畫圖示 */
.card .ico.ico-img{width:76px;height:76px;margin:0 auto 14px;padding:0;line-height:0;
  filter:drop-shadow(0 4px 14px rgba(255,120,70,.35))}
.card .ico.ico-img img{width:100%;height:100%;object-fit:contain;border-radius:14px;
  transition:transform .2s}
.card:hover .ico.ico-img img{transform:scale(1.06) rotate(-2deg)}

/* 系統列(features):左金條 + 圖示圓底光暈 */
.sys{position:relative;overflow:hidden;transition:.18s}
.sys::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-dim));opacity:.55;transition:.18s}
.sys:hover{border-color:var(--gold-dim);transform:translateX(2px)}
.sys:hover::before{opacity:1}
.sys .sys-ico{border-radius:14px;
  background:radial-gradient(circle at 50% 40%,rgba(255,120,70,.16),rgba(232,197,106,.06) 60%,transparent);
  filter:drop-shadow(0 3px 8px rgba(255,130,75,.3))}

/* 內頁 banner:紅光 + 紅獅浮水印 + 調亮現成場景圖 */
.pbanner{background:radial-gradient(120% 90% at 50% 0%,rgba(120,30,30,.35),transparent 60%);
  padding:clamp(72px,11vw,132px) 0 clamp(60px,9vw,108px)}
.pbanner .hero-bg{filter:brightness(.5) saturate(1.1) contrast(1.03);background-position:center 38%}
.pbanner::after{background:linear-gradient(180deg,rgba(11,15,23,.32),rgba(11,15,23,.6) 55%,rgba(11,15,23,.88)) !important}
.pbanner p{text-shadow:0 1px 8px rgba(0,0,0,.9)}
.pbanner::before{content:"";position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  width:230px;height:230px;pointer-events:none;opacity:.12;z-index:1;
  background:url('/assets/brand/icon-512.png') center/contain no-repeat}
.pbanner h1{text-shadow:0 2px 24px rgba(0,0,0,.6),0 0 30px rgba(255,90,60,.2)}

/* Hero:疊一層紅色氛圍光 + 底部金色分隔 */
.hero::after{background:
  radial-gradient(70% 55% at 50% 42%,rgba(140,36,30,.28),transparent 62%),
  radial-gradient(80% 60% at 50% 40%,transparent,rgba(9,12,19,.85)),
  linear-gradient(180deg,rgba(11,15,23,.35),rgba(11,15,23,.96))}
.hero{border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--gold-dim),transparent) 1}

/* 導覽列底金線微光 */
.nav{box-shadow:0 1px 0 rgba(232,197,106,.08),0 6px 20px rgba(0,0,0,.35)}

/* 主要按鈕:金色光暈脈動(僅 hero/CTA 用的 btn-primary) */
.btn-primary{position:relative}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(232,197,106,.4);transition:.3s}
.btn-primary:hover::after{box-shadow:0 0 26px 2px rgba(232,197,106,.35)}

/* 首頁 hero 用新紅獅主視覺→調亮一點讓畫面更顯,文字靠陰影+漸層保對比 */
.hero .hero-bg{filter:brightness(.5) saturate(1.14) contrast(1.04);background-position:center 22%}
.hero h1{text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 34px rgba(0,0,0,.6)}
.hero .tag,.hero .sub{text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* ============================================================
   Red Lion Chronicle — site redesign 2026-07-28
   A royal hunting decree: blood red, old gold, bone and charcoal.
   ============================================================ */
:root{
  --bg:#090909;--bg2:#0e0d0c;--panel:#151311;--panel2:#1c1814;
  --line:#3a3026;--gold:#d8aa55;--gold-dim:#8c6a37;--parch:#d9c7a2;
  --txt:#e8e0d4;--txt-dim:#ad9f8d;--red:#a62f27;--blue:#637e95;
  --green:#73916b;--radius:2px;--maxw:1240px;
  --font:"Noto Serif TC","Microsoft JhengHei",serif;
  --font-title:"Noto Serif TC","Microsoft JhengHei",serif;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);letter-spacing:.015em}
body::before{background:
  linear-gradient(90deg,rgba(216,170,85,.025) 1px,transparent 1px) 50% 0/84px 84px,
  radial-gradient(900px 520px at 88% 4%,rgba(166,47,39,.12),transparent 65%),
  linear-gradient(180deg,#090909,#0d0b0a 52%,#080808)}
body::after{opacity:.16;mix-blend-mode:screen}
::selection{background:var(--red);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f0c977;outline-offset:3px}

.nav{background:rgba(8,8,8,.94);border-bottom:1px solid #5b4127;backdrop-filter:blur(14px);box-shadow:0 12px 42px rgba(0,0,0,.42)}
.nav-inner{min-height:72px;padding-top:8px;padding-bottom:8px}
.brand{gap:12px;font-size:19px;letter-spacing:.08em}
.brand .mark{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 1px #7e5b31,0 0 30px rgba(166,47,39,.25)!important}
.brand small{margin-top:2px;color:#9e8565;letter-spacing:.14em}
.nav-links{gap:0}
.nav-links>a,.nav-groupbtn{font-size:15px;padding:24px 11px;border-radius:0;border-bottom:2px solid transparent}
.nav-links>a:hover,.nav-links>a.active,.nav-group:hover .nav-groupbtn{background:transparent;border-bottom-color:var(--gold);color:#f4e8d5}
.nav-cta{margin-left:14px!important;padding:11px 18px!important;border:1px solid #b78c4d!important;background:transparent!important;color:#ead09c!important}
.nav-cta:hover{background:#d8aa55!important;color:#170e08!important}
.nav-dropdown{top:calc(100% - 1px);border-radius:0;border-color:#5b4127;background:#0e0c0b;padding:10px;box-shadow:0 22px 50px #000}

.hero{min-height:calc(100vh - 72px);justify-content:flex-start;text-align:left;border:0}
.hero .hero-bg{filter:brightness(.48) saturate(.9) contrast(1.12);background-position:center 24%;transform:scale(1.01)}
.hero::after{background:
  linear-gradient(90deg,rgba(5,5,5,.96) 0%,rgba(7,6,5,.8) 34%,rgba(7,6,5,.14) 72%),
  linear-gradient(0deg,#090909 0%,transparent 32%),
  radial-gradient(circle at 70% 35%,rgba(166,47,39,.18),transparent 34%)}
.hero-inner{width:100%;max-width:1240px;margin:0 auto;padding:92px 24px 120px}
.hero-inner::before{content:"THE RED LION CHRONICLE";display:block;color:#b28a4e;font-family:var(--font-latin);font-size:11px;letter-spacing:.42em;margin-bottom:26px}
.hero-badges{justify-content:flex-start;margin-bottom:22px;gap:0}
.badge{border:0;border-right:1px solid #705331;border-radius:0;background:transparent;padding:2px 14px;color:#d9c7a2;letter-spacing:.12em}
.badge:first-child{padding-left:0}.badge:last-child{border:0}
.hero h1{max-width:760px;font-size:clamp(45px,7.4vw,92px);line-height:1.08;letter-spacing:.02em;margin-bottom:22px;text-wrap:balance}
.hero h1 .gold{display:block;color:#f0d7a5;text-shadow:0 4px 40px #000,0 0 40px rgba(166,47,39,.26)}
.hero .tag{font-size:clamp(17px,2vw,24px);color:#e9ddc7;border-left:3px solid var(--red);padding-left:16px;margin:0 0 16px}
.hero .sub{max-width:650px;margin:0 0 34px;color:#c0b4a3;font-size:16px}
.hero .btn-row{justify-content:flex-start}
.hero .dim{text-align:left}

.btn{border-radius:0;padding:14px 25px;letter-spacing:.05em;transition:.24s ease}
.btn-primary{background:#d8aa55;color:#160e08;box-shadow:none;border:1px solid #f0ca80}
.btn-primary:hover{background:#f0c977;transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.btn-ghost{background:rgba(8,8,8,.62);border-color:#79603d;color:#ead19f}
.btn-ghost:hover{background:#18130e;border-color:#d8aa55}
section{padding:88px 0}
.alt{background:linear-gradient(115deg,#100e0c,#17110e 48%,#0d0c0b);border-color:#30271f}
.sec-head{margin-bottom:52px}
.sec-head .kicker{font-size:11px;letter-spacing:.34em;color:#b99052}
.sec-head h2{font-size:clamp(30px,4vw,48px);font-weight:900;letter-spacing:.04em;padding-bottom:18px}
.sec-head h2::after{height:1px;width:110px;background:linear-gradient(90deg,var(--red) 0 35%,var(--gold) 35% 100%)}
.sec-head p{color:#b6aa98}

.grid{gap:1px;background:#3a3026;border:1px solid #3a3026}
.grid>.card{border:0}
.card{border-radius:0;background:#12100e;padding:28px;transition:.28s ease}
.card::before{left:28px;right:auto;width:34px;height:2px;background:var(--red);opacity:1}
.card:hover{z-index:1;transform:translateY(-5px);background:#1b1612;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.card:hover::before{width:72px;background:var(--gold)}
.card .ico{font-size:28px;margin:7px 0 24px;filter:grayscale(.2) sepia(.25)}
.card h3{font-size:20px;color:#f0e5d4}.card p{color:#ad9f8d;line-height:1.8}
.center{text-align:left}

.pbanner{padding:clamp(90px,13vw,160px) 0 clamp(70px,9vw,110px);text-align:left;border-color:#5b4127}
.pbanner::before{right:4vw;width:300px;height:300px;opacity:.09;filter:grayscale(1) sepia(1)}
.pbanner::after{background:linear-gradient(90deg,rgba(6,6,6,.94),rgba(8,7,6,.52) 58%,rgba(8,7,6,.72)),linear-gradient(0deg,#090909,transparent)!important}
.pbanner h1{font-size:clamp(38px,6vw,72px);letter-spacing:.04em}.pbanner p{color:#cdbd9f;max-width:680px}

.sys,.cls-card,.dex-card,.item-card,.acc,.tbl-scroll,.feature .fmedia{border-radius:0;background:#13110f;border-color:#3a3026}
.sys{border-left:3px solid #7e2923}.sys::before{display:none}
.cls-portrait,.dex-thumb,.item-ico{background:#0d0c0b;border-color:#30271f}
.filters input,.filters select,.chip,.guide-jump a,.steps li{border-radius:0;background:#12100e;border-color:#3a3026}
th{background:#1a1511;color:#dfb96f}tr:hover td{background:rgba(166,47,39,.08)}
.guide-icon{border-radius:0;border-color:#7e5b31;background:#17110d}
.release-body::before{border-radius:0;transform:rotate(45deg);background:#a62f27;border-color:#d8aa55}

footer{margin:0;padding-top:64px;background:#070707;border-color:#4f3926}
.foot{grid-template-columns:1.6fr .7fr .7fr}.foot h4{letter-spacing:.18em}
.foot-play a{border-radius:0}.foot-bottom{border-color:#30271f}

@media(max-width:1140px){
  .nav-inner{min-height:64px}.nav-links{top:64px;background:#0b0a09;border-color:#5b4127}
  .nav-links>a,.nav-groupbtn{padding:12px 10px;border-bottom:1px solid #2c241d}
  .nav-cta{margin-left:0!important}.burger{border-radius:0;border-color:#705331}
}
@media(max-width:860px){
  .hero{min-height:720px}.hero::after{background:linear-gradient(0deg,#090909 2%,rgba(7,6,5,.32) 68%),linear-gradient(90deg,rgba(5,5,5,.86),rgba(7,6,5,.25))}
  .hero-inner{padding-top:70px;padding-bottom:90px}.hero h1{font-size:clamp(42px,13vw,70px)}
  section{padding:68px 0}.grid{gap:1px}.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
  .brand{font-size:16px}.brand .mark{width:36px;height:36px}.brand small{font-size:9px}
  .hero{min-height:680px}.hero-inner::before{font-size:9px;letter-spacing:.28em}.hero-badges{display:none}
  .hero .btn-row{display:grid}.hero .btn{justify-content:center;width:100%}
  .sec-head{text-align:left}.sec-head .kicker::before{display:none}.sec-head h2::after{left:0;transform:none}
  .foot{grid-template-columns:1fr}.foot>div:first-child{grid-column:auto}
}

/* ============================================================
   Readability pass — 2026-07-28
   Raise the information floor without flattening the hierarchy.
   ============================================================ */
body{font-size:17px;line-height:1.82}
.nav-links>a,.nav-groupbtn{font-size:17px;font-weight:700}
.nav-dropdown a{font-size:16px;line-height:1.45}
.brand{font-size:21px}.brand small{font-size:12px}
.hero .sub,.sec-head p,.feature .ftext p,.sys p{font-size:17px}
.hero .tag{font-size:clamp(19px,2vw,25px)}
.badge,.hero .dim{font-size:14px}
.btn{font-size:18px}
.card h3{font-size:22px}.card p{font-size:16.5px}
.sys h3{font-size:23px}.sys .k{font-size:14px}.sys .mini{font-size:15px}
.cls-body h3{font-size:21px}.cls-body .role{font-size:15px}.cls-body p{font-size:16px}.wtag{font-size:14px}
table{font-size:16px}th,td{padding:13px 14px}
.filters input,.filters select{font-size:16px}.chip{font-size:15px}.result-count{font-size:15px}
.dex-body .nm{font-size:17px}.dex-body .lv{font-size:14px}.dex-stats{font-size:14px}
.item-info .nm{font-size:17px}.item-info .ty{font-size:14px}.item-src{font-size:14px}.item-note{font-size:14px}
.acc-q{font-size:18px}.acc-a .inner{font-size:16.5px}
.guide-jump a{font-size:16px}.guide-block>div>p{font-size:17px}
.steps span{font-size:15px}.notice{font-size:16px!important}
.release-meta time{font-size:19px}.release-meta span{font-size:14px}
.release-body p,.release-body li{font-size:16.5px}
.foot h4{font-size:17px}.foot a,.foot p{font-size:16px}.foot-play a{font-size:15px}.foot-bottom{font-size:14px}
.src-note{font-size:15px}

@media(max-width:1140px){
  .nav-links>a,.nav-groupbtn{font-size:18px;padding:14px 12px}
  .nav-dropdown a{font-size:17px}
}
@media(max-width:520px){
  body{font-size:17px;line-height:1.78}
  .brand{font-size:18px}.brand small{font-size:10px}
  .hero .sub{font-size:16.5px}.hero .tag{font-size:20px}
  .card{padding:24px}.card h3{font-size:21px}.card p{font-size:16.5px}
  table{font-size:15.5px}
}

/* Hero composition — story and theme MV share the opening stage */
.hero-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);
  align-items:center;gap:clamp(46px,7vw,110px)
}
.hero-layout::before{display:none}
.hero-copy::before{
  content:"THE RED LION CHRONICLE";display:block;color:#b28a4e;
  font-family:var(--font-latin);font-size:11px;letter-spacing:.42em;margin-bottom:26px
}
.hero-copy{min-width:0}
.hero-layout .hero-copy h1{font-size:clamp(44px,5.2vw,74px)}
.hero-anthem{position:relative;z-index:2;justify-self:end;width:100%;max-width:390px}
.hero-anthem::before{
  content:"";position:absolute;inset:-12px;z-index:-1;border:1px solid rgba(216,170,85,.34);
  background:linear-gradient(145deg,rgba(166,47,39,.18),transparent 45%);
  box-shadow:0 28px 80px rgba(0,0,0,.58)
}
.hero-anthem-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 14px;margin:0 0 15px}
.hero-anthem-head>span{grid-column:1/-1;color:#c09551;font:700 11px/1.4 var(--font-latin);letter-spacing:.28em}
.hero-anthem-head h2{margin:0;color:#f1dfbd;font-size:24px}
.hero-anthem-head p{margin:0;color:#b9aa93;font-size:14px;text-align:right}
.hero-anthem .anthem-player{max-width:none;border-radius:0;border-color:#806039;box-shadow:none;background:#050505}
.hero-anthem .anthem-player video{max-height:560px}

@media(max-width:980px){
  .hero{min-height:auto}
  .hero-layout{grid-template-columns:1fr;gap:54px;padding-top:72px;padding-bottom:86px}
  .hero-anthem{justify-self:center;max-width:360px}
}
@media(max-width:520px){
  .hero-layout{gap:44px;padding-left:18px;padding-right:18px}
  .hero-layout .hero-copy h1{font-size:clamp(40px,12vw,58px)}
  .hero-copy::before{font-size:9px;letter-spacing:.28em}
  .hero-anthem{max-width:320px}
  .hero-anthem-head{display:block}
  .hero-anthem-head h2{font-size:22px;margin-top:4px}
  .hero-anthem-head p{text-align:left;font-size:14px;margin-top:3px}
  .hero-anthem .anthem-player video{max-height:none}
}

/* Mobile masthead + opening fold — 2026-07-30 */
@media(max-width:520px){
  .nav-inner{
    min-height:58px;
    padding:5px 11px;
    gap:8px;
    flex-wrap:nowrap;
  }
  .brand{
    min-width:0;
    max-width:calc(100% - 48px);
    gap:8px;
    font-size:15px;
    line-height:1.1;
    letter-spacing:.035em;
    overflow:hidden;
  }
  .brand>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .brand .mark{flex:0 0 34px;width:34px;height:34px}
  .brand small{margin-top:3px;font-size:8px;letter-spacing:.08em}
  .nx-fb-brand{display:none!important}
  .burger{
    flex:0 0 40px;
    width:40px;
    height:40px;
    margin-left:auto;
    padding:0;
    display:grid;
    place-items:center;
  }
  .nav-links{top:58px}
  .nx-slog-corner{
    top:15px!important;
    right:58px!important;
    z-index:49!important;
  }
  .nx-slog-corner img{height:27px!important;max-width:76px;object-fit:contain}

  .hero{min-height:auto}
  .hero-layout{
    gap:34px;
    padding:34px 16px 58px;
  }
  .hero-copy::before{
    margin-bottom:13px;
    font-size:8px;
    letter-spacing:.22em;
  }
  .hero-layout .hero-copy h1{
    max-width:100%;
    margin-bottom:16px;
    font-size:clamp(34px,11vw,46px);
    line-height:1.08;
  }
  .hero .tag{
    margin-bottom:12px;
    padding-left:12px;
    font-size:18px;
    line-height:1.55;
  }
  .hero .sub{
    margin-bottom:24px;
    font-size:15.5px;
    line-height:1.72;
  }
  .hero .btn-row{gap:10px}
  .hero .btn{min-height:50px;padding:12px 16px;font-size:16px}
  .launch-cd{margin-top:16px!important;padding:14px 15px 12px!important}
}

@media(max-width:340px){
  .brand{font-size:14px}
  .brand small{font-size:7.5px}
  .nx-slog-corner img{max-width:66px}
  .hero-layout{padding-left:13px;padding-right:13px}
}

@media(max-width:520px){
  .brand{
    flex:0 0 164px;
    width:164px;
    max-width:none;
    font-size:13.5px;
    overflow:visible;
  }
  .brand>span:last-child{
    flex:0 0 122px;
    width:122px;
    overflow:visible;
    text-overflow:clip;
  }
}
@media(max-width:340px){
  .brand{font-size:13px}
}

/* ── 📱 下拉子選單看不清楚(2026-08-10)──────────────────────────────
   暗色主題把 .nav-dropdown 的底色改成 #0e0c0b,但沒有一起改連結顏色,
   所以它還留著舊配色的 --txt-dim(#93a0bd,藍灰)—— 在金褐色系的深色底上
   看起來灰糊一片,和上面金色的主項目落差很大。手機上尤其明顯,因為手機版
   把子選單背景設成 transparent、只縮排 18px,和主項目擠在同一個平面。 */
.nav-dropdown a{color:#dcc79f}
.nav-dropdown a:hover,.nav-dropdown a:focus{color:#fff;background:rgba(232,197,106,.12)}
.nav-dropdown a.active{color:var(--gold);background:rgba(232,197,106,.16)}
@media(max-width:1140px){
  /* 收合選單:加一條左邊線與極淡底色,讓「這是某個項目的子選單」看得出來 */
  .nav-group.open .nav-dropdown{background:rgba(255,255,255,.035);border-left:2px solid #6b4d2c;
    margin:2px 0 6px 8px;padding:4px 0 4px 12px;border-radius:0 8px 8px 0}
  .nav-dropdown a{color:#ecdcbe;font-weight:600}
  .nav-dropdown a:active{background:rgba(232,197,106,.18)}
}

/* nx-touch-hover-fix */
/* 📱 觸控裝置沒有真正的 hover:點過的元素會「黏」在 :hover 狀態,
   讓上面那條 hover 顯示下拉的規則把選單卡在開啟狀態,
   玩家點第二次收不起來、而且看起來只是「字體變了」。
   這裡在「不能 hover 的裝置」上把 hover 效果歸零,改由 .open 單獨控制。
   桌面(有滑鼠)完全不受影響。 */
@media (hover:none),(pointer:coarse){
  .nav-group:hover .nav-dropdown{display:none}
  .nav-group.open  .nav-dropdown{display:flex}
  .nav-group:hover .nav-groupbtn{color:var(--txt-dim);background:none}
  .nav-group.open  .nav-groupbtn{color:#fff;background:var(--panel2)}
  .nav-group:hover .nav-groupbtn .nxi{color:var(--gold-dim)}
  .nav-group.open  .nav-groupbtn .nxi{color:var(--gold)}
  .nav-group:hover .caret{transform:none}
  .nav-group.open  .caret{transform:rotate(180deg)}
}

/* ============================================================
   Premium campaign system — 2026-08-16
   One restrained visual language across the generated site.
   ============================================================ */
:root{
  --bg:#070809;--bg2:#0b0d0f;--panel:#101316;--panel2:#15191d;
  --line:#34302a;--line-soft:rgba(203,167,101,.18);
  --gold:#c9a568;--gold-hi:#ead09a;--gold-dim:#806a45;
  --parch:#d8cbb7;--txt:#eee9df;--txt-dim:#a9a59d;
  --red:#7f211e;--red-hi:#ad3b32;--radius:4px;--maxw:1280px;
}
html{background:#070809}
body{background:#070809;color:var(--txt);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;letter-spacing:.012em}
body::before{background:radial-gradient(900px 500px at 86% 3%,rgba(127,33,30,.12),transparent 65%),linear-gradient(180deg,#070809,#0b0d0f 52%,#070809)}
body::after{opacity:.08}
h1,h2,h3,.brand,.pbanner h1{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif}

.nav{background:rgba(5,7,8,.91);border-bottom:1px solid var(--line-soft);box-shadow:0 16px 50px rgba(0,0,0,.36)}
.nav-inner{min-height:76px;max-width:1320px}
.brand{letter-spacing:.055em}.brand small{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;color:#9f927c}
.brand .mark{border-radius:50%!important;box-shadow:0 0 0 1px rgba(201,165,104,.54),0 14px 34px rgba(0,0,0,.5)!important}
.nav-links>a,.nav-groupbtn{font-size:15px;letter-spacing:.03em;font-weight:650;color:#c6c2ba}
.nav-links>a:hover,.nav-links>a.active,.nav-group:hover .nav-groupbtn{color:#fff;border-bottom-color:var(--gold);background:transparent}
.nav-cta{background:linear-gradient(180deg,#d3b276,#a98245)!important;color:#15110b!important;border:1px solid #e8ca92!important;font-weight:850!important;box-shadow:0 8px 24px rgba(0,0,0,.32)}
.nav-cta:hover{background:#ead09a!important;transform:translateY(-1px)}
.nav-dropdown{background:rgba(10,12,13,.98);border:1px solid var(--line-soft);box-shadow:0 24px 60px rgba(0,0,0,.68)}

.hero-premium{min-height:820px;overflow:hidden;background:#070809;border-bottom:1px solid var(--line-soft)}
.hero-premium .hero-bg{filter:none;transform:scale(1.006);background-position:center center}
.hero-premium::after{background:linear-gradient(90deg,rgba(5,7,8,.98) 0%,rgba(5,7,8,.91) 27%,rgba(5,7,8,.42) 51%,rgba(5,7,8,.08) 73%),linear-gradient(0deg,#070809 0%,transparent 34%),linear-gradient(180deg,rgba(5,7,8,.2),transparent 45%)}
.hero-premium .hero-layout{grid-template-columns:minmax(0,650px) minmax(250px,330px);justify-content:space-between;gap:clamp(40px,6vw,96px);padding-top:94px;padding-bottom:110px}
.hero-copy::before{display:none}
.hero-overline{margin:0 0 18px;color:var(--gold);font:700 11px/1.4 Georgia,serif;letter-spacing:.3em}
.hero-premium h1{max-width:690px;margin:0 0 24px;font-size:clamp(48px,5.5vw,78px);line-height:1.08;letter-spacing:.015em;text-wrap:balance}
.hero-premium h1 .gold{display:block;color:#ead8b4;text-shadow:0 5px 34px rgba(0,0,0,.75)}
.hero-premium .tag{margin:0 0 18px;padding-left:17px;border-left:2px solid var(--red-hi);color:#f1e9da;font:700 clamp(18px,2vw,23px)/1.5 "Noto Sans TC","Microsoft JhengHei",sans-serif}
.hero-premium .sub{max-width:610px;color:#c3beb4;line-height:1.9}
.hero-premium .btn-row{gap:12px}
.btn{min-height:52px;border-radius:3px;padding:13px 24px;font-size:16px;font-weight:780}
.btn-primary{background:linear-gradient(180deg,#ddbc7b,#ae8548);border:1px solid #f0d49e;color:#17110a;box-shadow:0 12px 30px rgba(0,0,0,.42)}
.btn-primary:hover{background:#efd39a;box-shadow:0 16px 34px rgba(0,0,0,.48)}
.btn-ghost{background:rgba(8,10,11,.58);border:1px solid rgba(218,188,132,.45);color:#e6d6b7}
.hero-version{color:#a69b8b!important;letter-spacing:.08em}
.hero-badges{gap:8px}.badge{padding:5px 10px;border:1px solid rgba(201,165,104,.34)!important;background:rgba(8,10,11,.45)!important;color:#d5c5a6!important;font-size:12px!important;letter-spacing:.08em}
.hero-anthem{max-width:286px;align-self:end;margin-bottom:4px}
.hero-anthem::before{inset:-9px;border-color:rgba(201,165,104,.25);background:rgba(5,7,8,.38);box-shadow:0 28px 70px rgba(0,0,0,.55)}
.hero-anthem-head{margin-bottom:10px}.hero-anthem-head>span{color:#b3935d;font-size:9px}.hero-anthem-head h2{font-size:19px}.hero-anthem-head p{font-size:11px}
.hero-anthem .anthem-player{border-color:rgba(201,165,104,.38);background:#050607}.hero-anthem .anthem-player video{max-height:390px}

.campaign-ledger{position:relative;z-index:3;margin-top:-1px;padding:0;background:#0a0c0d;border-bottom:1px solid var(--line-soft)}
.campaign-ledger-inner{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.campaign-ledger-inner>div{display:grid;grid-template-columns:auto 1fr;gap:1px 14px;padding:26px 30px;border-right:1px solid var(--line-soft)}
.campaign-ledger-inner>div:last-child{border-right:0}
.campaign-ledger span{grid-row:1/3;color:#745f3e;font:700 12px/1.2 Georgia,serif;letter-spacing:.12em;padding-top:3px}
.campaign-ledger strong{font:800 18px/1.3 "Noto Serif TC","PMingLiU",serif;color:#eee2ce}.campaign-ledger small{color:#918d85;font-size:12px;letter-spacing:.04em}

section{padding:96px 0}.alt{background:linear-gradient(135deg,#0a0c0e,#11100f 55%,#090b0d);border-color:var(--line-soft)}
.sec-head{max-width:760px;margin-bottom:52px}.sec-head .kicker{font-family:Georgia,serif;color:#a88955;font-size:10px;letter-spacing:.31em}
.sec-head h2{font-size:clamp(32px,4vw,50px);line-height:1.25;color:#f2ede5;letter-spacing:.025em}.sec-head h2::after{background:linear-gradient(90deg,var(--red-hi) 0 28%,var(--gold) 28% 100%)}
.grid{gap:1px;background:var(--line-soft);border-color:var(--line-soft)}
.card{background:#0e1113;padding:32px;min-height:230px}.card::before{left:32px;background:var(--red-hi)}
.card:hover{background:#15181a;transform:translateY(-3px);box-shadow:0 22px 50px rgba(0,0,0,.44)}
.card .ico{font-family:Georgia,serif;font-size:25px;filter:grayscale(.35) sepia(.25);opacity:.92}.card h3{font-size:22px;color:#eee4d4}.card p{color:#aaa69f;line-height:1.85}
.sys,.cls-card,.dex-card,.item-card,.acc,.tbl-scroll,.feature .fmedia{background:#0f1214;border-color:var(--line-soft)}
.feature .ftext p,.sys p{color:#aaa69f}.feature li::marker{color:var(--gold)}
.filters input,.filters select,.chip,.guide-jump a,.steps li{background:#0e1113;border-color:var(--line-soft)}
th{background:#151514;color:#d7b778}td{border-color:rgba(201,165,104,.12)}tr:hover td{background:rgba(127,33,30,.08)}
.pbanner{background:#080a0b;border-color:var(--line-soft)}.pbanner::after{background:linear-gradient(90deg,rgba(5,7,8,.95),rgba(5,7,8,.46) 62%,rgba(5,7,8,.74)),linear-gradient(0deg,#070809,transparent)!important}
.pbanner h1{color:#f0e9de}.pbanner p{color:#c2b6a4}
footer{background:#050607;border-color:var(--line-soft)}

@media(max-width:980px){
  .hero-premium{min-height:auto}.hero-premium .hero-layout{grid-template-columns:1fr;gap:54px;padding-top:72px;padding-bottom:82px}
  .hero-premium .hero-bg{background-position:66% center}.hero-premium::after{background:linear-gradient(90deg,rgba(5,7,8,.96),rgba(5,7,8,.58) 70%,rgba(5,7,8,.24)),linear-gradient(0deg,#070809,transparent 40%)}
  .hero-anthem{max-width:280px;justify-self:start}.campaign-ledger-inner{grid-template-columns:repeat(2,1fr)}
  .campaign-ledger-inner>div:nth-child(2){border-right:0}.campaign-ledger-inner>div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media(max-width:520px){
  .nav-inner{min-height:62px}.nav-links{top:62px}.hero-premium .hero-layout{padding:52px 18px 64px;gap:44px}
  .hero-premium .hero-bg{background-position:71% center;opacity:.72}.hero-premium::after{background:linear-gradient(0deg,#070809 2%,rgba(5,7,8,.54) 72%),linear-gradient(90deg,rgba(5,7,8,.95),rgba(5,7,8,.38))}
  .hero-premium h1{font-size:clamp(39px,12vw,54px)}.hero-overline{font-size:9px;letter-spacing:.21em}.hero-badges{display:flex;flex-wrap:wrap}
  .hero-premium .btn-row{display:grid;grid-template-columns:1fr}.hero-premium .btn{width:100%;justify-content:center}
  .hero-anthem{max-width:240px}.hero-anthem .anthem-player video{max-height:330px}
  .campaign-ledger-inner{grid-template-columns:1fr 1fr}.campaign-ledger-inner>div{padding:20px 14px;gap:2px 9px}.campaign-ledger strong{font-size:15px}.campaign-ledger small{font-size:10px}
  section{padding:70px 0}.card{min-height:0;padding:26px}.sec-head{margin-bottom:38px}
}
.journey-callout{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:0 0 28px;padding:24px 28px;border:1px solid rgba(222,153,67,.35);background:linear-gradient(110deg,rgba(107,30,18,.38),rgba(14,18,24,.84));box-shadow:inset 3px 0 0 #d69b45}.journey-callout h3{margin:4px 0 5px}.journey-callout p{margin:0;color:var(--muted)}
.journey-intro{overflow:hidden;background:radial-gradient(circle at 78% 48%,rgba(176,66,31,.18),transparent 30%),linear-gradient(180deg,rgba(10,13,18,.98),rgba(15,19,25,.88))}.journey-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);align-items:center;gap:56px;min-height:520px}.journey-copy h2{max-width:760px;font-size:clamp(34px,5vw,68px);line-height:1.03;margin:12px 0 22px;letter-spacing:-.035em}.journey-copy>p{max-width:720px;font-size:17px;line-height:1.9;color:#bdc3cb}.journey-legend{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:26px;color:#e6e1d9;font-size:13px;font-weight:700}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;box-shadow:0 0 12px currentColor}.dot.claim,.route-tag.claim{color:#dfad5d}.dot.grow,.route-tag.grow{color:#79b68f}.dot.live,.route-tag.live{color:#dc704f}.dot.compete,.route-tag.compete{color:#839bd8}
.compass{display:grid;place-items:center;min-height:370px}.compass-ring{position:relative;width:min(330px,75vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(221,163,78,.5);background:repeating-conic-gradient(from 45deg,rgba(221,163,78,.07) 0 1deg,transparent 1deg 45deg),radial-gradient(circle,rgba(166,57,30,.28),rgba(9,12,16,.92) 60%);box-shadow:0 0 0 14px rgba(221,163,78,.035),0 0 0 15px rgba(221,163,78,.12),0 34px 90px rgba(0,0,0,.5)}.compass-ring:before,.compass-ring:after{content:"";position:absolute;inset:12%;border:1px solid rgba(221,163,78,.22);transform:rotate(45deg)}.compass-ring:after{inset:28%;border-color:rgba(221,163,78,.34)}.compass-core{position:absolute;inset:35%;z-index:2;display:grid;place-content:center;text-align:center;border-radius:50%;background:#15181d;border:1px solid #c68b3d;box-shadow:0 0 35px rgba(198,88,42,.3)}.compass-core b{font-family:var(--serif);font-size:28px;color:#f0d29c}.compass-core small{margin-top:3px;font-size:8px;letter-spacing:.22em;color:#9e8058}.cp{position:absolute;z-index:3;font-size:12px;font-weight:800;letter-spacing:.2em;color:#d8b87f}.cp-n{top:7%;left:50%;transform:translateX(-50%)}.cp-e{right:4%;top:50%;transform:translateY(-50%) rotate(90deg)}.cp-s{bottom:7%;left:50%;transform:translateX(-50%)}.cp-w{left:4%;top:50%;transform:translateY(-50%) rotate(-90deg)}
.route-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}.route-list li{display:grid;grid-template-columns:82px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid rgba(255,255,255,.1)}.route-no{font-family:var(--serif);font-size:38px;color:#6d6253}.route-list h3{margin:6px 0 8px;font-size:24px}.route-list p{margin:0;max-width:900px;color:var(--muted);line-height:1.8}.route-tag{font-size:11px;font-weight:900;letter-spacing:.18em}.route-tag.free{color:#b59bcb}.deep-section{background:linear-gradient(180deg,rgba(77,27,18,.13),rgba(8,11,15,.3))}.system-rules{align-items:stretch}.rule-card{position:relative;padding:28px;border:1px solid rgba(224,166,83,.22);background:linear-gradient(155deg,rgba(31,29,28,.92),rgba(15,18,23,.95));overflow:hidden}.rule-card:before{content:"";position:absolute;left:0;top:0;width:64px;height:2px;background:#d09240}.rule-mark{font-size:10px;letter-spacing:.2em;color:#d5a45e;font-weight:900}.rule-card h3{margin:9px 0 18px;font-size:25px}.rule-card .check-list{margin-bottom:0}.auto-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}.auto-grid>div{min-height:132px;padding:24px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}.auto-grid b{display:block;margin-bottom:10px;color:#edc782}.auto-grid span{display:block;color:var(--muted);line-height:1.7}.scope-note{margin-top:26px}.scope-note p{margin:7px 0 0}.journey-end{background:linear-gradient(100deg,rgba(103,31,18,.5),rgba(18,20,25,.96))}.journey-end .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}.journey-end h2{margin:8px 0}.journey-end p{color:var(--muted)}
@media(max-width:860px){.journey-callout,.journey-end .wrap{align-items:flex-start;flex-direction:column}.journey-hero{grid-template-columns:1fr;gap:12px;padding-top:48px;padding-bottom:48px}.compass{min-height:320px}.auto-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.journey-copy h2{font-size:38px}.route-list li{grid-template-columns:48px 1fr;gap:14px}.route-no{font-size:27px}.route-list h3{font-size:20px}.auto-grid{grid-template-columns:1fr}.journey-callout{padding:20px}.journey-legend{gap:12px}.compass-ring{width:260px}}

/* ══════════════════════════════════════════════════════════════
   🗡️ 道具數值說明區（drop-*.html）
   說明 HTML 直接由遊戲本體的 buildItemDescHTML() 產生，
   所以要把遊戲用的那幾個色票 class 在這裡對應過來（實測只用到 11 種）。
   ══════════════════════════════════════════════════════════════ */
.item-desc{font-size:14.5px;line-height:2;color:var(--txt);padding:4px 2px}
.item-desc br:first-child{display:none}
.item-desc b{color:#fff}
.item-desc .font-bold{font-weight:700}
.item-desc .text-xs{font-size:12.5px}
.item-desc .text-slate-400{color:#94a3b8}
.item-desc .text-rose-300{color:#fda4af}
.item-desc .text-amber-300{color:#fcd34d}
.item-desc .text-blue-300{color:#93c5fd}
.item-desc .text-emerald-300{color:#6ee7b7}
.item-desc .text-orange-300{color:#fdba74}
.item-desc .text-violet-400{color:#a78bfa}
.item-desc .text-sky-300{color:#7dd3fc}
/* 適用職業的職業圖示：不設尺寸的話會撐成原圖大小 */
.item-desc .class-eq-icon{width:26px;height:26px;object-fit:contain;vertical-align:-7px;margin-right:3px;
  border-radius:6px;background:rgba(255,255,255,.05);padding:2px}

/* ⚔️ 武器攻速表（drop-*.html）：紅獅的攻速由「職業・性別 × 武器種類」決定，所以列成表 */
.atkspd-box{margin-top:14px;padding:12px 14px;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:12px}
.atkspd-h{font-size:14px;font-weight:700;color:var(--gold);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.atkspd-fam{font-size:12.5px;font-weight:400;color:var(--txt-dim)}
table.atkspd{width:100%;margin-top:8px;border-collapse:collapse;font-size:14px}
table.atkspd td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
table.atkspd td:first-child{color:var(--gold2);font-weight:700;width:34%}
table.atkspd td:not(:first-child){color:var(--txt-dim);font-variant-numeric:tabular-nums}
table.atkspd td b{color:#fff;font-size:15px}
table.atkspd tr:last-child td{border-bottom:0}
.atkspd-note{margin-top:8px;font-size:12px;color:var(--txt-dim);line-height:1.7}

/* 💰 道具附加資訊列（賣店價等） */
.item-extra{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:10px;padding:9px 12px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:10px;font-size:14px}
.item-extra .ie-k{color:var(--txt-dim)}
.item-extra .ie-v{color:#fde047;font-weight:700;font-variant-numeric:tabular-nums}

/* 🔨🏪🧩 取得方式區塊（製作配方 / 商店販售 / 可用來製作） */
.acq-box{margin-top:12px;padding:11px 14px;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:11px}
.acq-h{font-size:13.5px;font-weight:700;color:var(--gold);margin-bottom:6px}
.acq-list{margin:0;padding-left:20px;font-size:14px;line-height:1.9;color:var(--txt)}
.acq-list li{margin:3px 0}
.acq-line{font-size:14px;line-height:1.9;color:var(--txt)}
.acq-box a{color:var(--gold2);text-decoration:none;border-bottom:1px dotted rgba(230,194,122,.45)}
.acq-box a:hover{color:#fff;border-bottom-color:#fff}
.acq-dim{color:var(--txt-dim);font-size:12.5px}

/* 🎁 寶箱內容表 */
table.acq-tbl{width:100%;margin-top:4px;border-collapse:collapse;font-size:14px}
table.acq-tbl td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
table.acq-tbl tr:last-child td{border-bottom:0}
table.acq-tbl td.acq-pct{text-align:right;width:22%;color:var(--gold2);font-weight:700;font-variant-numeric:tabular-nums}

/* 🖤 潘朵拉黑市上架價 */
.bm-rare{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:linear-gradient(180deg,#7c3aed,#5b21b6);color:#ede9fe;vertical-align:1px}

/* 🏛️ 伺服器版本切換(懷舊服 / 經典服)。兩顆各自成形、中間留空,目前所在的那版填滿反白。 */
.srv-switch{display:inline-flex;gap:8px;margin-left:16px;flex:none}
.srv-switch .srv-sw{display:inline-block;padding:8px 18px;border:1.5px solid var(--line);border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--txt-dim);white-space:nowrap;line-height:1.15;transition:background .15s,color .15s,border-color .15s}
.srv-switch .srv-sw:hover{color:#fff;border-color:var(--gold);background:var(--panel2)}
.srv-switch .srv-sw.on{color:#1a1206;background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,197,106,.16)}
.srv-switch .srv-sw.on:hover{color:#1a1206;background:var(--gold)}
@media (max-width:760px){.srv-switch{margin-left:10px;gap:6px}.srv-switch .srv-sw{padding:6px 13px;font-size:13.5px}}


/* 紅獅傳說官網美工優化 · 2026-10-05 */
:root {
  --bg:#111315; --bg2:#171a1d; --panel:#1b1e21; --panel2:#24272a;
  --line:#494036; --line-soft:rgba(209,177,123,.22);
  --gold:#dbbc82; --gold-dim:#b69a6b; --txt:#f0ece4; --txt-dim:#bcb8b0;
  --red:#842c31; --red-hi:#b84a47;
}
html, body { background:var(--bg); }
body::before { background:linear-gradient(180deg,#111315,#17191b 60%,#111315); }
body::after { display:none; }
body { line-height:1.8; }
.wrap { padding-inline:28px; }
a, button, input, select { -webkit-tap-highlight-color:transparent; }
:is(a,button,input,select):focus-visible { outline:2px solid #f1d29b; outline-offset:4px; }
.nav { background:rgba(17,19,21,.97); box-shadow:0 4px 20px #0003; }
.nav-inner { gap:12px; padding:16px 28px 0; }
.brand { font-size:20px; letter-spacing:.04em; }
.brand small { color:var(--txt-dim); letter-spacing:.06em; }
.srv-switch { margin-left:24px; gap:0; padding:3px; border:1px solid var(--line); border-radius:5px; background:#0e1012; }
.srv-switch .srv-sw { border:0; border-radius:3px; padding:9px 17px; font-size:14px; letter-spacing:0; }
.srv-switch .srv-sw.on { box-shadow:none; background:#d8b67a; }
.nx-slog-corner { top:20px!important; right:24px!important; }
.nav-links { flex-basis:100%; margin-top:12px; border-top:1px solid var(--line-soft); justify-content:center; }
.nav-links>a, .nav-groupbtn { padding:18px 13px; font-size:15px; }
.nav-links .nav-cta { margin-block:9px; padding:10px 18px!important; border-radius:3px; }
.nav-links .nav-cta[href="topup.html"] { background:transparent!important; color:var(--gold)!important; border-color:var(--line)!important; box-shadow:none; }
.nav-dropdown { max-height:70vh; overflow:auto; border-radius:4px; background:#181b1e; padding:8px; }
.nav-dropdown a { color:#e0d6c5; font-size:15px; }
.nav-group:focus-within .nav-dropdown, .nav-group.open .nav-dropdown { display:flex; }
.hero-premium { min-height:640px; padding:0; }
.hero-premium .hero-bg { background-position:65% center; }
.hero-premium::after { background:linear-gradient(90deg,rgba(12,15,18,.95),rgba(12,15,18,.72) 37%,rgba(12,15,18,.08) 73%),linear-gradient(0deg,#111315,transparent 36%); }
.hero-premium .hero-layout { max-width:1280px; grid-template-columns:minmax(0,1fr) 230px; padding:72px 28px 60px; gap:60px; }
.hero-inner::before { display:none; }
.hero-overline { color:#efe7db; font-family:var(--font-title); font-size:22px; letter-spacing:.2em; margin-bottom:10px; }
.hero-premium .hero-copy h1 { max-width:none; font-size:clamp(58px,6.8vw,94px); line-height:1.2; letter-spacing:.06em; color:#efd8a8; margin-bottom:20px; white-space:nowrap; text-shadow:0 3px 25px #0008; }
.hero-premium .tag { border:0; padding:0; font-family:var(--font-title); font-size:24px; font-weight:500; margin-bottom:14px; }
.hero-premium .sub { max-width:510px; margin:0 0 24px; color:#dedad2; font-size:16px; line-height:1.9; }
.hero-badges { margin:0 0 22px; gap:0; }
.hero-badges .badge { padding:0 13px; border:0!important; border-right:1px solid #81705b!important; background:none!important; color:#d6c4a5!important; font-size:13px!important; letter-spacing:.04em; }
.hero-badges .badge:first-child { padding-left:0; }
.hero-badges .badge:last-child { border:0!important; }
.btn { border-radius:4px; transition:background .15s,border-color .15s; }
.btn-primary { background:linear-gradient(#96393c,#77272c); color:#fff0da; border:1px solid #c17b68; box-shadow:0 4px 16px #0004; }
.btn-primary:hover { background:#a44343; color:#fff; transform:none; box-shadow:0 4px 16px #0004; }
.btn-ghost { background:#11131580; border-color:#968063; color:#eee4d4; }
.hero-version { margin-top:18px!important; letter-spacing:0; color:#c5bbaa!important; }
.hero-anthem { max-width:230px; margin:0; align-self:end; background:#131619d9; border:1px solid #8b7350; padding:14px; border-radius:4px; }
.hero-anthem::before { display:none; }
.hero-anthem-head { display:block; margin-bottom:12px; }
.hero-anthem-head>span { font-size:12px; letter-spacing:.04em; color:#cfb78e; }
.hero-anthem-head h2 { font-size:22px; margin:3px 0; }
.hero-anthem-head p { font-size:12px; color:#c5bfb5; }
.hero-anthem .anthem-player video { width:100%; max-height:270px; }
.campaign-ledger { background:#1a1d20; }
.campaign-ledger-inner>div { padding:24px 28px; gap:2px 12px; }
.campaign-ledger span { font-size:19px; color:#c49e68; padding-top:2px; letter-spacing:0; }
.campaign-ledger strong { font-size:18px; }
.campaign-ledger small { font-size:13px; color:var(--txt-dim); }
section { padding:72px 0; }
.alt { background:#16191c; }
.sec-head { margin-bottom:34px; }
.sec-head .kicker { font-family:var(--font); font-size:13px; letter-spacing:.08em; text-transform:none; color:#c8a66f; }
.sec-head h2 { font-size:clamp(28px,3.2vw,40px); }
.sec-head p { color:var(--txt-dim); line-height:1.85; }
.grid { background:none; border:0; gap:18px; }
.card { background:#1d2023; border:1px solid var(--line-soft); border-radius:6px; padding:28px; min-height:0; }
.card::before { display:none; }
.card:hover { background:#24272a; transform:none; box-shadow:none; }
.card h3 { font-size:22px; }
.card p, .sys p, .feature .ftext p { color:#c4bfb6; line-height:1.85; }
.card .ico { width:44px; height:44px; display:grid; place-items:center; background:#382c26; color:var(--gold); border-radius:5px; margin-bottom:18px; filter:none; }
.rl-highlights .card:last-child { grid-column:1/-1; display:grid; grid-template-columns:44px 180px 1fr; align-items:center; gap:20px; }
.rl-highlights .card:last-child :is(.ico,h3,p) { margin:0; }
.rl-start .card { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding-top:28px; }
.rl-start .card .ico { margin-inline:auto; background:none; font-size:32px; }
.sys, .cls-card, .dex-card, .item-card, .acc, .tbl-scroll, .feature .fmedia { background:#1b1e21; border-color:var(--line-soft); border-radius:6px; }
.filters { gap:12px; }
.filters :is(input,select), .chip { background:#1d2023; border-color:#71614b; color:#ece5d8; border-radius:4px; min-height:44px; }
.dex-card .d-meta, .item-card .i-meta { color:#c5bfb5; }
th { background:#272624; color:#e3c48d; }
td { border-color:var(--line-soft); }
.pbanner { background:#171a1d; }
.pbanner-inner { padding-top:54px; padding-bottom:54px; }
.pbanner h1 { font-size:clamp(32px,4vw,48px); }
.poster-item { border-radius:6px; border-color:#766244; box-shadow:none; }
.poster-item figcaption { padding:54px 20px 22px; }
.poster-item figcaption strong { font-size:24px; }
footer { background:#0f1113; }
.foot { gap:32px; }
.foot p, .foot a, .foot-bottom { color:#bdb7ac; }
@media (min-width:1141px) and (max-width:1260px) {
  .nav-links>a, .nav-groupbtn { padding-inline:9px; font-size:14px; }
  .nav-links .nav-cta { margin-left:8px!important; padding-inline:12px!important; }
}
@media (max-width:1140px) {
  .nav-inner { padding:12px 20px; gap:10px; min-height:76px; }
  .nav-links { position:absolute; top:100%; margin:0; border-top:0; visibility:hidden; pointer-events:none; transform:none; transition:none; max-height:calc(100dvh - 150px); justify-content:flex-start; background:#171a1d; }
  .nav-links.open { visibility:visible; pointer-events:auto; transform:none; }
  .nav-links>a, .nav-groupbtn { padding:14px 12px; font-size:16px; }
  .nav-dropdown { max-height:none; }
  .nav-group:focus-within .nav-dropdown { display:none; }
  .nav-group.open .nav-dropdown { display:flex; }
  .burger { border-radius:4px; width:44px; height:44px; }
  .nx-slog-corner { display:none!important; }
  .srv-switch { margin-left:8px; }
}
@media (max-width:980px) {
  .hero-premium .hero-layout { grid-template-columns:minmax(0,1fr) 200px; gap:28px; padding-block:60px; }
  .hero-premium .hero-copy h1 { font-size:clamp(50px,7vw,72px); }
  .hero-premium { min-height:0; }
  .hero-anthem { max-width:200px; }
  .campaign-ledger-inner { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
  .nav-inner { display:grid; grid-template-columns:1fr 44px; gap:10px; padding:12px 18px; }
  .nav .brand { grid-column:1; width:auto; max-width:none; font-size:18px; flex:auto; gap:9px; }
  .nav .brand>span:last-child { width:auto; flex:auto; }
  .nav .brand small { font-size:10px; }
  .nav .brand .mark { width:36px; height:36px; }
  .burger { grid-column:2; grid-row:1; margin:0; }
  .srv-switch { grid-column:1; grid-row:2; justify-self:start; margin:0; }
  .srv-switch .srv-sw { padding:7px 14px; font-size:13px; }
  .nx-fb-brand, .nx-ask-lion { display:none!important; }
  .nav-links { position:absolute; }
  .hero-premium .hero-layout { grid-template-columns:1fr; gap:32px; padding:44px 22px 36px; }
  .hero-premium .hero-bg { background-position:66% top; opacity:1; }
  .hero-premium::after { background:linear-gradient(90deg,#111315dc,#11131555),linear-gradient(0deg,#111315 2%,#11131540 80%); }
  .hero-overline { font-size:18px; margin-bottom:12px; }
  .hero-premium .hero-copy h1 { font-size:clamp(42px,11vw,65px); letter-spacing:.035em; margin-bottom:18px; }
  .hero-premium .tag { font-size:20px; line-height:1.6; }
  .hero-premium .sub { font-size:15px; }
  .hero-premium .btn-row { display:grid; grid-template-columns:1fr; gap:10px; }
  .hero-premium .btn { width:100%; justify-content:center; }
  .hero-badges { margin-bottom:22px; }
  .hero-anthem { display:grid; grid-template-columns:1fr 94px; align-items:center; gap:14px; max-width:none; width:100%; padding:16px; }
  .hero-anthem-head { margin:0; }
  .hero-anthem-head h2 { font-size:23px; }
  .hero-anthem .anthem-player { margin:0; width:94px; }
  .hero-anthem .anthem-player video { max-height:155px; }
  .campaign-ledger-inner>div { padding:20px 18px; }
  .campaign-ledger strong { font-size:16px; }
  .campaign-ledger small { font-size:11px; }
  .wrap { padding-inline:20px; }
  section { padding:48px 0; }
  .sec-head { margin-bottom:28px; }
  .card { padding:24px; }
  .rl-highlights .card:last-child { display:block; }
  .rl-highlights .card:last-child .ico { margin-bottom:18px; }
  .rl-highlights .card:last-child h3 { margin-bottom:.5em; }
  .poster-item figcaption strong { font-size:20px; }
  .foot { gap:26px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}