/* ==========================================================================
   DOS mode (/dos). One self-contained stylesheet for dos-layout.php.

   The type is VT323, the same file the main site's hero tagline uses. It is a
   224-glyph subset with no box-drawing or block characters, so everything
   drawn on screen here is plain ASCII or a CSS border.
   ========================================================================== */

@font-face {
  font-family: "VT323";
  src: url("/assets/fonts/VT323-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Phosphors ---------------------------------------------------------
   COLOR switches these by setting data-theme on <html>. */
:root {
  --bg: #020a04;
  --fg: #33ff66;
  --fg-dim: #1f9a40;
  --fg-bright: #c9ffd8;
  --glow: rgba(51, 255, 102, 0.42);
  --dir: #7df9ff;
  --prog: #ffb000;
  --link: #9dffb4;
  --bar-ink: #00210a;
}
:root[data-theme="amber"] {
  --bg: #0b0600;
  --fg: #ffb000;
  --fg-dim: #a86f00;
  --fg-bright: #ffe2a0;
  --glow: rgba(255, 176, 0, 0.42);
  --dir: #fff1c9;
  --prog: #ff7a3c;
  --link: #ffd27a;
  --bar-ink: #1f1300;
}
:root[data-theme="grey"] {
  --bg: #000000;
  --fg: #b8b8b8;
  --fg-dim: #6f6f6f;
  --fg-bright: #ffffff;
  --glow: rgba(255, 255, 255, 0.16);
  --dir: #55ffff;
  --prog: #ffff55;
  --link: #5599ff;
  --bar-ink: #000000;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  overscroll-behavior: none;
}

/* About 40 characters across a phone and 80 or more on a desktop. VT323's
   characters are 0.4em wide, hence the 16: forty of them. */
.dos {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "VT323", "Courier New", Courier, monospace;
  font-size: clamp(20px, calc((100vw - 16px) / 16), 24px);
  line-height: 1.08;
  text-shadow: 0 0 5px var(--glow);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5em 8px 0.25em;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
  -webkit-overflow-scrolling: touch;
}
.screen[hidden], .stage[hidden], .input-line[hidden] { display: none; }

.line {
  min-height: 1.08em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Prose reads badly past about 80 columns, however wide the monitor. A
   listing is a table, though, and can use the room for its titles. */
#out > .line { max-width: 84ch; }
#out > .dir-row { max-width: none; }

.upper { text-transform: uppercase; }
.dim { color: var(--fg-dim); }
.prompt { white-space: pre; }

.h1, .h2, .h3 { color: var(--fg-bright); }
.h1 { border-bottom: 3px double var(--fg-dim); padding-bottom: 1px; width: fit-content; max-width: 100%; }
.h2 { border-bottom: 1px solid var(--fg-dim); width: fit-content; max-width: 100%; }

a { color: inherit; }
.link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hot {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hot:hover, .hot:active {
  background: var(--fg);
  color: var(--bar-ink);
  text-shadow: none;
}
.t-d { color: var(--dir); }
.t-x, .t-u { color: var(--prog); }
.t-i, .pic { color: var(--fg-bright); }
.more .hot { background: var(--fg); color: var(--bar-ink); text-shadow: none; padding: 0 1ch; }

/* ---- Directory listings ------------------------------------------------ */
.dir-row { display: flex; flex-wrap: nowrap; }
.dir-row > * { flex: 0 0 auto; white-space: pre; }
.dir-row .n { width: 13ch; }
.dir-row .s { width: 10ch; text-align: right; }
.dir-row .d { width: 12ch; padding-left: 2ch; }
.dir-row .ti {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 2ch;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-wide { display: flex; flex-wrap: wrap; }
.dir-wide .w { width: 16ch; }
.help-row .hot { white-space: pre; }

/* On a phone the title drops to its own line under the name. */
@media (max-width: 640px) {
  .dir-row { flex-wrap: wrap; margin-bottom: 0.15em; }
  .dir-row .ti { flex-basis: 100%; padding-left: 2ch; white-space: normal; overflow: visible; }
  .dir-row .ti:empty { display: none; }
}

/* ---- The prompt line ----------------------------------------------------
   The real input is invisible and laid over the line; #typed mirrors it so
   the cursor can be a block. 16px keeps iOS from zooming in on focus. */
.input-line {
  position: relative;
  display: flex;
  margin: 0;
  min-height: 1.08em;
}
.typed { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#cmd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  opacity: 0;
  font-size: 16px;
  outline: none;
}
.cursor { outline: 1px solid var(--fg); outline-offset: -1px; }
.is-focused .cursor {
  background: var(--fg);
  color: var(--bar-ink);
  text-shadow: none;
  outline: 0;
  animation: dos-blink 1.06s steps(1) infinite;
}
@keyframes dos-blink { 50% { background: transparent; color: inherit; } }

/* ---- Function-key bar ---------------------------------------------------- */
.fkeys {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0 0.5ch;
  padding: 2px 8px calc(2px + env(safe-area-inset-bottom));
  background: var(--bg);
}
.fkeys:empty { display: none; }
.fkey {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-shadow: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fkey b { font-weight: 400; padding-right: 0.25ch; }
.fkey span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0.5ch;
  background: var(--fg);
  color: var(--bar-ink);
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
}
.fkey:hover span, .fkey:active span { background: var(--fg-bright); }
@media (max-width: 640px) {
  .fkeys { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px 0.5ch; padding-top: 4px; }
  .fkey span { padding-top: 2px; padding-bottom: 2px; }
}

/* ---- Full-screen programs ------------------------------------------------ */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5em 8px;
}

.viewer { display: flex; flex-direction: column; overflow: hidden; }
.viewer-head { color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.3em 0;
  border: 1px solid var(--fg-dim);
  background: #000;
  cursor: pointer;
}
.viewer-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.viewer-note { position: absolute; left: 1ch; top: 0.3em; }
.viewer-caption { min-height: 1.08em; color: var(--fg-dim); }

/* ---- Lehigh Valley Adventure message types -------------------------------- */
.msg-location-name { color: #ffd700; letter-spacing: 0.05em; text-shadow: 0 0 8px #ffd700; }
.msg-location { color: #e0e0e0; text-shadow: 0 0 4px rgba(255, 255, 255, 0.3); }
.msg-divider { color: var(--fg-dim); text-shadow: none; }
.msg-npc { color: #00ffff; text-shadow: 0 0 6px #00ffff; }
.msg-quest { color: #ffd700; text-shadow: 0 0 8px #ffd700; }
.msg-combat { color: #ff8c00; text-shadow: 0 0 6px #ff8c00; }
.msg-combat-hit { color: #ff4444; text-shadow: 0 0 8px #ff4444; }
.msg-item { color: #00ffaa; text-shadow: 0 0 5px #00ffaa; }
.msg-system { color: var(--fg-dim); }
.msg-win { color: #ffd700; text-shadow: 0 0 8px #ffd700, 0 0 16px #ff8c00; }

/* ---- DEFRAG ----------------------------------------------------------------- */
.defrag-screen {
  max-width: 760px;
  margin: 0.4em auto;
  padding: 12px 14px 14px;
  border: 1px solid #1c5f1c;
  box-shadow: inset 0 0 0 1px #0a280a;
  background: linear-gradient(180deg, rgba(0, 48, 0, 0.45), rgba(0, 0, 0, 0.55)), #020702;
}
.defrag-title, .defrag-subtitle, .defrag-stats,
.defrag-status-line, .defrag-detail-line, .defrag-progress-line { margin-bottom: 6px; }
.defrag-title { color: #d8ffd8; text-transform: uppercase; letter-spacing: 0.08em; }
.defrag-subtitle, .defrag-stats, .defrag-detail-line { color: #8fd48f; text-shadow: 0 0 4px rgba(143, 212, 143, 0.45); }
.defrag-status-line, .defrag-progress-line { color: #c5f7c5; }
.defrag-map {
  display: grid;
  gap: 2px;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #184c18;
  background: rgba(0, 0, 0, 0.45);
}
.defrag-block { aspect-ratio: 1 / 1; min-height: 10px; border: 1px solid rgba(0, 0, 0, 0.45); }
.defrag-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; color: #9fda9f; }
.defrag-legend span { display: inline-flex; align-items: center; gap: 6px; }
.defrag-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, 0.55); }
.defrag-block.is-contiguous, .defrag-swatch.is-contiguous { background: #14a414; }
.defrag-block.is-fragmented, .defrag-swatch.is-fragmented {
  background: repeating-linear-gradient(45deg, #c9c93a 0 3px, #707000 3px 6px);
}
.defrag-block.is-system, .defrag-swatch.is-system { background: #2266c2; }
.defrag-block.is-unmovable, .defrag-swatch.is-unmovable { background: #8c3cbc; }
.defrag-block.is-empty, .defrag-swatch.is-empty { background: #0d170d; border-color: #153015; }
.defrag-block.is-active-scan { outline: 1px solid #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.55); }
@media (max-width: 640px) {
  .defrag-screen { padding: 10px; }
  .defrag-map { gap: 1px; padding: 6px; }
}

/* ---- NIBBLES ---------------------------------------------------------------- */
.nibbles { touch-action: none; }
.nibbles-title, .nibbles-instructions, .nibbles-stats, .nibbles-message {
  max-width: 620px;
  margin: 0 auto 8px;
  text-align: center;
}
.nibbles-title { color: #d8ffd8; letter-spacing: 0.18em; }
.nibbles-instructions, .nibbles-message { color: #98d698; min-height: 1.08em; }
.nibbles-stats { color: #c5f7c5; }
.nibbles-board {
  width: min(620px, 100%);
  margin: 0 auto 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 1px;
  border: 1px solid #1c5f1c;
  box-shadow: inset 0 0 0 1px #0a280a;
  background: linear-gradient(180deg, rgba(0, 48, 0, 0.35), rgba(0, 0, 0, 0.55)), #020702;
}
.nibbles-cell { aspect-ratio: 1 / 1; background: #081008; }
.nibbles-cell.is-body { background: #18a818; }
.nibbles-cell.is-head { background: #b7ff7a; box-shadow: 0 0 5px rgba(183, 255, 122, 0.55); }
.nibbles-cell.is-food { background: #ffcf40; box-shadow: 0 0 6px rgba(255, 207, 64, 0.55); }

/* ---- Odds and ends ---------------------------------------------------------- */
/* Hidden because CONTACT prints the notice Google requires in its place. */
.grecaptcha-badge { visibility: hidden !important; }

.dos-noscript { padding: 1em; font-family: "Courier New", Courier, monospace; }
.dos-noscript a { color: var(--link); }

::selection { background: var(--fg); color: var(--bar-ink); text-shadow: none; }

/* ---- CRT ----------------------------------------------------------------------
   Scanlines and a vignette over everything, plus an occasional flicker. The
   overlays ignore the pointer so the terminal underneath stays usable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.2) 3px,
    rgba(0, 0, 0, 0) 4px
  );
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3001;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 100%);
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  93% { opacity: 0.9; }
  94% { opacity: 1; }
  97% { opacity: 0.96; }
  98% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .screen { animation: crt-flicker 7s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .is-focused .cursor { animation: none; }
}