/* ===========================================================================
   "Curiouser and curiouser" Wonderland theme — Danish verb flashcards
   =========================================================================== */
:root {
  --wl-bg1:         #241b3a;
  --wl-bg2:         #16331f;
  --wl-purple:      #6b3fa0;
  --wl-purple-light:#a983d1;
  --wl-purple-dark: #3a2459;
  --wl-green:       #3f8f4f;
  --wl-green-light: #7ed957;
  --wl-gold:        #d4af37;
  --wl-gold-light:  #f0d27a;
  --wl-cream:       #fbf3e3;
  --wl-ink:         #2a1f3d;
  --wl-red:         #b6294a;
  --wl-red-dark:    #8c1d39;
  --wl-shadow:      0 10px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Quicksand', system-ui, sans-serif;
  color: var(--wl-cream);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(169,131,209,.35), transparent 65%),
    radial-gradient(circle at 50% 115%, rgba(0,0,0,.65), transparent 65%),
    linear-gradient(160deg, var(--wl-bg1), var(--wl-bg2));
  position: relative;
  overflow-x: hidden;
}

/* ---------- Floating playing-card / rabbit-hole background ---------- */
.wl-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wl-card { position: absolute; font-family: Georgia, 'Times New Roman', serif; animation: wl-float 9s ease-in-out infinite; }
.wl-c1 { top: 6%;  left: 5%;  font-size: 3.6rem; color: rgba(212,175,55,.14); --r: -14deg; animation-delay: 0s; }
.wl-c2 { top: 14%; left: 84%; font-size: 4.6rem; color: rgba(182,41,74,.16);  --r: 10deg;  animation-delay: 1.1s; }
.wl-c3 { top: 52%; left: 90%; font-size: 3.2rem; color: rgba(212,175,55,.12); --r: 6deg;   animation-delay: 2.3s; }
.wl-c4 { top: 70%; left: 3%;  font-size: 5rem;   color: rgba(182,41,74,.13);  --r: -8deg;  animation-delay: .6s; }
.wl-c5 { top: 36%; left: 45%; font-size: 6.4rem; color: rgba(255,255,255,.05); --r: 4deg;  animation-delay: 1.8s; }
.wl-c6 { top: 86%; left: 62%; font-size: 3.4rem; color: rgba(212,175,55,.12); --r: -6deg;  animation-delay: 3s; }
@keyframes wl-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-20px) rotate(var(--r, 0deg)); }
}

/* ---------- Back-to-overview link ---------- */
.dsg-home {
  position: fixed; top: 14px; right: 14px; z-index: 999999;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20,10,30,.62); color: #fff; text-decoration: none;
  font: 700 .85rem 'Quicksand', system-ui, sans-serif;
  padding: 9px 16px; border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease;
}
.dsg-home:hover { transform: translateY(-2px); background: rgba(20,10,30,.85); }

.app-container {
  position: relative; z-index: 1;
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, var(--wl-purple-dark), #1c1230);
  color: var(--wl-gold-light);
  width: 260px;
  padding: 1.2rem;
  overflow-y: auto;
  border-right: 3px solid var(--wl-gold);
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
}

.sidebar h2 {
  margin-top: 0;
  font-family: 'Pacifico', cursive;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--wl-gold);
  border-bottom: 1px dashed rgba(212,175,55,.4);
  padding-bottom: .6rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

#verb-list { list-style: none; margin: 0; padding: 0; }

#verb-list li {
  padding: .55rem .6rem;
  margin-bottom: .35rem;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.03);
  transition: background .2s ease;
}

#verb-list li.now {
  background: linear-gradient(90deg, var(--wl-purple), var(--wl-purple-light));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(169,131,209,.5);
}

#verb-list li.next { background: rgba(169,131,209,.22); }

#verb-list li.completed.correct { background: rgba(63,143,79,.45); color: #dff7e0; }
#verb-list li.completed.wrong   { background: rgba(182,41,74,.4);  color: #ffe0e6; }

#verb-list li span.status { font-size: .78rem; font-style: italic; opacity: .85; }

/* ---------- Main content ---------- */
.main-content {
  flex: 1;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.wl-title {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.1rem;
  margin: .2rem 0 1.2rem;
  color: var(--wl-gold-light);
  text-shadow: 0 3px 14px rgba(0,0,0,.5);
  text-align: center;
}

.scoreboard {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.4rem;
  background: rgba(251,243,227,.94);
  border: 2px solid var(--wl-gold);
  padding: .7rem 1.1rem;
  border-radius: 14px;
  color: var(--wl-ink);
  box-shadow: var(--wl-shadow);
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(58,36,89,.25);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .6rem;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--wl-green), var(--wl-gold));
  border-radius: 999px;
  transition: width .3s;
}

