.flashcard{background:var(--card-bg);border-radius:10px;padding:1.5rem;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;cursor:pointer;transition:transform .6s,box-shadow .3s;transform-style:preserve-3d;color:var(--text-dark);box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden}.flashcard:hover{box-shadow:0 6px 12px rgba(0,0,0,.15)}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:1.2rem;word-break:break-word;overflow-y:auto;-webkit-overflow-scrolling:touch}.flashcard-back{transform:rotateY(180deg);background:#f8f9fa}.flashcard-actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;opacity:0;transition:opacity .3s ease;z-index:10}.flashcard:hover .flashcard-actions,.flashcard:active .flashcard-actions{opacity:1}.action-btn{padding:.4rem;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);color:white;border:none;cursor:pointer;font-size:.8rem}@media (max-width:768px){.flashcard{aspect-ratio:4/3}.flashcard-actions{opacity:1}}@media (max-width:480px){.flashcard{padding:1rem}.flashcard-front,.flashcard-back{font-size:.9rem}}@media (hover:none){.flashcard.flipped{animation:cardFlip .6s forwards}}