:root {
  --color-background-darker: hsl(37, 45%, 85%);
  --color-background-light: hsl(38, 44%, 99%);
  --color-background-lightest: hsl(38, 44%, 100%);
  --color-background-negative: hsl(10, 44%, 90%);
  --color-background-neutral: hsl(38, 44%, 90%);
  --color-background-positive: hsl(126, 44%, 90%);
  --color-background: hsl(38, 44%, 96%);
  --color-shadow: hsla(38, 30%, 70%, 0.4);
  --color-text: hsl(0, 0%, 14%);
  --color-yellow: hsl(38, 95%, 66%);
  --size-2x: 1.5rem;
  --size-3x: 2.25rem;
  --size-4x: 3rem;
  --size-base: 0.75rem;
  --size-half: 0.375rem;
  --shadow-default: 0.3px 0.5px 0.7px var(--color-shadow), 0.8px 1.6px 2px -0.8px var(--color-shadow),
    2.1px 4.1px 5.2px -1.7px var(--color-shadow), 5px 10px 12.6px -2.5px var(--color-shadow);
}

*,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100dvh;
  max-height: 100dvh;
}

body {
  background-color: var(--color-background);
  background-image: radial-gradient(var(--color-background-darker) 5%, transparent 0);
  background-size: 2.4rem 2.4rem;
  color: var(--color-text);
  font-family: 'ABeeZee', sans-serif;
}

[hidden],
[v-cloak] {
  display: none !important;
}

img {
  width: 100%;
  height: auto;
}

button {
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: var(--size-base);
  transition: all 0.15s ease-out;
}

ul {
  list-style: none;
}

textarea {
  --webkit-tap-highlight-color: transparent;
  border-radius: var(--size-base);
  border: 1px solid var(--color-background-darker);
  box-shadow: none;
  font-family: inherit;
  font-size: 1.25rem;
  outline: none;
  padding: var(--size-base);
  width: 100%;
}

textarea {
  field-sizing: content;
  line-height: 1.4;
  min-height: 4rem;
  resize: none;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--size-base);
}

.container {
  gap: 0;
  height: 100dvh;
  justify-content: space-between;
  margin: 0 auto;
  max-width: calc(100dvh * 63 / 88);
  padding: var(--size-base) 0;
  width: 100vw;
  view-transition-name: container;
}

.cards {
  display: flex;
  flex-grow: 1;
  gap: var(--size-4x);
  margin: 0 auto;
  mask-image: linear-gradient(to right, transparent, white 2%, white 98%, transparent 100%);
  max-width: inherit;
  overflow: auto;
  perspective: 30rem;
  scroll-snap-type: x mandatory;
  width: inherit;
}

.cards::-webkit-scrollbar {
  display: none;
}

.cards > li {
  height: 100%;
  max-width: inherit;
  padding: var(--size-base) var(--size-base) var(--size-2x) var(--size-base);
  scroll-snap-align: center;
  width: inherit;
}

.card {
  aspect-ratio: 63 / 88;
  max-height: 100%;
  max-width: 100%;
  opacity: 1;
  perspective: 30rem;
  position: relative;
  width: inherit;
}

.card > .inner {
  border-radius: var(--size-2x);
  box-shadow: var(--shadow-default);
  transform-style: preserve-3d;
  transition: transform 0.3s ease-in-out;
  height: 100%;
}

.card.flipped > .inner {
  --shadow-default: -0.3px 0.5px 0.7px var(--color-shadow), -0.8px 1.6px 2px -0.8px var(--color-shadow),
    -2.1px 4.1px 5.2px -1.7px var(--color-shadow), -5px 10px 12.6px -2.5px var(--color-shadow);
  transform: rotateY(180deg);
}

.card > div > div {
  align-items: center;
  backface-visibility: hidden;
  background-color: var(--color-background-light);
  border-radius: inherit;
  border: var(--size-half) solid var(--color-background-lightest);
  font-size: 12cqh;
  font-weight: 500;
  gap: var(--size-half);
  height: 100%;
  justify-content: center;
  letter-spacing: 0.03rem;
  line-height: 1.1;
  overflow: hidden;
  padding: var(--size-base);
  position: absolute;
  text-align: center;
  text-wrap: balance;
  width: 100%;
}

.back {
  transform: rotateY(180deg);
}

.controls {
  align-items: center;
  display: flex;
  gap: var(--size-base);
  justify-content: space-between;
  padding: 0 var(--size-base);
}

.controls > div {
  display: flex;
  gap: var(--size-base);
}

