/* ================================================
   ARISUE.NET  -  RETRO 90s STYLE
   ================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: #000008;
  color: #00ff00;
  font-family: "MS Gothic", "ＭＳ ゴシック", "Osaka", "Hiragino Kaku Gothic ProN", monospace;
  text-align: center;
  min-height: 100vh;
}

/* ── Star canvas ──────────────────────────── */
#stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Page wrapper ─────────────────────────── */
#wrap {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 10px 14px 20px;
}

/* ── Title ────────────────────────────────── */
#title-box {
  margin: 18px 0 10px;
}

#rainbow-title {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
  white-space: nowrap;
}

/* ── Rainbow HR ───────────────────────────── */
.rainbow-hr {
  height: 5px;
  background: linear-gradient(to right,
    #ff0000, #ff7700, #ffff00, #00ff00,
    #00ccff, #0044ff, #8800ff, #ff00ff, #ff0000);
  margin: 10px 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
}

/* ── Navigation ───────────────────────────── */
#nav-area {
  margin: 10px auto;
}

.nav-btn {
  display: inline-block;
  padding: 9px 20px;
  color: #ffff00;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border: 2px ridge #ffff00;
  background: #111100;
  text-shadow: 0 0 8px #ffff00;
}

.nav-btn:hover {
  color: #ff00ff;
  border-color: #ff00ff;
  background: #110011;
  text-shadow: 0 0 12px #ff00ff;
}

/* ── Scroll marquee ───────────────────────── */
#scroll-area {
  margin: 8px 0;
  padding: 5px 0;
  font-size: 15px;
  color: #ff88ff;
  border-top: 1px dashed #333;
  border-bottom: 1px dashed #333;
}

/* ── Visitor counter ──────────────────────── */
#counter-wrap {
  display: inline-block;
  background: #000c1a;
  border: 2px solid #00aaff;
  padding: 10px 22px;
  margin: 14px 0;
  box-shadow: 0 0 20px #00aaff44, inset 0 0 12px #00000099;
}

.counter-label {
  color: #00ccff;
  font-size: 15px;
  margin: 3px 0;
}

#counter-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin: 7px 0;
}

.c-digit {
  display: inline-block;
  width: 28px;
  height: 42px;
  background: #080808;
  color: #ff6600;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 28px;
  font-weight: bold;
  line-height: 42px;
  text-align: center;
  border: 2px inset #1a1a1a;
  text-shadow: 0 0 10px #ff6600, 0 0 3px #ff3300;
  box-shadow: inset 0 0 8px #ff440018;
}

.c-sep {
  color: #ff6600;
  font-size: 24px;
  font-weight: bold;
  padding: 0 1px;
  text-shadow: 0 0 6px #ff6600;
}

/* ── Info table ───────────────────────────── */
#info-box {
  margin: 12px auto;
}

.info-table {
  border-color: #005500 !important;
  background: #001100;
}

.info-label {
  color: #aaffaa;
  font-size: 14px;
  padding: 6px 12px;
  border-color: #005500 !important;
}

.info-val {
  color: #ffffff;
  font-size: 14px;
  padding: 6px 12px;
  border-color: #005500 !important;
}

/* ── Construction notice ──────────────────── */
#construction-notice {
  margin: 14px 0;
}

/* ── Links section ────────────────────────── */
#links-section {
  margin: 15px auto;
  padding: 16px 20px;
  background: #001500;
  border: 3px double #00ff00;
  max-width: 480px;
}

.section-ttl {
  color: #ffff00;
  font-size: 20px;
  text-shadow: 0 0 10px #ffff00;
  margin-bottom: 6px;
}

.link-row {
  margin: 14px 0;
  line-height: 1.9;
}

.banner-img {
  border: 1px solid #555;
  vertical-align: middle;
}

.banner-img:hover {
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}

.link-desc {
  display: block;
  color: #aaffaa;
  font-size: 14px;
  margin-top: 3px;
}

/* ── Footer ───────────────────────────────── */
#footer {
  margin-top: 18px;
  padding-top: 6px;
}

/* ── Blink animation ──────────────────────── */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.blink {
  animation: blink 1s step-end infinite;
}

/* ── Link colors ──────────────────────────── */
a         { color: #00ff88; text-decoration: underline; }
a:visited { color: #00aa55; }
a:hover   { color: #ffff00; }

/* ── Scrollbar ────────────────────────────── */
::-webkit-scrollbar { width: 10px; background: #001100; }
::-webkit-scrollbar-thumb { background: #004400; border: 1px solid #009900; }
::-webkit-scrollbar-thumb:hover { background: #009900; }

/* ================================================
   MOBILE RESPONSIVE  (max-width: 600px)
   ================================================ */
@media (max-width: 600px) {
  #wrap {
    padding: 8px 10px 20px;
  }

  #rainbow-title {
    font-size: 17px;
    letter-spacing: 1px;
  }

  /* Stack nav buttons vertically */
  #nav-area table,
  #nav-area tbody,
  #nav-area tr,
  #nav-area td {
    display: block;
  }

  #nav-area tr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .nav-btn {
    padding: 12px 24px;
    font-size: 16px;
    min-width: 200px;
    text-align: center;
  }

  #scroll-area {
    font-size: 13px;
  }

  #counter-wrap {
    padding: 10px 14px;
    width: 90%;
  }

  .c-digit {
    width: 24px;
    height: 36px;
    font-size: 24px;
    line-height: 36px;
  }

  .c-sep {
    font-size: 20px;
  }

  .info-table {
    width: 90%;
  }

  #links-section {
    padding: 12px 10px;
    max-width: 100%;
  }
}