/* 巫醫煉藥模擬器專用樣式 — 外框(標題、房間敘事、詳情邊框)沿用 library.css 圖書室語彙,這裡只放模擬器互動件 */

/* 色票對齊全站慣例:區塊標題黃 = .room-short(HIY)、可點文字 = 全站連結色 #abcdef、金色降為裝飾邊框 token */:root {
	--bs-title: #f3df00;   /* 區塊標題,同 .room-short(HIY) */
	--bs-link: #abcdef;    /* 可點文字,同 .room-long a */
	--bs-gold: #c8a24a;    /* hover 卡/modal 裝飾邊框 */
	--bs-label: #bda66e;   /* 欄位標籤 */
	--bs-dim: #a0b0a0;     /* 提示/圖例文字的暗色下限:葉子底圖上再暗就看不見了 */

	/* 字級 5 級制:px 全走 token、不用 em;ASCII 視覺元件(鍋釜/迷你地圖/路徑圖/瓶身/成品名)是圖不是文字,保留原尺寸 */
	--bs-fs-note: 10px;    /* 微註記:scope、日期、瓶標 */
	--bs-fs-aux: 11px;     /* 說明、圖例、欄位標籤 */
	--bs-fs-ui: 12px;      /* 輸入框、chip、清單、指標列 */
	--bs-fs-btn: 13px;     /* 按鈕、狀態列 */
	--bs-fs-head: 15px;    /* 欄標題、詳情名稱,對齊 library.css 表格連結字級 */
}

/* 手機:10px 以下實際不可讀,微註記升一級 */
.phone {
	--bs-fs-note: 11px;
}

/* 按鈕統一:metrics 一律 radius 5px / padding 5px 12px / --bs-fs-btn;
   變體只有 primary(綠框行動鈕)、ghost(灰框中性鈕)、act(四色功能鈕,保留功能色)、sm(小型:padding 2px 9px / --bs-fs-ui) */
.bs-none {
	color: #778;
}

/* 頂部控制列 */
.bs-topbar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	align-items: center;
	margin: 6px 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #333;
}

.bs-topbar label {
	color: var(--bs-label);
}

.bs-topbar input[type=range] {
	vertical-align: middle;
	width: 170px;
}

.bs-topbar input[type=number] {
	width: 56px;
	background: #0d130e;
	color: #ccc;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 3px 5px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

#bs-skill-val {
	color: var(--bs-title);
	font-weight: bold;
	min-width: 2em;
	display: inline-block;
}

.bs-legend {
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
	font-style: italic;
}

/* 三欄 */
.bs-cols {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.bs-col {
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid #2a3a2c;
	border-radius: 10px;
	padding: 12px;
}

.bs-cab {
	flex: 0 0 170px;
	max-height: 480px;
	display: flex;
	flex-direction: column;
}

.bs-stage {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative; /* 迷你地圖絕對定位的錨點 */
}

.bs-result {
	flex: 0 0 230px;
}

.bs-col-title {
	color: #eaeaea;
	font-size: var(--bs-fs-head);
	font-weight: bold;
	margin: 0 0 8px;
}

/* 藥材櫃 */
#bs-search {
	width: 90%;
	background: #0d130e;
	color: #ccc;
	border: 1px solid #444;
	border-radius: 5px;
	padding: 5px 8px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

#bs-filt-toggle {
	cursor: pointer;
	color: var(--bs-link);
	font-size: var(--bs-fs-ui);
	margin: 7px 0 3px;
	user-select: none;
}

#bs-filt-toggle:hover {
	color: #ffffff;
}

#bs-filt-panel {
	display: none;
	border: 1px solid #243;
	border-radius: 6px;
	padding: 6px;
	margin-bottom: 6px;
	background: #070d08;
}

#bs-filt-panel.open {
	display: block;
}

.bs-fg-label {
	color: var(--bs-label);
	font-size: var(--bs-fs-aux);
	margin: 3px 0 2px;
}

.bs-fchip {
	cursor: pointer;
	display: inline-block;
	font-size: var(--bs-fs-aux);
	padding: 1px 6px;
	margin: 2px 2px 0 0;
	border-radius: 9px;
	border: 1px solid #3a4a3a;
	color: #aeb;
	background: rgba(255, 255, 255, .04);
}

/* 選中色對齊 filter-btn 慣例:增益綠系(.apply-filter.selected)、減益紅系(.feature-filter.selected);文字用站內 #AAFFAA/#FFAAAA */
.bs-fchip.on {
	background: #0d3a0d;
	border-color: #3a7a3a;
	color: #aaffaa;
}

.bs-fchip.bs-debuff.on {
	background: #3a0d0d;
	border-color: #7a3a3a;
	color: #ffaaaa;
}

.bs-fclear {
	cursor: pointer;
	color: var(--bs-link);
	font-size: var(--bs-fs-aux);
	float: right;
}

.bs-fclear:hover {
	color: #ffffff;
}

#bs-cab-count {
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
	margin: 4px 0;
}

#bs-cab-list {
	overflow-y: auto;
	flex: 1 1 auto;
}

.bs-cab-item {
	cursor: pointer;
	border: 1px solid #243;
	border-radius: 5px;
	padding: 4px 6px;
	margin: 3px 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.bs-cab-item:hover {
	background: rgba(120, 200, 120, .15);
	border-color: #5a8a5a;
}

.bs-ci-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 藥材 hover tip */
#bs-cab-tip {
	position: fixed;
	z-index: 45;
	display: none;
	pointer-events: none;
	width: 250px;
	max-height: calc(100vh - 16px);   /* 安全上限:再豐富的產地資料也不超過視窗高;配合 JS 用實際高度夾位置 */
	overflow: hidden;
	box-sizing: border-box;
	background: #0a120b;
	border: 1px solid var(--bs-gold);
	border-radius: 8px;
	padding: 9px 11px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .7);
	font-size: var(--bs-fs-aux);
}

.bs-tip-eff {
	padding: 1px 0;
}

.bs-tip-scope {
	color: #556;
	font-size: var(--bs-fs-note);
}

.bs-tip-path {
	white-space: pre;
	font-size: 13px; /* ASCII 路徑圖:固定尺寸 */
	line-height: 1.15;
	color: #f3df00;
	background: #060b07;
	border: 1px solid #243;
	border-radius: 4px;
	padding: 4px 6px;
	display: inline-block;
	margin-top: 4px;
}

.bs-cab-legend {
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
	margin-top: 6px;
	line-height: 1.5;
}

/* 基底 window(hover popover) */
.bs-stage-top {
	display: flex;
	gap: 10px;
	width: 100%;
	align-items: flex-start;
}

.bs-base-window {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	padding: 2px;
}

