/* =========================================================
   原作風主題（覆蓋層）
   只改「外觀」不改版面：配色、描邊、按鈕質感、面板材質、字體描邊。
   全部是覆蓋規則，載在 style.css 之後 —— 想關掉就把 index.html 的 <link> 拿掉。

   設計語彙（對照《貓咪大戰爭》的視覺習慣，不使用原作素材）：
     · 木紋外框 + 奶油色面板
     · 所有元件一律粗深棕描邊（3~4px）
     · 按鈕黃橘漸層 + 無模糊的硬底陰影
     · 標題字用深棕描邊的粗黑體
     · 資源用黑底金框膠囊、金色數字
   ========================================================= */
:root{
  --ink:#3d2308;          /* 主描邊／文字深棕 */
  --ink-s:#5a3512;        /* 次描邊 */
  --wood:#8a5423;         /* 木紋 */
  --wood-d:#5d3413;
  --wood-l:#a86c31;
  --cream:#fdf2d8;        /* 面板奶油色 */
  --cream-d:#ecd6a6;
  --cream-sh:#c9ab72;
  --gold:#ffd75c;         /* 按鈕黃 */
  --gold-d:#f0a11e;
  --gold-sh:#a25d0b;
  --sky-a:#ffc75a;        /* 標題橘黃天空 */
  --sky-b:#f79420;
  --teal:#317063;         /* 基地綠 */
  --teal-d:#1d4a41;
}

/* 全域字體加粗一點，比較接近原作的圓潤粗體 */
html,body{font-family:"Noto Sans TC","Microsoft JhengHei","Segoe UI",system-ui,sans-serif;font-weight:600}

/* ---------- 外框 ----------
   v7.27：整個畫面外圍那一圈 9px 木紋**依使用者要求移除**，改成直接呈現遊戲畫面。
   ⚠ 要加回來的話，重點是「不要用 border:透明 + padding-box 遮罩」那招 ——
     遮罩層必須是不透明的，而中間要透出遊戲畫面，遮不住的結果是木紋鋪滿整個畫面。
     正確做法是四條寫死尺寸的邊（上/下 100%×9px、左/右 9px×100%），
     結構上不可能蓋到中間，寫在 `#app::after`（`z-index:60`、`pointer-events:none`）。
   ⚠ 那圈木紋同時也是畫面的邊界線，拿掉之後 `#app` 只剩投影 —— 深色桌布下會跟背景糊在一起，
     所以留一條 2px 的深色描邊當收邊。 */
#app{box-shadow:0 0 60px #000a,0 0 0 2px #00000059}

