/* GNARLY WIZARD — retro 90s / early-2000s static site */
:root {
  --orange: #ff7a00;
  --hot-orange: #ff9d00;
  --dark: #120904;
  --cream: #ffe5b5;
  --acid: #d7ff00;
  --cyan: #4ff6ff;
  --panel: rgba(16, 7, 2, 0.94);
}
* { box-sizing: border-box; }
html { background: #050200; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: "Courier New", Courier, monospace;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 122, 0, .16), transparent 22rem),
    radial-gradient(circle at 80% 25%, rgba(255, 157, 0, .12), transparent 24rem),
    repeating-linear-gradient(45deg, #090300 0, #090300 12px, #110500 12px, #110500 24px);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(circle, #ff8a00 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: 0;
}
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .15;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 4px);
}
.topbar {
  position: relative;
  z-index: 2;
  border-bottom: 3px ridge var(--orange);
  border-top: 3px ridge var(--orange);
  background: #000;
  color: var(--acid);
  text-align: center;
  padding: .55rem 1rem;
  font-weight: bold;
  letter-spacing: .08em;
  text-shadow: 0 0 6px var(--acid);
}
.blink { animation: pulse 1.1s steps(2, start) infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.page-shell {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 28px));
  margin: 28px auto 50px;
}
.hero {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border: 4px outset #c45b00;
  background: linear-gradient(180deg, rgba(255,122,0,.12), rgba(0,0,0,.5)), var(--panel);
  box-shadow: 0 0 0 4px #000, 0 0 24px rgba(255, 122, 0, .38);
}
.logo-wrap {
  padding: 10px;
  background: #0d0501;
  border: 3px inset #9a4700;
}
.logo { display: block; width: 100%; height: auto; }
.hero-copy h1 {
  margin: .1rem 0 .7rem;
  color: var(--orange);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(3rem, 8vw, 6.7rem);
  line-height: .86;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 #612700, 0 0 14px rgba(255,122,0,.75);
}
.eyebrow { color: var(--cyan); font-size: .8rem; text-transform: uppercase; }
.tagline { margin-bottom: 0; color: #fff4d8; font-size: 1.05rem; font-weight: bold; }
.intro-panel {
  margin-top: 26px;
  padding: 22px;
  border: 3px dashed var(--orange);
  background: #090401;
  box-shadow: inset 0 0 28px rgba(255, 122, 0, .12);
}
.intro-panel h2 {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 9px;
  color: #000;
  background: var(--orange);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.15rem;
  letter-spacing: .13em;
}
.intro-panel p { max-width: 78ch; line-height: 1.65; }
.servers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.server-card {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 20px;
  border: 4px ridge #f27a00;
  background: linear-gradient(135deg, rgba(255, 122, 0, .15), transparent 50%), #0b0502;
  box-shadow: 8px 8px 0 #000;
}
.card-title {
  color: var(--acid);
  font-family: Arial Black, Impact, sans-serif;
  font-size: 1.7rem;
  text-shadow: 2px 2px #000;
}
.server-address {
  position: relative;
  z-index: 1;
  margin: 24px 0 16px;
  padding: 12px;
  border: 2px solid var(--cyan);
  color: #fff;
  background: #020202;
  font-weight: bold;
  overflow-wrap: anywhere;
  box-shadow: 0 0 10px rgba(79, 246, 255, .25);
}
.status-line { position: relative; z-index: 1; color: #bbb; font-size: .85rem; }
.online { color: #70ff70; text-shadow: 0 0 5px #2cff2c; }
.card-note { position: relative; z-index: 1; margin-top: 16px; color: #d9c6ae; font-size: .9rem; line-height: 1.5; }
.warning-box {
  margin-top: 28px;
  padding: 17px;
  border: 3px double #ffe100;
  color: #ffe9a1;
  background: #190f00;
  text-align: center;
}
.warning-title { margin-bottom: 8px; color: #ffe100; font-weight: bold; letter-spacing: .08em; }
footer { margin-top: 30px; color: #a9907b; text-align: center; font-size: .78rem; }
.footer-rule {
  height: 6px;
  margin-bottom: 16px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 14px, #000 14px 28px);
}
.tiny { color: #6f5b4b; font-size: .7rem; }
@media (max-width: 760px) {
  .hero, .servers { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { font-size: clamp(3.1rem, 15vw, 5.3rem); }
  .logo-wrap { max-width: 420px; margin-inline: auto; }
}