#bs-base-select {
	width: 100%;
	max-width: 210px;
	background: #0d130e;
	color: #dca;
	border: 1px solid #4a5a3a;
	border-radius: 4px;
	padding: 4px 6px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

.bs-base-hint {
	color: var(--bs-dim);
	font-size: var(--bs-fs-note);
	margin-top: 3px;
	opacity: .85;
}

#bs-baseinfo {
	position: absolute;
	top: 30px;
	left: 0;
	width: 310px;
	max-width: 92vw;
	z-index: 30;
	background: #0a120b;
	border: 1px solid var(--bs-gold);
	border-radius: 8px;
	padding: 9px 11px;
	display: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .65);
}

.bs-base-window:hover #bs-baseinfo {
	display: block;
}

.bs-base-window:hover .bs-base-hint {
	opacity: 0;
}

.bs-bi-head {
	color: #eaeaea;
	font-weight: bold;
	font-size: var(--bs-fs-btn);
	margin-bottom: 3px;
}

.bs-bi-long {
	color: #9a9a9a;
	margin: 2px 0 6px;
	line-height: 1.5;
	font-size: var(--bs-fs-aux);
}

.bs-bi-line {
	font-size: var(--bs-fs-aux);
	color: #cdbf94;
	padding: 1px 0;
	line-height: 1.45;
}

.bs-bi-other {
	color: #9a9a9a;
}

.bs-bi-na {
	color: #c87a7a;
	font-size: var(--bs-fs-aux);
}

/* mini-map:浮在舞台右上角,不佔用(頂開).bs-stage-top 的高度;z 低於基底 popover(30) */
.bs-mm-wrap {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
}

#bs-mm-title {
	color: var(--bs-link);
	font-size: var(--bs-fs-ui);
	text-align: center;
	margin-bottom: 2px;
	cursor: pointer;
	user-select: none;
}

#bs-mm-title:hover {
	color: #ffffff;
}

#bs-mm {
	line-height: 1.15;
	font-size: 17px;
	letter-spacing: 3px;
	white-space: pre;
	background: #060b07;
	border: 1px solid #2a3a2c;
	border-radius: 8px;
	padding: 8px 10px;
}

.bsmm-c {
	display: inline-block;
	width: 1.5ch;
}

.bsmm-open {
	color: #2f3a30;
}

.bsmm-wall {
	color: #aaaaaa;
}

.bsmm-goal {
	color: #5bedf6;
	font-weight: bold;
}

.bsmm-me {
	color: #fff;
	font-weight: bold;
	text-shadow: 0 0 6px #fff;
}

.bsmm-trail {
	color: #f3df00;
}

.bsmm-bad {
	color: #ff3b3b;
	font-weight: bold;
	animation: bsmm-collide .45s ease-in-out infinite;
}

@keyframes bsmm-collide {
	0%, 100% {
		color: #ff3b3b;
	}

	50% {
		color: #ff9999;
		text-shadow: 0 0 10px #ff0000, 0 0 3px #fff;
	}

}

.bsmm-g-path {
	color: #64e544;
}

.bsmm-g-end {
	color: #64e544; /* 預覽終點 @:HIG 綠,同事典終點 */
	font-weight: bold;
}

.bsmm-g-bad {
	color: #ff5070;
	font-weight: bold;
}

/* 全圖 overlay */
#bs-full {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 50;
}

#bs-full pre {
	font-size: 16.5px; /* ASCII 全圖:固定尺寸,整體 1.5 倍(原 11px),letter-spacing 同步放大 */
	line-height: 1.05;
	letter-spacing: 1.5px;
	color: #3a463b;
	background: #060b07;
	border: 1px solid var(--bs-gold);
	border-radius: 8px;
	padding: 10px;
	overflow: auto;
	max-height: 92vh;
}

/* 鍋釜 */
.bs-caul-wrap {
	position: relative;
	margin-top: 2px;
}

#bs-caul {
	white-space: pre;
	font-size: 20px;
	line-height: 1.12;
	text-align: left;
}

#bs-caul .bs-steam {
	color: #7fb8c8;
	opacity: .8;
}

#bs-caul .bs-pot {
	color: #9a9a9a;
}

#bs-caul .bs-bub {
	color: #f3df00;
	text-shadow: 0 0 5px rgba(243, 223, 0, .5);
}

#bs-caul.bs-glow .bs-bub {
	text-shadow: 0 0 12px #f3df00, 0 0 4px #fff;
}

#bs-inpot {
	position: absolute;
	top: 42%;
	left: 17%;
	width: 65%;
	height: 45%;
	color: #bfe;
	font-size: var(--bs-fs-aux);
	pointer-events: none;
	overflow: hidden;
	animation: bs-pot-sway 6s ease-in-out infinite;
}

@keyframes bs-pot-sway {
	0%, 100% {
		transform: translateX(0) rotate(0deg);
	}

	50% {
		transform: translateX(3px) rotate(.5deg);
	}

}

/* 攪拌/沸騰/稀釋/靜置/投料當下:短暫換成激烈搖晃,呼應操作發生(見 fxBurst);class 移除後自動接回上方慢搖 */
#bs-inpot.bs-agitated {
	animation: bs-pot-shake .55s ease-in-out 1;
}

@keyframes bs-pot-shake {
	0%, 100% {
		transform: translateX(0) rotate(0deg);
	}

	20% {
		transform: translateX(-4px) rotate(-1deg);
	}

	40% {
		transform: translateX(4px) rotate(1deg);
	}

	60% {
		transform: translateX(-3px) rotate(-.6deg);
	}

	80% {
		transform: translateX(3px) rotate(.6deg);
	}

}

/* 鍋內漂浮物:外層負責懸浮位移(translate,ease-in-out alternate=載浮載沉),內層 glyph 負責持續整圈旋轉(翻騰)。
   位移與旋轉分屬兩個元素→transform 不打架;負 animation-delay 讓每顆位移相位錯開,起始靜止與掉落物落定重合。 */
.bs-ip-tok {
	position: absolute;
	white-space: nowrap;
	animation: bs-float var(--dur, 3s) ease-in-out infinite alternate;
}

@keyframes bs-float {
	from {
		transform: translate(-50%, -50%) translate(var(--ax), var(--ay));
	}

	to {
		transform: translate(-50%, -50%) translate(calc(var(--ax) * -1), calc(var(--ay) * -1));
	}

}

/* glyph:藥材本體(膠囊底 + 字),持續順/逆時針整圈旋轉,2~4 秒一圈(方向、週期由 JS 隨機) */
.bs-ip-glyph {
	display: inline-block;
	background: rgba(0, 40, 30, .5);
	border-radius: 8px;
	padding: 0 5px;
	animation: bs-spin var(--spin-dur, 3s) linear infinite;
}

