/* Squishy Lab. Pazu's family look (bubblegum polka dots, a wooden craft table,
   tools with faces) in our own palette. The toy is the one loud thing on the
   screen; everything around it stays quiet. */

:root {
  --bubblegum: #FFD3E4;
  --dot: #FFBFD8;
  --wood: #EBC594;
  --grain: #DFB27E;
  --wood-edge: #C98F5A;
  --plum: #4B2C45;
  --pop: #FF4F9A;
  --pop-deep: #C9337A;
  --mint: #4FD1B0;
  --paper: #FFFFFF;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  position: fixed; inset: 0;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color: var(--plum);
  background:
    radial-gradient(var(--dot) 17%, transparent 18%) 0 0 / 46px 46px,
    radial-gradient(var(--dot) 17%, transparent 18%) 23px 23px / 46px 46px,
    var(--bubblegum);
}
section { position: absolute; inset: 0; }
[hidden] { display: none !important; }
button { font: inherit; border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 4px solid var(--plum); outline-offset: 4px; }
svg { display: block; width: 100%; height: 100%; }

/* ---- title ---- */

#title {
  display: grid; place-items: center; align-content: center; gap: 8px;
  padding: 24px 16px calc(32px + var(--safe-b));
}
#hero { width: min(62vw, 46vh); height: auto; aspect-ratio: 1; animation: bob 2.6s ease-in-out infinite; }
.wordmark {
  margin: 0;
  font-size: clamp(44px, 10vw, 96px); font-weight: 900; letter-spacing: -0.01em; line-height: 1;
  color: var(--pop);
  -webkit-text-stroke: 10px var(--paper); paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 var(--pop-deep));
}
.play {
  width: 132px; height: 132px; margin-top: 18px; border-radius: 50%;
  background: var(--pop);
  box-shadow: 0 9px 0 var(--pop-deep), 0 16px 28px rgba(75, 44, 69, 0.25);
  transition: transform 0.08s, box-shadow 0.08s;
}
.play svg { width: 70%; height: 70%; margin: 15%; }
.play:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--pop-deep), 0 8px 16px rgba(75, 44, 69, 0.25); }
@keyframes bob { 50% { transform: translateY(-14px) scale(1.02, 0.98); } }

/* ---- bench ---- */

#bench {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-areas: "table" "tray";
  padding: max(env(safe-area-inset-top, 0px), 12px) 14px 0;
}
.round {
  position: absolute; z-index: 5; top: max(env(safe-area-inset-top, 0px), 12px); left: 14px;
  width: 68px; height: 68px; border-radius: 50%; padding: 12px;
  background: var(--paper); box-shadow: 0 5px 0 #F2B6CF;
}
.round.right { left: auto; right: 14px; }
.round:active { transform: translateY(3px); box-shadow: 0 2px 0 #F2B6CF; }
#table {
  grid-area: table; position: relative; display: grid; place-items: center; overflow: hidden;
  margin-top: 84px;
  border-radius: 40px;
  background:
    repeating-linear-gradient(176deg, transparent 0 26px, rgba(201, 143, 90, 0.18) 26px 29px, transparent 29px 61px, rgba(255, 255, 255, 0.12) 61px 63px),
    linear-gradient(180deg, #F0CFA3, var(--wood) 55%, var(--grain));
  box-shadow: inset 0 0 0 6px rgba(201, 143, 90, 0.45), 0 10px 0 var(--wood-edge);
}
#mist { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#toy { position: relative; touch-action: none; will-change: transform; }
#toy canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#toy .final { opacity: 0; }
#toy.puffed .final { opacity: 1; animation: puff 0.9s cubic-bezier(.3, 1.6, .5, 1); }
#toy.puffed .under, #toy.puffed .paint, #toy.puffed .crumbs, #toy.puffed .card { opacity: 0; transition: opacity 0.25s; }
#toy .card.lift { animation: lift 0.55s ease-in forwards; }
@keyframes lift { to { transform: translate(8%, -40%) rotate(-12deg); opacity: 0; } }
@keyframes puff { 0% { transform: scale(0.94); } 40% { transform: scale(1.08, 1.02); } 70% { transform: scale(0.98, 1.03); } 100% { transform: none; } }
#toy .dent {
  position: absolute; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%; opacity: 0;
  background: radial-gradient(rgba(75, 44, 69, 0.22), rgba(75, 44, 69, 0) 70%);
  pointer-events: none;
}
.ghost {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

#tray {
  grid-area: tray; display: flex; justify-content: center; align-items: center; gap: 24px;
  padding: 22px 0 calc(var(--safe-b) + 28px);
}
#tools { display: flex; gap: 16px; }
#tools:empty { display: none; }
.tool {
  width: 112px; height: 112px; border-radius: 34px; padding: 10px;
  background: var(--paper); box-shadow: 0 6px 0 #F2B6CF;
  transition: transform 0.15s;
}
.tool.sponge { width: 150px; }
.tool.can svg { width: 54%; margin: 0 auto; }
.tool.on { box-shadow: 0 6px 0 #F2B6CF, 0 0 0 6px var(--pop); transform: translateY(-6px); }
.tool.bounce { animation: bounce 0.5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bounce { 0% { transform: scale(0.8); } 100% { transform: none; } }
.done { width: 112px; height: 112px; margin: 0; }

#cursor { position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; }
#cursor svg { position: absolute; }
#cursor[data-tool="sponge"] svg { width: 128px; height: 102px; left: -64px; top: -51px; }
/* the nozzle sits just right of the fingertip, the can tilted toward the paint as Pazu holds it */
#cursor[data-tool="can"] svg { width: 66px; height: 106px; left: 1px; top: -13px; transform: rotate(-30deg); transform-origin: 50% 1%; }

/* landscape: the tray moves to the right, as Pixel Lab's chips do */
@media (orientation: landscape) {
  #bench { grid-template-rows: 1fr; grid-template-columns: 1fr auto; grid-template-areas: "table tray"; padding-bottom: calc(var(--safe-b) + 14px); }
  #table { margin: 0 0 10px 96px; }
  #tray { flex-direction: column; padding: 0 0 0 18px; }
  #tools { flex-direction: column; }
  .tool.on { transform: translateX(-6px); }
}

/* ---- claw machine ---- */

#claw { display: grid; place-items: center; padding: 96px 16px calc(var(--safe-b) + 28px); }
#machine {
  position: relative; display: grid; grid-template-rows: auto 1fr auto;
  width: min(92vw, 70vh, 640px); height: min(78vh, 900px);
  padding: 14px; border-radius: 44px;
  background: var(--pop); box-shadow: 0 12px 0 var(--pop-deep), 0 24px 40px rgba(75, 44, 69, 0.25);
}
.marquee { display: flex; justify-content: space-around; padding: 6px 18px 14px; }
.marquee i { width: 18px; height: 18px; border-radius: 50%; background: #FFF6A8; box-shadow: 0 0 10px #FFF6A8; animation: blink 1.6s infinite; }
.marquee i:nth-child(even) { animation-delay: 0.8s; }
@keyframes blink { 50% { opacity: 0.45; } }
.glass {
  position: relative; overflow: hidden; border-radius: 28px;
  background: linear-gradient(160deg, #F4FBFF, #DCEFFC);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.7);
}
#claw-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.base { height: 64px; margin-top: 14px; border-radius: 24px; background: var(--pop-deep); box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.12); }

#capsule {
  position: absolute; z-index: 8; left: 50%; top: 50%; width: min(64vw, 46vh); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.2); opacity: 0;
  transition: transform 0.6s cubic-bezier(.3, 1.6, .5, 1), opacity 0.2s;
}
#capsule.in { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: wobble 1.4s 0.6s ease-in-out infinite; }
#capsule .half {
  position: absolute; left: 0; width: 100%; height: 50%; border: 6px solid rgba(75, 44, 69, 0.35);
  transition: transform 0.6s cubic-bezier(.4, 1.4, .6, 1), opacity 0.6s;
}
#capsule .top { top: 0; border-radius: 999px 999px 0 0; border-bottom-width: 3px; background: var(--top); }
#capsule .bottom { bottom: 0; border-radius: 0 0 999px 999px; border-top-width: 3px; background: var(--bottom); }
#capsule .top::after { content: ""; position: absolute; left: 18%; top: 22%; width: 22%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.7); transform: rotate(-30deg); }
#prize { position: absolute; inset: 6%; width: 88%; height: 88%; transform: scale(0.3); opacity: 0; transition: transform 0.7s 0.15s cubic-bezier(.3, 1.7, .5, 1), opacity 0.3s 0.15s; }
#capsule.open { animation: none; }
#capsule.open .top { transform: translate(-30%, -70%) rotate(-30deg); opacity: 0; }
#capsule.open .bottom { transform: translate(30%, 70%) rotate(25deg); opacity: 0; }
#capsule.open #prize { transform: none; opacity: 1; }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }

/* ---- album: a sticker-book page ---- */

#album { display: grid; padding: 96px 16px calc(var(--safe-b) + 24px); }
.book {
  overflow-y: auto; border-radius: 36px; padding: 24px;
  background: var(--paper); box-shadow: 0 0 0 10px #FFE8F1, 0 10px 0 10px #F2B6CF;
}
#stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 40vw), 1fr)); gap: 20px; }
.sticker { aspect-ratio: 1; border-radius: 28px; background: #FFF4F8; }
.sticker canvas { width: 100%; height: 100%; }
.sticker.made canvas { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 4px rgba(75, 44, 69, 0.18)); }
.sticker.fresh { animation: stick 0.8s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 0 0 5px #FFD54A; }
@keyframes stick { 0% { transform: scale(1.6) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(75, 44, 69, 0.35); }
.modal .card {
  display: grid; justify-items: center; gap: 16px; max-height: 92vh;
  width: min(520px, 92vw); padding: 24px; border-radius: 36px; background: var(--paper);
}
.modal .card > canvas { width: min(320px, 60vw); aspect-ratio: 1; }
.actions { display: flex; gap: 28px; }
.play.small { width: 104px; height: 104px; margin: 0; padding: 18px; }
.play.small svg { width: 100%; height: 100%; margin: 0; }
.play.mint { background: var(--mint); box-shadow: 0 9px 0 #2FA88A, 0 16px 28px rgba(75, 44, 69, 0.2); }
.play.mint svg { --can: #fff; }
.wordmark.small { font-size: clamp(36px, 7vmin, 56px); }
#news-items { display: flex; flex-direction: column; gap: 12px; width: 100%; min-height: 0; overflow-y: auto; }
.news-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 22px; background: #FFF4F8; text-align: left; font-size: 20px; color: var(--plum); }
.news-item.on { box-shadow: inset 0 0 0 4px var(--pop); }
.news-item .ico { flex: none; width: 76px; height: 76px; }
.news-item .ico canvas { width: 100%; height: 100%; }

/* ---- kit sheet (?sheet), for checking art by eye ---- */

#sheet { position: static; overflow: auto; padding: 16px; background: #fff; height: auto; }
#sheet .row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
#sheet .row b { width: 110px; font-size: 15px; }
#sheet canvas { width: 160px; height: 160px; background: var(--wood); border-radius: 12px; }
#sheet small { display: block; font-size: 11px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  #hero, .marquee i, #capsule.in { animation: none; }
  #toy.puffed .final { animation: none; }
}