/* The Underground — webclient theme (fancy-terminal chrome + site palette) */

:root {
  --ug-bg: #141218;
  --ug-bg-deep: #0c0a10;
  --ug-surface: #1e1a24;
  --ug-surface-2: #2a2430;
  --ug-border: #3d3548;
  --ug-text: #e8e2f0;
  --ug-muted: #9b92a8;
  --ug-accent: #c9a227;
  --ug-accent-dim: #8a6f1a;
  --ug-glow: #e8b84a;
  --ug-status-h: 2.15rem;
  --ug-rule-h: 1px;
  --ug-chrome-h: calc(var(--ug-status-h) + var(--ug-rule-h));
  --ug-map-w: 17.5rem;
  --ug-font: "DejaVu Sans Mono", Consolas, "Liberation Mono", "Lucida Console", monospace;
}

/* --- Base --- */

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, #2a2035 0%, transparent 55%),
    radial-gradient(ellipse at bottom, #1a1520 0%, var(--ug-bg) 60%),
    var(--ug-bg);
  color: var(--ug-text);
  font-family: var(--ug-font);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow: hidden;
}

/* Subtle CRT vignette (non-interactive) */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
  opacity: 0.55;
}

/* Soft scanline texture */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
  opacity: 0.7;
}

/* --- Layout: chrome above GoldenLayout --- */

#clientwrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

#ug-chrome {
  flex: 0 0 auto;
  z-index: 20;
  background: linear-gradient(180deg, #1a1520 0%, #121018 100%);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(232, 184, 74, 0.15), 0 4px 18px rgba(0, 0, 0, 0.35);
  user-select: none;
}

/* Main game + map side panel */
#ug-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}

#ug-body > #main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100% !important;
}

/* Hide the leftover outer input shell; GL hosts input inside #main-sub */
#clientwrapper > #input {
  display: none !important;
}

#ug-statusbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: var(--ug-status-h);
  padding: 0 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ug-muted);
  white-space: nowrap;
  overflow: hidden;
}

#ug-statusbar .ug-status-brand {
  color: var(--ug-glow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(232, 184, 74, 0.25);
}

#ug-statusbar .ug-status-sep {
  color: var(--ug-border);
  opacity: 0.9;
}

#ug-statusbar .ug-status-room {
  color: var(--ug-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

#ug-statusbar .ug-status-name {
  color: var(--ug-accent);
  overflow: hidden;
  text-overflow: ellipsis;
}

#ug-statusbar .ug-status-spacer {
  flex: 1 1 auto;
  min-width: 0.5rem;
}

#ug-statusbar .ug-status-clock {
  color: var(--ug-glow);
  font-variant-numeric: tabular-nums;
}

#ug-statusbar .ug-status-daypart {
  color: var(--ug-muted);
  font-size: 0.78rem;
  text-transform: lowercase;
}

#ug-statusbar .ug-status-conn {
  color: var(--ug-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#ug-statusbar.ug-connected .ug-status-conn {
  color: #6aad7a;
}

#ug-statusbar.ug-disconnected .ug-status-conn {
  color: #d48484;
}

.ug-chrome-rule {
  height: var(--ug-rule-h);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ug-accent-dim) 12%,
    var(--ug-glow) 50%,
    var(--ug-accent-dim) 88%,
    transparent 100%
  );
  opacity: 0.85;
}

/* Main pane fills remaining height under chrome */
#clientwrapper #main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}

#clientwrapper #main #main-sub {
  height: 100%;
  min-height: 0;
}

/* --- Message / output panes --- */

/* Monospace for maps; wrap prose. Map lines use NBSP so columns do not
   soft-wrap mid-row; normal spaces in room text wrap freely. */
