* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   background: #000;
   color: #f0fff4;
   font-family: Georgia, "Times New Roman", serif;
   overflow: hidden;
}

#app {
   position: relative;
   width: 100%;
   height: 100%;
   background: #000;
}

.screen {
   position: absolute;
   inset: 0;
   display: none;
   overflow: hidden;
}

.screen.active {
   display: block;
}

/* =========================
   INTRO SCREEN
========================= */

#introScreen {
   background: #000;
}

.intro-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
   transform: scale(1.02);
   user-select: none;
   pointer-events: none;
}

.intro-overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   background:
      radial-gradient(circle at center, rgba(0, 255, 153, 0.05), transparent 40%),
      linear-gradient(
         180deg,
         rgba(0, 0, 0, 0.30) 0%,
         rgba(0, 0, 0, 0.18) 34%,
         rgba(0, 0, 0, 0.46) 100%
      );
   pointer-events: none;
}

.intro-content {
   position: relative;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 28px;
}

.brand-title {
   margin: 0 0 28px;
   font-size: clamp(2.5rem, 10vw, 5.4rem);
   line-height: 0.95;
   letter-spacing: 0.08em;
   color: #dfffe7;
   text-shadow:
      0 0 8px rgba(200, 255, 215, 0.75),
      0 0 22px rgba(0, 255, 153, 0.45),
      0 0 48px rgba(0, 255, 153, 0.20);
   animation:
      brandTitleEnter 1.4s ease-out both,
      brandTitleGlow 3.8s ease-in-out 1.4s infinite;
}

.prompt-box {
   width: min(82vw, 520px);
   min-height: 138px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px 26px;
   margin-bottom: 28px;
   border-radius: 22px;
   border: 1px solid rgba(180, 255, 205, 0.32);
   background:
      radial-gradient(circle at center, rgba(0, 255, 153, 0.12), rgba(0, 0, 0, 0.42)),
      rgba(0, 0, 0, 0.36);
   backdrop-filter: blur(7px);
   box-shadow:
      0 0 26px rgba(0, 255, 153, 0.18),
      inset 0 0 22px rgba(0, 255, 153, 0.08);
}

#introPrompt {
   margin: 0;
   font-size: clamp(1.3rem, 4.8vw, 2.2rem);
   line-height: 1.25;
   color: #f2fff6;
   text-shadow:
      0 0 10px rgba(0, 0, 0, 1),
      0 0 18px rgba(0, 255, 153, 0.85),
      0 0 34px rgba(0, 255, 153, 0.42);
}

.main-btn {
   appearance: none;
   border: 1px solid rgba(205, 255, 220, 0.76);
   border-radius: 999px;
   padding: 15px 30px;
   background:
      linear-gradient(180deg, rgba(10, 85, 45, 0.92), rgba(3, 24, 14, 0.96));
   color: #f6fff6;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(1rem, 3.6vw, 1.35rem);
   letter-spacing: 0.04em;
   cursor: pointer;
   text-shadow:
      0 0 10px rgba(0, 0, 0, 1),
      0 0 14px rgba(0, 255, 153, 0.72);
   box-shadow:
      0 0 18px rgba(0, 255, 153, 0.42),
      inset 0 0 18px rgba(0, 255, 153, 0.14);
}

.main-btn:hover {
   transform: translateY(-1px);
   box-shadow:
      0 0 28px rgba(0, 255, 153, 0.68),
      inset 0 0 24px rgba(0, 255, 153, 0.18);
}

.main-btn:disabled {
   opacity: 0.72;
   cursor: not-allowed;
   transform: none;
}

.tagline {
   margin: 22px 0 0;
   font-size: clamp(0.9rem, 3.2vw, 1.1rem);
   letter-spacing: 0.08em;
   color: rgba(235, 255, 240, 0.84);
   text-shadow:
      0 0 8px rgba(0, 0, 0, 1),
      0 0 14px rgba(0, 255, 153, 0.46);
}

/* =========================
   RESULT SCREEN
========================= */

.result-screen {
   background-color: #000;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
}

