/* 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; height: 26px; width: auto; display: block; transition: .12s ease-in-out; }  /* original brand mark, ALL CAPS, never recoloured */
.top__logo:active { filter: brightness(1.25) saturate(1.1); transform: scale(1.1); }
.top__link { position: relative; 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); }
.top__mute { position: relative; flex: none; margin-left: auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--grey); transition: color .12s ease; }
.top__mute svg { width: 20px; height: 20px; }
.top__mute-x { opacity: 0; transition: opacity .12s ease; }
.top__mute-wave { transition: opacity .12s ease; }
.top__mute.muted .top__mute-wave { opacity: 0; }
.top__mute.muted .top__mute-x { opacity: 1; }
.top__mute:active { color: var(--white); }

/* ---------- 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/prizes/site/closed-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 10px; }  /* bottom margin is a real gap, not flex leftover - keeps the "?" hex off the VS row / roulette below it on short viewports */
.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/prizes/site/closed-360.webp) 0 0/100% 100%; mask: url(img/prizes/site/closed-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/prizes/site/closed-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; }
/* FX #4: floor glow once the case is ready to open (cyan, matches the .pulse cue on the RANDOM button) */
.case__img:after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -8%; width: 85%; height: 35%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse, var(--me) 0%, transparent 70%); opacity: 0; transition: opacity .4s ease; }
.case.ready .case__img:after { opacity: .35; }
.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, built as mycs2.in item cards ----------
   Anatomy (top to bottom): rarity ribbon (icon + rarity name, --rarity-color bg) - art (+ digit overlay on money
   cards / FREE tag on the case) - name + value - bottom bar (Дроп N + owner, --rarity-color bg). Same anatomy is
   reused, scaled via CSS, for the pool and the roulette strip (.roulette-item below). */
