/* jmi6.com: an empty phosphor terminal. Black plus shades of one colour.
   Style guide: github.com/jake-ingram/wipi-mon docs/RETRO-UI.md */
@font-face { font-family: "GlassTTY"; src: url("/fonts/Glass_TTY_VT220.ttf") format("truetype"); font-display: block; }

:root {
  --g: #33ff33;    /* bright phosphor */
  --mid: #1fae1f;  /* normal */
  --dim: #127a12;  /* dim text, rules */
  --dark: #062b06; /* fills */
  --glow-rgb: 51, 255, 51;
  font-family: "GlassTTY", "Courier New", monospace;
  font-size: 19px;
  line-height: 1.2;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; }
body { color: var(--mid); overflow: hidden; }
::selection { background: var(--g); color: #000; }

/* CRT: glow on text, plus scanlines, vignette and flicker over the whole glass */
body { text-shadow: 0 0 4px rgba(var(--glow-rgb), .55); }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  animation: flicker 4s infinite steps(1);
}
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 83% { opacity: .95; } }

#tty { position: fixed; inset: 0; display: flex; flex-direction: column; padding: max(6px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)); }

/* Page keys, top and bottom like the line-select keys of an FMS CDU. */
.fkeys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#keysTop { border-bottom: 2px solid var(--mid); padding-bottom: 6px; margin-bottom: 4px; }
#keysBottom { border-top: 2px solid var(--mid); padding-top: 6px; margin-top: 4px; }
.fkeys button { font: inherit; font-size: 1.15em; min-height: 46px; background: none; border: 1px solid var(--dim); padding: 0 4px;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden;
  color: var(--mid); cursor: pointer; text-shadow: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.fkeys button span { font-size: .65em; color: var(--dim); margin-right: .4em; }
.fkeys button:hover { border-color: var(--mid); color: var(--g); }
.fkeys button:active, .fkeys button.hit { background: var(--mid); border-color: var(--mid); color: #000; text-shadow: none; }
.fkeys button.on { background: var(--g); border-color: var(--g); color: #000; text-shadow: none; }
.fkeys button.on span { color: #000; }
.fkeys button:focus { outline: 0; }
@media (max-width: 560px) { .fkeys button span { display: none; } }

/* Unlocked pages fill the glass between the keys. */
#screen { flex: 1; min-height: 0; display: flex; flex-direction: column; text-transform: uppercase; }
.ptitle { display: flex; justify-content: space-between; color: var(--g); border-bottom: 1px solid var(--dim); margin-bottom: 4px; }
.ptitle .pn { color: var(--dim); }
.pbody { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.pbody::-webkit-scrollbar { display: none; }
.ln { display: block; white-space: pre-wrap; word-break: break-word; }
.ln.note { color: var(--dim); padding-left: 2ch; }
a.item { color: var(--g); text-decoration: none; cursor: pointer; }
a.item:hover { background: var(--dark); }
a.item:active { background: var(--g); color: #000; text-shadow: none; }

.blink { animation: blink 1s steps(1) infinite; }

/* ASCII hex keypad: docked above the prompt, never modal */
body.pad-open .ttyPrompt { visibility: hidden; }  /* one cursor at a time */
.pad { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; border-top: 1px solid var(--dim); padding: 6px 0 4px; }
.pad .padkeys { margin: 0; font: inherit; font-size: 1.25em; line-height: 1; color: var(--dim); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.pad .pk { color: var(--g); cursor: pointer; }
.pad .pk:hover { text-decoration: underline; }
.pad .pk.hit { background: var(--g); color: #000; text-shadow: none; }
.pad .padside { min-width: 14em; }
.pad .padread { font-size: 2em; color: var(--g); letter-spacing: .05em; white-space: pre; }
.pad .padmsg { display: inline-block; margin-top: 4px; color: var(--g); }
.pad .padmsg.inv { background: var(--g); color: #000; text-shadow: none; padding: 0 3px; }

/* The prompt: '>', what's been typed, and a blinking block cursor.
   The real input sits invisibly on top so phones still get a keyboard. */
.ttyPrompt { position: relative; display: flex; align-items: center; padding: 4px 0; color: var(--g); white-space: pre; overflow: hidden; cursor: text; }
.ttyPrompt > span:first-child { margin-right: 6px; }
#line { display: flex; justify-content: flex-end; min-width: 0; overflow: hidden; }  /* long input scrolls left, keeping the cursor in view */
.cur { display: inline-block; width: 1ch; height: 1.1em; background: var(--g); flex: none; animation: blink 1s steps(1) infinite; }
.cur.typing { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
#ttyIn { position: absolute; inset: 0; width: 100%; opacity: 0; font: inherit; font-size: 16px; border: 0; padding: 0; background: none; color: transparent; caret-color: transparent; }

@media (max-width: 560px) { .fkeys button { font-size: 1em; } }
@media (max-height: 520px) {
  :root { font-size: 17px; }
  .fkeys button { min-height: 40px; }
  #keysTop { padding-bottom: 4px; }
  #keysBottom { padding-top: 4px; }
  #tty { padding-top: 4px; padding-bottom: 4px; }
}