/* 《一條命勇闖異世界》官網
   配色依 docs/UI-STYLE.md 的「地城暖金」那一套（面板類介面用色）。
   這是獨立靜態站，不與遊戲的 style.css 共用檔案，但色票數值刻意抄同一份。 */

:root {
  --gold:    #e9c67f;
  --gold-lt: #fbeecd;
  --edge:    rgba(216, 168, 96, .46);
  --edge-sf: rgba(216, 168, 96, .20);
  --ink:     #f3e8d5;
  --dim:     #c1b096;
  --warm:    rgba(255, 168, 74, .16);
  --well:    rgba(6, 5, 4, .55);

  --bg:      #0a0907;
  --bg-2:    #100d0a;
  --panel:   #16120d;
  --rare:    #e9c67f;
  --uniq:    #b98b3e;

  --maxw:    1120px;
  --r:       10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
               "Heiti TC", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
/* 瀏覽器對 <figure> 的預設值是 margin: 1em 40px —— 不歸零的話每張圖
   左右各縮 40px，三欄並排時卡片只剩一半寬（2026-09-13 踩到）。 */
figure { margin: 0; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lt); text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ── 頂欄 ───────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 9, 7, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--edge-sf);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 54px; flex-wrap: wrap;
}
.brand {
  font-weight: 700; font-size: 17px; letter-spacing: .5px;
  color: var(--gold-lt); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.navlinks { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.navlinks a {
  padding: 6px 11px; border-radius: 7px; font-size: 14px;
  color: var(--dim); border: 1px solid transparent;
}
.navlinks a:not(.btn):hover, .navlinks a[aria-current]:not(.btn) {
  color: var(--gold-lt); background: var(--warm);
  border-color: var(--edge-sf); text-decoration: none;
}
/* 頂欄那顆鈕：`.navlinks a`（0,2,0）比 `.btn-main`（0,1,0）強，
   不補這兩條的話按鈕字會被染成 --dim，在金底上只有 1.9:1。 */
.navlinks a.btn    { color: var(--gold-lt); }
.navlinks a.btn-main { color: #241705; text-shadow: none; }
.navlinks a.btn:hover { text-decoration: none; }
.navlinks a.btn-main:hover { color: #120b02; }

/* ── 首屏 ───────────────────────────────────────────── */

/* 標題壓在上半部的天空（key art 天然的留白），下半部的小鎮與四名冒險者
   刻意留亮 —— 那一塊才是這張圖的內容。 */
.hero {
  position: relative; overflow: hidden;
  min-height: 78vh;
  display: flex; align-items: flex-start;
  border-bottom: 1px solid var(--edge-sf);
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 42%;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(10, 9, 7, .74) 0%, rgba(10, 9, 7, .40) 46%,
      rgba(10, 9, 7, .04) 74%, rgba(10, 9, 7, 0) 100%),
    linear-gradient(to bottom,
      rgba(10, 9, 7, .52) 0%, rgba(10, 9, 7, .24) 46%,
      rgba(10, 9, 7, .10) 70%, rgba(10, 9, 7, .58) 93%, var(--bg) 100%);
}
.hero-in { position: relative; z-index: 2; padding: 48px 0 96px; width: 100%; }

h1.title {
  margin: 0 0 6px;
  font-size: clamp(30px, 7vw, 58px);
  line-height: 1.18;
  letter-spacing: 1px;
  color: var(--gold-lt);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 26px rgba(255, 168, 74, .28);
}
.tagline {
  margin: 0 0 6px;
  font-size: clamp(17px, 3vw, 24px);
  color: var(--gold);
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
}
.subline {
  margin: 0 0 26px; max-width: 46em;
  color: var(--ink);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .95);
}

.btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--r);
  font-size: 16px; font-weight: 700;
  border: 1px solid var(--edge);
  background: linear-gradient(#2a2015, #17110a);
  color: var(--gold-lt);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 160, .12);
}
.btn:hover { text-decoration: none; border-color: var(--gold); color: #fff; }
.btn-main {
  background: linear-gradient(#e0b465, #b3822f);
  color: #241705; border-color: #f0d59a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-main:hover { color: #120b02; background: linear-gradient(#f2cd86, #c4923a); }
.btn-sm { padding: 9px 16px; font-size: 14px; font-weight: 600; }

.notefree { font-size: 13.5px; color: var(--dim); margin-top: 14px; }

/* ── 區塊 ───────────────────────────────────────────── */

section { padding: 54px 0; }
/* 跳到 #features / #gallery / #support 時，標題不要被 sticky 頂欄蓋住。
   手機的頂欄會折成三列，所以留得比桌機多。 */
section[id], [id="features"], [id="gallery"], [id="support"] { scroll-margin-top: 70px; }
section + section { border-top: 1px solid rgba(216, 168, 96, .10); }

h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 4vw, 31px);
  color: var(--gold-lt);
  letter-spacing: .5px;
}
.lead { margin: 0 0 30px; color: var(--dim); max-width: 52em; }

.eyebrow {
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); opacity: .85; margin: 0 0 4px;
}

/* 特色：圖＋文兩欄交錯 */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 32px; align-items: center;
  padding: 30px 0;
}
.feat + .feat { border-top: 1px dashed rgba(216, 168, 96, .16); }
.feat:nth-child(even) .feat-art { order: 2; }
.feat h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 3vw, 23px);
  color: var(--gold);
}
.feat p { margin: 0 0 10px; }
.feat p:last-child { margin-bottom: 0; }

.shot {
  border: 1px solid var(--edge-sf);
  border-radius: var(--r);
  background: var(--well);
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .55);
}
.shot img { width: 100%; height: auto; }
.cap { font-size: 13px; color: var(--dim); padding: 8px 12px; line-height: 1.6; }

