/* --- In-game preview (web/src/preview/preview.js). Logical game pixels, scaled up. --- */
#preview-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin-bottom: 16px; }
.preview-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.preview-scroll { overflow: auto; padding: 4px 0; }
.preview-host { transform-origin: top left; }
.bap-stage { position: relative; font: 8px/10px "Monocraft", "Minecraft", "Courier New", monospace; color: #fff; user-select: none; }
.bap-stage img { image-rendering: pixelated; display: block; }
.bap-window, .bap-tab, .bap-tab-bg, .bap-icon, .bap-frame, .bap-face, .bap-frame-win, .bap-header, .bap-inset, .bap-close,
.bap-viewport, .bap-canvas, .bap-line, .bap-core, .bap-dim, .bap-tooltip, .bap-thumb, .bap-grip, .bap-tab-title, .bap-empty,
.bap-tab-title .bap-text, .bap-bar .bap-nine, .bap-desc-bg { position: absolute; }
.bap-nine { image-rendering: pixelated; }
.bap-tab { cursor: pointer; }
.bap-tab.bap-other { cursor: default; }
.bap-tab.selected { z-index: 3; cursor: default; }
.bap-frame-win { z-index: 2; pointer-events: none; }
.bap-inset { z-index: 3; }
.bap-viewport { z-index: 4; overflow: hidden; }
.bap-close { z-index: 5; }
.bap-header { z-index: 5; white-space: pre; }
.bap-canvas { background-repeat: repeat; image-rendering: pixelated; }
.bap-line { background: #000; }
.bap-core { background: #fff; }
.bap-face { cursor: pointer; }
.bap-dim { display: none; background: rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 1; }
.bap-tooltip { z-index: 40; pointer-events: none; }
.bap-hover-face { z-index: 60; }
.bap-desc-bg { inset: 0; }
.bap-bar { position: relative; width: max-content; height: 26px; }
.bap-bar .bap-nine { left: 0; right: 0; top: 0; }
.bap-row { position: relative; display: flex; align-items: center; height: 26px; padding-top: 2px; white-space: pre; }
.bap-row > span { display: inline-block; height: 1px; }
.bap-text { text-shadow: 1px 1px 0 #3f3f3f; }
.bap-header.bap-text { text-shadow: none; }
.bap-desc { position: relative; padding: 0 5px 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bap-tab-title { display: none; z-index: 40; white-space: pre; pointer-events: none; }
.bap-tab:hover .bap-tab-title { display: block; }
/* Label at (4, 3) in a box text + 8 wide: 2px border + 2px offset, 4px spare on the right. */
.bap-tab-title .bap-text { position: relative; padding-right: 4px; }
.bap-empty { width: 100%; text-align: center; }