.result-darken {
   position: absolute;
   inset: 0;
   background:
      linear-gradient(
         180deg,
         rgba(0, 0, 0, 0.00) 0%,
         rgba(0, 0, 0, 0.04) 45%,
         rgba(0, 0, 0, 0.46) 100%
      ),
      radial-gradient(circle at center, transparent 55%, rgba(0, 0, 0, 0.20) 100%);
   pointer-events: none;
}

.result-content {
   position: relative;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding: 14px;
}

.result-panel {
   width: min(92vw, 620px);
   margin-bottom: 4px;
   padding: 14px 16px 18px;
   border-radius: 22px;
   border: 1px solid rgba(190, 255, 210, 0.12);
   background: rgba(0, 0, 0, 0.16);
   backdrop-filter: blur(2px);
   text-align: center;
   box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.22),
      0 0 18px rgba(0, 255, 153, 0.10),
      inset 0 0 18px rgba(0, 255, 153, 0.025);
}

.card-name {
   margin-bottom: 5px;
   font-size: clamp(0.88rem, 3.3vw, 1.15rem);
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: #dfffe8;
   text-shadow:
      0 0 8px rgba(0, 0, 0, 1),
      0 0 14px rgba(0, 255, 153, 0.72),
      0 0 24px rgba(0, 0, 0, 0.9);
}

.card-answer {
   margin-bottom: 8px;
   font-size: clamp(2rem, 9vw, 4.2rem);
   line-height: 0.95;
   font-weight: 700;
   letter-spacing: 0.12em;
   color: #ffffff;
   text-shadow:
      0 0 8px rgba(0, 0, 0, 1),
      0 0 10px rgba(220, 255, 230, 0.72),
      0 0 26px rgba(0, 255, 153, 0.68),
      0 0 46px rgba(170, 80, 255, 0.34);
}

.card-meaning {
   max-width: 520px;
   margin: 0 auto 14px;
   font-size: clamp(0.86rem, 3vw, 1.05rem);
   line-height: 1.38;
   color: #f2fff6;
   text-shadow:
      0 0 8px rgba(0, 0, 0, 1),
      0 0 14px rgba(0, 0, 0, 0.95),
      0 0 14px rgba(0, 255, 153, 0.42);
}

.restart-btn {
   padding: 10px 20px;
   font-size: clamp(0.78rem, 2.8vw, 0.95rem);
   text-transform: uppercase;
   letter-spacing: 0.10em;
}

/* =========================
   INTRO TITLE ANIMATION
========================= */

@keyframes brandTitleEnter {
   0% {
      opacity: 0;
      transform: translateY(18px) scale(0.94);
      filter: blur(10px);
      letter-spacing: 0.18em;
   }

   60% {
      opacity: 1;
      transform: translateY(-3px) scale(1.025);
      filter: blur(1px);
      letter-spacing: 0.10em;
   }

   100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
      letter-spacing: 0.08em;
   }
}

@keyframes brandTitleGlow {
   0%,
   100% {
      text-shadow:
         0 0 8px rgba(200, 255, 215, 0.75),
         0 0 22px rgba(0, 255, 153, 0.45),
         0 0 48px rgba(0, 255, 153, 0.20);
   }

   50% {
      text-shadow:
         0 0 10px rgba(255, 255, 255, 0.95),
         0 0 24px rgba(0, 255, 153, 0.88),
         0 0 52px rgba(0, 255, 153, 0.48),
         0 0 82px rgba(170, 80, 255, 0.24);
   }
}

/* =========================
   ORACLE REVEAL ANIMATION
========================= */

.result-screen.revealing {
   animation: oracleScreenReveal 5s ease-out both;
}

.result-screen.revealing .result-panel {
   animation: oraclePanelReveal 1.35s ease-out 1.15s both;
}

.result-screen.revealing .card-name {
   animation: oracleTextReveal 0.9s ease-out 1.45s both;
}

.result-screen.revealing .card-answer {
   animation: oracleAnswerReveal 1.35s ease-out 1.75s both;
}

.result-screen.revealing .card-meaning {
   animation: oracleTextReveal 0.95s ease-out 2.15s both;
}

.result-screen.revealing .restart-btn {
   animation: oracleTextReveal 0.95s ease-out 2.45s both;
}

