/* ═══ Кейсы ═══
   На витрине обложки подсвечены в цвет кейса. В ленте и списке призов цвет обозначает редкость. */

/* Цвета редкости — приглушённые: обычный, редкий, эпик, легенда */
.rar-common    { --rc:#5b7db5; }
.rar-rare      { --rc:#8a72c9; }
.rar-epic      { --rc:#b85c8e; }
.rar-legendary { --rc:#c9a24a; }
.rar-empty     { --rc:#555a64; }
.csx-it, .csx-cell { --tint:color-mix(in srgb, var(--rc) 16%, var(--panel)); }
.csx-empty { position:absolute; inset:0 0 26px; display:grid; place-items:center; font-style:normal; font-size:40px; font-weight:800; color:#ffffff2a; }

/* ── Список кейсов ── */
#screen-cases .csx-intro { margin:12px 16px; }
.csx-intro span { color:var(--accent); font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.csx-intro h2 { margin-top:2px; font-size:28px; line-height:1.08; font-weight:900; }
#screen-cases .csx-cases { padding:0 16px 16px; }
#screen-cases .csx-feature-slot:not(:empty) { margin:0 16px 9px; }
#screen-cases .csx-daily:empty { margin:0; }
#screen-cases button.csx-feature {
  --cover-light:#78ccff; --cover-base:#173a73;
  position:relative; display:block; width:100%; min-height:154px; overflow:hidden;
  border-radius:20px !important; border-color:#5082ad !important;
  background:#122944 !important; text-align:left;
}
#screen-cases .csx-feature .csx-cover {
  position:absolute; inset:0 0 0 30%; aspect-ratio:auto; margin:0; border-radius:0;
  mask-image:linear-gradient(90deg,transparent 0%,#000 35%);
}
#screen-cases .csx-feature .csx-cover img.cv0 { width:57%; left:29%; top:5%; }
#screen-cases .csx-feature .csx-cover img.cv1 { left:20%; bottom:4%; width:24%; }
#screen-cases .csx-feature .csx-cover img.cv2 { right:1%; bottom:8%; width:26%; }
.csx-feature-copy {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  width:62%; padding:13px 12px; text-shadow:0 1px 6px #0c1b32;
}
.csx-feature-copy small { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.csx-feature-copy strong { font-size:29px; font-weight:900; line-height:1; }
.csx-feature-copy > span { color:var(--muted); font-size:11px; line-height:1.25; }
.csx-feature-copy b { margin-top:5px; padding:5px 9px; border-radius:999px; background:var(--primary-fill); font-size:12px; }
.csx-feature-copy b span { margin-left:3px; }
#screen-cases button.daily-feature {
  display:grid; justify-items:center; gap:4px; padding:11px 12px 12px; text-align:center;
  background:
    radial-gradient(ellipse at 50% 42%, #2376a994 0%, #14395c80 45%, transparent 75%),
    linear-gradient(155deg,#142237,#0d121d 75%) !important;
}
.daily-feature > small {
  color:#a4dcff; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.csx-daily-gem { position:relative; display:grid; place-items:center; width:clamp(76px,25vw,92px); aspect-ratio:1; }
.csx-daily-gem img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 16px #52c9ff9e); }
.csx-daily-gem::before, .csx-daily-gem::after {
  content:""; position:absolute; width:14px; aspect-ratio:1; background:#c2edff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
.csx-daily-gem::before { left:-17%; top:58%; opacity:.72; }
.csx-daily-gem::after { right:-18%; top:20%; width:18px; }
.daily-feature > strong { font-size:clamp(21px,6vw,24px); font-weight:900; line-height:1.08; }
.csx-daily-status {
  display:inline-flex; align-items:center; gap:8px; margin-top:4px; padding:5px 12px;
  border:1px solid #529cce66; border-radius:999px; background:#0e3557; color:#bce8ff;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.csx-coin-price { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.csx-coin-price img { width:1.08em; height:1.08em; object-fit:contain; }
#screen-cases button.csx-card {
  display:flex; flex-direction:column; border-radius:18px !important; overflow:hidden;
  transition:border-color .15s ease;
}
#screen-cases button.csx-card:active { transform:scale(.98); }
#screen-cases .csx-card .csx-price {
  padding:5px 9px; border-radius:999px; font-weight:900; font-size:12px; color:var(--accent);
  background:var(--chip-on); white-space:nowrap;
}
#screen-cases .csx-daily { margin:0 16px 13px; }
#screen-cases button.csx-card.daily {
  display:grid; width:100%; grid-template-columns:48px minmax(0,1fr) auto; gap:9px; align-items:center;
  text-align:left; padding:12px 10px; border-color:var(--field-border) !important; background:var(--hero-fill) !important;
}
#screen-cases .csx-card.daily img { width:48px; height:48px; object-fit:contain; }
.csx-daily-copy b, .csx-daily-copy small { display:block; }
.csx-daily-copy b { font-size:14px; line-height:1.2; }
.csx-daily-copy small { margin-top:3px; font-size:11px; color:var(--muted); }

/* ── Экран кейса ── */
.app .header button.case-back {
  flex:none; display:grid; place-items:center; width:32px; height:40px; padding:0;
  background:transparent !important; border-color:transparent !important;
}
.app .header button.case-back[hidden] { display:none; }
.app .header button.case-back svg {
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
#screen-case .csx-panel {
  margin:6px 12px 0; padding:12px 0; border-radius:14px;
  background:var(--control-fill); border:1px solid var(--field-border);
}
#screen-case .csx-head { display:flex; align-items:center; gap:10px; padding:4px 12px 14px; }
#screen-case:is([data-case="lunar-post"],[data-case="winter-mail"]) .csx-head { background:radial-gradient(ellipse at 85% 0%, #254c76, transparent 70%); }
#screen-case:is([data-case="berry-soda"],[data-case="botanical-room"]) .csx-head { background:radial-gradient(ellipse at 85% 0%, #5b355c, transparent 70%); }
#screen-case:is([data-case="midnight-oracle"],[data-case="pixel-carnival"]) .csx-head { background:radial-gradient(ellipse at 85% 0%, #48366d, transparent 70%); }
#screen-case:is([data-case="clockwork"],[data-case="block-archive"],[data-case="emerald-room"]) .csx-head { background:radial-gradient(ellipse at 85% 0%, #205761, transparent 70%); }
#screen-case .csx-icon { width:36px; height:36px; object-fit:contain; }
#screen-case .csx-title { font-weight:800; font-size:20px; color:#f2f2f2; }
#screen-case .csx-heading p { color:var(--muted); font-size:12px; }

/* Ленты: предметы едут влево, выигрыш останавливается между маркерами */
#screen-case .csx-rolls { display:flex; flex-direction:column; gap:6px; }
.csx-roll {
  --cell:124px; --h:136px; position:relative; height:calc(var(--h) + 20px); overflow:hidden; background:var(--darker);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.csx-rolls.multi .csx-roll { --cell:92px; --h:96px; }
.csx-strip { position:absolute; left:0; top:10px; display:flex; gap:6px; }
/* Маркер — тонкая линия по центру с маленькими засечками */
.csx-roll::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:#c9e9ff; z-index:2; pointer-events:none; opacity:.85; }
.csx-roll::after { content:''; position:absolute; left:50%; top:0; margin-left:-6px; border:6px solid transparent; border-top:7px solid #c9e9ff; border-bottom:0; z-index:2; pointer-events:none; }

/* Карточка предмета: нейтральный фон с оттенком редкости, полоска редкости снизу */
.csx-it {
  position:relative; flex:none; width:var(--cell); height:var(--h); border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg, var(--tint), var(--panel-bottom)); border:1px solid var(--field-border); box-shadow:inset 0 -3px 0 var(--rc);
}
#screen-case :is(.csx-it,.csx-cell):is(.rar-rare,.rar-epic,.rar-legendary) {
  background:
    radial-gradient(ellipse at 50% 64%,color-mix(in srgb,var(--rc) 43%,transparent),transparent 77%),
    linear-gradient(165deg,color-mix(in srgb,var(--rc) 21%,#161827),#11131d);
  border-color:color-mix(in srgb,var(--rc) 64%,#222b3b);
  box-shadow:inset 0 -3px 0 var(--rc), inset 0 -11px 20px color-mix(in srgb,var(--rc) 23%,transparent);
}
#screen-case .csx-it.win { border-color:#dcefff; }
#screen-case :is(.csx-it,.csx-cell):is(.rar-rare,.rar-epic,.rar-legendary) > img {
  filter:drop-shadow(0 2px 7px color-mix(in srgb,var(--rc) 65%,transparent));
}
.csx-it img { position:absolute; left:16%; top:8%; width:68%; height:64%; object-fit:contain; }
.csx-it .csx-name {
  position:absolute; left:6px; right:6px; bottom:9px; font-size:11px; font-weight:700; color:#d6d6d6; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.csx-rolls.multi .csx-it .csx-name { font-size:10px; bottom:7px; }
.csx-roll.done .csx-it:not(.win) { opacity:.4; transition:opacity .3s ease; }

/* Действия вынесены из панели рулетки. */
#screen-case .csx-controls { margin:12px 12px 0; }
#screen-case button.csx-open {
  display:block; width:100%; min-height:50px; margin-top:10px; padding:8px 12px; border-radius:15px !important;
  font-size:15px; font-weight:900; color:#fff !important;
  background:var(--primary-fill) !important; border:1px solid var(--btn-border) !important;
  box-shadow:0 8px 23px #0b86df30 !important;
}
#screen-case button.csx-open:hover:not(:disabled) { background:var(--primary-hover) !important; }
#screen-case .csx-opts { display:flex; align-items:stretch; gap:5px; }
#screen-case .csx-counts {
  display:flex; flex:1; min-width:0; gap:2px; padding:3px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel-bottom);
}
#screen-case .csx-counts[hidden], #screen-case .csx-opts button[hidden] { display:none; }
#screen-case .csx-opts button {
  display:grid; place-items:center; min-width:0; width:36px; min-height:39px; padding:0;
  border-radius:11px !important; font-size:12px; font-weight:900; color:var(--muted) !important;
  background:var(--control-fill) !important; border:1px solid var(--line) !important;
}
#screen-case .csx-counts button {
  flex:1; width:auto; min-height:31px; border-color:transparent !important; border-radius:8px !important;
}
#screen-case #csDemo { width:auto; padding:0 8px; }
#screen-case .csx-opts button[aria-pressed="true"] {
  background:var(--active-fill) !important; border-color:var(--chip-on-border) !important; color:var(--accent) !important;
}
#screen-case .csx-counts button[aria-pressed="true"] {
  background:var(--primary-fill) !important; border-color:var(--btn-border) !important; color:#fff !important;
}
#screen-case .csx-opts svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
#screen-case #csFast svg path { fill:currentColor; stroke:none; }
#screen-case #csSound[aria-pressed=false] .csx-wave { display:none; }

/* Уведомление об обновлении условий */
#screen-case .csx-result {
  margin:10px 0 0; padding:10px 12px; border-radius:10px; font-size:12px; color:var(--text);
  border:1px solid var(--chip-on-border); background:var(--chip-on);
}

/* «Что может выпасть» — сетка 3 в ряд */
#screen-case .csx-prizes-head { text-align:center; margin:21px 12px 9px; }
.csx-prizes-head h3 { font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#b5c2d4; }
#screen-case .csx-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 12px 20px; }
#screen-case .csx-grid.duo { grid-template-columns:repeat(2,minmax(0,1fr)); }
.csx-grid .csx-cell {
  min-width:0; border-radius:15px; overflow:hidden; padding:8px 6px 9px;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  background:radial-gradient(ellipse at 50% 75%, color-mix(in srgb,var(--rc) 27%,transparent),transparent 72%), #111625;
  border:1px solid color-mix(in srgb,var(--rc) 26%,#202939);
}
.csx-grid .csx-cell > img, .csx-grid .csx-cell .csx-empty {
  width:100%; height:clamp(64px,20vw,91px); object-fit:contain;
}
.csx-grid.duo .csx-cell > img { height:clamp(82px,25vw,116px); }
.csx-grid .csx-cell .csx-empty { position:static; font-size:32px; }
.csx-grid .csx-cell b { font-size:11px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; margin-bottom:auto; }
.csx-prize-value { font-size:13px; font-weight:900; color:#fff; overflow-wrap:anywhere; }

/* ── Апгрейдер: режимы и выбор подарков ── */
#screen-upgrader .up-mode { margin:6px 12px 8px; }
#screen-upgrader .up-target-img { width:46%; aspect-ratio:1; object-fit:contain; margin-bottom:2px; }
#screen-upgrader .up-target-img[hidden] { display:none; }
#screen-upgrader .up-gh { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:#8d929c; text-transform:uppercase; letter-spacing:.5px; }
#screen-upgrader .up-gh span { text-transform:none; letter-spacing:0; }
#screen-upgrader .up-search { flex:1; min-width:0; height:30px; padding:0 10px; border-radius:8px; border:1px solid #393c43; background:#1a1b1f; color:#eee;
  font:inherit; font-size:13px; text-transform:none; letter-spacing:0; }
#screen-upgrader .up-mine, #screen-upgrader .up-targets { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
#screen-upgrader .up-targets { display:grid; grid-template-columns:repeat(3, 1fr); overflow:visible; max-height:330px; overflow-y:auto; }
#screen-upgrader button.up-pick {
  position:relative; flex:0 0 92px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 4px 7px;
  border-radius:10px !important; background:#23252a !important; border:1px solid #33363d !important; color:#ddd !important; font-family:inherit;
}
#screen-upgrader button.up-pick.on { border-color:#e6e6e6 !important; background:#2e3036 !important; }
#screen-upgrader .up-pick img { width:52px; height:52px; object-fit:contain; }
#screen-upgrader .up-pick b { max-width:100%; font-size:10px; font-weight:700; color:#cfcfcf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#screen-upgrader .up-pick span { font-size:12px; font-weight:800; color:#f2f2f2; }
#screen-upgrader .up-pick small { position:absolute; top:4px; right:5px; font-size:9px; font-weight:800; color:#8d929c; }

#screen-upgrader .mines-panel[hidden] { display:none !important; }

/* ── Вкладка RTP ── */
#screen-admin button.admin-back { margin:4px 16px 8px; height:30px; padding:0 10px; border-radius:8px !important; font-size:13px; }
#admRtpList .rtp-row { display:flex; align-items:center; gap:6px; }
#admRtpList .rtp-row .r-main { flex:1; min-width:0; }
#admRtpList .rtp-tag { font-size:10px; font-weight:800; color:#c9a24a; text-transform:uppercase; letter-spacing:.4px; margin-left:4px; }
#admRtpList .rtp-input { width:56px; height:32px; padding:0 6px; border-radius:8px; border:1px solid #44474f; background:#1a1b1f; color:#f2f2f2;
  font:inherit; font-weight:800; font-size:14px; text-align:right; }
#admRtpList .rtp-pct { font-size:13px; color:#8d929c; margin-left:-2px; }
#admRtpList button.rtp-save, #admRtpList button.rtp-reset { height:32px; padding:0 10px; border-radius:8px !important; font-size:12px; font-weight:800; }
#admRtpList button.rtp-save { background:var(--primary-fill) !important; color:var(--btn-text) !important; border-color:var(--btn-border) !important; }

/* ── Окно приза после открытия кейса ── */
.csx-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(10,11,13,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.csx-modal[hidden] { display:none; }
.csx-mcard { position:relative; width:100%; max-width:360px; max-height:100%; overflow:auto; padding:18px 16px 16px; border-radius:20px; text-align:center;
  background:#212328; border:1px solid #3a3d44; box-shadow:0 20px 50px #0009; }
#csModal button.csx-mclose { position:absolute; top:12px; right:12px; width:30px; height:30px; padding:0; border-radius:8px !important;
  font-size:13px; color:#aaa !important; background:#2c2f35 !important; border:1px solid #3d4048 !important; }
.csx-mtitle { font-size:18px; font-weight:800; color:#f2f2f2; padding:0 34px; }
.csx-mitems { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:14px 0 8px; }
.csx-mit { position:relative; border-radius:12px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--rc) 34%, var(--panel)), var(--panel-bottom));
  border:1px solid var(--line); box-shadow:inset 0 -2px 0 var(--rc); }
.csx-mitems.one .csx-mit { width:170px; padding:12px 10px 14px; }
.csx-mitems.one .csx-mit img { width:120px; height:120px; object-fit:contain; display:block; margin:0 auto 6px; }
.csx-mitems.one .csx-mit b { font-size:14px; font-weight:800; color:#e6e6e6; }
.csx-mitems.many .csx-mit { width:calc((100% - 12px) / 3); padding:8px 6px 10px; }
.csx-mitems.many .csx-mit img { width:min(100%,64px); height:64px; object-fit:contain; display:block; margin:0 auto 4px; }
.csx-mitems.many .csx-mit b { display:block; font-size:10px; font-weight:700; color:#cfcfcf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csx-mitems.many .csx-mit span { font-size:12px; font-weight:800; color:#f2f2f2; }
.csx-mit b { display:block; }
.csx-msummary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:12px; overflow:hidden; border-radius:12px; background:var(--line); border:1px solid var(--line); }
.csx-msummary div { padding:8px 4px; background:var(--panel-bottom); }
.csx-msummary dt, .csx-msub { font-size:12px; color:var(--muted); }
.csx-msummary dd { margin-top:2px; font-size:15px; font-weight:900; overflow-wrap:anywhere; }
.csx-msub { margin-top:8px; }
.csx-mbtns { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
#csModal button.csx-mbtn { flex:1; min-height:42px; padding:4px 8px; border-radius:10px !important; font-size:13px; font-weight:800;
  background:var(--control-fill) !important; color:var(--text) !important; border:1px solid var(--field-border) !important; }
#csModal button.csx-mbtn.main { flex:1 0 100%; }

/* Карточки каталога с сеткой и цветной подсветкой обложки. */
#screen-cases button.csx-card:not(.daily) {
  --cover-light:#71b8ff; --cover-base:#223654;
  position:relative; min-width:0; padding:12px 8px 8px; gap:3px; align-items:stretch; text-align:center;
  border-radius:19px !important; border-color:#32343f !important;
  background:
    linear-gradient(90deg,#969ac117 1px,transparent 1px) 50% 0 / 18px 18px,
    linear-gradient(#969ac117 1px,transparent 1px) 50% 0 / 18px 18px,
    radial-gradient(ellipse at 50% 60%, var(--cover-base), #15161e 70%) !important;
}
#screen-cases .csx-card-title {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.3em; font-size:12px; line-height:1.15; font-weight:900; text-transform:uppercase;
}
#screen-cases button.csx-card:not(.daily):hover { border-color:var(--chip-on-border) !important; }
#screen-cases button.csx-card:is([data-case="spare-change"],[data-case="launch-kit"],[data-case="winter-mail"],[data-case="telegram-studio"],
  [data-case="only-space"],[data-case="only-winter"],[data-case="only-telegram"],[data-case="crystal-gallery"]) {
  --cover-light:#89d6ff; --cover-base:#203d62;
}
#screen-cases button.csx-card:is([data-case="soft-parcel"],[data-case="desert-neon"],[data-case="vinyl-night"],[data-case="golden-vault"],
  [data-case="only-lamps"],[data-case="only-vinyl"],[data-case="only-gold"],[data-case="paw-parade"]) {
  --cover-light:#ffd88a; --cover-base:#5e4026;
}
#screen-cases button.csx-card:is([data-case="rose-note"],[data-case="cake-break"],[data-case="ribbon-box"],[data-case="berry-soda"],[data-case="botanical-room"],
  [data-case="only-berries"],[data-case="only-sakura"],[data-case="sugar-workshop"]) {
  --cover-light:#ff9bc6; --cover-base:#572d49;
}
#screen-cases button.csx-card:is([data-case="block-archive"],[data-case="pepe-club"],[data-case="emerald-room"],[data-case^="fifty-"],
  [data-case="only-minecraft"],[data-case="only-pepe"],[data-case="only-emerald"],[data-case="glass-garden"]) {
  --cover-light:#89efcc; --cover-base:#1b494b;
}
#screen-cases button.csx-card[data-case="lunar-post"] { --cover-light:#78ccff; --cover-base:#173a73; }
#screen-cases button.csx-card:is([data-case="midnight-oracle"],[data-case="pixel-carnival"],[data-case="only-phantom"],
  [data-case="only-neon"],[data-case="only-arcade"],[data-case="party-fireworks"]) { --cover-light:#c9a1ff; --cover-base:#432a6c; }
#screen-cases button.csx-card[data-case="clockwork"] { --cover-light:#68e1ed; --cover-base:#1c485d; }
#screen-cases .csx-cover {
  position:relative; isolation:isolate; display:block; aspect-ratio:1; overflow:hidden;
  margin:6px 6px 0; border-radius:13px;
  background:
    radial-gradient(ellipse at 50% 47%, color-mix(in srgb, var(--cover-light) 58%, transparent), transparent 58%),
    radial-gradient(ellipse at 50% 48%, var(--cover-base) 15%, #101322 85%);
}
#screen-cases .csx-cover::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.48;
  background:conic-gradient(from 13deg at 50% 47%,
    transparent 0deg, var(--cover-light) 9deg, transparent 22deg,
    transparent 54deg, var(--cover-light) 70deg, transparent 83deg,
    transparent 108deg, var(--cover-light) 119deg, transparent 139deg,
    transparent 168deg, var(--cover-light) 179deg, transparent 188deg,
    transparent 222deg, var(--cover-light) 237deg, transparent 249deg,
    transparent 272deg, var(--cover-light) 283deg, transparent 298deg,
    transparent 321deg, var(--cover-light) 329deg, transparent 343deg);
  mask-image:radial-gradient(ellipse at 50% 47%, #000, transparent 72%);
}
#screen-cases .csx-cover::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(circle at 12% 47%, #fff 0 1px, transparent 2.5px),
    radial-gradient(circle at 28% 16%, var(--cover-light) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 25%, #fff 0 1px, transparent 2.5px),
    radial-gradient(circle at 87% 57%, var(--cover-light) 0 1.5px, transparent 3px),
    radial-gradient(circle at 35% 86%, var(--cover-light) 0 1px, transparent 2px),
    radial-gradient(circle at 69% 80%, #fff 0 1px, transparent 2.5px);
}
#screen-cases .csx-cover img { position:absolute; width:34%; aspect-ratio:1; object-fit:contain; margin:0; filter:drop-shadow(0 4px 8px #0008); }
#screen-cases .csx-cover img.cv0 {
  width:58%; left:21%; top:18%; z-index:3;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--cover-light) 66%, transparent)) drop-shadow(0 4px 8px #0008);
}
#screen-cases .csx-cover img.cv1 { left:3%; bottom:7%; transform:rotate(-12deg); z-index:2; }
#screen-cases .csx-cover img.cv2 { right:3%; bottom:7%; transform:rotate(12deg); z-index:2; }
#screen-cases .duo .csx-cover { aspect-ratio:1.25; }
#screen-cases .duo .csx-cover img { top:50%; width:46%; transform:translateY(-50%); }
#screen-cases .duo .csx-cover .cv0 { left:4%; }
#screen-cases .duo .csx-cover .cv1 { left:50%; }
#screen-cases .csx-card:not(.daily) .csx-cover {
  flex:none; margin:0; aspect-ratio:1.14; border-radius:0; background:transparent;
}
#screen-cases .csx-card:not(.daily) .csx-cover::before,
#screen-cases .csx-card:not(.daily) .csx-cover::after { display:none; }
#screen-cases .csx-card:not(.duo) .csx-cover img.cv0 { width:73%; left:13.5%; top:3%; }
#screen-cases .csx-cinfo { display:flex; flex:1; flex-direction:column; justify-content:flex-end; gap:3px; }
#screen-cases .csx-cinfo small { color:var(--muted); font-size:10px; line-height:1.2; }
#screen-cases .csx-cinfo .csx-price {
  display:block; padding:6px 5px; border:1px solid var(--field-border); border-radius:10px;
  background:var(--control-fill); color:var(--text);
}

