/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("bluesun.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: aqua;
}
.site-header {
  text-align: center;
  margin-top: 30px;
  color: aqua;
}

.site-title {
  font-size: 64px;
  color: aqua;
  letter-spacing: 6px;
  margin: 0;
}.site-tagline {
  margin-top: 12px;
  font-size: 20px;
  color: white;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}.gif-row {
  text-align: center;
}.board-scroll {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 25px;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);

}

.board {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
}

.board img {
  max-width: 120px;
  max-height: 120px;
  margin-bottom: 10px;
  border: 2px solid aqua;
  border-radius: 8px;
}

.board:hover img {
  filter: brightness(1.2);
}

.board:hover span {
  text-decoration: underline;
}.board-header {
  text-align: center;
  color: aqua;
  margin-bottom: 30px;
}

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  padding: 20px;
}

.thread {
  background: rgba(0,0,0,0.6);
  border: 2px solid aqua;
  border-radius: 8px;
  padding: 10px;

  text-decoration: none;
  color: white;
  text-align: center;

  font-size: 14px;
}

.thread img {
  max-width: 100%;
  max-height: 120px;
  margin-bottom: 8px;
}

.thread span {
  display: block;
  color: aqua;
  font-size: 12px;
  margin-top: 4px;
}

.thread:hover {
  background: rgba(0,255,255,0.15);
}.thread {
  max-width: 900px;
  margin: 40px auto;
}

.post {
  background: rgba(0,0,0,0.6);
  border: 1px solid aqua;
  padding: 14px;
  margin-bottom: 18px;
  color: aqua;
  font-size: 15px;
}

.post.op {
  border-width: 2px;
}

.post-header {
  font-size: 13px;
  margin-bottom: 8px;
  color: #aaa;
}

.name {
  color: aqua;
  font-weight: bold;
}

.post-id {
  margin-left: 10px;
}

.date {
  margin-left: 10px;
  font-style: italic;
}

.post img {
  max-width: 300px;
  display: block;
  margin: 10px 0;
}

.post p {
  margin: 6px 0;
  white-space: pre-wrap;
}.trippy-gifs {
  margin: 40px 0;
  text-align: center;
}

.trippy-gifs img {
  margin: 0 10px;
  width: 96px;          /* scale up small GIFs */
}.about-image {
  margin: 40px 0;
  text-align: center;
}

.about-image img {
  width: 120px;              /* scale small GIFs */
}.board-cartoons {
  color: aqua;
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
}.comic {
  max-width: 800px;
  margin: 30px auto;
  text-align: center;
}

.comic img {
  max-width: 100%;
  margin-bottom: 20px;
  image-rendering: auto; /* comics should be crisp */
}

.comic-desc {
  text-align: center;
  opacity: 0.9;
}

.comic-notes {
  max-width: 600px;
  margin: 0 auto;
  font-size: 14px;
  opacity: 0.8;
}

.comic-nav {
  text-align: center;
  margin: 30px 0;
}hr {
  border: none;
  height: 1px;
  background-color: aqua;
  margin: 30px auto;
  width: 80%;
}.board-music {
  color: aqua;
  font-family: Georgia, "Times New Roman", serif;
}.music {
  max-width: 800px;
  margin: 30px auto;
  text-align: center;
}.board-music .page-title {
  color: #7fffd4; /* aquamarine */
  letter-spacing: 4px;
}
.board-music .board-description {
  font-style: italic;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto 30px auto;
}
.board-music .post {
  background: rgba(0, 0, 0, 0.7);
  border-color: #444;
}
.board-music img {
  image-rendering: auto;
}
.board-music a {
  color: #7fffd4;
}

.board-music a:hover {
  text-decoration: underline;
}.main-theme {
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
  color: white;
  display: flex;
  justify-content: center;
  gap: 20px;
}.music-links {
  display: flex;
  justify-content: center;
  gap: 20px;          /* space between links */
  margin: 20px 0;
  flex-wrap: wrap;    /* prevents overflow on small screens */
}

.music-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.music-links a:hover {
  text-decoration: underline;
}.update-window {
  width: 300px;
  margin: 40px auto;
  padding: 15px;

  background: rgba(0, 0, 0, 0.7);
  border: 2px solid aqua;

  color: white;
  font-family: monospace;
  text-align: left;
}#chessboard {
  display: grid;
  grid-template-columns: repeat(8, 40px);
  grid-template-rows: repeat(8, 40px);
  width: max-content;
  margin: 20px auto;
  border: 2px solid aqua;
}

.square {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  user-select: none;
}

.square.light {
  background: #eee;
}

.square.dark {
  background: #666;
}

.square.selected {
  outline: 2px solid red;
}#chessboard {
  background: rgba(0,0,0,0.3);
}
.game-row {
  display: flex;
  gap: 30px;

  overflow-x: auto;
  padding: 20px 10px;

  max-width: 1000px;     /* key */
  margin: 0 auto;        /* key */

  justify-content: center;
}

.game-row::-webkit-scrollbar {
  height: 6px;
}

.game-row::-webkit-scrollbar-track {
  background: black;
}

