/* ===== 墨问塔罗 · 真水墨 · 响应式 ===== */
:root{
  --paper:oklch(94% 0.024 85); --paper-2:oklch(90.5% 0.026 83); --paper-warm:oklch(95.5% 0.02 86);
  --ink:oklch(27% 0.012 55); --ink-deep:oklch(18% 0.012 52); --ink-2:oklch(36% 0.012 55);
  --ink-3:oklch(48% 0.012 58); --ink-soft:oklch(44% 0.011 56); --ink-faint:oklch(62% 0.01 60);
  --seal:oklch(48% 0.162 33); --bronze:oklch(50% 0.038 64); --dai:oklch(42% 0.03 210);
  --hair:oklch(35% 0.016 56 / .15); --hair-soft:oklch(35% 0.016 56 / .08);
  --serif:"Noto Serif SC",serif; --disp:"ZCOOL XiaoWei","Noto Serif SC",serif; --bms:"Ma Shan Zheng",cursive;
  --ease:cubic-bezier(.4,.1,.2,1);
  --mountains:url("assets/ink/mountains.png"); --bloom:url("assets/ink/bloom.png"); --brush:url("assets/ink/brush.png");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:var(--serif);color:var(--ink);background:var(--paper);line-height:1.85;
  -webkit-font-smoothing:antialiased;min-height:100vh;}
::selection{background:oklch(48% 0.162 33 / .18);}
a{cursor:pointer;color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:inherit;}
img{display:block;max-width:100%;}

/* 全屏水墨背景：远山 + 墨晕 + 纸纹 */
#ink-bg{position:fixed;inset:0;z-index:-1;background:var(--paper);}
#ink-bg::after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:34vh;min-height:200px;
  background:var(--mountains) no-repeat bottom center;background-size:cover;opacity:.34;mix-blend-mode:multiply;}
#ink-bg::before{content:"";position:absolute;top:-6%;right:-8%;width:46vw;max-width:620px;height:46vw;max-height:620px;
  background:var(--bloom) no-repeat center/contain;opacity:.5;mix-blend-mode:multiply;}

/* 视图切换 */
.view{display:none;min-height:100vh;}
.view.on{display:block;}
.leaf{max-width:760px;margin:0 auto;padding:34px 24px 120px;position:relative;}
.leaf.narrow{max-width:520px;}

/* atoms */
.kicker{font-family:var(--serif);font-size:11px;letter-spacing:.46em;color:var(--bronze);text-indent:.46em;}
.kicker.center{text-align:center;display:block;}
.leaf-h{font-family:var(--disp);font-weight:400;font-size:clamp(24px,5vw,34px);letter-spacing:.06em;color:var(--ink-deep);margin:6px 0 12px;line-height:1.5;}
.leaf-h em{font-style:normal;color:var(--seal);}
.leaf-lead{font-weight:300;font-size:14px;color:var(--ink-soft);margin:0 0 26px;}
.ink-divider{height:26px;background:var(--brush) no-repeat center/contain;opacity:.55;margin:30px 0;}

.seal{display:grid;place-items:center;background:var(--seal);color:var(--paper-warm);font-family:var(--bms);
  width:38px;height:38px;border-radius:3px;font-size:22px;line-height:1;box-shadow:inset 0 0 0 1px oklch(95% .02 84 / .3);}
.seal.sm{width:30px;height:30px;font-size:18px;}

.btn{display:flex;align-items:center;justify-content:center;width:100%;border:none;cursor:pointer;
  font-family:var(--disp);font-size:16px;letter-spacing:.4em;text-indent:.4em;color:var(--paper-warm);
  padding:15px;border-radius:3px;background:var(--ink-deep);box-shadow:0 12px 28px -18px oklch(18% .02 50 / .7);
  transition:transform .2s var(--ease),background .2s var(--ease);}
.btn:hover{transform:translateY(-2px);background:oklch(14% .012 50);}
.btn.ghost{background:none;color:var(--ink-deep);box-shadow:none;position:relative;}
.btn.ghost::after{content:"";position:absolute;left:22%;right:22%;bottom:7px;height:9px;background:var(--brush) no-repeat center/contain;opacity:.5;}
.btn.sm{font-size:14px;padding:12px;letter-spacing:.3em;text-indent:.3em;}

