/* =============================================================
   雲端參天宮｜介面樣式（極簡、半透明、讓 3D 畫面當主角）
   深色玻璃膠囊（上方、下方工具列）＋米白紙感卡片（對話框）
   ============================================================= */
:root {
  --ink: #2b241d;
  --ink-soft: #6f6355;
  --paper: #f7f3ec;
  --paper-2: #efe8dc;
  --line: #e2d8c7;
  --red: #9e2a1e;
  --gold: #c9a24a;
  --glass: rgba(26, 21, 16, 0.52);
  --glass-line: rgba(255, 255, 255, 0.14);
  --radius: 999px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c1712; font-family: var(--sans); color: #fff; letter-spacing: .02em; }
#scene { position: fixed; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea { font: inherit; width: 100%; padding: 12px 14px; margin: 5px 0; border-radius: 12px;
  border: 1px solid var(--line); background: #fffdf9; color: var(--ink); outline: none; }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,.18); }
.hint { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 6px 0 10px; }
.hint.center { text-align: center; color: rgba(255,255,255,.6); margin-top: 14px; }
.small { font-size: 12px; }

/* ---------- 玻璃膠囊 ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13px; color: rgba(255,255,255,.92); white-space: nowrap; }
.pill.small { font-size: 12px; color: rgba(255,255,255,.75); }
.brand-name { font-family: var(--serif); font-size: 15px; letter-spacing: .2em; color: #fff; }
.sep { width: 1px; height: 14px; background: rgba(255,255,255,.25); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 8px #7bd88f; }
.pill.tools { padding: 0 4px; gap: 0; }
.tool { width: 36px; height: 36px; border: 0; background: transparent; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.9); }
.tool:hover, .tool.on { background: rgba(255,255,255,.12); }
.tool.off { opacity: .45; }

.topbar { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 12px) 14px 0; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.room-wrap { margin-left: auto; } /* 房間按鈕靠右 */
/* ---------- 右側快捷列（手遊式直排大按鈕） ---------- */
.side-rail { position: fixed; z-index: 10; right: 10px; top: calc(var(--safe-t) + 62px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rail-btn { position: relative; width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
  border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: rgba(255,255,255,.92); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); -webkit-tap-highlight-color: transparent; }
.rail-btn:active { transform: scale(.94); }
/* v82 右側快捷列可以收起來（手機上不擋畫面）：收起時只留福氣小冊＋這顆展開鈕 */
.rail-btn.rail-toggle { height: 30px; border-radius: 15px; }
.rail-btn.rail-toggle .ri { font-size: 15px; line-height: 1; transition: transform .2s; }
.side-rail.collapsed .rail-btn.rail-toggle .ri { transform: rotate(180deg); }
.side-rail.collapsed .rail-btn:not(.bless-pill):not(.rail-toggle) { display: none; }
.rail-btn.rail-toggle.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 2px rgba(26,21,16,.8); }
.rail-btn .rl { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .05em; }
.rail-btn.tool.on { background: rgba(217,164,65,.45); }
.rail-btn.tool.off { opacity: 1; color: rgba(255,255,255,.45); }
/* 福氣：最常用，做最大最顯眼（紅底金邊、底下顯示點數） */
.rail-btn.bless-pill { width: 60px; height: 60px; border-radius: 18px; border: 2px solid #e8b84a; background: linear-gradient(160deg, #d8321f, #8e1208); }
.rail-btn.bless-pill .ri { font-size: 24px; line-height: 1; }
.rail-btn.bless-pill .rv { max-width: 56px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 900; color: #ffe066; line-height: 1.2; }

/* ---------- 底部動作列 ---------- */
.dock { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 16px);
  display: flex; gap: 2px; padding: 6px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: calc(100vw - 20px); }
.dock button { width: 58px; padding: 8px 0 6px; border: 0; border-radius: 16px; background: transparent; color: rgba(255,255,255,.92);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .08em; }
.dock button:hover { background: rgba(255,255,255,.1); }
.dock button:active { transform: scale(.94); }
@media (max-width: 430px) { .dock button { width: 48px; font-size: 10px; } }
@media (max-width: 360px) { .dock button { width: 44px; } }

/* ---------- 提示 ---------- */
.toast { position: fixed; z-index: 70; top: calc(var(--safe-t) + 68px); left: 50%; transform: translateX(-50%);
  padding: 12px 22px; border-radius: 16px; background: rgba(26,21,16,.72); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: center; font-family: var(--serif);
  font-size: 18px; letter-spacing: .12em; pointer-events: none; max-width: 90vw; animation: fadeIn .25s ease; }
.toast small { display: block; margin-top: 4px; font-family: var(--sans); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.event-banner { position: fixed; z-index: 10; top: calc(var(--safe-t) + 128px); left: 50%; transform: translateX(-50%);
  padding: 8px 16px; border-radius: var(--radius); background: rgba(158,42,30,.85); border: 1px solid rgba(255,255,255,.2);
  font-size: 13px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 進場 ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; }
.intro { background: linear-gradient(180deg, rgba(20,15,10,.15) 0%, rgba(20,15,10,.75) 100%); }
.intro-card { width: min(92vw, 420px); text-align: center; padding: 30px 24px 22px; }
.intro-sub { margin: 0; font-size: 12px; letter-spacing: .6em; color: var(--gold); }
.intro h1 { margin: 10px 0 6px; font-family: var(--serif); font-weight: 600; font-size: 46px; letter-spacing: .35em; text-indent: .35em;
  color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.intro-desc { margin: 0 0 22px; font-size: 14px; color: rgba(255,255,255,.8); letter-spacing: .1em; }
.style-list { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.style-item { width: 62px; padding: 8px 0 6px; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: rgba(255,255,255,.85); }
.style-item .emo { display: block; font-size: 24px; line-height: 1.3; }
.style-item[aria-checked="true"] { border-color: var(--gold); background: rgba(201,162,74,.28); color: #fff; }
.style-item.locked { opacity: .55; }
.unlock-row { margin-top: 12px; text-align: left; }
.unlock-row .hint { color: rgba(255,255,255,.75); }
.field-row { display: flex; gap: 8px; align-items: center; }
.field-row input { margin: 0; }
.btn-enter { margin-top: 22px; width: 100%; height: 50px; border: 0; border-radius: var(--radius); background: #f7f3ec; color: var(--ink);
  font-family: var(--serif); font-size: 17px; letter-spacing: .4em; text-indent: .4em; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.btn-enter:active { transform: scale(.98); }

/* ---------- 卡片（對話框） ---------- */
.modal { background: rgba(15,12,9,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.card { width: min(92vw, 400px); max-height: 88vh; overflow-y: auto; padding: 24px 22px 18px; border-radius: 22px; background: var(--paper);
  color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: pop .22s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.card-kicker { margin: 0 0 4px; font-size: 11px; letter-spacing: .4em; color: var(--gold); }
.card h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: .12em; color: var(--ink); }
.btn-row { display: flex; gap: 10px; margin-top: 14px; }
.btn-main, .btn-primary { flex: 2; height: 46px; border: 0; border-radius: var(--radius); background: var(--ink); color: #fff;
  font-size: 15px; letter-spacing: .2em; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-line { flex: 1; height: 46px; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 14px; letter-spacing: .1em; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-line.small { height: 32px; padding: 0 14px; flex: 0; font-size: 12px; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-dark { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; white-space: nowrap; }
.btn-text { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; background: transparent; color: var(--ink-soft); font-size: 13px; }
.full { width: 100%; margin-top: 10px; }
.link { text-decoration: none; }
.text-link { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--red); text-decoration: none; }
.btn-main:active, .btn-line:active, .btn-primary:active { transform: scale(.98); }

/* 上香數量、選項晶片 */
.incense-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pick, .chip, .chip-grid button { padding: 11px 6px; border-radius: 14px; border: 1px solid var(--line); background: #fffdf9; color: var(--ink); font-size: 14px; }
.pick small { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.pick[aria-checked="true"], .chip[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.pick[aria-checked="true"] small { color: rgba(255,255,255,.7); }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.chip-grid button:hover, .chip:hover { border-color: var(--gold); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-row button { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: #fffdf9; color: var(--ink); font-size: 13px; }
.chair-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.bubble-text { margin: 10px 0; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line);
  font-family: var(--serif); font-size: 15px; line-height: 1.7; min-height: 58px; }

/* ---------- 側邊抽屜（選單、燈柱、誦經） ---------- */
.sheet { position: fixed; z-index: 15; right: 74px; top: calc(var(--safe-t) + 62px); width: min(calc(100vw - 88px), 340px); max-height: calc(100% - 170px);
  overflow-y: auto; padding: 18px; border-radius: 20px; background: rgba(247,243,236,.97); color: var(--ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: pop .2s ease; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sheet-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: .15em; }
.x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink-soft); }
.sheet h3 { margin: 18px 0 6px; font-size: 12px; letter-spacing: .3em; color: var(--gold); font-weight: 500; }
.row-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 4px; border: 0;
  border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-decoration: none; font-size: 15px; text-align: left; }
.row-item .arrow { color: var(--ink-soft); }
.upcoming { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: var(--ink-soft); }
.lamp-info { margin-top: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-align: center; }
.lamp-info .num { font-size: 12px; letter-spacing: .3em; color: var(--gold); }
.lamp-info .name { font-family: var(--serif); font-size: 22px; margin: 6px 0; letter-spacing: .15em; }
.lamp-info .btn-primary { width: 100%; margin-top: 10px; }

/* 誦經播放器 */
.track-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.track-list button { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fffdf9; color: var(--ink); font-size: 14px; }
.track-list button[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.player { display: flex; align-items: center; gap: 12px; }
.play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 16px; flex: none; }
.vol { flex: 1; }
.vol-label { font-size: 11px; letter-spacing: .3em; color: var(--ink-soft); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; padding: 0; margin: 10px 0; border: 0;
  border-radius: 4px; background: var(--line); box-shadow: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink); }

/* ---------- 念珠 ---------- */
.bead-overlay { flex-direction: column; z-index: 40; background: radial-gradient(circle at 50% 40%, #fbf7f0, #ece2d0); color: var(--ink); }
#beadCanvas { width: min(86vw, 58vh); height: min(86vw, 58vh); touch-action: manipulation; }
.bead-count { text-align: center; font-size: 14px; color: var(--ink-soft); }
.bead-count strong { font-family: var(--serif); font-size: 40px; color: var(--ink); font-weight: 600; }
.bead-tip { font-size: 13px; color: var(--ink-soft); letter-spacing: .08em; }
.btn-back { position: absolute; top: calc(var(--safe-t) + 14px); left: 14px; height: 38px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fffdf9; color: var(--ink); }

/* ---------- 法會進行中 ---------- */
.ritual-bar { position: fixed; z-index: 12; top: calc(var(--safe-t) + 60px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 94vw; }
.steps { display: flex; gap: 10px; font-size: 12px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; }
.steps span.now { color: #fff; }
.steps span.done { color: var(--gold); }
.scroll { position: fixed; z-index: 12; right: 16px; top: 50%; transform: translateY(-50%); padding: 18px 14px; border-radius: 6px;
  background: linear-gradient(180deg, #f3e2b8, #e9d199); color: #5a1a10; box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border-top: 8px solid #8c2a1c; border-bottom: 8px solid #8c2a1c; animation: pop .4s ease; }
.scroll p { margin: 0; writing-mode: vertical-rl; font-family: var(--serif); font-size: 17px; line-height: 1.9; letter-spacing: .25em; max-height: 60vh; }
@media (max-width: 520px) { .scroll { right: 8px; padding: 12px 8px; } .scroll p { font-size: 14px; } }

/* ---------- 月曆翻閱 ---------- */
.cal-view { flex-direction: column; z-index: 40; background: rgba(15,12,9,.94); }
.cal-stage { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
#calImg { max-width: min(92vw, 1100px); max-height: 70vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #222; user-select: none; touch-action: pan-y; }
.cal-nav { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: #fff; font-size: 26px; line-height: 1; }
@media (max-width: 600px) { .cal-nav { display: none; } }
.cal-label { margin: 14px 0 10px; font-family: var(--serif); letter-spacing: .3em; color: rgba(255,255,255,.85); }
.cal-buy { display: flex; gap: 10px; width: min(92vw, 420px); }
.cal-buy .btn-line { color: #fff; border-color: rgba(255,255,255,.35); }
.cal-buy .btn-main { background: #f7f3ec; color: var(--ink); }

.name-input { margin: 0 0 14px; text-align: center; background: rgba(255,255,255,.92); border-color: transparent; border-radius: var(--radius); }

/* ---------- 神龕直播 ---------- */
/* 直播層：在 3D 畫面後面（z-index 0），跟著鏡頭做透視變形 */
.live3d { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #000; }
.live3d-cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; pointer-events: none; }
.live-screen { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; background: #000; pointer-events: none; }
.live-screen iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.live-big { width: min(94vw, 1100px); aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.live-big iframe { width: 100%; height: 100%; border: 0; }

/* 進香團代碼、乩身指示 */
.medium-text { margin: 10px 0 14px; font-family: var(--serif); font-size: 20px; line-height: 1.7; color: var(--ink); text-align: center; }

/* 籤筒：竹筒＋一把籤，搖的時候左右晃 */
.fortune-tube { position: relative; width: 74px; height: 120px; margin: 14px auto 8px; }
.fortune-tube::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px; border-radius: 10px 10px 16px 16px;
  background: linear-gradient(90deg, #b88a3e, #e2c07a 45%, #b88a3e); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.fortune-tube i { position: absolute; bottom: 40px; width: 6px; height: 72px; border-radius: 2px; background: #d8b878; transform-origin: bottom center; }
.fortune-tube i:nth-child(1) { left: 14px; transform: rotate(-12deg); } .fortune-tube i:nth-child(2) { left: 22px; transform: rotate(-7deg); height: 78px; }
.fortune-tube i:nth-child(3) { left: 30px; transform: rotate(-2deg); } .fortune-tube i:nth-child(4) { left: 36px; height: 80px; }
.fortune-tube i:nth-child(5) { left: 42px; transform: rotate(3deg); } .fortune-tube i:nth-child(6) { left: 49px; transform: rotate(8deg); height: 76px; }
.fortune-tube i:nth-child(7) { left: 56px; transform: rotate(13deg); }
.fortune-tube.shake { animation: tubeShake .18s ease-in-out infinite alternate; }
.fortune-tube.out i:nth-child(4) { height: 108px; background: #c0392b; } /* 掉出來的那支籤 */
@keyframes tubeShake { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.fortune-result { margin: 4px 0 8px; text-align: center; font-family: var(--serif); font-size: 40px; font-weight: 700; letter-spacing: .2em; text-indent: .2em; color: #a8231a; }
.fortune-result.king { color: #b8860b; text-shadow: 0 0 18px rgba(217,164,65,.6); }
/* v22：抽到的籤詩＋收集狀態（卡片可以捲動，手機小螢幕也放得下） */
.fortune-result { font-size: 32px; }
.fortune-poem { margin: 2px 0 10px; }
.fortune-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); color: var(--ink); font-size: 13.5px; line-height: 1.65; text-align: left; white-space: pre-line; }

/* 直播子母畫面：live3d 在 pip 模式時移到 3D 畫面上方（還是不擋點擊），只顯示右下角那塊 */
.live3d.pip { z-index: 8; background: transparent; }
.live3d.pip .live-screen { border-radius: 28px; overflow: hidden; }
.pip-ui { position: fixed; z-index: 9; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); outline: 2px solid rgba(217,164,65,.85); }
.pip-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; }
.pip-open span { margin: 0 0 6px 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; letter-spacing: .05em; }
.pip-x { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(26,21,16,.85); color: #fff; font-size: 14px; cursor: pointer; }
.pip-pill { position: fixed; z-index: 9; right: 12px; bottom: calc(var(--safe-b) + 104px); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(26,21,16,.75); color: #fff; font-size: 13px; cursor: pointer; }

/* 手機模式：直播疊在 3D 畫面上面（不擋點擊），背景透明 */
.live3d.ontop { z-index: 2; background: transparent; }

/* 房間選單（左上角）：一次 4 間，超過的可以用手指上下滑 */
.room-wrap { position: relative; }
.room-btn { cursor: pointer; border: 0; color: #fff; font-size: 13px; }
.room-panel { position: absolute; top: 44px; left: 0; width: 210px; max-height: calc(4 * 46px + 12px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-y; padding: 6px; border-radius: 16px; background: rgba(26,21,16,.88); border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.room-item { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; margin: 2px 0; padding: 0 12px; border: 0; border-radius: 12px;
  background: rgba(255,255,255,.06); color: #fff; font-size: 14px; cursor: pointer; }
.room-item small { color: rgba(255,255,255,.65); font-size: 12px; }
.room-item[aria-selected="true"] { background: rgba(217,164,65,.35); outline: 1px solid rgba(217,164,65,.8); }
.room-item:disabled { opacity: .45; cursor: not-allowed; }

/* 手機：直播還沒開始時的提示（點不到，點擊會穿過去到 YouTube 播放器） */
.live-hint { position: fixed; z-index: 3; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 999px; background: rgba(168,35,26,.9);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .05em; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); }

/* ---------- 四湖天氣＋節慶小標示（左上，品牌列下面） ---------- */
.amb-chip { position: fixed; z-index: 9; top: calc(var(--safe-t) + 56px); left: 14px; max-width: calc(100vw - 100px);
  padding: 5px 12px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 12px; color: rgba(255,255,255,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.amb-chip.fest { background: rgba(158,42,30,.78); border-color: rgba(255,214,120,.45); color: #fff3d6; }

/* ---------- 夜市遊戲機台 ---------- */
.arcade { background: radial-gradient(circle at 50% 30%, rgba(60,20,40,.75), rgba(5,3,10,.88)); }
.arc-card { width: fit-content; max-width: 96vw; max-height: 96vh; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: #1a0f0a; animation: pop .22s ease;
  box-shadow: 0 0 0 2px #e8b84a, 0 0 0 5px #5a1a0a, 0 0 40px rgba(255,170,60,.35), 0 30px 80px rgba(0,0,0,.6); }
.arc-head { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px;
  background: linear-gradient(180deg, #d0352a 0%, #9e1d14 100%); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25); }
.arc-head h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.arc-info { font-size: 12px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.arc-score { font-weight: 900; font-size: 18px; color: #ffe066; white-space: nowrap; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(255,200,60,.5); font-variant-numeric: tabular-nums; }
.arc-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.28); color: #fff; font-size: 22px; line-height: 1; }
.arc-x:hover { background: rgba(0,0,0,.45); }
.arc-stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; background: #120c08; }
.arc-canvas { display: block; width: min(calc(96vw - 4px), 416px, calc((96vh - 58px) * 0.6428)); height: auto; aspect-ratio: 360 / 560; touch-action: none; user-select: none; -webkit-user-select: none; }
.arc-panel { position: absolute; inset: 0; overflow-y: auto; padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 12px; color: #fbf3e4;
  background: linear-gradient(180deg, rgba(25,10,30,.55) 0%, rgba(15,6,18,.92) 38%, rgba(10,4,12,.97) 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.arcade.playing .arc-panel { display: none; }
.arc-how { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.7; background: rgba(255,255,255,.07); border: 1px solid rgba(255,220,150,.18); }
.arc-best { margin: 0; align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #2b1600;
  background: linear-gradient(180deg, #ffe58a, #e8a317); box-shadow: 0 2px 8px rgba(232,163,23,.35); }
.arc-kicker { margin: 0; font-size: 12px; letter-spacing: .4em; color: #e8b84a; text-align: center; }
.arc-final { margin: 0; text-align: center; font-size: 46px; font-weight: 900; line-height: 1.1;
  background: linear-gradient(180deg, #fffbe0 0%, #ffd34d 50%, #ff9a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5a2a00) drop-shadow(0 0 18px rgba(255,180,40,.45)); }
.arc-name-row { display: flex; gap: 8px; }
.arc-name-row input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 2px solid #e8b84a; background: #fffaf0; color: #2b241d; font-size: 16px; font-weight: 700; }
.arc-name-row input:focus { outline: none; box-shadow: 0 0 0 4px rgba(232,184,74,.35); }
.arc-name-row .btn-main { flex: none; width: auto; height: 46px; padding: 0 16px; white-space: nowrap; }
.arcade .btn-main { background: linear-gradient(180deg, #ff5a4a 0%, #c81e1e 100%); color: #fff; font-weight: 900; letter-spacing: .08em;
  box-shadow: 0 4px 0 #7a0f0f, 0 8px 20px rgba(200,30,30,.4); border-radius: 14px; }
.arcade .btn-main:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a0f0f, 0 4px 10px rgba(200,30,30,.4); }
.arcade .btn-main:disabled { opacity: .65; filter: grayscale(.3); }
#arcStart { height: 56px; font-size: 20px; animation: arcPulse 1.4s ease-in-out infinite; }
@keyframes arcPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.arcade .btn-line { color: #fbf3e4; border: 2px solid rgba(232,184,74,.6); background: rgba(255,255,255,.04); height: 46px; border-radius: 14px; font-weight: 700; }
.arc-msg { margin: 0; min-height: 18px; font-size: 13px; color: #ffd76a; text-align: center; }
.arc-rank { margin-top: 2px; padding: 10px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(232,184,74,.25); }
.arc-tabs { display: flex; gap: 6px; margin-bottom: 8px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.06); }
.arc-tabs button { flex: 1; height: 34px; border-radius: 10px; border: 0; background: transparent; color: #e9dcc4; font-size: 13px; font-weight: 700; }
.arc-tabs button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe58a, #e8a317); color: #2b1600; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.arc-board { list-style: none; margin: 0; padding: 0; }
.arc-board li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border-radius: 10px; font-size: 14px; background: rgba(255,255,255,.04); }
.arc-board li:nth-child(1) { background: linear-gradient(90deg, rgba(255,215,0,.28), rgba(255,215,0,.04)); }
.arc-board li:nth-child(2) { background: linear-gradient(90deg, rgba(200,210,230,.25), rgba(200,210,230,.03)); }
.arc-board li:nth-child(3) { background: linear-gradient(90deg, rgba(205,127,50,.28), rgba(205,127,50,.03)); }
.arc-board li.me { outline: 2px solid #4ade80; }
.arc-board li.empty { justify-content: center; color: rgba(255,255,255,.6); font-size: 13px; background: none; }
.arc-board .rk { width: 26px; text-align: center; font-weight: 900; color: #e8b84a; }
.arc-board .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.arc-board .sc { font-weight: 900; color: #ffe066; font-variant-numeric: tabular-nums; }
.arc-record { margin: -4px auto 0; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 900; color: #fff;
  background: linear-gradient(90deg, #ff4d8d, #ff9a1f); box-shadow: 0 0 16px rgba(255,120,80,.55); animation: arcPulse 1s ease-in-out infinite; }
#arcIntro:not(.hidden), #arcEnd:not(.hidden) { display: flex; flex-direction: column; gap: 12px; }
#arcIntro .full, #arcEnd .full { margin-top: 0; }

/* =============================================================
   福氣小冊（手機優先：底部滑出的大卡片；電腦：置中）
   配色：朱紅漆＋金邊＋米色宣紙
   ============================================================= */
.bless-pill { position: relative; font-weight: 800; color: #ffe8a3; cursor: pointer; }
.bless-pill.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 2px rgba(26,21,16,.8), 0 0 8px #ff3b3b; animation: arcPulse 1.2s ease-in-out infinite; }
.fu { z-index: 35; background: rgba(12,4,2,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.fu-card { position: relative; width: min(94vw, 460px); height: min(88vh, 820px); max-height: 90vh; /* v90 KIRK：外框固定大小，換分頁不再忽大忽小 */ display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  background: #fbf3e3; color: #3a2416; box-shadow: 0 0 0 1.5px rgba(232,184,74,.9), 0 30px 80px rgba(0,0,0,.5); animation: fuIn .28s cubic-bezier(.2,.9,.3,1.1); }
@keyframes fuIn { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fu-grab { display: none; }
/* 手機：貼底的大卡片，單手好按 */
@media (max-width: 600px) {
  .fu { align-items: flex-end; }
  .fu-card { width: 100vw; height: 86vh; height: 86dvh; max-height: 92vh; border-radius: 26px 26px 0 0; padding-bottom: var(--safe-b); animation: fuUp .3s cubic-bezier(.2,.9,.3,1); }
  @keyframes fuUp { from { transform: translateY(100%); } to { transform: none; } }
  .fu-grab { display: block; position: absolute; z-index: 2; top: 7px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 9px; background: rgba(255,255,255,.45); }
}
/* 頁首：朱紅＋祥雲暗紋 */
.fu-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 18px 14px 14px 16px; color: #fff4dc;
  background:
    radial-gradient(circle at 12% 120%, rgba(255,210,120,.18) 0 40px, transparent 41px),
    radial-gradient(circle at 88% -30%, rgba(255,210,120,.16) 0 60px, transparent 61px),
    linear-gradient(160deg, #c8261b 0%, #9a1810 60%, #7c120b 100%); }
.fu-logo { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #ffe48a, #e3a91e);
  color: #a3170d; font: 900 22px var(--serif); box-shadow: 0 3px 0 #8a5a00, inset 0 1px 0 rgba(255,255,255,.6); transform: rotate(-6deg); }
.fu-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fu-ttl h2 { margin: 0; font: 900 19px var(--serif); letter-spacing: .14em; }
.fu-sub { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-coins { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,220,140,.3); font-size: 14px; white-space: nowrap; }
.fu-coins b { color: #ffe066; font-variant-numeric: tabular-nums; }
.fu-ibtn-round { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff4dc; cursor: pointer; position: relative; }
.fu-ibtn-round:active { transform: scale(.94); }
.fu-ibtn-round.on { background: #ffe066; color: #8e1b12; }
.fu-ibtn-round.warn::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ffd34d; box-shadow: 0 0 6px #ffd34d; }
@media (max-width: 380px) { .fu-coins { display: none; } }
/* v88 福氣小冊「蒐集」頁：上面三格（稱號、四湖明信片、籤簿）切換 */
.fu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fu-colbox { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 6px 9px; border: 0; border-radius: 14px; background: #fffaf0; color: #7a2a12; cursor: pointer; box-shadow: 0 1px 0 #ecd9b5, inset 0 0 0 1px #f0dfbd; }
.fu-colbox .ic { font-size: 22px; line-height: 1; }
.fu-colbox b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fu-colbox .n { font-size: 12px; color: #a3530f; font-weight: 800; white-space: nowrap; }
.fu-colbox.on { background: linear-gradient(180deg, #e0442e, #b31d12); color: #fff; box-shadow: 0 3px 0 #7a0f0f; }
.fu-colbox.on .n { color: #ffe066; }
.fu-colbar { width: 80%; height: 5px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; }
.fu-colbar i { display: block; height: 100%; background: #e8b84a; }
/* v88 商店分類；v89 KIRK「手上被擋住」→ 不左右滑了，改成自動換行，全部分類都看得到 */
.fu-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.fu-cat { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #fffaf0; color: #8a5d3a; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1.5px #ecd3a0; }
.fu-cat.on { background: linear-gradient(180deg, #e0442e, #b31d12); color: #fff; box-shadow: 0 2px 0 #7a0f0f; }
.fu-cat b { margin-left: 4px; padding: 0 6px; border-radius: 99px; background: rgba(0,0,0,.08); font-size: 11px; }
.fu-cat.on b { background: rgba(255,255,255,.22); }
/* v88 福氣小冊「活動」頁；v90 KIRK「UI 做漂亮一點」：卡片左邊色條、圖示放圓章、日期膠囊、按鈕改金邊 */
.fu-ev { position: relative; overflow: hidden; background: linear-gradient(180deg, #fffdf8, #fff6e6); border-radius: 18px; padding: 14px 14px 14px 18px; box-shadow: 0 2px 0 #ead3a6, 0 6px 16px rgba(122,42,18,.08); display: flex; flex-direction: column; gap: 8px; }
.fu-ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #e8b84a, #c8901e); }
.fu-ev + .fu-ev { margin-top: 10px; }
.fu-ev.live { background: linear-gradient(180deg, #fff7dc, #ffe9b3); box-shadow: 0 2px 0 #e2b75a, 0 8px 20px rgba(200,140,30,.25); }
.fu-ev.live::before { background: linear-gradient(180deg, #2fb35a, #1f8a42); }
.fu-ev.done { opacity: .5; filter: grayscale(.4); }
.fu-ev-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fu-ev-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; background: radial-gradient(circle at 35% 30%, #fff, #f6e2b4); box-shadow: inset 0 0 0 2px #e8c77a; }
.fu-ev-n { flex: 1; min-width: 0; color: #7a2a12; font-size: 16.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-ev-badge { flex: none; padding: 4px 10px; border-radius: 999px; background: #b31d12; color: #ffe9a8; font-size: 12px; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 0 #7a0f0f; }
.fu-ev-badge.live { background: #1f8a42; color: #fff; box-shadow: 0 2px 0 #145a2b; animation: evPulse 1.6s ease-in-out infinite; }
@keyframes evPulse { 50% { transform: scale(1.06); } }
.fu-ev-w { align-self: flex-start; padding: 3px 10px; border-radius: 8px; background: rgba(232,184,74,.22); color: #8a4a0f; font-size: 12.5px; font-weight: 800; }
.fu-ev-d { color: #5e4030; font-size: 13.5px; line-height: 1.6; }
.fu-ev .fu-btn.sm { background: linear-gradient(180deg, #ffe48a, #e3a91e); color: #7a1a0c; box-shadow: 0 3px 0 #a3700a; letter-spacing: .04em; }
.fu-ev.live .fu-btn.sm { background: linear-gradient(180deg, #e0442e, #b31d12); color: #fff; box-shadow: 0 3px 0 #7a0f0f; }
.fu-btn.sm { height: 40px; font-size: 14px; border-radius: 12px; box-shadow: 0 3px 0 #7a0f0f; }
.fu-ev-badge.done { background: #9a8a7a; color: #fff; box-shadow: 0 2px 0 #6e6155; }
/* v91 KIRK：活動詳情視窗上面的「返回活動」＋「✕」（黏在卡片頂端，捲動時也看得到） */
.card-top { position: sticky; top: -24px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -24px -22px 8px; padding: 12px 12px 8px; background: var(--paper); border-radius: 22px 22px 0 0; }
.card-back { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #f3e4c4; color: #7a2a12; font-size: 14px; font-weight: 900; box-shadow: 0 2px 0 #d9b56a; }
.card-x { width: 36px; height: 36px; margin-left: auto; flex: none; border: 0; border-radius: 50%; background: rgba(0,0,0,.07); color: #5e4030; font-size: 17px; font-weight: 900; line-height: 1; }
.card-back:active, .card-x:active { transform: translateY(1px); }
/* v91 KIRK：活動改日曆，點某天看當天活動 */
.fu-cal { background: linear-gradient(180deg, #fffdf8, #fff3dc); border-radius: 20px; padding: 12px 10px 10px; box-shadow: 0 2px 0 #ead3a6, 0 6px 16px rgba(122,42,18,.08); }
.fu-cal-h { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; }
.fu-cal-t { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; color: #7a2a12; }
.fu-cal-t b { font-size: 20px; font-weight: 900; letter-spacing: .04em; }
.fu-cal-t span { font-size: 13px; font-weight: 800; color: #b08a5a; }
.fu-cal-nav { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: #f6e2b4; color: #7a2a12; font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 2px 0 #d9b56a; }
.fu-cal-nav:disabled { opacity: .3; cursor: default; }
.fu-cal-today { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #b31d12; color: #ffe9a8; font-size: 12.5px; font-weight: 900; cursor: pointer; box-shadow: 0 2px 0 #7a0f0f; }
.fu-cal-wk, .fu-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fu-cal-wk span { text-align: center; font-size: 12px; font-weight: 900; color: #8a6a4a; padding: 2px 0 4px; }
.fu-cal-wk span.we { color: #c0392b; }
.fu-cal-d { position: relative; aspect-ratio: 1 / .92; min-width: 0; border: 0; border-radius: 12px; background: #fff; color: #5e4030; padding: 4px 0 0; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; box-shadow: inset 0 0 0 1px #f0dfbf; font-family: inherit; }
.fu-cal-d .n { font-size: 14px; font-weight: 800; line-height: 1.2; }
.fu-cal-d.we .n { color: #c0392b; }
.fu-cal-d .ic { font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; max-width: 100%; }
.fu-cal-d .more { position: absolute; right: 3px; bottom: 2px; font-size: 9.5px; font-style: normal; font-weight: 900; color: #b31d12; }
.fu-cal-d.out { opacity: .35; }
.fu-cal-d.has { background: linear-gradient(180deg, #fff8e4, #ffe7ad); box-shadow: inset 0 0 0 1.5px #e8b84a; }
.fu-cal-d.has.live { background: linear-gradient(180deg, #e9f9ee, #c6efd3); box-shadow: inset 0 0 0 1.5px #2fb35a; }
.fu-cal-d.has.past { background: #f3eee8; box-shadow: inset 0 0 0 1px #ddd2c4; filter: grayscale(.5); }
.fu-cal-d.today .n { min-width: 24px; padding: 0 4px; border-radius: 999px; background: #b31d12; color: #fff; }
.fu-cal-d.sel { box-shadow: inset 0 0 0 2.5px #7a2a12, 0 3px 8px rgba(122,42,18,.25); transform: translateY(-1px); }
.fu-cal-next { width: 100%; margin-top: 4px; padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(232,184,74,.22); color: #7a2a12; font-size: 13.5px; font-weight: 900; text-align: left; cursor: pointer; font-family: inherit; }
@media (max-width: 380px) { .fu-cal-d .n { font-size: 12.5px; } .fu-cal-d .ic { font-size: 13px; } .fu-cal-wk, .fu-cal-g { gap: 3px; } }
.fu-evbar { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #2e9b4f, #1f7a3c); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 3px 0 #145a2b; }
.fu-evbar b { font-size: 14.5px; }
.fu-evbar span { font-size: 12px; opacity: .9; }
.fu-tab.ev-new { position: relative; }
.fu-tab.ev-new::after { content: ''; position: absolute; top: 5px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 2px #f3e4c6; }
/* v88 KIRK：手機上福氣小冊上面的字變成直的（一個字一行）
   原因：手機字比較大（系統字體放大、福氣數字變長）時，標題「福氣小冊」和分頁「今日、毛孩…」被擠窄，中文就一個字一行
   修：標題、分頁文字一律不換行；窄螢幕先藏分頁小圖示、縮一點字；福氣數字太長就截掉 */
.fu-ttl { flex: 1 1 auto; min-width: 5.4em; }
.fu-ttl h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-coins { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fu-tab { min-width: 0; white-space: nowrap; overflow: hidden; }
.fu-tab span { white-space: nowrap; }
@media (max-width: 430px) {
  .fu-head { gap: 8px; }
  .fu-ttl h2 { letter-spacing: .06em; font-size: 17px; }
  .fu-coins { padding: 6px 9px; font-size: 13px; }
  .fu-tab svg { display: none; }
  .fu-tabs { gap: 4px; padding: 8px 8px; }
  .fu-tab { font-size: 13.5px; padding: 0 2px; }
}
/* 分頁：金色膠囊 */
.fu-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 12px; background: #f3e4c6; box-shadow: inset 0 -1px 0 #e3cc9e; }
.fu-tab { display: flex; align-items: center; justify-content: center; gap: 5px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: #8a5d3a; font-size: 14px; font-weight: 800; cursor: pointer; }
.fu-tab[aria-current="true"] { background: linear-gradient(180deg, #c8261b, #9a1810); color: #ffe9b0; box-shadow: 0 3px 8px rgba(154,24,16,.35); }
@media (max-width: 380px) { .fu-tab svg { display: none; } }
.fu-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px 22px; }
.fu-col { display: flex; flex-direction: column; gap: 14px; }
.fu-note { margin: 8px 0 0; font-size: 12.5px; color: #9a7b58; }
.fu-note.center { text-align: center; padding: 50px 0; }
.fu-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: #6e4f33; }
.fu-k { font-size: 12.5px; color: #9a7b58; font-weight: 700; letter-spacing: .05em; }
.fu-k2 { margin-top: 6px; font-size: 12.5px; color: #8a6a48; }
/* 區塊 */
.fu-sec { padding: 14px; border-radius: 20px; background: #fffdf8; box-shadow: 0 1px 0 #ecd9b4, 0 6px 18px rgba(120,70,20,.07); }
.fu-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fu-sec-h h3 { position: relative; margin: 0; padding-left: 11px; font-size: 16px; font-weight: 900; color: #8e1b12; letter-spacing: .04em; }
.fu-sec-h h3::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 4px; background: linear-gradient(#e8b84a, #c8261b); }
.fu-sec-r { padding: 3px 10px; border-radius: 999px; background: #f6ead2; color: #8a5d3a; font-size: 12px; font-weight: 800; white-space: nowrap; }
/* 今日：簽到大卡 */
.fu-hero { padding: 16px; border-radius: 22px; color: #fff4dc;
  background: radial-gradient(circle at 85% 0%, rgba(255,214,120,.35), transparent 55%), linear-gradient(150deg, #c8261b, #8e1208);
  box-shadow: 0 10px 24px rgba(150,20,10,.3), inset 0 0 0 1px rgba(255,220,140,.25); }
.fu-hero-top { display: flex; align-items: center; gap: 16px; }
.fu-seal { flex: none; width: 112px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  border: 3px solid #ffe7a6; background: radial-gradient(circle at 35% 28%, #ffe9a8, #f2c14e 45%, #c98a12 100%); color: #8e1208;
  box-shadow: 0 6px 0 #7a4e00, 0 0 0 6px rgba(255,231,166,.18), 0 12px 24px rgba(0,0,0,.25); font-family: var(--serif); animation: fuBeat 1.6s ease-in-out infinite; }
.fu-seal .s1 { font-size: 24px; font-weight: 900; letter-spacing: .06em; }
.fu-seal .s2 { font-size: 11.5px; margin-top: 2px; font-weight: 700; }
.fu-seal:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a4e00; }
.fu-seal.done { animation: none; background: radial-gradient(circle at 35% 28%, #fff4d6, #e9d3a3); color: #a0572a; box-shadow: 0 4px 0 #b39060; cursor: default; }
@keyframes fuBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.fu-hero-info { min-width: 0; }
.fu-hero .fu-k { color: rgba(255,240,210,.8); }
.fu-streak b { font: 900 46px/1 var(--serif); color: #ffe066; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.fu-streak span { margin-left: 4px; font-size: 15px; font-weight: 800; }
.fu-hero .fu-k2 { color: rgba(255,240,210,.85); }
.fu-bonus { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,224,102,.2); color: #ffe066; font-size: 12px; font-weight: 800; }
.fu-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 16px; }
.fu-dot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fu-dot i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font: 900 13px var(--serif);
  border: 1.5px dashed rgba(255,231,166,.5); color: rgba(255,240,210,.7); }
.fu-dot.on i { border: 0; background: #ffe7a6; color: #a3170d; transform: rotate(-10deg); box-shadow: 0 2px 0 #b8860b; font-size: 15px; }
.fu-dot.gift i { border-style: solid; border-color: #ffe066; font-size: 16px; }
.fu-dot span { font-size: 10px; color: rgba(255,240,210,.75); }
/* 綁帳號提醒 */
.fu-bind-bnr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 18px; text-align: left; cursor: pointer;
  background: linear-gradient(90deg, #fff1c2, #ffe09a); box-shadow: 0 1px 0 #e3c070, 0 6px 14px rgba(200,140,20,.18); color: #6b2a10; }
.fu-bind-bnr .ic { font-size: 26px; }
.fu-bind-bnr div { flex: 1; display: flex; flex-direction: column; }
.fu-bind-bnr b { font-size: 15px; }
.fu-bind-bnr span { font-size: 12.5px; opacity: .8; }
.fu-bind-bnr .go { font-size: 24px; font-weight: 900; opacity: .6; }
/* 任務 */
.fu-task { display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-top: 8px; border-radius: 14px; background: #fbf4e6; }
.fu-task .ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(120,70,20,.1); font-size: 22px; }
.fu-task .mid { flex: 1; min-width: 0; }
.fu-task .nm { font-size: 14.5px; font-weight: 800; }
.fu-task .bar { height: 7px; margin-top: 7px; border-radius: 9px; background: #ecdcbc; overflow: hidden; }
.fu-task .bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #f59e0b, #e0442e); transition: width .4s ease; }
.fu-task .rw { flex: none; min-width: 46px; padding: 5px 8px; border-radius: 999px; background: #fff1c2; color: #a3530d; font-size: 13px; font-weight: 900; text-align: center; }
.fu-task.done { background: #eef9ec; }
.fu-task.done .bar i { background: linear-gradient(90deg, #22c55e, #84cc16); }
.fu-task.done .rw { background: #22c55e; color: #fff; }
.fu-task.all { background: linear-gradient(90deg, #fff6d6, #ffe7a6); }
/* 一籤 */
.fu-fort { display: flex; align-items: center; gap: 14px; }
.fu-fort-t { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #8a6a48; }
.fu-fort-t b { font-size: 15px; color: #3a2416; }
.fu-tube { flex: none; position: relative; width: 70px; height: 92px; margin-top: 20px; border: 0; border-radius: 10px 10px 14px 14px; cursor: pointer;
  background: linear-gradient(90deg, #6e3210, #c27a3a 45%, #6e3210); box-shadow: inset 0 -8px 0 rgba(0,0,0,.2), 0 5px 0 #43200a; }
.fu-tube i { position: absolute; bottom: 72px; width: 5px; height: 38px; border-radius: 3px 3px 0 0; background: linear-gradient(#c8261b 0 10px, #ecc98f 10px); }
.fu-tube i:nth-child(1) { left: 12px; height: 34px; } .fu-tube i:nth-child(2) { left: 19px; height: 42px; } .fu-tube i:nth-child(3) { left: 26px; height: 32px; }
.fu-tube i:nth-child(4) { left: 33px; height: 44px; } .fu-tube i:nth-child(5) { left: 40px; height: 36px; } .fu-tube i:nth-child(6) { left: 47px; height: 40px; } .fu-tube i:nth-child(7) { left: 54px; height: 33px; }
.fu-tube b { position: absolute; left: 12px; right: 12px; top: 28px; padding: 4px 0; border-radius: 5px; background: #ffd34d; color: #8e1208; font: 900 18px var(--serif); }
.fu-tube.shake { animation: fuShake .15s linear infinite; }
.fu-fres { flex: none; width: 128px; padding: 12px 0; border-radius: 14px; text-align: center; font-family: var(--serif);
  background: linear-gradient(180deg, #fff6dc, #f1d79a); border: 2.5px solid #c8261b; box-shadow: 0 5px 0 #8e1b12; }
.fu-fres .no { font-size: 22px; font-weight: 900; }
.fu-fres .lv { margin-top: 2px; font-size: 18px; font-weight: 900; color: #c8261b; }
.fu-fres.lv-king { background: linear-gradient(180deg, #fff6c2, #ffd34d); border-color: #b8860b; box-shadow: 0 5px 0 #8a6200, 0 0 24px rgba(255,200,40,.6); }
.fu-prog { height: 6px; margin-top: 14px; border-radius: 9px; background: #ecdcbc; overflow: hidden; }
.fu-prog i { display: block; height: 100%; background: linear-gradient(90deg, #e8b84a, #c8261b); }
.fu-link { display: block; margin: 10px auto 0; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: #a3530d; font-size: 13px; font-weight: 800; cursor: pointer; }
.fu-book { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 8px; }
.fu-book button { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: #f3e6c9; color: #c4ab84; font-size: 10px; font-weight: 800; }
.fu-book button.on { background: #c8261b; color: #ffe9b0; cursor: pointer; }
.fu-book button.pick { outline: 3px solid #ffd34d; outline-offset: 1px; }
/* 籤紙：黃紙紅框、直書四句 */
.fu-poem { margin: 4px auto 0; width: min(100%, 300px); padding: 12px 14px 16px; border-radius: 10px; text-align: center; font-family: var(--serif);
  background: linear-gradient(180deg, #fff6d8, #f6e2a8); border: 3px double #c8261b; box-shadow: 0 6px 16px rgba(150,60,10,.18); animation: fuIn .35s ease; }
.fu-poem .pt { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px solid #c8261b; color: #a3170d; font-size: 15px; font-weight: 900; letter-spacing: .1em; }
.fu-poem .pb { display: flex; justify-content: center; gap: 14px; }
.fu-poem .pb span { writing-mode: vertical-rl; font-size: 20px; line-height: 1.15; letter-spacing: .12em; color: #3a2416; font-weight: 700; }
.fu-poem.sm .pb span { font-size: 17px; }
.fu-poem.first { background: linear-gradient(180deg, #fff6c2, #ffd98a); box-shadow: 0 0 24px rgba(255,200,40,.6); }
/* 實際贊助 */
.fu-donate { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: #fff4dc;
  background: linear-gradient(120deg, #2b1a10, #4a2a15); box-shadow: inset 0 0 0 1px rgba(232,184,74,.4); }
.fu-donate b { color: #ffe066; font-size: 15px; }
.fu-donate span { font-size: 12.5px; opacity: .85; }
/* 稱號 */
.fu-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; border-radius: 22px;
  background: radial-gradient(circle at 50% 100%, rgba(255,214,120,.45), transparent 60%), linear-gradient(180deg, #3a1a10, #5a2414); color: #fff4dc; }
.fu-stage .fu-k { color: rgba(255,240,210,.8); }
.fu-pedestal { min-height: 46px; display: grid; place-items: center; }
.fu-pedestal .tbadge { font-size: 17px; padding: 8px 18px; }
.fu-stage .fu-note { color: rgba(255,240,210,.75); }
.fu-chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #e2c48a; background: #fff8e8; color: #6b4a2a; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.fu-chip.on { background: #c8261b; border-color: #c8261b; color: #fff; }
.fu-stage .fu-chip { background: rgba(255,255,255,.1); color: #fff4dc; border-color: rgba(255,231,166,.5); }
.fu-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 12px; background: #f3e4c6; }
.fu-seg button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: #8a5d3a; font-weight: 800; cursor: pointer; }
.fu-seg button.on { background: #fff; color: #8e1b12; box-shadow: 0 2px 6px rgba(120,70,20,.15); }
.fu-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fu-titem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 14px; border: 1.5px solid transparent; background: #fbf4e6; text-align: left; cursor: pointer; }
.fu-titem.on { border-color: #c8261b; background: #fff; }
.fu-titem.lock { cursor: default; }
.fu-titem.lock .tbadge { filter: grayscale(1) opacity(.45); }
.fu-titem .d { font-size: 11.5px; color: #8a6a48; }
/* 商店 */
.fu-bal { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 20px; color: #fff4dc;
  background: radial-gradient(circle at 90% 0%, rgba(255,214,120,.35), transparent 60%), linear-gradient(150deg, #c8261b, #8e1208); box-shadow: 0 8px 20px rgba(150,20,10,.25); }
.fu-bal span { font-weight: 800; }
.fu-bal b { font: 900 30px var(--serif); color: #ffe066; }
.fu-shop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 420px) { .fu-shop { grid-template-columns: repeat(3, 1fr); } }
.fu-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #fffaf0, #f7ead2); border: 1.5px solid #ecd9b4; box-shadow: 0 4px 12px rgba(120,70,20,.08); }
/* 稀有度：卡片上半部的光暈底色 */
.fu-item .ic { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 120px; display: grid; place-items: center; border-radius: 16px; font-size: 40px;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #fbefd6 58%, #f1dcb2 100%); box-shadow: inset 0 -6px 14px rgba(150,100,40,.12); overflow: hidden; }
.fu-item .ic img, .fu-set .th img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(80,40,10,.25)); }
.fu-item.r-rare .ic { background: radial-gradient(circle at 50% 42%, #ffffff 0%, #dff1ff 58%, #b9dcf5 100%); }
.fu-item.r-epic .ic { background: radial-gradient(circle at 50% 42%, #fff8ff 0%, #ecdcff 58%, #cfb2f2 100%); }
.fu-item.r-legend { border-color: #e8b423; background: linear-gradient(180deg, #fff7dc, #f5dc9a); box-shadow: 0 6px 18px rgba(200,140,20,.28); }
.fu-item.r-legend .ic { background: radial-gradient(circle at 50% 40%, #fffbe8 0%, #ffe08a 55%, #e8a92a 100%); }
.fu-item .rt, .fu-item .st, .fu-item .wn { position: absolute; z-index: 1; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 900; line-height: 1.5; }
.fu-item .rt { top: 8px; left: 8px; background: #fff; color: #8a6a48; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fu-item.r-rare .rt { color: #1d6fb8; }
.fu-item.r-epic .rt { color: #7c3aed; }
.fu-item.r-legend .rt { background: linear-gradient(180deg, #e0442e, #b31d12); color: #ffe58a; }
.fu-item .st { top: 34px; left: 8px; background: #1f8a46; color: #fff; }
/* 活動限定（遶境令旗）：紅底金字 */
.fu-item.r-ev { border-color: #c0392b; background: linear-gradient(180deg, #fff1e6, #f7cfb8); }
.fu-item.r-ev .rt { background: linear-gradient(180deg, #c0392b, #8e1208); color: #ffe58a; }
.fu-item .wn { top: 8px; right: 8px; background: #22c55e; color: #fff; }
.fu-item.on { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25), 0 6px 16px rgba(34,197,94,.18); }
.fu-item .nm { margin-top: 6px; font: 900 15px var(--serif); color: #4a2a12; }
.fu-item .ds { min-height: 30px; font-size: 11px; line-height: 1.4; color: #8a6a48; }
/* 試穿：縮圖右下角的小按鈕 */
.fu-item .fu-try { position: absolute; z-index: 1; top: 8px; right: 8px; padding: 3px 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #b31d12; font-size: 11px; font-weight: 900; box-shadow: 0 1px 5px rgba(0,0,0,.15); cursor: pointer; }
/* 套裝收集卡 */
.fu-set { padding: 14px 14px 12px; border-radius: 22px; color: #fff4dc;
  background: radial-gradient(circle at 85% 0%, rgba(255,214,120,.35), transparent 55%), linear-gradient(160deg, #1f7a40, #0d4a24); box-shadow: 0 8px 22px rgba(10,70,30,.3); }
.fu-set .hd { display: flex; justify-content: space-between; align-items: baseline; }
.fu-set .hd b { font: 900 17px var(--serif); color: #ffe58a; }
.fu-set .hd span { font-weight: 900; }
.fu-set .pcs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 10px 0 8px; }
.fu-set .pc { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: .45; filter: grayscale(.8); }
.fu-set .pc.own { opacity: 1; filter: none; }
.fu-set .th { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 22px; overflow: hidden; }
.fu-set .pc.own .th { background: radial-gradient(circle, rgba(255,240,190,.55), rgba(255,255,255,.12)); box-shadow: inset 0 0 0 1.5px #e8b423; }
.fu-set .pc i { font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; }
.fu-set .bar { height: 8px; border-radius: 99px; background: rgba(0,0,0,.25); overflow: hidden; }
.fu-set .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffe58a, #e8b423); }
.fu-set .tip { margin: 8px 0 8px; font-size: 12px; text-align: center; }
.fu-set .btns { display: flex; gap: 8px; }
.fu-set .btns .fu-ibtn { flex: 1; }
.fu-ibtn { width: 100%; height: 36px; margin-top: 2px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #e0442e, #b31d12); color: #fff; font-weight: 900; font-size: 13.5px; cursor: pointer; }
.fu-ibtn:disabled { background: #e3d5b8; color: #9a8762; }
.fu-ibtn.wear { background: linear-gradient(180deg, #22c55e, #15803d); }
.fu-ibtn.ghost { background: #fff; color: #6b4a2a; box-shadow: inset 0 0 0 1.5px #d9bf8f; }
/* 廟務：香火 */
.fu-incense { padding: 18px 16px; border-radius: 22px; color: #fff4dc; text-align: center;
  background: radial-gradient(circle at 50% 120%, rgba(255,140,40,.55), transparent 60%), linear-gradient(180deg, #3a1a10, #6a2414); }
.fu-incense .fu-k { color: rgba(255,240,210,.8); }
.fu-incense .num b { font: 900 42px var(--serif); color: #ffe066; text-shadow: 0 0 18px rgba(255,180,40,.5); }
.fu-incense .num span { font-size: 15px; opacity: .75; }
.fu-incense .fu-k2 { color: rgba(255,240,210,.85); }
.fu-ibar { height: 12px; margin: 10px 4px 6px; border-radius: 9px; background: rgba(255,255,255,.12); overflow: hidden; }
.fu-ibar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #ffd34d, #ff7a1f, #ff3b2b); box-shadow: 0 0 12px rgba(255,120,40,.8); }
.fu-mile { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 6px; border-radius: 14px; background: #fbf4e6; color: #9a7b58; }
.fu-mile .ic { font-size: 22px; filter: grayscale(1) opacity(.6); }
.fu-mile .nm { flex: 1; font-size: 14px; font-weight: 700; }
.fu-mile .nd { font-size: 12.5px; font-weight: 900; }
.fu-mile.on { background: linear-gradient(90deg, #fff1c2, #ffe09a); color: #5a2a10; }
.fu-mile.on .ic { filter: none; }
.fu-mile.on .nd { color: #15803d; }
/* 許願 */
.fu-wchips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.fu-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 6px; }
.fu-plaque { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 10px 12px; border-radius: 10px 10px 18px 18px; font-family: var(--serif); color: #fff4dc;
  background: linear-gradient(180deg, #b8763a, #8f5524); box-shadow: inset 0 0 0 2px rgba(255,230,170,.3), 0 4px 0 #5e3412; }
.fu-plaque::before { content: ''; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #c8261b; box-shadow: 0 0 0 2.5px #ffd34d; }
.fu-plaque .w { font-size: 18px; font-weight: 900; letter-spacing: .12em; }
.fu-plaque .n { font-size: 12px; opacity: .85; }
.fu-plaque .lk { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 5px 14px; border: 0; border-radius: 999px; background: #fff7e6; color: #a3170d; font-weight: 900; cursor: pointer; }
.fu-plaque .lk:disabled { opacity: .6; }
/* 帳號 */
.fu-back { align-self: flex-start; padding: 6px 12px; border: 0; border-radius: 999px; background: #f3e4c6; color: #8a5d3a; font-weight: 800; cursor: pointer; }
.fu-acct-ok { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, #ecfbe9, #fffdf8); box-shadow: 0 1px 0 #cdeac6; }
.fu-acct-ok .ic { font-size: 34px; }
.fu-acct-ok b { font-size: 22px; color: #15803d; }
.fu-acct-ok span { font-size: 13px; line-height: 1.7; color: #4a6a44; }
.fu-stack { display: flex; flex-direction: column; gap: 10px; }
.fu-stack > * { flex: none; }
.fu-input { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid #e2c48a; background: #fffdf7; font-size: 16px; color: #3a2416; box-sizing: border-box; }
.fu-input:focus { outline: none; border-color: #c8261b; box-shadow: 0 0 0 4px rgba(200,38,27,.12); }
.fu-btn { width: 100%; height: 52px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #e0442e, #b31d12); color: #fff; font-size: 16px; font-weight: 900; letter-spacing: .08em; cursor: pointer; box-shadow: 0 4px 0 #7a0f0f; }
.fu-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a0f0f; }
.fu-btn:disabled { opacity: .55; box-shadow: none; }
.fu-btn.gold { background: linear-gradient(180deg, #ffd34d, #e3a91e); color: #6b2a10; box-shadow: 0 4px 0 #8a5a00; }
/* 稱號徽章（HTML 版） */
.tbadge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 2px solid; font-weight: 900; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.18); white-space: nowrap; }
.tbadge.sm { font-size: 12px; padding: 3px 9px; }
@keyframes fuShake { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-3px); } }
/* 簽到／抽籤蓋章動畫 */
.stampfx { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(255,200,80,.25), rgba(0,0,0,0) 60%); animation: fadeOut 2.2s ease forwards; }
.stamp { padding: 22px 30px; border: 6px double #fff2c4; border-radius: 22px; background: radial-gradient(circle at 35% 30%, #ff6b5a, #c81e1e 60%, #8e1208); color: #fff3d6;
  text-align: center; font-family: var(--serif); box-shadow: 0 10px 0 #6e0d06, 0 0 60px rgba(255,120,60,.6); animation: stampIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.stamp .st1 { font-size: 34px; font-weight: 900; }
.stamp .st2 { margin-top: 4px; font-size: 15px; }
@keyframes stampIn { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
@keyframes fadeOut { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* 帳號 */
.acct-bnr { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 2px dashed #c81e1e; border-radius: 16px; background: linear-gradient(90deg, #fff1c2, #ffe4a3); color: #6b1a10; text-align: left; cursor: pointer; }
.acct-bnr b { font-size: 15px; }
.acct-bnr span { font-size: 12.5px; }
.acct-who { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, #e9f9e7, #fff8e8); border: 1px solid #b7e4b0; }
.acct-who b { font-size: 18px; color: #15803d; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack > * { flex: none; }
.stack .btn-main { height: 46px; margin-top: 2px; }
details.adv summary { cursor: pointer; list-style: none; }
details.adv summary::before { content: '▸ '; }
details.adv[open] summary::before { content: '▾ '; }
/* 今日任務小標（一直掛在左上角，任務完成會閃一下） */
.task-pill { position: fixed; z-index: 9; top: calc(var(--safe-t) + 90px); left: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,214,120,.45); background: rgba(120,20,12,.82); color: #fff3d6; font-size: 12.5px; font-weight: 700;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.task-pill b { color: #ffe066; }
.task-pill.done { background: rgba(21,128,61,.85); border-color: rgba(190,255,190,.5); }
.task-pill.flash { animation: taskFlash .9s ease 2; }
@keyframes taskFlash { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); box-shadow: 0 0 24px rgba(255,214,102,.9); } }
/* 窄螢幕（手機直拿）：上方列塞不下，品牌字先藏起來，福氣按鈕才不會被擠出畫面 */
@media (max-width: 440px) {
  .brand-name, .brand .sep { display: none; }
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .pill { padding: 0 10px; }
}
/* 廟方公告橫幅 */
.notice-bar { position: fixed; z-index: 75; top: calc(var(--safe-t) + 10px); left: 50%; transform: translateX(-50%); max-width: 92vw; padding: 12px 20px; border-radius: 16px;
  background: linear-gradient(180deg, #c8261b, #8e1208); color: #fff4dc; font-size: 15px; font-weight: 800; text-align: center; box-shadow: 0 0 0 2px #e8b84a, 0 10px 30px rgba(0,0,0,.4); animation: fuIn .3s ease; }
/* GM 管理頁 */
.fu-gm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fu-gm-stats div { padding: 12px; border-radius: 14px; background: #fbf4e6; text-align: center; }
.fu-gm-stats b { display: block; font-size: 24px; color: #8e1b12; }
.fu-gm-stats span { font-size: 12px; color: #8a6a48; }
/* 管理員數據表（KIRK 11/12「一到四都做」）：第一欄名稱、後面數字靠右；手機寬度放得下四、五欄 */
.fu-gm-tbl { display: grid; gap: 0; margin: 10px 0 0; border: 1px solid #ecdcbc; border-radius: 12px; overflow: hidden; font-size: 13px; background: #fffaf0; }
.fu-gm-tbl span { padding: 8px 6px; border-top: 1px solid #f1e5cc; color: #5a3c22; overflow-wrap: anywhere; min-width: 0; }
.fu-gm-tbl span.n { text-align: right; font-variant-numeric: tabular-nums; }
.fu-gm-tbl span.h { border-top: 0; background: #f6ead2; color: #8e1b12; font-weight: 700; font-size: 12px; }
.fu-gm-stats + .fu-gm-tbl, .fu-gm-tbl + .fu-gm-stats { margin-top: 10px; }
.fu-tab.gm[aria-current="true"] { background: linear-gradient(180deg, #2b1a10, #4a2a15); }

/* =============================================================
   我的光明燈（今日分頁）
   ============================================================= */
.fu-lamp { padding: 16px; border-radius: 22px; color: #fff4dc; background: radial-gradient(circle at 20% 30%, rgba(255,190,90,.25), transparent 60%), linear-gradient(160deg, #3a1f12, #1c0f08); box-shadow: 0 8px 22px rgba(40,15,5,.35); }
.fu-lamp .top { display: flex; align-items: center; gap: 16px; }
.fu-lamp .lamp { --lc: #ff4a2a; --lb: 1; position: relative; flex: none; width: 74px; height: 104px; display: flex; flex-direction: column; align-items: center; }
.fu-lamp .lamp .cap { width: 34px; height: 9px; border-radius: 4px; background: linear-gradient(#ffe08a, #c9921a); }
.fu-lamp .lamp .body { width: 64px; height: 72px; border-radius: 50% / 46%; background: radial-gradient(circle at 50% 45%, #fff6d6 0%, var(--lc) 50%, #5a1a08 115%);
  opacity: calc(.35 + var(--lb) * .65); box-shadow: 0 0 calc(var(--lb) * 34px) calc(var(--lb) * 10px) var(--lc); }
.fu-lamp .lamp .tas { width: 6px; height: 14px; border-radius: 0 0 3px 3px; background: #c8261b; }
.fu-lamp.lit .lamp .body { animation: lampGlow 2.4s ease-in-out infinite; }
@keyframes lampGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.fu-lamp .info { flex: 1; min-width: 0; }
.fu-lamp .row { display: flex; gap: 10px; margin-top: 12px; }
.fu-lamp .row .fu-btn { flex: 1.4; height: 48px; font-size: 15px; letter-spacing: .02em; }
.fu-lamp .fu-note { color: rgba(255,240,210,.7); }
.fu-lamp .fu-k { color: rgba(255,240,210,.8); }
.fu-lamp .fu-k2 { color: rgba(255,240,210,.9); font-weight: 700; }
.fu-btn.ghost { background: #fff; color: #8a6a48; box-shadow: inset 0 0 0 1.5px #e2c48a; }

/* =============================================================
   毛孩分頁
   ============================================================= */
.pimg { display: grid; place-items: center; overflow: hidden; }
.pimg img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(80,40,10,.25)); }
.pimg .emo { font-size: 34px; }
/* 領養 */
.fu-adopt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fu-adopt-i { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px 10px; border-radius: 18px; border: 2px solid #ecd9b4; background: linear-gradient(#fffaf0, #f7ead2); cursor: pointer; color: #4a2a12; }
.fu-adopt-i .pimg { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; background: radial-gradient(circle, #fff, #fbefd6); }
.fu-adopt-i b { font: 900 15px var(--serif); }
.fu-adopt-i span { font-size: 10.5px; line-height: 1.35; color: #8a6a48; }
.fu-adopt-i.on { border-color: #e8452c; box-shadow: 0 0 0 3px rgba(232,69,44,.18); }
/* 主角卡 */
.fu-pet { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 22px; background: radial-gradient(circle at 20% 40%, #fff, #fdf1d8 60%, #f5dfae); box-shadow: 0 6px 16px rgba(120,70,20,.15); }
.fu-pet .pimg.big { flex: none; width: 128px; height: 128px; border-radius: 20px; background: radial-gradient(circle at 50% 60%, #fff 0%, #ffeccb 70%); }
.fu-pet .info { flex: 1; min-width: 0; color: #4a2a12; }
.fu-pet .nm { display: flex; align-items: center; gap: 8px; }
.fu-pet .nm b { font: 900 22px var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-pet .nm .fu-input { height: 38px; font-size: 15px; }
.fu-pet .sub { font-size: 12.5px; color: #8a6a48; font-weight: 700; }
.fu-pet .fu-ibar { margin: 8px 0 4px; height: 10px; background: rgba(120,70,20,.15); }
.fu-pet .fu-ibar i { background: linear-gradient(90deg, #ff9fc6, #ff5a8a); box-shadow: none; }
.fu-pet .fu-k2 { color: #8a6a48; font-size: 11.5px; }
.fu-pet .mood { margin-top: 6px; font-size: 13px; font-weight: 800; color: #b3461d; }
.fu-mini { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: #e8452c; color: #fff; font-weight: 800; font-size: 12px; cursor: pointer; }
.fu-mini.ghost { background: rgba(120,70,20,.1); color: #8a6a48; }
/* 照顧按鈕 */
.fu-care { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fu-care-b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #e8d3a8, 0 4px 12px rgba(120,70,20,.1); color: #4a2a12; cursor: pointer; }
.fu-care-b .ic { font-size: 28px; }
.fu-care-b b { font-size: 14px; }
.fu-care-b small { font-size: 11px; color: #8a6a48; }
.fu-care-b:active { transform: translateY(2px); box-shadow: 0 1px 0 #e8d3a8; }
.fu-care-b:disabled { opacity: .45; }
/* 出巡中、回來了 */
.fu-out { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: #fff7e6; border: 1.5px dashed #e2c48a; }
.fu-out .ic { font-size: 28px; }
.fu-out .txt { flex: 1; font-weight: 800; color: #6b4a2a; }
.fu-out .fu-btn { width: auto; flex: none; height: 44px; padding: 0 16px; font-size: 14px; letter-spacing: 0; }
.fu-back { position: relative; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, #fff6dc, #ffe2a8); text-align: center; box-shadow: 0 0 0 2px #e8b84a, 0 10px 24px rgba(200,140,20,.25); animation: fuIn .3s ease; }
.fu-back h3 { margin: 2px 0 10px; font: 900 18px var(--serif); color: #8a3a10; }
.fu-back .card { width: 100%; border-radius: 10px; box-shadow: 0 6px 16px rgba(80,40,10,.25); transform: rotate(-1.5deg); }
.fu-back .got { margin: 8px 0 0; font-weight: 800; color: #6b4a2a; }
.fu-back .got.rare { color: #7c3aed; }
.fu-back .x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); font-size: 14px; cursor: pointer; }
/* 我的毛孩們 */
.fu-mypets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.fu-mypet { flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 16px; border: 2px solid transparent; background: #fbf4e6; cursor: pointer; color: #4a2a12; }
.fu-mypet .pimg.sm { width: 64px; height: 64px; }
.fu-mypet span { font-size: 12.5px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-mypet small { font-size: 10.5px; color: #8a6a48; }
.fu-mypet.on { border-color: #22c55e; background: #f1fbef; }
/* 明信片冊 */
.fu-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fu-post { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px; border: 0; border-radius: 10px; background: #f3e6cc; cursor: pointer; color: #8a6a48; }
.fu-post img { width: 100%; border-radius: 6px; }
.fu-post span { display: grid; place-items: center; width: 100%; aspect-ratio: 508 / 374; /* 跟明信片圖一樣的比例（480+28 × 320+54） */ border-radius: 6px; background: repeating-linear-gradient(45deg, #ead7b2, #ead7b2 6px, #e2cda4 6px, #e2cda4 12px); font: 900 22px var(--serif); color: #b89a6a; }
.fu-post small { font-size: 10.5px; font-weight: 700; }
.fu-post.on small { color: #4a2a12; }
.fu-post-big { width: 100%; margin-bottom: 10px; border-radius: 12px; box-shadow: 0 8px 20px rgba(80,40,10,.25); cursor: pointer; }
/* 右側快捷列：毛孩按鈕 */
.rail-btn.pet-rail .ri { font-size: 22px; line-height: 1; }
.rail-btn.pet-rail.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 2px rgba(26,21,16,.8), 0 0 8px #ff3b3b; animation: arcPulse 1.2s ease-in-out infinite; }

/* ---------- 晚上 8～12 點福氣加倍 ---------- */
.fu-x2 { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(120deg, #1d2350, #3a2a6a); color: #e9e4ff; }
.fu-x2 b { font-size: 14px; color: #ffe066; }
.fu-x2 span { font-size: 11.5px; opacity: .85; }
.fu-x2.on { background: linear-gradient(120deg, #3a1d6a, #7a2a8a, #c8261b); box-shadow: 0 0 0 2px #ffd34d, 0 6px 20px rgba(200,40,120,.35); animation: x2Glow 2s ease-in-out infinite; }
@keyframes x2Glow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.rail-btn.bless-pill.x2::before { content: '×2'; position: absolute; left: -8px; top: -8px; padding: 1px 6px; border-radius: 99px; background: #ffd34d; color: #8a1a08; font-size: 11px; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
/* 毛孩：跟著我按鈕、清單上的腳印標記 */
.fu-follow { margin-top: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: #e8452c; color: #fff; font-weight: 900; font-size: 13px; cursor: pointer; }
.fu-follow.on { background: #8a5a2b; } /* 跟著中：按鈕是「讓牠回家休息」，用木頭色 */
.fu-follow:disabled { opacity: .5; }
.fu-mypet { position: relative; }
.fu-mypet .fl { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: 14px; }

/* ---------- 新手引導（小虎爺帶路）：在福氣小冊（35）之上、蓋章（60）和提示（70）之下 ---------- */
.tut { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
/* 聚光圈：外面一大圈陰影把其他地方變暗；本身不擋手指，玩家直接按圈裡的真按鈕 */
.tut-ring { position: fixed; border-radius: 16px; pointer-events: none; border: 3px solid #ffd76a;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.42), 0 0 18px 4px rgba(255,200,80,.85); animation: tutPulse 1.2s ease-in-out infinite;
  transition: left .2s, top .2s, width .2s, height .2s; }
@keyframes tutPulse { 50% { border-color: #fff3c4; box-shadow: 0 0 0 9999px rgba(0,0,0,.42), 0 0 28px 8px rgba(255,200,80,1); } }
.tut-finger { position: fixed; font-size: 34px; transform: translate(-30%, 0); pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation: tutTap .9s ease-in-out infinite; }
@keyframes tutTap { 50% { transform: translate(-30%, -10px) scale(.9); } }
/* 對話泡泡：預設在下方（避開底下的動作列），目標在下半部時改到上方 */
.tut-bub { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 92px); width: min(calc(100vw - 24px), 420px);
  pointer-events: auto; padding: 14px 14px 12px; border-radius: 20px; background: linear-gradient(160deg, #fffaf0, #f6ead2); color: var(--ink);
  border: 2px solid #e2b54c; box-shadow: 0 12px 34px rgba(0,0,0,.4); animation: tutIn .3s ease; }
.tut-bub.top { bottom: auto; top: calc(var(--safe-t) + 10px); }
.tut-bub.mid { bottom: auto; top: 50%; transform: translate(-50%, -50%); }
/* v79：導覽介紹設施時，底下的拜拜導航先藏起來（手機版籤詩櫃會被蓋到） */
body.tut-nodock #actionbar { visibility: hidden; }
.tut-x { position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e2b54c; background: #fff7e6; color: #9e2a1e; font-size: 16px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.tut-bub.top .tut-x, .tut-bub.mini .tut-x { top: auto; bottom: -12px; }
@keyframes tutIn { from { opacity: 0; margin-top: 12px; } }
.tut-head { display: flex; gap: 12px; align-items: center; }
.tut-face { flex: 0 0 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff1c9, #f2c25a); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(160,100,20,.35); }
.tut-face img { width: 118%; height: 118%; object-fit: cover; }
.tut-words b { display: block; font-size: 17px; font-weight: 900; color: #9e2a1e; line-height: 1.35; }
.tut-words p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.tut-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2d8c7; }
.tut-dots i.on { background: #e8452c; transform: scale(1.25); }
.tut-dots i.done { background: #d9a441; }
.tut-btns { display: flex; gap: 8px; margin-left: auto; }
.tut-skip { height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--ink-soft); font-size: 13.5px; cursor: pointer; }
.tut-go { height: 44px; min-width: 112px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 15.5px; font-weight: 900; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ef5a3c, #b8261a); box-shadow: 0 4px 0 #7d150c, 0 6px 14px rgba(180,40,20,.35); }
.tut-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #7d150c; }
/* 導覽時泡泡小一點，讓出畫面看設施 */
.tut-bub.tour { padding: 10px 12px 10px; }
.tut-bub.tour .tut-face { flex-basis: 44px; height: 44px; font-size: 28px; }
.tut-bub.tour .tut-words b { font-size: 16px; }
.tut-bub.tour .tut-words p { font-size: 14px; }
.tut-bub.tour .tut-row { margin-top: 8px; }
.tut-count { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
/* 目標在福氣小冊裡：泡泡縮成一條放最上面，不蓋住小冊內容 */
.tut-bub.mini { top: calc(var(--safe-t) + 6px); bottom: auto; padding: 8px 12px; border-radius: 16px; width: min(calc(100vw - 16px), 460px); }
.tut-bub.mini .tut-head { gap: 10px; }
.tut-bub.mini .tut-face { flex-basis: 38px; height: 38px; font-size: 24px; }
.tut-bub.mini .tut-words b { font-size: 14.5px; }
.tut-bub.mini .tut-words p { margin-top: 2px; font-size: 13px; line-height: 1.45; }
.tut-bub.mini .tut-row { margin-top: 4px; }
.tut-bub.mini .tut-skip { height: 30px; }

/* ---------- 加到手機桌面 ---------- */
.install-rail .ri { font-size: 18px; line-height: 1; }
.install-ico { display: block; margin: 0 auto 8px; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.install-steps { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.install-steps li { position: relative; padding: 10px 12px 10px 44px; border-radius: 12px; background: var(--paper-2); color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.install-steps li::before { content: attr(data-n); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--red); color: #fff; font-size: 13px; font-weight: 900; }

/* ---------- 夜市闖關：選關（1～10 關）、結果 ---------- */
.arc-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.arc-levels button { position: relative; height: 52px; border-radius: 12px; border: 2px solid rgba(255,220,150,.35); background: rgba(255,255,255,.08);
  color: #fbf3e4; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.arc-levels button .st { position: absolute; top: 2px; right: 4px; font-size: 11px; }
.arc-levels button.done { background: linear-gradient(180deg, rgba(255,215,90,.35), rgba(255,180,40,.18)); border-color: #e8b84a; }
.arc-levels button.next { border-color: #ff7a59; box-shadow: 0 0 0 2px rgba(255,122,89,.35); }
.arc-levels button.sel { background: linear-gradient(180deg, #ffe58a, #e8a317); color: #2b1600; border-color: #fff3c4; }
.arc-levels button:disabled { opacity: .4; }
.arc-lvinfo { white-space: pre-line; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.6; background: rgba(255,214,120,.12); border: 1px solid rgba(255,214,120,.3); color: #ffe9b0; }
.arc-lvres { margin: 0; padding: 10px 12px; border-radius: 14px; text-align: center; font-size: 16px; font-weight: 900; line-height: 1.6; white-space: pre-line;
  background: rgba(255,255,255,.08); color: #fff; }
.arc-lvres.pass { background: linear-gradient(180deg, rgba(74,222,128,.28), rgba(34,197,94,.14)); color: #dcfce7; }
.arc-lvres.fail { background: rgba(255,120,90,.16); color: #ffe0d6; }
.arc-board .lv { padding: 2px 8px; border-radius: 999px; background: rgba(255,214,120,.18); color: #ffd76a; font-size: 12px; font-weight: 900; white-space: nowrap; }

/* ---------- FB／IG 內建瀏覽器提示條（跳不出去時一直顯示，可以關掉） ---------- */
.iab-bar { position: fixed; z-index: 80; top: calc(var(--safe-t) + 8px); left: 8px; right: 8px; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #ffe58a, #f2b632); color: #3a2200;
  font-size: 14px; font-weight: 800; line-height: 1.5; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.iab-bar span { flex: 1; }
.iab-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.12); color: #3a2200; font-size: 16px; }

/* ===== v57 龍池許願 ===== */
.pool-cats button { min-height: 36px; }
.pool-label { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--ink); }
.pool-label b { color: #a8231a; }
.pool-amt-row { display: flex; gap: 8px; }
.pool-quick { margin: 8px 0 4px; }
.pool-quick button { min-width: 56px; min-height: 36px; }
.pool-bless { margin: 12px 0 8px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #eaf6f1, #d6efe6); color: #1f4f3e; font-family: var(--serif); font-size: 17px; line-height: 1.6; text-align: center; }
.pool-err { margin: 8px 0 0; color: #b42318; font-size: 13.5px; text-align: center; }

/* ===== V1.1 擲筊福袋、本月修行、邀請好友、每週限定 ===== */
.fu-bag { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fu-bag .fu-note { margin: 0; flex: 1 1 160px; }
.fu-bag-btn { min-height: 40px; }
.fu-pass { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.fu-pass-t { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border-radius: 12px; border: 1.5px solid #e2c48a; background: #fffdf7; color: #3a2416; font-size: 12px; }
.fu-pass-t b { font-size: 14px; }
.fu-pass-t.can { background: linear-gradient(180deg, #ffe7a3, #f5c451); border-color: #d99a1e; font-weight: 700; }
.fu-pass-t.got { opacity: .6; }
.fu-inv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fu-inv-url { flex: 1 1 180px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: #f6efe2; font-size: 12px; word-break: break-all; user-select: all; }
.fu-week { position: absolute; top: 30px; left: 6px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: #c62828; color: #fff; font-size: 11px; font-weight: 700; }
.ritual-pill { top: calc(var(--safe-t) + 124px); text-decoration: none; background: rgba(140,90,10,.85); }
.ritual-pill b { color: #fff; }
.fortune-share { margin-top: 10px; background: #1f6b4a; }

/* ===== v62 手機版排版檢查 ===== */
.ritual-pill { max-width: calc(100vw - 110px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) {
  /* 法會倒數小標跟中間的活動橫幅錯開（橫幅往下移） */
  .event-banner { top: calc(var(--safe-t) + 162px); }
  .fu-pass { gap: 4px; }
  .fu-pass-t { font-size: 11px; min-height: 48px; padding: 5px 2px; }
  .fu-pass-t b { font-size: 13px; }
  .fu-bag { flex-direction: column; align-items: stretch; }
  .fu-bag-btn { width: 100%; }
  .fu-inv .fu-chip { width: 100%; }
  .pool-quick button { flex: 1 1 22%; min-width: 0; }
  #ritualInfoModal .card, #poolModal .card { max-height: calc(100dvh - 40px); overflow-y: auto; }
}

/* ---------- v65 遶境回駕 ---------- */
.rao-pill { top: calc(var(--safe-t) + 158px); background: linear-gradient(180deg, #c8261a, #8a120a); color: #ffe58a; border-color: #f2c94c; }
.rao-pill b { color: #fff; margin-left: 4px; }
.rao-bar { display: inline-block; width: 64px; height: 6px; margin-left: 8px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; vertical-align: middle; }
.rao-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd34d, #fff3b0); border-radius: inherit; transition: width .4s; }
.rao-bar.big { display: block; width: 100%; height: 12px; margin: 6px 0 2px; background: rgba(120,30,10,.15); }
.rao-card .rao-gods { margin: -4px 0 10px; font-weight: 900; color: #a8231a; letter-spacing: .08em; }
.rao-list { margin: 0 0 10px; padding: 0; list-style: none; text-align: left; }
.rao-list li { padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; background: #fff6e6; border: 1px solid #f1d9a8; font-size: 14px; line-height: 1.5; }
.rao-list li.now { background: #ffe9d6; border-color: #e0582a; box-shadow: 0 0 0 2px rgba(224,88,42,.15); }
.rao-list li b { color: #8a120a; }
.rao-cheer { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: #fff1e0; border: 1px solid #f1c79a; text-align: left; }
.rao-cheer-top { display: flex; justify-content: space-between; font-weight: 900; color: #8a120a; }
@media (max-width: 520px) {
  .rao-pill { font-size: 13px; }
  .rao-list li { font-size: 13px; padding: 7px 9px; }
}

/* ---------- v74 特殊角色入場廣播：上方中間一條金邊紅底橫幅，滑下來＋微微發光 ---------- */
.npc-banner { position: fixed; z-index: 40; top: calc(var(--safe-t) + 14px); left: 50%; transform: translateX(-50%); max-width: min(92vw, 560px);
  padding: 10px 18px 10px 16px; border-radius: 14px; border: 2px solid #f2c94c;
  background: linear-gradient(180deg, rgba(178,34,24,.96), rgba(120,14,8,.96)); color: #fff6d6;
  font: 900 15px/1.45 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; letter-spacing: .02em; text-align: center;
  box-shadow: 0 8px 26px rgba(120,20,10,.45), 0 0 0 4px rgba(242,201,76,.18); pointer-events: none; }
.npc-banner.pop { animation: npcBannerIn .55s cubic-bezier(.2,1.4,.4,1) both, npcBannerGlow 1.6s ease-in-out .55s 3; }
@keyframes npcBannerIn { from { opacity: 0; transform: translate(-50%, -26px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes npcBannerGlow { 50% { box-shadow: 0 8px 26px rgba(120,20,10,.45), 0 0 0 7px rgba(242,201,76,.35); } }
@media (max-width: 520px) { .npc-banner { top: calc(var(--safe-t) + 62px); font-size: 13px; padding: 8px 12px; } }

/* ---------- v76 阿年老師點歌視窗 ---------- */
.busker-card { background: linear-gradient(180deg, #fffaf0, #fff1f8); }
.busker-card h2 { color: #5a2a8a; }
.busker-lyric { margin: 8px 0 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, #2b1a4a, #14102a); color: #fff6d6;
  font: 700 15px/1.75 "Noto Serif TC", "PingFang TC", serif; text-align: center; box-shadow: inset 0 0 0 2px rgba(255,211,77,.35); white-space: pre-line; }
.busker-lyric .t { display: block; margin-bottom: 4px; color: #ffd34d; font: 900 13px/1.4 "Noto Sans TC", sans-serif; letter-spacing: .08em; }
.busker-lyric .ln { display: block; opacity: 0; transform: translateY(6px); animation: lyricIn .5s ease forwards; }
@keyframes lyricIn { to { opacity: 1; transform: none; } }
.busker-sub { margin: 4px 0 6px; font-size: 12px; color: #8a6a9a; }
.busker-extra .chip { background: #fff; border-color: #e8c6f0; }

/* v92 服務台點燈登記表單 */
.lamp-form { margin-top: 10px; text-align: left; }
.lf-label { display: block; margin: 8px 0 0; font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.lf-cal { display: flex; gap: 16px; margin: 4px 0; font-size: 14px; }
.lf-cal label { display: inline-flex; align-items: center; gap: 4px; }
.lf-cal input { width: auto; margin: 0; }
.lf-date { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; }
.lf-hint { font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.lf-err { min-height: 1.2em; margin: 4px 0 0; font-size: 13px; color: #b3261e; }
.lf-mine { margin-top: 10px; text-align: left; font-size: 14px; }
.lf-mine button { display: block; width: 100%; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--ink); text-align: left; }
.lf-mine button:hover { border-color: var(--gold); }
.chip-hot { border-color: var(--gold); background: rgba(201,162,74,.12); }

/* v92 自助收款機（模擬真機的觸控畫面） */
.kiosk-card { width: min(94vw, 440px); background: #0f1b2d; color: #f3ead6; border: 3px solid #3b4a63; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px #6c7c99; }
.kiosk-card .card-kicker { color: #e3c06c; }
.kiosk-card h2 { color: #fff; }
.kiosk-top { position: relative; padding-right: 36px; }
.kiosk-top .x { position: absolute; right: -6px; top: -6px; color: #fff; background: #182742; border: 1px solid #6c7c99; }
.kiosk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.kiosk-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border: 1px solid #3b4a63; border-radius: 12px; background: #182742; color: #f3ead6; text-align: left; font: inherit; }
.kiosk-item:hover, .kiosk-item:focus-visible { border-color: #e3c06c; background: #1f3156; outline: none; }
.kiosk-item .ki-name { font-size: 15px; font-weight: 600; }
.kiosk-item .ki-price { font-size: 13px; color: #e3c06c; }
.kiosk-item .ki-tag { font-size: 11px; color: #9fb0cc; }
.kiosk-item.sold { opacity: .45; pointer-events: none; }
.kiosk-pay { margin-top: 10px; }
.kiosk-sel { padding: 12px; border-radius: 12px; background: #182742; border: 1px solid #3b4a63; }
.kiosk-sel-name { font-size: 18px; font-weight: 600; }
.kiosk-sel-desc { margin-top: 4px; font-size: 13px; color: #c9d3e6; line-height: 1.5; }
.kiosk-qty { display: flex; align-items: center; gap: 12px; margin: 12px 0 6px; font-size: 14px; }
.kiosk-qty button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid #3b4a63; background: #182742; color: #fff; font-size: 20px; }
.kiosk-qty output { min-width: 28px; text-align: center; font-size: 18px; }
.kiosk-total { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; font-size: 14px; }
.kiosk-total strong { font-size: 22px; color: #e3c06c; }
.kiosk-go { background: #c8362b; color: #fff; }
.kiosk-hint { color: #9fb0cc; font-size: 11px; line-height: 1.5; }
.kiosk-card .btn-text { color: #c9d3e6; }


/* v94 玩家攤位 */
.ps-kinds { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; margin: 8px 0; }
.ps-kinds button { padding: 8px 2px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.ps-kinds button .ic { display: block; font-size: 22px; }
.ps-kinds button.on { border-color: var(--gold); background: rgba(201,162,74,.15); }
.ps-stat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 6px 0 10px; }
.ps-stat div { text-align: center; padding: 8px 0; border-radius: 12px; background: rgba(0,0,0,.04); }
.ps-stat b { display: block; font-size: 20px; color: var(--gold); }
.ps-stat span { font-size: 11px; color: var(--ink-soft); }
.ps-cust { padding: 12px; border-radius: 12px; background: rgba(0,0,0,.04); text-align: center; font-size: 14px; margin-bottom: 8px; }
.ps-cust.on { background: rgba(255,214,102,.3); font-weight: 700; animation: pspulse 1s infinite; }
@keyframes pspulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.ps-serve { height: 56px; font-size: 18px; }
.ps-hint { font-size: 11px; line-height: 1.5; margin-top: 8px; }

/* v94 我的攤小面板：左下角、不擋畫面 */
.ps-dock { position: fixed; z-index: 14; left: 10px; bottom: calc(var(--safe-b, 0px) + 82px); width: min(calc(100vw - 20px), 260px); padding: 10px 12px; border-radius: 16px;
  background: rgba(247,243,236,.94); color: var(--ink); box-shadow: 0 12px 36px rgba(0,0,0,.28); animation: pop .2s ease; pointer-events: auto; }
.ps-dock-head { display: flex; align-items: center; justify-content: space-between; }
.ps-dock-head b { font-size: 14px; letter-spacing: .05em; }
.ps-dock-head .x { width: 26px; height: 26px; font-size: 12px; }
.ps-dock-stat { display: flex; justify-content: space-between; margin: 4px 0 6px; font-size: 11px; color: var(--ink-soft); }
.ps-dock-stat b { color: var(--gold); font-size: 13px; }
.ps-dock .ps-cust { padding: 7px; font-size: 12px; margin-bottom: 6px; }
.ps-dock .ps-serve { height: 44px; font-size: 16px; }
.ps-dock-row { display: flex; gap: 5px; margin-top: 6px; }
.ps-dock-row button { flex: 1; padding: 6px 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 11px; }
.ps-dock-row button:disabled { opacity: .5; }
@media (max-width: 520px) { .ps-dock { bottom: calc(var(--safe-b, 0px) + 92px); width: min(calc(100vw - 20px), 230px); } }

/* v95 阿年老師：改成左下角小面板，不擋畫面（看得到老師在唱） */
.busker-dock { position: fixed; z-index: 14; left: 10px; bottom: calc(var(--safe-b, 0px) + 82px); width: min(calc(100vw - 20px), 300px); pointer-events: auto; }
.busker-dock .card { width: 100%; max-height: 52vh; padding: 12px 14px 10px; border-radius: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.28); background: rgba(247,243,236,.95); }
.busker-dock .card h2 { font-size: 17px; }
.busker-dock .bubble-text { font-size: 13px; padding: 8px 10px; }
.busker-dock .chair-opts { gap: 5px; }
.busker-dock .chip { padding: 6px 8px; font-size: 12px; }
@media (max-width: 520px) { .busker-dock { bottom: calc(var(--safe-b, 0px) + 92px); width: min(calc(100vw - 20px), 250px); } .busker-dock .card { max-height: 46vh; } }

/* v95 線上祈福燈：實體光明燈連結按鈕 */
#lfReal { display: flex; margin-top: 8px; }
#lampReal { display: flex; margin-top: 10px; }

/* v95-16 走進牌樓光圈跳出的「回廣場」小視窗（先不開放：links.hall 沒設定時不會出現） */
.hall-exit { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22vh); transform: translateX(-50%); z-index: 60;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: min(84vw, 320px); padding: 16px 16px 14px;
  background: #fffaf0; border: 2px solid #c8322b; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.hall-exit-hidden { display: none; }
.hall-exit p { flex: 1 0 100%; margin: 0 0 4px; text-align: center; font-size: 17px; font-weight: 700; color: #5a2a12; }
.hall-exit button { flex: 1 1 0; min-height: 44px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.hall-exit-stay { background: #fff; color: #7a4a1e; border: 1px solid #c9b48a; }
.hall-exit-go { background: #c8322b; color: #fff; border: 0; }

/* ===== 手機按鈕（KIRK 11/12：「按鈕大小、會不會擋到畫面不好移動，要徹底看清楚」）=====
   用 390 寬量到：右邊的收合鈕只有 30 高、今日任務 32 高、換間的按鈕 38 高，手指不好按（一般建議至少 44）。
   外觀不變，只把「手指按得到的範圍」往外擴（透明的，不擋畫面上的東西）。 */
/* KIRK 11/12：「框不要太大，不然別人在按走路的時候會被擋住」→ 只往上下各多 5（剛好補到手指好按的高度），左右不擴 */
.rail-btn.rail-toggle::before, .task-pill::before, .room-btn::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.room-btn { position: relative; }

/* 手機第三輪（11/12，KIRK：「你就用手機版去看啊」）：福氣小冊每一頁用手機寬度看過，版面都正常；
   只有三種小按鈕偏矮（配件分類 34、「改名」30、「拿下來」約 34），加高到手指好按。 */
.fu-cat { height: 38px; }
.fu-mini { height: 34px; position: relative; }
.fu-mini::before { content: ''; position: absolute; left: -4px; right: -4px; top: -6px; bottom: -6px; }
.fu-chip { min-height: 38px; }

/* 手機第四輪（11/12，用 390 寬實際進去玩看到的兩個問題）：
   1. 廣播條（「廟埕中間的地板裂開了…」那種紅色的）在手機上剛好壓在左上「天氣」「今日任務」和右上福氣上面 → 往下移到這些按鈕的下面。
   2. 換間的清單從按鈕左邊往右長 210 寬，在手機上右半邊跑出畫面外（字被切掉）→ 改成靠右對齊、往左長。 */
@media (max-width: 520px) {
  .npc-banner { top: calc(var(--safe-t) + 168px); max-width: 86vw; }
  .room-panel { left: auto; right: 0; max-width: calc(100vw - 28px); }
  /* 3. 中間跳出來的提示（「主委從辦公室出來巡廟了！」那種深色的）也壓在天氣、今日任務上面 → 一樣往下移。 */
  .toast { top: calc(var(--safe-t) + 168px); max-width: 86vw; }
}
/* 4. 換間清單打開時，右邊的福氣按鈕會蓋在清單上面（實測量到清單 278～488、畫面只有 390 寬，而且被福氣按鈕壓住）→ 清單打開時整條上方列浮到最上面。 */
.topbar:has(.room-panel:not(.hidden)) { z-index: 12; }

/* 手機第五輪（11/12，KIRK：「這兩個要改」）
   1. 祈福燈視窗：姓名欄太窄、提示字被切掉 → 手機上姓名欄自己一整排，「找燈」「我的燈」排在下面一排。
   2. 法會倒數那一顆太長、在正殿會蓋到直播的暫停鈕 → 手機上不顯示法會全名，只顯示「🔔 法會 倒數 N 天 ›」。 */
.ritual-pill .rs { display: none; }
@media (max-width: 520px) {
  #lampPanel .field-row { flex-wrap: wrap; }
  #lampPanel .field-row input { flex: 1 1 100%; min-width: 0; }
  #lampPanel .field-row .btn-dark { flex: 1 1 0; min-height: 42px; }
  .ritual-pill .rn { display: none; }
  .ritual-pill .rs { display: inline; }
}