/* =========================================================
   仙境道观祈福 · 国风水墨仙气样式
   色调：低饱和淡彩、青绿+暖米、云白、淡金
   ========================================================= */
:root{
  --ink:#3a4a52;
  --ink-soft:#5b6b73;
  --jade:#7fae9b;
  --jade-deep:#4f8a78;
  --mist:#eaf2f1;
  --paper:#f6f1e7;
  --paper-2:#efe7d6;
  --gold:#c9a86a;
  --rose:#d98c8c;
  --sky-top:#cfe3ec;
  --sky-bot:#eef3ea;
  --shadow:0 8px 30px rgba(60,80,90,.18);
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#dfe9ec;
  overflow:hidden;
  user-select:none;
}
#app{position:relative;width:100vw;height:100vh;overflow:hidden;}

/* ===== 视图切换 ===== */
.view{position:absolute;inset:0;display:none;flex-direction:column;}
.view.active{display:flex;}

/* ===== 顶栏 ===== */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;pointer-events:none;
}
.topbar>*{pointer-events:auto;}
.brand{
  font-weight:700;letter-spacing:2px;font-size:16px;color:#fff;
  text-shadow:0 2px 8px rgba(40,60,70,.45);
  background:rgba(79,138,120,.55);padding:6px 14px;border-radius:999px;
  backdrop-filter:blur(4px);
}
.chip{
  border:none;background:rgba(255,255,255,.82);color:var(--jade-deep);
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:var(--shadow);cursor:pointer;
}
.chip:active{transform:scale(.96);}

/* ===== 世界视口 ===== */
.world-viewport{
  position:absolute;inset:0;overflow:hidden;cursor:grab;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 100%);
}
.world-viewport:active{cursor:grabbing;}
.world{
  position:absolute;top:0;left:0;width:2200px;height:100vh;
  will-change:transform;
}