#messagewindow .content,
#messagewindow .out,
.content .out,
.lm_content .out,
.content {
  font-family: var(--ug-font);
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

#messagewindow .out div,
.content .out,
.content .out div {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

.out {
  color: var(--ug-text);
  background: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.inp {
  color: #6a6278;
}

.sys {
  color: #7ecb8f;
}

.err {
  color: #e07070;
}

.prompt {
  color: var(--ug-glow);
  font-family: var(--ug-font);
  letter-spacing: 0.02em;
}

.content {
  border: 1px solid var(--ug-border) !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35) !important;
  background:
    linear-gradient(180deg, rgba(30, 26, 36, 0.92) 0%, rgba(12, 10, 16, 0.98) 100%) !important;
  color: var(--ug-text);
  padding: 0.85rem 1rem !important;
}

/* Scrollbars */
.content::-webkit-scrollbar,
.dialogcontent::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.content::-webkit-scrollbar-track,
.dialogcontent::-webkit-scrollbar-track {
  background: var(--ug-bg-deep);
}

.content::-webkit-scrollbar-thumb,
.dialogcontent::-webkit-scrollbar-thumb {
  background: var(--ug-surface-2);
  border-radius: 4px;
  border: 1px solid var(--ug-border);
}

.content::-webkit-scrollbar-thumb:hover,
.dialogcontent::-webkit-scrollbar-thumb:hover {
  background: var(--ug-border);
}

/* --- Input pane (bottom chrome) --- */

#input,
.lm_item.input,
.inputwrap {
  background: linear-gradient(0deg, #100e14 0%, #1a1520 100%);
}

.inputfieldwrapper {
  border-top: 1px solid transparent;
  background:
    linear-gradient(90deg, transparent, var(--ug-accent-dim), transparent) top / 100% 1px no-repeat,
    linear-gradient(0deg, #100e14 0%, #1a1520 100%);
}

#inputfield,
#inputsizer,
.inputfield,
textarea.inputfield {
  background: transparent !important;
  color: var(--ug-text) !important;
  border: none !important;
  font-family: var(--ug-font) !important;
  font-size: 1.05rem !important;
  caret-color: var(--ug-glow);
  box-shadow: none !important;
}

#inputfield:focus,
.inputfield:focus {
  background: rgba(232, 184, 74, 0.04) !important;
  color: var(--ug-text) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.25) !important;
}

#inputsend,
.inputsend,
button.inputsend {
  background: linear-gradient(180deg, var(--ug-glow) 0%, var(--ug-accent) 100%) !important;
  color: #1a1208 !important;
  border: 1px solid var(--ug-accent-dim) !important;
  border-radius: 0 !important;
  font-weight: 700;
  font-family: var(--ug-font);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

#inputsend:hover,
.inputsend:hover,
button.inputsend:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 18px rgba(232, 184, 74, 0.4);
  color: #120c04 !important;
}

/* Prompt strip above input */
.prompt,
div.prompt {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--ug-border);
  color: var(--ug-glow) !important;
  padding: 0.15rem 0.55rem;
  max-height: 3rem;
  overflow: hidden;
}

/* Mask password input (login menu sets this class via password_echo.js) */
textarea.password-mode,
.inputfield.password-mode,
#inputfield.password-mode {
  -webkit-text-security: disc;
  text-security: disc;
}

/* --- Toolbar --- */

#toolbar {
  top: calc(var(--ug-chrome-h) + 0.35rem) !important;
  right: 0.65rem !important;
}

#toolbar button,
#optionsbutton,
#splitbutton,
#panebutton,
#undobutton {
  color: var(--ug-muted) !important;
  transition: color 0.15s ease;
}

#toolbar button:hover,
#optionsbutton:hover,
#splitbutton:hover,
#panebutton:hover,
#undobutton:hover {
  color: var(--ug-glow) !important;
}

/* --- GoldenLayout chrome ---
 *
 * Tab *colors* only on stock .lm_tab. Glyph alignment is handled by
 * tab_chrome.js, which replaces ▶ ◆ + ⚙ with .ug-tab-ico CSS shapes.
 */

.lm_goldenlayout {
  background: transparent !important;
}

.lm_header {
  background: var(--ug-surface) !important;
  border-bottom: 1px solid var(--ug-border) !important;
}

.lm_header .lm_tab {
  background: var(--ug-surface-2) !important;
  color: var(--ug-muted) !important;
  border: 1px solid var(--ug-border) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
}

.lm_header .lm_tab.lm_active {
  background: var(--ug-surface) !important;
  color: var(--ug-glow) !important;
  border-color: var(--ug-accent-dim) !important;
  box-shadow: 0 -1px 0 var(--ug-glow) !important;
}

.lm_header .lm_tab:hover {
  color: var(--ug-text) !important;
  background: var(--ug-surface) !important;
}

