/* ==========================================================
   geo.css: the 2003 look. Shared by every page.
   Change colors in :root. Everything else follows.
   ========================================================== */

@import url('/css/puzzle-parts.css');

:root {
  --bg: #000028;
  --text: #ffffff;
  --link: #00ffff;
  --visited: #ff66ff;
  --hot: #ff00ff;
  --gold: #ffe600;
  --lime: #66ff66;
  --panel: #000080;
  --panel-2: #330066;
  --bevel-light: #c0c0ff;
  --bevel-dark: #000040;
  --ok: #66ff66;
  --bad: #ff4040;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 12px 16px 40px;
  background: var(--bg) url('/img/bg-stars.gif') repeat;
  color: var(--text);
  font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', cursive;
  font-size: 16px;
  line-height: 1.45;
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: var(--gold); background: var(--hot); }

img { max-width: 100%; height: auto; image-rendering: pixelated; }

h1, h2, h3 { font-family: 'Times New Roman', Times, serif; margin: 0.4em 0; }
h1 { font-size: 2.2em; text-align: center; }

.page { max-width: 880px; margin: 0 auto; }

.center { text-align: center; }
.small { font-size: 0.8em; }
.tiny { font-size: 0.65em; }
.mono { font-family: 'Courier New', Courier, monospace; }

