/* ─────────────────────────────────────────────────────────────
   site.css · the pages that did not exist before.

   base.css carries the world's design language: the stone borders, the
   peach trim, the two pixel typefaces, the sky. Nothing in here
   redefines any of that. This file only adds the shop, the wallet bar
   and the venue card, and every one of them is built out of the same
   tokens so a new page looks like it was always there.
   ───────────────────────────────────────────────────────────── */

/* [hidden] has to win here: several elements below set display, and a
   display rule beats the attribute unless it is told otherwise. */
[hidden] { display: none !important; }

/* ── the bar every inner page carries ───────────────────────── */
.bk-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--panel-fill);
  border-bottom: 3px solid var(--stone-outline);
  box-shadow: 0 3px #010a1180;
}
.bk-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.bk-brand img { width: 34px; height: 34px; image-rendering: pixelated; }
.bk-brand span { font-family: var(--font-head); font-size: 14px; color: var(--stone-hi); text-shadow: 2px 2px 0 var(--stone-outline); }
.bk-brand em { color: var(--brand-peach); font-style: normal; }
.bk-nav { display: flex; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.bk-nav a {
  font-family: var(--font-head); font-size: 9px; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 7px 10px;
  border: 2px solid transparent; border-radius: 4px;
}
.bk-nav a:hover { color: var(--text); background: var(--panel-fill-2); }
.bk-nav a.on { color: var(--stone-outline); background: var(--brand-peach); border-color: var(--stone-outline); }
.bk-spacer { flex: 1 1 auto; }

/* the wallet button reuses .city-enter, so only the readout is new */
.bk-wallet { display: flex; align-items: center; gap: 8px; }
.bk-account {
  font-family: var(--font-body); font-size: 12px; color: var(--text);
  padding: 6px 10px; background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-radius: 999px;
}
.bk-account b { color: var(--brand-peach); font-weight: 400; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; color: var(--text);
  padding: 5px 10px; background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-radius: 999px;
}
.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.bk-dot.warn { background: var(--brand-peach); }
.bk-dot.off { background: var(--danger); }

/* ── the page ─────────────────────────────────────────────────── */
.bk-page {
  position: relative; min-height: 100%;
  background: linear-gradient(var(--sky-top), var(--sky-bottom)) fixed;
  font-family: var(--font-body); color: var(--text);
}
.bk-body { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 20px 16px 60px; }
.bk-panel {
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--stone-hi); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--stone-outline), 0 4px #010a1173;
}
.bk-h1 {
  margin: 0 0 10px; font-family: var(--font-head); font-size: 17px; line-height: 1.5;
  color: var(--brand-peach); text-shadow: 2px 2px 0 var(--stone-outline);
}
.bk-h2 {
  margin: 0 0 12px; font-family: var(--font-head); font-size: 13px; color: var(--brand-peach);
  text-shadow: 2px 2px 0 var(--stone-outline);
  padding-bottom: 10px; border-bottom: 2px solid var(--stone-edge);
}
.bk-p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
.bk-p strong { color: var(--stone-hi); }
.bk-muted { color: var(--muted); }
.bk-note {
  margin: 10px 0; padding: 11px 13px; font-size: 13.5px; line-height: 1.6;
  background: #fecdaa1a; border-left: 4px solid var(--brand-peach); border-radius: 4px;
}
.bk-warn { background: #c2484f1f; border-left-color: var(--danger); }
.bk-code {
  display: block; margin: 8px 0; padding: 9px 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px;
  word-break: break-all; user-select: all;
  color: var(--brand-ink); background: var(--panel-fill-2);
  border: 1px solid var(--stone-outline); border-radius: 4px;
}

/* ── the stat strip ───────────────────────────────────────────── */
.bk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.bk-stat {
  padding: 10px 12px; background: var(--panel-fill-2);
  border: 2px solid var(--stone-edge); border-radius: 5px;
}
.bk-stat dt { font-family: var(--font-head); font-size: 8px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.bk-stat dd { margin: 0; font-family: var(--font-head); font-size: 14px; color: var(--stone-hi); }
.bk-stat dd small { display: block; margin-top: 5px; font-family: var(--font-body); font-size: 12px; color: var(--muted); }

/* ── the shop ─────────────────────────────────────────────────── */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; }
.bk-card {
  display: flex; flex-direction: column;
  background: var(--panel-fill-2);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--stone-hi); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px; box-shadow: 0 0 0 2px var(--stone-outline);
  overflow: hidden;
}
.bk-card.sold { filter: grayscale(.55) brightness(.86); }
.bk-art {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  background: var(--panel-fill);
  border-bottom: 2px solid var(--stone-outline);
}
.bk-card-body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.bk-card-name { font-family: var(--font-head); font-size: 11px; line-height: 1.4; color: var(--stone-hi); }
.bk-card-blurb { font-size: 12.5px; line-height: 1.55; color: var(--muted); flex: 1; }
.bk-card-rows { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.bk-row { display: flex; justify-content: space-between; gap: 8px; }
.bk-row span { color: var(--muted); }
.bk-row b { font-weight: 400; color: var(--stone-hi); }
.bk-bar { height: 6px; background: var(--stone-outline); border-radius: 3px; overflow: hidden; }
.bk-bar i { display: block; height: 100%; background: var(--brand-peach); }
.bk-buy { width: 100%; margin-top: 2px; }

/* ── the token cards on the profile ───────────────────────────── */
.bk-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-tag {
  font-family: var(--font-body); font-size: 11px; color: var(--stone-outline);
  background: var(--stone-face); padding: 2px 7px; border-radius: 3px;
}
.bk-tag.tier { background: var(--brand-peach); }

/* ── the mint dialog ──────────────────────────────────────────── */
.bk-modal-back {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: #010a11b3;
}
.bk-modal {
  width: min(420px, 100%); max-height: 92vh; overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--stone-hi); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px; box-shadow: 0 0 0 2px var(--stone-outline), 0 8px 32px #010a11a6;
  animation: city-panel-in 140ms ease-out;
}
.bk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bk-qty { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.bk-qty input {
  width: 74px; padding: 8px 10px; text-align: center;
  font-family: var(--font-head); font-size: 12px; color: var(--ink);
  background: var(--stone-face-hi); border: 2px solid var(--stone-outline); border-radius: 4px;
}
.bk-steps { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 4px; font-size: 13px; }
.bk-step { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); }
.bk-step b { font-weight: 400; }
.bk-step.on { color: var(--text); }
.bk-step.done { color: #7fd89a; }
.bk-step.fail { color: var(--danger); }
.bk-step i { font-style: normal; width: 14px; flex: 0 0 14px; }
.bk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* the address is a button: it opens the account menu */
.bk-account[role="button"] { cursor: pointer; }
.bk-account[role="button"]:hover { border-color: var(--brand-peach); }
.bk-account i { font-style: normal; color: var(--muted); }

/* ── the account menu ─────────────────────────────────────────
   Absolutely positioned against the page, not the header, so a
   sticky header does not clip it.                                   */
.bk-menu {
  position: absolute; z-index: 50;
  display: flex; flex-direction: column; min-width: 190px;
  padding: 6px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--stone-hi); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--stone-outline), 0 6px 20px #010a1180;
  animation: city-panel-in 120ms ease-out;
}
.bk-menu > * {
  font-family: var(--font-body); font-size: 13px; text-align: left;
  color: var(--text); background: none; border: 0; border-radius: 4px;
  padding: 8px 10px; cursor: pointer; text-decoration: none;
}
.bk-menu > *:hover { background: var(--panel-fill-2); color: var(--stone-hi); }
.bk-menu .danger { color: var(--danger); }
.bk-menu .danger:hover { background: #c2484f1f; color: var(--danger); }

/* ── choosing a wallet ────────────────────────────────────────
   Only ever shown when the browser really does offer more than one.  */
.bk-modal-sm { width: min(340px, 100%); }
.bk-wallets { display: flex; flex-direction: column; gap: 8px; }
.bk-wallet-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.bk-wallet-pick img { width: 22px; height: 22px; border-radius: 5px; image-rendering: auto; }
.bk-wallet-pick span { flex: 1; }

/* the disconnect link on the landing page, under the button */
.city-start-hint a { color: var(--brand-ink); text-decoration: none; border-bottom: 2px dotted rgba(27,51,70,.5); }
.city-start-hint a:hover { border-bottom-color: var(--brand-ink); }

/* the wallet row on the landing page, in place of the single button */
.city-start-wallets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* the balance line under the quantity, in the claim dialog */
.bk-balance { margin: 2px 0 6px; font-size: 12px; }

/* ── the empty and loading states ─────────────────────────────── */
.bk-empty {
  padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.7;
  border: 2px dashed var(--stone-edge); border-radius: 5px; background: var(--panel-fill-2);
}
.bk-skel { background: var(--panel-fill-2); animation: city-pulse-dim 1.4s ease-in-out infinite; }
@keyframes city-pulse-dim { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }

/* ── the world ────────────────────────────────────────────────
   The one page that fills the window instead of scrolling. The
   header stays, everything else floats over the canvas.            */
.bk-world-body { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.bk-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--panel-fill-2); }
.bk-stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; cursor: pointer; }

