/* ==========================================================================
   Sân khấu gieo quẻ (overlay toàn màn hình) · Đồng xu 3D · Màn kết quả
   Chỉ animate transform / opacity. Không ES modules, chạy qua file://.
   ========================================================================== */

/* ---------------- Hero mờ dần khi mở sân khấu ---------------- */
#view-home { transition: opacity 0.4s ease; }
#view-home.gq-hero-fade { opacity: 0; }

html.gq-open { overflow: hidden; }

/* ---------------- Sân khấu ---------------- */
.gq-stage {
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --d: clamp(90px, 13.6vw, 208px);
  --amber: #c98f2e;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  color: var(--text-1, #e8e2d4);
  background: #0e0c09;
  outline: none;
  animation: gq-in 0.4s ease both;
  font-feature-settings: "cv01", "cv02", "calt", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@keyframes gq-in { from { opacity: 0; } to { opacity: 1; } }

.gq-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------- PHẦN 3: Nền có không khí (dùng chung cho mọi màn) ---------------- */
.ambient-bg-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* 1. Nền: gradient dọc #0e0c09 đến #14110c; ánh ấm 80vmax tại 40% height; vignette tối ở 4 góc */
.ambient-bg-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 90% at 50% 50%, transparent 45%, rgba(6, 5, 4, 0.75) 80%, rgba(2, 2, 1, 0.95) 100%),
    radial-gradient(circle 80vmax at 50% 40%, rgba(201, 143, 46, 0.08) 0%, transparent 80%),
    linear-gradient(180deg, #0e0c09 0%, #14110c 100%);
  pointer-events: none;
}

/* 2. Vòng Bát Quái mờ phía sau xu: SVG tự vẽ (8 quái, nét 1px, #c98f2e độ đục 0.06-0.08), đường kính ~85vmin, xoay 300s/vòng */
/* Component nền Bát Quái duy nhất (.ambient-bagua-wrap) cho toàn site */
.ambient-bagua-wrap {
  position: absolute;
  left: 50%;
  top: clamp(200px, 25vh, 250px);
  width: 55vmin;
  height: 55vmin;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.25s ease;
}
@media (max-width: 600px) {
  .ambient-bagua-wrap {
    top: 190px;
    width: min(70vw, 340px);
    height: min(70vw, 340px);
  }
}
/* Khi mở sân khấu gieo quẻ: Tâm vòng Bát Quái khóa đúng 50dvh phía sau cụm xu */
html.gq-open .ambient-bagua-wrap {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  opacity: 1 !important;
}
/* Khi ở trang kết quả: Nằm sau khung quẻ, nhỏ gọn không tràn container */
body[data-route-view="view-result"] .ambient-bagua-wrap {
  width: min(50vmin, 380px);
  height: min(50vmin, 380px);
  top: clamp(210px, 34vh, 320px);
  opacity: 0.9 !important;
}
@media (max-width: 600px) {
  body[data-route-view="view-result"] .ambient-bagua-wrap {
    width: min(65vw, 280px);
    height: min(65vw, 280px);
    top: 260px;
  }
}
.ambient-bagua {
  width: 100%;
  height: 100%;
  animation: bagua-spin 300s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes bagua-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-bagua {
    animation: none;
  }
}

/* 3. Grain tĩnh: tile noise 200px độ đục 0.04, không animate */
.ambient-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.04'/></svg>");
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.8;
  z-index: 2;
}

