.study-shell {
  width: min(1200px, 94vw);
}

.study-controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.study-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.study-meta {
  margin: 0.7rem 0 0;
  color: var(--muted);
}

.study-stage-panel {
  display: grid;
  justify-items: center;
  align-items: center;
  min-height: min(72vh, 760px);
}

.flash-card {
  width: min(92vw, 560px);
  aspect-ratio: 5 / 7;
  height: auto;
  border: 0;
  background: transparent;
  border-radius: 22px;
  padding: 0;
  color: inherit;
  perspective: 1400px;
  display: block;
}

.flash-card:hover,
.flash-card:focus-visible {
  background: transparent;
}

.flash-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform 420ms ease;
}

.flash-card.is-flipped .flash-card-inner {
  transform: rotateY(180deg);
}

.flash-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  backface-visibility: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  padding: 1.3rem;
  text-align: center;
}

.flash-card-front {
  background: linear-gradient(155deg, #ffffff 0%, #f9f4eb 100%);
}

.flash-card-back {
  background: linear-gradient(160deg, #fffdf8 0%, #e8f6ef 100%);
  transform: rotateY(180deg);
}

.flash-card-text {
  width: 100%;
  max-width: 90%;
  font-size: clamp(1.8rem, 6.2vw, 4.1rem);
  line-height: 1.14;
  font-weight: 700;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
  hyphens: none;
}

.shape-visual {
  display: block;
  width: min(64vmin, 74%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #0d0d0d;
}

.shape-circle {
  border-radius: 50%;
}

.shape-square {
  border-radius: 8px;
}

.shape-triangle {
  width: 0;
  height: 0;
  aspect-ratio: auto;
  background: transparent;
  border-left: min(25vmin, 28vw) solid transparent;
  border-right: min(25vmin, 28vw) solid transparent;
  border-bottom: min(42vmin, 48vw) solid #0d0d0d;
}

.shape-star {
  background: #0d0d0d;
  clip-path: polygon(50% 0%, 61% 36%, 98% 36%, 68% 58%, 79% 93%, 50% 72%, 21% 93%, 32% 58%, 2% 36%, 39% 36%);
}

.shape-heart {
  background: #0d0d0d;
  clip-path: path("M50 90 C20 70 0 52 0 30 C0 12 14 0 30 0 C40 0 48 5 50 13 C52 5 60 0 70 0 C86 0 100 12 100 30 C100 52 80 70 50 90 Z");
}

.shape-diamond {
  transform: rotate(45deg);
  border-radius: 8px;
}

.shape-oval {
  border-radius: 50% / 38%;
}

.shape-rectangle {
  aspect-ratio: 6 / 4;
  border-radius: 8px;
}

.pattern-stripes {
  background: repeating-linear-gradient(
    90deg,
    #0d0d0d 0 22px,
    #ffffff 22px 44px
  );
  border: 6px solid #0d0d0d;
}

.pattern-dots {
  background:
    radial-gradient(circle at 22% 24%, #0d0d0d 18%, transparent 19%),
    radial-gradient(circle at 75% 30%, #0d0d0d 18%, transparent 19%),
    radial-gradient(circle at 44% 66%, #0d0d0d 18%, transparent 19%),
    radial-gradient(circle at 80% 78%, #0d0d0d 16%, transparent 17%),
    radial-gradient(circle at 15% 78%, #0d0d0d 16%, transparent 17%),
    #ffffff;
  border: 6px solid #0d0d0d;
}

.baby-theme .flash-card-front,
.baby-theme .flash-card-back {
  background: #fff;
  border-color: #1a1a1a;
}

.baby-theme .flash-card-text {
  color: #111;
  letter-spacing: 0.02em;
}

.study-hint {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.study-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hidden {
  display: none;
}

.study-progress,
.study-score {
  margin: 0.8rem 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.93rem;
}

.study-score {
  color: #0c7057;
  font-weight: 600;
}

@media (max-width: 760px) {
  .study-controls-grid {
    grid-template-columns: 1fr;
  }

  .flash-card {
    width: min(94vw, 500px);
  }

  .flash-card-text {
    font-size: clamp(1.6rem, 7.8vw, 3.4rem);
  }

  .shape-visual {
    width: min(72vw, 78%);
  }
}