.bk-travel {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.bk-travel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  font-family: var(--font-head); font-size: 11px; color: var(--stone-hi);
  background: var(--panel-fill);
  border: 2px solid var(--stone-outline); border-radius: 6px;
  box-shadow: 0 2px #010a1173;
}
.bk-travel-list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--stone-hi); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px; box-shadow: 0 0 0 2px var(--stone-outline);
  animation: city-panel-in 130ms ease-out;
}
.bk-here { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.bk-travel-room { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 150px; }
.bk-travel-room b { font-weight: 400; opacity: .75; }

.bk-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.bk-zoom button { width: 38px; text-align: center; }

.bk-world-note {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 6;
  margin: 0; max-width: min(420px, 80vw);
  background: var(--panel-fill); border-left-width: 4px;
  box-shadow: 0 0 0 2px var(--stone-outline);
}

/* ── chat ─────────────────────────────────────────────────────── */
.bk-chat {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  width: min(360px, calc(100% - 24px));
}
.bk-chat-log {
  max-height: 30vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px;
  font-size: 13px; line-height: 1.5;
  background: #16242fd9;
  border: 2px solid var(--stone-outline); border-radius: 6px;
}
.bk-chat-log:empty { display: none; }
.bk-chat-line b { color: var(--brand-peach); font-weight: 400; }
.bk-chat-form { display: flex; gap: 6px; }
.bk-chat-form input {
  flex: 1; min-width: 0; padding: 9px 11px;
  font-family: var(--font-body); font-size: 13px; color: var(--text);
  background: var(--panel-fill); border: 2px solid var(--stone-edge);
  border-top-color: var(--stone-shadow); border-left-color: var(--stone-shadow);
  border-radius: 4px; box-shadow: 0 0 0 2px var(--stone-outline);
}
.bk-chat-form input::placeholder { color: var(--muted); }
.bk-chat-form input:focus { outline: none; border-color: var(--brand-peach); }

/* the hint sits at the top: at the bottom it fought the chat box for
   the same corner, and the chat box wins that argument */
.bk-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 4;
  margin: 0; padding: 6px 12px;
  font-size: 12px; color: var(--text);
  background: #16242fbf; border: 2px solid var(--stone-outline); border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
@media (max-width: 720px) {
  .bk-hint { display: none; }
  .bk-chat { width: calc(100% - 24px); }
  .bk-chat-log { max-height: 22vh; }
}

.bk-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 0 6px; font-family: var(--font-head); font-size: 10px; text-transform: uppercase;
}
/* the footer sits on the sky, not on a panel, so it takes the dark ink
   the landing page uses down there rather than the light stone that
   only reads against a panel */