@keyframes bs-spin {
	to {
		transform: rotate(360deg);
	}

}

#bs-fx {
	position: absolute;
	left: 50%;
	top: 42%;
	transform: translateX(-50%);
	pointer-events: none;
	color: #7fd8ff;
	font-size: 14px;
	white-space: pre;
	opacity: 0;
}

@keyframes bs-splash {
	0% {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -26px);
	}

}

#bs-fx.go {
	animation: bs-splash .6s ease-out forwards;
}

/* 掉落物:外觀對齊 .bs-ip-tok;--px/--tp 為 token 未來的確切位置,translate(-50%,-50%) 讓 top 指中心,
   落定後與 token 位置完全重合→無縫接手(接手邏輯見 renderInpot / addIngredient) */
.bs-drop {
	position: absolute;
	left: var(--px, 50%);
	top: -10%;
	transform: translate(-50%, -50%);
	color: #bfe;
	font-size: var(--bs-fs-aux);
	background: rgba(0, 40, 30, .5);
	border-radius: 8px;
	padding: 0 5px;
	z-index: 6;
	white-space: nowrap;
	pointer-events: none;
	animation: bs-dropfall .78s cubic-bezier(.4, 0, .7, 1) forwards;
}

/* 入鍋:墜落(重力)→過沖沉到落點下方→浮力回彈→停在 token 未來位置(--tp) */
@keyframes bs-dropfall {
	0% {
		top: -10%;
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	55% {
		top: calc(var(--tp) + 9%);
		opacity: 1;
	}

	/* 過沖:沉到落點下方 */
	75% {
		top: calc(var(--tp) - 5%);
		opacity: 1;
	}

	/* 浮力回彈,略過落點上方 */
	90% {
		top: calc(var(--tp) + 2%);
		opacity: 1;
	}

	100% {
		top: var(--tp);
		opacity: 1;
	}

	/* 停在 token 落點,交棒 */
}

/* status / ops / shelf */
#bs-status {
	font-size: var(--bs-fs-btn);
	font-weight: bold;
	padding: 4px 12px;
	border-radius: 14px;
	margin-top: 2px;
}

#bs-status.bs-go {
	color: #7fe87f;
	background: rgba(100, 229, 68, .12);
	border: 1px solid #3a7a3a;
}

#bs-status.bs-bad {
	color: #ff5070;
	background: rgba(255, 80, 112, .1);
	border: 1px solid #7a3a4a;
}

#bs-status.bs-warn, #bs-status.bs-run {
	color: #e9d24a;
	background: rgba(233, 210, 74, .1);
	border: 1px solid #6a5a2a;
}

.bs-ops {
	margin-top: 6px;
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.bs-act-btn {
	cursor: pointer;
	border: none;
	border-radius: 5px;
	color: #fff;
	padding: 5px 12px;
	font-family: inherit;
	font-size: var(--bs-fs-btn);
}

.bs-act-btn[data-act=churn] {
	background: #8a7d12;
}

.bs-act-btn[data-act=boil] {
	background: #a02020;
}

.bs-act-btn[data-act=dilute] {
	background: #137c7c;
}

.bs-act-btn[data-act=cooldown] {
	background: #2d4ea0;
}

#bs-dur {
	width: 42px;
	background: #0d130e;
	color: #ccc;
	border: 1px solid #444;
	border-radius: 4px;
	padding: 3px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

/* 常用(最近投入 MRU):藥材櫃頂,緊貼完整列表,動線不離左欄;無最近投入時 JS 隱藏 */
.bs-recent-wrap {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px dashed #2c3a2c;
}

.bs-recent-label {
	color: var(--bs-title);
	font-size: var(--bs-fs-note);
	margin-bottom: 4px;
}

#bs-recent {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.bs-sh-item {
	cursor: pointer;
	background: rgba(200, 162, 74, .12);
	border: 1px solid #6a5a2a;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: var(--bs-fs-ui);
	color: #e8d8a8;
}

.bs-sh-item:hover {
	background: rgba(200, 162, 74, .28);
}

/* result */
.bs-recipe-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.bs-recipe-head h3 {
	color: #eaeaea;
	margin: 0;
	font-size: var(--bs-fs-head);
}

/* ghost sm + 危險字色 */
#bs-clear {
	cursor: pointer;
	background: none;
	border: 1px solid #555;
	color: #c89a9a;
	border-radius: 5px;
	padding: 2px 9px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

#bs-clear:hover {
	background: #3a2a2a;
	color: #e0b0b0;
}

#bs-actions {
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 110px;
}

#bs-actions li {
	padding: 3px 0;
	border-bottom: 1px dashed #2c2c2c;
}

.bs-num {
	color: #777;
}

.bs-invalid {
	opacity: 0.45;
}

.bs-invalid-tag {
	color: #ff5070;
	font-size: var(--bs-fs-note);
}

.bs-del {
	color: #c66;
	cursor: pointer;
	float: right;
	padding: 0 4px;
}

.bs-del:hover {
	color: #f88;
}

.bs-badge {
	padding: 1px 7px;
	border-radius: 3px;
	color: #fff;
}

.bs-act-churn {
	background: #8a7d12;
}

.bs-act-boil {
	background: #a02020;
}

.bs-act-dilute {
	background: #137c7c;
}

.bs-act-cooldown {
	background: #2d4ea0;
}

.bs-ind {
	border-top: 1px solid #333;
	margin-top: 8px;
	padding-top: 8px;
	line-height: 1.7;
}

.bs-ind-row {
	font-size: var(--bs-fs-ui);
}

.bs-ind-label {
	color: var(--bs-label);
}

#bs-sp {
	margin-top: 6px;
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
}

#bs-copy {
	margin-top: 8px;
}

/* 複製/保存鈕:統一「深底 + 1px 邊框 + 圓角」,取代漸層 */
#bs-copy-btn, #bs-save-btn {
	cursor: pointer;
	width: 100%;
	background: #0d130e;
	border: 1px solid #4a7a4a;
	color: #d6f0d6;
	border-radius: 5px;
	padding: 5px 12px;
	font-size: var(--bs-fs-btn);
	font-family: inherit;
}

#bs-copy-btn:hover, #bs-save-btn:hover {
	background: rgba(100, 229, 68, .15);
}

#bs-save-btn {
	margin-top: 6px;
}

/* detail popover:同 .detail 詳情面板的藤蔓邊框裝飾框(border-top/mid/bottom) */
#bs-detail-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 60;
}

#bs-detail-frame {
	width: 440px;
	max-width: 92vw;
}

