:root {
  --soil: #12160f;
  --panel: #1a2117;
  --line: rgba(196, 165, 116, 0.18);
  --fig: #c4a574;
  --cream: #f3efe4;
  --mut: #9a9588;
  --live: #d24a3a;
  --olive: #6b8f4e;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--soil);
  color: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--fig); text-decoration: none; }
a:hover { text-decoration: underline; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--cream);
  text-decoration: none;
}
.brand a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.brand img {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(22rem, 38vw);
  flex: 1;
  min-height: 0;
}
@media (max-width: 840px) {
  .room { grid-template-columns: 1fr; }
}
.stage {
  position: relative;
  background: #0b0d0a;
  min-height: 52vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage video {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 52px);
  object-fit: contain;
  background: #000;
}
.idle {
  padding: 2rem 1.4rem 2.4rem;
  max-width: 28rem;
  text-align: center;
}
.idle .ar {
  font-family: "Noto Naskh Arabic", "Segoe UI", serif;
  font-size: 1.45rem;
  margin: 0 0 .4rem;
}
.idle .off {
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--cream);
  margin: .2rem 0 .6rem;
}
.idle p { color: var(--mut); margin: .4rem 0; line-height: 1.5; }
.idle .free { color: var(--cream); margin-top: 1rem; }
.wall {
  text-align: left;
  margin: 1rem auto 0;
  max-width: 22rem;
}
.wall .item {
  border-top: 1px solid var(--line);
  padding: .55rem 0;
}
.wall .meta { color: var(--fig); font-size: .75rem; }
.wall .body { margin: .15rem 0 0; line-height: 1.4; color: var(--cream); font-size: .9rem; }
.wall .more { display: inline-block; margin-top: .6rem; font-size: .85rem; }
.hud {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.pill {
  background: rgba(0,0,0,.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .8rem;
}
.pill.on { color: #fff; }
.dot {
  display: inline-block;
  width: .55rem; height: .55rem;
  background: var(--live);
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.sound {
  position: absolute;
  inset: auto 0 14px 0;
  display: none;
  justify-content: center;
  pointer-events: none;
}
.nopix {
  position: absolute;
  left: 12px; right: 12px; bottom: 52px;
  margin: 0;
  padding: .55rem .8rem;
  background: rgba(0,0,0,.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--cream);
  font-size: .88rem;
  line-height: 1.4;
  text-align: center;
}
.sound button, .go, .end, .door button, .chat-in button {
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: .55rem 1rem;
  font: inherit;
  font-weight: 650;
}
.sound button, .go {
  background: var(--cream);
  color: var(--soil);
}
.end {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line) !important;
}
.chat {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: var(--panel);
  min-height: 40vh;
}
@media (max-width: 840px) {
  .chat { border-left: 0; border-top: 1px solid var(--line); }
}
.chat-log {
  flex: 1;
  overflow: auto;
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.row { position: relative; padding-right: 1.4rem; }
.row .who { color: var(--fig); font-size: .75rem; }
.row.host .who { color: var(--olive); }
.row .tx { margin: .1rem 0 0; line-height: 1.4; word-wrap: break-word; }
.row .x {
  position: absolute; right: 0; top: 0;
  background: none; border: 0; color: var(--mut);
  cursor: pointer; font: inherit; line-height: 1; padding: 0 .1rem;
}
.row .x:hover { color: var(--cream); }
.chat-in {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .7rem;
  border-top: 1px solid var(--line);
}
.chat-in #name { width: 100%; }
.chat-in #text { flex: 1; min-width: 0; }
.chat-in input, .door input, .field input, select {
  width: 100%;
  background: #10150e;
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .7rem;
  font: inherit;
}
.chat-in button, .door button { background: var(--fig); color: #1a140c; }
.foot {
  padding: .5rem 1rem .8rem;
  color: var(--mut);
  font-size: .8rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.keep {
  margin: 0;
  padding: .7rem 1rem;
  text-align: center;
  color: var(--mut);
  font-size: .9rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.keep a {
  display: inline-block;
  color: var(--soil);
  background: var(--fig);
  text-decoration: none;
  border-radius: 999px;
  padding: .2rem .75rem;
  font-weight: 650;
}
.keep a:hover { text-decoration: none; filter: brightness(1.08); }
.give-page { max-width: 36rem; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.give-page .ar { font-family: "Noto Naskh Arabic", serif; font-size: 1.4rem; }
.give-page h1 { font-size: 1.2rem; }
.give-page p { line-height: 1.55; color: var(--cream); }
.give-page .mut { color: var(--mut); }
.give-page .btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.give-page .btn {
  display: inline-block;
  color: #1a140c;
  background: var(--fig);
  text-decoration: none;
  border-radius: 999px;
  padding: .45rem 1rem;
  font-weight: 650;
}
.give-page .btn.ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line);
}
.give-page a { color: var(--fig); }
.studio-body .room { min-height: calc(100vh - 52px); }
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.field { flex: 1; min-width: 12rem; }
.err { color: #e8a39a; padding: 0 1rem; font-size: .9rem; }
.door {
  max-width: 22rem;
  margin: 12vh auto;
  padding: 0 1rem;
}
.door h1 { font-size: 1.2rem; margin: 0 0 .4rem; }
.door p { color: var(--mut); }
.door form { display: grid; gap: .5rem; margin-top: 1rem; }
.hide { display: none !important; }
.sr { position: absolute; left: -999px; }