:root {
  color-scheme: light;
  --sky: oklch(0.91 0.075 210);
  --grass: oklch(0.77 0.13 143);
  --blanket: oklch(0.94 0.045 73);
  --blanket-check: oklch(0.87 0.075 37);
  --ink: oklch(0.31 0.06 49);
  --tomato: oklch(0.67 0.2 29);
  --sun: oklch(0.86 0.17 89);
  --blueberry: oklch(0.58 0.16 251);
  --leaf: oklch(0.58 0.14 145);
  --cream: oklch(0.985 0.012 82);
  --shadow: oklch(0.38 0.08 50 / 0.23);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 20rem;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 11% 16%, oklch(0.98 0.1 91) 0 3.4rem, transparent 3.5rem),
    linear-gradient(to bottom, var(--sky) 0 67%, var(--grass) 67%);
  font-family: "Trebuchet MS", ui-rounded, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-sm);
  min-height: 100dvh;
  padding:
    max(var(--space-sm), env(safe-area-inset-top))
    max(var(--space-sm), env(safe-area-inset-right))
    max(var(--space-sm), env(safe-area-inset-bottom))
    max(var(--space-sm), env(safe-area-inset-left));
  isolation: isolate;
}

#game[data-level="garden"] {
  --sky: oklch(0.9 0.08 185);
  --grass: oklch(0.75 0.15 130);
  --blanket: oklch(0.95 0.035 150);
  --blanket-check: oklch(0.84 0.09 170);
  --tomato: oklch(0.66 0.18 345);
  --sun: oklch(0.78 0.15 120);
  --blueberry: oklch(0.6 0.14 210);
  --leaf: oklch(0.56 0.14 132);
}

#game[data-level="berry"] {
  --sky: oklch(0.9 0.08 265);
  --grass: oklch(0.73 0.13 115);
  --blanket: oklch(0.94 0.035 325);
  --blanket-check: oklch(0.84 0.08 15);
  --tomato: oklch(0.61 0.18 24);
  --sun: oklch(0.79 0.13 55);
  --blueberry: oklch(0.54 0.15 285);
  --leaf: oklch(0.51 0.13 155);
}

.game-heading {
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.eyebrow {
  margin: 0;
  color: oklch(0.45 0.11 145);
  font-size: clamp(0.68rem, 2.4vw, 0.84rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: oklch(0.42 0.14 29);
  font-family: "Cooper Black", "Rockwell Extra Bold", ui-rounded, sans-serif;
  font-size: clamp(1.65rem, 6vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

#prompt {
  margin: var(--space-2xs) 0 0;
  font-size: clamp(0.9rem, 2.8vw, 1.15rem);
  font-weight: 800;
  line-height: 1.1;
}

.level-indicator {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-xs);
}

.level-dot {
  width: 0.86rem;
  height: 0.86rem;
  border: 0.12rem solid oklch(0.42 0.09 49);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0.12rem 0 var(--shadow);
}

.level-dot.is-active {
  background: var(--leaf);
  transform: scale(1.22);
}

.picnic-board {
  position: relative;
  display: grid;
  min-height: 0;
  overflow: hidden;
  border: 0.35rem solid oklch(0.68 0.12 29);
  border-radius: 2rem 1.1rem 2.2rem 1.4rem;
  background-color: var(--blanket);
  background-image:
    linear-gradient(45deg, var(--blanket-check) 25%, transparent 25% 75%, var(--blanket-check) 75%),
    linear-gradient(45deg, var(--blanket-check) 25%, transparent 25% 75%, var(--blanket-check) 75%);
  background-position: 0 0, 1.55rem 1.55rem;
  background-size: 3.1rem 3.1rem;
  box-shadow:
    0 0.55rem 0 var(--shadow),
    inset 0 0 0 0.22rem oklch(0.99 0.02 72 / 0.78);
}

.picnic-board::before,
.picnic-board::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.picnic-board::before {
  top: 46%;
  left: -1.5rem;
  width: 4.6rem;
  height: 2.3rem;
  border-radius: 55% 45% 48% 52%;
  background: var(--leaf);
  rotate: -23deg;
  opacity: 0.72;
}

.picnic-board::after {
  right: -0.7rem;
  bottom: -0.85rem;
  width: 5.2rem;
  height: 5.2rem;
  border: 0.65rem dotted oklch(0.69 0.14 89);
  border-radius: 50%;
  opacity: 0.62;
}

.shape-basket,
.plate-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  min-width: 0;
  min-height: 0;
  gap: clamp(var(--space-2xs), 1.4vw, var(--space-md));
  padding: clamp(var(--space-xs), 1.8vmin, var(--space-lg));
}

.shape-basket::after {
  position: absolute;
  right: 7%;
  bottom: -0.25rem;
  left: 7%;
  z-index: -1;
  height: 1.1rem;
  border-radius: 50%;
  background: oklch(0.48 0.09 44 / 0.16);
  filter: blur(0.3rem);
  content: "";
}

.shape-basket.is-dragging-piece {
  z-index: 10;
}

.shape-piece {
  position: relative;
  z-index: 3;
  display: grid;
  flex: 0 1 auto;
  width: clamp(5.8rem, 27vw, 10rem);
  height: clamp(5.8rem, 27vw, 10rem);
  place-items: center;
  min-inline-size: 5.5rem;
  min-block-size: 5.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 0.55rem 0 var(--shadow));
  transform-origin: center;
  transition:
    filter 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-user-select: none;
}

