/*
 * 四度空間 — retro terminal styling.
 *
 * The game is amber-on-black text in a fixed-width grid, so the site is too.
 * Everything is sized in ch/rem so the ASCII title screens keep their shape.
 */

:root {
  --bg: #0b0d0a;
  --bg-panel: #11150f;
  --fg: #c8d6bf;
  --dim: #6d7c66;
  --green: #7fd66f;
  --amber: #e8b955;
  --cyan: #6fc8d6;
  --red: #e06c60;
  --line: #26301f;
  --glow: rgba(127, 214, 111, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 72px;
  background: var(--bg);
  color: var(--fg);
  font-family: "DejaVu Sans Mono", "Consolas", "Menlo", "Courier New",
               "MingLiU", "PMingLiU", monospace;
  font-size: 15px;
  line-height: 1.65;
  /* faint scanlines: present enough to read as a CRT, not enough to annoy */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 3px, rgba(0, 0, 0, .16) 3px 4px);
}

main { max-width: 90ch; margin: 0 auto; }

a { color: var(--green); text-decoration: none; border-bottom: 1px dotted var(--line); }
a:hover { color: var(--bg); background: var(--green); border-bottom-color: transparent; }

/* ---- masthead ---- */
.masthead { padding-top: 20px; }
.art {
  color: var(--green);
  font-size: clamp(6px, 1.42vw, 13px);
  line-height: 1.15;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  text-shadow: 0 0 12px var(--glow);
}
.tagline { color: var(--dim); margin: 14px 0 0; }
.tagline b { color: var(--amber); font-weight: normal; }

/* ---- nav ---- */
nav {
  display: flex; flex-wrap: wrap; gap: 0 2ch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 22px 0 28px; padding: 8px 0;
}
nav a { border-bottom: none; padding: 2px 0; }
nav a::before { content: "["; color: var(--dim); }
nav a::after { content: "]"; color: var(--dim); }
nav a.here { color: var(--amber); }

/* ---- the connection box: the most important thing on the page ---- */
.connect {
  border: 1px solid var(--green);
  background: var(--bg-panel);
  padding: 16px 20px;
  margin: 26px 0;
  box-shadow: 0 0 24px var(--glow) inset;
}
.connect .addr {
  font-size: 1.35em; color: var(--amber); letter-spacing: .04em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.5ch;
}
.connect .addr button {
  font: inherit; font-size: .62em; color: var(--dim); cursor: pointer;
  background: transparent; border: 1px solid var(--line); padding: 2px 10px;
}
.connect .addr button:hover { color: var(--green); border-color: var(--green); }
.connect .note { color: var(--dim); font-size: .9em; margin-top: 8px; }

/* ---- live status ---- */
.status { display: inline-flex; align-items: center; gap: .8ch; }
.dot { width: .7em; height: .7em; border-radius: 50%; background: var(--dim); }
.status.up   .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.status.down .dot { background: var(--red); }
.status.up   .txt { color: var(--green); }
.status.down .txt { color: var(--red); }

/* ---- generic blocks ---- */
h2 {
  font-size: 1.05em; font-weight: normal; color: var(--amber);
  margin: 40px 0 12px; letter-spacing: .06em;
}
h2::before { content: "── "; color: var(--line); }
h3 { font-size: 1em; font-weight: normal; color: var(--cyan); margin: 26px 0 8px; }
p { margin: 12px 0; }
.dim { color: var(--dim); }
code { color: var(--amber); }

/* Badge for "you are not on the live game". Amber rather than green because it
   is a caveat, not a feature -- confusing the test bed for the real server is
   the one mistake these pages have to make hard. */
.tag {
  font-size: .72em; letter-spacing: .1em; vertical-align: .18em;
  color: var(--amber); border: 1px solid var(--amber);
  padding: 1px 7px; margin-left: 1.5ch;
}
h2 .tag::before, h1 .tag::before { content: none; }
pre {
  background: var(--bg-panel); border-left: 2px solid var(--line);
  padding: 10px 14px; overflow-x: auto; margin: 12px 0;
}

/* ---- stat strip ---- */
.stats { display: flex; flex-wrap: wrap; gap: 0 4ch; color: var(--dim); margin: 18px 0; }
.stats b { color: var(--fg); font-weight: normal; font-size: 1.25em; }

/* ---- tables ---- */
table { border-collapse: collapse; width: 100%; margin: 14px 0; }
th, td { text-align: left; padding: 4px 1.5ch 4px 0; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: normal; }

/* ---- hall of fame ---- */
.search {
  width: 100%; font: inherit; background: var(--bg-panel); color: var(--amber);
  border: 1px solid var(--line); padding: 10px 14px; margin: 6px 0 4px;
}
.search:focus { outline: none; border-color: var(--green); }
.yearblk { margin: 26px 0; }
.yearblk h3 { display: flex; align-items: baseline; gap: 1.5ch; margin-bottom: 6px; }
.yearblk h3 .n { color: var(--dim); font-size: .85em; }
.names { display: flex; flex-wrap: wrap; gap: 2px 0; }
.names span {
  display: inline-block; width: 15ch; padding: 1px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.names span.hit { background: var(--green); color: var(--bg); }
.names span .t { color: var(--dim); font-size: .82em; }
.names span.hit .t { color: var(--bg); }
.found { color: var(--amber); margin: 10px 0; min-height: 1.6em; }

/* ---- terminal (web client) ---- */
#term {
  background: #000; border: 1px solid var(--line); padding: 10px 12px;
  height: 62vh; min-height: 340px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-all; font-size: 14px; line-height: 1.4;
}
#term .sys { color: var(--dim); }
/* 雙色字: one Big5 glyph split around a colour change -- left and right
   halves painted separately via a gradient clipped to the glyph */
#term .dualc {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.inputrow { display: flex; gap: 1ch; margin-top: 8px; align-items: center; }
.inputrow .ps { color: var(--green); }
.inputrow input {
  flex: 1; font: inherit; background: var(--bg-panel); color: var(--fg);
  border: 1px solid var(--line); padding: 8px 12px;
}
.inputrow input:focus { outline: none; border-color: var(--green); }

footer {
  margin-top: 56px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: .88em;
}

@media (max-width: 640px) {
  body { font-size: 14px; padding: 0 10px 48px; }
  .names span { width: 50%; }
}