/* =====================================================================
 * v38.css — แผนที่โปร่ง • กระเป๋า CASH • Fishing Auto Bot • วัสดุ/แลกปลา • ภาษา
 * ===================================================================== */

/* ---------- World Map: ไม่มีกรอบดำ เห็นฉากเกมด้านหลัง ---------- */
.win.wm-full[data-win="worldmap"] { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.win.wm-full[data-win="worldmap"] .win-body, .wm-full .wm7, .wm-full .wm7 .wm-mapbox { background: transparent !important; }
.wm-full .wm7 .wm-canvas { background: transparent !important; }
.win.wm-full[data-win="worldmap"] .win-head { position: absolute; top: 10px; right: 12px; left: auto; z-index: 9; min-height: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.win.wm-full[data-win="worldmap"] .win-head .win-title, .win.wm-full[data-win="worldmap"] .win-head .win-key { display: none; }
.win.wm-full[data-win="worldmap"] .win-x { width: 38px; height: 38px; border-radius: 10px; background: rgba(43,26,12,.9); border: 1px solid #9a6a33; color: #f5e6c4; font-size: 16px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.wm-full .wm-zoom { top: 58px !important; }
.wm-cont { left: 12px !important; top: 10px !important; transform: none !important; max-width: calc(100% - 80px); }
.wm-full .wm-legend, .wm7 .wm-hint { background: rgba(43,26,12,.82); border: 1px solid rgba(214,176,112,.5); border-radius: 12px; }

/* ---------- สเตตัส CP ---------- */
.st-cp b { font-family: inherit !important; font-size: 16px !important; font-weight: 800; letter-spacing: .6px; font-variant-numeric: tabular-nums; }

/* ---------- กระเป๋า CASH ---------- */
.inv-lockbtn.ghost { visibility: hidden; }
.win[data-win="cash"] .cash-item.focus { outline: 3px solid #ffd740; outline-offset: 2px; box-shadow: 0 0 22px rgba(255,215,64,.75) !important; animation: cashFocus .7s ease-in-out 5 alternate; }
@keyframes cashFocus { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ---------- FISHING AUTO BOT ---------- */
#fishbot { position: absolute; right: 16px; bottom: calc(130px * var(--ui, 1)); width: 250px; transform: scale(var(--ui, 1)); transform-origin: 100% 100%; pointer-events: auto; z-index: 30; padding: 10px 12px; border-radius: 14px; color: #fff; font-size: 12px;
  background: linear-gradient(160deg, rgba(0,60,90,.88), rgba(10,20,40,.9)); border: 1px solid rgba(79,216,255,.55); box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 18px rgba(79,216,255,.25); backdrop-filter: blur(6px); }
#fishbot.hidden { display: none; }
#fishbot .fb-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#fishbot .fb-h b { font-size: 12.5px; letter-spacing: .5px; color: #b3ecff; }
#fishbot .fb-st { font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12); color: #cfd8dc; }
#fishbot .fb-st.on { background: #00e676; color: #00210f; box-shadow: 0 0 10px rgba(0,230,118,.6); }
#fishbot .fb-g { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.06); }
#fishbot .fb-g span { color: rgba(255,255,255,.65); } #fishbot .fb-g b { text-align: right; }
#fishbot .fb-btn { width: 100%; margin-top: 8px; padding: 8px; border-radius: 10px; border: 0; font: inherit; font-weight: 800; cursor: pointer; color: #002433; background: linear-gradient(180deg, #7ff0ff, #25c6ff); box-shadow: 0 4px 12px rgba(37,198,255,.35); }
#fishbot .fb-btn.stop { color: #fff; background: linear-gradient(180deg, #ff6b81, #e5304f); box-shadow: 0 4px 12px rgba(229,48,79,.35); }
#fishbot.locked { background: linear-gradient(160deg, rgba(60,60,64,.88), rgba(28,28,32,.9)); border-color: rgba(255,255,255,.2); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
#fishbot.locked .fb-h, #fishbot.locked .fb-g, #fishbot.locked .fb-btn { filter: grayscale(1); opacity: .6; }
#fishbot.locked .fb-btn { cursor: not-allowed; background: #9e9e9e; color: #333; box-shadow: none; }
#fishbot .fb-lock { margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.25); text-align: center; }
#fishbot .fb-lock p { margin: 0 0 6px; font-size: 11px; line-height: 1.45; color: #e0e0e0; } #fishbot .fb-lock b { color: #ffd740; }
#fishbot .fb-lock button { padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; color: #fff; background: linear-gradient(180deg, #ff6fbf, #ff2e93); box-shadow: 0 4px 12px rgba(255,46,147,.35); }
#rod-hud { display: none !important; }
body.pt-mode #fishbot { right: 8px; top: calc(var(--sat, 0px) + 64px); bottom: auto; transform: scale(.85); transform-origin: 100% 0; }
body.m-mobile:not(.pt-mode) #fishbot { bottom: auto; top: 64px; transform: scale(.8); transform-origin: 100% 0; }

/* ---------- คลังวัสดุ / แลกปลา ---------- */
.mb-hero, .fx-hero { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; margin-bottom: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(255,109,0,.2), rgba(123,31,162,.18)); border: 1px solid rgba(255,171,64,.45); }
.fx-hero { background: linear-gradient(90deg, rgba(0,172,193,.22), rgba(21,101,192,.18)); border-color: rgba(79,216,255,.45); }
.mb-hero b, .fx-hero b { font-size: 13px; } .mb-hero small, .fx-hero small { color: rgba(255,255,255,.7); } .fx-hero em { font-style: normal; color: #7ff0ff; font-size: 16px; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 5px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.mb-row img { width: 36px; height: 36px; image-rendering: pixelated; }
.mb-row .mb-t { flex: 1; min-width: 0; } .mb-row .mb-t b { display: block; } .mb-row .mb-t small { color: rgba(255,255,255,.6); font-size: 10.5px; }
.mb-row em { font-style: normal; font-size: 9px; font-weight: 900; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
.mb-row.ep { border-color: rgba(186,104,200,.5); } .mb-row.ep em { background: #8e24aa; color: #fff; }
.mb-row.lg { border-color: rgba(255,171,0,.6); box-shadow: inset 0 0 14px rgba(255,171,0,.12); } .mb-row.lg em { background: linear-gradient(90deg, #ffd740, #ff6d00); color: #2a1300; }
.mb-row .mb-n { font-size: 18px; font-weight: 800; min-width: 40px; text-align: right; }

/* ---------- ภาษา ---------- */
.st-lang .lang-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lang-b { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.lang-b i { font-style: normal; font-size: 24px; } .lang-b b { font-size: 14px; } .lang-b small { margin-left: auto; opacity: .6; }
.lang-b.on { border-color: #4fd8ff; background: rgba(79,216,255,.14); box-shadow: 0 0 12px rgba(79,216,255,.3); }
body.lang-en .sk-info small, body.lang-en .cash-item small { display: none; }