@import url("https://fonts.googleapis.com/css2?family=Amita:wght@700&family=Montserrat:wght@600&display=swap");

:root {
  --playground-dot-size: 40.32px;
  --playground-purple: #aa00ff;
  --playground-border: #dadada;
  --playground-shadow: color-mix(in srgb, var(--brand-ink) 15%, transparent);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--brand-white);
  color: var(--brand-ink);
  font-family: var(--brand-font);
  overscroll-behavior: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.playground {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--brand-white);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.playground.is-dragging {
  cursor: grabbing;
}

.playground:focus {
  outline: none;
}

.playground__grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("../assets/playground/dot-background.png");
  background-position: top left;
  background-size: var(--playground-dot-size) var(--playground-dot-size);
  pointer-events: none;
  will-change: background-position, background-size;
}

.playground__world {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.playground__back {
  position: absolute;
  z-index: 4;
  top: clamp(28px, 4.66vh, 41px);
  left: clamp(40px, 6.96vw, 117px);
  display: inline-flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  padding: 19px 31px;
  border: 1px solid var(--playground-border);
  border-radius: 63px;
  background: var(--brand-white);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.playground__back:hover {
  transform: scale(1.035);
  background: var(--brand-ink);
  color: var(--brand-white);
}

.playground__back:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 4px;
}

.playground__note {
  position: absolute;
  z-index: 4;
  top: clamp(28px, 4.66vh, 41px);
  right: clamp(40px, 6.96vw, 117px);
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--brand-ink);
  color: var(--brand-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease-out;
}

.playground__note svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease-out;
}

.playground__note:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .playground__note:hover {
    transform: translateY(-2px);
  }

  .playground__note:hover svg {
    transform: translate3d(2px, -2px, 0);
  }
}

.playground__glow {
  position: absolute;
  z-index: 1;
  top: calc(50% - 8.5px);
  left: 50%;
  width: min(76.2vw, 1280px);
  height: min(100.6vw, 885px);
  min-width: 960px;
  min-height: 664px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.playground__title {
  position: absolute;
  z-index: 2;
  top: calc(50% - 8px);
  left: 50%;
  width: max-content;
  transform: translate(-50%, -50%);
  text-align: center;
}

.playground__title p,
.playground__title h1 {
  margin: 0;
}

.playground__title p {
  color: var(--playground-purple);
  font-family: "Amita", cursive;
  font-size: 26px;
  font-weight: 700;
  line-height: 40px;
}

.playground__title h1 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.4px;
  text-transform: uppercase;
}

.playground__card {
  position: absolute;
  z-index: 3;
  width: clamp(320px, 21.61vw, 363px);
  aspect-ratio: 317 / 178;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--playground-border);
  border-radius: 24px;
  background: var(--brand-white);
  rotate: var(--card-rotation, 0deg);
  transform-origin: center;
  will-change: transform, translate;
  transition:
    transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 220ms ease;
}

.playground__card--catfolio {
  --card-rotation: -3.2deg;

  bottom: clamp(52px, 9.1vh, 80px);
  left: clamp(88px, 11.9vw, 200px);
}

.playground__card--hairy {
  --card-rotation: 1.8deg;

  top: clamp(150px, 18.75vh, 165px);
  left: clamp(72px, 8.45vw, 142px);
}

.playground__card--steamos {
  --card-rotation: 2.4deg;

  top: clamp(112px, 15.34vh, 135px);
  right: clamp(64px, 7.68vw, 129px);
}

.playground__card--catfill {
  --card-rotation: -1.4deg;

  right: clamp(64px, 16.13vw, 271px);
  bottom: clamp(48px, 10vh, 88px);
  aspect-ratio: 363 / 226;
}

.playground__card--linked {
  cursor: pointer;
}

.playground.is-dragging .playground__card--linked {
  cursor: grabbing;
}

.playground__card.is-card-dragging {
  z-index: 5;
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 18px 36px var(--playground-shadow);
  cursor: grabbing;
  transition-duration: 120ms;
}