/* tab_chrome.js marks normalized tabs */
.lm_header .lm_tab.ug-tab {
  display: flex !important;
  align-items: center !important;
  float: left;
  height: 20px !important;
  margin-top: 0 !important;
  padding: 0 16px 0 4px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.lm_header .lm_tab.ug-tab.lm_active {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Control hit-targets (icons) */
.lm_header .lm_tab .ug-tab-ctl {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 1px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  overflow: visible !important;
}

/* Text label ("Main", "input") */
.lm_header .lm_tab .ug-tab-label {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto;
  height: 16px !important;
  margin: 0 3px !important;
  padding: 0 2px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 8rem;
}

/* --- CSS-drawn icons (no Unicode metrics) --- */

.ug-tab-ico {
  display: block;
  position: relative;
  flex: 0 0 auto;
  color: inherit;
  pointer-events: none;
}

/* ▶ play / dropdown */
.ug-tab-ico-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent currentColor;
}

/* ◆ diamond */
.ug-tab-ico-diamond {
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
  border-radius: 1px;
}

/* + split */
.ug-tab-ico-plus {
  width: 10px;
  height: 10px;
}

.ug-tab-ico-plus::before,
.ug-tab-ico-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
}

.ug-tab-ico-plus::before {
  left: 4px;
  top: 1px;
  width: 2px;
  height: 8px;
}

.ug-tab-ico-plus::after {
  left: 1px;
  top: 4px;
  width: 8px;
  height: 2px;
}

/* ⚙ gear — simple cog via CSS */
.ug-tab-ico-gear {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

.ug-tab-ico-gear::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: currentColor;
  border-radius: 50%;
  box-shadow:
    0 -5px 0 -0.5px currentColor,
    0 5px 0 -0.5px currentColor,
    5px 0 0 -0.5px currentColor,
    -5px 0 0 -0.5px currentColor,
    3.5px -3.5px 0 -0.5px currentColor,
    -3.5px 3.5px 0 -0.5px currentColor,
    3.5px 3.5px 0 -0.5px currentColor,
    -3.5px -3.5px 0 -0.5px currentColor;
}

.lm_header .lm_tab .lm_close_tab {
  top: 3px !important;
  right: 2px !important;
}

.lm_header .lm_tab .lm_close_tab:before {
  color: var(--ug-muted);
  font-size: 11px;
  line-height: 1;
}

.lm_header .lm_tab .lm_close_tab:hover:before {
  color: var(--ug-glow);
}

.lm_splitter {
  background: var(--ug-border) !important;
  opacity: 0.6;
}

.lm_splitter:hover {
  background: var(--ug-accent-dim) !important;
  opacity: 1;
}

.lm_content {
  background: transparent !important;
  border: none !important;
}

.gutter {
  background-color: var(--ug-border) !important;
}

/* --- Dialogs (options / help) --- */

.dialog {
  background: var(--ug-surface) !important;
  border: 1px solid var(--ug-border) !important;
  color: var(--ug-text) !important;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55) !important;
  border-radius: 0.35rem;
}

.dialogtitle {
  background: linear-gradient(180deg, #1a1520 0%, #121018 100%) !important;
  border-bottom: 1px solid var(--ug-border) !important;
  color: var(--ug-glow) !important;
  font-family: var(--ug-font);
  letter-spacing: 0.04em;
}

.dialogclose {
  color: var(--ug-muted) !important;
}

.dialogclose:hover,
.dialogclose:focus {
  color: var(--ug-glow) !important;
}

.dialogcontent {
  background: var(--ug-bg) !important;
  color: var(--ug-text) !important;
}

#helpdialog .dialogcontent {
  background: var(--ug-bg) !important;
  color: var(--ug-text) !important;
}

.dialog input[type="text"],
.dialog input[type="number"],
.dialog select,
.dialog textarea,
.layoutName {
  background: #1a1520 !important;
  border: 1px solid var(--ug-border) !important;
  color: var(--ug-text) !important;
  font-family: var(--ug-font);
}

.dialog input[type="button"],
.dialog button,
.savelayout,
input.savelayout {
  background: linear-gradient(180deg, var(--ug-glow) 0%, var(--ug-accent) 100%) !important;
  border: 1px solid var(--ug-accent-dim) !important;
  color: #1a1208 !important;
  font-weight: 600;
  font-family: var(--ug-font);
  cursor: pointer;
  opacity: 1 !important;
}

/* Evennia disables this on layout name "default"; we re-enable for close */
input.savelayout:disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.dialog label {
  color: var(--ug-muted);
}

/* --- Typing indicator --- */

