/* --- Base Reset & Core Layout --- */
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--accent);
  font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  display: flex;
  min-height: 100vh;
}

::selection { background: var(--highlight); color: #fff; }

/* --- Theme Variables --- */

[data-theme="Black Butler"] { --bg: #101214; --card-bg: #eae9eb; --accent: #66211c; --link: #4a0000; --highlight: #4e89a9; --main-img: url('https://neovampzz.neocities.org/Images/BB.jpg'); }

[data-theme="Needy Streamer Overdose"] { --bg: #ffbae4; --card-bg: #fff; --accent: #eb78cf; --link: #ff00c3; --highlight: #a4d0ec; --main-img: url('https://neovampzz.neocities.org/Images/NSO.jpg'); }

[data-theme="Serial Experiments Lain"] { --bg: #1a1716; --card-bg: #fdfde3; --accent: #fa87a7; --link: #6e2f38; --highlight: #ffbc81; --main-img: url('https://neovampzz.neocities.org/Images/SEL.jpg'); }

[data-theme="Dreamscape"] { --bg: #e1e1e1; --card-bg: #fff; --accent: #0078d7; --link: #005a9e; --highlight: #b3d7ff; --main-img: url('https://neovampzz.neocities.org/Images/DV.jpg'); }

[data-theme="Childhood crush"] { --bg: yellow; --card-bg: yellow; --accent: yellow; --link: yellow; --highlight: yellow; --main-img: url('https://i.pinimg.com/originals/3d/49/84/3d498484039c5d866fc4eb41ccaf9b95.gif'); }

/* --- Layout Elements --- */
.side-image {
  position: fixed;
  left: 0; top: 0; width: 50%; height: 100vh;
  background: var(--card-bg) var(--main-img) no-repeat center/cover;
  z-index: 10;
}

.content-wrapper, .center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-wrapper { margin-left: 50%; width: 50%; padding: 2rem; }

container {
  width: 100%; max-width: 600px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  display: block;
}

/* --- Header & Nav --- */
header { padding: 2em 1em; background: var(--header-img) no-repeat center/cover; color: #fff; text-align: center; }
header h1, header p { font-family: "Arial Black", Gadget, sans-serif; font-weight: 900; text-shadow: 2px 2px 4px #000; text-transform: uppercase; }

nav { display: flex; flex-wrap: wrap; background: var(--accent); justify-content: center; }
nav a { padding: 10px 20px; margin: 5px; color: var(--card-bg); transition: 0.3s; text-decoration: none; }
nav a:hover { animation: wobble 1s; color: var(--highlight)}

/* --- Main Content --- */
main { padding: 2em; }
main p { text-align: justify; line-height: 1.6; }
main a { color: var(--link); font-weight: bold; }
main b, h2 { color: var(--accent); }

.Tomoko {
  float: left; width: 150px; margin-right: 15px;
  clip-path: circle(40%); shape-outside: circle(45%);
  object-fit: cover; object-position: 100% 10%; filter: grayscale(100%);
}

/* --- Collapsibles & Tables --- */
.collapsible {
  background: var(--accent); color: white; border: none;
  padding: 15px; width: 100%; text-align: left;
  font-size: 1.1rem; margin-top: 10px; border-radius: 5px; cursor: pointer; transition: 0.3s;
}
.collapsible:hover { filter: brightness(1.2); }

.content, .collapsible-content { display: none; padding: 15px 18px; border-left: 2px solid var(--accent); margin-bottom: 20px; }

/* Table scroll fix */
.table-container { width: 100%; overflow-x: auto; display: block; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 400px; } /* Increased min-width to force scroll on small screens */
table, td, th { border: 1px solid var(--accent); padding: 8px; }
table img { width: 80px; height: auto; display: block; margin: 0 auto; cursor: pointer; }

/* --- Slideshow & Modals --- */
.slideshow-container { max-width: 1000px; position: relative; margin: auto; }
.mySlides { display: none; }
.prev, .next {
  cursor: pointer; position: absolute; top: 50%; padding: 16px; margin-top: -22px;
  font-weight: bold; font-size: 18px; transition: 0.6s; border-radius: 0 3px 3px 0; user-select: none;
}
.next { right: 0; border-radius: 3px 0 0 3px; }
.prev:hover, .next:hover { background: rgba(0,0,0,0.8); color: white; }

.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background: #bbb; border-radius: 50%; display: inline-block; transition: 0.6s; }
.active, .dot:hover { background: #717171; }

.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.modal-content { background: #fff; color: #000; margin: 10% auto; padding: 30px; border-radius: 8px; width: 80%; max-width: 500px; position: relative; }
.close { position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; }

/* --- Warning Box & Buttons --- */
.center-container { min-height: 100vh; background: var(--main-img) center/cover; }
.theme-picker, .content-box { padding: 10px; border-radius: 8px; text-align: center; }
.theme-picker { background: rgba(255, 255, 255, 0.8); margin-bottom: 20px; }
.content-box { background: white; max-width: 400px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

.link-button {
  display: inline-block; margin-top: 20px; padding: 10px 25px; border-radius: 5px;
  background: var(--highlight, #444); color: white; text-decoration: none; font-weight: bold; transition: 0.3s;
}
.link-button:hover { background: var(--accent, #666); transform: scale(1.05); }

/* --- Animations & Queries --- */
@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px) rotate(-5deg); }
  30% { transform: translateX(3px) rotate(3deg); }
}

@media screen and (max-width: 800px) {
  .side-image { display: none; }
  .content-wrapper { margin-left: 0; width: 100%; padding: 10px; }
  nav a { flex-grow: 1; text-align: center; }
}