/* Yellow Compass — dark red, gold, a line of blue, black winding.
   No blur, no filters, no external anything. Built light for modest phones. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: #4a0404;
  color: #e8c766;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.45;
  padding: 0 14px 28px;
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.site-head { text-align: center; padding: 22px 0 6px; }
.emblem { display: block; margin: 0 auto 8px; }

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 2rem;
  letter-spacing: 0.32em;
  padding-left: 0.32em; /* balance the tracking */
  margin: 0 0 4px;
  font-weight: 500;
  color: #d4af37;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}
.house {
  margin: 0;
  letter-spacing: 0.22em;
  font-size: 0.95rem;
  color: #d4af37;
  text-shadow: 1px 1px 0 #000;
}
.rule {
  height: 0;
  border-top: 2px solid #3f6fb5; /* the blue hue, one clean line */
  margin: 12px auto 0;
  width: 72%;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 16px 0 14px;
}
.tab {
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  background: #2b0202;
  color: #d4af37;
  border: 1px solid #d4af37;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}
.tab.active {
  background: #d4af37;
  color: #2b0202;
  box-shadow: none;
  border-color: #000;
}

/* ---------- Views & rooms ---------- */
.view { margin: 0 0 18px; }
.view-title {
  font-size: 1.25rem;
  letter-spacing: 0.24em;
  color: #d4af37;
  text-shadow: 2px 2px 0 #000;
  margin: 4px 0 8px;
  border-bottom: 1px solid #3f6fb5;
  padding-bottom: 6px;
}

.seats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.seat {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  border: 1px solid #3f6fb5;
  color: #e8c766;
  padding: 4px 9px;
  background: #2b0202;
}

.standing {
  font-style: italic;
  color: #d4af37;
  border-left: 3px solid #3f6fb5;
  padding: 6px 10px;
  background: #3a0303;
  margin: 0 0 12px;
}
.standing .dot { color: #3f6fb5; margin-right: 6px; }

.msgs, .notes { list-style: none; margin: 0 0 12px; padding: 0; }
.msgs li {
  background: #2b0202;
  border: 1px solid #7a5a14;
  border-left: 3px solid #d4af37;
  padding: 8px 10px;
  margin: 0 0 8px;
  word-wrap: break-word;
}
.msgs .who {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: #3f6fb5;
  margin-bottom: 2px;
}
.msgs .when { display: block; font-size: 0.72rem; color: #a8894a; margin-top: 3px; }
.msgs .empty, .notes .empty { font-style: italic; color: #a8894a; border: none; background: none; padding: 2px 0; }

/* ---------- Composer ---------- */
.composer { display: flex; gap: 6px; }
.composer input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  background: #1d0101;
  color: #e8c766;
  border: 1px solid #d4af37;
  padding: 10px;
}
.composer input[type="text"]::placeholder { color: #a8894a; }
.composer button {
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  background: #d4af37;
  color: #2b0202;
  border: 1px solid #000;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
}
.composer button:active { box-shadow: none; }
.composer .mic { background: #2b0202; color: #d4af37; border-color: #d4af37; padding: 10px 11px; }
.composer .mic[hidden] { display: none; }
.composer .mic.listening { background: #3f6fb5; color: #fff; }

/* ---------- Notebook ---------- */
.note-hint { color: #a8894a; font-style: italic; margin: 0 0 12px; }
.notes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #2b0202;
  border: 1px solid #7a5a14;
  padding: 8px 10px;
  margin: 0 0 8px;
  word-wrap: break-word;
}
.notes .note-text { flex: 1 1 auto; }
.notes .del {
  font-family: inherit;
  background: none;
  border: 1px solid #7a5a14;
  color: #d4af37;
  cursor: pointer;
  padding: 2px 8px;
  font-size: 0.85rem;
}

/* ---------- Studio ---------- */
.art { margin: 0 0 10px; text-align: center; }
.art img {
  max-width: 100%;
  height: auto;
  border: 2px solid #d4af37;
  box-shadow: 3px 3px 0 #000;
  background: #2b0202;
}
.art figcaption { color: #d4af37; font-style: italic; margin-top: 8px; }

/* ---------- Panels (brain / roadblock) ---------- */
.panel {
  border: 1px solid #d4af37;
  background: #2b0202;
  box-shadow: 3px 3px 0 #000;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  color: #d4af37;
  text-shadow: 2px 2px 0 #000;
  border-bottom: 1px solid #3f6fb5;
  padding-bottom: 6px;
}
.panel p { margin: 0 0 8px; }
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: #d4af37; }
.roadblock .foot-line { text-align: center; letter-spacing: 0.18em; color: #a8894a; font-size: 0.85rem; margin-top: 10px; }