body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", sans-serif;
  background: linear-gradient(#ffeaf6, #eee3ff);
  color: #6b4b7a;
}

.app {
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

.screen {
  display: none;
  text-align: center;
}

.screen.active {
  display: block;
}

h1 {
  margin-top: 40px;
  color: #9b5fa8;
}

.sparkles {
  font-size: 2rem;
  margin-top: 50px;
}

.toybox {
  font-size: 6rem;
  margin: 40px 0 20px;
  animation: wiggle 1.8s infinite;
}

button {
  border: 3px solid #d9a7ff;
  border-radius: 999px;
  background: #fff7fc;
  padding: 14px 24px;
  font-size: 1.1rem;
  color: #8a4d9f;
  box-shadow: 0 6px 0 #d6b2e8;
}

button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #d6b2e8;
}

.card {
  background: #fff9fd;
  border: 3px solid #ffd1ec;
  border-radius: 24px;
  padding: 18px;
  margin: 16px 0;
  font-size: 1.2rem;
  box-shadow: 0 5px 12px rgba(130, 90, 150, 0.15);
}

.tagline {
  font-style: italic;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

#fortuneResult {
  margin-top: 15px;
  padding: 15px;
  border-radius: 20px;
  background: #fff9fd;
  border: 2px solid #ffd1ec;
  font-style: italic;
}
.status-board {
  background: #fff9fd;
  border: 3px solid #ffd1ec;
  border-radius: 24px;
  padding: 18px;
  margin: 20px 0;
  box-shadow: 0 5px 12px rgba(130, 90, 150, 0.15);
}

.status-board h3 {
  margin-top: 0;
  color: #9b5fa8;
}

.status-line {
  margin: 10px 0;
}
.back-button {
  margin-top: 20px;
  font-size: 0.95rem;
  padding: 10px 16px;
}

.profile-card {
  background: #fff9fd;
  border: 3px solid #ffd1ec;
  border-radius: 24px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 5px 12px rgba(130, 90, 150, 0.15);
}

.profile-card h3 {
  margin-top: 0;
  color: #9b5fa8;
}

.nav-card {
  cursor: pointer;
}
.momo-room {
  background: linear-gradient(
    to bottom,
    #f6fff8,
    #f3ecff
  );
  min-height: 100vh;
}

.momo-room h1 {
  color: #8a6bc7;
}

.momo-room .profile-card {
  background: #fcfffd;
  border: 3px solid #c8f0d6;
}

.momo-room button {
  background: #f9f5ff;
  border-color: #d9c7ff;
}
.locked-card {
  opacity: 0.75;
  position: relative;
}

.locked-card span {
  display: block;
  font-size: 0.85rem;
  margin-top: 6px;
  font-style: italic;
  color: #9b7aa8;
}
.toybox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

.toy-object {
  background: #fff9fd;
  border: 3px solid #ffd1ec;
  border-radius: 24px;
  padding: 16px 10px;
  box-shadow: 0 5px 12px rgba(130, 90, 150, 0.15);
  cursor: pointer;
}

.object-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.toy-object strong,
.toy-object span {
  display: block;
}

.toy-object span {
  font-size: 0.85rem;
  margin-top: 4px;
  color: #9b7aa8;
}
.notes-board {
  background: #fff9fd;
  border: 3px solid #ffd1ec;
  border-radius: 24px;
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 5px 12px rgba(130, 90, 150, 0.15);
  text-align: left;
}

.notes-board h3 {
  margin-top: 0;
  color: #9b5fa8;
  text-align: center;
}

.feed-post {
  background: #ffffff;
  border: 2px dashed #ffd1ec;
  border-radius: 18px;
  padding: 12px;
  margin: 12px 0;
}

.feed-name {
  font-weight: bold;
  color: #8a4d9f;
  margin-bottom: 6px;
}

.feed-text {
  font-size: 0.95rem;
  line-height: 1.4;
}
.mimi-room {
  background: linear-gradient(
    to bottom,
    #fff5fa,
    #ffe8f4
  );
  min-height: 100vh;
}

.mimi-room h1 {
  color: #ff5ea8;
  text-shadow: 0 0 8px rgba(255, 94, 168, 0.25);
}

.mimi-room .profile-card {
  background: #fffcff;
  border: 3px solid #ffc5e2;
  box-shadow: 0 5px 12px rgba(255, 120, 180, 0.15);
}

.mimi-room button {
  background: #fff6fb;
  border-color: #ffb7dc;
  color: #ff4e9d;
}
.mimi-room .profile-card h3::before {
  content: "✨ ";
}
.mimi-room h1 {
  color: #ff5ea8;
  text-shadow:
    0 0 5px rgba(255,94,168,0.2),
    0 0 12px rgba(255,94,168,0.15);
}
.clara-room {
  background: linear-gradient(
    to bottom,
    #f8f6ff,
    #eef0ff
  );
}

.clara-room h1 {
  color: #5f5bcf;
}

.clara-room .profile-card {
  background: #fcfcff;
  border: 3px solid #cfd5ff;
}

.clara-room .profile-card h3::before {
  content: "⭐ ";
}
.iris-room {
  background: linear-gradient(to bottom, #f7fff8, #eef7ed);
}

.iris-room h1 {
  color: #5f8f6b;
}

.iris-room .profile-card {
  background: #fcfffb;
  border: 3px solid #cfe8cf;
}

.iris-room .profile-card h3::before {
  content: "🌿 ";
}

.wren-room {
  background: linear-gradient(to bottom, #f5f3ff, #ece8ff);
}

.wren-room h1 {
  color: #5f4fa3;
}

.wren-room .profile-card {
  background: #fcfbff;
  border: 3px solid #d4c9ff;
}

.wren-room .profile-card h3::before {
  content: "💻 ";
}