@keyframes oracleScreenReveal {
   0% {
      opacity: 0;
      filter: blur(22px) brightness(0.18) saturate(1.9);
      transform: scale(1.14);
   }

   25% {
      opacity: 1;
      filter: blur(12px) brightness(1.42) saturate(1.7);
      transform: scale(1.08);
   }

   55% {
      opacity: 1;
      filter: blur(4px) brightness(1.18) saturate(1.25);
      transform: scale(1.025);
   }

   100% {
      opacity: 1;
      filter: blur(0) brightness(1) saturate(1);
      transform: scale(1);
   }
}

@keyframes oraclePanelReveal {
   0% {
      opacity: 0;
      transform: translateY(52px) scale(0.92);
      filter: blur(12px);
   }

   70% {
      opacity: 1;
      transform: translateY(-5px) scale(1.018);
      filter: blur(1px);
   }

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

@keyframes oracleTextReveal {
   0% {
      opacity: 0;
      transform: translateY(14px);
      filter: blur(6px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
   }
}

@keyframes oracleAnswerReveal {
   0% {
      opacity: 0;
      transform: scale(0.68);
      filter: blur(10px);
      letter-spacing: 0.34em;
      text-shadow:
         0 0 10px rgba(0, 0, 0, 1),
         0 0 20px rgba(0, 255, 153, 0.1);
   }

   45% {
      opacity: 1;
      transform: scale(1.2);
      filter: blur(1px);
      letter-spacing: 0.19em;
      text-shadow:
         0 0 10px rgba(0, 0, 0, 1),
         0 0 24px rgba(255, 255, 255, 0.95),
         0 0 48px rgba(0, 255, 153, 1),
         0 0 90px rgba(170, 80, 255, 0.8);
   }

   100% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
      letter-spacing: 0.12em;
      text-shadow:
         0 0 8px rgba(0, 0, 0, 1),
         0 0 10px rgba(220, 255, 230, 0.72),
         0 0 26px rgba(0, 255, 153, 0.68),
         0 0 46px rgba(170, 80, 255, 0.34);
   }
}


/* =========================
   PRIVACY POLICY LINK
========================= */

.global-policy-link {
   position: fixed;
   right: max(10px, env(safe-area-inset-right));
   bottom: max(8px, env(safe-area-inset-bottom));
   z-index: 20;
   padding: 4px 6px;
   color: rgba(225, 255, 235, 0.58);
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(0.54rem, 1.8vw, 0.68rem);
   line-height: 1;
   letter-spacing: 0.05em;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow:
      0 0 6px rgba(0, 0, 0, 1),
      0 0 8px rgba(0, 255, 153, 0.22);
   opacity: 0.72;
   -webkit-tap-highlight-color: transparent;
}

.global-policy-link:hover,
.global-policy-link:focus-visible {
   color: rgba(245, 255, 248, 0.92);
   opacity: 1;
   outline: none;
}

/* Keep the reading controls above the bottom-corner legal link. */
.result-content {
   padding-bottom: 38px;
}

/* =========================
   MOBILE TUNING
========================= */

@media (max-width: 600px) {
   .intro-content {
      padding: 20px;
      justify-content: center;
   }

   .brand-title {
      margin-bottom: 22px;
   }

   .prompt-box {
      width: min(86vw, 420px);
      min-height: 126px;
      padding: 20px;
      margin-bottom: 24px;
   }

   .result-screen {
      background-size: contain;
      background-position: center center;
   }

   .result-content {
      padding: 10px;
   }

   .result-panel {
      width: 94vw;
      margin-bottom: 2px;
      padding: 12px 14px 15px;
      border-radius: 18px;
      background: rgba(0, 0, 0, 0.13);
      backdrop-filter: blur(1.5px);
   }

   .card-meaning {
      margin-bottom: 12px;
   }

   .global-policy-link {
      right: max(7px, env(safe-area-inset-right));
      bottom: max(6px, env(safe-area-inset-bottom));
      padding: 3px 4px;
      font-size: 0.54rem;
      letter-spacing: 0.04em;
   }

   .result-content {
      padding-bottom: 34px;
   }

}