.shape-piece svg,
.picnic-plate svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.shape-piece .shape-fill {
  stroke: color-mix(in oklch, currentColor 75%, var(--ink));
  stroke-width: 6;
  stroke-linejoin: round;
}

.shape-circle {
  width: clamp(5.8rem, 27vw, 10rem);
  height: clamp(5.8rem, 27vw, 10rem);
  color: var(--tomato);
}

.shape-circle .shape-fill {
  fill: var(--tomato);
}

.shape-triangle {
  width: clamp(5.8rem, 27vw, 10rem);
  height: clamp(5.8rem, 27vw, 10rem);
  color: oklch(0.7 0.13 81);
}

.shape-triangle .shape-fill {
  fill: var(--sun);
}

.shape-square {
  width: clamp(5.8rem, 27vw, 10rem);
  height: clamp(5.8rem, 27vw, 10rem);
  color: var(--blueberry);
}

.shape-square .shape-fill {
  fill: var(--blueberry);
}

.shape-piece[data-shape="circle"],
.picnic-plate[data-shape="circle"] {
  color: var(--tomato);
}

.shape-piece[data-shape="triangle"],
.picnic-plate[data-shape="triangle"] {
  color: oklch(0.64 0.14 81);
}

.shape-piece[data-shape="square"],
.picnic-plate[data-shape="square"] {
  color: var(--blueberry);
}

.shape-piece[data-shape="star"],
.picnic-plate[data-shape="star"] {
  color: var(--sun);
}

.shape-piece[data-shape="heart"],
.picnic-plate[data-shape="heart"] {
  color: oklch(0.65 0.19 8);
}

.shape-piece[data-shape="diamond"],
.picnic-plate[data-shape="diamond"] {
  color: oklch(0.57 0.14 295);
}

.shape-piece[data-shape="oval"],
.picnic-plate[data-shape="oval"] {
  color: oklch(0.58 0.14 170);
}

.shape-piece[data-shape="rectangle"],
.picnic-plate[data-shape="rectangle"] {
  color: oklch(0.56 0.12 222);
}

.shape-piece[data-shape="moon"],
.picnic-plate[data-shape="moon"] {
  color: oklch(0.74 0.13 103);
}

.shape-piece[data-shape="pentagon"],
.picnic-plate[data-shape="pentagon"] {
  color: oklch(0.61 0.16 335);
}

.shape-piece[data-shape="hexagon"],
.picnic-plate[data-shape="hexagon"] {
  color: oklch(0.6 0.15 36);
}

.shape-piece[data-shape] .shape-fill {
  fill: currentColor;
}

.face {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
}

.face path {
  fill: none;
}

.shape-piece.is-dragging {
  z-index: 20;
  cursor: grabbing;
  filter: drop-shadow(0 1rem 0.45rem oklch(0.3 0.04 45 / 0.22));
}

.shape-piece:disabled {
  opacity: 1;
  cursor: default;
}

.shape-piece:focus-visible {
  outline: 0.35rem solid oklch(0.36 0.17 252);
  outline-offset: 0.24rem;
}