.field{margin-bottom:22px;}
.field label{display:block;font-size:12px;letter-spacing:.2em;color:var(--ink-3);margin:0 0 8px 2px;}
input,.area{width:100%;background:none;border:none;border-bottom:1.5px solid var(--hair);padding:11px 2px;
  font-family:var(--serif);font-size:16px;color:var(--ink-deep);transition:border-color .25s;}
input:focus,.area:focus{outline:none;border-bottom-color:var(--seal);}
.area{min-height:120px;resize:vertical;line-height:1.9;}
input::placeholder,.area::placeholder{color:var(--ink-faint);}

.chips{display:flex;flex-wrap:wrap;gap:16px;}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;}
.chips.scroll::-webkit-scrollbar{height:0;}
.chip{font-family:var(--disp);font-size:14px;color:var(--ink-3);background:none;border:none;cursor:pointer;
  padding:6px 2px;position:relative;white-space:nowrap;transition:color .2s;}
.chip:hover{color:var(--ink-deep);}
.chip.on{color:var(--seal);}
.chip.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:8px;background:var(--brush) no-repeat center/contain;opacity:.6;}

.field-label{font-size:12px;letter-spacing:.16em;color:var(--ink-3);margin:26px 2px 14px;}
.live-hint{font-size:12px;color:var(--dai);margin:12px 2px 0;min-height:18px;}
.live-hint.warn{color:var(--seal);}
.notice{font-size:12px;color:var(--ink-soft);border-left:2px solid var(--hair);padding:4px 0 4px 14px;margin:22px 0;}
.notice b{color:var(--ink-deep);}

/* 牌 */
.card{position:relative;border-radius:7px;overflow:hidden;aspect-ratio:922/1513;background:var(--paper-2);
  box-shadow:0 16px 34px -16px oklch(20% .02 50 / .5),0 0 0 1px oklch(35% .02 60 / .12);}
.card img{width:100%;height:100%;object-fit:cover;}
.card.rev img{transform:rotate(180deg);}

/* 顶栏 / 底栏 */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:24px;
  padding:12px 26px;background:oklch(94% .024 85 / .82);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair-soft);}
.tb-brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:18px;letter-spacing:.18em;color:var(--ink-deep);}
.tb-nav{display:flex;gap:26px;margin-left:8px;}
.tb-nav a{font-family:var(--disp);font-size:15px;letter-spacing:.12em;color:var(--ink-soft);position:relative;}
.tb-nav a:hover{color:var(--ink-deep);}
.tb-nav a.on{color:var(--seal);}
.tb-points{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;}
.tb-points .coin{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 40% 35%,oklch(72% .05 70),oklch(50% .04 66));align-self:center;}
.tb-points b{font-family:var(--disp);font-size:18px;color:var(--ink-deep);}
.tb-points .u{font-size:11px;color:var(--ink-soft);}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:oklch(93% .024 84 / .9);backdrop-filter:blur(8px);border-top:1px solid var(--hair-soft);}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--ink-faint);}
.tabbar a i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);}
.tabbar a.on{color:var(--seal);}
.tabbar a.on i{background:var(--seal);}

/* ===== login ===== */
.login-leaf{max-width:420px;margin:0 auto;padding-top:8vh;text-align:center;display:flex;flex-direction:column;align-items:center;}
.login-leaf .field,.login-leaf .btn{width:100%;text-align:left;}
.login-leaf .btn{justify-content:center;margin-top:8px;}
.login-seal{width:130px;height:130px;display:grid;place-items:center;position:relative;margin-bottom:26px;}
.login-seal .ring{position:absolute;inset:0;border:2px solid var(--seal);border-radius:50%;opacity:.4;}
.login-seal .ring::after{content:"";position:absolute;inset:9px;border:1px solid var(--seal);border-radius:50%;opacity:.5;}
.login-seal .ch{font-family:var(--bms);font-size:64px;color:var(--seal);}
.brand-title{font-family:var(--disp);font-size:38px;font-weight:400;letter-spacing:.5em;text-indent:.5em;margin:0 0 10px;color:var(--ink-deep);}
.brand-sub{font-size:12px;letter-spacing:.6em;text-indent:.6em;color:var(--ink-3);margin:0 0 40px;}
.login-err{color:var(--seal);font-size:12px;min-height:16px;margin:10px 0 0;}
.login-foot{font-size:11px;color:var(--ink-faint);margin-top:28px;}