.score-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.progress-info span, .score-info span { margin-right: 1rem; font-weight: 700; font-size: .92rem; }

/* ---------- Card ---------- */
.card-wrapper {
  position: relative;
  width: 340px;
  height: 260px;
  perspective: 1200px;
  margin-bottom: 1.3rem;
}

.flashcard {
  width: 100%; height: 100%;
  transition: transform .6s;
  transform-style: preserve-3d;
  position: absolute;
  cursor: pointer;
}

.flashcard.is-flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  border: 3px solid var(--wl-gold);
}

.card-front {
  background:
    radial-gradient(circle at 12% 12%, rgba(182,41,74,.18), transparent 40%),
    radial-gradient(circle at 88% 88%, rgba(63,143,79,.18), transparent 40%),
    var(--wl-cream);
  color: var(--wl-ink);
  font-size: 1.55rem;
  font-family: 'Pacifico', cursive;
  text-align: center;
  position: relative;
}
.card-front::before { content: "♠"; position: absolute; top: 10px; left: 14px; font-size: 1rem; opacity: .35; font-family: Georgia, serif; }
.card-front::after  { content: "♠"; position: absolute; bottom: 10px; right: 14px; font-size: 1rem; opacity: .35; font-family: Georgia, serif; transform: rotate(180deg); }

.card-back {
  background: linear-gradient(160deg, var(--wl-purple-dark), #20142e);
  color: var(--wl-gold-light);
  transform: rotateY(180deg);
  font-size: .95rem;
  text-align: left;
  justify-content: center;
}

.card-back p { margin: .22rem 0; line-height: 1.3; }

.card-back .example {
  margin-top: .55rem;
  font-style: italic;
  font-size: .92rem;
  color: var(--wl-cream);
}

.card-back .example-en {
  font-size: .78rem;
  opacity: .75;
  font-style: normal;
}

/* ---------- Speaker buttons (Danish text-to-speech) ---------- */
.infinitive-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.example-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ---------- Buttons ---------- */
.action-buttons { display: flex; gap: 1.1rem; margin-bottom: 1.2rem; }

.action-buttons button {
  padding: .65rem 1.4rem;
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--wl-gold);
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  transition: transform .15s ease, box-shadow .15s ease, background .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.action-buttons button:hover { transform: translateY(-2px); }
.action-buttons button.disabled { opacity: .45; cursor: default; pointer-events: none; transform: none; }

.action-buttons button.wrong { background: linear-gradient(180deg, var(--wl-red), var(--wl-red-dark)); }
.action-buttons button.wrong:hover { background: linear-gradient(180deg, #c8344f, var(--wl-red-dark)); }

.action-buttons button.right { background: linear-gradient(180deg, var(--wl-green-light), var(--wl-green)); }
.action-buttons button.right:hover { background: linear-gradient(180deg, #93e96c, var(--wl-green)); }

.restart { margin-top: 2rem; }

.restart button {
  padding: .5rem 1.1rem;
  font-size: .92rem;
  font-weight: 700;
  border: 2px solid var(--wl-gold);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--wl-gold-light);
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  transition: background .25s ease, transform .15s ease;
}
.restart button:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

/* ---------- Review Mistakes button ---------- */
.review-mistakes-wrap { margin-top: .55rem; }

.review-mistakes-btn {
  padding: .5rem 1.2rem;
  font-size: .92rem;
  font-weight: 700;
  border: 2px solid var(--wl-red);
  border-radius: 999px;
  background: rgba(182,41,74,.15);
  color: var(--wl-red);
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  transition: background .25s ease, color .25s ease, transform .15s ease, opacity .2s ease;
}
.review-mistakes-btn:not(:disabled):hover {
  background: linear-gradient(180deg, var(--wl-red), var(--wl-red-dark));
  color: #fff;
  border-color: var(--wl-red-dark);
  transform: translateY(-1px);
}
.review-mistakes-btn:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ---------- Review Mode banner ---------- */
.review-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(90deg, var(--wl-red-dark), var(--wl-red));
  border: 2px solid var(--wl-red);
  border-radius: 12px;
  padding: .5rem 1rem;
  margin-bottom: .7rem;
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 4px 18px rgba(182,41,74,.45);
}

.review-mode-banner span { flex: 1; }

#exit-review-btn {
  padding: .3rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  font-family: 'Quicksand', sans-serif;
  white-space: nowrap;
  transition: background .2s ease, transform .15s ease;
}
#exit-review-btn:hover { background: rgba(255,255,255,.35); transform: translateY(-1px); }

@media (max-width: 760px) {
  .app-container { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 3px solid var(--wl-gold); max-height: 220px; }
  .card-wrapper { width: 90vw; max-width: 320px; }
}