* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100dvh; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Rounded", "Nunito", "Chalkboard SE", "Comic Sans MS", system-ui, sans-serif;
  background: linear-gradient(180deg, #aee9ff 0%, #d9f7ff 35%, #fff6d9 100%);
  color: #3a2b00;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
body { display: flex; flex-direction: column; }
#clouds { position: fixed; inset: 0; pointer-events: none; z-index: 0; font-size: 3rem; opacity: .6; }
#clouds span { position: absolute; animation: drift 18s linear infinite; }
#clouds span:nth-child(1){ top:6%; left:-10%; }
#clouds span:nth-child(2){ top:18%; left:-20%; animation-delay:-6s; font-size:2.2rem;}
#clouds span:nth-child(3){ top:2%; left:-15%; animation-delay:-12s; font-size:4rem;}
@keyframes drift { to { transform: translateX(120vw); } }
#confetti { position: fixed; inset:0; pointer-events:none; z-index: 60; }

#topbar {
  flex: 0 0 auto; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding: max(0.5rem, env(safe-area-inset-top)) 0.8rem 0.5rem;
  background: rgba(255,255,255,.8); backdrop-filter: blur(8px);
  border-bottom: 3px solid #ffd54d;
}
#logo { font-size: 1.4rem; font-weight: 900; }
#logo span { color:#e0448c; }
#top-controls { display:flex; align-items:center; gap:.5rem; }
#refThumb {
  width: 52px; height: 52px; object-fit: cover; border-radius: .7rem;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.round-btn {
  font-size:1.4rem; width:2.8rem; height:2.8rem; border-radius:50%;
  border:3px solid #fff; background:#fff; box-shadow:0 3px 0 #ddd; cursor:pointer;
}
.hidden{ display:none !important; }

