/* blindbox.css — the /misc/blindbox simulator: stage, control panel, odds
   table. The page shell (gm-top / gm-back) is shared with the other 杂物间
   pages in lab.css. */

/* A class that sets display beats the browser's own [hidden]{display:none},
   so these elements need it spelled out — otherwise the "this round" line
   leaves an empty box when it has no content, and the tier row of a
   single-tier box holds space while empty. */
.bb-hud[hidden], .bb-hud-line[hidden], .bb-row[hidden], .bb-fx[hidden],
.bb-chip[hidden] { display: none !important; }

.bb-stage { user-select: none; -webkit-user-select: none; position: relative; max-width: var(--w-page); margin: 0 auto 16px; min-height: clamp(260px, 38vh, 380px); transition: min-height .3s ease; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-xl); border: var(--bw) solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate; background: linear-gradient(170deg, var(--hero-a, #dcecfc), var(--hero-c, #cfe3fb) 60%, var(--hero-b, #e6f0fb)); }
/* Grow the stage while an effect plays: a 9:16 effect in a 380px stage is the size of a palm. */
.bb-stage.fx-on { min-height: clamp(360px, 64vh, 620px); }
[data-theme="dark"] .bb-stage { background: linear-gradient(170deg, #1b2333, #141a26 60%, #1a1526); }
.bb-stage-glow { position: absolute; left: 50%; bottom: -30%; width: min(120%, 760px); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(var(--blue-rgb), .25), transparent 62%); pointer-events: none; }
/* Horizon: gifts land on this line (blindbox.js's floor is also at bottom: 46px). */
.bb-stage::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--blue-rgb), .35), transparent); pointer-events: none; }
.bb-stage-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 13px/1.6 var(--font-sans); color: var(--text3); text-align: center; padding: 0 24px; pointer-events: none; transition: opacity .25s; }
.bb-stage-hint.gone { opacity: 0; }
.bb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ── Profit and loss on top of the stage ── */
/* z-index 4: above the effect layer (3), so the numbers stay readable while one plays */
.bb-hud { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.bb-hud-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 12px; border-radius: var(--r-md); background: var(--surface-strong); border: var(--bw) solid var(--border); font: 12px/1.5 var(--font-sans); color: var(--text2); align-self: flex-start; max-width: 100%; }
.bb-hud-total { font-size: 11px; color: var(--text3); }
.bb-hud i { font-style: normal; color: var(--text3); margin-right: 3px; }
.bb-hud b { font: 700 13px var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.bb-hud-total b { font-size: 12px; color: var(--text2); }
.bb-hud b.up { color: var(--ok); } .bb-hud b.down { color: var(--danger); }
.bb-hud img { width: 15px; height: 15px; object-fit: contain; vertical-align: -3px; }

/* ── Falling gifts ──
   Normally the canvas above (Matter.js bodies); the DOM cards below are the
   fallback. */
.bb-drops { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px 12px; padding: 16px max(16px, calc(50% - 300px)) 62px; }
.bb-drops:empty { display: none; }
.bb-drop { position: relative; width: clamp(74px, 15vw, 96px); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bb-drop img { width: clamp(48px, 10vw, 64px); height: clamp(48px, 10vw, 64px); object-fit: contain; filter: drop-shadow(0 6px 8px rgba(46, 74, 102, .22)); }
.bb-drop b { font: 700 11px/1.3 var(--font-sans); color: var(--text); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-drop i { font: 700 10px/1.3 var(--font-sans); color: var(--text2); font-style: normal; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-full); padding: 0 6px; }
.bb-drop u { font: 400 10px/1.3 var(--font-sans); color: var(--text3); text-decoration: none; opacity: .8; }
.bb-drop.win b { color: var(--blue2, var(--blue)); }
.bb-drop.win::before { content: ''; position: absolute; top: -6px; width: clamp(60px, 12vw, 78px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 140, .75), transparent 66%); }
.bb-more { align-self: flex-end; margin-bottom: 14px; font: 700 12px var(--font-sans); color: var(--text3); background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-full); padding: 6px 12px; }

/* ── Full-screen effects: B站's RGB + alpha mp4, composited by WebGL onto this
   canvas, inside the stage. ── */