.pair { display: grid; grid-template-columns: 1.8fr 1fr; gap: 14px; align-items: center; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trio .cap { text-align: center; padding: 7px 4px; font-size: 13px; }
.trio .cap b { color: var(--gold); display: block; font-size: 14.5px; }

.stack { display: grid; gap: 14px; }

/* 小標籤 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: 13px; padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--edge-sf); background: var(--well); color: var(--dim);
}
.chips li b { color: var(--gold); font-weight: 600; }

/* ── 畫面走廊 ───────────────────────────────────────── */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}
.gitem {
  border: 1px solid var(--edge-sf); border-radius: var(--r);
  background: var(--well); overflow: hidden; cursor: zoom-in;
  padding: 0; text-align: left; color: inherit; font: inherit;
  display: block; width: 100%;
}
.gitem:hover, .gitem:focus-visible { border-color: var(--gold); outline: none; }
.gitem img {
  /* height: auto 是必要的 —— <img height="..."> 的 presentational hint 會變成
     specified height，那時 aspect-ratio 整條被忽略，卡片就會變成超高的直條。 */
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
}
.gitem .cap { padding: 8px 11px; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5, 4, 3, .93);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.lb[open], .lb.on { display: flex; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lb img {
  max-width: min(1280px, 96vw); max-height: 82vh;
  width: auto; margin: 0 auto;
  border: 1px solid var(--edge); border-radius: var(--r);
}
.lb figcaption { color: var(--dim); font-size: 14px; margin-top: 10px; }
.lb-x {
  position: fixed; top: 14px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--panel);
  color: var(--gold-lt); font-size: 20px; cursor: pointer;
}

/* ── 面板／卡片 ─────────────────────────────────────── */

.card {
  border: 1px solid var(--edge-sf); border-radius: var(--r);
  background: linear-gradient(var(--panel), #0e0b08);
  padding: 22px 24px;
}
.card h3 { margin: 0 0 10px; color: var(--gold); font-size: 19px; }
.card p:last-child { margin-bottom: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* 支持我們 */
.support .card { background: linear-gradient(#1b150e, #0e0b08); }
.tierlist { margin: 0; padding-left: 1.25em; }
.tierlist li { margin-bottom: 6px; }
.tierlist b { color: var(--gold); }

/* 贊助牆 */
.wall-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px; margin-top: 18px;
}
.sponsor {
  border: 1px solid var(--edge-sf); border-radius: 8px;
  background: var(--well); padding: 11px 14px;
}
.sponsor .nm { color: var(--gold-lt); font-weight: 600; }
.sponsor .tt { font-size: 12.5px; color: var(--dim); }
/* 署名＋圖示：正方形小圖示，64×64，圓角，放在名字上方 */
.sponsor .ic { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; margin: 0 auto 6px; background: rgba(0,0,0,.25); }
.sponsor.has-ic { text-align: center; }
.tier-h {
  margin: 30px 0 0; font-size: 18px; color: var(--gold);
  border-bottom: 1px solid var(--edge-sf); padding-bottom: 6px;
}
.empty {
  border: 1px dashed var(--edge); border-radius: var(--r);
  background: var(--well); padding: 34px 22px; text-align: center;
  color: var(--dim);
}
.empty strong { display: block; color: var(--gold); font-size: 20px; margin-bottom: 6px; }

/* 更新記事 */
.news { display: grid; gap: 16px; }
.entry {
  border: 1px solid var(--edge-sf); border-radius: var(--r);
  background: linear-gradient(var(--panel), #0e0b08);
  padding: 18px 22px;
}
.entry h3 { margin: 0 0 4px; color: var(--gold-lt); font-size: 19px; }
.entry .ver {
  display: inline-block; font-size: 12.5px; letter-spacing: 1px;
  color: #241705; background: linear-gradient(#e0b465, #b3822f);
  border-radius: 99px; padding: 1px 11px; font-weight: 700; margin-bottom: 8px;
}
.entry ul { margin: 8px 0 0; padding-left: 1.25em; }
.entry li { margin-bottom: 4px; }

/* ── 頁尾 ───────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--edge-sf);
  background: #070605;
  padding: 34px 0 44px;
  color: var(--dim); font-size: 14px;
}
footer h4 { margin: 0 0 8px; color: var(--gold); font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
footer ul { margin: 0; padding: 0; list-style: none; }
footer li { margin-bottom: 4px; }
.todo { color: #8b7f6c; font-style: normal; }
.foot-end {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid rgba(216, 168, 96, .12);
  font-size: 13px; display: flex; gap: 14px; flex-wrap: wrap;
}

/* ── 手機 ───────────────────────────────────────────── */

@media (max-width: 820px) {
  .feat { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; }
  .feat:nth-child(even) .feat-art { order: 0; }
  .hero { min-height: 0; }
  .hero-in { padding: 44px 0 34px; }
  section { padding: 40px 0; }
  .trio { grid-template-columns: 1fr; }
  .btnrow > .btn:not(.btn-sm) { width: 100%; text-align: center; }
  .btnrow { gap: 10px; }
  /* 頂欄那顆鈕不要撐滿 */
  .navlinks .btn-sm { width: auto; }
  .gitem img { height: auto; aspect-ratio: 16 / 11; }
  section[id] { scroll-margin-top: 132px; }
}

@media (max-width: 480px) {
  body { font-size: 15.5px; }
  .pair { grid-template-columns: 1fr; }
  .card { padding: 18px 16px; }
  .navlinks a { padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 「立即遊玩」暫改「即將開放」（2026-09-13 使用者指示：先不開放遊戲連結） */
.btn-soon { opacity: .55; cursor: default; pointer-events: none; }
.soon { color: var(--m-dim, #c1b096); }