/* 國風介面 A「淡雅宣紙」（企劃 13-10，10-30 使用者選定）
   原則：留白多、細墨線、像寫在宣紙上；只有印章（朱砂）是重色 → 主要按鈕做成小方印的樣子，其他按鈕只留一條墨線
   這個檔載在 game.css／reward.css／map.css 之後，只改外觀；要換風格整個拿掉這個檔就回到原型樣式
   照全域規範：連結無底線、按鈕 hover 只改底色、點擊沒有黑框 */
:root {
  --pa-paper: #f3ecdc;        /* 宣紙 */
  --pa-sheet: #faf6ec;        /* 貼上去的紙片 */
  --pa-ink: #2b2620;          /* 墨 */
  --pa-ink-soft: #6b6170;     /* 淡墨（說明文字） */
  --pa-line: rgba(43, 38, 32, 0.45);   /* 墨線 */
  --pa-hair: rgba(43, 38, 32, 0.18);   /* 細格線 */
  --pa-seal: #b8352a;         /* 朱砂（唯一的重色） */
  --pa-seal-dk: #8f2a21;
  --pa-wash: rgba(43, 38, 32, 0.06);   /* hover：淡淡一層墨 */
}

/* ── 按鈕：沒有框、只有底下一條墨線；hover 只加淡墨底色（字色不變） ── */
button { background: transparent; border: 0; border-bottom: 1.5px solid var(--pa-ink); border-radius: 0; padding: 5px 10px; color: var(--pa-ink); letter-spacing: 1px; }
button:hover { background: var(--pa-wash); color: var(--pa-ink); }
button:disabled { opacity: 0.35; }
/* 主要按鈕＝一方朱砂印：唯一的重色 */
.sheet .primary, .primary, .ov-btn, .chest-row button {
  background: var(--pa-seal); color: #fbf3e6; border: 0; border-radius: 2px; padding: 7px 18px; letter-spacing: 3px;
  box-shadow: inset 0 0 0 2px rgba(251, 243, 230, 0.35); }
.sheet .primary:hover, .primary:hover, .ov-btn:hover, .chest-row button:hover { background: var(--pa-seal-dk); color: #fbf3e6; }

/* ── 上方：心、好感、錢袋、天氣、圖鑑——不要膠囊底，只有字＋底下細墨線 ── */
#hudBtns button { background: transparent; font-size: 16px; padding: 8px 12px; min-height: 40px; border-bottom: 1px solid var(--pa-line); }
#hudBtns button:hover { background: var(--pa-wash); }
#favor, #hearts, #purse { background: transparent; border-radius: 0; border-bottom: 1px solid var(--pa-line); padding: 4px 8px; }
#hearts { color: var(--pa-seal); }
#hearts i { color: rgba(43, 38, 32, 0.22); }
#favor { color: var(--pa-ink); }
#purse { color: var(--pa-ink); }
#mode { background: transparent; border-radius: 0; border-bottom: 1px solid var(--pa-line); padding: 3px 6px; font-size: 18px; letter-spacing: 1px; }

/* 怪物的血條：一條墨線（剩多少＝墨的長度）；攻擊倒數更細，快到了變朱砂 */
.barWrap { background: var(--pa-hair); box-shadow: none; height: 6px; border-radius: 0; }
#hud .barWrap:last-child { height: 3px; }
.bar { border-radius: 0; }
#hpBar { background: var(--pa-ink); }
#timeBar { background: rgba(43, 38, 32, 0.45); }
#timeBar.warn { background: var(--pa-seal); }

/* ── 下方按鈕列 ── */
#bottom button { background: transparent; font-size: 18px; padding: 12px 14px; min-height: 48px; }
#bottom button:hover { background: var(--pa-wash); }
/* 應援量表：字＋底下一條會長的墨線；滿了變朱砂 */
#ult { background: transparent; color: var(--pa-ink); border-radius: 0; padding: 8px 10px 11px; font-size: 17px; border-bottom: 1.5px solid var(--pa-hair); }
#ultFill { height: 2px; background: var(--pa-ink); }
#ult.full { background: transparent; color: var(--pa-seal); }
#ult.full #ultFill { background: var(--pa-seal); }

/* 道具列：圓石底下的名字用淡墨 */
#itemBar .ib:hover { background: var(--pa-wash); }
#itemBar .ib span { color: var(--pa-ink-soft); }
#itemBar .ib.none i { border: 1px dashed var(--pa-line); }

/* ── 小香的提示：上下兩條墨線夾著，像書頁上的一行注 ── */
#say { background: rgba(243, 236, 220, 0.86); border: 0; border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
#say small { color: var(--pa-ink-soft); letter-spacing: 1px; }
#sayAgain { background: rgba(243, 236, 220, 0.9); border-radius: 0; border-bottom: 1px solid var(--pa-line); font-size: 17px; padding: 8px 22px; }

/* ── 浮層、紙片：淡淡的宣紙、細墨線框、上下各一道雙線（像書頁的欄線） ── */
.overlay { background: rgba(243, 236, 220, 0.72); }
.sheet { background: var(--pa-sheet); border: 1px solid var(--pa-line); border-radius: 2px; box-shadow: 0 10px 28px rgba(40, 30, 20, 0.16);
  background-image: linear-gradient(var(--pa-line), var(--pa-line)), linear-gradient(var(--pa-hair), var(--pa-hair)),
                    linear-gradient(var(--pa-line), var(--pa-line)), linear-gradient(var(--pa-hair), var(--pa-hair));
  background-size: calc(100% - 20px) 1px; background-repeat: no-repeat;
  background-position: 10px 8px, 10px 11px, 10px calc(100% - 8px), 10px calc(100% - 11px); padding-top: 20px; padding-bottom: 18px; }
.sheet h1, .sheet h2 { font-family: var(--kai); letter-spacing: 3px; font-weight: 700; }
.sheet .sub { color: var(--pa-ink-soft); }
.line { background: transparent; border-left: 0; border-radius: 0; border-bottom: 1px dashed var(--pa-hair); padding: 6px 2px; }
.line b { color: var(--pa-seal); }

/* 圖鑑：分頁是字＋底線；選到的那頁底線變粗 */
.tabs button { border-bottom: 1px solid var(--pa-hair); padding: 4px 10px; }
.tabs button.on, .tabs button.on:hover { background: transparent; color: var(--pa-ink); border-bottom: 2.5px solid var(--pa-ink); font-weight: 700; }
.cell { background: transparent; border: 1px solid var(--pa-hair); border-radius: 2px; }
.cell:hover { background: var(--pa-wash); }
.cell.r2 { background: transparent; border-color: rgba(63, 110, 160, 0.4); }
.cell.r3 { background: transparent; border-color: rgba(160, 60, 120, 0.4); }
.cell .r { color: var(--pa-ink-soft); }
.detail { background: transparent; border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); border-radius: 0; }
.setRow .bar { background: var(--pa-ink); }
.clipRow { border-bottom: 1px dashed var(--pa-hair); }
.bag-row { border-bottom: 1px dashed var(--pa-hair); }
.bag-carry { border-bottom: 1px solid var(--pa-line); }
.bag-carry.on, .bag-carry.on:hover { background: transparent; color: var(--pa-seal); border-bottom: 2px solid var(--pa-seal); font-weight: 700; }
.cg-pic { border-radius: 2px; box-shadow: inset 0 0 0 3px var(--pa-sheet), 0 0 0 1px var(--pa-line); }

