/* === Geocities theme — chaotic 1998 personal-page look === */

[data-theme="geocities"] {
  --bg: #ffff00;
  --panel: #ffffff;
  --panel-2: #ffffe0;
  --text: #000080;
  --muted: #800080;
  --accent: #ff00ff;
  --accent-hover: #ff80ff;
  --border: #ff00ff;
  --danger: #ff0000;
}

[data-theme="geocities"] body {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  background:
    repeating-linear-gradient(45deg,
      #ffff00 0px, #ffff00 20px,
      #00ffff 20px, #00ffff 40px,
      #ff00ff 40px, #ff00ff 60px,
      #ffff00 60px, #ffff00 80px
    );
  color: var(--text);
}

[data-theme="geocities"] h1,
[data-theme="geocities"] h2,
[data-theme="geocities"] h3 {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 3px 3px 0 cyan;
  font-weight: 900;
}

[data-theme="geocities"] .card {
  background: #ffffff;
  border: 4px ridge magenta;
  border-radius: 0;
}

[data-theme="geocities"] .btn {
  background: #00ffff;
  border: 3px outset #ff00ff;
  border-radius: 0;
  color: #000080;
  font-weight: bold;
  text-transform: uppercase;
}
[data-theme="geocities"] .btn:hover { background: #ff00ff; color: #ffff00; }
[data-theme="geocities"] .btn.primary { background: #ff00ff; color: #ffff00; }

[data-theme="geocities"] a { color: blue; text-decoration: underline; }
[data-theme="geocities"] a:visited { color: purple; }

[data-theme="geocities"] .topbar {
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00);
  border-bottom: 4px ridge yellow;
}
[data-theme="geocities"] .topbar .brand {
  animation: gc-marquee 8s linear infinite;
  display: inline-block;
  white-space: nowrap;
}
@keyframes gc-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-30%); }
}

[data-theme="geocities"] #role-chip {
  animation: gc-blink 1s steps(2) infinite;
}
@keyframes gc-blink {
  0%, 50% { visibility: visible; }
  51%,100% { visibility: hidden; }
}

[data-theme="geocities"] input,
[data-theme="geocities"] select,
[data-theme="geocities"] textarea {
  background: #ffffe0;
  border: 2px inset #ff00ff;
  color: #000080;
  border-radius: 0;
  font-family: "Comic Sans MS", cursive;
}

/* "Under construction" badge fixed to bottom-right */
[data-theme="geocities"] body::after {
  content: "🚧 UNDER CONSTRUCTION 🚧";
  position: fixed;
  bottom: .5rem; right: .5rem;
  background: #ffff00;
  color: #ff0000;
  border: 3px ridge black;
  padding: .25rem .5rem;
  font-weight: bold;
  z-index: 100;
  animation: gc-blink 1.5s steps(2) infinite;
}

/* Fake hit counter — JS will inject .hit-counter element into the page */
[data-theme="geocities"] .hit-counter {
  display: inline-block;
  background: black;
  color: #00ff00;
  font-family: "Courier New", monospace;
  padding: .25rem .5rem;
  border: 2px inset gray;
  letter-spacing: 2px;
}

/* Long-retention badge — hot magenta stamp, in keeping with the
   theme's accent colour. Black border keeps it readable against the
   yellow/cyan background chaos. */
[data-theme="geocities"] .badge.lr {
  background: #ff00ff;
  color: #ffffff;
  border: 2px solid #000000;
  font-weight: 700;
  text-transform: uppercase;
}