/* =========================================
   Bói Tarot Chuyên Sâu – CSS (1 Lá)
========================================= */

/* Palette riêng */
:root {
  --td-bg: #090813;
  --td-text: #f5e9ff;
  --td-white: #fff;
  --td-purple-1: #8b5cf6;
  --td-purple-2: #6d28d9;
  --td-accent: #f97316;
  --td-soft: rgba(139, 92, 246, 0.45);
  --td-shadow: rgba(0, 0, 0, 0.55);
}

/* Scope tổng */
#tarot-deep-app.tarot-daily-theme {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 16px 40px;
  color: var(--td-text);
}

/* Hero */
#tarot-deep-app .td-hero {
  text-align: center;
  margin: 6px 0 16px;
}

#tarot-deep-app .td-hero-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 10px 30px var(--td-soft);
}

#tarot-deep-app .td-hero-sub {
  font-size: 14px;
  opacity: 0.92;
  letter-spacing: 0.08em;
}

/* Ô nhập câu hỏi */
#tarot-deep-app .td-question-wrap {
  max-width: 640px;
  margin: 18px auto 10px;
}

#tarot-deep-app .td-question-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

#tarot-deep-app .td-question-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid rgba(196, 166, 255, 0.9);
  background: #fff;
  color: #111827;
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(108, 53, 255, 0.18);
}

#tarot-deep-app .td-question-input::placeholder {
  color: #9ca3af;
}

#tarot-deep-app .td-question-hint {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.9;
}

/* Controls */
#tarot-deep-app .td-controls {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 10px;
  max-width: 640px;
  margin: 10px auto 6px;
}

#tarot-deep-app .td-btn-cta {
  width: min(640px, 86vw);
  box-sizing: border-box;
  height: 54px;
  padding: 0 26px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(180deg, var(--td-purple-1), var(--td-purple-2));
  box-shadow: 0 14px 32px var(--td-shadow),
    inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

#tarot-deep-app .td-btn-cta:disabled {
  filter: grayscale(1) brightness(0.85);
  cursor: not-allowed;
}

/* Step text */
#tarot-deep-app .td-step-text {
  text-align: center;
  margin: 10px 0 8px;
  font-size: 15px;
  opacity: 0.95;
}

/* Nền không tràn ngang */
body,
#tarot-deep-app {
  overflow-x: hidden;
}

/* Mobile */
@media (max-width: 480px) {
  #tarot-deep-app.tarot-daily-theme {
    padding: 20px 8px 32px;
  }

  #tarot-deep-app .td-hero-title {
    font-size: 22px;
  }
}

/* Nút xem ý nghĩa trong inline-style JS đã scope bằng #tarot-deep-app nên không cần lặp lại nhiều */
.td-meaning-body{
  white-space: pre-line;
}
.td-unlock-wrap{
  max-width:900px;
  margin:0 auto 10px;
  padding:18px 20px;
  border-radius:18px;
  background:linear-gradient(135deg,#2e0b57,#4c1d95);
  color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  text-align:center;
}
.td-unlock-text{
  font-size:15px;
  line-height:1.7;
  margin-bottom:14px;
}
.td-unlock-form{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
.td-code-input{
  min-width:220px;
  padding:10px 14px;
  border-radius:999px;
  border:none;
  outline:none;
  font-size:15px;
}
.td-btn-meaning{
  margin-top:4px;
  padding:12px 26px;
  border-radius:999px;
  border:none;

  /* Nút tím đồng màu nền khối */
  background:#5b21b6;              /* tím đậm, có thể đổi sang mã bạn thích */
  background-image:none;

  color:#fff;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
/* Khối form nhập mã code – thu nhỏ và căn giữa */
.td-unlock-form{
  max-width:620px;            /* độ rộng tối đa của cả input + nút */
  margin:18px auto 0 auto;
}

/* Ô nhập mã code nhỏ lại */
.td-code-input{
  width:100%;
  max-width:420px;            /* muốn nhỏ nữa thì giảm xuống 360 hoặc 320 */
  display:block;
  margin:0 auto 14px auto;
  padding:10px 16px;
  border-radius:999px;
  border:none;
  box-sizing:border-box;
}

.td-unlock-note{
  font-size:13px;
  opacity:.9;
}
@media (max-width:480px){
  .td-unlock-wrap{padding:14px 12px;}
  .td-code-input{width:100%;}
}
.td-code-input.td-code-error{
  border:2px solid #f97373;
  background:#fef2f2;
}
.td-code-input.td-code-ok{
  border:2px solid #22c55e;
  background:#ecfdf5;
}
/* ========================
   MOBILE TUNING – TAROT DEEP
   ======================== */
@media (max-width: 767px) {

  /* Khối câu hỏi + nút xào bài cùng 1 bề rộng, căn giữa */
  #tarot-deep-app .td-question-wrap,
  #tarot-deep-app .td-controls {
    width: 100%;
    max-width: 480px;      /* bề ngang “khung” – có thể đổi 420/460 tuỳ ý */
    margin-left: auto;
    margin-right: auto;
  }

  /* Ô nhập câu hỏi full khung */
  #tarot-deep-app .td-question-input {
    width: 100% !important;
    box-sizing: border-box;
    display: block;
  }

  /* Nút XÀO BÀI full khung & căn giữa */
  #tarot-deep-app .td-controls {
    display: flex;
    justify-content: center;
  }

  #tarot-deep-app #td-shuffle {
    width: 100% !important;   /* rộng bằng khung, tức là bằng ô câu hỏi */
    max-width: 100%;
    margin: 0;                /* xoá lệch phải nếu có margin cũ */
  }
}