:root{color-scheme:light;--bg:#f7f6f2;--surface:#fff;--surface2:#f1efe8;--ink:#121212;--ink2:#4a4a4a;--muted:#6f6d67;--line:#e7e4dc;--head:#121212;--shadow:0 1px 2px #0000000d,0 6px 24px #00000010;--shadow-up:0 2px 4px #0000000f,0 14px 34px #0000001f;--brand:#FFD23F;--brand-ink:#121212;--red:#FF3B30}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#0e0e10;--surface:#17171a;--surface2:#202024;--ink:#f2f1ec;--ink2:#c9c7c0;--muted:#9a978f;--line:#2a2a2f;--head:#000;--shadow:0 1px 2px #0006;--shadow-up:0 2px 6px #0008,0 14px 34px #0009}}:root[data-theme=dark]{color-scheme:dark;--bg:#0e0e10;--surface:#17171a;--surface2:#202024;--ink:#f2f1ec;--ink2:#c9c7c0;--muted:#9a978f;--line:#2a2a2f;--head:#000;--shadow:0 1px 2px #0006;--shadow-up:0 2px 6px #0008,0 14px 34px #0009}
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}
body{font-family:'Mukta','Nirmala UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:18px;line-height:1.6;transition:background-color .25s,color .25s}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{max-width:1880px;margin:0 auto;padding:0 clamp(16px,2vw,32px)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
header.top{background:var(--head);color:#fff;position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;gap:12px;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:28px;color:var(--brand);line-height:1;flex:none}
.logo img{width:38px;height:38px;border-radius:10px}.logo small{display:block;font:500 12px 'Mukta',sans-serif;color:#ffffffa6;letter-spacing:.02em;margin-top:2px}
.bar .sp{flex:1}
.sbox{display:flex;align-items:center;gap:6px;background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;padding:0 4px 0 16px;height:42px;width:min(340px,28vw);transition:background .2s,border-color .2s}
.sbox:focus-within{background:#ffffff24;border-color:var(--brand)}
.sbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:500 15px 'Mukta',sans-serif}.sbox input::placeholder{color:#ffffff99}
.ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:0;background:#ffffff14;color:#fff;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.ico:hover{background:var(--brand);color:#121212}.sbox .ico{width:34px;height:34px;background:none}.sbox .ico:hover{background:var(--brand)}
.ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme .sun{display:block}:root:not([data-theme=light]) .theme .moon{display:none}}
:root[data-theme=dark] .theme .sun{display:block}:root[data-theme=dark] .theme .moon{display:none}
.follow{display:flex;gap:8px}.follow a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:0 12px;height:34px;border-radius:999px;background:#ffffff14;color:#fff;transition:background .2s,color .2s}.follow a:hover{background:var(--brand);color:var(--brand-ink)}
.follow svg{width:16px;height:16px;fill:currentColor;flex:none}
nav.cats{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}nav.cats::-webkit-scrollbar{display:none}
nav.cats a{white-space:nowrap;font-size:15px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink2);transition:background .2s,color .2s,border-color .2s}
nav.cats a.on,nav.cats a:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}nav.cats a.find{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--brand-ink);background:var(--brand);padding:2px 10px;border-radius:999px}
.chip.red{background:var(--red);color:#fff}
.meta{font-size:14px;color:var(--muted)}
h2.sec{font-family:'Baloo 2',sans-serif;font-size:24px;font-weight:800;margin:8px 0 14px;display:flex;align-items:center;gap:10px}
h2.sec::before{content:'';width:8px;height:24px;border-radius:4px;background:var(--brand);flex:none}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.sec-row h2.sec{margin-bottom:14px}
.more{font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap;transition:color .2s}.more:hover{color:var(--ink)}
/* top of the home page: the big story with its photo, headline over it + the next stories beside it */
.top-sec{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;margin:8px 0 30px}
.top-sec.solo{grid-template-columns:1fr}.top-sec.solo .hero{aspect-ratio:21/9}
.hero{position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;background:#222;isolation:isolate;transition:box-shadow .2s}
.hero:hover{box-shadow:var(--shadow-up)}
.hero .pic{position:absolute;inset:0;overflow:hidden}.hero .pic i{position:absolute;inset:0;background-position:center 20%;background-size:cover;background-repeat:no-repeat;animation:drift 22s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#000000e0 100%);z-index:1}
.hero .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px;color:#fff;display:flex;flex-direction:column;gap:10px}
.hero h1{font-family:'Baloo 2',sans-serif;font-size:clamp(26px,3vw,42px);line-height:1.15;font-weight:800;text-shadow:0 2px 14px #0009}
.hero p{color:#ffffffde;font-size:17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero .meta{color:#ffffffcc}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
.side-list{display:flex;flex-direction:column;gap:12px}
.mini{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:center;background:var(--surface);border-radius:14px;padding:10px;box-shadow:var(--shadow);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.side-list .mini{flex:1}.mini:hover{transform:translateX(4px);box-shadow:var(--shadow-up)}
.mini .pic{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surface2)}.mini img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.mini h3{font-family:'Baloo 2',sans-serif;font-size:18px;line-height:1.25;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.mini .meta{font-size:13px}
.mini mark{background:color-mix(in srgb,var(--brand) 55%,transparent);color:inherit;border-radius:3px;padding:0 2px}
/* main column + sidebar */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;margin-bottom:36px}
.cols.narrow{grid-template-columns:minmax(0,820px) 340px;justify-content:center}
.cols.full{grid-template-columns:1fr}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}.cols.full .grid{grid-template-columns:repeat(4,1fr)}
aside.side{display:flex;flex-direction:column;gap:20px}
.box{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:18px}.box h2.sec{font-size:20px;margin:0 0 12px}.box h2.sec::before{height:20px}
ol.top5{list-style:none;display:grid;gap:2px}
ol.top5 a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:8px;border-radius:12px;align-items:start;transition:background .2s}ol.top5 a:hover{background:var(--surface2)}
ol.top5 b{width:32px;height:32px;border-radius:9px;background:var(--surface2);display:grid;place-items:center;font:800 17px 'Baloo 2',sans-serif}ol.top5 li:first-child b{background:var(--brand);color:var(--brand-ink)}
ol.top5 span{font-weight:600;font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}ol.top5 small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border-radius:14px;padding:14px;background:var(--surface2);display:flex;flex-direction:column;gap:2px;transition:transform .2s,background .2s}.tile:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--brand) 30%,var(--surface2))}
.tile em{font-style:normal;font-size:26px;line-height:1.2}.tile b{font-family:'Baloo 2',sans-serif;font-size:18px}.tile small{font-size:13px;color:var(--muted);line-height:1.35}
ul.list{list-style:none;display:grid}ul.list a{display:block;padding:10px 4px;border-bottom:1px solid var(--line);font-weight:600;font-size:16px;line-height:1.35;transition:color .2s}ul.list li:last-child a{border:0}ul.list a:hover{color:var(--muted)}ul.list small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.card{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}
.card .pic{aspect-ratio:16/10;background:#2a2a2a center/cover;position:relative;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.card:hover .pic img{transform:scale(1.05)}
.card .pic .play{position:absolute;right:10px;bottom:10px;background:#000000b0;color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-family:'Baloo 2',sans-serif;font-size:21px;line-height:1.25;font-weight:700}.card p{font-size:16px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pic:not(.ok):has(img){background:linear-gradient(100deg,var(--surface2) 30%,color-mix(in srgb,var(--surface2) 70%,var(--ink) 8%) 50%,var(--surface2) 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-150% 0}}
article.post{max-width:760px;margin:12px auto 40px;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:28px}.cols article.post{max-width:none;margin:12px 0 0}
article.post h1{font-family:'Baloo 2',sans-serif;font-size:36px;line-height:1.2;font-weight:800;margin:10px 0 6px}
article.post .en-h{color:var(--muted);font-size:17px;margin-bottom:14px}
.video{max-width:360px;margin:18px auto;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000}.video iframe{width:100%;height:100%;border:0}
.photo{margin:18px 0;border-radius:16px;overflow:hidden}
.lead{font-size:20px;font-weight:500;margin:16px 0}
.article{margin:18px 0}.article p{margin:0 0 14px;line-height:1.75}
ul.pts{list-style:none;display:grid;gap:10px;margin:16px 0}ul.pts li{display:flex;gap:12px;align-items:flex-start}
ul.pts li b{flex:none;width:30px;height:30px;border-radius:9px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-family:'Baloo 2',sans-serif}
.angle{border-left:5px solid var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent);padding:12px 16px;border-radius:0 12px 12px 0;margin:16px 0}
details.en{margin:18px 0;border:1px solid var(--line);border-radius:12px;padding:12px 16px}details.en summary{cursor:pointer;font-weight:700}details.en p{margin-top:10px;color:var(--ink2);font-size:17px}
.src{margin-top:20px;font-size:15px;color:var(--muted)}.src a{text-decoration:underline;text-underline-offset:2px}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.share a,.share button{font:600 14px 'Mukta',sans-serif;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.share a:hover,.share button:hover{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.ask{margin-top:22px;padding:16px;border-radius:14px;background:#17171a;color:#fff;font-weight:600;border:1px solid #ffffff1f}.ask a{color:var(--brand);text-decoration:underline}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:14px}footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}footer a{text-decoration:underline}
.video.lite{position:relative;cursor:pointer;background:#000 center/cover no-repeat}.video.lite .yt-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:#FF0000e6;color:#fff;font-size:36px;display:grid;place-items:center;box-shadow:0 8px 30px #0008;padding-left:6px;transition:transform .2s}
.video.lite:hover .yt-play,.video.lite:focus .yt-play{transform:scale(1.08)}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:26px auto 30px;max-width:760px;padding:18px 20px;border-radius:18px;background:var(--brand);color:var(--brand-ink)}
.cta b{display:block;font-family:'Baloo 2',sans-serif;font-size:22px;line-height:1.2}.cta span{font-size:15px}
.cta-links{display:flex;flex-wrap:wrap;gap:8px}.cta-links a{font:700 14px 'Mukta',sans-serif;padding:8px 14px;border-radius:999px;background:#12121214;color:var(--brand-ink)}.cta-links a.go{background:var(--head);color:#fff}
aside .cta{margin:0;max-width:none;flex-direction:column;align-items:stretch}aside .cta-links a{flex:1;text-align:center}
article.page h1{margin-bottom:10px}article.page a{text-decoration:underline;text-underline-offset:2px}
/* 🔍 search page */
.srch{max-width:900px;margin:12px auto 40px}.srch h1{font-family:'Baloo 2',sans-serif;font-size:34px;font-weight:800;margin-bottom:12px}
.sbig{display:flex;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 6px 6px 20px;box-shadow:var(--shadow);transition:border-color .2s}.sbig:focus-within{border-color:var(--brand)}
.sbig input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:500 19px 'Mukta',sans-serif}
.sbig button{border:0;border-radius:999px;background:var(--brand);color:var(--brand-ink);font:700 16px 'Mukta',sans-serif;padding:0 22px;min-height:46px;cursor:pointer}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.sugg a{font-size:15px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink2)}.sugg a:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.searched .sugg{display:none}#sinfo{margin:14px 4px}
.sres{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* motion: all CSS (cheap); nothing is hidden if a script fails; calm for "reduce motion" phones */
@view-transition{navigation:auto}header.top{view-transition-name:top}
::view-transition-old(root){animation:.18s ease-out both vt-out}::view-transition-new(root){animation:.28s cubic-bezier(.2,.8,.2,1) both vt-in}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.tick{background:var(--surface);border-bottom:1px solid var(--line);height:40px;overflow:hidden}
.tick-in{display:flex;align-items:center;gap:12px;height:100%}
.tick-l{flex:none;display:inline-flex;align-items:center;gap:7px;font:700 13px 'Mukta',sans-serif;background:var(--brand);color:#121212;padding:3px 11px;border-radius:999px}
.tick-l::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s ease-out infinite}
.tick-m{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tick-t{display:flex;width:max-content;animation:tick var(--dur,40s) linear infinite}.tick-m:hover .tick-t,.tick-m:focus-within .tick-t{animation-play-state:paused}
.tick-t>*{position:relative;white-space:nowrap;font-size:15px;font-weight:600;padding-right:44px;color:var(--ink2)}.tick-t a:hover{color:var(--ink);text-decoration:underline}
.tick-t>*::after{content:'';position:absolute;right:19px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--brand)}
.tick.brk{background:var(--red);border-color:var(--red)}.tick.brk .tick-l{background:#fff;color:var(--red)}.tick.brk .tick-t>*{color:#fff;font-weight:700}.tick.brk .tick-t>*::after{background:#fff}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff3b3099}100%{box-shadow:0 0 0 9px #ff3b3000}}
/* cards rise in as they scroll into view, but never start invisible: a fast scroll (or Google's renderer) saw blank rows */
@keyframes riseSoft{from{opacity:.45;transform:translateY(18px) scale(.985)}}
@supports (animation-timeline:view()){.grid .card{animation:riseSoft linear both;animation-timeline:view();animation-range:entry 0% entry 30%}}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.98)}}
.new{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--red);margin-right:6px}.new::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s ease-out infinite}
.hero .new{color:#fff}
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);z-index:9;display:none}
@supports (animation-timeline:scroll()){.prog{display:block;animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}
/* 🏏 NPL box (sidebar) */
.npl table{width:100%;border-collapse:collapse;font-size:15px}
.npl th{font-size:12px;font-weight:700;color:var(--muted);text-align:center;padding:4px 4px;border-bottom:1px solid var(--line)}.npl th:nth-child(2){text-align:left}
.npl td{text-align:center;padding:6px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.npl tr:last-child td{border-bottom:0}
.npl td.tm{text-align:left;font-weight:600;white-space:nowrap}.npl td.nrr{font-size:13px;color:var(--muted)}
.tl{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;object-fit:cover;background:#000;margin-right:8px;vertical-align:middle;font-size:13px}.tl.em{background:var(--surface2)}
.npl td.pts{font-weight:800;font-family:'Baloo 2',sans-serif;font-size:17px}.npl tr.top td.pts{background:color-mix(in srgb,var(--brand) 40%,transparent);border-radius:6px}
.npl-s{margin-top:14px;display:grid;gap:10px}
.npl-card{background:var(--head);color:#fff;border-radius:16px;padding:14px;text-align:center;background-image:radial-gradient(300px 160px at 100% 0,#FFD23F33,transparent 60%)}
.npl-card small{display:block;font-size:12px;font-weight:700;color:var(--brand);margin-bottom:8px}.npl-card>b{display:block;font-family:'Baloo 2',sans-serif;font-size:17px;line-height:1.25;margin-top:8px}
.npl-m{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:6px}.npl-m>i{font-style:normal;font-size:12px;font-weight:700;color:#ffffff80;align-self:center}
.npl-t{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}.npl-t b{font-size:13px;line-height:1.2;font-weight:600}.npl-t .sc{font:800 22px 'Baloo 2',sans-serif;line-height:1}.npl-t .sc small{display:inline;font:500 11px 'Mukta',sans-serif;color:#ffffffa6;margin:0}
.tl.big{width:52px;height:52px;margin:0;border:2px solid #ffffff2e;font-size:24px}.npl-t.w .tl.big{border-color:var(--brand);box-shadow:0 0 0 4px #FFD23F2e}.npl-t.w .sc{color:var(--brand)}
ul.npl-fx{list-style:none;display:grid;gap:8px;text-align:left}ul.npl-fx li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding-bottom:8px;border-bottom:1px solid #ffffff1a}ul.npl-fx li:last-child{border:0;padding:0}
.fx-t{display:flex;align-items:center;min-width:0;font-size:13px;font-weight:600}.fx-t em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ul.npl-fx li>.fx-t:nth-of-type(2){flex-direction:row-reverse;text-align:right}ul.npl-fx li>.fx-t:nth-of-type(2) .tl{margin:0 0 0 8px}
ul.npl-fx i{font-style:normal;font-size:11px;color:#ffffff80}ul.npl-fx time{grid-column:1/-1;text-align:center;font-size:12px;color:#ffffffb3}
/* 🔴 live score (from ESPN, refreshed in the reader's browser while a match is on) */
.npl-live{position:relative;overflow:hidden;isolation:isolate;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.10%22%20d%3D%22M0%20200L0%20118L70%2096L130%20112L230%2038L300%2094L362%2070L450%2018L522%2084L600%2058L690%2012L762%2080L842%2052L930%2028L1010%2088L1090%2058L1200%2084L1200%20200Z%22%2F%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.35%22%20d%3D%22M206%2058L230%2038L254%2060L242%2055L232%2063L219%2054ZM424%2040L450%2018L476%2042L463%2037L451%2046L437%2036ZM664%2036L690%2012L716%2038L703%2033L691%2042L677%2032ZM906%2048L930%2028L954%2050L942%2045L931%2053L918%2044ZM826%2062L842%2052L857%2063L848%2061L841%2066ZM586%2068L600%2058L614%2069L606%2067L599%2072Z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.25%22%20d%3D%22M0%20200L0%20160L100%20128L180%20150L272%20108L362%20146L470%20118L560%20156L652%20124L762%20152L862%20112L962%20150L1062%20128L1200%20152L1200%20200Z%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 46% no-repeat,linear-gradient(120deg,#081a52,#2a0c3a,#8a0f2a,#0a2a6e,#081a52);background-size:100% 46%,300% 300%;color:#fff;border-radius:18px;padding:16px 16px 22px;margin-bottom:14px;border:1px solid #ffffff2e;box-shadow:0 10px 30px #0a1a5233;animation:liveIn .5s cubic-bezier(.2,.8,.2,1),npg 14s ease-in-out infinite}
.npl-live::before{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;z-index:-1;background:linear-gradient(90deg,transparent,#ffffff1a,transparent);animation:sweep 6s ease-in-out infinite}
.npl-live .lv-r .tl{width:34px;height:34px;box-shadow:0 0 0 2px #ffffff40,0 0 14px #ffd23f40}.npl-live .lv-r{animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}.npl-live .lv-r+.lv-r{animation-delay:.08s}
.npl-live{container-type:inline-size}.npl-live .lv-h>div{display:flex;align-items:center;gap:12px}.npl-live .lv-t1{font:800 15px 'Baloo 2',sans-serif;color:#fff}
.npl-live .lv-info{font-size:12.5px;color:#ffffffb3;margin:0 0 12px}
.npl-live .lv-m{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:14px 0;border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f}
.npl-live .lv-t{display:flex;align-items:center;gap:14px;min-width:0;animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}.npl-live .lv-t.r{flex-direction:row-reverse;text-align:right;animation-delay:.08s}
.npl-live .lv-logo{width:76px;height:76px;border-radius:50%;object-fit:contain;background:#00000059;padding:4px;box-shadow:0 0 0 3px #ffffff30,0 0 22px #ffd23f33;flex:none;animation:bob 3.6s ease-in-out infinite alternate}.npl-live .lv-t.r .lv-logo{animation-delay:-1.8s}
.npl-live .lv-t.bat .lv-logo{box-shadow:0 0 0 3px #FFD23F,0 0 28px #ffd23f80}
.npl-live .lv-tx{min-width:0}.npl-live .lv-tx em{display:block;font-style:normal;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npl-live .lv-sc{display:inline-flex;align-items:baseline;gap:8px;font:800 32px/1.15 'Baloo 2',sans-serif;white-space:nowrap}.npl-live .lv-sc small{font:600 13px 'Mukta',sans-serif;color:#ffffffb3}.npl-live .lv-sc.flash{animation:flash 1.2s ease-out}.npl-live .lv-t.r .lv-sc{flex-direction:row-reverse}.npl-live .lv-sc.wait small{font-size:14px}
.npl-live .lv-c{text-align:center}.npl-live .lv-c b{font-size:14px;font-weight:800;white-space:nowrap;letter-spacing:.2px}.npl-live .lv-c i{display:block;height:3px;width:74px;margin:8px auto 0;border-radius:3px;background:linear-gradient(90deg,#ffffff22,#FFD23F,#ffffff22);background-size:200% auto;animation:shine 1.8s linear infinite}
.npl-live .lv-bat{font-style:normal;font-size:14px;display:inline-block;animation:sway 1.1s ease-in-out infinite alternate}.npl-live .lv-s{margin-top:12px}
@keyframes bob{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
@container (max-width:560px){.npl-live .lv-m{gap:6px}.npl-live .lv-t,.npl-live .lv-t.r{flex-direction:column;text-align:center;gap:8px}.npl-live .lv-logo{width:58px;height:58px}.npl-live .lv-tx em{font-size:14px;white-space:normal;line-height:1.25}.npl-live .lv-sc,.npl-live .lv-t.r .lv-sc{font-size:25px;flex-direction:column;align-items:center;gap:0}.npl-live .lv-c b{font-size:12px;white-space:normal}.npl-live .lv-c i{width:40px}}
.npl-live .lv-potm{margin-top:10px;display:inline-block;font-size:14px;padding:7px 14px;border-radius:999px;background:#ffd23f26;border:1px solid #ffd23f66}.npl-live .lv-potm b{color:#FFD23F}
.npl-live .lv-card{margin-top:14px;border-top:1px solid #ffffff1f;padding-top:12px}.npl-live .lv-card summary{cursor:pointer;font-weight:800;font-size:14px;list-style:none;display:flex;align-items:center;gap:8px}.npl-live .lv-card summary::-webkit-details-marker{display:none}.npl-live .lv-card summary::after{content:'▾';transition:transform .2s;color:#FFD23F}.npl-live .lv-card:not([open]) summary::after{transform:rotate(-90deg)}
.npl-live .lv-inns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:12px}.npl-live .lv-in{background:#00000040;border:1px solid #ffffff1a;border-radius:14px;padding:12px;min-width:0;backdrop-filter:blur(4px)}
.npl-live .lv-in h4{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:8px}.npl-live .lv-in h4 img{width:28px;height:28px;border-radius:50%;background:#0006}.npl-live .lv-in h4 span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.npl-live .lv-in h4 b{font:800 20px 'Baloo 2',sans-serif}.npl-live .lv-in h4 small{font-size:12px;color:#ffffffb3;font-weight:600}
.npl-live .lv-tw{overflow:visible}.npl-live .lv-in table{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.npl-live .lv-in th{font-size:11.5px;font-weight:700;color:#ffffff99;text-align:right;padding:5px 4px;border-bottom:1px solid #ffffff26}.npl-live .lv-in th:first-child,.npl-live .lv-in td:first-child{text-align:left}
.npl-live .lv-in td{text-align:right;padding:5px 4px;border-bottom:1px solid #ffffff12;white-space:nowrap}.npl-live .lv-in td:first-child{white-space:normal}.npl-live .lv-in tr.no td:first-child{color:#FFD23F;font-weight:700}.npl-live .lv-in td small{color:#ffffff99}
.npl-live .lv-ex{font-size:12px;color:#ffffffb3;margin:6px 0 10px}
.npl-live .lv-in th,.npl-live .lv-in td{padding:5px 2px}.npl-live .lv-in th:not(:first-child){width:32px}.npl-live .lv-in th:nth-child(2){width:36px}.npl-live .lv-in th:last-child{width:48px}
.npl-live .lv-in td:first-child{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
@container (max-width:760px){.npl-live .lv-inns{grid-template-columns:minmax(0,1fr)}}
@container (max-width:420px){.npl-live .lv-in{padding:10px 8px}.npl-live .lv-in table{font-size:12px}.npl-live .lv-in th{font-size:10.5px}.npl-live .lv-in th:not(:first-child){width:27px}.npl-live .lv-in th:nth-child(2){width:31px}.npl-live .lv-in th:last-child{width:40px}}
.npl-live.next{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.10%22%20d%3D%22M0%20200L0%20118L70%2096L130%20112L230%2038L300%2094L362%2070L450%2018L522%2084L600%2058L690%2012L762%2080L842%2052L930%2028L1010%2088L1090%2058L1200%2084L1200%20200Z%22%2F%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.35%22%20d%3D%22M206%2058L230%2038L254%2060L242%2055L232%2063L219%2054ZM424%2040L450%2018L476%2042L463%2037L451%2046L437%2036ZM664%2036L690%2012L716%2038L703%2033L691%2042L677%2032ZM906%2048L930%2028L954%2050L942%2045L931%2053L918%2044ZM826%2062L842%2052L857%2063L848%2061L841%2066ZM586%2068L600%2058L614%2069L606%2067L599%2072Z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.25%22%20d%3D%22M0%20200L0%20160L100%20128L180%20150L272%20108L362%20146L470%20118L560%20156L652%20124L762%20152L862%20112L962%20150L1062%20128L1200%20152L1200%20200Z%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 46% no-repeat,linear-gradient(120deg,#0a1f5c,#1d0f4a,#5a1240,#0a1f5c);background-size:100% 46%,300% 300%}.npl-live.next .lv-h b{color:#FFD23F}.npl-live.next .lv-h b::before{background:#FFD23F;animation:none}
.npl-live .lv-vs{display:block;font:800 30px/1 'Baloo 2',sans-serif;color:#FFD23F;letter-spacing:1px;text-shadow:0 0 18px #ffd23f66}.npl-live .lv-cd{display:block;margin-top:6px;font-size:13px;font-weight:700;white-space:nowrap}
.sc-open{margin-top:10px;font:700 13px 'Mukta',sans-serif;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer}.sc-open:hover{border-color:var(--brand)}
.hub-res li>div.sc-box{display:block;font-size:inherit}.hub-res li>div.sc-box[hidden]{display:none}.sc-open{justify-self:start}
.npl-live.sc-only{margin:10px 0 0;padding:12px;animation:liveIn .4s cubic-bezier(.2,.8,.2,1)}.npl-live.sc-only::before{display:none}
.hub-more{margin-top:12px}.hub-more summary{cursor:pointer;font-weight:700;color:var(--muted);margin-bottom:10px}
.mkt .mk-body{display:grid;gap:10px}.mkt .mk-live{font-size:11px;font-weight:800;color:#fff;background:#FF3B30;padding:3px 9px;border-radius:999px;animation:pulse 1.4s ease-out infinite}
.mk-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface2);animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}.mk-row:nth-child(2){animation-delay:.06s}.mk-row:nth-child(3){animation-delay:.12s}
.mk-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:none}.mk-ic.au{background:linear-gradient(135deg,#ffe58a,#d4a017)}.mk-ic.ag{background:linear-gradient(135deg,#f4f6fa,#9aa3b2)}.mk-ic.nx{background:linear-gradient(135deg,#6aa8ff,#1f5fd1)}
.mk-tx{flex:1;min-width:0}.mk-tx small{display:block;font-size:12px;color:var(--muted)}.mk-tx b{font:800 21px/1.2 'Baloo 2',sans-serif;font-variant-numeric:tabular-nums}
.mk-ch{font-size:13px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}.mk-ch.up{color:#0f8a3c;background:#1fbf5c22}.mk-ch.down{color:#d11f2f;background:#ff3b3022}.mk-ch.eq{color:var(--muted);background:var(--line)}
.mk-mv{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12.5px}.mk-mv div{padding:8px 10px;border-radius:12px;background:var(--surface2)}.mk-mv p{display:flex;justify-content:space-between;gap:6px;margin-top:3px}.mk-mv p b{font-weight:700}.mk-mv .u{color:#0f8a3c}.mk-mv .d{color:#d11f2f}
.mk-ft{font-size:11.5px;color:var(--muted)}.npl-live .lv-src{margin-top:10px;font-size:11px;color:#ffffff8c;text-align:right}
.npl-live .lv-more{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700;color:#FFD23F;text-decoration:none;padding:6px 12px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e}.npl-live .lv-more:hover{background:#ffffff2e}
.npl-live .lv-need{animation:glow 1.6s ease-in-out infinite alternate}.npl-live .lv-b i:last-child{animation:pop .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 2px #ffffff55}
.npl-live .lv-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:10px}.npl-live .lv-h b{display:inline-flex;align-items:center;gap:7px;color:#ff5a50}.npl-live .lv-h b::before{content:'';width:8px;height:8px;border-radius:50%;background:#FF3B30;animation:pulse 1.4s ease-out infinite}
.npl-live .lv-r{display:flex;align-items:center;gap:10px;padding:6px 0}.npl-live .lv-r em{flex:1;font-style:normal;font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npl-live .lv-r span{font:800 22px 'Baloo 2',sans-serif;white-space:nowrap}.npl-live .lv-r span small{font:600 13px 'Mukta',sans-serif;color:#ffffffb3}.npl-live .lv-r span.flash{animation:flash 1.2s ease-out}.npl-live .lv-s{font-size:12px;color:#ffffffb3;margin-top:6px;display:flex;flex-direction:column;gap:3px}
.npl-live .lv-need{font-size:15px;color:#FFD23F;font-weight:800}.npl-live.done{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.10%22%20d%3D%22M0%20200L0%20118L70%2096L130%20112L230%2038L300%2094L362%2070L450%2018L522%2084L600%2058L690%2012L762%2080L842%2052L930%2028L1010%2088L1090%2058L1200%2084L1200%20200Z%22%2F%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.35%22%20d%3D%22M206%2058L230%2038L254%2060L242%2055L232%2063L219%2054ZM424%2040L450%2018L476%2042L463%2037L451%2046L437%2036ZM664%2036L690%2012L716%2038L703%2033L691%2042L677%2032ZM906%2048L930%2028L954%2050L942%2045L931%2053L918%2044ZM826%2062L842%2052L857%2063L848%2061L841%2066ZM586%2068L600%2058L614%2069L606%2067L599%2072Z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20fill-opacity%3D%22.25%22%20d%3D%22M0%20200L0%20160L100%20128L180%20150L272%20108L362%20146L470%20118L560%20156L652%20124L762%20152L862%20112L962%20150L1062%20128L1200%20152L1200%20200Z%22%2F%3E%3C%2Fsvg%3E") center bottom/100% 46% no-repeat,linear-gradient(135deg,#0d1a10,#123a1c);border-color:#2ecc7166}.npl-live.done .lv-h b{color:#7ee2a2}.npl-live.done .lv-h b::before{background:#2ecc71;animation:none}.npl-live.done .lv-s{font-size:14px;color:#fff;font-weight:700}
.npl-live .lv-p{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;margin-top:8px;padding-top:8px;border-top:1px solid #ffffff1f}.npl-live .lv-p+.lv-p{border-top:0;padding-top:0;margin-top:4px}.npl-live .lv-p b{font-weight:800}.npl-live .lv-p small{color:#ffffffa0;margin-left:2px}
.npl-live .lv-b{display:flex;align-items:center;gap:5px;margin-top:8px;flex-wrap:wrap}.npl-live .lv-b small{font-size:11px;color:#ffffffa0;margin-right:4px}.npl-live .lv-b i{font-style:normal;min-width:24px;height:24px;padding:0 4px;border-radius:12px;display:inline-grid;place-items:center;font-size:12px;font-weight:800;background:#ffffff1f}.npl-live .lv-b i.b4{background:#2e86de}.npl-live .lv-b i.b6{background:#8e44ad}.npl-live .lv-b i.bw{background:#FF3B30}
@keyframes liveIn{from{opacity:0;transform:translateY(-8px)}}@keyframes flash{0%{color:#FFD23F;transform:scale(1.25)}100%{transform:none}}
/* list pages: numbered pages */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0 0 36px}.pager a,.pager b{min-width:42px;height:42px;padding:0 14px;display:inline-grid;place-items:center;border-radius:999px;font-weight:700;font-size:15px}
.pager a{background:var(--surface);border:1px solid var(--line);color:var(--ink2);transition:background .2s,color .2s}.pager a:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}.pager b{background:var(--ink);color:var(--bg)}.pager i{color:var(--muted);font-style:normal}
/* 🏏 NPL hub */
.hub{margin:8px 0 26px}
.hub-head{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-radius:22px;padding:58px 32px 120px;margin-bottom:20px;background:#081233;min-height:300px}
.hh-photo{position:absolute;inset:0;z-index:-4;background:center 78%/cover no-repeat;opacity:.6;animation:drift 26s ease-in-out infinite alternate}
.hub-head::before{content:'';position:absolute;inset:0;z-index:-3;background:linear-gradient(105deg,#06123aF2 0%,#0a1f5ccc 38%,#7d0d2b99 72%,#dc143c80 100%);background-size:220% 220%;animation:npg 16s ease-in-out infinite}
.hub-head::after{content:'';position:absolute;z-index:-2;width:340px;height:340px;right:6%;top:-120px;border-radius:50%;background:radial-gradient(circle,#ffd23f8c,#ff8a3d33 45%,transparent 70%);animation:sun 7s ease-in-out infinite alternate}
.himal{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:130px;z-index:-1}.himal .far{fill:#7f97d6;opacity:.55;transform-origin:center bottom;animation:range 22s ease-in-out infinite alternate}.himal .snow{fill:#fff;animation:snow 4s ease-in-out infinite alternate;transform-origin:center bottom}.himal .near{fill:#081233;opacity:.92}
.hh-txt{position:relative;max-width:900px;animation:rise .8s cubic-bezier(.2,.8,.2,1) backwards}
.hh-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.3px;padding:6px 14px;border-radius:999px;background:#ffffff1f;border:1px solid #ffffff33;backdrop-filter:blur(6px);margin-bottom:12px}
.hub-head h1{font-family:'Baloo 2',sans-serif;font-size:clamp(30px,4.2vw,58px);line-height:1.08;background:linear-gradient(90deg,#FFD23F 0%,#fff6cf 25%,#FFD23F 50%,#ff9f5a 75%,#FFD23F 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite;filter:drop-shadow(0 3px 14px #0008)}
.hub-head p{color:#ffffffd9;margin-top:10px;font-size:16.5px;max-width:720px;text-shadow:0 1px 8px #0009}
.hh-credit{position:absolute;right:14px;bottom:8px;font-size:10.5px;color:#ffffff8c;z-index:1}.hh-credit:hover{color:#fff}
.lungta{position:absolute;top:0;left:-10px;right:-10px;height:40px;display:flex;justify-content:space-between;z-index:0;pointer-events:none}.lungta::before{content:'';position:absolute;left:0;right:0;top:9px;height:1.5px;background:#ffffff59}
.lungta i{position:relative;top:9px;width:clamp(16px,2.2vw,26px);height:clamp(20px,2.6vw,30px);transform-origin:50% 0;animation:sway 2.8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.23s);opacity:.9;border-radius:0 0 2px 2px}
.lungta i:nth-child(5n+1){background:#1f5fd1}.lungta i:nth-child(5n+2){background:#f4f4f4}.lungta i:nth-child(5n+3){background:#dc143c}.lungta i:nth-child(5n+4){background:#1a9b4b}.lungta i:nth-child(5n+5){background:#ffcc1a}
@keyframes npg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sun{from{transform:scale(.9);opacity:.75}to{transform:scale(1.12);opacity:1}}
@keyframes range{from{transform:translateX(-1.5%) scaleY(.96)}to{transform:translateX(1.5%) scaleY(1.04)}}
@keyframes snow{from{opacity:.75}to{opacity:1;filter:drop-shadow(0 0 6px #fff)}}
@keyframes shine{to{background-position:-200% center}}
@keyframes sway{from{transform:rotate(-7deg) skewX(-4deg)}to{transform:rotate(7deg) skewX(4deg)}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes glow{from{text-shadow:0 0 0 #ffd23f00}to{text-shadow:0 0 14px #ffd23f99}}
@keyframes sweep{0%,70%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
@media (max-width:640px){.hub-head{padding:48px 18px 100px;min-height:250px;border-radius:18px}.himal{height:90px}.hub-head p{font-size:15px}}
.hub-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-bottom:20px;align-items:start}.hub .npl-live{margin-bottom:20px}
.hub-scroll{overflow-x:auto}.hub table{min-width:520px}.hub td.tm{font-size:15px}
.hub-fx,.hub-res{list-style:none;display:grid;gap:10px}
.hub-fx li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--surface2)}.hub-fx span{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}.hub-fx span:last-of-type{flex-direction:row-reverse;text-align:right}.hub-fx span:last-of-type .tl{margin:0 0 0 8px}
.hub-fx b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-fx i{font-style:normal;font-size:12px;color:var(--muted)}.hub-fx time{grid-column:1/-1;text-align:center;font-size:13px;color:var(--muted)}
.hub-res li{padding:12px;border-radius:14px;background:var(--surface2);display:grid;gap:6px}.hub-res li>div{display:flex;align-items:center;gap:8px;font-size:15px}.hub-res li>div b{flex:1;font-weight:600}.hub-res li>div span{font:800 20px 'Baloo 2',sans-serif}.hub-res li>div span small{font:500 12px 'Mukta',sans-serif;color:var(--muted)}
.hub-res li>div.w span{color:var(--ink);background:color-mix(in srgb,var(--brand) 45%,transparent);border-radius:8px;padding:0 6px}.hub-res p{font-size:14px;color:var(--muted);font-weight:600}
.hub-h3{font:800 16px 'Baloo 2',sans-serif;margin:10px 0 4px}.hub .top5 span{display:flex;align-items:center}
ol.top5 .pl{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:8px;align-items:start}ol.top5 .pl>b{width:32px;height:32px;border-radius:9px;background:var(--surface2);display:grid;place-items:center;font:800 17px 'Baloo 2',sans-serif}ol.top5 li:first-child .pl>b{background:var(--brand);color:var(--brand-ink)}
@media (min-width:1101px){.hub-grid.fit{align-items:stretch}.hub-grid.fit>.box:last-child{position:relative;display:flex;flex-direction:column;min-height:0}.hub-grid.fit .hub-fx{position:absolute;top:64px;left:16px;right:16px;bottom:16px;overflow-y:auto;align-content:start;padding-right:4px;scrollbar-width:thin}}
.hub-grid>*,.hub{min-width:0}.hub-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.hub-sec2{margin-top:26px}.hub-facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hub-facts li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface2)}.hub-facts .fi{font-size:22px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--brand) 22%,transparent);flex:none}
.hub-facts div{min-width:0}.hub-facts small{display:block;font-size:12px;color:var(--muted)}.hub-facts b{font:800 19px 'Baloo 2',sans-serif;line-height:1.2}.hub-facts b small{display:inline;font:600 13px 'Mukta',sans-serif;margin-left:4px}
.hub-lead{display:grid;grid-template-columns:1fr 1fr;gap:20px}.hub-lead .hub-h3{margin-top:0}
@media (max-width:640px){.hub-lead{grid-template-columns:1fr}}
@media (max-width:1100px){.hub-grid{grid-template-columns:1fr}}
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
/* big screens (1600px+): a 4th card column, wider sidebar, a less tall top story; category rows show their 4th card */
.grid.row>:nth-child(4),.grid.row>:nth-child(5){display:none}.cols.full .grid.row>:nth-child(4){display:flex}
@media (min-width:1600px){.cols.full .grid.row>:nth-child(5){display:flex}}
@media (max-width:860px){.grid.row>:nth-child(4){display:flex}.cols.full .grid.row>:nth-child(5){display:none}}
@media (min-width:1600px){.grid{grid-template-columns:repeat(4,1fr)}.cols.full .grid{grid-template-columns:repeat(5,1fr)}.grid.row>:nth-child(4){display:flex}.cols{grid-template-columns:minmax(0,1fr) 380px}.cols.narrow{grid-template-columns:minmax(0,860px) 380px}.hero{aspect-ratio:16/9}.cols.narrow .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.cols,.cols.narrow{grid-template-columns:1fr}aside.side{display:grid;grid-template-columns:1fr 1fr;align-items:start}.cols.full .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.top-sec{grid-template-columns:1fr}.grid,.cols.full .grid{grid-template-columns:1fr 1fr}.sbox,.follow a span{display:none}.follow a{width:34px;height:34px;padding:0;justify-content:center}.follow{gap:6px}nav.cats a.find{display:inline-block}.sres{grid-template-columns:1fr}.bar{gap:8px}}
@media (max-width:560px){.grid,.cols.full .grid{grid-template-columns:1fr}aside.side{grid-template-columns:1fr}article.post{padding:20px 16px;border-radius:0;margin:0 -16px 24px}.cols article.post{margin:0 -16px}article.post h1{font-size:28px}body{font-size:17px}
.hero{aspect-ratio:4/5}.hero .txt{padding:20px}.logo{font-size:24px}.logo img{width:34px;height:34px}.logo small{display:none}.mini{grid-template-columns:104px minmax(0,1fr)}.mini h3{font-size:17px}.ico{width:34px;height:34px}}
@media (max-width:380px){.follow a:nth-child(n+3){display:none}}
/* ===================== ✨ digital / 3D layer (2026-10-28) =====================
   only transform + opacity move (cheap on phones); no live blur, no fixed animated layers – the page scrolls smoothly.
   app.js adds the mouse tilt (.t3d + --rx/--ry/--mx/--my/--px/--py) and the video carousel's 3D positions. */
body{background:radial-gradient(1100px 520px at 0% -8%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 60%),radial-gradient(900px 480px at 100% 0%,#7b5cff1c,transparent 60%),var(--bg);background-repeat:no-repeat}
/* the top story arrives in 3D, the side stories slide in after it */
.top-sec{perspective:1400px}
.top-sec .hero{animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 100%}
.top-sec .side-list .mini{animation:sideIn .7s cubic-bezier(.2,.8,.2,1) both}
.top-sec .side-list .mini:nth-child(2){animation-delay:.08s}.top-sec .side-list .mini:nth-child(3){animation-delay:.16s}.top-sec .side-list .mini:nth-child(4){animation-delay:.24s}
@keyframes heroIn{from{opacity:0;transform:rotateX(12deg) translateY(40px) scale(.96)}}
@keyframes sideIn{from{opacity:0;transform:perspective(900px) rotateY(-18deg) translateX(40px)}}
/* depth inside the top story: the photo drifts away from the pointer, the headline floats towards it */
.hero .pic,.hero .txt{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero.t3d .pic{transform:translate3d(calc(var(--px,0) * -26px),calc(var(--py,0) * -18px),0) scale(1.06)}
.hero.t3d .txt{transform:translate3d(calc(var(--px,0) * 14px),calc(var(--py,0) * 10px),0)}
/* a yellow underline grows under the top headline (a shine through the text made it look grey on photos) */
.hero h1{position:relative;padding-bottom:12px}
.hero h1::after{content:'';position:absolute;left:0;bottom:0;height:5px;width:110px;border-radius:5px;background:linear-gradient(90deg,var(--brand),var(--red));transform-origin:0 50%;animation:lineGrow 1s cubic-bezier(.2,1.4,.4,1) .7s both}
@keyframes lineGrow{from{transform:scaleX(0)}}
/* Haikei-style layered waves above the footer (inline SVG, no image file) */
footer{position:relative;margin-top:70px}
footer::before{content:'';position:absolute;left:0;right:0;top:-68px;height:70px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c160-30 320-30 480 0s320 30 480 0 320-30 480 0v30H0z' fill='%23FFD23F' fill-opacity='.18'/%3E%3Cpath d='M0 52c180-22 360-22 540 0s360 22 540 0 270-18 360 0v18H0z' fill='%23FF3B30' fill-opacity='.14'/%3E%3Cpath d='M0 60c240-14 480-14 720 0s480 14 720 0v10H0z' fill='%23FFD23F' fill-opacity='.28'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
/* cards: 3D tilt + a light that follows the pointer + a coloured edge */
.card,.mini,.tile,.vcard{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card.t3d,.mini.t3d,.tile.t3d{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px);box-shadow:0 22px 50px #0005,0 0 0 1px color-mix(in srgb,var(--brand) 55%,transparent)}
.card::after,.mini::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#ffffff26,transparent 45%);opacity:0;transition:opacity .3s}
.card,.mini{position:relative}.card.t3d::after,.mini.t3d::after{opacity:1}
.card.t3d .pic img{transform:scale(1.08)}
/* cards rise up in 3D as they scroll into view (never from invisible) */
@keyframes rise3d{from{opacity:.45;transform:perspective(900px) rotateX(18deg) translateY(34px) scale(.95)}}
@supports (animation-timeline:view()){.grid .card{animation:rise3d linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
  .sec-row{animation:secIn linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}
@keyframes secIn{from{opacity:.3;transform:translateX(-24px)}}
h2.sec::before{background:linear-gradient(180deg,var(--brand),var(--red));box-shadow:0 0 14px color-mix(in srgb,var(--brand) 60%,transparent)}
nav.cats a{transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
nav.cats a:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0003}
.chip{box-shadow:0 0 0 0 transparent}.chip.red{animation:redGlow 1.8s ease-in-out infinite}
@keyframes redGlow{50%{box-shadow:0 0 0 6px #ff3b3024}}
/* 🎬 page change: the tapped story's picture grows into the article's picture (app.js names it "pic" on tap),
   the page slides in, the top bar stays; a yellow line runs while the next page loads */
::view-transition-old(root){animation:.22s ease-out both vtOut}::view-transition-new(root){animation:.4s cubic-bezier(.2,.8,.2,1) both vtIn}
@keyframes vtOut{to{opacity:0;transform:translateX(-28px) scale(.985)}}@keyframes vtIn{from{opacity:0;transform:translateX(36px)}}
::view-transition-group(pic){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(pic),::view-transition-new(pic){height:100%;object-fit:cover;overflow:hidden}
article.post .photo img,article.post .video{view-transition-name:pic}
.navbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--brand),var(--red));box-shadow:0 0 10px var(--brand);transition:width 6s cubic-bezier(.08,.8,.2,1)}
.navbar.go{width:88%}
/* 🧰 tools pages */
nav.cats a.tl-nav{color:var(--ink);font-weight:700;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.tool,.tools-hub{max-width:980px;margin:12px auto 26px}
.tool-h{display:flex;align-items:center;gap:16px;margin-bottom:18px}.tool-i{font-size:44px;width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:22px;background:linear-gradient(135deg,var(--brand),#ff9f43);box-shadow:0 14px 30px color-mix(in srgb,var(--brand) 35%,transparent);animation:heroIn .8s cubic-bezier(.2,.8,.2,1) both}
.tool-h h1,.tools-hub h1{font:800 clamp(26px,3vw,36px)/1.15 'Baloo 2',sans-serif}.tool-h p{color:var(--ink2);margin-top:4px}
.tool-card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:20px;margin-bottom:16px;animation:rise3d .6s cubic-bezier(.2,.8,.2,1) both}
.tool-card h2{font:800 20px 'Baloo 2',sans-serif;margin-bottom:12px}
.tool-g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tool-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.tool-row label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--ink2);min-width:110px}.tool-row label.grow{flex:1;min-width:160px}
.tool-row input,.tool-row select{font:600 18px 'Mukta',sans-serif;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);min-height:52px;width:100%;transition:border-color .2s,box-shadow .2s}
.tool-row input:focus,.tool-row select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent)}
.tool-swap{min-height:52px;width:52px;border-radius:14px;border:0;background:var(--brand);color:#121212;font-size:22px;cursor:pointer;transition:transform .3s}.tool-swap:hover{transform:rotate(180deg)}
.tool-out,.tool-big{margin-top:14px;padding:16px;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 22%,var(--surface2)),var(--surface2));display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.tool-out b,.tool-big b{font:800 clamp(22px,3vw,30px)/1.2 'Baloo 2',sans-serif}.tool-big>div{display:grid;gap:2px}.tool-big small{color:var(--ink2);font-size:13px}
.tool-copy{margin-left:auto;font:700 13px 'Mukta',sans-serif;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:14px}.tool-grid div{padding:12px;border-radius:14px;background:var(--surface2);display:grid;gap:2px}.tool-grid b{font:800 19px 'Baloo 2',sans-serif;word-break:break-word}.tool-grid small{color:var(--muted)}
.tool-table{margin-top:14px;overflow-x:auto}.tool-table table{width:100%;border-collapse:collapse;font-size:15px}.tool-table th{font-size:12px;color:var(--muted);text-align:right;padding:6px}.tool-table th:first-child,.tool-table td:first-child{text-align:left}.tool-table td{padding:8px 6px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}.tool-table tr.on td{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.dc-today{display:grid;gap:2px;padding:18px 20px;margin-bottom:16px;border-radius:20px;background:linear-gradient(120deg,#ffd23f,#ff9f43);color:#121212;box-shadow:var(--shadow)}.dc-today small{font-weight:700;opacity:.75}.dc-today b{font:800 clamp(24px,3.4vw,34px)/1.15 'Baloo 2',sans-serif}
.dc-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.dc-cal-h b{font:800 22px 'Baloo 2',sans-serif}.dc-cal-h button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font-size:20px;cursor:pointer}
.dc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.dc-cal i{font-style:normal;text-align:center;font-size:12px;color:var(--muted);font-weight:700}
.dc-cal span{aspect-ratio:1;border-radius:12px;background:var(--surface2);display:grid;place-items:center;align-content:center;gap:0}.dc-cal span.e{background:none}.dc-cal span b{font:800 18px 'Baloo 2',sans-serif;line-height:1}.dc-cal span small{font-size:10px;color:var(--muted)}
.dc-cal span.sat b{color:var(--red)}.dc-cal span.now{background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}.dc-cal span.now b,.dc-cal span.now small{color:#121212}
.gc-rate{display:grid;gap:4px;margin-bottom:14px;padding:12px 14px;border-radius:14px;background:var(--surface2);font-size:15px}.gc-rate b{font-size:18px;margin-left:6px}.gc-rate em{font-style:normal;font-size:13px;margin-left:6px}.gc-rate em.up{color:#16a34a}.gc-rate em.down{color:var(--red)}.gc-rate small{color:var(--muted)}
.eq-map{height:380px;border-radius:16px;overflow:hidden;margin-bottom:14px;background:var(--surface2)}.eq-list{display:grid;gap:8px}
.eq{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface2)}.eq b{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 18px 'Baloo 2',sans-serif}.eq span{display:grid}.eq small{color:var(--muted);font-size:12px}
.hol-list{display:grid;gap:8px}
.tool-faq{max-width:980px;margin:0 auto 18px}.tool-faq details{background:var(--surface);border-radius:14px;padding:14px 16px;margin-bottom:8px;box-shadow:var(--shadow)}.tool-faq summary{cursor:pointer;font-weight:700}.tool-faq p{margin-top:8px;color:var(--ink2)}
.tool-more{max-width:980px;margin:0 auto 34px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tool-more b{margin-right:4px}.tool-more a{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;transition:background .2s,transform .2s}.tool-more a:hover{background:var(--brand);color:#121212;transform:translateY(-2px)}
.tools-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.tool-tile{display:grid;gap:6px;padding:20px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:rise3d .6s cubic-bezier(.2,.8,.2,1) both}
.tool-tile:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--shadow-up)}.tool-tile span{font-size:36px}.tool-tile b{font:800 20px 'Baloo 2',sans-serif}.tool-tile small{color:var(--ink2);font-size:14px;line-height:1.4}
@media (max-width:700px){.tool-g2{grid-template-columns:1fr}.tool-row label{flex:1}.eq-map{height:280px}}
/* 🕐 world clock, ♈ rashifal box, ⚠️ weather / air alert bar, 🗳️ NPL predictions */
.wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wc-grid.big{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.wc{padding:10px 12px;border-radius:12px;background:var(--surface2);display:grid;gap:1px}.wc .c{font-weight:700;font-size:14px}.wc .t{font:800 22px 'Baloo 2',sans-serif;font-variant-numeric:tabular-nums;line-height:1.15}.wc small{color:var(--muted);font-size:11px}
.wc.home{background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 30%,var(--surface2)),var(--surface2))}.wc-grid.big .wc{padding:16px}.wc-grid.big .wc .t{font-size:32px}
.rf-g{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}.rf-g button{display:grid;place-items:center;gap:0;padding:6px 0;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);cursor:pointer;transition:transform .2s,background .2s}
.rf-g button span{font-size:20px}.rf-g button small{font-size:11px}.rf-g button.on,.rf-g button:hover{background:var(--brand);color:#121212;transform:translateY(-2px)}.rf-t{font-size:15px;line-height:1.55;animation:vtIn .3s both}.rf-t small{display:block;color:var(--muted);margin-top:4px}
.wbar[hidden]{display:none!important}.wbar{display:flex;align-items:center;gap:10px;padding:9px clamp(16px,2vw,32px);background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#121212;font-weight:700;font-size:15px}.wbar.air{background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff}
.pred{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}.pred small{color:var(--muted);font-weight:700}
.pred button{font:700 13px 'Mukta',sans-serif;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}.pred button:hover{border-color:var(--brand);transform:translateY(-1px)}
.pred.done button{cursor:default}.pred.done button.me{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 25%,var(--surface))}.pred em{font-style:normal;font-size:13px;color:var(--ink2)}
.pred-res{font-size:13px;font-weight:700;color:var(--ink2);margin-top:4px}
/* 🗳️ article poll */
.poll{margin-top:22px;padding:18px;border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 16%,var(--surface2)),var(--surface2));box-shadow:var(--shadow)}
.poll>b{display:block;font:800 20px/1.3 'Baloo 2',sans-serif;margin-bottom:12px}.po-o{display:grid;gap:10px}
.po-o button{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:700 16px 'Mukta',sans-serif;cursor:pointer;text-align:left;transition:border-color .2s,transform .2s}
.po-o button:hover{border-color:var(--brand);transform:translateY(-2px)}.po-l{position:relative;z-index:1;flex:1}
.po-o i{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--brand) 45%,transparent);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.po-o em{position:relative;z-index:1;font-style:normal;font-weight:800}.poll.done button{cursor:default;transform:none}.poll.done button.me{border-color:var(--brand)}
.po-n{display:block;margin-top:8px;color:var(--muted)}
/* 🏏 NPL match pages + player pages */
.mt-link{display:inline-block;margin:8px 8px 0 0;font:700 13px 'Mukta',sans-serif;color:var(--brand-ink);background:var(--brand);border-radius:999px;padding:6px 14px}
.mt-sc{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:18px 0 10px;padding:18px;border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 14%,var(--surface2)),var(--surface2))}
.mt-t{display:grid;justify-items:center;text-align:center;gap:4px}.mt-t b{font:800 18px/1.2 'Baloo 2',sans-serif}.mt-t .mt-r{font:800 34px/1 'Baloo 2',sans-serif}.mt-t small{color:var(--muted)}
.mt-t em{font-style:normal;font-size:13px;font-weight:800;color:var(--brand-ink);background:var(--brand);border-radius:999px;padding:1px 10px}.mt-t.w .mt-r{color:color-mix(in srgb,var(--brand) 70%,var(--ink))}
.tl.big{width:64px;height:64px;margin:0;font-size:30px}.mt-vs{font:800 22px 'Baloo 2',sans-serif;color:var(--muted);font-style:normal}
.mt-res{font-weight:700;font-size:19px;text-align:center}
.mt-potm{display:flex;align-items:center;gap:14px;margin:14px 0;padding:12px 16px;border-radius:16px;background:linear-gradient(100deg,#ffd23f33,transparent)}.mt-potm img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#0002}.mt-potm small{display:block;color:var(--muted)}.mt-potm b{font:800 22px 'Baloo 2',sans-serif}
.mt-heroes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.mt-heroes ul{list-style:none;display:grid;gap:8px}
.mt-heroes a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:var(--surface2)}.mt-heroes a span{flex:1;min-width:0}.mt-heroes b{display:block;font-size:16px}.mt-heroes small{color:var(--muted);font-size:12px}.mt-heroes em{font-style:normal;font:800 20px 'Baloo 2',sans-serif}
.mt-inn{margin:0 0 22px}.mt-inn h3{display:flex;align-items:center;gap:8px;font:800 20px 'Baloo 2',sans-serif;margin-bottom:8px}.mt-inn h3 span{margin-left:auto;font-size:18px}
.mt-tb{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 10px;table-layout:fixed}.mt-tb th{font-size:12px;color:var(--muted);text-align:right;padding:6px 4px;border-bottom:1px solid var(--line)}.mt-tb th:first-child,.mt-tb td:first-child{text-align:left;width:46%}
.mt-tb td{text-align:right;padding:7px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}.mt-tb td a{text-decoration:underline;text-underline-offset:2px}.mt-tb td small{display:block;color:var(--muted);font-size:11px}
.pp-h{display:flex;align-items:center;gap:16px;margin:12px 0}.pp-h h1{margin:0}
.pp-st{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:14px 0 22px}.pp-st div{padding:14px 10px;border-radius:14px;background:var(--surface2);text-align:center;display:grid}.pp-st b{font:800 26px 'Baloo 2',sans-serif}.pp-st small{color:var(--muted);font-size:12px}
@media (max-width:560px){.mt-heroes{grid-template-columns:1fr}.mt-t .mt-r{font-size:28px}}
/* 🌍 earthquake bar (USGS, M4+ in/near Nepal, last 24 h) and 📣 Telegram join bar */
.quake[hidden]{display:none!important}
.quake{display:flex;align-items:center;gap:10px;padding:9px clamp(16px,2vw,32px);background:linear-gradient(90deg,#b91c1c,#ef4444);color:#fff;font-weight:700;font-size:15px}
.quake::before{content:'🌍';animation:qShake .5s ease-in-out infinite}.quake a{color:#fff;text-decoration:underline;margin-left:auto;font-size:13px;white-space:nowrap}
@keyframes qShake{25%{transform:translateX(-2px) rotate(-8deg)}75%{transform:translateX(2px) rotate(8deg)}}
.tgbar{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:linear-gradient(90deg,#229ED9,#1c7fb8);color:#fff;font-size:15px;transition:filter .2s}
.tgbar:hover{filter:brightness(1.1)}.tgbar i{font-style:normal;transition:transform .2s}.tgbar:hover i{transform:translateX(4px)}
/* live boxes: sports, exchange rates, weather + air, festivals, fuel */
.lvx-b{display:grid;gap:8px}.lvx-note{font-size:12px;color:var(--muted)}
.lvx .row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface2);font-size:15px}
.lvx .row .n{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lvx .row b{font-variant-numeric:tabular-nums}
.lvx .row small{color:var(--muted);font-size:12px}
.lvx .live{color:#fff;background:var(--red);border-radius:6px;padding:0 6px;font-size:11px;font-weight:800;animation:redGlow 1.8s ease-in-out infinite}
.sp-m{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:12px;background:var(--surface2)}
.sp-m .t{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}.sp-m .t img{width:22px;height:22px;object-fit:contain}.sp-m .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-m b{text-align:right;font-variant-numeric:tabular-nums}.sp-m .d{grid-column:1/-1;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.wx-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wx-c{padding:10px 12px;border-radius:12px;background:var(--surface2);display:grid;gap:2px}
.wx-c .c{font-weight:700}.wx-c .t{font:800 22px 'Baloo 2',sans-serif;line-height:1.1}.wx-c .q{justify-self:start;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;color:#121212}
.hol{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface2)}.hol .dd{flex:none;width:52px;text-align:center;border-radius:10px;padding:4px 0;background:color-mix(in srgb,var(--brand) 25%,transparent)}
.hol .dd b{display:block;font:800 22px/1 'Baloo 2',sans-serif}.hol .dd small{font-size:11px}.hol .n{font-weight:700;line-height:1.3}.hol .n small{display:block;font-weight:400;color:var(--muted);font-size:13px}
.fu-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}.fu-g div{padding:10px 8px;border-radius:12px;background:var(--surface2);text-align:center;display:grid}.fu-g b{font:800 18px 'Baloo 2',sans-serif}.fu-g small{font-size:11px;color:var(--muted)}
/* 📅 today in BS with the day – a pill in the top bar on laptops; on phones it sits in the line under the ticker */
.hdate{flex:none;margin-left:6px;padding:6px 14px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff1f;color:#fff;font:600 14px 'Mukta',sans-serif;white-space:nowrap}
.hdate::before{content:'📅 '}
@media (min-width:861px){.dayline .dd{visibility:hidden}}
@media (max-width:860px){.hdate{display:none}}
/* 📅 date + Kathmandu weather line */
.dayline{display:flex;justify-content:space-between;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:14px;color:var(--muted);padding-top:10px}.dayline b{color:var(--ink);font-weight:700}.dayline [data-wx]{margin-left:auto}.dayline .sun{white-space:nowrap}
/* 📺 video carousel – a 3D cover-flow: the middle video big and facing you, the others turned away.
   The columns may never grow to fit it: on phones the 12-card row stretched the whole page to 3,000 px wide */
.cols>*,.cols>main,.vids,.top-sec>*{min-width:0}
@media (max-width:1100px){.cols,.cols.narrow{grid-template-columns:minmax(0,1fr)}}
.vids{margin:0 0 34px;max-width:100%;overflow:hidden}
.vtrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px calc(50% - 115px) 30px;perspective:1100px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -8px}
.vtrack::-webkit-scrollbar{display:none}
.vcard{flex:none;width:230px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;position:relative;scroll-snap-align:center;background:#111;box-shadow:0 20px 45px #0006;transform:rotateY(var(--vr,0deg)) translateZ(var(--vz,0px)) scale(var(--vs,1));opacity:var(--vo,1);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.vcard img{width:100%;height:100%;object-fit:cover}
.vcard::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#000000e6);z-index:1}
.vcard b{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;color:#fff;font:800 18px/1.25 'Baloo 2',sans-serif;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vplay{position:absolute;top:50%;left:50%;z-index:2;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--brand);color:#121212;display:grid;place-items:center;font-size:22px;padding-left:4px;box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 70%,transparent);animation:vpulse 2s ease-out infinite}
@keyframes vpulse{70%{box-shadow:0 0 0 18px transparent}}
.vcard.on .vplay{transform:scale(1.12)}
.vnav{display:flex;gap:8px}.vnav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer;transition:background .2s,transform .2s}.vnav button:hover{background:var(--brand);color:#121212;transform:scale(1.08)}
/* 📱 phone: live NPL score + today's market right under the top story (moved here by app.js) */
.qs{display:none}
/* 📰 ad space between sections (only when an AdSense ad unit is set) */
.adbox{margin:0 0 34px;padding:10px;border-radius:16px;background:var(--surface);border:1px dashed var(--line);min-height:120px}.adbox small{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
/* ➡️ next story + big share buttons on story pages */
.nextc{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;margin:24px 0 6px;padding:12px;border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 22%,var(--surface)),var(--surface));box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.nextc:hover{transform:translateY(-4px);box-shadow:var(--shadow-up)}.nextc img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.nextc small{display:block;font-weight:800;color:var(--muted);letter-spacing:.02em}.nextc b{font:800 21px/1.25 'Baloo 2',sans-serif}
.share{gap:10px}.share a,.share button{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-size:15px;border:0;color:#fff;transition:transform .2s,box-shadow .2s}
.share a:hover,.share button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0003;color:#fff}
.share .wa{background:#25D366}.share .vb{background:#7360F2}.share .fb{background:#1877F2}.share .ms{background:#0084FF}.share .x{background:#111}.share .cp,.share .nt{background:var(--head)}
.share .nt{display:none}
@media (max-width:1100px){.qs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0;padding:2px 2px 6px;scrollbar-width:none}.qs::-webkit-scrollbar{display:none}
  .qs>*{flex:0 0 min(88%,420px);scroll-snap-align:start;margin:0}.qs:not(:has(>:not([hidden]))){display:none}}
@media (max-width:860px){.vcard{width:200px}.vtrack{padding-left:calc(50% - 100px);padding-right:calc(50% - 100px)}.share .nt{display:inline-flex}.share .ms{display:inline-flex}}
@media (min-width:861px){.share .ms{display:none}}
/* 🧢 orange cap (most runs) / purple cap (most wickets) on the NPL leaders */
.top5 li.capped{position:relative;border-radius:14px;background:linear-gradient(100deg,var(--capc),transparent 70%)}
.top5 li.capped{margin-top:10px}.top5 li.capped>.cap{position:absolute;right:-4px;top:-14px;margin:0;z-index:1}.top5 li.capped.orange{--capc:#ff8a0033;--cap1:#ff9a1f;--cap2:#e85d04}.top5 li.capped.purple{--capc:#8b5cf633;--cap1:#a855f7;--cap2:#6d28d9}
.cap{position:relative;display:inline-block;flex:none;width:46px;height:29px;margin-left:8px;vertical-align:-6px;animation:capBob 2.6s ease-in-out infinite}
.cap svg{width:100%;height:100%;overflow:visible;animation:capGlow 2.6s ease-in-out infinite}
.cap .crown{fill:var(--cap1)}.cap .peak{fill:var(--cap2)}.cap .band{fill:var(--cap2);opacity:.75}.cap .btn{fill:var(--cap2)}
.cap .seam{fill:none;stroke:#00000038;stroke-width:1.6;stroke-linecap:round}.cap .badge{fill:#fff;opacity:.92}.cap .star{fill:var(--cap2)}
.cap .shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:0;animation:capShine 2.6s ease-in-out infinite}
.capname{font-style:normal;font-weight:800;color:var(--cap2)}
@keyframes capBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
@keyframes capShine{40%,60%{opacity:.9}}
@keyframes capGlow{0%,100%{filter:drop-shadow(0 3px 4px #0005)}50%{filter:drop-shadow(0 3px 4px #0005) drop-shadow(0 0 7px var(--cap1))}}
/* 🏏 loading the live score: a bat swings, the ball bounces */
.lv-load{display:flex;align-items:center;justify-content:center;gap:16px;min-height:150px;color:var(--muted);font-weight:700}
.lv-load svg{width:92px;height:70px;overflow:visible}.lv-load .bat{transform-origin:18px 60px;animation:batSwing 1.1s cubic-bezier(.5,0,.3,1) infinite}
.lv-load .ball{animation:ballBounce 1.1s cubic-bezier(.3,0,.6,1) infinite}
@keyframes batSwing{0%,100%{transform:rotate(-38deg)}45%{transform:rotate(28deg)}}
@keyframes ballBounce{0%{transform:translate(70px,-30px)}45%{transform:translate(24px,8px)}100%{transform:translate(78px,-34px)}}
/* 💥 match moments over the page: SIX, FOUR, OUT, DUCK (app.js plays them; ?fx=six|four|wicket|duck previews) */
.cfx{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center;perspective:1000px}
.cfx .st{position:relative;width:min(520px,92vw);height:330px;border-radius:28px;overflow:hidden;animation:fxIn .45s cubic-bezier(.2,1.4,.4,1) both,fxOut .4s ease-in 2.8s forwards}
.cfx .bg{position:absolute;inset:0;border-radius:28px;background:radial-gradient(circle at 50% 40%,var(--fx1),var(--fx2));box-shadow:0 30px 80px #000a,0 0 0 3px #ffffff30 inset;overflow:hidden}
.cfx .bg::after{content:'';position:absolute;inset:-50%;background:repeating-conic-gradient(#ffffff18 0 10deg,transparent 10deg 20deg);animation:rays 6s linear infinite}
.cfx .big{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#fff;font:900 68px/1 'Baloo 2',sans-serif;text-shadow:0 6px 0 #0004,0 0 30px #fff8;animation:bigPop .6s cubic-bezier(.2,1.6,.4,1) .35s both}
.cfx .big small{display:block;font:800 20px 'Mukta',sans-serif;letter-spacing:.06em;opacity:.95;margin-top:6px}
.cfx svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cfx.wicket .big,.cfx.duck .big{top:24px;bottom:auto}
.cfx.six{--fx1:#ffd23f;--fx2:#ff6a00}.cfx.four{--fx1:#3ddc97;--fx2:#0f7b5a}.cfx.wicket{--fx1:#ff5a5a;--fx2:#8b0000}.cfx.duck{--fx1:#8ec5ff;--fx2:#2b4a8b}
.cfx .bat{transform-origin:150px 250px;animation:hit .5s cubic-bezier(.5,0,.2,1) .1s both}
.cfx.six .ball{animation:fly6 1.1s cubic-bezier(.2,.6,.4,1) .35s both}.cfx.four .ball{animation:roll4 1.2s cubic-bezier(.3,.4,.3,1) .35s both}
.cfx .trail{stroke-dasharray:400;stroke-dashoffset:400;animation:trail .9s ease-out .4s forwards}
.cfx .conf i{position:absolute;top:40%;left:50%;width:10px;height:14px;border-radius:2px;animation:conf 1.4s ease-out .4s both}
.cfx .stump{transform-origin:50% 100%;transform-box:fill-box}.cfx .s1{animation:st1 .8s ease-out .55s both}.cfx .s3{animation:st3 .8s ease-out .55s both}
.cfx .bail{transform-box:fill-box;transform-origin:50% 50%}.cfx .b1{animation:bail1 1s ease-out .5s both}.cfx .b2{animation:bail2 1s ease-out .5s both}
.cfx.wicket .ball{animation:hitStumps .55s ease-in both}.cfx.wicket .st{animation:fxIn .45s cubic-bezier(.2,1.4,.4,1) both,shake .5s .55s,fxOut .4s ease-in 2.8s forwards}
.cfx .duckw{animation:walk 2.6s linear .2s both}.cfx .duckb{animation:waddle .35s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
.cfx .tear{animation:tear 1s ease-in .8s infinite}
@keyframes fxIn{from{opacity:0;transform:rotateX(55deg) scale(.6)}}@keyframes fxOut{to{opacity:0;transform:translateY(-30px) scale(.9)}}
@keyframes rays{to{transform:rotate(360deg)}}@keyframes bigPop{from{opacity:0;transform:scale(.3) rotate(-8deg)}}
@keyframes hit{from{transform:rotate(-70deg)}to{transform:rotate(35deg)}}
@keyframes fly6{from{transform:translate(0,0) scale(1)}to{transform:translate(330px,-330px) scale(.35)}}
@keyframes roll4{0%{transform:translate(0,0)}100%{transform:translate(300px,52px) rotate(720deg)}}
@keyframes trail{to{stroke-dashoffset:0}}
@keyframes conf{to{transform:translate(var(--cx),var(--cy)) rotate(var(--cr));opacity:0}}
@keyframes hitStumps{from{transform:translate(-260px,10px)}to{transform:translate(0,0)}}
@keyframes st1{to{transform:rotate(-24deg) translateX(-10px)}}@keyframes st3{to{transform:rotate(28deg) translateX(12px)}}
@keyframes bail1{to{transform:translate(-90px,-140px) rotate(-540deg);opacity:0}}@keyframes bail2{to{transform:translate(110px,-150px) rotate(620deg);opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes walk{from{transform:translateX(-170px)}to{transform:translateX(260px)}}@keyframes waddle{50%{transform:rotate(7deg) translateY(-3px)}}
@keyframes tear{from{transform:translateY(0);opacity:1}to{transform:translateY(16px);opacity:0}}
/* 📱 phones and tablets (touch): the same motion without real 3D layers or page-change photo morphs – iPhones (Safari
   and Chrome, both WebKit) close a tab that holds too many 3D layers ("restart Chrome / the device") */
@media (hover:none),(max-width:860px){
  @view-transition{navigation:none}
  .card,.mini,.tile,.vcard{transform-style:flat}
  .card::after,.mini::after{display:none}
  .top-sec{perspective:none}
  .top-sec .hero{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both}.top-sec .side-list .mini{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
  .hero .pic i{animation:none}
  .vtrack{perspective:none}.vcard{transform:scale(var(--vs,1))}
  .tool-card,.tool-tile,.tool-i{animation:none}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
@supports (animation-timeline:view()){@media (hover:none),(max-width:860px){.grid .card{animation:fadeUpSoft linear both;animation-timeline:view();animation-range:entry 0% entry 30%}.sec-row{animation:none}}}
@keyframes fadeUpSoft{from{opacity:.55;transform:translateY(14px)}}
/* compact story lists on phones: picture left, headline right – about 3× as many stories per screen */
@media (max-width:560px){.grid{gap:12px}.grid .card{flex-direction:row;align-items:stretch;border-radius:14px}
  .grid .card .pic{flex:0 0 36%;aspect-ratio:4/3;min-height:0;height:auto;align-self:center;margin-left:8px;border-radius:10px}.grid .card .pic img{position:absolute;inset:0}.grid .card .body{padding:10px 12px;gap:4px}
  .grid .card h3{font-size:17px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.grid .card p{display:none}.grid .card .pic .play{right:6px;bottom:6px;font-size:11px}
  .nextc{grid-template-columns:110px minmax(0,1fr)}.nextc b{font-size:18px}}
  /* ================= 🎴 3D CARDS & GAMIFICATION & MODERN NPL CSS ================= */
.card-3d-wrap{perspective:1100px;transform-style:preserve-3d;display:flex;position:relative}
.card-3d{position:relative;width:100%;border-radius:16px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .3s;will-change:transform}
.card-3d.flipped{transform:rotateY(180deg)!important}
.card-face{border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;width:100%;height:100%;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line)}
.card-front{transform-style:preserve-3d}
.card-back{position:absolute;inset:0;transform:rotateY(180deg);padding:18px;background:linear-gradient(145deg,var(--surface),var(--surface2));display:flex;flex-direction:column;justify-content:space-between;z-index:2;box-shadow:var(--shadow-up)}
.card-back .back-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.card-back .back-title{font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--ink)}
.card-back .back-facts{list-style:none;display:grid;gap:8px;font-size:14px;line-height:1.45;color:var(--ink2);margin-bottom:12px}
.card-back .back-facts li{display:flex;align-items:flex-start;gap:8px}
.card-back .back-facts li::before{content:'⚡';color:var(--brand);font-size:13px;flex:none;margin-top:2px}
.card-back .back-foot{margin-top:auto;display:flex;justify-content:flex-end}
.card-back .btn-read-full{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--brand-ink);background:var(--brand);padding:6px 14px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.card-back .btn-read-full:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,210,63,.4)}
.btn-flip-back{background:var(--surface2);border:1px solid var(--line);color:var(--ink);font:700 12px 'Mukta',sans-serif;padding:3px 10px;border-radius:999px;cursor:pointer;transition:background .2s}
.btn-flip-back:hover{background:var(--line)}
.card-glare{position:absolute;inset:0;pointer-events:none;border-radius:16px;opacity:0;transition:opacity .3s;mix-blend-mode:overlay;z-index:10;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,rgba(255,210,63,.2) 35%,transparent 70%)}
.card-3d-wrap:hover .card-glare{opacity:1}
.card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}

/* 🌈 Holographic Laser Border for Breaking & Top News */
.card-laser-border{position:relative}
.card-laser-border::before{content:'';position:absolute;inset:-2px;border-radius:18px;background:linear-gradient(90deg,#FFD23F,#ff3b30,#a855f7,#3b82f6,#10b981,#FFD23F);background-size:300% 300%;animation:laserFlow 5s linear infinite;z-index:-1}
@keyframes laserFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* 📸 Pixel-Perfect Photo Alignment (Desktop & Responsive) */
.card-front .pic{
  width:100%;
  aspect-ratio:16/10;
  flex:0 0 auto;
  background:#1e1e24 center/cover;
  position:relative;
  overflow:hidden;
  border-radius:14px 14px 0 0;
  transform:translateZ(0px);
}
.card-front .pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card-front:hover .pic img{transform:scale(1.05)}
.card-front .pic .play{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;transform:translateZ(28px);box-shadow:0 4px 10px rgba(0,0,0,.4)}

/* Photo Attribution Pill & AI Indicator */
.photo-badge{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);color:#ffffffd9;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.15);z-index:2;pointer-events:none;transform:translateZ(20px)}

/* Double-tap Like Heart Animation */
.double-tap-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:48px;color:#ff3b30;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));pointer-events:none;z-index:20;animation:heartPop .75s cubic-bezier(.175,.885,.32,1.275) forwards}
@keyframes heartPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}40%{transform:translate(-50%,-50%) scale(1.4);opacity:1}80%{transform:translate(-50%,-50%) scale(1.1);opacity:1}100%{transform:translate(-50%,-50%) scale(.8);opacity:0}}

/* Editorial Badges & Reading Time */
.card-front .body{padding:14px 16px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-front .meta{transform:translateZ(16px);display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.read-time{color:var(--muted);font-size:12px;font-weight:600}
.badge-verified{display:inline-flex;align-items:center;gap:3px;background:rgba(16,185,129,.15);color:#10B981;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;border:1px solid rgba(16,185,129,.3)}
.heat-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#ff9f43}
.card-front h3{font-family:'Baloo 2',sans-serif;font-size:20px;line-height:1.32;font-weight:700;transform:translateZ(24px);padding:2px 0}
.card-front p{font-size:15px;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transform:translateZ(12px);line-height:1.5}
.card-actions{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px;gap:8px;transform:translateZ(26px)}
.card-actions button{font:700 12.5px 'Mukta',sans-serif;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .2s,color .2s,transform .2s}
.card-actions button:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);transform:translateY(-2px)}
.card-actions .btn-collect.collected{background:linear-gradient(135deg,#FFD23F,#FF9F43);color:#121212;border-color:transparent;box-shadow:0 2px 10px rgba(255,210,63,.5)}
.btn-bookmark{padding:4px 9px!important}
.btn-bookmark.bookmarked{background:#FFD23F;color:#121212;border-color:#FFD23F}

/* 📱 Phone Layout: Alignment on small screens */
@media(max-width:640px){
  .grid .card-3d-wrap{min-height:105px;margin-bottom:6px}
  .grid .card-front .card-link{flex-direction:row-reverse;align-items:center;gap:12px;padding:10px 12px}
  .grid .card-front .pic{width:110px;height:78px;aspect-ratio:4/3;flex:0 0 110px;border-radius:10px;margin:0}
  .grid .card-front .body{padding:0;flex:1;gap:4px}
  .grid .card-front h3{font-size:15.5px;line-height:1.3;-webkit-line-clamp:3;margin:0}
  .grid .card-front p{display:none}
  .grid .card-actions{padding:2px 12px 10px}
  .grid .card-actions button{font-size:11.5px;padding:3px 10px}
}

/* Gamification HUD in Header */
.game-hud{display:flex;align-items:center;gap:6px;margin:0 4px}
.hud-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:background .2s,transform .2s,border-color .2s;user-select:none}
.hud-pill:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.streak-pill{background:linear-gradient(135deg,rgba(255,59,48,.25),rgba(255,210,63,.25));border-color:rgba(255,210,63,.4)}
.streak-pill .streak-num{color:#FFD23F}
.xp-pill{background:linear-gradient(135deg,rgba(255,210,63,.25),rgba(61,220,151,.25));border-color:rgba(255,210,63,.4)}
.xp-pill .xp-num{color:#FFD23F}
.xp-pill .rank-name{font-size:11px;opacity:.9;background:rgba(0,0,0,.35);padding:1px 6px;border-radius:6px}
.album-btn{background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(59,130,246,.25));border-color:rgba(168,85,247,.4)}
.album-btn .album-num{font-family:'Baloo 2',sans-serif;color:#c084fc}
.save-btn{background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(6,182,212,.25));border-color:rgba(16,185,129,.4)}
.save-btn .saved-num{font-family:'Baloo 2',sans-serif;color:#34d399}
@media(max-width:760px){.game-hud .xp-pill .rank-name{display:none}.sbox{display:none}}

/* Floating XP Toast */
.xp-toast{position:fixed;bottom:24px;right:24px;background:#18181b;color:#fff;border:1px solid #FFD23F;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 20px rgba(255,210,63,.3);padding:10px 18px;border-radius:999px;font:700 15px 'Mukta',sans-serif;display:flex;align-items:center;gap:8px;z-index:9999;animation:toastIn .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ⚡ Story Circles with Guaranteed Aspect Ratio */
.story-tray{display:flex;gap:14px;overflow-x:auto;padding:14px 2px 18px;margin-bottom:8px;scrollbar-width:none}
.story-tray::-webkit-scrollbar{display:none}
.story-bubble{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:76px;text-align:center;cursor:pointer}
.story-ring{width:66px;height:66px;border-radius:50%;padding:2.5px;background:linear-gradient(45deg,#FFD23F,#FF3B30,#a855f7);box-shadow:0 4px 14px rgba(255,59,48,.25);transition:transform .25s,box-shadow .25s;display:flex;align-items:center;justify-content:center;flex:none}
.story-bubble:hover .story-ring{transform:scale(1.08);box-shadow:0 6px 20px rgba(255,210,63,.45)}
.story-ring img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 25%;border-radius:50%;border:2px solid var(--bg);display:block}
.story-bubble span{font-size:12px;font-weight:600;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px}

/* 🎧 Quick Audio Listen Bar */
.audio-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(255,210,63,.15),var(--surface2));border:1px solid rgba(255,210,63,.35);padding:10px 18px;border-radius:14px;margin:16px 0}
.btn-audio{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);font:700 15px 'Mukta',sans-serif;cursor:pointer}
.audio-play-icon{width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-size:14px;box-shadow:0 3px 10px rgba(255,210,63,.4)}
.wave-bars{display:none;align-items:flex-end;gap:2px;height:16px}
.audio-bar.playing .wave-bars{display:flex}
.audio-bar.playing .audio-play-icon{background:#ef4444;color:#fff}
.wave-bars i{width:3px;background:var(--brand);border-radius:2px;animation:waveJump .8s ease-in-out infinite alternate}
.wave-bars .w1{height:8px;animation-delay:0s}.wave-bars .w2{height:16px;animation-delay:.2s}.wave-bars .w3{height:12px;animation-delay:.4s}.wave-bars .w4{height:14px;animation-delay:.1s}
@keyframes waveJump{0%{height:4px}100%{height:16px}}
.audio-dur{font-size:13px;font-weight:700;color:var(--muted)}

/* 🔤 Font Resizer */
.font-controls{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--muted);margin:10px 0}
.font-controls button{padding:2px 8px;border-radius:6px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:700 12px system-ui;cursor:pointer}
.font-controls button:hover{background:var(--brand);color:var(--brand-ink)}

/* Reading Progress Bar */
.reading-progress-bar{position:fixed;top:0;left:0;height:4px;width:0%;background:linear-gradient(90deg,var(--brand),#ff3b30,#a855f7);box-shadow:0 0 10px var(--brand);z-index:9999;transition:width .1s ease}

/* Verified Editorial Seal in Post */
.editorial-seal{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#10B981;margin:8px 0 14px}
.editorial-seal small{color:var(--muted);font-weight:500}

/* 😍 Emotional Reaction Bar */
.rx-bar{margin:28px 0;padding:18px 20px;border-radius:18px;background:var(--surface2);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.rx-title{font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:700;color:var(--ink)}
.rx-btns{display:flex;flex-wrap:wrap;gap:8px}
.rx-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px 'Mukta',sans-serif;cursor:pointer;position:relative;transition:transform .2s,background .2s,border-color .2s}
.rx-btn:hover{transform:scale(1.05);border-color:var(--brand)}
.rx-btn.active{background:color-mix(in srgb,var(--brand) 20%,var(--surface));border-color:var(--brand)}
.rx-icon{font-size:18px}.rx-count{font-size:12px;opacity:.75;font-weight:700}
.rx-particle{position:fixed;pointer-events:none;font-size:24px;z-index:9999;animation:floatBurst 1.2s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes floatBurst{0%{opacity:1;transform:translate(0,0) scale(.6)}50%{opacity:.9;transform:translate(var(--dx),-70px) scale(1.3)}100%{opacity:0;transform:translate(var(--dx2),-150px) scale(1)}}

/* 🧠 60-Second Daily News Quiz */
.quiz-card{background:linear-gradient(145deg,var(--surface),var(--surface2));border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:20px}
.quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.quiz-badge{background:var(--brand);color:var(--brand-ink);font:800 12px 'Mukta',sans-serif;padding:3px 10px;border-radius:999px}
.quiz-q{font-family:'Baloo 2',sans-serif;font-size:17.5px;font-weight:700;line-height:1.35;margin-bottom:12px}
.quiz-options{display:grid;gap:8px}
.quiz-opt{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14.5px 'Mukta',sans-serif;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.quiz-opt:hover:not(:disabled){border-color:var(--brand);transform:translateX(3px)}
.quiz-opt.correct{background:#10B981!important;color:#fff!important;border-color:#10B981!important}
.quiz-opt.wrong{background:#EF4444!important;color:#fff!important;border-color:#EF4444!important}

/* 🏏 Match & News Predictions Card */
.pred-card{background:linear-gradient(145deg,#0f172a,#1e293b);color:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.12);margin-bottom:20px}
.pred-card h3{font-family:'Baloo 2',sans-serif;font-size:18px;margin-bottom:8px;color:#FFD23F}
.pred-q{font-size:15px;margin-bottom:14px;font-weight:600}
.pred-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pred-btn{padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font:700 14px 'Mukta',sans-serif;cursor:pointer;transition:all .2s;text-align:center}
.pred-btn:hover:not(:disabled){background:#FFD23F;color:#121212;border-color:#FFD23F;transform:translateY(-2px)}
.pred-btn.selected{background:#FFD23F;color:#121212;border-color:#FFD23F;box-shadow:0 4px 14px rgba(255,210,63,.4)}
.pred-poll-bars{margin-top:12px;display:grid;gap:8px}
.pred-bar{display:flex;flex-direction:column;gap:4px;font-size:12px}
.pred-track{height:8px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.pred-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#FFD23F,#ff9f43);transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* 🃏 3D Collectible Album & 📌 Saved Articles Modal */
.album-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.album-modal-overlay.open{opacity:1;pointer-events:auto}
.album-modal{background:var(--surface);border:1px solid var(--line);border-radius:24px;width:min(880px,94vw);max-height:86vh;overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);padding:24px 28px;transform:translateY(20px) scale(.96);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.album-modal-overlay.open .album-modal{transform:translateY(0) scale(1)}
.album-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:14px}
.album-head h2{font-family:'Baloo 2',sans-serif;font-size:24px;display:flex;align-items:center;gap:10px}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.album-item{border-radius:14px;overflow:hidden;background:var(--surface2);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;cursor:pointer;position:relative}
.album-item:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 14px 28px rgba(0,0,0,.25),0 0 16px rgba(255,210,63,.3)}
.album-item img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:center 25%;display:block}
.album-item-body{padding:10px 12px}
.album-item-body h5{font-family:'Baloo 2',sans-serif;font-size:14px;line-height:1.25;margin-bottom:4px}

/* 🏏 Overhauled NPL Live Scorecard */
.npl-live-modern{position:relative;overflow:hidden;border-radius:20px;background:linear-gradient(135deg,rgba(8,14,26,.96) 0%,rgba(13,22,40,.94) 100%);border:1px solid rgba(255,255,255,.15);box-shadow:0 16px 36px rgba(0,0,0,.45),0 0 40px rgba(255,210,63,.08);backdrop-filter:blur(20px);padding:18px 20px;color:#fff;margin-bottom:16px;container-type:inline-size}
.npl-live-modern::before{content:'';position:absolute;top:-50%;left:30%;width:40%;height:200%;background:radial-gradient(circle,rgba(255,210,63,.12) 0%,transparent 65%);pointer-events:none;z-index:0}
.npl-lm-head{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;font-size:12.5px;margin-bottom:14px}
.live-beacon{display:inline-flex;align-items:center;gap:7px;background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.5);padding:3px 10px;border-radius:999px;font-weight:800;color:#ff5252;letter-spacing:.5px}
.live-beacon .dot{width:8px;height:8px;border-radius:50%;background:#ff5252;box-shadow:0 0 10px #ff5252;animation:pulseBeacon 1.2s infinite}
@keyframes pulseBeacon{0%{transform:scale(.9);opacity:.7}50%{transform:scale(1.3);opacity:1;box-shadow:0 0 14px #ff5252}100%{transform:scale(.9);opacity:.7}}
.npl-lm-matchup{display:grid;grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.2fr);align-items:center;gap:12px;position:relative;z-index:1;margin-bottom:14px}
.npl-lm-team{display:flex;align-items:center;gap:12px;min-width:0}
.npl-lm-team.r{flex-direction:row-reverse;text-align:right}
.npl-lm-logo{width:56px;height:56px;border-radius:50%;object-fit:contain;background:rgba(0,0,0,.4);padding:5px;border:2px solid rgba(255,255,255,.2);transition:transform .3s,box-shadow .3s}
.npl-lm-team.batting .npl-lm-logo{border-color:#FFD23F;box-shadow:0 0 20px rgba(255,210,63,.6);transform:scale(1.08)}
.npl-lm-info b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npl-lm-score{font-family:'Baloo 2',sans-serif;font-size:24px;font-weight:800;line-height:1.1;color:#FFD23F}
.npl-lm-score small{font-size:13px;color:rgba(255,255,255,.75);font-weight:500;margin-left:4px}
.npl-lm-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.npl-lm-center .vs{font-family:'Baloo 2',sans-serif;font-size:15px;font-weight:800;color:rgba(255,255,255,.6)}
.npl-lm-center .status-pill{font-size:11px;font-weight:700;background:rgba(255,255,255,.12);padding:2px 8px;border-radius:999px;color:#FFD23F}
.npl-lm-momentum{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.m-balls{display:flex;align-items:center;gap:6px}
.m-ball{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:rgba(255,255,255,.15);color:#fff}
.m-ball.four{background:#FFD23F;color:#121212;box-shadow:0 0 10px rgba(255,210,63,.6)}
.m-ball.six{background:#a855f7;color:#fff;box-shadow:0 0 10px rgba(168,85,247,.6)}
.m-ball.wkt{background:#ef4444;color:#fff;box-shadow:0 0 10px rgba(239,68,68,.6)}
.npl-lm-equation{position:relative;z-index:1;font-size:13.5px;font-weight:700;color:#FFD23F;text-align:center;margin-bottom:8px}

/* Interactive Image Lightbox */
.img-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.img-lightbox-overlay.open{opacity:1;pointer-events:auto}
.img-lightbox-overlay img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.8);transform:scale(.94);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.img-lightbox-overlay.open img{transform:scale(1)}
.img-lightbox-close{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.2);color:#fff;border:0;width:40px;height:40px;border-radius:50%;font-size:20px;cursor:pointer;display:grid;place-items:center}


/* ================= 🎯 HERO & THUMBNAIL SMART FACE/PORTRAIT ALIGNMENT ================= */
.hero .pic i {
  position: absolute !important;
  inset: 0 !important;
  background-position: center 20% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  animation: drift 22s ease-in-out infinite alternate;
}

@media (max-width: 640px) {
  .hero .pic i {
    background-position: center 18% !important;
  }
}

.mini .pic img,
.mini img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  display: block;
}

.card-front .card-link .pic img,
.card .pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;
}

article.post .photo img {
  width: 100% !important;
  max-height: 75vh !important;
  object-fit: contain !important;
  background: #000;
  border-radius: 14px;
}


/* ================= 📱 ULTRA MOBILE OPTIMIZATIONS (IPHONE & ANDROID) ================= */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  -webkit-overflow-scrolling: touch;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Fix iOS & Android touch lag and accidental zoom on interactive elements */
button, a, .pic, .hud-pill, .card-link, .btn-flip, .btn-bookmark, .btn-collect {
  touch-action: manipulation;
}

/* Prevent Matra clipping on Android & iOS */
h1, h2, h3, h4, .back-title, .chip, .badge-verified {
  line-height: 1.34 !important;
}

/* WebKit 3D Card fixes for Safari / iOS and Chrome Android */
.card-3d-wrap {
  -webkit-perspective: 1100px;
  perspective: 1100px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  isolation: isolate;
  contain: layout style;
}

.card-3d {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: auto;
}

.card-front, .card-back {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.card-back {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0);
  transform: rotateY(180deg) translate3d(0, 0, 0);
}

.card-3d.flipped {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Disable sticky hover on touch devices */
@media (hover: none) and (pointer: coarse) {
  .card-3d-wrap:active .card-3d {
    transform: scale(0.985);
    transition: transform 0.12s ease;
  }
  .card-glare {
    display: none !important;
  }
}

/* Mobile HUD bar wrapping for small Android screens */
@media (max-width: 480px) {
  .game-hud {
    gap: 4px !important;
  }
  .game-hud .xp-pill .rank-name {
    display: none !important;
  }
  .game-hud .hud-pill {
    padding: 3px 7px !important;
    font-size: 11.5px !important;
  }
}

/* iOS Safe Area Inset Support */
.album-modal, .saved-modal, .lightbox-modal, .story-modal, .npl-float-pip {
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* ================= 🖤 OLED TRUE BLACK THEME ================= */
[data-theme="oled"] {
  --bg: #000000 !important;
  --surface: #0a0a0a !important;
  --surface2: #141414 !important;
  --text: #f0f0f0 !important;
  --muted: #888888 !important;
  --border: rgba(255, 255, 255, 0.12) !important;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.95) !important;
  --card-border: rgba(255, 210, 63, 0.3) !important;
}
[data-theme="oled"] .card-3d {
  background: #080808 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 24px #000, 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* ================= 🏏 NPL FLOATING MINI-SCORE BUBBLE ================= */
.npl-float-pip {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: 18px;
  z-index: 999;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.98));
  color: #fff;
  padding: 8px 14px;
  border-radius: 30px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
}
.npl-float-pip.show {
  transform: translateY(0);
  opacity: 1;
}
.npl-float-pip .pip-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: radar-pulse 1.5s infinite;
}
.npl-float-pip .pip-teams {
  font-family: 'Baloo 2', sans-serif;
  letter-spacing: 0.5px;
}
.npl-float-pip .pip-score {
  font-size: 11px;
  opacity: 0.9;
  font-weight: 500;
}

/* ================= 📱 PWA INSTALL BUTTON ================= */
.btn-pwa-install {
  background: linear-gradient(135deg, var(--brand), #ffaa00);
  color: #111;
  border: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(255, 210, 63, 0.4);
}
.btn-pwa-install.show {
  display: inline-flex;
}

/* ================= 🟢 WHATSAPP 1-TAP CHANNEL BANNER ================= */
.wa-channel-box {
  background: linear-gradient(135deg, #128c7e, #075e54);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(18, 140, 126, 0.25);
  text-decoration: none;
}
.wa-channel-box:hover {
  filter: brightness(1.08);
}
.wa-channel-info b {
  display: block;
  font-size: 15px;
  font-family: 'Baloo 2', sans-serif;
}
.wa-channel-info span {
  font-size: 12.5px;
  opacity: 0.9;
}
.wa-channel-btn {
  background: #25d366;
  color: #fff;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* ================= 📸 INSTAGRAM 9:16 STORY CARD MODAL ================= */
.story-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.story-modal-overlay.open {
  display: flex;
}
.story-modal {
  background: var(--surface);
  border-radius: 18px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border);
}
.story-preview-canvas {
  width: 270px;
  height: 480px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  background: #111;
}
.story-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.story-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 14px;
}
.btn-story-dl {
  background: var(--brand);
  color: #111;
}
.btn-story-close {
  background: var(--surface2);
  color: var(--text);
}


/* ================= 🧰 3D INTERACTIVE UTILITY CARDS CSS ================= */
.sec-util-3d {
  margin: 36px 0 24px;
}
.util-3d-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 14px;
}
@media (max-width: 960px) {
  .util-3d-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .util-3d-grid {
    grid-template-columns: 1fr;
  }
}
.card-util .card-face {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 330px;
}
.card-util .util-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-util .util-chip {
  background: rgba(255, 210, 63, 0.15);
  color: var(--brand);
  border: 1px solid rgba(255, 210, 63, 0.35);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card-util .util-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.3;
}
.card-util .util-body {
  flex: 1;
}

/* Kalimati Veg Widget */
.veg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.veg-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.veg-chip.active {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}
.veg-price-box {
  background: var(--surface2);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--border);
}
.veg-price-main {
  font-size: 26px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  color: #10b981;
  display: block;
}
.veg-price-sub {
  font-size: 12px;
  color: var(--muted);
}

/* IPO Widget */
.ipo-select, .ipo-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  margin-bottom: 8px;
}
.btn-ipo-check {
  width: 100%;
  background: linear-gradient(135deg, var(--brand), #ffaa00);
  color: #111;
  border: none;
  padding: 9px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 210, 63, 0.3);
}
.ipo-res {
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  font-size: 12.5px;
  text-align: center;
  display: none;
}
.ipo-res.show {
  display: block;
}

/* Highway Status Widget */
.hwy-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hwy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 9px;
  font-size: 12.5px;
  border: 1px solid var(--border);
}
.hwy-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
  font-weight: 700;
}
.hwy-tag.open { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.hwy-tag.one-way { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }

/* Sunrise Sunset Widget */
.sun-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.sun-col {
  background: var(--surface2);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--border);
}
.sun-col b {
  display: block;
  font-size: 19px;
  font-family: 'Baloo 2', sans-serif;
  color: var(--brand);
}
.sun-col span {
  font-size: 11.5px;
  color: var(--muted);
}
.tithi-pill {
  background: var(--surface2);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  border: 1px solid var(--border);
}

/* Emergency Hotline Widget */
.em-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.em-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  transition: transform 0.15s ease;
}
.em-btn:active { transform: scale(0.96); }
.em-btn.pol { background: #1e3a8a; }
.em-btn.amb { background: #b91c1c; }
.em-btn.fire { background: #c2410c; }
.em-btn.bld { background: #7f1d1d; }

/* Net Radar Widget */
.net-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.net-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  border: 1px solid var(--border);
}
.net-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}
.net-radar-msg {
  font-size: 11.5px;
  color: #10b981;
  text-align: center;
  padding: 4px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 6px;
}


/* ================= 🏏 NPL PROFESSIONAL BROADCAST & 3D MATCH CARDS ================= */

/* Un-squish Live Scorecard & Match Cards */
.lv-head, .npl-lm-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
.live-tag, .tag-status {
  background: #ff3b30 !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.tag-final {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
.lv-comp, .tag-league {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  color: var(--brand) !important;
  font-size: 14px !important;
}
.lv-desc, .tag-match {
  color: var(--muted) !important;
  font-size: 12.5px !important;
}
.lv-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  flex-wrap: wrap !important;
}
.lv-m {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}
.lv-t {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--surface2) !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  gap: 14px !important;
}
.lv-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.lv-tx {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.lv-name, .team-title {
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--text) !important;
}
.team-score-badge {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.sc-runs, .lv-sc {
  font-family: 'Baloo 2', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
}
.sc-overs, .lv-ov {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

/* ================= 🏟️ INTERACTIVE 3D CRICKET STADIUM SIMULATOR ================= */
.cricket-stadium-sim {
  background: radial-gradient(circle at 50% 20%, #1a3a2a, #0b1a13 80%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 24px;
  margin: 28px 0;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stadium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.stadium-head h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffd23f;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stadium-pitch-wrap {
  width: 100%;
  height: 180px;
  background: repeating-linear-gradient(90deg, #16532f 0px, #16532f 30px, #195d35 30px, #195d35 60px);
  border-radius: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  perspective: 600px;
  overflow: hidden;
}
.stadium-strip {
  width: 75%;
  height: 52px;
  background: #c8a876;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.pitch-crease {
  width: 4px;
  height: 100%;
  background: #fff;
}
.stumps-svg {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.stump-stick {
  width: 4px;
  height: 32px;
  background: #f4e3c1;
  border-radius: 2px;
}
.stadium-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: center;
}
.stadium-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
.stadium-btn:hover {
  background: var(--brand);
  color: #111;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 210, 63, 0.4);
}
.stadium-btn:active {
  transform: scale(0.96);
}

/* ================= 🗳️ PREDICTIONS (MATCHING USER SCREENSHOT) ================= */
.npl-pred-card {
  background: #141b26;
  border-radius: 20px;
  padding: 22px;
  margin: 24px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.npl-pred-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffd23f;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  margin-bottom: 8px;
}
.npl-pred-q {
  font-size: 18px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  color: #fff;
  margin: 0 0 16px;
}
.npl-pred-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.npl-pred-btn {
  background: #1f2937;
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.npl-pred-btn:hover, .npl-pred-btn.voted {
  border-color: #ffd23f;
  background: rgba(255, 210, 63, 0.15);
  box-shadow: 0 4px 15px rgba(255, 210, 63, 0.25);
}
.pred-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pred-bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pred-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: #94a3b8;
}
.pred-bar-track {
  width: 100%;
  height: 9px;
  background: #334155;
  border-radius: 10px;
  overflow: hidden;
}
.pred-bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ================= 🎴 3D FLIP CARDS FOR ALL PLAYED MATCHES ================= */
.npl-matches-3d-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 36px;
}
@media (max-width: 768px) {
  .npl-matches-3d-grid {
    grid-template-columns: 1fr;
  }
}
.card-npl-match .card-face {
  padding: 20px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-npl-match .match-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.card-npl-match .match-num {
  background: rgba(255, 210, 63, 0.15);
  color: var(--brand);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  font-size: 13px;
}
.card-npl-match .match-venue {
  color: var(--muted);
  font-size: 12px;
}
.card-npl-match .teams-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 14px;
}
.card-npl-match .team-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.card-npl-match .team-line.winner {
  border-color: rgba(255, 210, 63, 0.5);
  background: rgba(255, 210, 63, 0.08);
}
.card-npl-match .team-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}
.card-npl-match .team-score-right {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.card-npl-match .team-score-right b {
  font-size: 20px;
  font-family: 'Baloo 2', sans-serif;
  color: var(--brand);
}
.card-npl-match .team-score-right small {
  font-size: 12px;
  color: var(--muted);
}
.card-npl-match .winner-ribbon {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.card-npl-match .potm-ribbon {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
}

/* Backface scorecard styles */
.scorecard-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 8px 0;
}
.scorecard-mini-table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.scorecard-mini-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.scorecard-mini-table td.num {
  text-align: right;
  font-weight: 700;
  color: var(--brand);
}


/* ================= 🏏 NPL PROFESSIONAL BROADCAST & 3D MATCH CARDS ================= */

/* Un-squish Live Scorecard & Match Cards */
.lv-head, .npl-lm-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}
.live-tag, .tag-status {
  background: #ff3b30 !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.tag-final {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
.lv-comp, .tag-league {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  color: var(--brand) !important;
  font-size: 14px !important;
}
.lv-desc, .tag-match {
  color: var(--muted) !important;
  font-size: 12.5px !important;
}
.lv-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-bottom: 16px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  flex-wrap: wrap !important;
}
.lv-m {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}
.lv-t {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--surface2) !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  gap: 14px !important;
}
.lv-logo {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.lv-tx {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.lv-name, .team-title {
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--text) !important;
}
.team-score-badge {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.sc-runs, .lv-sc {
  font-family: 'Baloo 2', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
}
.sc-overs, .lv-ov {
  font-size: 13px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

/* ================= 🏟️ INTERACTIVE 3D CRICKET STADIUM SIMULATOR ================= */
.cricket-stadium-sim {
  background: radial-gradient(circle at 50% 20%, #1a3a2a, #0b1a13 80%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 24px;
  margin: 28px 0;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stadium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.stadium-head h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffd23f;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stadium-pitch-wrap {
  width: 100%;
  height: 180px;
  background: repeating-linear-gradient(90deg, #16532f 0px, #16532f 30px, #195d35 30px, #195d35 60px);
  border-radius: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  perspective: 600px;
  overflow: hidden;
}
.stadium-strip {
  width: 75%;
  height: 52px;
  background: #c8a876;
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.pitch-crease {
  width: 4px;
  height: 100%;
  background: #fff;
}
.stumps-svg {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.stump-stick {
  width: 4px;
  height: 32px;
  background: #f4e3c1;
  border-radius: 2px;
}
.stadium-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: center;
}
.stadium-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
.stadium-btn:hover {
  background: var(--brand);
  color: #111;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 210, 63, 0.4);
}
.stadium-btn:active {
  transform: scale(0.96);
}

/* ================= 🗳️ PREDICTIONS (MATCHING USER SCREENSHOT) ================= */
.npl-pred-card {
  background: #141b26;
  border-radius: 20px;
  padding: 22px;
  margin: 24px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.npl-pred-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffd23f;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  margin-bottom: 8px;
}
.npl-pred-q {
  font-size: 18px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  color: #fff;
  margin: 0 0 16px;
}
.npl-pred-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.npl-pred-btn {
  background: #1f2937;
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.npl-pred-btn:hover, .npl-pred-btn.voted {
  border-color: #ffd23f;
  background: rgba(255, 210, 63, 0.15);
  box-shadow: 0 4px 15px rgba(255, 210, 63, 0.25);
}
.pred-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pred-bar-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pred-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: #94a3b8;
}
.pred-bar-track {
  width: 100%;
  height: 9px;
  background: #334155;
  border-radius: 10px;
  overflow: hidden;
}
.pred-bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ================= 🎴 3D FLIP CARDS FOR ALL PLAYED MATCHES ================= */
.npl-matches-3d-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 36px;
}
@media (max-width: 768px) {
  .npl-matches-3d-grid {
    grid-template-columns: 1fr;
  }
}
.card-npl-match .card-face {
  padding: 20px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-npl-match .match-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.card-npl-match .match-num {
  background: rgba(255, 210, 63, 0.15);
  color: var(--brand);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  font-size: 13px;
}
.card-npl-match .match-venue {
  color: var(--muted);
  font-size: 12px;
}
.card-npl-match .teams-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 14px;
}
.card-npl-match .team-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.card-npl-match .team-line.winner {
  border-color: rgba(255, 210, 63, 0.5);
  background: rgba(255, 210, 63, 0.08);
}
.card-npl-match .team-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
}
.card-npl-match .team-score-right {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.card-npl-match .team-score-right b {
  font-size: 20px;
  font-family: 'Baloo 2', sans-serif;
  color: var(--brand);
}
.card-npl-match .team-score-right small {
  font-size: 12px;
  color: var(--muted);
}
.card-npl-match .winner-ribbon {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.card-npl-match .potm-ribbon {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
}

/* Backface scorecard styles */
.scorecard-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 8px 0;
}
.scorecard-mini-table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.scorecard-mini-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.scorecard-mini-table td.num {
  text-align: right;
  font-weight: 700;
  color: var(--brand);
}


/* ================= 🧢 GOLDEN & PLATINUM CAPS ================= */
.cap.golden, .cap.gold {
  filter: drop-shadow(0 2px 8px rgba(255, 210, 63, 0.7));
}
.cap.golden .crown, .cap.gold .crown {
  fill: #eab308 !important;
}
.cap.golden .peak, .cap.gold .peak {
  fill: #ca8a04 !important;
}
.cap.golden .band, .cap.gold .band {
  fill: #ffd23f !important;
}
.cap.golden .badge, .cap.gold .badge {
  fill: #78350f !important;
}
.cap.golden .star, .cap.gold .star {
  fill: #ffd23f !important;
}
.capped.golden, .capped.gold {
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.2), transparent) !important;
  border-left: 3px solid #eab308 !important;
}
.capped.golden .capname, .capped.gold .capname {
  color: #ffd23f !important;
  font-weight: 700;
}

.cap.platinum {
  filter: drop-shadow(0 2px 8px rgba(226, 232, 240, 0.8));
}
.cap.platinum .crown {
  fill: #e2e8f0 !important;
}
.cap.platinum .peak {
  fill: #94a3b8 !important;
}
.cap.platinum .band {
  fill: #f8fafc !important;
}
.cap.platinum .badge {
  fill: #1e293b !important;
}
.cap.platinum .star {
  fill: #38bdf8 !important;
}
.capped.platinum {
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.22), transparent) !important;
  border-left: 3px solid #cbd5e1 !important;
}
.capped.platinum .capname {
  color: #e2e8f0 !important;
  font-weight: 700;
}

/* ================= 🕐 WORLD CLOCK SPACIOUS & CLEAN ================= */
.world-g, .tool-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 16px !important;
  margin: 16px 0 !important;
}
.world-tile, .tool-tile {
  padding: 18px 16px !important;
  border-radius: 16px !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.world-tile b, .world-time {
  font-family: 'Baloo 2', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
  margin: 4px 0 !important;
}
.world-tile span, .world-diff {
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.4 !important;
}

/* ================= 🏏 NPL SIDEBAR THEME (MATCHING USER SCREENSHOT IMAGE 2) ================= */
.npl-theme-card {
  background: radial-gradient(circle at 50% 20%, #151c2b 0%, #0a0e17 100%);
  border: 1px solid rgba(255, 210, 63, 0.25);
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 210, 63, 0.1);
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.npl-theme-card::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100px;
  background: radial-gradient(ellipse, rgba(255, 210, 63, 0.15), transparent 70%);
  pointer-events: none;
}
.npl-side-theme-title {
  color: #ffd23f;
  font-family: 'Baloo 2', sans-serif;
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.npl-side-theme-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}
.npl-theme-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.npl-circle-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.npl-glow-circle {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.65) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  transition: transform 0.3s ease;
  box-sizing: border-box;
}
.npl-glow-circle.gold {
  border: 3.5px solid #ffd23f;
  box-shadow: 0 0 22px rgba(255, 210, 63, 0.45), inset 0 0 14px rgba(255, 210, 63, 0.25);
}
.npl-glow-circle.cyan {
  border: 3.5px solid #38bdf8;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.45), inset 0 0 14px rgba(56, 189, 248, 0.25);
}
.npl-glow-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
}
.npl-theme-tname {
  font-family: 'Baloo 2', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.npl-theme-score {
  font-family: 'Baloo 2', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 2px;
}
.npl-theme-score.gold { color: #ffd23f; text-shadow: 0 0 14px rgba(255, 210, 63, 0.4); }
.npl-theme-score.cyan { color: #38bdf8; text-shadow: 0 0 14px rgba(56, 189, 248, 0.4); }
.npl-theme-score small { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); display: block; margin-top: -2px; }
.npl-theme-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.npl-theme-vs {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.npl-theme-cd {
  background: rgba(255, 210, 63, 0.15);
  border: 1px solid rgba(255, 210, 63, 0.45);
  color: #ffd23f;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0 15px rgba(255, 210, 63, 0.25);
  animation: pulseCd 2s infinite ease-in-out;
}
@keyframes pulseCd {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(255, 210, 63, 0.2); }
  50% { transform: scale(1.04); box-shadow: 0 0 20px rgba(255, 210, 63, 0.4); }
}
/* 📐 NPL cards always fit their column: long team names wrap instead of pushing the card past the edge */
.npl-s, .npl-s > *, .box.npl > * { min-width: 0; max-width: 100%; }
.npl-theme-card, .npl-card { overflow: hidden; }
.npl-theme-matchup { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
.npl-circle-team, .npl-t { min-width: 0 !important; }
.npl-theme-tname { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.25; text-align: center; }
.npl-theme-score { font-size: clamp(20px, 2.4vw, 28px); white-space: nowrap; }
.npl-theme-score small { display: inline; font-size: 12px; margin: 0; }
.npl-glow-circle img.tl { width: 100%; height: 100%; object-fit: contain; }
.npl-lm-badge { color: #FFD23F; font-weight: 700; }
.hub-head { overflow: hidden; }
/* 🧰 utility cards: real prices, the IPO note, links styled like the buttons */
.veg-up { color: #ef4444; font-weight: 700; white-space: nowrap; }
.veg-down { color: #10b981; font-weight: 700; white-space: nowrap; }
.ipo-note { font-size: 11.5px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.card-util a.btn-collect, .card-util a.btn-ipo-check { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.card-util a.btn-ipo-check { margin-top: 10px; width: 100%; }
.card-util .net-radar-msg { font-size: 13px; line-height: 1.5; }
/* 🥬 tools/vegetable-prices */
.veg-search { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--card, transparent); color: inherit; font: inherit; margin-bottom: 12px; }
.veg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.veg-table th, .veg-table td { padding: 8px 6px; border-bottom: 1px solid var(--line, rgba(127,127,127,.2)); text-align: right; }
.veg-table th:first-child, .veg-table td:first-child { text-align: left; }
.veg-table td b { font-weight: 800; }
/* narrow column (the side box): logos above the names, nothing overlaps */
.box.npl .npl-theme-card, .box.npl .npl-card { padding: 16px 12px !important; }
.box.npl .npl-glow-circle { width: 60px !important; height: 60px !important; padding: 6px !important; }
.box.npl .npl-theme-score { font-size: 20px; }
.box.npl .npl-theme-winner { font-size: 15px; }
.box.npl .npl-theme-cd { white-space: normal; font-size: 11.5px; padding: 4px 8px; }
@container (max-width: 440px) {
  .npl-lm-matchup { gap: 6px; }
  .npl-lm-team, .npl-lm-team.r { flex-direction: column; text-align: center; gap: 6px; }
  .npl-lm-logo { width: 44px; height: 44px; }
  .npl-lm-info { min-width: 0; max-width: 100%; }
  .npl-lm-info b { white-space: normal; font-size: 13px; line-height: 1.25; }
  .npl-lm-score { font-size: 19px; }
  .npl-lm-center .status-pill { white-space: normal; text-align: center; }
}
.npl-theme-winner {
  font-family: 'Baloo 2', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffd23f;
  margin: 14px 0 8px;
  text-shadow: 0 2px 14px rgba(255, 210, 63, 0.4);
}
.npl-theme-link {
  margin-top: 12px;
}
.npl-theme-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.npl-theme-link a:hover {
  background: rgba(255, 210, 63, 0.22);
  border-color: #ffd23f;
  color: #ffd23f;
  transform: translateY(-1px);
}

/* ================= 🏟️ IN-PITCH ANIMATIONS LAYER ================= */
.pitch-vfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}
.sim-ball {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #ff5252, #b71c1c);
  border-radius: 50%;
  box-shadow: 0 0 10px #ff1744, 0 0 20px #ff5252;
  top: 50%;
  left: 15%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: none;
}
.sim-batter {
  position: absolute;
  right: 14%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
  transition: transform 0.2s ease;
}
.sim-banner {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  background: linear-gradient(135deg, rgba(20,27,38,0.95), rgba(10,14,23,0.95));
  border: 1.5px solid #ffd23f;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 20px rgba(255,210,63,0.35);
  color: #ffd23f;
  font-family: 'Baloo 2', sans-serif;
  font-size: 15px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.2, 1.2, 0.3, 1);
  z-index: 30;
}
.sim-banner.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.sim-firework {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: fwBurst 0.8s ease-out forwards;
}
@keyframes fwBurst {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(6) translate(var(--dx), var(--dy)); opacity: 0; }
}

/* Prediction match selector pills */
.pred-match-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
  scrollbar-width: none;
}
.pred-match-pills::-webkit-scrollbar { display: none; }
.pred-match-pill {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pred-match-pill:hover, .pred-match-pill.active {
  background: rgba(255, 210, 63, 0.2);
  border-color: #ffd23f;
  color: #ffd23f;
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.25);
}
.npl-pred-btn img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px;
}