.bk-foot { color: var(--brand-ink); }
.bk-foot a { color: var(--brand-ink); text-decoration: none; padding: 4px 8px; border: 2px solid transparent; border-radius: 4px; }
.bk-foot a:hover { border-color: var(--stone-outline); background: #ffffff59; }

@media (max-width: 560px) {
  .bk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .bk-h1 { font-size: 14px; }
  .bk-nav a { font-size: 8px; padding: 6px 8px; }
  .bk-brand span { font-size: 12px; }
}

/* ── making your character ────────────────────────────────────
   The wardrobe scrolls; the preview does not, so what you are
   choosing is always in sight while you choose it. */
.bk-creator { width: min(520px, 100%); }
.bk-creator-stage {
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0 12px; padding: 10px;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  border: 2px solid var(--stone-outline); border-radius: 6px;
}
.bk-creator-stage canvas { image-rendering: pixelated; }

.bk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bk-field > span {
  font-family: var(--font-head); font-size: 8px; text-transform: uppercase; color: var(--muted);
}
.bk-field input {
  padding: 9px 11px; font-family: var(--font-body); font-size: 13px; color: var(--text);
  background: var(--panel-fill-2); border: 2px solid var(--stone-edge);
  border-top-color: var(--stone-shadow); border-left-color: var(--stone-shadow);
  border-radius: 4px; box-shadow: 0 0 0 2px var(--stone-outline);
}
.bk-field input:focus { outline: none; border-color: var(--brand-peach); }

/* what you are pointing at, beside the pointer */
.bk-tip {
  position: absolute; z-index: 6; pointer-events: none;
  padding: 6px 9px; font-family: var(--font-body); font-size: 12px; line-height: 1.4;
  color: var(--stone-hi); background: var(--panel-fill);
  border: 2px solid var(--stone-outline); border-radius: 4px; box-shadow: 0 3px #010a1180;
  white-space: nowrap;
}
.bk-tip b { color: var(--brand-peach); font-weight: 400; }
.bk-tip i { font-style: normal; color: var(--muted); }
.bk-shopcard .bk-card-rows { margin-bottom: 4px; }
.bk-shopcard .bk-row.bk-total b { color: var(--brand-peach); }
.bk-progress { height: 6px; margin: 6px 0 2px; background: var(--stone-outline); border-radius: 3px; overflow: hidden; }
.bk-progress i { display: block; height: 100%; background: var(--brand-peach); }
.bk-kinds { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 6px; }
.bk-kind {
  font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer;
  color: var(--muted); background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-radius: 4px;
}
.bk-kind:hover { color: var(--stone-hi); }
.bk-kind.on { color: var(--stone-outline); background: var(--brand-peach); border-color: var(--stone-outline); }
.bk-clock i { font-style: normal; }
.bk-tints { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-tint {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 2px solid var(--stone-outline); border-radius: 999px;
  box-shadow: 0 0 0 2px transparent;
}
.bk-tint.on { box-shadow: 0 0 0 2px var(--brand-peach); }

/* turning the preview round, and setting it walking */
.bk-turn { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.bk-turn-btn {
  padding: 5px 9px; cursor: pointer;
  font-family: var(--font-head); font-size: 8px; text-transform: uppercase;
  color: var(--muted); background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-radius: 4px;
}
.bk-turn-btn:hover { color: var(--stone-hi); }
.bk-turn-btn.on { color: var(--stone-hi); border-color: var(--brand-peach); }

/* the wardrobe: one row of colours per garment */
.bk-wardrobe {
  max-height: 210px; overflow-y: auto; padding: 10px;
  margin-bottom: 12px;
  background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-radius: 6px;
}
.bk-part-pick {
  float: right; font-family: var(--font-body); font-size: 11px;
  text-transform: none; color: var(--stone-hi);
}
.bk-part { margin-bottom: 14px; }
.bk-part:last-child { margin-bottom: 0; }
.bk-part .bk-p { margin: 6px 0 0; font-size: 12px; }
.bk-part-label {
  display: block; margin-bottom: 5px;
  font-family: var(--font-head); font-size: 8px; text-transform: uppercase; color: var(--muted);
}

/* ── choosing where a venue goes ──────────────────────────────
   Sits over the world in the same corner the shop card uses,
   because you are never doing both at once. */
.bk-placing {
  position: absolute; left: 12px; top: 12px; z-index: 9;
  width: min(320px, calc(100% - 24px));
  padding: 12px 14px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--brand-peach); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--stone-outline), 0 6px 20px #010a1180;
  animation: city-panel-in 130ms ease-out;
}
.bk-placing .bk-p { font-size: 12.5px; margin: 6px 0 0; }
.bk-placing .bk-note { margin-top: 8px; font-size: 12.5px; }

/* ── the Casino ───────────────────────────────────────────────
   The other corner, so a match can be running while you look at
   something else. */
.bk-casino {
  position: absolute; right: 12px; top: 56px; z-index: 9;
  width: min(340px, calc(100% - 24px));
  padding: 12px 14px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--brand-peach); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--stone-outline), 0 6px 20px #010a1180;
  animation: city-panel-in 130ms ease-out;
}
.bk-casino .bk-p { font-size: 12.5px; margin: 6px 0 10px; }
.bk-casino .bk-note { margin-top: 8px; font-size: 12.5px; }
.bk-cas-mine { margin-bottom: 12px; }
.bk-cas-stakes { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 8px; }
.bk-cas-stake {
  padding: 5px 9px; cursor: pointer;
  font-family: var(--font-body); font-size: 12px;
  color: var(--muted); background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-radius: 4px;
}
.bk-cas-stake:hover { color: var(--stone-hi); }
.bk-cas-stake.on { color: var(--stone-hi); border-color: var(--brand-peach); }
.bk-cas-list { max-height: 180px; overflow-y: auto; }
.bk-cas-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--stone-outline);
}
.bk-cas-row span { flex: 1; font-size: 12.5px; color: var(--stone-hi); }
.bk-cas-row b { font-size: 12px; color: var(--brand-peach); }
.bk-cas-seats { margin: 8px 0 10px; }
.bk-cas-seat {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid var(--stone-outline); font-size: 12.5px;
}
.bk-cas-seat i { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--stone-outline); }
.bk-cas-seat span { flex: 1; color: var(--stone-hi); }
.bk-cas-seat b { color: var(--brand-peach); font-size: 12px; }
.bk-cas-horses { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 8px; }
.bk-cas-horse {
  padding: 5px 9px; cursor: pointer;
  font-family: var(--font-body); font-size: 12px;
  color: var(--stone-hi); background: var(--panel-fill-2);
  border: 2px solid var(--stone-outline); border-left: 8px solid var(--h); border-radius: 4px;
}
.bk-cas-horse.on { border-color: var(--brand-peach); border-left-color: var(--h); }
.bk-track { display: block; width: 100%; image-rendering: pixelated; }

