@font-face {
  font-family: "Glass TTY";
  src: url("/fonts/Glass_TTY_VT220.ttf") format("truetype");
  font-display: swap;
}
:root {
  --bg: #000;
  --fg: #f2f2f2;
  --dim: #8a8a8a;
  --fs: 20px;
  --col: 84ch;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: "Glass TTY", "Lucida Console", "Courier New", monospace;
  font-size: var(--fs);
  line-height: 1.3;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  min-height: 100dvh;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
.screen { max-width: var(--col); margin: 0 auto; }
.line { margin: 0 0 0.35em; }
.conn { color: var(--fg); }
.title { font-size: inherit; font-weight: normal; margin: 0 0 0.8em; }
.title #name, .title #ticker { font-weight: normal; }

.splash { margin: 0.4em 0 1em; }
.splash img { display: block; width: 100%; height: auto; max-height: 48vh; object-fit: contain; object-position: center; }
@media (max-width: 700px) {
  .splash img { max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }
}

.notice { margin: 0 0 1em; padding: 0 0 0 3ch; }
.notice li { margin: 0 0 0.3em; }
.notice li::marker { color: var(--fg); }

.status { margin-bottom: 0.35em; }

.desk { margin: 1em 0 1.2em; padding-top: 0.6em; border-top: 2px dotted var(--dim); }
.mint { display: flex; flex-wrap: wrap; gap: 0 1ch; align-items: baseline; margin-bottom: 0.6em; }
.mint .k { color: var(--dim); }
.ca { overflow-wrap: anywhere; user-select: all; }
.key, .enter {
  font: inherit; color: var(--fg); background: none; border: 0; padding: 0.5em 0.2em; margin: -0.5em 0; cursor: pointer;
  min-height: 48px; text-decoration: none;
}
.key:hover, .enter:hover { text-decoration: underline; }
.key:disabled { color: var(--dim); cursor: default; text-decoration: none; }
.key:focus-visible, .enter:focus-visible, .tag:focus-visible, #in:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em 2.5ch; }
.tag { display: inline-flex; align-items: center; gap: 0.6ch; color: var(--fg); text-decoration: none; min-height: 56px; padding: 4px 0; }
.tag:hover .w, .tag:focus-visible .w { text-decoration: underline; }
.tag:active { transform: translate(1px, 1px); }
.tag[aria-disabled="true"] { color: var(--dim); cursor: default; }
.tag[aria-disabled="true"]:hover .w { text-decoration: none; }
.tag[aria-disabled="true"]:active { transform: none; }
.tag[aria-disabled="true"] .fob { opacity: 0.45; }
.fob { position: relative; width: 72px; height: 72px; flex: 0 0 auto; }
.fobimg { position: absolute; inset: 0; width: 72px; height: 72px; image-rendering: pixelated; }
/* the mark sits on the fob's blank face (the face is left of centre, low) */
.mark { position: absolute; left: 15px; top: 28px; width: 26px; height: 26px; object-fit: contain; }
.mark.x { left: 17px; top: 30px; width: 22px; height: 22px; }
.w { display: inline-flex; flex-direction: column; line-height: 1.15; }
.w small { font-size: 0.8em; color: var(--dim); }
.tag:not([aria-disabled="true"]) .w small { display: none; }

.log { margin: 0 0 0.35em; }
.log p { margin: 0 0 0.35em; overflow-wrap: anywhere; }
.log .you { color: var(--dim); }
.log .err { color: #ffb3b3; }

.prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1ch; margin: 0; position: sticky; bottom: 0; background: var(--bg); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.prompt label { margin: 0; }
.field { position: relative; display: inline-flex; align-items: center; flex: 1 1 12ch; min-width: 12ch; }
#in {
  font: inherit; color: var(--fg); background: none; border: 0; padding: 6px 0; width: 100%; min-height: 44px;
  caret-color: transparent; outline: none;
}
#in:focus-visible { outline: none; }
.field:focus-within .cursor { visibility: visible; }
.cursor {
  position: absolute; left: var(--cx, 0); top: 50%; width: 1ch; height: 1.1em; margin-top: -0.55em; background: var(--fg);
  visibility: hidden; pointer-events: none; animation: blink 1s steps(1) infinite;
}
.enter { margin-left: auto; }
@media (min-width: 701px) { .enter { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
@keyframes blink { 50% { opacity: 0; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hotel { position: fixed; inset: 0; background: #000; z-index: 10; }
.hotel iframe { width: 100%; height: 100%; border: 0; display: block; }
.hotel .leave { position: absolute; top: 8px; left: 8px; }

@media (max-width: 420px) {
  :root { --fs: 18px; }
  body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .tags { flex-direction: column; gap: 0.2em; }
}
@media (min-width: 1600px) { :root { --fs: 22px; } }