@import url("https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@700;900&display=swap");

:root {
  --bg-color: #ffffff;
  --text-color: #5f6368;
  --accent-color: #74b9ff; /* Soft Blue */
  --accent-glow: rgba(116, 185, 255, 0.4);
  --secondary-bg: #f0f7ff;
  --card-bg: #ffffff;
  --gradient-1: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
  --nav-height: 80px;

  /* Essence Theme Colors (Creative Flat) */
  --essence-01: #86efac; /* Soft Green: Acceptance */
  --essence-02: #f9a8d4; /* Soft Pink: Affirmation */
  --essence-03: #7dd3fc; /* Soft Blue: Self */
  --essence-04: #94a3b8; /* Soft Slate: Sleep */
  --essence-05: #99f6e4; /* Soft Cyan: Flow */
  --essence-06: #fcd34d; /* Soft Gold: Love */
  --essence-07: #6ee7b7; /* Soft Emerald: Action */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "BIZ UDPGothic", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Typography */
/* --- Chapter 3: Everything is Going Well Theme --- */
.law-hero-3 {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #fefce8 100%);
  border-left: 8px solid #22c55e;
  padding: 3rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.law-hero-3 .chapter-badge {
  background: #22c55e;
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 1rem;
}

.law-hero-3 h1 .highlight {
  color: #15803d;
  font-size: 1.2em;
  display: block;
  margin-top: 0.5rem;
}

/* Sunbeam Decoration */
.sunbeam-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sunbeam {
  position: absolute;
  top: -50%;
  left: 20%;
  width: 100px;
  height: 200%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(253, 224, 71, 0.2),
    transparent
  );
  transform: rotate(25deg);
  animation: beamMove 8s infinite linear;
}

.sunbeam:nth-child(2) {
  left: 50%;
  animation-delay: -2s;
  width: 150px;
}
.sunbeam:nth-child(3) {
  left: 80%;
  animation-delay: -5s;
  width: 80px;
}

@keyframes beamMove {
  0% {
    transform: rotate(25deg) translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(25deg) translateX(100px);
    opacity: 0;
  }
}

/* Sunbeam Surge */
.bg-decoration.sunbeam-surge .sunbeam {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(253, 224, 71, 0.6),
    transparent
  );
  animation-duration: 4s;
  box-shadow: 0 0 50px rgba(253, 224, 71, 0.4);
}

/* Foreshadowing Secret Hover */
.foreshadow-secret {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0 2px;
}

.foreshadow-secret:hover {
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.8);
  color: #15803d;
}

.foreshadow-secret::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b);
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

.foreshadow-secret:hover::after {
  opacity: 1;
  animation: rainbow-scroll 2s linear infinite;
}

@keyframes rainbow-scroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Magic Word & Resonance */
.magic-word-trigger {
  cursor: pointer;
  position: relative;
  display: inline-block;
  color: #c2410c;
  border-bottom: 2px dashed #fcd34d;
  padding: 0 4px;
  transition: all 0.3s;
}

.magic-word-trigger:hover {
  background: rgba(253, 224, 71, 0.1);
  transform: scale(1.05);
}

.resonance-wave {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(253, 224, 71, 0.3);
  border: 2px solid rgba(253, 224, 71, 0.5);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  animation: resonance-expand 1.5s cubic-bezier(0.1, 0.5, 0.5, 1) forwards;
}

@keyframes resonance-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
    border-width: 10px;
  }
  100% {
    width: 300vw;
    height: 300vw;
    opacity: 0;
    border-width: 0;
  }
}

/* Trial Flip Scene */
.trial-flip-scene {
  perspective: 1000px;
  margin: 3rem 0;
  text-align: center;
  /* Reset to simple vertical layout */
  background: transparent;
  padding: 0;
  border: none;
}

.trial-flip-scene.is-flipped {
  background: #fffbeb;
  border-color: #fde68a;
}

.god-cloud {
  text-align: center;
  margin-bottom: 2rem;
}

.text-cloud {
  font-size: 3rem;
  color: #64748b;
  display: block;
  margin-bottom: 0.5rem;
}

.god-label {
  font-weight: bold;
  color: #475569;
  letter-spacing: 0.1em;
}

.trial-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

/* 3D Flip Card */
.trial-card-container {
  width: 320px;
  height: 220px;
  perspective: 1000px;
}

.trial-card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

.is-flipped .trial-card {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-front {
  background: #f1f5f9;
  color: #1e293b;
  border: 3px solid #cbd5e1;
}

.card-back {
  background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
  color: #92400e;
  transform: rotateY(180deg);
  border: 3px solid #fbbf24;
}

.trial-icon-wrap,
.result-icon-wrap {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.trial-icon {
  color: #64748b;
}
.result-icon {
  color: #d97706;
}

.treasure-effect {
  margin-top: 1rem;
  color: #d97706;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trial-controls {
  text-align: center;
}

.flip-btn {
  background: #1e293b;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1rem;
}

.flip-btn:hover {
  background: #334155;
  transform: scale(1.05);
}

.hint-text {
  font-size: 0.85rem;
  color: #64748b;
}

.divine-message {
  margin-top: 2rem;
  text-align: center;
  font-weight: bold;
  color: #92400e;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.3s;
}

/* Responsive Trial Scene */
@media (max-width: 768px) {
  .trial-stage {
    flex-direction: column;
    gap: 2rem;
  }
}
h1,
h2,
h3 {
  font-family: "Outfit", sans-serif;
  color: #1e293b;
}

.gradient-text {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* Navigation */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.logo a {
  color: inherit;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-1);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--accent-color);
}

.nav-links a:hover::after {
  width: 100%;
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: var(--accent-glow);
  filter: blur(150px);
  border-radius: 50%;
  top: -100px;
  left: -100px;
  z-index: -1;
  animation: float 10s infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(129, 140, 248, 0.3);
  filter: blur(120px);
  border-radius: 50%;
  bottom: -50px;
  right: -50px;
  z-index: -1;
  animation: float 8s infinite alternate-reverse;
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(30px, 30px) rotate(5deg);
  }
}

@keyframes float-subtle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes float-hero-subtle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.hero-content .float-icon {
  animation: float-hero-subtle 4s ease-in-out infinite;
  display: inline-block;
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  line-height: 1.1;
  margin-top: 3rem;
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #94a3b8;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Slim Quote Banner Styles */
.quote-banner {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  padding: 0.8rem 2rem;
  border-radius: 50px;
  border: 1px solid rgba(116, 185, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  max-width: 90%;
  transition: all 0.3s ease;
}

.quote-banner:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.02);
  border-color: var(--accent-color);
}

.quote-icon {
  font-size: 1.2rem;
  color: var(--accent-color);
  opacity: 0.6;
}

.quote-text {
  font-size: 1.1rem;
  color: #334155;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 0.3s ease;
}

.quote-author {
  font-family: "Outfit", sans-serif;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.quote-author::before {
  content: "― ";
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--gradient-1);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3);
}

/* Layout */
.page-wrapper {
  padding-top: var(--nav-height);
  min-height: 100vh;
}

.layout-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 5%;
  display: grid;
  grid-template-columns: 1fr 300px; /* Main content takes remaining space, Sidebar is 300px */
  gap: 3rem;
}

.main-content {
  min-width: 0; /* Prevents grid blowout */
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
  height: fit-content;
}

.sidebar-widget {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.sidebar-widget h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0f2fe; /* Light pastel blue border */
  color: #555;
}

/* News Section Styles */
.news-window {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  height: 200px; /* Fixed height for "window" feel */
  overflow-y: auto; /* Scrollable */
  padding: 1rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
}

.news-item {
  background: var(--card-bg); /* Keep white background for contrast */
  padding: 1rem;
  margin-bottom: 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start; /* Align to top for multi-line */
  gap: 1rem;
  transition: transform 0.2s ease;
}

.news-item:last-child {
  margin-bottom: 0;
}

.news-item:hover {
  background: #f8fafc;
}

.news-date {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  color: var(--accent-color);
  white-space: nowrap;
  font-size: 0.9rem;
  margin-top: 2px;
}

.news-content {
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Custom Scrollbar for News Window */
.news-window::-webkit-scrollbar {
  width: 6px;
}
.news-window::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

@media (max-width: 600px) {
  .news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}

.profile-mini {
  text-align: center;
}

.profile-mini img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 1rem;
  object-fit: cover;
}

.sidebar-links {
  list-style: none;
}

.sidebar-links li {
  margin-bottom: 0.8rem;
}

.sidebar-links a {
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
}

.sidebar-links a:hover {
  color: var(--accent-color);
}

/* Sidebar Nav List (New) */
.sidebar-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav-list li {
  margin-bottom: 0.5rem;
}

.sidebar-nav-list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: #475569;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.sidebar-nav-list a:hover {
  background: #f8fafc;
  color: var(--accent-color);
  transform: translateX(5px);
}

.sidebar-nav-list a.active {
  background: #f0f7ff;
  color: var(--accent-color);
  font-weight: 700;
  border-left: 4px solid var(--accent-color);
  padding-left: calc(1rem - 4px); /* Adjust padding to keep alignment */
}

.sidebar-group-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 1.5rem 0 0.5rem 0.5rem;
}

.sidebar-group-label:first-child {
  margin-top: 0;
}

.sidebar-nav-list i {
  width: 20px;
  text-align: center;
  font-size: 1rem;
  color: var(--accent-color);
}

/* Sections */
section {
  padding: 0; /* Padding is handled by layout-container now for inner pages */
  margin-bottom: 5rem;
}

/* Responsive Layout */
@media (max-width: 900px) {
  .layout-container {
    grid-template-columns: 1fr; /* Stack on smaller screens */
  }

  .sidebar {
    position: static;
    order: 2; /* Sidebar goes below content on mobile if desired, or remove to keep top */
  }
}

.section-title h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-title .line {
  width: 60px;
  height: 4px;
  background: var(--gradient-1);
  margin: 0 auto;
  border-radius: 2px;
}

/* About Section */
.about-content {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.about-img {
  flex: 1;
  min-width: 300px;
}

.placeholder-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--secondary-bg);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--accent-color);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.about-text {
  flex: 2;
}

.about-text p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #475569;
}

/* Skills Section */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.skill-card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.skill-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color);
  box-shadow: 0 10px 20px rgba(14, 165, 233, 0.15);
}

.skill-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

.skill-card h3 {
  margin-bottom: 0.5rem;
}

.skill-card p {
  color: #64748b;
  font-size: 0.9rem;
}

/* Contact Section */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background: var(--card-bg);
  padding: 3rem;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #334155;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1e293b;
  font-family: inherit;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background: #fff;
}

/* Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Simple mobile hide for now, could be a hamburger later */
  }

  .hero-content h1 {
    font-size: 3rem;
  }

  .about-content {
    flex-direction: column;
  }

  section {
    padding: 4rem 5%;
  }
}

/* Category Tiles Base (for TOP page) */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 800px;
  margin: 2rem auto 3rem auto;
  padding: 0 1rem;
}

.category-tile {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  color: #333;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.category-tile i {
  font-size: 1.5rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.category-tile:hover {
  transform: translateY(-5px);
  background: #fff;
  box-shadow: 0 10px 20px rgba(116, 185, 255, 0.2);
  color: var(--accent-color);
}

/* Advanced Card Layout (Scoped for genki_methods.html groups) */
.method-group .category-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0.5rem auto 1rem auto;
}

.method-group .category-tile {
  border-top: 4px solid var(--accent-color);
  padding: 2rem 1.2rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-height: 220px;
  justify-content: flex-start;
}

.method-group .category-tile i {
  font-size: 2.2rem;
}

.method-group .category-tile:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(116, 185, 255, 0.25);
  border-top-color: #f43f5e;
}

.method-group .category-tile:hover i {
  transform: scale(1.2) rotate(5deg);
}

.tile-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
}

.tile-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Group Styles */
.method-group {
  margin-bottom: 1rem;
}

.group-title {
  font-size: 1.4rem;
  color: #1e293b;
  margin: 0 0 1.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 0.5rem;
}

.group-title i {
  color: var(--accent-color);
}

/* Recommendation Section */
.recommend-section {
  margin: 2rem auto 4rem;
  max-width: 900px;
  padding: 0 1rem;
}

.recommend-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(116, 185, 255, 0.2);
}

.recommend-content {
  flex: 1;
}

.recommend-content h3 {
  margin: 0 0 0.5rem 0;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recommend-content p {
  margin: 0;
  color: #64748b;
}

.recommend-card .btn {
  white-space: nowrap;
  margin-left: 2rem;
  padding: 1rem 1.5rem;
}

/* Highlight Animation */
@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    border-color: #f43f5e;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(244, 63, 94, 0);
    border-color: #f43f5e;
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
    border-color: #f43f5e;
    transform: scale(1);
  }
}

.recommended-highlight {
  animation: highlight-pulse 1.5s ease-out;
  border-color: #f43f5e !important;
  background: #fff;
  z-index: 10;
}

/* Timeline Styles */
.timeline-container {
  padding: 1rem 0;
}

.timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid #e2e8f0;
  margin-left: 0.5rem;
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 5px;
  width: 1rem;
  height: 1rem;
  background: var(--accent-color);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.timeline-date {
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-family: "Outfit", sans-serif;
}

.timeline-content {
  background: #fff;
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

/* YouTube-style Comment Styles */
.bbs-form-container {
  margin-bottom: 2rem;
}

.comment-form-wrapper {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.user-avatar-placeholder {
  width: 40px;
  height: 40px;
  background-color: var(--accent-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.comment-input-area {
  flex-grow: 1;
}

.comment-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  padding: 0.5rem 0;
  font-family: inherit;
  resize: none;
  background: transparent;
  transition: border-color 0.3s;
}

.comment-input:focus {
  outline: none;
  border-bottom: 2px solid #0f0f0f;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.btn-cancel {
  background: transparent;
  color: #0f0f0f;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 18px;
  cursor: pointer;
  font-weight: 500;
}

.btn-cancel:hover {
  background: #e5e5e5;
}

.btn-submit {
  background: #ccc;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 18px;
  cursor: not-allowed;
  font-weight: 500;
}

.btn-submit.active {
  background: #065fd4;
  cursor: pointer;
}

.btn-submit.active:hover {
  background: #0356c0;
}

.bbs-threads {
  margin-top: 2rem;
}

.comment-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  animation: fadeIn 0.3s ease-out;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  background-color: #ffd1dc; /* Pastel Pink for others */
  color: #555;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.comment-body {
  flex-grow: 1;
}

.comment-header {
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
}

.comment-author {
  font-weight: 600;
  color: #0f0f0f;
  margin-right: 0.5rem;
}

.comment-date {
  color: #606060;
}

.comment-text {
  color: #0f0f0f;
  line-height: 1.4;
  font-size: 0.95rem;
  white-space: pre-wrap;
  margin-bottom: 0.5rem;
}

.comment-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
}

.comment-action-btn {
  border: none;
  background: none;
  color: #0f0f0f;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 4px 8px;
  border-radius: 12px;
}

.comment-action-btn:hover {
  background: #e5e5e5;
}

.reply-container {
  margin-left: 3.5rem; /* Indent replies */
  margin-top: 0.5rem;
  border-left: 2px solid #f0f0f0;
  padding-left: 1rem;
}

.reply-form-container {
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: none; /* Hidden by default */
}

.reply-form-container.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

.comment-action-btn.active {
  color: var(--accent-color);
}

.like-count {
  font-size: 0.8rem;
  color: #606060;
  margin-left: 4px;
}

/* Login Form Styles */
.input-with-icon {
  position: relative;
}
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}
.input-with-icon input {
  padding-left: 36px;
}
.login-container {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}
/* Method Navigation */
.method-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
  gap: 1rem;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.nav-btn.tile-violet:hover {
  background: #fdf4ff;
  border-color: #d8b4fe;
}
.tile-violet .tile-icon {
  background: #d8b4fe;
  color: white;
}

.tile-teal:hover {
  background: #f0fdfa;
  border-color: #5eead4;
}
.tile-teal .tile-icon {
  background: #5eead4;
  color: white;
}

.tile-indigo:hover {
  background: #eef2ff;
  border-color: #818cf8;
}
.tile-indigo .tile-icon {
  background: #818cf8;
  color: white;
}

.nav-btn.prev {
  background: #f1f5f9;
  color: #64748b;
}

.nav-btn.prev:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.nav-btn.list {
  color: #94a3b8;
}

.nav-btn.list:hover {
  color: var(--accent-color);
}

.nav-btn.next {
  background: var(--gradient-1);
  color: white;
  box-shadow: 0 4px 10px rgba(116, 185, 255, 0.3);
}

.nav-btn.next:hover {
  transform: translateX(5px);
  box-shadow: 0 6px 15px rgba(116, 185, 255, 0.4);
}

@media (max-width: 600px) {
  .method-nav {
    flex-direction: column;
    gap: 1rem;
  }
  .nav-btn {
    width: 100%;
    justify-content: center;
  }
  .nav-btn.list {
    order: 3;
  }
  .nav-btn.prev {
    order: 2;
  }
  .nav-btn.next {
    order: 1;
  }
}

/* ==========================================
   AI Bridge Styles
   ========================================== */
.ai-bridge-section {
  margin-top: 4rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 24px;
  border: 1px solid #bae6fd;
}

.prompt-card {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px dashed #74b9ff;
  margin: 1.5rem 0;
  position: relative;
}

.prompt-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--accent-color);
  color: #fff;
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.prompt-content {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f1f5f9;
  color: #475569;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #e2e8f0;
  color: var(--accent-color);
}

.copy-btn.copied {
  background: #dcfce7 !important;
  color: #15803d !important;
}

.ai-launch-pad {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.launch-btn {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.launch-btn.chatgpt {
  background: #10a37f;
  color: #fff;
}
.launch-btn.gemini {
  background: #4285f4;
  color: #fff;
}
.launch-btn.claude {
  background: #d97757;
  color: #fff;
}

.launch-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  filter: brightness(1.1);
}

/* ==========================================================================
   Joyful Hints & Content Pages
   ========================================================================== */

/* Background Decoration Blobs */
.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.1;
  border-radius: 50%;
  animation: move 20s infinite alternate;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: #74b9ff;
  top: -100px;
  left: -100px;
}
.blob-2 {
  width: 400px;
  height: 400px;
  background: #ffe66d;
  bottom: -50px;
  right: -50px;
  animation-delay: -5s;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}

/* Joyful Hints Content Grid */
.hint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.hint-tile {
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--text-color);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.hint-tile:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-color);
}

.hint-tile i {
  font-size: 2rem;
  color: var(--accent-color);
}

.hint-tile span {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

/* Content Body & Detailed Subpages */
.content-body {
  line-height: 1.9;
  color: #475569;
  font-size: 1.05rem;
}

.content-body p {
  margin-bottom: 1.5rem;
}

.gradient-text-sub {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.quote-box {
  background: #fffbeb;
  border-left: 5px solid #fbbf24;
  padding: 2rem;
  margin: 3rem 0;
  border-radius: 0 12px 12px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d97706;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.concept-img {
  width: 100%;
  border-radius: 20px;
  margin: 2rem 0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.law-box {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  margin: 4rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.law-box h3 {
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
}

.law-list {
  list-style: none;
  padding: 0;
}

.law-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.law-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--accent-color);
}

.highlight-card {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 2rem;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  margin: 2rem 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-color);
}

.method-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #64748b;
  font-weight: 600;
  transition: color 0.3s;
}

.nav-btn:hover {
  color: var(--accent-color);
}

/* --- Recommendations Page Enhancements --- */

/* NEW Badge */
.badge-new {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
  z-index: 10;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Recommend Button Section */
.recommend-section {
  text-align: center;
  margin-bottom: 3rem;
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  border: 1px dashed #cbd5e1;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.recommend-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.recommend-content h3 {
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.recommend-content p {
  color: #64748b;
  font-size: 0.95rem;
}

/* Today's Prescription Badge */
.recommend-badge {
  position: absolute;
  top: -15px;
  right: -10px;
  background: #f59e0b;
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  z-index: 20;
  animation: badge-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
}

@keyframes badge-pop {
  from {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.recommended-highlight {
  border: 2px solid #f59e0b !important;
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important;
}

/* Tile Hover Enhancements */
.category-tile {
  position: relative; /* For badges */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-tile:hover {
  transform: translateY(-5px);
  box-shadow:
    0 10px 20px -3px rgba(0, 0, 0, 0.15),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-color: var(--accent-color);
}

.category-tile:hover i {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Filter Buttons */
.filter-container {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.filter-btn {
  background: #f1f5f9;
  color: #64748b;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.filter-btn:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--accent-color);
  color: white;
  box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.filter-btn[data-filter="energy"].active {
  background: #f97316;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
}

.filter-btn[data-filter="healing"].active {
  background: #10b981;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.filter-btn[data-filter="insight"].active {
  background: #8b5cf6;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}

/* Category Grid Transitions */
.category-tile {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-tile.hidden {
  opacity: 0.3;
  transform: scale(0.95);
  pointer-events: none;
  filter: grayscale(100%);
}

/* Roulette Highlight */
.roulette-highlight {
  background: #fff7ed !important;
  border-color: #f97316 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.5) !important;
  z-index: 10;
}

/* Law List Hover Effect */
.law-list li {
  transition: all 0.3s ease;
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  border-radius: 8px;
}

.law-list li:hover {
  background: rgba(251, 191, 36, 0.1);
  transform: translateX(10px);
  color: #b45309;
}

/* Interactive Luck Button */
.luck-trigger-container {
  text-align: center;
  margin: 4rem 0;
  position: relative;
}

.luck-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  border: none;
  padding: 1.2rem 3rem;
  font-size: 1.25rem;
  font-weight: 800;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.luck-btn:hover {
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 15px 25px rgba(245, 158, 11, 0.4);
}

.luck-btn:active {
  transform: scale(0.95);
}

.luck-message {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: white;
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  color: var(--accent-color);
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.luck-message.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Sparkle Effect */
.sparkle {
  position: fixed;
  pointer-events: none;
  background: gold;
  border-radius: 50%;
  z-index: 9999;
  animation: sparkle-anim 1s ease-out forwards;
}

@keyframes sparkle-anim {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0;
  }
}

/* Navigation Spacing */
.method-nav .nav-btn.next {
  text-align: right;
  flex-direction: row-reverse;
}

/* --- Bright Future Brush-up --- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.benefit-card {
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid #e0f2fe;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.benefit-card:hover {
  transform: translateY(-5px);
  border-color: #60a5fa;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1);
}

.benefit-card i {
  font-size: 2rem;
  color: #60a5fa;
  margin-bottom: 1rem;
  display: block;
}

.transform-section {
  background: #fdf2f8;
  padding: 2.5rem;
  border-radius: 20px;
  margin: 4rem 0;
  text-align: center;
}

.transform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.transform-card {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  cursor: pointer;
  perspective: 1000px;
  min-height: 140px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.transform-card.active .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.flip-back {
  transform: rotateY(180deg);
  color: #db2777;
  font-weight: bold;
}

.flip-front i {
  color: #94a3b8;
  margin-bottom: 0.5rem;
}

.transform-card:hover {
  border-color: #f472b6;
  transform: translateY(-5px);
}

/* --- Thank You Page Brush-up --- */
.flower-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
}

.flower-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #fde68a;
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 0 15px rgba(253, 230, 138, 0.5);
}

.petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 60px;
  background: #fce7f3;
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  transform-origin: bottom center;
  transition: all 0.5s ease;
  opacity: 0.3;
}

.petal.active {
  background: #f472b6;
  opacity: 1;
  transform: translate(-50%, -100%) scale(1.1);
}

.self-thanks-section {
  background: white;
  padding: 2.5rem;
  border-radius: 24px;
  margin: 4rem 0;
  border: 2px solid #fecdd3;
  text-align: center;
  box-shadow: 0 10px 30px rgba(244, 114, 182, 0.1);
}

.mirror-box {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #e2e8f0 0%, #ffffff 50%, #cbd5e1 100%);
  border: 6px solid #e2e8f0;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: #94a3b8;
  box-shadow:
    inset 0 0 15px rgba(255, 255, 255, 0.8),
    0 8px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.mirror-box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: shine 4s infinite linear;
}

@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

.mirror-box:hover {
  transform: scale(1.05) rotate(2deg);
  border-color: #cbd5e1;
  color: #64748b;
}

.self-thanks-message {
  font-size: 1.25rem;
  font-weight: 800;
  color: #db2777;
  margin-top: 1rem;
  display: none;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sakura-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: sakura-fall linear forwards;
}

@keyframes sakura-fall {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--end-x), 100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Light Sticky style for points */
.sidebar-widget.points-sticky {
  background: #fff !important;
  border: 2px solid #fde047 !important;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.03);
  transform: rotate(-0.5deg);
  position: relative;
  padding: 2rem !important;
}

.sidebar-widget.points-sticky::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  border-width: 0 20px 20px 0;
  border-style: solid;
  border-color: #fde047 #f8fafc #fde047 #fde047;

  background: #fde047;
}

/* ==========================================
   Hint Card Grid Styles (New)
   ========================================== */
.hint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.hint-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
}

.hint-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.95);
}

.hint-card .card-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 10px rgba(116, 185, 255, 0.3);
  transition: transform 0.3s ease;
}

.hint-card:hover .card-icon {
  transform: scale(1.1) rotate(5deg);
}

.hint-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
  font-weight: 700;
}

.hint-card p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.5;
}
/* Recommendation Badge Styling (Shared) */
.category-tile {
  position: relative;
}

.recommend-badge {
  position: absolute;
  top: -15px;
  right: -10px;
  background: var(--accent-color); /* Use accent color for consistency */
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4); /* Pink shadow to match accent */
  z-index: 10;
  animation: badge-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
}

