/* BRIDGE Town: the interface in Rubik (fonts/rubik-latin-var.woff2, the BRIDGE product font), over a pixel-art world */
:root {
  --ink: #2d2433; --paper: #fbfaf5; --line: #d9d4c7; --muted: #6b6276;
  --hp-g: #3fbf5f; --hp-y: #f2c230; --hp-r: #e2483d; --accent: #3466e8; --gold: #ffe066;
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --px: var(--font);   /* the old name, kept so every rule that used the pixel face now reads Rubik */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #edf2ef; overflow: hidden; }
body { font: 400 17px/1.4 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.screen { position: fixed; inset: 0; display: grid; place-items: center; }
#game { image-rendering: pixelated; image-rendering: crisp-edges; display: block; touch-action: none; }
.overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: inherit; font-size: .8em; padding: 0 5px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; }

/* the GBC box: white, thick dark border, a light inner line */
.box {
  background: var(--paper); border: 4px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--line), 0 4px 0 rgba(45,36,51,.25);
}
.nametag {
  position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 13px/1 var(--px); letter-spacing: .02em;
  padding: 2px 6px 3px; background: rgba(251,250,245,.92); border: 2px solid var(--ink); border-radius: 4px; color: var(--ink);
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.nametag.stale { background: #d9d6d0; color: #8a8296; border-color: #8a8296; opacity: .7; filter: grayscale(1); }

.hud { position: fixed; top: 14px; display: flex; gap: 10px; z-index: 5; }
.hud-left { left: 14px; } .hud-right { right: 14px; }
.box.mini { padding: 8px 14px; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.box.mini .sep { color: var(--muted); }
.box.lamp { background: #ece9e1; color: var(--muted); }
.lamp .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hp-r); display: inline-block; box-shadow: 0 0 0 2px var(--ink); animation: blink 1.4s steps(2) infinite; }
.hint { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 15px; color: #fff; text-shadow: 0 2px 0 rgba(45,36,51,.5); z-index: 4; white-space: nowrap; pointer-events: none; }   /* words only: it fades after 12 s and must never take the click meant for a door under it (the Gemini home's way out on phones) */
.hint kbd { color: var(--ink); text-shadow: none; }

/* dialogue */
.dialog {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(920px, calc(100vw - 28px)); max-width: calc(100vw - 16px);
  display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 20px 18px; z-index: 6; max-height: 58vh; overflow: auto;
}
.portrait { width: 104px; height: 104px; object-fit: contain; image-rendering: pixelated; background: #e9f4dc; border: 3px solid var(--ink); border-radius: 4px; }
.portrait[src=""] { display: none; }
.dlg-name { font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.dlg-name small { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.dlg-text { font-size: 21px; min-height: 2.6em; white-space: pre-wrap; }
.dlg-extra { margin-top: 8px; font-size: 16px; color: var(--muted); }
.dlg-extra ul { margin: 4px 0 0; padding-left: 20px; }
.dlg-extra code { font: 14px ui-monospace, Menlo, monospace; background: #efece2; padding: 1px 5px; border-radius: 3px; color: var(--ink); }
.dlg-choices { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.dlg-choices button, .menu :is(button, a) { background: none; border: 0; padding: 4px 4px 4px 22px; position: relative; text-align: left; font-size: 20px; }
.dlg-choices button::before, .menu :is(button, a)::before { content: "▶"; position: absolute; left: 2px; opacity: 0; }
.dlg-choices button:hover::before, .dlg-choices button:focus::before, .menu :is(button, a):hover::before, .menu :is(button, a):focus::before { opacity: 1; }
.dlg-choices button:focus, .menu :is(button, a):focus { outline: none; }
.dlg-choices textarea { width: 100%; font: 18px var(--px); padding: 8px; border: 3px solid var(--ink); border-radius: 4px; background: #fff; }
.more { position: absolute; right: 16px; bottom: 8px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* start menu */
.menu a { font: inherit; color: inherit; text-decoration: none; }
.menu { position: fixed; right: 14px; top: 64px; display: grid; padding: 12px 14px; z-index: 7; min-width: 190px; }
.menu :is(button, a)::before { opacity: 0; } .menu :is(button, a) { font-size: 21px; padding-left: 4px; }

/* panels */
.panel {
  position: fixed; inset: 60px max(14px, calc(50vw - 520px)) 18px; z-index: 8; padding: 18px 22px; overflow: auto;
}
.panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel h2 { margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: .05em; }
.x { background: none; border: 3px solid var(--ink); border-radius: 4px; width: 36px; height: 36px; }

/* TEAM: the party screen */
.party { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mon { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; }
.mon.hot { background: #fff6cc; }
.mon.stale { opacity: .45; filter: grayscale(1); }
.mon img { width: 48px; height: 48px; image-rendering: pixelated; }
.mon .nm { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-weight: 700; font-size: 18px; }   /* a two-line name keeps its status tag one line tall */
.mon .lv { font-size: 14px; color: var(--muted); }
.mon .task { font-size: 15px; margin-top: 4px; }
.st { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 3px; color: #fff; letter-spacing: .05em; }
.st.WORK { background: #3fa35a; } .st.HELP { background: #e2483d; } .st.ZZZ { background: #8a8296; } .st.TIRED { background: #d08a1d; } .st.OFF { background: #b9b2c2; } .st.DONE { background: #3466e8; }
.hp { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; align-items: center; font-size: 14px; margin-top: 4px; }
.hp .bar { height: 9px; border: 2px solid var(--ink); border-radius: 5px; background: #e9e4d8; overflow: hidden; }
.hp .bar i { display: block; height: 100%; background: var(--hp-g); }
.hp .bar i.y { background: var(--hp-y); } .hp .bar i.r { background: var(--hp-r); } .hp .bar i.u { background: repeating-linear-gradient(90deg,#cfc8d8 0 6px,#e9e4d8 6px 12px); }
.wallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 4px 0 16px; }
.wallet .w { border: 3px solid var(--ink); border-radius: 8px; padding: 8px 10px; background: #fff; font-size: 16px; }

.list { display: grid; gap: 8px; }
.item { border: 3px solid var(--ink); border-radius: 8px; padding: 10px 12px; background: #fff; }
.item .k { font-size: 14px; color: var(--muted); }
.item .t { font-size: 19px; }
.item .row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.pbtn { font-size: 17px; padding: 4px 12px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; }
.pbtn.yes { background: var(--accent); border-color: var(--accent); color: #fff; }
.empty { color: var(--muted); font-size: 18px; }
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); padding: 10px 16px; z-index: 9; font-size: 18px; }

/* v2: flavor lines, hero art, the fast-travel map */
.dlg-extra .flavor { margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.dlg-extra .hero-art { display: block; margin-top: 8px; max-width: 100%; height: auto; image-rendering: pixelated; border: 3px solid var(--ink); border-radius: 4px; }
.places { gap: 6px; }
.minimap { display: block; width: min(100%, 480px); height: auto; margin: 0 auto 10px; image-rendering: pixelated; border: 3px solid var(--ink); border-radius: 6px; }
.places .district { margin-top: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.places button.place { display: grid; gap: 2px; text-align: left; border: 3px solid var(--ink); border-radius: 8px; padding: 8px 12px; background: #fff; }
.places button.place b { font-size: 19px; }
.places button.place span { font-size: 15px; color: var(--muted); }
.places button.place:focus, .places button.place:hover { outline: none; background: #fff6d6; border-color: var(--accent); }

/* phone width: the dialogue and HUD stay inside the viewport */
@media (max-width: 480px) {
  .dialog { grid-template-columns: 1fr; padding: 12px 14px 14px; bottom: 8px; }
  .portrait { width: 64px; height: 64px; }
  .dlg-text { font-size: 18px; }
  .hud { top: 8px; gap: 6px; } .hud-left { left: 8px; right: 96px; flex-wrap: wrap; } .hud-right { right: 8px; }
  .hud-right kbd { display: none; }
  .box.mini { padding: 6px 10px; font-size: 15px; }
  .hint { white-space: normal; width: calc(100vw - 16px); text-align: center; }
  .panel { inset: 52px 8px 8px; padding: 14px; }
  .party { grid-template-columns: 1fr; }
}
[hidden] { display: none !important; }

/* Public build (omarali.xyz): demo chip, touch-aware hint */
.box.demo { background: #FFD200; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.hint .t-only { display: none; }
@media (hover: none) and (pointer: coarse) { .hint .k-only { display: none; } .hint .t-only { display: inline; } }

/* ---------------- demos: the mail run and Ask Bridget (demos.js) ---------------- */
.mon img { object-fit: contain; background: #e9f4dc; border-radius: 4px; }
.demo-panel {
  position: fixed; z-index: 7; top: 64px; right: 14px; bottom: 14px; width: min(400px, calc(100vw - 28px));
  display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); padding: 12px 14px; gap: 8px;
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.demo-head h2 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: .05em; }
.demo-panel .x { width: 44px; height: 44px; flex: none; font-size: 18px; }
.demo-strip:empty { display: none; }
.demo-strip ol { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.demo-strip li { flex: none; font-size: 14px; padding: 3px 8px; border: 2px solid var(--line); border-radius: 12px; color: var(--muted); white-space: nowrap; background: #fff; }
.demo-strip li b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 2px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 12px; }
.demo-strip li.on { border-color: var(--accent); color: var(--ink); background: #eef2ff; }
.demo-strip li.on b { background: var(--accent); color: #fff; }
.demo-strip li.done { color: var(--ink); }
.demo-strip li.done b { background: var(--hp-g); color: #fff; }
.demo-body { overflow: auto; min-height: 0; font-size: 16px; overscroll-behavior: contain; }
.demo-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.dbtn { min-height: 44px; min-width: 44px; padding: 6px 14px; font-size: 17px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; }
.dbtn.yes { background: var(--accent); border-color: var(--accent); color: #fff; }
.dbtn:disabled { opacity: .4; cursor: default; }
.dbtn:focus-visible, .pick:focus-visible, .demo-panel .x:focus-visible, .own-form textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.demo-body .say { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; margin-bottom: 10px; }
.demo-body .say .face { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; background: #e9f4dc; border: 2px solid var(--ink); border-radius: 4px; }
.demo-body .say .nm { font-weight: 700; font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.demo-body .say p { margin: 2px 0 0; font-size: 17px; line-height: 1.35; }
.demo-body .fine { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.demo-body .wait { color: var(--muted); }
.dots::after { content: "..."; display: inline-block; width: 1.4em; overflow: hidden; vertical-align: bottom; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { from { width: 0; } to { width: 1.4em; } }
.demo-body .k { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* mail board */
.mailboard .counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
.mailboard .counts span { border: 2px solid var(--ink); border-radius: 6px; padding: 2px 6px; font-size: 13px; background: #fff; }
.mailboard .counts b { display: block; font-size: 20px; }
.tray { margin-top: 8px; }
.tray-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.tray ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tray .empty { color: var(--muted); font-size: 14px; }
.mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: start; border: 2px solid var(--ink); border-radius: 6px; padding: 4px 6px; background: #fff; font-size: 14px; }
.tray.filed .mrow { background: #f3f1ea; border-color: #b9b2c2; color: #5d566a; }
.mrow .acct { font-size: 11px; padding: 1px 5px; border-radius: 3px; background: #e9e4d8; color: var(--ink); align-self: center; }
.mrow .mw small { display: block; color: var(--muted); font-size: 13px; }
.mrow .chip { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: #e9e4d8; white-space: nowrap; align-self: center; }
.mrow.c-draft .chip { background: var(--hp-g); color: #fff; }
.mrow.c-ask .chip { background: var(--gold); }
.mrow.c-reading .chip { background: #dfe6ff; }
.mrow.is-new { animation: landed .9s ease-out; }
@keyframes landed { from { background: #fff6cc; transform: translateX(-6px); } to { transform: none; } }
.beats { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 14px; }
.beats li { border: 2px solid var(--ink); border-radius: 6px; padding: 3px 6px; background: #fff; }
.beats span { color: var(--hp-r); }
.phone-msg { border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; background: #fff; margin-bottom: 8px; }
.phone-msg p { margin: 2px 0 0; font-size: 15px; }

/* swarm */
.picks { display: grid; gap: 8px; }
.pick { display: grid; gap: 2px; text-align: left; min-height: 44px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; }
.pick b { font-size: 18px; }
.pick span { font-size: 14px; color: var(--muted); }
.pick:hover { background: #fff6d6; }
.pick.own { background: #eef2ff; border-style: dashed; }
.own-form label { font-weight: 700; display: block; margin-bottom: 4px; }
.own-form textarea { width: 100%; font: 17px var(--px); padding: 8px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; resize: vertical; }
.own-form .row { display: flex; justify-content: flex-end; }
.own-form .count { font-size: 13px; color: var(--muted); }
.request { border: 2px solid var(--line); border-radius: 8px; padding: 6px 10px; background: #fff; margin-bottom: 8px; }
.request p { margin: 2px 0 0; font-size: 16px; }
.stage { border-top: 2px solid var(--line); padding-top: 6px; margin-top: 6px; }
.stage h3 { margin: 0 0 4px; font-size: 16px; }
.stage h3 b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; margin-right: 4px; }
.stage.done h3 b { background: var(--hp-g); }
.stage .intro { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.stage .mini { margin: 0; padding-left: 16px; font-size: 13px; color: var(--muted); }
.lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lane { display: grid; grid-template-columns: 1fr; gap: 3px; border: 2px solid var(--ink); border-radius: 6px; padding: 5px 7px; background: #fff; }
.lane.s-back { border-color: var(--hp-r); background: #fff1ef; }
.lane.s-redo { border-color: var(--hp-y); }
.lane .task { font-size: 14px; }
.lane .res { font-size: 13px; color: var(--muted); }
.lane.s-done .res { color: var(--ink); }
.who { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.who img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; background: #e9f4dc; border-radius: 3px; }
.who small { color: var(--muted); }
.bar, .tb { display: block; height: 7px; border: 2px solid var(--ink); border-radius: 4px; background: #e9e4d8; overflow: hidden; }
.bar i, .tb i { display: block; height: 100%; background: var(--hp-g); }
.lane.s-back .bar i { background: var(--hp-r); }
.fan { display: flex; flex-wrap: wrap; gap: 2px; }
.fan i { width: 7px; height: 7px; background: #e9e4d8; border: 1px solid #b9b2c2; }
.fan i.on { background: var(--hp-g); border-color: #2e8a46; }
.critiques { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.critiques li { display: grid; gap: 2px; border-left: 4px solid var(--accent); padding: 2px 8px; background: #fff; font-size: 14px; }
.letter { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 12px; }
.tally { margin-top: 8px; display: grid; gap: 4px; }
.trow { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 13px; }
.trow .rev { grid-column: 1 / -1; color: var(--muted); font-size: 12px; margin: -2px 0 2px 26px; }
.verdict, .check { margin-top: 8px; border: 2px solid var(--ink); border-radius: 8px; padding: 6px 8px; background: #fff; }
.verdict p, .check p { margin: 4px 0 0; font-size: 15px; }
.verdict { background: #eef2ff; border-color: var(--accent); }
.verdict .dissent { font-size: 14px; color: var(--muted); }
.check.back { border-color: var(--hp-r); background: #fff1ef; }
.check.pass { border-color: var(--hp-g); }
.score { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; margin-top: 6px; }
.score .tb { height: 12px; }
.rounds { margin: 6px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 3px; }
.rounds li.on { color: var(--muted); }

/* pattern chips (content/patterns.js) */
.pchips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.pchip { min-height: 32px; padding: 3px 9px; font-size: 13px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; line-height: 1.1; }
.pchip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--muted); vertical-align: 1px; }
.pchip.src-bea::before, .pchip.src-mars::before { background: #d97757; }
.pchip.src-oai::before { background: #10a37f; }
.pchip.src-karpathy::before { background: var(--accent); }
.pchip.src-omar::before { background: var(--gold); box-shadow: 0 0 0 1px var(--ink); }
.pchip[aria-expanded="true"] { background: #fff6d6; }
.pchip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pnote { margin: 0 0 8px; padding: 6px 8px; border-left: 4px solid var(--gold); background: #fffbe8; font-size: 14px; }
.pnote .src { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pnote a { color: var(--accent); }
/* hill climb */
.climb { margin-top: 6px; }
.climb .cols { display: flex; align-items: flex-end; gap: 10px; padding: 4px 2px 0; }
.climb .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; font-size: 12px; height: 150px; }
.climb .col i { display: block; margin: 0 14%; border-bottom: 2px solid var(--ink) !important; background: var(--hp-g); border: 2px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; transition: height .5s steps(6); }
.climb .col:first-child i { background: #cfc8d8; }
.climb .col .v { font-weight: 700; font-size: 14px; }
.climb .col .lb { color: var(--muted); padding-top: 2px; }
.fixes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.fixes li { padding: 2px 6px; border-radius: 4px; background: #eaf7ee; }
.fixes li.rev { background: #fff1ef; }
.fixes li b { margin-right: 4px; }
.stopnote { margin: 6px 0 0; font-size: 14px; padding: 4px 8px; border-left: 4px solid var(--muted); }
@media (prefers-reduced-motion: reduce) { .climb .col i { transition: none; } }
/* the HUD and hint step aside while a demo runs */
body.demo-on .hint { display: none !important; }

@media (max-width: 760px) {
  .demo-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(52vh, 460px); padding: 10px 12px; }
  .demo-head h2 { font-size: 17px; }
  .demo-body .say { grid-template-columns: 44px 1fr; }
  .demo-body .say .face { width: 44px; height: 44px; }
  .demo-body .say p { font-size: 16px; }
  .dbtn { font-size: 16px; padding: 6px 10px; }
}
@media (max-width: 480px) {
  .nametag { white-space: nowrap; max-width: 62vw; font-size: 10px; line-height: 1.1; padding: 1px 4px 2px; border-width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mrow.is-new { animation: none; background: #fff6cc; }
  .dots::after { animation: none; width: 1.4em; }
  .lamp .dot, .more { animation: none; }
}
.demo-head { grid-row: 1; } .demo-strip { grid-row: 2; } .demo-body { grid-row: 3; } .demo-foot { grid-row: 4; align-self: end; }
@media (pointer: coarse) { .pchip { min-height: 44px; } }

/* a tag that would cover a nearer one fades back (engine placeTags) */
.nametag.is-buried { opacity: .12; }
.share-note { margin: 8px 0 0; font-size: 15px; min-height: 1.2em; }
.share-url { width: 100%; margin-top: 4px; font: 14px ui-monospace, Menlo, monospace; padding: 6px; border: 2px solid var(--ink); border-radius: 4px; }

/* the cost meter at the end of a swarm (content/cost.js): an estimate, labeled as one */
.demo-body .cost { margin: 10px 0 0; padding: 8px 10px; border: 2px dashed var(--line); border-radius: 8px; background: #fff; }
.demo-body .cost p { margin: 0; font-size: 15px; }
.demo-body .cost b { display: block; font-size: 13px; color: var(--muted); }
.demo-body .cost .fine { margin-top: 4px; }
.demo-body .cost a { color: inherit; }

/* ================= v2: the painted Workshop's interface (ui.js createV2; only with ?town=v2) ==========   Crisp HTML in the site's type on light paper, copied from the mock (tools/plates/ui_mock.py has the sizes). */
.town-v2 {
  --ui: var(--font);
  --ui-display: var(--font);
  --ui-paper: #f6f6f2; --ui-ink: #17171b; --ui-ink-soft: #4a4a52; --ui-night: #1c1e2c;
  --ui-focus: #3466e8; --ui-shadow: 0 4px 14px rgba(23, 23, 27, .2);
}
/* the HUD boxes take the bar's look, so the top row reads as one family */
.town-v2 .hud .box.mini {
  font: 600 16px/1 var(--ui); -webkit-font-smoothing: antialiased; background: var(--ui-paper); color: var(--ui-ink);
  border: 2.5px solid var(--ui-ink); border-radius: 12px; box-shadow: var(--ui-shadow); min-height: 48px; padding: 0 14px;
}
.town-v2 .hud .box.mini kbd { font: 600 12px/1 var(--ui); padding: 3px 5px; border-width: 1.5px; border-radius: 5px; }
/* the card, the menu and the panels in the bar's family: light paper, one ink border, Rubik, plain buttons (no game arrows) */
.town-v2 .box.dialog, .town-v2 .box.menu, .town-v2 .box.panel {
  background: var(--ui-paper); color: var(--ui-ink); border: 2.5px solid var(--ui-ink); border-radius: 14px; box-shadow: var(--ui-shadow);
}
.town-v2 .portrait { border: 2px solid var(--ui-ink); border-radius: 10px; }
.town-v2 .dlg-name { font: 600 15px/1.2 var(--ui); letter-spacing: .04em; }
.town-v2 .dlg-name small { font-weight: 500; font-size: 14px; color: var(--ui-ink-soft); letter-spacing: 0; }
.town-v2 .dlg-text { font: 400 19px/1.4 var(--ui); min-height: 0; }
.town-v2 .dlg-extra { font: 400 15px/1.4 var(--ui); color: var(--ui-ink-soft); }
.town-v2 .dlg-choices { gap: 8px; margin-top: 12px; }
.town-v2 .dlg-choices button, .town-v2 .menu :is(button, a) { font: 600 16px/1.2 var(--ui); border-radius: 9px; }
.town-v2 .dlg-choices button { min-height: 40px; padding: 8px 14px; background: #fff; border: 2px solid var(--ui-ink); }
.town-v2 .dlg-choices button:first-child { background: var(--ui-night); color: #f8f8f4; border-color: var(--ui-night); }
.town-v2 .dlg-choices button::before, .town-v2 .menu :is(button, a)::before { content: none; }
.town-v2 .dlg-choices button:hover { box-shadow: 0 2px 0 var(--ui-ink); }
.town-v2 .dlg-choices button:focus-visible, .town-v2 .menu :is(button, a):focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.town-v2 .dlg-choices textarea { font: 400 16px/1.4 var(--ui); border: 2px solid var(--ui-ink); border-radius: 9px; }
.town-v2 .more { display: none; }
.town-v2 .menu { top: 72px; padding: 8px; gap: 2px; min-width: 210px; }
.town-v2 .menu :is(button, a) { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.town-v2 .menu :is(button, a):hover, .town-v2 .menu :is(button, a):focus-visible { background: #e9e8e1; }
.town-v2 .menu kbd { font: 600 12px/1 var(--ui); padding: 3px 5px; border: 1.5px solid var(--ui-ink); border-radius: 5px; background: #fff; }
.town-v2 .panel h2 { font: 600 20px/1.2 var(--ui); letter-spacing: .02em; text-transform: none; }
@media (max-width: 600px), (max-height: 499.98px) { .town-v2 .dlg-text { font-size: 17px; } .town-v2 .dlg-choices button { font-size: 15px; } }
.town-v2 .hud .box.mini:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.town-v2.tb2-on #hud-left { display: none; }

/* top bar: the run on the left, cost, clock and queue on the right (the MENU button keeps its corner) */
.tb2 {
  position: fixed; top: 14px; left: 14px; right: calc(24px + var(--menu-w, 110px)); z-index: 6;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none;
  font: 500 17px/1 var(--ui); color: var(--ui-ink); -webkit-font-smoothing: antialiased;
}
.tb2-run, .tb2-chip {
  display: flex; align-items: center; height: 48px; background: var(--ui-paper);
  border: 2.5px solid var(--ui-ink); border-radius: 12px; box-shadow: var(--ui-shadow); pointer-events: auto;
}
.tb2-run { gap: 12px; padding: 0 18px 0 14px; min-width: 0; }
.tb2-run svg { width: 28px; height: 28px; flex: none; color: #3c4678; }
.tb2-name { font: 600 19px/1 var(--ui-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tb2-sep { flex: none; width: 1.5px; height: 24px; background: rgba(23, 23, 27, .28); }
.tb2-req { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb2-right { display: flex; gap: 8px; flex: none; }
.tb2-chip { gap: 8px; padding: 0 16px 0 12px; font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb2-chip svg { width: 24px; height: 24px; flex: none; color: #37416e; }
.tb2-short { display: none; }

/* name tags: dark rounded pills; cast members' tags are buttons (Enter opens the agent panel) */
.town-v2 .nametag {
  font: 600 13px/1 var(--ui); letter-spacing: .01em; -webkit-font-smoothing: antialiased;
  padding: 4px 9px 5px; background: var(--ui-night); color: #f8f8f4;
  border: 1.5px solid rgba(248, 248, 244, .75); border-radius: 7px; box-shadow: 0 2px 5px rgba(20, 16, 30, .35);
}
.town-v2 .nametag.is-cast { pointer-events: auto; cursor: pointer; }
/* on the map a building's door and plaque win over a person's name tag (the tag stays visible; a click on the person's body still selects them) */
body.city-map .town-v2 .nametag, body.city-map .nametag, .town-v2.city-map .nametag { pointer-events: none; }
.town-v2 .nametag.is-cast:hover { background: #2b2e45; }
.town-v2 .nametag:focus { outline: none; }
.town-v2 .nametag:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ui-night); }
.town-v2 .nametag.stale { background: #6b6d7a; color: #e4e4ea; border-color: rgba(248, 248, 244, .4); filter: none; }

/* status chips over heads */
.chips2 { position: absolute; left: 0; top: 0; }
.chip2 {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  font: 600 13px/1 var(--ui); color: #fff; -webkit-font-smoothing: antialiased;
  padding: 5px 10px 6px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 6px rgba(20, 16, 30, .32);
}
.chip2.k-idle { background: #5c3caa; font-size: 12px; padding: 3px 8px 4px; }
.chip2.k-done { background: #236edc; }
.chip2.k-sentback { background: #d23b3b; }
.chip2.k-waiting { background: #f2a516; color: var(--ui-night); }
.chip2.k-working { background: #182846; border-color: #5a8cf0; padding: 5px 10px 6px; min-width: 104px; }
.chip2-bar { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: #2c4170; overflow: hidden; }
.chip2-bar i { display: block; height: 100%; border-radius: 3px; background: #46c86e; transition: width .5s ease-out; }
.chip2.inline { position: static; display: inline-block; vertical-align: middle; font-size: 12px; padding: 3px 8px 4px; box-shadow: none; border: 0; }

/* the mailbox: the label and two real buttons under the glow */
.mb2 { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: auto; font-family: var(--ui); }
.mb2-chip {
  font: 600 14px/1 var(--ui); color: var(--ui-night); background: #ffeca0; border: 2px solid #f2a516; border-radius: 8px;
  padding: 6px 12px 7px; box-shadow: 0 2px 6px rgba(20, 16, 30, .3); white-space: nowrap; -webkit-font-smoothing: antialiased;
}
.mb2-row { display: flex; gap: 8px; }
@media (pointer: coarse) { .mb2-btn { min-height: 44px; } }   /* a full touch target on phones and tablets */
.mb2-btn {
  min-height: 36px; min-width: 84px; padding: 0 14px; font: 600 15px/1 var(--ui); color: #fff; -webkit-font-smoothing: antialiased;
  border: 2px solid #f8f8f4; border-radius: 9px; box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 4px 12px rgba(20, 16, 30, .3);
}
.mb2-btn.ok { background: #228c44; } .mb2-btn.no { background: #d63840; }
.mb2-btn:hover:not(:disabled) { filter: brightness(1.08); }
.mb2-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
.mb2-btn:focus { outline: none; }
.mb2-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--ui-night); }
.mb2-btn:disabled { opacity: .55; cursor: default; }

/* agent panel: bottom left on desktop, docked along the bottom on phones */
.ap2 {
  position: fixed; left: 14px; bottom: 14px; z-index: 8; width: min(450px, calc(100vw - 28px));
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 48px 12px 12px;
  background: var(--ui-paper); color: var(--ui-ink); border: 2.5px solid var(--ui-ink); border-radius: 14px;
  box-shadow: 0 8px 26px rgba(23, 23, 27, .28); font: 500 15px/1.35 var(--ui); -webkit-font-smoothing: antialiased;
}
.ap2:focus { outline: none; }
.ap2:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.ap2-face {
  width: 112px; height: 112px; border-radius: 9px; overflow: hidden; border: 2px solid var(--ui-ink);
  background: color-mix(in srgb, var(--fam, #78a0d2) 24%, #e4ebf5); display: grid; place-items: end center;
}
.ap2-face img { width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: pixelated; } /* the avatar is a square: the whole head, never cropped */
.ap2-body { min-width: 0; align-self: center; }
.ap2-name { margin: 0 0 4px; font: 600 22px/1.1 var(--ui-display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap2-model { margin: 0; font-size: 14px; color: var(--ui-ink-soft); display: flex; align-items: center; gap: 7px; }
.ap2-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fam, #2a2833); box-shadow: 0 0 0 2px rgba(23, 23, 27, .15); }
.ap2-job { margin: 6px 0 0; font-weight: 600; }
.ap2-task { margin: 3px 0 0; overflow-wrap: anywhere; }
.ap2-task b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fam, var(--ui-ink-soft)); margin-right: 3px; }
.ap2-intro { margin: 6px 0 0; overflow-wrap: anywhere; }
.ap2-acts { grid-column: 1 / -1; }
.ap2-acts button { font: 600 14px/1.2 var(--ui); cursor: pointer; }
.ap2-go { margin-top: 8px; min-height: 40px; padding: 8px 14px; background: var(--fam, var(--ui-ink)); color: #fff; border: 2px solid var(--ui-ink); border-radius: 9px; }
.ap2-again { margin-top: 6px; padding: 4px 0; background: none; border: 0; color: var(--ui-ink-soft); text-decoration: underline; font-weight: 500; }
.ap2-go:focus-visible, .ap2-again:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.ap2-x {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center;
  font: 600 15px/1 var(--ui); background: #fff; border: 2px solid var(--ui-ink); border-radius: 8px;
}
.ap2-x:focus { outline: none; }
.ap2-x:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .ap2:not([hidden]) { animation: ap2-in .18s ease-out; }
  .tb2:not([hidden]) { animation: tb2-in .2s ease-out; }
}
@keyframes ap2-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes tb2-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chip2-bar i { transition: none; } }

@media (max-width: 600px), (max-height: 499.98px) {
  .town-v2 .hud .box.mini { min-height: 36px; font-size: 13px; padding: 0 10px; border-width: 2px; border-radius: 9px; }
  .tb2 { top: 8px; left: 8px; right: calc(14px + var(--menu-w, 70px)); gap: 5px; font-size: 13px; }
  .tb2-run, .tb2-chip { height: 36px; border-width: 2px; border-radius: 9px; }
  .tb2-run { gap: 6px; padding: 0 9px 0 7px; flex: 1 1 auto; }
  .tb2-run svg { width: 18px; height: 18px; }
  .tb2-name, .tb2-sep { display: none; }
  .tb2-right { gap: 4px; }
  .tb2-chip { gap: 4px; padding: 0 7px 0 5px; font-size: 13px; }
  .tb2-chip svg { width: 15px; height: 15px; }
  .tb2-chip.q .tb2-v { display: none; } .tb2-chip.q .tb2-short { display: inline; }
  .town-v2 .nametag { font-size: 11px; padding: 3px 6px 4px; border-radius: 6px; }
  .chip2 { font-size: 11px; padding: 3px 7px 4px; border-radius: 6px; }
  .chip2.k-idle { font-size: 10px; padding: 2px 6px 3px; }
  .chip2.k-working { min-width: 84px; padding: 3px 7px 4px; }
  .chip2-bar { height: 4px; margin-top: 3px; }
  .mb2-chip { font-size: 13px; }
  .mb2-btn { min-width: 92px; font-size: 15px; }
  .ap2 { left: 8px; right: 8px; bottom: 8px; width: auto; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 10px 48px 10px 10px; border-width: 2px; }
  .ap2-face { width: 72px; height: 72px; }
  .ap2-name { font-size: 18px; }
  .ap2-model, .ap2 { font-size: 14px; }
}
.town-v2 .hint { font: 500 14px/1.3 var(--ui); -webkit-font-smoothing: antialiased; color: var(--ui-ink); text-shadow: none;
  background: rgba(246, 246, 242, .92); padding: 6px 12px; border-radius: 10px; }   /* readable on the painting and on the paper alike */
.town-v2 .hint kbd { font: 600 11px/1 var(--ui); padding: 2px 5px; border-width: 1.5px; }

/* v2: a tag fades while someone walks behind it (ui.js) */
body.town-v2 .nametag.is-faded { opacity: .22; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { body.town-v2 .nametag.is-faded { transition: none; } }
body.town-v2 .mb2.is-chip-only .mb2-row { display: none; }

/* ================= ?city=next: the painted city (ui.js createCityUI) =================
   The top line with the city selector, plaques on the doors, and one button between the living map and walking.
   Same family as the Workshop's bar: light paper, ink border, the site's type. */
.city-next, .town-v2 {   /* the painted rooms' hotspot plaques share the city's plaque */
  --cy-ui: var(--ui, var(--font));
  --cy-display: var(--ui-display, var(--font));
  --cy-paper: #f6f6f2; --cy-ink: #17171b; --cy-soft: #4a4a52; --cy-night: #1c1e2c; --cy-focus: #3466e8;
}
.city-next.city-on #hud-left { display: none; }
.city-next.city-map .hint { display: none; }
.citybar {
  position: fixed; top: 14px; left: 14px; right: calc(24px + var(--menu-w, 110px)); z-index: 6;
  display: flex; align-items: flex-start; gap: 8px; pointer-events: none;
  font: 500 16px/1.3 var(--cy-ui); color: var(--cy-ink); -webkit-font-smoothing: antialiased;
}
.citybar[hidden] { display: none; }
.cb-sel { position: relative; flex: none; pointer-events: auto; }
.cb-city, .cb-line {
  display: flex; align-items: center; min-height: 48px; margin: 0; background: var(--cy-paper);
  border: 2.5px solid var(--cy-ink); border-radius: 12px; box-shadow: 0 4px 14px rgba(23, 23, 27, .2);
}
.cb-city { gap: 10px; padding: 0 14px 0 16px; font: 600 17px/1 var(--cy-display); letter-spacing: .05em; text-transform: uppercase; }
.cb-city svg { width: 12px; height: 8px; flex: none; }
.cb-city[aria-expanded="true"] svg { transform: rotate(180deg); }
.cb-line { padding: 10px 16px; min-width: 0; pointer-events: auto; }
/* "Omar is here" on the selector itself when the city shown is the one he is in (a green dot alone on phones) */
.cb-here { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; margin-left: 2px; border-left: 1.5px solid #c9c8c0;
  font: 500 13px/1 var(--cy-ui); letter-spacing: 0; text-transform: none; color: #1f7a3c; white-space: nowrap; }
.cb-here[hidden] { display: none; }
.cb-here i { width: 8px; height: 8px; border-radius: 50%; background: #23a04a; box-shadow: 0 0 0 2px rgba(35, 160, 74, .22); }
/* off the city map (Basecamp, a room) only the selector shows; the place and clock box sits right of it */
.city-next:not(.city-on) .cb-line { display: none; }
.city-next:not(.city-on) #hud-left { left: calc(14px + var(--cb-sel-w, 150px) + 8px); }
.cb-list {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px; display: grid; gap: 2px;
  background: var(--cy-paper); border: 2.5px solid var(--cy-ink); border-radius: 12px; box-shadow: 0 8px 22px rgba(23, 23, 27, .25);
}
.cb-list[hidden] { display: none; }
.cb-list button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; min-height: 44px;
  font: 600 16px/1.2 var(--cy-ui); text-align: left; background: none; border: 0; border-radius: 8px;
}
.cb-list button[aria-checked="true"] { background: #e6e6df; }
.cb-list button:hover { background: #ecece6; }
.cb-list small { font-weight: 500; font-size: 13px; color: #1f7a3c; white-space: nowrap; }
.cb-list b { font-weight: 600; }
.cb-city:focus, .cb-list button:focus, .citywalk:focus, .cityspot:focus, .plaque button:focus { outline: none; }
.cb-city:focus-visible, .cb-list button:focus-visible, .citywalk:focus-visible, .plaque button:focus-visible { outline: 3px solid var(--cy-focus); outline-offset: 2px; }

/* walk around / see the map */
/* the bottom bar: Walk around (or See the map) and, on phones, Whole town, side by side with a gap */
.citybottom {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; align-items: center;
  max-width: calc(100vw - 16px); touch-action: none;
}
.citybottom[hidden] { display: none; }
.citybottom button { touch-action: none; white-space: nowrap; flex: none; }
.citywalk {
  min-height: 48px; padding: 0 22px;
  font: 600 17px/1 var(--cy-ui); color: #f8f8f4; background: var(--cy-night); -webkit-font-smoothing: antialiased;
  border: 2px solid #f8f8f4; border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 6px 16px rgba(20, 16, 30, .3);
}
.citywalk[hidden] { display: none; }
.citywalk:hover { background: #2b2e45; }
.city-next.city-on:not(.city-map) .hint { bottom: 80px; }

/* door areas: invisible targets on the painting (outlined only on the placeholder plate) */
.cityspots { position: absolute; left: 0; top: 0; }
.cityspots[hidden] { display: none; }
.cityspot {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; padding: 0; pointer-events: auto; touch-action: none;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.cityspot:focus-visible, .cityspot.is-open { box-shadow: 0 0 0 3px #ffd23f, 0 0 0 6px var(--cy-night); }
.cityspot.is-placeholder::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--cy-paper); border: 2px dashed var(--cy-ink); }
.cityspot.is-placeholder span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 600 11px/1 var(--cy-ui); color: var(--cy-ink); background: rgba(246, 246, 242, .85); padding: 2px 5px; border-radius: 4px;
}

/* the plaque: a place's name, one line, Go inside */
.plaque {
  position: fixed; left: 0; top: 0; z-index: 7; pointer-events: auto; width: min(320px, calc(100vw - 16px)); padding: 14px 44px 14px 16px;
  background: var(--cy-paper); color: var(--cy-ink); border: 2.5px solid var(--cy-ink); border-radius: 14px;
  box-shadow: 0 8px 26px rgba(23, 23, 27, .28); font: 500 15px/1.4 var(--cy-ui); -webkit-font-smoothing: antialiased;
}
.plaque[hidden] { display: none; }
.pq-name { margin: 0 0 4px; font: 600 19px/1.15 var(--cy-display); letter-spacing: .04em; text-transform: uppercase; }
.pq-line { margin: 0; color: var(--cy-soft); }
.pq-line:empty { display: none; }
.pq-row { margin-top: 12px; display: flex; gap: 8px; }
.pq-row[hidden] { display: none; }
.pq-go, .pq-act {
  min-height: 40px; padding: 0 16px; font: 600 15px/1 var(--cy-ui); color: #fff; background: #228c44;
  border: 2px solid #f8f8f4; border-radius: 9px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
.pq-go:hover, .pq-act:hover { filter: brightness(1.08); }
.pq-x {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center;
  font: 600 14px/1 var(--cy-ui); background: #fff; border: 2px solid var(--cy-ink); border-radius: 8px;
}
.plaque.is-docked { left: 8px; right: 8px; top: auto; bottom: 78px; width: auto; transform: none; }
.plaque.is-docked.is-docked-top { top: 0; bottom: auto; }   /* ui.js sets translateY to just under the bar */
@media (pointer: coarse) { .pq-go, .pq-act, .pq-x { min-height: 44px; } .pq-x { width: 44px; } .plaque { padding-right: 56px; } }
@keyframes pq-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .plaque:not([hidden]) { animation: pq-in .16s ease-out; } }

@media (max-width: 599.98px), (max-height: 499.98px) {   /* phones: the same cutoff as citymode.PHONE_W (innerWidth < 600) */
  .citybar { top: 8px; left: 8px; right: calc(14px + var(--menu-w, 70px)); gap: 5px; font-size: 13px; }
  .cb-city, .cb-line { min-height: 36px; border-width: 2px; border-radius: 9px; }
  .cb-city { padding: 0 9px 0 10px; font-size: 13px; gap: 6px; }
  .cb-line { padding: 6px 10px; line-height: 1.25; }
  .citybar { flex-wrap: wrap; }                       /* the line takes its own row under the selector, never squeezed */
  .cb-line { flex: 1 1 100%; overflow-wrap: anywhere; }
  .cb-list { min-width: 200px; }
  .cb-here { padding-left: 7px; gap: 0; }
  .cb-here-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .city-next:not(.city-on) #hud-left { top: var(--room-hud-top, 64px); left: 8px; right: 8px; }
  .city-next:not(.city-on) #hud-left .box.mini { min-height: 36px; border-width: 2px; border-radius: 9px; font-size: 13px; padding: 0 10px; }
  .city-next:not(.city-on) #hud-left .sep, .city-next:not(.city-on) #hud-clock { display: none; }
  .citybottom { bottom: 14px; gap: 8px; }
  .citywalk { min-height: 44px; font-size: 16px; padding: 0 18px; }
}
/* the paper around the painting is light: the hint reads in ink there */
.city-next.city-on .hint { color: var(--cy-ink); text-shadow: none; }

/* phones, on the living map: "Whole town" (the fitted view) and back */
.citywhole {
  min-height: 44px; padding: 0 14px;
  font: 600 14px/1 var(--cy-ui); color: var(--cy-ink); background: var(--cy-paper); -webkit-font-smoothing: antialiased;
  border: 2px solid var(--cy-ink); border-radius: 10px; box-shadow: 0 3px 10px rgba(23, 23, 27, .2);
}
.citywhole[hidden] { display: none; }
.citywhole:focus { outline: none; }
.citywhole:focus-visible { outline: 3px solid var(--cy-focus); outline-offset: 2px; }
.city-next.city-map.city-drag #game { cursor: grabbing; }

/* ================= hotspots (hotspots.js): things to click in a painted room, and every room's way out =================
   Quiet until asked: nothing shows until the pointer is over one (or it has keyboard focus), then a soft outline and
   a small label. The mouse is read on the canvas (people stay clickable through a hotspot), so the buttons only take
   the keyboard. A click or Enter opens the same plaque the city uses. */
.hslayer { position: absolute; left: 0; top: 0; }
.hslayer[hidden] { display: none; }
.hs {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; pointer-events: none; background: none; border: 0;
  border-radius: 12px; box-shadow: none; transition: box-shadow .14s ease-out, background-color .14s ease-out;
}
.hs:focus { outline: none; }
.hs.is-hover, .hs:focus-visible, .hs.is-open {
  background: rgba(255, 250, 235, .1);
  box-shadow: 0 0 0 2px rgba(255, 252, 240, .92), 0 0 0 5px rgba(28, 30, 44, .28), 0 0 22px 4px rgba(255, 236, 190, .35);
}
.hs .hs-label {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 4px 9px 5px; border-radius: 7px; background: var(--cy-paper, #f6f6f2); color: var(--cy-ink, #17171b);
  border: 2px solid var(--cy-ink, #17171b); box-shadow: 0 3px 10px rgba(23, 23, 27, .22);
  font: 600 13px/1.1 var(--cy-ui, sans-serif); -webkit-font-smoothing: antialiased; opacity: 0; transition: opacity .14s ease-out;
}
.hs.is-hover .hs-label, .hs:focus-visible .hs-label { opacity: 1; pointer-events: auto; }
.hs.is-open .hs-label { opacity: 0; }
/* a hotspot on the top edge of the painting puts its label under it */
.hs.is-top .hs-label { bottom: auto; top: calc(100% + 8px); }
body.hs-pointer #game { cursor: pointer; }
.pq-list { margin: 8px 0 0; padding: 0 0 0 18px; color: var(--cy-soft); }
.pq-list[hidden] { display: none; }
.pq-list li + li { margin-top: 4px; }
.pq-live { margin: 6px 0 0; white-space: pre-line; }   /* the engine house: one line per machine */
.pq-live:empty { display: none; }
.plaque.is-docked.is-docked-room { bottom: 12px; }
/* ?city=next: a hotspot's own rectangle on the map (the engine house windows, the commons, the family homes) */
.cityspot.is-rect { left: 0; top: 0; border-radius: 10px; transition: box-shadow .14s ease-out; }
.cityspot.is-rect:hover { box-shadow: 0 0 0 2px rgba(255, 252, 240, .92), 0 0 0 5px rgba(28, 30, 44, .28); }
@media (prefers-reduced-motion: reduce) { .hs, .hs .hs-label, .cityspot.is-rect, .cityspot.is-door { transition: none; } }
/* a place on the map is its painted door (T-097): the target sits on the door with a small margin, the cursor is the hand only over it,
   and hovering it (or its open card) lights the door softly, in the same cream ring the rooms' hotspots use, plus a warm glow */
.cityspot.is-door { left: 0; top: 0; border-radius: 12px 12px 5px 5px; transition: box-shadow .14s ease-out, background-color .14s ease-out; }
@media (hover: hover) { .cityspot.is-door:hover, .cityspot.is-door.is-open { box-shadow: 0 0 0 2px rgba(255, 252, 240, .92), 0 0 0 5px rgba(28, 30, 44, .28), 0 0 22px 4px rgba(255, 214, 120, .30), inset 0 0 16px 2px rgba(255, 232, 160, .30); background-color: rgba(255, 244, 205, .10); } }
.cityspot.is-door.is-open:focus-visible { box-shadow: 0 0 0 3px #ffd23f, 0 0 0 6px var(--cy-night); }

/* Basecamp: Bridget's dialog is a sheet on phones, real text over the painting everywhere */
/* the pixel font's "fi" ligature draws an "A" ("fire" reads "Are"): off, everywhere, since Basecamp is about the fire */
body { font-variant-ligatures: none; }
.dialog.bc { max-height: min(60vh, 520px); overflow: auto; }
.dialog.bc textarea { font-size: 16px; min-height: 64px; }   /* 16px: iPhones don't zoom the page on focus */
.bc-count { font-size: 13px; color: var(--muted); text-align: right; margin-top: 2px; }
.bc-link { background: none; border: 0; padding: 0; margin: 8px 12px 0 0; font: inherit; font-size: 15px; color: var(--accent); text-decoration: underline; cursor: pointer; }
.bc-toggle { display: inline-block; margin-top: 8px; font-size: 15px; color: var(--muted); }
.bc-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; margin-top: 10px; padding: 10px; border: 3px solid var(--line); border-radius: 6px; background: #fbfaf5; color: var(--ink); }
.bc-wheel { position: relative; width: 88px; height: 88px; border: 2px solid var(--ink); border-radius: 50%; background: linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.bc-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #c8361a; }
.bc-points { margin: 0 0 4px; font-weight: 600; }
.bc-conf { font-weight: 400; color: var(--muted); }
.bc-card blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--accent); font-size: 15px; }
.bc-card blockquote small { display: block; color: var(--muted); font-size: 13px; }
.bc-thin { color: var(--muted); font-size: 14px; }
.bc-example .bc-card { grid-template-columns: 1fr; }
.bc-bench { display: grid; gap: 8px; margin-top: 8px; font-size: 15px; }
.bc-bench input[type="text"], .bc-bench input:not([type]) { font: inherit; font-size: 16px; padding: 6px; border: 2px solid var(--ink); border-radius: 4px; width: 100%; }
.bc-slider { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 6px; }
.bc-slider span:last-child { text-align: right; }
.bc-cardimg { display: block; max-width: 100%; height: auto; margin-top: 8px; border: 3px solid var(--ink); border-radius: 4px; }
.bc-quotepick { display: block; margin-top: 8px; font-size: 15px; }
.bc-quotepick select { display: block; width: 100%; font: inherit; font-size: 16px; margin-top: 4px; }
/* text-only mode: the painting and the HUD go, the dialog stays as a plain page */
body.bc-text #game, body.bc-text .hud, body.bc-text .hint, body.bc-text .hs { display: none !important; }
body.bc-text .dialog.bc { position: static; max-height: none; margin: 16px auto; max-width: 720px; }
body.bc-text .screen { overflow: auto; background: #f6f6f2; }
@media (max-width: 480px) {
  .dialog.bc { bottom: calc(8px + var(--bc-kb, 0px)); max-height: 56vh; }
  .bc-card { grid-template-columns: 72px 1fr; } .bc-wheel { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .dialog.bc .dlg-text { transition: none; } }

/* Basecamp's guest book: one page at a time, a 16 x 16 drawing pad with seven pens */
.bc-gb { margin-top: 8px; }
.bc-gb small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.bc-gb-art { display: block; width: 128px; height: 128px; border: 3px solid var(--ink); border-radius: 4px; image-rendering: pixelated; background: #fffdf5; }
.bc-pad { display: block; width: 192px; height: 192px; margin-top: 10px; border: 3px solid var(--ink); border-radius: 4px; touch-action: none; cursor: crosshair; image-rendering: pixelated; }
.bc-pens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.bc-pen { width: 40px; height: 40px; padding: 0; border: 3px solid var(--line); border-radius: 6px; font: inherit; font-size: 16px; background: #fffdf5; cursor: pointer; }
.bc-pen.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.bc-clear { font: inherit; font-size: 15px; background: none; border: 0; padding: 6px; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 40px; }

/* living plan 6: the why card in a person's panel */
.ap2-why{margin-top:8px;font-size:14px;line-height:1.45}.ap2-why p{margin:0 0 4px}
.ap2-dt{display:inline-block;font-size:12px;padding:1px 8px;border-radius:999px;background:#efe9dc;color:#2b2320}
.ap2-draft{margin-top:6px;padding:6px 8px;border-radius:8px;background:#f6f1e6}.ap2-draft span{display:block;margin-top:2px}

/* living plan 6: today in town (bodies/ui-today.js) */
.bd-strip{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;z-index:6}
.bd-btn{font:600 14px/1.2 system-ui,-apple-system,sans-serif;padding:8px 12px;border-radius:999px;border:1px solid #d9d2c3;background:#fffdf8;color:#2b2320;cursor:pointer;min-height:36px}
.bd-btn:hover{background:#f4efe4}.bd-btn:focus-visible,.bd-x:focus-visible{outline:2px solid #0433ff;outline-offset:2px}
.bd-panel{position:absolute;left:12px;bottom:60px;max-width:min(440px,calc(100% - 24px));max-height:60vh;display:flex;flex-direction:column;overflow:hidden;background:#fffdf8;color:#2b2320;border:1px solid #d9d2c3;border-radius:12px;padding:14px 16px;z-index:7;box-shadow:0 6px 24px rgba(43,35,32,.12)}
.bd-name{flex:none;font-size:16px;margin:0 36px 6px 0}.bd-line{flex:none;margin:0 0 8px;font-size:14px;line-height:1.45}
.bd-list{flex:1 1 auto;min-height:0;margin:0;padding-left:18px;font-size:14px;line-height:1.45;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.bd-list li{margin:0 0 10px;word-break:break-word}.bd-list li:last-child{margin-bottom:0}
.bd-row{flex:none;display:flex;gap:8px;margin-top:8px}.bd-x{position:absolute;right:8px;top:8px;border:0;background:none;font-size:16px;cursor:pointer;color:#2b2320;min-width:32px;min-height:32px;z-index:2}
@media (max-width:599px),(max-height:499.98px){.bd-strip{left:16px;right:16px;bottom:72px;flex-wrap:wrap}.bd-panel{left:16px;right:16px;bottom:124px;max-width:none}}
/* A quiet paper screen while an on-demand room arrives; the painting fades in underneath. */
/* The room's name stays for screen readers; the BRIDGE loader (town/loader.js, #bl) is the screen a visitor sees while it arrives. */
.room-loading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 1; pointer-events: none; }
.room-loading[hidden] { display: none; }
.is-room-loading .nametag { visibility: hidden !important; }

/* The traveler chooser (chooser.js): three travelers at game size on the town's paper, before Basecamp */
.chooser { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(246, 246, 242, .94); font-family: var(--ui, var(--font)); }
.chooser-card { max-width: 560px; width: 100%; padding: 22px 22px 18px; text-align: center; background: var(--paper); }
.chooser-card h2 { margin: 0 0 4px; font: 700 26px/1.1 var(--ui-display, var(--ui, sans-serif)); }
.chooser-note { margin: 0 0 14px; color: var(--muted); font-size: 17px; }
.chooser-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chooser-pick { display: grid; justify-items: center; align-content: end; gap: 8px; min-height: 224px; padding: 14px 6px 10px; font: 600 17px var(--ui, sans-serif); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 10px; cursor: pointer; transition: transform .12s ease-out, box-shadow .12s ease-out; }
.chooser-pick:hover, .chooser-pick:focus-visible { box-shadow: 0 0 0 3px var(--gold), 0 4px 0 3px var(--ink); transform: translateY(-3px); outline: none; }
.chooser-pick:focus-visible { box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--accent); }
.chooser-sprite { display: block; width: var(--w, 60px); height: var(--h, 86px); min-height: 86px; opacity: 0; background-repeat: no-repeat; transform: scale(1.5); transform-origin: 50% 100%; margin-bottom: 36px; }
.chooser-sprite.on { opacity: 1; }
.chooser-keys { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 480px) { .chooser-card { padding: 16px 10px 12px; } .chooser-sprite { transform: scale(1.1); margin-bottom: 14px; } .chooser-pick { min-height: 160px; } .chooser-card h2 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .chooser-pick { transition: none; } }

/* Basecamp, alive: a stop's painted close-up with the two people standing on it as game sprites, the mute button, hold to talk */
.bc-scene { position: relative; margin: 10px 0 0; width: min(100%, 460px); aspect-ratio: 16 / 9; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; background: #2a1a10; }
.bc-scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-sp { position: absolute; bottom: 3%; opacity: 0; image-rendering: pixelated; transform: scale(.6); transform-origin: 50% 100%; background-repeat: no-repeat; }
.bc-sp.is-ready { opacity: 1; }
.bc-sp::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -2px; height: 7px; border-radius: 50%; background: rgba(52, 28, 14, .32); z-index: -1; }
.bc-sp-bridget { left: 2%; } .bc-sp-you { right: 2%; }
@media (prefers-reduced-motion: no-preference) { .bc-sp.is-ready { animation: bc-bob 3.4s steps(1) infinite; } .bc-sp-you.is-ready { animation-delay: -1.7s; } }
@keyframes bc-bob { 0%, 62% { translate: 0 0; } 63%, 78% { translate: 0 -2px; } 79%, 100% { translate: 0 0; } }
@media (max-width: 480px) { .bc-scene { width: 100%; } .bc-sp { transform: scale(.5); } }
.bc-voice { position: fixed; top: 64px; right: 14px; z-index: 6; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 rgba(45, 36, 51, .25); }
.bc-voice:focus-visible, .bc-micbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The text starts before the recording arrives; a quiet breath beside Bridget keeps that pause human. */
.bc-speaking-cue { display: none; margin-left: 10px; font: 400 13px var(--font); color: var(--muted); text-transform: none; letter-spacing: 0; }
.dialog.bc.is-voicing .bc-speaking-cue { display: inline-flex; align-items: center; gap: 5px; }
.dialog.bc.is-voicing #dlg-portrait { outline: 2px solid var(--muted); outline-offset: 2px; }
.bc-speaking-cue::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .65; }
@media (prefers-reduced-motion: no-preference) { .bc-speaking-cue::before { animation: bc-breath 2.8s ease-in-out infinite; } }
@keyframes bc-breath { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
.bc-voice .bc-slash { display: none; } .bc-voice.is-muted .bc-slash { display: block; } .bc-voice.is-muted .bc-waves { display: none; }
@media (prefers-reduced-motion: no-preference) { .bc-voice.is-speaking .bc-waves { animation: bc-wave .5s steps(1) infinite; } }
@keyframes bc-wave { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }
@media (max-width: 480px) { .bc-voice { top: 108px; right: 8px; width: 40px; height: 40px; } }
.dlg-choices .bc-mic { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; width: 100%; }
.dlg-choices .bc-micbtn { min-height: 44px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.dlg-choices .bc-micbtn::before { content: none; }
.dlg-choices .bc-micbtn.is-on { background: #c8361a; border-color: #c8361a; color: #fff; }
.bc-micnote { font-size: 14px; color: var(--muted); }
body.bc-text .bc-voice, body.bc-text .bc-scene { display: none; }

/* ================= sound: the switch beside MENU and its two switches (soundui.js) ================= */
.snd { position: relative; display: flex; }
.snd-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.snd-btn svg { width: 20px; height: 20px; flex: none; }
.snd-btn:not(.is-on) svg { opacity: .7; }
.snd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; padding: 6px; display: grid; gap: 2px; z-index: 7;
  background: var(--cy-paper, #f6f6f2); color: var(--cy-ink, #17171b); border: 2.5px solid var(--cy-ink, #17171b); border-radius: 12px;
  box-shadow: 0 8px 22px rgba(23, 23, 27, .25); font: 600 16px/1.2 var(--ui, inherit); -webkit-font-smoothing: antialiased;
}
.snd-menu[hidden] { display: none; }
.snd-sw {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 12px; min-height: 44px;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.snd-sw:hover { background: #ecece6; }
.snd-sw i { position: relative; width: 36px; height: 20px; flex: none; border-radius: 10px; background: #c9c8c0; transition: background-color 160ms ease; }
.snd-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23, 23, 27, .3); transition: transform 160ms ease; }
.snd-sw[aria-checked="true"] i { background: #1f7a3c; }
.snd-sw[aria-checked="true"] i::after { transform: translateX(16px); }
.snd-btn:focus, .snd-sw:focus { outline: none; }
.snd-btn:focus-visible, .snd-sw:focus-visible { outline: 3px solid var(--cy-focus, #3466e8); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .snd-sw i, .snd-sw i::after { transition: none; } }
@media (max-width: 600px), (max-height: 499.98px) {
  .snd-word { display: none; }
  .snd-btn { padding: 0 8px; }
  .snd-menu { min-width: 200px; font-size: 15px; }
}
/* Omar mode (house/ui-house.js): the private panels and the state chip. Light, like the rest of the interface. */
.hs-chip.is-held{background:#fff3d6;border-color:#e7c98a}
.hs-stale{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#fff3d6;color:#5a4a1e;font-size:14px}
.hs-empty,.hs-dim{color:#6b625a;font-size:14px;margin:4px 0}
.hs-list{display:grid;gap:10px}
.hs-item,.hs-state{padding:10px 12px;border:1px solid #e4ddd0;border-radius:10px;background:#fffdf8}
.hs-k{font-weight:600;margin:0 0 4px}.hs-about,.hs-belief{margin:0 0 8px;font-size:15px;line-height:1.45}
.hs-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.hs-act[aria-pressed="true"]{background:#2b2320;color:#fffdf8;border-color:#2b2320}
.hs-back{margin-top:6px}.hs-back summary{cursor:pointer;font-size:14px;color:#6b625a}
.hs-back textarea,.hs-state input,.hs-item input{display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:8px;border:1px solid #d9d2c3;border-radius:8px;font:inherit;font-size:15px}
.hs-status{margin:6px 0 0;font-size:13px;color:#4a3b28;min-height:1em}
.hs-foot{margin-top:12px}
.hs-log .hs-item{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}

/* Omar's private morning loop. */
.hs-compose label{display:block;margin:12px 0 6px}.hs-compose input,.hs-compose textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;font:inherit}.hs-letter-text{white-space:pre-wrap;overflow-wrap:anywhere}.hs-foot{flex-wrap:wrap}

.hs-paper{display:block;width:100%;min-height:65vh;border:0;background:#fff;border-radius:4px}

.hs-compose textarea{padding:8px;border:1px solid #d9d2c3;border-radius:8px}.hs-confirm{padding:10px 12px;background:#edf4e9;border-left:3px solid #537246;font-size:14px}

.hs-agent-now{border-top:1px solid var(--line);margin-top:12px;padding-top:8px}.hs-agent-now h3{font-size:15px;margin:0 0 6px}.hs-agent-now p{font-size:14px;line-height:1.5}

.hs-agent-now textarea{display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}.hs-agent-now label{display:block;font-size:14px}
.hs-skill-featured{display:inline-block;font-size:11px;line-height:1;padding:4px 6px;background:#e8eee0;color:#3f5935;border-radius:4px;vertical-align:middle}.hs-skills-search label{display:block;font-size:14px}.hs-skill-item h3{overflow-wrap:anywhere}.hs-skill-item[hidden]{display:none!important}
/* Omar mode: the booth (Phase 2A) */
.hs-thread{display:grid;gap:8px;margin:8px 0}.hs-turn{border-left:3px solid #ddd;padding-left:8px}.hs-turn p{margin:2px 0;font-size:14px;line-height:1.5}.hs-a.is-refused{color:#8a2a00}
.hs-pick{flex-wrap:wrap}.hs-pick .bd-btn[aria-pressed="true"]{outline:2px solid currentColor}
.hs-ask-box{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}.hs-ask-box h4{font-size:14px;margin:0 0 4px}.hs-ask-box textarea,.hs-ask textarea{display:block;width:100%;box-sizing:border-box;margin:6px 0;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}.hs-ask-box label{display:block;font-size:14px}

/* ================= the mobile pass (16 Oct): the town fills the screen, cards stay clear of people ================= */
/* Safe areas as variables (QA can set them to a notch's numbers; env() is 0 inside a frame and on desktops) */
:root { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); }
/* the dynamic viewport: the screen is exactly the visible window (browser bar in or out), with no bounce or band */
html, body { height: 100%; height: 100dvh; overscroll-behavior: none; background: #edf2ef; }
body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.screen { overflow: hidden; }
/* the corners and edges keep clear of the notch, the island and the home bar */
.hud { top: calc(14px + var(--sa-t)); } .hud-left { left: calc(14px + var(--sa-l)); } .hud-right { right: calc(14px + var(--sa-r)); }
.citybar, .tb2 { top: calc(14px + var(--sa-t)); left: calc(14px + var(--sa-l)); right: calc(24px + var(--menu-w, 110px) + var(--sa-r)); }
.citybottom { bottom: calc(18px + var(--sa-b)); }
.hint { bottom: calc(14px + var(--sa-b)); }
.dialog { bottom: calc(18px + var(--sa-b)); max-width: calc(100vw - 16px - var(--sa-l) - var(--sa-r)); }
.ap2 { left: calc(14px + var(--sa-l)); bottom: calc(14px + var(--sa-b)); }
.menu { top: calc(64px + var(--sa-t)); right: calc(14px + var(--sa-r)); }
.panel { inset: calc(60px + var(--sa-t)) max(calc(14px + var(--sa-r)), calc(50vw - 520px)) calc(18px + var(--sa-b)) max(calc(14px + var(--sa-l)), calc(50vw - 520px)); }
.demo-panel { top: calc(64px + var(--sa-t)); right: calc(14px + var(--sa-r)); bottom: calc(14px + var(--sa-b)); }
.toast { top: calc(70px + var(--sa-t)); max-width: calc(100vw - 32px); }
.bc-voice { top: calc(64px + var(--sa-t)); right: calc(14px + var(--sa-r)); }
.bd-strip { left: calc(12px + var(--sa-l)); bottom: calc(12px + var(--sa-b)); }
.chooser { padding: calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l)); overflow: auto; }

/* compact screens (html.is-compact, sheets.js: under 600 wide, or under 500 tall, a phone turned sideways) */
html.is-compact .hud { top: calc(8px + var(--sa-t)); gap: 6px; }
html.is-compact .hud-left { left: calc(8px + var(--sa-l)); } html.is-compact .hud-right { right: calc(8px + var(--sa-r)); }
html.is-compact .hud-right kbd { display: none; }
html.is-compact .citybar, html.is-compact .tb2 { top: calc(8px + var(--sa-t)); left: calc(8px + var(--sa-l)); right: calc(14px + var(--menu-w, 70px) + var(--sa-r)); }
/* touch targets: every control at least 44 px */
html.is-compact .town-v2 .hud .box.mini, html.is-compact .cb-city { min-height: 44px; }
html.is-compact .cb-line { min-height: 44px; font-size: 14px; }
html.is-compact .city-next:not(.city-on) #hud-left { top: var(--room-hud-top, 64px); left: calc(8px + var(--sa-l)); right: auto; }
html.is-compact .city-next:not(.city-on) #hud-left .box.mini { min-height: 36px; }
html.is-compact .citybottom { bottom: calc(12px + var(--sa-b)); }
html.is-compact .bd-strip { left: calc(12px + var(--sa-l)); right: calc(12px + var(--sa-r)); bottom: calc(68px + var(--sa-b)); flex-wrap: wrap; }
html.is-compact .bd-btn { min-height: 44px; font-size: 15px; }
html.is-compact .x, html.is-compact .ap2-x, html.is-compact .pq-x, html.is-compact .bd-x { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
html.is-compact .bc-voice { top: calc(var(--room-hud-top, 64px) + 52px); right: calc(8px + var(--sa-r)); width: 44px; height: 44px; }
html.is-compact .menu { top: calc(60px + var(--sa-t)); right: calc(8px + var(--sa-r)); max-height: calc(100dvh - 72px - var(--sa-t) - var(--sa-b)); overflow: auto; }
html.is-compact .menu :is(button, a) { min-height: 44px; }
html.is-compact .panel { inset: calc(56px + var(--sa-t)) calc(8px + var(--sa-r)) calc(8px + var(--sa-b)) calc(8px + var(--sa-l)); padding: 14px; }
html.is-compact .snd-menu { max-width: calc(100vw - 16px); }
html.is-compact .hint { width: calc(100vw - 16px); white-space: normal; text-align: center; }

/* the sheets: one edge to edge card at the foot of the screen (above the home bar), or under the top bar when the
   visitor or the person it is about is down there (sheets.js); scrolls inside itself, never past the screen */
html.is-compact .ap2, html.is-compact #dialog, html.is-compact .bd-panel, html.is-compact .plaque.is-docked.is-docked-room {
  left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); top: auto; bottom: calc(8px + var(--sa-b)); width: auto; max-width: none; transform: none;
  max-height: calc(100dvh - var(--sheet-top, 64px) - 16px - var(--sa-b)); overflow: auto; overscroll-behavior: contain;
}
html.is-compact .sheet-top { top: var(--sheet-top, 64px) !important; bottom: auto !important; }
/* Keep the sheet below Bridget's 44 px voice switch (52 px below the room HUD), with an 8 px gap. */
html.is-compact #dialog.bc:not(.sheet-top) { bottom: calc(8px + max(var(--sa-b), var(--bc-kb, 0px))); max-height: calc(100dvh - max(var(--sheet-top, 64px), calc(var(--room-hud-top, 64px) + 104px)) - 8px - max(var(--sa-b), var(--bc-kb, 0px))); }
/* while a sheet is open the bottom buttons step aside (a sheet never sits on them); closing it brings them back */
body.sheet-open .citybottom, body.sheet-open .bd-strip { visibility: hidden; }
/* readable on a phone: 16 px for every line a card says */
html.is-compact .ap2, html.is-compact .ap2-model, html.is-compact .ap2-intro, html.is-compact .ap2-job, html.is-compact .ap2-task, html.is-compact .ap2-why { font-size: 16px; }
html.is-compact .ap2-why .ap2-dt { font-size: 14px; }
html.is-compact .pq-line, html.is-compact .pq-live, html.is-compact .pq-list, html.is-compact .pq-go, html.is-compact .pq-act { font-size: 16px; }
html.is-compact .bd-name { font-size: 18px; } html.is-compact .bd-line, html.is-compact .bd-list { font-size: 16px; }
html.is-compact .town-v2 .dlg-choices button { font-size: 16px; min-height: 44px; }
html.is-compact .dlg-extra { font-size: 16px; }
html.is-compact .bc-count, html.is-compact .bc-micnote { font-size: 14px; }
/* a phone turned sideways: the card is a side sheet on the left, so the painting stays in view beside it */
@media (min-width: 600px) {
  html.is-compact .ap2, html.is-compact #dialog, html.is-compact .bd-panel, html.is-compact .plaque.is-docked.is-docked-room { right: auto; width: min(420px, 56vw); }
  html.is-compact .sheet-top { top: var(--sheet-top, 64px) !important; }
  html.is-compact .ap2 { grid-template-columns: 64px minmax(0, 1fr); } html.is-compact .ap2-face { width: 64px; height: 64px; }
  html.is-compact .citybar { flex-wrap: nowrap; }
  html.is-compact .cb-line { flex: 0 1 auto; max-width: 40vw; }
}
html.is-compact .plaque.is-docked:not(.is-docked-room):not(.is-docked-top) { left: calc(8px + var(--sa-l)); right: calc(8px + var(--sa-r)); bottom: calc(68px + var(--sa-b)); }
html.is-compact body:has(#plaque:not([hidden])) .bd-strip { visibility: hidden; }
/* walking (not the map), the city's one-line summary steps aside on a phone: the visitor walks where it was */
html.is-compact .city-next.city-on:not(.city-map) .cb-line { display: none; }
/* the sound switches open over the city bar, never under it */
.hud-right:has(.snd-menu:not([hidden])) { z-index: 8; }
/* touch screens of every size: every control a full fingertip */
@media (pointer: coarse) {
  #dialog .dlg-choices button, .dlg-choices .bc-micbtn, .ap2-go, .ap2-again, .bd-btn, .pbtn, .dbtn { min-height: 44px; }
  .ap2-x, .bd-x, .x, .pq-x { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .bc-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
  .bc-toggle input { width: 22px; height: 22px; margin: 0; }
}
html.is-compact .ap2-go, html.is-compact .ap2-again, html.is-compact .bd-btn, html.is-compact .citywhole, html.is-compact .bc-toggle { font-size: 16px; }
html.is-compact .cb-line { font-size: 15px; }
html.is-compact .run-prog, html.is-compact .run-doc .pend, html.is-compact .run-round.is-empty p, html.is-compact .run-doc .mnote { font-size: 15px; }
/* any open card sends the bottom buttons out of its way (the paper strip sits where a card docks on every screen) */
body.sheet-open .bd-strip, body.sheet-open .citybottom { visibility: hidden; }
/* Basecamp's answer box with the keyboard up (basecamp.js sets --bc-kb from the visual viewport): the sheet rides on the
   keyboard and drops the picture and the portrait, so the box and Send stay in view */
.dialog.bc { bottom: calc(18px + max(var(--sa-b), var(--bc-kb, 0px))); }
html.bc-kb-on .dialog.bc { max-height: calc(100dvh - var(--bc-kb, 0px) - var(--sheet-top, 64px) - 16px); }
html.bc-kb-on .dialog.bc .portrait, html.bc-kb-on .dialog.bc .bc-scene { display: none; }
/* a phone turned sideways: a card may take the right-hand side instead (sheets.js), whichever keeps people in view */
html.is-compact .sheet-right { left: auto !important; right: calc(8px + var(--sa-r)) !important; }
/* Bridget's mute button: under the top bar, or at the foot of the screen while her line is docked up there */
html.is-compact body:has(#dialog.sheet-top:not([hidden])) .bc-voice { top: auto; bottom: calc(12px + var(--sa-b)); }
/* desktops and tablets: a card that would sit on the visitor or the person it is about takes the next free corner (sheets.js deskPlace) */
html:not(.is-compact) .ap2.sheet-top, html:not(.is-compact) .bd-panel.sheet-top, html:not(.is-compact) #dialog.sheet-top { top: var(--sheet-top, 64px); bottom: auto; }
html:not(.is-compact) .ap2.sheet-right, html:not(.is-compact) .bd-panel.sheet-right { left: auto; right: calc(14px + var(--sa-r)); }
html:not(.is-compact) body:has(#dialog.sheet-top:not([hidden])) .bc-voice { top: auto; bottom: calc(12px + var(--sa-b)); }
/* tablets: the paper strip sits above the bottom buttons (side by side they meet in the middle of an 810 px screen) */
@media (min-width: 600px) and (max-width: 1100px) and (min-height: 500px) {
  .bd-strip { bottom: calc(80px + var(--sa-b)); }
  .bd-panel { bottom: calc(132px + var(--sa-b)); }
}
/* a Workshop run on a touch screen: the room's name chip would run under the work panel; the panel names the run */
@media (pointer: coarse) { body.run-on #hud-left { display: none; } }
/* a phone upright: a card takes at most about half the screen (it scrolls inside), so the visitor always has the other half */
@media (max-width: 599.98px) {
  html.is-compact .ap2, html.is-compact #dialog, html.is-compact .bd-panel, html.is-compact .plaque.is-docked.is-docked-room { max-height: min(calc(100dvh - var(--sheet-top, 64px) - 16px - var(--sa-b)), 52dvh); }
  /* Match the Basecamp selector above: its higher specificity used to defeat the phone height limit. */
  html.is-compact #dialog.bc:not(.sheet-top) { max-height: min(calc(100dvh - max(var(--sheet-top, 64px), calc(var(--room-hud-top, 64px) + 104px)) - 8px - max(var(--sa-b), var(--bc-kb, 0px))), 52dvh); }
  html.is-compact #dialog.bc.sheet-top { max-height: min(calc(100dvh - var(--sheet-top, 64px) - 64px - var(--sa-b)), 52dvh); }
}
html.bc-kb-on .bc-voice { display: none; }
/* sideways: narrower side sheets and a smaller face, so most of the painting stays in view */
@media (min-width: 600px) {
  html.is-compact .ap2, html.is-compact #dialog, html.is-compact .bd-panel, html.is-compact .plaque.is-docked.is-docked-room { width: min(380px, 50vw); }
  html.is-compact #dialog { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; }
  html.is-compact #dialog .portrait { width: 56px; height: 56px; }
  html.is-compact .town-v2 .dlg-text, html.is-compact .dialog.bc .dlg-text { font-size: 16px; }
}
/* a long room name never runs under the sound and MENU buttons */
.city-next:not(.city-on) #hud-left { max-width: calc(100vw - var(--cb-sel-w, 160px) - var(--hud-right-w, 220px) - 64px - var(--sa-l) - var(--sa-r)); }
html.is-compact .city-next:not(.city-on) #hud-left { max-width: calc(100vw - 16px - var(--sa-l) - var(--sa-r)); }
#hud-left .box.mini { min-width: 0; max-width: 100%; }
#hud-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an answer box in the card: the whole card shows (Send is never scrolled out of sight); upright, the face steps aside to make it shorter */
html.is-compact #dialog:has(textarea) { max-height: calc(100dvh - var(--sheet-top, 64px) - 16px - var(--sa-b)); }
/* The keyboard hides the voice switch, so the answer box can use that space. */
html.is-compact.bc-kb-on #dialog.bc { max-height: calc(100dvh - var(--bc-kb, 0px) - var(--sheet-top, 64px) - 16px); }
@media (max-width: 599.98px) { html.is-compact #dialog:has(textarea) .portrait { display: none; } }
html.is-compact body:has(#dialog.sheet-right:not([hidden])) .bc-voice { right: auto; left: calc(8px + var(--sa-l)); }

/* what someone says when a guest walks up again (content/timely.js): their own words, in quotes, above their job */
.ap2-says { margin: 8px 0 0; overflow-wrap: anywhere; text-wrap: pretty; padding-left: 10px; border-left: 3px solid var(--fam, #0433FF); }
.ap2-says::before { content: "\201C"; }
.ap2-says::after { content: "\201D"; }
.town-v2 .ap2-says { grid-column: 1 / -1; margin: 12px 16px 0; }
html.is-compact .ap2-says { font-size: 16px; }
@media (max-width: 600px) { .town-v2 .ap2-says { margin-left: 14px; margin-right: 14px; } }
/* Bridget's mute button floats over her card's corner when the card is tall enough to reach it */
html.is-compact .bc-voice { z-index: 9; }

/* ================= what is clickable (Omar, 16 Oct): one affordance for everything that answers a tap ================= */
/* the MENU dropdown opens below its whole button row (never on Sound or MENU) */
html:not(.is-compact) body.town-v2 .box.menu, html:not(.is-compact) .menu { top: calc(var(--hud-right-bottom, 62px) + 8px); }
/* a person under the pointer: their name tag lifts (the cursor is the hand, main.js) */
body.town-v2 .nametag { transition: transform .12s ease-out, box-shadow .12s ease-out; }
body.town-v2 .nametag.is-hover { box-shadow: 0 0 0 2px #ffd23f, 0 4px 10px rgba(23, 23, 27, .3); z-index: 3; }
/* a place on the map under the pointer: the same soft ring the rooms' hotspots use */
@media (hover: hover) { .cityspot:not(.is-rect):not(.is-door):hover { box-shadow: 0 0 0 2px rgba(255, 252, 240, .92), 0 0 0 5px rgba(28, 30, 44, .28); } }
/* touch screens have no hover: every few seconds a faint glint passes over each thing in the painting that answers a tap
   (a room's hotspots, the places on the map), out of step so they never all flash at once; still for reduced motion */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .hs:not(.hs-exit):not(.is-open), .cityspot:not(.is-open) { animation: tap-glint 7s ease-in-out infinite; }
  .hs:nth-child(3n+1), .cityspot:nth-child(3n+1) { animation-delay: -2.3s; }
  .hs:nth-child(3n+2), .cityspot:nth-child(3n+2) { animation-delay: -4.6s; }
}
@keyframes tap-glint {
  0%, 82%, 100% { box-shadow: 0 0 0 0 rgba(255, 252, 240, 0); background-color: rgba(255, 250, 235, 0); }
  90% { box-shadow: 0 0 0 2px rgba(255, 252, 240, .7), 0 0 18px 3px rgba(255, 236, 190, .35); background-color: rgba(255, 250, 235, .08); }
}
/* what does not answer a tap does not look like a button: the city's one-line summary, the room name and the demo chip are
   flat labels (no outline, no drop shadow); everything clickable keeps its border and lift */
body.town-v2 .cb-line, body.town-v2 #hud-left .box.mini { border-color: transparent !important; box-shadow: none !important; background: rgba(246, 246, 242, .88) !important; }

/* T-152: every avatar square is shown smaller than its file, so the browser shrinks it smoothly. "pixelated" shrinks by
   dropping whole pixels, which breaks outlines and makes the two eyes differ (the portrait, dialog, monitor and card rules
   above set it for the old sprite crops). The files are box-averaged from Omar's 1024 squares (tools/build-avatars.py). */
img[src*="assets/avatars/"] { image-rendering: auto !important; }

/* ---- the Town Hall's board: live task cards (T-151) and the one-line caption of each board scene (T-148) ---- */
.town-v2 .bb-panel { position: fixed; z-index: 9; inset: calc(12px + var(--sa-t, 0px)) calc(12px + var(--sa-r, 0px)) calc(12px + var(--sa-b, 0px)) calc(12px + var(--sa-l, 0px)); margin: auto;
  width: auto; max-width: 1040px; height: fit-content;   /* width auto between the insets: min(1040px, 100%) ran 24 px past the right edge on phones */ max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  background: var(--sk-paper); color: var(--sk-ink); border: 2.5px solid var(--sk-ink); border-radius: var(--sk-r-card); box-shadow: var(--sk-float); padding: 16px 18px; font-family: var(--ui, var(--font)); }
.town-v2 .bb-panel[hidden], .town-v2 .bb-caption[hidden] { display: none; }
.bb-panel .bd-name, .bb-panel .bb-name { flex: none; font: 600 19px/1.2 var(--ui, var(--font)); margin: 0 44px 4px 0; }
.bb-panel .bb-line { flex: none; margin: 0 44px 10px 0; font-size: 14px; line-height: 1.4; color: var(--sk-soft); }
.bb-panel .bd-x { position: absolute; top: 10px; right: 10px; }
.bb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; }
.bb-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bb-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bb-col, .bb-wait, .bb-away, .bb-log { background: var(--sk-white); border: 1.5px solid var(--sk-rule); border-radius: 12px; padding: 10px 12px 12px; min-width: 0; }
.bb-wait, .bb-away, .bb-log { margin-top: 10px; }
.bb-col h3, .bb-wait h3, .bb-away h3, .bb-log h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 14px/1.2 var(--ui, var(--font)); }
.bb-col h3 b, .bb-wait h3 b { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--sk-soft); font-variant-numeric: tabular-nums; }
.bb-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bb-card { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; background: #fffdf4; border: 1.5px solid var(--sk-ink); border-radius: 999px; box-shadow: 0 2px 0 rgba(23, 23, 27, .14);
  font: 600 13px/1 var(--ui, var(--font)); font-variant-numeric: tabular-nums; }
.bb-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; border: 1.5px solid var(--sk-ink); background: var(--sk-pick); box-sizing: border-box; }
.bb-av-none { display: inline-block; border-style: dashed; border-color: var(--sk-faint); background: transparent; }
.bb-away h3 .bb-av, .bb-capav .bb-av { width: 26px; height: 26px; }
.bb-empty { margin: 0; font-size: 13px; color: var(--sk-faint); }
.bb-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.35; }
.bb-log time { display: inline-block; min-width: 4.8em; color: var(--sk-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.bb-log small { display: block; margin-left: 4.8em; color: var(--sk-soft); font-size: 12px; word-break: break-word; }
.bb-omar .bb-cards { flex-direction: column; flex-wrap: nowrap; }
.bb-omar .bb-card-omar { display: block; width: 100%; padding: 0; border-radius: 10px; box-sizing: border-box; font-weight: 500; white-space: normal; }
.bb-open { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 4px 8px 4px 4px; background: none; border: 0; border-radius: 10px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bb-open:hover { background: var(--sk-hover); }
.bb-open:focus-visible { outline: 2px solid var(--sk-focus); outline-offset: 2px; }
.bb-open .bb-id { flex: none; font-weight: 600; padding-top: 4px; }
.bb-title { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; padding-top: 3px; word-break: break-word; overflow-wrap: anywhere; }
.bb-omar .bb-more { overflow-wrap: anywhere; }
@media (max-width: 1200px) { .bb-omar .bb-cols { grid-template-columns: 1fr 1fr; } }
.bb-more { padding: 2px 10px 8px 34px; font-size: 12.5px; line-height: 1.4; color: var(--sk-soft); }
.bb-more p { margin: 4px 0 0; word-break: break-word; }
.bb-more i { font-style: normal; font-weight: 600; color: var(--sk-ink); margin-right: 4px; }
.bb-caption { position: fixed; z-index: 6; left: 50%; width: max-content; box-sizing: border-box; top: calc(60px + var(--sa-t, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(560px, calc(100vw - 24px));
  padding: 6px 16px 6px 7px; background: var(--sk-paper); color: var(--sk-ink); border: 2px solid var(--sk-ink); border-radius: 999px; box-shadow: var(--sk-lift); pointer-events: none;
  font: 600 14px/1.3 var(--ui, var(--font)); text-wrap: balance; }
.bb-capav { display: flex; flex: none; }
@keyframes bb-drop { from { opacity: 0; transform: translateY(-16px) rotate(-4deg); } 60% { opacity: 1; transform: translateY(2px) rotate(1deg); } }
@keyframes bb-cap-in { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: no-preference) { .bb-new { animation: bb-drop .7s var(--sk-ease, ease) both; } .bb-caption:not([hidden]) { animation: bb-cap-in .25s var(--sk-ease, ease); } }
@media (max-width: 760px) { .bb-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bb-cols { grid-template-columns: 1fr; } .town-v2 .bb-panel { padding: 14px; } .bb-caption { top: calc(56px + var(--sa-t, 0px)); font-size: 13px; } }
html.is-compact .bb-panel .bb-line, html.is-compact .bb-title, html.is-compact .bb-log ol { font-size: 15px; }
html.is-compact .bb-card { font-size: 14px; } html.is-compact .bb-open { min-height: 44px; }