.roll-tracker-banners-wrapper{position:relative}.roll-tracker-banners-container{position:relative;height:70vh;overflow:hidden}.roll-tracker-banners-container:after{content:"";pointer-events:none;position:absolute;left:0;right:0;bottom:0;height:120px}@media (max-width: 1024px){.roll-tracker-banners-container{height:30vh}}.roll-tracker-banners{display:flex;flex-direction:column;gap:var(--spacing-md);scroll-behavior:smooth;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scrollbar-width-scroll-snap-type:y mandatory;-ms-overflow-style:none}.roll-tracker-banners::-webkit-scrollbar{width:6px}.roll-tracker-banners::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}@media (max-width: 1024px){.roll-tracker-banners{height:100%}}.banner{display:block;position:relative;min-width:230px;height:160px;background-color:var(--color-bg);border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:var(--border-width) solid var(--color-border);margin-bottom:var(--spacing-md);transition:all .3s ease;cursor:pointer}.banner:hover{background-color:var(--color-header-bg);border-color:var(--color-primary);box-shadow:0 8px 16px #00000026;transform:translateY(-2px)}.banner:hover .banner__image-container img{transform:scale(1.1)}.banner:active{transform:translateY(0);box-shadow:0 4px 8px #0000001a;background-color:var(--color-header-bg);border-color:var(--color-primary-dark)}.banner[data-is-active=true]{background-color:var(--color-header-bg);border:2px solid var(--color-primary);box-shadow:0 0 10px rgba(var(--color-primary-rgb),.5)}.banner[data-is-active=true] .banner__title{color:var(--color-primary)}.banner[data-is-active=true] .banner__image{filter:brightness(1.1);transform:scale(1.05)}.banner__pity-container{padding:var(--spacing-md);position:relative;bottom:0;left:0;right:0;height:100%;max-height:70vh;overflow:hidden;z-index:2}.banner__pity--star5 .banner__pity-count{color:var(--color-star-5-text);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs)}.banner__pity--star5 .banner__pity-label{color:var(--color-star-5-text);margin-bottom:var(--spacing-md)}.banner__pity--star4 .banner__pity-count{color:var(--color-star-4);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs)}.banner__pity--star4 .banner__pity-label{color:var(--color-star-4)}.banner__pity-count{margin:0;line-height:1}.banner__pity-count-number{width:50px;display:inline-block}.banner__pity-label{margin:0;font-size:var(--font-size-sm);line-height:1}.banner__title{font-size:var(--font-size-fluid-base);color:#454545;margin:var(--spacing-sm) 0 0 0;font-weight:var(--font-weight-semibold)}.banner__guaranty{position:relative;display:inline-flex;align-items:center;background-color:#0009;border-radius:10px;padding:2px 6px;margin-left:8px;box-shadow:0 2px 4px #0003;scroll-snap-align:center}.banner__guaranty svg{width:14px;height:14px;margin-right:3px;filter:drop-shadow(0px 0px 2px rgba(255,215,0,.8))}.banner__guaranty span{color:gold;font-size:calc(var(--font-size-sm) * .9);font-weight:var(--font-weight-bold);text-shadow:0px 0px 3px rgba(0,0,0,.7);line-height:1}.banner__image{position:absolute;bottom:0;right:-20px;z-index:0;height:110%;transition:transform .3s ease}.scroll-arrow{position:absolute;left:50%;z-index:3;background:#ffffffd9;border:1px solid var(--color-primary);border-radius:50%;padding:6px;cursor:pointer;box-shadow:0 2px 8px #00000026;transition:background .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;transform:translateY(-30%)}.scroll-arrow--up{transform:translateY(-70%) rotate(180deg)}@media (min-width: 1024px){.scroll-arrow{display:none}}:global(.dark) .banner{background-color:var(--color-dark-lighter);border-color:var(--color-border)}:global(.dark) .banner:hover{background-color:var(--color-dark);border-color:var(--color-primary);box-shadow:0 8px 16px #0000004d}:global(.dark) .banner:active{background-color:var(--color-dark);border-color:var(--color-primary-dark)}:global(.dark) .banner[data-is-active=true]{background-color:var(--color-dark);border:2px solid var(--color-primary);box-shadow:0 0 10px rgba(var(--color-primary-rgb),.5)}:global(.dark) .banner[data-is-active=true] .banner__title{color:var(--color-primary)}:global(.dark) .banner__title{color:var(--color-text)}:global(.dark) .banner__guaranty{background-color:#000c}:global(.dark) .banner__guaranty span{color:gold}:global(.dark) .scroll-arrow{background:#1e1e1ee6;border-color:var(--color-primary)}:global(.dark) .scroll-arrow:hover{background:#282828f2}