/* Authentic village-wide announcements and short pixel-friendly fireworks. */
.utility-banner{width:max-content;position:fixed;top:calc(60px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:900;max-width:min(92vw,680px);padding:14px 20px;background:#39264edc;border:3px solid #f4cd74;box-shadow:0 5px 0 #261c36;color:#fff2c6;font-size:17px;font-weight:800;text-align:center;pointer-events:none;overflow-wrap:anywhere;animation:utility-slide .18s ease-out}
@keyframes utility-slide{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.utility-fireworks{position:fixed;inset:0;z-index:890;pointer-events:none;overflow:hidden}
.utility-burst{position:absolute;animation:utility-appear 1.4s ease-out both}
.utility-burst i{position:absolute;left:0;top:0;width:8px;height:8px;border:1px solid #fff9da;background:hsl(var(--hue) 90% 65%);box-shadow:0 0 5px #ffec91;transform:rotate(var(--angle));animation:utility-spark 1.2s ease-out forwards}
@keyframes utility-appear{0%{opacity:0}20%{opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes utility-spark{0%{transform:rotate(var(--angle)) translateX(0);opacity:1}100%{transform:rotate(var(--angle)) translateX(100px);opacity:0}}
.utility-title-swatches{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.utility-title-swatch{height:34px;min-width:52px;padding:4px 10px;border:2px solid #fff8dc;border-radius:5px;cursor:pointer;color:white;font-weight:bold}
.utility-title-swatch.selected{outline:3px solid #ffc94a;outline-offset:2px}
.utility-title-preview{font-weight:bold;text-align:center;margin:12px auto;padding:7px 16px;border-radius:5px;color:#fff}

/* Full-viewport animated fireworks: stays above the game and below dialogs. */
.utility-fireworks-canvas{position:fixed;inset:0;display:block;width:100vw;height:100vh;z-index:880;pointer-events:none;image-rendering:pixelated}