/* Swarm World viewer. Dark, roguelike: the palette comes from the Kenney 1-Bit sheet. */

:root {
  --ink-0: #0c090f;        /* map void */
  --ink-1: #141017;        /* app + header */
  --ink-2: #19141d;        /* panel */
  --ink-3: #221b27;        /* raised */
  --ink-4: #2b2231;        /* hover */
  --line: #31283a;
  --line-soft: #251e2b;

  --text: #ebe3d5;
  --text-2: #b9aebb;
  --text-3: #8f8393;

  --plum: #472d3c;
  --rose: #7a444a;
  --red: #e6482e;
  --brown: #bf7958;
  --green: #38d973;
  --gold: #f4b41b;
  --blue: #3cacd7;
  --bone: #cfc6b8;

  --k-say: var(--bone);
  --k-craft: #d38d68;
  --k-discover: var(--gold);
  --k-gather: var(--green);
  --k-fail: var(--red);
  --k-place: #c9a27e;
  --k-write: #b9a6e0;
  --k-program: var(--blue);
  --k-collapse: #e0707a;
  --k-join: #8fdcae;
  --k-sleep: #9a8fb0;
  --k-eat: #e8945c;
  --k-plant: #7fdc6e;
  --k-chronicle: #e9cf9c;
  --k-tame: #ff8fb1;
  --k-invent: #ffd75e;
  --k-voice: #a9dcff;
  --k-learn: #5fd6c4;
  --k-weather: #9fb3cc;
  --k-store: #c9b8a6;
  --k-take: #b8aeb9;
  --k-tend: #ffab5e;
  --k-wish: #c3b0ff;
  --k-grant: #9cc8ff;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Book Antiqua", serif;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --topbar-h: 52px;
  --panel-w: 380px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--ink-1);
  color: var(--text);
  font: 13.5px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
}

