/* ============================================
   index.css — homepage specific styles
   ============================================ */

/* === SPLIT LAYOUT === */
.homepage-split {
  display: flex;
  min-height: calc(100vh - 36px);
  position: relative;
}

/* === LEFT: FIGURE SIDE === */
.fig-side {
  width: 38%;
  min-width: 280px;
  position: relative;
  background: linear-gradient(160deg, rgba(255,214,224,0.4) 0%, rgba(232,213,245,0.3) 100%);
  border-right: 1px dashed var(--lilas-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* sticker positions */
.sticker.s1 { position:absolute; top:12%; left:10%; font-size:22px; animation-delay:0s; animation-duration:5s; }
.sticker.s2 { position:absolute; top:20%; right:8%; font-size:18px; animation-delay:0.7s; animation-duration:6s; }
.sticker.s3 { position:absolute; top:45%; left:6%;  font-size:26px; animation-delay:1.2s; animation-duration:4.5s; }
.sticker.s4 { position:absolute; top:55%; right:5%; font-size:16px; animation-delay:0.3s; animation-duration:7s; }
.sticker.s5 { position:absolute; bottom:20%; left:12%; font-size:20px; animation-delay:1.8s; animation-duration:5.5s; }
.sticker.s6 { position:absolute; bottom:15%; right:10%; font-size:16px; animation-delay:0.9s; animation-duration:6.5s; }
.sticker.s7 { position:absolute; top:75%; left:30%; font-size:14px; animation-delay:2s; animation-duration:4s; }

.guardian-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
}
.guardian-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.guardian-silhouette {
  filter: drop-shadow(0 0 12px rgba(255,105,180,0.4)) drop-shadow(0 8px 16px rgba(200,159,232,0.3));
}
.guardian-name {
  font-size: 10px;
  color: var(--flash-pink);
  letter-spacing: 3px;
  text-shadow: 0 0 6px var(--flash-pink);
  animation: shimmer 3s infinite;
}

/* floating texts */
.fig-text {
  position: absolute;
  font-family: var(--font-hand);
  font-size: 13px;
  color: var(--grey-mouse);
  background: rgba(255,255,255,0.5);
  padding: 2px 8px;
  border-left: 2px solid var(--rose-deep);
  pointer-events: none;
}
.ft1 { top: 8%; left: 5%; animation-delay: 0s; }
.ft2 { top: 35%; right: 2%; animation-delay: 1s; font-size: 15px; color: var(--flash-pink); background: none; border: none; }
.ft3 { bottom: 30%; left: 5%; font-size: 10px; font-family: var(--font-pixel); color: var(--grey-mouse); background: none; border: none; }

/* fig info window — override position to be within fig-side */
.fig-info-win {
  position: absolute !important;
  width: 220px;
  max-width: 90%;
}

.secret-link {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: rgba(200,159,232,0.2);
  font-size: 6px;
  transition: color 0.3s;
}
.secret-link:hover { color: var(--flash-pink); }

/* === RIGHT: ROOM SIDE === */
.room-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 40px;
  gap: 16px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,249,240,0.9) 0%, rgba(232,213,245,0.2) 100%);
}

.room-title {
  font-size: 13px;
  color: var(--flash-pink);
  letter-spacing: 4px;
  margin-bottom: 6px;
}

/* === ROOM SCENE === */
.room-scene {
  position: relative;
  width: min(580px, 100%);
  height: 460px;
  overflow: hidden;
  border: 2px solid var(--lilas-deep);
  box-shadow:
    inset 0 0 40px rgba(232,213,245,0.3),
    6px 6px 0 var(--rose),
    10px 10px 0 var(--lilas);
}

