/* Zork: Durable Edition — a terminal, with Clef's line and panel kept dim and out of the way. */

:root {
  color-scheme: dark;
  --bg: #0b0b0a;
  --fg: #d6d3c4;
  --bright: #f4f1e2;
  --dim: #77756a;
  --line: #2a2925;
  --amber: #e8b04b;
  --green: #8fae7a;
  --green-hi: #c4ec9e;
  --red: #e07a5f;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --size: 14px;
}

/* ------------------------------------------------------------------------- */
/* Base */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--fg);
  font: var(--size)/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.4;
}

:focus-visible {
  outline: 1px dashed var(--amber);
  outline-offset: 2px;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

.dim {
  color: var(--dim);
}

/* ------------------------------------------------------------------------- */
/* Status line: inverse video, like the original. */

.status {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  padding: 0 1ch;
  background: var(--fg);
  color: var(--bg);
  white-space: nowrap;
}

#room {
  overflow: hidden;
  text-overflow: ellipsis;
}

.status b {
  font-weight: inherit;
}

.gap {
  display: inline-block;
  width: 4ch;
}

/* ------------------------------------------------------------------------- */
/* Layout: the screen, and the Clef panel beside it on wide screens. */

.panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

body.with-panel .panes {
  grid-template-columns: minmax(0, 1fr) minmax(40ch, 48ch);
}

.screen {
  min-height: 0;
  overflow-y: auto;
  padding: 1.5em 2ch 2em;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  cursor: text;
}

.screen > * {
  max-width: 80ch;
}

/* ------------------------------------------------------------------------- */
/* Transcript */

.turn {
  margin: 0 0 1.6em;
}

.turn-input {
  color: var(--bright);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* "heard: go west", "clef corrected: take sack", "noted: "yoink" means take": Zork's words in green. */
.turn-ran,
.turn-learned {
  color: var(--dim);
}

.turn-ran .who {
  color: var(--green-hi);
  opacity: 0.7;
}

.turn-ran .cmd,
.turn-learned .cmd {
  color: var(--green-hi);
}

.turn-text {
  margin: 0.2em 0 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.working {
  color: var(--dim);
}

.thinking::after {
  content: '▌';
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.error {
  margin: 0 0 1em;
  color: var(--red);
  white-space: pre-wrap;
}

/* ------------------------------------------------------------------------- */
/* Clef's one line, above the prompt. */

.clef {
  margin: -0.8em 0 1em;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.clef[hidden] {
  display: none;
}

.clef .who {
  color: var(--green-hi);
  opacity: 0.7;
}

.clef .take {
  color: var(--green-hi);
}

.clef .take:hover .cmd {
  text-decoration: underline;
}

.clef .key {
  margin-left: 1ch;
  padding: 0 0.5ch;
  background: var(--line);
  color: var(--dim);
  font-size: 12px;
}

/* ------------------------------------------------------------------------- */
/* The prompt */

#command-form {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}

#command-form[hidden] {
  display: none;
}

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

#command {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--bright);
  caret-color: var(--amber);
}

#command:disabled {
  opacity: 1;
}

#command::placeholder {
  color: var(--dim);
}

#retry {
  color: var(--amber);
}

#retry::before {
  content: '[enter] ';
  color: var(--dim);
}

/* ------------------------------------------------------------------------- */
/* The Clef panel: one row per time Clef was asked; the newest opens with its bars. */

.clef-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  font-size: 13px;
}

.clef-panel[hidden] {
  display: none;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  padding: 0.6em 1.5ch;
  border-bottom: 1px solid var(--line);
  color: var(--green-hi);
  letter-spacing: 0.12em;
}

.panel-head .dim {
  letter-spacing: 0;
}

#clef-log {
  margin: 0;
  padding: 0.5em 0 1em;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* A row: number, what was said, and the verdict. */

.event-head {
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr) auto;
  gap: 1ch;
  width: 100%;
  padding: 0.1em 1.5ch;
  color: var(--dim);
  text-align: left;
}

.event-head:hover {
  color: var(--fg);
}

.event-head .said {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-head .verdict {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event.run .verdict,
.event.hint .verdict {
  color: var(--green-hi);
  opacity: 0.8;
}

.event.suggest .verdict {
  color: var(--amber);
  opacity: 0.85;
}

.event.error .verdict {
  color: var(--red);
}

/* The open row: what Clef weighed, what happened, and why. */

.event.open {
  margin: 0.6em 0 0.6em 1.5ch;
  border-left: 2px solid var(--green-hi);
}

.event.open .event-head {
  padding-left: 1ch;
  color: var(--bright);
}

.event.open .verdict {
  display: none;
}

.detail {
  padding: 0.3em 1.5ch 0.3em 1ch;
}

.question {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4em;
  color: var(--dim);
}

.option {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) 12ch 5ch;
  align-items: center;
  gap: 1ch;
  color: var(--green);
}

.option.top {
  color: var(--green-hi);
}

.option .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.option .pct {
  text-align: right;
}

.bar {
  height: 0.9em;
  background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px);
}

.bar .fill {
  display: block;
  height: 100%;
  background: var(--green);
}

.option.top .bar .fill {
  background: var(--green-hi);
}

.result {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6em;
  color: var(--green-hi);
}

.event.suggest .result > :first-child {
  color: var(--amber);
}

.event.quiet .result > :first-child {
  color: var(--dim);
}

.event.error .result > :first-child {
  color: var(--red);
}

.why {
  margin-top: 0.1em;
}

/* ------------------------------------------------------------------------- */
/* Function-key bar */

.keys {
  display: flex;
  align-items: center;
  gap: 3ch;
  padding: 0.25em 1ch;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 12px;
  white-space: nowrap;
}

.keys button {
  display: inline-flex;
  gap: 1ch;
  color: var(--fg);
}

.keys button[hidden] {
  display: none;
}

.keys button:hover:not(:disabled) {
  color: var(--bright);
}

.keys .k {
  padding: 0 0.5ch;
  background: var(--dim);
  color: var(--bg);
}

.keys button:hover:not(:disabled) .k {
  background: var(--fg);
}

.conn {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------------- */
/* Smaller screens and reduced motion */

@media (prefers-reduced-motion: reduce) {
  .thinking::after {
    animation: none;
  }
}

/* No room for the panel. */
@media (max-width: 1000px) {
  body.with-panel .panes {
    grid-template-columns: minmax(0, 1fr);
  }

  .clef-panel,
  #toggle-panel {
    display: none !important;
  }
}

/* Phones: bigger targets, 16px input so iOS doesn't zoom. */
@media (max-width: 900px) {
  :root {
    --size: 13px;
  }

  .screen {
    padding: 1em 1.5ch;
  }

  #command {
    font-size: 16px;
  }

  .clef .take {
    display: inline-block;
    min-height: 44px;
  }

  .clef .key {
    display: none;
  }

  .keys {
    gap: 2ch;
    padding: 0.6em 1ch;
  }

  .conn {
    display: none;
  }
}

/* Shared adventure link, including a selectable fallback for clipboard restrictions. */
#share-dialog {
  max-width: min(560px, calc(100vw - 32px));
  padding: 24px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--dim);
}
#share-dialog::backdrop {
  background: #000a;
}
#share-dialog h2 {
  font-size: 1.1em;
  margin-top: 0;
}
#share-url {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--dim);
  padding: 8px;
  font-size: 16px;
}
#close-share {
  padding: 8px 16px;
  border: 1px solid var(--dim);
}
.keys {
  flex-wrap: wrap;
}