:root{
      --neutral:#0b0f14;           // grafit
      --accent:#10b981;            // smaragd
      --highlight:#e2e8f0;         // platina
    }

    .deco-grid{
      opacity: .10;
      background-image:
        linear-gradient(to right, rgba(226,232,240,.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(226,232,240,.10) 1px, transparent 1px),
        linear-gradient(135deg, rgba(16,185,129,.22), rgba(16,185,129,0) 55%);
      background-size: 72px 72px, 72px 72px, 100% 100%;
      mask-image: radial-gradient(900px 420px at 50% 20%, #000 55%, transparent 100%);
    }

    .hero-glow{
      text-shadow: 0 0 22px rgba(16,185,129,.18);
    }

    .casino-card{
      position: relative;
      border-radius: 1.5rem;
      border: 1px solid rgba(16,185,129,.18);
      background: rgba(0,0,0,.28);
      box-shadow: 0 0 0 1px rgba(16,185,129,.10);
      overflow: hidden;
    }

    .casino-card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: linear-gradient(135deg, rgba(16,185,129,.45), rgba(226,232,240,.12), rgba(16,185,129,0));
      opacity:.12;
      pointer-events:none;
    }

    .casino-card .card-inner{
      position: relative;
      padding: 1.25rem;
    }

    @media (min-width: 768px){
      .casino-card .card-inner{ padding: 1.5rem; }
    }

    .casino-card.top3{
      transform: translateZ(0);
      border-color: rgba(16,185,129,.35);
      box-shadow: 0 0 0 1px rgba(16,185,129,.22), 0 0 28px rgba(16,185,129,.22);
    }

    .casino-card.top3::after{
      content:"";
      position:absolute;
      inset:-40%;
      background: radial-gradient(circle at 30% 20%, rgba(16,185,129,.35), transparent 45%);
      opacity:.25;
      pointer-events:none;
    }

    .logo{
      width: 140px;
      height: 70px;
      object-fit: cover;
      border-radius: .75rem;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }

    .bonus{
      margin-top: .75rem;
      border-radius: 1rem;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      padding: .75rem 1rem;
      font-size: .875rem;
      line-height: 1.4;
    }

    .stars{
      color: rgba(16,185,129,.95);
      letter-spacing: .08em;
      text-shadow: 0 0 16px rgba(16,185,129,.18);
      font-size: .9rem;
      line-height: 1;
    }

    .rating{
      color: rgba(255,255,255,.85);
      font-size: .875rem;
    }

    .cta-btn{
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      border-radius: 1.25rem;
      border: 1px solid rgba(226,232,240,.28);
      background: rgba(0,0,0,.10);
      padding: .85rem 1rem;
      font-weight: 700;
      color: rgba(226,232,240,.95);
      box-shadow: 0 0 0 1px rgba(16,185,129,.14);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      position: relative;
      overflow: hidden;
    }

    .cta-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, transparent, rgba(226,232,240,.18), transparent);
      transform: translateX(-120%);
      transition: transform .5s ease;
      opacity:.9;
    }

    .cta-btn:hover{
      transform: translateY(-1px);
      background: rgba(16,185,129,.14);
      border-color: rgba(16,185,129,.45);
      box-shadow: 0 0 0 1px rgba(16,185,129,.22), 0 0 24px rgba(16,185,129,.22);
    }

    .cta-btn:hover::before{
      transform: translateX(120%);
    }

    .cta-arrow{
      opacity: .75;
      transition: transform .18s ease;
    }
    .cta-btn:hover .cta-arrow{
      transform: translateX(2px);
    }

    // Ribbon badge (szalag)
    .place-badge{
      width: 56px;
      height: 56px;
      position: relative;
      flex: 0 0 auto;
      display:grid;
      place-items:center;
      filter: drop-shadow(0 0 16px rgba(16,185,129,.18));
    }

    .ribbon-badge{
      background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(226,232,240,.55));
      border-radius: .9rem;
      clip-path: polygon(12% 0%, 88% 0%, 100% 22%, 100% 78%, 88% 100%, 12% 100%, 0% 78%, 0% 22%);
      border: 1px solid rgba(255,255,255,.22);
    }

    .badge-num{
      color: rgba(0,0,0,.88);
      font-weight: 900;
      font-size: 1.05rem;
    }

    .badge-medal{
      position:absolute;
      top: -10px;
      right: -10px;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(226,232,240,.35);
      display:grid;
      place-items:center;
    }