* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: max(884px, 100dvh);
  background: #f2edf2;
  color: #1d2027;
  transition: background 0.25s ease;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
}

.hidden {
  display: none !important;
}

.shimmer-effect {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.floating-element {
  animation: float 4s ease-in-out infinite;
}

.floating-delayed {
  animation: float 5s ease-in-out infinite reverse;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(8deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.pulse-heart {
  animation: heartBeat 2s infinite;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.glass-panel {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(236, 64, 122, 0.1);
}

body[data-screen="landing"] {
  background:
    radial-gradient(circle at 10% 20%, rgba(255, 229, 236, 0.55) 0%, transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(184, 242, 230, 0.28) 0%, transparent 24%),
    #f1edf1;
}

body[data-screen="quiz"] {
  background: #fff5f7;
}

body[data-screen="result"] {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 229, 236, 0.8) 0%, transparent 20%),
    radial-gradient(circle at 90% 10%, rgba(184, 242, 230, 0.4) 0%, transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(255, 158, 181, 0.2) 0%, transparent 30%);
  background-color: #fff5f7;
  background-attachment: fixed;
}

#landing-title {
  color: #17181d !important;
}

#landing-title .landing-highlight {
  color: #ff5d9e !important;
}

#landing-subtitle {
  color: #1f222a !important;
  background: rgba(250, 250, 250, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}

#landing-screen .text-cute-secondary,
#landing-screen .text-cute-text,
#landing-screen h3,
#landing-screen h4,
#landing-screen p {
  color: #1f222a;
}

#start-btn,
#start-btn:hover,
#start-btn:focus {
  background: linear-gradient(90deg, #ff8fbe 0%, #ff5fa4 100%) !important;
  color: #ffffff !important;
}

#start-btn *,
#start-btn .material-symbols-outlined {
  color: #ffffff !important;
}

.material-symbols-outlined.local-icon {
  font-family: inherit !important;
  font-variation-settings: normal !important;
  font-style: normal;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#resume-btn {
  color: #111 !important;
  background: rgba(243, 243, 243, 0.95) !important;
  border-color: rgba(243, 243, 243, 1) !important;
}

.spotlight-ray {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  mask-image: linear-gradient(to bottom, transparent, black, transparent);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pattern-dots {
  background-image: radial-gradient(#ff9eb5 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.radar-poly {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.holo-sheen {
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(255, 200, 255, 0.5) 50%,
    rgba(180, 255, 255, 0.4) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.count-up-number {
  animation: counter 2s ease-out forwards;
  counter-reset: num var(--num);
}

.count-up-number::after {
  content: counter(num) "%";
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 98;
  }
}

.confetti {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 50;
}

.confetti:nth-child(1) {
  left: 10%;
  background: #ffd700;
  animation-delay: 0s;
}

.confetti:nth-child(2) {
  left: 20%;
  background: #ff6b8b;
  animation-delay: 0.2s;
}

.confetti:nth-child(3) {
  left: 30%;
  background: #b8f2e6;
  animation-delay: 0.5s;
}

.confetti:nth-child(4) {
  left: 40%;
  background: #ff9eb5;
  animation-delay: 0.1s;
}

.confetti:nth-child(5) {
  left: 50%;
  background: #ffd700;
  animation-delay: 0.4s;
}

.confetti:nth-child(6) {
  left: 60%;
  background: #ff6b8b;
  animation-delay: 0.6s;
}

/* Result page visibility fixes */
#result-score-bar {
  background: linear-gradient(90deg, #ff7fb2 0%, #ff5b9e 100%) !important;
  box-shadow: 0 0 10px rgba(255, 91, 158, 0.45) !important;
}

#copy-result-btn {
  background: #ffffff !important;
  color: #6a4350 !important;
  border-color: #f4d7e2 !important;
  box-shadow: 0 2px 0 rgba(156, 131, 140, 0.18) !important;
  animation: none !important;
}

#copy-result-btn .material-symbols-outlined,
#copy-result-btn span {
  color: #6a4350 !important;
}

#copy-result-btn > span.absolute {
  display: none !important;
}

