@import url('./tokens.css');

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/patrick-hand-400.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light only;
}

body {
  margin: 0;
  overflow: hidden;
  background-color: var(--color-bg);
  color: var(--color-text);
}

#field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-bg);
  background-image: url('../img/meadow-tile.svg'), var(--gradient-field);
  background-size: var(--size-meadow-tile), cover;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.spud {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  font: inherit;
  color: inherit;
}

.spud:focus {
  outline: none;
}

.spud:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
  border-radius: var(--radius-focus);
  z-index: var(--z-spud-held);
}

.spud.held {
  z-index: var(--z-spud-held);
}

.spud .shadow {
  position: absolute;
  left: 20%;
  bottom: 10%;
  width: 64%;
  height: 13%;
  border-radius: var(--radius-round);
  background: var(--color-ground-shadow);
  transform-origin: center center;
  pointer-events: none;
}

.spud .hopper {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  will-change: transform;
  overflow: visible;
}

.spud.flipped {
  z-index: var(--z-spud-open);
}

.spud .turn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-flip) var(--ease-flip);
}

.spud.flipped .turn {
  transform: rotateY(180deg);
}

.spud .face,
.spud .back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: visible;
}

.spud .face {
  display: block;
  width: 100%;
  height: 100%;
}

.spud .back {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

.spud .character-art {
  position: absolute;
  left: 50%;
  top: calc(100% - (100% * 944 / var(--char-fit-dim)));
  width: calc(100% * 1024 / var(--char-fit-dim));
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%) translateZ(0);
  transform-origin: 50% 92.1875%;
  pointer-events: none;
  clip-path: inset(
    calc(var(--char-bbox-top) / 1024 * 100%)
      calc(var(--char-clip-right) / 1024 * 100%)
      calc(var(--char-clip-bottom) / 1024 * 100%)
      calc(var(--char-bbox-left) / 1024 * 100%)
  );
}

.spud .note {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: var(--size-note-w);
  min-height: var(--size-note-min-h);
  padding: var(--space-note-pad);
  border-radius: var(--radius-note);
  background: linear-gradient(
    150deg,
    var(--color-note-from),
    var(--color-note-to)
  );
  color: var(--color-note-text);
  font-family: var(--font-note);
  font-size: var(--text-note);
  font-weight: var(--weight-note);
  line-height: var(--leading-note);
  letter-spacing: var(--tracking-note);
  text-wrap: balance;
  box-shadow: var(--shadow-note);
  transform: translate(-50%, -50%) rotate(-3deg);
}

.spud .note::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 36px;
  height: 11px;
  margin-left: -18px;
  background: var(--color-note-tape);
  transform: rotate(3deg);
}

.spud .note::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: var(--color-note-fold);
  border-left-color: var(--color-note-fold);
}

.spud.chosen {
  filter: var(--filter-winner);
}

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-confetti);
}

#confetti[hidden] {
  display: none;
}

#confetti i {
  position: absolute;
  width: 11px;
  height: 18px;
  border-radius: var(--radius-confetti);
  animation: fall var(--time) var(--ease-confetti) infinite;
}

#confetti i:nth-child(10n + 1) {
  background-color: var(--accent-1);
}

#confetti i:nth-child(10n + 2) {
  background-color: var(--accent-2);
}

#confetti i:nth-child(10n + 3) {
  background-color: var(--accent-3);
}

#confetti i:nth-child(10n + 4) {
  background-color: var(--accent-4);
}

#confetti i:nth-child(10n + 5) {
  background-color: var(--accent-5);
}

#confetti i:nth-child(10n + 6) {
  background-color: var(--accent-6);
}

#confetti i:nth-child(10n + 7) {
  background-color: var(--accent-7);
}

#confetti i:nth-child(10n + 8) {
  background-color: var(--accent-8);
}

#confetti i:nth-child(10n + 9) {
  background-color: var(--accent-9);
}

#confetti i:nth-child(10n + 10) {
  background-color: var(--accent-10);
}

#again {
  position: fixed;
  right: var(--space-fab-inset);
  bottom: var(--space-fab-inset);
  z-index: var(--z-fab);
  display: grid;
  width: var(--size-fab);
  height: var(--size-fab);
  place-items: center;
  padding: 0;
  border: var(--border-fab);
  border-radius: var(--radius-round);
  background: var(--color-button-bg);
  color: var(--color-button-icon);
  cursor: pointer;
  font: inherit;
}

#again[hidden] {
  display: none;
}

#again:focus {
  outline: none;
}

#again:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .spud .turn {
    transition: none;
  }
}