/* ===== home ===== */
.home-hero{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;margin:10px 0 24px;}
.hero-h{font-family:var(--disp);font-size:clamp(30px,7vw,52px);font-weight:400;letter-spacing:.1em;color:var(--ink-deep);margin:14px 0 16px;line-height:1.35;}
.hero-p{font-weight:300;font-size:13.5px;color:var(--ink-soft);max-width:36ch;margin:0 0 26px;line-height:2;}
.hero-text .btn{width:auto;display:inline-flex;padding:14px 34px;}
.hero-cards{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;}
.hero-cards::-webkit-scrollbar{height:0;}
.hero-cards .gc{flex:none;width:118px;}
.hero-cards .gc .cap{text-align:center;font-family:var(--disp);font-size:12px;margin-top:8px;color:var(--ink-2);}
.entry-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:30px;}
.entry{padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .2s var(--ease);}
.entry:hover{transform:translateY(-3px);}
.entry .ei{font-family:var(--bms);font-size:26px;color:var(--ink-2);}
.entry span:last-child{font-size:12px;color:var(--ink-soft);letter-spacing:.1em;}

/* ===== match ===== */
.spread-name{text-align:center;margin:14px 0 8px;}
.spread-name .zh{font-family:var(--disp);font-size:30px;letter-spacing:.3em;text-indent:.3em;color:var(--ink-deep);display:block;}
.spread-name .en{font-size:11px;letter-spacing:.4em;color:var(--bronze);}
.match-note{font-weight:300;font-size:12.5px;color:var(--ink-soft);text-align:center;max-width:34ch;margin:0 auto 28px;line-height:2;}
.spread-slots{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:18px 0 28px;}
.spread-slots .slot{width:104px;text-align:center;}
.spread-slots .sc{aspect-ratio:922/1513;border:1px solid var(--hair);border-radius:6px;display:grid;place-items:center;
  background:oklch(40% .014 56 / .04);font-family:var(--bms);font-size:36px;color:var(--ink-faint);}
.spread-slots .lbl{font-family:var(--disp);font-size:15px;margin-top:12px;color:var(--ink-deep);}
.spread-slots .sub{font-weight:300;font-size:11px;color:var(--ink-soft);margin-top:5px;line-height:1.6;}

/* ===== draw ===== */
.draw-leaf{min-height:74vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.draw-status .st{font-family:var(--disp);font-size:22px;letter-spacing:.34em;text-indent:.34em;color:var(--ink-deep);}
.draw-status .ct{font-size:12px;color:var(--ink-soft);margin-top:10px;}
.shuffle{position:relative;width:120px;height:188px;margin:38px auto;}
.shuffle .card{position:absolute;inset:0;will-change:transform;}
.fan{position:relative;width:min(92vw,460px);height:300px;margin:18px auto;}
.fan .card{position:absolute;bottom:0;left:50%;width:clamp(72px,18vw,100px);transform-origin:bottom center;transition:box-shadow .3s;will-change:transform;cursor:pointer;}
.fan .card.picked{box-shadow:0 0 0 2px var(--seal),0 18px 30px -12px oklch(40% .1 33 / .4);}
.drawn{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:22px 0;}
.drawn .flip{width:clamp(78px,22vw,110px);perspective:1200px;}
.flip .inner{position:relative;width:100%;aspect-ratio:922/1513;transform-style:preserve-3d;will-change:transform;}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:7px;overflow:hidden;box-shadow:0 14px 30px -14px oklch(20% .02 50 / .5);}
.flip .face img{width:100%;height:100%;object-fit:cover;}
.flip .front{transform:rotateY(180deg);}
.flip.rev .front img{transform:rotate(180deg);}

