.art-preview { position:fixed; inset:0; z-index:12000; overflow:auto; background:#f4e7cf; color:#4f5e65; padding:12px; box-sizing:border-box; font:14px/1.5 sans-serif; }
.art-preview header,.art-preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.art-preview header strong { flex:1; }
.art-preview button,.art-preview select { min-height:40px; padding:7px 14px; border:1px solid #8a9c97; border-radius:10px; color:#405a62; background:#fff4db; font:inherit; cursor:pointer; }
.art-preview button:focus-visible,.art-preview select:focus-visible { outline:3px solid #408c93; }
.art-preview-note { margin:8px 0; }
.art-preview-castle { border:1px solid #b6aa8f; border-radius:10px; margin:12px 0; padding:12px; }
.art-preview-castle label { display:inline-flex; align-items:center; min-height:44px; margin-right:16px; cursor:pointer; }
.art-preview-castle input { width:20px; height:20px; }
.art-preview-castle img { display:block; width:128px; height:128px; image-rendering:pixelated; }
.art-preview-viewport { overflow:auto; max-height:70vh; border:1px solid #859a97; border-radius:10px; }
.art-preview-sky { width:1080px; height:1024px; position:relative; background:var(--waddle-live-sky); }
.art-preview-map { display:block; position:relative; width:1080px; height:1024px; max-width:none; image-rendering:pixelated; }
.art-preview-clouds { position:absolute; inset:0 0 auto; height:192px; overflow:hidden; pointer-events:none; }
.art-preview-clouds img { position:absolute; image-rendering:pixelated; }
.art-preview-residents { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.art-preview-civics { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.art-preview-residents img { position:absolute; height:32px; width:auto; image-rendering:pixelated; transform:translate(-50%,-100%); }
.art-preview-toolbar label { display:inline-flex; gap:6px; align-items:center; min-height:40px; }
.art-preview-rain { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.art-preview-rain .raindrop { animation-name:artPreviewRain; background:#b7d9da; }
@keyframes artPreviewRain { 0% { transform:translateY(0); opacity:0; } 8% { opacity:1; } 100% { transform:translateY(1120px); opacity:.6; } }
html[data-waddle-weather="rain"] .art-preview-clouds { filter:brightness(.78) saturate(.65); }
html[data-waddle-night="true"] .art-preview-clouds { filter:brightness(.60) saturate(.7); }
html[data-waddle-weather="rain"][data-waddle-night="true"] .art-preview-clouds { filter:brightness(.45) saturate(.5); }
.art-preview-map[hidden] { display:none; }
.art-preview-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:14px; }
.art-preview-items figure { margin:0; padding:10px; border:1px solid #c0b394; border-radius:12px; background:#fff0d7; text-align:center; }
.art-preview-items img { display:block; margin:auto; width:128px; height:128px; object-fit:contain; image-rendering:pixelated; }
html[data-waddle-weather="rain"] #skyclouds { filter:brightness(.78) saturate(.65); }
html[data-waddle-night="true"] #skyclouds { filter:brightness(.60) saturate(.7); }
html[data-waddle-weather="rain"][data-waddle-night="true"] #skyclouds { filter:brightness(.45) saturate(.5); }