/* Every value below is taken from mycs2.in (site-design/ + live CSS bundle 3ab4e9a8…css, 2026-09-26).
   Class names mirror the site: .skin, .info-panel, .mb-round__head_*, .roulette, .drop, .promocode, .action, .btn, .tag.
   Touch states follow the site pattern: hover only for real pointers, :active for touch. */
@font-face { font-family: "Rouben"; src: url(fonts/Rouben-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Rouben"; src: url(fonts/Rouben-Medium.woff2) format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Rouben"; src: url(fonts/Rouben-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Rouben"; src: url(fonts/Rouben-Bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Druk Text Cyr"; src: url(fonts/DrukTextCyrBoldItalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: block; }

:root {
  color-scheme: dark;
  --bg: #0A0D1D; --panel: #070A18; --border: #1E2339; --text: #B7BCDB; --white: #FFFFFF; --muted: #41496B; --grey: #767B9F;
  --me: #13CDFF;   /* site .accent, cyan half of the logo */
  --opp: #FC5530;  /* site orange CTA, orange half of the logo */
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html, body { background: var(--bg); color: var(--text); font: 400 15px/18px "Rouben", sans-serif; overscroll-behavior: none; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: var(--tg-viewport-stable-height, 100dvh);
  padding: 0 env(safe-area-inset-right, 0px) var(--safe-bottom) env(safe-area-inset-left, 0px);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; -webkit-user-drag: none; }
.hidden { display: none !important; }

/* ---------- header (.header__main) ---------- */
.top { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: calc(52px + var(--safe-top)); padding: var(--safe-top) 13px 0; background-color: #080A19; }
.top:before { content: ""; position: absolute; left: 0; top: 0; width: 300px; height: 100%; pointer-events: none; background: linear-gradient(160deg, rgba(19,205,255,.2) -20%, rgba(19,205,255,0) 45.1%); }
.top__logo { position: relative; width: 36px; height: 31px; background: url(img/logo.svg) 50%/100% no-repeat; transition: .12s ease-in-out; }
.top__logo:active { filter: brightness(1.25) saturate(1.1); transform: scale(1.1); }
.top__name { position: relative; color: var(--white); font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.top__link { position: relative; margin-left: auto; padding: 8px 0 8px 12px; font-size: 14px; font-weight: 600; text-transform: uppercase; transition: color .08s ease-in-out; }
.top__link:active { color: rgba(255,255,255,.9); }

/* ---------- screens ---------- */
.screen { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 12px; overflow: hidden; }
.screen > * { position: relative; z-index: 1; }
/* .layout-case__case-img-overlay: the case art, blurred, behind the page */
.screen > .case-bg { position: absolute; z-index: 0; top: 0; left: 50%; width: 500px; height: 370px; transform: translateX(-50%); pointer-events: none;
  background: url(img/hyper3-360.webp) 50%/cover no-repeat; opacity: .1; filter: blur(20px); }
/* .title_main .title__title */
.h1 { font: italic 700 28px/30px "Druk Text Cyr", "Rouben", sans-serif; letter-spacing: -.5px; color: var(--white); text-transform: uppercase; text-align: center; }

/* .layout-case__labels + .info-panel */
.labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.info-panel { --btn-bg-color: rgba(65,73,107,.15); --btn-bg-color-hover: rgba(65,73,107,.25); --btn-bg-shadow-color: #41496B; --btn-bg-shadow-color-hover: #545F8B; --btn-content-color: #B7BCDB; --btn-content-color-hover: #fff;
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; line-height: 18px; border-radius: 32px; cursor: pointer;
  color: var(--btn-content-color); background-color: var(--btn-bg-color); box-shadow: inset 0 -4px 16px var(--btn-bg-shadow-color); transition: .12s ease; }
.info-panel_orange { --btn-bg-color: #2F1819; --btn-bg-color-hover: #361B1D; --btn-bg-shadow-color: rgba(255,153,0,.15); --btn-bg-shadow-color-hover: rgba(255,173,51,.15); --btn-content-color: rgba(255,180,140,.8); --btn-content-color-hover: #FFB48C; }
.info-panel:active { background-color: var(--btn-bg-color-hover); box-shadow: inset 0 -4px 16px var(--btn-bg-shadow-color-hover); color: var(--btn-content-color-hover); }

/* .layout-case__case-img: case art + highlightCase sheen, shakeCase when ready, scaleDownCase when opening */
.case { flex: 1 1 0; min-height: 48px; display: flex; align-items: center; justify-content: center; margin: 6px 0 2px; }
.case__img { position: relative; height: 100%; max-height: 230px; aspect-ratio: 1; }
.case__img img { width: 100%; height: 100%; }
.case__mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(img/hyper3-360.webp) 0 0/100% 100%; mask: url(img/hyper3-360.webp) 0 0/100% 100%; }
.case__mask:before { content: ""; position: absolute; top: 10px; left: 0; z-index: 1; width: 60px; height: 170%; border-radius: 100%;
  background: url(img/hyper3-360.webp) 50%/cover no-repeat; filter: blur(60px) brightness(2.15) saturate(1.3); opacity: .2;
  transform: rotate(-25deg) translateX(-150px); animation: highlightCase 14s ease 1s infinite forwards; }
.case.ready .case__img { animation: shakeCase 1s linear 0s forwards; }
.case.opening .case__img { animation: scaleDownCase .5s ease 0s forwards; }
.case_opened .case__img { max-height: 320px; opacity: .8; transform: scale(.75); }  /* end state of scaleDownCase while the roulette runs */
@keyframes highlightCase { 0% { transform: rotate(-28deg) translateX(-150px); } 10% { transform: rotate(-28deg) translateX(450px); } to { transform: rotate(-28deg) translateX(450px); } }
@keyframes shakeCase { 0% { transform: translateY(-4px) rotate(0deg); } 50% { transform: translateY(2px) rotate(1deg); } to { transform: translateY(0) rotate(0deg); } }
@keyframes scaleDownCase { 0% { transform: scale(1); } to { opacity: .8; transform: scale(.75); } }

/* ---------- ТЫ VS СОПЕРНИК = .mb-round__head (case battles) ---------- */
.vs { display: grid; grid-template-columns: 1fr 40px 1fr; flex: none; background-color: #0A0D1D; border: 1px solid var(--border); }
.vs__side { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 8px 6px; transition: .2s ease-in-out; }
.vs__side_me { --c: var(--me); } .vs__side_opp { --c: var(--opp); }
.vs__icon { flex: none; width: 26px; height: 30px; background: 50%/contain no-repeat; display: none; }
.vs__name { font-weight: 700; font-size: 14px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); transition: color .2s ease-in-out; }
.vs__pips { display: flex; gap: 3px; margin-top: 5px; }
.vs__pips i { width: 20px; height: 4px; background-color: var(--border); transition: .2s ease-in-out; }
.vs__pips i.on { background-color: var(--c); }
.vs__x { display: flex; align-items: center; justify-content: center; font: italic 700 18px "Druk Text Cyr", sans-serif; color: var(--muted); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
/* .mb-round__head_waiting: gradient + moving flare */
.vs__side_waiting { background-image: linear-gradient(180deg, #0A0D1D, #101426); }
.vs__side_waiting .vs__icon { display: block; background-image: url(img/status-waiting.svg); }
.vs__side_waiting:before { content: ""; position: absolute; top: 50%; left: -200px; width: 42px; height: 120%; background-color: #BBD0E8; filter: blur(52px); opacity: .18;
  transform: rotate(20deg) translateY(-50%); animation: battleWaitingFlare 1.5s ease infinite backwards; will-change: transform; }
/* .mb-round__head_ready */
.vs__side_ready { background-image: linear-gradient(0deg, #0A1B2D, #0A0D1D); animation: battleReadyPulse 2s ease 1 forwards; backface-visibility: hidden; }
.vs__side_ready .vs__name { color: var(--c); }
.vs__side_done .vs__icon { display: block; background-image: url(img/status-ready.svg); }
@keyframes battleWaitingFlare { 0% { left: -200px; } to { left: 120%; } }
@keyframes battleReadyPulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.15); } to { filter: brightness(1); } }

.status { flex: none; min-height: 38px; margin: 10px 0 10px; text-align: center; }
.status b { display: block; font-weight: 700; font-size: 15px; line-height: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }
.status small { display: block; min-height: 15px; margin-top: 3px; font-size: 12px; line-height: 15px; font-weight: 500; color: var(--grey); }
.status.upd { animation: loadedPrizeItem .4s ease both; }
@keyframes loadedPrizeItem { 0% { opacity: 0; transform: translateY(-20px) scaleY(.85); } to { opacity: 1; transform: translateY(0) scaleY(1); } }

/* ---------- drop cards = .skin ---------- */
.cards { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; flex: none; } /* 4 + 3 centred */
.cards .skin { grid-column: span 2; }
.cards .skin:nth-child(5) { grid-column: 2 / span 2; }
.skin {
  --rarity-color: #41496B;
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 118px; padding: 0 6px 6px;
  background: radial-gradient(50% 50% at 50% 50%, #383F5E 0, #1E2339 100%); border: 1px solid #383F5E; border-bottom: 1px solid var(--rarity-color);
  color: var(--text); text-align: left; transition: .2s ease-in-out; animation: loadedSkinItem .4s ease var(--d, 0s) both;
}
.skin:before, .skin:after { content: ""; position: absolute; left: -1px; bottom: -1px; height: 1px; pointer-events: none; transition: .2s ease-in-out; }
.skin:before { opacity: 0; visibility: hidden; width: calc(100% + 4px); }
.skin:after { width: calc(100% + 2px); background-color: var(--rarity-color); }
.skin__img { display: block; width: 100%; max-width: 74px; margin: 12px auto -6px; transition: .2s ease-in-out; }
.skin__img img { width: 100%; aspect-ratio: 1; }
.skin__names { margin-top: auto; }
.skin__type, .skin__name { display: block; font-size: 12px; line-height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: .08s ease; }
.skin__name { color: var(--white); font-weight: 600; }
.skin.me { --rarity-color: var(--me); } .skin.opp, .skin.scan { --rarity-color: var(--opp); }
.skin.me .skin__name, .skin.opp .skin__name { color: var(--rarity-color); }
.skin:disabled { cursor: default; }
/* site .skin:hover / :active; the same look marks a picked drop (.on) and the opponent's selection (.scan) */
.skin.on, .skin.scan, .skin.free:active { border-color: var(--rarity-color); z-index: 2; }
.skin.on:before, .skin.scan:before, .skin.free:active:before { background: linear-gradient(180deg, rgba(30,35,57,0) 0, var(--rarity-color) 100%); height: 75px; opacity: .12; visibility: visible; }
.skin.on:after, .skin.scan:after, .skin.free:active:after { height: 6px; opacity: 1; visibility: visible; }
.skin.on .skin__img, .skin.scan .skin__img, .skin.free:active .skin__img { transform: scale(1.05) rotate(8deg); }
.skin.free:active { --rarity-color: var(--me); }
@media not all and (hover: none) and (pointer: coarse) {
  .skin.free:hover { --rarity-color: var(--me); border-color: var(--rarity-color); z-index: 2; }
  .skin.free:hover:before { background: linear-gradient(180deg, rgba(30,35,57,0) 0, var(--rarity-color) 100%); height: 75px; opacity: .12; visibility: visible; }
  .skin.free:hover:after { height: 6px; opacity: 1; visibility: visible; }
  .skin.free:hover .skin__img { transform: scale(1.05) rotate(8deg); }
  .info-panel:hover { background-color: var(--btn-bg-color-hover); box-shadow: inset 0 -4px 16px var(--btn-bg-shadow-color-hover); color: var(--btn-content-color-hover); }
  .top__link:hover { color: rgba(255,255,255,.9); }
  .top__logo:hover { filter: brightness(1.25) saturate(1.1); transform: scale(1.1); }
}
.skin_opacity .skin__img, .skin_opacity .skin__type, .skin_opacity .skin__name { opacity: .5; }
.skin.lock { animation: battleDropPulse 1.3s ease 0s forwards; }
@keyframes loadedSkinItem { 0% { opacity: 0; transform: translateY(-20px) scaleY(.85); } to { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes battleDropPulse { 0% { filter: brightness(.8); opacity: .1; transform: scale(.5); } 50% { filter: brightness(1.2); opacity: 1; transform: scale(1.05); } to { filter: brightness(1); opacity: 1; transform: scale(1); } }

/* ---------- .btn.btn_accent.btn_huge ("ВОЙТИ ЧЕРЕЗ STEAM") ---------- */
.bottom { flex: none; margin-top: auto; padding-top: 12px; }
.btn {
  --btn-color: #108BB1; --btn-color-hover: #13CDFF; --btn-text-color: #fff; --btn-bg-color: #0A1728; --btn-bg-color-hover: #0B1A2D;
  --s1: rgba(19,205,255,.5); --s2: rgba(19,205,255,.3); --s3: rgba(19,205,255,.4);
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 58px; padding: 16px 32px;
  font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; text-align: center;
  color: var(--btn-text-color); background: var(--btn-bg-color); border: 1px solid var(--btn-color);
  box-shadow: inset 0 -2.5px 16px var(--s1); text-shadow: 0 0 2px var(--s1), 0 0 4px var(--s2), 0 0 16px var(--s3);
  backdrop-filter: blur(8px); transition: .12s ease;
}
.btn:before, .btn:after { content: ""; position: absolute; top: 50%; width: 2px; height: 60%; background-color: var(--btn-color);
  -webkit-mask: url(img/btn_border.svg) 0 0/100% 100%; mask: url(img/btn_border.svg) 0 0/100% 100%; transition: .12s ease; }
.btn:before { left: 0; transform: translateY(-50%) rotate(180deg); }
.btn:after { right: 0; transform: translateY(-50%); }
.btn:active { background-color: var(--btn-bg-color-hover); border-color: var(--btn-color-hover); box-shadow: inset 0 0 28px var(--s1); }
.btn:active:before, .btn:active:after { height: 80%; background-color: var(--btn-color-hover); }
@media not all and (hover: none) and (pointer: coarse) {
  .btn:hover { background-color: var(--btn-bg-color-hover); border-color: var(--btn-color-hover); box-shadow: inset 0 0 28px var(--s1); }
  .btn:hover:before, .btn:hover:after { height: 80%; background-color: var(--btn-color-hover); }
}
.btn:disabled { --btn-color: #1E2339; --btn-bg-color: #0A0D1D; --btn-text-color: #41496B; box-shadow: none; text-shadow: none; pointer-events: none; }
/* shadowPulse around the button once the pool is ready */
.pulse { animation: shadowPulse 2s ease infinite; }
@keyframes shadowPulse { 0% { box-shadow: 0 0 4px 0 rgba(19,205,255,.3); } 50% { box-shadow: 0 0 8px 1px rgba(19,205,255,.5); } to { box-shadow: 0 0 4px 0 rgba(19,205,255,.3); } }

/* .action.action_main (+ _accent): skewed secondary button */
.action {
  --action-color-lighten: #767B9F; --action-color: #1E2339; --action-color-0: #0A0D1D; --action-color-10: #0A0D1D; --action-color-30: #0A0D1D; --action-color-50: #0A0D1D;
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0 8px; height: 40px; margin: 0 14px; padding: 0 10px;
  font-size: 15px; line-height: 20px; font-weight: 600; color: #fff; transition: .08s ease;
}
.action:before { content: ""; position: absolute; z-index: -1; right: 50%; top: 50%; width: calc(100% + 14px); height: 100%;
  background: linear-gradient(180deg, var(--action-color-0) 0, var(--action-color-10) 100%); border: 1px solid var(--action-color);
  box-shadow: inset 0 -4px 24px var(--action-color-50); transform: translate(50%,-50%) skewX(-14deg); transition: .08s ease; }
.action_accent { --action-color-lighten: #60DDFF; --action-color: #13CDFF; --action-color-0: rgba(19,205,255,0); --action-color-10: rgba(19,205,255,.1); --action-color-30: rgba(19,205,255,.3); --action-color-50: rgba(19,205,255,.5); }
.action:active:before { background: linear-gradient(180deg, var(--action-color-0) 0, var(--action-color-30) 100%); border-color: var(--action-color-lighten); }
@media not all and (hover: none) and (pointer: coarse) { .action:hover:before { background: linear-gradient(180deg, var(--action-color-0) 0, var(--action-color-30) 100%); border-color: var(--action-color-lighten); } }
.action svg { width: 16px; height: 16px; }
.note { margin-top: 10px; text-align: center; color: var(--grey); font-size: 12px; line-height: 15px; }

/* ---------- roulette (mobile values of .layout-case__roulette .roulette) ---------- */
.roulette { position: relative; z-index: 1; display: flex; flex: none; height: 124px; margin: 0 -16px 18px; padding: 5px 10px; animation: rouletteInit 1s ease 0s forwards; }
.roulette:before, .roulette:after { content: ""; position: absolute; top: 50%; z-index: 2; width: 460px; height: 100%; pointer-events: none;
  background: url(img/roulette-frame.webp) 50%/100% 100% no-repeat; }
.roulette:before { left: -80px; transform: translateY(-50%); }
.roulette:after { right: -80px; transform: translateY(-50%) scaleX(-1); }
.roulette__frame { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; padding: 6px 2px; overflow: hidden; background-color: #090C1B; border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.roulette__frame:before, .roulette__frame:after { content: ""; position: absolute; left: 50%; z-index: 3; width: 25px; height: 13px; background: url(img/roulette-cursor.svg) 50%/100% 100% no-repeat; transform: translateX(-50%); }
.roulette__frame:before { top: 0; }
.roulette__frame:after { bottom: 0; transform: translateX(-50%) rotate(180deg); }
.roulette__items { display: flex; flex: none; will-change: transform; backface-visibility: hidden; }
.roulette-item { --rarity-color: #41496B; position: relative; flex: none; display: flex; flex-direction: column; width: 135px; min-height: 100%; margin: 0 2px; padding: 10px;
  background: radial-gradient(50% 50% at 50% 50%, #383F5E 0, #1E2339 100%); border: 1px solid #383F5E; border-bottom: 1px solid var(--rarity-color); backface-visibility: hidden; transition: .12s ease; }
.roulette-item.me { --rarity-color: var(--me); } .roulette-item.opp { --rarity-color: var(--opp); }
.roulette-item__img { width: 68px; margin: auto; }
.roulette-item__tag { position: absolute; top: 5px; left: 7px; font-size: 12px; line-height: 15px; color: var(--grey); }
.roulette-item.skin-win-highlight { border-color: var(--rarity-color); box-shadow: 0 0 0 1200px rgba(7,10,24,.5); z-index: 2; }
@keyframes rouletteInit { 0% { opacity: 0; transform: scale(.85) scaleX(.7); } 40% { opacity: 1; } to { transform: scale(1) scaleX(1); } }
.pool { flex: none; }
.pool__title { margin-bottom: 8px; text-align: center; font-weight: 700; font-size: 13px; line-height: 17px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }
.pool__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pool .skin { min-height: 104px; }

/* ---------- drop (.drop.drop_case, .layout-case__drop_ready) ---------- */
#s-prize { padding-top: 6px; }
.drop { --rarity-color: #13CDFF; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; width: 100%; }
.drop_ready { opacity: 0; transform: scale(.8) translateY(-40px); animation: readyDrop 1.5s ease .05s forwards; backface-visibility: hidden; }
.drop__img { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 1 1 0; width: 100%; min-height: 190px; max-height: 330px; margin-bottom: -28px; pointer-events: none; } /* site: negative margins, the hex's empty lower part sits under the name */
.drop__overlay { position: absolute; z-index: -1; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); }
.drop__hex, .drop__thunders { opacity: .8; transform: scale(1); transform-origin: center center; }
.drop__thunders { animation: skinDropParticles 5.5s ease .05s infinite forwards; }
.drop__bonus { margin-top: 26px; font: italic 700 84px/1 "Druk Text Cyr", sans-serif; letter-spacing: -.5px; color: var(--white); text-transform: uppercase; white-space: nowrap;
  animation: skinRotate 5.5s ease .05s infinite forwards; }
.drop__head { position: absolute; top: 0; left: 50%; z-index: 2; min-width: 98px; padding: 8px 16px; transform: translateX(-50%); text-align: center; color: #fff;
  background-color: rgba(7,10,24,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.drop__head:before, .drop__head:after, .drop__head-content:before, .drop__head-content:after { content: ""; position: absolute; z-index: 1; width: 8px; height: 8px; border: 0 solid var(--rarity-color); }
.drop__head:before, .drop__head-content:before { left: 0; border-left-width: 2px; }
.drop__head:after, .drop__head-content:after { right: 0; border-right-width: 2px; }
.drop__head:before, .drop__head:after { top: 0; border-top-width: 2px; }
.drop__head-content:before, .drop__head-content:after { bottom: 0; border-bottom-width: 2px; }
.drop__congrats { font-size: 12px; line-height: 15px; font-weight: 600; margin-bottom: 2px; }
.drop__head-content { font-size: 15px; line-height: 18px; font-weight: 700; }
.drop__name { width: 100%; margin: 2px 0 6px; font: italic 700 22px/30px "Druk Text Cyr", sans-serif; letter-spacing: .5px; color: #fff; text-align: center; text-transform: uppercase; }
.drop__name-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.drop__text { font-weight: 500; font-size: 15px; line-height: 20px; text-align: center; }
.appear { animation: loadedSkinItem .4s ease var(--d, 0s) both; }
@keyframes readyDrop { 0% { opacity: 0; transform: scale(.8) translateY(-40px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes skinRotate { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) translateX(-2px) rotate(4deg); } to { transform: translateY(0) rotate(0); } }
@keyframes skinDropParticles { 0% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } to { opacity: .8; transform: scale(1); } }

/* .promocode (top-up window) */
.promocode { flex: none; margin: 16px 10px 0; }
.promocode__title { margin-bottom: 10px; color: var(--white); font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; text-align: center; }
.promocode__main { display: flex; min-height: 56px; border: 1px solid #13CDFF; transform: skewX(-14deg); }
.promocode__amount { flex: none; display: flex; align-items: center; justify-content: center; min-width: 88px; padding: 0 12px; background: #0E1728; color: #13CDFF; font-weight: 600; font-size: 20px; border-right: 1px solid #13CDFF; }
.promocode__amount span, .promocode__code-inner { transform: skewX(14deg); }
.promocode__code { --copy-btn-color: rgba(19,205,255,.2); flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #0E1729 50%, #2F758E 280%); font-weight: 600; font-size: 20px; letter-spacing: 1px;
  animation: animationCopyBtn 3s ease 0s infinite forwards; transition: .08s ease; }
.promocode__code:active { box-shadow: 0 0 20px 0 rgba(19,205,255,.2); filter: brightness(1.1); }
@media not all and (hover: none) and (pointer: coarse) { .promocode__code:hover { box-shadow: 0 0 20px 0 rgba(19,205,255,.2); filter: brightness(1.1); } }
.promocode__code-inner { display: flex; align-items: center; gap: 8px; color: var(--white); white-space: nowrap; }
.promocode__code svg { width: 16px; height: 16px; color: var(--grey); }
@keyframes animationCopyBtn { 0% { box-shadow: 0 0 22px 2px var(--copy-btn-color); } 50% { box-shadow: 0 0 55px 7px var(--copy-btn-color); } to { box-shadow: 0 0 22px 2px var(--copy-btn-color); } }
.actions { display: flex; flex-direction: column; gap: 14px; }

/* ---------- error = .mb-round__head_no-money ---------- */
.state { flex: none; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 230px; margin: auto 0; padding: 0 16px 22px;
  background: url(img/status-error.svg) center 24px no-repeat, linear-gradient(0deg, #270E0E, #0A0D1D); border: 1px solid var(--border);
  color: #FF3030; text-align: center; animation: battleReadyPulse 2s ease 1 forwards; backface-visibility: hidden; }
.state_ready { min-height: 150px; margin: 14px 0 0; padding-bottom: 16px; background: url(img/status-ready.svg) center -6px no-repeat, linear-gradient(0deg, #0A1B2D, #0A0D1D);
  color: #13CDFF; animation: loadedSkinItem .4s ease var(--d) both, battleReadyPulse 2s ease calc(var(--d) + .4s) 1 forwards; }
.state__title { font: italic 700 26px/30px "Druk Text Cyr", sans-serif; letter-spacing: -.5px; text-transform: uppercase; }
.state__text { margin-top: 6px; color: var(--text); font-size: 14px; line-height: 18px; }

/* ---------- rules ---------- */
.rules { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.rules h2 { margin: 20px 0 10px; color: var(--white); font-weight: 700; font-size: 13px; line-height: 17px; letter-spacing: 1px; text-transform: uppercase; }
.rules li, .rules p { font-size: 14px; line-height: 19px; }
.rules ol { list-style: none; counter-reset: s; }
.rules ol li { counter-increment: s; position: relative; padding-left: 26px; margin-bottom: 8px; }
.rules ol li:before { content: counter(s); position: absolute; left: 0; top: 0; font: italic 700 18px/19px "Druk Text Cyr", sans-serif; color: var(--me); }
.rules ul { list-style: none; }
.rules ul li { position: relative; padding-left: 14px; margin-bottom: 8px; }
.rules ul li:before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--grey); }
.rules p { margin-top: 10px; color: var(--grey); font-size: 12px; line-height: 16px; }
/* odds rows = .skin + .skin__chance */
.odds { display: flex; flex-direction: column; gap: 6px; }
.odds__row { --rarity-color: #41496B; --rarity-color-0: rgba(65,73,107,0); position: relative; display: flex; align-items: center; min-height: 44px; padding-left: 12px;
  background: radial-gradient(50% 50% at 50% 50%, #383F5E 0, #1E2339 100%); border: 1px solid #383F5E; border-bottom-color: var(--rarity-color); color: var(--white); font-weight: 600; font-size: 14px; }
.odds__chance { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px 0 28px; color: rgba(255,255,255,.95); font-size: 15px; font-weight: 700;
  background: linear-gradient(-90deg, var(--rarity-color) 0, var(--rarity-color-0) 100%); }
.r-milspec { --rarity-color: #1E78FF; --rarity-color-0: rgba(30,120,255,0); }
.r-restricted { --rarity-color: #8F00FF; --rarity-color-0: rgba(143,0,255,0); }
.r-classified { --rarity-color: #FF12AE; --rarity-color-0: rgba(255,18,174,0); }
.r-covert { --rarity-color: #EB4B4B; --rarity-color-0: rgba(235,75,75,0); }
.r-rare { --rarity-color: #FFC701; --rarity-color-0: rgba(255,199,1,0); }

/* short screens (360×740 and smaller Telegram viewports) */
@media (max-height: 760px) {
  .screen { padding-top: 10px; }
  .h1 { font-size: 26px; line-height: 28px; }
  .labels { margin-top: 8px; }
  .skin { min-height: 108px; }
  .skin__img { max-width: 64px; margin-top: 10px; }
  .status { margin: 8px 0; }
  .drop__bonus { font-size: 72px; }
  .promocode { margin-top: 12px; }
  .actions { gap: 12px; }
}

/* prefers-reduced-motion: the site's animations stay, just short; the roulette sets its own 1 s spin in JS */
@media (prefers-reduced-motion: reduce) {
  *:not(.roulette__items), *:before, *:after { animation-duration: .2s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .1s !important; }
}