:root {
  /* Google Sans is proprietary and not served by Google Fonts, so it is used
     when it happens to be installed locally and DM Sans (its closest freely
     licensed match) is loaded as the fallback. */
  --font-sans:
    "Google Sans", "Google Sans Text", "Product Sans", "DM Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --bg: #0f172a;
  --bg-glow: #1e293b;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --ink: #0f172a;
  --ink-soft: #64748b;
  --line: #e2e8f0;
  --accent: #6d5ce7;
  --accent-soft: #eeebff;
  --radius: 18px;
  --shadow: 0 18px 40px -24px rgb(15 23 42 / 45%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px 56px;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(1000px 520px at 50% -10%, var(--bg-glow), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #101a33 320px, var(--surface-alt) 320px);
  background-attachment: fixed;
}

.app {
  max-width: 620px;
  margin: 0 auto;
}

.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  color: #f8fafc;
}

.header__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.header__count {
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #e2e8f0;
  white-space: nowrap;
  background: rgb(255 255 255 / 12%);
  border-radius: 999px;
}

/* 3D stage: the deck owns the perspective so the card and the stacked
   layers behind it all live in the same 3D space. */
.deck {
  position: relative;
  min-height: 260px;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
  animation: deck-float 7s ease-in-out infinite;
}

.deck__layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #ffffff 0%, #eef0f8 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px -22px rgb(15 23 42 / 40%);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.deck__layer--near {
  transform: translate3d(0, 12px, -34px) rotateZ(-2.6deg);
}

.deck__layer--far {
  transform: translate3d(0, 24px, -70px) rotateZ(3.8deg);
  opacity: 0.72;
}

/* Only show the stack when there is actually more than one card behind it. */
.deck:not(.has-stack) .deck__layer {
  opacity: 0;
  transform: translate3d(0, 0, -10px);
}

.card {
  position: absolute;
  inset: 0;
  cursor: pointer;
  border-radius: var(--radius);
  transform-style: preserve-3d;
}

.card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* Tilt lives on its own layer so it can never fight the flip transform. */
.card__tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

.deck.is-tilting .card__tilt {
  transition: transform 0.08s linear;
}

.card__inner {
  position: absolute;
  inset: 0;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
  transform-style: preserve-3d;
}

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

.card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
}

.card__face--back {
  background: linear-gradient(160deg, #ffffff 0%, var(--accent-soft) 100%);
  transform: rotateY(180deg);
}

/* Light glare that follows the cursor, which is what actually sells the tilt. */
.card__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    50% 45% at var(--glare-x, 50%) var(--glare-y, 0%),
    rgb(255 255 255 / 85%),
    rgb(255 255 255 / 0%) 70%
  );
  opacity: var(--glare-opacity, 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.card__text {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(19px, 4vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.card__hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* 3D motion: idle float, navigation slides, shuffle riffle, new-card drop */
@keyframes deck-float {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg);
  }
  50% {
    transform: translateY(-6px) rotateX(1.2deg);
  }
}

@keyframes card-enter-right {
  from {
    transform: translate3d(55%, 0, -220px) rotateY(-38deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes card-enter-left {
  from {
    transform: translate3d(-55%, 0, -220px) rotateY(38deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes card-drop-in {
  from {
    transform: translate3d(0, -60px, 260px) rotateX(24deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes card-riffle {
  0% {
    transform: none;
  }
  30% {
    transform: translate3d(-16%, -10px, -90px) rotateZ(-9deg) rotateY(14deg);
  }
  62% {
    transform: translate3d(14%, 6px, -50px) rotateZ(7deg) rotateY(-11deg);
  }
  100% {
    transform: none;
  }
}

@keyframes layer-riffle-near {
  0% {
    transform: translate3d(0, 12px, -34px) rotateZ(-2.6deg);
  }
  35% {
    transform: translate3d(22%, 2px, -74px) rotateZ(13deg);
  }
  70% {
    transform: translate3d(-12%, 14px, -48px) rotateZ(-8deg);
  }
  100% {
    transform: translate3d(0, 12px, -34px) rotateZ(-2.6deg);
  }
}

@keyframes layer-riffle-far {
  0% {
    transform: translate3d(0, 24px, -70px) rotateZ(3.8deg);
  }
  40% {
    transform: translate3d(-24%, 10px, -110px) rotateZ(-15deg);
  }
  75% {
    transform: translate3d(16%, 28px, -84px) rotateZ(9deg);
  }
  100% {
    transform: translate3d(0, 24px, -70px) rotateZ(3.8deg);
  }
}

.card.is-entering-right {
  animation: card-enter-right 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.card.is-entering-left {
  animation: card-enter-left 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.card.is-dropping-in {
  animation: card-drop-in 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.deck.is-shuffling .card {
  animation: card-riffle 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.deck.is-shuffling .deck__layer--near {
  animation: layer-riffle-near 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.deck.is-shuffling .deck__layer--far {
  animation: layer-riffle-far 0.7s cubic-bezier(0.4, 0.1, 0.2, 1);
}

.deck.is-empty {
  min-height: 0;
  animation: none;
}

.empty {
  margin: 0;
  padding: 56px 28px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Controls */
.controls,
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.actions {
  margin-top: 12px;
  flex-wrap: wrap;
}

.counter {
  min-width: 116px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: var(--ink-soft);
}

.btn {
  padding: 10px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--icon {
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1;
}

.btn--ghost {
  color: var(--ink-soft);
  background: transparent;
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  color: #b4213c;
  border-color: #f3c8d1;
  background: #fff5f7;
}

.btn--primary {
  align-self: flex-start;
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.btn--primary:hover:not(:disabled) {
  background: #5b4bd6;
}

/* Add card form */
.add-card {
  margin-top: 36px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -26px rgb(15 23 42 / 40%);
}

.add-card__title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

form {
  display: flex;
  flex-direction: column;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

input {
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
}

input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-message {
  margin: 0 0 14px;
  min-height: 18px;
  font-size: 13px;
  color: var(--accent);
}

.footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}

.footer p {
  margin: 0;
}

@media (max-width: 480px) {
  body {
    padding: 28px 14px 40px;
    background:
      radial-gradient(700px 400px at 50% -10%, var(--bg-glow), transparent 70%),
      linear-gradient(180deg, var(--bg) 0%, #101a33 250px, var(--surface-alt) 250px);
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .deck {
    min-height: 240px;
    perspective: 900px;
  }

  .actions .btn {
    flex: 1 1 auto;
  }

  .btn--primary {
    align-self: stretch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card__inner,
  .card__tilt,
  .deck__layer,
  .card__face::after,
  .btn {
    transition: none;
  }

  .deck,
  .deck.is-shuffling .card,
  .deck.is-shuffling .deck__layer--near,
  .deck.is-shuffling .deck__layer--far,
  .card.is-entering-right,
  .card.is-entering-left,
  .card.is-dropping-in {
    animation: none;
  }

  /* The flip still needs to communicate the state change, just instantly. */
  .card__tilt {
    transform: none;
  }
}