/* 4. Hạt sáng (ember): canvas một lớp, 36-48 hạt (mobile 20), trôi 8-20px/s */
.ambient-ember-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Nút chữ nhỏ "Bỏ qua" — nằm trọn trong màn hình, padding 20px, touch >= 44px */
.gq-skip {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 20;
  min-height: 36px;
  padding: 6px 14px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 500 var(--fs-sm, 13px)/1 var(--font-sans, 'Inter', -apple-system, sans-serif);
  letter-spacing: 0.08em;
  color: #b8ae98;
  opacity: 0.55;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.gq-skip:hover { opacity: 0.9; color: #e8e2d4; }
.gq-skip:focus-visible { opacity: 1; outline: 1px solid rgba(201, 143, 46, 0.7); outline-offset: 2px; }

/* ---------------- Cấu trúc sân khấu Flex: Canh giữa DỌC không dùng offset cứng ---------------- */
.gq-stage-body {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

/* Khối chữ phía trên: câu hỏi nghiêng 20-24px + dưới 12px là HÀO THỨ n / 6 (13-14px) */
.gq-head {
  position: absolute;
  top: calc(56px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(640px, calc(100vw - 180px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  box-sizing: border-box;
  z-index: 12;
  pointer-events: auto;
  animation: gq-head-in 0.4s ease both;
}
@keyframes gq-head-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gq-q {
  margin: 0;
  font-family: var(--font-serif, 'Noto Serif', serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.35;
  color: #b8ae98;
  max-width: min(640px, 86vw);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .gq-q {
    font-size: clamp(17px, 4.8vw, 19px);
  }
}
.gq-q.is-empty {
  font-style: italic;
  font-size: 20px;
  color: #b8ae98;
}

.gq-step {
  margin-top: 12px;
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #c98f2e;
  text-transform: uppercase;
  user-select: none;
}

/* Sân khấu arena: chiếm toàn bộ không gian còn lại và tự canh giữa xu */
.gq-stage-arena {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------- Cột hào đã gieo: GÓC TRÊN TRÁI ---------------- */
.gq-stackpos {
  position: fixed;
  left: 24px;
  top: 24px;
  z-index: 15;
  pointer-events: none;
}
.gq-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  width: auto;
}
.gq-hbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 14px;
}
/* Số 1-6 cỡ 12px Inter, tương phản >= 3:1 (chưa gieo) và >= 4.5:1 (đã gieo) */
.gq-hbar-num {
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  font-size: 12px;
  line-height: 14px;
  color: #9a9284;
  opacity: 0.75;
  width: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.gq-hbar-slot {
  position: relative;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  box-sizing: border-box;
  background: transparent;
  border: 1px dashed rgba(201, 143, 46, 0.5);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.gq-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  background: transparent;
  flex-shrink: 0;
  user-select: none;
}
.gq-hbar-row.is-moving .gq-dot,
.gq-dot.is-on {
  background: #d9342b;
}

/* Hào đang gieo: vạch nhấp nháy opacity 0.5 - 0.9 (chu kỳ 1.4s), số màu hổ phách */
.gq-hbar-row.is-casting .gq-hbar-num {
  color: #d9a441;
  opacity: 1;
}
.gq-hbar-row.is-casting .gq-hbar-slot {
  border: 1px dashed #d9a441;
  animation: gq-tracker-pulse 1.4s ease-in-out infinite;
}
@keyframes gq-tracker-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* Đã gieo: vạch đặc #d9a441, số màu #c98f2e */
.gq-hbar-row.is-set .gq-hbar-num {
  color: #c98f2e;
  opacity: 1;
}
.gq-hbar-row.is-set .gq-hbar-slot {
  border: none;
  background: transparent;
  opacity: 1;
}
.gq-bar {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  border-radius: 999px;
}
.gq-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #d9a441;
}
.gq-bar.is-yang i { width: 100%; }
.gq-bar.is-yin i { width: 42%; }
.gq-hbar-row.is-moving .gq-bar i,
.gq-bar.is-moving i {
  background: #d9342b;
}

/* ---------------- Cụm 3 xu canh GIỮA: khoảng cách 0.3-0.4 đường kính ---------------- */
.gq-coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--d) * 0.35);
  pointer-events: none;
  z-index: 5;
}
.gq-slot {
  position: relative;
  width: var(--d);
  height: var(--d);
  perspective: 1200px;
  flex-shrink: 0;
}

/* Dưới 600px: xếp tam giác với xu 38vw */
@media (max-width: 600px) {
  .gq-stage {
    --d: clamp(90px, 30.4vw, 120px);
  }
  .gq-coins {
    display: grid;
    grid-template-columns: var(--d) var(--d);
    grid-template-rows: auto auto;
    column-gap: calc(var(--d) * 0.28);
    row-gap: calc(var(--d) * 0.20);
    justify-content: center;
    justify-items: center;
  }
  .gq-slot[data-i="0"] {
    grid-column: 1;
    grid-row: 1;
  }
  .gq-slot[data-i="1"] {
    grid-column: 2;
    grid-row: 1;
  }
  .gq-slot[data-i="2"] {
    grid-column: 1 / span 2;
    grid-row: 2;
    justify-self: center;
  }
}

.gq-lift, .gq-tilt, .gq-spin, .gq-layers {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.gq-lift, .gq-spin { will-change: transform; }

/* 7 lớp tròn xếp trục Z màu đồng sẫm từ ảnh */
.gq-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gq-rim-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(var(--layer-z, 0px));
  pointer-events: none;
}

/* Mặt xu CSS 3D */
.gq-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}
.gq-face picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.gq-coin-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  border-radius: 50%;
}

/* Mặt Dương: giữ front.png */
.gq-front {
  transform: translateZ(3.0px);
}

/* Mặt Âm: dùng back-dark.png tối hơn 40.5% tự nhiên */
.gq-back {
  transform: rotateX(180deg) translateZ(3.0px);
}

/* Vành cạnh có vệt sáng chạy qua khi xoay: ánh sáng thống nhất từ trên-trái, opacity <= 0.20 */
.gq-sheen-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.gq-sheen {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 226, 168, 0.45) 47%,
    rgba(255, 235, 185, 0.85) 50%,
    rgba(255, 226, 168, 0.45) 53%,
    transparent 64%
  );
  opacity: var(--hl-o, 0.16);
  transform: translateX(var(--hl-x, 30px));
  pointer-events: none;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .gq-sheen {
    transition: opacity 300ms ease-out, transform 300ms ease-out;
  }
}

