/* ===== Shared styles: upload next to every page ===== */
:root {
  --bg: #07050f;
  --panel: #140c26;
  --pink: #ff3fb4;
  --cyan: #3ff0ff;
  --lemon: #fff44f;
  --text: #d9d4ee;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  /* tiled starfield made from CSS, no image files needed */
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 80px, var(--cyan), transparent),
    radial-gradient(2px 2px at 150px 20px, var(--lemon), transparent),
    radial-gradient(1px 1px at 60px 140px, var(--pink), transparent),
    radial-gradient(1px 1px at 170px 120px, #fff, transparent);
  background-size: 200px 180px;
  cursor: crosshair;
}

a { color: var(--cyan); }
a:hover { color: var(--lemon); background: var(--pink); text-decoration: none; }

.wrap { max-width: 860px; margin: 0 auto; padding: 12px; }

/* top ticker */
.ticker {
  border: 3px ridge var(--pink);
  background: #000;
  color: var(--lemon);
  padding: 3px 0;
  font-weight: bold;
}

/* header */
.banner { text-align: center; padding: 18px 8px 8px; }
.banner h1 {
  margin: 0;
  font-size: 44px;
  letter-spacing: 3px;
  color: var(--pink);
  text-shadow: 3px 3px 0 #3b0a5c, 0 0 14px var(--pink);
  transform: rotate(-2deg);
}
.banner p { margin: 6px 0 0; color: var(--cyan); font-style: italic; }

.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* layout */
.cols { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.side { flex: 0 0 170px; }
.main { flex: 1; min-width: 0; }

.box {
  background: var(--panel);
  border: 4px ridge var(--cyan);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.box h2 {
  margin: -10px -12px 10px;
  padding: 4px 10px;
  font-size: 13px;
  background: linear-gradient(90deg, var(--pink), #6b1fb5);
  color: #fff;
  border-bottom: 2px outset var(--pink);
}

/* nav */
.nav { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0 0 6px; }
.nav a {
  display: block;
  padding: 4px 8px;
  border: 2px outset #8a5cff;
  background: #1d1040;
  font-weight: bold;
  text-decoration: none;
}
.nav a:hover { border-style: inset; }
.nav .soon { color: var(--lemon); }

/* movie promo */
.promo {
  text-align: center;
  border: 4px double var(--lemon);
  background: #000;
  padding: 14px 8px;
  margin-bottom: 12px;
}
.promo .title {
  font-size: 26px;
  font-weight: bold;
  color: var(--lemon);
  text-shadow: 2px 2px 0 var(--pink);
}
.promo .sub { color: var(--pink); letter-spacing: 6px; font-weight: bold; }

/* updates list */
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 4px 0; border-bottom: 1px dashed #4a3a7a; }
.log li:last-child { border: 0; }
.log b { color: var(--lemon); }

/* hit counter */
.counter { text-align: center; }
.counter .digits {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 20px;
  letter-spacing: 3px;
  background: #000;
  color: #39ff14;
  border: 2px inset #555;
  padding: 2px 8px;
}

.btn88 {
  display: block;
  width: 88px; height: 31px;
  line-height: 27px;
  margin: 6px auto 0;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  background: linear-gradient(#fff44f, #ff9d2f);
  border: 2px outset #fff;
}

.foot { text-align: center; font-size: 11px; color: #8d84b3; padding: 8px 0 20px; }

/* small screens: stack the sidebar on top */
@media (max-width: 640px) {
  .cols { flex-direction: column; }
  .side { flex-basis: auto; width: 100%; }
  .nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .nav li { margin: 0; flex: 1 1 40%; }
  .banner h1 { font-size: 30px; }
}

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