.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(650px,100%); max-height:85dvh; overflow:auto; padding:24px; box-sizing:border-box; color:#eee4c9; background:#263c39; border:3px solid #a38d61; box-shadow:8px 8px 0 #1119; font:17px/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:32px; margin:0; } .town-panel h3 { font:inherit; font-size:26px; margin:0 0 8px; }
.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; grid-template-columns:1fr 1fr; gap:16px; }
.town-card { border:1px solid #8d9673; padding:14px; min-width:0; } .town-card canvas { position:static; inset:auto; display:block; width:128px; max-width:100%; height:auto; image-rendering:pixelated; margin:8px auto; }
.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-oracle { font-size:42px; text-align:center; padding:20px 0; color:#e8ccff; }
.town-farm { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:480px) { .town-overlay { padding:12px; } .town-panel { padding:16px; max-height:90dvh; } .town-cards { grid-template-columns:1fr; } .town-farm { grid-template-columns:1fr 1fr; } .town-panel h2 { font-size:28px; } }