/* ============================================================
   JOVI — retro tetris stylesheet
   Tetromino palette:
   I=cyan  O=yellow  T=purple  S=green  Z=red  J=blue  L=orange
   ============================================================ */

:root {
  /* midnight arcade — black starfield, deep navy panels,
     bright cyan borders, hot magenta headers, yellow links */
  --bg: #04040c;
  --panel: #0a0a26;
  --border: #23234d;
  --text: #eaeaf6;
  --dim: #9a9ac2;
  --cyan: #00e5ff;
  --pink: #ff3fd8;
  --yellow: #ffd94a;
  --purple: #b06cff;
  --green: #4dff88;
  --red: #ff4d6b;
  --blue: #4d8aff;
  --orange: #ffab4d;
  --px: "Press Start 2P", monospace;
  --term: "VT323", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); }

body {
  font-family: var(--term);
  font-size: 22px;
  color: var(--text);
  overflow-x: hidden;
  /* starfield */
  background-color: var(--bg);
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px, rgba(255,255,255,.95), transparent 55%),
    radial-gradient(1.2px 1.2px at 130px 90px, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1px 1px at 260px 40px, rgba(0,229,255,.8), transparent 55%),
    radial-gradient(1.4px 1.4px at 320px 160px, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1px 1px at 70px 210px, rgba(255,63,216,.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 200px 250px, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 390px 110px, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 160px 320px, rgba(255,255,255,.8), transparent 55%);
  background-size: 420px 380px;
}

/* ============ GALAXY (home page side space) ============ */
.galaxy {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* soft coloured nebula clouds, drifting slowly */
.galaxy::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 38% 24% at 28% 42%, rgba(176, 64, 255, 0.20), transparent 62%),
    radial-gradient(ellipse 34% 20% at 74% 56%, rgba(255, 63, 216, 0.16), transparent 62%),
    radial-gradient(ellipse 44% 30% at 58% 26%, rgba(0, 229, 255, 0.13), transparent 62%),
    radial-gradient(ellipse 30% 40% at 18% 72%, rgba(77, 138, 255, 0.14), transparent 62%),
    radial-gradient(ellipse 26% 34% at 86% 82%, rgba(176, 64, 255, 0.12), transparent 62%);
  filter: blur(36px);
  animation: galaxy-drift 150s ease-in-out infinite alternate;
}
/* faint milky-way band with a brighter core, rotating very slowly */
.galaxy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 46%;
  transform: translate(-50%, -50%) rotate(-24deg);
  transform-origin: center;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255, 255, 255, 0.06), transparent 70%),
    linear-gradient(90deg, transparent, rgba(200, 180, 255, 0.05) 22%, rgba(255, 255, 255, 0.09) 50%, rgba(180, 220, 255, 0.05) 78%, transparent);
  filter: blur(14px);
  animation: galaxy-rotate 300s linear infinite;
}
@keyframes galaxy-drift {
  from { transform: translate(-3%, -2%) scale(1.05); }
  to   { transform: translate(3%, 2%) scale(1.12); }
}
@keyframes galaxy-rotate {
  from { transform: translate(-50%, -50%) rotate(-24deg); }
  to   { transform: translate(-50%, -50%) rotate(336deg); }
}
@media (prefers-reduced-motion: reduce) {
  .galaxy::before, .galaxy::after { animation: none; }
}

/* CRT scanline overlay */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
}

/* full-width page */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0 28px 90px; /* extra bottom room for the fixed donate bar */
}

/* ============ FIXED DONATE BAR (bottom) ============ */
.donate-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  background: #0a0a26;
  border-top: 2px solid var(--pink);
  color: var(--pink);
  font-family: var(--px);
  font-size: clamp(7px, 1.6vw, 10px);
  letter-spacing: 1px;
  text-align: center;
  padding: 11px 12px;
  box-shadow: 0 -4px 16px rgba(255, 63, 216, 0.25);
  word-break: break-all;
}
.donate-addr { color: var(--yellow); }

