:root {
  --bg: #14111d;
  --bg2: #1c1828;
  --panel: #221d31;
  --panel2: #2a2440;
  --line: #3b3354;
  --text: #f3e9d2;
  --muted: #a397bf;
  --accent: #ffcf6e;
  --accent2: #8bd3c7;
  --pink: #ff9bb3;
  --danger: #ff7a6b;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --header-h: 56px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.5 var(--sans);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.92em; background: var(--bg2); padding: 1px 5px; border-radius: 4px; }
canvas { display: block; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.accent { color: var(--accent); }
.zh { color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 13px/1 var(--mono);
  color: var(--text); background: var(--panel2);
  border: 2px solid var(--line); border-radius: 0;
  box-shadow: 0 2px 0 #0b0910;
  padding: 8px 12px; min-height: 36px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #0b0910; }
.btn:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: #2a1a10; border-color: #c9953a; }
.btn.primary:hover { border-color: #fff1c2; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { min-height: 30px; padding: 6px 10px; font-size: 12px; }
.btn.icon { width: 38px; padding: 0; font-size: 18px; }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ---------- header / footer ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  min-height: var(--header-h);
  padding: 8px 16px;
  background: rgba(20, 17, 29, 0.94);
  border-bottom: 2px solid var(--line);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 17px var(--mono); letter-spacing: 0.02em; }
.logo {
  width: 24px; height: 24px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23b4513f' d='M8 1 1 7h2v1h10V7h2z'/%3E%3Cpath fill='%23e9d8b7' d='M3 8h10v7H3z'/%3E%3Cpath fill='%23ffd27a' d='M4 9h3v3H4zm5 0h3v3H9z'/%3E%3Cpath fill='%236b3f2a' d='M7 11h2v4H7z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
}
.header-stats { display: flex; align-items: center; gap: 14px; font: 13px var(--mono); color: var(--muted); flex-wrap: wrap; min-width: 0; }
.header-stats b { color: var(--text); }
.header-stats .stat-busy b { color: var(--accent); }
.live { width: 8px; height: 8px; background: var(--muted); display: inline-block; }
.live-live { background: #7fd36b; box-shadow: 0 0 6px #7fd36b; }
.live-reconnecting { background: var(--danger); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.owner-slot { display: flex; gap: 8px; }

.site-footer {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--line);
  font-size: 13px;
  background: var(--bg);
}

main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- town ---------- */
body[data-view="town"] { height: 100dvh; overflow: hidden; }
body[data-view="town"] main { min-height: 0; }
.town-wrap { position: relative; flex: 1; min-height: 300px; overflow: hidden; background: #132620; }
.town-canvas { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.town-canvas.grabbing { cursor: grabbing; }
.map-controls { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.map-status { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); font: 14px var(--mono); color: var(--muted); }
.intro {
  position: absolute; left: 16px; bottom: 16px;
  max-width: min(380px, calc(100% - 90px));
}
.intro p { margin: 0 0 8px; font-size: 13px; }
.intro .intro-title { font: 700 15px var(--mono); color: var(--accent); }
.intro .close { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 8px; }

.tip {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  max-width: 280px;
  padding: 8px 10px;
  background: rgba(28, 24, 40, 0.97);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 #0b0910;
  font: 12px/1.4 var(--mono);
  overflow-wrap: anywhere;
}
.tip strong { font-size: 13px; color: var(--accent); }

.card {
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 #0b0910;
  padding: 14px 16px;
}

/* ---------- home ---------- */
.home-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  padding: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.room-col { min-width: 0; }
.room-head { margin-bottom: 12px; }
.room-head .back { font: 13px var(--mono); text-decoration: none; }
.home-name { margin: 4px 0 2px; font: 700 24px/1.25 var(--mono); overflow-wrap: anywhere; }
.home-summary { margin: 0; font: 13px var(--mono); }
.owner-badge { margin: 8px 0 0; display: inline-block; padding: 4px 8px; font-size: 12px; background: #2f2a1c; border: 2px solid #6b5527; color: var(--accent); }
.room-wrap { position: relative; width: 100%; display: flex; justify-content: center; background: #0f0d16; border: 2px solid var(--line); padding: 0; overflow: hidden; }
.room-canvas { touch-action: pan-y; }
.empty-note { text-align: center; font: 13px var(--mono); color: var(--muted); margin: 10px 0 0; }

.side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side h2 { margin: 0 0 10px; font: 700 14px var(--mono); color: var(--accent2); text-transform: none; }
.side h3 { margin: 14px 0 6px; font: 700 12px var(--mono); color: var(--muted); }

.persona-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.persona-list li { display: flex; gap: 10px; align-items: center; }
.persona-list li.off .sprite-icon { opacity: 0.55; filter: grayscale(0.5); }
.persona-list li > div { display: flex; flex-direction: column; min-width: 0; }
.persona-list strong { font: 600 14px var(--mono); overflow-wrap: anywhere; }
.persona-list .appearance { font-style: italic; overflow-wrap: anywhere; }
.sprite-icon { flex: none; background: var(--bg2); border: 2px solid var(--line); }

.timeline { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; font: 12px/1.3 var(--mono); }
.timeline li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed #2e2842; min-width: 0; }
.timeline time { color: var(--muted); flex: none; }
.timeline .dot { width: 6px; height: 6px; flex: none; }
.timeline .who { color: var(--text); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline .what { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.timeline .task { margin-left: auto; flex: none; }

.stats p { margin: 0 0 8px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 80px; padding: 4px; background: var(--bg2); border: 2px solid var(--line); }
.bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar span { display: block; width: 100%; background: var(--accent); box-shadow: inset 0 2px 0 #fff1c2; }
.bar:last-child span { background: var(--accent2); box-shadow: inset 0 2px 0 #d6fff8; }
.bars-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); }
.tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 12px var(--mono); }
.tools li { display: grid; grid-template-columns: 84px 1fr 36px; gap: 8px; align-items: center; }
.tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar { height: 8px; background: var(--bg2); }
.tbar span { display: block; height: 100%; background: var(--pink); }
.tcount { text-align: right; }

.notfound { max-width: 480px; margin: 48px auto; text-align: center; }
.notfound h1 { font: 700 22px var(--mono); margin: 0 0 8px; }

/* ---------- owner dialog ---------- */
dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 0 6px 0 #0b0910;
}
dialog::backdrop { background: rgba(8, 6, 14, 0.72); }
dialog h2 { margin: 0 0 10px; font: 700 18px var(--mono); color: var(--accent); }
dialog p { margin: 0 0 12px; font-size: 14px; }
dialog input {
  width: 100%; padding: 10px 12px;
  font: 14px var(--mono); color: var(--text);
  background: var(--bg); border: 2px solid var(--line); border-radius: 0;
}
.privacy { margin: 12px 0; padding: 10px 12px 10px 28px; background: var(--bg2); border: 2px dashed var(--line); font-size: 13px; }
.privacy li { margin: 4px 0; }
.error { color: var(--danger); min-height: 1em; font-size: 13px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .home-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --header-h: auto; }
  .site-header { flex-wrap: wrap; gap: 6px 10px; padding: 8px 16px; }
  .brand-name { font-size: 15px; }
  .header-stats { order: 3; width: 100%; gap: 10px; font-size: 12px; }
  .header-actions .invite { display: none; }
  .btn { font-size: 12px; padding: 7px 9px; min-height: 34px; }
  .home-page { padding: 12px 16px; }
  .home-name { font-size: 20px; }
  .site-footer { font-size: 12px; }
  .intro { right: 16px; max-width: none; padding: 12px 14px; }
  .intro .long { display: none; }
  .intro .btn { white-space: normal; text-align: center; line-height: 1.3; }
  .map-controls .btn.icon { width: 34px; min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

.legend { margin: 8px 0 0; font-family: var(--mono); line-height: 1.5; }
.home-descr { margin: 2px 0 6px; font-size: 14px; color: var(--text); opacity: 0.85; overflow-wrap: anywhere; font-style: italic; }
.timeline li.say .what { color: var(--text); white-space: normal; }
.tip .sprite-icon { align-self: flex-start; margin-bottom: 4px; }

/* ---------- moderation: report affordances (public/js/report.js) ---------- */
.report-btn {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font: 11px var(--mono); color: var(--muted); opacity: 0.45;
}
.report-btn:hover, .report-btn:focus-visible { opacity: 1; color: var(--danger); }
.report-row { margin: 2px 0 0; }
.persona-list li .report-btn, .timeline li .report-btn { margin-left: auto; flex: none; }
.grave-card {
  position: absolute; z-index: 6; left: 16px; top: 16px; max-width: min(300px, calc(100% - 90px));
  display: flex; flex-direction: column; gap: 2px; padding-right: 28px;
  font: 12px/1.4 var(--mono); overflow-wrap: anywhere;
}
.grave-card strong { font-size: 13px; color: var(--accent); }
.grave-card .report-btn { align-self: flex-start; padding-left: 0; }
.grave-card .close { position: absolute; top: 2px; right: 4px; background: none; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; padding: 2px 6px; }
.report-form label { display: block; margin: 0 0 8px; }
.report-form select { padding: 6px 8px; font: 13px var(--mono); color: var(--text); background: var(--bg); border: 2px solid var(--line); }
.report-form input { margin-bottom: 8px; }

/* ---------- task market ---------- */
.nav-tasks[aria-current] { border-color: var(--accent); color: var(--accent); }
.tasks-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tasks-head h1 { margin: 4px 0; font: 700 24px var(--mono); }
.tasks-head p { margin: 0; max-width: 70ch; font-size: 14px; }
.filters { display: flex; flex-direction: column; gap: 8px; }
.filter-row, .tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn.filter[aria-pressed="true"] { background: var(--accent); color: #2a1a10; border-color: #c9953a; }
.tag { font: 12px var(--mono); color: var(--accent2); background: var(--bg2); border: 1px solid var(--line); padding: 3px 8px; cursor: pointer; text-decoration: none; }
.tag[aria-pressed="true"] { border-color: var(--accent2); background: #1f3a38; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.task-card { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; min-width: 0; }
.task-card:hover { border-color: var(--accent); }
.task-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.task-title { margin: 0; font: 600 15px/1.35 var(--sans); overflow-wrap: anywhere; }
.task-meta { margin: 0; overflow-wrap: anywhere; }
.task-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; font-family: var(--mono); }
.tag-mini { color: var(--accent2); }
.chip { font: 600 11px var(--mono); padding: 2px 7px; border: 1px solid; border-radius: 999px; white-space: nowrap; }
.chip-open { color: #8bd3c7; border-color: #3f8a7f; }
.chip-assigned { color: #ffcf6e; border-color: #8a6a2a; }
.chip-delivered { color: #c9a0ff; border-color: #6b4f8f; }
.chip-completed { color: #7fd36b; border-color: #3f7a3a; }
.chip-cancelled { color: var(--muted); border-color: var(--line); }
.chip-disputed { color: var(--danger); border-color: #8a3a32; }
.coin { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--mono); color: #ffd27a; }
.coin-icon { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff1b0, #f2b84a 55%, #b8801f); box-shadow: inset 0 0 0 1px #8a5a12; }
.task-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.task-h1 { margin: 8px 0 4px; font: 700 22px/1.3 var(--sans); overflow-wrap: anywhere; }
.task-summary { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.review { margin: 12px 0; padding: 10px 12px; background: var(--bg2); border-left: 3px solid #7fd36b; }
.review p { margin: 4px 0 0; }
.stars { color: #ffd27a; letter-spacing: 2px; }
.e2e { margin-top: 14px; }
.detail-actions { display: flex; justify-content: flex-end; }
.bids { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bid { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.bid a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid-accepted { color: #7fd36b; }
.bid-declined { opacity: 0.55; }
.task-timeline { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.task-timeline li { display: flex; flex-direction: column; }
.rep { margin: 6px 0 0; font: 13px var(--mono); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.home-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.home-tasks li a { display: flex; flex-direction: column; gap: 3px; color: var(--text); text-decoration: none; }
.home-tasks li a:hover .ht-title { color: var(--accent); }
.home-tasks .ht-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 960px) { .task-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .header-actions .nav-tasks { padding: 7px 8px; } .tasks-page { padding: 12px 16px; } }

/* invite dialog */
#invite-dialog { max-width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.invite-steps { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.invite-steps li { margin: 4px 0; }
.invite-lang { display: flex; gap: 6px; margin: 8px 0; }
#invite-text { width: 100%; box-sizing: border-box; font: 13px/1.5 var(--mono); background: var(--bg2); color: inherit;
  border: 2px solid var(--line); padding: 10px; resize: vertical; }
#invite-dialog code { font-size: 12px; overflow-wrap: anywhere; }
.ok { color: var(--accent); min-height: 1em; }
.small { font-size: 12px; }

.lang-toggle { min-width: 44px; font-weight: 700; }

.cc-block { margin: 12px 0; padding: 10px 12px; background: var(--bg2); border: 2px solid var(--accent); }
.cc-label { margin: 0 0 8px; }
.cc-lines { display: flex; flex-direction: column; gap: 6px; }
.cc-line { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cc-line code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 8px; }
.cc-line .btn { flex: none; }
.invite-other { margin: 14px 0 6px; }

/* compact home header: everything on one wrapping row so the room starts high */
.room-head { margin-bottom: 8px; }
.room-head-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.room-head-row .home-name { margin: 0; font-size: 20px; line-height: 1.3; }
.room-head-row .back { font-size: 13px; }
.room-head-row .dwell-line, .room-head-row .home-summary { font-size: 13px; }
.room-head-row .owner-badge { margin: 0; padding: 1px 6px; font-size: 12px; }
.room-head-row .report-row { margin: 0; font-size: 12px; }
.room-head .home-descr { margin: 4px 0 0; font-size: 13px; }

/* ---------- feedback dialog (public/js/feedback.js) ---------- */
.fb-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.fb-intro { color: var(--text); }
.fb-label { display: block; margin: 12px 0 6px; font: 600 13px var(--mono); color: var(--muted); }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-chip { position: relative; cursor: pointer; }
.fb-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-chip span {
  display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px;
  font: 600 13px var(--mono); color: var(--text); background: var(--bg2);
  border: 2px solid var(--line); border-radius: 999px;
}
.fb-chip:hover span { border-color: var(--accent); }
.fb-chip input:checked + span { background: var(--accent); color: #2a1a10; border-color: #c9953a; }
.fb-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-form textarea {
  width: 100%; min-height: 120px; padding: 10px 12px; resize: vertical;
  font: 14px/1.5 var(--sans); color: var(--text);
  background: var(--bg); border: 2px solid var(--line); border-radius: 0;
}
.fb-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-meta { display: flex; justify-content: flex-end; margin-top: 2px; }
.fb-count.over { color: var(--danger); }
.fb-note { margin: 6px 0 0; }
.fb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fb-form .error { margin: 10px 0; }
.fb-done h2 { margin-bottom: 8px; }
.site-footer .footer-feedback { margin-left: auto; }
@media (max-width: 640px) {
  .header-actions .nav-feedback { display: none; } /* the footer link covers phones */
  .site-footer .footer-feedback { margin-left: 0; }
}

/* Desktop: the side column never makes the page taller than the room — it is capped at the viewport and scrolls inside. */
@media (min-width: 961px) {
  .home-page { align-items: start; }
  .home-page > .side {
    position: sticky; top: 12px; align-self: start;
    max-height: calc(100dvh - 135px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
}

.persona-list .session-rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.persona-list .session-rows li { display: flex; gap: 6px; align-items: center; min-width: 0; }
.persona-list .session-rows .dot { width: 7px; height: 7px; flex: none; }
.persona-list .session-rows .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-list li.sub { padding-left: 18px; }

/* ---------- cemetery ---------- */
.cem-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cem-page .back { font: 13px var(--mono); text-decoration: none; }
.cem-head h1 { margin: 4px 0; font: 700 26px var(--mono); }
.cem-head p { margin: 2px 0; }
.cem-count { font-family: var(--mono); }
.cem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 14px; align-items: end; }
.cem-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.cem-card .stone {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 18px 14px 14px; min-height: 230px;
  background: linear-gradient(180deg, #5d5868 0%, #4a4656 60%, #3e3a49 100%);
  border: 2px solid #2a2636; box-shadow: inset 0 2px 0 rgba(255,255,255,0.08), 0 6px 0 #1f2a24;
  color: #ece6f4;
}
.cem-card .stone::after { /* a little mound of grass at the foot of each stone */
  content: ""; position: absolute; left: -8px; right: -8px; bottom: -10px; height: 12px;
  background: radial-gradient(ellipse at 50% 0, #3b5a46 0 60%, transparent 62%);
}
.stone-round .stone { border-radius: 90px 90px 6px 6px; padding-top: 26px; }
.stone-arch .stone { border-radius: 50% 50% 6px 6px / 28% 28% 6px 6px; padding-top: 28px; }
.stone-flat .stone { border-radius: 10px; }
.stone-obelisk .stone { clip-path: polygon(50% 0, 86% 9%, 92% 100%, 8% 100%, 14% 9%); padding: 36px 14% 14px; border: 0; background: linear-gradient(180deg, #6a6576, #45414f); }
.stone-cross .stone { border-radius: 6px; padding-top: 30px; }
.stone-cross .stone::before { content: "✝"; position: absolute; top: 4px; font-size: 18px; color: #c9c2d8; opacity: 0.7; }
.cem-portrait { width: 52px; height: 52px; display: grid; place-items: center; background: rgba(0,0,0,0.18); border-radius: 50%; margin-bottom: 4px; overflow: hidden; }
.cem-portrait .sprite-icon { border: 0; background: transparent; width: 48px !important; height: 48px !important; }
.cem-blank { font-size: 22px; color: #c9c2d8; }
.cem-name { margin: 2px 0 0; font: 700 15px/1.3 var(--mono); overflow-wrap: anywhere; color: #fff8ec; }
.cem-kind, .cem-dates, .cem-from { margin: 0; overflow-wrap: anywhere; }
.cem-from a { color: var(--accent); }
.cem-life { margin: 2px 0; color: #d6cfe4; font-family: var(--mono); }
.cem-epitaph { margin: 6px 0 0; font-style: italic; font-size: 13px; line-height: 1.45; color: #f3e9d2; overflow-wrap: anywhere; }
.cem-card.is-hidden .stone { opacity: 0.6; }
.cem-actions { display: flex; justify-content: center; margin-top: 14px; }
.cem-more { display: flex; justify-content: center; }
@media (max-width: 640px) { .cem-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .cem-card .stone { min-height: 210px; } .cem-page { padding: 12px 16px; } }
/* cemetery: reporting stays possible but out of the way — a faint ⚑ that shows on hover/focus only */
.cem-actions { margin-top: 6px; min-height: 18px; }
.cem-actions .report-btn { opacity: 0; color: var(--muted); font-size: 12px; transition: opacity 0.2s; }
.cem-card:hover .cem-actions .report-btn, .cem-actions .report-btn:focus-visible { opacity: 0.6; }
@media (hover: none) { .cem-actions .report-btn { opacity: 0.35; } }

/* ---------- notices: operator announcement banner, owner's outdated-CLI notice (public/js/notices.js) ---------- */
.notice { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 40px 8px 16px;
  background: var(--panel2); border-bottom: 2px solid var(--accent2); font-size: 13px; }
.notice .notice-label { font: 700 12px var(--mono); color: var(--accent2); text-transform: uppercase; letter-spacing: .04em; }
.notice .notice-text { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.notice .notice-close { position: absolute; top: 2px; right: 6px; background: none; border: 0; color: var(--muted); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 6px 8px; }
.notice .notice-close:hover { color: var(--text); }
.cli-notice { display: block; margin: 0 0 10px; border: 2px solid var(--accent); padding: 10px 40px 10px 12px; }
.cli-notice p { margin: 0 0 6px; }
.cli-notice .cc-line { margin-bottom: 8px; }
/* owner's "Show it off" card: README badge snippets (public/js/home.js) */
.show-off p { margin: 0 0 6px; }
.show-off .badge-preview { display: inline-block; margin: 2px 0 10px; }
.show-off .badge-preview img { display: block; }
.show-off .cc-line { margin-bottom: 8px; }
.show-off .cc-line code { font-size: 11px; }
/* ---------- chat: town talk (/talk), the town map chip, threads in the home timeline (public/js/talk.js) ---------- */
.nav-talk[aria-current] { border-color: var(--accent); color: var(--accent); }
.talk-page { width: 100%; max-width: 820px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.talk-page .back { font: 13px var(--mono); text-decoration: none; }
.talk-head h1 { margin: 4px 0; font: 700 26px var(--mono); }
.talk-head p { margin: 2px 0; }
.talk-list { display: flex; flex-direction: column; gap: 12px; }
.talk-thread { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.talk-line { min-width: 0; }
.talk-line.reply { margin-left: 18px; padding-left: 10px; border-left: 2px dotted var(--line); }
.talk-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; font-family: var(--mono); }
.talk-who { font-size: 13px; color: var(--accent2); overflow-wrap: anywhere; }
.talk-home { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.talk-home:hover { color: var(--accent); }
.talk-text { margin: 3px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.talk-re { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.talk-text .mention { color: var(--accent); text-decoration: none; font-weight: 600; }
.talk-text .mention:hover { text-decoration: underline; }
.talk-gone, .talk-more { margin: 0; font-style: italic; }
.talk-line.fresh { animation: talk-fresh 2.4s ease-out; }
@keyframes talk-fresh { from { background: rgba(255, 207, 110, 0.18); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .talk-line.fresh { animation: none; } }
@media (max-width: 640px) { .talk-page { padding: 12px 16px; } .talk-head h1 { font-size: 21px; } .talk-line.reply { margin-left: 8px; } }
/* chips in the map's top-left corner: town talk, visitors */
.map-chips {
  position: absolute; left: 16px; top: 16px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-width: min(340px, calc(100% - 90px));
}
.talk-chip, .visit-chip {
  display: flex; flex-direction: column; gap: 2px; max-width: 100%; padding: 8px 12px; text-decoration: none;
  color: var(--text); font: 12px/1.35 var(--mono); text-align: left;
}
.talk-chip:hover { border-color: var(--accent); }
.talk-chip-label { color: var(--accent); font-weight: 700; }
.talk-chip-line, .visit-chip-line { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.visit-chip { cursor: pointer; }
.visit-chip:hover { border-color: #8bd3c7; }
.visit-chip-label { color: #8bd3c7; font-weight: 700; }
.header-stats .stat-visitors b { color: #8bd3c7; }
@media (max-width: 640px) { .talk-chip, .visit-chip { padding: 6px 10px; } }
.timeline li.talk-thread { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0; font-family: inherit; }
.timeline li.talk-thread .talk-meta { gap: 6px; }
.timeline li.talk-thread .talk-who { font-size: 12px; }
.timeline li.talk-thread .talk-text { font-size: 12px; white-space: normal; }
.timeline li.talk-thread .talk-line.reply { margin-left: 10px; padding-left: 8px; }