/* Popcorn — нүүр, цувралын хуудас (2026-10-17 загвар) */
:root{--ink:#16161A;--surface:#1F1F25;--raise:#29292F;--line:rgba(240,226,214,.09);--fg:#FBF4EA;--mute:#A8998D;
 --red:#EE4A12;--red-deep:#C22B00;--ok:#3DDC97;
 --display:"Nunito","Arial Rounded MT Bold",sans-serif;--body:"Golos Text","Geologica",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --gx:max(16px,env(safe-area-inset-left,0px));--gxr:max(16px,env(safe-area-inset-right,0px));color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;background:var(--ink)}
body{height:100%;margin:0;background:var(--ink);color:var(--fg);font:15px/1.45 var(--body);letter-spacing:-.005em;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
#app{position:fixed;inset:0;overflow:hidden}
.layer{position:absolute;inset:0;background:var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:10}
.layer.off{transform:translateX(100%);pointer-events:none}
.view{position:absolute;inset:0 0 calc(64px + env(safe-area-inset-bottom,0px)) 0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.view::-webkit-scrollbar{display:none}
.view[hidden]{display:none}
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 10px) var(--gxr) 10px var(--gx);transition:background .25s}
.hdr.solid{background:rgba(22,22,26,.97)}
.hdr img{height:26px;width:auto}
.hero{position:relative;margin-top:calc(-1 * (env(safe-area-inset-top,0px) + 58px))}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;height:540px;scroll-snap-align:start;overflow:hidden}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,26,.55) 0%,rgba(22,22,26,0) 22%,rgba(22,22,26,0) 45%,rgba(22,22,26,.85) 74%,var(--ink) 100%)}
.slide .cap{position:absolute;left:0;right:0;bottom:38px;z-index:2;padding:0 var(--gxr) 0 var(--gx);display:flex;flex-direction:column;gap:10px}
.kicker{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font:600 12px var(--body);color:#fff}
.kicker .new{background:var(--red);padding:3px 8px;border-radius:5px;letter-spacing:.1em;font-size:11px;font-weight:800}
.kicker .rank{background:rgba(255,255,255,.14);padding:3px 8px;border-radius:6px}
.slide h3{margin:0;font:600 36px/1.02 var(--display);text-transform:uppercase;letter-spacing:.005em;max-width:14ch;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.slide p{margin:0;color:#DBD1C9;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:40ch}
.cta-row{display:flex;gap:10px;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.btn svg{width:18px;height:18px}
.btn.red{background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(238,74,18,.35)}
.btn.red:active{background:var(--red-deep)}
.btn.glass{background:rgba(41,38,36,.82)}
.btn.wide{width:100%}
.dots{position:absolute;left:var(--gx);bottom:12px;z-index:3;display:flex;gap:5px}
.dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);transition:width .25s,background .25s}
.dots i.on{width:18px;background:#fff}
.sec{padding-top:26px}
.sec[hidden]{display:none}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--gxr) 12px var(--gx)}
.sec-h h4{margin:0;font:700 18px/1.2 var(--body);letter-spacing:-.02em}
.sec-h span{color:var(--mute);font-size:13px;font-weight:500}
.row{display:flex;gap:10px;overflow-x:auto;padding:0 var(--gxr) 4px var(--gx);scroll-snap-type:x proximity;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row>*{scroll-snap-align:start;flex:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--gxr) 16px var(--gx);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:#DAD0C7}
.chip.on{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.pc{position:relative;width:118px;text-align:left}
.pc .im{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--surface)}
.pc .im img{width:100%;height:100%;object-fit:cover}
.pc .im::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.pc .eps{position:absolute;left:8px;bottom:7px;z-index:2;display:flex;align-items:center;gap:4px;font:600 11px var(--body)}
.pc .eps svg{width:10px;height:10px}
.pc .tagc{position:absolute;top:0;left:0;z-index:2;padding:3px 7px;border-radius:12px 0 10px 0;font:800 10px var(--body);letter-spacing:.1em;background:var(--red)}
.pc .tagc.own{background:var(--ok);color:#03140C}
.pc .t{margin-top:7px;font-size:13.5px;font-weight:700;line-height:1.25;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .s{margin-top:2px;color:var(--mute);font-size:11.5px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;padding:0 var(--gxr) 0 var(--gx)}
.grid .pc{width:auto}
.cw{width:236px;display:flex;gap:10px;padding:8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:left}
.cw img{width:62px;height:84px;border-radius:9px;object-fit:cover}
.cw .m{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
.cw .m b{font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cw .m span{font-size:12px;color:var(--mute)}
.bar{height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;background:var(--red)}
.tp{position:relative;width:150px;height:184px;text-align:left}
.tp .n{position:absolute;left:-2px;bottom:-6px;font:700 128px/.8 var(--display);color:var(--ink);-webkit-text-stroke:2px rgba(251,244,234,.55);letter-spacing:-.04em;z-index:1}
.tp.top3 .n{-webkit-text-stroke-color:var(--red)}
.tp img{position:absolute;right:0;top:0;width:110px;height:165px;object-fit:cover;border-radius:10px;box-shadow:-10px 0 20px rgba(0,0,0,.6)}
.tabs{position:absolute;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);padding:6px var(--gxr) calc(8px + env(safe-area-inset-bottom,0px)) var(--gx);background:#16161A;border-top:1px solid var(--line);height:calc(64px + env(safe-area-inset-bottom,0px))}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--mute)}
.tabs svg{width:24px;height:24px}
.tabs button.on{color:var(--fg)}
.tabs button.on svg{color:var(--red)}
.dt{overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dt::-webkit-scrollbar{display:none}
.dt-bg{position:absolute;inset:0 0 auto 0;height:380px;overflow:hidden;z-index:0}
.dt-bg img{width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(1.3);transform:scale(1.25);opacity:.75}
.dt-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,26,.35),var(--ink) 92%)}
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 6px) var(--gxr) 6px var(--gx)}
.ib{width:38px;height:38px;display:grid;place-items:center;border-radius:50%}
.ib svg{width:22px;height:22px}
.topbar .ib{background:rgba(0,0,0,.55)}
.dt-head{position:relative;z-index:1;display:flex;gap:14px;padding:8px var(--gxr) 0 var(--gx)}
.dt-head img{width:118px;height:177px;object-fit:cover;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.55);flex:none}
.dt-head .info{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding-bottom:4px}
.dt-head h2{margin:0;font:600 27px/1.03 var(--display);text-transform:uppercase}
.meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:#CFC4BA;font-size:12.5px}
.meta span+span::before{content:"·";margin-right:10px;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.08);color:#E5DDD6}
.tags span.mn{background:rgba(238,74,18,.16);color:#FFB37A}
.dt-body{position:relative;z-index:1;padding:18px var(--gxr) 32px var(--gx);display:flex;flex-direction:column;gap:16px}
.syn{margin:0;color:#D6CCC3;font-size:14.5px;line-height:1.55}
.dt-cta{display:flex;gap:10px}
.dt-cta .btn.red{flex:1}
.dt-cta .sq{width:48px;height:48px;border-radius:14px;background:var(--raise);display:grid;place-items:center}
.dt-cta .sq svg{width:22px;height:22px}
.dt-cta .sq.on{color:var(--red)}
.note{display:flex;gap:10px;align-items:center;padding:11px 13px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:#D6CCC3}
.note svg{width:18px;height:18px;flex:none;color:var(--ok)}
.note b{color:var(--fg)}
.eph{display:flex;align-items:center;justify-content:space-between}
.eph h4{margin:0;font:700 18px var(--body);letter-spacing:-.02em}
.rng{display:flex;gap:6px}
.rng button{font-size:12.5px;font-weight:600;color:var(--mute);padding:5px 10px;border-radius:8px}
.rng button.on{background:var(--raise);color:var(--fg)}
.epg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.epn{position:relative;aspect-ratio:1/1;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font:600 14px var(--body);font-variant-numeric:tabular-nums}
.epn.lk{color:#897B6F}
.epn.lk svg{position:absolute;top:4px;right:4px;width:10px;height:10px;color:#FBD57E}
.epn.cur{border-color:var(--red);color:var(--red)}
.epn.seen{background:var(--raise)}
.shorts{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.shorts::-webkit-scrollbar{display:none}
.sh{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.sh .fr{position:absolute;inset:0;background-size:cover;background-position:50% 30%;transform:scale(1.08)}
.sh.act .fr{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.22) translate(-3%,2%)}}
.sh .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 18%,transparent 50%,rgba(0,0,0,.88) 100%)}
.sh .rail{position:absolute;right:calc(var(--gxr) - 6px);bottom:150px;z-index:5;display:flex;flex-direction:column;gap:18px;align-items:center}
.sh .rail button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.sh .rail svg{width:30px;height:30px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.sh .rail .on{color:var(--red)}
.sh .pbot{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 76px 18px var(--gx);display:flex;flex-direction:column;gap:6px}
.sh .st{font:700 17px/1.25 var(--body);letter-spacing:-.015em;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.sh .en{display:inline-flex;align-self:flex-start;font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.14)}
.sh p{margin:0;font-size:13px;color:#E3DBD4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh .more{margin-top:6px;display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 14px;border-radius:12px;background:rgba(32,30,30,.8);font-weight:600;font-size:13.5px}
.sh .more svg{width:16px;height:16px}
.pg-h{padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gxr) 6px var(--gx)}
.pg-h h1{margin:0;font:600 32px/1 var(--display);text-transform:uppercase}
.pg-h p{margin:4px 0 0;color:var(--mute);font-size:13px}
.me-card{margin:14px var(--gxr) 0 var(--gx);padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;gap:14px;align-items:center}
.me-card .av{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--red),#7A2200);display:grid;place-items:center;font:600 24px var(--display)}
.me-card b{display:block;font-size:16px}
.me-card span{font-size:12.5px;color:var(--mute)}
.ent{margin:12px var(--gxr) 0 var(--gx);display:grid;gap:8px}
.ent .r{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.ent .r img{width:40px;height:60px;border-radius:7px;object-fit:cover}
.ent .r div{flex:1;min-width:0}
.ent .r b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent .r span{font-size:12px;color:var(--mute)}
.ent .r em{font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:rgba(61,220,151,.14);color:var(--ok)}
.menu{margin:18px var(--gxr) 24px var(--gx);border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.menu a{display:flex;align-items:center;gap:12px;padding:15px 14px;border-bottom:1px solid var(--line);font-weight:500}
.menu a:last-child{border-bottom:0}
.menu svg{width:20px;height:20px;color:var(--mute)}
.menu a span{flex:1}
.empty{margin:30px var(--gxr) 0 var(--gx);text-align:center;color:var(--mute);font-size:14px}
.toast{position:fixed;left:50%;bottom:110px;z-index:80;transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:12px;background:#FBF4EA;color:#16161A;font-weight:600;font-size:13.5px;transition:all .25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.foot{padding:30px var(--gxr) 30px var(--gx);color:#56616E;font-size:12px;text-align:center}
.foot img{height:18px;margin:0 auto 8px;opacity:.5}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}