/* Bóng tiếp xúc đậm nhỏ sát đáy xu */
.gq-shadow-contact {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6) 70%, transparent 100%);
  opacity: 0.55;
  transform: translate(calc(var(--d) * 0.04), calc(var(--d) * 0.38)) scale(0.92, 0.28);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Bóng mềm elip rộng hơn, lệch theo hướng sáng từ trên-trái */
.gq-shadow-ambient {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  opacity: 0.18;
  transform: translate(calc(var(--d) * 0.08), calc(var(--d) * 0.42)) scale(1.15, 0.52);
  pointer-events: none;
  filter: blur(5px);
}

/* Lớp chứa các hào đang bay về màn kết quả */
.gq-flylayer { position: fixed; inset: 0; z-index: 1001; pointer-events: none; }
.gq-flybar { position: fixed; transform-origin: 0 0; will-change: transform; }
.gq-flybar .rs-bar { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* ---------------- Màn kết quả (#/ket-qua): không thẻ ---------------- */
#view-result { animation: none !important; transition: none !important; }
#view-result .container-reading { max-width: 860px; }

.rs {
  padding: clamp(28px, 6vh, 64px) 0 72px;
}

/* ---------------- PHẦN 2: Mỗi quẻ là MỘT KHỐI có khung ---------------- */
.rs-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.rs-top.is-single {
  justify-content: center;
}
.rs-top.is-dual {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 64px minmax(260px, 320px);
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 20px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* Khung mỗi quẻ: viền 1px #c98f2e độ đục 0.28, bo 16px, nền #1a1713 độ đục 0.5, padding 24px 28px, rộng ~280-320px */
.rs-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-width: 260px;
  height: 100%;
  border: 1px solid rgba(201, 143, 46, 0.28);
  border-radius: 16px;
  background: rgba(26, 23, 19, 0.5);
  padding: 24px 28px;
  display: grid;
  grid-template-rows: auto 108px minmax(28px, auto) auto;
  row-gap: 16px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

/* 1. Nhãn nhỏ "QUẺ CHỦ" / "QUẺ BIẾN" (11px, letter-spacing 0.16em, màu #c98f2e) ở trên cùng */
.rs-card-tag {
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #c98f2e;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.2;
}

/* 2. Hàng ngang: cột 6 hào và chữ Hán CÂN XỨNG */
.rs-card-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 108px;
  width: 100%;
  margin: 0;
}

/* Cột 6 hào: vạch rộng 88px, cao 8px, khoảng cách 12px -> 6*8 + 5*12 = 108px */
.rs-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 108px;
  box-sizing: border-box;
  justify-content: space-between;
}

.rs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 8px;
}

/* Số hào nhỏ 11px, độ đục 0.5 */
.rs-num {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  line-height: 1;
  color: #9a9284;
  opacity: 0.5;
  width: 10px;
  text-align: right;
  user-select: none;
}

