/* Flashcard stage (used on Practice, the home demo and the guide unlock round). */

/* ---------- Flashcard stage ---------- */
.stage-wrap { width: min(100%, 470px); margin-inline: auto; }
.stage-cards { position: relative; padding: 0 18px 18px 0; }
.stack-back { position: absolute; top: 0; left: 0; right: 18px; bottom: 18px; border: 2.5px solid var(--indigo); border-radius: 24px; }
.stack-a { transform: translate(9px, 9px); background: var(--white); }
.stack-b { transform: translate(18px, 18px); background: var(--lilac-2); }

.swipe-card {
  position: relative; display: flex; flex-direction: column; min-height: 310px;
  background: var(--white); border: 2.5px solid var(--indigo); border-radius: 24px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform .22s ease, opacity .22s ease; z-index: 1;
}
.stage-cards:has(.stack-a[hidden]) .swipe-card { box-shadow: 9px 9px 0 var(--indigo); }
.swipe-card.is-dragging { transition: none; cursor: grabbing; }
.swipe-card.is-leaving { transition: transform .24s ease-in, opacity .24s ease-in; }
.swipe-card.is-entering { animation: card-in .2s ease-out; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.swipe-card:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 24px; }

.card-cover { height: 52px; flex: none; border-bottom: 2.5px solid var(--indigo); border-radius: 21px 21px 0 0; background-color: var(--indigo); background-size: cover; background-position: center; }
.cover-dots .card-cover { background-image: url("../img/covers/dots.svg"); }
.cover-stripes .card-cover { background-image: url("../img/covers/stripes.svg"); }
.cover-orbits .card-cover { background-image: url("../img/covers/orbits.svg"); }
.cover-waves .card-cover { background-image: url("../img/covers/waves.svg"); }
.cover-tiles .card-cover { background-image: url("../img/covers/tiles.svg"); }
.cover-night .card-cover { background-image: url("../img/covers/night.svg"); }

.card-body { flex: 1; display: grid; perspective: 1400px; }
.card-inner { display: grid; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.swipe-card.is-flipped .card-inner { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 22px 26px 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-height: 250px;
}
.face-back { transform: rotateY(180deg); }
.face-label { margin: 0; font: 700 .95rem var(--f-head); color: var(--muted); }
.face-text { margin: 0; font: 700 clamp(1.3rem, 3.6vw, 1.65rem)/1.28 var(--f-head); color: var(--ink); overflow-wrap: anywhere; }
.face-text.is-long { font-size: 1.2rem; font-weight: 650; }
.face-text.is-xlong { font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.face-hint { margin: auto 0 0; font-size: .92rem; color: var(--muted); }

.swipe-tag {
  position: absolute; top: 66px; z-index: 3; padding: 4px 14px; border: 2.5px solid; border-radius: 10px;
  font: 800 1.1rem var(--f-head); opacity: 0; pointer-events: none; background: var(--white);
}
.tag-yes { left: 18px; color: var(--ok); border-color: var(--ok); background: var(--ok-bg); transform: rotate(-8deg); }
.tag-no { right: 18px; color: var(--err); border-color: var(--err); background: var(--err-bg); transform: rotate(8deg); }

.answer-row { display: flex; gap: 10px; margin: 22px 18px 0 0; }
.btn-answer { flex: 1 1 0; min-width: 0; padding-inline: .6em; font-size: 1rem; gap: .45em; }
.btn-answer kbd { background: transparent; border-color: currentColor; color: inherit; font-size: .72rem; }
.btn-no { background: var(--white); color: var(--err); border-color: var(--err); }
.btn-no:hover:not(:disabled) { background: var(--err-bg); }
.btn-flip { background: var(--indigo); color: var(--paper); }
.btn-flip:hover { background: var(--indigo-hover); color: var(--paper); }
.btn-yes { background: var(--ok); color: var(--white); border-color: var(--ok); }
.btn-yes:hover:not(:disabled) { background: #0F5742; border-color: #0F5742; color: var(--white); }
.btn-answer:disabled { opacity: .45; cursor: not-allowed; }
.stage-hint { margin: 16px 18px 0 0; text-align: center; color: var(--muted); font-size: .95rem; min-height: 3.1em; }
@media (max-width: 480px), (hover: none) { .btn-answer kbd { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .swipe-card, .card-inner { transition: none !important; }
  .swipe-card.is-entering { animation: none; }
}

/* ---------- Home demo ---------- */
.hero-demo { width: 100%; }
.demo-fallback { border: 2.5px solid var(--indigo); border-radius: 24px; padding: 24px; background: var(--white); box-shadow: 9px 9px 0 var(--indigo); }
.demo-q { font: 700 1.4rem/1.3 var(--f-head); color: var(--ink); margin: 0 0 .6em; }
.demo-a { margin: 0; color: var(--muted); }
.js .demo-fallback { display: none; }
.demo-help { margin: 14px 18px 0 0; font-size: .95rem; color: var(--muted); text-align: center; }
.demo-done { background: var(--white); border: 2.5px solid var(--indigo); border-radius: 24px; box-shadow: 9px 9px 0 var(--indigo); padding: 24px 26px; margin: 0 18px 18px 0; }
.demo-done:focus { outline: none; }
.demo-done-title { font: 800 1.35rem/1.2 var(--f-head); color: var(--indigo); }

/* One small invitation to swipe, played once on the home page demo. */
@keyframes peek {
  0%, 100% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(16px) rotate(2.2deg); }
  60% { transform: translateX(-8px) rotate(-1.2deg); }
}
.swipe-card.is-entering.is-peeking { animation: card-in .2s ease-out, peek 1.1s ease-in-out .9s 1 both; }
@media (prefers-reduced-motion: reduce) { .swipe-card.is-entering.is-peeking { animation: none; } }