#bs-detail-card {
	max-height: 74vh;
	overflow: auto;
	padding: 6px 0 12px;
}

.bs-dt-name {
	color: #eaeaea;
	font-size: var(--bs-fs-head);
	font-weight: bold;
	margin-bottom: 6px;
}

.bs-dt-id {
	color: #778;
	font-size: var(--bs-fs-ui);
}

.bs-dt-long {
	color: #9aa;
	font-size: var(--bs-fs-ui);
	line-height: 1.6;
	margin-bottom: 10px;
}

.bs-dt-sec {
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
	margin: 8px 0 3px;
	border-top: 1px solid #243;
	padding-top: 6px;
}

.bs-dt-eff {
	font-size: var(--bs-fs-ui);
	padding: 1px 0;
	display: flex;
	gap: 8px;
	align-items: center;
}

.bs-dt-scope {
	color: #667;
	font-size: var(--bs-fs-note);
}

.bs-dt-path {
	white-space: pre;
	font-size: 14px; /* ASCII 路徑圖:固定尺寸 */
	line-height: 1.15;
	color: #f3df00;
	background: #060b07;
	border: 1px solid #243;
	border-radius: 6px;
	padding: 6px 8px;
	display: inline-block;
	margin-top: 3px;
}

/* 路徑小圖起訖點(詳情卡+hover tip):顏色以 /library/brew 事典為權威(起點 @=GRN、終點 @=HIG) */
.bs-dt-path .bp-s, .bs-tip-path .bp-s {
	color: #00ac00;
	font-weight: bold;
}

.bs-dt-path .bp-e, .bs-tip-path .bp-e {
	color: #64e544;
	font-weight: bold;
}

.bs-dt-na {
	color: #778;
	font-size: var(--bs-fs-aux);
}

.bs-dt-actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
}

.bs-dt-actions button {
	cursor: pointer;
	font-family: inherit;
	font-size: var(--bs-fs-btn);
	border-radius: 5px;
	padding: 5px 12px;
	border: 1px solid #4a7a4a;
	background: #0d130e;
	color: #d6f0d6;
}

.bs-dt-actions button:hover {
	background: rgba(100, 229, 68, .15);
}

.phone .bs-cols {
	flex-direction: column;
}

.phone .bs-cab, .phone .bs-result {
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box; /* width:100% 含 padding,否則直排時水平溢出 24px */
}

/* 直排時迷你地圖回歸文流,避免浮層蓋住其他內容 */
.phone .bs-mm-wrap {
	position: static;
}

/* SEO 保險:.phone 靠 JS 的 UA 偵測才生效,這裡用純 CSS media query 兜底,
   確保 JS 失效時手機渲染也不會「內容寬於畫面」(mobile-first indexing 的主要扣分項) */
@media (max-width:920px) {
	.ui-container {
		min-width: 0;
	}

	.bs-cols {
		flex-direction: column;
	}

	.bs-cab, .bs-result, .bs-stage {
		flex: 1 1 auto;
		width: 100%;
		box-sizing: border-box;
	}

	.bs-mm-wrap {
		position: static;
	}

	#bs-full pre {
		max-width: 94vw;
	}

}

#bs-inv-btn {
	cursor: pointer;
	background: none;
	border: 1px solid #4a5a3a;
	color: var(--bs-label);
	border-radius: 5px;
	padding: 5px 12px;
	font-family: inherit;
	font-size: var(--bs-fs-btn);
}

#bs-inv-btn:hover {
	background: rgba(200, 162, 74, .12);
}

/* 玩法說明:topbar 按鈕 + modal 面板 */
#bs-help-btn {
	cursor: pointer;
	background: none;
	border: 1px solid #4a5a3a;
	color: var(--bs-label);
	border-radius: 5px;
	padding: 5px 12px;
	font-family: inherit;
	font-size: var(--bs-fs-btn);
}

#bs-help-btn:hover {
	background: rgba(200, 162, 74, .12);
	color: #fff;
}

#bs-help-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 90;
}

.bs-help-card {
	background: #080f09;
	border: 1px solid var(--bs-gold);
	border-radius: 12px;
	width: 540px;
	max-width: 94vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba(0, 0, 0, .7);
}

.bs-help-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid #2a3a2a;
}

.bs-help-head h3 {
	color: var(--bs-title);
	margin: 0;
	font-size: var(--bs-fs-head);
}

#bs-help-close {
	cursor: pointer;
	background: none;
	border: 1px solid #555;
	color: #aaa;
	border-radius: 5px;
	padding: 3px 12px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

#bs-help-close:hover {
	background: #2a2a2a;
	color: #ccc;
}

.bs-help-body {
	overflow-y: auto;
	padding: 8px 20px 18px;
	color: #cfd8cf;
	font-size: var(--bs-fs-ui);
	line-height: 1.65;
}

.bs-help-body p {
	margin: 4px 0 10px;
}

.bs-help-body b {
	color: var(--bs-title);
	font-weight: bold;
}

.bs-help-sec {
	color: var(--bs-label);
	font-size: var(--bs-fs-btn);
	font-weight: bold;
	margin: 14px 0 4px;
	padding-top: 8px;
	border-top: 1px dashed #2a3a2a;
}

.bs-help-sec:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 4px;
}

.bs-help-legend {
	background: rgba(0, 0, 0, .35);
	border-left: 2px solid #3a4a3a;
	border-radius: 0 6px 6px 0;
	padding: 8px 12px;
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
}

.bs-help-legend .bsmm-center, .bs-help-legend .bsmm-goal, .bs-help-legend .bsmm-wall, .bs-help-legend .bsmm-trail {
	font-weight: bold;
}

/* 獲得道具 modal */
#bs-acquire-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 70;
}

.bs-acquire-card {
	background: #080f09;
	border: 1px solid var(--bs-gold);
	border-radius: 14px;
	padding: 24px 30px;
	width: 300px;
	max-width: 92vw;
	text-align: center;
	box-shadow: 0 0 50px rgba(200, 162, 74, .25), 0 10px 40px rgba(0, 0, 0, .7);
	animation: bs-acq-in .4s cubic-bezier(.17, .67, .34, 1.2);
}

@keyframes bs-acq-in {
	from {
		transform: scale(.7) translateY(20px);
		opacity: 0;
	}

	to {
		transform: scale(1) translateY(0);
		opacity: 1;
	}

}

.bs-acquire-tag {
	color: var(--bs-title);
	font-size: var(--bs-fs-note);
	letter-spacing: 4px;
	margin-bottom: 12px;
	opacity: .8;
}

#bs-acq-bottle {
	font-family: 'Courier New', monospace;
	font-size: 15px;
	line-height: 1.3;
	white-space: pre;
	display: inline-block;
	margin: 6px 0 10px;
}

