/* ti-offers ti-offers.css (itorrents-igruha): sliders of the right column, the discounts card in the sections. Generated from the approved demos; do not edit by hand - see the package. */
.tsl{position:relative;width:220px;height:330px;margin:0 auto;border-radius:6px;overflow:hidden;isolation:isolate;background:#06080e; box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:transform .22s ease,box-shadow .22s ease;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.tsl,.tsl *{color:#fff}
.tsl:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.4)}
.tsl__s{position:absolute;inset:0;opacity:0;visibility:hidden;text-decoration:none;transition:opacity .7s ease,visibility 0s linear .7s}
.aside-promo .tsl__s,.aside-promo .tsl__s:hover{transform:none}
.tsl__s.is-on{z-index:1;opacity:1;visibility:visible;transition:opacity .7s ease}
.tsl__s img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 40%}
.tsl.is-anim .tsl__s.is-on img{animation:tsl-zoom 7s ease-out both}
@keyframes tsl-zoom{from{transform:scale(1.09)}to{transform:scale(1.01)}}
.tsl__s img{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.68) 0,#000 24%,#000 46%,rgba(0,0,0,.44) 70%,rgba(0,0,0,.07) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.68) 0,#000 24%,#000 46%,rgba(0,0,0,.44) 70%,rgba(0,0,0,.07) 100%)}
.tsl__off{position:absolute;z-index:2;top:9px;left:9px;padding:3px 8px;border-radius:999px;background:#e5373d;font-size:12px;font-weight:800;line-height:1.3;letter-spacing:.01em;box-shadow:0 2px 10px rgba(229,55,61,.45)}
.tsl__cap{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 14px 30px}
.tsl--c .tsl__cap{text-align:center}
.tsl__t{display:-webkit-box;margin:0 0 7px;overflow:hidden;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.6);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tsl__pr{display:flex;align-items:baseline;gap:8px;font-size:22px;font-weight:800;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tsl--c .tsl__pr{justify-content:center}
.tsl__pr s{font-size:12.5px;font-weight:600;opacity:.72;text-decoration:line-through}
.tsl.is-anim .tsl__s.is-on .tsl__cap{animation:tsl-up .55s .12s cubic-bezier(.2,.7,.2,1) backwards}
.tsl.is-anim .tsl__s.is-on .tsl__off{animation:tsl-pop .45s .3s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes tsl-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tsl-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.tsl__d{position:absolute;z-index:3;left:14px;right:14px;bottom:11px;display:flex;gap:5px}
.tsl--c .tsl__d{justify-content:center}
.tsl__d button{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.42);cursor:pointer;overflow:hidden;transition:width .3s ease,background .3s}
.tsl__d button.is-on{width:18px}
.tsl--pd .tsl__d button.is-on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:tsl-run var(--tsl-t,4.5s) linear both}
.tsl.is-paused .tsl__d button.is-on::after{animation-play-state:paused}
@keyframes tsl-run{from{transform:scaleX(0)}to{transform:none}}
@keyframes tsl-fade{from{opacity:0}to{opacity:1}}
.tsl--z210{width:210px;height:300px}
.tsl--z210 .tsl__s img{object-position:50% 0;transform-origin:50% 25%}
.tsl--rn .tsl__off{display:none}
.tsl--rn .tsl__s img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 44%,rgba(0,0,0,.42) 68%,rgba(0,0,0,.06) 100%);mask-image:linear-gradient(180deg,#000 0,#000 44%,rgba(0,0,0,.42) 68%,rgba(0,0,0,.06) 100%)}
@media (prefers-reduced-motion:reduce){.tsl__s.is-on img,.tsl__d button.is-on::after,.tsl__s.is-on .tsl__cap,.tsl__s.is-on .tsl__off{animation:none}
.tsl__s{transition:none}}
.tsl__sw{display:none;font-size:12px;font-weight:400;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.7);white-space:nowrap}
.tsl__sw s{opacity:.85}
.tsl--st .tsl__off{display:block;top:9px;left:9px;padding:3px 7px;border-radius:4px;background:#4c6b22;box-shadow:0 2px 8px rgba(0,0,0,.35);font-size:12.5px;font-weight:600;letter-spacing:0}
.tsl--st .tsl__off{color:#beee11 !important}
.tsl--st .tsl__sw{display:inline}
.tsl--st .tsl__t{font-weight:600}
.tsl--st .tsl__pr{gap:7px;font-size:21px;font-weight:700}
.tsl--st.is-anim .tsl__s.is-on .tsl__off{animation:tsl-fade .4s .3s backwards}
.tsl__nw,.tsl__sz{display:none}
.tsl--nkg .tsl__nw{display:block;position:absolute;top:9px;left:9px;z-index:2;padding:3px 7px;border-radius:4px;background:#4c6b22;box-shadow:0 2px 8px rgba(0,0,0,.35); color:#beee11 !important;font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:0}
.tsl--nkg.is-anim .tsl__s.is-on .tsl__nw{animation:tsl-fade .4s .3s backwards}
.tsl--nkg .tsl__sz{display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.55);font:500 12px/1.5 Arial,sans-serif;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tsl--nkg .tsl__s img{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0,#000 22%,#000 52%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.1) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0,#000 22%,#000 52%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.1) 100%)}
.ofc .game-card__cover{background:#141a24}
.ofc__in{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;border-radius:3px}
.ofc .szb.ofc__d{z-index:3;background:#4c6b22;color:#beee11;font-weight:600}
.ofc__in,.ofc__in *{color:#fff}
.ofc__k{position:absolute;left:0;right:0;bottom:36px;z-index:2;color:#fff !important;font:12px/1.3 Arial,sans-serif;letter-spacing:.03em;text-align:center;opacity:.9}
.ofc__k b{display:block;margin-bottom:1px;font-size:19px;letter-spacing:0}
.ofc--a .ofc__in{background:radial-gradient(90% 60% at 50% 34%,rgba(124,179,66,.4),transparent 70%),linear-gradient(170deg,#25334b,#141a24)}
.ofc__fan{position:absolute;left:0;right:0;top:12%;height:52%}
.ofc__fan .ofc__p{position:absolute;top:0;left:50%;width:46%;aspect-ratio:2/3;height:auto;margin-left:-23%;border-radius:4px;object-fit:cover;box-shadow:0 8px 18px rgba(0,0,0,.45);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ofc__fan .ofc__p:nth-child(1){transform:translateX(-30%) rotate(-13deg)}
.ofc__fan .ofc__p:nth-child(2){z-index:2}
.ofc__fan .ofc__p:nth-child(3){transform:translateX(30%) rotate(13deg)}
.ofc:hover .ofc__fan .ofc__p:nth-child(1){transform:translateX(-36%) rotate(-17deg)}
.ofc:hover .ofc__fan .ofc__p:nth-child(3){transform:translateX(36%) rotate(17deg)}
.ofc--a2 .ofc__in{background:radial-gradient(90% 60% at 50% 32%,rgba(190,238,17,.3),transparent 70%),linear-gradient(165deg,#5a8128,#2c4313)}
.ofc--a3 .ofc__in{background:#141a24}
.ofc__bg{position:absolute;inset:-20px;background:center/cover no-repeat;filter:blur(16px) saturate(1.3) brightness(.55);transform:scale(1.1)}
.ofc--a3 .ofc__in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,0) 40%,rgba(10,14,20,.75))}
.ofc--a3 .ofc__fan,.ofc--a3 .ofc__k{z-index:2}
.ofc--a5 .ofc__in{background:radial-gradient(90% 60% at 50% 34%,rgba(124,179,66,.35),transparent 70%),linear-gradient(170deg,#f6f9f1,#e2ecd5)}
.ofc--a5 .ofc__k,.ofc--a5 .ofc__k *{color:#2f4a12 !important}
.theme-dark .ofc--a5 .ofc__in{background:radial-gradient(90% 60% at 50% 34%,rgba(51,201,236,.3),transparent 70%),linear-gradient(170deg,#3a4250,#262c35)}
.theme-dark .ofc--a5 .ofc__k,.theme-dark .ofc--a5 .ofc__k *{color:#e9ecf0 !important}
.ofc--a5 .ofc__fan .ofc__p{box-shadow:0 8px 18px rgba(30,40,20,.35)}
/* the first cover: from the server already a little zoomed in, as the next covers start; the slow zoom out starts when its picture is
   loaded and the slider is on the screen (class is-z0 from the script) - no jump when the page loads */
.tsl:not(.is-anim):not(.is-z0) .tsl__s.is-on img{transform:scale(1.09)}
.tsl.is-z0 .tsl__s.is-on img{animation:tsl-zoom 7s ease-out both}
@media (prefers-reduced-motion:reduce){.tsl:not(.is-anim):not(.is-z0) .tsl__s.is-on img{transform:none}}
/* browsing by hand: arrows and dots on one small translucent panel at the bottom (seen always, on phones too), swipe (finger or mouse);
   the dot itself is the <i>, the button around it is bigger - easy to hit */
.tsl{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tsl__cap{padding-bottom:37px}
.tsl__d{left:0;right:0;width:max-content;margin:0 auto;bottom:7px;align-items:center;gap:0;padding:0 2px;border-radius:999px;background:rgba(8,10,16,.55);box-shadow:0 0 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tsl__d button,.tsl__d button.is-on{width:auto;height:auto;padding:8px 2.5px;background:none;border-radius:0;overflow:visible}
.tsl__d button i{display:block;position:relative;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.42);overflow:hidden;transition:width .3s ease,background-color .3s}
.tsl__d button.is-on i{width:18px}
.tsl__d button:not(.tsl__a):hover i{background:rgba(255,255,255,.75)}
.tsl--pd .tsl__d button.is-on::after{content:none}
.tsl--pd .tsl__d button.is-on i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:tsl-run var(--tsl-t,4.5s) linear both}
.tsl.is-paused .tsl__d button.is-on i::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tsl__d button.is-on i::after{animation:none}}
.tsl__d .tsl__a{display:grid;place-items:center;width:24px;height:22px;padding:0;border-radius:999px;color:#fff;cursor:pointer;transition:background-color .2s}
.tsl__d .tsl__a:hover{background:rgba(255,255,255,.16)}
.tsl__d .tsl__a svg{width:15px;height:15px}
/* change of slides without a dip into black: every slide has the dark background of the card, the old slide stays fully under
   the new one (is-out) until the new one has appeared */
.tsl__s{background:#06080e}
.tsl__s.is-out{visibility:visible;opacity:1;transition:none}
/* change of slides - "\43f \440 \43e \44f \432 \43b \435 \43d \438 \435  \431 \435 \437  \43d \430 \43b \43e \436 \435 \43d \438 \44f  \442 \435 \43a \441 \442 \430 ": the new picture comes faster, the old caption and badges go at once,
   the new caption comes up after the picture (no two texts over each other); on phones and computers the same */
.tsl.is-anim .tsl__s.is-on{transition:opacity .45s ease}
.tsl__s.is-out .tsl__cap,.tsl__s.is-out .tsl__off,.tsl__s.is-out .tsl__nw{opacity:0;transition:opacity .12s}
.tsl.is-anim .tsl__s.is-on .tsl__cap{animation:tsl-up .45s .28s cubic-bezier(.2,.7,.2,1) backwards}
.tsl.is-anim .tsl__s.is-on .tsl__off,.tsl.is-anim .tsl__s.is-on .tsl__nw{animation:tsl-fade .3s .3s backwards}
@media (prefers-reduced-motion:reduce){.tsl.is-anim .tsl__s.is-on .tsl__cap,.tsl.is-anim .tsl__s.is-on .tsl__off,.tsl.is-anim .tsl__s.is-on .tsl__nw{animation:none}}
/* motion of the covers switched off in the admin page: the covers stand still */
.tsl--still .tsl__s img,.tsl--still.is-anim .tsl__s.is-on img,.tsl--still.is-z0 .tsl__s.is-on img{animation:none !important;transform:none !important}
/* "\413 \43b \430 \432 \43d \44b \435  \43d \43e \432 \438 \43d \43a \438 ": under the name - size (or release date), Russian voice / text, Steam reviews */
.tsl__mt{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.tsl__ch{display:inline-flex;align-items:center;gap:3px;padding:2px 5px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font:500 11.5px/1.5 Arial,sans-serif;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.tsl__ch svg{width:12px;height:12px;flex:none;opacity:.85}
.tsl__ch>span{position:relative;top:1px;color:inherit}   /* the colour of the chip (green RU, %), not the white of ".tsl *" */
.tsl__ch--ru{color:#bfe86a}.tsl__ch--up{color:#a4e05a}.tsl__ch--mx{color:#f2c45e}.tsl__ch--lo{color:#ff8a7a}
/* captions (variant B of the demo): the name in regular weight with a light shadow - the bold one looked heavy on the small covers;
   the price a little lighter; no \ab \41d \43e \432 \438 \43d \43a \430 \bb  badge - the block is called \ab \413 \43b \430 \432 \43d \44b \435  \43d \43e \432 \438 \43d \43a \438 \bb  anyway */
.tsl .tsl__t,.tsl--st .tsl__t{font-weight:400;font-size:15px;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.tsl--nkg .tsl__nw{display:none}
.tsl--st .tsl__pr{font-size:20px;font-weight:600}
.tsl__pr s{font-weight:400}
.tsl--st .tsl__off{padding:2px 7px;font-size:12px}
/* no names on the sliders (variant B of the demo): the name is on the cover itself (and stays in alt of the picture); under the mouse - the usual
   hint of the browser with the name (title of the link), as on the game cards of the site;
   the bottom of the covers is darkened less - the poster is seen almost whole */
.tsl .tsl__t{display:none}
.tsl--nkg .tsl__s img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.22) 100%);mask-image:linear-gradient(180deg,#000 0,#000 60%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.22) 100%)}
.tsl--rn .tsl__s img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.16) 100%);mask-image:linear-gradient(180deg,#000 0,#000 56%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.16) 100%)}
/* the card in the sections: its three covers come together with a soft fade over their blurred previews (the previews and the
   blurred background are inside the page - seen at once), as on the page of the discounts */
.ofc__fan .ofc__p{display:block;overflow:hidden;background:#1c222c}
.ofc__p::before{content:"";position:absolute;inset:-6px;background:var(--pv) center/cover no-repeat;filter:blur(5px) saturate(1.1)}
.ofc__p img{position:relative;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.ofc__in.is-wait .ofc__p img{opacity:0;transition:none}
.ofc__in.is-now .ofc__p img{transition:none}
/* while the cover of a slide is read (from the cache too) - its blurred preview instead of the black (the preview is in the page,
   style --pv of the picture; it is under the picture and goes under the same darkening) */
.tsl__s img{background:var(--pv) 50% 0/cover no-repeat}
/* the fire of \ab \413 \43e \440 \44f \447 \438 \435  \441 \43a \438 \434 \43a \438 \bb  - orange as on the page of the discounts */
.aside-title .shi.shi--fire.tio-fire{background:#ff6a3d}