.btn-action         { background: linear-gradient(90deg, #38bdf8, #818cf8); box-shadow: 0 2px 12px 0 rgba(56,189,248,0.35); }
        .btn-action-orange  { background: linear-gradient(90deg, #ff6b00, #ff9500); box-shadow: 0 2px 12px 0 rgba(255,107,0,0.35); }
        .btn-action-red     { background: linear-gradient(90deg, #ea580c, #dc2626); box-shadow: 0 2px 12px 0 rgba(234,88,12,0.35); }

        .btn-action-blue    { background: linear-gradient(90deg, #2563eb, #1d4ed8); box-shadow: 0 2px 12px 0 rgba(37,99,235,0.35); }
        /* 20.10.2026 — кнопки "бесплатных" (нетематических) карточек:
           остаются прозрачными, НЕ заливаются цветом. Вместо заливки —
           контурное белое свечение в покое, ярче + чёткий контур на
           hover/тач (Алексей явно попросил именно так, не заливку). */
        .btn-glow {
          background: transparent;
          border: 1px solid rgba(255,255,255,0.15);
          box-shadow: 0 0 10px 1px rgba(255,255,255,0.10);
          transition: all 0.2s;
        }
        .btn-glow:hover, .btn-glow:active {
          border-color: rgba(255,255,255,0.45);
          box-shadow: 0 0 15px 2px rgba(255,255,255,0.14);
        }

        /* Базовая карточка — эффект парения */
        .card-wrap {
          background: linear-gradient(163deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
          border-radius: 20px;
          padding: 1px;
          transition: all 0.3s;
        }
        .card-inner {
          background: #0f172a;
          border-radius: 19px;
          height: 100%;
          padding: 24px;
          transition: all 0.2s;
        }
        /* 20.10.2026 — Алексей: на мобильном нет мыши, hover-подсветка
           никогда не включалась — карточки выглядели плоскими всегда.
           Теперь базовое состояние = бывший hover-блеск, а на hover
           (десктоп) появляется ещё и обводка поярче. НЕ трогает лидера/
           параноика/броню/ShockReaktor — у них своя подсветка, явно
           исключены через :not(). */
        .card-wrap:not(.card-leader):not(.card-paranoid):not(.card-armor):not(.card-enigma) {
          box-shadow: 0px 0px 20px 1px rgba(255,255,255,0.06);
          border: 1px solid transparent;
        }
        .card-wrap:not(.card-leader):not(.card-paranoid):not(.card-armor):not(.card-enigma):hover {
          box-shadow: 0px 0px 28px 2px rgba(255,255,255,0.14);
          border-color: rgba(255,255,255,0.3);
        }
        .card-inner:hover {
          transform: scale(0.99);
        }

        /* Лидер — оранжевое свечение + пульсация */
        .card-leader {
          background: linear-gradient(163deg, #ff6b00, #ff9500);
          animation: pulse-orange 4s ease-in-out infinite;
        }
        @keyframes pulse-orange {
          0%, 100% { box-shadow: 0 0 15px 1px rgba(255,107,0,0.15); }
          50%       { box-shadow: 0 0 25px 2px rgba(255,107,0,0.25); }
        }

        /* SHOCK REAKTOR — голубой неон + пульсация */
        .card-enigma {
          background: linear-gradient(163deg, #0ea5e9, #6366f1);
          animation: pulse-blue 4s ease-in-out infinite;
        }
        @keyframes pulse-blue {
          0%, 100% { box-shadow: 0 0 15px 1px rgba(14,165,233,0.15); }
          50%       { box-shadow: 0 0 30px 2px rgba(14,165,233,0.28); }
        }

        /* Параноик (Mullvad) — оранжево-красный */
        .card-paranoid {
          background: linear-gradient(163deg, #ea580c, #dc2626);
          animation: pulse-red 4s ease-in-out infinite;
        }
        @keyframes pulse-red {
          0%, 100% { box-shadow: 0 0 15px 1px rgba(234,88,12,0.15); }
          50%       { box-shadow: 0 0 25px 2px rgba(234,88,12,0.22); }
        }

        /* Броня (Proton) — синий */
        .card-armor {
          background: linear-gradient(163deg, #2563eb, #1d4ed8);
          animation: pulse-navy 4s ease-in-out infinite;
        }
        @keyframes pulse-navy {
          0%, 100% { box-shadow: 0 0 15px 1px rgba(37,99,235,0.12); }
          50%       { box-shadow: 0 0 22px 2px rgba(37,99,235,0.20); }
        }

        /* Опасность 🚨 — красная рамка */
        .card-danger {
          border: 1px solid rgba(239,68,68,0.5);
          animation: pulse-danger 3s ease-in-out infinite;
        }
        @keyframes pulse-danger {
          0%, 100% { box-shadow: 0 0 10px 1px rgba(239,68,68,0.15); }
          50%       { box-shadow: 0 0 22px 3px rgba(239,68,68,0.35); }
        }
        .card-danger .danger-label {
          display: inline-block;
          background: rgba(239,68,68,0.15);
          border: 1px solid rgba(239,68,68,0.4);
          color: #f87171;
          font-size: 10px;
          font-weight: 700;
          padding: 2px 8px;
          border-radius: 6px;
          margin-bottom: 8px;
        }

        /* Осторожно ⚠️ — жёлтая рамка */
        .card-warning {
          border: 1px solid rgba(234,179,8,0.4);
          animation: pulse-warning 3s ease-in-out infinite;
        }
        @keyframes pulse-warning {
          0%, 100% { box-shadow: 0 0 8px 1px rgba(234,179,8,0.10); }
          50%       { box-shadow: 0 0 18px 2px rgba(234,179,8,0.25); }
        }
        .card-warning .danger-label {
          display: inline-block;
          background: rgba(234,179,8,0.12);
          border: 1px solid rgba(234,179,8,0.35);
          color: #fbbf24;
          font-size: 10px;
          font-weight: 700;
          padding: 2px 8px;
          border-radius: 6px;
          margin-bottom: 8px;
        }