.game-row::-webkit-scrollbar-thumb {
  background: aqua;
}
  .game-panel {
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontal centering */
  text-align: center;
}

.game-hint {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 6px;
}#pong {
  background: black;
  border: 2px white;
}#breakout {
  background: black;
  border: 2px white;
}#snake {
  background: black;
  border: 2px white;
}#tetris {
  background: black;
  border: 2px white;
}.right-gifs {
  width: 200px;
  margin-left: 20px;
  text-align: center;
}

.right-gifs img {
  display: block;
  margin-bottom: 15px;
}.eight-ball {
  text-align: center;
  margin: 40px 0;
  font-family: monospace;
  color: white;
}

#eight-ball-display {
  width: 260px;
  margin: 15px auto;
  padding: 15px;

  background: black;
  border: 2px solid aqua;

  font-size: 14px;
  min-height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;
}

#eight-ball-button {
  background: black;
  color: aqua;
  border: 2px solid aqua;
  padding: 6px 12px;
  cursor: pointer;
  font-family: monospace;
}

#eight-ball-button:hover {
  background: aqua;
  color: black;
}.shrine {
  text-align: center;
  margin: 40px 0;
  font-family: serif;
  color: white;
  opacity: 0.9;
}

.shrine-image {
  width: 140px;
  height: auto;
  border: 2px solid rgba(255,255,255,0.3);
}

.shrine-verse {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.shrine-verse span {
  font-size: 11px;
  opacity: 0.7;
}.shrine-image {
  box-shadow: 0 0 12px rgba(255, 215, 150, 0.3);
}.shrine a:hover img {
  opacity: 0.85;
}.void-page {
  background: black;
  color: white;
  font-family: serif;
}

.void-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 40px;
}

.void-gif {
  width: 240px;
  height: auto;
  opacity: 0.9;
}

.void-text {
  max-width: 520px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
}

.void-text p {
  margin-bottom: 18px;
}

.void-link {
  position: static;
  bottom: 10px;
  right: 10px;

  color: rgba(255,255,255,0.2);
  text-decoration: none;
  font-size: 12px;
  font-family: monospace;

  z-index: 5;
}
.void-container {
  justify-content: flex-start;
  padding-top: 120px;
}.void-page {
  background: black url("void.gif") center center no-repeat;
  background-size: cover;

  color: white;
  font-family: serif;
}.void-text {
  background: rgba(0, 0, 0, 0.6);
  padding: 25px;
  max-width: 520px;
  text-align: center;
  line-height: 1.6;
  opacity: 0.9;
}.void-page {
  background-attachment: fixed;
}.void-page {
  filter: brightness(0.8);
}.void-page {
  cursor: none;
}.frequency-switch {
  text-align: center;
  margin: 30px 0;
  font-family: monospace;
  font-size: 13px;
  color: white;
  opacity: 0.8;
}

.frequency-switch button {
  background: black;
  color: aqua;
  border: 1px solid aqua;
  margin: 0 4px;
  padding: 2px 8px;
  font-family: monospace;
  cursor: pointer;
}

.frequency-switch button:hover {
  background: aqua;
  color: black;
}
.mode-calm {
  filter: none;
}

/* STATIC */
.mode-static {
  filter: contrast(1.1) brightness(0.95);
}

/* NOISY */
.mode-noisy {
  filter: contrast(1.3) saturate(1.2);
}.game-link {
  text-decoration: none;
  color: inherit;
}

.game-link .game-panel {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.game-link:hover .game-panel {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(0,255,255,0.4);
} 
.fake-screen {
  width: 240px;
  height: 160px;

  background: black;
  border: 2px solid aqua;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; /* critical */
}

.fake-screen img {
  max-width: 100%;
  max-height: 100%;
}.bottom-banner {
  width: 100%;
  height: 150px;          /* ← change this if you want */
  overflow: hidden;
  margin-top: 40px;
}

.bottom-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills strip without distortion */
  display: block;
}#HCB_comment_box {
  max-width: 600px;
  margin: 30px auto;
  font-family: monospace;
}

#HCB_comment_box textarea,
#HCB_comment_box input {
  background: black;
  color: white;
  border: 1px solid aqua;
}

#HCB_comment_box input[type="submit"] {
  background: black;
  color: aqua;
  cursor: pointer;
}#rare-popup {
  position: fixed;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}#rare-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);

  display: none;          /* ← THIS IS CRITICAL */
  align-items: center;
  justify-content: center;

  z-index: 9999;
}


.rare-popup-box {
  background: black;
  inset: 0;
  border: 2px solid aqua;
  padding: 20px;
  max-width: 300px;
  text-align: center;
  font-family: monospace;
  color: white;
}

.rare-popup-box button {
  margin-top: 10px;
  background: black;
  color: aqua;
  border: 1px solid aqua;
  padding: 4px 10px;
  cursor: pointer;
}.center-image {
  display: block;
  margin: 20px auto;
}.parent {
  justify-content: center;
}.about-image {
  transform: scale(1.4);
}.about-bottom img {
  width: 200px;
}.comic-image {
  transform: rotate(0deg);
  display: block;
  margin: 20px auto;
}.content-box {
  max-width: 700px;
  margin: 40px auto;
  padding: 25px;

  background: rgba(0, 0, 0, 0.75);
  border: 2px solid aqua;

  font-family: monospace;
  color: white;
  line-height: 1.6;
}.shrine-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 30px auto;
}