/* ── the set in the corner of the room ────────────────────────
   The race is watched on a television: a wooden case with an aerial,
   a curved screen with the scan lines still on it, a light that says
   it is live and two knobs nobody ever turns. It switches on when
   the third seat fills, which is the moment the race starts. */
.bk-tv { position: relative; margin: 2px 0 10px; padding-top: 14px; }
.bk-tv-aerial { position: absolute; top: 0; left: 50%; width: 0; height: 0; }
.bk-tv-aerial i {
  position: absolute; bottom: 0; left: 0; width: 2px; height: 16px;
  background: var(--stone-edge); transform-origin: bottom center;
}
.bk-tv-aerial i:first-child { transform: rotate(-32deg); }
.bk-tv-aerial i:last-child { transform: rotate(28deg); }
.bk-tv-case {
  padding: 8px 8px 6px;
  background: #2a211a;
  border: 3px solid #16100c;
  border-top-color: #45362a; border-left-color: #45362a;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--stone-outline), 0 6px 0 0 #0a0705, 0 10px 24px #000a;
}
.bk-tv-screen {
  position: relative; overflow: hidden;
  background: #05100a;
  border: 2px solid #0b0806; border-radius: 5px;
}
.bk-tv-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
              radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
}
.bk-tv-flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.bk-tv-flash.on { animation: city-tv-flash 700ms ease-out; }
@keyframes city-tv-flash { 0% { opacity: .75; } 100% { opacity: 0; } }
.bk-tv-foot { display: flex; align-items: center; gap: 7px; padding: 6px 2px 0; }
.bk-tv-led { width: 7px; height: 7px; border-radius: 50%; background: #ff5b5b; box-shadow: 0 0 6px #ff5b5b; animation: city-pulse-dim 1.6s ease-in-out infinite; }
.bk-tv-label { font-family: var(--font-head); font-size: 8px; color: var(--brand-peach); letter-spacing: .08em; }
.bk-tv-knob { width: 10px; height: 10px; border-radius: 50%; background: #45362a; border: 2px solid #16100c; }
/* switching on: a line of light that opens into a picture */
.bk-tv.on .bk-tv-screen { animation: city-tv-on 420ms ease-out; }
@keyframes city-tv-on {
  0% { transform: scaleY(.02); filter: brightness(3); }
  55% { transform: scaleY(1); filter: brightness(1.8); }
  100% { transform: scaleY(1); filter: none; }
}

/* the table, before they run */
.bk-cas-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bk-cas-head b { font-family: var(--font-head); font-size: 10px; color: var(--stone-hi); }
.bk-cas-pot { font-size: 12px; color: var(--muted); }
.bk-cas-pot b { font-family: var(--font-body); font-size: 13px; color: var(--brand-peach); }
.bk-cas-fill { height: 6px; background: var(--stone-outline); border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
.bk-cas-fill i { display: block; height: 100%; background: var(--brand-peach); transition: width .3s ease; }
.bk-cas-table .bk-row { margin-bottom: 8px; }
.bk-cas-dice { min-height: 58px; }
.bk-cas-round {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 0;
}
.bk-cas-round b {
  font-family: var(--font-head); font-size: 14px; color: var(--muted);
  min-width: 34px; text-align: center;
}
.bk-cas-round b.won { color: var(--brand-peach); }
.bk-cas-round span { font-size: 11px; color: var(--muted); }
.bk-cas-proof { font-size: 11px !important; word-break: break-all; }

/* ── the card that opens when you click a venue ───────────────
   It sits over the world rather than covering it, because you are
   standing outside the building you are collecting from.        */
.bk-shopcard {
  position: absolute; left: 12px; top: 12px; z-index: 8;
  width: min(300px, calc(100% - 24px));
  padding: 12px 14px;
  background: var(--panel-fill);
  border: 3px solid var(--stone-edge);
  border-top-color: var(--stone-hi); border-left-color: var(--stone-hi);
  border-right-color: var(--stone-shadow); border-bottom-color: var(--stone-shadow);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--stone-outline), 0 6px 20px #010a1180;
  animation: city-panel-in 130ms ease-out;
}
.bk-shopcard .bk-actions { margin-top: 10px; }
.bk-shopcard .bk-note { font-size: 12.5px; }


/* ── the palette moved ────────────────────────────────────────
   base.css used to be a light blue-grey stone with dark text on it.
   It is graphite and brass now, so the handful of rules that wrote
   dark text onto a button face are corrected here rather than in
   the compiled base file. */
.city-docs-link { color: var(--brand-peach); background: var(--stone-face); }
.bk-tag { color: var(--stone-hi); }
.bk-tag.tier { color: var(--brand-ink); }
.bk-qty input { color: var(--stone-hi); }
.bk-code { color: var(--brand-peach); }
.bk-warn { background: rgba(242, 181, 68, .10); border-left-color: var(--brand-peach); }
.bk-note.bk-warn { color: var(--stone-hi); }

/* the chip that carries the clock and the connection light */
.bk-chip { background: var(--panel-fill-2); }
.bk-dot { background: #3ad6a0; }
.bk-dot.warn { background: var(--brand-peach); }
.bk-dot.off { background: var(--danger); }


/* ── the fishing spot ─────────────────────────────────────────
   The creel sits where the venue card does; the two are never open
   at once. A bite pulses, because you have a second and a half.  */
.bk-creel { top: auto; bottom: 64px; }
.bk-creel-log { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12px; opacity: .85; max-height: 120px; overflow: auto; }
.bk-creel-log li { padding: 2px 0; border-top: 1px solid var(--stone-outline); }
.bk-bite { animation: city-bite 300ms ease-in-out infinite alternate; }
@keyframes city-bite { from { transform: scale(1); } to { transform: scale(1.04); } }

/* ── the contract, in the middle of the world's header ────────
   The same chip the other pages get from ui.css, in the world's own
   stone and gold, and only ever the short form: this bar is full. */
.bk-ca-soon {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; color: var(--brand-peach);
  background: var(--panel-fill-2); border: 2px solid var(--stone-outline); border-radius: 999px; white-space: nowrap;
}
.bk-ca-soon i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-peach); animation: city-ca-soon 1.6s ease-in-out infinite; }
@keyframes city-ca-soon { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.bk-ca-soon b { font-weight: 700; }
.bk-ca-copy { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0; color: var(--text); background: transparent; border: 0; padding: 0; cursor: pointer; }
.bk-ca-copy:hover { color: var(--brand-peach); }
.bk-ca-full { display: none; }
.bk-ca-short { display: inline; }
.bk-ca-go { color: var(--text); opacity: .7; text-decoration: none; font-size: 13px; }
.bk-ca-go:hover { opacity: 1; color: var(--brand-peach); }
.bk-ca-live.copied .bk-ca-copy { color: #3ad6a0; }
.bk-ca-live.copied .bk-ca-short::after { content: "  copied"; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }