/* =====================================================
   CENTERED TEMPLATE STRUCTURE WITH NEKOWEB PALETTE
   - Linter Clean (No universal selector *, no var())
   - Fully Centered Wrapper Container
   - Top Horizontal Navigation Bar
===================================================== */

html, body, div, aside, main, section, article, nav, header, footer, ul, li {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #020302;
  color: #9acb82;
  font-family: "MS Gothic", "ＭＳ ゴシック", Osaka, monospace;
  font-size: 15px;
  line-height: 1.8;
}

/* =====================================================
   CENTERED CONTAINER (TEMPLATE STRUCTURE)
===================================================== */

#container {
  max-width: 960px;
  margin: 20px auto; /* Centers the whole website horizontally */
  padding: 0 10px;
}

/* =====================================================
   HEADER & TOP HORIZONTAL NAV
===================================================== */

#headerArea {
  background-color: #070907;
  border: 3px solid #b52243;
  margin-bottom: 15px;
}

.site-header-title {
  padding: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #aff78d;
  border-bottom: 2px solid #64172e;
}

/* TOP HORIZONTAL NAV BAR */
#navbar {
  background-color: #050805;
}

#navbar ul {
  display: flex;
  flex-direction: row; /* Force links into a horizontal row */
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
  padding: 0;
}

#navbar li {
  flex: 1;
  text-align: center;
}

#navbar li a {
  display: block;
  padding: 10px 0;
  color: #8bc776;
  font-family: "Courier New", monospace;
  font-size: 13px;
  text-decoration: none;
  border-right: 1px dotted #602337;
}

#navbar li:last-child a {
  border-right: none;
}

#navbar li a:hover {
  background-color: #18070c;
  color: #bcff9b;
}

#navbar li .active {
  background-color: #101a0e;
  color: #b5ff92;
}

/* =====================================================
   FLEX LAYOUT (3 COLUMNS SIDE-BY-SIDE)
===================================================== */

#flex {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: flex-start;
}

/* SIDEBARS */
aside {
  background-color: #070907;
  border: 3px solid #b52243;
  width: 200px;
  flex-shrink: 0;
  padding: 15px;
  font-family: "Courier New", monospace;
  font-size: 12px;
}

#leftSidebar {
  order: 1;
}

#rightSidebar {
  order: 3;
}

aside h2 {
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #64172e;
  color: #aff78d;
  font-size: 13px;
  text-align: center;
  letter-spacing: 2px;
}

/* MAIN CENTER COLUMN */
main {
  order: 2;
  flex: 1;
  min-width: 0;
  background-color: #050805;
  border: 3px solid #c3294c;
  padding: 22px 28px;
}
/* Invisible anchor target to stop top-clipping */
.scroll-target {
  display: block;
  height: 20px;
  margin-top: -20px;
  visibility: hidden;
}

/* =====================================================
   CONTENT & TYPOGRAPHY STYLES
===================================================== */

a {
  color: #a5ef82;
  text-decoration: none;
}

a:hover {
  color: #ff4162;
  text-decoration: underline;
}

.glitch {
  margin-top: 6px;
  margin-bottom: 2px;
  color: #b5ff92;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}

.tiny-label {
  color: #ed3a5a;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 4px;
  text-align: center;
}

.divider {
  margin: 15px 0 20px 0;
  border-top: 2px solid #6e213b;
  color: #e53656;
  text-align: center;
}

.warning {
  color: #b5ff92;
  font-size: 15px;
  font-weight: bold;
}

.nagai-yume {
  margin: 25px 0;
  color: #e33b5a;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 6px;
  text-align: center;
}

.small-text {
  color: #667660;
  font-size: 11px;
}

.entry-note {
  margin: 25px 0;
  padding: 11px 13px;
  border: 2px solid #74213c;
  background-color: #080b08;
}

.entry-label {
  margin-bottom: 7px;
  color: #ef3b5b;
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: bold;
}

.archive-list a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px dotted #602337;
  color: #8bc776;
  font-size: 11px;
}

.archive-list time {
  display: block;
  color: #df3857;
  font-size: 9px;
}

.archive-end {
  padding-top: 8px;
  color: #8e2946;
  font-size: 9px;
  text-align: center;
}

