/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
.skip-link { position: absolute; top: -100%; left: 0; background: var(--bg); color: var(--text); padding: 8px 16px; z-index: 9999; font-size: 14px; }
.skip-link:focus { top: 0; }
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Special Elite', serif;
  min-height: 100vh;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('https://pub-43a141f7a8b84a30a90fcc01da2114ca.r2.dev/Texture_landscape.webp') repeat;
  background-size: 600px;
  opacity: 1;
}

a { color: inherit; text-decoration: none; }

.landing, .pile-view, .tech-page, .music-page, .book-view { position: relative; z-index: 1; }

/* ===== Background Slideshow ===== */
.bg-slideshow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  will-change: opacity;
  contain: strict;
}

.bg-slideshow img.active {
  opacity: 0.06;
}

/* ===== Back Link ===== */
.back-link {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
  font-family: 'Bangers', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
  text-decoration: none;
  color: var(--text);
  padding: 10px 18px;
}
.back-link:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--border);
}

/* ===== Legal Link ===== */
.legal-link {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 998;
  font-family: 'Special Elite', serif;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s;
}
.legal-link:hover {
  opacity: 1;
}

/* ===== Card Logo (shared) ===== */
.card-logo {
  width: 12px;
  height: 12px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
  mix-blend-mode: multiply;
}

[data-theme="dark"] .card-logo {
  mix-blend-mode: screen;
}

@media (max-width: 600px) {
  .back-link { font-size: 14px; padding: 10px 16px; top: 10px; left: 10px; }
  .legal-link { bottom: 6px; right: 6px; font-size: 9px; }
}