/* Подборки и общий каталог */
#screen-cases .csx-group { margin-top:14px; }
#screen-cases .csx-ghead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
#screen-cases .csx-ghead h3 { margin:0; font-size:19px; font-weight:900; color:#f2f2f2; }
#screen-cases .csx-cnt { font-size:12px; font-weight:700; color:#8d929c; }
#screen-cases button.csx-all { height:28px; padding:0 10px; border-radius:8px !important; font-size:12px; font-weight:800;
  background:transparent !important; border:1px solid #3a3d44 !important; color:#c3c7cf !important; }
#screen-cases .csx-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#screen-cases .csx-row > .daily { grid-column:1 / -1; }
#screen-cases .csx-row .empty { grid-column:1 / -1; }
#screen-cases .csx-model-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;
}
#screen-cases .csx-model-grid .empty { grid-column:1 / -1; }
#screen-cases .csx-model {
  min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:7px; border-radius:13px; background:var(--panel); border:1px solid var(--line);
}
#screen-cases .csx-model img {
  display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px;
  background:radial-gradient(ellipse at center,#24394f,var(--panel-bottom) 76%);
}
#screen-cases .csx-model b { font-size:11px; line-height:1.2; overflow-wrap:anywhere; margin-bottom:auto; }
#screen-cases .csx-model span { color:var(--accent); font-size:11px; font-weight:900; overflow-wrap:anywhere; }
#screen-cases button.csx-more { width:100%; min-height:38px; margin-top:9px; font-size:13px; }

