/* =========================================================
   v9.16 質感提升（使用者：「質感全部都先提升一波」）—— 最後載入，蓋過前面的樣式
   1. 基地的三顆大按鈕：左邊放像素圖示、底下一行小字，不再是空空的灰色方塊
   2. 登入畫面：從圓角的奶油色表單改成跟遊戲一致的像素風（木頭招牌標題、方角黑框、凹進去的輸入格）
   ========================================================= */

/* ---------- 1. 基地大按鈕 ---------- */
.base-left .base-btn{position:relative;overflow:hidden}
.base-btn .bb-i{position:absolute;left:16px;top:50%;width:38px;height:38px;transform:translateY(-50%);
  background-size:contain;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 #00000040);pointer-events:none}
.base-btn.bb-ic{display:flex;align-items:center;justify-content:center;padding-left:60px;padding-right:60px}
.base-btn.bb-ic>span{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.base-btn.bb-ic small{display:block;margin-top:4px;font-size:11.5px;font-weight:800;letter-spacing:1px;color:#5a5a5a;text-shadow:none}
/* 灰色按鈕加一層很淡的石紋（Minecraft 按鈕那種顆粒），右邊一條斜光 */
.base-btn.bb-ic::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(#0000000f 1px,transparent 1.5px),radial-gradient(#ffffff26 1px,transparent 1.5px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.base-btn.bb-ic::after{content:"";position:absolute;top:0;bottom:0;right:22px;width:16px;transform:skewX(-18deg);background:#ffffff2e;pointer-events:none}
.base-btn.bb-ic:hover .bb-i{transform:translateY(-50%) scale(1.08) rotate(-4deg)}
.base-btn .bb-i{transition:transform .12s}
#base-battle .bb-i{width:44px;height:44px;left:18px}
#base-battle{padding-left:64px;padding-right:64px}
@media (max-width:760px){.base-btn .bb-i{width:28px;height:28px;left:10px}.base-btn.bb-ic,#base-battle{padding-left:42px;padding-right:20px}.base-btn.bb-ic small{display:none}}

/* ---------- 2. 登入畫面 ---------- */
#scr-login .login-card{position:relative;width:340px;margin-top:22px;padding:30px 20px 18px;border-radius:0 !important;
  background:linear-gradient(#fbf1d6,#efdcb0) !important;border:4px solid #000 !important;
  box-shadow:inset 3px 3px 0 #fffbea,inset -3px -3px 0 #c9a66a,0 6px 0 #00000059,0 18px 40px #000b !important}
/* 木頭招牌：掛在卡片上緣 */
#scr-login .login-card::before{content:"逼翰軍團・報到處";position:absolute;left:50%;top:-24px;transform:translateX(-50%);white-space:nowrap;
  padding:6px 22px 7px;font-size:15px;font-weight:900;letter-spacing:3px;color:#fff3c4;text-shadow:2px 2px 0 #3d1f05;
  background:repeating-linear-gradient(0deg,#9c6a35 0 6px,#8a5c2c 6px 7px),linear-gradient(#a8743e,#7a4f24);
  border:4px solid #000;box-shadow:inset 2px 2px 0 #c99a5c,inset -2px -2px 0 #5a3814,0 4px 0 #00000055}
/* 招牌兩邊的釘子 */
#scr-login .login-card::after{content:"";position:absolute;top:-12px;left:calc(50% - 98px);width:196px;height:6px;pointer-events:none;
  background:radial-gradient(circle at 3px 3px,#3a2a1a 2.4px,transparent 3px) 0 0/190px 6px no-repeat,radial-gradient(circle at 3px 3px,#3a2a1a 2.4px,transparent 3px) 190px 0/6px 6px no-repeat}
#scr-login .login-tabs{border-radius:0;background:#00000014;border:3px solid #00000030;padding:3px}
#scr-login .login-form label{font-size:12px;letter-spacing:1px;color:#5a3a12}
/* 輸入格：凹進去的方格（Minecraft 物品欄那種內陰影） */
#scr-login .login-form input:not([type=checkbox]){border-radius:0;border:3px solid #000;background:#fffdf3;padding:9px 10px;
  box-shadow:inset 3px 3px 0 #d8c8a0,inset -2px -2px 0 #ffffff}
#scr-login .login-form input:not([type=checkbox]):focus{outline:none;border-color:#000;box-shadow:inset 3px 3px 0 #d8c8a0,0 0 0 3px #f0b429}
#scr-login #login-submit{margin-top:4px;font-size:18px;letter-spacing:6px;padding:12px 0}
#scr-login .login-divider{font-weight:900;letter-spacing:2px}
#scr-login .login-proto-note{border-radius:0;border:3px solid #000;box-shadow:inset 2px 2px 0 #ffffffa0,0 4px 0 #00000040;max-width:360px}
#scr-login .login-err{border-radius:0}

/* ---------- 3. 劇情背景：現在有每章的景物了 → 少糊一點、亮一點，看得出在哪裡 ---------- */
#story-bg{filter:blur(1.4px) brightness(.64) saturate(.95)}

/* =========================================================
   v9.16.1 戰鬥下方（使用者：「出擊按鈕跟錢幣累積那裏質感可以升級」）
   ========================================================= */
/* ---------- 4. 存錢條：流動的金色、左邊一枚金幣、花錢時紅色殘影、存滿了整條發光 ---------- */
.bottom-bar .money-bar{height:34px;border:3px solid #000;border-radius:8px;background:linear-gradient(#1a1006,#2c1b0a);
  box-shadow:inset 0 4px 8px #000c,inset 0 -2px 0 #ffffff14,0 3px 0 #0007}
.bottom-bar .mb-trail{position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;background:linear-gradient(#ffab8a,#d2402a)}
.bottom-bar .mb-fill{z-index:1;
  background:repeating-linear-gradient(115deg,#fff0 0 14px,#ffffff3d 14px 21px,#fff0 21px 34px),
             linear-gradient(#fff6c9 0%,#ffe07a 30%,#f5b72e 58%,#d48a12 100%);
  background-size:68px 100%,100% 100%;animation:mb-flow 1.6s linear infinite;
  box-shadow:inset 0 2px 0 #fffffff2,inset 0 -3px 5px #0003}
.bottom-bar .mb-fill::after{content:"";position:absolute;right:-3px;top:-3px;bottom:-3px;width:10px;
  background:radial-gradient(closest-side,#fffbe6,#ffe07a99,#ffe07a00)}
@keyframes mb-flow{to{background-position:68px 0,0 0}}
.bottom-bar .mb-ticks{z-index:2}
.bottom-bar .mb-ticks i{border-right:2px solid #00000038;box-shadow:1px 0 0 #ffffff1f}
.bottom-bar .mb-coin{position:absolute;left:6px;top:50%;width:22px;height:22px;transform:translateY(-50%);z-index:3;
  background-size:contain;image-rendering:pixelated;filter:drop-shadow(1px 1px 0 #000a)}
.bottom-bar .mb-text{display:flex;align-items:center;justify-content:center;gap:5px;z-index:3;font-size:17px;font-weight:900;color:#fff;letter-spacing:1px;
  text-shadow:2px 0 0 #3d2308,-2px 0 0 #3d2308,0 2px 0 #3d2308,0 -2px 0 #3d2308,1.5px 1.5px 0 #3d2308,-1.5px -1.5px 0 #3d2308,1.5px -1.5px 0 #3d2308,-1.5px 1.5px 0 #3d2308}
.bottom-bar .mb-text span{font-size:12px;color:#ffe9a8}
.bottom-bar .money-bar.full{animation:mb-full 1.1s ease-in-out infinite;
  box-shadow:inset 0 4px 8px #000c,0 3px 0 #0007,0 0 0 2px #ffe07a,0 0 14px #ffd75e}
.bottom-bar .money-bar.full .mb-fill{animation-duration:.8s}
@keyframes mb-full{50%{box-shadow:inset 0 4px 8px #000c,0 3px 0 #0007,0 0 0 2px #fff3c4,0 0 26px #ffd75e}}

/* ---------- 5. 出擊卡 ---------- */
#unit-row .ubtn{transition:transform .1s,filter .15s}
#unit-row .ubtn:not(.poor):not(.cooling):not(.banned):hover{transform:translateY(-4px)}
#unit-row .ubtn:active{transform:translateY(2px) scale(.96)}
/* 可以出：圖上每隔一陣子掃過一道斜光（每張錯開一點，不會整排一起閃） */
#unit-row .ubtn .u-shine{position:absolute;left:3px;right:3px;top:3px;bottom:22px;z-index:2;pointer-events:none;overflow:hidden;opacity:0}
#unit-row .ubtn .u-shine::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:38%;transform:skewX(-20deg);
  background:linear-gradient(90deg,#fff0,#ffffffb0,#fff0)}
#unit-row .ubtn:not(.poor):not(.cooling):not(.banned):not(.onfield) .u-shine{opacity:1}
#unit-row .ubtn:not(.poor):not(.cooling):not(.banned):not(.onfield) .u-shine::before{animation:u-shine 3s ease-in-out infinite}
#unit-row .ubtn:nth-child(3n+1) .u-shine::before{animation-delay:.5s}
#unit-row .ubtn:nth-child(3n+2) .u-shine::before{animation-delay:1.1s}
@keyframes u-shine{0%,64%{left:-60%}100%{left:135%}}
/* 冷卻：暗色像時鐘一樣順時針退掉（--cdp 由 syncHUD 設），數字描黑邊；原本那條小進度條收起來 */
#unit-row .ubtn .u-cd{background:conic-gradient(#0000 calc(var(--cdp,0) * 360deg),#000000b4 0) !important;
  align-items:center;padding-top:0;font-size:18px;
  text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,1.5px 1.5px 0 #000,-1.5px -1.5px 0 #000}
#unit-row .ubtn .u-cdbar{display:none !important}
/* 價格條：深色底；錢不夠 → 價格變紅，底下的金色跟著「存到幾成」慢慢填滿（--mp） */
#unit-row .ubtn .u-cost{font-weight:900;background:linear-gradient(#2c1c0a,#120a02);box-shadow:inset 0 1px 0 #ffffff26}
#unit-row .ubtn.poor .u-cost{color:#ff9d8c;
  background:linear-gradient(90deg,#ffc94a59 calc(var(--mp,0) * 100%),#0000 0),linear-gradient(#2a1208,#140804)}
body.fx-lite .bottom-bar .mb-fill,body.fx-lite .bottom-bar .money-bar.full,body.fx-lite #unit-row .ubtn .u-shine::before{animation:none}
/* 可以出的卡：外框透出一圈稀有度的光；按下去出擊 → 彈一下（.flash 是原本就有的）；出不了 → 左右晃（.deny） */
#unit-row .ubtn:not(.poor):not(.cooling):not(.banned):not(.onfield){
  box-shadow:inset 1px 1px 0 #ffffffa0,inset -1px -1px 0 #0006,0 4px 0 #000b,0 6px 10px #00000059,0 0 12px color-mix(in srgb,var(--f1) 70%,transparent)}
#unit-row .ubtn.deny{animation:u-deny .32s ease-out}
@keyframes u-deny{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}

/* ---------- 6. 基地的兩顆召喚鈕：貨幣圖示放大（v9.16.4，使用者：「這個比例調大一點」）—— 召喚券的圖是扁的，給它寬一點 ---------- */
.base-plank .bp-egg{gap:6px;padding-left:4px;padding-right:4px}
.base-plank .bp-egg .pxi{width:44px;height:44px;margin:-6px 0}   /* 負邊距：圖示放大但按鈕不變高 */
.base-plank .bp-egg .pxi-ticket{width:58px}