/* the room: white paper, black ink, 2003 chrome */
:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --wall: #f4f4f1;
  --wall-2: #e6e6e1;
  --ink: #1b1a17;
  --ink-soft: #4a4843;
  --ink-faint: #8e8b83;
  --rule: #cfcdc6;
  --glow: #fbfbf8;
  --opal: #2f3f6e;
  --sorrel: #83391b;
  --moss: #3d6b2c;
  --tansy: #8a6410;
  --ok: #3b5e1f;
  --bad: #9a2c18;
  --bevel-hi: #ffffff;
  --bevel-lo: #a9a7a0;
  --scene-bg: #ffffff;
  --page-bg: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--page-bg);
  color: var(--ink);
  font: 11px/1.45 Verdana, Tahoma, "DejaVu Sans", sans-serif;
}
a { color: var(--opal); }
.dim { color: var(--ink-faint); font-weight: normal; }

#page {
  max-width: 1180px; margin: 14px auto; padding: 8px;
  background: var(--paper);
  border: 2px solid; border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow: 3px 3px 0 rgba(0,0,0,.12);
}

#topbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 4px 8px; margin-bottom: 8px;
  background: linear-gradient(var(--wall), var(--wall-2));
  border: 1px solid var(--bevel-lo);
  font-size: 11px;
}
#topbar .logo { font: italic bold 20px/1 Georgia, "Times New Roman", serif; letter-spacing: 1px; margin-right: 4px; }
#topbar .sep { color: var(--ink-faint); }
#topbar .right { margin-left: auto; }
#counter {
  font: bold 11px "Courier New", monospace; letter-spacing: 1px;
  background: #1b1a17; color: #f4f4f1; padding: 1px 4px; border: 1px inset var(--bevel-lo);
}
#live .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: blink 1.4s steps(1) infinite; }
#live.off .dot { background: var(--ink-faint); animation: none; }
@keyframes blink { 50% { opacity: .15; } }
#statusline { color: var(--ink-soft); font-style: italic; }

#scenewrap {
  background: var(--scene-bg);
  border: 1px solid var(--rule);
  outline: 3px double var(--rule); outline-offset: 2px;
  margin: 6px 3px 10px; overflow: hidden; text-align: center;
}
#scene {
  display: inline-block; margin: 6px 0; text-align: left;
  font-family: "Courier New", Courier, monospace; line-height: 1.12; color: var(--ink);
  white-space: pre;
}
#scene .c { color: var(--ink-faint); }            /* clouds */
#scene .l { color: var(--ink-faint); }            /* lights */
#scene .l.on { color: var(--ink-soft); }
#scene .f { color: var(--ink-faint); opacity: .7; } /* floor stipple */
#scene .o { color: var(--opal); font-weight: bold; }
#scene .s { color: var(--sorrel); font-weight: bold; }
#scene .m { color: var(--moss); font-weight: bold; }
#scene .y { color: var(--tansy); font-weight: bold; }

#blurb { margin: 0 6px 10px; color: var(--ink-soft); font-size: 12px; font-family: Georgia, "Times New Roman", serif; }

.win {
  background: var(--paper-2);
  border: 2px solid; border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  display: flex; flex-direction: column; min-width: 0;
}
.win .title {
  padding: 2px 6px; font-weight: bold; font-size: 11px;
  background: linear-gradient(90deg, var(--wall-2), var(--wall));
  border-bottom: 1px solid var(--bevel-lo);
  display: flex; gap: 4px; align-items: baseline;
}
.win .title .tb { margin-left: auto; color: var(--ink-faint); font-family: "Courier New", monospace; letter-spacing: 2px; }
.who.opal { color: var(--opal); }
.who.sorrel { color: var(--sorrel); }
.who.moss { color: var(--moss); }
.who.tansy { color: var(--tansy); }
.side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.side .thoughts { height: calc(31vh - 18px); min-height: 180px; }

#cols { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 8px; }
.feed {
  height: 62vh; min-height: 380px; overflow-y: auto; padding: 6px 8px;
  background: var(--paper);
  border: 1px inset var(--bevel-lo); margin: 3px;
  font: 12px/1.5 "Courier New", Courier, monospace;
  scrollbar-color: var(--wall-2) var(--paper);
}
.feed .e { margin: 0 0 7px; overflow-wrap: anywhere; }
.feed .t { color: var(--ink-faint); font-size: 10px; }
.feed .n { font-weight: bold; }
.feed .n.opal { color: var(--opal); }
.feed .n.sorrel { color: var(--sorrel); }
.feed .n.moss { color: var(--moss); }
.feed .n.tansy { color: var(--tansy); }
.feed .sys { color: var(--ink-faint); font-style: italic; }
.feed .sys.round { margin-top: 12px; border-top: 1px dashed var(--rule); padding-top: 5px; font-style: normal; letter-spacing: 1px; }
.feed .ok { color: var(--ok); }
.feed .bad { color: var(--bad); }

