/* reset */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* background */
#background {
  width: 100%;
  height: 100%;
  background-image: url("back1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* laptop container */
#laptop-container {
  position: relative;
}

/* laptop image */
#laptop {
  max-width: 80vw;
  max-height: 80vh;
  display: block;
}

/* start button link */
#start-link {
  position: absolute;
  top: 27%;   /* moved UP from 50% */
  left: 48%;
  transform: translate(-50%, -50%);
}

/* start button image */
#start-button {
  width: 80px;
  image-rendering: pixelated;
  cursor: pointer;
}

/* pink glow on hover */
#start-button:hover {
  filter: drop-shadow(0 0 6px #ff66cc)
          drop-shadow(0 0 4px #ff99dd);
}

/* =======================
   MAIN PAGE STYLES
   ======================= */

.main-body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* loading screen */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffccdd;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  font-family: Arial, sans-serif;
}

/* shutter effect */
#shutter {
  width: 100%;
  height: 100%;
  background: #ff99cc;
  position: absolute;
  top: 0;
  left: 0;
}

/* loading text */
#loading-text {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 2px;
}

/* hide main content at first */
#main-content {
  display: none;
}

/* main background */
#background-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("back2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#laptop-close {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: block;
}

/* =======================
   HOMEPAGE BUTTONS
   ======================= */

.homepage-body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("back2.png") no-repeat center center;
  background-size: cover;
  font-family: 'Arial', sans-serif;
}

#site-homepage {
  text-align: center;
}

#homepage-title {
  font-size: 36px;
  color: #ff66cc;
  margin-bottom: 40px;
  text-shadow: 1px 1px #ffffff;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 80px; /* space between buttons */
}

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.site-button-img {
  width: 120px; /* adjust as needed */
  height: 120px;
  image-rendering: pixelated; /* retro feel */
}

.site-button-text {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #ff66cc;
  text-shadow: 1px 1px #ffffff;
}

/* =======================
   PLAY/BLOG SECTION STYLES
   ======================= */

.section-body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("back2.png") no-repeat center center;
  background-size: cover;
  font-family: 'Arial', sans-serif;
  text-align: center;
  color: #ff66cc;
}

.section-body h1 {
  font-size: 36px;
  text-shadow: 1px 1px #ffffff;
  margin-bottom: 20px;
}

.section-body p {
  font-size: 18px;
  text-shadow: 1px 1px #ffffff;
  max-width: 600px;
}

/* =======================
   MAIN PAGE BUTTONS
   ======================= */

#site-buttons-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 80px; /* space between buttons */
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.site-button-img {
  width: 120px; /* adjust if needed */
  height: 120px;
  image-rendering: pixelated;
}

.site-button-text {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #ff66cc;
  text-shadow: 1px 1px #ffffff;
}

/* =======================
   BLOG PAGE LAYOUT
   ======================= */

#blog-page {
  display: flex;
  width: 100vw;
  height: 100vh;
  background: url("back2.png") no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

/* Sidebar column */
#blog-sidebar {
  width: 220px;
  background-color: rgba(255, 204, 221, 0.85); /* semi-transparent pink */
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  border-right: 2px solid #ff66cc;
}

#blog-sidebar h2 {
  font-size: 18px;
  color: #ff66cc;
  text-align: center;
  margin-bottom: 15px;
  text-shadow: 1px 1px #ffffff;
}

.sidebar-item {
  margin-bottom: 15px;
  font-size: 14px;
  color: #ff66cc;
  text-align: center;
}

/* Main blog container */
#blog-container {
  flex: 1;
  padding: 30px;
  overflow-y: scroll;
  max-height: 100vh;
}

#blog-container h1 {
  font-size: 36px;
  color: #ff66cc;
  text-shadow: 1px 1px #ffffff;
  margin-bottom: 20px;
}

/* Individual blog posts */
.blog-post {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid #ff66cc;
  border-radius: 10px;
  text-align: left;

}

.blog-post p {
  text-align: left;
}


.blog-post h2 {
  font-size: 24px;
  color: #ff66cc;
  margin-bottom: 10px;
}

.blog-post p {
  font-size: 16px;
  color: #000000;
  line-height: 1.4;
}

/* =======================
   BLOG POST IMAGE LAYOUT
   ======================= */

