/* Doughnut Town (js/town.js): a scrolling street of shops, with the rescued doughnuts walking the pavement. */
.town{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:radial-gradient(1200px 500px at 50% 0%,#3a2030,#120c14 70%);color:#f7eef2;font-family:Space,'Trebuchet MS',sans-serif}
.town[hidden]{display:none}
html.town-on{overflow:hidden}
.town-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 22px 10px}
.town-head small{font:12px Mono,monospace;letter-spacing:3px;color:#ff8fb1}
.town-head h2{margin:4px 0 2px;font-size:clamp(22px,3.4vw,34px);letter-spacing:-.02em}
.town-head p{margin:0;color:#cbbac2;font-size:14px}
.town-close{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff10;color:#fff;font-size:18px;cursor:pointer}
.town-close:hover{border-color:#ff8fb1}
.town-street{position:relative;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  background:linear-gradient(180deg,transparent 0 calc(100% - 150px),#2a2028 calc(100% - 150px)),url('assets/kit/pavement.png') repeat-x left bottom/auto 150px}
.town-row{display:flex;gap:14px;height:calc(100% - 120px);padding:0 22px;width:max-content}
.town-shop{position:relative;flex:none;height:100%;aspect-ratio:3/4;max-height:620px;border-radius:14px 14px 4px 4px;overflow:hidden;box-shadow:0 18px 40px #000a}
.town-art{position:absolute;inset:0;background-size:cover;background-position:center}
.town-shop.locked .town-art{filter:grayscale(1) brightness(.45) blur(1px)}
.town-shop.open .town-art{animation:town-glow 6s ease-in-out infinite alternate}
.town-plate{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(0deg,#0b0810ee,transparent)}
.town-plate b{display:block;font-size:18px}.town-plate span{font-size:13px;color:#cbbac2}
.town-sign{position:absolute;top:25.5%;left:50%;transform:translateX(-50%);min-width:58%;max-width:74%;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 12px;border-radius:6px;text-align:center;text-decoration:none;color:#2d0818;cursor:pointer;
  background:linear-gradient(180deg,#ffe9b8,#f2c77a);border:3px solid #6b3b1f;box-shadow:0 3px 0 #3a1f10,0 6px 16px #0008;font-family:inherit}
.town-sign b{font-size:17px;line-height:1.1;word-break:break-word}.town-sign small{font:10px Mono,monospace;letter-spacing:1px;opacity:.75}
.town-sign img{max-height:34px;max-width:120px;object-fit:contain}
.town-sign.ad{background:linear-gradient(180deg,#fff,var(--ad,#ffd1dc))}
.town-sign.free{background:linear-gradient(180deg,#fff6fa,#ffd1dc);border-style:dashed}
.town-sign.locked{cursor:default;background:#2a2028;color:#cbbac2;border-color:#444;box-shadow:none}
.town-sign:not(.locked):hover{transform:translateX(-50%) translateY(-2px) rotate(-1deg)}
.town-tape{position:absolute;top:48%;left:-10%;right:-10%;transform:rotate(-8deg);padding:8px;text-align:center;font:700 14px Mono,monospace;letter-spacing:3px;
  color:#111;background:repeating-linear-gradient(45deg,#ffd23f 0 18px,#111 18px 36px);box-shadow:0 4px 12px #0008}
.town-tape{background:repeating-linear-gradient(45deg,#ffd23f 0 18px,#ffcc00 18px 36px)}
.town-walk{position:absolute;left:0;bottom:0;height:170px;pointer-events:none}
.town-foot{margin:0;padding:10px 22px 14px;font-size:13px;color:#cbbac2;text-align:center}.town-foot a{color:#ff8fb1}
.town-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);z-index:9100;padding:12px 18px;border-radius:12px;background:#16101c;border:1px solid #ff8fb1;
  color:#fff;font:600 15px Space,sans-serif;box-shadow:0 10px 30px #000a;cursor:pointer;transition:transform .35s}
.town-toast.show{transform:translate(-50%,0)}
.card-town .hc-art{background:url('assets/town/shop-bakery-v2.webp') center/cover}
@keyframes town-glow{to{filter:brightness(1.12) saturate(1.1)}}
@media (max-width:640px){.town-row{gap:10px;padding:0 14px}.town-head{padding:14px 14px 8px}.town-sign b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.town-shop.open .town-art{animation:none}}

/* Biggest towns board (top right of the town) and the results-screen note */
.town-head{position:relative}
.town-board{margin-left:auto;min-width:220px;max-width:280px;padding:10px 14px;border-radius:12px;background:#0b0810cc;border:1px solid #ffffff22;font-size:13px}
.town-board:empty{display:none}
.town-board small{font:11px Mono,monospace;letter-spacing:2px;color:#88e7c0}
.town-board ol{list-style:none;margin:6px 0 4px;padding:0}
.town-board li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;padding:2px 0}
.town-board li span{color:#8d7f88}.town-board li em{font-style:normal;color:#ffd46b}.town-board .tb-empty{display:block;color:#8d7f88}
.tb-me{margin:4px 0 0;color:#cbbac2;font-size:12px}.tb-me a{color:#ff8fb1}
.town-note{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:10px 14px;border-radius:12px;border:1px solid #ff8fb155;
  background:linear-gradient(135deg,#2a1b33,#1a1220);color:#f7eef2;text-align:left;font:inherit;cursor:pointer}
.town-note:hover{border-color:#ff8fb1}
.town-note .tn-icon{font-size:26px}.town-note b{display:block;font-size:14px}.town-note small{display:block;color:#cbbac2;font-size:12px;margin-top:2px}
.town-note .tn-go{margin-left:auto;white-space:nowrap;font-weight:700;color:#ff8fb1;font-size:13px}
@media (max-width:640px){.town-head{flex-wrap:wrap}.town-board{order:3;max-width:none;width:100%;padding:8px 12px}.town-board li:nth-child(n+4){display:none}}
.town-board .tb-house b i{font:700 9px Mono,monospace;letter-spacing:1px;font-style:normal;color:#1b0f14;background:#88e7c0;padding:1px 5px;border-radius:4px;vertical-align:2px}