#bs-acq-potion-name {
	font-size: 19px;
	font-weight: bold;
	margin-bottom: 4px;
	letter-spacing: 1px;
}

.bs-acquire-hint {
	color: #6a7a6a;
	font-size: var(--bs-fs-note);
	margin-bottom: 14px;
}

#bs-acq-name-input {
	width: 100%;
	background: #0d130e;
	color: #ccc;
	border: 1px solid #4a5a3a;
	border-radius: 5px;
	padding: 7px 10px;
	font-family: inherit;
	font-size: var(--bs-fs-btn);
	box-sizing: border-box;
	margin-bottom: 12px;
	text-align: center;
}

.bs-acquire-btns {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.bs-acquire-btns button {
	cursor: pointer;
	font-family: inherit;
	border-radius: 5px;
	padding: 5px 12px;
	font-size: var(--bs-fs-btn);
}

#bs-acq-confirm {
	background: #0d130e;
	border: 1px solid #4a7a4a;
	color: #d6f0d6;
}

#bs-acq-confirm:hover {
	background: rgba(100, 229, 68, .15);
}

#bs-acq-cancel {
	background: #1a1a1a;
	border: 1px solid #555;
	color: #aaa;
}

#bs-acq-cancel:hover {
	background: #2a2a2a;
	color: #ccc;
}

/* 道具欄 modal */
/* 配方分享 modal */
#bs-share-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 72;
}

.bs-share-card {
	background: #080f09;
	border: 1px solid var(--bs-gold);
	border-radius: 12px;
	padding: 16px 20px;
	width: 460px;
	max-width: 94vw;
	box-shadow: 0 0 40px rgba(0, 0, 0, .7);
}

.bs-share-name {
	color: var(--bs-title);
	font-size: var(--bs-fs-ui);
	margin-bottom: 10px;
}

.bs-share-label {
	color: var(--bs-dim);
	font-size: var(--bs-fs-note);
	margin: 10px 0 4px;
}

.bs-share-url,
.bs-share-text {
	width: 100%;
	box-sizing: border-box;
	background: #04080500;
	background: rgba(0, 0, 0, .35);
	border: 1px solid #3a4a3a;
	border-radius: 6px;
	color: var(--bs-label);
	font-size: var(--bs-fs-note);
	padding: 6px 8px;
	font-family: monospace;
	resize: none;
}

.bs-share-btn {
	margin-top: 6px;
	padding: 5px 14px;
	background: var(--bs-gold);
	color: #1a1200;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
}

/* 載入分享配方橫幅 */
#bs-share-loaded {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 71;
	align-items: center;
	gap: 12px;
	background: #123018;
	border: 1px solid var(--bs-gold);
	border-radius: 10px;
	padding: 10px 16px;
	color: var(--bs-title);
	font-size: var(--bs-fs-note);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
	max-width: 92vw;
}

#bs-share-dismiss {
	background: none;
	border: none;
	color: var(--bs-dim);
	cursor: pointer;
	font-size: 14px;
}

.bs-inv-share {
	position: absolute;
	top: 4px;
	left: 6px;
	cursor: pointer;
	font-size: 13px;
	opacity: .75;
}

.bs-inv-share:hover {
	opacity: 1;
}

/* 反查配方 modal */
#bs-rev-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 70;
}

.bs-rev-card {
	background: #080f09;
	border: 1px solid var(--bs-gold);
	border-radius: 12px;
	padding: 16px 20px;
	width: 600px;
	max-width: 96vw;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba(0, 0, 0, .7);
}

.bs-rev-hint {
	color: var(--bs-dim);
	font-size: var(--bs-fs-note);
	margin-bottom: 10px;
}

.bs-rev-label {
	color: var(--bs-label);
	font-size: var(--bs-fs-note);
	margin-bottom: 4px;
}

#bs-rev-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	max-height: 140px;
	overflow: auto;
	margin-bottom: 8px;
}

.bs-rev-chip {
	padding: 3px 9px;
	border: 1px solid #3a4a3a;
	border-radius: 12px;
	font-size: var(--bs-fs-note);
	color: var(--bs-label);
	cursor: pointer;
	user-select: none;
}

.bs-rev-chip:hover {
	border-color: var(--bs-gold);
}

.bs-rev-chip.on {
	background: var(--bs-gold);
	color: #1a1200;
	border-color: var(--bs-gold);
	font-weight: bold;
}

.bs-rev-dir {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
	margin: 6px 0 10px;
}

.bs-rev-diropt {
	padding: 3px 10px;
	border: 1px solid #3a4a3a;
	border-radius: 12px;
	cursor: pointer;
	user-select: none;
}

.bs-rev-diropt.on {
	background: #2a3a2a;
	border-color: var(--bs-gold);
	color: var(--bs-title);
}

#bs-rev-go {
	margin-left: auto;
	padding: 5px 18px;
	background: var(--bs-gold);
	color: #1a1200;
	border: none;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
}

#bs-rev-results {
	overflow: auto;
	border-top: 1px solid #2a3a2a;
	padding-top: 8px;
}

.bs-rev-empty {
	color: var(--bs-dim);
	text-align: center;
	padding: 18px 8px;
	font-size: var(--bs-fs-note);
}

.bs-rev-count {
	color: var(--bs-label);
	font-size: var(--bs-fs-note);
	margin-bottom: 6px;
}

.bs-rev-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "main apply" "meta apply";
	gap: 2px 10px;
	padding: 8px 4px;
	border-bottom: 1px solid #1a2a1a;
	align-items: center;
}

.bs-rev-main {
	grid-area: main;
}

.bs-rev-target {
	color: #f3df00;
	margin-right: 8px;
}

.bs-rev-herbs {
	color: var(--bs-title);
	font-size: var(--bs-fs-ui);
}

.bs-rev-meta {
	grid-area: meta;
	color: var(--bs-dim);
	font-size: var(--bs-fs-note);
}

.bs-rev-apply {
	grid-area: apply;
	padding: 4px 14px;
	background: #2a3a2a;
	color: var(--bs-title);
	border: 1px solid #3a4a3a;
	border-radius: 6px;
	cursor: pointer;
}

.bs-rev-apply:hover {
	border-color: var(--bs-gold);
}

.bs-rev-foot {
	color: var(--bs-dim);
	font-size: var(--bs-fs-note);
	line-height: 1.6;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed rgba(255, 255, 255, .12);
}

#bs-inv-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 70;
}

.bs-inv-card {
	background: #080f09;
	border: 1px solid #3a4a3a;
	border-radius: 12px;
	padding: 16px 20px;
	width: 560px;
	max-width: 96vw;
	max-height: 85vh;
	overflow: auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, .7);
}

