/* athex.css — dark pixel terminal, lit from behind by the backdrop. */

:root {
  --accent: #2ff0ff;
  --accent-soft: rgba(47, 240, 255, 0.16);
  --ink: #dbe7f5;
  --ink-dim: #7c8ba6;
  --ink-faint: #4d5a72;
  --panel: rgba(6, 10, 22, 0.82);
  --panel-solid: #060a16;
  --edge: rgba(120, 170, 220, 0.16);
  --edge-lit: rgba(47, 240, 255, 0.5);
  --danger: #ff5a5a;
  --ok: #6bff9e;
  --dim: 0.55;
  /* The reading column. Chrome spans the viewport; content lines up inside. */
  --col: 940px;
  --gutter: clamp(10px, 2.5vw, 22px);
  --msg-size: 16px;
  --px: "Press Start 2P", "Silkscreen", ui-monospace, monospace;
  --term: "Silkscreen", "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --read: "VT323", "Silkscreen", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Several elements below set a display value, which would otherwise win
   against the hidden attribute. Panels are toggled with .hidden throughout. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: #04060e;
  color: var(--ink);
  font-family: var(--term);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

body { text-rendering: geometricPrecision; }

/* ------------------------------------------------------------- backdrop */

#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Cover rather than stretch: in portrait the scene is much wider than the
     viewport, and stretching it would smear the skyline sideways. */
  object-fit: cover;
  /* The scene is authored at 180px tall; this is what keeps the pixels hard. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* A wash of black over the art so text stays readable; the dim slider drives it. */
#backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #01030a;
  opacity: var(--dim);
  pointer-events: none;
}

.scanlines, .vignette, .grain { position: absolute; inset: 0; pointer-events: none; }

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.34) 0px, rgba(0, 0, 0, 0.34) 1px,
    rgba(0, 0, 0, 0) 1px,  rgba(0, 0, 0, 0) 3px
  );
  opacity: 0.4;
  z-index: 3;
}
body.no-scan .scanlines { display: none; }

.vignette {
  z-index: 4;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.72) 100%);
}

.grain {
  z-index: 2;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* Every scrolling surface, not just the message stream. Left alone, the
   settings drawer and the lobby fall back to the platform scrollbar, arrow
   buttons and all, which is jarring against the rest of this. */
.veil,
#stream,
#settings {
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.veil::-webkit-scrollbar,
#stream::-webkit-scrollbar,
#settings::-webkit-scrollbar { width: 8px; }

.veil::-webkit-scrollbar-track,
#stream::-webkit-scrollbar-track,
#settings::-webkit-scrollbar-track { background: transparent; }

.veil::-webkit-scrollbar-thumb,
#stream::-webkit-scrollbar-thumb,
#settings::-webkit-scrollbar-thumb { background: var(--edge); }

.veil::-webkit-scrollbar-thumb:hover,
#stream::-webkit-scrollbar-thumb:hover,
#settings::-webkit-scrollbar-thumb:hover { background: var(--edge-lit); }

/* The little arrow buttons at each end. */
.veil::-webkit-scrollbar-button,
#stream::-webkit-scrollbar-button,
#settings::-webkit-scrollbar-button { display: none; }

/* ---------------------------------------------------------------- veils */

.veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  overflow-y: auto;
  background: radial-gradient(90% 70% at 50% 40%, rgba(2,4,10,0.55), rgba(2,4,10,0.9));
  animation: fade-in 0.5s ease both;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: 100%;
  max-width: 480px;
  padding: 28px 26px 24px;
  background: var(--panel);
  border: 1px solid var(--edge);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 0 42px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(47, 240, 255, 0.035);
  backdrop-filter: blur(3px);
  /* Corner notches — cheap, and it reads as a HUD frame rather than a card. */
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px), 0 10px
  );
}

.door-panel { max-width: 380px; text-align: center; }

.sigil {
  font-size: 26px;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent);
  animation: throb 3.4s ease-in-out infinite;
}
@keyframes throb { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.wordmark {
  font-family: var(--px);
  font-size: 26px;
  letter-spacing: 5px;
  margin: 12px 0 6px;
  color: #eef7ff;
  text-shadow:
    0 0 6px var(--accent),
    0 0 22px rgba(47, 240, 255, 0.45),
    2px 2px 0 rgba(0, 0, 0, 0.9);
}

.lobby-head { text-align: center; margin-bottom: 18px; }

.subtitle {
  font-family: var(--term);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--ink-dim);
  margin: 0 0 4px;
  text-transform: lowercase;
}

/* One plain sentence carries the lobby; the detail lives behind the toggle. */
.blurb {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-dim);
  text-align: center;
}
.blurb em { color: var(--ink); font-style: normal; font-weight: 700; }

.lbl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lbl-row .lbl { margin-bottom: 7px; }