.playground__card.is-card-gliding {
  z-index: 4;
  box-shadow: 0 12px 28px var(--playground-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .playground__card:hover {
    z-index: 4;
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 36px var(--playground-shadow);
  }
}

.playground__card--linked:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 4px;
}

.playground__preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playground__send {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
}

.playground__sticker-shell {
  --sticker-fill: 0.76;

  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(215px, 15.5vw, 260px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  transform-origin: center;
  will-change: transform, translate;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.playground__sticker--cat-pencil {
  top: calc(50% - 35px);
  left: calc(50% - 360px);
  aspect-ratio: 846 / 802;
  rotate: -8deg;
}

.playground__sticker--book {
  --sticker-fill: 0.8;

  top: calc(50% + 105px);
  left: calc(50% - 105px);
  width: clamp(180px, 12.5vw, 210px);
  aspect-ratio: 774 / 529;
  rotate: 6deg;
}

.playground__sticker--device {
  --sticker-fill: 0.8;

  top: calc(50% - 205px);
  left: calc(50% - 95px);
  width: clamp(165px, 11.3vw, 190px);
  aspect-ratio: 659 / 374;
  rotate: -5deg;
}

.playground__sticker-fallback,
.playground__sticker-forge {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.playground__sticker-fallback {
  inset: auto;
  top: 50%;
  left: 50%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px var(--playground-shadow));
  opacity: 1;
  transform: translate(-50%, -50%) scale(var(--sticker-fill));
}

.playground__sticker-forge {
  min-width: 0;
  min-height: 0;
  opacity: 0;
}

.playground__sticker-shell.is-forge-playing .playground__sticker-fallback {
  opacity: 0;
}

.playground__sticker-shell.is-forge-playing .playground__sticker-forge {
  opacity: 1;
}

.playground__sticker-shell.is-forge-fallback .playground__sticker-fallback {
  opacity: 1;
}

.playground__sticker-shell.is-card-dragging {
  z-index: 6;
  cursor: grabbing;
  transform: translateY(-8px) scale(1.065) rotate(2deg);
  transition-duration: 120ms;
}

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

@media (hover: hover) and (pointer: fine) {
  .playground__sticker-shell:not(.is-card-dragging):hover {
    transform: scale(1.025);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  :root {
    --playground-dot-size: 32px;
  }

  .playground {
    min-height: 100svh;
  }

  .playground__back {
    top: 20px;
    left: 20px;
    min-height: 48px;
    padding: 13px 20px;
    font-size: 19px;
  }

  .playground__note {
    top: 20px;
    right: 20px;
    min-height: 48px;
    padding: 13px 15px;
    font-size: 12px;
  }

  .playground__glow {
    top: 42%;
    min-width: 760px;
    min-height: 526px;
  }

  .playground__title {
    top: 40%;
  }

  .playground__title p {
    font-size: 21px;
    line-height: 32px;
  }

  .playground__title h1 {
    font-size: clamp(34px, 10vw, 42px);
  }

  .playground__card {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(calc(100vw - 40px), 350px);
    max-width: none;
    margin: 0;
    border-radius: 20px;
  }

  .playground__card--catfolio {
    top: calc(100svh - 230px);
    left: 20px;
  }

  .playground__card--hairy {
    top: 120px;
    left: -250px;
  }

  .playground__card--steamos {
    top: 100px;
    left: calc(100vw - 120px);
  }

  .playground__card--catfill {
    top: calc(100svh - 270px);
    left: calc(100vw + 40px);
  }

  .playground__sticker--cat-pencil {
    top: calc(40% + 72px);
    left: calc(50% - 250px);
    width: 190px;
  }

  .playground__sticker--book {
    top: calc(40% - 140px);
    left: calc(50% + 70px);
    width: 168px;
  }

  .playground__sticker--device {
    top: calc(40% + 220px);
    left: calc(50% - 290px);
    width: 165px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .playground__back,
  .playground__note,
  .playground__note svg,
  .playground__card,
  .playground__sticker-shell {
    transition: none;
  }
}