/* ===================================================================
   像素水墨命理 · 換皮層 (geji-skin.css)
   -------------------------------------------------------------------
   純視覺外框皮膚。載於 index.html inline <style> 之後 → 同 specificity 靠
   source order 覆蓋。只改「顏色 / 圓角 / 漸層→平塗 / 字體 / 少量加飾」，
   不動任何 padding / 定位 / flex / grid / 結構 / JS。
   回退：刪本檔 + 刪 index.html 那行 <link> = 100% 還原原版。
   不碰：靈獸 sprite canvas(#cv) / 版面佈局 / 手機 @media 佈局。
   =================================================================== */

/* ---- 1. 主題 token 覆蓋（他所有 class 吃 var，改 token 即安全換色）---- */
/* 深色 = 墨夜竹（暖近黑，非冷藍） */
:root{
  --bg:#171009;
  --panel:#241c12;
  --panel2:#2e2416;
  --border:#5a4327;
  --ink:#ece0c4;
  --muted:#b3a37e;
  --accent:#e66a49;     /* 印章朱紅（重點色，取代原藍） */
  --accent2:#e6b23f;    /* 暖金（幣/等級沿用） */
  --ok:#7fa04f;         /* 竹綠（取代原綠） */
}
/* 亮色 = 宣紙日（暖米白紙） */
body.light{
  --panel:#efe4c9;
  --panel2:#f5edd8;
  --border:#c9b482;
  --ink:#2a2016;
  --muted:#6c5c43;
  --accent:#b8402e;     /* 印章朱紅 */
  --accent2:#9a6a1a;    /* 暖金褐 */
  --ok:#5f7a3f;         /* 竹綠 */
  background:#e3d4b4;   /* 宣紙底 */
}

