:root{
    --bg: #0f172a;
    --card: #0b1220;
    --accent: #7c3aed;
    --muted: #9ca3af;
    --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{
  background:linear-gradient(160deg,#071021,#0b1220 40%, #071021);color:#e6eef8;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  height: 100vh;
  overflow: hidden;
}
.site-header{
  display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:transparent;
  border:1px solid rgba(255,255,255,0.04);
}
.logo{font-size:1.6rem;letter-spacing:0.6px}
nav a{color:var(--muted);margin-left:1rem;text-decoration:none}
.container{
  padding:0rem 2rem;
  border:1px solid rgba(255,255,255,0.04);
}
.decks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.deck-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.6);transform-origin:center}
.deck-card h2{margin:0 0 .5rem 0}
.deck-actions{display:flex;gap:.5rem;align-items:center}
.button{background:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:.5rem .75rem;border-radius:10px;color:inherit;text-decoration:none;cursor:pointer}
.button.primary{background:linear-gradient(90deg,var(--accent),#4f46e5);border:none}
.button.danger{background:#6b0218;border:none}
/* .animate-wiggle{animation:wiggle 4s ease-in-out infinite}
@keyframes wiggle{
    0%{transform:rotate(-1deg)}
    50%{transform:rotate(1deg)}
    100%{transform:rotate(-1deg)}
} */

/* Study area */
#study-area{max-width:760px;margin:2rem auto;text-align:center}
.card-flip{width:100%;height:360px;max-width:560px;margin:0 auto;perspective:1200px;cursor:pointer}
.card-face{position:relative;width:100%;height:100%;border-radius:14px;padding:1.25rem;backface-visibility:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.7);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}
/* .card-front{transform:rotateY(0deg)} */
/* .card-back{transform:rotateY(180deg)} */
/* .card-back{transform:rotateY(180deg)} */
.card-flip.is-flipped .card-front{transform:rotateY(-180deg)}
.card-flip.is-flipped .card-back{transform:rotateX(0deg)}
.card-face, .card-back{transition:transform .6s cubic-bezier(.4,.2,.2,1)}
.card-media img{max-height:160px;max-width:100%;border-radius:8px;margin-bottom:0.75rem;object-fit:cover}
.card-text{font-size:1.25rem;line-height:1.3;color:#eaf2ff}
.controls{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}

.hint{color:var(--muted);margin-top:1rem}
.card {
  position: relative;
  perspective: 1000px;
}
.card-front, .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
  white-space: pre-wrap;
}