/* 關於頁小互動的樣式（行為在 about-play.js）。卡片外框沿用 redesign.css 的關於頁統一樣式。 */

/* ── 小天卡片右側：文字靠上，下面留一塊地給史萊貓跳 ── */
.archive-site #about .profile-main{display:flex;flex-direction:column;align-self:stretch;padding:34px 38px 0}
.archive-site #about .profile-text{flex:none}
.archive-site #about .about-slime-yard{position:relative;flex:none;height:132px;margin:auto -38px 0;padding:0 38px;border-top:1px dashed #e8e4ee;background:linear-gradient(180deg,rgba(247,243,251,0) 0%,#f7f3fb 100%);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.archive-site #about .about-slime-score{position:absolute;top:10px;left:38px;color:#a49cb8;font-size:11px;letter-spacing:.06em;pointer-events:none}
.archive-site #about .about-slime{position:absolute;left:30px;bottom:8px;width:76px;height:70px;pointer-events:none;transition:transform .9s cubic-bezier(.45,0,.25,1)}
.archive-site #about .about-slime.is-fast{transition-duration:.26s;transition-timing-function:cubic-bezier(.2,.8,.3,1)}
.archive-site #about .about-slime.is-dodge{animation:about-slime-leap .34s ease-out}
.archive-site #about .about-slime::after{content:'';position:absolute;left:20%;right:24%;bottom:-2px;height:7px;border-radius:50%;background:rgba(53,49,72,.16);animation:about-slime-shadow .9s infinite}
.archive-site #about .about-slime-jelly{position:absolute;left:0;right:0;bottom:0;height:76px;transform-origin:50% 96%;animation:about-slime-hop .9s infinite}
.archive-site #about .about-slime.is-left .about-slime-jelly{scale:-1 1}
.archive-site #about .about-slime-jelly img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none}
.archive-site #about .about-slime-jelly .is-ear-l{transform-origin:28% 52%;animation:about-slime-ear-l .9s infinite}
.archive-site #about .about-slime-jelly .is-ear-r{transform-origin:62% 58%;animation:about-slime-ear-r .9s infinite}
.archive-site #about .about-slime-jelly .is-tail{transform-origin:79% 88%;animation:about-slime-tail .45s ease-in-out infinite alternate}
.archive-site #about .about-slime-jelly .is-face-01{animation:about-slime-face-01 .9s infinite}
.archive-site #about .about-slime-jelly .is-face-02{opacity:0;animation:about-slime-face-02 .9s infinite}
/* 嘲諷泡泡 */
.archive-site #about .about-slime-bubble{position:absolute;bottom:calc(100% + 4px);left:50%;z-index:2;padding:5px 11px;border:1px solid #e3dcea;border-radius:10px;background:#fff;color:#4a3f74;font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap;box-shadow:0 4px 12px rgba(90,64,110,.12);opacity:0;transform:translate(-50%,6px) scale(.9);transition:opacity .15s,transform .15s}
.archive-site #about .about-slime[data-side="l"] .about-slime-bubble{left:0;transform:translate(0,6px) scale(.9)}
.archive-site #about .about-slime[data-side="r"] .about-slime-bubble{left:auto;right:0;transform:translate(0,6px) scale(.9)}
.archive-site #about .about-slime-bubble.is-show{opacity:1;transform:translate(-50%,0) scale(1)}
.archive-site #about .about-slime[data-side="l"] .about-slime-bubble.is-show,
.archive-site #about .about-slime[data-side="r"] .about-slime-bubble.is-show{transform:none}