.linkbtn {
  padding: 0;
  font-family: var(--term);
  font-size: 12.5px;
  letter-spacing: 1px;
  color: var(--ink-dim);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--ink-faint);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.linkbtn:hover { color: var(--accent); border-bottom-color: var(--accent); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.how { margin-top: 20px; }
.how summary {
  font-family: var(--term);
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
  text-align: center;
  padding: 6px;
  transition: color 0.18s;
}
.how summary::-webkit-details-marker { display: none; }
/* Plain ASCII marks: the pixel fonts have no geometric-shape glyphs. */
.how summary::after { content: "  +"; }
.how[open] summary::after { content: "  -"; }
.how summary:hover { color: var(--ink-dim); }
.how .ledger { margin: 10px 0 0; }

.ledger {
  list-style: none;
  counter-reset: l;
  margin: 0 0 20px;
  padding: 14px 14px 14px 16px;
  border-left: 2px solid var(--edge-lit);
  background: rgba(255, 255, 255, 0.022);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.ledger li { counter-increment: l; margin-bottom: 6px; }
.ledger li:last-child { margin-bottom: 0; }
.ledger li::before {
  content: "0" counter(l) " ";
  color: var(--accent);
  font-family: var(--px);
  font-size: 8px;
  margin-right: 8px;
  opacity: 0.85;
}
.ledger b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------- controls */

.lbl {
  display: block;
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--ink-faint);
  margin: 16px 0 7px;
  text-transform: uppercase;
}

.field {
  width: 100%;
  padding: 12px 12px;
  color: var(--ink);
  background: rgba(2, 5, 12, 0.75);
  border: 1px solid var(--edge);
  border-radius: 0;
  font-family: var(--term);
  font-size: 15px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus {
  border-color: var(--edge-lit);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 18px rgba(47,240,255,0.14);
}

.row { display: flex; gap: 8px; align-items: stretch; }
.row .field { flex: 1; min-width: 0; }

.btn {
  font-family: var(--px);
  font-size: 9px;
  letter-spacing: 2px;
  padding: 11px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge);
  cursor: pointer;
  transition: transform 0.08s, background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--edge-lit); color: #fff; background: rgba(47,240,255,0.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn.primary {
  color: #02121a;
  background: var(--accent);
  border-color: var(--accent);
  text-shadow: none;
  box-shadow: 0 0 20px rgba(47, 240, 255, 0.35);
}
.btn.primary:hover { background: #7df6ff; color: #02121a; }
.btn.ghost { background: transparent; color: var(--ink-dim); }
.btn.danger { color: var(--danger); border-color: rgba(255, 90, 90, 0.4); }
.btn.danger:hover { background: rgba(255, 90, 90, 0.12); color: #ffb3b3; border-color: var(--danger); }
.btn.wide { width: 100%; margin-top: 14px; padding: 13px; }
.btn.icon { font-size: 13px; font-family: var(--term); padding: 10px 12px; line-height: 1; }

.meter-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.meter {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transition: width 0.25s ease, background 0.25s;
}

.hint { font-size: 13px; color: var(--ink-faint); letter-spacing: 1px; margin: 0; }
.status { margin-top: 12px; min-height: 18px; text-align: center; }
.status.working { color: var(--accent); }
.error { color: var(--danger); font-size: 13px; min-height: 18px; margin: 12px 0 0; letter-spacing: 1px; }

.fineprint {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
}

/* ----------------------------------------------------------------- room */

#room {
  position: relative;
  z-index: 10;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Every row runs the full width of the screen so backgrounds, borders and the
   scrollbar reach the edges, while this padding parks the content itself in a
   centred column. One formula on every row keeps them all on the same
   left and right edges. */
.bar,
#stream,
.typing,
#composer {
  padding-inline: max(var(--gutter), calc((100% - var(--col)) / 2));
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px 10px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(3, 6, 14, 0.92), rgba(3, 6, 14, 0.55));
  backdrop-filter: blur(6px);
}
.bar-left, .bar-right { display: flex; align-items: center; gap: 9px; }

.brand {
  font-family: var(--px);
  font-size: 12px;
  letter-spacing: 4px;
  color: #eef7ff;
  text-shadow: 0 0 10px var(--accent);
}
.sep { color: var(--ink-faint); }
.tag { font-size: 13px; color: var(--accent); letter-spacing: 2px; opacity: 0.85; }

.chip {
  font-size: 12px;
  padding: 3px 8px;
  color: var(--ink-dim);
  border: 1px solid var(--edge);
  letter-spacing: 1px;
}

.dot {
  width: 8px; height: 8px;
  background: var(--ink-faint);
  box-shadow: 0 0 8px currentColor;
  transition: background 0.3s;
}
.dot.live { background: var(--ok); }
.dot.down { background: var(--danger); animation: throb 1s ease-in-out infinite; }

/* --------------------------------------------------------------- stream */

#stream {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-block: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overscroll-behavior: contain;
}

/* Each message is a column: the byline above, the bubble below. Mine flip to
   the right. Nothing sits behind them but the artwork, so the bubble itself
   has to carry every bit of the contrast. */
.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  animation: land 0.22s ease both;
  transition: opacity 0.6s;
}
@keyframes land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg.mine { align-items: flex-end; }
.msg.grouped .who { display: none; }