/* Vạch hào: rộng 88px, cao 8px */
.rs-bar {
  width: 88px;
  height: 8px;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  position: relative;
  box-sizing: border-box;
}
.rs-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #e0ab45;
}
.rs-bar.is-yang i { width: 100%; }
.rs-bar.is-yin i { width: 42%; }

/* Hào động: màu đỏ */
.rs-bar.is-moving i {
  background: #e0382f;
}

/* Chấm đỏ 5px bên phải vạch hào động, không chữ 動, cách khối chữ >= 12px */
.rs-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  user-select: none;
}
.rs-dot.is-on {
  background: #e0382f;
}

/* Khối chữ Hán: kích thước CỐ ĐỊNH rộng 96px, cao đúng 108px, canh giữa. KHÔNG dùng absolute, KHÔNG để chữ tràn ra ngoài khối */
.rs-han {
  width: 96px;
  height: 108px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-han, "Noto Serif SC", "Songti SC", serif);
  font-weight: 700;
  color: #d9a441;
  user-select: none;
  overflow: visible;
  flex-shrink: 0;
}

/* 1 chữ: font-size 96px */
.rs-han.is-single {
  font-size: 96px;
  line-height: 1;
}
.rs-han.is-single .rs-han-char {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 108px;
  line-height: 108px;
  text-align: center;
}

/* 2 chữ xếp dọc: font-size 48px, line-height 1, gap 0 */
.rs-han.is-double {
  font-size: 48px;
  line-height: 1;
  gap: 0;
}
.rs-han.is-double .rs-han-char {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 54px;
  line-height: 54px;
  text-align: center;
}

/* 3. Dòng tên quẻ nằm dưới, căn giữa: "Trạch Hỏa Cách" (Playfair 22px) và bên dưới "Quẻ số 49" (12px, #9a9284) */
.rs-name {
  margin: 0;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-1, #e8e2d4);
  max-width: 260px;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-no {
  margin: 0;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12px;
  line-height: 1.4;
  color: #9a9284;
}



/* Animation biến quẻ: khung quẻ biến hiện mờ dần sau khi quẻ chủ ổn định */
/* Mũi tên QueArrow thống nhất giữa hai khung */
.rs-arrow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
  box-sizing: border-box;
  margin: 0 auto;
  align-self: center;
}

/* Animation biến quẻ: khung quẻ biến hiện mờ dần sau khi quẻ chủ ổn định */
.rs.has-moving .rs-card-changed,
.rs.has-moving .rs-arrow-col {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.rs-arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 143, 46, 0.35);
  background: #1a1713;
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.rs-arrow-svg {
  width: 40px;
  height: 40px;
  stroke: #c98f2e;
  stroke-width: 2;
  opacity: 0.9;
  display: block;
}
.rs-arrow-col .qkd-bridge-note {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  color: #9a9284;
  margin-top: 6px;
  white-space: nowrap;
}

/* Animation biến quẻ: khung quẻ biến hiện mờ dần sau khi quẻ chủ ổn định */
.rs.has-moving .rs-card-changed,
.rs.has-moving .rs-arrow-col {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.rs.has-moving.anim-step-2 .rs-card-changed,
.rs.has-moving.anim-step-2 .rs-arrow-col,
.rs.has-moving.anim-done .rs-card-changed,
.rs.has-moving.anim-done .rs-arrow-col {
  opacity: 1;
}

/* Chữ Hán và tên quẻ biến hiện ra sau */
.rs.has-moving .rs-card-changed .rs-han,
.rs.has-moving .rs-card-changed .rs-name,
.rs.has-moving .rs-card-changed .rs-no {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rs.has-moving.anim-step-4 .rs-card-changed .rs-han,
.rs.has-moving.anim-step-4 .rs-card-changed .rs-name,
.rs.has-moving.anim-step-4 .rs-card-changed .rs-no,
.rs.has-moving.anim-done .rs-card-changed .rs-han,
.rs.has-moving.anim-done .rs-card-changed .rs-name,
.rs.has-moving.anim-done .rs-card-changed .rs-no {
  opacity: 1;
  transform: translateY(0);
}

/* Màu sắc vạch hào chuẩn thuần túy theo dữ liệu */
.rs-card-primary .rs-bar.is-moving i {
  background: #e0382f;
}
.rs-card-changed .rs-bar i {
  background: #e0ab45;
}

/* Quẻ biến: hào mới biến đổi có vòng sáng mảnh một nhịp để thấy hào nào đổi */
.rs.has-moving.anim-step-3 .rs-card-changed .rs-bar.is-moving-target {
  animation: rs-flash-ring 0.8s ease-out 1;
}

/* Container overlay hiệu ứng độc lập tạm thời */
.rs-morph-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

@keyframes rs-flash-ring {
  0% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.8); }
  50% { box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.7); }
  100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); }
}