/* ===== reading ===== */
.read-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:10px 0;}
.read-cards .item{width:84px;text-align:center;}
.read-cards .item .pl{font-size:10px;color:var(--bronze);letter-spacing:.2em;margin-top:10px;}
.read-cards .item .cn{font-family:var(--disp);font-size:14px;margin-top:3px;color:var(--ink-deep);}
.read-cards .item .ori{display:inline-block;margin-left:5px;font-family:var(--serif);font-size:10px;letter-spacing:.1em;color:var(--bronze);vertical-align:middle;}
.read-cards .item .ori.rv{color:var(--seal);}
.read-body{font-weight:300;font-size:15px;line-height:2;color:var(--ink);text-align:justify;}
/* 开篇核心结论：朱印竖线引出，醒目而克制 */
.read-body .lead{font-family:var(--disp);font-weight:400;font-size:18px;line-height:1.85;color:var(--ink-deep);
  margin:0 0 24px;padding:3px 0 3px 16px;border-left:3px solid var(--seal);letter-spacing:.02em;}
/* 分区题头：毛笔墨痕收尾 */
.read-body h3.sec{font-family:var(--disp);font-weight:400;font-size:18px;color:var(--ink-deep);
  letter-spacing:.06em;margin:32px 0 14px;padding-bottom:10px;position:relative;}
.read-body h3.sec::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:8px;
  background:var(--brush) no-repeat left center/contain;opacity:.5;}
.read-body h3.sec.rv{color:var(--seal);}
.read-body p{margin:0 0 15px;}
.read-body strong{font-weight:600;color:var(--ink-deep);}
.read-body ul{margin:0 0 15px;padding-left:2px;list-style:none;}
.read-body li{position:relative;padding-left:18px;margin:7px 0;}
.read-body li::before{content:"";position:absolute;left:2px;top:14px;width:4px;height:4px;border-radius:50%;background:var(--ink-faint);}
/* 结尾提醒：居中题款，毛笔分隔 */
.read-body blockquote{margin:32px 0 4px;padding:0;text-align:center;font-family:var(--disp);
  font-size:15px;letter-spacing:.14em;text-indent:.14em;color:var(--bronze);line-height:1.9;}
.read-body blockquote::before{content:"";display:block;height:18px;width:120px;margin:0 auto 16px;
  background:var(--brush) no-repeat center/contain;opacity:.45;}
.read-body hr{border:none;height:22px;margin:24px 0;background:var(--brush) no-repeat center/contain;opacity:.4;}
.read-body .ori{font-family:var(--serif);font-size:.72em;letter-spacing:.1em;color:var(--bronze);}
.read-body .ori.rv{color:var(--seal);}
.dbl{display:flex;gap:16px;margin-top:30px;}
.dbl .btn{flex:1;}

/* ===== history ===== */
.hist-list{display:flex;flex-direction:column;}
.hist-card{display:flex;gap:16px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--hair-soft);transition:padding-left .2s var(--ease);}
.hist-card:hover{padding-left:8px;}
.hist-thumbs{display:flex;flex:none;}
.hist-thumbs .card{width:36px;margin-left:-12px;border-radius:3px;}
.hist-thumbs .card:first-child{margin-left:0;}
.hist-meta{flex:1;min-width:0;}
.hist-meta .dt{font-size:10.5px;color:var(--bronze);letter-spacing:.14em;}
.hist-meta .q{font-family:var(--disp);font-size:15px;margin:6px 0;color:var(--ink-deep);}
.hist-meta .tg{font-size:10.5px;color:var(--ink-soft);}.hist-meta .tg::before{content:"· ";color:var(--bronze);}

/* ===== gallery ===== */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;}
.gal-cell{cursor:pointer;}
.gal-cell .card{transition:transform .25s var(--ease);}
.gal-cell:hover .card{transform:translateY(-4px);}
.gal-cap{text-align:center;font-family:var(--disp);font-size:11.5px;color:var(--ink-deep);margin-top:8px;}
.gal-cap span{display:block;font-weight:300;font-size:9px;color:var(--bronze);letter-spacing:.14em;}

