/* Toybox: bright, round and big enough for small fingers. */
@font-face {
  font-family: "Nunito Sans";
  font-weight: 900;
  src: url("/site/brand/NunitoSans-Black.woff2") format("woff2");
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #3b2f4a;
  --paper: #fff7ef;
  --shell-ink: #3b2f4a;
  --shell-paper: #fff7ef;
  --shell-accent: #ff8fb0;
  --shell-font: "Nunito Sans", system-ui, sans-serif;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: #ffe9f1;
  color: var(--ink);
  font: 18px/1.4 "Nunito Sans", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}
button {
  font: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 4px solid #5b6cff;
  outline-offset: 3px;
}

/* ---------- shelf ---------- */
#shelf {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 12% 8%, #fff3b0 0 90px, transparent 91px),
    radial-gradient(circle at 92% 30%, #c8f0ff 0 120px, transparent 121px),
    radial-gradient(circle at 20% 85%, #d8f5c8 0 140px, transparent 141px),
    #ffe9f1;
}
header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 1100px;
  margin: 0 auto 14px;
}
h1 {
  margin: 4px 0 0;
  font-size: clamp(44px, 11vw, 72px);
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1;
}
h1 span {
  display: inline-block;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
  animation: bob 2.6s ease-in-out infinite;
}
h1 span:nth-child(1) { color: #ff6b8b; animation-delay: 0s; }
h1 span:nth-child(2) { color: #ffb938; animation-delay: 0.15s; }
h1 span:nth-child(3) { color: #4cc9f0; animation-delay: 0.3s; }
h1 span:nth-child(4) { color: #7bd88f; animation-delay: 0.45s; }
h1 span:nth-child(5) { color: #b388ff; animation-delay: 0.6s; }
h1 span:nth-child(6) { color: #ff8a4c; animation-delay: 0.75s; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.menu {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 3px solid rgba(59, 47, 74, 0.25);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(59, 47, 74, 0.7);
  font-size: 20px;
}
.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto 18px;
}
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  border: 4px solid var(--ink);
  background: #fff;
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  white-space: nowrap;
}
.pill.small {
  font-size: 18px;
  padding: 3px 12px;
}
.pill.bump {
  animation: bump 0.5s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes bump {
  40% { transform: scale(1.3); background: #fff3a8; }
}
.chunky {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 6px;
  border-radius: 24px;
  border: 4px solid var(--ink);
  background: #fff;
  box-shadow: 0 6px 0 var(--ink);
}
.chunky svg {
  width: 100%;
  height: 100%;
}
.chunky:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--ink);
}
.chunky > span {
  position: absolute;
  bottom: 2px;
  right: 2px;
  min-width: 30px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: #ffd23f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}
.machine.ready {
  background: #fff3a8;
  animation: wobble 1.6s ease-in-out infinite;
}
.machine.ready > span {
  background: #7bd88f;
}
.machine.nope {
  animation: shake 0.4s;
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-7deg) scale(1.06); }
  20% { transform: rotate(6deg) scale(1.06); }
  30% { transform: rotate(0); }
}
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.earned {
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translateX(-50%);
  font-size: 44px;
  font-weight: 900;
  color: #ffd23f;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
  animation: rise 1.6s ease-out forwards;
}
@keyframes rise {
  0% { opacity: 0; transform: translate(-50%, 30px) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
}

/* ---------- collection shelf ---------- */
#collection {
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #f6e3cf;
}
#collection header {
  min-height: 72px;
}
#collection h2 {
  margin: 0;
  font-size: clamp(30px, 8vw, 48px);
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ink);
}
#coll-count {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
#coll {
  max-width: 1100px;
  margin: 0 auto;
}
#coll h3 {
  margin: 18px 4px 6px;
  font-size: 22px;
  font-weight: 900;
}
.shelfrow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0 6px;
  padding: 0 10px;
  border-radius: 18px;
  border: 4px solid var(--ink);
  background: repeating-linear-gradient(to bottom, #fff6ea 0 78px, #d98f56 78px 90px, #b86f3c 90px 96px);
}
.shelfrow button {
  height: 96px;
  padding: 0 0 18px;
  border: 0;
  background: none;
  position: relative;
}
.shelfrow canvas {
  width: 78px;
  height: 78px;
}
.shelfrow button.new canvas {
  animation: pop-in 0.7s cubic-bezier(0.3, 1.8, 0.5, 1) 0.3s backwards;
}
.shelfrow button b {
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 12px;
  font-weight: 900;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 5px;
}
.shelfrow button.wiggle canvas {
  animation: shake 0.4s;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 420px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 8px 12px;
  border-radius: 28px;
  border: 4px solid var(--ink);
  background: var(--c, #fff);
  color: var(--ink);
  box-shadow: 0 7px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  animation: pop-in 0.4s ease-out backwards;
}
.tile:active {
  transform: translateY(5px) scale(0.97);
  box-shadow: 0 2px 0 var(--ink);
}
.tile canvas {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
}
.tile b {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
}
.tile .stars {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  color: #ffc93d;
  -webkit-text-stroke: 1.5px var(--ink);
  letter-spacing: -2px;
}
@keyframes pop-in {
  from { transform: scale(0.6); opacity: 0; }
}
.grownups {
  max-width: 1100px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
}

/* ---------- a toy ---------- */
#play {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}
#stage {
  display: block;
  touch-action: none;
}
.round {
  position: absolute;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  padding: 0;
}
.round svg {
  width: 60%;
  height: 60%;
}
.round:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--ink);
}
.home {
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  width: 56px;
  height: 56px;
}
.done {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 28px;
  pointer-events: none;
}
.done[hidden] {
  display: none;
}
.done .round {
  position: static;
  pointer-events: auto;
  animation: pop-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
.round.big {
  width: 96px;
  height: 96px;
}
.round.again {
  background: #7bd88f;
  animation: pop-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) backwards, pulse 1.4s ease-in-out 0.6s infinite;
}
@keyframes pulse {
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  h1 span, .round.again, .tile, .machine.ready, .earned { animation: none; }
}

/* ---------- night time ---------- */
.chunky.sky .moon,
body.night .chunky.sky .sun {
  display: none;
}
body.night .chunky.sky .moon {
  display: block;
}
body.night .chunky.sky {
  background: #2d3170;
}
body.night,
body.night #shelf,
body.night #collection {
  background:
    radial-gradient(circle at 9% 6%, #fff3b0 0 30px, transparent 31px),
    radial-gradient(circle at 9% 6%, rgba(255, 243, 176, 0.25) 0 80px, transparent 81px),
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 30% 6%, #fff 99%, transparent),
    radial-gradient(2px 2px at 47% 22%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 63% 12%, #fff 99%, transparent),
    radial-gradient(2px 2px at 72% 30%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 22% 40%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 93% 44%, #fff 99%, transparent),
    radial-gradient(2px 2px at 6% 66%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 55% 70%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 88% 82%, #fff 99%, transparent),
    linear-gradient(#1f2358, #3a3a86);
  background-attachment: fixed;
}
body.night .grownups {
  color: #e7e4ff;
}
body.night #collection h3 {
  color: #fff;
}

.done svg[hidden] {
  display: none;
}