body { margin: 0; background: #20382d; color: #f3e6c9; font: 14px/1.5 system-ui,sans-serif; }
.preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; }
.preview-toolbar strong { font: 700 22px Georgia,serif; margin-right: 12px; }
.preview-toolbar button, .preview-toolbar select, .preview-toolbar a { padding: 8px 12px; color: #fff0cd; background: #39513b; border: 1px solid #b69b64; border-radius: 6px; font: inherit; }
.preview-toolbar button[aria-pressed="true"] { background: #765b35; }
.preview-note, #previewDetail { padding: 0 20px; margin: 8px 0 12px; }
#previewViewport { display: block; width: 100%; height: 70vh; overflow: auto; overscroll-behavior: contain; margin: auto; border-block: 1px solid #799052; }
#previewViewport.preview-narrow { width: min(390px,100%); height: 620px; max-height: 75vh; }
#previewCanvas { width: 3000px; height: 2000px; }
#previewCanvas #map { position: relative; width: 3000px; height: 2000px; min-height: 0; transform-origin: 0 0; border: 0; border-radius: 0; overflow: hidden; }
#previewCanvas.preview-wide { width: 1500px; height: 1000px; }
.preview-wide #map { transform: scale(.5); }


#previewPawn { transition: none; }