@keyframes badge-pop {
  from {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
}

/* =========================================
   Saint Francis Prayer Page Styles
   ========================================= */

body.st-francis-page {
  --peace-green: #5c7f67;
  --peace-light: #a3b18a;
  --candle-glow: #fffbeb;
  --candle-flame: #f59e0b;
}

/* Prayer Card with Texture */
.prayer-card {
  background-color: #fdfcf8;
  background-image:
    radial-gradient(#d4d4d4 1px, transparent 1px),
    linear-gradient(to bottom, #fdfcf8, #f4f7f5);
  background-size:
    20px 20px,
    100% 100%;
  border: 1px solid #daddd8;
  border-radius: 8px;
  padding: 4rem 2rem;
  margin: 3rem 0;
  box-shadow: 0 4px 20px rgba(92, 127, 103, 0.08);
  position: relative;
  overflow: hidden;
}

.prayer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Simple noise texture simulation */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.prayer-text {
  position: relative;
  z-index: 1;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  line-height: 2.8;
  color: #2f3e33;
  font-size: 1.15rem;
  text-align: center;
}

.highlight-prayer {
  color: var(--peace-green);
  font-weight: bold;
}

.prayer-card-decor-top,
.prayer-card-decor-bottom {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  color: var(--peace-green);
  opacity: 0.6;
  margin: 1rem 0;
  position: relative;
  z-index: 1;
}

/* Staggered Text Animation */
.prayer-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.5s ease,
    transform 1.5s ease-out;
}

.prayer-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Main Content Overrides */
body.st-francis-page .main-article h3 {
  color: var(--peace-green);
  border-bottom: 2px solid var(--peace-light);
  padding-bottom: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

/* Candle Interaction */
.candle-container {
  text-align: center;
  margin: 4rem 0;
  padding: 2rem;
  background: rgba(92, 127, 103, 0.05); /* peace-green with transparency */
  border-radius: 12px;
  transition: background 1s ease;
}

.candle-wrapper {
  position: relative;
  width: 60px;
  height: 120px;
  margin: 0 auto 2rem;
  cursor: pointer;
}

.candle-body {
  position: absolute;
  bottom: 0;
  left: 10px;
  width: 40px;
  height: 100px;
  background: linear-gradient(to right, #e2e8f0, #f8fafc, #cbd5e1);
  border-radius: 4px;
  box-shadow: inset 0 -10px 10px rgba(0, 0, 0, 0.05);
  z-index: 2;
}

.candle-wick {
  position: absolute;
  bottom: 100px;
  left: 28px;
  width: 4px;
  height: 10px;
  background: #475569;
  z-index: 2;
}

.flame {
  position: absolute;
  bottom: 110px;
  left: 20px;
  width: 20px;
  height: 35px;
  background: radial-gradient(ellipse at bottom, #fde68a, #f59e0b 80%);
  border-radius: 50% 50% 20% 20%;
  transform-origin: center bottom;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(1px);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
  z-index: 3;
}

.flame.lit {
  opacity: 1;
  animation: flicker 1s infinite alternate;
}

/* Candle Shadow */
.candle-shadow {
  position: absolute;
  bottom: -5px;
  left: 5px;
  width: 50px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  filter: blur(2px);
  transform-origin: center center;
  transition: all 0.5s ease;
  z-index: 1;
}

.candle-shadow.flickering {
  background: rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
  animation: shadow-flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0% {
    transform: scale(1) rotate(-2deg);
    opacity: 0.9;
  }
  20% {
    transform: scale(1.05) rotate(2deg);
    opacity: 1;
  }
  40% {
    transform: scale(0.95) rotate(-1deg);
    opacity: 0.8;
  }
  60% {
    transform: scale(1.02) rotate(1deg);
    opacity: 0.95;
  }
  80% {
    transform: scale(0.98) rotate(-2deg);
    opacity: 0.85;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.9;
  }
}

@keyframes shadow-flicker {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.6;
  }
}

.lighting-text {
  font-size: 0.9rem;
  color: var(--peace-green);
  font-weight: bold;
  margin-top: 1rem;
  transition: opacity 0.5s;
}

/* Warm Filter Overlay */
.warm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 166, 0, 0.05),
    rgba(255, 166, 0, 0.15)
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
  z-index: 999;
}
.warm-overlay.active {
  opacity: 1;
}

/* Sidebar Advice Specifics */
body.st-francis-page .sidebar-advice {
  background: #fff;
  border: 1px solid var(--peace-light);
  border-radius: 8px;
  padding: 1.5rem;
}
body.st-francis-page .sidebar-advice .header {
  color: var(--peace-green);
  border-bottom: 2px solid var(--peace-light);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  font-weight: bold;
}

/* Sidebar Links Override */
body.st-francis-page .recommendations-list li a:hover,
body.st-francis-page .recommendations-list li a.active {
  color: var(--peace-green);
  font-weight: bold;
}

/* =========================================
   Live in the Moment Page Styles
   ========================================= */

body.live-moment-page {
  --moment-blue: #0ea5e9;
  --moment-light: #e0f2fe;
  --moment-dark: #0369a1;
}

/* Clock Header Animation */
.clock-container {
  width: 150px;
  height: 150px;
  border: 8px solid var(--moment-blue);
  border-radius: 50%;
  position: relative;
  margin: 0 auto 2rem;
  background: white;
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.2);
}

.clock-face {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateY(-3px); /* Alignment fix */
}

.hand {
  width: 50%;
  height: 6px;
  background: #334155;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
  border-radius: 6px;
}

.hand-hour {
  width: 30%;
  left: 20%;
  background: #0f172a;
  z-index: 3;
}

.hand-min {
  width: 40%;
  left: 10%;
  background: #334155;
  z-index: 2;
}

.hand-second {
  width: 45%;
  background: #f43f5e;
  height: 2px;
  left: 5%;
  z-index: 4;
  transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51);
}

.center-dot {
  width: 12px;
  height: 12px;
  background: #0f172a;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  border: 2px solid white;
}

/* Markings */
.clock-mark {
  width: 4px;
  height: 10px;
  background: #cbd5e1;
  position: absolute;
  left: 50%;
  transform-origin: 50% 75px; /* Radius of clock */
  transform: translateX(-50%);
}
.mark-12 {
  top: 10px;
  transform: translateX(-50%) rotate(0deg);
  height: 15px;
  background: var(--moment-blue);
}
.mark-3 {
  top: 10px;
  transform: translateX(-50%) rotate(90deg);
  height: 15px;
  background: var(--moment-blue);
}
.mark-6 {
  top: 10px;
  transform: translateX(-50%) rotate(180deg);
  height: 15px;
  background: var(--moment-blue);
}
.mark-9 {
  top: 10px;
  transform: translateX(-50%) rotate(270deg);
  height: 15px;
  background: var(--moment-blue);
}

/* Typography */
.moment-quote {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.5rem;
  color: var(--moment-dark);
  text-align: center;
  margin: 2rem 0;
  line-height: 1.8;
}

.moment-author {
  font-size: 1rem;
  color: #64748b;
  text-align: right;
  margin-top: 1rem;
  font-weight: bold;
}

/* Time Visualization Bar */
.time-bar-container {
  background: #f1f5f9;
  padding: 2rem;
  border-radius: 12px;
  margin: 3rem 0;
  text-align: center;
}

.time-bar-track {
  width: 100%;
  height: 20px;
  background: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem 0;
  position: relative;
}

.time-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--moment-blue), #38bdf8);
  border-radius: 10px;
  transition: width 1.5s ease-out;
}

.time-highlight {
  color: var(--moment-blue);
  font-weight: bold;
  font-size: 1.2rem;
}

.moment-focus-text {
  padding: 1.5rem;
  border-left: 4px solid var(--moment-blue);
  background: var(--moment-light);
  border-radius: 0 8px 8px 0;
  margin: 2rem 0;
  font-weight: bold;
  color: #0f172a;
}

/* Sidebar Specifics */
body.live-moment-page .main-article h3 {
  color: var(--moment-dark);
  border-bottom: 2px solid var(--moment-light);
}

body.live-moment-page .sidebar-advice {
  background: #fff;
  border: 1px solid var(--moment-blue);
  border-radius: 8px;
  padding: 1.5rem;
}

body.live-moment-page .sidebar-advice .header {
  color: var(--moment-blue);
  border-color: var(--moment-light);
}

/* Digital Clock */
.digital-clock {
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--moment-dark);
  margin-top: -1rem;
  margin-bottom: 2rem;
  letter-spacing: 2px;
}

/* Pulse Effect for Center Dot */
.center-dot {
  width: 12px;
  height: 12px;
  background: #0f172a;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  border: 2px solid white;
  animation: pulse-dot 1s infinite;
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

/* Today's Progress Bar */
.today-progress-container {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  text-align: center;
}

.today-label {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.today-percentage {
  font-size: 2rem;
  font-weight: bold;
  color: var(--moment-blue);
  line-height: 1;
}

.progress-track {
  width: 100%;
  height: 12px;
  background: #f1f5f9;
  border-radius: 6px;
  margin-top: 0.5rem;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, var(--moment-blue));
  border-radius: 6px;
  transition: width 1s linear;
  position: relative;
}

.progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* =========================================
   The Answer Within Page Styles
   ========================================= */

body.answer-within-page {
  --answer-purple: #8b5cf6;
  --answer-light: #ddd6fe;
  --answer-dark: #5b21b6;
  --answer-gold: #fbbf24;
}

/* Quote Card Style */
.answer-quote-card {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-left: 5px solid var(--answer-purple);
  padding: 2rem;
  margin: 3rem 0;
  border-radius: 0 12px 12px 0;
  position: relative;
}

.answer-quote-card::before {
  content: "\f084"; /* Key icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
  height: 30px;
  background: var(--answer-gold);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.answer-quote-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.25rem;
  color: var(--answer-dark);
  line-height: 2;
  margin-bottom: 1rem;
}

/* Magic Mirror Interaction */
.mirror-container {
  width: 250px;
  height: 350px;
  margin: 4rem auto;
  position: relative;
  border-radius: 100px 100px 0 0; /* Arch shape */
  border: 8px solid #cbd5e1;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.1),
    0 10px 30px rgba(139, 92, 246, 0.2);
  overflow: hidden;
  background: linear-gradient(to bottom, #f8fafc, #e2e8f0);
  transition: all 0.5s ease;
  cursor: pointer;
}

.mirror-container:hover {
  border-color: var(--answer-gold);
  box-shadow:
    inset 0 0 20px rgba(251, 191, 36, 0.1),
    0 10px 40px rgba(251, 191, 36, 0.3);
}

.mirror-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.8s ease;
  opacity: 1;
}

.mirror-container:hover .mirror-overlay,
.mirror-container.revealed .mirror-overlay {
  opacity: 0;
  backdrop-filter: blur(0);
  pointer-events: none;
}

.mirror-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--answer-dark);
  opacity: 1; /* Always visible underneath */
}

.mirror-icon {
  font-size: 3rem;
  color: var(--answer-purple);
  margin-bottom: 1rem;
  animation: floating 3s ease-in-out infinite;
}

.mirror-message {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: bold;
  font-size: 1.2rem;
}

.mirror-hint-text {
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 1rem;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Key Animation */
.key-animation-box {
  text-align: center;
  margin: 3rem 0;
}

.glowing-key {
  font-size: 4rem;
  color: var(--answer-gold);
  animation: key-turn 3s infinite ease-in-out;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}

@keyframes key-turn {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(15deg) scale(1.1);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* Sidebar Specifics */
body.answer-within-page .main-article h3 {
  color: var(--answer-dark);
  border-bottom: 2px solid var(--answer-light);
}

body.answer-within-page .sidebar-advice {
  background: #fff;
  border: 1px solid var(--answer-purple);
  border-radius: 8px;
  padding: 1.5rem;
}

body.answer-within-page .sidebar-advice .header {
  color: var(--answer-purple);
  border-bottom: 2px solid var(--answer-light);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  font-weight: bold;
}

body.answer-within-page .recommendations-list li a:hover,
body.answer-within-page .recommendations-list li a.active {
  color: var(--answer-purple);
  font-weight: bold;
}

/* =========================================
   Inner Voice Memo Styles (Cool Design)
   ========================================= */
.memo-section {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  padding: 2.5rem;
  margin: 4rem 0;
  box-shadow:
    0 10px 30px rgba(139, 92, 246, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

/* Decorative top bar */
.memo-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--answer-purple),
    var(--answer-gold),
    var(--answer-purple)
  );
}

.memo-title {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--answer-dark);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.memo-desc {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  margin-left: 2.4rem; /* Align with title text */
}

.memo-textarea {
  width: 100%;
  height: 180px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  font-size: 1.05rem;
  font-family: inherit;
  line-height: 1.8;
  resize: vertical;
  outline: none;
  transition: all 0.3s ease;
  background: #fdfcff;
  color: #334155;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.memo-textarea:focus {
  border-color: var(--answer-purple);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.memo-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.copy-btn {
  background: linear-gradient(135deg, var(--answer-purple), var(--answer-dark));
  color: white;
  border: none;
  padding: 0.8rem 1.8rem;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
  filter: brightness(1.1);
}

.copy-btn:active {
  transform: translateY(0);
}

/* Sparkle Effect */
.sparkle {
  position: fixed;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0L14.595 9.405L24 12L14.595 14.595L12 24L9.405 14.595L0 12L9.405 9.405L12 0Z' fill='%23fbbf24'/%3E%3C/svg%3E");
  background-size: contain;
  width: 20px;
  height: 20px;
  z-index: 9999;
  animation: sparkle-fade 0.5s forwards; /* Speed up to 0.5s */
  opacity: 0;
}

@keyframes sparkle-fade {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0;
  }
}

/* Interactive Key Animation */
.glowing-key {
  font-size: 4rem;
  color: var(--answer-gold);
  animation: key-float 3s infinite ease-in-out; /* Changed to float by default */
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
  cursor: pointer;
  transition: transform 0.3s;
}

.glowing-key:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
}

.glowing-key.unlocking {
  animation: key-unlock-action 2.5s forwards ease-in-out; /* Slowed down to 2.5s */
}

@keyframes key-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes key-unlock-action {
  0% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(1.1) rotate(-10deg);
  } /* Slower anticipation */
  50% {
    transform: scale(1.2) rotate(90deg);
  } /* Slower turn */
  80% {
    transform: scale(1.5) rotate(90deg);
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1));
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Heaven's Door Animation Refined */
.key-animation-box {
  position: relative;
  /* Reserve space to prevent overlap - Door is 300px + padding */
  min-height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem 0; /* Reduced margin */
}

/* Void Background & Wrapper */
.heaven-door-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 300px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 5;

  /* Void / Space Background */
  background: radial-gradient(circle at center, #1e1b4b 0%, #000 100%);
  overflow: hidden; /* Keep gates inside */
  border-radius: 8px; /* Slightly nicer rounding */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); /* Deep shadow */
}

/* Stars in the Void (Pseudo-element) */
.heaven-door-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 3px),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 2px),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 3px);
  background-size:
    550px 550px,
    350px 350px,
    250px 250px;
  background-position:
    0 0,
    40px 60px,
    130px 270px;
  opacity: 0.8;
  z-index: 0;
}

.heaven-door-wrapper.visible {
  opacity: 1;
  pointer-events: auto;
}

.heaven-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #fffbeb 20%, #fcd34d 50%, #fbbf24 80%);
  filter: blur(15px);
  opacity: 0;
  transform: scale(0.5);
  transition: all 1.5s ease-out;
  z-index: 1; /* Behind gates */
}

.heaven-door-wrapper.active .heaven-light {
  opacity: 1;
  transform: scale(1.5);
}

.heaven-gate {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #0f172a; /* Deep dark blue-black initially */
  transition:
    transform 4s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 4s ease;
  z-index: 2;
  display: flex;
  align-items: center; /* Center knobs vertically */
}

/* When active, turn to gold and open */
.heaven-door-wrapper.active .heaven-gate {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%); /* Gold */
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5); /* Inner shine */
}

.gate-left {
  left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transform-origin: left center;
  justify-content: flex-end; /* Knob near edge */
}

.gate-right {
  right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transform-origin: right center;
  justify-content: flex-start; /* Knob near edge */
}

/* Door Knobs */
.gate-left::after,
.gate-right::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #9ca3af; /* Silver knob initially */
  border-radius: 50%;
  margin: 0 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: background-color 2s ease;
}

.heaven-door-wrapper.active .gate-left::after,
.heaven-door-wrapper.active .gate-right::after {
  background: #fff; /* Shiny white/gold knob */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.heaven-door-wrapper.active .gate-left {
  transform: perspective(1000px) rotateY(-85deg); /* Open wider */
}

.heaven-door-wrapper.active .gate-right {
  transform: perspective(1000px) rotateY(85deg); /* Open wider */
}

/* Oracle Cards Section */
.oracle-section {
  text-align: center;
  margin: 4rem 0;
}

.oracle-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  perspective: 1000px;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.oracle-card {
  background-color: transparent;
  width: 100px;
  height: 150px;
  perspective: 1000px;
  cursor: pointer;
  transition:
    transform 0.8s ease,
    opacity 0.8s ease; /* Add transitions */
}

.oracle-card.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.oracle-card.zoomed {
  transform: scale(1.3);
  z-index: 10;
  cursor: default;
}

.oracle-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.oracle-card.flipped .oracle-card-inner {
  transform: rotateY(180deg);
}

.oracle-card-front,
.oracle-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.oracle-card-front {
  background: linear-gradient(135deg, var(--answer-dark), var(--answer-purple));
  color: var(--answer-gold);
  border: 2px solid var(--answer-light);
}

.oracle-card-back {
  background-color: white;
  color: var(--answer-dark);
  transform: rotateY(180deg);
  border: 2px solid var(--answer-gold);
  font-weight: bold;
  font-family: "Yu Mincho", serif;
}

.card-pattern {
  font-size: 2rem;
  opacity: 0.8;
}

.oracle-keyword {
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

.oracle-desc {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 5px;
  padding: 0 5px;
}

/* =========================================
   The Power Within Page Styles
   ========================================= */

body.power-within-page {
  --power-orange: #f97316;
  --power-dark: #c2410c;
  --power-gold: #fbbf24;
  --power-bg: #fff7ed;
}

/* Pulsing Core Animation */
.power-core-container {
  position: relative;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0;
  flex-direction: column;
}

.power-core {
  width: 60px;
  height: 60px;
  background: var(--power-orange);
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 60px var(--power-orange);
  animation: core-pulse 2s infinite ease-in-out;
}

.power-core-inner {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  box-shadow: 0 0 20px #fff;
  animation: core-flicker 0.1s infinite alternate;
}

.power-title-text {
  position: relative;
  z-index: 3;
  margin-top: 140px; /* Below the core */
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--power-dark);
  letter-spacing: 0.2em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes core-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 40px var(--power-orange);
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
    box-shadow: 0 0 80px var(--power-gold);
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 40px var(--power-orange);
  }
}

@keyframes core-flicker {
  0% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Quote Card */
.power-quote-card {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-left: 6px solid var(--power-orange);
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 4px;
  position: relative;
}

.power-quote-card .quote-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: #431407;
}

.power-quote-card .quote-author {
  text-align: right;
  margin-top: 1rem;
  font-style: italic;
  color: var(--power-dark);
}

/* Catch Chance Game */
.chance-game-section {
  background: #1e1b4b; /* Dark bg for contrast */
  color: #fff;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  margin: 4rem 0;
  position: relative;
  overflow: hidden;
}

.chance-game-section h3 {
  color: var(--power-gold);
  border-bottom-color: var(--power-gold);
}

.chance-answer {
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  font-weight: bold;
}

.chance-game-container {
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  position: relative;
  margin: 2rem 0;
  cursor: default;
  overflow: hidden;
}

.game-instruction {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  font-size: 0.9rem;
}

.chance-orb {
  position: absolute;
  top: 50%;
  left: -50px; /* Start off-screen */
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #fff, var(--power-gold));
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: var(--power-orange);
  box-shadow: 0 0 20px var(--power-gold);
  cursor: pointer;
  animation: move-chance 4s linear infinite;
  z-index: 10;
}

.chance-orb.caught {
  animation-play-state: paused;
  transform: scale(2);
  box-shadow: 0 0 50px #fff;
  transition: all 0.3s;
}

@keyframes move-chance {
  0% {
    left: -60px;
  }
  100% {
    left: 110%;
  } /* Move completely across */
}

.success-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.95);
  color: var(--power-dark);
  padding: 2rem;
  border-radius: 12px;
  font-weight: bold;
  z-index: 20;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.success-message.show {
  transform: translate(-50%, -50%) scale(1);
}

/* Firework particles */
.firework-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--power-gold);
  border-radius: 50%;
  pointer-events: none;
  animation: explode 1s forwards ease-out;
}

@keyframes explode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

.final-message {
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--power-orange);
  margin-top: 3rem;
  padding: 2rem;
  border: 3px double var(--power-orange);
  border-radius: 12px;
  background: #fff;
}

/* Sidebar Specifics */
body.power-within-page .sidebar-advice {
  background: #fff;
  border: 2px solid var(--power-orange);
  border-radius: 8px;
  padding: 1.5rem;
}

body.power-within-page .sidebar-advice .header {
  color: var(--power-dark);
  border-bottom: 2px solid var(--power-gold);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  font-weight: bold;
}

body.power-within-page .recommendations-list li a:hover,
body.power-within-page .recommendations-list li a.active {
  color: var(--power-orange);
  font-weight: bold;
}

/* Background Fixed Core */
.fixed-power-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* Start small */
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(251, 191, 36, 0.2) 0%,
    rgba(249, 115, 22, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  transition: transform 0.1s ease-out; /* Smooth follow */
  mix-blend-mode: multiply;
}

/* Determination Button */
.determination-btn {
  background: linear-gradient(45deg, #f97316, #ef4444, #f59e0b);
  background-size: 200% 200%;
  color: white !important;
  padding: 1.5rem 3rem;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.5);
  animation:
    gradient-flow 3s ease infinite,
    pulse-btn 2s infinite;
  display: inline-block;
  text-decoration: none;
  transition: transform 0.3s;
}

.determination-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 50px rgba(249, 115, 22, 0.8);
}

@keyframes pulse-btn {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Whiteout Overlay */
.whiteout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 2s ease-in;
}

.whiteout-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.whiteout-msg {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3rem;
  font-weight: bold;
  color: var(--power-orange);
  transform: scale(0.8);
  opacity: 0;
  transition: all 1s ease 1s; /* Delay appearance */
}

.whiteout-overlay.active .whiteout-msg {
  transform: scale(1.2);
  opacity: 1;
}
/* =========================================
   No Rehearsal in Life Page Styles
   ========================================= */

body.no-rehearsal-page {
  --stage-red: #b91c1c;
  --stage-gold: #f59e0b;
  --stage-dark: #1a1a1a;
  /* font-family: "Kaisei Opti", "Yu Mincho", serif;  <-- REMOVED GLOBAL FONT */
}

/* Quote Font Specifics */
.stage-lead,
.stage-quote-author {
  font-family: "Kaisei Opti", "Yu Mincho", serif;
}

/* LIVE Indicator */
.live-indicator {
  position: fixed;
  top: 80px;
  right: 20px;
  background: #000;
  color: #ef4444;
  border: 2px solid #ef4444;
  padding: 0.5rem 1rem;
  font-weight: bold;
  font-family: monospace;
  z-index: 900; /* Adjusted to not block bento menu */
  text-transform: uppercase;
  box-shadow: 0 0 10px #ef4444;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.live-dot {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  animation: blink-live 1s infinite;
}

@keyframes blink-live {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Today's Ticket */
.ticket-container {
  background: #fff;
  width: 300px;
  margin: 0 auto 3rem auto;
  border: 2px dashed var(--stage-gold);
  border-radius: 8px;
  position: relative;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-image:
    radial-gradient(circle at 0 50%, transparent 10px, #fff 11px),
    radial-gradient(circle at 100% 50%, transparent 10px, #fff 11px);
  background-size: 50% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
  text-align: center;
}

.ticket-title {
  font-size: 0.8rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.ticket-date {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--stage-red);
  font-family: monospace;
}

.ticket-note {
  font-size: 0.7rem;
  color: var(--stage-gold);
  margin-top: 0.5rem;
  font-weight: bold;
}

/* Curtain Call Effects */
.flower-rose {
  position: fixed;
  font-size: 2rem;
  z-index: 9999;
  pointer-events: none;
  animation: rose-throw 2s ease-out forwards;
}

@keyframes rose-throw {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(50vh - 200px + var(--fall-y, 0px)))
      rotate(360deg) scale(1.2);
    opacity: 0;
  }
  /* Actually better to just fall down or fly up? Let's fly up from bottom like throw */
}
/* Re-doing keyframes in actual implementation for physics-like feel */

/* Page Curtains */
.stage-curtain-left,
.stage-curtain-right {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100vh;
  background: linear-gradient(
    90deg,
    #7f1d1d,
    #b91c1c,
    #7f1d1d
  ); /* Red velvet */
  z-index: 9000;
  transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1);
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.5);
}

.stage-curtain-left {
  left: 0;
  transform-origin: left center;
}

.stage-curtain-right {
  right: 0;
  transform-origin: right center;
}

.stage-curtain-left.open {
  transform: translateX(-100%);
}

.stage-curtain-right.open {
  transform: translateX(100%);
}

/* Stage Card (Spotlight) */
.stage-card {
  position: relative;
  background:
    url("https://www.transparenttextures.com/patterns/black-linen.png"), #1a1a1a;
  /* Texture fallback */
  color: #fff;
  padding: 4rem 2rem;
  border-radius: 8px;
  border: 4px double var(--stage-gold);
  text-align: center;
  overflow: hidden;
  margin: 3rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(0, 0, 0, 0.85) 200px
  );
  pointer-events: none;
  transition: background 0.1s;
  mix-blend-mode: multiply;
}

.stage-content {
  position: relative;
  z-index: 2;
}

