:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  background:
    radial-gradient(1100px 780px at 18% 8%, rgba(182, 72, 255, .32), transparent 58%),
    radial-gradient(980px 720px at 85% 12%, rgba(255, 72, 214, .20), transparent 60%),
    radial-gradient(900px 700px at 45% 100%, rgba(72, 204, 255, .14), transparent 62%),
    linear-gradient(180deg, #070014, #060412 45%, #04030b);
  color: #e8eefc;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 60px;
}
a { color: #8ab4ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .95;
  background:
    radial-gradient(680px 520px at 12% 30%, rgba(182, 72, 255, .22), transparent 72%),
    radial-gradient(760px 560px at 88% 24%, rgba(255, 72, 214, .18), transparent 72%),
    radial-gradient(820px 620px at 64% 96%, rgba(72, 204, 255, .12), transparent 74%);
  filter: saturate(1.1);
}
.bg::after {
  content: "";
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .25;
  mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,1), transparent 90%);
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 44px 18px 80px; }
.panel {
  border-radius: 22px;
  border: 1px solid rgba(56, 104, 156, .55);
  background: linear-gradient(180deg, rgba(6, 12, 22, .74), rgba(6, 10, 18, .72));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  overflow: visible;
  backdrop-filter: blur(14px);
  animation: floatIn .55s ease-out both;
}
.site-header {
  position: relative;
  border-bottom: 1px solid rgba(46, 78, 120, .55);
  margin-bottom: 0;
}
.site-header .header-svg { display: block; vertical-align: top; }
/* ========== ФУТЕР: кнопки — правьте width / height / left / top (px) ==========
   1 = О нас | 2 = Оферта | 3 = Политика | 4 = Помощь
   left/top — от левого верхнего угла footer.png
   ================================================================ */
.site-footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 36px));
  z-index: 90;
  pointer-events: auto;
}
.site-footer img {
  width: 100%;
  height: auto;
  display: block;
}
.site-footer-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.site-footer-link {
  position: absolute;
  display: block;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 6px;
  transition: background .15s ease;
}
.site-footer-link:hover {
  background: rgba(255, 255, 255, .10);
}

/* 1 — О нас */
.site-footer-link--1 {
  width: 80px;
  height: 20px;
  left: 150px;
  top: 12px;
}
/* 2 — Публичная оферта */
.site-footer-link--2 {
  width: 280px;
  height: 20px;
  left: 250px;
  top: 12px;
}
/* 3 — Политика конфиденциальности */
.site-footer-link--3 {
  width: 330px;
  height: 20px;
  left: 550px;
  top: 12px;
}
/* 4 — Помощь */
.site-footer-link--4 {
  width: 100px;
  height: 20px;
  left: 910px;
  top: 12px;
}