.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; --owner-color: transparent;  /* rarity-color = the card's real prize (always shown);
    owner-color = who picked it (me/opp), a separate signal so both stay honestly visible at once */
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 118px; overflow: hidden;
  background: radial-gradient(50% 50% at 50% 50%, #383F5E 0, #1E2339 100%); border: 1px solid #383F5E;
  color: var(--text); text-align: left; transition: .2s ease-in-out; animation: loadedSkinItem .4s ease var(--d, 0s) both;
}
.skin.me { --owner-color: var(--me); }
.skin.opp, .skin.scan { --owner-color: var(--opp); }
.skin:before, .skin:after { content: ""; position: absolute; left: -1px; bottom: -1px; height: 1px; pointer-events: none; transition: .2s ease-in-out; z-index: 2; }
.skin:before { opacity: 0; visibility: hidden; width: calc(100% + 4px); }
.skin:after { width: calc(100% + 2px); background-color: var(--rarity-color); }
/* FX #1: diagonal shine sweep on pick (site's own hover device, transform/opacity only) */
.skin__shine { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-140%); opacity: 0; }
.skin.hit .skin__shine, .skin.lock .skin__shine { animation: shineSweep .55s ease; }
.skin.skin-win-highlight .skin__shine { animation: shineSweep .55s ease .1s both; }
@keyframes shineSweep { 0% { transform: translateX(-140%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(140%); opacity: 0; } }
/* ribbon (top) */
.skin__rarity { flex: none; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 2.5px 4px 2px; background: var(--rarity-color); color: #fff; font-size: 6.5px; line-height: 8px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .08s ease; }
.skin__rarity:before { content: "\25C6"; font-size: 6px; }
/* art + overlays */
.skin__img { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 8px 0; transition: .2s ease-in-out; }
.skin__img img { display: block; width: auto; height: 100%; max-width: 100%; max-height: 74px; aspect-ratio: 1; object-fit: contain; }
/* over the money art (light banknotes) white text alone reads weak - a soft dark scrim behind it plus a tight
   dark text-shadow ring keeps the Druk digits legible without boxing them in (site keeps overlays borderless) */
.skin__digits { position: absolute; inset: 6% 2%; z-index: 1; display: flex; align-items: center; justify-content: center; font: italic 700 15px/1 "Druk Text Cyr", sans-serif; letter-spacing: -.3px; color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.9), 0 2px 5px rgba(0,0,0,.85), 0 0 16px rgba(0,0,0,.55);
  background: radial-gradient(60% 60% at 50% 50%, rgba(5,7,15,.42) 0%, rgba(5,7,15,0) 72%);
  text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.skin__mystery { font-size: 30px; color: var(--rarity-color); text-shadow: 0 0 3px rgba(0,0,0,.9), 0 0 14px var(--rarity-color), 0 2px 5px rgba(0,0,0,.85); background: none; }
.roulette .skin__mystery { font-size: 22px; }  /* smaller card (135px) than the pool's */
.skin__free { position: absolute; left: 4px; bottom: 2px; z-index: 1; padding: 1.5px 4px; font-size: 7px; line-height: 10px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; color: #0A0D1D; background: linear-gradient(132deg, #93FF1F 8%, #5AB82D 60%); pointer-events: none; }
/* name + value */
.skin__names { flex: none; padding: 2px 6px 0; }
.skin__name, .skin__value { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: .08s ease; }
.skin__name { font-size: 12px; line-height: 14px; color: var(--white); font-weight: 600; }
.skin__value { margin-top: 1px; font-size: 9px; line-height: 11px; color: var(--grey); }
/* bottom bar: just "Дроп N", neutral - ownership now reads from the border/glow/badge, not this bar's colour */
.skin__bar { flex: none; margin-top: auto; display: flex; align-items: center; justify-content: center; padding: 3px 6px; background: rgba(5,7,15,.55); border-top: 1px solid rgba(255,255,255,.06); transition: .08s ease; }
.skin__type { font-size: 7px; line-height: 9px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; color: var(--grey); transition: .08s ease; }
/* corner badge: the unmistakable "who picked this" signal - ТЫ (cyan) / СОПЕР (orange), Druk, dark text on the
   bright owner colour for contrast in both cases. Empty (unpicked cards) collapses to nothing. top:13px clears
   the ribbon's own fixed height (padding 2.5/2 + 8px line-height) - a sibling of .skin__rarity/.skin__img, so it
   never sits on the ribbon text AND never inherits .skin__img's pick rotate(8deg) (v0928k, both were real bugs). */
.skin__owner-badge { position: absolute; top: 13px; right: 2px; z-index: 4; max-width: calc(100% - 4px); padding: 2px 5px 1.5px;
  font: italic 700 8px/10px "Druk Text Cyr", sans-serif; letter-spacing: .2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #051018; background: var(--owner-color); pointer-events: none; }
.skin__owner-badge:empty { display: none; }
/* the one light rarity colour (gold, rare/skin) needs dark text for contrast on its ribbon */
.skin[data-rarity="skin"] .skin__rarity, .skin[data-rarity="freecase"] .skin__rarity { color: #0A0D1D; }
.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(--owner-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(--owner-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 { --owner-color: var(--me); }
/* ownership at a glance: thick owner-coloured outline + glow on every locked card; mine also lifts, the
   opponent's carries a soft inset tint so his side reads "taken, not yours" even without the badge */
.skin.on.me { border-color: var(--me); box-shadow: 0 0 0 2px var(--me), 0 0 14px 1px rgba(19,205,255,.55); transform: translateY(-2px) scale(1.03); z-index: 3; }
.skin.on.opp { border-color: var(--opp); box-shadow: 0 0 0 2px var(--opp), 0 0 14px 1px rgba(252,85,48,.45), inset 0 0 22px rgba(252,85,48,.18); z-index: 3; }
@media not all and (hover: none) and (pointer: coarse) {
  .skin.free:hover { --owner-color: var(--me); border-color: var(--owner-color); z-index: 2; }
  .skin.free:hover:before { background: linear-gradient(180deg, rgba(30,35,57,0) 0, var(--owner-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__rarity, .skin_opacity .skin__bar, .skin_opacity .skin__name, .skin_opacity .skin__value { opacity: .45; }
.skin.lock { animation: battleDropPulse 1.3s ease 0s forwards; }
.skin.hit { animation: skinHit .3s ease; }
@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); } }
@keyframes skinHit { 0% { transform: scale(1); } 35% { transform: scale(1.08); } to { transform: scale(1); } }
.spark { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; background: var(--spark-color, var(--me)); pointer-events: none; z-index: 3; animation: sparkFly .45s ease-out forwards; }
@keyframes sparkFly { 0% { opacity: 1; transform: translate(-50%,-50%) translate(0,0) scale(1); } to { opacity: 0; transform: translate(-50%,-50%) translate(var(--sx),var(--sy)) scale(.3); } }

/* ---------- v0928k: "жми РАНДОМ" callout - between the board and the button, never over the cards ---------- */
.callout { flex: none; margin: 10px auto 0; max-width: 260px; text-align: center; animation: calloutBounce .9s ease 1 both, loadedSkinItem .3s ease both; }
.callout__text { padding: 8px 14px; background: var(--me); border: 1px solid var(--me); color: #0A0D1D; font-size: 12.5px; line-height: 16px; font-weight: 800; box-shadow: 0 0 22px rgba(19,205,255,.55); }
.callout__arrow { width: 0; height: 0; margin: 0 auto; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--me); filter: drop-shadow(0 0 6px rgba(19,205,255,.5)); }
@keyframes calloutBounce { 0% { transform: translateY(0); } 20% { transform: translateY(-8px); } 40% { transform: translateY(0); } 60% { transform: translateY(-5px); } 80%, 100% { transform: translateY(0); } }

/* ---------- .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); } }
#btn-site { overflow: hidden; }
.btn__fill { position: absolute; inset: 0; background: rgba(19,205,255,.22); transform: scaleX(0); transform-origin: left; pointer-events: none; z-index: 0; }
#btn-site-text { position: relative; z-index: 1; }
#btn-site.site-pulse { animation: sitePulse 1s ease infinite; }
@keyframes sitePulse { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }

/* .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__glow { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; z-index: 2; pointer-events: none; transform: translateX(-50%);
  background: var(--me); opacity: 0; box-shadow: 0 0 12px 2px var(--me); }
.roulette.spin .roulette__glow { opacity: .5; animation: rouletteGlowPulse 1s ease infinite; }
@keyframes rouletteGlowPulse { 0%, 100% { opacity: .32; } 50% { opacity: .65; } }
/* v0928j (Vlad, after Ivan's card-hop felt "все вибирається без ленти" - too fast, no excitement): back to the
   scrolling strip, but every item IS the exact card component (cardBody) used on the board/pool - same ribbon,
   art, name, "Дроп N" bar, ТЫ/СОПЕРНИК outline+badge - so each strip item reads as "one of my 4 pool cards",
   just sized down for the frame. Built ONLY from the 4 pool cards, repeated in random order (see spin() in app.js). */
.roulette .skin { width: 135px; min-height: 100%; flex: none; margin: 0 2px; overflow: hidden; backface-visibility: hidden; }
.roulette .skin.skin-win-highlight { z-index: 2; box-shadow: 0 0 0 1200px rgba(7,10,24,.5), 0 0 0 2px var(--rarity-color), 0 0 20px 3px var(--rarity-color); }
@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); }
/* grouped by owner - "ТВОИ" / "СОПЕРНИКА", a divider between, so ownership reads before you even look at a card */
.pool__items { display: flex; align-items: stretch; gap: 8px; }
.pool__group { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.pool__group-label { margin-bottom: 6px; text-align: center; font-weight: 800; font-size: 11px; line-height: 14px; letter-spacing: .5px; text-transform: uppercase; }
.pool__group-label_me { color: var(--me); }
.pool__group-label_opp { color: var(--opp); }
.pool__group-items { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pool__divider { flex: none; width: 1px; align-self: stretch; margin-top: 20px; background: var(--border); }
.pool .skin { min-height: 104px; transition: box-shadow .15s ease, transform .15s ease; }
/* v0928j: the pool card matching whatever's under the strip cursor pulses lightly, so the strip <-> pool link
   is obvious as it spins; on stop the real winner lights up for real (bigger, held, not just a passing pulse). */
.pool .skin.pool-sync { box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 0 14px 2px rgba(255,255,255,.35); transform: scale(1.02); }
.pool .skin.skin-win-highlight { border-color: var(--rarity-color); box-shadow: 0 0 0 3px var(--rarity-color), 0 0 30px 5px var(--rarity-color); z-index: 6; animation: skinHit .3s ease; }

/* ---------- 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 { --cy: calc(50% + 30px); position: relative; z-index: 1; flex: 1 1 0; width: 100%; min-height: 190px; max-height: 330px; pointer-events: none; }
/* the art is the hero: absolutely anchored on the hex's own visual centre (~46% down .drop__img, not 50% -
   the hex path itself sits slightly above the SVG viewBox's geometric middle), sized to ~90-100% of the hex's
   inner width so it may overflow the outline a touch, like the site's own case pages. Same anchor/scale for
   every prize so the reveal never looks off-centre or "small" for one prize and "big" for another. */
.drop__prize-img { position: absolute; z-index: 2; top: var(--cy); left: 50%; width: auto; height: min(calc(100% - 64px), 250px, 50vw); aspect-ratio: 1; transform: translate(-50%,-50%); object-fit: contain; filter: drop-shadow(0 0 24px var(--rarity-color)); }
.drop__overlay { position: absolute; z-index: 0; top: var(--cy); left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); }
.drop__hex, .drop__thunders { opacity: .38; transform: scale(1); transform-origin: center center; }  /* backdrop, not competing with the art on top of it */
/* FX #4: rarity-coloured floor glow, the object grounded in a soft light pool (pre-blurred gradient, no filter:blur) */
.drop__glow { position: absolute; z-index: 1; top: var(--cy); left: 50%; width: 78%; max-width: 320px; aspect-ratio: 2.1 / 1; transform: translate(-50%, 6%); pointer-events: none;
  background: radial-gradient(ellipse, var(--rarity-color) 0%, transparent 70%); opacity: .4; }
/* FX #2: slow rotating rarity rays behind the art, transform-only (no repaint of the art itself) */
.drop__rays { position: absolute; z-index: 1; top: var(--cy); left: 50%; width: 92%; max-width: 360px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .3; will-change: transform;
  transform: translate(-50%,-50%) rotate(0deg);
  background: conic-gradient(from 0deg, var(--rarity-color) 0deg 4deg, transparent 4deg 45deg, var(--rarity-color) 45deg 49deg, transparent 49deg 90deg,
    var(--rarity-color) 90deg 94deg, transparent 94deg 135deg, var(--rarity-color) 135deg 139deg, transparent 139deg 180deg,
    var(--rarity-color) 180deg 184deg, transparent 184deg 225deg, var(--rarity-color) 225deg 229deg, transparent 229deg 270deg,
    var(--rarity-color) 270deg 274deg, transparent 274deg 315deg, var(--rarity-color) 315deg 319deg, transparent 319deg 360deg);
  animation: raySpin 20s linear infinite; }
@keyframes raySpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
/* FX #3: particle burst dots on win (bigger sparks() variant, anchored on the art) */
.spark_prize { top: var(--cy); left: 50%; }
.spark_big { width: 6px; height: 6px; animation: sparkFly .7s ease-out forwards; }
.spark_round { border-radius: 50%; }
.drop__thunders { animation: skinDropParticles 5.5s ease .05s infinite forwards; }
/* normal flow (not absolute) so it always pushes .drop__name/.drop__text down by its real height, whatever the
   font size - the negative margin pulls it up into the hex's own empty lower triangle, same spot the site uses */
.drop__bonus { margin-top: 12px; width: 100%; font: italic 700 min(84px, 17vw)/1 "Druk Text Cyr", sans-serif; letter-spacing: -.5px; color: var(--white); text-align: center; text-transform: uppercase; white-space: nowrap;
  animation: skinRotate 5.5s ease .05s infinite forwards; }
.drop__head { position: absolute; top: 0; left: 50%; z-index: 3; 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); }  /* above .drop__prize-img (z:2) - the label must never sit under the art */
.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: 8px 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); } }
.drop__overlay.burst { animation: dropBurst .6s ease; }
@keyframes dropBurst { 0% { opacity: .3; transform: translate(-50%,-50%) scale(.6); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.3); } to { opacity: .8; transform: translate(-50%,-50%) scale(1); } }
.screen.shake { animation: screenShake .4s ease; }
@keyframes screenShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }

/* .promocode (top-up window) - v0928g: secondary/quiet by design ("Активировать на сайте" is the one accented
   CTA on this screen now) - no perpetual glow pulse, a dim neutral border instead of bright cyan; tap-to-copy
   still works (see copyCode()), just doesn't compete visually with the primary button any more. */
.promocode { flex: none; margin: 16px 10px 0; }
.promocode__title { margin-bottom: 10px; color: var(--grey); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; text-align: center; }
.promocode__main { display: flex; min-height: 56px; border: 1px solid var(--border); transform: skewX(-14deg); }
.promocode__amount { flex: none; display: flex; align-items: center; justify-content: center; min-width: 88px; padding: 0 12px; background: #0E1728; color: var(--text); font-weight: 600; font-size: 20px; border-right: 1px solid var(--border); }
.promocode__amount span, .promocode__code-inner { transform: skewX(14deg); }
.promocode__code { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #0E1729; font-weight: 600; font-size: 20px; letter-spacing: 1px; transition: .08s ease; }
.promocode__code:active { filter: brightness(1.15); }
@media not all and (hover: none) and (pointer: coarse) { .promocode__code:hover { filter: brightness(1.15); } }
.promocode__code-inner { display: flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; }
.promocode__code svg { width: 16px; height: 16px; color: var(--grey); }
.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__img { order: -1; flex: none; width: 36px; height: 36px; margin-right: 10px; object-fit: contain; }
.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; }
  .case__img { max-height: 190px; }  /* frees vertical room so the "?" case keeps clear of the VS row below it */
  .skin { min-height: 108px; }
  .skin__img img { max-height: 60px; }
  .status { margin: 8px 0; }
  .drop__bonus { font-size: 72px; }
  .promocode { margin-top: 12px; }
  .actions { gap: 12px; }
  .callout { margin-top: 6px; }
  .callout__text { padding: 6px 12px; font-size: 11.5px; line-height: 15px; }
}

/* very short viewports (desktop Telegram webview ~380x600, small-phone landscape-ish 360x640): the art must
   shrink enough to never reach the "Редкость" label at the top, whatever the width */
@media (max-height: 660px) {
  .h1 { font-size: 22px; line-height: 24px; }
  .case { margin: 4px 0 8px; }
  .case__img { max-height: 120px; }
  .drop__img { min-height: 170px; }
  /* fixed px, not a % of .drop__img - at this height the container's own size is too variable to trust a
     percentage anchor to reliably clear the head badge (~42px tall); measured, not guessed */
  .drop__prize-img { height: min(calc(100% - 64px), 110px, 42vw); }
  .drop__bonus { font-size: 44px; margin-top: 8px; }
  .drop__name { font-size: 18px; line-height: 24px; }
  .promocode { margin-top: 8px; }
  .promocode__main { min-height: 46px; }
  .actions { gap: 8px; }
  .action { height: 34px; }
}

/* 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; }
}

/* ---------- onboarding intro (v0928g, modal overlay over .screen, not a screen itself) ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(5,7,15,.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.intro__panel { width: 100%; max-width: 340px; padding: 20px 18px; background: linear-gradient(180deg, #101426, #0A0D1D); border: 1px solid var(--border); animation: loadedSkinItem .3s ease both; }
.intro__title { font: italic 700 20px/24px "Druk Text Cyr", sans-serif; letter-spacing: -.3px; color: var(--white); text-transform: uppercase; text-align: center; margin-bottom: 6px; }
.intro__sub { font-size: 13px; line-height: 18px; color: #FFC701; text-align: center; margin-bottom: 14px; }
.intro__steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.intro__step { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 17px; color: var(--text); }
.intro__badge { flex: none; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 6px;
  font: italic 700 9px/1 "Druk Text Cyr", sans-serif; letter-spacing: .2px; text-transform: uppercase; color: #051018; }
.intro__badge_me { background: var(--me); }
.intro__badge_opp { background: var(--opp); }
.intro__badge_rand { background: #FFC701; font-size: 12px; }
#btn-intro-ok { min-height: 48px; padding: 12px 24px; }