/* Mobile 390px: hai khung xếp dọc, mũi tên hướng xuống, khung rộng 100% (tối đa 320px) */
@media (max-width: 700px) {
  .rs-top.is-dual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0 auto;
  }
  .rs-arrow-col {
    width: 100%;
    height: 56px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rs-arrow-circle {
    width: 40px;
    height: 40px;
  }
  .rs-arrow-svg {
    width: 36px;
    height: 36px;
    transform: rotate(90deg);
  }
  .rs-card {
    width: 100%;
    max-width: 320px;
    min-width: 260px;
  }
}

/* ---------------- PHẦN 3: Chữ diễn giải nhỏ lại ---------------- */
/* Khối đọc rộng tối đa 520px, căn giữa, cách khung quẻ 48px */
.rs-body {
  max-width: 520px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rs-block {
  padding: 0;
}
/* Nhãn "QUÁI TỪ", "TƯỢNG": 11-12px, letter-spacing 0.16em, màu #c98f2e */
.rs-label {
  margin: 0 0 8px;
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c98f2e;
}
/* Nội dung quái từ: 16px, font-weight 400 (BỎ in đậm), line-height 1.75, màu #d6cfbe */
.rs-judg {
  margin: 0;
  font-family: var(--font-serif, 'Noto Serif', serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #d6cfbe;
}
/* Nội dung tượng: 15px, weight 400, line-height 1.75, màu #b8b0a0 */
.rs-img {
  margin: 0;
  font-family: var(--font-serif, 'Noto Serif', serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #b8b0a0;
}

/* Nút "Xem luận giải" 15px, padding 12px 28px */
.rs-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 36px;
}
.rs-cta {
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #c98f2e;
  color: #17120a;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(201, 143, 46, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.rs-cta:hover {
  transform: translateY(-1px);
  background: #d6a03c;
  box-shadow: 0 8px 24px rgba(201, 143, 46, 0.32);
}
.rs-cta:focus-visible {
  outline: 2px solid #f0cd7b;
  outline-offset: 3px;
}
.rs-note {
  margin: 10px 0 0;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3, #7d7466);
  text-align: center;
}
@media (max-width: 700px) {
  .rs-judg { font-size: 16px; }
  .rs-img { font-size: 15px; }
  .rs-cta { font-size: 15px; }
}
.rs-alt {
  margin-top: 18px;
  min-height: 44px;
  padding: 0 14px;
  background: none;
  border: 0;
  font: 500 14px/1 var(--font-sans, sans-serif);
  color: #c98f2e;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(201, 143, 46, 0.4);
  cursor: pointer;
}
.rs-alt:hover { text-decoration-color: #c98f2e; }
.rs-alt:focus-visible { outline: 1px solid rgba(212, 160, 60, 0.7); outline-offset: 2px; border-radius: 6px; }

/* Đổi quẻ chủ ⇄ quẻ biến: chỉ mờ chữ, không nhảy bố cục */
.rs.is-swapping .rs-id, .rs.is-swapping .rs-body { opacity: 0.0; }
.rs-id, .rs-body { transition: opacity 0.22s ease; }

/* Hiện dần phần chữ sau khi các hào bay về chỗ */
.rs-fade { transition: opacity 0.7s ease, transform 0.7s ease; }
[data-arrive="1"] .rs-fade { opacity: 0; transform: translateY(8px); }
.rs-fade:nth-child(2) { transition-delay: 0.08s; }
.rs-fade:nth-child(3) { transition-delay: 0.16s; }
.rs-num, .rs-dong { transition: opacity 0.5s ease; }
[data-arrive="1"] .rs-num, [data-arrive="1"] .rs-dong { opacity: 0; }

.rs-empty { text-align: center; padding: 80px 0; color: var(--text-2, #9a9284); }
.rs-empty a { color: #c98f2e; }

/* ---------------- Trang luận giải (#/luan-giai) ---------------- */
.reading-back-wrap { padding-top: 22px; }
.reading-back { color: var(--text-2, #9a9284); font-size: 14px; text-decoration: none; }
.reading-back:hover { color: #c98f2e; }

/* ---------------- Ô hỏi: gieo không câu hỏi ---------------- */
.no-question-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-2, #9a9284);
  cursor: pointer;
  min-height: 40px;
}
.no-question-row input { width: 18px; height: 18px; accent-color: #c98f2e; cursor: pointer; }
.question-error {
  margin: 8px 0 0;
  font-size: 14px;
  color: #e46a5a;
}
.question-error.is-shake { animation: gq-shake 0.4s ease; }
@keyframes gq-shake {
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}

/* ---------------- Giảm chuyển động ---------------- */
@media (prefers-reduced-motion: reduce) {
  .gq-stage { animation-duration: 0.01ms; }
  .gq-dust i { animation: none; }
  .gq-cap, .rs-fade, .rs-id, .rs-body { transition: none; }
  #view-home { transition: none; }
}


@media (max-width: 600px) {
  .gq-head {
    top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px));
    width: min(640px, 92vw);
    padding: 0 max(16px, env(safe-area-inset-left));
  }
  .gq-stackpos {
    position: static;
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  .gq-stack {
    flex-direction: row;
    gap: 6px;
    width: auto;
    justify-content: center;
    align-items: center;
  }
  .gq-hbar-row {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: auto;
    width: 44px;
  }
  .gq-hbar-num {
    width: auto;
    text-align: center;
    font-size: 11px;
    line-height: 1;
  }
  .gq-hbar-slot {
    width: 44px;
    height: 5px;
  }
  .gq-dot {
    display: none;
  }
  .gq-skip {
    top: max(10px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    min-height: 32px;
    padding: 6px 10px;
  }
}

@media (max-width: 600px) {
  .gq-head {
    width: min(640px, 86vw);
  }
}
@media (max-height: 700px) {
  .gq-head {
    top: max(36px, calc(env(safe-area-inset-top, 0px) + 28px));
  }
}

html.gq-open #ambient-bg { display: none !important; }

/* =========================================================
 * Khối "Lời Luận Của Thầy" (AI Interpretation)
 * ========================================================= */
.rs-ai-section {
  max-width: 520px;
  width: 100%;
  margin: 36px auto 0;
  box-sizing: border-box;
  padding: 24px;
  border-radius: 12px;
  background: rgba(28, 25, 20, 0.65);
  border: 1px solid rgba(201, 143, 46, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rs-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(201, 143, 46, 0.15);
  padding-bottom: 14px;
}

.rs-ai-title-wrap {
  display: flex;
  flex-direction: column;
}

.rs-ai-badge {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #c98f2e;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.rs-ai-title {
  margin: 0;
  font-family: var(--font-serif, 'Noto Serif', serif);
  font-size: 18px;
  font-weight: 600;
  color: #f3efe6;
}

.btn-ai-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  min-height: 40px;
  border-radius: 8px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #100e0b;
  background: linear-gradient(135deg, #e0a84a, #c98f2e);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ai-ask:hover:not(:disabled) {
  background: linear-gradient(135deg, #ebd197, #dfa23d);
  transform: translateY(-1px);
}

.btn-ai-ask:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-ai-ask.is-completed {
  background: rgba(201, 143, 46, 0.15);
  color: #c98f2e;
  border: 1px solid rgba(201, 143, 46, 0.4);
}

.ai-luan-content {
  font-family: var(--font-serif, 'Noto Serif', serif);
  font-size: 15px;
  line-height: 1.8;
  color: #e8e2d4;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 20px;
}

.ai-luan-error {
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(185, 28, 28, 0.15);
  border: 1px solid rgba(185, 28, 28, 0.35);
  color: #fca5a5;
  font-size: 14px;
}

.ai-luan-error.hidden {
  display: none;
}

.ai-luan-error-msg {
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.btn-ai-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  min-height: 34px;
  border-radius: 6px;
  background: #b91c1c;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-ai-retry:hover {
  background: #dc2626;
}