/* Mochi Mahjong — site styles. Palette = app/tool/store/theme.py 'tangerine'. */
:root{--t1:#FFB23F;--t2:#FF6A1A;--glow:#FFD27A;--navy:#2A2F5E;--ink:#2b2433;--muted:#6f6479;--cream:#FFF8EC;--paper:#FFFDF8;--line:#F1E2C9;--honey:#F2A541;--jade:#4FA27E;--red:#C8553D;--r:22px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:18px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","PingFang SC","Hiragino Sans","Apple SD Gothic Neo","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
a{color:#C24A0E}a:hover{color:var(--t2)}
img,svg{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}.narrow{max-width:760px}.center{text-align:center}
.skip{position:absolute;top:-80px;inset-inline-start:12px}.skip:focus{top:12px;background:#fff;padding:8px 12px;border-radius:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(255,248,236,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(241,226,201,.8)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font-weight:800;font-size:19px}
.brand img{border-radius:11px;box-shadow:0 3px 10px rgba(255,106,26,.3)}
.top nav{display:flex;flex-wrap:wrap;gap:2px 16px}.top nav a{color:var(--muted);text-decoration:none;font-weight:650;font-size:15px;padding:4px 0}
.top nav a[aria-current],.top nav a:hover{color:var(--t2)}
/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 75% 30%,var(--glow),transparent 60%),linear-gradient(135deg,var(--t1),var(--t2));color:#fff}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding-top:48px;padding-bottom:84px}
.hero h1{font-size:clamp(36px,5.6vw,62px);line-height:1.08;margin:0 0 16px;letter-spacing:-.01em;text-shadow:0 3px 0 rgba(138,50,0,.18)}
.hero .lead{font-size:clamp(18px,2vw,21px);max-width:560px;margin:0 0 26px;color:#FFF4E6}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;background:var(--navy);color:#fff;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 8px 20px rgba(42,47,94,.3)}
.badge.live:hover{transform:translateY(-2px)}.badge .ic{width:18px;height:18px}
.plat{font-weight:700;font-size:15px;color:#FFF0DA}
.hero-art{position:relative;display:flex;flex-direction:column;align-items:center}
.stage{position:relative;width:min(340px,80vw)}
.pet{all:unset;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mochi.big{width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(138,50,0,.25))}
.hearts{position:absolute;left:50%;top:6%;transform:translateX(-50%);color:#FF5C8A;font-size:26px;letter-spacing:10px;opacity:0;pointer-events:none}
.stage.love .hearts{animation:hearts 1.1s ease-out}
@keyframes hearts{0%{opacity:0;transform:translate(-50%,20px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1.2)}}
.demo-cap{font-size:14px;color:#FFF0DA;text-align:center;margin:8px 0 0;max-width:360px}
.sky{position:absolute;inset:0;pointer-events:none}
.fl{position:absolute;opacity:.85;animation:float 9s ease-in-out infinite}
.fl svg{filter:drop-shadow(0 6px 8px rgba(138,50,0,.25))}
.fl0{inset-inline-start:4%;top:18%;animation-delay:-1s}.fl1{inset-inline-start:44%;top:6%;animation-delay:-4s}.fl2{inset-inline-start:88%;top:62%;animation-delay:-2s}
.fl3{inset-inline-start:8%;top:78%;animation-delay:-6s}.fl4{inset-inline-start:55%;top:84%;animation-delay:-3s}.fl5{inset-inline-start:92%;top:10%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
.walk{position:absolute;left:0;right:0;bottom:10px;height:28px;color:rgba(255,255,255,.45)}
.pp{position:absolute;bottom:0;width:22px;height:22px;opacity:0;animation:step 6s linear infinite}
.pp svg{width:100%;height:100%}
.pp0{left:8%;animation-delay:0s}.pp1{left:12%;bottom:12px;animation-delay:.5s}.pp2{left:16%;animation-delay:1s}.pp3{left:20%;bottom:12px;animation-delay:1.5s}.pp4{left:24%;animation-delay:2s}.pp5{left:28%;bottom:12px;animation-delay:2.5s}
.pp:nth-child(odd){transform:rotate(-14deg)}.pp:nth-child(even){transform:rotate(14deg)}
[dir=rtl] .walk{transform:scaleX(-1)}
@keyframes step{0%{opacity:0}8%{opacity:1}55%{opacity:1}75%,100%{opacity:0}}
/* Mochi parts */
.mochi .cat{transform-box:view-box;transform-origin:100px 186px;animation:breathe 3.6s ease-in-out infinite}
.mochi .head{transform-box:view-box;transform-origin:100px 118px;animation:tilt 7s ease-in-out infinite}
.mochi .eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 5s infinite}
.mochi .ear-in{transform-box:fill-box;transform-origin:60% 95%}
.mochi .ear-l .ear-in{animation:twitch 6s infinite 1.2s}
.mochi .tail{transform-box:view-box;transform-origin:58px 158px;animation:sway 3.2s ease-in-out infinite}
.mochi .blush{animation:blush 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
@keyframes tilt{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-5deg)}85%{transform:rotate(3deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes twitch{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-14deg)}94%{transform:rotate(4deg)}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes blush{0%,100%{opacity:.55}50%{opacity:.85}}
.pet:hover .mochi .cat,.stage.love .mochi .cat{animation:hop .6s ease}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) scale(1.02,.98)}70%{transform:translateY(0) scale(1.04,.96)}}
/* demo */
.demo{position:relative;width:min(360px,86vw);margin-top:-8px;background:rgba(255,248,236,.95);border-radius:26px;padding:16px 16px 12px;box-shadow:0 18px 40px rgba(138,50,0,.25)}
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;justify-items:center;height:80px;align-items:start}
.t{display:block;transition:none}.t svg{width:48px;height:auto}
.tray{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.tray span{height:58px;border-radius:12px;background:#F4E7D2;box-shadow:inset 0 2px 4px rgba(122,82,56,.15)}
.t0{animation:hopA 6s infinite}.t2{animation:hopB 6s infinite}
@keyframes hopA{0%,12%{transform:translate(0,0)}24%{transform:translate(26px,-30px) rotate(-8deg)}34%,62%{transform:translate(36px,92px)}70%,86%{transform:translate(52px,92px) scale(0);opacity:0}87%{transform:none;opacity:0}100%{transform:none;opacity:1}}
@keyframes hopB{0%,38%{transform:translate(0,0)}48%{transform:translate(-20px,-30px) rotate(8deg)}56%,62%{transform:translate(-50px,92px)}70%,86%{transform:translate(-64px,92px) scale(0);opacity:0}87%{transform:none;opacity:0}100%{transform:none;opacity:1}}
.pop{position:absolute;left:50%;top:92px;transform:translateX(-50%);color:var(--honey);font-size:26px;letter-spacing:6px;opacity:0;animation:pop 6s infinite}
@keyframes pop{0%,62%{opacity:0;transform:translateX(-50%) scale(.4)}68%{opacity:1;transform:translateX(-50%) scale(1.2)}80%,100%{opacity:0;transform:translateX(-50%) scale(1.6)}}
.bubble{position:absolute;right:-6px;top:-22px;background:#fff;color:var(--t2);font-weight:900;padding:6px 14px;border-radius:16px;box-shadow:0 6px 14px rgba(138,50,0,.2);opacity:0;animation:bubble 6s infinite}
.bubble:after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes bubble{0%,64%{opacity:0;transform:translateY(8px) scale(.8)}70%,90%{opacity:1;transform:none}100%{opacity:0}}
/* bands */
.band{padding:64px 0}.band.alt{background:linear-gradient(180deg,#FFF1DC,#FFE9CC)}
.band h2,.doc h2{color:var(--navy);line-height:1.2}.band h2{font-size:clamp(28px,3.6vw,38px);text-align:center;margin:0 0 28px}
.feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 6px 18px rgba(138,50,0,.06);transition:transform .25s}
.card:hover{transform:translateY(-4px) rotate(-.4deg)}
.card .ic{width:34px;height:34px;color:#fff;background:linear-gradient(135deg,var(--t1),var(--t2));border-radius:12px;padding:6px;margin-bottom:8px}
.card h3{margin:0 0 4px;color:var(--navy);font-size:20px}.card p{margin:0;color:#4d4556}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;counter-reset:s}
.steps li{background:var(--paper);border-radius:var(--r);padding:24px;border:1px solid var(--line)}
.num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;font-size:20px;margin-bottom:8px}
.steps h3{margin:0 0 4px;color:var(--navy)}.steps p{margin:0}
.more{text-align:center;margin-top:26px}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font-weight:800}
.btn:hover{color:#fff;background:#3b4180}
.shots{display:flex;gap:18px;justify-content:center;overflow-x:auto;padding:6px 4px 18px;scroll-snap-type:x mandatory}
.shots img{flex:0 0 auto;width:min(250px,68vw);height:auto;border-radius:26px;box-shadow:0 14px 30px rgba(138,50,0,.18);scroll-snap-align:center}
.meet-in{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:center}.meet h2{text-align:start}
.mochi.mid{width:100%;height:auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:800;color:var(--navy);list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"🐾";margin-inline-end:10px;display:inline-block;transition:transform .2s}.faq details[open] summary:before{transform:rotate(20deg)}
.faq details p{margin:8px 0 2px}
.cta-band{background:linear-gradient(135deg,var(--t1),var(--t2));color:#fff;text-align:center;padding:56px 0}.cta-band h2{font-size:clamp(26px,3.4vw,36px);margin:0 0 6px}.cta-band p{margin:0 0 20px;color:#FFF0DA}
/* docs */
.doc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:28px;padding-top:36px;padding-bottom:60px}
.doc{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:30px clamp(18px,4vw,46px) 40px;min-width:0}
.doc h1{color:var(--navy);font-size:clamp(30px,4vw,42px);line-height:1.15;margin:0 0 10px}
.doc h2{font-size:24px;margin:32px 0 8px}.doc h3{color:var(--navy);margin:0 0 4px;font-size:19px}
.lead{font-size:19px}
.meta,.small{color:var(--muted);font-size:15px}.note{background:#FFF1DC;border-radius:12px;padding:10px 14px;font-size:15px}
.summary{background:#FFF1DC;border-radius:16px;padding:4px 18px;margin:12px 0}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.cards li{background:#FFF7EA;border:1px solid var(--line);border-radius:18px;padding:16px 18px}.cards li p{margin:0}
.side-cat{position:sticky;top:90px;align-self:start}.mochi.side{width:100%;height:auto}
.demo-wrap{display:flex;justify-content:center;padding:26px 0 6px}.demo-wrap .demo{box-shadow:0 10px 26px rgba(138,50,0,.12)}
.tgroup .trow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.tgroup h2 small{color:var(--muted);font-size:15px;font-weight:600}
.tips{padding-inline-start:1.3em}.tips li{margin:0 0 14px}.tips li::marker{color:var(--t2);font-weight:900}
.cat-hero{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;margin:10px 0 18px}
.quote{margin:0;font-size:22px;font-weight:800;color:var(--navy);line-height:1.35}.quote cite{display:block;font-size:15px;color:var(--muted);font-style:normal;margin-top:6px}
.news{list-style:none;padding:0}.news-item{border-bottom:1px dashed var(--line);padding:14px 0}.news-item time{color:var(--t2);font-weight:800;font-size:14px}.news-item h2{margin:4px 0}
.facts{border-collapse:collapse;width:100%}.facts th,.facts td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.facts th{width:32%;color:var(--navy)}
.press-shots{display:flex;gap:10px;flex-wrap:wrap}.press-shots img{border-radius:14px}
/* footer */
.foot{background:#2A2F5E;color:#D8DAF0;padding:34px 0 40px;text-align:center}
.foot a{color:#FFD27A}.foot-cat{width:80px;margin:0 auto 6px}.mochi.mini{width:80px;height:80px}
.foot-links{margin:6px 0 14px}.lang{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:999px;padding:6px 12px}
.lang .ic{width:18px;height:18px}.lang select{background:transparent;color:#fff;border:0;font:inherit;font-size:15px}
.lang option{color:#222}.foot .small{color:#AAB0D6;margin-top:14px}
/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.js .reveal.in{opacity:1;transform:none}
/* responsive */
@media (max-width:860px){.fl{opacity:.35}.fl0,.fl1,.fl3,.fl4{display:none}.hero-in{grid-template-columns:1fr;text-align:center;padding-top:30px}.hero .lead{margin-inline:auto}.cta{justify-content:center}
.meet-in{grid-template-columns:1fr;text-align:center}.meet-art{width:200px;margin:0 auto}.meet h2{text-align:center}
.doc-wrap{grid-template-columns:1fr}.side-cat{display:none}.cat-hero{grid-template-columns:1fr;text-align:center}.cat-hero .pet{width:200px;margin:0 auto}}
@media (max-width:520px){body{font-size:17px}.top nav{gap:2px 12px}.top nav a{font-size:14px}.fl{transform:scale(.8)}.fl1,.fl5{display:none}}
[dir=rtl] .hero h1,[dir=rtl] .hero .lead{text-align:right}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}