.pixel-card{position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--card-bg);backdrop-filter:var(--blur-lg);border:1px solid var(--card-border);overflow:hidden;transition:all var(--duration-normal) ease;cursor:pointer;min-height:200px;min-width:200px;box-shadow:var(--card-shadow)}.pixel-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--card-hover-shadow)}.pixel-card:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--primary-light)}.pixel-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.pixel-card>:not(.pixel-canvas){position:relative;z-index:2}.pixel-card[data-variant=blue]{background:var(--card-bg);border-color:rgba(59,130,246,.3)}.pixel-card[data-variant=blue]:hover{border-color:var(--primary);box-shadow:0 20px 25px -5px rgba(59,130,246,.3),0 10px 10px -5px rgba(59,130,246,.1)}.pixel-card[data-variant=yellow]{background:var(--card-bg);border-color:rgba(234,179,8,.3)}.pixel-card[data-variant=yellow]:hover{border-color:var(--warning);box-shadow:0 20px 25px -5px rgba(234,179,8,.3),0 10px 10px -5px rgba(234,179,8,.1)}.pixel-card[data-variant=pink]{background:var(--card-bg);border-color:rgba(236,72,153,.3)}.pixel-card[data-variant=pink]:hover{border-color:#ec4899;box-shadow:0 20px 25px -5px rgba(236,72,153,.3),0 10px 10px -5px rgba(236,72,153,.1)}@media (max-width:1024px){.pixel-card{min-height:180px;min-width:180px}}@media (max-width:768px){.pixel-card{min-height:160px;min-width:160px}}@media (max-width:640px){.pixel-card{min-height:140px;min-width:140px}}@media (prefers-reduced-motion:reduce){.pixel-card{transition:none}.pixel-card:hover{transform:none}}