/* hall.css -- BLOOMSHIRE TOWN HALL (townhall.html), 2026-10-27. Its own look, drawn pixel by pixel in design/site/kit.py
   (landing/assets/town/kit/): the hall's dark oak floor, oak frames with brass studs, parchment notices, brass and oak
   buttons with a lip to press, signboards on cords, a wax seal for a Founder's papers. Every piece is shown at whole
   multiples (2x or 3x) with image-rendering: pixelated. The colours are the town's own: oak, parchment, brass, the Market
   Hall's brick, a wax red and a moss green. */

@font-face { font-family: 'Bloomshire Pixel'; src: url(/fonts/bloomshire-pixel.woff) format('woff'); font-display: swap; }

:root {
  --ink: #24160f;
  --floor: #1d130d;
  --oak-0: #3b2416; --oak-1: #55341f; --oak-2: #6d4428; --oak-3: #87573a; --oak-4: #a06f4a;
  --parch: #f4e6c4; --parch-2: #ead5ab; --parch-ink: #3b2416; --parch-soft: #7a5a3e;
  --brass: #f0c04a; --brass-hi: #ffe28a; --brass-lo: #a8681c;
  --cream: #f4e6c4; --soft: #c9ac86; --faint: #8f7356;
  --wax: #bb3a45; --moss: #97b862; --brick: #c25e3a;
  --pixel: 'Bloomshire Pixel', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --book: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --kit: '/assets/town/kit/';
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 90px; }
body.hall {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--cream); font: 17px/1.6 var(--book);
  background-color: var(--floor);
  background-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 196, 120, 0.07), rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%),
    url(/assets/town/kit/floor.png);
  background-size: auto, auto, 192px 96px;
  background-attachment: fixed, fixed, scroll;
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--brass-hi); }
::selection { background: rgba(240, 192, 74, 0.35); }
.kicker { margin: 0 0 6px; font: 12px/1 var(--pixel); letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); -webkit-font-smoothing: none; }