.bb-fx { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 22, .45); backdrop-filter: blur(2px); animation: bb-fade .25s ease-out; cursor: pointer; }
.bb-fx[hidden] { display: none; }
/* The canvas fills the area and object-fit keeps 9:16 (clamping both max-width and max-height distorts it). */
.bb-fx-canvas { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.bb-fx-video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Bottom left: the top is taken by the round / cumulative lines */
.bb-fx-info { position: absolute; left: 12px; bottom: 14px; font: 12px var(--font-sans); color: var(--text2); background: var(--surface-strong); border: var(--bw) solid var(--border); border-radius: var(--r-full); padding: 5px 14px; white-space: nowrap; pointer-events: none; }
.bb-fx-btns { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
/* 跳过按钮为 .btn-outline.is-sm，压在舞台上时取更实的底色 */
.bb-fx-btns > .btn-outline { --btn-outline-bg: var(--surface-strong); }
@keyframes bb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Control panel ── */
/* 面板为 .surface-glass */
.bb-panel { max-width: var(--w-page); margin: 0 auto var(--gap-grid); --surface-pad: var(--s-2) var(--pad-card); }
/* --bb-row-h：该行首个控件的高度，行标签取同一高度并垂直居中，与控件中心对齐 */
.bb-row { --bb-row-h: 34px; display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
#bbBoxRow { --bb-row-h: 38px; }
#bbLevelRow { --bb-row-h: 28px; }
.bb-row + .bb-row { border-top: var(--bw) solid var(--border); }
.bb-row-label { flex: 0 0 52px; display: flex; align-items: center; min-height: var(--bb-row-h); font: 700 12px/1.3 var(--font-display); color: var(--text2); letter-spacing: .04em; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.bb-loading { font: 12px var(--font-sans); color: var(--text3); line-height: 38px; }
/* 爆率表加载骨架：与盲盒胶囊同高（38px），灰条材质为 .skel-line（ui.css） */
.bb-sk-chip { --skel-h: 38px; width: 112px; max-width: 100%; }
/* 读取爆率表期间，盲盒行按加载完成后的高度预留（桌面 4 行、手机宽度 10 余行），抽数行待数据到后再淡入，避免首屏下方内容位移 */
#bbBoxes[aria-busy="true"] { min-height: 176px; align-content: flex-start; }
.bb-panel:has(#bbBoxes[aria-busy="true"]) .bb-row-draw { visibility: hidden; }
.bb-panel:not(:has(#bbBoxes[aria-busy="true"])) .bb-row-draw { animation: bb-fade .25s ease-out; }
.bb-group { align-self: center; font: 700 10px/1 var(--font-display); color: var(--text3); letter-spacing: .08em; padding: 0 8px 0 2px; border-left: 2px solid var(--border); margin-left: 2px; }
.bb-chips > .bb-group:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
/* 盲盒与爆率档为 .pill-soft（aria-pressed）；带图标的一种左侧内边距收窄 */
.bb-chip { --pill-fs: 13px; --pill-gap: 8px; max-width: 100%; }
.bb-chip:has(> img) { --pill-pad: 5px 14px 5px 6px; }
.bb-chip img { width: 26px; height: 26px; object-fit: contain; flex: none; }
/* 名称为 .pill-text，超出胶囊最大宽度时省略；价格与期望值保持完整 */
.bb-chip small { opacity: .75; font-size: 11px; flex: none; }
.bb-chip.is-observed:not([aria-pressed="true"]) { --pill-soft-border: rgba(255, 202, 98, .7); }
.bb-note { margin: 0 0 4px; --surface-flat-pad: 8px 12px; font: 11px/1.6 var(--font-sans); color: var(--text3); }
.bb-draw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* 抽取按钮为 .btn-outline，与旁边的描边输入框同一外观 */
.bb-draw .btn-outline { --btn-pad: 8px 18px; --btn-fs: 13px; }
.bb-custom { display: inline-flex; align-items: center; gap: 6px; }
/* 自定义抽数为 .field，收成胶囊形 */
#bbCount { width: 74px; --field-r: var(--r-pill); --field-fs: 13px; --field-pad: 6px 10px; text-align: center; }
/* A number input's spinner is native browser styling and out of place on this
   page; typing the value is enough. Firefox honours appearance: textfield. */
.bb-custom input::-webkit-outer-spin-button,
.bb-custom input::-webkit-inner-spin-button,
.bb-rate::-webkit-outer-spin-button,
.bb-rate::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bb-custom input[type="number"],
.bb-rate[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.bb-custom input::placeholder, .bb-rate::placeholder { color: var(--text3); }

/* ── Odds table: each row's probability is editable, with the published value and this run's draws beside it ── */
.bb-card { max-width: var(--w-page); margin: 0 auto; }
.bb-card h2 { margin: 0 0 var(--s-3); font: 700 15px/1.3 var(--font-display); color: var(--text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bb-card h2 small { font: 400 11px var(--font-sans); color: var(--text3); }
.bb-card-tools { margin-left: auto; display: flex; gap: 6px; }

.bb-table { display: grid; gap: 8px; }
.bb-trow { display: grid; grid-template-columns: minmax(110px, 1.2fr) 96px 1fr; gap: 10px; align-items: center; }
.bb-tname { display: flex; align-items: center; gap: 8px; min-width: 0; font: 12px var(--font-sans); color: var(--text); }
.bb-tname img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.bb-tname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-tname em { font-style: normal; font-size: 11px; color: var(--text3); flex: none; }
.bb-tedit { display: flex; align-items: center; gap: 3px; font: 11px var(--font-sans); color: var(--text3); }
/* 表内的爆率输入为 .field，改过的一格描边改成琥珀色 */
.bb-rate { width: 66px; --field-fs: 12px; --field-pad: 4px 6px; --field-r: 8px; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.bb-rate.is-edited { --field-border: rgba(255, 202, 98, .8); font-weight: 700; }
.bb-tbars { display: grid; gap: 4px; }
.bb-tbar { display: grid; grid-template-columns: 28px 1fr 92px; gap: 8px; align-items: center; font: 11px var(--font-sans); color: var(--text3); }
.bb-tbar i { font-style: normal; }
.bb-tbar u { text-decoration: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text2); }
.bb-ttrack { display: block; height: 7px; border-radius: var(--r-full); background: rgba(var(--blue-rgb), .12); overflow: hidden; }
.bb-tfill { display: block; height: 100%; border-radius: var(--r-full); background: rgba(var(--blue-rgb), .55); transition: width .4s ease; }
.bb-tfill.real { background: linear-gradient(90deg, #ffd08a, #ff9ccb); }
.bb-total-row { margin: 12px 0 0; font: 11px/1.6 var(--font-sans); color: var(--text3); }
.bb-source { max-width: var(--w-page); margin: 14px auto 0; font: 11px/1.7 var(--font-sans); color: var(--text3); }
/* 爆率表显示之前，出处一行在首屏内会被随后展开的表格推走，先不显示 */
#bbTableCard[hidden] ~ .bb-source { visibility: hidden; }

@media (max-width: 900px) {
  #bbBoxes[aria-busy="true"] { min-height: 268px; }
}
@media (max-width: 640px) {
  #bbBoxes[aria-busy="true"] { min-height: 490px; }
  /* stretch：列布局下 flex-start 会让胶囊容器取内容宽度，长名称把容器撑出卡片 */
  .bb-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .bb-row-label { flex: none; min-height: 0; }
  /* 分组标签独占一行；作为 flex 子项时它可能排在行尾，与下一组的首个胶囊分离 */
  .bb-group { flex: 0 0 100%; align-self: auto; margin: 2px 0 0; padding: 0; border-left: 0; }
  .bb-chips > .bb-group:first-child { margin-top: 0; }
  .bb-trow { grid-template-columns: 1fr auto; }
  .bb-tbars { grid-column: 1 / -1; }
  .bb-hud { left: 8px; right: 8px; top: 8px; }
  .bb-hud-line { font-size: 11px; padding: 5px 9px; gap: 3px 8px; }
}

/* 减少动态效果：舞台高度、特效层淡入、提示与进度条的过渡一律取消 */
@media (prefers-reduced-motion: reduce) {
  .bb-stage, .bb-stage-hint, .bb-tfill { transition: none; }
  .bb-fx, .bb-panel:not(:has(#bbBoxes[aria-busy="true"])) .bb-row-draw { animation: none; }
}