/* =========================================================
   章節選擇 + 貓咪基地 + 選單
   （承接 theme.css 的變數；拿掉這一行畫面仍可運作，只是沒有原作風外觀）
   ========================================================= */

/* ---------------- 章節選擇 ---------------- */
#scr-chapter{
  background:radial-gradient(120% 90% at 50% 0%,#ffd98a 0%,var(--sky-a) 45%,var(--sky-b) 100%);
  align-items:center;justify-content:center;gap:14px;padding:0 26px;
}
#scr-chapter::before{                     /* 底部雲層 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:92px;pointer-events:none;
  background:
    radial-gradient(38px 26px at 10% 100%,#fff 60%,#fff0 62%),
    radial-gradient(46px 30px at 27% 100%,#fff 60%,#fff0 62%),
    radial-gradient(40px 26px at 45% 100%,#fff 60%,#fff0 62%),
    radial-gradient(50px 32px at 63% 100%,#fff 60%,#fff0 62%),
    radial-gradient(42px 28px at 82% 100%,#fff 60%,#fff0 62%),
    linear-gradient(#fff0 40%,#fff 76%);
}
.ch-close{
  position:absolute;top:14px;right:16px;width:50px;height:50px;border-radius:50%;z-index:3;
  border:4px solid var(--ink);background:radial-gradient(circle at 34% 28%,#fff,#e8e8e8 60%,#c9c9c9);
  color:var(--ink);font-size:22px;font-weight:900;cursor:pointer;line-height:1;
  box-shadow:0 5px 0 #8d8d8d,0 8px 14px #0005;
}
.ch-close:active{transform:translateY(3px);box-shadow:0 2px 0 #8d8d8d}
.ch-bubble{
  position:relative;z-index:2;padding:9px 22px;border-radius:14px;
  background:linear-gradient(var(--gold),var(--gold-d));border:4px solid var(--ink);
  color:var(--ink);font-size:15px;font-weight:900;line-height:1.35;text-align:center;
  box-shadow:0 5px 0 var(--gold-sh),0 8px 16px #0005;
}
.ch-bubble::after{                        /* 對話框小尾巴 */
  content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--ink);
}
.ch-rail{display:flex;align-items:center;justify-content:center;gap:16px;z-index:2}
/* 章節那一層：格狀，一排 4 個、自動換行（撐得住 7 章以上，v7.30） */
.ch-rail.grid{
  display:grid;grid-template-columns:repeat(4,150px);gap:10px;
  justify-content:center;align-content:center;
}
.ch-rail.grid .ch-card{width:150px;height:130px;gap:2px;border-width:4px}
.ch-rail.grid .cc-name{font-size:18px;letter-spacing:1px}
.ch-rail.grid .cc-sub{font-size:10.5px}
.ch-rail.grid .cc-prog{font-size:11px;padding:1px 9px;margin-top:2px}
.ch-rail.grid .cc-lock{bottom:6px;font-size:9.5px;padding:2px 6px}
.ch-card{
  position:relative;width:186px;height:186px;flex:0 0 auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:5px solid var(--ink);border-radius:10px;color:#fff;
  background:linear-gradient(160deg,var(--t1),var(--t2));
  box-shadow:0 6px 0 #00000055,0 10px 20px #0006;
  transition:transform .12s,filter .12s;
  filter:brightness(.62) saturate(.7);transform:scale(.86);
}
.ch-card:hover{filter:brightness(.82) saturate(.88)}
.ch-card.on{filter:none;transform:scale(1);border-color:#fff3c4;
  box-shadow:0 0 0 4px var(--ink),0 8px 0 #00000055,0 12px 26px #0007}
.ch-card.locked{filter:grayscale(.85) brightness(.5);cursor:not-allowed}
.cc-name{font-size:22px;font-weight:900;letter-spacing:2px;
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.cc-sub{font-size:12px;opacity:.94;letter-spacing:1px;text-shadow:0 2px 0 #0007}
.cc-prog{margin-top:4px;font-size:13px;font-weight:800;padding:2px 12px;border-radius:10px;
  background:#0006;border:2px solid #ffffff4d}
.cc-lock{position:absolute;bottom:10px;font-size:10.5px;background:#000000a6;
  padding:3px 8px;border-radius:8px;border:2px solid #ffffff33}
.ch-hint{z-index:2;max-width:620px;text-align:center;font-size:12.5px;line-height:1.55;
  color:var(--ink);background:#fffaeae6;border:3px solid var(--ink);border-radius:10px;padding:6px 14px}

/* ---------------- 基地 ---------------- */
/* v7.27 主視覺強化：原本只有「斜線紋 + 綠色漸層」，平到像一張色卡。
   加了三層（由上往下疊）：
     1. 夥伴身後的柔光 —— 讓右下角的人物有主體感，眼睛第一眼會落在那裡
     2. 頂部的暖色天光 + 底部壓暗 —— 做出上亮下暗的景深
     3. 原本的斜線紋（保留，但降低到只當質地）
   ⚠ 全部都是 CSS 漸層，沒有多載任何圖，也沒有動到版面尺寸。 */
#scr-base{
  background:
    radial-gradient(46% 52% at 79% 76%,#ffffff26 0%,#fff0 68%),
    radial-gradient(90% 55% at 50% 0%,#ffe6a814 0%,#fff0 60%),
    repeating-linear-gradient(-38deg,#ffffff0d 0 3px,#0000 3px 22px),
    radial-gradient(120% 100% at 50% 0%,#3d8577 0%,var(--teal) 55%,var(--teal-d) 100%);
  padding:0;
}
/* 四角壓暗（vignette）。放在 .base-body 上而不是整個畫面，才不會蓋掉上下的木頭橫條。 */
.base-body{position:relative}
.base-body::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 40%,#0000 52%,#00000040 100%);
}
/* 內容要浮在 vignette 之上 */
.base-left,.base-right{position:relative;z-index:1}
.base-top{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  padding:7px 16px;border-bottom:4px solid var(--ink);
  background:repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px);
}
/* ⚠ v7.27b：使用者回報「基地整個很空曠」。左欄原本只佔掉 442px 可用高度中的約 293px，
   右邊也只有一個小對話框 —— 所以這一輪把所有零件整體放大一級（字級、內距、欄寬、
   夥伴尺寸），不是只調某一顆。放大後左欄約 370px，仍留得下 `margin-top:auto` 的呼吸空間。 */
.base-name{font-size:25px;font-weight:900;color:var(--cream);letter-spacing:4px;
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.base-res .br-xp{font-size:15.5px;font-weight:800;color:var(--ink);
  background:linear-gradient(var(--cream),var(--cream-d));border:3px solid var(--ink);
  border-radius:16px;padding:5px 17px}
.base-res b{color:#b4530a}
.base-body{flex:1;display:flex;gap:14px;padding:12px 16px;min-height:0}
.base-left{display:flex;flex-direction:column;gap:10px;width:372px;flex:0 0 auto}
.base-btn{
  border:4px solid var(--ink);border-radius:14px;padding:14px 0;cursor:pointer;
  background:linear-gradient(var(--gold) 0%,#ffc23d 52%,var(--gold-d) 100%);
  color:var(--ink);font-size:24px;font-weight:900;letter-spacing:4px;
  box-shadow:0 5px 0 var(--gold-sh),0 8px 14px #0006;transition:.08s;
}
.base-btn:hover{filter:brightness(1.07)}
.base-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-sh)}
.base-icons{display:flex;gap:9px;margin-top:2px}
.base-icon{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  border:3px solid var(--ink);border-radius:12px;padding:8px 0;
  background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink);
  font-size:12.5px;font-weight:800;box-shadow:0 4px 0 var(--cream-sh),0 6px 10px #0005;
}
.base-icon i{font-style:normal;font-size:26px;line-height:1}
.base-icon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cream-sh)}
.base-plank{
  display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 11px;
  border:4px solid var(--ink);border-radius:12px;
  background:repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px);
  box-shadow:0 5px 0 #2c1806,0 8px 14px #0006;
}
.bp-store{
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  border:3px solid var(--ink);border-radius:10px;padding:6px 12px;
  background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink);font-size:11.5px;font-weight:800;
}
.bp-store i{font-style:normal;font-size:23px;line-height:1}
.bp-egg{
  position:relative;flex:1;cursor:pointer;border:3px solid var(--ink);border-radius:28px;
  padding:9px 0;font-size:14px;font-weight:900;line-height:1.2;color:var(--ink);
  box-shadow:0 4px 0 #00000055;
}
.bp-egg.cat{background:linear-gradient(#b8f07a,#77c72e)}
.bp-egg.rare{background:linear-gradient(var(--gold),var(--gold-d))}
.bp-egg:active{transform:translateY(3px);box-shadow:0 1px 0 #00000055}
.bp-egg em{
  position:absolute;top:-8px;right:-6px;min-width:22px;padding:1px 5px;border-radius:11px;
  background:#e8452f;border:2px solid var(--ink);color:#fff;font-style:normal;font-size:11px;font-weight:900;
}
.base-right{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;min-width:0}
.base-bubble{
  width:100%;min-height:112px;display:flex;align-items:center;justify-content:center;
  padding:16px 18px;border-radius:16px;text-align:center;
  background:linear-gradient(#e9f5f1,#cfe4dd);border:4px solid var(--ink);color:var(--ink);
  font-size:17px;font-weight:800;line-height:1.6;box-shadow:0 5px 0 #9db8b0,0 8px 14px #0005;
}
/* 換句台詞時淡入，不然文字會硬跳 */
.base-bubble.swap{animation:bb-swap .34s ease}
@keyframes bb-swap{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* ---- 招牌夥伴（v7.27：可點擊更換）----
   ⚠ 原本 `.base-cat` 自己是 `position:absolute` + `pointer-events:none`。
     現在定位改掛在外層按鈕上，canvas 本身變成一般流內元素 —— 不然按鈕會量不到大小、點不到。 */
.base-cat-btn{
  position:absolute;right:-4px;bottom:-12px;z-index:1;
  background:none;border:0;padding:0;line-height:0;cursor:pointer;
  transition:transform .12s,filter .12s;
}
.base-cat-btn:hover{transform:translateY(-3px);filter:brightness(1.06)}
.base-cat-btn:active{transform:translateY(0)}
/* 腳下的落地陰影：沒有它，人物看起來像浮在半空 */
.base-cat-btn::before{
  content:"";position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  width:210px;height:34px;border-radius:50%;background:radial-gradient(#00000059,#0000 70%);
  pointer-events:none;
}
.base-cat{display:block;position:relative;filter:drop-shadow(0 6px 10px #0006)}
.base-cat-edit{
  position:absolute;right:8px;top:2px;line-height:1;
  padding:4px 9px;border-radius:12px;border:2px solid var(--ink);
  background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink);
  font-size:10.5px;font-weight:800;box-shadow:0 3px 0 var(--cream-sh);
  opacity:0;transition:opacity .14s;pointer-events:none;
}
.base-cat-btn:hover .base-cat-edit,.base-cat-btn:focus-visible .base-cat-edit{opacity:1}

/* ---- 選擇基地夥伴的彈窗 ---- */
#mascot-overlay{position:absolute;inset:0;z-index:72;background:#000a;backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center}
#mascot-overlay.hidden{display:none}
.mascot-card{
  width:660px;max-width:92%;max-height:82%;display:flex;flex-direction:column;gap:10px;
  padding:14px 16px;border:4px solid var(--ink);border-radius:16px;
  background:linear-gradient(#2f6f63,#1e4c44);
  box-shadow:0 5px 0 #10312c,0 18px 40px #000a;
}
.mascot-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.mascot-head b{font-size:17px;font-weight:900;letter-spacing:2px;color:var(--cream);
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.mascot-close{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:3px solid var(--ink);background:linear-gradient(var(--gold),var(--gold-d));
  color:var(--ink);font-size:16px;font-weight:900;box-shadow:0 3px 0 var(--gold-sh);
}
.mascot-close:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-sh)}
.mascot-grid{
  flex:1;min-height:0;overflow-y:auto;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  padding:8px;background:#00000038;border-radius:12px;border:2px solid #ffffff1f;
}
.mascot-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:5px 3px 4px;border:3px solid var(--ink);border-radius:10px;
  background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink);
  font-size:10.5px;font-weight:800;box-shadow:0 3px 0 var(--cream-sh);
}
.mascot-item canvas{width:74px;height:58px}
.mascot-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mascot-item:hover{filter:brightness(1.06)}
.mascot-item:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cream-sh)}
.mascot-item.on{background:linear-gradient(#fff3c4,var(--gold));box-shadow:0 0 0 3px #fff3c4,0 3px 0 var(--gold-sh)}
.mascot-note{flex:0 0 auto;font-size:11px;line-height:1.6;color:var(--cream);text-align:center;opacity:.9}
.mascot-note b{color:#ffd75c}
.base-bottom{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;padding:6px 16px;
  border-top:4px solid var(--ink);
  background:repeating-linear-gradient(92deg,var(--wood) 0 7px,var(--wood-d) 7px 11px,var(--wood-l) 11px 15px);
}
.base-back{
  width:44px;height:44px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  border:4px solid var(--ink);background:linear-gradient(var(--gold),var(--gold-d));
  color:var(--ink);font-size:20px;font-weight:900;box-shadow:0 4px 0 var(--gold-sh);
}
.base-back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-sh)}
.base-shop{
  margin:0 auto;cursor:pointer;border:4px solid var(--ink);border-radius:22px;padding:7px 26px;
  background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink);
  font-size:15px;font-weight:900;letter-spacing:2px;box-shadow:0 4px 0 var(--cream-sh),0 7px 12px #0005;
}
.base-shop:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cream-sh)}
.base-food{
  flex:0 0 auto;font-size:17px;font-weight:900;color:var(--cream);letter-spacing:1px;
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink);
}

/* ---- 基地零件的質感補強（v7.27）----
   只加高光／陰影／描邊，**不動任何尺寸與位置** —— 版面是既有的，動了就要重測。 */
.base-top{box-shadow:0 4px 0 #00000038,0 8px 14px #0005}
.base-name{letter-spacing:4px}
.base-btn{
  box-shadow:0 5px 0 var(--gold-sh),0 9px 16px #0006,
             inset 0 2px 0 #fffffff0,inset 0 -3px 0 #00000014;
  text-shadow:0 1px 0 #fff9;
}
.base-icon,.bp-store{box-shadow:0 4px 0 var(--cream-sh),0 6px 10px #0005,inset 0 2px 0 #fffffff2}
.bp-egg{box-shadow:0 4px 0 #00000055,inset 0 2px 0 #ffffffa8,inset 0 -3px 0 #0000001f}
.base-plank{box-shadow:0 5px 0 #2c1806,0 10px 18px #0007}
.base-bubble{
  box-shadow:0 5px 0 #9db8b0,0 10px 18px #0006,inset 0 2px 0 #fff,inset 0 -3px 0 #00000012;
  background:linear-gradient(#f3faf7,#cfe4dd 62%,#c2dbd3);
}
/* 對話框的小尾巴：指向右下角的夥伴，兩者才像在對話而不是各站各的 */
.base-bubble{position:relative}
.base-bubble::after{
  content:"";position:absolute;right:64px;bottom:-15px;
  border:8px solid transparent;border-top-color:var(--ink);
}
.base-shop{box-shadow:0 4px 0 var(--cream-sh),0 8px 14px #0005,inset 0 2px 0 #fffffff2}
.base-back{box-shadow:0 4px 0 var(--gold-sh),0 7px 12px #0006,inset 0 2px 0 #fff9}

/* ---------------- 選單 ---------------- */
/* v7.27 拿掉右上角 XP 之後，用等寬佔位塊撐住，`justify-content:space-between` 的標題才會留在正中間 */
.scr-head .head-spacer{width:96px;flex:0 0 auto}
.menu-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 40px}
.menu-screen .menu-grid{grid-template-columns:repeat(2,1fr);width:360px;gap:10px}
/* 同上一課：.sandbox-cta / .danger 寫死 width:280px 會撐爆格子 */
.menu-screen .menu-grid .big-btn{width:100%;min-width:0}
.menu-note{max-width:460px;text-align:center;font-size:12px;line-height:1.7;
  color:var(--ink);background:#fffaeae6;border:3px solid var(--ink);border-radius:10px;padding:9px 14px}

/* 支線的世界地圖換成紫色調，一眼看出不是主線 */
#scr-stage.side-mode .stage-map-wrap{
  background:radial-gradient(120% 100% at 30% 0%,#6b4bb8 0%,#3d2a78 55%,#241b44 100%)}

/* 素材載入進度（標題畫面底部）*/
.asset-progress{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:320px;height:20px;border:3px solid var(--ink);border-radius:11px;overflow:hidden;
  background:#00000055;
}
.asset-progress i{
  position:absolute;inset:0 auto 0 0;display:block;
  background:linear-gradient(var(--gold),var(--gold-d));transition:width .2s;
}
.asset-progress span{
  position:relative;display:block;line-height:14px;text-align:center;
  font-size:10.5px;font-weight:800;color:var(--ink);
}

/* =========================================================
   標題畫面：像素風（v7.24）
   =========================================================
   ⚠ 這一段必須在 theme.css 之後載入才蓋得掉它的 #scr-title 橘色天空漸層
     —— screens.css 本來就排在最後，所以直接寫在這裡。
   背景整片由 #title-bg（程式畫的像素場景）提供，所以要把原本的漸層關掉。 */
#scr-title.mc{
  background:none;
  padding:0;
  justify-content:flex-start;
  overflow:hidden;
}
#scr-title.mc #title-bg{
  position:absolute;left:0;top:0;width:960px;height:540px;z-index:0;
  image-rendering:pixelated;                 /* 放大時保持硬邊 */
}
/* 標題列：大頭 + 字 */
.mc-titlebar{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:4px;margin-top:64px}
#title-face{width:120px;height:120px;display:block;flex:0 0 auto;
  filter:drop-shadow(3px 3px 0 #00000055)}
.mc-logo{
  font-size:64px;line-height:1;letter-spacing:2px;font-weight:900;margin:0;
  color:#C9C9C9;
  /* 厚黑描邊：多層 drop-shadow 疊出來，比 -webkit-text-stroke 更像手繪外框（同 .game-logo 的做法） */
  filter:drop-shadow(4px 0 0 #000) drop-shadow(-4px 0 0 #000)
         drop-shadow(0 4px 0 #000) drop-shadow(0 -4px 0 #000)
         drop-shadow(3px 3px 0 #000) drop-shadow(-3px 3px 0 #000)
         drop-shadow(0 7px 0 #00000055);
  text-shadow:none;background:none;-webkit-text-fill-color:#C9C9C9;
}
.mc-sub{
  position:relative;z-index:1;margin:16px 0 0;
  font-family:"Courier New",monospace;font-size:22px;font-weight:900;letter-spacing:10px;
  color:#C9C9C9;
  filter:drop-shadow(2.5px 0 0 #000) drop-shadow(-2.5px 0 0 #000)
         drop-shadow(0 2.5px 0 #000) drop-shadow(0 -2.5px 0 #000);
}
/* Minecraft 風按鈕：淺灰底 + 硬黑框 + 上亮下暗的斜角 */
.mc-menu{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:14px;margin-top:26px}
.mc-btn{
  width:290px;padding:11px 0;
  font-size:21px;font-weight:900;letter-spacing:3px;color:#1c1c1c;
  background:linear-gradient(#d4d4d4,#b8b8b8);
  border:4px solid #000;border-radius:0;
  box-shadow:inset 2px 2px 0 #efefef, inset -2px -2px 0 #8a8a8a, 0 4px 0 #00000055;
  cursor:pointer;
  text-shadow:0 1px 0 #ffffff88;
}
.mc-btn:hover{background:linear-gradient(#e4e9ff,#c3cdf0);color:#101010}
.mc-btn:active{transform:translateY(3px);box-shadow:inset 2px 2px 0 #efefef, inset -2px -2px 0 #8a8a8a}
#scr-title.mc .version{position:absolute;left:10px;bottom:8px;z-index:1;
  color:#123;font-weight:800;text-shadow:0 1px 0 #ffffff88}
#scr-title.mc .asset-progress{position:absolute;left:0;right:0;bottom:26px;z-index:1}
#scr-title.mc .account-chip,#scr-title.mc .title-currency{z-index:2}

/* ---- 信箱 ---- */
.mail-body{margin:10px 16px 16px;overflow-y:auto;max-height:410px;
  display:flex;flex-direction:column;gap:8px}
.mail-empty{padding:24px;text-align:center;color:#8f9ac2}
.mail-item{padding:10px 14px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff22}
.mail-item.got{opacity:.55}
.mi-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mi-icon{font-size:17px}
.mi-title{font-weight:900;font-size:15px;color:#ffd75e}
.mi-from{margin-left:auto;font-size:11px;color:#9aa4c4}
.mi-body{font-size:13px;line-height:1.65;color:#e6eaf8}
.mi-reward{margin-top:6px;font-size:12px;font-weight:800;color:#8ef07a}
.mi-act{margin-top:8px;text-align:right}
.mi-claim{border:2px solid #ffd75e;background:linear-gradient(#ffd75e,#e0a52c);color:#3a2a06;
  font-weight:900;font-size:13px;padding:6px 22px;border-radius:10px;cursor:pointer}
.mi-claim:hover{filter:brightness(1.08)}
.mi-done{font-size:12px;color:#9aa4c4;font-weight:800}
/* 未領取紅點 */
.mail-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;line-height:18px;
  padding:0 4px;border-radius:9px;background:#e0392b;color:#fff;font-size:11px;font-weight:900;
  font-style:normal;text-align:center;box-shadow:0 1px 3px #0006}
.base-icon,.menu-grid .big-btn{position:relative}

/* ---- 標題用「整張背景圖」時（images/ui/title_bg.png 存在）----
   圖上已經有標題字與按鈕了，所以：
     1. 把 HTML 的標題／副標／大頭藏起來，免得跟圖上的字疊在一起
     2. 真按鈕改成透明、精準疊在圖上畫好的按鈕位置上
   ⚠ 座標是從圖檔本身量出來的（1920×1080 換算到 960×540）：
     開始 x 376..584 y 258..298 / 選項 y 319..359。換圖的話要重量一次。 */
#scr-title.mc.has-bg .mc-titlebar,
#scr-title.mc.has-bg .mc-sub{display:none}
#scr-title.mc.has-bg .mc-menu{
  position:absolute;left:376px;top:258px;width:208px;
  margin:0;gap:21px;                          /* 21 = 兩顆按鈕的間距（319-298） */
  z-index:1;
}
#scr-title.mc.has-bg .mc-btn{
  width:208px;height:40px;padding:0;
  background:none;border:none;box-shadow:none;
  color:transparent;text-shadow:none;         /* 字用圖上畫好的，這裡只留可點區域 */
  border-radius:2px;
}
/* hover / 按下時給一點回饋，讓它仍然像個按鈕 */
#scr-title.mc.has-bg .mc-btn:hover{background:#ffffff33}
#scr-title.mc.has-bg .mc-btn:active{background:#00000026;transform:translateY(2px)}

/* ---- 章節選擇畫面：用 images/ui/background.png 當底（v7.26）----
   ⚠ 要寫在 screens.css（載入順序最後）才蓋得掉 theme.css 的 #scr-chapter 底色。 */
#scr-chapter{
  background:#7FA8F5 url("../images/ui/background.webp") center bottom/cover no-repeat;
}
/* 卡片區加一層半透明暗底，文字在亮天空上才讀得到 */
#scr-chapter .ch-rail{
  background:#0b1020a8;border-radius:16px;padding:14px 16px;
  box-shadow:0 6px 24px #0006;
}
/* ⚠ v7.27：**只有標題**吃這層陰影。
   `.ch-hint` 本來就有一塊不透明的奶油色底＋深色字，再疊 `0 2px 0 #0009` 等於在每個字下面
   多印一份深色的自己 —— 小字級下看起來就是嚴重的疊影／糊掉（使用者回報的問題）。
   底色已經夠有對比，不需要任何 text-shadow。 */
#scr-chapter .ch-screen-title{
  text-shadow:0 2px 0 #0009,0 0 10px #0007;
}
#scr-chapter .ch-hint{text-shadow:none}

/* ---- 選單畫面：同樣用 images/ui/background.png 當底（v7.27）----
   ⚠ 跟 #scr-chapter 一樣要寫在 screens.css，才蓋得掉 theme.css 的 #scr-menu 底色。
   ⚠ 按鈕本身是亮黃色、字是深色，直接放在亮天空上仍讀得到；
     但白雲會讓下方的說明文字（.menu-note）失去對比 —— 所以只在說明那一塊補暗底，
     不整片壓暗（整片壓暗就看不出換了背景）。 */
#scr-menu{
  background:#7FA8F5 url("../images/ui/background.webp") center bottom/cover no-repeat;
}
#scr-menu .menu-note{
  background:#0b1020c4;color:var(--cream);border-color:#0009;
  box-shadow:0 6px 20px #0006;
}

/* ---- 錢包 / 加農炮按鈕：直接呈現原圖（v7.28 重新實裝）----
   歷程：
   - v7.26 是 `center/cover` 塞進 118×34 的扁鈕 -> 只看得到照片正中央一條橫切面（臉被切掉），
     再蓋一層黑漸層當字底，使用者回報「很醜」。
   - v7.27 的素材是「1920×1080 但四角全透明、內容只佔中間 1249×904 的橢圓」，
     所以要用 background-size/position 把內容框對齊按鈕（那組換算已經不需要了，見下）。
   - **v7.28：使用者換了新的 wallet.png / power.png** —— 實測
     `getbbox()` 回傳整張 (0,0,1920,1080)，**已經是滿版不透明的 16:9 構圖**，
     所以不用再做任何裁切換算，按鈕比例配成 16:9、`cover` 鋪滿就是原圖。

   - 按鈕 **103×58**（103/58 = 1.776，對 16/9 = 1.778，差 0.1%，`cover` 只裁掉一絲）。
     高度沿用 58 -> `.bottom-bar` 高度不變（145，上緣 y=395、草地線 378 還在上方 17px）。
   - ⚠ **換圖一定要重量一次**，不要沿用上一版的數字：
     ```bash
     python -c "from PIL import Image; im=Image.open('images/ui/wallet.png').convert('RGBA'); print(im.size, im.getchannel('A').point(lambda a:255 if a>8 else 0).getbbox())"
     ```
     bbox 等於整張 -> 滿版，用 `cover` 即可；bbox 只佔中間 -> 要回到 v7.27 那套 size/position 換算。
   - 文字仍然是兩個小膠囊釘在角落，不蓋回大片漸層。 */
.wallet,.cannon{
  width:103px;height:58px;padding:0;position:relative;overflow:hidden;
  background-color:#2b1a3a !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center !important;
}
.wallet{background-image:url("../images/ui/wallet.webp") !important}
.cannon{background-image:url("../images/ui/power.webp") !important}
/* 文字：兩個小膠囊，釘在橢圓的空白角落 */
.wallet .w-title,.wallet .w-cost,.cn-label{
  position:absolute;z-index:3;line-height:1;
  padding:2px 5px;border-radius:8px;border:1.5px solid var(--ink);
  background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink);
  font-size:9.5px;font-weight:900;letter-spacing:0;text-shadow:none;
}
.wallet .w-title{display:block;top:2px;left:2px}
.wallet .w-cost{display:block;bottom:2px;right:2px;
  background:linear-gradient(#fff3c4,var(--gold) 45%,var(--gold-d))}
.cn-label{left:2px;right:2px;bottom:2px;text-align:center;font-size:10px}
/* 充能進度條蓋在照片上、但在膠囊下面 */
.cn-fill{z-index:1;opacity:.72;mix-blend-mode:screen}
/* ⚠ 充滿時原本是靠 `@keyframes blink` 把**文字顏色**閃成淺黃 —— 膠囊底色改成奶油色之後
   淺黃字在上面等於看不見。改成整顆膠囊閃金色（整顆鈕的外圈光暈 `cannon-ready` 不變）。 */
.cannon.ready .cn-label{
  animation:cn-chip-ready .6s infinite alternate;color:var(--ink);
}
@keyframes cn-chip-ready{
  from{background:linear-gradient(var(--cream),var(--cream-d))}
  to  {background:linear-gradient(#fff3c4,var(--gold) 45%,var(--gold-d))}
}
.wallet:disabled{filter:grayscale(.75) brightness(.7)}

/* ---- 登入／註冊：疊在標題畫面上的覆蓋層（v7.28）----
   原本是一整個獨立畫面配橘色漸層底，跟標題的像素場景很不搭。現在背景改成半透明暗底，
   讓標題直接透出來，只有中間那張卡片是實體的。
   ⚠ `.screen` 的 z-index 是 20，這裡要比它高才會蓋在標題上（但要低於劇情/轉蛋等覆蓋層）。 */
#scr-login{
  z-index:40;
  background:#0b0a14a8 !important;backdrop-filter:blur(2px);
}
/* 標題畫面上已經有大大的遊戲名了，卡片裡再放一次會變成兩個標題（而且那行還是舊名字） */
#scr-login .game-logo{display:none}
#scr-login .login-card{box-shadow:0 6px 0 #00000059,0 18px 40px #000b}
#scr-login .login-proto-note{backdrop-filter:blur(1px)}

/* ---- 開場動畫（v7.27：不可跳過，所以沒有跳過鍵與提示，游標也不再是手指）---- */
#intro-overlay{position:absolute;inset:0;z-index:90;background:#000;
  display:flex;align-items:center;justify-content:center}
#intro-overlay.hidden{display:none}
#intro-cv{width:960px;height:540px;display:block}

/* =========================================================
   全站按鈕統一成「標題畫面那種」像素方鈕（v7.30）
   =========================================================
   標題的 `.mc-btn` 是灰面 + 4px 純黑外框 + 內嵌斜角高光 + 硬底陰影（Minecraft 風）。
   使用者要求把**所有按鈕**都換成這個樣子，所以這裡用一份共用的變數＋選擇器清單套用。

   ⚠ 這一段刻意放在 screens.css 最後面，而且用 `!important` ——
     style.css / theme.css 對這些 class 都有各自的 background / border / box-shadow，
     不用 !important 會依 class 不同而蓋不掉（尤其 theme.css 的 .big-btn 與 .tool）。
   ⚠ 面色用 CSS 變數（--f1/--f2 面、--hi/--lo 斜角），所以「危險／主要／轉蛋」那些
     有語意的顏色只要換變數就好，不用重寫整組陰影。
   ⚠ **不套用**的三種：`.ubtn`（出擊卡片，是角色圖不是按鈕）、`.wallet`/`.cannon`
     （整顆是照片）、`.ch-card`（章節卡片）—— 套下去會把美術蓋掉。 */
.big-btn,.base-btn,.base-icon,.bp-store,.bp-egg,.base-shop,.base-back,
.back-btn,.tool,.sb-btn,.ch-close,.mascot-close,.mascot-item,
.upg-btn,.fnd-btn,.evo-btn,.shop-buy,.mi-claim,.stb,.lt-btn,.dex-f,
.gst-ok,.go-close,.go-skip,.story-skip,.rates-toggle,.sl-play,.confirm-btns .big-btn{
  --f1:#d4d4d4; --f2:#b8b8b8; --hi:#efefef; --lo:#8a8a8a;
  background:linear-gradient(var(--f1),var(--f2)) !important;
  border:4px solid #000 !important;
  border-radius:0 !important;
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 4px 0 #00000055 !important;
  color:#1c1c1c !important;
  text-shadow:0 1px 0 #ffffff88 !important;
  font-weight:900;
}
/* 小顆的按鈕用 3px 邊，4px 會把字擠掉 */
.base-icon,.bp-store,.sb-btn,.dex-f,.lt-btn,.mi-claim,.stb,.mascot-item,.story-skip,.rates-toggle,.sl-play{
  border-width:3px !important;
}
.big-btn:hover,.base-btn:hover,.base-icon:hover,.bp-store:hover,.bp-egg:hover,.base-shop:hover,
.base-back:hover,.back-btn:hover,.tool:hover,.sb-btn:hover,.ch-close:hover,.mascot-close:hover,
.mascot-item:hover,.upg-btn:hover,.fnd-btn:hover,.evo-btn:hover,.shop-buy:hover,.mi-claim:hover,
.stb:hover,.lt-btn:hover,.dex-f:hover,.gst-ok:hover,.go-close:hover,.go-skip:hover,.story-skip:hover,.sl-play:hover{
  filter:brightness(1.06);
}
.big-btn:active,.base-btn:active,.base-icon:active,.bp-store:active,.bp-egg:active,.base-shop:active,
.base-back:active,.back-btn:active,.tool:active,.sb-btn:active,.ch-close:active,.mascot-close:active,
.mascot-item:active,.upg-btn:active,.fnd-btn:active,.evo-btn:active,.shop-buy:active,.mi-claim:active,
.stb:active,.lt-btn:active,.dex-f:active,.gst-ok:active,.go-close:active,.go-skip:active{
  transform:translateY(3px) !important;
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo) !important;
}
/* ---- 有語意的顏色：只換面色，陰影系統不動 ---- */
.big-btn.primary,#login-submit,#base-battle,.mi-claim,.shop-buy,.gst-ok,.go-close{
  --f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a;
}
.big-btn.danger,.tool.danger,#btn-reset,.confirm-btns .big-btn.danger{
  --f1:#f0a09b; --f2:#c2372f; --hi:#ffd0cc; --lo:#7d1f19;
  color:#fff !important; text-shadow:0 2px 0 #00000066 !important;
}
.bp-egg.cat{ --f1:#c3f293; --f2:#77c72e; --hi:#e3ffcb; --lo:#4c8a15; }
.bp-egg.rare,.stb{ --f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a; }
.stb.alt{ --f1:#d2a9f5; --f2:#8b47cf; --hi:#efdcff; --lo:#5a2a91; color:#fff !important; text-shadow:0 2px 0 #00000066 !important; }
.stb.dex{ --f1:#bcd8f5; --f2:#5f8cc4; --hi:#e2f0ff; --lo:#365f8f; }
.sandbox-cta,#btn-sandbox{ --f1:#a8ece3; --f2:#2fb3a6; --hi:#d8fff9; --lo:#177269; }
.lt-btn.on,.dex-f.on,#cam-recenter.on{ --f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a; }
.mascot-item.on{ --f1:#fff3c4; --f2:#f0b429; --hi:#fffdf3; --lo:#a9761a; }
/* 圓形鈕（返回／關閉）在方鈕風格下改成方角才一致 */
.base-back,.ch-close,.mascot-close{border-radius:0 !important}
/* 停用狀態：整顆壓灰，不要只有半透明（半透明在灰面上幾乎看不出來） */
/* ⚠ 停用鈕上的字還是有資訊（「XP 3580」「Lv.10 解鎖」「第 4 關」都是解鎖條件），
   不能為了「看起來像停用」就把對比壓到讀不出來 —— 實測 #5c5c5c 只有 2.38:1，
   改成 #383838 拉到 4.0:1，仍然明顯比啟用的按鈕暗。 */
.big-btn:disabled,.upg-btn:disabled,.fnd-btn:disabled,.evo-btn:disabled,.shop-buy:disabled,.stb:disabled{
  --f1:#b9b9b9; --f2:#9a9a9a; --hi:#cfcfcf; --lo:#6f6f6f;
  color:#383838 !important; text-shadow:none !important; filter:none;
}

/* ---- 儲藏庫的待處理區（v7.30）---- */
.stock-panel{flex:0 0 auto;margin:8px 12px 0;max-height:170px;overflow-y:auto;
  border:3px solid var(--ink);background:#00000038;padding:8px 10px}
.stock-empty{font-size:12px;line-height:1.7;color:var(--cream);opacity:.9;text-align:center;padding:6px 4px}
.stock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.stock-head b{font-size:14px;font-weight:900;letter-spacing:2px;color:var(--cream);
  text-shadow:2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.stock-list{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.stk-item{display:flex;align-items:center;gap:8px;padding:5px 8px;
  border:3px solid var(--ink);background:linear-gradient(var(--cream),var(--cream-d));color:var(--ink)}
.stk-item canvas{width:58px;height:44px;flex:0 0 auto}
.stk-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.stk-info b{font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stk-info span{font-size:10.5px;color:#6b4a1e}
.stk-acts{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.stk-btn{
  --f1:#d4d4d4; --f2:#b8b8b8; --hi:#efefef; --lo:#8a8a8a;
  border:3px solid #000;border-radius:0;padding:3px 9px;cursor:pointer;
  background:linear-gradient(var(--f1),var(--f2));
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),0 3px 0 #00000055;
  color:#1c1c1c;font-size:11px;font-weight:900;text-shadow:0 1px 0 #ffffff88;
}
.stk-btn.act{--f1:#c3f293; --f2:#77c72e; --hi:#e3ffcb; --lo:#4c8a15}
.stk-btn.mer{--f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a}
.stk-btn.all{--f1:#ffd98a; --f2:#f0b429; --hi:#fff3c4; --lo:#a9761a;padding:4px 14px;font-size:12px}
.stk-btn:hover:not(:disabled){filter:brightness(1.07)}
.stk-btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo)}
.stk-btn:disabled{--f1:#bdbdbd; --f2:#9e9e9e; --hi:#d2d2d2; --lo:#737373;color:#616161;cursor:not-allowed;text-shadow:none}
/* 基地「儲藏庫」按鈕上的待處理紅點（沿用信箱紅點的樣子） */
.bp-store{position:relative}
.stock-badge{
  position:absolute;top:-8px;right:-6px;min-width:22px;padding:1px 5px;border-radius:11px;
  background:#e8452f;border:2px solid var(--ink);color:#fff;font-style:normal;font-size:11px;font-weight:900;
}