#istyping {
  background-color: rgba(30, 26, 36, 0.92) !important;
  border: 1px solid var(--ug-border);
  color: var(--ug-muted) !important;
  font-family: var(--ug-font);
  font-size: 0.8rem;
}

/* --- Connecting / noscript --- */

#connecting {
  background: var(--ug-bg);
  color: var(--ug-muted);
  font-family: var(--ug-font);
  letter-spacing: 0.04em;
}

#connecting .ug-connecting-inner {
  max-width: 28rem;
  margin: 3rem auto;
  padding: 1.5rem;
  border: 1px solid var(--ug-border);
  border-radius: 0.5rem;
  background: var(--ug-surface);
  text-align: center;
  box-shadow: 0 0 32px rgba(201, 162, 39, 0.12);
}

#connecting .ug-connecting-title {
  color: var(--ug-glow);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

#noscript {
  background: var(--ug-bg);
  color: #e07070;
  padding: 2rem;
  font-family: var(--ug-font);
}

/* --- Links / MXP --- */

a:link,
a:visited {
  color: var(--ug-glow);
}

a:hover,
a:active {
  color: var(--ug-accent);
  font-weight: inherit;
}

#mxplink {
  color: var(--ug-glow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Full-width room art in the main look pane --- */

.ug-room-look-art {
  display: block;
  margin: 0.35rem 0 0.9rem;
  max-width: min(52rem, 100%);
  border: 1px solid var(--ug-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0c0a10;
  box-shadow:
    0 0.75rem 2rem rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 184, 74, 0.08);
}

.ug-room-look-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(42vh, 24rem);
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
  border: 0;
  cursor: zoom-in;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.ug-room-look-art img:hover {
  filter: brightness(1.06);
}

.ug-room-look-caption {
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: linear-gradient(180deg, #1a1520 0%, #121018 100%);
  border-top: 1px solid var(--ug-border);
  color: var(--ug-glow);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Bare multimedia <img> fallback (if anything uses msg(image=...)) */
.content > img,
.lm_content img:not(.ug-map-art-img) {
  display: block;
  max-width: min(52rem, 100%);
  max-height: min(42vh, 24rem);
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0.35rem 0 0.9rem;
  border: 1px solid var(--ug-border);
  border-radius: 0.5rem;
}

/* --- Live map panel --- */

.ug-hidden {
  display: none !important;
}

.ug-mappanel {
  position: relative;
  flex: 0 0 var(--ug-map-w);
  width: var(--ug-map-w);
  max-width: 42vw;
  min-width: 0;
  height: 100%;
  background: linear-gradient(180deg, #1a1520 0%, #100e14 100%);
  border-left: 1px solid var(--ug-border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  z-index: 12;
  transition: flex-basis 0.2s ease, width 0.2s ease, max-width 0.2s ease;
  overflow: hidden;
}

.ug-mappanel.ug-map-collapsed {
  flex-basis: 1.4rem;
  width: 1.4rem;
  max-width: 1.4rem;
}

.ug-mappanel.ug-map-collapsed .ug-map-inner {
  opacity: 0;
  pointer-events: none;
}

.ug-map-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 1.35rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--ug-border);
  border-radius: 0.35rem;
  background: var(--ug-surface-2);
  color: var(--ug-glow);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.ug-map-toggle:hover {
  border-color: var(--ug-accent-dim);
  color: var(--ug-text);
}

.ug-map-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0.65rem 0.7rem 0.55rem 0.85rem;
  gap: 0.5rem;
  transition: opacity 0.15s ease;
  overflow: hidden;
}

.ug-map-art {
  position: relative;
  flex: 0 0 auto;
  height: 7.5rem;
  border: 1px solid var(--ug-border);
  border-radius: 0.45rem;
  overflow: hidden;
  background: var(--ug-surface-2);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
}

.ug-map-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

/* --- Image lightbox (click to enlarge) --- */

body.ug-lightbox-open {
  /* keep page scroll locked under the modal */
  overflow: hidden;
}

.ug-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 6, 12, 0.88);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}

.ug-lightbox.ug-hidden {
  display: none !important;
}

.ug-lightbox-figure {
  margin: 0;
  max-width: min(96vw, 72rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}

.ug-lightbox-img {
  display: block;
  max-width: 96vw;
  max-height: calc(92vh - 2.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--ug-border);
  border-radius: 0.4rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.55);
  background: #0c0a10;
}

.ug-lightbox-caption {
  margin-top: 0.65rem;
  color: var(--ug-glow);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.ug-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--ug-border);
  border-radius: 0.35rem;
  background: var(--ug-surface);
  color: var(--ug-glow);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.ug-lightbox-close:hover {
  border-color: var(--ug-accent);
  color: var(--ug-text);
}

.ug-map-art-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.35rem 0.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: var(--ug-glow);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}