/* ------------------------------------------------------------ the kit's pieces */
.px-frame { border: 36px solid transparent; border-image: url(/assets/town/kit/oak-frame.png) 12 / 36px round; image-rendering: pixelated; background: #120b07; }
.px-frame--sm { border-width: 24px; border-image-width: 24px; }
.px-paper { border: 24px solid transparent; border-image: url(/assets/town/kit/parchment.png) 8 fill / 24px round; image-rendering: pixelated; color: var(--parch-ink); }
.px-paper a:not(.px-btn) { color: #8a3a1e; }
.px-inset { border: 12px solid transparent; border-image: url(/assets/town/kit/inset.png) 6 fill / 12px stretch; image-rendering: pixelated; }
.px-ribbon {
  display: inline-block; margin: -4px 0 14px; padding: 0 6px;
  border-style: solid; border-width: 6px 20px 10px; border-image: url(/assets/town/kit/ribbon.png) 3 10 5 10 fill / 6px 20px 10px stretch; image-rendering: pixelated;
  font: 15px/1.3 var(--pixel); color: var(--cream); text-shadow: 2px 2px 0 rgba(36, 22, 15, 0.9); -webkit-font-smoothing: none; letter-spacing: 0.02em;
}

.px-btn {
  --face: url(/assets/town/kit/brass.png); --down: url(/assets/town/kit/brass-down.png);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 8px 4px;
  border-style: solid; border-width: 12px; border-image: var(--face) 6 fill / 12px stretch; image-rendering: pixelated;
  font: 14px/1 var(--pixel); letter-spacing: 0.04em; color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; background: none;
  -webkit-font-smoothing: none; transition: filter 0.12s ease, transform 0.12s ease;
}
.px-btn:hover { filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); }
.px-btn:active, .px-btn.is-down { border-image-source: var(--down); padding: 4px 8px 0; transform: none; }
.px-btn:focus-visible { outline: 2px dashed var(--brass-hi); outline-offset: 4px; }
.px-btn[disabled], .px-btn.is-locked { filter: grayscale(0.85) brightness(0.7); cursor: not-allowed; transform: none; }
.px-btn--oak { --face: url(/assets/town/kit/oak.png); --down: url(/assets/town/kit/oak-down.png); color: var(--cream); }
.px-btn--moss { --face: url(/assets/town/kit/moss.png); color: var(--cream); }
.px-btn--wax { --face: url(/assets/town/kit/wax.png); color: var(--cream); }
.px-btn--big { min-height: 54px; border-width: 18px; border-image-width: 18px; padding: 0 12px 6px; font-size: 19px; }
.px-btn--big:active { padding: 6px 12px 0; }
.px-btn svg { image-rendering: auto; }

/* ------------------------------------------------------------ the lintel */
.lintel {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) clamp(16px, 3vw, 32px) 10px;
  background: #4a2d1b;
  box-shadow: inset 0 3px 0 var(--oak-3), inset 0 6px 0 #5b3822, inset 0 -3px 0 #2c1a10, 0 3px 0 var(--ink), 0 10px 0 rgba(0, 0, 0, 0.25);
}
.lintel__mark { display: block; width: 116px; filter: drop-shadow(2px 2px 0 var(--ink)); }
.lintel__mark img { display: block; width: 100%; height: auto; image-rendering: auto; }
.rooms { display: flex; justify-content: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-top: 2px; }
.rooms::-webkit-scrollbar { display: none; }
.room-tab {
  flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 4px 4px 0;
  border-style: solid; border-width: 12px; border-image: url(/assets/town/kit/tab.png) 6 fill / 12px stretch; image-rendering: pixelated;
  font: 13px/1 var(--pixel); letter-spacing: 0.04em; color: var(--cream); text-decoration: none; -webkit-font-smoothing: none;
  text-shadow: 1px 1px 0 var(--ink); transform-origin: 50% 0; transition: transform 0.15s ease;
}
.room-tab:hover { transform: rotate(-2deg); }
.room-tab[aria-current="page"] { border-image-source: url(/assets/town/kit/tab-on.png); color: var(--ink); text-shadow: none; }
.room-tab:focus-visible { outline: 2px dashed var(--brass-hi); outline-offset: 2px; }
.lintel__me { display: flex; align-items: center; gap: 10px; }
.sound-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 4px; background: rgba(0, 0, 0, 0.18); color: var(--faint); cursor: pointer; }
.sound-btn[aria-pressed="true"] { color: var(--brass-hi); }
.sound-btn:hover { color: var(--cream); }
.music-btn__off { display: none; }                                   /* (the music's switch: off, the note faded and struck through) */
.music-btn[aria-pressed="false"] .music-btn__off { display: inline; }
.music-btn[aria-pressed="false"] .music-btn__note { opacity: 0.5; }
.papers {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px 0 0;
  border: 12px solid transparent; border-image: url(/assets/town/kit/parchment.png) 8 fill / 12px round; image-rendering: pixelated; color: var(--parch-ink);
}
.papers__seal { width: 26px; height: 26px; margin: -6px 0 -6px -4px; image-rendering: pixelated; }
.papers__words { display: grid; line-height: 1.1; font: 12px/1.15 var(--pixel); -webkit-font-smoothing: none; }
.papers__words b { font-weight: normal; color: #8a3a1e; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.papers__out { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; background: none; color: var(--parch-soft); cursor: pointer; margin-right: -6px; }
.papers__out:hover { color: var(--wax); }

/* ------------------------------------------------------------ the rooms */
.hall-main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 28px) 64px; }
.room { animation: room-in 0.3s steps(6, end) both; }
@keyframes room-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.room__lead { margin: 0 0 18px; color: var(--soft); }
.room__note { margin: 16px 0 0; font-size: 15px; color: var(--faint); }
.paper-note { margin: 12px 0 0; font-size: 15px; color: var(--parch-soft); }