/* ---- 2. body 底：暖墨 / 宣紙（覆蓋硬寫 navy 漸層）---- */
body{ background:radial-gradient(1200px 600px at 70% -10%, #241a10, #140d07 60%); }
body.light{ background:#e3d4b4; }

/* ---- 3. 頂列 ---- */
header.top{ background:rgba(28,20,11,.72); border-bottom-color:var(--border); }
body.light header.top{ background:rgba(233,220,189,.78); }
/* VeiMi 吉祥物 mark 取代舊「基」紅印章（2026-07-18；一般民眾看不懂「地基」→ 換品牌吉祥物。原體 ~/哥哥-提案/維米數據/veimi/veimi-master.svg）*/
header.top .logo{ position:relative; display:inline-flex; align-items:center; }   /* 吉祥物與品牌字垂直置中對齊（不再對齊呆毛頂端）*/
header.top .logo::before{ display:none; }   /* 舊「基」印章停用 */
.vmmark{ height:48px; width:auto; margin-right:10px; overflow:visible; flex:none; transform:translateY(-6px); }   /* 上推 6px：讓橘身重心(非含呆毛的畫布中心)對齊品牌字中線 */
.vmahoge{ transform-box:view-box; transform-origin:59px 56px; animation:vmwiggle 1.5s ease-in-out infinite; }
@keyframes vmwiggle{ 0%,100%{ transform:rotate(-11deg);} 50%{ transform:rotate(11deg);} }
@media (prefers-reduced-motion:reduce){ .vmahoge{ animation:none; } }

/* ── 頁首列統一：所有欄位/按鈕同高(32px)+同字級(13px)+同圓角(8px)，消除大小參差（2026-07-18 pinhsi）── */
header.top .badge,
header.top .topclock,
header.top .live,
header.top .themebtn,
header.top .bgswitch > button{
  height:32px !important; box-sizing:border-box;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px !important; font-weight:700; line-height:1;
  padding:0 12px; border-radius:0 !important; white-space:nowrap;   /* 直角＝pinhsi 樣稿一致（§15），非圓角 */
}
header.top .topclock,
header.top .live,
header.top .themebtn,
header.top .bgswitch > button{ border:2px solid var(--line) !important; }   /* 統一 2px 黑框（像素風）*/
header.top .tag{ font-size:13px; }
/* pinhsi：「你的靈獸夥伴」土咖啡太暗 → 淡金底 + 字放大（2026-07-18）*/
header.top .badge{ background:#f2d492 !important; color:#4a3410 !important; border-color:#cba54e !important; font-size:14px !important; }

/* ── 辦公室 stage 上下兩排統一：全部 32px 高 + 13px 字（保留意義色/直角；不破固定右欄）—— pinhsi 2026-07-18 ── */
/* 用 ID 精準鎖定 stage 上的鈕，避開「更多」選單裡的同名 .shopbtn */
.hud .chip, #resBtn, #shopBtn, #moreBtn, #floorBtn,
#cornerBar > *, #cornerBar .grpwrap > *, #decoBtn{
  height:32px !important; box-sizing:border-box !important;
  align-items:center;   /* 不強制 display → 保留各鈕原本的顯示/隱藏邏輯（空 chip 該藏就藏）*/
  font-size:13px !important; line-height:1 !important;
}
/* #floorBtn 補入：原漏列 → 「上 2F」內含 16px canvas 圖示、display:block 使 canvas 以 baseline 撐到 38px 凸出（2026-07-26 hungdi）。#cornerBar .grpwrap > * 補入：底排低頻鈕收進「一起玩」grpwrap 後非 #cornerBar 直接子鈕，原 `#cornerBar > *` child combinator 抓不到 → cbtn/viewtoggle/chip 高度 30~36 參差 */
/* 一律可見的實體按鈕恢復 flex 置中：修「成果/商店/更多 字往下沉」（只點名 always-visible ID，cornerBar wildcard 不加 display 免逼顯空 chip）— pinhsi 2026-07-18 */
#resBtn, #shopBtn, #moreBtn, #galToggle, #viewToggle, #decoBtn,
#connChip, #duelBtn3, #mpChip, #roomChip{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px;
}
/* #floorBtn gets the same box but WITHOUT !important on display. It is not an always-visible button: the
   author's refreshFloor() shows and hides it with an inline style according to whether 2F is owned, and an
   !important display in this stylesheet outranks that inline style — so our skin was overriding the author's
   own gate and the button showed on a 1F-only account. Non-important keeps the layout fix (inline-flex stops
   the 16px canvas icon sitting on the baseline and pushing the button to 38px) while letting the inline
   display:none win, which is the whole point of it being inline. */
#floorBtn{
  display:inline-flex; align-items:center !important; justify-content:center !important; gap:5px;
}

/* ── 觸控裝置最小點擊尺寸（44px，Apple HIG / Material Design 3 慣例；WCAG 2.2 法定下限是 24px，
   但 44px 才是業界實務常用值）。只在 (any-pointer:coarse) 下套用，不動滑鼠情境既有的 32px 密度
   （那是 pinhsi 2026-07-18 自己核准的桌機決定，見上方 §頁首列統一/§辦公室 stage 統一）。
   min-height/min-width 不需要 !important 也會贏：height:32px!important 只鎖住 height 這個屬性本身，
   box 的實際使用高度仍會被 min-height 往上頂——這是 CSS 規格本身的行為，不是靠特異度贏過去的。
   功能鍵重新設計計畫第 1 階段（pinhsi 2026-08）── */
@media (any-pointer:coarse){
  :root{ --tap-min:44px; }
  .shopbtn, .cbtn, .cbtn-friend, .viewtoggle, .chip, .themebtn, #bgBtn,
  .moremenu .shopbtn, .mnav .mnavbtn, .topicbar button, .grpbtn,
  .rbgo, .rbcancel, .rbchip, .pbtn-icon,
  .dgbtn, .introcard .istart, .codeview .cvnav, .codeview .clr,
  .sdroll, .pbtn-ghost, .apiadv, .apimodel-load, .apirec .rbtn{ /* 功能鍵重新設計第8階段：digestPanel/help/code-view 各自的獨立按鈕 class，實測都在 20-36px 之間，沒有共用元件覆蓋到；第9階段補 .sdroll（賽季結算鈕）+ .pbtn-ghost（第7階段鋪路、第9c 才第一次真正消費的 class，忘了同步加進這裡會卡在原生高度不吃 --tap-min）+ .apiadv/.apimodel-load（保留各自視覺識別 class，不吃共用元件顏色，但一樣要吃觸控最小尺寸——跟本清單其他項目同一套模式）；第9.5階段補 .apirec .rbtn（cfgPanel「用這家」推薦鈕，保留自己的綠色識別，跟 .apiadv/.apimodel-load 同一套處理） */
    min-height:var(--tap-min);
    min-width:var(--tap-min);
  }
}

/* 功能鍵重新設計第9階段：賽季分頁（個人榜/公會榜）改吃 .rbchip 後補回 .stab 原有的 flex:1，
   讓 .stabs 容器內 2 個分頁維持平分寬度（.rbchip 本身在其他場景是自然寬度，不預設 flex:1）── */
.stabs .rbchip{flex:1}

/* 功能鍵重新設計第9.5階段：切磋道場（spPanel）2 組 3 顆並列同等重要動作（悟招／面對面切磋），
   .rbact 本身沒有等寬規則、.rbgo 自帶 flex:1 但 .rbcancel 沒有，導致 3 顆混排時一顆被撐大、
   兩顆維持原寬——視覺不平衡。這裡新增一個「限定同列等寬」的 modifier class，只加在這 2 組
   markup 上，不改 .rbact 本身（.rbact 廣泛用在 petPanel 等既有的 2 顆確認/取消列，那邊的
   「rbgo 撐滿剩餘空間、rbcancel 維持原寬」是已經上線、pinhsi 沒反應過有問題的既有視覺語言，
   不在這次調整範圍內）── */
.rbact-even > button{flex:1;min-width:0;padding:7px 4px;white-space:normal !important;text-align:center;line-height:1.25;} /* min-width:0 是本專案既有的 flex 縮不下去修法（同 .topicbar
   input 那個坑）：沒有這行，3 顆文字較長的按鈕會在桌機寬度就先換行（2+1），落單那顆再被 flex:1
   撐滿整行寬度，變成比原本更不對稱——實測抓到，不是理論推測。pinhsi 真機回報悟招 2 顆按鈕文字溢出：
   根因是這條規則原本（選擇器是 .rbact-even > *）沒蓋過下方「.rbgo, .rbcancel 全站
   white-space:nowrap !important」——兩條規則特異度同為 (0,1,0)、都有 !important，靠檔案順序
   決勝負，全站那條在後面所以贏；選擇器改成 `> button`（特異度 (0,1,1)）確保這條規則穩贏，不再
   依賴兩條規則誰先誰後。等寬壓窄後文字仍被強制單行只能溢出框外，這裡補 !important 蓋過去，允許
   在等寬列裡換行成 2 行；padding 統一成 7px 4px（原本 .rbgo 7px／.rbcancel 7px 12px 不同）是因為
   flex-basis:0 等寬分配會把 padding+border 差異疊加成視覺不等寬（實測差 12px），統一 padding 才是
   真的等寬 */
.rbact-even > .rbcancel{border:none;} /* .rbgo 原生無邊框、.rbcancel 原生 1px 邊框，同上一條理由，
   等寬列拿掉 rbcancel 邊框對齊 rbgo 的 box model；背景色仍有差異可分辨兩種按鈕語意 */

/* ── 商店彈窗：買鈕/價格亮色可讀（深色主題殘留 #222b3d 深藍看不清 → 亮色）+ 小字放大（pinhsi 2026-07-18）── */
.shop .item button{ background:var(--ok) !important; color:#fff8ee !important; border:2px solid var(--line) !important; border-radius:0 !important; font-size:12.5px !important; font-weight:800 !important; }
.shop .item button:disabled{ background:#ecdcb8 !important; color:#7a5a2a !important; border-color:#cbb27e !important; }  /* 買不起：淡卡其底+棕字，價格仍清楚可讀 */
.shop .item .t{ font-size:14px !important; }
.shop .item .d{ font-size:12px !important; }
.shop .item .lvtag{ font-size:11px !important; }
/* 商店金額徽章統一寬度（pinhsi：金額欄位大小不一致 → min-width 讓 90/150/280 同寬置中）*/
.shop .item button{ min-width:74px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:3px; }

/* ── icon 尺寸對齊（pinhsi：有些 icon 像素圖太小/不一致）── */
/* 像素 icon .pxi 已改 1.4em(~18px)；emoji .ic 框限成同 18px box（emoji 字置中）→ footprint 一致、不再寬框擠爆換行 */
.chip .ic, .cbtn .ic, .cbtn-friend .ic{
  width:18px !important; height:18px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  font-size:15px !important; line-height:1; flex:none;
}

/* ════ 彈窗內部深色主題殘留 全面掃除 → skin 暖色亮版（pinhsi 2026-07-18「全面改掉」；var() 兩主題自適配）════ */
/* 深色面板/卡片/chip/按鈕背景 → 亮色暖紙 */
.rvbefore, .suggest .sgbtn.more, .chatinput button:disabled,
.shop .krow .kedit, .shop .kform .kfbtns button.ghost, .keypop .kp-chip,
.petbarwrap, .rbchip, .rbcancel, .dexbarwrap, .pdcell,
.shop .resitem, .ressearch .resgtoggle, .resghead .cnt, .shop .cfgopt,
.cxlink, .mpwho, .ghint, .tbcard, .inboxitem, .mpassign-b,
.avset-rename, .avcell, .dachip, .daocr, .darec, .tpllib, .iebtn, .iechip,
.shop .item, .shop .ft button, .editkeys, .shop .krow, .gvcard, .introcard,
.keypop, .pvbar, .polishfoot, .spmv,
/* 深色輸入框 → 亮色欄位 */
.beinput, .besel, .betask, .kbrow input, .daqrow input,
.shop .kform input, .shop .kform select, .shop .kform textarea,
.shop #cfgKey, .shop #cfgProvider, .shop #cfgBaseURL, .keypop .kp-in, .dgsched input[type=time]{
  background:var(--panel2) !important; color:var(--ink) !important; border-color:var(--line) !important;
}
/* 玩家頭像靈獸圖放大（pinhsi：玩家的靈獸圖太小）24→30px */
.avchip canvas{ width:30px !important; height:30px !important; }

/* ════ 按鈕不換行 + 容器一行（pinhsi 2026-07-18：字多的按鈕被擠到第2排/內部折2行 → 統一一行，可調外框）════ */
/* ① 通用：按鈕內文字一律不折行（修「好多地方」都有的內部折行）*/
.shopbtn, .cbtn, .cbtn-friend, .viewtoggle, .moremenu .shopbtn, .rbgo, .rbcancel, #cornerBar > *{ white-space:nowrap !important; }
/* ② 底部按鈕列：不換行 + 加寬容器（留右邊「佈景」鈕空間）*/
.cornerbar{ flex-wrap:nowrap !important; max-width:calc(100% - 100px) !important; }
/* ③ 更多選單：按鈕自動寬(不再固定132px)、文字一行、選單外框自動加寬到最寬那顆 */
.moremenu .shopbtn{ width:auto !important; min-width:150px !important; white-space:nowrap !important; }

/* ── 切磋面板：外框拉寬(悟招不破版) + 標題不溢出 + 按鈕內容寬置中(不拉滿)（pinhsi 2026-07-18）── */
#spPanel{ max-width:88% !important; }                   /* 悟招 2 顆長字排得下；寬度統一在 §24 桌機加寬 */
#spPanel .sh{ flex-wrap:wrap !important; }                                      /* 標題列可換行：統計字掉到第2行 */
#spPanel .sh b{ white-space:nowrap !important; flex:none !important; order:1; } /* 「切磋道場」第1行左 */
#spPanel .sh .x{ order:2 !important; margin-left:auto !important; }             /* ✕ 第1行右 */
#spDayCap{ order:3 !important; flex-basis:100% !important; margin:4px 0 0 !important; text-align:left !important; font-size:11px !important; font-weight:700 !important; opacity:.85; white-space:nowrap; }  /* 統計字獨立第2行整行寬、一行放得下 */
#spWuSingleBtn, #spWuAllBtn{ flex:1 !important; }                               /* 悟招兩顆等寬(寬框內剛好) */
.rbact:has(#fmHostBtn){ flex-direction:column !important; align-items:center !important; }   /* 面對面堆疊置中 */
#fmHostBtn, #fmExportBtn, #fmTeamExportBtn{ width:fit-content !important; min-width:200px !important; flex:none !important; margin:3px auto !important; }  /* 內容寬+置中(幾個字就不拉滿全寬) */

/* ---- 4. 側欄 + 段落標題（毛筆字 + 竹節點）---- */
.left{ background:#1f1810; border-right-color:var(--border); }
body.light .left{ background:#e8dbbb; }
.left h2{
  font-family:var(--brush);
  font-weight:800; color:var(--ink); letter-spacing:.5px;
  display:flex; align-items:center; gap:8px;
}
.left h2::before{  /* 竹節點小方塊 */
  content:""; width:9px; height:12px; flex:0 0 auto;
  background:var(--ok); border:1.5px solid var(--ink);
}

/* ---- 5. 功能鍵 = 像素視窗（平塗 + ink 框 + 保留底部 3px 觸感 → 改暖色）---- */
.key{
  background:var(--panel2);
  border-color:var(--border); border-bottom-color:var(--ink);
  border-radius:2px;
}
.key .kt{ font-family:var(--brush); font-weight:700; }
.key:hover{ border-color:var(--accent); }
.key .ledge{ background:var(--border); }   /* idle 燈：暖色 */
/* 亮色硬寫項對等覆蓋（他 body.light .key 寫死白漸層，需同 specificity 蓋）*/
body.light .key{ background:var(--panel2); }
body.light .key .ledge{ background:var(--border); }
body.light .key:hover{ border-color:var(--accent); box-shadow:none; }
body.light .card{ box-shadow:0 1px 4px rgba(90,70,40,.10); }

/* ---- 6. 面板 / 卡片 / 舞台 = 像素視窗框 ---- */
.card{ border-radius:2px; border-color:var(--border); }
.card h3{ font-family:var(--brush); font-weight:800; }
.stage{
  background:#1c140c; border-color:var(--border); border-radius:3px;
  box-shadow:none;   /* 拿掉 inset 雙框（pinhsi：切磋旁的陰影帶）*/
  border-width:2px !important;
}
body.light .stage{ background:#d8c8a4; }

/* ---- 7. HUD chips / 按鈕：平塗暖色（覆蓋硬寫 navy）---- */
.chip{ background:rgba(28,20,11,.86); border-color:var(--border); border-radius:3px; color:var(--ink); }
body.light .chip{ background:rgba(245,237,216,.9); color:var(--ink); }
.chip.coins{ color:var(--accent2); }
.zoombtn{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-color:var(--border); color:var(--ink); border-radius:3px;
}
body.light .zoombtn{ background:var(--panel2); border-color:var(--border); color:var(--ink); }
.btn, .tag, .ractbtn, .sgbtn, .navbtn{ border-radius:3px; }

/* ---- 7b. 寫死深藍按鈕長尾（token 蓋不到硬寫值 → 對等覆蓋，深/亮各自解析）---- */
/* 標準暖色按鈕（平塗 panel2 + ink 框 + ink 字）*/
.shopbtn,.cvnav,.ractbtn,.gvtab,.rbcancel,.mprename,.polishcmp,
body.light .shopbtn,body.light .cvnav,body.light .ractbtn,body.light .gvtab,body.light .rbcancel,body.light .mprename,body.light .polishcmp{
  background:var(--panel2); border-color:var(--border); color:var(--ink); border-radius:3px;
}
/* 特殊：標題列 / 預覽列 / 選中頁籤 / 綠主鈕 */
.cvhead, body.light .cvhead{ background:var(--panel); color:var(--accent); border-bottom-color:var(--border); }
.pvbar,  body.light .pvbar{  background:var(--panel); border-bottom-color:var(--border); }
.gvtab.on, body.light .gvtab.on{ background:var(--accent); border-color:var(--ink); color:var(--panel); }
.tbnew,  body.light .tbnew{  background:var(--ok); color:#fff8ee; }

/* ---- 9. 樣稿招牌元素回補：朱紅角釘 + 竹紋 rail + 更明確像素框 ---- */
/* 更明確的框（樣稿是 2px ink 框）*/
.key, .card{ border-width:2px; }
.key{ border-bottom-width:3px; }
/* 朱紅四角釘（他外框 class 無 ::after，安全加）*/
.card, .key{ position:relative; }
.card::after, .stage::after, .key::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:8;
  background:
    linear-gradient(var(--accent),var(--accent)) left 4px top 4px/4px 4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right 4px top 4px/4px 4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left 4px bottom 4px/4px 4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right 4px bottom 4px/4px 4px no-repeat;
}
.key::after{ background-size:3px 3px; }  /* 功能鍵上的釘小一點 */
/* 左緣竹紋 rail（塞進側欄左邊，加左內距讓功能鍵不壓到竹子）*/
.left, body.light .left{
  padding-left:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='90'%3E%3Crect x='11' width='8' height='90' fill='%236b8a4a'/%3E%3Crect x='11' width='2' height='90' fill='%2382a355'/%3E%3Crect x='9' y='42' width='12' height='4' fill='%233a4a26'/%3E%3Cpath d='M19 22 q9 -6 12 0 q-8 7 -12 0 Z' fill='%2382a355' stroke='%233a4a26' stroke-width='0.8'/%3E%3Cpath d='M11 60 q-9 -6 -9 1 q6 7 9 -1 Z' fill='%236b8a4a' stroke='%233a4a26' stroke-width='0.8'/%3E%3C/svg%3E");
  background-repeat:repeat-y;
  background-position:left center;
  background-size:26px auto;
}
.left{ background-color:#1f1810; }
body.light .left{ background-color:#e8dbbb; }

/* ---- 11. 跟樣稿對齊：字體 + 元件 + 排版 ---- */
:root{ --brush:'Huninn',"PingFang TC","Microsoft JhengHei",sans-serif; }

/* 11a 招牌毛筆字擴到樣稿有的地方 + 尺寸對齊 */
.left h2{ font-size:15px; }
.key .kt{ font-size:14px; }
.nowbox .info .t{ font-family:var(--brush); font-size:17px; }
.metrics b{ font-family:var(--brush); font-size:18px; color:var(--ink); }

/* 11b 功能鍵：icon 左 + 標題/副標右（grid，不動 DOM），icon 做成像素牌 */
.key{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
      column-gap:10px; align-items:center; padding:11px 12px; }
.key .ico{ grid-column:1; grid-row:1 / span 2; width:30px; height:30px;
           display:flex; align-items:center; justify-content:center;
           background:var(--panel); border:2px solid var(--border); border-radius:2px; font-size:16px; }
.key .kt{ grid-column:2; grid-row:1; align-self:end; margin-top:0; }
.key .kd{ grid-column:2; grid-row:2; align-self:start; }

/* 11c 能量條：掌機分段（朱紅填色 + 米白分格線）*/
.bar{ height:12px; border-radius:0; background:var(--panel2); border:2px solid var(--ink);
      position:relative; margin-top:11px; overflow:hidden; }
.bar i{ background:var(--accent); }
.bar::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, var(--panel) 9px 11px); }

/* 11d 最新成果：對話框感 + ► 範例鍵 + 頭像像素牌 */
.outhead{ border-bottom:2px solid var(--border); padding-bottom:9px; }
.exchip, body.light .exchip{ background:var(--panel2); border-color:var(--border); color:var(--ink); border-radius:2px; }
.exchip::before{ content:"▸ "; color:var(--accent); font-weight:900; }
.ava{ border-radius:2px; border:2px solid var(--border); background:var(--panel2); }

/* 11e 竹紋 rail 加濃（更接近樣稿）*/
.left, body.light .left{ padding-left:36px; background-size:30px auto; }

/* ---- 12. 完全對齊樣稿：雙線精緻框 + logo 毛筆 + 切換鈕詩意標籤 ---- */
/* 12a 邊框色對齊樣稿 --line（亮=深墨 / 暗=米白），非低對比棕/褐 */
:root{ --line:#efe7d5; --line-soft:#6b5b42; }
body.light{ --line:#2a2016; --line-soft:#b6a47c; }
.key, .card, .stage, .ava{ border-color:var(--line); }
.key{ border-bottom-color:var(--line); }
header.top{ border-bottom-color:var(--line); }
/* 12b 內側淡色細線 = 雙線精緻框（樣稿 .px::before）*/
.key::before, .card::before{
  content:""; position:absolute; inset:2px; border:1px solid var(--line-soft);
  pointer-events:none; z-index:1;
}
/* 12c logo 補毛筆（樣稿最顯眼的字）*/
header.top .logo{ font-family:var(--brush); font-weight:800; }
/* 12d 切換鈕標籤改由 JS 設 DOM 文字「☀/🌙 + 宣紙日/墨夜竹」→ pixel-icons 轉像素 icon（不留 ::after Apple emoji）*/
#themeBtn{ font-weight:700 !important; letter-spacing:.5px; }
#themeBtn canvas{ width:16px; height:16px; image-rendering:pixelated; vertical-align:middle; margin-right:2px; }

/* ---- 13. 全畫面廣覆蓋（!important 壓過他所有 body.light 硬寫，一次到底）---- */
/* 13a 互動元件統一：繼承字體 + 小圓角 + ink 統一框色 */
button, input, select, textarea, .chip, .tag, .exchip, .viewtoggle,
[class*="btn"], .editkeys, .gvtab{
  font-family:inherit !important;
  border-radius:0 !important;
  border-color:var(--line) !important;
}
/* 13b 中性表面（原本白/藍/紫底）→ 暖紙底 + ink 字 */
input, select, textarea, .exchip, .viewtoggle, .cvnav, .editkeys,
.saveBtn, .resetBtn, .ghost, .gvexit, .topicMic, .topicClr, .clr,
.qclearall, .pvx, .beghost, .beadd, .kbWeb, .kbAsk, .mpInviteBtn,
.shopbtn, .zoombtn, .rbcancel, .polishcmp, .mprename, .chatIn, .topicIn,
.kbInput, .beinput, .gvtab, .polishReject{
  background:var(--panel2) !important; color:var(--ink) !important;
}
/* 功能鍵重新設計第9階段：.rbgo 從上面這條「中性表面」清單移除——它是本來就存在、這次才被
   pinhsi 實測發現的既有 bug，不是這次改動造成的。.rbgo 自己的定義（index.html:401）本來就是
   綠色漸層，是遊戲裡「確認/領取/儲存」這類正向主要動作的既有色彩語言，卻被這條 !important
   清單意外蓋成跟 .cfgopt 選項卡片一樣的暖紙棕色，導致「按鈕」跟「純選項」肉眼分不出來
   （pinhsi 2026-08-13 截圖實測發現：儲存設定鈕 跟 API 選項卡片 完全同色）。移除後 .rbgo 的
   綠色會在它既有的幾十個呼叫點（petPanel/todoPanel/mpPanel/questPanel）同時恢復——這些呼叫點
   全部沒有被這次改動觸碰過，只是連帶吃到這條規則被清乾淨後的正確結果，不是新增消費點。
   .rbcancel/.shopbtn 等清單裡其他 class 保持不動——它們是次要/取消類動作，維持中性色是既有、
   合理的視覺語言，不是同一類 bug。 */
/* 13c accent 按鈕保留意義色（暖版）*/
.chatSend, .tbnew{ background:var(--ok) !important; color:#fff8ee !important; }
.demoSetupBtn, .istart, .demobtn{ background:var(--accent2) !important; color:#2a1f14 !important; }
/* .istart 淺色主題單獨加深：實測預設 var(--accent2) #9a6a1a + #2a1f14 只有 3.41:1，不到 AA。
   .demoSetupBtn/.demobtn 這兩個 class 在目前 HTML 裡沒有任何元素真的掛著（#demoSetupBtn 只有 id 沒有 class，
   .demobtn 完全查無此 class），只有 .istart 真的會渲染，所以只針對 .istart 加窄範圍覆寫，不動共用的
   --accent2 token（token 同時被 .chip.coins/.bgopt .def 拿來當「文字色」用，跟這裡當「背景色」用需要的
   深淺方向相反，改共用值會此消彼長）。*/
body.light .istart{ background:#b3801f !important; color:#1a1109 !important; }
.gvtab.on, .viewtoggle.on, .viewtoggle.active{ background:var(--accent) !important; color:var(--panel) !important; }
/* 13d AI待命框起來 + badge 金牌框（樣稿）*/
.live{ border:2px solid var(--line) !important; border-radius:3px; padding:4px 11px; background:var(--panel) !important; }
.badge{ background:var(--accent2) !important; color:#2a1f14 !important; border:2px solid var(--line); border-radius:3px !important; }
/* 13e chip 統一框色（conn 綠狀態保留綠底不強壓）*/
.chip{ border-color:var(--line) !important; }

/* ---- 14. 主行動鍵=竹綠(兩主題,樣稿 .btn.bamboo)；切換深亮鈕=朱紅(樣稿 .toggle) ---- */
#webTgl, #webTgl.on, #uploadReviewBtn, #chatSend, .chatSend{
  background:var(--ok) !important; color:#fff8ee !important;
  border:2px solid var(--line) !important; border-radius:0 !important;
}
#themeBtn, .themebtn{
  background:var(--accent) !important; color:#fff8ee !important;
  border:2px solid var(--line) !important; border-radius:0 !important;
}
/* themeBtn 標籤改 JS DOM 文字，::after 已移除 */

/* ---- 15. 卡片/功能鍵框：乾淨單一黑框 + 直角（pinhsi：不要圓角，要跟樣稿一樣直角；無內線無方塊）---- */
:root{ --shadow:rgba(0,0,0,.35); }
body.light{ --shadow:rgba(42,32,22,.14); }
.card, .key{
  border:2px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:2px 2px 0 var(--shadow) !important;
  position:relative;
}
/* 無內線框 + 無四角方塊 */
.card::before, .key::before, .card::after, .key::after, .stage::after{ display:none !important; }

/* ---- 16. 字體放大（pinhsi：太小；含目前執行/最新成果標題）---- */
.key .kt{ font-size:15.5px !important; line-height:1.25 !important; }
.key .kd{ font-size:12px !important; }
.left h2{ font-size:16.5px !important; }
.card h3, .outhead, .panel-t{ font-size:15.5px !important; }
.nowbox .info .t{ font-size:20px !important; }
.nowbox .info .s{ font-size:12.5px !important; }
.metrics{ font-size:12.5px !important; }
.metrics b{ font-size:22px !important; }
.ohint, .exchip, .mini, .viewtoggle, .tag, .chip{ font-size:12.5px !important; }
.head, .left .head{ font-size:16px !important; }
.badge{ font-size:11px !important; }
.shopbtn, .zoombtn, .cvnav, .btn{ font-size:12.5px !important; }
/* 像素 icon 放大（功能鍵牌子裡）*/
.key .ico{ width:38px !important; height:38px !important; }
.key .ico canvas, .key .ico .pxi{ width:28px !important; height:28px !important; image-rendering:pixelated; }

/* ---- 17. 等級/進度條 warm（pinhsi：工作室顏色太淡；xpbar 原深藍）---- */
.xpbar, .petbarwrap, .qbarwrap, .dexbarwrap{
  background:var(--panel2) !important; border:1px solid var(--line) !important;
}
.xpbar > i, .xpbar > b, .xpbar > span, .petbar, .qbar > i{
  background:#7a5326 !important;   /* 等級填色 = 深棕（pinhsi：工作室 Lv 改深色）*/
}

/* ---- 18. 工作室 Lv 文字改深色（原淡藍紫 #cbd4e4）+ 成果鈕金色（樣稿 .chipp.act）---- */
.xpwrap small, .xpwrap, .xpwrap b, .lvtxt, .lvlabel{ color:var(--ink) !important; }
#resBtn{ background:#d0a53e !important; color:#2a1f14 !important; border-color:var(--line) !important; }

/* ---- 19. 切磋 = 朱紅 + 玩家列最右（樣稿位置：成果 商店 更多 切磋）---- */
#duelChip{ display:none !important; }   /* 隱藏 HUD 內重複的左上切磋 */
.duelbtn2{
  top:8px !important; right:8px !important; left:auto !important;
  background:var(--accent) !important; color:#fff8ee !important;
  border:2px solid var(--line) !important; border-radius:0 !important;
}
/* 原本 +88 位移是為了在最右空出「切磋」(.duelbtn2)位子，但 duelbtn2 已 display:none(dead orphan)，
   位移沒收回 → 成果/商店/更多 往左空 88px、跟右下佈景(.decobtn right:8)不對齊(hungdi 2026-07-16)。
   移除位移回基準 8/96/184，更多右緣即與佈景切齊。切磋若日後復活再另加位移。 */

/* ---- 20. 側抽屜面板 .shop 的 navy 左向陰影拿掉（收起時滲回 stage 右緣＝切磋旁那條陰影帶）---- */
.shop{ box-shadow:none !important; }

/* ---- 21.（外框 stage 不動，回原樣。辦公室變大改在 JS fit() 讓桌機分數縮放填滿）---- */

/* ---- 10. 手機：隱藏加飾（印章/竹節/竹紋 rail/角釘），不擠小螢幕 ---- */
/* Kept in sync with MOBILE_MQ() in index.html: hand-held tablets and unfolded foldables count as mobile.
   If these drift apart, tablets get the mobile layout with the desktop skin on top of it. */
@media (max-width:768px),(pointer:coarse){
  header.top .logo::before{ display:none; }
  .left h2::before{ display:none; }
  .card::after, .stage::after, .key::after{ display:none; }
  .left, body.light .left{ padding-left:16px; background-image:none; }
}

/* ===================================================================
   22. 系統背景變體：馬卡龍雙色渲染
   -------------------------------------------------------------------
   body 加 class「bg-mac bg-{id}」→ 覆蓋 token + 雙色渲染底 + 半透明面板。
   原先版＝body 無 bg-* class＝上面的水墨（照舊、不受影響）。
   亮/深沿用 body.light（跟背景各自獨立）。
   =================================================================== */

/* 22a 共同：保留水墨加飾（印章/竹節/竹紋 rail 照舊，不關掉）；面板半透明讓底色渲染透出 */
/* 深色馬卡龍（預設無 .light）：淺字 + 半透明「深」面板（夠實才讀得清，原透明版看不清）*/
body.bg-mac{
  --ink:#f3f0f8; --muted:#c3bdcf;
  --panel:rgba(26,22,32,.5); --panel2:rgba(44,38,52,.64);
  --border:rgba(255,255,255,.22); --line:rgba(255,255,255,.24); --line-soft:rgba(255,255,255,.12);
  --shadow:rgba(0,0,0,.32); --accent2:#e6c079;
}
body.bg-mac .left, body.bg-mac header.top{ background-color:rgba(18,14,24,.34) !important; }
body.bg-mac .stage{ background-color:rgba(18,14,24,.28) !important; }
/* 深色輸入框：深底淺字（夠對比）*/
body.bg-mac input, body.bg-mac textarea, body.bg-mac select,
body.bg-mac .topicIn, body.bg-mac .chatIn, body.bg-mac .kbInput, body.bg-mac .beinput{
  background:rgba(12,10,16,.5) !important; color:#f3f0f8 !important;
}

/* 亮色馬卡龍 */
body.bg-mac.light{
  --ink:#4c4550; --muted:#8f8894;
  --panel:rgba(255,255,255,.62); --panel2:rgba(255,255,255,.74);
  --border:rgba(120,110,125,.3); --line:rgba(120,110,125,.32); --line-soft:rgba(120,110,125,.16);
  --shadow:rgba(90,80,90,.1); --accent2:#bf8f4a;
}
body.bg-mac.light .left, body.bg-mac.light header.top{ background-color:rgba(255,255,255,.42) !important; }
body.bg-mac.light .stage{ background-color:rgba(255,255,255,.3) !important; }
body.bg-mac.light input, body.bg-mac.light textarea, body.bg-mac.light select,
body.bg-mac.light .topicIn, body.bg-mac.light .chatIn, body.bg-mac.light .kbInput, body.bg-mac.light .beinput{
  background:rgba(255,255,255,.8) !important; color:#3a3540 !important;
}
/* 等級條用馬卡龍 accent（原水墨深棕在馬卡龍上突兀）*/
body.bg-mac .xpbar > i, body.bg-mac .xpbar > b, body.bg-mac .petbar, body.bg-mac .qbar > i{ background:var(--accent) !important; }

/* 22b 各背景：雙色渲染 body 底 + accent/ok（主色）+ 主鍵漸層 */
/* — 草莓×薰衣草 (sl) — */
body.bg-sl{ background:radial-gradient(130% 130% at 12% 8%,#4a2f3a 0%,#4a2f3a00 52%),radial-gradient(130% 130% at 90% 94%,#332b48 0%,#332b4800 55%),linear-gradient(135deg,#33232b,#262035) !important; --accent:#e0708a; --ok:#9585c2; }
body.bg-sl.light{ background:radial-gradient(130% 130% at 12% 8%,#ffd8cb 0%,#ffd8cb00 52%),radial-gradient(130% 130% at 90% 94%,#dccfee 0%,#dccfee00 55%),linear-gradient(135deg,#ffe7df,#eee7f7) !important; --accent:#d15f7d; --ok:#8878ba; }
body.bg-sl #webTgl, body.bg-sl #uploadReviewBtn, body.bg-sl .chatSend, body.bg-sl #chatSend{ background:linear-gradient(135deg,#e0708a,#9585c2) !important; }
/* — 香草奶油×海鹽 (cs) — */
body.bg-cs{ background:radial-gradient(130% 130% at 12% 8%,#3a3228 0%,#3a322800 52%),radial-gradient(130% 130% at 90% 94%,#233c4a 0%,#233c4a00 55%),linear-gradient(135deg,#2a2620,#1b2b36) !important; --accent:#c99e6a; --ok:#57a5cc; }
body.bg-cs.light{ background:radial-gradient(130% 130% at 12% 8%,#f2e6cd 0%,#f2e6cd00 52%),radial-gradient(130% 130% at 90% 94%,#c9e6f2 0%,#c9e6f200 55%),linear-gradient(135deg,#f9f1e2,#e2f2f9) !important; --accent:#b98d55; --ok:#4b98c0; }
body.bg-cs #webTgl, body.bg-cs #uploadReviewBtn, body.bg-cs .chatSend, body.bg-cs #chatSend{ background:linear-gradient(135deg,#c99e6a,#57a5cc) !important; }
/* — 焦糖×草莓 (cst) — */
body.bg-cst{ background:radial-gradient(130% 130% at 12% 8%,#3a2c1c 0%,#3a2c1c00 52%),radial-gradient(130% 130% at 90% 94%,#4a2f3a 0%,#4a2f3a00 55%),linear-gradient(135deg,#2a2116,#33232b) !important; --accent:#c2924e; --ok:#e0708a; }
body.bg-cst.light{ background:radial-gradient(130% 130% at 12% 8%,#ecd6b1 0%,#ecd6b100 52%),radial-gradient(130% 130% at 90% 94%,#ffd8cb 0%,#ffd8cb00 55%),linear-gradient(135deg,#f4e7d0,#ffe7df) !important; --accent:#b3843f; --ok:#d15f7d; }
body.bg-cst #webTgl, body.bg-cst #uploadReviewBtn, body.bg-cst .chatSend, body.bg-cst #chatSend{ background:linear-gradient(135deg,#c2924e,#e0708a) !important; }

/* 22c 竹紋 rail 跟著馬卡龍變色（原綠 → 各背景色系；原先版無 class 保持原綠）*/
body.bg-sl .left{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='90'%3E%3Crect x='11' width='8' height='90' fill='%239585c2'/%3E%3Crect x='11' width='2' height='90' fill='%23b8abdd'/%3E%3Crect x='9' y='42' width='12' height='4' fill='%235f5288'/%3E%3Cpath d='M19 22 q9 -6 12 0 q-8 7 -12 0 Z' fill='%23b8abdd' stroke='%235f5288' stroke-width='0.8'/%3E%3Cpath d='M11 60 q-9 -6 -9 1 q6 7 9 -1 Z' fill='%239585c2' stroke='%235f5288' stroke-width='0.8'/%3E%3C/svg%3E") !important; }
body.bg-cs .left{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='90'%3E%3Crect x='11' width='8' height='90' fill='%236aa8c9'/%3E%3Crect x='11' width='2' height='90' fill='%238fcbe4'/%3E%3Crect x='9' y='42' width='12' height='4' fill='%23477a97'/%3E%3Cpath d='M19 22 q9 -6 12 0 q-8 7 -12 0 Z' fill='%238fcbe4' stroke='%23477a97' stroke-width='0.8'/%3E%3Cpath d='M11 60 q-9 -6 -9 1 q6 7 9 -1 Z' fill='%236aa8c9' stroke='%23477a97' stroke-width='0.8'/%3E%3C/svg%3E") !important; }
body.bg-cst .left{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='90'%3E%3Crect x='11' width='8' height='90' fill='%23c2924e'/%3E%3Crect x='11' width='2' height='90' fill='%23dbb27f'/%3E%3Crect x='9' y='42' width='12' height='4' fill='%238a6636'/%3E%3Cpath d='M19 22 q9 -6 12 0 q-8 7 -12 0 Z' fill='%23dbb27f' stroke='%238a6636' stroke-width='0.8'/%3E%3Cpath d='M11 60 q-9 -6 -9 1 q6 7 9 -1 Z' fill='%23c2924e' stroke='%238a6636' stroke-width='0.8'/%3E%3C/svg%3E") !important; }

/* ===================================================================
   23. 系統背景切換器 UI（頂列主題鈕旁）
   =================================================================== */
.bgswitch{ position:relative; display:inline-flex; }
#bgBtn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--panel2); border:2px solid var(--line); border-radius:0;
  padding:5px 11px;
}
#bgBtn .bgico{ display:inline-flex; align-items:center; flex:none; font-size:15px; line-height:1; }
#bgBtn .bgico canvas{ width:17px; height:17px; image-rendering:pixelated; vertical-align:middle; }
#bgBtn .car{ opacity:.55; font-size:10px; }
.bgdd{
  position:fixed; width:250px; z-index:60;
  background:var(--panel); border:2px solid var(--line); border-radius:2px;
  box-shadow:3px 3px 0 var(--shadow); padding:6px; display:none;
}
.bgdd.open{ display:block; }
/* 馬卡龍下拉是浮層 → 不透明底（原 var(--panel) 半透明會透出後面遊戲）*/
body.bg-mac .bgdd{ background:#221b2c !important; }
body.bg-mac.light .bgdd{ background:#fcf8fd !important; }
.bgdd .h{ font-size:11px; font-weight:700; color:var(--muted); padding:5px 7px 7px; }
.bgopt{ display:flex; align-items:center; gap:9px; padding:7px; border-radius:2px; cursor:pointer; }
.bgopt:hover{ background:var(--panel2); }
.bgopt .sw{ width:32px; height:22px; border-radius:2px; border:1px solid var(--line); flex:none; }
.bgopt .nm{ font-size:12.5px; font-weight:700; color:var(--ink); }
.bgopt .ds{ font-size:10px; color:var(--muted); }
.bgopt .def{ font-size:9px; font-weight:700; color:var(--accent2); border:1px solid var(--line); border-radius:2px; padding:0 4px; margin-left:4px; }
.bgopt .ck{ margin-left:auto; color:var(--accent); font-weight:900; visibility:hidden; }
.bgopt.sel .ck{ visibility:visible; }
.bgopt.sel{ background:var(--panel2); }
/* Kept in sync with MOBILE_MQ() in index.html: hand-held tablets and unfolded foldables count as mobile.
   If these drift apart, tablets get the mobile layout with the desktop skin on top of it. */
@media (max-width:768px),(pointer:coarse){ #bgBtn .lbl{ display:none; } .bgdd{ width:210px; } }

/* ---- 22. 全域小字底線（pinhsi：字太小傷眼睛。可讀內文/標籤/描述 ≤10.5px 一律拉到 12px；badge/計數/caret/圖鑑格等微符號不動，標題vs內文層級留逐panel審計）---- */
#tutCoach .tcstep,
.apirec .rmodel,
.avcell .pdshy,
.avset-sub,
.cfghint,
.cfgnote,
.cxalt,
.cxsub,
.grole,
.gstat-card span,
.gvcard .gvd,
.kbanswer .kbcite .lbl,
.keypop .kp-h,
.keypop .kp-sub,
.log,
.mpfd .tm,
.mprename,
.mpwho .cstat,
.outbox.rich .svgbar button,
.pdshy,
.petnext,
.petseam,
.qrow .qn,
.rbsec,
.reschead .reschsub,
.shop #cfgKeyState,
.shop .achitem .tx .d,
.shop .cfglabel,
.shop .cfgopt .d,
.shop .item .tx .d,
.shop .kform .kfhint,
.shop .kform .kflabel,
.shop .resitem .tx .d,
.spend-projrow,
.suggest .sglabel,
.tbmeta,
.tbrewardnote,
.todorow .tm2,
.topichint,
.weakwarn button,
.xpwrap small{ font-size:13px !important; }

/* ---- 23. 舒適閱讀字級（pinhsi：描述內文/卡片內文還是太小，要顧老花眼，舒服不刺眼的閱讀感）：真正要讀的內文描述 14px＋行距 1.65；卡片標題/描述放大維持層級 ---- */
.petdesc,.petsign,.rbmini,.rbhead,.rbsec,.petseam,
.shop .item .tx .d,.shop .resitem .tx .d,.shop .achitem .tx .d,
.gvcard .gvd,.cfgnote,.cfghint,.dgnote,.tbhint,.dainfo,.darec,
.topichint,.rchsnip,.cxsub,.cxalt,.tbmeta,.tbrewardnote,
.qrow .qn,.todorow .tk,.suggest .sglabel,.gstat-card span,.spend-projrow,
.shop .cfgopt .d,
.nowbox .info .s{ font-size:14px !important; line-height:1.65 !important; }
/* 辦公室卡片：標題放大 + 描述放大（標題>描述層級保留）*/
/* These !important sizes are the ones that actually render — they override index.html's base rule. So the
   label-legibility multiplier has to be applied here too, or the text alone stays fixed while its padding and
   tracking shrink around it. --lz is set on #labels by placeLabels(); see the band constants beside it. */
.slabel{ font-size:calc(15px*var(--lz,1)) !important; }
.zlabel{ font-size:calc(13.5px*var(--lz,1)) !important; opacity:.92 !important; }
/* §23b 各panel專屬 empty-state / hint / 描述 補進 14px（§23 只收通用類，各面板還有自己的空狀態/提示類）*/
.gnone,.ghint,.tbempty,.mpempty,.spend-empty,.shop .resempty,.rchsnip,.mplegend,
.tbdeliv,.tbpickhint,.inboxitem .itx,.demobanner,.rvbefore,.cxlink,.cxghost,
.mmfallback .mmnote,.ttschnote,.gsec,.mpsec{ font-size:14px !important; line-height:1.6 !important; }

/* ---- 24. 面板外框加寬（pinhsi：字放大後太擠有壓迫感＋條列孤字換行）：桌機抽屜 300→420px（實測 410 起條列不孤字換行，取 420 留邊際）；手機維持全螢幕（max-width:768 覆寫）不動 ---- */
/* Desktop side = the complement of MOBILE_MQ, which is `(max-width:768px),(pointer:coarse)`.
   mobile = (w<=768) or coarse  =>  desktop = (w>=769) and not coarse.
   Written as `(pointer:fine)` rather than Media Queries 4 `not(pointer:coarse)`, which would require
   Safari 16.4+ while target devices may run older iOS.
   Known inexactness: `pointer` is three-valued, so `not coarse` is `fine or none`. A device reporting
   `pointer:none` at >=769px (TV/console browsers) therefore matches neither branch here: it keeps the
   desktop layout from index.html but loses these two skin rules. Not a target device class; accepted. */
@media (min-width:769px) and (pointer:fine){
  .shop{ width:480px !important; }
  #spPanel{ width:480px !important; }
}

/* ---- 25. 圖鑑格放大（pinhsi：圖鑑獸/問號/名稱都太小）：sprite 26→38px（pixelated 放大不糊）、格內字 7.5→11px、稀有角標 9→10px、格距放鬆 ---- */
.petdexrow{ gap:6px !important; }
.pdcell{ font-size:11px !important; padding:5px 3px !important; line-height:1.2 !important; }
.pdcell canvas{ width:38px !important; height:38px !important; }
.pdshy{ font-size:10px !important; }
.pdlbl{ margin-top:2px !important; }

/* ---- 26. flagged inline 小字修正（pinhsi：#hatchClock 此刻孵化卡描述、結緣卷/命格卷標題+icon 還是太小）：inline font-size 用 !important 壓過；字級系統管不到 inline，逐panel掃時一併補 ---- */
#hatchClock{ font-size:14px !important; }
#hatchClock > div:last-child{ font-size:13px !important; }          /* 「五行隨時辰換…」muted 提示行 11→13 */
.petdexhead{ font-size:14px !important; }                            /* 命格卷/結緣卷 標題 12→14，icon(1.4em) 同步放大 */

/* ---- 27. 靈獸名+命格印記併同一排（pinhsi：火系·幼生體 與 巨蟹宮·子鼠 併一行）：flex 置中，petDesc 留下一行 ---- */
.petnamerow{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.petnamerow .petname, .petnamerow .petsign{ margin:0 !important; }

/* ---- 28. 區塊標題放大（pinhsi：團隊/升級/家具… section 標題還是很小、跟卡片不對等，多panel都有）：所有 section 標題 11→14px 粗體（保留灰色+字距，讀成 section 標籤）---- */
.shop .cat, .rbsec, .reschead, .resghead, .tbsec, .mpsec, .gsec, #tplList .cat{ font-size:14px !important; font-weight:800 !important; }

/* ---- 29. 更多選單（pinhsi：480太寬鬆散→縮 280；置中在不同字數下 icon/文字對不齊 → 改靠左 icon 排一列、文字對齊起點=真正一致）：桌機 280px、字 15px、靠左等距；手機 @media 全螢幕不動 ---- */
/* Desktop side = the complement of MOBILE_MQ, which is `(max-width:768px),(pointer:coarse)`.
   mobile = (w<=768) or coarse  =>  desktop = (w>=769) and not coarse.
   Written as `(pointer:fine)` rather than Media Queries 4 `not(pointer:coarse)`, which would require
   Safari 16.4+ while target devices may run older iOS.
   Known inexactness: `pointer` is three-valued, so `not coarse` is `fine or none`. A device reporting
   `pointer:none` at >=769px (TV/console browsers) therefore matches neither branch here: it keeps the
   desktop layout from index.html but loses these two skin rules. Not a target device class; accepted. */
@media (min-width:769px) and (pointer:fine){
  .moremenu{ width:200px !important; }
  .moremenu .shopbtn{ width:100% !important; min-width:0 !important; text-align:left !important; padding-left:30px !important; font-size:15px !important; }
  .moremenu .mmlabel{ font-size:14px !important; font-weight:800 !important; text-align:left !important; padding-left:14px !important; }
  /* icon 固定 22px 欄位 → 文字一律從同一 x 起（解決 .pxi 21 / .pi 16 / 原生 emoji 寬度不一導致文字對不齊）*/
  .moremenu .shopbtn canvas.pxi, .moremenu .shopbtn i.pi{ display:inline-block !important; width:22px !important; height:22px !important; margin-right:7px !important; vertical-align:middle !important; text-align:center !important; }
  /* 公會鈕徽章(原生 emoji，動態換公會徽章)也塞同槽位 → 文字對齊（桌機專屬：22px 欄位對齊桌機清單排版）*/
  .moremenu .shopbtn .gemblem{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:22px !important; height:22px !important; margin-right:7px !important; vertical-align:middle !important; line-height:0 !important; }
  .moremenu .shopbtn .gemblem canvas.pxi{ vertical-align:middle !important; margin:0 !important; }
}
/* .gemblem 本身另有 font-size:32px（index.html:638，給徽章選擇器大格子用的）——pinhsi 真機回報：手機版
   更多選單裡，公會這顆鈕明顯比其他鈕大、像素圖溢出鈕框。根因：上面桌機專屬區塊只鎖住桌機情境下的
   width/height，沒管 font-size，.pxi 用 em 定寬高，换算後 canvas 還是照 32px 算成 ~45px，用
   overflow:visible 溢出容器；手機版更多選單走 index.html 自己的 grid 版面（跟上面這個桌機專屬
   @media 完全無關），從沒被蓋過，同排鄰居的圖示都照 .shopbtn 自己的字級走（手機量到 12.5px→17.5px
   圖示），公會卻卡在 32px→44.8px，差 2.5 倍。這裡刻意寫在 @media 外層（不分桌機/手機都套用），
   font-size 用 inherit 不寫死數字，永遠跟著所在情境的 .shopbtn 字級走，桌機/手機/以後字級調整
   都不會又漂移回來 */
.moremenu .shopbtn .gemblem{ font-size:inherit !important; }

/* ---- 31. 亮色模式：面板輸入框文字改深（原深色主題淺字 #e8eefc 在亮底輸入框上太淡）---- */
body.light .shop input, body.light .shop textarea, body.light .shop select{ color:var(--ink) !important; }

/* ---- 32. 佈景那排鈕統一寬度齊整（pinhsi 2026-07-19：物件庫/清空場景/復位/完成佈置 欄位大小不一致）：右對齊堆疊 → 同 min-width + 同 padding/字級 → 左緣對齊成整齊一直排 ---- */
#decoBtn, #decoTrayBtn, #decoFixBtn, #decoResetBtn{
  min-width:118px !important;
  padding:7px 12px !important;
  font-size:13px !important;
  text-align:center !important;
  box-sizing:border-box !important;
  right:8px !important;
}
/* 垂直等距堆疊，完成佈置（#decoBtn）在最底 bottom:8。功能鍵重新設計第 1 階段後這 4 顆鈕（含 #decoBtn
   自己）在觸控裝置上都會長到 44px 高（.viewtoggle 吃 --tap-min），原本抓 32px 高按鈕算的 38px 一階
   間距會讓相鄰兩顆重疊 6px——改成 44px+6px 間距=50px 一階，滑鼠情境（32px 高）下間距會比原本鬆一點
   （18px 非 6px），純視覺上更寬鬆，不影響任何功能 */
#decoResetBtn{ bottom:58px !important; } #decoFixBtn{ bottom:108px !important; } #decoTrayBtn{ bottom:158px !important; }