/* BOTTOM FOOTER */
#footer {
  margin-top: 15px;
  background-color: #070907;
  border: 3px solid #b52243;
  padding: 10px;
  text-align: center;
  color: #53634f;
  font-family: "Courier New", monospace;
  font-weight: bold;
  font-size: 15px;
}

/* =====================================================
   RESPONSIVE (MOBILE)
===================================================== */

@media screen and (max-width: 800px) {
  #flex {
    flex-direction: column;
  }

  aside, main {
    width: 100%;
    order: unset;
  }

  #navbar ul {
    flex-direction: column;
  }

  #navbar li a {
    border-right: none;
    border-bottom: 1px dotted #602337;
  }
}

/* ==========================================
   SLOW & GLITCHY RINGU CURSED TICKER
   ========================================== */

.cursed-ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: #050203;
    border-top: 1px dotted #602337;
    border-bottom: 1px dotted #602337;
    padding: 4px 0;
    margin-top: 8px;
    position: relative;
}

/* Smooth, ultra-slow infinite scroll */
.cursed-ticker-track {
    display: flex;
    width: max-content;
    /* 90s duration for a slow, eerie, readable creep */
    animation: cursedMarquee 90s linear infinite;
}

.cursed-ticker-content {
    white-space: nowrap;
    font-family: monospace, "Courier New", sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    color: #ef3b5b;
    padding-right: 50px;
    
    /* Dual animation: continuous glitching while scrolling */
    animation: vhsGlitch 2s infinite steps(1);
}

/* Smooth Marquee Movement */
@keyframes cursedMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* CRT / VHS Distortion Glitch Keyframes */
@keyframes vhsGlitch {
    0% {
        text-shadow: 2px 0 #ff4162, -2px 0 #00ffff;
        transform: skewX(0deg);
    }
    10% {
        text-shadow: -2px 0 #ef3b5b, 2px 0 #602337;
        transform: skewX(-12deg) scaleY(1.1);
        opacity: 0.8;
    }
    12% {
        text-shadow: none;
        transform: skewX(0deg);
        opacity: 1;
    }
    45% {
        text-shadow: 3px 0 #ff4162, -1px 0 #000;
        transform: translateX(-3px);
    }
    47% {
        text-shadow: none;
        transform: translateX(0);
    }
    70% {
        text-shadow: -3px 0 #ef3b5b, 3px 0 #ff4162;
        transform: skewX(15deg);
        opacity: 0.4;
    }
    72% {
        text-shadow: none;
        transform: skewX(0deg);
        opacity: 1;
    }
    90% {
        text-shadow: 1px 0 #ff4162, -3px 0 #602337;
    }
    100% {
        text-shadow: 2px 0 #ff4162, -2px 0 #00ffff;
    }
}

/* ==========================================
   DARK FADE + YOUKAI HANNYA KANJI BACKGROUND
   ========================================== */

body {
    margin: 0;
    padding: 0;
    background-color: #050203;
    
    /* LAYER 1 (Top): Repeating faint "妖怪 般若" SVG texture
       LAYER 2 (Bottom): Dark blood-red radial glow fading to pitch black */
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="180" viewBox="0 0 220 180"><text x="15" y="45" fill="%23ef3b5b" font-size="22" opacity="0.15" font-family="serif">妖怪 般若</text><text x="110" y="95" fill="%23ef3b5b" font-size="20" opacity="0.08" font-family="serif">妖怪 般若</text><text x="25" y="145" fill="%23ef3b5b" font-size="22" opacity="0.12" font-family="serif">妖怪 般若</text></svg>'),
        radial-gradient(circle at center, #230810 0%, #0d0407 45%, #030102 100%);
        
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    min-height: 100vh;
}

/* Central container floating on top */
#wrapper {
    max-width: 900px; /* Match your site wrapper width */
    margin: 0 auto;
    background-color: #0d0608;
    position: relative;
    z-index: 1;
    /* Soft crimson shadow blending into the background fade */
    box-shadow: 0 0 35px rgba(96, 35, 55, 0.4), 0 0 10px rgba(0, 0, 0, 0.9);
}

.photo-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 15px 0;
}

.photo-row img {
  width: 32%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}