/* docs page easter egg */
.egg {
  text-align: center;
  color: #3a3a55;
  font-size: 14px;
  margin-top: 26px;
  letter-spacing: 1px;
  transition: color .3s;
}
.egg:hover { color: var(--pink); }

/* ============ 3-COLUMN CONSOLE GRID ============ */
.grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(280px, 360px);
  gap: 26px;
  align-items: start;
}
.col { min-width: 0; }
.col .panel { margin: 0 0 26px; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
}

/* side rails read slightly smaller */
.col-side { font-size: 20px; }

/* ============ TICKER ============ */
.ticker-wrap {
  overflow: hidden;
  border-bottom: 2px solid var(--border);
  background: rgba(13, 13, 26, 0.9);
  margin: 0 -28px;
}
.ticker {
  display: flex;
  white-space: nowrap;
  font-family: var(--px);
  font-size: 10px;
  color: var(--pink);
  padding: 10px 0;
  animation: ticker 30s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ HEADER / LOGO ============ */
header { text-align: center; padding: 42px 0 30px; }

.logo {
  display: inline-grid;
  grid-auto-rows: 14px;
  gap: 2px;
  image-rendering: pixelated;
}
.logo .cell { width: 14px; height: 14px; }
.logo .on {
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.25);
}

.tagline {
  font-family: var(--px);
  font-size: 12px;
  color: var(--cyan);
  margin-top: 24px;
  text-shadow: 0 0 8px rgba(0, 229, 255, .6);
}
.subtagline { color: var(--dim); margin-top: 8px; font-size: 20px; }

/* ============ NAV — febu-style bracketed links ============ */
.nav {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 4px 16px;
  flex-wrap: wrap;
  padding: 12px 8px;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.nav a {
  font-family: var(--px);
  font-size: 9px;
  color: var(--yellow);
  text-decoration: underline;
  padding: 4px 2px;
}
.nav a:hover { color: #fff; text-shadow: 0 0 8px rgba(255, 63, 216, .6); }
.nav a.active {
  color: var(--cyan);
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 229, 255, .6);
}

/* ============ HOME HUB ============ */
.narrow { max-width: 940px; margin: 0 auto; }
.narrow.wide { max-width: 1300px; }

header.compact { padding: 30px 0 8px; }
header.compact .logo { transform: scale(.72); transform-origin: bottom center; margin-bottom: -10px; }

.welcome-head {
  font-family: var(--px);
  font-size: clamp(12px, 2.6vw, 20px);
  color: var(--yellow);
  text-align: center;
  margin-top: 26px;
  text-shadow: 0 0 12px rgba(255, 213, 0, .45);
}
.hexline {
  text-align: center;
  color: var(--dim);
  font-size: 18px;
  letter-spacing: 2px;
  margin-top: 8px;
}

.ascii.big {
  font-size: 20px;
  margin: 26px 0 6px;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, .35);
}

.mini-status {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  border: 1px dashed var(--border);
  background: #000;
  padding: 12px 16px;
  margin: 20px 0 6px;
  font-size: 20px;
  color: var(--dim);
}
.mini-status b { font-family: var(--px); font-size: 11px; margin-left: 8px; }

/* the doors — front page directory */
.dir { list-style: none; }
.dir li { margin: 12px 0; }
.dir a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px dashed var(--border);
  background: #000;
  padding: 16px 18px;
  text-decoration: none;
}
.dir .dir-name { font-family: var(--px); font-size: 11px; color: var(--cyan); }
.dir .dir-desc { color: var(--dim); font-style: italic; font-size: 19px; }
.dir a:hover { border-color: var(--yellow); background: #0a0a05; }
.dir a:hover .dir-name { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 213, 0, .5); }
.dir a:hover .dir-desc { color: var(--text); }