/* Beveled boxes, like old Windows buttons and tables */
.panel {
  background: var(--panel);
  border: 4px outset var(--bevel-light);
  padding: 12px 14px;
  margin: 12px 0;
}
.panel.purple { background: var(--panel-2); }
.panel.black { background: #000; }
.panel.white { background: #fff; color: #000; }
.panel.white a { color: #0000ee; }

.cols { display: flex; gap: 14px; align-items: flex-start; }
.cols > .side { flex: 0 0 210px; }
.cols > .main { flex: 1 1 auto; min-width: 0; }

@media (max-width: 680px) {
  .cols { flex-direction: column; }
  .cols > .side { flex: 1 1 auto; width: 100%; }
  h1 { font-size: 1.6em; }
}

/* Animated text */
.rainbow {
  background: linear-gradient(90deg, #f00, #f90, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 3s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.glow { text-shadow: 0 0 6px var(--hot), 0 0 12px var(--hot); }

marquee { font-weight: bold; color: var(--gold); }

hr.rainbow-bar {
  border: 0;
  height: 6px;
  background: url('/img/rainbow-bar.gif') repeat-x;
  background-size: auto 6px;
  margin: 14px 0;
}

/* Nav list on the side */
.nav { list-style: none; padding: 0; margin: 0; }
.nav li { margin: 4px 0; }
.nav li::before { content: '\2605 '; color: var(--gold); }

/* 88x31 buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.buttons img { width: 88px; height: 31px; }

/* Hit counter: an odometer. Each digit is a strip of 0-9 that slides. */
.odometer {
  display: inline-flex;
  gap: 2px;
  background: #000;
  padding: 3px;
  border: 3px inset #888;
  vertical-align: middle;
}
.odometer .digit {
  display: inline-block;
  height: 1em;
  width: 0.9em;
  overflow: hidden;
  font: bold 22px/1em 'Courier New', monospace;
  color: var(--lime);
  text-align: center;
  background: linear-gradient(#2a2a2a, #000 45%, #000 55%, #2a2a2a);
  border: 1px solid #333;
}
.odometer .strip {
  display: block;
  white-space: pre;
  line-height: 1em;
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.6, 1);
}
.odometer .strip.spinning { transition: none; animation: odometer-spin 0.25s linear infinite; }
@keyframes odometer-spin { from { transform: translateY(0); } to { transform: translateY(-9em); } }
.spooky .odometer .digit { color: #6a6a6a; }

/* Tables the old way */
table.old { border-collapse: separate; border: 3px ridge var(--bevel-light); width: 100%; }
table.old td, table.old th { border: 2px inset var(--bevel-light); padding: 6px; vertical-align: top; }

/* Forms */
input[type='text'], input[type='password'], input[type='number'], textarea, select {
  font: inherit;
  font-family: 'Courier New', monospace;
  background: #fff;
  color: #000;
  border: 2px inset #ccc;
  padding: 4px 6px;
  max-width: 100%;
}
button, .btn {
  font: inherit;
  font-weight: bold;
  background: #c0c0c0;
  color: #000;
  border: 3px outset #fff;
  padding: 4px 12px;
  cursor: pointer;
}
button:active, .btn:active { border-style: inset; }
button:disabled { color: #777; cursor: not-allowed; }
label { display: block; margin: 8px 0 2px; }

/* Secret text: same color as the background. Highlight to read. */
.panel.white .whisper { color: #fff; }
.panel .whisper { color: var(--panel); }
::selection { background: var(--hot); color: #fff; }

/* Only shows up when someone prints the page */
.print-only { display: none; }
@media print {
  .print-only { display: block; color: #000; font-size: 14pt; border: 2px dashed #000; padding: 8px; }
  body { background: #fff; color: #000; }
}

/* "Broken" image placeholder, for photos that never uploaded */
.broken-pic {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 100%;
  height: 160px;
  background: #fff;
  color: #000;
  border: 2px inset #999;
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.broken-pic::before {
  content: '\2715';
  color: #d00;
  font-weight: bold;
  border: 1px solid #999;
  padding: 0 4px;
  margin-bottom: 6px;
}

/* Decoder 3000 calculator */
.calc {
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(#e9e3cf, #cfc6a8);
  color: #222;
  border: 5px outset #f4efe0;
  border-radius: 14px;
  padding: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
.calc .brand { font-family: 'Times New Roman', serif; font-style: italic; font-weight: bold; }
.lcd {
  background: #a9c27a;
  color: #1d2a10;
  border: 4px inset #8a8a6a;
  padding: 8px;
  min-height: 72px;
  font-family: 'Courier New', monospace;
  font-size: 1.15em;
  white-space: pre-wrap;
  word-break: break-word;
}
.calc textarea { width: 100%; min-height: 70px; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.keys button { padding: 8px 2px; font-size: 0.8em; border-radius: 6px; }
.keys button.on { background: #ffcc33; border-style: inset; }
.calc .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
@media (max-width: 480px) { .keys { grid-template-columns: repeat(3, 1fr); } }

/* Apache-style directory listing */
.dirlist { background: #fff; color: #000; font-family: 'Times New Roman', serif; padding: 12px; }
.dirlist a { color: #0000ee; }
.dirlist pre { font-family: 'Courier New', monospace; overflow-x: auto; }

/* Sparkle cursor trail */
.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 14px;
  animation: sparkle-fade 0.8s ease-out forwards;
}
@keyframes sparkle-fade { to { opacity: 0; transform: translateY(16px) scale(0.4); } }

/* ===== Spooky pages: 404s and The Well ===== */
body.spooky {
  background: #000;
  color: #9a9a9a;
  font-family: 'Times New Roman', Times, serif;
}
body.spooky a { color: #6a6a6a; }
body.spooky a:hover { color: #ddd; background: none; }
.scene { position: relative; max-width: 480px; margin: 20px auto; }
.scene img { width: 100%; display: block; }
.hotspot { position: absolute; display: block; cursor: pointer; }
.hotspot:hover { background: none; outline: 1px dotted rgba(255, 255, 255, 0.08); }
.whisper-line { color: #222; font-size: 0.75em; }
.fade-in { animation: fade-in 4s ease-in forwards; opacity: 0; }
@keyframes fade-in { to { opacity: 1; } }
.flicker { animation: flicker 3s infinite; }
@keyframes flicker {
  0%, 19%, 21%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .rainbow, .blink, .flicker, .fade-in, .sparkle { animation: none; opacity: 1; }
  .rainbow { color: var(--gold); background: none; }
}