/* 《無限煉製》設計系統（取自遊戲 CSS）：配色、稀有度色、字體 */
:root {
  --bg: #140f0a; --bg2: #1c1610; --panel: #221a12; --panel2: #2c2217; --panel-2: #2c2217; --panel-raise: #34281a;
  --border: #4a3925; --border-soft: #3a2c1c;
  --text: #f2e6cf; --muted: #b39c76; --faint: #806b4c;
  --gold: #e0b155; --gold-bright: #f7d183;
  --ember: #ff7f38; --ember-deep: #d8421f;
  --arcane: #a883ff; --arcane-deep: #6b4fd8;
  --danger: #e8654f; --ok: #74cf82; --good: #74cf82; --bad: #e8654f;
  --r1: #b3a488; --r2: #6fbf74; --r3: #5aa9ff; --r4: #c88bff; --r5: #f7d183; --r6: #8ee8ff;
  --serif: "Songti TC", "Noto Serif TC", "STSong", "Source Han Serif TC", "Times New Roman", serif;
  --sans: -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% -10%, #3a2414 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6;
}
button { font: inherit; color: inherit; cursor: pointer; }

/* 滾動條：細、深棕軌道、金色把手（Firefox 用 scrollbar-*，Chrome／Edge 用 ::-webkit-scrollbar） */
* { scrollbar-width: thin; scrollbar-color: #6b5233 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #5a4329; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; }
h1, h2, h3 { font-family: var(--serif); margin: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ---------- 首頁 ---------- */
.home { max-width: 760px; margin: 0 auto; padding: 56px 16px 80px; text-align: center; }
.home .kicker { color: var(--muted); letter-spacing: .2em; font-size: 13px; }
.home h1 { font-size: clamp(36px, 7vw, 60px); font-weight: 900; color: var(--gold-bright); margin: 10px 0 6px; text-shadow: 0 0 30px rgba(255,127,56,.25); }
.home .lead { font-family: var(--serif); font-size: clamp(18px, 3.4vw, 24px); margin: 18px 0 34px; }
.counter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 auto 28px; max-width: 520px; }
.counter div { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.counter b { display: block; font-family: var(--serif); font-size: 32px; color: var(--gold); }
.counter b.ember { color: var(--ember); }
.curve-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 0 auto 28px; max-width: 560px; text-align: left; }
.modes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.mode { border: 1px solid var(--border); background: var(--panel); border-radius: 10px; padding: 10px 16px; text-align: left; max-width: 260px; }
.mode.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.mode small { display: block; color: var(--muted); }
.cta { background: linear-gradient(180deg, var(--ember), var(--ember-deep)); border: 0; border-radius: 999px; padding: 14px 36px; font-weight: 700; font-size: 18px; color: #fff; box-shadow: 0 6px 24px rgba(216,66,31,.35); }
.cta.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); box-shadow: none; }
.note { margin-top: 26px; font-size: 13px; color: var(--faint); }