.stage-lead {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 2rem;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.stage-quote-author {
  font-size: 1rem;
  color: var(--stage-gold);
  text-align: right;
  font-style: italic;
}

/* Synchronicity Section */
.sync-section {
  background: #fffbeb;
  border-left: 5px solid var(--stage-gold);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
}

.sync-icon {
  font-size: 2rem;
  color: var(--stage-gold);
  margin-bottom: 0.5rem;
}

.sync-examples {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.sync-examples li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
  font-weight: bold;
  color: #451a03;
}

.sync-examples li i {
  position: absolute;
  left: 0;
  color: var(--stage-red);
}

.red-highlight {
  background: linear-gradient(transparent 60%, rgba(185, 28, 28, 0.2) 60%);
  font-weight: bold;
}

/* Intuition Game */
.intuition-game {
  background: #fdf2f8;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  margin: 3rem 0;
  border: 1px dashed var(--stage-red);
}

.curtain-choice-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.curtain-choice {
  width: 80px;
  height: 120px;
  background: var(--stage-gold);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.curtain-choice:hover {
  transform: translateY(-5px);
}

/* General Sidebar Advice */
.sidebar-advice {
  background: #fff;
  border: 2px solid #fbbf24; /* Added border as requested */
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.sidebar-advice .header {
  font-weight: bold;
  color: #d97706;
  border-bottom: 1px dashed #fcd34d;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Sidebar Specifics */
body.no-rehearsal-page .sidebar-advice {
  background: #fff;
  border: 2px solid var(--stage-red);
  border-radius: 8px;
  padding: 1.5rem;
}

body.no-rehearsal-page .sidebar-advice .header {
  color: var(--stage-red);
  border-bottom: 2px solid var(--stage-gold);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  font-weight: bold;
}

body.no-rehearsal-page .recommendations-list li a:hover,
body.no-rehearsal-page .recommendations-list li a.active {
  color: var(--stage-red);
  font-weight: bold;
}

/* Footer Navigation (Standardized) */
.method-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-btn:hover {
  background: #f1f5f9;
  transform: translateY(-2px);
}

.nav-btn.prev {
  color: #64748b;
}

.nav-btn.list {
  background: #475569;
  color: white;
  border: none;
}

.nav-btn.list:hover {
  background: #334155;
}

/* =========================================
   Win Over Difficulties Page Styles (Gentle & Healing)
   ========================================= */

/* =========================================
   Page Specific Styles for Recommendations
   ========================================= */

/* --- Shining Life Page (shining_life.html) --- */
.shining-life-page {
  --shine-gold: #f59e0b;
  --shine-light: #fcd34d;
  --shine-bg: #fffbeb;
}

.shining-life-page .intro-quote {
  text-align: center;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: #78350f;
  line-height: 2.2;
  margin-bottom: 3rem;
  font-size: 1.15rem;
  font-weight: 500;
}

.shining-life-page .shine-quote-section {
  background: radial-gradient(circle at center, #fff7ed 0%, #ffffff 80%);
  border: 2px solid #fcd34d;
  border-radius: 16px;
  padding: 3rem 2rem;
  margin: 3rem 0;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
  overflow: hidden;
}

.shining-life-page .twinkle-star {
  position: absolute;
  color: #fbbf24;
  opacity: 0;
  animation: twinkle 3s infinite ease-in-out;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.shining-life-page .shine-icon-wrapper {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: white;
  padding: 0 1rem;
  border-radius: 50%;
  border: 1px solid #fef3c7;
}

.shining-life-page .shine-quote-section i.main-icon {
  font-size: 2.5rem;
  color: #f59e0b;
}

.shining-life-page .shine-text {
  position: relative;
  z-index: 1;
  font-size: 1.25rem;
  line-height: 2;
  color: #b45309;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.shining-life-page .shine-author {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 1.5rem;
  font-weight: bold;
  color: #d97706;
}

.shining-life-page .main-article h3 {
  color: #d97706;
  border-bottom: 2px solid #fcd34d;
  padding-bottom: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  font-size: 1.4rem;
}

.shining-life-page .main-article p {
  line-height: 2;
  margin-bottom: 1.5rem;
  color: #334155;
}

.shining-life-page .dancing-fool-quote {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #d97706;
  margin: 2rem 0;
  padding: 1rem;
  background: #fffbeb;
  border-radius: 12px;
  font-family: "Yu Mincho", serif;
}

.shining-life-page .action-highlight {
  background: linear-gradient(120deg, #fde68a 0%, #fde68a 100%);
  background-repeat: no-repeat;
  background-size: 100% 40%;
  background-position: 0 88%;
  font-weight: bold;
  color: #451a03;
}

.shining-life-page .action-button-container {
  text-align: center;
  margin: 4rem 0;
}

.shining-life-page .action-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 1.2rem 3rem;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.shining-life-page .action-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.4);
}

.shining-life-page .action-btn:active {
  transform: translateY(1px);
}

.shining-life-page .sidebar-advice {
  background: #fff;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 1.5rem;
}

.shining-life-page .sidebar-advice .header {
  color: #d97706;
  border-bottom: 2px solid #fcd34d;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  font-weight: bold;
}

#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.sparkle-star {
  position: absolute;
  color: #fcd34d;
  pointer-events: none;
  opacity: 0;
  animation: sparkleAnim 2s linear forwards;
  z-index: 1;
}

@keyframes sparkleAnim {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
  }
}

/* --- If World Were Village Page (if_world_were_village.html) --- */
.if-world-were-village-page .story-text {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  line-height: 2.4;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  color: #334155;
  margin-bottom: 2rem;
}

.if-world-were-village-page .opening-question {
  background: linear-gradient(to bottom, #fff7ed, #ffffff);
  padding: 3rem 2rem;
  border-radius: 16px;
  margin-bottom: 4rem;
  text-align: center;
  border: 1px solid #ffedd5;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03);
  position: relative;
}

.if-world-were-village-page .opening-question p {
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: #431407;
}

.if-world-were-village-page .opening-question::before {
  content: none;
}

.if-world-were-village-page .story-text p {
  margin-bottom: 2rem;
}

.if-world-were-village-page .note-title {
  color: #334155;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 0.5rem;
  display: inline-block;
}

.if-world-were-village-page .morrie-quote {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 5px solid #ea580c;
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
  font-style: italic;
  color: #7c2d12;
  box-shadow: 0 4px 6px -1px rgba(254, 215, 170, 0.4);
}

.if-world-were-village-page .morrie-quote i {
  color: #fb923c;
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.if-world-were-village-page .story-text strong {
  background: linear-gradient(transparent 70%, #fdba74 70%);
  color: inherit;
  font-weight: bold;
}

.if-world-were-village-page .visual-summary {
  background: #f8fafc;
  border-top: 4px solid #3b82f6;
  padding: 3rem 1.5rem;
  margin-top: 4rem;
  border-radius: 8px;
}

.if-world-were-village-page .summary-title {
  text-align: center;
  color: #1e40af;
  font-size: 1.5rem;
  margin-bottom: 3rem;
  font-weight: bold;
}

.if-world-were-village-page .chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.if-world-were-village-page .chart-card {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.if-world-were-village-page .chart-label {
  font-weight: bold;
  color: #475569;
  margin-bottom: 1rem;
  display: block;
}

.if-world-were-village-page .pie-chart {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  position: relative;
}

.if-world-were-village-page .pie-chart::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: white;
  border-radius: 50%;
}

.if-world-were-village-page .chart-gender {
  background: conic-gradient(#ec4899 0% 52%, #3b82f6 52% 100%);
}

.if-world-were-village-page .chart-age {
  background: conic-gradient(#f59e0b 0% 30%, #10b981 30% 100%);
}

.if-world-were-village-page .chart-race {
  background: conic-gradient(#854d0e 0% 70%, #fcd34d 70% 100%);
}

.if-world-were-village-page .chart-wealth {
  background: conic-gradient(#ef4444 0% 6%, #e2e8f0 6% 100%);
}

.if-world-were-village-page .legend {
  font-size: 0.9rem;
  color: #64748b;
  text-align: left;
  margin-top: 1rem;
}

.if-world-were-village-page .legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.if-world-were-village-page .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.if-world-were-village-page .bar-chart-container {
  margin-top: 2rem;
}

.if-world-were-village-page .bar-row {
  margin-bottom: 0.8rem;
}

.if-world-were-village-page .bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.if-world-were-village-page .bar-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.if-world-were-village-page .bar-fill {
  height: 100%;
  border-radius: 4px;
}

.if-world-were-village-page .highlight-box {
  background: #fff1f2;
  border: 2px solid #fda4af;
  padding: 2rem;
  border-radius: 8px;
  margin: 3rem 0;
  text-align: center;
}

/* =========================================
   Peace of Mind Page Styles (Core)
   ========================================= */
body.peace-page {
  background-color: #ffffff;
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-weight: normal;
}

/* Restored standard header weights */

body.peace-page .section-title h2 {
  color: #0284c7;
  /* font-weight: bold; Default H2 is bold, so just letting it be or explicit setting */
  font-weight: bold;
}
body.peace-page .section-title .line {
  background: #bae6fd;
}

/* Jampolsky Quote Section */
body.peace-page .jampolsky-quote-section {
  background: linear-gradient(to bottom right, #fff, #f0f9ff);
  border: 1px solid #bae6fd;
  border-radius: 16px;
  padding: 3rem;
  margin: 3rem 0;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.1);
}

body.peace-page .jampolsky-quote-section::before {
  content: "\f4b6"; /* Dove/Peace icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  color: #0ea5e9;
  background: white;
  padding: 0 1rem;
  border-radius: 50%;
}

body.peace-page .quote-text {
  font-size: 1.15rem;
  line-height: 2.2;
  color: #0369a1;
  margin-bottom: 2rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: normal;
}

body.peace-page .quote-author {
  color: #0284c7;
  font-weight: normal; /* Removed bold */
  font-size: 1rem;
}

/* Main Content Styling */
body.peace-page .main-article h3 {
  color: #0369a1;
  border-bottom: 2px solid #bae6fd;
  padding-bottom: 0.5rem;
  margin-top: 3rem;
  font-weight: bold; /* Restored bold */
}

body.peace-page .main-article p {
  line-height: 2;
  margin-bottom: 1.5rem;
  color: #334155;
  font-weight: normal;
}

body.peace-page .highlight-box {
  background: #fff;
  border-left: 5px solid #0ea5e9;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 0 8px 8px 0;
}

body.peace-page .highlight-text {
  font-weight: normal; /* Removed bold */
  color: #0284c7;
}

body.peace-page .closing-message {
  text-align: center;
  font-size: 1.3rem;
  color: #0ea5e9;
  font-weight: normal; /* Removed bold */
  margin-top: 4rem;
  margin-bottom: 2rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* Sidebar Specifics */
body.peace-page .sidebar-advice {
  background: #fff;
  border: 1px solid #7dd3fc;
  border-radius: 8px;
  padding: 1.5rem;
}
body.peace-page .sidebar-advice .header {
  color: #0284c7;
  border-bottom: 2px solid #bae6fd;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  font-weight: bold; /* Restored bold */
}
body.peace-page .sidebar-group-label i {
  color: #0ea5e9;
}
body.peace-page .active {
  color: #0ea5e9 !important;
  font-weight: bold; /* Restored bold */
}

/* --- Peace of Mind Brush-up Styles --- */

/* 1. Flowing Clouds */
.cloud-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  opacity: 0.8;
  filter: blur(8px);
  animation: floatCloud linear infinite;
}

.cloud::after,
.cloud::before {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud::after {
  width: 30%;
  height: 30%;
  top: -45%;
  left: 15%;
}

.cloud::before {
  width: 40%;
  height: 40%;
  top: -65%;
  left: 45%;
}

@keyframes floatCloud {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-200px);
  }
}

/* 2. Water Ripple Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(14, 165, 233, 0.4); /* Sky blue ripple */
  transform: scale(0);
  animation: ripple-anim 1s linear;
  pointer-events: none;
  z-index: 0;
}

@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 3. Balloon Animation */
.balloon-section {
  text-align: center;
  margin: 4rem 0;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: 1px dashed #bae6fd;
}

.balloon-btn {
  background: linear-gradient(120deg, #38bdf8, #0ea5e9);
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
  transition: all 0.3s ease;
}

.balloon-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.balloon {
  position: fixed;
  bottom: -100px;
  width: 40px;
  height: 50px;
  background: #ff5e5e;
  border-radius: 50%;
  animation: flyUp 8s ease-in forwards;
  z-index: 9999;
}

.balloon::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background: rgba(0, 0, 0, 0.2);
}

.balloon.b-blue {
  background: #60a5fa;
}
.balloon.b-green {
  background: #4ade80;
}
.balloon.b-yellow {
  background: #facc15;
}
.balloon.b-purple {
  background: #a78bfa;
}

@keyframes flyUp {
  0% {
    bottom: -100px;
    transform: translateX(0) scale(1);
    opacity: 0.9;
  }
  20% {
    transform: translateX(20px) scale(1);
  }
  40% {
    transform: translateX(-20px) scale(0.9);
  }
  60% {
    transform: translateX(10px) scale(0.8);
  }
  80% {
    opacity: 0.8;
  }
  100% {
    bottom: 120vh;
    transform: translateX(0) scale(0.5);
    opacity: 0;
  }
}

/* --- Phase 2: Interactive Features --- */

/* Breathing Guide */
.breathing-guide {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
  overflow: hidden;
  transition:
    width 0.3s,
    height 0.3s,
    border-radius 0.3s;
}

.breathing-guide:hover {
  width: 200px;
  height: 120px;
  border-radius: 16px;
}

.breathing-circle {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #bae6fd, #0ea5e9);
  border-radius: 50%;
  animation: breathe 10s infinite ease-in-out;
  opacity: 0.8;
}

.breathing-text {
  display: none;
  margin-left: 15px;
  font-size: 0.9rem;
  color: #0369a1;
  font-weight: bold;
  white-space: nowrap;
}

.breathing-guide:hover .breathing-text {
  display: block;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  } /* Exhale/Hold */
  40% {
    transform: scale(1.5);
    opacity: 0.4;
  } /* Inhale */
  50% {
    transform: scale(1.5);
    opacity: 0.4;
  } /* Hold */
  90% {
    transform: scale(1);
    opacity: 0.8;
  } /* Exhale */
}

/* Enhanced Balloon Input */
.balloon-input-container {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.worry-input {
  padding: 0.8rem;
  border: 2px solid #bae6fd;
  border-radius: 50px;
  width: 60%;
  max-width: 300px;
  outline: none;
  color: #0369a1;
  transition: all 0.3s;
}

.worry-input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.balloon-text-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: white;
  text-align: center;
  width: 80%;
  line-height: 1.2;
  word-break: break-all;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Perspective Toggle Switch */
.perspective-section {
  text-align: center;
  margin: 4rem 0;
  padding: 2rem;
  background: #f1f5f9; /* Start slightly darker (Slate 100) */
  border-radius: 12px;
  border: 1px solid #cbd5e1; /* Start with darker border */
  transition: all 0.5s ease;
}

.perspective-section.enlightened {
  background: #ffffff; /* Brighter (White) */
  border: 1px solid #38bdf8; /* Bright Blue */
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); /* Glow effect */
}

.toggle-container {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align: middle;
  margin: 0 1rem;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.toggle-input:checked + .toggle-slider {
  background-color: #0ea5e9;
}

.toggle-input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.perspective-text {
  font-size: 1.2rem;
  color: #64748b;
  transition: all 0.5s;
  display: inline-block;
  vertical-align: middle;
}

.perspective-text.active {
  color: #0ea5e9;
  font-weight: bold;
  transform: scale(1.1);
}

.result-text {
  margin-top: 2rem;
  min-height: 3em;
  color: #334155;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}

.result-text.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================





/* --- Life Changes Page Styles --- */

/* Theme: Transformation Violet */
.page-title-area.theme-violet {
  text-align: left;
  margin-bottom: 3rem;
}
.page-title-area.theme-violet .page-title-text {
  color: #7c3aed; /* Violet-600 */
}
.page-title-area.theme-violet .title-underline {
  background: #a78bfa; /* Violet-400 */
}

.header-violet {
  border-left-color: #7c3aed;
  color: #4c1d95;
}

.num-violet {
  color: #8b5cf6;
}

.highlight-box-violet {
  background: #f5f3ff; /* Violet-50 */
  border-left: 5px solid #8b5cf6;
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
  color: #5b21b6;
  font-weight: bold;
}

/* Sidebar Advice */
.advice-violet {
  background: #fdf4ff; /* Light Pink/Violet mix */
  border: 2px solid #e879f9;
}
.advice-highlight-violet {
  background: linear-gradient(
    120deg,
    rgba(232, 121, 249, 0) 0%,
    rgba(232, 121, 249, 0.2) 100%
  );
  box-shadow: inset 0 -0.5em 0 rgba(232, 121, 249, 0.3);
}

/* Quote Style: Domino vertical list feel */
.quote-style-domino {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(124, 58, 237, 0.05) 0px,
      rgba(124, 58, 237, 0.05) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-left-color: #7c3aed; /* Violet-600 */
  box-shadow: 0 10px 30px -5px rgba(124, 58, 237, 0.15);
}

.quote-style-domino .quote-text-vertical p {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #1e293b;
  border-left: 3px solid #ddd6fe;
  padding-left: 1rem;
  transition: all 0.3s ease;
}
.quote-style-domino .quote-text-vertical p:hover {
  border-left-color: #7c3aed;
  transform: translateX(5px);
}
.quote-style-domino .highlight {
  font-weight: bold;
  color: #6d28d9;
  font-size: 1.2rem;
}

/* Contrast List */
.contrast-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}
.contrast-list li {
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  flex: 1;
  min-width: 200px;
}
.negative-item {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.positive-item {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
  box-shadow: 0 4px 6px rgba(251, 191, 36, 0.2);
}
.arrow-item {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: #94a3b8;
  background: none !important;
  border: none !important;
  min-width: auto;
}

/* --- Domino Animation --- */
.domino-stage {
  background: #f8fafc;
  padding: 3rem 1rem;
  border-radius: 16px;
  margin: 2rem 0;
  text-align: center;
  perspective: 1000px; /* Essential for 3D fall */
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e2e8f0;
}

.domino-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: flex-end;
  height: 150px;
  margin-bottom: 2rem;
  /* Angle view */
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(10deg);
}

.domino {
  width: 60px;
  height: 100px;
  background: #7c3aed;
  color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transform-origin: bottom center;
  transition: transform 0.5s ease-in;
  position: relative;
  user-select: none;
}
/* Side thickness illusion */
.domino::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 5px;
  height: 100%;
  background: #5b21b6;
  transform: skewY(45deg);
  transform-origin: left;
}

/* Falling State handled by JS adding .falling class to individual dominos */
/* But we might have stage-based overrides if any */

/* Special Last Domino */
.domino.last {
  background: #10b981;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bounce effect */
}
.domino.last::after {
  background: #047857;
}

.domino.last.falling {
  /* Instead of falling, it jumps up or opens */
  transform: scale(1.5) rotateX(0deg) translateY(-20px);
  background: radial-gradient(circle, #fbbf24, #f59e0b);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
  z-index: 10;
}
.domino.last .content-back {
  display: none;
}
.domino.last.falling .content-front {
  content: "";
}

.domino-message {
  color: #64748b;
  font-size: 0.9rem;
  min-height: 1.5rem;
  transition: color 0.3s;
}
.domino-message.complete {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1rem;
}

/* --- Ripple Effect --- */
.ripple-visual {
  position: relative;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  background: #f0f9ff;
  border-radius: 50%;
  overflow: hidden;
}

.ripple-core {
  width: 60px;
  height: 60px;
  background: #f43f5e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
  z-index: 10;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
  animation: pulse-core 2s infinite;
}

@keyframes pulse-core {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(244, 63, 94, 0.3);
  background: rgba(244, 63, 94, 0.05);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
  font-size: 0.8rem;
  color: #be123c;
  font-weight: bold;
  opacity: 0;
  animation: ripple-spread 4s infinite linear;
}

.ripple.r1 {
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}
.ripple.r2 {
  width: 160px;
  height: 160px;
  animation-delay: 1s;
}
.ripple.r3 {
  width: 220px;
  height: 220px;
  animation-delay: 2s;
}
.ripple.r4 {
  width: 280px;
  height: 280px;
  animation-delay: 3s;
}

@keyframes ripple-spread {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Conclusion Box Theme Override */
.theme-violet-box {
  border-color: #a78bfa;
  background: #f5f3ff;
}

/* --- Domino Reset Button --- */
.domino-reset-btn {
  background: #fff;
  border: 1px solid #a78bfa;
  color: #7c3aed;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.3s;
}
.domino-reset-btn:hover {
  background: #a78bfa;
  color: white;
}

/* Falling State - Restored */
.domino.falling {
  transform: rotateX(70deg); /* Fall flat */
  background: #a78bfa; /* Lighter when down */
}

/* --- Everything is Teacher Page Styles --- */

/* Theme: Learning Teal */
.page-title-area.theme-teal {
  text-align: left;
  margin-bottom: 3rem;
}
.page-title-area.theme-teal .page-title-text {
  color: #0d9488; /* Teal-600 */
}
.page-title-area.theme-teal .title-underline {
  background: #5eead4; /* Teal-300 */
}

.header-teal {
  border-left-color: #0d9488;
  color: #115e59;
}

.num-teal {
  color: white;
  background: #0d9488;
}

.highlight-box-teal {
  background: #f0fdfa; /* Teal-50 */
  border-left: 5px solid #14b8a6;
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
  color: #134e4a;
  font-weight: bold;
}

/* Sidebar Advice */
.advice-teal {
  background: #f0fdfa; /* Teal-50 */
  border: 2px solid #5eead4;
}
.advice-highlight-teal {
  background: linear-gradient(
    120deg,
    rgba(94, 234, 212, 0) 0%,
    rgba(94, 234, 212, 0.4) 100%
  );
  box-shadow: inset 0 -0.5em 0 rgba(94, 234, 212, 0.5);
}

/* Conclusion Box Theme Override */
.theme-teal-box {
  border-color: #5eead4;
  background: #f0fdfa;
  color: #115e59;
}

/* Notebook Style Quote */
.quote-style-notebook {
  background-color: #fff;
  background-image:
    linear-gradient(#e5e7eb 1px, transparent 1px),
    linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  border: 1px solid #cbd5e1;
  border-left: 6px solid #0d9488;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  padding: 3rem;
  margin-bottom: 4rem;
  border-radius: 4px;
}
.quote-style-notebook::before {
  /* Spiral binding visual illusion */
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 25px;
  background-image: radial-gradient(
    circle at center,
    #334155 3px,
    transparent 4px
  );
  background-size: 10px 30px;
  background-repeat: repeat-y;
}

/* Teal Card for Story */
.teal-card {
  background: #ccfbf1;
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 2rem 0;
  box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.1);
}
.teal-card .card-icon {
  font-size: 2rem;
  color: #0d9488;
  padding-top: 5px;
}

/* Mirror Visual */
.mirror-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0;
}

.mirror-frame {
  width: 200px;
  height: 280px;
  background: #cbd5e1;
  border-radius: 50% 50% 5px 5px;
  padding: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  position: relative;
  border: 4px solid #94a3b8;
}

.mirror-glass {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #f1f5f9 0%,
    #e2e8f0 40%,
    #fff 50%,
    #e2e8f0 60%,
    #cbd5e1 100%
  );
  border-radius: 45% 45% 2px 2px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.mirror-glass::after {
  /* Reflection sheen */
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  transform: rotate(30deg);
  pointer-events: none;
  opacity: 0.3;
}

.mirror-glass i {
  font-size: 5rem;
  color: #94a3b8;
  opacity: 0.2;
}

.reflection-text {
  font-weight: bold;
  color: #64748b;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.mirror-caption {
  margin-top: 1.5rem;
  font-weight: bold;
  color: #0d9488;
  background: #f0fdfa;
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  border: 1px solid #5eead4;
}

/* --- Brush-up Enhancements (Everything is Teacher) --- */

/* 1. Interactive Mirror */
.mirror-visual {
  perspective: 1000px; /* For 3D feel */
  cursor: pointer;
}
.mirror-frame {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.mirror-visual:hover .mirror-frame {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 35px rgba(13, 148, 136, 0.2);
  border-color: #5eead4;
}
.mirror-glass i {
  transition: all 0.5s ease;
}
.mirror-visual:hover .mirror-glass i {
  opacity: 1;
  color: #5eead4;
  transform: scale(1.1);
  text-shadow: 0 0 15px rgba(94, 234, 212, 0.6);
}
/* Mirror Words Animation */
.floating-word {
  position: absolute;
  color: #0d9488;
  font-weight: bold;
  pointer-events: none;
  animation: wordFloatUp 2s ease-out forwards;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  z-index: 10;
}

@keyframes wordFloatUp {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -20px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -100px) scale(1);
    opacity: 0;
  }
}

@keyframes wordFloatRadial {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translate(
        calc(-50% + var(--mx) * 0.2),
        calc(-50% + var(--my) * 0.2)
      )
      scale(1);
  }
  100% {
    transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my)))
      scale(1.1);
    opacity: 0;
  }
}
.floating-word.indigo {
  color: #fca5a5; /* Warm Pink/Red tint for warmth */
  text-shadow: 0 0 10px rgba(254, 202, 202, 0.8);
  font-size: 1.1rem;
  animation: wordFloatRadial 3s ease-out forwards; /* Longer, smoother */
}

/* 2. Highlighter Animation */
.text-marker-teal {
  background-image: linear-gradient(rgba(0, 0, 0, 0) 65%, #5eead4 65%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  /* Ensure it works inline */
  display: inline;
}
/* Trigger animation when parent .reveal gets .active */
.reveal.active .text-marker-teal,
.reveal.active.text-marker-teal {
  background-size: 100% 100%;
}

/* --- Orchestra Member Page Styles --- */

/* Theme: Harmony Indigo */
.page-title-area.theme-indigo {
  text-align: center; /* Centered for grandeur */
  margin-bottom: 4rem;
}
.page-title-area.theme-indigo .page-title-text {
  color: #4338ca; /* Indigo-700 */
}
.page-title-area.theme-indigo .title-underline {
  background: #fbbf24; /* Amber-400 (Gold) */
  margin: 1rem auto;
}
.page-title-area.theme-indigo .title-subtext {
  color: #6366f1;
}

.header-indigo {
  border-left-color: #4338ca;
  color: #312e81; /* Indigo-900 */
}

.num-indigo {
  color: white;
  background: #4338ca;
}

/* Cosmic Background (Fixed) */
.cosmic-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(to bottom, #fcfdff 0%, #eef2ff 100%);
  pointer-events: none;
  overflow: hidden;
}
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(#c7d2fe 1px, transparent 1px),
    radial-gradient(#818cf8 1px, transparent 1px);
  background-size: 50px 50px;
  background-position:
    0 0,
    25px 25px;
  opacity: 0.5;
  animation: starPulse 6s ease-in-out infinite; /* Subtle twinkle */
}

@keyframes starPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Cosmic Quote Style */
.quote-style-cosmic {
  background: radial-gradient(circle at top right, #312e81, #1e1b4b);
  color: white;
  border-radius: 16px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(49, 46, 129, 0.4);
  border: none;
  text-align: center;
}
.quote-style-cosmic .quote-text p {
  color: #e0e7ff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.quote-style-cosmic .quote-author {
  color: #a5b4fc;
}
.musical-notes-anim i {
  position: absolute;
  color: rgba(255, 255, 255, 0.1);
  animation: floatNote 6s infinite ease-in-out;
}
.note-1 {
  top: 10%;
  left: 10%;
  font-size: 3rem;
  animation-delay: 0s;
}
.note-2 {
  top: 20%;
  right: 15%;
  font-size: 2rem;
  animation-delay: 2s;
}
.note-3 {
  bottom: 15%;
  left: 20%;
  font-size: 4rem;
  animation-delay: 4s;
}

@keyframes floatNote {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
    opacity: 0.3;
  }
}

/* Highlight Wrapper */
.highlight-wrapper-indigo {
  background: #e0e7ff;
  padding: 2rem;
  border-radius: 50px; /* Capsule shape */
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 4px 6px rgba(67, 56, 202, 0.1);
}
.highlight-icon {
  font-size: 2.5rem;
  color: #4338ca;
  background: white;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.highlight-text {
  flex: 1;
  font-weight: bold;
  color: #3730a3;
}

/* Thought Experiment Box */
.thought-experiment-box {
  background: white;
  border: 2px dashed #a5b4fc;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
}
.thought-experiment-box h3 {
  text-align: center;
  color: #6366f1;
  margin-bottom: 1.5rem;
}
.experiment-scenario {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e7ff;
}
.experiment-scenario:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.experiment-scenario strong {
  color: #4338ca;
  display: block;
  margin-bottom: 0.3rem;
}

/* Harmony Visual (Ripple) */
.harmony-visual {
  position: relative;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}
.conductor-circle {
  width: 60px;
  height: 60px;
  background: #4338ca;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  z-index: 2;
  box-shadow: 0 0 20px rgba(67, 56, 202, 0.4);
}
.wave-ring {
  position: absolute;
  border: 2px solid #818cf8;
  border-radius: 50%;
  opacity: 0;
  animation: rippleEffect 3s infinite linear;
}
.ring1 {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}
.ring2 {
  width: 60px;
  height: 60px;
  animation-delay: 1s;
}
.ring3 {
  width: 60px;
  height: 60px;
  animation-delay: 2s;
}

@keyframes rippleEffect {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
    border-width: 4px;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
    border-width: 0px;
  }
}

/* --- Interactive Enhancements --- */

/* 1. Thought Experiment Accordion */
.thought-experiment-box .experiment-scenario {
  cursor: pointer;
  transition: all 0.3s ease;
}
.thought-experiment-box .experiment-scenario:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
/* Hint Text */
.click-hint-text {
  text-align: center;
  font-size: 0.85rem;
  color: #818cf8;
  margin-bottom: 1.5rem;
  animation: pulse-text 2s infinite;
}

@keyframes pulse-text {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.experiment-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  color: #4338ca;
}
.experiment-question i {
  transition: transform 0.3s ease;
  /* Gentle bounce to suggest interactivity */
  animation: gentle-bounce 2s infinite;
}
.experiment-scenario.active .experiment-question i {
  transform: rotate(180deg);
  animation: none; /* Stop bouncing when open */
}

@keyframes gentle-bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}
.experiment-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease-out;
  color: #4b5563;
  margin-top: 0;
}
.experiment-scenario.active .experiment-answer {
  max-height: 200px; /* Pillow for content */
  opacity: 1;
  margin-top: 1rem;
}

/* 2. Global Click Ripple (Resonance Effect) */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.6); /* Indigo light */
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 9999;
  animation: clickRippleAnim 1s ease-out forwards;
}

@keyframes clickRippleAnim {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    border-width: 0;
  }
}

