/* Calderona Games - SCI0-style site. Only the 16 EGA colours are used. */
:root {
  --black: #000000;  --blue: #0000AA;   --green: #00AA00;  --cyan: #00AAAA;
  --red: #AA0000;    --magenta: #AA00AA; --brown: #AA5500; --lgray: #AAAAAA;
  --dgray: #555555;  --lblue: #5555FF;  --lgreen: #55FF55; --lcyan: #55FFFF;
  --lred: #FF5555;   --lmagenta: #FF55FF; --yellow: #FFFF55; --white: #FFFFFF;
  --font: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  padding: 0 16px 48px;
  color: var(--white);
  font-family: var(--font);
  font-size: 22px;
  line-height: 1.25;
  background: var(--black);   /* matches the logo artwork */
}

main, .footer { max-width: 960px; margin: 0 auto; }

a { color: var(--lcyan); }
b { font-weight: normal; color: var(--lmagenta); }
.window b { color: var(--magenta); }
.small { font-size: 18px; }
.big { font-size: 34px; margin: 18px 0 !important; }
[hidden] { display: none !important; }

/* ---------- title page ---------- */
.splash {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px; background: var(--black);
  color: var(--white); text-decoration: none; cursor: pointer; text-align: center;
}
.splash-logo { width: min(620px, 92vw, 70vh); height: auto; }
.splash-tagline { color: var(--lcyan); font-size: clamp(26px, 5vw, 40px); }
.splash-sub { color: var(--white); font-size: clamp(20px, 3.6vw, 28px); margin-top: -8px; }
.splash-prompt { color: var(--lmagenta); font-size: clamp(20px, 3.4vw, 26px); animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

/* ---------- site header: small logo, then an SCI0 menu bar sitting on the game window ---------- */
.sitehead { display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.sitehead-logo img { display: block; width: 190px; height: auto; margin-bottom: 12px; }
.sitenav {
  display: flex; flex-wrap: wrap; justify-content: center;
  background: var(--white); color: var(--black);
  border: 3px solid var(--black); outline: 3px solid var(--white);
  box-shadow: 8px 8px 0 var(--dgray);
  font-size: 26px; line-height: 1.4;
  margin-bottom: 18px;
}
.sitenav a { color: var(--black); text-decoration: none; padding: 0 16px; }
.sitenav a:hover, .sitenav a:focus-visible, .sitenav a[aria-current="page"] { background: var(--black); color: var(--white); outline: none; }

/* ---------- the game screen ---------- */
.monitor {
  background: var(--dgray);
  padding: 14px;
  border: 4px solid var(--lgray);
  border-right-color: var(--black);
  border-bottom-color: var(--black);
  margin: 0 0 28px;
}

.screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 3;           /* 320x200 on a 4:3 monitor: tall pixels, as on real hardware */
  background: var(--black);
  overflow: hidden;
  user-select: none;
}

.statusbar, .menubar {
  position: absolute; inset: 0 0 auto 0;
  height: 5cqw;                  /* 10 of 200 lines */
  background: var(--white); color: var(--black);
  font-size: 4.2cqw; line-height: 5cqw;
  z-index: 3;
}
.statusbar { display: flex; justify-content: space-between; padding: 0 2cqw; }

.menubar { display: flex; gap: 0; padding: 0 1cqw; }
.menu { position: relative; }
.menu > button, .dropdown button {
  font: inherit; color: var(--black); background: none; border: 0;
  padding: 0 1.6cqw; cursor: pointer; height: 5cqw; line-height: 5cqw;
}
.menu > button:hover, .menu.open > button,
.dropdown button:hover, .dropdown button:focus-visible { background: var(--black); color: var(--white); outline: none; }
.dropdown {
  display: none; position: absolute; top: 5cqw; left: 0; min-width: 30cqw;
  background: var(--white); border: 0.5cqw solid var(--black);
  box-shadow: 0.8cqw 0.8cqw 0 var(--black); padding: 0.4cqw 0;
}
.menu.open .dropdown { display: block; }
.dropdown button { display: flex; justify-content: space-between; width: 100%; text-align: left; gap: 3cqw; }
.dropdown kbd { font: inherit; }

#pic {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 95%;      /* 190 of 200 lines */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

/* SCI0 message window: white, black frame, dark shadow */
.msgbox {
  position: absolute; z-index: 4;
  left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: min(78cqw, 100%); max-height: 90%; overflow-y: auto;
  background: var(--white); color: var(--black);
  border: 0.6cqw solid var(--black);
  outline: 0.6cqw solid var(--white);
  box-shadow: 1.4cqw 1.4cqw 0 var(--black);
  padding: 2.4cqw 3cqw;
  font-size: 4.2cqw; line-height: 1.2;
}
.msgtext { white-space: pre-line; text-align: center; }
.msgbuttons { display: flex; justify-content: center; gap: 3cqw; margin-top: 2cqw; }
.msgbuttons:empty { display: none; }
.msgbuttons button {
  font: inherit; background: var(--white); color: var(--black);
  border: 0.4cqw solid var(--black); padding: 0 2.4cqw; cursor: pointer;
}
.msgbuttons button:hover, .msgbuttons button:focus-visible { background: var(--black); color: var(--white); outline: none; }

/* Scanlines: a faint, optional CRT touch */
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px);
}