/* the square, framed */
.square { position: relative; margin: 0 0 22px; }
.square__view { display: block; width: 100%; height: clamp(300px, 50vw, 600px); image-rendering: pixelated; touch-action: pan-y; }
.square__drag { display: none; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); margin: 0; padding: 4px 8px; background: rgba(36, 22, 15, 0.78); font: 11px/1.2 var(--pixel); letter-spacing: 0.06em; color: var(--cream); pointer-events: none; -webkit-font-smoothing: none; white-space: nowrap; }
.square__signs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sq-sign {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto;
  min-height: 30px; padding: 3px 2px 0; border-style: solid; border-width: 10px; border-image: url(/assets/town/kit/tab.png) 6 fill / 10px stretch; image-rendering: pixelated;
  background: none; font: 12px/1 var(--pixel); color: var(--cream); text-shadow: 1px 1px 0 var(--ink); cursor: pointer; -webkit-font-smoothing: none;
  transform-origin: 50% 0; animation: sway 4.5s ease-in-out infinite;
}
.sq-sign:nth-child(2n) { animation-delay: -1.8s; }
.sq-sign--below { animation-name: sway-below; }
@keyframes sway-below { 0%, 100% { transform: translate(-50%, 0) rotate(-1.5deg); } 50% { transform: translate(-50%, 0) rotate(1.5deg); } }
.sq-sign:hover, .sq-sign.is-lit, .sq-sign:focus-visible { border-image-source: url(/assets/town/kit/tab-on.png); color: var(--ink); text-shadow: none; outline: none; }
@keyframes sway { 0%, 100% { transform: translate(-50%, -100%) rotate(-1.5deg); } 50% { transform: translate(-50%, -100%) rotate(1.5deg); } }
.square__hour { position: absolute; right: 44px; bottom: 40px; margin: 0; padding: 4px 8px; background: rgba(36, 22, 15, 0.72); font: 11px/1.2 var(--pixel); letter-spacing: 0.08em; color: var(--soft); text-transform: uppercase; -webkit-font-smoothing: none; pointer-events: none; }