/* ---------- 通用按鈕：厚實黃橘 + 粗描邊 + 硬底陰影 ---------- */
.big-btn{
  border:3px solid var(--ink);border-radius:14px;letter-spacing:3px;font-weight:900;
  background:linear-gradient(#fff3c4 0%,var(--gold) 22%,var(--gold-d) 78%,#d9820f 100%);
  color:#5a3200;text-shadow:0 1px 0 #fff8;
  box-shadow:0 5px 0 var(--ink),0 7px 10px #0006,inset 0 2px 0 #fff9,inset 0 -3px 0 #0002;
}
.big-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink),inset 0 2px 0 #fff9}
.big-btn.primary{
  background:linear-gradient(#fff6cf 0%,#ffd75c 22%,#f79420 78%,#d2700c 100%);
  box-shadow:0 5px 0 var(--ink),0 7px 12px #0007,inset 0 2px 0 #fff9,inset 0 -3px 0 #0002;
}
.big-btn.danger{
  background:linear-gradient(#ffc9c9 0%,#f0736f 24%,#c2372f 78%,#93231d 100%);
  color:#fff;text-shadow:0 2px 0 #0006;
}
.big-btn.gacha-cta{
  background:linear-gradient(#f3d4ff 0%,#c98bf5 24%,#8b47cf 78%,#642da0 100%);
  color:#fff;text-shadow:0 2px 0 #0006;
  box-shadow:0 5px 0 var(--ink),0 7px 12px #0007,inset 0 2px 0 #fff8,inset 0 -3px 0 #0002;
}
.big-btn.sandbox-cta{
  background:linear-gradient(#cdfff7 0%,#63dccb 24%,#1f9186 78%,#146a61 100%);
  color:#053b35;text-shadow:0 1px 0 #fff7;
  box-shadow:0 5px 0 var(--ink),0 7px 12px #0007,inset 0 2px 0 #fff9,inset 0 -3px 0 #0002;
}
.back-btn{
  border:3px solid var(--ink);border-radius:12px;font-weight:900;color:#5a3200;
  background:linear-gradient(#fff3c4,var(--gold) 30%,var(--gold-d));
  box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff9;text-shadow:0 1px 0 #fff8;
}
.back-btn:hover{filter:brightness(1.08);background:linear-gradient(#fff3c4,var(--gold) 30%,var(--gold-d))}
.back-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

/* ---------- 畫面底：基地綠 + 唐草感的重複紋樣 ---------- */
.screen{
  background:
    radial-gradient(closest-side at 22% 18%,#ffffff10 0 42%,#0000 43%) 0 0/78px 78px,
    radial-gradient(closest-side at 72% 66%,#ffffff0d 0 34%,#0000 35%) 0 0/54px 54px,
    linear-gradient(#3b8073 0%,var(--teal) 40%,var(--teal-d) 100%);
}
.scr-head{
  background:repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px);
  border-bottom:4px solid #2c1806;box-shadow:0 3px 8px #0006;
}
.scr-head h2{font-weight:900;color:#fff6dd;text-shadow:0 0 4px #3d2308,2px 2px 0 #3d2308,-2px 2px 0 #3d2308,2px -2px 0 #3d2308,-2px -2px 0 #3d2308}

/* ---------- 資源膠囊：黑底金框 + 金色數字 ---------- */
.xp-chip,.title-currency .cur,.tk-chip{
  background:linear-gradient(#1c1206,#0d0803);border:2.5px solid var(--gold-d);border-radius:22px;
  color:#ffe9a8;font-weight:900;box-shadow:inset 0 2px 4px #000a,0 2px 0 #2c1806;
}
.xp-chip b,.tk-chip b,.title-currency .cur b{color:#ffd75c;text-shadow:0 0 6px #ffae2a88}

/* ---------- 標題畫面：橘黃天空 ---------- */
#scr-title{
  background:
    radial-gradient(closest-side at 50% 50%,#fff3c060 0 30%,#0000 31%) 0 0/120px 120px,
    linear-gradient(#ffd97a 0%,var(--sky-a) 38%,var(--sky-b) 78%,#e07c14 100%);
}
.game-logo{
  font-weight:900;letter-spacing:6px;
  background:linear-gradient(#fff 0%,#ffe9a0 42%,#ffb229 72%,#f2851a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* 粗描邊：多層 text-shadow 疊出外框，比 -webkit-text-stroke 更接近原作的厚描邊 */
  filter:drop-shadow(3px 0 0 #3d2308) drop-shadow(-3px 0 0 #3d2308)
         drop-shadow(0 3px 0 #3d2308) drop-shadow(0 -3px 0 #3d2308)
         drop-shadow(0 6px 0 #00000055);
  text-shadow:none;
}
#scr-title .sub{
  color:#fff4d2;font-weight:900;letter-spacing:7px;
  text-shadow:2px 2px 0 #a85f12,-2px 2px 0 #a85f12,2px -2px 0 #a85f12,-2px -2px 0 #a85f12,0 4px 6px #0004;
}
.version{color:#7a4410;font-weight:800;text-shadow:0 1px 0 #ffffff66}
.account-chip{
  background:linear-gradient(#1c1206,#0d0803);border:2.5px solid var(--gold-d);color:#ffe9a8;font-weight:800;
  box-shadow:inset 0 2px 4px #000a,0 2px 0 #2c1806;
}
.account-chip:hover{background:linear-gradient(#2a1c0b,#150d05)}

/* ---------- 世界地圖：羊皮紙 ---------- */
.stage-map-wrap{
  background:
    radial-gradient(closest-side at 30% 25%,#00000010 0 40%,#0000 41%) 0 0/90px 90px,
    linear-gradient(#f3dfae 0%,#e6c98c 45%,#cfa966 100%);
}
.stage-node{
  border:3.5px solid var(--ink);
  background:radial-gradient(circle at 35% 28%,#fff6d8,#f0c86a 62%,#d29b3a);
  box-shadow:0 4px 0 #00000044,inset 0 2px 0 #fff9;color:#5a3200;
}
.stage-node .sn-no{background:#1c1206;border:2px solid var(--gold-d);color:#ffe9a8;font-weight:900}
.stage-tip{
  background:linear-gradient(var(--cream),var(--cream-d));border:3.5px solid var(--ink);border-radius:14px;
  color:#4a2a08;box-shadow:0 6px 0 #00000033,0 10px 22px #0005;
}
.stage-tip .st-name{color:#3d2308;font-weight:900}
.stage-tip .st-name em{background:#1c1206;color:#ffd75c;border:1.5px solid var(--gold-d)}

/* ---------- 圖鑑 / 轉蛋統計（v7.9）----------
   ⚠ 這兩塊在 style.css 裡是「深底 + 淺色字」，翻成奶油底之後淺色字會直接消失。
   所以每一條文字色都要重新指定成深棕系（見 §5.5 的對比度稽核）。
   稀有度顏色（#7fd0f5 / #8ef07a / #ffca4a / #ff7be0）本來就是給深底用的亮色，
   在奶油底上一律改成「深色膠囊 + 亮色字」，沿用主題既有的 em/chip 語彙。 */
.dex-tab{background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));
  border:2.5px solid var(--ink);color:#5a3200;box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #fff9}
.dex-tab:hover{filter:brightness(1.08)}
.dex-tab.on{background:linear-gradient(#fffdf2,#fff0b8);border-color:var(--ink);color:#3d2308;
  box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #fff,0 0 12px #ffd75c}
.dex-progress{color:#fff6dd;text-shadow:1px 1px 0 #3d2308,-1px 1px 0 #3d2308,1px -1px 0 #3d2308,-1px -1px 0 #3d2308}
.dex-progress b,.dex-progress .dx-pct{color:#ffe9a8}
.dx-bar{background:#1c1206;border-color:var(--gold-d)}

.dex-f{background:linear-gradient(var(--cream),var(--cream-d));border:2px solid var(--ink);color:#5a3512}
.dex-f:hover{filter:brightness(1.05)}
.dex-f.on{background:linear-gradient(#fff3c4,var(--gold) 40%,var(--gold-d));color:#3d2308;border-color:var(--ink)}

.dex-cell{background:linear-gradient(var(--cream),var(--cream-d));border:2.5px solid var(--ink);
  box-shadow:0 3px 0 #00000030,inset 0 2px 0 #fffc}
.dex-cell canvas{background:#fff8e4;border-radius:7px}
.dex-cell .dxc-name{color:#3d2308;font-weight:900}
.dex-cell.locked .dxc-name{color:#8a7856}
.dex-cell.sel{border-color:#c98a10;background:linear-gradient(#fff6d8,#f4dfa4);box-shadow:0 0 12px #ffd75c}
.dex-cell.boss{border-color:#a3242f}
.dex-cell.r-rare{border-color:#2f7ba8}.dex-cell.r-sr{border-color:#2c8a35}
.dex-cell.r-uber{border-color:#b56a13}.dex-cell.r-legend{border-color:#8f2b7c}

.dex-detail{background:linear-gradient(var(--cream),var(--cream-d));border:3px solid var(--ink);
  box-shadow:0 4px 0 #00000030,inset 0 2px 0 #fffc}
.dex-detail .dx-art{background:linear-gradient(#1c1206,#0d0803);border:2.5px solid var(--gold-d)}
.dex-detail .dx-name{color:#3d2308}
.dex-detail .dx-sub{color:#6b4a1e}
.dex-detail .dx-basic{color:#2c6a3a}
.dex-detail .dx-evo{color:#b06a00}
/* BOSS 標籤被包在深色膠囊裡（見下面的 .dx-sub span），所以要用亮紅而不是深紅 */
.dex-detail .dx-boss{color:#ff7b7b}
.dex-detail .dxs-l{color:#6b4a1e}
.dex-detail .dxs-v{color:#3d2308}
.dex-detail .dxs-bar{background:#00000038;border-color:#00000030}
.dex-detail .dx-mini{color:#6b4a1e}
.dex-detail .dx-mini b{color:#3d2308}
.dex-detail .dx-sec{color:#8a5a12;border-bottom-color:#00000026}
.dex-detail .dx-desc{color:#4a2a08}
.dex-detail .dx-desc b{color:#a05a00}
.dex-detail .dx-q{color:#8f7448}
.dex-detail .dx-lname{color:#8a5a12}
.dex-detail .dx-ltip{color:#6b4a1e}
.dx-empty{color:#8a7856}
/* 稀有度／屬性標籤在奶油底上要靠深色膠囊撐對比 */
.dex-detail .dx-sub span{background:#1c1206;border:1.5px solid var(--gold-d);border-radius:6px;padding:0 6px}
.dex-detail .dx-basic,.dex-detail .dx-evo{background:none;border:none;padding:0}

.gacha-stats{background:linear-gradient(var(--cream),var(--cream-d));border:3px solid var(--ink);
  box-shadow:0 4px 0 #00000030,inset 0 2px 0 #fffc}
.gacha-stats .gs-head{color:#8a5a12}
.gacha-stats .gs-head b{color:#3d2308}
.gacha-stats .gs-note{color:#8a7856}
.gacha-stats .gs-tag{background:#1c1206;border:1.5px solid var(--gold-d);border-radius:5px;
  padding:1px 5px;width:auto;min-width:52px;text-align:center}
.gacha-stats .gs-n{color:#3d2308}
.gacha-stats .gs-real{color:#2c6a3a}
.gacha-stats .gs-pub{color:#8a7856}
.gacha-stats .gs-hlabel{color:#6b4a1e}
.gacha-stats .gs-empty{color:#8a7856}
.coll-more{background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));border:2px solid var(--ink);
  color:#5a3200;box-shadow:0 2px 0 var(--ink)}
.coll-more:hover{filter:brightness(1.08);background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d))}
/* 圖鑑收集區的小計也是亮色字，同樣包成深色膠囊 */
.collection-title .coll-sub{background:#1c1206;border:1.5px solid var(--gold-d);border-radius:5px;padding:0 5px}

/* ---------- 儲藏庫（v7.11）：水底本身就是深底，文字維持亮色即可 ---------- */
.storage-body{border:3px solid var(--ink);box-shadow:inset 0 0 0 2px #ffffff1a}
.stb{background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));border:2.5px solid var(--ink);
  color:#5a3200;box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #fff9}
.stb:hover{filter:brightness(1.08);background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));color:#5a3200}
/* ⚠ 漸層中段決定白字讀不讀得到：原本中段是 #c98bf5（太亮）只有 2.47:1，壓深後 5.4:1 */
.stb.alt{background:linear-gradient(#c98bf5,#8b47cf 34%,#5f2a99);color:#fff;text-shadow:0 1px 0 #0006}
.stb.alt:hover{background:linear-gradient(#c98bf5,#8b47cf 34%,#5f2a99);color:#fff}
.stb.dex{background:linear-gradient(#dcecff,#9dc0ea 32%,#5f8cc4);color:#0f2f52}
.stb.dex:hover{background:linear-gradient(#dcecff,#9dc0ea 32%,#5f8cc4);color:#0f2f52}

/* ---------- 關卡地圖（v7.11 依原作重排）---------- */
.sr-arrow{background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));border:2px solid var(--ink);
  color:#5a3200;box-shadow:0 2px 0 var(--ink)}
.sr-arrow:hover:not(:disabled){filter:brightness(1.08);color:#5a3200}
.sr-cell{background:linear-gradient(var(--cream),var(--cream-d));border:2.5px solid var(--ink);
  box-shadow:0 3px 0 #00000030,inset 0 2px 0 #fffc}
.sr-cell .sr-name{color:#3d2308}
.sr-cell .sr-meta{color:#6b4a1e}
.sr-cell .sr-meta b{color:#a05a00}
.sr-cell .sr-meta .sr-lock{color:#8a7856}
.sr-cell.on{background:#fffdf2;border-color:#c98a10;box-shadow:0 0 12px #ffd75c,0 3px 0 var(--ink)}
.sr-star{color:#f0a11e}
.sl-info{background:linear-gradient(var(--cream),var(--cream-d));border:3px solid var(--ink);
  box-shadow:0 4px 0 #00000030,inset 0 2px 0 #fffc}
.sl-no{color:#8a7856}
.sl-name{color:#3d2308}
.sl-row{color:#6b4a1e}
.sl-row b{color:#3d2308}
.sl-done{color:#a05a00}
.sl-go{border:3px solid var(--ink);color:#5a3200;
  background:linear-gradient(#fff3c4 0%,var(--gold) 24%,var(--gold-d) 78%,#d9820f 100%);
  box-shadow:0 5px 0 var(--ink),0 7px 12px #0007,inset 0 2px 0 #fff9}
.sl-go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink),inset 0 2px 0 #fff9}

/* ---------- 隊伍編成（v7.11 依原作重排）---------- */
.deploy-list{background:#00000030;border:3px solid var(--ink);border-radius:14px}
.dl-tag{color:#ffe9a8;text-shadow:1px 1px 0 #3d2308,-1px 1px 0 #3d2308,1px -1px 0 #3d2308,-1px -1px 0 #3d2308}
.ll-tab{background:linear-gradient(var(--cream),var(--cream-d));border:2px solid var(--ink);color:#5a3512}
.ll-tab em{color:#8a7856}
.ll-tab.on{background:linear-gradient(#fff3c4,var(--gold) 40%,var(--gold-d));color:#3d2308;border-color:var(--ink)}
.ll-tab.on em{color:#7a5200}
.ll-link{background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));border:2px solid var(--ink);
  color:#5a3200;box-shadow:0 2px 0 var(--ink)}
.ll-link:hover{filter:brightness(1.08);background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d))}
.ll-link.dex{background:linear-gradient(#dcecff,#9dc0ea);color:#123a63;border-color:var(--ink)}
.ll-link.dex:hover{background:linear-gradient(#dcecff,#9dc0ea)}
.pool-cat .pc-name{color:#3d2308}
.pool-cat .pc-lv{color:#6b4a1e}
.pool-cat .pc-lv em{color:#b06a00}
/* 「真」形態徽章做成深底亮字的膠囊，淺色底上才夠對比 */
.pool-cat .pc-lv .pc-evo{color:#ffd75c;background:#1c1206;border:1px solid var(--gold-d)}
.lslot .ls-name{color:#3d2308}
.pool-empty{color:#8a7856}

/* ---------- 卡片：奶油色面板 + 粗描邊 ---------- */
.upg-card,.fnd-card,.pool-cat,.lslot,.combo-item,.sb-cell,.login-card,.shop-card{
  background:linear-gradient(var(--cream),var(--cream-d));
  border:3px solid var(--ink);border-radius:13px;color:#4a2a08;
  box-shadow:0 4px 0 #00000030,inset 0 2px 0 #fffc;
}
.upg-card canvas,.fnd-card canvas{background:#fff8e4;border:2px solid var(--cream-sh);border-radius:9px}
.upg-name,.fnd-name,.ls-name,.pool-cat span{color:#3d2308;font-weight:900}
.upg-name em,.fnd-name em{color:#8a5a12}
.upg-stat,.fnd-desc,.ci-d{color:#6b4a1e}
.upg-card.locked{filter:grayscale(.5) brightness(.9)}
.upg-card.evolved{border-color:#c98a10;background:linear-gradient(#fff6d8,#f4dfa4)}
.upg-card.evolved .upg-name em{color:#b06a00}
.lslot.empty{background:linear-gradient(#e6d3aa,#d3bd8e);border-style:dashed}
.ls-key,.sn-no{color:#ffe9a8}
.lslot .ls-key{background:#1c1206;border:2px solid var(--gold-d);border-radius:8px}
.combo-panel{background:#0000002e;border:3px solid #ffffff2e;border-radius:14px}
.combo-title{color:#fff6dd;font-weight:900;text-shadow:0 2px 0 #0006}
.combo-item.on{border-color:#3f9c48;background:linear-gradient(#e6ffd9,#c9f0b4)}
.ci-h b{color:#3d2308}
.ci-on{background:#3f9c48;color:#fff}

/* 小按鈕（強化／基地／商店）沿用黃橘厚實感 */
.upg-btn,.fnd-btn,.evo-btn,.sb-btn,.shop-btn{
  border:2.5px solid var(--ink);border-radius:11px;font-weight:900;color:#5a3200;
  background:linear-gradient(#fff3c4,var(--gold) 30%,var(--gold-d));
  box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff9;text-shadow:0 1px 0 #fff8;
}
.upg-btn:active,.fnd-btn:active,.evo-btn:active,.shop-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.upg-btn:disabled,.fnd-btn:disabled,.evo-btn:disabled,.shop-btn:disabled{
  background:linear-gradient(#d9cdb2,#b7a888);color:#7a6c52;box-shadow:0 4px 0 #6b5c42;border-color:#6b5c42;
}
.fnd-pips i{background:#00000026;border:1px solid #00000033}
.fnd-pips i.on{background:linear-gradient(#ffe08a,#f0b429)}

/* 能力標籤：底色改成不透明小牌子，在奶油底上才看得清楚 */
.atag{border-width:2px;font-weight:900;background:#fffdf5;box-shadow:0 1px 0 #00000022}

/* ---------- 登入畫面 ---------- */
#scr-login{background:linear-gradient(#ffd97a,var(--sky-a) 45%,#e88b18 100%)}
.login-card{padding:18px 20px}
.login-form label{color:#6b4a1e;font-weight:800}
.login-form input{background:#fffdf3;border:2.5px solid var(--ink-s);border-radius:10px;color:#3d2308;font-weight:700}
.login-form input:focus{border-color:var(--gold-d)}
.login-tabs{background:#00000018;border:2px solid #00000022}
.lt-btn{color:#6b4a1e}
.lt-btn.on{background:linear-gradient(#fff3c4,var(--gold-d));color:#5a3200;border:2px solid var(--ink)}
.login-divider{color:#7a5a2a}
.login-divider::before,.login-divider::after{background:#00000026}
.login-proto-note{background:#fff8e0;border:2.5px solid #c9a24a;color:#6b4a1e;border-radius:12px}
.login-proto-note b{color:#a35f00}
.login-err{background:#ffe3e0;border:2.5px solid #c2372f;color:#8c2018}

/* ---------- 戰鬥 HUD ---------- */
.castle-hp .bar{border:3px solid var(--ink);border-radius:11px;background:#150d04}
.castle-hp .ch-label{font-weight:900;text-shadow:2px 2px 0 #3d2308,-2px 2px 0 #3d2308,2px -2px 0 #3d2308,-2px -2px 0 #3d2308}
.money-bar{border:3px solid var(--ink);border-radius:11px;background:#150d04}
.wallet,.cannon{border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff7}
.wallet:active,.cannon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.tool{border:2.5px solid var(--ink);border-radius:11px;font-weight:900;color:#5a3200;
  background:linear-gradient(#fff3c4,var(--gold) 32%,var(--gold-d));box-shadow:0 3px 0 var(--ink),inset 0 2px 0 #fff9}
.tool:hover{filter:brightness(1.08)}
.tool:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.tool.danger{background:linear-gradient(#ffc9c9,#f0736f 30%,#c2372f);color:#fff;text-shadow:0 1px 0 #0006}

/* 出擊鈕：原作是「上面角色圖、下面金色價格條」的厚卡片 */
.ubtn{
  border:3px solid var(--ink);border-radius:12px;
  background:linear-gradient(var(--cream),var(--cream-d));
  box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fffc;
}
.ubtn canvas{background:linear-gradient(#fff8e4,#f0dfb4)}
.ubtn .u-name{background:#1c1206e0;color:#ffe9a8;font-weight:900;letter-spacing:1px}
.ubtn .u-cost{
  background:linear-gradient(#fff3c4,var(--gold) 40%,var(--gold-d));color:#5a3200;font-weight:900;
  border-top:2px solid var(--ink);
}
.ubtn .u-key{color:#ffd75c;text-shadow:0 1px 2px #000}
.ubtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ubtn.evo{box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px #ffb52988}
.ubtn.poor .u-cost{background:linear-gradient(#d9cdb2,#a89878);color:#6b5c42}

/* 懸停詳情：奶油紙卡 */
#unit-tip{
  background:linear-gradient(var(--cream),var(--cream-d));border:3px solid var(--ink);border-radius:14px;
  box-shadow:0 6px 0 #00000033,0 10px 24px #0006;backdrop-filter:none;
}
#unit-tip .tip-h{color:#3d2308;font-weight:900}
#unit-tip .tip-h em{color:#a35f00}
#unit-tip .tip-row{color:#6b4a1e}
#unit-tip .tip-row b{color:#3d2308}
#unit-tip .tip-desc{color:#7a5a2a;border-top:2px solid #00000022}

/* 戰鬥中央大字：黑邊粗體 */
#battle-msg{
  color:#fff3c4;
  text-shadow:4px 4px 0 #3d2308,-4px 4px 0 #3d2308,4px -4px 0 #3d2308,-4px -4px 0 #3d2308,
              0 0 20px #ffae2a,0 8px 14px #0007;
}

/* ---------- 測試場面板 ---------- */
#sandbox-panel{background:linear-gradient(#2f6d61f2,#1d4a41f7);border:3px solid var(--ink);border-radius:14px}
.sb-head{background:repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px);
  border-bottom:3px solid #2c1806}
.sb-title{color:#fff6dd;font-weight:900;text-shadow:0 2px 0 #0006}
.sb-cell{border-width:2.5px;box-shadow:0 3px 0 #00000030,inset 0 2px 0 #fffc}
.sb-cell span{color:#3d2308;font-weight:800}
.sb-cell.foe{background:linear-gradient(#ffdcd6,#eebfb4);border-color:#8c2018}
.sb-cell.foe span{color:#6b2018}
.sb-tag{background:#1c1206;color:#ffd75c;border:1.5px solid var(--gold-d)}

/* =========================================================
   對比修正
   把面板從深藍改成奶油色之後，原本設計給深底的淺色文字會變成看不見。
   以下都是實際跑對比度稽核抓出來的（最慘的 .ls-name 只有 1.07:1）。
   選擇器刻意寫得跟 style.css 一樣具體，否則蓋不過去。
   ========================================================= */
/* 奶油色面板上的文字 → 深棕 */
.lslot .ls-name{color:#3d2308;font-weight:800}
.ci-u{color:#5a3c14}
.fnd-sub{color:#6b4a1e}
.fnd-sub b{color:#3d2308}
.fnd-sub .arr{color:#2f7a38;font-weight:900}
.shop-name{color:#3d2308}
.shop-desc{color:#6b4a1e}
.shop-orig{color:#8a6a3a}
.shop-card.deal{background:linear-gradient(#fff0e6,#f6d9c6);border-color:#c2372f}
.shop-badge{background:linear-gradient(#f0736f,#c2372f);border:2px solid var(--ink);border-radius:8px}
.shop-buy{border:2.5px solid var(--ink);border-radius:11px;font-weight:900;color:#5a3200;
  background:linear-gradient(#fff3c4,var(--gold) 30%,var(--gold-d));box-shadow:0 4px 0 var(--ink),inset 0 2px 0 #fff9}
.shop-buy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.shop-buy:disabled,.upg-btn:disabled,.fnd-btn:disabled,.evo-btn:disabled{
  background:linear-gradient(#efe6d2,#cfc0a2);color:#5c5040;box-shadow:0 4px 0 #7a6b52;border-color:#7a6b52}
.upg-card canvas,.fnd-card canvas,.shop-card canvas{background:#fff8e4}

/* 綠底（.screen）上的說明文字 → 奶油色 + 深綠描邊，才不會糊在背景裡 */
.lineup-hint,.set-note,.rates-toggle,.help-body,.shop-intro{color:#f2ead2}
.help-body{text-shadow:0 1px 2px #00000055}
.shop-intro{background:#00000033;border:2px solid #ffffff26}
.shop-intro b{color:#ffd75c}
.rates-toggle{color:#ffe9a8}
.help-body code{background:#00000044;color:#ffd75c}
#scr-help .screen-note,#scr-help p{color:#e4dcc4}

/* 能力標籤：改成深底小牌子，各種能力色在深底上都看得清楚 */
.atag{background:#2c1c08;border-color:color-mix(in srgb,var(--c) 70%,#0000);color:var(--c);
  text-shadow:0 1px 2px #000;box-shadow:0 1px 0 #00000033}

/* 副標題：白字 + 厚棕描邊（橘色天空上最清楚的組合） */
#scr-title .sub{
  color:#fff;
  text-shadow:2.5px 2.5px 0 #7a3f00,-2.5px 2.5px 0 #7a3f00,2.5px -2.5px 0 #7a3f00,-2.5px -2.5px 0 #7a3f00,
              0 4px 8px #00000055;
}

/* =========================================================
   戰鬥下方 UI 的質感強化（v7.27）
   =========================================================
   之前這一條是「半透明黑漸層 + 平面按鈕」，跟遊戲其他畫面的木頭／奶油風格是斷開的。
   這裡把它做成一塊**木頭底座**，上面的零件補上高光、內陰影與厚度。

   ⚠ 只動外觀，**不動任何尺寸**（`.ubtn` 80×66、`.money-row` 的間距都沒改）——
     出擊鈕的寬高是配合 10 隻角色一排排得下算出來的，動了就要重排。
     唯一的例外是 `.bottom-bar` 多了 4px 的上緣描邊，等於整條往上長 4px（可忽略）。 */
.bottom-bar{
  background:
    linear-gradient(#00000055,#0000 14px),
    repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px);
  border-top:4px solid var(--ink);
  box-shadow:0 -6px 16px #0007,inset 0 3px 0 #ffffff1c;
}
/* 錢包／加農炮：照片底上再壓一層立體邊 */
.wallet,.cannon{box-shadow:0 4px 0 var(--ink),0 6px 10px #0006,inset 0 2px 0 #fff7,inset 0 -3px 0 #00000026}
/* 存錢條：軌道做出凹槽感，填色加一條高光讓它像玻璃管 */
.money-bar{box-shadow:inset 0 3px 6px #000a,0 3px 0 #00000059}
.mb-fill{
  background:linear-gradient(#fff6c9 0%,#ffe07a 38%,#f0b429 62%,#d99418 100%);
  box-shadow:inset 0 2px 0 #fffffff2,inset 0 -3px 5px #00000026;
}
.mb-ticks i{border-right-color:#00000033}
.mb-text{text-shadow:0 1px 0 #ffffff8c,0 -1px 0 #00000026}
/* 出擊鈕：厚卡片＋角色圖上緣的柔光，滑過去會抬起來 */
.ubtn{box-shadow:0 4px 0 var(--ink),0 6px 10px #00000059,inset 0 2px 0 #fffc}
.ubtn canvas{background:linear-gradient(#fffdf3,#efdcae)}
.ubtn::after{                      /* 卡片上半部的斜向反光，關掉就少一半質感 */
  content:"";position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;z-index:1;
  background:linear-gradient(150deg,#ffffff59 0%,#ffffff12 38%,#fff0 62%);
}
/* ⚠ ::after 在同一個堆疊脈絡裡是**最後畫**的，不把文字類的子元素拉上來，
   反光會蓋在冷卻倒數上面（實際會糊掉一層白）。
   （v7.28 起卡片上已經沒有 .u-name / .u-tags，這裡只剩倒數與價格。） */
.ubtn .u-cd,.ubtn .u-cost{z-index:2}
.ubtn .u-cost{box-shadow:inset 0 2px 0 #fffffff2,inset 0 -2px 4px #00000026}
.ubtn:hover{filter:brightness(1.05)}
.ubtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink),0 2px 6px #00000059}
.ubtn.poor::after{background:linear-gradient(150deg,#ffffff26 0%,#fff0 55%)}

/* ---------- 捲軸 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#00000026;border-radius:5px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--gold-d));border:2px solid var(--ink);border-radius:6px}