/* The Sight Glass — instrument face.
   Color law: green #32E685 is ALWAYS depositors' money; purple #9A52FF is
   ALWAYS the broker's own capital. Brass is the book-value pointer. Nothing
   else gets a hue. Surfaces separate by luminance, not borders. */

:root {
  --bg: #111112;
  --panel: #17171a;
  --panel-2: #1d1d21;
  --ink: #e9e9ec;
  --dim: #9a9aa3;
  --faint: #55555e;
  --green: #32e685;
  --green-deep: #1d9e5c;
  --purple: #9a52ff;
  --purple-deep: #6d35c0;
  --brass: #d8ae5a;
  --red: #ff4d5e;
  --amber: #e0b34d;
  --mono: 'Space Mono', ui-monospace, monospace;
  --body: 'Inter', system-ui, sans-serif;
  --display: 'Work Sans', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- honesty banner ---------- */
#devnet-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 7%, var(--bg));
}
.devnet-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- stage grid ---------- */
#stage {
  position: absolute; inset: 30px 0 0 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 1fr 96px;
  grid-template-areas:
    "glass journal"
    "rail  journal";
}

/* ---------- headline ---------- */
#headline {
  position: absolute; top: 34px; left: 40px; z-index: 10;
  pointer-events: none;
}
.hl-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.28em;
  color: var(--dim);
}
.hl-price {
  font-family: var(--mono); font-weight: 700;
  font-size: 64px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color 400ms ease;
}
.hl-price.up { color: var(--green); }
.hl-price.down { color: var(--red); }
.hl-sub {
  margin-top: 6px; display: flex; gap: 10px; align-items: baseline;
}
.hl-sub-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--faint);
}
.hl-sub-val {
  font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums;
  color: var(--dim);
}

/* ---------- the machine ---------- */
#glass-wrap {
  grid-area: glass;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
}
#glass { width: 100%; height: 100%; display: block; }

/* ---------- journal ---------- */
#journal {
  grid-area: journal;
  background: var(--panel);
  display: flex; flex-direction: column;
  min-height: 0;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.04);
}
#journal-head {
  padding: 14px 18px 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; color: var(--faint);
}
#reset-btn {
  border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--faint);
  transition: color 150ms;
}
#reset-btn:hover { color: var(--dim); }
#reset-btn.armed { color: var(--red); }
#journal-tape {
  list-style: none; overflow-y: auto; flex: 1;
  padding: 0 18px 18px;
  scrollbar-width: none;
}
#journal-tape::-webkit-scrollbar { display: none; }
#journal-tape li {
  padding: 9px 0;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  color: var(--dim);
  border-top: 1px solid rgba(255,255,255,0.045);
  animation: tape-in 300ms ease;
}
#journal-tape li:first-child { border-top: 0; }
@keyframes tape-in { from { opacity: 0; transform: translateY(-4px); } }
#journal-tape .j-label { color: var(--ink); display: block; }
#journal-tape .j-label.ok::before { content: '\2713  '; color: var(--green); }
#journal-tape .j-label.err::before { content: '\2717  '; color: var(--red); }
#journal-tape .j-hash a {
  color: var(--faint); text-decoration: none;
  word-break: break-all;
}
#journal-tape .j-hash a:hover { color: var(--dim); }
#journal-tape .j-note { color: var(--faint); }

/* ---------- story rail ---------- */
#rail {
  grid-area: rail;
  display: flex; align-items: center; gap: 28px;
  padding: 0 40px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#rail-copy { flex: 1; min-width: 0; }
#rail-title {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.01em;
}
#rail-text {
  margin-top: 3px;
  font-size: 13.5px; color: var(--dim); line-height: 1.45;
  max-width: 68ch;
}
#rail-actions { display: flex; gap: 12px; align-items: center; }

.btn {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  padding: 11px 22px; border: 0; border-radius: 8px;
  background: var(--green); color: #0a2416;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, opacity 200ms;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:disabled { opacity: 0.35; cursor: default; transform: none; filter: none; }
.btn.quiet { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
.btn.danger { background: var(--red); color: #2a0a0e; }
.btn.working { pointer-events: none; opacity: 0.6; }

/* countdown chip used during the grace race */
.race-chip {
  font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums;
  color: var(--red); min-width: 64px; text-align: center;
}

/* ---------- boot gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1100px 600px at 50% 30%, rgba(50,230,133,0.05), transparent 60%),
    var(--bg);
  transition: opacity 500ms ease;
}
#gate.hidden { opacity: 0; pointer-events: none; }
.gate-card { max-width: 560px; padding: 40px; text-align: center; }
.gate-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; color: var(--green);
}
.gate-card h1 {
  margin: 14px 0 12px;
  font-family: var(--display); font-weight: 700; font-size: 46px; letter-spacing: -0.01em;
}
.gate-tag { color: var(--dim); font-size: 15.5px; line-height: 1.6; }
#enter-btn {
  margin-top: 26px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  padding: 14px 34px; border: 0; border-radius: 10px;
  background: var(--green); color: #0a2416; cursor: pointer;
}
#enter-btn:disabled { opacity: 0.4; cursor: default; }
#boot-status {
  margin-top: 16px; min-height: 60px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--faint);
  text-align: left; white-space: pre-wrap;
  max-width: 420px; margin-left: auto; margin-right: auto;
}
.gate-fine { margin-top: 14px; font-size: 12px; color: var(--faint); }

/* ---------- responsive ---------- */
.banner-short { display: none; }

/* narrow landscape (tablets, phone-landscape): keep the landscape machine,
   slim the journal */
@media (max-width: 1100px) and (min-width: 701px) {
  #stage { grid-template-columns: 1fr 230px; }
  .hl-price { font-size: 48px; }
}

/* portrait / phones: column flow, portrait machine, full-width actions */
@media (max-width: 700px) {
  .banner-long { display: none; }
  .banner-short { display: inline; }
  #devnet-banner { letter-spacing: 0.06em; }

  #stage {
    display: flex; flex-direction: column;
    inset: 30px 0 0 0;
  }
  #headline { order: 0; }
  #glass-wrap { order: 1; }
  #rail { order: 2; }
  #journal { order: 3; }
  #headline {
    position: static;
    padding: 14px 18px 6px;
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  }
  .hl-label { font-size: 10px; width: 100%; }
  .hl-price { font-size: 40px; line-height: 1; }
  .hl-sub { margin-top: 0; }
  .hl-sub-val { font-size: 14px; }

  #glass-wrap { flex: 1; min-height: 0; padding: 0 6px; }

  #rail {
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 12px 16px;
    height: auto;
  }
  #rail-title { font-size: 14px; }
  #rail-text { font-size: 12.5px; line-height: 1.45; max-width: none; }
  #rail-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  #rail-actions .btn { width: 100%; padding: 13px 16px; }
  .race-chip { text-align: center; min-width: 0; }

  #journal {
    max-height: 158px;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  #journal-head { padding: 10px 16px 6px; }
  #journal-tape { padding: 0 16px 10px; }
  #journal-tape li { padding: 7px 0; font-size: 10.5px; }

  .gate-card { padding: 24px; }
  .gate-card h1 { font-size: 32px; }
  .gate-tag { font-size: 13.5px; }
}