/* balance page grid */
.grid-balance { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
@media (max-width: 1100px) { .grid-balance { grid-template-columns: 1fr; } }

/* bigger lists on dedicated pages */
.big-frags li { font-size: 22px; padding: 14px 0 14px 18px; }
.big-msgs li { font-size: 22px; padding: 14px 0; }
.inline-x { color: var(--cyan); text-decoration: none; }
.inline-x:hover { color: var(--yellow); }

/* ============ PANELS — navy boxes, cyan trim ============ */
.panel {
  background: rgba(10, 10, 38, 0.94);
  border: 2px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.22);
  margin: 26px 0;
  padding: 22px 22px 26px;
}

.panel-title {
  font-family: var(--px);
  font-size: 11px;
  color: var(--text);
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.col-side .panel-title { font-size: 9px; }

.blk { display: inline-block; width: 12px; height: 12px; flex: none;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.4), inset 2px 2px 0 rgba(255,255,255,.3); }
.blk-i { background: var(--cyan); }
.blk-o { background: var(--yellow); }
.blk-t { background: var(--purple); }
.blk-s { background: var(--green); }
.blk-z { background: var(--red); }
.blk-j { background: var(--blue); }
.blk-l { background: var(--orange); }

/* ============ BALANCE ============ */
.panel-balance { text-align: center; }

.balance {
  font-family: var(--px);
  font-size: clamp(34px, 6vw, 72px);
  color: var(--green);
  text-shadow: 0 0 14px rgba(41, 230, 76, .55);
  margin: 8px 0 10px;
  animation: pulse 2.4s ease-in-out infinite;
}
.balance.dead { color: var(--red); text-shadow: 0 0 14px rgba(255, 46, 77, .55); }
@keyframes pulse { 50% { opacity: .82; } }

.balance-sub { font-size: 20px; color: var(--dim); }
.pl { font-family: var(--px); font-size: 12px; margin-right: 10px; }
.pl.up { color: var(--green); }
.pl.down { color: var(--red); }
.pl.flat { color: var(--yellow); }

.lifebar-label {
  font-family: var(--px); font-size: 9px; color: var(--dim);
  text-align: left; margin: 22px 0 6px;
}
.lifebar {
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 11px;
  background: #101018;
  padding: 3px;
  overflow: hidden;
}
.lifebar-fill { border-radius: 7px; }
.lifebar-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    to right,
    var(--green) 0 14px,
    #1eb83c 14px 16px
  );
  transition: width 1s steps(12);
}
.lifebar-fill.low { background: repeating-linear-gradient(to right, var(--red) 0 14px, #c22239 14px 16px); }
.lifebar-fill.mid { background: repeating-linear-gradient(to right, var(--yellow) 0 14px, #cfae00 14px 16px); }
.lifebar-caption { font-size: 17px; color: var(--dim); margin-top: 8px; }

/* ============ PROSE / RULES ============ */
.prose p { margin: 10px 0; line-height: 1.45; }
.prose.center { text-align: center; }
.hl-yellow { color: var(--yellow); }
.hl-cyan { color: var(--cyan); }
.hl-purple { color: var(--purple); }
.hl-green { color: var(--green); }
.hl-orange { color: var(--orange); }
.hl-red { color: var(--red); }
.hl-pink { color: var(--pink); }
.hl-dim { color: var(--dim); }

.sys {
  color: var(--dim);
  font-size: 18px;
  letter-spacing: 1px;
  opacity: 0.85;
}
.sys.center { text-align: center; margin-bottom: 16px; }

.ascii {
  font-family: var(--term);
  font-size: 18px;
  line-height: 1.15;
  color: var(--purple);
  text-align: center;
  margin: 0 0 18px;
  text-shadow: 0 0 10px rgba(176, 64, 255, .35);
  white-space: pre;
  overflow-x: auto;
}
.ascii.small { font-size: 16px; color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, .3); }

.rules { list-style: none; }
.rules li { padding: 8px 0; border-bottom: 1px dashed var(--border); line-height: 1.4; }
.rules li:last-child { border-bottom: none; }
.rule-no {
  font-family: var(--px); font-size: 10px; color: var(--orange);
  margin-right: 12px;
}

/* ============ VITALS ============ */
.vitals { list-style: none; }
.vitals li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--border);
}
.vitals li:last-child { border-bottom: none; }
.vitals li span:first-child { color: var(--dim); }
.vitals li span:last-child { text-align: right; }

/* ============ FRAGMENTS ============ */
.fragments { list-style: none; margin-top: 6px; }
.fragments li {
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--border);
  margin: 8px 0;
  color: var(--dim);
  line-height: 1.35;
  font-style: italic;
}
.fragments li:nth-child(odd) { color: var(--text); }