/* 3. Role Diagnosis */
.diagnosis-section {
  text-align: center;
  margin: 4rem 0 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #e0e7ff 0%, #ffffff 100%);
  border-radius: 16px;
  border: 1px dashed #c7d2fe;
}
.diagnosis-btn {
  background: #4338ca;
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(67, 56, 202, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.diagnosis-btn:hover {
  background: #3730a3;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(67, 56, 202, 0.3);
}
.diagnosis-result {
  margin-top: 2rem;
  min-height: 120px; /* Pre-allocate space */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.diagnosis-result.show {
  opacity: 1;
}
.role-icon {
  font-size: 3rem;
  color: #f59e0b; /* Gold */
  margin-bottom: 0.5rem;
  display: block;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.role-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1e1b4b;
  margin-bottom: 0.5rem;
}
.role-desc {
  color: #4b5563;
  font-size: 0.95rem;
}
.theme-indigo-box {
  border-color: #6366f1;
  background: #eef2ff;
  color: #312e81;
}

/* Sidebar Advice Indigo */
.advice-indigo {
  background: #e0e7ff;
  border: 2px solid #818cf8;
}
.advice-highlight-indigo {
  background: linear-gradient(
    120deg,
    rgba(129, 140, 248, 0) 0%,
    rgba(129, 140, 248, 0.4) 100%
  );
  box-shadow: inset 0 -0.5em 0 rgba(129, 140, 248, 0.5);
}

/* Tile Indigo (Added to main CSS for reusability if needed in future, though mainly logical in useful_words) */
.tile-indigo:hover {
  background: #eef2ff;
  border-color: #818cf8;
}
.tile-indigo .tile-icon {
  background: #818cf8;
  color: white;
}

/* Falling State - Restored */
.domino.falling {
  transform: rotateX(70deg); /* Fall flat */
  background: #a78bfa; /* Lighter when down */
}

/* --- Life Changes Page Styles --- */

/* Theme: Transformation Violet */
.page-title-area.theme-violet {
  text-align: left;
  margin-bottom: 3rem;
}
.page-title-area.theme-violet .page-title-text {
  color: #7c3aed; /* Violet-600 */
}
.page-title-area.theme-violet .title-underline {
  background: #a78bfa; /* Violet-400 */
}

.header-violet {
  border-left-color: #7c3aed;
  color: #4c1d95;
}

.num-violet {
  color: #8b5cf6;
}

.highlight-box-violet {
  background: #f5f3ff; /* Violet-50 */
  border-left: 5px solid #8b5cf6;
  padding: 2rem;
  margin: 2rem 0;
  border-radius: 0 12px 12px 0;
  color: #5b21b6;
  font-weight: bold;
}

/* Sidebar Advice */
.advice-violet {
  background: #fdf4ff; /* Light Pink/Violet mix */
  border: 2px solid #e879f9;
}
.advice-highlight-violet {
  background: linear-gradient(
    120deg,
    rgba(232, 121, 249, 0) 0%,
    rgba(232, 121, 249, 0.2) 100%
  );
  box-shadow: inset 0 -0.5em 0 rgba(232, 121, 249, 0.3);
}

/* Quote Style: Domino vertical list feel */
.quote-style-domino .quote-text-vertical p {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #1e293b;
  border-left: 3px solid #ddd6fe;
  padding-left: 1rem;
  transition: all 0.3s ease;
}
.quote-style-domino .quote-text-vertical p:hover {
  border-left-color: #7c3aed;
  transform: translateX(5px);
}
.quote-style-domino .highlight {
  font-weight: bold;
  color: #6d28d9;
  font-size: 1.2rem;
}

/* Contrast List */
.contrast-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}
.contrast-list li {
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  flex: 1;
  min-width: 200px;
}
.negative-item {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.positive-item {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
  box-shadow: 0 4px 6px rgba(251, 191, 36, 0.2);
}
.arrow-item {
  flex: 0 0 auto;
  font-size: 1.5rem;
  color: #94a3b8;
  background: none !important;
  border: none !important;
  min-width: auto;
}

/* --- Domino Animation --- */
.domino-stage {
  background: #f8fafc;
  padding: 3rem 1rem;
  border-radius: 16px;
  margin: 2rem 0;
  text-align: center;
  perspective: 1000px; /* Essential for 3D fall */
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e2e8f0;
}

.domino-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: flex-end;
  height: 150px;
  margin-bottom: 2rem;
  /* Angle view */
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(10deg);
}

.domino {
  width: 60px;
  height: 100px;
  background: #7c3aed;
  color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transform-origin: bottom center;
  transition: transform 0.5s ease-in;
  position: relative;
  user-select: none;
}
/* Side thickness illusion */
.domino::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 5px;
  height: 100%;
  background: #5b21b6;
  transform: skewY(45deg);
  transform-origin: left;
}

/* Falling State */
.domino.falling {
  transform: rotateX(70deg); /* Fall flat */
  background: #a78bfa; /* Lighter when down */
}

/* Special Last Domino */
.domino.last {
  background: #10b981;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bounce effect */
}
.domino.last::after {
  background: #047857;
}

.domino.last.falling {
  /* Instead of falling, it jumps up or opens */
  transform: scale(1.5) rotateX(0deg) translateY(-20px);
  background: radial-gradient(circle, #fbbf24, #f59e0b);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
  z-index: 10;
}
.domino.last .content-back {
  display: none;
}
.domino.last.falling .content-front {
  content: "";
}

.domino-message {
  color: #64748b;
  font-size: 0.9rem;
  min-height: 1.5rem;
  transition: color 0.3s;
}
.domino-message.complete {
  color: #7c3aed;
  font-weight: bold;
  font-size: 1.1rem;
}

/* --- Ripple Effect --- */
.ripple-visual {
  position: relative;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  background: #f0f9ff;
  border-radius: 50%;
  overflow: hidden;
}

.ripple-core {
  width: 60px;
  height: 60px;
  background: #f43f5e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5rem;
  z-index: 10;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
  animation: pulse-core 2s infinite;
}

@keyframes pulse-core {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(244, 63, 94, 0.3);
  background: rgba(244, 63, 94, 0.05);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
  font-size: 0.8rem;
  color: #be123c;
  font-weight: bold;
  opacity: 0;
  animation: ripple-spread 4s infinite linear;
}

.ripple.r1 {
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}
.ripple.r2 {
  width: 160px;
  height: 160px;
  animation-delay: 1s;
}
.ripple.r3 {
  width: 220px;
  height: 220px;
  animation-delay: 2s;
}
.ripple.r4 {
  width: 280px;
  height: 280px;
  animation-delay: 3s;
}

@keyframes ripple-spread {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Conclusion Box Theme Override */
.theme-violet-box {
  border-color: #a78bfa;
  background: #f5f3ff;
}

/* --- AI Bridge Section (Missing Styles) --- */
.ai-bridge-section {
  background: #f0f9ff;
  padding: 2rem;
  border-radius: 20px;
  margin-top: 3rem;
  margin-bottom: 3rem;
  border: 1px solid #bae6fd;
}

.ai-bridge-section h3 {
  margin-top: 0;
  color: #0369a1;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prompt-card {
  background: #fff;
  border: 2px dashed #7dd3fc;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  position: relative;
  transition: all 0.3s ease;
}

.prompt-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 4px 6px rgba(14, 165, 233, 0.1);
}

.prompt-label {
  position: absolute;
  top: -0.8rem;
  left: 1.5rem;
  background: #38bdf8;
  color: white;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

.prompt-content {
  font-size: 1rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-2px);
}

.copy-btn.copied {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.ai-launch-pad {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.launch-btn {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
}

.launch-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  filter: brightness(110%);
}

.launch-btn.chatgpt {
  background: #10a37f;
}
.launch-btn.gemini {
  background: #3b82f6;
} /* Google Blue */
.launch-btn.claude {
  background: #d97757;
} /* Anthropic-ish Orange */

/* --- Things You Have Page Styles --- */

.tyh-page-title {
  color: #0ea5e9;
}

.tyh-page-title-line {
  margin: 0;
  width: 100px;
  background: linear-gradient(to right, #0ea5e9, #6366f1);
}

.tyh-section-title-wrapper {
  text-align: left;
  margin-bottom: 2rem;
}

.tyh-heading-primary {
  color: #0369a1;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.tyh-heading-secondary {
  color: #0369a1;
  margin-top: 3rem;
  border-bottom: 1px solid #bae6fd;
  padding-bottom: 0.5rem;
}

.tyh-text-highlight-brown {
  color: #b45309;
}

.tyh-text-center-bold {
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: #0ea5e9;
  margin: 2rem 0;
}

.tyh-footer-subtext {
  font-size: 1rem;
  font-weight: normal;
  display: block;
  margin-top: 0.5rem;
  color: #334155;
  background: none; /* Reset potential backgrounds */
}

.tyh-footer-main-text {
  margin-top: 1rem;
  color: #f59e0b;
  font-size: 1.4rem;
}

.sc-advice-text {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.6;
}

.sc-highlight-orange {
  color: #f97316;
  font-weight: bold;
}

/* 1. Jewel Box Animation */
.gem-box {
  text-align: center;
  margin: 2rem 0;
  perspective: 1000px;
  background-color: #fffbeb;
  border: 2px solid #fcd34d;
  border-radius: 12px;
  padding: 2rem;
  position: relative;
}

.gem-icon {
  font-size: 4rem;
  color: #f59e0b; /* Amber/Gold */
  display: inline-block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  animation: float-gem 3s ease-in-out infinite;
  transition: transform 0.3s;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 10px;
}

.gem-icon:hover {
  transform: translateX(-50%) scale(1.1) rotate(10deg);
}

@keyframes float-gem {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
    filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.1));
  }
}

.gem-box h3 {
  margin-top: 1.5rem;
  color: #b45309;
  margin-bottom: 1rem;
}

/* 2. Marker Text Highlight */
.marker-highlight {
  background: linear-gradient(transparent 60%, rgba(255, 165, 0, 0) 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.5s ease;
  padding-bottom: 2px;
}

.marker-highlight.active-marker {
  background: linear-gradient(transparent 60%, rgba(255, 165, 0, 0.4) 60%);
  background-size: 100% 100%;
}

/* 3. Originality Stamp */
.originality-check {
  position: relative;
  border: 3px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 12px;
  padding: 2rem 2rem 2rem 5rem; /* Left padding for icon space */
  margin: 3rem 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.originality-check > i {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: #cbd5e1;
}

.stamp-container {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
  vertical-align: middle;
}

.stamp-mark {
  width: 80px;
  height: 80px;
  border: 3px solid #e11d48; /* Red stamp color */
  border-radius: 50%;
  color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  transform: scale(3);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.1);
  text-align: center;
  line-height: 1.2;
  padding: 2px;
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 10;
}

.stamp-mark.stamped {
  transform: scale(1) rotate(-15deg);
  opacity: 1;
}

/* 4. Mirror Embedded */
.mirror-section {
  margin: 4rem 0;
  text-align: center;
  perspective: 1000px;
}

.mirror-frame-embedded {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #e2e8f0 100%);
  padding: 5px;
  border-radius: 50%;
  width: 180px; /* Resized smaller */
  height: 240px; /* Resized smaller */
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.1),
    inset 0 0 15px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
  border: 6px solid #cbd5e1;
  position: relative;
  transition:
    transform 0.5s,
    box-shadow 0.5s;
  cursor: pointer;
}

.mirror-frame-embedded:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 30px rgba(14, 165, 233, 0.2);
  border-color: #bae6fd;
}

.mirror-glass-embedded {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #94a3b8, #cbd5e1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background 1.5s ease;
}

/* Clear the fog on hover */
.mirror-frame-embedded:hover .mirror-glass-embedded {
  background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
}

.mirror-instruction {
  position: absolute;
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s;
  z-index: 5;
  pointer-events: none;
}

.mirror-frame-embedded:hover .mirror-instruction {
  opacity: 0;
}

/* Shininess on glass */
.mirror-glass-embedded::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 1s;
}

.mirror-frame-embedded:hover .mirror-glass-embedded::after {
  opacity: 1;
  animation: shine-glass 4s infinite;
}

.mirror-content-embedded {
  text-align: center;
  z-index: 10;
  width: 100%;
}

.mirror-text {
  opacity: 0;
  transform: translateY(10px);
  transition: all 1s ease;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.mirror-message-1 {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.4;
}

.mirror-message-2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #f59e0b;
  margin-top: 0.5rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

/* Delays for sequence */
.mirror-frame-embedded:hover .mirror-message-1 {
  opacity: 1;
  transform: translateY(-40px);
  transition-delay: 0.5s;
}

.mirror-frame-embedded:hover .mirror-message-2 {
  opacity: 1;
  transform: translateY(5px);
  transition-delay: 2.5s;
}

.mirror-crown {
  font-size: 2rem;
  color: #fcd34d;
  display: block;
  margin-bottom: 0.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Wonders Quote Card reused from before */
.wonders-quote-card {
  background: linear-gradient(135deg, #fef3c7, #fcd34d, #f59e0b);
  color: #78350f;
  padding: 3rem 2rem;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
  position: relative;
  overflow: hidden;
  border: 2px solid #fff;
}

.wonders-quote-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(45deg);
  opacity: 0.3;
  animation: shine 8s infinite linear;
  pointer-events: none;
}

.wonders-quote-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(#fff, rgba(255, 255, 255, 0.8) 2px, transparent 4px),
    radial-gradient(#fff, rgba(255, 255, 255, 0.5) 1px, transparent 3px);
  background-size:
    200px 200px,
    120px 120px;
  opacity: 0.6;
  animation: sparkle 4s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes shine {
  0% {
    transform: rotate(45deg) translateY(-20%);
  }
  100% {
    transform: rotate(45deg) translateY(20%);
  }
}

@keyframes sparkle {
  0% {
    opacity: 0.4;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.wonders-quote-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.3rem;
  line-height: 2.2;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.wonders-author {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
  position: relative;
  z-index: 10;
}

.footer-message {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(120deg, #dbeafe, #eff6ff);
  border-radius: 12px;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

.footer-message::before {
  content: "\f005"; /* Escaped for Python string */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 5rem;
  color: rgba(59, 130, 246, 0.1);
  transform: rotate(15deg);
}

/* =========================================
   Light and Dark Page Styles
   ========================================= */
.light-dark-page {
  background-color: #f8fafc;
}

.light-dark-hero {
  background: linear-gradient(135deg, #e0e7ff 0%, #f3f4f6 100%);
  border: 3px double #a5b4fc;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
  text-align: center;
}

.light-dark-hero .win-hero-quote p {
  margin: 0.5rem 0;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #1e293b;
  font-weight: bold;
}

.light-dark-hero .win-hero-author {
  color: #4f46e5;
  font-weight: bold;
  margin-top: 1.5rem;
  text-align: right;
  font-size: 0.95rem;
}

.highlight-message.indigo-theme {
  background-color: #e0e7ff;
  border-left: 5px solid #6366f1;
  color: #312e81;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 8px 8px 0;
  font-weight: bold;
  line-height: 1.8;
}

.light-dark-page .win-section-title {
  color: #312e81;
  border-bottom: 2px solid #a5b4fc;
  padding-bottom: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.light-dark-page .win-section-title i {
  color: #6366f1;
}

/* 1. Dawn Background (Reverted) */
/* body.light-dark-page background removed as per user request */

/* Ensure content readability (Simplified) */
.light-dark-page .layout-container {
  position: relative;
  z-index: 1;
}

/* 2. Balancing Scales Animation */
.balance-sway {
  display: inline-block;
  animation: swayScales 4s ease-in-out infinite;
  transform-origin: top center;
}

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

/* 3. Interactive Heart Lamp */
.soul-lamp-container {
  text-align: center;
  margin: 3rem 0;
  position: relative;
}

.soul-lamp {
  font-size: 4rem;
  color: #475569; /* Unlit color */
  cursor: pointer;
  transition: all 0.5s ease;
  display: inline-block;
  position: relative;
  z-index: 10;
  animation: ambientPulse 3s infinite ease-in-out; /* Heartbeat pulse */
}

@keyframes ambientPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.soul-lamp::after {
  content: "Click Me";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: #94a3b8;
  opacity: 1;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.soul-lamp.lit::after {
  opacity: 0;
}

.soul-lamp:hover {
  transform: scale(1.1);
  color: #64748b;
}

.soul-lamp.lit {
  color: #fbbf24; /* Gold/Light color */
  text-shadow:
    0 0 20px rgba(251, 191, 36, 0.6),
    0 0 40px rgba(251, 191, 36, 0.4),
    0 0 60px rgba(251, 191, 36, 0.2);
  animation: lampPulse 2s infinite alternate;
}

@keyframes lampPulse {
  from {
    transform: scale(1.1);
    filter: brightness(1);
  }
  to {
    transform: scale(1.15);
    filter: brightness(1.2);
  }
}

/* Light beam effect when lit */
.lamp-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(251, 191, 36, 0.2) 0%,
    rgba(251, 191, 36, 0) 70%
  );
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

/* 4. Yin-Yang Spin */
.yin-yang-spin {
  display: inline-block;
  animation: rotateYinYang 10s linear infinite;
  color: #4f46e5;
}

@keyframes rotateYinYang {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 5. Light Path Line Animation */
.light-path {
  background: #4338ca; /* Darker Indigo for contrast */
  position: relative;
  overflow: hidden;
  height: 5px !important; /* Slightly thicker */
  border-radius: 4px;
}

.light-path::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100px;
  width: 60px; /* Shorter, more focused beam */
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ffffff 50%,
    transparent 100%
  );
  animation: lightPathMove 2.5s ease-in-out infinite; /* Slightly faster */
  box-shadow: 0 0 10px #ffffff; /* Stronger glow inside (clipped) */
  opacity: 1;
  z-index: 2;
}

@keyframes lightPathMove {
  0% {
    left: -100px;
  }
  20% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* 6. Scroll Fade-in Effect */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 7. Floating Infinite Power Text */
.floating-power-text {
  position: absolute;
  color: #fbbf24; /* Gold */
  font-size: 1.5rem;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
  z-index: 20;
  animation: floatPowerText 2s ease-out forwards;
}

@keyframes floatPowerText {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100px) scale(1.5);
  }
}

/* 9. Shooting Star Footer Animation */
.shooting-star-container {
  position: fixed;
  bottom: 10%; /* Lowered further to 10% */
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* 10. Footer Styling */
.site-footer {
  text-align: center;
  width: 100%;
  padding: 1rem 0;
}

.footer-inner {
  text-align: center;
  margin: 0 auto;
}

/* 11. Visual Metaphor Scene (Atmospheric) */
.visual-metaphor-scene {
  position: relative;
  padding: 4rem 0;
  margin: 2rem 0;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(
    to bottom,
    #1e293b,
    #334155
  ); /* Deep dark initially */
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition:
    background 3s ease,
    box-shadow 3s ease;
  overflow: hidden;
}

/* Active State: Scene Brightens */
.visual-metaphor-scene.active {
  background: linear-gradient(
    to bottom,
    #e0e7ff,
    #ffffff
  ); /* Bright, heavenly light */
  box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
}

.silhouette-wrapper {
  position: relative;
  height: 200px; /* Increased height to make room */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 4rem; /* Push icon up away from text */
}

/* Shadow Figure (Sitting) */
.silhouette-shadow {
  font-size: 6rem;
  color: #0f172a; /* Pitch black shadow */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
  opacity: 1;
  transition: all 2s ease 0.5s; /* Slow fade out */
  transform: scale(1);
  margin-bottom: 1rem; /* Added margin */
}

.visual-metaphor-scene.active .silhouette-shadow {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(20px); /* Dissolves into shadow */
}

/* Light Figure (Standing) */
.silhouette-light {
  position: absolute;
  bottom: 4rem; /* Match padding-bottom of wrapper */
  font-size: 7rem;
  color: #6366f1;
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.8)); /* Radiant glow */
  transition: all 4s ease 1s; /* Very slow rise */
}

.visual-metaphor-scene.active .silhouette-light {
  opacity: 1;
  transform: scale(1) translateY(0);
  color: #4f46e5;
  filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.6));
}

/* Standing Aura Image (Removed) */
/* .standing-aura-img styles removed */

/* Scene Growth Text */
.scene-growth-text {
  position: absolute;
  bottom: 1rem; /* Lower position */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  font-size: 1.2rem; /* Slightly smaller to fit nicely */
  font-weight: 800;
  text-align: center;
  color: #f59e0b; /* Gold */
  opacity: 0;
  transition: all 3s ease 1.5s; /* Fade in after standing starts */
  background: linear-gradient(to right, #f59e0b, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 158, 11, 0.2));
  z-index: 10;
}

.visual-metaphor-scene.active .scene-growth-text {
  opacity: 1;
  bottom: 1.5rem; /* Float up slightly */
}

/* 12. Growth Message Emphasis */
.growth-message {
  font-size: 1.8rem;
  font-weight: 800;
  text-align: center;
  margin: 4rem auto;
  line-height: 1.6;
  background: linear-gradient(to right, #f59e0b, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding-bottom: 1.5rem;
}

.growth-message::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: linear-gradient(to right, #fbbf24, #f59e0b);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);
}

.shooting-star {
  position: absolute;
  top: 50%;
  left: -300px; /* Start further left */
  width: 6px;
  height: 6px;
  background: #ffd700; /* Gold */
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.1),
    0 0 0 8px rgba(255, 215, 0, 0.1),
    0 0 20px rgba(255, 215, 0, 1);
  opacity: 0;
}

.shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 400px; /* Longer tail */
  height: 2px;
  background: linear-gradient(90deg, #ffd700, transparent);
}

@keyframes shootStar {
  0% {
    transform: rotate(-5deg) translateX(0);
    opacity: 1;
  }
  100% {
    /* Longer distance */
    transform: rotate(-5deg) translateX(calc(100vw + 800px));
    opacity: 0;
  }
}

.shooting-star.animate {
  /* Slower speed (increased duration) */
  animation: shootStar 6s linear forwards;
}

/* =========================================
   Light and Dark Page Specific Styles
   ========================================= */

.light-dark-header {
  text-align: left;
  margin-bottom: 2rem;
}

.light-dark-title {
  color: #6366f1;
  font-size: 1.5rem;
  font-weight: bold;
}

.light-path-line {
  margin: 0.5rem 0;
  width: 100px;
  height: 3px;
  background: #a5b4fc;
}

.light-dark-subtitle {
  margin-top: 0.5rem;
  color: #64748b;
  font-weight: bold;
}

.highlight-strong {
  color: #4f46e5;
  border-bottom: 2px solid #fbbf24;
}

/* Sidebar Advice Styles */
.sidebar-advice-text {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.6;
}

.sidebar-advice-highlight {
  color: #6366f1;
  font-weight: bold;
}

/* Utility/Specific Overrides */
.spin-slow {
  --fa-animation-duration: 3s;
}

/* Ensure Page Navigation Justification */
.page-navigation.spaced {
  justify-content: space-between;
}

/* =========================================
   Perfect Is Not Needed Page Styles
   ========================================= */

.perfect-header {
  text-align: left;
  margin-bottom: 2rem;
}

.perfect-header-title {
  color: #10b981; /* Green */
  font-size: 2.5rem;
  font-weight: bold;
}

.perfect-path-line {
  margin: 0.5rem 0;
  width: 100px;
  height: 3px;
  background: #86efac;
}

.perfect-subtitle {
  margin-top: 0.5rem;
  color: #64748b;
  font-weight: bold;
}

.perfect-hero {
  background: linear-gradient(
    135deg,
    #ecfdf5 0%,
    #ffffff 100%
  ); /* Green-ish tint */
  border: 1px solid #86efac;
}

.perfect-box {
  background: #ecfdf5;
  border: 2px solid #10b981;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
}

.perfect-box h3 {
  color: #059669;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.perfect-box i {
  font-size: 1.5rem;
}

.highlight-green {
  color: #059669;
  border-bottom: 2px solid #86efac;
}

.perfect-quote-highlight {
  font-weight: bold;
  color: #10b981;
}

/* Engagement Animations */
.marker-highlight {
  background: linear-gradient(transparent 60%, rgba(251, 191, 36, 0.4) 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.5s ease;
}

.marker-highlight.visible {
  background-size: 100% 100%;
}

@keyframes float-gentle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.floating-icon {
  animation: float-gentle 3s ease-in-out infinite;
  display: inline-block;
  color: #fbbf24; /* Amber-400 */
}

/* Breathing Animation */
@keyframes breathe-calm {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.95;
  }
}

.sidebar-advice {
  animation: breathe-calm 6s ease-in-out infinite;
}

/* Override Perfect Hero with Organic Shape */
.perfect-hero {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  border: none;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.2);
  padding: 3rem;
}

/* =========================================
   Image Switcher Component
   ========================================= */
.image-switcher {
  width: 100%;
  max-width: 400px;
  height: 200px;
  margin: 2rem auto;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.switcher-state {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
}

.state-negative {
  background: linear-gradient(
    135deg,
    #94a3b8 0%,
    #cbd5e1 100%
  ); /* Gray/Cloudy */
  color: #475569;
  opacity: 1;
  transform: translateY(0);
}

.state-positive {
  background: linear-gradient(
    135deg,
    #fbbf24 0%,
    #f59e0b 100%
  ); /* Amber/Sunny */
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
}

.switcher-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  transition: transform 0.5s ease;
}

/* Active State (Positive) */
.image-switcher.active .state-negative {
  opacity: 0;
  transform: translateY(-100%);
}

.image-switcher.active .state-positive {
  opacity: 1;
  transform: translateY(0);
}

.image-switcher.active .state-positive .switcher-icon {
  animation: spin-shine 3s linear infinite;
}

@keyframes spin-shine {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.switcher-hint {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* =========================================
   Keep Heart Open Page Styles (Sky Theme)
   ========================================= */

.open-header-title {
  color: #0ea5e9; /* Sky Blue */
  font-size: 2.5rem;
  font-weight: bold;
}

.open-path-line {
  margin: 0.5rem 0;
  width: 100px;
  height: 3px;
  background: #7dd3fc;
}

.open-subtitle {
  margin-top: 0.5rem;
  color: #64748b;
  font-weight: bold;
}

.open-hero {
  background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
  border-radius: 30px; /* Pillow shape */
  border: 1px solid #bae6fd;
  padding: 3rem;
  box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.15);
}

.open-box {
  background: #f0f9ff;
  border: 2px solid #0ea5e9;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
}

.open-box h3 {
  color: #0284c7;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.highlight-sky {
  color: inherit;
  background: linear-gradient(transparent 60%, #bae6fd 60%);
  font-weight: bold;
  border-bottom: none;
}

/* Connective Window Interactive Component */
.window-opener {
  width: 100%;
  max-width: 400px;
  height: 250px;
  margin: 3rem auto;
  position: relative;
  cursor: pointer;
  perspective: 1000px;
}

.window-frame {
  width: 100%;
  height: 100%;
  background: #e2e8f0;
  border: 8px solid #94a3b8;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23cbd5e1"/><path d="M50 0 V100 M0 50 H100" stroke="%2394a3b8" stroke-width="4"/></svg>');
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-closed-msg {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
  color: #475569;
}

.window-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #7dd3fc 0%, #bae6fd 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
}

.scene-sun {
  font-size: 5rem;
  color: #fbbf24;
  animation: sun-spin 10s linear infinite;
}

.scene-text {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@keyframes sun-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Active State */
.window-opener.open .window-frame {
  transform: rotateY(-110deg);
}

/* =========================================
   Visual Enhancements (Keep Heart Open)
   ========================================= */

/* Floating Clouds Animation */
.open-hero {
  position: relative;
  overflow: hidden; /* Keep clouds inside */
}

.cloud {
  position: absolute;
  top: 20%;
  left: -20%;
  opacity: 0.8;
  color: #fff;
  font-size: 3rem;
  animation: move-clouds 20s linear infinite;
  z-index: 0; /* Behind text */
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.cloud:nth-child(1) {
  top: 10%;
  animation-duration: 25s;
  font-size: 4rem;
}
.cloud:nth-child(2) {
  top: 40%;
  animation-duration: 35s;
  animation-delay: 5s;
  opacity: 0.6;
}
.cloud:nth-child(3) {
  top: 70%;
  animation-duration: 18s;
  animation-delay: 10s;
  font-size: 2.5rem;
  opacity: 0.7;
}

.win-hero-quote {
  position: relative;
  z-index: 1; /* Above clouds */
}

@keyframes move-clouds {
  0% {
    left: -20%;
  }
  100% {
    left: 120%;
  }
}

.open-box {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.open-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px -5px rgba(14, 165, 233, 0.2);
}

/* Rainbow Animation */
.rainbow-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 4rem; /* Space for rainbow */
}

.rainbow-arc {
  position: absolute;
  bottom: -300px;
  right: -20%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  /* Proper Pastel Rainbow Colors */
  background: radial-gradient(
    circle at center,
    transparent 60%,
    #eecbff 61%,
    /* Violet */ #bae1ff 63%,
    /* Blue */ #baffc9 65%,
    /* Green */ #ffffba 67%,
    /* Yellow */ #ffdfba 69%,
    /* Orange */ #ffb3ba 71%,
    /* Red */ transparent 73%
  );
  opacity: 0;
  transform: scale(0.8);
  transition: all 2.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
  filter: blur(2px); /* Soften the edges */
}

/* Rainbow visible state */
.rainbow-section.visible .rainbow-arc {
  opacity: 0.4;
  transform: scale(1.2);
  transition-delay: 2s; /* Wait 2s before starting */
}

/* Pulse Text Animation */
.pulse-text {
  animation: pulse-gentle 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes pulse-gentle {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Flying Bird Animation */
.flying-bird {
  position: absolute;
  top: 15%;
  left: -10%;
  color: #fff;
  font-size: 1.5rem;
  opacity: 0.9;
  z-index: 2;
  animation: bird-fly 15s linear infinite;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}

@keyframes bird-fly {
  0% {
    left: -10%;
    top: 15%;
    transform: rotate(0deg);
  }
  25% {
    top: 10%;
    transform: rotate(5deg);
  }
  50% {
    top: 20%;
    transform: rotate(0deg);
  }
  75% {
    top: 12%;
    transform: rotate(-5deg);
  }
  100% {
    left: 110%;
    top: 15%;
    transform: rotate(0deg);
  }
}

/* =========================================
   Peaceful Heart Page Styles (Purple Theme)
   ========================================= */

.peace-header-title {
  color: #8b5cf6; /* Violet-500 */
  font-size: 2.5rem;
  font-weight: bold;
}

.peace-path-line {
  margin: 0.5rem 0;
  width: 100px;
  height: 3px;
  background: #c4b5fd; /* Violet-300 */
}

.peace-subtitle {
  margin-top: 0.5rem;
  color: #64748b;
  font-weight: bold;
}

.peace-hero {
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%); /* Violet-50 */
  border-radius: 20px;
  border: 1px solid #ddd6fe;
  padding: 3rem;
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.1);
  position: relative;
  overflow: hidden;
}

.peace-box {
  background: #f5f3ff;
  border: 2px solid #8b5cf6;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.peace-box h3 {
  color: #7c3aed; /* Violet-600 */
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.highlight-purple {
  color: inherit;
  background: linear-gradient(transparent 60%, #ddd6fe 60%);
  font-weight: bold;
}

/* Feather Animation (Optional Serene Element) */
.feather {
  position: absolute;
  color: #c4b5fd;
  opacity: 0.6;
  font-size: 2rem;
  animation: float-feather 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float-feather {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(10px, -15px) rotate(10deg);
  }
  66% {
    transform: translate(-5px, -25px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Pledge Card specific style */
.pledge-card {
  text-align: center;
  font-style: italic;
  background: #fff;
  border: 3px double #8b5cf6; /* Double border for 'holy' feel */
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1);
}
.pledge-card p {
  line-height: 2;
}

/* Interactive Pledge Active State */
.pledge-card {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pledge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -5px rgba(139, 92, 246, 0.2);
}

.pledge-card.sealed {
  background: #fffcf0; /* Light gold background */
  border-color: #fbbf24; /* Golden border */
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.4);
  transform: scale(1.02);
}

.pledge-card.sealed p {
  color: #92400e;
}

.pledge-card::after {
  content: "タップして誓いを立てる";
  display: block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #94a3b8;
  font-style: normal;
  transition: opacity 0.3s;
}

.pledge-card.sealed::after {
  content: "✨ 誓いはあなたの心に刻まれました ✨";
  color: #d97706;
  font-weight: bold;
  animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Darkness Scattering Gimmick */
.darkness-container {
  position: relative;
  background: #2d2640; /* Dark purple background */
  border-radius: 15px;
  padding: 3rem;
  margin: 2rem 0;
  text-align: center;
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 1s ease;
}

.darkness-container.cleared {
  background: linear-gradient(135deg, #f5f3ff 0%, #fff 100%);
}

.revelation-text {
  font-size: 2rem;
  font-weight: bold;
  color: transparent;
  transition: all 1s ease;
  transform: scale(0.8);
  opacity: 0;
  z-index: 2;
}

.darkness-container.cleared .revelation-text {
  color: #8b5cf6;
  transform: scale(1.1);
  opacity: 1;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.darkness-hint {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  color: #a78bfa;
  font-size: 0.8rem;
  transition: opacity 0.5s;
}

.darkness-container.cleared .darkness-hint {
  opacity: 0;
}

/* Sun ray effect for revelation */
.sun-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(217, 119, 6, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 1s;
}

.darkness-container.cleared .sun-rays {
  opacity: 1;
}

/* Decision Box - Highlighting the resolution */
.decision-box {
  background: #faf5ff; /* Violet-50 */
  border: 2px solid #e9d5ff; /* Violet-200 */
  border-radius: 15px;
  padding: 2rem;
  margin: 2.5rem 0;
  text-align: center;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(139, 92, 246, 0.05);
}

.decision-box::before {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -20px;
  left: -20px;
  background: #8b5cf6; /* Violet-500 */
  color: #fff;
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
  border: 3px solid #fff;
  z-index: 3;
}
/* Useful Words Hub Enhancements */
.method-group {
  position: relative;
  overflow: hidden;
  padding: 0.5rem 1.5rem;
}

/* Dynamic Hover Effects per Category */
.category-resilience .category-tile:hover {
  border-color: #6366f1;
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.1);
}

.category-action .category-tile:hover {
  border-color: #ec4899;
  box-shadow: 0 10px 20px rgba(236, 72, 153, 0.1);
}

.category-harmony .category-tile:hover {
  border-color: #14b8a6;
  box-shadow: 0 10px 20px rgba(20, 184, 166, 0.1);
}

.category-peace .category-tile:hover {
  border-color: #8b5cf6;
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.1);
}

/* Roulette Highlight Animation */
@keyframes roulette-glow {
  0% {
    box-shadow: 0 0 0px rgba(245, 158, 11, 0);
  }
  50% {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
    border-color: #f59e0b;
  }
  100% {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
  }
}

.recommended-highlight {
  animation: roulette-glow 1s ease-out forwards;
  border-width: 2px !important;
}

/* Sparkle Effect for Roulette Finish */
.sparkle-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f59e0b;
  font-size: 2rem;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
}

.sparkle-animate {
  animation: sparkle-burst 1s ease-out forwards;
}

@keyframes sparkle-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
    filter: blur(5px);
  }
}

/* --- Homerare (Compliment) Section --- */
.homerare-container {
  background: #fff;
  padding: 2rem;
  border-radius: 24px;
  border: 2px solid #fdf2f8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  text-align: center;
}

.homerare-input-group {
  display: flex;
  gap: 0.5rem;
  max-width: 400px;
  margin: 1.5rem auto;
}

.homerare-input-group input {
  flex: 1;
  padding: 0.8rem 1.2rem;
  border: 2px solid #f1f5f9;
  border-radius: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s;
}

.homerare-input-group input:focus {
  border-color: var(--accent-color);
}

.homerare-display {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.homerare-message {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.6;
  padding: 1.5rem;
  background: #fdf2f8;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.homerare-message.active {
  opacity: 1;
  transform: translateY(0);
}

.homerare-message strong {
  color: var(--accent-color);
  font-size: 1.2rem;
}

/* --- Floating Compliment Shower --- */
.homerare-float {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.8rem 1.2rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.15);
  color: #475569;
  font-weight: bold;
  white-space: nowrap;
  border: 1px solid #fce7f3;
  animation: homerare-drift var(--duration) ease-out var(--delay) forwards;
  opacity: 0;
}

.homerare-float strong {
  color: var(--accent-color);
}

@keyframes homerare-drift {
  0% {
    transform: translate(-50%, 20px) scale(0.5);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--drift-x)), -150px) scale(1.1);
    opacity: 0;
  }
}

/* Decoration Icons */
.homerare-float i {
  margin: 0 0.4rem;
  display: inline-block;
}

.icon-heart {
  color: #f472b6;
  animation: icon-beat 1.5s infinite ease-in-out;
}
.icon-bird {
  color: #60a5fa;
  animation: icon-flap 2s infinite ease-in-out;
}
.icon-clover {
  color: #34d399;
  animation: icon-rotate 4s infinite linear;
}
.icon-star {
  color: #fbbf24;
  animation: icon-pulse 1s infinite alternate;
}
.icon-music {
  color: #8b5cf6;
  animation: icon-bounce 1s infinite alternate;
}

@keyframes icon-beat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes icon-flap {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-3px) rotate(-10deg);
  }
}

@keyframes icon-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes icon-pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.3);
    opacity: 0.8;
  }
}

@keyframes icon-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}

