@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Space+Mono:wght@400;700&display=swap');

* { box-sizing: border-box; }

html {
  background: #2a0a4a;
}

body {
  margin: 0; padding: 0; min-height: 100vh; color: #eafcff;
  font-family: 'Space Mono', monospace;
  background: linear-gradient(180deg, #2a0a4a 0%, #5a1266 34%, #a3247e 58%, #ff5a8a 78%, #ffb36b 100%);
  background-repeat: no-repeat;
  overflow-x: hidden;
}

/* ===== SUN + FLOOR BACKDROP ===== */
.sun {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%); width: 260px; height: 260px; border-radius: 50%;
  background: linear-gradient(180deg, #fff2b0, #ff7ac0 55%, #ff3d7f); z-index: 0;
  -webkit-mask: repeating-linear-gradient(#000 0 10px, transparent 10px 16px) bottom/100% 55% no-repeat, linear-gradient(#000 0 45%) top/100% 45% no-repeat;
          mask: repeating-linear-gradient(#000 0 10px, transparent 10px 16px) bottom/100% 55% no-repeat, linear-gradient(#000 0 45%) top/100% 45% no-repeat;
  filter: drop-shadow(0 0 40px rgba(255,120,180,.6)); opacity: .9;
}

.floor { position: fixed; left: -25%; right: -25%; bottom: 0; height: 42vh; z-index: 0; perspective: 280px; overflow: hidden; }
.floor::before {
  content: ''; position: absolute; inset: -40% -10% -2% -10%; transform: rotateX(74deg);
  background-image: linear-gradient(rgba(0,240,255,.55) 2px, transparent 2px), linear-gradient(90deg, rgba(255,60,160,.55) 2px, transparent 2px);
  background-size: 44px 44px; animation: vw-scroll 1.1s linear infinite;
}
@keyframes vw-scroll { to { background-position: 0 44px; } }
@media (prefers-reduced-motion: reduce) { .floor::before { animation: none; } }

a { color: #00f0ff; text-decoration: none; }
a:hover { color: #ff6ad5; }

.site { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 0 14px 40px; }

/* ===== HEADER ===== */
.header { text-align: center; padding: 60px 12px 26px; }
.header .jp { font-family: 'Orbitron'; font-size: 13px; letter-spacing: 8px; color: #00f0ff; text-shadow: 0 0 8px #00f0ff; }
.chrome {
  font-family: 'Orbitron'; font-weight: 900; font-size: 52px; letter-spacing: 3px; margin: 8px 0 6px; line-height: 1;
  background: linear-gradient(180deg, #ffffff 6%, #9fdcff 34%, #3a6fb0 50%, #0a1a3a 51%, #3a6fb0 63%, #ff9de0 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 3px 0 #ff2d95) drop-shadow(-2px -1px 0 #00e0ff);
}
.chrome a { color: inherit; text-decoration: none; }
.header .tagline { font-size: 13px; letter-spacing: 3px; color: #ffd6f2; text-transform: uppercase; }

/* ===== NAV ===== */
.topnav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 22px 0; border: 1px solid #00f0ff;
  box-shadow: 0 0 18px rgba(0,240,255,.5), inset 0 0 18px rgba(255,45,149,.25); background: rgba(20,4,40,.6);
}
.topnav a {
  padding: 11px 22px; font-family: 'Orbitron'; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: #eafcff;
  border-right: 1px solid rgba(0,240,255,.3); text-transform: uppercase;
}
.topnav a:last-child { border-right: none; }
.topnav a:hover, .topnav a.active { color: #0a0020; background: linear-gradient(180deg, #00f0ff, #ff6ad5); text-shadow: none; }
.topnav .nav-sep { display: none; }

/* ===== LAYOUT ===== */
.main { display: flex; gap: 16px; align-items: flex-start; }
.panel { background: rgba(18,4,38,.72); border: 1px solid #ff2d95; box-shadow: 0 0 16px rgba(255,45,149,.4), inset 0 0 22px rgba(0,240,255,.08); backdrop-filter: blur(3px); }

.sidebar { width: 210px; min-width: 210px; padding: 16px; color: #eafcff; }
.sidebar h3 {
  font-family: 'Orbitron'; font-size: 12px; letter-spacing: 2px; color: #00f0ff; text-shadow: 0 0 6px #00f0ff;
  border-bottom: 1px solid rgba(0,240,255,.4); padding-bottom: 6px; margin: 0 0 10px; text-transform: uppercase;
}
.sidebar ul { list-style: none; padding: 0; margin: 0 0 18px; }
.sidebar li { margin: 0 0 8px; font-size: 13px; }
.sidebar li::before { content: '\25B8 '; color: #ff6ad5; }
.sidebar a { color: #eafcff; }
.sidebar a:hover { color: #ff6ad5; }
.sidebar .active-folder { color: #ffd6f2; font-weight: bold; }
.sidebar .active-folder::before { content: '\25B8 '; color: #00f0ff; }
.side-note { font-size: 12px; color: #ffd6f2; line-height: 1.8; margin: 0 0 14px; }
.side-note b, .side-note .hl { color: #00f0ff; }
.side-note .warn { color: #ff6ad5; }

.back-btn {
  display: block; font-family: 'Orbitron'; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  text-align: center; padding: 8px 8px; font-size: 11px; margin-bottom: 14px;
  color: #0a0020 !important; background: linear-gradient(180deg, #00f0ff, #ff6ad5); border: 1px solid #fff;
}
.back-btn:hover { filter: brightness(1.1); text-decoration: none !important; }

.content { flex: 1; min-width: 0; padding: 22px; color: #eafcff; }
.content h2 {
  font-family: 'Orbitron'; font-weight: 900; font-size: 24px; letter-spacing: 2px; margin: 0 0 6px; color: #fff;
  text-shadow: 0 0 10px #ff2d95, 2px 2px 0 #00e0ff; text-transform: uppercase;
}
.content p { font-size: 14px; line-height: 1.7; color: #eafcff; }
.content p strong, .content p em { color: #ffd6f2; }

.breadcrumb { font-size: 12px; color: #ffd6f2; margin-bottom: 10px; }
.breadcrumb a { color: #00f0ff; font-weight: normal; }

.section-desc {
  background: rgba(0,0,0,.28); border: 1px solid rgba(0,240,255,.4); border-top: none;
  padding: 9px 14px; font-size: 12px; color: #ffd6f2; font-style: italic;
}

/* ===== SECTION HEADER BAR (galleries / all-photos) ===== */
.section-header {
  display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; padding: 9px 14px;
  background: linear-gradient(90deg, #1a0033, #3a0a5a, #1a0033); border-left: 3px solid #00f0ff; border-right: 3px solid #ff2d95;
}
.section-header h3 { font-family: 'Orbitron'; margin: 0; font-size: 15px; letter-spacing: 2px; color: #ffd6f2; text-transform: uppercase; }
.section-count { margin-left: auto; font-size: 11px; color: #00f0ff; }

/* ===== GENERIC BOX (about/info panels) ===== */
.box { background: rgba(0,0,0,.3); border: 1px solid rgba(0,240,255,.4); padding: 14px; margin-top: 16px; }
.box h3 { font-family: 'Orbitron'; margin: 0 0 10px; color: #ff6ad5; font-size: 14px; letter-spacing: 1px; text-shadow: 0 0 6px rgba(255,45,149,.6); text-transform: uppercase; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table td { padding: 5px 8px; border: 1px solid rgba(0,240,255,.25); color: #eafcff; }
.stats-table td:first-child { background: rgba(0,240,255,.12); font-weight: bold; width: 150px; color: #00f0ff; }

/* ===== LIGHTBOX (shared) ===== */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999; padding: 12px; align-items: center; justify-content: center; flex-direction: column;
  background: rgba(10,0,32,.94);
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 80vh; border: 2px solid #00f0ff; box-shadow: 0 0 40px rgba(0,240,255,.6); object-fit: contain; background: #1a0033; }
.lb-caption, .lightbox-caption { margin-top: 12px; font-family: 'Orbitron'; color: #ff6ad5; text-shadow: 0 0 8px #ff2d95; letter-spacing: 2px; text-align: center; font-size: 13px; }
.lb-close, .lightbox-close {
  position: absolute; top: 14px; right: 20px; font-size: 30px; color: #ff2d95; background: none; border: 1px solid #ff2d95;
  width: 44px; height: 44px; cursor: pointer; text-shadow: 0 0 8px #ff2d95; z-index: 10000; line-height: 1;
}
.lb-close:hover, .lightbox-close:hover { color: #00f0ff; border-color: #00f0ff; }
.lb-nav, .lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 34px; color: #00f0ff; background: none; border: none;
  cursor: pointer; text-shadow: 0 0 10px #00f0ff; padding: 10px; z-index: 10000; user-select: none;
}
.lb-nav:hover, .lightbox-nav:hover { color: #ff6ad5; }
.lb-prev, .lightbox-prev { left: 12px; }
.lb-next, .lightbox-next { right: 12px; }

/* ===== TICKER / FOOTER ===== */
marquee, .ticker { color: #00f0ff; text-shadow: 0 0 5px #00f0ff; }
.footer { text-align: center; font-size: 11px; letter-spacing: 2px; color: #ffd6f2; margin: 24px 0 0; text-transform: uppercase; }

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .chrome { font-size: 26px; letter-spacing: 1px; }
  .sun { width: 170px; height: 170px; top: 52px; }
  .header { padding: 44px 12px 18px; }
  .sidebar { display: none; }
  .main { display: block; }
  .content { padding: 16px; }
  .box { padding: 12px; }
  .stats-table { font-size: 12px; }
  .stats-table td:first-child { width: 110px; }
}