:root {
  --glass: rgba(18, 18, 30, 0.42);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.13);
  --ink: #f6f1ea;
  --muted: rgba(246, 241, 234, 0.62);
  --accent: #ff8a5c;
  --working: #6fe3a0;
  --waiting: #ffcf4a;
  --done: #7cc4ff;
  --idle: rgba(246, 241, 234, 0.4);
  --ui: 'Inter', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --display: 'Instrument Serif', 'Songti SC', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d18; color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; }
canvas#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

#fade { position: fixed; inset: 0; background: #06070d; opacity: 0; pointer-events: none; transition: opacity 0.45s; z-index: 5; }
#fade.on { opacity: 1; }

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--glass-hi);
}

/* ---------- Intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 45%, rgba(20, 16, 34, 0.15), rgba(8, 8, 18, 0.7));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.9s ease;
}
#intro.leaving { opacity: 0; pointer-events: none; }
.intro-card { text-align: center; max-width: 620px; animation: rise 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0; font: italic 400 clamp(60px, 11vw, 112px)/0.95 var(--display); color: #fff4e6; text-shadow: 0 8px 40px rgba(255, 140, 80, 0.35); }
h1 span { font-size: 0.42em; font-style: italic; color: var(--muted); margin-left: 0.2em; }
.lead { margin: 22px auto 0; font-size: 16px; line-height: 1.8; color: rgba(246, 241, 234, 0.85); }
.intro-stats { margin: 20px auto 0; display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--muted); }
.intro-stats span { padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); }
.intro-stats b { color: var(--ink); }
.intro-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }
.btn-primary {
  border: 0; padding: 13px 34px; border-radius: 99px; font-weight: 600; font-size: 15px; color: #2a1606;
  background: linear-gradient(180deg, #ffd3a8, #ff9f6b 60%, #ff8a5c);
  box-shadow: 0 10px 30px rgba(255, 130, 80, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(255, 130, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.btn-ghost { padding: 13px 24px; border-radius: 99px; font-size: 15px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.fine { margin: 22px auto 0; font-size: 12px; color: var(--muted); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; animation: fadein 1.2s 0.2s both; }
@keyframes fadein { from { opacity: 0; } }
#hud > * { pointer-events: auto; position: absolute; }
body.ui-off #hud, body.ui-off #labels { opacity: 0; }

.brand { top: 16px; left: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #fff4e6; color: #e8603c; font: italic 400 24px/1 var(--display); padding-bottom: 3px; }
.brand b { display: block; font: italic 400 20px/1 var(--display); }
.brand small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

.seg { top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 14px; }
.seg button { border: 0; background: none; padding: 7px 16px; border-radius: 10px; font-size: 13px; color: var(--muted); transition: color 0.2s, background 0.25s; }
.seg button:hover { color: var(--ink); }
.seg button.on { color: #2a1606; font-weight: 600; background: linear-gradient(180deg, #ffd3a8, #ff9f6b); box-shadow: 0 4px 14px rgba(255, 140, 80, 0.35); }

.tools { top: 16px; right: 16px; display: flex; gap: 2px; padding: 4px; border-radius: 14px; }
.tools button { width: 36px; height: 34px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; }
.tools button:hover, .tools button.on { background: rgba(255, 255, 255, 0.12); }
.tools svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tools .ico-off, body.muted .tools .ico-on { display: none; }
body.muted .tools .ico-off { display: block; }

/* Roster */
.roster { top: 70px; right: 16px; width: 256px; max-height: calc(100vh - 170px); overflow: auto; padding: 12px 10px 8px; scrollbar-width: none; }
.roster::-webkit-scrollbar { display: none; }
.roster header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 8px; }
.roster header b { font-size: 13px; }
.roster header small { font-size: 11px; color: var(--muted); }
.owner { margin-bottom: 8px; }
.owner-head { cursor: pointer; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 6px; font-size: 13px; font-weight: 600; }
.owner-head .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.owner-head small { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 11px; }
.owner-head .you { font-size: 10px; padding: 1px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: var(--muted); font-weight: 500; }
.sess { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; padding: 6px 6px; border-radius: 10px; font-size: 12px; cursor: pointer; transition: background 0.2s; }
.owner-head:hover, .sess:hover, .sess.sel { background: rgba(255, 255, 255, 0.08); }
.sess .k { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.k.claude { background: #d97757; color: #fff4ec; }
.k.codex { background: #e8f1f0; color: #0f3b3a; }
.sess .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.sess .t small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.st { font-size: 10.5px; padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.st.working { color: #0c2a18; background: var(--working); }
.st.waiting { color: #2a2000; background: var(--waiting); animation: pulse 1.2s ease-in-out infinite; }
.st.done { color: #06243a; background: var(--done); }
.st.idle { color: var(--muted); background: rgba(255, 255, 255, 0.08); }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 207, 74, 0.25); } }
.demo-tag { font-size: 9.5px; color: var(--muted); border: 1px dashed var(--line); padding: 0 5px; border-radius: 99px; font-weight: 400; }

#toast { top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 14px; animation: toastIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.toast.out { animation: toastOut 0.4s ease both; }
.toast .t-ico { font-size: 18px; }
.toast b { display: block; font-size: 13px; }
.toast small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(0.92); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

.clock { left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: 360px; }
.tod-ico { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #ffe2a8 30%, #ffb45a 70%); box-shadow: 0 0 10px #ffb45a; flex: none; transition: all 0.5s; }
.tod-ico.moon { background: radial-gradient(circle at 65% 35%, transparent 38%, #e8ecff 40%); box-shadow: none; }
.clock b { font-size: 13px; font-variant-numeric: tabular-nums; width: 40px; }
#time { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #1c2548, #5b86c0 25%, #cfe5f4 50%, #ffcd9c 72%, #5a4f8c 80%, #0a1030); outline: none; }
#time::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 150, 90, 0.5); cursor: pointer; }
#time-sync { border: 0; font-size: 11px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: var(--muted); }
#time-sync.live { color: #0c2a18; background: var(--working); }

.mine { left: 16px; bottom: 16px; display: flex; gap: 18px; padding: 12px 18px; }
.mine-row small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }
.mine-row b { display: block; font-size: 22px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- In-world labels (CSS2D) ---------- */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.tag { pointer-events: auto; cursor: pointer; transform: translateY(-4px); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: opacity 0.3s; }
.tag .pill { display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; border-radius: 99px; font-size: 11px; white-space: nowrap; max-width: 190px;
  background: rgba(16, 16, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tag .pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; font-style: normal; }
.tag .pill span { overflow: hidden; text-overflow: ellipsis; }
.tag .who { font-size: 10px; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.tag .more { display: none; font-size: 10.5px; color: var(--muted); padding: 5px 9px; border-radius: 10px; background: rgba(16, 16, 28, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); text-align: center; line-height: 1.5; }
.tag:hover .more, .tag.sel .more { display: block; }
.tag.far .pill span, .tag.far .who { display: none; }
.tag.far .pill { padding: 3px; }
.tag.waiting .bang { display: grid; }
.bang { display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--waiting); color: #2a2000; font-weight: 800; font-size: 15px; box-shadow: 0 0 16px rgba(255, 207, 74, 0.8); animation: bob 0.9s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.i-working { background: var(--working); box-shadow: 0 0 6px var(--working); }
.i-waiting { background: var(--waiting); }
.i-done { background: var(--done); }
.i-idle { background: var(--idle); }
.camp-tag { font: italic 400 18px/1 var(--display); color: #fff4e6; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); pointer-events: none; white-space: nowrap; }

@media (max-width: 900px) {
  .roster { display: none; }
  .clock { width: calc(100vw - 200px); left: auto; right: 12px; transform: none; bottom: 12px; }
  .mine { left: 12px; bottom: 12px; gap: 10px; padding: 8px 12px; }
  .mine-row:nth-child(3) { display: none; }
  .brand small { display: none; }
  .seg { top: 64px; }
}

/* ---------- Invite ---------- */
.invite { top: 16px; right: 196px; padding: 8px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: #2a1606; border: 0;
  background: linear-gradient(180deg, #ffd3a8, #ff9f6b); box-shadow: 0 6px 20px rgba(255, 140, 80, 0.35); }
.invite:hover { filter: brightness(1.05); }
.modal { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(5, 5, 12, 0.4); padding: 16px; }
.modal-card { width: min(520px, 100%); padding: 22px 24px; }
.modal-card h3 { margin: 0 0 12px; font: italic 400 28px/1.1 var(--display); }
.modal-card p { font-size: 13.5px; line-height: 1.7; color: rgba(246, 241, 234, 0.85); margin: 0 0 10px; }
.modal-card .muted { color: var(--muted); font-size: 12px; }
.modal-card label { display: block; font-size: 11.5px; color: var(--muted); margin: 10px 0 5px; }
.modal-card details { margin: 6px 0 16px; font-size: 12.5px; }
.modal-card summary { cursor: pointer; color: var(--muted); }
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row textarea, .copy-row input { flex: 1; min-width: 0; font: 13px/1.6 var(--ui); color: var(--ink); background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; resize: none; }
.copy-row button { border: 0; border-radius: 10px; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: #2a1606; background: #ffd3a8; white-space: nowrap; }
.modal-card .btn-primary { display: inline-block; text-decoration: none; margin-top: 6px; }
@media (max-width: 900px) { .invite { top: 64px; right: 12px; } }

.landing-say { max-width: 520px; margin: 0 auto; text-align: left; display: block; }
.landing-say p { font-size: 13px; line-height: 1.7; color: rgba(246, 241, 234, 0.85); margin: 0 0 8px; }
.landing-say .or { margin: 14px 0 0; color: var(--muted); text-align: center; }
.landing-say .copy-row textarea { font: 13px/1.6 var(--ui); color: var(--ink); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; resize: none; flex: 1; }
.landing-say .copy-row button { border: 0; border-radius: 10px; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: #2a1606; background: #ffd3a8; }
#intro-stats:has(.landing-say) { display: block; }

#roster-toggle { cursor: pointer; user-select: none; }
#roster-toggle .chev { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; transition: transform 0.25s; display: inline-block; }
.roster.collapsed #roster-list { display: none; }
.roster.collapsed { padding-bottom: 2px; }
.roster.collapsed .chev { transform: rotate(180deg); }
.resting { font-size: 11.5px; color: var(--muted); padding: 5px 6px 2px 30px; cursor: pointer; }
.resting:hover { color: var(--ink); }