/* DBN Cloud9 — fire-dark with electric violet. Blue is banned here. */
:root {
  --bg: #0b0b10;
  --panel: #14141c;
  --panel2: #1b1b26;
  --violet: #8f00ff;
  --violet-soft: #b45cff;
  --ember: #ff5a1f;
  --bone: #f2ede4;
  --dim: #9a93a8;
  --line: #2a2a38;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 800px at 50% -10%, #1c1030 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--bone);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
a { color: var(--violet-soft); }
.wrap { max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; }
.center { text-align: center; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); letter-spacing: .04em; }
h1 .v { color: var(--violet); text-shadow: 0 0 24px rgba(143,0,255,.8); }
.sub { color: var(--dim); margin-top: 8px; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 0 0 1px rgba(143,0,255,.08), 0 12px 40px rgba(0,0,0,.45);
}
label { display: block; color: var(--dim); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 6px; }
input[type=text], input[type=file], select, textarea {
  width: 100%; background: #0e0e14; border: 1px solid var(--line);
  color: var(--bone); border-radius: 10px; padding: 12px 14px; font-size: 1rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 2px rgba(143,0,255,.25); }
textarea { min-height: 90px; resize: vertical; }
.btn {
  display: inline-block; margin-top: 18px; padding: 13px 34px; border: none; cursor: pointer;
  border-radius: 999px; font-size: 1rem; font-weight: 700; letter-spacing: .12em;
  color: #fff; background: linear-gradient(135deg, var(--violet), #5b00b3);
  box-shadow: 0 0 22px rgba(143,0,255,.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(143,0,255,.8); }
.btn.ghost { background: transparent; border: 1px solid var(--violet); color: var(--violet-soft); box-shadow: none; }
.err { color: #ff6b6b; margin-top: 12px; }
.okmsg { color: #7CFC00; margin-top: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card p, .card li { color: var(--dim); font-size: .9rem; }
.card ul { list-style: none; margin-top: 10px; }
.card li { padding: 4px 0; }
.card li::before { content: "✦ "; color: var(--violet); }
.price { color: var(--violet-soft); font-weight: 700; margin: 8px 0; }
.nav { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.nav .who { margin-left: auto; color: var(--dim); font-size: .9rem; }
.picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.swatch.sel { border-color: #fff; box-shadow: 0 0 12px rgba(143,0,255,.9); }
.chip { padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); cursor: pointer; background: var(--panel); color: var(--bone); font-size: .9rem; }
.chip.sel { border-color: var(--violet); box-shadow: 0 0 10px rgba(143,0,255,.6); }
/* lobby */
#lobbyCanvas { width: 100%; max-width: 960px; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #0d0a16; display: block; margin: 16px auto; touch-action: none; }
.hud { display: flex; gap: 16px; justify-content: center; color: var(--dim); font-size: .85rem; margin-top: 8px; flex-wrap: wrap; }
/* room scene backdrops */
#scene { width: 100%; max-width: 960px; height: auto; border-radius: 14px; border: 1px solid var(--line); display: block; margin: 16px auto 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.media-grid img, .media-grid video { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.media-grid .t { font-size: .85rem; color: var(--dim); margin-top: 6px; }
/* show room: shared shelf under everyone's drops */
.shelf-wrap { position: relative; padding-bottom: 4px; }
.shelf { height: 14px; margin-top: 10px; border-radius: 4px;
  background: linear-gradient(180deg, #4a3423, #2c1e12);
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.15); }
/* business classifieds: the board */
.classy { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.classy .ch { font-weight: 700; font-size: 1.02rem; }
.classy .cb { color: var(--bone); margin-top: 6px; white-space: pre-wrap; }
.classy .cm { color: var(--dim); font-size: .82rem; margin-top: 8px; }
.stars { position: fixed; inset: 0; pointer-events: none; z-index: -1; }