.hud-right[hidden], #ui-settings-fab { display: none; }
.hud { min-height: 46px; align-items: center; pointer-events: none; background: linear-gradient(#000e, #0009); }
.hud-left { max-width: none; }
body.eco-ready.model-focus .stage { mask-image: none; }
/* Above the canvas, below DOM boards: foreground Dialog remains unobstructed. */
#ecosystem-links { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#ecosystem-links path { fill: none; stroke-width: 1; opacity: .35; stroke-dasharray: 3 7; }
#ecosystem-links .eco-rail-link { stroke-dasharray: none; transition: stroke-opacity .45s; opacity: 1; }
#ecosystem-links .eco-rail-anchor { fill: #101715; stroke-width: 1; }
.eco-tether-port { position: absolute; left: 50%; bottom: 0; width: 2px; height: 2px; background: var(--role-color); pointer-events: none; }
.board.eco-dormant { left: 50%; top: 50%; opacity: .42; }
.board[hidden] { display: none !important; }
.board.eco-owned { left: 50%; top: 50%; opacity: .86; border-color: var(--role-color); transition: opacity 1.5s, box-shadow 1.5s; animation: none; }
.board.eco-owned.eco-active { opacity: 1; box-shadow: 0 0 0 1px var(--role-color), 0 0 24px #ffffff12; }
.board.eco-owned.eco-protected { border-style: double; border-width: 3px; }
.board.eco-owned.eco-selected { opacity: 1; outline: 1px solid var(--role-color); outline-offset: 4px; }
.board.eco-owned.eco-related { box-shadow: 0 0 0 1px var(--role-color); }
.board.eco-front { opacity: 1; transition: opacity .3s, box-shadow .3s; }
.board.eco-front .eco-speech { display: none; }
#inspector-connections[hidden] { display: none; }
#inspector-connections { margin: 8px 0; padding: 8px 0; border-block: 1px solid #ffffff26; color: #dce6e0; font-size: 11px; line-height: 1.6; }
.connection-heading { display: flex; align-items: center; justify-content: space-between; color: var(--role-color, #dce6e0); margin-bottom: 4px; }
#clear-board-focus { color: #bac7c1; background: transparent; border: 1px solid #53615a; padding: 2px 6px; cursor: pointer; font: inherit; }
#connection-incoming, #connection-outgoing { overflow-wrap: anywhere; }
.board.eco-owned > .tag, .board.eco-owned > canvas, .board.eco-owned > .media-content,
.board.eco-owned > .media-credit { display: none; }
.eco-identity, .eco-board-state { position: absolute; z-index: 5; background: #090c0eef; color: var(--role-color); font-size: 10px; letter-spacing: .08em; padding: 5px 7px; left: 0; right: 0; }
.eco-identity { top: 0; border-bottom: 1px solid #ffffff22; }
.eco-board-state { bottom: 0; font-size: 8px; color: #d0d2d5; }
.eco-media { position: absolute; inset: 27px 0 102px; display: grid; grid-template-columns: 1fr; }
.eco-media.eco-composition { grid-template-columns: 1fr 1fr; gap: 3px; }
.eco-media-tile { position: relative; overflow: hidden; min-width: 0; }
.eco-media .media-credit { z-index: 4; font-size: 6px; max-height: 20px; overflow: auto; }
.eco-caption { position: absolute; bottom: 104px; left: 7px; right: 7px; color: #ddd; background: #08090bd9; font-size: 8px; z-index: 4; }
.eco-caption:empty { display: none; }
.eco-speech { position: absolute; inset: 28px 5px auto; background: #111417ed; border-left: 2px solid var(--role-color); color: #f3f3f3; padding: 7px; font-size: 10px; z-index: 6; overflow-wrap: anywhere; }
.eco-speech[hidden] { display: none; }
.ascii-message.life { animation: none; opacity: .9; }
.ecosystem-panel { position: fixed; top: 108px; left: 18px; width: 250px; padding: 12px; background: #07090beb; border: 1px solid #444c52; z-index: 16; display: flex; flex-direction: column; max-height: calc(100dvh - 338px); }
.ecosystem-panel > * { flex-shrink: 0; }
.eco-panel-heading { display: flex; align-items: center; justify-content: space-between; color: #cedad2; letter-spacing: .12em; font-size: 10px; margin-bottom: 9px; }
#ecosystem-population, #ecosystem-camera-state, #ecosystem-couriers { font-size: 8px; color: #8c979f; }
#ecosystem-couriers { margin-top: 4px; }
#ecosystem-projection { margin-top: 5px; color: #99b9c3; font-size: 8px; line-height: 1.5; overflow-wrap: anywhere; }
#ecosystem-event { font-size: 10px; line-height: 1.55; color: #d4dbde; min-height: 48px; margin: 10px 0; overflow-wrap: anywhere; }
.ecosystem-panel > .eco-roles { display: flex; flex-direction: column; min-height: 0; flex-shrink: 1; margin-top: 10px; color: #adb5bc; font-size: 9px; }
.eco-roles h2 { margin: 0; font-size: inherit; font-weight: 400; flex-shrink: 0; }
.eco-role-list { min-height: 0; max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 0; list-style: none; }
.eco-role-list li { padding: 5px 0; border-top: 1px solid #ffffff16; }
.eco-role-list strong { color: #d7dfdf; font-weight: 400; }
.scene-control-hint { margin-top: 8px; color: #aebbb6; font-size: 10px; line-height: 1.6; }
.scene-control-hint strong { color: #e6eeea; font-weight: 400; }
body.scene-dragging .scene-control-hint { color: #fff; }
body.eco-ready .board { cursor: grab; }
body.eco-ready.scene-dragging .board { cursor: grabbing; }
body.eco-ready .board-inspector-panel { max-width: 380px; }
body.eco-ready .board-inspector-panel .content { max-height: 110px; font-size: 12px; line-height: 1.5; }
.board.eco-owned > .eco-markov { display: block; opacity: 1; inset: auto 0 22px; height: 70px; padding: 5px 8px;
  background: #080b0df5; border: 0; border-top: 1px solid #ffffff26; font-size: 12px; line-height: 1.35;
  animation: none; transform: none; transition: none; backdrop-filter: none; white-space: normal; }
.eco-markov-heading { font-size: 8px; color: var(--role-color); letter-spacing: .12em; margin-bottom: 3px; }
.eco-markov-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.board.eco-dormant, .board.eco-dormant * { animation: none !important; transition: none; }
.board.eco-dormant .text-overlay { backdrop-filter: none; }
@media (max-width: 850px) { .ecosystem-panel { top: 125px; width: 195px; padding: 8px; max-height: calc(100dvh - 355px); } .board.eco-dormant { opacity: .28; } }
@media (max-height: 680px) { .ecosystem-panel { top: 90px; } }

/* Word history occupies the old diagnostic panel area. */
body.eco-ready .buffer-overflow-panel, body.eco-ready .ghost-panel { display: none; }
body.eco-ready .ascii-chat { top: auto; bottom: 15px; max-height: 125px; }
.word-tracker { position: fixed; top: 90px; right: 16px; width: 310px; max-height: calc(100dvh - 275px);
  box-sizing: border-box; padding: 12px; background: #080c0fee; border: 1px solid #52615d; z-index: 20;
  display: flex; flex-direction: column; gap: 7px; color: #d5ddd9; font-size: 10px; line-height: 1.5; }
.word-tracker > * { flex-shrink: 0; }
.word-tracker h2, .word-tracker h3, .word-tracker p { margin: 0; font-weight: 400; }
.word-tracker h3 { font-size: 9px; letter-spacing: .08em; color: #a6bdb3; margin-bottom: 5px; }
.word-tracker .eco-panel-heading { margin: 0; }
#word-summary, #word-results, .word-muted, .word-footnote { color: #899a94; font-size: 9px; }
.word-search-row { display: flex; gap: 5px; }
.word-tracker input, .word-tracker select, .word-tracker button { font: inherit; color: inherit; background: #101615; border: 1px solid #384941; }
.word-tracker input { min-width: 0; flex: 1; padding: 5px; }
.word-tracker select { width: 106px; font-size: 9px; }
.word-tracker button { cursor: pointer; padding: 3px 6px; }
.word-tracker :focus-visible { outline: 1px solid #d1e9dd; outline-offset: 2px; }
#word-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 76px; overflow: auto; }
#word-list button { font-size: 9px; color: #92a09a; }
#word-list .word-learned { color: #c5e5d4; border-color: #648674; }
#word-list button[aria-pressed="true"] { color: #090e0b; background: #c5d9ce; }
.word-tracker > #word-detail { min-height: 100px; overflow: auto; flex: 1 1 auto; overscroll-behavior: contain; padding-right: 4px; }
.word-selected { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.word-selected h2 { font-size: 19px; color: #eff5f1; }
.word-type { font-size: 8px; color: #a0b4a9; }
.word-stats { margin: 3px 0 !important; }
#word-detail section { margin-top: 11px; padding-top: 8px; border-top: 1px solid #ffffff19; overflow-wrap: anywhere; }
.word-empty { color: #899890; }
.word-holder { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; margin-bottom: 4px; gap: 3px; font-size: 8px !important; }
.word-meter { grid-column: 1 / -1; height: 2px; background: #26332b; }
.word-meter > span { display: block; height: 100%; background: #a8ceba; }
.word-origin { margin-bottom: 8px; }
.word-origin-label { color: #c0d8cb; }
.word-origin summary { cursor: pointer; color: #a5b5b0; font-size: 9px; }
.word-journey { list-style: none; padding: 0; margin: 0; font-size: 9px; }
.word-journey li { border-left: 1px solid #507463; padding: 3px 0 3px 7px; }
.word-footnote { margin-top: 12px !important; }
@media (max-width: 850px) { .word-tracker { width: 245px; right: 8px; top: 90px; padding: 8px; } }
@media (max-height: 600px) { .word-tracker { max-height: calc(100dvh - 120px); } body.eco-ready .ascii-chat { display: none; } }