/* wester.live v3 — hero deck, TV/desktop layout, dots button, ads popup */

/* ===== 3-dots button (all screens, incl. TV) ===== */
.cdots{display:inline-grid;place-items:center;flex:none;color:var(--mut,#a3a3ad);background:none;border:0;cursor:pointer;min-width:46px;min-height:36px;border-radius:999px}
.cdots .dd{display:flex;gap:3px;align-items:center;justify-content:center}
.cdots .dd i{width:4px;height:4px;border-radius:50%;background:currentColor}
.cdots.cfb{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--surf) 88%,#000);border:1px solid var(--line)}
#cnav .cdots{width:46px!important;height:36px!important;transition:background .18s,color .18s}
#cnav .cdots:hover,#cnav .cdots:focus-visible{color:var(--fg,#fff);background:rgba(255,255,255,.12)}
@media(min-width:821px){
#csheet{left:50%;right:auto;top:50%;bottom:auto;width:min(520px,92vw);height:auto!important;max-height:min(720px,86dvh);border:1px solid var(--line);border-radius:26px;transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .2s;padding-bottom:12px;box-shadow:0 30px 90px #000c}
#csheet.show{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
.cs-h{display:none}
.cs-it{font-size:17px;padding:14px 10px}
.cs-it:focus-visible,.cs-x:focus-visible{outline:3px solid #fff;outline-offset:-2px;background:var(--card)}
}

/* ===== long-press "ads" popup: always centred above the bar ===== */
#adx{position:fixed!important;left:12px!important;right:12px!important;top:auto!important;margin:0 auto!important;width:min(330px,calc(100vw - 24px))!important;bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;transform:none!important;z-index:2147483200;box-shadow:0 18px 60px #000c;animation:adxIn .22s ease both!important}
#adx[hidden]{display:none!important}
#adx .btn{width:100%;margin-top:6px}
@keyframes adxIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* ===== hero: stacked deck (main card + two slim peek cards) ===== */
.hx{--sw:clamp(26px,8vw,110px);--gp:10px;--mw:calc(100% - 2*var(--sw) - 2*var(--gp));height:min(610px,78svh);min-height:490px;border:0!important;background:none!important;box-shadow:none!important;border-radius:0;overflow:hidden}
.hx .hx-s{position:absolute;inset:auto;top:0;bottom:46px;left:0;width:var(--mw);border-radius:26px;border:1px solid rgba(255,255,255,.14);background:var(--surf);transition:left .7s cubic-bezier(.22,.8,.24,1),width .7s cubic-bezier(.22,.8,.24,1),opacity .5s,transform .7s cubic-bezier(.22,.8,.24,1);will-change:left,width}
.hx .hx-s.s-on{left:0;transform:none;opacity:1;z-index:3}
.hx .hx-s.s-r{left:calc(100% - 2*var(--sw) - var(--gp));width:var(--sw);transform:none;opacity:1;z-index:2}
.hx .hx-s.s-x{left:calc(100% - var(--sw));width:var(--sw);transform:none;opacity:.9;z-index:1;transition:none}
.hx .hx-s.s-l{left:-110%;width:var(--mw);transform:none;opacity:0;z-index:0}
.hx .hx-s:not(.s-on):after{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));opacity:1}
.hx .hx-s.s-on:after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 22%,transparent 34%,rgba(5,5,8,.9) 82%,rgba(5,5,8,.97) 100%);opacity:1}
.hx .hx-s:not(.s-on) .hx-c,.hx .hx-s:not(.s-on) .hx-p{display:none}
.hx .hx-bg{object-position:center 20%}
.hx .hx-c{padding:0 22px 26px;gap:12px}
.hx .hx-c h1{font-size:clamp(26px,7.6vw,40px);letter-spacing:-.6px}
.hx .hx-rk{color:#fff;font-size:11px;letter-spacing:.16em}
.hx .hx-rk i{width:20px;height:2px;border-radius:2px;background:#ff2d4d;box-shadow:none}
.hx .hx-m b{background:rgba(255,255,255,.14);padding:5px 11px}
.hx .hx-m span{text-transform:uppercase;letter-spacing:.04em}
.hx .hx-g span{background:rgba(255,255,255,.07);backdrop-filter:blur(8px);padding:7px 14px;font-size:12px;border-color:rgba(255,255,255,.18)}
.hx .hx-d{display:none}
.hx .hx-bt{gap:10px;margin-top:6px;flex-wrap:wrap}
.hx .hx-bt .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:700;border-radius:999px;min-height:44px}
.hx .hx-bt .btn:not(.w){background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(8px)}
.hx .hx-bt .btn .i{width:18px;height:18px}
.hx .hx-ft{left:0;right:0;bottom:0;height:46px;padding:0 4px;gap:14px;align-items:center}
.hx .hx-bars{max-width:min(520px,calc(var(--mw) - 80px))}
.hx .hx-n{margin-left:auto;margin-right:calc(var(--sw)*2 + var(--gp) + 6px);color:#fff9}
.hx-ar{display:none!important}
.hx .hx-s.s-r,.hx .hx-s.s-x{cursor:pointer}
@media(max-width:400px){.hx{--gp:8px}.hx .hx-bt .btn{padding:11px 16px}.hx .hx-n{display:none}}
@media(min-width:760px){
.hx{--sw:clamp(60px,8vw,150px);--gp:14px;height:clamp(440px,50vw,620px);min-height:0}
.hx .hx-c{padding:0 46px 40px;max-width:760px;gap:14px}
.hx .hx-c h1{font-size:clamp(34px,4.2vw,64px)}
.hx .hx-d{display:-webkit-box;font-size:15px;max-width:560px}
.hx .hx-p{right:44px;bottom:40px;width:clamp(120px,12vw,200px)}
.hx .hx-bt .btn{padding:14px 26px;font-size:15px}
.hx-ar{display:grid!important}
.hx-ar.pv{left:18px}.hx-ar.nx{right:calc(var(--sw)*2 + var(--gp)*2 + 18px)}
.hx .hx-s.s-r:hover,.hx .hx-s.s-x:hover{filter:brightness(1.25)}
}

/* ===== desktop / laptop ===== */
@media(min-width:1100px){
main{max-width:min(1500px,95vw)!important;padding:22px 28px 60px!important}
header{padding:0 32px!important;height:68px!important}
body{padding-top:68px!important}
#cnav{bottom:20px}
#cnav a{width:54px;height:42px}#cnav a.act{width:64px}#cnav a .i{width:22px;height:22px}
#cnav .cdots{width:54px!important;height:42px!important}
}
/* ===== TV / big screens (LG, Samsung, Android TV browsers) ===== */
@media(min-width:1600px){
main{max-width:min(1780px,95vw)!important;padding:30px 48px 90px!important}
.hx{height:clamp(600px,60vh,820px)}
.hx .hx-c{padding:0 64px 54px;max-width:960px}
.hx .hx-c h1{font-size:clamp(56px,3.6vw,84px)}
.hx .hx-d{font-size:19px;max-width:760px}
.hx .hx-m,.hx .hx-g span{font-size:16px}
.hx .hx-bt .btn{padding:18px 36px;font-size:19px;min-height:60px}
.hx .hx-n{font-size:15px}
#cnav{bottom:28px;padding:6px;gap:6px}
#cnav a{width:68px;height:52px}#cnav a.act{width:80px}#cnav a .i{width:27px;height:27px}
#cnav .cdots{width:68px!important;height:52px!important}
#cnav .cdots .dd i{width:6px;height:6px}
header{height:80px!important}body{padding-top:80px!important}
.card{--tvz:1}
}
/* remote / keyboard focus visibility */
a:focus-visible,button:focus-visible,.card:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:14px}
#cnav a:focus-visible,#cnav .cdots:focus-visible{outline-offset:2px;border-radius:999px}
.hx-bt .btn:focus-visible{outline-offset:4px;border-radius:999px}

/* ===== v3.1 hero polish ===== */
.hx .hx-rk{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;gap:9px}
.hx .hx-rk i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18);animation:hxPulse 2s ease-in-out infinite}
@keyframes hxPulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.hx .hx-s{transition:left .7s cubic-bezier(.22,.8,.24,1),width .7s cubic-bezier(.22,.8,.24,1),top .7s cubic-bezier(.22,.8,.24,1),bottom .7s cubic-bezier(.22,.8,.24,1),opacity .5s}
.hx .hx-s.s-on{box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.hx .hx-s.s-r{top:20px;bottom:66px;opacity:.9}
.hx .hx-s.s-x{top:40px;bottom:86px;opacity:.65;transition:none}
.hx .hx-s:not(.s-on):hover{opacity:1}
.hx .hx-vt{display:none}
.hx .hx-s.s-r .hx-vt,.hx .hx-s.s-x .hx-vt{display:block;position:absolute;z-index:3;left:50%;bottom:18px;max-height:62%;transform:translateX(-50%);writing-mode:vertical-rl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px #000}
.hx .hx-s.s-x .hx-vt{display:none}
.hx .hx-c h1{text-wrap:balance}
.hx .hx-b i{height:4px}
.hx .hx-b.b-on i{background:#ffffff4d}
.hx .hx-n{font-size:13px;font-weight:700}
.hx .hx-m b{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14)}
.hx .hx-bt .btn.w{box-shadow:0 8px 28px rgba(255,255,255,.18)}
@media(min-width:760px){.hx .hx-vt{font-size:14px;bottom:24px}.hx .hx-s.s-r{top:24px;bottom:70px}.hx .hx-s.s-x{top:48px;bottom:94px}}

/* ===== v3.2: one shared picture across all 3 columns, in-card progress, flat chips ===== */
.hx{container-type:inline-size;height:min(600px,76svh);min-height:480px}
.hx .hx-s,.hx .hx-s.s-r,.hx .hx-s.s-x{top:0;bottom:0}
.hx .hx-s.s-r,.hx .hx-s.s-x{opacity:1}
.hx .hx-s.s-on .hx-bg{width:100cqw;max-width:none;height:100%;left:0;right:auto;transform:none!important;transition:none}
.hx .hx-s:not(.s-on) picture,.hx .hx-s:not(.s-on) .hx-bg{display:none}
.hx .hx-s:not(.s-on)::before{content:"";position:absolute;top:0;height:100%;width:100cqw;left:var(--bl,0px);background:var(--img,none) 50% 20%/cover no-repeat}
.hx .hx-s.s-r{--bl:calc(-1*(100cqw - 2*var(--sw) - var(--gp)))}
.hx .hx-s.s-x{--bl:calc(-1*(100cqw - var(--sw)))}
.hx .hx-s:not(.s-on):after{background:rgba(0,0,0,.28);opacity:1}
.hx .hx-vt{display:none!important}
/* progress inside the card: long line = current, dots = the rest */
.hx .hx-ft{left:22px;right:auto;width:calc(var(--mw) - 44px);bottom:16px;height:20px;padding:0;z-index:6;gap:8px}
.hx .hx-bars{flex:none;max-width:none;gap:0;align-items:center}
.hx .hx-b{flex:none;width:14px;height:20px;justify-content:center}
.hx .hx-b i,.hx .hx-b.b-on i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.hx .hx-b.b-dn i{background:rgba(255,255,255,.85)}
.hx .hx-b.b-on{width:46px}
.hx .hx-b.b-on i{width:38px;height:4px;border-radius:4px;background:rgba(255,255,255,.3)}
.hx .hx-n{margin:0 0 0 auto!important;font-size:11px;font-weight:600;letter-spacing:.1em;color:#fffc;display:block!important}
.hx .hx-c{padding-bottom:50px;gap:10px}
/* flat chips, no blur */
.hx .hx-m b{background:rgba(0,0,0,.35)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid rgba(255,255,255,.22);padding:3px 10px;font-size:12px}
.hx .hx-g span{background:rgba(0,0,0,.3)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid rgba(255,255,255,.28);padding:4px 12px;font-size:12px;font-weight:600;color:#fff}
.hx .hx-bt .btn:not(.w){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.4)}
.hx .hx-d{display:-webkit-box!important;-webkit-line-clamp:2;font-size:12.5px;line-height:1.45;max-width:min(420px,100%);color:rgba(255,255,255,.82)}
@media(min-width:760px){
.hx{height:clamp(430px,46vw,600px);min-height:0}
.hx .hx-ft{left:46px;width:calc(var(--mw) - 92px);bottom:22px}
.hx .hx-c{padding-bottom:58px}
.hx .hx-d{font-size:14.5px;max-width:540px}
.hx .hx-p{bottom:58px}
.hx .hx-s.s-r,.hx .hx-s.s-x{top:0;bottom:0}
.hx-ar.nx{right:calc(var(--sw)*2 + var(--gp)*2 + 16px)}
}
@media(min-width:1600px){.hx{height:clamp(600px,58vh,800px)}.hx .hx-ft{left:64px;width:calc(var(--mw) - 128px);bottom:28px}.hx .hx-c{padding-bottom:70px}.hx .hx-d{font-size:18px;max-width:700px}.hx .hx-b.b-on i{height:5px}}

/* ===== v3.3: shorter hero, wider peek columns ===== */
.hx{--sw:clamp(40px,13vw,120px);--gp:8px;height:min(500px,62svh);min-height:400px}
@media(min-width:760px){.hx{--sw:clamp(72px,9.5vw,180px);--gp:12px;height:clamp(380px,40vw,520px);min-height:0}}
@media(min-width:1600px){.hx{height:clamp(520px,50vh,700px)}}

/* ===== v3.4: smooth deck animation, compact layout, one-line small buttons ===== */
.hx{height:min(470px,60svh);min-height:380px}
.hx .hx-s{transition:left .62s cubic-bezier(.3,.7,.2,1),width .62s cubic-bezier(.3,.7,.2,1),opacity .4s}
.hx .hx-s.s-on{--bl:0px}
/* every window draws the same shared picture (no per-slide image swap = no pop) */
.hx .hx-s picture,.hx .hx-s .hx-bg{display:none!important}
.hx .hx-s::before{content:"";position:absolute;top:0;height:100%;width:100cqw;left:var(--bl,0px);background:var(--img,none) 50% 20%/cover no-repeat;z-index:0}
.hx.hx-fd .hx-s::before{animation:hxFd .6s ease both}
@keyframes hxFd{from{opacity:.15}to{opacity:1}}
.hx .hx-s.s-on:after{background:linear-gradient(180deg,rgba(0,0,0,.28) 0,transparent 20%,transparent 36%,rgba(5,5,8,.9) 80%,rgba(5,5,8,.97) 100%);opacity:1}
/* content keeps the full card width so it never re-wraps while the card grows */
.hx .hx-s:not(.s-on) .hx-c{display:flex}
.hx .hx-c{left:0;right:auto;width:var(--mw);padding:0 20px 42px;gap:8px}
.hx .hx-c h1{font-size:clamp(24px,7vw,34px)}
.hx .hx-m b{padding:2px 9px;font-size:11.5px}
.hx .hx-m{font-size:12px}
.hx .hx-g{flex-wrap:nowrap;overflow:hidden;gap:6px}
.hx .hx-g span{font-size:11.5px;padding:3px 10px;white-space:nowrap;flex:none}
.hx .hx-d{font-size:12px;-webkit-line-clamp:2}
.hx .hx-bt{flex-wrap:nowrap;gap:8px;margin-top:4px}
.hx .hx-bt .btn{padding:8px 16px;font-size:13px;min-height:38px;gap:6px;white-space:nowrap;box-shadow:none}
.hx .hx-bt .btn .i{width:16px;height:16px}
.hx .hx-ft{bottom:13px}
@media(min-width:760px){
.hx{height:clamp(360px,37vw,480px)}
.hx .hx-c{padding:0 44px 52px;gap:10px}
.hx .hx-c h1{font-size:clamp(32px,3.8vw,56px)}
.hx .hx-d{font-size:14px}
.hx .hx-bt .btn{padding:11px 22px;font-size:14px;min-height:44px}
.hx .hx-s:not(.s-on) .hx-p{display:block}
.hx .hx-p{--pw:clamp(110px,11vw,180px);width:var(--pw);right:auto;left:calc(var(--mw) - var(--pw) - 44px);bottom:52px}
.hx .hx-ft{bottom:18px}
}
@media(min-width:1600px){.hx{height:clamp(500px,48vh,660px)}.hx .hx-c{padding:0 64px 66px}.hx .hx-bt .btn{padding:14px 30px;font-size:17px;min-height:54px}.hx .hx-p{left:calc(var(--mw) - var(--pw) - 64px)}}

/* ===== v3.5: fix card content width (was shrinking), single-line rank & meta ===== */
.hx{--mw:calc(100cqw - 2*var(--sw) - 2*var(--gp))}
.hx .hx-rk{white-space:nowrap}
.hx .hx-m{flex-wrap:nowrap;white-space:nowrap;gap:0 8px;overflow:hidden}
.hx .hx-m span+span:before,.hx .hx-m b+span:before{margin-right:8px}
.hx .hx-c h1{font-size:clamp(24px,6.8vw,34px);-webkit-line-clamp:2}