/* ELi Run Club (v2) — activity-feed running app, ELi brand, motion everywhere. Single light theme, 390x844 screen. */
:root{
  --or:#FC5A1E; --or-d:#E2420A; --or-l:#FFE7DC; --blue:#1F5BFF; --blue-d:#163FC9; --navy:#13287A;
  --ink:#171A2C; --ink2:#4A4F66; --muted:#8A8FA3; --line:#ECEEF3; --bg:#F3F4F7; --card:#fff;
  --green:#1DB070; --yellow:#FFC83D; --purple:#7A5CFF; --red:#F0435A;
  --sh:0 1px 2px rgba(20,24,50,.05),0 6px 18px rgba(20,24,50,.06);
  --f:"Comfortaa","Noto Sans Thai",system-ui,sans-serif; --num:"Comfortaa","Noto Sans Thai",sans-serif; --en:"Comfortaa","Noto Sans Thai",sans-serif; --hand:"Comfortaa","Noto Sans Thai",sans-serif;   /* CI brand fonts: Comfortaa (Latin, numbers) + Noto Sans Thai (Thai) */
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--f);color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(900px 600px at 10% 0%,#FFE9DE 0%,transparent 60%),radial-gradient(900px 700px at 100% 100%,#DDE8FF 0%,transparent 60%),#F6F7FB}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
button:focus-visible{outline:3px solid var(--or);outline-offset:2px}
img{display:block;-webkit-user-drag:none;user-select:none}
input{font:inherit}
.num{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* stage */
.stage{height:100%;display:flex;align-items:center;justify-content:center;gap:60px;padding:0 16px}
.side{width:240px;flex:none}
.side-logo{width:130px;margin-left:-6px}
.side-tag{font-family:var(--en);font-size:24px;color:var(--navy);margin:0}
.side-tag span{font-size:13px;color:#fff;background:var(--or);border-radius:8px;padding:1px 7px;vertical-align:middle}
.side-sub{font-size:13px;color:var(--muted);line-height:1.5;margin:6px 0 16px}
.jump{display:flex;flex-direction:column;gap:2px}
.jump button{display:flex;gap:10px;align-items:baseline;text-align:left;padding:7px 12px;border-radius:12px;transition:background .2s}
.jump button:hover{background:rgba(255,255,255,.7)}
.jump button.on{background:#fff;box-shadow:var(--sh)}
.jump b{font-family:var(--num);font-size:13px;color:var(--or);width:18px}
.jump span{font-size:13px;color:var(--ink)}
@media (max-width:820px){.side{display:none}}
.phone-wrap{flex:none;width:414px;height:868px;transform-origin:center}
.phone{width:414px;height:868px;padding:12px;border-radius:58px;background:#14172A;box-shadow:0 30px 70px rgba(20,24,60,.3)}
#app{position:relative;width:390px;height:844px;border-radius:46px;overflow:hidden;background:var(--bg);isolation:isolate}
@media (max-width:520px){.stage{padding:0;display:block}.phone-wrap,.phone{width:100%;height:100%;transform:none!important}.phone{padding:0;border-radius:0;overflow:hidden;box-shadow:none}#app{border-radius:0}}
.sbar{position:absolute;inset:0 0 auto;height:48px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 34px;font:600 15px -apple-system,"SF Pro Text","Noto Sans Thai",sans-serif;color:var(--ink);pointer-events:none;transition:color .3s}
.sb-ic{display:flex;gap:6px;align-items:center}.sb-ic svg{fill:currentColor}
.sbar.light{color:#fff}
.home-ind{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:var(--ink);z-index:60;pointer-events:none}

/* pages */
#view{position:absolute;inset:0}
.pg{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.pg.in{animation:pgIn .5s var(--ease) both}
.pg.in.up{animation-name:pgUp}
.pg.in.back{animation-name:pgBack}
.pg.out{animation:pgOut .32s ease both;pointer-events:none}
@keyframes pgIn{from{opacity:0;transform:translateX(12%)}}
@keyframes pgBack{from{opacity:0;transform:translateX(-12%)}}
@keyframes pgUp{from{opacity:0;transform:translateY(12%) scale(.98)}}
@keyframes pgOut{to{opacity:0;transform:scale(.96)}}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.rise{animation:rise .6s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.pop{animation:pop .7s var(--spring) both;animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0;transform:scale(.3)}}
.press{transition:transform .35s var(--spring)}
.press:active{transform:scale(.93);transition-duration:.08s}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(2deg)}}
.hop{animation:hop .6s var(--spring)}
@keyframes hop{40%{transform:translateY(-14px) scale(1.06,.94)}}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.seen{opacity:1;transform:none}

/* top bar */
.topbar{position:sticky;top:0;z-index:10;padding:52px 18px 10px;background:rgba(243,244,247,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;gap:10px;transition:box-shadow .3s}
.topbar.stuck{box-shadow:0 1px 0 var(--line)}
.topbar h1{flex:1;margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.topbar .logo{height:36px;margin-right:auto}
.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);position:relative;transition:background .2s}
.ib:hover{background:rgba(0,0,0,.05)}
.ib svg{width:23px;height:23px}
.ib .dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--or);box-shadow:0 0 0 2px var(--bg);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 2px var(--bg),0 0 0 2px rgba(252,90,30,.6)}100%{box-shadow:0 0 0 2px var(--bg),0 0 0 10px rgba(252,90,30,0)}}
.seg{position:relative;display:flex;margin:0 18px 12px;padding:4px;border-radius:14px;background:#E6E8EE}
.seg button{flex:1;height:34px;font-size:14px;font-weight:500;color:var(--ink2);position:relative;z-index:1;transition:color .3s}
.seg button.on{color:var(--ink);font-weight:600}
.seg .ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:transform .45s var(--spring),width .45s var(--spring)}

/* cards */
.card{background:var(--card);border-radius:20px;box-shadow:var(--sh)}
.wrap{padding:0 12px 130px}
.snap{padding:16px 16px 14px;margin-bottom:12px}
.snap h3{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.snap h3 .streak{margin-left:auto;font-size:12px;font-weight:600;color:var(--or);background:var(--or-l);padding:3px 10px;border-radius:12px;display:flex;align-items:center;gap:4px}
.snap h3 .streak i{font-style:normal;display:inline-block;animation:flick 1.2s ease-in-out infinite}
@keyframes flick{50%{transform:scale(1.25) rotate(-8deg)}}
.trio{display:flex;margin:12px 0 10px}
.trio>div{flex:1}
.trio span{display:block;font-size:12px;color:var(--muted)}
.trio b{font-size:26px;line-height:1.1}
.trio small{font-size:13px;color:var(--ink2);font-family:var(--f);font-weight:500;margin-left:2px}
.week{display:flex;gap:8px;align-items:flex-end;height:54px}
.week div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;font-size:11px;color:var(--muted)}
.week i{width:100%;max-width:26px;border-radius:6px;background:#E6E8EE;height:0;transition:height .9s var(--spring)}
.week i.on{background:linear-gradient(180deg,#FF8A4C,var(--or))}
.week div.today{color:var(--or);font-weight:700}

.act{margin-bottom:12px;overflow:hidden}
.act .hd{display:flex;gap:10px;align-items:center;padding:14px 14px 0}
.av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:#DDE5F5}
.act .who b{display:block;font-size:15px;font-weight:600}
.act .who span{font-size:12px;color:var(--muted)}
.act .more{margin-left:auto;color:var(--muted)}
.act h4{margin:10px 14px 0;font-size:18px;font-weight:700;line-height:1.3}
.act .desc{margin:4px 14px 0;font-size:14px;color:var(--ink2)}
.stats{display:flex;gap:18px;padding:10px 14px 12px}
.stats span{display:block;font-size:12px;color:var(--muted)}
.stats b{font-size:21px;line-height:1.1}
.ach{display:flex;align-items:center;gap:8px;margin:0 14px 12px;padding:8px 10px;border-radius:12px;background:#FFF6E6;font-size:13px;color:#8A5300}
.ach img{width:26px;height:26px;object-fit:contain;animation:bob 2.6s ease-in-out infinite}
.media{position:relative;height:196px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.media::-webkit-scrollbar{display:none}
.media>*{flex:none;width:100%;height:100%;scroll-snap-align:start;position:relative;overflow:hidden}
.media .ph{object-fit:cover;width:100%;height:100%;transition:transform 6s linear}
.act:hover .media .ph{transform:scale(1.06)}
.mapbox{background:#E9EEF2}
.mapbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.42) brightness(1.08) contrast(.9)}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route{fill:none;stroke:var(--or);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(252,90,30,.35))}
.route-bg{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mdots{position:absolute;right:10px;bottom:10px;display:flex;gap:5px;z-index:2}
.mdots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.6);transition:all .3s}
.mdots i.on{width:16px;background:#fff}
.kud{display:flex;align-items:center;padding:10px 14px;gap:8px;font-size:13px;color:var(--ink2)}
.faces{display:flex}
.faces img{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-7px;object-fit:cover}
.faces img:first-child{margin-left:0}
.acts{display:flex;border-top:1px solid var(--line)}
.acts button{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink2);font-size:14px;position:relative}
.acts svg{width:22px;height:22px;transition:transform .45s var(--spring)}
.acts .k.on{color:var(--or);font-weight:600}
.acts .k.on svg{fill:var(--or);transform:scale(1.15) rotate(-12deg)}
.burst{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--or);pointer-events:none;animation:burst .7s var(--ease) forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.plus{position:absolute;left:50%;top:0;font:700 14px var(--num);color:var(--or);pointer-events:none;animation:plus .9s var(--ease) forwards}
@keyframes plus{to{transform:translateY(-34px);opacity:0}}
.tip{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:12px;background:linear-gradient(120deg,#1F5BFF,#4B7DFF);color:#fff;overflow:hidden;position:relative}
.tip img{width:92px;margin:-8px -6px -18px 0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.tip b{display:block;font-size:16px}
.tip span{font-size:13px;opacity:.9}
.tip::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12)}
.skel{height:300px;margin-bottom:12px;padding:14px}
.sk{border-radius:8px;background:linear-gradient(90deg,#EEF0F4 25%,#F7F8FA 50%,#EEF0F4 75%);background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.ptr{position:absolute;left:50%;top:96px;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center;z-index:5;transform:translateY(-80px) scale(.6);opacity:0;pointer-events:none}
.ptr img{width:40px}
.ptr.spin img{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:88px;padding:0 6px 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;z-index:40;transition:transform .45s var(--ease)}
.tabbar.hide{transform:translateY(110%)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted);position:relative}
.tabbar svg{width:25px;height:25px;transition:transform .4s var(--spring)}
.tabbar button.on{color:var(--or);font-weight:600}
.tabbar button.on svg{transform:translateY(-2px)}
.tabbar .rec{color:var(--ink)}
.tabbar .rec span.o{width:50px;height:50px;border-radius:50%;background:var(--or);display:grid;place-items:center;color:#fff;margin-top:-18px;box-shadow:0 8px 18px rgba(252,90,30,.45);transition:transform .4s var(--spring)}
.tabbar .rec:hover span.o{transform:scale(1.08) rotate(-8deg)}
.tabbar .rec span.o svg{width:26px;height:26px}
.tabbar .bar{position:absolute;top:0;left:0;height:3px;width:40px;border-radius:0 0 3px 3px;background:var(--or);transition:transform .5s var(--spring)}

/* splash */
.splash{background:linear-gradient(160deg,#1F5BFF,#1440C9 60%,#0E2E9A);display:grid;place-items:center;color:#fff}
.splash svg.draw{position:absolute;inset:0;width:100%;height:100%}
.splash svg.draw path{fill:none;stroke:var(--or);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(252,90,30,.8))}
.splash .c{position:relative;text-align:center;z-index:1}
.splash .c img.l{width:190px;margin:0 auto;animation:pop .9s var(--spring) .5s both}
.splash .c p{margin:4px 0 0;font:600 20px var(--en);animation:rise .6s var(--ease) 1s both}
.splash .m{position:absolute;bottom:120px;left:50%;width:170px;margin-left:-85px;animation:runIn 1.1s var(--ease) 1.1s both}
@keyframes runIn{from{transform:translateX(-260px) rotate(-10deg);opacity:0}}
.splash .go{position:absolute;left:30px;right:30px;bottom:44px;height:56px;border-radius:28px;background:var(--or);color:#fff;font-size:17px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.25);animation:rise .6s var(--ease) 1.6s both}

/* record */
.rec-pg .map{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;filter:saturate(.5) brightness(1.06);animation:pan 40s linear infinite alternate}
@keyframes pan{to{transform:translate(-40px,-50px) scale(1.05)}}
.rec-pg svg.trk{position:absolute;inset:0;width:100%;height:100%}
.gps-me{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:3;transition:left .9s linear,top .9s linear}
.gps-me::before,.gps-me::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--blue);animation:ring 2s ease-out infinite}
.gps-me::after{animation-delay:1s}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(3.4);opacity:0}}
.rec-top{position:absolute;top:52px;left:14px;right:14px;display:flex;align-items:center;gap:10px;z-index:4}
.pill{height:40px;padding:0 14px;border-radius:20px;background:#fff;box-shadow:var(--sh);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.gpsd{width:10px;height:10px;border-radius:50%;background:#F5A524;transition:background .4s}
.gpsd.ok{background:var(--green);box-shadow:0 0 0 0 rgba(29,176,112,.6);animation:okp 1.8s infinite}
@keyframes okp{to{box-shadow:0 0 0 10px rgba(29,176,112,0)}}
.recp{position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fff;border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.12);padding:18px 20px 40px;transition:transform .5s var(--ease)}
.recp .live{display:grid;grid-template-columns:1fr 1fr 1fr;row-gap:6px;overflow:hidden;max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .4s,margin .5s;text-align:center}
.recp.running .live,.recp.paused .live{max-height:220px;opacity:1;margin-bottom:18px}
.recp .big{grid-column:1/-1}
.recp .live .big b{font-size:64px;line-height:1}
.recp .live span{display:block;font-size:12px;color:var(--muted)}
.recp .live b{font-size:28px;line-height:1.15}
.recp .hr b{color:var(--red)}
.recp .hr i{display:inline-block;font-style:normal;animation:beat .8s infinite}
@keyframes beat{15%{transform:scale(1.3)}30%{transform:scale(1)}}
.recp .btns{display:flex;align-items:center;justify-content:space-around}
.side-btn{width:54px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--ink2)}
.side-btn span{width:50px;height:50px;border-radius:50%;background:#F1F2F6;display:grid;place-items:center}
.side-btn img{width:28px;height:28px;object-fit:contain}
.go-btn{width:92px;height:92px;border-radius:50%;background:var(--or);color:#fff;font-size:17px;font-weight:700;position:relative;box-shadow:0 10px 24px rgba(252,90,30,.45);transition:all .45s var(--spring)}
.go-btn::before,.go-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--or);animation:ring 2.2s ease-out infinite;pointer-events:none}
.go-btn::after{animation-delay:1.1s}
.recp.running .go-btn{width:76px;height:76px;border-radius:24px;background:var(--ink)}
.recp.running .go-btn::before,.recp.running .go-btn::after,.recp.paused .go-btn::before,.recp.paused .go-btn::after{display:none}
.go-btn svg{width:30px;height:30px}
.pz{display:none;gap:14px;width:100%}
.recp.paused .btns{display:none}
.recp.paused .pz{display:flex}
.pz button{flex:1;height:58px;border-radius:29px;font-size:16px;font-weight:600;position:relative;overflow:hidden}
.pz .res{background:var(--or);color:#fff}
.pz .fin{background:var(--ink);color:#fff}
.pz .fin i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.22)}
.pz .fin.hold i{width:100%;transition:width .9s linear}
.cdn{position:absolute;inset:0;z-index:20;background:rgba(15,18,40,.55);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;animation:fade .3s both}
.cdn b{font:800 150px/1 var(--num);animation:cnt 1s var(--ease) both}
@keyframes cnt{0%{transform:scale(2.2);opacity:0}30%{opacity:1}100%{transform:scale(.9);opacity:.2}}
.cdn img{position:absolute;bottom:90px;left:50%;width:190px;margin-left:-95px;animation:bob 1s ease-in-out infinite}
@keyframes fade{from{opacity:0}}

/* save */
.save .hero{position:relative;height:300px;background:radial-gradient(circle at 50% 60%,#FFF1DE,#FFE0C8 50%,#FFD0B0);overflow:hidden;display:grid;place-items:center}
.save .hero .rays{position:absolute;width:640px;height:640px;left:50%;top:50%;margin:-320px;background:repeating-conic-gradient(rgba(255,255,255,.55) 0 10deg,transparent 10deg 20deg);animation:spin 26s linear infinite;border-radius:50%}
.save .hero>img{position:relative;width:210px;animation:pop .9s var(--spring) both,bob 3s ease-in-out 1s infinite}
.save h2{margin:18px 20px 2px;font-size:26px}
.save .sub{margin:0 20px 14px;color:var(--ink2);font-size:14px}
.save .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 16px 16px}
.save .g3 div{padding:12px 10px}
.save .g3 span{display:block;font-size:12px;color:var(--muted)}
.save .g3 b{font-size:24px}
.badges{display:flex;gap:10px;margin:0 16px 16px;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.badges div{flex:none;width:96px;text-align:center;font-size:12px;color:var(--ink2);padding:10px 6px}
.badges img{width:58px;height:58px;object-fit:contain;margin:0 auto 6px}
.fld{margin:0 16px 12px;padding:4px 16px}
.fld label{display:block;font-size:12px;color:var(--muted);padding-top:10px}
.fld input{width:100%;border:0;outline:0;font-size:17px;font-weight:600;padding:4px 0 12px;background:none}
.feel{display:flex;gap:8px;margin:0 16px 18px}
.feel button{flex:1;height:64px;border-radius:16px;background:#fff;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--ink2);transition:all .35s var(--spring)}
.feel button b{font-size:24px;line-height:1}
.feel button.on{background:var(--or-l);color:var(--or-d);box-shadow:0 0 0 2px var(--or) inset;transform:translateY(-3px)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;border-radius:28px;font-size:17px;font-weight:600;width:calc(100% - 32px);margin:0 16px}
.btn-o{background:var(--or);color:#fff;box-shadow:0 10px 22px rgba(252,90,30,.35)}
.btn-d{background:#EEF0F4;color:var(--ink)}

/* activity detail */
.det .hmap{position:relative;height:340px}
.det .back{position:absolute;top:52px;left:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--sh);display:grid;place-items:center}
.det .back svg{width:22px;height:22px}
.det .share{left:auto;right:14px}
.km{fill:#fff;stroke:var(--or);stroke-width:2}
.kmt{font:700 9px var(--num);fill:var(--or);text-anchor:middle;dominant-baseline:central}
.det .body{position:relative;margin-top:-26px;border-radius:26px 26px 0 0;background:var(--bg);padding:18px 14px 60px}
.det .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding:16px;margin:12px 0}
.det .grid6 span{display:block;font-size:12px;color:var(--muted)}
.det .grid6 b{font-size:24px}
.det h5{margin:18px 4px 10px;font-size:16px}
.splits{padding:10px 14px}
.splits .r{display:grid;grid-template-columns:34px 52px 1fr 40px;align-items:center;gap:8px;height:34px;font-size:14px}
.splits .r.h{color:var(--muted);font-size:12px;height:26px}
.splits .r i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#8FB0FF,var(--blue));width:0;transition:width .9s var(--ease)}
.splits .r.best i{background:linear-gradient(90deg,#FFB38A,var(--or))}
.splits .r small{color:var(--muted);text-align:right}
.elev{padding:12px 12px 6px}
.elev svg{width:100%;height:130px;display:block}
.zones{padding:14px}
.zones .z{display:grid;grid-template-columns:28px 1fr 42px;gap:10px;align-items:center;height:30px;font-size:13px}
.zones .z i{display:block;height:12px;border-radius:6px;width:0;transition:width 1s var(--ease)}
.zones .z small{text-align:right;color:var(--ink2)}

.sbarbg{position:absolute;inset:0 0 auto;height:48px;background:rgba(243,244,247,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:4;opacity:0;transition:opacity .3s;pointer-events:none}
.sbarbg.on{opacity:1}

/* maps */
.maps .map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.7) brightness(.55) contrast(1.1)}
.maps svg.heat{position:absolute;inset:0;width:100%;height:100%}
.heat path{fill:none;stroke:#FF7A3C;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:screen}
.heat path.flow{stroke:#FFD2B8;stroke-width:2;stroke-dasharray:4 14;animation:flow 1.6s linear infinite}
.heat path.sel{stroke:#fff;stroke-width:6;filter:drop-shadow(0 0 8px #FF7A3C)}
@keyframes flow{to{stroke-dashoffset:-36}}
.search{position:absolute;top:52px;left:14px;right:14px;height:48px;border-radius:24px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 16px;box-shadow:0 6px 20px rgba(0,0,0,.25);color:var(--muted);font-size:15px;z-index:3}
.search svg{width:20px;height:20px}
.chips{position:absolute;top:110px;left:14px;right:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;z-index:3}
.chips button{flex:none;height:34px;padding:0 14px;border-radius:17px;background:rgba(255,255,255,.18);color:#fff;font-size:13px;backdrop-filter:blur(8px);transition:all .3s}
.chips button.on{background:#fff;color:var(--ink);font-weight:600}
.segs{position:absolute;left:0;right:0;bottom:100px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 14px;scrollbar-width:none;z-index:3}
.segs::-webkit-scrollbar{display:none}
.sgc{flex:none;width:300px;scroll-snap-align:center;padding:14px;text-align:left;transition:transform .4s var(--spring),box-shadow .3s}
.sgc.on{box-shadow:0 0 0 2px var(--or),var(--sh);transform:translateY(-6px)}
.sgc b{font-size:16px}
.sgc .m{display:flex;gap:14px;font-size:12px;color:var(--muted);margin:4px 0 10px}
.sgc .m em{font-style:normal;color:var(--ink);font-weight:600}
.sgc .lead{display:flex;align-items:center;gap:8px;font-size:13px}
.sgc .lead img.b{width:26px;height:26px;object-fit:contain}
.sgc .lead .av{width:26px;height:26px}
.sgc .lead span{flex:1}
.sgc .elevmini{height:34px;margin-top:10px}

/* groups */
.chal{position:relative;overflow:hidden;padding:18px;margin-bottom:12px;color:#fff;background:linear-gradient(130deg,#FC5A1E,#FF8A3D 55%,#FFB547)}
.chal::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.14)}
.chal .t{font-size:12px;opacity:.9}
.chal b{display:block;font-size:22px;margin:2px 0 4px;position:relative;z-index:1}
.chal .t,.chal>b,.chal .ds{padding-right:110px}
.chal .cd{display:flex;gap:6px;margin:10px 0 14px;position:relative;z-index:1}
.chal .cd span{background:rgba(255,255,255,.22);border-radius:10px;padding:6px 8px;text-align:center;min-width:48px;font-size:11px}
.chal .cd span b{font:700 20px var(--num);margin:0}
.chal .ringw{position:absolute;right:16px;top:18px;width:96px;height:96px;z-index:1}
.chal .ringw svg{transform:rotate(-90deg)}
.chal .ringw img{position:absolute;inset:18px;width:60px;height:60px;object-fit:contain}
.chal .jn{position:relative;z-index:1;height:40px;padding:0 20px;border-radius:20px;background:#fff;color:var(--or-d);font-weight:700;transition:all .4s var(--spring)}
.chal .jn.on{background:rgba(255,255,255,.25);color:#fff}
.cl{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px}
.cl img{width:54px;height:54px;object-fit:contain;flex:none}
.cl .tx{flex:1;min-width:0}
.cl .tx b{display:block;font-size:15px}
.cl .tx span{font-size:12px;color:var(--muted)}
.cl .pb{height:6px;border-radius:3px;background:#EEF0F4;margin-top:6px;overflow:hidden}
.cl .pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF9A5C,var(--or));border-radius:3px;transition:width 1s var(--ease)}
.cl .jb{height:34px;padding:0 14px;border-radius:17px;border:1.5px solid var(--or);color:var(--or);font-size:13px;font-weight:600;flex:none;transition:all .35s var(--spring)}
.cl .jb.on{background:var(--or);color:#fff}
.lb{padding:6px 14px}
.lb .r{display:flex;align-items:center;gap:10px;height:54px}
.lb .r+.r{border-top:1px solid var(--line)}
.lb .rk{width:22px;font:700 16px var(--num);color:var(--muted);text-align:center}
.lb .r:nth-child(1) .rk{color:#E0A400}.lb .r:nth-child(2) .rk{color:#9AA3B5}.lb .r:nth-child(3) .rk{color:#C47A3C}
.lb .nm{flex:1;font-size:14px}
.lb .nm i{display:block;height:5px;border-radius:3px;background:linear-gradient(90deg,#FFB38A,var(--or));width:0;margin-top:5px;transition:width 1s var(--ease)}
.lb .r.me{background:#FFF5EF;margin:0 -14px;padding:0 14px}
.lb .v{font:700 17px var(--num)}

/* you */
.you .ph{display:flex;align-items:center;gap:14px;padding:4px 18px 14px}
.you .ph img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--or)}
.you .ph b{display:block;font-size:20px}
.you .ph .ff{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:4px}
.you .ph .ff em{font-style:normal;color:var(--ink);font-weight:600}
.chart{padding:16px 12px 10px;margin-bottom:12px;position:relative}
.chart .h{display:flex;justify-content:space-between;align-items:baseline;padding:0 6px}
.chart .h b{font-size:30px}
.chart svg{width:100%;height:160px;display:block;margin-top:6px;overflow:visible}
.chart .pt{cursor:pointer}
.chart .tt{position:absolute;padding:4px 10px;border-radius:10px;background:var(--ink);color:#fff;font:600 13px var(--num);transform:translate(-50%,-130%);pointer-events:none;transition:left .3s var(--ease),top .3s var(--ease);white-space:nowrap}
.lvl{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:12px;background:linear-gradient(120deg,#EAF0FF,#FFF3E8)}
.lvl img{width:74px;margin:-10px 0 -14px}
.lvl .tx{flex:1}
.lvl .tx b{font-size:16px}
.lvl .pb{height:8px;border-radius:4px;background:rgba(31,91,255,.12);margin-top:8px;overflow:hidden}
.lvl .pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5B8BFF,var(--blue));border-radius:4px;transition:width 1.2s var(--ease)}
.troph{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;margin-bottom:12px}
.troph button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ink2);perspective:400px}
.troph img{width:56px;height:56px;object-fit:contain;transition:transform .7s var(--spring)}
.troph button:hover img{transform:rotateY(180deg)}
.troph .lock img{filter:grayscale(1) opacity(.35)}
.best .r{display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 16px;font-size:14px}
.best .r+.r{border-top:1px solid var(--line)}
.best .r b{font-size:18px}
.best .r .pr{font-size:11px;color:var(--or);background:var(--or-l);border-radius:8px;padding:2px 7px;margin-left:8px}

/* sheet/toast/fx */
.sheet-wrap{position:absolute;inset:0;z-index:70;background:rgba(15,18,40,.38);display:flex;align-items:flex-end;animation:fade .3s both}
.sheet-wrap[hidden]{display:none}
.sheet{width:100%;max-height:80%;overflow-y:auto;background:#fff;border-radius:28px 28px 0 0;padding:12px 18px 36px;animation:up .45s var(--ease) both}
.sheet.close{animation:down .3s ease both}
@keyframes up{from{transform:translateY(100%)}}
@keyframes down{to{transform:translateY(100%)}}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:#DADDE5;margin:0 auto 14px}
.sheet h4{margin:0 0 12px;font-size:19px}
.opt{display:flex;align-items:center;gap:14px;width:100%;height:56px;font-size:15px;text-align:left;border-bottom:1px solid var(--line)}
.opt img{width:32px;height:32px;object-fit:contain}
.opt .ck{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #D5D8E0;transition:all .3s var(--spring)}
.opt.on .ck{border:7px solid var(--or)}
.nt{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.nt .av{width:40px;height:40px}
.nt span{flex:1;color:var(--ink2)}
.nt span b{color:var(--ink)}
.nt small{color:var(--muted)}
.toast{position:absolute;left:50%;top:100px;z-index:80;transform:translate(-50%,-16px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;white-space:nowrap;transition:all .35s var(--spring);box-shadow:0 10px 24px rgba(10,20,60,.3)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.fx{position:absolute;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.fx .cf{position:absolute;width:9px;height:14px;border-radius:2px;animation:cf 1.7s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes cf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}

/* ── character animation (anim.js) ── */
.eli-m{position:absolute;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);margin-top:calc(var(--s) * -1);pointer-events:none;z-index:6}
.eli-3d,.eli-mv,.eli-sq{position:absolute;inset:0;transform-origin:50% 100%}
.eli-sq img{position:absolute;left:0;right:0;bottom:0;margin:auto;max-width:100%;max-height:100%;filter:drop-shadow(0 6px 8px rgba(10,30,90,.22));transition:transform .18s}
.eli-sh{position:absolute;left:50%;bottom:-6px;width:58%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,20,60,.28),transparent);transform:translateX(-50%)}
.eli-say{position:absolute;left:50%;bottom:92%;transform:translateX(-50%) scale(.3);opacity:0;background:#fff;color:var(--ink);font:700 15px var(--f);padding:9px 14px;border-radius:18px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:transform .4s var(--spring),opacity .25s;z-index:2}
.eli-say::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:14px;margin-left:-7px;background:#fff;border-radius:3px;transform:rotate(45deg)}
.eli-say.on{opacity:1;transform:translateX(-50%) scale(1)}
.puff{position:absolute;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(200,210,230,.4);pointer-events:none;z-index:5}
.spk{position:absolute;border-radius:50%;pointer-events:none;z-index:7}
.spk.star{border-radius:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.flt{position:absolute;pointer-events:none;z-index:7}
.scene{position:absolute;inset:0;z-index:30;overflow:hidden;background:#BFD8FF}
.sc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 80%}
.sc-sun{position:absolute;left:50%;top:260px;width:420px;height:420px;margin:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,240,200,.3) 60%,transparent);animation:sunp 3s ease-in-out infinite}
@keyframes sunp{50%{transform:scale(1.08)}}
.sc-cap{position:absolute;top:92px;left:0;right:0;text-align:center;color:var(--navy);text-shadow:0 2px 0 rgba(255,255,255,.8)}
.sc-cap small{display:block;font-size:13px;font-weight:600;color:var(--or-d);letter-spacing:.04em}
.sc-cap b{display:block;font-size:30px;font-weight:700}
.sc-cap .dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.sc-cap .dots i{width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.7);transition:background .4s}
.sc-cap .dots i.on{background:var(--or)}
.sc-skip{position:absolute;top:52px;right:16px;z-index:9;height:34px;padding:0 14px;border-radius:17px;background:rgba(255,255,255,.9);font-size:13px;font-weight:600;box-shadow:var(--sh)}
.bigt{position:absolute;left:50%;top:330px;z-index:8;font:800 150px/1 var(--num);color:#fff;-webkit-text-stroke:5px var(--navy);paint-order:stroke fill;text-shadow:0 10px 0 rgba(19,40,122,.25);pointer-events:none}
.bigt.go{color:var(--or);-webkit-text-stroke-color:#fff;font-size:130px}
.shock{position:absolute;left:50%;top:330px;width:160px;height:160px;border-radius:50%;border:6px solid #fff;z-index:7;pointer-events:none}
.speed{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(255,255,255,.75) 22px 25px,transparent 25px 60px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);transition:opacity .2s}
.speed.on{opacity:1;animation:zoom .25s linear infinite}
@keyframes zoom{from{background-position:0 0}to{background-position:-60px 0}}
.sc-fin .sc-bg{filter:saturate(1.1)}
.sc-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,90,.25),transparent 40%)}
.arch{position:absolute;top:150px;left:30px;right:30px;height:56px;border-radius:14px;background:var(--or);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.2);animation:rise .6s var(--ease) both}
.arch span{font:800 32px var(--num);letter-spacing:.2em;color:#fff}
.arch::before,.arch::after{content:"";position:absolute;top:0;bottom:0;width:36px;background:repeating-conic-gradient(#fff 0 25%,#14172A 0 50%) 0 0/12px 12px;border-radius:14px 0 0 14px;left:0}
.arch::after{left:auto;right:0;border-radius:0 14px 14px 0}
.post{position:absolute;top:190px;width:10px;height:420px;background:linear-gradient(90deg,#DDE3EE,#fff,#C9D2E2);border-radius:5px}
.post.l{left:44px}.post.r{right:44px}
.tape{position:absolute;top:590px;height:10px;width:152px;background:repeating-linear-gradient(90deg,#fff 0 14px,var(--or) 14px 28px);box-shadow:0 2px 4px rgba(0,0,0,.2)}
.tape.l{left:52px;transform-origin:0 50%}
.tape.r{right:52px;transform-origin:100% 50%}
.tape.snap{transition:transform .9s cubic-bezier(.2,1.4,.4,1)}
.tape.l.snap{transform:rotate(70deg) scaleX(.9)}
.tape.r.snap{transform:rotate(-70deg) scaleX(.9)}
.drop{position:absolute;left:195px;top:520px;width:70px;z-index:8;transform:translate(-50%,-900px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.fstats{position:absolute;top:224px;left:18px;right:18px;display:flex;gap:8px;z-index:8}
.fstats div{flex:1;background:rgba(255,255,255,.95);border-radius:16px;padding:8px 10px;text-align:center;box-shadow:var(--sh);opacity:0;transform:translateY(-20px) scale(.6);transition:all .6s var(--spring)}
.fstats.on div{opacity:1;transform:none}
.fstats.on div:nth-child(2){transition-delay:.12s}.fstats.on div:nth-child(3){transition-delay:.24s}
.fstats span{display:block;font-size:11px;color:var(--muted)}
.fstats b{font-size:22px}
.fstats small{font-size:11px;color:var(--ink2);margin-left:2px}
.facts{position:absolute;left:18px;right:18px;bottom:40px;display:flex;gap:10px;z-index:9;opacity:0;transform:translateY(30px);transition:all .5s var(--spring);pointer-events:none}
.facts.on{opacity:1;transform:none;pointer-events:auto}
.fbtn{flex:1;height:54px;border-radius:27px;background:#fff;font-weight:600;font-size:16px;box-shadow:var(--sh)}
.fbtn.main{background:var(--or);color:#fff;flex:1.4}
.buddy .eli-say{font-size:13px;padding:6px 11px}
.buddy{z-index:6;transition:opacity .3s}
.recp:not(.running):not(.paused) .buddy{opacity:0}
.buddy.rest .eli-sq{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04,.96)}}
.buddy-hit{position:absolute;left:0;top:-100px;width:150px;height:100px;z-index:7;cursor:pointer}
.recp:not(.running):not(.paused) .buddy-hit{display:none}
.save .hero .eli-m{z-index:2}
.buddy .eli-say{left:6px;transform:scale(.3);transform-origin:24px 100%}
.buddy .eli-say.on{transform:scale(1)}
.buddy .eli-say::after{left:24px}
body.mob .sbar{visibility:hidden}