.confetti:nth-child(7) {
  left: 70%;
  background: #b8f2e6;
  animation-delay: 0.3s;
}

.confetti:nth-child(8) {
  left: 80%;
  background: #ff9eb5;
  animation-delay: 0.7s;
}

.confetti:nth-child(9) {
  left: 90%;
  background: #ffd700;
  animation-delay: 0.2s;
}

.progress-head {
  pointer-events: none;
}

#options-list {
  width: 100%;
}

.option-btn {
  display: block;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 1rem;
  background: #fff;
  padding: 0.95rem 1.1rem;
  color: #5c4b51;
  text-align: left;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 4px 20px -2px rgba(255, 158, 181, 0.25);
  transition: all 0.2s ease;
}

.option-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 30px -4px rgba(255, 182, 193, 0.18);
}

.option-btn.selected {
  border-color: #ff9eb5;
  background: #fff0f5;
  box-shadow: 0 8px 30px -4px rgba(255, 182, 193, 0.28);
}

#result-image-frame {
  aspect-ratio: 3 / 3.2;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 1.5rem;
  background: #f2f2f2;
}

#result-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

#result-screen {
  color: #5c3a43;
}

#result-shell {
  background: transparent !important;
}

#result-header-pill {
  background: rgba(255, 255, 255, 0.72) !important;
}

#result-main-card {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
}

#result-screen .story-text,
#result-screen .advice-list li,
#result-screen .profile-row dd {
  color: rgba(92, 58, 67, 0.92);
}

#result-screen .profile-row dt {
  color: rgba(126, 98, 110, 0.92);
}

#result-screen .profile-row {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 158, 181, 0.2);
}

#result-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.reason-item {
  border: 1px solid rgba(255, 158, 181, 0.25);
  border-radius: 0.9rem;
  padding: 0.72rem 0.74rem;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(85, 54, 63, 0.9);
  background: rgba(255, 255, 255, 0.72);
}

.reason-item strong {
  color: #9f345f;
  display: inline-block;
  margin-bottom: 0.2rem;
}

.reason-item:nth-child(odd) {
  background: rgba(184, 242, 230, 0.16);
  border-color: rgba(184, 242, 230, 0.45);
}

.reason-item:nth-child(even) {
  background: rgba(255, 227, 236, 0.68);
  border-color: rgba(255, 158, 181, 0.35);
}

#result-screen .bg-accent\/10 {
  background: rgba(184, 242, 230, 0.16) !important;
}

#result-screen .bg-secondary\/50 {
  background: rgba(255, 227, 236, 0.72) !important;
}

#result-screen .bg-primary-soft {
  background: #fff0f5 !important;
}

#result-screen .text-teal-800,
#result-screen .text-teal-900\/70 {
  color: rgba(13, 124, 115, 0.92) !important;
}

#result-match-reason,
#result-potential-suggestion {
  min-height: 66px;
}

#profile-grid {
  display: grid;
  gap: 0.45rem;
}

.profile-row {
  margin: 0;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  align-items: start;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 0.7rem;
  padding: 0.42rem 0.52rem;
}

.profile-row dt {
  color: #9e7f87;
  font-size: 12px;
}

.profile-row dd {
  margin: 0;
  color: #5c3a43;
  font-size: 12px;
  line-height: 1.45;
}

.story-text {
  color: rgba(92, 58, 67, 0.92);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-line;
}

.advice-list {
  margin: 0;
  padding-left: 1.05rem;
}

.advice-list li {
  color: rgba(92, 58, 67, 0.88);
  font-size: 12px;
  line-height: 1.65;
  margin-bottom: 0.42rem;
}

@media (max-width: 420px) {
  #result-reasons {
    grid-template-columns: 1fr;
  }
}

.admin-panel {
  max-width: 28rem;
  margin: 0 auto 1.4rem;
  padding: 0 1rem;
  color: #5c4b51;
  font-size: 12px;
}

.admin-panel > summary {
  cursor: pointer;
  color: #5c4b51;
}

.admin-card table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.admin-card td,
.admin-card th {
  border-bottom: 1px solid rgba(92, 75, 81, 0.16);
  text-align: left;
  padding: 0.35rem 0.2rem;
}