/* ---------------------------------------------------------------- themes -- */

:root {
  --font: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --leading: 1.5;
}

[data-theme="phosphor"] {
  --bg: #0b0f0d;
  --bg-bar: #111a16;
  --fg: #b8ccc0;
  --dim: #5e7268;
  --title: #7fffc4;
  --desc: #b8ccc0;
  --exit: #6fd3a8;
  --portal: #66c2ff;
  --item: #d8c98a;
  --player: #9be08c;
  --say: #eaf5ee;
  --emote: #a9c7f5;
  --tell: #e79bd8;
  --system: #86a094;
  --error: #ff8878;
  --ok: #7fffc4;
  --glow: 0 0 12px rgba(127, 255, 196, 0.12);
}

[data-theme="amber"] {
  --bg: #140d02;
  --bg-bar: #1e1404;
  --fg: #ffb642;
  --dim: #8a6420;
  --title: #ffd48a;
  --desc: #ffb642;
  --exit: #ffc76b;
  --portal: #fff0c4;
  --item: #e39b30;
  --player: #ffd48a;
  --say: #fff3d6;
  --emote: #d9932c;
  --tell: #ffdca8;
  --system: #a87a28;
  --error: #ff6a4d;
  --ok: #ffd48a;
  --glow: 0 0 14px rgba(255, 182, 66, 0.16);
}

[data-theme="c64"] {
  --bg: #3e31a2;
  --bg-bar: #2f2585;
  --fg: #8c7fff;
  --dim: #6a5fd6;
  --title: #ffffff;
  --desc: #b0a6ff;
  --exit: #a8ffb0;
  --portal: #7ce0ff;
  --item: #ffe27a;
  --player: #ffffff;
  --say: #ffffff;
  --emote: #d4c9ff;
  --tell: #ff9fd8;
  --system: #8c7fff;
  --error: #ff7c6b;
  --ok: #a8ffb0;
  --glow: none;
}

[data-theme="matrix"] {
  --bg: #000600;
  --bg-bar: #001400;
  --fg: #33ff66;
  --dim: #1a7a33;
  --title: #b6ffcb;
  --desc: #33ff66;
  --exit: #57ff8a;
  --portal: #d0ffdd;
  --item: #29cc52;
  --player: #b6ffcb;
  --say: #e6ffee;
  --emote: #2fd95c;
  --tell: #9dffbb;
  --system: #1f8f3d;
  --error: #ff5f5f;
  --ok: #b6ffcb;
  --glow: 0 0 16px rgba(51, 255, 102, 0.18);
}

[data-theme="lcd"] {
  --bg: #b6c68c;
  --bg-bar: #a3b47a;
  --fg: #1f2410;
  --dim: #5a6440;
  --title: #0d1005;
  --desc: #1f2410;
  --exit: #33401c;
  --portal: #12305a;
  --item: #4a3a10;
  --player: #0d1005;
  --say: #000000;
  --emote: #3d4526;
  --tell: #5a2050;
  --system: #5a6440;
  --error: #8a1c0c;
  --ok: #1c4a1c;
  --glow: none;
}

[data-theme="paper"] {
  --bg: #f4f1e8;
  --bg-bar: #e8e3d5;
  --fg: #2b2a26;
  --dim: #8a8578;
  --title: #14130f;
  --desc: #2b2a26;
  --exit: #3f5d3a;
  --portal: #2a4d7a;
  --item: #7a5a1c;
  --player: #14130f;
  --say: #000000;
  --emote: #4a4638;
  --tell: #7a2a63;
  --system: #8a8578;
  --error: #a11c0c;
  --ok: #2c5c2c;
  --glow: none;
}

/* ------------------------------------------------------------------ base -- */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ gate -- */

.gate {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
}

.gate[hidden] {
  display: none;
}

.gate-panel {
  width: min(440px, 100%);
  border: 1px solid var(--dim);
  padding: 28px 26px 22px;
  box-shadow: var(--glow);
}

.gate-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  color: var(--title);
  letter-spacing: 0.06em;
}

.gate-sub {
  margin: 0 0 24px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.7;
}

.gate-panel label {
  display: block;
  margin: 14px 0 5px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gate-panel input {
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--fg);
  font: inherit;
}

.gate-panel input:focus {
  outline: none;
  border-color: var(--title);
}

.gate-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

button {
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--title);
  color: var(--title);
  font: inherit;
  cursor: pointer;
}

button:hover {
  background: var(--title);
  color: var(--bg);
}

button.link {
  border: none;
  padding: 0;
  color: var(--dim);
  font-size: 13px;
  text-decoration: underline;
}

button.link:hover {
  background: transparent;
  color: var(--fg);
}

.gate-error {
  margin: 14px 0 0;
  min-height: 1.4em;
  color: var(--error);
  font-size: 13px;
}

/* ---------------------------------------------------------------- screen -- */

.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
}

.screen[hidden] {
  display: none;
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-bar);
  border-bottom: 1px solid var(--dim);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.bar-room {
  color: var(--title);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-space,
.bar-here {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-spacer {
  flex: 1;
}

.theme {
  background: transparent;
  border: 1px solid var(--dim);
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  padding: 2px 4px;
}

.scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.scroll:focus {
  outline: none;
}

.ln {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.ln-blank {
  height: 0.75em;
}

.ln-echo {
  color: var(--dim);
  margin-top: 0.5em;
}

.ln-title {
  color: var(--title);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.5em;
}

.ln-desc { color: var(--desc); }
.ln-exit { color: var(--exit); }
.ln-portal { color: var(--portal); }
.ln-item { color: var(--item); }
.ln-player { color: var(--player); }
.ln-say { color: var(--say); }
.ln-emote { color: var(--emote); font-style: italic; }
.ln-tell { color: var(--tell); }
.ln-system { color: var(--system); font-style: italic; }
.ln-error { color: var(--error); }
.ln-ok { color: var(--ok); }
.ln-dim { color: var(--dim); }

.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--dim);
  background: var(--bg-bar);
}

.prompt {
  color: var(--title);
}

#input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fg);
  font: inherit;
  caret-color: var(--title);
}

#input:focus {
  outline: none;
}

#input::placeholder {
  color: var(--dim);
  opacity: 0.6;
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .bar-space { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll { scroll-behavior: auto; }
}