/* Membrane Bouncer: the molecule ID card + the membrane scene inside the practice shell's stage. */
.mb { position: absolute; inset: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
.mb-card { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 10px 12px; border-radius: var(--tlg-radius-lg);
  border: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface); }
.mb-card-k { margin: 0; font-size: 16px; font-weight: var(--tlg-weight-bold); text-transform: uppercase; letter-spacing: var(--tlg-tracking-caps); color: var(--ps-accent); }
html[data-theme="dark"] .mb-card-k { color: var(--tlg-text-muted); }
.mb-tray { display: flex; align-items: center; gap: 10px; min-height: 84px; padding: 6px; border-radius: var(--tlg-radius-sm); border: 2px dashed var(--tlg-border-strong); background: var(--tlg-surface-2); }
.mb-tray.is-empty::before { content: "In a door →"; display: grid; place-items: center; width: 72px; height: 72px; flex: none; font-size: 16px; font-weight: 700; color: var(--tlg-text-muted); text-align: center; }
.mb-tray-tip { margin: 0; font-size: 16px; line-height: 1.3; }
.mb-keys { color: var(--tlg-text-muted); font-size: 16px; }
.mb-token { all: unset; box-sizing: border-box; width: 72px; height: 72px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #dcecf4); border: 3px solid var(--ps-accent); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); cursor: grab; }
.mb-token:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 3px; }
.mb-token.is-disabled { cursor: default; }
.mb-token-art { width: 58px; height: 58px; pointer-events: none; overflow: visible; }
.mb-slot .mb-token { width: 64px; height: 64px; }
.mb-slot .mb-token-art { width: 52px; height: 52px; }
.mb-name { margin: 0; font-size: var(--tlg-text-lg); line-height: 1.2; }
.mb-props { margin: 0; display: grid; gap: 6px; }
.mb-props div { display: grid; gap: 0; }
.mb-props dt { font-size: 16px; font-weight: 700; color: var(--tlg-text-muted); }
.mb-props dd { margin: 0; font-size: 16px; line-height: 1.3; }
.mb-go-k { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.mb-go-given { margin: 0; font-size: 16px; padding: 6px 8px; border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); }
.mb-dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mb-dir, .mb-subopt { min-height: 44px; padding: 4px 8px; font-size: 16px; line-height: 1.2; border-radius: var(--tlg-radius-sm); }
.mb-sub-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mb-sub-opts--1 { grid-template-columns: 1fr; }
.mb-subopt { white-space: normal; }
.mb-msg { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 700; color: var(--tlg-danger, #b42318); }
html[data-theme="dark"] .mb-msg { color: #ffb4a8; }

.mb-view { position: relative; min-width: 0; min-height: 0; display: flex; align-items: flex-start; justify-content: center; }
.mb-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--tlg-radius-lg); overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); user-select: none; -webkit-user-select: none; }
.mb-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mb-bg-out { fill: url(#mb-out-grad); }
.mb-bg-in { fill: url(#mb-in-grad); }
html[data-theme="dark"] .mb-bg-out { fill: url(#mb-out-dark); }
html[data-theme="dark"] .mb-bg-in { fill: url(#mb-in-dark); }
.mb-zones { position: absolute; inset: 0; }
.mb-zone { position: absolute; top: 0; bottom: 0; width: 25%; border-radius: 6px; }
.mb-zone + .mb-zone { border-left: 1px dashed rgba(30, 60, 80, .25); }
.mb-zone.is-over { background: rgba(29, 95, 134, .12); }
.mb-sign { position: absolute; left: 6px; right: 6px; top: 6px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); border: 2px solid #1d5f86; color: #10202c; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); pointer-events: none; }
.mb-sign-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #1d5f86; color: #fff; font-weight: 800; font-size: 16px; }
.mb-sign-t { display: grid; line-height: 1.15; font-size: 16px; min-width: 0; }
.mb-sign-t span { font-size: 16px; color: #3b4a56; }
.mb-slot { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: 64px; height: 64px; }
.mb-zone--bilayer .mb-slot { left: 62%; }
.mb-badge { position: absolute; left: 8px; display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 999px; font-size: 16px;
  background: rgba(255, 255, 255, .9); color: #10202c; border: 1px solid rgba(0, 0, 0, .18); pointer-events: none; }
.mb-badge--out { top: 35%; }
.mb-badge--in { top: 58.5%; }
.mb-badge-g { width: 24px; height: 24px; overflow: visible; }
.mb-bounce { position: absolute; max-width: 46%; padding: 6px 10px; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 1.25; pointer-events: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25); animation: mb-pop .25s ease-out; }
.mb-bounce.is-bad { background: #fff1ef; color: #7a1a10; border: 2px solid #c0392b; }
.mb-bounce.is-ok { background: #ecfbf1; color: #12502a; border: 2px solid #2e8b57; }
.mb-bounce--0 { left: 1%; } .mb-bounce--1 { left: 20%; } .mb-bounce--2 { left: 42%; } .mb-bounce--3 { right: 1%; }
@keyframes mb-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mb-bounce { animation: none; } }
.mb-example-svg { display: block; width: 100%; height: auto; max-height: 360px; }

@media (max-width: 1100px) { .mb { grid-template-columns: 236px minmax(0, 1fr); } .mb-sign-t span { display: none; } }
@media (max-width: 900px) {
  .mb { position: static; grid-template-columns: 1fr; }
  .mb-view { display: block; }
  .mb-scene { width: 100% !important; height: auto !important; }
}