/* Atmospheric CSS art when no room image is present */
.ug-map-art-fallback {
  background-size: cover;
  background-position: center;
}

.ug-theme-default.ug-map-art-fallback {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201, 162, 39, 0.2), transparent 50%),
    linear-gradient(160deg, #2a2035, #141218 70%);
}

.ug-theme-bar.ug-map-art-fallback {
  background:
    radial-gradient(circle at 70% 80%, rgba(107, 45, 62, 0.55), transparent 45%),
    linear-gradient(180deg, #3a2430, #1a1018);
}

.ug-theme-garden.ug-map-art-fallback {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(45, 90, 61, 0.5), transparent 55%),
    linear-gradient(180deg, #1a3028, #0e1814 60%, #152018);
}

.ug-theme-kitchen.ug-map-art-fallback {
  background:
    radial-gradient(circle at 20% 30%, rgba(232, 184, 74, 0.15), transparent 40%),
    linear-gradient(135deg, #2a2420, #181410);
}

.ug-theme-lab.ug-map-art-fallback {
  background:
    linear-gradient(90deg, rgba(80, 160, 200, 0.12) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(#1a2230, #101820);
}

.ug-theme-library.ug-map-art-fallback {
  background:
    repeating-linear-gradient(
      90deg,
      #2a2018 0 10px,
      #3a2a20 10px 12px,
      #1e1814 12px 22px
    ),
    linear-gradient(#1a1410, #120e0c);
}

.ug-theme-engineering.ug-map-art-fallback {
  background:
    radial-gradient(circle at 50% 50%, rgba(100, 140, 180, 0.2), transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(80, 100, 120, 0.08) 6px 7px),
    #121820;
}

.ug-theme-den.ug-map-art-fallback {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(180, 120, 60, 0.25), transparent 50%),
    linear-gradient(180deg, #2a1c18, #120c0a);
}

.ug-theme-command.ug-map-art-fallback {
  background:
    radial-gradient(circle at 30% 40%, rgba(60, 180, 100, 0.2), transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(200, 80, 60, 0.15), transparent 20%),
    linear-gradient(#0e1418, #080c10);
}

.ug-theme-hall.ug-map-art-fallback {
  background:
    linear-gradient(180deg, rgba(201, 162, 39, 0.12), transparent 40%),
    linear-gradient(160deg, #2a2430, #141018);
}

.ug-theme-pod.ug-map-art-fallback {
  background:
    radial-gradient(circle at 50% 40%, rgba(120, 160, 200, 0.25), transparent 45%),
    linear-gradient(#1a2030, #0c1018);
}

.ug-map-meta {
  flex: 0 0 auto;
  font-family: Arial, Helvetica, sans-serif;
}

.ug-map-title {
  margin: 0 0 0.25rem;
  color: var(--ug-glow);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ug-map-desc {
  margin: 0;
  color: var(--ug-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  max-height: 4.2rem;
  overflow: hidden;
}

.ug-map-occupants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.ug-map-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--ug-border);
  border-radius: 999px;
  background: var(--ug-surface-2);
  color: var(--ug-text);
  font-size: 0.65rem;
  font-family: Arial, Helvetica, sans-serif;
}

.ug-map-chip-custodian {
  border-color: #5ec8b0;
  color: #9fe8d8;
}

.ug-map-chip-sitter {
  border-color: #d080b8;
  color: #f0c0e0;
}

.ug-map-chip-freyja {
  border-color: var(--ug-accent-dim);
  color: var(--ug-glow);
  box-shadow: 0 0 8px rgba(232, 184, 74, 0.25);
}

.ug-map-chip-thor {
  border-color: #c4783a;
  color: #f0a060;
  box-shadow: 0 0 8px rgba(240, 160, 96, 0.28);
}

.ug-map-chip-player {
  border-color: #6ab0e8;
  color: #9fd0ff;
  box-shadow: 0 0 8px rgba(106, 176, 232, 0.28);
}

.ug-map-svg-host {
  flex: 1 1 auto;
  min-height: 8rem;
  border: 1px solid var(--ug-border);
  border-radius: 0.4rem;
  background: #0c0a10;
  overflow: hidden;
}

.ug-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ug-map-edge {
  stroke: #4a4258;
  stroke-width: 2;
  stroke-linecap: round;
}

.ug-map-edge-vert {
  stroke: #6a5a40;
  stroke-dasharray: 3 3;
}

.ug-map-node-box {
  fill: #1e1a24;
  stroke: #5a5068;
  stroke-width: 1.25;
}

.ug-map-node-here .ug-map-node-box {
  fill: #2a2430;
  stroke: var(--ug-glow);
  stroke-width: 1.75;
  filter: drop-shadow(0 0 4px rgba(232, 184, 74, 0.45));
}

.ug-map-node-freyja .ug-map-node-box {
  stroke: #e8a060;
}

.ug-map-node-thor .ug-map-node-box {
  stroke: #f0a060;
}

.ug-map-node-freyja.ug-map-node-thor .ug-map-node-box {
  stroke: #e8c070;
}

.ug-map-node-players .ug-map-node-box {
  stroke: #6ab0e8;
}

.ug-map-node-custodian .ug-map-node-box {
  stroke: #5ec8b0;
}

.ug-map-node-sitter .ug-map-node-box {
  stroke: #d080b8;
}

.ug-map-here-dot {
  fill: var(--ug-glow);
}

.ug-map-freyja-mark {
  fill: #e8a060;
  font-size: 9px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ug-map-thor-mark {
  fill: #f0a060;
  font-size: 9px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ug-map-custodian-mark {
  fill: #7ee0c8;
  font-size: 9px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ug-map-sitter-mark {
  fill: #e8a0d0;
  font-size: 9px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ug-map-player-mark {
  fill: #9fd0ff;
  font-size: 9px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ug-map-player-dot {
  fill: #6ab0e8;
  pointer-events: none;
}

.ug-map-node-label {
  fill: var(--ug-muted);
  font-size: 7.5px;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ug-map-node-here .ug-map-node-label {
  fill: var(--ug-glow);
  font-weight: 700;
}

.ug-map-vert {
  fill: var(--ug-accent);
  font-size: 8px;
  font-family: Arial, Helvetica, sans-serif;
}

.ug-map-empty {
  position: absolute;
  inset: auto 0.85rem 2.2rem;
  color: var(--ug-muted);
  font-size: 0.72rem;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  pointer-events: none;
}

.ug-mappanel.ug-map-has-data .ug-map-empty {
  display: none;
}

.ug-map-legend {
  flex: 0 0 auto;
  display: flex;
  gap: 0.75rem;
  color: var(--ug-muted);
  font-size: 0.65rem;
  font-family: Arial, Helvetica, sans-serif;
}

.ug-leg {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.2rem;
  border-radius: 2px;
  vertical-align: -1px;
}

.ug-leg-here {
  background: var(--ug-glow);
  box-shadow: 0 0 4px rgba(232, 184, 74, 0.5);
}

.ug-leg-freyja {
  background: #e8a060;
}

.ug-leg-thor {
  background: #f0a060;
}

.ug-leg-players {
  background: #6ab0e8;
}

/* --- Responsive: tablet & phone --- */

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

body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
}

#clientwrapper {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  /* Safe areas (notch / home indicator) */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ug-map-backdrop {
  display: none;
}

/* Soften CRT overlays on small screens (battery / clarity) */
@media (max-width: 900px) {
  body::before {
    opacity: 0.25;
  }

  body::after {
    opacity: 0.25;
  }
}

/* Tablet (and small laptop) */
@media screen and (max-width: 1100px) {
  :root {
    --ug-map-w: 15rem;
  }

  #ug-statusbar {
    font-size: 0.78rem;
    gap: 0.4rem;
  }

  #ug-statusbar .ug-status-daypart {
    display: none;
  }

  .ug-room-look-art img {
    max-height: min(32vh, 16rem);
  }
}

/* Phone / tablet portrait: map becomes an overlay drawer */
@media screen and (max-width: 900px) {
  :root {
    --ug-map-w: min(20rem, 88vw);
    --ug-status-h: 2rem;
  }

  body {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Reduce scanline cost */
  body::after {
    display: none;
  }

  #ug-statusbar {
    font-size: 0.72rem;
    gap: 0.35rem;
    padding: 0 0.55rem;
    flex-wrap: nowrap;
  }

  #ug-statusbar .ug-status-daypart,
  #ug-statusbar .ug-status-sep:nth-of-type(2) {
    display: none;
  }

  /* Hide name on very tight status; room stays */
  #ug-statusbar .ug-status-name {
    max-width: 5.5rem;
  }

  #ug-body {
    position: relative;
  }

  .ug-map-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 35;
    background: rgba(8, 6, 12, 0.55);
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .ug-map-backdrop.ug-hidden {
    display: none !important;
  }

  .ug-mappanel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    flex: none !important;
    width: var(--ug-map-w) !important;
    max-width: 90vw;
    height: 100%;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.55);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    transform: translateX(0);
  }

  .ug-mappanel.ug-map-collapsed {
    flex: none !important;
    width: 0 !important;
    max-width: 0 !important;
    border: none;
    box-shadow: none;
    transform: translateX(100%);
    overflow: visible;
  }

  .ug-mappanel.ug-map-collapsed .ug-map-inner {
    opacity: 0;
    pointer-events: none;
  }

  /* Floating map handle always reachable */
  .ug-map-toggle {
    position: absolute;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 2.35rem;
    height: 2.75rem;
    border-radius: 0.4rem 0 0 0.4rem;
    font-size: 0.95rem;
    touch-action: manipulation;
  }

  .ug-mappanel.ug-map-collapsed .ug-map-toggle {
    position: fixed;
    right: 0;
    left: auto;
    top: auto;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.5rem 0 0 0.5rem;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.45);
    z-index: 45;
  }

  .ug-map-inner {
    padding: 0.55rem 0.6rem 0.5rem 0.7rem;
  }

  .ug-map-art {
    height: 5.5rem;
  }

  .ug-map-desc {
    max-height: 3.2rem;
    font-size: 0.68rem;
  }

  .ug-map-svg-host {
    min-height: 6.5rem;
  }

  .content {
    padding: 0.55rem !important;
  }

  .ug-room-look-art {
    margin: 0.25rem 0 0.65rem;
    border-radius: 0.4rem;
  }

  .ug-room-look-art img {
    max-height: min(28vh, 12rem);
  }

  .ug-room-look-caption {
    font-size: 0.7rem;
    padding: 0.3rem 0.55rem;
  }

  /* Prevent iOS zoom on focus; keep touch-friendly input */
  #inputfield,
  .inputfield,
  textarea.inputfield {
    font-size: 16px !important;
  }

  #inputsend,
  .inputsend,
  button.inputsend {
    min-width: 2.75rem;
    font-size: 1.15rem !important;
  }

  /* GoldenLayout tabs: larger hit targets */
  .lm_header .lm_tab.ug-tab {
    height: 24px !important;
    min-height: 24px;
    padding: 0 10px 0 6px !important;
  }

  .lm_header .lm_tab .ug-tab-ctl {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  #toolbar {
    top: calc(var(--ug-chrome-h) + 0.25rem) !important;
    right: 0.35rem !important;
  }

  .ug-lightbox {
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .ug-lightbox-close {
    top: max(0.5rem, env(safe-area-inset-top, 0px));
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Narrow phones */
@media screen and (max-width: 480px) {
  body {
    font-size: 0.85rem;
    line-height: 1.35;
  }

  #ug-statusbar {
    font-size: 0.65rem;
    padding: 0 0.4rem;
  }

  #ug-statusbar .ug-status-brand {
    letter-spacing: 0.04em;
    font-size: 0.62rem;
  }

  #ug-statusbar .ug-status-name {
    display: none;
  }

  #ug-statusbar .ug-status-room {
    max-width: 7rem;
  }

  .ug-map-art {
    height: 4.5rem;
  }

  .ug-map-legend {
    font-size: 0.6rem;
  }

  .content {
    padding: 0.4rem !important;
  }
}

/* Landscape phones: less vertical chrome */
@media screen and (max-height: 480px) and (orientation: landscape) {
  :root {
    --ug-status-h: 1.75rem;
  }

  .ug-room-look-art img {
    max-height: min(36vh, 8.5rem);
  }

  .ug-map-art {
    height: 3.5rem;
  }

  .ug-map-desc {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ug-mappanel,
  .ug-room-look-art img {
    transition: none;
  }
}