::selection { background: rgba(244, 180, 27, 0.32); color: #fff7e6; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; }
b, strong { font-weight: 650; }

* { scrollbar-width: thin; scrollbar-color: #3a3043 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #3a3043; border-radius: 10px; border: 3px solid var(--ink-2); }
::-webkit-scrollbar-track { background: transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
[hidden] { display: none !important; }

kbd {
  font: 600 10.5px/1 var(--mono);
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-2);
  background: var(--ink-1);
}

/* ------------------------------------------------------------------ icons */
/* Icons are glyphs from the sprite sheet, applied as masks so they take any color. */
.ico {
  display: inline-block;
  flex: none;
  width: 8px; height: 8px;
  margin: 4px;
  border-radius: 2px;
  background: currentColor;
  vertical-align: -3px;
}
.sprites-ok .ico {
  width: 16px; height: 16px; margin: 0; border-radius: 0;
  -webkit-mask: var(--ico) center / 16px 16px no-repeat;
  mask: var(--ico) center / 16px 16px no-repeat;
}

/* ----------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 12px 0 18px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  min-width: 0;
  position: relative;
  z-index: 3;
}

.brand { display: flex; align-items: center; flex: none; }
#title-art { display: block; }
.brand-fallback {
  display: none;
  font: 700 15px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
}
html:not(.sprites-ok) #title-art { display: none; }
html:not(.sprites-ok) .brand-fallback { display: inline; }

.hstats { display: flex; align-items: center; gap: 0; min-width: 0; overflow: hidden; }
.hstat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  padding: 0 20px;
  border-left: 1px solid var(--line-soft);
  white-space: nowrap;
}
.hstat:first-child { border-left: 0; padding-left: 0; }
.hstat .ico { grid-row: 1 / span 2; color: var(--text-2); }
.hstat-main { font-size: 13px; line-height: 17px; color: var(--text); }
.hstat-main b { font-weight: 650; }
.hstat-sub { font-size: 11.5px; line-height: 15px; color: var(--text-3); }
.phase { text-transform: capitalize; color: var(--text-2); }
.weather { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: #a9c4e6; font-size: 12px; }
.weather .ico { color: #a9c4e6; transform: scale(0.85); }
.phase[data-phase="dawn"] { color: #f2a873; }
.phase[data-phase="day"] { color: #f2d27a; }
.phase[data-phase="dusk"] { color: #e6876a; }
.phase[data-phase="night"] { color: #9fb4e8; }
#h-phase-ico[data-phase="night"] { color: #9fb4e8; }
#h-phase-ico[data-phase="day"] { color: #f2d27a; }
#h-phase-ico[data-phase="dawn"], #h-phase-ico[data-phase="dusk"] { color: #f2a873; }

.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }

/* Surface / Underground (layers.js): which region of the map is on show. The option not on show counts the
   creatures there. A narrow header keeps only the option to go to, as an arrow button. */
.layer-switch {
  display: inline-flex; flex: none; gap: 2px;
  padding: 2px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--ink-0);
}
.layer-switch button {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-3);
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.layer-switch button:hover { color: var(--text); background: var(--ink-3); }
.layer-switch button[aria-checked="true"] { color: var(--text); background: var(--ink-4); box-shadow: inset 0 0 0 1px #45394d; }
.layer-switch button:disabled { display: none; }
.layer-badge {
  min-width: 18px; height: 17px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: rgba(244, 180, 27, 0.16); color: #f2d27a;
  font: 600 10.5px/1 var(--mono);
}

/* public mode (viewer.js enterPublicMode): a line in the top bar saying what this is, and the About panel behind it.
   The line takes the room the stats leave: its long form in two lines when they fit, else its short form (always at
   900 px and below). Where room is short, the public page gives up first what the banner already says (the
   connection label while it only says "live"), then the wordmark and the short form (see the end of "responsive"). */
.public-banner {
  flex: 1 1 0; min-width: 14em;
  container-type: inline-size;
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font-size: 12px; line-height: 15px;
  color: var(--text-2);
}
.watching {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 15px; color: var(--text-2); white-space: nowrap;
}
.watching[hidden] { display: none; }
.watching .ico { color: var(--text-3); }
.watching b { font-weight: 650; color: var(--text); }
html.lz-ui[data-skin="limezu"] .watching { font: 18px/17px var(--px); color: var(--lz-cream-2); }
html.lz-ui[data-skin="limezu"] .watching .ico { color: var(--lz-cream-2); }
html.lz-ui[data-skin="limezu"] .watching b { font-weight: 400; color: var(--lz-cream); }
@media (max-width: 520px) { .watching span:last-child { font-size: 0; } .watching b { font-size: 12px; } }
.pb-long {
  min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}
.pb-short { display: none; white-space: nowrap; }
.public-banner .pill-btn { flex: none; padding: 0 10px; }
@container (max-width: 364px) {   /* two lines of the long form need about 300 px; it is still read out */
  .pb-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pb-short { display: inline; }
}
@container (max-width: 169px) {   /* and the short form takes two lines when one doesn't fit */
  .pb-short { white-space: normal; max-width: 6em; text-wrap: balance; }
}

.about {
  width: min(500px, calc(100vw - 24px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 22px 24px 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--ink-2); color: var(--text-2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  font-size: 13.5px; line-height: 1.55;
  overflow: auto;
}
.about::backdrop { background: rgba(8, 6, 10, 0.62); }
.about h2 { margin: 0 0 12px; font-size: 17px; line-height: 1.3; font-weight: 650; color: var(--text); }
.about p { margin: 0 0 10px; text-wrap: pretty; }
.about p b { color: var(--text); }
.about a { color: var(--gold); text-underline-offset: 2px; }
.about form { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.about .pill-btn { height: 28px; padding: 0 14px; }

/* voice from the sky */
.voice { position: relative; }
.voice-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 9px;
  border: 1px solid rgba(169, 220, 255, 0.35);
  border-radius: 999px;
  background: rgba(64, 96, 170, 0.16);
  color: #cfe9ff;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.voice-btn .ico { color: #a9dcff; }
.voice-btn:hover, .voice-btn.is-open { background: rgba(64, 96, 170, 0.32); border-color: rgba(169, 220, 255, 0.6); }
.voice-btn:disabled { opacity: 0.45; cursor: not-allowed; background: transparent; }
.voice-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 10;
  width: min(420px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(169, 220, 255, 0.35);
  border-radius: 10px;
  background: linear-gradient(180deg, #1c2236, #171a28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.voice-form { display: flex; gap: 8px; }
.voice-form input {
  flex: 1; min-width: 0;
  height: 34px; padding: 0 12px;
  border: 1px solid #3a4562; border-radius: 7px;
  background: #0f1220; color: #eef6ff;
  font: italic 14px var(--serif);
  caret-color: #a9dcff;
}
.voice-form input::placeholder { color: #7f8aa8; }
.voice-form input:focus { outline: 2px solid rgba(169, 220, 255, 0.55); outline-offset: 1px; }
.voice-form button {
  height: 34px; padding: 0 14px;
  border: 0; border-radius: 7px;
  background: linear-gradient(180deg, #cdeaff, #8cc6f2); color: #0f2340;
  font-weight: 700; font-size: 12.5px; cursor: pointer;
}
.voice-form button:disabled { opacity: 0.5; cursor: wait; }
.voice-scope { margin: 8px 2px 0; font-size: 11.5px; color: #9fb0cf; }
.voice-scope b { color: #dff1ff; }
.voice-scope button { margin-left: 4px; padding: 0; border: 0; background: none; color: #a9dcff; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 11.5px; }

.toast {
  position: absolute; left: 50%; bottom: 18px; z-index: 6;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(169, 220, 255, 0.5);
  background: rgba(22, 30, 52, 0.94);
  color: #e6f4ff;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.toast[data-kind="warn"] { border-color: rgba(244, 180, 27, 0.55); color: #ffe7b0; }
.toast.is-out { opacity: 0; transform: translate(-50%, 6px); }

.conn {
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); position: relative; }
.conn[data-state="live"] .conn-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(56, 217, 115, 0.16); }
.conn[data-state="demo"] .conn-dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(60, 172, 215, 0.18); }
.conn[data-state="connecting"] .conn-dot,
.conn[data-state="stalled"] .conn-dot { background: var(--gold); animation: pulse 1.1s ease-in-out infinite; }
.conn[data-state="offline"] .conn-dot { background: var(--red); }
.conn[data-state="offline"] { color: #f1a596; border-color: rgba(230, 72, 46, 0.4); }
@keyframes pulse { 50% { opacity: 0.35; } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--ink-3); color: var(--text); border-color: #45394d; }
.icon-btn:active { background: var(--ink-4); }
.icon-btn.small { width: 26px; height: 26px; border-radius: 5px; }
.icon-btn:disabled { opacity: 0.4; cursor: default; background: transparent; }
a.icon-btn { text-decoration: none; }

/* ------------------------------------------------------------------ stage */
.stage { display: flex; min-height: 0; position: relative; }

.map-wrap { position: relative; flex: 1 1 auto; min-width: 0; background: var(--ink-0); overflow: hidden; }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; outline: none; }
#map.is-dragging { cursor: grabbing; }
#map.is-pointing { cursor: pointer; }

.hud {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; gap: 8px;
  background: rgba(20, 16, 23, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  color: var(--text-2);
}
.hud-top { top: 12px; left: 50%; transform: translateX(-50%); padding: 4px 4px 4px 12px; border-radius: 999px; white-space: nowrap; }
.hud-top b { color: var(--text); }
.follow-swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--bone); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 6px 0 10px;
  border: 0; border-radius: 999px;
  background: var(--ink-3);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
}
.pill-btn:hover { background: var(--ink-4); color: var(--text); }

.hud-bl { left: 12px; bottom: 12px; padding: 5px 10px; font: 11.5px/1.4 var(--mono); max-width: calc(100% - 160px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-bl:empty { display: none; }
.hud-bl .hv-k { color: var(--text-3); }
.hud-bl .hv-v { color: var(--text); }

.hud-br { right: 12px; bottom: 12px; padding: 3px; gap: 2px; }
.hud-br .icon-btn { border-color: transparent; }
.zoom-label { min-width: 34px; text-align: center; font: 600 11.5px/1 var(--mono); color: var(--text); }

.veil {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(12, 9, 15, 0.78);
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}
.veil.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.veil-card { text-align: center; max-width: 340px; padding: 0 20px; }
.veil-title { margin: 14px 0 4px; font-size: 15px; font-weight: 650; color: var(--text); }
.veil-sub { margin: 0; font-size: 12.5px; color: var(--text-3); }
.veil-sub .mono { color: var(--text-2); }
.veil-spinner {
  width: 14px; height: 14px; margin: 0 auto;
  background: var(--gold);
  animation: spin 1.4s steps(8) infinite;
  box-shadow: 0 0 18px rgba(244, 180, 27, 0.35);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ panel */
.panel {
  flex: none;
  width: var(--panel-w);
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
/* collapse is instant: animating width would resize the map canvas every frame */
body.panel-collapsed .panel { width: 0; border-left-color: transparent; }
.panel > * { width: var(--panel-w); }

.tabs {
  display: flex;
  flex: none;
  height: 44px;
  padding: 0 6px;
  gap: 2px;
  border-bottom: 1px solid var(--line);
}
.tab {
  position: relative;
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0;
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s;
  padding: 0 1px;
  white-space: nowrap;
}
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--k-chronicle); }
/* raised like a superscript and almost no width of its own: seven tabs have little room */
.tab .tab-dot { align-self: flex-start; margin: 14px -2px 0 -5px; }
.tab:hover { color: var(--text-2); }
.tab[aria-selected="true"] { color: var(--text); }
.tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: var(--text); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transition: transform 0.25s var(--ease-out);
}
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab-count {
  min-width: 18px; height: 17px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--ink-4);
  color: var(--text-2);
  font: 600 10.5px/1 var(--mono);
}

.tabpane { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 28px; scrollbar-gutter: stable; }

.block { margin-top: 22px; }
.block > h3, .block-head h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 9px;
  font-size: 12px; font-weight: 650; letter-spacing: 0.01em;
  color: var(--text-2);
}
.block > h3::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.block-head h3 { margin: 0; }

.empty { padding: 6px 0; }
.empty-title { margin: 4px 0 4px; font-size: 15px; font-weight: 650; }
.empty-sub { margin: 0; font-size: 12.5px; color: var(--text-3); max-width: 42ch; }
.empty.small { padding: 18px 2px; }

/* roster (no creature selected) */
.roster { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.roster li { border-bottom: 1px solid var(--line-soft); }
.roster button {
  width: 100%;
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 6px;
  background: none; border: 0; text-align: left; cursor: pointer;
  border-radius: 6px;
}
.roster button:hover { background: var(--ink-3); }
.roster canvas { image-rendering: pixelated; }
.roster .r-name { font-weight: 600; }
.roster .r-act { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster .r-model { font: 11px/1 var(--mono); color: var(--text-3); }

/* creature header */
.cre-back {
  display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 12px; padding: 4px 10px 4px 6px;
  font: inherit; font-size: 13px; color: var(--text-2); background: transparent;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.cre-back:hover, .cre-back:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.cre-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.cre-portrait {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cre-portrait canvas { image-rendering: pixelated; }
.cre-name { margin: 0 0 4px; font-size: 21px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cre-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  font: 600 11px/1 var(--mono);
  color: var(--text-2);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.cre-state { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.cre-state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cre-state.is-thinking { color: var(--blue); }
.cre-state.is-thinking .dot { animation: pulse 0.9s ease-in-out infinite; }
.cre-state.is-asleep { color: #a99fc0; }
.cre-state.is-down { color: #f1a596; }

.cre-persona { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cre-persona:empty { display: none; }
.trait {
  font-size: 12px; line-height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--text-2);
}
.trait.drive { border-color: transparent; background: var(--ink-3); color: var(--text); }
.trait.drive span { color: var(--text-3); margin-right: 4px; }
.trait.layer { border-color: rgba(120, 170, 230, 0.4); color: #b9d3f2; font-family: var(--mono); font-size: 11px; }
.plan { margin: 0; padding-left: 22px; font-size: 13px; color: var(--text-2); }
.plan li { padding: 2px 0; }
.plan li.done { color: var(--text-3); text-decoration: line-through; }
.plan li.now { color: var(--text); font-weight: 600; }
.plan .now-tag { font: 700 10px/1 var(--mono); color: #f2dfae; background: rgba(244, 200, 74, 0.15); border-radius: 3px; padding: 2px 5px; margin-right: 6px; }
.trait.temper { border-style: dashed; border-color: #4a3d52; color: var(--text-2); cursor: help; }
.trait.temper[data-temper="role"] { border-style: solid; border-color: rgba(244, 200, 74, 0.35); color: #f2dfae; }
.persona-text { margin: 0; font-size: 12.5px; color: var(--text-2); }

/* needs */
.needs { display: grid; gap: 7px; margin-top: 18px; }
.need { display: grid; grid-template-columns: 56px 1fr 30px; gap: 10px; align-items: center; font-size: 12px; }
.need-label { color: var(--text-3); }
.need-val { text-align: right; font: 600 11.5px/1 var(--mono); color: var(--text-2); }
.bar { height: 6px; border-radius: 3px; background: #2a2230; overflow: hidden; }
.bar-fill { display: block; height: 100%; width: 100%; border-radius: 3px; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s var(--ease-out); }
.need[data-need="satiety"] .bar-fill { background: linear-gradient(90deg, #a8603f, #e0965f); }
.need[data-need="energy"] .bar-fill { background: linear-gradient(90deg, #2a7fa6, #4fc0ea); }
.need[data-need="health"] .bar-fill { background: linear-gradient(90deg, #b8331d, #ee5d43); }
.need.is-low .need-val { color: #ff8f78; }
.need.is-low .bar { box-shadow: 0 0 0 1px rgba(230, 72, 46, 0.45); }

/* mind */
.goal { margin: 0; font-size: 13.5px; color: var(--text); }
.thought {
  margin: 0;
  font-size: 14.5px; line-height: 1.5;
  font-style: italic;
  color: #f3ead9;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
.thought:not(.is-empty)::before { content: "\201C"; color: var(--text-3); }
.thought:not(.is-empty)::after { content: "\201D"; color: var(--text-3); }
.intent {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin-top: 10px; padding: 7px 10px;
  border-radius: 6px;
  background: var(--ink-1);
  border: 1px solid var(--line-soft);
  font: 12px/1.45 var(--mono);
  color: var(--text-2);
}
.intent:empty { display: none; }
.intent .verb { color: var(--ink-0); background: var(--bone); padding: 0 6px; border-radius: 3px; font-weight: 700; }
.intent .arrow { color: var(--text-3); }
.intent .tgt { color: var(--text); }
.intent .say { color: var(--text-2); font-family: var(--sans); font-style: italic; flex-basis: 100%; overflow-wrap: anywhere; }
.result { display: flex; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.result:empty { display: none; }
.result::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--text-3); }
.result.ok::before { background: var(--green); }
.result.fail::before { background: var(--red); }
.is-empty { color: var(--text-3) !important; font-style: normal !important; font-family: var(--sans) !important; font-size: 12.5px !important; }

.senses {
  margin: 0;
  padding: 11px 13px;
  border-radius: 6px;
  background: #110d14;
  border: 1px solid var(--line-soft);
  font: 12px/1.6 var(--mono);
  color: #dcd3c4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  border-radius: 4px;
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--text);
}
.chip .n { font: 600 11px/1 var(--mono); color: var(--text-3); }
.chip.recipe { background: transparent; border-color: var(--line); color: var(--text-2); }

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.people li { font-size: 13px; color: var(--text-2); }
.people b { color: var(--text); margin-right: 6px; }

.summary { margin: 0; font-size: 13px; color: var(--text-2); }

.memory { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.memory li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-soft);
}
.memory li:last-child { border-bottom: 0; }
.memory li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 5px; height: 1px; background: var(--text-3); }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; font: 12px/1.45 var(--mono); color: var(--text); }

.cre-foot { margin: 22px 0 0; font-size: 11.5px; color: var(--text-3); }
.cre-foot.is-error { color: #f1a596; }

.item-ico {
  display: inline-block; flex: none;
  width: 20px; height: 20px;
  margin-left: -3px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.item-ico.none { width: 20px; }
.chip:has(.item-ico) { height: 28px; padding-left: 6px; }
#cre-recipes { display: grid; gap: 2px; }
.recipe-row {
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.recipe-row .item-ico { margin-left: 0; }
.recipe-row b { font-weight: 600; color: var(--text); white-space: nowrap; }
.recipe-row .r-in { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel-foot {
  flex: none;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 18px 9px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--text-3);
  white-space: nowrap;
}
.panel-foot span { overflow: hidden; text-overflow: ellipsis; }
.panel-foot a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.panel-foot a:hover { color: var(--text); }

/* ---------------------------------------------------------------- history */
.hsec { margin-top: 18px; }
.hsec:first-child { margin-top: 4px; }
.hsec > h3 { margin: 0 0 3px; font-size: 13px; font-weight: 650; color: var(--text); }
.hsub { margin: 0 0 8px; font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.hlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; font-size: 11.5px; color: var(--text-2); }
.hlegend i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; margin-right: 6px; vertical-align: 3px; }
.hlegend i.step { width: 12px; height: 7px; border-top: 2px solid; border-left: 2px solid; border-radius: 0; vertical-align: 0; }
.hchart { position: relative; }
.hchart canvas { display: block; }
.hmini { margin-top: 6px; }
.hmini-t { display: block; margin: 0 0 1px 32px; font-size: 11px; color: var(--text-3); }
.htip {
  position: absolute; left: 0; top: 0; z-index: 2;
  min-width: 120px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 16, 23, 0.96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  font-size: 11.5px;
}
.htip-h { margin-bottom: 4px; color: var(--text-3); white-space: nowrap; }
.htip-r { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--text-3); }
.htip-r i { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.htip-r b { min-width: 28px; font: 650 12px/1.5 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); }
.htable { margin-top: 18px; font-size: 12px; color: var(--text-2); }
.htable summary { cursor: pointer; color: var(--text-2); }
.htable-wrap { overflow-x: auto; margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 6px; }
.htable table { border-collapse: collapse; width: 100%; font: 11.5px/1.3 var(--mono); }
.htable th, .htable td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.htable th { color: var(--text-3); font-weight: 600; font-family: var(--sans); }
.htable td:first-child, .htable th:first-child { text-align: left; }

/* ---------------------------------------------------------------- society */
.tabpane.society { padding-top: 12px; }
.soc-graph {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(95, 214, 196, 0.07), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(235, 227, 213, 0.06) 1px, transparent 1.5px) 0 0 / 18px 18px,
    #120e15;
  overflow: hidden;
}
#soc-canvas { display: block; }
.soc-tip {
  position: absolute; left: 0; top: 0;
  max-width: 260px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 16, 23, 0.95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  font-size: 12px; line-height: 1.4; color: var(--text-2);
  pointer-events: none;
}
.soc-tip b { color: var(--text); }
.soc-tip span { color: var(--text-3); font-size: 11px; }
.soc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 9px 2px 0; font-size: 11.5px; color: var(--text-3); }
.soc-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.soc-legend .soc-count { margin-left: auto; }
.hubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hubs button {
  width: 100%;
  display: grid; grid-template-columns: 22px 80px 1fr 34px; align-items: center; gap: 10px;
  padding: 5px 6px;
  border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
}
.hubs button:hover { background: var(--ink-3); }
.hubs img { image-rendering: pixelated; }
.hubs .h-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubs .h-bar { height: 5px; border-radius: 3px; background: #2a2230; overflow: hidden; }
.hubs .h-bar i { display: block; height: 100%; border-radius: 3px; opacity: 0.85; }
.hubs .h-w { text-align: right; font: 600 11.5px/1 var(--mono); color: var(--text-2); }
.chip.loner { cursor: pointer; color: var(--text-2); }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.places button {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: baseline; gap: 10px;
  padding: 6px 6px;
  border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
}
.places button:hover { background: var(--ink-3); }
.places .p-name { font: italic small-caps 600 14.5px/1.3 var(--serif); color: #f3e6cc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places .p-kind { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.places .p-at { text-align: right; font: 11px/1 var(--mono); color: var(--text-3); }
.chip.loner:hover { border-color: #4a3d52; color: var(--text); }

/* ----------------------------------------------------------------- wishes */
.tabpane.wishes { padding-top: 14px; }
.wish-intro { margin: 0 0 12px; }
.tab-dot.wish-dot { background: var(--k-wish); }
.wish-note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 7px 10px;
  border: 1px solid rgba(169, 220, 255, 0.2);
  border-radius: 6px;
  background: rgba(64, 96, 170, 0.08);
  font-size: 12px; line-height: 1.4; color: #9fb0cf;
}
.wish-note .ico { color: #a9dcff; }

.wish-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wish {
  padding: 11px 12px 12px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--ink-3);
}
.wish[data-status="noted"] { border-color: rgba(244, 180, 27, 0.32); }
.wish[data-status="granted"], .wish[data-status="answered"] { border-color: rgba(156, 200, 255, 0.28); }
.wish[data-status="closed"] { opacity: 0.6; }
.wish[aria-busy="true"] .wbtn { cursor: progress; }

.wish-head { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: baseline; column-gap: 7px; }
.wrank { text-align: right; font: 600 11px/1 var(--mono); color: var(--text-3); }
.wthing { margin: 0; font: 600 16.5px/1.25 var(--serif); color: #f3e6cc; overflow-wrap: anywhere; }
.wthing::first-letter { text-transform: uppercase; }
.wcount { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.wcount b { margin-right: 2px; font: 700 13px/1 var(--mono); color: var(--k-wish); }

.wmeta, .wby, .wq, .wr, .wf { margin-left: 21px; }
.wmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; font-size: 11.5px; color: var(--text-3); }
.wsrc { white-space: nowrap; }
.wsrc b { font: 600 11px/1 var(--mono); color: var(--text-2); }
.wstat {
  padding: 0 5px; border-radius: 3px;
  background: var(--ink-4); color: var(--text-2);
  font: 700 10px/16px var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
}
.wstat[data-status="answered"] { background: linear-gradient(180deg, #d6efff, #8fc9f5); color: #0f2340; }
.wstat[data-status="granted"] { background: linear-gradient(180deg, #dce7ff, #9cb9f5); color: #121c40; }
.wstat[data-status="noted"] { background: var(--gold); color: #2a1a05; }
.wstat[data-status="closed"] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); }
.wexists {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border: 1px dashed #4a3d52; border-radius: 4px;
  font-size: 11px; color: var(--text-3); white-space: nowrap; cursor: help;
}

.wby { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 5px; }
.wwho { padding: 0; border: 0; background: none; font: 600 12.5px/1.6 var(--sans); color: var(--text); }
button.wwho { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
button.wwho:hover { text-decoration-color: currentColor; }
.wwho .n { margin-left: 3px; font: 600 10.5px/1 var(--mono); color: var(--text-3); }
.wmore { font-size: 11.5px; color: var(--text-3); }

.wq { margin-top: 8px; margin-right: 0; margin-bottom: 0; padding: 1px 0 1px 10px; border-left: 2px solid rgba(195, 176, 255, 0.4); }
.wq p { margin: 0; font: italic 13.5px/1.5 var(--serif); color: #ebe5f7; overflow-wrap: anywhere; }
.wq.is-fail { border-left-color: rgba(230, 72, 46, 0.45); }
.wq.is-fail p { font: 12.5px/1.45 var(--sans); color: var(--text-2); }
.wq footer { margin-top: 2px; font-size: 11px; color: var(--text-3); }

.wr { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; margin-bottom: 0; font-size: 12.5px; }
.wr-k { flex: none; font: 700 10px/16px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.wr-v { min-width: 0; overflow-wrap: anywhere; }
.wr.is-answer .wr-k { color: #a9dcff; }
.wr.is-answer .wr-v { font: italic 13.5px/1.45 var(--serif); color: #dff1ff; }
.wr.is-grant .wr-k { color: var(--k-grant); }
.wr.is-grant .wr-v { color: #dce8ff; }

.wf { display: flex; gap: 6px; margin-top: 10px; }
.wf + .wf { margin-top: 6px; }
.wf input {
  flex: 1; min-width: 0;
  height: 28px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #120e15; color: var(--text);
  font: 12.5px var(--sans);
}
.wf input::placeholder { color: var(--text-3); }
.wf .wf-say {
  border-color: #3a4562; background: #0f1220; color: #eef6ff;
  font: italic 13.5px var(--serif);
  caret-color: #a9dcff;
}
.wf .wf-say::placeholder { color: #7f8aa8; }
.wf .wf-say:focus { outline: 2px solid rgba(169, 220, 255, 0.55); outline-offset: 1px; }
.wf .wf-item { flex: 0 1 140px; }
.wbtn {
  flex: none;
  height: 28px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--ink-4); color: var(--text);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.wbtn:hover { border-color: #4a3d52; background: #33293a; }
.wbtn:disabled { opacity: 0.5; cursor: progress; }
.wbtn.sky { border: 0; background: linear-gradient(180deg, #cdeaff, #8cc6f2); color: #0f2340; font-weight: 700; }
.wbtn.sky:hover { background: linear-gradient(180deg, #ddf1ff, #9fd0f6); }
.wbtn.note { margin-left: auto; background: transparent; color: var(--text-2); }
.wbtn.note:hover { color: var(--text); }
.wbtn.note[aria-pressed="true"] { border-color: rgba(244, 180, 27, 0.55); background: rgba(244, 180, 27, 0.12); color: #ffe7b0; }

/* -------------------------------------------------------------- chronicle */
.tabpane.chronicle { position: relative; padding: 8px 26px 40px 24px; }
.chapter { padding: 22px 0 6px; border-bottom: 1px solid var(--line-soft); }
.chapter:last-child { border-bottom: 0; }
.chapter header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.chapter h3 { margin: 0; font: 600 17px/1.25 var(--serif); color: #f3e6cc; letter-spacing: 0.005em; }
.chapter h3 .ph { margin-left: 8px; font: italic 400 14px/1 var(--serif); color: var(--k-chronicle); text-transform: lowercase; }
.chapter .t { font: 11px/1 var(--mono); color: var(--text-3); white-space: nowrap; }
.chapter p { margin: 0 0 12px; font: 15.5px/1.7 var(--serif); color: #e6dccb; max-width: 62ch; text-wrap: pretty; }
.chron-jump {
  position: sticky; bottom: 10px; left: 0;
  display: block; margin: 8px auto 0;
  height: 28px; padding: 0 14px;
  border: 1px solid rgba(233, 207, 156, 0.45); border-radius: 999px;
  background: #2a2117; color: #f3e6cc;
  font-size: 12px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.chron-jump:hover { background: #352a1d; }

/* ----------------------------------------------------------------- events */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.fchip {
  --k: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px 0 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--ink-3);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s, border-color 0.15s;
}
.fchip .ico { color: var(--k); }
.fchip .n { font: 600 10.5px/1 var(--mono); color: var(--text-3); }
.fchip:hover { border-color: #4a3d52; }
.fchip[aria-pressed="false"] { background: transparent; color: var(--text-3); border-style: dashed; }
.fchip[aria-pressed="false"] .ico { color: var(--text-3); }
.fchip.all { padding: 0 9px; color: var(--text-2); }

.feed { list-style: none; margin: 0; padding: 0; }
.ev {
  --k: var(--text-2);
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  cursor: default;
  border-radius: 4px;
}
.ev.has-target { cursor: pointer; }
.ev.has-target:hover { background: var(--ink-3); }
.ev .ico { color: var(--k); margin-top: 1px; }
.ev .item-ico { margin: -2px 0 0 -2px; }
.ev .who { font-weight: 650; color: var(--text); margin-right: 5px; }
.ev .t { font: 11px/19px var(--mono); color: var(--text-3); }
.ev.is-new { animation: ev-in 0.9s var(--ease-out); }
@keyframes ev-in { from { background: rgba(207, 198, 184, 0.09); } to { background: transparent; } }

.ev[data-kind="say"] .line { color: var(--text); }
.ev[data-kind="say"] .q { color: #efe6d6; }
.ev[data-kind="fail"] { color: var(--text-3); }
.ev[data-kind="discover"] {
  margin: 4px 0;
  border: 1px solid rgba(244, 180, 27, 0.4);
  background: linear-gradient(90deg, rgba(244, 180, 27, 0.13), rgba(244, 180, 27, 0.04));
  border-radius: 6px;
  color: #f8dc93;
}
.ev[data-kind="discover"] .who { color: #ffe7a6; }
.ev[data-kind="discover"] .tag {
  display: inline-block; margin-right: 6px; padding: 0 5px;
  border-radius: 3px; background: var(--gold); color: #2a1a05;
  font: 700 10px/16px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
}
.ev[data-kind="discover"].is-new { animation: disc-in 1.6s var(--ease-out); }
@keyframes disc-in { from { box-shadow: 0 0 0 3px rgba(244, 180, 27, 0.45), 0 0 24px rgba(244, 180, 27, 0.35); } to { box-shadow: 0 0 0 0 rgba(244, 180, 27, 0); } }

/* kind colors */
[data-kind="say"] { --k: var(--k-say); }
[data-kind="craft"] { --k: var(--k-craft); }
[data-kind="discover"] { --k: var(--k-discover); }
[data-kind="gather"] { --k: var(--k-gather); }
[data-kind="fail"] { --k: var(--k-fail); }
[data-kind="place"] { --k: var(--k-place); }
[data-kind="write"] { --k: var(--k-write); }
[data-kind="program"] { --k: var(--k-program); }
[data-kind="collapse"] { --k: var(--k-collapse); }
[data-kind="join"] { --k: var(--k-join); }
[data-kind="sleep"] { --k: var(--k-sleep); }
[data-kind="eat"] { --k: var(--k-eat); }
[data-kind="plant"] { --k: var(--k-plant); }
[data-kind="chronicle"] { --k: var(--k-chronicle); }
[data-kind="tame"] { --k: var(--k-tame); }
[data-kind="invent"] { --k: var(--k-invent); }
[data-kind="voice"] { --k: var(--k-voice); }
[data-kind="learn"] { --k: var(--k-learn); }
[data-kind="weather"] { --k: var(--k-weather); }
[data-kind="store"] { --k: var(--k-store); }
[data-kind="take"] { --k: var(--k-take); }
[data-kind="tend"] { --k: var(--k-tend); }
[data-kind="wish"] { --k: var(--k-wish); }
[data-kind="grant"] { --k: var(--k-grant); }
[data-kind="steward"] { --k: var(--k-voice); }

/* filters hide rows by kind (class on the feed) */
.feed.hide-say .ev[data-kind="say"], .feed.hide-craft .ev[data-kind="craft"],
.feed.hide-discover .ev[data-kind="discover"], .feed.hide-gather .ev[data-kind="gather"],
.feed.hide-fail .ev[data-kind="fail"], .feed.hide-place .ev[data-kind="place"],
.feed.hide-write .ev[data-kind="write"], .feed.hide-program .ev[data-kind="program"],
.feed.hide-collapse .ev[data-kind="collapse"], .feed.hide-join .ev[data-kind="join"],
.feed.hide-sleep .ev[data-kind="sleep"], .feed.hide-eat .ev[data-kind="eat"],
.feed.hide-plant .ev[data-kind="plant"], .feed.hide-chronicle .ev[data-kind="chronicle"],
.feed.hide-tame .ev[data-kind="tame"], .feed.hide-invent .ev[data-kind="invent"],
.feed.hide-voice .ev[data-kind="voice"], .feed.hide-learn .ev[data-kind="learn"],
.feed.hide-weather .ev[data-kind="weather"], .feed.hide-store .ev[data-kind="store"],
.feed.hide-take .ev[data-kind="take"], .feed.hide-tend .ev[data-kind="tend"],
.feed.hide-wish .ev[data-kind="wish"], .feed.hide-grant .ev[data-kind="grant"] { display: none; }
.ev[data-kind="tend"] { color: #ffd9b0; background: linear-gradient(90deg, rgba(255, 140, 60, 0.1), transparent 70%); }
.ev[data-kind="weather"] { color: #b9c7d8; font-style: italic; background: rgba(120, 150, 190, 0.06); }
.ev[data-kind="weather"] .ico { color: var(--k-weather); }

/* learning: cultural transmission, gentle teal */
.ev[data-kind="learn"] {
  margin: 3px 0;
  border: 1px solid rgba(95, 214, 196, 0.28);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(95, 214, 196, 0.12), rgba(95, 214, 196, 0.03));
  color: #cdf3ec;
}
.ev[data-kind="learn"] .ico { color: var(--k-learn); }

/* a voice from the sky: celestial blue */
.ev[data-kind="voice"] {
  margin: 6px 0;
  padding: 10px 8px;
  border: 1px solid rgba(169, 220, 255, 0.55);
  border-radius: 7px;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(169, 220, 255, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(64, 96, 170, 0.28), rgba(40, 52, 110, 0.18));
  color: #dff1ff;
}
.ev[data-kind="voice"] .ico { color: #cfeaff; filter: drop-shadow(0 0 4px rgba(169, 220, 255, 0.8)); }
.ev[data-kind="voice"] .tag {
  display: inline-block; margin-right: 6px; padding: 0 6px;
  border-radius: 3px; background: linear-gradient(180deg, #d6efff, #8fc9f5); color: #0f2340;
  font: 800 10px/16px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px;
}
.ev[data-kind="voice"] .q { font: italic 14px/1.5 var(--serif); color: #eef8ff; }

/* wishes: soft lilac, the words set apart like speech */
.ev[data-kind="wish"] { color: #ddd4fb; }
.ev[data-kind="wish"] .q { font: italic 14px/1.5 var(--serif); color: #f0ebff; }

/* a wish granted: a gift from the sky, in the voice's blue */
.ev[data-kind="grant"] {
  margin: 4px 0;
  border: 1px solid rgba(156, 200, 255, 0.35);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(110, 150, 240, 0.16), rgba(110, 150, 240, 0.04));
  color: #dceaff;
}
.ev[data-kind="grant"] .ico { color: #cfe2ff; filter: drop-shadow(0 0 4px rgba(156, 200, 255, 0.75)); }

/* inventions: the most celebrated event */
.ev[data-kind="invent"] {
  position: relative;
  margin: 6px 0;
  padding: 10px 8px;
  border: 1px solid rgba(255, 215, 94, 0.7);
  border-radius: 7px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 215, 94, 0.22), transparent 55%),
    linear-gradient(90deg, rgba(244, 180, 27, 0.16), rgba(244, 180, 27, 0.05));
  color: #fff0c2;
  box-shadow: 0 0 0 1px rgba(255, 215, 94, 0.12) inset, 0 6px 18px rgba(244, 180, 27, 0.12);
}
.ev[data-kind="invent"] .ico { color: #ffe08a; filter: drop-shadow(0 0 4px rgba(255, 215, 94, 0.8)); }
.ev[data-kind="invent"] .who { color: #fff3c9 !important; }
.ev[data-kind="invent"] .tag {
  display: inline-block; margin-right: 6px; padding: 0 6px;
  border-radius: 3px; background: linear-gradient(180deg, #ffe08a, #f4b41b); color: #2a1a05;
  font: 800 10px/16px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px;
}
.ev[data-kind="invent"] .inv-desc { font: italic 13.5px/1.5 var(--serif); color: #ffe7a6; }
.ev[data-kind="invent"].is-new { animation: inv-in 2.4s var(--ease-out); }
@keyframes inv-in {
  0% { box-shadow: 0 0 0 4px rgba(255, 215, 94, 0.6), 0 0 36px rgba(255, 215, 94, 0.55); }
  100% { box-shadow: 0 0 0 1px rgba(255, 215, 94, 0.12) inset, 0 6px 18px rgba(244, 180, 27, 0.12); }
}
.discoveries li.invented .item { color: #ffe08a; }
.ev[data-kind="tame"] { color: #ffd3e0; }
.ev[data-kind="tame"] .who { color: #ffb3c9; }

.ev[data-kind="plant"] .who { color: #b5f0a8; }
.ev[data-kind="plant"] { color: #cfe9c6; }
.ev[data-kind="chronicle"] {
  margin: 4px 0;
  border: 1px solid rgba(233, 207, 156, 0.28);
  background: rgba(233, 207, 156, 0.06);
  border-radius: 6px;
}
.ev[data-kind="chronicle"] .tag {
  display: inline-block; margin-right: 6px; padding: 0 5px;
  border-radius: 3px; background: var(--k-chronicle); color: #2b1f0c;
  font: 700 10px/16px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
}
.ev .chron-ex { font: italic 13.5px/1.5 var(--serif); color: #eadcc2; }

/* ------------------------------------------------------------------ swarm */
.rate { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.rate b { font: 700 13px/1 var(--mono); color: var(--text); margin-right: 2px; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  /* fades at the edges show there are more columns to scroll to */
  background:
    linear-gradient(90deg, var(--ink-1) 30%, rgba(20, 16, 23, 0)) left / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--ink-1) 30%, rgba(20, 16, 23, 0)) right / 40px 100% no-repeat local,
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(0, 0, 0, 0.55), transparent) right / 14px 100% no-repeat scroll,
    var(--ink-1);
}
.table-wrap:empty, .table-wrap:has(table:empty) { display: none; }
.mtable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.mtable th, .mtable td { padding: 7px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.mtable tr:last-child td { border-bottom: 0; }
.mtable thead th {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  background: var(--ink-1);
  position: sticky; top: 0;
}
.mtable td { font: 12px/1.3 var(--mono); color: var(--text); }
.mtable .m {
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  background: var(--ink-1);
  font: 600 12px/1.3 var(--mono);
  border-right: 1px solid var(--line-soft);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.mtable td.m { color: var(--text); }
.mtable .m i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: 0; }
.mtable tbody tr:hover td { background: var(--ink-3); }
.mtable td.zero { color: var(--text-3); }
.table-note { margin: 8px 0 0; font-size: 11.5px; color: var(--text-3); }

.discoveries { list-style: none; margin: 0; padding: 0; }
.discoveries li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-2);
}
.discoveries li:last-child { border-bottom: 0; }
.discoveries .ico { color: var(--gold); margin: 2px; }
.discoveries .item-ico { margin: 0; }
.discoveries .item { font-weight: 650; color: #f8dc93; }
.discoveries .by { font-weight: 600; }
.discoveries .t { font: 11px/19px var(--mono); color: var(--text-3); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  /* the layer switch keeps only the option to go to, in a word ("Below", "Above"), with the count of creatures there */
  .layer-switch { padding: 0; border: 0; background: none; }
  .layer-switch button[aria-checked="true"] { display: none; }
  .layer-switch button { height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); font-size: 0; }
  .layer-switch button::before { font-size: 11.5px; }
  .layer-switch [data-layer="deep"]::before { content: "Below"; content: "Below" / ""; }
  .layer-switch [data-layer="surface"]::before { content: "Above"; content: "Above" / ""; }
  .layer-badge { position: absolute; top: -8px; right: -9px; min-width: 16px; height: 15px; padding: 0 4px; font-size: 10px; background: #382a17; }
}
@media (max-width: 1100px) {
  .hstat-sub { display: none; }
  .hstat .ico { grid-row: auto; }
}
@media (max-width: 900px) {
  .panel {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 5;
    width: min(var(--panel-w), 100vw);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
  }
  .panel > * { width: min(var(--panel-w), 100vw); }
  .topbar { gap: 16px; padding-left: 12px; }
  .hstat { padding: 0 12px; }
  .pb-long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pb-short { display: inline; }
}
@media (max-width: 640px) {
  .voice-btn span:last-child { display: none; }
  .voice-btn { padding: 0 8px; }
  .hstat:nth-child(2) { display: none; }
  .topbar { gap: 12px; }
  .conn-label { display: none; }
  .conn { padding: 0 9px; }
}

@media (max-width: 560px) {
  .hstats { display: none; }
}
@media (max-width: 440px) {
  /* the brand keeps its campfire so every button still fits; without the sprites, a monogram instead of the name */
  .brand { width: 24px; overflow: hidden; }
  html:not(.sprites-ok) .brand-fallback { font-size: 0; letter-spacing: 0; }
  html:not(.sprites-ok) .brand-fallback::before { content: "SW"; font-size: 12px; letter-spacing: 0.04em; }
}

/* public mode, narrower: the banner trades Speak's room for its own, so it gives up more, and sooner */
@media (max-width: 1699px) {
  html.is-public .conn[data-state="live"] .conn-label {   /* still read out: the status keeps its words */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html.is-public .conn[data-state="live"] { padding: 0 9px; }
  html.is-public .hstat-sub { display: none; }
  html.is-public .hstat .ico { grid-row: auto; }
}
@media (min-width: 901px) and (max-width: 1699px) {
  html.is-public .topbar { gap: 20px; }
}
@media (max-width: 1100px) {
  .public-banner { min-width: 11.5em; }
}
@media (max-width: 720px) {
  html.is-public .brand { width: 24px; overflow: hidden; }
  html.is-public:not(.sprites-ok) .brand-fallback { font-size: 0; letter-spacing: 0; }
  html.is-public:not(.sprites-ok) .brand-fallback::before { content: "SW"; font-size: 12px; letter-spacing: 0.04em; }
}
@media (max-width: 520px) {
  .public-banner { flex: none; min-width: 0; container-type: normal; }
  .pb-short { display: none; }
}
@media (max-width: 440px) {
  html.is-public .topbar, html.is-public .topbar-end { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* sound: speaker button and volume (web/sound.js) */
.sound-ctl { display: inline-flex; align-items: center; gap: 6px; }
.sound-ctl .icon-btn[aria-pressed="true"] { color: var(--text); border-color: #45394d; }
.sound-ctl { position: relative; }
.audio-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 10;
  width: min(300px, calc(100vw - 24px)); padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #1c2236, #171a28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.audio-pop[hidden] { display: none; }
.mix-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin-bottom: 8px; }
.mix-row { display: grid; grid-template-columns: 76px 1fr 28px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text); }
.mix-row input { width: 100%; accent-color: var(--text-2); cursor: pointer; }
.mix-row output { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mix-reset { margin-top: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; }
.mix-reset:hover { color: var(--text); border-color: #45394d; }

/* music has its own switch next to the speaker */
.music-btn { font-size: 14px; line-height: 1; }
.music-btn[aria-pressed="false"] { opacity: 0.4; filter: grayscale(1); }

/* ------------------------------------------------------- skins (stream S7) */
/* The world-art switcher in the panel footer: LimeZu, Kenney, ASCII (remembered in localStorage). */
.panel-foot { align-items: center; }
.panel-foot .foot-credit { min-width: 0; }
.skin-switch { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-1); }
.skin-switch button {
  height: 20px; padding: 0 7px;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--text-3);
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.02em;
  cursor: pointer;
}
.skin-switch button:hover { color: var(--text); background: var(--ink-3); }
.skin-switch button[aria-checked="true"] { color: var(--text); background: var(--ink-4); }
.skin-switch button[data-skin="ascii"] { font-family: var(--mono); }

/* ASCII: the roguelike skin keeps the chrome plain and monospace where the map talks */
html[data-skin="ascii"] .hud { border-radius: 2px; font-family: var(--mono); }
html[data-skin="ascii"] .cre-portrait { border-radius: 2px; background: #0d130e; }

/* ------------------------------------------------------- LimeZu chrome (stream UI)
   In the LimeZu skin the whole chrome is dressed in LimeZu's Modern User Interface pack (web/assets/limezu/ui.png,
   licensed and gitignored): a mauve plank (header and the panel's rails), a parchment notice board nailed into a
   wooden frame (the side panel's page), the pack's pills for tabs and its framed icon buttons. Style 2 (cool
   lavender) is the sky's: the voice from the sky, its dialog, answers and gifts. Every piece is drawn at 2 css px per
   art pixel. limezu.js sets html.lz-ui and the --lz-* images only when every piece loaded; without them, or in
   another skin, nothing below applies and the chrome is the one above.
   Type: Jersey 10 (OFL, web/assets/fonts) for titles, tabs, labels and numbers; the sans for running text; the
   serif keeps the prose (chronicle, quotes). */

@font-face {
  font-family: "Jersey 10";
  src: url("assets/fonts/Jersey10-Regular.woff2") format("woff2");
  font-display: swap;
}

html.lz-ui[data-skin="limezu"] {
  --px: "Jersey 10", var(--sans);
  /* the pack's palette (Modern_UI_Style_1/2), and text tones derived from it for AA on every surface */
  --lz-navy: #3a3a50;            /* the pack's outline */
  --lz-plank: #4a373d;           /* header and rails: a shade under the pack's mauve so its buttons stand off it */
  --lz-plank-lo: #382a30;
  --lz-mauve: #6b5052;
  --lz-mauve-3: #9c786b;
  --lz-page: #d0be9c;            /* light parchment: the board */
  --lz-page-hi: #ddd0b3;         /* a raised card on it */
  --lz-page-lo: #c3ac90;         /* mid parchment: sunken, hover */
  --lz-edge: #b18a74;            /* parchment's shadow line: rules and card edges */
  --lz-wood: #b5754d;
  --lz-wood-hi: #daa463;
  --lz-wood-lo: #a85f46;
  --lz-ink: #2b2638;             /* text on parchment (7:1 on the board) */
  --lz-ink-2: #4f3a3f;           /* secondary text (5.8:1 on the board, 4.9:1 sunken) */
  --lz-cream: #f1e5c9;           /* text on the plank */
  --lz-cream-2: #d9c9a8;         /* secondary text on the plank */
  --lz-gold-ink: #6b4508;        /* gold-toned text on parchment */
  --lz-sky-lo: #d8d0e0;          /* Style 2: the sky */
  --lz-sky-edge: #8b8bab;
  --lz-sky-ink: #26304f;
  --lz-sky-ink-2: #444d6e;
  --lz-slate: #241c25;           /* the charts' blackboard: dark enough for the charts' own light ink */
  --lz-focus: var(--lz-ink);
  --lz-notch: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
  --lz-dash: linear-gradient(90deg, var(--lz-edge) 50%, transparent 0) left bottom / 4px 2px repeat-x;
  --topbar-h: 58px;
}
html.lz-ui[data-skin="limezu"] body { background: var(--lz-plank); }
html.lz-ui[data-skin="limezu"] ::selection { background: rgba(218, 164, 99, 0.6); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] :focus-visible { outline: 2px solid var(--lz-focus); outline-offset: 2px; border-radius: 0; }
html.lz-ui[data-skin="limezu"] .topbar,
html.lz-ui[data-skin="limezu"] .tabs,
html.lz-ui[data-skin="limezu"] .panel-foot,
html.lz-ui[data-skin="limezu"] .map-wrap { --lz-focus: #f4c84a; }
html.lz-ui[data-skin="limezu"] .hud,
html.lz-ui[data-skin="limezu"] .audio-pop,
html.lz-ui[data-skin="limezu"] .toast,
html.lz-ui[data-skin="limezu"] .veil-card { --lz-focus: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .voice-pop { --lz-focus: var(--lz-sky-ink); }
html.lz-ui[data-skin="limezu"] * { scrollbar-color: var(--lz-mauve-3) transparent; }
html.lz-ui[data-skin="limezu"] ::-webkit-scrollbar-thumb { background: var(--lz-mauve-3); border-radius: 0; border: 3px solid var(--lz-page); }
html.lz-ui[data-skin="limezu"] kbd {
  font: 15px/1 var(--px); padding: 1px 4px 0; border-radius: 0;
  border: 2px solid var(--lz-mauve-3); border-bottom-width: 4px;
  background: var(--lz-page-lo); color: var(--lz-ink);
}

/* ---- the plank: header */
html.lz-ui[data-skin="limezu"] .topbar {
  border-bottom: 0;
  padding-bottom: 10px;
  /* a wooden rail along the map's top edge, in the pack's wood, 2 px a pixel */
  background:
    linear-gradient(to top, var(--lz-navy) 0 2px, var(--lz-wood-lo) 2px 4px, var(--lz-wood) 4px 6px, var(--lz-wood-hi) 6px 8px, var(--lz-navy) 8px 10px) left bottom / 100% 10px no-repeat,
    var(--lz-plank);
}
html.lz-ui[data-skin="limezu"] .hstat { border-left: 2px solid var(--lz-plank-lo); column-gap: 10px; }
html.lz-ui[data-skin="limezu"] .hstat:first-child { border-left: 0; }
html.lz-ui[data-skin="limezu"] .hstat .ico { color: var(--lz-cream-2); }
html.lz-ui[data-skin="limezu"] .hstat-main { font: 20px/19px var(--px); color: var(--lz-cream); letter-spacing: 0.01em; }
html.lz-ui[data-skin="limezu"] .hstat-main b { font-weight: 400; }
html.lz-ui[data-skin="limezu"] .hstat-sub { font: 16px/16px var(--px); color: var(--lz-cream-2); letter-spacing: 0.02em; }
html.lz-ui[data-skin="limezu"] .weather { font: 17px/1 var(--px); vertical-align: -3px; }
html.lz-ui[data-skin="limezu"] .phase[data-phase="dusk"] { color: #f2a085; }   /* 5.3:1 on the plank */
html.lz-ui[data-skin="limezu"] .topbar-end { gap: 10px; }
html.lz-ui[data-skin="limezu"] .sound-ctl { gap: 4px; }

/* the pack's framed icon buttons: three states side by side (raised, resting, pressed), drawn 2x */
html.lz-ui[data-skin="limezu"] .topbar .icon-btn,
html.lz-ui[data-skin="limezu"] .hud-br .icon-btn,
html.lz-ui[data-skin="limezu"] .panel .icon-btn {
  width: 32px; height: 34px;
  border: 0; border-radius: 0;
  background: var(--lz-ib-blank) -32px 0 / 96px 34px no-repeat;
  color: var(--lz-page);
  image-rendering: pixelated;
  transition: none;
}
html.lz-ui[data-skin="limezu"] .topbar .icon-btn:hover,
html.lz-ui[data-skin="limezu"] .hud-br .icon-btn:hover,
html.lz-ui[data-skin="limezu"] .panel .icon-btn:hover { background-position: 0 0; color: var(--lz-page); }
html.lz-ui[data-skin="limezu"] .topbar .icon-btn:active,
html.lz-ui[data-skin="limezu"] .hud-br .icon-btn:active,
html.lz-ui[data-skin="limezu"] .panel .icon-btn:active,
html.lz-ui[data-skin="limezu"] #audio-btn[aria-expanded="true"] { background-position: -64px 0; }
html.lz-ui[data-skin="limezu"] .topbar .icon-btn:disabled,
html.lz-ui[data-skin="limezu"] .hud-br .icon-btn:disabled { opacity: 0.55; background-position: -32px 0; }
/* their glyphs are the pack's; the sound module's SVGs and the music note step aside (they stay for other skins) */
html.lz-ui[data-skin="limezu"] .topbar .icon-btn > svg,
html.lz-ui[data-skin="limezu"] #music-btn > [aria-hidden],
html.lz-ui[data-skin="limezu"] #panel-toggle > .ico,
html.lz-ui[data-skin="limezu"] .hud-br .icon-btn > .ico { display: none; }
html.lz-ui[data-skin="limezu"] #sound-btn { background-image: var(--lz-ib-mute); }
html.lz-ui[data-skin="limezu"] #sound-btn[aria-pressed="true"] { background-image: var(--lz-ib-sound); }
html.lz-ui[data-skin="limezu"] #music-btn { background-image: var(--lz-ib-music); }
html.lz-ui[data-skin="limezu"] #music-btn[aria-pressed="false"] { background-image: var(--lz-ib-music-off); opacity: 1; filter: none; }
html.lz-ui[data-skin="limezu"] #audio-btn { background-image: var(--lz-ib-sliders); }
html.lz-ui[data-skin="limezu"] #panel-toggle { background-image: var(--lz-ib-right); }
html.lz-ui[data-skin="limezu"] #panel-toggle[aria-expanded="false"] { background-image: var(--lz-ib-left); }
html.lz-ui[data-skin="limezu"] .hud-br [data-zoom="1"] { background-image: var(--lz-ib-plus); }
html.lz-ui[data-skin="limezu"] .hud-br [data-zoom="-1"] { background-image: var(--lz-ib-minus); }
html.lz-ui[data-skin="limezu"] .panel .icon-btn .ico { color: var(--lz-page); }
html.lz-ui[data-skin="limezu"] .panel .icon-btn:active .ico { transform: translateY(2px); }

/* Speak: the sky's button */
html.lz-ui[data-skin="limezu"] .voice-btn {
  height: 34px; padding: 0 14px 2px 10px; gap: 6px;
  border: 2px solid transparent; border-radius: 0;
  border-image: var(--lz-sky-button) 5 fill / 10px;
  background: none;
  color: var(--lz-sky-ink);
  font: 19px/1 var(--px); letter-spacing: 0.02em;
  image-rendering: pixelated;
  transition: none;
}
html.lz-ui[data-skin="limezu"] .voice-btn .ico { color: var(--lz-sky-ink-2); }
html.lz-ui[data-skin="limezu"] .voice-btn:hover { background: none; border-color: transparent; filter: brightness(1.06); }
html.lz-ui[data-skin="limezu"] .voice-btn:active,
html.lz-ui[data-skin="limezu"] .voice-btn.is-open { background: none; border-image-source: var(--lz-sky-button-down); padding-top: 2px; padding-bottom: 0; }
html.lz-ui[data-skin="limezu"] .voice-btn:disabled { opacity: 0.55; background: none; filter: grayscale(0.6); }

/* the link to the world: a lamp in a slot of the plank */
html.lz-ui[data-skin="limezu"] .conn {
  height: 30px; padding: 0 10px 1px 9px; gap: 8px;
  border: 2px solid var(--lz-navy); border-radius: 0;
  background: var(--lz-plank-lo);
  box-shadow: inset 0 2px #2a1f24;
  color: var(--lz-cream); font: 18px/1 var(--px);
}
html.lz-ui[data-skin="limezu"] .conn-dot { width: 8px; height: 8px; border-radius: 0; box-shadow: 0 0 0 2px var(--lz-navy); background: var(--lz-mauve-3); }
html.lz-ui[data-skin="limezu"] .conn[data-state="live"] .conn-dot { background: #9bc246; box-shadow: 0 0 0 2px var(--lz-navy); }
html.lz-ui[data-skin="limezu"] .conn[data-state="demo"] .conn-dot { background: #50a7e8; box-shadow: 0 0 0 2px var(--lz-navy); }
html.lz-ui[data-skin="limezu"] .conn[data-state="connecting"] .conn-dot,
html.lz-ui[data-skin="limezu"] .conn[data-state="stalled"] .conn-dot { background: #f2b22b; }
html.lz-ui[data-skin="limezu"] .conn[data-state="offline"] { color: #ffc2b0; border-color: var(--lz-navy); }
html.lz-ui[data-skin="limezu"] .conn[data-state="offline"] .conn-dot { background: #e63f38; }

/* Surface / Underground: a slot in the plank holding the pack's pills, like the art switch; the count a wooden tag */
html.lz-ui[data-skin="limezu"] .layer-switch {
  gap: 0; padding: 2px;
  border: 2px solid var(--lz-navy); border-radius: 0;
  background: var(--lz-plank-lo);
  box-shadow: inset 0 2px #2a1f24;
}
html.lz-ui[data-skin="limezu"] .layer-switch button {
  height: 26px; padding: 0 10px 2px; gap: 6px;
  border: 2px solid transparent; border-radius: 0;
  background: none; color: var(--lz-cream-2);
  font: 18px/1 var(--px); letter-spacing: 0.02em;
  image-rendering: pixelated;
  transition: none;
}
html.lz-ui[data-skin="limezu"] .layer-switch button:hover { color: var(--lz-cream); background: none; border-image: var(--lz-tab) 4 fill / 8px; }
html.lz-ui[data-skin="limezu"] .layer-switch button[aria-checked="true"] {
  color: var(--lz-ink); background: none; box-shadow: none;
  border-image: var(--lz-tab-on) 4 fill / 8px;
}
html.lz-ui[data-skin="limezu"] .layer-badge {
  min-width: 16px; height: 16px; padding: 0 3px 1px;
  border-radius: 0; background: var(--lz-wood-hi); color: var(--lz-ink);
  box-shadow: 0 0 0 2px var(--lz-navy);
  font: 14px/1 var(--px);
}

/* ---- popovers: the mixer on parchment in a wooden frame, the voice in the sky's frame */
html.lz-ui[data-skin="limezu"] .audio-pop {
  top: calc(100% + 8px);
  padding: 10px 14px 14px;
  border: 6px solid transparent; border-radius: 0;
  border-image: var(--lz-panel) 8 fill / 16px;
  background: none; box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(26, 16, 20, 0.5));
  color: var(--lz-ink);
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .mix-title { font: 20px/1 var(--px); text-transform: none; letter-spacing: 0.02em; color: var(--lz-ink); margin-bottom: 8px; }
html.lz-ui[data-skin="limezu"] .mix-row { grid-template-columns: 78px 1fr 30px; gap: 10px; padding: 4px 0; font-size: 12.5px; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .mix-row output { font: 18px/1 var(--px); color: var(--lz-ink); }
/* the sliders: a mauve groove and a wooden knob, in pixels */
html.lz-ui[data-skin="limezu"] .mix-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; margin: 0; }
html.lz-ui[data-skin="limezu"] .mix-row input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; background: var(--lz-mauve); box-shadow: 0 0 0 2px var(--lz-navy), inset 0 2px #57414a;
}
html.lz-ui[data-skin="limezu"] .mix-row input[type="range"]::-moz-range-track {
  height: 8px; background: var(--lz-mauve); box-shadow: 0 0 0 2px var(--lz-navy), inset 0 2px #57414a; border: 0;
}
html.lz-ui[data-skin="limezu"] .mix-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 18px; margin-top: -5px; border: 0; border-radius: 0;
  background: var(--lz-wood-hi);
  box-shadow: 0 0 0 2px var(--lz-navy), inset -2px -2px var(--lz-wood-lo), inset 2px 2px #f0cc8a;
}
html.lz-ui[data-skin="limezu"] .mix-row input[type="range"]::-moz-range-thumb {
  width: 12px; height: 18px; border: 0; border-radius: 0;
  background: var(--lz-wood-hi);
  box-shadow: 0 0 0 2px var(--lz-navy), inset -2px -2px var(--lz-wood-lo), inset 2px 2px #f0cc8a;
}
html.lz-ui[data-skin="limezu"] .mix-row input[type="range"]:focus-visible { outline-offset: 3px; }

/* buttons with words: the pack's parchment button, pressed when pushed */
html.lz-ui[data-skin="limezu"] .mix-reset,
html.lz-ui[data-skin="limezu"] .wbtn,
html.lz-ui[data-skin="limezu"] .chron-jump,
html.lz-ui[data-skin="limezu"] .pill-btn {
  height: 32px; padding: 0 12px 2px;
  border: 4px solid transparent; border-radius: 0;
  border-image: var(--lz-button) 6 fill / 12px;
  background: none; box-shadow: none;
  color: var(--lz-ink);
  font: 18px/1 var(--px); letter-spacing: 0.02em;
  image-rendering: pixelated;
  transition: none;
}
html.lz-ui[data-skin="limezu"] .mix-reset:hover,
html.lz-ui[data-skin="limezu"] .wbtn:hover,
html.lz-ui[data-skin="limezu"] .chron-jump:hover,
html.lz-ui[data-skin="limezu"] .pill-btn:hover { background: none; border-color: transparent; color: var(--lz-ink); filter: brightness(1.05); }
html.lz-ui[data-skin="limezu"] .mix-reset:active,
html.lz-ui[data-skin="limezu"] .wbtn:active,
html.lz-ui[data-skin="limezu"] .chron-jump:active,
html.lz-ui[data-skin="limezu"] .pill-btn:active { border-image-source: var(--lz-button-down); padding-top: 2px; padding-bottom: 0; filter: none; }
html.lz-ui[data-skin="limezu"] .wbtn:disabled { opacity: 0.6; }
html.lz-ui[data-skin="limezu"] .mix-reset { margin-top: 10px; }

html.lz-ui[data-skin="limezu"] .voice-pop {
  top: calc(100% + 8px);
  padding: 10px 12px 12px;
  border: 6px solid transparent; border-radius: 0;
  border-image: var(--lz-sky-frame) 7 fill / 14px;
  background: none; box-shadow: none;
  filter: drop-shadow(0 10px 14px rgba(18, 20, 40, 0.5));
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .voice-form { gap: 8px; }
html.lz-ui[data-skin="limezu"] .voice-form input,
html.lz-ui[data-skin="limezu"] .wf .wf-say {
  border: 2px solid var(--lz-sky-edge); border-radius: 0;
  background: #f8f5fb; color: var(--lz-sky-ink);
  box-shadow: inset 0 2px var(--lz-sky-lo);
  caret-color: var(--lz-sky-ink);
}
html.lz-ui[data-skin="limezu"] .voice-form input { height: 36px; font-size: 14.5px; }
html.lz-ui[data-skin="limezu"] .voice-form input::placeholder,
html.lz-ui[data-skin="limezu"] .wf .wf-say::placeholder { color: #5a6283; }
html.lz-ui[data-skin="limezu"] .voice-form input:focus,
html.lz-ui[data-skin="limezu"] .wf .wf-say:focus { outline: 2px solid var(--lz-sky-ink); outline-offset: 1px; }
/* the sky's words go out on a deep blue button */
html.lz-ui[data-skin="limezu"] .voice-form button,
html.lz-ui[data-skin="limezu"] .wbtn.sky {
  height: 36px; padding: 0 14px 2px;
  border: 0; border-radius: 0; border-image: none;
  background: #34416a; color: #f4f0fa;
  box-shadow: 0 0 0 2px var(--lz-navy), inset 0 2px #5a6a9a, inset 0 -4px #232c4a;
  font: 19px/1 var(--px); letter-spacing: 0.02em;
  margin: 2px;
}
html.lz-ui[data-skin="limezu"] .wbtn.sky { height: 28px; font-size: 17px; }
html.lz-ui[data-skin="limezu"] .voice-form button:hover,
html.lz-ui[data-skin="limezu"] .wbtn.sky:hover { background: #3d4b78; filter: none; }
html.lz-ui[data-skin="limezu"] .voice-form button:active,
html.lz-ui[data-skin="limezu"] .wbtn.sky:active { box-shadow: 0 0 0 2px var(--lz-navy), inset 0 4px #232c4a; padding-top: 4px; padding-bottom: 0; }
html.lz-ui[data-skin="limezu"] .voice-scope { margin: 10px 2px 0; font-size: 12px; color: var(--lz-sky-ink-2); }
html.lz-ui[data-skin="limezu"] .voice-scope b { color: var(--lz-sky-ink); }
html.lz-ui[data-skin="limezu"] .voice-scope kbd { background: var(--lz-sky-lo); border-color: var(--lz-sky-edge); color: var(--lz-sky-ink); }
html.lz-ui[data-skin="limezu"] .voice-scope button { color: var(--lz-sky-ink); font-size: 12px; }

/* ---- the map's own HUD: parchment in the wooden frame, like the speech bubbles */
html.lz-ui[data-skin="limezu"] .hud {
  border: 6px solid transparent; border-radius: 0;
  border-image: var(--lz-panel) 8 fill / 16px;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  filter: drop-shadow(0 6px 8px rgba(20, 12, 16, 0.4));
  color: var(--lz-ink-2);
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .hud-top { padding: 4px 4px 4px 10px; gap: 10px; font: 19px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .hud-top b { color: var(--lz-ink); font-weight: 400; }
html.lz-ui[data-skin="limezu"] .follow-swatch { width: 10px; height: 10px; border-radius: 0; box-shadow: 0 0 0 2px var(--lz-navy); }
html.lz-ui[data-skin="limezu"] .pill-btn { height: 30px; gap: 6px; padding: 0 8px 2px 10px; font-size: 17px; }
html.lz-ui[data-skin="limezu"] .pill-btn kbd { font-size: 13px; padding: 0 3px; }
html.lz-ui[data-skin="limezu"] .hud-bl { padding: 4px 6px; font: 12px/1.4 var(--mono); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .hud-bl .hv-k { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .hud-bl .hv-v { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .hud-br { padding: 2px; gap: 4px; }
html.lz-ui[data-skin="limezu"] .zoom-label { min-width: 34px; font: 20px/1 var(--px); color: var(--lz-ink); }

/* toasts: a slip of parchment in the wooden frame; a warning on the gold pill */
html.lz-ui[data-skin="limezu"] .toast {
  bottom: 22px;
  padding: 6px 14px 8px;
  border: 6px solid transparent; border-radius: 0;
  border-image: var(--lz-panel) 8 fill / 16px;
  background: none; box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(20, 12, 16, 0.45));
  color: var(--lz-ink); font: 19px/1.1 var(--px); letter-spacing: 0.02em;
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .toast[data-kind="warn"] { border-image-source: var(--lz-pill-gold); border-image-slice: 4 fill; border-image-width: 8px; color: var(--lz-ink); }

/* the veil while connecting: a notice nailed to the board */
html.lz-ui[data-skin="limezu"] .veil { background: rgba(36, 26, 30, 0.72); }
html.lz-ui[data-skin="limezu"] .veil-card {
  padding: 20px 24px 22px;
  border: 8px solid transparent;
  border-image: var(--lz-board) 8 fill / 16px;
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .veil-title { font: 24px/1.1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .veil-sub { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .veil-sub .mono { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .veil-spinner { background: var(--lz-wood-hi); box-shadow: 0 0 0 2px var(--lz-navy); }

/* ---- the side panel: rails of plank around a parchment board */
html.lz-ui[data-skin="limezu"] .panel { background: var(--lz-plank); border-left: 0; }
html.lz-ui[data-skin="limezu"] .panel > * { width: calc(var(--panel-w) - 12px); margin-inline: 6px; }
html.lz-ui[data-skin="limezu"] body.panel-collapsed .panel { width: 0; }

/* tabs: words on the rail; the open one is the pack's parchment pill, a hovered one its mauve pill */
html.lz-ui[data-skin="limezu"] .tabs { height: 44px; padding: 6px 0 4px; gap: 0; border-bottom: 0; align-items: stretch; }
html.lz-ui[data-skin="limezu"] .tab {
  flex: 1 1 auto; min-width: 0; gap: 3px;
  padding: 0 2px 2px;
  border: 2px solid transparent; border-radius: 0;
  border-image: none;
  color: var(--lz-cream-2);
  font: 15px/1 var(--px); font-weight: 400; letter-spacing: 0;
  transition: none;
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .tab::after { display: none; }
html.lz-ui[data-skin="limezu"] .tab:hover { color: var(--lz-cream); border-image: var(--lz-tab) 4 fill / 8px; }
html.lz-ui[data-skin="limezu"] .tab[aria-selected="true"] { color: var(--lz-ink); border-image: var(--lz-tab-on) 4 fill / 8px; }
html.lz-ui[data-skin="limezu"] .tab-count {
  min-width: 16px; height: 16px; padding: 0 3px 1px;
  border-radius: 0; background: var(--lz-wood-hi); color: var(--lz-ink);
  box-shadow: 0 0 0 2px var(--lz-navy);
  font: 14px/1 var(--px); margin: 0 2px 0 1px;
}
html.lz-ui[data-skin="limezu"] .tab-dot { width: 6px; height: 6px; border-radius: 0; box-shadow: 0 0 0 2px var(--lz-navy); background: var(--lz-wood-hi); }
html.lz-ui[data-skin="limezu"] .tab .tab-dot { margin: 9px -1px 0 -2px; }
html.lz-ui[data-skin="limezu"] .tab-dot.wish-dot { background: #b9a6f0; }

/* the board: one per tab, nailed into its frame; the page scrolls inside the frame */
html.lz-ui[data-skin="limezu"] .tabpane {
  border: 14px solid transparent;
  border-image: var(--lz-board) 8 fill / 16px;
  background: var(--lz-page) padding-box;
  padding: 10px 10px 22px 12px;
  color: var(--lz-ink);
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .tabpane ::-webkit-scrollbar-thumb { border-color: var(--lz-page); }
html.lz-ui[data-skin="limezu"] .tabpane .item-ico { image-rendering: pixelated; }
html.lz-ui[data-skin="limezu"] .tabpane.chronicle { padding: 6px 16px 34px 16px; }
html.lz-ui[data-skin="limezu"] .tabpane.society,
html.lz-ui[data-skin="limezu"] .tabpane.wishes { padding-top: 10px; }

/* the footer on the rail: the credit and the art switch */
html.lz-ui[data-skin="limezu"] .panel-foot { border-top: 0; padding: 6px 6px 8px; color: var(--lz-cream-2); font-size: 11.5px; }
html.lz-ui[data-skin="limezu"] .panel-foot a { color: var(--lz-cream); text-decoration-color: var(--lz-wood-hi); }
html.lz-ui[data-skin="limezu"] .panel-foot a:hover { color: #fff6df; }
html.lz-ui[data-skin="limezu"] .skin-switch { gap: 0; padding: 2px; border: 2px solid var(--lz-navy); border-radius: 0; background: var(--lz-plank-lo); box-shadow: inset 0 2px #2a1f24; }
html.lz-ui[data-skin="limezu"] .skin-switch button {
  height: 24px; padding: 0 8px 1px;
  border: 2px solid transparent; border-radius: 0;
  background: none; color: var(--lz-cream-2);
  font: 16px/1 var(--px); letter-spacing: 0.02em;
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .skin-switch button:hover { color: var(--lz-cream); background: none; border-image: var(--lz-tab) 4 fill / 8px; }
html.lz-ui[data-skin="limezu"] .skin-switch button[aria-checked="true"] { color: var(--lz-ink); background: none; border-image: var(--lz-tab-on) 4 fill / 8px; }
html.lz-ui[data-skin="limezu"] .skin-switch button[data-skin="ascii"] { font-family: var(--px); }

/* ---- on the board: type, rules, cards */
html.lz-ui[data-skin="limezu"] .block { margin-top: 20px; }
html.lz-ui[data-skin="limezu"] .block > h3,
html.lz-ui[data-skin="limezu"] .block-head h3,
html.lz-ui[data-skin="limezu"] .hsec > h3 {
  margin-bottom: 8px;
  font: 19px/1 var(--px); font-weight: 400; letter-spacing: 0.02em;
  color: var(--lz-ink);
}
html.lz-ui[data-skin="limezu"] .block > h3::after { height: 2px; background: var(--lz-edge); }
html.lz-ui[data-skin="limezu"] .empty-title { font: 24px/1.1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .empty-sub,
html.lz-ui[data-skin="limezu"] .hsub,
html.lz-ui[data-skin="limezu"] .table-note,
html.lz-ui[data-skin="limezu"] .cre-foot { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .cre-foot.is-error { color: #8f271e; }

/* a raised card: lighter parchment, the pack's shadow line for an edge, pixel corners */
html.lz-ui[data-skin="limezu"] .wish,
html.lz-ui[data-skin="limezu"] .ev[data-kind="discover"],
html.lz-ui[data-skin="limezu"] .ev[data-kind="learn"],
html.lz-ui[data-skin="limezu"] .ev[data-kind="grant"],
html.lz-ui[data-skin="limezu"] .ev[data-kind="chronicle"],
html.lz-ui[data-skin="limezu"] .wish-note {
  border: 2px solid var(--lz-mauve-3); border-radius: 0;
  background: var(--lz-page-hi);
  box-shadow: inset 0 -2px var(--lz-edge);
  clip-path: var(--lz-notch);
}
/* a sunken slot: the pack's well (the senses, intents, inventory, inputs) */
html.lz-ui[data-skin="limezu"] .senses,
html.lz-ui[data-skin="limezu"] .intent,
html.lz-ui[data-skin="limezu"] .chip:not(.loner),
html.lz-ui[data-skin="limezu"] .wf input:not(.wf-say) {
  border: 2px solid transparent; border-radius: 0;
  border-image: var(--lz-well) 3 fill / 6px;
  background: none;
  image-rendering: pixelated;
}

/* creatures' names: the viewer colors them per creature (inline, light, for a dark panel). On parchment the words
   stay ink and the creature's color moves into a little square before the name, as on the map's labels. */
html.lz-ui[data-skin="limezu"] .ev .who[style],
html.lz-ui[data-skin="limezu"] .people b[style],
html.lz-ui[data-skin="limezu"] .roster .r-name[style],
html.lz-ui[data-skin="limezu"] .discoveries .by[style],
html.lz-ui[data-skin="limezu"] .hubs .h-name[style],
html.lz-ui[data-skin="limezu"] .wwho[style],
html.lz-ui[data-skin="limezu"] .wq footer span[style],
html.lz-ui[data-skin="limezu"] .hud-bl .hv-v[style] { -webkit-text-fill-color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .ev .who[style]::before,
html.lz-ui[data-skin="limezu"] .people b[style]::before,
html.lz-ui[data-skin="limezu"] .roster .r-name[style]::before,
html.lz-ui[data-skin="limezu"] .discoveries .by[style]::before,
html.lz-ui[data-skin="limezu"] .hubs .h-name[style]::before,
html.lz-ui[data-skin="limezu"] .wwho[style]::before,
html.lz-ui[data-skin="limezu"] .wq footer span[style]::before,
html.lz-ui[data-skin="limezu"] .hud-bl .hv-v[style]::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 0 2px; vertical-align: 0.1em;
  background: currentColor; box-shadow: 0 0 0 2px var(--lz-navy);
}
html.lz-ui[data-skin="limezu"] .trait span[style] { -webkit-text-fill-color: var(--lz-ink-2); }

/* roster */
html.lz-ui[data-skin="limezu"] .roster { margin-top: 16px; border-top: 2px solid var(--lz-edge); }
html.lz-ui[data-skin="limezu"] .roster li { border-bottom: 0; background: var(--lz-dash); }
html.lz-ui[data-skin="limezu"] .roster button { border-radius: 0; padding: 8px 6px 10px; grid-template-columns: 32px 1fr auto; }
html.lz-ui[data-skin="limezu"] .roster button:hover { background: var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .roster .r-name { font: 20px/1 var(--px); font-weight: 400; }
html.lz-ui[data-skin="limezu"] .roster .r-act { margin-top: 2px; font-size: 12px; color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .roster .r-model { font: 16px/1 var(--px); color: var(--lz-ink-2); }

/* the creature card */
html.lz-ui[data-skin="limezu"] .cre-back { font: 18px/1 var(--px); color: var(--lz-ink-2); border-radius: 0; padding: 4px 10px 5px 6px; }
html.lz-ui[data-skin="limezu"] .cre-back:hover,
html.lz-ui[data-skin="limezu"] .cre-back:focus-visible { color: var(--lz-ink); background: var(--lz-page-lo); border-color: transparent; }
html.lz-ui[data-skin="limezu"] .cre-head { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; }
html.lz-ui[data-skin="limezu"] .cre-portrait {
  width: 72px; height: 72px;
  border: 14px solid transparent; border-radius: 0;
  border-image: var(--lz-panel) 8 fill / 16px;
  background: none !important; box-shadow: none;
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .cre-name { font: 32px/0.95 var(--px); font-weight: 400; letter-spacing: 0.01em; margin-bottom: 6px; color: var(--lz-ink); }
/* the model's tag: the viewer colors it per model (inline); here its words stay cream on mauve and the model's
   color moves into a swatch (currentColor is still the model's) */
html.lz-ui[data-skin="limezu"] .badge {
  height: 22px; padding: 0 7px 1px 6px; gap: 6px;
  border: 2px solid var(--lz-navy) !important; border-radius: 0;
  background: var(--lz-mauve) !important;
  -webkit-text-fill-color: var(--lz-cream);
  font: 16px/1 var(--px);
}
html.lz-ui[data-skin="limezu"] .badge::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 0 2px var(--lz-navy); }
html.lz-ui[data-skin="limezu"] .cre-state { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .cre-state .dot { border-radius: 0; }
html.lz-ui[data-skin="limezu"] .cre-state.is-thinking { color: #1d4f7e; }
html.lz-ui[data-skin="limezu"] .cre-state.is-asleep { color: #4c4378; }
html.lz-ui[data-skin="limezu"] .cre-state.is-down { color: #8f271e; }
html.lz-ui[data-skin="limezu"] .trait {
  font: 17px/22px var(--px); padding: 0 7px 1px;
  border: 2px solid var(--lz-mauve-3); border-radius: 0;
  color: var(--lz-ink); background: var(--lz-page-hi);
}
html.lz-ui[data-skin="limezu"] .trait.drive { border-color: var(--lz-mauve-3); background: var(--lz-page-lo); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .trait.drive span { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .trait.layer { border-color: #56628a; color: var(--lz-sky-ink); background: #d9d4e0; font-family: var(--px); font-size: 16px; }
html.lz-ui[data-skin="limezu"] .trait.temper { border-style: dashed; border-color: var(--lz-mauve-3); color: var(--lz-ink); background: none; }
html.lz-ui[data-skin="limezu"] .trait.temper[data-temper="role"] { border-style: solid; border-color: #9a6a12; background: #e6cf98; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .persona-text { color: var(--lz-ink-2); }

/* needs: the pack's bars, in its bar colors (flat stripes, so the fill can stretch without smearing) */
html.lz-ui[data-skin="limezu"] .needs { gap: 10px; margin-top: 18px; }
html.lz-ui[data-skin="limezu"] .need { grid-template-columns: 64px 1fr 32px; }
html.lz-ui[data-skin="limezu"] .need-label { font: 18px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .need-val { font: 19px/1 var(--px); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .bar,
html.lz-ui[data-skin="limezu"] .hubs .h-bar {
  height: 14px; margin: 2px; border: 0; border-radius: 0; overflow: hidden;
  background: var(--lz-mauve);
  box-shadow: 0 0 0 2px var(--lz-navy), inset 0 2px #57414a;
}
html.lz-ui[data-skin="limezu"] .hubs .h-bar { height: 8px; }
html.lz-ui[data-skin="limezu"] .bar-fill { height: 100%; margin: 0; width: 100%; border: 0; border-radius: 0; }
html.lz-ui[data-skin="limezu"] .need[data-need="satiety"] .bar-fill { background: linear-gradient(#ffe57b 0 2px, #f8d239 2px 6px, #f2b22b 6px 10px, #d69522 10px); }
html.lz-ui[data-skin="limezu"] .need[data-need="energy"] .bar-fill { background: linear-gradient(#b4e6ff 0 2px, #50a7e8 2px 8px, #3a83c4 8px); }
html.lz-ui[data-skin="limezu"] .need[data-need="health"] .bar-fill { background: linear-gradient(#fc8a76 0 2px, #e63f38 2px 8px, #cb2a2a 8px); }
html.lz-ui[data-skin="limezu"] .hubs .h-bar i { border-radius: 0; opacity: 1; }
html.lz-ui[data-skin="limezu"] .need.is-low .bar { box-shadow: 0 0 0 2px #8f271e, inset 0 2px #57414a; }
html.lz-ui[data-skin="limezu"] .need.is-low .need-val { color: #8f271e; }

html.lz-ui[data-skin="limezu"] .plan { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .plan li.done { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .plan li.now { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .plan .now-tag { font: 15px/1 var(--px); color: var(--lz-cream); background: var(--lz-mauve); border-radius: 0; padding: 1px 5px 2px; }
html.lz-ui[data-skin="limezu"] .goal { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .thought { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .thought:not(.is-empty)::before,
html.lz-ui[data-skin="limezu"] .thought:not(.is-empty)::after { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .intent { padding: 6px 10px; color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .intent .verb { color: var(--lz-cream); background: var(--lz-mauve); border-radius: 0; padding: 0 6px 1px; font: 16px/18px var(--px); font-weight: 400; }
html.lz-ui[data-skin="limezu"] .intent .arrow { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .intent .tgt { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .intent .say { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .result { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .result::before { border-radius: 0; background: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .result.ok::before { background: #3f7a2a; }
html.lz-ui[data-skin="limezu"] .result.fail::before { background: #b8322a; }
html.lz-ui[data-skin="limezu"] .is-empty { color: var(--lz-ink-2) !important; }
html.lz-ui[data-skin="limezu"] .senses { padding: 10px 12px; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .chips { gap: 6px; }
html.lz-ui[data-skin="limezu"] .chip { height: 30px; padding: 0 8px 1px; color: var(--lz-ink); font: 17px/1 var(--px); }
html.lz-ui[data-skin="limezu"] .chip:has(.item-ico) { height: 34px; padding-left: 5px; }
html.lz-ui[data-skin="limezu"] .chip .n { font: 17px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .people li { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .people b { font: 18px/1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .summary { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .memory li { border-bottom: 0; background: var(--lz-dash); color: var(--lz-ink-2); padding-bottom: 8px; }
html.lz-ui[data-skin="limezu"] .memory li:last-child { background: none; }
html.lz-ui[data-skin="limezu"] .memory li::before { height: 2px; width: 4px; background: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .kv dt { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .kv dd { font: 18px/1.2 var(--px); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .recipe-row b { font: 18px/1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .recipe-row .r-in { color: var(--lz-ink-2); }

/* ---- events */
html.lz-ui[data-skin="limezu"] .panel {
  /* the kinds' colors, darkened so their icons hold 3.7:1 on the board (3.1:1 on a hovered row) */
  --k-say: #5a4247; --k-craft: #8f4529; --k-discover: #805100; --k-gather: #356623; --k-fail: #a72d26;
  --k-place: #7a5233; --k-write: #6545a0; --k-program: #1c5f8b; --k-collapse: #a13247; --k-join: #266647;
  --k-sleep: #574d86; --k-eat: #91441d; --k-plant: #316623; --k-chronicle: #765517; --k-tame: #9c355f;
  --k-invent: #7e5200; --k-voice: #2e5c95; --k-learn: #18655b; --k-weather: #455c7d; --k-store: #6b5746;
  --k-take: #634f63; --k-tend: #904507; --k-wish: #6040a8; --k-grant: #3957a6;
}
html.lz-ui[data-skin="limezu"] .filters { gap: 6px; padding-bottom: 12px; border-bottom: 0; background: linear-gradient(var(--lz-edge), var(--lz-edge)) left bottom / 100% 2px no-repeat; }
html.lz-ui[data-skin="limezu"] .fchip,
html.lz-ui[data-skin="limezu"] .chip.loner {
  height: 30px; padding: 0 8px 1px 6px;
  border: 2px solid transparent; border-radius: 0;
  border-image: var(--lz-slot) 5 fill / 10px;
  background: none;
  color: var(--lz-ink);
  font: 17px/1 var(--px);
  image-rendering: pixelated;
  transition: none;
}
html.lz-ui[data-skin="limezu"] .fchip .n { font: 16px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .fchip:hover,
html.lz-ui[data-skin="limezu"] .chip.loner:hover { border-color: transparent; color: var(--lz-ink); filter: brightness(1.05); }
html.lz-ui[data-skin="limezu"] .fchip[aria-pressed="false"] { border-image: var(--lz-well) 3 fill / 6px; border-style: solid; background: none; color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .fchip[aria-pressed="false"] .ico { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .fchip.all { color: var(--lz-ink); }

html.lz-ui[data-skin="limezu"] .ev {
  padding: 8px 6px 10px; border-bottom: 0; border-radius: 0;
  background: var(--lz-dash);
  color: var(--lz-ink-2);
}
html.lz-ui[data-skin="limezu"] .ev.has-target:hover { background: var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .ev .who { font: 18px/1 var(--px); font-weight: 400; color: var(--lz-ink); margin-right: 4px; }
html.lz-ui[data-skin="limezu"] .ev .t { font: 16px/19px var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .ev.is-new { animation: lz-ev-in 0.9s var(--ease-out); }
@keyframes lz-ev-in { from { background-color: rgba(218, 164, 99, 0.45); } to { background-color: transparent; } }
html.lz-ui[data-skin="limezu"] .ev[data-kind="say"] .line,
html.lz-ui[data-skin="limezu"] .ev[data-kind="say"] .q { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="fail"] { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .ev .tag,
html.lz-ui[data-skin="limezu"] .wstat,
html.lz-ui[data-skin="limezu"] .wr-k {
  border-radius: 0; font: 15px/18px var(--px); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
}
html.lz-ui[data-skin="limezu"] .ev .tag { padding: 0 5px; vertical-align: 1px; background: var(--lz-mauve); color: var(--lz-cream); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="discover"] { margin: 4px 0; color: var(--lz-ink); border-color: #9a6a12; background: #e8d39f; animation: none; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="discover"] .who { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="discover"] .tag { background: #7a4f08; color: #fff0c8; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="learn"] { margin: 3px 0; color: var(--lz-ink); border-color: #4f8a7c; background: #c9d2ae; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="grant"] { margin: 4px 0; color: var(--lz-sky-ink); border-color: var(--lz-sky-edge); background: #dcd8e6; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="grant"] .ico,
html.lz-ui[data-skin="limezu"] .ev[data-kind="voice"] .ico,
html.lz-ui[data-skin="limezu"] .ev[data-kind="invent"] .ico { filter: none; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="chronicle"] { margin: 4px 0; color: var(--lz-ink); border-color: var(--lz-wood-lo); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="chronicle"] .tag { background: #7a4430; color: #fbe9d0; }
html.lz-ui[data-skin="limezu"] .ev .chron-ex { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="tend"] { color: var(--lz-ink); background: var(--lz-dash), linear-gradient(90deg, rgba(218, 140, 60, 0.28), transparent 70%); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="weather"] { color: var(--lz-ink-2); background: var(--lz-dash), rgba(110, 130, 170, 0.14); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="wish"] { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="wish"] .q { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="tame"] { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="tame"] .who { color: #872b53; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="plant"] { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="plant"] .who { color: #26581b; }
/* the voice from the sky: the sky's own button face */
html.lz-ui[data-skin="limezu"] .ev[data-kind="voice"] {
  margin: 6px 0; padding: 10px 8px;
  border: 2px solid transparent; border-radius: 0;
  border-image: var(--lz-sky-button) 5 fill / 10px;
  background: none;
  color: var(--lz-sky-ink);
}
html.lz-ui[data-skin="limezu"] .ev[data-kind="voice"] .tag { background: var(--lz-sky-ink); color: #f4f0fa; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="voice"] .q { color: var(--lz-sky-ink); }
/* inventions: the gold pill, the most celebrated event */
html.lz-ui[data-skin="limezu"] .ev[data-kind="invent"] {
  margin: 6px 0; padding: 10px 8px;
  border: 2px solid transparent; border-radius: 0;
  border-image: var(--lz-pill-gold) 4 fill / 8px;
  background: none; box-shadow: none;
  color: var(--lz-ink);
}
html.lz-ui[data-skin="limezu"] .ev[data-kind="invent"] .who { color: var(--lz-ink) !important; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="invent"] .tag { background: var(--lz-navy); color: #ffe7a6; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="invent"] .inv-desc { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .ev[data-kind="invent"].is-new { animation: none; }
html.lz-ui[data-skin="limezu"] .ev[data-kind="discover"].is-new { animation: none; }

/* ---- swarm */
html.lz-ui[data-skin="limezu"] .rate { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .rate b { font: 20px/1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .table-wrap {
  border: 2px solid var(--lz-mauve-3); border-radius: 0;
  background:
    linear-gradient(90deg, var(--lz-page) 30%, rgba(208, 190, 156, 0)) left / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--lz-page) 30%, rgba(208, 190, 156, 0)) right / 40px 100% no-repeat local,
    linear-gradient(90deg, rgba(74, 55, 61, 0.35), transparent) left / 10px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(74, 55, 61, 0.35), transparent) right / 10px 100% no-repeat scroll,
    var(--lz-page);
}
html.lz-ui[data-skin="limezu"] .mtable th,
html.lz-ui[data-skin="limezu"] .mtable td { border-bottom: 2px solid var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .mtable thead th { font: 16px/1 var(--px); font-weight: 400; color: var(--lz-ink-2); background: var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .mtable td { font: 18px/1.1 var(--px); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .mtable .m { background: var(--lz-page); font: 18px/1.1 var(--px); border-right: 2px solid var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .mtable thead .m { background: var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .mtable .m i { border-radius: 0; box-shadow: 0 0 0 2px var(--lz-navy); }
html.lz-ui[data-skin="limezu"] .mtable tbody tr:hover td { background: var(--lz-page-hi); }
html.lz-ui[data-skin="limezu"] .mtable td.zero { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .discoveries li { border-bottom: 0; background: var(--lz-dash); color: var(--lz-ink-2); padding-bottom: 10px; }
html.lz-ui[data-skin="limezu"] .discoveries li:last-child { background: none; }
html.lz-ui[data-skin="limezu"] .discoveries .ico { color: var(--k-discover); }
html.lz-ui[data-skin="limezu"] .discoveries .item { font: 18px/1 var(--px); font-weight: 400; color: var(--lz-gold-ink); }
html.lz-ui[data-skin="limezu"] .discoveries li.invented .item { color: var(--lz-gold-ink); }
html.lz-ui[data-skin="limezu"] .discoveries .by { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .discoveries .t { font: 16px/19px var(--px); color: var(--lz-ink-2); }

/* ---- chronicle: a book on the board */
html.lz-ui[data-skin="limezu"] .chapter { border-bottom: 0; background: var(--lz-dash); padding-bottom: 8px; }
html.lz-ui[data-skin="limezu"] .chapter:last-child { background: none; }
html.lz-ui[data-skin="limezu"] .chapter h3 { font: 24px/1 var(--px); font-weight: 400; letter-spacing: 0.01em; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .chapter h3 .ph { color: #73402d; }
html.lz-ui[data-skin="limezu"] .chapter .t { font: 16px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .chapter p { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .chron-jump { height: 34px; }

/* ---- society: the graph on a blackboard in the wooden frame */
html.lz-ui[data-skin="limezu"] .soc-graph {
  border: 14px solid transparent; border-radius: 0;
  border-image: var(--lz-panel) 8 / 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(241, 229, 201, 0.08) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--lz-slate) padding-box;
  image-rendering: pixelated;
}
html.lz-ui[data-skin="limezu"] .soc-tip,
html.lz-ui[data-skin="limezu"] .htip {
  border: 2px solid var(--lz-navy); border-radius: 0;
  background: var(--lz-plank); color: var(--lz-cream-2);
  box-shadow: inset 0 2px #5d464c, 0 6px 14px rgba(20, 12, 16, 0.45);
}
html.lz-ui[data-skin="limezu"] .soc-tip b,
html.lz-ui[data-skin="limezu"] .htip-r b { color: var(--lz-cream); }
html.lz-ui[data-skin="limezu"] .soc-tip span,
html.lz-ui[data-skin="limezu"] .htip-h,
html.lz-ui[data-skin="limezu"] .htip-r { color: var(--lz-cream-2); }
html.lz-ui[data-skin="limezu"] .soc-legend,
html.lz-ui[data-skin="limezu"] .hlegend { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .soc-legend i,
html.lz-ui[data-skin="limezu"] .hlegend i { border-radius: 0; }
html.lz-ui[data-skin="limezu"] .soc-legend .soc-count { font: 16px/1 var(--px); }
html.lz-ui[data-skin="limezu"] .hubs button,
html.lz-ui[data-skin="limezu"] .places button { border-radius: 0; }
html.lz-ui[data-skin="limezu"] .hubs button:hover,
html.lz-ui[data-skin="limezu"] .places button:hover { background: var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .hubs .h-name { font: 18px/1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .hubs .h-w { font: 17px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .places .p-name { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .places .p-kind { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .places .p-at { font: 16px/1 var(--px); color: var(--lz-ink-2); }

/* ---- wishes */
html.lz-ui[data-skin="limezu"] .wish-note { color: var(--lz-sky-ink); background: #dcd8e6; border-color: var(--lz-sky-edge); }
html.lz-ui[data-skin="limezu"] .wish-note .ico { color: var(--lz-sky-ink-2); }
html.lz-ui[data-skin="limezu"] .wish { padding: 10px 12px 12px 10px; }
html.lz-ui[data-skin="limezu"] .wish[data-status="noted"] { border-color: #9a6a12; }
html.lz-ui[data-skin="limezu"] .wish[data-status="granted"],
html.lz-ui[data-skin="limezu"] .wish[data-status="answered"] { border-color: #6c6e85; }
html.lz-ui[data-skin="limezu"] .wish[data-status="closed"] { opacity: 1; border-style: dashed; background: var(--lz-page); }
html.lz-ui[data-skin="limezu"] .wish-head { grid-template-columns: 16px minmax(0, 1fr) auto; }
html.lz-ui[data-skin="limezu"] .wrank { font: 17px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wthing { font: 24px/1 var(--px); font-weight: 400; letter-spacing: 0.01em; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .wcount { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wcount b { font: 19px/1 var(--px); font-weight: 400; color: #503490; }
html.lz-ui[data-skin="limezu"] .wmeta,
html.lz-ui[data-skin="limezu"] .wmore,
html.lz-ui[data-skin="limezu"] .wq footer { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wsrc b { font: 16px/1 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .wstat { padding: 0 5px; background: var(--lz-mauve); color: var(--lz-cream); }
html.lz-ui[data-skin="limezu"] .wstat[data-status="answered"],
html.lz-ui[data-skin="limezu"] .wstat[data-status="granted"] { background: var(--lz-sky-ink); color: #f4f0fa; }
html.lz-ui[data-skin="limezu"] .wstat[data-status="noted"] { background: #7a4f08; color: #fff0c8; }
html.lz-ui[data-skin="limezu"] .wstat[data-status="closed"] { background: transparent; box-shadow: inset 0 0 0 2px var(--lz-mauve-3); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wexists { height: 20px; border: 2px dashed var(--lz-mauve-3); border-radius: 0; color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wwho { font: 18px/1.4 var(--px); font-weight: 400; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .wwho .n { font: 15px/1 var(--px); color: var(--lz-ink-2); }
/* a quote is a slip set into the card: sunken, without a side rule */
html.lz-ui[data-skin="limezu"] .wq { border-left: 0; padding: 6px 10px 7px; background: var(--lz-page); box-shadow: inset 0 2px var(--lz-edge); }
html.lz-ui[data-skin="limezu"] .wq p { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .wq.is-fail p { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wr-k { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wr.is-answer .wr-k { color: var(--lz-sky-ink); }
html.lz-ui[data-skin="limezu"] .wr.is-answer .wr-v { color: var(--lz-sky-ink); }
html.lz-ui[data-skin="limezu"] .wr.is-grant .wr-k { color: #34479a; }
html.lz-ui[data-skin="limezu"] .wr.is-grant .wr-v { color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .wf { gap: 6px; margin-top: 10px; }
html.lz-ui[data-skin="limezu"] .wf input { height: 30px; padding: 0 9px; color: var(--lz-ink); font-size: 13px; }
html.lz-ui[data-skin="limezu"] .wf input::placeholder { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .wf .wf-say { height: 30px; margin: 0; }
html.lz-ui[data-skin="limezu"] .wbtn { height: 30px; padding: 0 10px 2px; font-size: 17px; }
html.lz-ui[data-skin="limezu"] .wbtn.note { margin-left: auto; color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .wbtn.note[aria-pressed="true"] { border-image-source: var(--lz-pill-gold); border-image-slice: 4 fill; border-image-width: 8px; color: var(--lz-ink); }

/* ---- history: the charts draw their own light ink, so each sits on a blackboard */
html.lz-ui[data-skin="limezu"] .hsec { margin-top: 20px; }
html.lz-ui[data-skin="limezu"] .hchart { margin: 2px; background: var(--lz-slate); box-shadow: 0 0 0 2px var(--lz-navy), inset 0 2px #3a2c34; }
html.lz-ui[data-skin="limezu"] .hmini { margin-top: 10px; }
html.lz-ui[data-skin="limezu"] .hmini-t { margin: 0 0 4px 2px; font: 16px/1 var(--px); color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .htable { color: var(--lz-ink-2); }
html.lz-ui[data-skin="limezu"] .htable summary { font: 18px/1 var(--px); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .htable-wrap { border: 2px solid var(--lz-mauve-3); border-radius: 0; }
html.lz-ui[data-skin="limezu"] .htable th,
html.lz-ui[data-skin="limezu"] .htable td { border-bottom: 2px solid var(--lz-page-lo); }
html.lz-ui[data-skin="limezu"] .htable table { font: 16px/1.2 var(--px); color: var(--lz-ink); }
html.lz-ui[data-skin="limezu"] .htable th { color: var(--lz-ink-2); }

/* ---- narrow screens: the same pieces, packed tighter */
@media (max-width: 1280px) {
  /* the layer switch's one option, in its slot, with the count on a wooden tag at its corner */
  html.lz-ui[data-skin="limezu"] .layer-switch button { padding: 0 10px 2px; font-size: 0; color: var(--lz-cream); border-image: var(--lz-tab) 4 fill / 8px; }
  html.lz-ui[data-skin="limezu"] .layer-switch button:hover { filter: brightness(1.12); }
  html.lz-ui[data-skin="limezu"] .layer-switch button::before { font: 18px/1 var(--px); letter-spacing: 0.02em; }
  html.lz-ui[data-skin="limezu"] .layer-badge { top: -9px; right: -10px; font-size: 13px; background: var(--lz-wood-hi); }
}
@media (max-width: 900px) {
  html.lz-ui[data-skin="limezu"] .panel > * { width: calc(min(var(--panel-w), 100vw) - 12px); }
  html.lz-ui[data-skin="limezu"] .panel { box-shadow: -12px 0 28px rgba(20, 12, 16, 0.5); }
}
@media (max-width: 640px) {
  html.lz-ui[data-skin="limezu"] .topbar { gap: 8px; padding-left: 8px; padding-right: 6px; }
  html.lz-ui[data-skin="limezu"] .topbar-end { gap: 5px; }
  html.lz-ui[data-skin="limezu"] .sound-ctl { gap: 2px; }
  html.lz-ui[data-skin="limezu"] .voice-btn { padding: 0 8px 2px; }
  html.lz-ui[data-skin="limezu"] .conn { padding: 0 7px; }
  /* the popovers hang from the header's right edge, so they stay on screen however the buttons pack */
  html.lz-ui[data-skin="limezu"] .sound-ctl,
  html.lz-ui[data-skin="limezu"] .voice { position: static; }
  html.lz-ui[data-skin="limezu"] .audio-pop,
  html.lz-ui[data-skin="limezu"] .voice-pop { right: 6px; top: calc(100% - 4px); }
}
@media (max-width: 440px) {
  /* the brand keeps its campfire so every button still fits */
  html.lz-ui[data-skin="limezu"] .brand { width: 24px; overflow: hidden; }
}

.wish-fold { list-style: none; margin-top: 10px; }
.wish-fold > details > summary { cursor: pointer; color: var(--muted, #9a9aa8); font-size: 0.9em; padding: 6px 0; }
.wish-fold > details > ol { margin: 8px 0 0; padding: 0; }