/* sim-ui.css */
/* Streamer-mode block of the settings modal: loaded in both looks. */
/* streamer-mode block inside the settings modal (also shown in the streamer look) */
.sim-streamer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1.6rem;
  border-radius: 0.2rem;
  border: 0.1rem solid rgba(131, 216, 255, 0.35);
  background: rgba(131, 216, 255, 0.06);
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif;
}
.sim-streamer__head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.sim-streamer__title {
  font-size: 1.8rem; font-weight: 600; line-height: 1.8rem; color: #fff;
}
.sim-streamer__text { font-size: 1.5rem; line-height: 1.35; color: rgba(255, 255, 255, 0.55); }
.sim-streamer__row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.sim-streamer__price { font-size: 1.6rem; color: #fff; }
.sim-streamer__price b { color: #44C987; }
.sim-streamer__msg { font-size: 1.4rem; color: #FFB15C; min-height: 1.4rem; }
.sim-streamer__btn {
  height: 4.4rem; padding: 0 2.4rem; border-radius: 0.2rem; cursor: pointer;
  border: 0.1rem solid #44C987; background: #13432C; color: #fff;
  font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.6rem; text-transform: uppercase;
  box-shadow: inset 0 0 1.66rem rgba(68, 201, 135, 0.4);
}
.sim-streamer__btn:disabled { opacity: 0.5; cursor: default; }
.sim-switch {
  position: relative; width: 4.8rem; height: 2.6rem; flex-shrink: 0; border-radius: 1.3rem; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, 0.18); transition: background 0.2s;
}
.sim-switch::after {
  content: ""; position: absolute; top: 0.3rem; left: 0.3rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.sim-switch[aria-checked="true"] { background: #44C987; }
.sim-switch[aria-checked="true"]::after { transform: translateX(2.2rem); }
@media (max-width: 992px) {
  .sim-streamer__title { font-size: 1.6rem; }
  .sim-streamer__text { font-size: 1.3rem; }
}
/* The deposit form's unit: always roubles (sim.js ensureRubUnit). */
.sim-rub { display: inline-flex; align-items: center; font-size: 0 !important; line-height: 0; }
/* line-height is set again: the span's 100% resolves against its zero font size. */
.sim-rub::after { content: "₽"; font-size: var(--sim-rub-size, 2.4rem); line-height: 1; }

/* The streamer mode's plans and demo button (settings modal, «Бонусы» card, the offer after a demo) */
.sim-streamer__plans { display: flex; flex-direction: column; gap: 1rem; }
.sim-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.sim-plan {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  min-height: 6.4rem; padding: 0.8rem 0.6rem; border-radius: 0.2rem; cursor: pointer; color: #fff;
  border: 0.1rem solid rgba(228, 174, 57, 0.55); background: rgba(74, 57, 18, 0.55);
  font-family: var(--font-oswald), "Oswald", sans-serif; text-transform: uppercase; transition: background 0.2s, box-shadow 0.2s;
}
.sim-plan:hover { background: rgba(110, 84, 24, 0.75); box-shadow: inset 0 0 1.66rem rgba(228, 174, 57, 0.45); }
.sim-plan:disabled { opacity: 0.6; cursor: default; }
.sim-plan--main { border-color: #E4AE39; background: #4A3912; box-shadow: inset 0 0 1.66rem rgba(228, 174, 57, 0.45); }
.sim-plan__title { font-size: 1.4rem; line-height: 1.2; color: rgba(255, 255, 255, 0.75); }
.sim-plan__price { font-size: 2rem; line-height: 1.1; color: #fff; }
.sim-plan__tag {
  position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); padding: 0.1rem 0.6rem; border-radius: 0.2rem;
  background: #44C987; color: #0d2a1c; font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; font-size: 1.1rem;
  font-weight: 700; line-height: 1.6rem; white-space: nowrap; text-transform: none;
}
.sim-plan-demo {
  height: 4.4rem; padding: 0 1.6rem; border-radius: 0.2rem; cursor: pointer; color: #fff;
  border: 0.1rem dashed rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.6rem; text-transform: uppercase;
}
.sim-plan-demo:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.sim-plan-demo:disabled { opacity: 0.6; cursor: default; }
.sim-plans__note { font-size: 1.4rem; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }
/* 2026-10-31: «Криптой · CryptoBot» and «Звёздами Telegram ⭐» wrap to two lines in a narrow window: the button grows
   with its text instead of spilling it over its edges; the row keeps room for the «выгоднее» tag of the plan below */
.sim-paymethods { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.sim-paymethod {
  flex: 1 1 0; min-width: 12rem; min-height: 3.6rem; padding: 0.5rem 1rem; border-radius: 0.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25;
  color: rgba(255, 255, 255, 0.7); border: 0.1rem solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; font-size: 1.4rem; font-weight: 600;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sim-paymethod:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.sim-paymethod.is-on { color: #fff; border-color: #44C987; background: rgba(68, 201, 135, 0.14); }
@media (max-width: 480px) { .sim-plan__price { font-size: 1.7rem; } .sim-plan__title { font-size: 1.2rem; } }

/* The demo of the streamer look: a bar with the time left */
.sim-demo {
  position: fixed; left: 50%; bottom: 2rem; z-index: 2147483000; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.2rem; max-width: calc(100vw - 3.2rem); padding: 0.8rem 0.8rem 0.8rem 1.6rem;
  border-radius: 0.4rem; border: 0.1rem solid #E4AE39; background: rgba(18, 18, 18, 0.94); color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5); font-family: var(--font-oswald), "Oswald", sans-serif; text-transform: uppercase;
}
.sim-demo__label { font-size: 1.4rem; color: #E4AE39; white-space: nowrap; }
.sim-demo__clock { font-size: 2rem; font-weight: 400; font-variant-numeric: tabular-nums; min-width: 5.6rem; }
.sim-demo__buy, .sim-demo__exit {
  height: 3.6rem; padding: 0 1.4rem; border-radius: 0.2rem; cursor: pointer; color: #fff; white-space: nowrap;
  font-family: inherit; font-size: 1.4rem; text-transform: uppercase;
}
.sim-demo__buy { border: 0.1rem solid #E4AE39; background: #4A3912; }
.sim-demo__exit { border: 0.1rem solid rgba(255, 255, 255, 0.3); background: transparent; }
.sim-demo__hint {
  position: absolute; left: 50%; bottom: calc(100% + 0.8rem); transform: translateX(-50%); display: flex; align-items: center;
  gap: 1rem; padding: 0.6rem 0.6rem 0.6rem 1.2rem; border-radius: 0.4rem; white-space: nowrap; background: rgba(18, 18, 18, 0.94);
  border: 0.1rem solid rgba(255, 255, 255, 0.2); font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif;
  font-size: 1.3rem; text-transform: none; color: rgba(255, 255, 255, 0.85);
}
.sim-demo__reload {
  height: 2.8rem; padding: 0 1rem; border-radius: 0.2rem; cursor: pointer; color: #fff; white-space: nowrap;
  border: 0.1rem solid #E4AE39; background: #4A3912; font-family: inherit; font-size: 1.3rem; font-weight: 600;
}
@media (max-width: 600px) {
  .sim-demo { bottom: 9rem; gap: 0.8rem; padding-left: 1rem; }
  .sim-demo__label { display: none; }
  .sim-demo__hint { white-space: normal; width: calc(100vw - 3.2rem); justify-content: space-between; }
}

/* Layout shift (both looks): the page column is one screen tall with the footer pushed to its
   bottom, so before the page's data arrives the footer sits in view and then jumps down
   (CLS 0.74 on mobile). Pages that are always taller than a screen (upgrade, a case) and the cases
   list while it loads take a screen at once; short pages (a guest's «sign in» gate) keep the
   original's footer right under them. */
div.contents:has(> div.contents > footer.mt-auto) > div:first-child:has([data-testid="upgrade-center-block"],
  [data-testid^="case-open"]) { min-height: 100svh; }
/* a guest's cases list is the short «sign in» gate: held a screen tall, its footer would come up into
   view when the gate replaces the skeleton (html[data-sim-guest], simulator_brand.LAYOUT_EARLY) */
html:not([data-sim-guest]) div.contents:has(> div.contents > footer.mt-auto) > div:first-child:has([data-testid="cases-page-skeleton"]) { min-height: 100svh; }
/* A guest gets the short «sign in» gate where the tall skeleton was, and the footer (on a case page its
   whole row) would come up into view: it stays unseen while the skeleton is up, then shows in its place. */
html[data-sim-guest] body:has([data-testid="case-open-skeleton"], [data-testid="cases-page-skeleton"]) :is(div:has(> footer), footer) {
  visibility: hidden; animation: sim-show 0s 3s forwards; }
/* never hidden for good: shown after 3s whatever happens (a skeleton that stays, a page that changed) */
@keyframes sim-show { to { visibility: visible; } }

/* our custom emoji in place of the system ones (sim.js EMOJI, 2026-10-31) */
.sim-e { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.28em; object-fit: contain;
  margin: 0 0.06em; pointer-events: none; user-select: none; }
.sim-e--silver { filter: grayscale(1) brightness(1.3) contrast(1.05); }
.sim-e--bronze { filter: sepia(1) saturate(2.6) hue-rotate(-20deg) brightness(0.8); }
@media (prefers-reduced-motion: no-preference) {
  .sim-e--gift, .sim-e--fire, .sim-e--spark { animation: sim-e-alive 2.8s ease-in-out infinite; transform-origin: 50% 80%; }
  .sim-e--fire { animation-duration: 1.6s; }
}
@keyframes sim-e-alive { 0%, 100% { transform: rotate(0) scale(1); } 40% { transform: rotate(-6deg) scale(1.08); }
  70% { transform: rotate(4deg) scale(1.02); } }

/* sim.css */
/* Simulator presentation (backend/simulator_brand.py). The streamer look never loads this file. */

/* The wordmark image now carries «СИМУЛЯТОР» under the letters: give it the extra height
   so «КЕЙСЕР» keeps its original size. */
[data-testid="header-logo-link"] img[data-brand-wordmark] { height: 5.9rem !important; }
[data-testid="upgrade-center-block"] img[data-brand-wordmark] { height: 5.1rem !important; }
footer img[src*="logo_text_"] { height: 5.9rem !important; width: auto !important; }
@media (max-width: 992px) {
  :root { --brand-header-logo-width-mobile: 13.6rem; }
  [data-testid="header-logo-link"] img[data-brand-wordmark] { height: 4.1rem !important; }
  footer img[src*="logo_text_"] { height: 3.9rem !important; }
}
@media (max-width: 380px) {
  :root { --brand-header-logo-width-mobile: 11.875rem; }
  [data-testid="header-logo-link"] img[data-brand-wordmark] { height: 3.6rem !important; }
}

/* The original's social links have no place here (no channel of ours, or a different one). */
a[href="#sim-off"] { display: none !important; }

.sim-disclaimer {
  width: 100%;
  box-sizing: border-box;
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem;
  border-radius: 0.2rem;
  border: 0.1rem solid rgba(68, 201, 135, 0.35);
  background: rgba(19, 67, 44, 0.35);
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif;
  font-size: 1.4rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.sim-disclaimer b {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-oswald), "Oswald", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #44C987;
}
.sim-disclaimer a { color: #83D8FF; }
/* The disclaimer comes after React (sim.js ensureDisclaimer): until then the footer holds its room with
   the same words in the same box, unseen, and the real one takes that place. On a short page (a guest's
   «sign in» gate) the footer stands at the bottom of the screen and a box coming in would push it up.
   The words repeat T.discTitle/T.disc of sim.js (with the site's support e-mail and Telegram); the
   first line is the title's room (its 1.6rem line and 0.4rem gap, made up in padding-top). */
footer:not(:has(> .sim-disclaimer))::after {
  content: "Кейсер Симулятор\A Развлекательный симулятор открытия кейсов и апгрейдов CS2. Проект не связан с Caser, Valve Corporation и Steam. Баланс сайта — виртуальные монеты без денежной стоимости: их нельзя вывести, обменять или продать. Предметы существуют только внутри симулятора, реальных выводов в Steam нет. Только для лиц старше 18 лет. Поддержка: support@caser.ca · Telegram";
  display: block; width: 100%; box-sizing: border-box; margin-top: 1.6rem; padding: calc(1.4rem + 0.68rem) 1.6rem 1.4rem;
  border: 0.1rem solid transparent; white-space: pre-line; visibility: hidden;
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; font-size: 1.4rem; line-height: 1.4; }
html:lang(en) footer:not(:has(> .sim-disclaimer))::after { content: "Caser Simulator\A An entertainment CS2 case opening and upgrade simulator. Not affiliated with Caser, Valve Corporation or Steam. The site balance is virtual coins with no monetary value: they cannot be withdrawn, exchanged or sold. Items exist only inside the simulator; there are no real withdrawals to Steam. 18+ only. Support: support@caser.ca · Telegram"; }

.sim-rate {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
  margin: 1rem 0 0;
  padding: 1rem 1.4rem;
  border-radius: 0.2rem;
  background: rgba(68, 201, 135, 0.12);
  border: 0.1rem solid rgba(68, 201, 135, 0.4);
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.75);
}
.sim-rate strong { color: #44C987; font-weight: 700; }

@media (max-width: 992px) {
  .sim-disclaimer { font-size: 1.2rem; }
  footer:not(:has(> .sim-disclaimer))::after { font-size: 1.2rem; padding-top: calc(1.4rem + 0.96rem); }
}

/* ---- «Бонусы» instead of «Награды» (sim.js ensureBonusPage). The original rewards page is
   hidden from the first paint; our page takes its place in the same container. ---- */
[class~="max-w-[152rem]"][class~="items-center"]:has([data-testid="weekly-drop-tab-rewards"]) > :not(.sim-bpage),
[class~="max-w-[152rem]"][class~="items-center"]:has([data-testid="giveaway-list"]) > :not(.sim-bpage) { display: none !important; }
[class~="max-w-[152rem]"][class~="items-center"]:has([data-testid="weekly-drop-tab-rewards"]):not(:has(> .sim-bpage))::before {
  content: ""; display: block; width: 100%; min-height: 70vh;
}
.sim-bpage { display: flex; flex-direction: column; gap: 2rem; width: 100%; scroll-margin-top: 9rem;
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; }
.sim-bpage__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.sim-bonus__h {
  font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.8rem; line-height: 4.1rem;
  text-transform: uppercase; color: #fff; margin: 0;
}
.sim-bpage__sub { font-size: 1.5rem; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
.sim-amt { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-oswald), "Oswald", sans-serif;
  font-size: 4rem; line-height: 1; color: #fff; }
.sim-amt__coin { width: 3rem; height: 3rem; }

/* the lock banner: every bonus needs the Telegram subscription */
.sim-block { display: flex; align-items: center; gap: 2rem; padding: 2rem 2.4rem; border-radius: 0.2rem;
  background: linear-gradient(100deg, rgba(10, 30, 52, 0.92), rgba(28, 110, 180, 0.85)); border-bottom: 5px solid #2AABEE;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }
.sim-block__icon { flex-shrink: 0; width: 5.6rem; height: 5.6rem; padding: 1.2rem; border-radius: 50%;
  background: rgba(42, 171, 238, 0.25); color: #fff; box-shadow: 0 0 2.4rem rgba(42, 171, 238, 0.5); }
.sim-block__icon svg { width: 100%; height: 100%; }
.sim-block__text { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.sim-block__text b { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem; text-transform: uppercase; color: #fff; }
.sim-block__text span { font-size: 1.5rem; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }

/* the free case */
.sim-fcase { position: relative; display: grid; grid-template-columns: 30rem minmax(0, 1fr); min-height: 26rem; overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 100%); border-bottom: 5px solid #E4AE39;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }
.sim-fcase::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(228, 174, 57, 0.22) 0%, rgba(228, 174, 57, 0) 40%),
              repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 26px); }
.sim-fcase__info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; padding: 3rem; }
.sim-fcase__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3.6rem;
  line-height: 1.1; text-transform: uppercase; color: #fff; }
.sim-fcase__sub { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; color: #E4AE39; }
.sim-fcase__actions { margin-top: auto; display: flex; flex-direction: column; gap: 1rem; }
.sim-reel { position: relative; z-index: 1; overflow: hidden; align-self: center; margin: 2.4rem 2.4rem 2.4rem 0; height: 19rem;
  background: rgba(0, 0, 0, 0.35); border-radius: 0.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.sim-reel__track { display: flex; gap: 0.8rem; height: 100%; padding: 1.2rem 0; will-change: transform; }
.sim-reel__marker { position: absolute; left: 50%; top: 0; bottom: 0; width: 0.3rem; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #E4AE39 15%, #E4AE39 85%, transparent);
  box-shadow: 0 0 1.4rem rgba(228, 174, 57, 0.9); pointer-events: none; }
.sim-tile { position: relative; flex: 0 0 13.6rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 0.2rem; padding: 0.8rem 0.8rem 1.2rem; overflow: hidden; border-radius: 0.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, color-mix(in srgb, var(--c) 28%, transparent) 100%);
  border-bottom: 0.4rem solid var(--c); }
.sim-tile--jp { box-shadow: inset 0 0 2.4rem color-mix(in srgb, var(--c) 55%, transparent); }
.sim-tile--won { outline: 0.2rem solid #E4AE39; box-shadow: 0 0 2.4rem rgba(228, 174, 57, 0.75), inset 0 0 2.4rem rgba(228, 174, 57, 0.4); }
.sim-tile__img { width: 11rem; height: 8rem; object-fit: contain; margin-bottom: auto; filter: drop-shadow(0 0.8rem 1rem rgba(0, 0, 0, 0.5)); }
.sim-tile__img--coin { width: 6rem; height: 6rem; margin-top: 1rem; }
.sim-tile__name { max-width: 100%; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #fff; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-tile__skin { max-width: 100%; font-size: 1.1rem; line-height: 1.2; color: rgba(255, 255, 255, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-tile__price { font-size: 1.15rem; font-weight: 700; color: #E4AE39; }

/* the three cards, in the original's giveaway-card manner */
.sim-bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.sim-bcard { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 100%); }
.sim-bcard__top { position: relative; display: flex; flex-direction: column; gap: 1.6rem; min-height: 19rem; padding: 3rem 3rem 3.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 0%, transparent) 0%, color-mix(in srgb, var(--c) 55%, transparent) 100%);
  border-bottom: 5px solid var(--c); }
.sim-bcard__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem;
  line-height: 3.6rem; text-transform: uppercase; color: #fff; max-width: 75%; }
.sim-bcard__icon { position: absolute; right: 2.4rem; top: 2.4rem; width: 6.4rem; height: 6.4rem; color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 1.6rem rgba(42, 171, 238, 0.9)); }
.sim-bcard__icon svg { width: 100%; height: 100%; }
.sim-bcard__text { font-size: 1.5rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.sim-bcard__bottom { display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 3rem 2rem; flex: 1; }
/* what else the card opens, at its foot: the row of three keeps one height (the streamer card is the tallest) */
.sim-bcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.4rem;
  border-top: 0.1rem solid rgba(255, 255, 255, 0.08); }
.sim-bcard__foot-title { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45); }
.sim-bcard__perk { font-size: 1.4rem; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.sim-bcard__link { align-self: flex-start; font-size: 1.4rem; color: #57C3F5; text-decoration: none; }
.sim-bcard__link:hover { color: #9BDCFA; text-decoration: underline; text-underline-offset: 0.2rem; }
.sim-bcard__done { font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 2rem; text-transform: uppercase; color: #44C987;
  display: flex; align-items: center; min-height: 4.8rem; }
.sim-bcard--flash { animation: sim-flash 1.4s ease-out 2; }
@keyframes sim-flash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 0.3rem #2AABEE, 0 0 3rem rgba(42, 171, 238, 0.8); } }
.sim-timer { display: flex; flex-direction: column; gap: 0.2rem; }
.sim-timer__label { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sim-timer__clock { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3.2rem; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums; }
.sim-bmsg { min-height: 1.6rem; font-size: 1.4rem; line-height: 1.35; color: #FFB15C; }
.sim-bmsg--ok { color: #44C987; }
.sim-tgline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; font-size: 1.3rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.6); overflow-wrap: anywhere; }
.sim-tgline__btn { padding: 0; border: 0; background: none; font: inherit; color: #57C3F5; text-decoration: underline;
  text-underline-offset: 0.2rem; cursor: pointer; }
.sim-tgline__btn:hover { color: #9BDCFA; }
.sim-tgline__note { color: rgba(255, 255, 255, 0.45); }
.sim-bbtn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 4.8rem; padding: 0 2rem;
  border-radius: 0.2rem; cursor: pointer; text-decoration: none; white-space: nowrap; color: #fff;
  font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; text-transform: uppercase;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s; }
.sim-bbtn:active { transform: translateY(1px); }
.sim-bbtn:disabled { opacity: 0.6; cursor: default; }
.sim-bbtn--main { border: 0.1rem solid #44C987; background: #13432C; box-shadow: inset 0 0 1.66rem rgba(68, 201, 135, 0.45); }
.sim-bbtn--main:hover { background: #1D5A3A; box-shadow: inset 0 0 1.66rem rgba(68, 201, 135, 0.65); }
.sim-bbtn--tg { border: 0.1rem solid #57C3F5; background: linear-gradient(180deg, #2AABEE 0%, #1C8ACB 100%); }
.sim-bbtn--tg:hover { background: linear-gradient(180deg, #3BB7F5 0%, #2296D8 100%); }
.sim-bbtn--gold { border: 0.1rem solid #E4AE39; background: #4A3912; box-shadow: inset 0 0 1.66rem rgba(228, 174, 57, 0.45); }
.sim-bbtn--ghost { border: 0.1rem solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.25); }
.sim-block .sim-bbtn { width: auto; min-width: 24rem; }
.sim-bwin { display: flex; flex-direction: column; gap: 1.2rem; }
.sim-bwin__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; text-transform: uppercase; color: #fff; }
.sim-bwin__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.8rem; }
.sim-bwin__row .sim-tile { flex: none; min-height: 15rem; }

/* «Получи баланс бесплатно»: the original's live-drop promo banner, ours above it */
.sim-freebal { position: relative; z-index: 2; display: flex; align-items: center; flex-shrink: 0; width: 100%; height: 9.4rem;
  padding: 0 1rem; overflow: hidden; text-decoration: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 62%), url(/sim/freebal.webp?v=5) center / cover no-repeat, #2b2b2b;
  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.4); }
.sim-freebal::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background 0.2s; }
.sim-freebal:hover::after { background: rgba(255, 255, 255, 0.06); }
.sim-freebal__text { position: relative; display: flex; flex-direction: column; gap: 0.2rem; white-space: nowrap;
  font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 2.4rem; font-weight: 400; line-height: 120%; text-transform: uppercase; }
.sim-freebal__get { color: #fff; }
.sim-freebal__what { background: linear-gradient(90deg, #44c987 45%, #b7f7d3); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* «Войти через Telegram / Google» in the login window (sim.js ensureAuthProviders) */
.sim-auth { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.sim-auth__or { display: flex; align-items: center; gap: 1rem; color: rgba(255, 255, 255, 0.4); font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif;
  font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; }
.sim-auth__or::before, .sim-auth__or::after { content: ""; flex: 1; height: 0.1rem; background: rgba(255, 255, 255, 0.12); }
.sim-auth__btn { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 4.4rem; border-radius: 0.2rem;
  cursor: pointer; color: #fff; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 1.6rem;
  letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.2s, opacity 0.2s, border-color 0.2s; }
.sim-auth__btn--telegram { border: 0.1rem solid #2aabee; background: rgba(42, 171, 238, 0.14); }
.sim-auth__btn--telegram:hover { background: rgba(42, 171, 238, 0.28); }
.sim-auth__btn--google { border: 0.1rem solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); }
.sim-auth__btn--google:hover { background: rgba(255, 255, 255, 0.14); }
.sim-auth__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #2aabee; }
.sim-auth__icon svg { width: 100%; height: 100%; }
.sim-auth.is-off .sim-auth__btn { opacity: 0.45; }
.sim-auth__open { color: #6fd0ff; font-size: 1.3rem; text-align: center; font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; }
.sim-auth__msg { min-height: 1.6rem; color: #ffb15c; font-size: 1.3rem; line-height: 1.4; text-align: center; font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; }
.sim-auth__msg--ok { color: #8be7c7; }
.sim-auth--shake { animation: sim-shake 0.35s; }
@keyframes sim-shake { 25% { transform: translateX(-0.6rem); } 50% { transform: translateX(0.6rem); } 75% { transform: translateX(-0.3rem); } }

/* toasts of the bonus actions (sim.js toast()) */
.sim-toasts { position: fixed; top: 7.4rem; right: 2rem; z-index: 99990; display: flex; flex-direction: column; gap: 1rem;
  width: min(40rem, calc(100vw - 3.2rem)); pointer-events: none; font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; }
.sim-toast { position: relative; display: flex; gap: 1.2rem; padding: 1.4rem 4rem 1.4rem 1.4rem; border-radius: 0.4rem; pointer-events: auto;
  background: rgba(22, 25, 29, 0.97); border-left: 0.4rem solid #44c987; box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.55);
  color: #fff; animation: sim-toast-in 0.25s ease-out; transition: opacity 0.35s, transform 0.35s; }
.sim-toast--bad { border-left-color: #ff6b6b; }
.sim-toast--tg { border-left-color: #2aabee; }
.sim-toast--out { opacity: 0; transform: translateX(2rem); }
@keyframes sim-toast-in { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } }
.sim-toast__icon { display: grid; place-items: center; flex: 0 0 3.6rem; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgba(68, 201, 135, 0.18); color: #44c987; font-size: 1.8rem; font-weight: 800; }
.sim-toast--bad .sim-toast__icon { background: rgba(255, 107, 107, 0.16); color: #ff8a8a; }
.sim-toast--tg .sim-toast__icon { background: rgba(42, 171, 238, 0.2); color: #6fd0ff; }
.sim-toast__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.sim-toast__title { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; line-height: 1.2; text-transform: uppercase; }
.sim-toast__text { font-size: 1.4rem; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.sim-toast__actions { display: flex; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }
.sim-toast__actions .sim-bbtn { width: auto; height: 3.8rem; font-size: 1.6rem; padding: 0 1.6rem; }
.sim-toast__close { position: absolute; top: 0.8rem; right: 1rem; border: 0; background: none; color: rgba(255, 255, 255, 0.5);
  font-size: 2.2rem; line-height: 1; cursor: pointer; }
.sim-toast__close:hover { color: #fff; }
@media (max-width: 992px) { .sim-toasts { top: 6.4rem; right: 1.6rem; } }

/* «Скоро» in the deposit window */
.sim-soon > :not(:first-child):not(.sim-soon__box) { display: none !important; }
.sim-soon__box { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 4rem 3rem 3.2rem; text-align: center;
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; }
.sim-soon__badge { padding: 0.6rem 1.6rem; border-radius: 0.2rem; background: #E4AE39; color: #1b1405; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; }
.sim-soon__title { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3rem; text-transform: uppercase; color: #fff; }
.sim-soon__text { max-width: 44rem; font-size: 1.5rem; line-height: 1.45; color: rgba(255, 255, 255, 0.75); }
.sim-soon__box .sim-bbtn { max-width: 32rem; margin-top: 0.8rem; }

@media (max-width: 1280px) {
  .sim-bwin__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .sim-freebal { height: 4rem; background: url(/sim/freebal-mob.webp?v=5) center / cover no-repeat, rgba(255, 255, 255, 0.1); box-shadow: none; }
  .sim-freebal__text { flex-direction: row; align-items: center; gap: 0.3rem; font-size: 1.8rem; }
  .sim-bpage { gap: 1rem; }
  .sim-bonus__h { font-size: 2rem; line-height: 100%; }
  .sim-bpage__sub { font-size: 1.2rem; }
  .sim-block { flex-direction: column; align-items: stretch; text-align: left; padding: 1.6rem; gap: 1.2rem; }
  .sim-block .sim-bbtn { width: 100%; min-width: 0; }
  .sim-block__icon { display: none; }
  .sim-fcase { grid-template-columns: 1fr; }
  .sim-fcase__info { padding: 1.6rem 1.5rem 1.2rem; }
  .sim-fcase__title { font-size: 2.8rem; }
  .sim-reel { margin: 0 1.5rem 1.6rem; height: 16rem; }
  .sim-tile { flex-basis: 11.6rem; }
  .sim-tile__img { width: 9rem; height: 6.4rem; }
  .sim-bgrid { grid-template-columns: 1fr; gap: 1rem; }
  .sim-bcard__top { min-height: 0; padding: 1.6rem 1.5rem 2rem; }
  .sim-bcard__bottom { padding: 1.2rem 1.5rem 1.6rem; }
  .sim-amt { font-size: 3.2rem; }
  .sim-bwin__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim-bbtn { height: 4.8rem; font-size: 1.8rem; }
}
.sim-pill {
  position: fixed; z-index: 40; left: 50%; bottom: 2.4rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 1rem; padding: 0.8rem 0.8rem 0.8rem 1.4rem; border-radius: 0.2rem;
  background: linear-gradient(180deg, #2AABEE 0%, #1C8ACB 100%); border: 0.1rem solid #57C3F5;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45), 0 0 2rem rgba(42, 171, 238, 0.35);
  color: #fff; text-decoration: none; font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.8rem;
  text-transform: uppercase; white-space: nowrap; animation: sim-pill-in 0.4s ease-out;
}
.sim-pill:hover { background: linear-gradient(180deg, #3BB7F5 0%, #2296D8 100%); }
.sim-pill__plane { display: inline-flex; width: 2.2rem; height: 2.2rem; }
.sim-pill__plane svg { width: 100%; height: 100%; }
.sim-pill__close {
  display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border: 0;
  border-radius: 0.2rem; background: rgba(0, 0, 0, 0.2); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
@keyframes sim-pill-in { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }
/* the phone: low like the original's chat bubble, left of ours (support.css), never under it */
@media (max-width: 992px) {
  .sim-pill { left: 1.2rem; bottom: calc(1.4rem + env(safe-area-inset-bottom)); transform: none; max-width: calc(100vw - 9.2rem);
    font-size: 1.5rem; animation-name: sim-pill-in-m; }
  .sim-pill__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 400px) { .sim-pill { gap: 0.7rem; padding: 0.6rem 0.6rem 0.6rem 1rem; font-size: 1.3rem; } .sim-pill__plane { width: 1.8rem; height: 1.8rem; } }
@keyframes sim-pill-in-m { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* «Пополняй через СБП» under the header (sim.js ensureSbpAlert): the site's graphite plate, its green button */
.sim-sbp {
  position: fixed; z-index: 39; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 1.2rem; padding: 0.6rem 0.6rem 0.6rem 1.2rem; border-radius: 0.4rem;
  background: linear-gradient(180deg, rgba(38, 40, 46, 0.97) 0%, rgba(24, 26, 31, 0.97) 100%);
  border: 0.1rem solid rgba(68, 201, 135, 0.55);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5), 0 0 1.8rem rgba(68, 201, 135, 0.18);
  color: #fff; text-decoration: none; font-family: var(--font-oswald), "Oswald", sans-serif; white-space: nowrap;
  animation: sim-sbp-in 0.4s ease-out;
}
.sim-sbp__logo { height: 2.6rem; width: auto; aspect-ratio: 312 / 112.7; display: block; }  /* its width before it loads: the text does not move */
.sim-sbp__text { display: inline-flex; align-items: baseline; gap: 0.8rem; font-size: 1.7rem; text-transform: uppercase; }
.sim-sbp__text b { font-weight: 700; }
.sim-sbp__sub { font-size: 1.4rem; color: rgba(255, 255, 255, 0.7); }
.sim-sbp__cta {
  display: inline-flex; align-items: center; height: 3.4rem; padding: 0 1.6rem; border-radius: 0.2rem;
  background: linear-gradient(180deg, #44C987 0%, #2E9E66 100%); color: #fff; font-size: 1.6rem; text-transform: uppercase;
}
.sim-sbp:hover .sim-sbp__cta { background: linear-gradient(180deg, #55D896 0%, #36AE73 100%); }
.sim-sbp__close {
  display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border: 0;
  border-radius: 0.2rem; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); font-size: 2rem; line-height: 1; cursor: pointer;
}
.sim-sbp__close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
@keyframes sim-sbp-in { from { opacity: 0; transform: translate(-50%, -0.8rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 992px) {
  .sim-sbp { gap: 0.8rem; padding: 0.5rem 0.5rem 0.5rem 0.8rem; max-width: calc(100vw - 1.6rem); }
  .sim-sbp__logo { height: 2rem; }
  .sim-sbp__text { font-size: 1.4rem; }
  .sim-sbp__sub { display: none; }
  .sim-sbp__cta { height: 3rem; padding: 0 1.1rem; font-size: 1.4rem; }
}

/* Deposit window: the minimum on each tile (sim.js ensureMinLabels). */
.sim-min { position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%); pointer-events: none;
  font-family: var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif; font-size: 1.3rem; font-weight: 600;
  line-height: 1.2; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.sim-min--top { left: 0; top: 0; bottom: auto; transform: none; padding: 0.3rem 0.6rem; background: rgba(255, 255, 255, 0.05); }

/* The deposit offer in the deposit window (sim.js ensureOffer) */
.sim-offer { display: flex; flex-direction: column; gap: 0.8rem; margin: 0.8rem 0 0; }
.sim-offer__first {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 1rem 1.2rem; border-radius: 0.2rem;
  border: 0.1rem solid #E4AE39; background: linear-gradient(90deg, rgba(228, 174, 57, 0.22), rgba(228, 174, 57, 0.06));
  color: #fff; font-size: 1.5rem; line-height: 1.3;
}
.sim-offer__first b { color: #FFD47A; font-weight: 700; }
.sim-offer__gift { font-size: 1.8rem; line-height: 1; }
.sim-offer__clock { margin-left: auto; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); }
.sim-offer__ladder { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sim-offer__chip {
  padding: 0.3rem 0.8rem; border-radius: 0.2rem; border: 0.1rem solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.7); font-size: 1.3rem; line-height: 1.6rem;
}
.sim-offer__chip--on { border-color: #44C987; background: rgba(68, 201, 135, 0.14); color: #fff; }
.sim-offer__value { font-size: 1.4rem; line-height: 1.35; color: rgba(255, 255, 255, 0.8); }
.sim-offer__terms { font-size: 1.2rem; line-height: 1.35; color: rgba(255, 255, 255, 0.45); }
.sim-rate__bonus { color: #FFD47A; }
[data-sim-bonus] { position: relative; overflow: visible !important; }
[data-sim-bonus]::after {
  content: attr(data-sim-bonus); position: absolute; top: -0.8rem; right: -0.4rem; padding: 0 0.4rem; border-radius: 0.2rem;
  background: #44C987; color: #0d2a1c; font-size: 1rem; font-weight: 700; line-height: 1.5rem; pointer-events: none;
}
.sim-toast--gift { border-left-color: #E4AE39; }
.sim-toast--gift .sim-toast__icon { background: rgba(228, 174, 57, 0.18); }
.sim-pill--deposit { background: linear-gradient(180deg, #E4AE39 0%, #B9841F 100%); color: #1b1405; }
.sim-pill--deposit:hover { background: linear-gradient(180deg, #F0BD4E 0%, #C99228 100%); }
.sim-pill--deposit .sim-pill__plane { align-items: center; justify-content: center; font-size: 1.8rem; }
.sim-pill__clock { font-variant-numeric: tabular-nums; opacity: 0.85; }
.sim-pill__clock::before { content: "· "; }

/* After a demo of the streamer look: the plans once */
.sim-afterdemo {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 1.6rem;
  background: rgba(0, 0, 0, 0.65);
}
.sim-afterdemo__card {
  position: relative; display: flex; flex-direction: column; gap: 1.4rem; width: 100%; max-width: 52rem; padding: 2.8rem 2.4rem 2.4rem;
  border-radius: 0.4rem; border: 0.1rem solid rgba(228, 174, 57, 0.6); background: #1b1b1b; color: #fff;
}
.sim-afterdemo__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem; text-transform: uppercase; }
.sim-afterdemo__text { margin: 0; font-size: 1.5rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.sim-afterdemo__close {
  position: absolute; top: 0.8rem; right: 1rem; width: 3.2rem; height: 3.2rem; border: 0; background: none; color: rgba(255, 255, 255, 0.6);
  font-size: 2.4rem; cursor: pointer;
}

/* The public promo code on «Бонусы» (sim.js renderPromo) */
.sim-promo {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem 2.4rem; padding: 2rem 2.4rem;
  border: 0.1rem solid rgba(228, 174, 57, 0.55); background: linear-gradient(90deg, rgba(74, 57, 18, 0.85), rgba(20, 20, 20, 0.85));
  box-shadow: inset 0 0 2rem rgba(228, 174, 57, 0.18);
}
.sim-promo__left { display: flex; flex-direction: column; gap: 0.6rem; }
.sim-promo__label { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.08em; }
.sim-promo__code {
  position: relative; padding: 0.6rem 1.6rem; border: 0.2rem dashed #E4AE39; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.35);
  color: #FFD47A; font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 3rem; letter-spacing: 0.12em; cursor: copy;
}
.sim-promo__code[data-copied]::after {
  content: attr(data-copied); position: absolute; left: 50%; top: -3rem; transform: translateX(-50%); padding: 0.3rem 0.8rem;
  border-radius: 0.2rem; background: #44C987; color: #0d2a1c; font-size: 1.3rem; letter-spacing: 0; white-space: nowrap;
}
.sim-promo__mid { display: flex; flex-direction: column; gap: 0.4rem; font-size: 2.4rem; color: #fff; }
.sim-promo__mid .sim-amt { font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 3.2rem; }
.sim-promo__note { font-size: 1.4rem; color: rgba(255, 255, 255, 0.65); }
.sim-promo__right .sim-bbtn { min-width: 22rem; }
.sim-promo__right .sim-bcard__done { justify-content: center; }
.sim-promo__more { grid-column: 1 / -1; font-size: 1.4rem; color: rgba(255, 255, 255, 0.6); }
.sim-promo__link { color: #57C3F5; text-decoration: underline; text-underline-offset: 0.2rem; }
@media (max-width: 760px) {
  .sim-promo { grid-template-columns: 1fr; padding: 1.6rem; }
  .sim-promo__right .sim-bbtn { width: 100%; }
}

/* «Есть промокод?» on «Бонусы» (sim.js renderCodeBox): any code, coins or +% to the next top-up */
.sim-pcode { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.6rem;
  padding: 1.6rem 2.4rem; border: 0.1rem solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.55); }
.sim-pcode__label { font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 2rem; text-transform: uppercase; color: #fff; }
.sim-pcode__input { min-width: 0; height: 4.8rem; padding: 0 1.6rem; border: 0.1rem solid rgba(228, 174, 57, 0.55); border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.45); color: #FFD47A; font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 2rem;
  letter-spacing: 0.08em; text-transform: uppercase; outline: none; }
.sim-pcode__input::placeholder { color: rgba(255, 255, 255, 0.35); letter-spacing: 0; text-transform: none;
  font-family: inherit; font-size: 1.5rem; }
.sim-pcode__input:focus { border-color: #E4AE39; box-shadow: 0 0 0 0.2rem rgba(228, 174, 57, 0.25); }
.sim-pcode .sim-bbtn { min-width: 20rem; }
.sim-pcode__msg { grid-column: 1 / -1; }
.sim-pcode__msg:empty { display: none; }
.sim-pcode__all { grid-column: 1 / -1; justify-self: start; font-size: 1.4rem; color: #E4AE39; text-decoration: none; }
.sim-pcode__all:hover { text-decoration: underline; text-underline-offset: 0.3rem; }
/* «Промокоды» in the footer (sim.js ensureFooterPromo): its line is held in the column until it is in, so the
   footer does not grow under the reader (one link: 1.9rem, 1.7rem on phones; the column's gap comes with it) */
div:has(> [data-testid="footer-nav-rewards"]):not(:has(> .sim-footpromo))::after { content: ""; display: block; height: 1.9rem; }
@media (max-width: 992px) { div:has(> [data-testid="footer-nav-rewards"]):not(:has(> .sim-footpromo))::after { height: 1.7rem; } }
@media (max-width: 760px) {
  .sim-pcode { grid-template-columns: 1fr; padding: 1.4rem 1.5rem; }
  .sim-pcode .sim-bbtn { width: 100%; min-width: 0; }
}

/* A guest's pill, the bonuses count on the nav link, the starter window, the case-page hint */
.sim-pill--guest { background: linear-gradient(180deg, #2f9e67 0%, #1d6b45 100%); border-color: #44C987;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45), 0 0 2rem rgba(68, 201, 135, 0.35); }
.sim-pill--guest .sim-pill__plane { align-items: center; justify-content: center; font-size: 1.8rem; }
a[data-sim-count] { position: relative; }
a[data-sim-count]::after {
  content: attr(data-sim-count); position: absolute; top: -0.4rem; right: -1.4rem; min-width: 1.8rem; height: 1.8rem; padding: 0 0.5rem;
  border-radius: 0.9rem; background: #EB4B4B; color: #fff; font: 700 1.2rem/1.8rem var(--font-sofia-sans), "Sofia Sans", sans-serif;
  text-align: center; box-shadow: 0 0 0.8rem rgba(235, 75, 75, 0.7); pointer-events: none;
}
.sim-onb { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 1.6rem;
  background: rgba(0, 0, 0, 0.65); }
.sim-onb__card { position: relative; display: flex; flex-direction: column; gap: 1.6rem; width: 100%; max-width: 48rem; padding: 2.8rem 2.4rem 2.4rem;
  border-radius: 0.4rem; border: 0.1rem solid rgba(68, 201, 135, 0.6); background: #1b1b1b; color: #fff;
  box-shadow: 0 0 4rem rgba(68, 201, 135, 0.18); }
.sim-onb__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.6rem; text-transform: uppercase; }
.sim-onb__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; font-size: 1.6rem; line-height: 1.35; }
.sim-onb__row { display: flex; align-items: center; gap: 1.2rem; }
.sim-onb__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3.2rem; height: 3.2rem;
  border-radius: 0.2rem; background: rgba(68, 201, 135, 0.14); border: 0.1rem solid rgba(68, 201, 135, 0.4); font-size: 1.6rem; }
.sim-onb__actions { display: flex; flex-direction: column; gap: 1rem; }
.sim-casehint { display: block; width: 100%; box-sizing: border-box; margin-top: 1rem; padding: 0.8rem 1.2rem; border: 0.1rem solid rgba(68, 201, 135, 0.55);
  border-radius: 0.2rem; background: rgba(19, 67, 44, 0.85); color: #fff; font-size: 1.4rem; line-height: 1.35; text-align: center;
  text-decoration: none; cursor: pointer; }
.sim-casehint:hover { background: rgba(29, 90, 58, 0.95); }

/* «Пригласи друга» on «Бонусы» (sim.js renderRef), a friend's invitation, the share buttons */
.sim-ref { --c: #9B6BFF; position: relative; display: flex; flex-direction: column; gap: 2rem; padding: 2.8rem 3rem 3rem; overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 100%); border-bottom: 5px solid var(--c);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); scroll-margin-top: 10rem; }
.sim-ref::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60rem 22rem at 0% 0%, rgba(155, 107, 255, 0.28), transparent 70%),
              repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 26px); }
.sim-ref > * { position: relative; }
.sim-ref__head { display: flex; align-items: flex-start; gap: 1.6rem; flex-wrap: wrap; }
.sim-ref__icon { flex: none; display: inline-flex; width: 5.6rem; height: 5.6rem; padding: 1.1rem; border-radius: 0.2rem; color: #fff;
  background: rgba(155, 107, 255, 0.25); box-shadow: 0 0 2.4rem rgba(155, 107, 255, 0.5); }
.sim-ref__icon svg { width: 100%; height: 100%; }
.sim-ref__titles { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 24rem; }
.sim-ref__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3rem; line-height: 1.15;
  text-transform: uppercase; color: #fff; }
.sim-ref__sub { font-size: 1.5rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.sim-ref__badge { align-self: center; padding: 0.8rem 1.2rem; border: 0.1rem solid #E4AE39; border-radius: 0.2rem; background: rgba(74, 57, 18, 0.85);
  color: #FFD47A; font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.7rem; text-transform: uppercase; white-space: nowrap; }
.sim-ref__login .sim-bbtn { width: auto; min-width: 28rem; }
.sim-ref__linkrow { display: flex; gap: 1rem; }
.sim-ref__link { flex: 1; min-width: 0; height: 4.8rem; padding: 0 1.6rem; border: 0.2rem dashed rgba(155, 107, 255, 0.75); border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.45); color: #fff; font: 600 1.8rem/1 var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif; outline: none; }
.sim-ref__link:focus { border-color: #C4A6FF; }
.sim-ref__copy { position: relative; width: auto; min-width: 18rem; }
.sim-ref__copy[data-copied]::after, .sim-share__btn[data-copied]::after {
  content: attr(data-copied); position: absolute; left: 50%; top: -3rem; transform: translateX(-50%); padding: 0.3rem 0.8rem;
  border-radius: 0.2rem; background: #44C987; color: #0d2a1c; font-size: 1.3rem; white-space: nowrap; }
.sim-share { display: flex; flex-wrap: wrap; gap: 1rem; }
.sim-share__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 14rem; height: 4.4rem;
  padding: 0 1.6rem; border-radius: 0.2rem; border: 0.1rem solid rgba(255, 255, 255, 0.25); color: #fff; text-decoration: none; cursor: pointer;
  font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.7rem; text-transform: uppercase; white-space: nowrap; background: rgba(0, 0, 0, 0.3); }
.sim-share--tg { border-color: #57C3F5; background: linear-gradient(180deg, #2AABEE 0%, #1C8ACB 100%); }
.sim-share--vk { border-color: #5C9DFF; background: linear-gradient(180deg, #2D81F7 0%, #0063E0 100%); }
.sim-share--wa { border-color: #5EE08E; background: linear-gradient(180deg, #2CC765 0%, #1E9E4E 100%); }
.sim-share__btn:hover { filter: brightness(1.12); }
.sim-bbtn--vk { border: 0.1rem solid #5C9DFF; background: linear-gradient(180deg, #2D81F7 0%, #0063E0 100%); }
.sim-ref__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sim-ref__stat { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.2rem 1.4rem; background: rgba(255, 255, 255, 0.04);
  border-left: 0.3rem solid rgba(155, 107, 255, 0.7); }
.sim-ref__stat b, .sim-ref__stat .sim-amt { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.8rem; line-height: 1; color: #fff; }
.sim-ref__stat > span:last-child { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sim-ref__label { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.62); margin-bottom: 1rem; }
.sim-ref__steprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.sim-ref__step { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.4rem 1.4rem; background: rgba(255, 255, 255, 0.04);
  border: 0.1rem solid rgba(255, 255, 255, 0.08); }
.sim-ref__step--done { border-color: rgba(68, 201, 135, 0.6); background: rgba(19, 67, 44, 0.45); }
.sim-ref__stepn { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; text-transform: uppercase; color: #fff; }
.sim-ref__step--done .sim-ref__stepn { color: #44C987; }
.sim-ref__stepr { font-size: 1.5rem; font-weight: 700; color: #FFD47A; }
.sim-ref__bar { display: block; height: 0.5rem; margin-top: auto; border-radius: 0.3rem; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.sim-ref__fill { display: block; height: 100%; background: linear-gradient(90deg, #9B6BFF, #C4A6FF); }
.sim-ref__step--done .sim-ref__fill { background: #44C987; }
.sim-ref__next { margin-top: 1rem; font-size: 1.5rem; color: rgba(255, 255, 255, 0.85); }
.sim-ref__race { padding: 1.6rem; background: rgba(228, 174, 57, 0.07); border: 0.1rem solid rgba(228, 174, 57, 0.35); }
.sim-ref__ends { font-variant-numeric: tabular-nums; color: #FFD47A; }
.sim-ref__prizes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.2rem; }
.sim-ref__prize { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.35);
  font-size: 1.4rem; font-weight: 700; color: #fff; }
.sim-ref__prize b { font-size: 1.8rem; }
.sim-ref__top { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.sim-ref__row { display: flex; align-items: center; gap: 1.2rem; padding: 0.6rem 1rem; background: rgba(0, 0, 0, 0.3); font-size: 1.5rem; color: #fff; }
.sim-ref__row--you { outline: 0.1rem solid #9B6BFF; background: rgba(155, 107, 255, 0.18); }
.sim-ref__place { width: 2.4rem; font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.8rem; color: #E4AE39; text-align: center; }
.sim-ref__nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-ref__n { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 1.8rem; }
.sim-ref__empty { padding: 0.8rem 1rem; font-size: 1.4rem; color: rgba(255, 255, 255, 0.6); }
.sim-ref__you { margin-top: 1rem; font-size: 1.4rem; color: rgba(255, 255, 255, 0.75); }
.sim-ref__chips { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.sim-ref__chip { display: inline-flex; align-items: center; gap: 0.8rem; max-width: 26rem; padding: 0.6rem 1rem 0.6rem 0.6rem; border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.05); border: 0.1rem solid rgba(255, 255, 255, 0.1); }
.sim-ref__chip--qualified { border-color: rgba(68, 201, 135, 0.55); }
.sim-ref__ava { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 0.2rem; object-fit: cover; }
.sim-ref__ftext { display: flex; flex-direction: column; min-width: 0; }
.sim-ref__ftext b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; color: #fff; }
.sim-ref__ftext span { font-size: 1.2rem; color: rgba(255, 255, 255, 0.6); }
.sim-ref__chip--qualified .sim-ref__ftext span { color: #44C987; }
.sim-bcard__gift { align-self: flex-start; padding: 0.4rem 1rem; border-radius: 0.2rem; background: rgba(155, 107, 255, 0.3);
  border: 0.1rem solid #9B6BFF; color: #fff; font-size: 1.4rem; font-weight: 700; }
.sim-invite { position: fixed; z-index: 41; left: 50%; bottom: 2.4rem; transform: translateX(-50%); display: flex; align-items: center; gap: 1.4rem;
  width: min(64rem, calc(100vw - 3.2rem)); padding: 1.4rem 1.4rem 1.4rem 1.6rem; border-radius: 0.3rem; border: 0.1rem solid #9B6BFF;
  background: linear-gradient(90deg, rgba(62, 36, 120, 0.97), rgba(24, 20, 36, 0.97)); color: #fff;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5), 0 0 2.4rem rgba(155, 107, 255, 0.35); animation: sim-pill-in 0.4s ease-out; }
.sim-invite__ava { flex: none; width: 5.2rem; height: 5.2rem; border-radius: 0.3rem; object-fit: cover; border: 0.2rem solid #C4A6FF; }
.sim-invite__text { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.sim-invite__title { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; text-transform: uppercase; }
.sim-invite__sub { font-size: 1.35rem; line-height: 1.35; color: rgba(255, 255, 255, 0.82); }
.sim-invite__go { width: auto; flex: none; }
.sim-invite__close { flex: none; align-self: flex-start; }
.sim-nick { display: flex; align-items: center; gap: 2rem; padding: 2rem 2.4rem; border: 0.1rem solid rgba(87, 195, 245, 0.45);
  background: linear-gradient(90deg, rgba(20, 60, 86, 0.85), rgba(20, 20, 20, 0.85)); box-shadow: inset 0 0 2rem rgba(42, 171, 238, 0.15); }
.sim-nick__text { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.sim-nick__title { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem; text-transform: uppercase; color: #fff; }
.sim-nick__sub { font-size: 1.45rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.sim-nick__actions { display: flex; flex-direction: column; gap: 1rem; flex: none; min-width: 24rem; }
.sim-nick__copy { position: relative; }
.sim-nick__copy[data-copied]::after { content: attr(data-copied); position: absolute; left: 50%; top: -3rem; transform: translateX(-50%);
  padding: 0.3rem 0.8rem; border-radius: 0.2rem; background: #44C987; color: #0d2a1c; font-size: 1.3rem; white-space: nowrap; }
@media (max-width: 760px) {
  .sim-nick { flex-direction: column; align-items: stretch; padding: 1.6rem; }
  .sim-nick__actions { min-width: 0; }
}
@media (max-width: 760px) {
  .sim-ref { padding: 1.8rem 1.5rem 2rem; }
  .sim-ref__title { font-size: 2.4rem; }
  .sim-ref__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-ref__linkrow { flex-direction: column; }
  .sim-ref__link { flex: none; width: 100%; box-sizing: border-box; font-size: 1.6rem; }
  .sim-ref__copy, .sim-ref__login .sim-bbtn { width: 100%; min-width: 0; }
  .sim-ref__badge { white-space: normal; }
  .sim-invite { flex-wrap: wrap; bottom: calc(8rem + env(safe-area-inset-bottom)); }
  .sim-invite__go { width: 100%; }
}

/* «Заработай на видео» (studio.py) */
.sim-navvideo { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.8rem; height: 3.6rem; white-space: nowrap;
  font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; line-height: 3.6rem; text-transform: uppercase;
  color: #fff; text-decoration: none; transition: color 0.2s; }
.sim-navvideo:hover { color: #FF6B8A; }
.sim-navvideo__dot { width: 0; height: 0; border-style: solid; border-width: 0.6rem 0 0.6rem 1rem; border-color: transparent transparent transparent #FE2C55;
  filter: drop-shadow(0 0 0.6rem rgba(254, 44, 85, 0.8)); }
@media (max-width: 1500px) { .sim-navvideo { font-size: 1.7rem; } [data-testid="header-nav-desktop"]:has(.sim-navvideo) { gap: 2rem !important; } }
.sim-vbanner { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; width: 100%; box-sizing: border-box;
  height: 6.4rem; padding: 0 1.6rem; text-decoration: none; color: #fff; border: 0.1rem solid rgba(254, 44, 85, 0.6);
  background: linear-gradient(90deg, rgba(120, 18, 42, 0.95), rgba(28, 16, 22, 0.95)); box-shadow: inset 0 0 2rem rgba(254, 44, 85, 0.25); }
.sim-vbanner:hover { background: linear-gradient(90deg, rgba(150, 24, 52, 0.95), rgba(36, 18, 26, 0.95)); }
.sim-vbanner__play { display: grid; place-items: center; flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #FE2C55;
  font-size: 1.4rem; box-shadow: 0 0 1.4rem rgba(254, 44, 85, 0.7); }
.sim-vbanner__text { display: flex; flex-direction: column; min-width: 0; }
.sim-vbanner__text b { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 1.9rem; text-transform: uppercase; line-height: 1.2; }
.sim-vbanner__text span { font-size: 1.3rem; color: rgba(255, 255, 255, 0.75); }

.sim-video { display: flex; flex-direction: column; gap: 1.8rem; padding: 2.6rem 2.8rem; border: 0.1rem solid rgba(254, 44, 85, 0.5);
  background: radial-gradient(120% 140% at 0% 0%, rgba(254, 44, 85, 0.22), rgba(20, 20, 20, 0) 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(37, 244, 238, 0.12), rgba(20, 20, 20, 0) 60%), rgba(20, 20, 20, 0.92);
  box-shadow: inset 0 0 2.4rem rgba(254, 44, 85, 0.12); scroll-margin-top: 9rem; color: #fff; }
.sim-video__head { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 1.6rem; }
.sim-video__title { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3.2rem; text-transform: uppercase; }
.sim-video__badge { padding: 0.5rem 1.2rem; border-radius: 0.2rem; background: #FE2C55; font-weight: 700; font-size: 1.5rem;
  box-shadow: 0 0 1.6rem rgba(254, 44, 85, 0.55); }
.sim-video__sub { margin: 0; max-width: 90rem; font-size: 1.6rem; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.sim-video__plats { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.sim-video__plat { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem; border-radius: 10rem; font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.08); border: 0.1rem solid rgba(255, 255, 255, 0.16); }
.sim-video__plat--tiktok { border-color: rgba(37, 244, 238, 0.6); }
.sim-video__plat--youtube { border-color: rgba(255, 0, 0, 0.6); }
.sim-video__plat--vk { border-color: rgba(0, 119, 255, 0.7); }
.sim-video__plat--instagram { border-color: rgba(225, 48, 108, 0.6); }
.sim-video__plat.is-off { opacity: 0.55; }
.sim-video__plat i { font-style: normal; font-size: 1.1rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.sim-video__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sim-video__step { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem 1.6rem 1.6rem 5.6rem;
  background: rgba(255, 255, 255, 0.05); border: 0.1rem solid rgba(255, 255, 255, 0.1); }
.sim-video__step b { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 1.9rem; text-transform: uppercase; }
.sim-video__num { position: absolute; left: 1.4rem; top: 1.5rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: #FE2C55; font-weight: 700; font-size: 1.5rem; }
.sim-video__steptext { font-size: 1.4rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); word-break: break-word; }
.sim-video__code { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem 2.4rem; padding: 1.8rem 2rem; border: 0.1rem dashed rgba(254, 44, 85, 0.6);
  background: rgba(254, 44, 85, 0.07); }
.sim-video__codebox { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-width: 26rem; }
.sim-video__label { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); }
.sim-video__tag { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 500; font-size: 3rem; color: #FF6B8A; letter-spacing: 0.02em;
  user-select: all; word-break: break-all; }
.sim-video__hint { font-size: 1.4rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.sim-video__meta { font-size: 1.3rem; color: #44C987; }
.sim-video__codeactions { display: flex; flex-direction: column; gap: 1rem; flex: none; min-width: 26rem; }
.sim-video__copy { position: relative; }
.sim-video__copy[data-copied]::after { content: attr(data-copied); position: absolute; left: 50%; top: -3rem; transform: translateX(-50%);
  padding: 0.3rem 0.8rem; border-radius: 0.2rem; background: #44C987; color: #0d2a1c; font-size: 1.3rem; white-space: nowrap; }
.sim-video__login { width: auto; min-width: 24rem; }
.sim-video__form { display: flex; gap: 1.2rem; }
.sim-video__input { flex: 1; min-width: 0; height: 4.8rem; padding: 0 1.6rem; box-sizing: border-box; border-radius: 0.2rem; outline: none;
  border: 0.1rem solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1.6rem; }
.sim-video__input:focus { border-color: #FE2C55; box-shadow: 0 0 0 0.2rem rgba(254, 44, 85, 0.25); }
.sim-video__go { width: auto; min-width: 20rem; }
.sim-video__now { display: flex; flex-direction: column; gap: 1.2rem; padding: 1.8rem 2rem; background: rgba(0, 0, 0, 0.35);
  border: 0.1rem solid rgba(255, 255, 255, 0.14); scroll-margin-top: 12rem; }
.sim-video__now--ready { border-color: #E4AE39; box-shadow: 0 0 2rem rgba(228, 174, 57, 0.2); }
.sim-video__now--claimed { border-color: #44C987; }
.sim-video__now--rejected, .sim-video__now--revoked { border-color: rgba(235, 75, 75, 0.7); }
.sim-video__nowhead { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 1.6rem; }
.sim-video__nowviews { color: rgba(255, 255, 255, 0.7); }
.sim-video__checks { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.sim-video__check { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.45rem; line-height: 1.35; }
.sim-video__ci { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.2rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.12); }
.sim-video__check--ok .sim-video__ci { background: #44C987; color: #0d2a1c; }
.sim-video__check--bad .sim-video__ci { background: #EB4B4B; }
.sim-video__check--bad { color: #ff9b9b; }
.sim-video__spin { animation: sim-video-pulse 1s ease-in-out infinite; }
@keyframes sim-video-pulse { 50% { opacity: 0.35; } }
.sim-video__reason { font-size: 1.5rem; line-height: 1.4; color: #ffb4b4; }
.sim-video__offer { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 0.4rem; }
.sim-video__offertitle { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem; text-transform: uppercase; color: #E4AE39; }
.sim-video__offerrow { display: flex; flex-wrap: wrap; gap: 1rem; }
.sim-video__offerrow .sim-bbtn { width: auto; min-width: 20rem; }
.sim-video__done { font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 2.2rem; text-transform: uppercase; color: #44C987; }
.sim-video__h4 { margin: 0 0 0.4rem; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2rem; text-transform: uppercase; }
.sim-video__list { display: flex; flex-direction: column; gap: 0.6rem; }
.sim-video__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 1.2rem; padding: 0.8rem 1rem 0.8rem 1.4rem;
  background: rgba(255, 255, 255, 0.04); border-left: 0.3rem solid rgba(255, 255, 255, 0.2); font-size: 1.45rem; }
.sim-video__row--ready { border-left-color: #E4AE39; }
.sim-video__row--claimed { border-left-color: #44C987; }
.sim-video__row--rejected, .sim-video__row--revoked { border-left-color: #EB4B4B; }
.sim-video__rowlink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-decoration: none; }
.sim-video__rowlink:hover { text-decoration: underline; }
.sim-video__rowviews { color: rgba(255, 255, 255, 0.65); }
.sim-video__rowstatus { white-space: nowrap; color: rgba(255, 255, 255, 0.85); }
.sim-video__row--claimed .sim-video__rowstatus { color: #44C987; font-weight: 700; }
.sim-video__rowbtn { width: auto; height: 3.6rem; min-width: 0; padding: 0 1.4rem; font-size: 1.5rem; }
.sim-video__more { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.sim-video__rules { flex: 1; min-width: 28rem; font-size: 1.45rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.sim-video__rules summary { cursor: pointer; font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.8rem; text-transform: uppercase; color: #fff; }
.sim-video__rules ul { margin: 0.8rem 0 0; padding-left: 2rem; }
.sim-video__rules li { margin-bottom: 0.5rem; }
@media (max-width: 760px) {
  .sim-video { padding: 1.8rem 1.5rem; gap: 1.4rem; }
  .sim-video__title { font-size: 2.6rem; }
  .sim-video__steps { grid-template-columns: 1fr; }
  .sim-video__codebox, .sim-video__codeactions { min-width: 0; width: 100%; }
  .sim-video__tag { font-size: 2.6rem; }
  .sim-video__form { flex-direction: column; }
  .sim-video__go, .sim-video__login, .sim-video__offerrow .sim-bbtn { width: 100%; min-width: 0; }
  .sim-video__row { grid-template-columns: minmax(0, 1fr) auto; }
  .sim-video__rowbtn { grid-column: 1 / -1; width: 100%; }
  .sim-video__rowbtn--open { display: none; }
  .sim-video__rules { min-width: 0; }
}
.sim-burgervideo { color: #FF6B8A !important; }
.sim-navvideo.is-active { color: #FF6B8A; }
.sim-navvideo.is-active::after { content: ""; position: absolute; left: 1.8rem; right: 0; bottom: -0.6rem; height: 0.2rem; background: #FE2C55;
  box-shadow: 0 0 1rem rgba(254, 44, 85, 0.8); }
.sim-burgervideo.is-active { text-shadow: 0 0 1.2rem rgba(254, 44, 85, 0.8); }
.sim-video__icon { display: inline-flex; flex: none; width: 2rem; height: 2rem; }
.sim-video__icon svg { width: 100%; height: 100%; }
.sim-video__plat { padding: 0.6rem 1.2rem 0.6rem 0.8rem; font-size: 1.5rem; }
.sim-vpage { padding-top: 0.4rem; }
.sim-vcard { display: flex; align-items: center; gap: 2rem; padding: 2rem 2.4rem; text-decoration: none; color: #fff;
  border: 0.1rem solid rgba(254, 44, 85, 0.5); background: linear-gradient(90deg, rgba(120, 18, 42, 0.85), rgba(20, 20, 20, 0.9));
  box-shadow: inset 0 0 2rem rgba(254, 44, 85, 0.15); }
.sim-vcard:hover { background: linear-gradient(90deg, rgba(150, 24, 52, 0.9), rgba(24, 20, 22, 0.9)); }
.sim-vcard__icons { display: grid; grid-template-columns: repeat(2, 3.4rem); gap: 0.6rem; flex: none; }
.sim-vcard__icons .sim-video__icon { width: 3.4rem; height: 3.4rem; }
.sim-vcard__text { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.sim-vcard__text b { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem; text-transform: uppercase; }
.sim-vcard__text span { font-size: 1.45rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.sim-vcard__go { width: auto; min-width: 18rem; flex: none; }
@media (max-width: 760px) {
  .sim-vcard { flex-wrap: wrap; padding: 1.6rem; }
  .sim-vcard__go { width: 100%; }
}

/* «Заработай на видео» 2.0: tabs, the feed, the race, the promo kit, how to film (studio_race.py, studio_promo.py) */
.sim-vpage { --v-ease: cubic-bezier(0.23, 1, 0.32, 1); }
.sim-vtabs { display: flex; gap: 0.4rem; margin: 0.4rem 0 0; padding: 0.4rem; overflow-x: auto; scrollbar-width: none;
  background: rgba(0, 0, 0, 0.35); border: 0.1rem solid rgba(255, 255, 255, 0.08); border-radius: 0.3rem; }
.sim-vtabs::-webkit-scrollbar { display: none; }
.sim-vtabs__tab { flex: 1 0 auto; min-height: 4.4rem; padding: 0 1.8rem; border: 0; border-radius: 0.2rem; cursor: pointer; white-space: nowrap;
  background: transparent; color: rgba(255, 255, 255, 0.62); font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.8rem;
  text-transform: uppercase; letter-spacing: 0.02em; transition: color 160ms ease, background-color 160ms ease, transform 160ms var(--v-ease); }
.sim-vtabs__tab:active { transform: scale(0.97); }
.sim-vtabs__tab.is-on { color: #fff; background: linear-gradient(180deg, rgba(254, 44, 85, 0.32), rgba(254, 44, 85, 0.12));
  box-shadow: inset 0 0 0 0.1rem rgba(254, 44, 85, 0.6); }
@media (hover: hover) and (pointer: fine) { .sim-vtabs__tab:not(.is-on):hover { color: #fff; background: rgba(255, 255, 255, 0.05); } }
.sim-vpanel { display: flex; flex-direction: column; gap: 1.8rem; }
.sim-vpanel[hidden] { display: none; }
.sim-vchip { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.6rem; padding: 0 1.4rem; border-radius: 10rem; cursor: pointer;
  border: 0.1rem solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); font-size: 1.45rem;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--v-ease, ease-out); }
.sim-vchip:active { transform: scale(0.97); }
.sim-vchip.is-on { border-color: #E4AE39; background: rgba(228, 174, 57, 0.16); color: #FFD47A; }
.sim-vempty { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 4rem 2rem; text-align: center; font-size: 1.6rem;
  line-height: 1.45; color: rgba(255, 255, 255, 0.75); border: 0.1rem dashed rgba(255, 255, 255, 0.16); }
.sim-vempty .sim-bbtn { width: auto; min-width: 22rem; }
.sim-vtier { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.7rem; border-radius: 10rem; font-size: 1.15rem; font-weight: 700;
  white-space: nowrap; background: rgba(255, 255, 255, 0.08); color: #fff; }
.sim-vtier--bronze { background: rgba(205, 127, 50, 0.22); color: #F2B27A; }
.sim-vtier--silver { background: rgba(200, 210, 225, 0.18); color: #DDE5F0; }
.sim-vtier--gold { background: rgba(228, 174, 57, 0.22); color: #FFD47A; }
.sim-vtier--diamond { background: rgba(87, 195, 245, 0.2); color: #9BE0FF; }
.sim-vtier--legend { background: rgba(155, 107, 255, 0.24); color: #D2BBFF; }

/* the feed */
.sim-vfeed__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.sim-vfeed__plats { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; }
.sim-vchip--icon { padding-left: 0.8rem; }
.sim-vfeed__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.4rem; }
.sim-vcard2 { display: flex; flex-direction: column; min-width: 0; background: rgba(255, 255, 255, 0.04); border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 0.3rem; overflow: hidden; animation: sim-vcard-in 360ms var(--v-ease, ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes sim-vcard-in { from { opacity: 0; transform: translateY(0.8rem); } }
.sim-vcard2__media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgba(254, 44, 85, 0.25), rgba(10, 10, 12, 1) 70%); }
.sim-vcard2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--v-ease, ease-out), filter 300ms ease; }
@media (hover: hover) and (pointer: fine) { .sim-vcard2__media:hover .sim-vcard2__img { transform: scale(1.03); filter: brightness(1.08); } }
.sim-vcard2__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1.2rem, transparent 1.2rem 2.4rem); }
.sim-vcard2__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem;
  border-radius: 50%; background: rgba(254, 44, 85, 0.92); color: #fff; font-size: 2rem; padding-left: 0.3rem; box-sizing: border-box;
  box-shadow: 0 0 2.4rem rgba(254, 44, 85, 0.6); transition: transform 200ms var(--v-ease, ease-out); }
.sim-vcard2__media:active .sim-vcard2__play { transform: scale(0.94); }
.sim-vcard2__views { position: absolute; left: 0.8rem; bottom: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 10rem; background: rgba(0, 0, 0, 0.65);
  color: #fff; font-size: 1.3rem; font-weight: 700; }
.sim-vcard2__pf { position: absolute; right: 0.8rem; top: 0.8rem; width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 0.2rem 0.4rem rgba(0,0,0,0.6)); }
.sim-vcard2.is-playing .sim-vcard2__play, .sim-vcard2.is-playing .sim-vcard2__views, .sim-vcard2.is-playing .sim-vcard2__pf { display: none; }
.sim-vcard2__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.sim-vcard2__meta { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem 1.2rem; }
.sim-vcard2__who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 1.45rem; }
.sim-vcard2__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.sim-vcard2__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.3rem; line-height: 1.35;
  color: rgba(255, 255, 255, 0.62); }
.sim-vcard2__row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 1.3rem; }
.sim-vcard2__open { color: #57C3F5; text-decoration: none; }
.sim-vcard2__hide { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.5); font-size: 1.25rem; cursor: pointer; }
.sim-vfeed__more { align-self: center; width: auto; min-width: 24rem; }

/* the race */
.sim-vrace__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2.4rem; }
.sim-vrace__title { display: flex; flex-direction: column; gap: 0.5rem; }
.sim-vrace__title h4, .sim-vkit__head h4, .sim-vhow__head h4, .sim-vtracks__head h4 { margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400;
  font-size: 2.6rem; text-transform: uppercase; color: #fff; }
.sim-vrace__title span, .sim-vkit__head p, .sim-vhow__head p { margin: 0; font-size: 1.45rem; line-height: 1.45; color: rgba(255, 255, 255, 0.7); max-width: 80rem; }
.sim-vrace__timer { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 1.6rem; border: 0.1rem solid rgba(228, 174, 57, 0.5);
  background: rgba(228, 174, 57, 0.1); font-size: 1.4rem; color: rgba(255, 255, 255, 0.75); }
.sim-vrace__timer b { font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 2.2rem; color: #FFD47A; font-variant-numeric: tabular-nums; }
.sim-vrace__prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
.sim-vrace__min { margin: 0.8rem 0 0; font-size: 1.3rem; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.sim-vprize { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; background: rgba(255, 255, 255, 0.04);
  border: 0.1rem solid rgba(255, 255, 255, 0.1); font-size: 1.45rem; line-height: 1.3; }
.sim-vprize b { font-weight: 600; color: #fff; }
.sim-vprize__place { font-size: 2.4rem; flex: none; }
.sim-vprize--1 { border-color: rgba(228, 174, 57, 0.7); background: linear-gradient(90deg, rgba(228, 174, 57, 0.18), rgba(255, 255, 255, 0.03)); }
.sim-vprize--video { border-color: rgba(254, 44, 85, 0.5); }
.sim-vprize--draw { border-color: rgba(155, 107, 255, 0.55); }
.sim-vme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sim-vme__card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.6rem; background: rgba(0, 0, 0, 0.35); border: 0.1rem solid rgba(255, 255, 255, 0.1); }
.sim-vme__card--level { border-color: rgba(87, 195, 245, 0.35); }
.sim-vme__card--streak { border-color: rgba(254, 120, 60, 0.4); }
.sim-vme__label { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.sim-vme__big { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.3rem; text-transform: uppercase; color: #fff; }
.sim-vme__hint { font-size: 1.35rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.sim-vme__hint--gold { color: #FFD47A; }
.sim-vme__bar { position: relative; height: 0.8rem; border-radius: 10rem; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.sim-vme__fill { position: absolute; inset: 0; transform-origin: left center; border-radius: inherit;
  background: linear-gradient(90deg, #44C987, #57C3F5); transition: transform 600ms var(--v-ease, ease-out); }
.sim-vme__ladder { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim-vme__step { padding: 0.2rem 0.7rem; border-radius: 10rem; font-size: 1.15rem; color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); }
.sim-vme__step.is-done { color: #fff; background: rgba(68, 201, 135, 0.22); }
.sim-vrace__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.sim-vrace__col h5, .sim-vrace__last h5, .sim-vkit__group, .sim-vhow__box h5 { margin: 0 0 0.8rem; font-family: var(--font-oswald), "Oswald", sans-serif;
  font-weight: 400; font-size: 1.9rem; text-transform: uppercase; color: #fff; }
.sim-vtop { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.sim-vtop__row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.8rem 1.2rem;
  background: rgba(255, 255, 255, 0.04); font-size: 1.45rem; }
.sim-vtop__row.is-podium { background: rgba(228, 174, 57, 0.08); }
.sim-vtop__row.is-you { box-shadow: inset 0.3rem 0 0 #9B6BFF; background: rgba(155, 107, 255, 0.14); }
.sim-vtop__place { text-align: center; font-weight: 700; color: rgba(255, 255, 255, 0.7); font-size: 1.6rem; }
.sim-vtop__who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sim-vtop__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #fff; }
.sim-vtop__views { font-variant-numeric: tabular-nums; color: #FFD47A; font-weight: 700; }
.sim-vtop__empty { padding: 1.4rem; font-size: 1.4rem; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.03); }
.sim-vtop__gap { padding: 0.2rem 1.2rem; color: rgba(255, 255, 255, 0.4); }
.sim-vrace__last { padding: 1.2rem 1.4rem; background: rgba(255, 255, 255, 0.03); font-size: 1.4rem; color: rgba(255, 255, 255, 0.75); line-height: 1.6; }

/* the promo kit */
.sim-vkit__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4rem 2.4rem; }
.sim-vkit__head > div { display: flex; flex-direction: column; gap: 0.6rem; }
.sim-vkit__zip { width: auto; min-width: 28rem; text-decoration: none; }
.sim-vkit__prog { display: flex; flex-direction: column; gap: 0.8rem; min-width: 28rem; font-size: 1.4rem; color: rgba(255, 255, 255, 0.75); }
.sim-vkit__grid { display: grid; gap: 1.4rem; }
.sim-vkit__grid--still { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
.sim-vkit__grid--video { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.sim-vkit { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem; background: rgba(255, 255, 255, 0.04); border: 0.1rem solid rgba(255, 255, 255, 0.08); }
.sim-vkit__media { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden;
  background: repeating-conic-gradient(#202020 0% 25%, #2a2a2a 0% 50%) 50% / 1.6rem 1.6rem; }
.sim-vkit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sim-vkit__wait { font-size: 1.3rem; color: rgba(255, 255, 255, 0.6); animation: sim-video-pulse 1.2s ease-in-out infinite; }
.sim-vkit__title { font-size: 1.45rem; font-weight: 600; color: #fff; }
.sim-vkit__dl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim-vdl { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0 1rem; border-radius: 0.2rem; font-size: 1.25rem; font-weight: 700;
  text-decoration: none; color: #fff; background: #13432C; border: 0.1rem solid #44C987; transition: transform 160ms ease-out, filter 160ms ease; }
.sim-vdl:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sim-vdl:not(.is-wait):hover { filter: brightness(1.15); } }
.sim-vdl.is-wait { opacity: 0.45; cursor: progress; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); }

/* how to film */
.sim-vhow__head { display: flex; flex-direction: column; gap: 0.8rem; }
.sim-vhow__head .sim-bbtn { width: auto; min-width: 22rem; align-self: flex-start; }
.sim-vhow__topic { display: flex; flex-direction: column; gap: 1.2rem; padding-top: 1.2rem; border-top: 0.1rem solid rgba(255, 255, 255, 0.08); }
.sim-vhow__topictitle { display: flex; align-items: center; gap: 1rem; margin: 0; font-family: var(--font-oswald), "Oswald", sans-serif;
  font-weight: 400; font-size: 2.4rem; text-transform: uppercase; color: #fff; }
.sim-vhow__topictitle .sim-video__icon { width: 3rem; height: 3rem; }
.sim-vhow__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 128rem; }
.sim-vhow__mark { align-self: flex-start; padding: 0.5rem 1.2rem; border-radius: 10rem; font-size: 1.6rem; font-weight: 700; }
.sim-vhow__fig.is-ok .sim-vhow__mark { background: rgba(68, 201, 135, 0.18); color: #6BE3A6; }
.sim-vhow__fig.is-bad .sim-vhow__mark { background: rgba(235, 75, 75, 0.18); color: #FF8A8A; }
.sim-vhow__fig img { display: block; width: 100%; height: auto; border-radius: 0.2rem; }
.sim-vhow__ph { display: grid; place-items: center; aspect-ratio: 1080 / 1350; }
.sim-vhow__fig { position: relative; display: flex; flex-direction: column; gap: 0.8rem; margin: 0; padding: 1rem; background: rgba(0, 0, 0, 0.35);
  border: 0.1rem solid rgba(255, 255, 255, 0.1); }
.sim-vhow__fig.is-ok { border-color: rgba(68, 201, 135, 0.6); }
.sim-vhow__fig { padding: 1.4rem; gap: 1.2rem; }
.sim-vhow__fig.is-bad { border-color: rgba(235, 75, 75, 0.6); }
.sim-vhow__tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.sim-vhow__box { padding: 1.6rem; background: rgba(255, 255, 255, 0.03); font-size: 1.45rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.sim-vhow__box ul { margin: 0; padding-left: 2rem; }
.sim-vhow__box li { margin-bottom: 0.5rem; }

@media (max-width: 900px) {
  .sim-vme, .sim-vrace__cols, .sim-vhow__tips { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sim-vtabs { flex-wrap: wrap; overflow: visible; }
  .sim-vtabs__tab { flex: 1 1 30%; font-size: 1.5rem; padding: 0 0.8rem; min-height: 4rem; }
  .sim-vfeed__plats { margin-left: 0; }
  .sim-vfeed__grid, .sim-vkit__grid--video { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .sim-vkit__grid--still { grid-template-columns: 1fr; }
  .sim-vhow__pair { grid-template-columns: 1fr; gap: 1.4rem; }
  .sim-vhow__fig { padding: 0.8rem; }
  .sim-vhow__topictitle { font-size: 2rem; }
  .sim-vkit__zip, .sim-vkit__prog { min-width: 0; width: 100%; }
  .sim-vrace__title h4, .sim-vkit__head h4, .sim-vhow__head h4, .sim-vtracks__head h4 { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sim-vcard2 { animation: none; }
  .sim-vcard2__img, .sim-vme__fill { transition: none; }
}
.sim-vhow__soon { font-size: 1.4rem; color: rgba(255, 255, 255, 0.6); }

/* a win (backend/alerts.py) */
.sim-win { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 2rem; background: rgba(0, 0, 0, 0.62);
  animation: sim-win-fade 200ms ease-out both; }
.sim-win.is-out { opacity: 0; transition: opacity 150ms ease-out; }
@keyframes sim-win-fade { from { opacity: 0; } }
.sim-win__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: min(46rem, 100%);
  padding: 3.2rem 2.8rem 2.6rem; text-align: center; border: 0.1rem solid #E4AE39; border-radius: 0.4rem;
  background: radial-gradient(120% 90% at 50% 0%, rgba(228, 174, 57, 0.28), rgba(20, 20, 22, 0.98) 60%);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.6), 0 0 4rem rgba(228, 174, 57, 0.25);
  animation: sim-win-in 260ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes sim-win-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
.sim-win__burst { font-size: 4.8rem; line-height: 1; filter: drop-shadow(0 0 1.6rem rgba(255, 212, 122, 0.6)); }
.sim-win__img { max-width: 70%; max-height: 16rem; object-fit: contain; filter: drop-shadow(0 1rem 2rem rgba(0, 0, 0, 0.6)); }
.sim-win__title { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3rem; line-height: 1.15; text-transform: uppercase; color: #FFD47A; }
.sim-win__body { margin: 0; font-size: 1.6rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.sim-win__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; width: 100%; margin-top: 0.6rem; }
.sim-win__row .sim-bbtn { width: auto; min-width: 16rem; flex: 1 1 16rem; }
@media (prefers-reduced-motion: reduce) { .sim-win, .sim-win__card { animation: none; } }
.sim-vgen { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; padding: 2.4rem; border: 0.1rem dashed rgba(228, 174, 57, 0.6);
  background: radial-gradient(100% 140% at 0% 0%, rgba(228, 174, 57, 0.14), rgba(0, 0, 0, 0.2) 60%); }
.sim-vgen__list { margin: 0; padding-left: 2rem; font-size: 1.55rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.sim-vgen__go { width: auto; min-width: 30rem; }
.sim-vhow__note { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding: 1.4rem 1.6rem; font-size: 1.45rem; line-height: 1.45;
  color: rgba(255, 255, 255, 0.85); border: 0.1rem solid rgba(228, 174, 57, 0.45); background: rgba(228, 174, 57, 0.08); }
.sim-vhow__note span { flex: 1 1 32rem; }
.sim-vhow__note .sim-bbtn { width: auto; min-width: 24rem; }
.sim-cap__card { gap: 1.4rem; }
.sim-cap__slot { min-height: 7.8rem; display: grid; place-items: center; }
@media (max-width: 760px) { .sim-vgen__go, .sim-vhow__note .sim-bbtn { width: 100%; min-width: 0; } .sim-vgen { padding: 1.6rem; } }
.sim-vhow__plats { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* «Наши треки» on the promo tab: a SoundCloud-like row per track (sim.js renderTracks) */
.sim-vtracks { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.4rem; }
.sim-vtracks__head { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.4rem; }
.sim-vtracks__head p { margin: 0; font-size: 1.4rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
.sim-vtrack { display: grid; grid-template-columns: 5.6rem minmax(14rem, 22rem) 1fr auto auto; align-items: center; gap: 1.6rem;
  padding: 1.2rem 1.6rem; background: rgba(255, 255, 255, 0.04); border: 0.1rem solid rgba(255, 255, 255, 0.08);
  transition: border-color 200ms ease, background-color 200ms ease; }
.sim-vtrack.is-playing { border-color: rgba(228, 174, 57, 0.55); background: rgba(228, 174, 57, 0.06); }
.sim-vtrack__play { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #E4AE39; color: #15181D; box-shadow: 0 0 2rem rgba(228, 174, 57, 0.35); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.sim-vtrack__play:active { transform: scale(0.95); }
.sim-vtrack__play svg { width: 2.6rem; height: 2.6rem; fill: currentColor; }
.sim-vtrack__icon-pause, .sim-vtrack.is-playing .sim-vtrack__icon-play { display: none; }
.sim-vtrack.is-playing .sim-vtrack__icon-pause { display: block; }
.sim-vtrack__meta { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.sim-vtrack__title { font-family: inherit; font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-vtrack__sub { font-size: 1.25rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-vtrack__wave { display: flex; align-items: center; gap: 1px; height: 5.2rem; min-width: 0; overflow: hidden; cursor: pointer; }
.sim-vtrack__bar { flex: 1 1 0; min-width: 0; border-radius: 0.1rem; background: rgba(255, 255, 255, 0.28); transition: background-color 120ms linear; }
.sim-vtrack__bar.is-played { background: #E4AE39; }
.sim-vtrack__wave:hover .sim-vtrack__bar:not(.is-played) { background: rgba(255, 255, 255, 0.4); }
.sim-vtrack__time { font-size: 1.3rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.sim-vtrack__dl { width: auto; min-width: 15rem; height: 4.4rem; text-decoration: none; }
.sim-vtrack__dl svg { width: 2rem; height: 2rem; fill: currentColor; }
@media (max-width: 760px) {
  .sim-vtrack { grid-template-columns: 4.8rem 1fr auto; grid-template-areas: "play meta dl" "wave wave wave" "time time time"; gap: 1rem 1.2rem; padding: 1.2rem; }
  .sim-vtrack__play { grid-area: play; width: 4.8rem; height: 4.8rem; }
  .sim-vtrack__meta { grid-area: meta; }
  .sim-vtrack__wave { grid-area: wave; height: 4.4rem; }
  .sim-vtrack__bar:nth-child(2n) { display: none; }
  .sim-vtrack__time { grid-area: time; justify-self: end; margin-top: -0.4rem; }
  .sim-vtrack__dl { grid-area: dl; min-width: 0; padding: 0 1.2rem; }
  .sim-vtrack__dl span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sim-vtrack, .sim-vtrack__play, .sim-vtrack__bar { transition: none; } }

/* ---- the page's words (backend/seo_text.py, sim.js ensureSeoBlock): above the footer, or the
   /promocodes page itself. Plain reading text, quieter than the game around it. ---- */
.sim-seo { width: 100%; max-width: 152rem; margin: 4rem auto 2rem; padding: 0 2rem; box-sizing: border-box;
  font-family: var(--font-sofia-sans), "Sofia Sans", sans-serif; color: rgba(255, 255, 255, 0.72); }
.sim-ppage .sim-seo { margin: 0; padding: 0; max-width: none; }
.sim-seo__in { padding: 3.2rem; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.32); }
/* the page's words behind one small button (seo_text.MORE); /promocodes shows them as the page */
.sim-seo:has(> .sim-seo__more) { margin-top: 2.4rem; }
/* a case page's footer sits in a centred flex row: the words take a row of their own above it
   (else the footer is pushed aside and cut off at the right edge). Full width, never a flex basis:
   on the home page the same parent is a flex column, where a 100% basis is the page's height. */
div:has(> #sim-seo + footer) { flex-wrap: wrap; }
div:has(> #sim-seo + footer) > #sim-seo { flex: none; }
/* …and until they are back after React (html[data-sim-seo], seo.with_body) the footer keeps their room
   above it: the collapsed button's 4.4rem, 2.4rem over it, 2rem under it */
html[data-sim-seo="case"] div:has(> footer):not(:has(> #sim-seo)) > footer,
html[data-sim-seo="custom_case"] div:has(> footer):not(:has(> #sim-seo)) > footer { margin-top: 8.8rem !important; }
/* /promocodes: the codes go into the page after React and push the rest down; the footer, whose top shows
   at the bottom of a tall screen, waits unseen until they are in (at most 3s, sim-ui.css sim-show) */
html[data-sim-seo="promocodes"] body:not(:has(.sim-ppage)) footer { visibility: hidden; animation: sim-show 0s 3s forwards; }
/* In the page's own column (home, «Бонусы», video: a gap of 12rem, 6rem on phones) the button sits
   inside that gap instead of adding a second one, about 3rem from the page and from the footer,
   and lines up with the page's left edge. */
:is([class~="gap-[12rem]"] > .contents, [class~="gap-[12rem]"] > .contents > .contents) > #sim-seo:has(> .sim-seo__more) {
  margin-top: -9rem; margin-bottom: -9rem; padding: 0; }
@media (max-width: 992px) {
  :is([class~="gap-[12rem]"] > .contents, [class~="gap-[12rem]"] > .contents > .contents) > #sim-seo:has(> .sim-seo__more) {
    margin-top: -3.6rem; margin-bottom: -3.6rem; padding: 0 1rem; }
}
.sim-seo__toggle { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 4.4rem; padding: 0 1.6rem; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.2rem; background: rgba(0, 0, 0, 0.32); color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-oswald), "Oswald", sans-serif; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em;
  cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease-out; }
.sim-seo__toggle::-webkit-details-marker { display: none; }
.sim-seo__toggle::after { content: ""; width: 0.7rem; height: 0.7rem; margin-top: -0.3rem; border: solid currentColor; border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg); transition: transform 200ms ease-out, margin 200ms ease-out; }
.sim-seo__more[open] > .sim-seo__toggle { color: #fff; border-color: rgba(68, 201, 135, 0.5); margin-bottom: 1.2rem; }
.sim-seo__more[open] > .sim-seo__toggle::after { transform: rotate(-135deg); margin-top: 0.3rem; }
.sim-seo__toggle:active { transform: scale(0.97); }
@media (hover: hover) { .sim-seo__toggle:hover { color: #fff; border-color: rgba(255, 255, 255, 0.24); } }
.sim-seo h1, .sim-seo h2 { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; text-transform: uppercase;
  color: #fff; margin: 0 0 1.2rem; text-wrap: balance; }
.sim-seo h1 { font-size: 2.8rem; line-height: 1.2; }
.sim-seo h2 { font-size: 2rem; line-height: 1.25; margin-top: 3.2rem; }
.sim-seo h3 { font-size: 1.6rem; color: #fff; margin: 2rem 0 0.6rem; font-weight: 700; }
.sim-seo p, .sim-seo li { font-size: 1.5rem; line-height: 1.6; max-width: 90ch; }
.sim-seo p { margin: 0 0 1.2rem; }
.sim-seo ul, .sim-seo ol { margin: 0 0 1.2rem; padding-left: 2.2rem; }
.sim-seo ul { list-style: disc; }
.sim-seo ol { list-style: decimal; }
.sim-seo li::marker { color: #44C987; }
.sim-seo a { color: #44C987; text-decoration: none; }
.sim-seo a:hover { text-decoration: underline; }
.sim-seo__links { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 0.8rem; }
.sim-seo__links li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; background: rgba(255, 255, 255, 0.04);
  border-radius: 0.2rem; font-size: 1.4rem; }
.sim-seo__links span { color: #E4AE39; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-seo__table { width: 100%; max-width: 90rem; border-collapse: collapse; margin: 0 0 1.2rem; font-size: 1.4rem; }
.sim-seo__table th { text-align: left; font-weight: 700; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; font-size: 1.2rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sim-seo__table td { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; }
.sim-seo__table td:first-child { color: #fff; }
.sim-seo__table td:nth-child(n+2), .sim-seo__table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.sim-seo__codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); gap: 1.2rem; margin: 2rem 0; }
.sim-seo__code { display: flex; flex-direction: column; gap: 0.6rem; padding: 2rem; border-radius: 0.2rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)); border-bottom: 5px solid #44C987; }
.sim-seo__codev { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 3rem; line-height: 1.1;
  letter-spacing: 0.04em; color: #fff; }
.sim-seo__codew { font-size: 1.6rem; font-weight: 700; color: #44C987; }
.sim-seo__coden { font-size: 1.3rem; color: rgba(255, 255, 255, 0.55); }
.sim-seo__codeb { display: flex; gap: 0.8rem; margin-top: 0.8rem; }
/* «Проверено 30.10.2026: 4 рабочих промокода» under the heading, the archive of ended codes at the bottom */
.sim-seo .sim-seo__fresh { display: flex; align-items: center; gap: 0.8rem; margin: 0.6rem 0 1.4rem; font-size: 1.4rem; color: #44C987; }
.sim-seo .sim-seo__fresh::before { flex: none; content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #44C987; box-shadow: 0 0 0.8rem rgba(68, 201, 135, 0.8); }
.sim-seo .sim-seo__ended { display: grid; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.sim-seo .sim-seo__ended li { font-size: 1.4rem; padding: 1rem 1.4rem; border: 0.1rem solid rgba(255, 255, 255, 0.08); border-radius: 0.2rem; color: rgba(255, 255, 255, 0.5); }
.sim-seo__ended b { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 1.7rem; color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
.sim-seo__btn, .sim-seo__copy { display: inline-flex; align-items: center; justify-content: center; min-height: 4.4rem; padding: 0 1.8rem;
  border-radius: 0.2rem; font: 700 1.4rem/1 var(--font-sofia-sans), "Sofia Sans", sans-serif; text-transform: uppercase; cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms ease; }
.sim-seo .sim-seo__btn { background: #44C987; color: #062014; text-decoration: none; }
.sim-seo__copy { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); }
.sim-seo__btn:hover, .sim-seo__copy:hover { filter: brightness(1.08); text-decoration: none; }
.sim-seo__btn:active, .sim-seo__copy:active { transform: scale(0.97); }
@media (max-width: 992px) {
  .sim-seo { padding: 0 1.6rem; }
  .sim-seo__in { padding: 2rem 1.6rem; }
  .sim-seo h1 { font-size: 2.2rem; }
  .sim-seo__table { font-size: 1.3rem; }
  .sim-seo__table td, .sim-seo__table th { padding: 0.7rem 0.4rem; }
}
@media (prefers-reduced-motion: reduce) { .sim-seo__btn, .sim-seo__copy, .sim-seo__toggle, .sim-seo__toggle::after { transition: none; } }

/* ---- layout shift: our additions take their room before they are in ----
   simulator_brand.LAYOUT_EARLY lists in html[data-sim-ld] what sim.js adds to the live-drop block
   once React has it («f» «Получи баланс», «v» «Заработай на видео», «s» the SBP row on phones). Until
   the rows are in (sim.js puts them all in one pass, «Получи баланс» first) the block holds their room
   at its top, so its feed and the page column stay where they will be; the rows then take that room
   and the rules further down go by the rows themselves. */
html[data-sim-ld~="f"] div:has(> [data-testid="live-drop"]):not(:has(.sim-freebal)) { --sim-ld-a: 9.4rem; }
html[data-sim-ld~="v"] div:has(> [data-testid="live-drop"]):not(:has(.sim-freebal)) { --sim-ld-b: 6.4rem; }
html[data-sim-ld] [data-testid="live-drop"]:not(:has(.sim-freebal))::before { content: ""; display: block; flex: none;
  height: calc(var(--sim-ld-a, 0rem) + var(--sim-ld-b, 0rem) + var(--sim-ld-c, 0rem)); }
/* the header's «Заработай на видео» link (sim.js ensureVideoNav) comes after the original's items in a
   centred row: the row is as wide as it will be from the first paint (2 gaps, the divider, the link) */
html[data-sim-ld~="v"] .sim-navvideo { min-width: 18.8rem; }
html[data-sim-ld~="v"] [data-testid="header-nav-desktop"]:not(:has(> .sim-navvideo)) { padding-right: calc(2 * 3rem + 0.2rem + 18.8rem); }
@media (max-width: 1500px) {
  html[data-sim-ld~="v"] .sim-navvideo { min-width: 16.2rem; }
  html[data-sim-ld~="v"] [data-testid="header-nav-desktop"] { gap: 2rem !important; }
  html[data-sim-ld~="v"] [data-testid="header-nav-desktop"]:not(:has(> .sim-navvideo)) { padding-right: calc(2 * 2rem + 0.2rem + 16.2rem); }
}
/* «Бонусы» (sim.js ensureBonusPage): hidden and a screen tall until the player's bonuses and the invite
   card are in, then shown at once, instead of its blocks pushing each other down as their data comes */
.sim-bpage[data-loading] { visibility: hidden; opacity: 0; min-height: 100vh; }
.sim-bpage { transition: opacity 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .sim-bpage { transition: none; } }

/* ---- the phone (≤992px, the original's own breakpoint) ----
   «Получи баланс бесплатно» and «Заработай на видео» sit inside the original's live-drop block at the top
   of the phone screen; the page column below it is padded for the original's block only, so it moves
   down by exactly what ours add (4rem, 6.4rem, 4.4rem). The install banner (app.js) moves the
   header and the live drops itself (the original's html[data-pwa-install-banner] rule); the other
   fixed bars under the header — «Назад к кейсам» and the sound button of a case, the cases tabs, the
   toasts — move with them. A case page and «Авторские кейсы» hide the block on the phone (its lg:hidden):
   nothing to make room for there. */
@media (max-width: 992px) {
  html[data-sim-ld~="f"] div:has(> [data-testid="live-drop"]):not(:has(.sim-freebal)) { --sim-ld-a: 4rem; }
  html[data-sim-ld~="s"] div:has(> [data-testid="live-drop"]):not(:has(.sim-freebal)) { --sim-ld-c: 4.4rem; }
  html[data-sim-ld] [data-testid="live-drop"]:not(.lg\:hidden):not(:has(.sim-freebal)) + * {
    margin-top: calc(var(--sim-ld-a, 0rem) + var(--sim-ld-b, 0rem) + var(--sim-ld-c, 0rem)) !important; }
  html[data-sim-ld] [data-testid="live-drop"]:not(.lg\:hidden):not(:has(.sim-freebal)) {
    position: absolute !important; top: 0 !important; translate: none !important; transform: none !important; opacity: 1 !important; }
  div:has(> [data-testid="live-drop"] > .sim-freebal) { --sim-ld-a: 4rem; }
  div:has(> [data-testid="live-drop"] > .sim-vbanner) { --sim-ld-b: 6.4rem; }
  div:has(> [data-testid="live-drop"] > .sim-sbp) { --sim-ld-c: 4.4rem; }
  [data-testid="live-drop"]:not(.lg\:hidden):has(> .sim-freebal, > .sim-vbanner, > .sim-sbp) + * {
    margin-top: calc(var(--sim-ld-a, 0rem) + var(--sim-ld-b, 0rem) + var(--sim-ld-c, 0rem)) !important; }
  /* With our rows the block is tall: the original's way (fixed, slides away after 30px of scroll) would
     leave its whole height empty above the page. It scrolls with the page instead, like the page's own top. */
  [data-testid="live-drop"]:not(.lg\:hidden):has(> .sim-freebal, > .sim-vbanner, > .sim-sbp) {
    position: absolute !important; top: 0 !important; translate: none !important; transform: none !important; opacity: 1 !important; }
  /* «Пополняй через СБП» as that block's row */
  .sim-sbp--row { position: relative; z-index: 2; left: auto; transform: none; flex-shrink: 0; width: 100%; max-width: none; height: 4.4rem;
    box-sizing: border-box; justify-content: space-between; border-radius: 0; border-width: 0 0 0.1rem; box-shadow: none; animation: none; }
  .sim-sbp--row .sim-sbp__text { flex: 1; min-width: 0; }
  html[data-pwa-install-banner="open"] [data-testid="case-open-back-link"],
  html[data-pwa-install-banner="open"] .fixed.right-\[2rem\].top-\[8\.8rem\],
  html[data-pwa-install-banner="open"] [data-testid="cases-search-bar"],
  html[data-pwa-install-banner="open"] .sim-toasts { margin-top: var(--pwa-install-banner-height, 0px); }
}
/* the sum buttons of the deposit window are narrow on a phone: «+55%» rides on the button's top edge,
   centred, instead of on its number */
@media (max-width: 480px) {
  [data-sim-bonus]::after { top: -1.1rem; right: 50%; transform: translateX(50%); padding: 0 0.3rem; font-size: 1rem; line-height: 1.5rem; }
}
/* very low phones (iPhone SE 1 and the like): a case's «Открыть» row ends at the very bottom of the
   screen, right where the pill floats; the pill stays on every other page */
@media (max-width: 992px) and (max-height: 640px) {
  body:has([data-testid="case-open-button"]) .sim-pill { display: none; }
}
/* short phones: the login window's picture gives its height to the buttons */
@media (max-width: 992px) and (max-height: 700px) {
  [data-testid="auth-modal"] [class*="lg:h-[24.3rem]"] { height: 15rem !important; }
  [data-testid="auth-modal"] [class*="lg:h-[24.3rem]"] + div { gap: 2.4rem !important; padding-top: 2.4rem !important; }
}

/* ---- the iOS app (caser-app/ios; app.js sets html[data-app]) ----
   App Store rule 3.1.1: coins for money only through Apple's in-app purchase. The app has none, so
   every way into the deposit window is gone there (sim.js closes the window if something opens it). */
html[data-app="ios"] [data-testid="header-topup-button-mobile"],
html[data-app="ios"] [data-testid="header-topup-button-desktop"],
html[data-app="ios"] [data-testid="case-open-insufficient-balance-topup"],
html[data-app="ios"] [data-testid="profile-topup-button"],
html[data-app="ios"] [data-testid="push-post-prompt-deposit-button"],
html[data-app="ios"] [data-testid^="weekly-drop-cta-topup"],
html[data-app="ios"] [data-testid="sim-offer-pill"],
html[data-app="ios"] .sim-sbp,
html[data-app="ios"] .sim-offer,
html[data-app="ios"] .sim-streamer,
/* Google refuses sign-in inside an app's web view (disallowed_useragent): Steam and Telegram stay */
html[data-app="ios"] .sim-auth__btn--google,
html[data-webview] .sim-auth__btn--google { display: none !important; }
/* «Удалить аккаунт» under «Сохранить» of the settings window (sim.js ensureStreamer) */
.sim-delacc { display: block; align-self: center; margin: 1.4rem auto 0; padding: 0.6rem 1rem; text-align: center; font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.45); text-decoration: underline; text-underline-offset: 0.3rem; }
.sim-delacc:hover { color: #ff7a7a; }
.sim-seo__all { margin: 0 0 1.6rem; }
.sim-seo__all summary { display: inline-flex; align-items: center; min-height: 4.4rem; cursor: pointer; color: #44C987; font-weight: 700; font-size: 1.5rem; }
.sim-seo__all[open] summary { margin-bottom: 0.4rem; }
/* «Авторские кейсы» keep «Создать свой кейс» in a bar at the bottom of the phone screen: the pill stands above it */
@media (max-width: 992px) {
  body:has([data-testid="custom-cases-create-mobile"]) .sim-pill { bottom: calc(8.6rem + env(safe-area-inset-bottom)); }
  /* …and the page ends low enough for the footer's last lines to come out from under it */
  body:has([data-testid="custom-cases-create-mobile"]):has(.sim-pill) footer { padding-bottom: 14rem; }
}
/* a phone turned sideways: the screen is too low for our rows over the live drops; the original's block stays */
@media (max-width: 992px) and (max-height: 500px) and (orientation: landscape) {
  [data-testid="live-drop"] > .sim-freebal, [data-testid="live-drop"] > .sim-vbanner, [data-testid="live-drop"] > .sim-sbp--row { display: none !important; }
  div:has(> [data-testid="live-drop"]) { --sim-ld-a: 0rem !important; --sim-ld-b: 0rem !important; --sim-ld-c: 0rem !important; }
}
/* the header's bell and menu are 24px icons: their tap area grows to a thumb's size, the look stays */
@media (max-width: 992px) {
  [data-testid="header-notifications-toggle-mobile"], [data-testid="header-burger-toggle"] { position: relative; }
  [data-testid="header-notifications-toggle-mobile"]::after, [data-testid="header-burger-toggle"]::after {
    content: ""; position: absolute; inset: -0.9rem -0.6rem; }
}
/* low phones (iPhone SE and the like): «Заработай на видео» in one line, the page column follows */
@media (max-width: 992px) and (max-height: 700px) {
  [data-testid="live-drop"] > .sim-vbanner { height: 4.4rem; gap: 1rem; padding: 0 1.2rem; }
  [data-testid="live-drop"] > .sim-vbanner .sim-vbanner__play { width: 2.8rem; height: 2.8rem; font-size: 1.1rem; }
  [data-testid="live-drop"] > .sim-vbanner .sim-vbanner__text b { font-size: 1.7rem; }
  [data-testid="live-drop"] > .sim-vbanner .sim-vbanner__text span { display: none; }
  div:has(> [data-testid="live-drop"] > .sim-vbanner) { --sim-ld-b: 4.4rem; }
  html[data-sim-ld~="v"] div:has(> [data-testid="live-drop"]):not(:has(.sim-freebal)) { --sim-ld-b: 4.4rem; }
}

/* app.css */
/* The app on the phone and the Telegram Mini App (static/sim/app.js, backend/pwa.py, backend/tma.py).
   Sizes in rem like the site (1rem = 10px); colours of the simulator. */
:root { --app-ease: cubic-bezier(0.23, 1, 0.32, 1); --app-drawer: cubic-bezier(0.32, 0.72, 0, 1); }

/* ---- the install banner: the original's own slot (html[data-pwa-install-banner] moves the header down) ---- */
/* above the header (40) and the live drops (50), under the site's windows (99999): a window opened
   over the page covers the banner instead of losing its top and its «×» under it */
.app-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; padding-top: calc(1rem + env(safe-area-inset-top));
  background: linear-gradient(180deg, #3b3b3b 0%, #272727 100%); border-bottom: 0.1rem solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.25); font-family: var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif;
  transform: translateY(0); transition: transform 260ms var(--app-ease), opacity 260ms var(--app-ease); }
@starting-style { .app-banner { transform: translateY(-100%); opacity: 0; } }
.app-banner--out { transform: translateY(-100%); opacity: 0; }
.app-banner__main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.app-banner__icon { flex: none; width: 5.6rem; height: 5.6rem; border-radius: 1.3rem; box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.3); }
.app-banner__text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.app-banner__title { font-size: 1.45rem; font-weight: 600; line-height: 1.7rem; color: #fff; letter-spacing: -0.01em; }
.app-banner__sub { font-size: 1.2rem; line-height: 1.45rem; color: rgba(255, 255, 255, 0.6); }
.app-banner__sub b { color: #e4ae39; font-weight: 700; }
.app-banner__side { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.app-banner__x { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 0; background: none; color: #fff;
  opacity: 0.5; font-size: 2rem; line-height: 1; cursor: pointer; border-radius: 50%; transition: opacity 160ms ease; }
.app-banner__x:hover { opacity: 1; }
/* small phones: one line of title, two of text, the button and «×» still a thumb's size */
@media (max-width: 400px) {
  .app-banner { gap: 0.6rem; padding: 0.8rem 0.8rem 0.8rem 1rem; padding-top: calc(0.8rem + env(safe-area-inset-top)); }
  .app-banner__main { gap: 0.8rem; }
  .app-banner__icon { width: 4.4rem; height: 4.4rem; border-radius: 1rem; }
  .app-banner__title { font-size: 1.35rem; line-height: 1.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-banner__sub { font-size: 1.1rem; line-height: 1.35rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .app-banner__side { gap: 0.2rem; }
  .app-banner .app-btn { height: 3.2rem; padding: 0 1.1rem; font-size: 1.2rem; }
  .app-banner__x { width: 3.6rem; height: 3.6rem; }
}
@media (max-width: 359px) { .app-banner__icon { display: none; } }
.app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 3.4rem; padding: 0 1.4rem;
  border: 0; border-radius: 10rem; background: #44c987; color: #0d1f15; font: 600 1.35rem/1 var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--app-ease), filter 160ms ease; }
.app-btn:hover { filter: brightness(1.08); }
.app-btn:active { transform: scale(0.97); }
.app-btn[disabled] { opacity: 0.6; cursor: default; }
.app-btn--ghost { background: transparent; color: #fff; border: 0.1rem solid rgba(255, 255, 255, 0.2); }
.app-btn--wide { width: 100%; height: 4.8rem; border-radius: 1.2rem; font-size: 1.6rem; }

/* ---- the sheet: how to install, notifications ---- */
.app-sheet { position: fixed; inset: 0; z-index: 1000003; display: flex; align-items: flex-end; justify-content: center; }
.app-sheet__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 1; transition: opacity 240ms ease; }
@starting-style { .app-sheet__shade { opacity: 0; } }
.app-sheet__box { position: relative; width: 100%; max-width: 52rem; max-height: calc(100dvh - 4rem); overflow: auto;
  padding: 1rem 2rem calc(2.4rem + env(safe-area-inset-bottom)); border-radius: 2rem 2rem 0 0;
  background: linear-gradient(180deg, #262626 0%, #1b1b1b 100%); border: 0.1rem solid rgba(255, 255, 255, 0.08); border-bottom: 0;
  box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.5); color: #fff; font-family: var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif;
  transform: translateY(0); transition: transform 320ms var(--app-drawer); }
@starting-style { .app-sheet__box { transform: translateY(100%); } }
.app-sheet--out .app-sheet__shade { opacity: 0; }
.app-sheet--out .app-sheet__box { transform: translateY(100%); }
.app-sheet__grip { width: 4rem; height: 0.45rem; margin: 0 auto 1.6rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.2); }
.app-sheet__head { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.8rem; }
.app-sheet__head img { width: 6.4rem; height: 6.4rem; border-radius: 1.5rem; flex: none; }
.app-sheet__title { margin: 0; font: 400 2.2rem/2.6rem var(--font-oswald), "Oswald", sans-serif; text-transform: uppercase; }
.app-sheet__sub { margin: 0.4rem 0 0; font-size: 1.35rem; line-height: 1.4; color: rgba(255, 255, 255, 0.65); }
.app-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; counter-reset: s; }
.app-step { display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.05); font-size: 1.5rem; line-height: 1.35; counter-increment: s; }
.app-step::before { content: counter(s); flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: 50%; background: #44c987; color: #0d1f15; font-weight: 700; font-size: 1.35rem; }
.app-step img { width: 2.8rem; height: 2.8rem; flex: none; margin-left: auto; }
.app-step b { color: #44c987; font-weight: 600; }
.app-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1.8rem; }
.app-perk { padding: 1.1rem 0.8rem; border-radius: 1.2rem; background: rgba(68, 201, 135, 0.08); border: 0.1rem solid rgba(68, 201, 135, 0.18);
  text-align: center; font-size: 1.2rem; line-height: 1.3; color: rgba(255, 255, 255, 0.8); }
.app-perk span { display: block; margin-bottom: 0.4rem; font-size: 2rem; }
.app-note { margin: 1.2rem 0 0; font-size: 1.25rem; line-height: 1.45; color: rgba(255, 255, 255, 0.5); text-align: center; }
.app-note b { color: #e4ae39; }
.app-copy { display: flex; gap: 0.8rem; margin: 0 0 1.4rem; }
.app-copy input { flex: 1; min-width: 0; height: 4.4rem; padding: 0 1.2rem; border-radius: 1rem; border: 0.1rem solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1.4rem; }
.app-sheet .app-btn + .app-btn { margin-top: 1rem; }

/* ---- the app card of «Бонусы» (sim.js renderApp) ---- */
.sim-appcard { position: relative; display: flex; align-items: center; gap: 2rem; padding: 2rem 2.4rem; overflow: hidden;
  border: 0.1rem solid rgba(68, 201, 135, 0.4); background: linear-gradient(100deg, rgba(68, 201, 135, 0.16) 0%, rgba(0, 0, 0, 0.55) 60%); }
.sim-appcard__icon { width: 7.2rem; height: 7.2rem; border-radius: 1.7rem; flex: none; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45); }
.sim-appcard__text { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; min-width: 0; }
.sim-appcard__title { font-family: var(--font-oswald), "Oswald", sans-serif; font-weight: 400; font-size: 2.4rem; line-height: 1.2;
  text-transform: uppercase; color: #fff; }
.sim-appcard__title em { font-style: normal; color: #e4ae39; }
.sim-appcard__sub { font-size: 1.45rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.sim-appcard__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.sim-appcard__chip { padding: 0.4rem 1rem; border-radius: 10rem; background: rgba(255, 255, 255, 0.07); font-size: 1.25rem; color: rgba(255, 255, 255, 0.75); }
.sim-appcard__chip--ok { background: rgba(68, 201, 135, 0.16); color: #44c987; }
.sim-appcard__actions { display: flex; flex-direction: column; gap: 1rem; flex: none; min-width: 24rem; }
@media (max-width: 992px) {
  .sim-appcard { flex-wrap: wrap; padding: 1.6rem; gap: 1.4rem; }
  .sim-appcard__icon { width: 5.6rem; height: 5.6rem; border-radius: 1.3rem; }
  .sim-appcard__text { flex-basis: calc(100% - 7rem); }
  .sim-appcard__actions { min-width: 0; width: 100%; }
}

/* ---- inside Telegram (html[data-tma]) ---- */
html[data-tma] .app-banner { display: none; }
html[data-tma] { overscroll-behavior: none; }
.app-tma-wait { position: fixed; inset: 0; z-index: 1000005; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; background: #151515; color: rgba(255, 255, 255, 0.75); font: 500 1.5rem var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif;
  transition: opacity 240ms ease; }
.app-tma-wait img { width: 7.2rem; height: 7.2rem; border-radius: 1.8rem; animation: app-pulse 1.2s ease-in-out infinite; }
.app-tma-wait--out { opacity: 0; pointer-events: none; }
@keyframes app-pulse { 50% { transform: scale(0.94); opacity: 0.8; } }

/* ---- small toast of its own (the streamer look has no sim.css) ---- */
.app-toast { position: fixed; left: 50%; bottom: calc(2rem + env(safe-area-inset-bottom)); z-index: 1000004; max-width: calc(100vw - 3.2rem);
  display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; border-radius: 1.2rem; background: #232323;
  border: 0.1rem solid rgba(255, 255, 255, 0.1); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45); color: #fff;
  font: 500 1.4rem/1.35 var(--font-sofia-sans), "Sofia Sans", system-ui, sans-serif; transform: translateX(-50%);
  transition: transform 260ms var(--app-ease), opacity 260ms var(--app-ease); }
@starting-style { .app-toast { transform: translate(-50%, 1.6rem); opacity: 0; } }
.app-toast--out { opacity: 0; transform: translate(-50%, 1.6rem); }

@media (prefers-reduced-motion: reduce) {
  .app-banner, .app-sheet__box, .app-sheet__shade, .app-toast { transition-duration: 1ms; }
  .app-tma-wait img { animation: none; }
}