/* ============================================================
   KCT v6.2 — Phòng Quán Tưởng (Contemplation Room)
   Không gian hướng dẫn quán tưởng tĩnh lặng, phong cách điện thờ.
   ============================================================ */

/* ---------- Phòng: nền đêm linh thiêng ---------- */
.qt-room{
  background:
    radial-gradient(1000px 480px at 50% -6%,rgba(64,74,140,.5),transparent 70%),
    radial-gradient(760px 560px at 90% 110%,rgba(201,162,39,.08),transparent 60%),
    linear-gradient(180deg,#141a3a,#0c1028 70%);
  color:#f2ead8;
  padding:clamp(56px,8vw,96px) 0 clamp(64px,8vw,110px);
  position:relative;
}
.qt-room::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,#3a6ea5 0 20%,#efe9dc 20% 40%,#b3402e 40% 60%,#3f7d4e 60% 80%,#d9a91e 80% 100%);
}
.qt-head{text-align:center;max-width:760px;margin:0 auto 40px;}
.qt-head .kicker{color:#e8c86a;}
.qt-head h1{
  font-family:var(--serif-d);
  font-size:clamp(2rem,5vw,3.2rem);
  color:#fdf8ec;margin:14px 0 18px;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.qt-head .lead{color:#cfc2a1;font-size:1.08rem;line-height:1.85;}

/* ---------- Ghi chú ranh giới ---------- */
.qt-note{
  max-width:820px;margin:0 auto 48px;
  border:1px solid rgba(232,200,106,.4);border-radius:16px;
  background:rgba(201,162,39,.07);
  padding:22px 26px;font-size:.95rem;line-height:1.85;color:#e6d9b8;
}
.qt-note b{color:#e8c86a;}
.qt-links{display:block;margin-top:10px;font-size:.88rem;}
.qt-links a{color:#e8c86a;border-bottom:1px solid rgba(232,200,106,.5);}
.qt-links a:hover{color:#fff;}

/* ---------- Thẻ bài tập ---------- */
.qt-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:980px;margin:0 auto;
}
@media(max-width:760px){.qt-grid{grid-template-columns:1fr;}}
.qt-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(232,200,106,.28);
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s,box-shadow .35s,border-color .35s;
  cursor:pointer;
}
.qt-card:hover{
  transform:translateY(-5px);
  border-color:rgba(232,200,106,.65);
  box-shadow:0 26px 60px rgba(0,0,0,.45),0 0 30px rgba(232,200,106,.1);
}
.qt-thumb{display:block;aspect-ratio:16/9;overflow:hidden;}
.qt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;filter:saturate(.92);}
.qt-card:hover .qt-thumb img{transform:scale(1.04);}
.qt-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1;}
.qt-min{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:#e8c86a;
}
.qt-body h3{font-family:var(--serif-d);font-size:1.45rem;color:#fdf8ec;}
.qt-body p{color:#bfb394;font-size:.96rem;line-height:1.75;flex:1;}
.qt-start{
  align-self:flex-start;margin-top:6px;
  font-family:var(--serif-d);font-size:1rem;
  background:linear-gradient(135deg,#cfa92e,#a8842c);color:#241a08;
  border:0;border-radius:999px;padding:12px 32px;cursor:pointer;
  box-shadow:0 10px 26px rgba(120,84,20,.3);
  transition:transform .25s,box-shadow .25s;
}
.qt-start:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(120,84,20,.4);}

/* ---------- Trình phát ---------- */
.qt-player{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,10,24,.96);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  overflow:hidden;
}
.qt-player[hidden]{display:none;}
/* v6.6: tấm trượt phía dưới — nhường nửa trên cho hình quán tưởng */
.qt-stage{
  position:relative;width:min(680px,100%);
  background:linear-gradient(180deg,#1a2044,#12162f);
  border:1px solid rgba(232,200,106,.35);border-bottom:0;border-radius:24px 24px 0 0;
  padding:26px clamp(20px,4vw,44px) calc(24px + env(safe-area-inset-bottom));
  text-align:center;
  box-shadow:0 -20px 80px rgba(0,0,0,.55),0 0 60px rgba(232,200,106,.06);
  margin:0 auto;z-index:2;
  max-height:56vh;max-height:56dvh;overflow-y:auto;
}
.qt-player .qt-breath{width:110px;height:110px;margin-bottom:16px;}
.qt-player .qt-breath::after{inset:25px;}
.qt-player .qt-text{min-height:0;margin-bottom:22px;}
.qt-player .qt-stage h2{margin-bottom:16px;}
/* Hình kết thúc: chủng tự / Bổn Tôn */
.qt-seed-finish{
  font-family:Georgia,'Noto Serif',serif;font-weight:600;
  font-size:clamp(3rem,10vw,4.4rem);letter-spacing:.14em;
  color:#fff8e6;margin-bottom:12px;line-height:1.3;
  text-shadow:0 0 16px var(--seedc,rgba(232,200,106,.9)),0 0 48px var(--seedc,rgba(232,200,106,.9));
  animation:qt-seed-pulse 4s ease-in-out infinite;
}
@keyframes qt-seed-pulse{0%,100%{transform:scale(1);opacity:.93}50%{transform:scale(1.05);opacity:1}}
.qt-deity-finish{
  width:132px;height:132px;border-radius:50%;overflow:hidden;
  margin:0 auto 12px;border:2px solid rgba(232,200,106,.65);
  box-shadow:0 0 36px rgba(232,200,106,.4);
}
.qt-deity-finish img{width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion:reduce){.qt-seed-finish{animation:none}}
.qt-close{
  position:absolute;top:16px;right:16px;
  width:42px;height:42px;border-radius:50%;
  background:transparent;border:1px solid rgba(232,200,106,.4);color:#e8c86a;
  font-size:1rem;cursor:pointer;transition:.25s;
}
.qt-close:hover{background:rgba(232,200,106,.14);}
.qt-stage .kicker{color:#e8c86a;margin-bottom:10px;}
.qt-stage h2{font-family:var(--serif-d);font-size:clamp(1.5rem,3.6vw,2.1rem);color:#fdf8ec;margin-bottom:26px;}

/* Vòng hơi thở */
.qt-breath{width:150px;height:150px;margin:0 auto 28px;position:relative;}
.qt-breath span{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(232,200,106,.32) 0%,rgba(232,200,106,.1) 55%,transparent 72%);
  border:1px solid rgba(232,200,106,.5);
  animation:qt-breathe 8s ease-in-out infinite;
}
.qt-breath::after{
  content:"";position:absolute;inset:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,200,106,.5),rgba(232,200,106,.12) 70%);
  animation:qt-breathe 8s ease-in-out infinite reverse;
}
@keyframes qt-breathe{0%,100%{transform:scale(.86);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.qt-breath span,.qt-breath::after{animation:none}}

.qt-text{
  font-size:1.12rem;line-height:2;color:#e9dfc2;
  max-width:560px;margin:0 auto 30px;min-height:120px;
}

/* Đồng hồ + thanh tiến trình */
.qt-timer{margin-bottom:26px;}
.qt-timer #qt-clock{
  font-family:var(--serif-d);font-size:2rem;color:#e8c86a;letter-spacing:.06em;
}
.qt-bar{height:4px;background:rgba(255,255,255,.1);border-radius:99px;margin-top:12px;overflow:hidden;}
.qt-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#cfa92e,#e8c86a);border-radius:99px;transition:width 1s linear;}

/* Nút điều khiển */
.qt-controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;}
.qt-controls button{
  font-family:var(--sans);font-size:.88rem;letter-spacing:.06em;
  padding:12px 24px;border-radius:999px;cursor:pointer;transition:.25s;
  border:1px solid rgba(232,200,106,.45);background:transparent;color:#f2ead8;
}
.qt-controls button:hover{background:rgba(232,200,106,.14);}
.qt-controls #qt-toggle{
  background:linear-gradient(135deg,#cfa92e,#a8842c);color:#241a08;border:0;
  font-weight:600;min-width:130px;
}

/* Chấm bước */
.qt-dots{display:flex;gap:8px;justify-content:center;}
.qt-dots i{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.18);transition:.3s;
}
.qt-dots i.done{background:rgba(232,200,106,.55);}
.qt-dots i.now{background:#e8c86a;box-shadow:0 0 12px rgba(232,200,106,.7);transform:scale(1.25);}

/* Màn hình kết thúc */
.qt-done-emoji{font-size:2.6rem;margin-bottom:14px;}
.qt-stage.done h2{margin-bottom:14px;}

/* ---------- v6.3: chế độ đắm chìm ---------- */
#qt-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.qt-player .qt-stage{
  background:rgba(16,20,46,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.qt-toggles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px;}
.qt-toggles button{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;
  padding:9px 18px;border-radius:999px;cursor:pointer;transition:.25s;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#d9cfae;
}
.qt-toggles button:hover{border-color:rgba(232,200,106,.6);color:#fff;}
.qt-toggles button.on{
  border-color:rgba(232,200,106,.7);color:#e8c86a;
  background:rgba(232,200,106,.1);
}
.qt-player:fullscreen .qt-stage{max-height:94vh;overflow-y:auto;}
.qt-player:fullscreen #qt-canvas{position:fixed;}

/* ---------- v6.4: tràng hạt ---------- */
.qt-mala{margin:6px auto 0;display:flex;flex-direction:column;align-items:center;gap:8px;}
.qt-mala[hidden]{display:none;}
#qt-mala-svg{width:104px;height:104px;}
.mala-dot{fill:rgba(255,255,255,.16);transition:fill .3s;}
.mala-dot.lit{fill:#e8c86a;filter:drop-shadow(0 0 4px rgba(232,200,106,.8));}
.qt-mala-row{display:flex;align-items:center;gap:14px;}
#qt-mala-tap{
  font-family:var(--sans);font-size:.85rem;
  padding:10px 22px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(232,200,106,.5);background:rgba(232,200,106,.08);color:#f2ead8;
  transition:.25s;
}
#qt-mala-tap:hover{background:rgba(232,200,106,.18);}
#qt-mala-tap:active{transform:scale(.96);}
#qt-mala-count{font-family:var(--serif-d);color:#e8c86a;font-size:1rem;letter-spacing:.08em;}

/* ---------- v6.5: nhãn nhịp thở ---------- */
.qt-breath-label{
  font-family:var(--serif-d);font-size:1.25rem;letter-spacing:.3em;
  color:#cfd8ff;margin:-8px 0 22px;text-transform:uppercase;
  animation:qt-label-fade 4s ease-in-out infinite;
}
.qt-breath-label[hidden]{display:none;}
@keyframes qt-label-fade{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.qt-breath-label{animation:none}}