/* Подсветка (уберите is-debug с .site-footer когда выровняете) */
.site-footer.is-debug .site-footer-link {
  outline: 2px dashed rgba(255, 140, 90, .95);
  background: rgba(255, 140, 90, .22);
}
/* ========== / ФУТЕР ========== */
.header-svg { display: block; width: 100%; height: auto; }
.header-hot {
  fill: transparent;
  cursor: pointer;
  transition: filter .18s ease;
}
.home-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px 36px;
}
.home-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.promo-strip-wrap { padding: 0; margin: 0; }
.promo-strip {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  padding: 0;
}
@media (min-width: 720px) {
  .promo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .promo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.promo-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 215, 120, .35);
  background: linear-gradient(135deg, rgba(40, 28, 8, .92), rgba(18, 14, 8, .95));
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.promo-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.promo-accent-emerald { border-color: rgba(80, 220, 140, .4); background: linear-gradient(135deg, rgba(8, 40, 28, .92), rgba(8, 18, 14, .95)); }
.promo-accent-ruby { border-color: rgba(255, 90, 90, .4); background: linear-gradient(135deg, rgba(50, 10, 10, .92), rgba(20, 8, 8, .95)); }
.promo-accent-sky { border-color: rgba(100, 180, 255, .4); background: linear-gradient(135deg, rgba(10, 28, 50, .92), rgba(8, 14, 24, .95)); }
.promo-badge {
  align-self: flex-start; font-size: 12px; font-weight: 900; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: rgba(255, 200, 80, .2); color: #ffd98a;
}
.promo-title { font-size: 16px; font-weight: 900; }
.promo-desc { font-size: 13px; color: var(--muted); line-height: 1.35; }
.promo-until { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 2px; }
.home-center { padding: 0; display: block; }
.home-grid {
  width: 100%;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 22px; }
}
.home-grid .card { min-width: 0; }
.news-card { width: 100%; }
.news-card h2 { font-size: 22px; font-weight: 950; letter-spacing: .25px; }
.home-features h2 { font-size: 18px; font-weight: 900; margin: 0 0 12px; }
.home-feature-list { display: flex; flex-direction: column; gap: 8px; }
.home-feature {
  display: block; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.2);
  text-decoration: none; color: inherit; transition: border-color .15s, background .15s;
}
.home-feature:hover { border-color: rgba(255, 215, 120, .35); background: rgba(255, 200, 80, .06); }
.home-feature-k { display: block; font-weight: 800; font-size: 14px; }
.home-feature-v { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.home-online { margin-top: 14px; margin-bottom: 0; }
.rank-inherit-note { margin-bottom: 14px; line-height: 1.45; }
.rank-ladder-title {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, .85);
}
.rank-ladder-title:first-of-type { margin-top: 8px; }
.rank-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
@media (min-width: 700px) {
  .rank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .rank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rank-card { min-width: 0; }
.rank-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rank-card-head h3 { margin: 0; font-size: 1.1rem; }
.rank-card-short { margin: 8px 0 10px; }
.rank-perk-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 13px;
  color: #a9b6cf;
  line-height: 1.45;
}
.rank-perk-list li { margin-bottom: 4px; }
.rank-kv-compact .v { font-size: 13px; }
.shop-item .note { line-height: 1.4; word-break: break-word; }
.price-old { text-decoration: line-through; opacity: .55; margin-right: 6px; }
.price-old code { font-size: 12px; }
.price-sale { border-color: rgba(120, 255, 160, .35) !important; }
.discount-tag {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 900;
  color: #9effb8; padding: 2px 6px; border-radius: 6px; background: rgba(60, 180, 100, .2);
}
.news-lead { font-weight: 950; font-size: 20px; letter-spacing: .2px; }
.news-bullets .k { font-weight: 900; color: #dbe5ff; }
.news-bullets ul { margin: 8px 0 0; padding-left: 18px; color: #c8d6f1; line-height: 1.5; }
.news-bullets li { margin: 6px 0; }
.hotspots-on .header-hot {
  stroke: rgba(255, 72, 214, .90);
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
}
.header-glint {
  pointer-events: none;
  opacity: 0;
  fill: rgba(255, 255, 255, .22);
  filter:
    drop-shadow(0 0 10px rgba(255, 72, 214, .22))
    drop-shadow(0 0 18px rgba(72, 204, 255, .18));
  mix-blend-mode: screen;
  transform: translateX(-120px) skewX(-20deg);
}
.site-header a:hover .header-glint {
  animation: glintMove .75s ease-out 1;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #e8eefc;
  text-decoration: none;
}
.brand-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 222, 93, .55);
  background: radial-gradient(18px 18px at 30% 30%, rgba(255, 222, 93, .35), transparent 70%),
              linear-gradient(180deg, rgba(21,29,45,.92), rgba(18,25,39,.92));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.nav a {
  color: #cfe0ff;
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(46, 78, 120, .55);
  background: rgba(8, 12, 20, .55);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 93, .22), transparent);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
}
.nav a:hover { background: rgba(14, 20, 34, .62); color: #fff; border-color: rgba(255, 222, 93, .55); transform: translateY(-1px); }
.nav a:hover::after { transform: translateX(130%); }

.hero h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: .2px;
  text-transform: uppercase;
  font-weight: 950;
  text-shadow: 0 8px 22px rgba(0,0,0,.55);
}
.hero p { margin: 6px 0 0; color: #c6d4ef; }
.grid { margin-top: 16px; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
.card {
  padding: 16px;
  border: 1px solid rgba(46, 64, 98, .75);
  border-radius: 18px;
  background: rgba(13,18,28,.78);
  backdrop-filter: blur(10px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(138, 180, 255, .55);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}
.card h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: .2px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: baseline; }
.k { color: #a9b6cf; }
.v { font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #2a3a57; background: rgba(21,29,45,.9); padding: 8px 10px; border-radius: 999px; }
.shop-h { display: flex; align-items: center; gap: 10px; }
.shop-icon { width: 28px; height: 28px; image-rendering: pixelated; }
.shop-icon-sprite {
  width: 42px;
  height: 42px;
  display: inline-block;
  background-image: var(--sprite);
  background-size: 500% 200%;
  background-repeat: no-repeat;
  background-position: var(--bx, 0%) var(--by, 0%);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}
.shop-item[data-case="1"]:hover .shop-icon-sprite { --by: 100%; }
.shop-icon-sprite-prem {
  width: 78px;
  height: 110px;
  background-size: 400% 100%;
  background-position: var(--bx, 0%) 50%;
}
.shop-icon-sprite-drac {
  width: 82px;
  height: 82px;
  background-size: 200% 100%;
  background-position: var(--bx, 0%) 50%;
}
.shop-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.shop-tab { cursor: pointer; }
.shop-tab[data-active="1"] { border-color: rgba(255, 222, 93, .75); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 222, 93, .28);
  background: linear-gradient(180deg, rgba(21,29,45,.92), rgba(12,18,30,.92));
  color: #e8eefc;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 93, .18), transparent);
  transform: translateX(-120%);
  transition: transform .5s ease;
  pointer-events: none;
}
.btn:hover { background: linear-gradient(180deg, rgba(28,39,60,.92), rgba(12,18,30,.92)); text-decoration: none; transform: translateY(-1px); border-color: rgba(255, 222, 93, .55); }
.btn:hover::after { transform: translateX(120%); }
.btn-sm { padding: 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.note { margin-top: 10px; color: #c8d6f1; font-size: 14px; line-height: 1.5; }
.mapwrap { margin-top: 10px; border: 1px solid #1e2a3f; border-radius: 14px; overflow: hidden; background: #070a10; }
.mapwrap iframe { width: 100%; height: 70vh; border: 0; display: block; }
.warn { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid #3b2a2a; background: rgba(80, 20, 20, .35); color: #ffd4d4; }
.ok { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid #2a3b2a; background: rgba(20, 80, 20, .25); color: #d4ffd4; }
.formrow { display: grid; gap: 10px; margin-top: 10px; }
.field { display: grid; gap: 6px; }
.label { color: #a9b6cf; font-size: 14px; }
.input { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid #2a3a57; background: rgba(21,29,45,.9); color: #e8eefc; padding: 10px 12px; }
.input:focus { outline: none; border-color: rgba(138, 180, 255, .75); box-shadow: 0 0 0 4px rgba(138, 180, 255, .10); }
.pw { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.eye { width: 44px; height: 42px; border-radius: 10px; border: 1px solid #2a3a57; background: rgba(21,29,45,.9); color: #e8eefc; font-weight: 700; cursor: pointer; }
.eye:hover { background: rgba(28,39,60,.9); }
.footer { margin-top: 18px; color: #7f8aa3; font-size: 12px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

@keyframes floatIn {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes hotPulse {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
@keyframes glowMove {
  0% { transform: translate3d(-10px, -8px, 0); opacity: .7; }
  50% { transform: translate3d(10px, 6px, 0); opacity: .95; }
  100% { transform: translate3d(-10px, -8px, 0); opacity: .7; }
}
@keyframes glintMove {
  0% { opacity: 0; transform: translateX(-120px) skewX(-20deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--travel) * 1px + 120px)) skewX(-20deg); }
}

.flash-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 12px;
  display: flex;
  justify-content: center;
  z-index: 70;
  pointer-events: none;
}
.flash-wrap > .ok,
.flash-wrap > .warn {
  pointer-events: auto;
  max-width: min(980px, calc(100% - 28px));
}

.module {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
}
.module[hidden] { display: none; }
.module-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .60);
  backdrop-filter: blur(10px);
}
.module-dialog {
  position: relative;
  width: min(980px, calc(100% - 28px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(56, 104, 156, .55);
  background:
    radial-gradient(900px 640px at 18% 10%, rgba(182, 72, 255, .22), transparent 58%),
    radial-gradient(780px 560px at 88% 18%, rgba(255, 72, 214, .15), transparent 60%),
    radial-gradient(820px 640px at 55% 100%, rgba(72, 204, 255, .10), transparent 64%),
    linear-gradient(180deg, rgba(7, 0, 20, .96), rgba(6, 4, 18, .96) 45%, rgba(4, 3, 11, .96));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  animation: modalIn .22s ease-out both;
}
.module-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.module-body { padding: 16px; }
.module-body .card:hover { transform: none; }
body.module-open { overflow: hidden; }

@keyframes modalIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.case-roll {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
}
.case-roll[hidden] { display: none; }
.case-roll-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(12px);
}
.case-roll-dialog {
  position: relative;
  width: min(860px, calc(100% - 28px));
  border-radius: 22px;
  border: 1px solid rgba(56, 104, 156, .55);
  background:
    radial-gradient(900px 640px at 18% 10%, rgba(182, 72, 255, .22), transparent 58%),
    radial-gradient(780px 560px at 88% 18%, rgba(255, 72, 214, .15), transparent 60%),
    radial-gradient(820px 640px at 55% 100%, rgba(72, 204, 255, .10), transparent 64%),
    linear-gradient(180deg, rgba(7, 0, 20, .96), rgba(6, 4, 18, .96) 45%, rgba(4, 3, 11, .96));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  animation: modalIn .22s ease-out both;
}
.case-roll-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.case-roll-body { padding: 16px; }
.case-roll-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
}
.case-roll-window {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(120, 140, 190, .25);
  background: rgba(0, 0, 0, .18);
  padding: 14px 0;
  --center-w: 130px;
  --center-h: 86px;
  --center-r: 14px;
}
.case-roll-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--center-w);
  height: var(--center-h);
  transform: translate(-50%, -50%);
  border-radius: var(--center-r);
  border: 1px solid rgba(255, 72, 214, .78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 0 18px rgba(255, 72, 214, .22),
    0 0 40px rgba(182, 72, 255, .14);
  background: rgba(255, 72, 214, .04);
  pointer-events: none;
}
.case-roll-track {
  display: flex;
  gap: 10px;
  padding: 0 18px;
  will-change: transform;
}
.case-roll-item {
  width: 130px;
  flex: 0 0 auto;
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(120, 140, 190, .18);
  background: rgba(255,255,255,.04);
  padding: 10px 10px 12px;
  position: relative;
  overflow: hidden;
}
.case-roll-item.win {
  border-color: rgba(255, 72, 214, .75);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 0 30px rgba(255, 72, 214, .20),
    0 18px 55px rgba(0, 0, 0, .35);
}
.case-roll-item.win::after {
  content: "";
  position: absolute;
  inset: -40% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-60%) rotate(12deg);
  animation: caseWinGlint 1.2s ease-out 1;
  pointer-events: none;
}
.case-roll-item.win .case-roll-item-icon {
  border-color: rgba(255, 72, 214, .55);
  box-shadow: 0 0 18px rgba(255, 72, 214, .20);
}
.case-confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 72, 214, .95);
  transform: translate(-50%, -50%);
  animation: caseConfetti 900ms ease-out 1 forwards;
  pointer-events: none;
}
@keyframes caseWinGlint {
  0% { opacity: 0; transform: translateX(-70%) rotate(12deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%) rotate(12deg); }
}
@keyframes caseConfetti {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) rotate(calc(var(--rot) * 1deg)); }
}
.case-roll-item-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(120, 140, 190, .18);
}
.case-roll-item-name {
  font-size: 12px;
  color: #dbe5ff;
  line-height: 1.2;
  min-height: 30px;
}
.case-roll-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.case-roll-item-icon img,
.case-preview-icon img,
.case-roll-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.case-title-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
}
.case-title-btn:hover { text-decoration: underline; }

.case-preview {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
}
.case-preview[hidden] { display: none; }
.case-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(12px);
}
.case-preview-dialog {
  position: relative;
  width: min(980px, calc(100% - 28px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(56, 104, 156, .55);
  background:
    radial-gradient(900px 640px at 18% 10%, rgba(182, 72, 255, .22), transparent 58%),
    radial-gradient(780px 560px at 88% 18%, rgba(255, 72, 214, .15), transparent 60%),
    radial-gradient(820px 640px at 55% 100%, rgba(72, 204, 255, .10), transparent 64%),
    linear-gradient(180deg, rgba(7, 0, 20, .96), rgba(6, 4, 18, .96) 45%, rgba(4, 3, 11, .96));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  animation: modalIn .22s ease-out both;
}
.case-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}
.case-preview-body { padding: 16px; }
.case-preview-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.case-preview-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 900px) {
  .case-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.case-preview-item {
  border-radius: 16px;
  border: 1px solid rgba(120, 140, 190, .18);
  background: rgba(255,255,255,.04);
  padding: 12px;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  gap: 8px 10px;
  align-items: center;
}
.case-preview-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(120, 140, 190, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: span 2;
}
.case-preview-name { font-weight: 800; line-height: 1.15; }
.case-preview-chance { color: #a9b6cf; font-size: 12px; }