@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0b1220;
  font-family: Manrope, sans-serif;
}

#village-root {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

.demo-caption {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 10;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.55);
  color: rgba(255, 255, 255, 0.82);
  font: 600 11px/1.4 "DM Mono", monospace;
  letter-spacing: 0.2px;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

/* Toolbar (bottom right): network view + sound, off by default, side by
   side, matching the real dashboard's village-toolbar buttons in miniature.
   Sits at bottom:50px rather than flush with the corner (like the caption)
   because the kanzie.com card overlays its own "Open full screen" pill in
   that exact corner (bottom:12px, ~31px tall) on top of this iframe — this
   clears it with room to spare instead of sitting underneath it, unclickable. */
.demo-tool {
  position: fixed;
  bottom: 50px;
  z-index: 10;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.55);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.demo-tool svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-tool[aria-pressed="true"] { color: #fff; border-color: rgba(166, 255, 77, 0.6); }
.demo-tool:focus-visible { outline: 2px solid #a6ff4d; outline-offset: 2px; }
.demo-tool .snd-on, .demo-tool[aria-pressed="true"] .snd-off { display: none; }
.demo-tool[aria-pressed="true"] .snd-on { display: inline; }
/* 1.201.4 the sound button's "waiting for a tap" (dimmed, a small dot) and "unavailable" (disabled) */
.demo-tool .snd-wait { display: none; fill: #a6ff4d; stroke: none; }
.demo-tool.is-waiting { opacity: 0.7; border-color: rgba(255, 255, 255, 0.25); }
.demo-tool.is-waiting .snd-on, .demo-tool.is-waiting .snd-off { display: none; }
.demo-tool.is-waiting .snd-wait { display: inline; }
.demo-tool:disabled { opacity: 0.4; cursor: not-allowed; }

.demo-sound { right: 12px; }
.demo-signs { right: 52px; }
.demo-network { right: 92px; }
.demo-detail { right: 132px; }
.demo-stalker { right: 172px; }
.demo-souls { right: 212px; }
.demo-debug { right: 252px; }
.demo-fullscreen { right: 292px; }
.demo-tool:not([aria-pressed="true"]) .det-on { display: none; }

/* Narrow phones: keep the toolbar off the screen edge and the caption
   (bottom-left) short enough that it can't run underneath it at 390px. */
@media (max-width: 420px) {
  .demo-caption { right: 256px; max-width: calc(100vw - 280px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo-sound { right: 8px; }
  .demo-signs { right: 48px; }
  .demo-network { right: 88px; }
  .demo-detail { right: 128px; }
  .demo-stalker { right: 168px; }
  .demo-souls { right: 208px; }
  .demo-debug { right: 248px; }
  .demo-fullscreen { right: 288px; }
}

/* Time-of-day slider ("sliding the sun"), top-left — a compact cousin of the
   real dashboard's #villageClock (static/index.html / static/styles.css'
   .village-clock*). Deliberately in the opposite corner from the toolbar,
   the caption and kanzie.com's "Open full screen" pill, so it can't collide
   with any of them at any width. Local wall-clock minutes only: this demo
   has no real "Utting time" to follow, just a fixed pinned default. */
/* 2.0.0: the clock and version pills reach this far down over the canvas: a tapped animal's bubble is framed below them */
:root { --village-ui-top: 52px; }
.demo-clock {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(11, 18, 32, 0.55);
  color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
  font-family: Manrope, sans-serif;
}
.demo-clock.forced { border-color: #e9c46a; box-shadow: 0 0 0 3px rgba(255, 214, 103, 0.2); }
.demo-clock-icon { flex: none; font-size: 14px; line-height: 1; }
.demo-clock-range {
  flex: none;
  width: 130px;
  height: 20px;
  margin: 0;
  background: transparent;
  accent-color: #a6ff4d;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.demo-clock-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #27335a 0%, #3b4a7a 18%, #f3b37a 27%, #bfe0ef 38%, #bfe0ef 70%, #f3a86b 80%, #3b4a7a 88%, #27335a 100%);
}
.demo-clock-range::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #27335a 0%, #3b4a7a 18%, #f3b37a 27%, #bfe0ef 38%, #bfe0ef 70%, #f3a86b 80%, #3b4a7a 88%, #27335a 100%);
}
.demo-clock-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a6ff4d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.demo-clock-range::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #a6ff4d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.demo-clock.forced .demo-clock-range::-webkit-slider-thumb { background: #e9c46a; }
.demo-clock.forced .demo-clock-range::-moz-range-thumb { background: #e9c46a; }
.demo-clock-range:focus-visible { outline: 2px solid #a6ff4d; outline-offset: 2px; border-radius: 999px; }
.demo-clock-label { flex: none; min-width: 36px; font: 700 10.5px "DM Mono", monospace; white-space: nowrap; }
.demo-clock.forced .demo-clock-label { color: #ffd166; }
.demo-clock-reset {
  flex: none;
  border: none;
  background: transparent;
  color: #a6ff4d;
  font: 700 10px "DM Mono", monospace;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 2px;
}
.demo-clock-reset:hover, .demo-clock-reset:focus-visible { color: #fff; outline: none; }

@media (max-width: 420px) {
  .demo-clock { left: 8px; top: 8px; padding: 5px 8px; gap: 6px; }
  .demo-clock-range { width: 88px; }
  .demo-clock-label { min-width: 32px; font-size: 10px; }
}

/* --- copied verbatim from static/styles.css (village-labels / village-bubble*) --- */
.village-labels{position:absolute;inset:0;pointer-events:none}.village-bubble{pointer-events:auto;width:min(290px,70vw);padding:12px 14px 10px;border-radius:16px;background:#fffdf7;border:1px solid #eadfcb;box-shadow:0 10px 28px #3b2a1a26,0 2px 6px #3b2a1a14;color:var(--ink);font:500 12px/1.45 Manrope,sans-serif;opacity:0;transform:translateY(6px) scale(.97);transition:opacity .25s ease,transform .25s ease}.village-bubble.open{opacity:1;transform:none}.village-bubble::after{content:"";position:absolute;left:var(--vb-tail,50%);bottom:-8px;width:14px;height:14px;background:#fffdf7;border-right:1px solid #eadfcb;border-bottom:1px solid #eadfcb;transform:translateX(-50%) rotate(45deg)}.village-bubble{position:relative}.village-bubble-head{display:flex;align-items:baseline;gap:8px;padding-right:28px}.village-bubble-close{position:absolute;top:8px;right:8px;width:22px;height:22px;padding:0;margin:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;flex:none}.village-bubble-close svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.village-bubble-close:hover{border-color:var(--sea)}.village-bubble-close:focus-visible{outline:2px solid var(--sea);outline-offset:2px}.village-bubble-name{font:700 17px/1.1 Fraunces,serif;color:#b8562c}.village-bubble-role{font:700 9px "DM Mono",monospace;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}.village-bubble-line{margin:7px 0 6px;font:500 13px/1.45 Fraunces,serif;font-style:italic;color:#3b2f28}.village-bubble-facts{margin:0;padding-top:6px;border-top:1px dashed #eadfcb;font:600 10.5px/1.5 "DM Mono",monospace;color:var(--muted)}.village-bubble[data-mood="busy"] .village-bubble-facts{color:#2c6e4f}.village-bubble[data-mood="failed"] .village-bubble-facts{color:#a8281c}.village-bubble-body{cursor:pointer;border-radius:8px}.village-bubble-body:focus-visible{outline:2px solid var(--sea);outline-offset:2px}.village-bubble-details{margin-top:8px;padding-top:7px;border-top:1px dashed #eadfcb;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:3px;font:600 10px/1.4 "DM Mono",monospace;color:var(--muted)}.village-bubble-stat-label{color:#9c8c73;text-transform:uppercase;letter-spacing:.4px;font-size:8.5px}.village-bubble-stat-value{color:var(--ink)}.village-bubble-actions{display:flex;gap:6px;margin-top:9px}.village-bubble-actions button{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font:700 10px "DM Mono",monospace;color:var(--ink);cursor:pointer}.village-bubble-actions button:hover,.village-bubble-actions button:focus-visible{border-color:var(--sea);outline:none}.village-bubble-follow[aria-pressed="true"]{background:#e6f3f1;border-color:var(--sea);color:var(--sea)}@media(prefers-reduced-motion:reduce){.village-bubble{transition:none}}@media(min-width:1100px){.village-bubble{width:min(clamp(290px,7vw + 220px,400px),70vw);font-size:clamp(12px,.3vw + 9px,15px)}.village-bubble-name{font-size:clamp(17px,.4vw + 13px,22px)}.village-bubble-role{font-size:clamp(9px,.15vw + 7.5px,11.5px)}.village-bubble-line{font-size:clamp(14px,.45vw + 9px,19px)}.village-bubble-facts{font-size:clamp(10.5px,.3vw + 7.5px,14px)}.village-bubble-details{font-size:clamp(10px,.25vw + 7.5px,13px)}.village-bubble-stat-label{font-size:clamp(8.5px,.15vw + 7px,11px)}}

:root {
  --ink: #202b35;
  --muted: #6c7780;
  --line: #dce0d7;
  --sea: #277f79;
}

/* 1.84: a short notice (the automatic step down to Simple), like the dashboard's toast. */
.demo-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.86);
  color: #fff;
  font: 600 12.5px/1.4 Manrope, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .25s ease;
}
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .demo-toast { transition: none; } }

/* 1.89: the version tag (top right) and the public version history. */
.demo-version {
  position: fixed; top: 10px; right: 12px; z-index: 10; padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(11, 18, 32, 0.55); color: rgba(255, 255, 255, 0.85);
  font: 600 11px/1.2 "DM Mono", monospace; cursor: pointer; backdrop-filter: blur(2px);
}
.demo-version:hover, .demo-version:focus-visible { color: #fff; border-color: rgba(240, 162, 90, 0.6); outline: none; }
.demo-version[hidden], .demo-history[hidden], .demo-fullscreen[hidden] { display: none; }
.demo-history { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(11, 18, 32, 0.55); }
.demo-history-card {
  position: relative; width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 16px 18px 14px; border-radius: 18px;
  background: #fffdf7; border: 1px solid #eadfcb; color: #2b2522; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); overscroll-behavior: contain;
}
.demo-history h2 { margin: 0 34px 2px 0; font: 700 20px/1.15 Fraunces, Georgia, serif; color: #b8562c; }
.demo-history-sub { margin: 0 0 10px; font: 600 11px/1.3 "DM Mono", monospace; color: #9c8c73; }
.demo-history-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #eadfcb; border-radius: 50%; background: #fff; color: #2b2522; cursor: pointer; }
.demo-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demo-history-list > li { padding-top: 10px; border-top: 1px dashed #eadfcb; }
.demo-history-list > li:first-child { border-top: 0; padding-top: 0; }
.demo-history-list b { font: 700 13px/1.2 "DM Mono", monospace; color: #b8562c; margin-right: 8px; }
.demo-history-title-line { font: 700 13px/1.3 Manrope, sans-serif; }
.demo-history-list ul { margin: 4px 0 0; padding-left: 18px; font: 500 12.5px/1.45 Manrope, sans-serif; color: #4a3f36; }

/* 1.109 iPhone: viewport-fit=cover lets the canvas run edge to edge, so the controls keep out of the
   notch, the rounded corners and the home indicator (Safari's own bars still show unless the page
   is added to the Home Screen; iPhone has no element Fullscreen API). */
.demo-caption { margin-left: env(safe-area-inset-left); margin-bottom: env(safe-area-inset-bottom); }
.demo-tool { margin-right: env(safe-area-inset-right); margin-bottom: env(safe-area-inset-bottom); }
.demo-clock { margin-left: env(safe-area-inset-left); margin-top: env(safe-area-inset-top); }
.demo-version { margin-right: env(safe-area-inset-right); margin-top: env(safe-area-inset-top); }

/* 1.124.3: in full screen the version pill takes the top-left corner and the clock slider moves just below it. */
html.demo-fs .demo-version { right: auto; left: 12px; top: 10px; margin-right: 0; margin-left: env(safe-area-inset-left); }
html.demo-fs .demo-clock { top: 46px; }
@media (max-width: 560px) { html.demo-fs .demo-version { left: 8px; } html.demo-fs .demo-clock { top: 42px; } }