/* the desk under the square */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-bottom: 18px; }
.welcome__title { margin: 0 0 10px; font: 30px/1.15 var(--pixel); color: var(--parch-ink); -webkit-font-smoothing: none; }
.welcome__lead { max-width: 60ch; margin: 0 0 18px; }
.gate { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gate__why { margin: 14px 0 0; padding: 10px 12px; border-left: 4px solid var(--wax); background: rgba(187, 58, 69, 0.08); color: #6e1822; font-size: 16px; }
.season { position: relative; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.season__bell { width: 39px; height: 39px; margin: 0 auto 6px; image-rendering: pixelated; transform-origin: 50% 10%; }
.season.is-open .season__bell { animation: ring 2.4s ease-in-out infinite; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 89% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
.season__state { margin: 2px 0 4px; font: 22px/1.2 var(--pixel); -webkit-font-smoothing: none; }
.season.is-open .season__state { color: #35502a; }
.season__note, .season__when { margin: 0; font-size: 15px; color: var(--parch-soft); }

/* the valley's numbers: brass plaques with their numbers set in */
.plaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; padding: 0; list-style: none; }
.plaque { display: grid; gap: 8px; justify-items: start; }
.plaque__n { display: block; width: 100%; padding: 6px 4px 2px; font: 24px/1 var(--pixel); color: var(--brass); font-variant-numeric: tabular-nums; -webkit-font-smoothing: none; text-shadow: 2px 2px 0 var(--ink); }
.plaque__k { font-size: 15px; color: var(--soft); padding-left: 2px; }

.valley__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; counter-reset: region; }
.valley__list li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; padding: 10px 0; border-bottom: 2px dotted rgba(122, 90, 62, 0.4); counter-increment: region; }
.valley__list li::before { content: counter(region); grid-row: span 2; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; background: var(--oak-2); color: var(--parch); font: 13px/1 var(--pixel); box-shadow: inset 0 2px 0 var(--oak-3), inset 0 -2px 0 var(--oak-0), 0 0 0 2px var(--ink); -webkit-font-smoothing: none; }
.valley__list b { font: 14px/1.3 var(--pixel); font-weight: normal; -webkit-font-smoothing: none; }
.valley__list span { font-size: 15px; color: var(--parch-soft); }

/* ------------------------------------------------------------ a room's head: its building, its name, what it is for */
.room-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 22px; }
.room-head__bldg { --bh: 182px; width: 250px; display: grid; place-items: end center; height: var(--bh); background: #2e3b22; }
.room-head__bldg { overflow: hidden; }
.room-head__bldg img { width: auto; height: auto; max-width: 100%; max-height: calc(var(--bh) - 48px); image-rendering: pixelated; }
.room-head__bldg--board { background: #9b6b3c url(/assets/town/kit/cork.png); background-size: 96px; place-items: center; }
.room-head__bldg--board img { width: 28px; height: 36px; }
.room-head__title { margin: 0 0 6px; font: 34px/1.1 var(--pixel); color: var(--cream); text-shadow: 3px 3px 0 var(--ink); -webkit-font-smoothing: none; }
.room-head__lead { margin: 0; max-width: 62ch; color: var(--soft); }
.needs-wallet { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.needs-wallet p { margin: 0; flex: 1 1 260px; }

/* holdings: the farmers in their frames, the ladder, the ledger */
.farmers { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }
.farmers.is-empty { display: block; }
.farmer { margin: 0; }
.farmer__pic { display: block; border: 24px solid transparent; border-image: url(/assets/town/kit/oak-frame.png) 12 / 24px round; image-rendering: pixelated; background: #2a1c12; }
.farmer__pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.farmer figcaption { margin-top: 8px; font: 13px/1.35 var(--pixel); color: var(--cream); -webkit-font-smoothing: none; }
.farmer__title { display: block; color: var(--soft); font: 14px/1.3 var(--book); }
.rarity { display: block; width: fit-content; margin-top: 6px; padding: 3px 7px 2px; font: 11px/1 var(--pixel); letter-spacing: 0.06em; color: var(--ink); -webkit-font-smoothing: none; box-shadow: 0 0 0 2px var(--ink); }
.rarity--Common { background: #d6c7aa; } .rarity--Uncommon { background: #97b862; } .rarity--Rare { background: #7aa7d8; }
.rarity--Epic { background: #b48ad8; } .rarity--Legendary { background: #f0c04a; } .rarity--Mythic { background: #e98ab6; }
.empty { margin-bottom: 20px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ladder { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ladder li { display: grid; grid-template-columns: 22px 28px 1fr auto; gap: 8px; align-items: center; font-size: 16px; color: var(--parch-soft); }
.ladder li::before { content: ''; width: 22px; height: 22px; background: url(/assets/town/kit/box.png) 0 0 / 22px 22px; image-rendering: pixelated; }
.ladder li.is-on { color: var(--parch-ink); }
.ladder li.is-on::before { background-image: url(/assets/town/kit/box-on.png); }
.ladder__n { font: 13px/1 var(--pixel); text-align: right; -webkit-font-smoothing: none; }
.ladder__more { font: 11px/1 var(--pixel); color: var(--parch-soft); white-space: nowrap; -webkit-font-smoothing: none; }
.ladder li.is-on .ladder__more { color: #35502a; }
.stats { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 16px; }
.stats dt, .stats dd { margin: 0; padding: 8px 0; border-bottom: 2px dotted rgba(122, 90, 62, 0.4); }
.stats dt { color: var(--parch-soft); padding-right: 16px; }
.stats dd { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--pixel); font-size: 14px; -webkit-font-smoothing: none; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 14px; margin-top: 14px; font-size: 15px; }
.skills b { font: 13px/1 var(--pixel); color: #8a3a1e; -webkit-font-smoothing: none; }

/* the treasury: a vault for each share, its coins stacked to its size */
.vaults { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.vault { display: flex; flex-direction: column; }
.vault__pile { position: relative; height: 190px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 0 10px; background: linear-gradient(#120b07, #2a1b12); }
.vault__stack { display: flex; flex-direction: column-reverse; align-items: center; }
.vault__stack i { display: block; width: 48px; height: 12px; margin-top: -3px; background: url(/assets/town/kit/coin-side.png) 0 0 / 48px 12px; image-rendering: pixelated; animation: drop 0.4s steps(4, end) both; }
.vault__stack i.top { height: 21px; margin-top: -12px; background-image: url(/assets/town/kit/coin-top.png); background-size: 48px 21px; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
.vault__who { margin: 12px 0 2px; font: 14px/1.3 var(--pixel); color: var(--cream); -webkit-font-smoothing: none; }
.vault__n { margin: 0; font: 20px/1.2 var(--pixel); color: var(--brass); text-shadow: 2px 2px 0 var(--ink); -webkit-font-smoothing: none; }
.vault__what { margin: 6px 0 0; font-size: 15px; color: var(--soft); }
.my-fp h2 { margin-top: 0; }

/* the board: notes pinned on cork */
.corkboard { background: #9b6b3c url(/assets/town/kit/cork.png); background-size: 96px; }
.notes { margin: 0; padding: 4px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 14px; }
.note {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 16px 12px 12px;
  background: var(--parch); color: var(--parch-ink); box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 rgba(36, 22, 15, 0.35); transform: rotate(var(--tilt, 0deg));
}
.note::before { content: ''; position: absolute; top: -6px; left: 50%; width: 14px; height: 18px; margin-left: -7px; background: url(/assets/town/kit/pin.png) 0 0 / 14px 18px; image-rendering: pixelated; }
.note__place { grid-row: span 3; font: 18px/1 var(--pixel); color: var(--parch-soft); min-width: 2.2em; text-align: center; -webkit-font-smoothing: none; }
.note__medal { grid-row: span 3; width: 28px; height: 40px; image-rendering: pixelated; }
.note__name { font: 14px/1.25 var(--pixel); overflow-wrap: anywhere; -webkit-font-smoothing: none; }
.note__fp { font-size: 15px; color: var(--parch-soft); font-variant-numeric: tabular-nums; }
.note__prize { justify-self: start; margin-top: 2px; font: 10px/1 var(--pixel); letter-spacing: 0.04em; padding: 3px 5px 2px; -webkit-font-smoothing: none; }
.note__prize--usdg { background: var(--brass); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.note__prize--land { background: #c9e0a4; color: #22331a; box-shadow: 0 0 0 2px var(--ink); }
.note.is-you { background: #fff1c9; box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--wax), 4px 4px 0 rgba(36, 22, 15, 0.35); }
.notes__empty { grid-column: 1 / -1; padding: 30px 16px; text-align: center; background: var(--parch); color: var(--parch-soft); box-shadow: 0 0 0 2px var(--ink); }
.view-switch { display: flex; gap: 8px; margin: 0 0 12px; }
.view-switch .mk-tab { min-width: 0; }
.ledger-board .ledger-board__place { width: 70px; font: 15px/1 var(--pixel); color: var(--parch-soft); -webkit-font-smoothing: none; }
.ledger-board .note__medal { display: block; width: 21px; height: 30px; }
.ledger-board .ledger-board__name { font: 14px/1.3 var(--pixel); -webkit-font-smoothing: none; overflow-wrap: break-word; }
.ledger-board .note__prize { white-space: nowrap; }
.ledger-board .ledger-board__under { display: none; }
.ledger-board td { vertical-align: middle; }
.ledger-board td.num { font: 14px/1 var(--pixel); -webkit-font-smoothing: none; }
.ledger-board tr.is-you td { background: rgba(240, 192, 74, 0.32); }
.ledger-board tr.is-you td:first-child { box-shadow: inset 4px 0 0 var(--wax); }
.board-you { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--wax); background: rgba(240, 192, 74, 0.08); color: var(--brass-hi); }

/* ------------------------------------------------------------ the marketplace (js/townhall/market.js) */
.awning { height: 30px; margin: -6px 0 18px; background: url(/assets/town/kit/awning.png) repeat-x 0 0 / 48px 30px; image-rendering: pixelated; }
.mk-closed { margin-bottom: 18px; }
.mk-closed h2 { margin: 0 0 6px; font: 17px/1.2 var(--pixel); -webkit-font-smoothing: none; }
.mk-closed p { margin: 0; }
.mk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mk-tab { min-height: 34px; padding: 4px 4px 0; border-style: solid; border-width: 12px; border-image: url(/assets/town/kit/tab.png) 6 fill / 12px stretch; image-rendering: pixelated; background: none;
  font: 13px/1 var(--pixel); color: var(--cream); text-shadow: 1px 1px 0 var(--ink); cursor: pointer; -webkit-font-smoothing: none; }
.mk-tab.is-on { border-image-source: url(/assets/town/kit/tab-on.png); color: var(--ink); text-shadow: none; }
.mk-status { min-height: 1.5em; margin: 0 0 10px; font-size: 16px; color: var(--moss); }
.mk-status.is-bad { color: #ff9b8a; }
.mk-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mk-input { min-height: 40px; padding: 0 12px; border: 0; background: var(--parch); color: var(--parch-ink); font: 16px var(--book); box-shadow: inset 0 3px 0 #dcc193, 0 0 0 3px var(--ink); }
.mk-input:focus { outline: 3px solid var(--brass); outline-offset: 2px; }
.mk-filter .mk-input[type="search"] { flex: 1 1 220px; min-width: 0; }
.mk-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.mk-kind { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px 4px; border: 0; cursor: pointer; background: var(--oak-2); color: var(--cream);
  font: 12px/1 var(--pixel); letter-spacing: 0.03em; -webkit-font-smoothing: none; box-shadow: inset 0 2px 0 var(--oak-3), inset 0 -2px 0 var(--oak-0), 0 0 0 2px var(--ink); }
.mk-kind b { font-weight: normal; padding: 2px 5px 1px; background: rgba(0, 0, 0, 0.28); color: var(--brass-hi); }
.mk-kind:hover { background: var(--oak-3); }
.mk-kind.is-on { background: var(--brass); color: var(--ink); box-shadow: inset 0 2px 0 var(--brass-hi), inset 0 -2px 0 var(--brass-lo), 0 0 0 2px var(--ink); }
.mk-kind.is-on b { background: rgba(36, 22, 15, 0.18); color: var(--ink); }
.mk-kind.is-none { opacity: 0.55; }
.mk-kind:focus-visible { outline: 2px dashed var(--brass-hi); outline-offset: 3px; }
.mk-input--n { width: 6em; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 16px; }
.mk-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 14px 14px;
  background: var(--parch); color: var(--parch-ink); box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.mk-card::before { content: ''; position: absolute; top: 9px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--floor); box-shadow: 0 0 0 2px var(--ink); }
.mk-card__kind { position: absolute; top: 6px; right: 10px; font: 10px/1 var(--pixel); letter-spacing: 0.06em; text-transform: uppercase; color: var(--parch-soft); -webkit-font-smoothing: none; }
.mk-card__top { display: flex; gap: 12px; align-items: center; min-width: 0; margin-top: 6px; }
.mk-card__top > div { min-width: 0; }
.mk-card__icon { flex: none; width: 48px; height: 48px; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); }
.mk-card__name { margin: 0; font: 15px/1.3 var(--pixel); -webkit-font-smoothing: none; overflow-wrap: anywhere; }
.mk-card__by { margin: 2px 0 0; font-size: 14px; color: var(--parch-soft); }
.mk-card__price { margin: 0; padding: 6px 8px 4px; align-self: flex-start; font: 15px/1.2 var(--pixel); color: var(--ink); background: var(--brass); box-shadow: 0 0 0 2px var(--ink); -webkit-font-smoothing: none; }
.mk-card__act { margin-top: auto; }
.mk-card__held { font-size: 14px; color: var(--parch-soft); }
.mk-buy { display: grid; gap: 8px; }
.mk-buy__total { margin: 0; font-size: 15px; }
.mk-buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mk-buy__n { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--parch-soft); }
.mk-link { padding: 6px 4px; border: 0; background: none; color: var(--parch-soft); font: 13px/1 var(--pixel); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; -webkit-font-smoothing: none; }
.mk-link:hover:not([disabled]) { color: var(--wax); }
.mk-link[disabled] { opacity: 0.6; cursor: default; text-decoration: none; }
.mk-have { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.mk-have__row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: rgba(122, 90, 62, 0.1); color: var(--parch-ink); font: 15px/1.3 var(--book); text-align: left; cursor: pointer; }
.mk-have__row img { image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); }
.mk-have__row:hover { background: rgba(122, 90, 62, 0.2); }
.mk-have__row.is-on { background: rgba(240, 192, 74, 0.35); box-shadow: inset 0 0 0 2px var(--ink); }
.mk-have__n { font: 13px/1 var(--pixel); color: var(--parch-soft); -webkit-font-smoothing: none; }
.mk-form { display: grid; gap: 12px; }
.mk-form__row { display: grid; gap: 6px; font-size: 15px; color: var(--parch-soft); }
.mk-form__label { font-size: 15px; color: var(--parch-soft); }
.mk-coins { display: flex; gap: 8px; margin-top: -6px; }
.mk-coin { min-width: 80px; min-height: 34px; border-style: solid; border-width: 12px; border-image: url(/assets/town/kit/oak.png) 6 fill / 12px stretch; image-rendering: pixelated; background: none; padding: 0 0 4px;
  font: 13px/1 var(--pixel); color: var(--cream); cursor: pointer; -webkit-font-smoothing: none; }
.mk-coin.is-on { border-image-source: url(/assets/town/kit/brass.png); color: var(--ink); }
.mk-mine { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 2px dotted rgba(122, 90, 62, 0.4); font-size: 15px; }
.mk-mine:last-child { border-bottom: 0; }
.mk-mine img { image-rendering: pixelated; box-shadow: 0 0 0 2px var(--ink); }
.mk-mine__price { font: 14px/1 var(--pixel); color: #8a3a1e; white-space: nowrap; -webkit-font-smoothing: none; }
.panel__title { margin: 0 0 12px; font: 15px/1.2 var(--pixel); -webkit-font-smoothing: none; }
.panel__note { margin: 12px 0 0; font-size: 15px; color: var(--parch-soft); }
.history { width: 100%; border-collapse: collapse; font-size: 15px; }
.history th { text-align: left; padding: 8px 6px; font: 11px/1 var(--pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--parch-soft); border-bottom: 2px solid var(--parch-ink); -webkit-font-smoothing: none; }
.history td { padding: 8px 6px; border-bottom: 2px dotted rgba(122, 90, 62, 0.4); }
.history .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------ the foot */
.hall-foot { padding: 26px 16px 34px; text-align: center; color: var(--faint); font-size: 14px; background: #160e09; box-shadow: inset 0 3px 0 var(--ink); }
.hall-foot__links { display: flex; justify-content: center; gap: 18px; margin-bottom: 6px; }
.hall-foot a { color: var(--soft); font: 13px/1 var(--pixel); text-decoration: none; -webkit-font-smoothing: none; }
.hall-foot a:hover { color: var(--brass-hi); }
.hall-foot p { margin: 0; }

/* ------------------------------------------------------------ narrower */
@media (max-width: 900px) {
  .lintel { grid-template-columns: auto 1fr; row-gap: 8px; }
  .rooms { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .lintel__me { justify-self: end; }
  .desk, .split { grid-template-columns: 1fr; }
  .plaques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vaults { grid-template-columns: 1fr; }
  .vault__pile { height: 140px; }
}
@media (max-width: 640px) {
  .ledger-board th:nth-child(4), .ledger-board td:nth-child(4) { display: none; }
  .ledger-board .ledger-board__under { display: table; margin-top: 5px; }
  .ledger-board .ledger-board__place { width: 46px; }
  .px-frame { border-width: 24px; border-image-width: 24px; }
  .square__hour { display: none; }
  .square__drag { display: block; }
  .square__view { touch-action: none; }
  .room-head { grid-template-columns: 1fr; gap: 14px; }
  .room-head__bldg { --bh: 120px; width: 150px; }
  .room-head__title { font-size: 28px; }
  .welcome__title { font-size: 24px; }
  .valley__list { grid-template-columns: 1fr; }
  .lintel__mark { width: 92px; }
  .sound-btn { display: none; }
  .music-btn { display: inline-grid; }                               /* (the music plays on a phone too, so its switch stays) */
  .mk-mine { grid-template-columns: 32px minmax(0, 1fr); }
  .mk-mine__price, .mk-mine .mk-link { grid-column: 2; justify-self: start; }
}
@media (max-width: 400px) {
  .px-paper { border-width: 16px; border-image-width: 16px; }
  .plaque__n { font-size: 19px; }
  [data-play-top] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .room, .sq-sign, .season.is-open .season__bell, .vault__stack i { animation: none; }
}