/* ===== BASE ===== */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fdf6f8;
  font-family:"MS UI Gothic", monospace;
  padding:20px;
}


/* ===== LAYOUT ===== */

.main-row{
  display:flex;
  align-items:flex-start;
  gap:15px;
}


/* ===== MAIN WINDOW ===== */

main{
  width:700px;
  overflow:hidden;
  border:2px solid #ff8fb3;
  background:linear-gradient(to bottom,#ffffff,#fff0f6);
  box-shadow:0 6px 15px #ffdee8;
}


/* ===== HEADER ===== */

.window-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 8px;
  font-size:12px;
  color:#ff4f8b;
  border-bottom:1px solid #f5a9c5;
  background:linear-gradient(to bottom,#fff0f6,#ffe4ef);
}


/* ===== TITLE ===== */

.title-left{
  display:flex;
  align-items:center;
  gap:6px;
}

.title-left img{
  width:20px;
  height:20px;
  image-rendering:pixelated;
}


/* ===== WINDOW BUTTONS ===== */

.window-buttons{
  display:flex;
  gap:4px;
}

.win-btn{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d88aa8;
  background:linear-gradient(to bottom,#ffffff,#ffd9e8);
  color:#ff4f8b;
  font-size:12px;
  cursor:pointer;
}

.win-btn:hover{
  background:linear-gradient(to bottom,#ffd0e0,#ffb3cc);
  border-color:#c96b8d;
}

.win-btn:last-child:hover{
  background:#ff8fb3;
  color:white;
}


/* ===== CONTENT ===== */

.content{
  padding:10px;
}

.scroll-box{
  margin:10px 0;
  padding:15px;
  text-align:center;
  color:#fd6c9a;
  border:2px solid #ff8fb3;
  background:linear-gradient(to bottom,#ffffff,#fff0f6);
}

.scroll-box p{
  line-height:1.5;
  margin:0 0 15px;
}


/* ===== LINKS ===== */

a{
  color:#ff4f8b;
  text-decoration:none;
}

a:hover{
  color:#ff1493;
  text-decoration:underline;
}


/* ===== STORY IMAGES ===== */

.story-images{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  margin-bottom:15px;
  flex-wrap:wrap;
}

.story-images img,
.oc-img{
  width:120px !important;
  max-width:120px !important;
  height:auto !important;
  display:block;
  image-rendering:auto;
}


/* ===== SIDE IMAGE ===== */

.side-image{
  padding:40px;
}

.side-image img{
  width:200px;
  display:block;
  cursor:pointer;
}


/* ===== BOUNCE ===== */

@keyframes bounce{

  0%{
    transform:translateY(0) scale(1);
  }

  30%{
    transform:translateY(-15px) scale(1.05);
  }

  50%{
    transform:translateY(0) scale(0.98);
  }

  70%{
    transform:translateY(-7px) scale(1.02);
  }

  100%{
    transform:translateY(0) scale(1);
  }

}

.bounce{
  animation:bounce 0.5s ease;
}


/* ===== DRAGGABLE WINDOWS ===== */

#extra-window,
#extra-window-2{
  position:absolute;
  z-index:1000;
  border:2px solid #ff8fb3;
  background:linear-gradient(to bottom,#ffffff,#fff0f6);
  box-shadow:0 6px 15px #ffdee8;
}

#extra-window{
  width:300px;
  top:100px;
  left:300px;
}

#extra-window-2{
  width:170px;
  top:150px;
  right:450px;
}

.drag-handle{
  cursor:move;
}


/* ===== WALKER ===== */

#bottom-walker{
  position:fixed;
  bottom:0;
  width:190px;
  pointer-events:none;
  animation:walk-right 20s linear infinite;
}

@keyframes walk-right{

  0%{
    left:-200px;
    transform:scaleX(1);
  }

  100%{
    left:100vw;
    transform:scaleX(1);
  }

}

@keyframes walk-left{

  0%{
    left:100vw;
  }

  100%{
    left:-200px;
  }

}


/* ===== COLLAPSIBLE BOXES ===== */

.collapse-box{
  margin-top:10px;
  border:2px solid #ff8fb3;
  background:#ffe4ef;
  border-radius:6px;
  overflow:hidden;
}

.collapse-btn{
  width:100%;
  background:#ffb6cf;
  color:#ff4f8b;
  border:none;
  padding:8px;
  font-family:inherit;
  font-size:20px;
  text-align:left;
  cursor:pointer;
  transition:.2s;
}

.collapse-btn:hover{
  background:#ff8fb3;
  color:white;
}

.collapse-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  background:#fff5fa;
  padding:0 10px;
  color:#ff4f8b;
}

.collapse-content p{
  padding:10px 0;
}


/* ===== FEATURE LIST ===== */

.feature-list {
  width: 100%;
  margin: 10px 0;
  text-align: left;
  padding-left: 25px;
  color: #ff4f8b;
}

/* IMAGE BOUNCE (same as pagedolls) */
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-15px); }
  50%  { transform: translateY(0); }
  70%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

.story-images img {
  cursor: pointer;
}

.story-images img.bounce {
  animation: bounce 0.5s ease;
}