.who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 3px 1px;
  font-family: var(--px);
  font-size: 8.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* Bylines sit straight on the artwork, so they need their own legibility. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
}

.who .fp {
  font-family: var(--term);
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.5;
  text-transform: none;
}
.who .stamp {
  font-family: var(--term);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-faint);
}
body.no-stamps .stamp { display: none; }

.body {
  display: block;
  max-width: min(560px, 76%);
  padding: 9px 13px 10px;
  font-family: var(--read);
  font-size: var(--msg-size);
  line-height: 1.5;
  color: var(--ink);
  background: rgba(4, 8, 18, 0.84);
  border: 1px solid var(--edge);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.msg.mine .body {
  background: rgba(9, 26, 38, 0.84);
  /* Tints with whichever backdrop is loaded, rather than a fixed cyan. */
  background: color-mix(in srgb, var(--accent) 13%, rgba(4, 8, 18, 0.88));
  border-color: var(--edge-lit);
}

.body a { color: var(--accent); text-underline-offset: 3px; }

.msg.fading { opacity: 0.4; }

.msg .unverified {
  color: #ffb020;
  font-size: 10px;
}

/* Divider rules either side of the label, rather than dashes in the string. */
.msg.system {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 14px 0 6px;
  font-family: var(--term);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink-faint);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.msg.system::before,
.msg.system::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--edge-lit), transparent);
  opacity: 0.5;
}

.msg.broken {
  padding: 9px 13px;
  font-family: var(--term);
  font-size: 12.5px;
  letter-spacing: 1px;
  color: var(--danger);
  background: rgba(20, 4, 8, 0.82);
  border: 1px solid rgba(255, 90, 90, 0.35);
  backdrop-filter: blur(4px);
}

.typing {
  min-height: 17px;
  padding-block: 0 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- composer */

#composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-block: 12px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--edge);
  background: linear-gradient(to top, rgba(3, 6, 14, 0.94), rgba(3, 6, 14, 0.5));
  backdrop-filter: blur(6px);
}

#input {
  flex: 1;
  resize: none;
  max-height: 150px;
  padding: 12px 13px;
  color: var(--ink);
  background: rgba(2, 5, 12, 0.72);
  border: 1px solid var(--edge);
  font-family: var(--read);
  font-size: calc(var(--msg-size) + 1px);
  line-height: 1.4;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
#input::placeholder { color: var(--ink-faint); }
#input:focus {
  border-color: var(--edge-lit);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 20px rgba(47,240,255,0.12);
}
#send { padding: 13px 18px; font-size: 12px; }

/* ------------------------------------------------------------- settings */

#settings {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  width: min(330px, 88vw);
  height: 100dvh;
  overflow-y: auto;
  padding: 18px 20px 40px;
  background: rgba(4, 7, 16, 0.95);
  border-left: 1px solid var(--edge-lit);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  animation: slide-in 0.22s ease both;
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }

.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings-head h2 {
  font-family: var(--px);
  font-size: 11px;
  letter-spacing: 3px;
  margin: 6px 0;
  color: var(--accent);
}

.group {
  font-family: var(--px);
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--ink-faint);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--edge);
}

.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.swatch {
  position: relative;
  padding: 9px 9px 10px;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge);
  transition: border-color 0.18s, background 0.18s, transform 0.08s;
}
.swatch:hover { background: rgba(255, 255, 255, 0.07); }
.swatch:active { transform: translateY(1px); }
.swatch[aria-pressed="true"] {
  border-color: var(--sw, var(--accent));
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.05), 0 0 14px rgba(0,0,0,0.6);
}
.swatch .bead {
  display: block;
  width: 100%;
  height: 4px;
  margin-bottom: 7px;
  background: var(--sw);
  box-shadow: 0 0 10px var(--sw);
}
.swatch .name {
  display: block;
  font-family: var(--px);
  font-size: 7.5px;
  letter-spacing: 1px;
  color: var(--ink);
  line-height: 1.5;
}
.swatch .blurb {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.3;
}

.ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink-dim);
}
.ctl input[type="range"] { flex: 1; max-width: 60%; accent-color: var(--accent); }
.ctl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  /* Centred with auto margins rather than translateX(-50%), because the land
     animation settles on transform:none and would wipe the centering out. */
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  bottom: 84px;
  z-index: 60;
  text-align: center;
  padding: 10px 16px;
  font-family: var(--px);
  font-size: 8.5px;
  letter-spacing: 2px;
  color: #02121a;
  background: var(--accent);
  box-shadow: 0 0 26px rgba(47, 240, 255, 0.4);
  animation: land 0.2s ease both;
}
.toast.bad { background: var(--danger); color: #1a0202; box-shadow: 0 0 26px rgba(255,90,90,0.4); }

/* --------------------------------------------------------------- mobile */

@media (max-width: 560px) {
  .wordmark { font-size: 20px; letter-spacing: 3px; }
  .panel { padding: 22px 18px; }
  .theme-grid { grid-template-columns: 1fr; }
  .brand { font-size: 10px; letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}