main { flex: 1 1 auto; min-height: 0; position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; display:flex; flex-direction:column; }
.screen{ display:none; flex:1; min-height:0; flex-direction:column; }
.screen.active{ display:flex; }
#homeScreen { overflow-y:auto; padding:1rem 1rem 3rem; align-items:center; }
#homeScreen.active { display:block; }
h1{ font-size:2.4rem; text-align:center; margin:.4rem 0 0; color:#e0448c; text-shadow: 2px 2px 0 #fff;}
.subtitle{ text-align:center; font-size:1.3rem; margin:.2rem 0 1rem; font-weight:700;}
.big-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.big-btn{
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  font-size:1.4rem; font-weight:900; color:#4a2600;
  border:none; border-radius:1.5rem; padding:1rem 1.4rem; min-width:190px;
  cursor:pointer; box-shadow:0 6px 0 rgba(0,0,0,.15); border:4px solid #fff; text-align:center;
}
.big-btn:active{ transform: translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.15);}
.big-btn .emoji{ font-size:3rem; }
.pink{ background:#ff8fc3; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.2);}
.yellow{ background:#ffd54d; }
.green{ background:#7ed957; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.2);}
#sampleRow, #galleryWrap{ text-align:center; margin-top:1rem; }
#sampleThumbs, #gallery{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
#sampleThumbs img, #gallery img{
  width:min(42vw,170px); height:min(32vw,128px); object-fit:cover; border-radius:1.2rem;
  border:5px solid #fff; box-shadow:0 5px 12px rgba(0,0,0,.25); cursor:pointer;
}
.diff-pick { text-align:center; margin-top:1.2rem; }
.diff-pick p { font-weight:900; font-size:1.5rem; margin:.3rem; }
.piece-picker{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.piece-picker button{
  font-size:1.15rem; font-weight:900; min-width:5.5rem; padding:.6rem .8rem; line-height:1.2;
  border-radius:1.1rem; border:3px solid #ddd; background:#fff; cursor:pointer;
  min-height:56px;
}
.piece-picker button small { font-weight:700; opacity:.7; }
.piece-picker button.active{ border-color:#e0448c; background:#ffe3ef; }
.piece-picker.small button{ min-width:4.6rem; min-height:56px; font-size:1.5rem; padding:.35rem .6rem; display:flex; align-items:center; justify-content:center; gap:.2rem;}
.piece-picker.small button small { font-size:1rem; }
/* Big toddler difficulty cards */
.big-pick button{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  min-width:7.5rem; min-height:7.5rem; font-size:1.5rem; padding:.8rem;
  border-width:4px; border-radius:1.5rem;
}
.big-pick .big-emoji{ font-size:2.8rem; }
.big-pick .dots{ font-size:1rem; font-weight:700; opacity:.8; }
.diff-easy{ background:#e8f9e3; border-color:#7ed957; }
.diff-med{ background:#fff8e0; border-color:#ffca3a; }
.diff-hard{ background:#ffe9e9; border-color:#ff8f8f; }
.big-pick button.active{ outline:4px solid #e0448c; outline-offset:2px; }
.howto{
  margin:1.2rem auto 0; background:#fff; border-radius:1.2rem; padding:.9rem;
  font-size:1.2rem; text-align:center; max-width:440px; line-height:2; border:3px dashed #ffd54d;
}
#grownups{ margin:1rem auto; max-width:440px; background:#f3f3f3; border-radius:1rem; padding:.7rem 1rem; font-size:1rem;}
.tip{ font-size:.9rem; opacity:.75;}
#hintCheck, #refCheck{ width:1.4rem; height:1.4rem; }

/* PLAY — fills iPad */
#playScreen { padding:.4rem .6rem calc(.5rem + env(safe-area-inset-bottom)); }
#playTop{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap;}
#progress{ font-size:1.5rem; font-weight:900; background:#fff; padding:.35rem 1rem; border-radius:2rem; border:4px solid #ffd54d;}
.pill-btn{
  font-size:1.6rem; font-weight:800; border-radius:2rem; padding:.55rem 1.1rem;
  border:3px solid #fff; background:#fff; box-shadow:0 3px 0 #ddd; cursor:pointer;
  min-height:56px;
}
.pill-btn small{ font-size:1.05rem; }
label.pill-btn{ display:inline-block; }
.pill-btn:active{ transform:scale(.95);}
#kidHint{
  flex:0 0 auto; text-align:center; font-size:1.25rem; font-weight:900;
  background:rgba(255,255,255,.75); border-radius:2rem; margin:.3rem auto 0;
  padding:.2rem 1rem; width:fit-content; max-width:96%; z-index:5;
}
#praise{
  flex:0 0 auto; text-align:center; font-size:1.7rem; font-weight:900; min-height:2.2rem;
  color:#e0448c; text-shadow:2px 2px 0 #fff; transition: transform .2s; pointer-events:none; z-index:5;
}
#praise.zoom{ transform: scale(1.25) rotate(-3deg); }

#playField{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
  background:rgba(255,255,255,.45); border-radius:1.2rem; border:3px dashed #ffb1d4;
  touch-action:none;
}
#board{
  position:absolute; border-radius:.6rem; overflow:visible;
  background:#fff8e7;
  box-shadow:0 10px 28px rgba(0,0,0,.28); border:5px solid #fff;
  touch-action:none; z-index:1;
}
#boardHint { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; opacity:.38; pointer-events:none; border-radius:.3rem; }
#boardOutline { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
canvas.jpiece {
  position:absolute; touch-action:none; cursor:grab; z-index:10;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.35));
  transition: filter .15s;
}
canvas.jpiece.dragging { cursor:grabbing; filter: drop-shadow(0 12px 14px rgba(0,0,0,.45)); }
canvas.jpiece.near {
  filter: drop-shadow(0 0 10px #ffd54d) drop-shadow(0 0 22px #ff9d00) drop-shadow(0 5px 6px rgba(0,0,0,.35));
}
canvas.jpiece.placed { cursor:default; filter:none; z-index:5 !important; }
canvas.jpiece.fly { transition: left .35s cubic-bezier(.3,1.4,.5,1), top .35s cubic-bezier(.3,1.4,.5,1); }
#peekImg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(86%,460px); border-radius:1rem; border:6px solid #fff;
  box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:50;
}
#playActions{ flex:0 0 auto; display:flex; gap:.7rem; justify-content:center; margin-top:.45rem; flex-wrap:wrap;}

#winOverlay{
  position:fixed; inset:0; z-index:70; background:rgba(255,180,220,.55);
  backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding:1rem;
}
#winCard{
  background:#fff; border-radius:2rem; padding:1.4rem; text-align:center;
  max-width:440px; width:100%; border:6px solid #ffd54d;
  box-shadow:0 20px 60px rgba(0,0,0,.3); animation: winIn .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes winIn { from{transform:scale(.5) rotate(-5deg); opacity:0;} }
#winStars{ font-size:2.8rem; animation: twinkle 1s infinite alternate; }
@keyframes twinkle { to{transform:scale(1.15);} }
#winCard h2{ font-size:1.9rem; color:#e0448c; margin:.3rem 0 .8rem;}
#winImg{ width:100%; border-radius:1.2rem; border:4px solid #eee; }
.win-btns{ display:flex; gap:.7rem; margin-top:1rem; }
.win-btns .big-btn{ flex:1; min-width:0; font-size:1.25rem; padding:.8rem .4rem;}

@media (max-width:480px){
  h1{ font-size:1.9rem; }
  .big-btn{ min-width:150px; font-size:1.15rem;}
  #logo{ font-size:1.15rem;}
  #praise{ font-size:1.4rem; }
}