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

/* CGA palette: black #000, cyan #00aaaa (bright #00ffff), magenta #aa00aa
   (bright #ff00ff), white #ffffff. Everything below uses only these. */
html, body { height: 100%; overflow: hidden; background: #000; color: #fff;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.dim { color: #00aaaa; }

/* needs bars — top center, dark CGA card */
#bars { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px; padding: 10px 18px; background: #0a0a0a; color: #fff;
  border: 1px solid #00aaaa; box-shadow: 3px 3px 0 #aa00aa; }
.bar { display: flex; align-items: center; gap: 7px; }
.bar .dot { width: 10px; height: 10px; border: 1.5px solid #fff; }
.bar label { font-size: 12px; font-weight: 600; }
.bar .track { width: 64px; height: 8px; border: 1.5px solid #fff; overflow: hidden; background: #000; }
.bar .track i { display: block; height: 100%; width: 50%; background: currentColor; transition: width .6s; }
#b-fullness { color:#58fc58 } #b-energy { color:#ffff58 } #b-wonder { color:#58ffff } #b-joy { color:#ff58ff } #b-calm { color:#ffffff }

#clockchip { position: fixed; top: 16px; right: 16px; background: #1d3540; color: #cfe8f0;
  padding: 8px 14px; font-weight: 700; box-shadow: 3px 3px 0 #0d1a20; }

/* right-now feed */
#feed { position: fixed; top: 76px; left: 16px; width: 330px; max-height: 44vh; overflow-y: auto;
  background: #0a0a0a; color: #fff; padding: 12px 14px;
  border: 1px solid #00aaaa; box-shadow: 3px 3px 0 #aa00aa; }
.feedhead { font-size: 11px; color: #ff00ff; margin-bottom: 6px; }
.feedhead::before { content: '● '; }
#feed-doing { font-weight: 700; font-size: 15px; color: #00ffff; margin-bottom: 4px; }
#feed-note { font-size: 12px; font-style: italic; margin-bottom: 8px; }
#feed-hall { font-size: 12px; margin-bottom: 6px; }

/* the hall's book — appears while you stand at the hall of changes */
#hall { position: fixed; top: 64px; right: 16px; width: 300px; max-height: 46vh; overflow-y: auto;
  background: #0a0a0a; color: #fff; padding: 12px 14px;
  border: 1px solid #00aaaa; box-shadow: 3px 3px 0 #aa00aa; }
#hall-book p { font-size: 12px; margin-bottom: 6px; }
#hall-book .who { color: #ff00ff; }
#hall-book .verdict { color: #00aaaa; }
#hall .row { display: flex; gap: 6px; margin-top: 8px; }
#hall input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #00aaaa;
  background: #000; color: #fff; font: inherit; }
#hall input::placeholder { color: #00aaaa; }
#hall button { padding: 8px 12px; border: 1px solid #000; background: #ff00ff;
  color: #000; font: inherit; cursor: pointer; }
#hall button:hover { background: #fff; }
#feed-events { border-top: 1px dashed #00aaaa; padding-top: 6px; display: flex; flex-direction: column; gap: 5px; }
#feed-events p { font-size: 12px; }
.linkbtn { background: none; border: none; color: #ff00ff; font: inherit; font-size: 12px;
  cursor: pointer; margin-top: 8px; padding: 0; text-decoration: underline; }
#musicbtn { display: block; color: #00ffff; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* diary overlay */
#diaryoverlay { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: flex;
  align-items: center; justify-content: center; z-index: 10; }
#diaryoverlay .card { width: min(560px, 90vw); max-height: 74vh; background: #0a0a0a; color: #fff;
  padding: 20px 24px; border: 1px solid #00aaaa; box-shadow: 4px 4px 0 #aa00aa; overflow: hidden; display: flex; flex-direction: column; }
#diaryoverlay h2 { margin-bottom: 10px; font-size: 18px; color: #00ffff; }
#diaryclose { position: absolute; margin-left: 480px; background: none; border: none; color: #ff00ff; font-size: 16px; cursor: pointer; }
#diarytext { overflow-y: auto; white-space: pre-wrap; font: inherit; font-size: 13px; }

/* status chip bottom center */
#status { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px; background: #0a0a0a; color: #fff;
  padding: 10px 18px; border: 1px solid #00aaaa; box-shadow: 3px 3px 0 #aa00aa; font-weight: 600; }
.pulse { width: 10px; height: 10px; background: #ff00ff; }
#status-time { color: #00aaaa; font-weight: 400; font-size: 12px; }

/* minimap */
#map { position: fixed; bottom: 16px; left: 16px;
  background: #000; box-shadow: 3px 3px 0 #aa00aa; }

/* visitor bar */
#you { position: fixed; bottom: 16px; right: 16px; width: 380px; display: flex; flex-direction: column; gap: 6px; }
#log { max-height: 15vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
#log .fifo { color: #00ffff; } #log .you { color: #fff; } #log .world { color: #ff00ff; font-style: italic; }
#log .nudge { color: #ffd700; font-style: italic; cursor: pointer; } /* §4.5 — click dismisses */
.row { display: flex; gap: 5px; }
#you input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #00aaaa;
  background: #0a0a0a; color: #fff; font: inherit; font-size: 12px; }
#you input::placeholder { color: #00aaaa; }
#you button { padding: 8px 12px; border: 1px solid #000; background: #ff00ff;
  color: #000; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#you button:hover { background: #fff; }
#name { max-width: 130px; }

/* shrine design picker — tick shapes, he builds them */
#shapes { border: 1px solid #00aaaa; background: #0a0a0a; padding: 8px 10px; }
#shapes .shapedim { display: block; color: #00aaaa; font-size: 11px; margin-bottom: 6px; }
.shapegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
.shapegrid label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.shapegrid input[type="checkbox"] { accent-color: #ff00ff; width: 13px; height: 13px; margin: 0; }

#crosshair { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: rgba(255,255,255,.85); font-size: 22px; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.9); z-index: 5; }

#help { position: fixed; top: 16px; left: 16px; color: #00aaaa; font-size: 11px; }
#dryrun { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
  color: #ff00ff; font-size: 11px; }

/* surveyor mode (?top=1): the island uncluttered */
body.top #bars, body.top #feed, body.top #you, body.top #status,
body.top #map, body.top #crosshair, body.top #clockchip { display: none; }