/* =========================================================
   GƯƠNG LUÂN HỒI — giấy dó · thủy mặc · son ấn triện
   ========================================================= */
:root {
  /* bảng màu tranh Đông Hồ: giấy điệp, đỏ son, vàng hoa hòe, xanh chàm, đen than lá tre */
  --paper: #f2e7cf;
  --paper2: #e8dab9;
  --card: #fbf4e2;
  --ink: #241d18;
  --ink2: #43382f;
  --dim: #6f6253;
  --line: rgba(36, 29, 24, 0.16);
  --line2: rgba(36, 29, 24, 0.32);
  --red: #b5302a;        /* đỏ son */
  --red2: #c8433a;
  --red-wash: rgba(181, 48, 42, 0.08);
  --gold: #c99a22;       /* vàng hoa hòe */
  --gold2: #8a6a12;
  --jade: #2f6b4f;       /* xanh lá */
  --indigo: #2b4a72;     /* chàm */
  --wash-pink: rgba(214, 120, 96, 0.20);
  --wash-blue: rgba(70, 110, 150, 0.16);
  --wash-jade: rgba(70, 130, 95, 0.16);
  --shadow: 0 14px 34px rgba(60, 40, 15, 0.14);
  --block: 3px 3px 0 var(--ink);   /* in khắc gỗ */
  --serif: 'Noto Serif', 'Times New Roman', serif;
  --display: 'Cormorant Garamond', 'Noto Serif', serif;
  --han: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --hud: 64px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 17.5px; line-height: 1.8; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.noscroll { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgba(178, 58, 43, 0.18); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------------- background: rice paper + watercolor washes ---------------- */
#bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 620px at 6% 0%, var(--wash-pink), transparent 62%),
    radial-gradient(800px 700px at 100% 8%, var(--wash-blue), transparent 60%),
    radial-gradient(1000px 700px at 85% 105%, var(--wash-jade), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(210, 180, 120, 0.22), transparent 60%),
    linear-gradient(180deg, #f6f0e5, #efe6d5);
}
#bg::after { /* paper fibre */
  content: ''; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .28  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cloud {
  position: absolute; width: 560px; height: 280px; opacity: 0.16;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%23a07c3e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 70c0-14 12-24 26-20 2-16 22-24 34-12 8-14 32-12 36 6 14-4 28 6 26 20M48 70c-6 0-10-6-6-12 4-6 12-2 10 4M120 64c4-8 16-8 18 2 2 8-8 12-12 6'/%3E%3Cpath d='M10 80h170M30 88h120'/%3E%3C/svg%3E");
  animation: drift 90s ease-in-out infinite;
}
.c1 { top: 10%; left: -12%; }
.c2 { bottom: 6%; right: -10%; transform: scaleX(-1); animation-duration: 120s; animation-direction: reverse; }
@keyframes drift { 50% { translate: 70px 12px; } }
.dustfield { /* drifting ink motes / petals */
  position: absolute; inset: -50%; opacity: 0.55;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(178, 58, 43, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 120px 80px, rgba(42, 36, 32, 0.25), transparent),
    radial-gradient(2.5px 1.6px at 200px 150px, rgba(222, 140, 150, 0.45), transparent),
    radial-gradient(1.4px 1.4px at 60px 190px, rgba(160, 124, 62, 0.4), transparent);
  background-size: 260px 260px;
  animation: dust 160s linear infinite;
}
@keyframes dust { to { transform: translate(260px, 520px); } }

/* ---------------- HUD ---------------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--hud);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(243, 236, 223, 0.95), rgba(243, 236, 223, 0));
}
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; }
.brand .bn { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; color: var(--ink); }
.seal-sm {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 4px;
  background: var(--red); color: #fbf1e4; font-family: var(--han); font-size: 18px; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 220, 0.25);
}
.mode-title .brand { visibility: hidden; }
#progress { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
#progress li { display: flex; flex-direction: column; align-items: center; width: 54px; color: var(--dim); font-size: 11px; line-height: 1.2; }
#progress li span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--card); font-family: var(--han); font-size: 13px; transition: all 0.5s;
}
#progress li em { font-style: normal; margin-top: 3px; opacity: 0; transition: opacity 0.4s; white-space: nowrap; }
#progress li.done span { background: rgba(79, 125, 112, 0.14); color: var(--jade); border-color: rgba(79, 125, 112, 0.4); }
#progress li.now span { background: var(--red); color: #fff6ea; border-color: var(--red); box-shadow: 0 4px 14px rgba(178, 58, 43, 0.35); }
#progress li.now em, #progress:hover li em { opacity: 1; }
.tools { display: flex; gap: 6px; }
.ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(251, 247, 239, 0.85); border: 1px solid var(--line); transition: all 0.25s;
}
.ico svg { width: 19px; height: 19px; fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico:hover { border-color: var(--red); }
.ico:hover svg { stroke: var(--red); }
#btnSound .slash { stroke: var(--red); }
#btnSound.on .slash { display: none; }
.ico.pulse { animation: pulse 1.2s ease 2; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(178, 58, 43, 0.15); border-color: var(--red); } }
.mode-title #progress { display: none; }

/* ---------------- stage ---------------- */
#stage { position: relative; z-index: 1; min-height: 100vh; }
.mode-play #stage { display: grid; grid-template-columns: minmax(340px, 46vw) minmax(0, 1fr); align-items: start; }
.mode-play #mirrorWrap { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: calc(var(--hud) + 10px) 3vw 30px; }
.mode-play .mirror { width: min(36vw, 70vh, 600px); }
.mode-play #panel { padding: calc(var(--hud) + 24px) 5vw 80px 2vw; min-height: 100vh; display: flex; align-items: center; }
.panel-inner { width: 100%; max-width: 640px; }
.panel-inner.center { text-align: center; margin: 0 auto; }

.mode-title #stage { display: flex; flex-direction: column; align-items: center; padding: 56px 16px 60px; }
.mode-title #mirrorWrap { display: grid; place-items: center; padding: 30px 0 14px; }
.mode-title .mirror { width: min(50vh, 74vw, 520px); }
.mode-title #panel { width: 100%; max-width: 640px; }

.mode-summary #stage { display: flex; flex-direction: column; align-items: center; padding: calc(var(--hud) + 10px) 16px 80px; }
.mode-summary #mirrorWrap { padding: 26px 0 0; }
.mode-summary .mirror { width: min(240px, 56vw); }
.mode-summary #panel { width: 100%; max-width: 880px; }

/* ---------------- the mirror (bronze, hung on paper) ---------------- */
.mirror { position: relative; aspect-ratio: 1; border-radius: 50%; transition: width 0.9s cubic-bezier(.2, .7, .2, 1); }
.mirror::before { /* soft ink-wash halo behind the mirror */
  content: ''; position: absolute; inset: -22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(178, 58, 43, 0.10), rgba(160, 124, 62, 0.08) 45%, transparent 70%);
  filter: blur(6px);
}
.mirror canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; background: #e9e0cd; }
.rim {
  position: absolute; inset: -5%; border-radius: 50%;
  background: conic-gradient(from 20deg, #8a6a38, #d8bb80, #9c7a42, #6e5226, #c7a466, #ecd8a8, #8a6a38, #5e4420, #b8955a, #8a6a38);
  box-shadow: 0 24px 60px rgba(80, 50, 20, 0.28), 0 4px 10px rgba(80, 50, 20, 0.2);
  -webkit-mask: radial-gradient(circle, transparent 67.5%, #000 68%);
  mask: radial-gradient(circle, transparent 67.5%, #000 68%);
}
.rim::after {
  content: ''; position: absolute; inset: 3%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(60, 40, 15, 0.35) 0 1deg, transparent 1deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 70%, #000 71%, #000 75%, transparent 76%);
  mask: radial-gradient(circle, transparent 70%, #000 71%, #000 75%, transparent 76%);
}
.glass {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 32% 20%, rgba(255, 250, 235, 0.28), transparent 60%);
  box-shadow: inset 0 0 30px rgba(40, 25, 10, 0.45), inset 0 0 2px rgba(255, 240, 200, 0.7);
}
.zodiac {
  position: absolute; inset: -15%; border-radius: 50%; animation: spin 300s linear infinite;
  font-family: var(--han); color: rgba(138, 102, 48, 0.75); font-size: clamp(12px, 1.5vw, 19px);
}
.zodiac span { position: absolute; left: 50%; top: 0; height: 50%; transform-origin: 50% 100%; transform: translateX(-50%) rotate(calc(var(--i) * 30deg)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- title ---------------- */
.title-block .han { font-family: var(--han); letter-spacing: 0.6em; color: var(--red); font-size: 15px; margin-bottom: 2px; padding-left: 0.6em; }
.title-block h1 {
  font-family: var(--display); font-weight: 600; font-size: clamp(46px, 8vw, 80px); line-height: 1.05; margin: 0; color: var(--ink);
  letter-spacing: 0.005em;
}
.title-block .tag { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--red); margin: 6px 0 4px; }
.title-block .meta { font-size: 14.5px; color: var(--dim); margin: 22px 0 0; }
.title-block .meta b { color: var(--ink); font-weight: 600; }
.title-block .meta.dim { margin-top: 4px; font-size: 13.5px; }
.invite { margin: 18px auto; padding: 12px 16px; border: 1px solid rgba(178, 58, 43, 0.3); border-radius: 12px; background: var(--red-wash); font-size: 15px; max-width: 520px; }

/* ---------------- buttons ---------------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.center .actions, .actions.col { justify-content: center; }
.actions.col { flex-direction: column; align-items: center; }
.actions .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn {
  position: relative; padding: 11px 26px; border-radius: 999px; font-family: var(--display); font-size: 20px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink); background: rgba(251, 247, 239, 0.9); border: 1px solid var(--line2);
  transition: all 0.22s; min-height: 48px;
}
.btn:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.btn.primary {
  color: #fff7ec; border-color: transparent; background: var(--red);
  box-shadow: 0 8px 22px rgba(178, 58, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.primary:hover { background: var(--red2); color: #fff; box-shadow: 0 10px 28px rgba(178, 58, 43, 0.36); }
.btn.ghost { background: transparent; }
.btn small { font-family: var(--serif); font-weight: 400; font-size: 12px; opacity: 0.7; margin-left: 4px; }
.back { background: none; border: 0; color: var(--red); font-size: 14px; padding: 0; margin-bottom: 14px; }

/* ---------------- prose ---------------- */
.prose p { margin: 0 0 1.05em; }
.prose em { color: var(--red); font-style: italic; }
.prose strong { color: var(--ink); }
.prose .brk { text-align: center; color: var(--gold); margin: 1em 0; letter-spacing: 1em; }
a.cx { color: var(--indigo); text-decoration: none; cursor: pointer; border-bottom: 1px dashed rgba(63, 75, 108, 0.55); transition: all 0.2s; }
a.cx:hover { color: var(--red); border-bottom: 1px solid var(--red); background: var(--red-wash); }
.verse {
  position: relative; margin: 1.4em 0; padding: 0.3em 0 0.3em 1.3em;
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.36em; line-height: 1.5; color: var(--ink2);
  border-left: 2px solid var(--red);
}
.verse span { display: block; }
.verse cite { display: block; margin-top: 6px; font-family: var(--serif); font-style: normal; font-size: 0.58em; color: var(--dim); letter-spacing: 0.03em; }
.verse cite::before { content: '— '; }
.verse.small { font-size: 1.14em; border: 0; padding: 0; text-align: center; color: var(--ink2); }
.center .verse { border: 0; padding-left: 0; text-align: center; }
.dim { color: var(--dim); }
.center { text-align: center; }
.scene-head {
  display: flex; justify-content: space-between; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--red); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 22px;
}
.scene-head .dim { color: var(--dim); }

/* reveal: ink soaking into paper */
.rv { opacity: 0; animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------------- choices ---------------- */
.choices { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; }
.choice {
  width: 100%; display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 14px 18px 14px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 0 rgba(60, 40, 20, 0.04);
  font-size: 16.5px; line-height: 1.55; color: var(--ink); transition: all 0.22s; min-height: 52px;
}
.choice .num {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -1px; border-radius: 6px;
  font-family: var(--han); font-size: 15px; color: var(--red); border: 1px solid rgba(178, 58, 43, 0.35); transition: all 0.22s;
}
.choice:hover { border-color: rgba(178, 58, 43, 0.5); transform: translateX(4px); box-shadow: var(--shadow); }
.choice:hover .num { background: var(--red); color: #fff6ea; border-color: var(--red); }
.choice.picked { border-color: var(--red); background: #f8ebe2; }
.choice.picked .num { background: var(--red); color: #fff6ea; }
.choice .ct em { color: var(--red); }

/* ---------------- name form ---------------- */
.name-form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.name-form input, .cmp-form input, .cx-tools input {
  flex: 1 1 220px; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--card); color: var(--ink); font-family: var(--display); font-size: 21px; outline: none;
}
.name-form input:focus, .cmp-form input:focus, .cx-tools input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(178, 58, 43, 0.12); }
::placeholder { color: #9a8d7e; }

/* ---------------- life card ---------------- */
.life-card .chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); color: var(--ink2);
  background: rgba(251, 247, 239, 0.85); text-decoration: none;
}
.chip.era { color: var(--red); border-color: rgba(178, 58, 43, 0.35); }
.chip.tone.t-bi { color: #3f5f86; } .chip.tone.t-hai { color: #9a6a12; } .chip.tone.t-hung { color: #a8402a; }
.chip.tone.t-tinh { color: #a84a68; } .chip.tone.t-ngo { color: #3f7466; } .chip.tone.t-u { color: #5d4f86; }
.life-card .kiep { margin-top: 26px; font-family: var(--display); font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); font-size: 14px; }
.life-card h2 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.05; margin: 6px 0 12px; color: var(--ink); }
.life-card .form { font-size: 19px; margin: 0; }
.life-card .form b { color: var(--ink); font-weight: 600; }
.life-card .when { color: var(--dim); font-size: 15px; margin: 4px 0 20px; }
.life-card .teaser { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.4; color: var(--ink2); margin: 0 auto 18px; max-width: 30ch; }
.life-card .karma { font-size: 14.5px; color: var(--jade); margin: 0; }

/* ---------------- end card (a page with a seal) ---------------- */
.end-card {
  position: relative; margin-top: 32px; padding: 28px 28px 24px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 0 0 6px var(--card), inset 0 0 0 7px rgba(178, 58, 43, 0.18);
}
.end-card .seal {
  position: absolute; top: -18px; right: 20px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 6px;
  background: var(--red); color: #fbf1e4; font-family: var(--han); font-size: 28px; transform: rotate(6deg); box-shadow: 0 6px 16px rgba(178, 58, 43, 0.3);
}
.end-kicker { font-family: var(--display); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); font-size: 13px; }
.end-card h3 { font-family: var(--display); font-weight: 600; font-size: 38px; margin: 2px 0 6px; color: var(--ink); line-height: 1.1; }
.end-card .outcome { color: var(--ink2); margin: 0 0 10px; }
.lesson { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: rgba(79, 125, 112, 0.08); border-left: 3px solid var(--jade); font-size: 16.5px; }
.lesson span { display: block; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--jade); margin-bottom: 2px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; font-size: 13.5px; }
.cx-chips > span { color: var(--dim); }
.cx-chips a.chip { color: var(--indigo); cursor: pointer; border-color: rgba(63, 75, 108, 0.3); }
.cx-chips a.chip:hover { border-color: var(--red); color: var(--red); }

/* ---------------- summary ---------------- */
.summary { padding-top: 10px; }
.sum-head { text-align: center; }
.sum-head .han { font-family: var(--han); color: var(--red); letter-spacing: 0.5em; }
.sum-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 5vw, 54px); margin: 0 0 8px; color: var(--ink); line-height: 1.1; }
.title-seal {
  display: inline-flex; flex-direction: column; margin: 20px auto 10px; padding: 14px 36px; border-radius: 4px;
  background: var(--red); color: #fff4e6; box-shadow: 0 12px 30px rgba(178, 58, 43, 0.28), inset 0 0 0 4px var(--red), inset 0 0 0 5px rgba(255, 240, 220, 0.5);
  transform: rotate(-1.5deg);
}
.title-seal small { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.85; }
.title-seal strong { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 5vw, 48px); line-height: 1.15; }
.title-desc { max-width: 56ch; margin: 6px auto 0; color: var(--ink2); }
.sum-head .verse { border: 0; text-align: center; padding: 0; }
.sum-sec { margin-top: 56px; }
.sum-sec h2 { font-family: var(--display); font-weight: 600; font-size: 31px; color: var(--ink); margin: 0 0 16px; display: flex; align-items: center; gap: 14px; }
.sum-sec h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(178, 58, 43, 0.4), transparent); }
.sum-sec.two { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.lives { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.life-row { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 2px 0 rgba(60, 40, 20, 0.04); }
.life-row .thumb { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 3px #b8955a, 0 6px 14px rgba(80, 50, 20, 0.25); }
.lr-era { font-size: 12.5px; color: var(--red); letter-spacing: 0.04em; }
.lr-era .dim { color: var(--dim); }
.lr-title { font-family: var(--display); font-size: 25px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.lr-title .dim { font-family: var(--serif); font-size: 14px; font-weight: 400; }
.lr-end { font-size: 15px; margin-top: 4px; }
.lr-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lr-choices span { font-size: 12.5px; line-height: 1.4; padding: 3px 9px; border-radius: 8px; background: var(--paper2); color: var(--ink2); }
.souls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.soul { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 15px; }
.soul-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.soul-h b { font-family: var(--display); font-size: 23px; color: var(--ink); }
.badge { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--red-wash); color: var(--red); white-space: nowrap; }
.meter { height: 6px; border-radius: 6px; background: var(--paper2); margin: 10px 0; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #e3a598, var(--red)); }
.s-oan .meter i { background: linear-gradient(90deg, #a9b4cf, var(--indigo)); }
.s-conhan .meter i { background: linear-gradient(90deg, #a9cbbf, var(--jade)); }
.soul p { margin: 0 0 4px; }
.scale { display: flex; align-items: center; justify-content: center; padding: 20px 0 8px; }
.scale .pan { display: flex; flex-direction: column; align-items: center; width: 90px; }
.scale .pan b { font-family: var(--display); font-size: 46px; color: var(--ink); line-height: 1; }
.scale .pan span { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.scale .beam { width: 120px; height: 2px; background: var(--gold); transform: rotate(var(--tilt)); transition: transform 2s; position: relative; }
.scale .beam::after { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red); }
.traits { display: grid; gap: 7px; }
.tr { display: grid; grid-template-columns: 64px 1fr 26px; gap: 10px; align-items: center; font-size: 14px; }
.tr .bar { height: 8px; border-radius: 8px; background: var(--paper2); overflow: hidden; }
.tr .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9b07a, var(--gold2)); border-radius: 8px; }
.tr b { color: var(--ink); font-weight: 600; text-align: right; }
.lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lessons li { padding: 12px 16px; border-left: 2px solid var(--red); background: var(--card); border-radius: 0 10px 10px 0; font-family: var(--display); font-size: 21px; font-weight: 500; font-style: italic; line-height: 1.4; color: var(--ink2); }
.lessons li span { display: block; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: 0.1em; color: var(--red); text-transform: uppercase; }
.share-sec { padding: 26px; border-radius: 18px; border: 1px solid rgba(178, 58, 43, 0.25); background: radial-gradient(100% 100% at 100% 0, var(--wash-pink), transparent 60%), var(--card); }
.share-sec h2 { margin-top: 0; }
.cmp-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cmp-form input { font-size: 16px; font-family: var(--serif); }
.compare { margin-top: 20px; text-align: center; padding: 22px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.cmp-names { font-family: var(--display); font-size: 27px; font-weight: 600; color: var(--ink); display: flex; gap: 14px; justify-content: center; align-items: center; }
.cmp-names span { color: var(--red); }
.cmp-score { font-family: var(--display); font-size: 76px; line-height: 1; color: var(--red); margin: 8px 0; }
.cmp-score small { font-size: 18px; color: var(--dim); margin-left: 4px; }
.compare h3 { font-family: var(--display); font-size: 33px; margin: 0; color: var(--ink); }
.end-actions { justify-content: center; margin-top: 50px; }

/* ---------------- modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(60, 45, 30, 0.35); backdrop-filter: blur(6px); animation: fade 0.3s; }
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: relative; width: min(820px, 100%); max-height: min(88vh, 1000px); display: flex; flex-direction: column;
  border-radius: 16px; border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 40px 100px rgba(60, 40, 20, 0.3); animation: up 0.35s cubic-bezier(.2, .7, .2, 1);
}
@keyframes up { from { transform: translateY(20px); opacity: 0; } }
.modal-x { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink2); z-index: 2; }
.modal-x:hover { color: var(--red); border-color: var(--red); }
.modal-body { overflow-y: auto; padding: 30px 32px 34px; }
.modal-body h2 { font-family: var(--display); font-weight: 600; font-size: 36px; margin: 0 0 6px; color: var(--ink); padding-right: 44px; line-height: 1.15; }
.modal-body h2 small { font-family: var(--serif); font-weight: 400; font-size: 14px; color: var(--dim); margin-left: 8px; }
.modal-body h3 { font-family: var(--display); font-size: 23px; color: var(--ink); margin: 22px 0 8px; }
.cx-tools { display: grid; gap: 12px; margin: 16px 0; }
.cx-tools input { font-size: 17px; font-family: var(--serif); }
.cx-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-cats .chip { cursor: pointer; min-height: 32px; }
.cx-cats .chip.on { background: var(--red); color: #fff6ea; border-color: var(--red); }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cx-item { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); transition: all 0.2s; }
.cx-item:hover { border-color: var(--red); box-shadow: var(--shadow); }
.cx-item .cat { font-size: 11.5px; letter-spacing: 0.05em; color: var(--red); }
.cx-item b { font-family: var(--display); font-size: 21px; color: var(--ink); line-height: 1.2; font-weight: 600; }
.cx-item .sum { font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.cx-item.locked { opacity: 0.5; background: transparent; border-style: dashed; }
.cx-item.locked b { font-family: var(--han); letter-spacing: 0.2em; color: var(--dim); }
.entry .cat { font-size: 13px; color: var(--red); letter-spacing: 0.03em; }
.entry .truth { padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.truth.t-thuc { color: var(--jade); } .truth.t-truyen_thuyet { color: #6e4f98; } .truth.t-quan_niem { color: var(--gold2); } .truth.t-hu_cau { color: #a84a68; }
.entry h2 { font-size: 42px; line-height: 1.1; margin-top: 6px; }
.entry .lead { font-size: 19px; color: var(--ink2); font-style: italic; }
.sources { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim); }
.sources b { color: var(--ink); font-weight: 600; }
.sources ul { margin: 6px 0 0; padding-left: 18px; }
.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
.ledger td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ledger td:nth-child(2) { font-family: var(--display); font-size: 23px; color: var(--red); }
.mini-lives, .history { padding-left: 20px; }
.history li { margin-bottom: 12px; }

/* ---------------- toast ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 10px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); transition: all 0.35s; font-size: 15px;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) { #progress li { width: 30px; } #progress li em { display: none; } }
@media (max-width: 860px) {
  body { font-size: 16.5px; }
  :root { --hud: 58px; }
  .brand .bn { display: none; }
  #progress { gap: 2px; }
  #progress li span { width: 22px; height: 22px; font-size: 11px; }
  .mode-play #stage { display: block; }
  .mode-play #mirrorWrap { position: relative; height: auto; padding: calc(var(--hud) + 14px) 16px 8px; }
  .mode-play .mirror { width: min(68vw, 42vh, 400px); }
  .mode-play #panel { padding: 18px 16px 80px; min-height: 0; display: block; }
  .zodiac { inset: -14%; font-size: 12px; }
  .sum-sec.two { grid-template-columns: 1fr; }
  .souls { grid-template-columns: 1fr; }
  .modal-body { padding: 24px 18px 28px; }
  .life-row { grid-template-columns: 64px 1fr; gap: 12px; }
  .life-row .thumb { width: 64px; height: 64px; }
  .choice { font-size: 16px; padding: 12px 14px 12px 12px; }
  .mode-title #stage { padding-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .rv { opacity: 1; }
}

/* =========================================================
   DÂN GIAN — giấy điệp, khắc gỗ, trống đồng
   ========================================================= */
/* giấy điệp: ánh vỏ sò lấp lánh */
#bg::before {
  content: ''; position: absolute; inset: 0; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 13px 17px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 61px 43px, rgba(255, 250, 235, 0.8), transparent),
    radial-gradient(1.4px 1px at 97px 88px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 37px 110px, rgba(255, 248, 230, 0.8), transparent);
  background-size: 130px 130px;
}
/* dải hoa văn Đông Sơn ở chân trang */
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 18px; z-index: 2; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cg fill='none' stroke='%23241d18' stroke-width='1.3'%3E%3Ccircle cx='9' cy='9' r='4.5'/%3E%3Ccircle cx='9' cy='9' r='1.2' fill='%23241d18'/%3E%3Ccircle cx='27' cy='9' r='4.5'/%3E%3Ccircle cx='27' cy='9' r='1.2' fill='%23241d18'/%3E%3Cpath d='M13.5 11 L22.5 7 M13.5 7 L22.5 11'/%3E%3Cpath d='M0 .8h36M0 17.2h36'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / auto 18px,
    var(--paper2);
  opacity: 0.75;
}
.cloud { opacity: 0.22; }

/* khắc gỗ: viền mực + bóng in lệch */
.btn { border: 1.5px solid var(--ink); box-shadow: var(--block); border-radius: 10px; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); border-color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--red); color: #fff6e6; border-color: var(--ink); box-shadow: var(--block); }
.btn.primary:hover { background: var(--red2); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn.ghost { background: var(--card); }
.choice { border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 rgba(36, 29, 24, 0.85); }
.choice:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); border-color: var(--ink); background: #fff9ec; }
.choice .num { background: var(--gold); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 50%; }
.choice:hover .num { background: var(--red); color: #fff6e6; border-color: var(--ink); }
.choice.picked { background: #f6e3c4; }
.chip { border: 1.2px solid var(--ink); }
.chip.era { background: var(--red); color: #fff6e6; border-color: var(--ink); }
.chip.tone { background: var(--gold); color: var(--ink) !important; }
.end-card { border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink), inset 0 0 0 6px var(--card), inset 0 0 0 7.5px var(--red); }
.end-card .seal { border: 1.5px solid var(--ink); }
.lesson { background: rgba(47, 107, 79, 0.08); }
.life-row, .soul, .cx-item:not(.locked) { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 rgba(36, 29, 24, 0.85); }
.title-seal { border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink), inset 0 0 0 4px var(--red), inset 0 0 0 5px rgba(255, 240, 220, 0.6); }
.share-sec { border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.ico { border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--card); }
.ico svg { stroke: var(--ink); }
.sheet { border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink), 0 40px 90px rgba(60, 40, 20, 0.25); }
.name-form input, .cmp-form input, .cx-tools input { border: 1.5px solid var(--ink); border-radius: 10px; }
.meter, .tr .bar { border: 1px solid var(--line2); }
.meter i { background: var(--red); } .s-oan .meter i { background: var(--indigo); } .s-conhan .meter i { background: var(--jade); }
.tr .bar i { background: var(--gold); }
.title-block h1, .life-card h2, .sum-head h1 { text-shadow: 2px 2px 0 rgba(201, 154, 34, 0.35); }

/* gương = mặt trống đồng */
.rim {
  inset: -9%;
  background:
    repeating-conic-gradient(from 0deg, #3a2a14 0 2deg, transparent 2deg 6deg),
    radial-gradient(circle, #8a6a32 0 70%, #6b4f22 70% 100%);
  -webkit-mask: radial-gradient(circle, transparent 60.6%, #000 61%);
  mask: radial-gradient(circle, transparent 60.6%, #000 61%);
  box-shadow: 0 22px 50px rgba(70, 45, 15, 0.3);
  border: 2px solid var(--ink);
}
.rim::before { /* vành răng cưa + vành vòng tròn tiếp tuyến */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 61%, #c9a05a 61.3% 66%, transparent 66.3%),
    radial-gradient(circle, transparent 72%, #d8b46a 72.3% 78%, transparent 78.3%),
    radial-gradient(circle, transparent 86%, #c9a05a 86.3% 92%, transparent 92.3%),
    radial-gradient(circle, transparent 66%, #3a2a14 66.3% 72%, transparent 72.3%),
    radial-gradient(circle, transparent 78%, #4a3618 78.3% 86%, transparent 86.3%);
}
.rim::after {
  inset: 0;
  background:
    repeating-conic-gradient(from 3deg, rgba(36, 22, 8, 0.85) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 61.5%, #000 62%, #000 65.5%, transparent 66%, transparent 86.5%, #000 87%, #000 91.5%, transparent 92%);
  mask: radial-gradient(circle, transparent 61.5%, #000 62%, #000 65.5%, transparent 66%, transparent 86.5%, #000 87%, #000 91.5%, transparent 92%);
}
.zodiac { inset: -19%; color: var(--ink2); font-weight: 600; }
.mirror canvas { border: 2px solid var(--ink); }
.mirror::before { inset: -30%; background: radial-gradient(circle, rgba(201, 154, 34, 0.22), rgba(181, 48, 42, 0.08) 45%, transparent 70%); }

/* =========================================================
   THỦY MẶC × DÂN GIAN — núi mực loang, sương, nét bút lông
   ========================================================= */
:root { --block: 2px 3px 0 rgba(36, 29, 24, 0.78); }
#bg .ink-mountains {
  position: absolute; left: -5%; right: -5%; bottom: 0; height: 46vh; min-height: 260px;
  background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23241d18' stop-opacity='.20'/%3E%3Cstop offset='1' stop-color='%23241d18' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23241d18' stop-opacity='.32'/%3E%3Cstop offset='.8' stop-color='%23241d18' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232b3a40' stop-opacity='.42'/%3E%3Cstop offset='.7' stop-color='%232b3a40' stop-opacity='.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23a)' d='M0 210 L70 150 L120 175 L190 80 L240 140 L300 110 L360 170 L430 60 L470 120 L540 150 L610 90 L680 160 L760 70 L820 130 L900 100 L960 160 L1030 50 L1090 130 L1200 110 V400 H0Z'/%3E%3Cpath fill='url(%23b)' d='M0 290 C60 250 90 200 140 230 C180 180 210 150 250 210 C300 250 330 190 380 220 C420 170 470 230 520 260 C600 300 640 230 700 250 C760 200 800 180 850 240 C900 270 950 220 1010 250 C1060 210 1120 230 1200 260 V400 H0Z'/%3E%3Cpath fill='url(%23c)' d='M0 340 C80 300 120 330 170 300 C230 270 260 320 320 330 C400 345 430 300 500 320 C560 335 640 360 720 330 C780 310 840 340 900 330 C980 315 1040 350 1100 330 C1150 315 1180 330 1200 330 V400 H0Z'/%3E%3C/svg%3E");
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
  mask: linear-gradient(180deg, #000 55%, transparent);
}
#bg .ink-sun {
  position: absolute; top: 12vh; right: 7vw; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #d4513f, #b5302a 60%, rgba(181, 48, 42, 0.0) 72%);
  opacity: 0.55; filter: blur(0.6px);
}
#bg .ink-mist {
  position: absolute; left: -20%; right: -20%; bottom: 22vh; height: 14vh;
  background: radial-gradient(ellipse at 30% 50%, rgba(242, 231, 207, 0.95), transparent 60%),
              radial-gradient(ellipse at 75% 60%, rgba(242, 231, 207, 0.85), transparent 55%);
  animation: mist 60s ease-in-out infinite;
}
@keyframes mist { 50% { transform: translateX(6%); } }
.mode-summary #bg .ink-sun, .mode-play #bg .ink-sun { opacity: 0.35; }

/* nét bút lông dưới tiêu đề */
.title-block h1, .life-card h2, .sum-head h1, .end-card h3 { position: relative; display: inline-block; }
.title-block h1::after, .life-card h2::after, .sum-head h1::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -0.08em; height: 0.22em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C40 6 90 9 140 8 C190 7 240 5 296 9 C250 15 180 16 120 15 C70 15 30 17 4 13Z' fill='%23b5302a' fill-opacity='.55'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.sum-sec h2::after { height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 C60 1 120 4 180 2.5 C230 1.5 270 3 300 3 C250 5 150 5.5 0 4Z' fill='%23241d18' fill-opacity='.45'/%3E%3C/svg%3E") no-repeat left / 100% 100%; }
.scene-head { border-bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 C60 1 120 4 180 2.5 C230 1.5 270 3 300 3 C250 5 150 5.5 0 4Z' fill='%23241d18' fill-opacity='.35'/%3E%3C/svg%3E") no-repeat bottom / 100% 5px; }
.verse { border-left: 0; padding-left: 1.5em; }
.verse::before { /* nét mực dọc */
  content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 100' preserveAspectRatio='none'%3E%3Cpath d='M3 0 C5 20 1 40 3.5 60 C5 75 2 90 3 100 C1 80 0.5 50 1.5 30 C2 15 1.5 5 3 0Z' fill='%23b5302a'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.center .verse::before, .verse.small::before, .sum-head .verse::before { display: none; }
/* panel đọc như một tờ giấy dó trải trên tranh */
.mode-play .panel-inner:not(.center) {
  background: linear-gradient(180deg, rgba(251, 244, 226, 0.88), rgba(251, 244, 226, 0.78));
  padding: 30px 34px 34px; border-radius: 4px;
  box-shadow: 0 1px 0 rgba(36, 29, 24, 0.15), 0 20px 50px rgba(60, 40, 15, 0.10);
  backdrop-filter: blur(2px);
}
@media (max-width: 860px) { .mode-play .panel-inner:not(.center) { padding: 22px 18px 26px; } #bg .ink-sun { width: 80px; height: 80px; } }
.mode-summary #hud, .mode-play #hud { background: linear-gradient(180deg, rgba(242, 231, 207, 0.96) 60%, rgba(242, 231, 207, 0)); }
@media (max-width: 520px) {
  #hud { gap: 6px; padding: 0 10px; }
  .brand { display: none; }
  #progress li { width: 22px; }
  #progress li span { width: 20px; height: 20px; font-size: 10px; }
  .tools { gap: 4px; }
  .ico { width: 40px; height: 40px; box-shadow: 1.5px 1.5px 0 var(--ink); }
  .mode-play .mirror { width: min(64vw, 40vh); }
  .zodiac { inset: -17%; font-size: 11px; }
  .title-block h1 { font-size: 46px; }
}
html, body { overflow-x: clip; }

/* =========================================================
   SỔ LUÂN HỒI v2 — quẻ, nhân vật, lá bài, tâm tính, số liệu
   ========================================================= */
.center-row { justify-content: center; }
.btn .bi { width: 16px; height: 16px; fill: currentColor; vertical-align: -2px; margin-right: 4px; }
.soulcard {
  display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; margin-top: 30px; padding: 28px 30px;
  background: radial-gradient(120% 120% at 0 0, rgba(181, 48, 42, 0.10), transparent 55%), var(--card);
  border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 var(--ink), inset 0 0 0 7px var(--card), inset 0 0 0 8.5px var(--red);
}
.sc-left { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sc-tri { width: 150px; height: 150px; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7.5px rgba(201, 154, 34, 0.7); }
.sc-quai { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--red); }
.sc-han { font-family: var(--han); }
.sc-right small { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--red); }
.sc-right h2 { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; margin: 2px 0 6px; }
.sc-ess { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ink2); margin: 0 0 12px; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip.ok { background: rgba(47, 107, 79, 0.1); color: var(--jade); border-color: var(--jade); }
.chip.warn { background: rgba(58, 100, 160, 0.08); color: #3a64a0; border-color: #3a64a0; }
.soulcard .title-seal { margin: 8px 0 0; padding: 8px 22px; }
.soulcard .title-seal strong { font-size: 28px; }
.verdict { padding: 22px 26px; background: var(--card); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; font-size: 17.5px; }
.verdict p:first-child::first-letter { font-family: var(--display); font-size: 3.2em; float: left; line-height: 0.85; margin: 6px 8px 0 0; color: var(--red); font-weight: 600; }
.figure { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; padding: 20px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 rgba(36, 29, 24, 0.85); }
.fig-art { width: 180px; height: 180px; border-radius: 50%; box-shadow: 0 0 0 6px #8a6a32, 0 0 0 8px var(--ink), 0 10px 24px rgba(60, 40, 15, 0.25); }
.fig-pct { font-family: var(--display); font-weight: 600; font-size: 54px; line-height: 1; color: var(--red); }
.fig-pct small { font-family: var(--serif); font-size: 13px; font-weight: 400; color: var(--dim); margin-left: 6px; }
.figure h3 { font-family: var(--display); font-size: 34px; margin: 4px 0 0; line-height: 1.1; }
.figure p { margin: 6px 0; }
/* tarot deck */
.deck { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; perspective: 1200px; }
.tcard { width: 150px; height: 240px; padding: 0; border: 0; background: none; cursor: pointer; }
.tc-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.tcard.flip .tc-inner { transform: rotateY(180deg); }
.tcard:hover .tc-inner { translate: 0 -4px; }
.tc-back, .tc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 4px 0 rgba(36, 29, 24, 0.85); overflow: hidden; }
.tc-back {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fbf1e4;
  background:
    radial-gradient(circle, transparent 28%, rgba(251, 241, 228, 0.5) 29%, rgba(251, 241, 228, 0.5) 31%, transparent 32%, transparent 44%, rgba(251, 241, 228, 0.4) 45%, rgba(251, 241, 228, 0.4) 47%, transparent 48%),
    repeating-conic-gradient(from 0deg, rgba(251, 241, 228, 0.18) 0 4deg, transparent 4deg 12deg),
    var(--red);
}
.tc-han { font-family: var(--han); font-size: 40px; }
.tc-hint { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.tc-front { transform: rotateY(180deg); background: var(--card); display: flex; flex-direction: column; align-items: center; padding: 8px 8px 10px; text-align: center; }
.tc-top { display: flex; justify-content: space-between; width: 100%; font-family: var(--han); color: var(--red); font-size: 15px; }
.tc-suit small { font-family: var(--serif); font-size: 10px; margin-left: 2px; }
.tc-art { width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 3px #8a6a32, 0 0 0 4.5px var(--ink); margin: 4px 0 8px; }
.tc-title { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.15; }
.tc-form { font-size: 10.5px; color: var(--dim); line-height: 1.3; margin-top: 2px; }
.tc-end { margin-top: auto; font-size: 11.5px; color: var(--red); font-weight: 600; }
/* analysis */
.two { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: center; }
.radar { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.radar text { font-family: var(--serif); }
.rd-pt { cursor: default; }
.axes { display: grid; gap: 14px; }
.axis { display: grid; grid-template-columns: 90px 1fr 90px; gap: 10px; align-items: center; }
.axis b { display: block; font-family: var(--display); font-size: 20px; line-height: 1; color: var(--dim); }
.axis small { display: block; font-size: 11.5px; color: var(--dim); line-height: 1.3; }
.ax-l { text-align: right; } .ax-l.on b { color: #3a64a0; } .ax-r.on b { color: var(--red); }
.ax-bar { position: relative; height: 12px; border-radius: 12px; background: var(--paper2); border: 1px solid var(--line2); }
.ax-bar i { position: absolute; top: 0; bottom: 0; border-radius: 12px; }
.ax-bar i.yang { background: var(--red); } .ax-bar i.yin { background: #3a64a0; }
.ax-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #8c8278; }
.love { margin-top: 16px; padding: 12px 14px; background: rgba(181, 48, 42, 0.06); border-radius: 8px; font-size: 15.5px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { padding: 16px 14px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 2px 3px 0 rgba(36, 29, 24, 0.8); }
.stat b { display: block; font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.05; color: var(--ink); }
.stat span { display: block; font-size: 13px; font-weight: 600; color: var(--red); margin-top: 4px; }
.stat small { display: block; font-size: 12px; color: var(--dim); line-height: 1.35; }
.memo { margin-top: 14px; font-size: 15.5px; }
.advice { padding-left: 0; list-style: none; counter-reset: a; display: grid; gap: 10px; margin: 0; }
.advice li { counter-increment: a; position: relative; padding: 12px 16px 12px 54px; background: var(--card); border-radius: 10px; border: 1px solid var(--line); font-size: 16.5px; }
.advice li::before { content: counter(a); position: absolute; left: 14px; top: 11px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); border: 1.5px solid var(--ink); font-family: var(--display); font-weight: 600; }
.gifts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.gift { padding: 16px 18px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 rgba(36, 29, 24, 0.85); }
.gift > span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.gift .verse { margin: 10px 0 0; font-size: 1.12em; }
.song { font-family: var(--display); font-style: italic; font-size: 26px; margin: 10px 0 8px; line-height: 1.2; }
.song small { display: block; font-family: var(--serif); font-style: normal; font-size: 13px; color: var(--dim); }
.cmp-q { font-size: 15px; color: var(--ink2); }
/* film */
.film-modal { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px; background: rgba(40, 30, 20, 0.72); backdrop-filter: blur(8px); animation: fade 0.3s; }
.film-box { position: relative; height: min(84vh, 1280px); aspect-ratio: 9 / 16; max-width: 100%; }
.film-box canvas { width: 100%; height: 100%; border-radius: 10px; border: 1.5px solid var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); background: var(--paper); }
.film-gate, .film-rec { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; text-align: center; border-radius: 10px; background: rgba(251, 244, 226, 0.94); }
.film-gate[hidden], .film-rec[hidden] { display: none; }
.film-gate h3 { font-family: var(--display); font-size: 32px; margin: 0; }
.film-gate p { margin: 0; max-width: 34ch; }
.small { font-size: 13px; }
.seal-lg { width: 70px; height: 70px; display: grid; place-items: center; background: var(--red); color: #fbf1e4; font-family: var(--han); font-size: 40px; border-radius: 6px; transform: rotate(-4deg); border: 1.5px solid var(--ink); }
.spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--paper2); border-top-color: var(--red); animation: spin 1s linear infinite; }
.film-ctrl { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); }
.film-ctrl input[type=range] { flex: 1; accent-color: var(--red); }
.film-ctrl .ico svg { fill: var(--ink); stroke: var(--ink); }
@media (max-width: 860px) {
  .soulcard { grid-template-columns: 1fr; text-align: center; padding: 22px 18px; }
  .sc-tags { justify-content: center; }
  .figure { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .gifts { grid-template-columns: 1fr; }
  .tcard { width: 132px; height: 212px; }
  .tc-art { width: 90px; height: 90px; }
  .axis { grid-template-columns: 70px 1fr 70px; }
}
.stat b { font-size: clamp(22px, 2.4vw, 32px); white-space: nowrap; }
.gift .verse { font-size: 1.05em; }
.film-gate .btn { font-size: 18px; white-space: nowrap; padding: 10px 20px; } .film-gate h3 { line-height: 1.15; }
.journey { text-align: center; margin: 18px auto 0; font-size: 15px; color: var(--ink2); }
.journey b { color: var(--red); font-family: var(--display); font-size: 1.15em; letter-spacing: 0.02em; }
.copybox { width: 100%; font: 15px/1.5 var(--serif); padding: 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); }
.share-img { display: block; width: 100%; max-width: 420px; margin: 12px auto 0; border: 1.5px solid var(--ink); border-radius: 6px; }
.sign-trail { margin-top: 8px; font-size: 13.5px; }
.sign-trail summary { cursor: pointer; color: var(--red); font-weight: 600; }
.sign-trail ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.sign-trail li { line-height: 1.45; }
.sk { display: inline-block; min-width: 34px; margin-right: 6px; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; font-size: 11px; text-align: center; }
.sk-ro { color: var(--jade); } .sk-mo { color: #3a64a0; } .sk-lech { color: var(--gold2); } .sk-ngo { color: var(--dim); }
.passing { margin: 20px auto 0; max-width: 520px; text-align: left; font-size: 15px; color: var(--ink2); padding: 14px 18px; border-left: 2px solid var(--gold); background: rgba(201, 154, 34, 0.08); border-radius: 0 8px 8px 0; }
.passing p { margin: 0 0 6px; }
.passing ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-style: italic; }
.stats { grid-template-columns: repeat(4, 1fr); }
.memline { margin: 12px auto 0; max-width: 520px; font-size: 14px; color: #3a64a0; font-style: italic; }
.passing .pw { font-style: normal; font-weight: 600; color: var(--red); }
.econline { margin: 14px auto 0; max-width: 520px; font-size: 14.5px; color: var(--red); }
.me-line { margin: 4px auto 0; color: var(--dim); font-size: 15px; } .who-form { display: grid; gap: 12px; margin-top: 16px; } .wf-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; } .wf-row > span { font-size: 14.5px; color: var(--ink2); } .wf-row input[type=date], .wf-row input[type=number], .wf-row input:not([type]) { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card); color: var(--ink); font: 17px var(--serif); } .wf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip-opt input { position: absolute; opacity: 0; } .chip-opt span { display: inline-block; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); cursor: pointer; font-size: 14.5px; } .chip-opt input:checked + span { background: var(--red); color: #fff6e6; } .chip-opt input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; } @media (max-width: 560px) { .wf-row { grid-template-columns: 1fr; gap: 4px; } }

/* live counters on the title screen */
.live-stats { margin-top: .2rem; }
.live-stats b { color: var(--red); }
.live-dot { display: inline-block; width: .5em; height: .5em; margin: 0 .35em .08em 0; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 0 rgba(63,155,90,.5); animation: livePulse 2s infinite; vertical-align: middle; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 .5em rgba(63,155,90,0); } 100% { box-shadow: 0 0 0 0 rgba(63,155,90,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- người đời: ending rarity, reactions, comments ---------- */
.soc { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.soc-rare { font-size: .95rem; color: var(--ink2); }
.soc-rare b { color: var(--red); }
.soc-emo { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
.emo { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.emo span { font-size: 1.15rem; line-height: 1; }
.emo b { font-size: .8rem; font-weight: 600; color: var(--dim); min-width: .5em; }
.emo:hover { transform: translateY(-1px); border-color: var(--red); }
.emo.on { border-color: var(--red); background: var(--red-wash); }
.emo.on b { color: var(--red); }
.soc-open small { color: var(--dim); margin-left: .3rem; }
.soc-comments { margin-top: .8rem; }
.soc-tabs { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .7rem; }
.soc-tabs .sp { flex: 1; }
.soc-tabs button { font: inherit; font-size: .85rem; padding: .25rem .65rem; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--dim); cursor: pointer; }
.soc-tabs button.on { border-color: var(--ink); color: var(--ink); background: var(--card); }
.soc-form { display: grid; gap: .5rem; padding: .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); margin-bottom: .9rem; }
.soc-me { display: flex; gap: .6rem; align-items: center; }
.soc-me > div { flex: 1; min-width: 0; }
.soc-nick, .soc-text { width: 100%; font: inherit; font-size: 1rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); box-sizing: border-box; }
.soc-text { resize: vertical; min-height: 4.2em; }
.soc-nick:focus, .soc-text:focus { outline: 2px solid var(--red-wash); border-color: var(--red); }
.soc-send { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; align-items: center; }
.soc-login { display: inline-flex; gap: .4rem; align-items: center; margin-right: auto; flex-wrap: wrap; }
.soc-note, .small { font-size: .78rem; }
.soc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.cmt { display: flex; gap: .65rem; align-items: flex-start; }
.cmt.top .cmt-b { border-color: var(--gold); box-shadow: 3px 3px 0 var(--gold2); }
.cmt.pending { opacity: .7; }
.cmt-b { flex: 1; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.cmt-b p { margin: .25rem 0; overflow-wrap: anywhere; }
.cmt-h { font-size: .85rem; }
.kind { font-style: normal; font-size: .7rem; margin-left: .35rem; padding: .05rem .4rem; border-radius: 3px; background: var(--paper2); color: var(--dim); }
.kind.hot { background: var(--red-wash); color: var(--red); }
.cmt-a { display: flex; gap: .7rem; font-size: .8rem; }
.cmt-a button { font: inherit; background: none; border: 0; padding: 0; color: var(--dim); cursor: pointer; }
.cmt-a button.on { color: var(--red); }
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; border: 1.5px solid var(--ink); background: var(--paper2); }
.av-empty { display: inline-grid; place-items: center; font-weight: 600; color: var(--dim); }
.soc-more { margin-top: .6rem; }
.cmt-w { flex: 1; min-width: 0; }
.cmt-b { position: relative; }
.cmt-rs { position: absolute; right: .5rem; bottom: -.7rem; padding: .05rem .4rem; font-size: .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.cmt-rs b { font-weight: 600; color: var(--dim); font-size: .75rem; }
.cmt-a { margin: .35rem 0 0 .5rem; }
.pick-wrap { position: relative; }
.picker { position: absolute; left: 0; bottom: 1.6rem; z-index: 5; display: flex; gap: .1rem; padding: .25rem .35rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: 0 4px 14px rgba(36,29,24,.15); }
.picker[hidden] { display: none; }
.picker button { font-size: 1.25rem; padding: .1rem .2rem; border-radius: 50%; transition: transform .12s; }
.picker button:hover, .picker button.on { transform: scale(1.25); }
.cmt-replies { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .6rem; }
.cmt.reply .av { width: 30px; height: 30px; }
.at { color: var(--red); font-weight: 600; }
.reply-form { display: grid; gap: .4rem; margin-top: .5rem; }
.reply-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); resize: vertical; }