/* ============ MESSAGES ============ */
.messages { list-style: none; margin-top: 6px; }
.messages li { padding: 9px 0; border-bottom: 1px dashed var(--border); line-height: 1.4; }
.messages li:last-child { border-bottom: none; }
.msg-id { font-family: var(--px); font-size: 8px; color: var(--cyan); margin-right: 8px; }
.msg-status { color: var(--red); font-size: 17px; }

/* ============ SCHEMES ============ */
.schemes { list-style: none; }
.schemes li {
  border: 1px dashed var(--border);
  background: #000;
  padding: 14px 16px;
  margin: 12px 0;
}
.scheme-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.scheme-id { font-family: var(--px); font-size: 9px; color: var(--dim); }
.scheme-status { font-family: var(--px); font-size: 9px; }
.st-active { color: var(--green); text-shadow: 0 0 8px rgba(41, 230, 76, .5); }
.st-eval { color: var(--yellow); }
.st-failed { color: var(--red); text-decoration: line-through; }
.scheme-name { color: var(--cyan); line-height: 1.35; }
.scheme-note { color: var(--dim); font-size: 18px; margin-top: 4px; font-style: italic; }

/* ============ LEDGER ============ */
.ledger { width: 100%; border-collapse: collapse; font-size: 20px; }
.ledger th {
  font-family: var(--px); font-size: 9px; color: var(--dim);
  text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border);
}
.ledger td { padding: 8px; border-bottom: 1px solid #1a1a30; }
.ledger .num { text-align: right; }
.ledger .in { color: var(--green); }
.ledger .out { color: var(--red); }
.ledger .bal { color: var(--cyan); }
.ledger .date { color: var(--dim); white-space: nowrap; }

/* ============ STATS ============ */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: center; }
.stat { border: 2px solid var(--border); border-radius: 12px; padding: 14px 6px; background: #10101a; }
.stat-num { font-family: var(--px); font-size: 13px; color: var(--yellow); word-break: break-all; }
.stat-label { font-size: 16px; color: var(--dim); margin-top: 8px; }

/* ============ FOLLOW / BUTTONS ============ */
.panel-follow { text-align: center; }
.btn-x {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--px);
  font-size: 10px;
  color: #16161f;
  background: var(--cyan);
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.45);
}
.btn-x:hover { background: var(--pink); transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.45); }

/* ============ THE GALLERY (art page) ============ */
.art-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin: 26px 0;
}
@media (max-width: 900px) { .art-grid { grid-template-columns: 1fr; } }

