/* ================================================
   LAKE AMERICA - style.css
   Best viewed in Netscape Navigator 4.0 @ 800x600
   Palette: Old Glory Blue #002868 / Red #BF0A30
            White #FFFFFF / Gold #FFD700
   ================================================ */

body {
  margin: 0;
  padding: 12px 6px;
  color: #ffffff;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;

  /* tiled star field, pure CSS - no image files */
  background-color: #002868;
  background-image:
    radial-gradient(#ffffff 1.5px, transparent 1.5px),
    radial-gradient(#ffd700 1.5px, transparent 1.5px);
  background-size: 60px 60px, 90px 90px;
  background-position: 0 0, 30px 45px;
}

/* ---------- page frame ---------- */

.page {
  width: 100%;
  max-width: 800px;
  background: #ffffff;
  border: 5px outset #bf0a30;
}

.page td {
  padding: 12px;
}

/* ---------- banner ---------- */

.banner {
  background: #002868;
  border-bottom: 4px ridge #ffd700;
  text-align: center;
}

.eyebrow {
  margin: 0 0 6px;
  color: #ffd700;
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
  letter-spacing: 2px;
}

h1 {
  margin: 0;
  color: #ffffff;
  font-size: 46px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #bf0a30, 5px 5px 0 #000000;
}

.subtitle {
  margin: 6px 0 10px;
  color: #ffd700;
  font-family: "Comic Sans MS", cursive;
  font-size: 15px;
}

.ticker {
  display: block;
  padding: 5px 0;
  background: #bf0a30;
  border: 3px inset #ffd700;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: bold;
}

/* ---------- flag stripes divider ---------- */

.stripes {
  height: 18px;
  padding: 0 !important;
  background: repeating-linear-gradient(
    to bottom,
    #bf0a30 0 6px,
    #ffffff 6px 12px
  );
  border-bottom: 3px groove #002868;
}

/* ---------- map "window" ---------- */

.map-shell {
  background: #002868;
}

.window-title {
  padding: 4px 6px;
  background: #bf0a30;
  border: 3px outset #ffd700;
  border-bottom: 0;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: bold;
}

.map-shell iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 4px inset #ffd700;
  background: #ffffff;
}

/* ---------- panel ---------- */

.panel {
  background: #ffffff;
  text-align: center;
}

.panel p {
  margin: 8px 0;
}

.coords {
  padding: 6px;
  background: #002868;
  border: 3px outset #ffd700;
  color: #ffd700;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ---------- blinking text ---------- */

.blink {
  color: #bf0a30;
  font-weight: bold;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- footer ---------- */

.footer {
  background: #ffffff;
  color: #002868;
  text-align: center;
}

.footer p {
  margin: 8px 0;
}

.footer hr {
  border: 0;
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    #bf0a30 0 20px,
    #ffffff 20px 40px
  );
}

.counter-line {
  font-family: "Comic Sans MS", cursive;
  font-size: 14px;
}

.counter {
  padding: 3px 8px;
  background: #002868;
  border: 3px inset #ffd700;
  color: #ffd700;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  letter-spacing: 5px;
}

.construction {
  color: #bf0a30;
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  animation: blink 1.2s steps(1) infinite;
}

.fineprint {
  font-size: 12px;
  color: #002868;
}

/* ---------- 640x480 users ---------- */

@media (max-width: 620px) {
  h1 { font-size: 28px; text-shadow: 2px 2px 0 #bf0a30; }
  .map-shell iframe { height: 300px; }
  .coords { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .blink,
  .construction { animation: none; }
}