.bs-inv-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	border-bottom: 1px solid #2a3a2a;
	padding-bottom: 10px;
}

.bs-inv-head h3 {
	color: var(--bs-title);
	margin: 0;
	font-size: var(--bs-fs-head);
}

/* ghost sm */
#bs-inv-close {
	cursor: pointer;
	background: none;
	border: 1px solid #555;
	color: #aaa;
	border-radius: 5px;
	padding: 2px 9px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

#bs-inv-close:hover {
	background: #2a2a2a;
	color: #ccc;
}

#bs-inv-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bs-inv-item {
	cursor: pointer;
	background: rgba(255, 255, 255, .04);
	border: 1px solid #2a3a2c;
	border-radius: 8px;
	padding: 10px 8px 8px;
	text-align: center;
	width: 96px;
	position: relative;
	transition: background .15s, border-color .15s;
}

.bs-inv-item:hover {
	background: rgba(200, 162, 74, .1);
	border-color: #6a5a2a;
}

.bs-inv-bottle {
	font-family: 'Courier New', monospace;
	font-size: 10px; /* ASCII 瓶身圖:固定尺寸,不隨 note 升級以免撐破 96px 卡片 */
	line-height: 1.22;
	white-space: pre;
	display: inline-block;
}

.bs-inv-pname {
	font-size: var(--bs-fs-note);
	margin-top: 5px;
	line-height: 1.4;
	font-weight: bold;
}

.bs-inv-label {
	color: #6a7a5a;
	font-size: var(--bs-fs-note);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 84px;
}

.bs-inv-date {
	color: #6a7a6a;
	font-size: var(--bs-fs-note);
	margin-top: 1px;
}

.bs-inv-del {
	position: absolute;
	top: 3px;
	right: 5px;
	color: #664444;
	font-size: var(--bs-fs-aux);
	cursor: pointer;
	line-height: 1;
	padding: 1px 2px;
}

.bs-inv-del:hover {
	color: #f88;
}

.bs-inv-empty {
	color: #4a5a4a;
	font-size: var(--bs-fs-ui);
	padding: 30px;
	text-align: center;
	width: 100%;
}

/* ===== 挑戰模式(LevelDriver,body.bs-lv-mode)===== */

/* fog:無 undo/單列刪除、指令複製隱藏;藥效指標與狀態列煉成才揭曉(bs-lv-reveal) */
.bs-lv-mode .bs-del, .bs-lv-mode #bs-copy {
	display: none;
}

/* Cauldle 模式:隱藏 MUD 房間敘述/出口連結,改顯示遊戲標題。
   !important 蓋過 customLayout 的 jQuery .show() 打上的 inline display:block(否則桌機/resize 會被重新顯示) */
.bs-lv-mode .room-desc, .bs-lv-mode .brief-desc h1 {
	display: none !important;
}

/* Cauldle 模式:整條 topbar 隱藏(技能/基底皆鎖定不可調,技能資訊改顯示於關卡面板;說明鈕移入 HUD) */
.bs-lv-mode .bs-topbar {
	display: none;
}

/* 當前鍋已結束待清空(.bs-lv-blocked,對應 blockInput())或整個挑戰已結束(.bs-lv-finished,對應 finished()):
   藥材櫃與煉藥操作列反灰鎖定,清楚表示「這裡已停用」而非壞掉;配方清單/藥效指標/煉藥圖不在此列,維持正常顯示。 */
.bs-lv-blocked .bs-cab-item, .bs-lv-blocked .bs-act-btn, .bs-lv-blocked #bs-dur {
	opacity: .4;
	filter: grayscale(.7);
	pointer-events: none;
	cursor: not-allowed;
}

/* 整個挑戰已結束:清空鈕也反灰(倒掉重煉已無意義,要繼續玩請到自由練習) */
.bs-lv-finished #bs-clear {
	opacity: .4;
	filter: grayscale(.7);
	pointer-events: none;
	cursor: not-allowed;
}

/* 僅單鍋結束、挑戰尚未結束(等你按「倒掉重煉」進下一鍋):清空鈕紅白強烈閃爍引導點擊,而非跟著反灰。
   相鄰關鍵影格用同值(0%/45%、50%/95%)讓每個顏色維持大半週期不變,只在極短窗口(45%→50%、95%→100%)瞬間切換,
   視覺上是硬切的閃燈而非漸層呼吸——比原本金色呼吸更強烈醒目。 */
.bs-lv-blocked:not(.bs-lv-finished) #bs-clear {
	animation: bs-clear-flash .5s linear infinite;
}

@keyframes bs-clear-flash {
	0%, 45% {
		background: #8a7d12;
		border-color: #f3df00;
		color: #fff;
		box-shadow: 0 0 14px 4px rgba(243, 223, 0, .7);
	}

	50%, 95% {
		background: #fffbe0;
		border-color: #f3df00;
		color: #6b5f10;
		box-shadow: 0 0 14px 4px rgba(255, 255, 255, .8);
	}

	100% {
		background: #8a7d12;
		border-color: #f3df00;
		color: #fff;
		box-shadow: 0 0 14px 4px rgba(243, 223, 0, .7);
	}

}

/* Cauldle 遊戲標題(煉金術風):熔金漸層字 + 微光 + 行星/煉金符號裝飾,底部漸層金線 */
#bs-lv-title {
	text-align: center;
	padding: 16px 0 12px;
	margin-bottom: 8px;
	background: radial-gradient(ellipse at 50% 130%, rgba(243, 223, 0, .09), transparent 68%);
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, transparent, var(--bs-gold), transparent) 1;
}

.bs-lv-title-deco {
	color: var(--bs-gold);
	font-size: var(--bs-fs-ui);
	letter-spacing: 2px;
	opacity: .65;
	margin-bottom: 4px;
}

.bs-lv-title-cn {
	display: inline-block;
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 10px;
	padding-left: 10px;   /* 補 letter-spacing 造成的置中偏移 */
	background: linear-gradient(180deg, #fff2b0 0%, #f3df00 42%, #c8a24a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 0 12px rgba(243, 223, 0, .35)) drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

.bs-lv-title-en {
	color: var(--bs-gold);
	letter-spacing: 8px;
	font-size: var(--bs-fs-btn);
	padding-left: 8px;
	margin-top: 4px;
}

.bs-alembic {
	font-size: 1.3em;
	filter: drop-shadow(0 0 6px rgba(243, 223, 0, .5));
}

.phone .bs-lv-title-cn {
	font-size: 28px;
	letter-spacing: 6px;
}

.bs-lv-mode .bs-ind, .bs-lv-mode #bs-status {
	visibility: hidden;
}

.bs-lv-mode.bs-lv-reveal .bs-ind, .bs-lv-mode.bs-lv-reveal #bs-status {
	visibility: visible;
}

