/* ui.js's overlay, over the stream's <video>. The chat's rules began as
   world.js/app.js's own (sky-theme.css's .world-chat block, retired with
   app.js's copy of the chat on 2026-10-13; mv-ui.css keeps the paper
   treatment of the open log and input), with their palette variables written
   out. This is the world chat's only stylesheet now, framed or not. Closed, everything is scenery: the
   look-drag on the video passes straight through. */
#ui { position: fixed; inset: 0; pointer-events: none; font-family: system-ui, sans-serif; z-index: 2; }
#hud, #msg { z-index: 3; }

.world-chat {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 16px));
  bottom: 24px;
  width: min(520px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  pointer-events: none;
}
/* Touch: the left half is the joystick, so the log sits up out of the thumb's
   way, and there is no input (app.js's call, 2026-08-07). */
.ui-touch .world-chat { bottom: 45vh; width: calc(50vw - 24px); }
.ui-touch .wc-open, .ui-touch .wc-hint, .ui-touch .wc-form { display: none; }

.wc-log {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 34vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 2px;
}
.wc-log::-webkit-scrollbar { width: 0; height: 0; }
.world-chat.open .wc-log:empty { display: none; }
.world-chat.open .wc-log {
  pointer-events: auto;
  max-height: 42vh;
  background: linear-gradient(100deg, #3b382eea, #292e27f5);
  border: 1px solid #a995695c;
  border-radius: 3px 7px 3px 3px;
  box-shadow: inset 3px 0 #bca67730, 0 5px 18px #15231835;
  padding: 12px 16px;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: #958666 transparent;
}
.world-chat.open .wc-log::-webkit-scrollbar { width: 5px; }
.world-chat.open .wc-log::-webkit-scrollbar-thumb { background: #958666; border-radius: 3px; }

.wc-line {
  font: 14px/1.55 Georgia, serif;
  color: #eee3cd;
  text-shadow: 0 1px 2px rgba(6, 10, 20, 0.95), 0 0 8px rgba(6, 10, 20, 0.5);
  overflow-wrap: anywhere;
  transition: opacity 1.2s ease;
}
.wc-line.faded { opacity: 0; }
.world-chat.open .wc-line { opacity: 1; transition: none; text-shadow: none; }
.wc-who { font: 600 11px/1.5 system-ui, sans-serif; color: #c2cdad; margin-right: 6px; }
.wc-line.dm-out .wc-who { color: #c7b79a; }
.wc-line.system { color: rgba(238, 227, 205, 0.7); font-style: italic; }
/* Keep the first paragraph beside the name; blocks stay small in the log. */
.wc-body { display: inline; }
.wc-body p { margin: 0.3em 0; }
.wc-body > p:first-child { display: inline; }
.wc-body > :last-child { margin-bottom: 0; }
.wc-body ul, .wc-body ol { margin: 0.3em 0; padding-left: 1.5em; }
.wc-body li > p { margin: 0; }
.wc-body code { font: 0.86em ui-monospace, monospace; background: #11111b66; border-radius: 3px; padding: 1px 3px; }
.wc-body pre { margin: 0.4em 0; padding: 6px 8px; max-height: 8em; overflow: auto; background: #11111b99; border-radius: 3px; }
.wc-body pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; }
.wc-body blockquote { margin: 0.3em 0; padding-left: 8px; border-left: 2px solid #a99569; }
.wc-body a { color: #b4d5ed; text-decoration: underline; text-underline-offset: 2px; }
.world-chat.open .wc-body { -webkit-user-select: text; user-select: text; }
/* A message on its way (ui.js deliver): pending until moltonhim has it, or
   failed with a retry. The retry is clickable even with the chat closed. */
.wc-line.pending .wc-body { opacity: 0.6; }
.wc-status, .wc-note { font: italic 12px/1.5 system-ui, sans-serif; margin-left: 8px; color: rgba(238, 227, 205, 0.72); }
/* After a line's words (ui.js tag): that Molto's was sent as a fallback, on a
   line of its own under them; his reaction to the visitor's, beside them. */
.wc-note { display: block; margin-left: 0; }
.wc-reaction { margin-left: 6px; }
.wc-line.failed .wc-status { color: #f0a58c; }
.wc-retry {
  pointer-events: auto;
  margin-left: 8px;
  padding: 0 8px;
  font: 600 11px/1.6 system-ui, sans-serif;
  color: #2b261d;
  background: #e9d9b4;
  border: 1px solid #a99569;
  border-radius: 3px;
  cursor: pointer;
}
.wc-retry:hover { background: #fff3d6; }

.world-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #b9c2d4;
  text-shadow: 0 1px 2px rgba(6, 10, 20, 0.95), 0 0 8px rgba(6, 10, 20, 0.5);
  padding: 0 2px;
}
.world-line[hidden] { display: none; }
/* app.js draws a mini constellation or ripple on a canvas here; a breathing
   dot says the same "this is live" without porting those classes. */
.wl-dot { width: 6px; height: 6px; border-radius: 50%; background: #c0d7bb; animation: wl-breathe 1.6s ease-in-out infinite; }
@keyframes wl-breathe { 50% { opacity: 0.25; } }

.wc-bar { display: flex; align-items: center; gap: 8px; }
.wc-open {
  pointer-events: auto;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: #dde3ef;
  text-shadow: 0 1px 2px rgba(6, 10, 20, 0.95), 0 0 8px rgba(6, 10, 20, 0.5);
  font: 12px system-ui, sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.wc-open:hover { color: #fff; }
.world-chat.open .wc-open { display: none; }
.wc-form {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
  background: #eee1c4;
  border: 1px solid #a99569;
  border-radius: 2px 3px 5px 3px;
  box-shadow: 0 2px #71604470;
  padding: 8px 10px;
}
.wc-form[hidden] { display: none; }
.wc-form:focus-within { border-color: #715a2d; }
.wc-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #443a2b;
  font: 15px/1.5 Georgia, serif;
  padding: 0;
}
.wc-input::placeholder { color: #897959; }
.wc-hint {
  display: none;
  padding: 0 2px 2px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #dde3ef;
  text-shadow: 0 1px 2px rgba(6, 10, 20, 0.95), 0 0 8px rgba(6, 10, 20, 0.5);
}
.world-chat.open .wc-hint { display: block; }

/* What the renderer says is under the cursor: a small paper tag beside it. */
.ui-hover {
  position: fixed;
  transform: translate(14px, -50%);
  padding: 3px 8px;
  background: #eee1c4f0;
  border: 1px solid #a99569;
  border-radius: 2px 3px 4px 3px;
  color: #443a2b;
  font: 13px/1.4 Georgia, serif;
  max-width: 300px;
}
.ui-hover-title { font-weight: 600; }
.ui-hover-date { font: 11px/1.5 system-ui, sans-serif; color: #7a6a4c; }
.ui-hover-body { margin-top: 3px; font-size: 12px; }
.ui-hover[hidden] { display: none; }

/* Other players' names over their ghostlights (world.js _ghostNameSprite:
   500 weight, rgba(222,232,255,.92) over a dark stroke and glow, never
   hidden by the scene). ui.js sets each one's place and size. */
.ui-labels > div {
  position: fixed;
  transform: translate(-50%, -50%);
  font-weight: 500;
  white-space: nowrap;
  color: rgba(222, 232, 255, 0.92);
  -webkit-text-stroke: 0.18em rgba(4, 8, 20, 0.75);
  paint-order: stroke fill;
  text-shadow: 0 0 0.3em rgba(4, 8, 20, 0.9);
}
.ui-labels > div[hidden] { display: none; }

/* The connection health chip (top right) and its details, in the page's
   glass (client.html's #fallback): green, amber, red from palette.js's
   success / warning / danger. Unobtrusive while green. */
.ui-health {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 10px));
  right: max(10px, env(safe-area-inset-right, 10px));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(var(--sky-border), 0.16);
  background: rgba(var(--sky-glass), 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--sky-text-primary);
  font: 12px/1.4 system-ui, sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.ui-health[hidden] { display: none; }
.ui-health[data-level='good'], .ui-health[data-level='connecting'] { opacity: 0.5; }
.ui-health:hover, .ui-health[aria-expanded='true'] { opacity: 1; }
.uh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-text-muted, #a6adc8); }
.ui-health[data-level='connecting'] .uh-dot { animation: wl-breathe 1.6s ease-in-out infinite; }
.ui-health[data-level='good'] .uh-dot { background: var(--success, #a6e3a1); }
.ui-health[data-level='fair'] .uh-dot { background: var(--warning, #f9e2af); box-shadow: 0 0 6px var(--warning, #f9e2af); }
.ui-health[data-level='poor'] .uh-dot { background: var(--danger, #f38ba8); box-shadow: 0 0 6px var(--danger, #f38ba8); }
.ui-health-panel {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top, 10px)) + 32px);
  right: max(10px, env(safe-area-inset-right, 10px));
  width: min(330px, calc(100vw - 20px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px 14px 9px;
  border-radius: 12px;
  border: 1px solid rgba(var(--sky-border), 0.16);
  background: rgba(var(--sky-glass), 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--sky-text-primary);
  font: 13px/1.45 system-ui, sans-serif;
  pointer-events: auto;
}
.ui-health-panel[hidden] { display: none; }
.uh-title { font: 600 11px/1.5 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.uh-headline { margin-top: 3px; font-weight: 600; }
.uh-headline::first-letter { text-transform: uppercase; }
.uh-headline.uh-fair { color: var(--warning, #f9e2af); }
.uh-headline.uh-poor { color: var(--danger, #f38ba8); }
.uh-hint { margin-top: 3px; color: var(--sky-text-secondary, #bac2de); }
.uh-rows { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin-top: 8px; font-size: 12px; }
.uh-k { color: var(--sky-text-muted, #a6adc8); white-space: nowrap; }
.uh-v { font-variant-numeric: tabular-nums; }
.uh-session { margin-top: 8px; font-size: 11px; color: var(--sky-text-muted, #a6adc8); }

/* ── The player UI (player-ui.js) on the native world ────────────────────
   world.js's explore chrome, from sky-theme.css as it stood at the cutover
   (the hint line, the bearing, the hotbar's paint, the joystick and its
   run/sneak buttons, and where the touch layout puts each piece; this is now
   the only copy). player-ui.js sets body.explore-active and body.world-touch
   the way world.js did; the pack and every work surface are mv-ui.css
   (/static/mv-ui.css). */
.explore-hint {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  padding: 6px 14px;
  color: #dde3ef;
  text-shadow: 0 1px 2px rgba(6, 10, 20, 0.95), 0 0 8px rgba(6, 10, 20, 0.5);
  font: 0.75rem system-ui, sans-serif;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s ease;
}
.explore-hint.faded { opacity: 0; }
.explore-bearing {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  left: max(26px, env(safe-area-inset-left));
  z-index: 12;
  display: grid;
  gap: 7px;
  color: #f1f0df;
  text-shadow: 0 1px 3px #17201b, 0 0 16px #17201b70;
  pointer-events: none;
}
.explore-place { font: 20px Georgia, serif; letter-spacing: .025em; }
.explore-direction { font: 10px ui-sans-serif, system-ui, sans-serif; letter-spacing: .18em; }
.world-pack-open .explore-bearing { opacity: .3; }
.world-pack-open .mv-hotbar { visibility: hidden; }
.world-pack-open .explore-hint, .world-pack-open .mv-control-hint { visibility: hidden; opacity: 0 !important; }
.world-pack-open .mv-world-toast { visibility: hidden; }
.mv-control-hint { max-width: min(500px, calc(100vw - 36px)); line-height: 1.5; }
.world-touch .mv-plot-prompt, .world-touch .mv-world-toast { bottom: 360px !important; }
.mv-hotbar [data-hotbar] { padding: 7px !important; }
.mv-hotbar [data-vslot] {
  background: linear-gradient(160deg, #27332bd9, #15201be8) !important;
  border-color: #dce5d029 !important;
  box-shadow: inset 0 1px #ffffff0d, 0 4px 14px #07110930 !important;
  transition: border-color .15s, background .15s, transform .15s;
}
.mv-hotbar [data-vslot][aria-pressed="true"] {
  background: linear-gradient(155deg, #66765ad9, #364938ef) !important;
  border-color: #e4d7a1 !important;
  box-shadow: 0 0 0 2px #e4d7a122, 0 5px 20px #07110940 !important;
  transform: translateY(-3px);
}
.mv-hotbar [data-vslot]:hover { border-color: #e4d7a199 !important; }
.mv-touch-held-name {
  width: 188px;
  min-height: 1.4em;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}
.mv-hud-action {
  appearance: none;
  border: 0;
  background: none;
  color: #edf0df;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  cursor: pointer;
  text-shadow: 0 1px 3px #101c15;
}
.mv-hud-action kbd {
  font: inherit;
  border: 1px solid #e6ead63d;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
}
.mv-crosshair { background: #f5f3d9 !important; box-shadow: 0 0 0 1px #17221980, 0 0 7px #0005; }
.mv-hotbar button:focus-visible { outline: 2px solid #e4d7a1; outline-offset: 3px; }
@media (max-width: 720px) {
  .explore-bearing { top: 22px; left: 18px; }
  .explore-place { font-size: 17px; }
  .explore-direction { font-size: 9px; }
  .world-touch .mv-hotbar [data-hotbar] { padding: 5px 3px !important; }
  .world-touch .mv-control-hint { top: 106px !important; left: 18px; right: 18px !important; text-align: center !important; }
}
@media (prefers-reduced-motion: reduce) { .mv-hotbar [data-vslot] { transition: none; } }
@media (max-width: 560px) {
  /* Spanning the width rather than centred from left:50%, whose shrink-to-fit
     width stops at half the screen and wrapped the line down onto the
     control hint's (Brenton's phone, 2026-10-13). */
  .explore-hint { top: 58px; left: 16px; right: 16px; transform: none; white-space: normal; text-align: center; }
}
.explore-joystick {
  position: fixed;
  left: 24px;
  bottom: 28px;
  z-index: 40;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(var(--sky-glass), 0.4);
  border: 1px solid rgba(var(--sky-border), 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  touch-action: none;
}
.explore-joystick-nub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(var(--sky-glass), 0.9);
  border: 1px solid rgba(var(--sky-border), 0.25);
  transition: transform 0.08s linear;
}
.explore-movement {
  position: fixed;
  z-index: 40;
  left: 146px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.explore-movement button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--sky-border), 0.2);
  color: var(--sky-text-secondary, #a6adc8);
  background: rgba(var(--sky-glass), 0.5);
  font: 0.7rem ui-sans-serif, system-ui, sans-serif;
  touch-action: manipulation;
  transition: color .12s, background-color .12s, border-color .12s;
}
.explore-movement button[aria-pressed="true"] { border-color: rgba(239, 217, 156, 0.8); color: #f4e4b6; background: rgba(74, 65, 42, 0.8); }
/* client.js's status line sits above the hotbar's label row. */
body.explore-active #msg { bottom: 104px; }
/* On touch, above the three rows of slots and clear of run and sneak. */
body.world-touch #msg { bottom: 360px; max-width: calc(100vw - 32px); }
/* The world chat clears the hotbar as world.js's does (sky-theme.css
   .world-chat: bottom 104px; on touch above three rows of slots). */
body.explore-active .world-chat { bottom: 104px; }
body.world-touch .world-chat { left: 12px; bottom: 360px; width: calc(100vw - 96px); }
@media (orientation: landscape) and (max-height: 500px) {
  .world-touch .mv-touch-actions {
    bottom: 16px !important;
    width: 124px;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px !important;
  }
  .world-touch .mv-hotbar { left: 50% !important; bottom: 16px !important; width: max-content !important; transform: translateX(-50%); }
  .mv-touch-held-name { width: auto; max-width: 188px; margin-inline: auto; }
  .world-touch .mv-plot-prompt, .world-touch .mv-world-toast, body.world-touch .world-chat {
    bottom: 196px !important;
    left: 50%;
    width: calc(100vw - 300px);
    max-width: 460px;
  }
  body.world-touch .world-chat { transform: translateX(-50%); }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 740px) {
  .world-touch .mv-hotbar [data-hotbar] { grid-template-columns: repeat(9, 44px) !important; }
  .world-touch .mv-plot-prompt, .world-touch .mv-world-toast, body.world-touch .world-chat { bottom: 105px !important; }
}

/* Behind moltonhim.net's chat (embed.js, ?embed=): that page draws the
   step-out pill, and with its chat stepped back over the world ("out") only
   the moving picture shows. The world chat is this page's in both modes. */
body.embed-out > :not(video):not(#view):not(audio) { visibility: hidden !important; }
/* The page's step-out pill has the top-right corner (as world.js's did):
   the health chip sits left of it, and its panel and the fallback card below it. */
body.embed .ui-health { right: calc(max(10px, env(safe-area-inset-right, 10px)) + 120px); }
body.embed .ui-health-panel { top: calc(max(10px, env(safe-area-inset-top, 10px)) + 48px); }
body.embed #fallback { top: calc(max(18px, env(safe-area-inset-top, 18px)) + 46px); }