@keyframes about-slime-hop{
  0%,100%{transform:scale(1.16,.84);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  16%{transform:translateY(-4%) scale(.9,1.12);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  45%{transform:translateY(-30%) scale(.98,1.03);animation-timing-function:cubic-bezier(.6,0,.8,.5)}
  74%{transform:translateY(-3%) scale(.92,1.1);animation-timing-function:ease-out}
  84%{transform:scale(1.18,.82)}
  92%{transform:scale(1.06,.95)}
}
@keyframes about-slime-shadow{0%,100%,84%{transform:scale(1.1,1);opacity:1}45%{transform:scale(.6,.8);opacity:.5}}
@keyframes about-slime-ear-l{0%,100%{transform:rotate(4deg)}30%{transform:rotate(-10deg)}70%{transform:rotate(8deg)}}
@keyframes about-slime-ear-r{0%,100%{transform:rotate(-4deg)}30%{transform:rotate(10deg)}70%{transform:rotate(-8deg)}}
@keyframes about-slime-tail{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes about-slime-face-01{0%,26%,66%,100%{opacity:1}30%,62%{opacity:0}}
@keyframes about-slime-face-02{0%,26%,66%,100%{opacity:0}30%,62%{opacity:1}}
@keyframes about-slime-leap{0%{translate:0 0}45%{translate:0 -34px}100%{translate:0 0}}

/* ── 戳戳立繪 ── */
.archive-site #about .about-poke{display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;overflow:hidden}
.archive-site #about .about-poke img{transition:transform .25s ease}
.archive-site #about .about-poke:hover img{transform:scale(1.02)}
.archive-site #about .about-poke.is-poked img{animation:about-poke-squish .32s ease-out}
.archive-site #about .about-poke:focus-visible{outline:2px solid #8a76ae;outline-offset:-4px}
.archive-site #about .about-poke-hint{position:absolute;left:14px;bottom:14px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.88);color:#8a76ae;font-size:12px;font-weight:700;letter-spacing:.08em;box-shadow:0 2px 8px rgba(90,64,110,.15);pointer-events:none;animation:about-hint-bob 1.8s ease-in-out infinite;transition:opacity .3s}
.archive-site #about.about-poked .about-poke-hint{opacity:0}
.archive-site #about .about-poke-bubble{position:absolute;top:14px;left:14px;right:14px;padding:10px 14px;border:1px solid #e3dcea;border-radius:12px 12px 12px 3px;background:#fff;color:#4a3f74;font-size:13px;font-weight:700;line-height:1.6;box-shadow:0 6px 18px rgba(90,64,110,.16);pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}
.archive-site #about .about-poke-bubble:empty{display:none}
.archive-site #about .about-poke-bubble.is-show{opacity:1;transform:none}
@keyframes about-poke-squish{0%{transform:scale(1)}35%{transform:scale(.97,1.03)}70%{transform:scale(1.02,.98)}100%{transform:scale(1)}}
@keyframes about-hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ── 標籤翻面 ── */
.archive-site #about .profile-overview .about-flip{font:inherit;font-size:12px;cursor:pointer;transition:transform .15s ease-in,background-color .2s,color .2s,border-color .2s}
.archive-site #about .profile-overview .about-flip:hover{border-color:#cdbfe0}
.archive-site #about .profile-overview .about-flip.is-turning{transform:rotateX(90deg)}
.archive-site #about .profile-overview .about-flip.is-back{border-color:#f0c9d8;background:#fff4f8;color:#b35d7a}

/* ── 能量條、今日卯咪：兩張並排 ── */
.archive-site #about .about-play-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}
.archive-site #about .about-play-row>.card{padding:20px 22px;margin:0}
.archive-site #about .about-play-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:14px}
.archive-site #about .about-play-title{margin:0;color:#222b3f;font-size:16px;font-weight:700;letter-spacing:.025em;line-height:1.5}
.archive-site #about .about-play-en{color:#7a7293;font-family:'Outfit',Arial,sans-serif;font-size:11px;letter-spacing:.1em}
.archive-site #about .about-sound,
.archive-site #about .about-cat-date{margin-left:auto;color:#8890a2;font-size:11px}
.archive-site #about .about-sound{padding:2px 8px;border:1px solid #e3e0ec;border-radius:999px;background:#fff;font:inherit;font-size:11px;cursor:pointer}
.archive-site #about .about-sound[aria-pressed="false"]{color:#b3b8c6;text-decoration:line-through}

.archive-site #about .about-energy-meter{position:relative;display:flex;align-items:center;gap:12px}
.archive-site #about .about-energy-bar{position:relative;flex:1;height:18px;border:1px solid #e0dbe9;border-radius:999px;background:#f1eef6;overflow:hidden}
.archive-site #about .about-energy-bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(255,255,255,.75) calc(10% - 2px) 10%);pointer-events:none}
.archive-site #about .about-energy-fill{display:block;width:35%;height:100%;border-radius:999px;background:linear-gradient(90deg,#f3a0b6,#e5587f);transition:width .35s cubic-bezier(.3,.8,.4,1),background .3s}
.archive-site #about .about-energy[data-level="low"] .about-energy-fill{background:linear-gradient(90deg,#f8c99a,#ee9a5c)}
.archive-site #about .about-energy[data-level="mid"] .about-energy-fill{background:linear-gradient(90deg,#cbbcf3,#9b84e0)}
.archive-site #about .about-energy[data-level="high"] .about-energy-fill{background:linear-gradient(90deg,#9fe0c6,#4fb894)}
.archive-site #about .about-energy-num{min-width:46px;color:#6e578a;font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.archive-site #about .about-energy-pop{position:absolute;top:-4px;z-index:2;font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;pointer-events:none;text-shadow:1.5px 0 0 #fff,-1.5px 0 0 #fff,0 1.5px 0 #fff,0 -1.5px 0 #fff;animation:about-energy-pop .9s ease-out forwards}
.archive-site #about .about-energy-pop.is-down{color:#e5587f}
.archive-site #about .about-energy-pop.is-up{color:#3fa47f}
.archive-site #about .about-energy-status{min-height:1.7em;margin:12px 0 14px;color:#59647a;font-size:13px;line-height:1.7}
.archive-site #about .about-energy-actions{display:flex;flex-wrap:wrap;gap:10px}
.archive-site #about .about-energy-btn{padding:9px 16px;border:1px solid #e3e0ec;border-radius:6px;background:#fff;color:#4a3f74;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s,opacity .2s}
.archive-site #about .about-energy-btn:active{transform:scale(.96)}
.archive-site #about .about-energy-btn.is-hit{border-color:#efc3d2;color:#b35d7a}
.archive-site #about .about-energy-btn.is-hit:hover{background:#fff4f8}
.archive-site #about .about-energy-btn.is-charge{border-color:#dcd2f1;background:#f6f2fd;color:#6e578a}
.archive-site #about .about-energy-btn.is-charge:hover{background:#eee7fb}
.archive-site #about .about-energy-btn.is-cooling{opacity:.55}
.archive-site #about .about-energy-btn:disabled{opacity:.4;cursor:not-allowed}
.archive-site #about .about-energy.is-hit .about-energy-meter{animation:about-energy-shake .3s}
.archive-site #about .about-energy.is-charge .about-energy-bar{animation:about-energy-glow .6s}
.archive-site #about .about-energy.is-offline .about-energy-bar{filter:grayscale(1)}
.archive-site #about .about-energy.is-offline .about-energy-status{color:#8890a2}
@keyframes about-energy-pop{0%{opacity:0;transform:translate(-50%,4px) scale(.8)}20%{opacity:1;transform:translate(-50%,-8px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-26px)}}
@keyframes about-energy-shake{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes about-energy-glow{0%{box-shadow:0 0 0 0 rgba(155,132,224,.55)}100%{box-shadow:0 0 0 10px rgba(155,132,224,0)}}

/* 今日卯咪 */
.archive-site #about .about-cat-body{display:flex;align-items:center;gap:18px}
.archive-site #about .about-cat-figure{flex:none;width:112px;height:112px;margin:0;padding:8px;border:1px solid #ece8f2;border-radius:14px;background:radial-gradient(circle at 50% 70%,#fff 0,#f7f3fb 70%);cursor:pointer}
.archive-site #about .about-cat-figure img{display:block;width:100%;height:100%;object-fit:contain}
.archive-site #about .about-cat-figure.is-pet img{animation:about-cat-wiggle .45s ease-in-out}
.archive-site #about .about-cat-text{min-width:0}
.archive-site #about .about-cat-text p{margin:0}
.archive-site #about .about-cat-name strong{margin-right:8px;color:#222b3f;font-family:'Outfit',sans-serif;font-size:20px;letter-spacing:.06em}
.archive-site #about .about-cat-name span{color:#8890a2;font-size:11px}
.archive-site #about .about-cat-trait{margin-top:4px!important;color:#59647a;font-size:13px;line-height:1.7}
.archive-site #about .about-cat-say{min-height:1.7em;margin-top:8px!important;color:#b35d7a;font-size:13px;font-weight:700;line-height:1.7}
.archive-site #about .about-cat-pet{margin-top:10px;padding:6px 14px;border:1px solid #efc3d2;border-radius:6px;background:#fff;color:#b35d7a;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.archive-site #about .about-cat-pet:hover{background:#fff4f8}
@keyframes about-cat-wiggle{0%,100%{transform:none}25%{transform:rotate(-6deg) scale(1.04)}50%{transform:rotate(5deg) scale(.98)}75%{transform:rotate(-2deg)}}

/* ── 小天測驗 ── */
.archive-site #about .about-quiz-body{padding:6px 22px 24px}
.archive-site #about .about-quiz-progress{display:flex;align-items:center;gap:12px;color:#8890a2;font-size:12px}
.archive-site #about .about-quiz-track{flex:1;height:6px;border-radius:999px;background:#f1eef6;overflow:hidden}
.archive-site #about .about-quiz-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#cbbcf3,#9b84e0);transition:width .3s}
.archive-site #about .about-quiz-q{margin:16px 0 14px;color:#222b3f;font-size:17px;font-weight:700;line-height:1.6}
.archive-site #about .about-quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.archive-site #about .about-quiz-option{padding:12px 14px;border:1px solid #e3e0ec;border-radius:6px;background:#fff;color:#4a3f74;font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.archive-site #about .about-quiz-option:hover:not(:disabled){border-color:#cdbfe0;background:#f6f3fb}
.archive-site #about .about-quiz-option:disabled{cursor:default}
.archive-site #about .about-quiz-option.is-right{border-color:#9bd3b7;background:#eaf7f0;color:#2f7a57;font-weight:700}
.archive-site #about .about-quiz-option.is-wrong{border-color:#f0b6c6;background:#fdeef2;color:#b3456a}
.archive-site #about .about-quiz-feedback{min-height:1.7em;margin:14px 0 0;font-size:13px;font-weight:700;line-height:1.7}
.archive-site #about .about-quiz-feedback.is-right{color:#2f7a57}
.archive-site #about .about-quiz-feedback.is-wrong{color:#b3456a}
.archive-site #about .about-quiz-next{margin-top:12px;padding:9px 20px;border:1px solid #6e578a;border-radius:6px;background:#6e578a;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.archive-site #about .about-quiz-next:hover{background:#5c4777}
.archive-site #about .about-quiz-result{display:grid;justify-items:center;gap:4px;max-width:420px;margin:10px auto 0;padding:26px 22px;border:1px solid #e3dcea;border-radius:12px;background:linear-gradient(160deg,#f5f0fd 0%,#fff 55%,#fff4f8 100%);text-align:center}
.archive-site #about .about-quiz-kicker{color:#8a76ae;font-size:12px;letter-spacing:.12em}
.archive-site #about .about-quiz-score{color:#6e578a;font-family:'Outfit',sans-serif;font-size:46px;line-height:1.2}
.archive-site #about .about-quiz-score small{font-size:18px;color:#a49cb8}
.archive-site #about .about-quiz-title{color:#222b3f;font-size:20px;font-weight:700;letter-spacing:.06em}
.archive-site #about .about-quiz-note{margin:6px 0 4px;color:#59647a;font-size:13px;line-height:1.8}
.archive-site #about .about-quiz-site{color:#a49cb8;font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.08em}
.archive-site #about .about-quiz-result+.about-quiz-next{display:block;margin:14px auto 0}

/* ── 平板、手機 ── */
@media(max-width:1100px){
  .archive-site #about .profile-main{padding:28px 28px 0}
  .archive-site #about .about-slime-yard{margin:auto -28px 0;padding:0 28px}
  .archive-site #about .about-slime-score{left:28px}
}
@media(max-width:900px){
  .archive-site #about .about-play-row{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .archive-site #about .profile-main{padding:24px 22px 0}
  .archive-site #about .about-slime-yard{height:118px;margin:22px -22px 0;padding:0 22px}
  .archive-site #about .about-slime-score{left:22px}
  .archive-site #about .about-play-row>.card{padding:18px}
  .archive-site #about .about-cat-figure{width:96px;height:96px}
  .archive-site #about .about-quiz-body{padding:4px 18px 20px}
  .archive-site #about .about-quiz-options{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .archive-site #about .about-slime,.archive-site #about .about-slime-jelly,.archive-site #about .about-slime-jelly img,.archive-site #about .about-slime::after,.archive-site #about .about-poke-hint{animation:none!important}
  .archive-site #about .about-slime-jelly .is-face-02{opacity:0}
}