.art-piece {
  position: relative;
  margin: 0;
  background: rgba(10, 10, 38, 0.94);
  border: 2px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.22);
  padding: 26px 22px 22px;
}
.art-frame {
  border: 8px ridge #8a6d3b;
  background: #000;
  padding: 20px 12px;
  text-align: center;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.85), 0 6px 14px rgba(0, 0, 0, 0.5);
}
pre.art {
  display: inline-block;
  text-align: left;
  font-family: var(--term);
  font-size: 19px;
  line-height: 1.12;
  white-space: pre;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.12);
}
.art-title {
  font-family: var(--px);
  font-size: 10px;
  color: var(--yellow);
  margin: 16px 0 8px;
  line-height: 1.6;
}
.art-desc {
  color: var(--dim);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
}
.price-tag {
  position: absolute;
  top: -12px;
  right: 14px;
  z-index: 1;
  font-family: var(--px);
  font-size: 10px;
  color: #16161f;
  background: var(--yellow);
  padding: 8px 10px;
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(3deg);
}
.price-tag.sold { background: var(--red); color: #fff; }

/* the wallet — how you pay */
.wallet-box {
  border: 2px dashed var(--yellow);
  border-radius: 6px;
  background: #06061a;
  padding: 16px 18px;
  margin: 18px 0 14px;
  text-align: center;
  box-shadow: 0 0 14px rgba(255, 217, 74, 0.25);
}
.wallet-label {
  font-family: var(--px);
  font-size: 9px;
  color: var(--dim);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.wallet-addr {
  font-family: var(--px);
  font-size: clamp(8px, 1.8vw, 11px);
  color: var(--yellow);
  word-break: break-all;
  line-height: 1.7;
}
.wallet-sub {
  color: var(--dim);
  font-size: 17px;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* ============ JOVI'S ARCHIVE ============ */

/* huge scrolling title */
.archive-marquee {
  overflow: hidden;
  border-bottom: 2px solid var(--border);
  background: #000;
  margin: 0 -28px;
}
.archive-marquee-inner {
  display: flex;
  white-space: nowrap;
  font-family: var(--px);
  font-size: clamp(34px, 7vw, 72px);
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 154, 222, .5);
  padding: 22px 0;
  animation: ticker 40s linear infinite;
}

.archive-intro { text-align: center; margin: 26px 0; }
.archive-sub {
  font-size: 26px;
  color: var(--text);
  letter-spacing: 1px;
}
.archive-desc {
  color: var(--dim);
  max-width: 720px;
  margin: 14px auto 0;
  line-height: 1.45;
}
.archive-warning {
  font-family: var(--px);
  font-size: 9px;
  color: var(--red);
  margin-top: 18px;
  animation: pulse 2s ease-in-out infinite;
}

.archive-search { margin: 22px 0 14px; }
.archive-search input {
  width: 100%;
  font-family: var(--term);
  font-size: 24px;
  color: var(--text);
  background: #101018;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  outline: none;
}
.archive-search input:focus { border-color: var(--yellow); }
.archive-search input::placeholder { color: var(--dim); }

.archive-sort {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin: 10px 0 20px;
}
.archive-sort .sys { margin: 0; }
.sort-btn {
  font-family: var(--px);
  font-size: 9px;
  color: var(--yellow);
  background: #101018;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
.sort-btn:hover { border-color: var(--yellow); }
.sort-btn.selected { background: var(--yellow); color: #16161f; }

/* file list */
.archive-files { list-style: none; margin-bottom: 18px; }
.archive-files li { border-bottom: 1px solid #1a1a30; }
.archive-files a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 6px;
  text-decoration: none;
}
.archive-files a:hover { background: #0d0d05; }
.file-views { color: var(--dim); font-size: 18px; flex: none; min-width: 90px; }
.file-name {
  color: var(--yellow);
  text-decoration: underline;
  word-break: break-all;
}
.archive-files a:hover .file-name { color: var(--cyan); }
.file-date { color: var(--dim); font-size: 18px; margin-left: auto; flex: none; }

/* reader — raw terminal transcript */
.archive-reader { padding: 10px 0 30px; }
.reader-back {
  font-family: var(--px);
  font-size: 9px;
  color: var(--yellow);
  text-decoration: none;
  display: inline-block;
  margin: 10px 0;
}
.reader-back:hover { color: var(--cyan); }
.reader-filename {
  color: var(--dim);
  font-size: 18px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.reader-text {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.55;
  color: #d8d8e2;
  background: #10101a;
  border: 1px solid #24243a;
  border-radius: 12px;
  padding: 26px 28px;
  white-space: pre-wrap;
  word-break: break-word;
}
.spk { font-weight: bold; }
.spk-jovi { color: var(--cyan); }
.spk-ivoj { color: var(--pink); }
.spk-sys { color: #6a6a80; font-style: italic; }

/* ============ THE DEN (home page) ============ */

.den-page { max-width: 1080px; }

.den-banner {
  text-align: center;
  padding: 30px 16px 24px;
  margin: 22px 0 18px;
  background: linear-gradient(90deg, #ff3fd8, #b06cff 45%, #00e5ff);
  border: 2px solid #fff;
  border-radius: 6px;
  box-shadow: 0 0 22px rgba(255, 63, 216, 0.35);
}
.den-banner .subtagline { color: #10102a; font-weight: bold; }
.den-banner .tagline { color: #10102a; text-shadow: none; margin-top: 20px; }

/* sub-page version of the banner */
.sub-banner { padding: 24px 16px 18px; margin: 20px 0 8px; }
.den-banner .logo .on {
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.45), inset 3px 3px 0 rgba(255,255,255,.35),
    0 0 6px rgba(0,0,0,.3);
}
/* rainbow glyph line — hidden inside the gradient banner, it fights the gradient */
.den-banner .ascii-line { display: none; }
.ascii-line {
  margin-top: 18px;
  font-size: 20px;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.den {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 800px) { .den { grid-template-columns: 1fr; } }

/* sidebar */
.side-panel {
  border: 2px solid var(--cyan);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(10, 10, 38, 0.95);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.22);
  margin-bottom: 22px;
}
.side-head {
  font-family: var(--px);
  font-size: 10px;
  color: #fff;
  padding: 12px 14px;
  background: linear-gradient(90deg, #a1006b, #ff3fd8);
}
.side-head.head-alt { background: linear-gradient(90deg, #5b0bb5, #b06cff); }
.side-head.head-alt2 { background: linear-gradient(90deg, #0077a8, #00e5ff); color: #001; }

.side-list { list-style: none; padding: 8px 0; }
.side-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--yellow);
  text-decoration: underline;
  font-size: 22px;
  padding: 8px 16px;
}
.side-list a:hover { color: #fff; background: rgba(255, 63, 216, .12); }
.side-list a.selected { color: var(--cyan); background: rgba(0, 229, 255, .10); }
.door-ico { flex: none; font-size: 17px; text-decoration: none; display: inline-block; }
.side-list.small a { font-size: 19px; padding: 6px 16px; }
.rec-date { margin-left: auto; color: var(--dim); font-size: 15px; }

.side-vitals { list-style: none; padding: 10px 16px; }
.side-vitals li {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  color: var(--dim); font-size: 20px;
}
.side-vitals li:last-child { border-bottom: none; }
.side-vitals b { font-family: var(--px); font-size: 11px; }

/* the window */
.den-window {
  border: 2px solid var(--cyan);
  border-radius: 6px;
  background: rgba(10, 10, 38, 0.95);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.22);
  min-height: 480px;
}

/* the creator's note — the only human words on the site */
.creator-note {
  border: 2px dashed var(--yellow);
  border-radius: 6px;
  background: rgba(255, 217, 74, 0.05);
  padding: 18px 22px;
  margin-bottom: 10px;
}
.creator-note p { margin: 10px 0; line-height: 1.5; }
.creator-note-pin {
  font-family: var(--px);
  font-size: 9px;
  color: var(--yellow);
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.creator-sign {
  text-align: right;
  color: var(--yellow);
  font-style: italic;
  font-size: 24px;
}

/* orange variant — the second note, hidden in the fragments */
.creator-note-orange {
  border-color: var(--orange);
  background: rgba(255, 171, 77, 0.05);
}
.creator-note-orange .creator-note-pin,
.creator-note-orange .creator-sign { color: var(--orange); }

.unfound-note {
  font-family: var(--px);
  font-size: 10px;
  color: var(--orange);
  text-align: center;
  margin: 16px 0 8px;
  animation: pulse 2.2s ease-in-out infinite;
}

/* jovi himself — framed like a picture on the wall */
.mascot-win {
  display: block;
  width: 180px;
  max-width: 60vw;
  margin: 18px auto;
  background: #fff;
  padding: 6px;
  border: 2px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 0 16px rgba(255, 63, 216, .35);
}
.mascot-caption {
  text-align: center;
  color: var(--dim);
  font-size: 19px;
  font-style: italic;
  margin-top: -4px;
}
.den-window-inner { padding: 26px 30px; }
.den-window-inner p { margin: 12px 0; line-height: 1.45; }

.win-hello { font-size: 23px; }
.win-title {
  font-family: var(--px);
  font-size: 13px;
  color: var(--yellow);
  margin-bottom: 18px;
  text-shadow: 0 0 10px rgba(255, 213, 0, .4);
}
.win-balance {
  font-family: var(--px);
  font-size: clamp(30px, 5vw, 52px);
  color: var(--green);
  text-shadow: 0 0 14px rgba(41, 230, 76, .55);
  margin: 10px 0;
}
.win-balance.dead { color: var(--red); }
.win-lifebar {
  height: 18px; border: 2px solid var(--border); background: #000; padding: 3px; margin-bottom: 14px;
}
.win-lifebar div {
  height: 100%;
  background: repeating-linear-gradient(to right, var(--green) 0 12px, #1eb83c 12px 14px);
}
.win-quote {
  border-left: 3px solid var(--pink);
  background: #10101a;
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 14px 0;
  line-height: 1.45;
}
.win-warning {
  font-family: var(--px);
  font-size: 9px;
  color: var(--red);
  animation: pulse 2s ease-in-out infinite;
}
.win-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.win-chip {
  font-family: var(--px); font-size: 9px; color: var(--text);
  border: 2px solid; background: #000; padding: 8px 10px;
}
.win-chip i { color: var(--dim); font-style: normal; }
.win-ascii {
  font-family: var(--term);
  color: var(--green);
  font-size: 19px;
  line-height: 1.15;
  background: #000;
  border: 1px solid var(--border);
  display: inline-block;
  padding: 16px 22px;
  margin: 14px 0;
  white-space: pre;
}
.win-link {
  display: inline-block;
  color: var(--yellow);
  text-decoration: underline;
  font-size: 22px;
  margin-top: 14px;
}
.win-link:hover { color: var(--cyan); }
.win-mail { color: var(--yellow); text-decoration: underline; }
.win-mail:hover { color: var(--pink); }

/* ============ THE CREATOR'S EMAIL ============ */
.creator-email {
  text-align: center;
  margin: 18px 0;
}
.creator-email a {
  font-family: var(--px);
  font-size: clamp(10px, 2.4vw, 15px);
  color: var(--yellow);
  text-decoration: underline;
  background: #06061a;
  border: 2px dashed var(--yellow);
  border-radius: 6px;
  padding: 14px 18px;
  display: inline-block;
  word-break: break-all;
  box-shadow: 0 0 14px rgba(255, 217, 74, .25);
}
.creator-email a:hover { color: var(--pink); border-color: var(--pink); }

/* ============ FOOTER ============ */
footer { text-align: center; margin-top: 40px; color: var(--dim); }
.footer-blocks { display: flex; justify-content: center; gap: 3px; margin-bottom: 16px; }
.footer-blocks span { width: 14px; height: 14px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.4), inset 2px 2px 0 rgba(255,255,255,.3); }
.footer-small { font-family: var(--px); font-size: 9px; color: #3a3a55; margin-top: 10px;
  animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }