.town-overlay { position:fixed; inset:0; z-index:65; display:flex; align-items:center; justify-content:center; padding:20px; background:#101b22aa; cursor:default; box-sizing:border-box; }
.town-panel { width:min(500px,100%); max-height:85dvh; overflow:auto; padding:20px; box-sizing:border-box; color:#eee4c9; background:#263c39; border:1px solid #a38d61; font:16px/1.5 Arial,"Helvetica Neue",sans-serif; }
.town-panel header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.town-panel h2 { font:inherit; font-size:26px; margin:0; } .town-panel h3 { font:inherit; font-size:21px; margin:0; }
.town-panel p { margin:10px 0 16px; } .town-panel button,.town-panel input { font:inherit; }
.town-panel button { background:#d6c49e; color:#21312b; padding:8px 12px; border:2px solid #8f7c58; cursor:pointer; min-height:42px; }
.town-panel button:disabled { opacity:.55; cursor:default; } .town-panel button[aria-pressed=true] { background:#9ccc99; }
.town-panel :focus-visible { outline:3px solid #a4e58c; outline-offset:3px; }
.town-panel header button { font-size:28px; padding:0 10px; }
.town-panel a { color:#c5e6a7; text-underline-offset:3px; }
.town-cards { display:grid; gap:16px; }
.town-card { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:start; gap:6px 16px; border-top:1px solid #8d9673; padding:16px 0 0; min-width:0; }
.town-card > :not(canvas) { grid-column:2; }
.town-card button { justify-self:start; }
.town-card canvas { position:static; inset:auto; display:block; grid-column:1; grid-row:1 / span 4; width:96px; max-width:100%; height:auto; image-rendering:pixelated; margin:4px 0; }
.town-card label { display:block; } .town-card input { display:block; width:100%; box-sizing:border-box; background:#f5eddb; color:#111; padding:8px; border:1px solid #a38d61; margin:5px 0 12px; }
.town-note { color:#c3c6b2; font-size:15px; } .town-topics { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.town-story { font:17px/1.65 Arial,sans-serif; } 
.town-banner { position:fixed; inset:0; z-index:65; display:flex; align-items:center; background:#12081e66; cursor:pointer; animation:town-fade .35s ease-out; }
.town-banner p { box-sizing:border-box; width:100%; margin:0; padding:clamp(26px,7vh,72px) max(6vw, 20px); color:#3dff72; background:#6a2fa0; border-block:6px solid #b98ae6; box-shadow:0 0 0 3px #3a1660, 0 18px 60px #0008; font:400 clamp(30px,6.2vw,92px)/1.12 "Shrikhand", "Cooper Black", Georgia, serif; text-align:center; text-wrap:balance; text-shadow:4px 4px 0 #1b4d29, 0 0 28px #3dff7255; animation:town-rise .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes town-fade { from { opacity:0; } }
@keyframes town-rise { from { transform:scaleY(.2); opacity:0; } }
.town-panel .town-next { display:block; width:100%; margin-top:18px; min-height:52px; font-size:19px; }
@media(max-width:480px) { .town-overlay { padding:12px; } .town-panel { padding:16px; max-height:90dvh; } .town-cards { grid-template-columns:1fr; } .town-panel h2 { font-size:28px; } }