/* Tighten Hero Spacing */

.hero {
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.hero-content h1 {
  margin-bottom: 0.5rem;
}
#message {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Ultra-Slim Recommendation UI */
.recommend-ultra-slim {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.recommend-text {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 600;
}

.btn-start-slim {
  background: linear-gradient(135deg, #74b9ff, #a29bfe);
  color: white;
  border: none;
  padding: 0.3rem 1.2rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-start-slim:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Recommendation Highlighting */
.category-tile {
  position: relative; /* Ensure badge stability */
}

.recommended-highlight {
  outline: 4px solid var(--accent-color) !important;
  outline-offset: -2px;
  box-shadow: 0 0 30px rgba(116, 185, 255, 0.6) !important;
  transform: scale(1.05);
  z-index: 5;
}

.recommend-badge {
  position: absolute;
  top: -15px;
  right: -10px;
  background: var(--accent-color);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  z-index: 10;
  white-space: nowrap;
  animation: badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badge-pop {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

/* --- Things You Have Page Styles --- */

.tyh-page-title {
  color: #0ea5e9;
}

.tyh-page-title-line {
  margin: 0;
  width: 100px;
  background: linear-gradient(to right, #0ea5e9, #6366f1);
}

.tyh-section-title-wrapper {
  text-align: left;
  margin-bottom: 2rem;
}

.tyh-heading-primary {
  color: #0369a1;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.tyh-heading-secondary {
  color: #0369a1;
  margin-top: 3rem;
  border-bottom: 1px solid #bae6fd;
  padding-bottom: 0.5rem;
}

.tyh-text-highlight-brown {
  color: #b45309;
}

.tyh-text-center-bold {
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: #0ea5e9;
  margin: 2rem 0;
}

.tyh-footer-subtext {
  font-size: 1rem;
  font-weight: normal;
  display: block;
  margin-top: 0.5rem;
  color: #334155;
  background: none; /* Reset potential backgrounds */
}

.tyh-footer-main-text {
  margin-top: 1rem;
  color: #f59e0b;
  font-size: 1.4rem;
}

.sc-advice-text {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.6;
}

.sc-highlight-orange {
  color: #f97316;
  font-weight: bold;
}

/* 1. Jewel Box Animation */
.gem-box {
  text-align: center;
  margin: 2rem 0;
  perspective: 1000px;
  background-color: #fffbeb;
  border: 2px solid #fcd34d;
  border-radius: 12px;
  padding: 2rem;
  position: relative;
}

.gem-icon {
  font-size: 4rem;
  color: #f59e0b; /* Amber/Gold */
  display: inline-block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  animation: float-gem 3s ease-in-out infinite;
  transition: transform 0.3s;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 10px;
}

.gem-icon:hover {
  transform: translateX(-50%) scale(1.1) rotate(10deg);
}

@keyframes float-gem {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
    filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.1));
  }
}

.gem-box h3 {
  margin-top: 1.5rem;
  color: #b45309;
  margin-bottom: 1rem;
}

/* 2. Marker Text Highlight */
.marker-highlight {
  background: linear-gradient(transparent 60%, rgba(255, 165, 0, 0) 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.5s ease;
  padding-bottom: 2px;
}

.marker-highlight.active-marker {
  background: linear-gradient(transparent 60%, rgba(255, 165, 0, 0.4) 60%);
  background-size: 100% 100%;
}

/* 3. Originality Stamp */
.stamp-container {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
  vertical-align: middle;
}

.stamp-mark {
  width: 80px;
  height: 80px;
  border: 3px solid #e11d48; /* Red stamp color */
  border-radius: 50%;
  color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  transform: scale(3);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.1);
  text-align: center;
  line-height: 1.2;
  padding: 2px;
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 10;
}

.stamp-mark.stamped {
  transform: scale(1) rotate(-15deg);
  opacity: 1;
}

/* 4. Mirror Embedded */
.mirror-section {
  margin: 4rem 0;
  text-align: center;
  perspective: 1000px;
}

.mirror-frame-embedded {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #e2e8f0 100%);
  padding: 5px;
  border-radius: 50%;
  width: 180px; /* Resized smaller */
  height: 240px; /* Resized smaller */
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.1),
    inset 0 0 15px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
  border: 6px solid #cbd5e1;
  position: relative;
  transition:
    transform 0.5s,
    box-shadow 0.5s;
  cursor: pointer;
}

.mirror-frame-embedded:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 30px rgba(14, 165, 233, 0.2);
  border-color: #bae6fd;
}

.mirror-glass-embedded {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #94a3b8, #cbd5e1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background 1.5s ease;
}

/* Clear the fog on hover */
.mirror-frame-embedded:hover .mirror-glass-embedded {
  background: linear-gradient(135deg, #fff 0%, #f0f9ff 100%);
}

.mirror-instruction {
  position: absolute;
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: opacity 0.5s;
  z-index: 5;
  pointer-events: none;
}

.mirror-frame-embedded:hover .mirror-instruction {
  opacity: 0;
}

/* Shininess on glass */
.mirror-glass-embedded::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 1s;
}

.mirror-frame-embedded:hover .mirror-glass-embedded::after {
  opacity: 1;
  animation: shine-glass 4s infinite;
}

.mirror-content-embedded {
  text-align: center;
  z-index: 10;
  width: 100%;
}

.mirror-text {
  opacity: 0;
  transform: translateY(10px);
  transition: all 1s ease;
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.mirror-message-1 {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.4;
}

.mirror-message-2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #f59e0b;
  margin-top: 0.5rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

/* Delays for sequence */
.mirror-frame-embedded:hover .mirror-message-1 {
  opacity: 1;
  transform: translateY(-40px);
  transition-delay: 0.5s;
}

.mirror-frame-embedded:hover .mirror-message-2 {
  opacity: 1;
  transform: translateY(5px);
  transition-delay: 2.5s;
}

.mirror-crown {
  font-size: 2rem;
  color: #fcd34d;
  display: block;
  margin-bottom: 0.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Wonders Quote Card reused from before */
.wonders-quote-card {
  background: linear-gradient(135deg, #fef3c7, #fcd34d, #f59e0b);
  color: #78350f;
  padding: 3rem 2rem;
  border-radius: 16px;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
  position: relative;
  overflow: hidden;
  border: 2px solid #fff;
}

@keyframes shine-glass {
  0% {
    transform: rotate(45deg) translateX(-100%);
  }
  100% {
    transform: rotate(45deg) translateX(100%);
  }
}

.wonders-quote-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.3rem;
  line-height: 2.2;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.wonders-author {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
  position: relative;
  z-index: 10;
}

.footer-message {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(120deg, #dbeafe, #eff6ff);
  border-radius: 12px;
  color: #1e3a8a;
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

/* Word Vault Styles */

.vault-header-wrapper {
  text-align: center;
  margin-bottom: 4rem;
  padding: 2rem 0;
  position: relative;
}

.vault-header-inner {
  display: inline-block;
  position: relative;
}

.vault-icon {
  font-size: 3rem;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 6px rgba(217, 119, 6, 0.3));
}

.vault-main-title {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-size: 3.5rem !important;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 1), 4px 4px 8px rgba(0, 0, 0, 0.08);
}

.vault-highlight {
  background: linear-gradient(135deg, #d97706, #fbbf24, #d97706);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 0.1em;
  animation: shine 3s linear infinite;
}

.vault-subtitle {
  font-family: "Inter", "Arial", sans-serif;
  font-size: 1rem;
  color: #94a3b8;
  letter-spacing: 0.6em;
  margin-top: 1rem;
  text-transform: uppercase;
  font-weight: 700;
}

.vault-header-inner::before,
.vault-header-inner::after {
  content: "✦";
  color: #fbbf24;
  position: absolute;
  top: 55%;
  font-size: 1.5rem;
  transform: translateY(-50%);
  opacity: 0.8;
}

.vault-header-inner::before {
  left: -3rem;
}

.vault-header-inner::after {
  right: -3rem;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

@media (max-width: 768px) {
  .vault-main-title {
    font-size: 2.2rem;
  }
  .vault-header-inner::before,
  .vault-header-inner::after {
    display: none;
  }
}
.layout-container.single-column {
  display: block;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 5%;
}

.message-card-container {
  margin-bottom: 3rem;
}

.message-card {
  background: #f0f9ff;
  border: 2px dashed #bae6fd;
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.message-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: #7dd3fc;
}

.message-card-header i {
  font-size: 1.5rem;
}

.message-card-header h2 {
  font-size: 1.5rem;
  color: #60a5fa;
  margin: 0;
}

.message-card p {
  color: #64748b;
  margin-bottom: 2rem;
}

.gradient-btn-large {
  background: linear-gradient(135deg, #7dd3fc, #6ee7b7);
  color: white;
  border: none;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 20px rgba(110, 231, 183, 0.2);
}

.gradient-btn-large:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 30px rgba(110, 231, 183, 0.3);
}

.word-vault-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 1rem;
}

@media (max-width: 1200px) {
  .word-vault-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .word-vault-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .word-vault-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

.word-tile {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.word-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-1);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.word-tile:hover {
  transform: translateY(-10px) scale(1.02);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 15px 30px rgba(116, 185, 255, 0.15);
  border-color: var(--accent-color);
}

.word-tile:hover::before {
  opacity: 1;
}

.word-tile-inner {
  text-align: center;
}

.word-tile i {
  font-size: 2rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
  opacity: 0.2;
  transition: all 0.3s ease;
}

.word-tile:hover i {
  opacity: 1;
  transform: scale(1.1);
}

.word-preview {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.word-author {
  display: block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
}

.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: white;
  border: 2px solid #e2e8f0;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  color: #64748b;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-home-btn:hover {
  background: #f8fafc;
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: scale(1.05);
}

/* Word Overlay */
.word-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  padding: 2rem;
  text-align: center;
}

.word-overlay.active {
  opacity: 1;
}

.overlay-content {
  max-width: 800px;
  position: relative;
  padding: 4rem 2rem;
}

.overlay-text {
  font-size: 2.2rem;
  color: #1e293b;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-family: "Inter", sans-serif;
  animation: fadeInUp 0.6s ease forwards;
}

.overlay-author {
  font-size: 1.25rem;
  color: var(--accent-color);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  animation: fadeInUp 0.8s ease forwards;
}

.overlay-quote-icon {
  font-size: 4rem;
  color: var(--accent-glow);
  position: absolute;
  opacity: 0.3;
}

.overlay-quote-icon.top {
  top: 0;
  left: 0;
}

.overlay-quote-icon.bottom {
  bottom: 0;
  right: 0;
}

.close-hint {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: #94a3b8;
  font-weight: 700;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .overlay-text {
    font-size: 1.5rem;
  }
  .overlay-quote-icon {
    font-size: 2.5rem;
  }
}

/* Golden Laws Styles */
.golden-laws-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}

.law-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateY(30px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.law-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.law-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(234, 179, 8, 0.15);
  border-color: #fde047;
}

.law-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #fef9c3, #fde047);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #a16207;
  flex-shrink: 0;
  box-shadow: 0 5px 15px rgba(234, 179, 8, 0.2);
  z-index: 5;
}

.law-content {
  flex-grow: 1;
  z-index: 5;
}

.law-content h3 {
  font-size: 1.25rem;
  color: #1e293b;
  margin-bottom: 0.8rem;
  font-weight: 800;
}

.law-content p {
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* Interaction Button (Read Check) */
.read-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
  color: #cbd5e1;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.read-btn:hover {
  border-color: #fde047;
  color: #eab308;
  background: #fefce8;
}

.read-btn.active {
  background: #eab308;
  color: white;
  border-color: #eab308;
  animation: bounce 0.5s ease;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Custom Site Header Logo (Purple Diamond - CONFIRMED) */
.site-logo-custom {
  color: #7c3aed !important; /* Violet */
  text-decoration: underline;
  text-decoration-color: #7c3aed;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none !important;
}

.site-logo-custom i {
  color: #7c3aed !important;
  display: inline-block !important;
}

/* Genki Recommendation Style Frame (Yellow Border) */
.genki-frame {
  background: #ffffff !important;
  border: 2px solid #facc15 !important;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(250, 204, 21, 0.1);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.genki-frame-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 1rem;
  border-bottom: 2px dashed #fcd34d;
  padding-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.genki-frame h1 {
  font-size: 1.8rem;
  color: #d97706;
}

/* Sidebar Specifics using Genki Frame */
.advice-box {
  background: #ffffff !important;
  border: 2px solid #facc15 !important;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.advice-box h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #d97706 !important;
  margin-bottom: 1rem;
  border-bottom: 2px dashed #fcd34d;
  padding-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.advice-box h3 i {
  color: #f59e0b;
}

.advice-separator {
  display: none;
}

.highlight-orange {
  color: #f97316;
  font-weight: bold;
}

/* Sidebar Nav - Checklist Style */
.nav-box {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  border: 1px solid #f1f5f9;
}

.nav-title {
  font-size: 1.1rem;
  color: #64748b; /* Gray as per image */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-separator {
  border-bottom: 2px solid #e2e8f0; /* Solid gray line */
  margin-bottom: 1.2rem;
  width: 100%;
}

.internal-nav.checklist-style li {
  margin-bottom: 1.2rem;
  list-style: none; /* Force remove default list style */
}

.internal-nav.checklist-style a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: #475569;
  font-weight: 500;
  transition: all 0.2s ease;
}

.internal-nav.checklist-style a i {
  color: #60a5fa; /* Blue Checkmark */
  font-size: 1rem;
}

.internal-nav.checklist-style a:hover {
  color: #3b82f6;
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .law-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }
}

/* --- Golden Laws Chapter Styles --- */
.chapter-hero {
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.chapter-hero::before {
  content: "\f0a3";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: 15rem;
  color: rgba(255, 255, 255, 0.3);
  top: -50px;
  left: -50px;
  transform: rotate(-15deg);
}

.chapter-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 800;
  position: relative;
}

.chapter-hero p {
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0.9;
  position: relative;
}

.content-section,
.content-block {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  margin-bottom: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid #f1f5f9;
}

.content-section h2 {
  font-size: 1.5rem;
  color: #d97706;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px dashed #fcd34d;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.content-section h2 i {
  background: #fffbeb;
  padding: 0.5rem;
  border-radius: 10px;
  color: #d97706;
}

.content-section p,
.content-block p {
  line-height: 1.9;
  color: #334155;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.highlight-box {
  background: #fffbeb;
  border-left: 5px solid #f59e0b;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 10px 10px 0;
}

.highlight-box p {
  margin-bottom: 0;
  font-weight: 700;
  color: #92400e;
  font-size: 1.1rem;
}

.summary-box {
  background: linear-gradient(to right, #eff6ff, #f0f9ff);
  border: 2px solid #bae6fd;
  border-radius: 15px;
  padding: 2rem;
  margin-top: 3rem;
}

.summary-box h3 {
  color: #0369a1;
  margin-bottom: 1rem;
  font-size: 1.3rem;
  text-align: center;
}

.summary-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
  line-height: 1.6;
  color: #1e293b;
}

.summary-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #0ea5e9;
  position: absolute;
  left: 0;
  top: 2px;
}

/* Golden Point Box */
.golden-point-box {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 6px solid #fbbf24;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.golden-point-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at top right,
    rgba(253, 224, 71, 0.1),
    transparent
  );
  pointer-events: none;
}

.golden-point-box .box-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #1e293b;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}

.golden-point-box .box-title i {
  color: #fbbf24;
  font-size: 1.3rem;
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.3));
}

.golden-point-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.golden-point-box ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

.golden-point-box ul li:last-child {
  margin-bottom: 0;
}

.golden-point-box ul li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #fbbf24;
  font-weight: bold;
}
/* Genius Tag on Card Back */
.card-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.genius-tag {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #78350f;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  margin: 1rem 0;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
  animation: genius-shimmer 2s infinite alternate;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

@keyframes genius-shimmer {
  from {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
  }
  to {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(252, 211, 77, 0.6);
  }
}

.result-text {
  font-weight: bold;
  color: #475569;
  line-height: 1.4;
  margin: 0.5rem 0;
}
.golden-laws-header {
  margin-bottom: 3rem;
}

.golden-laws-header h1 {
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 1rem;
  display: inline-block;
}

.golden-laws-header p {
  margin-top: 1rem;
}

.sidebar-advice-text {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.6;
}

.advice-highlight {
  color: #f97316;
  font-weight: bold;
}

.nav-separator {
  height: 1px;
  background: #e2e8f0;
  margin: 1rem 0;
}

.sticky-sidebar-wrapper {
  position: sticky;
  top: 2rem;
}

.recommendation-badge {
  display: block;
  background: #fffbeb;
  border: 2px solid #facc15;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: #d97706;
  font-weight: bold;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.recommendation-badge span {
  font-size: 0.8rem;
  font-weight: normal;
}

/* --- Enhancement Styles for Golden Laws --- */

html {
  scroll-behavior: smooth;
}

/* Golden Glow Text Effect */
.text-gold {
  background: linear-gradient(135deg, #d4af37 0%, #fcd34d 50%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

/* Golden Card Glow */
.law-card.golden-glow-card {
  border: 1px solid #fcd34d;
  box-shadow: 0 0 15px rgba(252, 211, 77, 0.3);
}

/* Active/Read State Style */
.read-btn.active {
  background: #22c55e; /* Green for success */
  color: white;
  border-color: #22c55e;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.read-btn.active i {
  animation: check-bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes check-bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

/* Confetti Canvas Container (if needed, but usually fixed position) */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Restoring Footer Navigation Styles */
.footer-nav-container {
  margin-top: 4rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 2rem;
}

.footer-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin-top: 4rem; /* Fix: Add space above buttons */
}

.back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  background: #f1f5f9;
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  border: 1px solid #cbd5e1;
}

/* --- Golden Hero Header Styles --- */
.golden-hero {
  text-align: center;
  margin-bottom: 4rem;
  padding: 4rem 2rem;
  background: white; /* Fallback */
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
  border-radius: 20px;
  border: 1px solid rgba(252, 211, 77, 0.3);
  box-shadow: 0 10px 30px rgba(252, 211, 77, 0.1);
  position: relative;
  overflow: hidden;
}

.golden-hero::before {
  content: "\f005"; /* Star icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -20px;
  left: -20px;
  font-size: 10rem;
  color: rgba(252, 211, 77, 0.1);
  transform: rotate(-15deg);
  z-index: 0;
}

.golden-hero::after {
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-size: 8rem;
  color: rgba(252, 211, 77, 0.1);
  transform: rotate(15deg);
  z-index: 0;
}

.golden-hero-content {
  position: relative;
  z-index: 1;
}

.golden-icon-large {
  font-size: 4rem;
  color: #fbbf24;
  margin-bottom: 1.5rem;
  display: inline-block;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(251, 191, 36, 0.3));
  animation: float-hero 6s ease-in-out infinite;
}

@keyframes float-hero {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.golden-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.golden-hero .line {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #fcd34d, #f59e0b);
  margin: 0 auto 1.5rem auto;
  border-radius: 2px;
}

/* --- Golden Laws Chapter Utilities --- */

.highlight-box.highlight-gray {
  border-color: #64748b;
  background: #f8fafc;
}

.list-unstyled-bold {
  list-style: none;
  padding: 0;
  font-weight: bold;
  color: #57534e;
}

.list-icon-orange {
  color: #d97706;
}

.text-care-red {
  color: #dc2626;
  font-weight: bold;
}

.dashed-divider {
  border: 0;
  border-top: 2px dashed #bae6fd;
  margin: 2rem 0;
}

.summary-title {
  text-align: center;
  font-weight: bold;
  color: #0369a1; /* Revert to Cool Blue */
  margin-bottom: 1rem;
}

.summary-content-box {
  text-align: center;
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  border: 2px solid #e0f2fe; /* Revert to Light Blue Border */
  box-shadow: none;
}

.summary-footer-msg {
  text-align: center;
  margin-top: 2rem;
  font-weight: bold;
  color: #f59e0b;
}

.btn-next-chapter {
  background: #fef9c3;
  border-color: #fde047;
  color: #854d0e;
}

/* --- Law 1 Enhancements (Ripple, Tuning, Stamp) --- */

/* 1. Kotodama Ripple Effect */
.kotodama-text {
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
  border-bottom: 2px dashed #fcd34d;
  /* Animation removed as per request */
}

/* --- Reframing Story Visual --- */
.reframing-story-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 15px;
  border: 1px dashed #cbd5e1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

/* Part 1: Start Button & Foggy Screen */
/* When NOT playing, content is blurry */
.reframing-story-container:not(.is-playing) .story-scene,
.reframing-story-container:not(.is-playing) .story-arrow {
  filter: blur(4px);
  opacity: 0.5;
}

.reframing-story-container:hover {
  background: #f1f5f9;
}

/* Play Button Overlay */
.reframing-story-container::after {
  content: "\f144"; /* fa-play-circle */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: #3b82f6;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
  background: radial-gradient(circle, white 40%, transparent 50%);
  border-radius: 50%;
  z-index: 10;
}

.reframing-story-container.is-playing::after {
  opacity: 0;
}

.story-scene {
  text-align: center;
  position: relative;
  width: 160px;
}

.scene-wrapper {
  position: relative;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Part 2: Trip Animation (First 1.5s) --- */
.scene-bad .scene-icon {
  color: #64748b;
  transform-origin: bottom center;
  position: relative;
  z-index: 2; /* Keep above if needed */
}

/* Animate Trip: Bold Fall Right */
.reframing-story-container.is-playing .animate-trip i {
  display: inline-block;
  transform-origin: bottom right;
  animation: collapseBoldly 1.5s ease-in-out forwards;
}

@keyframes collapseBoldly {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(-15deg) translateY(-5px);
  } /* Wind up */
  40% {
    transform: rotate(10deg) translateY(-10px);
  } /* Loss of balance */
  100% {
    transform: rotate(110deg) translateY(15px) scale(0.9);
    color: #475569;
  } /* Hard fall / overshoot */
}

.bad-mood {
  color: #475569;
  display: block;
  font-size: 0.8rem;
  opacity: 0;
}

/* Show text AFTER fall */
.reframing-story-container.is-playing .bad-mood {
  animation: fadeInText 0.5s ease-out forwards;
  animation-delay: 1.5s;
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

/* --- Part 3: Car Animation (Sequenced after Part 2, Delay 2.0s) --- */
/* Right side hidden initially when playing */
.story-scene.scene-good {
  transition: opacity 0.5s;
}

.reframing-story-container.is-playing .story-scene.scene-good {
  opacity: 0;
  animation: fadeInScene 0.5s ease-out forwards;
  animation-delay: 4.5s; /* Reveal right side after trip + 3s pause */
}

@keyframes fadeInScene {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Show text AFTER fall (Delay 1.5s) */
.reframing-story-container.is-playing .bad-mood {
  animation: fadeInText 0.5s ease-out forwards;
  animation-delay: 1.5s;
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

/* --- Part 3: Car Animation (Sequenced after Part 2, Delay 2.0s) --- */
.scene-good .scene-icon.safe-person {
  color: #f59e0b;
  z-index: 1;
}

.reframing-story-container.is-playing .scene-good .scene-icon.safe-person {
  animation: blownAway 4s ease-in-out forwards;
  animation-delay: 4.5s; /* Wait for trip + 3s pause */
}

.car-layer {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.speeding-car {
  position: absolute;
  color: #ef4444;
  font-size: 2rem;
  top: 0;
  left: 100%;
  opacity: 0;
}

.reframing-story-container.is-playing .speeding-car {
  animation: driveBySlow 4s linear forwards;
  animation-delay: 4.5s; /* Sync with Part 3 start */
}

/* Animations */
@keyframes driveBySlow {
  0% {
    left: 120%;
    transform: scaleX(-1);
    opacity: 1;
  }
  30% {
    left: 50%;
    transform: scaleX(-1);
    opacity: 1;
  } /* Hit point */
  35% {
    left: 45%;
    transform: scaleX(-1);
    opacity: 1;
  } /* Skid stop */
  90% {
    left: 45%;
    transform: scaleX(-1);
    opacity: 1;
  } /* Stay */
  100% {
    left: 45%;
    transform: scaleX(-1);
    opacity: 0;
  } /* Fade out */
}

@keyframes blownAway {
  0%,
  29% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-5px, -5px) rotate(-10deg);
    opacity: 1;
  }
  32% {
    transform: translate(-10px, -10px) rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: translate(-200px, -150px) rotate(-720deg);
    opacity: 0;
  }
}

.scene-text {
  font-size: 0.9rem;
  font-weight: bold;
  color: #334155;
  margin-top: 0.5rem;
}

.bad-mood {
  color: #475569;
  display: block;
  font-size: 0.8rem;
}
.good-mood {
  color: #d97706;
  display: block;
  font-size: 0.8rem;
}

.story-arrow {
  color: #cbd5e1;
  font-size: 1.5rem;
}

.hidden-danger {
  position: absolute;
  top: -25px;
  right: -25px;
  background: #ef4444;
  color: white;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
  opacity: 0;
  transform: scale(0);
  white-space: nowrap;
}

.reframing-story-container.is-playing .hidden-danger {
  animation: revealFlash 4s linear forwards;
}

@keyframes slideRight {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

@keyframes revealFlash {
  0%,
  29% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
    transform: scale(1.5) rotate(-10deg);
  } /* IMPACT! */
  35% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    text-shadow: none;
  }
  50% {
    transform: scale(1.02);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
  }
}

.kotodama-text:hover {
  color: #d97706;
  text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
  animation-play-state: paused; /* Pause breathing on hover */
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.4);
  transform: scale(0);
  animation: ripple-anim 0.8s linear;
  pointer-events: none;
}

@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 2. Mind Tuning Switch */
.tuning-switch-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: 50px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  transition: background 0.5s;
}

/* Glassmorphism Sidebar Widgets */
.sidebar-widget {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
}

.tuning-label {
  font-weight: bold;
  color: #64748b;
  font-size: 0.9rem;
  transition: opacity 0.5s ease;
}

/* Hide 'Sukkiri' by default (Cloudy state) */
.tuning-label:last-child {
  opacity: 0;
}

/* Toggle visibility when tuned */
.mind-tuning-target.tuned .tuning-label:first-child {
  opacity: 0;
}
.mind-tuning-target.tuned .tuning-label:last-child {
  opacity: 1;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #f59e0b; /* Golden Orange */
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Tuned State (Active) - REFINED */

/* 
   Specific target for Law 1 Chapter Hero.
   Crucial: Use !important or high specificity to override .genki-frame default white background.
   Default State: Gloomy Dark
*/
/* be_okay.html specific hero icon */
.be-okay-hero-icon-wrap {
  font-size: 3.5rem;
  color: #475569; /* Slate for 'cloudy' icon */
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  animation: float-hero 6s ease-in-out infinite;
}

div.chapter-hero.genki-frame.mind-tuning-target {
  background-color: #94a3b8 !important; /* Soft Slate Gray (Original preference) */
  background-image: none !important;
  color: #1e293b !important; /* Dark text for contrast */
  border-color: #8fa1b4;
  transition: all 0.8s ease;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Hide the cluttered background icon */
div.chapter-hero.genki-frame.mind-tuning-target::before,
div.chapter-hero.genki-frame.mind-tuning-target::after {
  display: none !important;
  content: none !important;
}

div.chapter-hero.genki-frame.mind-tuning-target h1 {
  color: #064e3b;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

div.chapter-hero.genki-frame.mind-tuning-target p {
  color: #334155;
}

/* Tuned State (Gold Premium) */
div.chapter-hero.genki-frame.mind-tuning-target.tuned {
  background: linear-gradient(
    135deg,
    #fef08a 0%,
    #facc15 50%,
    #eab308 100%
  ) !important; /* Richer Gold */
  background-size: 200% 200% !important;
  animation: gradient-flow 3s ease infinite;
  border: 2px solid #fbbf24;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.5) !important;
}

div.chapter-hero.genki-frame.mind-tuning-target.tuned h1 {
  background: linear-gradient(
    to right,
    #78350f,
    #92400e
  ); /* Darker text for contrast on gold */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

div.chapter-hero.genki-frame.mind-tuning-target.tuned p {
  color: #92400e !important;
  font-weight: bold;
}

/* Tuned State (Gold Premium) */
.chapter-hero.mind-tuning-target.tuned {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fcd34d 100%);
  background-size: 200% 200%;
  animation: gradient-flow 3s ease infinite;
  border: 2px solid #fbbf24;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.chapter-hero.mind-tuning-target.tuned h1 {
  background: linear-gradient(to right, #b45309, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}

.chapter-hero.mind-tuning-target.tuned p {
  color: #92400e;
  font-weight: bold;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Update Switch Container for Dark BG */
.tuning-switch-container {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.chapter-hero.mind-tuning-target.tuned .tuning-switch-container {
  background: rgba(255, 255, 255, 0.6);
  border-color: #fcd34d;
}

/* 3. Stamp Rally */
.daijoubu-btn {
  display: block;
  margin: 2rem auto;
  padding: 0.8rem 2.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.daijoubu-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.daijoubu-btn.stamped {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  cursor: default;
  pointer-events: none;
  animation: pop-stamp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-stamp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Certificate Modal */
.certificate-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 20px;
  z-index: 10000;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  border: 4px solid #fcd34d;
  width: 90%;
  max-width: 400px;
}

.certificate-modal.show {
  display: block;
  animation: slide-up-fade 0.5s ease-out;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-overlay.show {
  display: block;
}

@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* --- Wavelength Resonator Animation --- */
.wavelength-resonator {
  background: #f8fafc;
  border-radius: 20px;
  padding: 2rem;
  margin: 3rem 0;
  border: 1px solid #e2e8f0;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.wavelength-resonator.is-negative {
  background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
  border-color: #94a3b8;
}

.wavelength-resonator.is-neutral {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
}

.wavelength-resonator.is-positive {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fcd34d;
}

.resonance-chamber {
  position: relative;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Center Self */
.center-emitter {
  position: relative;
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.wavelength-resonator.is-negative .center-emitter {
  color: #64748b;
}
.wavelength-resonator.is-neutral .center-emitter {
  color: #10b981;
}
.wavelength-resonator.is-positive .center-emitter {
  color: #f59e0b;
}

/* Pulse Rings */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.wavelength-resonator.is-negative .pulse-ring {
  animation: pulseEmissions 3s infinite;
  color: #94a3b8;
}
.wavelength-resonator.is-neutral .pulse-ring {
  animation: pulseEmissions 2s infinite;
  color: #6ee7b7;
}
.wavelength-resonator.is-positive .pulse-ring {
  animation: pulseEmissions 1s infinite;
  color: #fcd34d;
}

.pulse-ring.ring-2 {
  animation-delay: 0.5s;
}

@keyframes pulseEmissions {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    border-width: 2px;
  }
  100% {
    width: 300%;
    height: 300%;
    opacity: 0;
    border-width: 0;
  }
}

/* Orbit Path */
.orbit-path {
  position: absolute;
  width: 200px;
  height: 200px;
  animation: orbitRotate 10s linear infinite;
}

.wavelength-resonator.is-negative .orbit-path {
  animation-duration: 20s;
} /* Slow */
.wavelength-resonator.is-positive .orbit-path {
  animation-duration: 5s;
} /* Fast */

@keyframes orbitRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Attraction Items */
.attraction-group {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.wavelength-resonator.is-negative .group-negative,
.wavelength-resonator.is-neutral .group-neutral,
.wavelength-resonator.is-positive .group-positive {
  opacity: 1;
}

.item {
  position: absolute;
  font-size: 1.5rem;
}

.group-negative .item {
  color: #64748b;
}
.group-neutral .item {
  color: #10b981;
}
.group-positive .item {
  color: #f59e0b;
}

/* Positioning orbiting items */
.float-1 {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.float-2 {
  bottom: 20px;
  right: 20px;
  transform: rotate(120deg);
}
.float-3 {
  bottom: 20px;
  left: 20px;
  transform: rotate(240deg);
}

/* Keep icons upright */
.item {
  animation: counterRotate 10s linear infinite;
}
.wavelength-resonator.is-negative .item {
  animation-duration: 20s;
}
.wavelength-resonator.is-positive .item {
  animation-duration: 5s;
}

@keyframes counterRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

/* Controls */
.resonance-control {
  text-align: center;
  position: relative;
  z-index: 5;
}

.tuning-slider {
  width: 80%;
  margin: 1rem 0;
  cursor: pointer;
  accent-color: #64748b; /* Default */
}

.wavelength-resonator.is-neutral .tuning-slider {
  accent-color: #10b981;
}
.wavelength-resonator.is-positive .tuning-slider {
  accent-color: #f59e0b;
}

.tuning-feedback {
  font-weight: bold;
  font-size: 1.1rem;
  min-height: 1.5rem;
  transition: color 0.3s;
}

.tuning-hint {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 5px;
}

/* --- Attraction Words Animation (Sucked In) --- */
.attraction-words {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none; /* Hidden by default */
}

.wavelength-resonator.is-negative .words-negative,
.wavelength-resonator.is-positive .words-positive {
  display: block;
}

.word-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0.9rem;
  font-weight: bold;
  opacity: 0;
  white-space: nowrap;
}

.words-negative .word-particle {
  color: #475569;
}
.words-positive .word-particle {
  color: #d97706;
  text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

/* Animation triggers */
.wavelength-resonator.is-negative .p1 {
  animation: suckInTop 2s infinite linear;
}
.wavelength-resonator.is-negative .p2 {
  animation: suckInBot 2.5s infinite linear;
  animation-delay: 0.8s;
}
.wavelength-resonator.is-negative .p3 {
  animation: suckInLeft 2.2s infinite linear;
  animation-delay: 1.5s;
}

.wavelength-resonator.is-positive .p1 {
  animation: suckInTop 2s infinite linear;
}
.wavelength-resonator.is-positive .p2 {
  animation: suckInBot 2.5s infinite linear;
  animation-delay: 0.8s;
}
.wavelength-resonator.is-positive .p3 {
  animation: suckInRight 2.2s infinite linear;
  animation-delay: 1.5s;
}

@keyframes suckInTop {
  0% {
    transform: translate(-50%, -150px) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -10px) scale(0.2);
    opacity: 0;
  }
}

@keyframes suckInBot {
  0% {
    transform: translate(-50%, 150px) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 10px) scale(0.2);
    opacity: 0;
  }
}

@keyframes suckInLeft {
  0% {
    transform: translate(-200px, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(-20px, -50%) scale(0.2);
    opacity: 0;
  }
}

@keyframes suckInRight {
  0% {
    transform: translate(200px, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(20px, -50%) scale(0.2);
    opacity: 0;
  }
}

/* --- Chapter 4: I'm Doing Well (Self-Affirmation) --- */
.theme-law4 {
  background-color: #ffffff; /* Simple White Canvas */
}

.law4-hero {
  background: linear-gradient(
    135deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  ) !important;
  color: #78350f !important;
}

.law4-hero h1 {
  background: linear-gradient(to right, #78350f, #92400e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.law4-hero .hero-subtitle {
  color: #b45309 !important;
}

.heart-beat-icon {
  font-size: 3.5rem;
  color: #da1b60;
  animation: heartPulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(218, 27, 96, 0.4));
}

@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.15);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
}

/* Restored original gradient text for h1 */

/* Redesigned Hurdle Metaphor */
.hurdle-visual-container {
  background: #fff;
  padding: 2.5rem;
  border-radius: 30px;
  border: 1px solid #fbcfe8;
  box-shadow: 0 15px 40px rgba(251, 207, 232, 0.15);
  margin: 3.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hurdle-visual-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(to bottom, #fbcfe8, #f472b6);
}

.hurdle-lanes {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
}

.lane {
  flex: 1;
  max-width: 280px;
  height: 160px;
  position: relative;
  background: #fff1f2;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(251, 113, 133, 0.1);
}

.lane-label {
  position: absolute;
  top: 15px;
  width: 100%;
  font-size: 0.85rem;
  font-weight: bold;
  color: #db2777;
  z-index: 10;
  text-shadow: 0 0 10px white;
}

.hurdle-bar-visual {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 90px;
  background: #f472b6;
  transform: translateX(-50%);
  z-index: 5;
}

.hurdle-bar-visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  width: 50px;
  height: 5px;
  background: #db2777;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.lane-char {
  position: absolute;
  bottom: 0;
  font-size: 2.2rem;
  color: #db2777;
  z-index: 6;
}

/* Lane 1: The Struggle (Jump) */
.lane-hard .lane-char {
  animation: struggleJump 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes struggleJump {
  0% {
    left: 5%;
    transform: translateY(0) rotate(0);
  }
  15% {
    left: 20%;
    transform: translateY(0);
  }
  35% {
    left: 40%;
    transform: translateY(-75px) rotate(-10deg);
  } /* Peak of jump - too low */
  45% {
    left: 45%;
    transform: translateY(-70px) rotate(15deg);
  } /* "Ouch" moment */
  65% {
    left: 20%;
    transform: translateY(0) rotate(0);
  } /* Rebound/Fail */
  100% {
    left: 5%;
    transform: translateY(0);
  }
}

/* Lane 2: The Wisdom (Crawl) */
.lane-easy .lane-char {
  animation: wisdomSlide 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes wisdomSlide {
  0% {
    left: 5%;
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  15% {
    left: 20%;
    transform: scale(1) translateY(0);
  }
  35% {
    left: 40%;
    transform: scale(0.6, 0.5) translateY(0);
  } /* Duck down */
  55% {
    left: 65%;
    transform: scale(0.6, 0.5) translateY(0);
  } /* Slide under */
  75% {
    left: 85%;
    transform: scale(1) translateY(0);
    opacity: 1;
  } /* Victory Stand up */
  85% {
    left: 85%;
    opacity: 0;
  }
  100% {
    left: 5%;
    opacity: 0;
  }
}

.hurdle-metaphor-img {
  max-width: 100%;
  border-radius: 15px;
  margin: 1rem 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Heart Light Interactive */
.heart-light-stage {
  background: #1e293b; /* Dark backdrop for the light */
  border-radius: 20px;
  padding: 3rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 2.5rem 0 4rem; /* Increased bottom margin for better separation */
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Added specific spacing for the healing message box */
.message-box.healing {
  margin-bottom: 4rem;
  background: #fff1f2; /* Light pink background matching the theme */
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  color: #881337;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.heart-light-stage.stage-ignited {
  background: #fff1f2; /* Warm Pastel Pink */
  box-shadow:
    inset 0 0 60px rgba(251, 113, 133, 0.2),
    0 0 20px rgba(251, 113, 133, 0.1);
}

.heart-lamp-container {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
  transition: all 0.5s;
}

.heart-main {
  font-size: 5rem;
  color: #475569; /* Dormant state */
  transition: all 0.5s;
  z-index: 2;
  position: relative;
}

.lamp-shine {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    rgba(234, 113, 154, 0.4) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  transition: all 0.5s;
  border-radius: 50%;
  z-index: 1;
}

/* Ignited State */
.heart-lamp-container.ignited .heart-main {
  color: #da1b60;
  text-shadow: 0 0 30px #da1b60;
}

.heart-lamp-container.ignited .lamp-shine {
  width: 300px;
  height: 300px;
}

.healing-shout-btn {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
  color: white;
  border: none;
  padding: 1.2rem 2.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(225, 29, 72, 0.3);
  transition: all 0.3s;
  position: relative;
  z-index: 5;
}

.healing-shout-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(225, 29, 72, 0.5);
}

.healing-shout-btn.clicked {
  animation: btnPush 0.2s ease-out;
}

@keyframes btnPush {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.btn-hint {
  color: #94a3b8;
  font-size: 0.85rem;
  margin-top: 1rem;
}

/* Specific Law 4 components */
.message-box.healing {
  background: linear-gradient(135deg, #fff1f2 0%, #fff7ed 100%);
  border-left: 6px solid #fb7185;
  color: #881337;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(251, 113, 133, 0.1);
  position: relative;
  overflow: hidden;
}

.message-box.healing::after {
  content: "\f004"; /* heart */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 8rem;
  color: rgba(251, 113, 133, 0.05);
  transform: rotate(-15deg);
}

.quote-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}

.quote-intro .main-phrase {
  font-size: 1.5rem;
  font-weight: 800;
  color: #be123c;
  margin-bottom: 0.5rem;
}

.quote-intro .sub-phrase {
  color: #64748b;
  font-style: italic;
}

/* Intro block spacing for Law 5 */
.intro-block {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Law 6 Hero: Light Sunrise Theme */
.law6-hero-light {
  background: linear-gradient(
    135deg,
    #fefce8 0%,
    #fef3c7 100%
  ); /* Soft Yellow/Cream */
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 20px;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
  border: 1px solid #fde68a;
  box-shadow: 0 10px 30px rgba(251, 191, 36, 0.1);
}

.law6-hero-light .law6-hero-icon {
  font-size: 3.5rem;
  color: #f59e0b; /* Amber/Sun color */
  margin-bottom: 1.5rem;
  animation: float-slow 4s ease-in-out infinite;
}

.law6-hero-light h1 {
  font-family: "Zen Maru Gothic", sans-serif;
  color: #78350f; /* Warm brown */
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.law6-hero-light .law6-line {
  width: 60px;
  height: 4px;
  background: #fcd34d;
  margin: 0 auto 1.5rem;
  border-radius: 2px;
}

.law6-hero-light p {
  color: #92400e;
  font-weight: 500;
  line-height: 1.8;
}

/* --- Law 4 Deep Empathy Suite --- */

/* Breathing Rhythm & Background */
.law4-bg {
  overflow: hidden;
}

.breathing-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150vmax;
  height: 150vmax;
  background: radial-gradient(
    circle,
    rgba(255, 138, 0, 0.08) 0%,
    transparent 70%
  );
  z-index: -1;
  animation: breathingPulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes breathingPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.7;
  }
}

/* Flowing Elements */
.peaceful-flow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.leaf {
  position: absolute;
  color: rgba(255, 138, 0, 0.2);
  font-size: 1.2rem;
  animation: leafFlow 20s linear infinite;
}

@keyframes leafFlow {
  0% {
    transform: translateY(110vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

/* Burden Release */
.burden-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

.burden-tag {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  padding: 0.8rem 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.5s ease;
  border: 1px dashed rgba(100, 116, 139, 0.3);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.burden-tag:hover {
  background: rgba(100, 116, 139, 0.15);
  transform: translateY(-2px);
}

.burden-tag.released {
  animation: dissolveAndFloat 8s forwards ease-out;
  pointer-events: none;
}

@keyframes dissolveAndFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  15% {
    transform: translateY(-30px) scale(1.05);
    opacity: 0.8;
    filter: blur(0);
  }
  100% {
    transform: translateY(-500px) scale(1.3);
    opacity: 0;
    filter: blur(6px);
  }
}

/* --- Golden Laws / 7 Essence Index Styles (Creative Flat) --- */
.essence-hero {
  padding: 6rem 2rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.essence-hero-content {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
}

.essence-icon-large {
  font-size: 5rem; /* Boldly enlarged as requested */
  color: #86efac;
  margin-bottom: 2rem;
  display: inline-block;
  opacity: 0.8;
  filter: drop-shadow(0 10px 20px rgba(134, 239, 172, 0.3));
  animation: float-slow 8s ease-in-out infinite;
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
  }
}

.essence-hero h1 {
  font-family: "Zen Maru Gothic", "Outfit", sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.essence-gradient-text {
  background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.essence-divider {
  width: 100px;
  height: 5px;
  background: linear-gradient(90deg, #86efac, #7dd3fc);
  margin: 2rem auto;
  border-radius: 50px;
}

.essence-hero p {
  font-size: 1.2rem;
  color: #64748b;
  font-weight: 500;
}

/* Background Decoration Blobs */
.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 500px;
  height: 500px;
  background: rgba(134, 239, 172, 0.1);
  filter: blur(80px);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 70%;
  animation: blob-float 20s infinite alternate;
}

.blob-1 {
  top: -100px;
  right: -100px;
  background: rgba(134, 239, 172, 0.15);
}

.blob-2 {
  bottom: -150px;
  left: -150px;
  background: rgba(125, 211, 252, 0.15);
  animation-delay: -5s;
}

@keyframes blob-float {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(50px, 30px) rotate(90deg) scale(1.1);
  }
  100% {
    transform: translate(-30px, 50px) rotate(180deg) scale(1);
  }
}

/* Essence Cards Layout */
.golden-laws-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  padding: 2rem 0 6rem;
}

/* Custom Clapper Graphics */
.clapper-graphic {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  margin: auto;
  width: 140px;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.3s;
}

.clapper-graphic:hover {
  transform: scale(1.05);
}

.clapper-top {
  width: 100%;
  height: 25px;
  background: #1e293b;
  border: 2px solid #fff;
  border-bottom: none;
  transform: rotate(-20deg);
  transform-origin: bottom left;
  position: relative;
  z-index: 2;
  transition: transform 0.1s;
}

.clapper-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 40px;
  height: 100%;
  background: #fff;
  transform: skewX(-20deg);
}

.clapper-body {
  width: 100%;
  background: #1e293b;
  border: 2px solid #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.clapper-text-line {
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.clapper-text-main {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 2px;
}

/* --- Law 2: Scenario Film Scene (Let It Be) --- */
.scenario-film-scene {
  background: #1e293b;
  padding: 3rem 1rem;
  border-top: 20px solid #000;
  border-bottom: 20px solid #000;
  border-left: 0;
  border-right: 0;
  position: relative;
  border-radius: 4px;
  margin: 4rem 0;
  /* Sprocket holes effect */
  background-image:
    linear-gradient(90deg, #fff 50%, transparent 50%),
    linear-gradient(90deg, #fff 50%, transparent 50%);
  background-size: 30px 20px;
  background-position:
    10px 5px,
    10px calc(100% - 5px);
  background-repeat: repeat-x;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.scenario-film-scene::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
  background: #f1f5f9;
  z-index: 0;
}

/* --- Law 3: God's Trial Scene (Legacy Restoration) --- */
.trial-flip-scene {
  perspective: 1000px;
  margin: 3rem 0;
  text-align: center;
}
.god-cloud {
  font-size: 3rem;
  color: #facc15; /* Gold/Thunder color */
  margin-bottom: 2rem;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.god-label {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  color: #475569;
  margin-top: 0.5rem;
}
.trial-card-container {
  perspective: 1000px;
  width: 300px;
  height: 420px;
  margin: 0 auto;
}
.trial-card {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}
.trial-card.is-flipped {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: white;
  border: 1px solid #e2e8f0;
}
.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 4px solid #fbbf24;
}
.trial-icon {
  font-size: 4rem;
  color: #64748b;
  margin-bottom: 1rem;
}
.result-icon {
  font-size: 4rem;
  color: #f59e0b;
  margin-bottom: 1rem;
}
.trial-controls {
  margin-top: 2rem;
}
.flip-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
}
.flip-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(59, 130, 246, 0.4);
}
.divine-message {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #f0f9ff;
  border-radius: 12px;
  color: #0369a1;
  font-weight: bold;
  opacity: 0;
  transition: all 0.5s;
  transform: translateY(20px);
}

.scene-card {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 10px;
  padding: 2rem;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 1px solid #e2e8f0;
}

.clapper-icon {
  position: absolute;
  top: -40px;
  left: -20px;
  font-size: 2.5rem;
  color: #fff;
  background: #1e293b;
  width: 70px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 2px solid white;
  transform: rotate(-10deg);
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.clapper-icon::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: #1e293b;
  border: 2px solid white;
  border-bottom: none;
  transform-origin: bottom left;
  transform: rotate(-15deg);
  transition: transform 0.2s;
  border-radius: 2px 2px 0 0;
}

.clapper-icon:hover {
  transform: rotate(-5deg) scale(1.1);
}

.clapper-icon:hover::after {
  transform: rotate(0deg); /* Clap action hint */
}

/* Clapperboard Striping */
.clapper-icon::before {
  content: "//";
  color: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
  );
}

.scene-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: #475569;
  margin: 1.5rem 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-label {
  display: inline-block;
  background: #e2e8f0;
  color: #64748b;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.scene-weather-icon {
  font-size: 2rem;
  color: #94a3b8;
  margin-top: 1rem;
}

.essence-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  padding: 2.5rem;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  position: relative;
  overflow: visible; /* Allow badge to pop out */
}

.essence-card:hover {
  transform: translateY(-12px) scale(1.02);
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  border-color: #86efac;
}

.essence-card .law-icon {
  font-size: 2.5rem;
  color: #10b981;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.essence-card:hover .law-icon {
  transform: scale(1.2) rotate(10deg);
}

.essence-card h3 {
  font-size: 1.4rem;
  color: #1e293b;
  margin-bottom: 1rem;
  font-weight: 800;
}

.essence-card p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.7;
}

.essence-card .read-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.essence-card .read-btn.active {
  background: #10b981;
  color: white;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

/* --- Random Essence Selection (Creative Flat) --- */
.recommend-section {
  max-width: 800px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
}

.recommend-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 30px;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

.recommend-content h3 {
  font-size: 1.5rem;
  color: #1e293b;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.recommend-content p {
  color: #64748b;
  font-size: 1rem;
}

.btn-premium {
  background: linear-gradient(135deg, #86efac 0%, #3b82f6 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
  white-space: nowrap;
}

.btn-premium:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.btn-premium:active {
  transform: translateY(-1px) scale(0.98);
}

/* Selection Badge & Highlight */
.recommend-badge {
  position: absolute;
  top: -20px;
  right: -10px;
  background: #10b981;
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
  z-index: 100; /* Ensure it stays on top */
  animation: badge-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  white-space: nowrap;
}

@keyframes badge-pop {
  from {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.recommended-highlight {
  border-color: #10b981 !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.3) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .recommend-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
  }
}

/* Letter from Future Widget */
.future-letter-widget {
  background: #ffffff;
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-left: 5px solid #ff8a00;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.future-letter-widget:hover {
  transform: translateY(-5px);
}

.letter-icon {
  font-size: 2.5rem;
  color: #ff8a00;
  opacity: 0.2;
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
}

.letter-content {
  position: relative;
  z-index: 1;
}

.letter-title {
  font-weight: bold;
  color: #ff8a00;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.letter-text {
  line-height: 1.6;
  color: #475569;
  min-height: 3em;
  font-family: inherit;
  transition: opacity 0.3s ease;
}

.letter-stamp {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 1rem;
  text-align: right;
}

.future-letter-main-wrap {
  max-width: 600px;
  margin: 3rem auto 2rem;
}

/* Reward Message after Burden Release - Soft & Organic Design */
.reward-message {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #db2777; /* Soft but clear pink/red */
  margin: 4rem auto;
  padding: 2.5rem 3rem;
  opacity: 0;
  filter: blur(20px);
  font-family: "Zen Maru Gothic", sans-serif; /* Soft rounded font */
  transition:
    opacity 7s ease-out,
    filter 7s ease-out,
    transform 6s ease-out,
    background 5s ease-out,
    border 5s ease-out;
  position: relative;
  max-width: 600px;
  letter-spacing: 0.2em;

  /* Organic, hand-drawn feel frame */
  background: rgba(255, 255, 255, 0);
  border: 3px solid rgba(251, 207, 232, 0);
  border-radius: 60% 40% 70% 30% / 40% 50% 60% 70%;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0);
}

.reward-message::before,
.reward-message::after {
  content: "✿"; /* Softer flower icon */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #f472b6;
  opacity: 0;
  transition: opacity 5s ease-in 3s;
}

.reward-message::before {
  left: 0.5rem;
}
.reward-message::after {
  right: 0.5rem;
}

.reward-message.fade-in-up {
  opacity: 1;
  filter: blur(0);
  transform: translateY(-10px);
  letter-spacing: 0.1em;
  background: rgba(255, 241, 242, 0.8);
  border: 3px solid rgba(251, 207, 232, 1);
  box-shadow: 0 15px 40px rgba(251, 207, 232, 0.3);
}

.reward-message.fade-in-up::before,
.reward-message.fade-in-up::after {
  opacity: 0.8;
}

/* Layout Utilities - Spacers */
.spacer-s {
  height: 1rem;
}
.spacer-m {
  height: 2rem;
}
.spacer-l {
  height: 4rem;
}
.spacer-xl {
  height: 6rem;
}
/* Aurora Identity Theme - Essence 03 (Inspired by Sky Blue) */
.theme-law5 {
  --law5-primary: #7dd3fc;
  --law5-secondary: #0ea5e9;
  --law5-accent: #f0f9ff;
  --law5-bg-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.theme-law5 .chapter-hero {
  background: var(--essence-03) !important;
  background-image: linear-gradient(
    135deg,
    #f0f9ff 0%,
    #e0f2fe 100%
  ) !important;
  color: #0c4a6e !important; /* Deep Sky Blue for text */
}

.theme-law5 .chapter-hero h1 {
  color: #0369a1 !important;
}

.theme-law5 .chapter-hero .hero-subtitle {
  color: #075985 !important;
}

/* Handled by .theme-law5 variables */

.theme-law5 .chapter-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  animation: aurora-shift 15s infinite alternate ease-in-out;
}

@keyframes aurora-shift {
  0% {
    transform: translate(-10%, -10%) rotate(0deg);
  }
  100% {
    transform: translate(10%, 10%) rotate(5deg);
  }
}

.theme-law5 .message-box.identity-vow {
  border-left: 5px solid var(--law5-primary);
  background: rgba(0, 242, 254, 0.05);
  padding: 2rem;
  border-radius: 0 1rem 1rem 0;
  margin: 2rem 0;
  position: relative;
}

.theme-law5 .vow-btn {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3);
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-law5 .vow-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(79, 172, 254, 0.5);
}

.theme-law5 .vow-btn.ignited {
  animation: identity-glow 1s infinite alternate;
}

@keyframes identity-glow {
  from {
    box-shadow: 0 0 20px var(--law5-primary);
  }
  to {
    box-shadow: 0 0 40px var(--law5-accent);
  }
}

/* Insight Box for Questioning */
.insight-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid #94a3b8;
  margin: 1.5rem 0;
}

.insight-icon {
  font-size: 1.5rem;
  color: #94a3b8;
  margin-top: 0.2rem;
}

.insight-box p {
  margin: 0;
  color: #475569;
  font-weight: 500;
}
/* Self-Check Card */
.check-card {
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  transition: all 0.3s ease;
}

.check-card:hover {
  border-color: var(--law5-secondary, #4facfe);
  background: #f8fafc;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.05rem;
  color: #475569;
}

.check-list li i {
  color: var(--law5-secondary, #4facfe);
  font-size: 1.2rem;
}

.check-message {
  margin-top: 1.5rem;
  text-align: center;
  font-weight: bold;
  color: var(--law5-primary, #00f2fe);
}

/* Certificate Card - Modal Overlay */
.certificate-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(240, 253, 250, 0.9); /* Mist color (light teal-ish white) */
  backdrop-filter: blur(8px); /* Mist blur */
  z-index: 9999;
  display: flex; /* flex to center, but hidden by inline style display:none initially */
  justify-content: center;
  align-items: center;
  animation: mistFadeIn 1s ease forwards;
}

/* Ensure flex display when visible */
.certificate-container[style*="display: block"] {
  display: flex !important;
}

.certificate-card {
  background: linear-gradient(135deg, #fff 0%, #f0fdfa 100%);
  border: 4px double #fbbf24;
  border-radius: 10px;
  padding: 3rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  transform: scale(0.8);
  opacity: 0;
  /* Dramatic 4s zoom with slow settling */
  animation: zoomUpPop 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s; /* Wait a bit more for mist to settle */
}

@keyframes mistFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomUpPop {
  from {
    transform: scale(0.5) translateY(50px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.certificate-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 100px;
  height: 100px;
  background: #fbbf24;
  transform: rotate(45deg);
  opacity: 0.2;
}

.cert-icon {
  font-size: 3rem;
  color: #fbbf24;
  margin-bottom: 1rem;
}

.certificate-card h4 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  color: #b45309;
  margin: 0;
}

.certificate-card p {
  color: #78350f;
}

.cert-content {
  margin-top: 2rem;
  font-size: 1.1rem;
  line-height: 1.8;
}

.cert-signature {
  font-family:
    "Great Vibes", cursive; /* Assuming standard font fallback if not available, or just elegant serif */
  font-size: 1.5rem;
  margin-top: 2rem;
  color: #fbbf24;
}

@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Spacing fix for tip text */
.theme-law5 .tip-text {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #64748b;
}

.theme-law5 .vow-action-container {
  margin-bottom: 2rem;
}

/* Enhanced Hover Effect for Checklist */
.check-list li {
  padding: 0.8rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem; /* Tighter spacing for card feel */
}

.check-list li:hover {
  background-color: rgba(0, 242, 254, 0.1); /* Law 5 Primary tint */
  color: #0f172a;
  transform: translateX(5px);
}

/* Aurora Orb Animation */
.aurora-orb-container {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
  position: relative;
}

.aurora-orb {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a6ffcb, #00f2fe, #4facfe);
  box-shadow:
    0 0 40px rgba(0, 242, 254, 0.4),
    0 0 80px rgba(79, 172, 254, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.8);
  position: relative;
  animation: orb-breathe 6s infinite ease-in-out;
}

.aurora-orb::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  animation: orb-ring-spin 10s linear infinite;
}

@keyframes orb-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

/* Aurora Orb Breath Animation */
@keyframes orb-breathe {
  0%,
  100% {
    transform: scale(1);
    filter: hue-rotate(0deg);
    box-shadow: 0 0 40px rgba(0, 242, 254, 0.4);
  }
  50% {
    transform: scale(1.1);
    filter: hue-rotate(20deg);
    box-shadow:
      0 0 60px rgba(0, 242, 254, 0.6),
      0 0 100px rgba(166, 255, 203, 0.4);
  }
}

@keyframes orb-ring-spin {
  0% {
    transform: rotate(0deg);
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.3;
  }
}

.aurora-orb-container {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.orb-label {
  font-family: "Zen Maru Gothic", sans-serif;
  color: #475569;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  opacity: 0.8;
}

/* Liberation Animation Scene */
.liberation-scene {
  position: relative;
  height: 250px;
  margin: 3rem auto;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5));
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 2rem;
}

/* Mob Group (The Crowd) */
.mob-group {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 1;
}

.mob-figure {
  font-size: 3rem;
  color: #94a3b8; /* Slate gray - Softened */
  opacity: 0.6;
  transform-origin: bottom center;
  animation: mob-sway 3s infinite ease-in-out alternate;
  position: relative;
}

/* Scatter mob figures slightly */
.mob-figure:nth-child(odd) {
  transform: translateY(5px) scale(0.9);
  animation-delay: 0.2s;
}
.mob-figure:nth-child(even) {
  transform: translateY(-5px) scale(0.95);
  animation-delay: 0.5s;
}
.mob-figure:nth-child(1) {
  left: -20px;
}
.mob-figure:nth-child(7) {
  left: 20px;
}

/* Hero Figure (The Self) */
.hero-figure-wrapper {
  position: absolute;
  bottom: 20px; /* Start same level as mob */
  z-index: 2; /* Initially buried, but we use anim to handle visibility */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  pointer-events: none;
}

.hero-figure {
  font-size: 3.5rem;
  color: #0ea5e9; /* Sky Blue - Reclaimed */
  position: relative;
  filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.6));
  animation: liberation-rise 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Message */
.liberation-message {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #0d9488; /* Teal text */
  opacity: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transform: translateY(10px);
  animation: msg-fade-in 8s infinite ease;
  z-index: 10;
}

/* Animations */
@keyframes mob-sway {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(1px);
    transform: translateY(2px) scale(0.98);
  }
}

@keyframes liberation-rise {
  0% {
    transform: translateY(0) scale(0.8);
    color: #ef4444; /* Red */
    opacity: 0.5; /* Buried */
    filter: grayscale(0.5);
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: translateY(0) scale(0.9); /* Struggle */
  }
  40% {
    transform: translateY(-80px) scale(1.2); /* Break free */
    color: #ef4444;
    filter: grayscale(0);
    box-shadow: none;
  }
  50% {
    transform: translateY(-100px) scale(1.5); /* Fly high */
    color: #fbbf24; /* Turn Gold */
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
  }
  80% {
    transform: translateY(-100px) scale(1.5); /* Hold */
    color: #fbbf24;
    filter: drop-shadow(0 0 30px rgba(0, 242, 254, 0.8));
  }
  95% {
    transform: translateY(-100px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(0.8); /* Reset loop (fade out usually better but loop needed) */
    opacity: 0;
  }
}

@keyframes msg-fade-in {
  0%,
  45% {
    opacity: 0;
    transform: translateY(10px);
  }
  50%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}

@keyframes liberation-rise {
  0% {
    transform: translateY(10px) scale(0.8); /* Start slightly lower */
    color: #ef4444;
    opacity: 0; /* Completely invisible start */
    filter: grayscale(0.8);
  }
  15% {
    transform: translateY(0) scale(0.8);
    opacity: 0.8; /* Fade in gradually */
  }
  20% {
    transform: translateY(0) scale(0.9); /* Struggle/Ready */
    opacity: 1;
  }
  40% {
    transform: translateY(-80px) scale(1.2); /* Break free */
    color: #ef4444;
    filter: grayscale(0);
    box-shadow: none;
  }
  50% {
    transform: translateY(-100px) scale(1.5); /* Fly high */
    color: #fbbf24; /* Turn Gold */
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
  }
  80% {
    transform: translateY(-100px) scale(1.5); /* Hold */
    color: #fbbf24;
    filter: drop-shadow(0 0 30px rgba(0, 242, 254, 0.8));
    opacity: 1;
  }
  95% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0; /* Fade out at end */
  }
  100% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
}

@keyframes liberation-rise {
  0%,
  20% {
    transform: translateY(10px) scale(0.8);
    color: #ef4444;
    opacity: 0; /* REMAIN INVISIBLE while in the crowd */
    filter: grayscale(0.8);
  }
  30% {
    opacity: 0.7; /* Start fading in AS it rises */
  }
  40% {
    transform: translateY(-80px) scale(1.2); /* Break free */
    color: #ef4444;
    opacity: 1; /* Fully visible only after breaking free */
    filter: grayscale(0);
    box-shadow: none;
  }
  50% {
    transform: translateY(-100px) scale(1.5); /* Fly high */
    color: #fbbf24; /* Turn Gold */
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
  }
  80% {
    transform: translateY(-100px) scale(1.5); /* Hold */
    color: #fbbf24;
    filter: drop-shadow(0 0 30px rgba(0, 242, 254, 0.8));
    opacity: 1;
  }
  95% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0; /* Fade out at end */
  }
  100% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
}

@keyframes liberation-rise {
  0% {
    transform: translateY(10px) scale(0.8);
    color: #ef4444;
    opacity: 0;
    filter: grayscale(0.8);
  }
  10% {
    opacity: 0; /* Hold invisible slightly longer */
  }
  50% {
    transform: translateY(-80px) scale(1.2); /* Break free */
    color: #ef4444;
    opacity: 1; /* Fully visible here (4 seconds = 50% of 8s) */
    filter: grayscale(0);
    box-shadow: none;
  }
  60% {
    transform: translateY(-100px) scale(1.5); /* Fly high + Gold */
    color: #fbbf24;
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8));
  }
  85% {
    transform: translateY(-100px) scale(1.5); /* Hold */
    color: #fbbf24;
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(0, 242, 254, 0.8));
  }
  95% {
    transform: translateY(-100px) scale(1.5);
    opacity: 0; /* Fade out */
  }
  100% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
}

/* FINAL POLISH: Mob Mist Effect */
.mob-group {
  animation: mob-mist-fade 8s infinite ease-in-out;
}

@keyframes mob-mist-fade {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  5% {
    opacity: 1;
    filter: blur(0px);
  }
  45% {
    opacity: 1;
    filter: blur(0px);
  }
  60% {
    opacity: 0.4;
    filter: blur(3px);
  }
  80%,
  100% {
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes zoomUpPop {
  from {
    transform: scale(0.5) translateY(50px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(150px);
    opacity: 1;
  } /* Offset down by 150px */
}

/* CORRECTIVE FIX: Lower Certificate Position */
.certificate-container {
  padding-top: 15vh !important; /* Force push down by 15% of viewport height */
  align-items: flex-start !important; /* Start from top (plus padding) instead of center */
}

@keyframes zoomUpPop {
  from {
    transform: scale(0.5) translateY(50px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  } /* Reset translate, rely on container padding */
}

/* Law 6: Early Rising & Sleep Theme - Night to Morning Gradient */
.theme-law6 .bg-decoration {
  background: linear-gradient(
    to bottom,
    #0f172a 0%,
    #1e293b 30%,
    #4f46e5 60%,
    #f59e0b 85%,
    #fff7ed 100%
  );
}

.theme-law6 .blob-1 {
  background: #3730a3;
  opacity: 0.6;
} /* Indigo blob */
.theme-law6 .blob-2 {
  background: #fbbf24;
  opacity: 0.4;
  bottom: 10%;
} /* Amber blob for morning */

/* Law 6 Hero - Night Sky */
.law6-hero {
  background: transparent;
  color: #fff;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.law6-hero .chapter-number {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #cbd5e1;
}

.law6-hero .hero-icon-wrap {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.4); /* Moon glow */
}

/* Sleep Cycle Visualization (90 minutes) */
.sleep-cycle-container {
  background: #1e293b;
  border-radius: 1rem;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.sleep-wave {
  position: relative;
  height: 100px;
  width: 100%;
  margin-top: 2rem;
}

.wave-path {
  stroke: #818cf8;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: waveDraw 4s ease-out forwards;
}

.cycle-label {
  position: absolute;
  bottom: 10px;
  font-size: 0.8rem;
  color: #94a3b8;
}
.cycle-label.rem {
  left: 20%;
  color: #fbbf24;
}
.cycle-label.non-rem {
  left: 70%;
  color: #818cf8;
}

@keyframes waveDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Morning Sun Section - Bright Transition */
.morning-section {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9),
    rgba(254, 252, 232, 1)
  );
  border-top: 4px solid #f59e0b;
  padding-top: 2rem;
  margin-top: 4rem;
  border-radius: 1rem 1rem 0 0;
}

.sun-icon {
  font-size: 3rem;
  color: #f59e0b;
  animation: sunRise 3s ease-out forwards;
  display: block;
  margin: 0 auto 1rem;
}

@keyframes sunRise {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Checklist specific for Morning */
.morning-checklist li {
  background: rgba(251, 191, 36, 0.1);
  border-left: 4px solid #f59e0b;
}

/* --- Chapter 5: Live As Yourself (Aurora) Theme --- */
.theme-law5 {
  background-color: #f8fafc;
}

.law5-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #fefce8 100%);
  border-left: 8px solid #0ea5e9;
  padding: 3rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  margin-bottom: 3rem;
  color: #0f172a;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.law5-hero .chapter-badge {
  background: #0ea5e9;
  color: white;
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 1rem;
}

.law5-hero .hero-icon-wrap {
  font-size: 2.5rem;
  color: #0ea5e9;
  margin-bottom: 1rem;
}

.law5-summary {
  background: linear-gradient(to right, #f0f9ff, #e0f2fe);
  border: 2px solid #0ea5e9;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}

.law5-summary .summary-title {
  text-align: center;
  font-weight: bold;
  color: #0369a1;
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
}

/* Aurora Animation */
.aurora-spirit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, rgba(224, 242, 254, 0.1));
}

.spirit-particle {
  position: absolute;
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.4) 0%,
    rgba(56, 189, 248, 0) 70%
  );
  border-radius: 50%;
  bottom: -150px;
  animation-name: spiritFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spiritFloat {
  0% {
    transform: translateY(0) scale(1) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(-50vh) scale(1.5) translateX(20px);
    opacity: 0.4;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120vh) scale(1) translateX(-20px);
    opacity: 0;
  }
}

/* --- Chapter 6: Sleep and Waking Theme (Light) --- */
.law6-hero-light {
  background: linear-gradient(135deg, #f0f9ff 0%, #fef3c7 100%);
  padding: 4rem 3rem;
  border-radius: 24px;
  text-align: center;
  margin-bottom: 3rem;
  color: #0f172a;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.law6-hero-icon {
  color: #fbbf24;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 10px rgba(251, 191, 36, 0.2));
}

.law6-line {
  margin: 1.5rem auto;
  width: 60px;
  background: #fbbf24;
  height: 4px;
  border-radius: 2px;
}

.law6-insight-box {
  background: #f0f9ff;
  padding: 1.5rem;
  border-left: 5px solid #38bdf8;
  margin: 2rem 0;
  border-radius: 8px;
}

.law6-insight-icon {
  color: #38bdf8;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.law6-spiritual-box {
  background: linear-gradient(to right, #f8fafc, #f1f5f9);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  border: 1px solid #e2e8f0;
}

.law6-check-card {
  background: #fffbeb;
  border: 2px solid #fde68a;
  padding: 1.5rem;
  border-radius: 16px;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.05);
}

.law6-cycle-number {
  color: #d97706;
  font-size: 1.25rem;
  font-weight: 800;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 50px;
  display: inline-block;
  margin: 0.5rem;
  border: 1px solid #fde68a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* Calculator specific styles */
.calc-title {
  color: #d97706;
  margin-bottom: 1rem;
}

.calc-description {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}

.law6-calc-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.cycle-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid #fde68a;
  background: white;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  color: #1e293b;
}

.cycle-btn:hover {
  background: #fef3c7;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.cycle-btn.active {
  background: #fde68a;
  color: #a16207;
}

#cycle-result {
  text-align: center;
  min-height: 100px;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}

.calc-placeholder {
  color: #94a3b8;
  font-style: italic;
}

.law6-tip-banner {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 12px;
  font-weight: bold;
  text-align: center;
  color: #475569;
  border: 1px solid #e2e8f0;
  margin: 2rem 0;
}

.law6-habit-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.law6-habit-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: white;
  padding: 1.2rem;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
  border: 1px solid #f1f5f9;
}

.law6-habit-item:hover {
  transform: translateX(10px);
  border-color: #fbbf24;
}

.law6-step-num {
  background: #fde68a;
  color: #a16207;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.law6-step-num.alt {
  background: #fecaca;
  color: #991b1b;
}

.law6-habit-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}

.law6-summary-box {
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  margin: 3rem 0;
}

.law6-summary-title {
  text-align: center;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
}

/* --- Law 6 Premium Styles: Night to Morning --- */
.law6-special-glow {
  text-align: center;
  margin-top: 4rem;
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #ffffff, #fff7ed);
  border-radius: 60px 60px 0 0;
  border-top: 5px solid #fdba74;
}

/* --- Law 7: Law of Sowing Seeds --- */
.law7-hero {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #fef9c3 100%);
  padding: 4rem 3rem;
  border-radius: 24px;
  text-align: center;
  margin-bottom: 3rem;
  color: #166534;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(22, 101, 52, 0.05);
}

.law7-hero-icon {
  font-size: 3.5rem;
  color: #22c55e;
  margin-bottom: 1.5rem;
  display: inline-block;
  animation: bounce-slow 3s ease-in-out infinite;
}

@keyframes bounce-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.law7-seed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.law7-seed-card {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  border: 1px solid #f0fdf4;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  text-align: center;
}

.law7-seed-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.1);
  border-color: #86efac;
}

.law7-seed-icon {
  font-size: 2.5rem;
  color: #15803d;
  margin-bottom: 1rem;
}

.law7-growth-path {
  position: relative;
  padding: 2rem 0;
}

.law7-growth-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: #f8fafc;
  padding: 2rem;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  border-left: 5px solid #22c55e;
  transition: transform 0.3s ease;
}

.law7-growth-step:hover {
  transform: translateX(10px);
  background: #f0fdf4;
}

.law7-step-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: #15803d;
  opacity: 0.3;
}

.law7-summary-box {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 24px;
  padding: 3rem 2rem;
  margin: 4rem 0;
  position: relative;
}

.law7-summary-title {
  text-align: center;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}

.law7-highlight {
  color: #15803d;
  font-weight: bold;
  background: linear-gradient(transparent 70%, #dcfce7 70%);
}

.law7-final-glow {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #ffffff, #f0fdf4);
  border-radius: 40px;
  border: 2px dashed #86efac;
  margin-top: 4rem;
}

/* Presence Card / Mist Reveal for Important Point */
.law7-presence-card {
  margin: 4rem 0;
  padding: 4rem 2rem;
  background: white;
  border-radius: 30px;
  border: 1px solid #f0fdf4;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 50px rgba(21, 128, 61, 0.05);
  overflow: hidden;
}

/* Mist Overlay */
.law7-mist-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  z-index: 10;
  transition:
    opacity 2s ease,
    visibility 2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.law7-mist-text {
  font-weight: 800;
  color: #86efac;
  letter-spacing: 0.5em;
  opacity: 0.5;
  transition: letter-spacing 2s ease;
}

.law7-presence-card.revealed .law7-mist-overlay {
  opacity: 0;
  visibility: hidden;
}

.law7-presence-card.revealed .law7-mist-text {
  letter-spacing: 2em;
}

.law7-presence-content {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 1.5s ease 0.5s,
    transform 1.5s ease 0.5s;
}

.law7-presence-card.revealed .law7-presence-content {
  opacity: 1;
  transform: scale(1);
}

.law7-presence-title {
  display: inline-block;
  color: #15803d;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #86efac;
}

.law7-presence-main {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #166534;
  font-weight: 800;
}

.law7-presence-sub {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: #15803d;
  line-height: 1.8;
  opacity: 0.9;
}

/* Reverting Law 7 animations to simplify */

.law7-h1 {
  color: #166534;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.law7-h1-span {
  color: #15803d;
}

.law7-hero-p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.law7-section {
  margin-top: 4rem;
}

.law7-h2 {
  border-bottom: 2px solid #86efac;
  padding-bottom: 0.5rem;
  color: #15803d;
}

.law7-info-box {
  background: #f0fdf4;
  padding: 2rem;
  border-radius: 20px;
  margin: 2rem 0;
}

.law7-info-title {
  font-weight: bold;
  font-size: 1.1rem;
  color: #166534;
  text-align: center;
}

.law7-action-box {
  border-left: 5px solid #22c55e;
  background: #f8fafc;
  padding: 1.5rem;
  margin: 2rem 0;
}

.law7-action-title {
  font-weight: bold;
  color: #15803d;
  margin-bottom: 0.5rem;
}

.law7-action-main {
  font-size: 1.3rem;
  font-weight: 900;
}

.law7-step-title {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.law7-step-desc {
  font-size: 0.95rem;
}

.law7-warning-box {
  text-align: center;
  padding: 2.5rem;
  background: #fffbeb;
  border-radius: 30px;
  border: 2px solid #fef3c7;
  margin: 2rem 0;
}

.law7-warning-icon {
  font-size: 2rem;
  color: #f59e0b;
  margin-bottom: 1rem;
}

.law7-warning-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #b45309;
  line-height: 1.6;
}

.law7-warning-p {
  font-size: 0.95rem;
  margin-top: 1rem;
}

.law7-rule-box {
  text-align: center;
  padding: 1.5rem;
  background: #f0fdf4;
  border-radius: 15px;
  margin: 2rem 0;
}

.law7-rule-text {
  font-size: 1.4rem;
  font-weight: 900;
  color: #15803d;
}

.law7-flex-container {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.law7-love-card {
  flex: 1;
  min-width: 250px;
  background: #fff1f2;
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid #fecdd3;
}

.law7-love-title {
  font-weight: bold;
  color: #e11d48;
  margin-bottom: 1rem;
}

.law7-love-main {
  font-size: 1.1rem;
  line-height: 1.8;
}

.law7-love-highlight {
  font-size: 1.5rem;
  font-weight: 900;
  color: #be123c;
}

.law7-text-container {
  flex: 1;
  min-width: 250px;
}

.law7-message-box {
  text-align: center;
  border: 2px solid #fbbf24;
  border-radius: 15px;
  padding: 1.5rem;
}

.law7-message-title {
  font-weight: bold;
  color: #d97706;
  margin: 0;
}

.law7-message-sub {
  margin-top: 0.5rem;
}

.law7-mt-1-5 {
  margin-top: 1.5rem;
}

.law7-final-text-1 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #15803d;
  margin-bottom: 1rem;
}

.law7-final-text-2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ea580c;
  margin-top: 1.5rem;
}

/* --- Essence 03: Intro Impact Styles --- */
.theme-law5 .intro-block {
  margin: 4rem 0;
  text-align: center;
}

.theme-law5 .intro-impact {
  font-size: 1.5rem;
  color: #0c4a6e;
  font-weight: 600;
  line-height: 1.8;
  padding: 3rem 2rem;
  background: linear-gradient(
    135deg,
    rgba(240, 249, 255, 0.8) 0%,
    rgba(224, 242, 254, 0.4) 100%
  );
  backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  box-shadow: 0 20px 50px rgba(14, 165, 233, 0.05);
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.theme-law5 .intro-impact::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 8rem;
  color: rgba(14, 165, 233, 0.1);
  font-family: serif;
}

.theme-law5 .reflection-quote {
  font-family: "BIZ UDPMincho", "Noto Serif JP", serif;
  font-size: 1.8rem;
  color: #0369a1;
  margin: 3rem 0;
  padding: 0 1rem;
  line-height: 1.6;
  font-style: italic;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.theme-law5 .intro-footer {
  font-size: 1.1rem;
  color: #475569;
  letter-spacing: 0.05em;
}

.theme-law5 .intro-footer strong {
  color: #0369a1;
  background: linear-gradient(transparent 60%, rgba(125, 211, 252, 0.4) 60%);
  padding: 0 0.4rem;
  border-radius: 4px;
}

/* Enhancing Content Block Titles */
.theme-law5 .content-block h2 {
  font-size: 1.8rem;
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.theme-law5 .content-block h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #7dd3fc, transparent);
  border-radius: 2px;
}

.theme-law5 .vow-action-container {
  background: rgba(240, 249, 255, 0.5);
  border: 1px solid rgba(125, 211, 252, 0.3);
  padding: 2.5rem;
  border-radius: 24px;
  margin: 3rem 0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.05);
}
/* --- Essence 04: Sleep and Light Specific Styles --- */
.law6-spiritual-note {
  margin-bottom: 1rem;
  color: #64748b;
  font-size: 0.9rem;
}

.law6-spiritual-icon {
  color: #94a3b8;
  margin-right: 5px;
}

.law6-spiritual-space {
  margin-top: 1.5rem;
}

.law6-message-box-center {
  text-align: center;
  margin-top: 2rem;
}

.law6-message-green {
  font-weight: bold;
  font-size: 1.2rem;
  color: #059669;
}

.law6-final-message {
  margin-top: 3rem;
}

.law6-message-orange {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ea580c;
}

.law6-advice-text {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Calculator Result Styles */
.law6-calc-result-title {
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 0.8rem;
}

.law6-calc-result-flex {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.law6-calc-result-item {
  text-align: center;
}

.law6-calc-result-desc {
  font-size: 0.75rem;
  color: #64748b;
}
/* Storytelling Enhancements for Essence 04 */
.law6-lead-section {
  text-align: center;
  margin: 3rem 0;
  padding: 0 1rem;
}

.law6-lead-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: #1e293b;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.law6-sub-lead {
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 2rem;
}

.law6-empathy-box {
  background: #f8fafc;
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 3rem;
  border: 2px dashed #cbd5e1;
  position: relative;
}

.law6-check-title {
  text-align: center;
  font-weight: bold;
  color: #475569;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.law6-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.law6-check-item {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #334155;
  font-weight: 500;
  border: 1px solid #f1f5f9;
}

.law6-check-icon {
  color: #cbd5e1; /* Neutral check color */
  font-size: 1.2rem;
  transition: color 0.3s;
}

.law6-check-item {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column; /* Allow stacking for answer */
  align-items: flex-start; /* Changed from center for stack */
  justify-content: center;
  gap: 0.5rem;
  color: #334155;
  font-weight: 500;
  border: 1px solid #f1f5f9;
  cursor: pointer; /* Clickable */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
  min-height: 80px; /* Ensure space */
  position: relative;
  overflow: hidden;
}

.law6-check-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(14, 165, 233, 0.1);
  border-color: #7dd3fc;
}

.law6-check-item.active {
  background: #f0f9ff;
  border-color: #38bdf8;
}

.law6-check-item.active .law6-check-icon {
  color: #38bdf8; /* Active check color */
}

/* Question Part */
.law6-check-question {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
}

/* Answer Part (Hidden by default) */
.law6-check-answer {
  display: none;
  font-size: 0.9rem;
  color: #0369a1;
  font-weight: bold;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #bae6fd;
  width: 100%;
  animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mb-half {
  margin-bottom: 0.5rem;
}

/* --- Essence 05: Let It Be (Flow) Theme --- */
.hero-essence-05 {
  background: linear-gradient(135deg, #e0f2fe 0%, #ccfbf1 100%);
  border-left: 8px solid var(--essence-05);
  padding: 3rem;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  color: #0f172a;
}

.hero-essence-05 h1 {
  color: #0e7490;
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.hero-essence-05 p {
  color: #334155;
  font-weight: 500;
  font-size: 1.1rem;
}

/* Flowing Atmosphere (Leaves & Feathers) */
.flowing-atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.flow-item {
  position: absolute;
  opacity: 0.6;
  filter: blur(1px);
}

.flow-item.leaf {
  color: #86efac; /* Soft Green */
  font-size: 1.5rem;
}

.flow-item.feather {
  color: #bae6fd; /* Soft Blue */
  font-size: 1.2rem;
}

/* Positions for flow items */
.flow-item.x1 {
  top: 10%;
  left: 10%;
  animation: drift 15s infinite linear;
}
.flow-item.x2 {
  top: 30%;
  left: 20%;
  animation: drift 18s infinite linear;
  animation-delay: -5s;
}
.flow-item.x3 {
  top: 60%;
  left: 80%;
  animation: drift 20s infinite linear;
  animation-delay: -2s;
}
.flow-item.x4 {
  top: 80%;
  left: 40%;
  animation: drift 12s infinite linear;
  animation-delay: -8s;
}
.flow-item.x5 {
  top: 15%;
  left: 85%;
  animation: drift 16s infinite linear;
  animation-delay: -10s;
}
.flow-item.x6 {
  top: 50%;
  left: 50%;
  animation: drift 22s infinite linear;
  animation-delay: -4s;
}
.flow-item.x7 {
  top: 90%;
  left: 10%;
  animation: drift 14s infinite linear;
  animation-delay: -1s;
}
.flow-item.x8 {
  top: 25%;
  left: 60%;
  animation: drift 19s infinite linear;
  animation-delay: -7s;
}

@keyframes drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translate(100px, 50px) rotate(360deg);
    opacity: 0;
  }
}

/* --- Interactive Script Scene --- */
.interactive-script-scene {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  margin: 3rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* --- Cinematic Grading Theme (The Director's Eye) --- */

.director-viewfinder-wrapper {
  position: relative;
  margin: 4rem auto;
  max-width: 760px; /* Slightly wider for film strips */
  background: #000;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  font-family: "Kaisei Opti", serif; /* Inheriting the Pro Font */
  padding: 0 30px; /* Space for film strips */
}

/* Vertical Film Strips */
.film-strip-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  background: #111;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}
.strip-left {
  left: 0;
}
.strip-right {
  right: 0;
}

.film-perforation {
  width: 16px;
  height: 12px;
  background: #333; /* Dark gray holes */
  margin: 8px 0;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Viewfinder UI */
.vf-ui {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(255, 255, 255, 0.5);
  border-style: solid;
  z-index: 20;
  pointer-events: none;
}
.vf-tl {
  top: 20px;
  left: 20px;
  border-width: 2px 0 0 2px;
}
.vf-tr {
  top: 20px;
  right: 20px;
  border-width: 2px 2px 0 0;
}
.vf-bl {
  bottom: 20px;
  left: 20px;
  border-width: 0 0 2px 2px;
}
.vf-br {
  bottom: 20px;
  right: 20px;
  border-width: 0 2px 2px 0;
}

.vf-rec-indicator {
  position: absolute;
  top: 25px;
  right: 30px;
  color: #ef4444;
  font-family: sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 20;
}

.rec-dot {
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
  animation: blink-rec 1.5s infinite;
}

@keyframes blink-rec {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Viewport & Grading */
.cinematic-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 1; /* CinemaScope */
  background: #1a1a1a;
  overflow: hidden;
}

.cinematic-content {
  width: 100%;
  height: 100%;
  position: relative;
  /* Initial State: Tragedy (Graded Cold/Desaturated) - Adjusted for Visibility */
  filter: grayscale(60%) contrast(95%) brightness(100%) sepia(5%)
    hue-rotate(190deg);
  /* Transition for the filter shift */
  transition:
    filter 3s ease-out,
    opacity 1s ease,
    transform 3s ease;
}

/* 1. MIST PHASE: Fade out + Blur + Brightness (White Mist) */
.director-viewfinder-wrapper.active-mist .cinematic-content {
  filter: grayscale(100%) blur(15px) brightness(300%); /* Blind with white mist */
  opacity: 0;
  transform: scale(1.05); /* Slight drift */
  transition: all 1.5s ease-in;
}

/* 2. GOLD PHASE: Reveal (Slow Fade In) */
.director-viewfinder-wrapper.is-graded .cinematic-content {
  /* The Golden Masterpiece Grading */
  filter: grayscale(0%) contrast(110%) brightness(110%) sepia(0%)
    hue-rotate(0deg);
  opacity: 1;
  transition:
    filter 3s ease-out,
    opacity 3s ease-in; /* Slow fade in */
}

.scene-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  transition: opacity 0.1s; /* Instant swap behind the mist */
}

/* Content Tragic */
.layer-tragedy {
  background: radial-gradient(
    circle at center,
    #334155 0%,
    #0f172a 100%
  ); /* Slightly lighter center for text contrast */
  color: #ffffff !important; /* Force White */
  z-index: 2;
  opacity: 1;
}

/* Content Masterpiece */
.layer-masterpiece {
  background: radial-gradient(
    circle at center,
    #fff7ed 0%,
    #fbbf24 60%,
    #f59e0b 100%
  );
  color: #78350f !important;
  z-index: 1; /* Behind initially? No, let's crossfade opacity */
  opacity: 0;
  z-index: 3; /* On top, but hidden by opacity */
}

/* Text Styles */
.scene-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.9;
  color: #ffffff !important;
}
.scene-title {
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0.6rem 2rem;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3); /* Legibility overlay */
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.scene-text {
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 700;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Transition Logic */
.director-viewfinder-wrapper.is-graded .layer-tragedy {
  opacity: 0;
}
.director-viewfinder-wrapper.is-graded .layer-masterpiece {
  opacity: 1;
}

/* Controls */
.director-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #000;
  border-top: 1px solid #333;
  position: relative;
  z-index: 15;
}

.director-comment-box {
  margin-top: 1.5rem;
  color: #888;
  font-size: 0.9rem;
  font-family: "Kaisei Opti", serif;
  letter-spacing: 0.1em;
  border-top: 1px solid #333;
  padding-top: 1rem;
  width: 80%;
  text-align: center;
  transition: color 1s ease;
}

.is-graded .director-comment-box {
  color: #fbbf24; /* Gold text */
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.action-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.8rem 2rem;
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #fff;
  color: #000;
}

.is-graded .action-btn {
  opacity: 0;
  pointer-events: none;
}

.control-hint {
  color: #666;
  font-size: 0.8rem;
  margin-top: 0.8rem;
  transition: opacity 0.5s;
}

.is-graded .control-hint {
  opacity: 0;
}

/* Sidebar Advice Text */
.sidebar-advice p {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Essence 05 Summary Box */
.summary-essence-05 {
  background: #f0fdfa; /* Very light teal */
  border-left: 5px solid var(--essence-05);
}

.list-icon-essence-05 {
  color: #0d9488; /* Teal 600 for visibility */
  margin-right: 0.5rem;
}

/* --- Genki Source Page Styles --- */
.logo-link {
  text-decoration: none;
  color: inherit;
}

.genki-section-title {
  text-align: left;
}

.genki-underline {
  margin: 0;
  width: 100px;
}

.genki-content {
  margin-top: 2rem;
}

.mb-md {
  margin-bottom: 1.5rem;
}

.mt-lg {
  margin-top: 3rem;
}

.fountain-caption {
  text-align: center;
  font-size: 0.8rem;
  color: #94a3b8;
  margin-top: 1rem;
}

.profile-placeholder {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  aspect-ratio: 1/1;
  font-size: 1.5rem;
}

.site-footer {
  text-align: center;
  padding: 2rem;
  background: #e2e8f0;
  color: #475569;
}

/* --- Crystal & Ink Theme (Genki Source Redesign) --- */

/* 1. The Ink (Typography) */
.ink-text {
  /* font-family: "Kaisei Opti", serif; Removed per user request - Body text is Sans */
  color: #334155;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* Apply Serif only to Headings and Special Elements */
.ink-text h3,
.ink-title,
.ink-accent {
  font-family: "Kaisei Opti", serif;
}

.ink-title {
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding-bottom: 0.5rem;
}

/* 2. The Crystal (Glassmorphism Containers) */
.crystal-container {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px -1px rgba(0, 0, 0, 0.02),
    inset 0 0 20px rgba(255, 255, 255, 0.5); /* Inner glow */
  border-radius: 24px;
  padding: 4rem 3rem;
  margin-bottom: 4rem;
  overflow: hidden;
}

.crystal-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

/* 3. Narrative Phases */
.phase-night {
  /* Minimalist Night: Just slightly tighter, more intimate */
  text-align: center;
  max-width: 680px;
  margin: 0 auto 5rem;
}

.moon-icon {
  font-size: 2rem;
  color: #94a3b8; /* Muted cool gray */
  margin-bottom: 2rem;
  opacity: 0.8;
  filter: drop-shadow(0 0 5px rgba(148, 163, 184, 0.3));
}

.phase-dawn {
  position: relative;
  padding-left: 2rem;
  border-left: 1px solid #e2e8f0; /* Thin guide line */
  margin: 4rem 0 4rem 2rem;
}

.dawn-icon {
  position: absolute;
  left: -1rem; /* Centered on the line */
  top: 0;
  background: #fff;
  color: #cbd5e1;
  padding: 0.5rem 0; /* Clear the line */
}

/* 4. Zen Ripples (Fountain) */
.zen-fountain-wrapper {
  position: relative;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 4rem 0;
}

.zen-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #cbd5e1; /* Silver */
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: zenRipple 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.zen-ripple:nth-child(1) {
  width: 60px;
  height: 60px;
  animation-delay: 0s;
}
.zen-ripple:nth-child(2) {
  width: 120px;
  height: 120px;
  animation-delay: 1.5s;
}
.zen-ripple:nth-child(3) {
  width: 180px;
  height: 180px;
  animation-delay: 3s;
}

@keyframes zenRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
    border-width: 2px;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
    border-width: 0px;
  }
}

.drop-icon {
  font-size: 2.5rem;
  color: #64748b; /* Solid slate */
  z-index: 10;
  position: relative;
  background: #fff;
  border-radius: 50%;
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.zen-caption {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: #94a3b8;
  font-family: "Kaisei Opti", serif;
  z-index: 10;
}

/* Door Trigger Highlight (Ink Style) */
.door-trigger-ink {
  font-weight: bold;
  border-bottom: 2px solid #cbd5e1;
  padding-bottom: 2px;
  transition: all 0.3s;
  cursor: pointer;
}
.door-trigger-ink:hover {
  border-color: #64748b;
  color: #1e293b;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .crystal-container {
    padding: 2rem 1.5rem;
  }
  .phase-dawn {
    margin-left: 1rem;
    padding-left: 1.5rem;
  }
}

/* =========================================
   Gemini風レイアウト & アプリランチャー
   ========================================= */

/* 1. レイアウト基盤（サイドバー左固定メイン中央） */
body.gemini-layout {
  background-color: #ffffff;
}

body.gemini-layout .layout-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}

/* サイドバー（左固定） */
body.gemini-layout .sidebar {
  width: 280px; /* 固定幅 */
  min-width: 280px;
  height: calc(100vh - 80px); /* ナビの高さを引く */
  position: sticky;
  top: 80px;
  margin: 0;
  padding: 2rem 1.5rem;
  overflow-y: auto;

  /* デザイン */
  background: #f8fafc; /* 薄いグレー */
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: none;
  order: -1; /* Flexboxで左へ */
}

/* サイドバー内ウィジェットのリセット */
body.gemini-layout .sidebar-widget {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  margin-bottom: 2rem;
}

/* メインコンテンツ（中央寄せ余白あり） */
body.gemini-layout .main-content {
  flex: 1; /* 残りの幅を使う */
  padding: 2rem 4rem;
  background: #ffffff;
}

/* 記事の中央寄せ制限 */
body.gemini-layout .main-content section,
body.gemini-layout .main-content article {
  max-width: 800px;
  margin: 0 auto;
}

/* アニメーション待ち強制表示（ちらつき防止） */
body.gemini-layout .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* レスポンシブ対応（スマホ） */
@media (max-width: 768px) {
  body.gemini-layout .layout-container {
    flex-direction: column;
  }

  body.gemini-layout .sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    position: static;
    order: 2; /* スマホではメインの下に */
    border-right: none;
    border-top: 1px solid #eee;
  }

  body.gemini-layout .main-content {
    padding: 1.5rem;
    order: 1;
  }
}

/* 2. アプリランチャー（グリッドメニュー） */
.launcher-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #5f6368;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  margin-left: 1rem;
}

.launcher-btn:hover,
.launcher-btn.active {
  background-color: rgba(0, 0, 0, 0.08); /* ホバー時の薄いグレー */
}

.app-launcher-menu {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 320px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  z-index: 2000;

  /* 表示アニメーション用 */
  display: none;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  transform-origin: top right;
}

.app-launcher-menu.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #444746;
  padding: 1rem 0.5rem;
  border-radius: 12px;
  transition: background 0.2s;
  text-align: center;
}

.app-item:hover {
  background-color: #f0f7ff;
}

.app-icon-wrap {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.app-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.nav-right {
  display: flex;
  align-items: center;
}
/* ==========================================
   NAVIGATION DROPDOWN (Category Bento Box)
   ========================================== */
.nav-category-dropdown {
  position: relative;
  display: inline-block;
}

.nav-category-dropdown.is-active .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-content {
  visibility: hidden;
  position: absolute;
  right: -10px;
  top: 150%;
  /* 検 繧ｰ繝ｩ繧ｹ繝｢繝ｼ繝輔ぅ繧ｺ繝繧貞ｼｷ蛹厄ｼ医☆繧翫ぎ繝ｩ繧ｹ縺ｮ騾乗・諢溘ｒ繧｢繝・・・・*/
  background-color: rgba(255, 255, 255, 0.85); 
  backdrop-filter: blur(25px) saturate(120%);
  min-width: 290px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  border: 1px solid rgba(140, 153, 134, 0.2);
  z-index: 1000;
  opacity: 0;
  transform: translateY(15px) scale(0.98);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown-content::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 20px;
  width: 14px;
  height: 14px;
  /* 閭梧勹縺ｮ騾乗・蠎ｦ縺ｫ蜷医ｏ縺帙ｋ */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(25px);
  transform: rotate(45deg);
  border-left: 1px solid rgba(140, 153, 134, 0.2);
  border-top: 1px solid rgba(140, 153, 134, 0.2);
  box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.02);
}

.dropdown-scroll-area {
  max-height: 65vh;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

/* Scrollbar styling for dropdown */
.dropdown-scroll-area::-webkit-scrollbar {
  width: 6px;
}
.dropdown-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}
.dropdown-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(140, 153, 134, 0.3);
  border-radius: 10px;
}

.dropdown-scroll-area a.app-tile {
  color: var(--text-color) !important;
  padding: 0.8rem 0.2rem !important;
  text-decoration: none;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: auto;
  min-height: 85px;
  position: relative;
  z-index: 1;
}

/* 繝帙ヰ繝ｼ譎ゅ・閭梧勹繧貞庄諢帙＞縺吶ｊ繧ｬ繝ｩ繧ｹ縺ｫ */
.dropdown-scroll-area a.app-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown-scroll-area a.app-tile:hover {
  background-color: transparent;
  transform: translateY(-4px); /* 繝昴Φ繝・→荳翫↓縺ｯ縺ｭ繧・*/
}

.dropdown-scroll-area a.app-tile:hover::before {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}

.dropdown-scroll-area .app-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Icon color inside the colorful circle */
  font-size: 1.2rem;
  /* 検 螟画焚繧剃ｽｿ縺｣縺ｦ繧ｰ繝ｩ繝・・繧ｷ繝ｧ繝ｳ縺ｨ蜈会ｼ医す繝｣繝峨え・峨ｒ逕滓・ 検 */
  background: var(--app-color);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown-scroll-area a.app-tile:hover .app-icon {
  transform: scale(1.15) rotate(8deg);
  /* 繝帙ヰ繝ｼ譎ゅ・縺輔ｉ縺ｫ繝斐き繝・→蜈峨ｋ */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), inset 0 2px 6px rgba(255, 255, 255, 0.9);
}

.dropdown-scroll-area .app-name {
  font-size: 0.75rem !important;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   Share Bar Styles
   ========================================= */
.share-bar-container {
    text-align: center;
    margin: 4rem auto 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 400px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}

.share-bar-container.share-visible {
    opacity: 1;
    transform: translateY(0);
}

.share-bar-title {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: bold;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.share-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(100, 116, 139, 0.08); /* 淡いグレーの背景 */
    color: #64748b; /* 落ち着いたグレーのアイコン色 */
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, background 0.3s, color 0.3s;
    border: 1px solid rgba(100, 116, 139, 0.15);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.share-btn:hover {
    transform: translateY(-5px) scale(1.1);
    color: white;
    border-color: transparent;
}

/* 普段は色無し、hover時（マグネットで吸い付いた瞬間）に色付きになる */
.share-x:hover { background: #0f1419; box-shadow: 0 8px 15px rgba(15, 20, 25, 0.3); }
.share-fb:hover { background: #1877f2; box-shadow: 0 8px 15px rgba(24, 119, 242, 0.3); }
.share-line:hover { background: #06c755; box-shadow: 0 8px 15px rgba(6, 199, 85, 0.3); }
.share-copy:hover { background: #64748b; box-shadow: 0 8px 15px rgba(100, 116, 139, 0.3); }

.copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10000;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}