/* 結算表：細格線 */
.res-tbl th, .res-tbl td { border-bottom: 1px dashed var(--pa-hair); }
.res-tbl tr.tot th, .res-tbl tr.tot td { border-top: 1px solid var(--pa-ink); border-bottom: 0; }

/* 提示小條（toast）：宣紙條、上下墨線 */
#toast { background: rgba(250, 246, 236, 0.96); color: var(--pa-ink); border-radius: 0; border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line);
  box-shadow: 0 4px 14px rgba(40, 30, 20, 0.15); }

/* 開場浮層上的模式連結 */
.modeLink { color: var(--pa-ink-soft); }       /* 連結不要底線（全域規範），連 border-bottom 也不加 */
.modeLink:hover { background: var(--pa-wash); border-radius: 0; color: var(--pa-ink-soft); }

/* ── 寶箱、籤筒（儀式畫面維持深色）：紙片改成宣紙＋細墨線 ── */
.chest-paper, .lot-card { background: var(--pa-sheet); border-radius: 2px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--pa-line), inset 0 0 0 4px var(--pa-sheet), inset 0 0 0 5px var(--pa-hair); }
.lot-prize { background: transparent; border-top: 1px solid var(--pa-hair); border-bottom: 1px solid var(--pa-hair); border-radius: 0; }
.lot-perm button:not(.ov-btn) { background: rgba(250, 246, 236, 0.9); }
.coin-tip { background: rgba(250, 246, 236, 0.92); color: var(--pa-ink); border-radius: 0; border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); }
.rain-purse { background: var(--pa-sheet); color: var(--pa-ink); border-radius: 0; box-shadow: 0 0 0 1px var(--pa-ink), 0 0 18px rgba(255, 200, 60, 0.75); }

/* ── 開場、結尾 ── */
.story-box { border: 0; border-top: 1.5px solid var(--pa-ink); border-bottom: 1.5px solid var(--pa-ink); border-radius: 0; background: rgba(250, 246, 236, 0.95);
  box-shadow: 0 6px 20px rgba(40, 30, 20, 0.18); }
.story-who { color: var(--pa-seal); letter-spacing: 2px; }
.story-skip { background: rgba(250, 246, 236, 0.85); }
.next-teaser { border-radius: 2px; }
.tap-start h1 { letter-spacing: 14px; }
.tap-start p { color: var(--pa-ink-soft); }

/* ── 路線圖頁 ── */
body.map-page, html:has(body.map-page) { background: var(--pa-paper); }
#mapTop { background: var(--pa-paper); border-bottom: 1px solid var(--pa-line); }
.mt-title { font-family: var(--kai); letter-spacing: 2px; }
.mt-title b { color: var(--pa-seal); }
.mt-btns button, #btnNewRun { padding: 2px 8px; }
#mapTip { color: var(--pa-ink-soft); }
#mapLegend { color: var(--pa-ink-soft); }
.photo { border-radius: 1px; }
.choice button { text-align: left; border-bottom: 1px solid var(--pa-hair); padding: 10px 6px; }
.choice button:hover { background: var(--pa-wash); }
.gift-pick button { border: 0; border-radius: 2px; }
.gift-pick button:hover { background: var(--pa-wash); }
.fav-sum { background: transparent; border-top: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line); border-radius: 0; }
.fav-sum b { color: var(--pa-seal); }
.cg-unlock { background: transparent; border: 1px solid var(--pa-seal); border-radius: 2px; color: var(--pa-ink); }
.mk-item { background: transparent; border: 1px solid var(--pa-hair); border-bottom: 1px solid var(--pa-hair); border-radius: 2px; }
.mk-item:hover { background: var(--pa-wash); }
.mk-price, .mk-purse { color: var(--pa-ink); }
.mk-price.poor { color: var(--pa-seal); }