@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  --wall: #0a0a09;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--wall);
  overflow: hidden;
  overscroll-behavior: none;
  /* 整页是一块画面：手指拖动是在搅烟，不是滚动页面 */
  touch-action: none;
}
/* 着色器起不来时才垫原图（main.js 的 fallback 里链接也按同样的 cover 对位） */
.nogl body { background: var(--wall) url("../assets/wall.webp") 50% 39.2% / cover no-repeat; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.gl #scene { opacity: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 窗的位置由 main.js 按画面比例写入 left/top/width/height */
#windows a {
  position: fixed;
  overflow: hidden;
  color: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

#windows a:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.55);
  outline-offset: 5px;
}

/* 落地页上的字：到了里面才浮出来 */
#world {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  color: rgb(20 20 20 / 0.72);   /* 落地页是白底 */
  font: 200 13px/1 "Jost", "Avenir Next", "Futura", sans-serif;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}
.arrived #world { opacity: 1; transition-duration: 0.7s; }
/* 栏目的名字暂时不显示（还没定放哪），只留给读屏软件 */
#world-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
/* 领域的名字是画在烟里的（world.js）；这份列表只给读屏软件 */
#world-labels {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  list-style: none;
}
#back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 26px 28px;
  color: inherit;
  letter-spacing: 0.3em;
  text-decoration: none;
  pointer-events: auto;
  outline: none;
}
#back:hover, #back:focus-visible { color: #000; }
/* Agent 的房间是暗的：字换成浅色 */
.dark-place #world { color: rgb(255 255 255 / 0.62); }
.dark-place #back:hover, .dark-place #back:focus-visible { color: #fff; }
#back:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
/* Agent 页左边的对话框（占位）：钟响了才浮出来，之后一直在。左右的位置和宽度由 room.js 按壁龛的位置写入 */
#agent-panel {
  position: absolute;
  left: 5vw;
  top: 16vh;
  width: 44vw;
  height: 60vh;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(0 0 0 / 0.12);
  letter-spacing: 0.3em;
  opacity: 0;
  transition: opacity 0.9s ease;
}
#agent-panel[hidden] { display: none; }
#agent-panel.open { opacity: 1; transition-duration: 2.4s; }
#agent-panel p { margin: 0; }
#agent-panel p + p { color: rgb(255 255 255 / 0.34); }
/* 窄屏：墙占满画面，对话框压在下面 */
@media (max-aspect-ratio: 115/100) {
  #agent-panel { left: 7vw; right: 7vw; top: auto; bottom: 4vh; width: auto; height: 20vh; }
}

/* 编辑模式的滑块面板（网址加 ?edit 才出现） */
#editor {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 12px 14px;
  background: rgb(18 18 17 / 0.88);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 8px;
  color: #d8d6cf;
  font: 12px/1.4 -apple-system, "PingFang SC", sans-serif;
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
}
#editor.left { right: auto; left: 12px; }
#editor header { display: flex; align-items: center; gap: 8px; }
#editor header strong { flex: 1; font-weight: 500; font-size: 13px; }
#editor header button { flex: none; padding: 3px 8px; }
#editor section { display: grid; gap: 8px; margin-top: 10px; }
#editor section[hidden], #editor.folded section { display: none; }
#editor b { margin-top: 6px; font-weight: 500; color: #a09e97; }
#editor label { display: grid; grid-template-columns: 7.5em 1fr 3.4em; align-items: center; gap: 8px; }
#editor input[type="range"] { width: 100%; accent-color: #5fd2cd; }
#editor output { text-align: right; font-variant-numeric: tabular-nums; color: #a09e97; }
#editor div { display: flex; gap: 8px; }
#editor button {
  flex: 1;
  padding: 6px 8px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#editor button:hover { background: rgb(255 255 255 / 0.14); }
#editor pre { margin: 0; white-space: pre-wrap; color: #8b8983; font: inherit; user-select: text; -webkit-user-select: text; }