/* SUGU MITSUKARU LP：渡し方の比べっこアニメ（キャラ入り） */
.cmp{--gray:#8A9AA8;--warn:#E8A33D}
/* ===== 比べっこアニメ ===== */
.cmp{margin-top:22px;background:#fff;border-radius:22px;border:1.5px solid var(--line);box-shadow:0 14px 34px rgba(16,40,58,.08);padding:16px 12px 18px}
.cmp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 12px}
.cmp-top p{font-size:12.5px;font-weight:800;color:var(--sub)}
.cmp-top p b{color:var(--ink)}
.replay{font:inherit;font-size:12px;font-weight:800;color:var(--blue-d);background:#EAF6FD;border:0;border-radius:999px;padding:5px 12px;cursor:pointer}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lane{border-radius:16px;padding:12px 10px;position:relative;overflow:hidden}
.lane.old{background:#F5F7F9}
.lane.new{background:linear-gradient(180deg,#E8F6FE,#F4FBFF)}
.lane-h{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.lane-h .sa-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px}
.lane-h .t{font-size:min(13px,3.35vw);font-weight:900;line-height:1.3;white-space:nowrap;letter-spacing:-.01em}
.lane.old .t{color:#5B6B78}
.lane.new .t{color:var(--blue-d)}
.lane-h .sa-n{font-size:11px;font-weight:800;color:var(--gray);white-space:nowrap}
.lane.new .sa-n{color:var(--blue)}
.sa-steps{list-style:none;display:grid;gap:6px}
.st{position:relative;display:grid;grid-template-columns:22px 1fr;gap:7px;align-items:start;background:#fff;border:1.5px solid transparent;border-radius:11px;padding:8px 8px;font-size:12px;font-weight:700;line-height:1.4;color:#9AAAB6;transition:color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.st i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#E6ECF1;color:#fff;font-style:normal;font-size:11px;font-weight:900;transition:background .25s}
.st .x{grid-column:2}
/* 進行中 */
.st.now{color:var(--ink);border-color:#C9D6E0;box-shadow:0 6px 16px rgba(16,40,58,.08)}
.st.now i{background:var(--gray)}
.lane.new .st.now{border-color:#9ED8F6}
.lane.new .st.now i{background:var(--blue)}
/* 終わった */
.st.sa-done{color:var(--ink)}
.st.sa-done i{background:#B7C3CD}
.lane.new .st.sa-done i{background:var(--blue)}
.st.sa-done i:before{content:"✓"}
.st.sa-done i span{display:none}
/* アップロードのバー */
.sa-bar{grid-column:2;margin-top:6px;height:7px;border-radius:4px;background:#E6ECF1;overflow:hidden;display:none}
.sa-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#B7C3CD,#8A9AA8)}
.st.up.now .sa-bar,.st.up.sa-done .sa-bar{display:block}
.pct{grid-column:2;margin-top:3px;font-size:10.5px;color:var(--gray);display:none}
.st.up.now .pct{display:block}
.cloud{grid-column:2;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--warn);display:none}
.st.up.now .cloud,.st.up.sa-done .cloud{display:block}
/* 右だけ：送れた・そのあと */
.fin{word-break:keep-all;overflow-wrap:anywhere;margin-top:8px;border-radius:12px;padding:9px 10px;font-size:12px;font-weight:800;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.fin.sa-on{opacity:1;transform:none}
.lane.new .fin{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(14,165,233,.3)}
.lane.old .fin{background:#fff;color:#5B6B78;border:1.5px solid #D5DEE5}
.after{margin-top:6px;display:grid;gap:5px}
.after div{display:flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:7px 9px;font-size:11.5px;font-weight:700;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;box-shadow:0 4px 12px rgba(16,40,58,.06)}
.after div.sa-on{opacity:1;transform:none}
.after .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.after .dot.stop{background:#E5484D}
/* まだ待っている（右が終わったあと） */
.wait{font-size:10px;font-weight:800;color:#fff;background:var(--warn);border-radius:999px;padding:2px 8px;opacity:0;transition:opacity .3s;white-space:nowrap}
.wait.sa-on{opacity:1}
.goal{white-space:nowrap;font-size:10px;font-weight:900;color:#fff;background:var(--green);border-radius:999px;padding:2px 8px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.goal.sa-on{opacity:1;transform:none}
.cmp.still *{transition:none!important}

/* ===== キャラ ===== */
.stage{position:relative;height:138px;margin:0 0 10px;border-radius:12px;background:#fff;overflow:hidden}
.lane.old .stage{background:linear-gradient(180deg,#EEF1F4,#F8FAFB)}
.lane.new .stage{background:linear-gradient(180deg,#DDF1FC,#F3FAFE)}
.chr{position:absolute;left:50%;margin-left:-35px;bottom:0;width:70px;height:72px}
.chr .e-happy,.chr .e-tired,.chr .m-worry,.chr .m-o,.chr .sweat,.chr .cup{display:none}
.say{position:absolute;left:7px;right:7px;top:8px;text-align:center;background:#fff;border-radius:12px;padding:6px 9px;font-size:11px;font-weight:800;line-height:1.35;color:var(--ink);box-shadow:0 4px 12px rgba(16,40,58,.10)}
.say:before{content:"";position:absolute;left:50%;margin-left:-6px;bottom:-6px;border-style:solid;border-width:7px 6px 0 6px;border-color:#fff transparent transparent transparent}
.lane.old .say{color:#5B6B78}
.say.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(.85);opacity:.3}100%{transform:none;opacity:1}}
.fx{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:900;letter-spacing:.04em}
.lane.old .fx{color:var(--warn)}
.lane.new .fx{color:var(--blue-d)}
/* 気分ごと */
[data-mood="busy"] .bd{animation:hop .45s ease-in-out infinite}
[data-mood="busy"] .m-smile{display:none}[data-mood="busy"] .m-worry{display:block}
[data-mood="wait"] .bd{animation:shake .25s linear infinite}
[data-mood="wait"] .m-smile{display:none}[data-mood="wait"] .m-o{display:block}
[data-mood="wait"] .sweat,[data-mood="busy"] .sweat{display:block}
[data-mood="wait"] .sweat{animation:drip 1s ease-in infinite}
[data-mood="tired"] .e-open{display:none}[data-mood="tired"] .e-tired{display:block}
[data-mood="tired"] .m-smile{display:none}[data-mood="tired"] .m-worry{display:block}
[data-mood="tired"] .bd{transform:translateY(4px) rotate(-4deg);transform-origin:60px 116px}
[data-mood="quick"] .bd{animation:hop .5s ease-in-out infinite}
[data-mood="happy"] .e-open{display:none}[data-mood="happy"] .e-happy{display:block}
[data-mood="relax"] .e-open{display:none}[data-mood="relax"] .e-happy{display:block}
[data-mood="relax"] .cup{display:block}
[data-mood="relax"] .bd{animation:sway 2.4s ease-in-out infinite}
[data-mood="relax"] .steam{animation:steam 1.6s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes drip{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(6px);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes steam{0%,100%{opacity:.2}50%{opacity:1}}
.cmp.still .bd,.cmp.still .sweat,.cmp.still .steam{animation:none!important}
@media(min-width:900px){
 .stage{height:150px}
 .chr{width:112px;height:116px;left:14px;margin-left:0}
 .say{font-size:14px;padding:9px 13px;left:auto;max-width:calc(100% - 140px);right:12px;top:22px;text-align:left}
 .say:before{left:-7px;margin-left:0;bottom:auto;top:12px;border-width:6px 8px 6px 0;border-color:transparent #fff transparent transparent}
 .fx{font-size:13px;right:14px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){.bd,.sweat,.steam{animation:none!important}}
/* まとめ */
.sum{margin-top:14px;text-align:center;font-size:16px;font-weight:900;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;word-break:auto-phrase}
.sum em{font-style:normal;color:var(--blue-d)}
.sum.sa-on{opacity:1;transform:none}
.sa-note{margin-top:8px;text-align:center;font-size:11px;color:var(--gray)}

@media(min-width:900px){
 .cmp{max-width:880px;margin:30px auto 0;padding:26px 26px 28px}
 .lanes{gap:18px}
 .lane{padding:18px 18px 20px}
 .lane-h .sa-n{font-size:13px}
 .st{grid-template-columns:28px 1fr;gap:10px;padding:11px 12px;font-size:14.5px}
 .st i{width:28px;height:28px;font-size:13px}
 .sa-bar{height:9px}.pct,.cloud{font-size:12px}
 .fin{font-size:14.5px;padding:12px 14px}
 .after div{font-size:13.5px;padding:9px 12px}
 .wait,.goal{font-size:12px}
 .lane-h .t{font-size:17px}
 .sum{font-size:22px;margin-top:20px}
 .cmp-top p{font-size:14px}
}