/* Rút thông điệp: mọi quy tắc của màn rút bài nằm trong #ritual để không đụng class của feed (.in, .card...). */
/* lối vào rút bài, nằm cạnh số bài ở góc dưới bên phải */
#dock{position:fixed;right:28px;bottom:12px;display:flex;align-items:center;gap:20px;z-index:5}
#dock .count{position:static}
#open{appearance:none;background:none;border:0;color:var(--fg);cursor:pointer;display:flex;align-items:center;gap:12px;padding:4px 0;white-space:nowrap}
#open:hover .act,#open:focus-visible .act{background-size:100% 1px}
/* bộ bài nhỏ: lơ lửng liên tục, hover thì xòe thành ba lá */
.deck{position:relative;display:block;width:34px;height:55px;margin:0 22px 0 24px;animation:deck-drift 4.2s ease-in-out infinite}
@keyframes deck-drift{0%,100%{transform:translateY(2.5px) rotate(4deg)}50%{transform:translateY(-3.5px) rotate(6.5deg)}}
.mini{position:absolute;inset:0;border-radius:4px;background:#0a0907 url(the-bai/mat-sau.jpg) center/100% 100%;box-shadow:0 0 0 1px rgba(226,178,110,.45);transform-origin:50% 92%;transition:transform .42s cubic-bezier(.34,1.5,.64,1),box-shadow .3s}
.mini.a{transform:rotate(-1.5deg)}.mini.b{transform:rotate(1.5deg)}
#open:hover .mini.a,#open:focus-visible .mini.a{transform:translate(-13px,1px) rotate(-19deg)}
#open:hover .mini.b,#open:focus-visible .mini.b{transform:translate(13px,1px) rotate(19deg);transition-delay:.03s}
#open:hover .mini.c,#open:focus-visible .mini.c{transform:translateY(-6px);transition-delay:.05s}
#open:hover .mini,#open:focus-visible .mini{box-shadow:0 0 0 1px rgba(226,178,110,.8),0 6px 18px rgba(226,178,110,.14)}

/* màn rút bài: phủ toàn màn hình, nền tối hơn trang để viền lá sáng lên */
#ritual{touch-action:none;user-select:none;-webkit-user-select:none;position:fixed;inset:0;background:#0b0b0b;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s;z-index:20;overflow:hidden}
#ritual.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s}
#ritual.picked{touch-action:auto}/* đã lật: bài dài trên điện thoại cuộn được trong lá */
#ritual.instant,#ritual.instant *{transition:none!important}
#glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 62% 40%,rgba(130,92,44,.2),transparent 70%);pointer-events:none}
#scene{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%;pointer-events:none}
#stack{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
#dustB,#dustF{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#dustF{transition:opacity .6s}#ritual.picked #dustF{opacity:0}
#x{position:absolute;right:28px;top:14px;appearance:none;background:none;border:0;border-radius:var(--r);color:var(--sub);font:500 var(--fs-2) "JetBrains Mono",monospace;cursor:pointer;padding:8px 0;letter-spacing:.08em;z-index:200;transition:color .2s}
#x:hover{color:var(--fg)}
#after{position:absolute;bottom:12px;left:0;right:0;display:flex;align-items:baseline;line-height:1.3;justify-content:center;gap:18px;opacity:0;transition:opacity .7s;pointer-events:none;font-size:var(--fs-3);color:var(--dim);padding:0 16px;flex-wrap:wrap;z-index:150}
#after.on{opacity:1;pointer-events:auto}
#dl.act{appearance:none;border:0;border-bottom:1px solid var(--rule);padding:0 0 3px;cursor:pointer}
#dl.act[disabled]{opacity:.6;cursor:default}
#dl.act:focus-visible{background-size:100% 1px}
#home{position:absolute;left:24px;top:18px;display:block;height:24px;z-index:200}#home svg{display:block}

/* lá bài */
#ritual .tc{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);margin-top:calc(var(--h)/-2);transform-style:preserve-3d;cursor:pointer;will-change:transform;pointer-events:auto}
/* vùng rê chuột vô hình, giữ nguyên ở vị trí gốc của dải để hover không tự bật tắt khi các lá xích ra */
#ritual .hit{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);margin-top:calc(var(--h)/-2);border-radius:12px;cursor:pointer;pointer-events:auto;will-change:transform}
#stack.px .tc{pointer-events:none!important}#ritual.picked .hit{display:none}
#ritual.picked .tc{transition:transform .85s cubic-bezier(.3,.1,.2,1),opacity .4s;cursor:default}
#ritual.picked .tc.cho{transition:transform .85s cubic-bezier(.3,.1,.2,1),width .85s cubic-bezier(.3,.1,.2,1),height .85s cubic-bezier(.3,.1,.2,1),margin .85s cubic-bezier(.3,.1,.2,1);user-select:text;-webkit-user-select:text}
#ritual .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,.1,.2,1)}
#ritual .tc.flip .in{transform:rotateY(180deg)}
#ritual .f{position:absolute;inset:0;border-radius:12px;overflow:hidden}
/* mặt sau: ảnh mèo khung vàng, để nguyên cả khung; viền mảnh để lá tách khỏi nền tối */
#ritual .bk{background:#0a0907 url(the-bai/mat-sau.jpg) center/100% 100%;box-shadow:0 0 0 1px rgba(226,178,110,.5),0 0 26px rgba(226,178,110,.1)}
#ritual .bk::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,240,210,.12),transparent 34%,transparent 72%,rgba(255,240,210,.05));pointer-events:none}
#ritual .sh{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
#ritual .tc.cho .f{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#ritual .fr{transform:rotateY(180deg);background:#050403;box-shadow:0 0 0 1px rgba(226,178,110,.5);--sl:68px;--ins:15%}
/* nền mặt trong: bốn góc có sao giữ nguyên tỉ lệ, phần giữa giãn theo bề rộng lá */
#ritual .fr::before{content:"";position:absolute;inset:0;border-style:solid;border-width:var(--sl);border-image:url(the-bai/mat-trong.jpg) 170 fill stretch}
#ritual .fr .top,#ritual .fr .bot{position:absolute;left:0;right:0;text-align:center;font-size:9.5px;color:#D8AE6E;white-space:nowrap;transform:translateY(-50%)}
#ritual .fr .top{top:calc(var(--sl)*.6)}#ritual .fr .bot{bottom:calc(var(--sl)*.6);transform:translateY(50%)}
/* khối chữ chỉ chiếm khoảng 2/3 lá, còn lại là khoảng thở */
#ritual .fr .bd{position:absolute;left:var(--inx,10%);right:var(--inx,10%);top:var(--ins);bottom:var(--ins);display:flex;align-items:center;justify-content:center;overflow:hidden}
#ritual .fr .t{font-family:"EB Garamond",serif;font-weight:400;color:var(--fg);white-space:pre;letter-spacing:.012em;width:max-content;flex:none}/* pre: xuống dòng đúng như tác giả viết */
#ritual .fr .t p+p{margin-top:.5em}
#ritual .fr .sig{text-transform:none;letter-spacing:.04em}
@media (max-width:760px){#after{font-size:12px;gap:12px}#x{right:18px}}
@media (max-width:520px){.hint{display:none}#dock{right:18px;gap:12px}.deck{margin:0 18px 0 18px}}
@media (prefers-reduced-motion:reduce){.deck{animation:none;transform:rotate(4deg)}.mini,#ritual .in,#ritual .tc,#ritual.picked .tc,#ritual.picked .tc.cho{transition:none!important}}
/* đã rút trong ngày: một lá lật ngửa thay cho ba lá úp */
#dock.drawn .mini.a,#dock.drawn .mini.b{opacity:0}
#dock.drawn .mini.c{background-image:url(the-bai/mat-trong.jpg)}
#dock.drawn .mini.c::after{content:"";position:absolute;left:24%;right:24%;top:34%;bottom:36%;background:repeating-linear-gradient(to bottom,rgba(216,174,110,.75) 0 1px,transparent 1px 5px)}