/* The parser line */
.parser {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 4px 10px;
  background: var(--white); color: var(--black);
  border: 3px solid var(--black); outline: 2px solid var(--white);
}
.parser label { font-size: 26px; }
.parser input {
  flex: 1; min-width: 0; font: inherit; font-size: 26px;
  border: 0; background: transparent; color: var(--black); outline: none;
  caret-color: var(--black);
}
.parser input::placeholder { color: var(--dgray); }
.hint { margin: 10px 2px 0; font-size: 19px; color: var(--white); }
.hint b { color: var(--lmagenta); }

/* ---------- content windows ---------- */
.window {
  background: var(--white); color: var(--black);
  border: 3px solid var(--black);
  outline: 3px solid var(--white);
  box-shadow: 10px 10px 0 var(--black);
  margin: 0 0 34px;
  scroll-margin-top: 20px;
}
.window .title {
  margin: 0; padding: 2px 12px; font-weight: normal; font-size: 26px;
  background: var(--dgray); color: var(--white); text-align: center;
}
.window .body { padding: 10px 22px 18px; }
.window p { margin: 10px 0; }

.features { list-style: none; padding: 0; margin: 12px 0; }
.features li { display: flex; gap: 10px; margin: 8px 0; }
.bullet { color: var(--magenta); flex: none; }

.swatches { display: grid; grid-template-columns: repeat(16, 1fr); border: 3px solid var(--black); margin: 16px 0 4px; }
.swatches span { background: var(--c); aspect-ratio: 1; }

/* ---------- mailing list ---------- */
.signup-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 6px; }
.signup-form input[type=email] {
  flex: 1 1 260px; min-width: 0; font: inherit; color: var(--black); background: var(--white);
  border: 3px solid var(--black); padding: 4px 8px; border-radius: 0;
}
.signup-form input[type=email]:focus { outline: 3px solid var(--lblue); outline-offset: 0; }
.signup-form .formstatus { flex-basis: 100%; }
.signup-form .formstatus:empty { display: none; }
.listed-status { padding: 6px 12px; border: 3px solid var(--black); }
.listed-status.ok { background: var(--lgreen); }
.listed-status.err { background: var(--lred); }
.window.signup .title { background: var(--magenta); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- contact form ---------- */
#contact-form { display: grid; gap: 12px; margin-top: 8px; }
#contact-form label { display: grid; gap: 4px; }
#contact-form input, #contact-form textarea {
  font: inherit; color: var(--black); background: var(--white);
  border: 3px solid var(--black); padding: 4px 8px; border-radius: 0; width: 100%;
}
#contact-form input:focus, #contact-form textarea:focus { outline: 3px solid var(--lblue); outline-offset: 0; }
#contact-form textarea { resize: vertical; min-height: 140px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sci-button {
  display: inline-block; text-decoration: none;
  font: inherit; font-size: 24px; background: var(--white); color: var(--black);
  border: 3px solid var(--black); padding: 2px 26px; cursor: pointer;
}
.sci-button:hover, .sci-button:focus-visible { background: var(--black); color: var(--white); outline: none; }
.sci-button:disabled { color: var(--dgray); cursor: wait; }
.formstatus.ok { color: var(--green); }
.formstatus.err { color: var(--red); }

/* ---------- footer ---------- */
.footer { text-align: center; color: var(--lgray); }
.footer p { margin: 4px 0; }

@media (max-width: 560px) {
  body { font-size: 20px; }
  .sitenav { font-size: 22px; }
  .sitenav a { padding: 0 8px; }
  .sitehead-logo img { width: 140px; }
  .window .body { padding: 8px 14px 14px; }
  .monitor { padding: 8px; }
  .window { box-shadow: 6px 6px 0 var(--black); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-prompt { animation: none; }
  .screen::after { display: none; }
}