/* 心灵成长馆样式（从 index.html 拆出，2026-10-25） */
/* ---------- 默认配色（首帧兜底） ---------- */
:root{
--bg1:#d6f0ff; --bg2:#ffe9f2; --bg3:#e9fce9;
--pink:#ff8fb0; --pink-deep:#ff6f9c; --mint:#5fd69a;
--sky:#6fb7ff; --lav:#b39ddb; --sun:#ffd94d;
--ink:#5a4a63; --ink-soft:#8a7896; --card:#fffdf9;
--radius:28px; --shadow:0 8px 24px rgba(146,120,170,.16);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
font-family:"Comic Sans MS","Comic Neue","Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
color:var(--ink);
min-height:100vh;
background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 46%,var(--bg3) 100%);
background-attachment:fixed;
overflow-x:hidden;
-webkit-tap-highlight-color:transparent;
transition:background 1s ease;
}
/* ---------- 背景漂浮装饰 ---------- */
.bg-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.bg-decor span{
position:absolute;font-size:2rem;opacity:.5;animation:floaty linear infinite;
user-select:none;
}
.bg-decor .sun-deco{font-size:5.5rem;top:6%;left:4%;opacity:.8;animation:bob 6s ease-in-out infinite;}
@keyframes floaty{
0%{transform:translateX(-12vw) rotate(0deg);}
100%{transform:translateX(110vw) rotate(20deg);}
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px);}}
@keyframes pop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
/* ---------- 主容器 ---------- */
.app{position:relative;z-index:1;max-width:840px;margin:0 auto;padding:10px 16px 60px;}
/* ---------- 顶栏（常驻，含刷新/退出） ---------- */
.topbar{
position:sticky;top:8px;z-index:150;
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 10px 8px 16px;margin-bottom:10px;
background:rgba(255,255,255,.72);border-radius:999px;
box-shadow:0 4px 16px rgba(120,100,150,.14);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tb-left{min-width:0;display:flex;flex-direction:column;gap:2px;}
.tb-title{font-weight:900;font-size:.98rem;color:var(--ink);letter-spacing:.3px;white-space:nowrap;}
.theme-badge{
font-size:.72rem;font-weight:700;color:var(--ink-soft);
display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:52vw;
}
.theme-badge .t-psy{color:var(--lav);font-weight:600;}
.tb-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.tb-btn{
display:inline-flex;align-items:center;gap:4px;border:none;cursor:pointer;
border-radius:999px;padding:8px 14px;font-size:.82rem;font-weight:800;font-family:inherit;
background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(120,100,150,.18);
transition:transform .12s,box-shadow .12s;
}
.tb-btn:active{transform:scale(.93);}
.tb-btn.refresh{color:#3f9d6a;}
.tb-btn.exit{color:var(--pink-deep);}
.tb-btn.music{width:38px;height:38px;padding:0;justify-content:center;font-size:1.1rem;border-radius:50%;}
.journey-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.06);margin-bottom:4px;}
.journey-fill{
height:100%;width:0%;border-radius:99px;
background:linear-gradient(90deg,var(--sun),var(--pink),var(--sky));
transition:width .6s cubic-bezier(.4,1.6,.5,1);
}
/* ---------- 页面 ---------- */
.page{display:none;animation:pop .4s ease;}
.page.active{display:block;}
/* ---------- 卡片 & 按钮 ---------- */
.card{
background:var(--card);border-radius:var(--radius);
box-shadow:var(--shadow);padding:1.5rem 1.4rem;margin-top:16px;
}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
border:none;cursor:pointer;border-radius:999px;
padding:.95rem 2rem;font-size:1.08rem;font-weight:800;color:#fff;
font-family:inherit;line-height:1;
background:linear-gradient(135deg,var(--pink),var(--pink-deep));
box-shadow:0 6px 0 rgba(255,111,156,.4),0 12px 22px rgba(255,111,156,.35);
transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-3px) scale(1.02);}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(255,111,156,.4);}
.btn-mint{background:linear-gradient(135deg,#7de0ad,#3fb983);box-shadow:0 6px 0 rgba(63,185,131,.4),0 12px 22px rgba(63,185,131,.3);}
.btn-sky{background:linear-gradient(135deg,#8ec9ff,#4d9fff);box-shadow:0 6px 0 rgba(77,159,255,.4),0 12px 22px rgba(77,159,255,.3);}
.btn-ghost{background:#fff;color:var(--pink-deep);box-shadow:0 4px 14px rgba(146,120,170,.18);}
.btn-block{width:100%;}
.btn-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.btn-row .btn{flex:1;min-width:150px;}
/* ---------- 封面 ---------- */
.cover-inner{text-align:center;padding-top:2vh;animation:pop .6s ease;}
.sun-emoji{font-size:4.2rem;display:inline-block;animation:spinSlow 18s linear infinite;filter:drop-shadow(0 6px 12px rgba(255,200,60,.6));}
@keyframes spinSlow{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.cover-title{
font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.15;margin-top:8px;
background:linear-gradient(135deg,var(--pink-deep),#ff9d2f);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-weight:900;letter-spacing:4px;
}
.cover-sub{
font-size:clamp(1.05rem,4vw,1.35rem);font-weight:800;color:var(--lav);margin-top:10px;letter-spacing:2px;
}
.cover-emoji-row{font-size:2rem;margin-top:16px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.cover-emoji-row span{animation:bob 3s ease-in-out infinite;display:inline-block;}
.cover-emoji-row span:nth-child(2){animation-delay:.3s;}
.cover-emoji-row span:nth-child(3){animation-delay:.6s;}
.cover-emoji-row span:nth-child(4){animation-delay:.9s;}
.cover-emoji-row span:nth-child(5){animation-delay:1.2s;}
.cover-desc{margin:18px auto 0;max-width:520px;color:var(--ink-soft);line-height:1.9;font-size:1.02rem;}
.cover-note{font-size:.86rem;color:#b9a9c6;margin-top:10px;}
.cover-team{
margin-top:30px;color:var(--ink-soft);font-weight:800;letter-spacing:1px;font-size:.95rem;
cursor:pointer;display:inline-block;transition:transform .15s;
}
.cover-team:hover{transform:scale(1.04);}
.cover-team .lock-hint{font-size:.72rem;opacity:.55;margin-left:4px;vertical-align:middle;}
.music-hint{
margin-top:12px;font-size:.9rem;color:#c7a6cf;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.today-quote{
margin:22px auto 0;max-width:560px;background:rgba(255,255,255,.75);
border-radius:20px;padding:14px 18px;font-size:.98rem;line-height:1.9;
color:var(--ink);box-shadow:var(--shadow);border-left:6px solid var(--pink);
}
.today-quote .tq-label{display:block;font-size:.78rem;font-weight:800;color:var(--lav);margin-bottom:4px;letter-spacing:1px;}
/* 首页实时平均分 */
.avg-box{
margin:16px auto 0;max-width:560px;background:rgba(255,255,255,.8);
border-radius:20px;padding:12px 18px;font-size:.92rem;line-height:1.7;color:var(--ink);
box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.avg-stars{color:var(--sun);font-size:1.15rem;letter-spacing:2px;text-shadow:0 1px 3px rgba(255,190,60,.6);}
.avg-box b{color:var(--pink-deep);font-size:1.1rem;}
.avg-live{font-size:.72rem;color:#b9a9c6;margin-left:6px;}
/* 24 小时在线守护徽标 */
.uptime-box{
margin:14px auto 0;max-width:560px;background:rgba(255,255,255,.7);
border-radius:99px;padding:9px 18px;font-size:.86rem;font-weight:800;color:#3f9d6a;
box-shadow:0 3px 10px rgba(120,100,150,.12);display:inline-flex;align-items:center;gap:8px;
}
.uptime-box .up-dot{width:9px;height:9px;border-radius:50%;background:#5fd69a;flex-shrink:0;animation:upPulse 2s infinite;}
@keyframes upPulse{0%{box-shadow:0 0 0 0 rgba(95,214,154,.55);}70%{box-shadow:0 0 0 9px rgba(95,214,154,0);}100%{box-shadow:0 0 0 0 rgba(95,214,154,0);}}
/* 隐藏的团队入口按钮（后台入口，普通用户看不到） */
.team-hidden{
margin-top:24px;padding:8px 16px;border:none;background:transparent;
color:transparent;cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:800;
user-select:none;-webkit-user-select:none;touch-action:manipulation;letter-spacing:1px;
transition:color .3s,background .3s;border-radius:99px;
}
.team-hidden:hover,.team-hidden:focus-visible{color:rgba(138,120,150,.35);}
.team-hidden:active{color:rgba(138,120,150,.75);}
/* ---------- 测评区 ---------- */
.quiz-head{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
.quiz-badge{
width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:var(--shadow);
display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;
}
.quiz-title{font-size:1.35rem;font-weight:900;color:var(--pink-deep);}
.quiz-sub{font-size:.9rem;color:var(--ink-soft);margin-top:2px;}
.quiz-progress{height:12px;border-radius:99px;background:#f2e9f7;margin:16px 0 6px;overflow:hidden;}
.quiz-progress-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--pink));transition:width .4s;}
.q-count{text-align:right;font-size:.85rem;color:var(--ink-soft);font-weight:700;}
.q-text{
font-size:clamp(1.15rem,4.6vw,1.4rem);font-weight:800;line-height:1.7;margin:14px 0 18px;
min-height:3.4em;display:flex;align-items:center;
}
.opt{
display:flex;align-items:center;gap:14px;width:100%;
background:#fff;border:3px solid #eee7f2;border-radius:20px;
padding:14px 16px;margin-top:12px;cursor:pointer;text-align:left;
font-family:inherit;font-size:1.02rem;font-weight:700;color:var(--ink);
transition:transform .12s,border-color .12s,background .12s,box-shadow .12s;
}
.opt:hover{border-color:var(--pink);transform:translateY(-2px);}
.opt:active{transform:scale(.98);}
.opt .opt-emoji{font-size:1.7rem;}
.opt.selected{border-color:var(--pink-deep);background:#fff0f4;box-shadow:0 6px 16px rgba(255,111,156,.25);animation:pop .25s;}
.opt-scale-note{margin-top:14px;font-size:.8rem;color:#b9a9c6;text-align:center;}
.privacy-note{
margin-top:14px;font-size:.78rem;color:#c3b4cf;text-align:center;line-height:1.6;
}
/* ---------- 结果区 ---------- */
.result-weather{
width:130px;height:130px;border-radius:50%;margin:6px auto 8px;
display:flex;align-items:center;justify-content:center;font-size:4rem;
box-shadow:var(--shadow);background:#fff;animation:bob 3s ease-in-out infinite;
}
.result-score{text-align:center;font-size:1.25rem;font-weight:900;color:var(--lav);margin:4px 0 8px;}
.result-score b{font-size:2.1rem;color:var(--pink-deep);margin:0 4px;}
.result-band{text-align:center;font-size:1.5rem;font-weight:900;margin-top:4px;}
.result-msg{text-align:center;color:var(--ink-soft);line-height:1.9;margin-top:10px;font-size:1.03rem;}
.tips{
background:linear-gradient(135deg,#fff7e0,#ffeef2);
border-radius:20px;padding:16px 18px;margin-top:18px;text-align:left;
}
.tips h3{font-size:1.05rem;font-weight:900;margin-bottom:10px;color:#e08a00;}
.tips li{list-style:none;display:flex;gap:10px;margin:9px 0;line-height:1.6;font-size:.98rem;}
.note-box{
background:#eef4ff;border-radius:20px;padding:14px 16px;margin-top:14px;
font-size:.92rem;line-height:1.8;color:#5b7bbd;
}
.note-box b{color:#3c6ac2;}
/* ---------- 舒缓专区 ---------- */
.sooth-step{display:none;animation:pop .45s ease;}
.sooth-step.active{display:block;}
.step-tag{
display:inline-block;background:linear-gradient(135deg,var(--lav),#8f74c8);
color:#fff;font-size:.8rem;font-weight:800;border-radius:99px;padding:5px 14px;margin-bottom:12px;
}
.sooth-title{font-size:1.35rem;font-weight:900;line-height:1.5;}
.sooth-msg{color:var(--ink-soft);line-height:2;margin-top:12px;font-size:1.02rem;}
.sooth-msg b{color:var(--pink-deep);}
/* 呼吸小球 */
.breath-stage{display:flex;flex-direction:column;align-items:center;margin:26px 0 6px;}
.breath-scene{position:relative;width:260px;height:260px;display:flex;align-items:center;justify-content:center;}
.breath-ring{
position:absolute;border-radius:50%;border:3px solid rgba(111,183,255,.5);width:260px;height:260px;
animation:ringPulse 3.2s ease-out infinite;
}
@keyframes ringPulse{0%{transform:scale(.55);opacity:1;}100%{transform:scale(1.15);opacity:0;}}
.breath-ball{
width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle at 35% 32%,#9cd7ff,#5fb4ff 70%);
box-shadow:0 10px 30px rgba(95,180,255,.45),inset 0 -8px 20px rgba(255,255,255,.35);
display:flex;flex-direction:column;align-items:center;justify-content:center;
transform:scale(.75);transition:transform .1s linear;
}
#breathTxt{color:#fff;font-size:1.45rem;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.18);}
#breathSub{color:rgba(255,255,255,.95);font-size:1rem;font-weight:700;margin-top:4px;}
.breath-sci{
background:#eef7ff;border-radius:20px;padding:14px 16px;margin-top:20px;
font-size:.92rem;line-height:1.9;color:#4f7bb5;text-align:left;
}
.breath-sci b{color:#2f63a8;}
.skip-link{display:inline-block;margin-top:14px;color:#b9a9c6;font-size:.88rem;cursor:pointer;text-decoration:underline;}
.breath-done{display:none;text-align:center;}
.breath-done.show{display:block;animation:pop .4s;}
.breath-done .emoji{font-size:2.6rem;}
/* 四类解压行动 */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.action{
background:#fff;border:3px solid #eee7f2;border-radius:20px;padding:16px 14px;
cursor:pointer;text-align:center;transition:transform .15s,border-color .15s;
}
.action:hover{transform:translateY(-3px);border-color:var(--mint);}
.action:active{transform:scale(.97);}
.action .a-emoji{font-size:2.4rem;display:block;}
.action .a-name{font-weight:900;margin-top:8px;font-size:1rem;}
.action .a-desc{color:var(--ink-soft);font-size:.84rem;line-height:1.6;margin-top:6px;}
.action-chosen{margin-top:16px;font-size:.95rem;color:var(--ink-soft);line-height:1.9;display:none;}
.action-chosen.show{display:block;animation:pop .4s;}
@media(max-width:560px){.action-grid{grid-template-columns:1fr;}}
/* 情绪急救「安心语」（新增环节） */
.comfort-box{
margin-top:20px;background:linear-gradient(135deg,#f0fbff,#fff0f6);
border-radius:20px;padding:16px 18px;text-align:center;
}
.comfort-box .cb-label{font-size:.8rem;font-weight:800;color:var(--lav);letter-spacing:1px;}
.comfort-box .cb-text{font-size:1.06rem;font-weight:800;line-height:1.9;margin-top:8px;color:var(--ink);}
/* ---------- 科普区 ---------- */
.sec-title{font-size:1.6rem;font-weight:900;text-align:center;margin-top:8px;}
.sec-sub{text-align:center;color:var(--ink-soft);margin:8px 0 4px;line-height:1.8;}
.sci{background:#fff;border-radius:22px;box-shadow:var(--shadow);margin-top:14px;overflow:hidden;}
.sci-head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;transition:background .15s;}
.sci-head:active{background:#fdf3f7;}
.sci-emoji{font-size:2rem;flex-shrink:0;}
.sci-t{flex:1;}
.sci-name{font-weight:900;font-size:1.08rem;}
.sci-teaser{color:var(--ink-soft);font-size:.86rem;margin-top:3px;}
.sci-arrow{font-size:1.2rem;color:#d8c9e2;transition:transform .3s;}
.sci.open .sci-arrow{transform:rotate(180deg);}
.sci-body{display:none;padding:0 18px 18px;}
.sci.open .sci-body{display:block;animation:pop .3s;}
.sci-intro{color:var(--ink-soft);font-size:.95rem;line-height:1.9;}
.sci-points{margin-top:10px;}
.sci-points li{list-style:none;display:flex;gap:10px;margin:9px 0;line-height:1.75;font-size:.97rem;color:var(--ink);}
.sci-extra{
margin-top:12px;background:linear-gradient(135deg,#f0fbff,#fff0f6);
border-radius:14px;padding:12px 14px;font-size:.92rem;line-height:1.8;color:var(--ink-soft);
}
/* ---------- 治愈角 ---------- */
.heal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:18px;}
.flip-wrap{perspective:1100px;}
.flip{position:relative;height:170px;transform-style:preserve-3d;transition:transform .6s;cursor:pointer;}
.flip.flipped{transform:rotateY(180deg);}
.flip-face{
position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;
}
.flip-front{
background:linear-gradient(145deg,#fff,#fdf1f6);border:3px dashed #ffc9dc;
box-shadow:var(--shadow);
}
.flip-front .f-emoji{font-size:2.8rem;animation:bob 2.6s ease-in-out infinite;}
.flip-front .f-hint{color:var(--pink-deep);font-weight:900;margin-top:10px;font-size:.95rem;}
.flip-back{
background:linear-gradient(145deg,#ffeef4,#fff6e8);
transform:rotateY(180deg);box-shadow:var(--shadow);border:3px solid #ffd7e6;
}
.flip-back p{font-size:.98rem;font-weight:800;line-height:1.9;color:var(--ink);}
.flip-back .f-small{font-size:.8rem;color:var(--ink-soft);margin-top:10px;font-weight:600;}
/* 写给自己的悄悄话（新增环节） */
.letter-box{
margin-top:22px;background:#fff;border-radius:22px;box-shadow:var(--shadow);
padding:20px 18px;border:3px dashed var(--pink);
}
.letter-box h3{font-size:1.1rem;font-weight:900;color:var(--pink-deep);text-align:center;}
.letter-lines{margin-top:12px;}
.letter-lines p{line-height:2;color:var(--ink-soft);font-size:.98rem;}
.letter-lines b{color:var(--ink);}
/* ---------- 结束页 ---------- */
.ending-card{text-align:center;padding:2rem 1.5rem;}
.ending-big{font-size:3.4rem;animation:bob 3s ease-in-out infinite;display:inline-block;}
.ending-title{font-size:1.7rem;font-weight:900;margin-top:10px;color:var(--pink-deep);}
.ending-msg{color:var(--ink-soft);line-height:2.1;margin-top:16px;font-size:1.02rem;text-align:left;}
.disclaimer{
background:#fff3e6;border-radius:20px;padding:16px 18px;margin-top:20px;text-align:left;
font-size:.9rem;line-height:1.9;color:#a4701e;
}
.disclaimer b{color:#8a5a10;}
.ending-team{margin-top:26px;font-weight:900;font-size:1.1rem;color:var(--ink-soft);letter-spacing:1px;}
.ending-team .heart{color:#ff5f8f;}
/* ---------- 彩带 ---------- */
.confetti{
position:fixed;top:-20px;z-index:99;width:12px;height:12px;border-radius:3px;
animation:confettiFall linear forwards;pointer-events:none;
}
@keyframes confettiFall{
0%{transform:translateY(-5vh) rotate(0);opacity:1;}
100%{transform:translateY(108vh) rotate(720deg);opacity:.9;}
}
footer.page-foot{text-align:center;color:#c3b4cf;font-size:.82rem;margin-top:30px;}
/* !important 是必需的：下面 `.overlay{display:flex}` 写在这条之后、优先级相同，
会把 `.hidden` 顶掉 —— 结果 8 个浮层永远显示，最后一个「今日小挑战」盖满全屏，
页面看着就是卡死、点哪都没反应（2026-10-25 线上就是这个 bug）。 */
.hidden{display:none !important;}
/* ---------- 答题前：年龄 & 性格（引导页） ---------- */
.btn:disabled{opacity:.55;cursor:not-allowed;}
.intro-block{text-align:center;}
.intro-block h2{font-size:1.4rem;font-weight:900;color:var(--pink-deep);}
.intro-block .intro-sub{color:var(--ink-soft);font-size:.95rem;margin-top:8px;line-height:1.8;}
.intro-q{margin-top:22px;text-align:left;}
.intro-q .iq-tag{display:inline-block;font-size:.8rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink-deep));border-radius:99px;padding:4px 12px;}
.intro-q .iq-title{font-weight:900;font-size:1.1rem;margin-top:10px;}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
@media(max-width:560px){.choice-grid{grid-template-columns:1fr;}}
.choice{
background:#fff;border:3px solid #eee7f2;border-radius:18px;padding:12px 10px;
cursor:pointer;text-align:center;transition:transform .12s,border-color .12s,background .12s;
font-family:inherit;
}
.choice:hover{border-color:var(--pink);transform:translateY(-2px);}
.choice:active{transform:scale(.97);}
.choice .c-emoji{font-size:1.8rem;display:block;}
.choice .c-name{font-weight:800;font-size:.95rem;margin-top:6px;color:var(--ink);}
.choice .c-sub{font-size:.74rem;color:var(--ink-soft);margin-top:2px;}
.choice.selected{border-color:var(--pink-deep);background:#fff0f4;box-shadow:0 6px 16px rgba(255,111,156,.22);}
.intro-note{margin-top:18px;font-size:.8rem;color:#b9a9c6;line-height:1.7;text-align:center;}
.intro-back{margin-top:14px;display:inline-block;color:var(--ink-soft);font-size:.85rem;cursor:pointer;text-decoration:underline;}
.per-line{margin-top:10px;font-size:.9rem;color:var(--ink-soft);font-weight:700;text-align:center;line-height:1.8;}
/* ---------- 趣味乐园 ---------- */
.fun-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
@media(max-width:560px){.fun-grid{grid-template-columns:1fr;}}
.fun-card{
background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:22px 16px;
text-align:center;cursor:pointer;border:3px solid #fff;transition:transform .15s,border-color .15s;
font-family:inherit;
}
.fun-card:hover{transform:translateY(-4px);border-color:var(--pink);}
.fun-card:active{transform:scale(.97);}
.fun-card .fc-emoji{font-size:2.8rem;display:block;animation:bob 2.8s ease-in-out infinite;}
.fun-card .fc-name{font-weight:900;font-size:1.08rem;margin-top:10px;color:var(--ink);}
.fun-card .fc-desc{color:var(--ink-soft);font-size:.85rem;line-height:1.6;margin-top:6px;}
/* 扭蛋机弹窗 */
.gacha-machine{
width:150px;height:150px;margin:10px auto 0;border-radius:50% 50% 46% 46%;
background:radial-gradient(circle at 35% 30%,#ff9fb4,#ff6f9c 75%);
box-shadow:0 10px 26px rgba(255,111,156,.4),inset 0 -10px 20px rgba(255,255,255,.28);
display:flex;align-items:center;justify-content:center;font-size:3.4rem;
animation:gachaSpin 1.6s ease-in-out infinite;
}
.gacha-machine.rolling{animation:gachaShake .5s ease-in-out infinite;}
@keyframes gachaSpin{0%,100%{transform:rotate(-6deg) translateY(0);}50%{transform:rotate(6deg) translateY(-8px);}}
@keyframes gachaShake{0%,100%{transform:translateX(-7px) rotate(-4deg);}50%{transform:translateX(7px) rotate(4deg);}}
.gacha-result{
margin-top:16px;background:linear-gradient(135deg,#f0fbff,#fff0f6);
border-radius:18px;padding:16px 14px;min-height:64px;display:flex;align-items:center;justify-content:center;
font-size:1.05rem;font-weight:800;line-height:1.9;color:var(--ink);animation:pop .35s;
}
.gacha-count{font-size:.8rem;color:#b9a9c6;margin-top:10px;font-weight:700;}
/* 记忆翻牌 */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.mem-card{position:relative;height:78px;border-radius:16px;cursor:pointer;perspective:600px;}
.mem-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .4s;border-radius:16px;}
.mem-card.flip .mem-inner{transform:rotateY(180deg);}
.mem-face{
position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:.92rem;line-height:1.5;
}
.mem-front{background:linear-gradient(145deg,var(--pink),var(--pink-deep));color:#fff;font-size:1.5rem;}
.mem-back{background:#fff;border:3px solid var(--pink);transform:rotateY(180deg);color:var(--ink);}
.mem-card.done .mem-back{background:#e9fbe9;border-color:#5fd69a;color:#3f9d6a;}
.mem-status{margin-top:12px;font-size:.9rem;color:var(--ink-soft);font-weight:700;}
/* 接阳光 */
.catch-box{
position:relative;width:100%;height:300px;margin-top:14px;overflow:hidden;
background:linear-gradient(180deg,#bfe6ff,#eaf8ff);border-radius:20px;border:3px solid #cfeaff;
touch-action:manipulation;cursor:pointer;user-select:none;
}
.catch-box .cb-hint{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
color:#4d7fa8;font-weight:800;line-height:2;font-size:.95rem;pointer-events:none;text-align:center;padding:0 14px;
}
.catch-item{position:absolute;font-size:2rem;animation:catchFall linear forwards;pointer-events:none;text-shadow:0 2px 6px rgba(255,190,60,.6);}
@keyframes catchFall{0%{transform:translateY(-40px) rotate(0);}100%{transform:translateY(340px) rotate(160deg);}}
.catch-item.caught{animation:none;transform:scale(1.6);opacity:0;transition:opacity .3s;}
.catch-hud{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-weight:900;font-size:1rem;color:var(--ink);}
/* 今日小挑战 */
.daily-card{
background:linear-gradient(135deg,#fff7e0,#ffeef2);border-radius:20px;padding:20px 16px;
margin-top:14px;text-align:center;border:3px dashed var(--sun);
}
.daily-card .dc-date{font-size:.8rem;color:#c09a4a;font-weight:800;letter-spacing:1px;}
.daily-card .dc-task{font-size:1.22rem;font-weight:900;margin-top:10px;line-height:1.8;color:var(--ink);}
.daily-card .dc-emoji{font-size:2.6rem;margin-top:6px;display:block;animation:bob 2.6s ease-in-out infinite;}
.daily-done{margin-top:12px;font-weight:800;color:#3f9d6a;font-size:.95rem;line-height:1.7;}
/* ---------- 浮层 & 弹窗 ---------- */
.overlay{
position:fixed;inset:0;z-index:500;background:rgba(60,50,80,.45);
display:flex;align-items:center;justify-content:center;padding:18px;
backdrop-filter:blur(3px);animation:pop .25s ease;
}
.modal{
background:var(--card);border-radius:26px;box-shadow:0 20px 60px rgba(40,30,60,.35);
padding:26px 22px;max-width:440px;width:100%;max-height:86vh;overflow:auto;
animation:pop .3s ease;text-align:center;
}
.modal.small{max-width:360px;}
.modal h2{font-size:1.3rem;font-weight:900;color:var(--pink-deep);}
.modal p{color:var(--ink-soft);line-height:1.9;margin-top:10px;font-size:.98rem;text-align:left;}
.modal .thanks-big{font-size:3rem;animation:bob 3s ease-in-out infinite;display:inline-block;}
.modal input[type=password]{
width:100%;padding:12px 16px;border:3px solid #eee7f2;border-radius:16px;
font-family:inherit;font-size:1.05rem;text-align:center;outline:none;margin-top:14px;
}
.modal input[type=password]:focus{border-color:var(--pink);}
.modal .shake{animation:shake .4s;}
/* 评分星星 */
.stars{display:flex;justify-content:center;gap:6px;margin:16px 0 4px;font-size:2.6rem;cursor:pointer;user-select:none;}
.stars span{color:#e6ddf0;transition:transform .12s,color .12s;}
.stars span.lit{color:var(--sun);text-shadow:0 2px 8px rgba(255,190,60,.55);}
.stars span:active{transform:scale(1.2);}
.stars-readonly{font-size:1.3rem;letter-spacing:2px;color:var(--sun);}
textarea.rate-cmt{
width:100%;min-height:86px;margin-top:14px;padding:12px 14px;border:3px solid #eee7f2;
border-radius:16px;font-family:inherit;font-size:.98rem;color:var(--ink);outline:none;resize:vertical;
}
textarea.rate-cmt:focus{border-color:var(--pink);}
/* 后台面板 */
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.admin-cell{background:#fff;border-radius:16px;padding:12px 8px;box-shadow:var(--shadow);}
.admin-cell .n{font-size:1.5rem;font-weight:900;color:var(--pink-deep);}
.admin-cell .l{font-size:.74rem;color:var(--ink-soft);font-weight:700;margin-top:2px;}
.admin-days{display:flex;align-items:flex-end;gap:8px;height:90px;margin-top:14px;padding:0 4px;}
.admin-days .bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;}
.admin-days .bar{width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--pink),var(--pink-deep));min-height:4px;transition:height .6s;}
.admin-days .d{font-size:.68rem;color:var(--ink-soft);}
.admin-ratings{margin-top:14px;text-align:left;}
.admin-ratings .r-item{background:#fff;border-radius:14px;padding:10px 12px;margin-top:8px;box-shadow:0 2px 10px rgba(120,100,150,.1);}
.admin-ratings .r-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-soft);}
.admin-ratings .r-cmt{margin-top:4px;font-size:.92rem;color:var(--ink);line-height:1.6;}
.admin-ratings .empty{color:var(--ink-soft);text-align:center;margin-top:10px;font-size:.9rem;}
/* Toast */
.toast{
position:fixed;bottom:34px;left:50%;transform:translateX(-50%) translateY(20px);
background:rgba(40,35,55,.92);color:#fff;font-size:.95rem;font-weight:700;
padding:12px 22px;border-radius:99px;z-index:800;opacity:0;pointer-events:none;
transition:opacity .3s,transform .3s;box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}