.shrine-center {
  width: 300px;   /* same width the image used to have */
  height: 1px;    /* invisible spacer */
}

.candle {
  width: 60px;
  height: auto;
}
body{ cursor: url('Barracuda.cur'), auto;}
.music-video {
  display: block;
  margin: 30px auto;
  max-width: 640px;
  width: 100%;

  border: 2px solid aqua;
  background: black;
}.music-toggle {
  background: black;
  color: aqua;
  border: 1px solid aqua;
  padding: 4px 10px;
  font-family: monospace;
  cursor: pointer;
  opacity: 0.7;
}

.music-toggle:hover {
  opacity: 1;
}#eight-ball-button {
  position: relative;
  z-index: 1000;
}.void-trigger {
  margin-top: 40px;
  text-align: center;
  font-family: monospace;
  letter-spacing: 2px;
  opacity: 0.5;
  cursor: pointer;
}

.void-trigger:hover {
  opacity: 1;
}.archive-list a {
  color: aqua;
  text-decoration: none;
}

.archive-list a:hover {
  text-decoration: underline;
}#chat-window {
  position: relative;
  margin: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 300px;
  height: 340px;

  background: solid aqua;
  border: 2px solid aqua;
  font-family: monospace;
  z-index: 9999;
}


#chat-header {
  background: aqua;
  color: white;
  padding: 4px;
  cursor: move;
  font-size: 12px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chat-close {
  cursor: pointer;
}

.chat-frame {
  width: 100%;
  height: calc(100% - 22px);
  border: none;
}

.side-gifs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-gifs img {
  width: 48px; /* classic narrow GIF column */
  height: auto;
}

.content-box {
  max-width: 700px;
}.trippy-gifs-vertical {
  display: flex;
  flex-direction: column;   /* ← this is the key change */
  gap: 8px;
  align-items: center;
}

.trippy-gifs-vertical img {
  width: 96px;      
  margin: 40px 0;
  flex-direction: column;
}.content-with-sides {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin: 40px auto;
}input,
textarea {
  color: aqua;              /* text you type */
  background-color: black;  /* input background */
  border: 1px solid aqua;

  font-family: monospace;
  font-size: 14px;
}
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.5);
}@media (max-width: 768px) {
  #chat-frame-wrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;

    margin: 20px auto;
    justify-content: center;
  }

  #chat-window {
    width: 95vw;
    height: 60vh;
    overflow: hidden;
  }

  .chat-side-gif {
    display: none;
  }
  @media (max-width: 768px) {
  iframe.chat-frame {
    height: 100%;
  }
}#open-chat-mobile {
  display: none;
}

@media (max-width: 768px) {
  #open-chat-mobile {
    display: block;
    margin: 20px auto;
  }

  #chat-frame-wrapper {
    display: none;
  }

  #chat-frame-wrapper.active {
    display: flex;
  }
}.horoscope-box {
  max-width: 260px;
  padding: 12px;
  margin: 20px;

  background: black;
  border: 2px solid aqua;
  font-family: monospace;
  text-align: center;
}

#zodiac-list li {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

#zodiac-list li {
  padding: 4px 0;
  opacity: 0.6;
}

 #zodiac-list .lucky {
  color: #FFD700; /* gold */
  font-weight: bold;

  text-shadow:
    0 0 4px rgba(255, 215, 0, 0.8),
    0 0 8px rgba(255, 200, 0, 0.6),
    0 0 12px rgba(255, 180, 0, 0.4);

  opacity: 1;
}

.divination-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 40px auto;
}

.eight-ball-wrapper {
  flex: 0 0 auto;
}

.horoscope-wrapper {
  flex: 0 0 auto;
}.map-container {
  position: relative;
  max-width: 1000px;
  margin: 40px auto;
}

.map-image {
  width: 100%;
  display: block;
}.map-link {
  position: absolute;
  transform: translate(-50%, -50%);

  padding: 6px 10px;
  font-size: 12px;
  font-family: monospace;

  background: rgba(0, 0, 0, 0.7);
  color: aqua;
  border: 1px solid aqua;

  text-decoration: none;
  transition: 0.2s ease;
}

.map-link:hover {
  background: aqua;
  color: black;
  box-shadow: 0 0 10px aqua;
}.map-link.city-core {
  color: #FFD700;
  border-color: #FFD700;
  text-shadow: 0 0 8px gold;
}
.site-footer {
  margin-top: 60px;
  padding: 20px 0;

  background: rgba(0, 0, 0, 0.8);
  border-top: 2px solid aqua;

  text-align: center;
  font-family: monospace;
  font-size: 13px;
}

.site-footer p {
  margin: 4px 0;
  color: aqua;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
.badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.badge-row img {
  width: 88px;
  height: 31px;
  transition: 0.2s ease;
}

.badge-row img:hover {
  transform: scale(1.1);
}