/* QUICK TUNING: темная тема */
  .slot-listing-block {
    --bg: #0b0d12;
    --text: #f5f7ff;
    --sub: #98a0b3;
    --accent: #3b82ff;
    --hot: #ff375f;
    --card: #141924;
    --foot-bg: #10141d;
    --foot-border: rgba(255,255,255,.08);
    --img-bg: radial-gradient(circle, #1d2431 35%, #111721 100%);
    --r: 24px;
    --img: 210px;
    --foot: 56px;
  }
  .slot-listing-block, .slot-listing-block *, .slot-listing-block *::before, .slot-listing-block *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  .slot-listing-block {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1260px; margin: 0 auto; padding: 40px 20px 80px; position: relative; }
  .heading {
    color: var(--text); font-size: clamp(22px, 4vw, 36px); font-weight: 700;
    letter-spacing: -.8px; text-align: center; margin: 0 0 44px;
  }
  .grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
  @media(min-width:580px)  { .grid { grid-template-columns: repeat(3,1fr); gap: 16px; } }
  @media(min-width:900px)  { .grid { grid-template-columns: repeat(4,1fr); gap: 20px; } }
  @media(min-width:1180px) { .grid { grid-template-columns: repeat(5,1fr); gap: 22px; } }

  .card {
    display: flex; flex-direction: column; text-decoration: none;
    position: relative; border-radius: var(--r); background: var(--card);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1);
    cursor: pointer;
  }
  .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 52px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  }

  .card-img {
    position: relative; height: var(--img); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--img-bg); padding: 5px;
  }
  .card-img.png img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center; border-radius: 19px;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,.45));
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .card:hover .card-img.png img { transform: scale(1.05); }
  .card-img.banner img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    border-radius: 19px; box-shadow: 0 8px 18px rgba(0,0,0,.35);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  }
  .card:hover .card-img.banner img { transform: scale(1.03); box-shadow: 0 14px 28px rgba(0,0,0,.45); }

  .overlay {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(8,10,18,.62);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 16px 12px;
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
  }
  .card:hover .overlay { opacity: 1; pointer-events: auto; }

  .stats { display: flex; justify-content: center; width: 100%; gap: 6px; }
  .st { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; max-width:80px; }
  .st-l { color: rgba(255,255,255,.52); font-size:9px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
  .st-v { color:#fff; font-size:15px; font-weight:800; letter-spacing:-.2px; line-height:1; }
  .st-v.rtp { color: #32d74b; }
  .st-v.mx  { color: #ffd60a; }
  .overlay-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    height:34px; padding:0 20px; border-radius:999px; background: var(--accent);
    color:#fff; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
    box-shadow: 0 4px 18px rgba(59,130,255,.45);
  }
  .overlay-btn svg { width: 10px; height: 10px; }

  .foot {
    height: var(--foot); background: var(--foot-bg);
    border-top: 1px solid var(--foot-border);
    padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: relative; z-index: 5;
  }
  .name {
    color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: -.15px;
    margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .play {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.10); color: var(--sub);
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  .play svg { width: 10px; height: 10px; margin-left: 1px; }
  .card:hover .play {
    background: var(--accent); color:#fff; box-shadow: 0 3px 10px rgba(59,130,255,.30); transform: scale(1.1);
  }

  .hot {
    position: absolute; z-index: 20; top: 10px; left: 10px;
    background: var(--hot); color: #fff;
    font-size: 8px; font-weight: 800; letter-spacing: .6px; padding: 3px 9px; border-radius: 50px; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255,55,95,.40); pointer-events: none;
    transition: transform .42s cubic-bezier(.34,1.4,.64,1), opacity .25s ease;
    isolation: isolate;
  }
  .hot-label { display:inline-block; transform-origin:center center; animation: hot-sniff 1.15s cubic-bezier(.36,.07,.19,.97) infinite; }
  .hot::before,.hot::after{
    content:""; position:absolute; left:50%; top:50%; width:100%; height:100%; border-radius:999px;
    border:1.5px solid rgba(255,76,96,.55); transform:translate(-50%,-50%) scale(1); opacity:0;
    pointer-events:none; z-index:-1; animation: hot-ripple 2s ease-out infinite;
  }
  .hot::after { animation-delay:1s; border-color: rgba(255,96,116,.45); }
  @keyframes hot-ripple { 0%{transform:translate(-50%,-50%) scale(1);opacity:.55} 70%{transform:translate(-50%,-50%) scale(1.6);opacity:.18} 100%{transform:translate(-50%,-50%) scale(1.9);opacity:0} }
  @keyframes hot-sniff {
    0%{transform:rotate(0) translateX(0)} 10%{transform:rotate(-5deg) translateX(-.5px)}
    18%{transform:rotate(4deg) translateX(.5px)} 26%{transform:rotate(-4deg) translateX(-.4px)}
    34%{transform:rotate(3deg) translateX(.4px)} 44%{transform:rotate(-3deg) translateX(-.3px)}
    54%{transform:rotate(2deg) translateX(.2px)} 66%,100%{transform:rotate(0) translateX(0)}
  }
  .grid .card:nth-child(3n+1) .hot-label { animation-delay: -.2s; }
  .grid .card:nth-child(3n+2) .hot-label { animation-delay: -1.1s; }
  .grid .card:nth-child(3n)   .hot-label { animation-delay: -2.0s; }

  .shimmer {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    background-size: 220% 100%; background-position: -220% 0;
  }
  .card:hover .shimmer { animation: shine 1.8s ease-in-out infinite; }
  @keyframes shine { 0%{background-position:-220% 0} 100%{background-position:220% 0} }

  .ai-stick { position: sticky; bottom: 20px; z-index: 1200; display: flex; justify-content: center; margin-top: 14px; }
  .ai-fab {
    border:0; cursor:pointer; border-radius:999px; padding:10px 14px; display:inline-flex; align-items:center; gap:8px;
    background: rgba(22,28,39,.78); border:1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: 0 8px 24px rgba(0,0,0,.35); color:#fff; font-size:12px; font-weight:700;
    transition: transform .2s ease, box-shadow .2s ease, filter 1.6s ease-in-out;
    animation: ai-breathe 2.2s ease-in-out infinite;
  }
  .ai-fab .ai-grad { background: linear-gradient(90deg,#63a0ff,#a879ff,#ff7eb8); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ai-fab .ai-icon { width:18px; height:18px; display:block; filter: drop-shadow(0 0 8px rgba(111,185,255,.7)); }
  .ai-fab.running .ai-icon { animation: ai-icon-spin .9s linear infinite, ai-icon-grow 1.2s ease-in-out infinite; }
  @keyframes ai-breathe { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.1)} }
  @keyframes ai-icon-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
  @keyframes ai-icon-grow { 0%,100%{filter:drop-shadow(0 0 8px rgba(111,185,255,.6))} 50%{filter:drop-shadow(0 0 16px rgba(144,90,255,.9))} }
  .ai-wave { position:absolute; left:0; right:0; height:2px; bottom:0; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(80,180,255,.95),transparent); box-shadow:0 0 14px rgba(80,180,255,.85); }
  .wrap.ai-scanning .ai-wave { opacity:1; animation: ai-wave-up 2.4s linear forwards; }
  @keyframes ai-wave-up { 0%{transform:translateY(0)} 100%{transform:translateY(calc(-100% - 56px))} }

  .ai-overlay {
    position: fixed; inset: 0; z-index: 1190; opacity: 0; pointer-events: none;
    background: rgba(6,8,14,.58); backdrop-filter: blur(15px) saturate(115%); -webkit-backdrop-filter: blur(15px) saturate(115%);
    transition: opacity .28s ease;
  }
  .ai-overlay.active { opacity:1; pointer-events:auto; }
  .ai-noise {
    position:absolute; inset:0; opacity:.72;
    background: radial-gradient(42% 30% at 22% 30%, rgba(85,130,255,.28), transparent 70%),
                radial-gradient(45% 36% at 78% 66%, rgba(165,90,255,.24), transparent 72%),
                radial-gradient(35% 26% at 58% 36%, rgba(255,95,162,.18), transparent 70%);
    animation: ai-noise-drift 4s ease-in-out infinite alternate;
  }
  @keyframes ai-noise-drift { 0%{transform:translateY(-2%) scale(1)} 100%{transform:translateY(2%) scale(1.04)} }
  .ai-lasers,.ai-particles { position:absolute; inset:0; }
  .ai-laser { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(80,180,255,.95),transparent); box-shadow:0 0 14px rgba(80,180,255,.9); }
  .ai-overlay.active .ai-laser.l1 { animation: ai-scan1 1.1s linear infinite; }
  .ai-overlay.active .ai-laser.l2 { animation: ai-scan2 1.35s linear infinite; }
  .ai-overlay.active .ai-laser.l3 { animation: ai-scan3 1.7s linear infinite; }
  @keyframes ai-scan1 { 0%{top:6%} 100%{top:90%} }
  @keyframes ai-scan2 { 0%{top:15%} 100%{top:92%} }
  @keyframes ai-scan3 { 0%{top:0%} 100%{top:86%} }
  .ai-particles::before,.ai-particles::after{
    content:""; position:absolute; left:50%; top:50%; width:180px; height:180px; transform:translate(-50%,-50%);
    border-radius:50%;
    background:
      radial-gradient(circle at 20% 30%, rgba(110,180,255,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 70% 20%, rgba(150,100,255,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 80% 70%, rgba(255,110,175,.95) 0 2px, transparent 3px),
      radial-gradient(circle at 35% 80%, rgba(130,210,255,.95) 0 2px, transparent 3px);
    animation: ai-orbit 2.2s linear infinite;
  }
  .ai-particles::after { animation-duration: 1.5s; animation-direction: reverse; opacity: .8; }
  @keyframes ai-orbit { from{transform:translate(-50%,-50%) rotate(0deg) scale(1)} to{transform:translate(-50%,-50%) rotate(360deg) scale(1.08)} }

  .card.ai-candidate { box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 8px 24px rgba(77,177,255,.35); filter: brightness(1.08); }
  .card.ai-reveal { animation: ai-depixelize .45s ease-out forwards; }
  @keyframes ai-depixelize { 0%{filter:blur(6px) contrast(1.25) saturate(.7)} 100%{filter:blur(0) contrast(1) saturate(1)} }
  .card.ai-winner { box-shadow:0 0 0 1px rgba(255,214,112,.45),0 0 32px rgba(255,202,92,.30),0 20px 42px rgba(0,0,0,.45); animation: ai-aura 3.2s ease-in-out infinite; }
  .card.ai-winner::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background: linear-gradient(120deg, rgba(182,136,40,.38) 0%, rgba(202,156,54,.42) 38%, rgba(255,232,170,.98) 50%, rgba(202,156,54,.42) 62%, rgba(182,136,40,.38) 100%);
    background-size:240% 240%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ai-gold-trace 4s ease-in-out infinite; pointer-events:none; z-index:25;
  }
  .card.ai-winner::after{
    content:""; position:absolute; inset:1px; border-radius:inherit;
    background:linear-gradient(120deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.36) 50%, rgba(255,255,255,0) 58%);
    background-size:260% 260%; opacity:0; pointer-events:none; z-index:26;
    animation: ai-sheen 3.6s ease-in-out infinite;
  }
  @keyframes ai-gold-trace { 0%{background-position:0 0;opacity:.72} 50%{background-position:100% 100%;opacity:1} 100%{background-position:0 0;opacity:.72} }
  @keyframes ai-aura {
    0%,100% { box-shadow:0 0 0 1px rgba(255,214,112,.40), 0 0 26px rgba(255,202,92,.25), 0 16px 34px rgba(0,0,0,.35); }
    50%     { box-shadow:0 0 0 1px rgba(255,214,112,.62), 0 0 42px rgba(255,202,92,.52), 0 20px 42px rgba(0,0,0,.45); }
  }
  @keyframes ai-sheen {
    0%,74%,100% { background-position:120% -120%; opacity:0; }
    80%         { background-position:50% 50%; opacity:.6; }
    88%         { background-position:-20% 220%; opacity:0; }
  }
  .card .ai-best {
    position:absolute; z-index:30; top:34px; left:8px; min-width:40px; padding:3px 8px;
    display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
    background: linear-gradient(90deg, rgba(255,235,175,.92), rgba(255,210,104,.90));
    color:#7b5400; font-size:9px; font-weight:800; letter-spacing:.32px;
    box-shadow:0 2px 10px rgba(255,200,70,.35); text-transform:uppercase;
  }
  .badge { display: none; }

  @media (max-width: 767px) {
    .wrap { padding: 24px 16px 60px; }
    .heading { font-size: 22px; margin-bottom: 28px; }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .slot-listing-block { --img: 170px; --foot: 44px; --r: 18px; }
    .card-img { padding: 4px; }
    .card-img.png img, .card-img.banner img { border-radius: 14px; }
    .name { font-size: 11px; }
    .foot { padding: 0 10px; }
    .play { width: 26px; height: 26px; }
    .play svg { width: 8px; height: 8px; }
    .hot { top: 7px; left: 8px; }
    .overlay, .shimmer { display: none; }
    .badge, .hot {
      position: absolute; z-index: 15; height: 20px; line-height: 20px; padding: 0 8px; border-radius: 999px;
      font-size: 9px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; color: var(--text);
      background: rgba(22,28,39,.82); border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none;
    }
    .badge { display:block; opacity:0; transition:transform .38s ease-out, opacity .22s ease-out; }
    .hot { z-index:16; background:var(--hot); color:#fff; box-shadow:0 2px 8px rgba(255,55,95,.40); transition:transform .38s ease-out, opacity .22s ease-out; }
    .b-rtp { top:7px; left:8px; transform:translateX(-58px); color:#7ff0a3; }
    .b-vol { top:7px; right:8px; transform:translateX(58px); }
    .b-mx  { bottom:10px; left:50%; transform:translate(-50%, 40px); color:#ffd973; background:rgba(45,36,18,.82); }
    .b-mx.is-counting {
      font-weight: 800;
      color: #54ff8b;
      text-shadow: 0 0 6px rgba(84,255,139,.7), 0 0 14px rgba(84,255,139,.35);
      animation: mx-glow .5s ease-in-out infinite alternate;
    }
    @keyframes mx-glow {
      0%   { text-shadow: 0 0 4px rgba(84,255,139,.45), 0 0 10px rgba(84,255,139,.2); }
      100% { text-shadow: 0 0 9px rgba(84,255,139,.85), 0 0 20px rgba(84,255,139,.4); }
    }
    .b-mx.is-stamped {
      animation: mx-stamp .3s cubic-bezier(.2,.8,.2,1.4) forwards;
      color: #ffd973;
      text-shadow: none;
    }
    @keyframes mx-stamp {
      0%   { transform: translate(-50%, 0) scale(1.3); box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.15); }
      100% { transform: translate(-50%, 0) scale(1.0); box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 2px 8px rgba(0,0,0,.15); }
    }
    .card { box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .3s ease, box-shadow .3s ease; }
    .card:hover { transform:none; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
    .card.in-focus { transform: scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,.34); }
    .card.in-focus .play { background: var(--accent); color:#fff; box-shadow:0 2px 8px rgba(59,130,255,.35); }
    .card.in-focus .card-img.png img { transform: scale(1.06); }
    .card.in-focus .b-rtp { opacity:1; transform:translateX(0); }
    .card.in-focus .b-vol { opacity:1; transform:translateX(0); }
    .card.in-focus .b-mx  { opacity:1; transform:translate(-50%, 0); }
    .card.in-focus.has-hot .hot { transform: translateX(56px); opacity: .95; }
    .card.in-focus .play.pulse { animation: btn-pulse .4s ease; }
    @keyframes btn-pulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.25); }
      100% { transform: scale(1); }
    }
    .ai-stick { bottom: 14px; margin-top: 10px; }
    .ai-fab { justify-content: center; width: 100%; padding: 11px 14px; font-size: 13px; }
  }