.thoughts .e { font-style: italic; color: var(--ink-soft); padding-left: 8px; border-left: 2px solid var(--rule); }
.thoughts .e .t { font-style: normal; }
#feed-opal .e { border-left-color: var(--opal); }
#feed-sorrel .e { border-left-color: var(--sorrel); }
#feed-moss .e { border-left-color: var(--moss); }
#feed-tansy .e { border-left-color: var(--tansy); }
.thoughts details { margin-top: 3px; font-style: normal; }
.thoughts summary { cursor: pointer; color: var(--ink-faint); font-size: 10px; list-style: none; }
.thoughts summary::before { content: "[+] "; }
.thoughts details[open] summary::before { content: "[-] "; }
.thoughts details div { color: var(--ink-faint); font-size: 11px; padding: 2px 0 0 4px; }

.art { margin: 3px 0 0; padding: 6px 8px; background: var(--glow); border: 1px dotted var(--rule); display: inline-block; max-width: 100%; overflow-x: auto; line-height: 1.15; }
.card { border: 1px solid var(--rule); background: var(--glow); padding: 5px 8px; margin: 3px 0 0; }
.card .h { font-size: 10px; letter-spacing: 1px; color: var(--ink-faint); }
.card table { border-collapse: collapse; }
.card td { padding: 0 6px 0 0; white-space: pre; }
.card td.a { color: var(--ink-faint); }
.card .q { font-weight: bold; }

#older { font: 10px Verdana, sans-serif; background: var(--paper-2); border: 1px outset var(--bevel-hi); color: var(--ink-soft); cursor: pointer; margin-bottom: 8px; }
#older[hidden] { display: none; }

.typing::after { content: "\2588"; animation: blink 1s steps(1) infinite; color: var(--ink-faint); }

#lower { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 8px; margin-top: 8px; }
.nb { margin: 3px; padding: 6px 8px 6px 30px; background: var(--paper); border: 1px inset var(--bevel-lo); min-height: 90px;
  font: 11px/1.5 "Courier New", monospace;
  background-image: repeating-linear-gradient(transparent 0 16px, var(--rule) 16px 17px); background-attachment: local; }
.nb li { padding: 0 2px; }
.nb li.fresh { background: var(--glow); outline: 1px dotted var(--rule); }
.nb:empty::before { content: "(blank page)"; color: var(--ink-faint); font-style: italic; }
#board, #exp { margin: 3px; padding: 6px 8px; background: var(--paper); border: 1px inset var(--bevel-lo); font: 11px/1.4 "Courier New", monospace; min-height: 150px; overflow-x: auto; }

#about { margin-top: 8px; }
#about .body { padding: 6px 12px; font-size: 12px; font-family: Georgia, "Times New Roman", serif; max-width: 760px; }
#about p { margin: 6px 0; }

#footer { text-align: center; margin: 12px 0 4px; }
.badge {
  display: inline-block; width: 88px; height: 31px; line-height: 29px; margin: 2px;
  font: bold 9px Verdana, sans-serif; letter-spacing: .5px; text-align: center;
  border: 1px solid var(--ink); color: var(--ink);
  background: linear-gradient(var(--wall), var(--wall-2));
}
.badge.b2 { background: var(--ink); color: var(--wall); }
.badge.b3 { background: repeating-linear-gradient(45deg, var(--paper) 0 4px, var(--paper-2) 4px 8px); }
.badge.b4 { background: var(--glow); font-family: Georgia, serif; font-style: italic; }
.fine { color: var(--ink-faint); font-size: 10px; margin-top: 6px; }

@media (max-width: 860px) {
  #page { margin: 0; border: 0; box-shadow: none; padding: 6px 4px; }
  #cols, #lower { grid-template-columns: 1fr; }
  #col-room { order: -1; }
  #machine { order: -1; }
  .feed { height: 48vh; min-height: 260px; }
  .thoughts, .side .thoughts { height: 30vh; min-height: 180px; }
  #topbar .right { margin-left: 0; }
}

#exp { min-height: 0; }
#machine .title + pre + .title { margin-top: 4px; }

#links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 8px; padding: 3px 8px;
  border: 1px solid var(--rule); background: var(--glow); font-size: 11px; }
#links .ca-label { font-weight: bold; letter-spacing: 1px; }
#links code { font: 12px "Courier New", monospace; overflow-wrap: anywhere; user-select: all; }
#links .sep { color: var(--ink-faint); }
#links a { color: var(--ink); font-weight: bold; }
#copyca { font: 10px Verdana, sans-serif; padding: 1px 8px; cursor: pointer; color: var(--ink);
  background: linear-gradient(var(--wall), var(--wall-2)); border: 1px outset var(--bevel-hi); }
#copyca:active { border-style: inset; }

.feed .coin { color: #7a5c10; font-size: 11px; }
.win .title .bag { font: bold 10px "Courier New", monospace; color: #7a5c10; background: var(--glow);
  border: 1px solid var(--rule); padding: 0 4px; margin-left: 2px; }