/* 视差山层 */
.layer{position:absolute;left:0;bottom:0;width:100%;height:100%;}
.layer-sky{background:linear-gradient(180deg,rgba(207,227,236,0) 40%,rgba(238,243,234,.0) 100%);}
.layer-far{
  background:
    radial-gradient(120px 90px at 200px 60%,#bcd3cf 0 60%,transparent 62%),
    radial-gradient(180px 120px at 600px 55%,#c4d8d2 0 60%,transparent 62%),
    radial-gradient(220px 150px at 1100px 50%,#b6ccc8 0 60%,transparent 62%),
    radial-gradient(160px 110px at 1600px 58%,#c4d8d2 0 60%,transparent 62%),
    radial-gradient(200px 140px at 2000px 52%,#b6ccc8 0 60%,transparent 62%);
  opacity:.7;
}
.layer-mid{
  background:
    radial-gradient(180px 150px at 400px 75%,#9fc1b6 0 60%,transparent 62%),
    radial-gradient(240px 190px at 1000px 72%,#8fb6ab 0 60%,transparent 62%),
    radial-gradient(200px 160px at 1500px 76%,#9fc1b6 0 60%,transparent 62%),
    radial-gradient(240px 200px at 2050px 70%,#8fb6ab 0 60%,transparent 62%);
  opacity:.85;
}

/* 云海 */
.cloud-band{position:absolute;height:140px;width:200%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  filter:blur(6px);opacity:.85;}
.cb1{bottom:40px;left:-20%;animation:drift 60s linear infinite;}
.cb2{bottom:120px;left:-40%;height:100px;opacity:.6;animation:drift 90s linear infinite reverse;}
.cb3{bottom:-10px;left:-10%;height:180px;opacity:.95;animation:drift 75s linear infinite;}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(40%)}}

/* 仙鹤 */
.crane{position:absolute;font-size:30px;opacity:.9;filter:drop-shadow(0 4px 6px rgba(80,100,110,.25));}
.crane-a{top:18%;left:-60px;animation:flyA 26s linear infinite;}
.crane-b{top:30%;left:-60px;font-size:22px;opacity:.7;animation:flyB 38s linear infinite;}
@keyframes flyA{0%{transform:translate(0,0) scaleX(1)}50%{transform:translate(1200px,-40px) scaleX(1)}100%{transform:translate(2400px,10px) scaleX(1)}}
@keyframes flyB{0%{transform:translate(0,0)}40%{transform:translate(1400px,30px)}100%{transform:translate(2500px,-20px)}}

/* 溪流 */
.stream{position:absolute;bottom:0;left:0;width:100%;height:34%;
  background:linear-gradient(180deg,rgba(190,220,225,.0),rgba(170,210,215,.55) 40%,rgba(150,195,205,.8));
  clip-path:polygon(0 60%,12% 50%,30% 64%,48% 50%,66% 66%,84% 52%,100% 64%,100% 100%,0 100%);
  animation:shimmer 6s ease-in-out infinite;}
@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

/* 古松 */
.pine{position:absolute;font-size:42px;bottom:30px;filter:drop-shadow(0 6px 6px rgba(60,80,70,.2));}
.pine-1{left:520px;animation:sway 7s ease-in-out infinite;}
.pine-2{left:1420px;font-size:34px;animation:sway 9s ease-in-out infinite reverse;}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* 炊烟 */
.smoke{position:absolute;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(220,225,225,.7),transparent 70%);filter:blur(3px);}
.smoke-1{left:760px;bottom:170px;animation:rise 9s ease-in infinite;}
.smoke-2{left:1280px;bottom:170px;animation:rise 11s ease-in infinite 2s;}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.7}100%{transform:translateY(-120px) scale(1.6);opacity:0}}

/* 灯笼 */
.lantern{position:absolute;font-size:26px;filter:drop-shadow(0 4px 4px rgba(80,40,40,.2));}
.lan-1{left:300px;bottom:200px;animation:swing 4s ease-in-out infinite;transform-origin:top center;}
.lan-2{left:1300px;bottom:200px;font-size:22px;animation:swing 5s ease-in-out infinite;transform-origin:top center;}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* ===== 道观 ===== */
.temple{position:absolute;bottom:160px;width:120px;cursor:pointer;text-align:center;
  transition:transform .25s;}
.temple:hover{transform:translateY(-4px);}
.temple-roof{width:120px;height:46px;margin:0 auto;
  background:linear-gradient(180deg,#7a4a3a,#5e372c);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  border-radius:6px 6px 0 0;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15);}
.temple-roof::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--gold);}
.temple-body{margin:0 auto;width:96px;background:linear-gradient(180deg,#f3ecdd,#e6dcc6);
  border-radius:0 0 8px 8px;padding:8px 4px;box-shadow:var(--shadow);}
.temple-body span{display:block;font-weight:700;font-size:15px;color:var(--jade-deep);letter-spacing:1px;}
.temple-body em{display:block;font-style:normal;font-size:11px;color:var(--ink-soft);margin-top:2px;}

/* 彩蛋 */
.egg{position:absolute;bottom:90px;font-size:28px;cursor:pointer;opacity:.9;
  animation:bob 4s ease-in-out infinite;}
.egg-1{left:980px;}
.egg-2{left:1680px;animation-delay:1.5s;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ===== 小道长 ===== */
.avatar{position:absolute;bottom:150px;left:60px;width:64px;height:96px;
  transition:left 2.2s linear, bottom .4s;z-index:20;}
.avatar.walking .avatar-inner{animation:bobWalk .6s ease-in-out infinite;}
@keyframes bobWalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.avatar-inner{width:100%;height:100%;}
.avatar-shadow{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:42px;height:12px;border-radius:50%;background:rgba(50,70,70,.22);filter:blur(2px);}
.avatar.clicked{animation:pop .4s ease;}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ===== 导航 ===== */
.bottombar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:30;
  display:flex;gap:8px;background:rgba(255,255,255,.9);padding:6px;border-radius:999px;box-shadow:var(--shadow);}
.nav-btn{border:none;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:999px;cursor:pointer;}
.nav-btn.active{background:var(--jade);color:#fff;}

.drag-hint{position:absolute;bottom:74px;left:50%;transform:translateX(-50%);z-index:25;
  font-size:12px;color:#fff;background:rgba(60,80,90,.4);padding:5px 12px;border-radius:999px;
  backdrop-filter:blur(3px);animation:fade 5s ease-in-out infinite;}
.walk-hint{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:26;
  font-size:13px;color:var(--jade-deep);background:rgba(255,255,255,.9);padding:6px 14px;border-radius:999px;
  box-shadow:var(--shadow);}

/* ===== 殿内 ===== */
.interior-bg{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 0%,#f3ead7 0%,#e7dcc4 55%,#d8c9a9 100%);
  overflow:hidden;}
.interior-glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:80%;height:60%;background:radial-gradient(closest-side,rgba(255,240,200,.8),transparent 70%);
  filter:blur(10px);animation:pulse 5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
.interior-candle{position:absolute;bottom:18%;width:18px;height:46px;border-radius:6px;
  background:linear-gradient(180deg,#fff3d0,#f0c878);box-shadow:0 0 24px rgba(255,200,120,.8);}
.interior-candle::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:8px;height:14px;border-radius:50% 50% 50% 50%;background:#ffd27a;
  box-shadow:0 0 16px 4px rgba(255,180,90,.9);animation:flick 1.2s ease-in-out infinite;}
@keyframes flick{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.25) translateY(-2px)}}
.c1{left:22%;} .c2{right:22%;}
.interior-incense{position:absolute;bottom:24%;left:50%;transform:translateX(-50%);
  width:30px;height:30px;}
.interior-incense::before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:10px;height:36px;background:linear-gradient(180deg,#caa,#7a5a3a);border-radius:4px;}
.interior-incense::after{content:"";position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  width:30px;height:60px;background:radial-gradient(closest-side,rgba(220,220,220,.6),transparent 70%);
  filter:blur(4px);animation:riseSmoke 6s linear infinite;}
@keyframes riseSmoke{0%{transform:translateX(-50%) translateY(0) scale(.6);opacity:0}
  30%{opacity:.7}100%{transform:translateX(-50%) translateY(-90px) scale(1.5);opacity:0}}
.interior-bell{position:absolute;top:14%;right:14%;font-size:26px;transform-origin:top center;
  animation:swing 3.5s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(80,60,40,.3));}
.interior-top{z-index:30;}
.interior-content{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:70px 18px 24px;overflow-y:auto;}

/* 殿内卡片 */
.panel{width:100%;max-width:440px;background:rgba(255,255,255,.86);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px;backdrop-filter:blur(4px);}
.panel h3{margin:0 0 4px;color:var(--jade-deep);font-size:18px;letter-spacing:1px;}
.panel .sub{margin:0 0 14px;color:var(--ink-soft);font-size:13px;}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 14px;}
.cat{background:var(--paper);border:2px solid transparent;border-radius:12px;padding:12px 6px;
  text-align:center;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.2s;}
.cat .ic{display:block;font-size:22px;margin-bottom:4px;}
.cat.sel{border-color:var(--jade);background:#eaf3ef;color:var(--jade-deep);}
textarea,input[type=text]{width:100%;border:1.5px solid #d8cdb4;background:var(--paper);
  border-radius:12px;padding:12px;font-size:15px;color:var(--ink);resize:none;font-family:inherit;}
textarea:focus,input:focus{outline:none;border-color:var(--jade);}
.counter{text-align:right;font-size:12px;color:var(--ink-soft);margin-top:4px;}
.btn-primary{display:block;width:100%;border:none;background:linear-gradient(135deg,var(--jade),var(--jade-deep));
  color:#fff;font-size:16px;font-weight:700;padding:14px;border-radius:14px;cursor:pointer;
  box-shadow:0 6px 18px rgba(79,138,120,.4);letter-spacing:2px;margin-top:8px;}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{display:block;width:100%;border:1.5px solid var(--jade);background:transparent;color:var(--jade-deep);
  font-size:15px;font-weight:600;padding:12px;border-radius:14px;cursor:pointer;margin-top:8px;}
.btn-ghost.sel-vis{background:#eaf3ef;color:var(--jade-deep);border-color:var(--jade-deep);font-weight:700;}
.row{display:flex;gap:10px;}
.row>*{flex:1;}

/* 木牌 / 河灯 列表 */
.board-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:440px;}
.wood{background:linear-gradient(180deg,#e9d8b6,#dcc69a);border-radius:10px;padding:12px 14px;
  color:#6b4f33;font-size:14px;box-shadow:var(--shadow);position:relative;}
.wood::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:14px;height:10px;border:2px solid #8a6b3a;border-bottom:none;border-radius:8px 8px 0 0;}
.wood .by{display:block;margin-top:6px;font-size:11px;color:#9a7d52;text-align:right;}
.lantern-item{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.86);
  border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);width:100%;max-width:440px;}
.lantern-item .em{font-size:24px;}

/* ===== 个人洞府 / 心愿簿 ===== */
.profile-content,.wishbook-content{position:relative;z-index:5;flex:1;overflow-y:auto;
  padding:70px 16px 24px;background:linear-gradient(180deg,#eef4ef,#e3ece6);}
.avatar-card{display:flex;gap:14px;align-items:center;background:#fff;border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);margin-bottom:14px;}
.avatar-card .mini{width:72px;height:96px;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
.stat{background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:var(--shadow);}
.stat b{display:block;font-size:22px;color:var(--jade-deep);}
.stat span{font-size:12px;color:var(--ink-soft);}
.section-title{font-weight:700;color:var(--jade-deep);margin:10px 4px;font-size:15px;letter-spacing:1px;}
.wish-item{background:#fff;border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow);}
.wish-item .cat{display:inline-block;background:#eaf3ef;color:var(--jade-deep);font-size:12px;
  padding:3px 10px;border-radius:999px;margin-bottom:6px;font-weight:600;}
.wish-item .txt{font-size:15px;line-height:1.5;color:var(--ink);}
.wish-item .meta{margin-top:8px;font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;}
.tag-done{color:#fff;background:var(--jade-deep);padding:3px 10px;border-radius:999px;font-size:12px;}
.tag-open{color:var(--jade-deep);background:#eaf3ef;padding:3px 10px;border-radius:999px;font-size:12px;}
.empty{text-align:center;color:var(--ink-soft);padding:40px 0;font-size:14px;}

/* 静心日历 */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#fff;
  border-radius:14px;padding:12px;box-shadow:var(--shadow);}
.cal-day{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:var(--paper);color:var(--ink-soft);}
.cal-day.done{background:var(--jade);color:#fff;font-weight:700;}
.cal-day.today{outline:2px solid var(--gold);}

/* ===== 弹窗 ===== */
.modal-mask{position:fixed;inset:0;z-index:60;background:rgba(40,55,60,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);}
.modal-box{width:100%;max-width:420px;background:var(--paper);border-radius:var(--r);
  padding:22px;max-height:86vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:popIn .3s ease;}
@keyframes popIn{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal-box h3{margin:0 0 6px;color:var(--jade-deep);text-align:center;letter-spacing:2px;}
.modal-box .desc{text-align:center;color:var(--ink-soft);font-size:13px;margin-bottom:16px;}
.modal-close{position:absolute;top:14px;right:18px;font-size:20px;color:var(--ink-soft);
  background:none;border:none;cursor:pointer;z-index:2;}

/* 化身选择 */
.avatar-pick{display:flex;gap:14px;justify-content:center;margin:10px 0 18px;}
.avatar-opt{width:96px;cursor:pointer;text-align:center;}
.avatar-opt .frame{width:96px;height:120px;border-radius:14px;background:#fff;border:3px solid transparent;
  display:flex;align-items:center;justify-content:center;}
.avatar-opt.sel .frame{border-color:var(--jade);}
.avatar-opt .lbl{font-size:12px;color:var(--ink-soft);margin-top:6px;}

/* 上香 / 河灯 动画舞台 */
.ritual-stage{position:relative;height:200px;display:flex;align-items:flex-end;justify-content:center;
  margin:6px 0 12px;}
.incense-holder{position:relative;width:60px;}
.incense-stick{position:absolute;bottom:0;width:4px;height:70px;background:#caa;
  border-radius:2px;transform-origin:bottom center;}
.incense-stick.s1{left:8px;transform:rotate(-8deg);}
.incense-stick.s2{left:28px;}
.incense-stick.s3{left:48px;transform:rotate(8deg);}
.incense-stick .spark{position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:#ffd27a;box-shadow:0 0 10px 2px rgba(255,170,80,.9);}
.incense-stick .smk{position:absolute;top:-6px;left:50%;width:18px;height:40px;
  background:radial-gradient(closest-side,rgba(220,220,220,.7),transparent 70%);filter:blur(3px);
  animation:riseSmoke 4s linear infinite;}
.river{position:relative;height:120px;width:100%;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#bfe0e2,#9cc6c9);margin-bottom:12px;}
.river .flow{position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  background-size:200% 100%;animation:riverflow 3s linear infinite;}
@keyframes riverflow{from{background-position:100% 0}to{background-position:-100% 0}}
.float-lantern{position:absolute;bottom:14px;left:-40px;font-size:30px;animation:floatAway 6s linear forwards;}
@keyframes floatAway{to{transform:translateX(420px) translateY(-14px);opacity:.9}}

/* 临摹画布 */
.trace-wrap{position:relative;width:100%;background:var(--paper-2);border-radius:14px;
  border:2px dashed #cbbf9f;touch-action:none;overflow:hidden;margin-bottom:10px;}
.trace-wrap canvas{display:block;width:100%;}
.trace-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:40px;color:rgba(120,110,80,.25);font-weight:700;letter-spacing:8px;pointer-events:none;}

/* 海报 */
.poster-canvas{width:100%;border-radius:12px;box-shadow:var(--shadow);display:block;}

/* ===== 转场 / 流光 / Toast ===== */
.transition{position:fixed;inset:0;z-index:80;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9),rgba(230,240,238,.98));
  pointer-events:none;}
.flow-light{position:fixed;z-index:85;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(201,168,106,.6) 40%,transparent 70%);
  box-shadow:0 0 30px 10px rgba(201,168,106,.6);pointer-events:none;
  transition:left 1.4s cubic-bezier(.4,0,.2,1),top 1.4s cubic-bezier(.4,0,.2,1),opacity 1.4s;}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:90;
  background:rgba(50,65,70,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;
  box-shadow:var(--shadow);}
.hidden{display:none !important;}

/* 进入动画 */
@keyframes fade{0%,100%{opacity:.55}50%{opacity:1}}

/* 欢迎弹窗 */
/* 欢迎层需低于弹窗层(.modal-mask z-index:60)，否则「入山」弹出的化身选择框会被整层遮住 */
.welcome-mask{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#cfe3ec,#eef3ea);overflow:hidden;}
.welcome-cloud{position:relative;width:min(90vw,420px);padding:34px 26px;text-align:center;
  background:rgba(255,255,255,.7);border-radius:28px;box-shadow:0 20px 60px rgba(70,100,100,.25);
  backdrop-filter:blur(6px);animation:cloudIn .8s ease;}
@keyframes cloudIn{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.cloud-puff{position:absolute;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(2px);}
.cloud-puff.p1{width:120px;height:60px;top:-26px;left:-20px;animation:drift 14s linear infinite;}
.cloud-puff.p2{width:90px;height:48px;top:-18px;right:-16px;animation:drift 18s linear infinite reverse;}
.cloud-puff.p3{width:140px;height:60px;bottom:-24px;left:30%;animation:drift 16s linear infinite;}
.welcome-text h2{margin:6px 0 14px;color:var(--jade-deep);font-size:19px;letter-spacing:1px;}
.welcome-text .tip{margin:4px 0;color:var(--ink);font-size:14px;}
.welcome-text .tip.small{color:var(--ink-soft);font-size:12px;margin-top:10px;}
.welcome-actions{margin-top:20px;}
.welcome-foot{margin-top:18px;font-size:11px;color:var(--ink-soft);letter-spacing:1px;}

@media (max-width:380px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .temple{bottom:150px;}
}