:root {
  color-scheme: dark;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  background: #030608;
  color: #f4f7f8;
  --world-visible-height: 100vh;
  --world-visible-top: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #030608;
}

body {
  overscroll-behavior: none;
  touch-action: none;
}

#world {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  overflow: hidden;
  isolation: isolate;
}

#venueCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: none;
}

#venueCanvas.dragging {
  cursor: grabbing;
}

.hud {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  pointer-events: none;
  text-shadow: 0 2px 7px #000;
}

.hud-top {
  top: 0;
  min-height: 66px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px
    max(16px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(1, 3, 4, 0.88), rgba(1, 3, 4, 0));
}

.hud-bottom {
  bottom: 0;
  align-items: flex-end;
  padding: 28px max(16px, env(safe-area-inset-right))
    max(13px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(1, 3, 4, 0.88), rgba(1, 3, 4, 0));
  font-size: 14px;
}

.venue-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.venue-title strong {
  font-size: clamp(19px, 2.3vw, 29px);
  letter-spacing: 0.01em;
}

.venue-title span {
  color: #8af59a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-actions {
  position: relative;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.world-menu-button {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
}

.world-menu-button span {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

.world-menu-button:hover,
.world-menu-button[aria-expanded="true"] {
  border-color: rgba(154, 170, 177, 0.66);
  background: rgba(255, 255, 255, 0.035);
}

.world-menu-button[aria-expanded="true"] span:first-child {
  transform: translateY(6px) rotate(45deg);
}

.world-menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.world-menu-button[aria-expanded="true"] span:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

.world-menu {
  position: fixed;
  top: calc(var(--world-visible-top) + 66px + env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: min(390px, calc(100vw - 32px));
  display: grid;
  gap: 0;
  max-height: calc(var(--world-visible-height) - 82px - env(safe-area-inset-top));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  border: 1px solid rgba(154, 170, 177, 0.66);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(20, 31, 35, 0.98), rgba(8, 14, 17, 0.98)),
    rgba(8, 13, 15, 0.98);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62);
  animation: world-menu-in 160ms ease both;
}

.world-menu::before {
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 245, 154, 0.52), transparent);
  content: "";
}

.world-menu > button,
.world-menu > .button-link {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  border: 0;
  border-bottom: 1px solid rgba(154, 170, 177, 0.18);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 650;
}

.audio-toggle {
  min-width: 0;
}

#voiceToggle[aria-pressed="true"] {
  border-color: #ffcc00;
  background: rgba(180, 150, 36, 0.92);
  box-shadow: 0 0 18px rgba(255, 204, 0, 0.30);
}

@keyframes world-menu-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.pa-sync-panel {
  position: absolute;
  z-index: 11;
  inset: 0;
  display: grid;
  place-items: start end;
  padding: max(70px, calc(env(safe-area-inset-top) + 62px))
    max(16px, env(safe-area-inset-right)) 16px 16px;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  touch-action: auto;
}

.pa-sync-card {
  width: min(390px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(154, 170, 177, 0.72);
  border-radius: 11px;
  background: rgba(12, 17, 20, 0.98);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62);
}

.pa-sync-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8af59a;
  font-size: 18px;
}

.pa-sync-heading button {
  min-width: 38px;
  padding: 4px 10px;
  font-size: 22px;
}

.pa-sync-card label:not(.check-row) {
  display: grid;
  gap: 6px;
  color: #dbe2e5;
}

.pa-sync-card input[type="number"] {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.check-row input {
  width: 18px;
  height: 18px;
}

.pa-sync-card small {
  color: #aeb9bd;
  line-height: 1.4;
}

.audio-toggle[data-state="playing"] {
  border-color: #7cf6ff;
  background: rgba(26, 96, 102, 0.92);
  box-shadow: 0 0 16px rgba(75, 227, 239, 0.22);
}

.audio-toggle[data-state="buffering"],
.audio-toggle[data-state="starting"] {
  border-color: #ffbd62;
  color: #ffe0af;
}

.audio-toggle[data-state="error"] {
  border-color: #ff7777;
  color: #ffb2b2;
}

button,
.button-link,
input {
  border: 1px solid #829096;
  border-radius: 7px;
  background: rgba(30, 37, 41, 0.92);
  color: #fff;
  font: inherit;
}

button,
.button-link {
  min-height: 38px;
  padding: 7px 14px;
  cursor: pointer;
}

button:hover,
button:focus-visible,
.button-link:hover,
.button-link:focus-visible {
  border-color: #b8c7cd;
  background: rgba(56, 69, 75, 0.96);
  outline: none;
}

.button-link {
  display: inline-grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.zoom-control {
  display: flex;
  margin: 10px 0;
}

.zoom-control button {
  min-width: 37px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 0;
}

.zoom-control button:first-child {
  border-radius: 7px 0 0 7px;
}

.zoom-control button:last-child {
  border-radius: 0 7px 7px 0;
}

#zoomReset {
  min-width: 62px;
  border-left-width: 0;
  border-right-width: 0;
  font-size: 12px;
}

.connection {
  color: #8af59a;
  font-weight: 700;
  white-space: nowrap;
}

.connection.waiting {
  color: #ffbd62;
}

.connection.error {
  color: #ff7777;
}

.chooser,
.fatal {
  position: absolute;
  z-index: 12;
  inset: 0;
}

.chooser {
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  touch-action: auto;
}

.chooser-card {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 44px));
  overflow: auto;
  padding: 26px;
  border: 1px solid rgba(154, 170, 177, 0.62);
  border-radius: 13px;
  background: rgba(12, 17, 20, 0.97);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.65);
}

.chooser h1 {
  margin: 0 0 8px;
  font-size: 27px;
}

.chooser p {
  margin: 0 0 21px;
  color: #b9c3c7;
  line-height: 1.45;
}

.session-list {
  display: grid;
  gap: 9px;
}

.session-entry {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  text-align: left;
}

.session-entry strong,
.session-entry small {
  display: block;
}

.session-entry small {
  margin-top: 3px;
  color: #aeb9bd;
}

.session-count {
  color: #8af59a;
  white-space: nowrap;
}

.empty-message {
  padding: 15px;
  border: 1px dashed #505d62;
  border-radius: 8px;
  color: #aeb9bd;
  text-align: center;
}

.room-form {
  display: grid;
  gap: 6px;
  margin-top: 21px;
}

.room-form > div {
  display: flex;
  gap: 8px;
}

.room-form input {
  min-width: 0;
  flex: 1;
  padding: 9px 11px;
}

.back-link {
  display: inline-block;
  margin-top: 18px;
  color: #bdc8cc;
}

.fatal {
  display: grid;
  place-items: center;
  padding: 32px;
  background: #070a0c;
  color: #ff9999;
  text-align: center;
  font-weight: 700;
  touch-action: auto;
}

.hidden {
  display: none !important;
}

@media (max-width: 620px) {
  .hud-top {
    min-height: 58px;
  }

  .venue-title span {
    max-width: 42vw;
  }

  .hud-bottom {
    font-size: 12px;
  }

}