/* Вкладка кейсов: подарки Telegram / скины CS2 — выбранная подсвечена голубым */
#screen-cases .csx-kind { display:flex; gap:6px; margin:0 16px 10px; padding:4px; border-radius:14px; background:#ffffff0d; }
#screen-cases .csx-kind button { flex:1; height:36px; padding:0; border:1px solid transparent; border-radius:10px; background:transparent;
  color:#c9cfdb; font-size:14px; font-weight:900; transition:background .15s, color .15s; }
#screen-cases .csx-kind button.on { background:linear-gradient(180deg,#3fa9ff,#1f7fe0) !important; border-color:#7cc8ff !important; color:#fff !important;
  box-shadow:0 0 0 1px #3fa9ff55, 0 4px 14px #1f7fe055; }
/* Ряд разделов (Бесплатные / Главная / Все кейсы) убран: разделы видны на витрине, «Все N ›» открывает раздел, «‹» — назад */
#screen-cases .csx-fchips { display:none !important; }
#screen-cases .csx-ghead .csx-back { flex:none; width:30px; height:30px; margin-right:8px; padding:0; border-radius:9px; border:1px solid #ffffff1f;
  background:#ffffff0d; color:#dfe7f3; font-size:20px; font-weight:900; line-height:1; }

/* Ежедневный CS2 (во вкладке «Скины CS2»): оранжевый акцент и скин вместо алмаза */
#screen-cases button.daily-feature.cs2 {
  background:
    radial-gradient(ellipse at 50% 42%, #a9642394 0%, #5c391480 45%, transparent 75%),
    linear-gradient(155deg,#2a1f14,#120e0b 75%) !important;
}
.daily-feature.cs2 > small { color:#ffd3a4; }
/* Та же высота, что у алмаза подарков (карточки одного размера); скин шире — место по ширине */
.daily-feature.cs2 .csx-daily-gem { width:clamp(152px,50vw,184px); height:clamp(76px,25vw,92px); aspect-ratio:auto; }
.daily-feature.cs2 .csx-daily-gem img { position:absolute; inset:8% 10%; width:80%; height:84%; object-fit:contain;
  filter:drop-shadow(0 0 14px #ff9d4f8a); }   /* строго внутри рамки: скин не больше алмаза подарков */
.daily-feature.cs2 .csx-daily-gem::before, .daily-feature.cs2 .csx-daily-gem::after { background:#ffe2c2; }
.daily-feature.cs2 .csx-daily-status { border-color:#ce8a5266; background:#573412; color:#ffe1bc; }

/* Админка → Задания: поле каналов шире, чем поле RTP */
#admTasksList .adm-task-row { flex-wrap:wrap; gap:8px; }
#admTasksList .adm-task-row .r-main { flex:1 1 100%; }
#admTasksList .adm-task-input { flex:1; min-width:0; height:34px; padding:0 10px; border-radius:8px; border:1px solid #44474f; background:#1a1b1f; color:#f2f2f2; font-size:13px; }
#admTasksList .rtp-save, #admTasksList .rtp-reset { height:34px; }
#admTasksList button.rtp-save, #admTasksList button.rtp-reset { padding:0 10px; border-radius:8px !important; font-size:12px; font-weight:800; }
#admTasksList button.rtp-save { background:var(--primary-fill) !important; color:var(--btn-text) !important; border-color:var(--btn-border) !important; }

/* «Все N ›» у раздела — в одну строку, не сжимается заголовком */
#screen-cases button.csx-all { flex:none; white-space:nowrap; min-width:max-content; }
#screen-cases .csx-ghead h3 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Витрина: ежедневный кейс слева, сундук по промокоду справа — по половине экрана */
#screen-cases .csx-feature-duo { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
#screen-cases .csx-feature-duo > button.daily-feature { min-width:0; padding:11px 8px 12px; gap:5px; }
.csx-feature-duo .daily-feature > small { font-size:9px; letter-spacing:.06em; }
.csx-feature-duo .daily-feature > strong { font-size:clamp(14px,4.2vw,17px); line-height:1.12; }
.csx-feature-duo .csx-daily-gem { width:clamp(62px,19vw,78px); }
.csx-feature-duo .daily-feature.cs2 .csx-daily-gem { width:100%; height:clamp(62px,19vw,78px); }
.csx-feature-duo .csx-daily-status { padding:5px 10px; font-size:11px; gap:6px; white-space:nowrap; }
/* Сундук: золотой акцент */
#screen-cases button.promo-feature {
  background:
    radial-gradient(ellipse at 50% 42%, #b9861f8c 0%, #5c421480 45%, transparent 75%),
    linear-gradient(155deg,#2a2112,#110e09 75%) !important;
  border-color:#d9a63a66 !important;
}
.promo-feature > small { color:#ffd98a; }
.promo-feature .promo-chest-art { width:clamp(70px,21vw,88px); }
.promo-feature .promo-chest-art img { filter:drop-shadow(0 0 14px #ffc24a99); }
.promo-feature .promo-chest-art::before, .promo-feature .promo-chest-art::after { background:#ffe7a8; }
.promo-feature .csx-daily-status { border-color:#d9a63a66; background:#4a3510; color:#ffe6a8; }
/* Окно промокода */
.promo-dialog .promo-note { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.5; }
.promo-dialog .promo-input { width:100%; box-sizing:border-box; height:46px; padding:0 14px; border-radius:12px; border:1px solid #d9a63a66;
  background:#ffffff0a; color:#fff; font:900 16px var(--font-app); letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.promo-dialog .promo-msg { min-height:16px; margin:8px 0; color:#ff8a8a; font-size:12px; }
.promo-dialog .btn-primary { width:100%; }

/* Сундук: на карточке — три подарка из него веером (или выигранный приз) */
.promo-feature .promo-art { position:relative; display:block; width:100%; height:clamp(66px,20vw,82px); }
.promo-feature .promo-art img { position:absolute; top:50%; left:50%; width:clamp(44px,13.5vw,56px); aspect-ratio:1; object-fit:contain;
  filter:drop-shadow(0 4px 10px #0009) drop-shadow(0 0 10px #ffc24a55); }
.promo-feature .promo-art .pa0 { z-index:2; width:clamp(56px,17vw,70px); transform:translate(-50%,-52%); }
.promo-feature .promo-art .pa1 { transform:translate(-118%,-40%) rotate(-12deg); opacity:.92; }
.promo-feature .promo-art .pa2 { transform:translate(18%,-40%) rotate(12deg); opacity:.92; }
.promo-feature .promo-art.one img { width:clamp(62px,19vw,78px); transform:translate(-50%,-50%); }
.csx-feature-duo .promo-feature > strong { font-size:clamp(17px,5vw,20px); }
.promo-feature .promo-sub { display:block; max-width:100%; margin-top:-3px; overflow:hidden; color:#e9cf98; font-size:11px; font-style:normal;
  font-weight:800; white-space:nowrap; text-overflow:ellipsis; }

/* Экран сундука после открытия: приз и шаги «друзья» / «отыгрыш» */
#screen-case .csx-prize { display:grid; gap:10px; padding:12px; }
#screen-case .csx-prize[hidden] { display:none; }
.csx-prize .promo-prize { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:center; padding:10px;
  border:1px solid #d9a63a66; border-radius:16px; background:radial-gradient(120% 140% at 0% 50%,#5a43148c,#16120c 70%); }
.csx-prize .promo-prize img { width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 0 12px #ffc24a77); }
.csx-prize .promo-prize small { display:block; color:#ffd98a; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.csx-prize .promo-prize b { display:block; margin:2px 0; overflow:hidden; font-size:15px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.csx-prize .promo-prize span { color:#ffe6a3; font-size:16px; font-weight:900; }
.csx-prize .promo-steps { display:grid; gap:8px; }
.csx-prize .promo-step { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:center; padding:10px 12px;
  border:1px solid #ffffff14; border-radius:14px; background:#ffffff08; }
.csx-prize .promo-step > span { font-size:12px; font-weight:800; color:#dfe7f3; }
.csx-prize .promo-step > b { font-size:12px; font-variant-numeric:tabular-nums; color:#bce8ff; white-space:nowrap; }
.csx-prize .promo-step progress { grid-column:1 / -1; width:100%; height:6px; appearance:none; border:0; border-radius:99px; overflow:hidden; background:#ffffff14; }
.csx-prize .promo-step progress::-webkit-progress-bar { background:#ffffff14; }
.csx-prize .promo-step progress::-webkit-progress-value { background:linear-gradient(90deg,#3fa9ff,#7cc8ff); border-radius:99px; }
.csx-prize .promo-step progress::-moz-progress-bar { background:linear-gradient(90deg,#3fa9ff,#7cc8ff); }
.csx-prize .promo-step.done { border-color:#4cd28a55; background:#4cd28a12; }
.csx-prize .promo-step.done > b { color:#8af0b6; }
.csx-prize .promo-step.done progress::-webkit-progress-value { background:#4cd28a; }

.csx-prize .promo-step > small { grid-column:1 / -1; color:var(--muted); font-size:11px; line-height:1.35; }
.csx-prize .promo-note-wager { margin:0; padding:10px 12px; border-radius:14px; background:#3fa9ff12; border:1px solid #3fa9ff33;
  color:#bce8ff; font-size:12px; line-height:1.45; }
/* Вывод: отыгрыш бонуса */
#screen-withdraw .wd-wager { display:grid; gap:6px; margin:10px 0; padding:10px 12px; border-radius:14px; border:1px solid #ffc24a55; background:#ffc24a12; }
#screen-withdraw .wd-wager[hidden] { display:none; }
#screen-withdraw .wd-wager b { color:#ffe6a3; font-size:13px; }
#screen-withdraw .wd-wager span { color:var(--muted); font-size:12px; }
#screen-withdraw .wd-wager progress { width:100%; height:6px; appearance:none; border:0; border-radius:99px; overflow:hidden; background:#ffffff14; }
#screen-withdraw .wd-wager progress::-webkit-progress-bar { background:#ffffff14; }
#screen-withdraw .wd-wager progress::-webkit-progress-value { background:#ffc24a; }

/* Кейсы CS2: скины вытянутые — главный сверху во всю ширину, два других снизу рядом, без перекрытий */
#screen-cases .csx-card.skins .csx-cover img { aspect-ratio:auto; object-fit:contain; transform:none; }
#screen-cases .csx-card.skins.skins .csx-cover img.cv0 { left:6% !important; top:2% !important; width:88% !important; height:50%; }
#screen-cases .csx-card.skins .csx-cover img.cv1 { left:2%; bottom:4%; width:47%; height:40%; transform:rotate(-8deg); z-index:2; }
#screen-cases .csx-card.skins .csx-cover img.cv2 { right:2%; bottom:4%; width:47%; height:40%; transform:rotate(8deg); z-index:2; }
/* если в кейсе только один-два разных скина — крупнее */
#screen-cases .csx-card.skins .csx-cover img.cv0:only-child { top:12%; height:76%; }
#screen-cases .csx-card.skins .csx-cover img.cv1:last-child { left:26%; width:48%; transform:none; }

/* Обводка скинов CS2 везде (обложки, состав кейса, лента, окно приза, инвентарь, апгрейд):
   контур по форме оружия и ореол — цветом самого скина (--skin-glow ставит app.js из glow.json) */
.app img[src*="assets/skins/"], .app img[src*="assets/gifts/"] {
  --g:var(--skin-glow, #cfe3ff);
  filter:drop-shadow(0 0 1px var(--g)) drop-shadow(0 0 1px var(--g)) drop-shadow(0 0 7px color-mix(in srgb, var(--g) 70%, transparent)) drop-shadow(0 3px 5px #0009) !important;
}

/* Мерцающие звёзды на фоне сетки карточек кейсов: два слоя искр мигают по очереди */
#screen-cases button.csx-card, #screen-cases button.csx-feature { position:relative; isolation:isolate; }
#screen-cases button.csx-card::before, #screen-cases button.csx-card::after,
#screen-cases button.csx-feature::before, #screen-cases button.csx-feature::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  --sp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0q1.2 8.8 10 10q-8.8 1.2-10 10q-1.2-8.8-10-10q8.8-1.2 10-10z' fill='%23dff1ff'/%3E%3C/svg%3E");
  background:
    var(--sp) 12% 22% / 9px 9px no-repeat, var(--sp) 86% 14% / 7px 7px no-repeat, var(--sp) 78% 58% / 10px 10px no-repeat,
    var(--sp) 18% 74% / 6px 6px no-repeat, var(--sp) 52% 40% / 5px 5px no-repeat;
  filter:drop-shadow(0 0 3px #9fd8ff);
  animation:csx-twinkle 2.6s ease-in-out infinite;
}
#screen-cases button.csx-card::after, #screen-cases button.csx-feature::after {
  background:
    var(--sp) 30% 10% / 6px 6px no-repeat, var(--sp) 92% 40% / 8px 8px no-repeat, var(--sp) 8% 48% / 7px 7px no-repeat,
    var(--sp) 64% 82% / 9px 9px no-repeat, var(--sp) 40% 62% / 5px 5px no-repeat;
  animation-delay:-1.3s;
}
#screen-cases button.csx-card > *, #screen-cases button.csx-feature > * { z-index:1; }   /* дети flex/grid — z-index работает без position */
@keyframes csx-twinkle { 0%, 100% { opacity:.15; transform:scale(.96); } 50% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #screen-cases button.csx-card::before, #screen-cases button.csx-card::after,
  #screen-cases button.csx-feature::before, #screen-cases button.csx-feature::after { animation:none; opacity:.6; }
}

/* Подарки на обложках: главный выше и чуть меньше, боковые — в нижних углах; почти не заходят друг на друга */
#screen-cases .csx-card:not(.skins):not(.duo):not(.daily) .csx-cover img.cv0 { width:52% !important; left:24% !important; top:1% !important; }
#screen-cases .csx-card:not(.skins):not(.duo):not(.daily) .csx-cover img.cv1 { width:38%; left:1%; bottom:1%; transform:rotate(-10deg); }
#screen-cases .csx-card:not(.skins):not(.duo):not(.daily) .csx-cover img.cv2 { width:38%; right:1%; bottom:1%; transform:rotate(10deg); }

/* Вывод скина в Steam */
.promo-dialog .steam-input { text-transform:none; font-size:12px; letter-spacing:0; }
.promo-dialog .steam-help { margin:8px 0 0; font-size:11px; }

/* Сундук по промокоду: маленький «?» в шапке — условия (друзья и отыгрыш) */
#screen-case .csx-help { flex:none; align-self:flex-start; margin-left:auto; width:26px; height:26px; min-height:0; padding:0; border-radius:50%;
  display:grid; place-items:center; font:800 14px/1 var(--font-app, inherit); color:#8fd0ff; background:#14304d; border:1px solid #2a5682;
  box-shadow:inset 0 1px #ffffff1a; }
#screen-case .csx-help[hidden] { display:none; }
#screen-case .csx-help:active { transform:scale(.92); }
#screen-case .csx-help-pop { margin:-6px 12px 12px; padding:10px 12px; border-radius:14px; font-size:12px; line-height:1.5; color:var(--muted);
  background:#3fa9ff12; border:1px solid #3fa9ff33; }
#screen-case .csx-help-pop b { color:var(--text); }
#screen-case .csx-help-pop[hidden] { display:none; }