/* room walls */
.room-wall-back {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 55%;
  background: linear-gradient(170deg, #f5e8f8 0%, #ede0f5 60%, #ddd0f0 100%);
}
.room-wall-left {
  position: absolute;
  left: 0; top: 0;
  width: 12%;
  height: 55%;
  background: linear-gradient(90deg, #e0d0f0, #f0e8f8);
  transform-origin: top left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 110%);
}
.room-floor {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  height: 46%;
  background: linear-gradient(0deg, #f0e8e0 0%, #f8f0e8 100%);
  border-top: 2px solid rgba(200,159,232,0.3);
}

/* rug */
.rug {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 60%; height: 12%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,170,196,0.3) 0px, rgba(255,170,196,0.3) 4px,
    rgba(200,159,232,0.2) 4px, rgba(200,159,232,0.2) 8px
  );
  border: 1px solid rgba(200,159,232,0.4);
  border-radius: 4px;
  z-index: 1;
}

/* window on wall */
.room-win {
  position: absolute;
  top: 6%; right: 16%;
  width: 110px; height: 90px;
  border: 3px solid #c0b0d0;
  background: #a8d8f0;
  z-index: 5;
  overflow: hidden;
}
.room-win-pane { width:100%; height:100%; background: linear-gradient(160deg,#c8e8f8,#a0c8e8 60%,#88b8d8); }
.room-win-frame {
  position:absolute; inset:0;
  border: 2px solid #c0b0d0;
  background: transparent;
}
.room-win-frame::before, .room-win-frame::after {
  content:'';
  position:absolute;
  background: #c0b0d0;
}
.room-win-frame::before { left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); }
.room-win-frame::after  { top:50%; left:0; right:0; height:2px; transform:translateY(-50%); }

/* fairy lights */
.fairy-lights {
  position:absolute;
  top: 3%;
  left: 5%; right: 5%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  z-index: 8;
  height: 20px;
}
.fairy-lights::before {
  content:'';
  position:absolute;
  top: 4px; left: 0; right: 0;
  height: 1px;
  background: rgba(150,130,160,0.4);
  z-index: -1;
}
.fl-bulb {
  width: 8px; height: 11px;
  border-radius: 0 0 4px 4px;
  background: var(--c, #ff69b4);
  animation: bulb-flash var(--d, 0s) alternate infinite;
  filter: drop-shadow(0 0 3px var(--c, #ff69b4));
}
@keyframes bulb-flash {
  from { opacity: 0.5; }
  to   { opacity: 1; filter: drop-shadow(0 0 6px var(--c, #ff69b4)) brightness(1.4); }
}

/* wall calendar */
.wall-calendar {
  position: absolute;
  top: 8%; left: 18%;
  background: white;
  border: 1px solid #ddd;
  padding: 4px 6px;
  text-align: center;
  width: 38px;
  box-shadow: 2px 2px 0 rgba(200,159,232,0.4);
  z-index: 6;
  animation-duration: 9s;
}
.cal-month { font-size: 7px; color: var(--flash-pink); letter-spacing: 1px; }
.cal-day   { font-size: 14px; color: var(--black); }

/* poster */
.poster {
  position: absolute;
  top: 10%; left: 35%;
  width: 64px;
  height: 80px;
  background: linear-gradient(135deg, var(--lilas), var(--rose));
  border: 2px solid rgba(200,159,232,0.6);
  box-shadow: 3px 3px 0 rgba(200,159,232,0.3);
  z-index: 6;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.poster:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: 5px 5px 0 var(--flash-pink);
}
.poster-img  { font-size: 22px; }
.poster-label { font-size: 6px; color: var(--grey-mouse); letter-spacing: 1px; }

/* desk */
.desk {
  position: absolute;
  left: 5%; bottom: 25%;
  width: 34%;
  z-index: 10;
  cursor: default;
}
.desk-surface {
  height: 14px;
  background: linear-gradient(0deg, #d8c8b0, #e8d8c0);
  border: 2px solid #c0a890;
  border-radius: 2px 2px 0 0;
}
.computer {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 12;
}
.monitor {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.monitor-screen {
  width: 70px; height: 52px;
  background: #1a0a2a;
  border: 3px solid #4a3a6a;
  box-shadow: 0 0 10px rgba(92,224,208,0.5), inset 0 0 10px rgba(92,224,208,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  position: relative;
}
.monitor-screen::before {
  content:'';
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(92,224,208,0.04) 3px, rgba(92,224,208,0.04) 4px);
}
.screen-glow {
  font-size: 6px;
  color: var(--turq-deep);
  text-shadow: 0 0 6px var(--turq-deep);
  animation: blink 1.2s infinite;
  letter-spacing: 1px;
}
.screen-cursor {
  width: 6px; height: 2px;
  background: var(--turq-deep);
  animation: blink 0.8s infinite;
  box-shadow: 0 0 4px var(--turq-deep);
}
.monitor-stand {
  width: 22px; height: 8px;
  background: #4a3a6a;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.keyboard {
  width: 80px; height: 10px;
  background: linear-gradient(0deg, #b0a0c0, #c8b8d8);
  border: 1px solid #908090;
  border-radius: 2px;
  margin-top: 3px;
}
.computer:hover .monitor-screen {
  box-shadow: 0 0 20px rgba(92,224,208,0.8), inset 0 0 15px rgba(92,224,208,0.3);
}
.desk-mug {
  position: absolute;
  right: 8px; bottom: 14px;
  font-size: 16px;
  z-index: 11;
}
.desk-pen {
  position: absolute;
  right: 30px; bottom: 16px;
  font-size: 12px;
  z-index: 11;
  transform: rotate(-30deg);
}
.desk-phone {
  position: absolute;
  right: 44px; bottom: 14px;
  font-size: 12px;
  z-index: 11;
}

/* bed */
.bed {
  position: absolute;
  right: 4%; bottom: 24%;
  width: 30%;
  z-index: 9;
  cursor: pointer;
  transition: filter 0.2s;
}
.bed:hover { filter: drop-shadow(0 0 10px rgba(255,105,180,0.5)); }
.bed-frame {
  width: 100%;
  height: 70px;
  background: linear-gradient(0deg, #d8b898, #e8c8a8);
  border: 2px solid #c0a080;
  border-radius: 4px 4px 0 0;
  position: relative;
  overflow: hidden;
}
.bed-pillow {
  position: absolute;
  top: 6px; left: 8px;
  width: 55%; height: 30px;
  background: linear-gradient(135deg, #fff0f8, #ffe0f0);
  border: 1px solid #ffaac4;
  border-radius: 3px;
}
.bed-blanket {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,170,196,0.4) 0px, rgba(255,170,196,0.4) 6px,
    rgba(200,159,232,0.3) 6px, rgba(200,159,232,0.3) 12px
  );
  border-top: 1px solid #ffaac4;
}
.bed-sock {
  position: absolute;
  bottom: -8px; left: 6px;
  font-size: 12px;
  transform: rotate(-20deg);
  z-index: 10;
}
.plushie { font-size: 18px; }

/* bookshelf */
.bookshelf {
  position: absolute;
  top: 12%; right: 3%;
  width: 18%;
  min-width: 80px;
  z-index: 7;
  cursor: pointer;
  transition: filter 0.2s;
}
.bookshelf:hover { filter: drop-shadow(0 0 8px rgba(200,159,232,0.6)); }
.shelf {
  width: 100%; height: 8px;
  background: linear-gradient(0deg, #c0a080, #d8b898);
  border: 1px solid #b09070;
}
.shelf-books {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 2px 3px;
  background: rgba(255,255,255,0.1);
}
.book {
  border-radius: 1px 2px 2px 1px;
  border: 1px solid rgba(0,0,0,0.1);
}
.b1 { width:8px;  height:38px; background:#ffaac4; }
.b2 { width:10px; height:42px; background:#c89fe8; }
.b3 { width:7px;  height:35px; background:#5ce0d0; }
.b4 { width:9px;  height:40px; background:#ffd6e0; }
.b5 { width:11px; height:44px; background:#a8f0e8; }
.shelf-items {
  display: flex;
  justify-content: space-around;
  padding: 3px;
  background: rgba(255,255,255,0.05);
  font-size: 14px;
}
.shelf-item { cursor: default; }

/* doll stand */
.doll-stand {
  position: absolute;
  bottom: 24%; left: 42%;
  z-index: 8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: filter 0.2s;
}
.doll-stand:hover { filter: drop-shadow(0 0 10px rgba(255,105,180,0.6)); }
.doll { font-size: 32px; }
.doll-base {
  width: 30px; height: 6px;
  background: linear-gradient(0deg, #c0a080, #d8b898);
  border: 1px solid #b09070;
  border-radius: 1px;
}

/* book pile */
.book-pile {
  position: absolute;
  bottom: 26%; right: 36%;
  z-index: 8;
  cursor: pointer;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 1px;
  transition: filter 0.2s;
}
.book-pile:hover { filter: drop-shadow(0 0 8px rgba(92,224,208,0.5)); }
.bp-book {
  height: 10px;
  border-radius: 1px;
  border: 1px solid rgba(0,0,0,0.1);
}
.b-a { width: 55px; background: #ffd6e0; transform: rotate(-2deg); }
.b-b { width: 50px; background: #c89fe8; transform: rotate(1deg); }
.b-c { width: 58px; background: #a8f0e8; transform: rotate(-1deg); }

/* floor objects */
.floor-obj {
  position: absolute;
  font-size: 16px;
  z-index: 8;
  pointer-events: none;
}
.fo-bag        { bottom: 10%; left: 8%; transform: rotate(-10deg); }
.fo-headphones { bottom: 8%;  left: 22%; font-size: 18px; }
.fo-cds        { bottom: 7%;  left: 55%; transform: rotate(5deg); }
.fo-mirror     { bottom: 10%; right: 8%; font-size: 20px; }
.fo-stars      { bottom: 5%; right: 30%; color: var(--turq-deep); letter-spacing: 4px; }

/* plant corner */
.plant-corner {
  position: absolute;
  bottom: 24%; left: 2%;
  font-size: 24px;
  z-index: 8;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* general clickable obj hover */
.obj[data-href] {
  cursor: pointer;
}
.obj[data-href]:hover .tooltip { opacity: 1; }

/* === ROOM LEGEND === */
.room-legend {
  font-size: 8px;
  color: var(--grey-mouse);
  letter-spacing: 2px;
  margin-top: -8px;
}

/* === UPDATES WINDOW === */
.updates-win {
  width: min(400px, 100%);
  box-shadow: 3px 3px 0 var(--rose-deep);
}
.updates-body { display: flex; flex-direction: column; gap: 4px; }
.update-row {
  font-size: 11px;
  color: var(--black);
  padding: 2px 0;
  border-bottom: 1px dashed rgba(200,159,232,0.3);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.update-date {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--flash-pink);
  min-width: 35px;
}

/* === GUESTBOOK === */
.guestbook-section {
  padding: 20px;
  max-width: 700px;
  margin: 0 auto 60px;
}
.gb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.gb-entry {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 6px;
  background: rgba(255,214,224,0.2);
  border-left: 2px solid var(--rose-deep);
  font-size: 11px;
}
.gb-name  { font-family: var(--font-pixel); font-size: 9px; color: var(--flash-pink); min-width: 80px; }
.gb-msg   { flex: 1; color: var(--black); font-family: var(--font-hand); font-size: 14px; }
.gb-date  { font-family: var(--font-pixel); font-size: 8px; color: var(--grey-mouse); }
.gb-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gb-input {
  flex: 1;
  min-width: 120px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 11px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--lilas-deep);
  outline: none;
  color: var(--black);
}
.gb-input:focus { border-color: var(--flash-pink); box-shadow: 0 0 6px rgba(255,105,180,0.3); }
.gb-submit {
  padding: 4px 14px;
  background: var(--lilas-deep);
  color: white;
  border: none;
  font-size: 9px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.2s;
}
.gb-submit:hover { background: var(--flash-pink); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .homepage-split { flex-direction: column; }
  .fig-side { width: 100%; min-width: unset; height: 300px; border-right: none; border-bottom: 1px dashed var(--lilas-deep); }
  .room-scene { height: 320px; }
  .fig-info-win { display: none; }
}