:root {
  /* A warm desk: leather browns and cream, with amber as the one bright colour. */
  --bg: #1f1611;
  --panel: #2b2018;
  --panel-2: #3b2c20;
  --line: #5a4533;
  --text: #f6ebd3;
  --muted: #cdbb98;
  --accent: #ffb454;
  --accent-ink: #2b1c05;
  --good: #92dc6c;
  --bad: #ff8f7c;
  --radius: 4px;
  --btn-hi: #4e3a29;
  --btn-lo: #3a2b1e;
  --btn-edge: #120a06;
  --serif: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --ui: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  --surface-gap: 12px;
  --surface-padding: 12px;
  --surface-title: linear-gradient(90deg, #6b2216, #a94a26 62%, #cf7a34);
  --surface-title-ink: #fff3d2;
  --builder-picture-size: 64px;
  --scroll-thumb: #9d7950;
  --scroll-track: #2b2018;
  color-scheme: dark;
}

/* Paper: the tan of the game windows, for panels and dialogs that sit on the desk. It sets the same
   tokens again, so everything inside that reads them turns light without a rule of its own. */
.paper, .card, .modal, .game-panel, .game-menu {
  --bg: #fff9e8;
  --panel: #e3d3aa;
  --panel-2: #efe3c2;
  --line: #a58a58;
  --text: #2c1e11;
  --muted: #5d482c;
  --accent: #c15f26;
  --accent-ink: #fff6e0;
  --good: #2a6c22;
  --bad: #a3261a;
  --btn-hi: #f6ecce;
  --btn-lo: #dfcd9f;
  --btn-edge: #6d5430;
  --scroll-thumb: #997a4c;
  --scroll-track: #efe3c2;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* M9: real scrollbars, using the same surface colours in every scrollable region. */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-track); border-radius: 8px; }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
:is(.modal, .game-panel-body, .apple-build-sheet, .chat-log, .around, .board-read, .space-host) { scrollbar-gutter: stable; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 15px/1.45 var(--ui);
  background-color: var(--bg);
  /* A soft lamp glow from the top, and a faint weave so the desk isn't one flat colour. */
  background-image:
    radial-gradient(ellipse 80% 420px at 50% 0, rgba(255, 176, 84, .16), rgba(255, 176, 84, 0)),
    repeating-linear-gradient(45deg, rgba(255, 220, 160, .025) 0 2px, rgba(0, 0, 0, 0) 2px 6px);
  background-attachment: scroll, scroll;
}

h1, h2, h3, p { margin: 0; }
h2 { font-size: 15px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
small { font-size: 12px; }
a { color: inherit; }

.muted { color: var(--muted); }
.error { color: var(--bad); font-size: 13px; font-weight: 600; }

button {
  font: inherit;
  font-weight: 650;
  color: var(--text);
  background: linear-gradient(var(--btn-hi), var(--btn-lo));
  border: 1px solid var(--btn-edge);
  border-radius: 3px;
  padding: 6px 12px;
  min-height: 34px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 238, 200, .32), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 0 rgba(0, 0, 0, .35);
}
button:hover { filter: brightness(1.1); }
button:active { filter: brightness(.94); transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
button:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
button.primary, a.button.primary {
  color: #2e1805;
  background: linear-gradient(#ffd98a, #f2a73f);
  border-color: #6b3a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(150, 70, 0, .35), 0 1px 0 rgba(0, 0, 0, .35);
}
button.ghost { background: transparent; box-shadow: none; border-color: var(--line); }
button.chosen { background: linear-gradient(#ffd98a, #f2a73f); border-color: #6b3a08; color: #2e1805; }
button.link, a.link {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 2px 4px;
  min-height: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.link:hover, a.link:hover { color: var(--text); filter: none; }
button.link:active { transform: none; box-shadow: none; }
button.danger { color: var(--bad); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--btn-edge);
  border-radius: 2px;
  padding: 8px 10px;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .3);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
input::placeholder { color: #8b7a5e; }
.card input::placeholder, .modal input::placeholder, .wd-body input::placeholder { color: #82705a; }

.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: 13px; font-weight: 650; }
.field small { color: var(--muted); }

.brand {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

/* Home */

.home { max-width: 860px; margin: 0 auto; padding: 56px 16px; }
.hero { margin-bottom: 32px; }
.hero h1 { font: 700 clamp(30px, 6vw, 46px)/1.1 var(--serif); letter-spacing: -.01em; margin: 8px 0 12px; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.lede { color: var(--muted); font-size: 17px; max-width: 58ch; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* A card is a sheet of paper on the desk: tan, with a raised edge. */
.card, .paper-panel {
  color: var(--text);
  background:
    linear-gradient(rgba(255, 252, 240, .5), rgba(255, 252, 240, 0) 42px),
    var(--panel);
  border: 1px solid #2a1b0e;
  border-radius: 3px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #8f7547,
    inset 2px 2px 0 #f0e4c3, inset -2px -2px 0 #bba577,
    0 3px 0 rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .3);
}
.card h2 {
  margin: -2px 0 10px;
  padding-bottom: 7px;
  color: #6e2a14;
  font: 700 16px/1.25 var(--serif);
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  border-bottom: 2px groove rgba(120, 90, 44, .45);
}
.card > button { align-self: flex-start; margin-top: 4px; }
.card a { color: #8a3a12; }
.card .muted a, .card a.link { color: inherit; }
.card input, .card select, .card textarea { background: var(--bg); border-color: #7b6038; }
.card input::placeholder { color: #98856a; }
.room-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
/* HC24: a pack in the shop, drawn as it comes, above its name, price and what's in it. */
.shop { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shop-item .template-pic { margin-bottom: 6px; border-radius: 6px; overflow: hidden; }
.shop-item p { margin: 4px 0 0; }
/* The credits card's balance, big, with the same coin as the bar's. */
.credit-balance { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.credit-balance strong { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.credit-balance .coin-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #e8b730 55%, #a8770f);
  box-shadow: inset 0 0 0 1px #7a5508;
}
.credit-today { display: grid; gap: 4px; margin: 0 0 12px; }
.credit-today progress { width: 100%; height: 8px; accent-color: var(--accent); }
.credit-line strong { display: inline-block; min-width: 3.5ch; font-variant-numeric: tabular-nums; }
.credit-in { color: var(--good); }
.credit-out { color: var(--bad); }

/* The home page's text for people and crawlers. It sits outside the app, so it steps aside when a
   room takes over the page. It reads as the game's manual: a paper sheet at the bottom of the desk. */
.about {
  width: min(1068px, calc(100% - 32px));
  margin: 8px auto 56px;
  padding: 22px 28px 30px;
  color: var(--muted);
  --text: #2c1e11;
  --muted: #5d482c;
  --line: #a58a58;
  background: linear-gradient(rgba(255, 252, 240, .45), rgba(255, 252, 240, 0) 60px), #e3d3aa;
  border: 1px solid #2a1b0e;
  border-radius: 3px;
  box-shadow: inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #8f7547, 0 3px 0 rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .3);
}
.about h2 {
  color: #6e2a14;
  font: 700 21px/1.25 var(--serif);
  margin: 30px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px groove rgba(120, 90, 44, .45);
  max-width: 68ch;
}
.about h2:first-child { margin-top: 0; }
.about p, .about ol, .about dl { max-width: 68ch; margin: 0; color: #43321d; }
.about ol { padding-left: 20px; }
.about li + li { margin-top: 4px; }
.about p + p, .about ol + p { margin-top: 10px; }
.about dt { color: #2c1e11; font-weight: 700; margin-top: 12px; }
.about dt:first-child { margin-top: 0; }
.about dd { margin: 2px 0 0; color: #43321d; }
.about a { color: #8a3a12; }
.social-links { break-inside: avoid; }
.social-links a { overflow-wrap: anywhere; }
.about code { overflow-wrap: anywhere; background: rgba(120, 90, 44, .16); padding: 0 4px; border-radius: 2px; color: #2c1e11; }
#app:not(:has(.home)):not(:empty) ~ .about { display: none; }

/* Room */

.room { max-width: 1240px; margin: 0 auto; padding: 12px 16px 40px; display: grid; gap: 14px; }

.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top h1 { font-size: 18px; font-weight: 650; }

.live {
  font: 700 11px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .06em;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
}
.live.on { background: #e5484d; color: #fff; }

/* The pixel room, scaled to fit the well it stands in and never out of shape. --fill is how much of
   the well it takes, which is how a floor's size shows. */
.stage {
  --fill: 1;
  position: relative;
  container-type: inline-size;
  width: min(calc(100cqw * var(--fill)), calc(100cqh * 480 / 252 * var(--fill)));
  aspect-ratio: 480 / 252;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #2a3450;
}
.stage canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* Over the board and the empty state: a person's name sits above their head, so at the back of the
   room it would slide behind the whiteboard, and with no bots here the empty state would cover it. */
.stage-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.stage[data-size="small"] { --fill: .62; }
.stage[data-size="medium"] { --fill: .82; }
@media (max-width: 700px) {
  .stage[data-size="small"], .stage[data-size="medium"] { --fill: 1; }
}

.board {
  position: absolute;
  left: 31.9%;
  top: 3.6%;
  width: 36.2%;
  height: 17.2%;
  min-height: 0;
  color: #20283e;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  font: inherit;
  line-height: 1.2;
  font-size: clamp(8px, 1.15cqw, 14px);
  padding: 0 1cqw;
  overflow: hidden;
}
.board:hover:enabled { filter: none; box-shadow: inset 0 0 0 1px rgba(32, 40, 62, .35); }
.board:active { filter: none; transform: none; box-shadow: inset 0 0 0 1px rgba(32, 40, 62, .35); }
.board:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.board:disabled { opacity: 1; }
.board small { font: 700 .75em ui-monospace, Consolas, monospace; letter-spacing: .1em; color: #9a5b16; }
.board b { font-size: 1.25em; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* What's written takes the rest of the board and fades where the wall runs out of room. A mask,
   because the room dims at night and a colour wouldn't match the board. */
.board.written { justify-content: flex-start; padding-top: .5em; padding-bottom: .5em; }
.board-top { flex: none; display: flex; align-items: baseline; gap: .6em; width: 100%; min-width: 0; font-size: .9em; }
.board-news { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board .board-by { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #5a6176; letter-spacing: 0; font-weight: 400; }
.board-text { flex: 0 1 auto; min-height: 0; width: fit-content; max-width: 100%; margin: auto; overflow: hidden; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.board-text.cut { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.6em), transparent); }
.board-read { max-height: 60vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* I81: one pin on the wall, right of the whiteboard, drawn in the room's own pixels. Like the
   board it is part of the wall, not a layer over the room, and it opens the Pins panel. */
.pin-button {
  position: absolute;
  left: 94.2%;
  top: 5%;
  width: 4%;
  aspect-ratio: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  color: #20283e;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font: inherit;
}
.pin-button:hover:enabled { filter: none; box-shadow: inset 0 0 0 1px rgba(32, 40, 62, .35); }
.pin-button:active { filter: none; transform: none; }
.pin-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The pin stays small on the wall, but a finger gets 44px to press, as docs/mobile.md asks. */
.pin-button::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.pin-glyph {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'><path fill='%2320283e' d='M4 0h4v1H4zM3 1h1v3H3zM8 1h1v3H8zM2 4h8v1H2zM2 5h1v1H2zM9 5h1v1H9zM2 6h8v1H2z'/><path fill='%23c8402f' d='M4 1h4v3H4z'/><path fill='%23ef8a6a' d='M4 1h1v1H4z'/><path fill='%238e2a1f' d='M3 5h6v1H3z'/><path fill='%235a6176' d='M5 7h2v3H5zM5 10h1v2H5z'/></svg>") center / contain no-repeat;
  image-rendering: pixelated;
}
.pin-count {
  position: relative;
  font: 700 clamp(7px, .9cqw, 11px) ui-monospace, Consolas, monospace;
  color: #9a5b16;
}
.pin-list .pin-card { width: auto; max-width: none; }
.pin-thought { margin: 0; }
.pin-card {
  flex: 0 0 auto;
  width: 7.2em;
  max-width: 28%;
  min-width: 4.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .15em;
  margin: 0;
  padding: .25em .4em;
  border: 1px solid rgba(32, 40, 62, .28);
  border-radius: 3px;
  background: #f4ead2;
  color: #20283e;
  font: inherit;
  font-size: clamp(8px, 1cqw, 12px);
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
}
.pin-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pin-kind {
  font: 700 .75em ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a5b16;
}
.pin-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.pin-by {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #5a6176;
  font-size: .85em;
}
.bot-tag {
  position: absolute;
  width: 0;
  height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(8px, 1cqw, 12px);
  pointer-events: none;
}
.bot-chip {
  position: absolute;
  top: .35em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  max-width: 17em;
  padding: .12em .6em;
  border-radius: 999px;
  background: rgba(20, 23, 34, .86);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
}
.bot-chip span { overflow: hidden; text-overflow: ellipsis; }
.bot-chip i { width: .6em; height: .6em; border-radius: 50%; flex: none; }
.bot-chip .bot-doing { color: #7fd4ff; flex: none; }
.bot-chip .bot-doing:empty { display: none; }
.bot-tag.drop .bot-chip { top: 2em; }

.bubble {
  position: absolute;
  bottom: 5cqw;
  width: max-content;
  max-width: 22em;
  padding: .4em .7em;
  border-radius: 8px;
  background: #fff;
  color: #1b2030;
  font-size: 1.1em;
  line-height: 1.3;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  z-index: 2;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.35em;
  width: .7em;
  height: .7em;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.think-bubble {
  position: absolute;
  bottom: 5.4cqw;
  display: flex;
  align-items: center;
  gap: .22em;
  padding: .32em .5em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  z-index: 2;
}
.think-bubble[hidden] { display: none; }
/* I144: an emote over the avatar, above any speech or thinking bubble. */
.emote-bubble {
  position: absolute;
  bottom: 8.5cqw;
  font-size: 2.2em;
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3));
  animation: emote-pop .35s ease-out;
  z-index: 3;
}
.emote-bubble[hidden] { display: none; }
@keyframes emote-pop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .emote-bubble { animation: none; } }
.think-bubble span {
  width: .34em;
  height: .34em;
  border-radius: 50%;
  background: #5a657a;
  animation: think-dot 1.2s infinite ease-in-out both;
}
.think-bubble span:nth-child(2) { animation-delay: .15s; }
.think-bubble span:nth-child(3) { animation-delay: .3s; }
.think-bubble.waiting { opacity: .72; padding: .26em .4em; }
.think-bubble.waiting span:nth-child(n+2) { display: none; }
.think-bubble.waiting span { animation: none; opacity: .65; }
@keyframes think-dot {
  0%, 80%, 100% { transform: scale(.55); opacity: .35; }
  40% { transform: scale(1); opacity: 1; }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend-key { color: var(--muted); margin-left: auto; }

.stage-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: #fff3d2;
  background: rgba(18, 20, 28, .45);
  font-size: 14px;
  font-weight: 600;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}
.stage-empty[hidden] { display: none; }

.columns { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.side { display: grid; gap: 14px; min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid #120a06;
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
  box-shadow: inset 1px 1px 0 rgba(255, 225, 170, .12), inset -1px -1px 0 rgba(0, 0, 0, .4), 0 2px 0 rgba(0, 0, 0, .3);
}
.panel > h2 { margin-bottom: 10px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.list { display: grid; gap: 10px; }
.list[hidden] { display: none; }

.chat-log { overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.chat-form { display: flex; gap: 8px; }

.msg { display: flex; gap: 10px; min-width: 0; }
.msg.system { justify-content: center; color: var(--muted); font-size: 13px; text-align: center; }
.avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #14161f;
}
.msg-body { min-width: 0; }
.msg-head { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; font-size: 13px; }
.msg-body p { overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-reply { margin: 2px 0; padding-left: 6px; border-left: 2px solid var(--line); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* I131: an earlier message named in a line, as a link that shows it. */
.msg-ref { all: unset; color: var(--accent, #4f8cff); text-decoration: underline; cursor: pointer; }
.msg-ref:focus-visible { outline: 2px solid var(--accent, #4f8cff); outline-offset: 2px; }
/* I148: `code` in a line. */
.msg-body p code { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .92em; }
.msg-flash { background: color-mix(in srgb, var(--accent, #4f8cff) 18%, transparent); transition: background 0.4s; }

.event { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.event.confirmed { border-color: var(--accent); }
.date {
  flex: none;
  width: 44px;
  height: 50px;
  border-radius: 6px;
  background: var(--panel-2);
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
}
.date small { font-size: 10px; font-weight: 700; color: var(--accent); }
.date b { font-size: 18px; }
.event-body { min-width: 0; flex: 1; display: grid; gap: 4px; }
.event-body p { font-size: 13px; overflow-wrap: anywhere; }
.pill { color: var(--muted); }
.pill.on { color: var(--accent); font-weight: 650; }
.rsvps { display: flex; flex-wrap: wrap; gap: 4px; }
.rsvp { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.rsvp.yes { color: var(--good); }
.rsvp.no { color: var(--bad); }
.rsvp.maybe { color: var(--accent); }
.event-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.plan-list { display: grid; gap: 4px; margin-top: 4px; font-size: 13px; }
.plan-list .link { font-size: 12px; margin-left: 4px; }
.event-actions button:not(.link) { min-height: 30px; padding: 3px 10px; font-size: 13px; }

.check-in { display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.check-in.waiting { border-color: var(--accent); }
.check-in p { font-size: 14px; overflow-wrap: anywhere; }
.check-in-status { color: var(--muted); }
.check-in.waiting .check-in-status { color: var(--accent); }
.check-in.go .check-in-status { color: var(--good); }
.check-in.hold .check-in-status { color: var(--bad); }

/* S86: picture, then name, details and buttons in one column, so nothing wraps off to the right. */
/* JB6: a job's write-up in Needs you keeps its lines. */
.job-writeup { white-space: pre-wrap; overflow-wrap: anywhere; }

/* V12: open votes over the chat, and every vote in the Votes panel. */
.vote-cards { display: grid; gap: 6px; }
.vote-cards:empty { display: none; }
.vote-card { display: grid; gap: 4px; }
.vote-card.open { border-left: 3px solid var(--accent); }
.vote-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vote-options li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.crew-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.crew-main { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.crew-main small { overflow-wrap: anywhere; }
.crew-main small:empty { display: none; }
.crew-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doorbell { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.doorbell.listening { color: var(--good); }
.doorbell.paused { color: var(--accent); }
.sign-in-elsewhere { display: flex; flex-wrap: wrap; gap: 8px; }
.sign-in-elsewhere:empty { display: none; }
.crew-actions { display: flex; flex-wrap: wrap; gap: 0 2px; min-width: 0; }
.state { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #5b6278; }
.state.active { background: var(--good); }
.state.idle { background: var(--accent); }
.state.working { background: #7fd4ff; }
.swatch { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }

.note { padding: 8px 10px; background: var(--panel-2); border-radius: 8px; }
.note p { font-size: 14px; overflow-wrap: anywhere; }

/* Dialogs */

.modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  color: var(--text);
  background: #dccaa2;
  border: 1px solid #000;
  border-radius: 0;
  padding: 3px;
  box-shadow:
    inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #4d3620,
    inset 2px 2px 0 #ecdfbd, inset -2px -2px 0 #a98d5c,
    0 14px 40px rgba(0, 0, 0, .65);
}
.modal::backdrop { background: rgba(18, 10, 4, .72); }
.modal > :not(.modal-head) { margin-left: 15px; margin-right: 15px; }
.modal > .modal-head + * { margin-top: 14px; }
.modal > textarea { width: calc(100% - 30px); }
.modal > :last-child { margin-bottom: 15px; }
.modal p { margin-bottom: 12px; }
/* The dialog's title bar, in the same brick-to-copper as the windows. */
.modal-head, .game-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 4px 6px 4px var(--surface-padding);
  color: var(--surface-title-ink);
  background: var(--surface-title);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .45), inset 0 -1px 0 rgba(0, 0, 0, .35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}
.modal-head h2, .game-panel-head h2 { min-width: 0; overflow-wrap: anywhere; font: 700 14px/1.3 var(--ui); color: inherit; }
.modal-head button { color: #2c1e11; background: linear-gradient(#f6ecce, #dfcd9f); border-color: #3c2a14; text-shadow: none; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.copy-row { display: flex; gap: 8px; }
.steps { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; display: grid; gap: 4px; }
.steps b { color: var(--text); }
.also { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.also h3 { width: 100%; font-size: 14px; }

@media (max-width: 960px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .legend-key { margin-left: 0; }
}

/* Cities and houses */

a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  min-height: 34px;
  text-decoration: none;
}
a.button:hover { border-color: var(--muted); }
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.stack { display: grid; gap: 10px; align-content: start; }
.stack > h2, .stack > h3 { margin-bottom: 0; }
.stack > * { min-width: 0; }
.stack > a.button, .stack > button { justify-self: start; }
textarea.plain { font-family: inherit; font-size: 14px; }

.cities { margin-bottom: 16px; }
.cities .panel-head { margin-bottom: 6px; }
.cities .panel-head h2 { margin: 0; }
.cities .room-list { margin: 0; }

.flash {
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  font-size: 14px;
}
.flash[hidden] { display: none; }

.city-caption { display: grid; gap: 2px; max-width: 1000px; justify-self: center; width: 100%; }
.city-title { font-size: 17px; }
.city-caption p { overflow-wrap: anywhere; }
.legend-note, .city-caption .muted { font-size: 13px; }

/* The city map is a window like the worlds', and the map in it is drawn by the same renderer. */
.city-stage { width: 100%; max-width: 1000px; justify-self: center; }
.wd-city .wd-well .world { height: min(62vh, 560px); min-height: 300px; }
.world-live.city-over canvas { cursor: pointer; }
/* What a house on the city map is and what your bots may do there, beside the pointer. */
.wd-city .wd-well, .wd-hovercard { position: relative; }
.game-menu.city-card {
  /* W109: the frame is .game-menu's; only where it sits is the map's own. */
  position: absolute;
  z-index: 3;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}
.game-menu.city-card[hidden] { display: none; }
.game-menu.city-card.has-repository { pointer-events: auto; }
.city-card a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
.build-collections { margin-bottom: 12px; }
.build-collections .field { margin: 0; }
.build-collections select { max-width: 100%; }
.city-card-bot { color: var(--text); }
.city-card-bot.allowed { color: #1f6b3c; }
.city-card-hint { color: var(--muted); }
.house-access { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.house-access p { margin: 0; }
.house-access .access.allowed strong { color: var(--good, #2a9560); }
@media (max-width: 560px) {
  .wd-city .wd-well .world { height: min(46vh, 420px); }
}

.where { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.where-house { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.where-house p { font-size: 13px; }
.house-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  width: 100%;
  min-width: 0;
  text-align: left;
}
.house-name { overflow-wrap: anywhere; }
.house-btn small { color: var(--muted); }
.where-bots { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.where-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.where-bot-main { min-width: 0; flex: 1; display: grid; }
.where-bot-main small { overflow-wrap: anywhere; }
.where-bot .swatch { flex: none; margin: 0; }

.ask { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.ask p { font-size: 14px; overflow-wrap: anywhere; }
.goal {
  padding-left: 8px;
  border-left: 2px solid var(--accent);
  white-space: pre-wrap;
}
.panel.waiting { border-color: var(--accent); }
.panel.waiting[hidden], .panel[hidden] { display: none; }

.house { max-width: 820px; margin: 0 auto; padding: 12px 16px 40px; display: grid; gap: 14px; }
.top-link { margin-left: auto; font-size: 14px; }
.rooms, .people, .rows, .recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rooms li { display: grid; gap: 2px; }
.rooms small { overflow-wrap: anywhere; }
.people li { display: flex; align-items: center; gap: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-width: 0; }
.row-main { display: grid; min-width: 0; flex: 1 1 180px; }
.row-main small { overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row > .error { flex-basis: 100%; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.toggle input { width: auto; }
.recent { font-size: 13px; }
.status-ok { color: var(--good); }
.status-attention { color: var(--bad); }

.field[hidden], .floors[hidden] { display: none; }

/* Changing a space's floors. */

.floor-card { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.look-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.checks legend { font-size: 13px; padding: 0 4px; }
.guest-tag { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 650; }

/* Signing in and passkeys */

.cards + .cities { margin: 16px 0 0; }

.card-form { display: flex; flex-direction: column; gap: 4px; }
.card-form > button { align-self: flex-start; margin-top: 4px; }

.access h2 { margin-bottom: 4px; }
.access .note { margin-bottom: 8px; }
.create-account { display: grid; gap: 4px; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.create-account[hidden] { display: none; }
.create-account .field { margin-bottom: 4px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* A82: the ways in, side by side and alike. The one picked looks pressed. */
.ways { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.ways .sign-in-elsewhere { display: contents; }
.ways .way, .ways .sign-in-elsewhere a { flex: 1 1 180px; text-align: center; }
.ways .way[aria-pressed="true"] { background: linear-gradient(#ffd98a, #f2a73f); border-color: #6b3a08; color: #2e1805; }
.sign-in-choices { display: grid; gap: 8px; justify-items: start; }
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.nudge p { margin: 0; }
.owner-key-control { display: grid; gap: 2px; justify-items: start; }

/* The owner key, tucked under the passkey as the way in for anyone who has no passkey. */
.quiet { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.quiet summary { width: fit-content; color: var(--muted); font-size: 13px; cursor: pointer; }
.quiet summary:hover { color: var(--text); }
.quiet[open] summary { margin-bottom: 10px; }

.passkey-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.passkey-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; min-width: 0; }
.passkey-main { display: grid; min-width: 0; flex: 1 1 160px; }
.passkey-main strong, .passkey-main small { overflow-wrap: anywhere; }
.add-passkey { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.add-passkey input { flex: 1 1 160px; width: auto; min-width: 0; }

/* Trust: the gate, rules and standing */

.gate { width: 100%; max-width: 1000px; justify-self: center; }
.row-name { display: flex; align-items: center; min-width: 0; }
.row-actions { flex-wrap: wrap; }

/* A name that opens that person's standing. */
.person-btn {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.person-btn:hover { text-decoration-color: var(--muted); }
.person-btn .swatch { flex: none; }
.who-people { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.who-hint { margin: -4px 0 10px; font-size: 13px; }

/* Plain counts, one fact to a line. */
.facts { margin: 0; display: grid; gap: 6px; }
.facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.modal .stack p { margin-bottom: 0; }

.requirements { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.requirements li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.requirements .mark { width: 1.2em; text-align: center; font-weight: 700; }
.requirements .met .mark { color: var(--good); }
.requirements .short .mark { color: var(--bad); }

.ask .standing { padding: 6px 8px; border-radius: 6px; background: var(--panel-2); font-size: 13px; }

.rules-text { padding-left: 8px; border-left: 2px solid var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; }
.card.rules { margin-bottom: 16px; gap: 10px; }
.card.rules h2 { margin-bottom: 0; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 550; cursor: pointer; }
.check input { width: auto; flex: none; }

/* Everything on an invite page that waits on the rules being accepted. */
.gated { min-width: 0; margin: 0; padding: 0; border: 0; }

.number-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.waiting-list { margin-bottom: 4px; }
.fine { font-size: 13px; }

/* The world */

.world {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  overflow: hidden;
  /* The sky's own colours, so the map never opens on a black box while it paints its first frame. */
  background: linear-gradient(#78b4e2, #cfe6d6);
}
.world canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The map is a viewport: a warm vignette and a thin gold keyline over it, like a picture in a frame. */
.world::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 70px rgba(52, 26, 8, .3), inset 0 0 0 1px rgba(255, 226, 160, .3);
}
.world-live canvas { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.world-live.world-grabbing canvas { cursor: grabbing; }
.world-live.world-tool canvas { cursor: crosshair; }
.world-live.world-over canvas { cursor: pointer; }
.world canvas:focus-visible { outline: 2px solid #ffd27a; outline-offset: -4px; }
.world-tip {
  position: absolute;
  z-index: 2;
  max-width: min(80%, 22em);
  padding: .2em .75em;
  border-radius: 2px;
  background: #fff3cc;
  color: #2b1d10;
  border: 1px solid #3c2a14;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.world-tip[hidden] { display: none; }

/* The world's window. A bevelled tan game frame in the manner of a turn-of-the-century desktop
   game: raised panels, a sunken well for the map, chunky tool buttons, LCD readouts and a status
   bar. Everything lives under .wd, so nothing else on the site is touched. Targets are at least
   44px on a phone, and the text never drops under 12px.

   <section class="wd">
     <header class="wd-title"><span class="wd-title-text">...</span></header>
     <div class="wd-bar wd-stats"> <div class="wd-stat"><span class="wd-stat-label">..</span><output class="wd-lcd">..</output></div> </div>
     <div class="wd-bar wd-tools" role="toolbar"> <button class="wd-btn" aria-pressed="false"><span class="wd-icon"></span><span class="wd-btn-label">..</span></button> </div>
     <div class="wd-well"><div class="world"></div></div>
     <footer class="wd-status"><span class="wd-seg">..</span></footer>
   </section> */

.wd {
  --wd-face: #dccaa2;
  --wd-face-2: #ecdfbd;
  --wd-hi: #fff7dc;
  --wd-lo: #a98d5c;
  --wd-dk: #4d3620;
  --wd-ink: #2b1d10;
  --wd-brick: #6b2216;
  --wd-brick-2: #a94a26;
  --wd-copper: #cf7a34;
  --text: #2c1e11;
  --muted: #5d482c;
  --accent: #c15f26;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
  color: var(--wd-ink);
  background: var(--wd-face);
  border: 1px solid #000;
  font: 12px/1.35 var(--ui);
  box-shadow:
    inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-dk),
    inset 2px 2px 0 var(--wd-face-2), inset -2px -2px 0 var(--wd-lo),
    0 4px 0 rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .5);
}
.wd *, .wd *::before, .wd *::after { box-sizing: border-box; }
.wd { --scroll-thumb: #997a4c; --scroll-track: #efe3c2; }
.wd button { font-family: inherit; }

.wd-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 3px 4px 3px 9px;
  color: #fff3d2;
  font-weight: 700;
  background: var(--surface-title);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .45), inset 0 -1px 0 rgba(0, 0, 0, .35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
}
/* The emblem: one lit and one shaded half of a tile, which is all the city is made of. */
.wd-title::before {
  content: "";
  flex: none;
  width: 22px;
  height: 13px;
  background: linear-gradient(90deg, #ffeeb0 50%, #d09228 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.wd-title-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.2 var(--serif); letter-spacing: .01em; }

/* A row of things on a raised strip. */
.wd-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  background: var(--wd-face);
  box-shadow: inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-lo);
}

/* Chunky buttons: raised, and sunken while pressed or switched on. */
.wd .wd-btn, .wd .wd-tbtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  min-height: 48px;
  padding: 4px 6px;
  color: var(--wd-ink);
  background: linear-gradient(#f3e8c9, #dac79b);
  border: 1px solid #3a2712;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
  box-shadow: inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-lo), 0 1px 0 rgba(0, 0, 0, .3);
  transform: none;
  filter: none;
}
.wd .wd-tbtn {
  min-width: 22px;
  min-height: 24px;
  flex-direction: row;
  padding: 0 9px;
  font-size: 12px;
  border-color: #2b1608;
}
/* HC8: the balance coin in the bar. */
/* HC27: credits that just arrived, floating up off the coin for a moment. */
.wd .coin-wrap { position: relative; display: inline-flex; }
.wd .coin-gain {
  position: absolute;
  right: 2px;
  top: -2px;
  font-weight: 800;
  font-size: 12px;
  color: var(--good);
  pointer-events: none;
  opacity: 0;
}
.wd .coin-gain.shown { animation: coin-gain 3s ease-out forwards; }
@keyframes coin-gain {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 1; transform: translateY(-10px); }
  75% { opacity: 1; transform: translateY(-12px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .wd .coin-gain.shown { animation: none; opacity: 1; } }
.wd .wd-tbtn.coin { gap: 5px; font-variant-numeric: tabular-nums; }
.wd .coin-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #e8b730 55%, #a8770f);
  box-shadow: inset 0 0 0 1px #7a5508;
}
.wd .wd-btn:hover, .wd .wd-tbtn:hover { background: linear-gradient(#fbf2d8, #ead9ae); filter: none; }
.wd .wd-btn:active, .wd .wd-tbtn:active {
  background: #cdb98a;
  box-shadow: inset 1px 1px 3px rgba(60, 40, 10, .6);
  transform: none;
  padding-top: 5px;
  padding-left: 7px;
}
/* A tool that is picked looks pushed in and lit, so it is plain which one is in your hand. */
.wd .wd-btn[aria-pressed="true"], .wd .wd-btn.on {
  background: linear-gradient(#ffd98a, #f0aa44);
  box-shadow: inset 2px 2px 4px rgba(90, 40, 0, .55), 0 0 0 1px #fff1c0;
  padding-top: 5px;
  padding-left: 7px;
}
.wd .wd-btn:disabled { color: #8d7a58; opacity: 1; cursor: default; text-shadow: 1px 1px 0 var(--wd-hi); }
.wd .wd-btn:focus-visible, .wd .wd-tbtn:focus-visible { outline: 2px solid #8e2f18; outline-offset: -4px; }
.wd .wd-tbtn:focus-visible { outline-color: #fff3d2; outline-offset: 1px; }
.wd .wd-btn.wide { flex-direction: row; gap: 6px; padding: 4px 14px; }
.wd .wd-icon { display: block; width: 32px; height: 32px; line-height: 0; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35)); }
.wd .wd-icon canvas { width: 100%; height: 100%; display: block; }
.wd-btn-label { font-size: 12px; line-height: 1.1; }
.city-card-purpose { display: block; max-width: 260px; margin-top: 2px; font-style: italic; white-space: normal; }
.wd-btn-label.long { font-size: 10px; letter-spacing: -.02em; white-space: nowrap; }
.wd-lock { display: block; font-size: 10px; line-height: 1.1; color: #7a5b28; }
.wd-lock:empty { display: none; }
.wd .wd-btn.locked .wd-icon { filter: grayscale(1); opacity: .55; }
.wd-news {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 6px 14px;
  border: 2px solid #5a3a08;
  background: #f6e7bf;
  color: #3a2408;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}
.wd-news[data-stage="striking"] { background: #a42c17; border-color: #4e1206; color: #fff3df; }

/* Readouts: black glass with glowing figures, in a bezel. */
.wd-stats { align-items: stretch; }
.wd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 92px; flex: 0 1 150px; }
.wd-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4d3620; }
.wd-lcd {
  display: block;
  padding: 2px 8px;
  color: #92ffa6;
  background: linear-gradient(#050b07, #0d1a11 60%, #0a140d);
  font: 700 16px/1.3 "Courier New", Consolas, monospace;
  text-align: right;
  letter-spacing: .08em;
  text-shadow: 0 0 6px rgba(120, 255, 150, .6);
  border: 1px solid #2a1b0e;
  box-shadow: inset 0 2px 5px #000, 0 0 0 1px var(--wd-lo), 0 1px 0 1px var(--wd-hi);
}
.wd-lcd.amber { color: #ffc65c; text-shadow: 0 0 6px rgba(255, 190, 70, .6); }

/* A sunken well that holds the map. */
.wd-well {
  padding: 3px;
  background: #3b2a18;
  box-shadow: inset 1px 1px 0 var(--wd-dk), inset -1px -1px 0 var(--wd-hi), inset 2px 2px 0 var(--wd-lo);
}
.wd-well .world { height: min(68vh, 680px); min-height: 280px; }

/* The status bar: sunken cells along the bottom. */
.wd-status { display: flex; flex-wrap: wrap; gap: 3px; }
.wd-seg {
  flex: 1 1 120px;
  min-width: 0;
  padding: 4px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--wd-face-2);
  box-shadow: inset 1px 1px 0 var(--wd-lo), inset -1px -1px 0 var(--wd-hi);
}
.wd-seg.fixed { flex: 0 0 auto; }
/* Your town and your goal: a line of small plain text across the whole bar. */
.wd-status .wd-town { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }

/* A brick panel, for notes and the guide. */
.wd-teal {
  padding: 8px 10px;
  color: #fff3d2;
  background: var(--wd-brick-2);
  box-shadow: inset 1px 1px 0 var(--wd-copper), inset -1px -1px 0 var(--wd-brick);
}
.wd-teal a { color: #fff; }

@media (max-width: 560px) {
  .wd-bar { gap: 3px; padding: 3px; }
  .wd .wd-btn { flex: 1 1 56px; }
  .wd-stat { flex-basis: 64px; min-width: 64px; }
  .wd-well .world { height: min(58vh, 520px); }
}

/* The window's title bar can hold links, and a status bar can say a whole sentence. */
.wd-title-actions { display: flex; flex: none; gap: 4px; }
.wd a.wd-btn, .wd a.wd-tbtn { text-decoration: none; }
.wd-status .wd-seg[role="status"] { white-space: normal; overflow-wrap: anywhere; }
.wd-seg.fixed { max-width: 45%; font-weight: 700; }
.wd-seg.fixed:empty { display: none; }
@media (max-width: 560px) {
  .wd-title .wd-tbtn { min-height: 36px; padding: 0 10px; }
  .wd .wd-tools .wd-btn { flex: 1 1 48px; padding-left: 2px; padding-right: 2px; }
  .wd-lcd { padding: 2px 4px; font-size: 13px; letter-spacing: 0; }
}

/* A plain window around a page's own content: a title bar over tan paper. */
.wd-panel { max-width: 100%; }
.wd-body {
  --bg: #fff9e8;
  --panel: #e3d3aa;
  --panel-2: #efe3c2;
  --line: #a58a58;
  --btn-hi: #f6ecce;
  --btn-lo: #dfcd9f;
  --btn-edge: #6d5430;
  --good: #2a6c22;
  --bad: #a3261a;
  --accent-ink: #fff6e0;
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  color: var(--wd-ink);
  background: var(--wd-face);
  box-shadow: inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-lo);
}
.wd-body h2 { color: #6e2a14; font: 700 16px/1.25 var(--serif); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.wd-body a { color: #8a3a12; }

/* The landing page: The Commons first, then what this is and the ways in. */
.masthead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.masthead .brand { font-size: 26px; line-height: 1; }
.masthead-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: linear-gradient(#f6ecd0, #d6c192);
  border: 1px solid #1d1209;
  box-shadow: inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #a98d5c, 0 3px 0 rgba(0, 0, 0, .45);
}
.masthead-logo canvas { display: block; width: 46px; height: 46px; }
.masthead nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.cards-home { margin-top: 16px; }

.world-summary { font-size: 15px; }
.world-help { color: var(--muted); font-size: 13px; }
.world-help summary { width: fit-content; cursor: pointer; }
.world-help ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.around { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.around-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(120, 90, 44, .35); }
.around-name { min-width: 0; overflow-wrap: anywhere; }
.around-row button.link { min-height: 32px; padding: 2px 8px; }

/* The list of worlds, and starting one. */
.worlds-page { max-width: 900px; margin: 0 auto; padding: 18px 16px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.worlds-page .masthead { margin-bottom: 0; }
.world-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.world-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 10px;
  background: #efe3c2;
  border: 1px solid #7b6038;
  box-shadow: inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #a98d5c;
}
.world-row-icon { width: 44px; height: 44px; line-height: 0; }
.world-row-icon canvas { width: 100%; height: 100%; display: block; }
.world-row-main { display: grid; gap: 0; min-width: 0; }
.world-row-name { width: fit-content; max-width: 100%; font: 700 18px/1.25 var(--serif); color: #6e2a14; text-decoration-color: rgba(110, 42, 20, .35); text-underline-offset: 3px; }
.world-row-name:hover { color: #9a3a14; }
.world-row-facts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.world-row-facts .wd-lcd { font-size: 13px; padding: 1px 7px; letter-spacing: .04em; }
@media (max-width: 620px) {
  .world-row { grid-template-columns: 44px minmax(0, 1fr); }
  .world-row-facts { grid-column: 1 / -1; justify-content: flex-start; }
}
.start-world { gap: 10px; }

.wd-title-sub { font: 400 13px/1.2 var(--ui); color: #ffdcae; letter-spacing: 0; }
@media (max-width: 640px) { .wd-title-sub { display: none; } }

/* A lamp in the readout strip that says the map is the city as it is now. */
.wd-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  margin-left: auto;
  padding: 4px 11px 4px 9px;
  color: #4d3620;
  font: 700 11px/1 var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--wd-face-2);
  box-shadow: inset 1px 1px 0 var(--wd-lo), inset -1px -1px 0 var(--wd-hi);
}
.wd-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #a8ff9c 28%, #2fb52a 72%, #136b10);
  box-shadow: 0 0 6px 1px rgba(80, 255, 70, .65), inset 0 -1px 2px rgba(0, 0, 0, .4);
  animation: wd-blink 2.4s ease-in-out infinite;
}
@keyframes wd-blink { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .wd-lamp { animation: none; } }

.wd-body > button, .wd-body > a.button { justify-self: start; }

@media (max-width: 560px) {
  .masthead { margin-bottom: 12px; }
}

.wd-glyph { display: block; font: 700 26px/1 var(--ui); height: 32px; line-height: 32px; }

/* Inside a dialog a card is only a group, not a second sheet of paper. */
.modal .card { padding: 0; background: none; border: 0; box-shadow: none; }
.modal .card h2 { margin-top: 0; }

@media (max-width: 560px) {
  .wd-stat { flex: 1 1 22%; min-width: 0; }
  .wd-stat-label { font-size: 12px; letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 900px) {
  .about { column-count: 2; column-gap: 44px; }
  .about h2, .about p, .about ol, .about dl { max-width: none; }
  .about h2 { break-after: avoid; }
  .about p, .about ol, .about dt, .about dd { break-inside: avoid; }
}

/* The lamp sits in the title bar, where it costs no row of its own. */
.wd-title .wd-live { margin-left: 0; align-self: center; padding: 0 8px 0 4px; color: #ffe9c0; background: none; box-shadow: none; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }

/* The rooms and the city pages keep their dark panels, with the same engraved headings and a framed picture. */
.panel > h2, .panel-head h2, .panel > .stack > h2 { color: #ffd890; font: 700 16px/1.25 var(--serif); text-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.top h1, .city-title { font-family: var(--serif); }
.stage {
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 0 0 0 3px #dccaa2, 0 0 0 4px #000, inset 0 0 0 1px rgba(255, 226, 160, .25), 0 8px 22px rgba(0, 0, 0, .5);
}
.live { border-radius: 2px; }

/* The game. The world's window fills the screen at "/" and "/world/{id}", and every button the site
   has is in its title bar: the build tools, zoom, and each panel that opens over the map. The window
   is a grid with the map in its middle row. The tools and the panels sit in that same row, over the
   map. W115 reserves scene space for docked panels through the shared window layout below. */
html.in-game, html.in-game body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.game { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background: #3b2a18; z-index: 1; }
.wd.wd-game {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 3px;
  border: 0;
  box-shadow:
    inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-dk),
    inset 2px 2px 0 var(--wd-face-2), inset -2px -2px 0 var(--wd-lo);
}
.wd-game > .wd-title { grid-row: 1; grid-column: 1; }
.wd-game > .wd-stats { grid-row: 2; grid-column: 1; }
.wd-game > .wd-well { grid-row: 3; grid-column: 1; position: relative; z-index: 0; min-height: 0; }
.wd-game > .wd-status { grid-row: 4; grid-column: 1; }
.wd-game .wd-well .world { position: absolute; inset: 3px; width: auto; height: auto; min-height: 0; }
.world-live canvas { -webkit-touch-callout: none; }

/* Title bar buttons. A wide screen has them all in the bar. A narrow one keeps the five every place
   ends in, in short words, and puts the rest behind More. */
.wd-game .wd-title-actions { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
.wd-game .wd-title-actions .short { display: none; }
.wd-game .wd-title-actions .account .long { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-game .wd-title-actions .wd-tbtn { white-space: nowrap; }
/* The way back comes before the name, and the map has nowhere to go back to. */
.wd-game .wd-title-back { flex: none; }
.wd-title-back:empty { display: none; }
@media (max-width: 1099px) {
  .wd-game .wd-title-actions .sec { display: none; }
}
/* Just wide enough for every button, the lamp stands in for the word so the place's name stays whole. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .wd-game .wd-title .wd-live { font-size: 0; gap: 0; padding: 0 2px; }
}
/* The Commons has more buttons than fit until here, so it keeps the narrower bar a little longer. */
@media (min-width: 1100px) and (max-width: 1359px) {
  .wd-game:not(.wd-room) .wd-title-actions .sec { display: none; }
}
@media (max-width: 759px) {
  .wd-game .wd-title { gap: 5px; padding-left: 6px; }
  .wd-game .wd-title-actions { gap: 3px; }
  .wd-game .wd-title-actions .wd-tbtn { min-height: 34px; padding: 0 8px; }
  .wd-game .wd-title-actions .long { display: none; }
  .wd-game .wd-title-actions .short { display: inline; }
  .wd-game .wd-title-actions .more .long { display: inline; }
  .wd-game .wd-title .wd-live { font-size: 0; gap: 0; padding: 0 2px; }
  .wd-game .wd-title-text { font-size: 14px; }
  .wd-game .wd-stats { flex-wrap: nowrap; }
  .wd-game .wd-stat { flex: 1 1 0; min-width: 0; }
}
@media (pointer: coarse) {
  .wd-game .wd-title-actions .wd-tbtn { min-height: 36px; }
}
@media (max-width: 420px) {
  .wd-game .wd-title::before { display: none; }
  .wd-game .wd-title-actions .wd-tbtn { padding: 0 7px; }
}

/* The build tools and the view buttons: a floating panel on the map's left, or a dock. */
.wd-game > .game-palette {
  grid-row: 3;
  grid-column: 1;
  align-self: start;
  justify-self: start;
  z-index: 3;
  margin: 12px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  background: var(--wd-face);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-dk), 0 3px 0 rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .4);
}
.game-palette .wd-tools {
  display: grid;
  grid-template-columns: repeat(2, 56px);
  align-content: start;
  gap: 4px;
  padding: 6px;
}
.game-palette .wd-tools::before {
  content: "Build";
  grid-column: 1 / -1;
  padding-bottom: 3px;
  color: #4d3620;
  font: 700 11px/1.2 var(--ui);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px groove rgba(120, 90, 44, .5);
}
/* W99: put away, the tools take no room at all. */
.game-palette .wd-tools[hidden] { display: none; }
.game-palette .wd-tools .wd-btn { min-width: 0; min-height: 0; height: 58px; padding: 3px 2px; flex: none; }
.game-palette .wd-tools .wd-btn.locked { height: auto; min-height: 58px; }
.game-view {
  display: grid;
  grid-template-columns: repeat(2, 56px);
  gap: 4px;
  padding: 6px;
  background: var(--wd-face);
  box-shadow: inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-lo);
}
.game-view .wd-btn { min-width: 0; min-height: 0; height: 48px; padding: 2px; flex: none; }
.game-view .wd-glyph { height: 24px; line-height: 24px; font-size: 22px; }

/* The status bar. The map gets the height it leaves, so under a map it's one line whatever it says,
   and what doesn't fit ends in an ellipsis (W74). */
.wd-game .wd-status .wd-seg[role="status"] { flex: 2 1 200px; }
.wd-game .wd-status .wd-town { flex: 3 1 300px; }
.wd-town-counts { margin-right: .2em; }
.wd-map > .wd-status { flex-wrap: nowrap; }
.wd-map .wd-status .wd-seg[role="status"], .wd-map .wd-status .wd-town { white-space: nowrap; overflow-wrap: normal; }

/* Panels: bevelled sheets over the map, one at a time, from the title bar. On a wide screen one
   stands at the right and leaves the middle of the map clear. */
.game-panel, .game-menu { font: 14px/1.45 var(--ui); }
.wd-game > .game-panel {
  grid-row: 3;
  grid-column: 1;
  align-self: start;
  justify-self: end;
  z-index: 4;
  margin: 12px;
  width: min(400px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  padding: 3px;
  color: var(--text);
  background: #dccaa2;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #4d3620,
    inset 2px 2px 0 #ecdfbd, inset -2px -2px 0 #a98d5c,
    0 4px 0 rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .5);
}
.wd-game > .game-panel[hidden] { display: none; }
.wd-game > .game-panel-about, .wd-game > .game-panel-rooms, .wd-game > .game-panel-account, .wd-game > .game-panel-tutorial { width: min(460px, calc(100% - 24px)); }
/* The tutorial's rows open and shut like the steps of a recipe. A tick is only ever earned (G6). */
.tutorial-part { display: grid; gap: 2px; margin-top: 12px; }
.tutorial-part:first-of-type { margin-top: 0; }
.tutorial-part h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: #6e2a14; font: 700 15px/1.25 var(--serif); }
.tutorial-part h3 small { font: 400 12px/1.2 var(--ui); }
.tutorial-list { display: grid; gap: 2px; }
.tutorial-row { border-bottom: 1px solid rgba(120, 90, 44, .35); }
.tutorial-row summary { display: flex; align-items: center; gap: 7px; padding: 6px 2px; font-weight: 700; cursor: pointer; list-style: none; }
.tutorial-row summary::-webkit-details-marker { display: none; }
.tutorial-row summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 400; }
.tutorial-row[open] summary::after { content: '\2212'; }
.tutorial-row > p, .tutorial-row > ol { margin: 0 0 7px; }
.tutorial-row > ol { padding-left: 22px; }
.tutorial-row > .wd-btn { margin-bottom: 10px; }
.tutorial-tick { flex: 0 0 18px; display: inline-grid; place-items: center; height: 18px; border: 1px solid var(--line); background: var(--bg); color: var(--good); font-size: 13px; line-height: 1; }
.tutorial-step.done summary { color: var(--muted); font-weight: 400; }
.tutorial-docs { margin-top: 12px; }
/* I132, I140: the Lific board is a corkboard of sticky notes, wide enough for its columns and
   scrolling sideways when it isn't. A note's colour is its priority. */
.wd-game > .game-panel-lific { width: min(900px, calc(100% - 24px)); }
.lific-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 10px; overflow-x: auto; padding: 10px; align-items: start;
  background: radial-gradient(circle at 20% 30%, rgba(90, 55, 25, .25) 1px, transparent 1.5px) 0 0 / 9px 9px, radial-gradient(circle at 70% 60%, rgba(255, 230, 190, .18) 1px, transparent 1.5px) 0 0 / 7px 7px, #b98a57;
  box-shadow: inset 0 0 0 4px #7a5230, inset 0 0 0 5px #4d3620, inset 0 2px 8px rgba(0, 0, 0, .35); }
.lific-kanban:empty { display: none; }
.lific-column { display: grid; gap: 12px; align-content: start; min-width: 0; min-height: 120px; padding: 4px 4px 10px; }
.lific-column h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0; padding: 3px 8px; color: #fff3d6; background: rgba(60, 34, 16, .55); font: 700 14px/1.25 var(--serif); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.lific-column h3 small { font: 400 12px/1.2 var(--ui); color: #f2dcb0; }
.lific-card {
  --note: #fff07a;
  position: relative; display: grid; gap: 4px; align-content: start; min-height: 96px; padding: 16px 10px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .04) 85%, rgba(0, 0, 0, .1)), var(--note);
  color: #2d2414; font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .12), 3px 8px 10px -4px rgba(0, 0, 0, .45);
  transform: rotate(-1.4deg); transition: transform .12s ease;
}
.lific-card:nth-of-type(even) { transform: rotate(1.2deg); }
.lific-card:nth-of-type(3n) { transform: rotate(-.4deg); }
.lific-card:hover, .lific-card:focus-within { transform: rotate(0) scale(1.03); z-index: 1; }
.lific-card[draggable="true"] { cursor: grab; }
.lific-card::before { content: ''; position: absolute; top: -7px; left: 50%; width: 46px; height: 16px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 252, 235, .55); box-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
.lific-card[data-priority="low"] { --note: #b8f0a4; }
.lific-card[data-priority="medium"] { --note: #a8dcff; }
.lific-card[data-priority="high"] { --note: #ffc27a; }
.lific-card[data-priority="urgent"] { --note: #ff9fb4; }
.lific-card p { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.lific-card .muted { color: rgba(45, 36, 20, .7); font-size: 11px; }
.lific-id { font: 700 11px/1.2 var(--ui); color: rgba(45, 36, 20, .75); }
.lific-card-actions { display: flex; gap: 4px; align-items: center; margin-top: 2px; font-family: var(--ui); }
.lific-card-actions select, .lific-card-actions button { min-height: 26px; padding: 0 6px; font-size: 11px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(45, 36, 20, .35); }
.lific-empty { margin: 0; padding: 8px; font-size: 12px; font-style: italic; color: #f2dcb0; }
.lific-done-toggle { justify-self: start; min-height: 26px; padding: 0 8px; font-size: 12px; background: rgba(255, 252, 235, .7); color: #2d2414; border: 1px solid rgba(60, 34, 16, .6); }
.lific-add input { width: 100%; padding: 8px; font-size: 13px; background: rgba(255, 252, 235, .7); border: 1px dashed rgba(60, 34, 16, .6); }
.lific-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 0; font-size: 12px; }
.lific-star { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px; border: 1px solid currentColor; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lific-star:hover, .lific-star:focus-visible { text-decoration: underline; }
.lific-star span[aria-hidden] { color: #c98a00; }
.lific-star-count { padding-left: 6px; border-left: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.lific-star-count[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lific-card { transition: none; } }

.game-panel:focus { outline: none; }
.game-panel:focus-visible { outline: 2px solid #8e2f18; outline-offset: -2px; }
.modal-head button, .game-panel-head .wd-tbtn {
  flex: none;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
}
.game-panel-body {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: var(--surface-gap);
  align-content: start;
  padding: var(--surface-padding);
  background: #efe3c2;
  box-shadow: inset 1px 1px 0 #a98d5c, inset -1px -1px 0 #fff7dc;
}
.game-panel-body > * { min-width: 0; }
.game-panel .card { padding: 0; background: none; border: 0; box-shadow: none; }
.game-panel .card h2 { margin-top: 0; }
.game-panel .about { width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; column-count: 1; }
.game-panel .about h2 { font-size: 17px; margin: 18px 0 6px; max-width: none; }
.game-panel .about h2:first-child { margin-top: 0; }
.game-panel .about p, .game-panel .about ol, .game-panel .about dl { max-width: none; }
.game-more { display: grid; gap: 8px; }
.game-more > * { justify-self: stretch; }
.game-panel .world-summary { font-size: 15px; }
.game-panel .panel-head h2 { color: #6e2a14; font: 700 16px/1.25 var(--serif); text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }

/* A menu where something was clicked. */
.game-menu {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 3px;
  color: var(--text);
  background: #dccaa2;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #4d3620,
    0 6px 18px rgba(0, 0, 0, .5);
}
.game-menu-head {
  display: grid;
  gap: 1px;
  padding: 5px 9px 6px;
  color: #fff3d2;
  background: linear-gradient(90deg, #6b2216, #a94a26 62%, #cf7a34);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .45), inset 0 -1px 0 rgba(0, 0, 0, .35);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
}
.game-menu-head strong { font: 700 14px/1.2 var(--serif); overflow-wrap: anywhere; }
.game-menu-head small { color: #ffdcae; font-size: 12px; }
.game-menu .game-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 600 13px/1.2 var(--ui);
  text-align: left;
  transform: none;
  filter: none;
}
.game-menu .game-menu-item:hover, .game-menu .game-menu-item:focus-visible {
  color: #2b1d10;
  background: linear-gradient(#ffd98a, #f0aa44);
  outline: none;
}
.game-menu .game-menu-item[aria-checked="true"] { background: #f4dba0; box-shadow: inset 3px 0 0 #c15f26; }
.game-menu .game-menu-item.danger { color: #a3261a; }
.game-menu-icon { flex: none; width: 22px; height: 22px; line-height: 0; }
.game-menu-icon canvas { display: block; width: 100%; height: 100%; }
.game-menu-cost { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.game-menu-gap { margin: 3px 4px; border: 0; border-top: 2px groove rgba(120, 90, 44, .5); }
/* W109: a card's rows, and the line under a hover saying what a click does. */
.game-menu-body { display: grid; gap: 3px; padding: 6px 9px; }
.game-menu-hint { margin: 0; padding: 4px 9px 5px; color: var(--muted); font-size: 12px; }
.game-menu-more { margin-left: auto; padding-left: 10px; font-size: 16px; line-height: 1; }
.game-menu-cost + .game-menu-more { margin-left: 0; }
.game-menu .game-menu-back { color: var(--muted); }
.game-menu .game-menu-back .game-menu-more { margin-left: 0; padding: 0 2px 0 0; }

/* A phone held upright: the tools in a dock along the bottom, the view buttons over the map's
   corner, and panels as sheets from the bottom of the map. */
@media (max-width: 759px) and (min-height: 541px) {
  .wd.wd-game { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
  .wd-game > .wd-status { grid-row: 5; }
  .wd-game > .game-palette { display: contents; }
  .game-palette > .wd-tools {
    grid-row: 4;
    grid-column: 1;
    display: flex;
    gap: 3px;
    padding: 3px;
  }
  .game-palette > .wd-tools::before { display: none; }
  .game-palette > .wd-tools .wd-btn { flex: 1 1 0; height: 56px; padding: 2px 0; }
  .game-palette > .wd-tools .wd-icon { width: 28px; height: 28px; }
  .game-palette > .wd-tools .wd-btn-label { font-size: 11px; }
  .game-palette > .wd-tools .wd-btn-label.long { font-size: 9.5px; }
  .game-palette > .game-view {
    grid-row: 3;
    grid-column: 1;
    align-self: end;
    justify-self: end;
    z-index: 3;
    margin: 10px;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 var(--wd-hi), inset -1px -1px 0 var(--wd-dk), 0 3px 0 rgba(0, 0, 0, .35);
  }
  .game-view .wd-btn { width: 44px; height: 44px; }
  .game-view .wd-btn-label { display: none; }
}
@media (max-width: 759px) {
  .wd-game > .game-panel, .wd-game > .game-panel-about, .wd-game > .game-panel-rooms, .wd-game > .game-panel-account, .wd-game > .game-panel-tutorial {
    align-self: end;
    justify-self: stretch;
    width: auto;
    margin: 6px;
    max-height: calc(100% - 12px);
  }
  /* G15: the top of the window stays in view. */
  .wd-game > .game-panel-tutorial { max-height: 62%; }
  .wd-town-counts { display: none; }
  .wd-game .wd-status .wd-town { flex: 1 1 100%; }
  /* The town has the last row to itself, and the readout shares the message's, however wide it is. */
  .wd-map > .wd-status { flex-wrap: wrap; }
  .wd-map .wd-status .wd-seg[role="status"] { flex: 1 1 0; }
  .wd-map .wd-status .wd-town { order: 1; }
}

/* A phone on its side, or any short window: there is no room for a dock or a tall readout, so the
   readouts become one thin row and the tools a small floating pad of pictures. */
@media (max-height: 540px) {
  .wd-game .wd-stats { flex-wrap: nowrap; gap: 10px; padding: 2px 6px; }
  .wd-game .wd-stat { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 5px; min-width: 0; }
  .wd-game .wd-stat-label { font-size: 11px; letter-spacing: 0; text-transform: none; }
  .wd-game .wd-lcd { padding: 0 6px; font-size: 13px; letter-spacing: 0; }
  .wd-game .wd-title { min-height: 30px; padding-top: 1px; padding-bottom: 1px; }
  .wd-game .wd-seg { padding: 2px 8px; }
  .game-palette .wd-tools { grid-template-columns: repeat(3, 46px); gap: 3px; padding: 4px; }
  .game-palette .wd-tools::before { display: none; }
  .game-palette .wd-tools .wd-btn { height: 46px; }
  .game-palette .wd-tools .wd-icon { width: 26px; height: 26px; }
  .game-palette .wd-btn-label { display: none; }
  .game-view { grid-template-columns: repeat(3, 46px); gap: 3px; padding: 4px; }
  .game-view .wd-btn { height: 46px; }
  .game-view .wd-btn-label { display: none; }
  .wd-game > .game-palette { margin: 8px; max-height: calc(100% - 16px); }
}

/* A room: the game window with the camera moved indoors. The well holds the pixel room instead of
   the map, and the page's panels open over it from the title bar. A wide screen keeps the whole room
   in view by standing the open panel beside it. */
.room-host { position: absolute; inset: 8px; display: grid; place-items: center; container-type: size; }
@media (min-width: 1000px) {
  .wd-room.has-panel .room-host { right: 420px; }
}
.wd-room .stage { animation: room-enter .28s ease-out; }
@keyframes room-enter { from { opacity: .35; transform: scale(.93); } }
@media (prefers-reduced-motion: reduce) { .wd-room .stage { animation: none; } }

/* A button or readout that doesn't apply here. They set their own display, so `hidden` needs saying. */
.wd .wd-tbtn[hidden], .wd .wd-btn[hidden], .wd-stat[hidden] { display: none; }

/* The readouts. A phone has room for a word, and the amber one holds the longest text. */
.wd-room .wd-lcd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wd-room .wd-stat-label .short { display: none; }
@media (max-width: 759px), (max-height: 540px) {
  .wd-room .wd-stat-label .long { display: none; }
  .wd-room .wd-stat-label .short { display: inline; }
}
@media (max-width: 759px) {
  .wd-room .wd-stat:has(.amber) { flex-grow: 1.6; }
}

/* The title bar. The room has more panels than the bar has room for, so its More only lists what the
   bar is leaving out. Something waiting on an answer lights up, and stays in the bar on a phone. */
.wd-room .wd-title-actions .wd-tbtn[aria-expanded="true"] { background: #cdb98a; box-shadow: inset 1px 1px 3px rgba(60, 40, 10, .6); }
.wd .wd-tbtn.wait { background: linear-gradient(#ffd98a, #f0aa44); }
.room-count { margin-left: 5px; padding: 0 4px; color: #ffc65c; background: #0a140d; font: 700 11px/1.35 "Courier New", Consolas, monospace; text-shadow: none; }
@media (max-width: 999px) {
  .wd-game .wd-title-actions .mid:not(.wait) { display: none; }
}
@media (min-width: 1000px) {
  .game-more .wd-btn.mid { display: none; }
}
@media (min-width: 1100px) {
  .wd-room .game-more .wd-btn.sec { display: none; }
}
/* G19: once Get started is done, its button leaves the bar and its row in More shows at every width. */
.tutorial-done .wd-title-actions .tutorial-toggle { display: none !important; }
.tutorial-done .game-more .wd-btn.tutorial-more { display: inline-flex !important; }
/* The map keeps its narrower bar until 1360px, so its rows for those buttons stay until then too. */
@media (min-width: 1360px) {
  .wd-map .game-more .wd-btn.sec { display: none; }
}
/* A room's bar holds more than the map's, so when it won't all fit the buttons take a line of their
   own, and the name is never squeezed out. */
.wd-room .wd-title { flex-wrap: wrap; }
.wd-room .wd-title-text { min-width: 64px; }
.wd-room .wd-title-actions { margin-left: auto; }
.wd-live.off .wd-lamp {
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ffd98a 28%, #c98a1e 72%, #7a4a0c);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4);
  animation: none;
}

/* The status bar: the guest banner across the whole of it, then the floors, the message and the
   clock, then the legend. */
.wd-room .wd-status .room-note { white-space: nowrap; overflow-wrap: normal; }
.wd-game .wd-status .wd-seg.room-guest { flex: 1 1 100%; }
.room-about { flex: 2 1 200px; }
.wd-room .floors { flex: 3 1 340px; gap: 3px 8px; white-space: normal; }
.wd .floor-chip { min-height: 22px; overflow-wrap: anywhere; }
.wd .floor-chip.here { background: #cdb98a; box-shadow: inset 1px 1px 3px rgba(60, 40, 10, .6); cursor: default; }
.floor-tag { padding: 0 6px; font-weight: 700; background: var(--wd-face); box-shadow: inset 1px 1px 0 var(--wd-lo), inset -1px -1px 0 var(--wd-hi); }
.floor-tag.public { background: linear-gradient(#ffd98a, #f0aa44); }
.wd-room .room-legend { flex: 1 1 100%; max-height: 45px; white-space: normal; }
@media (max-width: 759px) {
  .room-about, .room-legend .legend-key { display: none; }
  .wd-room .room-legend { max-height: 24px; }
}
@media (max-height: 540px) {
  .wd-room .room-legend, .room-about { display: none; }
}
@media (pointer: coarse) {
  .wd-room .floors .wd-tbtn { min-height: 34px; }
}

/* The chat fills its panel: the log scrolls, and the box to type in is always showing. On a phone
   the sheet leaves the room in view above it, and takes the whole well once someone is typing. */
.wd-game > .game-panel-room { height: calc(100% - 24px); }
.game-panel-room .game-panel-body { flex: 1; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.game-panel-room .chat-log { flex: 1; min-height: 0; }
.game-panel .mention-list { max-height: min(320px, 50vh); }
@media (max-width: 759px) {
  .wd-game > .game-panel-room { height: max(55%, calc(100% - 52.5vw - 18px)); }
  .wd-game > .game-panel-room:has(input:focus) { height: calc(100% - 12px); }
  .wd-room.has-panel .room-host { align-items: start; }
}
@media (max-width: 759px) and (max-height: 540px) {
  .wd-game > .game-panel-room { height: calc(100% - 12px); }
}

/* Build mode. The dock takes a row of the window of its own, so the room shrinks to fit above it and
   the dock is never over what's being placed. On a phone the window already has that row. */
.wd-room.has-dock { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.wd-room.has-dock > .wd-status { grid-row: 5; }
.build-dock { grid-row: 4; grid-column: 1; align-items: center; gap: 4px 8px; }
.build-dock[hidden] { display: none; }
.build-say { flex: 1 1 240px; min-width: 0; padding: 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.build-dock-buttons { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.build-nudge { display: flex; gap: 2px; }
.build-nudge[hidden] { display: none; }
.wd .build-dock .wd-btn { min-height: 36px; font-size: 13px; }
.wd .build-nudge .wd-btn { min-width: 36px; padding: 0; font-size: 16px; }
.stage.building { touch-action: none; }
.stage.building .stage-empty { display: none; }
.stage.over-item { cursor: pointer; }
.stage.holding { cursor: crosshair; }

.build-figures { font-weight: 700; color: #4d3620; }
.build-tabs { display: flex; gap: 4px; }
.wd .build-tabs .wd-btn { flex: 1 1 0; min-height: 34px; padding: 2px 6px; }
.build-catalog { display: grid; gap: 14px; }
.build-catalog[hidden], .build-placed[hidden] { display: none; }
.build-group { display: grid; gap: 6px; }
.build-group h3 {
  padding-bottom: 3px;
  color: #4d3620;
  font: 700 11px/1.2 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px groove rgba(120, 90, 44, .5);
}
.build-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wd .build-tile { justify-content: flex-start; min-width: 0; padding: 5px 3px; line-height: 1.15; text-align: center; }
.build-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--builder-picture-size); overflow: hidden; }
.build-pic canvas { flex: none; image-rendering: pixelated; }
.build-name { overflow-wrap: anywhere; }
.build-tile small { font-size: 11px; font-weight: 500; }
.build-tile.locked .build-pic { filter: grayscale(1); opacity: .5; }
.build-tiles.build-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.template-pic { display: block; width: 100%; }
.template-pic canvas { display: block; width: 100%; height: auto; }
.build-tile .build-why { color: #8e2f18; font-weight: 700; text-shadow: none; }
.build-placed { display: grid; gap: 6px; }
.game-panel .build-placed .row { padding: 4px 0; border-bottom: 1px solid rgba(120, 90, 44, .35); }
.game-panel-itemnotes .note .link { display: block; margin-top: 2px; }
.game-panel-itemnotes form[hidden], .game-panel-notes .stack[hidden] { display: none; }
.room-quiet { font-weight: 700; }
.wd-game .wd-status .wd-seg.room-quiet { flex: 1 1 100%; }

/* The Character panel: who's being dressed, how they look, and what they can wear. */
.wardrobe-who { display: flex; flex-wrap: wrap; gap: 4px; }
.wardrobe-who[hidden] { display: none; }
.wd .wardrobe-whom { flex: 0 1 auto; gap: 4px; min-width: 0; max-width: 100%; min-height: 44px; padding: 2px 8px 2px 2px; flex-direction: row; }
.wardrobe-whom span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wardrobe-whom canvas, .wardrobe-stand canvas, .wardrobe-tile canvas { flex: none; image-rendering: pixelated; }
.wardrobe-top { display: flex; align-items: stretch; gap: 10px; }
.wardrobe-stand {
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 8px 0;
  background: linear-gradient(#364466 62%, #a97b4e 62%);
  border: 2px inset rgba(120, 90, 44, .6);
}
.wardrobe-buttons { display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; min-width: 0; }
.wd .wardrobe-buttons .wd-btn { flex: none; min-height: 34px; }
.wardrobe-say { min-height: 1.3em; overflow-wrap: anywhere; }
.wd .wardrobe-tile { padding-top: 3px; }
.wardrobe-tile .build-pic { height: 74px; }
.wd .wardrobe-tile[aria-pressed="true"], .wardrobe-whom[aria-pressed="true"] { outline: 2px solid #8e2f18; outline-offset: -2px; }
.wardrobe-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.wardrobe-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  border: 2px outset rgba(255, 255, 255, .7);
  border-radius: 2px;
}
.wardrobe-swatch[aria-pressed="true"] { outline: 3px solid #8e2f18; outline-offset: 1px; }
@media (pointer: coarse) {
  .wardrobe-swatch { width: 38px; height: 38px; }
}

/* A floor's readouts are two more than a phone's row has room for, so they get a row of their own. */
@media (max-width: 759px) and (min-height: 541px) {
  .wd-game.wd-room.on-floor .wd-stats { flex-wrap: wrap; }
  .wd-game.wd-room.on-floor .wd-stat { flex: 1 1 16%; }
  .wd-game.wd-room.on-floor .wd-stat:has(.amber) { flex: 1.6 1 24%; }
  .wd-game.wd-room.on-floor .wd-stat.room-feel { flex: 1 1 40%; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .wd-game.wd-room.on-floor .wd-stats { flex-wrap: nowrap; }
  .wd-game.wd-room.on-floor .wd-stat { flex: 1 1 0; min-width: 0; }
  .wd-game.wd-room.on-floor .wd-stat-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* A phone keeps the room in view above the catalog, as it does above the chat. */
@media (max-width: 759px) {
  .wd-game > .game-panel-build, .wd-game > .game-panel-look { height: max(55%, calc(100% - 52.5vw - 18px)); }
  .game-panel-build .game-panel-body, .game-panel-look .game-panel-body { flex: 1; }
  /* The dock changes height as the hand does, so the room stays put at the top. What the status bar
     usually says gives way to it, and a rule the room is under doesn't. */
  .wd-room.has-dock .room-host { align-items: start; }
  .wd-room.has-dock .wd-status > :not(.room-quiet, .room-guest) { display: none; }
}
@media (max-width: 560px) {
  .wd .build-dock .wd-btn.wide { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
}

/* What the room's panels hold, with the square corners of the window around them. */
.game-panel .event, .game-panel .check-in, .game-panel .ask, .game-panel .note, .game-panel .floor-card, .game-panel .checks,
.game-panel .date, .game-panel .avatar, .game-panel .rsvp, .game-panel .doorbell, .game-panel .guest-tag { border-radius: 2px; }
/* A phone zooms the whole page in on a box smaller than this, and this window can't scroll back. */
@media (pointer: coarse) {
  .game-panel input, .game-panel select, .game-panel textarea { font-size: 16px; }
}

/* A space's settings: the same window, with the well holding a column of forms that scrolls. Each
   part is a sheet like the panels over a room, left open. */
.space-host { position: absolute; inset: 3px; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.space-sheets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; }
.space-sheet {
  padding: 3px;
  color: var(--text);
  background: #dccaa2;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #4d3620,
    inset 2px 2px 0 #ecdfbd, inset -2px -2px 0 #a98d5c;
}
.space-sheet .game-panel-body { overflow: visible; }
@media (max-width: 759px) {
  .space-host { padding: 6px; }
  .space-sheets { gap: 8px; }
  .space-sheet .game-panel-body { padding: 10px; }
}

/* Typing @ in a private chat box offers the people and bots there. */
.mention-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.mention-wrap > input { flex: 1; }
.mention-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 20;
  max-height: 232px;
  overflow-y: auto;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--btn-edge);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.friend-invite .mention-list { top: calc(100% + 4px); bottom: auto; }
.mention-list[hidden] { display: none; }
.mention-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; border-radius: 2px; cursor: pointer; }
.mention-option[aria-selected="true"] { color: var(--accent-ink); background: var(--accent); }
.mention-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.mention-kind { flex: none; font-size: 12px; opacity: .8; }
/* #548: headings, a dot for whose it is, and the name above one short line. */
.mention-option { justify-content: flex-start; }
.mention-group { padding: 6px 9px 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; list-style: none; }
.mention-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .55; }
.mention-text { display: grid; min-width: 0; }
.mention-name b { text-decoration: underline; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The outside of a place: a stage over the map's well with the same dock and Build panel a room has.
   The map keeps going underneath. Its tools give way to the dock, which takes their row. */
.outside-stage { position: absolute; inset: 3px; z-index: 2; overflow: hidden; background: #79b7e0; }
.outside-stage[hidden] { display: none; }
.outside-canvas { display: block; touch-action: none; }
.outside-stage.holding .outside-canvas { cursor: crosshair; }
.outside-stage.over-item .outside-canvas { cursor: pointer; }
.wd.wd-game.has-dock { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.wd.wd-game.has-dock > .wd-status { grid-row: 5; }
.wd-game.outside-open > .game-palette { display: none; }
@media (min-width: 760px) {
  .wd-game.outside-panel .outside-stage { right: 424px; }
}
@media (max-width: 759px) {
  .wd-game > .game-panel-outside { height: max(55%, calc(100% - 52.5vw - 18px)); }
  .game-panel-outside .game-panel-body { flex: 1; }
  .wd-game.outside-panel .outside-stage { bottom: calc(max(55%, calc(100% - 52.5vw - 18px)) + 6px); }
  /* The dock says what the status bar would, and the town has no use here. */
  .wd-game.outside-open > .wd-status { display: none; }
}
@media (max-width: 560px) {
  .wd .outside-dock .wd-btn.wide { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; }
  .outside-dock .build-dock-buttons { flex: 1 1 100%; }
}

/* The catalog's extras: a small heading for each part, and the rows under its tiles. */
.outside-part { display: grid; gap: 6px; }
.outside-part h4 { font: 700 13px/1.2 var(--ui); color: #4d3620; }
.build-pic.outside-pic canvas, .outside-whole canvas { image-rendering: auto; }
.outside-colors { display: grid; gap: 5px; }
.outside-colors .wardrobe-swatches { gap: 4px; }
.outside-colors .wardrobe-swatch { width: 22px; height: 22px; border-width: 1px; }
.outside-color-more { display: flex; flex-wrap: wrap; gap: 4px; }
.wd .outside-colors .wd-btn { min-width: 0; min-height: 28px; padding: 2px 8px; flex-direction: row; gap: 6px; font-size: 12px; }
.outside-any input { width: 26px; height: 20px; padding: 0; border: 1px solid #3a2712; background: none; cursor: pointer; }
.outside-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.outside-numbers-label { flex: none; min-width: 5.5em; font-size: 12px; font-weight: 700; color: #4d3620; }
.wd .outside-numbers .outside-number { min-width: 30px; min-height: 30px; padding: 2px 8px; flex-direction: row; font-size: 12px; }
.outside-foot { display: flex; justify-content: flex-end; }
.outside-yard { gap: 14px; }
.outside-yard .build-group .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.outside-pet { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(120, 90, 44, .5); border-radius: 2px; background: rgba(255, 247, 220, .5); }
.outside-pet + .outside-pet { margin-top: 8px; }
.outside-pet-head { display: flex; align-items: center; gap: 8px; }
.outside-pet-pic { flex: none; width: 48px; height: 48px; }
.outside-pet-color { display: grid; gap: 3px; }
.outside-pet h4 { margin-top: 4px; font: 700 12px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #4d3620; }
.outside-rules { list-style: none; margin: 0; padding: 0; display: grid; }
.game-panel .outside-rules .row { padding: 4px 0; border-bottom: 1px solid rgba(120, 90, 44, .35); }
.outside-rules button.link:disabled { opacity: .4; cursor: default; text-decoration: none; }
.wd .outside-add { align-self: start; min-height: 34px; }
@media (pointer: coarse) {
  .game-panel button.link { min-height: 36px; padding: 4px 8px; }
  .outside-colors .wardrobe-swatch { width: 30px; height: 30px; }
}
@media (max-width: 759px) {
  .build-tiles.build-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Public docs: paper sheets on the desk, readable with no JavaScript. */

.docs-skip {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 2;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 700;
  transform: translateY(-120%);
}
.docs-skip:focus { transform: none; }

.docs-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 8px;
}
.docs-top .brand { font-size: 26px; line-height: 1; margin: 0; }
.docs-top .brand a { color: inherit; text-decoration: none; }
.docs-top nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.docs-top nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 650;
  padding: 6px 2px;
}
.docs-top nav a:hover, .docs-top nav a[aria-current] { color: var(--text); }

.docs-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 22px;
  width: min(1100px, calc(100% - 32px));
  margin: 8px auto 24px;
  align-items: start;
}

.docs-side, .docs-main, .docs-foot, .docs-world, .docs-plain, .docs-soon {
  color: #43321d;
  --text: #2c1e11;
  --muted: #5d482c;
  --line: #a58a58;
  color-scheme: light;
  background: linear-gradient(rgba(255, 252, 240, .45), rgba(255, 252, 240, 0) 48px), #e3d3aa;
  border: 1px solid #2a1b0e;
  border-radius: 3px;
  box-shadow: inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #8f7547, 0 3px 0 rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .3);
}

.docs-side { padding: 18px 16px 22px; position: sticky; top: 12px; }
.docs-side h2 { margin: 0; font: 700 22px/1.2 var(--serif); color: #6e2a14; }
.docs-side h2 a { color: inherit; text-decoration: none; }
.docs-lede { margin: 8px 0 0; color: #5d482c; font-size: 14px; }
.docs-kicker {
  margin: 0;
  color: #a14a1c;
  font: 700 11px/1.2 var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.docs-nav { display: grid; gap: 2px; margin-top: 16px; }
.docs-nav a {
  color: #5d482c;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 14px;
}
.docs-nav a:hover { color: #2c1e11; background: rgba(255, 252, 240, .45); }
.docs-nav a.on { color: #6e2a14; font-weight: 700; background: rgba(193, 95, 38, .12); }

.docs-world { margin-top: 16px; padding: 12px 12px 14px; box-shadow: inset 1px 1px 0 #fff7dc, inset -1px -1px 0 #8f7547; }
.docs-world p { margin: 6px 0 0; font-size: 13px; }

.docs-main { padding: 22px 28px 30px; min-width: 0; }
.docs-article { color: #43321d; }
.docs-article > .docs-kicker { margin-bottom: 8px; }
.docs-article h1 {
  margin: 0 0 12px;
  color: #2c1e11;
  font: 700 clamp(28px, 4vw, 40px)/1.15 var(--serif);
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.docs-article h2 {
  color: #6e2a14;
  font: 700 21px/1.25 var(--serif);
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px groove rgba(120, 90, 44, .45);
}
.docs-article h2:first-child { margin-top: 0; }
.docs-article h3 {
  color: #2c1e11;
  font: 700 16px/1.3 var(--serif);
  margin: 22px 0 6px;
}
.docs-article p, .docs-article li, .docs-article dd { color: #43321d; }
.docs-article p, .docs-article ul, .docs-article ol, .docs-article dl, .docs-article table {
  margin: 0;
  max-width: 68ch;
}
.docs-article p + p, .docs-article ul + p, .docs-article ol + p, .docs-article table + p { margin-top: 10px; }
.docs-article ul, .docs-article ol { padding-left: 20px; }
.docs-article li + li { margin-top: 4px; }
.docs-article a { color: #8a3a12; }
.docs-article code {
  overflow-wrap: anywhere;
  background: rgba(120, 90, 44, .16);
  padding: 0 4px;
  border-radius: 2px;
  color: #2c1e11;
  font-size: .92em;
}
.docs-article dt { color: #2c1e11; font-weight: 700; margin-top: 14px; }
.docs-article dt:first-child { margin-top: 0; }
.docs-article dd { margin: 2px 0 0; }
.docs-article table { width: 100%; max-width: none; border-collapse: collapse; font-size: 14px; margin: 12px 0; overflow-x: auto; }
.docs-article th, .docs-article td {
  text-align: left;
  vertical-align: top;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(120, 90, 44, .35);
}
.docs-article th { color: #2c1e11; font-weight: 700; }

.docs-plain, .docs-soon { padding: 12px 14px 14px; margin: 0 0 16px; }
.docs-soon { border-color: #6b3a08; }
.docs-plain p, .docs-soon p { margin: 6px 0 0; }
.docs-plain p:first-child, .docs-soon p:first-child { margin-top: 0; }

.docs-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 12px;
  max-width: none;
}
.docs-card {
  display: block;
  padding: 14px 16px 16px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 252, 240, .4);
  border: 1px solid rgba(42, 27, 14, .35);
  border-radius: 3px;
}
.docs-card h3 { margin: 6px 0 6px; color: #6e2a14; font: 700 18px/1.25 var(--serif); }
.docs-card:hover { border-color: #6e2a14; background: rgba(255, 252, 240, .7); }

.docs-next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 2px groove rgba(120, 90, 44, .45);
  max-width: none;
}
.docs-next a { color: #8a3a12; }

.docs-foot {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 40px;
  padding: 16px 22px 18px;
}
.docs-foot p { margin: 0; color: #5d482c; }
.docs-foot p + p { margin-top: 6px; font-size: 13px; }
.docs-foot a { color: #8a3a12; }

.board-block { display: flex; flex-direction: column; gap: .45em; margin: 0; padding: .7em 0; border-top: 1px solid rgba(90, 70, 40, .18); }
.board-block h3, .board-card h4 { margin: 0; }
.board-card { margin: .2em 0 .4em; }
.board-card p { margin: .2em 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.research-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: .4em 0; }
.research-tabs button { min-height: 44px; }
.research-tabs button[aria-pressed="true"] { outline: 2px solid #8e2f18; outline-offset: -2px; font-weight: 600; }
.research-stale { margin: .3em 0; padding: 4px 8px; border-left: 0; background: #fbe7b0; color: #4a3008; }
.board-list form.stack { gap: .35em; }

@media (max-width: 840px) {
  .docs-shell { grid-template-columns: 1fr; }
  .docs-side { position: static; }
}


/* ==========================================================================
   Apple Human Interface Guidelines (HIG) Mobile Redesign
   Edge-to-edge canvas, translucent materials, spring sheets, safe areas
   ========================================================================== */

:root {
  --apple-blur: blur(25px) saturate(180%);
  --apple-nav-bg: rgba(220, 202, 162, 0.88);
  --apple-sheet-bg: rgba(238, 226, 200, 0.95);
  --apple-card-bg: rgba(255, 255, 255, 0.72);
  --apple-pill-bg: rgba(255, 255, 255, 0.88);
  --apple-border: rgba(77, 54, 32, 0.2);
  --apple-text: #3d2712;
  --apple-accent: #8e2f18;
}

/* A desktop window never shows the phone chrome, however short or narrow it is. */
.apple-tab-bar,
.apple-build-sheet,
.apple-placement-banner,
.apple-fab-hud,
.sheet-scrim,
.sheet-grabber {
  display: none !important;
}

/* Active Apple HIG Mobile Experience */
.apple-hig.wd-game {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #557a2b !important;
}

.apple-hig .wd-well {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.apple-hig .wd-well .world {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

.apple-hig .wd-well canvas {
  touch-action: none !important;
}

/* Show the whole room first, keeping its pixel proportions. The camera fills the well;
   unused space is a quiet backdrop, and a deliberate pinch can inspect the scene. */
.phone-room-floors { display: none; }
.apple-hig.wd-room .room-host {
  display: grid !important;
  place-items: center !important;
  inset: 0 0 calc(52px + env(safe-area-inset-bottom)) !important;
  height: auto !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
  background: #202638;
}
.apple-hig.wd-room .stage {
  width: min(100cqw, calc(100cqh * 480 / 252));
  max-width: none;
  min-height: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  animation: none;
}
.apple-hig.wd-room .room-host canvas { touch-action: none !important; }
.apple-hig.wd-room.has-dock .room-host,
.apple-hig.wd-room .stage.building canvas { touch-action: none !important; }
.apple-hig .phone-room-floors:not([hidden]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.apple-hig .phone-room-floors > strong { flex: 1 0 100%; }

/* Navigation Bar & Header: hidden on mobile for completely unobstructed edge-to-edge view */
.apple-hig .wd-title {
  display: none !important;
}

/* Hide desktop action buttons in apple-hig mode (accessible via bottom tab bar) */
.apple-hig .wd-title-actions {
  display: none !important;
}

/* Hide floating stats pill under navigation bar to maximize map view */
.apple-hig .wd-stats {
  display: none !important;
}

.apple-hig .wd-stat {
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.apple-hig .wd-stat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b533a !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.apple-hig .wd-lcd {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #2b1d0c !important;
}

/* Hide desktop palette in apple-hig mode */
.apple-hig > .game-palette {
  display: none !important;
}

/* Floating Action HUD (Zoom & Recenter) */
.apple-hig .apple-fab-hud {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: calc(66px + max(8px, env(safe-area-inset-bottom))) !important;
  z-index: 9 !important;
  gap: 4px !important;
  background: var(--apple-pill-bg) !important;
  -webkit-backdrop-filter: var(--apple-blur) !important;
  backdrop-filter: var(--apple-blur) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  padding: 4px !important;
  margin: 0 !important;
}

.apple-hig .apple-fab-hud .wd-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--apple-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, background 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.apple-hig .apple-fab-hud .wd-btn:active {
  transform: scale(0.92) !important;
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Floating status message toast */
.apple-hig > .wd-status {
  position: fixed !important;
  bottom: calc(62px + max(8px, env(safe-area-inset-bottom))) !important;
  left: 14px !important;
  right: 14px !important;
  z-index: 8 !important;
  background: rgba(245, 238, 222, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 0.5px solid var(--apple-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  color: #43321d !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  pointer-events: none !important;
  text-align: center !important;
}

/* M8: room information is part of the phone sheets, never an overlay. */
.apple-hig.wd-room > .wd-status { display: none !important; }
.phone-room-notices { display: none; }
.apple-hig .phone-room-notices:not([hidden]) { display: block; flex: 0 0 auto; }
.apple-hig .game-panel-room .phone-room-notices { max-height: 25%; overflow-y: auto; }
.apple-hig .room-notice {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 12px;
  background: #eee3ce;
  color: #43321d;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Apple HIG Bottom Tab Bar */
.apple-hig .apple-tab-bar {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 15 !important;
  height: calc(52px + env(safe-area-inset-bottom)) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  background: var(--apple-nav-bg) !important;
  -webkit-backdrop-filter: var(--apple-blur) !important;
  backdrop-filter: var(--apple-blur) !important;
  border-top: 0.5px solid var(--apple-border) !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.apple-tab-item {
  flex: 1;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: #7d6349;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.apple-tab-item:active {
  transform: scale(0.92);
}

.apple-tab-item.active {
  color: var(--apple-accent) !important;
  font-weight: 700 !important;
}

.apple-hig .apple-tab-item {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  text-shadow: none;
}

.apple-tab-icon {
  font-size: 19px;
  line-height: 1;
}

.apple-tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 16px);
  background: #e03131;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
}

/* Apple HIG Build Sheet */
.apple-hig .apple-build-sheet {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 20 !important;
  background: var(--apple-sheet-bg) !important;
  -webkit-backdrop-filter: var(--apple-blur) !important;
  backdrop-filter: var(--apple-blur) !important;
  border-radius: 24px 24px 0 0 !important;
  border-top: 0.5px solid var(--apple-border) !important;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.22) !important;
  max-height: 75dvh !important;
  overflow: hidden !important;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.apple-hig .apple-build-sheet.open {
  transform: translateY(0) !important;
}

.apple-build-sheet-head {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.apple-build-sheet-head h3 {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--apple-text);
  margin: 0;
}

.apple-moves-pill {
  background: rgba(110, 42, 20, 0.12);
  color: #6e2a14;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.apple-tools-grid {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: 8px;
}

.apple-tools-grid .wd-btn, .apple-hig .build-tile {
  height: auto !important;
  min-height: 112px !important;
  min-width: 0;
  padding: 8px !important;
  background: var(--apple-card-bg) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.apple-tools-grid .wd-btn:active, .apple-hig .build-tile:active {
  transform: scale(0.94) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

.apple-tools-grid .wd-btn .wd-icon {
  width: var(--builder-picture-size) !important;
  height: var(--builder-picture-size) !important;
}
.apple-hig .build-tiles { gap: 10px; }

.apple-tools-grid .wd-btn-label, .apple-hig .build-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--apple-text) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Floating Placement Banner */
.apple-hig .apple-placement-banner {
  display: flex !important;
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: 16px !important;
  right: 16px !important;
  z-index: 25 !important;
  background: rgba(24, 24, 27, 0.9) !important;
  -webkit-backdrop-filter: var(--apple-blur) !important;
  backdrop-filter: var(--apple-blur) !important;
  color: #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3) !important;
  padding: 10px 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  animation: apple-banner-in 0.25s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

@keyframes apple-banner-in {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.apple-placement-banner-text {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.apple-placement-cancel {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.apple-placement-cancel:active {
  background: rgba(255, 255, 255, 0.38);
}

/* Backdrop Scrim & Bottom Sheets for Panels */
.apple-hig .sheet-scrim {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 18 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.apple-hig .sheet-scrim.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.apple-hig .sheet-grabber {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: grab !important;
  touch-action: none;
  user-select: none;
}
.apple-hig .sheet-grabber::before {
  content: '';
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgba(60, 40, 10, .3);
}
.apple-hig .sheet-grabber:focus-visible { outline: 2px solid var(--apple-accent); outline-offset: -4px; }
.apple-hig .sheet-dragging {
  transition: none !important;
}

.apple-hig > .game-panel {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: #eee2c8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-top: 0.5px solid var(--apple-border) !important;
  box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.25) !important;
  max-height: min(85dvh, calc(100dvh - max(12px, env(safe-area-inset-top)))) !important;
  overflow: hidden;
  z-index: 20 !important;
  transform: translateY(0);
  animation: apple-sheet-slide-up 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)) !important;
  color: var(--apple-text);
  font-family: system-ui, sans-serif;
}
.apple-hig .game-panel-head, .apple-hig .apple-build-sheet-head, .apple-hig .modal-head {
  min-height: 48px;
  padding: 0 0 10px;
  background: none;
  box-shadow: none;
  text-shadow: none;
  color: var(--apple-text);
}
.apple-hig .game-panel-head h2, .apple-hig .apple-build-sheet-head h3, .apple-hig .modal-head h2 { font: 700 18px/1.3 system-ui, sans-serif; }
.apple-hig .game-panel-body {
  padding: 8px 0 0;
  background: none;
  box-shadow: none;
  overscroll-behavior-y: contain;
}
/* M11: the panel body owns scrolling, rather than a list inside that body. */
.apple-hig .game-panel-body :is(.around, .board-read) {
  max-height: none;
  overflow: visible;
  scrollbar-gutter: auto;
}
.apple-hig .chat-form input {
  min-height: 44px;
  border: 1px solid var(--apple-border);
  border-radius: 12px;
  box-shadow: none;
  font: 400 16px/1.3 system-ui, sans-serif;
}
.apple-hig .chat-form button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  background: var(--apple-accent);
  color: #fff;
  text-shadow: none;
}
.apple-hig .apple-tab-bar,
.apple-hig .apple-build-sheet {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.apple-hig .apple-build-sheet { background: #eee2c8 !important; }
.apple-hig .apple-tab-bar { background: #dccaa2 !important; }
.apple-hig > .game-panel-room {
  height: 78dvh;
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top))) !important;
}
.apple-hig > .game-panel-room:has(input:focus) {
  height: calc(100dvh - max(12px, env(safe-area-inset-top)));
}

@keyframes apple-sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.apple-hig .sheet-close,
.apple-hig .game-panel-head .wd-tbtn,
.apple-hig .modal-head button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: rgba(60, 40, 10, 0.12) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--apple-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.apple-hig .sheet-close:active,
.apple-hig .game-panel-head .wd-tbtn:active,
.apple-hig .modal-head button:active {
  background: rgba(60, 40, 10, 0.22) !important;
}

/* Native dialogs are attached to the document, outside the phone's game window. */
@media (max-width: 759px), (pointer: coarse) {
  .modal { background: #eee2c8; border-radius: 16px; border: 1px solid #bba57e; box-shadow: 0 12px 32px rgba(0, 0, 0, .3); padding: 12px; }
  .modal { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); scroll-padding-top: 76px; overscroll-behavior-y: contain; }
  .modal-head { position: sticky; top: -12px; z-index: 2; min-height: 60px; padding: 12px 0 10px; color: #2c1e11; background: #eee2c8; box-shadow: none; text-shadow: none; }
  .modal-head h2 { font: 700 18px/1.3 system-ui, sans-serif; }
  .modal-head button { min-width: 44px; min-height: 44px; padding: 0 8px; border: none; border-radius: 50%; background: rgba(60, 40, 10, .12); box-shadow: none; }
  .modal > :not(.modal-head) { margin-left: 0; margin-right: 0; }
  .modal > textarea { width: 100%; }
  .modal :is(.around, .board-read) { max-height: none; overflow: visible; scrollbar-gutter: auto; }
}


.apple-hig .apple-placement-banner[hidden],
.apple-hig .sheet-scrim[hidden],
.apple-hig > .game-panel[hidden],
.apple-hig .apple-build-sheet[hidden] {
  display: none !important;
}


.apple-tools-grid .wd-btn .wd-icon canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* A phone on its side: the tab bar takes the left edge, so the map keeps the height. */
@media (orientation: landscape) {
  .apple-hig > .game-panel {
    left: calc(76px + env(safe-area-inset-left)) !important;
    width: calc(100% - 76px - env(safe-area-inset-left)) !important;
  }
  .apple-hig .wd-well {
    left: calc(76px + env(safe-area-inset-left)) !important;
    right: 0 !important;
    width: auto !important;
  }
  .apple-hig.wd-room .room-host {
    inset: 0 !important;
  }
  .apple-hig .wd-title {
    left: calc(50% + 38px) !important;
  }
  .apple-hig > .wd-status {
    left: calc(90px + env(safe-area-inset-left)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .apple-hig .apple-tab-bar {
    flex-direction: column !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: calc(76px + env(safe-area-inset-left)) !important;
    height: auto !important;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
    border-top: 0 !important;
    border-right: 0.5px solid var(--apple-border) !important;
  }
  .apple-hig .apple-tab-item {
    width: 100%;
    height: auto;
    min-height: 52px;
    flex: 1 1 auto;
  }
  .apple-hig .apple-fab-hud {
    top: 50% !important;
    bottom: auto !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    transform: translateY(-50%) !important;
  }
  .apple-hig .apple-build-sheet {
    left: calc(76px + env(safe-area-inset-left)) !important;
    max-height: 70% !important;
  }
}
/* Announcement content stays readable on narrow phones and preserves the keeper's line breaks. */
.push-review { overflow-wrap: anywhere; }
.push-message { white-space: pre-wrap; }

/* A66: a compact, readable consent page, including narrow screens. */
.oauth-page { max-width: 44rem; margin: 3rem auto; padding: 1.5rem; overflow-wrap: anywhere; }
.oauth-page p { margin: 0.8rem 0; }
.oauth-page form { margin: 1rem 0; }
.oauth-page select { margin: 0.5rem 0; }
.oauth-page button { margin: 0.4rem 0.4rem 0.4rem 0; }
@media (max-width: 48rem) { .oauth-page { margin: 0; padding: 1rem; } }

/* L50: the day plan painter. */
.sched-brushes, .sched-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.sched-brush[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.sched-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sched-hour { padding: 6px 0; font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); cursor: pointer; }
.sched-work { background: #3d5a80; }
.sched-social { background: #6a4c93; }
.sched-home { background: #4a6b3a; }
.sched-anything { background: var(--panel-2); }

/* L44: a bot's status in the Bots panel. Words carry the meaning; color only helps scanning. */
.bot-status { font-weight: 700; }
.bot-status.working { color: var(--good); }
.bot-status.idle { color: var(--accent); }
.bot-status.asleep, .bot-status.offline { color: var(--muted); font-weight: 500; }

/* L44: a bot's picture at the start of its row in the Bots panel. */
.bot-pic { flex: none; display: inline-flex; align-items: flex-end; justify-content: center; width: 40px; }
.bot-pic canvas { image-rendering: pixelated; }
/* My bots: the four actions move as one block. Beside the bot's text when the panel is wide, and on
   the next line together when it isn't, so none of them, such as Delete, is ever left on a line alone. */
.row > .bot-actions { flex: none; flex-wrap: nowrap; margin-left: auto; gap: 4px 14px; }
/* Choices in Settings: a row with what it does, and a switch (A88). */
.pref-group { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pref-group h3 { margin: 0; font-size: 15px; }
.pref-group > p { margin: 0; font-size: 13px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); cursor: pointer; }
.pref-text { display: grid; gap: 1px; min-width: 0; }
.pref-text small { overflow-wrap: anywhere; }
input.switch-input {
  appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #cdbd9b;
  cursor: pointer;
  transition: background .15s;
}
input.switch-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .15s;
}
input.switch-input:checked { background: var(--accent); }
input.switch-input:checked::before { transform: translateX(18px); }
input.switch-input:disabled { opacity: .55; cursor: progress; }
input.switch-input:indeterminate { background: repeating-linear-gradient(45deg, #cdbd9b, #cdbd9b 4px, #e6dbc0 4px, #e6dbc0 8px); }
@media (prefers-reduced-motion: reduce) { input.switch-input, input.switch-input::before { transition: none; } }

/* The card for a person in a room, and its preview in Settings (A88, A89). */
.person-card { position: fixed; z-index: 41; width: min(280px, calc(100vw - 16px)); max-width: none; pointer-events: auto; }
.person-card.person-card-preview { position: static; width: auto; max-width: 300px; }
.person-card-body, .person-card-foot, .person-card-preview > .person-card-note, .person-card-preview > .person-card-rows { padding: 6px 9px; }
.person-card-rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.person-card-rows dt { color: var(--muted); }
.person-card-rows dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.person-card-note { margin: 0; color: var(--muted); font-size: 12px; }
.person-card-foot { display: grid; gap: 2px; padding: 3px; }
.person-card-foot .person-card-note { padding: 3px 6px; }
.stage.over-person { cursor: pointer; }

/* W112: normal flow inside More; shared game panels/buttons own the colours and bevels.
   See web/brand/README.md before adding a control surface. */
.social-strip {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: var(--surface-gap);
  border-top: 1px solid var(--line);
}
.social-strip .social-strip-link { white-space: normal; overflow-wrap: anywhere; }

/* MY1 to MY7, #639: the Mayor voting box's panel. */
.mayor-choices { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.mayor-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mayor-choice.chosen strong { color: var(--accent, inherit); }

/* W114: shared movable windows. Geometry is constrained to the game well by createPanels. */
.wd-game.window-desktop { position: relative; isolation: isolate; }
.wd-room.window-desktop:not(.apple-hig).has-panel .room-host { right: 8px; }
.wd-game.window-desktop > .game-window {
  position: absolute !important; grid-area: auto !important; inset: auto !important; margin: 0 !important;
  min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important;
  box-sizing: border-box; overflow: hidden; transform: translateY(0) !important;
  animation: none !important; transition: none !important;
  border-radius: 0 !important; padding: 3px !important;
}
.wd-game.window-desktop > .game-window[hidden] { display: none !important; }
.game-window > .game-panel-head { flex: none; cursor: move; touch-action: none; user-select: none; gap: 6px; }
.game-window > .game-panel-head h2 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-window .window-actions { display: flex; flex: none; gap: 3px; }
.game-window .window-actions .wd-tbtn { border-radius: 0; display: inline-flex !important; align-items: center; justify-content: center; }
.game-window > .game-panel-head:focus-visible { outline: 2px solid #cf7a34; outline-offset: -2px; }
.game-window > .game-panel-body { flex: 1; min-height: 0; min-width: 0; overscroll-behavior: contain; padding-bottom: 30px; }
/* Only the outer body scrolls. A nested My bots body otherwise gets a second scrollbar. */
.game-window .game-panel-body :is(.game-panel-body, .around, .board-read) { overflow: visible; max-height: none; scrollbar-gutter: auto; }
.game-window.window-active { outline: 2px solid #cf7a34; outline-offset: -2px; }
.game-window .window-resize {
  position: absolute; right: 3px; bottom: 3px; width: 28px; height: 28px;
  min-height: 0; padding: 0; cursor: nwse-resize; touch-action: none;
  color: var(--wd-dk); background: var(--wd-face); border: 0; z-index: 6;
}
.game-window .window-resize[hidden] { display: none; }
.window-dock {
  position: absolute; z-index: 90; display: flex; align-items: stretch; gap: 4px;
  box-sizing: border-box; padding: 3px; background: var(--wd-face); border: 1px solid #4d3620;
  box-shadow: inset 1px 1px #fff7dc, inset -1px -1px #a98d5c;
}
.window-dock[hidden], .window-dock-entry[hidden] { display: none; }
.window-dock-handle { cursor: move; touch-action: none; flex: none; }
.window-dock-items { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.window-dock-entry { display: flex; flex: none; }
.window-dock-entry > :first-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-desktop > .game-menu { z-index: 100; }
.window-desktop .sheet-scrim { display: none !important; }
.apple-hig.window-desktop > .game-window { background: #eee2c8 !important; }
.apple-hig.window-desktop .game-panel-head { padding: 4px; min-height: 44px; }
.apple-hig.window-desktop .game-panel-head h2 { font-size: 14px; }
.apple-hig.window-desktop .game-window .game-panel-head { background: #914021; color: #fff3d2; }
.apple-hig.window-desktop .game-window .window-actions .wd-tbtn {
  border-radius: 0 !important; color: #2b1d10 !important;
  background: linear-gradient(#f6ecce, #dfcd9f) !important;
  border: 1px solid #4d3620 !important;
  box-shadow: inset 1px 1px #fff7dc, inset -1px -1px #a98d5c !important;
}
@media (pointer: coarse), (max-width: 759px) {
  .game-window .window-actions .wd-tbtn, .window-dock .wd-tbtn { min-width: 44px; min-height: 44px; }
  .game-window .window-resize { width: 44px; height: 44px; }
  .game-window > .game-panel-body { padding-bottom: 46px; }
}
/* A110: the community rules, read in place before accepting. */
.rules-text { max-width: 42rem; max-height: min(28rem, 55vh); overflow-y: auto; padding: .25rem .75rem; border: 1px solid var(--line, #d0d4dc); border-radius: 8px; }
.rules-notice { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 20; display: flex; gap: .75rem; align-items: center; max-width: min(40rem, 92vw); padding: .5rem .75rem; border-radius: 8px; background: rgba(20, 23, 34, .92); color: #fff; }

/* W115: dock zones reserve the scene itself; the measuring surface never shrinks with it. */
.wd-game > .window-workspace { grid-area: 3 / 1; align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; pointer-events: none; }
.apple-hig > .window-workspace { position: absolute; inset: 0; }
.window-desktop > .wd-well { position: absolute !important; grid-area: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; }
.window-zone-tabs { position: absolute; z-index: 80; display: flex; gap: 3px; overflow-x: auto; background: var(--wd-face); }
.window-zone-tabs .wd-tbtn { flex: 0 0 auto; min-height: 44px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-zone-tabs [aria-selected="true"] { background: #ffb454; color: #2b1d10; }
.window-zone-divider { position: absolute; z-index: 80; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--wd-face); touch-action: none; }
.window-zone-divider.vertical { cursor: ew-resize; }
.window-zone-divider.horizontal { cursor: ns-resize; }
.window-zone-divider:hover, .window-zone-divider:focus-visible { background: #cf7a34; outline: 2px solid #4d3620; }
.window-zone-divider::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #846b40; border-radius: 2px; }
.window-zone-divider.vertical::before { width: 3px; height: 32px; }
.window-zone-divider.horizontal::before { width: 32px; height: 3px; }
.window-zone-divider::after { content: ''; position: absolute; inset: 0; }
@media (pointer: coarse) {
  .window-zone-divider.vertical::after { top: 50%; bottom: auto; height: 44px; transform: translateY(-50%); left: -18px; right: -18px; }
  .window-zone-divider.horizontal::after { left: 50%; right: auto; width: 44px; transform: translateX(-50%); top: -18px; bottom: -18px; }
}
.window-snap-preview { position: absolute; z-index: 85; pointer-events: none; display: grid; place-items: center; border: 3px solid #cf7a34; background: rgba(255, 180, 84, .35); color: #2b1d10; font-weight: bold; }
.window-layout-controls { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; max-height: 45%; overflow: auto; background: var(--wd-face); }
.window-layout-controls select { width: 100%; }
.window-layout-controls button { min-height: 36px; }
.window-zone-tabs[hidden], .window-zone-divider[hidden], .window-snap-preview[hidden], .window-layout-controls[hidden] { display: none; }
@media (pointer: coarse), (max-width: 759px) { .window-layout-controls button, .window-layout-controls select { min-height: 44px; } }

.apple-hig.window-desktop.wd-room .room-host { inset: 0 !important; }