.bs-lv-mode #bs-skill, .bs-lv-mode #bs-base-select, .bs-lv-mode #bs-learnt {
	opacity: .5;
}

/* 每日一鍋:主入口,推到最右;自由練習緊隨其後 */
#bs-lv-daily {
	color: var(--bs-title);
	font-weight: bold;
	font-size: var(--bs-fs-btn);
	text-decoration: none;
	margin-left: auto;
}

#bs-lv-daily:hover {
	color: #ffffff;
}

#bs-lv-entry {
	color: var(--bs-link);
	font-size: var(--bs-fs-btn);
	text-decoration: none;
}

#bs-lv-entry:hover {
	color: #ffffff;
}

#bs-lv-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	margin: -4px 0 12px;
	padding: 8px 12px;
	background: rgba(0, 0, 0, .5);
	border: 1px solid #6a5a2a;
	border-radius: 8px;
	font-size: var(--bs-fs-btn);
}

.bs-lv-tag {
	color: var(--bs-title);
	font-weight: bold;
}

#bs-lv-goal {
	color: #eaeaea;
}

/* 成就條件說明:自成一行,以分隔線切開步驟上限與三巫條件,每項帶本題數值 */
#bs-lv-rules {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	padding: 6px 0;
	border-top: 1px dashed #3a3320;
	border-bottom: 1px dashed #3a3320;
	font-size: var(--bs-fs-aux);
	color: var(--bs-dim);
}

.bs-rule {
	padding: 0 12px;
	border-right: 1px solid #3a3320;
	white-space: nowrap;
}

.bs-rule:first-child {
	padding-left: 0;
}

.bs-rule:last-child {
	border-right: none;
}

#bs-lv-rules b {
	color: var(--bs-title);
}

#bs-lv-count {
	color: var(--bs-label);
}

.bs-lv-best {
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
}

.bs-lv-msg {
	color: #8a9a8a;
}

.bs-lv-msg.bad {
	color: #ff9070;
}

.bs-lv-msg.good {
	color: #7fe87f;
}

/* 第一列的煉藥技能(題目資訊) */
.bs-lv-skill {
	color: var(--bs-label);
}

/* dev 工具鈕(僅 devmode 顯示):虛線框標示是開發工具;正解=金、清除=紅 */
#bs-lv-devsol, #bs-lv-devclear {
	cursor: pointer;
	text-decoration: none;
	font-size: var(--bs-fs-ui);
	border-radius: 4px;
	padding: 0 6px;
}

#bs-lv-devsol {
	color: var(--bs-gold);
	border: 1px dashed #6a5a2a;
}

#bs-lv-devsol:hover {
	color: #fff;
	background: rgba(200, 162, 74, .15);
}

#bs-lv-devclear {
	color: #ff9070;
	border: 1px dashed #7a3a3a;
}

#bs-lv-devclear:hover {
	color: #fff;
	background: rgba(255, 80, 80, .15);
}

/* 說明 + 離開:兩個連結靠右並排(說明推到右側,離開緊隨) */
#bs-lv-help {
	margin-left: auto;
	cursor: pointer;
	color: var(--bs-link);
	text-decoration: none;
	font-size: var(--bs-fs-ui);
}

#bs-lv-exit {
	color: var(--bs-link);
	text-decoration: none;
	font-size: var(--bs-fs-ui);
}

#bs-lv-help:hover, #bs-lv-exit:hover {
	color: #ffffff;
}

#bs-lv-win-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 80;
	animation: bs-lv-backdrop-in .25s ease-out;   /* 遮罩淡入,搭配卡片的彈跳進場 */
}

@keyframes bs-lv-backdrop-in {
	from {
		background-color: rgba(0, 0, 0, 0);
	}

	to {
		background-color: rgba(0, 0, 0, .82);
	}

}

.bs-lv-win-card {
	background: #080f09;
	border: 1px solid var(--bs-gold);
	border-radius: 14px;
	padding: 24px 30px;
	width: 340px;
	max-width: 92vw;
	text-align: center;
	box-shadow: 0 0 50px rgba(200, 162, 74, .25);
	animation: bs-acq-in .4s cubic-bezier(.17, .67, .34, 1.2);   /* 縮放+位移彈入,display:none→flex 時重新播放 */
}

/* 三巫評分(取代星等):標題 + 三格已得亮起/未得灰階 */
.bs-lv-wiz-head {
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
	letter-spacing: 2px;
	margin: 10px 0 6px;
}

.bs-lv-wiz-head.all {
	color: var(--bs-title);
	font-weight: bold;
	font-size: var(--bs-fs-head);
	text-shadow: 0 0 10px rgba(243, 223, 0, .4);
}

.bs-lv-wiz {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 14px;
	margin-bottom: 10px;
}

.bs-wiz {
	font-size: var(--bs-fs-btn);
}

.bs-wiz.on {
	color: var(--bs-title);
	font-weight: bold;
}

.bs-wiz.off {
	color: #667;
	filter: grayscale(1);
	opacity: .55;
}

/* 分享戰績預覽:逐鍋方格 + 總藥效條(多行)。display:inline-block+text-align:left 讓每行方格靠左對齊
   (不然短行會被父層 text-align:center 置中,變成參差不齊的樓梯狀),而區塊整體仍在卡片中置中。 */
#bs-lv-win-rows {
	display: inline-block;
	text-align: left;
	font-size: 18px;
	line-height: 1.22;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

#bs-lv-win-line {
	color: #ccc;
	font-size: var(--bs-fs-btn);
	margin-bottom: 16px;
}

/* 通關數值:達標金字 / 超出紅字(動作 X/par、藥力 X/門檻 統一格式) */
.bs-val-good {
	color: var(--bs-title);
}

.bs-val-over {
	color: #ff7070;
}

/* 每日統計:數字格(結果卡與統計 modal 共用) */
.bs-stats {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 8px;
}

.bs-stat {
	flex: 1;
	text-align: center;
}

.bs-stat-n {
	font-size: 26px;
	font-weight: bold;
	color: var(--bs-title);
}

.bs-stat-l {
	font-size: var(--bs-fs-note);
	color: var(--bs-dim);
	margin-top: 2px;
}

.bs-stats-wiz {
	text-align: center;
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
	margin-bottom: 6px;
}

/* 全體統計 / PR 區塊 */
#bs-lv-global {
	border-top: 1px solid rgba(255, 255, 255, .12);
	margin-top: 10px;
	padding-top: 6px;
}

.bs-stats-sub {
	text-align: center;
	color: var(--bs-label);
	font-size: var(--bs-fs-note);
	letter-spacing: .5px;
	margin: 8px 0 2px;
}

.bs-stats-pr {
	text-align: center;
	color: var(--bs-title);
	font-size: var(--bs-fs-ui);
	margin: 4px 0 2px;
}

.bs-stats-pr b {
	color: #f3df00;
}

.bs-muted {
	color: var(--bs-dim);
}

/* HUD 統計入口 */
#bs-lv-stats {
	cursor: pointer;
	color: var(--bs-link);
	text-decoration: none;
	font-size: var(--bs-fs-ui);
}

#bs-lv-stats:hover {
	color: #fff;
}

/* 戰績重看鈕:平時隱藏,挑戰結束(.bs-lv-finished)才出現——彈窗被點遮罩關掉後的回頭路 */
#bs-lv-recap {
	display: none;
	cursor: pointer;
	color: var(--bs-title);
	font-weight: bold;
	text-decoration: none;
	font-size: var(--bs-fs-ui);
}

.bs-lv-finished #bs-lv-recap {
	display: inline;
}

#bs-lv-recap:hover {
	color: #fff;
}

/* 統計 modal */
#bs-lv-stats-back {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 90;
}

.bs-lv-stats-card {
	background: #080f09;
	border: 1px solid var(--bs-gold);
	border-radius: 12px;
	width: 420px;
	max-width: 94vw;
	box-shadow: 0 0 40px rgba(0, 0, 0, .7);
}

#bs-lv-stats-close {
	cursor: pointer;
	background: none;
	border: 1px solid #555;
	color: #aaa;
	border-radius: 5px;
	padding: 3px 12px;
	font-family: inherit;
	font-size: var(--bs-fs-ui);
}

#bs-lv-stats-close:hover {
	background: #2a2a2a;
	color: #ccc;
}

#bs-lv-stats-body {
	padding: 16px 20px 20px;
}

.bs-lv-badge {
	color: var(--bs-title);
}

/* 結果卡:失敗態與每日期號 */
.bs-lv-tag-fail {
	color: #ff7070;
}

.bs-lv-daily-no {
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
	margin-bottom: 6px;
}

.bs-lv-fail-note {
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
}

.bs-lv-win-btns {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.bs-lv-win-btns button {
	cursor: pointer;
	font-family: inherit;
	font-size: var(--bs-fs-btn);
	border-radius: 5px;
	padding: 5px 12px;
	background: #0d130e;
	border: 1px solid #4a7a4a;
	color: #d6f0d6;
}

.bs-lv-win-btns button:hover {
	background: rgba(100, 229, 68, .15);
}

/* ===== 手機行動化(遊戲手機、工具桌機:挑戰模式優先)===== */

/* 基底資訊卡:手機以點擊開關(.open 由 JS 切),取代 :hover */
.bs-base-window.open #bs-baseinfo {
	display: block;
}

.bs-base-window.open .bs-base-hint {
	opacity: 0;
}

/* 觸控目標加大 */
.phone .bs-cab-item {
	padding: 8px 10px;
}

.phone .bs-act-btn {
	padding: 8px 14px;
}

.phone #bs-clear {
	padding: 6px 12px;
}

.phone .bs-dt-actions button {
	padding: 9px 14px;
}

/* ===== 操作合體按鈕:同軸成對(橫=攪拌|稀釋、縱=沸騰|靜置),前綴標軸向 ===== */
.bs-op-group {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #444;
	border-radius: 6px;
	overflow: hidden;
}

.bs-op-axis {
	display: flex;
	align-items: center;
	padding: 0 8px;
	background: #1a1a1a;
	color: var(--bs-label);
	font-size: var(--bs-fs-ui);
	border-right: 1px solid #444;
	user-select: none;
}

.bs-op-group .bs-act-btn {
	border-radius: 0;
}

.bs-op-group .bs-act-btn + .bs-act-btn {
	border-left: 1px solid rgba(0, 0, 0, .45);
}

.bs-op-legend {
	color: var(--bs-dim);
	font-size: var(--bs-fs-aux);
	text-align: center;
	margin-top: 2px;
}

/* 鍋心(=起點,操作內外的參考點):同事典起點 GRN @ */
.bsmm-center {
	color: #00ac00;
	font-weight: bold;
}

/* 手機挑戰直排順序:舞台(鍋釜/地圖)優先,藥材池次之,配方結果最後 */
.phone.bs-lv-mode .bs-stage {
	order: 1;
}

.phone.bs-lv-mode .bs-cab {
	order: 2;
}

.phone.bs-lv-mode .bs-result {
	order: 3;
}

/* ===== 藥效結算表:主/交互/結果同列對齊(選擇器需蓋掉 library.css 的全域 table 樣式)===== */
.bs-eff-table {
	width: 100%;
	min-width: 0;
	background: none;
	margin: 0;
	border-collapse: collapse;
	border-radius: 0;
	font-size: var(--bs-fs-ui);
}

.bs-eff-table th {
	padding: 2px 4px;
	color: var(--bs-label);
	font-weight: normal;
	white-space: nowrap;
}

.bs-eff-table th:last-child {
	padding-right: 4px !important;
}

.bs-eff-table td {
	padding: 2px 4px;
}

.bs-eff-table tbody td:first-child {
	padding-left: 0;
	text-align: left;
}

.bs-eff-table tbody td:last-child {
	padding-right: 0;
}

/* 濾除:被基底規則吃掉,非正非負,用金色系提示 */
.bs-eff-filtered {
	color: var(--bs-gold);
}

/* 成功率色階 */
.bs-suc-hi {
	color: #7fe87f;
}

.bs-suc-mid {
	color: #e9d24a;
}

.bs-suc-low {
	color: #ff7070;
}

/* 迷你地圖符號圖例 */
#bs-mm-legend {
	font-size: var(--bs-fs-note);
	color: var(--bs-dim);
	text-align: center;
	margin-top: 2px;
	letter-spacing: 1px;
}

/* SP=遊戲內消耗,Brewdle 模式無意義,連開獎後也不顯示 */
.bs-lv-mode #bs-sp {
	display: none;
}

/* Brewdle:藥材池僅 8 味,搜尋/篩選/計數/常用皆為多餘資訊;魔藥小本本在挑戰模式無用且會出錯,一併隱藏 */
.bs-lv-mode #bs-search, .bs-lv-mode #bs-filt-toggle, .bs-lv-mode #bs-filt-panel, .bs-lv-mode #bs-cab-count, .bs-lv-mode #bs-recent-wrap, .bs-lv-mode #bs-inv-btn {
	display: none;
}