@font-face {
  font-family: "EP Terminal";
  src: url("fonts/ep-terminal.woff2") format("woff2");
  font-display: block;
}

:root {
  /* Elysium's mark: deep sea blue to pale aqua, on black */
  --bg: #0a0c0e;
  --fg: #dce9e8;
  --dim: #5d7177;
  --faint: #2a383d;
  --strip: #131b1e;
  --soft: #97aaae;
  --accent: #6cc3cf;
  --ok: #6fd3b8;
  --err: #e0727c;
  --px: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg);
  font: var(--px) / 1.5 "EP Terminal", ui-monospace, monospace;
  -webkit-font-smoothing: none;
}
img { image-rendering: pixelated; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dim { color: var(--dim); }

/* the header: logo, the mint count, one accent button */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px;
  padding: 12px 28px; background: var(--bg); border-bottom: 2px solid var(--strip); }
.logo { display: block; width: 178px; height: auto; } /* 2× the 89px art */
.status { margin-left: auto; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s steps(3); }
.status:has(.minted:empty) { visibility: hidden; opacity: 0; }
.minted { color: var(--fg); }
/* while the wallet is on another network, a strip along the bottom of the header offers the switch */
.top:has(.net:not([hidden])) { flex-wrap: wrap; row-gap: 12px; }
.net { order: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  flex-basis: calc(100% + 56px); margin: 0 -28px -12px; padding: 8px 28px; background: color-mix(in srgb, var(--err) 14%, var(--bg)); }
.net[hidden] { display: none; }
.net span::before { content: "● "; color: var(--err); }
.btn, .action { padding: 2px 12px; background: var(--accent); color: var(--bg); box-shadow: 0 3px 0 #2b6f8c; white-space: nowrap; }
.btn:hover, .action:hover { background: #b8ecef; }
.btn:active, .action:active { translate: 0 3px; box-shadow: none; }
/* the address and "disconnect" share one cell, so the button keeps its width when they swap */
.cta.on { display: grid; }
.cta.on span { grid-area: 1 / 1; }
.cta.on span + span, .cta.on:is(:hover, :focus-visible) span:first-child { visibility: hidden; }
.cta.on:is(:hover, :focus-visible) span + span { visibility: visible; }

.term { flex: 1; width: 100%; max-width: 860px; padding: 32px 28px 24px; }

.log .row { white-space: pre-wrap; overflow-wrap: anywhere; }
/* each command starts a block: the echoed line sits on a strip, like a terminal prompt */
.log .you { margin: 32px -12px 12px; padding: 3px 12px; background: var(--strip); color: var(--fg); }
.log .you:first-child { margin-top: 0; }
.log .head { margin-top: 16px; color: var(--dim); text-transform: uppercase; }
.log .head.first { margin-top: 0; }
.log .gap { margin-top: 12px; }
.log .step { padding-left: 5ch; text-indent: -3ch; }
.log .q { margin-top: 16px; color: var(--fg); }
.log .you + .q { margin-top: 0; }
.log .q::before { content: "? "; color: var(--accent); }
.log .a { padding-left: 2ch; color: var(--soft); }
.log .you::before { content: "> "; color: var(--dim); }
.log .ok::before { content: "● "; color: var(--ok); }
.log .err::before { content: "● "; color: var(--err); }
.log .info { padding-left: 4ch; text-indent: -2ch; color: var(--dim); }
.log .info::before { content: "└ "; }
.log .spin { color: var(--accent); }
.log b { font-weight: inherit; color: var(--fg); }
.log code { font: inherit; color: var(--accent); }
.log a { color: var(--accent); text-underline-offset: 4px; }
.log .action { margin: 8px 0 4px; }
.log .choices button { color: var(--fg); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; }
.log .choices button:hover, .log .choices .picked { color: var(--accent); }
.log .choices.done button:not(.picked) { color: var(--dim); text-decoration: none; cursor: default; }

.punks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.punks figure { margin: 0; width: 48px; text-align: center; color: var(--dim); font-size: 12px; line-height: 2; }
.punks img { display: block; width: 48px; height: 48px; background: var(--strip); cursor: zoom-in; animation: pop .3s steps(3) both; }
.punks img:not([src]) { cursor: default; }
.punks img:hover { outline: 2px solid var(--accent); }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }

/* the input is invisible; .typed, .cursor and .ghost draw the line */
.prompt { position: relative; display: block; margin: 32px -12px 0; padding: 3px 12px; background: var(--strip); overflow-wrap: anywhere; cursor: text; }
.typed, .ghost { white-space: pre-wrap; }
.caret { color: var(--dim); margin-right: 1ch; }
.cursor { display: inline-block; width: 1ch; height: 1.1em; vertical-align: -.2em; background: var(--fg); animation: blink 1.06s steps(1) infinite; }
.prompt:not(.focus) .cursor { background: transparent; box-shadow: inset 0 0 0 2px var(--dim); animation: none; }
.prompt.busy .cursor { animation: none; background: var(--dim); }
@keyframes blink { 50% { background: transparent; } }
.ghost { color: var(--faint); }
.prompt.busy .ghost { visibility: hidden; }
.prompt input {
  position: absolute; inset: 0; width: 100%; opacity: 0;
  font-size: 16px; /* keeps iOS from zooming in */
  border: 0; padding: 0; background: none; color: transparent; caret-color: transparent;
}

.hint { margin-top: 10px; }
.hint button { color: var(--fg); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; }
.hint button:hover { color: var(--accent); text-decoration-color: currentColor; }
.term.busy .hint { visibility: hidden; }

.viewer { padding: 16px; border: 2px solid var(--faint); background: var(--bg); color: var(--fg); }
.viewer::backdrop { background: rgba(4, 8, 10, .82); }
.viewer img { display: block; width: min(384px, 80vw); height: auto; }
.viewer-bar { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.viewer-name { margin-right: auto; }
.viewer-save { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.viewer-close { color: var(--dim); }
.viewer-close:hover { color: var(--fg); }

.foot { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 0 28px 18px; font-size: 12px; line-height: 2; }
.foot a { text-decoration: none; }
.foot a:hover, .ca:hover { color: var(--fg); }

@media (max-width: 860px) {
  .top { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .logo { width: 89px; }
  .status { order: 5; flex-basis: 100%; margin-left: 0; }
  .net { flex-basis: calc(100% + 32px); margin: 0 -16px -12px; padding: 8px 16px; }
  .cta { margin-left: auto; }
  .term { padding: 24px 16px 16px; }
  .foot { padding: 0 16px 16px; }
}