/* ===== Diamond Cobra - Retro 80s ===== */
html, body {
  height: 100%; margin: 0; padding: 0;
  background: #000;
  color: #bdfcff;
  font-family: 'Verdana', 'Trebuchet MS', 'Geneva', sans-serif;
  image-rendering: pixelated;
}
a { color: #00ccff; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; color: #f0f0f0; }
.container { max-width: 980px; margin: 0 auto; padding: 12px; }
header, nav, footer {
  border: 3px double #00ffcc;
  padding: 6px 10px;
  box-shadow: 0 0 12px #00ffcc, inset 0 0 12px #00ffcc;
  background: repeating-linear-gradient( -45deg, #050505, #050505 10px, #0a0a0a 10px, #0a0a0a 20px);
}
header .logo { display:block; max-width:100%; height:auto; }
.tagline { font-size: 14px; color: #f0f0f0; }
.navlinks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.navlinks a {
  padding: 4px 8px; border: 2px outset #00ccff; background:#12001222;
}
main {
  border: 3px ridge #00ccff; padding: 10px;
  background:
    radial-gradient(circle at 20% 10%, #00ccff22, transparent 40%),
    radial-gradient(circle at 80% 30%, #00ffcc22, transparent 45%),
    radial-gradient(circle at 50% 80%, #00ffcc22, transparent 50%),
    url('assets/stars.png');
  background-size: auto, auto, auto, 256px 256px;
}
footer { font-size: 12px; margin-top: 10px; text-align:center; }

.marquee { display:block; white-space:nowrap; overflow:hidden; border: 2px dashed #f0f0f0; padding: 4px; background:#001010; }
.marquee span { display:inline-block; padding-left:100%; animation: scroll 18s linear infinite; }
@keyframes scroll { 0%{ transform: translateX(0);} 100%{ transform: translateX(-100%);} }

.blink { animation: blinker 0.9s step-start infinite; }
@keyframes blinker { 50% { opacity: 0; } }

.badges { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.badge { border:2px groove #555; padding:2px 6px; background:#101010; font-size:12px; color:#f0f0f0; }

.box { border: 3px outset #888; padding: 8px; margin: 8px 0; background:#060606cc; box-shadow: inset 0 0 8px #00ccff; }
h2 { color:#f0f0f0; text-shadow:0 0 8px #f0f0f0; }
h3 { color:#00ffcc; }
.table80 { width:100%; border-collapse:collapse; }
.table80 th, .table80 td { border:2px solid #00ccff; padding:6px; }
.table80 th { background:#001a1a; }

.grid { display:grid; gap:10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.card { border:2px solid #00ccff; padding:6px; text-align:center; background:#0b0010; }

audio, iframe { width:100%; border:0; }
input, textarea, button, select { background:#0b0b0b; color:#bdfcff; border:2px inset #00ccff; padding:6px; }
button { cursor:pointer; border-style: outset; }

.hr-neon { border:0; height:2px; background: linear-gradient(90deg, transparent, #00ccff, #00ffcc, transparent); margin: 12px 0; }
.counter { display:inline-block; font-family: monospace; padding:2px 4px; background: #090909; border:2px inset #666; letter-spacing: 2px; }
@media (max-width:600px){ .tagline { display:none; } }