:root{--bg:#f6f3ec;--card:#fff;--ink:#2f3a36;--soft:#6c7a74;--mint:#87c9a3;--mint2:#d9f0e2;--peach:#f7c6a8;--peach2:#fde9dc;--lav:#c9c2ee;--lav2:#ece9fb;--sky:#bfe1f2;--sky2:#e6f4fb;--sun:#f6dd8a;--rose:#f2a7b5;--r:22px;--sh:0 6px 20px rgba(60,80,70,.08)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:linear-gradient(160deg,#eaf6ef,#f6f3ec 45%,#f3eefb);font-family:"Nunito","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink)}
#frame{position:relative;max-width:440px;margin:0 auto;min-height:100dvh;background:var(--bg);overflow:hidden}
@media(min-width:600px){body{padding:24px 0}#frame{min-height:880px;height:880px;border-radius:38px;box-shadow:0 20px 60px rgba(60,80,70,.18);border:8px solid #fff}}
#app{height:100%;min-height:100dvh;overflow-y:auto;padding:18px 20px 110px}
@media(min-width:600px){#app{min-height:0;height:100%}}
.screen{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:28px;margin:8px 0 6px;letter-spacing:-.3px}h2{font-size:22px;margin:6px 0}h3{font-size:16px;margin:14px 0 6px}
p{line-height:1.45}.muted{color:var(--soft)}.small{font-size:13px}.center{text-align:center}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--sh);margin:12px 0}
.btn{display:block;width:100%;border:0;border-radius:18px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;background:var(--mint);color:#173a2a;margin:10px 0;font-family:inherit;transition:transform .1s}
.btn:active{transform:scale(.97)}.btn.ghost{background:#fff;color:var(--ink);box-shadow:var(--sh)}.btn.peach{background:var(--peach)}.btn.lav{background:var(--lav)}.btn.small{padding:10px;font-size:14px}
.btn:disabled{opacity:.45}
.opts{display:grid;gap:10px;margin:14px 0}.opts.two{grid-template-columns:1fr 1fr}
.opt{background:#fff;border:2px solid transparent;border-radius:18px;padding:14px;font-size:16px;text-align:left;cursor:pointer;box-shadow:var(--sh);font-family:inherit;color:var(--ink)}
.opt.sel{border-color:var(--mint);background:var(--mint2)}.opt .sub{display:block;font-size:12.5px;color:var(--soft);margin-top:3px}
.opt.dis{opacity:.5}
.steps{display:flex;gap:6px;margin:4px 0 10px}.steps i{flex:1;height:6px;border-radius:6px;background:#e3e0d8}.steps i.on{background:var(--mint)}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.back{background:none;border:0;font-size:22px;cursor:pointer;color:var(--soft);padding:4px}
.chip{display:inline-block;background:var(--mint2);border-radius:99px;padding:5px 11px;font-size:13px;font-weight:700;margin:2px}
.chip.p{background:var(--peach2)}.chip.l{background:var(--lav2)}.chip.s{background:var(--sky2)}
#tabs{position:absolute;bottom:0;left:0;right:0;display:flex;background:#fffd;backdrop-filter:blur(8px);border-top:1px solid #eee;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
#tabs button{flex:1;background:none;border:0;font-size:20px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;opacity:.55;font-family:inherit}
#tabs button span{font-size:12px;font-weight:700}#tabs button.on{opacity:1}
.hidden{display:none!important}
#modal{position:absolute;inset:0;background:rgba(40,50,45,.35);display:flex;align-items:flex-end;z-index:20;animation:fade .2s}
#modal .sheet{background:var(--bg);width:100%;border-radius:28px 28px 0 0;padding:22px 20px 30px;max-height:90%;overflow:auto}
#toast{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#2f3a36;color:#fff;padding:10px 16px;border-radius:14px;font-size:14px;z-index:30;max-width:90%;text-align:center}
.proto-badge{position:fixed;bottom:6px;right:8px;font-size:11px;color:#8a978f;pointer-events:none}
@media(max-width:599px){.proto-badge{display:none}}
/* mascots */
.mascot{display:inline-block}.mascot svg{display:block}
.bob{animation:bob 2.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-4px)}}
.mouth{transition:all .1s}.talking .mouth{animation:talk .28s infinite alternate}
@keyframes talk{from{transform:scaleY(.25)}to{transform:scaleY(1.4)}}
.listening .ear,.listening .head{animation:tilt 1.6s ease-in-out infinite;transform-origin:center}
@keyframes tilt{50%{transform:rotate(-4deg)}}
/* conversation */
.convo{background:linear-gradient(180deg,var(--sky2),#fff 80%);border-radius:26px;padding:12px 10px 8px;box-shadow:var(--sh);position:relative}
.convo-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--soft);padding:0 6px}
.stage{position:relative;height:190px}
.stage .who{position:absolute;bottom:0;text-align:center;font-size:12px;font-weight:800}
.stage .who.l{left:2px}.stage .who.r{right:2px}
.stage svg.string{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.bubble-dot{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--lav));box-shadow:0 0 0 4px #fff8,0 4px 10px rgba(0,0,0,.12);opacity:0;pointer-events:none}
.role-tag{display:inline-block;background:#fff;border-radius:99px;padding:3px 8px;font-size:11px;margin-top:2px}
.prompt{background:#fff;border-radius:18px;padding:12px 14px;margin:10px 0;font-weight:700;box-shadow:var(--sh)}
.prompt .tr{display:block;font-weight:600;font-size:13px;color:var(--soft);margin-top:4px}
.status{text-align:center;font-weight:700;color:var(--soft);min-height:22px;margin:6px 0}
.rec{width:96px;height:96px;border-radius:50%;border:0;background:var(--peach);margin:8px auto;display:flex;align-items:center;justify-content:center;font-size:34px;cursor:pointer;box-shadow:0 8px 22px rgba(240,150,110,.35)}
.rec.on{background:#f39b8a;animation:pulse 1.2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 #f39b8a88}100%{box-shadow:0 0 0 22px #f39b8a00}}
.timer{text-align:center;font-variant-numeric:tabular-nums;font-size:22px;font-weight:800}
.wave{display:flex;gap:3px;justify-content:center;height:30px;align-items:center}.wave i{width:4px;border-radius:3px;background:var(--mint);height:6px;transition:height .1s}
.clip{display:flex;gap:10px;align-items:flex-start;margin:8px 0}.clip.me{flex-direction:row-reverse}
.clip .b{background:#fff;border-radius:16px;padding:10px 12px;box-shadow:var(--sh);font-size:14.5px;max-width:82%}
.clip.me .b{background:var(--mint2)}.clip .meta{font-size:11px;color:var(--soft);margin-top:4px}
.feedback-row{display:grid;gap:8px;margin-top:8px}
.report{background:none;border:0;color:var(--soft);font-size:12.5px;cursor:pointer;text-decoration:underline;font-family:inherit}
/* journey map */
.map{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#e6f4fb,#e9f6ec 55%,#f5efe0);box-shadow:var(--sh)}
.map svg{display:block;width:100%;height:auto}
.memory{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:16px;padding:10px 12px;margin:8px 0;box-shadow:var(--sh)}
.memory.new{animation:glow 1.6s ease 2;border:2px solid var(--sun)}@keyframes glow{50%{box-shadow:0 0 0 6px #f6dd8a66}}
.xpbar{height:12px;background:#ece8df;border-radius:9px;overflow:hidden}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),#a8dcbc);border-radius:9px;transition:width 1.4s ease}
.switch{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center}
.switch h1{font-size:56px;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.3);opacity:0}}
.swap{display:flex;gap:30px;align-items:center;margin:20px 0}.swap .x{animation:spin 1s ease}@keyframes spin{from{transform:rotate(-180deg)}}
.stars{display:flex;gap:8px;justify-content:center;margin:8px 0}.stars button{width:46px;height:46px;border-radius:14px;border:0;background:#fff;box-shadow:var(--sh);font-size:18px;font-weight:800;cursor:pointer;font-family:inherit}.stars button.sel{background:var(--mint)}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xpfloat{font-size:40px;font-weight:900;color:#3f9a6a;text-align:center;animation:pop .7s cubic-bezier(.3,1.6,.5,1)}
.hero{text-align:center;padding-top:30px}
.ai{border-left:4px solid var(--lav)}.human{border-left:4px solid var(--peach)}
.label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--soft)}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:fall 2.4s linear forwards}@keyframes fall{to{transform:translateY(900px) rotate(540deg)}}
/* ---- V0.2 ---- */
.scene{position:relative;width:100%;aspect-ratio:360/220;border-radius:24px;overflow:hidden;box-shadow:var(--sh)}
.scene>svg.bg{position:absolute;inset:0;width:100%;height:100%}
.actor{position:absolute;bottom:37%;width:25%;transition:left 1s ease,opacity .5s,transform .5s}
.actor svg{width:100%;height:auto;display:block}
.actor:not(.flip) .mochi .art,.mochi.face-r .art{transform:translate(120px,0) scaleX(-1)}
.actor.small{width:19%}
.actor .tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;background:#fffd;border-radius:9px;padding:1px 7px;white-space:nowrap}
.scene .bubble-dot{z-index:3}
.think{position:absolute;top:-8px;right:-4px;font-size:16px;animation:pop .4s}
.trail-note{position:absolute;background:#fff;border-radius:12px;padding:6px 10px;font-size:12.5px;box-shadow:var(--sh);max-width:70%;pointer-events:none;animation:fade .2s;z-index:4}
.faces{display:flex;justify-content:space-between;gap:4px}.faces button{font-size:30px;background:#fff;border:0;border-radius:16px;width:58px;height:58px;box-shadow:var(--sh);cursor:pointer;opacity:.6}.faces button.sel{opacity:1;background:var(--mint2);transform:scale(1.08)}
.big-stat{display:flex;gap:10px}.big-stat>div{flex:1;background:#fff;border-radius:18px;padding:12px;text-align:center;box-shadow:var(--sh)}.big-stat b{display:block;font-size:24px}
.live{min-height:20px;text-align:center;font-size:14px;color:var(--ink);font-style:italic;margin:4px 8px}
.walk{animation:walk .5s ease-in-out infinite}@keyframes walk{50%{transform:translateY(-3px) rotate(2deg)}}
.zz{animation:zz 2s infinite}@keyframes zz{50%{opacity:.3;transform:translateY(-3px)}}
.opt svg{width:52px;height:auto}
/* ---- V0.3 design system ---- */
:root{--soft:#56635d;--fs-xs:12px;--fs-s:14px;--fs-m:16px;--fs-l:22px;--fs-xl:28px;--sp:12px}
h1{font-size:var(--fs-xl)}h3{font-size:var(--fs-m);margin:20px 0 8px}
.btn{min-height:48px}.btn.small{min-height:44px}
.btn:hover{filter:brightness(1.03)}.opt{min-height:48px}
.lead{font-size:var(--fs-s);color:var(--soft);margin:2px 0 10px}
.xp-pill{background:#fdf0c4;color:#6b5310;border-radius:99px;padding:6px 12px;font-weight:800;font-size:var(--fs-s)}
.hero-card{background:linear-gradient(180deg,#e9f6ee,#fff);border-radius:28px;padding:14px 16px 16px;box-shadow:var(--sh);margin:14px 0}
.online{font-size:var(--fs-xs);font-weight:800;color:#2f7a52;display:flex;align-items:center;gap:6px}
.online .dot{width:8px;height:8px;border-radius:50%;background:#3cb371;box-shadow:0 0 0 0 #3cb37188;animation:pulse 1.6s infinite}
.btn.cta{font-size:20px;padding:20px;border-radius:22px;margin-top:6px;box-shadow:0 8px 18px rgba(95,174,132,.35)}
.row{display:flex;align-items:center;gap:12px}.tap{cursor:pointer}
.race{position:relative;height:64px;margin-top:6px}
.race .track{position:absolute;left:8px;right:44px;top:44px;height:8px;border-radius:8px;background:repeating-linear-gradient(90deg,#e7d8b5 0 8px,transparent 8px 14px)}
.race .track i{display:block;height:100%;background:var(--mint);border-radius:8px}
.race .rt{position:absolute;top:2px;width:44px;transform:translateX(-30%)}.race .rr{position:absolute;right:-2px;top:0;width:40px}.race .rx{position:absolute;right:30px;top:36px;font-size:14px}
.race svg,.lang svg,.row svg,.profile-head svg{width:100%;height:auto;display:block}
.week{display:flex;justify-content:space-between;align-items:flex-end;height:70px;margin-top:8px}
.week div{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.week i{width:18px;border-radius:6px;background:var(--mint)}.week i.zero{background:#e6e1d6}.week span{font-size:var(--fs-xs);color:var(--soft)}
.profile-head{display:flex;align-items:center;gap:14px;background:#fff;border-radius:28px;padding:14px;box-shadow:var(--sh)}
.lang-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lang{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border-radius:18px;padding:10px 6px;box-shadow:var(--sh);border:2px solid transparent;font-family:inherit;color:var(--ink);cursor:pointer;font-size:var(--fs-s)}
.lang.sel{border-color:var(--mint);background:var(--mint2)}
.wardrobe{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.item{background:#fff;border:2px solid transparent;border-radius:16px;padding:8px 2px;min-height:72px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:var(--sh);cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .15s}
.item .ie{font-size:24px}.item .small{font-size:10.5px;line-height:1.2}.item.on{border-color:var(--mint);background:var(--mint2);transform:translateY(-2px)}.item.locked{opacity:.55}
.mini{width:auto;padding:8px 16px;margin:0}
.goal-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
details summary{cursor:pointer;min-height:32px;list-style:none}.set{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.chip{color:#24332c}
button:focus-visible,.opt:focus-visible{outline:3px solid #3b7bd8;outline-offset:2px}

/* Mochi Buddies motion (image characters) */
.mochi{overflow:visible}.mochi .breathe{transform-box:fill-box;transform-origin:50% 100%;animation:mbreathe 3.4s ease-in-out infinite}@keyframes mbreathe{50%{transform:scale(1.025,.975)}}
.mochi.p-celebrate .breathe{animation:mhop .9s cubic-bezier(.3,1.5,.5,1) infinite}@keyframes mhop{0%,100%{transform:scale(1.04,.95)}45%{transform:translateY(-7px) scale(.98,1.03)}}
.mochi.p-wave .breathe{animation:mwob 1.4s ease-in-out infinite}@keyframes mwob{50%{transform:rotate(-2.5deg)}}
.mochi .fx{transform-box:fill-box;transform-origin:center}.mochi .fq{animation:mq 1.8s ease-in-out infinite}@keyframes mq{50%{transform:translateY(-3px) rotate(8deg)}}
.mochi .zz{animation:zz 2s infinite}.mochi .z2{animation-delay:.6s}
.mochi .dots circle{animation:mdot 1.2s infinite}.mochi .dots circle:nth-child(2){animation-delay:.2s}.mochi .dots circle:nth-child(3){animation-delay:.4s}@keyframes mdot{0%,100%{opacity:.25}50%{opacity:1}}
.roleswap{animation:mswap .7s cubic-bezier(.3,1.5,.5,1)}@keyframes mswap{0%{transform:scale(1)}40%{transform:scale(.6) rotate(-12deg);opacity:.4}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.card.tips ol{margin:6px 0 4px 20px;padding:0}.card.tips li{margin:4px 0;font-size:16px}.card.tips{background:#fffbea;border:2px solid #f6dd8a}
.card.fbk .q{font-style:italic;margin:4px 0}.card.fbk .nat{font-weight:700;color:#2f6b4a}.card.fbk ul.iss{margin:4px 0 0 18px;padding:0;font-size:14px}
.trs summary{cursor:pointer}.tline{display:flex;gap:8px;padding:8px 0;border-top:1px solid #0000000d}.tline .who{font-size:20px}.tline textarea{width:100%;border-radius:10px;border:1px solid #ddd;padding:6px;font:inherit}
.intro{text-align:center;padding-top:8px}.intro .steps{display:flex;gap:6px;justify-content:center;margin:4px 0 12px}.intro .steps i{width:28px;height:6px;border-radius:3px;background:#e3dccf}.intro .steps i.on{background:#6fbf73}
.intro .actor{position:absolute}a.opt{text-decoration:none;color:inherit;display:block;text-align:center}
mark.unsure{background:none;border-bottom:2px dotted #c9a227;color:inherit}
#modal textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;border:1.5px solid #e3dccf;border-radius:14px;padding:10px;margin:4px 0 10px;background:#fff}
.rcpt{opacity:.75}.rcpt.ok{color:#2f7d3a;opacity:1;font-weight:700}
.baton{position:absolute;z-index:5;margin:-15px 0 0 -15px;pointer-events:none;animation:baton 1.05s cubic-bezier(.45,0,.55,1) forwards}
@keyframes baton{0%{transform:translate(0,0) rotate(0) scale(.8);opacity:0}10%{opacity:1}50%{transform:translate(calc(var(--dx)*.5),-46px) rotate(200deg) scale(1.15)}90%{opacity:1}100%{transform:translate(var(--dx),0) rotate(380deg) scale(.8);opacity:0}}
.mochi.p-idle .breathe,.mochi.p-listen .breathe{animation:midle 5.2s ease-in-out infinite}@keyframes midle{0%,100%{transform:none}25%{transform:scale(1.025,.975)}50%{transform:none}70%{transform:rotate(1.2deg)}85%{transform:rotate(-.6deg)}}
.mochi.p-celebrate .breathe{animation:mhop2 1.1s cubic-bezier(.3,1.5,.5,1) 3,mbreathe 3.4s ease-in-out 3.3s infinite}@keyframes mhop2{0%,100%{transform:scale(1.05,.94)}40%{transform:translateY(-9px) scale(.97,1.04)}70%{transform:translateY(0) scale(1.04,.96)}}
.clip .seg{margin:2px 0 6px}.clip .seg.t>span{font-weight:600}
.clip .seg .trl,.clip .seg .py{font-size:12px;line-height:1.35;color:var(--soft,#7a7f87);margin-top:2px}.clip .seg .py{font-style:italic}
.clip .rtx{margin-top:6px}.clip .rtx .trl{font-size:12px;color:var(--soft,#7a7f87);margin-top:2px}
.rbar{display:flex;justify-content:space-between;align-items:center;padding:0 4px 6px;font-size:12px}
.pips{display:flex;gap:6px}.pips i{font-style:normal;font-weight:700;padding:2px 9px;border-radius:99px;background:#eef0ec;color:var(--soft,#7a7f87)}
.pips i.on{background:#87c9a3;color:#fff}.pips i.done{background:#d7eedf;color:#3f8a62}.pips.big{justify-content:center;margin:10px 0}.pips.big i{font-size:14px;padding:4px 14px}
.rtm{color:var(--soft,#7a7f87);font-weight:600}.rtm.over{color:#3f8a62}
.ovl{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(253,250,244,.94);padding:20px;text-align:center}
.ovl .ri{max-width:340px}.ovl.hop h2{margin-top:10px}.hopper{width:130px;animation:hop .55s ease-in-out 2}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-34px)}}
.swapb{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-size:30px;font-weight:800;color:#3f8a62;background:#fff;padding:6px 18px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.12);animation:pop .5s ease-out}
@keyframes pop{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.hopper,.swapb{animation:none}}
/* Turtle Training runner */
.trhow .trstep{display:flex;align-items:center;gap:10px;text-align:left;padding:8px;border-radius:12px;background:rgba(0,0,0,.035);margin:6px 0}
.trhow .trstep>b{width:26px;height:26px;border-radius:50%;background:var(--peach,#f4a);color:#fff;display:grid;place-items:center;flex:none}
.trico{font-size:26px;min-width:58px;text-align:center}
.trstage{position:relative;height:220px;overflow:hidden;border-radius:16px;background:linear-gradient(#bfe6ff,#eaf7ff 70%)}
.trsky{position:absolute;inset:0 0 40% 0;background-image:radial-gradient(ellipse 34px 12px at 60px 30px,#fff 98%,transparent),radial-gradient(ellipse 22px 9px at 85px 24px,#fff 98%,transparent),radial-gradient(ellipse 26px 9px at 210px 60px,#fff 98%,transparent);background-size:300px 100%;background-repeat:repeat-x}
.trhills{position:absolute;left:0;right:0;bottom:38px;height:70px;background-image:radial-gradient(ellipse 90px 60px at 90px 70px,#b9dca0 98%,transparent),radial-gradient(ellipse 70px 45px at 230px 70px,#a7d08c 98%,transparent);background-size:320px 70px;background-repeat:repeat-x}
.trground{position:absolute;left:0;right:0;bottom:0;height:40px;background-color:#f3e2c0;border-top:3px solid #8a6b45;
 background-image:radial-gradient(circle 2px at 20px 12px,#a88a60 98%,transparent),radial-gradient(circle 3px at 70px 24px,#b89a70 98%,transparent),radial-gradient(circle 1.5px at 110px 8px,#8a6b45 98%,transparent),linear-gradient(90deg,#8a6b45 0 14px,transparent 14px);
 background-size:140px 40px,140px 40px,140px 40px,46px 2px;background-position-y:0,0,0,18px;background-repeat:repeat-x}
.trtur{position:absolute;left:8%;bottom:31px;width:84px;transform-origin:50% 100%;z-index:2}
.trtur.walk .trbob{animation:trwalk .42s ease-in-out infinite}
@keyframes trwalk{0%,100%{transform:rotate(-2.5deg) scaleY(1)}25%{transform:rotate(0) scaleY(.96) scaleX(1.03)}50%{transform:rotate(2.5deg) scaleY(1)}75%{transform:rotate(0) scaleY(.96) scaleX(1.03)}}
.trflip{transform:scaleX(-1)}.trbob{transform-origin:50% 100%}
.trtur.walk .trdust{position:absolute;left:4px;bottom:2px;width:8px;height:8px;border-radius:50%;background:#d8c29a;animation:trdust .42s linear infinite}
@keyframes trdust{from{opacity:.8;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(-18px) scale(.4)}}
.trrock{position:absolute;bottom:32px;font-size:40px;line-height:1;z-index:1;margin-left:-20px}
.trhud{position:absolute;top:8px;right:10px;font-weight:800;background:rgba(255,255,255,.8);padding:2px 8px;border-radius:10px}
.trmic{position:absolute;top:40px;right:10px;font-size:12px;font-weight:700;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:10px;display:flex;align-items:center;gap:6px}
.trmic i{width:9px;height:9px;border-radius:50%;background:#e33;animation:trpulse 1s infinite}
@keyframes trpulse{50%{opacity:.25;transform:scale(1.4)}}
.trcount{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;font-weight:900;color:#fff;text-shadow:0 3px 0 #8a6b45;background:rgba(0,0,0,.18);z-index:5}
@media (prefers-reduced-motion: reduce){.trtur.walk .trbob,.trdust,.trmic i{animation:none}}

.trflip{position:relative}.trf{display:none}.trf img,.trf svg{display:block;width:100%}
#tface[data-f=idle] .trf-idle,#tface[data-f=celebrate] .trf-celebrate,#tface[data-f=sad] .trf-sad{display:block}

/* transition component */
.tx .tx-art{display:flex;justify-content:center;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}.tx .tx-t{margin:14px 0 4px}.tx .tx-s{margin:0;animation:fadeUp .5s .15s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}}
.tx-squat{transform-origin:50% 100%;animation:squat 1.1s ease-in-out infinite}
@keyframes squat{0%,100%{transform:scale(1,1)}45%,55%{transform:scale(1.08,.82)}}
.trpv{text-align:left;margin:6px 0;animation:fadeUp .4s both}
.actor .mascot{transition:opacity .22s ease}.actor .mascot.av-in{opacity:0}.actor .mascot.av-out{position:absolute;left:0;bottom:0;width:100%;opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.tx-squat,.tx .tx-art{animation:none}}