*{ box-sizing:border-box; margin:0; padding:0; }

html, body{ height:100%; }

body{
  overflow:hidden;
  font-family: system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg,#7fbcf5 0%,#a9d7fa 40%,#e6f5ff 100%);
  -webkit-user-select:none;
  user-select:none;
}

#playground{ position:fixed; inset:0; }

/* ---- clouds ---- */
.cloud{
  position:absolute; left:0;
  background:#fff; border-radius:999px;
  opacity:.8; filter:blur(1px);
  animation: drift linear infinite;
  pointer-events:none;
  z-index:0;
}
.cloud::before,
.cloud::after{
  content:''; position:absolute; background:#fff; border-radius:50%;
}
.cloud::before{ width:58%; height:150%; top:-75%; left:16%; }
.cloud::after{ width:44%; height:115%; top:-52%; left:56%; }

@keyframes drift{
  from{ transform: translateX(-35vw); }
  to  { transform: translateX(135vw); }
}

/* ---- blocks ---- */
.block{
  position:absolute; left:0; top:0;
  cursor:pointer;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.16));
  transition: filter .2s;
  will-change: transform;
}
.block:hover{ filter: drop-shadow(0 8px 16px rgba(0,0,0,.28)); }

.cubes{
  display:grid; gap:2px; padding:2px;
  width:fit-content;
  background: var(--color);
  border-radius:10px;
  border:2px solid rgba(0,0,0,.08);
}
.cube{
  width:26px; height:26px; border-radius:5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color) 78%, #fff 22%), var(--color) 62%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}

.face{ position:absolute; inset:0; pointer-events:none; }
.eye{
  position:absolute; top:24%;
  width:var(--eyew); height:var(--eyeh);
  background:#fff; border-radius:50%;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.eye::after{
  content:''; position:absolute; left:36%; top:20%;
  width:40%; height:46%;
  background:#263238; border-radius:50%;
  transition: height .06s;
}
.eye.left{ left:16%; }
.eye.right{ right:16%; }

.block.blink .eye::after{ height:8%; top:44%; }

.mouth{
  position:absolute; top:50%; left:50%; transform:translateX(-50%);
  width:var(--mouthw); height:calc(var(--mouthw) * .5);
  border:2px solid #263238; border-top:none; border-radius:0 0 999px 999px;
}

.num{
  position:absolute; bottom:4%; left:50%; transform:translateX(-50%);
  font-weight:800; font-size:var(--numfs); color:#fff;
  text-shadow: 0 2px 3px rgba(0,0,0,.28);
  pointer-events:none;
  line-height:1;
}

.block.pop{
  transition: transform .3s ease-in, opacity .3s ease-in, filter .3s;
  opacity:0;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* ---- plane gear ---- */
.wings{ position:absolute; inset:0; pointer-events:none; }
.block.plane .wings::before,
.block.plane .wings::after{
  content:''; position:absolute; top:50%; transform:translateY(-50%);
  width:64px; height:22px; background:#37474f; border-radius:8px;
  opacity:.95;
  z-index:-1;
}
.block.plane .wings::before{ left:-68px; }
.block.plane .wings::after{ right:-68px; }

.prop{ position:absolute; top:-10px; left:50%; width:40px; height:40px; transform:translateX(-50%); z-index:3; pointer-events:none; }
.block.plane .prop{ display:block; }
.prop span{ position:absolute; inset:0; animation: spin .12s linear infinite; }
.prop span::before{
  content:''; position:absolute; top:50%; left:0; width:40px; height:6px;
  background: rgba(80,80,80,.85); border-radius:3px; transform:translateY(-50%);
}
.prop span::after{
  content:''; position:absolute; left:50%; top:0; width:6px; height:40px;
  background: rgba(80,80,80,.85); border-radius:3px; transform:translateX(-50%);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---- toolbar ---- */
#toolbar{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  max-width:94vw;
  padding:10px 12px;
  background:rgba(255,255,255,.85);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  z-index:10;
  backdrop-filter: blur(6px);
}
#pad{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
#pad button{
  width:40px; height:40px; border:none; border-radius:10px;
  color:#fff; font-weight:800; font-size:18px; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.20);
  transition: transform .08s;
}
#pad button:hover{ transform: translateY(-2px) scale(1.08); }
#pad button:active{ transform: translateY(1px); }

#planeBtn{
  height:40px; padding:0 14px; border:none; border-radius:10px;
  background:#1e88e5; color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.20);
  transition: transform .08s;
}
#planeBtn:hover{ transform: translateY(-2px); }
#planeBtn:active{ transform: translateY(1px); }

#musicBtn{
  height:40px; padding:0 14px; border:none; border-radius:10px;
  background:#7e57c2; color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.20);
  transition: transform .08s;
}
#musicBtn:hover{ transform: translateY(-2px); }
#musicBtn:active{ transform: translateY(1px); }

#clearBtn{
  height:40px; padding:0 14px; border:none; border-radius:10px;
  background:#ef5350; color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.20);
  transition: transform .08s;
}
#clearBtn:hover{ transform: translateY(-2px); }
#clearBtn:active{ transform: translateY(1px); }