@import "/universe-tokens.css";
@font-face {
  font-family: Space;
  src: url(/assets/space-grotesk.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url(/assets/roboto.woff2);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Pixel;
  src: url(/assets/pixel.woff2);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink:var(--u-ink);
  --panel:var(--u-surface-raised);
  --purple:#a78bfa;
  --gold:#e9c74c;
  --text:var(--u-text-soft);
  --muted:var(--u-text-muted);
  --border:var(--u-edge);
  font-family:
    Roboto,
    Arial,
    sans-serif;
  color: var(--text);
  background: #0a0814;
  font-size: 14px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  background: var(--u-secondary);
  border: 1px solid var(--u-secondary-border);
  border-radius: var(--u-pill);
  padding: 10px 13px;
  transition: background .15s, border-color .15s;
  touch-action: manipulation;
}
@media (hover: hover) {
  button:hover {
    background: var(--u-secondary-hover);
    border-color: var(--u-secondary-hover-border);
  }
}
button:active {
  transform: none;
  background: var(--u-control-pressed);
}
button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
input,
select,
textarea {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #12101c;
  color: var(--text);
  outline: none;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px #a78bfa17;
}
textarea {
  min-height: 75px;
  resize: vertical;
}
h1,
h2,
h3 {
  font-family:
    Space,
    Arial,
    sans-serif;
  font-weight: 700;
}
a {
  color: var(--u-text-soft);
}
p {
  line-height: 1.6;
}
[hidden] {
  display: none !important;
}
#app,
#viewport,
#game,
#labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#game {
  touch-action: none;
  outline: none;
  display: block;
}
#game:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
#labels {
  pointer-events: none;
  overflow: hidden;
}
.vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 40%,
      transparent 47%,
      #0a081460 100%);
}
#hud {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
#hud > * {
  pointer-events: auto;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-family: Space;
  font-size: 25px;

  font-weight: 700;
}
.brand-tag {
  display: block;
  color: var(--muted);
  font-family: Roboto;
  font-size: 7px;
  letter-spacing: 1.5px;
  margin-top: 3px;
}
.universe-mark {
  position: relative;
  font-family: Space;
  font-size: 47px;
  line-height: 1;
  color: #c4b5fd;
  letter-spacing: -8px;
  width: 41px;
  display: inline-block;

  font-weight: 700;
}
.universe-mark > span {
  font-size: 27px;
  color: var(--gold);
  position: absolute;
  right: -3px;
  top: -6px;
}
.room-heading {
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#world-name {
  font-size: 10px;
  color: #d6cce8;
  letter-spacing: 2.5px;
}
#room-name {
  font-size: 24px;
  margin: 6px 0 4px;
  text-shadow: 0 2px 12px #000;
}
#room-subtitle {
  font-size: 11px;
  color: #cec2df;
}
.hud-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
#connection {
  font-size: 11px;
  color: #cec2df;
  display: flex;
  align-items: center;
  gap: 6px;
}
#connection i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e9c74c;
  box-shadow: 0 0 7px currentColor;
}
#connection.live i {
  background: #34d399;
}
#connection.offline i {
  background: #ef7979;
}
.small-btn {
  padding: 8px 12px;
  font-size: 12px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.primary {
  background: var(--u-primary);
  border-color: transparent;
  box-shadow: none;
  color: white;
  min-height: var(--u-decision-size);
}
@media (hover: hover) {
  .primary:hover {
    background: var(--u-primary-hover);
  }
}
.big {
  width: 100%;
  font-size: 15px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-btn {
  font-size: 24px;
  line-height: 1;
  width: var(--u-control-size);
  height: var(--u-control-size);
  padding: 6px;
  border-color: transparent;
  background: transparent;
  display: inline-grid;
  place-items: center;
  border-radius: var(--u-pill);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--u-text-muted);
}
#dock {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--u-surface-flat);
  box-shadow: var(--u-shadow-flat);
  padding: 5px 8px;
  display: flex;
  gap: 4px;
  border-radius: var(--u-pill);
  z-index: 5;
  backdrop-filter: var(--u-backdrop);
  height: 64px;
}
#dock button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  gap: 3px;
  padding: 4px 11px;
  background: transparent;
  border: 0;
  border-radius: var(--u-pill);
  height: 54px;
  justify-content: center;
  color: var(--u-text-soft);
}
#dock button > span {
  font-size: 22px;
  height: 24px;
  line-height: 24px;
  color: inherit;
  display: flex;
  align-items: center;
}
#dock button > label {
  font-size: 11px;
  color: inherit;
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
}
@media (hover: hover) {
  #dock button:hover {
    background: var(--u-control-hover);
  }
}
#dock button.active {
  background: var(--u-primary);
  color: #fff;
}
#dock button.active > span {
  color: #fff;
}
.dock-separator {
  height: 30px;
  align-self: center;
  width: 1px;
  background: var(--border);
  margin: 0 3px;
}
#dock b {
  position: absolute;
  right: 5px;
  top: 0;
  background: var(--u-card);
  border: 1px solid var(--u-secondary-hover-border);
  border-radius: 9px;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: normal;
  color: #fff;
}
#dirty-dot {
  background: #e9c74c;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 12px;
  top: 8px;
  border-radius: 50%;
}
#controls-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  white-space: nowrap;
  color: #a69bb8;
}
#controls-hint span {
  padding: 0 8px;
}
kbd {
  font-family: inherit;
  color: #d5c8e9;
}
#coords {
  position: absolute;
  bottom: 16px;
  right: 20px;
  font-size: 9px;
  color: #8c829e;
}
.side-panel {
  position: absolute;
  right: 22px;
  top: 100px;
  bottom: 125px;
  width: 350px;
  max-width: calc(100% - 30px);
  border-radius: 16px;
  border: 0;
  background: var(--u-surface-raised);
  box-shadow: var(--u-shadow-raised);
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: var(--u-backdrop);
}
.editor-panel {
  overflow-y: auto;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  font-family: Space;
  font-size: 18px;
  font-weight: 700;
}
.panel-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 16px;
  line-height: 1.6;
}
.editor-status {
  margin: 0 16px 10px;
  color: #99d9ba;
  font-size: 10px;
}
.editor-status.dirty {
  color: #e9c74c;
}
.editor-actions {
  display: flex;
  gap: 6px;
  margin: 5px 16px;
  flex-wrap: wrap;
}
.catalog {
  padding: 10px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  border-bottom: 1px solid var(--border);
}
.catalog button {
  font-size: 11px;
  text-align: left;
  padding: 9px;
}
.catalog button.active {
  background: #8629fc55;
  border-color: #a78bfa;
}
.inspector {
  padding: 0 16px 12px;
}
.inspector h3 {
  font-size: 15px;
  margin: 15px 0;
}
.inspector .panel-hint {
  margin: 0 0 15px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
  text-align: left;
}
.field > span {
  font-size: 11px;
  color: var(--u-text-muted);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row input {
  min-width: 0;
}
.area-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.area-list button {
  text-align: left;
}
.editor-footer {
  padding: 14px 16px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.world-label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: white;
  text-shadow: none;
  font-size: 10px;
  will-change: transform;
  -webkit-text-stroke: 2px #14304c;
  paint-order: stroke fill;
}
.player-label {
  font-family: Pixel;
  font-size: 8px;
  font-weight: 400;
}
.player-label.self {
  color: #fff;
}
.player-label.away {
  opacity: .55;
}
.portal-label {
  font-family: Space;
  font-size: 12px;
  text-shadow: 0 2px 6px #000;

  font-weight: 700;
}
.area-label {
  font-size: 10px;
  color: #e9c74c;
}
#area-banner {
  position: absolute;
  top: 115px;
  left: 24px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  max-width: 260px;
  background: var(--u-surface-flat);
  border: 0;
  padding: 11px 13px;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: var(--u-shadow-flat);
}
.area-dot {
  background: var(--kind-room-solid);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
}
#area-banner strong {
  font-family: Space;
  font-size: 12px;
  display: block;

  font-weight: 700;
}
#area-banner span:not(.area-dot) {
  font-size: 10px;
  color: #bfb4cf;
  display: block;
  line-height: 1.5;
  margin-top: 4px;
}
#view-controls {
  position: absolute;
  left: 24px;
  bottom: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px;
  background: var(--u-surface-flat);
  box-shadow: var(--u-shadow-flat);
  border-radius: 28px;
  backdrop-filter: var(--u-backdrop);
}
#view-controls button {
  width: var(--u-control-size);
  height: var(--u-control-size);
  padding: 8px;
  background: transparent;
  font-size: 18px;
  border-radius: var(--u-pill);
  border: 0;
  display: grid;
  place-items: center;
}
#interaction {
  position: absolute;
  left: 50%;
  bottom: 125px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
}
#emotes {
  position: absolute;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  background: var(--panel);
  display: flex;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  border: 0;
  z-index: 10;
  box-shadow: var(--u-shadow-raised);
  backdrop-filter: var(--u-backdrop);
}
#emotes button {
  font-size: 24px;
  border: 0;
  padding: 6px;
}
#toast {
  position: absolute;
  bottom: 124px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 20px;
  border: 0;
  background: var(--u-surface-raised);
  box-shadow: var(--u-shadow-raised);
  border-radius: 12px;
  z-index: 40;
  max-width: calc(100% - 40px);
  font-size: 12px;
  line-height: 1.5;
  color: var(--u-text-soft);
}
#media {
  position: absolute;
  left: 25px;
  bottom: 120px;
  z-index: 15;
  max-width: calc(100vw - 45px);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #0a0814c2;
  backdrop-filter: blur(9px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.welcome-card {
  width: 440px;
  max-height: calc(100vh - 35px);
  overflow: auto;
  text-align: center;
  border-radius: 24px;
  background: var(--u-surface-raised);
  border: 0;
  padding: 25px 40px;
  box-shadow: var(--u-shadow-raised);
}
.welcome-card h2 {
  font-size: 29px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 15px 0;
}
.welcome-card h2 em {
  font-style: normal;
  background:
    linear-gradient(
      100deg,
      #c4b5fd,
      #e9c74c);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-card p {
  font-size: 12px;
  color: var(--u-text-muted);
  margin: 12px 0 22px;
}
.welcome-card .session-note {
  font-size: 9px;
  color: #9488a5;
  margin: 18px 0 0;
}
.welcome-art {
  height: 105px;
  position: relative;
  margin-bottom: 20px;
}
.welcome-planet {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  background:
    radial-gradient(
      circle at 30% 20%,
      #6b4997,
      #2b2042 65%);
  border: 1px solid #b59cd860;
  box-shadow: 0 0 45px #8629fc3b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-planet .universe-mark {
  transform: translateX(-4px);
}
.orbit {
  position: absolute;
  width: 210px;
  height: 65px;
  border: 1px solid #a78bfa4f;
  border-radius: 50%;
  left: 50%;
  top: 24px;
  transform: translateX(-50%) rotate(-18deg);
}
.orbit-two {
  transform: translateX(-50%) rotate(28deg);
  width: 150px;
  opacity: .5;
}
.tiny-star {
  position: absolute;
  color: #e9c74c;
  font-size: 16px;
}
.s1 {
  left: 17%;
  top: 25px;
}
.s2 {
  right: 14%;
  top: 63px;
  color: #c4b5fd;
}
.woka-picker {
  padding: 0;
  border: 0;
  margin: 18px 0;
}
.woka-picker legend {
  font-size: 11px;
  color: #c5b7d9;
  text-align: left;
  margin-bottom: 12px;
}
#woka-options {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.woka-option {
  width: 47px;
  height: 52px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.woka-option.selected {
  border-color: #a78bfa;
  background: #8629fc35;
  box-shadow: 0 0 0 2px #a78bfa20;
}
.woka-sprite {
  width: 32px;
  height: 32px;
  background-size: 96px 128px;
  background-position: -32px 0;
  image-rendering: pixelated;
  display: block;
  transform: scale(1.3);
}
#join-error {
  color: #f4a4ad;
  font-size: 11px;
  margin-top: 12px;
}
.dialog-card {
  width: 430px;
  border: 0;
  border-radius: 20px;
  background: var(--panel);
  padding: 28px;
  position: relative;
  box-shadow: var(--u-shadow-raised);
}
.dialog-card > .icon-btn {
  position: absolute;
  right: 8px;
  top: 8px;
}
.dialog-card h2 {
  font-size: 25px;
  margin: 18px 0 10px;
}
.dialog-card p {
  color: #c8bdd6;
  font-size: 13px;
  white-space: pre-wrap;
}
.dialog-card #dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
#joystick {
  display: none;
  position: absolute;
  left: 25px;
  bottom: 115px;
  width: 100px;
  height: 100px;
  border: 1px solid #a78bfa55;
  background: #14121e60;
  border-radius: 50%;
  touch-action: none;
  z-index: 8;
}
#joystick-thumb {
  width: 44px;
  height: 44px;
  position: absolute;
  left: 27px;
  top: 27px;
  background: #a78bfa55;
  border: 1px solid #c4b5fd77;
  border-radius: 50%;
  pointer-events: none;
}
@media (pointer: coarse) {
  #joystick {
    display: block;
  }
  #controls-hint {
    display: none;
  }
  #view-controls {
    bottom: 245px;
  }
  #dock {
    bottom: 22px;
  }
}
@media (max-width: 700px) {
  #hud {
    top: 15px;
    left: 15px;
    right: 15px;
  }
  .brand {
    font-size: 18px;
  }
  .brand-tag {
    display: none;
  }
  .universe-mark {
    font-size: 35px;
    width: 30px;
  }
  .universe-mark > span {
    font-size: 21px;
    right: -6px;
    top: -4px;
  }
  .room-heading {
    top: 62px;
    width: 70%;
    pointer-events: none !important;
  }
  #room-name {
    font-size: 20px;
    margin: 4px 0;
  }
  #room-subtitle {
    font-size: 10px;
  }
  #world-name {
    font-size: 8px;
  }
  .hud-right {
    gap: 7px;
  }
  #connection {
    font-size: 9px;
  }
  #invite {
    font-size: 10px;
    padding: 7px 8px;
  }
  #dock {
    padding: 5px;
    gap: 0;
    width: calc(100% - 22px);
    justify-content: space-around;
    bottom: 19px;
    border-radius: 15px;
  }
  #dock button {
    min-width: 0;
    padding: 7px 8px;
    flex: 1;
  }
  #dock button > span {
    font-size: 20px;
  }
  #dock button > label {
    font-size: 8px;
  }
  .dock-separator {
    margin: 0 1px;
  }
  #dock b {
    right: 3px;
  }
  #controls-hint {
    bottom: 4px;
    font-size: 8px;
  }
  #coords {
    display: none;
  }
  #area-banner {
    top: 144px;
    left: 14px;
    max-width: 220px;
    padding: 9px;
  }
  #area-message {
    display: none !important;
  }
  #area-name {
    font-size: 10px !important;
  }
  .side-panel {
    top: 140px;
    right: 11px;
    bottom: 104px;
    width: calc(100% - 22px);
    max-width: 390px;
  }
  #view-controls {
    left: 14px;
    bottom: 235px;
  }
  #view-controls button {
    width: var(--u-control-size);
    height: var(--u-control-size);
    padding: 8px;
    background: transparent;
    border: 0;
    border-radius: var(--u-pill);
    display: grid;
    place-items: center;
  }
  #interaction {
    bottom: 106px;
    max-width: calc(100% - 140px);
    margin-left: 45px;
    gap: 8px;
    white-space: normal;
  }
  #interaction-label {
    font-size: 10px;
  }
  #interact {
    font-size: 10px;
    padding: 8px;
  }
  #media {
    left: 11px;
    bottom: 102px;
    max-width: calc(100% - 22px);
  }
  #toast {
    bottom: 110px;
    font-size: 11px;
    width: max-content;
    max-width: calc(100% - 32px);
  }
  .welcome-card {
    padding: 22px 26px;
    border-radius: 20px;
  }
  .welcome-card h2 {
    font-size: 26px;
  }
  .welcome-art {
    height: 93px;
    margin-bottom: 12px;
  }
  .welcome-card p {
    margin-bottom: 17px;
  }
  .welcome-card .eyebrow {
    font-size: 8px;
  }
  .woka-option {
    width: 43px;
    padding: 3px;
  }
  .dialog-card {
    padding: 25px;
  }
  .dialog-card h2 {
    font-size: 22px;
  }
}
@media (max-height: 650px) {
  .welcome-art {
    display: none;
  }
  .welcome-card h2 {
    font-size: 24px;
  }
  .welcome-card {
    padding: 22px 30px;
  }
  .welcome-card p {
    margin: 10px 0 14px;
  }
  .welcome-card .session-note {
    margin-top: 12px;
  }
  .side-panel {
    top: 95px;
  }
  .room-heading {
    top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.brand-logo {
  width: 30px;
  height: 40px;
  object-fit: contain;
}
.welcome-logo {
  height: 55px;
  width: 42px;
  object-fit: contain;
}
.room-heading {
  padding: 8px 24px 12px;
  background:
    radial-gradient(
      ellipse,
      #14121ecc 10%,
      #14121e00 72%);
  min-width: 230px;
}
#hud {
  z-index: 4;
}
.action-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px;
  margin: 9px 0;
}
.action-card strong {
  display: block;
  font-size: 11px;
  color: #e9c74c;
  margin-bottom: 10px;
}
.action-card .field {
  margin-bottom: 8px;
}
#area-sounds {
  position: absolute;
  left: 24px;
  top: 205px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.area-action-control button {
  font-size: 11px;
  background: #14121ed9;
}
@media (max-height: 500px) {
  .side-panel.social-shell {
    top: 10px;
    bottom: 80px;
    max-height: calc(100dvh - 90px);
    min-height: 0;
    height: auto;
  }
  .social-shell .social-header {
    padding: 9px 12px;
  }
  .social-shell .social-subtitle {
    display: none;
  }
  .social-shell .social-title {
    font-size: 15px;
  }
  .social-shell .social-tabs {
    flex-shrink: 0;
  }
  .social-shell .social-tab {
    min-height: 30px;
    padding: 6px 3px;
  }
  .social-shell .social-toolbar {
    padding: 5px 12px;
  }
  .social-shell .social-timeline {
    min-height: 0;
    padding: 8px 12px;
  }
  .social-shell .social-composer {
    padding: 6px 10px;
    flex-shrink: 0;
  }
  .social-shell .social-composer textarea {
    min-height: 40px;
    height: 40px;
  }
  .social-shell .social-composer-hint {
    display: none;
  }
  .social-shell .social-emotes {
    display: none;
  }
  .social-shell .social-btn {
    min-height: 28px;
    padding: 5px 8px;
  }
  .social-shell .social-composer-actions {
    margin-top: 3px;
  }
  .editor-panel {
    top: 10px;
    bottom: 80px;
  }
  .room-heading {
    display: none;
  }
  #area-banner {
    top: 65px;
  }
  #dock {
    bottom: 8px;
  }
  #view-controls {
    display: none;
  }
}
.side-panel.social-shell {
  height: auto;
}
.login-switch {
  margin-top: 14px;
  border-color: transparent;
  color: #b8a7d1;
  font-size: 10px;
}
#login-form {
  margin-top: 20px;
}
#login-error {
  font-size: 11px;
  color: #f3a7b1;
  margin-top: 10px;
}
@media (max-height: 500px) {
  .social-shell .social-composer-actions {
    min-height: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .social-shell .social-composer-actions .social-btn {
    font-size: 12px !important;
    white-space: nowrap;
    min-width: 82px;
    min-height: 30px;
    line-height: 1 !important;
    padding: 6px 10px !important;
  }
  .social-shell .social-composer textarea {
    font-size: 12px !important;
    line-height: 1.3;
  }
  .social-shell .social-header {
    flex-shrink: 0;
  }
  .social-shell .social-toolbar {
    flex-shrink: 0;
  }
}
#quest-open {
  position: absolute;
  left: 24px;
  top: 74px;
  background: #14121ed9;
  border-color: #a78bfa33;
  font-size: 10px;
  z-index: 8;
}
.quest-root .quest-invitation {
  top: 210px;
  bottom: auto;
}
.quest-root .quest-tracker {
  left: auto;
  right: 24px;
  bottom: 115px;
}
.quest-root .quest-payoff {
  left: auto;
  right: 24px;
}
@media (max-width: 700px) {
  #quest-open {
    left: 15px;
    top: 67px;
  }
  .quest-root .quest-invitation {
    top: 200px;
    bottom: auto;
    max-width: 280px;
  }
  .quest-root .quest-tracker {
    left: auto;
    right: 12px;
    max-width: calc(100vw - 145px);
    bottom: 108px;
  }
  .quest-root .quest-payoff {
    left: auto;
    right: 12px;
    max-width: 230px;
  }
}
@media (max-height: 500px) {
  #quest-open {
    left: 160px;
    top: 15px;
  }
  .quest-root .quest-invitation {
    top: 70px;
    max-width: 250px;
  }
}
.document-tools {
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.document-tools select {
  margin-top: 8px;
  font-size: 11px;
}
.document-tools .panel-hint {
  margin-top: 8px;
}
.quest-root .quest-invitation {
  inset-inline-start: auto;
  inset-inline-end: 24px;
  top: 140px;
  bottom: auto;
  max-width: 310px;
}
@media (max-width: 700px) {
  .quest-root .quest-invitation {
    inset-inline-start: auto;
    inset-inline-end: 12px;
    top: auto;
    bottom: 105px;
    max-width: 240px;
  }
  .quest-root .quest-invitation p {
    font-size: 11px;
  }
  .quest-root .quest-invitation .quest-button {
    font-size: 10px;
    padding: 8px;
    min-height: 40px;
  }
}
@media (max-height: 500px) {
  .quest-root .quest-invitation {
    inset-inline-end: 14px;
    top: 70px;
    bottom: auto;
    max-width: 260px;
  }
}
.editor-search {
  margin: 8px 16px 0;
}
.editor-search input {
  font-size: 11px;
  padding: 9px;
}
.editor-search-results {
  max-height: 135px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}
.editor-search-results button {
  text-align: left;
}
#hud .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 200px;
  margin-top: -22px;
}
.brand .brand-logo {
  display: block;
  width: 200px;
  height: 100px;
  object-fit: contain;
}
.brand .brand-tag {
  display: block;
  margin: -14px 0 0 25px;
  font-size: 7px;
  letter-spacing: 1.25px;
  white-space: nowrap;
}
.welcome-planet {
  width: 260px;
  height: 130px;
  top: -14px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.welcome-logo {
  width: 260px;
  height: 130px;
  object-fit: contain;
}
.welcome-art .orbit {
  opacity: .14;
}
@media (max-width: 700px) {
  #hud .brand {
    width: 150px;
    margin-top: -14px;
  }
  .brand .brand-logo {
    width: 150px;
    height: 75px;
  }
  .brand .brand-tag {
    display: block;
    font-size: 5.5px;
    letter-spacing: .85px;
    margin: -10px 0 0 19px;
  }
  .hud-right {
    gap: 4px;
  }
  #manage-place,
  #invite {
    font-size: 9px;
    padding: 7px 6px;
  }
}
#view-controls {
  display: grid;
  grid-template-columns: repeat(2, var(--u-control-size));
  gap: 5px;
  bottom: 115px;
}
#view-controls button[aria-pressed=true] {
  background: var(--u-primary);
  border-color: transparent;
  color: #fff;
}
#game.camera-dragging {
  cursor: grabbing;
}
#game.camera-pan-mode {
  cursor: grab;
}
#quick-actions,
#shortcuts-help {
  position: absolute;
  bottom: 32px;
  background: var(--u-surface-flat);
  z-index: 8;
  font-size: 11px;
  box-shadow: var(--u-shadow-flat);
  border: 0;
  min-height: var(--u-control-size);
}
#quick-actions {
  right: 66px;
}
#shortcuts-help {
  right: 23px;
  width: var(--u-control-size);
  height: var(--u-control-size);
  padding: 4px;
}
#join-button:disabled,
#login-button:disabled {
  cursor: wait;
}
#express {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#express .express-tray {
  pointer-events: auto;
}
@media (max-width: 700px) {
  #view-controls {
    bottom: 225px;
    left: 13px;
    grid-template-columns: repeat(2, var(--u-control-size));
  }
  #view-controls button {
    width: var(--u-control-size);
    height: var(--u-control-size);
    padding: 8px;
    background: transparent;
    border: 0;
    border-radius: var(--u-pill);
    display: grid;
    place-items: center;
  }
  #quick-actions {
    top: 65px;
    right: 15px;
    bottom: auto;
    font-size: 10px;
  }
  #shortcuts-help {
    top: 65px;
    right: 72px;
    bottom: auto;
    width: var(--u-control-size);
    height: var(--u-control-size);
  }
  .hud-right #connection {
    max-width: 12px;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media (max-height: 500px) {
  #view-controls {
    display: none;
  }
  #quick-actions {
    top: 12px;
    right: 200px;
    bottom: auto;
  }
  #shortcuts-help {
    top: 12px;
    right: 260px;
    bottom: auto;
    width: var(--u-control-size);
    height: var(--u-control-size);
  }
}
.dialog-card {
  max-height: calc(100dvh - 40px);
  overflow: auto;
}
.dialog-card > .icon-btn {
  position: sticky;
  top: 0;
  float: right;
  margin-top: -14px;
  margin-right: -14px;
  background: #211c31;
}
.avatar-preset {
  width: 47px;
  height: 62px;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-preset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-preset > span {
  font-size: 8px;
}
.avatar-preset.selected {
  border-color: #c4b5fd;
  background: #8629fc45;
  box-shadow: 0 0 0 2px #a78bfa30;
}
#customize-character {
  margin-top: 12px;
  width: 100%;
  color: #d4c4f0;
}
.social-avatar-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social-avatar-initials {
  font-family: Space;
  font-size: 11px;
  color: #ccb6ff;

  font-weight: 700;
}
.social-avatar-large .social-avatar-initials {
  font-size: 18px;
}
#quest-open {
  top: 108px;
}
#area-banner {
  top: 149px;
}
#area-sounds {
  top: 229px;
}
@media (max-width: 700px) {
  #quest-open {
    top: 89px;
  }
  #area-banner {
    top: 146px;
  }
  #area-sounds {
    top: 186px;
  }
}
@media (max-height: 500px) {
  #quest-open {
    top: 15px;
    left: 195px;
  }
  #area-banner {
    top: 80px;
  }
}
.primary:active,
#dock button.active:active,
#view-controls button[aria-pressed=true]:active {
  background: var(--u-primary-pressed);
}
@media (hover: hover) {
  @media (hover: hover) {
    #dock button.active:hover,
    #view-controls button[aria-pressed=true]:hover {
      background: var(--u-primary-hover);
    }
  }
  @media (hover: hover) {
    #view-controls button:hover {
      background: var(--u-control-hover);
    }
  }
}
#dock button:focus-visible,
#view-controls button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
/* Only explicitly bound window triggers use PR609's held-open treatment.
   Actual visibility owns this state, even when a legacy .active flag is stale.
   Build, camera modes, media devices and other selected controls are unbound. */