/* ---------- 工坊登記卡 ---------- */
.reg { max-width: 560px; margin: 40px auto; padding: 0 16px; }
.card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.reg .head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--border); padding-bottom: 10px; margin-bottom: 14px; }
.reg .head span { font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.reg h2 { font-size: 30px; color: var(--gold-bright); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fields dt { font-size: 12px; color: var(--muted); }
.fields dd { margin: 0; font-weight: 500; }
.peerlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 13px; background: rgba(0,0,0,.2); }
.reg .actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* ---------- 進行畫面 ---------- */
.bar { position: sticky; top: 0; z-index: 5; background: rgba(20,15,10,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bar .age { font-family: var(--serif); font-size: 30px; font-weight: 900; color: var(--gold-bright); line-height: 1; }
.bar .age small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.bar .meta { font-size: 13px; color: var(--muted); }
.bar .prog { flex: 1; min-width: 140px; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.bar .prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--ember)); }
.ctrls { display: flex; gap: 6px; flex-wrap: wrap; }
.ctrls button { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.ctrls button.on { border-color: var(--gold); color: var(--gold-bright); }

.layout { display: grid; grid-template-columns: 280px 1fr 300px; gap: 14px; padding: 14px 16px 40px; max-width: 1400px; margin: 0 auto; }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.box h3 { font-size: 15px; color: var(--gold); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.box h3 small { font-family: var(--sans); font-size: 12px; color: var(--faint); font-weight: 400; }

.idcard .name { font-family: var(--serif); font-size: 22px; color: var(--gold-bright); }
.idcard .row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dotted rgba(74,57,37,.6); }
.idcard .row span:first-child { color: var(--muted); }
.stars { color: var(--gold); letter-spacing: 2px; }
.stat { margin: 8px 0; }
.stat .lbl { display: flex; justify-content: space-between; font-size: 13px; }
.stat .track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.stat .track i { display: block; height: 100%; transition: width .4s; }
.brink { background: rgba(216,66,31,.15); border: 1px solid var(--ember-deep); color: var(--bad); border-radius: 10px; padding: 10px 12px; font-size: 14px; }

.focus { display: flex; flex-wrap: wrap; gap: 6px; }
.focus button { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.focus button.on { border-color: var(--gold); color: var(--gold-bright); }
.focus .today { font-size: 13px; color: var(--muted); margin-top: 8px; }

.log { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 260px); overflow-y: auto; }
.log li { padding: 6px 2px; border-bottom: 1px solid rgba(74,57,37,.45); font-size: 14px; display: grid; grid-template-columns: 50px 1fr; gap: 8px; }
.log li .d { color: var(--faint); font-size: 12px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.log li.world .t { color: var(--gold-bright); font-family: var(--serif); font-weight: 700; }
.log li.official .t { color: var(--gold); }
.log li.official .t::before { content: "📢 "; }
.log li.result .t { color: var(--gold-bright); }
.log li.result .t::before { content: "🏆 "; }
.log li.good .t { color: var(--good); }
.log li.bad .t { color: var(--bad); }
.log li.choice .t { color: var(--arcane); }
.log li.brink .t { color: var(--ember); font-family: var(--serif); font-size: 16px; }
.log li.quit .t, .log li.end .t { color: var(--ember); font-weight: 700; }
.log li.start .t { color: var(--muted); }
.log li.new { animation: fadein .5s; }
@keyframes fadein { from { background: rgba(224,177,85,.12); } to { background: transparent; } }

.peers li { list-style: none; display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; border-bottom: 1px dotted rgba(74,57,37,.6); }
.peers ul { margin: 0; padding: 0; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-right: 6px; }
.dot.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
.server .hl { font-family: var(--serif); color: var(--gold-bright); margin-bottom: 6px; }
.server ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }

.gold { color: var(--gold-bright); font-weight: 700; }
.titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.title { font-size: 12px; border-radius: 6px; padding: 2px 8px; border: 1px solid var(--border); background: rgba(0,0,0,.25); }
.title.t-鑽石 { border-color: #9fe7ff; color: #c8f3ff; box-shadow: 0 0 10px rgba(159,231,255,.35); }
.title.t-紫色 { border-color: var(--arcane); color: #cdb8ff; }
.title.t-藍色 { border-color: #5aa2ff; color: #a9cdff; }
.title.t-綠色 { border-color: #5fbf6a; color: var(--good); }
.title.t-專屬 { color: var(--muted); }
table.evt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.evt td { padding: 5px 4px; border-bottom: 1px dotted rgba(74,57,37,.6); vertical-align: top; }
table.evt td.rk { text-align: right; white-space: nowrap; color: var(--gold-bright); }
table.board td:first-child { white-space: nowrap; color: var(--muted); }
table.board td:last-child { font-size: 12px; }

/* ---------- 抉擇 ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal { max-width: 520px; width: 100%; background: linear-gradient(180deg, #2c2016, var(--panel)); border: 1px solid var(--arcane-deep); border-radius: 14px; padding: 22px; box-shadow: 0 0 40px rgba(107,79,216,.3); }
.modal .tag { font-size: 12px; color: var(--arcane); letter-spacing: .15em; }
.modal h2 { font-size: 24px; margin: 6px 0 10px; color: var(--text); }
.modal p { color: var(--muted); }
.modal .opts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.modal .opts button { text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.modal .opts button:hover { border-color: var(--arcane); }
.modal .auto { margin-top: 12px; font-size: 13px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.modal .countdown { height: 3px; background: var(--arcane); margin-top: 10px; transition: width 1s linear; }

/* ---------- 退坑紀錄 ---------- */
.ending { max-width: 640px; margin: 40px auto 80px; padding: 0 16px; }
.record { border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, #2a1f15, #1a130d); padding: 26px; position: relative; overflow: hidden; }
.record::after { content: "退坑"; position: absolute; right: 18px; top: 14px; font-family: var(--serif); font-size: 46px; font-weight: 900; color: rgba(216,66,31,.18); transform: rotate(12deg); }
.record.alive::after { content: "還在"; color: rgba(143,209,139,.18); }
.record .label { font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.record h2 { font-size: 34px; color: var(--gold-bright); margin: 6px 0; }
.record .span { font-family: var(--serif); color: var(--muted); }
.record .quote { font-family: var(--serif); font-size: 22px; color: var(--ember); margin: 18px 0; }
.record .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 14px; }
.record .grid dt { font-size: 12px; color: var(--muted); }
.record .grid dd { margin: 0; }
.record .big { font-family: var(--serif); font-size: 18px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ending .actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 1100px) { .layout { grid-template-columns: 260px 1fr; } .layout .right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; padding: 10px 12px 40px; }
  .layout .right { grid-template-columns: 1fr; }
  .log { max-height: none; }
  .fields, .record .grid { grid-template-columns: 1fr; }
  .bar { gap: 10px; }
}

/* ===== v3：遊戲風格頂部列、時段、活動實況、路徑、名冊卡 ===== */
.topbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: rgba(20,15,10,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #1d1610; border: 1px solid var(--border); font-size: 15px; }
.pill i { font-style: normal; }
.pill b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill.soul b { color: #cdb8ff; }
.pills.big .pill { font-size: 16px; padding: 8px 16px; }
.when { display: flex; flex-direction: column; line-height: 1.2; }
.when b { font-family: var(--serif); font-size: 22px; color: var(--gold-bright); }
.when span { font-size: 12px; color: var(--muted); }
.topbar .ctrls { margin-left: auto; }

.slots { position: relative; display: flex; justify-content: space-between; gap: 6px; padding: 8px 16px 10px; max-width: 1400px; margin: 0 auto; }
.slots span { flex: 1; text-align: center; font-size: 13px; color: var(--faint); padding: 6px 0; border-radius: 8px; transition: color .4s, background .4s; }
.slots span.past { color: var(--muted); }
.slots span.on { color: var(--gold-bright); background: rgba(224,177,85,.12); box-shadow: inset 0 0 0 1px rgba(224,177,85,.35); }
.slotprog { position: absolute; left: 16px; bottom: 4px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--ember)); transition: width .8s ease; max-width: calc(100% - 32px); }

.live { min-height: 210px; border-color: #5a4329; background: linear-gradient(180deg, #2a1f15, var(--panel)); }
.lv-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lv-head b { font-family: var(--serif); color: var(--gold-bright); font-size: 17px; }
.lv-step { margin: 6px 0 10px; }
.lv-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.gauge { position: relative; height: 26px; border-radius: 999px; background: #1a130d; border: 1px solid var(--border); overflow: hidden; }
.gauge i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3f8f8a, #7fe0d6); transition: width 1.4s ease-out; }
.gauge span { position: absolute; right: 10px; top: 2px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge em { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); opacity: .8; }
.duel { position: relative; height: 30px; border-radius: 999px; background: #5a2a2a; overflow: hidden; border: 1px solid var(--border); }
.duel i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold), var(--ember)); transition: width 1.4s ease-in-out; }
.duel span { position: absolute; top: 4px; font-weight: 700; }
.duel .l { left: 12px; } .duel .r { right: 12px; }
.duel.faction { background: #2f3d6b; }
.grid-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 4px; }
.grid-prog i { aspect-ratio: 1; border-radius: 4px; background: #1a130d; border: 1px solid var(--border); transition: background .3s, box-shadow .3s; }
.grid-prog i.on { background: var(--gold); box-shadow: 0 0 8px rgba(224,177,85,.5); }
.lv-out { min-height: 26px; margin-top: 10px; font-weight: 700; }
.lv-out .ok { color: var(--good); } .lv-out .ng { color: var(--bad); }
.lv-cost { font-size: 12px; margin-top: 4px; }
.log li.pay .t { color: #cdb8ff; }
.log li.pay .t::before { content: "💎 "; }
.log li.event .t { color: var(--gold); }

.sec { font-family: var(--serif); color: var(--gold); margin: 28px 0 12px; font-size: 20px; }
.path { list-style: none; margin: 0; padding: 0 0 0 8px; position: relative; }
.path::before { content: ""; position: absolute; left: 25px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), var(--border)); }
.path li { position: relative; display: grid; grid-template-columns: 36px 52px 1fr; align-items: start; gap: 8px; padding: 7px 0; }
.path .pdot { z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #221a12; border: 1px solid var(--border); font-size: 16px; }
.path .pdate { color: var(--faint); font-size: 12px; padding-top: 8px; font-variant-numeric: tabular-nums; }
.path .ptext { padding: 6px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 14px; }
.path li.title .ptext { border-color: currentColor; }
.path li.t-鑽石 { color: #c8f3ff; } .path li.t-金 { color: var(--gold-bright); } .path li.t-紫 { color: #cdb8ff; } .path li.t-藍 { color: #a9cdff; } .path li.t-綠 { color: var(--good); } .path li.t-銅 { color: #d6a77a; }
.path li.brink .ptext, .path li.quit .ptext { color: var(--ember); border-color: var(--ember-deep); }
.path li.pay .ptext { color: #cdb8ff; }
.path li.alive .ptext { color: var(--good); border-color: #5fbf6a; }
.title.t-金 { border-color: var(--gold); color: var(--gold-bright); }
.title.t-紫 { border-color: var(--arcane); color: #cdb8ff; }
.title.t-藍 { border-color: #5aa2ff; color: #a9cdff; }
.title.t-綠 { border-color: #5fbf6a; color: var(--good); }
.title.t-銅 { border-color: #9a6b44; color: #d6a77a; }

.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.board-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.bc-head { display: flex; flex-direction: column; margin-bottom: 8px; }
.bc-head b { color: var(--gold); font-family: var(--serif); }
.bc-head span { font-size: 12px; }
.brow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; margin: 6px 0; border-radius: 10px; background: #2a2017; border: 1px solid var(--border); }
.brow .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .who small { margin-left: 6px; font-size: 11px; color: #1b130c; background: var(--gold); border-radius: 4px; padding: 0 5px; }
.brow .val { color: var(--gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.brow.me { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 16px rgba(224,177,85,.18); }
.brow.gap { display: block; text-align: center; color: var(--faint); background: none; border: none; padding: 0; margin: 0; }
.medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1b130c; }
.medal.m1 { background: linear-gradient(#ffd977, #d99a1c); } .medal.m2 { background: linear-gradient(#e6e9f5, #9aa3c0); } .medal.m3 { background: linear-gradient(#e7a777, #a8602f); }
.num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--muted); border: 1px solid var(--border); }
.bc-foot { font-size: 13px; color: var(--muted); margin-top: 6px; }
.bc-foot b { color: var(--gold-bright); }
details.box summary { cursor: pointer; color: var(--gold); }
@media (max-width: 720px) { .topbar .ctrls { margin-left: 0; } .slots span { font-size: 11px; } .path li { grid-template-columns: 36px 44px 1fr; } }

/* ===== v4：精簡結局 ===== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.kpis div { background: #1d1610; border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.kpis b { display: block; font-family: var(--serif); font-size: 22px; color: var(--gold-bright); }
.kpis span { font-size: 12px; color: var(--muted); }
.tiers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tiers .title { font-size: 14px; padding: 4px 12px; }
.bestev { margin-top: 12px; font-size: 14px; color: var(--muted); }
.boardlist .brow .who small { display: block; margin: 2px 0 0; background: none; padding: 0; font-weight: 400; font-size: 12px; color: var(--faint); }
@media (max-width: 720px) { .kpis { grid-template-columns: repeat(2, 1fr); } }

/* ===== 遊戲分頁列（照《無限煉製》的導覽列） ===== */
.gtabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 1400px; margin: 8px auto 0; padding: 0 16px; }
.gtabs span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; border-radius: 12px; color: var(--muted); font-size: 15px; border: 1px solid transparent; transition: all .35s; }
.gtabs span i { font-style: normal; filter: grayscale(.6) brightness(.9); transition: filter .35s; }
.gtabs span.on { color: var(--text); font-weight: 700; background: linear-gradient(180deg, #3a2c1a, #2a2015); border-color: #6b5233; box-shadow: inset 0 -2px 0 var(--gold), 0 4px 14px rgba(0,0,0,.35); }
.gtabs span.on i { filter: none; }
@media (max-width: 720px) { .gtabs span { font-size: 12px; gap: 4px; padding: 8px 0; } }

/* ===== 照遊戲元件：頂部 .stats .stat、導覽 .tabs ===== */
.stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.stats .stat { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #34281ab3, #221a12b3); border: 1px solid var(--border-soft); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats .stat b { font-weight: 500; }
.stats .stat .fa-solid { font-size: 13px; }
.stats .stat.gold .fa-solid { color: var(--gold); }
.stats .stat.bag .fa-solid { color: var(--r3); }
.stats .stat.soul .fa-solid { color: var(--r4); }
.stats .stat.mana .fa-solid { color: var(--arcane); }
.tabs { display: flex; gap: 7px; padding: 6px 16px 3px; max-width: 1400px; margin: 0 auto; }
.tabs > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--panel2), var(--panel)); color: var(--muted); border-radius: 13px; padding: 7px 2px; font-size: 12px; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.tabs > span .fa-solid { font-size: 16px; }
.tabs > span.on { color: var(--gold-bright); border-color: var(--gold); background: linear-gradient(180deg, #e0b15529, #d8421f14); box-shadow: 0 0 0 1px #e0b15540 inset, 0 4px 14px #0000004d; font-weight: 700; }
.slots span .fa-solid { margin-right: 4px; }
.log li .d .fa-solid { font-size: 11px; margin-right: 2px; color: var(--faint); }
.log li.official .t::before { content: "\f0a1"; font-family: "Font Awesome 7 Free"; font-weight: 900; margin-right: 6px; color: var(--gold); }
.log li.result .t::before { content: "\f091"; font-family: "Font Awesome 7 Free"; font-weight: 900; margin-right: 6px; color: var(--gold-bright); }
.log li.pay .t::before { content: "\f3a5"; font-family: "Font Awesome 7 Free"; font-weight: 900; margin-right: 6px; color: var(--r4); }
.path .pdot .fa-solid { font-size: 14px; color: var(--gold); }
.path li.brink .pdot .fa-solid, .path li.quit .pdot .fa-solid { color: var(--ember); }
.path li.alive .pdot .fa-solid { color: var(--ok); }
.kpis div .fa-solid { display: block; color: var(--gold); font-size: 16px; margin-bottom: 6px; }
.brow .who .fa-solid { color: var(--gold); margin-right: 4px; }
/* 稱號稀有度色（遊戲的 --r1～--r6） */
.title.t-鑽石, .path li.t-鑽石 { color: var(--r6); border-color: var(--r6); }
.title.t-金, .path li.t-金 { color: var(--r5); border-color: var(--r5); }
.title.t-紫, .path li.t-紫 { color: var(--r4); border-color: var(--r4); }
.title.t-藍, .path li.t-藍 { color: var(--r3); border-color: var(--r3); }
.title.t-綠, .path li.t-綠 { color: var(--r2); border-color: var(--r2); }
.title.t-銅, .path li.t-銅 { color: var(--r1); border-color: var(--r1); }

/* ===== 照遊戲：挑戰頁 quest-*、儲值頁 soul-bar / pack-card、月卡 mc-*、限時禮包 sp-* ===== */
.quest-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 18px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(120% 70% at 50% -20%, rgba(255,127,56,.09), transparent 62%), linear-gradient(180deg, var(--panel2), var(--panel)); }
.quest-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.quest-badge { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--gold-bright); }
.quest-desc { font-size: 12px; }
.quest-progress-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #00000038; }
.quest-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quest-progress-label { font-size: 12px; color: var(--muted); }
.quest-progress-num { font-size: 26px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; line-height: 1; }
.quest-progress-unit { font-size: 12px; color: var(--muted); }
.quest-bar { display: block; height: 8px; border-radius: 99px; background: #00000073; overflow: hidden; }
.quest-bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ember-deep), var(--gold-bright)); transition: width .4s ease; }
.quest-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(120% 70% at 50% -20%, rgba(255,127,56,.07), transparent 62%), linear-gradient(180deg, var(--panel2), var(--panel)); }
.quest-row-emoji { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #0000004d; font-size: 22px; line-height: 1; }
.quest-row-emoji.big { width: 56px; height: 56px; font-size: 30px; border-radius: 16px; }
.quest-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quest-row-title { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quest-row-status { font-size: 11.5px; font-weight: 700; }
.live { min-height: 0; background: none; border: none; padding: 0; }
.live > h3 { padding: 0 2px; }
.lv-play { padding: 4px 2px 0; }

.ws-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ws-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #ff7f3855, #0000004d); color: var(--ember); font-size: 20px; }
.ws-sub { font-size: 12px; color: var(--muted); }
.ws-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ws-grid .quest-progress-box { gap: 4px; padding: 10px; }
.ws-grid .lbl { font-size: 12px; color: var(--muted); }
.ws-grid .lbl .fa-solid { color: var(--gold); }
.ws-grid .quest-progress-num { font-size: 20px; }
.ws-grid .unit { font-size: 11px; color: var(--faint); }
.ws-cash { margin-top: 10px; font-size: 13px; color: #d9ccff; }
.ws-cash .fa-solid { color: var(--r4); }

.pay-bg { background: rgba(8,5,3,.7); }
.modal.pay { max-width: 460px; border-color: rgba(150,120,240,.45); box-shadow: 0 24px 60px #00000080, 0 0 40px rgba(118,88,220,.25); animation: pay-in .32s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes pay-in { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.pay-title { font-family: var(--serif); font-size: 20px; color: var(--gold-bright); margin-bottom: 12px; }
.pay-title .fa-solid { color: #ff9a5a; }
.soul-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(150,120,240,.35); background: linear-gradient(180deg, #3c2e7847, #221a3459); }
.soul-balance { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: #d9ccff; }
.pack-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel2), var(--panel)); color: var(--text); transition: border-color .15s, filter .15s, transform .1s; }
.pack-card.hot { border-color: rgba(166,137,255,.6); box-shadow: 0 0 0 1px rgba(166,137,255,.25) inset; }
.pack-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pack-soul { display: block; font-size: 13px; color: #d9ccff; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pack-price { flex: 0 0 auto; font-size: 16px; font-weight: 800; color: var(--gold-bright); font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.pack-orig { display: block; font-size: 12px; font-weight: 600; color: var(--faint); text-decoration: line-through; }
.pack-badge { font-size: 11px; font-weight: 700; color: #efe7ff; background: linear-gradient(135deg, #6a54c8, #3d2c86); border-radius: 999px; padding: 2px 8px; }
.pack-bonus { font-size: 11px; font-weight: 800; color: #10201a; background: linear-gradient(135deg, #7fe0a3, #d8b455); border-radius: 999px; padding: 2px 8px; }
.pack-save { font-size: 11px; font-weight: 800; color: #2a1408; background: linear-gradient(135deg, #ff8a5c, #ffd24a); border-radius: 999px; padding: 2px 8px; }
.mc-card, .sp-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid #c8962866; background: linear-gradient(180deg, #4a3518, #2a1f12); }
.sp-card { border-color: #e0342f66; background: linear-gradient(180deg, #4a2018, #2a1512); }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-title { font-size: 15px; font-weight: 700; }
.mc-price { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: #f5d99a; }
.mc-perk { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: #efe7ff; }
.mc-perk .fa-solid { color: #f5d99a; margin-top: 3px; }
.mc-cta { padding: 9px 12px; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 800; color: #2a1e08; background: linear-gradient(135deg, #f6d68a, #e9b95c); box-shadow: 0 4px 14px #c8962859; transition: transform .1s, filter .1s; }
.sp-flag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff6a3d, #e0342f); box-shadow: 0 3px 10px #c8321e66; }
.sp-now { font-size: 22px; font-weight: 900; color: #ffd59a; font-variant-numeric: tabular-nums; }
.sp-cta { padding: 9px 12px; border-radius: 10px; text-align: center; font-size: 14.5px; font-weight: 800; color: #4a1608; background: linear-gradient(135deg, #ffcf87, #ff9a5a); box-shadow: 0 4px 14px #dc6e2866; transition: transform .1s, filter .1s; }
.pressed { transform: scale(.97); filter: brightness(1.15); }
.pay-done { min-height: 24px; margin-top: 14px; text-align: center; font-weight: 700; color: var(--ok); }

/* ===== 照遊戲：坩堝素材格 .slot、煉成結果 .result-modal、發現橫幅、市集 .listing ===== */
.craft-stage { display: flex; flex-direction: column; gap: 14px; }
.craft-stage .cslots { display: flex; align-items: stretch; gap: 10px; padding: 0; }
.craft-stage .slot { position: relative; flex: 1; min-height: 72px; border: 2px dashed var(--border); border-radius: 14px; background: radial-gradient(120% 90% at 50% 120%, rgba(255,127,56,.07), transparent 70%), var(--panel); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.craft-stage .slot .se { font-size: 26px; line-height: 1; }
.craft-stage .slot .sw { font-size: 13px; font-weight: 700; }
.craft-stage .plus { align-self: center; color: var(--gold); font-weight: 800; }
.crucible { text-align: center; color: var(--ember); padding: 18px; border-radius: 14px; background: radial-gradient(circle at 50% 120%, rgba(255,127,56,.25), transparent 70%); animation: glow 1.2s ease-in-out infinite alternate; }
@keyframes glow { from { filter: brightness(.9); } to { filter: brightness(1.25); } }
.card.result-modal { text-align: center; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: radial-gradient(120% 80% at 50% -10%, rgba(255,127,56,.08), transparent 60%), linear-gradient(180deg, var(--bg2), var(--panel)); box-shadow: 0 0 0 1px #e0b1551a inset; animation: pay-in .32s cubic-bezier(.2,.9,.3,1.25) both; }
.card.result-modal.first { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 54px #f7d18359; }
.card.result-modal.recipe { border-color: var(--arcane); box-shadow: 0 0 0 1px var(--arcane), 0 0 48px #a883ff52; }
.rm-body { display: flex; flex-direction: column; align-items: center; }
.rm-badge-row { margin-bottom: 8px; min-height: 24px; }
.rm-emoji { font-size: 56px; line-height: 1; margin: 6px 0 10px; }
.rm-emoji.pop { animation: emoji-pop .55s cubic-bezier(.2,.9,.3,1.5) both; }
.rm-emoji.spin { display: inline-block; animation: spin 2.4s linear infinite; }
@keyframes emoji-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.rm-word { font-size: 26px; font-weight: 800; margin-bottom: 6px; font-family: var(--serif); letter-spacing: 1px; }
.rm-desc { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.discover-banner { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.discover-banner.genesis { color: #2a1e08; background: linear-gradient(135deg, #f6d68a, #e9b95c); }
.discover-banner.recipe { color: #efe7ff; background: linear-gradient(135deg, #6a54c8, #3d2c86); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.gold { color: var(--gold-bright); border: 1px solid var(--gold); background: #e0b15522; }
.badge.recipe-badge { color: #d9ccff; border: 1px solid var(--arcane); background: #a883ff22; }
.badge.new { color: var(--ok); border: 1px solid #74cf8288; background: #74cf8218; }
.discovery-formula { display: flex; justify-content: center; align-items: center; color: var(--muted); font-size: 12px; font-weight: 600; flex-wrap: wrap; gap: 2px 6px; }
.listings { display: flex; flex-direction: column; gap: 8px; }
.listing { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; animation: pay-in .3s ease both; }
.listing-emoji { font-size: 26px; min-width: 26px; text-align: center; }
.listing-info { flex: 1; min-width: 0; }
.listing-word { font-weight: 700; font-family: var(--serif); }
.listing-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.listing-revenue { font-size: 13px; font-weight: 700; color: var(--gold-bright); display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* 中間的實況框固定高度：挑戰卡、工坊、市集切換時，下面的區塊不會跟著上下跳 */
#live { height: 440px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
#live > * { flex: 0 0 auto; }
@media (max-width: 720px) { #live { height: 480px; } }

/* ===== 儲值：自己點、模擬結帳 ===== */
.modal.shop { max-width: 520px; max-height: 88vh; overflow-y: auto; }
.shop-list { display: flex; flex-direction: column; gap: 8px; }
.pick { cursor: pointer; font: inherit; color: inherit; text-align: left; width: 100%; }
.pick:hover { filter: brightness(1.12); border-color: var(--gold); }
.pick.rec { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 18px rgba(224,177,85,.25); }
.rec-tag { font-size: 11px; font-weight: 800; color: #2a1e08; background: var(--gold); border-radius: 999px; padding: 2px 8px; }
.ghost.skip { display: block; width: 100%; margin-top: 12px; padding: 9px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); }
.checkout .co-item { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; padding: 12px 14px; border-radius: 12px; background: #0003; border: 1px solid var(--border-soft); }
.checkout .co-item b { font-size: 22px; color: var(--gold-bright); }
.co-sub { margin: 8px 2px 14px; font-size: 13px; color: #d9ccff; }
.co-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.co-methods { display: flex; gap: 8px; }
.co-m { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); }
.co-m.on { border-color: var(--gold); color: var(--gold-bright); background: #e0b15518; }
.co-card { margin: 10px 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border); font-size: 13px; }
.co-pay { width: 100%; padding: 13px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 800; color: #4a1608; background: linear-gradient(135deg, #ffcf87, #ff9a5a); box-shadow: 0 4px 14px #dc6e2866; }
.co-pay:disabled { opacity: .95; }
.co-status { min-height: 26px; margin-top: 12px; text-align: center; color: var(--muted); }
.co-status .ok { color: var(--ok); font-weight: 700; }