.picnic-plate {
  position: relative;
  display: grid;
  flex: 0 1 auto;
  place-items: center;
  width: clamp(6.2rem, 29vw, 10.7rem);
  height: clamp(6.2rem, 29vw, 10.7rem);
  min-inline-size: 5.5rem;
  min-block-size: 5.5rem;
  border-radius: 50%;
  background: oklch(0.985 0.015 76 / 0.88);
  box-shadow:
    0 0.38rem 0 oklch(0.45 0.06 57 / 0.2),
    inset 0 0 0 0.18rem oklch(0.99 0.02 76);
}

.picnic-plate .plate-art {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}

.plate-rim {
  fill: none;
  stroke: oklch(0.7 0.045 65);
  stroke-width: 5;
}

.plate-outline {
  fill: color-mix(in oklch, currentColor 10%, var(--cream));
  stroke: currentColor;
  stroke-width: 7;
  stroke-dasharray: 10 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plate-circle {
  color: oklch(0.59 0.15 29);
}

.plate-triangle {
  color: oklch(0.62 0.13 81);
}

.plate-square {
  color: oklch(0.51 0.13 251);
}

.placed-shape-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.placed-shape-layer > .shape-piece {
  position: absolute;
  width: 100%;
  height: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  filter: drop-shadow(0 0.24rem 0 oklch(0.34 0.05 48 / 0.18));
}

.picnic-plate.is-filled .plate-art {
  opacity: 0;
}

.celebration {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.celebration span {
  position: absolute;
  color: var(--sun);
  font-size: clamp(1.6rem, 7vmin, 4rem);
  opacity: 0;
  text-shadow: 0 0.16rem 0 oklch(0.37 0.08 48 / 0.18);
}

.celebration span:nth-child(1) {
  top: 15%;
  left: 8%;
  color: var(--tomato);
}

.celebration span:nth-child(2) {
  top: 42%;
  left: 4%;
  color: var(--blueberry);
}

.celebration span:nth-child(3) {
  top: 12%;
  right: 10%;
  color: var(--leaf);
}

.celebration span:nth-child(4) {
  right: 5%;
  bottom: 18%;
  color: var(--tomato);
}

.celebration span:nth-child(5) {
  bottom: 10%;
  left: 48%;
}

.is-complete .celebration span {
  animation: picnic-pop 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-complete .celebration span:nth-child(2) {
  animation-delay: 70ms;
}

.is-complete .celebration span:nth-child(3) {
  animation-delay: 130ms;
}

.is-complete .celebration span:nth-child(4) {
  animation-delay: 190ms;
}

.is-complete .celebration span:nth-child(5) {
  animation-delay: 250ms;
}

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

.parent-leaf {
  position: absolute;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0.3rem;
  border: 0;
  border-radius: 50%;
  color: oklch(0.48 0.12 145);
  background: transparent;
  opacity: 0.55;
  touch-action: none;
}

.parent-leaf svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  pointer-events: none;
}

.parent-leaf-one {
  top: max(var(--space-xs), env(safe-area-inset-top));
  right: max(var(--space-xs), env(safe-area-inset-right));
  rotate: 18deg;
}

.parent-leaf-two {
  bottom: max(var(--space-xs), env(safe-area-inset-bottom));
  left: max(var(--space-xs), env(safe-area-inset-left));
  rotate: 198deg;
}

.parent-leaf.is-held {
  color: oklch(0.39 0.13 145);
  background: oklch(0.9 0.1 145 / 0.75);
  opacity: 1;
}

.parent-leaf:focus-visible,
.close-parent:focus-visible,
.restart-game:focus-visible,
.parent-playland-link:focus-visible,
.sound-setting:has(input:focus-visible) {
  outline: 0.24rem solid oklch(0.42 0.16 251);
  outline-offset: 0.16rem;
}

.parent-dialog {
  width: min(92vw, 31rem);
  max-height: min(88dvh, 42rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 1.5rem 0.85rem 1.6rem 1rem;
  color: var(--ink);
  background: transparent;
}

.parent-dialog::backdrop {
  background: oklch(0.23 0.035 49 / 0.62);
}

.parent-sheet {
  display: grid;
  gap: var(--space-lg);
  max-height: min(88dvh, 42rem);
  padding: clamp(var(--space-lg), 5vw, var(--space-xl));
  overflow-y: auto;
  border: 0.28rem solid oklch(0.65 0.1 29);
  border-radius: inherit;
  background:
    radial-gradient(circle at 93% 10%, oklch(0.9 0.12 89 / 0.55) 0 2.5rem, transparent 2.6rem),
    var(--cream);
  box-shadow: 0 0.75rem 0 oklch(0.24 0.04 49 / 0.28);
}

.parent-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.parent-heading p {
  margin: 0 0 var(--space-2xs);
  color: oklch(0.47 0.12 145);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-heading h2 {
  margin: 0;
  color: oklch(0.42 0.14 29);
  font-family: "Cooper Black", "Rockwell Extra Bold", ui-rounded, sans-serif;
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  line-height: 1;
}

.close-parent {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0.16rem solid oklch(0.62 0.08 48);
  border-radius: 50%;
  color: var(--ink);
  background: var(--blanket);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.parent-intro {
  max-width: 36ch;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.sound-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 4.6rem;
  padding: var(--space-sm) var(--space-md);
  border: 0.16rem solid oklch(0.72 0.055 55);
  border-radius: 1rem;
  background: oklch(0.96 0.04 89);
}

.sound-setting span {
  display: grid;
  gap: var(--space-2xs);
}

.sound-setting strong,
.sound-setting small {
  display: block;
}

.sound-setting small {
  color: oklch(0.45 0.05 49);
  font-weight: 700;
}

.sound-setting input {
  width: 2rem;
  height: 2rem;
  accent-color: var(--leaf);
}

.restart-game,
.parent-playland-link {
  display: grid;
  place-items: center;
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-md);
  border-radius: 1rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.restart-game {
  border: 0.18rem solid oklch(0.44 0.13 145);
  color: var(--cream);
  background: oklch(0.51 0.13 145);
}

.parent-playland-link {
  border: 0.16rem solid oklch(0.62 0.08 48);
  color: var(--ink);
  background: transparent;
}

@keyframes picnic-pop {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-12deg);
  }
  58%,
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@media (orientation: portrait) {
  .picnic-board {
    grid-template-rows: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .plate-row {
    align-items: start;
  }
}

@media (max-width: 30rem) and (orientation: portrait) {
  .shape-basket,
  .plate-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-content: center;
    justify-items: center;
    gap: clamp(0.25rem, 1vw, 0.5rem);
    padding: 0.35rem 0.25rem;
  }

  .shape-piece,
  .picnic-plate {
    width: min(100%, clamp(5.5rem, 24vw, 6.4rem));
    height: min(100%, clamp(5.5rem, 24vw, 6.4rem));
  }
}

@media (orientation: landscape) {
  #game {
    grid-template-rows: minmax(0, 1fr);
    padding-block: max(var(--space-xs), env(safe-area-inset-top));
  }

  .game-heading {
    position: absolute;
    top: max(var(--space-sm), env(safe-area-inset-top));
    left: 50%;
    z-index: 5;
    width: max-content;
    max-width: 44vw;
    padding: var(--space-xs) var(--space-md);
    border-radius: 0 0 1.2rem 1.2rem;
    background: var(--cream);
    box-shadow: 0 0.3rem 0 var(--shadow);
    transform: translateX(-50%);
  }

  .eyebrow {
    display: none;
  }

  h1 {
    font-size: clamp(1.3rem, 5vh, 2.15rem);
  }

  #prompt {
    margin-top: 0;
    font-size: clamp(0.72rem, 2.7vh, 1rem);
  }

  .picnic-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }

  .shape-piece {
    width: clamp(5.5rem, 24vh, 8.8rem);
    height: clamp(5.5rem, 24vh, 8.8rem);
  }

  .picnic-plate {
    width: clamp(5.8rem, 26vh, 9.4rem);
    height: clamp(5.8rem, 26vh, 9.4rem);
  }
}

@media (orientation: landscape) and (max-height: 25rem) {
  .picnic-board {
    border-width: 0.25rem;
    border-radius: 1.25rem 0.8rem 1.4rem 0.9rem;
  }

  .game-heading {
    padding-block: var(--space-2xs);
  }

  .shape-basket,
  .plate-row {
    padding: var(--space-sm);
  }
}

@media (max-width: 23rem) and (orientation: portrait) {
  #game {
    gap: var(--space-xs);
    padding-inline: var(--space-xs);
  }

  .picnic-board {
    border-width: 0.25rem;
  }

  .shape-basket,
  .plate-row {
    gap: 0.1rem;
    padding-inline: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}