#dock button[data-window-control][aria-expanded] {
  background: transparent;
  color: var(--u-text-soft);
  box-shadow: none;
}
#dock button[data-window-control] > span {
  color: inherit;
}
#dock button[data-window-control][aria-expanded=true] {
  background: var(--u-control-open);
  color: var(--u-text);
  box-shadow: inset 0 0 0 1px var(--u-control-open-edge);
}
@media (hover: hover) {
  #dock button[data-window-control][aria-expanded]:not(:disabled):hover {
    background: var(--u-control-hover);
  }
  #dock button[data-window-control][aria-expanded=true]:not(:disabled):hover {
    background: var(--u-control-open-hover);
  }
}
#dock button[data-window-control][aria-expanded]:not(:disabled):active {
  background: var(--u-control-pressed);
}
@media (min-width: 701px) and (max-width: 1279px) and (pointer: fine) {
  #dock {
    height: 56px;
  }
  #dock button {
    height: 46px;
    min-width: 60px;
  }
  #dock button > label {
    font-size: 10px;
  }
}
@media (max-width: 700px) {
  #dock {
    height: 64px;
    max-width: calc(100% - 16px);
    width: max-content;
    gap: 2px;
    padding: 4px 6px;
    border-radius: var(--u-pill);
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  #dock button {
    flex: 0 0 auto;
    min-width: 48px;
    padding: 4px 6px;
    height: 54px;
  }
  #dock button > label {
    font-size: 10px;
  }
  .dock-separator {
    display: none;
  }
  #view-controls {
    grid-template-columns: repeat(2, var(--u-control-size));
    gap: 0;
    bottom: 225px;
  }
  #quick-actions {
    right: 14px;
  }
  #shortcuts-help {
    right: 88px;
  }
}
@media (pointer: coarse) {
  .small-btn {
    min-height: 48px;
  }
  .icon-btn,
  #shortcuts-help {
    min-width: 48px;
    min-height: 48px;
  }
  #view-controls button {
    width: 48px;
    height: 48px;
  }
  .welcome-card button:not(.avatar-preset) {
    min-height: 48px;
  }
  #view-controls {
    bottom: 225px;
  }
  .dialog-card button {
    min-height: 48px;
  }
}
@media (max-height: 500px) {
  #dock {
    bottom: 8px;
    height: 64px;
  }
  #dock button {
    height: 54px;
  }
  #quick-actions {
    right: 176px;
  }
  #shortcuts-help {
    right: 256px;
  }
  .social-shell .social-close {
    min-width: 48px;
    min-height: 48px !important;
  }
}
@media (pointer: coarse) {
  .social-shell .social-tab,
  .social-shell .social-btn,
  .social-shell .social-composer-actions .social-btn {
    min-height: 48px !important;
  }
  .social-shell .social-composer-actions {
    min-height: 48px;
  }
  .side-panel.social-shell {
    bottom: 86px;
  }
  .social-shell .social-timeline {
    min-height: 0;
  }
}
#quick-actions {
  right: 80px;
}
@media (max-width: 700px) {
  #dock {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    gap: 0;
    padding: 4px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
  }
  #dock button {
    scroll-snap-align: center;
  }
  #quick-actions {
    top: 152px;
    right: 14px;
  }
  #shortcuts-help {
    top: 207px;
    right: 14px;
  }
  .hud-right #connection {
    font-size: 0;
    width: 8px;
    max-width: 8px;
    gap: 0;
    overflow: visible;
    flex-shrink: 0;
  }
  .hud-right #connection i {
    flex-shrink: 0;
  }
}
@media (max-height: 500px) {
  #quick-actions {
    top: 12px;
    right: 176px;
  }
  #shortcuts-help {
    top: 12px;
    right: 256px;
  }
}
/* Narrow phones keep the complete original logo and every 48px action in bounds. */
@media (max-width:380px){
 #hud .brand{width:124px;flex:0 0 124px}
 #hud .brand .brand-logo{width:124px;height:62px}
 #hud .brand .brand-tag{margin-left:15px;margin-top:-8px;letter-spacing:.65px}
 #hud .hud-right{min-width:0;flex:1 1 0;max-width:calc(100% - 124px);gap:2px;justify-content:flex-end}
 #manage-bots,#manage-place{min-width:48px;max-width:50px;padding:6px;font-size:9px}
 #hud #invite{min-width:48px;width:48px;flex:0 0 48px;padding:10px;font-size:0;gap:0}
 #hud #invite .u-icon{width:24px;height:24px}
}
@media(max-width:700px){
 #dock{left:8px;right:8px;transform:none;width:auto;max-width:none;min-width:0;contain:inline-size;overflow-x:auto}
}
#dock-more{position:fixed;right:10px;bottom:39px;width:16px;height:20px;z-index:6;pointer-events:none;color:var(--u-text);display:none;background:var(--u-ink);border-radius:var(--u-pill)}
#dock-more .u-icon{width:16px;height:20px}
@media(max-width:700px){#dock-more:not([hidden]){display:block}}

/* Shell navigation. Reuse the audited Universe surfaces, type and state tokens. */
#shell-more { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
#shell-more[hidden] { display: none; }
.shell-more-backdrop { position: absolute; inset: 0; pointer-events: auto; background: rgb(0 0 0 / .18); }
.shell-more-card { position: absolute; right: 24px; bottom: 106px; width: min(390px,calc(100% - 24px)); max-height: calc(100dvh - 130px); display: flex; flex-direction: column; pointer-events: auto; color: var(--u-text); background: var(--u-ink); box-shadow: var(--u-shadow-raised); border-radius: 24px; overflow: hidden; animation: shell-menu-enter 140ms ease-out; }
.shell-more-card header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--u-secondary-border); }
.shell-more-card h2 { flex: 1; margin: 0; font: 700 18px Space, sans-serif; }
.shell-more-card header button { flex-shrink: 0; width: 48px; height: 48px; }
.shell-more-body { padding: 4px 12px 16px; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.shell-more-body h3 { font: 500 12px Roboto, sans-serif; color: var(--u-text-muted); margin: 16px 8px 8px; }
.shell-more-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
.shell-more-actions button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px; border: 0; border-radius: 12px; background: var(--u-secondary); color: var(--u-text-soft); font: inherit; font-size: 13px; text-align: left; overflow-wrap: anywhere; transition: background 120ms; }
.shell-more-actions button[hidden] { display: none; }
.shell-more-actions .u-icon { flex-shrink: 0; width: 22px; height: 22px; }
.shell-more-actions button[aria-expanded=true] { background: var(--u-control-open); box-shadow: inset 0 0 0 1px var(--u-control-open-edge); }
.shell-more-actions button[aria-pressed=true] { background: var(--u-primary); }
.shell-more-actions button:disabled { opacity: .45; cursor: not-allowed; }
.shell-more-card button:focus-visible { outline: 2px solid white; outline-offset: -3px; }
@media(hover:hover) { .shell-more-actions button:not(:disabled):hover { background: var(--u-control-open-hover); } }
@keyframes shell-menu-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion:reduce) { .shell-more-card { animation: none; } .shell-more-actions button { transition: none; } }
/* Status copy never steals a click from a menu or the world beneath it. */
#toast { pointer-events: none; }