/* The Town Hall (town-hall.js): the mayor, the town's level, the welcome tour, the community project and the calendar;
   and the live Mossvale Times on the map screen. */
#townhall-screen { --hall-ink: #2f4a5a; --hall-line: #cfdde6; --hall-paper: #f7fafc; }
.hall-top { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.hall-mayor .friend-stage { background: linear-gradient(#e2ecf4 0 66%, #b9a27f 66%); }
.hall-mayor .friend-stage::after { content: ''; position: absolute; right: 14%; bottom: 30%; width: 26px; height: 40px; border-left: 3px solid #59646a; background: linear-gradient(#6f9a5f 0 50%, transparent 50%) 3px 0 / 22px 24px no-repeat; }
.hall-card { margin-top: 16px; padding: 18px; border: 3px solid var(--hall-line); border-radius: 18px; background: var(--hall-paper); box-shadow: 0 5px 0 #d6e2ea; }
.hall-top .hall-card { margin-top: 0; }
.hall-card h3 { margin: 2px 0 8px; color: var(--hall-ink); }
.hall-card h4 { margin: 14px 0 6px; color: var(--hall-ink); font: 900 14px Nunito, system-ui, sans-serif; }
.hall-card p { margin: 0 0 8px; font-size: 14px; }
.hall-bar, .project-bar, .paper-bar { display: block; height: 14px; overflow: hidden; border: 2px solid #8fa9b8; border-radius: 99px; background: #fff; }
.hall-bar i, .project-bar i, .paper-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(#9fd2f6, #4a8fd0); transition: width .4s ease; }
.hall-bar.is-project i { background: linear-gradient(#9be08a, #4fa55a); }
.hall-bar.is-level i { background: linear-gradient(#ffe27a, #f2b736); }
.hall-level-note, .project-goal { display: block; margin-top: 6px; color: #5f7884; font-weight: 800; font-size: 12.5px; }
.hall-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hall-chip { padding: 4px 10px; border-radius: 99px; background: #e6eef3; color: var(--hall-ink); font: 800 12.5px Nunito, system-ui, sans-serif; }
.hall-chip.is-event { background: #fff0c9; color: #8a5a1f; }
.hall-built { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.hall-built li { padding: 4px 10px; border: 2px solid #cfe1c2; border-radius: 10px; background: #f2f8ec; color: #3f6a4a; font: 800 12.5px Nunito, system-ui, sans-serif; }
.hall-built li.is-empty { border-style: dashed; background: transparent; color: #7a8a8f; }
.hall-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; padding: 14px 18px; border: 3px solid #e8b94a; border-radius: 16px; background: linear-gradient(90deg, #fff6d6, #fdeec0); color: #6b4a14; font-weight: 800; box-shadow: 0 5px 0 #d9b85c; }
.hall-banner strong { font: 900 19px Nunito, system-ui, sans-serif; }
.hall-banner-icon { font-size: 30px; }

/* The welcome tour checklist. */
.hall-tour { border-color: #f0d6a8; background: #fffaf0; box-shadow: 0 5px 0 #ecd9b5; }
.tour-steps { display: grid; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.tour-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid #f0e2c8; border-radius: 12px; background: #fff; color: #5a4a3a; font-weight: 700; font-size: 14px; }
.tour-steps small { color: #8a7a5a; font-weight: 800; font-size: 12px; }
.tour-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f3e8d4; color: #8a7a5a; font-weight: 900; }
.tour-steps li.is-done { background: #f2f8ec; border-color: #cfe1c2; }
.tour-steps li.is-done .tour-check { background: #4fa55a; color: #fff; }
.tour-steps li.is-next { border-color: #e8b94a; box-shadow: 0 0 0 3px #ffe9a8; }
.tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tour-skip.is-sure { background: #fde6e0; color: #a23c2a; }

/* The community project. */
.project-head { display: flex; align-items: center; gap: 12px; }
.project-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 3px solid #cfe1c2; border-radius: 16px; background: #f2f8ec; font-size: 28px; }
.project-story { margin-top: 10px !important; }
.project-done-note { color: #3f6a4a !important; font-weight: 800; }
.project-rows { display: grid; gap: 8px; margin-top: 12px; }
.project-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid #dfe8ee; border-radius: 12px; background: #fff; }
.project-row-copy { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 4px 10px; }
.project-row-copy strong { display: inline-flex; align-items: center; gap: 4px; color: var(--hall-ink); font: 900 14px Nunito, system-ui, sans-serif; white-space: nowrap; }
.project-row-copy small { color: #6a7f88; font-weight: 800; white-space: nowrap; }
.project-item-art { display: inline-block; width: 30px; height: 19px; font-size: 18px; line-height: 19px; text-align: center; }
.project-actions { display: flex; gap: 6px; }
.project-actions .button, .project-actions .text-button { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.project-hint { margin-top: 10px !important; color: #7a8a8f; font-size: 12.5px !important; }

/* The events calendar. */
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.calendar-day { display: flex; flex-direction: column; gap: 3px; min-height: 86px; padding: 8px 6px; border: 2px solid #dfe8ee; border-radius: 12px; background: #fff; }
.calendar-day strong { color: var(--hall-ink); font: 900 13px Nunito, system-ui, sans-serif; }
.calendar-day > small { color: #8a9aa2; font-weight: 800; }
.calendar-day.is-today { border-color: #4a8fd0; box-shadow: 0 0 0 3px #d6e9f8; }
.calendar-day.has-event { background: #fffaf0; }
.calendar-event { padding: 2px 5px; border-radius: 6px; background: #fff0c9; color: #8a5a1f; font: 800 11px/1.25 Nunito, system-ui, sans-serif; cursor: help; }
.calendar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.calendar-list li { padding: 6px 0; border-bottom: 1px dashed #dfe8ee; }
.calendar-list strong { display: block; color: var(--hall-ink); font: 900 13.5px Nunito, system-ui, sans-serif; }
.calendar-list small { color: #6a7f88; font-size: 12px; line-height: 1.35; }
.calendar-list li.is-locked { opacity: .65; }

/* The Mossvale Times: a lead story, a row of little columns and the tips. */
.paper-lead { padding: 2px 4px 12px; border-bottom: 1px solid #c9bd9d; }
.paper-kicker { color: #8a4a2a; font: italic 700 12px Georgia, serif; letter-spacing: 1px; text-transform: uppercase; }
.paper-lead h4 { margin: 4px 0 6px; color: #1f1b16; font: 900 clamp(22px, 3vw, 30px)/1.1 Georgia, 'Times New Roman', serif; }
.paper-lead p { margin: 0 0 8px; color: #3f382c; font: 15px/1.5 Georgia, serif; }
.paper-lead p::first-letter { float: left; margin: 4px 6px 0 0; font-size: 40px; line-height: .8; font-weight: 900; }
.paper-go { padding: 6px 12px; border: 1px solid #2f2a22; border-radius: 3px; background: transparent; color: #2f2a22; font: italic 700 13px Georgia, serif; }
.paper-go:hover { background: #efe4c8; }
.paper-lead + .paper-section { margin-top: 12px; }
.paper-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.paper-item { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 4px 8px; padding: 6px 10px 10px; border: 0; border-right: 1px solid #c9bd9d; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.paper-item:last-child { border-right: 0; }
button.paper-item:hover { background: #efe4c8; }
.paper-item-icon { grid-row: span 2; font-size: 22px; filter: grayscale(.35) sepia(.3); }
.paper-item strong { color: #1f1b16; font: 900 14.5px/1.2 Georgia, serif; }
.paper-item-text { grid-column: 1 / -1; color: #3f382c; font-size: 13px; line-height: 1.45; }
.paper-item small { grid-column: 1 / -1; color: #8a4a2a; font: italic 700 12px Georgia, serif; }
.paper-item .paper-bar { grid-column: 1 / -1; height: 9px; border-color: #8a7d68; background: #fbf6e8; }
.paper-item .paper-bar i { background: #5a5040; }

@media (max-width: 760px) {
  .hall-top { grid-template-columns: 1fr; }
  .calendar-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .project-row { grid-template-columns: 1fr; }
  .project-row-copy { grid-template-columns: 1fr auto; }
  .project-row-copy .project-bar { grid-column: 1 / -1; grid-row: 2; }
  .tour-steps li { grid-template-columns: 26px minmax(0, 1fr); }
  .tour-steps small { grid-column: 2; }
}
@media (max-width: 650px) {
  .paper-item { border-right: 0; border-bottom: 1px solid #c9bd9d; }
}

/* Finished projects on the maps (drawn by tools/town-art.mjs, positioned in town-map.css). */
.town-map .map-decor { position: absolute; pointer-events: none; }
.town-map .map-decor svg { display: block; width: 100%; height: 100%; overflow: visible; }
.town-map .map-decor .night-art { opacity: var(--dark, 0); transition: opacity 2.5s linear; }
.town-map .map-decor:not([hidden]) { animation: decor-arrive .8s ease-out; }
@keyframes decor-arrive { from { opacity: 0; transform: translateY(-6px); } }