.decks {
  --rows: 2;
  display: grid;
  gap: var(--size-base);
  grid-template-columns: repeat(var(--rows), minmax(0, 1fr));
  list-style: none;
  padding: var(--size-base);
}

.decks > li {
  position: relative;
  transition: all 0.15s ease-out;
}

.remove {
  color: var(--color-background-darker);
  font-size: 2rem;
  right: 0;
  line-height: 0;
  padding: var(--size-base);
  position: absolute;
  top: 0;
}

.remove > .icon {
  height: 1.4rem;
  stroke-width: 3;
  width: 1.4rem;
}

.remove:hover,
.remove:focus {
  color: inherit;
}

.deck {
  align-items: center;
  aspect-ratio: 66 / 88;
  background-color: var(--color-background-lightest);
  border-radius: var(--size-2x);
  box-shadow: var(--shadow-default);
  color: inherit;
  font-size: clamp(1.25rem, 3cqw, 3rem);
  justify-content: center;
  overflow: hidden;
  padding: var(--size-base);
  width: 100%;
}

.deck-add {
  background-color: transparent;
  border: 4px dashed var(--color-background-darker);
  box-shadow: none;
  color: var(--color-background-darker);
  font-weight: 700;
}

.deck-add > .icon {
  height: 4rem;
  stroke-width: 4;
  width: 4rem;
}

.squircle {
  align-items: center;
  color: inherit;
  aspect-ratio: 1;
  display: grid;
  font-weight: bold;
  justify-content: center;
  padding: 0;
  text-align: center;
  width: 4rem;
}

.squircle > * {
  grid-area: 1 / 1;
}

.squircle > svg {
  fill: var(--bg);
  width: inherit;
}

.icon {
  fill: none;
  height: var(--size-3x);
  stroke-linecap: round;
  stroke-width: 2;
  stroke: currentColor;
  width: var(--size-3x);
}

.decks > li:hover,
.decks > li:focus,
button.squircle:hover,
button.squircle:focus {
  scale: 1.03;
}

.decks > li:active,
button.squircle:active {
  scale: 0.95;
}

.positive {
  --bg: var(--color-background-positive);
}

.negative {
  --bg: var(--color-background-negative);
}

.neutral {
  --bg: var(--color-background-neutral);
}

[popover] {
  background-color: var(--color-background-lightest);
  border-radius: var(--size-base);
  border: none;
  box-shadow: var(--shadow-default);
  font: inherit;
  height: 100%;
  margin: var(--size-base) auto;
  max-height: calc(100dvh - var(--size-2x));
  max-width: 40rem;
  padding: var(--size-base) 0;
  width: calc(100% - var(--size-2x));
}

[popover] .stack {
  height: 100%;
}

[popover] h3 {
  padding: 0 var(--size-base);
}

[popover] textarea {
  border: none;
  flex: 1;
}

[popover]::backdrop {
  backdrop-filter: blur(4px);
  background: hsl(0 0% 0% / 0.15);
}

[popover] .remove {
  color: inherit;
}

html:has([popover]:popover-open) {
  overflow: hidden;
}

@keyframes cardInOut {
  0% {
    transform: scale(0.8) perspective(30rem) rotate(6deg) rotateY(20deg);
  }
  50% {
    opacity: 1;
    transform: rotate(0deg);
  }
  90% {
    opacity: 1;
    transform: translate3d(90%, 0%, 0%) scale(0.8) perspective(30rem) rotate(-6deg) rotateY(-20deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(100%, 10%, 0) scale(0.8) rotate(-3deg) rotateY(0);
  }
}

@media (min-width: 40rem) {
  .decks {
    --rows: 4;
  }
}

@media screen and (orientation: landscape) and (max-width: 56rem) and (max-height: 27rem) {
  .container {
    flex-direction: row;
    max-width: 100%;
  }

  .cards > li {
    padding: var(--size-base);
  }

  .controls,
  .controls > div {
    flex-direction: column;
  }

  .card {
    aspect-ratio: 88 / 63;
  }
}

@keyframes scale-out {
  to {
    scale: 0;
  }
}

@keyframes scale-in {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

::view-transition-old([class^='deck_']) {
  animation: 0.15s ease-in both scale-out;
}

::view-transition-old(container) {
  animation: 0.15s ease-in both scale-out;
}

::view-transition-new(container) {
  animation: 0.15s ease-in both scale-in;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view(x)) {
    .card {
      animation: cardInOut ease-in-out both;
      animation-timeline: view(x);
    }
  }
}