.post-content {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.post-image {
  width: 120px;        /* adjust if needed */
  height: auto;
  border: 2px solid #ff66cc;
  border-radius: 8px;
  image-rendering: pixelated;
}

.post-text {
  flex: 1;
}



/* =======================
   CUSTOM STAR CURSOR (GLOBAL)
   ======================= */

/* hide default cursor everywhere */
body, html {
  cursor: none;
}

/* cursor element */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;   /* adjust */
  height: 48px;
  pointer-events: none;
  z-index: 99999; /* very high */
  background: url("star-cursor-rest.png") no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

.play-container {
  display: flex;
  width: 90%;
  max-width: 1000px;
  margin: 40px auto;
  background: #ffe6f2;
  border: 2px solid #ff9acb;
  box-shadow: 0 0 10px rgba(255, 154, 203, 0.5);
}

/* SIDEBAR */
.play-sidebar {
  width: 200px;
  background: #ffb6d9;
  padding: 15px;
  text-align: center;
}

.play-sidebar h3 {
  font-family: cursive;
  color: #fff;
  margin-bottom: 15px;
}

.play-sidebar button {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 8px;
  background: #fff;
  border: 2px solid #ff69b4;
  color: #ff1493;
  font-family: sans-serif;
  cursor: pointer;
}

.play-sidebar button:hover {
  background: #ffe6f2;
}

/* MAIN GAME AREA */
.play-main {
  flex: 1;
  padding: 20px;
  background: #fff0f7;
  overflow-y: auto;
}

/* GAME SCREENS */
.game-screen {
  display: none;
}

.game-screen.active {
  display: block;
}

.game-screen h1,
.game-screen h2 {
  color: #ff1493;
  font-family: cursive;
}

.game-screen p {
  text-align: left;
  color: #444;
  line-height: 1.5;
}

.welcome-image {
  margin-top: 15px;
  max-width: 200px;
}

.quiz-box {
  background: #fff;
  border: 2px dashed #ff9acb;
  padding: 15px;
}

.quiz-question p {
  color: #ff1493;
  font-weight: bold;
}

.answers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* HEART BUTTONS */
.heart {
  background: #ffe6f2;
  border: 2px solid #ff69b4;
  color: #ff1493;
  padding: 10px 14px;
  cursor: pointer;
  font-family: sans-serif;
  position: relative;
  border-radius: 10px;
}

.heart:hover {
  background: #ffb6d9;
}

/* fake heart shape */
.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  border-radius: 50%;
  top: -5px;
}

.heart::before {
  left: 4px;
}

.heart::after {
  right: 4px;
}

/* RESULT */
#quiz-result h3 {
  color: #ff1493;
  font-family: cursive;
}

#quiz-result p {
  text-align: left;
}

.trivia-box {
  background: #fff;
  border: 2px dashed #ff9acb;
  padding: 15px;
}

.trivia-question {
  display: none;
}

.trivia-question.active {
  display: block;
}

#trivia-feedback {
  margin-top: 15px;
  color: #ff1493;
  font-style: italic;
}

/* Trivia fix */
.trivia-question {
  display: none;
}

.trivia-question.active {
  display: block !important;
}

#trivia-feedback {
  margin-top: 10px;
  color: #ff1493;
  font-style: italic;
}


/* MUSIC ROOM FIX */
#music {
  width: 100%;
  box-sizing: border-box;
}

.music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  align-items: start;
}

.album {
  background: #ffe6f2;
  padding: 10px;
  border: 2px solid #ff9acb;
  box-shadow: 0 0 8px rgba(255, 105, 180, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.album iframe {
  width: 100%;
  height: 80px;
  border: none;
}

/* hover glow */
.album:hover {
  box-shadow: 0 0 16px rgba(255, 105, 180, 0.6);
  transform: scale(1.02);
}
.play-main {
  flex: 1;
  padding: 20px;
  background: #fff0f7;
  overflow-y: auto;
  box-sizing: border-box;
}

.story-container {
  padding: 15px;
  border: 2px solid #ff66cc;
  border-radius: 10px;
  background-color: rgba(255, 230, 247, 0.9);
}

.story-node {
  display: none;
}

.story-node button {
  margin: 5px;
  padding: 8px 12px;
  background-color: #ffb6da;
  border: 2px solid #ff66cc;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s all;
}

.story-node button:hover {
  box-shadow: 0 0 10px #ff69b4;
  transform: scale(1.05);
}

.hint {
  color: #ff69b4;
  font-style: italic;
}

.glitchy .glitch-text {
  color: black;
  text-shadow: 1px 1px #ff69b4, -1px -1px #ff69b4;
  animation: glitch 0.2s infinite;
}

@keyframes glitch {
  0% {opacity: 1; transform: translate(0,0);}
  20% {opacity: 0.7; transform: translate(1px,-1px);}
  40% {opacity: 1; transform: translate(-1px,1px);}
  60% {opacity: 0.7; transform: translate(1px,1px);}
  80% {opacity: 1; transform: translate(-1px,-1px);}
  100% {opacity: 1; transform: translate(0,0);}
}

.trap-text {
  color: black;
  font-size: 24px;
  animation: softFlashText 1s infinite;
}

@keyframes softFlashText {
  0%, 50%, 100% {opacity:1;}
  25%, 75% {opacity:0.4;}
}


.trap-image {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 10px auto;
  animation: softFlashImage 1s infinite; /* slower and smoother */
}

@keyframes softFlashImage {
  0%, 50%, 100% {opacity:1;}
  25%, 75% {opacity:0.4;} /* never fully disappears */
}