/* ===== profile ===== */
.prof-hero{text-align:center;padding:22px 0 8px;}
.prof-av{width:90px;height:90px;margin:0 auto 18px;display:grid;place-items:center;position:relative;}
.prof-av::before{content:"";position:absolute;inset:0;border:2px solid var(--seal);border-radius:50%;opacity:.35;}
.prof-av span{font-family:var(--bms);font-size:42px;color:var(--seal);}
.prof-name{font-family:var(--disp);font-size:22px;letter-spacing:.18em;color:var(--ink-deep);}
.prof-id{font-size:11px;color:var(--ink-soft);margin-top:6px;}
.balance{text-align:center;margin:26px 0;padding:24px 0;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);}
.balance .bk{font-size:11px;letter-spacing:.5em;color:var(--bronze);text-indent:.5em;}
.balance .bnum{font-family:var(--disp);font-size:58px;color:var(--ink-deep);line-height:1;margin-top:12px;}
.balance .bnum small{font-size:15px;color:var(--ink-soft);margin-left:6px;}
.prof-list{margin-top:10px;}
.prof-list .row{display:flex;justify-content:space-between;padding:16px 2px;border-bottom:1px solid var(--hair-soft);font-size:14px;color:var(--ink);transition:padding-left .2s;}
.prof-list .row:hover{padding-left:8px;}
.prof-list .row .rv{color:var(--ink-faint);}
.prof-list .row.danger{color:var(--seal);}

/* ===== lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:60;background:oklch(20% .012 48 / .96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;backdrop-filter:blur(4px);}
.lightbox[hidden]{display:none;}
.lb-card{width:min(64vw,230px);perspective:1400px;cursor:pointer;}
.lb-flip{position:relative;width:100%;aspect-ratio:922/1513;transition:transform .8s var(--ease);transform-style:preserve-3d;}
.lb-flip.flipped{transform:rotateY(180deg);}
.lb-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px;overflow:hidden;box-shadow:0 28px 60px -16px #000;}
.lb-face img{width:100%;height:100%;object-fit:cover;}
.lb-back{transform:rotateY(180deg);background:var(--paper);display:flex;align-items:center;padding:24px;}
.lb-meaning{font-weight:300;font-size:13px;line-height:2.05;color:var(--ink);text-align:center;}
.lb-meaning b{display:block;font-family:var(--disp);font-size:20px;letter-spacing:.14em;margin-bottom:14px;color:var(--seal);}
.lb-name{text-align:center;margin-top:24px;}
.lb-name .zh{font-family:var(--disp);font-size:22px;letter-spacing:.2em;color:var(--paper-warm);}
.lb-name .en{font-size:11px;color:oklch(72% .04 70);letter-spacing:.26em;margin-top:6px;}
.lb-hint{font-size:11px;color:oklch(82% .014 78 / .5);margin-top:22px;letter-spacing:.1em;}
.lb-close{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;border:1px solid oklch(72% .04 66 / .4);background:none;color:var(--paper-warm);font-size:18px;}

/* ===== 顶/底栏显示控制 + 桌面 ===== */
.topbar[hidden],.tabbar[hidden]{display:none;}
.topbar{display:none;}.tabbar{display:none;}
body.authed .tabbar{display:flex;}
body.authed .app-pad{padding-bottom:0;}
@media(min-width:960px){
  body.authed .topbar{display:flex;}
  body.authed .tabbar{display:none;}
  .leaf{max-width:1080px;padding:46px 40px 80px;}
  .leaf.narrow{max-width:560px;}
  .home-hero{grid-template-columns:1.05fr .95fr;gap:46px;}
  .hero-cards{flex-wrap:wrap;}
  .gal-grid{grid-template-columns:repeat(5,1fr);gap:18px;}
  .read-body{column-count:1;}
}
@media(min-width:1280px){ .gal-grid{grid-template-columns:repeat(6,1fr);} }
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}